:root{
  --bg:#F2F3F5; --surface:#FFFFFF; --surface-2:#F7F8FA; --line:#E1E4E8; --text:#1B1F24; --muted:#5B6470;
  --brand:#1F5FAD; --brand-ink:#FFFFFF; --ok:#1E7B4F; --ok-bg:#E3F4EA; --warn:#8A5A00; --warn-bg:#FFF2D6;
  --bad:#B42318; --bad-bg:#FDE7E5; --info-bg:#E6EEF9; --radius:10px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#111418; --surface:#1A1E24; --surface-2:#20252C; --line:#2E343C; --text:#E8EAED; --muted:#9AA3AE;
  --brand:#5B9BE6; --brand-ink:#0B1220; --ok:#5CCB91; --ok-bg:#16301F; --warn:#F0C060; --warn-bg:#352A10;
  --bad:#F28B82; --bad-bg:#3A1B19; --info-bg:#1A2A40;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
header.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header.top .in{max-width:1400px;margin:0 auto;padding:10px 16px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
header.top b.logo{font-size:15px;letter-spacing:.2px}
header.top nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
header.top nav a{padding:6px 10px;border-radius:8px;color:var(--text)}
header.top nav a.on{background:var(--info-bg);color:var(--brand);font-weight:600}
header.top .who{color:var(--muted);font-size:13px}
main{max-width:1400px;margin:0 auto;padding:18px 16px 60px}
h1{font-size:20px;margin:0 0 4px} h2{font-size:16px;margin:22px 0 10px}
.muted{color:var(--muted)} .small{font-size:12px} .mono{font-family:var(--mono)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.grid{display:grid;gap:14px} .g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;background:var(--ok-bg);color:var(--ok)}
.flash.erro{background:var(--bad-bg);color:var(--bad)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;color:var(--text);font-size:13px}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.chip .n{opacity:.7;margin-left:4px}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
input[type=number]{width:110px}
button,.btn{font:inherit;border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:8px;padding:7px 12px;cursor:pointer;display:inline-block}
button.primary,.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
button.danger{color:var(--bad)}
button:disabled{opacity:.5;cursor:not-allowed}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:600;background:var(--surface-2);position:sticky;top:0}
td.wrap{white-space:normal;min-width:260px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
img.th{width:40px;height:40px;object-fit:contain;border-radius:6px;background:#fff}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--surface-2);color:var(--muted)}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.info{background:var(--info-bg);color:var(--brand)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px} .kv dt{color:var(--muted)} .kv dd{margin:0}
.stat{display:flex;gap:20px;flex-wrap:wrap} .stat div b{display:block;font-size:18px}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.login{max-width:360px;margin:12vh auto}
.login input{width:100%;margin-bottom:10px}
@media (max-width:700px){ th,td{padding:7px 8px} header.top nav{order:3;width:100%} }