:root { --bg:#0e0f12; --card:#1a1c21; --text:#f2f3f5; --muted:#8b9099; --off:#3a3d45; --on:#22c55e; --danger:#ef4444; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--bg); color:var(--text); }
body { font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
               max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
button { border:0; border-radius:10px; font:inherit; font-weight:600; color:var(--text); background:var(--off);
         min-height:44px; padding:10px 14px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button.ghost { background:transparent; color:var(--muted); }
button.icon { min-width:44px; padding:10px; }
.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.top h1 { font-size:22px; }
#grid { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:700px) { #grid { grid-template-columns:repeat(auto-fill,minmax(460px,1fr)); } }
.empty { color:var(--muted); text-align:center; padding:40px 0; }
.card { background:var(--card); border-radius:14px; overflow:hidden; }
.video { position:relative; aspect-ratio:4/3; background:#000; overflow:hidden; }
.video img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform-origin:50% 50%; }
.badge { position:absolute; top:10px; left:10px; background:rgba(0,0,0,.55); padding:3px 9px; border-radius:99px;
         font-size:12px; font-weight:600; letter-spacing:.04em; }
.badge::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px;
                 vertical-align:1px; background:var(--danger); }
.badge.offline::before { background:var(--muted); }
.bar { display:flex; align-items:center; gap:8px; padding:10px 12px; }
.name { flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sound.on { background:var(--on); color:#04210f; }
.adjust-panel { padding:0 12px 12px; display:grid; gap:10px; }
.adjust-panel .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.adjust-panel input[type=range] { flex:1; min-width:140px; accent-color:var(--on); height:44px; }
.adjust-panel output { width:52px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.overlay { position:fixed; inset:0; background:#000; z-index:10; display:flex; }
.overlay[hidden] { display:none; }
.overlay-stage { position:relative; flex:1; }
.overlay-stage .video { position:absolute; inset:0; aspect-ratio:auto; height:100%; }
.overlay-close { position:absolute; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right));
                 background:rgba(0,0,0,.6); min-width:44px; }
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { background:var(--card); border-radius:14px; padding:24px; width:min(360px,100%); display:grid; gap:14px; }
.login-card h1 { font-size:22px; }
.login-card label { display:grid; gap:6px; color:var(--muted); font-size:14px; }
.login-card input { font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--off);
                    border-radius:10px; padding:12px; min-height:44px; }
.login-card button { background:var(--on); color:#04210f; }
.error { color:var(--danger); }