:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#0b4edb;
  --primary2:#1d4ed8;
  --shadow:0 10px 22px rgba(15,23,42,.08);
  --radius:18px;
  --radius2:14px;
  --fw-regular:400;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
  --fw-black:900;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.isApp{overflow:hidden;overscroll-behavior:none}
a{color:inherit;text-decoration:none}

.auth{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:18px;
}
.authCard{
  width:100%;
  max-width:440px;
  background:var(--card);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.authBrand{
  padding:18px 18px 16px;
  background:linear-gradient(135deg,var(--primary2),#06b6d4);
  color:#fff;
}
.brandTitle{font-size:20px;font-weight:var(--fw-extrabold);letter-spacing:.2px}
.brandSub{opacity:.92;margin-top:2px;font-size:12px}
.authForm{padding:16px 18px 18px;display:grid;gap:12px}
.field{display:grid;gap:6px}
.fieldLabel{font-size:12px;color:var(--muted);font-weight:700}
.fieldInput{
  width:100%;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.fieldInput:focus{border-color:rgba(11,78,219,.45);box-shadow:0 0 0 4px rgba(11,78,219,.12)}

.authLogin{
  background:linear-gradient(135deg,#0c1e4a,#1e3a8a,#1e40af);
  position:relative;
  overflow:hidden;
}
.loginBg{position:absolute;inset:0;pointer-events:none}
.loginBubble{
  position:absolute;
  background:rgba(255,255,255,.09);
  border-radius:28px;
  filter: blur(0);
}
.loginBubble1{width:520px;height:120px;left:-120px;top:120px;border-radius:999px}
.loginBubble2{width:140px;height:140px;right:90px;top:150px;border-radius:34px;transform:rotate(12deg)}
.loginBubble3{width:180px;height:180px;left:120px;bottom:160px;border-radius:40px;transform:rotate(-10deg);opacity:.55}
.loginBubble4{width:80px;height:80px;right:180px;bottom:250px;border-radius:24px;opacity:.55}

.loginWrap{
  width:min(980px,100%);
  display:grid;
  place-items:center;
  position:relative;
  z-index:2;
}
.loginBrand{display:grid;place-items:center;gap:10px;margin-bottom:14px}
.loginLogo{
  width:78px;
  height:78px;
  border-radius:39px;
  background:linear-gradient(135deg,#ffffff,#f0f9ff);
  display:grid;
  place-items:center;
  box-shadow:0 18px 34px rgba(2,6,23,.28);
  position:relative;
}
.loginLogo::before{content:"";position:absolute;inset:-4px;border-radius:999px;background:rgba(255,255,255,.18);z-index:-1}
.loginLogoInner{
  width:54px;
  height:54px;
  border-radius:18px;
  background:linear-gradient(135deg,#2563eb,#0b4edb);
  display:grid;
  place-items:center;
}
.loginBrandName{color:#fff;font-size:20px;font-weight:var(--fw-black);letter-spacing:.2px;text-shadow:0 10px 22px rgba(2,6,23,.35)}

.loginCard{
  width:min(420px,calc(100% - 28px));
  background:rgba(255,255,255,.92);
  border-radius:26px;
  box-shadow:0 28px 70px rgba(2,6,23,.55);
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.loginCardTop{padding:20px 18px 10px;display:grid;gap:6px;place-items:center}
.loginCardIcon{
  width:44px;
  height:44px;
  border-radius:16px;
  background:#eef2ff;
  display:grid;
  place-items:center;
  box-shadow:0 14px 24px rgba(2,6,23,.10);
}
.loginCardTitle{margin-top:4px;font-size:18px;font-weight:var(--fw-black);letter-spacing:.2px;color:#0f172a}
.loginCardSub{font-size:12px;color:#64748b;font-weight:var(--fw-semibold);text-align:center;line-height:1.3}

.loginForm{padding:10px 18px 20px;display:grid;gap:12px}
.loginField{
  background:#ffffff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  padding:10px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-shadow:0 10px 20px rgba(15,23,42,.06);
}
.loginFieldLeft{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.loginFieldIcon{
  width:40px;
  height:40px;
  border-radius:14px;
  background:#f1f5f9;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.loginInput{
  width:100%;
  border:0;
  outline:none;
  font-size:14px;
  font-weight:var(--fw-bold);
  color:#0f172a;
  background:transparent;
}
.loginInput::placeholder{color:#94a3b8;font-weight:var(--fw-semibold)}
.loginEye{
  width:42px;
  height:42px;
  border-radius:14px;
  border:0;
  background:#f1f5f9;
  display:grid;
  place-items:center;
  cursor:pointer;
  flex:0 0 auto;
}
.loginForgot{
  justify-self:end;
  font-size:12px;
  color:#0b4edb;
  font-weight:var(--fw-extrabold);
  padding:2px 6px;
  border-radius:999px;
  background:rgba(11,78,219,.08);
}
.loginBtn{
  margin-top:6px;
  width:100%;
  border:0;
  border-radius:16px;
  padding:14px 14px;
  background:linear-gradient(135deg,#2563eb,#0b4edb);
  color:#fff;
  font-weight:var(--fw-black);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 18px 28px rgba(11,78,219,.26);
  cursor:pointer;
}
.loginBtnArrow{font-size:18px;line-height:1}

.bhHidden{display:none}

.bhShell{
  width:min(1100px,100%);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:26px;
  align-items:stretch;
  position:relative;
  z-index:2;
}

.bhLeft{
  display:flex;
  flex-direction:column;
  gap:18px;
  justify-content:center;
}

.bhBrand{
  display:flex;
  align-items:center;
  gap:14px;
}

.bhBrandTitle{
  color:#fff;
  font-size:30px;
  font-weight:var(--fw-black);
  letter-spacing:.2px;
  text-shadow:0 14px 28px rgba(2,6,23,.35);
}

.bhBrandSub{
  margin-top:4px;
  color:rgba(255,255,255,.86);
  font-size:14px;
  font-weight:var(--fw-bold);
}

.bhHeroCard{
  border-radius:26px;
  padding:20px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 50px rgba(2,6,23,.35);
  backdrop-filter:blur(10px);
}

.bhHeroTitle{
  color:#fff;
  font-size:22px;
  font-weight:var(--fw-black);
  letter-spacing:.2px;
}

.bhHeroSub{
  margin-top:8px;
  color:rgba(255,255,255,.86);
  font-size:13px;
  font-weight:var(--fw-semibold);
  line-height:18px;
}

.bhPills{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.bhPill{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:var(--fw-extrabold);
  font-size:12px;
  letter-spacing:.2px;
}

.bhRight{
  align-self:center;
}

.bhFlash{
  margin:0 18px 10px;
  border-radius:16px;
  padding:10px 12px;
  font-size:12px;
  font-weight:var(--fw-extrabold);
}

.bhFlashErr{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.22);
  color:#7f1d1d;
}

.bhFlashOk{
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.22);
  color:#052e16;
}

.bhOtpHint{
  margin:0 18px 10px;
  color:#64748b;
  font-size:12px;
  font-weight:var(--fw-bold);
}

.bhOtpMobile{
  color:#0f172a;
  font-weight:var(--fw-black);
}

.bhOtpRow{
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.bhOtpLink{
  border:0;
  background:transparent;
  color:#0b4edb;
  font-weight:var(--fw-extrabold);
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
}

.bhOtpLink[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

@media (max-width:900px){
  .bhShell{grid-template-columns:1fr;gap:14px}
  .bhLeft{display:none}
}

.app{height:100%;min-height:100%;display:flex;flex-direction:column;overflow:hidden}
.topbar{
  padding:calc(34px + env(safe-area-inset-top)) 20px 62px;
  min-height:190px;
  background-image:linear-gradient(111.306deg,rgb(9, 71, 158),rgb(2, 91, 245));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  position:relative;
  border-bottom-left-radius:34px;
  border-bottom-right-radius:34px;
  overflow:hidden;
  box-shadow:0 18px 34px rgba(2,6,23,.18);
  z-index:1;
}
.topbar::before{
  content:"";
  position:absolute;
  width:clamp(180px,56vw,260px);
  height:clamp(180px,56vw,260px);
  left:clamp(-130px,-26vw,-80px);
  top:clamp(14px,5vw,30px);
  border-radius:999px;
  background:rgba(255,255,255,.16);
  z-index:0;
  pointer-events:none;
}
.topbar::after{
  content:"";
  display:block;
  position:absolute;
  width:clamp(140px,44vw,220px);
  height:clamp(140px,44vw,220px);
  right:clamp(-120px,-22vw,-60px);
  top:clamp(-10px,2vw,14px);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  z-index:0;
  pointer-events:none;
}
.menuCircle,.headerText,.headerActions{position:relative;z-index:1}
.menuCircle{
  width:50px;
  height:50px;
  padding:0;
  border:0;
  border-radius:25px;
  background:linear-gradient(135deg,#ffffff,#f0f9ff);
  box-shadow:0 14px 24px rgba(2,6,23,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  margin:0;
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.menuCircle::before{
  display:none;
}
.headerText{
  flex:0 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:2px;
  margin:0;
  padding:0;
}
.headerSmall{
  font-weight:600;
  font-size:13px;
  line-height:16px;
  letter-spacing:.2px;
  color:rgba(219,234,254,.86);
  opacity:1;
  margin:0;
  text-transform:none;
}
.headerName{
  font-weight:800;
  font-size:clamp(18px,5.2vw,24px);
  line-height:1.08;
  letter-spacing:0;
  text-transform:none;
  display:-webkit-box;
  line-clamp:2;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.headerActions{
  display:flex;
  gap:12px;
  margin-left:auto;
}
.actionCircle{
  width:50px;
  height:50px;
  border:0;
  border-radius:25px;
  background:linear-gradient(135deg,rgba(255,255,255,0.30),rgba(255,255,255,0.15));
  box-shadow:0 14px 24px rgba(2,6,23,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}
.actionCircle::before{
  display:none;
}

.content{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0 0 90px;
  position:relative;
  z-index:2;
  flex:1;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.contentPage{padding:18px 20px 90px}
.contentPage .pageCard{margin-top:0}

.homeCard{
  padding:0 20px 24px;
}

.quick{
  display:flex;
  justify-content:space-between;
  padding:0 24px;
  margin:0 -20px 24px;
  margin-top:-30px;
  position:relative;
  z-index:3;
}
.quickItem{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.quickIcon{
  width:56px;
  height:56px;
  border-radius:20px;
  box-shadow:0 12px 22px rgba(2,6,23,.22);
  display:grid;
  place-items:center;
  margin-bottom:8px;
}
.quickGreen .quickIcon{background:#21c16b}
.quickBlue .quickIcon{background:#2f6fed}
.quickPurple .quickIcon{background:#7c3aed}
.quickOrange .quickIcon{background:#f59e0b}
.quickLabel{
  font-size:10px;
  font-weight:700;
  color:#334155;
  text-align:center;
  line-height:1.2;
  letter-spacing:.3px;
}

.bannerStrip{
  margin-top:0;
  display:flex;
  gap:0;
  overflow:auto;
  padding:0 0 8px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.bannerStrip::-webkit-scrollbar{display:none}
.bannerWrap{position:relative}
.bannerImg{
  flex:0 0 100%;
  height:200px;
  border-radius:26px;
  box-shadow:0 18px 34px rgba(2,6,23,.12);
  scroll-snap-align:start;
  position:relative;
  overflow:hidden;
}
.bannerPic{width:100%;height:100%;object-fit:cover;display:block}
.bannerCta{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  background:#16a34a;
  color:#fff;
  font-weight:800;
  letter-spacing:.6px;
  font-size:12px;
  padding:10px 16px;
  border-radius:999px;
  box-shadow:0 14px 26px rgba(22,163,74,.25);
}
.bannerDots{
  position:absolute;
  left:14px;
  bottom:12px;
  display:flex;
  gap:6px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.12);
  backdrop-filter: blur(6px);
}
.bannerDot{
  width:8px;
  height:8px;
  border-radius:4px;
  background:rgba(255,255,255,.55);
}
.bannerDot.active{background:#ffffff}

.cards{margin-top:6px;display:grid;gap:16px}
.homeSpacer{height:30px}
.dealGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dealCard{
  background:var(--card);
  border-radius:22px;
  padding:14px 12px;
  min-height:114px;
  box-shadow:0 12px 26px rgba(2,6,23,.10);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.dealOff{
  position:absolute;
  top:4px;
  right:4px;
  background:linear-gradient(135deg,#10b981,#22c55e);
  color:#fff;
  font-weight:900;
  font-size:8px;
  letter-spacing:.6px;
  padding:3px 6px;
  border-radius:8px;
  box-shadow:0 8px 14px rgba(16,185,129,.22);
}
.dealIcon{
  width:54px;
  height:54px;
  border-radius:19px;
  display:grid;
  place-items:center;
  box-shadow:0 10px 18px rgba(2,6,23,.20);
}
.dealIcon svg{width:26px;height:26px}
.dealRed{background:linear-gradient(135deg,#ef4444,#dc2626)}
.dealPurple{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.dealGreen{background:linear-gradient(135deg,#10b981,#22c55e)}
.dealTitle{
  margin:0;
  font-weight:800;
  font-size:10px;
  color:#1e293b;
  text-align:center;
  line-height:13px;
  letter-spacing:.2px;
}

.serviceGrid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  margin-bottom:24px;
}
.service{
  background:var(--card);
  width:31.5%;
  margin-bottom:14px;
  border-radius:22px;
  box-shadow:0 12px 26px rgba(2,6,23,.10);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  min-height:110px;
  position:relative;
  align-items:center;
  justify-content:center;
}
.serviceIcon{
  width:54px;
  height:54px;
  border-radius:19px;
  background:linear-gradient(135deg,#0ea5e9,#22c55e);
  display:grid;
  place-items:center;
  font-size:26px;
  color:#fff;
  box-shadow:0 10px 18px rgba(2,6,23,.20);
}
.serviceIcon svg{width:26px;height:26px}
.serviceOrange .serviceIcon{background:linear-gradient(135deg,#f59e0b,#f97316)}
.serviceCyan .serviceIcon{background:linear-gradient(135deg,#06b6d4,#0ea5e9)}
.serviceGreen2 .serviceIcon{background:linear-gradient(135deg,#10b981,#22c55e)}
.serviceBlue2 .serviceIcon{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.servicePurple2 .serviceIcon{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.serviceGray .serviceIcon{background:linear-gradient(135deg,#64748b,#475569)}
.serviceText{font-size:10px;color:#1e293b;font-weight:800;text-align:center;line-height:13px;letter-spacing:.2px}

.supportCard{
  margin-top:14px;
  background:
    radial-gradient(circle at 86% 74%, rgba(250,204,21,.55) 0 10px, transparent 11px),
    radial-gradient(circle at 92% 60%, rgba(250,204,21,.42) 0 14px, transparent 15px),
    radial-gradient(circle at 78% 52%, rgba(250,204,21,.28) 0 18px, transparent 19px),
    radial-gradient(circle at 96% 30%, rgba(255,255,255,.18) 0 70px, transparent 71px),
    linear-gradient(135deg,#f97316,#ef4444);
  color:#fff;
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:18px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  justify-content:flex-start;
  position:relative;
  overflow:hidden;
}
.supportCard::before{
  content:"";
  position:absolute;
  left:18px;
  top:18px;
  width:44px;
  height:44px;
  border-radius:22px;
  background:rgba(255,255,255,.18);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208Z%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-size:22px 22px;
  background-repeat:no-repeat;
  background-position:center;
  box-shadow:0 14px 26px rgba(0,0,0,.18);
  z-index:0;
}
.supportCard::after{
  content:"";
  position:absolute;
  width:128px;
  height:128px;
  right:10px;
  bottom:4px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20160%20160%27%20fill%3D%27none%27%3E%3Crect%20x%3D%2792%27%20y%3D%2740%27%20width%3D%2760%27%20height%3D%2780%27%20rx%3D%2722%27%20fill%3D%27rgba(255%2C255%2C255%2C0.20)%27/%3E%3Crect%20x%3D%2798%27%20y%3D%2750%27%20width%3D%2748%27%20height%3D%2766%27%20rx%3D%2716%27%20fill%3D%27%23ffffff%27/%3E%3Crect%20x%3D%27106%27%20y%3D%2758%27%20width%3D%2732%27%20height%3D%2750%27%20rx%3D%2712%27%20fill%3D%27%2322c55e%27%20opacity%3D%270.18%27/%3E%3Ccircle%20cx%3D%27122%27%20cy%3D%2783%27%20r%3D%2716%27%20fill%3D%27%2322c55e%27/%3E%3Cpath%20d%3D%27M115%2083l5%205%2011-13%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.18));
  z-index:0;
}
.supportLeft,.supportBtn{position:relative;z-index:1}
.supportLeft{max-width:76%;padding-left:56px}
.supportTitle{font-size:14px;font-weight:800}
.supportSub{margin-top:6px;font-size:12px;opacity:.92;line-height:1.35}
.supportBtn{
  background:#ffffff;
  border:0;
  color:#b45309;
  border-radius:999px;
  padding:12px 16px;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 16px 28px rgba(0,0,0,.18);
}
.supportCheck{
  width:18px;
  height:18px;
  border-radius:9px;
  background:linear-gradient(135deg,#f97316,#ef4444);
  display:grid;
  place-items:center;
  font-weight:900;
  line-height:1;
  font-size:0;
}
.supportCheck::before{
  content:"";
  width:12px;
  height:12px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.79%2019.79%200%200%201%202.08%204.18%202%202%200%200%201%204.06%202h3a2%202%200%200%201%202%201.72c.12.86.3%201.7.54%202.5a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.28-1.06a2%202%200%200%201%202.11-.45c.8.24%201.64.42%202.5.54a2%202%200%200%201%201.72%202Z%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}

.balanceCard{
  margin-top:14px;
  background:var(--card);
  border-radius:24px;
  padding:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  border:1px solid #e5e7eb;
}
.balanceHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.balanceTitle{font-size:16px;font-weight:600;color:#6b7280}
.balanceValueRow{margin-top:8px;display:flex;align-items:baseline;gap:10px}
.balanceAmount{font-size:44px;font-weight:900;letter-spacing:-.8px;color:#0f172a}
.balanceChip{
  padding:8px 14px;
  border-radius:999px;
  background:#ef4444;
  color:#ffffff;
  font-weight:800;
  font-size:14px;
  line-height:1;
}
.balanceMeta{margin-top:10px;font-size:14px;color:#9ca3af;font-weight:600}
.balancePlus{
  width:58px;
  height:58px;
  border-radius:29px;
  background:#2563eb;
  display:grid;
  place-items:center;
  box-shadow:0 14px 26px rgba(37,99,235,.28);
  flex:0 0 auto;
}
.balanceDivider{margin-top:18px;height:1px;background:#e5e7eb}
.balanceActions{margin-top:16px;display:flex;justify-content:space-around;gap:10px}
.balAction{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1}
.balActionIcon{
  width:48px;
  height:48px;
  border-radius:24px;
  background:#eff6ff;
  display:grid;
  place-items:center;
}
.balActionText{font-size:13px;font-weight:600;color:#374151;text-align:center}
.miniBtn{
  padding:10px 12px;
  border-radius:14px;
  background:#eef2ff;
  color:var(--primary);
  font-weight:800;
  font-size:12px;
}

.spotlight{
  margin-top:18px;
  background:linear-gradient(135deg,#0b1b3a,#0b2f7a,#0b1b3a);
  border-radius:30px;
  box-shadow:0 22px 50px rgba(2,6,23,.22);
  padding:18px 16px 16px;
  position:relative;
  overflow:hidden;
}
.spotlight::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(59,130,246,.22), transparent 46%),
    radial-gradient(circle at 28% 78%, rgba(124,58,237,.22), transparent 50%),
    radial-gradient(circle at 78% 82%, rgba(245,158,11,.18), transparent 52%);
  filter:blur(2px);
  opacity:.95;
}
.spotlightHeader{
  position:relative;
  z-index:1;
}
.spotlightTitle{
  font-size:28px;
  font-weight:900;
  letter-spacing:.2px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.spotlightTitle::after{
  content:"HOT";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
  box-shadow:0 16px 28px rgba(249,115,22,.22);
}
.spotlightSub{
  margin-top:6px;
  font-size:13px;
  color:rgba(255,255,255,.78);
  font-weight:700;
}
.spotGrid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  position:relative;
  z-index:1;
}
.spotItem{
  border-radius:26px;
  padding:18px 16px 54px;
  min-height:170px;
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 34px rgba(2,6,23,.22);
}
.spotItem::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.28), transparent 46%),
    radial-gradient(circle at 84% 22%, rgba(255,255,255,.16), transparent 52%),
    radial-gradient(circle at 70% 92%, rgba(255,255,255,.10), transparent 46%);
  opacity:.9;
}
.spotItem::after{
  content:"→";
  position:absolute;
  right:14px;
  bottom:14px;
  width:44px;
  height:44px;
  border-radius:22px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:18px;
  font-weight:900;
}
.spotItem:nth-child(1){background:linear-gradient(135deg,#f59e0b,#f97316)}
.spotItem:nth-child(2){background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.spotItem:nth-child(3){background:linear-gradient(135deg,#2563eb,#38bdf8)}
.spotItem:nth-child(4){background:linear-gradient(135deg,#22c55e,#10b981)}
.spotTag{
  position:absolute;
  top:14px;
  right:14px;
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.3px;
}
.spotName{
  margin-top:22px;
  font-size:22px;
  font-weight:900;
  line-height:1.1;
  color:#fff;
  letter-spacing:.2px;
  position:relative;
  z-index:1;
}
.spotDesc{
  margin-top:8px;
  font-size:13px;
  color:rgba(255,255,255,.82);
  font-weight:800;
  position:relative;
  z-index:1;
}

.footer{margin-top:18px;text-align:center}
.footerTitle{font-size:12px;font-weight:800;color:#334155;letter-spacing:.6px}
.footerFlag{margin-top:8px;font-size:28px;line-height:1}
.footerSub{margin-top:6px;font-size:12px;color:var(--muted);font-weight:700}
.footerSubStrong{color:#334155;font-weight:800}

.fab{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:999px;
  border:0;
  background:var(--primary);
  color:#fff;
  box-shadow:0 18px 34px rgba(11,78,219,.26);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:20;
}
.fab .ico{font-size:20px;font-weight:900}

.drawer{position:fixed;inset:0;display:none;z-index:30}
.drawer.open{display:block}
.drawerBackdrop{position:absolute;inset:0;background:rgba(2,6,23,.52)}
.drawerPanel{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:82%;
  max-width:360px;
  background:var(--card);
  padding:0;
  border-top-right-radius:28px;
  border-bottom-right-radius:28px;
  overflow:auto;
}
.drawerHeader{
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  color:#fff;
  padding:28px 20px 26px;
}
.drawerHeaderTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawerUserRow{display:flex;align-items:center;gap:14px;min-width:0}
.drawerAvatarWrap{position:relative;width:72px;height:72px;flex:0 0 auto}
.drawerAvatarBig{
  width:72px;
  height:72px;
  border-radius:36px;
  background:#ffffff;
  color:#6d28d9;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:30px;
  box-shadow:0 14px 26px rgba(2,6,23,.18);
}
.drawerStatusDot{
  position:absolute;
  right:6px;
  bottom:6px;
  width:14px;
  height:14px;
  border-radius:7px;
  background:#22c55e;
  border:3px solid #ffffff;
}
.drawerHeaderText{flex:1;min-width:0}
.drawerHeaderName{font-size:26px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.drawerHeaderEmail{margin-top:6px;font-size:14px;opacity:.92;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawerCloseBtn{
  width:44px;
  height:44px;
  border:0;
  border-radius:22px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:18px;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(2,6,23,.18);
}

.drawerNav{background:var(--card)}
.drawerItem{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  color:#0f172a;
  border-bottom:1px solid #f1f5f9;
}
.drawerItemSummary{cursor:pointer;list-style:none}
.drawerPolicies summary::-webkit-details-marker{display:none}
.drawerItemIconWrap{
  width:52px;
  height:52px;
  border-radius:26px;
  background:#f1f5f9;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.icoBlue{color:#2563eb}
.icoViolet{color:#7c3aed}
.icoGreen{color:#10b981}
.icoCyan{color:#06b6d4}
.icoOrange{color:#f59e0b}
.icoRed{color:#ef4444}
.drawerItemLabel{font-weight:700;font-size:16px;flex:1;min-width:0}
.drawerItemArrow{color:#94a3b8;font-size:26px;line-height:1}
.drawerItemArrowDown{font-size:20px}
.drawerPolicies{padding:0;margin:0;border-bottom:1px solid #f1f5f9}
.drawerPolicies[open] .drawerItemArrowDown{transform:rotate(180deg)}
.drawerSubItem{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px 16px 86px;
  color:#0f172a;
  border-top:1px solid #f1f5f9;
  background:#ffffff;
}
.drawerSubLabel{font-weight:600;font-size:14px;flex:1;min-width:0}

.drawerRowSimple{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  color:#0f172a;
}
.drawerIconCircle{
  width:46px;
  height:46px;
  border-radius:23px;
  display:grid;
  place-items:center;
  box-shadow:0 12px 22px rgba(2,6,23,.10);
  flex:0 0 auto;
}
.drawerIconAmber{background:radial-gradient(120% 120% at 30% 10%, #fde68a 0%, #f59e0b 60%, #d97706 100%)}
.drawerIconPink{background:radial-gradient(120% 120% at 30% 10%, #fbcfe8 0%, #f43f5e 60%, #e11d48 100%)}
.drawerIconViolet{background:radial-gradient(120% 120% at 30% 10%, #c4b5fd 0%, #7c3aed 55%, #6d28d9 100%)}
.drawerRowLabel{font-weight:var(--fw-bold);font-size:14px;flex:1;min-width:0}
.drawerRowArrow{color:#94a3b8;font-size:22px;line-height:1}

.drawerPolicies{padding:0;margin:0;border-bottom:1px solid #f1f5f9}
.drawerPolicies summary{list-style:none}
.drawerPolicies summary::-webkit-details-marker{display:none}
.drawerPoliciesSummary{cursor:pointer}
.policyBtn{
  margin:10px 16px 0;
  padding:14px 14px;
  border-radius:16px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 18px 28px rgba(2,6,23,.12);
}
.policyLeft{display:flex;align-items:center;gap:12px;min-width:0}
.policyIcon{
  width:44px;
  height:44px;
  border-radius:22px;
  background:rgba(255,255,255,.18);
  display:grid;
  place-items:center;
}
.policyText{font-weight:var(--fw-extrabold);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.policyArrow{font-size:22px;opacity:.95}
.policyBlue{background:linear-gradient(135deg,#2563eb,#0ea5e9)}
.policyGreen{background:linear-gradient(135deg,#10b981,#22c55e)}
.policyOrange{background:linear-gradient(135deg,#f59e0b,#f97316)}
.policyRed{background:linear-gradient(135deg,#ef4444,#dc2626)}

.drawerLogoutForm{padding:16px}
.logoutBtn{
  width:100%;
  border:0;
  border-radius:18px;
  padding:14px 14px;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
  font-weight:var(--fw-black);
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 18px 28px rgba(239,68,68,.25);
  cursor:pointer;
}
.logoutIcon{font-size:18px;line-height:1}

.modal{position:fixed;inset:0;display:none;z-index:40}
.modal.open{display:block}
.modalBackdrop{position:absolute;inset:0;background:rgba(2,6,23,.52)}
.modalPanel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(440px,calc(100% - 28px));
  background:var(--card);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modalTop{
  background:linear-gradient(135deg,var(--primary2),#06b6d4);
  color:#fff;
  padding:14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.iconBtn{
  width:38px;
  height:38px;
  border-radius:14px;
  border:0;
  background:rgba(255,255,255,.18);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.iconBtn .ico{font-size:16px;font-weight:900;line-height:1}
.modalTitle{font-weight:800}
.modalAmount{padding:16px 14px 8px;font-size:28px;font-weight:800}
.modalMeta{padding:0 14px 14px;font-size:12px;color:var(--muted);font-weight:700}
.modalActions{padding:0 14px 16px;display:flex;gap:10px}
.pinModalBody{padding:16px 16px 10px;display:grid;gap:12px}
.pinModalBody .field{gap:8px}
.pinModalBody .fieldLabel{font-size:12px;font-weight:800;color:#64748b}
.pinModalBody .fieldInput{border-radius:16px;background:#f8fafc}
.pinModalBtns{padding:12px 16px 16px;display:flex;gap:10px;border-top:1px solid #eef2ff;background:#fff}
.pinModalBtns .btnPrimary{width:auto;flex:1}
.pinModalBtns .btnGhost{width:auto;flex:1}

.btnPrimary{
  width:100%;
  border:0;
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  font-size:13px;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
}
.btnGhost{
  width:100%;
  border:0;
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  font-size:13px;
  background:#eef2ff;
  color:var(--primary);
  cursor:pointer;
}

.pageCard{
  background:var(--card);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:16px;
  margin-top:-22px;
}
.pageHeader{padding-bottom:12px;border-bottom:1px solid #eef2ff}
.pageTitle{font-size:16px;font-weight:800}
.pageSub{margin-top:4px;font-size:12px;color:var(--muted);font-weight:700}
.pageText{margin-top:12px;font-size:13px;color:#334155;font-weight:600;line-height:1.45}
.amPage{background:transparent;box-shadow:none;padding:0;border-radius:0;margin-top:0}
.amTop{
  margin:-18px -20px 16px;
  padding:26px 20px 26px;
  border-radius:0;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  overflow:hidden;
}
.amTop::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.18) 0 44px, transparent 45px),
    radial-gradient(circle at 12% 62%, rgba(255,255,255,.14) 0 70px, transparent 71px),
    radial-gradient(circle at 86% 42%, rgba(255,255,255,.16) 0 88px, transparent 89px);
  pointer-events:none;
}
.amBack{
  width:52px;
  height:52px;
  border-radius:26px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  position:relative;
  z-index:1;
}
.amTopText{min-width:0;flex:1;position:relative;z-index:1}
.amTopTitle{font-size:32px;font-weight:900;line-height:1.02;letter-spacing:-.2px}
.amTopSub{margin-top:8px;font-size:14px;font-weight:800;opacity:.92;max-width:220px}
.amTopBal{
  position:relative;
  z-index:1;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  padding:12px 14px;
  text-align:right;
  min-width:160px;
}
.amTopBalLabel{font-size:12px;font-weight:800;opacity:.92}
.amTopBalValue{margin-top:2px;font-size:22px;font-weight:900;letter-spacing:.2px}
.amBody{display:grid;gap:18px}
.amCard{
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:26px;
  padding:18px;
  box-shadow:0 22px 44px rgba(2,6,23,.12);
}
.amCardHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.amCardHeadLeft{display:flex;align-items:center;gap:12px;min-width:0}
.amIcon{
  width:56px;
  height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:22px;
  color:#fff;
  flex:0 0 auto;
}
.amIconGreen{background:#10b981}
.amIconBlue{background:#3b82f6}
.amCardTitle{font-weight:900;font-size:18px;color:#0f172a}
.amAmtGrid{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.amAmtBtn{
  border:0;
  background:#fff;
  border-radius:22px;
  padding:18px 16px;
  min-height:90px;
  border:1px solid #e2e8f0;
  box-shadow:0 16px 26px rgba(2,6,23,.10);
  cursor:pointer;
  text-align:left;
  position:relative;
}
.amAmtBtn.isActive{
  border-color:#2563eb;
  box-shadow:0 16px 26px rgba(37,99,235,.18);
}
.amAmtBadge{
  position:absolute;
  top:18px;
  right:16px;
  background:#f59e0b;
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:10px 14px;
  border-radius:999px;
  letter-spacing:.2px;
}
.amAmtValue{display:block;font-size:24px;font-weight:900;color:#0f172a}
.amInputWrap{
  margin-top:14px;
  background:#ffffff;
  border:2px solid #d6e1ef;
  border-radius:22px;
  padding:16px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 12px 20px rgba(2,6,23,.08);
}
.amRupee{
  width:52px;
  height:52px;
  border-radius:16px;
  background:#f1f5f9;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#334155;
  flex:0 0 auto;
}
.amAmountInput{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:16px;
  font-weight:800;
  color:#0f172a;
  padding:0;
}
.amMinMax{margin-top:10px;display:flex;justify-content:space-between;gap:12px}
.amMinMaxItem{font-size:12px;font-weight:700;color:#64748b}

.paySection{background:transparent;border:0;border-radius:0;padding:0}
.payPill{display:none}
.payList{margin-top:12px;display:grid;gap:12px}
.payOption{background:#ffffff;border:1px solid #e2e8f0;box-shadow:0 14px 26px rgba(2,6,23,.10)}
.flash{
  margin-top:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(34,197,94,.25);
  background:rgba(34,197,94,.08);
  color:#166534;
  font-weight:800;
  font-size:12px;
}
.flashError{
  border-color:rgba(239,68,68,.25);
  background:rgba(239,68,68,.08);
  color:#991b1b;
}
.adminSectionTitle{margin-top:14px;font-size:12px;font-weight:900;letter-spacing:.6px;color:#334155;text-transform:uppercase}
.adminGrid{margin-top:12px;display:grid;gap:12px}
.adminActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btnSmall{
  border:0;
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
}
.btnSmallBlue{background:#eef2ff;color:var(--primary)}
.btnSmallRed{background:rgba(239,68,68,.12);color:#b91c1c}
.adminBanners{margin-top:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.adminBannerItem{border-radius:18px;overflow:hidden;border:1px solid #eef2ff;background:#fff;box-shadow:0 10px 20px rgba(2,6,23,.06)}
.adminBannerImg{width:100%;height:120px;object-fit:cover;display:block}
.adminBannerMeta{padding:10px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.adminBannerName{font-size:11px;font-weight:900;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adminTable{margin-top:12px;border:1px solid #eef2ff;border-radius:18px;overflow:hidden;background:#fff}
.adminTableRow{display:grid;grid-template-columns:1.2fr 1.6fr .8fr .7fr .8fr;gap:10px;padding:12px 12px;border-bottom:1px solid #f1f5f9;align-items:center}
.adminTableRow:last-child{border-bottom:0}
.adminTh{font-size:11px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.5px;background:#f8fafc}
.adminTd{font-size:12px;font-weight:800;color:#0f172a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adminPill{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;background:#eef2ff;color:var(--primary);justify-content:center}
.adminPillGreen{background:rgba(34,197,94,.12);color:#166534}
.adminPillGray{background:#f1f5f9;color:#475569}
.adminShell{--admin-bg:#f0f2f8;--admin-card:#ffffff;--admin-border:#e7eaf3;--admin-text:#0f172a;--admin-muted:#64748b;--admin-primary:#4f46e5;--admin-primary2:#3730a3;--admin-accent:#6366f1;min-height:100%;display:flex;background:var(--admin-bg);color:var(--admin-text)}
.adminSidebar{width:250px;flex:0 0 auto;background:var(--admin-card);border-right:1px solid var(--admin-border);display:flex;flex-direction:column}
.adminBrand{padding:16px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,var(--admin-primary2),var(--admin-primary),var(--admin-accent));color:#fff}
.adminBrandLogo{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:0 0 auto}
.adminBrandText{display:grid;gap:2px;min-width:0}
.adminBrandName{font-size:14px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminBrandSub{font-size:11px;font-weight:800;color:rgba(255,255,255,.82)}
.adminNav{padding:10px 10px;display:grid;gap:4px}
.adminNav a{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;color:var(--admin-text);font-weight:900;font-size:12px}
.adminNav a:hover{background:rgba(79,70,229,.08)}
.adminNav a.active{background:rgba(79,70,229,.12);color:var(--admin-primary)}
.adminNavIco{width:28px;height:28px;border-radius:10px;background:#f1f5f9;display:grid;place-items:center;color:#64748b;flex:0 0 auto}
.adminNavIco svg{width:16px;height:16px}
.adminNav a.active .adminNavIco{background:rgba(79,70,229,.14);color:var(--admin-primary)}
.adminNavGroup{border-radius:12px;overflow:hidden}
.adminNavSummary{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;color:var(--admin-text);font-weight:900;font-size:12px;cursor:pointer;user-select:none}
.adminNavSummary::-webkit-details-marker{display:none}
.adminNavGroup[open]>.adminNavSummary{background:rgba(79,70,229,.12);color:var(--admin-primary)}
.adminNavGroup[open]>.adminNavSummary .adminNavIco{background:rgba(79,70,229,.14);color:var(--admin-primary)}
.adminNavChevron{margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.6}
.adminNavGroup[open] .adminNavChevron{transform:rotate(45deg)}
.adminNavSub{display:grid;gap:4px;padding:0 8px 10px 44px}
.adminNavSub a{padding:8px 10px;border-radius:10px;color:var(--admin-text);font-weight:900;font-size:12px}
.adminNavSub a:hover{background:rgba(79,70,229,.08)}
.adminNavSub a.active{background:rgba(79,70,229,.12);color:var(--admin-primary)}
.adminMain{flex:1;min-width:0;display:flex;flex-direction:column}
.adminTopbar{background:linear-gradient(90deg,var(--admin-primary2),var(--admin-primary),var(--admin-accent));padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff}
.adminTopLeft{display:flex;align-items:center;gap:10px;min-width:0}
.adminTopTitles{display:flex;flex-direction:column;gap:2px;min-width:0}
.adminTopTitle{font-size:16px;font-weight:900;color:#fff}
.adminTopCrumb{font-size:11px;font-weight:800;color:rgba(255,255,255,.86)}
.adminTopRight{display:flex;align-items:center;gap:10px}
.adminMenuBtn{display:none;border:1px solid rgba(255,255,255,.18);border-radius:14px;width:44px;height:44px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fff;cursor:pointer;place-items:center;flex:0 0 auto}
.adminMenuBtn svg{width:22px;height:22px}
.adminMenuOverlay{display:none}
.adminTopNotify{position:relative}
.adminIconBtn{border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 10px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:grid;place-items:center;position:relative}
.adminIconBtnSvg{display:grid;place-items:center}
.adminIconBtnSvg svg{width:20px;height:20px}
.adminBadge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;border-radius:999px;background:#ef4444;color:#fff;font-weight:900;font-size:10px;display:grid;place-items:center;padding:0 4px;line-height:1}
.adminDropdown{position:absolute;right:0;top:46px;width:280px;background:var(--admin-card);border:1px solid var(--admin-border);border-radius:16px;box-shadow:0 18px 34px rgba(2,6,23,.18);overflow:hidden;display:none;z-index:50}
.adminDropdown.open{display:block}
.adminDropdownTitle{padding:12px 12px;font-weight:900;font-size:12px;color:var(--admin-text);background:#f8fafc;border-bottom:1px solid var(--admin-border)}
.adminDropdownList{max-height:320px;overflow:auto}
.adminDropdownItem{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-bottom:1px solid #f1f5f9;color:var(--admin-text);font-weight:900;font-size:12px;text-decoration:none}
.adminDropdownItem:hover{background:#f8fafc}
.adminDropdownItem:last-child{border-bottom:0}
.adminDropdownItemSub{font-size:11px;font-weight:800;color:var(--admin-muted)}
.adminDDIco{width:18px;height:18px;display:grid;place-items:center;color:var(--admin-primary);margin-top:1px}
.adminDDIco svg{width:18px;height:18px}
.adminUserWrap{position:relative}
.adminUserBtn{border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;max-width:280px}
.adminUser{font-size:12px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.adminUserChevron{width:8px;height:8px;border-right:2px solid rgba(255,255,255,.86);border-bottom:2px solid rgba(255,255,255,.86);transform:rotate(45deg);margin-top:-2px;opacity:.9}
.adminDropdownUser{width:220px}
.adminDropdownBtn{border:0;background:transparent;width:100%;text-align:left;cursor:pointer}
.adminDropdownUser .adminDropdownItem{font-size:12px}
.adminContent{padding:18px 18px 28px;overflow:auto}
.adminCards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.adminCard{background:var(--admin-card);border:1px solid var(--admin-border);border-radius:18px;padding:16px;box-shadow:0 14px 30px rgba(15,23,42,.08);min-height:122px;display:flex;flex-direction:column}
.adminCardTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.adminCardLabel{font-size:10px;font-weight:900;color:var(--admin-muted);text-transform:uppercase;letter-spacing:.55px}
.adminCardCount{font-size:16px;font-weight:900;color:#16a34a}
.adminCardBottom{margin-top:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.adminCardAmount{font-size:20px;font-weight:900;color:var(--admin-text);line-height:1.1}
.adminCardLink{margin-top:8px;display:inline-flex;font-size:12px;font-weight:900;color:var(--admin-primary);text-decoration:none}
.adminCardLink:hover{text-decoration:underline}
.adminCardRound{width:46px;height:46px;border-radius:999px;background:linear-gradient(135deg,var(--admin-accent),var(--admin-primary2));display:grid;place-items:center;color:#ffffff;flex:0 0 auto}
.adminCardRound svg{width:22px;height:22px}
.adminSaleTable{margin-top:10px;border:1px solid var(--admin-border);border-radius:18px;overflow:hidden;background:var(--admin-card)}
.adminSaleHead,.adminSaleRow,.adminSaleFoot{display:grid;grid-template-columns:1.6fr .9fr .9fr .7fr;gap:10px;padding:12px 12px;align-items:center}
.adminSaleHead{background:#f8fafc;font-size:11px;font-weight:900;color:var(--admin-muted);text-transform:uppercase;letter-spacing:.5px}
.adminSaleRow{border-top:1px solid #f1f5f9}
.adminSaleFoot{border-top:1px solid #eef2ff;background:#fff;font-weight:900}
.adminSection{margin-top:18px}
.adminPanelCard{background:var(--admin-card);border:1px solid var(--admin-border);border-radius:18px;padding:16px;box-shadow:0 14px 30px rgba(15,23,42,.08)}
.profileSectionTitle{margin-top:14px;font-size:12px;font-weight:800;letter-spacing:.6px;color:#64748b;text-transform:uppercase}
.pageActions{margin-top:12px;display:grid;gap:10px}
.formGrid{margin-top:12px;display:grid;gap:12px}
.addMoneyHint{margin-top:-6px;font-size:12px;color:var(--muted);font-weight:600}
.addCoinsHead{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff7e8;border:1px solid rgba(245,158,11,.22);border-radius:18px;padding:14px 14px}
.addCoinsTitle{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;color:#b45309}
.addCoinsIco{width:42px;height:42px;border-radius:16px;background:rgba(245,158,11,.14);display:grid;place-items:center;flex:0 0 auto}
.addCoinsRate{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(245,158,11,.18);font-weight:900;font-size:12px;color:#92400e}
.addCoinsRateDot{width:8px;height:8px;border-radius:999px;background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.16)}

.coinsInfo{background:#fff7e8;border:1px solid rgba(245,158,11,.22);border-radius:18px;padding:14px 14px}
.coinsInfoTitle{font-weight:900;font-size:13px;color:#0f172a}
.coinsInfoText{margin-top:8px;font-size:12px;line-height:1.45;color:#475569;font-weight:700}
.coinsBadges{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
.coinsBadge{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(2,6,23,.10);font-weight:900;font-size:12px;color:#0f172a}
.coinsBadgeGold{border-color:rgba(245,158,11,.22);color:#92400e}
.coinsBadgeIco{font-size:13px;line-height:1}

.paySection{background:#fff;border:1px solid #eef2ff;border-radius:18px;padding:14px 14px}
.payHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.payTitle{font-weight:900;font-size:13px;color:#0f172a}
.payPill{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:#f1f5f9;border:1px solid rgba(2,6,23,.10);font-weight:900;font-size:12px;color:#334155}
.payList{margin-top:12px;display:grid;gap:10px}
.payOption{display:flex;align-items:center;gap:12px;background:#f8fafc;border:1px solid #eef2ff;border-radius:18px;padding:12px 12px;cursor:pointer}
.payRadio{position:absolute;opacity:0;pointer-events:none}
.payLogo{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto;background:#fff;border:1px solid rgba(2,6,23,.08)}
.payLogoImg{width:32px;height:32px;object-fit:contain;display:block}
.payLogoTxt{font-weight:900;font-size:12px;line-height:1;color:#0f172a}
.payLogoGpay{position:relative;overflow:hidden}
.payLogoGpay::after{content:"";position:absolute;right:-24px;top:-2px;width:48px;height:48px;border-radius:999px;background:#6D78FF}
.payLogoGpay .payLogoTxt{position:relative;z-index:1}
.payLogoPhonepe{background:#5B2AA7;border:0;color:#fff;font-weight:900;font-size:16px}
.payLogoPaytm{background:#fff;border:2px solid #1D4ED8}
.payLogoPaytm .payLogoTxt{color:#1D4ED8;font-size:11px;letter-spacing:.2px}
.payMeta{display:grid;gap:2px;min-width:0;flex:1}
.payName{font-weight:900;font-size:14px;color:#0f172a}
.paySub{font-weight:800;font-size:12px;color:#64748b}
.payCheck{width:22px;height:22px;border-radius:999px;border:2px solid rgba(2,6,23,.18);background:#fff;box-shadow:inset 0 0 0 3px #fff;flex:0 0 auto}
.payOption.isSelected,
.payOption:has(.payRadio:checked){border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.06)}
.payOption.isSelected .payCheck,
.payOption:has(.payRadio:checked) .payCheck{border-color:rgba(59,130,246,.65);background:radial-gradient(circle at 50% 50%, var(--primary) 0 55%, #fff 56% 100%)}
.pageIconCard{
  width:84px;
  height:84px;
  border-radius:24px;
  display:grid;
  place-items:center;
  box-shadow:0 14px 26px rgba(2,6,23,.12);
}
.pageIconGreen{background:#21c16b}
.chipRow{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  border:0;
  background:#eef2ff;
  color:var(--primary);
  font-weight:800;
  font-size:13px;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
}

.list{margin-top:12px;display:grid;gap:10px}
.listRow{
  background:#f8fafc;
  border:1px solid #eef2ff;
  border-radius:16px;
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.listLeft{min-width:0}
.listTitle{font-size:13px;font-weight:700}
.listSub{margin-top:4px;font-size:12px;color:var(--muted);font-weight:600}
.listRight{font-weight:700;color:#0f172a}

.qrBox{
  margin-top:12px;
  background:#f8fafc;
  border:1px solid #eef2ff;
  border-radius:22px;
  padding:16px;
  display:grid;
  place-items:center;
}
.qrInner{
  width:180px;
  height:180px;
  border-radius:18px;
  background:linear-gradient(135deg,#e0e7ff,#cffafe);
  display:grid;
  place-items:center;
  font-weight:800;
  color:var(--primary);
  letter-spacing:.8px;
}

.adminMenuOverlay{position:fixed;inset:0;background:rgba(2,6,23,.55);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s ease}

.serviceShell{min-height:100%;background:#f4f7fb}
.serviceTopbar{
  padding:calc(28px + env(safe-area-inset-top)) 18px 24px;
  background:linear-gradient(135deg,#1452d8,#2563eb);
  color:#fff;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
}
.serviceBack{
  width:46px;
  height:46px;
  border-radius:18px;
  background:rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(15,23,42,.18);
}
.serviceTopText{min-width:0}
.serviceTopTitle{font-size:27px;font-weight:var(--fw-black);line-height:1.04}
.serviceTopSub{margin-top:6px;font-size:13px;color:rgba(219,234,254,.92);font-weight:var(--fw-semibold);line-height:1.35}
.serviceTopBal{text-align:right}
.serviceTopBalLabel{font-size:12px;color:rgba(219,234,254,.9);font-weight:var(--fw-bold)}
.serviceTopBalValue{margin-top:4px;font-size:18px;font-weight:var(--fw-black)}
.serviceMain{
  width:min(760px,100%);
  margin:-12px auto 0;
  padding:0 18px 28px;
  display:grid;
  gap:16px;
}
.serviceHeroCard,.serviceCard{
  background:#fff;
  border-radius:28px;
  border:1px solid #e7edf6;
  box-shadow:0 18px 34px rgba(15,23,42,.08);
}
.serviceHeroCard{padding:18px;display:flex;align-items:center;gap:14px}
.serviceHeroIcon{
  width:60px;
  height:60px;
  border-radius:22px;
  display:grid;
  place-items:center;
  box-shadow:0 14px 26px rgba(37,99,235,.18);
  flex:0 0 auto;
}
.serviceHeroIconPhone,.serviceHeroIconBill{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.serviceHeroIconTv{background:linear-gradient(135deg,#7c3aed,#8b5cf6)}
.serviceHeroIconPlay{background:linear-gradient(135deg,#16a34a,#22c55e)}
.serviceHeroIconBolt{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.serviceHeroIconCar{background:linear-gradient(135deg,#06b6d4,#0ea5e9)}
.serviceHeroIconShield{background:linear-gradient(135deg,#10b981,#34d399)}
.serviceHeroIconDrop{background:linear-gradient(135deg,#0ea5e9,#38bdf8)}
.serviceHeroText{min-width:0}
.serviceHeroEyebrow{font-size:12px;font-weight:var(--fw-black);color:#2563eb;text-transform:uppercase;letter-spacing:.6px}
.serviceHeroTitle{margin-top:4px;font-size:20px;font-weight:var(--fw-black);color:#0f172a}
.serviceHeroSub{margin-top:6px;font-size:13px;color:#64748b;line-height:1.45;font-weight:var(--fw-semibold)}
.serviceCard{padding:18px}
.serviceCardHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.serviceCardTitle{font-size:18px;font-weight:var(--fw-black);color:#0f172a}
.serviceCardPill{
  padding:7px 12px;
  border-radius:999px;
  background:#eff6ff;
  color:#2563eb;
  font-size:12px;
  font-weight:var(--fw-black);
}
.serviceCardPillGreen{background:#ecfdf5;color:#059669}
.servicePopularRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.servicePopularChip{
  border:1px solid #d9e4fb;
  background:#f8fbff;
  color:#1d4ed8;
  border-radius:16px;
  padding:11px 10px;
  font-weight:var(--fw-black);
  font-size:13px;
}
.serviceForm{display:grid;gap:12px;margin-top:14px}
.serviceFieldInput,.serviceSelect{height:50px}
.serviceSelect{appearance:none}
.serviceStaticField{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:12px 14px;
  background:#f8fafc;
}
.serviceStaticLabel{font-size:12px;color:#64748b;font-weight:var(--fw-bold)}
.serviceStaticValue{margin-top:4px;font-size:15px;color:#0f172a;font-weight:var(--fw-black)}
.serviceSubmit{margin-top:2px}
.serviceError{margin-top:6px;font-size:12px;color:#dc2626;font-weight:var(--fw-bold)}
.serviceReviewCard{padding-top:16px}
.serviceReviewList{display:grid;gap:10px;margin-top:14px}
.serviceReviewRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:#f8fafc;
  color:#334155;
}
.serviceReviewRow strong{color:#0f172a;font-size:14px;text-align:right}
.serviceReviewHint{
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:var(--fw-bold);
  line-height:1.5;
}

.mrShell{
  min-height:100%;
  background:#eef1f6;
  height:100dvh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
}
.mrShell[data-step="1"]{background:#eef1f6}
.mrShell[data-step="2"]{background:#eef1f6}

.mrShell[data-step="2"]::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:360px;
  background:linear-gradient(135deg,#dc2626,#b91c1c);
  border-bottom-left-radius:44px;
  border-bottom-right-radius:44px;
  z-index:0;
}

.mrShell[data-step="1"] [data-step-two]{display:none}
.mrShell[data-step="2"] [data-step-one]{display:none}

.mrHeader{
  position:relative;
  padding:calc(22px + env(safe-area-inset-top)) 18px 60px;
  color:#fff;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  overflow:hidden;
  border-bottom-left-radius:44px;
  border-bottom-right-radius:44px;
  z-index:1;
}
.mrShell[data-step="1"] .mrHeader{
  background:linear-gradient(135deg,#6d28d9,#8b5cf6);
}
.mrShell[data-step="2"] .mrHeader{
  background:transparent;
  min-height:210px;
}
.mrHeader::before{
  content:"";
  position:absolute;
  width:clamp(180px, 56vw, 260px);
  height:clamp(180px, 56vw, 260px);
  left:clamp(-130px, -26vw, -80px);
  top:clamp(18px, 5vw, 34px);
  border-radius:999px;
  background:rgba(255,255,255,.18);
}
.mrHeader::after{
  content:"";
  position:absolute;
  width:clamp(140px, 44vw, 220px);
  height:clamp(140px, 44vw, 220px);
  right:clamp(-120px, -22vw, -60px);
  top:clamp(-6px, 2vw, 18px);
  border-radius:999px;
  background:rgba(255,255,255,.14);
}
.mrHeaderBack{
  width:52px;
  height:52px;
  border-radius:26px;
  background:rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  box-shadow:0 18px 34px rgba(2,6,23,.24);
  position:relative;
  z-index:1;
}
.mrHeaderCenter{min-width:0;position:relative;z-index:1}
.mrHeaderTitle{
  font-size:26px;
  font-weight:var(--fw-black);
  line-height:1.05;
}
.mrHeaderSub{
  margin-top:6px;
  font-size:13px;
  font-weight:var(--fw-bold);
  color:rgba(255,255,255,.82);
}
.mrHeaderBal{
  text-align:right;
  position:relative;
  z-index:1;
}
.mrHeaderBalLabel{
  font-size:12px;
  font-weight:var(--fw-bold);
  color:rgba(255,255,255,.78);
}
.mrHeaderBalValue{
  margin-top:2px;
  font-size:18px;
  font-weight:var(--fw-black);
}

.mrContent{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 16px 28px;
  display:grid;
  gap:18px;
  position:relative;
  z-index:1;
}
.mrShell[data-step="2"] .mrContent{
  margin:0;
}
.mrForm{display:grid;gap:18px}

.mrBanner{
  width:100%;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 22px 44px rgba(2,6,23,.18);
}
.mrBannerInner{
  height:150px;
  padding:16px 16px;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.20), transparent 48%),
    radial-gradient(circle at 88% 60%, rgba(255,255,255,.10), transparent 46%),
    linear-gradient(135deg,#b91c1c,#ef4444);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.mrBannerLeft{max-width:82%}
.mrBannerTag{
  font-size:12px;
  font-weight:var(--fw-black);
  color:#fde68a;
  letter-spacing:.6px;
}
.mrBannerTitle{
  margin-top:6px;
  font-size:14px;
  font-weight:var(--fw-black);
  color:#fff;
  letter-spacing:.6px;
}
.mrBannerSub{
  margin-top:6px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:rgba(255,255,255,.86);
}
.mrBannerHighlight{
  margin-top:8px;
  display:inline-flex;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(254,240,138,.92);
  color:#7c2d12;
  font-size:12px;
  font-weight:var(--fw-black);
  letter-spacing:.3px;
}
.mrBannerBtn{
  margin-top:10px;
  border:0;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.68);
  color:#fff;
  font-weight:var(--fw-black);
  font-size:11px;
  letter-spacing:.4px;
}
.mrBannerDots{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.mrDot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.45);
}
.mrDot.isActive{
  width:28px;
  border-radius:999px;
  background:#ffffff;
}

.mrCard{
  background:#fff;
  border-radius:26px;
  box-shadow:0 18px 36px rgba(2,6,23,.12);
  padding:18px 18px;
}
.mrCardHeadRow{
  display:flex;
  align-items:center;
  gap:12px;
}
.mrCardHeadRowSpace{justify-content:space-between}
.mrCardHeadLeft{display:flex;align-items:center;gap:12px}
.mrCardIcon{
  width:56px;
  height:56px;
  border-radius:28px;
  display:grid;
  place-items:center;
  box-shadow:0 14px 28px rgba(2,6,23,.18);
  flex:0 0 auto;
}
.mrIconPurple{background:linear-gradient(135deg,#6d28d9,#8b5cf6)}
.mrIconGreen{background:linear-gradient(135deg,#10b981,#059669)}
.mrIconBlue{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.mrCardTitleText{
  font-size:18px;
  font-weight:var(--fw-black);
  color:#0f172a;
}
.mrInputRow{
  margin-top:16px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:14px 14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.mrInputMiniIcon{
  width:38px;
  height:38px;
  border-radius:14px;
  background:#e2e8f0;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.mrInput{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:14px;
  font-weight:var(--fw-black);
  color:#0f172a;
}
.mrInput::placeholder{
  color:#94a3b8;
  font-weight:var(--fw-bold);
}
.mrStatusRow{
  margin-top:12px;
  display:flex;
  justify-content:flex-start;
}
.mrStatusPill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(79,70,229,.10);
  color:#6d28d9;
  font-weight:var(--fw-black);
  font-size:12px;
}
.mrError{
  margin-top:10px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#dc2626;
}

.mrRefresh{
  border:0;
  background:#f5f3ff;
  border-radius:16px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.mrList{
  margin-top:14px;
  display:grid;
  gap:12px;
}
.mrListItem{
  border:0;
  background:#ffffff;
  border-radius:18px;
  padding:12px 12px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  box-shadow:0 10px 22px rgba(2,6,23,.08);
  text-align:left;
}
.mrListLogo{
  width:46px;
  height:46px;
  border-radius:23px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:var(--fw-black);
  font-size:16px;
  overflow:hidden;
}
.mrListLogoImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mrListMid{min-width:0}
.mrListMobile{
  font-size:16px;
  font-weight:var(--fw-black);
  color:#0f172a;
}
.mrListMeta{
  margin-top:4px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#64748b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mrListRight{text-align:right}
.mrListAmount{
  font-size:16px;
  font-weight:var(--fw-black);
  color:#0f172a;
}
.mrListBadge{
  margin-top:6px;
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#fee2e2;
  color:#b91c1c;
  font-size:11px;
  font-weight:var(--fw-black);
  letter-spacing:.3px;
}

.mrOperatorCard{
  margin-top:0;
  border-radius:22px;
  padding:18px 18px;
  background:
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.12), transparent 46%),
    linear-gradient(135deg,#b91c1c,#ef4444);
  box-shadow:0 22px 44px rgba(2,6,23,.18);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  color:#fff;
}
.mrOperatorLogo{
  width:62px;
  height:62px;
  border-radius:31px;
  background:rgba(255,255,255,.86);
  color:#b91c1c;
  display:grid;
  place-items:center;
  font-weight:var(--fw-black);
  font-size:22px;
  box-shadow:0 18px 34px rgba(2,6,23,.18);
  overflow:hidden;
}
.mrOpImg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.mrOperatorText{min-width:0}
.mrOperatorName{
  font-size:18px;
  font-weight:var(--fw-black);
  letter-spacing:.4px;
}
.mrOperatorMobile{
  margin-top:4px;
  font-size:14px;
  font-weight:var(--fw-bold);
  color:rgba(255,255,255,.9);
}
.mrOperatorCircle{
  margin-top:4px;
  font-size:13px;
  font-weight:var(--fw-black);
  color:rgba(255,255,255,.85);
  letter-spacing:.3px;
}
.mrDetected{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.22);
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
  font-weight:var(--fw-black);
  white-space:nowrap;
}
.mrDetected.isError{
  background:rgba(15,23,42,.14);
  border-color:rgba(255,255,255,.14);
  opacity:.95;
}

.mrPlanCard{
  margin-top:16px;
  width:100%;
  border:0;
  border-radius:18px;
  padding:16px 16px;
  background:linear-gradient(135deg,#6d28d9,#8b5cf6);
  color:#fff;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  box-shadow:0 18px 34px rgba(79,70,229,.25);
  text-align:left;
  cursor:pointer;
}
.mrPlanIcon{
  width:54px;
  height:54px;
  border-radius:27px;
  background:rgba(255,255,255,.18);
  display:grid;
  place-items:center;
}
.mrPlanTitle{
  font-size:18px;
  font-weight:var(--fw-black);
}
.mrPlanSub{
  margin-top:4px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:rgba(255,255,255,.85);
  line-height:1.2;
}
.mrPlanArrow{
  width:44px;
  height:44px;
  border-radius:22px;
  background:rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  font-weight:var(--fw-black);
  font-size:18px;
}

.mrAmountInputRow{
  margin-top:16px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:14px 14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.mrRupeeBox{
  width:44px;
  height:44px;
  border-radius:14px;
  background:#e2e8f0;
  display:grid;
  place-items:center;
  font-weight:var(--fw-black);
  color:#0f172a;
  flex:0 0 auto;
}
.mrAmountInput{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-size:14px;
  font-weight:var(--fw-black);
  color:#0f172a;
}
.mrAmountInput::placeholder{
  color:#94a3b8;
  font-weight:var(--fw-bold);
}
.mrMinMax{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#64748b;
  font-weight:var(--fw-bold);
  font-size:12px;
}
.mrMinMax strong{color:#0f172a}
.mrManual{display:none;margin-top:16px}
.mrManualTitle{
  font-size:12px;
  font-weight:var(--fw-black);
  color:#64748b;
  letter-spacing:.55px;
  text-transform:uppercase;
}
.mrManualGrid{margin-top:12px;display:grid;gap:12px}

.mrPrimaryBtn{
  margin-top:18px;
  width:100%;
  border:0;
  border-radius:18px;
  padding:14px 14px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-weight:var(--fw-black);
  font-size:15px;
  box-shadow:0 18px 28px rgba(37,99,235,.26);
  cursor:pointer;
}

.mrModal{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
}
.mrModal.isOpen{display:block}
.mrModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.60);
  border:0;
  padding:0;
}
.mrModalCard{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(430px,calc(100% - 28px));
  background:#fff7ed;
  border-radius:28px;
  box-shadow:0 30px 80px rgba(2,6,23,.45);
  padding:22px 18px 18px;
  text-align:center;
}
.mrModalIcon{
  width:74px;
  height:74px;
  border-radius:37px;
  background:rgba(254,243,199,.95);
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  box-shadow:0 18px 34px rgba(245,158,11,.20);
}
.mrModalTitle{
  font-size:24px;
  font-weight:var(--fw-black);
  color:#0f172a;
}
.mrModalSub{
  margin-top:6px;
  font-size:13px;
  font-weight:var(--fw-bold);
  color:#64748b;
}
.mrModalWarn{
  margin-top:16px;
  background:#fff1f2;
  border:1px solid rgba(244,63,94,.22);
  border-radius:18px;
  padding:12px 12px;
  text-align:left;
}
.mrModalWarnRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:12px;
  font-weight:var(--fw-black);
  color:#991b1b;
  line-height:1.35;
}
.mrModalWarnIcon{
  width:22px;
  height:22px;
  border-radius:11px;
  background:rgba(244,63,94,.16);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:14px;
  font-weight:var(--fw-black);
}
.mrModalSummary{
  margin-top:16px;
  background:#ffffff;
  border-radius:18px;
  border:1px solid rgba(226,232,240,.95);
  padding:10px 14px;
  text-align:left;
}
.mrModalLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #f1f5f9;
}
.mrModalLine:last-child{border-bottom:0}
.mrModalLine span{
  font-size:14px;
  font-weight:var(--fw-bold);
  color:#64748b;
}
.mrModalLine strong{
  font-size:15px;
  font-weight:var(--fw-black);
  color:#0f172a;
}
.mrModalAmount{
  color:#059669;
  font-size:18px;
}
.mrModalActions{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:12px;
}
.mrModalBtn{
  border:0;
  border-radius:16px;
  padding:14px 14px;
  font-weight:var(--fw-black);
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.mrModalBtnGhost{
  background:#f1f5f9;
  color:#334155;
}
.mrModalBtnPay{
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;
  box-shadow:0 18px 28px rgba(16,185,129,.25);
}
.mrPayCheck{
  width:22px;
  height:22px;
  border-radius:11px;
  background:rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:var(--fw-black);
}

.mrPlanModal{
  position:fixed;
  inset:0;
  z-index:85;
  display:none;
}
.mrPlanModal.isOpen{display:block}
.mrPlanBackdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.60);
  border:0;
  padding:0;
}
.mrPlanCardShell{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  width:min(520px,calc(100% - 28px));
  max-height:min(78dvh,640px);
  background:#ffffff;
  border-radius:26px;
  box-shadow:0 30px 80px rgba(2,6,23,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.mrPlanTop{
  padding:14px 14px;
  background:linear-gradient(135deg,#6d28d9,#8b5cf6);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mrPlanTopTitle{
  font-size:16px;
  font-weight:var(--fw-black);
}
.mrPlanClose{
  width:38px;
  height:38px;
  border-radius:14px;
  border:0;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:16px;
  font-weight:var(--fw-black);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.mrPlanTabs{
  padding:12px 12px 10px;
  display:flex;
  gap:10px;
  overflow:auto;
  scrollbar-width:none;
}
.mrPlanTabs::-webkit-scrollbar{display:none}
.mrPlanTab{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  background:#f1f5f9;
  color:#334155;
  font-weight:var(--fw-black);
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.mrPlanTab.isActive{
  background:#6d28d9;
  color:#fff;
}
.mrPlanList{
  padding:10px 12px 14px;
  overflow:auto;
  display:grid;
  gap:10px;
}
.mrPlanRow{
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:18px;
  padding:12px 12px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  text-align:left;
  cursor:pointer;
}
.mrPlanRowAmt{
  font-size:18px;
  font-weight:var(--fw-black);
  color:#0f172a;
  min-width:62px;
}
.mrPlanRowDetails{
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#334155;
  line-height:1.35;
}
.mrPlanRowValidity{
  margin-top:6px;
  font-size:12px;
  font-weight:var(--fw-black);
  color:#64748b;
}
.mrPlanRowPick{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(16,185,129,.12);
  color:#047857;
  font-size:12px;
  font-weight:var(--fw-black);
}
.mrPlanEmpty{
  padding:18px 12px 24px;
  font-size:13px;
  font-weight:var(--fw-black);
  color:#64748b;
  text-align:center;
}

.mrShell[data-step="1"] [data-step-three],
.mrShell[data-step="2"] [data-step-three]{
  display:none;
}
.mrShell[data-step="3"] [data-step-one],
.mrShell[data-step="3"] [data-step-two]{
  display:none;
}

.mrShell[data-step="2"],
.mrShell[data-step="3"]{
  background:#f4f7fb;
}
.mrShell[data-step="2"]::before,
.mrShell[data-step="3"]::before{
  display:none;
}
.mrShell[data-step="2"] .mrHeader,
.mrShell[data-step="3"] .mrHeader{
  min-height:auto;
  padding:calc(20px + env(safe-area-inset-top)) 18px 18px;
  background:transparent;
  color:#111827;
  border-radius:0;
}
.mrShell[data-step="2"] .mrHeader::before,
.mrShell[data-step="2"] .mrHeader::after,
.mrShell[data-step="3"] .mrHeader::before,
.mrShell[data-step="3"] .mrHeader::after{
  display:none;
}
.mrShell[data-step="2"] .mrHeaderBack,
.mrShell[data-step="3"] .mrHeaderBack{
  width:42px;
  height:42px;
  border-radius:21px;
  background:#eaf0f7;
  box-shadow:none;
}
.mrShell[data-step="2"] .mrHeaderBack svg path,
.mrShell[data-step="3"] .mrHeaderBack svg path{
  stroke:#111827;
}
.mrShell[data-step="2"] .mrHeaderTitle,
.mrShell[data-step="3"] .mrHeaderTitle{
  font-size:18px;
  color:#111827;
  letter-spacing:-.2px;
}
.mrShell[data-step="2"] .mrHeaderSub,
.mrShell[data-step="3"] .mrHeaderSub{
  margin-top:4px;
  font-size:12px;
  color:#64748b;
  display:none;
}
.mrShell[data-step="2"] .mrHeaderBal,
.mrShell[data-step="3"] .mrHeaderBal{
  display:none;
}
.mrShell[data-step="2"] .mrContent,
.mrShell[data-step="3"] .mrContent{
  padding:0 14px 28px;
}

.mrPlanSummaryCard{
  background:#fff;
  border:1px solid #dfe6ef;
  border-radius:22px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.mrOperatorInfo{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1;
}
.mrPlanSummaryCard .mrOperatorLogo{
  width:56px;
  height:56px;
  border-radius:18px;
  background:#fff1f2;
  color:#dc2626;
  box-shadow:none;
}
.mrPlanSummaryCard .mrOperatorText{
  min-width:0;
}
.mrOperatorLabel{
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#64748b;
}
.mrPlanSummaryCard .mrOperatorMobile{
  margin-top:2px;
  font-size:15px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrOperatorMeta{
  margin-top:3px;
  display:flex;
  gap:6px;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:var(--fw-bold);
  color:#475569;
}
.mrOperatorActions{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
.mrChangeBtn{
  border:0;
  border-radius:14px;
  padding:11px 14px;
  background:#eef4ff;
  color:#315fd8;
  font-size:13px;
  font-weight:var(--fw-black);
  cursor:pointer;
}
.mrPlanSummaryCard .mrDetected{
  gap:6px;
  padding:0;
  background:transparent;
  border:0;
  color:#315fd8;
  font-size:12px;
}
.mrPlanSummaryCard .mrDetected.isError{
  color:#64748b;
  opacity:1;
}

.mrAmountSection,
.mrPlansSection,
.mrReviewCard,
.mrReviewPayCard{
  background:#fff;
  border:1px solid #dfe6ef;
  border-radius:22px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.mrAmountSection{
  padding:14px;
}
.mrSectionTitle{
  font-size:14px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrAmountInputShell{
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.mrAmountInputRow{
  margin-top:0;
  border-radius:18px;
  background:#fff;
}
.mrAmountGo{
  width:54px;
  height:54px;
  border:0;
  border-radius:18px;
  background:#eef3fa;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.mrMinMax{
  margin-top:10px;
  font-size:11px;
}

.mrPlansSection{
  padding:14px;
}
.mrSearchRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.mrSearchBox{
  min-width:0;
  height:48px;
  border-radius:16px;
  border:1px solid #dbe4ef;
  background:#eef3fa;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.mrSearchBox input{
  width:100%;
  border:0;
  background:transparent;
  outline:0;
  color:#111827;
  font-size:14px;
  font-weight:var(--fw-bold);
}
.mrSearchBox input::placeholder{
  color:#64748b;
}
.mrFilterBtn{
  width:48px;
  height:48px;
  border:0;
  border-radius:16px;
  background:#eef3fa;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.mrManual{
  display:none;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eef2f7;
}
.mrManualTitle{
  text-transform:none;
  letter-spacing:0;
  font-size:12px;
  color:#64748b;
}
.mrPlanTabsInline{
  margin-top:14px;
  display:flex;
  gap:10px;
  overflow:auto;
  scrollbar-width:none;
}
.mrPlanTabsInline::-webkit-scrollbar{
  display:none;
}
.mrPlanTabsInline .mrPlanTab{
  background:transparent;
  padding:10px 6px 12px;
  border-radius:0;
  border-bottom:2px solid transparent;
  font-size:13px;
  font-weight:var(--fw-black);
  color:#64748b;
}
.mrPlanTabsInline .mrPlanTab.isActive{
  background:transparent;
  color:#111827;
  border-bottom-color:#315fd8;
}
.mrPlanListInline{
  margin-top:10px;
  display:grid;
  gap:12px;
}
.mrPlanTile{
  width:100%;
  border:1px solid #dde5f0;
  border-radius:20px;
  background:#ffffff;
  padding:14px;
  text-align:left;
  cursor:pointer;
}
.mrPlanTile.isSelected{
  border-color:#315fd8;
  box-shadow:0 0 0 3px rgba(49,95,216,.10);
}
.mrPlanTileTop{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:flex-start;
}
.mrPlanTilePrice{
  font-size:20px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrPlanTileMeta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.mrPlanTileStat span{
  display:block;
  font-size:11px;
  font-weight:var(--fw-bold);
  color:#64748b;
}
.mrPlanTileStat strong{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrPlanTileArrow{
  color:#cbd5e1;
  font-size:26px;
  line-height:1;
  font-weight:var(--fw-black);
}
.mrPlanTileDetails{
  margin-top:10px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#475569;
  line-height:1.5;
}
.mrPlanTileFooter{
  margin-top:10px;
  display:flex;
  align-items:center;
}
.mrPlanTileLink{
  color:#315fd8;
  font-size:13px;
  font-weight:var(--fw-black);
}

.mrReviewScreen{
  display:grid;
  gap:14px;
}
.mrReviewHero{
  padding:8px 10px 2px;
  text-align:center;
}
.mrReviewLogo{
  width:96px;
  height:96px;
  border-radius:48px;
  margin:0 auto;
  background:#fff1f2;
  color:#dc2626;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 14px 30px rgba(15,23,42,.10);
}
.mrReviewOperator{
  margin-top:14px;
  font-size:16px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrReviewMobile{
  margin-top:4px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#64748b;
  letter-spacing:.5px;
}
.mrReviewAmount{
  font-size:30px;
  font-weight:var(--fw-black);
  color:#10b981;
}
.mrReviewPrices{
  margin-top:16px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:14px;
}
.mrReviewOldWrap{
  font-size:22px;
  font-weight:var(--fw-black);
  color:#94a3b8;
  text-decoration:line-through;
}
.mrReviewSaveWrap{
  margin:10px auto 0;
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:#e8f8ef;
  color:#0f8a5f;
  font-size:12px;
  font-weight:var(--fw-black);
}
.mrReviewNote{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  background:#eef4fb;
  border:1px solid #dbe7f4;
  color:#334155;
  font-size:13px;
  font-weight:var(--fw-bold);
}
.mrReviewNoteIcon{
  width:22px;
  height:22px;
  border-radius:11px;
  background:#d9e6f7;
  color:#334155;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:13px;
  font-weight:var(--fw-black);
}
.mrReviewLabel{
  padding:0 2px;
  font-size:12px;
  font-weight:var(--fw-black);
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.mrReviewCard{
  padding:16px;
}
.mrReviewIdentity{
  display:flex;
  gap:12px;
  align-items:center;
}
.mrReviewIdentityIcon{
  width:46px;
  height:46px;
  border-radius:23px;
  background:#eef3fa;
  color:#64748b;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:var(--fw-black);
}
.mrReviewIdentityValue{
  font-size:15px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrReviewIdentitySub{
  margin-top:2px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#64748b;
}
.mrReviewSplit{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #eef2f7;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.mrReviewSplitLabel{
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#64748b;
}
.mrReviewSplitValue{
  margin-top:4px;
  font-size:14px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrReviewLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid #eef2f7;
}
.mrReviewDiscountLabel{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.mrReviewDiscountLabel svg{
  color:#16a34a;
  flex:0 0 auto;
}
.mrReviewLine:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.mrReviewLine span{
  font-size:14px;
  font-weight:var(--fw-bold);
  color:#475569;
}
.mrReviewLine strong{
  font-size:15px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrReviewLineTotal strong{
  color:#111827;
  font-size:22px;
}
.mrReviewDiscount{
  background:#e8f8ef;
  border-radius:14px;
  padding:12px 12px;
  border:1px dashed rgba(16,185,129,.28);
}
.mrReviewDiscount span{
  color:#0f8a5f;
}
.mrReviewDiscount strong{
  color:#0f8a5f;
}
.mrReviewWalletToggle{
  padding:14px 0;
  border-bottom:1px solid #eef2f7;
}
.mrWalletOption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}
.mrWalletOptionLeft{
  display:flex;
  align-items:center;
  gap:12px;
}
.mrWalletCheck{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.mrWalletCheckUi{
  width:22px;
  height:22px;
  border-radius:7px;
  border:1.5px solid #cbd5e1;
  background:#fff;
  position:relative;
  flex:0 0 auto;
}
.mrWalletCheck:checked + .mrWalletCheckUi{
  background:#315fd8;
  border-color:#315fd8;
}
.mrWalletCheck:checked + .mrWalletCheckUi::after{
  content:"";
  position:absolute;
  left:7px;
  top:3px;
  width:5px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.mrWalletTitle{
  display:block;
  font-size:14px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrWalletSub{
  display:block;
  margin-top:2px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#64748b;
}
.mrWalletAmount{
  font-size:15px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrReviewPayCard{
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mrReviewPayLeft{
  display:flex;
  align-items:center;
  gap:12px;
}
.mrReviewPayIcon{
  width:44px;
  height:44px;
  border-radius:22px;
  background:linear-gradient(135deg,#facc15,#f59e0b);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:var(--fw-black);
}
.mrReviewPayTitle{
  font-size:15px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrReviewPaySub{
  margin-top:2px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#64748b;
}
.mrReviewPayCheck{
  width:28px;
  height:28px;
  border-radius:14px;
  background:#315fd8;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:var(--fw-black);
}
.mrUpiList{
  display:grid;
  gap:12px;
}
.mrUpiOption{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid #dde5f0;
  border-radius:20px;
  background:#fff;
  cursor:pointer;
}
.mrUpiRadio{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.mrUpiLogo{
  width:42px;
  height:42px;
  border-radius:21px;
  background:#fff;
  border:1px solid #e7eef8;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.mrUpiLogoImg{
  width:100%;
  height:100%;
  object-fit:contain;
}
.mrUpiLogoText{
  font-size:16px;
  font-weight:var(--fw-black);
  color:#315fd8;
}
.mrUpiMeta{
  min-width:0;
  display:grid;
}
.mrUpiName{
  font-size:15px;
  font-weight:var(--fw-black);
  color:#111827;
}
.mrUpiSub{
  margin-top:2px;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:#64748b;
}
.mrUpiCheck{
  margin-left:auto;
  width:22px;
  height:22px;
  border-radius:11px;
  border:1.5px solid #cbd5e1;
  background:#fff;
  position:relative;
  flex:0 0 auto;
}
.mrUpiRadio:checked ~ .mrUpiCheck{
  border-color:#315fd8;
  background:#315fd8;
}
.mrUpiRadio:checked ~ .mrUpiCheck::after{
  content:"";
  position:absolute;
  left:7px;
  top:3px;
  width:5px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.mrUpiRadio:checked + .mrUpiLogo + .mrUpiMeta .mrUpiName{
  color:#1d4ed8;
}
.mrUpiOption.isSelected,
.mrUpiOption:has(.mrUpiRadio:checked){
  border-color:#315fd8;
  box-shadow:0 12px 28px rgba(49,95,216,.14);
}
.mrReviewSubmit{
  width:100%;
  border:0;
  border-radius:999px;
  padding:18px 18px;
  background:linear-gradient(135deg,#315fd8,#2850c1);
  color:#fff;
  font-size:18px;
  font-weight:var(--fw-black);
  box-shadow:0 16px 30px rgba(49,95,216,.26);
  cursor:pointer;
}
.mrReviewBottom{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(244,247,251,0), rgba(244,247,251,1) 40%);
  z-index:40;
}
.mrShell[data-step="3"] .mrContent{
  padding-bottom:120px;
}

.mrModal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
}
.mrModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.56);
}
.mrModalPanel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(420px,92vw);
  background:#fff;
  border-radius:24px;
  box-shadow:0 30px 80px rgba(2,6,23,.38);
  overflow:hidden;
}
.mrModalHead{
  padding:18px 18px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e7eef8;
}
.mrModalTitle{
  font-size:16px;
  font-weight:var(--fw-black);
  color:#0f172a;
}
.mrModalClose{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid #e7eef8;
  background:#fff;
  color:#0f172a;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.mrModalBody{
  padding:16px 18px 18px;
  display:grid;
  gap:12px;
}
.mrModalSubmit{
  margin-top:6px;
  width:100%;
  border:0;
  border-radius:999px;
  padding:14px 16px;
  background:linear-gradient(135deg,#315fd8,#2850c1);
  color:#fff;
  font-size:15px;
  font-weight:var(--fw-black);
  cursor:pointer;
}
.mrModalSubmit:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

@media (max-width:900px){
  .adminMenuBtn{display:grid}
  .adminSidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:272px;max-width:86vw;transform:translateX(-110%);transition:transform .22s ease;z-index:90;box-shadow:0 24px 70px rgba(2,6,23,.28);border-right:1px solid var(--admin-border)}
  .adminShell.adminMenuOpen .adminSidebar{transform:translateX(0)}
  .adminMenuOverlay{display:block}
  .adminShell.adminMenuOpen .adminMenuOverlay{opacity:1;pointer-events:auto}
}

@media (max-width:420px){
  .mrHeader{grid-template-columns:auto 1fr;gap:12px;padding:calc(20px + env(safe-area-inset-top)) 14px 82px}
  .mrHeaderBal{grid-column:1/-1;text-align:left;padding-left:66px}
  .mrHeaderTitle{font-size:24px}
  .mrContent{padding:0 12px 24px}
  .mrCard{padding:16px 16px}
  .mrBannerInner{height:146px}
  .mrBannerLeft{max-width:94%}
  .serviceTopbar{grid-template-columns:auto 1fr;gap:12px}
  .serviceTopBal{grid-column:1/-1;text-align:left;padding-left:60px}
  .serviceTopTitle{font-size:24px}
  .serviceMain{padding:0 14px 24px}
  .servicePopularRow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serviceHeroCard,.serviceCard{border-radius:24px}
  .amTop{margin:-18px -18px 16px;padding:26px 18px 26px}
  .amTopTitle{font-size:30px}
  .amTopBal{min-width:152px}
  .amCard{border-radius:26px}
  .amAmtBtn{min-height:88px}
  .amAmtBadge{top:18px;right:14px}
  .amRupee{width:50px;height:50px}
  .topbar{padding:calc(30px + env(safe-area-inset-top)) 18px 58px;min-height:182px}
  .menuCircle{width:48px;height:48px;border-radius:14px}
  .actionCircle{width:48px;height:48px;border-radius:14px}
  .homeCard{padding:0 16px 24px}
  .quick{padding:0 18px;margin:0 -16px 24px;margin-top:-28px}
  .headerName{font-size:clamp(22px,6.6vw,28px)}
  .dealGrid{grid-template-columns:repeat(3,1fr);gap:12px}
  .serviceGrid{grid-template-columns:repeat(2,1fr)}
  .quick{gap:12px}
  .quickIcon{width:60px;height:60px}
  .dealIcon{width:70px;height:70px}
  .bannerImg{height:200px}
  .adminBanners{grid-template-columns:1fr}
  .adminTableRow{grid-template-columns:1.1fr 1.5fr .8fr .8fr .8fr}
  .adminBrand{border-radius:0}
  .adminTopbar{padding:12px 12px;gap:10px}
  .adminTopTitle{font-size:14px}
  .adminTopCrumb{display:none}
  .adminUserBtn{max-width:160px;padding:10px 10px}
  .adminUser{max-width:120px}
  .adminDropdown{width:92vw;max-width:340px}
  .adminCards{grid-template-columns:1fr}
  .adminContent{padding:14px 12px 22px}
  .adminSaleHead,.adminSaleRow,.adminSaleFoot{grid-template-columns:1.2fr .8fr .8fr .6fr}
}

@media (min-width: 900px){
  body{
    background:var(--bg);
    display:block;
    padding:0;
  }

  .app{
    width:100%;
    max-width:none;
    margin:0;
    height:100%;
    max-height:none;
    border-radius:0;
    overflow:hidden;
    box-shadow:none;
    background:var(--bg);
    position:relative;
  }

  .auth{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
  }

  .authCard{
    width:420px;
    max-width:420px;
    box-shadow:0 28px 70px rgba(2,6,23,.55);
  }

  .content{
    max-width:100%;
    margin:0;
  }

  .drawer,
  .modal{
    position:fixed;
    inset:0;
  }

  .fab{
    position:fixed;
  }
}

/* ===== Confirm Recharge modal (cream) ===== */
.mrConfirm{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.mrConfirm[hidden]{display:none}
.mrConfirmBackdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.mrConfirmPanel{position:relative;z-index:1;width:100%;max-width:360px;background:linear-gradient(180deg,#fdf3e2 0%,#fff9f0 55%,#ffffff 100%);border-radius:30px;padding:26px 22px 22px;box-shadow:0 30px 70px rgba(2,6,23,.35);text-align:center}
.mrConfirmIcon{width:72px;height:72px;margin:0 auto;border-radius:999px;background:#fde68a;color:#d97706;display:grid;place-items:center;font-size:32px;font-weight:900;font-style:italic;border:6px solid #fffbeb}
.mrConfirmTitle{margin-top:16px;font-size:24px;font-weight:900;color:#0f172a}
.mrConfirmSub{margin-top:8px;font-size:14px;color:#64748b;font-weight:600}
.mrConfirmWarn{margin-top:16px;display:flex;gap:10px;align-items:flex-start;text-align:left;background:#fff1f2;border:1px solid #fecdd3;border-radius:16px;padding:12px 14px}
.mrConfirmWarnIcon{flex:0 0 auto;width:20px;height:20px;border-radius:999px;border:1.5px solid #e11d48;color:#e11d48;display:grid;place-items:center;font-size:12px;font-weight:900;font-style:italic}
.mrConfirmWarn span:last-child{font-size:13px;line-height:1.45;color:#be123c;font-weight:700}
.mrConfirmCard{margin-top:18px;background:#ffffff;border-radius:18px;box-shadow:0 10px 24px rgba(2,6,23,.08);padding:4px 16px}
.mrConfirmRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid #f1f5f9}
.mrConfirmRow:first-child{border-top:0}
.mrConfirmRow span{font-size:14px;color:#64748b;font-weight:600}
.mrConfirmRow strong{font-size:15px;color:#0f172a;font-weight:800}
.mrConfirmAmount{color:#16a34a !important;font-size:16px !important}
.mrConfirmActions{margin-top:20px;display:flex;gap:12px}
.mrConfirmCancel{flex:1;height:52px;border-radius:16px;border:0;background:#f1f5f9;color:#334155;font-size:15px;font-weight:800;cursor:pointer}
.mrConfirmPay{flex:1.4;height:52px;border-radius:16px;border:0;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 16px 28px rgba(22,163,74,.3);cursor:pointer}
.mrConfirmPayCheck{width:20px;height:20px;border-radius:999px;border:1.6px solid rgba(255,255,255,.9);display:grid;place-items:center;font-size:12px}

/* ===== Generic service page (video card style) ===== */
.svcShell{min-height:100dvh;background:#eef1f6;overflow:auto;-webkit-overflow-scrolling:touch}
.svcHeader{position:relative;padding:calc(22px + env(safe-area-inset-top)) 18px 56px;color:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;overflow:hidden;border-bottom-left-radius:34px;border-bottom-right-radius:34px}
.svcHeader::before{content:"";position:absolute;width:clamp(160px,52vw,240px);height:clamp(160px,52vw,240px);left:clamp(-120px,-24vw,-70px);top:clamp(10px,4vw,26px);border-radius:999px;background:rgba(255,255,255,.16)}
.svcHeader::after{content:"";position:absolute;width:clamp(130px,42vw,200px);height:clamp(130px,42vw,200px);right:clamp(-110px,-20vw,-56px);top:clamp(-8px,2vw,14px);border-radius:999px;background:rgba(255,255,255,.12)}
.svcBack{width:50px;height:50px;border-radius:25px;background:rgba(255,255,255,.18);display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 14px 24px rgba(2,6,23,.22)}
.svcHeadCenter{min-width:0;position:relative;z-index:1}
.svcHeadTitle{font-size:24px;font-weight:900;line-height:1.05}
.svcHeadSub{margin-top:5px;font-size:13px;font-weight:700;color:rgba(255,255,255,.85)}
.svcHeadBal{text-align:right;position:relative;z-index:1}
.svcHeadBalLabel{font-size:12px;font-weight:700;color:rgba(255,255,255,.8)}
.svcHeadBalValue{margin-top:2px;font-size:17px;font-weight:900}
.svcMain{padding:0 16px 28px;margin-top:-26px;position:relative;z-index:1;display:grid;gap:16px}
.svcMain .serviceForm{display:grid;gap:16px}
.svcField{display:block}
.svcField + .svcField{margin-top:14px}
.svcFieldLabel{font-size:12px;font-weight:800;color:#64748b;margin-bottom:8px}
.svcInputShell{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:10px}
.svcInputShell input,.svcInputShell select{width:100%;border:0;outline:0;background:transparent;font-size:15px;font-weight:800;color:#0f172a;appearance:none}
.svcInputShell select{cursor:pointer}
.svcChips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.svcChip{border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:800;color:#334155;cursor:pointer}
.svcSubmit{margin-top:18px;width:100%;height:54px;border:0;border-radius:16px;color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 16px 28px rgba(2,6,23,.18)}
.svcStatic{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:16px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.svcStaticLabel{font-size:12px;font-weight:800;color:#64748b}
.svcStaticValue{margin-top:2px;font-size:15px;font-weight:900;color:#0f172a}
.svcError{margin-top:8px;font-size:12px;font-weight:700;color:#dc2626}
.svcReviewRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #eef2f7}
.svcReviewRow:first-child{border-top:0}
.svcReviewRow span{font-size:13px;color:#64748b;font-weight:700}
.svcReviewRow strong{font-size:15px;color:#0f172a;font-weight:800}
.svcInputShell{position:relative}
.svcInputShell:has(select)::after{content:"";position:absolute;right:16px;top:50%;width:10px;height:10px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.svcInputShell select{padding-right:20px}

/* ===== Support / How Can We Help ===== */
.pageCard.supPage{padding:0;background:transparent;box-shadow:none;border:0;overflow:visible}
.supHero{position:relative;padding:calc(20px + env(safe-area-inset-top)) 20px 26px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border-bottom-left-radius:30px;border-bottom-right-radius:30px;text-align:center;overflow:hidden}
.supBack{position:absolute;left:16px;top:calc(20px + env(safe-area-inset-top));width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.supHeroIcon{width:76px;height:76px;margin:6px auto 0;border-radius:999px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.supHeroTitle{margin-top:14px;font-size:24px;font-weight:900}
.supHeroSub{margin-top:6px;font-size:13px;font-weight:600;color:rgba(255,255,255,.86)}
.supBody{padding:18px 16px 28px;display:grid;gap:12px}
.supSectionTitle{font-size:15px;font-weight:900;color:#0f172a;margin-top:6px}
.supBig{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;color:#fff;box-shadow:0 14px 28px rgba(2,6,23,.14);text-decoration:none}
.supBigGreen{background:linear-gradient(135deg,#22c55e,#16a34a)}
.supBigBlue{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.supBigIcon{width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:0 0 auto}
.supBigText{flex:1;min-width:0}
.supBigTitle{font-size:16px;font-weight:900}
.supBigSub{margin-top:2px;font-size:12px;font-weight:600;color:rgba(255,255,255,.9)}
.supBigArrow{font-size:18px;font-weight:900;opacity:.9}
.supGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.supMini{background:#fff;border:1px solid #eef2f7;border-radius:18px;padding:16px;box-shadow:0 10px 22px rgba(2,6,23,.07);text-decoration:none;display:block}
.supMiniIcon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px}
.supMiniRed{background:#ffe4e6}
.supMiniBlue{background:#dbeafe}
.supMiniTitle{font-size:14px;font-weight:800;color:#0f172a}
.supMiniSub{margin-top:2px;font-size:12px;color:#64748b;font-weight:600}
.supFaq{background:#fff;border:1px solid #eef2f7;border-radius:18px;box-shadow:0 10px 22px rgba(2,6,23,.07);padding:4px 16px}
.supFaqRow{display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px solid #f1f5f9}
.supFaqRow:first-child{border-top:0}
.supFaqQ{width:34px;height:34px;border-radius:10px;background:#f3e8ff;display:grid;place-items:center;font-size:16px;flex:0 0 auto}
.supFaqT{font-size:14px;font-weight:800;color:#0f172a}
.supFaqS{margin-top:2px;font-size:12px;color:#64748b;font-weight:600}
.supContact{background:#0f172a;color:#fff;border-radius:22px;padding:18px;margin-top:6px}
.supContactHead{font-size:16px;font-weight:900;display:flex;align-items:center;gap:8px}
.supContactStar{color:#fbbf24}
.supContactRow{display:flex;gap:12px;align-items:center;margin-top:14px}
.supContactIco{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.10);display:grid;place-items:center;font-size:16px;flex:0 0 auto}
.supContactLbl{font-size:12px;color:rgba(255,255,255,.6);font-weight:700}
.supContactVal{margin-top:2px;font-size:14px;font-weight:800;word-break:break-all}
.supContactAddr{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;line-height:1.5;color:rgba(255,255,255,.7);font-weight:600}
.supStill{display:block;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border-radius:22px;padding:20px;text-align:center;text-decoration:none;box-shadow:0 16px 30px rgba(124,58,237,.25)}
.supStillTitle{font-size:18px;font-weight:900}
.supStillSub{margin-top:6px;font-size:13px;color:rgba(255,255,255,.86);font-weight:600}
.supStillBtn{margin-top:14px;background:#fff;color:#7c3aed;border-radius:999px;padding:12px;font-weight:900;font-size:14px}

/* ===== Hero list pages (history / commission / report) ===== */
.heroBar{position:relative;padding:calc(20px + env(safe-area-inset-top)) 20px 24px;color:#fff;display:flex;align-items:center;gap:14px;border-bottom-left-radius:28px;border-bottom-right-radius:28px;overflow:hidden}
.heroGreen{background:linear-gradient(135deg,#16a34a,#22c55e)}
.heroPurple{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.heroBlue{background:linear-gradient(135deg,#2563eb,#3b82f6)}
.heroBack{width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:0 0 auto}
.heroBarText{min-width:0}
.heroBarTitle{font-size:21px;font-weight:900;line-height:1.1}
.heroBarSub{margin-top:4px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85)}
.heroBody{padding:16px 16px 28px;display:grid;gap:14px}
.histFilters{display:flex;gap:10px;overflow:auto;scrollbar-width:none}
.histFilters::-webkit-scrollbar{display:none}
.histChip{flex:0 0 auto;border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:800;color:#475569;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.histChip.isActive{background:#16a34a;border-color:#16a34a;color:#fff}
.histChipDot{width:7px;height:7px;border-radius:999px;background:currentColor}
.emptyState{margin-top:30px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px}
.emptyIcon{width:72px;height:72px;border-radius:999px;background:#f1f5f9;display:grid;place-items:center;margin-bottom:16px}
.emptyTitle{font-size:17px;font-weight:900;color:#0f172a}
.emptySub{margin-top:6px;font-size:13px;color:#94a3b8;font-weight:600;max-width:260px;line-height:1.5}
.reportStats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.reportStat{border-radius:22px;padding:18px;color:#fff;box-shadow:0 14px 28px rgba(2,6,23,.14)}
.reportStatGreen{background:linear-gradient(135deg,#16a34a,#15803d)}
.reportStatOrange{background:linear-gradient(135deg,#f59e0b,#f97316)}
.reportStatIcon{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.22);display:grid;place-items:center;margin-bottom:14px}
.reportStatValue{font-size:26px;font-weight:900;letter-spacing:-.5px}
.reportStatPill{margin-top:10px;display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.2);font-size:10px;font-weight:900;letter-spacing:.5px}
.walletSummary{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;border-radius:20px;padding:18px;box-shadow:0 14px 28px rgba(37,99,235,.22)}
.walletSummaryIcon{width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:0 0 auto}
.walletSummaryTitle{font-size:18px;font-weight:900}
.walletSummarySub{margin-top:2px;font-size:12px;font-weight:600;color:rgba(255,255,255,.86)}
.reportList{background:#fff;border:1px solid #eef2f7;border-radius:18px;box-shadow:0 10px 22px rgba(2,6,23,.07);padding:4px 16px}
.reportRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-top:1px solid #f1f5f9}
.reportRow:first-child{border-top:0}
.reportRowL{display:flex;align-items:center;gap:10px;font-size:14px;color:#475569;font-weight:700}
.reportRow strong{font-size:15px;color:#0f172a;font-weight:800}
.reportDot{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff}
.reportDotGray{background:#cbd5e1;width:8px;height:8px}
.reportDotGreen{background:#16a34a}
.reportDotRed{background:#ef4444}

/* ===== QR Payment modal (video) ===== */
.qrModal{position:fixed;inset:0;z-index:70;display:none;align-items:flex-end;justify-content:center}
.qrModal.open{display:flex}
.qrModalBackdrop{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.qrModalPanel{position:relative;z-index:1;width:100%;max-width:430px;margin:0 12px 14px;background:linear-gradient(160deg,#3b82f6 0%,#2563eb 60%,#1d4ed8 100%);border-radius:28px;padding:26px 22px 22px;box-shadow:0 30px 70px rgba(2,6,23,.4);text-align:center;color:#fff}
@media(min-width:520px){.qrModal{align-items:center}.qrModalPanel{margin:0}}
.qrModalClose{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:999px;border:0;background:rgba(255,255,255,.22);color:#fff;font-size:20px;font-weight:800;cursor:pointer;line-height:1}
.qrModalIcon{width:74px;height:74px;margin:6px auto 0;border-radius:20px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.qrModalTitle{margin-top:14px;font-size:23px;font-weight:900}
.qrModalSub{margin-top:6px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
.qrInputShell{margin-top:20px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:14px 16px}
.qrInput{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:15px;font-weight:700}
.qrInput::placeholder{color:rgba(255,255,255,.75);font-weight:600}
.qrMinMax{margin-top:10px;display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:rgba(255,255,255,.85)}
.qrError{margin-top:10px;font-size:12px;font-weight:700;color:#fde68a;min-height:0}
.qrGenBtn{margin-top:18px;width:100%;height:54px;border:0;border-radius:16px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 14px 26px rgba(22,163,74,.32)}
.qrGenBtnAlt{background:rgba(255,255,255,.18);box-shadow:none}
.qrResultCard{margin-top:18px;background:#fff;border-radius:20px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.qrResultImg{width:220px;height:220px;border-radius:10px;background:#f1f5f9;object-fit:contain}
.qrResultAmount{font-size:26px;font-weight:900;color:#0f172a}
.qrResultVpa{font-size:13px;font-weight:700;color:#64748b}

/* ===== Transaction list (history) ===== */
.txnList{display:flex;flex-direction:column;gap:12px}
.txnItem{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eef2f7;border-radius:18px;padding:14px;box-shadow:0 8px 20px rgba(2,6,23,.06)}
.txnIcon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 8px 16px rgba(2,6,23,.16)}
.txnMid{flex:1;min-width:0}
.txnTitle{font-size:15px;font-weight:800;color:#0f172a}
.txnSub{margin-top:2px;font-size:12px;font-weight:600;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txnDate{margin-top:3px;font-size:11px;font-weight:600;color:#94a3b8}
.txnRight{text-align:right;flex:0 0 auto}
.txnAmount{font-size:15px;font-weight:900;color:#0f172a}
.txnCredit{color:#16a34a}
.txnBadge{margin-top:6px;display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800}

/* ===== Full-bleed hero pages (header edge-to-edge) ===== */
.content.heroFull{padding-left:0;padding-right:0;padding-top:0}
.content.heroFull .pageCard{border-radius:0}

/* ===== Change Password page ===== */
.cpFlash{border-radius:14px;padding:12px 14px;font-size:13px;font-weight:700;margin-bottom:12px}
.cpFlashOk{background:rgba(22,163,74,.12);color:#16a34a}
.cpFlashErr{background:rgba(220,38,38,.12);color:#dc2626}
.cpCard{background:#fff;border:1px solid #eef2f7;border-radius:22px;box-shadow:0 14px 30px rgba(2,6,23,.08);padding:22px 18px;display:flex;flex-direction:column;gap:14px}
.cpIconWrap{width:64px;height:64px;margin:0 auto 4px;border-radius:999px;background:#eff6ff;display:grid;place-items:center}
.cpField{display:flex;flex-direction:column;gap:7px}
.cpLabel{font-size:12px;font-weight:800;color:#64748b}
.cpInput{border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:14px 16px;font-size:15px;font-weight:700;color:#0f172a;outline:0}
.cpInput:focus{border-color:#2563eb;background:#fff}
.cpSubmit{margin-top:6px;height:54px;border:0;border-radius:16px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 14px 26px rgba(37,99,235,.28)}

/* ===== DTH Customer Care cards ===== */
.dthCard{border-radius:20px;padding:16px;color:#fff;box-shadow:0 14px 28px rgba(2,6,23,.16)}
.dthCardTop{display:flex;align-items:center;gap:12px}
.dthCardIcon{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:0 0 auto}
.dthCardName{font-size:17px;font-weight:900}
.dthCardCall{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:10px 14px;text-decoration:none}
.dthCardNum{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#fff;letter-spacing:.3px}
.dthCardCallBtn{background:#fff;color:#0f172a;border-radius:999px;padding:6px 16px;font-size:13px;font-weight:800;flex:0 0 auto}

/* ===== Policy pages ===== */
.policyCard{background:#fff;border:1px solid #eef2f7;border-radius:20px;box-shadow:0 12px 26px rgba(2,6,23,.07);padding:20px 18px}
.policyH{font-size:15px;font-weight:900;color:#0f172a;margin-top:18px}
.policyH:first-child{margin-top:0}
.policyP{margin-top:8px;font-size:13.5px;line-height:1.6;color:#475569;font-weight:500}

/* ===== Admin dashboard (ADMIN_REF style) ===== */
.dashHead{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#1e1b4b,#3730a3 55%,#4f46e5);border-radius:16px;padding:18px 22px;color:#fff;margin-bottom:18px}
.dashHeadTitle{font-size:20px;font-weight:900}
.dashHeadSub{margin-top:4px;font-size:12px;color:rgba(255,255,255,.7);font-weight:600}
.dashHeadBtn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;text-decoration:none}
.statBar{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.statItem{background:#fff;border:1px solid #e9ecf2;border-radius:14px;padding:16px;position:relative;overflow:hidden}
.statItem::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.statGreen::before{background:#16a34a}.statAmber::before{background:#d97706}.statRed::before{background:#dc2626}.statBlue::before{background:#2563eb}
.statTop{display:flex;align-items:center;justify-content:space-between}
.statLabel{font-size:12px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.3px}
.statDot{width:8px;height:8px;border-radius:999px;background:#cbd5e1}
.statGreen .statDot{background:#16a34a}.statAmber .statDot{background:#d97706}.statRed .statDot{background:#dc2626}.statBlue .statDot{background:#2563eb}
.statValue{margin-top:10px;font-size:22px;font-weight:900;color:#0f172a}
.statMeta{margin-top:4px;font-size:12px;color:#94a3b8;font-weight:600}
.ovGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.ovCard{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e9ecf2;border-radius:14px;padding:16px;text-decoration:none}
.ovIcon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto}
.ovIcon svg{width:22px;height:22px}
.ovIndigo{background:linear-gradient(135deg,#4f46e5,#6366f1)}.ovGreen{background:linear-gradient(135deg,#16a34a,#22c55e)}.ovBlue{background:linear-gradient(135deg,#2563eb,#3b82f6)}.ovAmber{background:linear-gradient(135deg,#f59e0b,#f97316)}
.ovValue{font-size:20px;font-weight:900;color:#0f172a}
.ovLabel{margin-top:2px;font-size:12px;color:#64748b;font-weight:700}
.dashTwo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dashPanel{background:#fff;border:1px solid #e9ecf2;border-radius:14px;padding:18px}
.dashPanelHead{font-size:14px;font-weight:900;color:#0f172a;margin-bottom:6px}
.miniRow{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #f1f5f9}
.miniDot{width:9px;height:9px;border-radius:999px;flex:0 0 auto}
.miniGreen{background:#16a34a}.miniAmber{background:#d97706}.miniRed{background:#dc2626}
.miniLabel{flex:1;font-size:13px;font-weight:700;color:#475569}
.miniVal{font-size:13px;font-weight:800;color:#0f172a}
@media(max-width:900px){.statBar,.ovGrid{grid-template-columns:repeat(2,1fr)}.dashTwo{grid-template-columns:1fr}}

/* ===== Admin pages — modern shell + tables (ADMIN_REF) ===== */
.adminContent{background:#f0f2f8}
.adminPageHead{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#1e1b4b,#3730a3 55%,#4f46e5);border-radius:16px;padding:18px 22px;color:#fff;margin-bottom:18px;position:relative;overflow:hidden}
.adminPageHead::after{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:999px;background:rgba(255,255,255,.06)}
.adminPageTitle{font-size:20px;font-weight:900;position:relative;z-index:1}
.adminPageCrumb{margin-top:4px;font-size:12px;color:rgba(255,255,255,.7);font-weight:600;position:relative;z-index:1}
.adminPageAct{position:relative;z-index:1;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;text-decoration:none}
.adminPanelCard{background:#fff;border:1px solid #e9ecf2;border-radius:16px;padding:18px;box-shadow:0 10px 26px rgba(15,23,42,.05)}
.adminPanelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.adminPanelTitle{font-size:15px;font-weight:900;color:#0f172a}
.adminSearch{flex:1;max-width:280px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;color:#0f172a;outline:0}
/* data table */
.adTable{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.adTable thead th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.4px;color:#64748b;text-transform:uppercase;padding:10px 12px;background:#f8fafc;border-bottom:1px solid #eef2f7}
.adTable tbody td{padding:12px 12px;border-bottom:1px solid #f1f5f9;color:#0f172a;font-weight:600;vertical-align:middle}
.adTable tbody tr:hover{background:#fafbff}
.adTable tbody tr:last-child td{border-bottom:0}
.adWrap{overflow:auto;border:1px solid #e9ecf2;border-radius:14px;background:#fff}
.adUserCell{display:flex;align-items:center;gap:10px}
.adAvatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900;flex:0 0 auto}
.adUserName{font-weight:800;color:#0f172a}
.adUserSub{font-size:11px;color:#94a3b8;font-weight:600}
.adBadge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800}
.adBadgeGreen{background:rgba(22,163,74,.12);color:#16a34a}
.adBadgeGray{background:#f1f5f9;color:#64748b}
.adBadgeBlue{background:rgba(37,99,235,.12);color:#2563eb}
.adAmt{font-weight:900;color:#0f172a}
.adEmpty{padding:40px 20px;text-align:center;color:#94a3b8;font-weight:700}
.adPlaceholder{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 20px}
.adPlaceholderIcon{width:74px;height:74px;border-radius:20px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);display:grid;place-items:center;margin-bottom:16px}
.adPlaceholderTitle{font-size:17px;font-weight:900;color:#0f172a}
.adPlaceholderSub{margin-top:6px;font-size:13px;color:#94a3b8;font-weight:600;max-width:340px;line-height:1.5}