/* ============================================================
   DESIGN SYSTEM — Variables (Futuristic Redesign)
   ============================================================ */
:root {
  /* Dark canvas — deep space */
  --bg:  #07080f;
  --bg2: #0c0e1a;
  --bg3: #111527;
  --card: #0f1120;
  --card2: #141828;

  /* Borders with glow potential */
  --border: rgba(var(--accent-rgb),0.10);
  --border2: rgba(var(--accent-rgb),0.20);
  --border-glow: rgba(var(--accent-rgb),0.5);

  /* Typography */
  --ink:  #f2f3ff;
  --ink2: #aab4d6;
  --ink3: #7b83a8;

  /* Palette — reduced to 4 core colours (gold, rose, mint, sky) for readability.
     Violet & orange now alias to these so the whole page only ever shows 4 hues. */
  --gold:   #ffcc4d;
  --gold-dim: rgba(255,204,77,0.14);
  --sky:    #5ac8fa;
  --sky-dim: rgba(var(--accent-rgb),0.14);
  --accent-rgb: 90,200,250;
  --rose:   var(--sky);
  --rose-dim: var(--sky-dim);
  --mint:   var(--sky);
  --mint-dim: var(--sky-dim);
  --violet: var(--sky);
  --violet-dim: var(--sky-dim);
  --orange: var(--gold);
  --orange-dim: var(--gold-dim);
  --cyan:   var(--sky);

  --accent: var(--sky);
  --accent-dim: var(--sky-dim);
  --highlight: var(--gold);
  --highlight-dim: var(--gold-dim);

  --sidebar-w: 280px;
  --radius: 12px;
  --radius-sm: 7px;

  --font-main: 'Noto Sans Devanagari', 'Plus Jakarta Sans', sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Noto Sans Devanagari', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --shadow: 0 12px 48px rgba(0,0,10,0.7);
  --shadow-sm: 0 4px 20px rgba(0,0,10,0.5);
  --glow-v: 0 0 20px rgba(var(--accent-rgb),0.25);
  --glow-m: 0 0 20px rgba(var(--accent-rgb),0.2);
  --glow-g: 0 0 20px rgba(255,204,77,0.2);

  --reading-width: 1200px;
  --fs: 16px;
}

/* Light mode — keeps futuristic feel with bright canvas */
.light {
  --bg:  #f0f2ff;
  --bg2: #e8eaff;
  --bg3: #dde0ff;
  --card: #ffffff;
  --card2: #f4f5ff;
  --border: rgba(var(--accent-rgb),0.10);
  --border2: rgba(var(--accent-rgb),0.18);
  --border-glow: rgba(var(--accent-rgb),0.4);
  --ink:  #14163a;
  --ink2: #33366e;
  --ink3: #585c8f;
  --gold:   #7a4e00;
  --gold-dim: rgba(138,90,0,0.1);
  --sky:    #9b1c46;
  --sky-dim: rgba(155,28,70,0.09);
  --accent-rgb: 155,28,70;
  --rose:   var(--sky);
  --rose-dim: var(--sky-dim);
  --mint:   var(--sky);
  --mint-dim: var(--sky-dim);
  --violet: var(--sky);
  --violet-dim: var(--sky-dim);
  --orange: var(--gold);
  --orange-dim: var(--gold-dim);
  --cyan:   var(--sky);
  --accent: var(--sky);
  --accent-dim: var(--sky-dim);
  --highlight: var(--gold);
  --highlight-dim: var(--gold-dim);
  --glow-v: 0 0 16px rgba(var(--accent-rgb),0.15);
  --glow-m: 0 0 16px rgba(var(--accent-rgb),0.15);
  --glow-g: 0 0 16px rgba(138,90,0,0.15);
  --shadow: 0 8px 32px rgba(20,22,58,0.08);
  --shadow-sm: 0 2px 12px rgba(20,22,58,0.06);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--fs); scroll-behavior: smooth; }

/* Subtle scanline texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.012) 2px,
    rgba(255,255,255,0.012) 4px
  );
  pointer-events: none;
  z-index: 9998;
}

body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.78;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--mint));
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px var(--violet), 0 0 24px rgba(var(--accent-rgb),0.4);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  position: fixed;
  top: 0; left: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s ease, background 0.3s;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 4px 0 32px rgba(0,0,10,0.4);
}

.sidebar-header {
  padding: 22px 18px 16px;
  border-bottom: 1px solid var(--border2);
  background: var(--bg3);
  position: relative;
  overflow: hidden;
}

.sidebar-header::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb),0.2) 0%, transparent 70%);
  pointer-events: none;
}

.sidebar-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 4px;
  font-family: var(--font-mono);
}

.sidebar-subtitle {
  font-size: 0.7rem;
  color: var(--ink3);
  line-height: 1.4;
}

.sidebar-search {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.sidebar-search input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 0.82rem;
  font-family: var(--font-main);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sidebar-search input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12), var(--glow-v);
}

.toc-list {
  flex: 1;
  padding: 8px 0;
  list-style: none;
}

.toc-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 0.81rem;
  color: var(--ink2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
  letter-spacing: 0.01em;
}

.toc-item a:hover {
  background: rgba(var(--accent-rgb),0.07);
  color: var(--violet);
  border-left-color: var(--violet);
}

.toc-item a.active {
  background: rgba(var(--accent-rgb),0.12);
  color: var(--violet);
  border-left-color: var(--violet);
  font-weight: 600;
  box-shadow: inset 0 0 20px rgba(var(--accent-rgb),0.05);
}

.toc-badge {
  margin-left: auto;
  font-size: 0.58rem;
  background: var(--violet-dim);
  color: var(--violet);
  border-radius: 20px;
  padding: 2px 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  border: 1px solid var(--border2);
}

.toc-item a:hover .toc-badge { background: var(--violet); color: #fff; border-color: var(--violet); }

/* Sidebar bottom tools */
.sidebar-tools {
  padding: 12px;
  border-top: 1px solid var(--border2);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--bg3);
}

.tool-btn {
  flex: 1;
  min-width: 58px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--ink2);
  font-size: 0.7rem;
  cursor: pointer;
  font-family: var(--font-mono);
  text-align: center;
  transition: all 0.2s;
  letter-spacing: 0.03em;
}

.tool-btn:hover {
  background: rgba(var(--accent-rgb),0.12);
  color: var(--violet);
  border-color: var(--violet);
  box-shadow: var(--glow-v);
}

.tool-btn.active {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
  box-shadow: var(--glow-v);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
#main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  padding: 0 0 80px;
}

/* ============================================================
   TOP HEADER BAR
   ============================================================ */
#topbar {
  position: sticky;
  top: 0;
  background: var(--topbar-bg, rgba(12,14,26,0.88));
  border-bottom: 1px solid var(--border2);
  z-index: 90;
  padding: 0 32px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb),0.1);
}

.topbar-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ctrl-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: rgba(var(--accent-rgb),0.06);
  color: var(--ink2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.18s;
}

.ctrl-btn:hover {
  background: rgba(var(--accent-rgb),0.15);
  color: var(--violet);
  border-color: var(--violet);
  box-shadow: var(--glow-v);
}

.ctrl-label {
  font-size: 0.72rem;
  color: var(--ink3);
}

/* ============================================================
   HERO BANNER
   ============================================================ */
.hero {
  padding: 52px 44px 40px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border2);
  position: relative;
  overflow: hidden;
}

/* Glowing orbs */
.hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -60px;
  width: 500px; height: 500px;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb),0.12) 0%, transparent 60%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 10%;
  width: 350px; height: 350px;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb),0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Grid overlay */
.hero .hero-grid {
  display: none;
}
.hero {
  background-image:
    linear-gradient(rgba(var(--accent-rgb),0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: var(--bg2);
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.exam-tag {
  padding: 3px 11px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid;
  font-family: var(--font-mono);
}

.tag-ukpsc { background: rgba(255,204,77,0.08); color: var(--accent); border-color: rgba(255,204,77,0.3); }
.tag-uksssc { background: rgba(255,204,77,0.08); color: var(--accent); border-color: rgba(255,204,77,0.3); }
.tag-roaro { background: rgba(var(--accent-rgb),0.07); color: var(--accent); border-color: rgba(var(--accent-rgb),0.3); }
.tag-vdo { background: rgba(var(--accent-rgb),0.07); color: var(--accent); border-color: rgba(var(--accent-rgb),0.3); }
.tag-tgt { background: rgba(255,204,77,0.07); color: var(--accent); border-color: rgba(255,204,77,0.3); }

.hero-title {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 8px;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

.hero-title span {
  background: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 50%, var(--mint) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(var(--accent-rgb),0.5));
}

.hero-sub {
  font-size: 0.88rem;
  color: var(--ink3);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}

.hero-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  position: relative;
}

.stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--violet);
  line-height: 1;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.68rem;
  color: var(--ink3);
  margin-top: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
#content {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 36px 44px;
}

.topic-intro {
  margin: 0 0 30px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border2);
}

.topic-intro h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.35;
}

.topic-intro p {
  max-width: 920px;
  margin: 0;
  color: var(--ink2);
  font-size: 0.94rem;
  line-height: 1.8;
}

.topic-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin-top: 12px;
}

.topic-jumps a {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.topic-jumps a:hover,
.topic-jumps a:focus-visible { color: var(--ink); }

@media (min-width: 1600px) {
  #content {
    max-width: calc(100vw - var(--sidebar-w) - 80px);
  }
}

/* Focus mode */
body.focus #sidebar { transform: translateX(-100%); }
body.focus #main { margin-left: 0; transition: margin-left 0.3s ease; }
body.focus #content { max-width: min(1400px, calc(100vw - 80px)); margin: 0 auto; }
#main { transition: margin-left 0.3s ease; }

/* ============================================================
   SECTIONS
   ============================================================ */
.alankar-section {
  margin-bottom: 44px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: fadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: box-shadow 0.3s, border-color 0.3s;
}

.alankar-section:hover {
  border-color: rgba(var(--accent-rgb),0.3);
  box-shadow: var(--shadow), var(--glow-v);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-header {
  padding: 20px 26px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background 0.2s;
  user-select: none;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.03), transparent);
}

.section-header:hover { background: rgba(var(--accent-rgb),0.07); }

.section-num {
  width: 34px; height: 34px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
  font-family: var(--font-mono);
  border: 1px solid var(--border2);
}

.section-title-wrap { flex: 1; }

.section-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--ink3);
  letter-spacing: 0.03em;
}

.section-chevron {
  color: var(--ink3);
  font-size: 0.8rem;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.alankar-section.collapsed .section-chevron { transform: rotate(-90deg); }
.alankar-section.collapsed .section-body { display: none; }

.section-body {
  padding: 26px 28px;
}

/* Section color identities */
.s-anupras .section-num, .s-yamak .section-num, .s-shlesh .section-num, .s-vakrokti .section-num, .s-upma .section-num, .s-rupak .section-num, .s-utpreksha .section-num, .s-atishayokti .section-num, .s-bhrantiman .section-num, .s-sandeh .section-num, .s-virodhabhas .section-num, .s-vibhavana .section-num, .s-visheshokti .section-num, .s-manvikaran .section-num, .s-apahnuti .section-num, .s-prateep .section-num, .s-vyatirek .section-num, .s-dristant .section-num { background: var(--accent-dim); color: var(--accent); border-color: rgba(var(--accent-rgb),0.25); }
.s-anupras .section-title, .s-yamak .section-title, .s-shlesh .section-title, .s-vakrokti .section-title, .s-upma .section-title, .s-rupak .section-title, .s-utpreksha .section-title, .s-atishayokti .section-title, .s-bhrantiman .section-title, .s-sandeh .section-title, .s-virodhabhas .section-title, .s-vibhavana .section-title, .s-visheshokti .section-title, .s-manvikaran .section-title, .s-apahnuti .section-title, .s-prateep .section-title, .s-vyatirek .section-title, .s-dristant .section-title { color: var(--accent); }

/* ============================================================
   DEFINITION BOX
   ============================================================ */
.def-box {
  background: rgba(var(--accent-rgb),0.07);
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 20px;
  margin-bottom: 20px;
  position: relative;
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(var(--accent-rgb),0.15);
  border-bottom: 1px solid rgba(var(--accent-rgb),0.1);
  border-right: 1px solid rgba(var(--accent-rgb),0.08);
}

.def-box::before {
  content: '📖 परिभाषा';
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 10px;
  font-family: var(--font-mono);
}

.def-box p { font-size: 0.95rem; color: var(--ink); line-height: 1.88; }

/* Color variants */
.def-box.gold, .def-box.rose, .def-box.mint, .def-box.sky, .def-box.orange { border-left-color: var(--accent); background: var(--accent-dim); border-top-color: rgba(var(--accent-rgb),0.15); border-bottom-color: rgba(var(--accent-rgb),0.1); border-right-color: rgba(var(--accent-rgb),0.08); }
.def-box.gold::before, .def-box.rose::before, .def-box.mint::before, .def-box.sky::before, .def-box.orange::before { color: var(--accent); content: '📖 परिभाषा'; }

/* ============================================================
   TRICK / EXAM TIP BOX
   ============================================================ */
.trick-box {
  background: var(--gold-dim);
  border: 1px solid rgba(255,204,77,0.25);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.88rem;
}

.trick-box .trick-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trick-box p, .trick-box li { color: var(--ink); margin-top: 4px; }

.pyq-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
  background: var(--rose-dim);
  color: var(--rose);
  border: 1px solid rgba(255,204,77,0.25);
}

/* ============================================================
   SUBSECTION HEADINGS
   ============================================================ */
.sub-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 24px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sub-heading .sh-icon {
  width: 4px; height: 16px;
  border-radius: 2px;
  background: var(--violet);
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================================
   EXAMPLE CARDS
   ============================================================ */
.example-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 14px 0;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.example-card:hover { box-shadow: var(--shadow-sm); }

.ex-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--ex-header-bg, rgba(255,255,255,0.03));
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--ink2);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.ex-num {
  background: var(--violet-dim);
  color: var(--violet);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}

.ex-verse {
  padding: 14px 18px;
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.9;
  background: var(--verse-bg, rgba(var(--accent-rgb),0.06));
  border-left: 3px solid var(--violet);
  margin: 12px 16px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ex-body { padding: 12px 16px 16px; }

/* ============================================================
   TABLES
   ============================================================ */
.tbl-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}

th {
  background: var(--bg3);
  color: var(--ink);
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border2);
  font-size: 0.82rem;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink2);
  vertical-align: top;
  line-height: 1.65;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }

.td-key {
  font-weight: 700;
  color: var(--violet);
  width: 140px;
  min-width: 120px;
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare-table th:nth-child(2) { background: var(--violet-dim); color: var(--violet); }
.compare-table th:nth-child(3) { background: var(--orange-dim); color: var(--accent); }
.compare-table th:nth-child(4) { background: var(--rose-dim); color: var(--rose); }

/* ============================================================
   CHEAT SHEET / QUICK REF
   ============================================================ */
.cheat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.cheat-card {
  border-radius: var(--radius-sm);
  padding: 16px;
  border: 1px solid;
  text-align: center;
}

.cheat-card .cc-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.cheat-card .cc-words {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7;
}

.cheat-card .cc-desc {
  font-size: 0.75rem;
  margin-top: 8px;
  opacity: 0.8;
}

.cc-upma, .cc-rupak, .cc-utpreksha { background: var(--accent-dim); border-color: rgba(var(--accent-rgb),0.25); color: var(--accent); }
/* ============================================================
   ANUPRAS SUBSECTIONS
   ============================================================ */
.variant-block {
  margin: 16px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.variant-header {
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}

.variant-body {
  padding: 12px 16px;
}

.variant-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.variant-body li {
  font-size: 0.9rem;
  padding: 8px 12px;
  background: var(--li-bg, rgba(255,255,255,0.02));
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border2);
  color: var(--ink);
  line-height: 1.7;
  transition: border-color 0.2s;
}

.variant-body li:hover { border-left-color: var(--violet); }

/* ============================================================
   HIGHLIGHTING
   ============================================================ */
.hl-gold, .hl-orange, .hl-rose, .hl-mint, .hl-violet, .hl-sky { color: var(--accent); font-weight: 700; }

.keyword-chip {
  display: inline-block;
  background: var(--violet-dim);
  color: var(--violet);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.8em;
  font-weight: 600;
  margin: 0 2px;
}

/* ============================================================
   EXAM IMPORTANT
   ============================================================ */
.exam-imp {
  background: var(--rose-dim);
  border: 1px solid rgba(255,204,77,0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 0.87rem;
  color: var(--ink);
}

.exam-imp .ei-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rose);
  margin-bottom: 6px;
}

/* ============================================================
   DIFF BLOCK (Yamak vs Shlesh etc.)
   ============================================================ */
.diff-note {
  background: var(--mint-dim);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin: 12px 0;
  font-size: 0.87rem;
  color: var(--ink);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.diff-note .dn-icon { color: var(--mint); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   MEANING GRID (for yamak/shlesh word tables)
   ============================================================ */
.meaning-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 0.87rem;
  padding: 10px 0;
}

.mg-key {
  font-weight: 700;
  color: var(--violet);
}

/* ============================================================
   ARTHALANKAR INTRO
   ============================================================ */
.arthalankar-intro {
  background: linear-gradient(135deg, var(--violet-dim), var(--mint-dim));
  border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 20px 0 32px;
}

.arthalankar-intro h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--violet);
  margin-bottom: 8px;
}

/* ============================================================
   UPMA COMPONENTS BOX
   ============================================================ */
.components-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.comp-card {
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
}

.comp-num {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--violet);
  margin-bottom: 4px;
}

.comp-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.comp-desc {
  font-size: 0.78rem;
  color: var(--ink3);
}

/* ============================================================
   RUPAK TRICK
   ============================================================ */
.rupak-trick {
  background: var(--orange-dim);
  border: 1px solid rgba(255,204,77,0.25);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 14px 0;
}

.rupak-trick .rt-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ============================================================
   FLOATING NAV
   ============================================================ */
#floating-nav {
  position: fixed;
  right: 20px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}

.fnav-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--border2);
  color: var(--ink2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.fnav-btn:hover {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
  transform: scale(1.1);
}

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 300;
  padding: 0;
}

.mnav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mnav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0;
  border: none;
  background: none;
  color: var(--ink3);
  font-size: 0.62rem;
  font-family: var(--font-main);
  cursor: pointer;
  transition: color 0.2s;
}

.mnav-btn .mi { font-size: 1.3rem; }
.mnav-btn:hover, .mnav-btn.active { color: var(--violet); }

/* ============================================================
   MOBILE SIDEBAR OVERLAY
   ============================================================ */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99;
}

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
#cmd-palette {
  display: none;
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, calc(100vw - 32px));
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  z-index: 1000;
  overflow: hidden;
}

#cmd-palette.open { display: block; }

.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.cmd-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1rem;
  font-family: var(--font-main);
  outline: none;
}

.cmd-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.cmd-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--ink2);
  transition: background 0.15s;
}

.cmd-item:hover, .cmd-item.selected {
  background: var(--violet-dim);
  color: var(--violet);
}

/* ============================================================
   SEARCH HIGHLIGHT
   ============================================================ */
.search-match {
  background: rgba(255,204,77,0.3);
  border-radius: 2px;
  color: var(--accent);
}

/* ============================================================
   READING MODE
   ============================================================ */


/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  #sidebar, #topbar, #floating-nav, #mobile-nav, #progress-bar, #cmd-palette { display: none !important; }
  #main { margin-left: 0; }
  .alankar-section { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
  body { background: white; color: black; }
  .section-chevron { display: none; }
  .alankar-section.collapsed .section-body { display: block !important; }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  #sidebar { transform: translateX(-280px); width: 280px; }
  #sidebar.mobile-open { transform: translateX(0); }
  #sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  #sidebar-overlay.open { opacity: 1; pointer-events: all; }
  #main { margin-left: 0; }
  #topbar { padding: 0 16px; }
  .hero { padding: 28px 20px 24px; }
  #content { padding: 20px 16px 80px; }
  .topic-intro { margin-bottom: 22px; padding-bottom: 18px; }
  .topic-intro h2 { font-size: 1.15rem; }
  .topic-intro p { font-size: 0.88rem; line-height: 1.7; }
  .section-body { padding: 16px 16px; }
  .section-header { padding: 16px 16px 14px; }
  .components-grid { grid-template-columns: 1fr; }
  .cheat-grid { grid-template-columns: 1fr; }
  #mobile-nav { display: block; }
  #floating-nav { bottom: 80px; right: 12px; }
  .compare-table { font-size: 0.78rem; }
  .compare-table th, .compare-table td { padding: 8px 10px; }
}

/* ============================================================
   MISC
   ============================================================ */
.flex-gap { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.star-note {
  font-size: 0.85rem;
  color: var(--accent);
  margin: 12px 0;
  font-weight: 600;
}

.italic-note {
  font-size: 0.88rem;
  color: var(--ink3);
  font-style: italic;
  margin: 10px 0;
}

p { margin: 8px 0; }

hr.section-div {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

.reading-time {
  font-size: 0.72rem;
  color: var(--ink3);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

/* bookmarks */
.bookmark-btn {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid transparent;
  color: var(--ink3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: all 0.2s;
  margin-left: auto;
}

.bookmark-btn:hover { background: var(--gold-dim); color: var(--accent); border-color: rgba(255,204,77,0.3); }
.bookmark-btn.bookmarked { color: var(--accent); background: var(--gold-dim); border-color: rgba(255,204,77,0.3); }

/* font size control */
body.fs-sm { font-size: 14px; }
body.fs-lg { font-size: 18px; }

.lata-example {
  background: var(--sky-dim);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 12px 0;
  font-size: 0.92rem;
  font-style: italic;
  text-align: center;
  color: var(--ink);
}

.lata-note {
  font-size: 0.8rem;
  color: var(--ink3);
  font-style: normal;
  margin-top: 8px;
  text-align: left;
}

.three-way-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}

.twc-card {
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
  border: 1px solid;
}

.twc-card .twc-name { font-size: 0.88rem; font-weight: 800; margin-bottom: 4px; }
.twc-card .twc-key { font-size: 1rem; font-weight: 700; line-height: 1.5; margin-bottom: 6px; }
.twc-card .twc-eg { font-size: 0.75rem; font-style: italic; opacity: 0.85; }

@media (max-width: 500px) {
  .three-way-compare { grid-template-columns: 1fr; }
}

.section-complete {
  opacity: 0.5;
}

.completion-track {
  font-size: 0.7rem;
  color: var(--mint);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   PYQ BADGE — was missing, causing unstyled badges
   ============================================================ */
.pyq-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--rose-dim);
  color: var(--rose);
  border: 1px solid rgba(255,204,77,0.3);
  margin-left: 4px;
  flex-shrink: 0;
}

/* ============================================================
   ACTIVE RECALL / FLASHCARD MODE
   ============================================================ */
.recall-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--violet);
  background: var(--violet-dim);
  color: var(--violet);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-main);
  transition: all 0.2s;
  margin: 12px 0 16px;
}
.recall-toggle-btn:hover, .recall-toggle-btn.active {
  background: var(--violet);
  color: #fff;
}

body.recall-mode .ex-verse {
  filter: blur(6px);
  user-select: none;
  transition: filter 0.3s;
  cursor: pointer;
  border-left-color: var(--gold) !important;
}
body.recall-mode .ex-verse:hover,
body.recall-mode .ex-verse.revealed {
  filter: none;
  user-select: auto;
}
body.recall-mode .ex-body > p {
  filter: blur(6px);
  transition: filter 0.3s;
  cursor: pointer;
}
body.recall-mode .ex-body > p:hover,
body.recall-mode .ex-body.revealed > p {
  filter: none;
}
body.recall-mode .def-box p {
  filter: blur(5px);
  cursor: pointer;
  transition: filter 0.3s;
}
body.recall-mode .def-box:hover p,
body.recall-mode .def-box.revealed p {
  filter: none;
}
.recall-hint {
  display: none;
  font-size: 0.72rem;
  color: var(--accent);
  text-align: center;
  margin-top: 6px;
  animation: pulse 1.5s infinite;
}
body.recall-mode .recall-hint { display: block; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ============================================================
   STUDY PROGRESS TRACKER
   ============================================================ */
.section-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.section-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--mint));
  border-radius: 2px;
  transition: width 0.5s ease;
  width: 0%;
}

/* Progress overview in sidebar */
.sidebar-progress {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.sp-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 6px;
}
.sp-bar-bg {
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.sp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--mint));
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 0%;
}
.sp-text {
  font-size: 0.7rem;
  color: var(--ink3);
  display: flex;
  justify-content: space-between;
}

/* ============================================================
   SECTION CATEGORY DIVIDER (Shabd vs Artha)
   ============================================================ */
.category-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 16px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--gold-dim), transparent);
  border: 1px solid rgba(255,204,77,0.2);
}
.category-divider.artha {
  background: linear-gradient(135deg, var(--violet-dim), transparent);
  border-color: rgba(var(--accent-rgb),0.2);
}
.cat-icon { font-size: 1.5rem; }
.cat-text { flex: 1; }
.cat-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 2px;
}
.category-divider.artha .cat-title { color: var(--violet); }
.cat-desc { font-size: 0.78rem; color: var(--ink3); }
.cat-count {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--gold-dim);
  color: var(--accent);
  border: 1px solid rgba(255,204,77,0.3);
}
.category-divider.artha .cat-count {
  background: var(--violet-dim);
  color: var(--violet);
  border-color: rgba(var(--accent-rgb),0.3);
}

/* ============================================================
   MINI FORMULA CHIP at top of each section
   ============================================================ */
.formula-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink2);
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.formula-chip .fc-arrow {
  color: var(--violet);
  font-size: 0.9rem;
}

/* ============================================================
   ENHANCED EXAMPLE CARD REVEAL
   ============================================================ */
.ex-reveal-btn {
  display: none;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--ink3);
  font-size: 0.75rem;
  cursor: pointer;
  font-family: var(--font-main);
  transition: all 0.2s;
}
body.recall-mode .ex-reveal-btn { display: inline-block; }
.ex-reveal-btn:hover { background: var(--violet-dim); color: var(--violet); }

/* ============================================================
   KEYBOARD SHORTCUT HINTS (topbar)
   ============================================================ */
.kb-hint {
  font-size: 0.62rem;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--ink3);
  font-family: monospace;
}

/* ============================================================
   ENHANCED SCROLLBAR
   ============================================================ */
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
#sidebar::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ============================================================
   BACK-TO-TOP SMOOTH INDICATOR
   ============================================================ */
#back-to-section {
  position: fixed;
  right: 20px;
  bottom: 140px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 199;
}
#back-to-section.visible { opacity: 1; pointer-events: all; }

/* ============================================================
   HIGHLIGHT ANIMATION on anchor jump
   ============================================================ */
.alankar-section:target {
  animation: targetHighlight 1.5s ease;
}
@keyframes targetHighlight {
  0% { box-shadow: 0 0 0 3px var(--violet); }
  100% { box-shadow: var(--shadow-sm); }
}

/* ============================================================
   TOPBAR ENHANCEMENTS
   ============================================================ */
.topbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border2);
}

/* ============================================================
   SIDEBAR RECALL TOGGLE
   ============================================================ */
.tool-btn.recall-active {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
}


/* ============================================================
   MCQ STYLES
   ============================================================ */
.mcq-opt {
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--ink2);
  font-size: 0.88rem;
  cursor: pointer;
  font-family: var(--font-main);
  transition: all 0.2s;
  line-height: 1.5;
}
.mcq-opt:hover:not(:disabled) {
  background: var(--violet-dim);
  color: var(--violet);
  border-color: var(--violet);
}
.mcq-opt.correct {
  background: rgba(var(--accent-rgb),0.15);
  color: var(--mint);
  border-color: rgba(var(--accent-rgb),0.4);
  font-weight: 600;
}
.mcq-opt.wrong {
  background: var(--rose-dim);
  color: var(--rose);
  border-color: rgba(255,204,77,0.4);
  text-decoration: line-through;
  opacity: 0.7;
}
.mcq-opt:disabled { cursor: default; }


/* ============================================================
   SECTION HEADER ACCENT LINES
   ============================================================ */
.s-anupras, .s-yamak, .s-shlesh, .s-vakrokti, .s-upma, .s-rupak, .s-utpreksha, .s-atishayokti, .s-bhrantiman, .s-sandeh, .s-virodhabhas, .s-vibhavana, .s-visheshokti, .s-manvikaran, .s-apahnuti, .s-prateep, .s-vyatirek, .s-dristant { border-left: 3px solid var(--accent); }

/* Section read marker via completed state */
.alankar-section.is-read { opacity: 1 !important; }

/* Smoother section animations */
.alankar-section {
  animation-fill-mode: both;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Topbar brand improvement */
.topbar-brand {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--violet);
  background: var(--violet-dim);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  border-radius: 4px;
  padding: 2px 8px;
  flex-shrink: 0;
}

/* Better table hover row effect */
tr:hover td { background: rgba(var(--accent-rgb),0.05) !important; }
tr:hover td.td-key { color: var(--violet) !important; }

/* Trick box polish */
.trick-box {
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left-width: 3px !important;
}


/* ============================================================
   COMPLETE BUTTON STATES
   ============================================================ */
.complete-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
  background: none !important;
  border: 1px solid var(--border2) !important;
  color: var(--ink3) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
  font-family: var(--font-main) !important;
  flex-shrink: 0;
}
.complete-btn:hover {
  background: rgba(var(--accent-rgb),0.15) !important;
  color: var(--mint) !important;
  border-color: rgba(var(--accent-rgb),0.4) !important;
}

/* ============================================================
   ENHANCED DEF BOX RECALL CURSOR
   ============================================================ */
body.recall-mode .def-box { cursor: pointer; }
body.recall-mode .def-box::after {
  content: '👁 क्लिक करें';
  display: block;
  font-size: 0.65rem;
  color: var(--violet);
  margin-top: 6px;
  opacity: 0.7;
}
body.recall-mode .def-box.revealed::after { display: none; }

/* ============================================================
   PRINT IMPROVEMENTS
   ============================================================ */
@media print {
  .category-divider { break-before: auto; background: #f0f0ff !important; border: 1px solid #ccc !important; -webkit-print-color-adjust: exact; }
  .pyq-badge { background: #ffe0e8 !important; color: #b8004a !important; border: 1px solid #138,90,0 !important; -webkit-print-color-adjust: exact; }
  .formula-chip { background: #f5f5ff !important; border: 1px solid #ccc !important; }
  #mcq-container { display: none !important; }
  .complete-btn { display: none !important; }
}

/* ============================================================
   HERO BUTTON SAFE DEFAULTS (already inline but CSS fallback)
   ============================================================ */
.hero-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-main);
  transition: all 0.2s;
}

/* ============================================================
   ★ MODERN UI ENHANCEMENTS — layered on top of existing styles
   ============================================================ */

/* --- Better font smoothing & base readability --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.82;
}

/* --- Verse text uses classical serif for poetry feel --- */
.ex-verse, .lata-example {
  font-family: 'Lora', 'Noto Sans Devanagari', serif;
}

/* --- Upgraded scrollbar (entire page) --- */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),0.25) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.25); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* --- Sidebar: sticky header + top gradient accent bar --- */
.sidebar-header {
  position: sticky;
  top: 0;
  z-index: 10;
}
.sidebar-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--mint));
  border-radius: 0 0 2px 2px;
}

/* --- Sidebar TOC: smoother hover, slightly more padding --- */
.toc-item a {
  padding: 9px 20px 9px 16px;
  border-left-width: 2.5px;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
}
.toc-item a:hover {
  padding-left: 20px;
  background: rgba(var(--accent-rgb),0.09);
}
.toc-item a.active {
  background: rgba(var(--accent-rgb),0.13);
}

/* --- Progress bar: glow pulse on load --- */
#progress-bar {
  height: 3px;
  border-radius: 0 2px 2px 0;
}

/* --- Topbar: subtle bottom glow line --- */
#topbar {
  box-shadow: 0 1px 0 rgba(var(--accent-rgb),0.12), 0 4px 24px rgba(0,0,0,0.35);
}
.topbar-brand {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  padding: 3px 10px;
  border-radius: 5px;
}

/* --- Hero: richer background treatment --- */
.hero {
  background-image:
    radial-gradient(ellipse 55% 80% at 90% 0%, rgba(var(--accent-rgb),0.13) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 5% 100%, rgba(var(--accent-rgb),0.08) 0%, transparent 55%),
    linear-gradient(rgba(var(--accent-rgb),0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.035) 1px, transparent 1px);
  background-size: auto, auto, 36px 36px, 36px 36px;
  background-color: var(--bg2);
  padding: 54px 48px 44px;
}
.hero-title {
  letter-spacing: -0.03em;
}
.hero-title span {
  filter: drop-shadow(0 0 28px rgba(var(--accent-rgb),0.55));
}

/* Stats: pill group instead of scattered */
.hero-stats {
  display: inline-flex;
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  overflow: hidden;
  flex-wrap: nowrap;
  margin-bottom: 8px;
}
.hero-stat {
  padding: 12px 22px;
  border-right: 1px solid var(--border);
  align-items: center;
}
.hero-stat:last-child { border-right: none; }
.stat-num { font-size: 1.6rem; }
.stat-label { font-size: 0.66rem; letter-spacing: 0.08em; }

/* --- Section cards: tighter bottom margin, lift on hover --- */
.alankar-section {
  margin-bottom: 24px;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}
.alankar-section:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb),0.32);
  box-shadow: 0 20px 60px rgba(0,0,20,0.55), 0 0 0 1px rgba(var(--accent-rgb),0.1);
}

/* Section header: tighter gradient, better spacing */
.section-header {
  padding: 17px 24px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.04) 0%, transparent 60%);
}
.section-header:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.09) 0%, transparent 60%);
}
.section-title { font-size: 1.1rem; letter-spacing: -0.015em; }
.section-subtitle { font-size: 0.72rem; letter-spacing: 0.025em; margin-top: 1px; }
.section-num {
  width: 32px; height: 32px;
  border-radius: 7px;
  font-size: 0.75rem;
}
.section-chevron {
  font-size: 0.75rem;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.section-header:hover .section-chevron {
  background: var(--violet-dim);
  border-color: rgba(var(--accent-rgb),0.3);
  color: var(--violet);
}

/* Section body: slightly more breathing room */
.section-body { padding: 24px 26px; }

/* --- Definition box: refined --- */
.def-box {
  padding: 16px 20px 16px 20px;
  border-left-width: 3.5px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 18px;
}
.def-box::before {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
  opacity: 0.9;
}
.def-box p { font-size: 0.94rem; line-height: 1.92; }

/* --- Example cards: verse typography upgrade --- */
.example-card {
  border-radius: 10px;
  margin: 11px 0;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.example-card:hover {
  border-color: var(--border2);
  box-shadow: 0 6px 24px rgba(0,0,20,0.4);
}
.ex-header {
  padding: 9px 15px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.ex-num {
  width: 20px; height: 20px;
  font-size: 0.62rem;
  border-radius: 50%;
}
.ex-verse {
  font-size: 1.02rem;
  line-height: 2.0;
  padding: 14px 18px;
  margin: 10px 14px 0;
  border-left-width: 3.5px;
  border-radius: 0 8px 8px 0;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s;
}
.ex-verse:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.09), transparent);
}
.ex-body { padding: 10px 15px 15px; }

/* --- Tables: cleaner row styling --- */
th {
  font-size: 0.79rem;
  letter-spacing: 0.03em;
  padding: 10px 13px;
  background: rgba(255,255,255,0.025);
}
td {
  padding: 9px 13px;
  font-size: 0.86rem;
  line-height: 1.68;
}
tr:hover td { background: rgba(var(--accent-rgb),0.04) !important; }

/* --- Trick box: stronger left accent --- */
.trick-box {
  border-left-width: 3.5px !important;
  padding: 13px 18px;
  border-radius: 0 8px 8px 0 !important;
}
.trick-box .trick-label { font-size: 0.65rem; letter-spacing: 0.14em; margin-bottom: 6px; }

/* --- Diff note & exam-imp: left accent upgrade --- */
.diff-note {
  border-left: 3.5px solid var(--mint);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
}
.exam-imp {
  border-left: 3.5px solid var(--rose);
  border-radius: 0 8px 8px 0;
}

/* --- Formula chip: monospace feel --- */
.formula-chip {
  font-family: var(--font-mono);
  font-size: 0.79rem;
  padding: 5px 13px;
  gap: 6px;
  letter-spacing: 0.01em;
}

/* --- Category divider: stronger visual --- */
.category-divider {
  padding: 16px 22px;
  margin: 32px 0 20px;
  border-radius: var(--radius);
}
.cat-title { font-size: 1rem; letter-spacing: -0.01em; }
.cat-count { font-family: var(--font-mono); }

/* --- Comp cards: hover accent --- */
.comp-card { transition: border-color 0.2s, transform 0.2s; }
.comp-card:hover { border-color: rgba(var(--accent-rgb),0.35); transform: translateY(-1px); }

/* --- Cheat cards: hover lift --- */
.cheat-card { transition: transform 0.2s, box-shadow 0.2s; }
.cheat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,20,0.4); }

/* --- Variant list items: tighter, hover glow --- */
.variant-body li {
  border-left-width: 3px;
  transition: border-color 0.2s, background 0.2s;
}
.variant-body li:hover {
  background: rgba(var(--accent-rgb),0.05);
}

/* --- Floating nav: glow on hover --- */
.fnav-btn:hover {
  box-shadow: 0 4px 18px rgba(var(--accent-rgb),0.4);
}

/* --- Command palette: refined --- */
#cmd-palette {
  box-shadow: 0 28px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(var(--accent-rgb),0.12);
  border-radius: 14px;
}
.cmd-input-wrap { padding: 15px 18px; }
.cmd-input { font-size: 0.96rem; }
.cmd-item { font-size: 0.85rem; border-radius: 6px; }
.cmd-item:hover, .cmd-item.selected {
  background: rgba(var(--accent-rgb),0.12);
  color: var(--violet);
}

/* --- MCQ options: rounded + gap --- */
.mcq-opt {
  border-radius: 9px;
  padding: 11px 16px;
  font-size: 0.87rem;
  transition: all 0.15s;
}

/* --- Keyword chip: refined --- */
.keyword-chip {
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 0.75em;
  font-family: var(--font-mono);
}

/* --- Keyword chip: large (identifier / वाचक शब्द groups) --- */
.chip-lg { gap: 10px; }
.chip-lg .keyword-chip {
  font-size: 1rem;
  padding: 5px 14px;
  font-weight: 700;
  border-width: 1.5px;
  letter-spacing: 0.02em;
}

/* --- PYQ badge: tighter --- */
.pyq-badge {
  font-size: 0.58rem;
  padding: 2px 8px;
  letter-spacing: 0.1em;
  border-radius: 20px;
  font-family: var(--font-mono);
}

/* --- Sub heading: slightly bolder line --- */
.sub-heading {
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  padding-bottom: 7px;
}
.sub-heading .sh-icon { width: 3.5px; height: 15px; }

/* --- Section target highlight: smoother --- */
.alankar-section:target {
  animation: targetHighlight 2s ease;
}
@keyframes targetHighlight {
  0%   { box-shadow: 0 0 0 3px var(--violet), var(--glow-v); }
  60%  { box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.4); }
  100% { box-shadow: var(--shadow-sm); }
}

/* --- Recall mode: reveal hint styling --- */
body.recall-mode .ex-verse {
  position: relative;
}
body.recall-mode .ex-verse::after {
  content: '👁 tap to reveal';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--accent);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  pointer-events: none;
  opacity: 0.8;
}
body.recall-mode .ex-verse.revealed::after { display: none; }

/* --- Sidebar tools: 3-col grid layout --- */
.sidebar-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 10px;
}
.tool-btn {
  min-width: unset;
  flex: unset;
  padding: 7px 4px;
  font-size: 0.66rem;
  border-radius: 7px;
  line-height: 1.35;
}

/* --- Sidebar search: icon padding --- */
.sidebar-search input {
  padding: 7px 11px;
  font-size: 0.81rem;
  border-radius: 8px;
}
.sidebar-search input:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.14);
}

/* --- Light mode improvements — comprehensive fix --- */

/* Core light mode CSS variables — override semi-transparent dark backgrounds */
.light {
  --topbar-bg: rgba(240,242,255,0.97);
  --li-bg: rgba(var(--accent-rgb),0.04);
  --ex-header-bg: rgba(var(--accent-rgb),0.05);
  --verse-bg: rgba(var(--accent-rgb),0.06);
}

/* Topbar */
.light #topbar {
  background: rgba(240,242,255,0.97);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb),0.12), 0 4px 20px rgba(60,40,180,0.07);
  border-bottom-color: rgba(var(--accent-rgb),0.15);
}
.light .topbar-title { color: var(--ink2); }
.light .topbar-brand { background: rgba(var(--accent-rgb),0.1); color: var(--sky); border-color: rgba(var(--accent-rgb),0.2); }
.light .ctrl-btn { background: rgba(var(--accent-rgb),0.06); border-color: rgba(var(--accent-rgb),0.15); color: var(--ink2); }
.light .ctrl-btn:hover { background: rgba(var(--accent-rgb),0.13); color: var(--sky); border-color: rgba(var(--accent-rgb),0.35); }

/* Sidebar */
.light #sidebar { background: #eaecff; border-right-color: rgba(var(--accent-rgb),0.14); box-shadow: 2px 0 16px rgba(60,40,180,0.07); }
.light .sidebar-header { background: #dfe2ff; border-bottom-color: rgba(var(--accent-rgb),0.14); }
.light .sidebar-title { color: var(--sky); }
.light .sidebar-subtitle, .light .reading-time { color: #585c8f; }
.light .sidebar-search { border-bottom-color: rgba(var(--accent-rgb),0.1); }
.light .sidebar-search input { background: #fff; border-color: rgba(var(--accent-rgb),0.18); color: #14163a; }
.light .sidebar-search input::placeholder { color: #585c8f; }
.light .sidebar-search input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.1); }
.light .sidebar-progress { background: #e4e7ff; padding: 10px 14px; }
.light .sp-label { color: #585c8f; font-weight: 600; }
.light .sp-bar-bg { background: rgba(var(--accent-rgb),0.14); }
.light .sp-text { color: #585c8f; }
.light .toc-item a { color: #33366e; }
.light .toc-item a:hover { background: rgba(var(--accent-rgb),0.09); color: var(--sky); border-left-color: var(--sky); }
.light .toc-item a.active { background: rgba(var(--accent-rgb),0.14); color: var(--sky); border-left-color: var(--sky); font-weight: 700; }
.light .toc-badge { background: rgba(var(--accent-rgb),0.1); color: var(--sky); border-color: rgba(var(--accent-rgb),0.2); }
.light .sidebar-tools { background: #dfe2ff; border-top-color: rgba(var(--accent-rgb),0.14); }
.light .tool-btn { background: #fff; border-color: rgba(var(--accent-rgb),0.18); color: #33366e; }
.light .tool-btn:hover { background: rgba(var(--accent-rgb),0.1); color: var(--sky); border-color: rgba(var(--accent-rgb),0.3); }
.light .tool-btn.active { background: var(--sky); color: #fff; border-color: var(--sky); }
.light .tool-btn.recall-active { background: var(--sky); color: #fff; }

/* Hero */
.light .hero {
  background-color: #f2f3ff;
  background-image:
    radial-gradient(ellipse 55% 80% at 90% 0%, rgba(var(--accent-rgb),0.09) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 5% 100%, rgba(var(--accent-rgb),0.06) 0%, transparent 55%),
    linear-gradient(rgba(var(--accent-rgb),0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.03) 1px, transparent 1px);
  border-bottom-color: rgba(var(--accent-rgb),0.12);
}
.light .hero-sub { color: #585c8f; }
.light .stat-label { color: #585c8f; }

/* Section cards */
.light .alankar-section { background: #fff; border-color: rgba(var(--accent-rgb),0.12); box-shadow: 0 2px 12px rgba(60,40,180,0.05); }
.light .alankar-section:hover { box-shadow: 0 8px 32px rgba(60,40,180,0.1), 0 0 0 1.5px rgba(var(--accent-rgb),0.2); transform: translateY(-1px); border-color: rgba(var(--accent-rgb),0.22); }
.light .section-header { background: linear-gradient(90deg, rgba(var(--accent-rgb),0.04), transparent); border-bottom-color: rgba(var(--accent-rgb),0.1); }
.light .section-header:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb),0.09), transparent); }
.light .section-subtitle { color: #585c8f; }
.light .section-chevron { color: #585c8f; }
.light .section-body { background: #fff; }

/* Variant blocks (भेद boxes like वृत्त्यनुप्रास, लाटानुप्रास etc.) */
.light .variant-block { background: #f6f7ff; border-color: rgba(var(--accent-rgb),0.12); }
.light .variant-header { border-bottom-color: rgba(var(--accent-rgb),0.1); }
.light .variant-body { background: transparent; }
.light .variant-body li {
  background: rgba(var(--accent-rgb),0.04) !important;
  color: #14163a !important;
  border-left-color: rgba(var(--accent-rgb),0.2);
}
.light .variant-body li:hover { background: rgba(var(--accent-rgb),0.08) !important; border-left-color: var(--sky); }
.light .variant-body strong { color: #14163a; }

/* Example cards — THE critical fix */
.light .example-card {
  background: #f8f9ff !important;
  border-color: rgba(var(--accent-rgb),0.14) !important;
  box-shadow: 0 1px 6px rgba(60,40,180,0.05);
}
.light .ex-header {
  background: rgba(var(--accent-rgb),0.06) !important;
  color: #33366e !important;
  border-bottom-color: rgba(var(--accent-rgb),0.1) !important;
}
.light .ex-verse {
  background: #eef0ff !important;
  color: #14163a !important;
  border-left-color: var(--sky);
}
.light .ex-body { color: #14163a; }

/* Lata example box */
.light .lata-example { color: #14163a; background: #eef0ff; border-color: rgba(var(--accent-rgb),0.14); }
.light .lata-note { color: #33366e; }

/* Tables */
.light .tbl-wrap { border-color: rgba(var(--accent-rgb),0.12); }
.light table { background: #fff; }
.light th { background: #eef0ff; color: #14163a; border-bottom-color: rgba(var(--accent-rgb),0.14); }
.light td { color: #14163a; border-bottom-color: rgba(var(--accent-rgb),0.08); }
.light td.td-key { color: var(--sky); background: rgba(var(--accent-rgb),0.05); font-weight: 700; }
.light tr:hover td { background: rgba(var(--accent-rgb),0.04) !important; }
.light tr:hover td.td-key { color: var(--sky) !important; }

/* Def box */
.light .def-box p { color: #14163a; }

/* Formula chip */
.light .formula-chip { background: #eef0ff; border-color: rgba(var(--accent-rgb),0.16); color: #33366e; }
.light .formula-chip .fc-arrow { color: var(--sky); }

/* Trick box */
.light .trick-box { background: rgba(138,90,0,0.07); border-color: rgba(138,90,0,0.2); border-left-color: var(--sky); }
.light .trick-box p, .light .trick-box li { color: #14163a; }
.light .trick-box .trick-label { color: var(--sky); }

/* Diff note */
.light .diff-note { background: rgba(var(--accent-rgb),0.06); border-color: rgba(var(--accent-rgb),0.18); color: #14163a; }

/* Exam imp */
.light .exam-imp { background: rgba(138,90,0,0.06); border-color: rgba(138,90,0,0.15); color: #14163a; }

/* Sub heading */
.light .sub-heading { color: #14163a; border-bottom-color: rgba(var(--accent-rgb),0.1); }

/* Category divider */
.light .category-divider { background: linear-gradient(135deg, rgba(138,90,0,0.07), rgba(138,90,0,0.02)); border-color: rgba(138,90,0,0.18); }
.light .category-divider.artha { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.07), rgba(var(--accent-rgb),0.02)); }
.light .cat-desc { color: #585c8f; }

/* MCQ */
.light .mcq-opt { background: #f4f5ff; border-color: rgba(var(--accent-rgb),0.15); color: #14163a; }
.light .mcq-opt:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.09); color: var(--sky); border-color: rgba(var(--accent-rgb),0.3); }

/* Highlight colors — darken for light mode readability */
/* hl-* colours now inherit directly from the 4-colour --gold/--rose/--mint/--sky variables above, which are already contrast-tuned per theme. */

/* Keyword chips in light */
.light .keyword-chip { background: rgba(var(--accent-rgb),0.09); color: var(--sky); border-color: rgba(var(--accent-rgb),0.22); }

/* PYQ badge */
.light .pyq-badge { background: rgba(138,90,0,0.08); color: #b8004a; border-color: rgba(138,90,0,0.22); }

/* Command palette */
.light #cmd-palette { background: #fff; border-color: rgba(var(--accent-rgb),0.18); box-shadow: 0 16px 48px rgba(60,40,180,0.14); }
.light .cmd-input-wrap { border-bottom-color: rgba(var(--accent-rgb),0.12); background: #f4f5ff; }
.light .cmd-input { background: transparent; color: #14163a; }
.light .cmd-item { color: #33366e; }
.light .cmd-item:hover, .light .cmd-item.selected { background: rgba(var(--accent-rgb),0.08); color: var(--sky); }

/* Scanline overlay: off in light */
.light body::before { opacity: 0; }

/* --- Smooth focus ring for accessibility --- */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}
.section-toggle-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* --- Three-way compare card hover --- */
.twc-card { transition: transform 0.2s, box-shadow 0.2s; }
.twc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,20,0.4); }

/* --- Lata example: serif feel --- */
.lata-example { letter-spacing: 0.01em; line-height: 2.0; }

/* --- Mobile nav: backdrop --- */
#mobile-nav { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* --- Sidebar overlay: blur backdrop --- */
#sidebar-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* --- Reading time badge in sidebar header --- */
.reading-time { font-size: 0.68rem; opacity: 0.75; }

/* --- Staggered section fade-in animation delay --- */
.alankar-section:nth-child(1)  { animation-delay: 0.00s; }
.alankar-section:nth-child(2)  { animation-delay: 0.04s; }
.alankar-section:nth-child(3)  { animation-delay: 0.08s; }
.alankar-section:nth-child(4)  { animation-delay: 0.12s; }
.alankar-section:nth-child(5)  { animation-delay: 0.16s; }
.alankar-section:nth-child(6)  { animation-delay: 0.20s; }
.alankar-section:nth-child(7)  { animation-delay: 0.24s; }
.alankar-section:nth-child(8)  { animation-delay: 0.28s; }
.alankar-section:nth-child(9)  { animation-delay: 0.32s; }
.alankar-section:nth-child(10) { animation-delay: 0.36s; }
.alankar-section:nth-child(11) { animation-delay: 0.40s; }
.alankar-section:nth-child(12) { animation-delay: 0.44s; }
.alankar-section:nth-child(13) { animation-delay: 0.48s; }
.alankar-section:nth-child(14) { animation-delay: 0.52s; }
.alankar-section:nth-child(15) { animation-delay: 0.56s; }

/* Final mobile overrides: keep these after desktop refinement styles. */
@media (max-width: 768px) {
  .hero { padding: 28px 20px 24px; }
  #content { padding: 20px 12px 80px; }
  .section-header { padding: 14px 14px; gap: 10px; }
  .section-body { padding: 16px 12px; }
  .def-box { padding: 14px 15px; }
  .ex-verse { margin-inline: 10px; padding: 12px 14px; }
  .ex-body { padding: 10px 11px 12px; }
  .variant-body { padding: 10px 11px; }
  .category-divider { padding: 14px 16px; }
}

@media (max-width: 500px) {
  #content { padding: 14px 6px 80px; }
  .hero { padding: 22px 14px 20px; }
  .topic-intro { margin-inline: 6px; }

  .alankar-section {
    margin-bottom: 18px;
    border-radius: 7px;
  }
  .section-header {
    padding: 11px 9px;
    gap: 7px;
  }
  .section-num { width: 28px; height: 28px; }
  .section-title { font-size: 1rem; }
  .section-subtitle { font-size: 0.68rem; line-height: 1.35; }
  .section-body { padding: 10px 6px; }

  .def-box {
    margin-bottom: 12px;
    padding: 11px 11px 11px 12px;
    border-radius: 0 6px 6px 0;
  }
  .def-box p { font-size: 0.9rem; line-height: 1.75; }
  .sub-heading { margin: 18px 2px 10px; }

  .variant-block {
    margin: 10px 0;
    border-radius: 6px;
  }
  .variant-header { padding: 8px 9px; }
  .variant-body { padding: 7px 5px; }
  .variant-body ul { gap: 6px; }
  .variant-body li {
    padding: 7px 7px;
    border-radius: 5px;
    line-height: 1.6;
  }

  .example-card {
    margin: 9px 0;
    border-radius: 6px;
  }
  .ex-header { padding: 8px 9px; gap: 7px; }
  .ex-body { padding: 7px 5px 9px; }
  .ex-verse {
    margin: 7px 5px 0;
    padding: 9px 9px;
    font-size: 0.96rem;
    line-height: 1.75;
    border-radius: 0 5px 5px 0;
  }

  .tbl-wrap { margin: 9px 0; border-radius: 5px; }
  th, td { padding: 8px 9px; }
  .trick-box,
  .diff-note,
  .exam-imp {
    margin: 10px 0;
    padding: 10px 10px;
    border-radius: 0 6px 6px 0 !important;
  }
  .formula-chip { padding: 5px 8px; }
  .category-divider {
    margin: 22px 0 14px;
    padding: 11px 9px;
    border-radius: 7px;
  }
  .arthalankar-intro {
    margin: 14px 0 22px;
    padding: 12px 10px;
    border-radius: 7px;
  }
  .cheat-card { padding: 12px 9px; }
  .mcq-opt { padding: 10px 10px; }
  #s-mcq .alankar-section > div[style*="padding:18px"] { padding: 11px 9px !important; }
}



/* Individual Alankar study pages */
.topic-page {
  --bg: #111315;
  --bg2: #171a1d;
  --bg3: #1d2125;
  --card: #181c1f;
  --card2: #20252a;
  --ink: #f3f6f5;
  --ink2: #c3cdca;
  --ink3: #8d9995;
  --border: rgba(225,235,232,.10);
  --border2: rgba(225,235,232,.18);
  --border-glow: rgba(92,199,178,.34);
  --accent-rgb: 92,199,178;
  --accent: #5cc7b2;
  --accent-dim: rgba(92,199,178,.12);
  --sky: #75bde8;
  --sky-dim: rgba(117,189,232,.12);
  --violet: #5cc7b2;
  --violet-dim: rgba(92,199,178,.12);
  --mint: #70c9a9;
  --mint-dim: rgba(112,201,169,.12);
  --rose: #e88b84;
  --rose-dim: rgba(232,139,132,.12);
  --gold: #e8c46d;
  --gold-dim: rgba(232,196,109,.13);
  --orange: #e8c46d;
  --orange-dim: rgba(232,196,109,.13);
  --highlight: #e8c46d;
  --highlight-dim: rgba(232,196,109,.13);
  --shadow: 0 8px 24px rgba(0,0,0,.20);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.16);
  --glow-v: none;
  --glow-m: none;
  --glow-g: none;
  --topbar-bg: #171a1d;
  color-scheme: dark;
}
html.light body.topic-page,
body.topic-page.light {
  --bg: #f7f9f8;
  --bg2: #ffffff;
  --bg3: #eef3f1;
  --card: #ffffff;
  --card2: #f1f5f3;
  --ink: #18211e;
  --ink2: #43514c;
  --ink3: #5d6b65;
  --border: rgba(24,33,30,.09);
  --border2: rgba(24,33,30,.16);
  --border-glow: rgba(11,119,104,.28);
  --accent-rgb: 11,119,104;
  --accent: #0b7768;
  --accent-dim: rgba(11,119,104,.09);
  --sky: #236c99;
  --sky-dim: rgba(35,108,153,.09);
  --violet: #0b7768;
  --violet-dim: rgba(11,119,104,.09);
  --mint: #27745b;
  --mint-dim: rgba(39,116,91,.09);
  --rose: #a9443e;
  --rose-dim: rgba(169,68,62,.09);
  --gold: #805800;
  --gold-dim: rgba(128,88,0,.09);
  --orange: #805800;
  --orange-dim: rgba(128,88,0,.09);
  --highlight: #805800;
  --highlight-dim: rgba(128,88,0,.09);
  --shadow: 0 6px 20px rgba(28,45,39,.08);
  --shadow-sm: 0 1px 6px rgba(28,45,39,.07);
  --topbar-bg: #ffffff;
  color-scheme: light;
}
.visually-hidden { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.topic-page { min-height:100dvh;transition:none; }
.topic-page::before { display:none; }
.topic-page .layout { min-height:100dvh; }
.topic-page #main { min-width:0; }
.topic-page .sidebar-header::before,
.topic-page .topic-study-hero::before,
.topic-page .topic-study-hero::after { display:none; }
.topic-page #sidebar,
.topic-page #topbar { box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; }
.topic-page .sidebar-header::after { background:var(--accent);box-shadow:none; }
.topic-page .topic-study-hero { background-image:none; }
.topic-page .alankar-section,
.topic-page .example-card,
.topic-page .variant-block { box-shadow:none; }
.topic-page #progress-bar { background:var(--accent);box-shadow:none; }
html.light body.topic-page #topbar,
body.topic-page.light #topbar { background:#ffffff;border-bottom-color:var(--border2);box-shadow:none; }
html.light body.topic-page #sidebar,
body.topic-page.light #sidebar { background:#f0f4f2;border-right-color:var(--border2);box-shadow:none; }
html.light body.topic-page .sidebar-header,
body.topic-page.light .sidebar-header { background:#e7eeeb;border-bottom-color:var(--border2); }
html.light body.topic-page .sidebar-subtitle,
body.topic-page.light .sidebar-subtitle { color:var(--ink3); }
html.light body.topic-page .sidebar-search,
body.topic-page.light .sidebar-search { border-bottom-color:var(--border); }
html.light body.topic-page .sidebar-search input,
body.topic-page.light .sidebar-search input { background:#ffffff;border-color:var(--border2);color:var(--ink);box-shadow:none; }
html.light body.topic-page .sidebar-search input::placeholder,
body.topic-page.light .sidebar-search input::placeholder { color:var(--ink3); }
html.light body.topic-page .alankar-section,
body.topic-page.light .alankar-section { background:var(--card);border-color:var(--border2);box-shadow:none; }
html.light body.topic-page .alankar-section:hover,
body.topic-page.light .alankar-section:hover { transform:none;border-color:rgba(var(--accent-rgb),.28);box-shadow:none; }
html.light body.topic-page .section-body,
body.topic-page.light .section-body { background:#ffffff; }
html.light body.topic-page .variant-block,
body.topic-page.light .variant-block { background:#f3f7f5;border-color:var(--border2); }
html.light body.topic-page .variant-body li,
body.topic-page.light .variant-body li { background:#f7f9f8!important;color:var(--ink)!important;border-left-color:rgba(var(--accent-rgb),.25); }
html.light body.topic-page .variant-body strong,
body.topic-page.light .variant-body strong { color:var(--ink); }
html.light body.topic-page .example-card,
body.topic-page.light .example-card { background:#f7f9f8!important;border-color:var(--border2)!important;box-shadow:none; }
html.light body.topic-page .ex-header,
body.topic-page.light .ex-header { background:#edf4f1!important;color:var(--ink2)!important;border-bottom-color:var(--border)!important; }
html.light body.topic-page .ex-verse,
body.topic-page.light .ex-verse { background:#eef5f2!important;color:var(--ink)!important;border-left-color:var(--accent); }
html.light body.topic-page .ex-body,
body.topic-page.light .ex-body,
html.light body.topic-page .def-box p,
body.topic-page.light .def-box p { color:var(--ink); }
html.light body.topic-page table,
body.topic-page.light table { background:#ffffff; }
html.light body.topic-page th,
body.topic-page.light th { background:#edf4f1;color:var(--ink);border-bottom-color:var(--border2); }
html.light body.topic-page td,
body.topic-page.light td { color:var(--ink);border-bottom-color:var(--border); }
html.light body.topic-page .formula-chip,
body.topic-page.light .formula-chip { background:#edf4f1;border-color:var(--border2);color:var(--ink2); }
html.light body.topic-page .trick-box,
body.topic-page.light .trick-box { background:#fbf7ec;border-color:rgba(128,88,0,.18);border-left-color:var(--gold); }
html.light body.topic-page .trick-box p,
body.topic-page.light .trick-box p,
html.light body.topic-page .trick-box li,
body.topic-page.light .trick-box li { color:var(--ink); }
html.light body.topic-page .diff-note,
body.topic-page.light .diff-note { background:#eef6f3;border-color:rgba(var(--accent-rgb),.18);color:var(--ink); }
html.light body.topic-page .exam-imp,
body.topic-page.light .exam-imp { background:#fbf7ec;border-color:rgba(128,88,0,.16);color:var(--ink); }
html.light body.topic-page .sub-heading,
body.topic-page.light .sub-heading { color:var(--ink);border-bottom-color:var(--border); }
html.light body.topic-page .category-divider,
body.topic-page.light .category-divider { background:#fbf7ec;border-color:rgba(128,88,0,.16); }
html.light body.topic-page .category-divider.artha,
body.topic-page.light .category-divider.artha { background:#eef6f3;border-color:rgba(var(--accent-rgb),.16); }
html.light body.topic-page .cat-desc,
body.topic-page.light .cat-desc { color:var(--ink3); }
html.light body.topic-page .mcq-opt,
body.topic-page.light .mcq-opt { background:#f5f8f6;border-color:var(--border2);color:var(--ink); }
html.light body.topic-page .keyword-chip,
body.topic-page.light .keyword-chip { background:var(--accent-dim);color:var(--accent);border-color:rgba(var(--accent-rgb),.22); }
html.light body.topic-page .twc-card:hover,
body.topic-page.light .twc-card:hover { transform:none;box-shadow:none; }
.topic-page .sidebar-header {
  flex:0 0 auto;
  min-height:74px;
  padding:18px 16px 13px;
  overflow:hidden;
}
.topic-page .sidebar-search { flex:0 0 auto; }
.sidebar-hub-link { display:block;color:var(--ink);font-size:1rem;font-weight:800;line-height:1.35;text-decoration:none;margin:0 0 4px;letter-spacing:0; }
.topic-page .sidebar-subtitle { line-height:1.45; }
.sidebar-hub-link:hover { color:var(--accent); }
.topic-sidebar-list { flex:0 0 auto;padding:6px 0 18px; }
.topic-sidebar-heading { padding:14px 16px 5px;color:var(--ink3);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }
.topic-sidebar-list a { display:block;padding:7px 16px;color:var(--ink2);font-size:.8rem;line-height:1.45;text-decoration:none;border-left:2px solid transparent; }
.topic-sidebar-list a:hover { color:var(--accent);background:rgba(var(--accent-rgb),.06); }
.topic-sidebar-list a[aria-current="page"] { color:var(--accent);border-left-color:var(--accent);font-weight:700;background:rgba(var(--accent-rgb),.09); }
.topic-page .topbar-brand { color:var(--accent);text-decoration:none;font-family:var(--font-mono);font-weight:700;letter-spacing:.08em; }
.topic-page .ctrl-btn { text-decoration:none;font-family:var(--font-main); }
.topic-study-hero { padding:28px 44px 25px;background:var(--bg2);border-bottom:1px solid var(--border2); }
.topic-study-hero h1 { margin:6px 0 4px;font-family:var(--font-heading);font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.25;letter-spacing:0;color:var(--ink); }
.topic-study-hero h1 span { color:var(--accent); }
.topic-study-hero > p { margin:0;color:var(--ink2);font-size:.9rem;line-height:1.65; }
.topic-category { color:var(--accent)!important;font-size:.7rem!important;font-weight:700;text-transform:uppercase;letter-spacing:.08em; }
.topic-breadcrumb { display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink3);font-size:.74rem; }
.topic-breadcrumb a { color:var(--ink2);text-decoration:none; }
.topic-breadcrumb a:hover { color:var(--accent);text-decoration:underline;text-underline-offset:3px; }
.topic-page #content { max-width:1060px;padding-top:28px; }
.topic-study-content > .alankar-section { margin:0;animation:none;transform:none;overflow:visible; }
.topic-study-content > .alankar-section:hover { transform:none;box-shadow:var(--shadow-sm); }
.topic-page[data-page-kind="topic"] .topic-study-content > .alankar-section > .section-header { display:none; }
.topic-page[data-page-kind="topic"] .topic-study-content > .alankar-section > .section-body { display:block!important;border:0; }
.topic-page .alankar-section { animation:none; }
.topic-page .alankar-section:hover { transform:none; }
.topic-pagination { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;margin:28px 0 12px;padding:18px 0;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2); }
.topic-pagination a { color:var(--ink2);text-decoration:none;font-size:.8rem;line-height:1.5; }
.topic-pagination a:hover { color:var(--accent); }
.topic-pagination a span { display:block;color:var(--ink3);font-size:.67rem; }
.topic-pagination a strong { display:block;color:inherit;font-size:.86rem; }
.topic-pagination-index { text-align:center;text-decoration:underline!important;text-underline-offset:4px; }
.topic-pagination-next { text-align:right; }
.topic-footer { display:flex;gap:8px;flex-wrap:wrap;padding:20px 0;color:var(--ink3);font-size:.75rem; }
.topic-footer a { color:var(--ink2); }
.resource-study-content > * { animation:none; }
.resource-links,.resource-directory { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:28px 0;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2); }
.resource-links a,.resource-directory a { color:var(--ink2);text-decoration:none;padding:14px 12px;border-right:1px solid var(--border);font-size:.82rem; }
.resource-links a:last-child,.resource-directory a:last-child { border-right:0; }
.resource-links a:hover,.resource-directory a:hover { color:var(--accent);background:rgba(var(--accent-rgb),.05); }
.resource-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
.resource-directory a { display:block;padding:18px 0; }
.resource-directory a:first-child { padding-right:20px; }
.resource-directory a:last-child { padding-left:20px; }
.resource-directory strong,.resource-directory span { display:block; }
.resource-directory span { margin-top:4px;color:var(--ink3);font-size:.75rem;line-height:1.55; }
.hub-study-hero { padding-top:34px;padding-bottom:28px; }
.hub-study-hero h1 { font-size:clamp(1.8rem,4vw,2.7rem); }
.topic-directory-section { margin:34px 0 0; }
.directory-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:12px;border-bottom:1px solid var(--border2); }
.directory-heading h2 { margin:0;color:var(--ink);font-size:1.14rem;line-height:1.4;letter-spacing:0; }
.directory-heading p { margin:4px 0 0;color:var(--ink3);font-size:.8rem;line-height:1.6; }
.directory-heading > span { flex:none;color:var(--accent);font-size:.7rem;font-weight:700; }
.topic-directory-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;margin:0;padding:0;list-style-position:inside; }
.topic-directory-list li { border-bottom:1px solid var(--border);color:var(--ink3); }
.topic-directory-list li::marker { font-family:var(--font-mono);font-size:.72rem; }
.topic-directory-list a { display:inline-flex;flex-direction:column;width:calc(100% - 28px);padding:13px 0;color:var(--ink2);text-decoration:none;vertical-align:top; }
.topic-directory-list a:hover strong { color:var(--accent);text-decoration:underline;text-underline-offset:4px; }
.topic-directory-list strong { color:var(--ink);font-size:.9rem; }
.topic-directory-list span { margin-top:2px;color:var(--ink3);font-size:.72rem;line-height:1.5; }
.hub-seo-footer { margin-top:32px;padding:24px 0;border-top:1px solid var(--border);color:var(--ink2);font-size:.82rem;line-height:1.75; }
.hub-seo-footer h2 { font-size:1rem;color:var(--ink);margin-bottom:10px; }
.hub-seo-footer a { color:var(--accent); }
.topic-page .hero-title,.topic-page .stat-num { letter-spacing:0; }
.topic-page .bookmark-btn,.topic-page .complete-btn { display:none; }
.topic-page .section-title { letter-spacing:0; }
.topic-page [data-student-nav] { max-width:1060px; }
@media (max-width:768px) {
  .topic-study-hero { padding:22px 16px 20px; }
  .topic-page #content { padding:18px 8px 80px; }
  .topic-page[data-page-kind="topic"] .topic-study-content > .alankar-section { border-left:0;border-right:0;border-radius:0; }
  .topic-page[data-page-kind="topic"] .topic-study-content > .alankar-section > .section-body { padding:12px 5px; }
  .topic-directory-list { grid-template-columns:1fr; }
  .resource-links { grid-template-columns:1fr; }
  .resource-links a { border-right:0;border-bottom:1px solid var(--border); }
  .resource-links a:last-child { border-bottom:0; }
}
@media (max-width:520px) {
  .topic-study-hero h1 { font-size:1.55rem; }
  .topic-pagination { grid-template-columns:1fr 1fr;gap:12px; }
  .topic-pagination-index { grid-column:1/-1;grid-row:1; }
  .topic-pagination-next { text-align:right; }
  .directory-heading { display:block; }
  .directory-heading > span { display:block;margin-top:6px; }
  .resource-directory { grid-template-columns:1fr; }
  .resource-directory a:first-child,.resource-directory a:last-child { padding:14px 0;border-right:0; }
  .resource-directory a:first-child { border-bottom:1px solid var(--border); }
  .topbar-title { display:block; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
}