/* ==========================================================================
   base.css — tokens, reset e peças que todo o site usa (botões, campos, modal)

   Linguagem visual (07/set/2026, a partir do layout do Streamly): fundo quase
   preto, superfícies translúcidas de 1 degrau (rgba .04/.05/.09), borda de
   1px quase invisível, raio generoso (12–18px), UM acento (lima) só em ação
   principal e estado ativo, vermelho só em AO VIVO. Sem glow, sem gradiente
   decorativo — só o gradiente funcional na base dos tiles, pra legibilidade
   do nome sobre o vídeo.
   ========================================================================== */
:root{
  --bg:#050608;                  /* fundo da página */
  --s1:#0B0C10;                  /* superfície 1: painéis, cards */
  --s2:rgba(255,255,255,.05);    /* superfície 2: botão fantasma, campo */
  --s3:rgba(255,255,255,.09);    /* superfície 3: hover, ativo */
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.12);
  --txt:#F3F4F1;
  --txt2:#A9ABA3;
  --dim:#83857D;
  --acc:#C8FF3D;                 /* lima */
  --acc-rgb:200,255,61;
  --acc-ink:#08090A;             /* texto sobre o lima */
  --live:#FF3B4E;
  --ok:#34D399;
  --warn:#FACC15;
  --bad:#F87171;
  --r:10px;                      /* raio de botão */
  --r2:14px;                     /* raio de painel */
  --r3:18px;                     /* raio de card / tile */
  --barra:52px;                  /* altura da barra da sala */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);
  font:14px/1.45 var(--font);
  font-feature-settings:"cv11","ss01","tnum";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.assistindo{overflow:hidden;height:100dvh}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--acc);text-decoration:none}
a:hover{color:#DBFF7A}
svg{display:block}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
     stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none !important}
::selection{background:rgba(var(--acc-rgb),.35)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* rótulo pequeno em caixa alta: título de seção dentro de painel */
.rotulo{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ponto "ao vivo" */
.dot{width:7px;height:7px;border-radius:50%;background:#3A3C42;flex:none;display:inline-block}
.dot.live{background:var(--live);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* selo AO VIVO (vermelho cheio) e selo neutro escuro sobre imagem */
.selo{
  display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:7px;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(5,6,8,.7);color:var(--txt);backdrop-filter:blur(6px);
}
.selo.live{background:var(--live);color:#fff}
.selo.live .dot{background:#fff;width:5px;height:5px;animation:pulse 2s infinite}
.selo.acc{background:var(--acc);color:var(--acc-ink)}

/* ---------- botões ---------- */
.bt{
  min-height:38px;padding:0 15px;border-radius:12px;
  border:1px solid var(--line2);background:var(--s2);color:var(--txt);
  font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .12s,border-color .12s,filter .12s;
}
.bt:hover{background:var(--s3);border-color:rgba(255,255,255,.2)}
.bt:disabled{opacity:.45;cursor:default}
.bt.forte{background:var(--acc);border-color:transparent;color:var(--acc-ink);font-weight:700}
.bt.forte:hover{filter:brightness(1.05);background:var(--acc)}
.bt.perigo{color:#FCA5A5}
.bt.perigo:hover{border-color:rgba(248,113,113,.5)}
.bt.fantasma{background:transparent;border-color:transparent;color:var(--txt2)}
.bt.fantasma:hover{background:var(--s2);color:var(--txt)}
.bt.g{min-height:44px;padding:0 18px;font-size:14px}
.bt .ico{width:16px;height:16px}

/* botão só de ícone, quadrado */
.ib{
  width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;
  color:var(--txt2);border:1px solid transparent;position:relative;
  transition:background .12s,color .12s,border-color .12s;
}
.ib:hover{background:var(--s2);color:var(--txt)}
.ib[aria-pressed="true"],.ib.on{background:var(--s3);color:var(--txt);border-color:var(--line2)}
.ib:disabled{opacity:.35;cursor:default}
.ib .ico{width:19px;height:19px}

/* segmentado (abas em pílula): "Todas | Ao vivo", "Pública | Privada" */
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--s2);border:1px solid var(--line)}
.seg button{
  min-height:30px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:650;color:var(--txt2);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--acc);color:var(--acc-ink)}
.seg button .n{font-variant-numeric:tabular-nums;opacity:.7;font-weight:600}

/* ---------- campos ---------- */
.campo{display:flex;flex-direction:column;gap:6px;min-width:190px;flex:1}
.campo label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.campo input,.campo select,.entrada{
  min-height:42px;padding:0 13px;border-radius:12px;
  border:1px solid var(--line2);background:var(--s2);color:var(--txt);
  font-size:16px;width:100%;   /* 16px: abaixo disso o iOS dá zoom */
}
.campo input::placeholder,.entrada::placeholder{color:#5F615B}
.campo input:focus,.campo select:focus,.entrada:focus{outline:none;border-color:rgba(var(--acc-rgb),.7)}
.campo select option{background:#0B0C10}
.campo .ajuda,.ajuda{font-size:12px;color:var(--dim);line-height:1.5}
.campo .erro,.erro{font-size:12.5px;color:#FCA5A5}

/* ---------- avatar ---------- */
.av{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover;background:var(--s3);
    display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--txt);
    overflow:hidden;text-transform:uppercase}
.av.p{width:22px;height:22px;font-size:10px}
.av.g{width:36px;height:36px;font-size:14px}

/* ---------- selo de tipo (pública/privada) ---------- */
.selo2{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;
  font-size:11px;font-weight:600;border:1px solid var(--line2);color:var(--txt2);
}
.selo2 .ico{width:11px;height:11px;stroke-width:2}
.selo2.prv{color:var(--acc);border-color:rgba(var(--acc-rgb),.4);background:rgba(var(--acc-rgb),.08)}

/* ---------- aviso ---------- */
.aviso{padding:10px 12px;border-radius:12px;font-size:13px;border:1px solid var(--line);
       background:var(--s2);color:var(--txt2)}
.aviso.ok{border-color:rgba(52,211,153,.35);color:#A7F3D0}
.aviso.ruim{border-color:rgba(248,113,113,.4);color:#FECACA}

/* ---------- modal ---------- */
.modal{
  display:none;position:fixed;inset:0;z-index:80;padding:20px;overflow-y:auto;
  background:rgba(3,4,6,.76);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  place-items:center;animation:fadein .16s ease both;
}
.modal.on{display:grid}
.modal .cartao{
  position:relative;width:100%;max-width:520px;background:var(--s1);
  border:1px solid var(--line2);border-radius:var(--r3);padding:24px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:rise .22s ease both;
}
.modal h3{font-size:19px;font-weight:700;letter-spacing:-.03em}
.modal .sub{font-size:12.5px;color:var(--dim);margin-top:-8px;line-height:1.5}
.modal p{font-size:13.5px;line-height:1.6;color:var(--txt2)}
.modal p b{color:var(--txt);font-weight:600}
.modal .fechar{
  position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:9px;
  color:var(--dim);display:grid;place-items:center;border:1px solid var(--line);background:var(--s2);
}
.modal .fechar:hover{color:var(--txt);background:var(--s3)}
.modal .fechar .ico{width:13px;height:13px;stroke-width:2.2}
.modal code{
  display:block;padding:10px 12px;border-radius:12px;background:var(--bg);
  border:1px solid var(--line2);color:var(--acc);overflow-wrap:anywhere;
  font:12.5px/1.45 var(--mono);
}
.modal .pe{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.codLinha{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.codLinha code{flex:1;min-width:220px}
/* abas do modal (app / OBS) */
.modal .abas{display:flex;gap:6px;padding:4px;border-radius:12px;background:var(--s2);
  border:1px solid var(--line);margin-top:-4px}
.modal .aba{flex:1;padding:8px 10px;border-radius:9px;font-size:13px;font-weight:600;
  color:var(--dim);background:transparent;border:0}
.modal .aba:hover{color:var(--txt2)}
.modal .aba.on{color:var(--txt);background:var(--s3)}
#codApp,#codObs{display:flex;flex-direction:column;gap:14px}
#codApp[hidden],#codObs[hidden]{display:none}

/* ---------- spinner ---------- */
.spin{width:28px;height:28px;border:2.5px solid rgba(255,255,255,.12);border-top-color:var(--txt);
      border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- toast (aviso curto, canto de baixo) ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,8px);z-index:90;
  max-width:min(460px,92vw);padding:11px 14px;border-radius:14px;
  background:#12141A;border:1px solid var(--line2);color:var(--txt);
  font-size:13px;line-height:1.4;box-shadow:0 12px 40px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.ruim{border-color:rgba(248,113,113,.45)}
.toast b{font-weight:600}
.toast .acao{min-height:30px;padding:0 11px;border-radius:9px;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:12px}
.toast .x{color:var(--dim);font-size:16px;line-height:1;padding:2px 4px;margin-left:auto}
.toast .x:hover{color:var(--txt)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------------------------------------------------------------------------
   DENTRO DO APP WINDOWS (body.app, ver util.js/appnativo.js): o site é o app,
   então "Baixar o app" não faz sentido, e o botão de login é o nosso (o do
   Google abre no navegador de verdade). */
body.app .topoAcoes .baixar{display:none}
/* app abaixo da versão mínima: cobre tudo até atualizar (24/set/2026) */
.bloqueioApp{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(3,4,6,.92);backdrop-filter:blur(8px)}
.bloqueioApp .cartao{width:100%;max-width:520px;background:var(--s1);border:1px solid var(--line2);
  border-radius:var(--r3);padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.bloqueioApp h3{font-size:20px;font-weight:700;letter-spacing:-.03em}
.bloqueioApp p{font-size:14px;line-height:1.6;color:var(--txt2)}
.bloqueioApp p b{color:var(--txt);font-weight:600}
.bloqueioApp .pe{display:flex;gap:9px;flex-wrap:wrap}
.gApp{min-height:44px;padding:0 22px;font-size:14px}
.gAppDica{font-size:12.5px;color:var(--dim);margin-top:8px}