:root{--ink:#101d36;--ink-deep:#0b1428;--teal:#0e7c7b;--teal-dark:#0a5f5e;--amber:#e8833a;--amber-soft:#fbeee2;--paper:#f7f8fa;--line:#dde3ec;--text:#1c2434;--muted:#5b6472;--white:#fff;--ok:#1e8e5a;--bad:#c0392b;--radius:14px;--shadow:0 12px 40px rgba(16,29,54,0.1)}.otp-shell{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(900px 500px at 110% -10%,rgba(14,124,123,0.22),transparent 55%),var(--paper)}.otp-top{background:var(--ink-deep);padding:20px 32px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.wordmark{display:flex;align-items:baseline;gap:10px}.event-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,0.25);color:#d9e2f1;font-size:0.78rem;padding:6px 12px;border-radius:999px}.event-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}.otp-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:44px 20px 60px}.otp-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 38px;max-width:480px;width:100%;text-align:center}.rail{display:flex;gap:0;align-items:center;justify-content:center;margin:0 auto 26px;max-width:360px}.rail .rs{display:flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:600;color:var(--muted)}.rail .rs.done .b{background:var(--teal);border-color:var(--teal);color:#fff}.rail .rs .b{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:0.72rem;background:var(--white);color:var(--muted)}.rail .rs.now .b{border-color:var(--teal);color:var(--teal)}.rail .conn{width:34px;height:2px;background:var(--line);margin:0 8px}.rail .conn.done{background:var(--teal)}.otp-icon{width:64px;height:64px;border-radius:18px;background:var(--amber-soft);display:grid;place-items:center;margin:0 auto 20px}.otp-card h1{font-size:1.6rem;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}.otp-card .sub{color:var(--muted);font-size:0.92rem;margin:10px 0 26px}.otp-card .sub b{color:var(--ink)}.otp-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:8px}.otp-inputs input{width:52px;height:62px;border:1.5px solid var(--line);border-radius:12px;text-align:center;font-size:1.5rem;font-weight:700;font-family:"Bricolage Grotesque";color:var(--ink);transition:border-color 0.15s;background:var(--paper)}.otp-inputs input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(14,124,123,0.15);background:#fff}.otp-err{display:none;color:var(--bad);font-size:0.82rem;font-weight:600;margin-top:8px}.otp-demo{margin-top:14px;font-size:0.78rem;color:var(--muted);background:var(--paper);border:1px dashed var(--line);border-radius:8px;padding:8px 12px;display:inline-block}.resend{margin-top:16px;font-size:0.85rem;color:var(--muted)}#resend-btn{background:none;border:none;color:var(--teal);font-weight:700;font-size:0.85rem;text-decoration:underline;text-underline-offset:3px}.otp-form{text-align:left;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}.otp-form h2{font-size:1.05rem;font-weight:800;color:var(--ink);letter-spacing:-0.01em;margin-bottom:4px}.otp-form .fsub{font-size:0.82rem;color:var(--muted);margin-bottom:16px}.field{margin-bottom:15px}.field label{display:block;font-size:0.83rem;font-weight:600;color:var(--ink);margin-bottom:6px}.pw-wrap{position:relative}.field input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:0.95rem;font-family:inherit;color:var(--text);transition:border-color 0.15s;padding-right:64px}.field input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(14,124,123,0.15)}.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--teal);font-weight:700;font-size:0.78rem;padding:4px 6px}.pw-rules{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px}.pw-rule{font-size:0.74rem;color:var(--muted);display:inline-flex;align-items:center;gap:5px}.pw-rule::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line)}.field .err{display:none;font-size:0.76rem;color:var(--bad);margin-top:5px}.tnc-box{border:1px solid var(--line);border-radius:10px;background:var(--paper);max-height:150px;overflow-y:auto;padding:14px 16px;font-size:0.76rem;color:var(--muted);line-height:1.6}.tnc-box h3{font-size:0.8rem;color:var(--ink);font-weight:700;margin-bottom:6px;font-family:"Inter"}.tnc-box p{margin-bottom:8px}.tnc-check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:0.82rem;color:var(--text)}.tnc-check input{margin-top:3px;accent-color:var(--teal);width:16px;height:16px;flex:none}.tnc-check a{color:var(--teal)}.tnc-err{display:none;font-size:.76rem;color:var(--bad);margin-top:6px;font-weight:600}.otp-actions{margin-top:22px}.btn-primary{width:100%;background:var(--teal);color:#fff;border:none;border-radius:10px;padding:15px;font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s,transform .1s}.btn-primary:hover{background:var(--teal-dark)}.btn-primary:disabled{cursor:not-allowed;opacity:.7}.otp-loading{margin-top:10px;font-size:.85rem;color:var(--muted);text-align:center;display:none}.otp-loading.show{display:flex;align-items:center;justify-content:center;gap:8px}.otp-loading .spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--teal);animation:otp-spin .7s linear infinite}@keyframes otp-spin{to{transform:rotate(360deg)}}.otp-why{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);text-align:left;display:flex;gap:10px}.otp-why svg{flex:none;margin-top:2px}