* { box-sizing: border-box; }
:root {
  --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fundo: #F8FAFD; --cartao: #FFFFFF; --sup: #F0F4F9;
  --tinta: #1F1F1F; --tinta2: #444746; --tinta3: #747775; --linha: #DADCE0;
  --azul: #0B57D0; --sobre-azul: #FFFFFF; --azul-claro: #D3E3FD; --sobre-azul-claro: #041E49;
  --tonal: #D3E3FD; --sobre-tonal: #041E49;
  --verde: #146C2E; --verde-claro: #C4EED0;
  --laranja: #7A4100; --laranja-claro: #FFDDB3;
  --vermelho: #B3261E; --sobre-vermelho: #FFFFFF; --vermelho-claro: #F9DEDC;
  --sombra: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #131314; --cartao: #1E1F20; --sup: #282A2C;
    --tinta: #E3E3E3; --tinta2: #C4C7C5; --tinta3: #8E918F; --linha: #444746;
    --azul: #A8C7FA; --sobre-azul: #062E6F; --azul-claro: #0842A0; --sobre-azul-claro: #D3E3FD;
    --tonal: #333537; --sobre-tonal: #D3E3FD;   /* no escuro, o secundário não pode brilhar mais que o Confirmar */
    --verde: #6DD58C; --verde-claro: #0F5223;
    --laranja: #FFB95C; --laranja-claro: #5C3300;
    --vermelho: #F2B8B5; --sobre-vermelho: #601410; --vermelho-claro: #8C1D18;
    --sombra: none;
  }
}
html, body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--fonte); -webkit-text-size-adjust: 100%; }
main { max-width: 460px; margin: 0 auto; padding: 20px 16px 32px; }
.topo { display: flex; align-items: center; gap: 12px; margin: 4px 4px 20px; }
.marca { width: 40px; height: 40px; border-radius: 50%; background: var(--azul-claro); color: var(--sobre-azul-claro); display: grid; place-items: center; flex: none; }
.marca svg { width: 22px; height: 22px; fill: currentColor; }
.topo b { display: block; font-size: 16px; line-height: 20px; font-weight: 600; }
.topo span { display: block; font-size: 13px; line-height: 18px; color: var(--tinta2); }
.cartao { background: var(--cartao); border-radius: 28px; padding: 24px 20px; box-shadow: var(--sombra); }
h1 { font-size: 26px; line-height: 32px; font-weight: 600; margin: 0 0 16px; letter-spacing: -.2px; }
h2 { font-size: 20px; line-height: 26px; font-weight: 600; margin: 8px 0 0; }
.quando { display: flex; gap: 16px; align-items: center; background: var(--sup); border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; }
.folha { flex: none; width: 60px; border-radius: 12px; background: var(--cartao); text-align: center; padding: 6px 0 8px; box-shadow: inset 0 0 0 1px var(--linha); }
.folha span { display: block; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
.folha .fs { color: var(--azul); }
.folha .fd { font-size: 26px; line-height: 30px; font-weight: 500; letter-spacing: 0; }
.folha .fm { color: var(--tinta2); font-weight: 500; }
.qdata, .qhora { font-size: 17px; line-height: 22px; }
.qdata { font-weight: 600; }
.qtipo { font-size: 13px; line-height: 18px; color: var(--tinta2); margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 8px; font-size: 14px; line-height: 18px; font-weight: 600; }
.chip svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.neutro { background: var(--sup); color: var(--tinta2); }
.ok { background: var(--verde-claro); color: var(--verde); }
.aviso { background: var(--laranja-claro); color: var(--laranja); }
.perigo { background: var(--vermelho-claro); color: var(--vermelho); }
.texto { font-size: 16px; line-height: 24px; color: var(--tinta2); margin: 12px 0 0; }
.pergunta { font-size: 18px; line-height: 24px; font-weight: 600; margin: 4px 0 0; }
.botoes { display: grid; gap: 10px; margin-top: 20px; }
.btn { appearance: none; -webkit-appearance: none; border: 0; border-radius: 24px; min-height: 48px; padding: 0 24px; width: 100%;
       font: 600 16px/20px var(--fonte); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
       -webkit-tap-highlight-color: transparent; transition: filter .15s, box-shadow .15s; }
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn:disabled { opacity: .62; cursor: default; }
.btn:not(:disabled):active { filter: brightness(.9); }
.btn:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.btn-cheio { background: var(--azul); color: var(--sobre-azul); }
.btn-cheio:not(:disabled):hover { box-shadow: var(--sombra); }
.btn-tonal { background: var(--tonal); color: var(--sobre-tonal); }
.btn-texto { background: transparent; color: var(--azul); }
.btn-texto.vermelho { color: var(--vermelho); }
.btn-perigo { background: var(--vermelho); color: var(--sobre-vermelho); }
label { display: block; font-size: 14px; line-height: 20px; color: var(--tinta2); margin: 16px 0 8px; }
textarea { width: 100%; min-height: 96px; border-radius: 12px; border: 1px solid var(--tinta3); background: transparent; color: var(--tinta);
           padding: 12px 14px; font: 16px/22px var(--fonte); resize: vertical; }
textarea:focus { outline: none; border: 2px solid var(--azul); padding: 11px 13px; }
.resultado { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 16px; }
.resultado svg { width: 28px; height: 28px; fill: currentColor; flex: none; }
.resultado b { display: block; font-size: 18px; line-height: 24px; font-weight: 600; }
.resultado span { display: block; font-size: 15px; line-height: 22px; color: var(--tinta); margin-top: 2px; }
.vazio { text-align: center; padding: 8px 4px; }
.vazio svg { width: 40px; height: 40px; fill: var(--tinta3); }
.vazio h1 { font-size: 22px; line-height: 28px; margin: 8px 0 0; }
.erro { color: var(--vermelho); font-size: 14px; line-height: 20px; margin: 12px 0 0; }
.rodape { text-align: center; font-size: 13px; line-height: 18px; color: var(--tinta3); margin: 20px 16px 0; }
.girando { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .8s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.esqueleto { background: var(--sup); border-radius: 12px; animation: pulsa 1.4s ease-in-out infinite; }
.esqueleto.titulo { height: 30px; width: 62%; margin-bottom: 18px; }
.esqueleto.bloco { height: 92px; margin-bottom: 20px; border-radius: 16px; }
.esqueleto.botao { height: 48px; border-radius: 24px; margin-top: 10px; }
@keyframes pulsa { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 2.4s; } .esqueleto { animation: none; } }
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.opcao { appearance: none; -webkit-appearance: none; border: 1px solid var(--linha); background: transparent; color: var(--tinta);
         border-radius: 16px; min-height: 56px; padding: 8px 12px; font: 500 15px/20px var(--fonte); display: flex; align-items: center;
         justify-content: center; gap: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opcao svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.opcao.marcada { background: var(--azul-claro); color: var(--sobre-azul-claro); border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.opcao:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.opcao:disabled { opacity: .62; cursor: default; }
.escolha + .pergunta { margin-top: 22px; }