:root{
  --bg:#f2f4f0;
  --surface:#ffffff;
  --surface-2:#eaece6;
  --ink:#1b211d;
  --muted:#5c6660;
  --faint:#8b948c;
  --line:#dadfd6;
  --accent:#0f6e64;
  --accent-ink:#e6f4f1;
  --accent-strong:#0b4f48;
  --ok:#2f7d4f;
  --ok-bg:#e5f3ea;
  --warn:#9a6a0c;
  --warn-bg:#faf1de;
  --crit:#a83a2f;
  --crit-bg:#f8e8e5;
  --info:#3a5a9a;
  --info-bg:#e7edf7;
  --shadow: 0 1px 2px rgba(20,26,22,.06), 0 8px 24px -12px rgba(20,26,22,.18);
  --radius: 10px;
  --font-ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121512;
    --surface:#191d19;
    --surface-2:#1f2420;
    --ink:#e7ebe6;
    --muted:#a3aca4;
    --faint:#727b73;
    --line:#2b322c;
    --accent:#4fd1bf;
    --accent-ink:#0e2a26;
    --accent-strong:#7fe0d1;
    --ok:#5fc98a;
    --ok-bg:#132a1c;
    --warn:#e0b25a;
    --warn-bg:#2c2410;
    --crit:#e6857a;
    --crit-bg:#301713;
    --info:#8fb1ef;
    --info-bg:#151f30;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
  }
}
/* opcional: so incluir se a pagina tiver alternador de tema manual */
:root[data-theme="dark"]{
  --bg:#121512; --surface:#191d19; --surface-2:#1f2420; --ink:#e7ebe6; --muted:#a3aca4; --faint:#727b73;
  --line:#2b322c; --accent:#4fd1bf; --accent-ink:#0e2a26; --accent-strong:#7fe0d1;
  --ok:#5fc98a; --ok-bg:#132a1c; --warn:#e0b25a; --warn-bg:#2c2410; --crit:#e6857a; --crit-bg:#301713;
  --info:#8fb1ef; --info-bg:#151f30; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --bg:#f2f4f0; --surface:#ffffff; --surface-2:#eaece6; --ink:#1b211d; --muted:#5c6660; --faint:#8b948c;
  --line:#dadfd6; --accent:#0f6e64; --accent-ink:#e6f4f1; --accent-strong:#0b4f48;
  --ok:#2f7d4f; --ok-bg:#e5f3ea; --warn:#9a6a0c; --warn-bg:#faf1de; --crit:#a83a2f; --crit-bg:#f8e8e5;
  --info:#3a5a9a; --info-bg:#e7edf7; --shadow: 0 1px 2px rgba(20,26,22,.06), 0 8px 24px -12px rgba(20,26,22,.18);
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-ui);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--accent-ink); }

/* Escala de tipografia (use estes tamanhos, nao valores soltos) */
/* Titulo de pagina (h1):    23-26px, weight 800, letter-spacing:-.01em */
/* Titulo de secao (h2):     16-17px, weight 700                       */
/* Rotulo/eyebrow (mono):    10.5-11.5px, uppercase, letter-spacing:.12em, cor --faint */
/* Corpo de texto:           13.5-15px                                  */
/* Legenda/metadado (mono):  11-12px, cor --muted ou --faint             */

code, .k{
  font-family:var(--font-mono); font-size:.87em; background:var(--surface-2);
  border:1px solid var(--line); padding:.05em .35em; border-radius:5px; color:var(--accent-strong);
}

/* Scrollbar fina e tematica — aplicar em qualquer elemento com overflow-y:auto
   (inclusive o body/html quando a pagina inteira rola) */
.scroll-thin, html{
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.scroll-thin::-webkit-scrollbar, ::-webkit-scrollbar{ width:7px; height:7px; }
.scroll-thin::-webkit-scrollbar-track, ::-webkit-scrollbar-track{ background:transparent; }
.scroll-thin::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.scroll-thin::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:hover{ background:var(--faint); }

/* Card/bloco padrao (pill de status, callout, tabela) */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
}
.pill{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px;
  padding:4px 10px; border-radius:999px; font-weight:600; white-space:nowrap;
}
.pill.ok{ background:var(--ok-bg); color:var(--ok); }
.pill.warn{ background:var(--warn-bg); color:var(--warn); }
.pill.info{ background:var(--info-bg); color:var(--info); }
.pill.crit{ background:var(--crit-bg); color:var(--crit); }

.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
table{ border-collapse:collapse; width:100%; font-size:13px; }
thead th{
  text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); background:var(--surface-2); padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td{ border-bottom:none; }

/* ===================== extensoes do Portal de Politica Comercial ===================== */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px;
  background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.topbar .brand{ font-weight:800; letter-spacing:-.01em; }
.topbar .brand small{ display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  color:var(--faint); text-transform:uppercase; letter-spacing:.12em; }
.topbar nav{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.topbar nav a{ color:var(--muted); text-decoration:none; font-weight:600; }
.topbar nav a.ativo, .topbar nav a:hover{ color:var(--accent); }
.topbar form{ margin:0; }
main{ max-width:1180px; margin:0 auto; padding:24px; }
h1{ font-size:24px; font-weight:800; letter-spacing:-.01em; margin:0 0 4px; }
h2{ font-size:16px; font-weight:700; margin:24px 0 10px; }
.subtitulo{ color:var(--muted); margin:0 0 18px; }
.meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--faint); }
a{ color:var(--accent); }
label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; }
input, select, textarea{ font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; width:100%; }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
button, .botao{ font:inherit; font-weight:700; border:0; border-radius:8px; padding:9px 16px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); text-decoration:none; display:inline-block; }
button.secundario, .botao.secundario{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
button.perigo{ background:var(--crit); color:#fff; }
.form-grid{ display:grid; gap:14px; }
.linha-form{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; align-items:end; }
.acoes{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.alerta-erro{ background:var(--crit-bg); color:var(--crit); border-radius:8px; padding:10px 14px; margin:12px 0; }
.alerta-info{ background:var(--info-bg); color:var(--info); border-radius:8px; padding:10px 14px; margin:12px 0; }
.alerta-warn{ background:var(--warn-bg); color:var(--warn); border-radius:8px; padding:10px 14px; margin:12px 0; }
.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td input.preco{ width:110px; text-align:right; }
tr.bloqueado td{ background:var(--crit-bg); }
tr.abaixo td{ background:var(--warn-bg); }
.nota{ font-size:12px; color:var(--muted); margin-top:3px; }
.nota.crit{ color:var(--crit); } .nota.warn{ color:var(--warn); } .nota.info{ color:var(--info); }
.vazio{ color:var(--faint); padding:18px 0; }
.busca{ max-width:340px; margin-bottom:10px; }
@media (max-width:700px){ main{ padding:14px; } .topbar{ padding:10px 14px; } }