/* VERTEX — خانات رمز التحقق: شكل «نبض» */
.gl-otp{position:relative;direction:ltr;display:flex;justify-content:center;margin:6px auto 4px;padding:6px 0}
.gl-row{display:flex;gap:8px}
.gl-box{position:relative;width:46px;height:58px;border-radius:15px;border:2px solid #EFE4E2;background:#fff;display:grid;place-items:center;font-size:26px;font-weight:700;color:#D94F77;transition:border-color .25s,background .3s,transform .3s cubic-bezier(.34,1.56,.64,1);animation:glIn .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--k) * 60ms)}
@keyframes glIn{from{opacity:0;transform:translateY(14px) scale(.8)}}
.gl-box.active{border-color:#EE678C;animation:glGlow 1.3s ease-in-out infinite}
@keyframes glGlow{0%,100%{box-shadow:0 0 0 0 rgba(238,103,140,.35)}50%{box-shadow:0 0 0 7px rgba(238,103,140,0),0 0 22px rgba(238,103,140,.35)}}
.gl-box.active::before{content:"";position:absolute;width:2px;height:26px;background:#EE678C;border-radius:2px;animation:glBlink 1s steps(1) infinite}
@keyframes glBlink{50%{opacity:0}}
.gl-box.filled{background:linear-gradient(160deg,#FFF3F6,#FFE0E8);border-color:#F8B9C9}
.gl-box.pop{animation:glPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes glPop{0%{transform:scale(.7)}55%{transform:scale(1.14)}100%{transform:none}}
.gl-rip{position:absolute;inset:-2px;border-radius:15px;border:2px solid #EE678C;animation:glRip .6s ease-out forwards;pointer-events:none}
@keyframes glRip{to{transform:scale(1.45);opacity:0}}
.gl-row.win .gl-box{animation:glWave .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--k) * 70ms);background:linear-gradient(160deg,#E9FBF1,#C9F1DB);border-color:#7CD7A8;color:#16A36A}
@keyframes glWave{40%{transform:translateY(-16px) rotate(-4deg)}70%{transform:translateY(3px)}100%{transform:none}}
.gl-conf{position:absolute;left:50%;top:50%;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:8;animation:glConf 1.2s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes glConf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.gl-otp.err .gl-row{animation:glShake .5s}
.gl-otp.err .gl-box{border-color:#F3B4C2}
@keyframes glShake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(2px)}}
.gl-real{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;z-index:9!important;border:0!important;background:transparent!important;color:transparent!important;caret-color:transparent!important;font-size:16px!important;letter-spacing:0!important;padding:0!important;box-shadow:none!important;transform:none!important}
.gl-status{min-height:24px;margin:2px 0 6px;text-align:center;font-size:14px;font-weight:600;color:#16A36A;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.gl-status.on{opacity:1;transform:none}
@media (max-width:380px){.gl-box{width:40px;height:52px;font-size:22px}.gl-row{gap:6px}}
@media (prefers-reduced-motion:reduce){.gl-otp *{animation:none!important;transition:none!important}}