:root{
  --auth3d-ink:#202235;
  --auth3d-muted:#6f7282;
  --auth3d-teal:#087a72;
  --auth3d-teal-dark:#064f55;
  --auth3d-orange:#ff7a18;
  --auth3d-orange-dark:#e85207;
  --auth3d-cream:#fff8ef;
  --auth3d-line:#d8ece7;
}
html,body{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  position:fixed!important;
  inset:0!important;
  background:
    radial-gradient(circle at 18% -10%,rgba(255,184,110,.35),transparent 33%),
    radial-gradient(circle at 92% 14%,rgba(8,126,116,.22),transparent 34%),
    linear-gradient(155deg,#f6fbf8 0%,#fff7ee 48%,#ecf8f4 100%)!important;
  color:var(--auth3d-ink)!important;
}
body{
  align-items:stretch!important;
  justify-content:center!important;
  font-family:"Space Grotesk",sans-serif!important;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(8,122,114,.045) 0 1px,transparent 1px 28px),
    linear-gradient(45deg,rgba(255,122,24,.035) 0 1px,transparent 1px 30px);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 82%);
  z-index:0;
}
.blob,.stars,.bottom-bar{
  display:none!important;
}
.login-container,
.register-container,
.forgot-container{
  width:100%!important;
  max-width:430px!important;
  min-height:0!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  row-gap:clamp(8px,1.5dvh,14px)!important;
  align-content:stretch!important;
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
  padding:0 clamp(8px,2.6vw,14px)!important;
  overflow:hidden!important;
}
.hero{
  position:relative!important;
  flex:0 0 auto!important;
  height:clamp(96px,18dvh,126px)!important;
  margin:clamp(6px,1.5dvh,14px) 0 0!important;
  padding:
    max(10px,env(safe-area-inset-top,0px))
    clamp(12px,3.5vw,18px)
    10px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:0 0 32px 32px!important;
  background:
    radial-gradient(circle at 18% 4%,rgba(255,255,255,.45),transparent 30%),
    linear-gradient(145deg,#0a4d52 0%,#0a897d 58%,#f5a33a 145%)!important;
  box-shadow:
    0 9px 0 rgba(238,181,126,.58),
    0 24px 42px rgba(18,85,82,.24),
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -18px 30px rgba(0,0,0,.12)!important;
  overflow:hidden!important;
}
.login-container .hero,
.register-container .hero,
.forgot-container .hero{
  align-self:start!important;
}
.hero::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:8px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
}
.logo-wrap{
  width:clamp(44px,13vw,62px)!important
  height:clamp(44px,13vw,62px)!important
  flex:0 0 clamp(44px,13vw,62px)!important
  margin:0 auto clamp(4px,.8dvh,7px)!important
  border:4px solid rgba(255,255,255,.86)!important
  border-radius:20px!important
  background:
    radial-gradient(circle at 32% 18%,rgba(255,255,255,.55),transparent 22%),
    linear-gradient(145deg,#ffbd62,#ff7a18 62%,#e85b0a)!important;
  box-shadow:
    0 8px 0 rgba(174,83,22,.28),
    0 20px 30px rgba(255,116,22,.30),
    inset 0 2px 0 rgba(255,255,255,.55)!important;
  animation:auth3dPop .62s cubic-bezier(.2,1.4,.35,1) both!important;
  overflow:hidden!important;
}
.logo-wrap img{
  width:100%!important;
  height:100%!important;
  border-radius:16px!important;
  object-fit:cover!important;
  display:block!important;
}
.brand-name{
  color:#fff!important;
  font-family:"Outfit",sans-serif!important;
  font-size:clamp(19px,5.6vw,27px)!important
  line-height:1!important;
  letter-spacing:.4px!important;
  text-transform:none!important;
  text-shadow:
    0 5px 0 rgba(4,61,61,.34),
    0 16px 24px rgba(0,0,0,.18)!important;
}
.brand-tag{
  margin-top:3px!important
  color:rgba(235,255,251,.86)!important;
  letter-spacing:1.4px!important;
  font-size:8px!important;
  font-weight:900!important
}
.brand-tag::before,
.brand-tag::after{
  background:rgba(222,255,249,.55)!important;
}
.online-badge{
  margin-top:4px!important;
  padding:2px 9px!important;
  font-size:8px!important;
  color:#fff!important
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.32)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.card{
  flex:none!important;
  align-self:stretch!important;
  min-height:0!important;
  height:auto!important;
  max-height:100%!important;
  margin:0!important;
  border:1px solid rgba(188,218,211,.82)!important;
  border-bottom:0!important;
  border-radius:34px 34px 0 0!important;
  background:
    radial-gradient(circle at 24% 0,rgba(255,255,255,.96),transparent 36%),
    linear-gradient(155deg,rgba(255,255,255,.94),rgba(246,255,251,.92) 58%,rgba(255,247,236,.92))!important;
  box-shadow:
    0 -7px 0 rgba(24,123,114,.12),
    0 -26px 48px rgba(28,90,86,.16),
    inset 0 2px 0 rgba(255,255,255,.94)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  overflow-y:auto!important;
  scrollbar-width:none!important;
  animation:none!important;
  transform:none!important;
}
.card::-webkit-scrollbar{display:none!important}
.card::before{
  display:block!important;
  top:0!important;
  left:18%!important;
  right:18%!important;
  height:2px!important;
  background:linear-gradient(90deg,transparent,rgba(255,122,24,.75),transparent)!important;
}
.card-handle{
  display:block!important;
  width:46px!important;
  height:5px!important;
  margin:10px auto 9px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(7,122,114,.22),rgba(255,122,24,.34))!important;
}
.card-content{
  padding:0 clamp(16px,4.6vw,24px) max(18px,env(safe-area-inset-bottom,18px))!important;
}
.tabs{
  padding:5px!important;
  margin-bottom:clamp(12px,2dvh,18px)!important;
  border:1px solid rgba(198,225,219,.88)!important;
  border-radius:19px!important;
  background:linear-gradient(145deg,#eef9f5,#fff8ef)!important;
  box-shadow:inset 0 2px 6px rgba(9,87,82,.08)!important;
}
.tab{
  min-height:clamp(36px,5.2dvh,42px)!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  color:#7b838e!important;
  font-family:"Outfit",sans-serif!important;
  letter-spacing:.4px!important;
  font-size:14px!important;
  font-weight:900!important;
  text-transform:none!important;
}
.tab.active{
  color:#fff!important;
  background:linear-gradient(145deg,#11a397,#07766f 62%,#075b60)!important;
  box-shadow:
    0 5px 0 rgba(6,79,75,.28),
    0 13px 22px rgba(8,122,114,.20),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
}
.section-title{
  color:var(--auth3d-ink)!important;
  font-family:"Outfit",sans-serif!important;
  font-size:clamp(24px,6.8vw,32px)!important;
  line-height:1.04!important;
  letter-spacing:0!important;
  text-shadow:0 8px 16px rgba(18,24,36,.10)!important;
}
.section-sub{
  color:var(--auth3d-muted)!important;
  font-size:clamp(13px,3.8vw,16px)!important;
  line-height:1.45!important;
  font-weight:800!important;
  margin-bottom:clamp(12px,2.2dvh,18px)!important;
}
.field{
  margin-bottom:clamp(10px,1.6dvh,14px)!important;
}
.field label,
.np-label,
.otp-lbl{
  color:#a04b09!important;
  font-size:10px!important;
  letter-spacing:1.1px!important;
  font-weight:900!important;
}
.input-wrap,
.np-wrap{
  filter:drop-shadow(0 10px 14px rgba(17,82,78,.08));
}
.input,
.np-input{
  min-height:clamp(46px,6.3dvh,54px)!important;
  border:1.5px solid rgba(139,203,194,.72)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#fff,#fbfffd)!important;
  color:var(--auth3d-ink)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    0 4px 0 rgba(10,126,118,.08)!important;
  font-weight:800!important;
}
.input:focus,
.np-input:focus{
  border-color:var(--auth3d-orange)!important;
  background:#fff!important;
  box-shadow:
    0 0 0 4px rgba(255,122,24,.14),
    0 7px 0 rgba(255,122,24,.12),
    inset 0 2px 0 #fff!important;
}
.input::placeholder,
.np-input::placeholder{
  color:#a5a19f!important;
  font-weight:800!important;
}
.input-icon,
.np-ico,
.icon-circle svg{
  color:var(--auth3d-orange)!important;
  stroke:var(--auth3d-orange)!important;
  opacity:1!important;
}
.row{
  margin:clamp(8px,1.4dvh,12px) 0 clamp(12px,2dvh,18px)!important;
  color:var(--auth3d-muted)!important;
}
.remember-option{
  border:1px solid rgba(255,181,109,.55)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fff,#fff7ec)!important;
  box-shadow:0 8px 16px rgba(255,122,24,.08)!important;
}
.row a,
.forgot-link,
.bottom a,
.back-link,
.otp-resend span{
  color:#d85a06!important;
}
.loginBtn,
.mainBtn,
.otp-btn,
.np-btn{
  min-height:clamp(48px,6.6dvh,54px)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.30),transparent 22%),
    linear-gradient(145deg,#ff9b1a 0%,#ff7117 48%,#e84d07 100%)!important;
  color:#fff!important;
  box-shadow:
    0 7px 0 rgba(177,72,5,.42),
    0 18px 28px rgba(255,103,18,.28),
    inset 0 2px 0 rgba(255,255,255,.34)!important;
  letter-spacing:1.4px!important;
}
.loginBtn::before,
.mainBtn::before,
.otp-btn::before,
.np-btn::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  top:0!important;
  left:-80%!important;
  width:55%!important;
  height:100%!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)!important;
  transform:skewX(-18deg)!important;
  animation:auth3dShine 3.4s infinite!important;
}
.loginBtn:active,
.mainBtn:active,
.otp-btn:active,
.np-btn:active{
  transform:translateY(3px) scale(.99)!important;
  box-shadow:
    0 3px 0 rgba(177,72,5,.42),
    0 10px 18px rgba(255,103,18,.22),
    inset 0 2px 0 rgba(255,255,255,.34)!important;
}
.divider{
  color:#969aa5!important;
  letter-spacing:1px!important;
}
.divider::before,
.divider::after{
  background:linear-gradient(90deg,transparent,rgba(8,122,114,.25),transparent)!important;
}
.bottom{
  color:#717684!important;
  font-weight:800!important;
}
.icon-circle{
  width:62px!important;
  height:62px!important;
  border:1px solid rgba(255,179,109,.65)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,#fff,#fff2df)!important;
  box-shadow:
    0 5px 0 rgba(255,122,24,.14),
    0 18px 26px rgba(255,122,24,.12),
    inset 0 2px 0 #fff!important;
}
.otp-overlay,
.np-overlay{
  background:rgba(19,27,31,.66)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.otp-modal,
.np-modal{
  max-width:360px!important;
  border:1px solid rgba(255,255,255,.48)!important;
  border-radius:28px!important;
  background:linear-gradient(155deg,#fff,#f7fffc 65%,#fff4e7)!important;
  box-shadow:
    0 9px 0 rgba(238,181,126,.42),
    0 34px 58px rgba(0,0,0,.28),
    inset 0 2px 0 #fff!important;
}
.otp-head,
.np-head{
  background:linear-gradient(145deg,#0a756e,#0b9a8f 60%,#f29a32 150%)!important;
  box-shadow:inset 0 -14px 24px rgba(0,0,0,.12)!important;
}
.otp-body,
.np-body{
  background:transparent!important;
}
.otp-icon,
.np-icon{
  border-radius:18px!important;
  background:rgba(255,255,255,.18)!important;
  border-color:rgba(255,255,255,.32)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.otp-box{
  border:1.5px solid rgba(139,203,194,.72)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#fff,#fbfffd)!important;
  color:var(--auth3d-ink)!important;
  box-shadow:0 5px 0 rgba(10,126,118,.08),inset 0 1px 0 #fff!important;
}
.otp-box:focus,
.otp-box.filled{
  border-color:var(--auth3d-orange)!important;
  box-shadow:0 0 0 4px rgba(255,122,24,.14),0 7px 0 rgba(255,122,24,.10)!important;
}
.otp-timer,
.otp-resend{
  color:var(--auth3d-muted)!important;
}
.otp-cancel,
.np-cancel{
  border-color:rgba(139,203,194,.48)!important;
  border-radius:18px!important;
  color:var(--auth3d-muted)!important;
  background:#fff!important;
}
.otp-bar,
.np-bar{
  background:linear-gradient(90deg,#0a756e,#ff7a18,#0a756e)!important;
}
.mama-splash{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 20% 0,rgba(255,184,110,.35),transparent 34%),
    radial-gradient(circle at 82% 20%,rgba(8,126,116,.28),transparent 36%),
    linear-gradient(155deg,#effaf6,#fff4e7)!important;
}
.mama-splash-card{
  width:min(78vw,310px);
  min-height:310px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px 24px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:34px;
  background:
    radial-gradient(circle at 26% 0,rgba(255,255,255,.96),transparent 38%),
    linear-gradient(145deg,#fff,#f5fffb 62%,#fff2e4);
  box-shadow:
    0 9px 0 rgba(238,181,126,.48),
    0 32px 54px rgba(18,85,82,.22),
    inset 0 2px 0 #fff;
  animation:auth3dPop .55s cubic-bezier(.2,1.35,.36,1) both;
}
.mama-splash-logo{
  width:104px;
  height:104px;
  border-radius:28px;
  border:5px solid #fff;
  box-shadow:
    0 8px 0 rgba(174,83,22,.24),
    0 22px 32px rgba(255,116,22,.26);
}
.mama-splash-title{
  margin-top:18px;
  font-family:"Outfit",sans-serif;
  font-size:36px;
  line-height:1;
  font-weight:900;
  color:var(--auth3d-ink);
  text-shadow:0 8px 16px rgba(18,24,36,.10);
}
.mama-splash-title span{color:var(--auth3d-orange)}
.mama-splash-sub{
  margin-top:8px;
  color:var(--auth3d-muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.mama-splash-bar{
  position:relative;
  width:150px;
  height:9px;
  margin-top:24px;
  border-radius:999px;
  overflow:hidden;
  background:#e7f2ef;
  box-shadow:inset 0 2px 4px rgba(8,90,84,.10);
}
.mama-splash-bar::before{
  content:"";
  position:absolute;
  inset:0;
  width:54%;
  border-radius:999px;
  background:linear-gradient(90deg,#0a8078,#ff7a18);
  animation:auth3dLoad 1.2s ease-in-out infinite;
}
.mama-splash.is-hidden{
  opacity:0;
  transform:scale(1.03);
  transition:opacity .38s ease,transform .38s ease;
}
.language-switcher{
  top:max(12px,env(safe-area-inset-top,0px))!important;
  right:14px!important;
}
.language-select{
  min-width:78px!important;
  height:38px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.52)!important;
  background:rgba(255,255,255,.82)!important;
  color:var(--auth3d-teal-dark)!important;
  box-shadow:0 10px 20px rgba(9,91,86,.12),inset 0 1px 0 #fff!important;
}
@keyframes auth3dPop{
  from{opacity:0;transform:translateY(12px) scale(.86) rotateX(12deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotateX(0)}
}
@keyframes auth3dSlide{
  from{opacity:0;transform:translateY(42px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes auth3dShine{
  0%{left:-80%}
  48%,100%{left:135%}
}
@keyframes auth3dLoad{
  0%{transform:translateX(-105%)}
  55%,100%{transform:translateX(195%)}
}
@media(max-height:700px){
  .hero{
    height:88px!important
    margin-top:6px!important;
    padding-top:max(8px,env(safe-area-inset-top,0px))!important;
    padding-bottom:8px!important;
  }
  .logo-wrap{
    width:38px!important
    height:38px!important
    flex-basis:38px!important
    border-radius:22px!important;
    margin-bottom:7px!important;
  }
  .brand-name{font-size:18px!important}
  .brand-tag,.online-badge{display:none!important}
  .login-container,
  .register-container,
  .forgot-container{row-gap:8px!important}
  .card-content{padding-top:0!important}
  .section-title{font-size:25px!important}
  .input,.np-input{min-height:48px!important}
  .loginBtn,.mainBtn,.otp-btn,.np-btn{min-height:48px!important}
}
@media(max-height:610px){
  .hero{
    height:70px!important
    border-radius:0 0 22px 22px!important;
  }
  .logo-wrap{
    width:32px!important
    height:32px!important
    flex-basis:32px!important
    border-width:3px!important;
    border-radius:15px!important;
    margin-bottom:4px!important;
  }
  .logo-wrap img{border-radius:12px!important}
  .brand-name{
    font-size:16px!important
    text-shadow:0 3px 0 rgba(4,61,61,.28),0 10px 16px rgba(0,0,0,.14)!important;
  }
  .card{
    border-radius:24px 24px 0 0!important;
  }
  .card-handle{margin:7px auto 6px!important}
  .tabs{margin-bottom:9px!important}
  .section-title{font-size:22px!important}
  .section-sub{font-size:12px!important;margin-bottom:8px!important}
  .field{margin-bottom:8px!important}
  .input,.np-input{min-height:42px!important}
  .loginBtn,.mainBtn,.otp-btn,.np-btn{min-height:44px!important}
}
@media(max-width:360px){
  .login-container,
  .register-container,
  .forgot-container{
    padding-inline:8px!important;
  }
  .hero{
    border-radius:0 0 26px 26px!important;
  }
  .card{
    border-radius:28px 28px 0 0!important;
  }
  .card-content{
    padding-inline:14px!important;
  }
  .tab{
    min-height:38px!important;
    font-size:12px!important;
  }
}

/* v5 compact auth hero and visible language selector. */
/* v7 auth hero cleanup. */
.login-container .hero,
.register-container .hero,
.forgot-container .hero{
  height:clamp(142px,22dvh,172px)!important;
  padding-top:max(12px,env(safe-area-inset-top,0px))!important;
  padding-bottom:12px!important;
  gap:5px!important;
}
.login-container .logo-wrap,
.register-container .logo-wrap,
.forgot-container .logo-wrap{
  width:clamp(54px,15vw,70px)!important;
  height:clamp(54px,15vw,70px)!important;
  flex-basis:clamp(54px,15vw,70px)!important;
  border-radius:22px!important;
  margin:0 auto 2px!important;
}
.login-container .logo-wrap img,
.register-container .logo-wrap img,
.forgot-container .logo-wrap img{
  border-radius:17px!important;
  object-fit:contain!important;
  background:#fff!important;
}
.login-container .brand-name,
.register-container .brand-name,
.forgot-container .brand-name{
  max-width:min(92%,330px)!important;
  margin-inline:auto!important;
  color:#202235!important;
  font-size:clamp(20px,5.8vw,29px)!important;
  line-height:1.05!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  text-wrap:balance!important;
  text-shadow:
    0 2px 0 rgba(255,255,255,.75),
    0 5px 0 rgba(6,87,82,.18),
    0 14px 20px rgba(20,34,40,.16)!important;
}
.login-container .brand-tag,
.register-container .brand-tag,
.forgot-container .brand-tag{
  max-width:min(90%,310px)!important;
  margin:0 auto!important;
  color:#0b6f68!important;
  font-size:clamp(8px,2.55vw,10px)!important;
  line-height:1.05!important;
  letter-spacing:1px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:0 1px 0 rgba(255,255,255,.8)!important;
}
.login-container .brand-tag::before,
.login-container .brand-tag::after,
.register-container .brand-tag::before,
.register-container .brand-tag::after,
.forgot-container .brand-tag::before,
.forgot-container .brand-tag::after{
  background:rgba(7,110,103,.38)!important;
}
.login-container .online-badge,
.register-container .online-badge,
.forgot-container .online-badge{
  font-size:8px!important;
  padding:2px 9px!important;
  margin-top:1px!important;
}
.language-switcher{
  display:none!important;
}
.language-select{
  display:block!important;
  width:auto!important;
  min-width:74px!important;
  max-width:98px!important;
  height:34px!important;
  padding:0 7px!important;
  border-radius:13px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  background:rgba(255,255,255,.92)!important;
  color:var(--auth3d-teal-dark)!important;
  font-size:10px!important;
  font-weight:900!important;
  box-shadow:0 10px 20px rgba(9,91,86,.12),inset 0 1px 0 #fff!important;
}
@media(max-height:700px){
  .login-container .hero,
  .register-container .hero,
  .forgot-container .hero{
    height:112px!important;
  }
  .login-container .brand-tag,
  .register-container .brand-tag,
  .forgot-container .brand-tag,
  .login-container .online-badge,
  .register-container .online-badge,
  .forgot-container .online-badge{
    display:none!important;
  }
}
@media(max-height:560px){
  .login-container .hero,
  .register-container .hero,
  .forgot-container .hero{
    height:86px!important;
  }
  .login-container .logo-wrap,
  .register-container .logo-wrap,
  .forgot-container .logo-wrap{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
    border-width:2px!important;
    margin-bottom:2px!important;
  }
  .login-container .brand-name,
  .register-container .brand-name,
  .forgot-container .brand-name{
    font-size:14px!important;
  }
}

/* v9 redesigned OTP and password reset dialogs. */
.otp-modal,
.np-modal{
  width:min(92vw,330px)!important;
  max-width:330px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 24% 0,rgba(255,255,255,.98),transparent 36%),
    linear-gradient(155deg,#fff,#f8fffc 64%,#fff5e9)!important;
  box-shadow:
    0 7px 0 rgba(238,181,126,.38),
    0 28px 52px rgba(0,0,0,.25),
    inset 0 2px 0 #fff!important;
}
.otp-head,
.np-head{
  padding:18px 16px 16px!important;
  background:
    radial-gradient(circle at 22% 0,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(145deg,#08716b,#0b9d91 62%,#f09a32 160%)!important;
  box-shadow:inset 0 -12px 22px rgba(0,0,0,.12)!important;
}
.otp-icon,
.np-icon{
  width:46px!important;
  height:46px!important;
  margin-bottom:8px!important;
  border-radius:18px!important;
}
.otp-title,
.np-title{
  font-size:23px!important;
  letter-spacing:.8px!important;
  text-transform:none!important;
}
.otp-sub,
.np-sub{
  font-size:9px!important;
  letter-spacing:1.7px!important;
  opacity:.9!important;
}
.otp-num{
  margin-top:8px!important;
  padding:4px 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.20)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.otp-body,
.np-body{
  padding:20px 20px 22px!important;
}
.otp-boxes{
  gap:10px!important;
  margin-bottom:18px!important;
}
.otp-box{
  width:54px!important;
  height:58px!important;
  line-height:54px!important;
  border-radius:20px!important;
  font-size:26px!important;
  box-shadow:
    0 5px 0 rgba(10,126,118,.08),
    0 13px 18px rgba(10,82,78,.08),
    inset 0 1px 0 #fff!important;
}
.otp-btn,
.np-btn{
  position:relative!important;
  overflow:hidden!important;
  margin-top:4px!important;
}
.otp-cancel,
.np-cancel{
  margin-top:14px!important;
  min-height:44px!important;
  font-weight:900!important;
}
.otp-bar,
.np-bar{
  height:3px!important;
}
@media(max-width:360px){
  .otp-modal,
  .np-modal{
    width:min(94vw,315px)!important;
  }
  .otp-body,
  .np-body{
    padding-inline:14px!important;
  }
  .otp-boxes{
    gap:8px!important;
  }
  .otp-box{
    width:46px!important;
    height:52px!important;
    line-height:48px!important;
    border-radius:17px!important;
    font-size:23px!important;
  }
}