/* Casca do Hacks do Ra (entrar, convite, escolher desenho): coluna estreita alinhada à esquerda,
   uma ação por tela. Os desenhos A, B e C têm a própria identidade; esta é só a porta. */
:root {
  --papel: #f4f6f9; --superficie: #ffffff; --tinta: #0f1420; --apagado: #5a6375; --linha: #dde2ea;
  --acento: #2d4bff; --acento-tinta: #ffffff; --erro: #b42318; --ok: #0f7a4b;
  --f-corpo: "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0b0f17; --superficie: #131a26; --tinta: #e9edf4; --apagado: #98a2b5; --linha: #233046;
    --acento: #7d93ff; --acento-tinta: #0b0f17; --erro: #ff8a7a; --ok: #5fd39a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0b0f17; --superficie: #131a26; --tinta: #e9edf4; --apagado: #98a2b5; --linha: #233046;
  --acento: #7d93ff; --acento-tinta: #0b0f17; --erro: #ff8a7a; --ok: #5fd39a; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 16px/1.5 var(--f-corpo);
  padding-inline: 20px; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
main { max-width: 440px; margin: 0 auto; padding-block: clamp(40px, 12vh, 120px) 40px; display: grid; gap: 28px; }
.marca { display: flex; align-items: center; gap: 10px; font: 600 15px/1 var(--f-corpo); letter-spacing: -0.01em; }
.marca img { width: 32px; height: 32px; border-radius: 8px; }
.selo { font: 500 11px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); }
h1 { font: 600 clamp(28px, 6vw, 36px)/1.1 var(--f-corpo); letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
p { margin: 0; color: var(--apagado); max-width: 60ch; }
.pilha { display: grid; gap: 12px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 14px; background: var(--acento); color: var(--acento-tinta); font: 600 16px/1 var(--f-corpo);
  cursor: pointer; text-decoration: none; transition: transform .12s ease, filter .12s ease; }
.botao:hover { filter: brightness(1.06); }
.botao:active { transform: scale(0.98); }
.botao[disabled] { opacity: .55; cursor: progress; }
.botao.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha); }
.campo { display: grid; gap: 6px; }
.campo label { font: 500 13px/1 var(--f-corpo); color: var(--apagado); }
.campo input { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linha); background: var(--superficie);
  color: var(--tinta); font: 16px var(--f-corpo); }
.status { min-height: 1.5em; font-size: 14px; color: var(--apagado); }
.status.erro { color: var(--erro); }
.status.ok { color: var(--ok); }
.nota { font-size: 14px; border-top: 1px solid var(--linha); padding-top: 18px; }
.ficha { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 16px 18px; display: grid; gap: 4px; }
.ficha strong { font-weight: 600; }
.ficha .mono { font: 13px var(--f-mono); color: var(--apagado); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .botao { transition: none; } }