:root{--bg:#fff;--side:#f5f5f7;--line:#e9e9ee;--fg:#1d1d1f;--muted:#6e6e73;--faint:#a1a1a6;--accent:#0a66d8;--err:#c4311f;
--f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--side);color:var(--fg);font-family:var(--f);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;align-items:flex-start;justify-content:center;padding:max(40px,6vh) max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}
.card{background:var(--bg);width:100%;max-width:420px;border-radius:16px;padding:28px 28px 24px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 40px rgba(0,0,0,.08);animation:in .3s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.brand img{width:34px;height:34px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.brand b{font-weight:600;font-size:15px}.brand span{color:var(--muted)}
h1{font-size:22px;font-weight:600;letter-spacing:-.015em;margin:0 0 6px}
h3{font-size:13px;font-weight:600;margin:18px 0 2px}
.lead{color:var(--muted);margin:0 0 16px}
.form{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:500}
input{font:inherit;font-size:16px;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;color:var(--fg);background:#fff;outline:0;transition:border-color .15s,box-shadow .15s;width:100%}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,102,216,.14)}
.otp{letter-spacing:.3em;font-variant-numeric:tabular-nums;text-align:center;font-size:20px}
.check{flex-direction:row;align-items:center;gap:8px;color:var(--fg);font-size:13.5px}
.check input{width:18px;height:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{font:inherit;font-weight:500;height:42px;border-radius:10px;border:0;background:var(--side);color:var(--fg);padding:0 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:14.5px}
.btn.pri{background:var(--accent);color:#fff}.btn.pri:hover{background:#085bc2}.wide{width:100%;margin-top:4px}
.hint{font-size:12px;color:var(--faint);margin:-4px 0 0}
.alt{text-align:center;color:var(--muted);font-size:13px;margin:14px 0 0}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.err{background:#fdecea;color:var(--err);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px}
.note{background:#eef4fd;color:#1d4f91;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px}
.qr{width:200px;height:200px;margin:4px auto 10px;padding:6px;border:1px solid var(--line);border-radius:12px}
.qr svg{width:100%;height:100%;display:block}
.key{text-align:center;font-size:12.5px;color:var(--muted)}
code{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--side);padding:2px 6px;border-radius:6px;word-break:break-all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;list-style:none;margin:6px 0 12px}
.codes li{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:15px;background:var(--side);border-radius:8px;padding:8px;text-align:center;letter-spacing:.05em}
.req{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}
.req .ok{color:#16803c}.req .bad{color:var(--err);font-weight:600}
.steps{padding-left:18px;display:flex;flex-direction:column;gap:10px}
.copy{display:block;margin-top:6px;padding:8px 10px;user-select:all}
details{font-size:12.5px;color:var(--muted)}summary{cursor:pointer;margin-bottom:8px}
.muted{color:var(--muted);font-size:12.5px}
@media (max-width:480px){.card{padding:22px 18px}.two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}