.wx-otp-wrap{justify-content:center;gap:10px;margin:20px 0;display:flex}.wx-otp-input{background:var(--surface2);border:1px solid var(--border);text-align:center;width:48px;height:56px;color:var(--text);font-size:22px;font-weight:700;font-family:var(--font-body);border-radius:8px;outline:none;transition:border-color .2s,box-shadow .2s}.wx-otp-input:focus{border-color:var(--amber,#e8a830);box-shadow:0 0 0 3px color-mix(in srgb, var(--amber,#e8a830) 12%, transparent)}@media (max-width:900px){.wx-otp-wrap{gap:8px}.wx-otp-input{width:44px;height:52px}}@media (max-width:380px){.wx-otp-input{width:40px;height:48px;font-size:19px}}.wx-otp-wrap--busy .wx-otp-input,.wx-otp-wrap--ok .wx-otp-input{animation-fill-mode:both}.wx-otp-wrap--busy .wx-otp-input{animation-name:wx-otp-sweep;animation-duration:.9s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.wx-otp-wrap--ok .wx-otp-input{border-color:var(--success,#4caf7d);animation-name:wx-otp-pop;animation-duration:.34s;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}.wx-otp-wrap--busy .wx-otp-input:first-child,.wx-otp-wrap--ok .wx-otp-input:first-child{animation-delay:0s}.wx-otp-wrap--busy .wx-otp-input:nth-child(2),.wx-otp-wrap--ok .wx-otp-input:nth-child(2){animation-delay:55ms}.wx-otp-wrap--busy .wx-otp-input:nth-child(3),.wx-otp-wrap--ok .wx-otp-input:nth-child(3){animation-delay:.11s}.wx-otp-wrap--busy .wx-otp-input:nth-child(4),.wx-otp-wrap--ok .wx-otp-input:nth-child(4){animation-delay:.165s}.wx-otp-wrap--busy .wx-otp-input:nth-child(5),.wx-otp-wrap--ok .wx-otp-input:nth-child(5){animation-delay:.22s}.wx-otp-wrap--busy .wx-otp-input:nth-child(6),.wx-otp-wrap--ok .wx-otp-input:nth-child(6){animation-delay:.275s}.wx-otp-wrap--err{animation:.4s cubic-bezier(.36,.07,.19,.97) both wx-otp-shake}.wx-otp-wrap--err .wx-otp-input{border-color:var(--danger,#e05050)}@keyframes wx-otp-sweep{0%,to{opacity:1;transform:translateY(0)}50%{opacity:.5;transform:translateY(-3px)}}@keyframes wx-otp-pop{0%{transform:scale(1)}45%{transform:scale(1.07)}to{transform:scale(1)}}@keyframes wx-otp-shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}@media (prefers-reduced-motion:reduce){.wx-otp-wrap--busy .wx-otp-input,.wx-otp-wrap--ok .wx-otp-input,.wx-otp-wrap--err{animation:none}.wx-otp-wrap--busy .wx-otp-input{opacity:.6}}html[data-lite] .wx-otp-wrap--busy .wx-otp-input,html[data-lite] .wx-otp-wrap--ok .wx-otp-input,html[data-lite] .wx-otp-wrap--err{animation:none}html[data-lite] .wx-otp-wrap--busy .wx-otp-input{opacity:.6}