:root {
  --fundo: #f6f5f2;
  --cartao: #ffffff;
  --texto: #1d1d1b;
  --suave: #6b6a66;
  --linha: #e4e2dc;
  --acento: #2f6f5e;
  --alerta: #b4532a;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #141413;
    --cartao: #1e1e1c;
    --texto: #ecebe6;
    --suave: #9c9a93;
    --linha: #33322f;
    --acento: #6fbfa7;
    --alerta: #e08a5f;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fundo);
  color: var(--texto);
}
header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--linha);
}
header .sub { color: var(--suave); }
.chip {
  margin-left: auto; font-size: 12px; padding: 3px 10px;
  border: 1px solid var(--linha); border-radius: 99px; color: var(--suave);
}
.chip.ok { color: var(--acento); border-color: var(--acento); }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
.cartao {
  background: var(--cartao); border: 1px solid var(--linha);
  border-radius: 14px; padding: 22px;
}
#entrada, #questionario { max-width: 620px; margin: 24px auto; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 0 0 14px; }
h3 { font-size: 14px; margin: 18px 0 8px; color: var(--suave); }
label { display: block; margin: 14px 0; }
label.check { display: flex; gap: 8px; align-items: flex-start; }
input:not([type]), input[type=text], textarea {
  display: block; width: 100%; margin-top: 6px; padding: 9px 11px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: transparent; color: inherit; font: inherit;
}
button {
  font: inherit; padding: 9px 18px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--acento); background: var(--acento); color: var(--cartao);
}
button.secundario { background: transparent; color: var(--texto); border-color: var(--linha); }

#sala:not([hidden]) { display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
@media (max-width: 800px) { #sala:not([hidden]) { grid-template-columns: 1fr; } }
.palco { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.orbe {
  width: 140px; height: 140px; border-radius: 50%; margin-top: 10px;
  background: radial-gradient(circle at 35% 35%, var(--acento), transparent 70%);
  opacity: .35; transition: transform .08s linear, opacity .2s;
}
.estado { color: var(--suave); margin: 0; }
.nivel { width: 100%; font-size: 12px; color: var(--suave); }
.nivel div { height: 6px; background: var(--linha); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.nivel i { display: block; height: 100%; width: 0; background: var(--acento); }

.metricas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 800px) { .metricas { grid-template-columns: repeat(2, 1fr); } }
.metricas div { border: 1px solid var(--linha); border-radius: 10px; padding: 10px; }
.metricas span, .metricas small { display: block; font-size: 12px; color: var(--suave); }
.metricas b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; margin: 2px 0; }
.contadores { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 6px; font-size: 13px; color: var(--suave); }
.contadores b { color: var(--texto); margin-left: 4px; font-variant-numeric: tabular-nums; }
.barras { list-style: none; padding: 0; margin: 8px 0 0; display: flex; align-items: flex-end; gap: 3px; height: 70px; }
.barras li { flex: 0 0 10px; background: var(--acento); border-radius: 2px 2px 0 0; min-height: 2px; }
.barras li.lenta { background: var(--alerta); }
.transcricao { max-height: 340px; overflow-y: auto; font-size: 14px; }
.transcricao p { margin: 0 0 8px; }
.transcricao p b { font-weight: 600; margin-right: 6px; }
.transcricao p.agente b { color: var(--acento); }

fieldset { border: 0; padding: 0; margin: 14px 0; }
legend { margin-bottom: 6px; }
fieldset label { display: inline-flex; gap: 4px; margin: 0 14px 0 0; }