:root{
  --primary:#2A9D8F; --primary-d:#21867A; --accent:#E76F51; --accent-d:#D65a3d;
  --bg:#F4F1EA; --panel:#FFFFFF; --sand:#FBF6EC; --sand2:#F3EADB;
  --text:#264653; --muted:#6E8089; --line:#E7DECF;
  --ok:#4A9D5B; --warn:#E9A23B; --danger:#D64545; --live:#E4373A;
  --shadow:0 2px 8px rgba(38,70,83,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
.app{display:flex;min-height:100vh}
.muted{color:var(--muted)}

/* Sidebar */
.sidebar{width:248px;background:var(--text);color:#DCE6EA;display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 22px}
.brand-logo{width:44px;height:44px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:22px}
.brand-name{font-size:19px;font-weight:800;color:#fff}
.brand-sub{font-size:12px;color:#8FA6AF}
nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-item{display:flex;align-items:center;gap:11px;background:transparent;border:0;color:#B6C6CD;padding:11px 13px;border-radius:11px;font-size:14px;font-weight:600;cursor:pointer;text-align:left;transition:.15s}
.nav-item:hover{background:#ffffff12;color:#fff}
.nav-item.active{background:var(--primary);color:#fff}
.ni{font-size:16px;width:20px;text-align:center}
.badge{margin-left:auto;background:var(--accent);color:#fff;border-radius:9px;padding:1px 7px;font-size:11px;font-weight:800}
.badge:empty{display:none}
.sidebar-foot{border-top:1px solid #ffffff1a;padding-top:14px;display:flex;flex-direction:column;gap:14px}
.branch-pick label{font-size:11px;color:#8FA6AF;display:block;margin-bottom:4px}
.branch-pick select{width:100%;background:#ffffff14;border:1px solid #ffffff26;color:#fff;padding:8px;border-radius:9px;font-size:13px}
.user{display:flex;align-items:center;gap:10px}
.ava{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.uname{font-weight:700;color:#fff;font-size:13px}.urole{font-size:11px;color:#8FA6AF}
.powered{display:block;text-align:center;font-size:11px;color:#7c8f97;text-decoration:none;margin-top:4px}
.powered b{color:#C4A35A}

/* Main */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 30px;background:var(--panel);border-bottom:1px solid var(--line)}
.topbar h1{font-size:22px;font-weight:800}
.topbar-actions{display:flex;gap:10px;align-items:center}
#search{width:280px;padding:10px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px;background:var(--sand)}
.content{padding:26px 30px;overflow:auto}

/* Buttons */
.btn{border:0;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.btn.primary{background:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-d)}
.btn.ghost{background:var(--sand2);color:var(--text)}.btn.ghost:hover{background:#e9ddc7}
.btn.ok{background:var(--ok);color:#fff}.btn.small{padding:7px 12px;font-size:13px}
.btn.line{background:#fff;border:1.5px solid var(--primary);color:var(--primary)}

/* Cards / stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.stat .num{font-size:30px;font-weight:800}
.stat .lbl{font-size:13px;color:var(--muted);margin-top:2px}
.stat .ico{float:right;font-size:22px;opacity:.9}
.stat.accent{border-left:4px solid var(--accent)}
.stat.warn{border-left:4px solid var(--warn)}
.stat.ok{border-left:4px solid var(--ok)}
.stat.tp{border-left:4px solid var(--primary)}

.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);margin-bottom:22px}
.panel h3{font-size:16px;font-weight:800;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.panel h3 .link{font-size:13px;color:var(--primary);cursor:pointer;font-weight:700}

/* Table */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:2px solid var(--line);text-transform:uppercase;letter-spacing:.3px}
td{padding:12px;border-bottom:1px solid var(--line);font-size:14px}
tr:hover td{background:var(--sand)}
.rowclick{cursor:pointer}
.petcell{display:flex;align-items:center;gap:10px}
.petava{width:34px;height:34px;border-radius:9px;background:var(--sand2);display:flex;align-items:center;justify-content:center;font-size:18px}
.sub{font-size:12px;color:var(--muted)}

/* Pills */
.pill{display:inline-block;padding:3px 10px;border-radius:8px;font-size:12px;font-weight:700}
.pill.ok{background:#E4F3EF;color:var(--primary-d)}
.pill.warn{background:#FCF3E0;color:#B77A16}
.pill.danger{background:#FBE7E7;color:var(--danger)}
.pill.info{background:#E7EFF6;color:#2C6088}
.pill.gray{background:#EEE9DF;color:var(--muted)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--live);display:inline-block;margin-right:5px;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Request cards */
.req{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.req .rq-actions{display:flex;gap:8px}

/* Camera grid */
.camgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cam{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.cam .feed{aspect-ratio:16/9;background:linear-gradient(135deg,#2f3d44,#1c262b);display:flex;align-items:center;justify-content:center;color:#7c8f97;font-size:34px;position:relative}
.cam .lv{position:absolute;top:8px;left:8px;background:#00000066;color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:7px}
.cam .cinfo{padding:12px 14px}
.cam .cname{font-weight:800}.cam .cmap{font-size:12px;color:var(--muted);margin-top:2px}

/* Drawer */
.backdrop{position:fixed;inset:0;background:#00000055;z-index:40}
.drawer{position:fixed;top:0;right:0;width:440px;max-width:94vw;height:100vh;background:var(--bg);z-index:50;box-shadow:-8px 0 30px rgba(0,0,0,.15);display:flex;flex-direction:column}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;background:var(--panel);border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:19px;font-weight:800}
.drawer-body{padding:22px;overflow:auto}
.hidden{display:none}
.kv{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}
.kv .k{color:var(--muted)}.kv .v{font-weight:700;text-align:right}
.section-t{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:20px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--sand2);border-radius:9px;padding:6px 11px;font-size:13px;font-weight:600}