:root {
  color-scheme: light;
  --fundo: #f4f3f0; --sup: #fcfcfb; --sup2: #f1f0ec; --linha: #e2e0d9; --linha2: #cfcdc4;
  --tx: #0b0b0b; --tx2: #52514e; --tx3: #6e6d68; --acento: #c8410f; --acento-sup: #fdeee7;
  --bom: #0a7d0a; --bom-sup: #e6f5e6; --aviso: #8a5a00; --aviso-sup: #fdf1d3; --critico: #c02f2f; --critico-sup: #fae3e3; --neutro-sup: #ecebe6;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #121211; --sup: #1a1a19; --sup2: #24241f; --linha: #30302c; --linha2: #45453f;
    --tx: #f0efec; --tx2: #c3c2b7; --tx3: #a09f96; --acento: #f08a5d; --acento-sup: #3a2318;
    --bom: #5cc95c; --bom-sup: #16301a; --aviso: #f0c35a; --aviso-sup: #3a2f12; --critico: #f07a7a; --critico-sup: #3f1d1d; --neutro-sup: #2b2b27;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--tx); font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; }
h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; } h2 { font-size: 17px; margin: 0 0 10px; } h3 { font-size: 15px; margin: 0 0 4px; }
p { margin: 0 0 8px; } a { color: var(--acento); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mudo { color: var(--tx3); } .pq { font-size: 14px; } .oculto { display: none !important; }

.pagina { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }
.pagina.larga { max-width: 960px; }
.cabeca { display: flex; align-items: center; gap: 12px; padding: 8px 0 18px; }
.cabeca img { height: 32px; width: auto; }
.cabeca .titulo { font-weight: 700; font-size: 18px; } .cabeca .titulo span { color: var(--acento); }
.cabeca .dir { margin-left: auto; font-size: 14px; display: flex; gap: 10px; align-items: center; }

.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.busca { display: flex; gap: 8px; margin-top: 10px; }
.busca input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--linha2); border-radius: 10px; background: var(--sup); font-size: 18px; }
.btn { border: 1px solid var(--linha2); background: var(--sup); border-radius: 10px; padding: 10px 16px; font-weight: 600; }
.btn.pri { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn.mini { padding: 5px 10px; font-size: 14px; border-radius: 8px; }
.btn:disabled { opacity: .6; cursor: default; }

.erro { background: var(--critico-sup); color: var(--critico); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.faixa { border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.faixa.bom { background: var(--bom-sup); } .faixa.aviso { background: var(--aviso-sup); } .faixa.neutro { background: var(--neutro-sup); }
.faixa strong { display: block; }

.saida { border-top: 1px solid var(--linha); padding: 14px 0 4px; }
.saida:first-of-type { border-top: 0; padding-top: 4px; }
.saida .quando { font-size: 14px; color: var(--tx3); }
.selo { display: inline-block; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 2px 10px; margin: 4px 0 8px; }
.selo.critico { background: var(--critico-sup); color: var(--critico); } .selo.neutro { background: var(--neutro-sup); color: var(--tx2); }

.metricas { display: grid; gap: 8px; }
.metrica { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.metrica.abaixo { border-color: var(--critico); background: var(--critico-sup); }
.metrica .nome { font-weight: 600; }
.metrica .status { font-weight: 700; text-align: right; }
.metrica.abaixo .status { color: var(--critico); } .metrica.ok .status { color: var(--bom); }
.metrica .det { grid-column: 1 / -1; font-size: 14px; color: var(--tx2); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.tile .v { font-size: 22px; font-weight: 700; } .tile .r { font-size: 13px; color: var(--tx3); }

.dica { border-left: 3px solid var(--acento); padding: 4px 0 4px 12px; margin: 12px 0; }
.dica p { white-space: pre-line; color: var(--tx2); margin: 0; }
.rodape { font-size: 13px; color: var(--tx3); text-align: center; margin-top: 18px; }

/* Área de dicas */
.form { display: grid; gap: 10px; }
.form label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.form input, .form select, .form textarea { padding: 9px 11px; border: 1px solid var(--linha2); border-radius: 8px; background: var(--sup); font-weight: 400; }
.form textarea { min-height: 120px; resize: vertical; }
.form .linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.form .check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.lista-dicas .item { display: flex; gap: 12px; align-items: start; border-top: 1px solid var(--linha); padding: 12px 0; }
.lista-dicas .item:first-child { border-top: 0; }
.lista-dicas .item > div { flex: 1; min-width: 0; }
.lista-dicas .item p { white-space: pre-line; color: var(--tx2); font-size: 14px; margin: 2px 0 0; }
.grupo { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--tx3); margin: 18px 0 2px; }