:root {
  --fundo: #16171a;
  --cartao: #202227;
  --linha: #34363d;
  --texto: #ececee;
  --apagado: #9a9ca4;
  --vermelho: #e5383b;
  --vermelho-escuro: #b72a2d;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--fundo); color: var(--texto); }
body { font-family: 'Syne', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.app { max-width: 440px; margin: 0 auto; min-height: 100%; position: relative; }
.tela { display: none; min-height: 100dvh; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); flex-direction: column; }
.tela.ativa { display: flex; }
.topo-marca { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.marca { font-size: 64px; font-weight: 800; color: var(--vermelho); letter-spacing: 2px; }
.sub { color: var(--apagado); font-size: 18px; margin-top: 8px; }
h2 { font-size: 28px; font-weight: 700; margin: 24px 0 8px; }
.texto { color: var(--apagado); line-height: 1.5; margin-bottom: 24px; }
.texto strong { color: var(--texto); word-break: break-all; }
form { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 14px; color: var(--apagado); margin-top: 8px; }
input:not([type=checkbox]), select {
  font: inherit; font-size: 18px; color: var(--texto); background: var(--cartao);
  border: 1px solid var(--linha); border-radius: 12px; padding: 14px; width: 100%;
}
input:focus { outline: 2px solid var(--vermelho); outline-offset: 1px; border-color: transparent; }
input[type=date] { color-scheme: dark; }
.codigo { font-size: 32px !important; letter-spacing: 12px; text-align: center; }
.check { display: flex; gap: 12px; align-items: flex-start; color: var(--texto); line-height: 1.4; margin: 16px 0 4px; }
.check input { width: 22px; height: 22px; accent-color: var(--vermelho); flex: none; margin-top: 1px; }
.check a { color: var(--vermelho); }
.btn {
  font: inherit; font-weight: 700; font-size: 17px; color: #fff; background: var(--vermelho);
  border: 0; border-radius: 14px; padding: 16px; width: 100%; margin-top: 16px; cursor: pointer;
}
.btn:active { background: var(--vermelho-escuro); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn.secundario { background: var(--cartao); border: 1px solid var(--linha); }
.voltar, .link { font: inherit; background: none; border: 0; color: var(--apagado); cursor: pointer; padding: 8px 0; text-align: left; }
.link { color: var(--vermelho); margin-top: 16px; text-align: center; }
.link[disabled] { color: var(--apagado); }
.erro { color: var(--vermelho); min-height: 20px; font-size: 14px; }
.rodape { margin-top: auto; }
.mini { color: var(--apagado); font-size: 13px; text-align: center; margin-top: 12px; }
#turnstile:empty { display: none; }
.titulo-sec { font-size: 16px; font-weight: 700; margin: 8px 0; }
.aparelhos { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aparelhos li { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; }
.aparelhos .ap { font-weight: 600; }
.aparelhos .det { color: var(--apagado); font-size: 13px; margin-top: 2px; }
.aparelhos .atual { color: var(--vermelho); font-size: 12px; font-weight: 700; margin-left: 6px; }
.mini.esq { text-align: left; }
.btn.perigo { background: transparent; border: 1px solid var(--vermelho); color: var(--vermelho); }
select { appearance: none; }
.doc-item { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.doc-item .nome { font-weight: 600; line-height: 1.35; }
.doc-item .st { font-size: 13px; color: var(--apagado); margin: 4px 0 8px; }
.doc-item .st.ok { color: #3fb27f; }
.doc-item input[type=file] { color: var(--apagado); font: inherit; font-size: 13px; }
.resumo { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 14px; line-height: 1.6; }
.resumo b { color: var(--apagado); font-weight: 600; }