:root { --bg:#f6f7f9; --card:#fff; --tx:#14171f; --mut:#5b6170; --pri:#1f5eff; --err:#b3261e; --bd:#dde1e8; }
@media (prefers-color-scheme: dark) { :root { --bg:#111318; --card:#1b1e25; --tx:#eceef2; --mut:#a3a9b6; --pri:#7aa2ff; --err:#ff8a80; --bd:#2d313b; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--tx); font:16px/1.45 system-ui, sans-serif; }
main { max-width:420px; margin:0 auto; padding:32px 16px; }
.card { background:var(--card); border:1px solid var(--bd); border-radius:16px; padding:20px; }
h1 { font-size:20px; margin:0 0 12px; }
p { margin:0 0 12px; color:var(--mut); }
ul { margin:0 0 12px; padding-left:20px; color:var(--mut); }
label { display:block; font-size:14px; margin:12px 0 4px; }
input { width:100%; padding:12px; font-size:16px; border:1px solid var(--bd); border-radius:10px; background:var(--card); color:var(--tx); }
button { width:100%; padding:14px; margin-top:16px; font-size:16px; border:0; border-radius:12px; background:var(--pri); color:#fff; }
button.sec { background:transparent; color:var(--tx); border:1px solid var(--bd); }
button:disabled { opacity:.5; }
.erro { color:var(--err); margin-top:12px; }
.item { border-top:1px solid var(--bd); padding:12px 0; }
.chave { font-family: ui-monospace, monospace; word-break: break-all; background:var(--bg); padding:10px; border-radius:8px; }
a.botao { display:block; text-align:center; padding:14px; margin-top:12px; border-radius:12px; background:var(--pri); color:#fff; text-decoration:none; }
img.qr { display:block; margin:8px auto 0; background:#fff; padding:8px; border-radius:8px; width:200px; }
p a { color:var(--pri); }
.espaco { margin-top:12px; }