/* ==========================================================================
   Smart Recharge — ইউজার ওয়েব অ্যাপ ডিজাইন সিস্টেম
   --------------------------------------------------------------------------
   রেফারেন্স: Smart Recharge App UI (২২ স্ক্রিন প্রোটোটাইপ) — মোবাইল-ফার্স্ট।
   সব ক্লাস sr- প্রিফিক্সড। টোকেন: /assets/ui/tokens.css (সোর্স অফ ট্রুথ)।
   লোড-ক্রম: tokens.css → components.css → এই ফাইল (app.css শেষে জেতে)।
   ডেস্কটপ: ট্যাবলেট ≥768px → ≥1024px → ≥1280px।
   ========================================================================== */

/* v142 (2026-10-25, আতিক ভাই): Google Fonts @import বাদ — Hind Siliguri +
   Inter + Noto Sans Bengali + Material Symbols সবই /assets/fonts/-এ
   self-hosted (fonts.css)। বাইরের @import রেন্ডার-ব্লক করত — নেট স্লো/
   ব্লক হলেই ফন্ট ভেঙে যেত, হোম ফ্ল্যাশ করত। এখন ফন্ট ১০০% নিজের সার্ভার থেকে। */

/* ================= ১. ডিজাইন টোকেন (স্থানীয় ওভাররাইড) ================= */
:root {
  --sr-primary: var(--primary);
  --sr-deep: var(--primary-deep);
  --sr-btn-mid: #0b4a3c;
  --sr-mint: var(--primary-soft);
  --sr-page-bg: #ffffff;
  /* (2026-11-10, আইটেম ১০৩, F-TX-2 — রিসার্চ-টোকেন, §৭ exact মান);
     tokens.css-এ এই নামগুলো নেই — এখানে স্থানীয় ওভাররাইডে। admin.css-এর
     :root-এ একই ৬ টোকেন আছে (অ্যাডমিন-শেল app.css লোড করে না বলে)। */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --exit: cubic-bezier(0.3, 0, 1, 1);
  --dur-press: 100ms;
  --dur-tab: 280ms;
  --dur-page: 250ms;
  /* v130 (আতিক ভাই): গ্রেডিয়েন্ট ও সফট শ্যাডো হুবহু আগের প্রিমিয়াম
     অবস্থায় ফেরত — v117-এর ফ্ল্যাট সলিড/none বাতিল। পেজ ব্যাকগ্রাউন্ড
     পিওর হোয়াইটই থাকছে (--sr-page-bg)। */
  --sr-grad-head: linear-gradient(135deg, var(--primary), var(--primary-deep));
  --sr-grad-btn: linear-gradient(180deg, var(--primary) 0%, #0b4a3c 100%);
  --sr-grad-offer: linear-gradient(135deg, #2f5da8 0%, #5b4baa 55%, #7c4dbb 100%);
  --sr-card-radius: 16px;
  --sr-btn-radius: 12px;
  --sr-card-shadow: 0 4px 20px rgba(21, 33, 29, .08); /* Phase U R-10: hue সবুজ (16,96,80) → নিউট্রাল (21,33,29); জ্যামিতি/আলফা অপরিবর্তিত */
  --sr-btn-shadow: 0 8px 20px rgba(16, 96, 80, .3);
  --sr-btn-shadow-hover: 0 12px 26px rgba(16, 96, 80, .38);
  --sr-svc-blue: #3366a3;
  --sr-svc-orange: #e8912d;
  --sr-svc-green: #106050;
  --sr-svc-yellow: #e8a33d;
  --sr-svc-teal: #0f766e;
  --sr-svc-red: #d9534f;
  --sr-svc-purple: #6448b0;
  --sr-tips-bg: linear-gradient(180deg, #fff6dd 0%, #fef1cf 100%);
  --sr-tips-border: #f2e2b3;
}

/* ================= ২. বেস / লেআউট ================= */
/* ১০. ফুল-স্ক্রিন ফিক্স — ব্রাউজারের ডিফল্ট body margin (৮px) রিসেট,
   হেডার একদম ধার পর্যন্ত (full-bleed), safe-area সাপোর্ট। */
/* Full-bleed guard (2026-10-16, আতিক ভাই): চারপাশের সাদা gap দূর —
   এডমিনের ফিক্সের ইউজার-প্যানেল সংস্করণ। overflow-x:hidden দিয়ে কোনো
   এলিমেন্ট পেজকে ভিউপোর্টের বাইরে ঠেলতে পারবে না। */
html, body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; }
html { background: var(--bg, #ffffff); }
body { background: var(--bg, #ffffff); overscroll-behavior-y: none; min-height: 100vh; min-height: 100dvh; }
.sr-ui, .app-shell { width: 100%; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }
.sr-ui {
  font-family: var(--font-main);
  font-synthesis: none; }
/* (2026-10-19, আতিক ভাই): সব এলিমেন্টে বাংলা ফন্ট — বাটন, ইনপুট, মোডাল, বটম শিটসহ।
   কোনো hardcoded font-family যাতে বাংলা সংখ্যা/লেখা ভাঙতে না পারে। */
.sr-ui button, .sr-ui input, .sr-ui select, .sr-ui textarea,
.sr-ui .sr-modal, .sr-ui .sr-sheet, .sr-ui .sr-bottom-sheet,
.sr-ui [class*="modal"], .sr-ui [class*="sheet"], .sr-ui [class*="popup"] {
  font-family: inherit; }
.sr-ui b, .sr-ui strong { font-weight: 700; }
/* সংখ্যা সবসময় Inter-এ (ট্যাবুলার) */
.sr-ui .num, .num { font-family: "Hind Siliguri", "Noto Sans Bengali", "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; }

.app-shell {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg, #ffffff);
  width: 100%; max-width: 100%; overflow-x: clip;
}
/* হেডার সবসময় পুরো প্রস্থে — কোনো গ্যাপ/রেডিয়াস নয়, notch safe-area সহ */
.sr-green-head, .sr-white-head, .sr-band, .sr-header, .sr-auth-head {
  width: 100%; margin: 0; border-radius:0;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
.sr-bottomnav { padding-bottom: env(safe-area-inset-bottom, 0px); }
.app-main {
  flex: 1; width: 100%;
  max-width: 640px; margin: 0 auto;
  padding: 16px 16px 96px;
}
.app-main-band { margin-top: -46px; position: relative; z-index: 2; padding-top: 0; }
.app-main-band > .sr-auth-title:first-child { margin-top: 54px; }
.app-main-band .sr-auth-sub { line-height: var(--lh-base, 1.5); }

/* বটম নেভ থাকলে কনটেন্ট ঢেকে না যায় */
.sr-ui main { padding-bottom: 96px; }

/* ---- স্ক্রল সুরক্ষা (2026-10-18): বডি স্ক্রল সবসময় চালু ---- */
html { overflow-y: auto; -webkit-overflow-scrolling: touch; }
body { overflow-y: auto; overscroll-behavior-y: auto; }
.sr-ui { overflow-x: clip; overflow-y: visible; min-height: 100vh; }
.app-main { overflow: visible; }
.sr-bottomnav + script, .sr-bottom-nav + script { display: none; }

/* ================= ৩. প্রিমিয়াম বাটন =================
   filled: gradient (#106050→#0B4A3C) + গভীর ছায়া + hover lift + active press
   outline: 2px border #106050 */
.sr-btn {
  font-family: var(--font-main);
  font-weight: 700; letter-spacing: .01em;
  border-radius:var(--sr-btn-radius);
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sr-btn-primary {
  background: var(--sr-grad-btn);
  color: #fff;
  box-shadow: var(--sr-btn-shadow), inset 0 1px 0 rgba(255, 255, 255, .22);
  border: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
@media (hover:hover) {
  .sr-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--sr-btn-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, .22);
    filter: brightness(1.05);
  }
}
.sr-btn-primary:active {
  transform: translateY(1px) scale(.985);
  box-shadow:none
  filter: none;
}
.sr-btn-outline {
  background: var(--surface, #fff);
  color: var(--sr-primary);
  border: 2px solid var(--sr-primary);
  box-shadow: none;
}
@media (hover:hover) {
  .sr-btn-outline:hover { background: var(--sr-mint); transform: translateY(-1px); }
}
.sr-btn-outline:active { transform: translateY(1px) scale(.985); background: var(--sr-mint); }
.sr-btn-ghost { border-radius:var(--sr-btn-radius); }
.sr-btn-danger { border-radius:var(--sr-btn-radius); box-shadow:none border: 0; }
.sr-btn-danger:active { transform: translateY(1px) scale(.985); }
.sr-btn-block { border-radius:var(--sr-btn-radius); min-height: 52px; font-size: 16px; }
.sr-btn-sm { border-radius:12px; }
.sr-btn[disabled], .sr-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; transform: none; }

/* Add Balance বাটন (হিরো/ইউজার কার্ডে) */
.sr-add-bal, .sr-btn-add-bal {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--primary); color: #fff;
  font-size: 13.5px; font-weight: 700; font-family: inherit;
  padding: 10px 16px; border-radius:12px; border: 0; cursor: pointer;
  text-decoration: none; min-height: 44px;
  box-shadow: var(--sr-btn-shadow), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .14s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.sr-add-bal svg, .sr-btn-add-bal svg { width: 18px; height: 18px; flex: none; }
.sr-add-bal:active, .sr-btn-add-bal:active { transform: scale(.96); box-shadow: 0 3px 10px rgba(16, 96, 80, .28); }
.sr-btn-add-bal { font-size: 14px; padding: 12px 20px; border-radius:var(--sr-btn-radius); }

/* ================= ৪. হেডার ================= */

/* ---- ৪.১ .sr-hero — ডার্ক হিরো (menu + টাইটেল + সার্কেল অ্যাকশন বাটন) ---- */
.sr-hero {
  background: var(--sr-grad-head);
  color: #fff;
  padding: 18px 16px 64px;
  position: relative; overflow: hidden;
}
.sr-hero.has-bg { background-color: #0b2b25; }
.sr-hero.has-bg > .sr-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .28;
}
.sr-hero-top {
  display: flex; align-items: center; gap: 12px;
  position: relative; z-index: 2;
  max-width: 640px; margin: 0 auto;
}
.sr-hero-title {
  margin: 0; font-size: 20px; font-weight: 700; color: #fff;
  flex: 1; letter-spacing: .2px;
}
.sr-hero-menu, .sr-hero-act, .sr-hero .sr-icon-btn {
  width: 44px; height: 44px; border-radius:50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; flex: none;
  transition: background .15s ease, transform .12s ease;
}
.sr-hero-menu:active, .sr-hero-act:active { background: rgba(255, 255, 255, .28); transform: scale(.94); }
.sr-hero-act svg, .sr-hero-menu svg { width: 20px; height: 20px; }
.sr-hero-body { position: relative; z-index: 2; max-width: 640px; margin: 14px auto 0; }

/* ---- ৪.২ .sr-green-head — সবুজ গ্র্যাডিয়েন্ট হেডার (back + টাইটেল + info) ---- */
.sr-green-head {
  background: var(--sr-grad-head);
  color: #fff; padding: 14px 16px 26px;
  position: relative; overflow: hidden;
}
.sr-green-head::after {
  content: ""; position: absolute; right: -44px; top: -52px;
  width: 170px; height: 170px; border-radius:50%;
  border: 24px solid rgba(255, 255, 255, .06);
}
.sr-green-head-row {
  display: flex; align-items: center; gap: 12px;
  max-width: 640px; margin: 0 auto;
  position: relative; z-index: 1;
}
.sr-green-head-title { margin: 0; font-size: 19px; font-weight: 700; color: #fff; flex: 1; letter-spacing: .2px; }
.sr-green-head .sr-icon-btn {
  background: rgba(255, 255, 255, .16); color: #fff;
  width: 42px; height: 42px; border-radius:50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .2); cursor: pointer; text-decoration: none; flex: none;
  transition: background .15s ease, transform .12s ease;
}
.sr-green-head .sr-icon-btn:active { background: rgba(255, 255, 255, .3); transform: scale(.94); }
.sr-green-head .sr-icon-btn svg { width: 20px; height: 20px; }

/* হেডারে ব্যবহৃত অ্যাকশন বাটন (স্টার/বেল) */
.sr-head-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius:50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  text-decoration: none; border: 1px solid rgba(255, 255, 255, .2); flex: none; box-shadow: 0 2px 10px rgba(0,0,0,.14);}
.sr-head-act svg { width: 20px; height: 20px; }
.sr-head-act:active { background: rgba(255, 255, 255, .3); }

/* ---- ৪.৩ .sr-white-head — ব্র্যান্ড কালার হেডার (2026-10-19, আতিক ভাই: সব জায়গায় ডিফল্ট কালার) ---- */
.sr-white-head {
  background: var(--primary, #106050); border-bottom: 1px solid var(--primary-dark, #0d4a3e);
  padding: 12px 16px; position: sticky; top: 0; z-index: 20;
}
.sr-white-head-row { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; }
.sr-white-head .sr-icon-btn {
  background: rgba(255,255,255,.15); color: #fff;
  width: 42px; height: 42px; border-radius:12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.25); cursor: pointer; text-decoration: none; flex: none;
}
.sr-white-head .sr-icon-btn:active { background: rgba(255,255,255,.25); }
.sr-white-head-title { margin: 0; font-size: 20px; font-weight: 700; color: #fff; flex: 1; letter-spacing: -.01em; }
.sr-white-head-sub { font-size: 12.5px; color: rgba(255,255,255,.85); font-weight: 400; }

/* ---- ৪.৪ পুরনো হেডার ---- */
.sr-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.sr-header-title { margin: 0; font-size: 19px; font-weight: 700; flex: 1; }
.sr-header-hero { background: var(--sr-grad-head); color: #fff; }
.sr-header-hero .sr-header-title { color: #fff; }
.sr-header-spacer { width: 42px; flex: none; }
.sr-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius:12px;
  background: var(--surface, #fff); color: var(--text, #15211d);
  border: 1px solid var(--border-soft, #edf2f0);
  cursor: pointer; text-decoration: none; flex: none;
  transition: background .15s ease, transform .12s ease;
}
.sr-icon-btn:active { transform: scale(.94); }
.sr-back-ic { width: 20px; height: 20px; }

/* ---- ৪.৫ সবুজ ব্যান্ড হেডার ---- */
.sr-band {
  background: var(--sr-grad-head);
  color: #fff; padding: 14px 16px 60px;
  position: relative; overflow: hidden;
}
.sr-band::after {
  content: ""; position: absolute; right: -46px; top: -56px;
  width: 180px; height: 180px; border-radius:50%;
  border: 26px solid rgba(255, 255, 255, .07);
}
.sr-band-row { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.sr-band-title { flex: 1; margin: 0; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: .2px; }
.sr-band .sr-icon-btn { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .2); border-radius:50%; }
.sr-band .sr-icon-btn:active { background: rgba(255, 255, 255, .3); }
.sr-band-auth { text-align: center; padding-bottom: 66px; }

/* লোগো ব্যাজ */
.sr-logo-badge {
  width: 92px; height: 92px; border-radius:50%; background: #fff;
  display: grid; place-items: center; align-content: center;
  border: 2px solid var(--sr-primary); margin: 14px auto 6px;
  position: relative; z-index: 1;
}
.sr-logo-badge svg { width: 34px; height: 34px; color: var(--sr-primary); }
.sr-logo-badge span { display: block; font-family: var(--font-main); font-weight: 700; font-size: 8px; color: var(--text, #15211d); margin-top: 1px; letter-spacing: .2px; }
.sr-logo-badge .sr-logo-img { width: 54px; height: 54px; object-fit: contain; border-radius:12px; }
.sr-logo-mini { width: 40px; height: 40px; border-radius:50%; background: #fff; display: grid; place-items: center; flex: none; position: relative; z-index: 1; }
.sr-logo-mini svg { width: 22px; height: 22px; color: var(--sr-primary); }
.sr-logo-mini-img { width: 40px; height: 40px; border-radius:50%; object-fit: contain; background: #fff; flex: none; position: relative; z-index: 1; padding: 6px; box-sizing: border-box; }

/* ================= ৫. ওয়েলকাম পেজ =================
   সবুজ হেডার + সাদা সার্কেল লোগো + ওভারল্যাপ সাদা কার্ড */
.sr-welcome { min-height: 100vh; min-height: 100dvh; background: var(--sr-page-bg); display: flex; flex-direction: column; }
.sr-welcome-head {
  background: var(--sr-grad-head); color: #fff;
  text-align: center; padding: 44px 20px 96px;
  position: relative; overflow: hidden; flex: none;
}
.sr-welcome-head::before {
  content: ""; position: absolute; left: -80px; top: 30px;
  width: 260px; height: 260px; border-radius:50%;
  border: 34px solid rgba(255, 255, 255, .05);
}
.sr-welcome-circle {
  width: 128px; height: 128px; border-radius:50%; background: #fff;
  display: grid; place-items: center; align-content: center;
  margin: 6px auto 16px; position: relative; z-index: 1;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .35);
}
.sr-welcome-circle svg { width: 48px; height: 48px; color: var(--sr-primary); }
.sr-welcome-circle img { width: 74px; height: 74px; object-fit: contain; }
.sr-welcome-circle span { display: block; font-family: var(--font-main); font-weight: 700; font-size: 11px; color: var(--text, #15211d); margin-top: 2px; }
.sr-welcome-title { margin: 0; font-size: 21px; font-weight: 700; color: #fff; position: relative; z-index: 1; }
.sr-welcome-sub { margin: 8px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .85); position: relative; z-index: 1; }
.sr-welcome-card {
  background: #fff; border-radius:var(--sr-card-radius);
  box-shadow: 0 18px 44px -20px rgba(8, 56, 46, .25), 0 2px 6px rgba(16, 42, 36, .05);
  margin: -64px 20px 0; padding: 24px 20px;
  position: relative; z-index: 2; flex: none;
  border: 1px solid var(--border-soft, #edf2f0);
}
.sr-welcome-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 20px 0; }
.sr-welcome-feat {
  background: #fff; border: 1px solid var(--border-soft, #edf2f0);
  border-radius:16px; padding: 14px 6px 12px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--text-2, #43554f);
  box-shadow: var(--sr-card-shadow);
}
.sr-welcome-feat svg { width: 24px; height: 24px; color: var(--sr-primary); display: block; margin: 0 auto 8px; }
/* ভাষা টগল পিল (বাংলা/ENG) */
/* ভাষা টগল — চূড়ান্ত sticky-হেডার নিয়ম (২০২৬-১০-২৭ ব্যবহারকারীর
   স্পষ্টীকরণ; আগের header-anchor/স্ক্রল-সহ-যাওয়া সংস্করণ বাতিল):
   পিল .sr-auth-head-এর ভিতরে position:absolute থাকে, কিন্তু হেডার
   নিজেই sticky (ফাইলের শেষ ব্লকে) — তাই পিল ভিউপোর্টের উপরে
   আটকে থাকে, একা fixed-পিলের মতো কার্ডের উপরে ভাসে না। */
.sr-lang-float { position: absolute; top: 12px; right: 12px; z-index: 5; }
.app-shell:has(> .sr-lang-float--inapp) .sr-green-head-row,
.app-shell:has(> .sr-lang-float--inapp) .sr-white-head-row,
.app-shell:has(> .sr-lang-float--inapp) .sr-band-row,
/* হোম-হিরো (noHead, তাই উপরের রো-নিয়ম ধরে না — ভেরিফায়ার-গ্যাপ ফিক্স):
   বেল+রিওয়ার্ড অ্যাকশন পিলের নিচে চাপা পড়ত; রো-প্যাডিংয়ে সরানো হলো। */
.app-shell:has(> .sr-lang-float--inapp) .ha-hero-row { padding-right: 104px; }
/* latent-গ্যাপ ফিক্স: auth রো-হেডার পেজে ভবিষ্যতে টগল চালু হলেও একই
   রিজার্ভেশন পাবে (আজকের দুটোই noLangToggle, তাই আজ লাইভ-প্রভাব নেই)। */
.app-shell:has(> .sr-lang-float) .sr-green-head-row,
.app-shell:has(> .sr-lang-float) .sr-white-head-row,
.app-shell:has(> .sr-lang-float) .sr-band-row { padding-right: 104px; }
.sr-lang-float form { box-shadow: var(--sr-card-shadow); border-radius:20px; }

/* ---- অথ পেজ (লগিন/রেজিস্টার/OTP) ---- */
.sr-auth-head {
  background: var(--primary);
  padding: 28px 16px 70px; text-align: center;
  position: relative; overflow: hidden;
}
/* 2026-11-09, আইটেম ৮৮ (F-88-1, D-88-1 ডিফল্ট: ফ্ল্যাট ব্র্যান্ড-সবুজ
   ব্যান্ড — রিসার্চ-পেজের হেডার-ব্যান্ডের মতো): ডেকোরেটিভ ::after
   রিং তোলা (AGENTS.md §৩: ডেকোরেটিভ ::before/::after নিষেধ;
   ফাইনাল-লেয়ারেও display:none ছিল — এখন উৎসেই নেই)। */
.sr-auth-badge {
  width: 104px; height: 104px; border-radius:50%; background: #fff;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
  margin: 6px auto;
}
.sr-auth-badge img { width: 68px; height: 68px; object-fit: contain; }
.sr-auth-badge svg { width: 52px; height: 52px; color: var(--sr-primary); }
.sr-band-auth .sr-auth-badge { width: 104px; height: 104px; border: 3px solid #fff; box-shadow: 0 14px 30px -12px rgba(15, 23, 20, .35); }
.sr-band-auth .sr-logo-badge { width: 100px; height: 100px; border: 3px solid #fff; box-shadow: 0 14px 30px -12px rgba(15, 23, 20, .35); }
.sr-band-auth .sr-logo-badge .sr-logo-img { width: 60px; height: 60px; }
.sr-auth-card-overlap { margin-top: -52px; position: relative; z-index: 2; }
.sr-auth-card {
  border-radius:var(--sr-card-radius) !important;
  padding: 24px 22px !important;
  /* ৯৬ (2026-11-09): dead শ্যাডো তোলা — ফাইনাল-লেয়ার ব্ল্যাঙ্কেট
     .sr-auth-card-এ box-shadow:none !important বাধ্য করেই; সোর্সেও ফ্ল্যাট। */
  border: 1px solid var(--border-soft, #edf2f0);
  background: #fff;
}
.sr-auth-card .sr-field { margin-bottom: 16px; }
.sr-auth-card .sr-input { min-height: 52px; font-size: 15px; border-radius:12px; }
.sr-auth-card .sr-btn-block { min-height: 54px; font-size: 16px; margin-top: 6px; }
.sr-auth-card .sr-alert { border-radius:12px; padding: 13px 15px; font-size: 14px; font-weight: 500; }
.sr-auth-title { margin: 0 0 18px; font-size: 21px; text-align: center; font-weight: 700; letter-spacing: -.01em; }
.sr-auth-sub { text-align: center; margin: -10px 0 18px; color: var(--muted, #71827c); font-size: 14.5px; }
.sr-auth-alt { text-align: center; font-size: 14.5px; color: var(--text-2, #43554f); margin: 22px 0 6px; }
.sr-auth-alt a { color: var(--sr-primary); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--sr-mint); }
.sr-auth-alt a:active { border-bottom-color: var(--sr-primary); }
.sr-auth-forgot { display: flex; justify-content: flex-end; margin: 2px 0 16px; }
.sr-auth-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.sr-auth-feat {
  background: #fff; border: 1px solid var(--border-soft, #edf2f0);
  border-radius:16px; padding: 13px 6px 11px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--text-2, #43554f);
  box-shadow: var(--sr-card-shadow); line-height: 1.4;
}
.sr-auth-feat svg { width: 23px; height: 23px; color: var(--sr-primary); display: block; margin: 0 auto 7px; }
.sr-auth-feat span { display: block; }
.sr-link { color: var(--sr-primary); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.sr-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-auth-wrap { max-width: 420px; margin: 24px auto 0; }
.app-logo { text-align: center; margin-bottom: 20px; }
.app-logo .mark {
  width: 56px; height: 56px; border-radius:16px; background: var(--sr-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
}
.app-logo h2 { margin: 10px 0 4px; font-size: 20px; }
.app-logo p { color: var(--muted, #71827c); font-size: 14px; margin: 0; }
.app-pin {
  text-align: center; font-size: 24px !important; letter-spacing: 10px;
  font-family: var(--font-main); font-weight: 700;
  /* ডিজিট-কিবোর্ড ফিক্স (২০২৬-১১-০৩): type="text"+inputmode="numeric"
     — পাসওয়ার্ড-ফিল্ডে ফোন QWERTY দেখাত। মাস্কিং CSS-এ, তাই
     চোখে পাসওয়ার্ড-ফিল্ডের মতো ডটই দেখাবে। */
  -webkit-text-security: disc;
  text-security: disc;
}
/* eye-toggle খুললে মাস্কিং সরে যাবে (শুধু .app-pin-এ)। */
.app-pin.pin-shown {
  -webkit-text-security: none;
  text-security: none;
}
/* PIN placeholder — মিনিমাল/স্ট্যান্ডার্ড সাইজ (2026-10-19, আতিক ভাই) */
.app-pin::placeholder {
  font-size: 14px !important; letter-spacing: 1px; font-weight: 400;
}
.sr-pin-wrap { position: relative; }
.sr-pin-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted, #71827c); cursor: pointer;
  padding: 10px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.sr-pin-toggle svg { width: 20px; height: 20px; }

/* ================= ৬. ইউজার কার্ড =================
   সাদা ওভারল্যাপ কার্ড: avatar সার্কেল + নাম + নম্বর + badge + Balance/Add Balance */
.sr-user-card {
  background: #fff; border-radius:var(--sr-card-radius);
  box-shadow: var(--sr-card-shadow);
  border: 1px solid var(--border-soft, #edf2f0);
  padding: 18px;
  margin: -52px 0 0; position: relative; z-index: 3;
}
.sr-user-top { display: flex; gap: 13px; align-items: center; }
.sr-avatar, .sr-avatar-lg, .sr-avatar-sm {
  border-radius:50%; background: var(--sr-grad-head); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-main); flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.sr-avatar { width: 58px; height: 58px; font-size: 20px; }
.sr-avatar-lg { width: 68px; height: 68px; font-size: 24px; }
.sr-avatar-sm { width: 42px; height: 42px; font-size: 15px; }
.sr-avatar svg { width: 26px; height: 26px; }
.sr-user-meta { flex: 1; min-width: 0; }
.sr-user-name { font-size: 17.5px; font-weight: 700; line-height: 1.25; }
.sr-user-num {
  font-size: 13.5px; color: var(--muted, #71827c);
  font-family: var(--font-main); letter-spacing: .3px; margin-top: 1px;
}
.sr-type-chip {
  display: inline-block; margin-top: 5px;
  font-size: 11.5px; font-weight: 700;
  background: var(--sr-primary); color: #fff;
  padding: 3px 11px; border-radius:999px;
}
.sr-bal-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft, #edf2f0);
}
.sr-bal-label { font-size: 12.5px; color: var(--muted, #71827c); font-weight: 600; }
.sr-bal-amt {
  font-size: 20px; font-weight: 700; color: var(--text, #15211d);
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
}
.sr-bal-block {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft, #edf2f0);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sr-bal-big {
  font-size: 24px; font-weight: 700; color: var(--text, #15211d);
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
}
/* ব্যালেন্স outline বাটন */
.sr-user-card .sr-btn-outline { font-size: 13px; padding: 9px 14px; min-height: 44px; }

/* প্রোফাইল কার্ড (home/profile) — sr-user-card-এর আলিয়াস-স্টাইল */
.sr-profile-card {
  background: #fff; border-radius:var(--sr-card-radius);
  padding: 18px; box-shadow: var(--sr-card-shadow);
  border: 1px solid var(--border-soft, #edf2f0);
  margin-top: -14px; position: relative; z-index: 2;
  text-align: center;
}
.sr-profile-card .sr-avatar-lg { margin: 0 auto; }
.sr-profile-top { display: flex; align-items: center; gap: 12px; text-align: left; }
.sr-profile-avatar {
  width: 54px; height: 54px; border-radius:50%;
  background: var(--sr-grad-head); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 700; flex: none; font-family: var(--font-main);
}
.sr-profile-name, .sr-prof-name { font-size: 16px; font-weight: 700; color: var(--text, #15211d); }
.sr-profile-num, .sr-prof-num {
  font-size: 13px; color: var(--muted, #71827c); font-family: var(--font-main); letter-spacing: .3px;
}
.sr-prof-top { display: flex; align-items: center; gap: 12px; text-align: left; }
.sr-prof-meta { flex: 1; min-width: 0; }
.sr-level-pill {
  display: inline-block; background: var(--sr-svc-yellow); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius:999px; margin-top: 4px;
}
.sr-profile-bal {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft, #edf2f0);
  text-align: left;
}
.sr-profile-bal-label { font-size: 12.5px; color: var(--muted, #71827c); }
.sr-profile-bal-amt {
  font-size: 22px; font-weight: 700; color: var(--text, #15211d);
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
}

/* ================= ৭. সার্ভিস গ্রিড =================
   ৪ কলাম; রঙিন rounded আইকন বক্স (নীল/কমলা/গোলাপি/হলুদ/টিল/লাল/বেগুনি) */
.sr-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; padding: 4px 2px 0; margin-top: 20px; }
.sr-svc {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-2, #43554f);
  text-align: center; text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0;
  min-height: 76px;
}
.sr-svc:active { color: var(--sr-primary); }
.sr-svc-ic {
  width: 58px; height: 58px; border-radius:20px;
  display: grid; place-items: center; color: #fff;
  box-shadow: none;
  transition: transform .12s ease;
}
.sr-svc:active .sr-svc-ic { transform: scale(.9); }
.sr-svc-ic svg { width: 28px; height: 28px; }
.sr-svc:nth-child(8n+1) .sr-svc-ic { background: var(--sr-svc-blue); }
.sr-svc:nth-child(8n+2) .sr-svc-ic { background: var(--sr-svc-orange); }
.sr-svc:nth-child(8n+3) .sr-svc-ic { background: var(--sr-svc-green); }
.sr-svc:nth-child(8n+4) .sr-svc-ic { background: var(--sr-svc-yellow); }
.sr-svc:nth-child(8n+5) .sr-svc-ic { background: var(--sr-svc-teal); }
.sr-svc:nth-child(8n+6) .sr-svc-ic { background: var(--sr-svc-red); }
.sr-svc:nth-child(8n+7) .sr-svc-ic { background: var(--sr-svc-purple); }
.sr-svc:nth-child(8n) .sr-svc-ic { background: var(--sr-primary); }
.sr-svc-off { display: block; font-size: 10px; font-weight: 600; color: #d92d20; margin-top: 2px; }
.sr-svc-more { cursor: pointer; font-family: inherit; }

/* ৪×২ রঙিন সার্ভিস গ্রিড (ড্যাশবোর্ড) */
.sr-svc-grid8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; margin: 18px 0; }
.sr-svc8 {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text, #15211d);
  font-size: 12px; font-weight: 600; text-align: center;
  background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0; min-height: 44px;
}
.sr-svc8:active { transform: scale(.96); }
.sr-svc8-ic {
  width: 58px; height: 58px; border-radius:20px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: none;
  transition: transform .12s ease;
}
.sr-svc8:active .sr-svc8-ic { transform: scale(.92); }
.sr-svc8-ic svg { width: 27px; height: 27px; }
.sr-svc8-ic.c-green, .sr-svc-ic.c-green { background: var(--sr-primary); }
.sr-svc8-ic.c-gold, .sr-svc-ic.c-gold { background: var(--sr-svc-yellow); }
.sr-svc8-ic.c-blue, .sr-svc-ic.c-blue { background: var(--sr-svc-blue); }
.sr-svc8-ic.c-red, .sr-svc-ic.c-red { background: var(--sr-svc-red); }
.sr-svc8-ic.c-purple, .sr-svc-ic.c-purple { background: var(--sr-svc-purple); }
.sr-svc8-ic.c-teal, .sr-svc-ic.c-teal { background: var(--sr-svc-teal); }
.sr-svc8-ic.c-dark, .sr-svc-ic.c-dark { background: var(--text-2); }
.sr-svc8-ic.c-orange, .sr-svc-ic.c-orange { background: var(--sr-svc-orange); }

/* ================= ৮. সেকশন টাইটেল ================= */
.sr-sec-title {
  font-size: 17px; font-weight: 700; color: var(--text, #15211d);
  margin: 22px 2px 12px; display: flex; align-items: center; justify-content: space-between;
  letter-spacing: -.01em;
}
.sr-sec-title a { font-size: 13px; color: var(--sr-primary); font-weight: 600; text-decoration: none; }
.sr-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
.sr-sec-head .sr-sec-title, .sr-sec-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.sr-section-head { margin-bottom: 12px; font-size: 17px; font-weight: 700; }
.sr-section-title { font-size: 16px; font-weight: 700; margin: 18px 0 10px; }

/* ==========================================================================
   ওয়েলকাম + অথ রিডিজাইন — রেফারেন্স স্ক্রিনশট (2026-10-16)
   সবুজ গ্র্যাডিয়েন্ট হেডার + বড় সাদা সার্কেল badge (bolt + ব্র্যান্ড)
   + ওভারল্যাপ সাদা কার্ড। OnboardingPage::welcome ও WebView::layout(auth)।
   ========================================================================== */

/* ---- অথ হেডার: লম্বা গ্র্যাডিয়েন্ট, বড় সার্কেল badge, সাদা হেডলাইন ---- */
/* v167 (আতিক ভাই): হেডার ছোট — স্ক্রল কমাতে প্যাডিং + ব্যাজ + ওভারল্যাপ কমানো। */
/* v168 (আতিক ভাই): ব্যাজে লেখা আঁটত না (৯৬px সার্কেলে ১৫px "Smart Recharge"
   দুই লাইনে ভেঙে সার্কেলের বাইরে বেরিয়ে যেত — লাইভ-পরীক্ষায় যাচাইকৃত)।
   তাই ব্যাজ ১২৪px + লেখা ১৪px + nowrap (এক লাইনে গ্যারান্টি) + লোগো ৫৮px।
   TK-2 (R-06): হিরো-ব্যাকগ্রাউন্ডের রেডিয়াল-সার্কেল তোলা — ব্র্যান্ড
   গ্রেডিয়েন্ট-মাত্র (একক-হিউ, অনুমোদিত ব্যতিক্রম) + নিচে-বামে রিং। */
.sr-auth-head {
  background: var(--primary);
  padding: 40px 16px 48px;
}
.sr-auth-badge { width: 104px; height: 104px; flex: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .2);}
.sr-auth-badge img { width: 68px; height: 68px; }
.sr-auth-badge svg { width: 52px; height: 52px; }
.sr-auth-line { color: #fff; font-size: 20px; font-weight: 700; margin: 12px 0 0; position: relative; z-index: 1; font-family: var(--font-main); }
.sr-auth-card-overlap { margin-top: -40px; }

/* ---- ওয়েলকাম স্ক্রিন (OnboardingPage::welcome) ---- */
.sr-wel { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.sr-wel-head {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(160deg, #14705c 0%, #0e5a48 48%, var(--primary-deep) 100%);
  padding: 20px 16px 64px; min-height: 38vh; min-height: 38svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sr-wel-lang { position: absolute; top: 12px; right: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #E5E7EB; border-radius:999px; padding: 2px; box-shadow: none; }
.sr-wel-lang button { border: 0; background: transparent; color: #106050; font-weight: 700; font-size: 11px; line-height: 1; padding: 6px 10px; border-radius:999px; cursor: pointer; font-family: inherit; }
.sr-wel-lang button.is-on { background: #e7f2ee; color: #0e5a48; cursor: default; }
.sr-wel-badge { width: 120px; height: 120px; border-radius:50%; background: #fff; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.22); position: relative; z-index: 1; }
.sr-wel-badge svg { width: 52px; height: 52px; color: var(--primary); }
.sr-wel-badge img { width: 68px; height: 68px; object-fit: contain; }
.sr-wel-brand { font-size: 16px; font-weight: 700; color: #101418; letter-spacing: -.01em; }
.sr-wel-title { color: #fff; font-size: clamp(19px, 5.2vw, 22px); font-weight: 700; margin: 22px 0 0; position: relative; z-index: 1; font-family: var(--font-main); }
.sr-wel-body { margin: -48px auto 0; position: relative; z-index: 2; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); max-width: 480px; width: 100%; }
.sr-wel-card { border-radius:20px !important; padding: 26px 20px 22px !important; box-shadow: var(--shadow-card); }
.sr-wel-btn { min-height: clamp(50px, 13vw, 56px) !important; font-size: clamp(16px, 4.5vw, 17px) !important; border-radius:16px !important; width: 100%; margin-bottom: 14px; }
.sr-wel-cta { background: linear-gradient(180deg, #14705c 0%, #0c4a3c 100%) !important; box-shadow: 0 10px 24px rgba(16,96,80,.35) !important; border: 0 !important; }
.sr-wel-how { display: block; text-align: center; color: var(--primary); font-weight: 700; font-size: 15.5px; text-decoration: none; margin: 18px 0 4px; }
.sr-wel-how:hover { text-decoration: underline; text-underline-offset: 4px; }
.sr-wel-support { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 500; margin: 12px 0 0; }
.sr-wel-support svg { width: 20px; height: 20px; }

/* ---- ওয়েলকাম ফিচার: মিন্ট আইকন বক্স (রেফারেন্স: নিরাপদ | দ্রুত | বাংলাদেশি সেবা) ---- */
.sr-wel-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.sr-wel-feat { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.45; }
.sr-wel-feat-ic { width: 58px; height: 58px; border-radius:16px; background: var(--primary-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sr-wel-feat-ic svg { width: 27px; height: 27px; color: var(--primary); }

/* ---- অথ পেজের ফিচার স্ট্রিপ: একই মিন্ট-বক্স ভাষা ---- */
.sr-auth-feat { background: transparent; border: 0; box-shadow: var(--sr-card-shadow); padding: 6px 4px; color: var(--text); font-weight: 700; font-size: 13px; }
.sr-auth-feat svg { width: 25px; height: 25px; background: var(--primary-soft); border-radius:16px; padding: 12px; box-sizing: content-box; margin: 0 auto 9px; }

/* ---- ওয়েলকাম ভিডিও কার্ড (2026-10-18) ---- */
.sr-wel-video-card { margin-top: 20px; padding: 14px; overflow: hidden; }
.sr-wel-video-thumb { position: relative; display: block; width: 100%; border: 0; padding: 0; border-radius:16px; overflow: hidden; cursor: pointer; background: #000; }
.sr-wel-video-thumb img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.sr-wel-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); }
.sr-wel-video-play .material-symbols-rounded { width: 64px; height: 64px; border-radius:50%; background: rgba(255,255,255,.95); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 36px; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.sr-wel-video-title { margin: 12px 4px 2px; font-size: 14px; font-weight: 700; color: var(--text); text-align: center; }

/* ---- প্রফেশনাল মোডাল (2026-10-18): বিদ্যমান অ্যাকাউন্ট ইত্যাদি ---- */
.sr-modal-wrap { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sr-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.sr-modal-box { position: relative; background: #fff; border-radius:20px; padding: 32px 24px 24px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 12px 32px rgba(0,0,0,.16); animation: srModalIn .25s ease-out; }
@keyframes srModalIn { from { transform: scale(.92) translateY(12px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.sr-modal-icon { width: 64px; height: 64px; border-radius:50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.sr-modal-icon svg { width: 32px; height: 32px; }
.sr-modal-title { font-size: 19px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.sr-modal-text { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0 0 22px; }

/* ---- প্রফেশনাল OTP ফর্ম (2026-10-18) ---- */
.sr-otp-card { text-align: center; }
.sr-otp-head { margin-bottom: 20px; }
.sr-otp-icon { width: 72px; height: 72px; border-radius:50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sr-otp-icon svg { width: 34px; height: 34px; }
.sr-otp-title { font-size: 26px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.sr-otp-sub { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5; }
.sr-otp-wrap { justify-content: center; }
.sr-otp-input { text-align: center; font-size: 24px; font-weight: 700; letter-spacing: 8px; padding: 16px 12px; }
.sr-otp-timer { margin: 14px 0 18px; font-size: 14px; color: var(--muted); }
.sr-otp-timer b { color: var(--primary); font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---- নো-ইন্টারনেট ওভারলে (2026-10-18) ---- */
.sr-offline { position: fixed; inset: 0; z-index: 9999; background: var(--bg, #ffffff); display: flex; align-items: center; justify-content: center; padding: 24px; }
.sr-offline[hidden] { display: none; }
.sr-offline-box { text-align: center; max-width: 320px; }
.sr-offline-icon { width: 80px; height: 80px; border-radius:50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.sr-offline-icon svg { width: 40px; height: 40px; }
.sr-offline-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.sr-offline-text { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0 0 24px; }

/* ================= ৯. অফার কার্ড ================= */

/* ---- বেস সাদা অফার কার্ড (হরিজন্টাল লিস্ট) ---- */
.sr-offer {
  display: block; border-radius:var(--sr-card-radius); padding: 16px; text-align: left;
  background: #fff; border: 1px solid var(--border-soft, #edf2f0);
  box-shadow: var(--sr-card-shadow);
  position: relative; text-decoration: none; color: var(--text, #15211d); margin-bottom: 10px;
}
.sr-offer:active { transform: scale(.985); }
.sr-offer-op {
  font-family: var(--font-main); font-weight: 700; font-size: 13px;
  color: var(--sr-primary); letter-spacing: .4px;
}
.sr-offer-name { font-size: 16px; font-weight: 700; color: var(--text, #15211d); line-height: 1.45; margin: 8px 0 4px; letter-spacing: -.01em; }
.sr-offer-sub { font-size: 13px; color: var(--muted, #71827c); }
.sr-offer-note { font-size: 13px; color: var(--text-2, #43554f); margin: 5px 0; line-height: 1.55; }
.sr-offer-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; }
.sr-offer-price {
  font-size: 19px; font-weight: 700; color: var(--text, #15211d); letter-spacing: -.01em;
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
}
.sr-offer-buy {
  background: var(--primary); color: #fff;
  font-size: 13.5px; font-weight: 700; padding: 9px 20px; border-radius:999px; border: 0;
  box-shadow: var(--sr-btn-shadow), inset 0 1px 0 rgba(255, 255, 255, .18);
  min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-family: inherit;
}
.sr-offer-buy:active { transform: scale(.96); }
.sr-offer-item { margin-bottom: 12px; overflow: hidden; position: relative; }
.sr-offer-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sr-grad-btn); opacity: 0; transition: opacity .15s ease;
}
.sr-offer-item:active::before { opacity: 1; }
.sr-offer-validity {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--info, #3366a3);
  background: var(--info-soft, #eef0fd); border-radius:999px; padding: 3px 10px; margin-top: 6px;
}
.sr-offer-was {
  color: var(--muted, #71827c); font-size: 13.5px; font-weight: 500;
  margin-right: 8px; text-decoration-color: var(--error, #d9534f);
}

/* ---- .sr-offer-card — স্পেশাল অফার স্লাইডার ---- */
.sr-offer-row {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 2px 2px 10px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sr-offer-row::-webkit-scrollbar { display: none; }
/* হোম স্পেশাল-অফার স্লাইডার — প্রথম কার্ড ১২px মার্জিনে দেখায়, স্ক্রল ট্র্যাক ফুল-স্ক্রিন (2026-10-19, আতিক ভাই) */
.sr-offer-row:has(.sr-offer-card2){margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;scroll-padding-left:12px}
.sr-offer-card {
  position: relative; flex: 0 0 172px; scroll-snap-align: start;
  background: #fff; border: 1px solid var(--border-soft, #edf2f0);
  border-radius:16px; padding: 14px 12px;
  text-decoration: none; color: var(--text, #15211d);
  box-shadow: 0 10px 26px -12px rgba(16,60,50,.16);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}
.sr-offer-card:active { transform: scale(.97); }
.sr-offer-star {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius:50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .4); z-index: 2;
}
.sr-offer-star svg { width: 14px; height: 14px; color: #fff; fill: #fff; }
.sr-offer-card .sr-offer-op { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sr-primary); }
.sr-offer-card .sr-offer-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35; min-height: 36px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}
.sr-offer-card .sr-offer-price { font-size: 13px; margin-top: auto; }
.sr-offer-card .sr-offer-price s { color: var(--muted, #71827c); font-size: 11.5px; }
.sr-offer-card .sr-offer-price b { color: var(--text, #15211d); font-size: 15px; }

/* HOT গ্র্যাডিয়েন্ট অফার কার্ড (নীল→বেগুনি) */
.sr-offer-card.hot {
  background: var(--sr-grad-offer); border: 0; color: #fff;
  flex-basis: 264px; padding: 18px 16px; border-radius:var(--sr-card-radius);
  box-shadow: 0 14px 30px -12px rgba(51, 102, 163, .55);
  gap: 8px;
}
.sr-offer-card.hot .hot-badge {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  background: rgba(255, 255, 255, .24); color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  padding: 4px 12px; border-radius:999px;
}
.sr-offer-card.hot .sr-offer-op { color: rgba(255, 255, 255, .85); margin-left: auto; font-size: 13px; }
.sr-offer-card.hot .sr-offer-title {
  color: #fff; font-size: 19px; font-weight: 700; line-height: 1.4;
  min-height: 0; -webkit-line-clamp: 3; letter-spacing: -.01em;
}
.sr-offer-card.hot .sr-offer-price { color: rgba(255, 255, 255, .9); font-size: 14px; font-weight: 600; }
.sr-offer-card.hot .sr-offer-price b { color: #fff; font-size: 16px; }
.sr-offer-card.hot .white-pill {
  align-self: flex-start; background: #fff; color: #4b56b8;
  font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius:999px;
}
.sr-offer-card.hot .buy-circle {
  width: 54px; height: 54px; border-radius:50%; background: #fff; color: #4b56b8;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22); cursor: pointer; border: 0;
}
.sr-offer-card.hot .buy-circle svg { width: 24px; height: 24px; }
.sr-offer-card.hot .buy-circle:active { transform: scale(.92); }
.sr-offer-card.hot .hot-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 6px; }
.sr-offer-card.hot .hot-buy-label { font-size: 12.5px; font-weight: 700; color: #fff; text-align: center; }
.sr-offer-grid { display: grid; gap: 14px; }

/* ড্রাইভ অফার ফ্লো */
.sr-drive-card { text-decoration: none; color: inherit; display: block; }
.sr-drive-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sr-drive-card-top .sr-offer-op-logo { width: 44px; height: 28px; }
.sr-drive-card-top .sr-offer-op-mark { width: 40px; height: 40px; font-size: 17px; border-radius:12px; }
.sr-drive-card-title { font-size: 15px; font-weight: 700; color: var(--text, #15211d); line-height: 1.4; }
.sr-drive-validity {
  display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--primary-dark, #0b463a);
  background: var(--sr-mint); border-radius:999px; padding: 3px 10px; margin: 4px 0;
}

/* ===== প্রফেশনাল অফার কার্ড (Airtel-রেফারেন্স স্টাইল) — 2026-10-18 =====
   পরিষ্কার সাদা কার্ড: উপরে অপারেটর নাম + HOT ব্যাজ, বড় বোল্ড টাইটেল,
   মিউটেড সাবটাইটেল, নিচে দাম + ব্র্যান্ড-সবুজ "কিনুন" পিল বাটন। */
.sr-offercard {
  display: block; background: #fff; border-radius:20px;
  border: 1px solid var(--border-soft, #edf2f0);
  box-shadow: 0 10px 28px -12px rgba(16, 42, 36, .14);
  padding: 20px; margin-bottom: 14px; position: relative;
  text-decoration: none; color: var(--text, #15211d);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sr-offercard:active { transform: scale(.985); }
.sr-offercard-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sr-offercard-op {
  font-size: 14px; font-weight: 700; letter-spacing: .2px;
  color: var(--primary, #106050);
}
/* HOT ব্যাজ — সফট অরেঞ্জ পিল (হোম স্লাইডারের .sr-offer-hot-এও একই স্টাইল) */
.sr-offer-hot {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #b45309; background: #fdf1e0;
  border: 1px solid #fbe3c2; border-radius:999px; padding: 4px 12px;
}
.sr-offercard-title {
  font-size: 20px; font-weight: 700; color: var(--text, #15211d);
  line-height: 1.4; letter-spacing: -.01em; margin: 8px 0 0;
}
.sr-offercard-sub {
  font-size: 13.5px; color: var(--muted, #71827c); line-height: 1.55; margin: 6px 0 0;
}
.sr-offercard-note {
  font-size: 13px; color: var(--text-2, #43554f); line-height: 1.6; margin: 6px 0 0;
}
.sr-offercard-foot {
  margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sr-offercard-price {
  font-size: 23px; font-weight: 700; color: var(--text, #15211d); letter-spacing: -.01em;
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
}
.sr-offercard-price s {
  display: block; font-size: 13.5px; font-weight: 500; color: var(--muted, #71827c);
  text-decoration-color: var(--error, #d9534f);
}
button.sr-offercard-buy, .sr-offercard-buy {
  background: linear-gradient(135deg, var(--primary, #106050), var(--primary-dark, #0b463a));
  color: #fff; font-size: 15px; font-weight: 700;
  padding: 12px 30px; border-radius:999px; border: 0; cursor: pointer; font-family: inherit;
  box-shadow:none
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap; flex: none;
}
button.sr-offercard-buy:active, .sr-offercard-buy:active { transform: scale(.95); }
.sr-offercard-buy-form { margin: 0; }
.sr-drive-detail-head { display: flex; align-items: center; gap: 12px; }
.sr-drive-op-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sr-offer-op-logo { width: 56px; height: 36px; object-fit: contain; flex: none; }
.sr-offer-op-mark {
  width: 52px; height: 52px; border-radius:16px; display: grid; place-items: center; flex: none;
  background: var(--sr-mint); color: var(--primary-dark, #0b463a); font-size: 21px; font-weight: 700;
}
.sr-price-big {
  font-size: 18px; font-weight: 700; color: var(--text, #15211d);
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
}
.sr-drive-promo {
  background: var(--sr-grad-head); border-radius:var(--sr-card-radius);
  padding: 18px; color: #fff; display: flex; align-items: center; gap: 14px;
  text-decoration: none; margin-bottom: 12px;
  box-shadow: 0 12px 28px -14px rgba(15, 23, 20, .5);
}
.sr-drive-promo-ic {
  width: 52px; height: 52px; border-radius:16px; background: rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.sr-drive-promo-ic svg { width: 26px; height: 26px; }
.sr-drive-promo-tx { flex: 1; min-width: 0; }
.sr-drive-promo-t { font-size: 15px; font-weight: 700; }
.sr-drive-promo-s { font-size: 12.5px; opacity: .75; }
.sr-drive-promo-arr { flex: none; opacity: .7; }
.sr-drive-promo-arr svg { width: 20px; height: 20px; }
.sr-level-banner {
  background: var(--sr-mint); border-radius:var(--sr-card-radius);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.sr-level-banner-ic {
  width: 48px; height: 48px; border-radius:12px; background: var(--sr-svc-yellow); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.sr-level-banner-ic svg { width: 24px; height: 24px; }
.sr-level-banner-tx { flex: 1; min-width: 0; }
.sr-level-banner-t { font-size: 14px; font-weight: 700; color: var(--text, #15211d); }
.sr-level-banner-s { font-size: 12.5px; color: var(--muted, #71827c); }
.sr-level-banner-arr { flex: none; opacity: .7; }
.sr-level-banner-arr svg { width: 20px; height: 20px; }
.sr-level-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--sr-svc-yellow); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius:999px; margin-top: 4px; }
.sr-level-pill-ic .material-symbols-rounded { font-size: 13px; }
/* ---- লেভেল ডিটেইলে ডেইলি চেক-ইন সেকশন (2026-10-20, v61 টাস্ক ৬) ---- */
.sr-checkin-sec { margin-top: 20px; }

/* ================= ১০. লেনদেন লিস্ট ================= */

/* ---- .sr-txn-row — কার্ড স্টাইল লেনদেন রো ---- */
.sr-txn-row {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border-radius:16px;
  border: 1px solid var(--border-soft, #edf2f0);
  box-shadow: var(--sr-card-shadow);
  padding: 13px 14px; margin-bottom: 10px;
  width: 100%; text-align: left; text-decoration: none; color: inherit;
  font-family: inherit; cursor: pointer; border-bottom: 1px solid var(--border-soft, #edf2f0);
  transition: transform .13s ease;
}
.sr-txn-row:active { transform: scale(.985); }
.sr-txn-row .sr-txn-ic {
  width: 46px; height: 46px; border-radius:12px;
  display: grid; place-items: center; flex: none;
  background: var(--sr-mint); color: var(--sr-primary);
}
.sr-txn-row .sr-txn-ic svg { width: 23px; height: 23px; }
.sr-txn-row .sr-txn-tt { flex: 1; min-width: 0; }
.sr-txn-row .sr-txn-tt b {
  display: block; font-size: 14.5px; font-weight: 700; color: var(--text, #15211d);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-txn-row .sr-txn-tt span { font-size: 12.5px; color: var(--muted, #71827c); display: block; margin-top: 2px; }
.sr-txn-row .sr-txn-ta { text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.sr-txn-row .sr-txn-ta b { font-size: 15px; color: var(--text, #15211d); display: block; font-family: var(--font-main); }
.sr-txn-row .sr-txn-ta .sr-badge { margin-top: 5px; }
.sr-txn-row.c-green .sr-txn-ic { background: var(--sr-mint); color: var(--sr-primary); }
.sr-txn-row.c-gold .sr-txn-ic { background: var(--warning-soft); color: #c07f16; }
.sr-txn-row.c-blue .sr-txn-ic { background: var(--info-soft); color: var(--info); }
.sr-txn-row.c-red .sr-txn-ic { background: var(--error-soft); color: #b84a47; }

/* ---- .sr-hist-card — হিস্টরি কমপ্যাক্ট কার্ড (উপরে স্ট্যাটাস, নাম/মোবাইল/সময়, পাশে অ্যামাউন্ট) ---- */
.sr-hist-list { display: flex; flex-direction: column; gap: 10px; margin: 0 -16px; }
.sr-hist-card {
  display: block; width: 100%; text-align: left;
  background: #fff; border-radius:0;
  border-top: 1px solid var(--border-soft, #edf2f0);
  border-bottom: 1px solid var(--border-soft, #edf2f0);
  border-left: 0; border-right: 0;
  padding: 10px 16px 12px; cursor: pointer; font-family: inherit; color: inherit;
  transition: transform .13s ease;
}
.sr-hist-card:active { transform: scale(.985); }
.sr-hist-top { display: block; margin-bottom: 6px; }
.sr-hist-main { display: flex; gap: 12px; align-items: center; }
.sr-hist-info { flex: 1; min-width: 0; }
.sr-hist-info b {
  display: block; font-size: 14.5px; font-weight: 700; color: var(--text, #15211d);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-hist-mobile, .sr-hist-time {
  display: block; font-size: 12.5px; color: var(--muted, #71827c); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* অপারেটর গোল আইকন — হিস্ট্রিতে নাম্বারের আগে (2026-10-19, আতিক ভাই) */
.sr-hist-mobile { display: flex; align-items: center; gap: 6px; }
.sr-op-ic {
  flex: none; width: 22px; height: 22px; border-radius:50%;
  background: var(--primary-mist, #eef4f2); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; overflow: hidden; box-shadow: 0 2px 6px rgba(16,40,32,.22),0 0 0 2px #fff;}
.sr-op-ic img { width: 100%; height: 100%; object-fit: cover; }
.sr-hist-amt {
  flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  font-family: var(--font-main);
}
.sr-amt-credit { color: var(--success); }
.sr-amt-debit { color: var(--text, #15211d); }

/* ---- প্লেইন লিস্ট রো (ডিভাইডার) ---- */
.sr-txn {
  display: flex; gap: 12px; padding: 14px 2px;
  border-bottom: 1px solid var(--border-soft, #edf2f0);
  align-items: center; width: 100%; text-align: left;
  background: none; border-top: 0; border-left: 0; border-right: 0;
  font-family: inherit; cursor: pointer; color: inherit; text-decoration: none;
}
.sr-txn:last-child { border-bottom: none; }
.sr-txn-ic {
  width: 46px; height: 46px; border-radius:12px;
  display: grid; place-items: center; flex: none;
  background: var(--sr-mint); color: var(--sr-primary);
}
.sr-txn-ic svg { width: 23px; height: 23px; }
.sr-txn-tt { flex: 1; min-width: 0; }
.sr-txn-tt b {
  display: block; font-size: 14.5px; color: var(--text, #15211d);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700;
}
.sr-txn-tt span { font-size: 12.5px; color: var(--muted, #71827c); }
.sr-txn-ta { text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.sr-txn-ta b { font-size: 15px; color: var(--text, #15211d); display: block; font-family: var(--font-main); }
.sr-txn-credit, .sr-amount-credit { color: var(--success, #0f766e); }
.sr-txn-debit { color: var(--text, #15211d); }
.sr-txn-list { padding-top: 6px !important; padding-bottom: 6px !important; }

/* স্ট্যাটাস ব্যাজ */
.sr-badge-wrap { margin-bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.sr-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700;
  padding: 4px 11px; border-radius:999px; line-height: 1.4;
}
.sr-badge-success, .sr-badge-ok { background: var(--success-soft); color: var(--success); }
.sr-badge-warning { background: var(--warning-soft); color: #b97a1a; }
.sr-badge-error, .sr-badge-danger { background: var(--error-soft); color: var(--error); }
.sr-badge-info { background: var(--info-soft); color: var(--info); }
.sr-badge-muted, .sr-badge-off { background: #eef0f4; color: var(--text-2); }

/* ================= ১১. ফিল্টার পিল =================
   .sr-pill — active = সবুজ filled */
.sr-pill {
  flex: none; border: 1.5px solid var(--border, #e3eae7);
  background: #fff; color: var(--text-2, #43554f);
  border-radius:999px; padding: 10px 20px;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; min-height: 44px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sr-pill.is-active {
  background: var(--sr-grad-btn); border-color: transparent; color: #fff;
  box-shadow: var(--sr-btn-shadow), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.sr-pill:active { transform: scale(.96); }
/* পুরনো chip নামে একই স্টাইল */
.sr-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sr-chips::-webkit-scrollbar { display: none; }
.sr-chip {
  flex: none; border: 1.5px solid var(--border, #e3eae7);
  background: #fff; color: var(--text-2, #43554f);
  border-radius:999px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; min-height: 44px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sr-chip.is-active { background: var(--sr-primary); border-color: var(--sr-primary); color: #fff; box-shadow: var(--sr-btn-shadow); }
.sr-chip:active { transform: scale(.96); }
.sr-amt-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ================= ১২. স্ট্যাট কার্ড (২ কলাম) ================= */
.sr-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.sr-stat-card {
  background: #fff; border-radius:var(--sr-card-radius);
  padding: 16px; box-shadow: var(--sr-card-shadow);
  border: 1px solid var(--border-soft, #edf2f0);
}
.sr-stat-ic {
  width: 42px; height: 42px; border-radius:12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.sr-stat-ic svg { width: 21px; height: 21px; }
.sr-stat-ic.c-green { background: var(--sr-primary); }
.sr-stat-ic.c-gold { background: var(--sr-svc-yellow); }
.sr-stat-ic.c-blue { background: var(--sr-svc-blue); }
.sr-stat-ic.c-teal { background: var(--sr-svc-teal); }
.sr-stat-ic.c-red { background: var(--sr-svc-red); }
.sr-stat-ic.c-purple { background: var(--sr-svc-purple); }
.sr-stat-label { font-size: 12px; color: var(--muted, #71827c); margin-bottom: 3px; font-weight: 500; }
.sr-stat-val {
  font-size: 20px; font-weight: 700; color: var(--text, #15211d);
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.sr-stat-sub { font-size: 11.5px; color: #16a34a; font-weight: 600; margin-top: 4px; }
.sr-stat-sub.down { color: var(--error, #d9534f); }
/* প্রোফাইল স্ট্যাট (ছোট) */
.sr-stat-row { display: flex; gap: 10px; margin-top: 16px; }
.sr-stat { flex: 1; background: var(--primary-mist, #f2f7f5); border-radius:12px; padding: 10px; text-align: center; }
.sr-stat b { display: block; font-size: 16px; color: var(--text, #15211d); font-variant-numeric: tabular-nums; }
.sr-stat span { font-size: 12px; color: var(--muted, #71827c); }

/* ================= ১৩. সাপ্তাহিক বার চার্ট (CSS বার) ================= */
.sr-bar-chart {
  background: #fff; border-radius:var(--sr-card-radius);
  padding: 18px; box-shadow: var(--sr-card-shadow);
  border: 1px solid var(--border-soft, #edf2f0);
}
.sr-bar-chart-title { font-size: 16px; font-weight: 700; margin-bottom: 2px; letter-spacing: -.01em; }
.sr-bar-chart-sub { font-size: 12.5px; color: var(--muted, #71827c); margin-bottom: 14px; }
.sr-bars { display: flex; align-items: flex-end; gap: 10px; height: 168px; border-bottom: 1px solid var(--border-soft, #edf2f0); padding-bottom: 2px; }
.sr-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.sr-bar-val {
  font-size: 10.5px; font-weight: 700; color: var(--text-2, #43554f);
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sr-bar {
  width: 100%; max-width: 42px; min-height: 5px;
  border-radius:8px 8px 4px 4px;
  background: linear-gradient(180deg, #14705c 0%, var(--sr-primary) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: height .4s ease;
}
.sr-bar.is-max { background: linear-gradient(180deg, #0b4a3c 0%, var(--sr-deep) 100%); }
.sr-bar.is-low { background: #9dc3b8; }
.sr-bar-label { font-size: 10.5px; color: var(--muted, #71827c); font-weight: 500; }

/* ================= ১৪. বটম নেভ =================
   হোম | ইতিহাস | ড্যাশবোর্ড | প্রোফাইল — active = সবুজ */
.sr-bottom-nav, .sr-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid var(--border-soft, #edf2f0);
  display: flex; z-index: 30;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 20px rgba(16, 42, 36, .05);
  /* (2026-10-20, v63): নিজস্ব কম্পোজিট লেয়ার — Chrome-এ fixed রেন্ডার গ্লিচে নেভ নিচে নামে না */
  transform: translateZ(0);
}
.sr-bnav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px 8px; text-decoration: none;
  color: var(--muted, #71827c); font-size: 11px; font-weight: 600;
  min-height: 44px; position: relative;
  transition: color .15s ease;
}
.sr-bnav-item svg { width: 24px; height: 24px; }
.sr-bnav-item.is-active { color: var(--sr-primary); }
.sr-bnav-item.is-active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3.5px; border-radius:0 0 4px 4px; background: var(--sr-primary);
}
.sr-bnav-item:active { color: var(--sr-primary); }

/* ================= ১৫. লিমিট কার্ড =================
   লিমিট কার্ড + প্রগ্রেস বার */
.sr-limit-card {
  background: #fff; border-radius:var(--sr-card-radius);
  padding: 18px; box-shadow: var(--sr-card-shadow);
  border: 1px solid var(--border-soft, #edf2f0);
  margin-bottom: 14px;
}
.sr-limit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sr-limit-ic {
  width: 46px; height: 46px; border-radius:12px;
  display: grid; place-items: center; flex: none;
  background: var(--sr-mint); color: var(--sr-primary);
}
.sr-limit-ic svg { width: 23px; height: 23px; }
.sr-limit-ic .material-symbols-rounded { font-size: 26px; }
.sr-limit-title { font-size: 16px; font-weight: 700; color: var(--text, #15211d); }
.sr-limit-row { margin-bottom: 12px; }
.sr-limit-row:last-child { margin-bottom: 0; }
.sr-limit-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sr-limit-label { font-size: 13.5px; color: var(--text-2, #43554f); font-weight: 600; }
.sr-limit-label b { color: var(--text, #15211d); }
.sr-limit-amt {
  font-size: 13.5px; font-weight: 700;
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sr-limit-amt .used { color: #16a34a; }
.sr-limit-amt .total { color: var(--text, #15211d); }
.sr-limit-bar { height: 8px; background: var(--border-soft); border-radius:999px; overflow: hidden; }
.sr-limit-fill {
  height: 100%; border-radius:999px;
  background: var(--sr-grad-btn);
  transition: width .5s ease;
}
.sr-limit-fill.is-full { background: linear-gradient(180deg, #e0645f, var(--error)); }
.sr-limit-remaining { font-size: 12.5px; color: var(--muted, #71827c); margin-top: 5px; }
/* পুরনো লিমিট স্টাইল */
.app-limit { margin-bottom: 10px; }
.app-limit-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2, #43554f); margin-bottom: 4px; }
.app-limit-bar { height: 8px; background: var(--border-soft, #edf2f0); border-radius:999px; overflow: hidden; }
.app-limit-fill { height: 100%; background: var(--sr-primary); border-radius:999px; }

/* ================= ১৬. ডেইলি রিওয়ার্ড স্ট্রিক (৭ দিন) ================= */
.sr-streak {
  background: #fff; border-radius:var(--sr-card-radius);
  padding: 18px; box-shadow: var(--sr-card-shadow);
  border: 1px solid var(--border-soft, #edf2f0);
  margin-bottom: 14px;
}
.sr-streak-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sr-streak-title { font-size: 16px; font-weight: 700; margin: 0; }
.sr-streak-sub { font-size: 12.5px; color: var(--muted, #71827c); margin-top: 3px; }
.sr-streak-badge {
  width: 48px; height: 48px; flex: none; border-radius:16px;
  background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(249, 115, 22, .5);
}
.sr-streak-badge svg { width: 24px; height: 24px; }
.sr-streak-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 14px; }
.sr-streak-day {
  border: 1.5px solid var(--border-soft, #edf2f0); border-radius:12px; padding: 10px 4px;
  text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center;
  background: #fff;
}
.sr-streak-day .dname { font-size: 11px; color: var(--text-2, #43554f); font-weight: 600; }
.sr-streak-day .dcoins {
  font-size: 15px; font-weight: 700; color: var(--text, #15211d);
  font-family: var(--font-main); font-variant-numeric: tabular-nums;
}
.sr-streak-day .dstate {
  width: 22px; height: 22px; border-radius:50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #ffffff); color: var(--muted, #71827c);
}
.sr-streak-day .dstate svg { width: 13px; height: 13px; }
.sr-streak-day.is-done { border-color: #bbf7d0; background: #f0fdf4; }
.sr-streak-day.is-done .dstate { background: #22c55e; color: #fff; }
.sr-streak-day.is-done .dcoins { color: #16a34a; }
.sr-streak-day.is-today {
  border-color: var(--sr-primary); background: var(--sr-mint);
  box-shadow: 0 6px 16px -8px rgba(16, 96, 80, .4);
}
.sr-streak-day.is-today .dstate { background: var(--sr-primary); color: #fff; }
.sr-streak-day.is-lock { opacity: .55; }
/* ড্যাশবোর্ড স্ট্রিপ */
.sr-streak-strip {
  display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 13px 16px;
  border-radius:16px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #0b6e4f, #0a5c42);
  box-shadow: 0 10px 22px -10px rgba(15, 23, 20, .5);
  font-weight: 600; font-size: 14px;
}
.sr-streak-strip svg { width: 20px; height: 20px; flex: none; }
.sr-streak-strip span { flex: 1; }
.sr-streak-strip.is-done { background: #fff; color: var(--text, #15211d); border: 1.5px solid var(--border-soft, #edf2f0); box-shadow: none; }
.sr-streak-strip.is-done svg:first-child { color: #22c55e; }
/* পুরনো checkin নামে একই স্টাইল */
.sr-checkin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sr-checkin-badge {
  width: 48px; height: 48px; flex: none; border-radius:16px;
  background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(249, 115, 22, .5);
}
.sr-checkin-badge svg { width: 24px; height: 24px; }
.sr-checkin-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 14px; }
.sr-checkin-day {
  border: 1.5px solid var(--border-soft, #edf2f0); border-radius:12px; padding: 10px 4px;
  text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center;
  background: var(--surface, #fff);
}
.sr-checkin-day .dname { font-size: 11px; color: var(--text-2, #43554f); font-weight: 600; }
.sr-checkin-day .dcoins { font-size: 15px; font-weight: 700; color: var(--text, #15211d); font-family: var(--font-main); }
.sr-checkin-day .dstate { width: 22px; height: 22px; border-radius:50%; display: flex; align-items: center; justify-content: center; }
.sr-checkin-day .dstate svg { width: 13px; height: 13px; }
.sr-checkin-day.is-done { border-color: #bbf7d0; background: #f0fdf4; }
.sr-checkin-day.is-done .dstate { background: #22c55e; color: #fff; }
.sr-checkin-day.is-done .dcoins { color: #16a34a; }
.sr-checkin-day.is-today { border-color: var(--sr-primary); background: var(--sr-mint); box-shadow: 0 6px 16px -8px rgba(16, 96, 80, .4); }
.sr-checkin-day.is-today .dstate { background: var(--sr-primary); color: #fff; }
.sr-checkin-day.is-lock { opacity: .55; }
.sr-checkin-day.is-lock .dstate { background: var(--bg, #ffffff); color: var(--muted, #71827c); }
.sr-checkin-strip {
  display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 13px 16px;
  border-radius:16px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #0b6e4f, #0a5c42);
  box-shadow: 0 10px 22px -10px rgba(15, 23, 20, .5); font-weight: 600; font-size: 14px;
}
.sr-checkin-strip svg { width: 20px; height: 20px; flex: none; }
.sr-checkin-strip span { flex: 1; }
.sr-checkin-strip.is-done { background: var(--surface, #fff); color: var(--text, #15211d); border: 1.5px solid var(--border-soft, #edf2f0); box-shadow: none; }
.sr-checkin-strip.is-done svg:first-child { color: #22c55e; }

/* ================= ১৭. হলুদ টিপস কার্ড ================= */
.sr-tips {
  background: var(--sr-tips-bg);
  border: 1px solid var(--sr-tips-border);
  border-radius:var(--sr-card-radius);
  padding: 16px 18px; margin-bottom: 14px;
  display: flex; gap: 12px; align-items: flex-start;
  box-shadow: 0 4px 16px rgba(232, 163, 61, .1);
}
.sr-tips-ic { width: 40px; height: 40px; flex: none; border-radius:12px; background: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 3px 10px rgba(232, 163, 61, .18); }
.sr-tips-tx { flex: 1; min-width: 0; }
.sr-tips-title { font-size: 15px; font-weight: 700; color: #7c5410; margin: 0 0 5px; }
.sr-tips p { font-size: 13px; color: #8a6a2a; line-height: 1.6; margin: 0; }
.sr-tips a { color: var(--sr-primary); font-weight: 700; font-size: 13.5px; text-decoration: none; flex: none; }
.sr-tips a:active { text-decoration: underline; }

/* ================= ১৮. ড্যাশবোর্ড হিরো (ডার্ক গ্রিন) ================= */
.sr-dash-hero {
  background: var(--sr-grad-head);
  color: #fff; border-radius:20px; padding: 22px 20px;
  position: relative; overflow: hidden;
  box-shadow: 0 20px 44px -20px rgba(15, 23, 20, .5);
  border: 1px solid rgba(255, 255, 255, .08);
}
.sr-dash-hero > * { position: relative; z-index: 1; }
.sr-dash-hero .sr-user-top { margin-bottom: 2px; }
.sr-dash-hero .sr-avatar {
  background: rgba(255, 255, 255, .16); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .35);
  box-shadow: none;
}
.sr-dash-hero .sr-user-name { color: #fff; }
.sr-dash-hero .sr-user-num { color: rgba(255, 255, 255, .72); }
.sr-dash-hero .sr-type-chip { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.sr-dash-hero .sr-bal-row { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 16px; padding-top: 16px; }
.sr-dash-hero .sr-bal-label { color: rgba(255, 255, 255, .7); font-size: 12.5px; font-weight: 500; }
.sr-dash-hero .sr-bal-amt { color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.sr-dash-hero .sr-add-bal {
  background: #fff; color: var(--primary-dark, #0b463a);
  font-weight: 700; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4);
  min-height: 44px;
}
.sr-dash-hero .sr-add-bal:active { transform: scale(.96); }

/* ওয়ালেট হিরো কার্ড */
.app-hero {
  background: var(--sr-grad-head);
  color: #fff; border-radius:var(--sr-card-radius);
  padding: 20px; margin-bottom: 14px;
  position: relative; overflow: hidden;
  box-shadow: 0 16px 36px -18px rgba(15, 23, 20, .5);
  border: 1px solid rgba(255, 255, 255, .08);
}
.app-hero::after {
  content: ""; position: absolute; right: -38px; top: -48px;
  width: 140px; height: 140px; border-radius:50%;
  border: 22px solid rgba(255, 255, 255, .08);
}
.app-hero > * { position: relative; z-index: 1; }
.app-hero .app-hero-label { font-size: 13px; opacity: .85; }
.app-hero .app-hero-amount {
  font-size: 32px; font-weight: 700; margin: 4px 0 2px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  font-family: var(--font-main);
}
.app-hero .app-hero-sub { font-size: 13px; opacity: .85; }
.app-hero .app-hero-hold { font-size: 13px; opacity: .9; margin-top: 4px; }

/* ================= ১৯. ব্যানার স্লাইডার ================= */
.sr-banner {
  position: relative; border-radius:16px; overflow: hidden;
  margin: 14px 0 4px; box-shadow: var(--sr-card-shadow); background: var(--sr-mint);
}
.sr-banner-track { position: relative; aspect-ratio: 16/7; }
.sr-banner-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; display: block; }
.sr-banner-slide.is-active { opacity: 1; z-index: 1; }
.sr-banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-banner-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 2; }
.sr-banner-dot { width: 7px; height: 7px; border-radius:50%; border: 0; background: rgba(255, 255, 255, .55); cursor: pointer; padding: 0; transition: width var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), border-radius var(--dur-base) var(--ease); }
.sr-banner-dot.is-active { width: 22px; border-radius:4px; background: #fff; }

/* ================= ২০. ফর্ম ================= */
.sr-field { margin-bottom: 14px; }
.sr-form-card { overflow: hidden; }
.sr-form-card .sr-card-head { margin-bottom: 18px; font-size: 16px; font-weight: 700; }
.sr-form-card .sr-input, .sr-form-card .sr-select { background: var(--bg, #ffffff); }
.sr-form-card .sr-input:focus, .sr-form-card .sr-select:focus { background: #fff; }
.sr-form-narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.sr-card-head { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.sr-inline-form { margin: 0; }
.sr-row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-row-highlight {
  background: var(--sr-mint); border-radius:12px;
  padding-top: 10px !important; padding-bottom: 10px !important;
  padding-left: 12px; padding-right: 12px;
  margin-left: -12px; margin-right: -12px;
}
.sr-input.is-error { border-color: #dc2626; }

/* অ্যামাউন্ট চিপ (৪-কলাম গ্রিড) */
.app-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 4px; }
.app-chips button {
  border: 1.5px solid var(--border, #e3eae7); background: #fff;
  border-radius:12px; padding: 11px 0;
  font-weight: 700; font-size: 15px; color: var(--text-2, #43554f);
  font-family: inherit; cursor: pointer; min-height: 44px;
  font-variant-numeric: tabular-nums;
  transition: border-color .13s ease, background .13s ease, color .13s ease, box-shadow .13s ease;
}
.app-chips button.is-active, .app-chips button:active {
  border-color: var(--sr-primary); background: var(--sr-mint); color: var(--primary-dark, #0b463a);
  box-shadow: 0 3px 10px -5px rgba(16, 96, 80, .4);
}

/* সার্চ বক্স */
.sr-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border, #e3eae7);
  border-radius:16px; padding: 0 14px; margin-bottom: 12px;
}
.sr-search svg { width: 20px; height: 20px; color: var(--muted, #71827c); flex: none; }
.sr-search input {
  flex: 1; border: 0; outline: 0; font-size: 15px; font-family: inherit;
  padding: 14px 0; background: none; color: var(--text, #15211d); min-height: 44px;
}

/* সেগমেন্টেড কন্ট্রোল / ট্যাব */
.sr-seg {
  display: flex; gap: 4px; background: var(--bg, #ffffff);
  border-radius:12px; padding: 4px; margin-bottom: 14px;
}
.sr-seg-item {
  flex: 1; border: 0; background: none; border-radius:12px;
  padding: 10px 6px; font-size: 13.5px; font-weight: 600; font-family: inherit;
  color: var(--text-2, #43554f); cursor: pointer; min-height: 44px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sr-seg-item.is-active { background: #fff; color: var(--sr-primary); font-weight: 700; box-shadow: var(--sr-card-shadow); }
.sr-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border-soft, #edf2f0); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.sr-tabs::-webkit-scrollbar { display: none; }
.sr-tab {
  flex: none; border: 0; background: none; padding: 12px 16px;
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  color: var(--muted, #71827c); cursor: pointer; position: relative; min-height: 44px;
  white-space: nowrap; scroll-snap-align: start;
}
.sr-tab.is-active { color: var(--sr-primary); font-weight: 700; }
.sr-tab.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px;
  height: 3px; border-radius:4px 4px 0 0; background: var(--sr-primary);
}

/* অপারেটর চিপ (রিচার্জ) */
.sr-op-chips {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 6px 2px 12px; margin: 0 -2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sr-op-chips::-webkit-scrollbar { display: none; }
.sr-op-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 78px; min-height: 76px; padding: 10px 12px 9px;
  background: #fff; border: 1.5px solid var(--border, #e3eae7);
  border-radius:16px; text-decoration: none; color: inherit; font-family: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.sr-op-chip:active { transform: scale(.96); }
.sr-op-chip.is-active { background: var(--sr-mint); border-color: var(--sr-primary); box-shadow: 0 4px 12px -6px rgba(16, 96, 80, .35); }
.sr-op-logo { width: 44px; height: 28px; object-fit: contain; }
.sr-op-mark {
  width: 44px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sr-grad-btn); color: #fff; font-weight: 700; font-size: 15px;
  border-radius:8px; font-family: var(--font-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.sr-op-name { font-size: 11.5px; font-weight: 600; color: var(--text-2, #43554f); letter-spacing: .01em; }
.sr-op-chip.is-active .sr-op-name { color: var(--primary-dark, #0b463a); font-weight: 700; }
.sr-op-select { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; text-align: left; font-family: inherit; }
.sr-op-select svg { width: 18px; height: 18px; color: var(--muted, #71827c); flex: none; }
.sr-op-sheet-list { display: grid; gap: 8px; }
.sr-op-sheet-list .sr-op-chip {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 1.5px solid var(--border, #e3eae7); border-radius:12px;
  background: #fff; cursor: pointer; font-family: inherit; font-size: 15px;
  text-align: left; color: var(--text, #15211d);
}
.sr-op-sheet-list .sr-op-chip:active { border-color: var(--sr-primary); background: var(--sr-mint); }
.sr-recent-chips button { font-variant-numeric: tabular-nums; }
.sr-per-k { font-size: 12px; color: var(--muted, #71827c); font-weight: 400; }

/* অপারেটর টাইল গ্রিড (ড্রাইভ) */
.sr-op-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sr-op-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border-soft, #edf2f0);
  border-radius:16px; padding: 18px 8px 14px; text-decoration: none; color: inherit;
  box-shadow: var(--sr-card-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 44px; font-family: inherit; cursor: pointer;
}
.sr-op-tile:active { transform: scale(.97); }
.sr-op-tile-logo { width: 52px; height: 34px; object-fit: contain; }
.sr-op-tile-mark {
  width: 52px; height: 52px; border-radius:16px; display: grid; place-items: center;
  background: var(--sr-mint); color: var(--primary-dark, #0b463a);
  font-size: 22px; font-weight: 700; font-family: var(--font-main);
}
.sr-op-tile-name { font-size: 13.5px; font-weight: 700; color: var(--text, #15211d); text-align: center; line-height: 1.35; }
.sr-op-tile-count { font-size: 11.5px; color: var(--text-2, #43554f); }

/* ================= ২১. ডিটেইল / সামারি / রসিদ ================= */
.sr-detail-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft, #edf2f0); font-size: 14px;
}
.sr-detail-row:last-child { border-bottom: 0; }
.sr-detail-row .k { color: var(--muted, #71827c); }
.sr-detail-row .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sr-detail-total { font-weight: 700; font-size: 15.5px; }
.sr-summary {
  background: var(--primary-mist, #f2f7f5); border-radius:12px;
  padding: 14px 16px; margin: 16px 0;
}
.sr-summary .sr-detail-row { border-bottom: 0; padding: 5px 0; font-size: 14px; }
.sr-summary .sr-detail-row.is-total {
  border-top: 1px dashed var(--border, #e3eae7);
  margin-top: 7px; padding-top: 10px; font-weight: 700; font-size: 15.5px;
}
.sr-receipt {
  background: var(--primary-mist, #f2f7f5); border-radius:12px;
  padding: 15px 17px; margin: 0 0 16px;
}
.sr-receipt .sr-detail-row { border-bottom: 0; padding: 5px 0; font-size: 14px; }
.sr-receipt-title { text-align: center; margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.sr-check-ring {
  width: 92px; height: 92px; border-radius:50%;
  background: var(--sr-mint); display: grid; place-items: center;
  color: var(--sr-primary); margin: 6px auto 10px;
  box-shadow: inset 0 0 0 6px rgba(16, 96, 80, .06);
}
.sr-check-ring svg { width: 44px; height: 44px; }
.sr-fee-preview {
  background: var(--sr-mint); border-radius:12px;
  padding: 10px 14px; font-size: 13px; color: var(--text-2, #43554f); margin: 10px 0;
}
tr.is-current { background: var(--primary-mist, #f2f7f5); }

/* ================= ২২. অ্যালার্ট ================= */
.sr-alert {
  border-radius:12px; padding: 12px 14px; font-size: 14px;
  margin-bottom: 14px; line-height: 1.55; border: 1.5px solid transparent;
}
.sr-alert-error { background: var(--error-soft, #fdeeed); color: var(--error, #d9534f); border-color: #f5c6c4; }
.sr-alert-success { background: var(--success-soft, #e6f4f1); color: var(--success, #0f766e); border-color: #bfe3dc; }
.sr-alert-info { background: var(--info-soft, #eef0fd); color: var(--info, #3366a3); border-color: #c9d6f2; }

/* ================= ২৩. মেনু লিস্ট (প্রোফাইল) ================= */
.sr-menu-list { padding: 6px 0; }
.sr-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; padding: 14px 16px;
  border: 0; border-bottom: 1px solid var(--border-soft, #edf2f0);
  font-size: 15px; font-weight: 600; color: var(--text, #15211d);
  background: #fff; font-family: inherit; cursor: pointer; text-decoration: none;
}
.sr-menu-item:last-child { border-bottom: none; }
.sr-menu-item:active { background: var(--primary-mist, #f2f7f5); }
.sr-menu-ic {
  width: 38px; height: 38px; border-radius:12px;
  background: var(--primary-mist, #f2f7f5); color: var(--sr-primary);
  display: grid; place-items: center; flex: none;
}
.sr-menu-ic svg { width: 18px; height: 18px; }
.sr-menu-chev { margin-left: auto; color: var(--muted, #71827c); width: 18px; height: 18px; flex: none; }
.sr-menu-item.danger { color: var(--error, #d9534f); }
.sr-menu-item.danger .sr-menu-ic { background: var(--error-soft, #fdeeed); color: var(--error, #d9534f); }
.sr-menu-langname { margin-left: auto; font-size: 13px; color: var(--muted, #71827c); font-weight: 600; }
.sr-menu-lang { margin-left: 10px; display: inline-flex; flex: none; }
.sr-menu-item .sr-menu-lang form { box-shadow: none; }

/* ================= ২৪. বিলার কার্ড ================= */
.sr-biller-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sr-biller-ic {
  width: 46px; height: 46px; border-radius:12px;
  display: grid; place-items: center; flex: none;
  background: var(--sr-mint); color: var(--sr-primary);
}
.sr-biller-ic svg { width: 23px; height: 23px; }
.sr-biller-name { font-size: 15px; font-weight: 700; color: var(--text, #15211d); }
.sr-biller-cat { font-size: 12.5px; color: var(--muted, #71827c); }

/* বিল ক্যাটাগরি গ্রিড */
.sr-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sr-cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 12px 16px; text-align: center; text-decoration: none;
  background: #fff; border: 1px solid var(--border-soft, #edf2f0);
  border-radius:16px; box-shadow: var(--sr-card-shadow);
  transition: transform .15s ease; min-height: 44px;
  font-family: inherit; cursor: pointer; color: inherit;
}
.sr-cat-card:active { transform: scale(.97); }
.sr-cat-ic {
  width: 52px; height: 52px; border-radius:16px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sr-mint), #e8f4ee); color: var(--sr-primary);
}
.sr-cat-ic svg { width: 26px; height: 26px; }
.sr-cat-name { font-weight: 700; font-size: 15px; color: var(--text, #15211d); }
.sr-cat-count { font-size: 12.5px; color: var(--text-2, #43554f); }

/* ================= ২৫. রেফারেল ================= */
.sr-refer-card {
  margin-top: 6px; background: var(--sr-deep); color: #fff;
  border-radius:var(--sr-card-radius); padding: 18px;
  position: relative; overflow: hidden;
}
.sr-refer-card h3 { margin: 0; font-size: 17.5px; font-weight: 700; color: #fff; }
.sr-refer-card p { margin: 4px 0 14px; font-size: 13.5px; opacity: .85; }
.sr-refer-hero { background: linear-gradient(135deg, #0b6e4f 0%, #0a4a37 100%); color: #fff; border: 0; padding: 22px; }
.sr-refer-hero-top { display: flex; align-items: center; justify-content: space-between; }
.sr-refer-hero .app-hero-label { color: rgba(255, 255, 255, .72); }
.sr-refer-hero .app-hero-sub { color: rgba(255, 255, 255, .85); }
.sr-refer-hero-ic {
  width: 56px; height: 56px; border-radius:16px; background: rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.sr-refer-hero-ic svg { width: 28px; height: 28px; }
.sr-code-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); border: 1px dashed rgba(255, 255, 255, .4); border-radius:12px; padding: 9px 12px; width: fit-content; max-width: 100%; }
.sr-code-row .code {
  font-family: var(--font-main); font-weight: 700; letter-spacing: 1.5px; font-size: 15px;
  flex: 1; background: var(--bg, #ffffff); border: 1.5px dashed var(--border, #e3eae7);
  border-radius:12px; padding: 10px 14px; text-align: center; letter-spacing: .06em; font-size: 17px;
}
.sr-coin-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 4px; font-size: 14.5px; }
.sr-coin-total b { font-size: 20px; color: var(--sr-primary); font-family: var(--font-main); }

/* ================= ২৬. সার্ভিস-বন্ধ নোটিস ================= */
.sr-service-off {
  text-align: center; padding: 36px 24px;
  background: #fff; border: 1px solid var(--border-soft, #edf2f0);
  border-radius:16px; margin: 16px 0; box-shadow: var(--sr-card-shadow);
}
.sr-service-off-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius:50%;
  background: #fef3f2; color: #d92d20;
  display: flex; align-items: center; justify-content: center;
}
.sr-service-off-icon svg { width: 32px; height: 32px; }
.sr-service-off-title { font-size: 17px; font-weight: 700; color: #101828; margin-bottom: 8px; }
.sr-service-off-reason { font-size: 14px; color: #475467; line-height: 1.6; max-width: 420px; margin: 0 auto; }

/* ================= ২৭. বিবিধ ================= */
.sr-hr { border: 0; border-top: 1px solid var(--border-soft, #edf2f0); margin: 14px 0; }
.sr-hint { font-size: 13px; color: var(--muted, #71827c); line-height: 1.6; }
.sr-muted { color: var(--text-2, #43554f); font-weight: 400; }
.sr-text-danger { color: var(--error, #d9534f); }
.sr-text-muted { color: var(--muted, #71827c); }
.app-footnote { text-align: center; color: var(--muted, #71827c); font-size: 12px; margin-top: 18px; line-height: 1.6; }
.app-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.app-service {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border-soft, #edf2f0);
  border-radius:12px; padding: 12px 4px; text-decoration: none;
  color: var(--text, #15211d); font-size: 12px;
}
.app-service svg { width: 26px; height: 26px; color: var(--sr-primary); }
.app-service:active { background: var(--sr-mint); }
.app-section-title { font-size: 16px; font-weight: 700; margin: 18px 0 10px; }
.sr-pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; }
.sr-pager-num { font-variant-numeric: tabular-nums; font-family: var(--font-main); }
.sr-success-pop { text-align: center; }
.sr-confetti { pointer-events: none; }

/* ইউটিলিটি */
.u-m0 { margin: 0 !important; }
.u-mt0 { margin-top: 0 !important; }
.u-mt8 { margin-top: 8px !important; }
.u-mt10 { margin-top: 10px; }
.u-mt12 { margin-top: 12px !important; }
.u-mt14 { margin-top: 14px !important; }
.u-mt16 { margin-top: 16px !important; }
.u-mb0 { margin-bottom: 0 !important; }
.u-mb12 { margin-bottom: 12px !important; }
.u-center { text-align: center !important; }
.sr-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sr-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ================= ২৮. রেসপন্সিভ ================= */

/* ছোট মোবাইল (≤380px) */
@media (max-width: 380px) {
  .sr-svc-grid { gap: 14px 4px; }
  .sr-svc-ic, .sr-svc8-ic { width: 50px; height: 50px; border-radius:16px; }
  .sr-svc-ic svg, .sr-svc8-ic svg { width: 24px; height: 24px; }
  .sr-auth-card { padding: 20px 16px !important; }
  .sr-band-auth .sr-logo-badge { width: 88px; height: 88px; box-shadow: 0 14px 30px -12px rgba(8, 56, 46, .35);}
  .sr-dash-hero { padding: 18px 16px; border-radius:20px; box-shadow: 0 20px 44px -20px rgba(8, 56, 46, .5);}
  .sr-dash-hero .sr-bal-amt { font-size: 26px; }
  .sr-op-chip { min-width: 70px; }
  .sr-checkin-grid, .sr-streak-grid { gap: 6px; }
  .sr-checkin-day, .sr-streak-day { padding: 8px 2px; border-radius:12px; }
  .sr-checkin-day .dcoins, .sr-streak-day .dcoins { font-size: 13px; }
  .sr-offer-card.hot { flex-basis: 240px; box-shadow: 0 14px 30px -12px rgba(51, 102, 163, .55);}
}

/* ট্যাবলেট (≥768px) */
@media (min-width: 768px) {
  .app-main { max-width: 720px; padding: 24px 24px 96px; }
  .sr-band { padding-left: 24px; padding-right: 24px; }
  .sr-svc-grid { grid-template-columns: repeat(4, 1fr); gap: 20px 12px; }
  .app-services { grid-template-columns: repeat(4, 1fr); }
  .sr-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .sr-dash-cols .sr-dash-recent .sr-sec-title { margin-top: 0; }
  .sr-dash-hero { padding: 26px 24px; box-shadow: 0 20px 44px -20px rgba(8, 56, 46, .5);}
  .sr-dash-hero .sr-bal-amt { font-size: 34px; }
  .sr-offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .sr-offer-grid .sr-offer-item { margin-bottom: 0; }
  .sr-form-narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
  .sr-banner-track { aspect-ratio: 16/5; }
  .sr-offer-row { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .sr-offer-card { flex: none; box-shadow: 0 10px 26px -12px rgba(16,60,50,.16);}
  .sr-offer-card.hot { flex: none; box-shadow: 0 14px 30px -12px rgba(51, 102, 163, .55);}
  .sr-op-tile-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .sr-op-tile { padding: 22px 10px 16px; box-shadow: var(--sr-card-shadow);}
  .sr-op-sheet-list { grid-template-columns: repeat(2, 1fr); }
  .sr-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ডেস্কটপ (≥1024px) */
@media (min-width: 1024px) {
  .app-main { max-width: 960px; padding: 32px 32px 96px; }
  .sr-band-row { max-width: 960px; margin: 0 auto; }
  .sr-green-head-row, .sr-white-head-row, .sr-hero-top, .sr-hero-body { max-width: 960px; }
  .sr-dash-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
  .sr-svc-grid { grid-template-columns: repeat(4, 1fr); }
  .sr-svc-ic { width: 62px; height: 62px; border-radius:20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -8px rgba(16, 42, 36, .35);}
  .sr-svc8-ic { width: 62px; height: 62px; border-radius:20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -8px rgba(16, 42, 36, .35);}
  .sr-offer-grid { grid-template-columns: repeat(3, 1fr); }
  .sr-profile-grid { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
  .sr-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .sr-op-tile-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}

/* বড় ডেস্কটপ (≥1280px) */
@media (min-width: 1280px) {
  .app-main { max-width: 1080px; }
  .sr-band-row { max-width: 1080px; }
  .sr-green-head-row, .sr-white-head-row, .sr-hero-top, .sr-hero-body { max-width: 1080px; }
}

/* ---- রেফারেন্স-ম্যাচ পেজ স্টাইল (রিচার্জ / ইতিহাস / ড্যাশবোর্ড / লিমিট) ---- */

/* আন্ডারলাইন ট্যাব (রিচার্জ: পরিমাণ | ইন্টারনেট | ...) */
.sr-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border-soft); margin: 4px 0 16px; -webkit-overflow-scrolling: touch; }
.sr-tab { flex: none; padding: 10px 14px 12px; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sr-tab.is-active { color: var(--text); font-weight: 700; border-bottom-color: var(--primary); }

/* রিসিভার ব্লক */
.sr-rcv { margin-bottom: 20px; }
.sr-rcv-row { display: flex; gap: 10px; align-items: center; }
.sr-rcv-input { flex: 1; }
.sr-square-btn { flex: none; width: 48px; height: 48px; border-radius:12px; border: 0; background: var(--primary-mist, #eef4f2); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sr-square-btn svg { width: 22px; height: 22px; }

/* অপারেটর রো */
.sr-op-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 14px 0; margin-bottom: 6px; cursor: pointer; font-family: inherit; }
.sr-op-row-label { font-size: 16px; font-weight: 700; color: var(--text); }
.sr-op-row-pick { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); font-weight: 500; }
.sr-op-row-pick svg { width: 18px; height: 18px; }
.sr-type-row { margin-bottom: 16px; }

/* বড় অ্যামাউন্ট ইনপুট */
.sr-big-amount { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--border); padding: 6px 2px 10px; }
.sr-big-amount-sym { font-size: 30px; font-weight: 700; color: var(--primary); }
.sr-big-amount input { flex: 1; border: 0; outline: 0; background: none; font-size: 28px; font-weight: 600; color: var(--text); font-family: inherit; min-width: 0; }
.sr-big-amount input::placeholder { color: var(--muted); opacity: .55; }

/* কুইক অ্যামাউন্ট বাটন */
.sr-quick-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.sr-quick-chip { border: 1px solid var(--border); background: #fff; border-radius:12px; padding: 14px 4px; font-size: 16px; font-weight: 700; color: var(--text); font-family: inherit; cursor: pointer; min-height: 52px; }
.sr-quick-chip:active { background: var(--primary-mist, #eef4f2); }

/* হেডারের সাদা স্কয়ার বাটন (ইতিহাস চার্ট) */
.sr-head-square { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius:12px; background: #fff; border: 1px solid var(--border-soft); color: var(--text); box-shadow: var(--shadow-card); flex: none; }
.sr-head-square svg { width: 22px; height: 22px; }

/* ড্যাশবোর্ড হেডার-ডান মাস */
.sr-head-month { font-size: 14px; color: var(--muted); font-weight: 500; white-space: nowrap; }

/* ডেট পিল wrap */
.sr-chip-wrap { flex-wrap: wrap; overflow: visible; }
.sr-chip-wrap .sr-chip { position: relative; }

/* "আজকের হিসাব দেখানো হচ্ছে" */
.sr-stats-showing { font-size: 13px; color: var(--muted); margin: 2px 0 12px; }

/* হলুদ টিপস কার্ড */
.sr-tip-card { display: flex; gap: 12px; align-items: flex-start; background: #fef3d8; border: 1px solid #f5e3ac; border-radius:16px; padding: 16px; margin-bottom: 14px; }
.sr-tip-ic { flex: none; width: 36px; height: 36px; color: #b8860b; }
.sr-tip-ic svg { width: 30px; height: 30px; }
.sr-tip-tx { flex: 1; min-width: 0; }
.sr-tip-tx b { font-size: 15px; color: #7a5c14; display: block; margin-bottom: 4px; }
.sr-tip-tx p { font-size: 13px; color: #8a6d2b; margin: 0; line-height: 1.55; }
.sr-tip-link { flex: none; font-size: 14px; font-weight: 700; color: var(--primary); text-decoration: none; white-space: nowrap; align-self: center; }

/* স্ট্যাট কার্ড হেড (আইকন+লেবেল এক লাইনে) */
.sr-stat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sr-stat-ic2 { width: 22px; height: 22px; flex: none; }
.sr-stat-ic2 svg { width: 20px; height: 20px; }
.sr-stat-ic2.c-green { color: var(--primary); }
.sr-stat-ic2.c-gold { color: #b8860b; }
.sr-stat-ic2.c-blue { color: var(--info); }
.sr-stat-ic2.c-teal { color: var(--success); }

/* বার চার্ট হেড + মান-লেবেল */
.sr-bar-chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sr-bar-chart-head .sr-bar-chart-title { margin-bottom: 0; }
.sr-bar-chart-head .sr-bar-chart-sub { margin-bottom: 0; }
.sr-bar-val { font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* আমার কমিশন কার্ড */
.sr-comm-card { display: flex; align-items: center; gap: 14px; background: #fff; border-radius:20px; padding: 18px; box-shadow: var(--shadow-card); text-decoration: none; margin-top: 14px; }
.sr-comm-ic { flex: none; width: 52px; height: 52px; border-radius:12px; background: var(--primary-mist, #eef4f2); color: var(--primary); display: grid; place-items: center; }
.sr-comm-ic svg { width: 24px; height: 24px; }
.sr-comm-tx { flex: 1; min-width: 0; }
.sr-comm-tx b { display: block; font-size: 15.5px; color: var(--text); margin-bottom: 4px; }
.sr-comm-tx span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.sr-comm-arr { flex: none; width: 20px; height: 20px; color: var(--muted); }

/* লিমিট পেজ */
.sr-limits-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.sr-limit-card { background: #fff; border-radius:20px; box-shadow: var(--shadow-card); padding: 18px; margin-bottom: 14px; }
.sr-limit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sr-limit-ic { flex: none; width: 48px; height: 48px; border-radius:12px; display: grid; place-items: center; }
.sr-limit-ic svg { width: 24px; height: 24px; }
.sr-limit-ic.c-teal { background: #e3f2ef; color: var(--success); }
.sr-limit-ic.c-purple { background: #efe9fb; color: #6d4fc2; }
.sr-limit-ic.c-green { background: #e7f6ec; color: #1d9d55; }
.sr-limit-ic.c-blue { background: #e8f0fa; color: var(--info); }
.sr-limit-name { font-size: 16px; font-weight: 700; color: var(--text); }
.sr-limit-row { margin-top: 12px; }
.sr-limit-line { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.sr-limit-period { font-size: 14px; font-weight: 700; color: var(--text); }
.sr-limit-used-lbl { font-weight: 400; color: var(--muted); font-size: 13px; }
.sr-limit-nums { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sr-limit-used { color: var(--success, #1d9d55); font-weight: 700; }
.sr-limit-bar { height: 8px; border-radius:999px; background: var(--border-soft, #eef0ee); overflow: hidden; }
.sr-limit-fill { height: 100%; border-radius:999px; background: var(--primary); min-width: 2px; }
.sr-limit-rem { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

/* রিচার্জ নোটিশ বার (system_settings.recharge.notice) */
.sr-notice-bar { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: #fff8e1; border: 1px solid #f0df9a; color: #6b5200; border-radius:12px; padding: 10px 14px; margin-bottom: 12px; }
.sr-notice-bar svg { width: 20px; height: 20px; flex: none; color: #b78a00; }
.sr-notice-text { flex: 1; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-notice-bar > svg:last-child { width: 16px; height: 16px; color: #b78a00; }
.sr-notice-full { font-size: 14.5px; line-height: 1.7; color: var(--text, #15211d); }

/* অপারেটর গ্রিড (upay-স্টাইল শিট: ৩-কলাম কার্ড + প্রিপেইড/পোস্টপেইড টগল) */
.sr-op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sr-op-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--border, #e3eae7); border-radius:16px; padding: 16px 6px 12px;
  cursor: pointer; font-family: inherit; text-decoration: none; color: inherit; min-height: 96px;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .12);
  transition: transform .12s ease, border-color .15s ease, background .15s ease; }
.sr-op-card:active { transform: scale(.96); }
.sr-op-card.is-active { border-color: var(--primary, #106050); background: #f0f7f4; box-shadow: 0 4px 14px -6px rgba(16, 96, 80, .35); }
.sr-op-card .sr-op-logo { width: 52px; height: 32px; object-fit: contain; }
.sr-op-card .sr-op-mark { width: 52px; height: 36px; font-size: 18px; }
.sr-op-type-row { display: flex; gap: 10px; margin-top: 16px; }
.sr-op-type-pill { flex: 1; padding: 12px; border-radius:999px; border: 1.5px solid var(--border, #e3eae7); background: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--text-2, #43554f); cursor: pointer; }
.sr-op-type-pill.is-active { background: var(--primary, #106050); border-color: var(--primary, #106050); color: #fff; }
.sr-op-done { width: 100%; margin-top: 12px; padding: 12px; border-radius:12px; border: 0; cursor: pointer;
  background: var(--sr-primary); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; }
.sr-op-type-tag { font-size: 12px; font-weight: 700; color: var(--primary-dark, #0b463a); background: var(--sr-mint);
  border-radius:999px; padding: 3px 10px; margin-right: 6px; }

/* অফার গেটিং */
.sr-gate-icon { width: 52px; height: 52px; margin: 6px auto 10px; border-radius:50%; display: grid; place-items: center;
  background: var(--sr-mint); color: var(--primary-dark, #0b463a); }
.sr-gate-icon svg { width: 26px; height: 26px; }

/* টিউটোরিয়াল ভিডিও মোডাল */
.sr-video-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 18px;
  background: rgba(10, 20, 17, .72); }
.sr-video-modal[hidden] { display: none; }
.sr-video-modal-box { position: relative; width: 100%; max-width: 560px; background: #000; border-radius:16px; overflow: hidden; }
.sr-video-modal-close { position: absolute; top: 6px; right: 10px; z-index: 2; background: rgba(0, 0, 0, .5); color: #fff;
  border: 0; font-size: 26px; line-height: 1; width: 38px; height: 38px; border-radius:50%; cursor: pointer; }
.sr-video-modal-frame { aspect-ratio: 16 / 9; }
.sr-video-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ================= টিউটোরিয়াল বাটন — v61 গ্রুপ D (2026-10-20) ================= */
/* Components::tutorialButton() — সার্ভিস পেজের উপরে; ব্র্যান্ড সবুজ #106050। */
.sr-tut-wrap{display:flex;justify-content:flex-end;margin:0 0 10px}
.sr-tut-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #dcebe4;background:#f2faf5;color:var(--primary);border-radius:999px;padding:6px 14px 6px 6px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.sr-tut-play{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow: 0 4px 14px rgba(0,0,0,.2);flex:0 0 28px}
.sr-tut-play svg{width:13px;height:13px;margin-left:1px}
.sr-tut-btn:active{transform:scale(.97)}
.sr-tut-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px;background:rgba(10,20,17,.72)}
.sr-tut-modal[hidden]{display:none}
.sr-tut-box{position:relative;width:100%;max-width:560px;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.sr-tut-close{position:absolute;top:6px;right:10px;z-index:2;background:rgba(0,0,0,.5);color:#fff;border:0;font-size:26px;line-height:1;width:38px;height:38px;border-radius:50%;cursor:pointer}
.sr-tut-frame{aspect-ratio:16/9}
.sr-tut-frame iframe{width:100%;height:100%;border:0;display:block}

/* ================= পপআপ নোটিফিকেশন মোডাল (upay-স্টাইল, 046) ================= */
.sr-popup-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px;opacity:1;transition:opacity .3s ease;}
.sr-popup-overlay.sr-popup-hide{opacity:0;pointer-events:none;}
.sr-popup-modal{position:relative;background:#fff;border-radius:20px;max-width:420px;width:100%;padding:28px 24px 24px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.28);animation:sr-popup-in .28s ease-out;}
@keyframes sr-popup-in{from{transform:translateY(24px) scale(.97);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.sr-popup-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f3f5;color:#333;font-size:22px;line-height:1;cursor:pointer;}
.sr-popup-close:active{transform:scale(.94);}
.sr-popup-img{max-width:100%;max-height:220px;object-fit:contain;margin:0 auto 18px;display:block;border-radius:12px;}
.sr-popup-title{color:#1565c0;font-size:22px;font-weight:700;margin:0 0 14px;}
.sr-popup-body{color:#333;font-size:16px;line-height:1.7;margin:0 0 22px;white-space:pre-line;}
.sr-popup-cta{display:block;width:100%;border:0;border-radius:12px;padding:15px;font-size:17px;font-weight:700;color:#fff;cursor:pointer;background:var(--primary,#106050);box-shadow:0 6px 16px rgba(15, 23, 20, .35);text-align:center;text-decoration:none;}
.sr-popup-cta:active{transform:scale(.98);}

/* ================= Google Material Symbols (2026-10-16) ================= */
.material-symbols-rounded{
  font-family:'Material Symbols Rounded';
  font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;
  text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;
  direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
  font-size:22px;vertical-align:-5px;flex:none;
}
.sr-bnav-item .material-symbols-rounded{font-size:24px;vertical-align:0;}
.sr-svc8-ic .material-symbols-rounded{font-size:30px;vertical-align:0;}
.sr-head-act .material-symbols-rounded{font-size:22px;}
.sr-menu-ic .material-symbols-rounded{font-size:22px;}
.sr-head-square .material-symbols-rounded{font-size:22px;}
.sr-search .material-symbols-rounded{font-size:20px;color:var(--muted,#888);}
.sr-wel-btn .material-symbols-rounded{font-size:20px;vertical-align:-4px;margin-right:2px;}

/* ================= ২০২৬-১০-১৭ — রেফারেন্স-ডিজাইন: প্যাস্টেল tint + হিস্টোরি/ড্যাশবোর্ড/প্রোফাইল ================= */

/* ---- Google Material Symbols-এর জন্য প্যাস্টেল আইকন-tint (রেফারেন্স-স্ক্রিনশট) ---- */
.tint-blue{background:#e7f0fe;color:#1f7ae0;}
.tint-orange{background:#fff1e2;color:#ef7d1a;}
.tint-yellow{background:#fdf3d3;color:#b97f06;}
.tint-teal{background:#dcf2ef;color:#0b8f7d;}
.tint-red{background:#fde7e7;color:#d93b3b;}
.tint-purple{background:#ebe6fb;color:#6a54d1;}
.tint-green{background:#dcf2e3;color:#1d9d55;}
.sr-svc8-ic.tint-blue,.sr-svc8-ic.tint-orange,.sr-svc8-ic.tint-yellow,
.sr-svc8-ic.tint-teal,.sr-svc8-ic.tint-red,.sr-svc8-ic.tint-purple,.sr-svc8-ic.tint-green{box-shadow:none;}

/* ---- হেডার অ্যাকশন: সাদা সার্কেল + সবুজ আইকন (রেফারেন্স-ডিজাইন) ---- */
.sr-head-act{background:#fff;color:var(--sr-primary);border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 10px rgba(0,0,0,.14);}
.sr-head-act:active{background:#eef5f2;transform:scale(.94);}
.sr-green-head .sr-head-month{color:rgba(255,255,255,.94);font-size:13.5px;font-weight:600;}

/* ---- হিস্টোরি: লেনদেন রো-তে tint আইকন ---- */
.sr-txn-ic .material-symbols-rounded{font-size:23px;vertical-align:0;}

/* ---- ড্যাশবোর্ড: গ্রিন হিরো সামারি কার্ড (হেডার-overlap) ---- */
.sr-stats-hero{
  background:linear-gradient(135deg,#14705c 0%,#0a4a37 100%);
  border-radius:var(--sr-card-radius);padding:20px 18px;color:#fff;
  box-shadow:0 10px 26px -10px rgba(15, 23, 20, .55);
  margin:-38px 0 14px;position:relative;z-index:2;overflow:hidden;
}
.sr-stats-hero::after{
  content:"";position:absolute;right:-40px;top:-48px;width:150px;height:150px;border-radius:50%;
  border:22px solid rgba(255,255,255,.07);
}
.sr-stats-hero-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.78);position:relative;z-index:1;}
.sr-stats-hero-amt{
  font-size:30px;font-weight: 700;letter-spacing:-.01em;margin:4px 0 2px;position:relative;z-index:1;
  font-family:"Hind Siliguri","Noto Sans Bengali","Inter",sans-serif;font-variant-numeric:tabular-nums;
}
.sr-stats-hero-sub{font-size:12.5px;color:rgba(255,255,255,.72);position:relative;z-index:1;}
.sr-stats-hero-ic{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:1;
  width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.14);
  display:grid;place-items:center;color:#fff;
}
.sr-stats-hero-ic .material-symbols-rounded{font-size:28px;}

/* ---- ড্যাশবোর্ড: স্ট্যাট কার্ডে প্যাস্টেল টাইল ---- */
.sr-stat-tile{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;margin-bottom:10px;
}
.sr-stat-tile .material-symbols-rounded{font-size:24px;vertical-align:0;}
.sr-stat-card .sr-stat-label{margin-bottom:2px;}
.sr-stat-card .sr-stat-val{font-size:21px;}

/* ---- প্রোফাইল: হোম-স্টাইল কার্ড + tint মেনু ---- */
.sr-profile-hero{margin:-38px 0 14px;position:relative;z-index:2;}
.sr-profile-hero .sr-prof-actions{display:flex;flex-direction:column;gap:8px;flex:none;}
.sr-prof-bal-row{display:flex;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft,#edf2f0);}
.sr-prof-bal{flex:1;background:var(--primary-mist,#f2f7f5);border-radius:12px;padding:10px;text-align:center;}
.sr-prof-bal b{display:block;font-size:16px;font-weight: 700;color:var(--text,#15211d);font-variant-numeric:tabular-nums;font-family:"Hind Siliguri","Noto Sans Bengali","Inter",sans-serif;}
.sr-prof-bal span{font-size:12px;color:var(--muted,#71827c);font-weight:600;}
.sr-menu-ic .material-symbols-rounded{font-size:20px;vertical-align:0;}
.sr-sec-card-title{font-size:15px;font-weight:700;margin:0 0 4px;color:var(--text,#15211d);}

/* ---- ইন-অ্যাপ পেমেন্ট গেটওয়ে (iframe) ---- */
.sr-gw-wrap{margin:0 -4px;}
.sr-gw-frame{width:100%;height:calc(100dvh - 200px);min-height:480px;border:0;border-radius:12px;display:block;background:#fff;}


/* ---- ১২টা রিচার্জ-ব্যবসা থিমড অ্যানিমেটেড 3D অ্যাপ বার (2026-10-17, আতিক ভাই) ---- */
/* প্রতিটা .h-anim-N ক্লাস .sr-green-head-এর সাথে ব্যবহার হয়। */
.sr-green-head[class*="h-anim-"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.sr-green-head[class*="h-anim-"] > * { position: relative; z-index: 1; }

/* ১. মোবাইল রিচার্জ — ফোন সিগন্যাল তরঙ্গ */
.h-anim-1 { background: linear-gradient(135deg, #0b3d2e, var(--primary) 55%, #1a8a6a) !important; }
.h-anim-1::before {
  background:
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.15) 0 60px, transparent 61px),
    repeating-radial-gradient(circle at 50% 120%, transparent 0 22px, rgba(125,255,180,.28) 22px 24px);
  animation: recharge-signal 3s ease-out infinite;
}
@keyframes recharge-signal {
  0% { transform: scale(.9); opacity: .5; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(.9); opacity: .5; }
}

/* ২. সিম কার্ড — চিপ প্যাটার্ন */
.h-anim-2 { background: linear-gradient(135deg, #0a2540, #134e7a 60%, #1e7ab0) !important; }
.h-anim-2::before {
  background-image:
    linear-gradient(90deg, rgba(255,215,0,.25) 2px, transparent 2px),
    linear-gradient(rgba(255,215,0,.25) 2px, transparent 2px);
  background-size: 34px 34px;
  animation: sim-shine 4s linear infinite;
}
@keyframes sim-shine {
  0% { transform: translate(0,0); opacity: .5; }
  50% { transform: translate(10px,-8px); opacity: 1; }
  100% { transform: translate(0,0); opacity: .5; }
}

/* ৩. টাওয়ার সিগন্যাল — নেটওয়ার্ক টাওয়ার তরঙ্গ */
.h-anim-3 { background: linear-gradient(135deg, #0b0b2e, #1a1a4e 55%, #2d2d7a) !important; }
.h-anim-3::before {
  background: repeating-radial-gradient(circle at 50% 100%, transparent 0 26px, rgba(100,180,255,.35) 26px 28px);
  animation: tower-pulse 2.5s ease-out infinite;
}
@keyframes tower-pulse {
  0% { transform: scale(.85) translateY(10px); opacity: .4; }
  50% { transform: scale(1.1) translateY(0); opacity: 1; }
  100% { transform: scale(.85) translateY(10px); opacity: .4; }
}

/* ৪. ক্যাশ ইনকাম — টাকার নোট পড়ছে */
.h-anim-4 { background: linear-gradient(135deg, #1e3d0b, #3d6b10 55%, #5a8a1a) !important; }
.h-anim-4::before {
  background-image:
    radial-gradient(ellipse 14px 9px at 25% 20%, rgba(255,255,200,.85), transparent),
    radial-gradient(ellipse 14px 9px at 65% 10%, rgba(255,255,200,.7), transparent),
    radial-gradient(ellipse 14px 9px at 85% 30%, rgba(255,255,200,.8), transparent);
  animation: cash-fall 4s ease-in infinite;
}
@keyframes cash-fall {
  0% { transform: translateY(-20px); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}

/* ৫. রিচার্জ দোকান — নিয়ন সাইন */
.h-anim-5 { background: linear-gradient(135deg, #1a0b2e, #2d1b4e 55%, #4a2b7a) !important; }
.h-anim-5::before {
  background: linear-gradient(90deg, transparent 20%, rgba(255,80,200,.4) 50%, transparent 80%);
  animation: shop-neon 3s ease-in-out infinite;
}
@keyframes shop-neon {
  0%,100% { transform: translateX(-40%); opacity: .4; }
  50% { transform: translateX(40%); opacity: 1; }
}

/* ৬. ফাস্ট রিচার্জ — বিদ্যুৎ গতি */
.h-anim-6 { background: linear-gradient(135deg, #3d1e0b, #7a3a10 55%, #b05a1e) !important; }
.h-anim-6::before {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,240,150,.95) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 60%, rgba(255,200,80,.85) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 25%, rgba(255,240,150,.7) 0 3px, transparent 4px);
  animation: fast-flash .7s steps(2) infinite;
}
@keyframes fast-flash {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .25; transform: scale(.92); }
}

/* ৭. প্রফিট কয়েন — সোনালি কয়েন উঠছে */
.h-anim-7 { background: linear-gradient(135deg, #3d2e0b, #6b5a10 55%, #9a8a1a) !important; }
.h-anim-7::before {
  background-image:
    radial-gradient(circle at 22% 85%, rgba(255,215,0,.95) 0 8px, rgba(180,140,0,.5) 8px 9px, transparent 10px),
    radial-gradient(circle at 58% 92%, rgba(255,215,0,.85) 0 6px, rgba(180,140,0,.5) 6px 7px, transparent 8px),
    radial-gradient(circle at 84% 80%, rgba(255,215,0,.9) 0 9px, rgba(180,140,0,.5) 9px 10px, transparent 11px);
  animation: profit-rise 3.5s ease-in-out infinite;
}
@keyframes profit-rise {
  0%,100% { transform: translateY(14px); opacity: .65; }
  50% { transform: translateY(-16px); opacity: 1; }
}

/* ৮. মোবাইল ব্যাংকিং — ডিজিটাল পেমেন্ট ঢেউ */
.h-anim-8 { background: linear-gradient(135deg, #3d0b2e, #7a1050 55%, #b02070) !important; }
.h-anim-8::before {
  background: repeating-linear-gradient(100deg, transparent 0 30px, rgba(255,150,200,.22) 30px 32px);
  animation: banking-flow 3s linear infinite;
}
@keyframes banking-flow {
  0% { transform: translateX(-46px); }
  100% { transform: translateX(46px); }
}

/* ৯. নেটওয়ার্ক বার — সিগন্যাল বার উঠছে */
.h-anim-9 { background: linear-gradient(135deg, #0b2e2e, #105a5a 55%, #1a8a8a) !important; }
.h-anim-9::before {
  background-image:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)),
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4));
  background-size: 10px 22px, 10px 32px, 10px 42px, 10px 52px;
  background-position: 30% 100%, 42% 100%, 54% 100%, 66% 100%;
  background-repeat: no-repeat;
  animation: bars-rise 2s ease-in-out infinite;
}
@keyframes bars-rise {
  0%,100% { transform: scaleY(.82); opacity: .7; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ১০. ডাটা ফ্লো — ইন্টারনেট ডাটা স্ট্রিম */
.h-anim-10 { background: linear-gradient(135deg, #0b1e3d, #103a6b 55%, #1a5a9a) !important; }
.h-anim-10::before {
  background-image:
    radial-gradient(circle at 15% 50%, rgba(100,200,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 35% 50%, rgba(100,200,255,.7) 0 3px, transparent 4px),
    radial-gradient(circle at 55% 50%, rgba(100,200,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 75% 50%, rgba(100,200,255,.7) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 50%, rgba(100,200,255,.9) 0 3px, transparent 4px);
  animation: data-stream 1.8s linear infinite;
}
@keyframes data-stream {
  0% { transform: translateX(-24px); opacity: .5; }
  50% { opacity: 1; }
  100% { transform: translateX(24px); opacity: .5; }
}

/* ১১. কল ওয়েভ — ফোন কল তরঙ্গ */
.h-anim-11 { background: linear-gradient(135deg, #0b3d1e, #10602e 55%, #1a8a44) !important; }
.h-anim-11::before {
  background: repeating-radial-gradient(circle at 20% 50%, transparent 0 20px, rgba(150,255,170,.3) 20px 22px);
  animation: call-wave 2.8s ease-out infinite;
}
@keyframes call-wave {
  0% { transform: scale(.8); opacity: .35; }
  50% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(.8); opacity: .35; }
}

/* ১২. অফার শাইন — বান্ডেল অফার ঝিলিক */
.h-anim-12 { background: linear-gradient(135deg, #2e0b3d, #5a1060 55%, #8a2090) !important; }
.h-anim-12::before {
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  animation: offer-shine 3.2s ease-in-out infinite;
}
@keyframes offer-shine {
  0%,100% { transform: translateX(-65%); opacity: 0; }
  50% { transform: translateX(65%); opacity: 1; }
}

/* ---- হিস্ট্রি ফিল্টার: ৩ বাটন এক লাইনে, কমপ্যাক্ট (2026-10-17, আতিক ভাই) ---- */
.sr-chips-3 { display: flex; gap: 6px; overflow: hidden; padding: 2px 0 10px; }
.sr-chips-3 .sr-chip {
  flex: 1 1 0; text-align: center; white-space: nowrap;
  padding: 7px 4px; font-size: 12px; border-radius:8px;
  overflow: hidden; text-overflow: ellipsis;
}

/* Commission section — level page (2026-10-18, আতিক ভাই) */
.sr-note { margin-top: 14px; padding: 12px 14px; border-radius:12px; background: #f0f7f4; border: 1px solid #dcebe4; }
.sr-note-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sr-primary, #0d7a4f); margin-bottom: 6px; }
.sr-note-title svg { width: 15px; height: 15px; }
.sr-note-body { font-size: 13px; color: #3d4a46; line-height: 1.65; white-space: pre-line; }
.sr-upgrade-prompt { margin-top: 14px; border: 1.5px solid var(--sr-primary, #0d7a4f); background: linear-gradient(135deg, #f0faf6 0%, #ffffff 100%); }
.sr-upgrade-prompt-msg { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; color: #1c2b27; line-height: 1.6; margin-bottom: 14px; }
.sr-upgrade-prompt-msg svg { width: 22px; height: 22px; flex-shrink: 0; color: #d4a017; margin-top: 1px; }

/* Add Balance bottom sheet (2026-10-18, আতিক ভাই) */
.sr-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;opacity:0;transition:opacity .3s}
.sr-sheet-backdrop:not([hidden]){opacity:1}
.sr-sheet{position:fixed;left:0;right:0;bottom:0;z-index:91;background:#fff;border-radius:20px 20px 0 0;padding:12px 20px calc(32px + env(safe-area-inset-bottom, 0px));transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,.35,1);max-height:85vh;overflow-y:auto}
.sr-sheet.is-open{transform:translateY(0)}
.sr-sheet-handle{width:40px;height:4px;background:#e0e0e0;border-radius:4px;margin:0 auto 16px}
.sr-sheet-title{font-size:18px;font-weight:700;margin:0 0 16px;text-align:center}

/* Premium home hero + card (2026-10-18, আতিক ভাই) — theme on top, soft gradients */
.sr-premium-hero{margin:-16px -16px 0;padding:28px 20px 64px;position:relative;overflow:hidden}
.sr-premium-hero-inner{position:relative;z-index:1}
.sr-premium-top{display:flex;align-items:center;justify-content:space-between}
.sr-premium-greet{color:#fff;font-size:16px;font-weight:600;opacity:.95}
.sr-premium-card{background:#fff;border-radius:20px;padding:20px;margin:-44px 16px 16px;position:relative;z-index:2;box-shadow:0 8px 32px rgba(0,0,0,.12)}
.sr-premium-user{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.sr-premium-avatar{background:linear-gradient(135deg,var(--primary),#2a9d8f);color:#fff;font-weight:700}
.sr-premium-name{font-size:17px;font-weight:700;color:#1a1a1a}
.sr-premium-num{font-size:13px;color:#666;margin:2px 0 6px}
.sr-premium-balance{display:flex;align-items:center;justify-content:space-between;width:100%;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid #e0e0e0;border-radius:12px;padding:14px 16px;margin-bottom:14px;cursor:pointer;transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); box-shadow: 0 2px 8px rgba(0,0,0,.04);}
.sr-premium-balance:active{transform:scale(.98)}
.sr-premium-balance-label{font-size:13px;color:#666;font-weight:500}
.sr-premium-balance-hidden{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--primary);font-weight:600}
.sr-premium-balance-value{font-size:22px;font-weight: 700;color:var(--primary);animation:srBalanceIn .3s cubic-bezier(0.22,1,0.36,1)}
@keyframes srBalanceIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.sr-premium-actions{display:flex;gap:10px}
.sr-premium-add{flex:1}

/* Minimal premium home (2026-10-18, আতিক ভাই) — no app bar, reference-style card */
.app-main-nohead{padding-top:0;padding-left:12px;padding-right:12px}
.sr-premium-hero{margin:0;padding:24px 20px 70px;position:relative;overflow:hidden}
.sr-premium-name-hero{color:#fff;font-size:20px;font-weight:700;letter-spacing:.5px}
.sr-premium-top{display:flex;align-items:center;justify-content:space-between}
.sr-premium-top-actions{display:flex;gap:8px}
.sr-premium-card{background:#fff;border-radius:20px;padding:18px;margin:-52px 16px 16px;position:relative;z-index:2;box-shadow:0 10px 36px rgba(0,0,0,.14)}
.sr-premium-avatar-sm{width:48px;height:48px;font-size:18px;background:linear-gradient(135deg,var(--primary),var(--primary));color:#fff;font-weight:700}
.sr-premium-user{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.sr-premium-name{font-size:16px;font-weight:700;color:#1a1a1a}
.sr-premium-num{font-size:13px;color:#666;margin:2px 0 6px}
.sr-premium-balance{display:flex;align-items:center;gap:12px;width:100%;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px solid #f0f0f0;border-radius:16px;padding:12px 14px;margin-bottom:12px;cursor:pointer;transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.sr-premium-balance:active{transform:scale(.98)}
.sr-premium-bal-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:linear-gradient(135deg,var(--primary),var(--primary));color:#fff;font-size:24px;font-weight:700;border-radius:12px;flex-shrink:0}
.sr-premium-balance-hidden{font-size:16px;font-weight:600;color:#1a1a1a}
.sr-premium-balance-value{font-size:20px;font-weight: 700;color:#1a1a1a;animation:srBalanceIn .3s cubic-bezier(0.22,1,0.36,1)}
.sr-premium-add{margin-top:2px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none}
.sr-amt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.sr-amt-chip{flex:1;min-width:0;padding:8px 4px;border:2px solid #e9ecef;background:#f8f9fa;border-radius:8px;font-size:13px;font-weight:600;color:#495057;cursor:pointer;transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);text-align:center;white-space:nowrap}
.sr-amt-chip.is-sel{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.sr-amt-chip:active{transform:scale(.95)}

/* Balance toggle — fixed size both states (2026-10-18, আতিক ভাই) */
.sr-premium-balance-txt{font-size:16px;font-weight:600;color:#1a1a1a;flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Full-width minimal card (2026-10-18, আতিক ভাই) */
.sr-premium-full{margin:-52px 0 16px;border-radius:0;padding:14px 16px}
.sr-premium-user-sm{margin-bottom:10px}
.sr-premium-avatar-xs{width:36px;height:36px;font-size:14px}
.sr-premium-name-sm{font-size:14px;font-weight:700}
.sr-premium-num-sm{font-size:12px;color:#666}
.sr-premium-row{display:flex;gap:8px;align-items:stretch}
.sr-premium-balance-row{flex:1;margin-bottom:0}
.sr-premium-add-row{width:52px;flex-shrink:0;border-radius:12px;font-size:20px}

/* Brand tint + more sheet (2026-10-18, আতিক ভাই) */
.tint-brand{background:linear-gradient(135deg,var(--primary-soft),var(--primary-soft));color:var(--primary-dark)}
.sr-more-list{display:flex;flex-direction:column;gap:8px}
.sr-more-item{display:flex;align-items:center;gap:12px;padding:14px;background:#f8f9fa;border-radius:12px;text-decoration:none;color:#1a1a1a;font-weight:600}
.sr-more-item:active{transform:scale(.98)}

/* Ridmik-style theme header + service redesign (2026-10-18, আতিক ভাই) */
.sr-head-spacer{flex:1}
.sr-premium-top{gap:8px}

/* Service tints — ONE brand tint (2026-11-11, মালিকের ফোন-চেক D-3.1: ৮ রঙের রংধনু বাতিল; 2026-11-08 C-1 সংশোধন উল্টানো)। সব tint-soft-* একই মান: bg #EAF4EE, border #ABEFC6, icon #106050। */
.tint-soft-green{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-orange{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-purple{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-blue{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-teal{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-amber{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-rose{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-slate{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}

/* Service OFF — full colour (TK-2); click shows the locked notice (popup shows admin notice) */
.sr-svcoff-msg{font-size:15px;line-height:1.7;color:#333;text-align:center;margin:0 0 8px;white-space:pre-line}

/* Side drawer menu */
.sr-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;opacity:0;transition:opacity .25s}
.sr-drawer-backdrop.is-open{opacity:1}
.sr-drawer{position:fixed;top:0;left:0;bottom:0;width:min(300px,82vw);background:#fff;z-index:91;
  transform:translateX(-105%);transition:transform .3s cubic-bezier(.32,.72,.35,1);
  border-radius:0 20px 20px 0;box-shadow:8px 0 40px rgba(0,0,0,.18);overflow-y:auto}
.sr-drawer.is-open{transform:none}
.sr-drawer-head{display:flex;align-items:center;gap:12px;padding:22px 18px 16px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}
.sr-drawer-name{font-size:16px;font-weight:700}
.sr-drawer-num{font-size:12px;opacity:.85;margin-top:2px}
.sr-drawer-nav{padding:10px 8px 24px}
.sr-drawer-item{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:12px;
  text-decoration:none;color:#1a1a1a;font-size:15px;font-weight:600}
.sr-drawer-item:active{background:#f0f4f2}
.sr-drawer-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:12px;background:linear-gradient(135deg,var(--primary-soft),#e6f0ec);color:var(--primary-dark);flex-shrink:0}

/* ---- টালিখাতা — প্রফেশনাল লেজার পেজ (2026-10-18) ---- */
/* ব্র্যান্ড সবুজ গ্র্যাডিয়েন্ট হেডার: back + টাইটেল/সাবটাইটেল + রিফ্রেশ */
/* 2026-11-09, আইটেম ৯২ (F-92-1, Q-92-1 ডিফল্ট: ফ্ল্যাট-সবুজ —
   .sr-green-head-প্যাটার্ন): গ্রেডিয়েন্ট → ফ্ল্যাট ব্র্যান্ড-সবুজ;
   ডেকোরেটিভ ::before/::after বৃত্ত তোলা (AGENTS.md §৩)। */
.tk-head{margin:-16px -16px 0;padding:20px 16px 52px;position:relative;overflow:hidden;
  background:var(--primary);color:#fff}
.tk-head-row{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto;
  position:relative;z-index:1}
.tk-head-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  color:#fff;text-decoration:none;cursor:pointer;flex:none;transition:background .15s ease,transform .12s ease}
.tk-head-btn:active{background:rgba(255,255,255,.3);transform:scale(.94)}
.tk-head-btn .material-symbols-rounded{font-size:22px}
.tk-head-titles{flex:1;min-width:0}
.tk-head-title{margin:0;font-size:20px;font-weight:700;color:#fff;letter-spacing:.2px}
.tk-head-sub{margin:3px 0 0;font-size:13px;color:rgba(255,255,255,.82);font-weight:500}
/* সাদা স্ট্যাট কার্ড — appbar-এর নিচে পরিষ্কার দূরত্বে (2026-10-20, v63, আতিক ভাই):
   পুরনো ডুপ্লিকেট সবুজ হেডার বাদ যাওয়ায় -34px ওভারল্যাপ এখন appbar-এর ভেতরে ঢুকতো। */
.tk-stats{background:#fff;border-radius:20px;padding:20px 18px 16px;margin:4px 0 14px;
  position:relative;z-index:2;box-shadow:0 14px 34px rgba(15, 23, 20, .13)}
.tk-stats-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tk-stats-label{font-size:14px;font-weight:700;color:var(--text-2);display:inline-flex;align-items:center;gap:8px}
.tk-stats-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;background:var(--primary-soft,#e7f2ee);color:var(--primary-dark,#106050)}
.tk-stats-ic .material-symbols-rounded{font-size:18px}
.tk-sms-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--primary);background:var(--primary-mist);color:var(--primary-dark);
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none}
.tk-sms-pill:active{transform:scale(.96)}
.tk-sms-pill .material-symbols-rounded{font-size:18px}
.tk-due-amount{margin:10px 0 0;font-size:36px;font-weight: 700;color:var(--text);letter-spacing:.3px;
  font-family:var(--font-amount-num)}
.tk-stats-grid{display:flex;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft)}
.tk-stat{flex:1;display:flex;flex-direction:column;gap:4px;text-align:center;position:relative}
.tk-stat+.tk-stat::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--border-soft)}
.tk-stat-label{font-size:12px;font-weight:600;color:#7a8a85}
.tk-stat-val{font-size:17px;font-weight: 700;color:var(--text);font-family:var(--font-amount-num)}
.tk-stat-val-green{color:var(--primary-dark)}
/* সার্চ + গোল যোগ-বাটন */
.tk-search-row{display:flex;gap:10px;align-items:center;margin:2px 0 12px}
.tk-search{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;
  padding:0 18px;height:52px;box-shadow:0 6px 18px rgba(15, 23, 20, .08);border:1px solid var(--border-soft)}
.tk-search .material-symbols-rounded{color:#8a978f;font-size:22px;flex:none}
.tk-search input{flex:1;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;
  color:var(--text);min-width:0}
.tk-search input::placeholder{color:#9aa7a1}
.tk-add-round{flex:none;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;text-decoration:none;
  background:var(--primary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s ease}
.tk-add-round:active{transform:scale(.92)}
.tk-add-round .material-symbols-rounded{font-size:24px}
.tk-count{margin:0 0 10px;font-size:13px;font-weight:700;color:#5b6b66}
/* খালি অবস্থা */
.tk-empty{background:#fff;border-radius:20px;padding:44px 24px 36px;text-align:center;
  box-shadow:0 10px 28px rgba(15, 23, 20, .08)}
.tk-empty-ic{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;
  border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);margin-bottom:14px}
.tk-empty-ic .material-symbols-rounded{font-size:38px}
.tk-empty-txt{margin:0 0 20px;font-size:16px;font-weight:600;color:#5b6b66}
.tk-empty-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border:none;border-radius:999px;text-decoration:none;
  background:var(--primary);color:#fff;
  font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
  transition:transform .12s ease}
.tk-empty-btn:active{transform:scale(.96)}
.tk-empty-btn .material-symbols-rounded{font-size:20px}
/* গ্রাহক তালিকা */
.tk-list{display:flex;flex-direction:column;gap:10px}
.tk-cust{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;
  box-shadow:0 4px 14px rgba(15, 23, 20, .06);border:1px solid #f0f4f2;text-decoration:none;color:inherit}
.tk-cust:active{transform:scale(.985)}
.tk-cust-av{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;font-weight:700;font-size:17px;
  box-shadow:0 0 0 3px var(--primary-soft,#e7f2ee)}
.tk-cust-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-cust-info b{font-size:14px;color:var(--text)}
.tk-cust-info i{font-style:normal;font-size:12px;color:#7a8a85}
.tk-cust-due{font-size:15px;font-weight: 700;color:var(--text);font-family:var(--font-amount-num)}
.tk-cust-due-red{color:#b3402e}
.tk-cust-due-green{color:var(--primary-dark,#106050)}
.tk-cust>.material-symbols-rounded{font-size:20px;color:#b6c2bd;flex:none}
.tk-sheet-note{margin:0;font-size:14px;color:#5b6b66;line-height:1.7;text-align:center;padding:8px 4px}

/* More sheet — 4-col grid (2026-10-18, আতিক ভাই). */
.sr-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;padding:4px 2px 8px}
.sr-more-grid-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#1a1a1a;min-width:0}
.sr-more-grid-item:active{transform:scale(.95)}
.sr-more-grid-item .sr-svc-ic{width:56px;height:56px;font-size:26px;border-radius:16px}
.sr-more-grid-lb{font-size:12px;font-weight:600;text-align:center;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Ridmik-style theme header + minimal user card (2026-10-18, আতিক ভাই) */
/* ============ হোম টপ — Hasan Ali রেফারেন্স (2026-10-18, আতিক ভাই) ============ */
.ha-top{margin:0 -12px}
.ha-hero{min-height:175px;padding:15px 12px 70px;position:relative;overflow:hidden}
.ha-hero-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ha-greet{display:flex;flex-direction:column;gap:2px;min-width:0}
.ha-greet-sub{font-size:14px;font-weight:500;color:rgba(255,255,255,.92)}
.ha-greet-name{font-size:21px;font-weight: 700;color:#fff;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-wave{font-size:19px}
.ha-hero-acts{display:flex;gap:10px;flex-shrink:0}
.ha-head-act{width:42px;height:42px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.12);position:relative;flex-shrink:0}
.ha-head-act .material-symbols-rounded{font-size:22px;color:var(--primary,#106050)}
.ha-head-act:active{transform:scale(.94)}
/* পয়েন্ট পিল — বেলের পাশে পয়েন্ট ব্যালেন্স, ক্লিকে রিওয়ার্ড পেজ (2026-10-19, আতিক ভাই) */
.ha-head-pts{height:42px;border-radius:20px;background:#fff;display:flex;align-items:center;gap:5px;padding:0 12px 0 10px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.12);flex-shrink:0}
.ha-head-pts .material-symbols-rounded{font-size:20px;color:var(--primary,#106050)}
.ha-head-pts span{font-size:13px;font-weight:700;color:var(--primary-dark,#0b463a);line-height:1}
.ha-head-pts:active{transform:scale(.94)}
/* ইউজার কার্ড — থিমের উপর ওভারল্যাপ */
.ha-user-card{background:#fff;border-radius:16px;margin:-58px 12px 0;padding:10px 10px 8px;position:relative;z-index:2;box-shadow:0 12px 32px rgba(15, 23, 20, .12)}
.ha-user-row{display:flex;align-items:center;gap:10px}
.ha-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary,#106050),var(--primary-dark,#0b463a));color:#fff;font-weight:700;font-size:16px;overflow:hidden;text-decoration:none}
.ha-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ha-user-id{flex:1;min-width:0}
.ha-name{font-size:15px;font-weight: 700;color:#141414;display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-tick{display:inline-flex;flex-shrink:0}
.ha-tick .material-symbols-rounded{font-size:16px;color:#1a73e8;font-variation-settings:'FILL' 1}
.ha-mobile{font-size:12px;color:#7a8581;margin-top:2px}
.ha-level{display:flex;align-items:center;gap:6px;background:var(--primary-mist,#e9f4ee);border-radius:12px;padding:6px 8px;text-decoration:none;flex-shrink:0;max-width:44%}
.ha-level-ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;flex-shrink:0}
.ha-level-ic .material-symbols-rounded{font-size:16px;color:#b8860b}
.ha-level-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ha-level-tx b{font-size:12px;font-weight: 700;color:#1d4d3f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-level-tx small{font-size:10px;color:#7a8581;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-chev{font-size:18px;color:#9aa5a1;flex-shrink:0}
.ha-div{height:1px;background:#eef2f1;margin:10px 2px 3px}
.ha-bal-row{display:flex;align-items:stretch}
.ha-bal{flex:1.25;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;padding:6px 3px;cursor:pointer;font:inherit;text-align:left}
.ha-bal:active{opacity:.75}
.ha-bal-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:var(--primary-soft,#e7f2ee);flex-shrink:0}
.ha-bal-ic .material-symbols-rounded{font-size:20px;color:var(--primary,#106050)}
.ha-bal-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ha-bal-lb{font-size:12.5px;font-weight:600;color:#2b2b2b}
.ha-bal-val{font-size:14px;font-weight: 700;color:#141414;letter-spacing:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ha-eye{display:flex;flex-shrink:0}
.ha-eye .material-symbols-rounded{font-size:19px;color:#9aa5a1}
.ha-bal-sep{width:1px;background:#eef2f1;margin:6px 8px;flex-shrink:0}
.ha-add{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:none;border:0;padding:6px 3px;cursor:pointer;font:inherit;text-align:left}
.ha-add:active{opacity:.75}
.ha-add-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary,#106050),var(--primary-dark,#0b463a));color:#fff;flex-shrink:0;box-shadow: 0 6px 14px -6px rgba(16,96,80,.5);}
.ha-add-ic .material-symbols-rounded{font-size:20px}
.ha-add-tx{font-size:12.5px;font-weight:700;color:#1d4d3f;flex:1;white-space:nowrap}
/* সার্ভিস গ্রিড — সাদা কার্ড */
.ha-svc-card{background:#fff;border-radius:20px;margin:14px 0 4px;padding:18px 10px 16px;box-shadow:0 8px 26px rgba(15, 23, 20, .08)}
.ha-svc-card .sr-svc-grid8{margin:0}
/* ব্যানার — ছোট মিনিমাল */
.sr-banner{margin:14px 0 4px; box-shadow: var(--sr-card-shadow);}
.sr-banner-track{aspect-ratio:7/2}
/* স্পেশাল অফার কার্ড — প্রিমিয়াম টাচ */
.sr-offer-card{box-shadow:0 10px 26px -12px rgba(15, 23, 20, .16);border:1px solid #eef2f1}
/* ৫-আইটেম বটম নেভ — হোমে ফিট */
.sr-bnav-item{font-size:10.5px;min-width:0}
.sr-bnav-item .material-symbols-rounded{font-size:23px}

/* ================= রেফার + ডেইলি চেকইন ডুয়ো কার্ড (2026-10-18, আতিক ভাইয়ের রেফারেন্স) ================= */
.sr-duo-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px}
.sr-duo-card{position:relative;display:flex;align-items:center;gap:8px;padding:10px;border-radius:16px;text-decoration:none;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease}
.sr-duo-card:active{transform:scale(.97)}
.sr-duo-refer{background:#DFF3E4;border:1px solid #A8DDBB;box-shadow:none;}
.sr-duo-checkin{background:#fef6e8;border:1px solid rgba(180,120,20,.12);box-shadow:none;}
.sr-duo-plan{background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 50%,#BFDBFE 100%);border:1px solid rgba(23,92,211,.12);box-shadow:0 4px 14px rgba(23,92,211,.08)}
.sr-duo-plan .sr-duo-ic{background:#fff;color:#175CD3}
.sr-duo-ic{position:relative;flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--primary-mist,#eef4f2);border-radius:12px}
.sr-duo-refer .sr-duo-ic{color:var(--primary)}
.sr-duo-checkin .sr-duo-ic{color:#b45309;background:#fef3e8}
.sr-duo-ic .material-symbols-rounded{font-size:24px;line-height:1}
.sr-duo-ic .material-symbols-rounded+.material-symbols-rounded{position:absolute;right:-2px;bottom:-2px;font-size:14px;background:#fff;border-radius:50%;padding:2px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.sr-duo-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-duo-tx b{font-size:12.5px;font-weight: 700;line-height:1.3;color:var(--text)}
.sr-duo-checkin .sr-duo-tx b{color:#7c2d12}
.sr-duo-tx span{font-size:10.5px;line-height:1.35;color:#5a6b65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-duo-chev{flex:none;color:#8a9a94}
.sr-duo-chev svg{width:20px;height:20px}
.sr-duo-note{display:block;text-align:center;font-size:12.5px;font-weight:600;color:var(--primary);text-decoration:none;margin:2px 0 0}
.sr-duo-note:hover{text-decoration:underline;text-underline-offset:3px}

/* ================= উঁচু মাঝখানের নেভ বাটন (2026-10-18) ================= */
.sr-bottomnav.has-fab{padding-top:6px}
.sr-bnav-fab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;position:relative;min-height:44px}
.sr-bnav-fab-ic{width:58px;height:58px;border-radius:50%;background:linear-gradient(140deg,#178f66 0%,var(--sr-primary,#106050) 55%,var(--sr-deep,#0b463a) 100%);display:flex;align-items:center;justify-content:center;margin-top:-28px;box-shadow: 0 12px 26px -6px rgba(16,96,80,.5),0 0 0 5px rgba(16,96,80,.10);border:3px solid #fff;transition:transform .18s ease,box-shadow .18s ease;position:relative}
.sr-bnav-fab-ic::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px solid rgba(255,255,255,.30);pointer-events:none}
.sr-bnav-fab:active .sr-bnav-fab-ic{transform:scale(.93);box-shadow: 0 6px 16px -6px rgba(16,96,80,.5),0 0 0 5px rgba(16,96,80,.10);}
.sr-bnav-fab-ic .material-symbols-rounded{font-size:27px;color:#fff;font-variation-settings:'FILL' 1}
.sr-bnav-fab-lb{font-size:11px;font-weight:700;color:var(--sr-primary,#106050)}

/* ================= প্রিমিয়াম অফার কার্ড v2 — সফট গ্র্যাডিয়েন্ট + ওয়াটারমার্ক (2026-10-18) ================= */
.sr-offer-card2{position:relative;flex:0 0 200px;scroll-snap-align:start;border-radius:20px;padding:16px 14px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:6px;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease;border:1px solid rgba(255,255,255,.6)}
.sr-offer-card2:active{transform:scale(.97)}
.sr-offer-card2.g-green{background:#e6f4ec;border:1px solid #cde8d8;box-shadow:none}
.sr-offer-card2.g-amber{background:#fef3dd;border:1px solid #fbe3ae;box-shadow:none}
.sr-offer-card2.g-blue{background:#e3eefb;border:1px solid #c8ddf5;box-shadow:none}
.sr-offer-card2.g-teal{background:#ddf3f0;border:1px solid #bde6e0;box-shadow:none}
.sr-offer-card2.g-violet{background:#ece5fa;border:1px solid #d9cbf3;box-shadow:none}
.sr-offer-card2.g-indigo{background:#e5e9fb;border:1px solid #ccd6f6;box-shadow:none}
.sr-offer-card2.g-sky{background:#e2f2fd;border:1px solid #c4e4f8;box-shadow:none}
.sr-offer2-wm{position:absolute;right:-14px;bottom:-16px;opacity:.14;pointer-events:none}
.sr-offer2-wm .material-symbols-rounded{font-size:110px;line-height:1;color:var(--primary-deep)}
.sr-offer-card2 .sr-offer-op{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sr-primary,#106050);position:relative;z-index:1}
.sr-offer-card2 .sr-offer-title{font-size:14px;font-weight:700;line-height:1.35;min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;position:relative;z-index:1}
.sr-offer-card2 .sr-offer-price{font-size:13px;margin-top:auto;position:relative;z-index:1}
.sr-offer-card2 .sr-offer-price s{color:#6b7d77;font-size:11.5px}
.sr-offer-card2 .sr-offer-price b{color:var(--primary-deep);font-size:16px}

/* ===== টালিখাতা — সম্পূর্ণ সিস্টেম (2026-10-19) ===== */
.tk-count{margin:2px 0 10px;font-size:13px;font-weight:600;color:#7a8a85}
.tk-cust{text-decoration:none;color:inherit;box-shadow: 0 4px 14px rgba(8,56,46,.06);}
.tk-cust .material-symbols-rounded{color:#9aa7a1;font-size:20px;flex:none}
.tk-cust-due-red{color:#c0392b !important}
.tk-cust-av-lg{width:56px;height:56px;font-size:22px}
/* ফর্ম কার্ড */
.tk-form-card{background:#fff;border-radius:20px;padding:20px 18px;margin:0 0 14px;box-shadow: 0 10px 28px -12px rgba(16,42,36,.14);}
.tk-form{display:flex;flex-direction:column;gap:14px}
.tk-field{display:flex;flex-direction:column;gap:6px}
.tk-label{font-size:13px;font-weight:700;color:#33403b}
.tk-del-btn{color:#c0392b;border-color:#f0d5d0}
.tk-del-btn .material-symbols-rounded{font-size:20px}
/* গ্রাহক বিস্তারিত কার্ড */
.tk-detail-card{background:#fff;border-radius:20px;padding:18px;margin:-34px 0 14px;position:relative;z-index:2;box-shadow:0 12px 32px rgba(15, 23, 20, .12)}
.tk-detail-top{display:flex;align-items:center;gap:12px}
.tk-detail-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-detail-info b{font-size:17px;color:var(--text)}
.tk-detail-info i{font-style:normal;font-size:13px;color:#7a8a85;font-family:var(--font-amount-num)}
.tk-detail-info small{font-size:12px;color:#9aa7a1}
.tk-icon-btn{flex:none;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--primary-soft,#e9f4ee);color:var(--primary,#106050);text-decoration:none}
.tk-icon-btn:active{transform:scale(.92)}
.tk-icon-btn .material-symbols-rounded{font-size:20px}
.tk-detail-due-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft)}
.tk-detail-due-row span{font-size:14px;font-weight:600;color:#5b6b66}
.tk-detail-due{font-size:26px;font-weight: 700;font-family:var(--font-amount-num);letter-spacing:.3px}
.tk-detail-due-red{color:#c0392b}
.tk-detail-due-green{color:var(--primary-dark,#0b463a)}
/* ধার/আদায় ট্যাব + ফর্ম */
.tk-txn-form-card{background:#fff;border-radius:20px;padding:16px 18px 18px;margin:0 0 14px;box-shadow: 0 10px 28px -12px rgba(16,42,36,.14);}
.tk-txn-tabs{display:flex;background:#f0f4f2;border-radius:999px;padding:4px;margin-bottom:14px}
.tk-txn-tab{flex:1;border:none;background:transparent;border-radius:999px;padding:11px 8px;font-size:14px;font-weight:700;color:#7a8a85;font-family:inherit;cursor:pointer;transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)}
.tk-txn-tab.is-on{background:#fff;color:var(--primary-dark,#0b463a);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.tk-txn-submit.tk-txn-pay{background:var(--primary)}
/* লেনদেনের খাতা */
.tk-txn-sec{margin:0 0 24px}
.tk-sec-title{margin:0 0 10px;font-size:16px;font-weight: 700;color:var(--text)}
.tk-txn-empty{margin:0;background:#fff;border-radius:16px;padding:22px;text-align:center;font-size:14px;color:#7a8a85}
.tk-txn-list{display:flex;flex-direction:column;gap:8px}
.tk-txn{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow: 0 4px 14px -8px rgba(16,42,36,.12);}
.tk-txn-ic{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.tk-txn-ic .material-symbols-rounded{font-size:20px}
.tk-txn-due .tk-txn-ic{background:#fdeee9;color:#c0392b}
.tk-txn-pay .tk-txn-ic{background:var(--primary-soft,#e9f4ee);color:var(--primary-dark,#0b463a)}
.tk-txn-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.tk-txn-info b{font-size:14px;color:var(--text)}
.tk-txn-info i{font-style:normal;font-size:12px;color:#7a8a85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-txn-info small{font-size:11px;color:#9aa7a1}
.tk-txn-amt{font-size:16px;font-weight: 700;font-family:var(--font-amount-num);white-space:nowrap}
.tk-txn-due .tk-txn-amt{color:#c0392b}
.tk-txn-pay .tk-txn-amt{color:var(--primary-dark,#0b463a)}

/* ===== টালিখাতা TK-1 — ড্যাশবোর্ড + সেল/কেনা + প্রোডাক্ট/স্টক ===== */
.tk-dash{margin:0 0 14px}
.tk-dash-title{margin:2px 0 12px;font-size:16px;font-weight: 700;color:var(--text)}
.tk-dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tk-dash-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e8efec;border-radius:16px;padding:14px;text-decoration:none;color:inherit}
.tk-dash-card:active{transform:scale(.985)}
.tk-dash-ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--primary-soft,#e9f4ee);color:var(--primary,#106050)}
.tk-dash-ic .material-symbols-rounded{font-size:24px}
.tk-dash-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-dash-tx i{font-style:normal;font-size:12px;font-weight:600;color:#7a8a85}
.tk-dash-tx b{font-size:17px;font-weight: 700;color:var(--text);font-family:var(--font-amount-num)}
.tk-dash-tx small{font-size:11px;color:#9aa7a1;white-space:nowrap}
.tk-dash-green .tk-dash-tx b{color:var(--primary-dark,#0b463a)}
.tk-dash-red .tk-dash-tx b{color:#c0392b}

/* টালিখাতা নিট-লাইন (2026-11-11 ফোন-চেক D-1.1/D-1.2): দুটো অঙ্ক/লিংক কখনো জোড়া লাগবে না — flex + gap + ভার্টিকাল ডিভাইডার; ফেরত-লিংক ব্র্যান্ড-সবুজ (নীল/বেগুনি ডিফল্ট নয়)। */
.tk-net-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:12px 0 0}
.tk-net-line>span{white-space:nowrap}
.tk-net-line>span+span{position:relative;padding-left:13px}
.tk-net-line>span+span::before{content:'';position:absolute;left:0;top:50%;width:1px;height:16px;transform:translateY(-50%);background:#E5E7EB}
.tk-net-line a{color:#106050;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.tk-dash-sec{margin-top:16px}
.tk-dash-sec .tk-sec-title{display:flex;align-items:center;gap:8px}
.tk-dash-sec .tk-sec-title .material-symbols-rounded{font-size:20px;color:var(--primary,#106050)}
.tk-dash-more{margin-left:auto;font-size:13px;font-weight:700;color:var(--primary,#106050);text-decoration:none}
.tk-dash-list{display:flex;flex-direction:column;gap:8px}
.tk-dash-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e8efec;border-radius:16px;padding:12px 14px;text-decoration:none;color:inherit}
.tk-dash-row:active{transform:scale(.985)}
.tk-dash-row-tx{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.tk-dash-row-tx b{font-size:14px;color:var(--text)}
.tk-dash-row-tx i{font-style:normal;font-size:12px;color:#7a8a85}
.tk-dash-row-val{font-size:15px;font-weight: 700;font-family:var(--font-amount-num);white-space:nowrap}
.tk-dash-row-val-red{color:#c0392b}
.tk-dash-ic-sm{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary-soft,#e9f4ee);color:var(--primary-dark,#0b463a)}
.tk-dash-ic-sm .material-symbols-rounded{font-size:20px}
/* TK-1 অ্যাকশন-রো: সেল / কেনা / প্রোডাক্ট */
.tk-act3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 12px}
.tk-act3-card{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:1px solid #e8efec;border-radius:16px;padding:14px 6px 12px;text-decoration:none;color:inherit;text-align:center}
.tk-act3-card:active{transform:scale(.96)}
.tk-act3-card b{font-size:13px;font-weight:700;color:var(--text)}
/* পার্টি-ট্যাব (স্ক্রল-সিস্টেম) */
.tk-kind-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.tk-kind-tabs::-webkit-scrollbar{display:none}
.tk-kind-tab{flex:none;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid #e8efec;font-size:13px;font-weight:700;color:#5b6b66;text-decoration:none;white-space:nowrap}
.tk-kind-tab.is-on{background:var(--primary,#106050);border-color:var(--primary,#106050);color:#fff}
.tk-kind-row{display:flex;gap:8px}
.tk-kind-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;font-weight:700;color:#5b6b66;cursor:pointer;background:#fbfdfc}
.tk-kind-pill input{accent-color:var(--primary,#106050)}
.tk-kind-static{margin:0;font-size:15px;font-weight:700;color:var(--text)}
/* সেল/কেনা লাইন */
.tk-line{background:#fbfdfc;border:1px solid #e8efec;border-radius:16px;padding:12px;margin-bottom:10px}
.tk-line-top{display:flex;gap:8px;align-items:center}
.tk-line-prod-wrap{flex:1;min-width:0}
.tk-line-del{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid #f0d5d0;background:#fff;color:#c0392b;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tk-line-del .material-symbols-rounded{font-size:20px}
.tk-line-new{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.tk-line-new[hidden]{display:none}
.tk-line-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.tk-line-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.tk-line-total{margin:0;padding-top:13px;font-size:14px;font-weight: 700;font-family:var(--font-amount-num);color:var(--text);white-space:nowrap}
.tk-trade-sum{border-top:1px solid var(--border-soft);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.tk-trade-sum-row{display:flex;align-items:center;justify-content:space-between;font-size:14px}
.tk-trade-sum-row span{font-weight:600;color:#5b6b66}
.tk-trade-sum-row b{font-size:17px;font-weight: 700;font-family:var(--font-amount-num);color:var(--text)}
.tk-trade-note{margin:12px 0 0;font-size:13px;color:#5b6b66;line-height:1.6}
.tk-trade-row{text-decoration:none;color:inherit;border:1px solid #e8efec}
.tk-trade-row .tk-txn-ic{background:var(--primary-soft,#e9f4ee);color:var(--primary-dark,#0b463a)}
/* ট্রেড-চিপ (লেজারে) */
.tk-txn-trade{display:inline-flex;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--primary-dark,#0b463a);background:var(--primary-soft,#e9f4ee);border-radius:999px;padding:3px 9px;text-decoration:none;width:fit-content}
/* প্রোডাক্ট-তালিকা */
.tk-prod-off{opacity:.6}
.tk-prod-stock{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.tk-prod-stock b{font-size:14px;font-weight: 700;font-family:var(--font-amount-num);color:var(--text)}
.tk-prod-stock i{font-style:normal;font-size:12px;color:#7a8a85}
.tk-prod-low{font-size:11.5px;font-weight:700;color:#c0392b}
.tk-check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#33403b;cursor:pointer}
.tk-check input{accent-color:var(--primary,#106050);width:18px;height:18px}

/* ============ Scratch cards (user storefront, 2026-10-19) ============ */
.sc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sc-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow: 0 10px 28px -12px rgba(16,42,36,.14);border:1px solid rgba(16,80,60,.06);display:flex;flex-direction:column}
.sc-img{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--primary-soft,#e8f3ee),var(--primary-mist,#f4faf7));display:flex;align-items:center;justify-content:center;overflow:hidden}
.sc-img img{width:100%;height:100%;object-fit:cover}
.sc-ph-ic{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.sc-ph-ic .material-symbols-rounded{font-size:34px}
.sc-stock-low{position:absolute;top:8px;right:8px;background:#fdf1e0;color:#b45309;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.sc-body{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.sc-title{font-size:15px;font-weight: 700;color:var(--text,#1a2b26);margin:0;line-height:1.35}
.sc-desc{font-size:12.5px;color:var(--muted,#6b7d76);margin:0;line-height:1.5}
.sc-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.sc-price{font-size:19px;font-weight: 700;color:var(--primary,#106050)}
.sc-buyform{display:flex;flex-direction:column;gap:8px}
.sc-pin{text-align:center;letter-spacing:4px;font-weight:700}

/* ============ Notifications inbox (2026-10-19) ============ */
.nt-list{display:flex;flex-direction:column;gap:10px}
.nt-item{display:flex;align-items:flex-start;gap:12px;background:#fff;border-radius:16px;padding:14px;box-shadow: 0 8px 24px -12px rgba(16,42,36,.12);border:1px solid rgba(16,80,60,.06)}
.nt-item.is-unread{border-color:rgba(16,96,80,.25);background:linear-gradient(135deg,#f2f9f5,#fff)}
.nt-ic{width:46px;height:46px;aspect-ratio:1/1;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center}
.nt-ic .material-symbols-rounded{font-size:24px}
.nt-tx{flex:1;min-width:0}
.nt-title{font-size:14.5px;font-weight:700;color:var(--text,#1a2b26);line-height:1.4}
.nt-item.is-unread .nt-title::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--primary,#106050);margin-left:6px;vertical-align:middle}
.nt-body{font-size:13px;color:var(--muted,#6b7d76);margin-top:4px;line-height:1.55}
.nt-time{font-size:11.5px;color:var(--muted,#6b7d76);margin-top:6px}
.nt-dot{width:14px;height:14px;border-radius:50%;background:var(--primary,#106050);border:none;cursor:pointer;padding:0;flex-shrink:0;margin-top:4px}
.nt-check{color:var(--primary,#106050);flex-shrink:0;margin-top:2px}
.nt-check .material-symbols-rounded{font-size:20px}
.nt-readform{margin:0}

/* Bell unread badge on home hero */
.ha-head-act{position:relative;box-shadow: 0 4px 14px rgba(0,0,0,.12);}
.ha-bell-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:999px;background:#d6333f;color:#fff;font-size:11px;font-weight: 700;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}

/* ============ Pay Bill premium (bp-*) — 2026-10-19 ============ */
.bp-head{margin:4px 0 14px}
.bp-title{font-size:18px;font-weight: 700;color:var(--text,#15211d);margin:0 0 4px}
.bp-sub{font-size:13px;color:var(--muted,#71827c);margin:0}
.bp-crumb{margin:0 0 10px}
.bp-crumb a{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600;color:var(--primary,#106050);text-decoration:none}
svg.bp-crumb-ic{width:18px;height:18px;flex-shrink:0}
.bp-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* v167 (আতিক ভাই): আগের মতো বড় আলাদা কার্ড — বড় প্যাডিং/আইকন + ক্লিন বর্ডার, কালার অপরিবর্তিত। */
.bp-cat-card{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;box-shadow: 0 2px 10px rgba(16,96,80,.07);transition:transform .15s}
.bp-cat-card:active{transform:scale(.96)}
.bp-cat-ic{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.bp-cat-ic svg{width:32px;height:32px}
.bp-cat-name{font-size:14px;font-weight:700;color:var(--text,#15211d);text-align:center;line-height:1.3}
.bp-cat-count{font-size:11px;font-weight:600;color:var(--primary,#106050);background:var(--primary-soft,rgba(16,96,80,.08));border-radius:999px;padding:2px 10px}
.bp-biller-list{display:flex;flex-direction:column;gap:10px}
.bp-biller-row{background:#fff;border-radius:16px;padding:14px 14px 14px 12px;display:flex;align-items:center;gap:13px;text-decoration:none;box-shadow: 0 2px 10px rgba(16,96,80,.07);border:1px solid #eef4f1;transition:transform .15s,box-shadow .15s,border-color .15s}
.bp-biller-row:active{transform:scale(.98);border-color:var(--primary,#106050)}
.bp-biller-ic{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.bp-biller-ic svg{width:25px;height:25px}
.bp-biller-ic-lg{width:60px;height:60px;border-radius:20px}
.bp-biller-ic-lg svg{width:30px;height:30px}
/* বিলার লোগো (2026-10-19, আতিক ভাই) — বক্সে ফিট, সাদা ব্যাকগ্রাউন্ড। */
.bp-biller-ic-img{width:100%;height:100%;object-fit:contain;background:#fff;padding:4px}
.bp-biller-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bp-biller-tx b{font-size:14.5px;font-weight:700;color:var(--text,#15211d)}
.bp-biller-tx small{font-size:12px;color:var(--muted,#71827c)}
svg.bp-chev{width:20px;height:20px;color:var(--muted,#71827c);flex-shrink:0}
.bp-biller-hero{background:linear-gradient(135deg,#ffffff,#f4faf7);border-radius:20px;padding:18px 16px;display:flex;align-items:center;gap:14px;margin-bottom:14px;box-shadow: 0 3px 14px rgba(16,96,80,.09);border:1px solid #e9f2ed}
.bp-form{background:#fff;border-radius:20px;padding:20px 16px;box-shadow: 0 3px 14px rgba(16,96,80,.09);border:1px solid #eef4f1}
.bp-sec-label{font-size:13px;font-weight:700;color:var(--text,#15211d);margin:14px 0 6px}
.bp-sec-label:first-child{margin-top:0}
.bp-req{color:#d6333f}
.bp-field{margin-bottom:2px}
.bp-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bp-taka{position:absolute;left:14px;font-size:17px;font-weight: 700;color:var(--primary,#106050)}
.bp-hint{font-size:12px;color:var(--muted,#71827c);margin:6px 0 0}
.bp-btn{display:block;width:100%;border:none;border-radius:12px;padding:15px;font-size:15.5px;font-weight: 700;color:#fff;background:linear-gradient(135deg,#178f66,var(--primary) 55%,var(--primary-dark));cursor:pointer;margin-top:18px;text-decoration:none;text-align:center;box-shadow: 0 6px 18px rgba(16,96,80,.28);transition:transform .15s;font-family:inherit}
.bp-btn:active{transform:scale(.98)}
.bp-btn-outline{background:#fff;color:var(--primary,#106050);border:1.5px solid var(--primary,#106050);box-shadow:none;margin-top:10px}
.bp-card{background:#fff;border-radius:16px;padding:18px 16px;box-shadow: 0 2px 12px rgba(16,96,80,.08);margin-bottom:12px}
.bp-center{text-align:center}
.bp-sum-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.bp-sum-title{font-size:16px;font-weight: 700;color:var(--text,#15211d);margin:0}
.bp-sum-biller{font-size:13px;color:var(--muted,#71827c);margin:2px 0 0}
.bp-sum-rows{margin-top:8px}
.bp-sum-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed #e8efec;font-size:13.5px}
.bp-sum-row:last-child{border-bottom:none}
.bp-sum-row span{color:var(--muted,#71827c)}
.bp-sum-row b{color:var(--text,#15211d);font-weight:700;text-align:right}
.bp-sum-row .bp-green{color:#147a45}
.bp-sum-total{border-top:2px solid var(--primary,#106050);margin-top:4px;padding-top:12px}
.bp-sum-total span{color:var(--text,#15211d);font-weight:700}
.bp-sum-total b{font-size:17px;color:var(--primary,#106050);font-weight: 700}
.bp-sum-comm b{font-size:13px}
.bp-mono{font-family:ui-monospace,monospace;font-size:12.5px}
.bp-receipt-title{font-size:17px;font-weight: 700;color:var(--text,#15211d);margin:10px 0 4px}
.bp-badge-wrap{margin-bottom:6px}
.bp-empty{background:#fff;border-radius:12px;padding:28px 16px;text-align:center;color:var(--muted,#71827c);font-size:14px}

/* ============ Send Money progressive flow (2026-10-19, আতিক ভাই) ============ */
.sm-flow{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.sm-flow>form{display:flex;flex-direction:column;gap:14px}
.sm-card{background:#fff;border-radius:16px;padding:16px 14px;box-shadow: 0 2px 14px rgba(16,96,80,.08);border:1px solid #eef4f1}
.sm-receiver{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:12px;border:1.5px solid transparent;background:#f7faf9;min-height:72px}
/* hidden অ্যাট্রিবিউট honor — নইলে খালি shadow বক্স দেখায় (2026-10-20, v61 গ্রুপ D ফিক্স):
   author-origin display:flex UA-এর [hidden]{display:none}-কে override করে। */
.sm-receiver[hidden]{display:none!important}
.sm-receiver.is-loading{color:var(--muted);font-size:13.5px;justify-content:center}
.sm-receiver.is-error{border-color:#f3c1c1;background:#fef6f6;color:#b34040;font-size:13.5px;justify-content:center;text-align:center}
.sm-receiver.is-ok{border-color:#bfe3d2;background:linear-gradient(135deg,#f2faf5,#e9f6ef)}
.sm-av{width:52px;height:52px;border-radius:50%;flex:0 0 52px;overflow:hidden;background:linear-gradient(135deg,var(--primary,#106050),#1a8a68);display:flex;align-items:center;justify-content:center;box-shadow: 0 2px 8px rgba(16,96,80,.25);}
.sm-av-img{width:100%;height:100%;object-fit:cover}
.sm-av-init{color:#fff;font-size:20px;font-weight: 700}
.sm-rc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sm-rc-tx b{font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-rc-tx small{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sm-rc-ok{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--primary,#106050);color:#fff;display:flex;align-items:center;justify-content:center}
.sm-rc-ok svg{width:15px;height:15px}
.sm-reveal{animation:smReveal .35s ease both}
@keyframes smReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sm-fee{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:8px 12px;border-radius:8px;background:#f2f8f5;font-size:12.5px;color:#5b6f67}
.sm-fee[hidden]{display:none!important}
.sm-fee .is-total{font-weight: 700;color:var(--primary,#106050)}
/* ব্যালেন্স রো — প্রোফাইল-যাচাইয়ের পর details কার্ডের উপরে (2026-10-20, v61 গ্রুপ D)। */
.sm-bal-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:#f2faf5;border:1px solid #dcebe4;font-size:13px;color:#5b6f67;margin-bottom:12px}
.sm-bal-row b{color:var(--primary,#106050);font-weight: 700;font-size:15px;font-variant-numeric:tabular-nums}
#sm-slide-wrap{margin-top:2px}
/* success popup */
.sm-ok{max-width:520px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:12px}
.sm-ok .sr-success-pop{margin:6px auto 0}
.sm-ok-amount{font-size:34px;font-weight: 700;color:var(--primary,#106050);font-variant-numeric:tabular-nums;line-height:1.1}
.sm-ok-msg{font-size:15px;color:#5b6f67;margin-top:-8px}
.sm-ok-card{background:#fff;border-radius:16px;padding:6px 16px;box-shadow: 0 2px 14px rgba(16,96,80,.08);border:1px solid #eef4f1;text-align:left}
.sm-ok-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed #e8efec;font-size:13.5px}
.sm-ok-row:last-child{border-bottom:none}
.sm-ok-row span{color:var(--muted);flex-shrink:0}
.sm-ok-row b{color:var(--text);font-weight:700;text-align:right;min-width:0}
.sm-ok-row b small{color:var(--muted);font-weight:400}
.sm-ok-row.is-total{border-top:2px solid var(--primary,#106050);margin-top:2px;padding-top:13px}
.sm-ok-row.is-total b{color:var(--primary,#106050);font-size:16px}

/* ============ Drive offers — premium redesign (2026-10-19, আতিক ভাই) ============ */
/* Operators page */
.drv-sec-head{margin:14px 0 10px}
.drv-sec-head-2{margin-top:20px}
.drv-sec-title{font-size:16px;font-weight: 700;color:var(--text);margin:0}
.drv-op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.drv-op-card{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid #edf1ef;border-radius:12px;padding:12px 6px 10px;text-decoration:none;color:inherit;box-shadow: 0 2px 8px rgba(16,96,80,.05);transition:transform .15s ease,box-shadow .15s ease}
.drv-op-card:active{transform:scale(.96)}
.drv-op-logo{width:40px;height:40px;object-fit:contain}
.drv-op-mark{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight: 700;color:#fff;background:linear-gradient(135deg,var(--primary,#106050),var(--primary-dark))}
.drv-op-name{font-size:11.5px;font-weight:700;color:var(--text);text-align:center;line-height:1.3}
.drv-op-count{font-size:10px;color:var(--muted)}
/* Operator page notice — professional instruction box (2026-10-19, আতিক ভাই) */
.drv-notice{display:flex;gap:10px;align-items:flex-start;background:var(--primary-mist);border:1px solid #dcebe5;border-radius:12px;padding:12px 14px;margin-top:16px border-left:4px solid var(--primary,#106050);}
.drv-notice-ic{flex:0 0 auto;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--primary-soft,#e7f2ee);color:var(--primary,#106050)}
.drv-notice-ic .material-symbols-rounded{font-size:19px}
.drv-notice-tx{font-size:12.5px;line-height:1.65;color:#3c4f49}
.drv-notice-tx strong{color:var(--primary,#106050)}
/* Operator header on offers page */
.drv-head{display:flex;align-items:center;gap:12px;margin:6px 0 12px}
.drv-head-logo{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid #edf1ef;border-radius:16px;padding:6px}
.drv-head-mark{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight: 700;color:#fff;background:linear-gradient(135deg,var(--primary,#106050),var(--primary-dark))}
.drv-head-title{font-size:17px;font-weight: 700;color:var(--text);margin:0}
.drv-head-sub{font-size:12px;color:var(--muted);margin:2px 0 0}
/* Tabs */
.drv-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:none}
.drv-tabs::-webkit-scrollbar{display:none}
.drv-tab{flex:0 0 auto;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid #e5ebe8;font-size:13px;font-weight:700;color:#5a6b65;text-decoration:none;transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)}
.drv-tab.is-active{background:var(--primary,#106050);border-color:var(--primary,#106050);color:#fff;box-shadow: 0 4px 12px rgba(16,96,80,.25);}
/* Offer cards */
.drv-offer-list{display:flex;flex-direction:column;gap:12px}
.drv-card{position:relative;display:block;border-radius:20px;padding:16px 16px 14px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .15s ease box-shadow: 0 4px 14px -6px rgba(16,80,60,.10);}
.drv-card:active{transform:scale(.98) box-shadow: 0 6px 18px -6px rgba(16,80,60,.18);}
.drv-card.g-blue{background:linear-gradient(135deg,#e3eefb,#c8ddf5);box-shadow:0 6px 18px rgba(40,90,160,.12)}
.drv-card.g-teal{background:linear-gradient(135deg,#ddf3f0,#bde6e0);box-shadow:0 6px 18px rgba(15, 23, 20, .12)}
.drv-card.g-violet{background:linear-gradient(135deg,#ece5fa,#d9cbf3);box-shadow:0 6px 18px rgba(90,60,160,.12)}
.drv-card.g-indigo{background:linear-gradient(135deg,#e5e9fb,#ccd6f6);box-shadow:0 6px 18px rgba(60,70,160,.12)}
.drv-card.g-sky{background:linear-gradient(135deg,#e2f2fd,#c4e4f8);box-shadow:0 6px 18px rgba(30,110,170,.12)}
.drv-card-wm{position:absolute;right:-12px;bottom:-14px;opacity:.13;pointer-events:none}
.drv-card-wm .material-symbols-rounded{font-size:104px;line-height:1;color:var(--primary-deep)}
.drv-card-op{position:relative;z-index:1;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--primary,#106050)}
.drv-card-op-logo{width:26px;height:18px;object-fit:contain}
.drv-card-title{position:relative;z-index:1;font-size:15px;font-weight: 700;color:var(--primary-deep);line-height:1.4;margin:6px 0 2px}
.drv-card-valid{position:relative;z-index:1;font-size:11.5px;color:#5a6b65}
.drv-card-foot{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin-top:10px}
.drv-card-was{font-size:12px;color:var(--muted)}
.drv-card-price{font-size:18px;font-weight: 700;color:var(--primary-deep)}
.drv-card-go{margin-left:auto;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;color:var(--primary,#106050)}
.drv-card-go .material-symbols-rounded{font-size:20px}
.drv-empty{background:#fff;border:1px dashed #d5dedb;border-radius:16px;padding:28px 16px;text-align:center;color:var(--muted);font-size:13.5px}
/* Detail hero */
.drv-hero{position:relative;overflow:hidden;border-radius:20px;padding:20px 18px;background:linear-gradient(135deg,#e6f4ec,#cde8d8);box-shadow: 0 8px 24px rgba(16,96,80,.14);margin-bottom:12px}
.drv-hero-op{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.drv-hero-op span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--primary,#106050)}
.drv-hero-logo{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:12px;padding:5px}
.drv-hero-mark{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight: 700;color:#fff;background:linear-gradient(135deg,var(--primary,#106050),var(--primary-dark))}
.drv-hero-title{position:relative;z-index:1;font-size:19px;font-weight: 700;color:var(--primary-deep);line-height:1.35;margin:0 0 4px}
.drv-hero-valid{position:relative;z-index:1;font-size:12.5px;color:#3d5a52;margin:0 0 12px}
.drv-hero-prices{position:relative;z-index:1;display:flex;align-items:baseline;gap:10px}
.drv-hero-was{font-size:14px;color:var(--muted)}
.drv-hero-price{font-size:26px;font-weight: 700;color:var(--primary-dark)}
/* Summary */
.drv-sum{background:#fff;border:1px solid #edf1ef;border-radius:20px;padding:6px 16px;margin-bottom:12px;box-shadow: 0 2px 10px rgba(16,96,80,.05);}
.drv-sum-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f1f4f3;font-size:13.5px}
.drv-sum-row:last-child{border-bottom:none}
.drv-sum-row .k{color:#5a6b65;font-weight:600}
.drv-sum-row .v{color:var(--text);font-weight:700;text-align:right}
.drv-sum-row .v s{color:#98a5a0;font-weight:500}
.drv-sum-big{font-size:17px;color:var(--primary,#106050)}
.drv-sum-save .v{color:#0b7a55}
.drv-sum-pts{color:#b7791f}
.drv-mono{font-family:ui-monospace,monospace;font-size:12.5px}
.drv-sum-note{padding:10px 0;font-size:12.5px;color:#5a6b65;line-height:1.6;border-top:1px dashed #e5ebe8}
/* Form */
.drv-form{background:#fff;border:1px solid #edf1ef;border-radius:20px;padding:18px 16px;box-shadow: 0 2px 10px rgba(16,96,80,.05);}
/* Success */
.drv-success{background:#fff;border:1px solid #E5E7EB;border-radius:20px;padding:30px 20px 24px;text-align:center;box-shadow:none;margin-bottom:12px;animation:drvPopIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes drvPopIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.drv-success .sr-success-pop{margin:0 auto 14px}
.drv-success-title{font-size:18px;font-weight: 700;color:var(--primary-deep);margin:0 0 6px}
.drv-success-sub{font-size:13px;color:#5a6b65;line-height:1.6;margin:0 0 12px}
.drv-receipt{background:#fff;border:1px solid #edf1ef;border-radius:20px;padding:6px 16px;margin-bottom:14px}
.drv-actions{margin-bottom:8px}
/* My requests */
.drv-req{background:#fff;border:1px solid #edf1ef;border-radius:20px;padding:14px 16px;margin-top:14px}

/* ===== Recharge page premium redesign (2026-10-19, আতিক ভাইয়ের রেফারেন্স) ===== */
.rc-form { display: block; }
.rc-field { margin-bottom: 16px; }
.rc-label { display: block; font-size: 14px; font-weight: 600; color: var(--text, #15211d); margin-bottom: 8px; }
.rc-mobile-row { display: flex; gap: 10px; align-items: stretch; }
.rc-ic { width: 20px; height: 20px; flex: none; color: var(--primary, #106050); }
.rc-ic-sm { width: 16px; height: 16px; flex: none; color: var(--muted, #6b7d76); }
.rc-contact-btn { width: 52px; min-height: 52px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--primary-mist, #eef4f2); border: 0; border-radius:12px; cursor: pointer; }
.rc-contact-btn:active { transform: scale(.94); }
.rc-hint { font-size: 12.5px; color: var(--muted, #6b7d76); margin: 6px 2px 0; }
.rc-detect { color: var(--primary, #106050); font-weight: 600; }
.rc-op-row { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: #fff; border: 1.5px solid var(--border, #e3eae7); border-radius:12px; padding: 14px;
  font-family: inherit; cursor: pointer; margin-bottom: 16px; }
.rc-op-row:active { transform: scale(.99); }
.rc-op-row-label { font-size: 15px; font-weight: 700; color: var(--text, #15211d); }
.rc-op-row-pick { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted, #6b7d76); }
.rc-op-type-tag { font-size: 11px; font-weight: 700; color: #fff; background: var(--primary, #106050);
  border-radius:999px; padding: 3px 10px; }
.rc-amount-wrap { background: #fff; border: 1.5px solid var(--border, #e3eae7); border-radius:16px;
  padding: 18px 16px; margin-bottom: 12px; }
.rc-amount-row { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--border, #e3eae7);
  padding-bottom: 10px; margin-bottom: 14px; }
.rc-taka { font-size: 28px; font-weight: 700; color: var(--primary, #106050); }
.rc-amount-row input { flex: 1; border: 0; outline: 0; background: none; font-size: 26px; font-weight: 600;
  color: var(--text, #15211d); font-family: inherit; min-width: 0; }
.rc-amount-row input::placeholder { color: var(--muted, #6b7d76); opacity: .5; }
.rc-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rc-chips .sr-quick-chip { border: 1px solid var(--border, #e3eae7); background: #f8faf9; border-radius:12px;
  padding: 12px 4px; font-size: 15px; font-weight: 700; color: var(--text, #15211d);
  font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px -4px rgba(11,46,38,.1);}
.rc-chips .sr-quick-chip:active { background: var(--primary-mist, #eef4f2); border-color: var(--primary, #106050); }
.rc-balance { text-align: center; font-size: 13.5px; color: var(--muted, #6b7d76); margin: 4px 0 16px; }
.rc-balance b { color: var(--text, #15211d); }
.rc-next { width: 100%; border: 0; border-radius:999px; padding: 16px; font-size: 17px; font-weight: 700;
  font-family: inherit; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #178f66 0%, var(--primary) 60%, var(--primary-dark) 100%);
  box-shadow: 0 14px 26px -12px rgba(16,96,80,.5); }
.rc-next:active { transform: scale(.98); }
/* Important info button — ছোট, ফুল-উইডথ */
.rc-info-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: #f0f7f4; border: 1px dashed var(--primary, #106050); border-radius:12px;
  padding: 10px; font-size: 13.5px; font-weight: 600; color: var(--primary, #106050);
  font-family: inherit; cursor: pointer; margin-bottom: 14px; box-shadow: 0 2px 8px -4px rgba(11,46,38,.12);}
.rc-info-btn:active { transform: scale(.99); }
.rc-info-ic { width: 18px; height: 18px; }
.rc-info-chev { width: 14px; height: 14px; }
.rc-info-body { font-size: 14.5px; line-height: 1.7; color: var(--text, #15211d); }
/* Gate message — নাম্বার/অপারেটর ছাড়া */
.rc-gate { background: #fff; border: 1.5px solid var(--border, #e3eae7); border-radius:16px;
  padding: 32px 20px; text-align: center; margin-bottom: 14px; }
.rc-gate-icon .rc-ic, .rc-gate-icon svg { width: 44px; height: 44px; color: var(--primary, #106050); opacity: .7; }
.rc-gate-msg { font-size: 15px; font-weight: 600; color: var(--text, #15211d); margin: 12px 0 0; }
/* Offer cards — রেফারেন্স ডিজাইন: আইকন + টাইটেল + মেয়াদ + সবুজ দাম */
.rc-offer { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1.5px solid var(--border, #e3eae7); border-radius:16px; padding: 14px;
  font-family: inherit; cursor: pointer; margin-bottom: 10px;
  box-shadow: 0 2px 10px -6px rgba(0, 0, 0, .12); }
.rc-offer:active { transform: scale(.985); border-color: var(--primary, #106050); }
.rc-offer-ic { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--primary-mist, #eef4f2); border-radius:12px; }
.rc-offer-ic .rc-ic { width: 22px; height: 22px; }
.rc-offer-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-offer-title { font-size: 14.5px; font-weight: 700; color: var(--text, #15211d); line-height: 1.4; }
.rc-offer-valid { font-size: 12.5px; color: var(--muted, #6b7d76); }
.rc-offer-price { font-size: 17px; font-weight: 700; color: var(--primary, #106050); white-space: nowrap; }
/* Operator sheet — ৩ কলাম, সাদা কার্ড, সিলেক্টে সবুজ বর্ডার */
.sr-op-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sr-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sr-sheet-title { font-size: 17px; font-weight: 700; margin: 0; flex: 1; text-align: center; }
.sr-sheet-close { width: 32px; height: 32px; flex: none; border: 0; border-radius:50%;
  background: #f0f2f1; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text, #15211d); }

/* ---- Scratch card PIN display (2026-10-19, আতিক ভাই) ---- */
.sc-offercard .sr-offercard-mid{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.sr-offercard-ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none}
.sr-offercard-ic .ms{font-size:28px}
.sr-offercard-thumb{width:52px;height:52px;border-radius:16px;object-fit:cover;flex:none}
.sc-offercard .sr-offercard-title{margin:0;font-size:16px}
.sc-buyform{margin-top:10px}
.sc-buyrow{display:flex;gap:8px}
.sc-buyrow .sc-pin{flex:1;min-width:0}
.sc-buyrow .sr-btn{flex:none;padding-left:18px;padding-right:18px}
.sc-stock-low{font-size:11px;font-weight:700;color:#b45309;background:#fef3c7;border-radius:999px;padding:3px 10px}
.sr-offercard-buy.is-disabled{opacity:.5;pointer-events:none}
/* PIN reveal card (success screen) */
.sc-pin-card{background:#fff;border:1px solid #edf1ef;border-radius:20px;padding:22px 18px;margin:0 auto 14px;max-width:480px;text-align:center;box-shadow: 0 10px 28px -12px rgba(16,42,36,.14);}
.sc-pin-label{font-size:13px;font-weight:600;color:#5b6f68;margin-bottom:10px}
.sc-pin-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:30px;font-weight: 700;letter-spacing:3px;color:#0e2a23;background:var(--primary-mist);border:2px dashed var(--primary);border-radius:16px;padding:14px 10px;margin-bottom:14px;word-break:break-all}
.sc-pin-actions{display:flex;gap:8px;justify-content:center}
.sc-pin-actions .sr-btn{display:inline-flex;align-items:center;gap:6px}
.sc-pin-actions .ms{font-size:18px}
.sc-pin-sub{font-size:12px;margin-top:8px}
.sc-pin-link{background:none;border:none;padding:0;color:var(--primary);font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:none}
.sc-pin-link:hover{text-decoration:underline;text-underline-offset:2px}
/* PIN modal */
.sc-modal-backdrop{position:fixed;inset:0;background:rgba(10,25,20,.55);z-index:90;display:flex;align-items:flex-end;justify-content:center;padding:0}
.sc-modal-backdrop[hidden]{display:none}
.sc-modal{width:100%;max-width:480px;background:#f6f9f8;border-radius:20px 20px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
/* ---- Admin PIN inventory ---- */
.admin-pin-nums{white-space:nowrap}
.admin-pin-avail{color:var(--primary);font-size:15px}
.admin-pin-sold{color:#b45309;font-size:15px}
.admin-pin-code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--primary-mist);padding:4px 10px;border-radius:8px;letter-spacing:1px}
.admin-stat-n{font-size:30px;font-weight: 700;color:#0e2a23}

/* টালিখাতা — বিজনেস নোট + SMS (2026-10-19, আতিক ভাই) */
.tk-action-row{display:flex;gap:10px;margin:2px 0 12px}
.tk-action-card{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;
  padding:13px 12px;border:1px solid var(--border-soft);box-shadow:0 6px 18px rgba(15, 23, 20, .08);
  color:inherit;text-decoration:none}
.tk-action-card:active{transform:scale(.97)}
.tk-action-ic{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:var(--primary-mist,#eef4f2);color:var(--primary-dark,#106050)}
.tk-action-ic-amber{background:#fdf3e3;color:#b07a1e}
.tk-action-ic-blue{background:#e8f1fd;color:#2b6cb0}
.tk-action-ic .material-symbols-rounded{font-size:22px}
.tk-action-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tk-action-tx b{font-size:13.5px;font-weight:700;color:var(--text)}
.tk-action-tx i{font-size:11.5px;font-style:normal;color:#7a8a85}
.tk-action-card>.material-symbols-rounded{font-size:20px;color:#b6c2bd}
.tk-note-list{display:flex;flex-direction:column;gap:10px}
.tk-note-card{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:14px;
  border:1px solid var(--border-soft);box-shadow:0 4px 14px rgba(15, 23, 20, .06);color:inherit;text-decoration:none}
.tk-note-card:active{transform:scale(.985)}
.tk-note-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tk-note-tx b{font-size:14px;font-weight:700;color:var(--text)}
.tk-note-card p{margin:4px 0 0;font-size:12.5px;font-weight:400;color:#5d6f69;line-height:1.5}
.tk-note-card small{font-size:11px;color:#9aa9a3;font-weight:400}
.tk-note-card>.material-symbols-rounded{font-size:20px;color:#b6c2bd;flex:none}
.tk-sms-bal{display:flex;align-items:center;gap:12px;background:var(--primary);
  border-radius:16px;padding:16px;color:#fff;margin-bottom:12px;box-shadow:var(--shadow-card);}
.tk-sms-bal-ic{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:rgba(255,255,255,.16)}
.tk-sms-bal-ic .material-symbols-rounded{font-size:24px}
.tk-sms-bal-tx{flex:1;display:flex;flex-direction:column}
.tk-sms-bal-tx b{font-size:26px;font-weight: 700;font-family:var(--font-amount-num)}
.tk-sms-bal-tx i,.tk-sms-bal-rate i{font-size:11.5px;font-style:normal;opacity:.85}
.tk-sms-bal-rate{text-align:right;display:flex;flex-direction:column}
.tk-sms-bal-rate b{font-size:16px;font-weight: 700;font-family:var(--font-amount-num)}
/* TK-3: মেসেজ-টেমপ্লেট + বাল্ক-পাঠানো (2026-11-08) — বিদ্যমান tk-প্যাটার্নে, নতুন টোকেন নয়। */
.tk-msg-hint{font-size:13px;color:#5a6b65;line-height:1.6;margin:0 0 12px}
.tk-msg-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.tk-msg-chip{flex:none;border:1px solid var(--border-soft);background:#f4f8f6;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;color:var(--primary);font-family:inherit;cursor:pointer}
.tk-msg-chip:hover{background:#eef6f2}
.tk-pick-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border-soft);border-radius:14px;background:#fff;cursor:pointer}
.tk-pick-row input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--primary)}
.tk-pick-tx{flex:1;display:flex;flex-direction:column;min-width:0}
.tk-pick-tx b{font-size:14px;font-weight:700;color:var(--text)}
.tk-pick-tx i{font-size:12.5px;font-style:normal;color:#5a6b65}
.tk-pick-tx small{font-size:12px;color:#7a8a85}
.tk-pick-all{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--text);margin:0 0 10px;cursor:pointer}
.tk-pick-all input{width:18px;height:18px;accent-color:var(--primary)}
.tk-msg-links{display:flex;flex-direction:column;gap:8px;margin:12px 0 0}
.tk-msg-links a{font-size:13.5px;font-weight:700;color:var(--primary);text-decoration:none}
.tk-run-sum{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tk-run-pill{border:1px solid var(--border-soft);background:#f4f8f6;border-radius:999px;padding:7px 12px;font-size:13px;color:var(--text)}
.tk-run-pill b{font-family:var(--font-amount-num)}
.tk-sec-title{font-size:15px;font-weight:700;color:var(--text);margin:0 0 12px}
.u-mb12{margin-bottom:12px}

/* ---------- Tutorial info page — premium (2026-10-19, আতিক ভাই) ---------- */
.sr-tut-video-card{margin:0 0 20px;border-radius:20px;overflow:hidden;box-shadow: 0 8px 28px rgba(16,96,80,.14);background:#fff}
.sr-tut-video-thumb{position:relative;display:block;width:100%;padding:0;border:0;background:#0b3d33;cursor:pointer}
.sr-tut-video-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sr-tut-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sr-tut-video-play .material-symbols-rounded{width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(16,96,80,.92);color:#fff;font-size:36px;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.sr-tut-title{font-size:20px;font-weight:700;color:#1a1a1a;margin:0 0 16px;line-height:1.4}
.sr-tut-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sr-tut-points li{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.sr-tut-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--primary,#106050);margin-top:7px}
.sr-tut-points li span:last-child{font-size:14.5px;line-height:1.65;color:#333}

/* ভিডিও প্লেসহোল্ডার (2026-10-19, আতিক ভাই) — URL না থাকলে */
.sr-wel-video-ph{display:block;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#0e5a48,#1a7a5e);}

/* ---------- Daily Check-In রিডিজাইন (2026-10-19, আতিক ভাই — রেফারেন্স অনুযায়ী) ---------- */
.sr-ci-wrap{max-width:520px;margin:0 auto;padding:4px 12px 24px}
.sr-ci-trophy{width:84px;height:84px;margin:12px auto 14px;border-radius:50%;background:#fff9e6;display:flex;align-items:center;justify-content:center;box-shadow:none;border:2px solid rgba(255,255,255,.8)}
.sr-ci-trophy .material-symbols-rounded{font-size:44px;color:#e8a50c;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.sr-ci-title{text-align:center;font-size:22px;font-weight: 700;margin:0 0 20px;color:#1a1a1a;letter-spacing:-.3px}
.sr-ci-circles{display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px}
.sr-ci-circle{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;border:2px solid #e0e0e0;background:#fafafa;color:#999;transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease)}
.sr-ci-circle .material-symbols-rounded{font-size:20px}
.sr-ci-circle.is-done{border-color:var(--primary);background:linear-gradient(135deg,var(--primary),#1a8a6a);color:#fff;box-shadow: 0 4px 12px rgba(16,96,80,.3);}
.sr-ci-circle.is-today{border-color:var(--primary);background:#fff;color:var(--primary);box-shadow: 0 0 0 4px rgba(16,96,80,.15);transform:scale(1.08)}
.sr-ci-line{width:16px;height:3px;background:#e0e0e0;flex:none;border-radius:4px}
.sr-ci-line.is-done{background:linear-gradient(90deg,var(--primary),#1a8a6a)}
.sr-ci-progress-card{background:#fff8e1;border-radius:16px;padding:18px;text-align:center;margin-bottom:22px;box-shadow:none;border:1px solid rgba(255,213,79,.4)}
.sr-ci-progress-text{font-weight: 700;font-size:16px;margin:0 0 8px;color:#1a1a1a}
.sr-ci-next{margin:0;font-size:14px;color:#b07800;font-weight:700}
.sr-ci-sec{font-size:18px;font-weight: 700;margin:0 0 14px;color:#1a1a1a}
.sr-ci-list{display:flex;flex-direction:column;gap:12px}
.sr-ci-row{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid #f0f0f0;transition:transform .2s,box-shadow .2s}
.sr-ci-row:active{transform:scale(.98)}
.sr-ci-row-info{flex:1;min-width:0}
/* চেক-ইন পেজ — ফুল প্রফেশনাল রিডিজাইন v2 (2026-10-19, আতিক ভাই) */
.sr-ci-wrap2{max-width:560px;margin:0 auto;padding:4px 12px 28px}
.sr-ci-hero{background:linear-gradient(135deg,#0d4f42 0%,var(--primary) 45%,#1a8a6a 100%);border-radius:20px;padding:28px 20px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow: 0 12px 32px rgba(16,96,80,.35);margin-bottom:16px}
.sr-ci-hero-ic{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.3)}
.sr-ci-hero-ic .material-symbols-rounded{font-size:38px;color:#ffd54f}
.sr-ci-hero h2{margin:0 0 8px;font-size:20px;font-weight: 700}
.sr-ci-hero p{margin:0 0 14px;font-size:14px;opacity:.92}
.sr-ci-hero-bar{height:10px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden;margin-bottom:8px}
.sr-ci-hero-fill{height:100%;background:#ffd54f;border-radius:99px;transition:width .5s}
.sr-ci-hero-pct{font-size:13px;font-weight:700;opacity:.9}
.sr-ci-today{display:flex;align-items:center;gap:14px;background:#fff8e1;border-radius:16px;padding:16px;margin-bottom:20px;border:1px solid rgba(255,213,79,.4)}
.sr-ci-today-ic{width:52px;height:52px;flex:none;border-radius:16px;background:linear-gradient(135deg,#ffd54f,#ffb300);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(255,179,0,.3)}
.sr-ci-today-ic .material-symbols-rounded{font-size:28px;color:#fff}
.sr-ci-today b{display:block;font-size:15px;color:#1a1a1a;margin-bottom:2px}
.sr-ci-today span{font-size:12px;color:#b07800}
.sr-ci-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:22px}
.sr-ci-day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:12px;background:#f5f5f5;border:2px solid transparent;transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease)}
.sr-ci-day-icon .material-symbols-rounded{font-size:22px;color:#bbb}
.sr-ci-day-num{font-size:11px;font-weight:700;color:#888}
.sr-ci-day-coins{font-size:12px;font-weight: 700;color:#999}
.sr-ci-day.is-done{background:#e8f5e9;border-color:var(--primary)}
.sr-ci-day.is-done .material-symbols-rounded{color:var(--primary)}
.sr-ci-day.is-done .sr-ci-day-num,.sr-ci-day.is-done .sr-ci-day-coins{color:var(--primary)}
.sr-ci-day.is-today{background:#fff;border-color:var(--primary);box-shadow: 0 0 0 3px rgba(16,96,80,.15);transform:scale(1.05)}
.sr-ci-day.is-today .material-symbols-rounded{color:#e8a50c}
.sr-ci-day.is-today .sr-ci-day-num{color:var(--primary)}
.sr-ci-day.is-today .sr-ci-day-coins{color:#b07800}
@media (max-width: 400px){.sr-ci-grid{gap:6px}.sr-ci-day{padding:8px 2px}.sr-ci-day-icon .material-symbols-rounded{font-size:18px}}
.sr-ci-row-day{flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#f5f5f5,#e8e8e8);display:flex;align-items:center;justify-content:center}
.sr-ci-row-num{font-size:18px;font-weight: 700;color:#666}
.sr-ci-row.is-claimed .sr-ci-row-day{background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}
.sr-ci-row.is-claimed .sr-ci-row-num{color:var(--primary)}
.sr-ci-row.is-progress .sr-ci-row-day{background:#fff8e1}
.sr-ci-row.is-progress .sr-ci-row-num{color:#b07800}
.sr-ci-claim-btn{border-radius:8px !important;font-weight:700}
.sr-ci-row-info strong{display:block;font-size:15px;color:#1a1a1a}
.sr-ci-row-info span{font-size:12px;color:#888}
@media (max-width: 380px){.sr-ci-circle{width:34px;height:34px}.sr-ci-circle .material-symbols-rounded{font-size:16px}.sr-ci-line{width:10px}}
.sr-ci-row.is-progress .sr-ci-row-info span{color:var(--primary,#106050);font-weight:600}
.sr-ci-row-coins{display:flex;align-items:center;gap:4px;font-weight:700;font-size:14px;color:#1a1a1a;white-space:nowrap}
.sr-ci-row-coins .material-symbols-rounded{font-size:18px;color:#e8a50c}
.sr-ci-claimed{display:inline-flex;align-items:center;gap:4px;background:#e8f5ee;color:var(--primary,#106050);font-weight:700;font-size:13px;padding:8px 16px;border-radius:999px}
.sr-ci-claimed .material-symbols-rounded{font-size:16px}
.sr-ci-claim-disabled{background:#f0f0f0;color:#aaa;font-weight:600;font-size:13px;padding:8px 16px;border-radius:999px}

/* ---------- Challenge (2026-10-19, আতিক ভাই) ---------- */
.sr-ch-wrap{max-width:560px;margin:0 auto;padding:4px 0 80px}
.sr-ch-notice{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 50%,#a5d6a7 100%);border:1px solid #a5d6a7;border-radius:16px;padding:16px;margin-bottom:18px;box-shadow: 0 2px 12px rgba(16,96,80,.08);}
.sr-ch-notice .material-symbols-rounded{color:var(--primary);font-size:24px;flex:none;margin-top:2px}
.sr-ch-notice p{margin:0;font-size:13px;line-height:1.6;color:#1b5e20}
.sr-ch-summary{display:flex;gap:12px;margin-bottom:18px}
.sr-ch-sum-item{flex:1;background:linear-gradient(135deg,var(--primary,#106050),#1a7a5e);border-radius:16px;padding:16px;text-align:center;color:#fff}
.sr-ch-sum-num{display:block;font-size:24px;font-weight: 700}
.sr-ch-sum-label{font-size:12px;opacity:.9}
.sr-ch-sec{font-size:17px;font-weight: 700;margin:18px 0 12px;color:#1a1a1a}
.sr-ch-card{margin-bottom:12px}
.sr-ch-title{margin:0 0 10px;font-size:16px;font-weight:700}
.sr-ch-progress{height:10px;background:#f0f0f0;border-radius:999px;overflow:hidden;margin-bottom:10px}
.sr-ch-bar{height:100%;background:linear-gradient(90deg,var(--primary,#106050),#2a9d7a);border-radius:999px;transition:width .3s}
/* দিনের তথ্য — প্রোগ্রেস বারের নিচে (2026-10-19, আতিক ভাই) */
.sr-ch-daysrow{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted,#71827c);margin-top:8px}
.sr-ch-meta{display:flex;justify-content:space-between;font-size:13px;color:#555;margin-top:6px;flex-wrap:wrap;gap:4px}
/* সুন্দর চ্যালেঞ্জ কার্ড v2 (2026-10-19, আতিক ভাই) — সার্কুলার প্রগ্রেস + টাকার হিসাব। */
.sr-ch-card2{margin-bottom:14px;padding:18px;border-radius:16px;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.06)}
.sr-ch-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.sr-ch-info{flex:1;min-width:0}
.sr-ch-info .sr-ch-title{margin:0 0 6px;font-size:16px}
.sr-ch-reward{font-size:13px;font-weight:700;color:#b7791f}
.sr-ch-circle{position:relative;width:64px;height:64px;flex:none}
.sr-ch-circle svg{width:64px;height:64px}
.sr-ch-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight: 700;color:var(--primary)}
.sr-ch-amounts{display:flex;gap:8px;margin-bottom:12px}
.sr-ch-amt{flex:1;text-align:center;padding:10px 6px;border-radius:12px}
.sr-ch-amt.done{background:#e8f5e9}
.sr-ch-amt.remain{background:#fff3e0}
.sr-ch-amt.target{background:#e3f2fd}
.sr-ch-amt-label{display:block;font-size:11px;color:#666;margin-bottom:4px}
.sr-ch-amt-val{display:block;font-size:15px;font-weight: 700;color:#1a1a1a}
.sr-ch-amt.done .sr-ch-amt-val{color:#2e7d32}
.sr-ch-amt.remain .sr-ch-amt-val{color:#e65100}
/* Add Balance নোটিস — সফট গ্রেডিয়েন্ট (2026-10-19, আতিক ভাই) */
.sr-ab-notice{display:flex;gap:8px;align-items:flex-start;background:linear-gradient(135deg,#e8f5e9,#f1f8e9);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.sr-ab-notice .material-symbols-rounded{font-size:18px;color:#2e7d32;flex:none;margin-top:1px}
.sr-ab-notice p{margin:0;font-size:12px;color:#2e7d32;line-height:1.5}
/* চ্যালেঞ্জ ৪ ট্যাব (2026-10-19, আতিক ভাই) */
.sr-ch-tabs{display:flex;gap:8px;margin:0 0 16px;overflow-x:auto;padding-bottom:4px}
.sr-ch-tab{flex:1;min-width:0;text-align:center;padding:10px 8px;border-radius:12px;background:#f5f5f5;color:#666;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}
.sr-ch-tab:active{transform:scale(.97)}
#srChContent.sr-frag-in{animation:srFragIn var(--dur-fast) var(--ease) both}
.sr-ch-tab.is-active{background:linear-gradient(135deg,var(--primary),#1a8a6a);color:#fff}
.sr-ch-tab.is-loading{opacity:.65;cursor:wait}
/* উপলব্ধ চ্যালেঞ্জ প্রফেশনাল কার্ড (2026-10-19, আতিক ভাই) */
.sr-ch-avail{margin-bottom:14px;padding:18px;border-radius:16px;background:#ffffff;border:1px solid #e0f0e5;box-shadow:none;}
.sr-ch-avail-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}
.sr-ch-avail-head .sr-ch-title{margin:0 0 6px;font-size:16px}
.sr-ch-desc{margin:0;font-size:13px;color:#666;line-height:1.5}
.sr-ch-points{text-align:center;flex:none;background:#fff8e1;border-radius:12px;padding:10px 14px}
.sr-ch-pts-num{display:block;font-size:16px;font-weight: 700;color:#b7791f}
.sr-ch-pts-label{font-size:11px;color:#8d6e00}
.sr-ch-avail-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.sr-ch-meta-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#555}
.sr-ch-meta-item .material-symbols-rounded{font-size:18px;color:var(--primary)}
.sr-ch-pts-num .material-symbols-rounded{font-size:18px}
.sr-ch-reward .material-symbols-rounded{font-size:16px}
.sr-ch-svc .material-symbols-rounded{font-size:16px}
.sr-ch-amt-label .material-symbols-rounded{font-size:14px}
.sr-ch-daysrow .material-symbols-rounded{font-size:16px}
.sr-ch-meta .material-symbols-rounded{font-size:16px}
.sr-ch-take{border-radius:12px !important;font-weight:700}
/* সফল/ব্যর্থ কার্ড */
.sr-ch-done,.sr-ch-failed{display:flex;gap:14px;align-items:center;margin-bottom:12px;padding:16px}
.sr-ch-done{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}
.sr-ch-failed{background:linear-gradient(135deg,#fce4ec,#f3e5f5);opacity:.85}
.sr-ch-done-icon{font-size:32px;flex:none}
.sr-ch-done-info{flex:1;min-width:0}
.sr-ch-done-info .sr-ch-title{margin:0 0 8px;font-size:15px}
.sr-ch-days{font-size:13px;font-weight:700;color:#e65100;margin-top:6px}
.sr-ch-svc{font-size:12px;color:#666;margin-top:6px}
/* রেফার পেজ রিডিজাইন (2026-10-19, আতিক ভাই) */
.sr-ref-stats{display:flex;gap:12px;margin-bottom:16px}
.sr-ref-stat{flex:1;background:linear-gradient(135deg,var(--primary) 0%,#1a8a6a 100%);border-radius:16px;padding:20px 16px;text-align:center;color:#fff;box-shadow: 0 6px 20px rgba(16,96,80,.3);}
.sr-ref-stat-num{display:block;font-size:32px;font-weight: 700;line-height:1;margin-bottom:6px}
.sr-ref-stat-label{font-size:13px;opacity:.92}
.sr-ref-card{border:1px solid #e0f0e5;background:#fff}
.sr-ref-list{display:flex;flex-direction:column;gap:10px}
.sr-ref-item{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:0}
.sr-ref-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#e8f5e9,#c8e6c9);display:flex;align-items:center;justify-content:center;flex:none}
.sr-ref-avatar .material-symbols-rounded{color:var(--primary);font-size:24px}
.sr-ref-info{flex:1;min-width:0}
.sr-ref-info strong{display:block;font-size:15px;color:#1a1a1a;margin-bottom:2px}
.sr-ref-mobile{display:block;font-size:13px;color:#666;font-family:monospace}
.sr-ref-date{display:block;font-size:11px;color:#999;margin-top:2px}
.sr-ref-pts{text-align:center;flex:none}
.sr-ref-pts b{display:block;font-size:18px;color:#2e7d32}
.sr-ref-pts span{font-size:11px;color:#888}
.sr-ref-demo-tag{display:inline-block;font-size:10px;background:#fff3e0;color:#e65100;border-radius:8px;padding:2px 8px;margin-top:4px;font-weight:700}
/* Challenge FAB — ফ্ল্যাট ব্র্যান্ড #106050 (F-LA-75-1, P-LA-2; গ্রেডিয়েন্ট বাদ) */
.sr-ch-fab{position:fixed;bottom:84px;right:16px;z-index:60;display:flex;align-items:center;gap:8px;background:var(--primary);background-image:none;border:1px solid var(--primary);color:#fff;border-radius:999px;padding:13px 20px;font-weight:700;font-size:14px;box-shadow:0 4px 12px rgba(16,24,40,.18);cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,padding .2s}
.sr-ch-fab.is-livechat{background:var(--primary);background-image:none;border-color:var(--primary);color:#fff}
.sr-ch-fab:active{transform:scale(.96)}
/* F-LA-75-1: স্ক্রল-কলাপস — নিচে স্ক্রলে শুধু আইকন (পিল → বৃত্ত) */
.sr-ch-fab.is-collapsed{padding:13px}
.sr-ch-fab.is-collapsed span{display:none}
.sr-ch-fab .material-symbols-rounded{font-size:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.sr-ch-fab .material-symbols-rounded{font-size:22px}

/* ---------- ওয়েলকাম টিউটোরিয়াল লিংক (2026-10-19, আতিক ভাই — বর্ডার ছাড়া, ছোট) ---------- */
.sr-wel-tut-link{display:inline-flex;align-items:center;justify-content:center;width:100%;gap:6px;color:var(--primary,#106050);font-weight:600;font-size:14px;text-decoration:none;padding:8px 0}
.sr-wel-tut-link .material-symbols-rounded{font-size:20px}

/* ---------- ইনলাইন ভ্যালিডেশন (2026-10-19, আতিক ভাই) ---------- */
.sr-field-error{border-color:#e53935 !important;box-shadow:0 0 0 3px rgba(229,57,53,.12) !important}
.sr-field-msg{display:block;color:#e53935;font-size:12px;font-weight:600;margin-top:4px}
.sr-form-error-banner{background:#fdecea;border:1px solid #f5c6c2;color:#c62828;font-weight:700;font-size:14px;border-radius:12px;padding:12px 16px;margin-bottom:14px}

/* Reward page redesign (2026-10-19, আতিক ভাই) — soft gradient hero + live calc + pagination */
.rw-hero{background:linear-gradient(135deg,var(--primary) 0%,#1a7a64 45%,#2a9a7c 100%);border-radius:20px;padding:26px 20px;color:#fff;text-align:center;margin-bottom:16px;box-shadow: 0 8px 24px -8px rgba(16,96,80,.4);}
.rw-hero-label{font-size:14px;opacity:.85;margin-bottom:6px}
.rw-hero-amount{font-size:38px;font-weight: 700;line-height:1.1}
.rw-hero-sub{font-size:13px;opacity:.8;margin-top:8px}
.rw-live{display:flex;align-items:center;justify-content:space-between;background:#f0f9f6;border:1.5px dashed var(--primary);border-radius:12px;padding:12px 16px;margin:12px 0;font-size:15px;color:var(--primary)}
.rw-live b{font-size:20px}
.sr-pagination{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px;align-items:center}
.sr-page{min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--border-soft,#edf2f0);background:#fff;color:var(--text);font-weight:600;text-decoration:none;font-size:12.5px;padding:0 5px}
.sr-page.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.sr-page-ellipsis{color:#8a9996;font-size:13px;padding:0 2px}

/* ---------- ডিভাইস সেকশন (2026-10-19, আতিক ভাই) ---------- */
.sr-dev-head{margin:18px 0 10px}
.sr-dev-head .sr-hint{margin-top:4px}
.sr-dev-list .sr-list-row{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border-soft,#edf2f0)}
.sr-dev-list .sr-list-row:last-child{border-bottom:0}
.sr-dev-ic{width:44px;height:44px;border-radius:12px;background:var(--primary-mist,#eef6f3);color:var(--primary,#106050);display:grid;place-items:center;flex:none}
.sr-dev-ic .material-symbols-rounded{font-size:22px}
.sr-dev-ip{display:flex;align-items:center;gap:5px;min-width:0;font-family:var(--font-latin,monospace);font-size:12.5px}
.sr-dev-ip .material-symbols-rounded{font-size:15px;color:#8a978f}
.sr-dev-ip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sr-dev-list .sr-row-body{flex:1;min-width:0}

/* ---- লিমিট পেজ: প্রফেশনাল ব্যানার + লেভেল CTA (2026-10-19, আতিক ভাই) ---- */
.sr-limit-banner{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#eef7f4,#e2f0eb);border:1px solid #d4e8e0;border-radius:16px;padding:14px 16px;margin-bottom:12px}
.sr-limit-banner-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--primary);color:#fff}
.sr-limit-banner-ic svg{width:24px;height:24px}
.sr-limit-banner-tx b{font-size:15px;color:#0d3f34}
.sr-limit-banner-tx p{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--text-2)}
.sr-limit-upgrade{display:flex;align-items:center;gap:12px;background:var(--primary);color:#fff;border-radius:16px;padding:14px 16px;margin-bottom:14px;text-decoration:none;box-shadow: 0 8px 20px -8px rgba(16,96,80,.5);}
.sr-limit-upgrade-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.sr-limit-upgrade-ic svg{width:24px;height:24px}
.sr-limit-upgrade-tx{flex:1;min-width:0}
.sr-limit-upgrade-tx b{display:block;font-size:14.5px}
.sr-limit-upgrade-tx small{display:block;font-size:12px;opacity:.85;margin-top:2px}
.sr-limit-upgrade-arrow svg{width:22px;height:22px}
.sr-limit-maxnote{display:flex;align-items:center;gap:10px;background:#f0f9f4;border:1px dashed #9fd4b8;color:#0d6b3f;border-radius:16px;padding:12px 14px;margin-bottom:14px;font-size:13px;font-weight:500}
.sr-limit-maxnote-ic svg{width:22px;height:22px}

/* Daily check-in — professional full-width colorful design (2026-10-19, আতিক ভাই) */
.ci-wrap{max-width:100%}
.ci-hero{background:linear-gradient(135deg,#0d4f42 0%,var(--primary) 45%,#1a8a6a 100%);border-radius:20px;padding:32px 20px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow: 0 12px 32px rgba(16,96,80,.35);margin-bottom:16px}
.ci-hero-wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.07;font-size:180px;pointer-events:none}
.ci-hero-wm .material-symbols-rounded{font-size:180px}
.ci-hero-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15);margin-bottom:12px;position:relative}
.ci-hero-ic .material-symbols-rounded{font-size:32px;color:#ffd76a}
.ci-hero h2{font-size:20px;font-weight:700;margin:0 0 8px;position:relative}
.ci-hero p{font-size:14px;opacity:.9;margin:0 0 16px;position:relative}
.ci-hero-bar{height:10px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden;margin:0 0 10px;position:relative}
.ci-hero-fill{height:100%;background:linear-gradient(90deg,#ffd76a,#ffb300);border-radius:999px;transition:width .5s ease}
.ci-hero-row{display:flex;justify-content:space-between;font-size:13px;position:relative}
.ci-hero-pct{font-weight:700;color:#ffd76a}
.ci-today-card{display:flex;align-items:center;gap:14px;background:#fff;border-radius:20px;padding:18px;box-shadow:0 4px 16px rgba(0,0,0,.06);margin-bottom:16px;border:2px solid #e8f5f0}
.ci-today-card.is-done{border-color:var(--primary);background:#f0faf7}
.ci-today-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--primary),#1a8a6a);flex-shrink:0}
.ci-today-ic .material-symbols-rounded{font-size:28px;color:#fff}
.ci-today-tx{flex:1}
.ci-today-tx b{display:block;font-size:15px;color:#0e2a23}
.ci-today-tx span{font-size:12px;color:#6b7f78}
.ci-claim-big{padding:12px 24px;font-weight:700;white-space:nowrap}
.ci-sec{font-size:16px;font-weight:700;color:#0e2a23;margin:20px 0 12px}
.ci-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ci-day{border-radius:16px;padding:16px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;overflow:hidden;min-height:130px;justify-content:center}
.ci-day .material-symbols-rounded{font-size:26px}
.ci-day-num{font-size:13px;font-weight:700}
.ci-day-name{font-size:11px;opacity:.8}
.ci-day-coins{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700}
.ci-day-coins .material-symbols-rounded{font-size:16px;color:#b8860b}
.ci-g1{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);color:#1b5e20}
.ci-g2{background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#e65100}
.ci-g3{background:linear-gradient(135deg,#e3f2fd,#bbdefb);color:#0d47a1}
.ci-g4{background:linear-gradient(135deg,#f3e5f5,#e1bee7);color:#4a148c}
.ci-g5{background:linear-gradient(135deg,#e0f7fa,#b2ebf2);color:#006064}
.ci-g6{background:linear-gradient(135deg,#fce4ec,#f8bbd0);color:#880e4f}
.ci-g7{background:#fff8e1;color:#f57f17}
.ci-day.is-done{box-shadow:inset 0 0 0 2px var(--primary)}
.ci-day.is-today{box-shadow: 0 0 0 3px var(--primary),0 8px 20px rgba(16,96,80,.25);transform:scale(1.03)}
.ci-day.is-locked{opacity:.55;filter:grayscale(.3)}
/* Scratch card detail (2026-10-19) */
.sc-detail-hero{background:#fff;border-radius:20px;padding:28px 20px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.sc-detail-img{max-width:120px;max-height:120px;border-radius:16px;margin-bottom:12px}
.sc-detail-ic{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:20px;background:#e8f5f0;margin-bottom:12px}
.sc-detail-ic .material-symbols-rounded{font-size:40px;color:var(--primary)}
.sc-detail-op{display:inline-block;font-size:12px;color:var(--primary);background:#e8f5f0;padding:4px 12px;border-radius:999px;margin-bottom:8px;font-weight:600}
.sc-detail-title{font-size:20px;font-weight:700;color:#0e2a23;margin:0 0 8px}
.sc-detail-price{font-size:28px;font-weight: 700;color:var(--primary)}
.sc-detail-desc{color:#4a5a55;line-height:1.6;margin:0}
.sc-detail-big{font-size:18px;font-weight:700;color:var(--primary)}
.sc-detail-form{margin-top:16px}
.sc-op-all{border:2px dashed var(--primary) !important}
.drv-op-all{border:2px dashed var(--primary) !important}
/* Notification popup (2026-10-19) */
.nt-modal-backdrop[hidden]{display:none!important}
.nt-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.nt-modal{position:relative;background:#fff;border-radius:20px;max-width:420px;width:100%;max-height:85vh;overflow:auto;box-shadow:0 24px 64px rgba(0,0,0,.25)}
.nt-modal-x{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#0e2a23;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.nt-modal-x .material-symbols-rounded{font-size:20px}
.nt-modal-hero{border-radius:20px 20px 0 0;overflow:hidden;background:linear-gradient(135deg,var(--primary),#1a8a6a);min-height:120px;display:flex;align-items:center;justify-content:center;position:relative}
.nt-modal-hero img{width:100%;max-height:220px;object-fit:cover}
.nt-modal-hero .nt-modal-ic{font-size:48px;color:#fff;opacity:.9}
.nt-modal-body{padding:24px 20px}
.nt-modal-title{font-size:18px;font-weight:700;color:#0e2a23;margin:0 0 10px}
.nt-modal-text{font-size:14px;color:#4a5a55;line-height:1.7;margin:0 0 12px}
.nt-modal-time{font-size:12px;color:#8aa39b}
/* পুরনো বন্ধ-বাটন স্টাইল — আর ব্যবহৃত নয় (2026-10-19, আতিক ভাই: পপআপে বাটন নেই, শুধু ×)। */
.nt-target{margin-top:10px}
.nt-open-btn{font-weight:700;box-shadow:0 4px 14px rgba(16,96,80,.25)}
.nt-item{cursor:pointer;box-shadow: 0 8px 24px -12px rgba(16,42,36,.12);}
.nt-item-img{width:100%;border-radius:12px;margin-top:8px;max-height:160px;object-fit:cover}

/* ---- লেভেল: সর্বোচ্চ লেভেল ব্যানার (2026-10-19, আতিক ভাই) ---- */
.sr-maxlevel{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#0d3f34,var(--primary) 60%,#178a6c);border-radius:20px;padding:16px;margin-bottom:14px;color:#fff;box-shadow: 0 10px 24px -10px rgba(16,96,80,.55);overflow:hidden}
.sr-maxlevel-img{flex:none;width:88px;height:88px;border-radius:16px;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.sr-maxlevel-tx b{font-size:17px}
.sr-maxlevel-tx p{margin:4px 0 2px;font-size:13.5px;opacity:.95}
.sr-maxlevel-tx small{font-size:12px;opacity:.8}

/* রিওয়ার্ড ৩ ট্যাব — প্রিমিয়াম পিল স্টাইল, এডমিনের .thm-tab-এর মতো (2026-10-19, আতিক ভাই) */
.rw-tabs{display:flex;gap:8px;margin:4px 0 16px;flex-wrap:wrap}
.rw-tab{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:11px 14px;border-radius:999px;border:1.5px solid #e2ece9;background:#fff;color:var(--text-2);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);white-space:nowrap}
.rw-tab:hover{border-color:var(--primary);color:var(--primary)}
.rw-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow: 0 6px 16px -6px rgba(16,96,80,.5);}
/* চেক-ইন মাইলস্টোন কার্ড — স্ট্যান্ডার্ড কমপ্যাক্ট সাইজ (2026-10-19, আতিক ভাই) */
.ci-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ci-day{border-radius:12px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;overflow:hidden;min-height:96px;justify-content:center}
.ci-day .material-symbols-rounded{font-size:22px}
.ci-day-num{font-size:12px;font-weight:700}
.ci-day-name{font-size:10px;opacity:.8}
.ci-day-coins{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:700}
.ci-day-coins .material-symbols-rounded{font-size:14px;color:#b8860b}
.ci-day.is-done{box-shadow:inset 0 0 0 2px var(--primary)}
.ci-day.is-done .ci-day-icon{position:relative}
.ci-day.is-done .ci-day-icon::after{content:'✓';position:absolute;right:-6px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight: 700;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow: 0 2px 6px rgba(16,96,80,.4);}

/* Add Balance success — hero + receipt (2026-10-19, আতিক ভাই) */
.ab-success{max-width:520px;margin:0 auto}
.ab-success-hero{background:linear-gradient(135deg,var(--primary-deep,#08382e) 0%,var(--primary,#106050) 60%,#178a6b 100%);border-radius:20px;padding:30px 20px 26px;text-align:center;color:#fff;box-shadow: 0 10px 28px rgba(16,96,80,.28);margin-bottom:14px;position:relative;overflow:hidden}
.ab-success-check .material-symbols-rounded{font-size:48px;color:#fff;opacity:.95}
.ab-success-title{margin:8px 0 2px;font-size:19px;font-weight:700}
.ab-success-amt{font-size:34px;font-weight: 700;letter-spacing:.5px;margin-top:6px;font-variant-numeric:tabular-nums}
.ab-success-sub{font-size:13px;opacity:.85;margin-top:2px}
.sr-receipt .sr-detail-row.is-net{background:var(--primary-soft,#e7f2ee);border-radius:8px;padding:8px 10px;margin:4px -4px}
.sr-receipt .sr-detail-row.is-net .k{color:var(--primary-dark,#0b463a);font-weight:700}
.sr-mono{font-variant-numeric:tabular-nums;letter-spacing:.3px}

/* ================= হিস্টরি রিডিজাইন v2 (2026-10-19, আতিক ভাই) ================= */
/* সার্চ বার + ফিল্টার বাটন */
.sr-hist2-searchrow{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.sr-hist2-searchrow .sr-search{margin-bottom:0;flex:1;min-width:0}
.sr-hist2-searchform{flex:1;min-width:0}
.sr-hist2-filterbtn{flex:none;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--border);background:#fff;color:var(--text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}
.sr-hist2-filterbtn:active{transform:scale(.94)}
.sr-hist2-filterbtn.is-active{border-color:var(--primary);color:var(--primary);background:#e8f3ef}
.sr-hist2-filterbtn .material-symbols-rounded{font-size:22px}
.sr-hist2-fdot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--primary)}
/* সাদা ট্যাব (2026-10-20 v61 — সিলেক্টেডটা ব্র্যান্ড #106050 + সাদা টেক্সট) */
.sr-hist2-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sr-hist2-tabs::-webkit-scrollbar{display:none}
/* v167 (আতিক ভাই): ট্যাব স্ট্যান্ডার্ড/প্রফেশনাল সাইজে — আগের চেয়ে ছোট প্যাডিং ও ফন্ট। */
.sr-hist2-tab{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:#fff;color:#2c3e39;font-weight:700;font-size:12.5px;text-decoration:none;white-space:nowrap;border:1.5px solid #e2ece9;transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);scroll-snap-align:start}
.sr-hist2-tab:active{transform:scale(.96)}
.sr-hist2-tab.is-active{background:var(--primary)!important;color:#fff;border-color:var(--primary);box-shadow: 0 6px 16px -6px rgba(16,96,80,.5);}
.sr-hist2-tab.is-loading{opacity:.65;cursor:wait}
#srHistContent.sr-frag-in{animation:srFragIn var(--dur-fast) var(--ease) both}
#srStatsContent.sr-frag-in{animation:srFragIn var(--dur-fast) var(--ease) both}
/* কার্ড */
.sr-hist2-list{display:flex;flex-direction:column;gap:12px}
.sr-hist2-card{display:flex;align-items:center;gap:10px;width:100%;background:#fff;border:1px solid var(--border-soft);border-radius:16px;padding:14px 12px;box-shadow:0 2px 8px rgba(15, 23, 20, .05);cursor:pointer;text-align:left;font-family:inherit;transition:transform .12s ease,box-shadow .15s ease}
.sr-hist2-card:active{transform:scale(.985)}
@media (hover:hover){.sr-hist2-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15, 23, 20, .09)}}
.sr-hist2-ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.sr-hist2-ic .material-symbols-rounded{font-size:24px;color:var(--primary)}
.sr-hist2-opwrap{flex:none;margin-left:-22px;margin-top:22px}
.sr-hist2-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-hist2-info b{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-hist2-sub{font-size:12px;color:#6b7d77;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-hist2-right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sr-hist2-amt{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
/* খালি অবস্থা */
.sr-hist2-empty{text-align:center;padding:48px 20px;color:#6b7d77}
.sr-hist2-empty-ic{width:64px;height:64px;border-radius:50%;background:#eef4f2;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.sr-hist2-empty-ic .material-symbols-rounded{font-size:32px;color:var(--primary)}
/* ফিল্টার শিট */
.sr-hist2-filterform{padding:4px 2px}
.sr-hist2-fopts{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.sr-hist2-fopt{cursor:pointer}
.sr-hist2-fopt input{position:absolute;opacity:0;pointer-events:none}
.sr-hist2-fopt span{display:inline-block;padding:9px 16px;border-radius:999px;border:1.5px solid var(--border);background:#fff;font-size:13px;font-weight:600;color:var(--text-2);transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)}
.sr-hist2-fopt input:checked+span{background:var(--primary);border-color:var(--primary);color:#fff}
.sr-hist2-fbtns{display:flex;gap:10px;margin-top:8px}
.sr-hist2-fbtns .sr-btn{flex:1}
/* বটম-শিট নোটিশ বক্স */
.sr-hist2-notice{background:#FFFAEB;border:1px solid #FEDF89;border-radius:12px;padding:12px 14px;margin-top:12px}
.sr-hist2-notice b{font-size:12px;color:#B54708}
.sr-hist2-notice p{margin:4px 0 0;font-size:13px;color:#6B3D08}
/* সফট টিন্ট (কার্ড আইকন ব্যাকগ্রাউন্ড) — একটাই ব্র্যান্ড-টিন্ট (2026-11-11 ফোন-চেক D-3.1; উপরের সাইটের মতোই)। */
.tint-soft-green{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-blue{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-amber{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-purple{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-teal{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-slate{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-orange{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-rose{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}

/* ============ ড্যাশবোর্ড রিডিজাইন (2026-10-19, আতিক ভাই) ============ */
/* ট্যাব এক লাইনে — wrap নয়, হরাইজন্টাল স্ক্রল */
.sr-dash-tabs { flex-wrap: nowrap; overflow-x: auto; }
.sr-dash-tabs .sr-chip { flex: 0 0 auto; }
/* বড় টোটাল কার্ড */
.sr-dash-total { position: relative; overflow: hidden; border-radius:20px; padding: 24px 20px;
  background: linear-gradient(135deg, #0d4a3c 0%, var(--primary) 55%, #17806a 100%);
  color: #fff; margin: 2px 0 16px; box-shadow: 0 10px 28px rgba(16,96,80,.25); }
.sr-dash-total-label { font-size: 13px; opacity: .85; font-family: inherit; }
.sr-dash-total-amt { font-size: 36px; font-weight: 700; margin: 8px 0 12px; letter-spacing: -.5px;
  font-family: "Hind Siliguri","Noto Sans Bengali","Inter",system-ui,sans-serif; font-variant-numeric: tabular-nums; }
.sr-dash-total-sub { display: flex; gap: 8px; flex-wrap: wrap; }
.sr-dash-total-pill { font-size: 12px; font-weight: 700; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22); padding: 5px 12px; border-radius:999px; font-family: inherit; }
.sr-dash-total-pill-soft { background: rgba(255,255,255,.08); }
.sr-dash-total-ic { position: absolute; right: 14px; top: 14px; opacity: .25; }
.sr-dash-total-ic .material-symbols-rounded { font-size: 48px; }
/* ডোনাট চার্ট */
.sr-dash-donut { background: #fff; border-radius:20px; padding: 18px; margin: 0 0 16px;
  box-shadow: 0 4px 18px rgba(16,96,80,.08); }
.sr-dash-donut-head { font-size: 15px; font-weight: 700; color: var(--text,#15211d); margin-bottom: 12px; font-family: inherit; letter-spacing:-.2px; }
.sr-dash-donut-flex { display: flex; align-items: center; gap: 16px; }
.sr-donut-svg { width: 132px; height: 132px; flex: 0 0 auto; }
.sr-donut-total-lb { font-size: 11px; fill: var(--muted); font-family: inherit; }
.sr-donut-total-v { font-size: 15px; font-weight: 700; fill: var(--text);
  font-family: "Hind Siliguri","Noto Sans Bengali","Inter",system-ui,sans-serif; }
.sr-donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sr-donut-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-family: inherit; }
.sr-donut-dot { width: 10px; height: 10px; border-radius:50%; flex: 0 0 auto; }
.sr-donut-name { flex: 1; color: var(--text,#15211d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-donut-pct { font-weight: 700; color: var(--muted,#71827c); font-variant-numeric: tabular-nums; }
/* সার্ভিস ব্রেকডাউন কার্ড */
.sr-dash-svc-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.sr-dash-svc { display: flex; align-items: center; gap: 12px; background: #fff; border-radius:16px;
  padding: 14px; box-shadow: 0 3px 14px rgba(16,96,80,.07); border: 1px solid #f0f5f3; }
.sr-dash-svc-ic { width: 44px; height: 44px; border-radius:12px; display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; }
.sr-dash-svc-ic .material-symbols-rounded { font-size: 24px; }
.sr-dash-svc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-dash-svc-tx b { font-size: 14px; color: var(--text,#15211d); font-family: inherit; }
.sr-dash-svc-tx span { font-size: 12px; color: var(--muted,#71827c); font-family: inherit; }
.sr-dash-svc-meta { font-size: 15px; font-weight: 700; color: var(--text,#15211d); white-space: nowrap;
  font-family: "Hind Siliguri","Noto Sans Bengali","Inter",system-ui,sans-serif; font-variant-numeric: tabular-nums; }
.sr-dash-empty { text-align: center; color: var(--muted,#71827c); padding: 28px 16px; font-size: 13.5px;
  background: #fff; border-radius:16px; font-family: inherit; }
/* মিনিমাল টিপস */
.sr-dash-tip { display: flex; align-items: center; gap: 10px; background: #fff; border-radius:16px;
  padding: 10px 12px; text-decoration: none; box-shadow: 0 3px 14px rgba(16,96,80,.07);
  border: 1px solid #eef4f2; }
.sr-dash-tip-ic { width: 36px; height: 36px; border-radius:12px; display: flex; align-items: center;
  justify-content: center; background: #fef6e0; color: #b7791f; flex: 0 0 auto; }
.sr-dash-tip-ic .material-symbols-rounded { font-size: 20px; }
.sr-dash-tip-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sr-dash-tip-tx b { font-size: 13px; color: var(--text,#15211d); font-family: inherit; }
.sr-dash-tip-tx span { font-size: 11.5px; color: var(--muted,#71827c); font-family: inherit; }
.sr-dash-tip-arr { color: var(--muted,#71827c); }
.sr-text-green{color:var(--primary);font-weight:600;}

/* ============ হিস্ট্রি ডিটেইল পেজ + ডেমো হিন্ট (2026-10-19, আতিক ভাই) ============ */
.sr-hist2-demohint{font-size:12px;color:#8a6d1a;background:#fff8e6;border:1px solid #f0e0b0;border-radius:8px;padding:8px 12px;margin:0 0 10px;font-family:inherit}
.sr-hist2-card{text-decoration:none;color:inherit box-shadow: 0 2px 8px rgba(16,40,32,.05);}
.sr-histd-hero{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:18px 16px;margin-bottom:12px;box-shadow: 0 3px 14px rgba(16,96,80,.07);border:1px solid #eef4f2}
.sr-histd-hero.st-success{background:linear-gradient(135deg,#e9f6f1,#ffffff 60%);border-color:#cfe8de}
.sr-histd-hero.st-failed{background:linear-gradient(135deg,#fdeeee,#ffffff 60%);border-color:#f3d2d2}
.sr-histd-hero.st-processing{background:linear-gradient(135deg,#fdf6e0,#ffffff 60%);border-color:#f0e0b0}
.sr-histd-hero-ic{flex:none;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.sr-histd-hero-ic .material-symbols-rounded{font-size:30px;color:var(--primary)}
.sr-histd-opwrap{flex:none;margin-left:-30px;margin-top:30px}
.sr-histd-hero-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sr-histd-hero-tx b{font-size:16px;color:var(--text);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-histd-hero-tx span{font-size:12.5px;color:var(--muted);font-family:inherit}
.sr-histd-hero-amt{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.sr-histd-hero-amt b{font-size:19px;font-variant-numeric:tabular-nums;font-family:"Hind Siliguri","Noto Sans Bengali","Inter",system-ui,sans-serif}
.sr-histd-card{background:#fff;border-radius:16px;padding:6px 16px;margin-bottom:12px;border:1px solid #eef4f2;box-shadow: 0 3px 14px rgba(16,96,80,.06);}
.sr-histd-card .sr-detail-row{padding:11px 0;border-bottom:1px solid #f0f5f3}
.sr-histd-card .sr-detail-row:last-child{border-bottom:0}
/* (2026-10-29 direct-cut): ডিটেইল পেজের টাকার হিসাব — বক্সড সেকশন মাত্র। */
.sr-histd-trail{margin:12px 0;background:#f7faf8;border:1px solid #E5E7EB;border-radius:12px;padding:6px 12px}
.sr-histd-trail-title{font-size:12px;font-weight:700;color:var(--primary);letter-spacing:.3px;padding:6px 0 4px}
.sr-histd-trail .sr-detail-row{padding:6px 0;border-bottom:1px solid #e9efec}
.sr-histd-trail .sr-detail-row:last-child{border-bottom:0}
.sr-histd-trail .sr-detail-row .v small{font-weight:500;color:var(--muted)}

/* ============ ড্যাশবোর্ড পলিশ (2026-10-19, আতিক ভাই) ============ */
.sr-donut-amt{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;font-size:12.5px;font-family:inherit;white-space:nowrap}
.sr-dash-svc{flex-direction:column;align-items:stretch;gap:10px box-shadow: 0 3px 14px rgba(16,96,80,.07);}
.sr-dash-svc-row{display:flex;align-items:center;gap:12px;width:100%}

@media (max-width: 380px){.sr-dash-donut-flex{flex-direction:column;align-items:stretch}.sr-donut-svg{margin:0 auto}}

/* ============ প্রোফাইল রিডিজাইন (2026-10-19, আতিক ভাই — প্রফেশনাল) ============ */
.prof-hero{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--primary),#1a7a63);border-radius:20px;padding:20px 16px;margin-bottom:12px;color:#fff;box-shadow: 0 4px 18px rgba(16,96,80,.25);}
.prof-avatar-wrap{position:relative;flex:none}
.prof-avatar{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid rgba(255,255,255,.5);font-size:24px;font-weight:700;color:#fff;font-family:inherit}
.prof-avatar img{width:100%;height:100%;object-fit:cover}
.prof-cam{position:absolute;right:-2px;bottom:-2px;margin:0}
.prof-cam-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--primary);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.prof-cam-btn .material-symbols-rounded{font-size:16px}
.prof-id{flex:1;min-width:0}
.prof-name{font-size:19px;font-weight:700;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-mobile{font-size:13px;opacity:.85;font-family:inherit;margin:2px 0 6px}
.prof-edit-btn{flex:none;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:8px 14px;font-size:13px;font-weight:600;text-decoration:none;font-family:inherit}
.prof-edit-btn .material-symbols-rounded{font-size:17px}
.prof-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.prof-stat{background:#fff;border:1px solid #eef4f2;border-radius:16px;padding:14px;text-align:center;box-shadow: 0 3px 14px rgba(16,96,80,.06);}
.prof-stat b{display:block;font-size:18px;color:var(--primary);font-family:inherit;font-variant-numeric:tabular-nums}
.prof-stat span{font-size:12px;color:var(--muted);font-family:inherit}
.prof-menu{background:#fff;border:1px solid #eef4f2;border-radius:16px;margin-bottom:12px;overflow:hidden;box-shadow: 0 3px 14px rgba(16,96,80,.06);}
.prof-menu-item{display:flex;align-items:center;gap:12px;padding:13px 16px;text-decoration:none;color:var(--text);border-bottom:1px solid #f1f5f4;font-family:inherit}
.prof-menu-item:last-child{border-bottom:none}
.prof-menu-ic{flex:none;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.prof-menu-ic .material-symbols-rounded{font-size:20px}
.prof-menu-label{flex:1;font-size:14.5px;font-weight:600}
.prof-menu-val{font-size:13px;color:var(--muted);font-family:inherit}
.prof-menu-lang{margin-left:8px}
.prof-menu-chev{color:#b9c6c1;font-size:20px}
.prof-sec-head{margin:16px 4px 8px}
.prof-logout{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #fde7e7;border-radius:16px;padding:14px 16px;margin-top:12px;color:#d93b3b;font-weight:600;font-size:14.5px;text-decoration:none;font-family:inherit;box-shadow:0 3px 14px rgba(217,59,59,.06)}
/* ---- আমার কমিশন ---- */
.prof-comm-hero{background:linear-gradient(135deg,var(--primary),#1a7a63);border-radius:20px;padding:22px 16px;margin-bottom:12px;color:#fff;text-align:center;box-shadow: 0 4px 18px rgba(16,96,80,.25);}
.prof-comm-level{font-size:20px;font-weight:700;font-family:inherit}
.prof-comm-sub{font-size:13px;opacity:.85;margin-top:4px;font-family:inherit}
.prof-comm-card{background:#fff;border:1px solid #eef4f2;border-radius:16px;margin-bottom:12px;overflow:hidden;box-shadow: 0 3px 14px rgba(16,96,80,.06);}
.prof-comm-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #f1f5f4}
.prof-comm-head b{font-size:15px;font-family:inherit}
.prof-comm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid #f6f9f8}
.prof-comm-row:last-child{border-bottom:none}
.prof-comm-op{font-size:13.5px;color:#3c4a46;font-family:inherit}
.prof-comm-val{font-size:14px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;font-family:inherit}
.prof-upgrade{display:flex;align-items:center;gap:12px;background:#fff8e6;border:1px solid #f0e0b0;border-radius:16px;padding:14px 16px;margin-top:4px;text-decoration:none;color:var(--text);box-shadow:0 3px 14px rgba(240,224,176,.25)}
.prof-upgrade-tx{flex:1;display:flex;flex-direction:column;gap:2px}
.prof-upgrade-tx b{font-size:14.5px;font-family:inherit}
.prof-upgrade-tx small{font-size:12.5px;color:#8a6d1a;font-family:inherit}
.tint-gray{background:#f1f4f3;color:#6b7a75}
.u-hide{display:none!important}
/* প্রোফাইল আপগ্রেড কার্ড (2026-10-19, আতিক ভাই — টাস্ক ৭) */
.prof-upgrade-card{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:14px 16px;margin:0 0 12px;text-decoration:none;color:inherit;box-shadow: 0 2px 12px rgba(16,96,80,.08);border:1px solid rgba(16,96,80,.08)}
.prof-upgrade-ic{width:48px;height:48px;border-radius:12px;background:#fef6e0;display:flex;align-items:center;justify-content:center;color:#b8860b;flex-shrink:0}
.prof-upgrade-ic .material-symbols-rounded{font-size:26px}
.prof-upgrade-tx{flex:1;display:flex;flex-direction:column;gap:2px}
.prof-upgrade-tx b{font-size:15px;font-weight:700;color:#1a2e28}
.prof-upgrade-tx span{font-size:12.5px;color:#6b7a75}
.prof-upgrade-badge{background:#fef6e0;color:#8a6d1a;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
.prof-upgrade-chev{color:#9db3ad;font-size:20px}
/* লেভেল আইকন (2026-10-19, আতিক ভাই — টাস্ক ৮) */
.sr-lvl-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(16,96,80,.1);color:var(--primary);vertical-align:middle;margin-right:6px}
.sr-lvl-ic .material-symbols-rounded{font-size:18px}
/* ---- লেভেল কার্ড + বেনিফিট ডিসপ্লে (2026-10-19, আতিক ভাই — টাস্ক ১০; 2026-10-20 v61 টাস্ক ৪ — পলিশ) ---- */
.sr-lvl-card{display:block;background:#fff;border:1px solid #edf2f1;border-radius:20px;padding:16px;margin-bottom:12px;text-decoration:none;color:inherit;box-shadow: 0 3px 14px rgba(16,96,80,.06);}
.sr-lvl-card:active{transform:scale(.985)}
.sr-lvl-card.is-current{border:2px solid var(--primary);background:#f2faf8;box-shadow:none;}
.sr-lvl-head{display:flex;gap:12px;align-items:center}
.sr-lvl-ic-big{flex:none;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#14806a,#0a4a3e);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow: 0 4px 12px rgba(16,96,80,.30);}
.sr-lvl-ic-big .material-symbols-rounded{font-size:29px}
.sr-lvl-tx{min-width:0}
.sr-lvl-name{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.01em;line-height:1.4}
.sr-lvl-cur{display:inline-block;margin-left:6px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;vertical-align:2px}
.sr-lvl-desc{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.5}
.sr-lvl-benefits{list-style:none;margin:12px 0 2px;padding:0}
.sr-lvl-benefits li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px dashed #e9f0ee;font-size:13.5px;color:#3c4a46;line-height:1.5}
.sr-lvl-benefits li:first-child{border-top:none}
.sr-lvl-benefits .ben-ic{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(16,96,80,.12);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.sr-lvl-benefits .ben-ic svg{width:12px;height:12px}
.sr-lvl-benefits b{color:var(--text);font-weight:600}
.sr-lvl-benefits small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.sr-lvl-foot{margin-top:10px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f1f5f4;padding-top:12px}

/* টিউটোরিয়াল মোডাল — টাইটেল + নেটিভ আসপেক্ট (2026-10-20 v63, টাস্ক ৮) */
.sr-video-modal-title { color: #fff; font-weight: 700; font-size: 15.5px; line-height: 1.45;
  padding: 16px 48px 10px 18px; text-align: left; }
.sr-video-modal-title:empty { display: none; }
.sr-video-modal-frame.is-vertical { aspect-ratio: 9 / 16; max-width: 320px; margin: 0 auto; }
.sr-video-modal-box:has(.sr-video-modal-frame.is-vertical) { max-width: 380px; }

/* রিচার্জ পেজ রিডিজাইন — নম্বর→অপারেটর→ট্যাব ক্রম (2026-10-20, v63 — টাস্ক ৭) */
.rc-numop-card{margin-bottom:12px}
.rc-numop-card .sr-field{margin-bottom:10px}
.rc-op-select-row .sr-op-row-pick,.rc-op-select-row .rc-op-row-pick{display:inline-flex;align-items:center;gap:8px}
#opSelectLogo,.rc-op-row-pick .sr-op-logo{display:inline-flex;align-items:center}
#opSelectLogo .sr-op-logo,.rc-op-row-pick .sr-op-logo{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
#opSelectLogo .sr-op-mark{background:var(--primary);color:#fff;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight: 700;font-size:14px;flex:none}
.rc-tabs{margin:0 0 12px}
.rc-ofilter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 12px}
.rc-ofilter-pills{display:flex;flex-wrap:wrap;gap:6px}
.rc-opill{border:1px solid #d7e3df;background:#fff;color:#41534d;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer}
.rc-opill.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.rc-osort{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#41534d}
.rc-osort-sel{border:1px solid #d7e3df;border-radius:8px;padding:6px 8px;font-size:13px;background:#fff;color:var(--text)}

/* v64 — টিউটোরিয়াল পেজ কার্ড (2026-10-20, আতিক ভাই) */
.sr-tabs-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.sr-tabs-row::-webkit-scrollbar { display: none; }
.sr-tab-pill { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 16px; border-radius:999px; border: 1px solid #d9e2e0;
  background: #fff; color: #333; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sr-tab-pill.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.sr-tut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .sr-tut-grid { grid-template-columns: 1fr; } }
.sr-tut-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e4ecea;
  border-radius:12px; overflow: hidden; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
  box-shadow: 0 2px 10px rgba(16, 96, 80, .06); }
.sr-tut-thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0d4f42, var(--primary));
  display: flex; align-items: center; justify-content: center; }
.sr-tut-card[data-sr-format="vertical"] .sr-tut-thumb { aspect-ratio: 9 / 16; }
.sr-tut-play { width: 52px; height: 52px; border-radius:50%; background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center; color: var(--primary); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.sr-tut-play svg { width: 24px; height: 24px; }
.sr-tut-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.65); color: #fff;
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius:999px; }
.sr-tut-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.sr-tut-title { font-size: 13.5px; font-weight: 700; color: #1a1a1a; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-tut-cat { font-size: 11px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .3px; }

/* v64 — হেল্পলাইন চ্যাট (2026-10-20, আতিক ভাই) */
.sr-segment { display: flex; background: #eef3f2; border-radius:999px; padding: 4px; gap: 4px; }
.sr-seg-item { flex: 1; text-align: center; padding: 10px; border-radius:999px; font-size: 14px; font-weight: 700;
  color: #4a5a57; text-decoration: none; }
.sr-seg-item.is-active { background: #fff; color: var(--primary); box-shadow: 0 2px 8px rgba(16,96,80,.12); }
.sr-chat-area { background: #f6f9f8; border: 1px solid #e4ecea; border-radius:16px; padding: 14px 10px;
  height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.sr-chat-empty { margin: auto; text-align: center; color: #6b7a77; font-size: 13.5px; line-height: 1.7; max-width: 280px; }
.sr-msg { max-width: 82%; display: flex; flex-direction: column; gap: 3px; }
.sr-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.sr-msg.is-other { align-self: flex-start; align-items: flex-start; }
.sr-msg-meta { font-size: 10.5px; color: #8a9996; font-weight: 600; }
.sr-msg-body { padding: 10px 14px; border-radius:16px; font-size: 14px; line-height: 1.65; word-break: break-word; }
.sr-msg.is-mine .sr-msg-body { background: var(--primary); color: #fff; border-bottom-right-radius:4px; }
.sr-msg.is-other .sr-msg-body { background: #fff; color: #222; border: 1px solid #e4ecea; border-bottom-left-radius:4px; }
.sr-chat-form { display: flex; gap: 8px; margin-top: 10px; }
.sr-chat-input { flex: 1; }
.sr-chat-send { flex: 0 0 auto; }
.sr-list-row-link { display: flex; align-items: center; text-decoration: none; color: inherit; padding: 12px 14px;
  border-bottom: 1px solid #eef2f1; }
.sr-list-chev { color: #b7c4c1; font-size: 20px; margin-left: 8px; }

/* যোগাযোগ ট্যাব (v65) */
.sr-contact-list { display: flex; flex-direction: column; gap: 10px; }
.sr-contact-btn { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius:16px; padding: 12px 14px; text-decoration: none; color: var(--text); box-shadow: 0 2px 8px -6px rgba(16,42,36,.15); }
.sr-contact-btn:active { transform: scale(.99); }
.sr-contact-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius:50%; color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto; }
.sr-contact-label { flex: 1; font-weight: 600; font-size: 15px; }
.sr-contact-arrow { color: #9db3ad; font-size: 22px; line-height: 1; }

/* Add Balance success v2 — প্রিমিয়াম রসিদ (2026-10-20 v67, আতিক ভাই) */
.ab2{max-width:520px;margin:0 auto}
.ab2-hero{background:linear-gradient(140deg,var(--primary-deep) 0%,var(--primary,#106050) 55%,#1a9c77 100%);border-radius:20px;padding:34px 20px 28px;text-align:center;color:#fff;box-shadow: 0 14px 34px rgba(16,96,80,.30);margin-bottom:14px;position:relative;overflow:hidden}
.ab2-check{display:inline-flex;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.16);border:2.5px solid rgba(255,255,255,.85);align-items:center;justify-content:center;position:relative;z-index:1;animation:ab2pop .45s ease}
.ab2-check .material-symbols-rounded{font-size:40px;font-weight:700;color:#fff}
@keyframes ab2pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.ab2-title{margin:14px 0 0;font-size:20px;font-weight:700;position:relative;z-index:1}
.ab2-amt{font-size:38px;font-weight: 700;letter-spacing:.5px;margin-top:8px;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.ab2-sub{font-size:13.5px;opacity:.88;margin-top:2px;position:relative;z-index:1}
.ab2-pill{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);font-size:13px;font-weight:600;position:relative;z-index:1}
.ab2-pill .material-symbols-rounded{font-size:17px}
.ab2-card{background:#fff;border:1px solid #e8efec;border-radius:20px;padding:18px 18px 14px;box-shadow:0 4px 18px rgba(15, 23, 20, .06);margin-bottom:14px}
.ab2-card-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#173a31;padding-bottom:12px;border-bottom:1px solid #eef3f1;margin-bottom:6px}
.ab2-card-head .material-symbols-rounded{color:var(--primary,#106050);font-size:21px}
.ab2-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 2px}
.ab2-rk{display:inline-flex;align-items:center;gap:9px;color:#5a6f68;font-size:14px}
.ab2-rk .material-symbols-rounded{font-size:19px;color:#9db8b0}
.ab2-rv{font-weight:600;font-size:14.5px;color:#1d2f2a;font-variant-numeric:tabular-nums;text-align:right}
.ab2-row.is-net{background:var(--primary-soft,#e7f2ee);border-radius:12px;padding:11px 10px;margin:4px -6px}
.ab2-row.is-net .ab2-rk{color:var(--primary-dark);font-weight:700}
.ab2-row.is-net .ab2-rk .material-symbols-rounded{color:var(--primary,#106050)}
.ab2-row.is-net .ab2-rv{color:var(--primary,#106050);font-weight: 700;font-size:16px}
.ab2-row.is-bal .ab2-rv{font-weight: 700}
.ab2-row.is-debit .ab2-rv{color:#c0392b}
.ab2-row.is-credit .ab2-rv{color:#12805c}
.ab2-divider{border-top:1.5px dashed #dfe9e5;margin:6px 0}
.ab2-ref{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 2px 2px;color:#7b8f88;font-size:13px}
.ab2-ref b{color:var(--text-2);font-size:12.5px;word-break:break-all;text-align:right}
.ab2-home{border-radius:12px}

/* OTP টেস্ট-মোড ব্যানার (2026-10-20 v68) — শুধু dev ডিসপ্লে চালু থাকলে */
.sr-otp-dev{display:flex;align-items:center;gap:9px;background:#fff8e1;border:1.5px dashed #e6a817;border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:14px;color:#6d4c00}
.sr-otp-dev .material-symbols-rounded{color:#e6a817;font-size:21px}
.sr-otp-dev b{font-size:19px;letter-spacing:3px;color:#173a31;margin-left:auto;font-variant-numeric:tabular-nums}

/* ---- v71: রেজিস্ট্রেশন লেভেল সিলেকশন (কার্ড + প্যানেল) ---- */
.sr-level-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.sr-level-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;background:#fff;border:1.5px solid #e3ebe8;border-radius:12px;padding:12px 13px;cursor:pointer;font:inherit}
.sr-level-card.is-active{border-color:var(--primary,#106050);background:#eef7f4;box-shadow: 0 2px 10px rgba(16,96,80,.12);}
.sr-level-card-name{font-weight:700;font-size:15px;color:#173a31}
.sr-level-card-fee{font-size:13px;font-weight:600;color:var(--primary,#106050)}
.sr-level-card-benefits{list-style:none;margin:4px 0 0;padding:0}
.sr-level-card-benefits li{display:flex;align-items:center;gap:5px;font-size:12px;color:#4c5f59}
.sr-level-card-benefits .material-symbols-rounded{font-size:15px;color:var(--primary,#106050)}
.sr-level-panel{background:#f4faf8;border:1px solid #dcebe5;border-radius:12px;padding:13px 14px;margin:0 0 14px box-shadow: 0 12px 28px -14px rgba(11,46,38,.2);}
.sr-level-fee{font-size:16px;font-weight:700;color:#173a31;margin-bottom:8px}
.sr-level-benefits-title{font-size:13px;font-weight:700;color:#33524a;margin-bottom:6px}
.sr-level-benefits{list-style:none;margin:0;padding:0}
.sr-level-benefits li{display:flex;align-items:center;gap:6px;font-size:13.5px;color:#33524a;padding:3px 0 box-shadow: 0 3px 9px -6px rgba(11,46,38,.14);}
.sr-level-benefits .material-symbols-rounded{font-size:17px;color:var(--primary,#106050)}
.sr-ok-ic{display:flex;justify-content:center;margin-bottom:10px}
.sr-ok-ic .material-symbols-rounded{font-size:48px;color:var(--primary,#106050)}

/* ===== v72: level compare matrix + vs panels (2026-10-20) ===== */
.sr-cmp th a{color:inherit;text-decoration:none}
.sr-cmp .cmp-cur{background:rgba(16,96,80,.07)}
.sr-cmp th.cmp-cur{color:var(--primary)}
.sr-cmp th .sr-lvl-cur{margin-left:6px}
.sr-cmp .cmp-cell{text-align:center;font-size:15px}
.sr-cmp .cmp-yes{color:var(--primary)}
.sr-cmp .cmp-yes .sr-ic{font-size:17px;vertical-align:-3px}
.sr-cmp .cmp-no{color:#c3cbd1}
.sr-vs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 560px){.sr-vs{grid-template-columns:1fr}}
.sr-vs-panel{background:#fff;border:1px solid #e6ecea;border-radius:12px;padding:12px 14px}
.sr-vs-panel.is-current{border-color:var(--primary);box-shadow: 0 2px 10px rgba(16,96,80,.12);}
.sr-vs-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sr-vs-head b{font-size:15px;color:#123}
.sr-vs-fee{margin-left:auto;font-weight: 700;color:var(--primary);font-size:15px}
.ben-new{display:inline-block;background:var(--primary);color:#fff;font-size:10px;font-weight:700;border-radius:20px;padding:1px 7px;vertical-align:2px}
.sr-vs-panel .sr-lvl-benefits{margin:0}

/* ===== v73: scratch-to-reveal card (2026-10-20) ===== */
.sc-scratch{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#0b4a3e,var(--primary));min-height:112px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.sc-scratch-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;padding:10px}
.sc-scratch-label{font-size:11.5px;opacity:.85;letter-spacing:.4px}
.sc-scratch-pin{font-size:23px;letter-spacing:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sc-scratch-canvas{position:absolute;inset:0;touch-action:none;cursor:pointer;transition:opacity .55s ease}
.sc-scratch.is-revealed .sc-scratch-canvas{opacity:0;pointer-events:none}
.sc-scratch-hint{position:absolute;left:0;right:0;bottom:9px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;font-weight:700;color:#4c5563;pointer-events:none;transition:opacity .4s}
.sc-scratch-hint .sr-ic,.sc-scratch-hint svg{font-size:16px}
.sc-scratch.is-revealed .sc-scratch-hint{opacity:0}
.sc-pin-card .sc-scratch{margin:6px 0 4px}

/* ===== v76 (2026-10-20, আতিক ভাই): হিস্ট্রি আইকন/শিট, স্ট্যাটস, প্রোফাইল, লেভেল ===== */
.sr-ic-svg{width:1.05em;height:1.05em;flex:none}
.sr-hist2-ic svg{width:24px;height:24px;color:var(--primary)}
.sr-histd-hero-ic svg{width:28px;height:28px;color:var(--primary)}
.sr-op-ic{position:relative;overflow:hidden box-shadow: 0 2px 6px rgba(16,40,32,.22),0 0 0 2px #fff;}
.sr-op-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* হিস্ট্রি বটম শিট — ক্লিন, মিনিমাল, প্রফেশনাল */
.sr-histbs-hero{text-align:center;padding:22px 16px 18px;border-radius:16px;border:1px solid #e8efec;margin-bottom:6px}
.sr-histbs-hic{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 3px 10px rgba(15, 23, 20, .08);color:var(--primary)}
.sr-histbs-hic .material-symbols-rounded{font-size:30px}
.sr-histbs-hero.st-success .sr-histbs-hic{color:#1c9d6c}
.sr-histbs-hero.st-failed .sr-histbs-hic{color:#d64545}
.sr-histbs-hero.st-processing .sr-histbs-hic{color:#d9930d}
.sr-histbs-htype{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.sr-histbs-hamt{font-size:27px;font-weight: 700;color:var(--text);margin:5px 0 8px;font-variant-numeric:tabular-nums}
.sr-histbs-hbadge{display:flex;justify-content:center}
.sr-sheet-body .sr-detail-row{padding:11px 0;font-size:13.5px}
.sr-sheet-body .sr-detail-row .v{max-width:62%;word-break:break-word}
.sr-histbs-copy{border:1px solid #dbe5e1;background:#f4f8f6;color:var(--primary);border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;margin-left:6px}
.sr-histbs-loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:26px 0;color:var(--muted);font-size:13.5px}
.sr-histbs-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid #dbe5e1;border-top-color:var(--primary);animation:sr-spin76 .7s linear infinite;flex:none}
@keyframes sr-spin76{to{transform:rotate(360deg)}}
.sr-histbs-fail{background:#fdf1f1;border:1px solid #f3d2d2;color:#a33333;border-radius:12px;padding:12px 14px;font-size:13.5px;margin-bottom:12px;text-align:center}
/* নোট — নিরপেক্ষ সফট বক্স */
.sr-hist2-notice{background:#FFFAEB;border:1px solid #FEDF89;border-radius:12px;padding:12px 14px;margin-top:12px}
.sr-hist2-notice b{font-size:12px;color:#B54708}
.sr-hist2-notice p{margin:4px 0 0;font-size:13px;color:#6B3D08}
/* হিস্ট্রি ডিটেইল পেজ — রিসিপ্ট পরিষ্কার সারি */
.sr-histd-card .sr-receipt{background:transparent;border:0;box-shadow:none;margin:0;padding:6px 0}
.sr-histd-card .sr-detail-row:last-child{border-bottom:0}
/* স্ট্যাটস ড্যাশবোর্ড */
.sr-stats-addbal{margin:0 0 16px;gap:8px}
.sr-stats-addbal .material-symbols-rounded{font-size:20px}
.sr-dash-donut,.sr-dash-total,.sr-dash-tip{max-width:100%}
.sr-donut-leg{min-width:0}
@media (max-width: 520px){.sr-dash-donut-flex{flex-direction:column;align-items:stretch}.sr-donut-svg{margin:0 auto}.sr-donut-legend{width:100%}}
/* প্রোফাইল লেভেল কার্ড — গ্রেডিয়েন্ট হাইলাইট */
.prof-upgrade-card.prof-lvl-card{background:linear-gradient(135deg,#14705c 0%,#0a4a37 100%);border:0;color:#fff;box-shadow:0 12px 26px -10px rgba(15, 23, 20, .5);padding:18px 16px}
.prof-lvl-card .prof-upgrade-ic{background:rgba(255,255,255,.16);color:#ffe9a8;border:1px solid rgba(255,255,255,.25) box-shadow: 0 3px 8px rgba(20,60,45,.12);}
.prof-lvl-card .prof-upgrade-tx b{color:#fff;font-size:16.5px}
.prof-lvl-card .prof-upgrade-tx span{color:rgba(255,255,255,.82);font-size:12.5px}
.prof-lvl-cta{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,var(--primary),#0a4a37);color:#0a4a37;font-weight: 700;font-size:12.5px;border-radius:999px;padding:8px 12px;flex:none box-shadow: 0 8px 16px -6px rgba(16,96,80,.6);}
.prof-lvl-cta .material-symbols-rounded{font-size:16px}
/* লেভেল পেজ — প্রফেশনাল পলিশ */
.sr-lvl-card{transition:transform .12s ease,box-shadow .15s ease box-shadow: 0 3px 14px rgba(16,96,80,.06);}
.sr-lvl-card.is-current{border:1.5px solid var(--primary);box-shadow:none;}
.sr-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sr-cmp{border-collapse:separate;border-spacing:0;min-width:430px}
.sr-cmp th,.sr-cmp td{padding:11px 12px;border-bottom:1px solid var(--border-soft);font-size:13.5px;vertical-align:middle}
.sr-cmp thead th{background:#f4f8f6;font-weight: 700;color:#22312c;text-align:left}
.sr-cmp thead th:not(:first-child){text-align:center}
.sr-cmp td:first-child,.sr-cmp th:first-child{position:sticky;left:0;background:#fff;z-index:1}
.sr-cmp thead th:first-child{background:#f4f8f6;z-index:2}
.sr-cmp td:first-child{font-weight:600;color:var(--text-2)}
.sr-cmp tbody tr:nth-child(even) td{background:#fafcfb}
.sr-cmp .cmp-cur{background:rgba(16,96,80,.09)!important}
.sr-cmp thead th.cmp-cur{background:#e2efe9}
.sr-cmp .cmp-cell{text-align:center}
.sr-cmp .cmp-cell svg{width:19px;height:19px}
.sr-cmp .cmp-no{color:#c9d2ce}

/* ==== v78 (2026-10-20, আতিক ভাই) ==== */
/* প্রোফাইল লেভেল কার্ড — অন্য সফট গ্রেডিয়েন্ট (হালকা মিন্ট→স্কাই→ল্যাভেন্ডার) */
.prof-upgrade-card.prof-lvl-card{background:linear-gradient(135deg,#e9f9f1 0%,#ddf2ff 56%,#ebe8ff 100%);border:1px solid #cfe7da;color:#17352c;box-shadow: 0 16px 32px -14px rgba(11,79,63,.45),inset 0 1px 0 rgba(255,255,255,.65);}
.prof-lvl-card .prof-upgrade-ic{background:#fff;color:#d9930d;border:1px solid #e7ddba;box-shadow:0 2px 6px rgba(15, 23, 20, .08)}
.prof-lvl-card .prof-upgrade-tx b{color:var(--primary-dark)}
.prof-lvl-card .prof-upgrade-tx span{color:#4c6a5f}
.prof-lvl-cta{background:linear-gradient(135deg,var(--primary),#0a4a37);color:#fff;box-shadow: 0 8px 16px -6px rgba(16,96,80,.6);}
/* হরিজন্টাল ফাঁকা/টান — পেজ যেন ডানে-বামে সরে ফাঁকা না হয় */
html,body{overflow-x:clip}
/* পেজ-আগমন ফেড (২০২৬-১১-০৩, সাদা-ফ্ল্যাশ ফিক্সের দ্বিতীয়
   ধাপ): কনটেন্ট হঠাৎ না এসে ১৮০ms-এ স্মুথে ফুটবে।
   [Critical Re-Audit Phase 2 ব্যাচ ১, আইটেম ১ (RC-03), ২০২৬-১১-০৫:
   body-অ্যানিমেশন বাদ — একটাই ফেড থাকে (.app-main, নিচে :6536)।
   বিকল্প (ক) বেছে নেওয়া হলো — এতে WebView.php ছুঁতে হয় না (শেল-wiring
   বিল্ডের বেস অক্ষত)। sr-no-fade ইনলাইন-নিয়ম (WebView.php:704) এখনো
   .app-main-ফেড বন্ধ করে; html{background:#ffffff} এই আইটেমের বাইরে —
   বদলানো হয়নি, ফলো-আপ হিসেবে বিল্ড-রিপোর্টে রেকর্ডকৃত।] */
.app-main{overflow-x:clip}
.sr-donut-name{min-width:0}
.sr-hist2-tab{position:relative}
.sr-dash-tip-tx{min-width:0}
.sr-dash-tip-tx b{display:block;line-height:1.35}
/* v79 — প্রোফাইল লেভেল কার্ড: স্ট্যান্ডার্ড প্রফেশনাল সফট গ্রেডিয়েন্ট
   (আগেরটা খুব ফ্যাকাশে ছিল — এখন গভীর-সফট, চোখে পড়ে, টেক্সট পরিষ্কার) */
.prof-upgrade-card.prof-lvl-card{background:linear-gradient(120deg,#e2f6ec 0%,#b7e7d2 34%,#a5dcef 68%,#cfc6f7 100%);border:1px solid rgba(11,79,63,.22);color:#17352c;box-shadow:0 16px 32px -14px rgba(15, 23, 20, .45),inset 0 1px 0 rgba(255,255,255,.65)}
.prof-lvl-card .prof-upgrade-ic{background:#fff;color:#d9930d;border:1px solid #e7ddba;box-shadow:0 3px 8px rgba(15, 23, 20, .12)}
.prof-lvl-card .prof-upgrade-tx b{color:#083f31;font-size:16.5px}
.prof-lvl-card .prof-upgrade-tx span{color:#33584c}
.prof-lvl-cta{background:linear-gradient(135deg,var(--primary),#0a4a37);color:#fff;box-shadow: 0 8px 16px -6px rgba(16,96,80,.6);}
/* প্রোফাইল ভাষা টগল — ডানদিকে ঠিকমতো বসবে */
.prof-menu-lang{margin-left:auto;flex:none}
.sr-complaint-card{margin-top:14px;background:#f6faf8;border:1.5px solid #d8e7e2;border-radius:12px;padding:12px 14px;text-align:left}
.sr-complaint-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sr-complaint-card p{margin:6px 0 4px;font-size:13.5px;color:#22312c}
.sr-complaint-card small{color:var(--muted);font-size:12px}
/* ড্যাশবোর্ড ফিটেড ট্যাব — কাটে না, স্ক্রল লাগে না */
.sr-hist2-tabs-fit{overflow-x:visible}
.sr-hist2-tabs-fit .sr-hist2-tab{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px;font-size:12.5px}
/* v80 — হিস্টোরি: বড় ও পরিষ্কার অপারেটর ব্যাজ, কার্ডে ট্রানজেকশন আইডি লাইন */
.sr-hist2-opwrap{margin-left:-26px;margin-top:26px}
.sr-op-ic{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(15, 23, 20, .22),0 0 0 2px #fff;display:inline-flex;align-items:center;justify-content:center}
.sr-op-ic span{font-size:11px;font-weight: 700;color:var(--primary)}
.sr-op-ic img{padding:2.5px;object-fit:contain;border-radius:50%}
.sr-hist2-txnid{display:block;font-size:11px;color:#8a9a94;letter-spacing:.1px;margin-top:1px;font-variant-numeric:tabular-nums}
.sr-txnid-v{font-variant-numeric:tabular-nums;font-weight:700;color:#22312c;word-break:break-all}
.sr-histd-hero-amt b{font-size:19px}
/* v80 — ড্রাইভ কার্ডের লেবেলযুক্ত দাম + কপি বাটন + রিচার্জ অপারেটর প্লেসহোল্ডার */
.drv-card-prices{display:flex;flex-direction:column;gap:1px}
.drv-card-reg{font-size:12px;color:#54685f;font-weight:600}
.drv-card-reg b{font-weight:700;color:#3d4f47}
.drv-card-off{font-size:13px;color:var(--primary-dark);font-weight:700}
.drv-card-off b{font-size:16.5px;font-weight: 700}
.drv-card-foot{align-items:flex-end}
.drv-copyall{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 12px;border-radius:12px;border:1.5px solid var(--primary);background:#eef6f2;color:var(--primary-dark);font-weight: 700;font-size:14px;cursor:pointer;margin-bottom:12px;font-family:inherit}
.drv-copyall .material-symbols-rounded{font-size:19px}
.sr-op-logo-ph{width:34px;height:34px;border-radius:50%;border:2px dashed #c3d5cf;background:#f2f7f4;display:inline-block;flex:none}
.rc-chips .sr-quick-chip.is-picked{background:var(--primary);color:#fff;border-color:var(--primary)}
/* রেজিস্ট্রেশন লেভেল-পেমেন্ট পেজ (v78) */
.sr-regbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border-radius:16px;padding:14px 16px;box-shadow: 0 8px 20px -8px rgba(16,96,80,.5);}
.sr-regbar-title{font-size:17px;font-weight: 700}
.sr-regbar-step{font-size:11.5px;font-weight:700;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:4px 10px;border-radius:999px;white-space:nowrap}
.sr-reg-sub{margin:10px 2px 14px;color:var(--muted,#71827c);font-size:13.5px}
.sr-reg-notice{display:flex;gap:10px;align-items:flex-start;background:#eef7f2;border:1px solid #cfe7da;border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.55;color:#274b3e;margin-bottom:12px}
.sr-reg-notice .material-symbols-rounded{color:var(--primary);flex:none;margin-top:1px}
.sr-reg-video{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #d8e6df;background:#fff;border-radius:12px;padding:12px 14px;font-family:inherit;font-size:14px;font-weight:700;color:var(--primary-dark);cursor:pointer;margin-bottom:12px;box-shadow: 0 4px 14px -8px rgba(11,46,38,.25);}
.sr-reg-video-play{display:inline-flex;color:#e0483e}
.sr-reg-video-play .material-symbols-rounded{font-size:30px}
.sr-reg-sec{background:#fff;border:1px solid var(--border-soft,#e6eeea);border-radius:16px;padding:16px;margin-bottom:12px;box-shadow: 0 8px 22px -14px rgba(11,46,38,.16);}
.sr-reg-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sr-reg-sec-head h3{margin:0;font-size:15.5px}
.sr-reg-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#e6f4ee;color:var(--primary)}
.sr-reg-rows{border:1px solid var(--border-soft,#e6eeea);border-radius:12px;overflow:hidden}
.sr-reg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;font-size:14px}
.sr-reg-row+.sr-reg-row{border-top:1px dashed #e3ece8}
.sr-reg-row span{display:inline-flex;align-items:center;gap:7px;color:var(--muted,#71827c)}
.sr-reg-row span .material-symbols-rounded{font-size:19px;color:var(--primary)}
.sr-reg-row b{font-weight:700;color:var(--text);text-align:right;word-break:break-all}
.sr-reg-card{border-radius:16px box-shadow: 0 10px 26px -14px rgba(11,46,38,.18);}
.sr-level-card{position:relative}
.sr-level-card-check{position:absolute;top:8px;right:8px;color:var(--primary);opacity:0;transform:scale(.6);transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}
.sr-level-card.is-active .sr-level-card-check{opacity:1;transform:scale(1)}
.sr-level-card-check .material-symbols-rounded{font-size:20px}
.sr-level-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.sr-level-panel-head #srLevelName{font-size:16px;font-weight: 700;color:var(--primary-dark)}
.sr-level-benefits li small{display:block;color:var(--muted,#71827c);font-size:12px;margin-top:1px}
.sr-secure-line{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:12.5px;color:#5d7a6e}
.sr-secure-line .material-symbols-rounded{font-size:17px;color:var(--primary)}
.sr-modal-icon .material-symbols-rounded{font-size:34px;color:#1c9d6c}

/* ============================================================
   v81 (2026-10-20, আতিক ভাই) — প্রফেশনাল রিডিজাইন ব্লক
   ============================================================ */

/* ---- রিচার্জ: টপ কার্ড (রিসিভার + অপারেটর এক কার্ডে) ---- */
.rc-topcard{background:#fff;border:1px solid #e7efec;border-radius:20px;padding:16px 14px 6px;box-shadow: 0 4px 16px rgba(16,96,80,.06);margin-bottom:12px}
.rc-topcard .rc-field{margin-bottom:10px}
.rc-topcard .rc-op-row{border-top:1px dashed #e3ece9;padding-top:12px}

/* ---- রিচার্জ কনফার্ম হিরো ---- */
.rc-confirm-hero{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#e9f9f1,#f4fbf7);border:1px solid #cfe7da;border-radius:16px;padding:14px;margin-bottom:14px}
.rc-confirm-op{flex:none;width:48px;height:48px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow: 0 2px 8px rgba(16,96,80,.12);overflow:hidden}
.rc-confirm-op img{max-width:38px;max-height:38px;object-fit:contain}
.rc-confirm-op .sr-op-mark{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight: 700;color:var(--primary)}
.rc-confirm-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.rc-confirm-tx b{font-size:16.5px;color:var(--primary-deep);letter-spacing:.2px}
.rc-confirm-tx span{font-size:12.5px;color:#52796d;font-weight:600}
.rc-confirm-amt{flex:none;font-size:20px;font-weight: 700;color:var(--primary)}

/* ---- ড্রাইভ: সার্চ বার + প্রফেশনাল কার্ড ---- */
.drv-searchbar{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #dfeae6;border-radius:12px;padding:0 14px;margin:0 0 12px;box-shadow: 0 2px 10px rgba(16,96,80,.05);}
.drv-searchbar .material-symbols-rounded{font-size:21px;color:#7a938a}
.drv-searchbar input{flex:1;border:0;outline:none;background:transparent;padding:13px 0;font-size:14.5px;font-family:inherit;color:var(--text)}
.drv-search-empty{text-align:center;color:var(--muted);font-size:13.5px;padding:18px 8px;background:#fff;border:1px dashed #d5dedb;border-radius:12px}
.drv-card{background:#fff;border:1px solid #e7efec;box-shadow: 0 4px 14px -6px rgba(16,80,60,.10);}
.drv-card-ic{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;margin-bottom:8px;color:var(--primary-dark)}
.drv-card-ic .material-symbols-rounded{font-size:24px}
.drv-card-ic.g-blue{background:linear-gradient(135deg,#e3eefb,#c8ddf5)}
.drv-card-ic.g-teal{background:linear-gradient(135deg,#ddf3f0,#bde6e0)}
.drv-card-ic.g-violet{background:linear-gradient(135deg,#ece5fa,#d9cbf3)}
.drv-card-ic.g-indigo{background:linear-gradient(135deg,#e5e9fb,#ccd6f6)}
.drv-card-ic.g-sky{background:linear-gradient(135deg,#e2f2fd,#c4e4f8)}
.drv-card-prices{display:flex;flex-direction:column;gap:1px}
.drv-card-reg{font-size:11.5px;color:var(--muted);font-weight:600}
.drv-card-reg b{color:var(--muted);font-weight:700}
.drv-card-off{font-size:13px;color:#3d5a52;font-weight:600}
.drv-card-off b{font-size:16.5px;color:var(--primary);font-weight: 700}
.drv-card-go{background:#e9f9f1}

/* ---- হেল্পলাইন এক-পেজ ---- */
.hl-sec-title{font-size:16.5px;font-weight: 700;color:var(--primary-deep);margin:22px 0 10px}
.hl-hero{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--primary),#1a8a6a);border-radius:20px;padding:18px 16px;color:#fff;box-shadow: 0 10px 26px -10px rgba(16,96,80,.45);position:relative;overflow:hidden}
.hl-hero-ic{flex:none;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center}
.hl-hero-ic .material-symbols-rounded{font-size:28px}
.hl-hero-tx{flex:1;min-width:0}
.hl-hero-tx h2{margin:0;font-size:18px;font-weight: 700;line-height:1.35}
.hl-hero-tx p{margin:4px 0 0;font-size:12.5px;color:rgba(255,255,255,.85);line-height:1.55}
.hl-hero-badge{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);color:var(--primary-dark);font-size:10.5px;font-weight: 700;padding:4px 9px;border-radius:99px;letter-spacing:.02em}
.hl-faq-list{display:flex;flex-direction:column;gap:8px}
.hl-faq-item{background:#fff;border:1px solid #e7efec;border-radius:12px;overflow:hidden}
.hl-faq-item summary{list-style:none;cursor:pointer;padding:14px 16px;font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.hl-faq-item summary::-webkit-details-marker{display:none}
.hl-faq-item summary::after{content:'+';margin-left:auto;font-size:19px;color:var(--primary);font-weight:700}
.hl-faq-item[open ] summary::after{content:'–'}
.hl-faq-a{padding:0 16px 14px;font-size:13.5px;color:#3d5a52;line-height:1.7}
.hl-contact-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.hl-contact-val{font-size:12px;color:var(--muted);font-weight:600}
.hl-social-title{font-size:13.5px;font-weight:700;color:#3d5a52;margin:16px 0 8px}
.hl-social-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.hl-social-tile{display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff;border:1px solid #e7efec;border-radius:12px;padding:14px 6px;text-decoration:none;color:var(--text);font-size:12px;font-weight:700}
.hl-social-ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight: 700;font-size:13px}

/* ---- প্রোফাইল মার্জড কার্ড (সফট একক রঙ) ---- */
.prof-card-merged{background:#fff;border:1px solid #E5E7EB;border-radius:20px;margin-bottom:12px;overflow:hidden}
.prof-card-merged .prof-hero{background:transparent;box-shadow:none;color:var(--primary-deep);margin:0;border-radius:0;padding:20px 16px 14px}
.prof-card-merged .prof-mobile{color:#52796d;opacity:1}
.prof-card-merged .prof-edit-btn{background:#fff;color:var(--primary);border:1px solid #E5E7EB;}
.prof-card-merged .prof-avatar{border:3px solid #fff;}
.prof-lvl-row{display:flex;align-items:center;gap:12px;margin:2px 16px 16px;padding:13px 14px;background:var(--primary-mist);border:1px solid #E5E7EB;border-radius:16px}
.prof-lvl-ic{flex:none;width:42px;height:42px;border-radius:12px;background:#fff;color:var(--primary);border:1px solid #E5E7EB;display:flex;align-items:center;justify-content:center}
.prof-lvl-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.prof-lvl-tx b{font-size:15px;color:var(--primary-dark)}
.prof-lvl-tx span{font-size:12px;color:#52796d}
.prof-lvl-btn{flex:none;display:inline-flex;align-items:center;gap:5px;background:var(--primary);color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:9px 14px;border-radius:99px;box-shadow: 0 6px 14px -6px rgba(16,96,80,.55);}
.prof-lvl-btn .material-symbols-rounded{font-size:17px}

/* ---- নোটিফিকেশন মোডাল: পুরো লেখা + সঠিক আইকন ---- */
.nt-modal-text{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.75;color:#2c423c;margin:0}
.nt-modal-hero .nt-modal-ic{font-family:'Material Symbols Rounded';font-size:44px;line-height:1;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center}
/* (2026-10-31 bundle, task 1) মোডাল-হিরো আইকন কখনো স্ট্রেচ নয়:
   বর্গাকার কনটেইনার (width=height + aspect-ratio + flex:none)। */
.nt-modal-hero .nt-modal-ic{aspect-ratio:1/1;flex:none;object-fit:contain}
.nt-modal-hero img{display:block}

/* ---- কমপ্লেইন রিপ্লাই ---- */
.sr-complaint-reply{margin-top:10px;background:#eef7f2;border:1px solid #cfe7da;border-radius:8px;padding:9px 11px;text-align:left}
.sr-complaint-reply b{font-size:12px;color:var(--primary);display:block;margin-bottom:3px}
.sr-complaint-reply p{margin:0;font-size:13px;color:#2c423c;line-height:1.65}
.sr-complaint-reply small{color:var(--muted);font-size:11px}
.sr-complaint-link{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:700;color:var(--primary);text-decoration:none}

/* ---- সেন্ড মানি: সবসময় দৃশ্যমান অ্যাকশন এরিয়া ---- */
.sm-action{margin-top:16px}
.sm-action .sr-confirm-btn{width:100%;opacity:.55;filter:saturate(.4)}
.sm-action .sr-confirm-btn.is-ready{opacity:1;filter:none}

/* ---- টালিখাতা ---- */
.tk-action-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tk-action-ic-green{background:#e3f4ea;color:var(--primary)}
.tk-form-card{scroll-margin-top:84px box-shadow: 0 10px 28px -12px rgba(16,42,36,.14);}
.tk-cust,.tk-cust b,.tk-cust i{text-decoration:none}
.tk-cust-info i,.tk-txn-info i{font-style:normal}

/* ---- স্ক্র্যাচ: রিচার্জ-স্টাইল রো ---- */
.sc-offer-list{display:flex;flex-direction:column;gap:10px}
.sc-offer-row{text-decoration:none}
.sc-row-ic{overflow:hidden}
.sc-row-ic .material-symbols-rounded{font-size:22px}
.sc-row-thumb{width:100%;height:100%;object-fit:cover}
.sc-row-badge{display:inline-block;font-size:10.5px;font-weight:700;color:#b45309;background:#fef3c7;border-radius:99px;padding:2px 8px;margin-top:3px;width:fit-content}
.sc-row-badge.is-out{color:#b91c1c;background:#fee2e2}
.sc-offer-row.is-soldout{opacity:.65}

/* ============================================================
   v82 (2026-10-21, আতিক ভাই) — রেফারেন্স UI ("Smart Recharge App UI")
   অনুযায়ী রিচার্জ ফর্ম + অফার কার্ড + ড্রাইভ কার্ড।
   অ্যাপ বার অপরিবর্তিত; শুধু পেজের ভিতরের অংশ।
   ============================================================ */

/* ---- রিচার্জ ফর্ম: কার্ডবিহীন ফ্ল্যাট সেকশন ---- */
.rc-topcard{background:transparent;border:0;box-shadow: 0 4px 16px rgba(16,96,80,.06);border-radius:0;padding:2px 2px 0;margin-bottom:2px}
.rc-label{font-size:16.5px;font-weight: 700;color:var(--primary-deep);margin-bottom:2px}
.rc-mobile-row{align-items:center;gap:10px}
.rc-contact-btn{width:48px;min-height:48px;background:#eef4f1;border-radius:12px}
.rc-hint{font-size:12.5px;color:#93a89e;margin:7px 1px 0}
.rc-op-row{background:transparent;border:0;border-radius:0;padding:15px 1px 13px;margin-bottom:0;box-shadow:none}
.rc-op-row-label{font-size:16.5px;font-weight: 700;color:var(--primary-deep)}
.rc-op-row-pick{font-size:14px;color:#7d968a;font-weight:600;gap:8px}
.rc-op-row-pick .sr-op-logo{width:30px;height:30px;object-fit:contain}
.rc-op-row-pick .sr-op-mark{width:30px;height:30px;border-radius:50%;background:#eef4f1;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight: 700}

/* ---- ট্যাব: গাঢ় আন্ডারলাইন (রেফারেন্স) ---- */
.rc-tabs{background:transparent;border-bottom:1px solid #e3ebe8}
.rc-tabs .sr-tab{font-size:15px;padding:11px 10px;color:var(--muted) box-shadow: inset 0 -2px 0 transparent;}
.rc-tabs .sr-tab.is-active{color:var(--primary-deep);font-weight: 700;border-bottom:3px solid var(--primary-deep) box-shadow: inset 0 -2px 0 var(--primary);}

/* ---- পরিমাণ: হালকা মিন্ট প্যানেল ---- */
.rc-amount-wrap{background:#f2f8f5;border:0;border-radius:20px;padding:18px 16px 16px;margin:14px 0 12px;box-shadow:none}
.rc-amount-row{border-bottom:1.5px solid #dde9e3;padding-bottom:9px;margin-bottom:14px}
.rc-taka{font-size:29px}
.rc-amount-row input{font-size:25px}
.rc-chips .sr-quick-chip{background:#fff;border:1px solid #e2ebe6;border-radius:12px;padding:13px 4px;font-size:15.5px;box-shadow: 0 2px 8px -4px rgba(11,46,38,.1);}
.rc-chips .sr-quick-chip:active,.rc-chips .sr-quick-chip.is-picked{background:#e8f6ef;border-color:var(--primary)}
.rc-balance{font-size:14px;margin:2px 0 14px}

/* ---- অফার ফিল্টার পিল — হালকা মিন্ট ---- */
.rc-opill{background:#eef4f1;border:0;color:#3d5a52;font-weight:700}
.rc-opill.is-active{background:var(--primary);color:#fff}

/* ---- অফার কার্ড: বড়, নরম ছায়া, মিন্ট আইকন টাইল ---- */
.rc-offer{border:1px solid #e6efeb;border-radius:20px;padding:15px 16px;gap:13px;margin-bottom:12px;box-shadow: 0 8px 20px -10px rgba(11,46,38,.14);background:#fff}
.rc-offer-ic{width:52px;height:52px;border-radius:16px;background:#e6f4ee}
.rc-offer-ic .rc-ic{width:25px;height:25px}
.rc-offer-title{font-size:15.5px;font-weight: 700;color:var(--primary-deep)}
.rc-offer-valid{font-size:12.5px;color:var(--muted)}
.rc-offer-price{font-size:19px;font-weight: 700;color:#0b3d2e}
.rc-offer-balance{text-align:center;font-size:14px;color:var(--muted);margin:16px 0 10px}
.rc-offer-balance b{color:var(--primary-deep)}
.rc-offer-note{background:#eef6f2;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.65;color:#52796d;margin-bottom:6px}

/* ---- গেট মেসেজ — ফ্ল্যাট ---- */
.rc-gate{background:#f2f8f5;border:0;border-radius:20px}

/* ---- ড্রাইভ কার্ড: রো-লেআউট (রেফারেন্স অফার কার্ডের মতো) ---- */
.drv-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #e6efeb;border-radius:20px;padding:15px 16px;box-shadow: 0 4px 14px -6px rgba(16,80,60,.10);}
.drv-card-ic{width:52px;height:52px;border-radius:16px;margin:0;display:flex;align-items:center;justify-content:center;color:var(--primary-dark);flex:none}
.drv-card-ic .material-symbols-rounded{font-size:26px}
.drv-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;position:relative;z-index:1}
.drv-card-title{margin:0;font-size:15px}
.drv-card-sub{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.drv-card-sub .drv-card-op-logo{width:20px;height:14px}
.drv-card-prices{align-items:flex-end;text-align:right;flex:none}
.drv-card-reg{font-size:11px}
.drv-card-off b{font-size:17px}

/* ============================================================
   v83 (2026-10-21, আতিক ভাই) — সব ট্যাবে একই ফ্ল্যাট হেডার +
   সামগ্রিক প্রফেশনাল পলিশ (লোগো সাইজ, autofill, কার্ড, ফিল্টার)।
   ============================================================ */

/* অপারেটর রো-তে লোগো পরিমিত সাইজে */
.rc-op-row .rc-op-row-pick img.sr-op-logo{width:30px;height:30px;object-fit:contain;border-radius:8px}
.rc-op-row .rc-op-row-pick .sr-op-mark{width:30px;height:30px}
.rc-op-sel-logo{display:inline-flex;align-items:center}

/* Chrome autofill-এর হালকা নীল ব্যাকগ্রাউন্ড দূর — পরিষ্কার লুক */
.rc-amount-row input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #fff inset;box-shadow:0 0 0 60px #fff inset;-webkit-text-fill-color:var(--primary-deep);caret-color:var(--primary-deep)}

/* ফর্ম এলাকায় মসৃণ অনুভূতি */
.rc-op-row{transition:background .15s ease}
.rc-op-row:active{background:#f2f8f5}
.rc-contact-btn{transition:transform .12s ease,background .15s ease}
.rc-next{transition:transform .12s ease,box-shadow .2s ease box-shadow: 0 14px 26px -12px rgba(16,96,80,.5);}

/* ---- অফার ফিল্টার/সর্ট সারি পলিশ ---- */
.rc-ofilter{margin:2px 0 14px}
.rc-opill{padding:8px 15px;font-size:13px;border-radius:999px;transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)}
.rc-osort{gap:8px}
.rc-osort span{font-size:13px;font-weight:700;color:#52796d}
.rc-osort-sel{border:1.5px solid #dfe9e4;border-radius:12px;padding:9px 34px 9px 12px;font-size:13.5px;font-weight:600;color:var(--primary-deep);background:#fff;font-family:inherit;cursor:pointer}

/* ---- "গুরুত্বপূর্ণ তথ্য" বার — নরম সলিড স্টাইল ---- */
.rc-info-btn{background:#eef6f2;border:1px solid #cfe5da;border-style:solid;border-radius:12px;padding:11px;font-size:13.5px;box-shadow: 0 2px 8px -4px rgba(11,46,38,.12);}

/* ---- অফার কার্ড — চূড়ান্ত পলিশ ---- */
.rc-offer{padding:16px;transition:transform .12s ease,border-color .15s ease,box-shadow .2s ease box-shadow: 0 8px 20px -10px rgba(11,46,38,.14);}
.rc-offer:hover{border-color:#bcdccc}
.rc-offer-price{letter-spacing:.2px}
.rc-offer-note{border:1px solid #e0efe7}

/* ---- ড্রাইভ কার্ড — একই ছাঁচে পলিশ ---- */
.drv-card{transition:transform .12s ease,border-color .15s ease,box-shadow .2s ease box-shadow: 0 4px 14px -6px rgba(16,80,60,.10);}
.drv-card:hover{border-color:#bcdccc}
.drv-search input{font-size:15px}

/* ============================================================
   v84 (2026-10-21, আতিক ভাই) — লেভেল বাছুন পেজ: ড্রপডাউন-only
   সিলেক্টর, ডিসকাউন্ট ফি-প্রদর্শন, প্রফেশনাল পলিশ।
   ============================================================ */

/* ড্রপডাউন সিলেক্টর — বড়, পরিষ্কার, প্রিমিয়াম */
.sr-reg-card{border-radius:20px;border:1px solid #e6efeb;box-shadow: 0 10px 26px -14px rgba(11,46,38,.18);}

/* সিলেক্টেড লেভেল প্যানেল */
.sr-level-panel{margin-top:16px;background:linear-gradient(160deg,#f2f9f5,#eaf5ef);border:1px solid #d9eae1;border-radius:16px;padding:18px 16px box-shadow: 0 12px 28px -14px rgba(11,46,38,.2);}
.sr-level-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.sr-level-panel-head #srLevelName{font-size:19px;font-weight: 700;color:var(--primary-deep)}
.sr-level-feebox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end box-shadow: 0 3px 10px -6px rgba(11,46,38,.18);}
.sr-level-feelabel{font-size:12.5px;font-weight:700;color:#52796d}
.sr-level-now{font-size:19px;font-weight: 700;color:var(--primary-dark);white-space:nowrap}
.sr-level-free{font-size:15px;font-weight: 700;color:var(--primary)}
.sr-level-reg{font-size:14.5px;font-weight:600;color:#93a89e;text-decoration:line-through;text-decoration-thickness:1.5px;white-space:nowrap}
.sr-level-off{font-size:11.5px;font-weight: 700;color:#9a6206;background:#fdeecd;border:1px solid #f5d9a0;border-radius:999px;padding:3px 9px;white-space:nowrap}
.sr-level-benefits-title{font-size:13.5px;font-weight:700;color:#33544a;margin:8px 0 8px}
.sr-level-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.sr-level-benefits li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.55;color:#22392f box-shadow: 0 3px 9px -6px rgba(11,46,38,.14);}
.sr-level-benefits li .material-symbols-rounded{font-size:19px;color:var(--primary);flex:none;margin-top:1px}
.sr-level-benefits li small{display:block;font-size:12px;color:var(--muted)}

/* সাশ্রয়ের লাইন — CTA-র নিচে */
.sr-save-line{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:13.5px;font-weight: 700;color:#0b7a43}
.sr-save-line .material-symbols-rounded{font-size:18px}

/* অ্যাকাউন্ট তথ্য সেকশন পলিশ */
.sr-reg-sec{border-radius:20px;border:1px solid #e6efeb;box-shadow: 0 8px 22px -14px rgba(11,46,38,.16);}
.sr-reg-notice{border-radius:16px}

/* মৃত কার্ড-গ্রিড স্টাইল আর ব্যবহৃত হয় না — পেজে কার্ড নেই */
.sr-level-cards{display:none}

/* ============================================================
   v85 (2026-10-21, আতিক ভাই) — সিম্পল অ্যাপ বার (authSimple),
   লেভেল প্যানেল প্রিমিয়াম ডিজাইন, আপগ্রেড ডিসকাউন্ট ব্যাজ।
   ============================================================ */

/* সিম্পল অ্যাপ বারে ভাষা টগলের জায়গা রাখতে টাইটেলে ডান-প্যাডিং */
.sr-green-head-title{padding-right:118px}

/* ---- লেভেল প্যানেল: প্রিমিয়াম ---- */
.sr-level-panel{background:linear-gradient(165deg,#f4faf6 0%,#e9f5ee 55%,#e2f1e8 100%);border:1px solid #d3e7db;border-radius:20px;padding:18px 16px 16px;box-shadow: 0 12px 28px -14px rgba(11,46,38,.2);}
.sr-level-panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-bottom:12px}
.sr-level-ic{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#178f66,var(--primary-dark));color:#fff;box-shadow: 0 6px 14px -6px rgba(16,96,80,.55);}
.sr-level-ic .material-symbols-rounded{font-size:25px}
.sr-level-panel-head #srLevelName{flex:1;min-width:120px}
.sr-level-feebox{flex-basis:100%;display:flex;align-items:center;justify-content:flex-end;gap:9px;background:#fff;border:1px solid #dcebe2;border-radius:12px;padding:11px 14px;box-shadow: 0 3px 10px -6px rgba(11,46,38,.18);}
.sr-level-feelabel{margin-right:auto}

/* সুবিধা — প্রতিটা আলাদা সাদা রো-কার্ড */
.sr-level-benefits{gap:9px}
.sr-level-benefits li{background:#fff;border:1px solid #e2eee7;border-radius:12px;padding:11px 12px;box-shadow: 0 3px 9px -6px rgba(11,46,38,.14);align-items:center}
.sr-level-benefits li .material-symbols-rounded{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;background:#e7f4ec;border-radius:50%;font-size:17px;margin-top:0}
.sr-level-benefits-title{font-size:13px;font-weight: 700;letter-spacing:.3px;color:#52796d;text-transform:none;margin:2px 0 10px}

/* ---- ইউজার লেভেল পেজ: আপগ্রেড ডিসকাউন্ট ---- */
.sr-lvl-feebox{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sr-lvl-reg{font-size:13px;font-weight:600;color:#93a89e;text-decoration:line-through;text-decoration-thickness:1.5px}
.sr-lvl-off{font-size:11px;font-weight: 700;color:#9a6206;background:#fdeecd;border:1px solid #f5d9a0;border-radius:999px;padding:2px 8px;white-space:nowrap}
.sr-detail-row .v .sr-offer-price{font-weight: 700;color:var(--primary-dark)}

/* ============================================================
   v86 (2026-10-21, আতিক ভাই) — লেভেল পেজ রেফারেন্স ডিজাইন:
   সেকশন কার্ড, খালি অবস্থা, সাব-কার্ড, স্ক্রল-সচেতন বটম শিট।
   ============================================================ */

/* সেকশন হেডের নরম আইকন */
.sr-reg-ic-soft{background:#e7f4ec;color:var(--primary-dark)}

/* ভিডিও বাটন — মাঝখানে পিল */
.sr-reg-video{display:flex;width:fit-content;margin:0 auto 14px;align-items:center;gap:8px;background:#fff;border:1px solid #dcebe2;border-radius:999px;padding:10px 18px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--primary-dark);cursor:pointer;box-shadow: 0 4px 14px -8px rgba(11,46,38,.25);}
.sr-reg-video:active{transform:scale(.97)}

/* খালি অবস্থা (কোনো লেভেল সিলেক্ট নয়) */
.sr-level-empty{background:#f5f9f7;border:1.5px dashed #cfdfd6;border-radius:16px;padding:26px 18px;text-align:center}
.sr-level-empty-ic{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:#e3f1e9;display:flex;align-items:center;justify-content:center;color:var(--primary-dark)}
.sr-level-empty-ic .material-symbols-rounded{font-size:34px}
.sr-level-empty b{display:block;font-size:16px;font-weight: 700;color:var(--primary-deep);margin-bottom:5px}
.sr-level-empty p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}

/* নির্বাচিত লেভেলের সাব-কার্ড */
.sr-level-subcard{background:#f7faf8;border:1px solid #e0ece5;border-radius:16px;padding:14px}
.sr-level-subhead{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.sr-level-meta{flex:1;min-width:110px}
.sr-level-namerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sr-level-namerow #srLevelName{font-size:17.5px;font-weight: 700;color:var(--primary-deep)}
.sr-level-badge{font-size:11px;font-weight: 700;color:var(--primary-dark);background:#dff2e6;border-radius:999px;padding:3px 9px}
.sr-level-status{font-size:12.5px;color:var(--muted);margin-top:2px}
.sr-level-subcard .sr-level-feebox{flex:none;margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end;background:transparent;border:0;box-shadow:none;padding:0}
.sr-level-subcard .sr-level-benefits-title{margin:14px 0 9px}

/* ---- বটম শিট (স্ক্রল-সচেতন) ---- */
.sr-level-sheet{position:fixed;left:0;right:0;bottom:0;z-index:45;max-width:640px;margin:0 auto;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -12px 34px rgba(15, 23, 20, .2);padding:14px 16px calc(13px + env(safe-area-inset-bottom));transition:transform .28s ease}
.sr-level-sheet.is-hidden{transform:translateY(calc(100% + 12px))}
.sr-sheet-fee{display:flex;align-items:center;gap:11px;background:#eef6f2;border:1px solid #dcebe2;border-radius:16px;padding:11px 13px;margin-bottom:12px}
.sr-sheet-fee-ic{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#dff2e6;color:var(--primary-dark)}
.sr-sheet-fee-ic .material-symbols-rounded{font-size:21px}
.sr-sheet-fee-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.sr-sheet-fee-tx b{font-size:15px;font-weight: 700;color:var(--primary-deep)}
.sr-sheet-fee-tx small{font-size:11.5px;color:var(--muted)}
.sr-sheet-fee-vals{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end;text-align:right}
.sr-sheet-fee-vals .sr-level-now{font-size:20px}
.sr-sheet-fee-vals{font-size:13.5px;font-weight:700;color:#52796d}
.sr-level-sheet .sr-btn-block{padding:15px;font-size:16.5px;border-radius:16px}
.sr-sheet-spacer{height:196px}

/* সিলেক্ট ঝাঁকুনি (লেভেল না বাছলে) */
@keyframes srShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.sr-shake{animation:srShake .45s ease;border-color:var(--error)!important}

/* ============================================================
   v87 (2026-10-21, আতিক ভাই) — রিচার্জ পেজ ফিক্স প্যাক:
   autofill সাদা বক্স দূর, ট্যাব পিল ডিজাইন (একটাই নির্দেশক),
   অফার আইকন ছোট।
   ============================================================ */

/* autofill: ইনসেট রঙ পেজ/প্যানেলের আসল ব্যাকগ্রাউন্ডের সাথে মেলানো —
   সাদা (#fff) ছিল বলেই নাম্বার দিলে বক্সের মতো দেখাত */
.rc-amount-row input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #f2f8f5 inset;box-shadow:0 0 0 60px #f2f8f5 inset;-webkit-text-fill-color:var(--primary-deep);caret-color:var(--primary-deep)}

/* ---- ট্যাব: একীভূত পিল ডিজাইন — নিচে কোনো দাগ/দ্বিতীয় মার্ক নয় ---- */
.rc-tabs{display:flex;gap:4px;background:#e9f3ee;border:0;border-radius:999px;padding:4px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.rc-tabs::-webkit-scrollbar{display:none}
.rc-tabs .sr-tab{flex:1 0 auto;text-align:center;padding:9px 12px;font-size:14px;font-weight:700;color:#52796d;background:transparent;border:0;border-radius:999px;margin:0;white-space:nowrap;text-decoration:none box-shadow: inset 0 -2px 0 transparent;}
.rc-tabs .sr-tab::after{display:none!important;content:none}
.rc-tabs .sr-tab.is-active{background:var(--primary);color:#fff;font-weight: 700;border:0;box-shadow: inset 0 -2px 0 var(--primary);}

/* ---- অফার কার্ডের আইকন ছোট ---- */
.rc-offer-ic{width:38px;height:38px;border-radius:12px}
.rc-offer-ic .rc-ic{width:19px;height:19px}

/* ============================================================
   v88 (2026-10-21, আতিক ভাই) — রিচার্জ পেজ ক্লিন মিনিমাল:
   ট্যাব ফ্ল্যাট (রঙিন পিল নয়), কার্ড ছায়াহীন হালকা, শিট একীভূত।
   ============================================================ */

/* ---- ট্যাব: মিনিমাল ফ্ল্যাট, ডানে-বামে স্ক্রল, একটাই পাতলা নির্দেশক ---- */
.rc-tabs{display:flex;gap:2px;background:transparent;border:0;border-bottom:1px solid #e6efeb;border-radius:0;padding:0;margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.rc-tabs .sr-tab{flex:none;padding:10px 13px;font-size:14.5px;font-weight:600;color:var(--muted);border:0;border-radius:0;background:transparent;box-shadow:inset 0 -2px 0 transparent;white-space:nowrap}
.rc-tabs .sr-tab.is-active{background:transparent;color:var(--primary-deep);font-weight: 700;border:0;box-shadow:inset 0 -2px 0 var(--primary)}

/* ---- অফার কার্ড: ছায়াহীন, হালকা বর্ডার ---- */
.rc-offer{border:1px solid #e6efeb;border-radius:16px;padding:13px 14px;box-shadow: 0 8px 20px -10px rgba(11,46,38,.14);margin-bottom:10px}
.rc-offer:hover{border-color:#cfdfd6;box-shadow:none}
.rc-offer-balance{margin:14px 0 4px}

/* ---- মেয়াদ ফিল্টার পিল: মিনিমাল ---- */
.rc-opill{background:#fff;border:1px solid #dcebe2;color:#52796d;font-weight:600}
.rc-opill.is-active{background:#e9f5ef;border-color:#bcdccc;color:var(--primary-dark)}

/* ---- অপারেটর শিট কার্ড: button/a দুটোতেই হুবহু এক চেহারা ---- */
.sr-op-card{appearance:none;-webkit-appearance:none;font-family:inherit;background:#f7faf8;border:1.5px solid #e0ece5;border-radius:12px;color:var(--primary-deep);text-decoration:none;cursor:pointer box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .12);}
.sr-op-card.is-active{border-color:var(--primary);background:#e9f5ef box-shadow: 0 4px 14px -6px rgba(16, 96, 80, .35);}

/* ============================================================
   v89 (2026-10-21, আতিক ভাই) — ড্রাইভ কার্ড মিনিমাল রিডিজাইন:
   ছোট অপারেটর লোগো + টাইটেল, নিচে এক লাইনে দাম, নোট এক্সপ্যান্ড।
   ============================================================ */
.drv-card{display:block;background:#fff;border:1px solid #e6efeb;border-radius:16px;padding:13px 14px 12px;margin-bottom:10px;box-shadow: 0 4px 14px -6px rgba(16,80,60,.10);}
.drv-card-link{display:block;color:inherit;text-decoration:none}
.drv-card-link:active{opacity:.85}
.drv-card-top{display:flex;align-items:flex-start;gap:9px}
.drv-card-op{flex:none;width:30px;height:30px;border-radius:8px;background:#f2f7f4;border:1px solid #e0ece5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.drv-card-op img{width:21px;height:21px;object-fit:contain}
.drv-card-op-mark{font-size:14px;font-weight: 700;color:var(--primary-dark)}
.drv-card-title{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--primary-deep);line-height:1.45;padding-top:4px}
.drv-card-valid{flex:none;font-size:11px;font-weight:700;color:#52796d;background:#eef6f2;border-radius:999px;padding:3px 8px;margin-top:4px;white-space:nowrap}
.drv-card-foot{display:block;margin-top:11px;padding-top:10px;border-top:1px solid #eef3f1}
.drv-card-prices{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.drv-card-reg{font-size:12.5px;color:var(--muted)}
.drv-card-reg b{font-weight:600;color:#52796d}
.drv-card-off{font-size:12.5px;color:var(--muted)}
.drv-card-off b{font-size:16.5px;font-weight: 700;color:#0b3d2e}

/* এডমিন-নোট: এক লাইন প্রিভিউ, ক্লিকে কার্ডের ভিতরেই খোলে */
.drv-note{margin-top:10px}
.drv-note-head{display:flex;align-items:center;gap:7px;width:100%;background:#f7faf8;border:1px solid #e0ece5;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:12.5px;color:#3d5a52;cursor:pointer;text-align:left}
.drv-note-head .drv-note-ic{font-size:16px;color:var(--primary-dark);flex:none}
.drv-note-label{font-weight: 700;color:var(--primary-dark);flex:none}
.drv-note-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.drv-note-head .drv-note-chev{font-size:18px;color:var(--muted);flex:none;transition:transform .2s ease}
.drv-note.is-open .drv-note-tx{white-space:pre-line;overflow:visible;text-overflow:clip}
.drv-note.is-open .drv-note-chev{transform:rotate(180deg)}

/* ============================================================
   v90 (2026-10-21, আতিক ভাই) — ড্রাইভ কার্ড: রেগুলার ও অফার মূল্য
   এক লাইনে পাশাপাশি (পুরনো column সংজ্ঞা জিতে যাচ্ছিল)।
   ============================================================ */
.drv-card-foot .drv-card-prices{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;width:100%;text-align:left}
.drv-card-foot .drv-card-reg{white-space:nowrap}
.drv-card-foot .drv-card-off{white-space:nowrap}

/* ============================================================
   v91 (2026-10-21, আতিক ভাই) — ড্রাইভ ডিটেইল মিনিমাল সামারি:
   দাম পাশাপাশি গ্রিডে, রেগুলার মূল্য কাটা নয়।
   ============================================================ */
.drv-hero-was{text-decoration:none}
.drv-sum2{background:#fff;border:1px solid #e6efe9;border-radius:16px;padding:12px 14px;margin-top:12px}
.drv-sum2-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.drv-sum2-cell{display:flex;flex-direction:column;gap:1px}
.drv-sum2-cell .k{font-size:11.5px;color:var(--muted);font-weight:600}
.drv-sum2-cell .v{font-size:15px;font-weight:700;color:#12291f}
.drv-sum2-total{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed #dce8e0;margin-top:10px;padding-top:10px;font-size:13.5px;font-weight:600;color:#3d5a52}
.drv-sum2-total b{font-size:17px;color:var(--primary-dark)}

/* ============================================================
   v91 (2026-10-21, আতিক ভাই) — স্ক্র্যাচ কার্ড: তালিকার কার্ড
   ড্রাইভ কার্ডের গঠনে (অপারেটর লোগো + টাইটেল + শুধু দাম)।
   ============================================================ */
.sc-card2{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e6efe9;border-radius:16px;padding:10px 12px;text-decoration:none;color:inherit;margin-bottom:8px}
.sc-card2.is-soldout{opacity:.55}
.sc-card2-op{width:30px;height:30px;flex:none;border-radius:8px;background:#eef6f1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sc-card2-op img{width:100%;height:100%;object-fit:cover;display:block}
.sc-card2-mark{font-weight: 700;color:var(--primary);font-size:14px}
.sc-card2-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sc-card2-title{font-size:14px;font-weight:700;color:#12291f;line-height:1.3}
.sc-card2-price{font-size:14.5px;font-weight: 700;color:var(--primary-dark);white-space:nowrap}
.sc-detail-img2{width:100%;border-radius:12px;margin-top:10px;display:block}

/* ============================================================
   v92 (2026-10-21, আতিক ভাই) — ড্রাইভ কার্ড পলিশ: সুন্দর বর্ডার,
   হালকা ছায়া, পিন ব্যাজ।
   ============================================================ */
.drv-card{border:1.5px solid #d7e6dc;border-radius:16px;box-shadow:0 4px 14px -6px rgba(15, 23, 20, .10);transition:border-color .15s ease,box-shadow .15s ease}
.drv-card:active{border-color:var(--primary);box-shadow:0 6px 18px -6px rgba(15, 23, 20, .18)}
.drv-card-pin{display:inline-block;font-size:10.5px;font-weight:700;color:var(--primary-dark);background:#e2f2e8;border:1px solid #bfe3cd;border-radius:999px;padding:1px 7px;vertical-align:2px}
.drv-card-pin .material-symbols-rounded{font-size:14px}


/* ============================================================
   v94 (2026-10-21, আতিক ভাই) — ড্রাইভ কার্ডে প্রিমিয়াম কমিশন ট্যাগ।
   ============================================================ */
.drv-card-commrow{display:block;margin-top:9px}
.drv-card-comm{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#8a5a00;background:linear-gradient(135deg,#fff4d4,#ffe9a6);border:1px solid #eed188;border-radius:999px;padding:4px 12px;box-shadow:0 4px 10px -4px rgba(178,128,20,.45)}
.drv-card-comm b{font-size:13.5px;color:#6d4500}


/* ============================================================
   v95 (2026-10-21, আতিক ভাই) — ড্রাইভ ডিজাইন পলিশ:
   কমিশন ট্যাগ ছোট ও হালকা সবুজ (ডানপাশে); হিরো কমপ্যাক্ট;
   ডিটেইলে প্রপোজাল-স্টাইল হিসাব; কার্ডে কার্ডে জায়গা।
   ============================================================ */
.drv-card-commrow{display:flex;justify-content:flex-end;margin-top:8px}
.drv-card-comm{font-size:11px;font-weight:600;color:#0e6b4f;background:linear-gradient(135deg,#fff4d4,#ffe9a6);border:1px solid #d3e9db;border-radius:999px;padding:3px 10px;box-shadow: 0 4px 10px -4px rgba(178,128,20,.45);gap:4px}
.drv-card-comm b{font-size:12px;color:var(--primary)}
.drv-hero{padding:16px;margin-bottom:16px box-shadow: 0 8px 24px rgba(16,96,80,.14);}
.drv-hero-title{font-size:17.5px;margin:0}
.drv-prop{background:#fff;border:1px solid #e4eee7;border-radius:16px;padding:18px 16px;margin-top:16px;box-shadow:0 4px 14px -8px rgba(15, 23, 20, .12)}
.drv-prop-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.drv-prop-row .k{color:#5b6b63}
.drv-prop-row .v{font-weight:700;color:#14352a}
.drv-prop-comm .k{color:#0e6b4f}
.drv-prop-comm .v{color:#0e6b4f}
.drv-prop-total{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px dashed #d8e5dc;margin-top:10px;padding-top:13px;font-size:15px}
.drv-prop-total b{font-size:19px;color:var(--primary)}
.drv-prop-note{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:#5b6b63;background:#f2f8f4;border-radius:8px;padding:9px 11px}
.drv-form{margin-top:16px box-shadow: 0 2px 10px rgba(16,96,80,.05);}


/* ============================================================
   v96 (2026-10-21, আতিক ভাই) — ড্রাইভ/স্ক্র্যাচ ডিটেইল ও
   হিস্ট্রি পলিশ: হিরোতে আইকন+টাইটেল, নোট-কার্ড, পয়েন্ট
   ব্যানার, স্ক্র্যাচ কার্ড বড় + আইকন contain, হিস্ট্রি ব্যাজ বাদ।
   ============================================================ */
.drv-hero-head{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.drv-hero-head .drv-hero-title{flex:1;min-width:0}
.drv-note-card{background:#fff;border:1px solid #e4eee7;border-radius:12px;padding:12px 14px;margin-top:12px;font-size:13.5px;line-height:1.6;color:#40544a;box-shadow:0 4px 14px -10px rgba(15, 23, 20, .15)}
.drv-points-banner{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;background:#e9f5ee;border:1px solid #cfe7d6;color:#0e6b4f;border-radius:12px;padding:11px 14px;font-size:14px;font-weight:700}
.drv-points-banner .material-symbols-rounded{font-size:19px}
.sc-hero-tx{flex:1;min-width:0}
.sc-hero-price{font-size:19px;font-weight: 700;color:var(--primary-dark);margin-top:3px}
.sc-offer-list{gap:12px}
.sc-card2{padding:14px;gap:12px;border-radius:16px}
.sc-card2-op{width:46px;height:46px;border-radius:12px}
.sc-card2-op img{object-fit:contain;padding:4px}
.sc-card2-title{font-size:15px}
.sc-card2-price{font-size:15.5px}
.sr-hist2-opwrap,.sr-histd-opwrap{display:none!important}


/* ============================================================
   v97 (2026-10-21, আতিক ভাই) — হেল্পলাইন তিন ট্যাব + সাপোর্ট
   কার্ড + রিপোর্ট কার্ড + AI চ্যাট (টাইপিং অ্যানিমেশন)।
   ============================================================ */
.hl-tabs{display:flex;gap:6px;background:#fff;border:1px solid #e4eee7;border-radius:999px;padding:5px;margin-bottom:16px;box-shadow:0 4px 14px -10px rgba(15, 23, 20, .18)}
.hl-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 4px;border-radius:999px;font-size:13.5px;font-weight:700;color:#5b6b63;text-decoration:none;white-space:nowrap box-shadow: inset 0 -2px 0 transparent;}
.hl-tab .material-symbols-rounded{font-size:19px}
.hl-tab.is-active{background:var(--primary);color:#fff;box-shadow: inset 0 -2px 0 var(--primary);}
.hl-support-card{background:linear-gradient(135deg,#edf8f1 0%,#f0f7ff 58%,#fdf6ec 100%);border:1px solid #e4eee7;border-radius:20px;padding:26px 20px 22px;text-align:center;box-shadow:0 10px 26px -14px rgba(15, 23, 20, .18);margin-bottom:16px}
.hl-support-ic{display:inline-flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:50%;background:#e9f5ee;color:var(--primary);margin-bottom:12px box-shadow: 0 8px 18px -8px rgba(16,96,80,.35);}
.hl-support-ic .material-symbols-rounded{font-size:38px}
.hl-support-card h2{margin:0 0 6px;font-size:21px;color:var(--primary-deep)}
.hl-support-card p{margin:0 0 18px;color:#5b6b63;font-size:14px}
.hl-support-btns{display:flex;gap:10px}
.hl-support-btns .sr-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:13px 10px;border-radius:12px;font-size:15px}
.hl-support-btns .material-symbols-rounded{font-size:20px}
.hl-faq2{background:#fff;border:1px solid #e4eee7;border-radius:16px;overflow:hidden}
.hl-faq2-item{border-bottom:1px solid #eef3f0}
.hl-faq2-item:last-child{border-bottom:0}
.hl-faq2-item summary{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;list-style:none}
.hl-faq2-item summary::-webkit-details-marker{display:none}
.hl-faq2-ic{flex:none;width:38px;height:38px;border-radius:12px;background:#eef6f1;color:var(--primary);display:flex;align-items:center;justify-content:center}
.hl-faq2-ic .material-symbols-rounded{font-size:20px}
.hl-faq2-q{flex:1;font-weight:700;font-size:14.5px;color:#12291f}
.hl-faq2-ch{color:#8aa398;display:flex}
.hl-faq2-item[open ] .hl-faq2-ch{transform:rotate(180deg)}
.hl-faq2 .hl-faq-a{padding:0 14px 14px 64px}
.hl-tutorial-btn{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--primary);color:var(--primary);border-radius:16px;padding:14px 16px;font-weight:700;font-size:14.5px;text-decoration:none;margin:16px 0 4px}
.hl-tutorial-btn .material-symbols-rounded:last-child{margin-left:auto}
.hl-report-card{background:#fff;border:1px solid #e4eee7;border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 6px 18px -12px rgba(15, 23, 20, .16)}
.hl-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hl-report-head b{font-size:15px;color:#12291f;line-height:1.4}
.hl-report-msg{margin:8px 0 0;color:#40544a;font-size:13.5px;line-height:1.55}
.hl-report-meta{margin-top:8px;color:#8aa398;font-size:12px}
.hl-report-reply{background:#f2f8f4;border-radius:12px;padding:11px 12px;margin-top:12px}
.hl-report-reply b{color:var(--primary);font-size:13px}
.hl-report-reply p{margin:5px 0 4px;font-size:13.5px;line-height:1.55;color:#24382f}
.hl-report-reply span{font-size:11.5px;color:#8aa398}
.hl-report-msg2{border-top:1px dashed #e2ece5;margin-top:12px;padding-top:10px}
.hl-report-msg2 b{font-size:12.5px;color:var(--primary)}
.hl-report-msg2.is-admin b{color:#7a5b00}
.hl-report-msg2 span{font-size:11.5px;color:#8aa398;margin-left:6px}
.hl-report-msg2 p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:#24382f}
.hl-report-form{margin-top:12px;border-top:1px dashed #e2ece5;padding-top:12px}
.hl-cmp>summary.hl-report-head{cursor:pointer;align-items:center}
.hl-cmp>summary.hl-report-head::-webkit-details-marker{display:none}
.hl-cmp-right{display:flex;align-items:center;gap:8px;flex:none}
.hl-cmp-date{font-size:12px;color:#8aa398;white-space:nowrap}
.hl-cmp-chev{color:var(--primary);transition:transform .2s;font-size:22px}
details.hl-cmp[open] .hl-cmp-chev{transform:rotate(180deg)}
.hl-cmp .hl-report-problem{margin-top:12px}
.hl-cmp .hl-report-rows{margin-top:12px}
.hl-report-form textarea{width:100%;margin-bottom:8px}
.ai-chat{display:flex;flex-direction:column}
.ai-chat-area{max-height:54dvh;min-height:260px}
.ai-chat-form{position:sticky;bottom:74px;z-index:6;background:#fff;border:1px solid #e4eee7;border-radius:16px;padding:8px;box-shadow:0 12px 26px -12px rgba(15, 23, 20, .28);margin-top:10px}
.sr-typing{display:inline-flex;gap:5px;align-items:center;padding:4px 2px}
.sr-typing span{width:7px;height:7px;border-radius:50%;background:var(--primary);opacity:.35;animation:srTypingBounce 1.1s infinite}
.sr-typing span:nth-child(2){animation-delay:.15s}
.sr-typing span:nth-child(3){animation-delay:.3s}
@keyframes srTypingBounce{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}


/* ============================================================
   v98 (2026-10-21, আতিক ভাই) — হেল্পলাইন ক্লিন রিডিজাইন:
   লাইভ চ্যাট বাদ; ট্যাব ফ্ল্যাট (বাকি পেজের মতো); সফট কালার;
   AI পেজ ফিক্সড ফুল-উইডথ শেল; রিপোর্ট কার্ডে তথ্য-সারি।
   ============================================================ */
.hl-tabs{display:flex;gap:2px;background:transparent;border:0;border-bottom:1px solid #e6efeb;border-radius:0;padding:0;margin:0 0 14px;box-shadow: 0 4px 14px -10px rgba(16,80,60,.18);overflow-x:auto;scrollbar-width:none}
.hl-tabs::-webkit-scrollbar{display:none}
.hl-tab{flex:1 0 auto;padding:11px 10px;border-radius:0;font-size:14.5px;font-weight:600;color:var(--muted);box-shadow:inset 0 -2px 0 transparent}
.hl-tab.is-active{background:transparent;color:var(--primary-deep);font-weight: 700;box-shadow:inset 0 -2px 0 var(--primary)}
.hl-support-card{background:linear-gradient(135deg,#edf8f1 0%,#f0f7ff 58%,#fdf6ec 100%);border-color:#dcebe1 box-shadow: 0 10px 26px -14px rgba(16,80,60,.18);}
.hl-support-ic{background:#fff;box-shadow: 0 8px 18px -8px rgba(16,96,80,.35);}
.hl-faq2-item:nth-child(4n+2) .hl-faq2-ic{background:#e8f1fd;color:#2f6db3}
.hl-faq2-item:nth-child(4n+3) .hl-faq2-ic{background:#fdf3e0;color:#a86e00}
.hl-faq2-item:nth-child(4n+4) .hl-faq2-ic{background:#f1eafd;color:#6a4fc4}
.hl-report-rows{margin-top:10px;border-top:1px dashed #e2ece5;padding-top:10px;display:grid;gap:7px}
.hl-report-row{display:flex;align-items:center;gap:9px;font-size:13px}
.hl-report-row .material-symbols-rounded{font-size:18px;color:var(--primary);background:#eef6f1;border-radius:8px;padding:4px}
.hl-report-row span{color:var(--muted);min-width:74px}
.hl-report-row b{color:#12291f;font-weight:700}
.ai-shell{position:fixed;left:0;right:0;top:118px;bottom:64px;z-index:25;background:#f6f9f7;display:flex;flex-direction:column}
.ai-shell .hl-tabs{flex:none;margin:0;padding:2px 6px 0;background:#fff}
.ai-shell .sr-hint{flex:none;padding:10px 14px 0;margin:0}
.ai-shell .sr-alert{flex:none;margin:10px 14px 0}
.ai-shell .ai-chat{flex:1;min-height:0;padding:10px 12px 12px}
.ai-shell .ai-chat-area{flex:1;max-height:none;min-height:0}
.ai-shell .ai-chat-form{position:static;margin-top:10px}


/* ============================================================
   v99 (2026-10-21, আতিক ভাই) — হিস্ট্রি কার্ড: নম্বর উপরে,
   সার্ভিস নিচে, আইডি কপি-চিপ; ডিটেইলে অপারেটর সারি;
   কমপ্লেইন অটো-তথ্য বক্স। কার্ড বড় ও প্রফেশনাল।
   ============================================================ */
.sr-hist2-card{padding:16px;gap:14px;border-radius:20px box-shadow: 0 2px 8px rgba(16,40,32,.05);}
.sr-hist2-ic{width:50px;height:50px;border-radius:16px}
.sr-hist2-ic svg{width:26px;height:26px}
.sr-hist2-num{display:flex;align-items:center;gap:8px;font-size:15.5px;color:#12291f}
.sr-hist2-num .sr-op-ic{width:22px;height:22px;box-shadow:0 1px 4px rgba(15, 23, 20, .18),0 0 0 1.5px #fff}
.sr-hist2-num .sr-op-ic span{font-size:9px}
.sr-hist2-txnid{display:inline-flex;align-items:center;gap:5px;width:fit-content;background:#f2f7f3;border:1px dashed #c8dccd;border-radius:8px;padding:3px 8px;font-size:12px;color:var(--primary);font-weight:700;letter-spacing:.2px;margin-top:5px;cursor:pointer}
.sr-hist2-txnid .material-symbols-rounded{font-size:14px}
.sr-txnid-v{cursor:pointer}
.sr-txnid-v .material-symbols-rounded{font-size:15px;color:var(--primary);vertical-align:-3px;margin-left:6px}
.sr-op-v{display:inline-flex;align-items:center;gap:8px}
.sr-complain-auto{display:flex;gap:9px;align-items:flex-start;background:#f2f8f4;border:1px solid #e0eee4;border-radius:12px;padding:11px 12px;margin-top:14px;font-size:12.5px;line-height:1.55;color:#40544a}
.sr-complain-auto .material-symbols-rounded{color:var(--primary);font-size:19px;flex:none}


/* ============================================================
   v100 (2026-10-21, আতিক ভাই) — অপারেটর লোগো টাইলের নিচে
   (শুধু ছবি), রিপোর্ট কার্ড: সমস্যা-বক্স + ওভারফ্লো ফিক্স।
   ============================================================ */
.sr-hist2-left{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none}
.sr-hist2-left .sr-op-ic{width:27px;height:27px}
.sr-op-only img{padding:2px}
.hl-report-problem{background:#fdf6ec;border:1px solid #f3e3c2;border-radius:12px;padding:10px 12px;margin-top:12px}
.hl-report-problem span{font-size:11.5px;font-weight: 700;color:#a86e00;letter-spacing:.3px}
.hl-report-problem p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:#4a3a14;overflow-wrap:anywhere}
.hl-report-row{align-items:center}
.hl-report-row .material-symbols-rounded{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;font-size:17px}
.hl-report-row span{flex:none}
.hl-report-row b{min-width:0;overflow-wrap:anywhere;word-break:break-all}
.hl-report-msg{overflow-wrap:anywhere}
.hl-report-form textarea{box-sizing:border-box;max-width:100%}
.sr-complain-auto{box-sizing:border-box;max-width:100%}
form[id^="complain-form"] textarea,form[id^="complain-form"] input{box-sizing:border-box;max-width:100%}


/* ============================================================
   v101 (2026-10-21, আতিক ভাই) — আলাদা অফার সেকশন + একাধিক
   নম্বরে রিচার্জ বিল্ডার/কনফার্ম/রেজাল্ট।
   ============================================================ */
.of-card-price{font-weight: 700;color:var(--primary);font-size:16px;white-space:nowrap}
.sr-multi-toggle{margin-top:14px}
.sr-multi-toggle .material-symbols-rounded{font-size:19px;vertical-align:-4px}
#multiWrap{margin-top:12px;background:#fff;border:1px solid #e6ede9;border-radius:16px;padding:14px}
.sr-multi-row{display:flex;align-items:flex-start;gap:8px;border:1px solid #e3eae6;border-radius:12px;padding:10px;margin-bottom:10px;background:#fbfdfc}
.sr-multi-fields{flex:1;display:grid;grid-template-columns:1fr 92px;gap:8px;min-width:0}
.sr-multi-op{grid-column:1/-1;font-size:12px;font-weight:700;color:var(--primary);min-height:15px}
.sr-multi-del{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #f2d7d7;background:#fdf1f1;color:#c0392b;font-size:15px;line-height:1;cursor:pointer}
.sr-multi-total{display:flex;justify-content:space-between;align-items:center;padding:10px 2px;font-size:14px}
.sr-multi-total b{font-size:16px;color:var(--primary)}
.sr-multi-item{border:1px solid #e6ede9;border-radius:12px;padding:11px 12px;margin-bottom:10px;background:#fbfdfc}
.sr-multi-item-head{display:flex;align-items:center;gap:8px}
.sr-multi-item-head .sr-op-logo,.sr-multi-item-head .sr-op-mark{width:26px;height:26px}
.sr-multi-item-head span{color:#7b8a83;font-size:12.5px;font-weight:600}
.sr-multi-item-amt{margin-left:auto;color:var(--primary)}
.sr-multi-item-sub{display:flex;justify-content:space-between;font-size:13px;color:#5d6f67;padding-top:6px}
.sr-multi-res{display:flex;align-items:center;gap:10px;border:1px solid #e6ede9;border-radius:12px;padding:11px 12px;margin-bottom:9px;background:#fbfdfc}
.sr-multi-res-ic{font-size:22px}
.sr-multi-res.is-ok .sr-multi-res-ic{color:#1a9e6b}
.sr-multi-res.is-fail .sr-multi-res-ic{color:var(--error)}
.sr-multi-res-tx{flex:1;display:flex;flex-direction:column;min-width:0}
.sr-multi-res-tx span{font-size:12.5px;color:#7b8a83}
button.sr-more-grid-item{border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:center}


/* ============================================================
   v102 (2026-10-21, আতিক ভাই) — রিচার্জ ফর্ম সারি-ভিত্তিক
   (প্রতি সারিতে অপারেটর পিকার + নম্বর + অ্যামাউন্ট, "+"-এ
   নতুন সারি) + অফার কার্ডে রেগুলার মূল্য/কমিশন।
   ============================================================ */
.rc-row{background:#fff;border:1px solid #e6ede9;border-radius:16px;padding:12px;margin-bottom:10px box-shadow: 0 10px 24px -14px rgba(11,46,38,.16);}
.rc-row-line{display:flex;align-items:center;gap:8px}
.rc-row-op{display:flex;align-items:center;gap:7px;flex:none;max-width:44%;border:1px solid #e0e9e4;background:#f4f9f6;border-radius:12px;padding:6px 9px;cursor:pointer;font:inherit}
.rc-row-op-logo{display:flex;align-items:center}
.rc-row-op-logo .sr-op-logo,.rc-row-op-logo .sr-op-mark{width:24px;height:24px}
.rc-row-op-logo .sr-op-logo-ph{width:24px;height:24px;border-radius:50%;background:#dde7e1;display:block}
.rc-row-op-name{font-size:13px;font-weight:700;color:#20443a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-row-del{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #f2d7d7;background:#fdf1f1;color:#c0392b;font-size:15px;line-height:1;cursor:pointer box-shadow: 0 2px 6px rgba(11,46,38,.12);}
.rc-row-amt{display:flex;align-items:center;gap:6px;margin-top:10px;border:1px solid #e0e9e4;border-radius:12px;padding:9px 12px;background:#fbfdfc}
.rc-row-amt .rc-taka{font-weight: 700;color:var(--primary)}
.rc-row-amount{flex:1;border:0;background:none;font:inherit;font-size:16px;font-weight:700;color:#17352c;min-width:0}
.rc-row-amount:focus{outline:none}
.rc-add-row{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:1.5px dashed #bcd6c9;background:#f4faf7;color:var(--primary);border-radius:12px;padding:11px;font:inherit;font-weight: 700;font-size:14px;cursor:pointer;margin:2px 0 12px}
.rc-add-row .material-symbols-rounded{font-size:19px}
.rc-total-row{display:flex;justify-content:space-between;align-items:center;padding:8px 2px 0;font-size:14px;color:#40544b}
.rc-total-row b{font-size:16px;color:var(--primary)}
.of-card-valid{font-size:12.5px;color:#7b8a83;font-weight:600;white-space:nowrap}

/* ===== v103 (2026-10-21, আতিক ভাই): রিচার্জ রিডিজাইন — গোল অপারেটর
   আইকন, প্রতি-কার্ড অ্যামাউন্ট সাজেশন; অফার সার্চ+সর্ট আইকন; কার্ড
   স্পেসিং স্ট্যান্ডার্ড; কমিশন একই লাইনে ===== */
.rc-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 2px 12px}
.rc-head-label{font-size:15px;font-weight: 700;color:var(--primary-dark)}
.rc-head-bal{font-size:11.5px;color:#6d7f78}
.rc-head-bal b{color:var(--primary);font-size:12.5px}
.rc-row{padding:14px;margin-bottom:10px;border-radius:16px;box-shadow: 0 10px 24px -14px rgba(11,46,38,.16);}
.rc-row-top{gap:10px}
.rc-op-circ{width:46px;height:46px;border-radius:50%;border:1px solid #e2ece7;background:#f4f8f6;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.rc-op-circ:active{transform:scale(.96)}
.rc-op-circ-in{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.rc-op-circ-in img{width:100%;height:100%;object-fit:contain;padding:7px}
.rc-op-circ-ph{font-size:22px;color:#9db4aa}
.rc-row-num{border-bottom:none}
.rc-row-num input{font-size:16px;font-weight:700;letter-spacing:.3px}
.rc-row-opname{display:block;font-size:11px;font-weight:700;color:var(--primary);min-height:13px;margin-top:1px}
.rc-row-chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.rc-row-chips .sr-quick-chip{flex:1;min-width:56px;padding:7px 4px;font-size:13px}
.rc-total-row{margin-top:12px}
.rc-add-row{margin-bottom:0}
.of-tools{display:flex;align-items:stretch;gap:8px;margin-bottom:12px}
.of-tools .of-search{flex:1;margin:0}
.of-sort-btn{width:46px;flex:none;border:1.5px solid #dfe9e4;border-radius:12px;background:#fff;color:#5b7268;display:flex;align-items:center;justify-content:center;cursor:pointer;transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)}
.of-sort-btn .material-symbols-rounded{font-size:22px}
.of-sort-btn.is-on{background:var(--primary);border-color:var(--primary);color:#fff}
.of-card-sub{display:block;font-size:11px;font-weight:600;color:#84968d;margin-top:2px}
.of-card-comm{font-size:12px;font-weight:600;color:#5b7268;white-space:nowrap}
.of-card-comm b{color:var(--primary);font-size:13px}
.drv-offer-list{gap:10px}
.drv-offer-list .drv-card{margin-bottom:0}

/* ===== v104 (2026-10-21, আতিক ভাই): রিচার্জ সারি এক লাইনে —
   গোল অপারেটর + নম্বর + অ্যামাউন্ট; সাজেশন নিচে ===== */
.rc-row{padding:12px 12px 11px box-shadow: 0 10px 24px -14px rgba(11,46,38,.16);}
.rc-row-line2{display:flex;align-items:center;gap:9px}
.rc-row-line2 .rc-op-circ{width:42px;height:42px box-shadow: inset 0 0 0 2px #fff;}
.rc-row-line2 .rc-row-num{flex:1;min-width:0}
.rc-row-amt2{display:flex;align-items:center;gap:3px;flex:none;width:112px;height:44px;padding:0 10px;border:1.5px solid #e2ece7;border-radius:12px;background:#fbfdfc}
.rc-row-amt2:focus-within{border-color:#bfe0d2;background:#fff box-shadow: 0 0 0 3px rgba(16,96,80,.10);}
.rc-taka2{color:var(--primary);font-weight: 700;font-size:15px}
.rc-row-amt2 input{border:none;background:transparent;outline:none;width:100%;min-width:0;font-size:15px;font-weight:700;color:#123f33;font-family:inherit}
.rc-row-line2 .rc-contact-btn{width:36px;height:36px;border-radius:8px}
.rc-row-line2 .rc-row-del{position:static;width:26px;height:26px;margin-left:-2px}
.of-card-comm{margin-left:auto}

/* ===== v105 (2026-10-21, আতিক ভাই): রিচার্জ পেজ মাস্টার রিডিজাইন —
   রেসপন্সিভ এক-লাইন সারি, নিয়ন্ত্রিত সাইজ, সামারি কার্ড ===== */
#rechargeForm{max-width:560px;margin:0 auto}
.rc-head-row{margin:4px 2px 14px}
.rc-row{position:relative;padding:14px 14px 12px;margin-bottom:12px;border-radius:16px;border:1px solid #e7efec;background:#fff;box-shadow: 0 10px 24px -14px rgba(11,46,38,.16);}
.rc-row-line2{display:flex;align-items:center;gap:8px}
.rc-row-line2 .rc-op-circ{width:40px;height:40px;border-radius:50%;border:1.5px solid #e2ece7;background:#f2f7f4;box-shadow:inset 0 0 0 2px #fff}
.rc-op-circ-in img{padding:6px}
.rc-row-num{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}
.rc-row-mobile{border:none!important;background:transparent!important;box-shadow:none!important;outline:none;width:100%;min-width:0;padding:0;font-size:15.5px;font-weight:700;letter-spacing:.2px;color:#123f33;font-family:inherit;-webkit-appearance:none;appearance:none}
.rc-row-mobile::placeholder{color:#98A2B3;font-weight:400}
.rc-row-opname{font-size:10.5px;line-height:1.25;min-height:13px}
.rc-row-amt2{width:98px;height:42px;border-radius:12px;border:1.5px solid #dce8e1;background:#f7faf8;padding:0 9px;gap:2px;transition:border-color .15s ease,background .15s ease}
.rc-row-amt2:focus-within{border-color:var(--primary);background:#fff;box-shadow: 0 0 0 3px rgba(16,96,80,.10);}
.rc-taka2{font-size:14px}
.rc-row-amt2 input{font-size:14.5px}
.rc-row-amt2 input::placeholder{color:#98A2B3;font-weight:400;font-size:12.5px}
.rc-row-line2 .rc-contact-btn{width:32px;height:32px;border-radius:8px;background:transparent;color:#7d948a;flex:none}
.rc-row-line2 .rc-contact-btn:active{background:#eef5f1}
.rc-row-del{position:absolute;top:-8px;right:-6px;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid #e3ece7;color:#8aa298;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow: 0 2px 6px rgba(11,46,38,.12);cursor:pointer;padding:0}
.rc-row-chips{display:flex;gap:7px;margin-top:12px}
.rc-row-chips .sr-quick-chip{flex:1 1 0;min-width:0;height:37px;padding:0 4px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1.5px solid #e2ece7;background:#fbfdfc;font-size:13.5px;font-weight:700;color:#33544a;cursor:pointer;transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease)}
.rc-row-chips .sr-quick-chip:active{transform:scale(.96)}
.rc-row-chips .sr-quick-chip.is-picked{background:var(--primary);border-color:var(--primary);color:#fff}
.rc-add-row{height:50px;border-radius:12px;margin-bottom:14px;font-size:14.5px}
.rc-sum{background:#fff;border:1px solid #e7efec;border-radius:16px;padding:13px 15px;margin-bottom:14px;box-shadow: 0 8px 20px -14px rgba(11,46,38,.14);}
.rc-sum-row{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:600;color:#5b7268}
.rc-sum-row b{font-size:17px;font-weight: 700;color:var(--primary-dark)}
.rc-sum-sub{margin-top:6px;padding-top:8px;border-top:1px dashed #e2ece7;font-size:12px}
.rc-sum-sub span:last-child{font-weight:700;color:var(--primary)}
.rc-sum-sub span.is-neg{color:#c0392b!important}
.rc-next{height:54px;border-radius:16px;font-size:16.5px; box-shadow: 0 14px 26px -12px rgba(16,96,80,.5);}
@media (max-width: 360px){
.rc-row{padding:12px 11px 11px box-shadow: 0 10px 24px -14px rgba(11,46,38,.16);}
.rc-row-line2{gap:6px}
.rc-row-line2 .rc-op-circ{width:36px;height:36px box-shadow: inset 0 0 0 2px #fff;}
.rc-row-mobile{font-size:14.5px; box-shadow: none!important;}
.rc-row-amt2{width:86px;height:40px;padding:0 7px}
.rc-row-amt2 input{font-size:13.5px}
.rc-row-line2 .rc-contact-btn{width:28px;height:28px}
}

/* ===== v106 (2026-10-21, আতিক ভাই): চিপের min-height ফিক্স,
   ফোকাস-রিং, ব্যালেন্স পিল, সামারি টগল ===== */
.rc-row-chips .sr-quick-chip{min-height:37px}
.rc-row{transition:border-color .18s ease,box-shadow .18s ease box-shadow: 0 10px 24px -14px rgba(11,46,38,.16);}
.rc-row:focus-within{border-color:#a9d6c3;box-shadow: 0 14px 28px -14px rgba(11,46,38,.22);}
.rc-head-bal{background:#e9f4ee;border-radius:999px;padding:5px 11px}
.rc-sum[hidden]{display:none}
.rc-add-row{font-weight:700}
.rc-next{box-shadow: 0 14px 26px -12px rgba(16,96,80,.5);}

/* ===== v107 (2026-10-21, আতিক ভাই): অ্যামাউন্ট বক্স স্লিক,
   × প্রথম কার্ডে নয় ===== */
.rc-row-del[hidden]{display:none!important}
.rc-row-amt2{height:40px;width:104px;border-radius:12px;background:#f3f7f5;border:1px solid #e0eae4;padding:0 10px;gap:3px}
.rc-taka2{font-size:13px;font-weight:700;color:#5b7268}
.rc-row-amt2 input{font-size:15px;font-weight: 700;color:var(--primary-dark)}
.rc-row-amt2 input::placeholder{font-size:12px;font-weight:400}
.rc-row-amt2:focus-within{background:#fff;border-color:var(--primary);box-shadow: 0 0 0 3px rgba(16,96,80,.10);}
.rc-row-chips .sr-quick-chip{height:38px;min-height:38px;border-radius:12px}
@media (max-width: 360px){.rc-row-amt2{width:92px;height:38px}}

/* ===== v108 (2026-10-21, আতিক ভাই): কার্ডে দুই বর্ডার-সেকশন —
   উপরে নম্বর, নিচে অ্যামাউন্ট; অফার কমিশন এক লাইনে ডানে ===== */
.rc-field{display:flex;align-items:center;gap:10px;height:54px;padding:0 12px;border:1.5px solid #e0eae4;border-radius:12px;background:#fbfdfc;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.rc-field:focus-within{border-color:var(--primary);background:#fff;box-shadow: 0 0 0 3px rgba(16,96,80,.10);}
.rc-field-num .rc-op-circ{width:38px;height:38px}
.rc-field-amt{margin-top:10px}
.rc-field-amt .rc-taka2{font-size:17px;font-weight: 700;color:var(--primary)}
.rc-field-amt input{border:none;background:transparent;outline:none;width:100%;min-width:0;font-size:16px;font-weight:700;color:#123f33;font-family:inherit}
.rc-field-amt input::placeholder{color:#98A2B3;font-weight:400;font-size:14px}
.rc-row{padding:12px box-shadow: 0 10px 24px -14px rgba(11,46,38,.16);}
.rc-row-chips{margin-top:10px}
.of-card .drv-card-foot{display:flex;align-items:center;gap:10px}
.of-card .drv-card-prices{flex:1 1 auto;width:auto}

/* ===== v109 (2026-10-21, আতিক ভাই): রিচার্জ পেজ পুরো সাদা,
   বাটনের গ্লো বাদ, কন্টাক্ট শুধু আইকন, নম্বর ফিল্ডে গ্লো নয় ===== */
html:has(#rechargeForm),body:has(#rechargeForm),.app-shell:has(#rechargeForm),main:has(#rechargeForm){background:#fff}
.rc-next{box-shadow: 0 14px 26px -12px rgba(16,96,80,.5);}
.rc-add-row{box-shadow:none}
.rc-row{box-shadow: 0 10px 24px -14px rgba(11,46,38,.16);}
.rc-field-num:focus-within{border-color:#e0eae4;background:#fbfdfc;box-shadow:none}
.rc-field-num .rc-contact-btn{background:transparent!important;border:none!important;box-shadow:none!important;width:34px;height:34px;color:#5b7268}
.rc-sum{box-shadow: 0 8px 20px -14px rgba(11,46,38,.14);}

/* ============================================================
   v115 (2026-10-22, আতিক ভাই) — লেভেল পেজ (রেজিস্ট্রেশন ধাপ ৩):
   পুরো পেজ পিওর হোয়াইট, ফ্ল্যাট মিনিমাল কর্পোরেট — সবুজ টিন্ট,
   রঙিন শ্যাডো ও কার্ডের ভেতর কার্ড নয়। বটম শিট শুধু লেভেল
   সিলেক্ট করার পরে আসে (JS display টগল)। সুবিধা একটাই বক্সে
   পয়েন্ট-তালিকা (হেয়ারলাইন ডিভাইডার, আলাদা রো-কার্ড নয়)।
   ============================================================ */

/* পেজ শেল পুরো সাদা */
.app-shell.sr-flat-white{background:#ffffff}
.app-shell.sr-flat-white .app-main{background:#ffffff}

/* এই পেজের সব কার্ড/সেকশন ফ্ল্যাট — হেয়ারলাইন বর্ডার, ছায়া নয় */
.sr-level-page .sr-card,
.sr-level-page .sr-reg-sec{border:1px solid #e3e9e6;border-radius:16px;box-shadow:none;background:#ffffff}
.sr-level-page .sr-reg-rows{border-color:#e3e9e6}
.sr-level-page .sr-reg-row + .sr-reg-row{border-top:1px solid #eef1ef}

/* সেকশন আইকন — সাদা চিপ, হেয়ারলাইন বর্ডার, সবুজ আইকন */
.sr-level-page .sr-reg-ic,
.sr-level-page .sr-reg-ic-soft{background:#ffffff;border:1px solid #e3e9e6;color:var(--primary)}

/* সিলেক্ট ইনপুট ফ্ল্যাট */

/* খালি অবস্থা — হালকা, ফ্ল্যাট */
.sr-level-page .sr-level-empty{background:#ffffff;border:1.5px dashed #d8e0db}
.sr-level-page .sr-level-empty-ic{background:#ffffff;border:1px solid #e3e9e6;color:var(--primary)}

/* নির্বাচিত লেভেল: সাব-কার্ডের বাক্স ভেঙে একই সমতলে */
.sr-level-page .sr-level-subcard{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.sr-level-page .sr-level-ic{background:var(--primary);box-shadow:none;border-radius:12px}
.sr-level-page .sr-level-badge{background:#eef4f1;color:#33524a}
.sr-level-page .sr-level-subcard .sr-level-feebox{border-top:1px solid #eef1ef;margin-top:12px;padding-top:12px;flex-basis:100%;justify-content:flex-start}
.sr-level-page .sr-level-feelabel{font-size:13px;color:var(--muted);font-weight:600}

/* সুবিধা — এক বক্সে পয়েন্ট তালিকা */
.sr-level-page .sr-level-benefits-title{font-size:13px;font-weight:700;letter-spacing:0;color:#33524a;margin:16px 0 4px}
.sr-level-page .sr-level-benefits{display:block}
.sr-level-page .sr-level-benefits li{background:transparent;border:0;border-bottom:1px solid #eef1ef;border-radius:0;box-shadow:none;padding:10px 0;gap:10px;align-items:flex-start}
.sr-level-page .sr-level-benefits li:last-child{border-bottom:0;padding-bottom:2px}
.sr-level-page .sr-level-benefits li .material-symbols-rounded{width:auto;height:auto;background:transparent;border-radius:0;font-size:19px;color:var(--primary);margin-top:1px}
.sr-level-page .sr-level-benefits li b{font-size:14px;font-weight:700;color:#1c2b26;display:block;line-height:1.45}
.sr-level-page .sr-level-benefits li small{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:1px}

/* বটম শিট — ফ্ল্যাট, নিরপেক্ষ হালকা ছায়া */
.sr-level-page .sr-level-sheet{box-shadow:0 -6px 24px rgba(15, 23, 20, .08);border-top:1px solid #e3e9e6;border-radius:16px 16px 0 0}
.sr-level-page .sr-sheet-fee{background:#ffffff;border:1px solid #e3e9e6}
.sr-level-page .sr-sheet-fee-ic{background:#ffffff;border:1px solid #e3e9e6;color:var(--primary)}

/* নোটিশ/ভিডিও ফ্ল্যাট */
.sr-level-page .sr-reg-notice{background:#ffffff;border:1px solid #e3e9e6;box-shadow:none}
.sr-level-page .sr-reg-video{box-shadow:none;border-color:#e3e9e6}

/* ============================================================
   v116 (2026-10-22, আতিক ভাই) — লেভেল পেজ ফ্ল্যাট কর্পোরেট:
   কার্ডের স্তূপ নয় — সাদা পেজে সেকশন, হেয়ারলাইন ডিভাইডার,
   রঙ শুধু যেখানে দরকার (বাটন, আইকন, অ্যাকসেন্ট)। বটম শিট
   এক লাইনের সামারি + বাটন। v115-এর পেজ-নিয়ম এখানে প্রতিস্থাপিত।
   ============================================================ */

/* সেকশন = বাক্স নয়, হেয়ারলাইন দিয়ে আলাদা */
.sr-level-page .sr-card,
.sr-level-page .sr-reg-sec{border:0;border-bottom:1px solid #ecefec;border-radius:0;box-shadow:none;background:#ffffff;padding:20px 2px;margin-bottom:0}
.sr-level-page .sr-reg-sub{margin:14px 2px 2px}

/* সেকশন হেড — বাক্সহীন আইকন + শিরোনাম */
.sr-level-page .sr-reg-sec-head{margin-bottom:14px;gap:9px}
.sr-level-page .sr-reg-sec-head h3{font-size:15.5px;font-weight:700;color:var(--text)}
.sr-level-page .sr-reg-ic,
.sr-level-page .sr-reg-ic-soft{width:auto;height:auto;background:transparent;border:0;border-radius:0;color:var(--primary)}
.sr-level-page .sr-reg-ic .material-symbols-rounded{font-size:21px}

/* অ্যাকাউন্ট তথ্য — ভেতরের বাক্স নয়, সারি + হেয়ারলাইন */
.sr-level-page .sr-reg-rows{border:0;border-radius:0}
.sr-level-page .sr-reg-row{padding:10px 0}
.sr-level-page .sr-reg-row + .sr-reg-row{border-top:1px solid #f0f2f0}
.sr-level-page .sr-reg-row > span{color:var(--muted);font-size:13.5px}
.sr-level-page .sr-reg-row > b{font-size:14.5px;color:var(--text)}

/* সিলেক্ট — একটাই পরিষ্কার ফিল্ড */
.sr-level-page .sr-input{border:1px solid #D0D5DD;border-radius:12px;padding:13px 14px;font-size:15px;background:#ffffff}

/* খালি অবস্থা — বাক্স নয়, হালকা কেন্দ্রীভূত লেখা */
.sr-level-page .sr-level-empty{background:transparent;border:0;padding:22px 8px 8px}
.sr-level-page .sr-level-empty-ic{width:auto;height:auto;background:transparent;border:0;color:#b7c4be;margin-bottom:8px}
.sr-level-page .sr-level-empty-ic .material-symbols-rounded{font-size:34px}
.sr-level-page .sr-level-empty b{font-size:15px;color:#33524a}
.sr-level-page .sr-level-empty p{font-size:13px}

/* নির্বাচিত লেভেল — হেড + ফি লাইন */
.sr-level-page .sr-level-ic{border-radius:8px}
.sr-level-page .sr-level-feeline{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #eef1ef;margin-top:14px;padding-top:14px}
.sr-level-page .sr-level-feelabel{font-size:13.5px;font-weight:600;color:var(--muted)}
.sr-level-page .sr-level-feebox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* বটম শিট — এক লাইনের সামারি + বাটন */
.sr-level-page .sr-level-sheet{padding:16px 16px calc(14px + env(safe-area-inset-bottom)) box-shadow: 0 -6px 24px rgba(15,23,20,.08);}
.sr-level-page .sr-sheet-sum{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.sr-level-page .sr-sheet-sum-label{font-size:13.5px;font-weight:600;color:var(--muted)}
.sr-level-page .sr-sheet-fee-vals .sr-level-now{font-size:19px}
.sr-level-page .sr-level-sheet .sr-btn-block{border-radius:12px;padding:14px;font-size:16px}
.sr-level-page .sr-save-line,
.sr-level-page .sr-secure-line{justify-content:center;font-size:12.5px;margin-top:10px}
.sr-level-page .sr-sheet-spacer{height:172px}
.sr-level-page .sr-level-subcard .sr-level-feebox{border-top:0;margin-top:0;padding-top:0;background:transparent}

/* ==== v120 — ডোনাট বড় + সাদা গ্যারান্টি (2026-10-22, আতিক ভাই) ====
   ডোনাট: বড় রিং (190px), মাঝে বড় অ্যামাউন্টের জায়গা; লম্বা
   অ্যামাউন্টে ছোট ফন্টের ক্লাস। লেআউট: ডোনাট উপরে কেন্দ্রে,
   লেজেন্ড নিচে পুরো প্রস্থে। */
.sr-dash-donut-flex { flex-direction: column; align-items: center; }
.sr-donut-svg { width: 190px; height: 190px; }
.sr-donut-total-lb { font-size: 12.5px; }
.sr-donut-total-v { font-size: 21px; font-weight: 700; fill: var(--text, #15211d); font-family: inherit; }
.sr-donut-total-v-sm { font-size: 16.5px; }
.sr-donut-legend { width: 100%; margin-top: 14px; }

/* ==== v122 — অবতার কনট্রাস্ট + মাস লেবেল (2026-10-22) ====
   অবতার: হালকা কার্ডে সাদা আদ্যক্ষর পড়া যাচ্ছিল না — এখন গাঢ়
   সবুজ বৃত্তে সাদা লেখা। সবুজ হেডারে মাসের লেখা পুরো সাদা। */
.prof-avatar { background: var(--primary, #106050); color: #fff; border: 3px solid #fff; }
.sr-green-head .sr-head-month { color: #fff; }

/* ==== v123 — রিচার্জ পেজ প্রফেশনাল পলিশ + ফোকাস-নিরপেক্ষ (2026-10-22, আতিক ভাই) ====
   ইনপুটে লিখলে চারপাশে কোনো রঙ আসবে না — ফোকাসে শুধু নিরপেক্ষ
   হালকা বর্ডার, কোনো সবুজ/শ্যাডো নয়। */
.rc-row:focus-within { border-color: #d5ddd8; box-shadow: 0 14px 28px -14px rgba(11,46,38,.22); }
.rc-field:focus-within { border-color: #d5ddd8; background: #fff; box-shadow: 0 0 0 3px rgba(16,96,80,.10); }
.rc-field-num:focus-within { border-color: #d5ddd8; background: #fff; box-shadow: none; }
.rc-row-mobile:focus, .rc-row-amount:focus { outline: none; box-shadow: none; }
/* গঠন ও টাইপোগ্রাফি — কর্পোরেট শৃঙ্খলা */
.rc-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 12px; }
.rc-head-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--muted, #71827c); text-transform: uppercase; }
.rc-head-bal { background: var(--primary-mist, #f0f7f3); color: var(--text-2, #43564f); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; }
.rc-head-bal b { color: var(--primary-dark, #0b463a); font-variant-numeric: tabular-nums; }
.rc-row { padding: 16px 14px; border-color: #e3eae6; box-shadow: 0 10px 24px -14px rgba(11,46,38,.16);}
.rc-field { height: 56px; border-radius: 12px; }
.rc-row-mobile { font-size: 17px; letter-spacing: 1.2px; font-weight: 600; color: var(--text, #15211d); box-shadow: none!important;}
.rc-row-amount { font-size: 16.5px; font-weight: 600; }
.rc-row-chips { gap: 8px; margin-top: 10px; }
.sr-quick-chip { background: #eef5f1; border: 1px solid transparent; border-radius: 999px; padding: 8px 4px; font-size: 13.5px; font-weight: 700; color: var(--primary-dark, #0b463a); box-shadow: none; }
.sr-quick-chip:active { background: var(--primary-soft, #e7f2ee); }
.rc-add-row { border-color: #cfe0d6; background: #f7faf8; border-radius: 12px; }
.rc-sum { background: var(--primary-mist, #f0f7f3); border: 1px solid #e0ece5; border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 20px -14px rgba(11,46,38,.14);}
.rc-next { height: 54px; border-radius: 12px; font-size: 16.5px; font-weight: 700; margin-top: 14px; box-shadow: 0 14px 26px -12px rgba(16,96,80,.5);}

/* ==== v125 — পেজ-ছাড়ার পপআপ (2026-10-22, আতিক ভাই) ==== */
.sr-leave-overlay { position: fixed; inset: 0; background: rgba(9, 26, 21, .48); z-index: 1200; display: none; align-items: flex-end; justify-content: center; }
.sr-leave-overlay.open { display: flex; }
.sr-leave-sheet { background: #fff; width: 100%; max-width: 520px; border-radius: 20px 20px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(11, 70, 58, .18); animation: srLeaveUp .22s ease; }
@keyframes srLeaveUp { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.sr-leave-title { font-size: 17px; font-weight: 700; color: var(--text, #15211d); }
.sr-leave-body { margin: 8px 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted, #71827c); }
.sr-leave-actions { display: flex; gap: 10px; }
.sr-leave-stay { flex: 1; height: 50px; border: none; border-radius: 12px; background: var(--primary, #106050); color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.sr-leave-go { flex: 1; height: 50px; border: 1.5px solid #d8e0db; border-radius: 12px; background: #fff; color: #b3261e; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }

/* ==== v127 — রিফ্রেশে ফ্ল্যাশ-মুক্ত মসৃণ লোড (2026-10-22, আতিক ভাই) ==== */
.sr-banner-slide { background: #ffffff; }
.sr-banner-slide img { animation: srImgFade .45s ease both; }
@keyframes srImgFade { from { opacity: 0; } to { opacity: 1; } }
/* হিরো: ছবি আসার আগে গাঢ় সবুজ পটভূমি (সাদা ফ্ল্যাশ নয়) */
.ha-hero { background-color: var(--primary-dark, #0b463a); }

/* ==== v129: পেজ-নোটিশ (এডমিন "পেজ নোটিশ" থেকে, সব পেজে একই ডিজাইন) ==== */
.pg-notice { display:flex; gap:10px; align-items:flex-start; background:var(--primary-mist); border:1px solid #dcebe5; border-left:4px solid var(--primary,#106050); border-radius:12px; padding:12px 14px; margin-top:16px; }
.pg-notice-ic { flex:0 0 auto; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--primary-soft, #e7f2ee); color:var(--primary, #106050); }
.pg-notice-tx { font-size:12.5px; line-height:1.65; color:#3c4f49; padding-top:5px; }

/* ==== v131: অপারেটর-বন্ধ (Power Station) — অফ কার্ড ও প্রিমিয়াম নোটিশ শিট ==== */
button.drv-op-card{font:inherit;color:inherit;text-align:center;cursor:pointer;background:#fff}
.op-off-sheet{padding-bottom:28px}
.op-off-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.op-off-logo{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--primary-soft,#e7f2ee);display:flex;align-items:center;justify-content:center;overflow:hidden}
.op-off-logo img{max-width:34px;max-height:34px;object-fit:contain}
.op-off-msg{font-size:14px;line-height:1.75;color:#3c4f49;margin:0;background:var(--primary-mist);border:1px solid #dcebe5;border-left:4px solid var(--primary,#106050);border-radius:12px;padding:12px 14px}

/* v132 — বিল পে: বন্ধ বিলারের সারি (আতিক ভাই)। ক্লিকে নোটিশ শিট খোলে। */
button.bp-biller-row{width:100%;text-align:left;font:inherit;cursor:pointer}

/* v139 (আতিক ভাই): ইউজার ট্যাব আগের পিল স্টাইলে ফেরত (v136-এর মতো) —
   v137-এর ফ্ল্যাট আন্ডারলাইন বাতিল। রঙ/আকৃতি আগের মতোই, শুধু
   অ্যাক্টিভ পিলের গ্লো/শ্যাডো নেই (v139 গ্লো-বন্ধ নিয়ম)। */
.drv-tabs{gap:8px;padding:2px 2px 10px;margin:0 -2px}
.drv-tab{border:1px solid #e5ebe8;border-radius:999px;background:#fff;box-shadow:none;padding:8px 16px;color:#5a6b65}
.drv-tab.is-active{background:var(--primary,#106050);border-color:var(--primary,#106050);color:#fff;box-shadow:none}
.sr-hist2-tabs{gap:8px;padding:2px 0 12px;border-bottom:0}
.sr-hist2-tab{border:1.5px solid #e2ece9;border-radius:999px;background:#fff;box-shadow:none;color:#2c3e39;padding:10px 16px}
.sr-hist2-tab.is-active{background:var(--primary)!important;color:#fff;border-color:var(--primary);box-shadow:none}
.sr-hist2-tab:active{transform:scale(.96)}

/* v139 (আতিক ভাই): বাটন গ্লো বন্ধ — রঙ/গ্রেডিয়েন্ট/আকৃতি/টেক্সট
   অপরিবর্তিত, শুধু সব বাটনের box-shadow নেই। কার্ড/মডাল/শিটের
   শ্যাডো এখানে ছোঁয়া হয়নি। */
.sr-btn,.sr-btn-primary,.sr-btn-outline,.sr-btn-ghost,.sr-btn-danger,.sr-add-bal,.sr-btn-add-bal,button,input[type=submit],input[type=button]{box-shadow:none!important}
.sr-btn-primary:hover,.sr-add-bal:active,.sr-btn-add-bal:active{box-shadow:none!important}
.drv-tab.is-active,.sr-hist2-tab.is-active,.rw-tab.is-active,.tk-txn-tab.is-on{box-shadow:none!important}

/* v140 (আতিক ভাই): পেজ ব্যাকগ্রাউন্ড একদম পিওর সাদা — হেডার/কার্ড/
   বাটনের ডিজাইন অপরিবর্তিত, শুধু পেজের মূল ব্যাকগ্রাউন্ড সাদা,
   কোনো অফ-হোয়াইট টিন্ট বা রঙিন গ্লো-ইমেজ নয়। */
html,body,.app-shell,.app-main,.sr-welcome,.sr-wel{background:#ffffff!important;background-image:none!important}

/* v142 (2026-10-25, আতিক ভাই): v141-এর পেজ-লোড অ্যানিমেশন বাদ — এটাই
   বটম-নেভ ভাঙার রুট কজ ছিল। .app-shell-এ transform-ওয়ালা animation
   (fill both) fixed নেভকে ওই শেলের সাপেক্ষে আটকে দিত — নেভ আর
   স্ক্রিনে fixed থাকত না, সাথে হোম রিফ্রেশে ফ্ল্যাশ। অ্যানিমেশন ছাড়া
   পেজ সাথে সাথে রেন্ডার হয়; শিট/মোডালের নিজস্ব ট্রানজিশন অপরিবর্তিত।
   সতর্কতা: কোনো ancestor-এ transform/filter-ওয়ালা animation/fill
   আর বসানো যাবে না — fixed/sticky এলিমেন্ট ভেঙে যায়। */
.ab2-hero{padding:20px 18px 18px;border-radius:16px;box-shadow:0 8px 22px rgba(16,96,80,.22)}
.ab2-hero::before{width:180px;height:180px;top:-90px;right:-60px}
.ab2-hero::after{width:120px;height:120px;bottom:-60px;left:-50px}
.ab2-check{width:52px;height:52px;border-width:2px}
.ab2-check .material-symbols-rounded{font-size:30px}
.ab2-title{margin-top:10px;font-size:17px}
.ab2-amt{font-size:28px;margin-top:6px}
.ab2-pill{margin-top:10px;padding:6px 12px}

/* ================= v142 (2026-10-25, আতিক ভাই) =================
   ১. ফিল্ড: বর্ডার স্পষ্ট কালো, ভিতর সাদা — সব জায়গায় একই রুল।
      (components.css-এর হালকা বর্ডারকে ওভাররাইড করে; radius অপরিবর্তিত।)
   ২. অফার কমিশন পিল: আগের মতো হালকা সবুজ (হলুদ/গোল্ড বাতিল)।
   ৩. ডিটেইল পেজে সেকশনের মাঝে হালকা স্পেস (১৬px রিদম)।
   ৪. কনফার্ম/সাকসেস পপআপ (কেন্দ্রীয় মোডাল, প্রফেশনাল)। */
.sr-input,.sr-select,.sr-textarea{border:1px solid #d0d5dd!important;background:#ffffff!important}
.sr-input:focus,.sr-select:focus,.sr-textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(16,96,80,.12)!important}
.drv-searchbar,.of-search{border:1px solid #d0d5dd!important;background:#ffffff!important}
.drv-searchbar:focus-within{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(16,96,80,.12)!important}
.rc-row{border:1px solid #d0d5dd!important;background:#ffffff!important}
.rc-row-amt2{border:1px solid #d0d5dd!important;background:#ffffff!important}
.rc-row-amt2:focus-within{border-color:var(--primary)!important;background:#ffffff!important;box-shadow:0 0 0 3px rgba(16,96,80,.12)!important}
.drv-card-comm{background:linear-gradient(135deg,#e9f5ee,#d8ece2)!important;border:1px solid #cfe6da!important;color:#0e6b4f!important;box-shadow:0 4px 10px -6px rgba(16,96,80,.25)!important}
.drv-card-comm b{color:var(--primary)!important}
.of-card-comm{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#e9f5ee,#d8ece2);border:1px solid #cfe6da;color:#0e6b4f;border-radius:999px;padding:4px 11px}
.of-card-comm b{color:var(--primary)}
.drv-hero{margin-bottom:16px!important}
.drv-prop,.drv-form,.drv-note-card,.drv-points-banner{margin-top:16px!important}
.drv-offer-list{gap:12px!important}
.sr-pop-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,30,24,.55);display:none;align-items:center;justify-content:center;padding:20px}
.sr-pop-overlay.open{display:flex}
.sr-pop-sheet{background:#ffffff;border:1px solid #E5E7EB;border-radius:20px;width:100%;max-width:360px;padding:24px 20px 20px;text-align:center;box-shadow:0 12px 32px rgba(16,24,40,.12)}
.sr-pop-icon{width:60px;height:60px;border-radius:50%;background:#e9f5ee;border:1.5px solid #cfe6da;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--primary)}
.sr-pop-icon .material-symbols-rounded{font-size:32px}
.sr-pop-title{font-size:17px;font-weight: 700;color:#122019;margin:0 0 6px}
.sr-pop-sub{font-size:13.5px;line-height:1.6;color:#5b7268;margin:0 0 14px}
.sr-pop-notice{font-size:14px;line-height:1.7;color:var(--text-2);margin:0 0 16px}
.sr-pop-status{display:inline-block;font-size:12px;font-weight:700;color:#0e6b4f;background:#e9f5ee;border:1px solid #cfe6da;border-radius:999px;padding:4px 14px;margin-bottom:14px}
.sr-pop-rows{text-align:left;border-top:1px solid #eef4f2;margin:0 0 16px}
.sr-pop-row{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid #f1f5f4;font-size:14px}
.sr-pop-row .k{color:#5b7268}
.sr-pop-row .v{font-weight:700;color:#122019;text-align:right}
.sr-pop-actions{display:flex;gap:10px}
.sr-pop-actions .sr-btn{flex:1}

/* v148 (2026-10-25, আতিক ভাই — ৩ ফিক্স; v147 ব্লক বাতিল, সরানো):
   ১. রিচার্জ নম্বরে ব্রাউজারের নীল দাগ (অটোফিল/সিলেকশন) বন্ধ —
      শুধু #rechargeForm-এর ইনপুটে, অন্য পেজে প্রভাব নেই।
   ২. পিন-লগইন নতুন কাঠামো (sr-pinlogin-*) — নম্বর ফিক্সড ডিসপ্লে
      ওপরে, নিচে শুধু PIN কার্ড; পুরনো sr-auth-* নিয়মে হাত নেই।
   ৩. হিস্ট্রি কর্ণার-ব্যাজ — টাইলের নিচে নয়, কর্ণারে ওভারল্যাপ
      করে গোল লোগো (আগের মতো)। */
#rechargeForm .rc-row-mobile:-webkit-autofill,#rechargeForm .rc-row-amount:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:#123f33}
#rechargeForm .rc-row-mobile::selection,#rechargeForm .rc-row-amount::selection{background:rgba(16,96,80,.14);color:#123f33}
#rechargeForm .rc-row-mobile,#rechargeForm .rc-row-amount{caret-color:var(--primary)}
.sr-pinlogin-title{text-align:center;font-size:21px;font-weight:700;margin:8px 0 6px;color:var(--text)}
.sr-pinlogin-sub{text-align:center;color:var(--muted);font-size:14.5px;margin:0 0 18px;line-height:1.5}
.sr-pinlogin-num{background:#fff;border:1px solid #e5ebe7;border-radius:16px;padding:14px 16px;text-align:center;box-shadow:0 8px 24px -16px rgba(11,46,38,.18);margin:0 0 14px}
.sr-pinlogin-num span{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.sr-pinlogin-num b{font-size:20px;letter-spacing:.5px;font-variant-numeric:tabular-nums;color:var(--primary-dark)}
/* (2026-10-31 v3 — সেশন-PIN ইউনিফাইড কার্ড): একটাই সাদা-প্রাধান্য কার্ড —
   টাইটেল + উপরে ফিক্সড নম্বর-স্ট্রিপ + PIN-ফর্ম। কর্পোরেট-ক্লিন: ফ্ল্যাট
   রঙ + 1px বর্ডার, নতুন শ্যাডো নয়; ব্র্যান্ড-সবুজ শুধু অ্যাকসেন্টে। */
.sr-pinlogin-card{background:#fff;border:1px solid #e5ebe7;border-radius:20px;padding:22px 18px}
.sr-pinlogin-card .sr-pinlogin-title{margin-top:2px}
.sr-pinlogin-card .sr-pinlogin-num{background:#f0f7f4;border-color:#d7e8e0;margin:0 0 16px}
.sr-pinlogin-card .sr-auth-alt{text-align:center;margin:14px 0 2px}
/* (2026-10-31 v4 — লগইন-সম্মতি দুই-ডিভাইস কার্ড): কর্পোরেট-ক্লিন —
   সাদা কার্ড + 1px বর্ডার, নতুন শ্যাডো নয়; বর্তমান-ডিভাইস কার্ডে
   হালকা মিন্ট অ্যাকসেন্ট। ডিভাইস-আইডি mono + break-all। */
.sr-consent-card{padding:22px 18px}
.sr-consent-intro{font-size:14.5px;line-height:1.6;color:#2c3e39;margin:2px 0 16px}
.sr-consent-dev{background:#fff;border:1px solid #e5ebe7;border-radius:16px;padding:14px 16px;margin:0 0 12px}
.sr-consent-dev.is-current{background:#f0f7f4;border-color:#d7e8e0}
.sr-consent-dev-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.sr-consent-dev-head b{font-size:13px;color:var(--text)}
.sr-consent-chan{font-size:12px;font-weight:700;color:var(--primary-dark);background:#e3f1ea;border:1px solid #bfdccd;border-radius:999px;padding:3px 10px;white-space:nowrap}
.sr-consent-dev-name{font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px}
.sr-consent-dev-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);padding:3px 0}
.sr-consent-dev-row code{font-size:12px;color:#2c3e39;word-break:break-all;text-align:right}
.sr-consent-note{font-size:13.5px;line-height:1.6;color:var(--muted);margin:4px 0 10px}
.sr-consent-q{font-size:15.5px;font-weight:700;color:var(--text);margin:0 0 14px}
.sr-hist2-left{position:relative}
.sr-hist2-left .sr-op-ic{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px}

/* ==========================================================================
   v153 — কর্পোরেট-ক্লিন (2026-10-25, আতিক ভাইয়ের "AI-glow নয়" নির্দেশ)
   নীতি: ZERO shadow, ZERO decorative glow/pattern। শুধু 1px বর্ডার +
   ফ্ল্যাট রঙ + সাদা ব্যাকগ্রাউন্ড — Stripe/Wise/bKash ধাঁচের কর্পোরেট-ক্লিন।
   ব্যতিক্রম শুধু ব্র্যান্ড-এরিয়া (হেডার/হিরো): সফট সিঙ্গেল-হিউ গ্রেডিয়েন্ট
   (#106050→#0b463a, একই hue, হালকা ডেপথ) — হাই-বাজেট অ্যাপের মতো।
   হেডার/হিরো সবুজই থাকবে (আগের রঙ)। ফোকাসে শুধু বর্ডার-রঙ বদলাবে,
   কোনো রিং/হালো নয়। অটোফিলে নীল/হলুদ মার্ক নয়, সিলেকশনে নীল নয়।
   লেআউট, লেখা, ফিচার, লজিক অপরিবর্তিত — শুধু ভিজ্যুয়াল।
   ========================================================================== */
:root{
  --success:#067647; --success-soft:#ECFDF3;
  --warning:#B54708; --warning-soft:#FFFAEB;
  --error:#B42318; --error-soft:#FEF3F2;
  --info:#175CD3; --info-soft:#EFF6FF;
  --border:#E5E7EB; --border-soft:#F2F4F7;
  --text:#101828; --text-2:#344054; --muted:#667085;
}
/* পেজ-ব্যাকগ্রাউন্ড: পুরো সাদা */
body,.app-main,.sr-ui{background:#FFFFFF}
/* ১. ডেকোরেটিভ গ্লো/প্যাটার্ন বন্ধ */
.sr-hero::after,.sr-welcome-head::after,.sr-auth-head::after,.sr-dash-hero::before,
.sr-offer-card.hot::before,[class*="h-anim-"]::before,[class*="h-anim-"]::after{display:none !important}
/* ২. সব শ্যাডো বন্ধ — কার্ড, হিরো, টাইল, শিট, মোডাল, বাটন, ইনপুট, ব্যাজ, চিপ, নেভ, হেডার */
.sr-card,.sr-auth-card,.sr-wel-card,.sr-comm-card,.sr-limit-card,.sr-premium-card,
.tk-stats,.tk-empty,.ha-user-card,.ha-svc-card,.ha-head-pts,.hl-support-card,
.sr-wel-head,.sr-dash-hero,.sr-refer-hero,.sr-stats-hero,.sr-streak-strip,.sr-checkin-strip,
[class*="h-anim-"],.sr-svc-ic,.sr-svc8-ic,.sr-cat-ic,.sr-offer-card,
.sr-sheet,.sr-modal,.sr-modal-box,.sr-popup-modal,.sr-bottom-sheet,
.sr-bottomnav,.sr-bottom-nav,.sr-green-head,.sr-white-head,.sr-band,.sr-auth-head,.sr-lang-float,
.sr-btn,.sr-btn-primary,.sr-btn-outline,.sr-btn-secondary,.sr-btn-danger,.sr-btn-ghost,
.sr-wel-cta,button.sr-offercard-buy,.sr-offercard-buy,.rc-next,.rc-row,
.sr-input,.sr-select,.sr-textarea,.sr-quick-chip,
.sr-badge,.sr-streak-badge,.sr-checkin-badge,.sr-offer-star,.drv-card-comm,.of-card-comm,
.sr-bar,.sr-limit-fill,
.tint-soft-green,.tint-soft-blue,.tint-soft-amber,.tint-soft-orange,.tint-soft-purple,
.tint-soft-teal,.tint-soft-rose,.tint-soft-slate{box-shadow:none !important}
/* ৩. হেডার/হিরো: আগের সবুজ, কিন্তু সফট সিঙ্গেল-হিউ গ্রেডিয়েন্ট
   (হাই-বাজেট অ্যাপের মতো হালকা ডেপথ — গ্লো/শ্যাডো নয়, শুধু ব্র্যান্ড-এরিয়ায়) */
.sr-green-head,.sr-band,.sr-wel-head,.sr-dash-hero,.sr-refer-hero,
.sr-stats-hero,.sr-streak-strip,.sr-checkin-strip,[class*="h-anim-"]{
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%) !important; color:#FFFFFF; border:0;
}
/* 2026-11-09, আইটেম ৮৮ (F-88-1): auth-হেডার ফ্ল্যাট ব্র্যান্ড-সবুজ
   ব্যান্ড — উপরের গ্রেডিয়েন্ট-গ্রুপ থেকে .sr-auth-head বাদ; ফ্ল্যাট
   নিয়ম ফাইনাল-লেয়ারেই (নতুন ডেকোরেটিভ স্তর নয়)। */
.sr-auth-head{background:var(--primary) !important;background-image:none !important;color:#FFFFFF;border:0}
/* ৪. গ্রেডিয়েন্ট → ফ্ল্যাট (বাটন/বার/টাইল/টিপস) */
.sr-btn-primary,.rc-next,button.sr-offercard-buy,.sr-offercard-buy,.sr-wel-cta{
  background:var(--primary) !important; background-image:none !important; color:#FFFFFF; border:0; text-shadow:none;
}
@media (hover:hover){
  .sr-btn-primary:hover,.rc-next:hover,.sr-wel-cta:hover{background:var(--primary-dark) !important; transform:none; filter:none}
}
.sr-btn-primary:active,.rc-next:active{transform:scale(.98)}
.sr-bar{background:var(--primary); background-image:none}
.sr-bar.is-max{background:var(--primary-dark); background-image:none}
.sr-limit-fill.is-full{background:#B42318; background-image:none}
.sr-tips-bg{background:#FFFAEB; background-image:none; border:1px solid #FEDF89}
.sr-cat-ic{background:#ECFDF3; background-image:none; border:1px solid #ABEFC6; color:var(--primary)}
.sr-svc-ic,.sr-svc8-ic{border-radius:12px}
/* ৫. কার্ড: বর্ডার-অনলি (শ্যাডো নেই), সব কার্ড একই নিয়মে */
.sr-card,.sr-wel-card,.sr-comm-card,.sr-limit-card,.sr-premium-card,
.tk-stats,.tk-empty,.ha-user-card,.ha-svc-card,.hl-support-card{
  background:#FFFFFF; border:1px solid #E5E7EB; border-radius:16px; padding:16px;
}
.sr-auth-card{padding:20px !important; border:1px solid #E5E7EB !important}
.sr-modal-box,.sr-popup-modal{background:#FFFFFF; border:1px solid #E5E7EB; border-radius:16px}
.sr-sheet,.sr-bottom-sheet{background:#FFFFFF; border:1px solid #E5E7EB; border-bottom:0; border-radius:16px 16px 0 0}
/* ৬. সিম্যান্টিক টিন্ট/ব্যাজ: টিন্ট একটাই ব্র্যান্ড-টিন্ট (2026-11-11 ফোন-চেক D-3.1); ব্যাজগুলো স্ট্যাটাস-অর্থ বহন করে বলে আগের মতোই থাকে। */
.tint-soft-green{background:#EAF4EE; background-image:none; border:1px solid #ABEFC6; color:#106050}
.tint-soft-blue{background:#EAF4EE; background-image:none; border:1px solid #ABEFC6; color:#106050}
.tint-soft-amber,.tint-soft-orange{background:#EAF4EE; background-image:none; border:1px solid #ABEFC6; color:#106050}
.tint-soft-purple{background:#EAF4EE; background-image:none; border:1px solid #ABEFC6; color:#106050}
.tint-soft-teal{background:#EAF4EE; background-image:none; border:1px solid #ABEFC6; color:#106050}
.tint-soft-rose{background:#EAF4EE; background-image:none; border:1px solid #ABEFC6; color:#106050}
.tint-soft-slate{background:#EAF4EE; background-image:none; border:1px solid #ABEFC6; color:#106050}
.sr-badge-success{background:#ECFDF3; color:#067647; border-color:#ABEFC6}
.sr-badge-warning{background:#FFFAEB; color:#B54708; border-color:#FEDF89}
.sr-badge-error{background:#FEF3F2; color:#B42318; border-color:#FECDCA}
.sr-badge-info{background:#EFF6FF; color:#175CD3; border-color:#BFDBFE}
.sr-badge-muted{background:#F8FAFC; color:#667085; border-color:#E5E7EB}
.sr-badge-primary{background:#ECFDF3; color:#067647; border-color:#ABEFC6}
.sr-badge-orange{background:#FFFAEB; color:#B54708; border-color:#FEDF89}
.sr-streak-badge,.sr-checkin-badge,.sr-offer-star{
  background:#FFFAEB; background-image:none; border:1px solid #FEDF89; color:#B54708;
}
.drv-card-comm,.of-card-comm{
  background:#ECFDF3 !important; background-image:none !important;
  border:1px solid #ABEFC6 !important; color:#067647 !important;
}
/* ৭. বাটন: 52px, 12px রেডিয়াস, ফ্ল্যাট (সেকেন্ডারি সাদা, ডিলিট সফট লাল) */
.sr-btn{min-height:52px; border-radius:12px; font-size:15px; font-weight:600; text-shadow:none}
.sr-btn-outline,.sr-btn-secondary{background:#FFFFFF; color:#101828; border:1px solid #D0D5DD}
.sr-btn-outline:hover,.sr-btn-secondary:hover{background:#F8FAFC}
.sr-btn-danger{background:#FEF3F2; background-image:none; color:#B42318; border:1px solid #FECDCA}
.sr-btn-ghost{background:transparent; color:var(--primary)}
button.sr-offercard-buy,.sr-offercard-buy{min-height:52px; border-radius:12px}
.rc-next{height:52px; border-radius:12px; font-size:16px; font-weight:600}
/* ৮. ইনপুট: বর্ডার-অনলি, 52px, 12px — ফোকাসে শুধু বর্ডার-রঙ, রিং/হালো নেই */
.sr-input,.sr-select,.sr-textarea{
  min-height:52px; height:52px; border-radius:12px; border:1px solid #D0D5DD;
  background:#FFFFFF; color:#101828; font-size:15px;
}
.sr-textarea{height:auto; min-height:104px}
.sr-input::placeholder,.sr-textarea::placeholder{color:#98A2B3;font-weight:400}
.sr-input:focus,.sr-select:focus,.sr-textarea:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft,#e7f2ee) !important; outline:none;
}
.sr-input.is-error,.sr-select.is-error{border-color:#FDA29B}
.sr-input.is-error:focus{border-color:#B42318; box-shadow:0 0 0 3px var(--error-soft,#fdeeed) !important}
.sr-input-wrap > svg,.sr-input-wrap .sr-ic-svg{color:#667085; width:20px; height:20px}
.sr-label{font-size:14px; font-weight:600; color:#344054}
.sr-helper,.sr-hint{color:#667085; font-size:12.5px}
.rc-row-mobile,.rc-row-amount{height:52px}
.rc-row:focus-within{border-color:var(--primary); box-shadow:none !important}

/* F2 — Q-F2-2: অ্যামাউন্ট-ইনপুটের বড় লেখা (ক্যানোনিকাল সাইজ — Talikhata 22px/700 মান)। */
.sr-input.sr-input-amount,.sr-ui .sr-input.sr-input-amount{font-size:22px;font-weight:700;font-family:var(--font-amount-num);letter-spacing:.3px}
#rechargeForm .rc-row-mobile,#rechargeForm .rc-row-amount{caret-color:var(--primary)}
/* ৯. অটোফিল/সিলেকশন: সব ইনপুটে নীল/হলুদ মার্ক নয় (v148-এর ফিক্স এখন গ্লোবাল) */
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px #FFFFFF inset !important;
  -webkit-text-fill-color:#101828 !important; caret-color:var(--primary);
}
input::selection,textarea::selection{background:rgba(16,96,80,.12); color:#101828}
/* ১০. চিপ: সাদা+বর্ডার, বাছাই হলে ফ্ল্যাট সবুজ */
.sr-quick-chip{
  background:#FFFFFF; border:1px solid #D0D5DD; border-radius:12px;
  color:#344054; font-weight:600;
}
.sr-quick-chip.is-picked{background:var(--primary); border-color:var(--primary); color:#FFFFFF}

/* v153 §11 — UID/ট্রানজেকশন-কোড: কর্পোরেট আইডি-ট্রিটমেন্ট (2026-10-25)
   আইডি কখনো সাধারণ লেখার মতো নয় — মনোস্পেস + লেটার-স্পেসিং + গাঢ় রঙ।
   ডিটেইলে সলিড-বর্ডার পিল; ড্যাশড বর্ডার (ড্রাফট/কুপন-লুক) নিষেধ। */
.sr-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
  font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:#101828; background:#F8FAFC; border:1px solid #E5E7EB;
  border-radius:8px; padding:2px 8px; font-variant-numeric:tabular-nums;
}
.sr-hist2-txnid{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
  background:#F8FAFC !important; border:1px solid #E5E7EB !important;
  color:#101828 !important; font-weight:600; letter-spacing:.5px;
}
.sr-txnid-v{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
  font-weight:600; letter-spacing:.5px; color:#101828;
  background:#F8FAFC; border:1px solid #E5E7EB; border-radius:8px; padding:2px 8px;
}
.sr-txnid-v .material-symbols-rounded{color:var(--primary)}
.sr-code-row{background:#FFFFFF !important; border:1px solid #E5E7EB !important}
.sr-code-row .code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
  background:transparent; border:0; color:#101828; letter-spacing:1px;
}

/* ==========================================================================
   v154 — বাটন + কালার আগের মতো (2026-10-25, আতিক ভাইয়ের "বাটনের কালার
   আগের মতো নেই" নির্দেশ — ভালো করে চেক করে পাওয়া কারণ)
   কারণ ১: v153 বাটন ফ্ল্যাট করে দিয়েছিল (প্রাইমারি গ্রেডিয়েন্ট→ফ্ল্যাট,
   আউটলাইন সবুজ→ধূসর, buy-বাটন পিল→চৌকো, danger সলিড-লাল→ফ্যাকাসে,
   ছোট/বড় বাটনের সাইজও 52px-এ চাপা পড়েছিল)।
   কারণ ২: v153-এর :root ব্লক গ্লোবাল var(--success/--error/--border/
   --text/...) বদলে দিয়েছিল — পুরো অ্যাপের পুরনো কালার সরে গিয়েছিল।
   ফিক্স: আগের বাটন-সিস্টেম হুবহু ফেরত (গ্রেডিয়েন্ট = সফট সিঙ্গেল-হিউ
   সবুজ, শ্যাডো/inset-হাইলাইট ছাড়া — কর্পোরেট-ক্লিন বহাল) + :root
   ভ্যারিয়েবল আগের টোকেন-মানে ফেরত (ডার্ক-থিম বাদে)।
   v153-এর বাকি সব (কার্ড, ইনপুট, চিপ, UID, শ্যাডো-বন্ধ) অপরিবর্তিত।
   ========================================================================== */
:root:not([data-theme="dark"]){
  --success:#0f766e; --success-soft:#e6f4f1;
  --warning:#e8a33d; --warning-soft:#fdf3e2;
  --error:#d9534f; --error-soft:#fdeeed;
  --info:#3366a3; --info-soft:#eef0fd;
  --text:var(--text); --text-2:var(--text-2); --muted:var(--muted);
  --border:var(--border); --border-soft:var(--border-soft);
}
/* বেস: আগের মতো 48px/700 (v153-এর 52px/600 বাতিল) */
.sr-btn{min-height:48px; font-weight:700; font-size:15px}
.sr-btn-sm{min-height:36px; font-size:12.5px; border-radius:8px}
.sr-btn-lg{min-height:54px; font-size:17px}
.sr-btn-block{min-height:52px; font-size:16px}
/* প্রাইমারি: আগের গ্রেডিয়েন্ট + টেক্সট-শ্যাডো, শ্যাডো ছাড়া */
.sr-btn-primary{
  background:linear-gradient(180deg,var(--primary) 0%,#0b4a3c 100%) !important;
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.12);
}
@media (hover:hover){
  .sr-btn-primary:hover{
    background:linear-gradient(180deg,var(--primary) 0%,#0b4a3c 100%) !important;
    transform:translateY(-2px); filter:brightness(1.05);
  }
}
.sr-btn-primary:active{transform:translateY(1px) scale(.985); filter:none}
/* আউটলাইন: আগের মতো সবুজ লেখা + 2px সবুজ বর্ডার + মিন্ট হোভার */
.sr-btn-outline{background:#fff; color:var(--primary); border:2px solid var(--primary)}
.sr-btn-outline:hover{background:var(--primary-soft); transform:translateY(-1px)}
.sr-btn-outline:active{background:var(--primary-soft); transform:translateY(1px) scale(.985)}
/* ডেঞ্জার: আগের মতো সলিড লাল + সাদা লেখা */
.sr-btn-danger{background:var(--error); color:#fff; border:0}
.sr-btn-danger:hover{filter:brightness(.95)}
/* রিচার্জ-নেক্সট: আগের গ্রেডিয়েন্ট (উজ্জ্বল সবুজ টপ) + 54px/700 */
.rc-next{
  background:linear-gradient(135deg,#178f66 0%,var(--primary) 60%,var(--primary-dark) 100%) !important;
  height:54px; font-size:16.5px; font-weight:700;
}
/* অফার-কেনা: আগের মতো পিল + গ্রেডিয়েন্ট + 48px/700 */
button.sr-offercard-buy,.sr-offercard-buy{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)) !important;
  border-radius:999px; min-height:48px; font-size:15px; font-weight:700; padding:12px 30px;
}
/* ওয়েলকাম-CTA: আগের গ্রেডিয়েন্ট */
.sr-wel-cta{background:linear-gradient(180deg,#14705c 0%,#0c4a3c 100%) !important}

/* v155 — কর্পোরেট-ক্লিন সম্পূর্ণকরণ (2026-10-25, আতিক ভাই): শ্যাডো/গ্লো চিরতরে বন্ধ।
   কারণ: v153-এর পার-ক্লাস kill-লিস্টে শত শত পুরনো শ্যাডো-রুল বাদ পড়েছিল (লেভেল কার্ড,
   অফার কার্ড, চ্যালেঞ্জ/শিট/মোডাল/টোস্টসহ) — তাই এবার app.css + components.css-এর
   সব box-shadow-সিলেক্টর (২৬৯টি, জেনারেটেড) + ভবিষ্যতের জন্য [class]x3 ব্ল্যাঙ্কেট।
   নিয়ম: নতুন box-shadow যোগ নিষেধ — যোগ করলে এই ফাইনাল লেয়ারেই kill করতে হবে। */
.sr-btn-primary,
.sr-btn-primary:hover,
.sr-add-bal,
.sr-btn-add-bal,
.sr-add-bal:active,
.sr-btn-add-bal:active,
.sr-head-act,
.sr-welcome-circle,
.sr-welcome-card,
.sr-welcome-feat,
.sr-lang-float form,
.sr-auth-badge,
.sr-band-auth .sr-auth-badge,
.sr-band-auth .sr-logo-badge,
.sr-auth-card {
  box-shadow: none !important;
}
.sr-auth-feat,
.sr-user-card,
.sr-avatar,
.sr-avatar-lg,
.sr-avatar-sm,
.sr-profile-card,
.sr-wel-lang,
.sr-wel-badge,
.sr-wel-card,
.sr-wel-cta,
.sr-wel-video-play .material-symbols-rounded,
.sr-modal-box,
.sr-offer,
.sr-offer-buy,
.sr-offer-card {
  box-shadow: none !important;
}
.sr-offer-star,
.sr-offer-card.hot,
.sr-offer-card.hot .buy-circle,
.sr-offercard,
.sr-drive-promo,
.sr-txn-row,
.sr-op-ic,
.sr-pill.is-active,
.sr-chip.is-active,
.sr-stat-card,
.sr-stat-ic,
.sr-bar-chart,
.sr-bar,
.sr-bottom-nav,
.sr-bottomnav {
  box-shadow: none !important;
}
.sr-limit-card,
.sr-streak,
.sr-streak-badge,
.sr-streak-day.is-today,
.sr-streak-strip,
.sr-checkin-badge,
.sr-checkin-day.is-today,
.sr-checkin-strip,
.sr-tips,
.sr-tips-ic,
.sr-dash-hero,
.sr-dash-hero .sr-add-bal,
.app-hero,
.sr-banner,
.app-chips button.is-active {
  box-shadow: none !important;
}
.app-chips button:active,
.sr-seg-item.is-active,
.sr-op-chip.is-active,
.sr-op-mark,
.sr-op-tile,
.sr-check-ring,
.sr-cat-card,
.sr-service-off,
.sr-svc-ic,
.sr-svc8-ic,
.sr-head-square,
.sr-comm-card,
.sr-op-card,
.sr-op-card.is-active,
.sr-tut-play {
  box-shadow: none !important;
}
.sr-tut-box,
.sr-popup-modal,
.sr-popup-cta,
.sr-stats-hero,
.sr-premium-card,
.sr-premium-balance,
.sr-drawer,
.tk-stats,
.tk-search,
.tk-add-round,
.tk-empty,
.tk-empty-btn,
.tk-cust,
.tk-cust-av {
  box-shadow: none !important;
}
.ha-head-act,
.ha-head-pts,
.ha-user-card,
.ha-add-ic,
.ha-svc-card,
.sr-duo-refer,
.sr-duo-checkin,
.sr-duo-ic .material-symbols-rounded+.material-symbols-rounded,
.sr-bnav-fab-ic,
.sr-bnav-fab:active .sr-bnav-fab-ic,
.sr-offer-card2.g-green,
.sr-offer-card2.g-amber,
.sr-offer-card2.g-blue,
.sr-offer-card2.g-teal {
  box-shadow: none !important;
}
.sr-offer-card2.g-violet,
.sr-offer-card2.g-indigo,
.sr-offer-card2.g-sky,
.tk-form-card,
.tk-detail-card,
.tk-txn-form-card,
.tk-txn-tab.is-on,
.tk-txn,
.sc-card,
.nt-item,
.bp-cat-card,
.bp-biller-row,
.bp-biller-hero,
.bp-form {
  box-shadow: none !important;
}
.bp-btn,
.bp-card,
.sm-card,
.sm-av,
.sm-ok-card,
.drv-op-card,
.drv-tab.is-active,
.drv-card.g-blue,
.drv-card.g-teal,
.drv-card.g-violet,
.drv-card.g-indigo,
.drv-card.g-sky,
.drv-hero,
.drv-sum {
  box-shadow: none !important;
}
.drv-form,
.drv-success,
.rc-chips .sr-quick-chip,
.rc-next,
.rc-info-btn,
.rc-offer,
.sc-pin-card,
.tk-action-card,
.tk-note-card,
.tk-sms-bal,
.sr-tut-video-card,
.sr-tut-video-play .material-symbols-rounded,
.sr-tut-points li,
.sr-ci-trophy,
.sr-ci-circle.is-done {
  box-shadow: none !important;
}
.sr-ci-circle.is-today,
.sr-ci-progress-card,
.sr-ci-row,
.sr-ci-hero,
.sr-ci-today-ic,
.sr-ci-day.is-today,
.sr-ch-notice,
.sr-ch-card2,
.sr-ch-avail,
.sr-ref-stat,
.sr-ch-fab,
.sr-field-error,
.rw-hero,
.sr-limit-upgrade,
.ci-hero {
  box-shadow: none !important;
}
.ci-today-card,
.ci-day.is-done,
.ci-day.is-today,
.sc-detail-hero,
.nt-modal,
.nt-modal-x,
.sr-maxlevel,
.sr-maxlevel-img,
.rw-tab.is-active,
.ci-day.is-done .ci-day-icon::after,
.ab-success-hero,
.sr-hist2-tab.is-active,
.sr-hist2-card,
.sr-hist2-card:hover,
.sr-dash-total {
  box-shadow: none !important;
}
.sr-dash-donut,
.sr-dash-svc,
.sr-dash-tip,
.sr-histd-hero,
.sr-histd-card,
.prof-hero,
.prof-cam-btn,
.prof-stat,
.prof-menu,
.prof-logout,
.prof-comm-hero,
.prof-comm-card,
.prof-upgrade,
.prof-upgrade-card,
.sr-lvl-card {
  box-shadow: none !important;
}
.sr-lvl-card.is-current,
.sr-lvl-ic-big,
.sr-tut-card,
.sr-contact-btn,
.ab2-hero,
.ab2-card,
.sr-level-card.is-active,
.sr-vs-panel.is-current,
.sc-scratch,
.sr-histbs-hic,
.prof-upgrade-card.prof-lvl-card,
.prof-lvl-card .prof-upgrade-ic,
.prof-lvl-cta,
.sr-regbar,
.sr-reg-video {
  box-shadow: none !important;
}
.sr-reg-sec,
.rc-topcard,
.rc-confirm-op,
.drv-searchbar,
.drv-card,
.hl-hero,
.prof-card-merged,
.prof-card-merged .prof-edit-btn,
.prof-card-merged .prof-avatar,
.prof-lvl-ic,
.prof-lvl-btn,
.rc-amount-row input:-webkit-autofill {
  box-shadow: none !important;
}
.sr-reg-card,
.sr-level-panel,
.sr-level-ic,
.sr-level-feebox,
.sr-level-benefits li,
.sr-level-sheet,
.rc-tabs .sr-tab.is-active,
.rc-tabs .sr-tab,
.drv-card:active,
.drv-card-comm,
.drv-prop,
.drv-note-card,
.hl-tabs,
.hl-tab.is-active,
.hl-support-card {
  box-shadow: none !important;
}
.hl-report-card,
.ai-chat-form,
.hl-tab,
.hl-support-ic,
.sr-hist2-num .sr-op-ic,
.rc-row,
.rc-row-line2 .rc-op-circ,
.rc-row-amt2:focus-within,
.rc-row-del,
.rc-sum,
.rc-row:focus-within,
.rc-field:focus-within,
.sr-level-page .sr-level-sheet,
.sr-leave-sheet,
.sr-input:focus {
  box-shadow: 0 0 0 3px var(--primary-soft,#e7f2ee) !important;
}
.sr-select:focus,
.sr-textarea:focus {
  box-shadow: 0 0 0 3px var(--primary-soft,#e7f2ee) !important;
}
.sr-input.is-error:focus {
  box-shadow: 0 0 0 3px var(--error-soft,#fdeeed) !important;
}
.drv-searchbar:focus-within,
.sr-pop-sheet,
.sr-pinlogin-num,
.sr-card,
.sr-card-premium,
.sr-table-wrap,
.sr-sheet,
.sr-toast,
.sr-slide,
.theme-pick.is-active,
.theme-pick-swatch {
  box-shadow: none !important;
}

/* v155 — ভবিষ্যতের যেকোনো ক্লাস-যুক্ত এলিমেন্টের শ্যাডোও বন্ধ (স্পেসিফিসিটি 0,3,0)। */
[class][class][class],
[class][class][class]::before,
[class][class][class]::after {
  box-shadow: none !important;
}

/* F2 — Q-F2-8: ফোকাস-রিং ফেরানো (v155 blanket-এর পরে, ট্রিপল-ক্লাস + !important — blanket-এর সাথে specificity টাই, পরে থাকায় জেতে)। */
.sr-input.sr-input:focus,.sr-select.sr-select:focus,.sr-textarea.sr-textarea:focus{box-shadow:0 0 0 3px var(--primary-soft,#e7f2ee) !important}
.sr-input.sr-input.is-error:focus{box-shadow:0 0 0 3px var(--error-soft,#fdeeed) !important}

/* v155 — ফিল্ডের ভেতর শুধু সাদা (বর্ডার ছাড়া আর কোনো টিন্ট নয়)। */
.sr-input, .sr-select, .sr-textarea,
input[type="text"], input[type="tel"], input[type="number"], input[type="password"],
input[type="email"], input[type="search"], input:not([type]), select, textarea {
  background-color: #FFFFFF !important;
}
.rc-field, .rc-field-num, .rc-field-amt, .rc-row, .rc-row-op, .rc-row-amt, .rc-row-amt2,
.rc-op-circ {
  background-color: #FFFFFF !important;
}

/* v155 — অটোফিল সব অবস্থায় সাদা (hover/focus/active-সহ)। */
input[class][class]:-webkit-autofill, input[class][class]:-webkit-autofill:hover,
input[class][class]:-webkit-autofill:focus, input[class][class]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: #101828 !important;
  caret-color: var(--primary);
}

/* v155 — ফন্ট একীকরণ: বডি + সব ফর্ম-কন্ট্রোল একই Hind Siliguri স্ট্যাক; সংখ্যাও একই স্ট্যাক। */
body {
  font-family: var(--font-main);
}
button, input, select, textarea {
  font-family: inherit;
}
.sr-ui .num, .num {
  font-family: "Hind Siliguri", "Noto Sans Bengali", "Inter", system-ui, sans-serif;
}

/* v155 — অ্যাড-ব্যালেন্স নোটিশ: ফ্ল্যাট সফট টিন্ট + গাঢ় লেখা (পড়তে সহজ)। */
.sr-ab-notice {
  background: #ECFDF3;
  background-image: none;
}
.sr-ab-notice p {
  font-size: 13px;
  color: #14532d;
}
.sr-ab-notice .material-symbols-rounded {
  color: var(--primary);
}

/* ================= v156 — রিচার্জ ফিল্ড পুরোপুরি সাদা (বাকি পেজের মতো) ================= */
/* চিপ/সামারি/অ্যাড-রো-তে রয়ে যাওয়া হালকা টিন্ট সাদা — বর্ডার/লেখা অপরিবর্তিত। */
.rc-chips .sr-quick-chip {
  background: #FFFFFF;
  border-color: #E5E7EB;
}
.rc-add-row {
  background: #FFFFFF;
}
.rc-sum {
  background: #FFFFFF;
  border-color: #E5E7EB;
}
.sr-amt-chip {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

/* ================= v156 — সফট নিউট্রাল শ্যাডো (শুধু ভাসমান/এলিভেটেড এলিমেন্টে) ================= */
/* নিয়ম (আতিক ভাই, 2026-10-26): রঙিন গ্লো (সবুজ/নেভি হালো, বড় ব্লার) এখনো নিষেধ —
   শুধু ধূসর-নিউট্রাল, ছোট, সফট শ্যাডো — শিট/মোডাল/ফ্যাব/প্রাইমারি বাটন/টাইলে।
   v155-ব্ল্যাঙ্কেট ([class]x3 !important) জিততে ট্রিপল-ক্লাস সিলেক্টর + !important। */
.sr-sheet.sr-sheet-bottom[class] {
  box-shadow: 0 -8px 32px rgba(16, 24, 40, 0.12) !important;
}
.sr-modal-box[class][class] {
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16) !important;
}
.sr-ch-fab[class][class] {
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.18) !important;
}
.sr-btn.sr-btn-primary[class] {
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12) !important;
}
.sr-add-bal[class][class], .sr-btn-add-bal[class][class] {
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12) !important;
}
.sr-svc8-ic[class][class] {
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08) !important;
}

/* ============ v157 — নির্দিষ্ট সফট-প্যালেট + প্রিমিয়াম পলিশ (2026-10-26, আতিক ভাই) ============ */
/* (ক) নির্দিষ্ট ৮ সফট-কালার — 2026-11-11 ফোন-চেক D-3.1-এ বাতিল: সব টিন্ট
   একটাই ব্র্যান্ড-টিন্ট (#EAF4EE / #ABEFC6 / #106050) — এই সাইটটি ফাইলে
   সবার শেষে থাকায় এটাই ক্যাসকেড-বিজয়ী ছিল, তাই এটাও ভেঙে দেওয়া
   বাধ্যতামূলক (নইলে উপরের ৩ সাইটের ফিক্স কোনো কাজে আসত না)।
   স্কোপড রুল (.sr-hist2-tab.is-active.*, .sr-offer-card2.*) ছোঁয়া হয়নি —
   সেগুলো আলাদা ফিচার (হিস্টোরি-সক্রিয়-ট্যাব / অফার-কার্ড), সিদ্ধান্ত বাকি। */
.tint-soft-green{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-orange{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-purple{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-blue{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-teal{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-amber{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-rose{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
.tint-soft-slate{background:#EAF4EE;background-image:none;border:1px solid #ABEFC6;color:#106050}
/* (খ) হিস্টোরি টাইল/হিরো আইকন টিন্টের রঙ নেবে (আগে সব #106050 ফোর্স হতো)। */
.sr-hist2-ic .material-symbols-rounded{color:inherit}
.sr-hist2-ic svg{color:inherit}
.sr-histd-hero-ic .material-symbols-rounded{color:inherit}
.sr-histd-hero-ic svg{color:inherit}
/* (গ) হিস্টোরি ট্যাব — সক্রিয় ট্যাব নিজের সার্ভিস-কালারে সলিড হবে। */
.sr-hist2-tab.is-active.tint-soft-green{background:#0B6E3F!important;border-color:#0B6E3F!important;color:#fff!important}
.sr-hist2-tab.is-active.tint-soft-orange{background:#B45309!important;border-color:#B45309!important;color:#fff!important}
.sr-hist2-tab.is-active.tint-soft-purple{background:#5B3FBF!important;border-color:#5B3FBF!important;color:#fff!important}
.sr-hist2-tab.is-active.tint-soft-blue{background:#1455B0!important;border-color:#1455B0!important;color:#fff!important}
.sr-hist2-tab.is-active.tint-soft-teal{background:#0A6E5E!important;border-color:#0A6E5E!important;color:#fff!important}
.sr-hist2-tab.is-active.tint-soft-amber{background:#8A5A00!important;border-color:#8A5A00!important;color:#fff!important}
.sr-hist2-tab.is-active.tint-soft-rose{background:#B81E4F!important;border-color:#B81E4F!important;color:#fff!important}
.sr-hist2-tab.is-active.tint-soft-slate{background:#3D4F5C!important;border-color:#3D4F5C!important;color:#fff!important}
/* (ঘ) পেজ-নোটিশ + ড্রাইভ-নোটিশ — দৃশ্যমান সফট টিন্ট; ড্রাইভ-নোটিশ
   অ্যানিমেশনসহ আসবে (আগের .drv-notice-এ সেমিকোলন না থাকায় বাম-বর্ডার
   ড্রপ হতো — এখানে ঠিক করা)। */
.pg-notice{background:#E3F1EA;border:1px solid #BFDCCD;border-left:4px solid var(--primary,#106050)}
.pg-notice-ic{background:#D3E8DC;color:var(--primary,#106050)}
.drv-notice{background:#E3F1EA;border:1px solid #BFDCCD;border-left:4px solid var(--primary,#106050);animation:drvNoticeIn .5s ease .1s both}
.drv-notice-ic{background:#D3E8DC;color:var(--primary,#106050)}
@keyframes drvNoticeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* (ঙ) বিল — ফিল্ড পুরো সাদা, বিলার-হিরো সফট টিন্ট, টেক্সটএরিয়া শুধু
   লম্বায় বড়-ছোট হবে (ডানে-বামে নয় — শেপ/বর্ডার ভাঙবে না)। */
.bp-biller-hero{background:#EAF4EE;background-image:none;border:1px solid #C8E2D4}
textarea{resize:vertical;max-width:100%}

/* ============ v158 — (2026-10-26, আতিক ভাই) ============ */
/* (ক) স্পেশাল-অফার কার্ড: গ্র্যাডিয়েন্ট বাদ — v157 ফ্ল্যাট টিন্ট;
   ওয়াটারমার্ক + অপারেটর-নাম + দাম কার্ডের নিজের রঙে। */
.sr-offer-card2.tint-soft-blue{background:#D9E8FC;background-image:none;border:1px solid #A6C6F7;color:#1455B0;box-shadow:none}
.sr-offer-card2.tint-soft-rose{background:#FADDE5;background-image:none;border:1px solid #F4AFC0;color:#B81E4F;box-shadow:none}
.sr-offer-card2.tint-soft-teal{background:#CDEDE7;background-image:none;border:1px solid #8AD4C6;color:#0A6E5E;box-shadow:none}
.sr-offer-card2.tint-soft-purple{background:#EAE4F7;background-image:none;border:1px solid #C9B8E8;color:#5B3FBF;box-shadow:none}
.sr-offer-card2.tint-soft-orange{background:#FFE8CF;background-image:none;border:1px solid #FFC48F;color:#B45309;box-shadow:none}
.sr-offer-card2.tint-soft-amber{background:#FDEFC7;background-image:none;border:1px solid #F8D488;color:#8A5A00;box-shadow:none}
.sr-offer-card2 .sr-offer2-wm .material-symbols-rounded{color:inherit}
.sr-offer-card2 .sr-offer-op{color:inherit}
.sr-offer-card2 .sr-offer-price b{color:inherit}
/* (গ) হিস্টোরি ট্যাব — বাটনের ব্যাকগ্রাউন্ডের সাথে মিলিয়ে: সব ট্যাব
   নিজের সার্ভিস-টিন্টে (হালকা) + গাঢ় টেক্সট; সক্রিয়টা একই টিন্টে
   গাঢ় বর্ডার + বোল্ড (আগের সলিড-ডার্ক সক্রিয় ট্যাব বাকিগুলোর সাথে
   মিলত না; v157-এর !important সলিড-রুলকে জেতাতে !important)। */
.sr-hist2-tab.is-active.tint-soft-green{background:#DFF3E4!important;border:2px solid #0B6E3F!important;color:#0B6E3F!important;box-shadow:none!important;font-weight: 700}
.sr-hist2-tab.is-active.tint-soft-orange{background:#FFE8CF!important;border:2px solid #B45309!important;color:#B45309!important;box-shadow:none!important;font-weight: 700}
.sr-hist2-tab.is-active.tint-soft-purple{background:#EAE4F7!important;border:2px solid #5B3FBF!important;color:#5B3FBF!important;box-shadow:none!important;font-weight: 700}
.sr-hist2-tab.is-active.tint-soft-blue{background:#D9E8FC!important;border:2px solid #1455B0!important;color:#1455B0!important;box-shadow:none!important;font-weight: 700}
.sr-hist2-tab.is-active.tint-soft-teal{background:#CDEDE7!important;border:2px solid #0A6E5E!important;color:#0A6E5E!important;box-shadow:none!important;font-weight: 700}
.sr-hist2-tab.is-active.tint-soft-amber{background:#FDEFC7!important;border:2px solid #8A5A00!important;color:#8A5A00!important;box-shadow:none!important;font-weight: 700}
.sr-hist2-tab.is-active.tint-soft-rose{background:#FADDE5!important;border:2px solid #B81E4F!important;color:#B81E4F!important;box-shadow:none!important;font-weight: 700}
.sr-hist2-tab.is-active.tint-soft-slate{background:#E6EBEE!important;border:2px solid #3D4F5C!important;color:#3D4F5C!important;box-shadow:none!important;font-weight: 700}
/* (ঘ) বাংলা ফন্ট একীকরণ — সব অ্যামাউন্ট/সংখ্যা Hind-ফার্স্ট (আগে
   Noto-ফার্স্ট ছিল বলে হিন্দ-টেক্সটের পাশে ফন্ট বদলে দেখাত);
   বটম-শিটের চিপ/টাইটেল/লেবেল inherit নিশ্চিত। */
.sr-stats-hero-amt,.sr-dash-total-amt,.sr-donut-total-v,.sr-dash-svc-meta,.sr-histd-hero-amt b,.sr-prof-bal b,.sr-ui .num,.num{font-family:"Hind Siliguri","Noto Sans Bengali","Inter",system-ui,sans-serif}
.sr-amt-chip,.sr-sheet-title,.sr-sheet .sr-label{font-family:inherit}
/* (ঙ) AI পেজ — শেল ফলব্যাক-টপ আসল হেডারের কাছাকাছি; জনপ্রিয়-প্রশ্ন
   চিপ; না-জানা উত্তরে WhatsApp বাটন-রো; বুদবুদে লিংক-রঙ। */
.ai-shell{top:60px}
.ai-quick{flex:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 0 10px}
.ai-quick-lb{font-size:12.5px;font-weight:700;color:#5a6b65}
.ai-quick-chip{border:1px solid #c8e2d4;background:#eaf4ee;color:var(--primary-dark);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.ai-quick-chip:active{transform:scale(.96)}
.ai-wa-row{margin-top:10px}
.ai-wa-btn{width:100%;justify-content:center}
.sr-msg.is-other .sr-msg-body a{color:var(--primary);font-weight:600;word-break:break-all}
.sr-msg.is-mine .sr-msg-body a{color:#fff;text-decoration:underline;word-break:break-all}
/* (চ) ড্যাশবোর্ড ব্রেকডাউন — স্ট্যাকড বার + রো + ডিটেইল প্যানেল। */
.sr-bd-bar{display:flex;gap:2px;height:16px;margin:4px 0 14px;overflow:hidden;border-radius:999px;background:var(--border-soft)}
.sr-bd-seg{flex:none;height:100%;border:0;padding:0;cursor:pointer;min-width:4px}
.sr-bd-seg.is-sel{outline:2px solid var(--text);outline-offset:1px}
.sr-bd-list{display:flex;flex-direction:column;gap:4px}
/* v167 (আতিক ভাই): ডোনাটের পাশের লেখা ডিফল্টে লুকানো — চার্টে ক্লিক করলেই (has-sel) দেখাবে; মাঝের মোট অপরিবর্তিত। */
.sr-bd-wrap:not(.has-sel) .sr-bd-list{display:none}
.sr-bd-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid #eef4f2;border-radius:12px;padding:11px 12px;cursor:pointer}
.sr-bd-row.is-sel{border-color:var(--primary);background:#eef4ee}
.sr-bd-dot{flex:none;width:10px;height:10px;border-radius:50%}
.sr-bd-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--text);text-align:left}
.sr-bd-amt{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap}
.sr-bd-pct{font-size:12.5px;font-weight:700;color:#5a6b65;min-width:52px;text-align:right}
.sr-bd-detail{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:14px;padding:12px 14px;background:#f6f9f8;border:1px solid #e4ecea;border-radius:12px;font-size:13px;color:#2c3e39}
.sr-bd-detail b{color:var(--text)}
.sr-bd-hint{color:#5a6b65}

/* ================= v159 (2026-10-26, আতিক ভাইয়ের ৫ ছবির ব্যাচ) ================= */
/* (ক) হোম অফার কার্ড: আসল সফট গ্র্যাডিয়েন্ট ফেরত (মার্কআপে g-*); গাঢ়-সবুজ
   ওয়াটারমার্কের বদলে সাদা-হালকা ওয়াটারমার্ক — কার্ড আর ধূসর/ফ্যাকাসে নয়। */
.sr-offer-card2 .sr-offer2-wm{opacity:.45}
.sr-offer-card2 .sr-offer2-wm .material-symbols-rounded{color:#fff}
/* (ঘ) ড্যাশবোর্ড ডোনাট: বামে গোল চার্ট, ডানে ডিটেইল প্যানেল। */
.sr-bd-top{display:flex;gap:14px;align-items:center;margin:4px 0 14px}
.sr-bd-donut{flex:none}
.sr-bd-arc{cursor:pointer;transition:opacity .15s}
.sr-bd-wrap.has-sel .sr-bd-arc:not(.is-sel){opacity:.35}
.sr-bd-arc.is-sel{stroke-width:26}
.sr-bd-top .sr-bd-detail{flex:1;margin-top:0;flex-direction:column;align-items:flex-start;gap:6px}
/* (ঙ) AI সহায়ক ফুল-স্ক্রিন মেসেজ-অ্যাপ: শেল পুরো ভিউপোর্ট; চ্যাট-এরিয়া
   flex-এ ভরে (380px ফিক্সড নয়); চিপ ছোট + ডানে-বামে স্ক্রল। */
.ai-shell{top:0;bottom:0}
.ai-topbar{flex:none;display:flex;align-items:center;gap:10px;background:#fff;padding:10px 12px;border-bottom:1px solid #e4ecea}
.ai-topbar b{font-size:15px;font-weight: 700;color:var(--text)}
.ai-shell .ai-chat{display:flex;flex-direction:column}
.ai-shell .ai-chat-area{height:auto;flex:1;min-height:0;overflow-y:auto}
.ai-shell .ai-chat-form{padding-bottom:env(safe-area-inset-bottom)}
.ai-quick{flex:none;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ai-quick::-webkit-scrollbar{display:none}
.ai-quick-lb{flex:none}
.ai-quick-row{display:flex;gap:8px;flex-wrap:nowrap}
.ai-quick-chip{flex:none;padding:6px 11px;font-size:12px}

/* ================= v160 (2026-10-26, আতিক ভাই: অফার/ডুয়ো কার্ড + চ্যালেঞ্জ FAB) ================= */
/* (ক) স্পেশাল-অফার কার্ড: রঙের পরিচয় আগের মতোই — F-US-10 (২০২৬-১১-০৯):
   গ্রেডিয়েন্ট+শ্যাডো ফ্ল্যাট করা; বেস-রুলের ফ্ল্যাট প্যাস্টেল-টিন্টই চূড়ান্ত। */
.sr-offer-card2.g-blue,.sr-offer-card2.g-teal,.sr-offer-card2.g-violet,.sr-offer-card2.g-amber,.sr-offer-card2.g-green,.sr-offer-card2.g-indigo,.sr-offer-card2.g-sky{box-shadow:none!important}
/* (খ) কার্ডের ভেতরের আইকন (ওয়াটারমার্ক) আগের মতো: গাঢ়-সবুজ, হালকা
   (.14)। v159-এর সাদা .45 আইকন কার্ডের রঙ ধুয়ে ফ্যাকাসে করত। */
.sr-offer-card2 .sr-offer2-wm{opacity:.14}
.sr-offer-card2 .sr-offer2-wm .material-symbols-rounded{color:var(--primary-deep)}
/* (গ) লেবেল/দাম আগের মতো: অপারেটর-নাম ব্র্যান্ড-সবুজ, দাম গাঢ়-সবুজ
   (v158-এর color:inherit ওভাররাইড সরিয়ে)। */
.sr-offer-card2 .sr-offer-op{color:var(--primary)}
.sr-offer-card2 .sr-offer-price b{color:var(--primary-deep)}

/* v167 — তথ্য পেজের নির্দেশনা কার্ড: ক্লিন বর্ডার, ফ্ল্যাট */
.sr-tut-card{border:1px solid #E5E7EB}

/* v170 — অ্যাকাউন্ট অ্যাক্টিভেশন: ৩ লেভেল-কার্ড (2026-10-27, আতিক ভাই — স্যাম্পল ৩)।
   ক্লিন + মিনিমাল + সফট গ্রেডিয়েন্ট; ভাসমান শিট নেই — CTA সুবিধার নিচেই। */
.sr-lvl3-wrap{display:flex;gap:10px;margin-top:2px}
.sr-lvl3-card{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1.5px solid #E5E7EB;border-radius:16px;padding:18px 6px 12px;cursor:pointer;font-family:inherit;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.sr-lvl3-card:active{transform:scale(.97)}
.sr-lvl3-card:has(.sr-lvl3-pop){box-shadow:0 3px 12px rgba(16,24,40,.10)}
.sr-lvl3-ic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sr-lvl3-ic .material-symbols-rounded{font-size:23px}
.sr-lvl3-c0 .sr-lvl3-ic{background:#E8F5F0;color:var(--primary)}
.sr-lvl3-c1 .sr-lvl3-ic{background:#FEF3C7;color:#B45309}
.sr-lvl3-c2 .sr-lvl3-ic{background:#F3E8FF;color:#7C3AED}
.sr-lvl3-card.is-selected{box-shadow:0 2px 10px rgba(16,24,40,.08)}
.sr-lvl3-c0.is-selected{border-color:var(--primary);background:#F2FAF7}
.sr-lvl3-c1.is-selected{border-color:#D97706;background:#FFFBEB}
.sr-lvl3-c2.is-selected{border-color:#8B5CF6;background:#FAF5FF}
.sr-lvl3-name{font-size:13px;font-weight:700;color:#111827;line-height:1.3;text-align:center}
.sr-lvl3-feeline{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-items:center}
.sr-lvl3-fee{font-size:13px;font-weight: 700;color:#111827}
.sr-lvl3-fee-free{font-size:12px;font-weight:700;color:#0b7a43}
.sr-lvl3-reg{font-size:11px;color:#9CA3AF;text-decoration:line-through}
.sr-lvl3-off{font-size:10px;font-weight: 700;color:#B45309;background:#FEF3C7;border-radius:20px;padding:1px 6px}
.sr-lvl3-pop{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight: 700;color:#fff;background:linear-gradient(135deg,#178f66,var(--primary));border-radius:20px;padding:3px 11px;box-shadow:0 2px 8px rgba(16,96,80,.35)}
.sr-lvl3-check{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;line-height:20px;text-align:center;display:none}
.sr-lvl3-c1 .sr-lvl3-check{background:#D97706}
.sr-lvl3-c2 .sr-lvl3-check{background:#8B5CF6}
.sr-lvl3-card.is-selected .sr-lvl3-check{display:block}
.sr-lvl3-ben li.sr-ben-hidden{display:none}
.sr-lvl3-ben.sr-ben-open li.sr-ben-hidden{display:flex}
.sr-lvl3-more{display:block;width:100%;background:none;border:none;color:var(--primary);font-size:13px;font-weight:700;padding:8px 0 0;cursor:pointer;font-family:inherit}
.sr-lvl3-cta{margin-top:14px}
.sr-lvl3-total{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:10px}
.sr-lvl3-total span:first-child{color:#6B7280}
.sr-lvl3-total span:last-child{font-weight: 700}

/* v171 — অ্যাকাউন্ট অ্যাক্টিভেশন পুনর্নির্মাণ (2026-10-27, আতিক ভাই):
   ছোট অ্যাকাউন্ট কার্ড, টিন্টেড লেভেল কার্ড (সিলেক্টে গাঢ় + বড় টিক),
   একক ক্লিন ডিটেইল কার্ড। v170-ব্লকের পরে বলে একই specificity-তে জেতে। */
.sr-lvl3-acct{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:10px 12px}
.sr-lvl3-acct-ic{width:32px;height:32px;border-radius:50%;background:#E8F5F0;color:var(--primary);display:flex;align-items:center;justify-content:center;flex:none}
.sr-lvl3-acct-ic .material-symbols-rounded{font-size:19px}
.sr-lvl3-acct-name{font-size:14px;font-weight:700;color:#111827}
.sr-lvl3-acct-num{font-size:13px;color:#6B7280;margin-left:auto}
.sr-lvl3-wrap{margin-top:14px}
.sr-lvl3-c0{background:#EFF8F4;border-color:#D3E8DD}
.sr-lvl3-c1{background:#FDF6E3;border-color:#F3E5B8}
.sr-lvl3-c2{background:#F5F0FB;border-color:#E3D7F5}
.sr-lvl3-c0 .sr-lvl3-ic{background:#fff;color:var(--primary)}
.sr-lvl3-c1 .sr-lvl3-ic{background:#fff;color:#B45309}
.sr-lvl3-c2 .sr-lvl3-ic{background:#fff;color:#7C3AED}
.sr-lvl3-c0.is-selected{background:#D9EFE6;border-color:var(--primary)}
.sr-lvl3-c1.is-selected{background:#FBEECB;border-color:#D97706}
.sr-lvl3-c2.is-selected{background:#E9DFF7;border-color:#8B5CF6}
.sr-lvl3-name{font-size:14px}
.sr-lvl3-fee{font-size:14px}
.sr-lvl3-check{width:24px;height:24px;font-size:15px;line-height:24px;top:7px;right:7px;box-shadow:0 0 0 2px #fff}
.sr-lvl3-detail-head{display:flex;gap:12px;align-items:center}
.sr-lvl3-detail-ic{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none}
.sr-lvl3-detail-ic .material-symbols-rounded{font-size:24px}
.sr-lvl3-detail-ic.sr-lvl3-c0{background:#E8F5F0;color:var(--primary)}
.sr-lvl3-detail-ic.sr-lvl3-c1{background:#FEF3C7;color:#B45309}
.sr-lvl3-detail-ic.sr-lvl3-c2{background:#F3E8FF;color:#7C3AED}
.sr-lvl3-detail-name{font-size:16px;font-weight: 700;color:#111827;line-height:1.3}
.sr-lvl3-detail-lvl{font-size:12.5px;color:#6B7280;margin-top:2px}
.sr-lvl3-div{height:1px;background:#F1F5F9;margin:14px 0}

/* v172 — সম্পূর্ণ সাদা ব্যাকগ্রাউন্ড + শ্যাডো/গ্লো-মুক্ত (2026-10-27, আতিক ভাই):
   পেজের সব ব্যাকগ্রাউন্ড সাদা; রঙ শুধু অ্যাকসেন্ট হিসেবে — বাটনের
   গ্রেডিয়েন্ট-স্টাইলে সলিড চিপ/বর্ডার/টিক/ব্যাজ; কোনো শ্যাডো/গ্লো নেই।
   v171-ব্লকের পরে বলে একই/বেশি specificity-তে জেতে। */
.sr-level-page .sr-card{box-shadow:none}
.sr-level-page .sr-btn-primary{box-shadow:none}
.sr-level-page .sr-lvl3-pop{box-shadow:none}
.sr-level-page .sr-lvl3-card{box-shadow:none;background:#fff;border-color:#E5E7EB}
.sr-level-page .sr-lvl3-card:has(.sr-lvl3-pop){box-shadow:none}
.sr-level-page .sr-lvl3-card.is-selected{box-shadow:none;background:#fff}
.sr-level-page .sr-lvl3-c0.is-selected{border-color:var(--primary)}
.sr-level-page .sr-lvl3-c1.is-selected{border-color:#D97706}
.sr-level-page .sr-lvl3-c2.is-selected{border-color:#8B5CF6}
.sr-level-page .sr-lvl3-c0 .sr-lvl3-ic{background:linear-gradient(135deg,#178f66,var(--primary));color:#fff}
.sr-level-page .sr-lvl3-c1 .sr-lvl3-ic{background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff}
.sr-level-page .sr-lvl3-detail-ic.sr-lvl3-c0{background:linear-gradient(135deg,#178f66,var(--primary));color:#fff}
.sr-level-page .sr-lvl3-detail-ic.sr-lvl3-c1{background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff}
.sr-level-page .sr-lvl3-acct-ic{background:linear-gradient(135deg,#178f66,var(--primary));color:#fff}
.sr-level-page .sr-lvl3-check{box-shadow:none}
.sr-level-page .sr-reg-ic-soft{background:#fff;border:1px solid #E5E7EB;color:var(--primary)}

/* v173 — সিলেক্টেড ডিটেইল সফট-বর্ডার কার্ড + মিনিমাল নিচের অংশ + Hind Siliguri সর্বত্র (2026-10-27, আতিক ভাই):
   পেজ-ব্যাকগ্রাউন্ড সাদাই থাকবে (v172 বহাল, শ্যাডো/গ্লো নেই); শুধু
   সিলেক্টেড লেভেলের ডিটেইল কার্ডে লেভেলের সফট কালার + চারপাশে ম্যাচিং
   বর্ডার (ডিটেইল-আইকনের প্যালেট-ক্লাস দিয়ে চেনা যায় — :has, JS-ছোঁয়া নেই);
   সুবিধাগুলো আর মিনি-কার্ড নয় — সাধারণ সারি; সংখ্যা/অ্যামাউন্টসহ
   বাকি Noto-ফার্স্ট জায়গাগুলোতেও Hind Siliguri প্রথম। */
/* v174: ডিটেইল কার্ড আবার সাদা — সফট কালার শুধু লেভেল কার্ডে (আতিক ভাই)। */
.sr-level-page .sr-card:has(.sr-lvl3-detail-ic) .sr-lvl3-div{background:rgba(17,24,39,.08)}
.sr-level-page .sr-level-benefits li{background:none;border:0;box-shadow:none;padding:8px 0}
.sr-level-page .sr-level-benefits li .material-symbols-rounded{background:none;width:auto;height:auto;font-size:19px}
.sr-stats-hero-amt,.sr-dash-total-amt,.sr-donut-total-v,.sr-dash-svc-meta{font-family:"Hind Siliguri","Noto Sans Bengali","Inter",system-ui,sans-serif}

/* v174 — প্রিমিয়াম কার্ড ডিজাইন (2026-10-27, আতিক ভাই — v173-এর সবুজ-ওয়াশ বাতিল):
   লেভেল কার্ডে সফট প্রিমিয়াম কালার (আনসিলেক্টেড হালকা টিন্ট + সাদা চিপ,
   সিলেক্টেড গাঢ় টিন্ট + রঙিন বর্ডার + সাদা-রিং টিক); ডিটেইল কার্ড সম্পূর্ণ
   সাদা, ক্লিন, মিনিমাল (শুধু ডিটেইল-চিপে সফট অ্যাকসেন্ট); সেকশন কার্ডে
   স্পষ্ট বর্ডার + প্রিমিয়াম গ্যাপ; টোটাল/ডিসকাউন্ট সাজানো (বড় দাম উপরে,
   কাটা দাম + ছাড়-ব্যাজ নিচে ডান-সারিতে)। শ্যাডো/গ্লো আগের মতোই নেই। */
.sr-level-page .sr-reg-card{border:1px solid #E5E7EB;border-radius:16px}
.sr-level-page form .sr-reg-card + .sr-reg-card{margin-top:14px}
.sr-level-page .sr-lvl3-c0{background:#EFF8F4;border-color:#D3E8DD}
.sr-level-page .sr-lvl3-c1{background:#FDF6E3;border-color:#F3E5B8}
.sr-level-page .sr-lvl3-c2{background:#F5F0FB;border-color:#E3D7F5}
.sr-level-page .sr-lvl3-c0 .sr-lvl3-ic{background:#fff;color:var(--primary)}
.sr-level-page .sr-lvl3-c1 .sr-lvl3-ic{background:#fff;color:#B45309}
.sr-level-page .sr-lvl3-c2 .sr-lvl3-ic{background:#fff;color:#7C3AED}
.sr-level-page .sr-lvl3-c0.is-selected{background:#D9EFE6;border-color:var(--primary)}
.sr-level-page .sr-lvl3-c1.is-selected{background:#FBEECB;border-color:#D97706}
.sr-level-page .sr-lvl3-c2.is-selected{background:#E9DFF7;border-color:#8B5CF6}
.sr-level-page .sr-lvl3-check{box-shadow:0 0 0 2px #fff}
.sr-level-page .sr-card:has(.sr-lvl3-detail-ic){background:#fff;border-color:#E5E7EB}
.sr-level-page .sr-lvl3-detail-ic.sr-lvl3-c0{background:#E8F5F0;color:var(--primary)}
.sr-level-page .sr-lvl3-detail-ic.sr-lvl3-c1{background:#FEF3C7;color:#B45309}
.sr-level-page .sr-lvl3-detail-ic.sr-lvl3-c2{background:#F3E8FF;color:#7C3AED}
.sr-level-page #srCtaFee{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.sr-level-page .sr-level-now{font-size:20px;font-weight: 700;color:#111827}
.sr-level-page .sr-level-sub{display:flex;gap:6px;align-items:center}
.sr-level-page .sr-level-reg{font-size:12px;font-weight:600;color:#9CA3AF;text-decoration:line-through}
.sr-level-page .sr-level-off{font-size:11px;font-weight: 700;color:#B45309;background:#FEF3C7;border-radius:20px;padding:2px 8px}

/* v175 (আতিক ভাই): রিলস/Shorts ভিডিও বড় করে — আগের 320px ক্যাপ বাতিল।
   ফ্রেম স্ক্রিনের প্রায় পুরো উচ্চতা নেবে (উপরে/নিচে 70px করে ছেড়ে),
   প্রস্থ তার 9/16 অনুপাতেই সীমাবদ্ধ থাকবে। */
.sr-video-modal-frame.is-vertical { aspect-ratio: 9 / 16; max-width: none;
  width: min(calc(100vw - 40px), calc((100dvh - 140px) * 9 / 16)); margin: 0 auto; }
.sr-video-modal-box:has(.sr-video-modal-frame.is-vertical) { width: auto; max-width: calc(100vw - 36px); }

/* v176 — স্যাম্পল-মতো প্রিমিয়াম ক্লিন ডিজাইন (2026-10-27, আতিক ভাই):
   স্যাম্পল: হালকা-ধূসর পেজ-ব্যাকগ্রাউন্ডে সাদা সেকশন/ডিটেইল কার্ড,
   প্যাস্টেল লেভেল কার্ড (সাদা আইকন-চিপ, সিলেক্টে 2px রঙিন বর্ডার),
   সুবিধায় সবুজ আউটলাইন-সার্কেল চেক, টিক-ব্যাজ নেই, সাশ্রয়ে আইকন নেই।
   এই ব্লকই চূড়ান্ত — আগের v170-v175 স্তরের উপরে বলে একই
   specificity-তে জেতে; শুধু এই পেজে প্রযোজ্য (.sr-level-page)। */
.app-shell.sr-flat-white:has(.sr-level-page){background:#F4F6F4}
.app-shell:has(.sr-plan-page) .app-main{background:#FFFFFF}
.sr-level-page .sr-reg-card{border:1px solid #E7ECE9;border-radius:20px;box-shadow:none;background:#fff;padding:20px}
.sr-level-page form .sr-reg-card + .sr-reg-card{margin-top:14px}
.sr-level-page .sr-reg-sec-head{margin-bottom:16px;gap:12px;align-items:flex-start}
.sr-level-page .sr-reg-sec-head h3{font-size:17px;font-weight: 700;color:#111827}
.sr-level-page .sr-reg-sec-sub{margin:3px 0 0;font-size:13px;color:#6B7280;line-height:1.5}
.sr-level-page .sr-reg-ic-soft{width:44px;height:44px;border-radius:14px;background:#E8F5F0;border:0;color:var(--primary);flex:none}
.sr-level-page .sr-reg-ic-soft .material-symbols-rounded{font-size:24px}
.sr-level-page .sr-lvl3-wrap{gap:12px;margin-top:16px}
.sr-level-page .sr-lvl3-card{border-radius:20px;border-width:1.5px;padding:20px 8px 16px;gap:8px}
.sr-level-page .sr-lvl3-card.is-selected{border-width:2px}
.sr-level-page .sr-lvl3-ic{width:64px;height:64px}
.sr-level-page .sr-lvl3-ic .material-symbols-rounded{font-size:28px}
.sr-level-page .sr-lvl3-name{font-size:15px}
.sr-level-page .sr-lvl3-fee{font-size:16px}
.sr-level-page .sr-lvl3-fee-free{font-size:15px}
.sr-level-page .sr-lvl3-reg{font-size:12px}
.sr-level-page .sr-lvl3-off{font-size:11px;padding:2px 8px}
.sr-level-page .sr-lvl3-detail-ic{width:56px;height:56px;border-radius:16px}
.sr-level-page .sr-lvl3-detail-ic .material-symbols-rounded{font-size:26px}
.sr-level-page .sr-lvl3-detail-name{font-size:20px}
.sr-level-page .sr-lvl3-detail-lvl{font-size:13px}
.sr-level-page .sr-lvl3-div{margin:16px 0;background:#EEF1EF}
.sr-level-page .sr-level-benefits-title{font-size:17px;font-weight: 700;color:#0B3D33;margin:4px 0 12px}
.sr-level-page .sr-level-benefits li{padding:12px 0;gap:12px;align-items:center}
.sr-level-page .sr-level-benefits li .material-symbols-rounded{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--primary);border-radius:50%;background:none;font-size:16px;color:var(--primary);margin-top:0}
.sr-level-page .sr-level-benefits li b{font-size:15px}
.sr-level-page .sr-lvl3-more{text-align:center;font-size:14px;padding:12px 0 0}
.sr-level-page .sr-lvl3-cta{margin-top:16px}
.sr-level-page .sr-lvl3-total{font-size:14px;margin-bottom:12px}
.sr-level-page .sr-btn-primary{border-radius:16px;padding:16px;background:var(--primary)!important}
.sr-level-page .sr-btn-primary:hover{background:var(--primary)!important;transform:none;filter:none}
.sr-level-page .sr-btn.sr-btn-primary[class]{box-shadow:none!important}
.sr-level-page .sr-card:has(.sr-lvl3-detail-ic){border-color:#E7ECE9}
.sr-level-page .sr-card:has(.sr-lvl3-detail-ic) .sr-lvl3-div{background:#EEF1EF}
.sr-level-page .sr-save-line{font-size:14px;margin-top:12px}
.sr-level-page .sr-secure-line{margin-top:10px}

/* v177 — আতিক ভাইয়ের ৪ নির্দেশনা (2026-10-27, তাঁর ফোন-স্ক্রিনশট থেকে):
   ১. সেকশন-স্পেসিং স্ট্যান্ডার্ড 16px (নোটিশ→অ্যাকাউন্ট→সেকশন→ডিটেইল)।
   ২+৪. লেভেল কার্ড চওড়া + খাটো: পেজ-প্যাডিং 16→12px, কার্ড-প্যাডিং
   20→16px, কার্ড-গ্যাপ 12→8px, আইকন-চিপ 64→52px, কার্ড-প্যাডিং
   কমানো — কার্ডের প্রস্থ ~88→~96px, উচ্চতা ~28px কমে, লম্বাটে ভাব কাটে।
   ৩. সুবিধার টিক আর ফন্ট-আইকন নয় — CSS-আঁকা চেক (বর্ডার-ঘূর্ণন),
   নির্দিষ্ট বর্গ-বক্স + 50% রেডিয়াস = সব ডিভাইসে নিখুঁত বৃত্ত।
   ফন্ট-গ্লিফের বক্স-বিকৃতি (ফোনে লম্বাটে ডিম্বাকৃতি) আর সম্ভব নয়। */
.app-shell.sr-flat-white:has(.sr-level-page) .app-main{padding-left:12px;padding-right:12px}
.sr-level-page .sr-reg-notice{margin-bottom:16px}
.sr-level-page .sr-lvl3-acct{margin-bottom:16px}
.sr-level-page .sr-reg-card{padding:16px}
.sr-level-page form .sr-reg-card + .sr-reg-card{margin-top:16px}
.sr-level-page .sr-lvl3-wrap{gap:8px;margin-top:14px}
.sr-level-page .sr-lvl3-card{padding:14px 6px 12px;gap:6px}
.sr-level-page .sr-lvl3-ic{width:52px;height:52px}
.sr-level-page .sr-lvl3-ic .material-symbols-rounded{font-size:24px}
.sr-level-page .sr-lvl3-fee{font-size:15px}
.sr-level-page .sr-lvl3-off{font-size:10px;padding:2px 7px}
.sr-level-page .sr-level-benefits li{padding:10px 0}
.sr-level-page .sr-ben-tick{width:26px;height:26px;min-width:26px;min-height:26px;flex:none;box-sizing:border-box;border:1.5px solid var(--primary);border-radius:50%;background:#fff;position:relative;display:inline-block}
.sr-level-page .sr-ben-tick::after{content:"";position:absolute;left:50%;top:46%;width:5px;height:11px;border:solid var(--primary);border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}

/* v178 — লেখা স্ট্যান্ডার্ড/মিনিমাল সাইজে (2026-10-27, আতিক ভাইয়ের ফোন-স্ক্রিনশট):
   শুধু লেভেল কার্ড + ডিটেইল কার্ডের ফন্ট-সাইজ কমানো — লেআউট, স্পেসিং,
   রঙ, কাঠামো অপরিবর্তিত (বাকি সব ঠিক আছে বলে)। হেডার/সেকশন-হেড/
   নোটিশ/অ্যাকাউন্ট-কার্ডের লেখা ছোঁয়া হয়নি। */
.sr-level-page .sr-lvl3-name{font-size:14px}
.sr-level-page .sr-lvl3-fee{font-size:14px}
.sr-level-page .sr-lvl3-fee-free{font-size:14px}
.sr-level-page .sr-lvl3-reg{font-size:11px}
.sr-level-page .sr-lvl3-detail-name{font-size:17px}
.sr-level-page .sr-lvl3-detail-lvl{font-size:12px}
.sr-level-page .sr-level-benefits-title{font-size:15px}
.sr-level-page .sr-level-benefits li b{font-size:14px}
.sr-level-page .sr-level-benefits li small{font-size:12px}
.sr-level-page .sr-lvl3-more{font-size:13px}
.sr-level-page .sr-lvl3-total{font-size:13px}
.sr-level-page .sr-level-now{font-size:17px}
.sr-level-page .sr-level-reg{font-size:11px}
.sr-level-page .sr-level-off{font-size:10px;padding:2px 7px}
.sr-level-page .sr-btn-primary{font-size:15px}
.sr-level-page .sr-save-line{font-size:13px}

/* ==========================================================================
   2026-10-27 বান্ডিল — লেভেল-আপডেট পুনর্গঠন + সফল-পপআপ + ডিভাইস + লিগ্যাল
   কর্পোরেট-ক্লিন: সাদা ব্যাকগ্রাউন্ড, 1px #E5E7EB বর্ডার, ফ্ল্যাট রঙ।
   ভাসমান পপআপে শুধু সফট-নিউট্রাল শ্যাডো (v156 নিয়ম) — ট্রিপল-ক্লাস দিয়ে
   v155-ব্ল্যাঙ্কেটকে জেতানো হয়েছে; রঙিন গ্লো নেই।
   ========================================================================== */
.sr-lvl-gain{margin:0 0 12px;padding:12px 14px;background:var(--primary-mist);border:1px solid #E5E7EB;border-radius:12px}
.sr-lvl-gain-title{font-size:13px;font-weight: 700;color:var(--primary);margin-bottom:8px}
.sr-lvl-gain .sr-lvl-benefits{margin:0}
.sr-maxlevel-only{max-width:420px;margin:24px auto;text-align:center;padding:16px}
.sr-maxlevel-only-img{width:100%;max-width:320px;height:auto;display:block;margin:0 auto 20px;border-radius:20px}
.sr-maxlevel-only-tx b{font-size:18px;color:var(--text);display:block;margin-bottom:8px}
.sr-maxlevel-only-tx p{font-size:14.5px;line-height:1.7;color:#52796d;margin:0 0 8px}
.sr-maxlevel-only-tx small{font-size:13px;color:#98A2B3}
.sr-pop-art{margin:0 auto 8px;text-align:center}
.sr-pop-art svg{width:120px;height:72px}
.sr-pop-sheet.sr-pop-anim{animation:sr-pop-in var(--dur-base) cubic-bezier(0.22,1,0.36,1)}
.sr-pop-sheet.sr-pop-anim .sr-pop-art svg{animation:sr-pop-art var(--dur-base) cubic-bezier(0.22,1,0.36,1)}
.sr-pop-sheet.sr-pop-anim .sr-pop-icon{animation:sr-pop-check var(--dur-base) cubic-bezier(0.22,1,0.36,1)}
@keyframes sr-pop-in{from{transform:translateY(20px) scale(.94);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes sr-pop-art{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes sr-pop-check{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.sr-pop-sheet.sr-pop-sheet.sr-pop-sheet{box-shadow:0 12px 32px rgba(16,24,40,.12)}
.lp-legal{font-size:14.5px;line-height:1.8;color:#344054}
.lp-legal h1,.lp-legal h2,.lp-legal h3{color:var(--text)}
.lp-legal p{margin:0 0 12px}
.lp-legal ul{padding-left:20px}

/* ==========================================================================
   2026-10-27 বাগ-বান্ডিল — ছোট মোবাইল (৩২০–৩৬০px) রেসপন্সিভ-গার্ড
   মূল কাঠামো ঠিক আছে (html/body overflow-x:hidden, .app-shell clip,
   .app-main max-width 640) — এখানে শুধু ৩৬০px-এর নিচে টাইট-জায়গা
   ছাড়া হচ্ছে, ডেস্কটপ/ট্যাবলেট নিয়ম ছোঁয়া হয়নি। লেভেল-কার্ড
   (অ্যাক্টিভেশন) ৩-কলাম flex থাকে, শুধু প্যাডিং/গ্যাপ কমে।
   ========================================================================== */
@media (max-width: 360px) {
  .app-main { padding-left: 12px; padding-right: 12px; }
  .sr-auth-card { padding: 20px 12px !important; }
  .sr-auth-feats, .sr-welcome-feats { gap: 6px; }
  .sr-welcome-feats { margin-left: 12px; margin-right: 12px; }
  .sr-level-page .sr-lvl3-wrap { gap: 6px; }
  .sr-level-page .sr-lvl3-card { padding: 12px 4px; }
  .sr-level-page .sr-lvl3-ic { width: 44px; height: 44px; }
  .sr-big-amount input { font-size: 24px; }
  .sr-op-tile-grid, .sr-cards-3, .sr-op-grid { gap: 8px; }
}

/* ==========================================================================
   2026-10-27 নতুন বান্ডিল — লোগো-ইউনিফিকেশন + প্রোফাইল লেয়ার্ড-কার্ড
   ফাইলের শেষে, তাই আগের সব লেয়ারকে জেতে (একটাই স্ট্যান্ডার্ড নিয়ম)।
   লোগো: অথ-ব্যাজ ও ওয়েলকাম-ব্যাজ — দুটোই শেপ 104px, ইনার-ইমেজ 84px
   (চারপাশে সমান 10px গ্যাপ; আগে অথ-ইনার ছিল 68px, ওয়েলকাম-শেপ 150px
   — পেজভেদে ভিন্ন সাইজ আর নেই)। প্রোফাইল: সফট-সবুজ শেল-কার্ডের উপরে
   সাদা প্রোফাইল-কার্ড; হিরো সফট-সবুজ, লেভেল-রো সফট-অ্যাম্বার — দুটো
   আলাদা হালকা রঙ, কর্পোরেট-ক্লিন (1px বর্ডার, রঙিন গ্লো/নিয়ন নেই,
   শুধু সফট-নিউট্রাল শ্যাডো)। 360px গার্ড অপরিবর্তিত।
   ========================================================================== */
.sr-auth-badge { width: 104px; height: 104px; }
.sr-auth-badge img { width: 84px; height: 84px; object-fit: contain; }
/* 2026-10-31 ওয়েলকাম-ফিক্স: .sr-wel-badge বেস-রুলের 120px/68px-ই চূড়ান্ত
   (আগের যৌথ 104px/84px রুল ওয়েলকামকে চাপা দিত বলে আলাদা করা হলো;
   অথ-ব্যাজের 104px/84px মান অপরিবর্তিত)। */
.sr-wel-badge { width: 120px; height: 120px; }
.sr-wel-badge img { width: 68px; height: 68px; object-fit: contain; }
.prof-section-shell { background: #EFF7F3; border: 1px solid #E5E7EB; border-radius: 20px; padding: 12px; margin-bottom: 12px; }
.prof-section-shell .prof-card-merged { margin-bottom: 0; box-shadow: 0 4px 16px rgba(16,24,40,.08); }
.prof-section-shell .prof-hero { background: #EAF5F0; border-radius: 16px 16px 0 0; }
.prof-section-shell .prof-lvl-row { background: #FFF8E6; border-color: #F0E0B0; }
.prof-section-shell .prof-lvl-tx b { color: var(--primary-dark); }
@media (max-width: 360px) {
  .prof-section-shell { padding: 8px; border-radius: 20px; }
}
.sr-lvl-foot form { margin: 0; }

/* ==========================================================================
   ২০২৬-১০-২৭ নতুন বান্ডিল — ডিভাইস-ডিটেইল, প্রোফাইল-থিম-ব্যান্ড,
   লোগো-ক্লিপিং, ভাষা-পিল ফিক্সড-প্লেসমেন্ট।
   ========================================================================== */
/* ৬. লোগো সার্কেলের ভিতরে: overflow:hidden ছাড়া border-radius:50%
   শুধু ব্যাকগ্রাউন্ড কাটে, ভিতরের ছবি কাটে না — তাই অ-বর্গাকার
   বা সাদা-ব্যাকগ্রাউন্ড লোগো সার্কেলের বাইরে বেরিয়ে যেত। সব
   সার্কুলার লোগো-কনটেইনারে একই ক্লিপিং-নিয়ম। */
.sr-auth-badge, .sr-wel-badge, .lp-logo, .sr-logo-badge { overflow: hidden; }
.sr-auth-badge img, .sr-wel-badge img, .lp-logo img, .sr-logo-badge .sr-logo-img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
}
/* ৭. ভাষা-পিল sticky-হেডার (২০২৬-১০-২৭ চূড়ান্ত — আগের
   header-anchor/স্ক্রল-সহ-যাওয়া নিয়ম বাতিল): পিল হেডারের ভিতরে
   absolute থাকে; হেডার নিজে sticky হয় ফাইলের শেষ ব্লকে। তাই
   পিল একা fixed-এর মতো কার্ডের উপরে ভাসে না। প্রোফাইল-মেনুর
   ভাষা-রো এর বাইরে — সেটা মেনু-আইটেম, স্বাভাবিকভাবে স্ক্রল করবে। */
.sr-lang-float { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 5 !important; }
.sr-wel-lang { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 5 !important; }
/* ৪. প্রোফাইল-থিম-ব্যান্ড: হোমপেজ-থিমের মতো ব্র্যান্ড-সবুজ শেড-ব্যান্ড,
   তার উপরে লেয়ার্ড প্রোফাইল-কার্ড (শেপের উপরে শেপ)। রঙিন গ্লো/নিয়ন নেই। */
.prof-theme-wrap { position: relative; }
.prof-theme-band {
  height: 118px; border-radius: 20px;
  background: linear-gradient(135deg, #0B4A3C 0%, var(--primary) 55%, #1A7A63 100%);
  position: relative; overflow: hidden;
}
.prof-section-shell.prof-overlap { position: relative; z-index: 1; margin-top: -58px; }
.prof-addr { color: #52796d; font-size: 13px; margin-top: 2px; }
.prof-addr-add { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* ৫. ডিভাইস-ডিটেইল হেডার + সেকশন-শিরোনাম (৩৬০px-এ wrap হয়)। */
.sr-dev-detail-head {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  background: linear-gradient(135deg, #0B4A3C, var(--primary) 60%, #1A7A63);
  color: #fff; border-radius: 20px; margin-bottom: 12px;
}
.sr-dev-detail-ic { flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
  display: inline-flex; align-items: center; justify-content: center; }
.sr-dev-detail-ic .material-symbols-rounded { font-size: 24px; }
.sr-dev-detail-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-dev-detail-tx b { font-size: 16px; overflow-wrap: anywhere; }
.sr-dev-detail-tx span { font-size: 13px; opacity: .9; }
.sr-dev-detail-sec { font-size: 15px; margin: 0 0 4px; color: var(--primary-deep); }
@media (max-width: 360px) {
  .prof-theme-band { height: 100px; border-radius: 20px; }
  .prof-section-shell.prof-overlap { margin-top: -48px; }
  .sr-dev-detail-head { padding: 14px; }
}

/* ==========================================================================
   ২০২৬-১০-২৭ চূড়ান্ত — ভাষা-পিল sticky-হেডার + ডিজাইন ৫ প্রোফাইল।
   ফাইলের শেষে, তাই আগের সব লেয়ারকে জেতে।
   ভাষা (ব্যবহারকারীর চূড়ান্ত স্পষ্টীকরণ; header-anchor সংস্করণ
   বাতিল): পিল একা fixed নয় — অথ-হেডার / ওয়েলকাম-হেডার নিজে
   sticky (top:0, z-index ৭০, সলিড গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড —
   ৪৯৫৫-লেয়ারের gradient অস্বচ্ছ, তাই কনটেন্ট হেডারের নিচ দিয়ে
   গেলেও পিল/হেডার ঢাকা পড়ে না)। পিল হেডারের ভিতরে absolute
   থাকে, তাই স্ক্রলে হেডারসহ পিল ভিউপোর্টের উপরে ডানদিকে আটকে
   থাকে, কোনো কার্ড/সেকশনের উপরে ভেসে ওঠে না, নিচেও নামে না।
   Sticky-অ্যানসেস্টর গার্ড: .sr-ui-এর overflow-x:hidden (৯৪-লাইন)
   sticky ভাঙতে পারত — sr-auth-head-ওয়ালা শেলে overflow-x:clip
   ফিরিয়ে আনা হলো (clip স্ক্রল-কনটেইনার বানায় না, sticky চলে)।
   ওভারল্যাপ-ক্ষতিপূরণ: sticky হেডারের z-index কার্ডের উপরে, তাই
   কার্ডের ওভারল্যাপ-অংশ হেডারের নিচে গেলেও কনটেন্ট চাপা পড়বে
   না — কার্ডের padding-top-এ ওভারল্যাপ-পরিমাণ যোগ করা আছে
   (অথ: ৪০px ওভারল্যাপ + ২৪px = ৬৪px; ওয়েলকাম: ৬৪px + ২৬px
   = ৯০px)। authSimple-ফলব্যাক: পিল থাকলে (:has-স্কোপ, পিল
   ছাড়া বিদ্যমান পেজে কোনো পরিবর্তন নেই) স্লিম সবুজ বার নিজেই
   sticky, টাইটেল-রো-তে পিলের জন্য ১০৪px রিজার্ভেশন।
   ডিজাইন ৫ (স্প্লিট ওভারল্যাপ): ব্যান্ড উপরে, সাদা কার্ড তার উপরে
   negative-margin-এ ভাসে — শেলের সফট-সবুজ ব্যাকগ্রাউন্ড/বর্ডার/
   প্যাডিং তুলে দেওয়া (কার্ড সরাসরি ব্যান্ডের উপরে, সাদা ব্যাক-
   গ্রাউন্ড, 1px #E5E7EB বর্ডার, শুধু সফট-নিউট্রাল শ্যাডো)।
   ঠিকানা আগের মতোই নেই; মেনু-লিস্ট ছোঁয়া হয়নি।
   ========================================================================== */
.sr-auth-head { position: sticky !important; top: 0 !important; z-index: 70 !important; }
/* ২০২৬-১০-২৭ ওয়েলকাম-হিরো sticky বাতিল (ভেরিফায়ার GAPS — একমাত্র
   ব্লকিং গ্যাপ): 52vh হিরো পুরোটা sticky থাকলে স্ক্রলে ভিউপোর্টের
   অর্ধেকের বেশি আটকে থাকত আর CTA-কার্ড হেডারের নিচে ঢাকা পড়ত।
   .sr-wel-head এখন বেস-রুলের position:relative-এ ফিরেছে — হিরো
   স্বাভাবিকভাবে স্ক্রল করে চলে যাবে। [ইতিহাস — ২০২৬-১০-২৭-এ পিলের
   sticky-দায়িত্ব .sr-wel-topbar স্লিম বারের ছিল; ২০২৬-১০-৩১-এ topbar
   বাতিল, পিল এখন .sr-wel-head-এর ভেতরে absolute।]
   অথ-হেডারের sticky অপরিবর্তিত। */
.app-shell:has(> .sr-auth-head) { overflow-x: clip !important; overflow-y: visible !important; }
/* ২০২৬-১০-২৮: ৬৪px প্যাডিং-ক্ষতিপূরণের রুল তোলা হলো (নিচের EOF ব্লক
   দেখুন — অথ-কার্ড এখন হেডারের নিচে আলাদা, ক্ষতিপূরণ লাগে না)। */
/* ওয়েলকাম-কার্ডের ৯০px ক্ষতিপূরণও বাতিল — সেটা sticky-হিরোর জন্য
   ছিল; হিরো না-আটকালে কার্ড বেস-প্যাডিং (২৬px) -এ ফিরেছে, নইলে
   লগইন-বাটনের উপরে অকারণ ফাঁকা জায়গা থাকত। */
.sr-authsimple-head:has(.sr-lang-float) { position: sticky !important; top: 0 !important; z-index: 70 !important; }
.sr-authsimple-head:has(.sr-lang-float) .sr-green-head-row { padding-right: 104px; }
.ob-top { position: sticky !important; top: 0 !important; z-index: 60 !important; background: var(--primary-mist) !important; }
.ob-top .sr-lang-float { position: static !important; top: auto !important; right: auto !important; }
.prof-split .prof-theme-band { height: 136px; border-radius: 20px;
  background: linear-gradient(135deg, #0B4A3C 0%, var(--primary) 55%, #1A7A63 100%); }
.prof-split .prof-section-shell { background: transparent; border: 0; padding: 0;
  margin: -64px 12px 12px; position: relative; z-index: 1; }
.prof-split .prof-card-merged { box-shadow: 0 8px 24px rgba(16,24,40,.10); border: 1px solid #E5E7EB; }
@media (max-width: 360px) {
  .prof-split .prof-theme-band { height: 112px; border-radius: 20px; }
  .prof-split .prof-section-shell { margin: -56px 8px 12px; }
  .prof-split .prof-card-merged .prof-hero { padding: 16px 12px 12px; gap: 10px; }
  .prof-split .prof-card-merged .prof-avatar { width: 64px; height: 64px; }
  .prof-split .prof-name { font-size: 17px; }
  .prof-split .prof-lvl-row { flex-wrap: wrap; padding: 12px; }
  .prof-split .prof-lvl-btn { margin-left: auto; }
  .sr-wel-lang { top: 10px !important; right: 8px !important; }
  .sr-wel-lang button { padding: 6px 8px !important; }
  .sr-lang-float { top: 10px !important; right: 8px !important; }
}
@media (max-width: 320px) {
  .prof-split .prof-section-shell { margin: -52px 6px 12px; }
  .prof-split .prof-card-merged .prof-avatar { width: 60px; height: 60px; }
  .prof-split .prof-card-merged .prof-hero { gap: 8px; }
  .prof-split .prof-edit-btn { padding: 7px 10px; font-size: 12px; }
  .prof-split .prof-lvl-row { gap: 10px; }
}

/* ==========================================================================
   [ইতিহাস — ২০২৬-১০-২৭-এর নিয়ম, ২০২৬-১০-৩১-এ বাতিল] ২০২৬-১০-২৭
   ওয়েলকাম-হিরো sticky-গ্যাপ ফিক্স (ভেরিফায়ার GAPS — একমাত্র ব্লকিং
   গ্যাপের সমাধান ছিল; লোকাল মাত্র, ডেপ্লয় নয়)।
   আগের নিয়ম (উপরের ব্লক): .sr-wel-head পুরোটা sticky ছিল — 52vh
   হিরো স্ক্রলে ভিউপোর্টের অর্ধেকের বেশি আটকে থাকত, CTA-কার্ড তার
   নিচে ঢাকা পড়ত। নতুন নিয়ম:
   - হিরো আর sticky নয় (উপরের sticky-লাইন বাতিল, বেস relative) —
     হিরো স্বাভাবিকভাবে স্ক্রল করে চলে যায়, CTA-কার্ড কখনো ঢাকা
     পড়ে না।
   - [বাতিল ২০২৬-১০-৩১] তখন OnboardingPage::welcome-এ হেডারের
     উপরে/বাইরে আলাদা স্লিম টপ-বার (.sr-wel-topbar) ছিল — শুধু এই
     বারটাই sticky ছিল। বার সলিড ছিল, তাই স্ক্রলে কনটেন্ট বারের নিচ
     দিয়ে গেলেও বারের ভিতরে কিছু দেখা যেত না।
   - [বাতিল ২০২৬-১০-৩১] পিল তখন বার-এর ভিতরে static ছিল
     (flex-এ ডানদিকে) — হিরোর ভিতরের absolute-পিল তখন ছিল না,
     তাই পেজে পিল ঠিক ১টিই ছিল। বর্তমানে পিল হেডারের ভেতরে absolute।
   - অথ-হেডার (.sr-auth-head), ডিজাইন ৫ প্রোফাইল-কার্ড, ঠিকানা-বাদ —
     সব অপরিবর্তিত; এই ব্লক শুধু ওয়েলকাম-পেজ ছোঁয়।
   Sticky-অ্যানসেস্টর গার্ড: অথ-শেলের মতো .sr-wel-এ overflow-x:clip
   (clip স্ক্রল-কনটেইনার বানায় না, sticky চলে; hidden হলে ভাঙতে
   পারত)।
   ========================================================================== */
.sr-wel { overflow-x: clip !important; overflow-y: visible !important; }
/* 2026-10-31 ওয়েলকাম-ফিক্স: .sr-wel-topbar স্লিম বার বাতিল — পিল এখন
   .sr-wel-head-এর প্রথম চাইল্ড হিসেবে ভেতরে absolute (বেস-রুল 650 +
   6035-এর absolute top:12px/right:12px !important-ই চূড়ান্ত; উপরের
   static-ওভাররাইড মুছে ফেলা হয়েছে যাতে পিল আবার absolute হয়)। */
/* ২০২৬-১০-২৮ ওয়েলকাম-কার্ড মাঝামাঝি (আতিক ভাই — স্ক্রিনশট অভিযোগ):
   হিরো/টপবার/ওভারল্যাপ অপরিবর্তিত; শুধু হিরোর নিচের ফাঁকা জায়গায়
   কার্ড সেন্টার হয় — body বাকি উচ্চতা নেয় (flex:1) আর কার্ড তার
   ভিতরে vertical-সেন্টার হয়। .sr-wel-এ justify-content নয় (টপবার/
   হিরো উপরে থাকবে)। */
.sr-wel-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 320px) {
  /* ৩২০px-এ ব্যাজ বনাম পিলের ~৭px ফাঁক: পিল এখন হেডারের ভেতরে
     absolute, তাই হেডারের ভেতরের পিলের সাথে জায়গা রাখতে ব্যাজ
     একটু ছোট (১০৪px → ৯৬px, ইনার ৮৪px → ৭৬px, চারপাশে সমান
     ~১০px গ্যাপ অপরিবর্তিত) যাতে হিরো-লেআউটে বাড়তি শ্বাস-জায়গা
     থাকে। */
  .sr-wel-badge { width: 96px; height: 96px; }
  .sr-wel-badge img { width: 76px; height: 76px; }
}

/* ==========================================================================
   ২০২৬-১০-২৮ অথ-কার্ড সম্পূর্ণ আলাদা (আতিক ভাই — স্ক্রিনশট অভিযোগ):
   .sr-auth-head আর sticky নয় (৬০৮১-এর sticky/z-index:70 ওভাররাইড —
   বেস-রুলের position:relative-এ ফেরত), কার্ড হেডারের নিচে আলাদাভাবে
   বসে (margin-top:0 — ৬৩৭-এর -40px ওভারল্যাপ বাতিল), আর ৬৪px
   প্যাডিং-ক্ষতিপূরণের রুলও তোলা হয়েছে (কার্ড বেস ২৪px / কর্পোরেট
   ২০px প্যাডিং-এ ফেরত)। ভাষা-পিল হেডারের সাথেই স্ক্রল করে চলে যায়
   (স্লিম sticky বার নয় — চাওয়া হয়নি)। auth=>true সব পেজে একই নিয়ম।
   ========================================================================== */
.sr-auth-head { position: relative !important; top: auto !important; z-index: auto !important; }
.sr-auth-card-overlap { margin-top: 0 !important; }

/* ২০২৬-১০-২৮ টাকার অঙ্ক — এক ফন্ট-নিয়ম (সব ব্রাউজারে একরকম):
   ৳ শুধু বাংলা-ফন্টে (ওজন ৭০০ — Hind-এ ৮০০ নেই, ব্রাউজার faux-bold
   বানাত), সংখ্যা Hind Siliguri-প্রথম (TK-2 ফন্ট-লকইন)। letter-spacing:0 —
   বাইরের amount-ক্লাসের স্পেসিং ভিতরে ঢুকবে না। */
.sr-amount { white-space: nowrap; }
.sr-amount .sr-cur { font-family: "Hind Siliguri", "Noto Sans Bengali", sans-serif; font-weight: 700; letter-spacing: 0; }
.sr-amount .sr-amt-num { font-family: var(--font-amount-num, "Hind Siliguri", "Noto Sans Bengali", "Inter", system-ui, sans-serif); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: 0; }

/* ==========================================================================
   2026-10-29 UI-বান্ডিল — হিস্টোরি-ডিটেইল ২-কলাম গ্রিড (কোনো ফিল্ড বাদ নয়)
   সিলেক্টর 0,3,0 — .sr-histd-card .sr-detail-row (0,2,0) ও বেস-রো (0,1,0)-কে
   জেতে, ফাইল-শেষে থাকায় সম-স্পেসিফিসিটি নিয়মেও জেতে। গ্রিড-সেলে লেবেল
   উপরে, মান নিচে (সরু সেলে পাশাপাশি আঁটে না বলেই স্ট্যাক)।
   ========================================================================== */
.sr-histd-card .sr-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;border-bottom:1px solid #f0f5f3}
.sr-histd-card .sr-detail-grid .sr-detail-row{flex-direction:column;align-items:flex-start;gap:1px;padding:8px 0;border-bottom:0}
.sr-histd-card .sr-detail-grid .sr-detail-row .v{text-align:left}

/* ==========================================================================
   2026-10-30 BUGFIX BUNDLE — শেষে এক ব্লকে (ক্যাসকেডে জেতে, উপরের
   ৫০০০+ লাইনে হাত নয়)। প্রতিটা রুলের পাশে বাগ-নম্বর আছে।
   ========================================================================== */
/* #1 ফন্ট-রেন্ডারিং: নোটিশ 14px/600/গাঢ়-সবুজ + লাইন-হাইট; শিট-ইনপুটের
   লেখা গাঢ়, প্লেসহোল্ডার পুরো-অপাসিটি ধূসর; হেল্পার-ফ্লোর 13px। */
.sr-ab-notice p{font-size:14px;font-weight:700;color:#14532d;line-height:1.6}
.sr-ab-notice .material-symbols-rounded{color:var(--primary)}
.sr-ui .sr-input{color:var(--text);font-weight:600}
.sr-ui .sr-input::placeholder{color:#667085;opacity:1}
.sr-ui .sr-helper,.sr-ui .sr-hint{font-size:13px;color:#475467}
/* #2 হিস্টোরি-ডিটেইল: মিনিমাল কার্ড-স্পেসিং (ফিল্ড-ক্রম PHP-তে)। */
.sr-histd-card .sr-detail-row{padding:10px 0}
.sr-histd-card .sr-detail-row .k{font-size:13px;color:#475467}
.sr-histd-card .sr-detail-row .v{font-size:14px;font-weight:600;color:var(--text)}
/* ROUND-2 #9: তালিকা-কার্ডে কমিশনের নিজের আলাদা লাইন। */
.sr-hist2-comm{font-size:12px;color:#0e6b4f;font-weight:600}
/* #3 সম্পন্ন-চ্যালেঞ্জ কার্ড: লম্বা কনটেন্টে উপরে-সারিবদ্ধ + বার-মার্জিন। */
.sr-ch-done{align-items:flex-start}
.sr-ch-done .sr-ch-progress{margin:10px 0 4px}
/* #4 সাকসেস-পপআপ: একটাই প্রিমিয়াম টিক (ইনলাইন SVG, ফন্ট-নির্ভর নয়) —
   শিট সাদা, 1px বর্ডার, শুধু নিউট্রাল-সফট শ্যাডো (ভাসমান এলিমেন্ট)।
   ROUND-2 FIX (ভেরিফায়ার-গ্যাপ): (a) .sr-pop-icon[hidden] নিয়ম —
   app.css:4895-এর display:flex ছাড়া [hidden] কাজ করে না, তাই
   লিগেচার-আইকন লুকাতে এই নিয়ম বাধ্যতামূলক (কোডবেসের
   .sr-offline[hidden]/.sr-video-modal[hidden] প্যাটার্নই);
   (b) শ্যাডো v156 ট্রিপল-ক্লাস + !important ফর্মে — নইলে v155
   blanket (5440-5455, !important) জেতে; (c) SVG এখন সত্যিই 84×84
   viewBox-এ 84px ডিস্ক (আগে 120×72 viewBox 84px ভিউপোর্টে ~36px
   দেখাত — app.js-এর circle/path সেই অনুযায়ী বদলেছে)। */
.sr-pop-sheet.sr-pop-sheet.sr-pop-sheet{background:#fff;border:1px solid #E5E7EB;box-shadow:0 12px 32px rgba(16,24,40,.12)!important}
.sr-pop-icon[hidden]{display:none}
.sr-pop-art svg{width:84px;height:84px}
.sr-pop-art circle{fill:#E9F5EE}
.sr-pop-art path{stroke:var(--primary)}
/* #9 সার্ভিস-কার্ড টগল: বাটন-রিসেট + ডিটেইল ব্লক (বন্ধ = লুকানো)। */
button.sr-dash-svc{flex-direction:column;align-items:stretch;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.sr-dash-svc-detail{display:none;border-top:1px solid #E5E7EB;padding-top:10px;margin-top:2px;flex-direction:column;gap:4px}
.sr-dash-svc-detail span{font-size:13px;color:#475467}
.sr-dash-svc.is-open .sr-dash-svc-detail{display:flex}

/* ============ 2026-10-30 follow-up bundle ============
   (ক) হিস্টোরি-ট্যাব: ফুল-উইডথ wrap — ডানে কাটা নয়, স্ট্যান্ডার্ড
       12px সাইজ; শুধু .sr-hist2-tabs--wrap-ওয়ালা রো-তেই প্রযোজ্য
       (StatsPage-এর ট্যাব অপরিবর্তিত)। -16px মার্জিন = .app-main-এর
       16px প্যাডিং ভেঙে ট্যাব-রো ভিউপোর্ট-প্রান্ত পর্যন্ত যায়।
   (খ) ড্যাশবোর্ড ডোনাট-রো: কমিশন থাকলে নিজের লাইন (সব সার্ভিসে)।
   (গ) বটম-নেভ: নিজের কম্পোজিট লেয়ার বহাল (fixed-এর জন্য নিরাপদ)। */
.sr-hist2-tabs--wrap{flex-wrap:wrap;overflow:visible;margin-left:-16px;margin-right:-16px;padding:2px 16px 12px}
.sr-hist2-tabs--wrap .sr-hist2-tab{flex:1 1 auto;min-width:0;padding:8px 10px;font-size:12px}
.sr-bd-row{flex-wrap:wrap}
.sr-bd-comm{flex:1 1 100%;font-size:12px;font-weight:600;color:#0e6b4f}

/* ============ 2026-10-30 follow-up bundle: প্রোফাইল ডিজাইন ১ ============
   একটাই কার্ড: হালকা-সবুজ শেল > সাদা প্রোফাইল-কার্ড > সফট-অ্যাম্বার
   লেভেল-স্ট্রিপ। পুরনো prof-theme-band / prof-overlap / prof-card-merged
   মার্কআপ আর ব্যবহার হয় না (CSS পড়ে আছে, ক্ষতিহীন)। আচরণ অপরিবর্তিত। */
.prof1-shell{background:#EAF4EE;border:1px solid #E5E7EB;border-radius:20px;padding:12px;margin-bottom:12px}
.prof1-card{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:16px}
.prof1-hero{display:flex;align-items:flex-start;gap:12px}
.prof1-avatar-wrap{position:relative;flex:none}
.prof1-avatar{width:64px;height:64px;border-radius:50%;background:#E6F2EC;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:22px;font-weight:700;color:var(--primary);font-family:inherit}
.prof1-avatar img{width:100%;height:100%;object-fit:cover}
.prof1-cam{position:absolute;right:-2px;bottom:-2px;margin:0}
.prof1-cam-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--primary);cursor:pointer;border:1px solid #E5E7EB;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.prof1-cam-btn .material-symbols-rounded{font-size:15px}
/* Phase 2 ব্যাচ ১, আইটেম ৩ (RC-18): অ্যাভাটার-আপলোড লোডিং-ফিডব্যাক —
   ফাইল-চেঞ্জে .prof1-avatar-wrap-এ .is-loading বসে (ProfilePage.php):
   অ্যাভাটার অস্পষ্ট + স্পিনার-ওভারলে + ক্যামেরা-বাটনে পুনঃক্লিক বন্ধ।
   স্পিনার sr-spin keyframes components.css-এ (ইউজার-শেলে app.css-এর
   আগে লোড হয়)। reduced-motion-এ অ্যানিমেশন বন্ধ (নিচে .app-main-ব্লকে)। */
.prof1-avatar-wrap.is-loading .prof1-avatar{opacity:.55}
.prof1-avatar-wrap.is-loading .prof1-cam-btn{pointer-events:none;opacity:.6}
.prof1-avatar-wrap.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid rgba(255,255,255,.65);border-top-color:var(--primary);border-radius:50%;animation:sr-spin .7s linear infinite;pointer-events:none}
.prof1-id{flex:1;min-width:0}
.prof1-name{font-size:18px;font-weight:700;color:var(--text);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof1-mobile{font-size:13px;color:#52796d;font-family:inherit;margin:2px 0 6px}
.prof1-edit{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--primary);border:1px solid #E5E7EB;text-decoration:none}
.prof1-edit .material-symbols-rounded{font-size:20px}
.prof1-lvl{display:flex;align-items:center;gap:12px;margin-top:10px;padding:13px 14px;background:#FFFAEB;border:1px solid #FEDF89;border-radius:16px}
.prof1-lvl-ic{flex:none;width:42px;height:42px;border-radius:12px;background:#fff;color:#B54708;border:1px solid #FEDF89;display:flex;align-items:center;justify-content:center}
.prof1-lvl-ic .material-symbols-rounded{font-size:22px}
.prof1-lvl-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.prof1-lvl-tx b{font-size:15px;color:#7A4A00}
.prof1-lvl-tx span{font-size:12px;color:#8A5A00}
.prof1-lvl-btn{flex:none;display:inline-flex;align-items:center;gap:5px;background:var(--primary);color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:9px 14px;border-radius:99px}
.prof1-lvl-btn .material-symbols-rounded{font-size:17px}

/* ==========================================================================
   2026-10-30 BUGFIX BUNDLE #2 — ফাইলের শেষে (আগের লেয়ার অপরিবর্তিত)।
   (ক) চ্যালেঞ্জ-টিক আইকন (item 2) — ✅/❌ ইমোজির বদলে Material
       Symbols Rounded (অ্যাপেরই আইকন-সিস্টেম, WebView::msIcon)।
   (খ) স্ট্রে-টিন্ট/গ্লো (item 3) — শুধু সাদা-হওয়ার-কথা সারফেস:
       রিচার্জ অপারেটর-পিকার টাইল (.sr-op-card, base 4198-লাইন
       #f7faf8), ড্রাইভ টাইল-বর্ডার, লিগ্যাসি প্রিমিয়াম-ব্যালেন্স রো-র
       ধূসর গ্র্যাডিয়েন্ট, মার্কেটিং-পপআপ টাইটেলের অফ-ব্র্যান্ড নীল।
       ইচ্ছাকৃত রঙ অপরিবর্তিত: সিলেক্টেড-টাইল মিন্ট, prof1 শেল/
       অ্যাম্বার-স্ট্রিপ, ব্যাজ/tint-soft-*, নোটিশ, হিরো, অফার/ডুয়ো
       কার্ড, লেভেল-কার্ড টিন্ট, ব্র্যান্ড-সবুজ #106050।
   (গ) পপআপ-ফন্ট (item 4) — Hind-ফার্স্ট + font-synthesis:none
       কনটেইনার-লেভেলে: JS-পপআপ/শিট/টোস্ট document.body-তে বসে,
       .sr-ui-স্কোপের বাইরে (app.js:22,519; sheet.js:35-36) — তাই
       .sr-ui-স্কোপের font-নিয়ম (app.css:61-64) ওদের ধরে না।
       কনটেইনার-রুল inherit-এ চলে; বাটন/ইনপুট v155-এর unscoped
       inherit-নিয়মে আসে। আইকন-স্প্যান ছোঁয়া হয়নি (Material
       Symbols ফন্ট অক্ষত — '*' সিলেক্টর ইচ্ছা করে ব্যবহার নয়)।
   (ঘ) অ্যাড-ব্যালেন্স নোটিশ (item 5) — 14px → স্ট্যান্ডার্ড 13px
       (v155-মান; .sr-helper/.sr-hint/.sr-ch-notice p-ও 13px);
       ওজন/রঙ/লাইন-হাইট (700/#14532d/1.6) ও Hind অপরিবর্তিত।
   ========================================================================== */
/* (ক) চ্যালেঞ্জ সম্পন্ন/ব্যর্থ আইকন — সব সাইজে ক্রিস্প ভেক্টর। */
.sr-ch-done-icon .material-symbols-rounded{font-size:36px;color:#2e7d32}
.sr-ch-failed .sr-ch-done-icon .material-symbols-rounded{color:#c62828}
/* (খ) স্ট্রে-টিন্ট → খাঁটি সাদা + 1px #E5E7EB। */
.sr-op-card{background:#FFFFFF;background-image:none;border:1px solid #E5E7EB;box-shadow:none}
.sr-op-card.is-active{background:#e9f5ef;border-color:var(--primary,#106050)}
.sr-op-tile{border-color:#E5E7EB}
.sr-premium-balance{background:#FFFFFF;background-image:none;border:1px solid #E5E7EB;box-shadow:none}
.sr-popup-title{color:var(--text)}
/* (গ) পপআপ/মোডাল/শিট/টোস্ট — Hind-ফার্স্ট, যেখানেই DOM-এ থাকুক। */
.sr-pop-overlay,.sr-pop-sheet,.sr-popup-overlay,.sr-popup-modal,
.sr-modal-wrap,.sr-modal-box,.sr-sheet,.sr-toast-zone,.sr-toast{
  font-family:var(--font-main);font-synthesis:none}
.sr-pop-sheet .sr-pop-title,.sr-pop-sheet .sr-pop-sub,.sr-pop-sheet .sr-pop-notice,
.sr-pop-sheet .sr-pop-row,.sr-popup-modal .sr-popup-title,.sr-popup-modal .sr-popup-body{
  font-family:var(--font-main)}
/* (ঘ) অ্যাড-ব্যালেন্স নোটিশ — স্ট্যান্ডার্ড 13px-এ ফেরত (Hind-ই থাকে)। */
.sr-ab-notice p{font-size:13px;font-family:var(--font-main)}

/* ==========================================================================
   2026-10-30 BUNDLE — 10 items (local only, no deploy).
   Appended at end so it wins the cascade; earlier layers untouched.
   ========================================================================== */
/* (1) BENGALI FONT CLARITY — family + weight + colour, NOT size.
   Root cause: body/secondary text rendered Hind 400 in muted #71827c
   (modal text, sheet text, hints, popups outside .sr-ui scope).
   Fix: Hind Siliguri stack everywhere, weight 500-600, dark colours
   (#15211d body / #344054 secondary / #475467 hints). The 13px
   add-balance notice size is re-asserted, NOT enlarged. */
.sr-ui p,.sr-ui span:not(.material-symbols-rounded),.sr-ui li,.sr-ui td,.sr-ui th{font-family:var(--font-main)}
.sr-modal-text{color:#344054!important;font-weight:500}
.sr-pop-sheet .sr-pop-sub,.sr-pop-sheet .sr-pop-notice,.sr-popup-modal .sr-popup-body{color:#344054;font-weight:500;line-height:1.7}
.sr-sheet p,.sr-sheet .sr-detail-row .v,.sr-bottom-sheet p{color:#1D2939;font-weight:500}
.sr-toast{font-family:var(--font-main);font-weight:600;color:var(--text)}
.sr-ui .sr-hint,.sr-ui .sr-helper{color:#475467;font-weight:500}
.sr-ui .sr-muted{color:#475467;font-weight:500}
.sr-note-body{color:#1D2939;font-weight:500}
.sr-ab-notice p{font-size:13px!important;font-weight:700;color:#14532d;line-height:1.6}
.sr-hist2-notice p{color:#1D2939;font-weight:500}
/* (4) STANDARD FORM SPACING — 16px between last field and action.
   Block forms: margins collapse with .sr-field's 14px, so the effective
   gap is 16px. Block buttons + the Send-Money slide action included;
   inline/chat/search forms are not .sr-btn-block and are untouched.
   (Flex forms do NOT collapse margins — see the flex fix below.) */
.sr-ui form .sr-btn-block{margin-top:16px}
.sr-ui form .sr-field + .sr-btn,.sr-ui form .sr-field + .sr-btn-block{margin-top:16px}
.sr-ui .sm-action{margin-top:16px}
/* (4-fix 2026-10-30) FLEX EXCEPTION — .sm-flow>form is flex, so its 14px
   gap does NOT collapse with .sm-action's 16px margin (that gave 30px).
   Inside the flex form the action needs only 2px margin: 14 + 2 = 16px
   exactly. Other forms keep their 16px rules above, untouched. */
.sm-flow>form>.sm-action{margin-top:2px}
/* (4-fix 2026-10-30) CONFIRM FORM — the bare .sr-confirm-btn after the
   PIN field had no 16px rule (14px field margin only). Block layout:
   this 16px collapses with the field's 14px to an exact 16px gap.
   Scoped to this form only; other slide buttons untouched. */
#send-money-confirm .sr-confirm-btn{margin-top:16px}
/* (2b) NUMBERED PAGINATION — nav + ellipsis + last-page jump. */
.sr-pagination .sr-page-nav{font-size:12.5px;padding:0 10px}
.sr-pagination .sr-page-ellipsis{align-self:center;color:#667085;font-weight:700}
/* (8) HISTORY TABS — full-width scroll REPLACES wrap-mode.
   Edge-to-edge (-16px margins beat .app-main padding), horizontal
   scroll restored, standard v167 size (12.5px/700, flex:none). */
.sr-hist2-tabs--full{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:2px 16px 12px}
.sr-hist2-tabs--full .sr-hist2-tab{flex:none;white-space:nowrap;font-size:12.5px;font-weight:700;padding:10px 16px}
/* (9a/9b) PROFILE — ONE single card, sections joined by a divider
   (no shell/card/strip layers). Verified tick is brand-green (#106050). */
.prof2-card{background:#fff;border:1px solid #E5E7EB;border-radius:20px;padding:16px;margin-bottom:12px;box-shadow:0 4px 20px rgba(16,24,40,.06)}
.prof2-card .prof1-hero{padding:0}
.prof2-divider{height:1px;background:#E5E7EB;margin:14px 0 2px}
.prof2-card .prof1-lvl.prof2-lvl{margin-top:12px;border:1px solid #FEDF89;background:#FFFAEB;border-radius:16px}
.prof2-verified{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;border:0;background:none;cursor:pointer;color:#106050;font-size:12px;font-weight:700;font-family:inherit;padding:0 2px}
.prof2-verified .material-symbols-rounded{font-size:17px;color:#106050}
.prof2-verified-note{display:flex;align-items:flex-start;gap:8px;background:#EFF8FF;border:1px solid #BDE0FE;border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:13px;font-weight:500;color:#16425B;line-height:1.6}
.prof2-verified-note[hidden]{display:none}
.prof2-verified-note .prof2-verified-ic .material-symbols-rounded{font-size:20px;color:#106050}
.prof2-verified-note a{margin-left:auto;flex:none;color:var(--primary);font-weight:700;text-decoration:none}
/* (3) COMMISSION — chart-like bar under each per-1000 row (brand green,
   soft-neutral track; width is relative to the card's own max). */
.prof-comm-bar{height:6px;background:var(--border-soft);border-radius:99px;margin:0 16px 10px;overflow:hidden}
.prof-comm-bar span{display:block;height:100%;background:var(--primary);border-radius:99px}
/* (7) NOTE PRESETS — small, unobtrusive picker beside the note input. */
.note-preset-wrap{display:inline-flex;gap:6px;align-items:center;margin-top:6px}
.note-preset-wrap .note-preset-sel{flex:1;min-width:0;max-width:220px;font-size:12.5px;padding:8px 10px}
.note-preset-wrap .note-preset-save{flex:none}
/* (10) REPORTS — own section entry on Helpline + ticket cards. */
/* (2a) .hl-reports-entry deleted with its PHP: the in-body reports
   card is gone; the support-card "Report" button is the one entry. */
.rp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rp-head .sr-btn{flex:none}
.rp-new{margin-bottom:14px}
.rp-list{display:flex;flex-direction:column;gap:12px}
.rp-ticket{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:14px 16px}
.rp-ticket-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer}
.rp-ticket-no{font-size:12px;font-weight:700;color:var(--primary)}
.rp-ticket-head b{flex:1;min-width:120px;font-size:14px;color:var(--text)}
.rp-ticket-date{font-size:12px;color:#667085}

/* ==========================================================================
   2026-10-30 FOLLOW-UP BUNDLE (items 1-4, local only, no deploy).
   Inserted BEFORE the icon-protection guard below, which stays last
   in this file and untouched. No rule here sets font-family on a
   .material-symbols-rounded span (icon spans are never selected:
   text rules target p / classed containers only, never bare span),
   and NO font-size is changed by the item-1 rules below.
   ========================================================================== */
/* (1) POPUP NUMBERS STILL UNCLEAR — root cause, not just the one popup:
   Bundle 3 (app.css:6348) raised .sr-pop-sub / .sr-pop-notice /
   .sr-popup-body only to 500/#344054 (bases #5b7268/#43554f at
   app.css:4899-4900), which is still thin for Bengali digits at
   13.5-14px — and the same thin/muted pattern survived untouched
   in other overlays: the notification modal (.nt-modal-text
   #4a5a55/#2c423c at 400), the drive-success notice/sub
   (.drv-notice-tx 12.5px #3c4f49 and .drv-success-sub #5a6b65,
   both 400 — the drive "১০ থেকে ১৫ মিনিট…" line also lives here
   via u.drive.manual_wait, not only in the .sr-pop-notice
   request-accepted popup from PopupMessageService
   DEFAULT_NOTICES drive). The add-balance sheet's own fix was
   stronger (700/#14532d) — so popups now get the same treatment
   at 600 (inside the brief's 500-600 band) in dark #1D2939 with
   the Hind Siliguri stack and font-synthesis:none, sizes untouched.
   .sr-pop-row .v was already 700/#122019; it only gains the family. */
.sr-pop-sheet .sr-pop-sub,.sr-pop-sheet .sr-pop-notice,
.sr-popup-modal .sr-popup-body,.nt-modal-body .nt-modal-text,
.drv-notice-tx,.drv-success-sub{font-family:var(--font-main);font-weight:600;color:#1D2939;font-synthesis:none}
.sr-pop-sheet .sr-pop-row .k{font-family:var(--font-main);font-weight:600;color:#1D2939}
.sr-pop-sheet .sr-pop-row .v{font-family:var(--font-main)}
.sr-modal-text{color:#1D2939!important;font-weight:600}
.sr-sheet p,.sr-bottom-sheet p{font-weight:600;color:#1D2939}
.sr-sheet .sr-detail-row .k{font-weight:500;color:#344054}
/* (2a) REPORT BUTTON — third button in the support-card row (beside
   Call + AI Assistant). Wrap + tighter padding so 3 buttons fit a
   narrow phone without squeezing labels; the removed in-body
   .hl-reports-entry card's CSS is deleted below with its PHP. */
.hl-support-btns{flex-wrap:wrap}
.hl-support-btns .sr-btn{flex:1 1 0;min-width:0;padding:13px 8px;font-size:14px}
/* (3) PROFILE CARD — icon-only verified tick + soft single-hue
   layered card. Markup (.prof2-card, one card, divider, prof2-lvl)
   is UNCHANGED. The card is flat white (TK-2 FIX-1: the gradient
   override is removed per the design lock-in — no gradient/glow);
   the bottom level section is a white card (soft-neutral shadow
   only, #106050 accents: level icon tile + upgrade button). The old amber
   (#FFFAEB/#FEDF89/#7A4A00) level strip is replaced by this. The
   verified tick keeps the homepage glyph ('verified') in homepage
   green (#106050) with FILL, at its existing 17px. */
.prof2-verified{padding:2px}
.prof2-verified .material-symbols-rounded{font-size:17px;color:#106050;font-variation-settings:'FILL' 1}
.prof2-card{background:#fff;border-color:#E5E7EB;box-shadow:0 4px 20px rgba(16,24,40,.06)}
.prof2-card .prof1-lvl.prof2-lvl{background:#FFFFFF;border:1px solid #E5E7EB;border-radius:16px;box-shadow:0 4px 16px rgba(16,24,40,.06)}
.prof2-card .prof1-lvl-ic{background:#EAF5F0;border:1px solid #D6E9DF;color:var(--primary)}
.prof2-card .prof1-lvl-tx b{color:var(--text)}
.prof2-card .prof1-lvl-tx span{color:#475467}
/* FADE THROUGH (2026-11-10, আইটেম ১০৩, F-TX-1/F-TX-2 — রিসার্চ-স্পেস §৭ exact;
   2026-11-09-এর ১৫০ms parallel-সংস্করণ বাতিল):
   Cross-document View Transitions API, CSS-only — JS লাইব্রেরি নেই, MPA-তে
   startViewTransition() কল নেই (app.js-এ নেই — যাচাইকৃত)। গ্লোবাল opt-in
   শুধু prefers-reduced-motion: no-preference-এ (@view-transition ভেতরে)।
   রুট-স্ন্যাপশট নিষ্ক্রিয় (whole-page sweep নয় — AGENTS.md §৭(খ) বহাল)।
   PERSISTENT SHELL: হেডার (.sr-green-head/.sr-white-head — একরূপ ইন-অ্যাপ
   অ্যাপ বার; F-TX-3: হোমেও whiteHead, উচ্চতা ৬৬px) ও বটম-ন্যাভ
   (.sr-bottomnav) shared view-transition-name পায় (site-header /
   site-nav-style, প্রতি পেজে ঠিক একবার — ডুপ্লিকেট পুরো ট্রানজিশন বাতিল
   করে, V-TX-9) — VT ক্রোমকে স্থিতিশীল রাখে; গ্রুপ/old/new-এ animation:none
   বলে হেডার/ন্যাভ কখনো অ্যানিমেট হয় না, শুধু এক ফ্রেমে কনটেন্ট বদলায়
   (জ্যামিতি একই বলে কাট অদৃশ্য)। শুধু .app-main (sr-page) Fade Through:
   SEQUENTIAL — old ১০০ms fade-out, তারপর new ১৫০ms fade-in (মোট ২৫০ms =
   --dur-page); easing --ease-enter cubic-bezier(0,0,0,1) দুই ফেজেই
   (রিসার্চ-পেজে একটাই easing; per-phase সময় পেজে নেই — ১০০/১৫০ ভাগ
   আমার সিদ্ধান্ত: out-ফেজ শুধু পুরনো কনটেন্ট সরায়, in-ফেজই নতুন
   কনটেন্টের আগমন বহন করে বলে বড় ভাগ পায়)। scale .98 (আগের মতোই —
   রিসার্চ-পেজের "~৯২%" অস্পষ্ট; ০.৯২ স্কেল চোখে পড়ত, মালিকের
   "বোঝাই যাবে না" চাওয়ার বিরোধী — তাই .98 বহাল)। Back-এও একই
   fade-through (দিকহীন — আলাদা back-অ্যানিমেশন নেই, AGENTS.md §৭(গ))।
   স্ক্রল-রিস্টোর: রিসার্চ-পেজে নিয়ম নেই — ব্রাউজার-ডিফল্ট বহাল
   (history.scrollRestoration বদলানো হয়নি); হেডার-উচ্চতা এখন সব
   ইন-অ্যাপ পেজে ৬৬px বলে রিস্টোর স্থিতিশীল লেআউটে গণনা হয় (F-TX-5)।
   ব্যান্ড/অথ/জেনেরিক হেডারে shared name নেই (ভিন্ন জ্যামিতি/ধরন —
   অথ-পেজ first-load পথ, VT চলেই না; সেখানে হেডার আগের মতো hard-cut)।
   FALLBACK (F-TX-2): VT-সাপোর্ট থাকলে .app-main-এর CSS srPageFade চলে
   না (@supports গেট) — এক নেভিগেশনে ঠিক একটা অ্যানিমেশন; VT নেই
   (পুরনো WebView/Firefox) এমন ব্রাউজারে শুধু ২৫০ms ফেড চলে, কোনো
   এরর/ফ্ল্যাশ নয়। VT-ব্রাউজারে first-load-এ আর এন্টার-ফেড নেই (instant
   first paint — রিসার্চ-গচা: first load-এ ট্রানজিশন হয় না)।
   prefers-reduced-motion-এ instant; রিলোডে sr-no-fade বহাল
   (WebView.php-র ইনলাইন-নিয়ম + নিচের html.sr-no-fade-নিয়ম)।
   শিট/মোডাল/পপআপের নিজস্ব ট্রানজিশন অপরিবর্তিত। */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(sr-page){animation-duration:var(--dur-page)}
::view-transition-old(sr-page){animation:srPageOut 100ms var(--ease-enter) both}
::view-transition-new(sr-page){animation:srPageIn 150ms var(--ease-enter) 100ms both}
@keyframes srPageOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}
@keyframes srPageIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.sr-green-head,.sr-white-head{view-transition-name:site-header}
.sr-bottomnav{view-transition-name:site-nav-style}
::view-transition-group(site-header),::view-transition-group(site-nav-style){animation-duration:var(--dur-page)}
::view-transition-old(site-header),::view-transition-new(site-header),::view-transition-old(site-nav-style),::view-transition-new(site-nav-style){animation:none}
html.sr-no-fade::view-transition-old(sr-page),html.sr-no-fade::view-transition-new(sr-page),html.sr-no-fade::view-transition-old(site-header),html.sr-no-fade::view-transition-new(site-header),html.sr-no-fade::view-transition-old(site-nav-style),html.sr-no-fade::view-transition-new(site-nav-style){animation:none}
/* PAGE FADE-IN — Fade Through-এর ফলব্যাক (2026-11-10, আইটেম ১০৩, F-TX-2):
   VT API-নেই এমন ব্রাউজার/পুরনো WebView-এ এটাই পেজ-এন্টার এফেক্ট
   (২৫০ms = --dur-page, easing --ease-enter)। VT-সাপোর্ট থাকলে
   @supports-গেটে বন্ধ — ডাবল-ফেড নয় (C-A1 ফিক্স)। 2026-11-03-এর
   .92→1 ফ্লোর বহাল (0→1 ফুল-ফেড সাদা-ঝলকানির উৎস — বাদ); scale .98→1
   শুধু .app-main-এর নিজের উপর (ancestor-অ্যানিমেশন নয় — AGENTS.md §৭)।
   translateX/সাইড-স্লাইড নেই। শুধু <main class="app-main">-এ —
   লোডার/শিট/পপআপ (main-এর বাইরে) এতে পড়ে না।
   prefers-reduced-motion-এ অ্যানিমেশন বন্ধ। */
.app-main{view-transition-name:sr-page;animation:srPageFade var(--dur-page) var(--ease-enter) both}
@supports (view-transition-name: sr-page){
  .app-main{animation:none}
}
@keyframes srPageFade{from{opacity:.92;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@keyframes srFragIn{from{opacity:.92;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.app-main{animation:none}.prof1-avatar-wrap.is-loading::after{animation:none}::view-transition-group(sr-page){animation-duration:0s}::view-transition-old(sr-page),::view-transition-new(sr-page){animation:none}}
/* হ্যামবার্গার-মেনু শিট (2026-11-09, আইটেম ৯৩, F-93-5): #sr-menu-sheet
   লুকানো টেমপ্লেট — SRSheet innerHTML-কপি করে খোলে। লিংক-সারি
   44px টাচ-টার্গেট, ফোকাস-দৃশ্যমান (B9); টগল-বাটন পূর্ণ-প্রস্থ। */
.sr-menu-sheet-nav{display:flex;flex-direction:column;gap:4px}
.sr-menu-sheet-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:12px;color:var(--text);text-decoration:none;font-size:15px;font-weight:600}
.sr-menu-sheet-link .material-symbols-rounded{color:var(--primary);font-size:22px}
.sr-menu-sheet-link:active{background:var(--primary-soft)}
.sr-menu-sheet-link:focus-visible,.sr-menu-theme-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sr-menu-theme-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;margin-top:12px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.sr-menu-theme-toggle .material-symbols-rounded{color:var(--primary);font-size:22px}

/* ==========================================================================
   2026-10-31 ওয়েলকাম-পেজ ফিক্স (লোকাল মাত্র): হেডার 38vh + ওভারল্যাপ
   -48px-এর পরেও ছোট/শর্ট ফোনে লগইন/সাইনআপ বাটন স্ক্রল ছাড়া দেখা
   যাবে — শর্ট-ভিউপোর্টে হেডার/ব্যাজ/টাইটেল আরও কমে। আইকন-গার্ডের
   আগে রাখা হলো যাতে গার্ড ফাইলের একদম শেষেই থাকে। এই ব্লকে কোনো
   font-family নিয়ম নেই (আইকন-স্প্যান ওভাররাইডের ঝুঁকি নেই)।
   ========================================================================== */
@media (max-height: 700px) {
  .sr-wel-head { min-height: 32vh; min-height: 32svh; padding-top: 16px; padding-bottom: 52px; }
  .sr-wel-badge { width: 104px; height: 104px; }
  .sr-wel-badge img { width: 60px; height: 60px; }
  .sr-wel-title { margin-top: 14px; }
  .sr-wel-body { margin-top: -40px; }
  .sr-wel-card { padding-top: 20px !important; padding-bottom: 16px !important; }
}
@media (max-height: 600px) {
  .sr-wel-head { min-height: 28vh; min-height: 28svh; padding-top: 12px; padding-bottom: 44px; }
  .sr-wel-badge { width: 88px; height: 88px; }
  .sr-wel-badge img { width: 52px; height: 52px; }
  .sr-wel-title { margin-top: 10px; font-size: clamp(18px, 5vw, 20px); }
  .sr-wel-body { margin-top: -34px; }
}
@media (max-width: 360px) {
  .sr-wel-title { font-size: clamp(18px, 5.4vw, 20px); }
  .sr-wel-card { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ==========================================================================
   2026-10-31 BUNDLE — (1) শিট ন্যাভের উপরে, শুধু ন্যাভ-পেজে;
   (2) রিপোর্ট-পেজ: + বাটন + স্ট্যাটাস-ট্যাব।
   আইকন-গার্ডের আগে রাখা হলো — গার্ড ফাইলের একদম শেষেই থাকবে।
   এই ব্লকে কোনো font-family নিয়ম নেই (আইকন-স্প্যান অক্ষত)।
   --------------------------------------------------------------------------
   (1) শিট-উপরে-ন্যাভ — আগের "স্ট্যান্ডার্ড" আচরণে ফেরত:
   - ট্রিগার শুধু html.sr-has-nav — WebView::layout() শুধু ৪ ন্যাভ-পেজে
     (/home, /user/history, /user/stats, /user/profile) এই ক্লাস দেয়
     (nav-ফ্ল্যাগ + exact path — আগের ন্যাভ-গেটিং লজিকই)।
     ডিটেইল-পেজে ক্লাস নেই → .sr-sheet আগের মতো bottom:0-তেই থাকে।
   - --sr-nav-h = ন্যাভ-বারের আসল উচ্চতা (app.js মেপে বসায়;
     JS-বন্ধ/ব্যর্থ হলে ফলব্যাক 64px + safe-area)। ন্যাভের নিজের
     padding-bottom-এ safe-area থাকে বলে মাপা উচ্চতায় safe-area
     আগেই ধরা — আলাদা করে যোগ করা হয় না (ডাবল-গণনা নয়)।
   - খোলা (.is-open) শিটের bottom = ন্যাভ-উচ্চতা → শিটের নিচের
     কিনারা ন্যাভ-বারের উপরে, ন্যাভ-বার শিটের নিচে পুরো দৃশ্যমান। শিটের নিজের
     bottom-padding (32px + safe-area-inset-bottom) অপরিবর্তিত —
     শিটের কনটেন্ট home-indicator এলাকায় ঢোকে না।
   - max-height 85vh থেকে ন্যাভ-উচ্চতা বাদ: শিট যত লম্বাই হোক,
     উপরে 15vh ফাঁকা থাকে (আগের মতো) — কিবোর্ড খুললে ভিউপোর্ট
     ছোট হলেও শিটের উপরের অংশ কাটা পড়ে না।
   - ব্যাকড্রপের bottom-ও ন্যাভ-উচ্চতা: ব্যাকড্রপ ন্যাভ-স্ট্রিপ
     ঢাকে না। ফলে শিট খোলা অবস্থায় ন্যাভে ট্যাপ সরাসরি <a>-তে
     পৌঁছায় → সাধারণ নেভিগেশন হয় (শিট পেজ-আনলোডে এমনিই
     চলে যায়); ব্যাকড্রপ-ট্যাপে বন্ধ হওয়া আগের মতোই থাকে।
     .sr-sheet-backdrop (সার্ভার-শিট: অ্যাড-ব্যালেন্স, "আরো",
     সার্ভিস-অফ) + .sr-sheet-veil (SRSheet ডায়নামিক শিট) — দুটোই।
   - কিবোর্ড: এই ব্লক শুধু bottom/max-height বদলায় — শিটের
     parent (reparent-এ body), position:fixed, overflow-y:auto,
     ফোকাস-কোড, body-overflow হ্যান্ডলিং — সব অপরিবর্তিত। তাই
     কিবোর্ড-আচরণে কোনো নতুন পথ আসে না (বিস্তারিত রিপোর্টে)।
   ========================================================================== */
html.sr-has-nav {
  --sr-nav-h: calc(64px + env(safe-area-inset-bottom, 0px));
}
/* শুধু .is-open শিটে bottom বদলায় — এটা জরুরি: বন্ধ শিট
   translateY(100%)-এ থাকে; bottom আগেই তুলে দিলে বন্ধ শিটের
   নিচের ন্যাভ-উচ্চতা-টুকু খোলা পেজে সাদা স্ট্রিপ হয়ে উঁকি দিত।
   খোলা শিটে bottom = ন্যাভ-উচ্চতা → নিচের কিনারা ন্যাভের উপরে। */
html.sr-has-nav .sr-sheet.is-open {
  bottom: var(--sr-nav-h);
  max-height: calc(85vh - var(--sr-nav-h));
}
html.sr-has-nav .sr-sheet-backdrop,
html.sr-has-nav .sr-sheet-veil {
  bottom: var(--sr-nav-h);
}

/* ==========================================================================
   2026-10-31 SHEET-FIX2 — ফিক্সড শিট-ক্রোম + শুধু কনটেন্ট-স্ক্রল।
   সমস্যা (আতিক ভাইয়ের রিপোর্ট): এড-ব্যালেন্স শিট "স্ক্রল-ভিউ" হয়ে
   গিয়েছিল — কারণ বেস .sr-sheet-এ overflow-y:auto ছিল, তাই
   হ্যান্ডল+টাইটেল+নোটিশসহ পুরো শিটই স্ক্রল হতো; কিবোর্ড খুললে
   ভিউপোর্ট ছোট হয়ে সেটা আরও খারাপ দেখাত।
   ফিক্স (শুধু CSS — কোনো JS/মার্কআপ বদল নয়):
   - শিট নিজে flex-কলাম + overflow:hidden → শিট ফিক্সডভাবে খোলে,
     হ্যান্ডল/টাইটেল/নোটিশ কখনো স্ক্রল হয় না, কখনো কাটা পড়ে না।
   - স্ক্রল শুধু কনটেন্ট-অংশে: .sr-sheet-body (Components/SRSheet),
     .sr-sheet > form (এড-ব্যালেন্স), .sr-sheet > .sr-more-grid
     (More শিট) — min-height:0 + overscroll-behavior:contain, যাতে
     পেছনের পেজের স্ক্রল টানা না হয়।
   - :not([hidden]) গেট জরুরি: .sr-sheet-এ display:flex সরাসরি
     বসালে [hidden] অকার্যকর হতো (author-origin UA-কে হারায়) —
     বন্ধ শিট দেখা যেত। তাই flex শুধু unhidden শিটে।
   - ন্যাভ-লিফট অক্ষত: html.sr-has-nav .sr-sheet.is-open-এর
     bottom বদলায়নি (শুধু vh-এর পাশে dvh যোগ — ছোট/বড় ফোনে
     + কিবোর্ডে ভিউপোর্ট-সঠিক উচ্চতা)।
   - ব্যাকড্রপের bottom আগের মতো ন্যাভ-উচ্চতায় → শিট খোলা
     অবস্থায় ন্যাভ-ট্যাপ আগের মতোই কাজ করে।
   ========================================================================== */
.sr-sheet:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 85vh;
  max-height: 85dvh;
}
html.sr-has-nav .sr-sheet.is-open {
  max-height: calc(85vh - var(--sr-nav-h));
  max-height: calc(85dvh - var(--sr-nav-h));
}
.sr-sheet-handle,
.sr-sheet-head,
.sr-sheet-title,
.sr-sheet > .sr-ab-notice {
  flex: none;
}
.sr-sheet-body,
.sr-sheet > form,
.sr-sheet > .sr-more-grid {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* ==========================================================================
   2026-10-31 SHEET-NAV-HIDE + BOX-POLISH (আতিক ভাই, স্ক্রিনশট-নির্দেশ)।
   শুধু ২ শিট: অ্যাড-ব্যালেন্স [data-add-balance-sheet] + আরো
   [data-more-sheet] — দুটোই .sr-sheet-bottom। খোলা-স্টেট app.js
   html.sr-sheet-open-এ মিরর করে (MutationObserver — সার্ভার-শিটের
   inline open/close-ও ধরে); অন্য শিট (সার্ভিস-অফ/SRSheet) এই ব্লকের
   বাইরে — তাদের ফিক্স১-আচরণ (লিফট + দৃশ্যমান ন্যাভ) অপরিবর্তিত।
   - খোলা থাকলে ন্যাভ সম্পূর্ণ লুকানো (display:none, ইনস্ট্যান্ট —
     transition নয়; শিটের transform-অ্যানিমেশন ছোঁয়া হয়নি)।
   - ন্যাভ লুকানো থাকায় ফিক্স১-লিফট বাতিল: শিট একদম নিচে (bottom:0),
     নিচে ফাঁকা গ্যাপ নেই; শিটের নিজের bottom-padding
     (32px + safe-area-inset-bottom) অক্ষত — কনটেন্ট home-indicator
     এলাকায় ঢোকে না। ব্যাকড্রপও পুরো স্ক্রিন ঢাকে (bottom:0) →
     ব্যাকড্রপ-ট্যাপে বন্ধ আগের মতোই।
   - বন্ধ হলে html.sr-sheet-open সরে যায় → ন্যাভ + লিফট আগের মতোই।
   - বক্স-পলিশ (শুধু ২ শিটের বক্স — data-অ্যাট্রিবিউটে বাঁধা, যাতে
     সার্ভিস-অফ শিটে না লাগে): উপরের রেডিয়াস 28px, হ্যান্ডল 48×5px
     কেন্দ্রিক (margin:auto অক্ষত), প্যাডিং 14px 22px (নিচের
     safe-area-প্যাডিং অক্ষত)। শ্যাডো নতুন নয় —
     আগের v156-নিয়মের সফট-নিউট্রাল শ্যাডোই (0 -8px 32px) থাকে।
     (পলিশ-নিয়ম html.sr-sheet-open-এ গেট করা হয়নি ইচ্ছা করেই:
     বন্ধ শিটে hidden থাকায় :not([hidden]) ম্যাচ করে না, আর
     ৩০০ms ক্লোজ-ট্রানজিশনে গেট করলে রেডিয়াস মাঝপথে বদলে যেত।)
   - ফিক্স২ অক্ষত: এই ব্লকে display/overflow/flex-নিয়ম নেই —
     হ্যান্ডল/টাইটেল স্থির + শুধু বডি-স্ক্রল আগের মতোই।
     কনটেন্ট/টাইটেল/বাটন/চিপ — কিছুই বদলায়নি, শুধু বক্স-পলিশ।
   - সমতা-নোট: bottom/max-height নিয়ম ফিক্স১/ফিক্স২-এর সমান
     specificity-তে পরে আসে বলে খোলা-অবস্থায় জেতে; বন্ধ-অবস্থায়
     এই ব্লক ম্যাচই করে না, ফিক্স১/ফিক্স২-নিয়মই থাকে।
   ========================================================================== */
html.sr-sheet-open .sr-bottom-nav,
html.sr-sheet-open .sr-bottomnav {
  display: none;
}
html.sr-sheet-open .sr-sheet.is-open {
  bottom: 0;
  max-height: 85vh;
  max-height: 85dvh;
}
html.sr-sheet-open .sr-sheet-backdrop,
html.sr-sheet-open .sr-sheet-veil {
  bottom: 0;
}
.sr-sheet-bottom:not([hidden])[data-add-balance-sheet],
.sr-sheet-bottom:not([hidden])[data-more-sheet] {
  border-radius: 28px 28px 0 0;
  padding: 14px 22px calc(32px + env(safe-area-inset-bottom, 0px));
}
.sr-sheet-bottom[data-add-balance-sheet] .sr-sheet-handle,
.sr-sheet-bottom[data-more-sheet] .sr-sheet-handle {
  width: 48px;
  height: 5px;
  background: #d4d4d4;
  border-radius: 999px;
}

/* ==========================================================================
   2026-10-31 SHEET-OVERFLOW — অ্যাড-ব্যালেন্স শিটের অ্যামাউন্ট-বক্স
   ওভারফ্লো ফিক্স (আতিক ভাইয়ের স্ক্রিনশট-নির্দেশ)।
   রুট-কজ (Playwright-এ লোকাল ফাইল দিয়ে প্রমাণিত):
   (১) app.js:658-676 "Bottom-sheet reparent" (2026-10-31 বান্ডিল)
       .sr-sheet-কে <div class="sr-ui">-এর ভেতর থেকে document.body-তে
       সরায় (স্ট্যাকিং-কনটেক্সট থেকে বাঁচতে) — ফলে শিট আর .sr-ui-এর
       ভেতরে থাকে না (ancestor-চেইনে BODY সরাসরি)।
   (২) একমাত্র border-box রিসেট components.css:12-এ .sr-ui-স্কোপড
       (.sr-ui, .sr-ui * { box-sizing: border-box }) — শিট .sr-ui-এর
       বাইরে যেতেই ইনপুট content-box-এ ফিরে যায় (UA ডিফল্ট)।
   (৩) তখন .sr-input { width:100% } (components.css) + আইকন-প্যাডিং
       padding-left:44px (components.css:119) + padding-right:16px
       + 2px বর্ডার = 344px-এর ফর্মে 406px ইনপুট — 62px ওভারফ্লো
       (পরিমাপ: form scrollWidth 406 vs clientWidth 344)।
   (৪) ফিক্স২-এর .sr-sheet > form { overflow-y:auto } থেকে overflow-x
       auto-তে কম্পিউট হয় — ফর্ম 62px হরিজন্টাল-স্ক্রলযোগ্য হয়;
       আসল ফোনে ইনপুট-ফোকাস/কিবোর্ডের scroll-into-view ফর্মকে
       সরালে চিপ-রো বাঁয়ে কাটা + বাটনের ডান-প্রান্ত ছোট দেখায়
       (স্ক্রিনশটের ~62px সিগনেচারের সাথে মিলে)।
   ফিক্স (শুধু CSS, reparent-এর উদ্দেশ্য অক্ষত — শিট body-তেই থাকে):
   - শিটের ভেতরে border-box ফিরিয়ে আনা (ইনপুট/চিপ/বাটন) — তাই
     width:100% আর প্যাডিং/বর্ডার-সহ কখনো wrap-এর বাইরে যাবে না।
   - ফর্মে overflow-x:hidden স্পষ্টভাবে — ফর্ম আর কখনো
     হরিজন্টাল-স্ক্রল হবে না (ভার্টিকাল স্ক্রল অক্ষত)।
   - ইনপুট-wrap/chip-রো-তে max-width:100% + বাটনে width:100% —
     যেকোনো স্ক্রিন-উইডথে পুরোটা শিটের ভেতরে।
   ছোঁয়া হয়নি: ফিক্স২ flex-কলাম/বডি-স্ক্রল, ন্যাভ-লুকানো,
   নো-স্লাইড, EOF আইকন-গার্ড (ফাইলের শেষেই আছে)।
   ========================================================================== */
.sr-sheet .sr-input,
.sr-sheet .sr-select,
.sr-sheet .sr-textarea,
.sr-sheet .sr-amt-chip,
.sr-sheet .sr-btn-block {
  box-sizing: border-box;
}
.sr-sheet > form {
  overflow-x: hidden;
  min-width: 0;
}
.sr-sheet .sr-input-wrap {
  min-width: 0;
  max-width: 100%;
}
.sr-sheet .sr-input {
  max-width: 100%;
}
.sr-sheet .sr-amt-chips {
  max-width: 100%;
}
.sr-sheet .sr-btn-block {
  width: 100%;
}

/* (2) রিপোর্ট-পেজ — ছোট + বাটন + স্ট্যাটাস-ট্যাব। টিকেট-কার্ডের
   (.rp-ticket) কোনো নিয়ম এখানে নেই — কার্ডের রূপ অপরিবর্তিত।
   ট্যাবগুলো বিদ্যমান .sr-tabs/.sr-tab প্যাটার্নের সাধারণ GET লিংক
   (সার্ভার-সাইড ফিল্টার, JS ছাড়াও চলে)। */
.rp-newbar { margin-bottom: 12px; }
.rp-new-btn {
  display: inline-flex; align-items: center; gap: 6px;
}
.rp-new-btn .material-symbols-rounded { font-size: 20px; }
.rp-tabs { margin-bottom: 14px; }
.rp-tabs .sr-tab { white-space: nowrap; }

/* Plan page (.sr-plan-*) — redesign 2026-11-07, v8 design-fix 2026-11-07
   (mockup-faithful).
   Plan green ONLY here: scoped vars on .sr-plan-page (no new
   root-variable block, no global token override); shell/global brand
   green untouched. Selected state = 2px border (term cards) + darker
   pastel, flat — no shadow/lift (F-AP-61; v8 shadow+lift superseded). */
.sr-plan-page{--plan-brand:var(--primary);--plan-brand-dark:var(--primary-dark);--plan-ink:var(--text);--plan-muted:var(--muted);--plan-line:#edf2f1;--plan-line-soft:#e9f0ee;--plan-tint:#EAF4EE;--plan-chip:#EFF2F0;--plan-warn-bg:#fdeecd;--plan-warn-line:#f5d9a0;--plan-warn-tx:#9a6206;--plan-bg:#FFFFFF;--plan-hero:#0A3D26;background:#FFFFFF;padding-top:4px}
.app-shell.sr-flat-white:has(.sr-plan-page) .app-main{background:#FFFFFF}
.sr-plan-page .sr-lvl-ic-big{background:var(--plan-brand);box-shadow:none}
.sr-plan-notice{margin-top:10px;background:var(--plan-warn-bg);border:1px solid var(--plan-warn-line);color:var(--plan-warn-tx);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600;line-height:1.5}
.sr-plan-offer{display:flex;gap:10px;align-items:center;background:var(--plan-tint);border:1px solid rgba(16,96,80,.32);border-radius:14px;padding:10px 12px;margin-bottom:22px}
.sr-plan-offer-ic{flex:none;width:32px;height:32px;border-radius:10px;background:var(--plan-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.sr-plan-offer-ic .material-symbols-rounded{font-size:17px}
.sr-plan-offer-tx{min-width:0;flex:1}
.sr-plan-offer-title{font-size:14px;font-weight:600;line-height:1.3;color:var(--plan-ink)}
.sr-plan-offer-period,.sr-plan-offer-left{font-size:12.5px;color:var(--plan-muted);margin-top:2px;line-height:1.35}
.sr-plan-cd{flex:none;display:flex;gap:3px;align-self:center}
.sr-plan-cd-u{display:flex;flex-direction:column;align-items:center;min-width:34px;padding:3px 2px 2px;background:#fff;border:1px solid var(--plan-line);border-radius:8px}
.sr-plan-cd-u b{font-size:14px;font-weight:700;line-height:1.2;color:var(--plan-ink)}
.sr-plan-cd-u i{font-style:normal;font-size:9.5px;color:var(--plan-muted);line-height:1.2}
.sr-plan-terms-head{font-size:15px;font-weight:600;color:var(--plan-ink);margin:14px 0 12px}
.sr-plan-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.sr-plan-term{position:relative;display:flex;flex-direction:column;background:var(--plan-term-pastel, #fff);border:1.5px solid var(--plan-line-soft);border-radius:16px;overflow:hidden;cursor:pointer;text-align:center;transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.sr-plan-term input[type="radio"]{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sr-plan-term-tab{display:block;font-size:12px;font-weight:600;color:var(--plan-muted);background:var(--plan-chip);padding:4px}
.sr-plan-term-bd{display:block;padding:10px 6px 12px;flex:1}
.sr-plan-term-label{display:block;font-size:20px;font-weight:600;line-height:1.3;color:var(--plan-ink)}
.sr-plan-term-price{display:block;margin-top:8px;font-size:22px;font-weight:700;line-height:1.3;color:var(--plan-ink)}
.sr-plan-term-price .sr-offer-price{font-size:22px;font-weight:700}
.sr-plan-term-price .sr-lvl-reg{display:block;font-size:12.5px;margin-top:6px}
.sr-plan-term-off{display:block;background:var(--plan-chip);color:var(--plan-brand);font-size:12.5px;font-weight:600;padding:6px 4px}
.sr-plan-offer-days{display:block;margin-top:6px;font-size:12px;font-weight:700;color:var(--plan-warn-tx)}
.sr-plan-term:hover{border-color:var(--plan-brand)}
.sr-plan-term:active{border-color:var(--plan-brand)}
.sr-plan-term:focus-visible{border-color:var(--plan-brand);outline:3px solid var(--plan-brand);outline-offset:2px}
.sr-plan-term:has(input:focus-visible){border-color:var(--plan-brand);outline:3px solid var(--plan-brand);outline-offset:2px}
.sr-plan-term:has(input:checked){border-color:var(--plan-brand);background:var(--plan-tint)}
.sr-plan-term:has(input:checked) .sr-plan-term-tab{background:var(--plan-brand);color:#fff}
.sr-plan-term:has(input:checked) .sr-plan-term-off{background:var(--plan-brand);color:#fff}
@media (prefers-reduced-motion: reduce){.sr-plan-term{transition:none}}
/* N-5 (rebase): তিন প্যাকেজ তিন রং — data-term-index (sort_order-ক্রম,
   LevelPage packageCardsHtml-এ বসে; ১ম = ৩ মাস নীল, ২য় = ৬ মাস সবুজ,
   ৩য় = ১ বছর অ্যাম্বার)। কার্ড-bg তিন pastel (১ #EFF6FF, ২ #ECFDF3,
   ৩ #FFFAEB); সিলেক্টেড = ২px বর্ডার + গাঢ় pastel-sel bg (১ #DBEAFE,
   ২ #D1FAE5, ৩ #FEF3C7) + ট্যাবে ✓ (F-AP-61)। */
.sr-plan-terms .sr-plan-term[data-term-index="1"]{--plan-term-c:#1D4ED8;--plan-term-pastel:#EFF6FF;--plan-term-pastel-sel:#DBEAFE}
.sr-plan-terms .sr-plan-term[data-term-index="2"]{--plan-term-c:#047857;--plan-term-pastel:#ECFDF3;--plan-term-pastel-sel:#D1FAE5}
.sr-plan-terms .sr-plan-term[data-term-index="3"]{--plan-term-c:#92400E;--plan-term-pastel:#FFFAEB;--plan-term-pastel-sel:#FEF3C7}
.sr-plan-terms .sr-plan-term .sr-plan-term-tab{background:var(--plan-term-c);color:#fff}
.sr-plan-terms .sr-plan-term .sr-plan-term-off{background:var(--plan-term-c);color:#fff}
.sr-plan-terms .sr-plan-term:hover{border-color:var(--plan-term-c)}
.sr-plan-terms .sr-plan-term:active{border-color:var(--plan-term-c)}
.sr-plan-terms .sr-plan-term:focus-visible{border-color:var(--plan-term-c)}
.sr-plan-terms .sr-plan-term:has(input:focus-visible){border-color:var(--plan-term-c)}
.sr-plan-terms .sr-plan-term:has(input:checked){border:2px solid var(--plan-term-c);background:var(--plan-term-pastel-sel, var(--plan-term-pastel, #fff))}
.sr-plan-terms .sr-plan-term:has(input:checked) .sr-plan-term-tab{background:var(--plan-term-c);color:#fff}
.sr-plan-terms .sr-plan-term:has(input:checked) .sr-plan-term-tab::before{content:"✓ "}
.sr-plan-terms .sr-plan-term:has(input:checked) .sr-plan-term-off{background:var(--plan-term-c);color:#fff}
/* N-18: আমার-প্ল্যান কার্ডের বাটন-সারি (৩৯০px-এ wrap)। */
.sr-plan-myplan-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* প্ল্যান-প্রোগ্রেস বার (2026-11-09, আইটেম ৯১, F-91-2): কার্ডের ভেতরে,
   used/total — role="progressbar" (PHP-তে)। টোকেন-সিঁড়ি: 8px ট্র্যাক,
   999px রেডিয়াস, ফিল ব্র্যান্ড-সবুজ; ডার্কে var(--primary) অনুসরণ করে। */
.sr-plan-progress{margin-top:12px}
.sr-plan-progress-track{height:8px;border-radius:999px;background:var(--border-soft);overflow:hidden}
.sr-plan-progress-fill{height:100%;border-radius:999px;background:var(--primary)}
.sr-plan-progress-text{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--text-2)}
.sr-plan-paid-row{margin-top:12px}
.sr-plan-renew{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--plan-line);margin-top:12px;padding-top:12px}
.sr-plan-renew-state{font-size:13.5px;font-weight:700;color:var(--plan-ink)}
.sr-plan-sec-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sr-plan-selcard{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--plan-brand);border-radius:16px;padding:14px 16px}
.sr-plan-selcard b{display:block;font-size:18px;font-weight:600;line-height:1.35;color:var(--plan-ink)}
.sr-plan-selcard small{display:block;font-size:13px;color:var(--plan-muted);margin-top:2px}
.sr-plan-selcard-r{text-align:right;flex:none}
.sr-plan-selcard-r strong{display:block;font-size:22px;font-weight:700;line-height:1.3;color:var(--plan-ink)}
.sr-plan-selcard-r small{display:block}
.sr-plan-selcard-change{border:0;background:none;color:var(--plan-brand);font-weight:600;font-size:14px;cursor:pointer;padding:0;text-decoration:none}
.sr-plan-selcard-change:focus-visible{outline:2px solid rgba(16,96,80,.35);outline-offset:2px}
.sr-plan-payopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sr-pay-opt{position:relative;display:flex;align-items:flex-start;gap:8px;background:#fff;border:1.5px solid var(--plan-line-soft);border-radius:16px;padding:14px;cursor:pointer}
.sr-pay-opt:has(input:checked){border-color:var(--plan-brand);background:var(--plan-tint)}
.sr-pay-opt:has(input:disabled){opacity:.5;background:#FFFFFF;cursor:not-allowed}
.sr-pay-opt:focus-visible,.sr-pay-opt:has(input:focus-visible){outline:3px solid var(--plan-brand);outline-offset:2px}
.sr-pay-opt input[type="radio"]{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:2}
.sr-pay-opt-tx{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--plan-ink);line-height:1.35}
.sr-pay-opt-tx small{display:block;font-size:13px;font-weight:400;color:var(--plan-muted);line-height:1.35;margin-top:2px}
.sr-pay-radio{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;border:1.5px solid var(--plan-muted);display:grid;place-items:center}
.sr-pay-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--plan-brand);transform:scale(0);transition:transform .12s}
.sr-pay-opt:has(input:checked) .sr-pay-radio{border-color:var(--plan-brand)}
.sr-pay-opt:has(input:checked) .sr-pay-radio::after{transform:scale(1)}
.sr-plan-autorenew{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--plan-line);border-radius:14px;padding:14px 16px}
.sr-plan-autorenew-tx b{display:block;font-weight:600;color:var(--plan-ink)}
.sr-plan-autorenew-tx span{display:block;font-size:13.5px;color:var(--plan-muted);line-height:1.4;margin-top:2px}
.sr-plan-summary{background:#fff;border:1px solid var(--plan-line);border-radius:14px;padding:14px 16px}
.sr-plan-summary .sr-detail-row{border-bottom:0;padding:6px 0;font-size:15px}
.sr-plan-summary .sr-detail-row.is-total{border-top:1px solid var(--plan-line);margin-top:6px;padding-top:12px;font-weight:700;font-size:18px}
.sr-plan-benefits{margin:0;display:grid;gap:14px}
.sr-plan-benefits li{align-items:center;gap:14px;padding:0;font-size:17px;border-top:none}
.sr-plan-benefits .ben-ic{width:46px;height:46px;background:#fff;border:1px solid var(--plan-line);color:var(--plan-ink)}
.sr-plan-benefits .ben-ic svg{width:22px;height:22px}
.sr-plan-benefits .ben-ic .material-symbols-rounded{font-size:22px}
.sr-plan-compare-btn{display:inline-flex;align-items:center;gap:6px;margin-top:20px;height:40px;padding:0 14px 0 16px;border-radius:99px;border:1.5px solid var(--plan-line);background:none;font-size:14.5px;font-weight:600;color:var(--plan-ink);cursor:pointer;text-decoration:none}
.sr-plan-compare-btn:hover{border-color:var(--plan-brand);color:var(--plan-brand)}
.sr-plan-compare-btn .material-symbols-rounded{font-size:16px}
.sr-plan-compare-btn:focus-visible{outline:2px solid rgba(16,96,80,.35);outline-offset:2px}
.sr-plan-video-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 8px;border:0;border-radius:99px;background:rgba(255,255,255,.16);color:#fff;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none}
.sr-plan-video-btn:hover{background:rgba(255,255,255,.26)}
.sr-plan-video-btn .material-symbols-rounded{font-size:22px}
.sr-plan-video-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* প্ল্যান-কার্ডের ভেতরের ভিডিও-ট্রিগার (2026-11-11 ফোন-চেক D-4.2): ১১৮-স্ট্যান্ডার্ড .sr-tut-card, উপরের ব্লক থেকে ১৬px ফাঁক (কার্ডের ভেতরে ও Personal-শাখায় পেজ-বডিতে — দুই জায়গাতেই)। */
.sr-plan-card .sr-tut-card,.sr-plan-page>.sr-tut-card{margin-top:16px}
.sr-plan-terms-link{color:#B42318;text-decoration:underline}
.sr-plan-page .sr-plan-cta{background:var(--plan-brand) !important;color:#fff;min-height:54px;border-radius:999px;font-size:17px;font-weight:600}
.sr-plan-page .sr-plan-cta:hover{background:var(--plan-brand-dark) !important}
.sr-plan-page .sr-plan-cta:disabled{opacity:.75;cursor:wait}
.sr-plan-page .sr-plan-cta:focus-visible{outline:3px solid var(--plan-brand);outline-offset:2px}
.sr-plan-sticky-foot{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));margin:18px -16px 0;padding:10px 16px 14px;background:#fff;z-index:5}
.sr-plan-sticky-foot .sr-plan-cta{margin-top:0}
.sr-plan-sticky-foot .sr-hint{text-align:center;font-size:13px;margin:12px 0 0}
.sr-plan-status{background:#fff;border:1px solid var(--plan-line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.sr-plan-status-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13.5px;line-height:1.5;color:#3c4a46}
.sr-plan-status-label{font-weight:600;color:var(--plan-muted)}
.sr-plan-status-name{font-size:15px;font-weight:700;color:var(--plan-ink)}
.sr-plan-status-exp{color:#3c4a46}
.sr-plan-cmp-none{display:inline-flex;align-items:center;gap:4px;color:#8a9793;font-weight:600}
.sr-plan-cmp-none .material-symbols-rounded{font-size:18px}
.sr-plan-limits-link{text-align:center;margin:4px 0 14px}
.sr-plan-limits-link a{font-size:13.5px;font-weight:700;color:var(--plan-brand);text-decoration:none}
.sr-plan-limits-link a:hover{color:var(--plan-brand-dark)}
.sr-plan-limits-link a:focus-visible{outline:2px solid rgba(16,96,80,.35);outline-offset:2px}
.sr-plan-limit-free{color:#8a9793;font-weight:600}
.sr-level-success{text-align:center;padding:14px 16px}
.sr-level-success .sr-check-ring{width:56px;height:56px;background:var(--plan-brand);color:#fff;box-shadow:none;margin:6px auto 14px}
.sr-level-success .sr-check-ring svg{width:26px;height:26px}
.sr-level-success-title{font-size:21px;font-weight:600;color:var(--plan-ink);margin:0 0 6px}
.sr-level-success .sr-summary .sr-detail-row.is-total{border-top:1px solid var(--plan-line);margin-top:6px;padding-top:12px;font-size:18px}
.sr-level-success-sub{font-size:14px;color:var(--plan-muted);line-height:1.6;margin:0 0 16px}
.sr-level-success .sr-summary{text-align:left}

/* D-CMP-1 (2026-11-07): compare view + video view (.sr-plan-*).
   Plan greens use the scoped --plan-brand variable (.sr-plan-page,
   plan-block rewrite 2026-11-07). No new root-variable block, no colour shadow. */
.sr-plan-sec{margin-bottom:28px}
.sr-plan-sec-title{font-size:15px;font-weight:600;color:var(--text);margin:0 0 12px}
.sr-plan-page .app-section-title{font-size:15px;font-weight:600;margin-bottom:12px}
.sr-plan-tt{font-size:21px;font-weight:600;line-height:1.35;margin:0 0 6px;color:var(--text)}
.sr-plan-video-lead{font-size:15px;color:var(--plan-muted);line-height:1.6;margin:0 0 24px}
.sr-plan-pick-title{font-size:18px;font-weight:600;margin:32px 0 12px;color:var(--text)}
.sr-plan-cta{margin-top:4px}
.sr-plan-cmp-lead{font-size:14px;color:#5b6b66;line-height:1.6;margin:0}
.sr-plan-who{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 16px}
.sr-plan-who-card{position:relative;background:#fff;border:1px solid #edf2f1;border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;gap:0;align-items:flex-start}
.sr-plan-who-card.is-rec{border-color:var(--plan-brand);background:#f4faf7}
.sr-plan-who-card.is-rec .sr-plan-who-ic{background:var(--plan-brand);color:#fff}
.sr-plan-who-ic{flex:none;width:42px;height:42px;border-radius:12px;background:#eef4f2;color:var(--plan-brand);display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px}
.sr-plan-who-ic .material-symbols-rounded{font-size:22px}
.sr-plan-who-tx{min-width:0}
.sr-plan-who-tx b{display:block;font-size:18px;font-weight:600;line-height:1.3;color:var(--text)}
.sr-plan-who-tx span{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.sr-plan-who-badge{position:absolute;top:12px;right:12px;background:var(--plan-brand);color:#fff;font-size:11.5px;font-weight:600;border-radius:999px;padding:0 9px}
.sr-plan-cmp-none{font-weight:400;color:#8a9a94}
.sr-plan-cmp-tick{color:var(--plan-brand);display:inline-flex;align-items:center;gap:4px}
.sr-plan-cmp-tick .material-symbols-rounded{font-size:20px}
/* N-8: কমিশন/ডিসকাউন্ট সাব-লাইন নিজের লাইনে — "আছে"-র সাথে জড়ায় না। */
.sr-plan-cmprow-cell .sr-plan-cmp-sub{display:block;margin-top:2px}
.sr-plan-cmprows{display:flex;flex-direction:column}
.sr-plan-cmprow{display:grid;grid-template-columns:1fr 84px 84px;align-items:center;padding:12px 0;border-top:1px solid #f0f4f3}
.sr-plan-cmprow:first-child{border-top:none}
.sr-plan-cmprow-label{font-size:14px;font-weight:600;color:var(--text);line-height:1.4;padding-right:8px}
.sr-plan-cmprow-cell{text-align:center;font-size:14px;color:var(--text);overflow-wrap:anywhere}
.sr-plan-cmprow-cell:last-child{color:var(--plan-brand);font-weight:600}
.sr-plan-cmprow-cell .sr-plan-cmp-none{color:#8a9a94;font-weight:400}
.sr-plan-cmprow-head{padding:8px 0 4px;border-top:none}
.sr-plan-cmprow-head .sr-plan-cmprow-cell{font-size:12px;font-weight:700;color:var(--muted)}
.sr-plan-cmprow-head .sr-plan-cmprow-cell:last-child{color:var(--plan-brand)}
.sr-limit-unlimited-tx{font-size:13.5px;color:#3c4a46;line-height:1.6;margin:10px 0 4px}
.sr-plan-cmptable-wrap{border:1px solid #edf2f1;border-radius:16px;background:#fff}
.sr-plan-cmptable{width:100%;border-collapse:collapse}
.sr-plan-cmptable th,.sr-plan-cmptable td{padding:10px 6px;text-align:left;font-size:14px;line-height:1.5;vertical-align:top}
.sr-plan-cmptable thead th{position:sticky;top:calc(67px + env(safe-area-inset-top,0px));background:var(--plan-chip);border-bottom:0;border-radius:10px 10px 0 0;padding:8px 4px;text-align:center;font-size:14px;font-weight:600;color:var(--text);z-index:1}
.sr-plan-cmptable thead th:first-child{background:transparent;border-radius:0}
.sr-plan-cmptable thead th:last-child{background:var(--plan-brand);color:#fff}
.sr-plan-cmptable tbody th{padding:13px 8px 13px 0;font-size:15px;font-weight:600;color:#3c4a46}
.sr-plan-cmptable tbody td{color:var(--text);overflow-wrap:anywhere}
.sr-plan-cmptable tbody td:last-child{background:var(--plan-tint);color:var(--plan-brand);font-weight:600}
.sr-plan-cmptable tr.sr-plan-cmpgroup th{background:transparent;font-size:13px;font-weight:600;color:var(--muted);padding:20px 0 6px}
.sr-plan-cmptable tbody tr:not(.sr-plan-cmpgroup) th,.sr-plan-cmptable tbody tr:not(.sr-plan-cmpgroup) td{border-top:1px solid #f0f4f3}
@media (max-width: 480px){
  .sr-plan-cmptable{table-layout:fixed}
  .sr-plan-cmptable thead th:nth-child(2),.sr-plan-cmptable thead th:nth-child(3){width:106px}
}
.sr-plan-pick{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px}
@media (min-width: 640px){.sr-plan-pick{grid-template-columns:1fr 1fr}}
.sr-plan-pick-card{background:#fff;border:1px solid #edf2f1;border-radius:14px;padding:14px}
.sr-plan-pick-card b{display:block;font-size:16px;color:var(--text);margin-bottom:8px}
.sr-plan-pick-card ul{margin:0;list-style:none;padding:0;display:grid;gap:6px}
.sr-plan-pick-card li{display:flex;gap:10px;font-size:14.5px;color:var(--muted);line-height:1.6}
.sr-plan-pick-card li svg{flex:none;width:15px;height:15px;margin-top:5px;color:var(--plan-brand)}
.sr-plan-video-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;border:0;border-radius:0;background:var(--plan-hero);color:#fff;cursor:pointer;margin:-20px -16px 22px;padding:0}
.sr-plan-video-play{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--plan-hero)}
.sr-plan-video-play .material-symbols-rounded{font-size:30px}
.sr-plan-video-soon{display:block;font-size:13px;color:#cfe6dd;margin-top:10px}
.sr-plan-how{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:16px}
.sr-plan-how li{display:flex;gap:14px}
.sr-plan-how-n{flex:none;width:28px;font-size:24px;font-weight:700;line-height:1.2;color:var(--plan-brand)}
.sr-plan-how b{display:block;font-size:16px;font-weight:600;line-height:1.4;color:var(--text)}
.sr-plan-how span{display:block;font-size:14px;color:#5b6b66;line-height:1.45;margin-top:2px}
.sr-plan-faq{border:0;border-bottom:1px solid #edf2f1;border-radius:0;margin-bottom:0;background:transparent}
.sr-plan-faq:first-of-type{border-top:1px solid #edf2f1}
.sr-plan-faq summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-size:14px;font-weight:600;color:var(--text);list-style:none}
.sr-plan-faq summary::-webkit-details-marker{display:none}
.sr-plan-faq summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;margin-right:4px}
.sr-plan-faq[open] summary::after{transform:rotate(-135deg)}
.sr-plan-faq p{margin:0;padding:0 0 14px;font-size:14.5px;color:#5b6b66;line-height:1.6}
/* Switch (pay-view auto-renew + compare diff-toggle) — real checkbox,
   44px touch target, focus-visible ring, reduced-motion off-path. */
.sr-plan-switch{position:relative;display:inline-flex;align-items:center;flex:none;width:52px;height:44px;cursor:pointer}
.sr-plan-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sr-plan-switch-ui{position:relative;width:46px;height:26px;background:#d5dedb;border-radius:999px;transition:background .15s ease-out;flex:none}
.sr-plan-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s ease-out;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.sr-plan-switch input:checked+.sr-plan-switch-ui{background:var(--plan-brand)}
.sr-plan-switch input:checked+.sr-plan-switch-ui::after{transform:translateX(20px)}
.sr-plan-switch input:focus-visible+.sr-plan-switch-ui{outline:2px solid var(--plan-brand);outline-offset:2px}
.sr-plan-spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sr-plan-spin-anim .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes sr-plan-spin-anim{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.sr-plan-switch-ui,.sr-plan-switch-ui::after{transition:none}.sr-plan-spin{animation:none}}

/* Plan card + history + renew (2026-11-10, items 108–110) — flat white,
   brand #106050 via --plan-brand, radius ladder 16/12, B2 spacing scale
   (0/2/4/8/12/16), no glow/shadow/gradient, no one-sided border as a
   divider (B4: dividers are full-border rows, not one-side strokes). */
.sr-plan-card{background:#fff;border:1px solid var(--plan-line);border-radius:16px;padding:16px}
.sr-plan-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.sr-plan-card-head .sr-plan-sec-title{margin:0;flex:1;min-width:0}
.sr-plan-hist-btn{display:inline-flex;align-items:center;gap:8px;flex:none;height:36px;padding:0 12px;border:1px solid var(--plan-line);border-radius:99px;background:#fff;color:var(--plan-brand);font-weight:600;font-size:13.5px;line-height:1;text-decoration:none;cursor:pointer}
.sr-plan-hist-btn:hover{border-color:var(--plan-brand);background:var(--plan-tint)}
.sr-plan-hist-btn:active{border-color:var(--plan-brand)}
.sr-plan-hist-btn:focus-visible{outline:2px solid var(--plan-brand);outline-offset:2px}
.sr-plan-hist-btn .material-symbols-rounded{font-size:20px}
.sr-plan-price-block{margin-top:12px}
.sr-plan-price-block .k{display:block;font-size:13px;font-weight:600;color:var(--plan-muted)}
.sr-plan-price-big{display:block;margin-top:2px;font-size:28px;font-weight:700;line-height:1.25;color:var(--plan-ink);white-space:nowrap}
.sr-plan-card .sr-plan-summary{margin-top:12px}
.sr-plan-card .sr-plan-myplan-btns{margin-top:16px}
.sr-plan-card .sr-plan-autorenew{margin-top:12px}
.sr-plan-switch-saving{margin:8px 0 0;font-size:13px;color:var(--plan-muted)}
.sr-plan-switch input:disabled+.sr-plan-switch-ui{opacity:.55;cursor:default}
.sr-plan-switch input:disabled{cursor:default}
.sr-plan-switch:has(input:disabled){cursor:default}
.sr-plan-hist-detail{margin-top:8px;border:1px solid var(--plan-line);border-radius:12px;padding:12px}
.sr-plan-hist-detail summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--plan-brand)}
.sr-plan-hist-detail summary:focus-visible{outline:2px solid var(--plan-brand);outline-offset:2px}
.sr-plan-hist-detail .sr-detail-row{padding:6px 0;font-size:14px}
.sr-plan-refcode{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:.5px;background:#fff;border:1px solid var(--plan-line);border-radius:8px;padding:4px 8px;word-break:break-all}


/* 111 (2026-11-10): coupons — flat white cards, brand #106050, no glow/shadow. */
.sr-coupon-list{display:grid;gap:12px}
.sr-coupon-card{background:#FFFFFF;border:1px solid #e5ebe9;border-radius:12px;padding:14px}
.sr-coupon-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sr-coupon-code{font-size:17px;font-weight:700;letter-spacing:.08em;color:#106050}
.sr-coupon-value{font-size:15px;font-weight:700;color:var(--text)}
.sr-coupon-scope,.sr-coupon-exp{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#5b6b66}
.sr-coupon-card form{margin-top:12px}
.sr-coupon-applied{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#EAF4EE;border:1px solid #dcebe4;border-radius:12px;padding:12px 14px}
.sr-coupon-applied .sr-coupon-code{font-size:16px}
.sr-coupon-saved{font-size:15px;font-weight:700;color:#106050}
.sr-coupon-applied form{margin-left:auto}
.sr-coupon-form{display:flex;gap:10px;align-items:flex-start}
.sr-coupon-input{flex:1;text-transform:uppercase}
@media (max-width:480px){.sr-coupon-form{flex-direction:column}.sr-coupon-form .sr-btn{width:100%}}
/* ==========================================================================
   2026-10-30 ICON-PROTECTION — Material Symbols regression fix (PERMANENT).
   Root cause: bundle 3 (2026-10-30, 10 items) added at app.css:6346
     .sr-ui p,.sr-ui span,.sr-ui li,.sr-ui td,.sr-ui th{font-family:var(--font-main)}
   That DIRECT span selector (specificity 0,1,1) beats the icon base rule
   .material-symbols-rounded (0,1,0, app.css:1946 + fonts.css) AND sits at
   EOF, so every icon span inside .sr-ui got Hind Siliguri instead of
   'Material Symbols Rounded': the ligature never substituted, and
   fonts.css max-width:1em + overflow:hidden clipped the literal text to
   ~2 chars ("ve", "ed", "ph", "ac", "vis", "ad", "ch", "no", ...).
   The icon font file itself was NEVER broken: @font-face intact
   (fonts.css) and material-symbols-rounded.woff2 present in
   public/assets/fonts/; preload intact (WebView.php:493).
   Fix (two layers, both required):
   (1) The offending rule above now reads
       .sr-ui span:not(.material-symbols-rounded) — Bengali clarity for
       real text spans is UNCHANGED, icon spans are excluded.
   (2) This guard, last in the file: any future broad text-font rule
       (even a * / body / container / span rule, even !important-free)
       can never again steal the icon font — font-family AND the 'liga'
       feature that performs ligature substitution are restored here.
   PERMANENT GUARD (checkable): no font-family rule anywhere in this file
   may match a .material-symbols-rounded span except this guard; every
   future font change must be verified against icon rendering (home
   tiles, profile verified-tick, bottom nav, menu, chevrons) before deploy.
   Size/colour rules for icons elsewhere in this file are untouched —
   this guard sets ONLY font-family + font-feature-settings.
   ========================================================================== */
.sr-ui span.material-symbols-rounded,
span.material-symbols-rounded,
.material-symbols-rounded{
  font-family:'Material Symbols Rounded' !important;
  font-feature-settings:'liga' !important;
}

/* ============ Live chat shell (2026-11-03: ইউজার-চ্যাট ও গেস্ট লাইভ চ্যাট একই ক্লাস — আগে এই CSS শুধু SupportChatPage-র inline <style>-এ ছিল) ============ */
.live-shell{position:fixed;left:0;right:0;top:0;bottom:0;z-index:25;background:#FFFFFF;display:flex;flex-direction:column}
.live-topbar{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--primary);color:#fff}
.live-topbar a{color:#fff;text-decoration:none}
.live-topbar b{flex:1;font-size:16px}
.live-faq{flex:none;padding:10px 12px 0;background:#FFFFFF}
.live-faq-chip{display:inline-block;border:1px solid #cfe0dc;background:#fff;color:var(--primary);border-radius:20px;padding:5px 12px;margin:0 6px 6px 0;font-size:13px;cursor:pointer;text-decoration:none}
.live-faq-lb{font-size:12px;color:#8a9996;font-weight:600;display:block;margin-bottom:6px}
.live-faq-row{overflow-x:auto;white-space:nowrap;padding-bottom:2px}
.live-faq-chip{white-space:nowrap}
.live-area{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px 12px}
.live-form{flex:none;display:flex;gap:8px;align-items:center;padding:10px 12px 14px;background:#fff;border-top:1px solid #e4ecea}
.live-input{flex:1}
.live-attach{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #cfe0dc;background:#FFFFFF;border-radius:50%;color:var(--primary);cursor:pointer}
.live-attach.is-rec{color:#c0392b;border-color:#c0392b}
.live-attach svg{width:22px;height:22px;fill:currentColor;flex:none}
.live-support-btn{flex:none;font-size:13px;font-weight:600;background:rgba(255,255,255,.2);color:#fff;border-radius:20px;padding:6px 12px;text-decoration:none}
.live-voice{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.live-rate{border:1px solid #cfe0dc;background:#fff;color:var(--primary);border-radius:12px;font-size:11px;padding:2px 7px;cursor:pointer}
.live-rate.is-on{background:var(--primary);color:#fff}
.live-send{flex:none;width:44px;height:44px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center}
.live-voice-chip{flex:none;font-size:12px;background:#eef5f3;color:var(--primary);border-radius:20px;padding:5px 10px}
.live-voice-chip button{border:0;background:none;font-size:16px;cursor:pointer;color:var(--primary)}
.live-closed{flex:none;padding:14px;text-align:center;background:#fff;border-top:1px solid #e4ecea;color:#8a9996}
.live-err{flex:none;padding:8px 14px;color:#c0392b;font-size:13px;background:#fff}
.live-auto{font-size:11px;background:#fff3cd;color:#7a5b00;border-radius:10px;padding:2px 8px;margin-left:6px}
.live-tick{font-size:11px;color:#8a9996}
.live-time{font-size:11px;color:#8a9996}
.live-img{max-width:220px;border-radius:12px;display:block;cursor:zoom-in}

/* ================= §8a Micro-interactions: reduced-motion off-paths (2026-11-05, LOCAL ONLY) =================
   বিদ্যমান এনট্রান্সগুলোর off-path (ড্রাফট-যাচাইকৃত টাইমিং: .sr-popup-in .28s,
   srModalIn .25s)। app.css শেষে লোড হয় বলে এই ব্লক cascade-এ জেতে।
   নতুন অ্যানিমেশন এখানে যোগ হয়নি। */
@media (prefers-reduced-motion: reduce) {
  .sr-popup-modal, .sr-modal-box { animation: none; }
  .sr-popup-overlay { transition: none; }
  #srChContent.sr-frag-in, #srHistContent.sr-frag-in, #srStatsContent.sr-frag-in { animation: none; }
  .sr-ch-tab { transition: none; }
  .sr-ch-fab { transition: none; }
}

/* ==========================================================================
   ডার্ক-মোড ওভাররাইড (2026-11-09, আইটেম ৯০, F-90-4) — ফাইনাল-লেয়ারের
   আগে (ফাইনাল-লেয়ারের !important নিয়ম var()-ভিত্তিক বলে টোকেন
   অনুসরণ করে)। টোকেন-রূপান্তরিত নিয়ম (২৬৯টি bare-লিটারাল →
   var()) ডার্কে নিজে থেকেই কাজ করে; নিচে শুধু সাদা-লিটারাল
   সারফেসগুলো (background:#fff-ওয়ালা মূল কার্ড/তালিকা/সার্চ) —
   color:#fff-ওয়ালা সবুজ-উপরের লেখা ইচ্ছাকৃতভাবে ছোঁয়া হয়নি
   (ডার্কেও সাদাই থাকবে)। .sr-auth-badge সাদা বৃত্তই থাকবে
   (Q-90-2 ডিফল্ট: একই লোগো, সাদা ব্যাজ)। .sr-green-head-এর
   ইনলাইন $themePrimary-রং Q-90-1 অনুযায়ী ডার্কেও বহাল।
   আংশিক কভারেজ: app.css-এ background:#fff-ওয়ালা নিয়ম ২৬৮টি —
   এখানে মূল সারফেস-মাত্র; বাকিগুলো পরের পাসে (রিপোর্টে খোলা)।
   ========================================================================== */
[data-theme="dark"]{--sr-grad-head:linear-gradient(135deg,#0d5c44,#08382e)}
[data-theme="dark"] body,[data-theme="dark"] .app-main,[data-theme="dark"] .sr-ui{background:var(--bg)}
[data-theme="dark"] .sr-white-head{background:var(--surface)}
[data-theme="dark"] .tk-stats,[data-theme="dark"] .tk-empty,[data-theme="dark"] .tk-cust,
[data-theme="dark"] .tk-txn,[data-theme="dark"] .tk-search,[data-theme="dark"] .tk-txn-form-card,
[data-theme="dark"] .tk-txn-empty,[data-theme="dark"] .tk-sheet-note,
[data-theme="dark"] .sr-plan-selcard,[data-theme="dark"] .tk-list .tk-cust,
[data-theme="dark"] .sr-card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .sr-btn-primary,[data-theme="dark"] .tk-txn-submit.tk-txn-pay{background:var(--primary-dark)}
[data-theme="dark"] .tk-search input{background:transparent;color:var(--text)}
[data-theme="dark"] .tk-search input::placeholder{color:var(--muted)}

/* ==========================================================================
   TK-2 চূড়ান্ত স্তর (2026-11-08) — একটাই final layer; এর পরে নতুন
   ডেকোরেটিভ রুল নয়। লকড-নোটিশ ছবি/আইকন, compare-টেক্সট-বাটন,
   লকড-শিট, due-zero, প্রিন্ট-নিয়ম।
   ========================================================================== */
.sr-locked-img { width: 100%; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; display: block; margin: 0 auto 16px; }
.sr-locked-lottie { width: 100%; max-width: 320px; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; display: block; margin: 0 auto 16px; background: #FFFFFF; }
.sr-locked-lottie .sr-locked-fallback { display: grid; place-items: center; height: 100%; }
.sr-locked-lottie .sr-locked-fallback .sr-locked-img { width: 100%; height: 100%; margin: 0; max-width: none; }
.sr-locked-lottie .sr-locked-ic { margin: 0; }
.sr-locked-lottie.is-lottie .sr-locked-fallback { display: none; }
.sr-locked-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--primary-mist); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.sr-locked-ic .material-symbols-rounded { font-size: 44px; }
.sr-locked-sheet { text-align: center; }
.sr-plan-compare-text { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }
.sr-plan-compare-text .material-symbols-rounded { font-size: 18px; }
.sr-plan-compare-wrap { margin: 4px 0 0; }
.tk-cust-due-zero { color: var(--muted); }
.tk-detail-due-zero { color: var(--muted); }
@media print {
  .sr-header, .sr-bottomnav, .tk-print-hide { display: none !important; }
}

/* ==========================================================================
   Phase U — ডিজাইন-ক্লিনআপ চূড়ান্ত স্তর (2026-11-08, ব্রিফ §৯.২ ধাপ ৪)
   একটাই final layer (TK-2 :7122–7138-এর পরে); এর পরে কোনো ডেকোরেটিভ রুল নয়।
   পদ্ধতি: বেস-রুলে হাত নয় — শুধু এই স্তরে ওভাররাইড (R-17)। প্রতিটা রুলের
   disposition §১৯.১-ইনভেন্টরিতে (disposition.tsv) — file:line + কারণসহ।
   KEEP/KEEP-PENDING/TOKEN-FIX রো-তে এখানে রুল নেই (আগেই kill/ওভাররাইড/
   টোকেন-ফিক্স/সিদ্ধান্তসাপেক্ষ)। একই সিলেক্টরের একাধিক বেস-রুল থাকলে শুধু
   সবচেয়ে পরের রুলের ওভাররাইড আছে (আগেরগুলো বেস-ফাইলেই মৃত)।
   ========================================================================== */
/* হিরো/হেড — :5060-এর ক্যানোনিকাল একক-হিউ ব্র্যান্ড-গ্রেডিয়েন্টে এক করা (CANONICALIZE, §১৫) */
.ab-success-hero, .ab2-hero, .ci-hero, .hl-hero, .nt-modal-hero, .prof-comm-hero, .prof-hero, .prof-split .prof-theme-band, .prof-theme-band, .rw-hero, .sr-ci-hero, .sr-dev-detail-head, .sr-drawer-head { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%); }
.sc-scratch { background: #0b4a3e; }
.sr-maxlevel { background: #0d3f34; }
.tk-txn-submit.tk-txn-pay { background: var(--primary); }
.drv-card-ic.g-teal { background: #ddf3f0; }
.ci-g5 { background: #e0f7fa; }
.drv-card-ic.g-sky { background: #e2f2fd; }
.prof-upgrade-card.prof-lvl-card { background: #e2f6ec; }
.drv-card-ic.g-blue { background: #e3eefb; }
.ci-g3 { background: #e3f2fd; }
.drv-card-ic.g-indigo { background: #e5e9fb; }
.drv-hero { background: #e6f4ec; }
.ci-g1, .sr-ch-done, .sr-ch-notice, .sr-ci-day.is-done, .sr-ci-row.is-claimed .sr-ci-row-day, .sr-ref-avatar { background: #e8f5e9; }
.sr-histd-hero.st-success { background: #e9f6f1; }
.rc-confirm-hero { background: #e9f9f1; }
.drv-card-ic.g-violet { background: #ece5fa; }
.sr-limit-banner { background: #eef7f4; }
.sr-upgrade-prompt { background: #f0faf6; }
.nt-item.is-unread { background: #f2f9f5; }
.sm-receiver.is-ok { background: #f2faf5; }
.sr-lvl-card.is-current { background: #f2faf8; }
.ci-g4 { background: #f3e5f5; }
.sr-level-panel { background: #f4faf6; }
.sr-ci-row-day { background: #f5f5f5; }
.sr-ci-circle { background: #fafafa; }
.ci-g6, .sr-ch-failed { background: #fce4ec; }
.sr-histd-hero.st-failed { background: #fdeeee; }
.sr-histd-hero.st-processing { background: #fdf6e0; }
.sr-ci-hero-fill, .sr-ci-today-ic { background: #ffd54f; }
.ci-hero-fill { background: #ffd76a; }
.sr-ref-card { background: #fff; }
.ci-g2 { background: #fff3e0; }
.ci-g7, .sr-ch-points, .sr-ci-progress-card, .sr-ci-row.is-progress .sr-ci-row-day, .sr-ci-today { background: #fff8e1; }
.sr-ci-trophy { background: #fff9e6; }
.sr-ch-avail { background: #ffffff; }
.bp-btn, .ci-today-ic, .drv-head-mark, .drv-hero-mark, .drv-op-mark, .ha-add-ic, .ha-avatar, .prof-lvl-cta, .sm-av, .sr-ch-bar, .sr-ch-sum-item, .sr-ch-tab.is-active, .sr-ci-circle.is-done, .sr-ci-line.is-done, .sr-dash-total, .sr-level-ic, .sr-level-page .sr-lvl3-acct-ic, .sr-lvl-ic-big, .sr-lvl3-pop, .sr-premium-add, .sr-premium-avatar, .sr-premium-avatar-sm, .sr-premium-bal-ic, .sr-ref-stat, .sr-regbar, .sr-tut-thumb, .sr-wel-video-ph, .tk-add-round, .tk-cust-av, .tk-empty-btn, .tk-sms-bal { background: var(--primary); }
.sr-auth-head, .sr-band, .sr-btn-primary, .sr-che, .sr-dash-hero, .sr-green-head, .sr-refer-hero, .sr-stats-hero, .sr-streak-strip, .sr-wel-head { background: var(--primary) !important; }
.sc-img, .sr-drawer-ic, .tint-brand { background: var(--primary-soft); }
.nt-open-btn, .sr-lvl3-pop { box-shadow: none; }
/* D-4 — FAB: গ্রেডিয়েন্ট থাকবে (ব্র্যান্ড); শ্যাডো নিউট্রাল-ছোট, হালো-রিং বাদ
   (v155 ব্ল্যাঙ্কেটের box-shadow:none-কে জেতাতে !important — লক্ষ্যভিত্তিক, ব্ল্যাঙ্কেট নয়) */
.sr-bnav-fab-ic { box-shadow: 0 8px 20px -8px rgba(21,33,29,.25) !important; }
.sr-bnav-fab:active .sr-bnav-fab-ic { box-shadow: 0 4px 12px -8px rgba(21,33,29,.20) !important; }
/* R-21 — ইনলাইন style → ক্লাস (DashboardPage/WebView) */
.sr-flex-1 { flex: 1; min-width: 0; }
.sr-locked-notice { text-align: center; padding: 28px 16px; }
.sr-locked-notice h2 { margin: 12px 0 6px; }
.sr-locked-notice p { margin: 0 0 16px; }
/* ডার্ক-মোড সাদা-লেখা কনট্রাস্ট ফিক্স (2026-11-09, আইটেম ৯০, V-90 ভেরিফায়ার-ধরা) —
   সাদা লেখা ডার্ক --primary #1f9d77-এর ওপর 3.42:1 — normal-text FAIL;
   --primary-dark #157a5c-এ সাদা লেখা 5.29:1 PASS। --primary নিজে #1f9d77-ই
   থাকে — ডার্ক-ক্যানভাসে সবুজ লেখা হিসেবে 5.50:1 PASS। এই ব্লক ফাইলের
   শেষে (final-layer-এর পরে) — final-layer-এর !important-গ্রুপ (:7229)
   জিততে না পারে, তাই এখানেও !important। */
[data-theme="dark"] .sr-auth-head,[data-theme="dark"] .sr-band,[data-theme="dark"] .sr-btn-primary,
[data-theme="dark"] .sr-che,[data-theme="dark"] .sr-dash-hero,[data-theme="dark"] .sr-green-head,
[data-theme="dark"] .sr-refer-hero,[data-theme="dark"] .sr-stats-hero,[data-theme="dark"] .sr-streak-strip,
[data-theme="dark"] .sr-wel-head,[data-theme="dark"] .tk-head,[data-theme="dark"] .tk-sms-bal,
[data-theme="dark"] .tk-add-round,[data-theme="dark"] .tk-empty-btn,[data-theme="dark"] .tk-cust-av,
[data-theme="dark"] .tk-txn-submit.tk-txn-pay,[data-theme="dark"] .sr-ch-fab,[data-theme="dark"] .sr-limit-upgrade,
[data-theme="dark"] .sr-page.is-active,[data-theme="dark"] .rw-tab.is-active,[data-theme="dark"] .sr-hist2-tab.is-active,
[data-theme="dark"] .sr-hist2-fopt input:checked+span,[data-theme="dark"] .sr-lvl-cur,[data-theme="dark"] .rc-opill.is-active,
[data-theme="dark"] .sr-tut-play,[data-theme="dark"] .sr-limit-banner-ic,[data-theme="dark"] .ci-day.is-done .ci-day-icon::after,
[data-theme="dark"] #opSelectLogo .sr-op-mark{background:var(--primary-dark)!important;background-image:none!important;border-color:var(--primary-dark)!important}

/* ==========================================================================
   F-US-23 / F-US-24 (2026-11-09, লেন D আইটেম ৮১ — f4f5 সাব-ট্রি):
   ইনলাইন-style → ক্লাস। মান হুবহু ইনলাইন-স্টাইলের মতোই (move-only —
   নতুন ডিজাইন নয়); শুধু .lc-guest-error-এ #c0392b-র বদলে var(--danger)
   (একই মান — F-US-18-এ সংজ্ঞায়িত টোকেন)। .live-img/.live-voice/.u-hide
   আগে থেকেই app.css-এ আছে (:7037/:7026/:3523) — নতুন করে সংজ্ঞায়িত নয়।
   ========================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-text-center{text-align:center}
.lc-guest-wrap{max-width:420px;margin:0 auto;padding:40px 16px 20px}
.lc-guest-card{background:#fff;border:1px solid #e3eae7;border-radius:20px;padding:24px 20px;box-shadow:0 8px 24px rgba(16,24,40,.08)}
.lc-guest-ic{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.lc-guest-ic-svg{width:28px;height:28px;fill:#fff}
.lc-guest-title{font-size:20px;color:var(--primary);margin:0 0 6px;text-align:center}
.lc-guest-error{color:var(--danger);font-size:13px;text-align:center}
.lc-guest-label{font-size:13px}
.lc-guest-input{width:100%;margin-top:4px}
.lc-guest-input-ltr{text-align:left;width:100%;margin-top:4px}
.lc-guest-submit{margin-top:16px;width:100%}
.lc-record-ic{width:22px;height:22px;fill:currentColor}
.lc-msg-time{font-size:11px;color:#8a9996}
.sr-msg-img{max-width:220px;border-radius:12px;display:block}
.sr-msg-audio{max-width:220px}
.sr-voice-perm{padding:10px 14px;background:#fff;border-top:1px solid #e4ecea}
.sr-voice-perm-flex{flex:none;padding:10px 14px;background:#fff;border-top:1px solid #e4ecea}
.sr-voice-perm-title{font-size:13px;margin-bottom:8px}
.sr-voice-perm-title-dark{font-size:13px;color:#222;margin-bottom:8px}
.sr-voice-perm-hint{color:#5a6b68}
.sr-voice-perm-actions{display:flex;gap:8px}
.live-tag{font-size:11px;background:#eef5f3;color:#106050;border:1px solid #cfe0dc;border-radius:10px;padding:2px 8px;margin-left:6px}
.sr-linkify-a{word-break:break-all}
.sr-yt-card{margin-top:8px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.sr-yt-link{display:block;text-decoration:none;color:#222}
.sr-yt-thumb{display:block;width:100%;max-width:320px}
.sr-yt-cap{display:block;padding:8px 10px;font-size:13px}
.sr-linkify-card{margin-top:8px;border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff}
.sr-linkify-link{text-decoration:none;color:#106050;font-size:13px}
.sr-lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:16px}
.sr-lightbox-img{max-width:100%;max-height:85dvh;border-radius:12px}
.sr-lightbox-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#222;font-size:22px;cursor:pointer}
.sr-link-card{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:10px;background:#fff;border:1px solid var(--border);border-radius:16px;text-decoration:none;color:#222;box-shadow:var(--shadow-card)}
.sr-link-ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.sr-link-text{flex:1;min-width:0}
.sr-link-name{display:block}
.sr-link-url{color:#8a9996;font-size:12px;word-break:break-all}
.sr-link-list{padding:16px 14px}
.sr-brand-svg{width:44px;height:44px;display:block}
.prof-logout{width:100%;cursor:pointer}
.kyc-card-gap{margin-bottom:16px}