:root{--bg: #080b12;--bg-grad: radial-gradient(1100px 700px at 78% -12%, #16203a 0%, #080b12 55%);--panel: #10141f;--panel-2: #141a28;--elev: #1a2232;--border: rgba(255, 255, 255, .07);--border-strong: rgba(255, 255, 255, .13);--text: #e8edf7;--muted: #8a94a9;--brand: #5b8cff;--brand-700: #3f6fe0;--green: #22c55e;--amber: #f59e0b;--red: #ef4444;--purple: #a855f7;--radius: 14px;--radius-sm: 10px;--shadow: 0 10px 30px rgba(0, 0, 0, .4);--sidebar-w: 236px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg-grad);background-color:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}.muted{color:var(--muted)}.small{font-size:.78rem}.ico-danger{color:var(--red)}.btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid transparent;border-radius:var(--radius-sm);padding:.55rem .85rem;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-700));color:#fff;box-shadow:0 4px 14px #5b8cff4d}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}.btn-ghost:hover:not(:disabled){background:var(--elev)}.btn-block{width:100%;justify-content:center;padding:.7rem}.link-btn{background:none;border:none;color:var(--brand);cursor:pointer;font-size:.85rem;padding:.2rem}.link-btn:hover{text-decoration:underline}.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s}.icon-btn:hover{background:var(--elev);color:var(--text)}label{display:flex;flex-direction:column;gap:.4rem;font-size:.82rem;color:var(--muted)}.field{display:flex;align-items:center;gap:.5rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 .7rem;color:var(--muted);transition:border-color .15s,box-shadow .15s}.field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px #5b8cff2e}.field input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:.92rem;padding:.6rem 0}.brand,.sidebar-brand{display:flex;align-items:center;gap:.6rem}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--brand),var(--purple));color:#fff;box-shadow:0 6px 16px #5b8cff59}.brand-name{font-size:1.12rem;font-weight:600;letter-spacing:-.02em}.brand-name b{color:var(--brand);font-weight:800}.shell{display:flex;min-height:100%}.sidebar{width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;gap:1.2rem;padding:1.1rem .9rem;border-right:1px solid var(--border);background:linear-gradient(180deg,#141a2899,#0a0d1499);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;height:100vh}.sidebar-brand{padding:.4rem .5rem}.nav{display:flex;flex-direction:column;gap:.25rem;flex:1}.nav-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:var(--radius-sm);color:var(--muted);font-weight:550;cursor:pointer;transition:all .15s;font-size:.9rem}.nav-item:hover{background:var(--elev);color:var(--text)}.nav-item.active{background:#5b8cff24;color:#cfe0ff;box-shadow:inset 2px 0 0 var(--brand)}.nav-badge{margin-left:auto;background:var(--elev);color:var(--muted);border-radius:999px;padding:.05rem .5rem;font-size:.72rem}.sidebar-foot{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-top:1px solid var(--border)}.user-chip{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0}.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,var(--brand),var(--purple));color:#fff;font-weight:700;font-size:.85rem}.user-name{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;background:#080b12bf;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.topbar h1{font-size:1.3rem}.topbar-right{display:flex;align-items:center;gap:.7rem}.conn{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;padding:.4rem .7rem;border-radius:999px;border:1px solid var(--border)}.conn-on{color:#9af5c0;background:#22c55e1a;border-color:#22c55e4d}.conn-off{color:#ffd99a;background:#f59e0b1a;border-color:#f59e0b4d}.density{display:flex;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.density button{background:none;border:none;color:var(--muted);padding:.45rem .6rem;cursor:pointer;display:grid;place-items:center;transition:all .15s}.density button:hover{color:var(--text)}.density button.on{background:var(--brand);color:#fff}.content{display:flex;gap:1.25rem;padding:1.25rem 1.5rem;align-items:flex-start}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.25rem}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.stat-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem}.stat-card-head{display:flex;align-items:center;justify-content:space-between}.stat-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px}.stat-value{font-size:1.85rem;font-weight:700;line-height:1;letter-spacing:-.02em}.stat-label{font-size:.82rem;color:var(--muted);display:flex;gap:.4rem;align-items:baseline}.stat-hint{font-size:.72rem;opacity:.7}.grid{display:grid;gap:1rem}.grid.density-lg{grid-template-columns:repeat(auto-fill,minmax(460px,1fr))}.grid.density-md{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}.grid.density-sm{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.tile{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .15s,transform .15s}.tile:hover{border-color:var(--border-strong)}.tile-live{box-shadow:0 0 0 1px #22c55e26}.tile-video{position:relative;aspect-ratio:16 / 9;background:#05070c;overflow:hidden}.tile-video video{width:100%;height:100%;object-fit:cover;display:block}.tile-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;background:repeating-linear-gradient(45deg,#070b12,#070b12 12px,#0a0f18 12px,#0a0f18 24px)}.tile-top{position:absolute;top:.6rem;left:.6rem;right:.6rem;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .5rem;border-radius:999px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.chip-dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.chip-live{color:#9af5c0}.chip-live .chip-dot{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.5s infinite}.chip-connecting{color:#ffd99a}.chip-connecting .chip-dot{background:var(--amber);animation:pulse 1.1s infinite}.chip-stopped{color:#c2cadb}.chip-error{color:#ffb1b1}.chip-error .chip-dot{background:var(--red)}.tile-badges{display:flex;gap:.35rem}.tile-badges span{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:600;padding:.2rem .45rem;border-radius:6px;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#cfe0ff}.tile-identity{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .6rem;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);pointer-events:none}.tile-identity h3{font-size:.95rem}.tile-identity span{display:inline-flex;align-items:center;gap:.25rem;font-size:.74rem;color:#b9c2d4}.tile-controls{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;gap:.5rem;align-items:center;justify-content:center;opacity:0;background:#05070c59;transition:opacity .15s}.tile-video:hover .tile-controls{opacity:1}.ctrl{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 .6rem;border-radius:10px;border:1px solid var(--border-strong);background:#10141fe6;color:var(--text);cursor:pointer;font-size:.78rem;font-weight:700;transition:all .15s}.ctrl:hover{background:var(--elev);transform:translateY(-1px)}.ctrl-start{color:#9af5c0;border-color:#22c55e80}.ctrl-stop{color:#ffb1b1;border-color:#ef444480}.ctrl-danger{color:#fff;background:var(--red);border-color:var(--red)}.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .8rem;border-top:1px solid var(--border)}.tile-last{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:500}.tile-last .muted{margin-left:.2rem;font-weight:400}.tile-count{font-size:.72rem;font-weight:700;color:var(--amber);background:#f59e0b1f;border-radius:999px;padding:.1rem .5rem}.tile-skeleton{aspect-ratio:auto;height:280px;background:linear-gradient(100deg,var(--panel) 30%,var(--elev) 50%,var(--panel) 70%);background-size:200% 100%;animation:shimmer 1.4s infinite;border:1px solid var(--border)}.activity{width:320px;flex-shrink:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;max-height:calc(100vh - 8.5rem);position:sticky;top:6.5rem;overflow:hidden}.activity-head{display:flex;align-items:center;gap:.5rem;padding:.9rem 1rem;border-bottom:1px solid var(--border);font-weight:650;font-size:.92rem}.activity-count{margin-left:auto;background:#f59e0b24;color:var(--amber);border-radius:999px;padding:.05rem .5rem;font-size:.72rem;font-weight:700}.activity-list{overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.3rem}.activity-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:var(--radius-sm);transition:background .15s;animation:slideIn .25s ease}.activity-item:hover{background:var(--elev)}.activity-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#ef444424;color:#ff8e8e;flex-shrink:0}.activity-body{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}.activity-body strong{font-size:.84rem;font-weight:600}.activity-body .muted{font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}.activity-conf{font-size:.78rem;font-weight:700;color:var(--amber)}.activity-empty{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;color:var(--muted);padding:2.5rem 1rem}.activity-empty p{margin:.3rem 0 0;font-weight:600;color:var(--text)}.activity-empty span{font-size:.78rem}.empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:4rem 1rem}.empty-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--elev);color:var(--brand)}.auth-error{background:#ef44441f;border:1px solid rgba(239,68,68,.35);color:#ff9a9a;padding:.6rem .75rem;border-radius:var(--radius-sm);font-size:.85rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#03060cb3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:30;padding:1.5rem;animation:fadeIn .15s}.modal{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem;display:flex;flex-direction:column;gap:.9rem}.modal-title{display:flex;align-items:center;gap:.6rem}.modal-title h2{font-size:1.1rem;flex:1}.modal-title-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#5b8cff26;color:var(--brand)}.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.3rem}.cam-modal{width:100%;max-width:960px;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.cam-modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--border)}.cam-modal-head h2{font-size:1.15rem}.cam-modal-head .muted{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem}.cam-modal-stats{display:flex;align-items:center;gap:.9rem;font-size:.85rem;color:var(--muted)}.cam-modal-stats span{display:inline-flex;align-items:center;gap:.3rem}.cam-modal-body{display:flex;gap:0}.cam-modal-video{position:relative;flex:1;aspect-ratio:16 / 9;background:#05070c}.cam-modal-video video{width:100%;height:100%;object-fit:contain}.cam-modal-alerts{width:280px;flex-shrink:0;border-left:1px solid var(--border);padding:1rem;overflow-y:auto;max-height:540px}.cam-modal-alerts h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:.7rem}.cam-modal-alerts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.cam-modal-alerts li{display:flex;align-items:center;gap:.45rem;font-size:.82rem}.cam-modal-alerts li .activity-conf{margin-left:auto}.auth-shell{min-height:100%;display:grid;grid-template-columns:1fr 1fr}.auth-aside{display:flex;flex-direction:column;justify-content:center;gap:1.5rem;padding:3rem;background:linear-gradient(160deg,#5b8cff1f,#a855f70f);border-right:1px solid var(--border)}.auth-aside h2{font-size:1.9rem;line-height:1.25;font-weight:600;max-width:460px}.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}.auth-points li{display:flex;align-items:center;gap:.6rem;color:var(--muted)}.auth-points li:before{content:"";width:18px;height:18px;border-radius:50%;background:#22c55e2e;box-shadow:inset 0 0 0 2px var(--green);flex-shrink:0}.auth-card{align-self:center;justify-self:center;width:100%;max-width:380px;padding:2rem;display:flex;flex-direction:column;gap:.9rem}.auth-card h1{font-size:1.5rem}.auth-sub{margin:-.4rem 0 .6rem;color:var(--muted);font-size:.9rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes slideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--brand);animation:spin .8s linear infinite}@media (max-width: 1100px){.content{flex-direction:column}.activity{width:100%;position:static;max-height:360px}.stats-row{grid-template-columns:repeat(2,1fr)}}@media (max-width: 760px){.sidebar{position:fixed;bottom:0;top:auto;left:0;right:0;width:100%;height:auto;flex-direction:row;align-items:center;z-index:20;gap:.5rem;padding:.5rem}.sidebar-brand,.sidebar-foot{display:none}.nav{flex-direction:row;justify-content:space-around}.nav-item span:not(.nav-badge){display:none}.main{padding-bottom:4rem}.auth-shell{grid-template-columns:1fr}.auth-aside{display:none}.cam-modal-body{flex-direction:column}.cam-modal-alerts{width:100%;border-left:none;border-top:1px solid var(--border)}}