/* =========================================================
   AstroBNN.pro — Design System
   Dark Cosmic Indigo (default) + Day mode via [data-theme="light"]
   Navy #0d1424 | Gold #F0D068 | Purple #6c3ebf | Teal #3b6dff
   ========================================================= */

:root {
  --bg:          #0d1424;
  --bg-card:     rgba(255,255,255,.04);
  --bg-card-hover: rgba(255,255,255,.07);
  --surface:     #111c2e;
  /* Raised surface (rails, drawers, popovers). Several pages already used
     var(--surface2, #fff) while nothing defined it, so in DARK mode it fell back to
     white — a white rail carrying white text. Defining it here fixes those callers. */
  --surface2:    #162035;
  --border:      rgba(255,255,255,.08);
  --border-gold: rgba(240,208,104,.25);
  --gold:        #F0D068;   /* Original Gold restored for dark mode */
  /* Text that sits ON a --gold background. applyAccent() recomputes this per
     accent; these are the defaults for before it runs. Dark theme's --gold is
     an actual gold, so the ink is dark. */
  --gold-ink:    #0d1424;
  /* Background for a FILLED button. applyAccent() nudges it away from
     --gold-ink until the whole gradient clears AA; for this default gold
     no nudge is needed, so it matches --gold. */
  --gold-btn:      #F0D068;
  --gold-btn-dark: #c9a82c;
  --gold-dark: #265E9A;
  --purple:      #6c3ebf;
  --purple-light:#a78bfa;
  --teal:        #3b6dff;
  /* --teal is tuned for chart strokes, where nothing sits on top of it.
     White on it measures 4.36:1 and a dark ink 3.58:1, so BOTH fail AA on a
     button. --teal-btn is the same hue pushed down until white clears AA;
     use it wherever the teal carries a label. */
  --teal-btn:    #2f5fe6;
  --teal-ink:    #ffffff;
  --text:        #ffffff;
  --text-muted:  rgba(255,255,255,.55);
  /* .35 measured only 3.18:1 on --surface, below WCAG AA (4.5) for the small,
     uppercase labels this token is used for. .48 gives 4.85:1 and still reads as
     the quietest step in the type hierarchy. */
  --text-dim:    rgba(255,255,255,.48);
  --dark:        #012250;
  --radius:      14px;
  --radius-sm:   8px;
  --shadow:      0 2px 20px rgba(0,0,0,.4);
  --shadow-md:   0 4px 32px rgba(0,0,0,.5);
  --shadow-gold: 0 4px 24px rgba(240,208,104,.2);
  --nav-bg:      #080f1a;
  --footer-bg:   #080f1a;
  --future-blue: #2B6CB0;
}

/* ══════════════════════════════════════════════════════
   DAY / LIGHT MODE  — mandeepsaini.com "Vibrant Productivity"
   ClickUp-inspired: bright canvas, future blue accent, deep charcoal text
   ══════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:            #ffffff;   /* Canvas White */
  --bg-card:       #ffffff;
  --bg-card-hover: #edf6fd;   /* Shadow Tint Blue */
  --surface:       #ffffff;
  --surface2:      #ffffff;   /* see the dark-mode note above */
  --border:        #e8e8e8;   /* Ash Gray */
  --border-gold:   rgba(0, 113, 227, .15);
  --gold: #2B6CB0;   /* Future Blue (primary accent) */
  --gold-ink:      #ffffff;   /* light theme's --gold is a BLUE, so white ink */
  --gold-btn: #2B6CB0;   /* filled-button background, see --gold-btn above */
  --gold-btn-dark: #265E9A;
  --gold-dark:     #122BA5;   /* Deep Blue (high-contrast buttons) */
  --purple:        #6647f0;   /* Vivid Purple */
  --purple-light:  #a78bfa;
  --teal:          #0091ff;   /* Electric Blue (secondary / charts) */
  --teal-btn:      #0062c9;   /* the same blue, dark enough for white text */
  --teal-ink:      #ffffff;
  --text:          #292d34;   /* Midnight Charcoal */
  /* #666c77 is 4.83:1 on white but only 4.43:1 on the footer's #e9ebf0,
     where most of the links using it actually live. #616772 is 4.77 there. */
  --text-muted:    #616772;
  /* Was #868d9c, which measured 3.33:1 on white — below WCAG AA (4.5) and the reason
     the rail's section headings and the chart house numbers read as washed out.
     #6b7280 gives 4.83:1 while staying a step lighter than --text-muted. */
  --text-dim:      #6b7280;   /* Slate Gray (dim, AA on white) */
  --radius:        12px;      /* radius-cards */
  --radius-sm:     9px;       /* radius-buttons */
  --shadow:        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
  --shadow-md:     rgba(18, 43, 165, 0.08) 0px 12px 12px -6px;
  --shadow-gold:   0 4px 20px rgba(0, 113, 227, 0.12);
  --nav-bg:        rgba(255, 255, 255, 0.95);
  --footer-bg:     #e9ebf0;   /* Hint of Sky */
}

/* Day mode: headings are higher contrast Deep Space Charcoal */
[data-theme="light"] h1, 
[data-theme="light"] h2, 
[data-theme="light"] h3, 
[data-theme="light"] h4, 
[data-theme="light"] h5, 
[data-theme="light"] h6 { 
  color: #090c1d; 
}

/* Day mode: logo text adaptation */
[data-theme="light"] .logo-astro { color: #090c1d; }
[data-theme="light"] .logo-bnn   { color: var(--gold); }   /* BNN logo stays Gold for identity */
[data-theme="light"] .logo-P     { color: #090c1d; }
[data-theme="light"] .logo-ro    { color: #090c1d; }

/* Day mode: Announce bar follows mandeepsaini.com subtle section style */
[data-theme="light"] .announce-bar { background: #e9ebf0; color: #292d34; border-bottom: 1px solid #e8e8e8; }
/* These used to hard-code #0071e3, the light theme's DEFAULT accent. That
   ignored the accent picker entirely and measured 3.94:1 on the footer.
   var(--gold) follows the picker and is AA on every surface. */
[data-theme="light"] .announce-bar a { color: var(--gold); }

/* ── Body ── */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 1100px 900px at -8% -4%,  rgba(108,62,191,.34) 0%, transparent 58%),
    radial-gradient(ellipse  800px 700px at 108%   8%,  rgba(1,34,80,.75)    0%, transparent 54%),
    radial-gradient(ellipse  700px 600px at  60%  110%, rgba(59,109,255,.16) 0%, transparent 58%),
    radial-gradient(ellipse  600px 500px at  50%   45%, rgba(108,62,191,.12) 0%, transparent 65%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

[data-theme="light"] body {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Hide background orbs in light mode */
[data-theme="light"] .animate-orb-1,
[data-theme="light"] .animate-orb-2 {
  display: none !important;
}

/* ── Text shimmer (hero headlines) ── */
@keyframes shimmer-x{0%{background-position:200%}100%{background-position:-200%}}
.text-shimmer{
  background:linear-gradient(90deg,#E7C25A 0%,#f5e088 40%,#E7C25A 60%,#c9a63e 100%);
  -webkit-text-fill-color:transparent;background-size:200%;
  -webkit-background-clip:text;background-clip:text;
  animation:4s linear infinite shimmer-x;
}
[data-theme="light"] .text-shimmer{
  background:linear-gradient(90deg,#0071e3 0%,#0091ff 40%,#0071e3 60%,#005bb5 100%) 0 0/200%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:4s linear infinite shimmer-x;
}

/* ── Announce bar ── */
[data-theme="light"] .announce-bar {
  background: #e9ebf0;
  border-color: #e8e8e8;
  color: #292d34;
}
[data-theme="light"] .announce-bar a { color: var(--gold); font-weight: 700; }

/* ── Nav ── */
[data-theme="light"] .site-nav {
  background: var(--nav-bg);
  border-color: #e8e8e8;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
[data-theme="light"] .nav-links a { color: #292d34; }
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active { background: #edf6fd; color: var(--gold); }
[data-theme="light"] .nav-links a.active-learn { background: #edf6fd; color: var(--gold); }
[data-theme="light"] .nav-admin-link { color: #666c77; border-color: #e8e8e8; }
[data-theme="light"] .nav-admin-link:hover { color: var(--gold); border-color: var(--gold); }
[data-theme="light"] .nav-dropdown {
  background: #ffffff;
  border-color: #e8e8e8;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px 0px;
}
[data-theme="light"] .nav-dropdown a { color: #292d34; }
[data-theme="light"] .nav-dropdown a:hover { background: #edf6fd; color: var(--gold); }
[data-theme="light"] .nav-cta-btn { background: var(--teal-btn); color: var(--teal-ink); }
[data-theme="light"] .nav-cta-btn:hover { opacity: .9; }

/* ── Page hero ── */
[data-theme="light"] .page-hero::before {
  display: none !important;
}
[data-theme="light"] .page-hero h1 { color: #090c1d; }
[data-theme="light"] .page-hero p  { color: #292d34; }
[data-theme="light"] .page-hero .breadcrumb { color: #b3b3b3; }
[data-theme="light"] .page-hero .breadcrumb a { color: #292d34; }

/* ── Section heads ── */
[data-theme="light"] .sec-head h2 { color: #090c1d; }
[data-theme="light"] .sec-head p  { color: #292d34; }
[data-theme="light"] .sec-label   { color: var(--gold); }
[data-theme="light"] .section-dark { background: #e9ebf0; }

/* ── Buttons ── */
[data-theme="light"] .btn-gold  { background: #0071e3; color: #ffffff; box-shadow: 0 2px 14px rgba(0,113,227,.15); }
[data-theme="light"] .btn-gold:hover { background: #005bb5; }
[data-theme="light"] .btn-ghost { color: #292d34; border-color: #e8e8e8; }
[data-theme="light"] .btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: #edf6fd; }

/* ── Course cards ── */
[data-theme="light"] .course-card {
  background: #ffffff;
  border-color: #e8e8e8;
  box-shadow: var(--shadow);
}
[data-theme="light"] .course-card:hover {
  background: #ffffff;
  border-color: rgba(0,113,227,.3);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px 0px;
  transform: translateY(-4px);
}
[data-theme="light"] .course-card.featured {
  border-color: rgba(0,113,227,.4);
  box-shadow: var(--shadow-gold);
}
[data-theme="light"] .cc-thumb { background: linear-gradient(135deg,#e8e4f4,#d4cef0); }
[data-theme="light"] .cc-badge { background: var(--gold-btn); color: var(--gold-ink); }
[data-theme="light"] .cc-tag   { color: #b3b3b3; }
[data-theme="light"] .cc-title { color: #090c1d; }
[data-theme="light"] .cc-desc  { color: #666c77; }
[data-theme="light"] .cc-meta span { color: #b3b3b3; }
[data-theme="light"] .cc-price .amount { color: var(--gold); }
[data-theme="light"] .cc-price .old    { color: #b3b3b3; }
[data-theme="light"] .cc-price .membership { background: rgba(0,113,227,.1); color: var(--teal); border-color: rgba(0,113,227,.2); }
[data-theme="light"] .cc-cta { border-color: rgba(0,113,227,.35); color: var(--gold); }
[data-theme="light"] .cc-cta:hover,
[data-theme="light"] .course-card.featured .cc-cta { background: var(--gold-btn); color: var(--gold-ink); }

/* ── Plan cards ── */
[data-theme="light"] .plan-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.09);
  box-shadow: var(--shadow);
}
[data-theme="light"] .plan-card.featured {
  border-color: rgba(0,113,227,.35);
  box-shadow: 0 6px 32px rgba(0,113,227,.14);
}
[data-theme="light"] .plan-tier   { color: #b3b3b3; }
[data-theme="light"] .plan-price  { color: #090c1d; }
[data-theme="light"] .plan-price sup { color: var(--gold); }
[data-theme="light"] .plan-price .per { color: #666c77; }
[data-theme="light"] .plan-desc   { color: #666c77; }
[data-theme="light"] .plan-was    { color: #b3b3b3; }
[data-theme="light"] .plan-divider { border-color: rgba(0,0,0,.08); }
[data-theme="light"] .plan-feats li { color: #292d34; }
[data-theme="light"] .plan-feats .y { color: var(--teal); }
[data-theme="light"] .plan-feats .n { color: #b3b3b3; }
[data-theme="light"] .plan-cta { border-color: rgba(0,113,227,.3); color: var(--gold); }
[data-theme="light"] .plan-cta:hover,
[data-theme="light"] .plan-card.featured .plan-cta { background: var(--gold-btn); color: var(--gold-ink); }
[data-theme="light"] .plan-best { background: var(--gold-btn); color: var(--gold-ink); }

/* ── Billing toggle ── */
[data-theme="light"] .toggle-label       { color: #b3b3b3; }
[data-theme="light"] .toggle-label.active{ color: #090c1d; }
[data-theme="light"] .toggle-track       { background: rgba(0,0,0,.15); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .toggle-track.yearly{ background: var(--purple); }
[data-theme="light"] .save-badge         { background: var(--teal-btn); color: var(--teal-ink); }

/* ── Feature comparison table ── */
[data-theme="light"] .feat-table { background: #ffffff; box-shadow: var(--shadow); border-radius: var(--radius); }
[data-theme="light"] .feat-table th {
  background: #e9ebf0;
  color: #090c1d;
  border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .feat-table td {
  color: #666c77;
  border-color: rgba(0,0,0,.06);
}
[data-theme="light"] .feat-table td:first-child { color: #090c1d; font-weight: 600; }
[data-theme="light"] .feat-table tr:nth-child(even) td { background: rgba(0,0,0,.018); }
[data-theme="light"] .feat-table .tick  { color: var(--teal); }
[data-theme="light"] .feat-table .cross { color: #b3b3b3; }
[data-theme="light"] .feat-table .col-pp{ background: rgba(0,113,227,.03); }

/* ── Perks ── */
[data-theme="light"] .perk {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
  box-shadow: var(--shadow);
}
[data-theme="light"] .perk:hover { border-color: rgba(0,113,227,.3); box-shadow: var(--shadow-md); }
[data-theme="light"] .perk h4 { color: #090c1d; }
[data-theme="light"] .perk p  { color: #666c77; }

/* ── CTA banner ── */
[data-theme="light"] .cta-banner {
  background: linear-gradient(135deg,#ebebf5,#e0d8f8);
  border-color: rgba(0,113,227,.2);
}
[data-theme="light"] .cta-banner h2 { color: #090c1d; }
[data-theme="light"] .cta-banner p  { color: #666c77; }

/* ── Footer ── */
[data-theme="light"] .site-footer { background: var(--footer-bg); border-top: 1px solid #e8e8e8; }
[data-theme="light"] .footer-brand p { color: #292d34; }
[data-theme="light"] .footer-brand a  { color: var(--gold); }
[data-theme="light"] .footer-col h5  { color: #090c1d; font-weight: 700; }
/* was a hard copy of --text-muted's old value, and it kept the footer at
   4.43:1 after the token itself was fixed. Let it follow the token. */
[data-theme="light"] .footer-col a   { color: var(--text-muted); }
[data-theme="light"] .footer-col a:hover { color: var(--gold); }
[data-theme="light"] .footer-bottom  { color: #b3b3b3; border-top: 1px solid #e8e8e8; }
[data-theme="light"] .footer-bottom a { color: #b3b3b3; }
[data-theme="light"] .footer-bottom a:hover { color: var(--gold); }
[data-theme="light"] .footer-disclaimer { color: #9aa0aa; border-top: 1px solid #e8e8e8; }
[data-theme="light"] .footer-disclaimer strong { color: #6e6e73; }

/* ── Logo ── */
[data-theme="light"] .logo-astro { color: #090c1d; }
[data-theme="light"] .logo-bnn   { color: var(--gold); }
[data-theme="light"] .logo-P     { color: #090c1d; }
[data-theme="light"] .logo-ro    { color: #090c1d; }

/* ── Theme toggle button ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
[data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,.18); color: #666c77; background: #ffffff; }
[data-theme="light"] .theme-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* Currency picker, injected into the header by assets/site-header.js. Matches the
   theme toggle so the two controls read as a pair. A native select on purpose:
   it costs nothing, is keyboard accessible, and on a phone it opens the OS
   picker rather than a bespoke dropdown we would have to maintain. */
.nav-cur {
  appearance: none; -webkit-appearance: none;
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
  border-radius: 8px;
  padding: 6px 26px 6px 10px;
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  /* A <select> is as wide as its WIDEST option, and the widest here is
     "Automatic (my location)", so the closed control was sized for a string it
     almost never displays. Closed, it only ever shows "₹ INR" or similar, so it
     is capped and the label ellipsised. The open list is not affected: the
     browser sizes the dropdown to its own content. */
  width: 5.6rem;
  max-width: 5.6rem;
  text-overflow: ellipsis;
  transition: border-color .15s, color .15s;
  /* caret, so removing the native appearance does not remove the affordance */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.nav-cur:hover { border-color: var(--gold); color: var(--gold); }
.nav-cur option { background: #0d1424; color: #fff; }
[data-theme="light"] .nav-cur { border-color: rgba(0,0,0,.18); color: #666c77; background-color: #fff; }
[data-theme="light"] .nav-cur:hover { border-color: var(--gold); color: var(--gold); }
[data-theme="light"] .nav-cur option { background: #fff; color: #1d1d1f; }
/* Kept visible on phones, just tighter: most Indian readers are on one, and the
   whole point of this control is letting them pick ₹. */
@media (max-width: 480px) {
  .nav-cur { font-size: .72rem; padding: 5px 20px 5px 7px; width: 4.9rem; max-width: 4.9rem;
             background-position: right 9px center, right 4px center; }
}

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top keeps anchored and scrolled-to content clear of the header
 * rather than landing underneath it. Harmless while the header is not sticking
 * (see the note on body's overflow-x below), and correct the moment it does. */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scroll-padding-top: calc(var(--bnn-header-h, 61px) + 12px);
}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 1100px 900px at -8%  -4%,  rgba(108,62,191,.34) 0%, transparent 58%),
    radial-gradient(ellipse  800px 700px at 108%   8%,  rgba(1,34,80,.75)    0%, transparent 54%),
    radial-gradient(ellipse  700px 600px at  60%  110%, rgba(59,109,255,.16) 0%, transparent 58%),
    radial-gradient(ellipse  600px 500px at  50%   45%, rgba(108,62,191,.12) 0%, transparent 65%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  /* ⚠️ This one declaration is why NO sticky header on the site currently sticks.
     `overflow-x: hidden` forces the other axis to compute as `auto`, making body a
     second, inner scroll container; a `position: sticky` child then sticks to
     body's scrollport, and since body never scrolls itself it just scrolls away
     with the content. Measured on the live site: the global header declares
     `sticky; top:0` and sat at top:-900 after a 900px scroll.

     Deleting this line restores sticky everywhere in one go — but that is a
     visible, site-wide change (headers would start overlaying content on scroll),
     so it is left alone deliberately rather than slipped in. lesson.html's
     hard-coded style="position:relative" on its own bar is a workaround for the
     same cause and should come out at the same time. */
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Announce bar ── */
.announce-bar { background: linear-gradient(90deg, rgba(108,62,191,.9) 0%, rgba(80,40,160,.9) 100%); border-bottom: 1px solid rgba(108,62,191,.5); color: rgba(255,255,255,.92); text-align: center; padding: 9px 16px; font-size: .82rem; font-weight: 500; position: relative; z-index: 1001; }
.announce-bar a { color: #F0D068; font-weight: 700; text-decoration: none; }
.announce-bar a:hover { text-decoration: underline; }

/* ── Nav ── */
.site-nav { background: #080f1a; border-bottom: 1px solid var(--border-gold); position: sticky; top: 0; z-index: 1000; transition: top 0.3s; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
/* ── Logo (Garet + Bukhari Script) ── */
.nav-logo {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  line-height: 1;
  gap: 0;
  flex-shrink: 0;
}
.logo-astro {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffffff;
  letter-spacing: -.2px;
}
.logo-bnn {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #F0D068;          /* always bright gold — both modes */
  letter-spacing: -.2px;
  margin-left: 5px;
}
.logo-pro-wrap {
  display: inline-flex;
  align-items: baseline;
  margin-left: 5px;
  line-height: 1;
}
.logo-P {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffffff;
  letter-spacing: -.2px;
}
.logo-ro {
  font-family: 'Bukhari Script', cursive;
  font-size: 1.2rem;
  color: #ffffff;
  display: inline-block;
  transform: rotate(-10deg) translateY(-3px);
  transform-origin: left bottom;
  margin-left: 3px;
}
/* Day mode: text adapts but BNN stays gold */
[data-theme="light"] .logo-astro { color: #0d1424; }
[data-theme="light"] .logo-bnn   { color: var(--gold); }   /* keep bright gold */
[data-theme="light"] .logo-P     { color: #0d1424; }
[data-theme="light"] .logo-ro    { color: #0d1424; }
.nav-links { display: flex; gap: 2px; list-style: none; }
.nav-links a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: rgba(255,255,255,.7); padding: 7px 11px; border-radius: 6px; font-size: .86rem; font-weight: 500; transition: background .15s, color .15s; }
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,.1); color: #fff; }
.nav-links a.active-learn { background: rgba(240,208,104,.15); color: var(--gold); }
/* Collapsible wrapper (holds links + actions) + hamburger button */
.nav-collapse { display: flex; align-items: center; flex: 1; justify-content: space-between; gap: 16px; margin-left: 8px; }
.nav-ham { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; background: transparent; border: none; cursor: pointer; border-radius: 8px; flex: 0 0 auto; }
.nav-ham span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; margin: 0 auto; transition: transform .25s ease, opacity .2s ease; }
[data-theme="light"] .nav-ham span { background: #16202f; }
.nav-ham.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-ham.is-open span:nth-child(2) { opacity: 0; }
.nav-ham.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-admin-link { font-size: .78rem; color: rgba(255,255,255,.4); padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); transition: all .15s; white-space: nowrap; }
.nav-admin-link:hover { color: var(--gold); border-color: rgba(240,208,104,.3); }
.nav-links li.has-dropdown { position: relative; }
.nav-dropdown { display: none; position: absolute; top: 100%; left: 0; background: #080f1a; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 6px; min-width: 200px; z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.nav-links li.has-dropdown:hover .nav-dropdown { display: block; }
.nav-dropdown li { list-style: none; }
.nav-dropdown a { display: block; padding: 8px 12px; border-radius: 6px; font-size: .82rem; color: rgba(255,255,255,.65); transition: all .12s; }
.nav-dropdown a:hover { background: rgba(240,208,104,.1); color: #F0D068; }
/* ── Learn mega-menu ── */
.nav-megamenu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 340px; background: #080f1a; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; z-index: 200; box-shadow: 0 16px 48px rgba(0,0,0,.6); overflow: hidden; }
.nav-links li.has-dropdown:hover .nav-megamenu { display: block; }
/* Compact, right-aligned dropdowns (About Dr. Saini, My Account) */
.nav-compact-menu { left: auto; right: 0; transform: none; width: 260px; }
.nav-account { position: relative; display: inline-block; }
.nav-account:hover .nav-megamenu,
.nav-account.is-open .nav-megamenu { display: block; }
.nmm-section-label { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #F0D068; padding: 14px 16px 6px; }
.nmm-course-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-decoration: none; transition: background .12s; }
.nmm-course-item:hover { background: rgba(255,255,255,.05); }
.nmm-icon-box { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.nmm-num-icon { font-size: .65rem; font-weight: 800; color: rgba(255,255,255,.7); line-height: 1.3; text-align: center; }
.nmm-course-info { display: flex; flex-direction: column; gap: 2px; }
.nmm-course-title { font-size: .85rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 7px; }
.nmm-course-desc { font-size: .74rem; color: rgba(255,255,255,.45); }
.nmm-badge { font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.nmm-best { background: rgba(240,208,104,.18); color: #F0D068; border: 1px solid rgba(240,208,104,.3); }
.nmm-pop  { background: rgba(99,102,241,.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
.nmm-new  { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.12); }
.nmm-divider { height: 1px; background: rgba(255,255,255,.07); margin: 6px 0; }
.nmm-resources { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px 10px 10px; }
.nmm-resource-item { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 10px; text-decoration: none; transition: background .12s; }
.nmm-resource-item:hover { background: rgba(255,255,255,.05); }
.nmm-resource-item svg { color: #F0D068; }
.nmm-resource-item strong { font-size: .82rem; color: #fff; font-weight: 700; }
.nmm-resource-item span { font-size: .72rem; color: rgba(255,255,255,.4); }
.nmm-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }
.nmm-footer a { font-size: .78rem; color: rgba(255,255,255,.55); text-decoration: none; transition: color .12s; }
.nmm-footer a:hover { color: #F0D068; }
.nmm-footer span { font-size: .72rem; color: rgba(240,208,104,.65); }
[data-theme="light"] .nav-megamenu { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 16px 48px rgba(0,0,0,.15); }
[data-theme="light"] .nmm-section-label { color: var(--gold); }
[data-theme="light"] .nmm-course-title { color: #090c1d; }
[data-theme="light"] .nmm-course-desc { color: rgba(0,0,0,.45); }
[data-theme="light"] .nmm-icon-box { background: rgba(0,0,0,.06); }
[data-theme="light"] .nmm-course-item:hover,[data-theme="light"] .nmm-resource-item:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .nmm-divider { background: rgba(0,0,0,.07); }
[data-theme="light"] .nmm-resource-item strong { color: #090c1d; }
[data-theme="light"] .nmm-resource-item span { color: rgba(0,0,0,.4); }
[data-theme="light"] .nmm-footer { border-color: rgba(0,0,0,.07); background: rgba(0,0,0,.02); }
[data-theme="light"] .nmm-footer a { color: rgba(0,0,0,.5); }
[data-theme="light"] .nmm-footer span { color: var(--gold); }
[data-theme="light"] .nmm-watch-item svg { color: var(--gold); }
/* Watch & Listen section in mega-menu */
.nmm-watch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px 10px 10px; }
.nmm-watch-item { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 10px; text-decoration: none; transition: background .12s; }
.nmm-watch-item:hover { background: rgba(255,255,255,.05); }
.nmm-watch-item svg { color: #F0D068; }
.nmm-watch-item strong { font-size: .82rem; color: #fff; font-weight: 700; }
.nmm-watch-item span { font-size: .72rem; color: rgba(255,255,255,.4); }
[data-theme="light"] .nmm-watch-item:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .nmm-watch-item strong { color: #090c1d; }
[data-theme="light"] .nmm-watch-item span { color: rgba(0,0,0,.4); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-cta-btn { background: var(--teal-btn); color: var(--teal-ink); font-weight: 700; padding: 8px 18px; border-radius: 6px; font-size: .82rem; white-space: nowrap; transition: opacity .15s; cursor: pointer; }
.nav-cta-btn:hover { opacity: .88; }
.nav-login-link { font-size: .82rem; font-weight: 600; color: var(--text-muted); padding: 8px 12px; margin-right: 4px; cursor: pointer; white-space: nowrap; transition: color .15s; }
.nav-login-link:hover { color: var(--gold); }

/* ── Google Translate widget (nav) ── */
.nav-translate, .bnn-gh-translate { line-height: 1; }
.nav-translate .goog-te-gadget,
.bnn-gh-translate .goog-te-gadget { font-size: 0 !important; }
.nav-translate .goog-te-gadget select,
.bnn-gh-translate .goog-te-gadget select {
  font-size: .75rem !important;
  background-color: #0d1424 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(240,208,104,.7)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  color: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(240,208,104,.35) !important;
  border-radius: 7px !important;
  padding: 5px 28px 5px 10px !important;
  cursor: pointer; outline: none; line-height: 1.4; max-width: 150px;
  -webkit-appearance: none !important; appearance: none !important;
}
.nav-translate .goog-te-gadget select:hover,
.bnn-gh-translate .goog-te-gadget select:hover { border-color: rgba(240,208,104,.5); color: var(--gold); }
.nav-translate .goog-te-gadget > span,
.bnn-gh-translate .goog-te-gadget > span { display: none !important; }
/* Google Translate bar — allowed to show so "Show original" works */
[data-theme="light"] .nav-translate .goog-te-gadget select,
[data-theme="light"] .bnn-gh-translate .goog-te-gadget select {
  background: #f5f0e8 !important; color: rgba(0,0,0,.65) !important;
  border-color: rgba(180,140,20,.35) !important;
}
[data-theme="light"] .nav-translate .goog-te-gadget select:hover,
[data-theme="light"] .bnn-gh-translate .goog-te-gadget select:hover {
  border-color: rgba(180,140,20,.5) !important; color: #7a5400 !important;
}

/* ── Wrap ── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Sections ── */
.section { padding: 80px 0; }
.section-dark { padding: 80px 0; background: rgba(255,255,255,.02); }

/* ── Section head ── */
.sec-head { text-align: center; max-width: 660px; margin: 0 auto 52px; }
.sec-label { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 10px; }
.sec-head h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.8rem,3.5vw,2.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 14px; }
.sec-head p { color: var(--text-muted); font-size: 1rem; }

/* ── Page hero ── */
.page-hero { padding: 80px 0 70px; text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 700px; height: 400px; background: radial-gradient(ellipse, rgba(108,62,191,.2) 0%, transparent 70%); pointer-events: none; }
.page-hero .breadcrumb { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: .78rem; color: var(--text-dim); margin-bottom: 20px; }
.page-hero .breadcrumb a { color: var(--text-muted); }
.page-hero .breadcrumb a:hover { color: var(--gold); }
.page-hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2rem,4vw,3rem); font-weight: 800; line-height: 1.15; margin-bottom: 18px; }
.page-hero h1 em { color: var(--gold); font-style: normal; }
.page-hero p { color: var(--text-muted); font-size: 1.05rem; max-width: 560px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 32px; font-size: .92rem; font-weight: 700; transition: all .2s; cursor: pointer; border: none; white-space: nowrap; }
.btn-gold { background: var(--gold-btn); color: var(--gold-ink); box-shadow: var(--shadow-gold); }
.btn-gold:hover { opacity: .9; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.25); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-lg { padding: 14px 34px; font-size: 1rem; }

/* ── Course card ── */
.course-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.course-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all .2s; }
.course-card:hover { background: var(--bg-card-hover); border-color: rgba(240,208,104,.3); transform: translateY(-3px); }
.course-card.featured { border-color: var(--border-gold); box-shadow: var(--shadow-gold); }
.cc-thumb { background: linear-gradient(135deg, #0f1f3d, #1a1050); height: 130px; display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; }
.cc-badge { position: absolute; top: 12px; right: 12px; background: var(--gold-btn); color: var(--gold-ink); font-size: .65rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: .5px; }
.cc-body { padding: 22px 22px 26px; }
.cc-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); margin-bottom: 6px; }
.cc-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.cc-desc { font-size: .84rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.cc-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cc-meta span { font-size: .75rem; color: var(--text-dim); }
.cc-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.cc-price [data-price] { font-size: 1.5rem; font-weight: 800; color: var(--gold); }
.cc-price .cc-price-note { font-size: .72rem; color: var(--text-dim); }
.cc-price .amount { font-size: 1.6rem; font-weight: 800; color: var(--gold); }
.cc-price .old { font-size: .85rem; color: var(--text-dim); text-decoration: line-through; }
.cc-price .membership { font-size: .75rem; background: rgba(59,109,255,.12); color: var(--teal); border: 1px solid rgba(59,109,255,.25); border-radius: 6px; padding: 2px 8px; font-weight: 700; }
.cc-cta { display: block; text-align: center; padding: 11px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-gold); color: var(--gold); font-weight: 700; font-size: .88rem; transition: all .18s; }
.cc-cta:hover, .course-card.featured .cc-cta { background: var(--gold-btn); color: var(--gold-ink); }

/* ── Membership plans ── */
.plans-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: start; }
.plan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 26px; position: relative; transition: all .2s; }
.plan-card.featured { border-color: var(--border-gold); box-shadow: var(--shadow-gold); }
.plan-best { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold-btn); color: var(--gold-ink); font-size: .68rem; font-weight: 800; padding: 4px 16px; border-radius: 99px; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.plan-tier { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 10px; }
.plan-price { font-size: 2.8rem; font-weight: 800; line-height: 1; margin-bottom: 6px; color: var(--gold); }
.plan-price [data-price] { font-size: inherit; font-weight: inherit; color: inherit; }
.plan-price sup { font-size: 1.4rem; vertical-align: top; margin-top: 6px; color: var(--gold); }
.plan-price .per { font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.plan-desc { font-size: .83rem; color: var(--text-muted); margin-bottom: 8px; }
.plan-was { font-size: .78rem; color: var(--text-dim); text-decoration: line-through; margin-bottom: 12px; }
.plan-divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.plan-feats { list-style: none; margin-bottom: 26px; }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; padding: 6px 0; line-height: 1.45; color: rgba(255,255,255,.8); }
.plan-feats .y { color: var(--teal); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.plan-feats .n { color: var(--text-dim); flex-shrink: 0; margin-top: 1px; }
.plan-cta { display: block; text-align: center; padding: 13px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-gold); color: var(--gold); font-weight: 700; font-size: .9rem; transition: all .18s; }
.plan-cta:hover, .plan-card.featured .plan-cta { background: var(--gold-btn); color: var(--gold-ink); }

/* ── Billing toggle ── */
.billing-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 44px; }
.toggle-label { font-size: .88rem; font-weight: 600; color: var(--text-dim); }
.toggle-label.active { color: #fff; }
.toggle-track { width: 48px; height: 26px; background: rgba(108,62,191,.5); border-radius: 99px; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; border: 1px solid rgba(108,62,191,.6); }
.toggle-thumb { width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform .2s; }
.toggle-track.yearly { background: var(--purple); }
.toggle-track.yearly .toggle-thumb { transform: translateX(22px); }
.save-badge { background: var(--teal-btn); color: var(--teal-ink); font-size: .65rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; letter-spacing: .5px; white-space: nowrap; }

/* ── Feature comparison table ── */
.feat-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.feat-table th { background: #080f1a; color: rgba(255,255,255,.7); padding: 14px 18px; font-size: .8rem; font-weight: 700; text-align: center; border-bottom: 1px solid var(--border); }
.feat-table th:first-child { text-align: left; }
.feat-table td { padding: 12px 18px; font-size: .84rem; border-bottom: 1px solid var(--border); text-align: center; color: var(--text-muted); }
.feat-table td:first-child { text-align: left; color: rgba(255,255,255,.8); font-weight: 500; }
.feat-table tr:last-child td { border-bottom: none; }
.feat-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.feat-table .tick { color: var(--teal); font-weight: 800; }
.feat-table .cross { color: var(--text-dim); }
.feat-table .col-pp { background: rgba(240,208,104,.04); }

/* ── Perks ── */
.perks-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.perk { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 20px; text-align: center; transition: all .2s; }
.perk:hover { border-color: var(--border-gold); }
.perk-icon { font-size: 2rem; margin-bottom: 12px; }
.perk h4 { font-size: .9rem; font-weight: 700; margin-bottom: 7px; color: #fff; }
.perk p { font-size: .8rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* ── CTA banner ── */
.cta-banner { background: linear-gradient(135deg, #0f1f3d, #1a1050); border-top: 1px solid var(--border-gold); border-bottom: 1px solid var(--border-gold); padding: 70px 0; text-align: center; }
.cta-banner h2 { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; margin-bottom: 14px; }
.cta-banner p { color: var(--text-muted); font-size: 1rem; max-width: 520px; margin: 0 auto 32px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ── */
.site-footer { background: #080f1a; border-top: 1px solid var(--border); padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-logo { display: flex; align-items: baseline; margin-bottom: 14px; }
.footer-brand p { font-size: .84rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 8px; }
.footer-brand a { color: var(--gold); }
.footer-col h5 { color: rgba(255,255,255,.9); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--text-muted); font-size: .84rem; transition: color .15s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--text-dim); }
.footer-bottom a { color: var(--text-dim); }
.footer-bottom a:hover { color: var(--gold); }
.footer-disclaimer { max-width: 980px; margin: 0 auto 16px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .72rem; line-height: 1.65; color: var(--text-dim); text-align: center; }
.footer-disclaimer strong { color: var(--text-muted); font-weight: 600; }

/* ── Association trust band ── */
.footer-assoc { max-width: 980px; margin: 0 auto 28px; padding-top: 32px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 32px; }
.footer-assoc-badge { flex: 0 0 auto; display: block; background: #fff; border-radius: 16px; padding: 16px 22px;
  box-shadow: 0 6px 24px rgba(0,0,0,.28); border: 1px solid rgba(197,160,90,.35); transition: transform .2s, box-shadow .2s; }
.footer-assoc-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.footer-assoc-badge img { display: block; width: 210px; max-width: 100%; height: auto; }
.footer-assoc-text { flex: 1 1 auto; min-width: 0; }
.footer-assoc-seal { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(197,160,90,.45); border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; }
.footer-assoc-text p { font-size: .86rem; line-height: 1.7; color: var(--text-muted); margin: 0 0 14px; }
.footer-assoc-text p strong { color: rgba(255,255,255,.92); font-weight: 700; }
.footer-assoc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-assoc-btn { display: inline-block; font-size: .82rem; font-weight: 700; padding: 9px 18px; border-radius: 999px; transition: all .18s; }
.footer-assoc-btn.primary { background: var(--gold-btn); color: var(--gold-ink); border: 1px solid var(--gold-btn); }
[data-theme="dark"] .footer-assoc-btn.primary { color: #1a1204; }
.footer-assoc-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.footer-assoc-btn.ghost { background: transparent; color: var(--gold); border: 1px solid rgba(197,160,90,.5); }
.footer-assoc-btn.ghost:hover { background: rgba(197,160,90,.12); }
[data-theme="light"] .footer-assoc { border-top: 1px solid #e8e8e8; }
[data-theme="light"] .footer-assoc-badge { border: 1px solid #ece3cf; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
[data-theme="light"] .footer-assoc-text p strong { color: #1d1d1f; }
@media (max-width: 640px) {
  .footer-assoc { flex-direction: column; text-align: center; gap: 20px; }
  .footer-assoc-actions { justify-content: center; }
  .footer-assoc-badge img { width: 240px; }
}

/* ── Native LMS (learner hub + My Courses) ── */
.lms-card .cc-body { display: flex; flex-direction: column; }
.lms-cta-row { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lms-cta-buy { background: var(--gold-btn); color: var(--gold-ink); border: none; font-weight: 800; cursor: pointer; font-family: inherit; }
[data-theme="light"] .lms-cta-buy { color: #fff; }
.lms-cta-owned { background: #1f8f5f; color: #fff; }
.lms-cta-owned:hover { filter: brightness(1.08); }
/* Day mode: `[data-theme="light"] .cc-cta` (line ~198) outranks the plain
   `.lms-cta-owned` class, so "Continue Learning" was painting accent-blue text on
   the green button — ~1.3:1 contrast, effectively unreadable. Match that
   specificity to keep the label white, and stop :hover repainting it blue. The
   green is a shade deeper here so white bold text clears AA (4.7:1). */
[data-theme="light"] .lms-cta-owned,
[data-theme="light"] .lms-cta-owned:hover { background: #1c8355; color: #fff; }
.lms-preview-link { font-size: .78rem; color: var(--text-dim); text-decoration: underline; }
.lms-preview-link:hover { color: var(--gold); }
.lms-badge { background: transparent !important; padding: 0 !important; }
/* "New" on a course card and in the home rail. Top LEFT, because the tier badge
   already owns the right and the two would sit on top of each other. */
.lms-new {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 11px; border-radius: 99px;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: #16a34a; color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,.35);
}
.cc-thumb { position: relative; }
/* The card body is a link now; it must not look like one. */
.cc-link { display: block; text-decoration: none; color: inherit; }
.cc-link:hover .cc-title { color: var(--gold); }
.cc-body-top { padding-bottom: 0; }
.cc-body-actions { padding-top: 12px; }
.cc-more { display: inline-block; margin-top: 10px; font-size: .8rem; font-weight: 700;
  color: var(--text-muted); text-decoration: none; }
.cc-more:hover { color: var(--gold); }
.lms-owned-badge { background: rgba(31,143,95,.15); color: #2ecc82; border: 1px solid rgba(31,143,95,.4); border-radius: 999px; padding: 3px 10px; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
/* Day mode: the 15%-green fill sits on a white canvas, so the bright #2ecc82 label
   was green-on-green (~1.9:1). Darken the text instead of the badge. */
[data-theme="light"] .lms-owned-badge { color: #12603f; border-color: rgba(31,143,95,.35); }
.lms-tier-badge { background: rgba(197,160,90,.15); color: var(--gold); border: 1px solid rgba(197,160,90,.4); border-radius: 999px; padding: 3px 10px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
/* My Courses (dashboard) */
.lms-my-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; transition: border-color .15s, transform .15s; background: var(--card-bg, rgba(255,255,255,.02)); }
.lms-my-item:hover { border-color: var(--gold); transform: translateX(2px); }
.lms-my-icon { font-size: 1.7rem; flex: 0 0 auto; }
.lms-my-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lms-my-title { font-weight: 700; font-size: .95rem; }
.lms-my-sub { font-size: .78rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lms-my-go { flex: 0 0 auto; color: var(--gold); font-weight: 700; font-size: .82rem; }
.lms-empty { color: var(--text-dim); font-size: .88rem; padding: 8px 0; }
.lms-empty a { color: var(--gold); }

/* ── "How to open your course" help video ────────────────────────────────────
   ONE canonical block, on /learn.html at #how-to-access; the dashboard's
   post-purchase panel and the FAQ items reuse the same classes. The 16:9 wrapper
   matches the one already in lesson.html so embedded video behaves the same way
   everywhere. The embed is served from youtube-nocookie.com: the consent manager
   has only `necessary` and `analytics` categories, and a standard YouTube embed
   would drop tracking cookies before anyone has consented to anything. */
.video-embed-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
                    border-radius: 12px; background: #000; }
.video-embed-wrap iframe, .video-embed-wrap video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.howto-card { border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card);
              padding: 20px 22px; margin: 34px auto 0; max-width: 760px; }
.howto-card > summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 1rem;
                        display: flex; align-items: center; gap: 10px; color: var(--text); }
.howto-card > summary::-webkit-details-marker { display: none; }
.howto-card > summary::after { content: '+'; margin-left: auto; font-size: 1.3rem; font-weight: 700;
                               color: var(--gold); line-height: 1; }
.howto-card[open] > summary::after { content: '\2212'; }
.howto-card > summary:hover { color: var(--gold); }
.howto-sub { font-size: .84rem; color: var(--text-muted); line-height: 1.6; margin: 10px 0 14px; }
.howto-steps { margin: 14px 0 0; padding-left: 20px; font-size: .86rem; line-height: 1.75;
               color: var(--text-muted); }
.howto-steps b { color: var(--text); }

/* ── WhatsApp float ── */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,.4); z-index: 999; transition: transform .2s; }
.whatsapp-float:hover { transform: scale(1.1); }

/* ── Translate FAB ── */
.bnn-translate-fab { position: fixed; bottom: 84px; right: 20px; z-index: 8999; }
.bnn-translate-fab-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 24px;
  background: #080f1a; border: 1px solid rgba(240,208,104,.4);
  color: rgba(255,255,255,.8); font-size: .78rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap; line-height: 1; font-family: inherit;
}
.bnn-translate-fab-btn:hover { border-color: rgba(240,208,104,.75); color: #F0D068; background: rgba(240,208,104,.06); }
[data-theme="light"] .bnn-translate-fab-btn { background: #fff; border-color: rgba(0,0,0,.15); color: #292d34; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
[data-theme="light"] .bnn-translate-fab-btn:hover { background: #f9f6f0; border-color: rgba(0,0,0,.3); color: #090c1d; }
.bnn-translate-popup {
  display: none; position: absolute; bottom: calc(100% + 10px); right: 0;
  background: #080f1a; border: 1px solid rgba(240,208,104,.2);
  border-radius: 14px; padding: 14px; width: 246px;
  box-shadow: 0 10px 40px rgba(0,0,0,.75);
}
.bnn-translate-popup.is-open { display: block; }
.bnn-translate-popup-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-bottom: 10px; padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bnn-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bnn-lang-btn {
  padding: 7px 10px; border-radius: 8px; font-size: .78rem; cursor: pointer;
  border: 1px solid transparent; background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.6); text-align: left; transition: all .12s;
  font-family: inherit; line-height: 1.25;
}
.bnn-lang-btn:hover { background: rgba(240,208,104,.08); border-color: rgba(240,208,104,.2); color: #F0D068; }
.bnn-lang-btn.bnn-lang-active { background: rgba(240,208,104,.1); border-color: rgba(240,208,104,.3); color: #F0D068; font-weight: 700; }
[data-theme="light"] .bnn-translate-popup { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 10px 40px rgba(0,0,0,.15); }
[data-theme="light"] .bnn-translate-popup-label { color: rgba(0,0,0,.35); border-bottom-color: rgba(0,0,0,.07); }
[data-theme="light"] .bnn-lang-btn { background: rgba(0,0,0,.03); color: #292d34; }
[data-theme="light"] .bnn-lang-btn:hover { background: rgba(180,140,20,.08); border-color: rgba(180,140,20,.25); color: #7a5400; }
[data-theme="light"] .bnn-lang-btn.bnn-lang-active { background: rgba(180,140,20,.1); border-color: rgba(180,140,20,.3); color: #7a5400; }
.bnn-lang-back-en { display: block; width: 100%; margin-bottom: 10px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(240,208,104,.4); background: rgba(240,208,104,.08); color: #F0D068; font-size: .82rem; font-weight: 700; cursor: pointer; text-align: center; }
.bnn-lang-back-en:hover { background: rgba(240,208,104,.16); }
[data-theme="light"] .bnn-lang-back-en { background: rgba(180,140,20,.08); border-color: rgba(180,140,20,.3); color: #7a5400; }

/* ── Responsive ── */
@media(max-width: 1024px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media(max-width: 1024px) {
  /* Site header as a fixed unit */
  #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
  .site-nav { position: relative !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(8,15,26,.92) !important; box-shadow: 0 2px 24px rgba(0,0,0,.4); }
  [data-theme="light"] .site-nav { background: rgba(255,255,255,.92) !important; }

  /* Push content below fixed nav */
  body { padding-top: 70px; }
  .nav-ham { display: flex; }
  .nav-actions { display: none; }
  
  /* Mobile dropdown — relative to nav */
  .nav-links { 
    display: none; 
    flex-direction: column; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    background: rgba(8,15,26,.97); 
    border-top: 1px solid rgba(255,255,255,.07); 
    padding: 8px 0 16px; 
    z-index: 999; 
    box-shadow: 0 12px 40px rgba(0,0,0,.6); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    max-height: calc(100vh - 100px); 
    overflow-y: auto; 
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { padding: 14px 24px; border-radius: 0; font-size: 1rem; }
  .nav-links a:hover { background: rgba(255,255,255,.06); }
  /* Mobile mega-menu inline */
  .nav-megamenu { display: none !important; position: static !important; transform: none !important; width: 100% !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; background: rgba(255,255,255,.03) !important; }
  .has-dropdown.is-open .nav-megamenu { display: block !important; }
  [data-theme="light"] .nav-links { background: rgba(255,255,255,.97); border-color: rgba(0,0,0,.08); }
  [data-theme="light"] .nav-megamenu { background: #e9ebf0 !important; }
  .section, .section-dark { padding: 48px 0; }
  .cc-body { padding: 18px 16px 22px; }
  .wrap { padding: 0 20px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
  .logo-astro, .logo-bnn, .logo-P { font-size: 1.05rem; }
  .logo-ro { font-size: 1.1rem; }

  /* ── Mobile menu: the collapsible wrapper IS the dropdown (links + actions) ── */
  .nav-collapse {
    display: none; flex-direction: column; align-items: stretch; gap: 0; flex: none; margin-left: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(8,15,26,.97); border-top: 1px solid rgba(255,255,255,.07);
    padding: 8px 0 16px; z-index: 999; box-shadow: 0 12px 40px rgba(0,0,0,.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav-collapse.is-open { display: flex; }
  [data-theme="light"] .nav-collapse { background: rgba(255,255,255,.98); border-color: rgba(0,0,0,.08); }
  /* links now flow inside the wrapper (not their own absolute dropdown) */
  .nav-links { display: flex; position: static; background: transparent; box-shadow: none; padding: 0; max-height: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: none; }
  [data-theme="light"] .nav-links { background: transparent; }
  /* login / account / theme now appear in the mobile menu */
  .nav-actions { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 24px 2px; margin-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
  [data-theme="light"] .nav-actions { border-top-color: rgba(0,0,0,.08); }
  .nav-actions .theme-toggle { align-self: flex-start; }
  #nav-auth-area { width: 100%; }
  #nav-auth-area .nav-cta-btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }
  #nav-auth-area .nav-login-link { display: block; width: 100%; text-align: center; box-sizing: border-box; padding: 12px; margin: 0 0 8px; }
  .nav-actions .nav-account, .nav-actions .nav-admin-link { width: 100%; display: block; }
  .nav-account.is-open .nav-megamenu { display: block !important; }
}

/* ── Inline SVG icon system ── */
.site-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.nav-links a .site-icon { opacity: .75; }
.nav-links a:hover .site-icon,
.nav-links a.active .site-icon { opacity: 1; }

/* ── Footer founder card ── */
.footer-founder {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
}
.footer-founder-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(240,208,104,.35);
  flex-shrink: 0;
}
.footer-founder-name { font-size: .82rem; font-weight: 800; color: #fff; line-height: 1.2; }
.footer-founder-role { font-size: .7rem; color: var(--gold); font-weight: 600; margin: 2px 0 4px; }
.footer-founder-link { font-size: .68rem; color: var(--teal); font-weight: 700; text-decoration: none; }
.footer-founder-link:hover { text-decoration: underline; }
[data-theme="light"] .footer-founder { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .footer-founder-name { color: #0d1424; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.footer-social-link {
  font-size: .68rem; font-weight: 700; color: var(--text-dim);
  text-decoration: none; padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
  transition: color .15s, border-color .15s;
}
.footer-social-link:hover { color: var(--teal); border-color: rgba(59,109,255,.3); }
/* .4 alpha measured 2.5:1 on the footer's #e9ebf0. Solid, and dark enough to read. */
[data-theme="light"] .footer-social-link { color: #4d5361; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .footer-social-link:hover { color: var(--teal); }

/* ── Practitioner's Path founder mini-card ── */
.prac-founder-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}
.prac-founder-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(240,208,104,.4);
  flex-shrink: 0;
}
.prac-founder-name { font-size: .88rem; font-weight: 800; color: var(--text); line-height: 1.2; margin-bottom: 2px; }
.prac-founder-title { font-size: .72rem; color: var(--gold); font-weight: 600; margin-bottom: 4px; }
.prac-founder-bio { font-size: .72rem; color: var(--text-muted); line-height: 1.5; }
.prac-founder-bio a { color: var(--teal); font-weight: 700; text-decoration: none; }
.prac-founder-bio a:hover { text-decoration: underline; }
[data-theme="light"] .prac-founder-card { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .prac-founder-name { color: #0d1424; }
[data-theme="light"] .prac-founder-bio { color: rgba(13,20,36,.6); }
/* Book nudge strip */
.prac-book-nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(249,115,22,.06);
  border: 1px solid rgba(249,115,22,.18);
  border-radius: 12px;
  text-decoration: none;
  transition: background .15s;
}
.prac-book-nudge:hover { background: rgba(249,115,22,.1); }
.prac-book-nudge-icon { font-size: 1.5rem; flex-shrink: 0; }
.prac-book-nudge-text { flex: 1; }
.prac-book-nudge-label { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #fb923c; margin-bottom: 2px; }
.prac-book-nudge-title { font-size: .82rem; font-weight: 800; color: var(--text); line-height: 1.3; }
.prac-book-nudge-sub { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
.prac-book-nudge-cta { font-size: .72rem; font-weight: 800; color: #ff9900; white-space: nowrap; flex-shrink: 0; }
[data-theme="light"] .prac-book-nudge-title { color: #0d1424; }

/* ══════════════════════════════════════════════════════
   PRACTITIONER'S PATH — cross-sell component
   Used on: bnn-numerology, bnn-kundli, bnn-mundane
   ══════════════════════════════════════════════════════ */
.prac-path {
  margin: 48px 0 0;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 48px;
}
.prac-path-inner {
  max-width: 780px;
  margin: 0 auto;
}
.prac-path-mark {
  font-size: 2rem;
  line-height: 1;
  color: var(--gold);
  opacity: .35;
  margin-bottom: 10px;
  font-family: Georgia, serif;
}
.prac-path-quote {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 10px;
}
.prac-path-sub {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: 28px;
}
.prac-path-courses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.prac-course-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s;
}
.prac-course-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(240,208,104,.25);
  transform: translateY(-2px);
}
.prac-course-card.featured {
  border-color: rgba(240,208,104,.2);
  background: rgba(240,208,104,.04);
}
.prac-course-icon { font-size: 1.4rem; line-height: 1; }
.prac-course-label {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--teal);
}
.prac-course-title {
  font-size: .92rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
}
.prac-course-desc {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.prac-course-cta {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold);
  margin-top: 4px;
}
.prac-path-byline {
  font-size: .72rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.prac-path-byline::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: .4;
}
/* Light mode */
[data-theme="light"] .prac-path { border-top-color: rgba(0,0,0,.08); }
[data-theme="light"] .prac-path-quote { color: #0d1424; }
[data-theme="light"] .prac-path-sub { color: rgba(13,20,36,.6); }
[data-theme="light"] .prac-course-card { background: #fff; border-color: rgba(0,0,0,.09); }
[data-theme="light"] .prac-course-card:hover { background: #edf6fd; border-color: rgba(0,113,227,.4); }
[data-theme="light"] .prac-course-card.featured { background: rgba(0,113,227,.06); border-color: rgba(0,113,227,.3); }
[data-theme="light"] .prac-course-title { color: #0d1424; }
[data-theme="light"] .prac-course-desc { color: rgba(13,20,36,.55); }
[data-theme="light"] .prac-path-byline { color: rgba(13,20,36,.35); }
@media (max-width: 600px) {
  .prac-path-quote { font-size: 1rem; }
  .prac-path-courses { grid-template-columns: 1fr; }
}

/* ── Darken Chart Preview SVG for Light Mode ── */
[data-theme="light"] .bnn-reveal svg rect { stroke: #292d34 !important; stroke-opacity: 1; }
[data-theme="light"] .bnn-reveal svg polygon { stroke: #292d34 !important; stroke-opacity: 0.8; }
[data-theme="light"] .bnn-reveal svg text { fill: #090c1d !important; fill-opacity: 1; }
[data-theme="light"] .bnn-reveal svg text[fill="#0d1e75"] { fill: #0071e3 !important; }
[data-theme="light"] .bnn-reveal svg polygon[fill*="rgba(18,43,165"] { fill: rgba(0,113,227,.15) !important; stroke: #0071e3 !important; }
[data-theme="light"] .bnn-reveal svg text[fill="#e05c7a"] { fill: #b91c1c !important; } 
[data-theme="light"] .bnn-reveal svg text[fill="#E7C25A"] { fill: #0071e3 !important; } 

.cred-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  transition: transform 0.2s;
}
.cred-link:hover { transform: translateX(5px); }

/* Day mode: Links match brand blue */
[data-theme="light"] .cred-link { color: var(--gold); }

body { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable],
.form-input, .famous-panel-search, .country-panel-search { -webkit-user-select: text !important; user-select: text !important; }

/* ── Print protection (non-admin — admin JS restores display:block on afterprint) ── */
/* Printing is blocked, because print-to-PDF is just copying with extra steps.
   The site's OWN print buttons are not: the Kundli report's Print control and the
   course worksheet both call window.print(), and blanking those printed an empty
   sheet for customers who had paid for the report. Anything that means to print
   adds .bnn-allow-print to <body> first and removes it afterwards; the matching
   beforeprint guard is in assets/components.js. */
@media print {
  body:not(.bnn-allow-print) { display: none !important; }
}

/* Background lighting is now set directly on body via background-image (see body rule above).
   background-image layers on top of background-color — no z-index issues. */

/* ── Expandable Colour Bars (Widget) ── */
.bnn-bars-container { margin: 40px 0; }
.bnn-bars-wrap {
  display: none;
  width: 100%;
  height: 460px;
  overflow: hidden;
  border-radius: 24px;
}
@media (min-width: 640px) {
  .bnn-bars-wrap { display: flex; }
}

.bnn-bar {
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: flex-grow 0.5s ease-out;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 0.55;
}
.bnn-bar:hover { flex: 0.7; }
.bnn-bar.active { flex: 5; cursor: default; }

.bnn-bar-collapsed {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
.bnn-bar.active .bnn-bar-collapsed { display: none; }

.bnn-bar-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.91px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #ffffff;
}

.bnn-bar-expanded {
  display: none;
  height: 100%;
  width: 100%;
  padding: 32px;
  color: #ffffff !important;
  opacity: 0;
  transition: opacity 0.3s ease-out 0.2s;
}
.bnn-bar.active .bnn-bar-expanded { display: flex; flex-direction: column; justify-content: space-between; opacity: 1; }

.bnn-bar-cat { font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; opacity: 0.8; color: #ffffff !important; }
.bnn-bar-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1.1; letter-spacing: -1.19px; margin-bottom: 16px; color: #ffffff !important; }
.bnn-bar-desc { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.6; max-width: 480px; color: #ffffff !important; }

.bnn-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  background: rgba(255,255,255,0.2);
  padding: 10px 20px;
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
  margin-top: 24px;
}
.bnn-bar-cta:hover { background: rgba(255,255,255,0.3); }

.bnn-bars-mobile { display: flex; flex-direction: column; gap: 4px; border-radius: 16px; overflow: hidden; }
@media (min-width: 640px) { .bnn-bars-mobile { display: none; } }

.bnn-bar-m {
  width: 100%;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  max-height: 60px;
  border: none;
  text-align: left;
  color: #ffffff;
}
.bnn-bar-m.active { max-height: 640px; }

.bnn-bar-m-head { height: 60px; display: flex; align-items: center; padding: 0 24px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; color: #ffffff !important; }
.bnn-bar-m-body { padding: 24px; color: #ffffff !important; }
.bnn-bar-m-body h3 { color: #ffffff !important; margin-bottom: 12px; font-weight: 800; }
.bnn-bar-m-body p { color: #ffffff !important; opacity: 0.9; line-height: 1.5; }


.bnn-bars-helper { margin-top: 16px; text-align: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }

/* ── Remove decorative background glow blobs / orbs site-wide ── */
#sppin-glow-layer, .sppin-blob,
.animate-orb-1, .animate-orb-2,
.kundli-hero::before, .num-hero::before, .mundane-hero::before,
.about-hero::before, .hero::before,
.hero-glow, .page-hero::before { display: none !important; }

/* ── Buttons/badges using var(--gold) bg: white text in light mode (bg is Future Blue) ── */
[data-theme="light"] .teacher-btn-primary,
[data-theme="light"] .price-best,
[data-theme="light"] .price-cta:hover,
[data-theme="light"] .price-card.featured .price-cta,
[data-theme="light"] .ank-dasha-badge,
[data-theme="light"] .tl-nav .tl-cta,
[data-theme="light"] .buy-btn,
[data-theme="light"] .calc-btn,
[data-theme="light"] .complete-btn,
[data-theme="light"] .completion-close,
[data-theme="light"] .btn-view-predictions,
[data-theme="light"] .btn-analyse,
[data-theme="light"] #toggle-yearly { color: #fff !important; }

/* Theme toggle: brand focus ring (was default blue), keep header alignment */
.theme-toggle:focus { outline: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ══ Astrology Ghar Ghar — mission band (index.html + learn.html) ══════════
   A deliberately warm cream band that breaks the navy/gold rhythm: the mission
   should read as "home", not as a product page. Self-contained .gg- namespace. */
.gg{--gg-cream:#FFF8EC;--gg-cream2:#FBEBD2;--gg-ink:#2A2416;--gg-ink-soft:#6B6151;
  --gg-navy:#012250;--gg-gold:#C9952C;--gg-gold-lt:#F0D068;--gg-terra:#C1553A;
  position:relative;overflow:hidden;padding:74px 0 68px;color:var(--gg-ink);
  background:radial-gradient(1100px 520px at 50% -12%,#FFFDF8 0%,rgba(255,253,248,0) 62%),
             linear-gradient(168deg,var(--gg-cream) 0%,var(--gg-cream2) 100%)}
.gg-mandala{position:absolute;top:-190px;right:-190px;width:620px;height:620px;opacity:.09;pointer-events:none;color:var(--gg-gold)}
.gg .wrap{position:relative;z-index:1}
.gg-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(201,149,44,.13);
  border:1px solid rgba(201,149,44,.32);color:#8A6516;border-radius:999px;padding:7px 16px;
  font-size:.73rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.gg-deva{font-family:'Noto Sans Devanagari','Mukta','Devanagari Sangam MN','Nirmala UI',system-ui,sans-serif;
  font-size:clamp(1.4rem,3.2vw,2.25rem);font-weight:700;line-height:1.5;color:var(--gg-navy);margin:20px 0 6px}
.gg-deva-en{font-size:.93rem;font-weight:700;color:var(--gg-terra);margin-bottom:22px}
.gg h2{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.14;font-weight:800;color:var(--gg-navy);margin:0 0 14px;letter-spacing:-.02em}
.gg h2 em{font-style:normal;color:var(--gg-terra)}
.gg-lede{font-size:clamp(.98rem,1.5vw,1.08rem);line-height:1.75;color:var(--gg-ink-soft);max-width:58ch}
.gg-lede strong{color:var(--gg-ink);font-weight:700}
.gg-assoc{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:20px;
  background:rgba(255,255,255,.72);border:1px solid rgba(201,149,44,.34);border-radius:12px;
  padding:11px 16px;text-decoration:none;transition:border-color .15s,transform .15s}
.gg-assoc:hover{border-color:rgba(201,149,44,.7);transform:translateY(-1px);text-decoration:none}
.gg-assoc-l{font-size:.71rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gg-ink-soft)}
.gg-assoc-n{font-size:.93rem;font-weight:800;color:var(--gg-navy)}
.gg-assoc-u{font-size:.79rem;font-weight:700;color:var(--gg-terra)}
.gg-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
/* Portrait in a drawn night-sky medallion; edges feathered so it dissolves into
   the cream instead of ending in a hard rectangle. */
.gg-art{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:400px}
.gg-art-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.gg-art-bg svg{width:100%;max-width:420px;height:auto}
.gg-rishi{position:relative;width:100%;max-width:308px;height:auto;display:block;
  -webkit-mask-image:radial-gradient(112% 88% at 50% 42%,#000 54%,rgba(0,0,0,.55) 78%,transparent 95%);
  mask-image:radial-gradient(112% 88% at 50% 42%,#000 54%,rgba(0,0,0,.55) 78%,transparent 95%)}
.gg-art-cap{position:absolute;bottom:-24px;left:0;right:0;text-align:center;font-size:.75rem;font-weight:700;color:var(--gg-ink-soft)}
.gg-block-t{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gg-terra);margin:56px 0 18px}
.gg-mission{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gg-card{background:rgba(255,255,255,.82);border:1px solid rgba(201,149,44,.26);border-radius:16px;
  padding:22px 20px;transition:transform .18s ease,box-shadow .18s ease}
.gg-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(1,34,80,.10)}
.gg-card-ic{width:42px;height:42px;border-radius:12px;background:rgba(201,149,44,.14);
  display:flex;align-items:center;justify-content:center;color:var(--gg-gold);margin-bottom:13px}
.gg-card h4{font-size:.97rem;font-weight:800;color:var(--gg-navy);margin:0 0 6px;line-height:1.35}
.gg-card p{font-size:.85rem;line-height:1.6;color:var(--gg-ink-soft);margin:0}
@media(max-width:980px){.gg-hero{grid-template-columns:1fr;gap:34px}.gg-art{order:-1;min-height:340px}
  .gg-mission{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gg{padding:52px 0 48px}.gg-mission{grid-template-columns:1fr}}

/* Compact variant — the /learn hero band */
.gg-slim{padding:0;background:none;overflow:visible}
.gg-slim .gg-band{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:26px;
  background:linear-gradient(168deg,#FFF8EC 0%,#FBEBD2 100%);
  border:1px solid rgba(201,149,44,.34);border-radius:20px;padding:22px 26px}
.gg-slim .gg-band-art{position:relative;flex:0 0 118px;height:118px;display:flex;align-items:flex-end;justify-content:center}
.gg-slim .gg-band-art svg{position:absolute;inset:0;width:118px;height:118px}
.gg-slim .gg-band-art img{position:relative;width:96px;height:auto;
  -webkit-mask-image:radial-gradient(110% 86% at 50% 42%,#000 54%,transparent 95%);
  mask-image:radial-gradient(110% 86% at 50% 42%,#000 54%,transparent 95%)}
.gg-slim .gg-band-txt{flex:1 1 320px;min-width:0}
.gg-slim .gg-band-txt .gg-deva{font-size:clamp(1.05rem,2.2vw,1.4rem);margin:0 0 4px}
.gg-slim .gg-band-txt p{font-size:.9rem;line-height:1.6;color:#6B6151;margin:6px 0 0;max-width:66ch}
.gg-slim .gg-assoc{margin-top:14px}
@media(max-width:560px){.gg-slim .gg-band{padding:20px}.gg-slim .gg-band-art{flex-basis:96px;height:96px}}
/* No illustration: the copy block runs full width, with the CTA into the course. */
.gg-head{max-width:820px}
.gg-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:24px}
.gg-cta{display:inline-block;background:var(--gg-navy,#012250);color:#fff;font-weight:800;font-size:.95rem;
  border-radius:12px;padding:15px 28px;text-decoration:none;white-space:nowrap;
  transition:filter .15s,transform .15s}
.gg-cta:hover{filter:brightness(1.18);transform:translateY(-2px);text-decoration:none;color:#fff}
.gg-cta-sub{font-size:.82rem;font-weight:700;color:#6B6151}
.gg-cta-sub b{color:#C1553A}
.gg-slim .gg-cta{padding:12px 22px;font-size:.9rem;margin-top:14px}
/* Campaign banner. Carries its own baked-in headline, features and price, so the
   surrounding copy stays short — the alt text does the accessibility work. */
.gg-banner{display:block;max-width:940px;margin:0 auto 38px;border-radius:18px;overflow:hidden;
  border:1px solid rgba(201,149,44,.34);box-shadow:0 18px 44px rgba(1,34,80,.14);
  transition:transform .18s ease,box-shadow .18s ease;line-height:0}
.gg-banner:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(1,34,80,.2)}
.gg-banner img{width:100%;height:auto;display:block}
.gg-slim .gg-banner{margin:26px 0 0}

/* ── Homepage course carousel (#lms-home-rail, filled by assets/bnn-lms.js) ──
   Horizontal rail so the section height stays fixed however many courses exist —
   the catalogue is live, so this must not reflow the page as courses are added. */
.home-rail-wrap { position: relative; }
.home-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 4px;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
}
.home-rail > .course-card { scroll-snap-align: start; min-width: 0; }
.home-rail::-webkit-scrollbar { height: 7px; }
.home-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.home-rail::-webkit-scrollbar-thumb:hover { background: var(--border-gold); }
/* Keep 3 across on wide screens, then let it scroll. */
@media (min-width: 1024px) { .home-rail { grid-auto-columns: minmax(0, calc((100% - 36px) / 3)); } }

.home-rail-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.rail-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: all .2s;
}
.rail-btn:hover { border-color: var(--border-gold); color: var(--gold); background: var(--bg-card-hover); }
.rail-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Visible BNN definition block (was the hidden #ai-summary). Reads as an answer,
   so AI engines can quote it and search engines can index it. */
.bnn-def { max-width: 820px; margin: 0 auto 46px; text-align: center; }
.bnn-def p { color: var(--text-muted); line-height: 1.8; font-size: .95rem; margin-bottom: 12px; }
.bnn-def p strong { color: var(--text); }

/* ── Floating action buttons on phones ──────────────────────────────────────
   The FAB stack (WhatsApp 52px + Translate pill, plus the admin star for
   signed-in admins) sits over the reading area on a small screen, and on the
   lesson page it covered the "Mark complete / Next lesson" controls. Shrink the
   stack, tighten the ladder so the two never overlap, and keep them clear of the
   bottom safe-area on notched phones. */
@media (max-width: 640px) {
  .whatsapp-float {
    width: 44px; height: 44px; font-size: 1.2rem;
    right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .bnn-translate-fab {
    right: 12px; bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .bnn-translate-fab-btn { padding: 7px 12px; font-size: .72rem; }
  /* Popup must not run off a narrow screen. */
  .bnn-translate-popup { width: min(246px, calc(100vw - 24px)); }
}

/* Give lesson content room so the FAB stack never sits on the final controls. */
@media (max-width: 640px) {
  .lesson-wrap { padding-bottom: 132px; }
}

/* ── Raksha Bandhan membership banner (homepage) ─────────────────────────────
   Built in CSS rather than as an image, deliberately: the price follows the
   header currency picker via [data-price], so a flat JPG would be wrong for
   every visitor outside the currency it was exported in, and would need
   re-exporting each time a figure moves.

   The palette is spelled out here rather than taken from --gold. In the light
   theme --gold is a deep blue, so a "gold" promo pill came out blue; a seasonal
   offer has to look the same on every page and in both themes.

   The schedule of which festival shows when lives in assets/bnn-festival.js.

   ⏰ WHEN THE PROMOTION ENDS: delete this block, the <div data-festival-banner>
   in index.html, assets/bnn-festival.js and assets/bnn-offer-strip.js together. */
.rb-wrap{max-width:1140px;margin:0 auto;padding:0 20px}
/* The three gradient stops come from assets/bnn-festival.js as inline custom
   properties, so the artwork rotates with the festival and this block never has
   to change. The fallbacks are the Raksha Bandhan maroon, which is what shows if
   that file fails to load. */
.rb-banner{position:relative;overflow:hidden;border-radius:20px;
  background:linear-gradient(120deg,var(--rb-c1,#3B1A12) 0%,var(--rb-c2,#7A2E1B) 42%,var(--rb-c3,#B8451F) 100%);
  border:1px solid rgba(231,194,90,.5);
  box-shadow:0 18px 44px rgba(59,26,18,.28);
  padding:36px 40px;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
/* The rakhi thread: a soft woven arc, drawn not photographed. */
.rb-banner::before{content:'';position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;
  background:radial-gradient(circle at 30% 30%,rgba(231,194,90,.30),transparent 62%);
  pointer-events:none}
.rb-banner::after{content:'';position:absolute;left:-60px;bottom:-90px;width:280px;height:280px;
  border:1.5px solid rgba(231,194,90,.18);border-radius:50%;pointer-events:none}
/* The festival motif. Sits between the text column and the price panel, low
   enough in opacity to be texture rather than a picture competing with the
   headline, and behind both (z-index 0 against their 1). currentColor is the
   festival gold, so it recolours with the palette. */
/* Sits in the GAP between the end of the copy and the price panel. At right:20%
   its centre fell underneath the panel, which has a dark scrim over it, so the
   motif was invisible where it mattered and only its edges showed. */
.rb-art{position:absolute;right:33%;top:50%;transform:translate(50%,-50%);
  height:124%;width:auto;aspect-ratio:1;color:#F0D068;opacity:.22;pointer-events:none;z-index:0}
.rb-art-img{object-fit:contain;opacity:.92;height:104%;right:30%}
@media(max-width:1080px){.rb-art{right:8%;height:112%;opacity:.14}}
/* Stacked layout: the motif would land on top of the copy, so it retires to the
   corner as a watermark. */
@media(max-width:820px){.rb-art{right:-12%;top:0;transform:none;height:70%;opacity:.1}}
.rb-main{flex:1 1 420px;min-width:0;position:relative;z-index:1}
.rb-tag{display:inline-flex;align-items:center;gap:7px;background:#E7C25A;color:#3B1A12;
  font-size:.64rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 13px;border-radius:99px;margin-bottom:14px}
/* ⚠️ Scoped as .rb-banner .rb-title, not .rb-title. The site sets
   [data-theme="light"] h2 { color:#090C1D }, which is (0,1,1) and beat a bare
   (0,1,0) class, so the heading rendered near-black on the maroon at 2.06:1.
   Two classes take it to (0,2,0) and win in both themes. */
.rb-banner .rb-title{font-size:clamp(1.45rem,3.1vw,2.1rem);line-height:1.16;font-weight:900;
  color:#FFF6E6;letter-spacing:-.02em;margin:0 0 10px}
.rb-banner .rb-title em{font-style:normal;color:#F0D068}
.rb-lede{font-size:.95rem;line-height:1.65;color:rgba(255,246,230,.82);margin:0;max-width:56ch}
.rb-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;padding:0}
.rb-list li{font-size:.83rem;font-weight:600;color:rgba(255,246,230,.9);
  display:flex;align-items:center;gap:7px}
.rb-list li::before{content:'✓';color:#F0D068;font-weight:900}
/* A DARK scrim, not a light wash. This panel sits over the lightest end of the
   gradient, and the price inside it is gold; a translucent cream background
   lightened exactly the spot that most needed darkening. Black at .28 means the
   panel controls its own contrast whatever palette the festival brings. */
.rb-buy{flex:0 0 auto;position:relative;z-index:1;text-align:center;
  background:rgba(0,0,0,.28);border:1px solid rgba(231,194,90,.35);
  border-radius:16px;padding:22px 26px;min-width:230px}
/* The strike sits on the <s> around the figure, not on the whole line: "Buy
   separately" labels what the number is, and striking the label reads as a
   cancelled offer. See assets/bnn-festival.js. */
.rb-was{font-size:.78rem;font-weight:600;color:rgba(255,246,230,.55)}
.rb-was s{font-size:.9rem;font-weight:700}
.rb-now{font-size:clamp(1.9rem,4vw,2.5rem);font-weight:900;color:#F0D068;line-height:1.1;margin:2px 0 2px}
.rb-terms{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,246,230,.6);margin-bottom:16px}
.rb-cta{display:block;background:#E7C25A;color:#3B1A12;font-weight:900;font-size:.95rem;
  padding:13px 26px;border-radius:11px;text-decoration:none;transition:transform .16s,background .16s}
.rb-cta:hover{background:#F0D068;transform:translateY(-1px)}
.rb-sub{display:block;font-size:.7rem;color:rgba(255,246,230,.62);margin-top:10px}
@media(max-width:820px){
  .rb-banner{padding:26px 22px;gap:22px}
  .rb-buy{flex:1 1 100%;min-width:0}
}

/* ── South Indian square ────────────────────────────────────────────────────
   Moved out of bnn-kundli.html with its renderer (assets/bnn-render.js). The
   markup went shared but this did not, so the chart rendered as a vertical
   stack of signs anywhere else: the grid is entirely in the CSS. A renderer
   and the styles that make it a chart have to travel together. */
.south-chart-wrap { display: flex; justify-content: center; }
.south-grid {
  display: grid;
  /* minmax(0,1fr), not 1fr: a bare 1fr track cannot shrink below its content's
     min-content width, so inside a narrow View All card the grid grew wider than
     the card and .va-card{overflow:hidden} clipped the right-hand columns. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  aspect-ratio: 1;
}
.si-cell {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  padding: 8px 6px;
  min-height: 70px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.si-cell.lagna-cell { border-color: rgba(240,208,104,.45) !important; background: rgba(240,208,104,.06) !important; }
.si-cell.center-cell {
  background: transparent !important;
  border-color: var(--border) !important;
  align-items: center;
  justify-content: center;
}
.si-sign-name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
[data-theme="light"] .south-chart-wrap { background:#ffffff; border-radius:14px; padding:16px; border:1px solid rgba(0,0,0,.1); }
[data-theme="light"] .si-cell { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.09); }