:root {
  --fundo: #faf6ef; --papel: #ffffff; --tinta: #1d2430; --suave: #5d6675; --linha: #e2dbcd;
  --mar: #1f3a5f; --barro: #b5532f; --barro-claro: #f6e3d8; --oliva: #5c7a3a; --oliva-claro: #e6eedb;
  --alerta: #a3341f; --sombra: 0 1px 2px rgba(30, 30, 40, .06), 0 4px 14px rgba(30, 30, 40, .05);
  --raio: 14px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14171d; --papel: #1d222b; --tinta: #ece7dd; --suave: #a2a9b6; --linha: #323946;
    --mar: #8fb4e3; --barro: #e08a5f; --barro-claro: #3a2a22; --oliva: #a3c77a; --oliva-claro: #26301e;
    --alerta: #f08a74; --sombra: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 64px; }
main.largo { max-width: 1100px; }
h1, h2, h3 { font-family: "Iowan Old Style", Palatino, Georgia, serif; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.08rem; }
p { margin: 0 0 10px; }
a { color: var(--mar); }
small, .suave { color: var(--suave); }
.carregando { color: var(--suave); text-align: center; padding: 40px 0; }

.topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.topo .marca { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--mar); text-decoration: none; }
.topo .esp { flex: 1; }
.heroi { text-align: center; padding: 28px 0 8px; }
.heroi h1 { font-size: 2.6rem; color: var(--mar); margin-bottom: 2px; }
.heroi .grego { font-family: Georgia, serif; font-style: italic; color: var(--barro); font-size: 1.1rem; }

.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin: 0 0 14px; box-shadow: var(--sombra); }
.cartao > :last-child { margin-bottom: 0; }
.cartao.foco { border-color: var(--barro); }
.cab { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 6px; }
.cab h3 { flex: 1 1 200px; margin: 0; }
.selo { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--oliva-claro); color: var(--oliva); white-space: nowrap; }
.selo.tipo { background: transparent; border: 1px solid var(--linha); color: var(--suave); }
.selo.aberta { background: var(--barro-claro); color: var(--barro); }
.selo.rascunho { background: transparent; border: 1px dashed var(--linha); color: var(--suave); }
.enunciado { white-space: pre-wrap; }

button, .botao { font: inherit; cursor: pointer; border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); border-radius: 10px; padding: 9px 14px; min-height: 42px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button:hover { border-color: var(--suave); }
button.primario { background: var(--mar); border-color: var(--mar); color: var(--fundo); font-weight: 600; }
button.acento { background: var(--barro); border-color: var(--barro); color: var(--fundo); font-weight: 600; }
button.perigo { color: var(--alerta); }
button.pequeno { min-height: 32px; padding: 4px 10px; font-size: .88rem; }
button:disabled { opacity: .5; cursor: default; }
.linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 0; }
.linha.topo0 { margin-top: 0; }
input, textarea, select { font: inherit; color: var(--tinta); background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 9px 11px; width: 100%; min-height: 42px; }
textarea { min-height: 84px; resize: vertical; }
input[type=range] { padding: 0; accent-color: var(--barro); }
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; accent-color: var(--mar); }
label { display: block; font-weight: 600; font-size: .92rem; margin: 10px 0 4px; }
label.marca-linha { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.erro { color: var(--alerta); font-weight: 600; }
.ok { color: var(--oliva); font-weight: 600; }
.aviso { background: var(--oliva-claro); border-radius: 10px; padding: 10px 12px; font-size: .92rem; }

.opcoes { display: grid; gap: 8px; margin: 8px 0; }
.opcao { justify-content: flex-start; text-align: left; width: 100%; }
.opcao.marcada { border-color: var(--mar); box-shadow: inset 0 0 0 1px var(--mar); }
.opcao .ordem { min-width: 34px; height: 26px; border-radius: 8px; background: var(--fundo); border: 1px solid var(--linha); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex: none; }
.opcao.marcada .ordem { background: var(--mar); color: var(--fundo); border-color: var(--mar); }
.mencoes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 4px 0 12px; }
.mencoes button { padding: 4px 2px; font-size: .72rem; min-height: 40px; line-height: 1.1; }
.mencoes button.marcada { background: var(--mar); color: var(--fundo); border-color: var(--mar); }
.passos { display: flex; align-items: center; gap: 8px; }
.passos .txt { flex: 1; }
.passos button { width: 42px; padding: 0; font-size: 1.2rem; }
.passos output { min-width: 30px; text-align: center; font-weight: 700; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.afirmacao { font-family: Georgia, serif; font-size: 1.2rem; padding: 18px 14px; background: var(--fundo); border-radius: 12px; margin: 8px 0; text-align: center; }
.valor-faixa { display: flex; gap: 10px; align-items: center; }
.valor-faixa output { min-width: 52px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.barras { display: grid; gap: 8px; margin: 8px 0; }
.barra .rot { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem; }
.barra .rot b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra .trilho { height: 10px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 99px; overflow: hidden; display: flex; }
.barra .trilho i { display: block; height: 100%; background: var(--mar); }
.barra.primeira .trilho i { background: var(--barro); }
.barra .trilho i.c { background: var(--oliva); } .barra .trilho i.d { background: var(--barro); } .barra .trilho i.p { background: var(--linha); }
.dist i:nth-child(1) { background: #a3341f; } .dist i:nth-child(2) { background: #d0703c; } .dist i:nth-child(3) { background: #d9b24c; }
.dist i:nth-child(4) { background: #9db85a; } .dist i:nth-child(5) { background: #5c9a4a; } .dist i:nth-child(6) { background: #2f7a4f; }
.numeros { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0; }
.numeros div { min-width: 90px; }
.numeros b { display: block; font-size: 1.6rem; font-family: Georgia, serif; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numeros span { font-size: .82rem; color: var(--suave); }
.histo { display: flex; align-items: flex-end; gap: 3px; height: 70px; margin: 8px 0 2px; }
.histo i { flex: 1; background: var(--mar); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .8; }
details { margin-top: 8px; } summary { cursor: pointer; color: var(--suave); font-size: .9rem; }
table { border-collapse: collapse; font-size: .85rem; margin-top: 6px; }
td, th { border: 1px solid var(--linha); padding: 3px 7px; text-align: center; }
.grupo { border-left: 3px solid var(--barro); padding: 2px 0 2px 12px; margin: 10px 0; }
.grupo ul, ul.simples { margin: 4px 0; padding-left: 18px; }
.bolas { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.bolas span { width: 46px; height: 46px; border-radius: 50%; background: var(--mar); color: var(--fundo); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.bolas.ordem span { border-radius: 10px; width: auto; padding: 0 12px; }
.bolas span.eu { background: var(--barro); outline: 3px solid var(--barro-claro); }
.item-adm { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linha); }
.item-adm .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-adm select { width: auto; max-width: 46%; min-height: 34px; padding: 4px 8px; }
.qr svg { width: 100%; height: auto; display: block; background: #fff; border-radius: 10px; }
.crono { font-family: Georgia, serif; font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; color: var(--barro); }
.crono.fim { color: var(--alerta); }
.faixa-crono { position: sticky; top: 0; z-index: 5; background: var(--papel); border: 1px solid var(--barro); border-radius: var(--raio); padding: 8px 14px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .duas { grid-template-columns: 1fr; } }

dialog { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); color: var(--tinta); width: min(640px, 94vw); padding: 18px; }
dialog::backdrop { background: rgba(10, 12, 16, .55); }
dialog textarea { min-height: 220px; font: 13px/1.4 ui-monospace, Menlo, monospace; }

body.modo-telao main { max-width: none; padding: 3vh 3vw; }
.telao { display: grid; grid-template-columns: minmax(220px, 24vw) 1fr; gap: 3vw; align-items: start; }
.telao .lado { text-align: center; position: sticky; top: 3vh; }
.telao .lado .cod { font: 700 clamp(1.6rem, 3.4vw, 3.2rem) ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--mar); }
.telao .palco { font-size: clamp(1.05rem, 1.7vw, 1.7rem); }
.telao .palco h1 { font-size: clamp(1.8rem, 3.6vw, 3.6rem); }
.telao .palco h3 { font-size: 1.3em; }
.telao .palco .numeros b { font-size: 2.2em; }
.telao .crono { font-size: clamp(3rem, 9vw, 9rem); line-height: 1; }
.telao .barra .trilho { height: .9em; }
.telao .contagem { font: 700 clamp(3rem, 8vw, 8rem) Georgia, serif; color: var(--barro); line-height: 1; }
@media (max-width: 760px) { .telao { grid-template-columns: 1fr; } .telao .lado { position: static; max-width: 260px; margin: 0 auto; } }

@media print {
  body { background: #fff; color: #000; font-size: 11.5pt; }
  main { max-width: none; padding: 0; }
  .nao-imprime, .topo { display: none !important; }
  .cartao { box-shadow: none; border: 0; border-top: 1px solid #999; border-radius: 0; padding: 10pt 0; break-inside: avoid; }
  details > summary { display: none; } details:not([open]) > * { display: block; }
}