/* Radar de Anuncios: tokens e estilos base (tema claro e escuro, iguais ao mockup) */
:root{
  --bg:#f3f5f8; --surface:#ffffff; --surface2:#eaeef4; --line:#d9dfe8;
  --fg:#17202e; --muted:#5d6b80; --accent:#0f5fd6; --accent-soft:#e3edfc;
  --meta:#1877f2; --google:#e8710a; --good:#12805c; --good-soft:#dff3ea;
  --warn:#a15c00; --warn-soft:#fdf0d5; --bad:#b42318; --bad-soft:#fde4e1;
  --f-display:'Sora',system-ui,sans-serif; --f-body:'IBM Plex Sans',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e141d; --surface:#161e2a; --surface2:#1e2837; --line:#2a3647;
  --fg:#e6ebf3; --muted:#93a1b7; --accent:#6aa2ff; --accent-soft:#1a2c4d;
  --meta:#4c9bff; --google:#ff9a3d; --good:#4cc796; --good-soft:#12362b;
  --warn:#f0b24a; --warn-soft:#3a2d12; --bad:#ff7b6e; --bad-soft:#3d1a17; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 var(--f-body)}
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.01em}
.sub{color:var(--muted)}
.erro{background:var(--bad-soft);color:var(--bad);padding:8px 12px;border-radius:6px}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* login */
body.login{display:grid;place-items:center;min-height:100vh;padding:16px}
.login-caixa{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:12px}
.login-caixa form{display:flex;flex-direction:column;gap:8px}
.login-caixa label{font-weight:500}
.login-caixa input{padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);font:inherit}
.login-caixa button{margin-top:8px;padding:10px;border:0;border-radius:6px;background:var(--accent);color:#fff;font:600 14px var(--f-body);cursor:pointer}

/* pagina */
.pagina{max-width:1180px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px)) 48px}
.topo{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 0 14px}
.marca{display:flex;align-items:center;gap:10px;margin-right:auto}
.marca strong{font:700 18px var(--f-display)}
.sair{display:flex;align-items:center;gap:10px;margin:0}
.botao-leve{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font:500 13px var(--f-body);cursor:pointer}
.filtros{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:end;margin-bottom:16px}
.campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.campo label{font-size:12px;color:var(--muted)}
select{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:7px 10px;font:inherit;max-width:100%}
.intervalo{margin:0 0 0 auto;font-family:var(--f-mono)}
.aviso{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);border-radius:6px;padding:8px 12px;margin:0 0 12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0}
.kpi .rotulo{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi .valor{font:500 22px var(--f-mono);font-variant-numeric:tabular-nums;margin-top:4px;overflow-wrap:anywhere}
.kpi .nota{font-size:11px;color:var(--muted)}
.graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:16px}
.painel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;min-width:0;margin-bottom:16px}
.graficos .painel{margin-bottom:0}
.painel h3{font-size:15px;margin-bottom:8px}
svg.grafico{display:block;max-width:100%}
svg.grafico text{fill:var(--muted);font:10px var(--f-mono)}
svg.grafico .grade{stroke:var(--line);stroke-width:1}
svg.grafico text.sem-dados{font-size:12px}
.rolagem{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:520px}
th{font:500 11.5px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;white-space:nowrap}
td.nome{max-width:360px;overflow-wrap:anywhere}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.vazio{color:var(--muted);margin:8px 0 0}