/* NP NETWORK — Get Number box polish, inspired by the user-selected light mockup.
   Box-only styling: preserve the existing page layout, controls and white canvas. */
#view-getnumber .stat,
#view-getnumber .range-card,
#view-getnumber .white-card{
  border:1px solid #e7edf4!important;
  border-radius:19px!important;
  background:linear-gradient(160deg,#fff 0%,#fbfdff 100%)!important;
  box-shadow:0 7px 20px rgba(25,45,75,.075),0 2px 5px rgba(25,45,75,.035),inset 0 1px 0 rgba(255,255,255,.95)!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;
}
#view-getnumber .stat{
  position:relative;overflow:hidden;
  animation:npgn-box-in .42s cubic-bezier(.2,.8,.2,1) 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;background:linear-gradient(155deg,#fff 0%,#fff8f8 100%)!important;border-color:#f3e2e5!important}
#view-getnumber .stat:nth-child(2){background:linear-gradient(155deg,#fff 0%,#f5fcf8 100%)!important;border-color:#e0f0e7!important}
#view-getnumber .stat:hover,
#view-getnumber .range-card:hover,
#view-getnumber .white-card:hover{
  transform:translateY(-2px);
  border-color:#d4e8ed!important;
  box-shadow:0 12px 26px rgba(25,45,75,.105),0 3px 8px rgba(25,45,75,.045),inset 0 1px 0 rgba(255,255,255,.98)!important;
}
#view-getnumber .stat .icon{
  border:1px solid rgba(85,126,160,.08)!important;
  border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 8px rgba(30,60,90,.045);
}
#view-getnumber .stat:nth-child(1) .icon{background:#f0f5ff!important}
#view-getnumber .stat:nth-child(2) .icon{background:#eaf8f0!important}
#view-getnumber .stat:nth-child(3) .icon{background:#fff8e8!important}
#view-getnumber .stat:nth-child(4) .icon{background:#fff0f1!important}
#view-getnumber .stat b{color:#18334d;font-variant-numeric:tabular-nums}
#view-getnumber .stat:nth-child(2) b{color:#14945e}
#view-getnumber .stat:nth-child(4) b{color:#c34c5c}
#view-getnumber .range-card{
  position:relative;overflow:hidden;
  padding:17px;
  animation:npgn-box-in .48s .12s cubic-bezier(.2,.8,.2,1) both;
}
#view-getnumber .range-title{color:#2293b3}
#view-getnumber .range-input{
  border:1px solid #dfe6ee!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#fbfcfe,#f5f7fa)!important;
  color:#18334d!important;
  box-shadow:inset 0 1px 2px rgba(25,45,75,.025)!important;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
#view-getnumber .range-input:focus{
  border-color:#71c9ce!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(35,166,171,.12),0 5px 14px rgba(35,120,150,.07)!important;
}
#view-getnumber .btn-get{
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:15px!important;
  background:linear-gradient(110deg,#08a65e 0%,#12ba69 52%,#0aa65d 100%)!important;
  background-size:180% 100%;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(9,166,93,.19),inset 0 1px 0 rgba(255,255,255,.24)!important;
  transition:transform .18s,box-shadow .18s,filter .18s;
}
#view-getnumber .btn-get:hover{
  transform:translateY(-2px);
  filter:saturate(1.04);
  box-shadow:0 12px 23px rgba(9,166,93,.24),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
#view-getnumber .btn-get:active{transform:translateY(1px) scale(.995)}
#view-getnumber .btn-get:focus-visible{outline:3px solid rgba(16,185,129,.25);outline-offset:3px}
#view-getnumber .range-card label{color:#4c5f6d!important}
#view-getnumber .range-card input[type="checkbox"]{accent-color:#12a966}
#view-getnumber .white-card{
  padding:14px;
  animation:npgn-box-in .5s .18s cubic-bezier(.2,.8,.2,1) both;
}
#view-getnumber .sel,
#view-getnumber #pageSize,
#view-getnumber #dateFilter{
  border:1px solid #dfe6ee!important;
  border-radius:13px!important;
  background-color:#fbfcfe!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
  transition:border-color .18s,box-shadow .18s,background-color .18s;
}
#view-getnumber .sel:focus,
#view-getnumber #pageSize:focus,
#view-getnumber #dateFilter:focus{
  border-color:#74c8d0!important;
  background-color:#fff!important;
  box-shadow:0 0 0 3px rgba(35,166,171,.1)!important;
}
#view-getnumber .btn-ref{
  border-radius:13px!important;
  color:#2293b3!important;
  border:1px solid #8bcbd2!important;
  background:linear-gradient(180deg,#fff,#f8fcfd)!important;
  box-shadow:0 3px 8px rgba(35,120,150,.055)!important;
  transition:transform .18s,box-shadow .18s,background .18s;
}
#view-getnumber .btn-ref:hover{transform:translateY(-1px);box-shadow:0 6px 12px rgba(35,120,150,.1)!important;background:#f4fbfc!important}
#view-getnumber .thead{color:#6b7e8e}
#view-getnumber .row{
  border:1px solid #e7edf2!important;
  border-left-width:3px!important;
  border-radius:17px!important;
  background:linear-gradient(140deg,#fff,#fbfdff)!important;
  box-shadow:0 4px 11px rgba(25,45,75,.055)!important;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
#view-getnumber .row:hover{transform:translateY(-2px);box-shadow:0 9px 18px rgba(25,45,75,.085)!important}
#view-getnumber .row.pending{border-left-color:#e7ad35!important;background:linear-gradient(120deg,#fffdf6,#fff9e9)!important}
#view-getnumber .row.success{border-left-color:#20a86b!important;background:linear-gradient(120deg,#fbfffc,#eefaf3)!important}
#view-getnumber .row.canceled{border-left-color:#df6b7d!important;background:linear-gradient(120deg,#fffafb,#fff0f2)!important}
#view-getnumber .row b,#view-getnumber .row strong{color:#1b3245}
#view-getnumber .row small{color:#647687}
#view-getnumber .timer{border-radius:11px!important;box-shadow:0 2px 5px rgba(30,60,90,.04)}
#view-getnumber .badge-pending,
#view-getnumber .st-success,
#view-getnumber .st-canceled,
#view-getnumber .otp-wait-box,
#view-getnumber .otp-na-box{border-radius:999px!important}
@keyframes npgn-box-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:380px){
  #view-getnumber .range-card{padding:14px}
  #view-getnumber .white-card{padding:11px}
  #view-getnumber .stat{border-radius:17px!important}
  #view-getnumber .row{border-radius:15px!important}
}
@media(prefers-reduced-motion:reduce){
  #view-getnumber .stat,#view-getnumber .range-card,#view-getnumber .white-card,
  #view-getnumber .btn-get,#view-getnumber .btn-ref,#view-getnumber .row,
  #view-getnumber .range-input,#view-getnumber .sel,#view-getnumber #pageSize,#view-getnumber #dateFilter{
    animation:none!important;transition:none!important
  }
}