:root { --bg:#fbfaf7; --fg:#1f1d1a; --muted:#6b665e; --line:#e4e0d8; --card:#fff; --warn:#8a5a00; --warnbg:#fff4dc; --conf:#9b1c1c; --confbg:#fde8e8; --acc:#2f5d8a; --pos:#1d6b3a; }
@media (prefers-color-scheme: dark) { :root { --bg:#17171a; --fg:#ece9e3; --muted:#a19c93; --line:#2e2e33; --card:#1f1f23; --warn:#f2c46b; --warnbg:#3a2f17; --conf:#f8a5a5; --confbg:#3d1d1d; --acc:#8fb6dc; --pos:#7fd19b; } }
* { box-sizing:border-box }
html, body { margin:0; -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui, -apple-system, sans-serif; }
body { padding:env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 16px); }
h1 { font-size:22px; margin:12px 0 2px } h2 { font-size:15px; margin:20px 0 8px; color:var(--muted); font-weight:600 }
.sub { color:var(--muted); margin:0; font-size:13px }
.aviso { background:var(--warnbg); color:var(--warn); padding:10px 12px; border-radius:8px; font-size:14px }
.erro { color:var(--conf) }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin:8px 0 }
.grande-num { font-size:28px; font-weight:600; font-variant-numeric:tabular-nums }
.linha { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums }
.linha:last-child { border-bottom:0 } .linha span:first-child { color:var(--muted) }
.barra { height:6px; background:var(--line); border-radius:3px; margin:2px 0 6px } .barra i { display:block; height:100%; background:var(--acc); border-radius:3px }
.kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.kpis .card { margin:0 } .kpis span { display:block; color:var(--muted); font-size:12px } .kpis b { font-size:18px; font-variant-numeric:tabular-nums }
ul.avisos { margin:0; padding-left:18px; font-size:14px } ul.avisos li { margin:4px 0 }
button { font:inherit; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg); padding:10px 14px }
button.grande { width:100%; margin:16px 0 8px; background:var(--acc); color:#fff; border:0; padding:14px }
button.discreto { border:0; background:none; color:var(--muted); font-size:13px }
footer { display:flex; justify-content:space-between; align-items:center; margin-top:8px }
textarea { width:100%; font:16px ui-monospace, monospace; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg) }
#pareamento button { margin-top:8px; width:100% }
#painel { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; padding-top:env(safe-area-inset-top) }
#painel[hidden] { display:none }
#painel button { margin:6px 8px; align-self:flex-start; border:0; background:none; color:var(--acc); font-size:17px }
#quadro { flex:1; width:100%; border:0 }