:root{
  --bg:#0b0f17; --panel:#141b26; --panel2:#1b2433; --line:#283142;
  --txt:#e8eef6; --muted:#93a1b3; --accent:#3b82f6; --ok:#22c55e; --danger:#ef4444; --warn:#f59e0b;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background:radial-gradient(1100px 700px at 75% -15%,rgba(59,130,246,.10),transparent),var(--bg);
  color:var(--txt);-webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
.muted{color:var(--muted)}
.grow{flex:1}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;cursor:pointer;text-decoration:none;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);
  padding:.6rem .9rem;border-radius:10px;font-size:1rem;line-height:1;transition:.15s;font-family:inherit;
}
.btn:hover{border-color:#3c4a63;background:#222d40}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.small{padding:.35rem .55rem;font-size:.85rem}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#2f6fe0}
.btn.go{background:var(--ok);border-color:var(--ok);color:#04210f;font-weight:800}
.btn.stop{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:800}
.btn.danger{color:#ffd9d9;border-color:#5a2a2a;background:#2a1818}
.btn.danger:hover{background:#3a1f1f}

input[type=text],input[type=password],select{
  background:#0e1420;border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:.7rem .8rem;font-size:1.05rem;font-family:inherit;width:100%;
}
input:focus,select:focus{outline:none;border-color:var(--accent)}
label.lbl{display:block;color:var(--muted);font-size:.85rem;margin-bottom:.4rem}

.dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--muted);flex:0 0 auto}
.dot.live{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.dot.off{background:#55627a}

body.player{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:4vh 4vw}
.card{
  width:min(560px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin-top:2vh;
}
.card h1{font-size:1.25rem;margin:0 0 .35rem}
.card .sub{color:var(--muted);font-size:.92rem;margin:0 0 1.2rem}
.field{margin-bottom:1rem}
.row{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.preview-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#05070c;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin:.4rem 0 1rem;display:grid;place-items:center}
.preview-wrap video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.preview-wrap .hint{position:absolute;color:var(--muted);font-size:.95rem;text-align:center;padding:1rem}
.badge{position:absolute;top:.6rem;left:.6rem;display:flex;align-items:center;gap:.45rem;
  background:rgba(5,7,12,.7);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;font-size:.85rem;font-weight:700}
.badge.live{border-color:var(--danger)}
.badge.live .dot{background:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,.25);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.35}}
.statusline{color:var(--muted);font-size:.9rem;min-height:1.2em;margin-top:.3rem}
.err{color:#ffb4b4;font-size:.92rem;margin-top:.5rem;min-height:1.1em}
.whoami{font-weight:800;color:var(--ok)}

body.dash{padding:1.25rem 1.5rem}
.topbar{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.toolrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.toolrow #newName{width:auto;flex:0 1 220px;padding:.45rem .6rem;font-size:.95rem}
.toolrow input[type=number]{padding:.4rem .5rem;font-size:.9rem}
.topbar h1{font-size:1.1rem;margin:0;letter-spacing:.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.tile .thumb{position:relative;width:100%;aspect-ratio:16/9;background:#05070c;display:grid;place-items:center}
.tile .thumb img{width:100%;height:100%;object-fit:cover;display:none}
.tile.streaming .thumb img{display:block}
.tile.streaming .thumb .noimg{display:none}
.tile .thumb .noimg{color:#4b586e;font-size:.9rem}
.tile .meta{padding:.7rem .8rem;display:flex;flex-direction:column;gap:.5rem}
.tile .name{display:flex;align-items:center;gap:.5rem;font-weight:700}
.tile .name .grow{font-size:1rem}
.tile .stat{color:var(--muted);font-size:.82rem}
.tile .pw{display:flex;align-items:center;gap:.5rem;font-family:ui-monospace,Consolas,monospace;font-size:.9rem}
.tile .pw code{background:#0e1420;border:1px solid var(--line);border-radius:7px;padding:.25rem .5rem;letter-spacing:.5px}
.tile .name .nameInput{flex:1;min-width:0;font-weight:700;font-size:1rem;padding:.35rem .5rem}
.tile .setpw{display:flex;gap:.4rem;align-items:center}
.tile .setpw .pwInput{flex:1;min-width:0;font-size:.9rem;padding:.35rem .5rem}
.tile .links{display:flex;gap:.4rem;flex-wrap:wrap}
.copied{color:var(--ok);font-size:.8rem}
.gate{width:min(380px,100%);margin:12vh auto 0}

body.obs{background:transparent}
.camfill{position:fixed;inset:0;overflow:hidden}
.camfill img{width:100%;height:100%;object-fit:cover;display:block}
.camfill.contain img{object-fit:contain}
.camfill.off img{display:none}
.lower3{position:fixed;left:0;bottom:0;padding:.5em 1em;font-weight:800;
  font-size:clamp(14px,3vw,30px);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.8);
  background:linear-gradient(90deg,rgba(0,0,0,.65),transparent);display:none}
.lower3.show{display:block}

body.obs.grid-body{background:transparent}
.cam-grid{position:fixed;inset:0;display:grid;gap:6px;padding:6px}
.cam-cell{position:relative;background:rgba(5,7,12,.35);border-radius:8px;overflow:hidden}
.cam-cell img{width:100%;height:100%;object-fit:cover;display:none}
.cam-cell.online img{display:block}
.cam-cell .cap{position:absolute;left:0;bottom:0;padding:.25em .6em;font-weight:800;color:#fff;
  font-size:clamp(11px,1.6vw,22px);text-shadow:0 2px 5px rgba(0,0,0,.85);
  background:linear-gradient(90deg,rgba(0,0,0,.6),transparent)}
.cam-cell.offline{opacity:.25}
.cam-cell .off-tag{position:absolute;inset:0;display:grid;place-items:center;color:#8a97ad;font-size:.85rem}
.cam-cell.online .off-tag{display:none}