/* NP NETWORK Get Number premium neon surface — scoped to the Get Number view only. */
#appShell:has(#view-getnumber[style*="display: block"]){
  min-height:100vh;
  color:#edf4ff;
  background:#070812;
  background-image:radial-gradient(ellipse at 12% 24%,rgba(26,183,255,.12),transparent 34%),radial-gradient(ellipse at 88% 46%,rgba(168,85,247,.11),transparent 32%);
}
#appShell:has(#view-getnumber[style*="display: block"]) .header{
  color:#f8fbff;
  background:rgba(9,11,27,.94);
  border-bottom:1px solid rgba(125,211,252,.2);
  box-shadow:0 8px 30px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
#appShell:has(#view-getnumber[style*="display: block"]) .brand .np-word,
#appShell:has(#view-getnumber[style*="display: block"]) .desk-title{color:#f8fbff!important}
#appShell:has(#view-getnumber[style*="display: block"]) .hamburger{
  background:linear-gradient(145deg,#1b2440,#11172b);
  border-color:rgba(125,211,252,.27);
  box-shadow:0 7px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
}
#appShell:has(#view-getnumber[style*="display: block"]) .hamburger span{
  background:#dff8ff;box-shadow:0 6px 0 #dff8ff,0 -6px 0 #dff8ff;
}
#appShell:has(#view-getnumber[style*="display: block"]) .bell{
  color:#a5f3fc;background:linear-gradient(145deg,#1b2440,#101528);
  border:1px solid rgba(125,211,252,.24);box-shadow:0 6px 18px rgba(0,0,0,.28)
}
#appShell:has(#view-getnumber[style*="display: block"]) .avatar{
  color:#07111d;background:linear-gradient(135deg,#a5f3fc,#7dd3fc 48%,#c4b5fd);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 0 22px rgba(56,189,248,.3)
}
#appShell:has(#view-getnumber[style*="display: block"]) .container{
  max-width:620px;padding:18px 14px 92px;color:#edf4ff;
  background:radial-gradient(ellipse at 8% 5%,rgba(34,211,238,.075),transparent 35%),radial-gradient(ellipse at 95% 24%,rgba(139,92,246,.07),transparent 31%);
}
#appShell:has(#view-getnumber[style*="display: block"]) #view-getnumber{
  display:block;color:#edf4ff;padding:2px 0 24px;
}
#view-getnumber>div[style*="grid-template-columns"]{
  gap:10px!important;margin-bottom:14px;
}
#view-getnumber .stat{
  position:relative;overflow:hidden;min-width:0;padding:13px 11px;
  border:1px solid rgba(125,211,252,.2)!important;border-radius:18px;
  background:linear-gradient(145deg,rgba(26,32,57,.96),rgba(15,19,37,.98))!important;
  color:#f8fbff;box-shadow:0 12px 26px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s,box-shadow .24s;
  animation:npg-enter .46s both;
}
#view-getnumber .stat:nth-child(2){animation-delay:.045s}
#view-getnumber .stat:nth-child(3){animation-delay:.09s}
#view-getnumber .stat:nth-child(4){animation-delay:.135s}
#view-getnumber .stat:hover{transform:translateY(-3px);border-color:rgba(103,232,249,.5)!important;box-shadow:0 17px 30px rgba(0,0,0,.34),0 0 20px rgba(34,211,238,.08)}
#view-getnumber .stat small{color:#9daac7;font-size:9px;letter-spacing:.55px}
#view-getnumber .stat b{color:#f8fbff;font-size:21px;font-variant-numeric:tabular-nums}
#view-getnumber .stat:nth-child(2) b{color:#a7f3d0}
#view-getnumber .stat:nth-child(3) b{color:#67e8f9}
#view-getnumber .stat:nth-child(4) b{color:#fda4af}
#view-getnumber .stat .icon{width:39px;height:39px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.055)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#view-getnumber .stat .i-blue{color:#67e8f9}
#view-getnumber .stat .i-green{color:#86efac}
#view-getnumber .stat .i-orange{color:#fcd34d}
#view-getnumber .range-card{
  position:relative;isolation:isolate;overflow:hidden;margin-top:0;padding:16px;
  border:1px solid rgba(125,211,252,.32);border-radius:22px;
  background:linear-gradient(145deg,rgba(24,29,52,.98),rgba(12,15,31,.99));
  box-shadow:0 20px 42px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.09);
  animation:npg-enter .55s .12s both;
}
#view-getnumber .range-card:before{
  height:3px;background:linear-gradient(90deg,#a3e635,#22d3ee,#8b5cf6,#a3e635);
  background-size:240% 100%;animation:npg-ribbon 7s linear infinite;
  box-shadow:0 0 20px rgba(34,211,238,.3)
}
#view-getnumber .range-title{color:#67e8f9;font-size:16px;letter-spacing:.15px;margin:0 0 12px}
#view-getnumber .range-input{
  min-height:56px;padding:14px 12px;border:1px solid rgba(148,163,184,.32);
  background:linear-gradient(145deg,#11172c,#0b1022);color:#f8fbff;
  border-radius:15px;font-size:19px;letter-spacing:2px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.3),0 5px 14px rgba(0,0,0,.15);
  transition:border-color .2s,box-shadow .2s,transform .2s
}
#view-getnumber .range-input:focus{border-color:#67e8f9;box-shadow:0 0 0 3px rgba(34,211,238,.14),0 0 24px rgba(34,211,238,.13);transform:translateY(-1px)}
#view-getnumber .range-input::placeholder{color:#7582a0}
#view-getnumber .range-card label{color:#c2cbe0!important;font-size:12px!important}
#view-getnumber .range-card input[type="checkbox"]{width:17px;height:17px;accent-color:#a3e635}
#view-getnumber .btn-get{
  position:relative;isolation:isolate;overflow:hidden;min-height:58px;margin-top:12px;
  border:1px solid rgba(255,255,255,.5);border-radius:16px;
  color:#07111d;background:linear-gradient(105deg,#b8f34a 0%,#39e7d1 34%,#32c8ff 67%,#b69cff 100%)!important;
  background-size:220% 100%;box-shadow:0 12px 28px rgba(34,211,238,.22),0 0 25px rgba(163,230,53,.11);
  font-size:16px;letter-spacing:.45px;text-shadow:0 1px 0 rgba(255,255,255,.28);
  animation:npg-button-flow 6s ease-in-out infinite;
  transition:transform .18s,filter .18s,box-shadow .18s
}
#view-getnumber .btn-get:before{
  content:"";position:absolute;z-index:-1;inset:-40% auto -40% -35%;width:28%;
  transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:npg-sweep 4.8s ease-in-out infinite
}
#view-getnumber .btn-get:hover{transform:translateY(-2px);filter:saturate(1.12);box-shadow:0 16px 34px rgba(34,211,238,.3),0 0 28px rgba(163,230,53,.14)}
#view-getnumber .btn-get:active{transform:translateY(1px) scale(.99)}
#view-getnumber .btn-get:focus-visible{outline:3px solid rgba(103,232,249,.55);outline-offset:3px}
#view-getnumber .btn-get.busy{color:#fff;background:linear-gradient(105deg,#fb7185,#f97316,#a855f7)!important;box-shadow:0 12px 28px rgba(244,63,94,.25);animation:npg-busy 1.2s ease-in-out infinite}
#view-getnumber .btn-get.busy:before{animation-duration:1.4s}
#view-getnumber .white-card{
  color:#e9f0ff;border:1px solid rgba(125,211,252,.19);border-radius:21px;
  background:linear-gradient(145deg,rgba(20,25,46,.98),rgba(11,14,29,.99));
  box-shadow:0 17px 36px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.06);
  animation:npg-enter .55s .2s both
}
#view-getnumber .list-tools{align-items:center;gap:8px}
#view-getnumber .sel{
  min-height:43px;color:#eaf2ff;background:#11172c;border:1px solid rgba(125,211,252,.24);
  border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);outline:none
}
#view-getnumber .sel:focus{border-color:#67e8f9;box-shadow:0 0 0 3px rgba(34,211,238,.12)}
#view-getnumber .sel option{color:#eaf2ff;background:#11172c}
#view-getnumber .btn-ref{
  min-height:43px;color:#67e8f9;background:rgba(34,211,238,.07);
  border:1px solid rgba(103,232,249,.42);border-radius:13px;
  box-shadow:0 5px 14px rgba(0,0,0,.18);transition:transform .18s,background .18s
}
#view-getnumber .btn-ref:hover{transform:translateY(-2px);background:rgba(34,211,238,.13)}
#view-getnumber .thead{color:#8e9bb7;font-size:9px;letter-spacing:.35px}
#view-getnumber .row{
  color:#edf4ff;background:rgba(18,23,43,.9);border:1px solid rgba(148,163,184,.17);
  border-left:3px solid #a3e635;border-radius:16px;padding:11px 9px;
  box-shadow:0 9px 20px rgba(0,0,0,.18);transition:transform .2s,border-color .2s,box-shadow .2s
}
#view-getnumber .row:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(0,0,0,.28)}
#view-getnumber .row.pending{background:linear-gradient(115deg,rgba(51,40,18,.66),rgba(18,23,43,.96));border-left-color:#fbbf24}
#view-getnumber .row.success{background:linear-gradient(115deg,rgba(10,51,42,.58),rgba(18,23,43,.96));border-left-color:#4ade80}
#view-getnumber .row.canceled{background:linear-gradient(115deg,rgba(63,23,43,.64),rgba(18,23,43,.96));border-left-color:#fb7185}
#view-getnumber .row b,#view-getnumber .row strong{color:#f8fbff}
#view-getnumber .row small{color:#aab6ce}
#view-getnumber .timer{color:#a5f3fc;background:#0d1528;border-color:rgba(103,232,249,.3)}
#view-getnumber .timer.exp{color:#fda4af;background:#27111e;border-color:rgba(251,113,133,.4)}
#view-getnumber .timer.ago{color:#cbd5e1;background:#141a2c;border-color:rgba(148,163,184,.2)}
#view-getnumber .otp-box{color:#07111d;background:linear-gradient(135deg,#a3f7d3,#67e8f9);border-color:#67e8f9;box-shadow:0 0 18px rgba(34,211,238,.15)}
#view-getnumber .otp-box.copied{color:#052e16;background:linear-gradient(135deg,#bbf7d0,#86efac);border-color:#86efac}
#view-getnumber .otp-wait-box{color:#b7c3da;background:rgba(15,23,42,.62);border-color:rgba(148,163,184,.35)}
#view-getnumber .otp-na-box{color:#fda4af;background:rgba(127,29,29,.22);border-color:rgba(251,113,133,.3)}
#view-getnumber .badge-pending{color:#fde68a;background:rgba(120,53,15,.28);border-color:rgba(251,191,36,.35)}
#view-getnumber .st-success{color:#86efac;background:rgba(20,83,45,.3);border-color:rgba(74,222,128,.32)}
#view-getnumber .st-canceled{color:#fda4af;background:rgba(136,19,55,.28);border-color:rgba(251,113,133,.34)}
#view-getnumber .foot-tools{gap:8px}
#view-getnumber #pageSize,#view-getnumber #dateFilter{
  color:#eaf2ff!important;background:#11172c!important;border:1px solid rgba(125,211,252,.22)!important;
  border-radius:12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}
#view-getnumber #pageSize option{color:#eaf2ff;background:#11172c}
body:has(#view-getnumber[style*="display: block"]) .np-foot{
  color:#9eabc5;background:rgba(8,10,24,.97);border-top-color:rgba(125,211,252,.17);
  box-shadow:0 -8px 24px rgba(0,0,0,.3)
}
body:has(#view-getnumber[style*="display: block"]) .np-foot .links{color:#d5def0}
body:has(#view-getnumber[style*="display: block"]) .np-foot a{color:#67e8f9}
@keyframes npg-enter{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
@keyframes npg-ribbon{to{background-position:240% 0}}
@keyframes npg-button-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes npg-sweep{0%,68%{left:-35%;opacity:0}74%{opacity:.85}100%{left:125%;opacity:0}}
@keyframes npg-busy{0%,100%{filter:saturate(1);box-shadow:0 12px 28px rgba(244,63,94,.22)}50%{filter:saturate(1.25);box-shadow:0 14px 32px rgba(244,63,94,.34)}}
@media(min-width:760px){
  #appShell:has(#view-getnumber[style*="display: block"]) .container{max-width:1160px;padding:24px 30px 96px}
  #view-getnumber .stat{padding:17px 16px;border-radius:20px}
  #view-getnumber .stat b{font-size:25px}
  #view-getnumber .range-card{padding:24px;border-radius:25px}
  #view-getnumber .range-title{font-size:20px}
  #view-getnumber .range-input{font-size:23px;min-height:64px}
  #view-getnumber .btn-get{min-height:64px;font-size:18px}
  #view-getnumber .white-card{padding:20px}
  #view-getnumber .row{padding:13px 14px}
}
@media(max-width:380px){
  #appShell:has(#view-getnumber[style*="display: block"]) .container{padding-left:11px;padding-right:11px}
  #view-getnumber .stat{gap:8px;padding:11px 8px}
  #view-getnumber .stat .icon{width:34px;height:34px}
  #view-getnumber .stat small{font-size:8px}
  #view-getnumber .stat b{font-size:19px}
  #view-getnumber .range-card{padding:13px}
  #view-getnumber .range-input{font-size:17px}
  #view-getnumber .row{grid-template-columns:minmax(0,1.35fr) minmax(58px,.8fr) minmax(58px,.7fr);gap:4px;padding:9px 7px}
}
@media(prefers-reduced-motion:reduce){
  #view-getnumber .stat,#view-getnumber .range-card,#view-getnumber .white-card,
  #view-getnumber .range-card:before,#view-getnumber .btn-get,#view-getnumber .btn-get:before{
    animation:none!important;transition:none!important
  }
}