/* Paleta irma da do NIC: mesma estrutura de tokens, mesmo par claro/escuro.
   O acento muda -- azul de nanquim no lugar do magenta -- porque quem abre os
   dois sistemas lado a lado precisa saber em qual esta sem ler o cabecalho. */
:root{
  --ground:#F5F6F8; --surface:#FFFFFF; --surface-2:#EDEFF3; --surface-3:#E4E7ED;
  --border:#DDE1E8; --border-strong:#BFC6D2;
  --text:#141821; --text-2:#525A68; --text-3:#858D9B;
  --accent:#1F4FD8; --accent-ink:#FFFFFF; --accent-soft:rgba(31,79,216,.10);
  --ok:#04785C; --warn:#9A5B08; --crit:#B32D26;
  --ok-soft:rgba(4,120,92,.12); --warn-soft:rgba(154,91,8,.12); --crit-soft:rgba(179,45,38,.12);
  --grid:rgba(20,24,33,.045);
  --shadow-1:0 1px 2px rgba(20,24,33,.07);
  --shadow-2:0 2px 4px rgba(20,24,33,.06), 0 16px 32px -20px rgba(20,24,33,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D1017; --surface:#141922; --surface-2:#1B212C; --surface-3:#232B38;
    --border:#28303D; --border-strong:#3D4757;
    --text:#EEF1F6; --text-2:#9EA8B8; --text-3:#737D8D;
    --accent:#6E9BFF; --accent-ink:#0B1020; --accent-soft:rgba(110,155,255,.13);
    --ok:#3DDC9A; --warn:#F5B843; --crit:#F87171;
    --ok-soft:rgba(61,220,154,.13); --warn-soft:rgba(245,184,67,.13); --crit-soft:rgba(248,113,113,.13);
    --grid:rgba(110,155,255,.05);
    --shadow-1:0 1px 2px rgba(0,0,0,.45);
    --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0D1017; --surface:#141922; --surface-2:#1B212C; --surface-3:#232B38;
  --border:#28303D; --border-strong:#3D4757;
  --text:#EEF1F6; --text-2:#9EA8B8; --text-3:#737D8D;
  --accent:#6E9BFF; --accent-ink:#0B1020; --accent-soft:rgba(110,155,255,.13);
  --ok:#3DDC9A; --warn:#F5B843; --crit:#F87171;
  --ok-soft:rgba(61,220,154,.13); --warn-soft:rgba(245,184,67,.13); --crit-soft:rgba(248,113,113,.13);
  --grid:rgba(110,155,255,.05);
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;
  min-height:100vh;
}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.015em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--text-3)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ─── casca ─── */
.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-in{display:flex;align-items:center;gap:14px;padding:10px 20px}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand-mark{
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:15px;
  letter-spacing:.06em; color:var(--accent-ink); background:var(--accent);
  padding:3px 8px; border-radius:5px;
}
.brand-sub{color:var(--text-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
.btn-ghost{
  border:1px solid var(--border); background:var(--surface); color:var(--text-2);
  padding:5px 11px; border-radius:6px; font-size:12.5px; text-decoration:none;
  white-space:nowrap;
}
.btn-ghost:hover{border-color:var(--border-strong);color:var(--text)}

main{padding:28px 20px 60px}

/* ─── placa de fundacao ─── */
.placa{
  max-width:640px; margin:8vh auto 0;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-2); padding:30px 30px 26px;
}
.placa h1{font-size:26px;margin:8px 0 6px}
.placa p{color:var(--text-2);margin:0 0 16px}
.linha{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--border)}
.linha dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--text-3);min-width:112px}
.linha dd{margin:0;font-size:13px}
dl{margin:18px 0 0}
.pino{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:3px 10px;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.06em;
}