:root{ --bg:#0a0a0a; --panel:#111; --card:#121212; --border:rgba(255,255,255,.08);
       --fg:#f5f5f5; --muted:#bdbdbd; --accent:#ff7a1a; --ok:#19c37d; --err:#ff4f4f; }
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.5 ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:20px 16px}
.header{position:sticky;top:0;background:rgba(10,10,10,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:40}
.header-inner{display:flex;align-items:center;gap:16px;padding:10px 14px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:30px}
.nav{margin-left:auto;display:flex;gap:12px}
.nav a{padding:8px 10px;border-radius:10px;opacity:.9}
.nav a.active, .nav a:hover{background:rgba(255,255,255,.06);opacity:1}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:10px 14px;background:#1a1a1a;color:#fff;cursor:pointer}
.btn.primary{background:var(--accent);color:#000;border-color:transparent;font-weight:700}
.btn.ghost{background:transparent}
.badge{border-radius:999px;padding:4px 8px;border:1px solid var(--border);color:var(--muted);font-size:12px}
.grid{display:grid;gap:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid var(--border);border-radius:16px;padding:18px}
h1{font-size:28px;margin:0 0 10px} h2{font-size:20px;margin:0 0 10px} h3{font-size:16px;margin:0 0 10px}
.small{font-size:12px;color:#aaa}
footer{padding:24px;text-align:center;color:#888}
.input{background:#151515;border:1px solid var(--border);border-radius:10px;color:#fff;padding:10px 12px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.col{flex:1 1 240px}
.live-wrap{display:grid;grid-template-columns: 1.3fr 1fr; gap:16px}
.live-video{background:#000;border-radius:14px;overflow:hidden;border:1px solid var(--border);position:relative}
.kpi{display:flex;align-items:center;gap:8px}
.kpi .dot{width:10px;height:10px;border-radius:50%}
.kpi .dot.ok{background:var(--ok)} .kpi .dot.err{background:var(--err)}
.rep-box{display:grid;grid-template-columns: repeat(3, 1fr); gap:8px}
.rep-item{background:#151515;border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center}
.rep-item h3{font-size:14px;margin:0 0 6px}
.page{display:none}
.nav a.disabled{opacity:.45;pointer-events:none}
#authError{ display:none; margin-top:10px; border:1px solid rgba(255,79,79,.35); background:rgba(255,79,79,.08); color:#ffd3d3; padding:10px 12px; border-radius:10px; font-size:13px }
#authError.show{ display:block }
/* post-login overlay */
#postlogin{ position:fixed; inset:0; z-index:10000; background: radial-gradient(1200px 700px at 50% 45%, rgba(255,200,90,.22), rgba(0,0,0,.94) 60%), #000;
  display:none; align-items:center; justify-content:center }
#postlogin.show{ display:flex; animation: pl-fade .45s ease both }
@keyframes pl-fade{ from{opacity:0} to{opacity:1} }
.pl-stage{ position:relative; width:min(92vw,1100px); height:min(66vh,600px); display:flex; align-items:center; justify-content:center }
.pl-logo{ position:absolute; width:min(58vmin,540px); user-select:none; pointer-events:none; filter: drop-shadow(0 0 24px rgba(255,180,80,.35)); transform: scale(.92); animation: pl-logo 2.4s ease forwards }
@keyframes pl-logo{ 0%{ transform: scale(.92)} 40%{ transform: scale(.98)} 100%{ transform: scale(1)} }
.pl-flash{ position:absolute; width:min(60vmin,560px); height:min(60vmin,560px); border-radius:50%;
  background: radial-gradient(circle, rgba(255,220,140,.8) 0%, rgba(255,200,90,.38) 34%, rgba(255,160,0,.1) 68%, rgba(0,0,0,0) 72%);
  opacity:0; animation: pl-flash 1.2s ease .4s forwards }
.pl-skip{ position:absolute; top:18px; right:18px; background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.6); color:#fff; padding:8px 12px; border-radius:12px; cursor:pointer; z-index:2; text-decoration:none; backdrop-filter: blur(6px); }
#diagBar{position:fixed;left:0;right:0;bottom:0;z-index:99999;background:#2b2b2b;color:#fff;border-top:1px solid rgba(255,255,255,.2);padding:8px 12px;font-size:12px;display:none}
#diagBar.show{display:block}
#diagToggle{position:fixed;right:12px;bottom:56px;z-index:99999;background:#1a1a1a;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:8px 10px;font-size:12px}