:root { --bg:#f6f7f9; --fg:#1b1f23; --muted:#5f6b7a; --card:#fff; --line:#e3e6ea; --ok:#1a7f37; --bad:#b42318; --warn:#b26a00; --off:#6b7280; --link:#0b5cad; }
@media (prefers-color-scheme: dark) { :root { --bg:#111418; --fg:#e6e8eb; --muted:#9aa4b2; --card:#1a1f26; --line:#2a313b; --link:#6cb4ff; } }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; gap:24px; align-items:center; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); }
header .marca { font-weight:700; color:var(--fg); text-decoration:none; }
header nav a { margin-right:14px; color:var(--link); text-decoration:none; }
header .agora { margin-left:auto; color:var(--muted); font-size:12px; }
main { max-width:1280px; margin:0 auto; padding:16px 20px 40px; }
footer { color:var(--muted); font-size:12px; text-align:center; padding:12px; }
h1 { font-size:22px; margin:8px 0 14px; } h1 small { color:var(--muted); font-size:14px; font-weight:400; }
h2 { font-size:16px; margin:22px 0 8px; } h2 small { font-weight:400; }
a { color:var(--link); }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-bottom:8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.card .n { font-size:24px; font-weight:700; } .card .n .de { color:var(--muted); font-size:16px; font-weight:400; } .card .n small { font-size:14px; font-weight:400; color:var(--muted); }
.card .l { color:var(--muted); font-size:12px; margin-top:2px; }
.card.alerta { border-color:var(--warn); }
table.lista { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table.lista th, table.lista td { padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.lista th { font-size:12px; color:var(--muted); font-weight:600; background:transparent; }
table.lista tr:last-child td { border-bottom:0; }
td.num { text-align:right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size:12.5px; }
.pos { color:var(--ok); } .neg { color:var(--bad); }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; color:#fff; }
.pill.ok { background:var(--ok); } .pill.bad { background:var(--bad); } .pill.warn { background:var(--warn); } .pill.off { background:var(--off); }
.status { max-width:360px; color:var(--muted); }
.vazio { color:var(--muted); text-align:center; padding:12px; }
.ajuda { color:var(--muted); }
.terminal { color:var(--muted); font-size:13px; }
.cartao { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:10px 0; }
.cartao.login { max-width:360px; margin:60px auto; }
.cartao.login label { display:block; margin:10px 0; } .cartao.login input { width:100%; padding:8px; }
.cartao.pedido.suspeito { border-color:var(--bad); }
.pedido .cab { margin-bottom:8px; }
form.inline { display:inline-flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:4px 8px 4px 0; }
form.inline label { font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:2px; }
form.admin { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; }
form.admin label { font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:2px; }
input, select, button { font: inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
button { cursor:pointer; background:var(--link); color:#fff; border-color:var(--link); }
button.perigo { background:var(--bad); border-color:var(--bad); }
.erro { color:var(--bad); }
.duas { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width: 900px) { .duas { grid-template-columns:1fr; } main { padding:12px; } header { flex-wrap:wrap; } }