/* =====================================================================
   gordinho.live — BASE / DESIGN SYSTEM
   Paleta: azul + roxo + vermelho, detalhes neon
   ===================================================================== */
/* A fonte NAO e mais carregada por @import daqui. Um @import dentro do CSS
   e uma fila: o navegador precisa baixar este arquivo inteiro pra so entao
   DESCOBRIR que existe uma fonte e ir buscar. Agora ela e um <link> no
   <head> de cada pagina, que comeca a baixar junto com o resto — e o texto
   aparece na fonte certa bem antes. */

:root{
  /* --- cores base --- */
  --bg-0:#070510;
  --bg-1:#0c0819;
  --bg-2:#120c24;
  --bg-3:#181030;
  --bg-4:#1f1640;
  --surface:rgba(24,16,48,.72);
  /* a mesma cor do --surface, so que mais fechada: substitui o desfoque
     de fundo nos cartoes grandes sem mudar a aparencia */
  --surface-solida:rgba(21,14,42,.93);
  --surface-2:rgba(31,22,64,.66);
  --line:rgba(139,92,246,.18);
  --line-strong:rgba(139,92,246,.38);

  /* --- texto --- */
  --txt:#eef0ff;
  --txt-2:#b6b2d8;
  --txt-3:#7d78a3;

  /* --- marca --- */
  --blue:#3b82f6;
  --blue-2:#2563eb;
  --indigo:#5b5bf6;
  --purple:#8b5cf6;
  --purple-2:#a855f7;
  --magenta:#e935c1;
  --red:#ef4444;
  --red-2:#f43f5e;
  --cyan:#22d3ee;
  --green:#34d399;
  --amber:#fbbf24;

  /* --- gradientes --- */
  --grad-brand:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 48%,#ef4444 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(59,130,246,.22),rgba(139,92,246,.22) 50%,rgba(239,68,68,.20));
  --grad-purple:linear-gradient(140deg,#a855f7,#5b21b6);
  --grad-blue:linear-gradient(140deg,#60a5fa,#1d4ed8);
  --grad-red:linear-gradient(140deg,#fb7185,#b91c1c);
  --grad-cyan:linear-gradient(140deg,#67e8f9,#0891b2);

  /* --- neon --- */
  --glow-purple:0 0 0 1px rgba(168,85,247,.35), 0 0 18px rgba(168,85,247,.35);
  --glow-blue:0 0 0 1px rgba(59,130,246,.35), 0 0 18px rgba(59,130,246,.35);
  --glow-red:0 0 0 1px rgba(239,68,68,.4), 0 0 22px rgba(239,68,68,.35);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.85);

  /* --- métrica de layout --- */
  --rail:74px;
  --sidebar:252px;
  --chat:340px;
  --radius:16px;
  --radius-sm:10px;
  --header-h:56px;

  /* ---------------------------------------------------------------------
     A LETRA DO SITE — uma so, do titulo ao rodape.

     Nunito Sans no lugar de Outfit (texto) e Orbitron (titulos). E a
     humanista mais proxima da Motiva Sans, que e a fonte da Steam — a
     mesma pegada de leitura: letra aberta, altura de x grande, numero
     sem firula. Titulo e texto agora saem da MESMA familia; o que separa
     um do outro e o peso e o espacamento, nao a fonte.

     A lista de reserva importa tanto quanto a primeira: se a fonte da
     internet demorar ou nao vier (rede ruim, rede corporativa que bloqueia
     o Google), o texto cai numa fonte de sistema de largura parecida em
     vez de dar um pulo na tela quando a certa chegar.
     ------------------------------------------------------------------- */
  --font:'Nunito Sans','Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',
         system-ui,-apple-system,Arial,sans-serif;
  --font-display:var(--font);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--txt);
  background:var(--bg-0);
  /* nitidez: sem isto o Chrome engorda o traco no fundo escuro e a letra
     fica "borrada", que era metade da queixa de qualidade */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;      /* a Nunito Sans ajusta o desenho ao tamanho */
  font-variant-ligatures:common-ligatures contextual;
  overflow:hidden;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(820px 520px at 88% 0%, rgba(168,85,247,.26), transparent 62%),
    radial-gradient(760px 620px at 60% 110%, rgba(239,68,68,.18), transparent 60%),
    linear-gradient(180deg,#0a0718,#070510 60%);
}
/* A GRADE DE FUNDO SEM MASCARA.
   ---------------------------------------------------------------------
   Ela tinha um mask-image radial pra sumir nas bordas. Mascara e uma
   passagem extra de composicao sobre a TELA INTEIRA, refeita a cada
   quadro — e numa pagina que esta decodificando video isso pesa: medido
   aqui, era a diferenca entre 30 e 60 quadros por segundo depois que o
   desfoque dos cartoes saiu.

   Sem a mascara a grade apareceria forte demais ate as bordas, entao a
   opacidade caiu junto. O resultado e a mesma textura discreta, pintada
   uma vez e reaproveitada. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;
  background-image:
    linear-gradient(rgba(139,92,246,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,.05) 1px,transparent 1px);
  background-size:46px 46px;
}
body.scrollable{overflow:auto;}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:.2px;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
input,textarea,select{font-family:inherit;}
img{max-width:100%;display:block;}

/* =====================================================================
   NENHUM ICONE RECORTA O PROPRIO DESENHO
   ---------------------------------------------------------------------
   Um <svg> corta tudo que passa do viewBox — e o padrao do navegador.
   Quando o icone cresce no hover (ou numa animacao), o desenho encosta
   nessa borda invisivel e volta cortado, com pedaco faltando. Como aqui
   nenhum icone depende desse recorte pra ficar certo, a regra vale pra
   todos de uma vez. */
svg{overflow:visible;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(139,92,246,.55),rgba(59,130,246,.45));
  border-radius:99px;border:2px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#a855f7,#3b82f6);background-clip:padding-box;}

/* ---------- tipografia utilitária ---------- */
/* O "display" nao e mais outra fonte: e a mesma, mais pesada e mais
   espacada. E assim que a Steam separa titulo de texto. */
.display{font-family:var(--font-display);font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
.gradient-text{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.muted{color:var(--txt-2);}
.dim{color:var(--txt-3);}
.tiny{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}

/* ---------- botões ---------- */
.btn{
  --btn-bg:var(--grad-brand);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;border:0;border-radius:12px;cursor:pointer;
  font-size:14px;font-weight:700;color:#fff;background:var(--btn-bg);
  position:relative;overflow:hidden;letter-spacing:.2px;white-space:nowrap;
  box-shadow:0 10px 26px -10px rgba(139,92,246,.9), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
  flex:0 0 auto;max-width:100%;   /* em tela estreita ele pula de linha em vez de ser espremido */
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 16px 34px -12px rgba(168,85,247,.95), inset 0 1px 0 rgba(255,255,255,.35);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.4);}
.btn.ghost{
  background:rgba(139,92,246,.10);color:var(--txt);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.btn.ghost:hover{background:rgba(139,92,246,.20);}
.btn.danger{--btn-bg:var(--grad-red);box-shadow:0 10px 26px -10px rgba(239,68,68,.9), inset 0 1px 0 rgba(255,255,255,.3);}
.btn.blue{--btn-bg:var(--grad-blue);}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:10px;}
.btn.block{width:100%;}
.btn.live-on{--btn-bg:var(--grad-red);animation:pulseRed 2.2s infinite;}
@keyframes pulseRed{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55),0 10px 26px -10px rgba(239,68,68,.9);}
  50%{box-shadow:0 0 0 12px rgba(239,68,68,0),0 10px 26px -10px rgba(239,68,68,.9);}
}

.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:rgba(139,92,246,.08);border:1px solid var(--line);cursor:pointer;
  color:var(--txt-2);transition:.18s ease;
}
.icon-btn:hover{background:rgba(139,92,246,.2);color:#fff;border-color:var(--line-strong);
  box-shadow:0 0 16px rgba(139,92,246,.4);}
.icon-btn.active{background:var(--grad-brand);color:#fff;border-color:transparent;}
.icon-btn.on{background:var(--grad-red);color:#fff;border-color:transparent;}

/* ---------- campos ---------- */
/* Grade de campos. Ja existia no CSS do painel, mas as janelinhas da
   pagina da live tambem usam — e aquele arquivo nao e carregado aqui.
   Sem esta regra os blocos ficavam colados um no outro dentro do popup. */
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.field{display:flex;flex-direction:column;gap:7px;}
.field > label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);}
.input,.select,.textarea{
  width:100%;padding:12px 14px;border-radius:12px;color:var(--txt);
  background:rgba(8,5,20,.75);border:1px solid var(--line);
  font-size:14.5px;outline:none;transition:.18s ease;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:rgba(168,85,247,.75);
  box-shadow:0 0 0 4px rgba(139,92,246,.16), 0 0 22px rgba(139,92,246,.28);
}
.textarea{resize:vertical;min-height:88px;}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),linear-gradient(135deg,var(--txt-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:14px;}
.switch input{display:none;}
.switch .track{width:46px;height:26px;border-radius:99px;background:rgba(8,5,20,.9);
  border:1px solid var(--line-strong);position:relative;transition:.22s;flex:0 0 auto;}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(160deg,#cbd5ff,#7c7aa8);transition:.22s;}
.switch input:checked + .track{background:var(--grad-brand);border-color:transparent;box-shadow:0 0 18px rgba(139,92,246,.55);}
.switch input:checked + .track::after{left:22px;background:#fff;}

/* ---------- cartões / painéis ---------- */
/* O CARTAO NAO BORRA MAIS O FUNDO — e isso vale metade da fluidez.
   ---------------------------------------------------------------------
   backdrop-filter obriga o navegador a REFAZER o desfoque do que esta
   atras a cada quadro. O cartao do player tem 800x630 e contem o video
   tocando: era quase meio milhao de pixels sendo desfocados 60 vezes por
   segundo, em cima de uma pagina que ja esta decodificando video.

   Medido aqui, com a camera ligada: 20 quadros por segundo com o desfoque
   contra 60 sem ele. Tres vezes mais lento pelo efeito.

   E o efeito quase nao aparecia: o fundo destes cartoes e escuro e o
   conteudo e opaco, entao o que o desfoque mostrava era um borrao escuro
   sobre outro borrao escuro. Trocamos por um fundo um pouco mais fechado
   — visualmente quase igual, e de graca.

   Quem ainda borra: so coisa pequena e passageira (o veu do popup, o selo
   sobre a imagem). Ai o custo e pequeno e o efeito aparece. */
.card{
  background:var(--surface-solida);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.card.neon{position:relative;}
.card.neon::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--grad-brand);opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
/* ---------------------------------------------------------------------
   A borda neon acima e um ::before ABSOLUTO. Dentro de uma janelinha que
   ROLA ele nao acompanha a moldura: fica ancorado no topo do conteudo, e
   a linha de baixo dele reaparecia atravessada no meio da janela, cortando
   os botoes. Na janelinha a borda vira borda de verdade — nao rola porque
   nao e um elemento, e o desenho fica igual.
   ------------------------------------------------------------------- */
.card.neon.modal::before{display:none;}
.card.neon.modal{
  border:1px solid rgba(168,85,247,.45);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(139,92,246,.14), 0 0 40px -18px rgba(168,85,247,.7);
}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
.badge.live{background:var(--grad-red);color:#fff;box-shadow:0 0 18px rgba(239,68,68,.55);}
.badge.superadmin{background:linear-gradient(135deg,#fbbf24,#f43f5e);color:#1a0b00;}
.badge.admin{background:var(--grad-red);color:#fff;}
.badge.moderator{background:var(--grad-blue);color:#fff;}
.badge.member{background:rgba(139,92,246,.2);color:var(--purple-2);box-shadow:inset 0 0 0 1px rgba(168,85,247,.4);}
.badge.on{background:rgba(52,211,153,.18);color:#6ee7b7;box-shadow:inset 0 0 0 1px rgba(52,211,153,.4);}
.badge.off{background:rgba(125,120,163,.16);color:var(--txt-3);box-shadow:inset 0 0 0 1px rgba(125,120,163,.3);}

.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);}
.dot.red{background:var(--red);box-shadow:0 0 10px var(--red);}
.dot.gray{background:#6b7280;box-shadow:none;}

/* ---------- avatar ---------- */
.avatar{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff;position:relative;overflow:hidden;
  background:var(--grad-purple);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -6px rgba(0,0,0,.8);
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar.sm{width:30px;height:30px;border-radius:10px;font-size:12px;}
.avatar.lg{width:56px;height:56px;border-radius:16px;font-size:20px;}

/* ---------- ícones 3D ---------- */
.i3d{width:22px;height:22px;flex:0 0 auto;display:block;}
.i3d.sm{width:18px;height:18px;}
.i3d.lg{width:30px;height:30px;}
.i3d.xl{width:40px;height:40px;}

/* ---------- utilidades ---------- */
.row{display:flex;align-items:center;gap:10px;}
.row.between{justify-content:space-between;}
.col{display:flex;flex-direction:column;}
.grow{flex:1;min-width:0;}
.hidden{display:none !important;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);margin:14px 0;}
.center{display:grid;place-items:center;}

/* ---------- toasts ---------- */
#toasts{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast{
  min-width:250px;max-width:360px;padding:13px 16px;border-radius:13px;font-size:14px;font-weight:600;
  background:rgba(18,12,36,.96);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);animation:toastIn .3s cubic-bezier(.2,1.2,.3,1);
  display:flex;gap:10px;align-items:center;
}
.toast.ok{box-shadow:var(--shadow-lg),0 0 22px rgba(52,211,153,.3);border-color:rgba(52,211,153,.5);}
.toast.err{box-shadow:var(--shadow-lg),0 0 22px rgba(239,68,68,.35);border-color:rgba(239,68,68,.55);}
.toast.out{animation:toastOut .25s forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px) scale(.96);}}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:900;background:rgba(4,2,12,.78);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:20px;animation:fadeIn .2s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* A janelinha nunca passa da altura da tela: se o conteudo for maior —
   o menu da conta com a qualidade da transmissao, por exemplo — ela rola
   por dentro em vez de vazar pra fora e cortar os botoes de baixo.
   O padding de baixo da folga pro ultimo botao nao colar na borda. */
.modal{
  position:relative;width:min(520px,100%);padding:26px;
  max-height:calc(100dvh - 40px);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  animation:popIn .28s cubic-bezier(.2,1.2,.3,1);
}
/* A barra de rolagem some da vista, mas a rolagem continua: em tela baixa
   a janelinha ainda desce com o dedo ou com a roda do mouse. O que
   incomodava era a barra roxa aparecendo por cima do desenho.

   De horizontal nao existe nenhuma: overflow-x:hidden acima. Se um bloco
   de dentro for largo demais ele encolhe (regra abaixo) em vez de empurrar
   a janelinha pro lado. E nenhum filho desenha barra propria — era de um
   deles que vinha a barrinha que sobrava embaixo do popup. */
.modal::-webkit-scrollbar{width:0;height:0;}
.modal{scrollbar-width:none;-ms-overflow-style:none;}
.modal *::-webkit-scrollbar{width:0;height:0;}
.modal *{scrollbar-width:none;-ms-overflow-style:none;}
/* nada de dentro pode ser mais largo que a janelinha */
.modal > *{max-width:100%;}
/* dentro da janelinha nada fica numa linha so a forca: em tela estreita
   as fileiras de botao pulam pra linha de baixo em vez de vazar. */
.modal .row{flex-wrap:wrap;}
.modal .col{min-width:0;}
.modal img,.modal video,.modal canvas,.modal table{max-width:100%;}
.modal pre,.modal code{white-space:pre-wrap;word-break:break-word;}

/* o X de fechar acompanha a rolagem, pra nao sumir no topo */
.modal .modal-x{position:sticky;top:0;float:right;z-index:3;}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- loader ---------- */
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(139,92,246,.2);border-top-color:var(--purple-2);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,rgba(139,92,246,.08),rgba(139,92,246,.18),rgba(139,92,246,.08));
  background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:10px;}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- campo de upload de imagem ---------- */
.upload-field{display:flex;flex-direction:column;gap:8px;}
.upload-field > label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);}
.upload-row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.upload-preview{
  flex:0 0 auto;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  background:rgba(8,5,20,.8);border:1px dashed var(--line-strong);position:relative;
}
.upload-preview img{width:100%;height:100%;object-fit:contain;}
.upload-bar{height:6px;max-width:280px;border-radius:99px;background:rgba(8,5,20,.9);overflow:hidden;border:1px solid var(--line);}
.upload-bar i{display:block;height:100%;background:var(--grad-brand);transition:width .18s ease;box-shadow:0 0 12px rgba(168,85,247,.7);}

/* "enviei mas ainda nao salvei" — o arquivo ja esta no servidor, mas o
   endereco so vai pra ficha do canal quando a pessoa clica em Salvar.
   Sem este aviso da pra sair da tela achando que ja estava guardado. */
.upload-field.por-salvar .upload-preview{border-style:solid;border-color:var(--amber);
  box-shadow:0 0 0 1px rgba(251,191,36,.35), 0 0 18px -4px rgba(251,191,36,.5);}
.upload-field.por-salvar > label::after{
  content:"falta salvar";margin-left:8px;padding:2px 7px;border-radius:99px;
  font-size:9.5px;letter-spacing:.08em;vertical-align:middle;
  background:rgba(251,191,36,.18);color:#fcd34d;
}

/* X no canto do popup */
.modal-x{
  position:absolute;top:12px;right:12px;z-index:4;
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;
  transition:.16s;
}
.modal-x:hover{background:rgba(239,68,68,.28);border-color:rgba(239,68,68,.7);transform:rotate(90deg);}
.modal-x svg{width:16px;height:16px;}

/* =====================================================================
   O MENU DO APARELHO — a flechinha do topo
   ---------------------------------------------------------------------
   Instalar como aplicativo, notificacoes, camera, microfone e captura de
   tela. O mesmo menu serve a pagina inicial e a da live, por isso o
   estilo mora aqui no base.css, que as duas carregam.
   ===================================================================== */
.ap-wrap{position:relative;flex:0 0 auto;}

.ap-btn{
  display:inline-flex;align-items:center;gap:2px;
  cursor:pointer;font-family:inherit;color:var(--txt-2);
}
/* a setinha do botao do celular saiu: o icone ja diz o que ele faz */
.ap-btn.ativo{color:var(--txt);}

/* na inicial o botao nao herda .icon-btn, entao ganha a moldura aqui */
.ini-topo-dir .ap-btn{
  width:auto;padding:0 8px 0 10px;height:38px;border-radius:11px;
  background:rgba(139,92,246,.1);border:1px solid var(--line);
}
.ini-topo-dir .ap-btn:hover{background:rgba(139,92,246,.22);border-color:var(--line-strong);}

/* Onde o painel fica quem decide e o JS: ao abrir ele sai da barra do
   topo e vai pro fim do <body>. As duas barras usam backdrop-filter, e um
   filtro faz o elemento virar a referencia de quem e "fixed" — dentro
   delas o menu ia parar fora da tela no celular. Aqui fica so a aparencia. */
.ap-painel{
  position:fixed;z-index:400;
  width:min(310px,calc(100vw - 20px));
  max-height:min(74vh,520px);overflow-y:auto;
  padding:10px;border-radius:16px;
  background:rgba(18,11,38,.96);border:1px solid var(--line-strong);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9);
  display:none;
}
.ap-painel.aberto{
  display:block;
  animation:apEntra .2s cubic-bezier(.3,1.2,.4,1);
}
@keyframes apEntra{
  from{opacity:0;transform:translateY(-8px) scale(.97);}
  to{opacity:1;transform:none;}
}

.ap-titulo{
  display:flex;align-items:center;gap:8px;padding:4px 8px 10px;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);
}

.ap-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;border-radius:11px;
  background:transparent;border:0;cursor:pointer;
  text-align:left;font-family:inherit;color:var(--txt);
  transition:background .18s;
}
button.ap-item:hover{background:rgba(139,92,246,.18);}
.ap-item.ok{cursor:default;}

.ap-ic{
  display:grid;place-items:center;flex:0 0 auto;
  width:32px;height:32px;border-radius:9px;
  background:rgba(139,92,246,.16);border:1px solid var(--line);
  color:var(--txt-2);
}
.ap-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ap-nome{font-size:13.5px;font-weight:700;}
.ap-estado{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);
}
.ap-item.ok .ap-estado{color:#6ee7b7;}
.ap-item.ok .ap-ic{background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.4);color:#6ee7b7;}
.ap-item.nao .ap-estado{color:#fca5a5;}
.ap-item.nao .ap-ic{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4);color:#fca5a5;}

.ap-sep{height:1px;margin:7px 10px;background:var(--line);}
.ap-rodape{
  padding:10px 10px 4px;font-size:11.5px;line-height:1.55;color:var(--txt-3);
}

/* no celular os itens respiram um pouco mais, pro dedo acertar */
@media (max-width:560px){
  .ap-item{padding:11px 10px;}
  .ap-rodape{padding-bottom:6px;}
}