:root {
  color-scheme: light dark;
  --fundo: #f4f5f7; --superficie: #ffffff; --texto: #1c2024; --discreto: #5f6b76;
  --borda: #d7dce1; --acento: #0b6bcb; --erro: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14171a; --superficie: #1e2226; --texto: #e7eaed; --discreto: #9aa5af;
    --borda: #343a40; --acento: #5aa9f0; --erro: #f2867f;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.5 system-ui, sans-serif; }
.topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
        background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topo form { display: flex; gap: 12px; align-items: center; margin: 0; }
main { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 24px; }
.entrar { max-width: 360px; margin: 48px auto; display: flex; flex-direction: column; gap: 8px; }
h1 { margin: 0 0 8px; font-size: 1.4rem; }
label { font-weight: 600; margin-top: 8px; }
input { padding: 10px; font: inherit; color: inherit; background: var(--fundo);
        border: 1px solid var(--borda); border-radius: 6px; }
button { margin-top: 12px; padding: 10px; font: inherit; color: #fff; background: var(--acento);
         border: 0; border-radius: 6px; cursor: pointer; }
button.link { margin: 0; padding: 0; color: var(--acento); background: none; text-decoration: underline; }
.discreto { color: var(--discreto); }
.erro { color: var(--erro); margin: 0; }
.qr { background: #fff; padding: 8px; align-self: center; line-height: 0; border-radius: 6px; }
.chave { word-break: break-all; }
.codigos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.aviso { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 10px; }
a { color: var(--acento); }