:root{
  --white:#FFFFFF; --offwhite:#F6F8F6; --border:#E6E8E5; --charcoal:#3A3A3B; --soft:#6C6C6D;
  --green:#8DC63F; --green-dark:#5E9128; --green-tint:#EEF7E2; --bad:#B3261E; --bad-tint:#FCECEA; --warn-tint:#FFF6E0;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font:15px/1.55 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--offwhite);color:var(--charcoal);min-height:100vh}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif;font-weight:700;line-height:1.2}
a{color:var(--green-dark)}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.card{width:100%;max-width:420px;background:var(--white);border:1px solid var(--border);border-radius:16px;padding:32px 28px;box-shadow:0 10px 28px rgba(58,58,59,.06)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.brand img{height:30px;width:auto}
.brand span{color:var(--soft);font:500 13px 'Poppins',sans-serif;padding-left:12px;border-left:1px solid var(--border)}
.card h1{font-size:22px;margin-bottom:6px}
.card p.sub{color:var(--soft);font-size:14px;margin-bottom:20px}
label{display:grid;gap:6px;font-size:13px;font-weight:600;margin-bottom:14px}
input,select{font:inherit;font-weight:400;padding:11px 12px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--charcoal);width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--green);outline-offset:1px}
input.code{font:600 22px/1 ui-monospace,Menlo,monospace;letter-spacing:.3em;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px 'Poppins',sans-serif;padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;background:var(--green);color:var(--white);width:100%}
.btn:hover{background:var(--green-dark)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.ghost{background:var(--white);color:var(--charcoal);border-color:var(--border)}
.btn.ghost:hover{border-color:var(--charcoal)}
.btn.small{width:auto;padding:8px 14px;font-size:13px}
.link{background:none;border:0;color:var(--green-dark);font:500 13.5px 'Inter',sans-serif;cursor:pointer;padding:4px 0;text-decoration:underline}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.choice{display:grid;gap:10px}
.choice button{text-align:left;display:grid;gap:2px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--white);cursor:pointer;font:inherit;color:inherit}
.choice button:hover{border-color:var(--green)}
.choice b{font:600 15px 'Poppins',sans-serif}
.choice small{color:var(--soft);font-size:13px}
.msg{font-size:13.5px;padding:10px 12px;border-radius:8px;margin-bottom:14px}
.msg.bad{background:var(--bad-tint);color:var(--bad)}
.msg.ok{background:var(--green-tint);color:var(--green-dark)}
.msg.info{background:var(--warn-tint);color:#6b5200}
.qr{display:grid;place-items:center;margin:6px 0 12px}
.qr img{width:200px;height:200px;image-rendering:pixelated;border:1px solid var(--border);border-radius:8px}
.secret{font:500 13px ui-monospace,Menlo,monospace;background:var(--offwhite);border:1px solid var(--border);border-radius:8px;padding:8px 10px;word-break:break-all;margin-bottom:14px;text-align:center}
.foot{margin-top:18px;font-size:12.5px;color:var(--soft);text-align:center}
[hidden]{display:none!important}
