.np-otp,.np-otp *{box-sizing:border-box}.np-otp{width:calc(100% - 32px);max-width:400px;margin:36px auto;padding:26px;border:1px solid #e1e7f0;border-radius:20px;background:linear-gradient(155deg,#fff 65%,#f0f7ff);box-shadow:0 16px 48px #233d6b12;color:#18273e;position:relative;overflow:hidden;animation:otp-enter .4s ease both}.np-otp:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3b82f6,#8b5cf6,#34d399)}.np-otp .otp-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#18273e;font-size:22px;font-weight:800;line-height:32px}.np-otp .otp-brand img{width:32px;height:32px;object-fit:contain}.np-otp .otp-brand b{color:#4388fa}.np-otp .otp-mark{display:grid;place-items:center;width:44px;height:44px;background:linear-gradient(140deg,#e6efff,#edf9f7);color:#3479ef;font-size:23px;border-radius:13px;margin:22px 0 14px;box-shadow:3px 5px 0 #dce8fb}.np-otp .np-kicker{font-size:10px;letter-spacing:1.4px;color:#4e79ba;font-weight:700}.np-otp h1{font-size:25px;line-height:1.25;color:#18273e;margin:9px 0 12px}.np-otp p{font-size:13px;line-height:1.75;color:#607087;margin:0 0 18px;overflow-wrap:anywhere}.np-otp form{padding:0;border:0;background:none;box-shadow:none;margin:0;width:100%;max-width:none}.np-otp label{display:block;font-size:12px;font-weight:600;color:#40536e}.np-otp input[name=otp]{display:block;height:50px;margin:8px 0 14px;padding:8px 12px;font-size:22px;letter-spacing:6px;font-weight:600;font-family:inherit;text-align:center;width:100%;border:1px solid #d4deec;border-radius:11px;background:#fff;color:#18273e;outline:none;box-shadow:none}.np-otp input[name=otp]:focus{border-color:#548cf5;outline:3px solid #3b82f61a;outline-offset:1px}.np-otp button{display:block;width:100%;height:43px;min-height:0;margin:0;padding:10px 12px;border:0;border-radius:11px;background:linear-gradient(100deg,#347bea,#5d68e9);color:#fff;font-size:13px;font-weight:700;box-shadow:0 5px 14px #347bea20;cursor:pointer;transition:transform .2s}.np-otp button:hover{transform:translateY(-1px)}.np-otp .otp-resend{margin-top:17px;text-align:center}.np-otp .otp-resend button{display:inline-block;width:auto;height:auto;padding:6px 12px;background:none;color:#3675d5;box-shadow:none;font-size:12px}.np-otp small{display:block;font-size:11px;line-height:1.6;color:#7a879a;margin-top:4px}.np-otp .otp-back{display:block;text-align:center;font-size:12px;margin-top:19px;padding-top:15px;border-top:1px solid #e6ecf5;color:#62748e;text-decoration:none}.np-otp .otp-notice{background:#fff5df;border:1px solid #f4e3b7;padding:10px;border-radius:9px;color:#795917;margin-bottom:15px}@keyframes otp-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:480px){.np-otp{margin:22px auto;padding:22px;max-width:370px}.np-otp h1{font-size:23px}}@media(prefers-reduced-motion:reduce){.np-otp{animation:none}.np-otp button{transition:none}.np-otp button:hover{transform:none}}

.np-otp .otp-signin{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;background:linear-gradient(100deg,#347bea,#5d68e9);color:#fff;text-decoration:none;font-size:14px;font-weight:700;border-radius:11px;box-shadow:0 5px 14px #347bea20}.np-otp.otp-existing .otp-mark{background:linear-gradient(140deg,#dcf7ec,#e8f3ff);color:#168c67;box-shadow:3px 5px 0 #d9eee8}.np-otp.otp-existing h1{font-size:24px}

.np-otp.otp-success{text-align:center}.otp-success .otp-brand{justify-content:center}.otp-success .np-language{justify-content:flex-end}.otp-success-mark{display:grid;place-items:center;width:76px;height:76px;margin:25px auto 20px;border-radius:50%;color:#139b70;background:linear-gradient(135deg,#dcf9ed,#e7f3ff);box-shadow:0 7px 0 #deeee7,0 15px 25px #159b7015;animation:success-pop .5s ease both}.otp-success-mark svg{width:44px;height:44px}.np-otp .otp-success-lead{font-weight:700;color:#238460;font-size:15px;line-height:1.7;margin-bottom:12px}.otp-success .otp-signin{margin-top:20px}@keyframes success-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.otp-success-mark{animation:none}}
/* Signup confirmation: lightweight CSS 3D motion. */
.np-otp.otp-success{perspective:900px;isolation:isolate;background:radial-gradient(ellipse at 50% 25%,#e7f8f344,transparent 56%),linear-gradient(155deg,#fff 65%,#f0f7ff)}.otp-success .otp-success-mark{position:relative;overflow:visible;transform-style:preserve-3d;margin:29px auto 24px;background:linear-gradient(145deg,#f0fff9,#caf3e2);border:1px solid #bde6d6;box-shadow:0 8px 0 #bbdfd0,0 19px 28px #159b7024,inset 0 2px 4px #ffffff;animation:success-float-3d 5s ease-in-out infinite}.otp-success .otp-success-mark svg{transform:translateZ(12px);filter:drop-shadow(0 4px 2px #16885a22)}.otp-success .otp-success-mark:before{content:"";position:absolute;inset:-13px;border:1px solid #53bca74d;border-top:2px solid #47b79a;border-right-color:transparent;border-radius:50%;transform:translateZ(-7px);animation:success-ring-3d 9s linear infinite;pointer-events:none}.otp-success .otp-success-mark:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;top:6px;right:-13px;background:#5196ed;box-shadow:-86px 52px 0 -1px #67cba3,20px 66px 0 -2px #b08aef;animation:success-spark-3d 4s ease-in-out infinite;pointer-events:none}.otp-success .otp-success-lead{position:relative}.otp-success .otp-signin{transition:transform .2s ease,box-shadow .2s ease}.otp-success .otp-signin:hover{transform:translateY(-2px);box-shadow:0 9px 18px #347bea25}.otp-success .otp-signin:active{transform:translateY(0)}@keyframes success-float-3d{0%,100%{transform:translateY(0) rotateX(7deg) rotateY(-9deg)}50%{transform:translateY(-6px) rotateX(-5deg) rotateY(9deg)}}@keyframes success-ring-3d{from{transform:translateZ(-7px) rotate(0deg)}to{transform:translateZ(-7px) rotate(360deg)}}@keyframes success-spark-3d{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}@media(max-width:480px){.otp-success .otp-success-mark{width:68px;height:68px;margin:25px auto 23px}.otp-success .otp-success-mark svg{width:39px;height:39px}.otp-success .otp-success-mark:before{inset:-11px}}@media(prefers-reduced-motion:reduce){.otp-success .otp-success-mark,.otp-success .otp-success-mark:before,.otp-success .otp-success-mark:after{animation:none;transform:none}.otp-success .otp-signin{transition:none}.otp-success .otp-signin:hover{transform:none}}@media print{.otp-success .otp-success-mark,.otp-success .otp-success-mark:before,.otp-success .otp-success-mark:after{animation:none;transform:none}}