/* ===================== TEMAS (claridade/escuridão do fundo) ===================== */
/* V.0.1.69: nova paleta pedida (Tailwind slate + blue), substituindo as
   cores do tema/esquema PADRÃO (":root" sem atributo = [data-theme="escuro"]
   + [data-scheme="original"], confirmado pelas próprias screenshots
   enviadas — é o que já estava em uso). Cores ORIGINAIS de antes desta
   troca ficam registradas aqui pra reverter se precisar:
     --bg:#131417 --bg-alt:#17191d --card:#1a1c20 --card-border:#2a2d33
     --text:#e6e7ea --text-dim:#9aa0a8 --bg-video-overlay:rgba(10,11,14,0.72)
     --accent:#22d3ee --accent-2:#7c5cff --accent-soft:#0e2a30
   Os outros 4 temas (claro/médio/dark~preto) e os outros 6 esquemas de cor
   NÃO foram tocados — continuam como opções alternativas. Vermelho/amarelo/
   laranja (--danger, --crisis-*) também intocados, a pedido explícito. */
:root {
  --bg: #020617;
  --bg-alt: #0F172A;
  --card: #1E293B;
  --card-border: #334155;
  --text: #F8FAFC;
  --text-dim: #94A3B8;
  --ok: #34d399;
  --danger: #ef4444;
  --crisis-verde: #22c55e;
  --crisis-amarelo: #eab308;
  --crisis-laranja: #f97316;
  --crisis-vermelho: #ef4444;
  --bg-video-overlay: rgba(2, 6, 23, 0.72);
}

[data-theme="claro"] {
  --bg: #eef0f3;
  --bg-alt: #ffffff;
  --card: #ffffff;
  --card-border: #dfe2e7;
  --text: #14161a;
  --text-dim: #5b6068;
  --bg-video-overlay: rgba(240, 242, 245, 0.82);
}

[data-theme="medio"] {
  --bg: #2c2f36;
  --bg-alt: #2f3239;
  --card: #32353d;
  --card-border: #4a4e58;
  --text: #eceef1;
  --text-dim: #aeb2ba;
  --bg-video-overlay: rgba(30, 32, 38, 0.68);
}

[data-theme="escuro"] {
  --bg: #020617;
  --bg-alt: #0F172A;
  --card: #1E293B;
  --card-border: #334155;
  --text: #F8FAFC;
  --text-dim: #94A3B8;
  --bg-video-overlay: rgba(2, 6, 23, 0.72);
}

[data-theme="dark"] {
  /* bem escuro, ~95% preto */
  --bg: #060606;
  --bg-alt: #090909;
  --card: #0c0c0c;
  --card-border: #1d1d1d;
  --text: #f2f2f2;
  --text-dim: #8a8a8a;
  --bg-video-overlay: rgba(0, 0, 0, 0.82);
}

/* ===================== ESQUEMAS DE COR (botões/acentos) ===================== */
[data-scheme="original"] {
  --accent: #2563EB;
  --accent-2: #3B82F6;
  --accent-soft: #0F1E3D;
}
[data-scheme="verde_azul"] {
  --accent: #34d399;
  --accent-2: #3b82f6;
  --accent-soft: #0e2f26;
}
[data-scheme="rosa_laranja"] {
  --accent: #f472b6;
  --accent-2: #fb923c;
  --accent-soft: #3a1e2c;
}
[data-scheme="vermelho_dourado"] {
  --accent: #ef4444;
  --accent-2: #f59e0b;
  --accent-soft: #341414;
}
[data-scheme="roxo_dourado"] {
  --accent: #9A00FF;
  --accent-2: #f5b301;
  --accent-soft: #25073d;
}
[data-scheme="azul_lilas"] {
  --accent: #38bdf8;
  --accent-2: #a78bfa;
  --accent-soft: #0e2433;
}
[data-scheme="amarelo_verde"] {
  --accent: #facc15;
  --accent-2: #10b981;
  --accent-soft: #332b0e;
}
:root:not([data-scheme]) { --accent: #2563EB; --accent-2: #3B82F6; --accent-soft: #0F1E3D; }

* { box-sizing: border-box; }

/* ---------- Scrollbars no estilo do site (cor do esquema, "futurista") ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-alt); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg-alt); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-radius: 999px; border: 2px solid var(--bg-alt);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent);
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }
*::-webkit-scrollbar-corner { background: var(--bg-alt); }
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background-color: var(--bg);
  margin: 0;
  color: var(--text);
  min-height: 100vh;
}
[data-theme="escuro"] body:not([style]) {
  background: radial-gradient(circle at 20% 0%, #191b2a 0%, var(--bg) 45%);
}
a { color: inherit; }

/* ---------- Vídeo de fundo (padrão em todos os temas, inclusive login) ---------- */
.bg-video {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; pointer-events: none;
}
.bg-video-overlay {
  position: fixed; inset: 0; z-index: -1; background: var(--bg-video-overlay);
  pointer-events: none;
}

/* ---------- Faixa de teste grátis ativo (topo de toda página) ---------- */
.trial-banner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; background: linear-gradient(90deg, var(--accent-2), var(--accent));
  color: #fff; font-weight: 600; font-size: 13px; padding: 8px 16px; text-align: center;
}
.trial-banner b { color: #fff; }
.trial-banner-btn {
  background: #fff; color: var(--accent); text-decoration: none; font-weight: 700;
  padding: 5px 14px; border-radius: 999px; font-size: 12px; white-space: nowrap;
}
.trial-banner-btn:hover { opacity: 0.85; }

/* ---------- Etiqueta de versão (build) ---------- */
.build-tag {
  position: fixed; bottom: 10px; left: 12px; z-index: 60;
  font-size: 11px; font-family: monospace; color: var(--text-dim);
  background: var(--card); border: 1px solid var(--card-border);
  padding: 3px 8px; border-radius: 999px; opacity: 0.75;
  cursor: pointer; transition: opacity 0.15s ease, border-color 0.15s ease;
}
.build-tag:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }

/* ---------- Login ---------- */
.login-wrap { max-width: 380px; margin: 44px auto 0; padding: 0 16px; text-align: center; }
.login-logo { max-width: 150px; margin: 0 auto 32px; display: block; }
.login-title {
  font-size: 26px; font-weight: 800; letter-spacing: 1px; text-align: center;
  margin: 0 0 28px; color: var(--text);
}
.login-box {
  background: var(--card); border: 1px solid var(--card-border);
  padding: 24px; border-radius: 14px;
  box-shadow: 0 0 40px rgba(37, 99, 235, 0.06); text-align: left;
}
.login-box label { display: block; margin-top: 10px; font-size: 14px; color: var(--text-dim); }
.login-box input {
  width: 100%; padding: 9px 10px; margin-top: 4px;
  background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 8px;
  color: var(--text);
}
.login-box button {
  margin-top: 16px; width: 100%; padding: 10px;
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  cursor: pointer; font-size: 16px; font-weight: 700; letter-spacing: 0.5px;
}
.login-secondary-actions { display: flex; gap: 10px; margin-top: 18px; }
.btn-secondary-action {
  flex: 1; text-align: center; padding: 9px; border-radius: 8px; font-weight: 700;
  font-size: 14px; letter-spacing: 0.5px; text-decoration: none;
  background: var(--bg-alt); color: var(--text); border: 1px solid var(--card-border);
}
.btn-secondary-action:hover { border-color: var(--accent); color: var(--accent); }
/* -25% de largura (era 820px) — texto em 2 parágrafos curtos, fonte legível */
.responsible-use-notice {
  max-width: 615px; margin: 36px auto 30px; padding: 14px 20px; text-align: left;
  background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 10px;
}
.responsible-use-notice p {
  font-size: 13px; line-height: 1.6; color: var(--text-dim); white-space: pre-line; margin: 0;
}
.flashes { color: #fca5a5; list-style: none; padding: 0; }
.flashes.ok { color: var(--ok); }
.flashes li { white-space: pre-line; margin-bottom: 4px; }
/* Sem barra de rolagem visível na tela de login (PC e celular) — o conteúdo
   continua rolável do mesmo jeito (scroll por toque/roda do mouse), só
   escondemos a barra em si. Escopado só a essa página via :has(), pra não
   desfazer o espaçamento mobile aumentado a pedido em rodada anterior. */
html:has(.login-wrap), body:has(.login-wrap) { scrollbar-width: none; }
html:has(.login-wrap)::-webkit-scrollbar, body:has(.login-wrap)::-webkit-scrollbar { display: none; }

.plan-compare { max-width: 640px; margin: 40px auto 0; padding: 0 16px; }
.plan-compare h2 { font-size: 17px; color: var(--text-dim); text-align: center; margin-bottom: 12px; }
.plan-chart-box { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.plan-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.plan-table th, .plan-table td { padding: 8px; text-align: center; border-bottom: 1px solid var(--card-border); }
.plan-table th { color: var(--accent); font-weight: 600; }
.plan-table td:first-child, .plan-table th:first-child { text-align: left; color: var(--text-dim); }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; background: var(--bg-alt); border-bottom: 1px solid var(--card-border);
  flex-wrap: wrap; gap: 10px;
  position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 30px; }
.topbar-logo { height: 28px; width: auto; }
.topbar h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: 0.3px; }
.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); margin: 0 8px;
}
.topbar-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.badge {
  background: var(--accent-soft); color: var(--accent); padding: 4px 12px;
  border-radius: 999px; font-size: 13px; border: 1px solid rgba(37,99,235,0.3);
}
.btn-link { color: var(--text-dim); text-decoration: none; font-size: 14px; }
.btn-link:hover { color: var(--accent); }
/* Link da página atual, destacado no próprio menu (glow na cor do esquema
   escolhido) — antes esse destaque era um texto duplicado do título ao lado
   do relógio; agora é só o link ativo do menu em si. */
.btn-link-active {
  color: var(--accent); font-weight: 700;
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent),
               0 0 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.lcd-clock {
  font-family: "Share Tech Mono", monospace;
  display: flex; align-items: center; gap: 8px;
  color: var(--accent); text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: 16px; letter-spacing: 1px;
}
.lcd-clock #local-clock { font-weight: 700; }
.lcd-location { font-size: 12px; color: var(--accent); opacity: 0.75; text-shadow: none; }
.nav-sep { color: var(--card-border); font-size: 12px; margin: 0 2px; }

/* Menu suspenso "Conta" (V.0.1.76) — mesma fonte/tamanho do resto do menu,
   caixa flutuante temática (var(--card)/var(--card-border), acompanha tema/
   esquema de cor automaticamente) com um link por seção. */
.conta-dropdown { position: relative; }
.conta-dropdown-toggle {
  background: none; border: none; font-family: inherit; font-size: 14px;
  cursor: pointer; padding: 0; text-align: left;
  /* Bug real: <button> centraliza o próprio texto por padrão (diferente de
     <a>, que os outros itens do menu usam) — sem isso, só o "Conta ▾"
     aparecia centralizado no celular (onde o botão vira width:100%),
     destoando de "Resumo"/"Notícias"/etc, todos à esquerda. */
}
.conta-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--card-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
/* Bug real: "display: flex" acima tem a MESMA especificidade do [hidden] do
   navegador (regra de user-agent), e regra de autor sempre ganha da de
   user-agent nesse empate — na prática, o atributo `hidden` (que o JS do
   menu usa pra esconder) não fazia NADA, o menu ficava sempre visível e
   expandido. Precisa dessa regra extra, mais específica, pra garantir. */
.conta-dropdown-menu[hidden] { display: none; }
.conta-dropdown-menu a {
  color: var(--text); text-decoration: none; font-size: 13.5px; padding: 9px 12px;
  border-radius: 7px; white-space: nowrap;
}
.conta-dropdown-menu a:hover { background: var(--bg-alt); }
.conta-dropdown-menu a.active { color: var(--accent); font-weight: 700; }
/* No celular, o menu já é uma lista vertical empilhada (.topbar-actions.mobile-open)
   — a caixa flutuante não faz sentido ali, vira só mais um bloco na pilha. */
@media (max-width: 768px) {
  .conta-dropdown-menu { position: static; box-shadow: none; margin: 4px 0 4px 10px; }
}

/* ---------- Ticker de assuntos (barra de progresso por assunto) ---------- */
.ticker-wrap { position: relative; border-bottom: 1px solid var(--card-border); }
.ticker {
  display: flex; gap: 10px; flex-wrap: nowrap; padding: 12px 24px;
  background: color-mix(in srgb, var(--bg-alt) 75%, transparent);
  overflow-x: auto; overflow-y: hidden; cursor: grab; scroll-behavior: smooth;
  scrollbar-width: none; /* sem barra de rolagem visível — usa a setinha de aviso em vez disso */
}
.ticker::-webkit-scrollbar { display: none; }
.ticker.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.ticker.auto-sliding { cursor: default; }
.ticker-chip { margin: 0; flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.ticker-more-arrow {
  position: absolute; top: 0; right: 0; bottom: 0; width: 34px; display: flex;
  align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
  color: var(--accent); pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-alt) 90%, transparent) 60%);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.ticker-more-arrow.show { opacity: 1; }
.ticker-btn {
  position: relative;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; min-width: 216px; text-align: left;
  transition: border-color 0.15s ease; font-family: inherit;
}
.ticker-btn:hover { border-color: var(--accent); }
.ticker-status-btn {
  position: absolute; top: 4px; right: 4px; font-size: 9px; font-weight: 700;
  background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 999px;
  text-decoration: none; letter-spacing: 0.5px;
}
.ticker-status-btn:hover { filter: brightness(1.1); }
/* "Detalhar" (V.0.1.63) — substituiu o antigo botão "STATUS" no canto do
   card: agora é um link discreto embaixo do card, levando pra Estatísticas
   desse assunto. */
.ticker-detalhar-btn {
  display: block; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-decoration: none; padding: 3px 0; border-radius: 6px; border: 1px solid transparent;
}
/* Cor vem inline (item.crisis_color, V.0.1.68) — o hover só realça, sem
   sobrescrever a cor (inline sempre vence sobre classe mesmo assim). */
.ticker-detalhar-btn:hover { filter: brightness(1.25); border-color: currentColor; }
.ticker-name { font-size: 13px; color: var(--text); font-weight: 600; }
.ticker-bar {
  display: block; width: 100%; height: 5px; background: var(--bg-alt);
  border-radius: 999px; overflow: hidden;
}
.ticker-fill {
  display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width 1s linear;
}
.ticker-label { font-size: 12px; color: var(--text-dim); font-family: monospace; }
.ticker-newcount { font-size: 12px; color: var(--text-dim); font-family: monospace; }
.ticker-total { font-size: 11px; color: var(--text-dim); font-family: monospace; opacity: 0.75; }
.ticker-sensitivity { font-size: 11px; color: var(--text-dim); font-family: monospace; opacity: 0.75; }
.crisis-row { display: flex; align-items: center; gap: 5px; font-size: 14px; }
.crisis-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px rgba(255,255,255,0.15); }
.crisis-text { color: var(--text-dim); font-weight: 600; }

.system-bar { width: 220px; display: inline-block; }
.system-progress { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.flashes-dashboard { padding: 10px 24px 0; margin: 0; }

/* ---------- Aviso pop-up (varredura concluída) e banner (atualizar) ---------- */
#scan-toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--card); border: 1px solid var(--accent); color: var(--text);
  padding: 8px 16px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease; z-index: 40; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
#scan-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#update-banner {
  position: sticky; top: 0; z-index: 30; text-align: center; margin: 0 auto;
  max-width: 420px; background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--accent); padding: 8px 14px; border-radius: 999px; font-size: 13px;
  cursor: pointer; display: none; margin-top: 10px;
}
#update-banner.show { display: inline-block; }
.update-banner-wrap { text-align: center; }

/* ---------- Layout com filtros ---------- */
.dashboard-layout { display: flex; gap: 20px; padding: 24px; align-items: flex-start; }
.articles-main { flex: 1; min-width: 0; }
.filters-sidebar {
  width: 270px; flex-shrink: 0; background: var(--card); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 18px; position: sticky; top: 76px;
  max-height: calc(100vh - 96px); overflow-y: auto;
}
.filters-sidebar h3 { margin: 0 0 14px; font-size: 15px; color: var(--accent); }
.filters-form { display: flex; flex-direction: column; gap: 14px; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.source-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.source-chip {
  display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft);
  color: var(--accent); border: 1px solid rgba(37,99,235,0.3); border-radius: 999px;
  padding: 3px 8px; font-size: 12px;
}
.source-chip a { color: var(--accent); text-decoration: none; font-weight: 700; cursor: pointer; }
.source-dropdown { font-size: 13px; }
.combo-select {
  width: 100%; padding: 8px; background: var(--bg-alt); border: 1px solid var(--card-border);
  color: var(--text); border-radius: 6px; font-size: 13px; cursor: pointer;
}
.combo-select option:disabled { color: var(--text-dim); opacity: 0.5; }
.source-dropdown summary {
  cursor: pointer; color: var(--text-dim); padding: 6px 0; list-style: none;
}
.source-dropdown summary::-webkit-details-marker { display: none; }
.source-dropdown summary:hover { color: var(--accent); }
.source-dropdown-list {
  max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  padding: 6px 0 0 4px;
}
.source-checkbox:disabled + label, label:has(.source-checkbox:disabled) { opacity: 0.4; }
.filter-group-title { font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.filter-label { font-size: 13px; color: var(--text-dim); display: flex; gap: 6px; align-items: center; }
.filter-checkbox { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--text); }
.engine-checkboxes { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0; }
.filters-form select {
  padding: 8px; background: var(--bg-alt); border: 1px solid var(--card-border);
  color: var(--text); border-radius: 6px; font-size: 14px;
}
.btn-apply {
  margin-top: 6px; padding: 10px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.btn-clear { text-align: center; font-size: 13px; color: var(--text-dim); text-decoration: none; }
.btn-clear:hover { color: var(--accent); }
.hint-small { font-size: 12px; color: var(--text-dim); }
.hint-highlight {
  text-align: center; font-size: 13px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 8px;
  padding: 8px 12px; margin: 12px 0 4px;
}
.qualidade-coleta-line { font-size: 12px; color: var(--text-dim); margin: 6px 0; }
.qualidade-coleta-line b { color: var(--text); }
.qualidade-coleta-badge {
  display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.qualidade-coleta-badge.fraca { background: rgba(239,68,68,0.2); color: #fca5a5; }
.qualidade-coleta-badge.normal { background: rgba(234,179,8,0.2); color: #fde047; }
.qualidade-coleta-badge.boa { background: rgba(132,204,22,0.2); color: #bef264; }
.qualidade-coleta-badge.excelente { background: rgba(34,197,94,0.2); color: #86efac; }

.buscar-tudo-form { margin-bottom: 10px; }
.quick-toggle-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.quick-toggle-group .toggle-btn { width: 100%; justify-content: center; }
.btn-buscar-tudo {
  width: 100%; padding: 11px; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.4px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn-atualizar-pagina {
  margin-bottom: 16px; background: #33363c !important; color: #f2f3f5 !important;
  box-shadow: none !important;
}

/* ---------- Cards de notícia ---------- */
/* ---------- Modos de exibição (Card Grande/Pequeno, Lista Grande/Pequena) ---------- */
.view-card_grande, .view-card_pequeno {
  display: grid; gap: 16px;
}
.view-card_grande { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.view-card_pequeno { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.view-card_pequeno .card-img { height: 100px; }
.view-card_pequeno .card-body { padding: 10px; }
.view-card_pequeno .card h2 { font-size: 14px; }
.view-card_pequeno .summary { font-size: 12.5px; }
.mais-noticias-wrap { text-align: center; padding: 28px 0 10px; }
.mais-noticias-wrap .btn-command { min-width: 200px; }
.mais-noticias-wrap .hint-small { margin-top: 8px; }

.view-lista_grande, .view-lista_pequena { display: flex; flex-direction: column; gap: 10px; }
.view-lista_grande .card, .view-lista_pequena .card { display: flex; flex-direction: row; align-items: stretch; }
.view-lista_grande .card-img { width: 160px; height: auto; flex-shrink: 0; }
.view-lista_pequena .card-img { width: 90px; height: auto; flex-shrink: 0; }
.view-lista_pequena .card-body { padding: 8px 12px; }
.view-lista_pequena .card h2 { font-size: 13.5px; margin-bottom: 4px; }
.view-lista_pequena .summary { font-size: 12px; margin-bottom: 4px; }
.view-lista_pequena .keyword-tag, .view-lista_pequena .rating-tag { font-size: 10px; padding: 1px 6px; }

/* resumo/título limitados a no máximo 5 linhas em qualquer modo de exibição */
.summary {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.card h2 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.empty { color: var(--text-dim); text-align: center; padding: 60px 20px; }
/* Centraliza o aviso (sem assuntos / aguardando coleta / sem resultado) no
   espaço disponível da coluna de notícias, tanto na horizontal quanto na
   vertical — antes ficava "preso" no canto superior esquerdo porque vivia
   dentro do grid de cards (que só reserva a largura de 1 coluna quando está
   vazio). Agora é renderizado FORA desse grid, como um bloco próprio. */
.empty-state-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 50vh; width: 100%;
}
.scan-wait-panel {
  max-width: 420px; margin: 0 auto; padding: 28px 32px; text-align: center;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
}
.scan-wait-panel .empty { padding: 0 0 16px; }
.scan-wait-panel .fl-bar-track { margin-top: 4px; }
.scan-wait-panel .hint-small { margin-top: 14px; text-align: left; }

/* ---------- Estado vazio/explicativo do Resumo (V.0.1.68) ---------- */
.resumo-explainer {
  flex-direction: column; text-align: center; padding: 24px 16px; max-width: 980px; margin: 0 auto;
}
.resumo-explainer-logo { width: 25%; max-width: 220px; min-width: 120px; height: auto; margin: 0 auto 12px; display: block; }
.resumo-explainer-row {
  display: flex; gap: 16px; margin-top: 22px; align-items: stretch; text-align: left;
}
.resumo-explainer-box {
  flex: 1; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.resumo-explainer-box h3 { margin: 0; font-size: 15px; }
.resumo-explainer-box p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
/* Box do termômetro ocupa o "dobro" das outras duas (2/1/1) */
.resumo-explainer-gauge {
  flex: 2; align-items: center; text-align: center; gap: 2px;
}
.resumo-explainer-red {
  border-color: rgba(248,113,113,0.5); box-shadow: 0 0 18px rgba(248,113,113,0.22);
}
.resumo-explainer-red h3 { color: #fca5a5; }
.resumo-explainer-green {
  border-color: rgba(74,222,128,0.5); box-shadow: 0 0 18px rgba(74,222,128,0.22);
}
.resumo-explainer-green h3 { color: #86efac; }
.gauge-svg-ciclo { width: 100%; max-width: 220px; height: auto; }
.gauge-ciclo-arco { transition: opacity 0.4s ease, filter 0.4s ease; }
#gauge-ciclo-needle { transition: x2 0.4s ease, y2 0.4s ease; }
#gauge-ciclo-label { font-size: 15px; font-weight: 700; margin: 2px 0 6px; transition: color 0.4s ease; }
@media (max-width: 760px) {
  .resumo-explainer-row { flex-direction: column; }
  .resumo-explainer-gauge { order: -1; }
}

/* tonalidade sutil por nível de crise (opcional, ligado pela barra de filtros) */
.crisis-tint-on .card[data-crisis="amarelo"] { background: linear-gradient(0deg, rgba(234,179,8,0.07), rgba(234,179,8,0.07)), var(--card); }
.crisis-tint-on .card[data-crisis="laranja"] { background: linear-gradient(0deg, rgba(249,115,22,0.08), rgba(249,115,22,0.08)), var(--card); }
.crisis-tint-on .card[data-crisis="vermelho"] { background: linear-gradient(0deg, rgba(239,68,68,0.09), rgba(239,68,68,0.09)), var(--card); }

.card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px;
  overflow: hidden; transition: border-color 0.15s ease;
  display: flex; flex-direction: column; height: 100%;
}
.card:hover { border-color: rgba(37,99,235,0.35); }
.card.read { opacity: 0.55; }
.card-img { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--bg-alt); }
.card-img-placeholder {
  background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center;
}
.card-img-placeholder span {
  color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7;
}
.trend-img-placeholder { width: 100%; height: 110px; }
.card-body { padding: 14px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.keyword-tag {
  display: inline-block; align-self: flex-start; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; padding: 2px 9px; border-radius: 999px; margin-bottom: 8px;
  border: 1px solid rgba(37,99,235,0.25);
}
.rating-tag {
  display: inline-block; align-self: flex-start; font-size: 11px; padding: 2px 9px; border-radius: 999px;
  margin-bottom: 8px; margin-left: 6px; font-weight: 600;
}
/* .card-body virou flex-column (pra colar os botões na base do card,
   independente do tamanho do texto) — sem isso, cada tag/rótulo (que é só
   inline-block) esticava pra largura toda do card, por virar item de flex
   diretamente. align-self:flex-start acima resolve isso; esse wrapper
   também deixa keyword-tag + rating-tag lado a lado, como antes. */
.card-tags-row { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; width: 100%; }

/* V.0.2.6: badges da IA (analisando/repercutindo) empurrados pro lado
   direito da linha (antes ficavam grudados nas outras tags, à esquerda) —
   margin-left:auto no wrapper consome o espaço livre da linha; se não
   couber ele quebra pra própria linha, ainda alinhado à direita. */
.card-tags-row-right { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* V.0.2.1: badges de status da IA no card da notícia */
.ai-processing-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 9px;
  border-radius: 999px; background: rgba(148,163,184,0.14); color: var(--text-dim);
  border: 1px solid rgba(148,163,184,0.25);
}
.ai-processing-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-dim);
  border-top-color: transparent; animation: ai-spin 0.9s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-processing-badge::before { animation: none; } }
.ai-viral-badge {
  display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: rgba(249,115,22,0.14); color: #f97316; border: 1px solid rgba(249,115,22,0.3);
}
/* V.0.2.24: botão pós-processamento redesenhado pra chamar atenção de
   verdade — antes usava a mesma cor discreta dos outros botõezinhos do
   card, o que fazia ele passar despercebido mesmo sendo a ação mais
   importante (a análise ficou pronta!). Azul cheio + leve brilho, maior
   que os botões vizinhos, pulso sutil na primeira vez que aparece. */
.ai-resumo-btn {
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  font-weight: 800; padding: 7px 14px; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: ai-resumo-pulse 1.8s ease-in-out 3;
}
.ai-resumo-btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
@keyframes ai-resumo-pulse {
  0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 80%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ai-resumo-btn { animation: none; } }
.card-tags-row .rating-tag { margin-left: 0; }
.rating-muito_boa { background: #123324; color: var(--ok); }
.rating-boa { background: #163d2c; color: #6ee7b7; }
.rating-neutra { background: #26292e; color: var(--text-dim); }
.rating-ruim { background: #3a2410; color: #fbbf24; }
.rating-critica { background: #3a1a10; color: #fb923c; }
.rating-pessima { background: #3a1414; color: #fca5a5; }
.rating-processar { background: #142238; color: #60a5fa; }
.rating-falsa-tag { background: #2a1030; color: #d8b4fe; }
.quality-select {
  font-size: 12px; padding: 5px 8px; background: var(--bg-alt); color: var(--text-dim);
  border: 1px solid var(--card-border); border-radius: 6px; cursor: pointer;
}
.btn-small.rating-falsa.active { background: #2a1030; color: #d8b4fe; border-color: #d8b4fe; }
.btn-small.rating-processar.active { background: #142238; color: #60a5fa; border-color: #60a5fa; }
.btn-uppercase { text-transform: uppercase; }

.card h2 { font-size: 16px; margin: 0 0 8px; line-height: 1.35; }
.card h2 a { color: var(--text); text-decoration: none; }
.card h2 a:hover { color: var(--accent); }
.summary { font-size: 14px; color: var(--text-dim); margin: 0 0 10px; white-space: pre-line; }
.meta {
  font-size: 13.65px; /* +15% sobre 11px */
  color: var(--text-dim);
  display: flex; flex-direction: column; gap: 2px;
}
.meta-source { font-weight: 700; color: var(--text); }
.read-more {
  display: inline-block; margin-top: 8px; font-size: 13px; color: var(--accent);
  text-decoration: none; font-weight: 600;
}
.read-more:hover { text-decoration: underline; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.btn-small {
  font-size: 12px; padding: 5px 10px;
  background: var(--bg-alt); border: 1px solid var(--card-border); color: var(--text-dim);
  border-radius: 6px; cursor: pointer;
}
.btn-small:hover { color: var(--text); }
.btn-rating.active { border-color: var(--accent); color: var(--accent); }
.btn-copy { position: relative; }
.btn-copy.copied::after {
  content: "Copiado!"; position: absolute; top: -22px; left: 0; font-size: 11px;
  background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 4px;
}

/* ---------- Página de assuntos ---------- */
.keywords-page { max-width: 672px; margin: 0 auto; padding: 24px; } /* +20% (era 560px) */
.add-keyword-form {
  display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 16px;
}
.add-keyword-form input {
  flex: 1; padding: 10px; background: var(--bg-alt); border: 1px solid var(--card-border);
  border-radius: 6px; color: var(--text); min-width: 180px;
}
.add-keyword-form button {
  padding: 10px 18px; background: var(--accent); color: #fff; border: none;
  border-radius: 6px; cursor: pointer; font-weight: 600;
}
.form-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.form-row select {
  padding: 9px; background: var(--bg-alt); border: 1px solid var(--card-border);
  color: var(--text); border-radius: 6px; font-size: 14px;
}
.inline-label { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.form-row-block { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.radio-stack { display: flex; flex-direction: column; gap: 6px; }
.radio-stack .filter-checkbox { align-items: flex-start; }
.search-type-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.search-type-option { cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.search-type-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.search-type-btn {
  display: block; text-align: center; padding: 9px; border-radius: 8px; font-weight: 700;
  background: var(--bg-alt); border: 1px solid var(--card-border); color: var(--text-dim);
  transition: all 0.15s ease;
}
.search-type-option input:checked + .search-type-btn {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.search-type-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; text-align: center; }
@media (max-width: 600px) { .search-type-group { grid-template-columns: 1fr; } }

/* Botões de marcar/desmarcar (motores de busca, WhatsApp por assunto) — MESMO
   truque do search-type acima (checkbox/radio escondido + label estilizado
   como botão), só que pra múltipla escolha em vez de mutuamente exclusiva.
   Troca os checkboxes "crus" (que ficavam feios/desalinhados) por isso. */
.toggle-btn-group { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.engine-toggle-wrap { display: flex; flex-direction: column; align-items: center; margin: 4px 0; }
.engine-toggle-wrap .toggle-btn-group { justify-content: center; }
.toggle-btn-option { cursor: pointer; }
.toggle-btn-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border-radius: 8px; font-weight: 700; font-size: 13px;
  background: var(--bg-alt); border: 1px solid var(--card-border); color: var(--text-dim);
  transition: all 0.15s ease; user-select: none;
}
.simulacao-toggle-wrap {
  margin-top: 14px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
}
.simulacao-toggle-wrap .toggle-btn { padding: 10px 26px; gap: 12px; }
.simulacao-toggle-wrap .hint-small { max-width: 420px; }
.toggle-btn .toggle-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-dim);
  flex-shrink: 0; transition: all 0.15s ease;
}
.toggle-btn-option input:checked + .toggle-btn {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.toggle-btn-option input:checked + .toggle-btn .toggle-dot {
  background: #fff; border-color: #fff;
}
.toggle-btn-option input:focus-visible + .toggle-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Motores de busca (habilitar/desabilitar): verde = ativado, vermelho =
   desativado — cor fixa (não a do esquema escolhido), pra ficar óbvio o
   estado de cada motor de longe. */
.engine-toggle-btn.toggle-btn { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg-alt)); }
.engine-toggle-btn .toggle-dot { border-color: var(--danger); }
input:checked + .engine-toggle-btn.toggle-btn { background: var(--ok); color: #04220f; border-color: var(--ok); }
input:checked + .engine-toggle-btn .toggle-dot { background: #04220f; border-color: #04220f; }
.hint { font-size: 13px; color: var(--text-dim); background: var(--card); border: 1px solid var(--card-border);
        padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; line-height: 1.6; }
.hint-title { margin: 0 0 8px; font-size: 14px; color: var(--accent); }
.topics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 10px;
  margin-bottom: 8px;
}
.keyword-list { list-style: none; padding: 0; }
.keyword-list li {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card); border: 1px solid var(--card-border);
  padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
}
.keyword-list li.empty { justify-content: center; color: var(--text-dim); }
.keyword-list li.keyword-frozen { opacity: 0.55; border-style: dashed; }
.tag-match {
  display: inline-block; background: #3b2f0e; color: #facc15; font-size: 11px;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}
.tag-interval {
  display: inline-block; background: #1e2a3b; color: #60a5fa; font-size: 11px;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}
.tag-wa {
  display: inline-block; background: #123324; color: var(--ok); font-size: 11px;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}
.plan-banner {
  background: var(--accent-soft); border: 1px solid rgba(37,99,235,0.3); color: var(--accent);
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px;
}
.btn-add-assunto {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 14px 18px; margin: 4px 0 22px; background: var(--accent-2); color: #fff;
  text-decoration: none; border: none; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: 16px; box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
}
.btn-add-assunto:hover { filter: brightness(1.08); }
.btn-cancelar-assunto {
  display: inline-block; padding: 12px 18px; background: var(--bg-alt); color: var(--text);
  text-decoration: none; border: 1px solid var(--card-border); border-radius: 8px;
  font-weight: 600; font-size: 15px; text-align: center;
}
.btn-cancelar-assunto:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Admin: cadastrar/editar pessoa ---------- */
.admin-form {
  display: flex; flex-direction: column; gap: 4px; background: var(--card);
  border: 1px solid var(--card-border);
  padding: 20px; border-radius: 12px; margin-bottom: 24px;
}
.admin-form label { font-size: 13px; color: var(--text-dim); margin-top: 10px; }
.admin-form input, .admin-form select {
  padding: 9px; background: var(--bg-alt); border: 1px solid var(--card-border);
  color: var(--text); border-radius: 6px; font-size: 15px;
}
.admin-form button {
  margin-top: 16px; padding: 10px; background: var(--accent); color: #fff;
  border: none; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.admin-form label.checkbox-label { display: flex; align-items: center; gap: 8px; flex-direction: row; margin-top: 14px; }
.section-title { font-size: 16px; margin: 20px 0 10px; color: var(--text); }
.btn-full-width { display: block; width: 100%; text-align: center; text-decoration: none; padding: 12px; font-size: 15px; }
.user-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.user-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.user-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.user-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.user-card-login { font-size: 12px; color: var(--text-dim); }
.user-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.user-card-sub { margin: 0; }
.user-card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--card-border); }
.user-card-actions form { display: flex; align-items: center; gap: 4px; }
.user-card-actions .inline-label { font-size: 12px; }
.user-card-clickable { cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.user-card-clickable:hover, .user-card-clickable:focus-within {
  border-color: var(--accent); box-shadow: 0 0 16px rgba(37,99,235,0.35);
}
.user-card-clickable:active { box-shadow: 0 0 22px var(--accent); }
.stats-toggle-btn { border: 1px solid transparent; }
.stats-toggle-on { border-color: var(--accent); color: var(--accent); }
.stats-toggle-off { border-color: var(--card-border); }
.stats-swap-form { display: flex; align-items: center; gap: 4px; }
.stats-swap-form select { padding: 5px 6px; background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 6px; color: var(--text); font-size: 12px; }
.troca-senha-box { text-align: center; }
.troca-senha-form { display: flex; flex-direction: column; gap: 4px; text-align: left; margin-top: 6px; }
.troca-senha-form label { font-size: 13px; color: var(--text-dim); margin-top: 10px; font-weight: 600; }
.troca-senha-form input {
  padding: 10px; background: var(--bg-alt); border: 1px solid var(--card-border);
  color: var(--text); border-radius: 8px; font-size: 15px;
}
.troca-senha-form button { margin-top: 16px; width: 100%; }
.person-row-actions { display: flex; gap: 10px; align-items: center; }
.plan-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}

/* ---------- Configurações / painel admin ---------- */
.config-page { max-width: 780px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- ADM: menu lateral de seções (V.0.2.10) ----------
   .cfg-wide só existe em configuracoes.html — largura maior que o
   .config-page padrão (780px) pra caber conteúdo + menu lado a lado sem
   apertar. Todo o resto (.panel, tabelas, forms) continua sendo o mesmo
   CSS de sempre; isso só organiza os painéis em 2 colunas. */
.cfg-wide { max-width: 1180px; }
.cfg-body { display: flex; gap: 20px; align-items: flex-start; width: 100%; }
.cfg-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cfg-side-menu {
  flex: 0 0 200px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px;
}
.cfg-menu-btn {
  text-align: left; background: transparent; border: 1px solid transparent; color: var(--text-dim);
  font-size: 13px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.cfg-menu-btn:hover { background: var(--bg-alt); color: var(--text); }
.cfg-menu-btn.active {
  background: var(--accent-soft); color: var(--accent); border-color: rgba(37,99,235,0.3); font-weight: 700;
}
.cfg-menu-sep { border: none; border-top: 1px solid var(--card-border); margin: 4px 0; }
.cfg-menu-viewall.active { background: rgba(148,163,184,0.16); color: var(--text); border-color: var(--card-border); }
@media (max-width: 900px) {
  .cfg-body { flex-direction: column; }
  .cfg-side-menu {
    position: static; flex-direction: row; overflow-x: auto; width: 100%; order: -1;
    -webkit-overflow-scrolling: touch;
  }
  .cfg-menu-btn { white-space: nowrap; flex-shrink: 0; }
  .cfg-menu-sep { display: none; }
}

/* Visão Geral (cfg-home) */
.cfg-home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cfg-home-stat {
  background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.cfg-home-stat-label { font-size: 12px; color: var(--text-dim); }
.cfg-home-stat-value { font-size: 20px; font-weight: 800; color: var(--text); }
.cfg-home-channels { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg-home-channel {
  display: flex; align-items: center; gap: 10px; background: var(--bg-alt);
  border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 14px; flex: 1 1 220px;
}
.cfg-home-channel-name { font-size: 13px; font-weight: 600; flex: 1; }

/* V.0.2.30: painel IA — Groq (principal) + Gemini (backup) lado a lado,
   cada um com "cara" própria (cor de destaque distinta) pra diferenciar
   de relance qual provedor é qual. */
.ai-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ai-provider-card {
  background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 12px;
  padding: 14px; border-top: 3px solid transparent;
}
.ai-provider-groq { border-top-color: #f97316; }
.ai-provider-gemini { border-top-color: #8b5cf6; }
.ai-provider-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.ai-provider-icon { font-size: 18px; }
.ai-provider-name { font-size: 15px; font-weight: 800; color: var(--text); }
.cfg-home-channel form { margin-left: auto; }
.panel {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 20px;
}
.panel h2 { margin: 0 0 6px; font-size: 16px; color: var(--accent); }
.btn-command {
  margin-top: 10px; padding: 12px 18px; background: var(--accent-2); color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 15px;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
}
.panel-danger { border-color: #7f1d1d; background: linear-gradient(0deg, rgba(127,29,29,0.12), rgba(127,29,29,0.12)), var(--card); }
.panel-danger h2 { color: #fca5a5; }
.panel-danger label { display: block; font-size: 13px; color: var(--text-dim); margin: 10px 0 4px; }
.panel-danger input {
  padding: 9px 10px; background: var(--bg-alt); border: 1px solid var(--card-border);
  border-radius: 8px; color: var(--text); display: block;
}
.btn-danger { background: #dc2626; box-shadow: 0 0 18px rgba(220,38,38,0.4); display: block; margin-top: 12px; }
.btn-danger:hover { background: #b91c1c; }

.admin-editar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: stretch; }
.admin-editar-actions form { flex: 1; min-width: 180px; display: flex; }
.admin-editar-actions .btn-command {
  width: 100%; margin-top: 0; min-height: 44px; display: flex; align-items: center;
  justify-content: center; text-align: center; line-height: 1.3;
}
.btn-toggle-on { background: #16a34a; box-shadow: 0 0 18px rgba(22,163,74,0.4); }
.btn-toggle-on:hover { background: #15803d; }
.btn-toggle-off { background: #dc2626; box-shadow: 0 0 18px rgba(220,38,38,0.4); }
.btn-toggle-off:hover { background: #b91c1c; }
.stats-pdf-btn { margin-top: 0; font-size: 13px; padding: 9px 16px; }
.stats-pdf-btn-locked { background: var(--bg-alt) !important; color: var(--text-dim); box-shadow: none !important; }
.stats-hero-actions-row {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px;
}
.stats-hero-actions-row .btn-command { margin-top: 0; font-size: 13px; padding: 9px 16px; }
.status-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.status-table td { padding: 8px 4px; font-size: 14px; border-bottom: 1px solid var(--card-border); }
.status-pill { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-family: monospace; }
.status-ok { background: #123324; color: var(--ok); }
.status-off { background: #3a1414; color: #fca5a5; }
.log-box {
  max-height: 320px; overflow-y: auto; background: var(--bg-alt); border-radius: 8px;
  padding: 10px; margin-top: 8px; font-family: monospace; font-size: 13px;
}
.log-line { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.log-time { color: #6b7280; flex-shrink: 0; }
.log-error .log-msg { color: #fca5a5; }
.log-info .log-msg { color: var(--text-dim); }
.raw-log {
  background: #0e0f12; color: #9ca3af; padding: 12px; border-radius: 8px;
  max-height: 320px; overflow-y: auto; font-size: 12px; margin-top: 8px; white-space: pre-wrap;
}
.raw-log.live-log { max-height: 420px; }
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #ef4444; box-shadow: 0 0 8px #ef4444; margin-right: 6px;
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.wallpaper-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wallpaper-form input {
  flex: 1; min-width: 200px; padding: 9px; background: var(--bg-alt); border: 1px solid var(--card-border);
  color: var(--text); border-radius: 6px;
}

.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.perf-item {
  background: var(--bg-alt); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.perf-label { font-size: 12px; color: var(--text-dim); }
.perf-value { font-size: 22px; font-weight: 700; color: var(--accent); }
.wallpaper-form button {
  padding: 9px 14px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600;
}
.btn-primary-sm { background: var(--accent); color: #fff; }
.btn-secondary-sm { background: var(--bg-alt); color: var(--text-dim); border: 1px solid var(--card-border) !important; }

/* ---------- Conta (configurações pessoais) ---------- */
.conta-page { max-width: 640px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.conta-page form { display: flex; flex-direction: column; gap: 4px; }
.conta-page label { font-size: 13px; color: var(--text-dim); margin-top: 10px; }
.conta-page label.label-emphasis { font-size: 19.5px; font-weight: 700; color: var(--text); }

.plan-advantages-list { list-style: none; padding: 0; margin: 10px 0 0; }
.plan-advantages-list li {
  font-size: 13.5px; color: var(--text); padding: 5px 0 5px 22px; position: relative;
}
.plan-advantages-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.plan-levels-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0; }
.plan-levels-row-spaced { margin-bottom: 28px; }
.plan-level-pill {
  font-size: 13px; font-weight: 600; color: var(--text-dim); padding: 8px 16px;
  border-radius: 999px; border: 1.5px solid var(--card-border); background: var(--bg-alt);
  white-space: nowrap;
}
.plan-level-pill.current {
  color: var(--accent); font-weight: 800; border-color: var(--accent);
  background: var(--accent-soft); box-shadow: 0 0 14px rgba(37,99,235,0.25);
}
.plan-change-btn { display: block; width: 100%; text-align: center; text-decoration: none; padding: 14px; font-size: 16px; }
.plan-level-pill-btn {
  font-size: 13px; font-weight: 600; color: var(--text-dim); padding: 8px 16px;
  border-radius: 999px; border: 1.5px solid var(--card-border); background: var(--bg-alt);
  white-space: nowrap; cursor: pointer; font-family: inherit;
}
.plan-level-pill-btn:hover { border-color: var(--accent); color: var(--text); }
.plan-level-pill-btn.current {
  color: #fff; font-weight: 800; border-color: var(--accent);
  background: var(--accent); box-shadow: 0 0 14px rgba(37,99,235,0.25);
}
.plano-editar-panel { text-align: center; margin-top: 22px; }
.plan-remaining-badge {
  display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent); padding: 3px 10px; border-radius: 999px;
}
.renovar-plano-form {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: 18px auto 0; padding-top: 16px; border-top: 1px solid var(--card-border); max-width: 420px;
}
.renovar-plano-form input[type="number"] { width: 90px; padding: 8px 10px; background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 8px; color: var(--text); }
.admin-quick-plan-actions { flex-wrap: wrap; gap: 8px; }
.quick-plan-form, .quick-renew-form { display: flex; align-items: center; gap: 4px; }
.quick-plan-select { padding: 5px 6px; background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 6px; color: var(--text); font-size: 12px; }
.quick-renew-input { width: 60px; padding: 5px 6px; background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 6px; color: var(--text); font-size: 12px; }
.conta-page input, .conta-page select {
  padding: 9px; background: var(--bg-alt); border: 1px solid var(--card-border);
  color: var(--text); border-radius: 6px; font-size: 15px;
}
.conta-page button {
  margin-top: 14px; padding: 10px; background: var(--accent); color: #fff;
  border: none; border-radius: 6px; cursor: pointer; font-weight: 600; align-self: flex-start; padding-left: 20px; padding-right: 20px;
}
/* Hub "Notificações" (V.0.1.76) — 3 cartões, cada um levando pro painel de
   verdade de um canal (Celular/WhatsApp/E-mail). */
.conta-notif-links { display: flex; flex-direction: column; gap: 10px; }
.conta-notif-link-card {
  display: block; padding: 16px 18px; background: var(--bg-alt); border: 1px solid var(--card-border);
  border-radius: 10px; text-decoration: none; color: var(--text); transition: border-color 0.15s ease;
}
.conta-notif-link-card:hover { border-color: var(--accent); }
.conta-notif-link-card .emoji { font-size: 22px; }
.conta-notif-link-card h3 { margin: 6px 0 4px; font-size: 15px; }
.conta-notif-link-card p { margin: 0; }

/* Bloco "Quando enviar" (horário de silêncio + dias da semana, V.0.1.81),
   compartilhado pelos 3 painéis de notificação. */
.notif-agenda-quiet-row { display: flex; gap: 16px; margin-top: 6px; }
.notif-agenda-quiet-row > div { display: flex; flex-direction: column; gap: 2px; }
.notif-agenda-quiet-row label { margin-top: 0; font-size: 12px; }
.notif-agenda-weekdays { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.notif-agenda-weekdays .toggle-btn-option { margin: 0; }
.notif-agenda-weekdays .toggle-btn { padding: 6px 10px; font-size: 12.5px; }

.theme-scheme-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 4px; }
.theme-scheme-row > div { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.theme-scheme-row label { margin-top: 0; }
.theme-scheme-row select { width: 100%; }
.plan-current { font-size: 13px; color: var(--text-dim); }

/* ---------- Resumo (V.0.1.61/.63) ---------- */
.resumo-page { max-width: 1320px; margin: 0 auto; padding: 24px; }
/* A barra de assuntos (ticker) fica FORA de <main> (pra rolar/deslizar sem
   ficar limitada pelo padding) — sem isso, ela ocupava a largura inteira da
   tela enquanto o resto do Resumo (título, cards) fica em max-width:1320px
   centralizado, um descompasso visual real. Mesmo max-width+margin do
   .resumo-page, alinhando as duas bordas certinho. */
/* Largura total da tela de novo (V.0.1.68) — o max-width de 1320px da
   V.0.1.66 (alinhado ao grid de cards) foi revertido a pedido. */
.resumo-ticker-wrap { width: 100%; }
/* V.0.1.71: só no Resumo, o page-hero (título + "Visão rápida do
   termômetro...") encolhe até o texto e centraliza — nas outras páginas
   que reaproveitam _page_hero.html ele continua 100% de largura. */
.resumo-page .page-hero { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
/* V.0.1.74: voltou pra largura fixa/padrão — a largura adaptativa da linha
   acima (regra antiga desta seção) deixava cada card do ticker do Resumo
   com um tamanho diferente (curto pra "Vasco", largo pra "Alexandre de
   Morais" etc.), o que ficou inconsistente visualmente; a pedido explícito,
   agora todos os cards do ticker do Resumo têm a MESMA largura (a mesma
   base de Notícias, 216px) — nomes longos quebram linha em vez de alargar
   o card. */
.resumo-ticker-wrap .ticker-btn { width: 216px; }
/* auto-fit + largura máxima (em vez de auto-fill + 1fr, que estica os cards
   pra preencher a linha) — assim, com poucos cards, o grid encolhe até o
   conteúdo e o justify-content:center de fato centraliza o conjunto. */
.resumo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 250px));
  justify-content: center; gap: 16px; margin-top: 18px;
}
/* No celular vira lista vertical de verdade (1 coluna) — mesmo card, só
   empilhado, em vez do auto-fit tentar caber 2 numa tela estreita. */
@media (max-width: 640px) {
  .resumo-grid { grid-template-columns: 1fr; }
  .resumo-card { max-width: 340px; margin: 0 auto; width: 100%; }
}
.resumo-card {
  position: relative; overflow: hidden; background: var(--card); background-size: cover;
  background-position: center; border: 1px solid var(--card-border); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  text-decoration: none; color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.resumo-card:hover { border-color: var(--accent); box-shadow: 0 0 16px rgba(37,99,235,0.2); }
/* Escurecido mais forte que a versão anterior (0.6 -> 0.78) — com foto de
   fundo, o texto ficava com pouco contraste; junto com as cores fixas
   abaixo (não mais var(--text-dim), que é claro/escuro dependendo do tema
   e podia sumir em cima de foto) garante leitura em qualquer tema. */
.resumo-card-dark { position: absolute; inset: 0; background: rgba(0,0,0,0.78); z-index: 0; }
.resumo-card-overlay { position: absolute; inset: 0; opacity: 0.25; z-index: 0; }
.resumo-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.resumo-card h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); text-align: left; }
/* V.0.2.6: título + pill do termômetro lado a lado no topo do card (antes
   era só o título; o nível vinha como texto solto embaixo do gauge — virou
   pill pra bater com a hierarquia visual do resto do site). */
.resumo-card-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-bottom: 2px; }
.resumo-card-pill {
  font-size: 11px; font-weight: 700; white-space: nowrap; padding: 3px 9px;
  border-radius: 999px; border: 1px solid; flex-shrink: 0;
}
.resumo-card-dark ~ .resumo-card-content .resumo-card-pill { text-shadow: none; }
/* Resuminho de até 2 frases gerado pela IA (V.0.2.6) — mesmo texto usado em
   Estatísticas > Perspectiva por IA, só cortado; some sozinho se a IA
   estiver desligada ou ainda não tiver gerado nada pra esse assunto. */
.resumo-card-ai-text { font-size: 12.5px; line-height: 1.5; text-align: left; width: 100%; margin: 0; color: var(--text-dim); }
/* V.0.2.24: barrinha de % processado pela IA, logo abaixo do velocímetro. */
.resumo-card-ai-pct-wrap { width: 100%; display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.resumo-card-ai-pct-wrap .fl-bar-track { height: 5px; }
.resumo-card-ai-pct-wrap .hint-small { font-size: 11px; text-align: left; }
.gauge-svg-mini { width: 100%; max-width: 160px; height: auto; }
.resumo-card-label { font-size: 13px; font-weight: 700; margin: 2px 0 0; }
.resumo-card-count { font-size: 12px; color: var(--text-dim); margin: 0; }
.resumo-card-trend { font-size: 12px; color: var(--text-dim); margin: 2px 0 0; }
/* Botões de ação do card (V.0.2.6) — antes o card inteiro era um <a> só pra
   Notícias; agora tem 2 destinos, então virou <div> com 2 links pequenos. */
.resumo-card-actions { display: flex; gap: 8px; width: 100%; margin-top: 10px; }
.resumo-card-btn {
  flex: 1; text-align: center; text-decoration: none; font-size: 11.5px; padding: 7px 6px;
  border-radius: 8px; background: var(--bg-alt); border: 1px solid var(--card-border); color: var(--text);
}
.resumo-card-btn:hover { border-color: var(--accent); color: var(--accent); }
.resumo-card-dark ~ .resumo-card-content .resumo-card-btn {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #f2f3f5; text-shadow: none;
}
/* +50% de espaço pedido explicitamente (era 11px/4px margem/1.4 de altura
   de linha) — texto pequeno demais pra ler o título das notícias de destaque. */
.resumo-card-news { font-size: 13.5px; margin: 8px 0 0; line-height: 1.55; text-align: left; width: 100%; }
.resumo-card-news-good { color: #16a34a; }
.resumo-card-news-bad { color: #dc2626; }
/* Sem foto de fundo, o card usa var(--card) (acompanha o tema — pode ser
   claro). COM foto, .resumo-card-dark sempre escurece pra rgba(0,0,0,0.78)
   independente do tema — por isso o texto vira claro fixo (com sombra pra
   garantir contraste em cima de qualquer foto) só quando esse elemento
   irmão existe. */
.resumo-card-dark ~ .resumo-card-content h3,
.resumo-card-dark ~ .resumo-card-content .resumo-card-label,
.resumo-card-dark ~ .resumo-card-content .resumo-card-count,
.resumo-card-dark ~ .resumo-card-content .resumo-card-trend,
.resumo-card-dark ~ .resumo-card-content .resumo-card-news,
.resumo-card-dark ~ .resumo-card-content .resumo-card-ai-text,
.resumo-card-dark ~ .resumo-card-content .resumo-card-totais-text {
  color: #f2f3f5; text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.resumo-card-dark ~ .resumo-card-content .resumo-card-news-good { color: #86efac; }
.resumo-card-dark ~ .resumo-card-content .resumo-card-news-bad { color: #fca5a5; }
/* Bem maior que a v.63 (50px -> 90px) e com fundo/borda pra dar uma
   referência visual real — o gráfico anterior ficava pequeno demais pra
   ver a linha ou qualquer grade de referência. */
.resumo-chart-wrap {
  position: relative; width: 100%; max-width: 220px; height: 90px; margin-top: 8px;
  background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 8px; padding: 4px;
}
.resumo-mini-chart { width: 100% !important; height: 100% !important; }

/* "Conta toda" — fora do grid agora (era um card a mais nele, esticando pra
   ocupar 1 célula igual aos outros); banner centralizado e baixo, só com a
   frase pedida. V.0.1.68: largura igual à do page-hero acima (não mais um
   banner estreito de 520px) e SEM foto de fundo — sempre o mesmo cinza
   plano (var(--card)) dos outros cards, nunca a foto/escurecimento da
   pior notícia geral (pedido explícito, revertendo a versão anterior). */
/* V.0.1.71: largura de acordo com o texto (era 100%, igual ao page-hero
   acima) — só encolhe/centraliza, a pedido. */
.resumo-totais-wrap { display: flex; justify-content: center; margin-top: 18px; }
.resumo-card-totais {
  /* V.0.1.69: box menor + preto 78% com mais 25% de transparência em cima
     disso (0.78 * 0.75 ≈ 0.59), a pedido — substitui o var(--card) padrão. */
  cursor: default; width: fit-content; max-width: 100%; padding: 9px 16px; background: rgba(0,0,0,0.59);
}
.resumo-card-totais-text { font-size: 14px; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.resumo-card-totais-text b { color: var(--accent); font-size: 16px; }
.resumo-card-dark ~ .resumo-card-content .resumo-card-totais-text b { color: #fff; }

/* Ticker do Resumo: foto a 25% de opacidade + tinta de cor do termômetro por
   cima — mesma ideia do overlay dos cards, camadas absolutas atrás do
   conteúdo (.ticker-btn já é position:relative). */
.ticker-photo-25 { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.25; z-index: 0; border-radius: 8px; }
.ticker-color-tint { position: absolute; inset: 0; opacity: 0.35; z-index: 0; border-radius: 8px; }
.ticker-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }

/* ---------- Estatísticas ---------- */
.stats-page { max-width: 1320px; margin: 0 auto; padding: 24px; }
.stats-layout { display: flex; gap: 20px; align-items: flex-start; }
.stats-main { flex: 1; min-width: 0; }
/* Botão de filtro "mostrar card" (era uma checkbox) — estreito e vertical,
   um por linha na lateral; aceso (.active) = card visível. */
#stats-filter-list { display: flex; flex-direction: column; gap: 6px; }
.stats-filter-btn {
  display: block; width: 100%; text-align: left; padding: 6px 10px;
  font-size: 12px; line-height: 1.3; border-radius: 6px; cursor: pointer;
  background: var(--bg-alt); border: 1px solid var(--card-border); color: var(--text-dim);
  transition: all 0.15s ease;
}
.stats-filter-btn:hover { border-color: var(--accent); }
.stats-filter-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
@media (max-width: 1050px) {
  .stats-layout { flex-direction: column; }
  #stats-filters-sidebar { width: 100%; position: static; max-height: none; }
}
.stats-choose { max-width: 1000px; margin: 40px auto; padding: 0 24px; text-align: center; }
.stats-choose select { width: 100%; padding: 10px; margin-top: 12px; background: var(--card);
  border: 1px solid var(--card-border); color: var(--text); border-radius: 8px; }
.stats-choose button { margin-top: 14px; padding: 10px 20px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }

/* Boxes horizontais dos assuntos (substituiu o antigo dropdown+botão) */
.stats-box-list { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; text-align: left; }
.stats-select-box {
  position: relative; display: block; min-height: 130px; border-radius: 14px; overflow: hidden;
  padding: 18px 130px 32px 22px; background-color: var(--card); background-size: cover;
  background-position: center; border: 1px solid var(--card-border); text-decoration: none; color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer;
}
.stats-select-box:hover {
  border-color: var(--accent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent);
}
.stats-select-dark { position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 0; }
.stats-select-overlay { position: absolute; inset: 0; opacity: 0.28; z-index: 0; }
.stats-select-content { position: relative; z-index: 1; text-align: left; min-width: 0; }
.stats-select-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.stats-select-title {
  margin: 0; font-size: 20px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.stats-select-mini-thermo { display: flex; gap: 5px; flex-wrap: wrap; }
.stats-select-mini-seg {
  width: 78px; height: 30px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.2px; line-height: 1.15; text-align: center;
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.85); text-transform: uppercase; white-space: nowrap;
}
.stats-select-mini-seg.current { box-shadow: 0 0 8px 1px currentColor, 0 0 0 1px rgba(255,255,255,0.5) inset; }
.stats-select-counts { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.stats-select-count-pill {
  font-size: 11.5px; color: #fff; background: rgba(0,0,0,0.4); padding: 3px 9px;
  border-radius: 999px; white-space: nowrap;
}
.stats-select-count-pill.total { background: color-mix(in srgb, var(--accent) 35%, rgba(0,0,0,0.4)); }
.stats-select-count-pill.falsa { background: rgba(239,68,68,0.45); }
.stats-select-hint { margin: 8px 0 0; font-size: 11px; color: #d9dce1; font-style: italic; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.stats-select-sensitivity {
  position: absolute; right: 16px; bottom: 12px; z-index: 1; font-size: 11px; font-weight: 600;
  background: rgba(0,0,0,0.55); padding: 4px 11px; border-radius: 999px; color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}
@media (max-width: 700px) {
  .stats-select-box { padding-right: 22px; }
  .stats-select-sensitivity { position: static; display: inline-block; margin-top: 12px; }
}
.stats-hero {
  position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 20px;
  background-color: var(--card); background-size: cover; background-position: center;
  min-height: 160px; display: flex; align-items: center; justify-content: center;
}
/* Preto 85% — mesma opacidade de .page-hero (a "box de título" das outras
   páginas), pra ficar consistente: a foto de fundo aparece só de leve. */
.stats-hero-overlay-black { position: absolute; inset: 0; background: rgba(0,0,0,0.85); }
.stats-hero-overlay-color { position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: multiply; }
.stats-hero-content { position: relative; z-index: 2; text-align: center; padding: 24px; }
.stats-hero-title {
  font-size: 34px; font-weight: 800; color: #fff; margin: 0 0 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.stats-hero-select select {
  padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.4); color: #fff; font-size: 14px;
}
.stats-hero-content .hint-small { color: #e5e7eb; display: block; margin-top: 8px; }
/* V.0.2.9: hero da página de Resumo por IA de 1 notícia reusa .stats-hero,
   mas o título é o título da notícia (frase longa), não o nome do assunto —
   fonte menor pra não estourar em 2-3 linhas gigantes. */
.noticia-hero-title { font-size: 22px; max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .noticia-hero-title { font-size: 18px; } }
.stats-hero-back {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-size: 12px; font-weight: 600; color: #fff; text-decoration: none;
  background: rgba(0,0,0,0.4); padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
}
.stats-hero-back:hover { background: rgba(0,0,0,0.6); }
.stats-hero-reorganizar {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  font-size: 12px; font-weight: 600; color: #fff; cursor: pointer;
  background: rgba(0,0,0,0.4); padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3); font-family: inherit;
}
.stats-hero-reorganizar:hover { background: rgba(0,0,0,0.6); }

.stats-first-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px;
  align-items: stretch;
}
.stats-news-img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
.gauge-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gauge-svg { width: 100%; max-width: 220px; }
.gauge-label { font-size: 16px; font-weight: 700; margin-top: 6px; }
.gauge-sensitivity { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.gauge-sensitivity-btn {
  background: transparent; border: 1px solid var(--card-border); color: var(--text-dim);
  border-radius: 6px; width: 20px; height: 20px; line-height: 1; cursor: pointer;
  font-size: 12px; margin-left: 4px; vertical-align: middle;
}
.gauge-sensitivity-btn:hover { border-color: var(--accent); color: var(--accent); }
.gauge-trend-label { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.gauge-comparison-date { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.crisis-levels-row { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 12px; }
.crisis-level-pill {
  font-size: 10.5px; font-weight: 600; color: var(--text-dim); padding: 4px 9px;
  border-radius: 999px; border: 1.5px solid transparent; white-space: nowrap;
}
.crisis-level-pill.current { color: var(--text); font-weight: 700; }
.gauge-comparison { font-size: 11px; margin-top: 4px; padding: 3px 10px; border-radius: 999px; }
.gauge-comparison-melhorou { background: #123324; color: var(--ok); }
.gauge-comparison-piorou { background: #3a1414; color: #fca5a5; }
.gauge-comparison-estavel { background: var(--bg-alt); color: var(--text-dim); }
@media (max-width: 900px) { .stats-first-row { grid-template-columns: 1fr; } }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.stat-card-wide { grid-column: span 2; }
.stat-card-xwide { grid-column: span 3; }
@media (max-width: 620px) { .stat-card-wide, .stat-card-xwide { grid-column: span 1; } }

/* Cards de notícia compactos (Processar / Falsa): imagem pequena, resumo em destaque */
.mini-article-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.mini-article-row { display: flex; gap: 10px; align-items: flex-start; }
.mini-article-img {
  width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  background: var(--bg-alt);
}
.mini-article-body { min-width: 0; flex: 1; }
.mini-article-title {
  display: block; font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none;
  line-height: 1.3; margin-bottom: 3px;
}
.mini-article-title:hover { color: var(--accent); }
.mini-article-summary { font-size: 12.5px; color: var(--text-dim); margin: 0 0 3px; line-height: 1.4; }
.mini-article-meta { font-size: 10.5px; color: var(--text-dim); opacity: 0.8; }

/* Arrastar pra reordenar os cards (exceto o resumo geral, que é fixo) */
.stat-card[draggable="true"], .stat-card-wide[draggable="true"], .stat-card-xwide[draggable="true"] { cursor: grab; }
.stat-card.dragging { opacity: 0.4; cursor: grabbing; }
.stat-card.drag-over { outline: 2px dashed var(--accent); outline-offset: 3px; }
.ai-summary-box {
  grid-column: 1 / -1; background: linear-gradient(135deg, var(--accent-soft), var(--card));
  border: 1px solid var(--accent); border-radius: 12px; padding: 18px;
}
.thermometer-card { grid-column: 1 / -1; }
.thermometer-levels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thermo-level {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: var(--bg-alt); border: 1px solid var(--card-border); font-size: 12px;
  color: var(--text-dim); opacity: 0.55; transition: all 0.15s ease;
}
.thermo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lvl-color); flex-shrink: 0; }
.thermo-level.current {
  opacity: 1; color: var(--text); border-color: var(--lvl-color); font-weight: 700;
  box-shadow: 0 0 10px var(--lvl-color);
}
.ai-summary-box h3 { margin: 0 0 8px; font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.ai-summary-box p { font-size: 15px; line-height: 1.6; white-space: pre-line; margin: 0; }
.stat-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 16px;
}
.stat-card h3 { margin: 0 0 10px; font-size: 14px; color: #fafafc; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
/* Glow fixo (independe do esquema de cor escolhido) nos cards de destaque:
   verde pra "5 melhores", vermelho pros de atenção/negativos. */
.stat-card-glow-green { border-color: var(--ok); box-shadow: 0 0 18px color-mix(in srgb, var(--ok) 45%, transparent); }
.stat-card-glow-red { border-color: var(--danger); box-shadow: 0 0 18px color-mix(in srgb, var(--danger) 45%, transparent); }
.stat-card canvas { max-width: 100%; }
.volume-windows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.volume-box { text-align: center; background: var(--bg-alt); border-radius: 8px; padding: 10px; }
.volume-box .num { font-size: 21px; font-weight: 700; color: var(--accent); }
.volume-box .lbl { font-size: 11px; color: var(--text-dim); }
.crisis-thermometer { display: flex; align-items: center; gap: 12px; }
.crisis-thermometer .crisis-dot { width: 20px; height: 20px; }
.term-list { list-style: none; padding: 0; margin: 0; }
.term-list li { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; border-bottom: 1px solid var(--card-border); }

/* ---------- Prévia bloqueada (planos sem acesso completo às Estatísticas) ----------
   Em vez de borrar o container inteiro (o que também borraria os títulos),
   borra só os FILHOS DIRETOS de cada card que não sejam o título (h1/h3) —
   assim dá pra saber o que cada bloco é, sem ver os números/gráficos de
   verdade. Funciona porque cada .stat-card/.ai-summary-box já é <h3>+corpo
   como irmãos diretos (nunca aninhados), então filter:blur() no filho nunca
   "vaza" pro título (blur só afeta o próprio elemento + seus descendentes). */
.stats-locked .stat-card > *:not(h3),
.stats-locked .ai-summary-box > *:not(h3),
.stats-locked .stats-hero-content > *:not(h1),
.stats-locked .stats-hero-reorganizar,
.stats-locked .stats-hero-back,
.stats-locked .grid-cards-small,
.stats-locked .trend-grid,
.stats-locked .trend-empty {
  filter: blur(6px); opacity: 0.45; pointer-events: none; user-select: none;
}
.modal-actions-row { display: flex; gap: 10px; margin-top: 6px; }
.modal-actions-row .btn-command { flex: 1; margin-top: 0; }

/* ---------- Melhor/pior notícia ---------- */
.best-worst-card a { color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; }
.best-worst-card a:hover { color: var(--accent); }
.best-worst-card.best { border-color: var(--ok); }
.best-worst-card.worst { border-color: var(--danger); }

/* ---------- Tendências / Em alta ---------- */
.trend-page { max-width: 1000px; margin: 0 auto; padding: 24px; }
.trend-page-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
  padding: 24px; box-shadow: 0 0 30px rgba(0,0,0,0.15);
}
.user-topic-group { margin-bottom: 24px; }
.user-topic-title {
  font-size: 15px; font-weight: 700; color: var(--accent); margin: 0 0 10px;
  border-bottom: 1px solid var(--card-border); padding-bottom: 6px;
}
.grid-cards-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.grid-cards-small .card-body { padding: 10px; }
.grid-cards-small h4 { font-size: 14px; margin: 0 0 6px; line-height: 1.3; }
.grid-cards-small h4 a { color: var(--text); text-decoration: none; }
.grid-cards-small h4 a:hover { color: var(--accent); }

/* ---------- Página Sobre ---------- */
.sobre-page { max-width: 780px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.sobre-hero {
  text-align: center; padding: 32px 20px; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-soft), var(--card));
  border: 1px solid var(--card-border); position: relative; overflow: hidden;
}
.sobre-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 15% 20%, var(--accent) 0%, transparent 45%),
              radial-gradient(circle at 85% 80%, var(--accent-2) 0%, transparent 45%);
  opacity: 0.12; pointer-events: none;
}
.sobre-hero-logo { max-width: 84px; margin: 0 auto 14px; display: block; position: relative; }
.sobre-hero-title {
  font-size: 26px; font-weight: 800; margin: 0 0 6px; position: relative;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sobre-hero-sub { font-size: 14px; color: var(--text-dim); margin: 0; position: relative; }

/* ---------- Box de topo das demais páginas (preto 85%, sem logo) ---------- */
.page-hero {
  /* V.0.1.69: box menor (era 12px/20px de padding) + preto 90% com mais
     25% de transparência em cima disso (0.90 * 0.75 ≈ 0.68), a pedido. */
  text-align: center; padding: 9px 16px; border-radius: 12px;
  background: rgba(0,0,0,0.68); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--card-border));
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent);
  margin: 0 0 18px;
}
.page-hero-title {
  font-size: 19px; font-weight: 800; margin: 0 0 3px; letter-spacing: 0.5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero-sub { font-size: 13px; color: #cbd5e1; margin: 0; }
.table-scroll-wrap { overflow-x: auto; }
.table-scroll-wrap .status-table { min-width: 480px; }
.crisis-levels-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.crisis-level-row { background: var(--bg-alt); border-radius: 8px; padding: 10px 14px; }
.crisis-level-head { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.crisis-level-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.crisis-level-crit { font-size: 13px; color: var(--text-dim); margin: 2px 0; }
.crisis-level-desc { font-size: 13.5px; color: var(--text); margin: 2px 0 0; }
.responsible-use-panel { border: 1px solid #f59e0b; background: linear-gradient(135deg, rgba(245,158,11,0.08), var(--card)); }
.responsible-use-panel h2 { color: #f59e0b; }
.category-section { margin-bottom: 30px; }
.category-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; text-align: center; }
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.trend-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden;
}
.trend-card img { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--bg-alt); }
.trend-card-body { padding: 10px; }
.trend-card h4 { font-size: 13.5px; margin: 0 0 6px; line-height: 1.35; }
.trend-card h4 a { color: var(--text); text-decoration: none; }
.trend-card h4 a:hover { color: var(--accent); }
.trend-source { font-size: 11px; color: var(--text-dim); }
.trend-empty { font-size: 13px; color: var(--text-dim); }
.highlight-section { background: var(--card); border: 1px solid var(--accent); border-radius: 12px; padding: 16px; margin-bottom: 30px; }
.highlight-item { padding: 8px 0; border-bottom: 1px solid var(--card-border); font-size: 14px; }
.highlight-item b { color: var(--accent); }

/* ---------- Loading futurista (operações demoradas) ---------- */
.fl-overlay {
  position: fixed; inset: 0; background: rgba(5,6,8,0.72); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; z-index: 200;
}
.fl-overlay.show { display: flex; }
.fl-box {
  background: var(--card); border: 1px solid var(--accent); border-radius: 16px;
  padding: 28px 34px; width: 320px; text-align: center;
  box-shadow: 0 0 40px rgba(37,99,235,0.25);
}
.fl-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--text); }
.fl-box .hint-small { margin-top: 12px; text-align: left; }
.fl-ok { width: 100%; margin-top: 16px; }
.fl-spinner {
  width: 42px; height: 42px; margin: 0 auto 16px;
  border: 3px solid var(--card-border); border-top-color: var(--accent);
  border-radius: 50%; animation: fl-spin 0.9s linear infinite;
}
@keyframes fl-spin { to { transform: rotate(360deg); } }
.fl-bar-track { width: 100%; height: 6px; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.fl-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 0.15s linear; }
.fl-percent { margin-top: 10px; font-family: monospace; font-size: 14px; color: var(--accent); }

/* ---------- INÍCIO: tela de carregamento entre páginas (V.0.1.50/.51, reversível) ----------
   Pra remover por completo: apague este bloco e o bloco irmão em base.html
   (procure pelos mesmos comentários "INÍCIO/FIM" lá). */
.pt-overlay {
  position: fixed; inset: 0; background: rgba(5,6,8,0.55); backdrop-filter: blur(1.5px);
  display: none; align-items: center; justify-content: center; z-index: 999;
  opacity: 0; transition: opacity 0.15s ease;
}
.pt-overlay.show { display: flex; opacity: 1; }
.pt-box {
  background: var(--card); border: 1px solid var(--accent); border-radius: 16px;
  padding: 26px 32px; width: 220px; text-align: center;
  box-shadow: 0 0 40px rgba(37,99,235,0.25);
}
.pt-spinner {
  width: 42px; height: 42px; margin: 0 auto 14px;
  border: 3px solid rgba(255,255,255,0.15); border-top-color: var(--accent);
  border-radius: 50%; animation: fl-spin 0.8s linear infinite;
}
.pt-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--text); }
.pt-bar-track { width: 100%; height: 6px; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.pt-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 0.2s ease-out; }
.pt-percent { margin-top: 10px; font-family: monospace; font-size: 14px; color: var(--accent); }
/* ---------- FIM: tela de carregamento entre páginas ---------- */

/* ---------- Pop-up de mudanças administrativas (no próximo login) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(5,6,8,0.75); display: none;
  align-items: center; justify-content: center; z-index: 210;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--card); border: 1px solid var(--accent); border-radius: 16px;
  padding: 26px; width: 340px; text-align: center; box-shadow: 0 0 40px rgba(0,0,0,0.35);
}
.modal-box h2 { font-size: 16px; margin: 0 0 14px; }
.changelog-list { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; }
.changelog-list li {
  font-size: 13.5px; color: var(--text-dim); padding: 6px 0; border-bottom: 1px solid var(--card-border);
}
.modal-dismiss {
  display: block; width: 100%; margin-top: 14px; padding: 10px; font-size: 14px;
  font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  box-sizing: border-box;
}
.modal-dismiss:hover { opacity: 0.88; }

/* ---------- Site WEB público (V.0.1.67) ---------- */
.web-topbar { position: relative; z-index: 10; }
.web-page { max-width: 1100px; margin: 0 auto; padding: 40px 24px 60px; min-height: 60vh; }
.web-footer { text-align: center; padding: 24px; color: var(--text-dim); font-size: 12px; position: relative; z-index: 1; }

.web-hero { text-align: center; padding: 40px 20px 56px; }
/* V.0.1.70: +85% de tamanho, a pedido (era 25%/180px/90px). */
.web-hero-logo { width: 46%; max-width: 333px; min-width: 166px; height: auto; margin: 0 auto 20px; display: block; }
.web-hero-title {
  font-size: 40px; font-weight: 800; margin: 0 0 14px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.web-hero-sub { font-size: 17px; color: var(--text-dim); max-width: 640px; margin: 0 auto 26px; line-height: 1.6; }
.web-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Hero da Home: os 3 botões (Fale com a gente/Criar conta grátis/Ver
   planos) lado a lado (V.0.1.78 — empilhados verticalmente antes, via
   .web-hero-ctas-stack; removida, não tem mais uso), mesma largura pros
   3, quebrando linha sozinho em telas estreitas (flex-wrap já no .web-hero-ctas). */
.web-hero-cta-btn { width: 280px; max-width: 100%; text-align: center; }

/* V.0.1.100: diagramação da hero pública no celular — logo mais pra cima
   (menos respiro no topo), título -45% (40px -> 22px, pedido explícito,
   40px quebrava/dominava demais a tela num aparelho estreito) e o
   subtítulo um pouco menor também, pra manter a proporção entre os dois. */
@media (max-width: 640px) {
  .web-hero { padding: 18px 16px 40px; }
  .web-hero-logo { margin: 0 auto 14px; }
  .web-hero-title { font-size: 22px; margin: 0 0 10px; }
  .web-hero-sub { font-size: 15px; margin: 0 auto 20px; }
}

.web-section-title { text-align: center; font-size: 26px; font-weight: 800; margin: 56px 0 8px; }

/* V.0.1.103: texto corrido da Política de Privacidade — prosa simples,
   largura de leitura confortável, sem o visual de "card"/grid do resto
   do site público (não faz sentido pra um texto legal). */
.privacidade-texto { max-width: 760px; margin: 0 auto; line-height: 1.7; }
.privacidade-texto h2 { font-size: 19px; margin: 32px 0 10px; color: var(--accent); }
.privacidade-texto p, .privacidade-texto li { color: var(--text-dim); font-size: 15px; }
.privacidade-texto ul { padding-left: 22px; margin: 8px 0; }
.privacidade-texto li { margin-bottom: 6px; }
.privacidade-texto a { color: var(--accent); }
.privacidade-texto b { color: var(--text); }
.web-section-sub { text-align: center; color: var(--text-dim); font-size: 14px; margin: 0 0 30px; }

/* "Vantagens do Klima" (V.0.1.71) — substituiu "Nossos dados reais" (números
   viraram destaque dentro de 2 dos cards) + juntou o que antes eram 2 grids
   separados (features + "confiança") num grid só de 4 colunas. O card do
   termômetro em ação é o ÚLTIMO no HTML mas ocupa a linha inteira sozinho
   (1/-1) e fica centralizado, com metade da largura da linha (~2 boxes). */
.web-vantagens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 16px; }
@media (max-width: 860px) { .web-vantagens-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .web-vantagens-grid { grid-template-columns: 1fr; } }
.web-feature-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 22px; text-align: center;
}
.web-feature-card .emoji { font-size: 32px; margin-bottom: 10px; display: block; }
.web-feature-card h3 { margin: 0 0 8px; font-size: 15px; }
.web-feature-card p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.web-gauges-card { text-align: center; }
.web-gauges-row { display: flex; gap: 10px; justify-content: center; margin: 10px 0 4px; }
.web-gauge-mini { flex: 1; min-width: 0; }
.web-gauge-mini .gauge-svg-ciclo { width: 100%; }
.web-gauge-mini .resumo-card-label { font-size: 12px; margin: 2px 0 0; }
/* Design mais caprichado (pedido explícito): borda/glow na cor do esquema
   e um pouco mais de respiro que os cards normais. V.0.1.78: 2 boxes de
   largura (era linha inteira centralizada sozinha) — agora fica lado a
   lado com .web-stats-card-featured na mesma linha do grid de 4 colunas
   (2+2 = a linha inteira). */
.web-gauges-card-featured {
  grid-column: span 2; padding: 28px 24px;
  border: 1px solid var(--accent); box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 25%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card));
}
.web-gauges-card-featured h3 { font-size: 17px; margin-bottom: 14px; }

/* Box "O Klima em tempo real" (V.0.1.76). V.0.1.78: 2 boxes de largura
   (era 3/~75%) — lado a lado com .web-gauges-card-featured na mesma linha. */
.web-stats-card-featured {
  grid-column: span 2; padding: 26px 24px; text-align: center;
  border: 1px solid var(--accent); box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 25%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card));
}
.web-stats-card-featured h3 { font-size: 17px; margin-bottom: 16px; }
.web-stats-row { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.web-stat-item { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 4px; }
.web-stat-number { font-size: 30px; font-weight: 800; color: var(--accent); }
.web-stat-label { font-size: 13px; color: var(--text-dim); }

/* Planos */
.plan-toggle-group { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }
.plan-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.plan-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
  padding: 26px 20px; text-align: center; display: flex; flex-direction: column; position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.plan-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.plan-card.plan-card-featured { border-color: var(--accent); box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 30%, transparent); }
.plan-card-featured-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
}
.plan-card-name { font-size: 18px; font-weight: 800; margin: 6px 0 4px; }
.plan-card-price { font-size: 30px; font-weight: 800; color: var(--accent); margin: 6px 0; }
.plan-card-price small { font-size: 13px; color: var(--text-dim); font-weight: 500; }
.plan-card-features { list-style: none; padding: 0; margin: 16px 0; text-align: left; flex: 1; }
.plan-card-features li { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--card-border); }
.plan-card-features li:last-child { border-bottom: none; }
.plan-card-features li.feature-no { color: var(--text-dim); opacity: 0.6; }
.plan-card .btn-command { width: 100%; margin-top: auto; text-decoration: none; text-align: center; }

/* Blog */
.blog-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.blog-post-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 20px;
}
.blog-post-title { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: var(--accent); }
.blog-post-date { font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }
.blog-post-list { list-style: none; padding: 0; margin: 0; }
.blog-post-list li { font-size: 13.5px; padding: 5px 0 5px 20px; position: relative; }
.blog-post-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.blog-post-resumo { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; margin: 0; }

/* Assinaturas */
.assinatura-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 24px; max-width: 480px; margin: 0 auto;
}

/* Cadastro */
.cadastro-wrap { max-width: 440px; margin: 20px auto 0; }
.cadastro-wrap .login-box { text-align: left; }

/* Pagamento (Checkout Transparente, V.0.1.67) */
.pagamento-wrap { max-width: 480px; margin: 0 auto; }
.pagamento-summary {
  text-align: center; background: var(--card); border: 1px solid var(--accent); border-radius: 16px;
  padding: 24px; margin-bottom: 20px; box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
.pagamento-plan-name { margin: 4px 0; font-size: 22px; font-weight: 800; color: var(--accent); }
.pagamento-amount { font-size: 32px; font-weight: 800; margin: 0; }
.pagamento-amount span { font-size: 14px; color: var(--text-dim); font-weight: 500; }
.pagamento-method-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.pagamento-tab {
  flex: 1; padding: 12px 8px; background: var(--bg-alt); border: 1px solid var(--card-border);
  border-radius: 10px; color: var(--text-dim); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: all 0.15s ease;
}
.pagamento-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagamento-panel {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 20px;
}
.pagamento-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pagamento-form-grid input {
  padding: 9px; background: var(--bg-alt); border: 1px solid var(--card-border);
  color: var(--text); border-radius: 6px; font-size: 14px;
}
.pix-qr-wrap { text-align: center; margin: 14px 0; }
.pix-qr-wrap img { max-width: 220px; width: 100%; border-radius: 8px; background: #fff; padding: 8px; }
.pix-copia-cola { display: flex; gap: 8px; margin-bottom: 10px; }
.pix-copia-cola input {
  flex: 1; padding: 9px; background: var(--bg-alt); border: 1px solid var(--card-border);
  color: var(--text); border-radius: 6px; font-size: 12px;
}
.pagamento-seguro { text-align: center; margin-top: 16px; }

/* Histórico de pagamentos em "Meu plano" (V.0.1.78) — o mais recente
   primeiro, uma barra colorida na lateral indica o status de cada um. */
.pagamento-historico { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pagamento-historico-item {
  padding: 10px 14px; background: var(--bg-alt); border: 1px solid var(--card-border);
  border-left-width: 4px; border-radius: 8px;
}
.pagamento-historico-item.pagamento-status-pendente { border-left-color: #f59e0b; }
.pagamento-historico-item.pagamento-status-aprovado { border-left-color: var(--ok); }
.pagamento-historico-item.pagamento-status-recusado { border-left-color: var(--danger); }
.pagamento-historico-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pagamento-historico-status { font-size: 13px; font-weight: 600; }
.pagamento-historico-meta { margin-top: 4px; }
/* V.0.2.13: bug real corrigido — .btn-small não define text-decoration nem
   display, então num <a> (o botão "Tentar de novo") virava link sublinhado
   sem cara de botão nenhuma (bem diferente do "Apagar" ao lado, que é um
   <button> de verdade); as duas ações também ficavam grudadas no texto de
   cima, sem respiro. Vira um botão de destaque (cor de accent) igual ao
   resto do app, alinhado com "Apagar" pela mesma linha. */
.pagamento-historico-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pagamento-historico-acoes a.btn-small,
.pagamento-historico-acoes button.btn-small {
  display: inline-flex; align-items: center; text-decoration: none;
}
.pagamento-btn-retry {
  background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(37,99,235,0.3); font-weight: 600;
}
.pagamento-btn-retry:hover { color: var(--accent); background: rgba(37,99,235,0.22); }

/* V.0.2.13: form "Janela ativa / Das / às" do Ping automático (ADM) —
   antes era 4 itens soltos num flex-wrap só (checkbox+label, 2 divs de
   horário, botão), que quebrava linha de um jeito imprevisível e feio
   dependendo da largura. Agora: toggle sozinho numa linha, horários+botão
   juntos numa linha própria abaixo. */
.ping-agenda-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ping-agenda-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ping-agenda-time { display: flex; align-items: center; gap: 6px; }
/* V.0.2.20: painel de teste fixo (ADM > usuário "teste") — cor de destaque
   diferente dos painéis normais (roxo, não usado em mais nada no admin) +
   sticky no topo, pra nunca sumir mesmo rolando a página, já que é pra
   ficar sempre à mão durante um teste. */
.painel-teste-fixo {
  border-color: #a855f7; box-shadow: 0 0 16px rgba(168,85,247,0.25);
  position: sticky; top: 10px; z-index: 5;
}
.painel-teste-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.painel-teste-grid form { margin: 0; }

.uptime-chart-wrap {
  position: relative; width: 100%; height: 160px; margin-top: 8px;
  background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px;
}

/* ---------- Engrenagem de notificações — só no app Android (V.0.1.71) ---------- */
/* Escondido por padrão (site normal); a classe .klima-app-mode só existe no
   <html> quando o User-Agent é do WebView do app (ver script em base.html). */
.notif-fab { display: none; }
.klima-app-mode .notif-fab {
  display: flex; align-items: center; justify-content: center;
  position: fixed; bottom: 58px; right: 18px; z-index: 130;
  width: 52.5px; height: 52.5px; border-radius: 50%; border: none;
  background: #374151; color: #e5e7eb; font-size: 24px; text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
.klima-app-mode .notif-fab:hover { background: #4b5563; transform: scale(1.06); }
/* Notícias, no celular: o botão "Filtrar" ocupa o mesmo canto (inferior
   direito) da engrenagem — sobe a engrenagem pra ficar ACIMA do filtro
   (antes era o filtro que subia pra ficar acima da engrenagem; invertido a
   pedido explícito). O filtro fica na posição normal dele (bottom:20px,
   ver .mobile-filter-btn) nessa página. */
html.klima-app-mode body:has(.mobile-filter-btn) .notif-fab { bottom: 84px; }

/* ---------- Chat usuário <-> ADM (V.0.1.65/.66/.68/.69) ---------- */
/* Canto inferior esquerdo, centralizado sobre a etiqueta de versão via JS
   (largura do .build-tag varia com o texto, então não dá pra centralizar só
   com CSS) — ver script em base.html. V.0.1.69: subiu um pouco (era
   bottom:46px) e o glow parado (sem mensagem) agora é azul claro (era
   vermelho permanente). V.0.1.77: bottom:58px É DE PROPÓSITO igual ao do
   .notif-fab (canto oposto) — os dois ficam alinhados/na mesma altura
   sempre que aparecem juntos (pedido explícito); mexer num, mexer no outro. */
.chat-fab {
  position: fixed; bottom: 58px; left: 14px; z-index: 200;
  width: 52.5px; height: 52.5px; border-radius: 50%; border: none;
  background: #2563eb; color: #fff; font-size: 25px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 20px rgba(96,165,250,0.65);
  transition: transform 0.15s ease, left 0.2s ease;
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab-icon { display: inline-block; }
/* "Ainda não cliquei nunca" (V.0.1.70) — glow azul suave de 25% de opacidade
   pulsando, até a pessoa clicar no botão pela 1ª vez (localStorage, dura
   pra sempre no navegador — não é sobre mensagem não lida, é só onboarding). */
@keyframes chat-fab-pulse-onboard {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 0 rgba(37,99,235,0.25); }
  50% { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 14px rgba(37,99,235,0.25); }
}
.chat-fab-onboard { animation: chat-fab-pulse-onboard 1.8s ease-in-out infinite; }
.chat-fab-badge {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}
/* Mensagem não lida (V.0.1.69): o glow alterna vermelho <-> verde pulsando
   (era só vermelho pulsando de intensidade) + o ícone treme levemente a
   cada ciclo de 3s pra chamar atenção. */
@keyframes chat-fab-pulse-rg {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 26px 4px rgba(239,68,68,0.75); }
  50% { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 26px 4px rgba(34,197,94,0.75); }
}
.chat-fab-blink { animation: chat-fab-pulse-rg 1.6s ease-in-out infinite; }
@keyframes chat-fab-shake {
  0%, 90%, 100% { transform: rotate(0deg); }
  91% { transform: rotate(-10deg); }
  92.5% { transform: rotate(9deg); }
  94% { transform: rotate(-7deg); }
  95.5% { transform: rotate(5deg); }
  97% { transform: rotate(-3deg); }
  98.5% { transform: rotate(0deg); }
}
.chat-fab-blink .chat-fab-icon { animation: chat-fab-shake 3s ease-in-out infinite; }

/* Link CHAT do menu ADM piscando em vermelho quando há mensagem de usuário
   ainda não lida (V.0.1.68) — mesmo espírito do glow do chat-fab, só que
   aplicado ao texto/box do link do menu. */
@keyframes nav-chat-blink-anim {
  0%, 100% { color: var(--text-dim); text-shadow: none; }
  50% { color: #ef4444; text-shadow: 0 0 8px rgba(239,68,68,0.9); }
}
.nav-chat-blink { animation: nav-chat-blink-anim 1.3s ease-in-out infinite; font-weight: 800; }

.chat-modal-box {
  width: min(420px, 92vw); text-align: left; display: flex; flex-direction: column;
  max-height: 80vh; padding: 18px;
}
.chat-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chat-modal-head h2 { margin: 0; }
.chat-modal-close {
  background: transparent; border: none; color: var(--text-dim); font-size: 18px;
  cursor: pointer; line-height: 1; padding: 4px;
}
.chat-modal-close:hover { color: var(--text); }

.chat-thread {
  flex: 1; overflow-y: auto; min-height: 200px; max-height: 50vh;
  display: flex; flex-direction: column; gap: 8px; padding: 8px 4px; margin-bottom: 10px;
}
.chat-bubble-row { display: flex; }
.chat-bubble-row-mine { justify-content: flex-end; }
.chat-bubble {
  max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 13px;
}
.chat-bubble-theirs { background: var(--bg-alt); border: 1px solid var(--card-border); border-bottom-left-radius: 4px; }
.chat-bubble-mine { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble-text { margin: 0; white-space: pre-wrap; word-break: break-word; }
.chat-bubble-time { display: block; font-size: 10px; opacity: 0.65; margin-top: 3px; text-align: right; }

.chat-send-form { display: flex; gap: 8px; }
.chat-send-form input {
  flex: 1; padding: 9px 12px; background: var(--bg-alt); border: 1px solid var(--card-border);
  border-radius: 999px; color: var(--text); font-size: 13px;
}
.chat-send-form .btn-command { width: auto; margin-top: 0; padding: 9px 18px; }

/* Tela do ADM (admin_chat_conversa.html, V.0.1.68): fundo 80% preto na
   conversa (diferente da bolha do widget flutuante) + faixa com plano/vagas
   da pessoa acima do histórico. */
.chat-thread-dark {
  background: rgba(0,0,0,0.8); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px;
}
.chat-pessoa-info {
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim);
  padding: 10px 14px; background: var(--card); border: 1px solid var(--card-border);
  border-radius: 10px; margin-bottom: 12px;
}
.chat-pessoa-info b { color: var(--text); }

/* Lista de conversas (painel ADM) */
.chat-conv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.chat-conv-card {
  position: relative; display: block; background: var(--card); border-radius: 10px;
  padding: 12px 14px; text-decoration: none; color: var(--text); border: 1px solid var(--card-border);
  transition: box-shadow 0.15s ease;
}
.chat-conv-pending { border-color: var(--danger); box-shadow: 0 0 14px color-mix(in srgb, var(--danger) 45%, transparent); }
.chat-conv-answered { border-color: var(--ok); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 35%, transparent); }
.chat-conv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-conv-name { font-weight: 700; font-size: 14px; }
.chat-conv-badge {
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
}
.chat-conv-preview { font-size: 12px; color: var(--text-dim); margin: 6px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv-time { font-size: 11px; color: var(--text-dim); opacity: 0.8; }

/* ===================================================================
   CELULAR — tudo daqui pra baixo é só @media, então a versão de
   computador (acima) fica 100% intocada. Breakpoint principal: 768px
   (tablet/celular); 480px pra ajustes extras em telas bem pequenas.
   =================================================================== */

/* ---------- Menu: vira hambúrguer (o botão só aparece aqui) ---------- */
.topbar-hamburger { display: none; }
/* ---------- Notícias: filtros viram um botão flutuante + painel cheio ---------- */
.mobile-filter-btn { display: none; }
.mobile-filter-close { display: none; }
@media (max-width: 768px) {
  .topbar { padding: 10px 14px; gap: 6px; }
  .topbar-left { gap: 12px; }
  .topbar-logo { height: 22px; }
  .lcd-clock { font-size: 13px; gap: 4px; }
  .lcd-location { font-size: 10px; }

  .topbar-hamburger {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-left: auto;
    background: var(--bg-alt); border: 1px solid var(--card-border); border-radius: 8px;
    color: var(--accent); font-size: 19px; cursor: pointer; flex-shrink: 0;
  }
  .topbar-actions {
    display: none; width: 100%; order: 3; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
    background: var(--bg-alt); border-bottom: 1px solid var(--card-border);
    padding: 8px 14px 14px; box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  }
  .topbar-actions.mobile-open { display: flex; }
  .topbar-actions .nav-sep { display: none; } /* "•" não faz sentido empilhado */
  .topbar-actions .btn-link, .topbar-actions a.btn-link {
    display: block; width: 100%; padding: 10px 4px; font-size: 15px;
    border-bottom: 1px solid var(--card-border);
  }
  .topbar-actions .badge { align-self: flex-start; margin: 6px 0; }
}

@media (max-width: 768px) {
  /* ---------- Notícias: filtros viram um painel cheio, escondido por
     padrão, aberto pelo botão flutuante "Filtrar" (em vez de empilhar
     embaixo do conteúdo, que ainda ficava comprido demais de rolar) ---------- */
  .dashboard-layout { flex-direction: column; padding: 12px; gap: 14px; }
  .filters-sidebar {
    display: none; position: fixed; inset: 0; z-index: 220; margin: 0;
    width: 100%; max-height: 100vh; border-radius: 0; overflow-y: auto;
    padding: 0 16px 90px;
  }
  .filters-sidebar.mobile-open { display: block; }
  .mobile-filter-close {
    display: block; position: sticky; top: 0; z-index: 1; margin: 0 -16px 14px;
    padding: 16px; background: var(--bg-alt); border-bottom: 1px solid var(--card-border);
    text-align: right; font-weight: 700; color: var(--accent); cursor: pointer;
  }
  .mobile-filter-btn {
    display: flex; align-items: center; gap: 6px; position: fixed; bottom: 20px; right: 18px;
    z-index: 120; padding: 13px 20px; border-radius: 999px; border: none;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
    cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  }
  .articles-main { width: 100%; }
  .ticker { padding: 10px 12px; }
  .ticker-btn { min-width: 180px; padding: 8px; }
  .flashes-dashboard { padding: 10px 12px 0; }

  /* grids de card: 1 coluna fixa (mais previsível que auto-fill numa tela estreita) */
  .view-card_grande, .view-card_pequeno { grid-template-columns: 1fr; }
  .view-lista_grande .card-img { width: 110px; }
  .view-lista_pequena .card-img { width: 70px; }

  /* ---------- Assuntos ---------- */
  .keywords-page { padding: 12px; }
  .add-keyword-form { padding: 12px; }
  .keyword-list li { flex-direction: column; align-items: flex-start; }
  .person-row-actions { flex-wrap: wrap; }

  /* ---------- Estatísticas ---------- */
  .stats-page, .stats-choose { padding: 0 12px; }
  .stats-hero-title { font-size: 24px; }
  .stats-select-mini-seg { width: 60px; height: 26px; font-size: 8px; }
  .stats-select-box { padding: 16px 18px 32px; }
  .stat-card-wide, .stat-card-xwide { grid-column: span 1; }
  .mini-article-list { max-height: 340px; }

  /* ---------- Admin / Conta / Sobre ---------- */
  .config-page, .conta-page, .sobre-page, .admin-form, .trend-page { padding: 12px; }
  .theme-scheme-row { gap: 12px; }
  .status-table, .plan-table { display: block; overflow-x: auto; white-space: nowrap; }
  .wallpaper-form input { min-width: 0; }

  /* ---------- Modais: nunca mais largos que a tela ---------- */
  .modal-box, .fl-box { width: min(340px, 90vw); padding: 20px; }

  /* etiqueta de versão: menor e mais discreta, pra não brigar com o conteúdo */
  .build-tag { font-size: 9px; padding: 2px 6px; opacity: 0.55; }
  .trial-banner { font-size: 11px; padding: 6px 10px; }
}

@media (max-width: 480px) {
  /* Espaçamento vertical bem generoso de propósito (pedido explícito) — os
     containers da tela de login ficam bem separados uns dos outros no celular. */
  .login-wrap { margin-top: 70px; }
  .login-logo { max-width: 110px; margin-bottom: 50px; }
  .login-box { padding: 18px; }
  .login-title { font-size: 22px; margin-bottom: 50px; }
  .login-secondary-actions { margin-top: 50px; }
  /* Disclaimer com a mesma largura do container de login (380px) no celular */
  .responsible-use-notice { max-width: 380px; width: calc(100% - 32px); margin: 60px auto 50px; padding: 12px 16px; }
  .responsible-use-notice p { font-size: 12px; line-height: 1.5; }
  .stats-select-title { font-size: 17px; }
  .card h2 { font-size: 15px; }
  .fl-box, .modal-box { width: 92vw; }
}