/* Scoped only to OTP. Original app colors, background and other screens remain unchanged. */
.otp-motion{position:relative;min-height:104px;display:grid;align-content:start;gap:14px}
.otp-digit-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;transition:opacity .16s,transform .2s}
.otp-digit{height:56px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);display:grid;place-items:center;font-size:25px;font-weight:600}
.otp-digit[data-active=true]{border-color:var(--blue);box-shadow:0 0 0 2px var(--glow,rgba(138,120,239,.18))}
.otp-motion .otp-motion-input{position:absolute;inset:0 0 auto;width:100%;height:56px;opacity:0;z-index:2;font-size:20px;direction:ltr;letter-spacing:0}
.otp-motion:focus-within .otp-digit-row{outline:2px solid var(--blue);outline-offset:4px;border-radius:12px}
.otp-motion-label{text-align:center;color:var(--muted);font-size:13px;min-height:22px}
.otp-motion-face{display:none;position:absolute;inset:0 0 auto;height:56px;align-items:center;justify-content:center}
.otp-motion-ring{width:36px;height:36px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:otp-verifying .8s linear infinite}
.otp-motion-check{display:none;color:var(--blue);border:1px solid var(--blue);width:46px;height:46px;align-items:center;justify-content:center;border-radius:14px;background:var(--surface)}
.otp-motion-check svg{width:25px;height:25px}
.otp-motion[data-otp-state=checking] .otp-digit-row,.otp-motion[data-otp-state=success] .otp-digit-row{opacity:0;transform:scale(.85)}
.otp-motion[data-otp-state=checking] .otp-motion-face,.otp-motion[data-otp-state=success] .otp-motion-face{display:flex}
.otp-motion[data-otp-state=success] .otp-motion-ring{display:none}
.otp-motion[data-otp-state=success] .otp-motion-check{display:flex}
@keyframes otp-verifying{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.otp-digit-row{transition:none}.otp-motion-ring{animation:none}}