/* mesmos tokens do app.html */
:root{
  --bg:#fafaf9; --panel:#ffffff; --panel-2:#f5f4f1; --line:#e8e6e1; --line-2:#d6d3cc;
  --fg:#1d1c1a; --fg-2:#5c5a55; --fg-3:#8d8a83;
  --accent:#d9590b; --accent-h:#c24f09; --accent-soft:#fcede3; --accent-fg:#a8440a;
  --ok:#15803d; --ok-soft:#e5f4ea; --bad:#c03636; --bad-soft:#fbe7e7;
  --shadow-lg:0 12px 40px rgba(28,25,20,.10),0 2px 6px rgba(28,25,20,.05);
  --r:12px; --r-sm:8px; --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#151514; --panel:#1f1f1e; --panel-2:#262625; --line:#2f2f2d; --line-2:#3d3d3a;
  --fg:#eceae6; --fg-2:#aeaba4; --fg-3:#7c7a74;
  --accent:#ee7a2f; --accent-h:#f48a44; --accent-soft:#3a2416; --accent-fg:#f6a56f;
  --ok:#4ac17f; --ok-soft:#163222; --bad:#ef7070; --bad-soft:#3b1a1a; --shadow-lg:0 16px 48px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#151514; --panel:#1f1f1e; --panel-2:#262625; --line:#2f2f2d; --line-2:#3d3d3a;
  --fg:#eceae6; --fg-2:#aeaba4; --fg-3:#7c7a74;
  --accent:#ee7a2f; --accent-h:#f48a44; --accent-soft:#3a2416; --accent-fg:#f6a56f;
  --ok:#4ac17f; --ok-soft:#163222; --bad:#ef7070; --bad-soft:#3b1a1a; --shadow-lg:0 16px 48px rgba(0,0,0,.5); color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--ui);display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px 16px;-webkit-font-smoothing:antialiased}
.caixa{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:32px 28px}
.marca{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.marca svg{flex:none}
.marca b{font-size:17px;font-weight:600;letter-spacing:-.01em}
h1{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
.sub{color:var(--fg-2);font-size:14px;margin:0 0 22px}
label{display:block;font-size:13px;font-weight:500;color:var(--fg-2);margin:14px 0 6px}
input{width:100%;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);color:var(--fg);
  font:15px var(--ui);outline:none;transition:border-color .12s,box-shadow .12s}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input.codigo{letter-spacing:.4em;font-size:20px;text-align:center;font-variant-numeric:tabular-nums}
button{width:100%;height:42px;margin-top:20px;border:0;border-radius:var(--r-sm);background:var(--accent);color:#fff;font:600 15px var(--ui);
  cursor:pointer;transition:background .12s}
button:hover{background:var(--accent-h)}
button:disabled{opacity:.6;cursor:default}
button.sec{background:transparent;color:var(--fg-2);border:1px solid var(--line-2);margin-top:10px}
button.sec:hover{background:var(--panel-2)}
.aviso{margin-top:16px;padding:10px 12px;border-radius:var(--r-sm);font-size:14px;display:none}
.aviso.erro{display:block;background:var(--bad-soft);color:var(--bad)}
.aviso.ok{display:block;background:var(--ok-soft);color:var(--ok)}
.qr{display:flex;justify-content:center;background:#fff;border-radius:var(--r-sm);padding:12px;margin:6px 0 10px;border:1px solid var(--line)}
.qr img{width:180px;height:180px}
.segredo{font:12px ui-monospace,Consolas,monospace;color:var(--fg-3);word-break:break-all;text-align:center}
.passo{display:none}
.passo.ativo{display:block}
.rodape{margin-top:20px;font-size:12.5px;color:var(--fg-3);text-align:center}
.rodape a{color:var(--fg-2)}