:root {
  --fundo: #f6f7f9;
  --caixa: #ffffff;
  --texto: #1d2330;
  --fraco: #5d6675;
  --borda: #dde1e7;
  --ok: #1f7a3d;
  --atencao: #9a6100;
  --perigo: #b42318;
  --destaque: #2457c5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14171c;
    --caixa: #1c2027;
    --texto: #e6e9ee;
    --fraco: #9aa3b1;
    --borda: #2d333d;
    --ok: #4cc27a;
    --atencao: #e5a93a;
    --perigo: #f0705f;
    --destaque: #7aa2ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 32px;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
header h1 { font-size: 20px; margin: 0; flex: 1; }
#quem { color: var(--fraco); }

.caixa, #entrar {
  background: var(--caixa);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
}
h2 { font-size: 16px; margin: 0 0 8px; }

.faixa { padding: 14px 16px; border-radius: 8px; font-size: 18px; font-weight: 600; }
.faixa.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.faixa.atencao { background: color-mix(in srgb, var(--atencao) 18%, transparent); color: var(--atencao); }
.faixa.perigo { background: color-mix(in srgb, var(--perigo) 18%, transparent); color: var(--perigo); }

.rolagem { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
th { color: var(--fraco); font-weight: 500; }
td.perigo { color: var(--perigo); font-weight: 600; }
td.atencao { color: var(--atencao); font-weight: 600; }

input, select, button {
  font: inherit;
  color: inherit;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 6px 8px;
}
button { cursor: pointer; background: var(--destaque); color: #fff; border-color: var(--destaque); }
button.leve { background: transparent; color: var(--destaque); }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; align-items: end; }
label { display: flex; flex-direction: column; gap: 4px; color: var(--fraco); }

.erro { color: var(--perigo); }
.eventos { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; }
.eventos li { padding: 4px 0; border-bottom: 1px solid var(--borda); color: var(--fraco); }
.eventos b { color: var(--texto); font-weight: 500; }
code { font-size: 13px; }