:root { --bg:#f6f7f9; --card:#fff; --texto:#1c2430; --suave:#667085; --borda:#e4e7ec; --cor:#2f6fed; --ok:#12805c; --alerta:#b54708; --ruim:#b42318; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12151b; --card:#1b2029; --texto:#e8ecf3; --suave:#98a2b3; --borda:#2a313d; --cor:#6c9bff; --ok:#4cc99a; --alerta:#f5a35c; --ruim:#ff8b7e; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--texto); }
main, #login { max-width:960px; margin:0 auto; padding:16px; }
#login { min-height:100vh; display:grid; place-items:center; }
#login form { width:100%; max-width:360px; }
header { display:flex; justify-content:space-between; align-items:center; }
h1 { font-size:1.4rem; } h2 { font-size:1.1rem; margin-top:0; }
.card { background:var(--card); border:1px solid var(--borda); border-radius:12px; padding:16px; margin-bottom:16px; }
.resumo { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.resumo .card { margin:0; display:flex; flex-direction:column; gap:4px; }
.resumo span { color:var(--suave); font-size:.85rem; } .resumo strong { font-size:1.6rem; }
label { display:block; margin-bottom:12px; font-size:.9rem; color:var(--suave); }
input { display:block; width:100%; margin-top:4px; padding:10px; font:inherit; color:var(--texto); background:var(--bg); border:1px solid var(--borda); border-radius:8px; }
button, #whats { display:inline-block; padding:10px 16px; font:inherit; color:#fff; background:var(--cor); border:0; border-radius:8px; cursor:pointer; text-decoration:none; }
button.link { background:none; color:var(--cor); padding:4px; }
button.mini { padding:4px 10px; font-size:.8rem; }
.erro { color:var(--ruim); min-height:1.2em; margin:8px 0 0; }
.tabela-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:8px; border-bottom:1px solid var(--borda); white-space:nowrap; }
th { color:var(--suave); font-weight:500; font-size:.85rem; }
.st-ativa { color:var(--ok); } .st-pendente, .st-pausada { color:var(--alerta); } .st-cancelada { color:var(--ruim); }
#resultado { margin-top:16px; display:grid; gap:8px; } #resultado[hidden], [hidden] { display:none !important; }