@font-face{font-family:"Inter";src:url("/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#070b12; --bg2:#0b111b; --panel:rgba(17,24,36,.72); --panel-solid:#111824;
  --line:rgba(148,170,200,.14); --line-strong:rgba(148,170,200,.26);
  --text:#e8eef6; --muted:#8a9bb0; --dim:#5d6d82;
  --accent:#3d8bff; --accent2:#5eb1ff; --live:#ff4d5e; --ok:#35d07f; --warn:#f5b84a;
  --radius:16px; --shadow:0 10px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--text);font:15px/1.45 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{
  background:
    radial-gradient(1100px 600px at 12% -10%,rgba(61,139,255,.16),transparent 60%),
    radial-gradient(900px 500px at 110% 110%,rgba(94,177,255,.10),transparent 60%),
    linear-gradient(var(--bg),var(--bg2));
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(148,170,200,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(148,170,200,.04) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.muted{color:var(--muted)}
.ico{width:20px;height:20px;flex:none}
button{font:inherit;color:var(--text);cursor:pointer;border:0;background:none}
button.primary{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#fff;font-weight:600;border-radius:12px;padding:13px 16px;box-shadow:0 8px 24px rgba(61,139,255,.35);transition:transform .15s,filter .15s}
button.primary:hover{filter:brightness(1.08)}
button.primary:active{transform:translateY(1px)}
button.primary:disabled{opacity:.6;cursor:wait}
button.icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);transition:background .15s,border-color .15s}
button.icon:hover{background:rgba(255,255,255,.08);border-color:var(--line-strong)}
input{font:inherit;color:var(--text);background:rgba(7,11,18,.7);border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(61,139,255,.18)}
label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:500;color:var(--muted)}

/* marca */
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:40px;height:40px;filter:drop-shadow(0 6px 16px rgba(61,139,255,.45))}
.brand b{display:block;font-size:17px;letter-spacing:-.01em}
.brand small{display:block;color:var(--muted);font-size:12px}
.brand-sm .logo{width:36px;height:36px}

/* status "ao vivo" */
.pulse{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(255,77,94,.6);animation:pulse 1.8s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,94,.55)}70%{box-shadow:0 0 0 8px rgba(255,77,94,0)}100%{box-shadow:0 0 0 0 rgba(255,77,94,0)}}
.live-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 9px;border-radius:999px;background:rgba(255,77,94,.16);color:#ffd5d9;border:1px solid rgba(255,77,94,.35);backdrop-filter:blur(6px)}

/* ---------- LOGIN ---------- */
.login{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-art{position:relative;overflow:hidden;display:grid;place-items:center;padding:48px;border-right:1px solid var(--line);
  background:radial-gradient(600px 400px at 30% 30%,rgba(61,139,255,.28),transparent 70%),radial-gradient(500px 400px at 80% 90%,rgba(94,177,255,.16),transparent 70%)}
.login-art::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid rgba(94,177,255,.18);right:-160px;bottom:-160px;box-shadow:0 0 0 60px rgba(94,177,255,.04),0 0 0 120px rgba(94,177,255,.03)}
.art-inner{position:relative;z-index:1;max-width:440px}
.art-logo{width:72px;height:72px;filter:drop-shadow(0 12px 30px rgba(61,139,255,.5))}
.art-inner h1{font-size:44px;line-height:1.05;letter-spacing:-.03em;margin:22px 0 10px}
.art-inner p{color:var(--muted);font-size:17px;margin:0 0 26px}
.art-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.art-list li{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.art-list .pip{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
.login-panel{display:grid;place-items:center;padding:32px 20px}
.login-form{width:min(380px,100%);display:flex;flex-direction:column;gap:16px}
.login-form h2{margin:14px 0 0;font-size:26px;letter-spacing:-.02em}
.login-form p{margin:0}
.err{color:#ff8a95;min-height:1.3em;font-size:14px}
.legal{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--dim)}
.legal .ico{width:16px;height:16px}

/* ---------- APP ---------- */
#app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:20px;
  padding:12px 22px;background:rgba(7,11,18,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.status{display:flex;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13px;color:var(--muted)}
.pill b{color:var(--text)}
.pill.off .pulse{background:var(--warn);animation:none}
.clockbox{text-align:right;line-height:1.15}
.clock{font-size:24px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.date{font-size:12px;color:var(--muted)}
.date::first-letter{text-transform:uppercase}
.actions{display:flex;align-items:center;gap:8px}
.seg{display:flex;padding:3px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.seg button{width:36px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--muted)}
.seg button.on{background:rgba(61,139,255,.2);color:#cfe2ff}
.user{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--line)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:linear-gradient(135deg,#2f6bff,#8a5cff)}
.uname{font-size:13px;font-weight:500}

.grid{flex:1;display:grid;gap:18px;padding:22px;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
.grid.focus{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
.grid.focus .tile:first-child{grid-row:span 2}

.tile{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--line-strong);box-shadow:var(--shadow);isolation:isolate;transition:transform .2s,border-color .2s}
.tile:hover{border-color:rgba(94,177,255,.45)}
.grid.focus .tile:first-child{aspect-ratio:16/9}
.grid.focus .tile:nth-child(2){align-self:start}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.tile .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 24%,transparent 72%,rgba(0,0,0,.6) 100%)}
.t-head{z-index:2;position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px}
.t-name b{display:block;font-size:16px;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.t-name small{display:block;font-size:12px;color:#c3d0de;opacity:.85}
.t-foot{z-index:2;position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;opacity:0;transform:translateY(6px);transition:.2s}
.tile:hover .t-foot,.tile:focus-within .t-foot{opacity:1;transform:none}
.t-time{font-size:12px;color:#d6e0ea;font-variant-numeric:tabular-nums}
.t-btns{display:flex;gap:8px}
.t-btns button.icon{background:rgba(7,11,18,.55);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.14)}
.t-state{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--muted);font-size:14px;background:radial-gradient(circle,rgba(17,24,36,.6),rgba(7,11,18,.9))}
.tile.playing .t-state{display:none}
.tile:not(.playing) .live-badge{opacity:.35;filter:grayscale(1)}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--accent2);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.foot{display:flex;justify-content:space-between;gap:12px;padding:14px 22px;font-size:12px;color:var(--dim);border-top:1px solid var(--line)}

/* visualizador */
.viewer{position:fixed;inset:0;z-index:20;background:#000;display:flex}
.viewer video{width:100%;height:100%;object-fit:contain}
.vtop{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(180deg,rgba(0,0,0,.7),transparent)}
.vtop > div:first-child{display:flex;align-items:center;gap:12px}
.vtop b{font-size:18px}
.vbtns{display:flex;gap:8px}
.vclock{position:absolute;right:20px;bottom:16px;font-size:14px;font-variant-numeric:tabular-nums;color:#dfe7f0;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:8px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:30;background:var(--panel-solid);border:1px solid var(--line-strong);padding:10px 16px;border-radius:12px;box-shadow:var(--shadow);font-size:14px}

/* modo TV: sem controles, tudo para as cameras */
body.tv .actions .seg,body.tv #btnLogout,body.tv .user,body.tv .foot,body.tv .t-foot{display:none}
body.tv .grid{min-height:calc(100vh - 66px);align-content:center}
body.tv .top{grid-template-columns:auto 1fr auto}

/* responsivo */
@media (max-width:1000px){
  .login{grid-template-columns:1fr}
  .login-art{display:none}
  .top{grid-template-columns:1fr auto;gap:10px 14px;padding:10px 16px}
  .status{order:3;grid-column:1/-1}
  .clockbox{display:none}
  .grid{grid-template-columns:1fr;padding:16px;gap:14px}
  .grid.focus{grid-template-columns:1fr}
  .grid.focus .tile:first-child{grid-row:auto;aspect-ratio:16/9}
  .t-foot{opacity:1;transform:none}
}
@media (max-width:560px){
  .uname,.seg{display:none}
  .brand small{display:none}
  .foot{flex-direction:column}
}