:root {
  --fundo: #f5f7fb;
  --cartao: #ffffff;
  --texto: #0f172a;
  --suave: #475569;
  --borda: #dbe2ec;
  --primaria: #0b63ce;
  --primaria-texto: #ffffff;
  --ok: #15803d;
  --erro: #b91c1c;
  --aviso: #92400e;
  --codigo-fundo: #eef2f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b1120;
    --cartao: #111a2e;
    --texto: #e2e8f0;
    --suave: #94a3b8;
    --borda: #24324d;
    --primaria: #3b82f6;
    --ok: #4ade80;
    --erro: #f87171;
    --aviso: #fbbf24;
    --codigo-fundo: #0b1324;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.topo, main, .rodape {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

.topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 28px;
  padding-bottom: 12px;
}

.logo { height: 52px; width: auto; }
h1 { font-size: 1.5rem; margin: 0; }
.sub { margin: 0; color: var(--suave); font-size: .9rem; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 20px;
  margin: 16px 0;
}

h2 { font-size: 1.2rem; margin: 0 0 6px; }
h3 { font-size: 1rem; margin: 18px 0 4px; }
p { margin: 6px 0; }

.botoes, .linha {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao.primario {
  background: var(--primaria);
  border-color: var(--primaria);
  color: var(--primaria-texto);
}

.botao:disabled { opacity: .6; cursor: wait; }

label { display: block; font-weight: 600; margin-top: 12px; }

input {
  flex: 1 1 200px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: var(--codigo-fundo);
  color: var(--texto);
  font: 600 1.15rem/1 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.passos { padding-left: 1.3em; margin: 10px 0; }
.passos li { margin: 6px 0; }
a { color: var(--primaria); }

.estado { min-height: 1.5em; color: var(--suave); }
.estado.erro { color: var(--erro); font-weight: 600; }
.ok { color: var(--ok); }
.aviso { color: var(--aviso); font-size: .9rem; }

code {
  background: var(--codigo-fundo);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .85em;
  word-break: break-all;
}

.qr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.qr img {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  max-width: 100%;
  height: auto;
}

.rodape {
  color: var(--suave);
  font-size: .8rem;
  padding-bottom: 32px;
}

.hashes code { font-size: .75rem; }