.otp-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.otp-modal[hidden] { display: none; }
.otp-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.otp-modal__box {
	position: relative; width: min(380px, 92vw); padding: 24px; border-radius: 20px;
	background: var(--surface, #0e1018); color: var(--text, #eef1ff);
	border: 1px solid var(--line, rgba(255, 255, 255, .08));
	box-shadow: 0 0 40px color-mix(in srgb, var(--neon, #22e4ff) 25%, transparent);
}
.otp-modal__box h3 { margin-top: 0; }
.otp-modal__close { position: absolute; top: 10px; left: 14px; background: none; border: 0; color: inherit; font-size: 24px; cursor: pointer; }
.otp-step { display: flex; flex-direction: column; gap: 12px; }
.otp-step label { display: flex; flex-direction: column; gap: 6px; }
.otp-step input[type=tel], .otp-step input[type=text] {
	padding: 10px 14px; border-radius: 12px; font: inherit; font-size: 18px; text-align: center; letter-spacing: 2px; direction: ltr;
	background: var(--surface-2, #161927); color: inherit; border: 1px solid var(--line, rgba(255, 255, 255, .08));
}
.otp-step input:focus { outline: none; border-color: var(--neon, #22e4ff); }
.otp-check { flex-direction: row !important; align-items: center; font-size: 13px; color: var(--muted, #8b90a8); }
.otp-link { background: none; border: 0; color: var(--neon, #22e4ff); font: inherit; cursor: pointer; }
.otp-link:disabled { color: var(--muted, #8b90a8); cursor: default; }
.otp-hint { margin: 0; color: var(--muted, #8b90a8); font-size: 14px; }
.otp-error { color: #ff5c7a; min-height: 1.5em; margin: 8px 0 0; font-size: 14px; }