.otp-preview-entry{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}.otp-preview-entry .button{font-size:11px}.otp-preview-entry p{font-size:11px!important;margin:12px 0 0!important}
.otp-dialog{--otp-orange:#d95600;--otp-red:#c92b3b;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:30px;box-shadow:0 30px 100px #0003;padding:36px;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto}
html[data-theme="dark"] .otp-dialog{--otp-orange:#ff7a18;--otp-red:#ff727f}
.otp-dialog::backdrop{background:#0006;backdrop-filter:blur(12px)}
.otp-dialog h2{font-size:28px;line-height:1.3;margin:22px 0 16px;letter-spacing:-.035em}.otp-dialog p{font-size:12px;line-height:1.9;color:var(--muted)}
.otp-demo-label{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--ink);font-size:10px}
.otp-close{position:absolute;top:17px;right:17px;width:34px;height:34px;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:50%;display:grid;place-items:center}.otp-close svg{width:13px;height:13px}
.otp-dialog label{display:block;font-size:12px;margin:24px 0 12px}
.otp-dialog input{width:100%;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;padding:15px;font-size:16px}
.otp-dialog input:focus{outline:none;box-shadow:none;border-color:var(--otp-orange)}
.otp-code-entry{position:relative;height:58px}
.otp-dialog .otp-code{position:absolute;inset:0;height:100%;z-index:2;opacity:0;font-size:16px;cursor:text;padding:0;border:0;border-radius:0}
.otp-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;height:100%;pointer-events:none}
.otp-slot{display:grid;place-items:center;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:27px;line-height:1;font-variant-numeric:tabular-nums;transition:border-color .25s,background-color .25s}
.otp-slot[data-filled]{background:color-mix(in srgb,var(--otp-orange) 4%,var(--surface))}
.otp-code:focus~.otp-slots .otp-slot[data-active]{border-color:var(--otp-orange)}
.otp-code[aria-invalid="true"]~.otp-slots .otp-slot{border-color:var(--otp-red)}
.otp-code[aria-invalid="true"]:focus~.otp-slots .otp-slot[data-active]{border-color:var(--otp-orange)}
.otp-code:disabled~.otp-slots{opacity:.7}
.otp-dialog .button{width:100%;font-size:12px;margin-top:22px}.otp-dialog .otp-change{background:transparent;margin-top:10px}.otp-dialog button:disabled{opacity:.6;cursor:wait}
.otp-dialog :is(button,a):focus-visible{outline:2px solid var(--otp-orange);outline-offset:4px}
.otp-visual{display:grid;place-items:center;isolation:isolate;height:104px;margin:20px 0 8px}
.otp-envelope{grid-area:1/1;z-index:1;width:84px;height:84px;fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.otp-mail-accent{stroke:var(--otp-orange)}
.otp-icon{grid-area:1/1;z-index:0;display:block;width:84px;height:84px;overflow:visible;color:var(--otp-orange);filter:drop-shadow(0 6px 15px #ff770026);transform-origin:center}
.otp-icon path{fill:none;stroke:url(#otp-preview-gradient);stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}.otp-icon stop{stop-color:currentColor}
.otp-dialog[data-state="checking"] .otp-visual{background:radial-gradient(circle at center,#ff77000d,transparent 62%);border-radius:50%}
.otp-dialog[data-state="success"] .otp-icon{filter:drop-shadow(0 6px 15px #ff770028)}
.otp-dialog[data-state="error"] .otp-icon{filter:drop-shadow(0 6px 15px #e83c441a)}
.otp-status{margin-top:18px}.otp-status:empty{display:none}.otp-preview-email{overflow-wrap:anywhere;color:var(--ink)!important;margin:8px 0 14px;text-align:center}
.otp-test-note{padding-top:18px;margin-top:20px;border-top:1px solid var(--line);font-size:11px!important}.otp-success-copy{margin:20px 0}
@media(max-width:480px){.otp-dialog{padding:30px 22px;border-radius:24px}.otp-dialog h2{font-size:25px}.otp-code-entry{height:51px}.otp-slots{gap:6px}.otp-slot{font-size:24px;border-radius:10px}.otp-visual{height:88px;margin-top:12px}.otp-icon{width:84px;height:84px}}
@media(prefers-reduced-motion:reduce){.otp-dialog{scroll-behavior:auto}.otp-slot{transition:none}}