/* Tema escuro "vidro" — grafite + cartões semitransparentes. Paleta e ajustes à mão aqui; as cores
   fixas dos outros CSS são convertidas em tema-gerado.css (tools/tema.js). O atributo data-theme no
   <html> é sempre o tema efetivo ("light"/"dark"); quem resolve o "automático" é js/tema.js. */
html[data-theme="dark"]{
  /* --branco = fundo das caixas comuns (SLA, ACS, listas, campos): quase opaco para o fundo animado
     não atrapalhar a leitura. O vidro de verdade (--vidro) fica só nos cartões listados abaixo. */
  --papel:#121318; --branco:rgba(27,28,35,.93);
  --linha:rgba(255,255,255,.08); --texto:#C9CBD6; --tinta:#F2F3F7; --tinta-2:#BABDCB; --suave:#8C8FA0;
  --azul:#8B7CF6; --azul-esc:#A99CFF;
  --verde:#3DDC97; --verde-bg:rgba(61,220,151,.12);
  --amber:#F5B95A; --amber-bg:rgba(245,185,90,.12);
  --vermelho:#FF6B7D; --vermelho-bg:rgba(255,107,125,.12);
  --roxo:#B79CFF; --roxo-bg:rgba(183,156,255,.12);
  --r:18px;
  --sombra:inset 0 1px 0 rgba(255,255,255,.05),0 12px 32px rgba(0,0,0,.35);
  /* versões para FUNDO das variáveis que viram tons claros (usadas em tema-gerado.css) */
  --azul-esc-bg:#6C5CE7; --tinta-bg:#24252E; --suave-bg:#4A4C5A; --roxo-forte:#7B5CE6;
  --verde-forte:#22B47A; --vermelho-forte:#D9455A; --amber-forte:#C2850F;
  --vidro:rgba(30,31,38,.6); --vidro-borda:rgba(255,255,255,.085); --vidro-blur:blur(14px) saturate(130%);
  color-scheme:dark;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 420px at 55% -8%,rgba(124,108,242,.22),transparent 65%),
    radial-gradient(700px 400px at 100% 100%,rgba(61,220,151,.06),transparent 60%),
    #121318 fixed;
  /* todas as camadas presas à tela: em página comprida (Rede, SLA) os brilhos se repetiam a cada
     altura de tela e apareciam "emendas" */
  background-attachment:fixed;background-repeat:no-repeat;
}
html[data-theme="dark"] #map{background:#1E1F26}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#34353F}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#6E7180}

/* topo e menu lateral */
html[data-theme="dark"] .topbar{background:rgba(18,19,24,.62);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:none;border-bottom:1px solid var(--vidro-borda)}
html[data-theme="dark"] .sidebar{background:rgba(22,23,29,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-right:1px solid var(--vidro-borda);box-shadow:none}
html[data-theme="dark"] .sb-item:hover{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .sb-item.on{background:rgba(255,255,255,.09);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
html[data-theme="dark"] .sb-item.on svg{color:var(--azul-esc)}

/* cartões de vidro */
html[data-theme="dark"] :is(.stat,.dv-card,.previewcard,.mapcard,.chartcard,.logcard,.results-panel,.ctocard,.dv-al,.dv-viab-item){
  background:var(--vidro);border:1px solid var(--vidro-borda);box-shadow:var(--sombra);
  backdrop-filter:var(--vidro-blur);-webkit-backdrop-filter:var(--vidro-blur)}
html[data-theme="dark"] .stat{border-radius:16px}
html[data-theme="dark"] .stat::before{display:none}
html[data-theme="dark"] .ctocard:hover{border-color:rgba(169,156,255,.35);box-shadow:0 0 0 1px rgba(169,156,255,.15),0 14px 34px rgba(0,0,0,.45)}

/* botões e campos */
html[data-theme="dark"] :is(.btn-imp,.gearbtn,.chip,.searchhero input,.dv-link){background:rgba(255,255,255,.05);border-color:var(--vidro-borda)}
html[data-theme="dark"] .chip.sel{background:#6C5CE7;border-color:#6C5CE7;color:#fff}

/* modais: vidro mais fechado (precisa ler bem) */
html[data-theme="dark"] .modal .ov{background:rgba(5,6,10,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
html[data-theme="dark"] .modal .box{background:rgba(28,29,36,.86);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--vidro-borda);box-shadow:0 30px 80px rgba(0,0,0,.6)}

/* celular: sem desfoque (pesa na GPU) — só a transparência, um pouco mais fechada */
@media(max-width:900px){
  html[data-theme="dark"]{--vidro:rgba(30,31,38,.88);--vidro-blur:none}
  html[data-theme="dark"] .topbar{background:rgba(18,19,24,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
  html[data-theme="dark"] .sidebar{background:#17181E;backdrop-filter:none;-webkit-backdrop-filter:none}
  html[data-theme="dark"] .modal .box{background:#1C1D24;backdrop-filter:none;-webkit-backdrop-filter:none}
  html[data-theme="dark"] .modal .ov{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* botão de tema no cabeçalho (mesmo estilo dos vizinhos) */
.tu-tema{width:34px;height:34px;border-radius:9px;color:#fff;background:rgba(255,255,255,.1);display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);cursor:pointer}
.tu-tema:hover{background:rgba(255,255,255,.22)}
.tu-tema svg{display:none}
.tu-tema[data-modo="auto"] .i-auto,.tu-tema[data-modo="light"] .i-sol,.tu-tema[data-modo="dark"] .i-lua{display:block}
@media(max-width:640px){.tu-tema{width:32px;height:32px}}