:root{color-scheme:light dark;--bg:#f3f4f8;--card:#ffffff;--text:#1f2430;--muted:#6b7280;--accent:#2f6fed;--bar:#2f6fed;--border:#e5e7eb;--danger:#d93025}
@media (prefers-color-scheme:dark){:root{--bg:#14161c;--card:#1e2129;--text:#e8eaf0;--muted:#9aa1ad;--accent:#6b97f5;--bar:#6b97f5;--border:#2c313c;--danger:#f28b82}}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
.otp-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;gap:16px}
.otp-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.otp-header{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.otp-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);flex:none}
h1{font-size:20px;margin:0}
.otp-subtitle{margin:2px 0 0;font-size:13px;color:var(--muted)}
.otp-label{display:block;font-size:14px;margin-bottom:6px}
.otp-input{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;font-size:16px;background:transparent;color:var(--text)}
.otp-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.otp-hint{margin:6px 0 14px;font-size:12px;color:var(--muted)}
.otp-buttons{display:flex;gap:10px}
.otp-button{flex:1;padding:11px 14px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-size:15px;cursor:pointer}
.otp-button:disabled{opacity:.55;cursor:default}
.otp-secondary{flex:none;background:transparent;color:var(--text);border:1px solid var(--border)}
.otp-status{min-height:1.2em;margin:10px 0 0;font-size:13px;color:var(--muted)}
.otp-status.error{color:var(--danger)}
.otp-result{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.otp-code{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;color:var(--text);cursor:pointer;padding:8px;border-radius:12px}
.otp-code:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.otp-code:disabled{cursor:default}
.otp-code:disabled:hover{background:transparent}
.otp-code-value{font-size:34px;letter-spacing:.18em;font-variant-numeric:tabular-nums;font-weight:600}
.otp-next .otp-code-value{font-size:20px;color:var(--muted);letter-spacing:.14em}
.otp-code-caption{font-size:12px;color:var(--muted)}
.otp-progress{height:4px;border-radius:2px;background:color-mix(in srgb,var(--muted) 25%,transparent);overflow:hidden}
.otp-progress-bar{height:100%;background:var(--bar);transform-origin:left center;transform:scaleX(1)}
.otp-countdown{margin:0;text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.otp-footer{max-width:420px;text-align:center;font-size:12px;color:var(--muted)}