/* ═══════════════════════════════════════════════
       DESIGN TOKENS
       Palette: Aged Parchment + Indigo + Saffron Gold
    ═══════════════════════════════════════════════ */
    :root {
      --ink:          #1C1A18;
      --ink-2:        #3C3834;
      --ink-3:        #6B6560;
      --parchment:    #FAF7F2;
      --parchment-2:  #F2EDE4;
      --parchment-3:  #E8E1D5;
      --parchment-4:  #d7d4ce;
      --rule:         #D6CEC2;
      --rule-2:       #C4BAB0;

      --saffron:      #C8680A;
      --saffron-lt:   #F4A548;
      --saffron-dim:  rgba(200,104,10,0.1);
      --saffron-glow: rgba(200,104,10,0.22);

      --indigo:       #3B4E8C;
      --indigo-lt:    #5B71B8;
      --indigo-dim:   rgba(59,78,140,0.1);

      --crimson:      #A02020;
      --crimson-dim:  rgba(160,32,32,0.09);
      --viridian:     #1A6B4A;
      --viridian-dim: rgba(26,107,74,0.09);

      --surface:            #FFFFFF;
      --surface-warm-hover: #FFFCF8;
      --amber-text:         #A0620A;
      --topbar-bg:          rgba(255,255,255,0.95);
      --modal-overlay-bg:   rgba(28,26,24,0.78);
      --card-saffron-bg:    #FFFDF9;
      --card-indigo-bg:     #F8F9FF;
      --card-crimson-bg:    #FFF8F8;
      --card-viridian-bg:   #F6FBF8;
      --card-amber-bg:      #FFFBF2;

      --font-body:    'Noto Serif Devanagari', serif;
      --font-sans:    'Noto Sans Devanagari', sans-serif;
      --font-mono:    'JetBrains Mono', monospace;

      --r-sm: 4px;
      --r-md: 8px;
      --r-lg: 14px;
      --r-xl: 20px;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ═══════════════════════════════════════════════
       DARK थीम — Colonial Archive / Lamplit Night
       वही saffron-इंडिगो-क्रिमसन-विरिडियन परिवार, पठनीयता हेतु
       गहरे आधार पर समायोजित टोन। हर सतह — साइडबार, कार्ड, मोडल,
       कमिश्नर-ब्लॉक, सेल्फ़-टेस्ट टेबल — को कवर किया गया है।
    ═══════════════════════════════════════════════ */
    html.dark {
      --ink:          #EDE7DC;
      --ink-2:        #B6AC9E;
      --ink-3:        #847A6E;
      --parchment:    #000000;
      --parchment-2:  #080808;
      --parchment-3:  #111111;
      --parchment-4:  #2A2A2A;
      --rule:         #332C26;
      --rule-2:       #4A4138;

      --saffron:      #E2954C;
      --saffron-lt:   #F7C77A;
      --saffron-dim:  rgba(226,149,67,0.16);
      --saffron-glow: rgba(226,149,67,0.32);

      --indigo:       #8DA3EE;
      --indigo-lt:    #ADC0F5;
      --indigo-dim:   rgba(141,163,238,0.16);

      --crimson:      #E8696D;
      --crimson-dim:  rgba(232,105,109,0.15);
      --viridian:     #45C893;
      --viridian-dim: rgba(69,200,147,0.15);

      --surface:            #2A2420;
      --surface-warm-hover: #36291E;
      --amber-text:         #F0B05E;
      --topbar-bg:          rgba(20,17,14,0.86);
      --modal-overlay-bg:   rgba(6,5,4,0.86);
      --card-saffron-bg:    #2E2620;
      --card-indigo-bg:     #21253A;
      --card-crimson-bg:    #2E2020;
      --card-viridian-bg:   #1E2A24;
      --card-amber-bg:      #332A1B;
    }

    /* smooth cross-fade on every surface when the theme is toggled */
    body, #side-controls, #sidebar, .sb-prog, .card, .evt, .evt-hd, .evt-inner, .evt-inner ul li,
    .commissioner-block, .commissioner-ord, .commissioner-tenure, .notes-modal-overlay,
    .notes-modal, .nm-header, .nm-ul li, .nm-grid-cell, .nm-grid-full, .nm-stat, .nm-mini-quote,
    .trap-card, .rev-item, .chip, .toc-link, .mstr-btn,
    thead tr, tbody tr, .sidenote, .quote-card, .st-toolbar, .st-col-btn, .st-shuffle-btn,
    .st-reset-btn, .band-pill, .nm-close, .nm-tbl-wrap th, .nm-tbl-wrap td, .tb-btn, #prog-chip {
      transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
                  color 0.35s var(--ease), box-shadow 0.35s var(--ease);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      background: var(--parchment-2);
      color: var(--ink);
      font-family: var(--font-body);
      line-height: 1.85;
      overflow-x: hidden;
      transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
    }

    /* subtle parchment texture overlay — light mode only */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image:
        radial-gradient(ellipse 70% 50% at 15% 10%, rgba(200,104,10,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 80%, rgba(59,78,140,0.04) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
      opacity: 1;
      transition: opacity 0.6s ease;
    }
    html.dark body::before { opacity: 0; }

    /* ═══ AMBIENT NIGHT LAYER (dark mode only) ═══
       तीन तारा-परतें (दो बहती हुई + एक स्थिर) तथा चार रंगों
       (saffron / indigo / crimson / viridian — पेज में पहले से
       उपयोग किए जा रहे कमिश्नर रंग-कोड) में धीरे-धीरे बहते
       'lamp-glow' कण — जैसे किसी पुराने कलेक्ट्रेट-दफ़्तर की
       लालटेन-रोशनी रात में धुंध से छन रही हो। पठनीयता हेतु
       बेहद धीमी, कम-कॉन्ट्रास्ट गति रखी गई है। */
    #amb-glow {
      position: fixed; inset: 0; z-index: 0;
      overflow: hidden; pointer-events: none;
      opacity: 0; transition: opacity 0.7s ease;
    }
    html.dark #amb-glow { opacity: 1; }

    /* Persistent user highlights for the Kumaun Commissioner notes. */
    mark.kumaun-user-highlight {
      color: inherit; padding: 0 .08em; border-radius: 3px; cursor: pointer;
      box-decoration-break: clone; -webkit-box-decoration-break: clone;
    }
    mark.kumaun-user-highlight.kumaun-hl-yellow { background: #fff1a8; }
    mark.kumaun-user-highlight.kumaun-hl-green { background: #bde9c1; }
    mark.kumaun-user-highlight.kumaun-hl-pink { background: #ffc7d8; }
    mark.kumaun-user-highlight.kumaun-hl-blue { background: #bedcff; }
    html.dark mark.kumaun-user-highlight.kumaun-hl-yellow { background: #8a6a08; }
    html.dark mark.kumaun-user-highlight.kumaun-hl-green { background: #2d7043; }
    html.dark mark.kumaun-user-highlight.kumaun-hl-pink { background: #873a54; }
    html.dark mark.kumaun-user-highlight.kumaun-hl-blue { background: #315d91; }

    #kumaun-hl-toolbar {
      position: fixed; z-index: 10000; display: none; align-items: center; gap: 3px;
      max-width: calc(100vw - 20px); padding: 5px; border: 1px solid rgba(255,255,255,.16);
      border-radius: 9px; background: #201b17; color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.35);
    }
    #kumaun-hl-toolbar button {
      display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 6px;
      padding: 7px 9px; background: transparent; color: inherit; font: 700 12px var(--font-sans); cursor: pointer;
    }
    #kumaun-hl-toolbar button:hover { background: rgba(255,255,255,.14); }
    .kumaun-hl-swatch { width: 13px; height: 13px; border: 1px solid rgba(255,255,255,.32); border-radius: 3px; }
    .kumaun-hl-swatch.kumaun-hl-yellow { background: #fff1a8; }
    .kumaun-hl-swatch.kumaun-hl-green { background: #bde9c1; }
    .kumaun-hl-swatch.kumaun-hl-pink { background: #ffc7d8; }
    .kumaun-hl-swatch.kumaun-hl-blue { background: #bedcff; }
    .kumaun-hl-divider { width: 1px; height: 24px; margin: 0 2px; background: rgba(255,255,255,.2); }
    @media (max-width: 560px) {
      #kumaun-hl-toolbar { gap: 1px; padding: 4px; }
      #kumaun-hl-toolbar button { padding: 7px; font-size: 11px; }
      .kumaun-hl-swatch { display: none; }
    }

    #amb-glow .star-field { position: absolute; inset: -10% -10%; background-repeat: no-repeat; }
    #amb-glow .star-field-far {
      background-image:
        radial-gradient(1.8px 1.8px at 6% 10%,  rgba(255,252,245,0.9),  transparent 100%),
        radial-gradient(1.5px 1.5px at 14% 34%, rgba(255,252,245,0.75), transparent 100%),
        radial-gradient(2px   2px   at 22% 58%, rgba(255,252,245,0.85), transparent 100%),
        radial-gradient(1.5px 1.5px at 31% 8%,  rgba(255,252,245,0.78), transparent 100%),
        radial-gradient(1.8px 1.8px at 39% 72%, rgba(255,252,245,0.82), transparent 100%),
        radial-gradient(1.5px 1.5px at 46% 26%, rgba(255,252,245,0.75), transparent 100%),
        radial-gradient(2px   2px   at 54% 88%, rgba(255,252,245,0.88), transparent 100%),
        radial-gradient(1.5px 1.5px at 61% 16%, rgba(255,252,245,0.76), transparent 100%),
        radial-gradient(1.8px 1.8px at 68% 48%, rgba(255,252,245,0.8),  transparent 100%),
        radial-gradient(1.5px 1.5px at 75% 64%, rgba(255,252,245,0.75), transparent 100%),
        radial-gradient(2px   2px   at 83% 22%, rgba(255,252,245,0.85), transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,252,245,0.76), transparent 100%),
        radial-gradient(1.8px 1.8px at 97% 40%, rgba(255,252,245,0.8),  transparent 100%),
        radial-gradient(1.5px 1.5px at 4% 92%,  rgba(255,252,245,0.75), transparent 100%),
        radial-gradient(2px   2px   at 26% 16%, rgba(255,252,245,0.82), transparent 100%),
        radial-gradient(1.5px 1.5px at 58% 4%,  rgba(255,252,245,0.76), transparent 100%),
        radial-gradient(1.8px 1.8px at 71% 90%, rgba(255,252,245,0.8),  transparent 100%),
        radial-gradient(1.5px 1.5px at 10% 50%, rgba(255,252,245,0.75), transparent 100%);
      animation: starDriftA 46s ease-in-out infinite alternate, starTwinkleA 3s ease-in-out infinite alternate;
    }
    #amb-glow .star-field-near {
      background-image:
        radial-gradient(2.5px 2.5px at 12% 18%, rgba(255,255,255,1.0),  transparent 100%),
        radial-gradient(2px   2px   at 28% 42%, rgba(255,252,245,0.92), transparent 100%),
        radial-gradient(3px   3px   at 47% 12%, rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(2.2px 2.2px at 63% 38%, rgba(255,252,245,0.88), transparent 100%),
        radial-gradient(2.5px 2.5px at 78% 8%,  rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(2px   2px   at 85% 30%, rgba(255,252,245,0.9),  transparent 100%),
        radial-gradient(2.8px 2.8px at 18% 65%, rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(2.2px 2.2px at 38% 78%, rgba(255,252,245,0.88), transparent 100%),
        radial-gradient(2.5px 2.5px at 58% 60%, rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(2px   2px   at 73% 72%, rgba(255,252,245,0.88), transparent 100%),
        radial-gradient(3px   3px   at 92% 55%, rgba(255,255,255,1.0),  transparent 100%),
        radial-gradient(2.2px 2.2px at 8% 88%,  rgba(255,252,245,0.9),  transparent 100%),
        radial-gradient(2.5px 2.5px at 52% 95%, rgba(255,255,255,0.95), transparent 100%),
        radial-gradient(2px   2px   at 96% 14%, rgba(255,252,245,0.88), transparent 100%),
        radial-gradient(2.4px 2.4px at 35% 25%, rgba(255,255,255,0.92), transparent 100%),
        radial-gradient(2.5px 2.5px at 67% 88%, rgba(255,255,255,0.95), transparent 100%);
      animation: starDriftB 34s ease-in-out infinite alternate, starTwinkleB 2.2s ease-in-out infinite alternate;
    }
    #amb-glow .star-field-still {
      background-image:
        radial-gradient(2px   2px   at 9% 24%,  rgba(255,252,245,0.85), transparent 100%),
        radial-gradient(2.4px 2.4px at 19% 6%,  rgba(255,255,255,0.92), transparent 100%),
        radial-gradient(1.8px 1.8px at 33% 52%, rgba(255,252,245,0.8),  transparent 100%),
        radial-gradient(2.2px 2.2px at 44% 80%, rgba(255,252,245,0.88), transparent 100%),
        radial-gradient(2px   2px   at 51% 30%, rgba(255,255,255,0.85), transparent 100%),
        radial-gradient(2.4px 2.4px at 64% 12%, rgba(255,255,255,0.9),  transparent 100%),
        radial-gradient(1.8px 1.8px at 70% 60%, rgba(255,252,245,0.8),  transparent 100%),
        radial-gradient(2.2px 2.2px at 81% 38%, rgba(255,252,245,0.88), transparent 100%),
        radial-gradient(2px   2px   at 88% 82%, rgba(255,255,255,0.85), transparent 100%),
        radial-gradient(2.4px 2.4px at 95% 20%, rgba(255,255,255,0.9),  transparent 100%),
        radial-gradient(1.8px 1.8px at 5% 70%,  rgba(255,252,245,0.8),  transparent 100%),
        radial-gradient(2.1px 2.1px at 25% 90%, rgba(255,252,245,0.85), transparent 100%),
        radial-gradient(2px   2px   at 41% 14%, rgba(255,255,255,0.85), transparent 100%),
        radial-gradient(2.4px 2.4px at 58% 70%, rgba(255,255,255,0.9),  transparent 100%),
        radial-gradient(1.8px 1.8px at 76% 4%,  rgba(255,252,245,0.8),  transparent 100%),
        radial-gradient(2.2px 2.2px at 91% 58%, rgba(255,252,245,0.88), transparent 100%),
        radial-gradient(2px   2px   at 14% 44%, rgba(255,255,255,0.85), transparent 100%),
        radial-gradient(2.4px 2.4px at 37% 36%, rgba(255,255,255,0.9),  transparent 100%),
        radial-gradient(1.8px 1.8px at 62% 92%, rgba(255,252,245,0.8),  transparent 100%),
        radial-gradient(2.2px 2.2px at 84% 70%, rgba(255,252,245,0.88), transparent 100%);
      opacity: 1;
    }
    @keyframes starDriftA {
      0%   { transform: translate3d(0, 0, 0); }
      50%  { transform: translate3d(-7vw, -5vh, 0); }
      100% { transform: translate3d(-2vw, 4vh, 0); }
    }
    @keyframes starDriftB {
      0%   { transform: translate3d(0, 0, 0); }
      50%  { transform: translate3d(6vw, 4vh, 0); }
      100% { transform: translate3d(2vw, -5vh, 0); }
    }
    @keyframes starTwinkleA { from { opacity: 0.55; } to { opacity: 1;    } }
    @keyframes starTwinkleB { from { opacity: 0.65; } to { opacity: 1;    } }

    /* -- Lamp-glow motes: slow drifting soft orbs in the page's four
          accent colours (साफ़्रन / इंडिगो / क्रिमसन / विरिडियन),
          plus a smaller still set that only breathes in brightness.
          Randomised custom properties are set by script. -- */
    #amb-glow .glow-layer { position: absolute; inset: 0; }
    .glow-mote {
      position: absolute;
      left: var(--sx, 0); top: var(--sy, 0);
      width: var(--size, 64px); height: var(--size, 64px);
      border-radius: 50%;
      background: radial-gradient(circle, var(--c1, rgba(226,149,67,0.45)) 0%, var(--c2, rgba(226,149,67,0.14)) 45%, transparent 75%);
      filter: blur(var(--blur, 10px));
      opacity: 0;
      will-change: transform, opacity;
      animation: moteDrift var(--dur, 38s) linear var(--delay, 0s) infinite;
    }
    @keyframes moteDrift {
      0%   { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; }
      10%  { opacity: var(--peak, 0.35); }
      50%  { transform: translate3d(var(--mx, 26vw), var(--my, -18vh), 0) scale(1.05); opacity: var(--peak, 0.35); }
      90%  { opacity: 0; }
      100% { transform: translate3d(var(--ex, 52vw), var(--ey, -36vh), 0) scale(0.9); opacity: 0; }
    }
    .glow-mote.glow-still {
      animation: moteBreathe var(--dur, 10s) ease-in-out var(--delay, 0s) infinite;
      opacity: var(--peak, 0.18);
    }
    @keyframes moteBreathe {
      0%, 100% { opacity: calc(var(--peak, 0.18) * 0.7); transform: scale(0.96); }
      50%      { opacity: var(--peak, 0.18); transform: scale(1.04); }
    }

    @media (prefers-reduced-motion: reduce) {
      #amb-glow .star-field-far,
      #amb-glow .star-field-near,
      #amb-glow .glow-mote,
      #amb-glow .glow-still { animation: none !important; opacity: 0.35 !important; }
    }

    /* dark-mode legibility / depth tweaks for a few shadow-heavy components */
    html.dark .evt:hover { box-shadow: 0 4px 22px rgba(0,0,0,0.55); }
    html.dark .evt.open { box-shadow: 0 0 0 3px rgba(226,149,67,0.22), 0 0 24px 6px rgba(226,149,67,0.2), 0 8px 32px rgba(0,0,0,0.4); }
    html.dark .trap-card:hover { box-shadow: 0 8px 28px rgba(226,149,67,0.18); }
    html.dark .card { box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
    html.dark .notes-modal { box-shadow: 0 40px 120px rgba(0,0,0,0.6); }
    html.dark mark.hi { background: rgba(226,149,67,0.3); outline-color: rgba(226,149,67,0.5); }
    html.dark .evt-inner ul li:hover { box-shadow: 0 2px 8px rgba(226,149,67,0.12); }

    /* ═══ READING PROGRESS BAR ═══ */
    #rdg-bar {
      position: fixed; top: 0; left: 0; height: 3px; width: 0%;
      background: linear-gradient(90deg, var(--saffron), var(--saffron-lt));
      z-index: 1000; transition: width 0.1s linear;
      border-radius: 0 3px 3px 0;
    }

    /* ═══ FLOATING SIDE CONTROLS (replaces topbar) ═══
       Small self-contained cluster pinned to the top-right corner —
       occupies only its own size, not the full viewport length.
       Search has been removed entirely.

       Visibility behaviour: idle state sits at reduced opacity so it
       doesn't compete with reading, but stays legible enough that its
       presence is obvious at a glance. Hovering (or focusing a control
       inside it, for keyboard users) brings it to full opacity and adds
       a saffron-tinted ring + slight lift so the state change is
       unmistakable. */
    #side-controls {
      position: fixed; top: 16px; right: 16px;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      background: var(--topbar-bg);
      backdrop-filter: blur(16px) saturate(140%);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg, 14px);
      padding: 10px 8px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.12);
      z-index: 950;
      opacity: 0.55;
      transition: opacity 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease),
                  transform 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease);
    }
    #side-controls:hover,
    #side-controls:focus-within {
      opacity: 1;
      transform: translateY(-2px);
      border-color: var(--saffron-glow, rgba(226,149,67,0.5));
      box-shadow: 0 10px 32px rgba(0,0,0,0.2), 0 0 0 1px var(--saffron-glow, rgba(226,149,67,0.35));
    }
    @media (prefers-reduced-motion: reduce) {
      #side-controls, #side-controls:hover, #side-controls:focus-within { transition: opacity 0.25s ease; transform: none; }
    }

    .tb-btn {
      width: 32px; height: 32px;
      border: 1px solid var(--rule);
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--ink-2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 14px;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
      flex-shrink: 0;
    }
    .tb-btn:hover { background: var(--parchment-2); border-color: var(--rule-2); }
    .tb-btn.active { background: var(--saffron-dim); color: var(--saffron); border-color: var(--saffron-glow); }

    #prog-chip {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      background: var(--parchment-2); border: 1px solid var(--rule);
      border-radius: 14px; padding: 6px 4px;
      font-family: var(--font-sans); font-size: 11px;
      color: var(--ink-2); flex-shrink: 0;
    }
    #prog-chip svg { display: block; }
    .cr-bg { stroke: var(--parchment-3); }
    .cr-fg { stroke: var(--saffron); stroke-dasharray: 56.5; stroke-dashoffset: 56.5; transition: stroke-dashoffset 0.7s var(--ease); }
    #prog-pct { font-weight: 700; color: var(--saffron); font-family: var(--font-mono); font-size: 10px; }

    /* ═══ LAYOUT ═══ */
    /* z-index bumped from 1 -> 850: #layout creates its own stacking context
       (position:relative + z-index), so #sidebar's z-index:800 was only ever
       being compared INSIDE #layout, not against #sb-overlay (a sibling of
       #layout at z-index:799, sitting directly in the body's root stacking
       context). That meant the overlay — at global level 799 — painted on
       top of the entire #layout box (sidebar included, despite its "800"),
       dimming the sidebar and swallowing every click before it could reach
       a sidebar link. 850 sits above the overlay (799) but below the topbar
       (900), so the open sidebar now renders above the overlay and is fully
       clickable again. */
    #layout { display: flex; min-height: 100vh; position: relative; z-index: 850; }

    /* ═══ SIDEBAR ═══ */
    #sidebar {
      width: 256px; flex-shrink: 0;
      position: fixed; top: 0; left: 0; bottom: 0;
      overflow-y: auto; overflow-x: hidden;
      border-right: 1px solid var(--rule);
      background: var(--surface);
      padding: 28px 0 60px;
      transition: transform 0.28s var(--ease);
      z-index: 800;
    }
    #sidebar::-webkit-scrollbar { width: 3px; }
    #sidebar::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 3px; }

    .sb-label {
      font-family: var(--font-sans);
      font-size: 9px; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-3); padding: 0 20px 12px;
    }
    .toc-link {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 7px 20px; cursor: pointer;
      font-family: var(--font-sans); font-size: 12.5px;
      color: var(--ink-2); line-height: 1.5;
      text-decoration: none;
      border-left: 2px solid transparent;
      transition: all 0.2s;
    }
    .toc-link:hover { background: var(--saffron-dim); color: var(--ink); border-left-color: var(--saffron-glow); }
    .toc-link.active { border-left-color: var(--saffron); color: var(--saffron); background: var(--saffron-dim); font-weight: 600; }
    .toc-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--rule-2); margin-top: 6px; flex-shrink: 0;
      transition: background 0.2s, transform 0.2s;
    }
    .toc-link.active .toc-dot { background: var(--saffron); transform: scale(1.5); }

    /* ── done + active: green styling wins, no bold (prevents line-wrap on long labels) ── */
    .toc-link.done.active {
      font-weight: 400;
      background: rgba(26,107,74,0.14);
      border-left-color: var(--viridian);
      color: var(--ink-2);
    }
    .toc-link.done.active .toc-dot { background: var(--viridian); transform: scale(1); }

    /* ── Completed / Mastered sidebar item ── */
    .toc-link.done {
      color: var(--ink-3);
      background: var(--viridian-dim);
      border-left-color: rgba(26,107,74,0.3);
      position: relative;
    }
    .toc-link.done:hover {
      background: rgba(26,107,74,0.14);
      border-left-color: var(--viridian);
      color: var(--ink-2);
    }
    /* Replace the dot with a ✓ checkmark badge */
    .toc-link.done .toc-dot {
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--viridian);
      transform: scale(1);
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      margin-top: 2px;
    }
    .toc-link.done .toc-dot::after {
      content: '✓';
      font-size: 9px;
      color: #fff;
      font-weight: 700;
      line-height: 1;
      font-family: system-ui, sans-serif;
    }
    /* Subtle strikethrough on label text */
    .toc-link.done .toc-label-text {
      text-decoration: line-through;
      text-decoration-color: rgba(26,107,74,0.45);
      text-decoration-thickness: 1px;
    }
    .toc-sep { height: 1px; background: var(--rule); margin: 12px 20px; }

    .sb-prog {
      margin: 20px 16px 0;
      background: var(--parchment-2);
      border: 1px solid var(--rule);
      border-radius: var(--r-lg);
      padding: 16px 18px;
      position: relative; overflow: hidden;
    }
    .sb-prog::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--saffron), var(--saffron-lt), var(--indigo));
    }
    .sb-prog-lbl { font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
    .sb-prog-pct { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--saffron); line-height: 1; }
    .sb-prog-sub { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
    .sb-track { margin-top: 12px; height: 3px; background: var(--parchment-3); border-radius: 3px; overflow: hidden; }
    #sb-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--saffron), var(--saffron-lt)); border-radius: 3px; transition: width 0.6s var(--ease); }

    #sb-toggle { display: none; }
    #sb-overlay { display: none; position: fixed; inset: 0; background: rgba(28,26,24,0.6); z-index: 799; }
    #sb-overlay.show { display: block; }

    /* ═══ MAIN ═══ */
    #main {
      margin-left: 256px; flex: 1; min-width: 0;
      padding: 52px 52px 120px;
      overflow-x: hidden;
    }
    body.focus #sidebar { transform: translateX(-100%); pointer-events: none; }
    body.focus #main { margin-left: 0; padding: 52px 96px 120px; }

    mark.hi {
      background: rgba(200,104,10,0.18);
      color: var(--ink);
      border-radius: 2px; padding: 0 2px;
      outline: 1px solid rgba(200,104,10,0.35);
    }

    /* ═══ HERO v2 — Archive Frontispiece ═══ */
    .hero {
      position: relative;
      padding: 38px 38px 42px;
      margin-bottom: 56px;
      border: 1px solid var(--rule);
      border-radius: var(--r-xl);
      background:
        radial-gradient(620px 320px at 88% -10%, var(--saffron-dim), transparent 60%),
        radial-gradient(520px 360px at -6% 115%, var(--indigo-dim), transparent 65%),
        var(--parchment-2);
      overflow: hidden;
      isolation: isolate;
    }
    .hero::before {
      content: "";
      position: absolute; inset: 0;
      background-image:
        linear-gradient(var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity: 0.35;
      mask-image: linear-gradient(to bottom, black, transparent 75%);
      pointer-events: none;
      z-index: 0;
    }
    .hero-blob { position: absolute !important; border-radius: 50%; filter: blur(54px); pointer-events: none; z-index: 0; }
    .hero-blob.a { width: 320px; height: 320px; top: -160px; right: -80px; background: var(--saffron-glow); opacity: 0.5; animation: heroBlobDriftA 14s ease-in-out infinite; }
    .hero-blob.b { width: 260px; height: 260px; bottom: -140px; left: -60px; background: var(--indigo-dim); opacity: 0.85; animation: heroBlobDriftB 17s ease-in-out infinite; }
    @keyframes heroBlobDriftA {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-26px, 22px) scale(1.12); }
    }
    @keyframes heroBlobDriftB {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(24px, -18px) scale(1.08); }
    }
    .hero::before { animation: heroGridDrift 22s linear infinite; }
    @keyframes heroGridDrift {
      0%   { background-position: 0 0, 0 0; }
      100% { background-position: 34px 34px, -34px 34px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-blob, .hero::before { animation: none !important; }
    }
    .hero > *:not(.hero-blob) { position: relative; z-index: 1; }

    .hero-sheen {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.10) 52%, transparent 65%);
      background-size: 240% 240%;
      background-position: -60% 0;
      animation: heroSheenSweep 9s ease-in-out infinite;
      mix-blend-mode: screen;
    }
    html.dark .hero-sheen { mix-blend-mode: overlay; opacity: 0.6; }
    @keyframes heroSheenSweep {
      0%   { background-position: -60% 0; }
      50%  { background-position: 60% 0; }
      100% { background-position: -60% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-sheen { animation: none !important; }
    }

    .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
    .hero-kicker {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-sans);
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--saffron);
      background: var(--card-saffron-bg);
      border: 1px solid rgba(200,104,10,0.22);
      padding: 6px 14px; border-radius: 20px;
      box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    }
    .hero-est {
      font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
      color: var(--ink-3); display: flex; align-items: center; gap: 6px;
    }
    .hero-est b { color: var(--indigo); font-weight: 700; }

    .hero h1 {
      font-family: var(--font-body);
      font-size: clamp(1.9rem, 4vw, 3rem);
      font-weight: 700;
      line-height: 1.2;
      color: var(--ink);
      margin-bottom: 14px;
      letter-spacing: 0.01em;
    }
    .hero h1 em { color: var(--saffron); font-style: normal; }
    .hero-lead {
      font-family: var(--font-sans);
      font-size: 14.5px; color: var(--ink-2);
      max-width: 660px; line-height: 1.8;
      margin-bottom: 24px;
    }

    /* twin "track" cards — Administration vs Freedom Struggle */
    .hero-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
    .hero-track {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px 16px; border-radius: var(--r-lg);
      border: 1px solid var(--rule);
      background: var(--surface);
      transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
    }
    .hero-track:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,0.25); }
    .hero-track.admin  { border-color: rgba(59,78,140,0.28); }
    .hero-track.admin:hover { border-color: var(--indigo); }
    .hero-track.freedom { border-color: rgba(200,104,10,0.3); }
    .hero-track.freedom:hover { border-color: var(--saffron); }
    .track-ico {
      flex: none; width: 38px; height: 38px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
    }
    .hero-track.admin .track-ico   { background: var(--indigo-dim); }
    .hero-track.freedom .track-ico { background: var(--saffron-dim); }
    .track-title { font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }
    .track-sub   { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); line-height: 1.5; }
    .track-sub strong { color: var(--ink-2); }

    .hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
    .chip {
      display: flex; align-items: center; gap: 10px;
      background: var(--surface); border: 1px solid var(--rule);
      border-radius: var(--r-md); padding: 9px 16px;
      font-family: var(--font-sans); font-size: 12px;
      color: var(--ink-2);
      transition: border-color 0.2s, background 0.2s, transform 0.2s;
    }
    .chip:hover { border-color: var(--saffron); background: var(--saffron-dim); transform: translateY(-1px); }
    .chip-ico {
      font-size: 16px; width: 30px; height: 30px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      background: var(--parchment-3); flex: none;
    }
    .chip-val { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1; }
    .chip-lbl { font-size: 10.5px; color: var(--ink-3); line-height: 1.2; }

    /* mini era timeline strip */
    .hero-tl { display: flex; align-items: center; gap: 0; }
    .hero-tl-rail {
      position: relative; flex: 1; height: 3px; border-radius: 3px;
      background: linear-gradient(90deg, var(--indigo) 0%, var(--saffron) 100%);
      margin: 0 4px;
    }
    .hero-tl-pt {
      position: relative; flex: none;
      font-family: var(--font-mono); font-size: 10px; font-weight: 600;
      color: var(--ink-3); white-space: nowrap;
      display: flex; flex-direction: column; align-items: center; gap: 5px;
    }
    .hero-tl-pt::before {
      content: ""; width: 7px; height: 7px; border-radius: 50%;
      background: var(--saffron); border: 2px solid var(--parchment-2);
      box-shadow: 0 0 0 1px var(--saffron);
      order: -1;
    }
    .hero-tl-pt.end::before { background: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
    .hero-tl-pt span.yr { color: var(--ink); font-size: 11px; }
    @media (max-width: 720px) {
      .hero { padding: 26px 20px 30px; }
      .hero-tracks { grid-template-columns: 1fr; }
      .hero-tl-pt { font-size: 0; }
      .hero-tl-pt span.yr { font-size: 10px; }
    }

    /* ═══ STUDY SECTION ═══ */
    .section {
      margin-bottom: 64px;
      opacity: 0; transform: translateY(24px);
      transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
    }
    .section.in { opacity: 1; transform: translateY(0); }

    .sec-hd {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 16px;
      margin-bottom: 28px;
    }
    .sec-meta { flex: 1; }
    .sec-eye {
      font-family: var(--font-sans);
      font-size: 12px; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-3); margin-bottom: 7px;
    }
    .sec-title {
      font-size: 1.3rem; font-weight: 700;
      color: var(--ink); line-height: 1.25;
    }
    .sec-sub {
      font-family: var(--font-sans);
      font-size: 13.5px; color: var(--ink-2);
      margin-top: 7px; line-height: 1.65; max-width: 620px;
    }

    .mstr-btn {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 16px;
      border-radius: var(--r-md);
      border: 1px solid var(--rule-2);
      background: var(--parchment-2);
      color: var(--ink-2);
      font-family: var(--font-sans); font-size: 11.5px; font-weight: 600;
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
      transition: all 0.25s var(--ease);
    }
    .mstr-btn:hover { border-color: var(--viridian); color: var(--viridian); background: var(--viridian-dim); }
    .mstr-btn.done { border-color: var(--viridian); color: var(--viridian); background: var(--viridian-dim); }
    .mstr-btn .chk { display: none; }
    .mstr-btn.done .chk { display: inline; }
    .section.mastered .sec-title { color: var(--ink-3); }
    .section.mastered .sec-body { opacity: 0.35; pointer-events: none; }

    /* ═══ DIVIDER BAND ═══ */
    .band {
      display: flex; align-items: center; gap: 12px;
      margin: 26px 0 20px; flex-wrap: wrap;
    }
    .band-line { flex: 1; height: 1.5px; background: var(--rule); min-width: 24px; }
    .band-pill {
      font-family: var(--font-sans);
      font-size: 13px; font-weight: 800;
      letter-spacing: 0.04em; text-transform: uppercase;
      white-space: nowrap; padding: 7px 20px;
      border-radius: 20px; flex-shrink: 0;
      box-shadow: 0 1px 5px rgba(28,26,24,0.06);
    }
    .band-pill.saffron { color: var(--saffron); background: var(--saffron-dim); border: 1px solid rgba(200,104,10,0.25); }
    .band-pill.indigo  { color: var(--indigo);  background: var(--indigo-dim);  border: 1px solid rgba(59,78,140,0.25); }
    .band-pill.crimson { color: var(--crimson); background: var(--crimson-dim); border: 1px solid rgba(160,32,32,0.25); }
    .band-pill.neutral { color: var(--ink-2); background: var(--parchment-2); border: 1px solid var(--rule); }
    .band-pill.viridian { color: var(--viridian); background: var(--viridian-dim); border: 1px solid rgba(26,107,74,0.25); }
    @media (max-width: 560px) {
      .band-pill { font-size: 11.5px; padding: 6px 14px; white-space: normal; text-align: center; line-height: 1.45; letter-spacing: 0.02em; }
      .band-line { min-width: 14px; }
    }

    /* ═══ COMMISSIONER BLOCK (multi-person sections) ═══ */
    .commissioner-block {
      position: relative;
      margin: 22px 0 28px;
      padding: 18px 18px 16px 20px;
      border: 1px solid var(--rule);
      border-left: 4px solid var(--rule-2);
      border-radius: var(--r-lg);
      background: var(--parchment-2);
    }
    .commissioner-block:first-of-type { margin-top: 4px; }
    .commissioner-block .timeline { margin-top: 14px; }
    .commissioner-head {
      display: flex; align-items: center; flex-wrap: wrap;
      gap: 12px 14px;
    }
    .commissioner-ord {
      flex-shrink: 0;
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      font-family: var(--font-mono); font-size: 14px; font-weight: 700;
      border: 2px solid currentColor;
      background: var(--surface);
    }
    .commissioner-info { flex: 1; min-width: 160px; }
    .commissioner-name {
      font-family: var(--font-sans); font-weight: 700; font-size: 15.5px;
      color: var(--ink); line-height: 1.35;
    }
    .commissioner-name .en {
      font-family: var(--font-mono); font-weight: 500; font-size: 12px;
      color: var(--ink-3); margin-left: 6px;
    }
    .commissioner-role {
      font-family: var(--font-sans); font-size: 11px; font-weight: 600;
      letter-spacing: 0.04em; color: var(--ink-3); margin-top: 2px;
    }
    .commissioner-tenure {
      flex-shrink: 0;
      font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
      letter-spacing: 0.03em;
      padding: 5px 14px; border-radius: 20px;
      background: var(--surface); border: 1px solid currentColor;
    }
    /* color variants — left border, ordinal circle & tenure pill all pick up theme color */
    .commissioner-block.saffron  { border-left-color: var(--saffron); }
    .commissioner-block.indigo   { border-left-color: var(--indigo); }
    .commissioner-block.crimson  { border-left-color: var(--crimson); }
    .commissioner-block.viridian { border-left-color: var(--viridian); }

    .commissioner-block.saffron  .commissioner-ord, .commissioner-block.saffron  .commissioner-tenure { color: var(--saffron); }
    .commissioner-block.indigo   .commissioner-ord, .commissioner-block.indigo   .commissioner-tenure { color: var(--indigo); }
    .commissioner-block.crimson  .commissioner-ord, .commissioner-block.crimson  .commissioner-tenure { color: var(--crimson); }
    .commissioner-block.viridian .commissioner-ord, .commissioner-block.viridian .commissioner-tenure { color: var(--viridian); }

    .commissioner-block.saffron  { background: var(--saffron-dim); }
    .commissioner-block.indigo   { background: var(--indigo-dim); }
    .commissioner-block.crimson  { background: var(--crimson-dim); }
    .commissioner-block.viridian { background: var(--viridian-dim); }

    @media (max-width: 640px) {
      .commissioner-tenure { order: 3; margin-left: 52px; }
    }

    /* ═══ ACCORDION TIMELINE ═══ */
    .timeline { display: flex; flex-direction: column; gap: 22px; }
    .evt {
      border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,0.45);
      background: rgba(255,255,255,0.5);
      backdrop-filter: blur(18px) saturate(180%);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      overflow: hidden;
      box-shadow: 0 4px 18px rgba(28,26,24,0.07), inset 0 1px 0 rgba(255,255,255,0.55);
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
    }
    .evt:hover { border-color: rgba(200,104,10,0.32); background: rgba(255,255,255,0.62); box-shadow: 0 8px 28px rgba(28,26,24,0.12), inset 0 1px 0 rgba(255,255,255,0.6); transform: translateY(-1px); }
    .evt.open { border-color: var(--saffron); background: rgba(255,255,255,0.68); box-shadow: 0 0 0 3px rgba(200,104,10,0.18), 0 0 24px 6px rgba(200,104,10,0.18), 0 8px 32px rgba(200,104,10,0.13), inset 0 1px 0 rgba(255,255,255,0.7); }
    /* dark mode — frosted glass over the night-sky ambient layer */
    html.dark .evt {
      border-color: rgba(237,231,220,0.1);
      background: rgba(70,61,52,0.38);
      box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    html.dark .evt:hover { border-color: rgba(226,149,67,0.35); background: rgba(70,61,52,0.5); box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06); }
    html.dark .evt.open { background: rgba(70,61,52,0.58); box-shadow: 0 0 0 1px rgba(226,149,67,0.16), 0 0 10px 1px rgba(226,149,67,0.1), 0 10px 36px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
    .evt-hd {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px; cursor: pointer;
      user-select: none; -webkit-user-select: none;
    }
    /* native focus ring reads fine on the light parchment surface, but
       clashes with the dark/glass tiles — keep it in light mode, drop it in dark */
    html.dark .evt-hd:focus,
    html.dark .evt-hd:focus-visible { outline: none; }
    .evt-yr {
      font-family: var(--font-mono); font-size: 10px; font-weight: 600;
      letter-spacing: 0.04em;
      background: var(--parchment-2); color: var(--saffron);
      border: 1px solid rgba(200,104,10,0.22);
      padding: 3px 9px; border-radius: var(--r-sm);
      white-space: nowrap; flex-shrink: 0;
    }
    .evt-yr.red    { color: var(--crimson);  border-color: rgba(160,32,32,0.25); }
    .evt-yr.green  { color: var(--viridian); border-color: rgba(26,107,74,0.25); }
    .evt-yr.indigo { color: var(--indigo);   border-color: rgba(59,78,140,0.25); }
    .evt-title {
      font-family: var(--font-sans);
      font-size: 14px; font-weight: 600;
      color: var(--ink); flex: 1; line-height: 1.4;
    }
    .evt-badge {
      font-family: var(--font-sans);
      font-size: 12px; font-weight: 700;
      background: var(--parchment-2); color: var(--ink-3);
      border: 1px solid var(--rule);
      padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
    }
    .evt-chv { color: var(--ink-3); transition: transform 0.3s var(--ease); flex-shrink: 0; font-size: 13px; }
    .evt.open .evt-chv { transform: rotate(180deg); }
    .evt-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
    .evt.open .evt-body { max-height: 3000px; }
    .evt-inner { padding: 0 16px 18px; border-top: 2px solid var(--parchment-3); background: var(--parchment-2); }
    .evt-inner ul { list-style: none; padding: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
    .evt-inner ul li {
      position: relative; padding: 10px 14px 10px 16px;
      font-family: var(--font-sans); font-size: 13.5px;
      color: var(--ink-2); line-height: 1.7;
      background: var(--surface); border-radius: var(--r-md);
      border: 1px solid var(--rule);
      border-left: 3px solid var(--rule-2);
      box-shadow: 0 1px 3px rgba(28,26,24,0.04);
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .evt-inner ul li:hover { border-left-color: var(--saffron); background: var(--surface-warm-hover); box-shadow: 0 2px 8px rgba(200,104,10,0.08); }
    .evt-inner ul li strong { color: var(--ink); font-weight: 600; }
    .evt-inner p { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); padding-top: 12px; line-height: 1.75; }
    .evt-inner p strong { color: var(--ink); }

    /* highlight & note boxes inside events */
    .evt-hl {
      margin-top: 16px; padding: 13px 16px;
      background: var(--viridian-dim);
      border-radius: var(--r-md); border: 1px solid rgba(26,107,74,0.2);
      display: flex; gap: 10px; align-items: flex-start;
    }
    .evt-hl-badge { font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--viridian); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px; }
    .evt-hl-body { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
    .evt-hl-body strong { color: var(--ink); }

    /*
    ╔══════════════════════════════════════════════════════════════════════╗
    ║  IMP-FOCUS  —  अति महत्त्वपूर्ण परीक्षा-केन्द्रित callout          ║
    ║  Use this style for HIGH-PRIORITY exam facts that need to STAND OUT  ║
    ║  from all other boxes (PYQ, trap-card, evt-hl, sidenote etc.)        ║
    ║                                                                      ║
    ║  AI INSTRUCTION — जब भी कोई imp-focus point add करना हो तो          ║
    ║  नीचे दिए HTML template को copy करो और content fill करो।            ║
    ║  CSS पहले से file में है — कोई नई style ADD मत करो।                 ║
    ║                                                                      ║
    ║  TEMPLATE:                                                           ║
    ║  <div class="imp-focus">                                             ║
    ║    <div class="imp-focus-header">                                    ║
    ║      <span class="imp-focus-icon">🔴</span>                          ║
    ║      <span class="imp-focus-badge">अति महत्त्वपूर्ण — परीक्षा केन्द्रित</span>║
    ║      <span class="imp-focus-year">YEAR ई०</span>                     ║
    ║    </div>                                                            ║
    ║    <div class="imp-focus-body">                                      ║
    ║      <strong>शीर्षक/घटना:</strong> विवरण। <em>हाइलाइट वाक्यांश</em>॥║
    ║    </div>                                                            ║
    ║  </div>                                                              ║
    ║                                                                      ║
    ║  RULES:                                                              ║
    ║  • imp-focus-body > strong  → dark ink (heading/event name)         ║
    ║  • imp-focus-body > em      → orange-rose accent (key phrase highlight) ║
    ║  • imp-focus-year           → top-right mono year stamp              ║
    ║  • Do NOT nest inside evt-hl or trap-card — use standalone           ║
    ╚══════════════════════════════════════════════════════════════════════╝
    */

    /* ── IMP-FOCUS — high-priority callout, visually distinct ── */
    .imp-focus {
      position: relative;
      margin-top: 18px;
      padding: 16px 18px 16px 20px;
      background: linear-gradient(120deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      border-radius: 10px;
      border-left: 4px solid #e94560;
      box-shadow: 0 6px 32px rgba(233,69,96,0.22), 0 2px 8px rgba(0,0,0,0.28);
      overflow: hidden;
    }
    .imp-focus::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 140px; height: 140px;
      background: radial-gradient(circle, rgba(233,69,96,0.25) 0%, transparent 70%);
      pointer-events: none;
    }
    .imp-focus::after {
      content: '';
      position: absolute;
      bottom: -30px; left: 30px;
      width: 100px; height: 100px;
      background: radial-gradient(circle, rgba(83,148,255,0.18) 0%, transparent 70%);
      pointer-events: none;
    }
    html.dark .imp-focus {
      background: linear-gradient(120deg, #0d0d1a 0%, #111827 50%, #0a1f3d 100%);
      box-shadow: 0 6px 36px rgba(233,69,96,0.28), 0 2px 8px rgba(0,0,0,0.45);
    }
    .imp-focus-header {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 9px;
    }
    .imp-focus-icon {
      font-size: 17px; line-height: 1; flex-shrink: 0;
    }
    .imp-focus-badge {
      font-family: var(--font-sans); font-size: 10.5px; font-weight: 800;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: #e94560;
      background: rgba(233,69,96,0.15);
      border: 1px solid rgba(233,69,96,0.35);
      border-radius: 4px;
      padding: 2px 9px;
    }
    html.dark .imp-focus-badge {
      color: #ff6b81;
      background: rgba(233,69,96,0.18);
      border-color: rgba(233,69,96,0.40);
    }
    .imp-focus-year {
      margin-left: auto;
      font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
      color: rgba(255,255,255,0.45);
    }
    html.dark .imp-focus-year { color: rgba(255,255,255,0.40); }
    .imp-focus-body {
      font-family: var(--font-sans); font-size: 14px;
      color: rgba(255,255,255,0.82); line-height: 1.78;
    }
    .imp-focus-body strong { color: #ffffff; font-weight: 700; }
    .imp-focus-body em {
      font-style: normal;
      color: #5394ff; font-weight: 600;
    }
    html.dark .imp-focus-body em { color: #7eb3ff; }

    /* administrative-boundary side note: compact date-led ledger for
       district/commissionery re-organisation facts, designed to be scanned
       fast — big mono year tags on the left, crisp single-line facts on the right */
    .admin-sidenote {
      margin-top: 16px; border-radius: var(--r-lg);
      border: 1px solid rgba(59,78,140,0.22);
      background: linear-gradient(180deg, var(--indigo-dim), var(--surface) 55%);
      overflow: hidden;
    }
    .admin-sidenote-head {
      display: flex; align-items: center; gap: 9px;
      padding: 11px 16px; background: var(--indigo-dim);
      border-bottom: 1px solid rgba(59,78,140,0.18);
      cursor: pointer; user-select: none;
    }
    .admin-sidenote-head:focus-visible { outline: 2px solid var(--indigo-lt); outline-offset: -2px; }
    html.dark .admin-sidenote-head:focus,
    html.dark .admin-sidenote-head:focus-visible { outline: none; }
    .admin-sidenote-head .icon {
      font-size: 15px; flex-shrink: 0; line-height: 1;
    }
    .admin-sidenote-head .ttl {
      font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
      color: var(--indigo); letter-spacing: 0.05em;
    }
    .admin-sidenote-head .sub {
      font-family: var(--font-sans); font-size: 11px;
      color: var(--ink-3); margin-left: auto; flex-shrink: 0;
    }
    .admin-sidenote-head .admin-chv {
      color: var(--indigo); flex-shrink: 0; font-size: 12px;
      transition: transform 0.3s var(--ease); margin-left: 6px;
    }
    .admin-sidenote.open .admin-chv { transform: rotate(180deg); }
    .admin-sidenote-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
    .admin-sidenote.open .admin-sidenote-body { max-height: 2000px; }
    .admin-sidenote-list { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; }
    .admin-row {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 8px 10px; border-radius: var(--r-md);
      background: var(--surface); border: 1px solid var(--rule);
      border-left: 3px solid var(--indigo-lt);
      transition: border-color 0.2s, background 0.2s, transform 0.15s;
    }
    .admin-row:hover { border-left-color: var(--saffron); background: var(--surface-warm-hover); transform: translateX(2px); }
    .admin-row .yr {
      font-family: var(--font-mono); font-size: 12px; font-weight: 700;
      color: var(--indigo); background: var(--indigo-dim);
      border: 1px solid rgba(59,78,140,0.25);
      padding: 3px 8px; border-radius: var(--r-sm);
      white-space: nowrap; flex-shrink: 0; min-width: 48px; text-align: center;
    }
    .admin-row .pt {
      font-family: var(--font-sans); font-size: 13px; line-height: 1.6;
      color: var(--ink-2); padding-top: 1px;
    }
    .admin-row .pt strong { color: var(--ink); font-weight: 600; }
    .admin-row.is-focus { border-left-color: var(--crimson); background: var(--crimson-dim); }
    .admin-row.is-focus .yr { color: var(--crimson); background: var(--crimson-dim); border-color: rgba(160,32,32,0.3); }

    .evt-note {
      margin-top: 12px; padding: 9px 13px;
      background: rgba(200,104,10,0.07);
      border-radius: var(--r-sm); border-left: 3px solid var(--saffron);
      font-family: var(--font-sans); font-size: 13px;
      color: var(--ink-2); line-height: 1.65;
    }
    .evt-note strong { color: var(--ink); }
    .evt-note-red {
      margin-top: 12px; padding: 9px 13px;
      background: var(--crimson-dim);
      border-radius: var(--r-sm); border-left: 3px solid var(--crimson);
      font-family: var(--font-sans); font-size: 13px;
      color: var(--ink-2); line-height: 1.65;
    }
    .evt-note-red strong { color: var(--ink); }

    /* ═══ SIDE NOTE (बोनस / अतिरिक्त तथ्य) ═══ */
    .sidenote {
      margin-top: 16px; padding: 14px 18px 14px 46px;
      background: repeating-linear-gradient(135deg, rgba(200,104,10,0.055) 0px, rgba(200,104,10,0.055) 9px, rgba(160,32,32,0.025) 9px, rgba(160,32,32,0.025) 18px);
      border: 1px dashed rgba(160,32,32,0.35);
      border-radius: var(--r-lg);
      position: relative;
    }
    .sidenote::before {
      content: '📌'; position: absolute; left: 14px; top: 14px;
      font-size: 16px; line-height: 1;
    }
    .sidenote + .sidenote { margin-top: 10px; }
    .sidenote-badge {
      font-family: var(--font-sans); font-size: 12px; font-weight: 800;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--crimson); margin-bottom: 6px;
    }
    .sidenote-body { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }
    .sidenote-body strong { color: var(--ink); }

    /* ═══ QUOTE CARD (महत्वपूर्ण उद्धरण साइड नोट) ═══ */
    .quote-card {
      margin-top: 16px; padding: 20px 22px 18px 56px;
      background: linear-gradient(135deg, var(--indigo-dim) 0%, rgba(160,32,32,0.05) 100%);
      border: 1px solid rgba(59,78,140,0.2);
      border-radius: var(--r-lg);
      position: relative; overflow: hidden;
    }
    .quote-card::before {
      content: '\201C'; position: absolute; top: -22px; left: 6px;
      font-family: Georgia, 'Times New Roman', serif; font-size: 92px; line-height: 1;
      color: var(--indigo); opacity: 0.16; font-style: normal;
    }
    .quote-card-badge {
      font-family: var(--font-sans); font-size: 12px; font-weight: 800;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--indigo);
      margin-bottom: 9px; position: relative; z-index: 1;
    }
    .quote-card-text {
      font-family: var(--font-body); font-style: italic; font-size: 15.5px;
      color: var(--ink); line-height: 1.95; position: relative; z-index: 1;
      border-left: 3px solid var(--indigo); padding-left: 14px;
    }
    .quote-card-foot {
      margin-top: 12px; font-family: var(--font-sans); font-size: 12.5px;
      color: var(--ink-2); line-height: 1.75; position: relative; z-index: 1;
    }
    .quote-card-foot strong { color: var(--ink); }
    @media (max-width: 640px) {
      .sidenote { padding-left: 38px; }
      .quote-card { padding: 18px 16px 16px 42px; }
      .quote-card::before { font-size: 70px; left: 2px; top: -16px; }
    }

    /* ═══ KEY-VALUE ROWS ═══ */
    .kv { padding: 9px 0; border-bottom: 1px solid var(--parchment-3); display: flex; gap: 10px; font-size: 13.5px; line-height: 1.65; }
    .kv:last-child { border-bottom: none; }
    .kv-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--saffron); min-width: 150px; flex-shrink: 0; padding-top: 2px; letter-spacing: 0.02em; }
    .kv-v { font-family: var(--font-sans); color: var(--ink-2); }
    .kv-v strong { color: var(--ink); font-weight: 600; }

    /* ═══ CALLOUT CARDS ═══ */
    .cards { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
    .card {
      background: var(--surface); border: 1px solid var(--rule);
      border-radius: var(--r-md); padding: 15px 18px;
      border-left-width: 4px;
      box-shadow: 0 1px 4px rgba(28,26,24,0.05);
    }
    .card.saffron { border-left-color: var(--saffron); border-color: rgba(200,104,10,0.22); background: var(--card-saffron-bg); }
    .card.indigo  { border-left-color: var(--indigo); border-color: rgba(59,78,140,0.22); background: var(--card-indigo-bg); }
    .card.crimson { border-left-color: var(--crimson); border-color: rgba(160,32,32,0.22); background: var(--card-crimson-bg); }
    .card.viridian{ border-left-color: var(--viridian); border-color: rgba(26,107,74,0.22); background: var(--card-viridian-bg); }
    .card.amber   { border-left-color: var(--saffron-lt); border-color: rgba(244,165,72,0.28); background: var(--card-amber-bg); }
    .card-lbl {
      font-family: var(--font-sans);
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: 7px;
    }
    .card.saffron .card-lbl { color: var(--saffron); }
    .card.indigo  .card-lbl { color: var(--indigo); }
    .card.crimson .card-lbl { color: var(--crimson); }
    .card.viridian .card-lbl { color: var(--viridian); }
    .card.amber   .card-lbl { color: var(--amber-text); }
    .card-body {
      font-family: var(--font-sans);
      font-size: 13.5px; color: var(--ink-2); line-height: 1.75;
    }
    .card-body strong { color: var(--ink); font-weight: 600; }
    .card-body ul { list-style: none; padding: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }

    /* 2-col grid */
    .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    /* ═══ TABLE ═══ */
    .tbl-wrap {
      overflow-x: auto; border-radius: var(--r-lg);
      border: 1px solid var(--rule);
      -webkit-overflow-scrolling: touch;
    }
    table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
    thead tr { background: var(--parchment-2); border-bottom: 1px solid var(--rule-2); }
    thead th {
      padding: 12px 16px; text-align: left;
      font-family: var(--font-sans);
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--ink-3); white-space: nowrap;
    }
    tbody tr { border-bottom: 1px solid var(--parchment-3); transition: background 0.15s; }
    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: var(--saffron-dim); }
    tbody td {
      padding: 11px 16px; color: var(--ink-2);
      font-family: var(--font-sans);
      vertical-align: top; line-height: 1.6;
    }
    tbody td:first-child { font-family: var(--font-mono); font-weight: 600; color: var(--saffron); white-space: nowrap; font-size: 12px; }
    tbody td strong { color: var(--ink); font-weight: 600; }
    tr.hl-row { background: rgba(200,104,10,0.06); }
    tr.hl-row:hover { background: rgba(200,104,10,0.1); }
    .subfact-list { list-style: none; padding: 0; margin: 8px 0 0 0; display: flex; flex-direction: column; gap: 5px; }
    .subfact-list li {
      font-size: 12.5px; color: var(--ink-2);
      padding: 5px 10px 5px 12px;
      border-left: 2px solid var(--indigo-lt);
      background: var(--indigo-dim);
      border-radius: 0 var(--r-sm) var(--r-sm) 0;
      line-height: 1.6;
    }
    .subfact-list li .sf-yr {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700;
      color: var(--indigo); background: rgba(59,78,140,0.15);
      padding: 1px 6px; border-radius: 3px; margin-right: 6px;
    }
    tr.dng-row { background: rgba(160,32,32,0.05); }
    tr.dng-row td:first-child { color: var(--crimson); }

    /* ═══ TRAP CARDS (परीक्षा जाल) ═══ */
    .trap-grid { display: grid; gap: 14px; }
    .trap-card {
      border-radius: var(--r-lg);
      border: 1px solid rgba(200,104,10,0.18);
      background: rgba(200,104,10,0.03);
      padding: 18px 20px;
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      position: relative; overflow: hidden;
    }
    .trap-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--saffron), transparent);
      opacity: 0; transition: opacity 0.2s;
    }
    .trap-card:hover { border-color: rgba(200,104,10,0.35); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,104,10,0.07); }
    .trap-card:hover::before { opacity: 1; }
    .trap-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
    .trap-num {
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      background: rgba(200,104,10,0.12); color: var(--saffron);
      border: 1px solid rgba(200,104,10,0.28);
      padding: 3px 9px; border-radius: 20px;
      flex-shrink: 0; margin-top: 2px;
    }
    .trap-title { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
    .trap-body { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
    .trap-body strong { color: var(--ink); font-weight: 600; }
    .trap-body ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; }

    /* ═══ REVISION BLOCK ═══ */
    .rev-block {
      background: linear-gradient(135deg, rgba(200,104,10,0.06), rgba(59,78,140,0.05));
      border: 1px solid rgba(200,104,10,0.2);
      border-radius: var(--r-xl);
      padding: 28px 32px;
      position: relative; overflow: hidden;
    }
    .rev-block::after { content: '⭐'; position: absolute; right: 24px; top: 20px; font-size: 34px; opacity: 0.12; }
    .rev-title {
      font-family: var(--font-sans); font-size: 10.5px;
      font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--saffron); margin-bottom: 20px;
    }
    .rev-items { display: flex; flex-direction: column; gap: 8px; }
    .rev-item {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 10px 14px; background: var(--surface);
      border-radius: var(--r-md); border: 1px solid var(--rule);
      font-family: var(--font-sans); font-size: 13.5px;
      color: var(--ink-2); line-height: 1.65;
      transition: border-color 0.2s;
    }
    .rev-item:hover { border-color: var(--saffron); }
    .rev-dt {
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      color: var(--saffron); min-width: 140px; flex-shrink: 0; padding-top: 2px;
    }
    .rev-item strong { color: var(--ink); font-weight: 600; }

    /* ═══ HORIZONTAL RULE ═══ */
    .section-hr { height: 1px; background: linear-gradient(90deg, transparent, var(--rule-2), transparent); margin: 56px 0; }

    /* ═══ FADE-IN ANIMATIONS ═══ */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes pulseSaffron { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px var(--saffron-dim); } }
    .section.in .evt { animation: fadeUp 0.4s var(--ease) both; }
    .section.in .evt:nth-child(1) { animation-delay: 0.04s; }
    .section.in .evt:nth-child(2) { animation-delay: 0.08s; }
    .section.in .evt:nth-child(3) { animation-delay: 0.12s; }
    .section.in .evt:nth-child(4) { animation-delay: 0.16s; }
    .section.in .evt:nth-child(5) { animation-delay: 0.20s; }
    .section.in .evt:nth-child(n+6) { animation-delay: 0.24s; }
    .mstr-btn.done { animation: pulseSaffron 0.6s ease; }

    /* ═══ SELF-TEST TABLE BLUR FEATURE ═══ */
    .st-toolbar {
      display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
      background: var(--parchment-2); border: 1px solid var(--rule-2);
      border-radius: var(--r-md); padding: 11px 16px; margin-bottom: 14px;
    }
    .st-label {
      font-family: var(--font-sans); font-size: 10px; font-weight: 700;
      letter-spacing: 0.09em; text-transform: uppercase;
      color: var(--ink-3); flex-shrink: 0;
    }
    .st-sep { width: 1px; height: 22px; background: var(--rule-2); flex-shrink: 0; }
    .st-col-btn {
      padding: 5px 12px; border-radius: var(--r-sm);
      border: 1px solid var(--rule-2); background: var(--parchment);
      color: var(--ink-2); font-family: var(--font-sans);
      font-size: 11.5px; font-weight: 600; cursor: pointer;
      transition: all 0.2s;
    }
    .st-col-btn:hover { border-color: var(--saffron); color: var(--saffron); background: var(--saffron-dim); }
    .st-col-btn.active { background: rgba(160,32,32,0.09); border-color: var(--crimson); color: var(--crimson); box-shadow: 0 0 0 2px rgba(160,32,32,0.1); }
    .st-shuffle-btn, .st-reset-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 12px; border-radius: var(--r-sm);
      border: 1px solid var(--rule-2); background: var(--parchment);
      color: var(--ink-2); font-family: var(--font-sans);
      font-size: 11.5px; font-weight: 600; cursor: pointer;
      transition: all 0.2s;
    }
    .st-shuffle-btn:hover, .st-reset-btn:hover { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-dim); }
    .st-hint {
      margin-left: auto; font-size: 11.5px; color: var(--ink-3);
      font-family: var(--font-sans); display: none;
    }

    /* blur overlay on table cells */
    table.st-tbl.blur-c0 td:nth-child(1),
    table.st-tbl.blur-c1 td:nth-child(2),
    table.st-tbl.blur-c2 td:nth-child(3),
    table.st-tbl.blur-c3 td:nth-child(4) { position: relative; }

    table.st-tbl.blur-c0 td:nth-child(1)::after,
    table.st-tbl.blur-c1 td:nth-child(2)::after,
    table.st-tbl.blur-c2 td:nth-child(3)::after,
    table.st-tbl.blur-c3 td:nth-child(4)::after {
      content: ''; position: absolute; inset: 0;
      background: var(--parchment-2);
      backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
      cursor: pointer; z-index: 2; border-radius: 2px;
    }
    table.st-tbl td.st-revealed::after { display: none !important; }
    table.st-tbl td.st-revealed { background: rgba(200,104,10,0.08) !important; transition: background 0.2s; }

    /* ═══ RESPONSIVE ═══ */
    @media (max-width: 900px) {
      #sidebar { transform: translateX(-100%); }
      #sidebar.open { transform: translateX(0); }
      #sb-toggle { display: flex !important; }
      #main { margin-left: 0; padding: 64px 7px 80px; }
      body.focus #main { padding: 64px 7px 80px; }
      .g2 { grid-template-columns: 1fr; }
      .sec-hd { flex-direction: column; }

      /* ── Mobile: the floating, opacity-fading dock isn't usable on
         touch (no hover to reveal it), so on small screens it becomes
         a plain, always-visible top bar instead — full width, pinned
         to the very top, hamburger on the left, everything else on
         the right. No fade, no hover-lift, no glow-on-hover; it's just
         a normal header now. */
      #side-controls {
        top: 0; left: 0; right: 0; width: 100%;
        flex-direction: row; align-items: center; justify-content: flex-end;
        gap: 10px;
        border-radius: 0; border: none; border-bottom: 1px solid var(--rule);
        padding: 8px 12px;
        opacity: 1;
        transform: none;
        box-shadow: 0 2px 14px rgba(0,0,0,0.08);
      }
      #side-controls:hover,
      #side-controls:focus-within {
        opacity: 1;
        transform: none;
        border-color: var(--rule);
        box-shadow: 0 2px 14px rgba(0,0,0,0.08);
      }
      #sb-toggle { margin-right: auto; }
      #prog-chip { flex-direction: row; padding: 4px 10px; gap: 6px; }
    }
    @media (max-width: 480px) {
      #main { padding: 58px 7px 70px; }
      .rev-item { flex-direction: column; gap: 4px; }
      .rev-dt { min-width: auto; }
      .kv { flex-direction: column; gap: 2px; }
      .hero h1 { font-size: 1.7rem; }
      #side-controls { padding: 7px 10px; gap: 8px; }
    }
     /* ═══ MODAL OPEN BUTTON ═══ */
    .modal-open-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 14px;
      border-radius: 20px;
      border: 1px solid rgba(160,32,32,0.35);
      background: var(--crimson-dim);
      color: var(--crimson);
      font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
      cursor: pointer; white-space: nowrap; flex-shrink: 0;
      letter-spacing: 0.03em;
      transition: all 0.22s var(--ease);
    }
    .modal-open-btn:hover { background: rgba(160,32,32,0.18); border-color: var(--crimson); box-shadow: 0 2px 10px rgba(160,32,32,0.15); transform: translateY(-1px); }
    @media (max-width: 640px) {
      /* These buttons carry long Hindi labels and sit inline next to titles
         inside flex rows (.evt-hd / .sec-title) that don't wrap. On phones
         that pushed the button (and sometimes the whole row) past the
         viewport edge — clipped/unclickable rather than just ugly, since
         several ancestors (.evt, .admin-sidenote) use overflow:hidden.
         Letting the label wrap and giving the row itself flex-wrap fixes it
         without touching any per-button markup. */
      .modal-open-btn {
        white-space: normal; text-align: left; flex-shrink: 1;
        font-size: 11px; padding: 5px 11px;
      }
      .evt-hd, .sec-title, .admin-sidenote-hd { flex-wrap: wrap; }
      /* .evt-title had `flex:1` with the default flex-basis:0 + min-width:auto.
         Flexbox's "automatic minimum size" for a flex:1 item is its
         min-content width — for Devanagari text that's roughly one word.
         So next to a long nowrap date badge (.evt-yr, e.g. "30 सितंबर 1916")
         and a button, the algorithm preferred shrinking the title down to
         that one-word minimum (a tall, narrow, near-unreadable column)
         rather than wrapping the row — flex-wrap only kicks in once an
         item truly can't shrink any further. Giving the title an explicit
         min-width forces the row to wrap normally instead, with the title
         flowing onto its own full-width line. */
      .evt-title { flex: 1 1 180px; min-width: 180px; }
    }

    /* ═══ MODALS ═══ */
    .notes-modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 2000;
      background: var(--modal-overlay-bg);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      align-items: center; justify-content: center;
      padding: 28px 16px;
    }
    .notes-modal-overlay.open { display: flex; }
    .notes-modal {
      background: var(--parchment);
      border: 1px solid var(--rule);
      border-radius: var(--r-xl);
      width: 100%; max-width: 1240px;
      max-height: calc(100vh - 32px);
      display: flex; flex-direction: column;
      box-shadow: 0 40px 120px rgba(28,26,24,0.32);
      position: relative;
      animation: modalIn 0.3s var(--ease) both;
      overflow: hidden;
    }
    @keyframes modalIn { from { opacity:0; transform:translateY(24px) scale(0.98); } to { opacity:1; transform:none; } }
    .nm-header {
      padding: 26px 40px 18px;
      border-bottom: 1px solid var(--rule);
      display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--saffron-dim) 0%, var(--parchment) 60%);
      border-radius: var(--r-xl) var(--r-xl) 0 0;
    }
    .nm-title { font-family: var(--font-body); font-size: 1.45rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
    .nm-subtitle { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-3); margin-top: 5px; letter-spacing: 0.04em; }
    .nm-close {
      width: 38px; height: 38px; flex-shrink: 0;
      border: 1px solid var(--rule); border-radius: var(--r-sm);
      background: var(--parchment-2); color: var(--ink-2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 17px;
      transition: background 0.2s, color 0.2s;
    }
    .nm-close:hover { background: var(--crimson-dim); color: var(--crimson); border-color: rgba(160,32,32,0.3); }
    .nm-body { padding: 32px 40px 44px; overflow-y: auto; flex: 1; column-width: 540px; column-gap: 40px; }
    .nm-body > * { column-break-inside: avoid; }

    /* Modal section title — redesigned, cleaner */
    .nm-section-title {
      font-family: var(--font-sans); font-size: 10px; font-weight: 800;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--saffron); margin: 28px 0 12px;
      padding-left: 10px;
      border-left: 3px solid var(--saffron);
    }
    .nm-section-title:first-child { margin-top: 0; }

    /* Modal fact list */
    .nm-ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .nm-ul li {
      padding: 9px 14px 9px 16px;
      font-family: var(--font-sans); font-size: 13.5px;
      color: var(--ink-2); line-height: 1.75;
      background: var(--surface); border-radius: var(--r-md);
      border-left: 2px solid var(--rule);
    }
    .nm-ul li strong { color: var(--ink); font-weight: 600; }
    .nm-ul li:hover { border-left-color: var(--saffron); background: var(--saffron-dim); }

    /* Modal info grid (new) */
    .nm-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
    }
    .nm-grid-cell {
      background: var(--surface); border: 1px solid var(--rule);
      border-radius: var(--r-md); padding: 11px 16px;
    }
    .nm-grid-cell-label {
      font-family: var(--font-sans); font-size: 16px; font-weight: 800;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--saffron); margin-bottom: 4px;
    }
    .nm-grid-cell-label.indigo { color: var(--indigo); }
    .nm-grid-cell-label.viridian { color: var(--viridian); }
    .nm-grid-cell-value {
      font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
      color: var(--ink); line-height: 1.4;
    }
    .nm-grid-full {
      background: var(--surface); border: 1px solid var(--rule);
      border-radius: var(--r-md); padding: 11px 16px;
      margin-bottom: 10px;
    }

    /* Modal quote block (new) */
    .nm-quote {
      margin: 14px 0; padding: 16px 20px 14px 52px;
      background: linear-gradient(135deg, var(--indigo-dim) 0%, rgba(160,32,32,0.04) 100%);
      border: 1px solid rgba(59,78,140,0.18);
      border-radius: var(--r-lg); position: relative; overflow: hidden;
    }
    .nm-quote::before {
      content: '\201C'; position: absolute; top: -18px; left: 8px;
      font-family: Georgia, serif; font-size: 80px; line-height: 1;
      color: var(--indigo); opacity: 0.18;
    }
    .nm-quote-text {
      font-family: var(--font-body); font-style: italic; font-size: 15px;
      color: var(--ink); line-height: 1.9;
      border-left: 3px solid var(--indigo); padding-left: 14px;
    }
    .nm-quote-attr {
      font-family: var(--font-sans); font-size: 12px; color: var(--ink-2);
      margin-top: 9px; padding-left: 17px;
    }

    /* Modal timeline strip (new, for adhiveshan) */
    .nm-timeline { display: flex; flex-direction: column; gap: 0; margin: 10px 0; }
    .nm-tl-item {
      display: flex; gap: 0; align-items: stretch;
    }
    .nm-tl-left {
      display: flex; flex-direction: column; align-items: center;
      width: 52px; flex-shrink: 0;
    }
    .nm-tl-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--saffron); border: 2px solid var(--parchment);
      box-shadow: 0 0 0 2px var(--saffron);
      flex-shrink: 0; margin-top: 14px; z-index: 1;
    }
    .nm-tl-line {
      width: 2px; flex: 1; background: var(--rule);
      margin: 0 auto;
    }
    .nm-tl-item:last-child .nm-tl-line { display: none; }
    .nm-tl-right {
      flex: 1; padding: 10px 0 18px 12px;
    }
    .nm-tl-yr {
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      color: var(--saffron); letter-spacing: 0.06em;
      background: var(--saffron-dim); border: 1px solid rgba(200,104,10,0.22);
      padding: 2px 8px; border-radius: var(--r-sm);
      display: inline-block; margin-bottom: 5px;
    }
    .nm-tl-yr.indigo { color: var(--indigo); background: var(--indigo-dim); border-color: rgba(59,78,140,0.22); }
    .nm-tl-yr.viridian { color: var(--viridian); background: var(--viridian-dim); border-color: rgba(26,107,74,0.22); }
    .nm-tl-yr.crimson { color: var(--crimson); background: var(--crimson-dim); border-color: rgba(160,32,32,0.22); }
    .nm-tl-place {
      font-family: var(--font-sans); font-size: 14px; font-weight: 700;
      color: var(--ink); line-height: 1.3; margin-bottom: 3px;
    }
    .nm-tl-president {
      font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2);
    }
    .nm-tl-note {
      font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2);
      font-style: italic; margin-top: 3px; line-height: 1.6;
    }
    .nm-tl-note strong { color: var(--crimson); font-style: normal; }

    /* Modal sidenote */
    .nm-sidenote {
      margin: 14px 0; padding: 13px 18px 13px 46px;
      background: repeating-linear-gradient(135deg, rgba(200,104,10,0.055) 0px, rgba(200,104,10,0.055) 9px, rgba(160,32,32,0.025) 9px, rgba(160,32,32,0.025) 18px);
      border: 1px dashed rgba(160,32,32,0.35);
      border-radius: var(--r-lg); position: relative;
    }
    .nm-sidenote::before { content:'📌'; position:absolute; left:14px; top:13px; font-size:16px; }
    .nm-sidenote-badge { font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson); margin-bottom: 6px; }
    .nm-sidenote-body { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }
    .nm-sidenote-body strong { color: var(--ink); }

    /* Modal note boxes */
    .nm-note {
      margin: 10px 0; padding: 9px 13px;
      background: rgba(200,104,10,0.07);
      border-radius: var(--r-sm); border-left: 3px solid var(--saffron);
      font-family: var(--font-sans); font-size: 13.5px;
      color: var(--ink-2); line-height: 1.7;
    }
    .nm-note strong { color: var(--ink); }
    .nm-note-red {
      margin: 10px 0; padding: 9px 13px;
      background: var(--crimson-dim);
      border-radius: var(--r-sm); border-left: 3px solid var(--crimson);
      font-family: var(--font-sans); font-size: 13.5px;
      color: var(--ink-2); line-height: 1.7;
    }
    .nm-note-red strong { color: var(--ink); }
    .nm-note-indigo {
      margin: 10px 0; padding: 9px 13px;
      background: var(--indigo-dim);
      border-radius: var(--r-sm); border-left: 3px solid var(--indigo);
      font-family: var(--font-sans); font-size: 13.5px;
      color: var(--ink-2); line-height: 1.7;
    }
    .nm-note-indigo strong { color: var(--indigo); }

    /* Modal table */
    .nm-tbl-wrap { overflow-x: auto; margin: 12px 0 16px; border-radius: var(--r-md); border: 1px solid var(--rule); }
    .nm-tbl-wrap table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13.5px; }
    .nm-tbl-wrap th { background: var(--parchment-2); color: var(--ink-2); font-weight: 700; padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rule); font-size: 12px; letter-spacing: 0.04em; }
    .nm-tbl-wrap td { padding: 9px 12px; color: var(--ink-2); border-bottom: 1px solid var(--parchment-3); vertical-align: top; line-height: 1.6; }
    .nm-tbl-wrap tr:last-child td { border-bottom: none; }
    .nm-tbl-wrap tr.hl-row td { background: var(--saffron-dim); }
    .nm-tbl-wrap td strong { color: var(--ink); }

    /* Legacy nm-hl — keep for kuli begar modal */
    .nm-hl {
      margin: 12px 0; padding: 13px 16px;
      background: var(--viridian-dim);
      border-radius: var(--r-md); border: 1px solid rgba(26,107,74,0.2);
      display: flex; gap: 10px; align-items: flex-start;
    }
    .nm-hl-badge { font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--viridian); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px; }
    .nm-hl-body { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
    .nm-hl-body strong { color: var(--ink); }

    /* Modal stat strip (new — quick-glance hero numbers) */
    .nm-stat-strip { display: flex; gap: 10px; margin: 0 0 24px; flex-wrap: wrap; }
    .nm-stat {
      flex: 1 1 110px; min-width: 100px; text-align: center;
      background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
      padding: 14px 10px 12px; position: relative; overflow: hidden;
    }
    .nm-stat::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--saffron), var(--crimson));
    }
    .nm-stat-num { font-family: var(--font-mono); font-size: 22px; font-weight: 800; color: var(--crimson); line-height: 1.2; }
    .nm-stat-label { font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }

    /* Modal mini section title (sub-heading inside a section) */
    .nm-mini-title {
      font-family: var(--font-sans); font-size: 12px; font-weight: 700;
      color: var(--ink); margin: 14px 0 8px;
      display: flex; align-items: center; gap: 6px;
    }

    /* Modal compact quote grid (new — for "who said what" style facts) */
    .nm-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 16px; }
    .nm-mini-quote {
      background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
      padding: 12px 14px; border-top: 2px solid var(--indigo);
    }
    .nm-mini-quote-text { font-family: var(--font-body); font-style: italic; font-size: 13.5px; color: var(--ink); line-height: 1.6; }
    .nm-mini-quote-attr { font-family: var(--font-sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron); margin-top: 7px; }

    @media (max-width: 640px) {
      .nm-header { padding: 18px 18px 14px; }
      .nm-body { padding: 18px 18px 24px; column-width: auto; column-gap: 0; }
      .nm-title { font-size: 1.05rem; }
      .notes-modal-overlay { padding: 0; align-items: flex-end; }
      .notes-modal { max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; max-width: 100%; }
      .nm-grid { grid-template-columns: 1fr; }
    }


    .gy-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; }
    .gy-stat { background:var(--parchment-2); border:1px solid var(--rule); border-radius:var(--r-md); padding:12px 10px; text-align:center; }
    .gy-stat-num { font-family:var(--font-serif); font-weight:800; font-size:18px; color:var(--saffron); line-height:1.1; }
    .gy-stat-label { font-family:var(--font-sans); font-size:10px; color:var(--ink-3); margin-top:4px; letter-spacing:.02em; }

    .gy-timeline { display:flex; flex-direction:column; gap:0; position:relative; }
    .gy-item { display:flex; gap:14px; position:relative; }
    .gy-rail { width:34px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
    .gy-num { width:30px; height:30px; border-radius:50%; background:var(--saffron); color:#fff; font-family:var(--font-serif); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 0 4px var(--saffron-dim); z-index:1; }
    .gy-item.gy-major .gy-num { background:var(--crimson); box-shadow:0 0 0 4px var(--crimson-dim); width:34px; height:34px; font-size:14px; }
    .gy-item.gy-indigo .gy-num { background:var(--indigo); box-shadow:0 0 0 4px var(--indigo-dim); }
    .gy-item.gy-viridian .gy-num { background:var(--viridian); box-shadow:0 0 0 4px var(--viridian-dim); }
    .gy-rail-line { width:2px; flex:1; background:repeating-linear-gradient(to bottom, var(--rule) 0, var(--rule) 4px, transparent 4px, transparent 8px); margin-top:4px; }
    .gy-item:last-child .gy-rail-line { display:none; }

    .gy-card { flex:1; padding:2px 0 26px; }
    .gy-card-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
    .gy-yr { font-family:var(--font-mono); font-size:11px; font-weight:800; color:var(--saffron); background:var(--saffron-dim); border:1px solid rgba(200,104,10,0.25); padding:3px 9px; border-radius:999px; letter-spacing:.03em; }
    .gy-item.gy-indigo .gy-yr { color:var(--indigo); background:var(--indigo-dim); border-color:rgba(59,78,140,0.25); }
    .gy-item.gy-viridian .gy-yr { color:var(--viridian); background:var(--viridian-dim); border-color:rgba(26,107,74,0.25); }
    .gy-item.gy-major .gy-yr { color:var(--crimson); background:var(--crimson-dim); border-color:rgba(160,32,32,0.25); }
    .gy-place { font-family:var(--font-serif); font-weight:800; font-size:16px; color:var(--ink); }
    .gy-major-badge { font-family:var(--font-sans); font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--crimson); padding:2px 8px; border-radius:999px; }

    .gy-companions { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 10px; }
    .gy-companion-pill { font-family:var(--font-sans); font-size:11.5px; color:var(--ink-2); background:var(--parchment-2); border:1px solid var(--rule); border-radius:999px; padding:3px 10px; }
    .gy-companion-pill::before { content:'👤'; margin-right:4px; font-size:10px; }

    .gy-card .nm-ul { margin-top:6px; }
    .gy-card .nm-ul li { padding-left:14px; }
    .gy-card .nm-ul li::before { content:'—'; position:absolute; left:0; color:var(--ink-3); }
    .gy-card .nm-ul li { position:relative; }

    .gy-summary { margin-top:8px; border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; }
    .gy-summary-title { font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:var(--parchment-2); padding:9px 14px; border-bottom:1px solid var(--rule); }

    @media (max-width:640px) {
      .gy-stats { grid-template-columns:repeat(2,1fr); }
    }

    /* ═══ Sarla/Meera split duel UI ═══ */
    .sm-vs-wrap { position:relative; column-span: all; }
    .sm-vs-header { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px; }
    .sm-vs-header .sm-tag { font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:6px 14px; border-radius:999px; }
    .sm-vs-header .sm-tag.left { background:var(--saffron-dim); color:var(--saffron); border:1px solid var(--saffron); }
    .sm-vs-header .sm-tag.right { background:var(--indigo-dim); color:var(--indigo); border:1px solid var(--indigo); }
    .sm-vs-header .sm-vs-badge { font-family:var(--font-serif); font-weight:800; font-size:13px; color:var(--ink-3); width:30px; height:30px; border-radius:50%; border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; background:var(--parchment-2); }

    .sm-duel { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; position:relative; }
    .sm-duel::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--rule); }
    .sm-panel { padding:18px; display:flex; flex-direction:column; gap:14px; }
    .sm-panel.sarla { background:linear-gradient(180deg, var(--saffron-dim), transparent 140px); }
    .sm-panel.meera { background:linear-gradient(180deg, var(--indigo-dim), transparent 140px); }

    .sm-panel-head { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px dashed var(--rule); }
    .sm-panel-emoji { font-size:26px; line-height:1; flex-shrink:0; }
    .sm-panel-name { font-family:var(--font-serif); font-weight:800; font-size:16px; color:var(--ink); }
    .sm-panel.sarla .sm-panel-name { color:var(--saffron); }
    .sm-panel.meera .sm-panel-name { color:var(--indigo); }
    .sm-panel-sub { font-family:var(--font-sans); font-size:11px; color:var(--ink-3); margin-top:2px; }

    .sm-fact { font-family:var(--font-sans); font-size:12.5px; color:var(--ink-2); background:var(--parchment-2); border:1px solid var(--rule); border-radius:8px; padding:8px 10px; line-height:1.7; }
    .sm-fact strong { color:var(--ink); }

    .sm-label { font-family:var(--font-sans); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:6px 0 2px; display:flex; align-items:center; gap:6px; }
    .sm-panel.sarla .sm-label { color:var(--saffron); }
    .sm-panel.meera .sm-label { color:var(--indigo); }

    .sm-ul { list-style:none; display:flex; flex-direction:column; gap:6px; margin:0; }
    .sm-ul li { font-family:var(--font-sans); font-size:13.5px; color:var(--ink-2); line-height:1.65; padding:6px 10px; border-radius:7px; border-left:2px solid var(--rule); transition:background .15s, border-color .15s; }
    .sm-ul li strong { color:var(--ink); font-weight:600; }
    .sm-panel.sarla .sm-ul li:hover { border-left-color:var(--saffron); background:var(--saffron-dim); }
    .sm-panel.meera .sm-ul li:hover { border-left-color:var(--indigo); background:var(--indigo-dim); }

    .sm-mini-quote { font-family:var(--font-serif); font-style:italic; font-size:13.5px; color:var(--ink); background:var(--parchment-2); border-radius:8px; padding:10px 12px; line-height:1.6; }
    .sm-mini-quote .attr { display:block; margin-top:4px; font-family:var(--font-sans); font-style:normal; font-size:11px; color:var(--ink-3); }

    .sm-books { display:flex; flex-direction:column; gap:5px; }
    .sm-book-row { display:flex; gap:8px; font-family:var(--font-sans); font-size:12.5px; color:var(--ink-2); padding:5px 8px; border-radius:6px; background:var(--parchment-2); }
    .sm-book-row .yr { font-weight:800; color:var(--ink-3); min-width:34px; flex-shrink:0; }
    .sm-book-row strong { color:var(--ink); }

    .sm-museum { margin-top:auto; font-family:var(--font-sans); font-size:12px; color:var(--ink-2); background:var(--crimson-dim); border:1px solid var(--crimson); border-radius:8px; padding:9px 11px; line-height:1.6; }
    .sm-museum strong { color:var(--crimson); }

    .sm-compare { margin-top:18px; border:1px solid var(--rule); border-radius:var(--r-md); overflow:hidden; }
    .sm-compare-title { font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:var(--parchment-2); padding:9px 14px; border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:6px; }
    .sm-compare-row { display:grid; grid-template-columns:1fr 1fr; }
    .sm-compare-row + .sm-compare-row { border-top:1px solid var(--parchment-3); }
    .sm-compare-cell { padding:10px 14px; font-family:var(--font-sans); font-size:13px; color:var(--ink-2); line-height:1.6; }
    .sm-compare-cell:first-child { border-right:1px solid var(--parchment-3); }
    .sm-compare-cell strong { color:var(--ink); }
    .sm-compare-cell.sarla-cell strong.lbl { color:var(--saffron); }
    .sm-compare-cell.meera-cell strong.lbl { color:var(--indigo); }

    @media (max-width: 720px) {
      .sm-duel { grid-template-columns:1fr; }
      .sm-duel::before { display:none; }
      .sm-panel.meera { border-top:1px solid var(--rule); }
      .sm-compare-row { grid-template-columns:1fr; }
      .sm-compare-cell:first-child { border-right:none; border-bottom:1px solid var(--parchment-3); }
    }

    /* ═══ MODAL: राजस्व पुलिस व्यवस्था (पटवारी प्रणाली) — विषय में टाइमलाइन + तुलनात्मक ग्रिड + टेबल
       सभी एक साथ हैं, इसलिए मानक मोडलों (1240px) से भी अधिक चौड़ाई दी गई है ताकि सामग्री बिना
       संकुचन के सहज रूप से पढ़ी जा सके। */
    #patwariRajswaPolice-modal .notes-modal { max-width: 1560px; }
    #patwariRajswaPolice-modal .nm-body { column-width: 600px; column-gap: 48px; }
    @media (max-width: 640px) {
      #patwariRajswaPolice-modal .nm-body { column-width: auto; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       ⭐ MODAL TEMPLATE V2 ("nm-v2") — नया स्टैंडर्ड, future modals इसी
       structure पर बनें। पुराने .nm-* classes (header/close/ul/grid/note/
       tbl-wrap) यहाँ भी पूरी तरह काम करते हैं — V2 सिर्फ नई परतें जोड़ता है:
       sticky in-modal nav, hero stat ring, "case" cards, chain-diagram,
       mnemonic box और click-to-reveal flashcards (memorisation के लिए)।
       बस .notes-modal पर class="nm-v2" लगायें और नीचे के qm-* blocks
       इस्तेमाल करें। पूरा reference: #quitIndiaUK-modal
       ═══════════════════════════════════════════════════════════════════ */
    .nm-v2 .nm-body { column-width: auto; column-count: 1; margin: 0 auto; padding-top: 0; }
    .nm-v2 .nm-body > * { column-break-inside: auto; }

    /* sticky section nav, pinned under header inside scroll area */
    .qm-nav {
      position: sticky; top: 0; z-index: 5;
      display: flex; gap: 7px; flex-wrap: wrap;
      padding: 16px 0 18px; margin: 0 0 28px;
      background: var(--parchment);
      border-bottom: 1px solid var(--rule);
    }
    .qm-nav a {
      font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
      color: var(--ink-2); text-decoration: none;
      padding: 7px 14px; border-radius: 20px;
      border: 1px solid var(--rule); background: var(--parchment-2);
      white-space: nowrap; transition: all 0.2s var(--ease);
    }
    .qm-nav a:hover, .qm-nav a.active {
      color: var(--surface); border-color: var(--crimson); background: var(--crimson);
      transform: translateY(-1px);
    }
    html.dark .qm-nav a:hover, html.dark .qm-nav a.active { color: var(--parchment); }

    /* breathing room for the very first block right after the sticky nav */
    .qm-nav + * { margin-top: 4px; }

    /* hero stat ring — quick-glance numbers at the very top */
    .qm-hero { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 30px; }
    .qm-hero-stat {
      flex: 1 1 130px; padding: 16px 12px; text-align: center;
      background: linear-gradient(160deg, var(--card-crimson-bg, var(--crimson-dim)), var(--parchment-2));
      border: 1px solid rgba(160,32,32,0.28); border-radius: var(--r-lg);
    }
    .qm-hero-stat .num { font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--crimson); line-height: 1.15; }
    .qm-hero-stat .lbl { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }

    /* "case" card — one self-contained incident: date strip + body + deep-fact */
    .qm-case {
      scroll-margin-top: 90px;
      border: 1px solid var(--rule-2); border-radius: var(--r-lg);
      background: var(--surface); overflow: hidden; margin-bottom: 28px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
    .qm-case-head {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      padding: 16px 20px; background: var(--card-crimson-bg, var(--crimson-dim));
      border-bottom: 1px solid rgba(160,32,32,0.25);
    }
    .qm-case-head .dt {
      font-family: var(--font-mono); font-size: 12.5px; font-weight: 800;
      color: var(--crimson); background: var(--surface);
      border: 1px solid rgba(160,32,32,0.4);
      padding: 4px 11px; border-radius: var(--r-sm); white-space: nowrap;
    }
    .qm-case-head .ttl { font-family: var(--font-sans); font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.35; }
    .qm-case-head .loc { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-2); margin-left: auto; }
    .qm-case-body { padding: 20px 22px 22px; }
    .qm-case-body .nm-ul { margin-bottom: 14px; }
    .qm-case-body .nm-ul li { font-size: 14.5px; line-height: 1.75; padding: 11px 15px 11px 17px; }

    /* martyr / shahid chip row — visually distinct so names register fast */
    .qm-martyrs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
    .qm-martyrs .chip {
      font-family: var(--font-sans); font-size: 13px; font-weight: 700;
      color: var(--crimson); background: var(--card-crimson-bg, var(--surface));
      border: 1px solid rgba(160,32,32,0.4); border-radius: 20px;
      padding: 6px 14px 6px 11px; display: flex; align-items: center; gap: 6px;
    }
    .qm-martyrs .chip::before { content: '🪦'; font-size: 12px; }
    .qm-martyrs-label { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); width: 100%; margin-bottom: 3px; }

    /* deep-fact callout, reuses indigo emphasis but its own visual identity */
    .qm-deep {
      margin-top: 6px; padding: 14px 17px; border-radius: var(--r-md);
      background: var(--card-indigo-bg, var(--indigo-dim)); border: 1px solid rgba(59,78,140,0.32);
      display: flex; gap: 11px; align-items: flex-start;
    }
    .qm-deep .ic { font-size: 16px; flex-shrink: 0; }
    .qm-deep-badge { font-family: var(--font-sans); font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--indigo); margin-bottom: 5px; }
    .qm-deep-body { font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-2); line-height: 1.8; }
    .qm-deep-body strong { color: var(--ink); }

    /* chain / cause-effect diagram linking the four incidents */
    .qm-chain { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 4px 0 30px; }
    .qm-chain-step {
      flex: 1 1 0; min-width: 100px; text-align: center;
      padding: 12px 8px; background: var(--parchment-2);
      border: 1px solid var(--rule); border-radius: var(--r-md);
      font-family: var(--font-sans);
    }
    .qm-chain-step .d { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-bottom: 3px; }
    .qm-chain-step .t { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.3; }
    .qm-chain-arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 26px; color: var(--crimson); font-size: 16px; }
    @media (max-width: 640px) {
      .qm-chain { flex-direction: column; }
      .qm-chain-arrow { transform: rotate(90deg); flex: 0 0 22px; }
    }

    /* memory-hook / mnemonic box — bright, separated from neutral notes */
    .qm-mnemo {
      margin: 6px 0 26px; padding: 16px 18px; border-radius: var(--r-lg);
      background: linear-gradient(135deg, var(--saffron-dim), var(--parchment-2));
      border: 1px solid rgba(200,104,10,0.28);
    }
    .qm-mnemo-badge { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--saffron); margin-bottom: 6px; }
    .qm-mnemo-body { font-family: var(--font-body); font-size: 14.5px; color: var(--ink); line-height: 1.7; font-weight: 600; }
    .qm-mnemo-sub { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }

    /* click-to-reveal flashcards — active recall before the recap table */
    .qm-flip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 26px; }
    @media (max-width: 640px) { .qm-flip-grid { grid-template-columns: 1fr; } }
    .qm-flip {
      cursor: pointer; border: 1px solid var(--rule); border-radius: var(--r-md);
      background: var(--parchment-2); padding: 12px 14px; min-height: 64px;
      transition: background 0.2s, border-color 0.2s;
      display: flex; flex-direction: column; gap: 4px; justify-content: center;
    }
    .qm-flip:hover { border-color: var(--saffron); }
    .qm-flip .q { font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
    .qm-flip .a { font-family: var(--font-sans); font-size: 12.5px; color: var(--viridian); font-weight: 700; display: none; }
    .qm-flip.show .q { color: var(--ink-3); }
    .qm-flip.show .a { display: block; }
    .qm-flip .hint { font-family: var(--font-sans); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
    .qm-flip.show .hint { display: none; }

    /* ═══════════════════════════════════════════════════════════════════
       ⭐⭐⭐ MODAL TEMPLATE V3 ("story-*") — कालानुक्रमिक/घटना-प्रधान विषयों के
       लिए। V2 (qm-case स्टैक) में बार-बार एक ही तथ्य hero-stat + grid +
       case-body + recap-table में दोहराया जाता था। V3 में हर तथ्य सिर्फ
       2 स्थानों पर आता है: (1) नीचे की कथा/टाइमलाइन में एक बार, विस्तार से,
       (2) अंत की Quick Recap टेबल में एक बार, संक्षेप में। बीच का कोई भी
       hero-stat strip या duplicate grid न जोड़ें।

       घटक:
         .story-timeline / .story-node     → जुड़ी हुई ऊर्ध्वाधर कालक्रम-रेखा,
                                              हर घटना एक नोड (no boxy card-stack)
         .story-node.indigo/.crimson/.viridian → नोड की रंग-पहचान (dot + date badge)
         .story-date / .story-loc / .story-title / .story-body → नोड की सामग्री
         .story-flag (+ .crimson/.saffron) → एक नोड में अधिकतम 1-2 "ज़रूरी तथ्य"
                                              callout (qm-deep जैसा पर अलग पहचान)
         .compare-strip / .compare-item    → "प्रथम X / Y / Z" जैसी तुलनाएं एक
                                              पंक्ति में — grid-card दोहराव की जगह
       Reference implementations: #vyaktigatSatyagraha-modal, #quitIndiaUK-modal
       ═══════════════════════════════════════════════════════════════════ */
    .story-timeline { position: relative; margin: 8px 0 28px; padding-left: 30px; }
    .story-timeline::before {
      content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px;
      background: linear-gradient(180deg, var(--saffron), var(--indigo) 45%, var(--crimson));
      opacity: 0.45; border-radius: 2px;
    }
    .story-node { position: relative; margin-bottom: 28px; }
    .story-node:last-child { margin-bottom: 0; }
    .story-node::before {
      content: ''; position: absolute; left: -30px; top: 3px; width: 12px; height: 12px;
      border-radius: 50%; background: var(--surface); border: 2.5px solid var(--saffron);
      box-shadow: 0 0 0 4px var(--parchment);
    }
    .story-node.indigo::before   { border-color: var(--indigo); }
    .story-node.crimson::before  { border-color: var(--crimson); }
    .story-node.viridian::before { border-color: var(--viridian); }
    .story-node-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 12px; margin-bottom: 7px; }
    .story-date {
      font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em;
      color: var(--saffron); background: var(--saffron-dim); border: 1px solid rgba(200,104,10,0.25);
      padding: 2px 10px; border-radius: 11px; white-space: nowrap;
    }
    .story-node.indigo .story-date   { color: var(--indigo);   background: var(--indigo-dim);   border-color: rgba(59,78,140,0.25); }
    .story-node.crimson .story-date  { color: var(--crimson);  background: var(--crimson-dim);  border-color: rgba(160,32,32,0.25); }
    .story-node.viridian .story-date { color: var(--viridian); background: var(--viridian-dim); border-color: rgba(26,107,74,0.25); }
    .story-loc { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-3); }
    .story-title { font-family: var(--font-sans); font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.35; flex-basis: 100%; }
    .story-body { font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-2); line-height: 1.8; }
    .story-body p { margin: 0 0 8px; }
    .story-body p:last-child { margin-bottom: 0; }
    .story-body strong { color: var(--ink); font-weight: 700; }

    .story-flag {
      margin-top: 10px; padding: 12px 15px; border-radius: var(--r-md);
      background: var(--indigo-dim); border: 1px solid rgba(59,78,140,0.3);
      display: flex; gap: 9px; align-items: flex-start;
    }
    .story-flag + .story-flag { margin-top: 8px; }
    .story-flag .ic { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
    .story-flag-body { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
    .story-flag-body strong { color: var(--indigo); }
    .story-flag.crimson { background: var(--crimson-dim); border-color: rgba(160,32,32,0.3); }
    .story-flag.crimson .story-flag-body strong { color: var(--crimson); }
    .story-flag.saffron { background: var(--saffron-dim); border-color: rgba(200,104,10,0.3); }
    .story-flag.saffron .story-flag-body strong { color: var(--saffron); }

    /* compact comparison strip — replaces redundant hero-stat + grid pairs */
    .compare-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
    .compare-item {
      flex: 1 1 200px; padding: 13px 15px; border-radius: var(--r-md);
      background: var(--parchment-2); border: 1px solid var(--rule); border-top: 3px solid var(--saffron);
    }
    .compare-item.indigo   { border-top-color: var(--indigo); }
    .compare-item.viridian { border-top-color: var(--viridian); }
    .compare-item.crimson  { border-top-color: var(--crimson); }
    .compare-tag { font-family: var(--font-sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
    .compare-name { font-family: var(--font-sans); font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
    .compare-fact { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
    .compare-fact strong { color: var(--ink); }

    /* people / member pill row — reusable: "संस्थापक सदस्य", "प्रतिनिधि" आदि नाम-सूचियों के लिए */
    .kp-members { display: flex; flex-wrap: wrap; gap: 9px; padding: 15px 18px; margin: 16px 0 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
    .kp-member-label { font-family: var(--font-sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--viridian); width: 100%; margin-bottom: 5px; }
    .kp-pill { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink); background: var(--parchment-2); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 16px; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
    .kp-pill:hover { background: var(--viridian-dim); border-color: rgba(26,107,74,0.35); }

    @media (max-width: 640px) {
      .story-timeline { padding-left: 24px; }
      .story-node::before { left: -24px; }
    }

    /* ── nm-ext-links: compact external anchor-buttons in modal header ── */
    .nm-ext-links {
      display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px;
    }
    .nm-ext-links a {
      font-family: var(--font-sans); font-size: 11px; font-weight: 700;
      color: var(--ink-2); text-decoration: none;
      padding: 3px 9px; border-radius: 12px;
      border: 1px solid var(--rule-2); background: var(--parchment-3);
      white-space: nowrap; transition: color 0.18s, background 0.18s, border-color 0.18s;
      line-height: 1.6;
    }
    .nm-ext-links a:hover {
      color: var(--surface); background: var(--indigo); border-color: var(--indigo);
    }
    html.dark .nm-ext-links a { background: var(--parchment-3); color: var(--ink-2); }
    html.dark .nm-ext-links a:hover { color: var(--parchment); background: var(--indigo); border-color: var(--indigo); }

    /* ═══════════════════════════════════════════════════════════════════
       ⭐⭐⭐⭐ MODAL TEMPLATE V4 ("v4-modal") — नया प्रीमियम मानक (STANDARD)
       ─────────────────────────────────────────────────────────────────
       यह पुराने .notes-modal डिज़ाइन से बिल्कुल अलग, स्वतंत्र, आधुनिक UI है।
       पुराने .nm-* / .qm-* / .story-* classes यहाँ इस्तेमाल नहीं होते — V4
       अपना पूरा अलग component-सेट लाता है (प्रीमियम "profile/dossier" शैली:
       gradient header + avatar ring + sticky pill-tabs + reading progress
       bar + numbered sections + timeline + callouts + quote cards + literary
       grid + recap table)। आगे से हर नया मोडल इसी टेम्पलेट पर बनायें।

       ⭐ ज़रूरी: outer wrapper अभी भी ".notes-modal-overlay" ही रहेगा (ताकि
       मौजूदा open/close, Escape-key, बाहर-क्लिक और z-index-stacking JS बिना
       किसी बदलाव के काम करता रहे) — सिर्फ अंदर वाला बॉक्स ".notes-modal" की
       जगह ".v4-modal" इस्तेमाल करता है, जिसकी पूरी स्टाइलिंग नीचे स्वतंत्र है।

       बेसिक ढांचा (नया मोडल बनाते समय कॉपी करें):
         <div class="notes-modal-overlay" id="xyz-modal" role="dialog" aria-modal="true" aria-label="...">
           <div class="v4-modal">
             <div class="v4m-progress"><div class="v4m-progress-bar"></div></div>
             <header class="v4m-header">
               <div class="v4m-header-blob a"></div><div class="v4m-header-blob b"></div>
               <div class="v4m-header-content">
                 <div class="v4m-avatar-ring"><div class="v4m-avatar">🖋️</div></div>
                 <div class="v4m-header-text">
                   <div class="v4m-eyebrow">UKPSC / UKSSSC स्पेशल · ...</div>
                   <h2 class="v4m-title">शीर्षक</h2>
                   <div class="v4m-badges">
                     <span class="v4m-badge saffron">उपाधि</span>
                   </div>
                 </div>
               </div>
               <button class="v4m-close" onclick="document.getElementById('xyz-modal').classList.remove('open')" aria-label="बंद करें">✕</button>
             </header>
             <nav class="v4m-tabs" data-v4-tabs>
               <a href="#sec-1" class="v4m-tab">सेक्शन 1</a>
               ...
             </nav>
             <div class="v4m-body" data-v4-body>
               <div class="v4m-stats">
                 <div class="v4m-stat"><span class="n">1901</span><span class="l">लेबल</span></div>
               </div>
               <section id="sec-1" class="v4m-section">
                 <h3 class="v4m-h"><span class="v4m-h-num">1</span>सेक्शन शीर्षक</h3>
                 ... .v4m-cards / .v4m-timeline / .v4m-callout / .v4m-quote / .v4m-lit-grid ...
               </section>
               ...
               <section id="sec-recap" class="v4m-section">
                 <h3 class="v4m-h"><span class="v4m-h-num">⟂</span>परीक्षा के लिए Quick Recap</h3>
                 <div class="v4m-table-wrap"><table>...</table></div>
               </section>
             </div>
           </div>
         </div>

       घटक चीट-शीट:
         .v4m-stats / .v4m-stat            → ऊपर 4–5 hero आंकड़े
         .v4m-cards / .v4m-card            → key-value जानकारी कार्ड्स (grid)
         .v4m-chips / .v4m-chip            → छोटे tag/उपाधि chips
         .v4m-timeline / .v4m-node         → कालानुक्रमिक घटनाएं (icon-rail)
         .v4m-callout (+saffron/indigo/crimson/viridian) → callout/चेतावनी/deep-fact
         .v4m-quote                        → प्रसिद्ध उद्धरण कार्ड
         .v4m-lit-grid / .v4m-lit-card     → किताबें/रचनाएं/सूचियों के कार्ड
         .v4m-link-row / .v4m-link-btn     → संबंधित मोडल्स से क्रॉस-लिंक बटन
         .v4m-table-wrap table             → अंतिम Quick Recap टेबल (हमेशा आख़िर में)

       Reference implementations: #taraDattGairola-modal, #kuliBegar-modal,
       #gandhiYatra-modal, #sarlaMeera-modal, #almoraAkbar-modal, #dehradunAdmin-modal
       ═══════════════════════════════════════════════════════════════════ */

    .v4-modal {
      background: var(--parchment);
      border: 1px solid var(--rule);
      border-radius: 26px;
      width: 100%; max-width: 1080px;
      max-height: calc(100vh - 40px);
      display: flex; flex-direction: column;
      box-shadow: 0 50px 140px rgba(10,8,6,0.38), 0 4px 18px rgba(10,8,6,0.12);
      position: relative; overflow: hidden;
      animation: v4ModalIn 0.42s var(--ease) both;
    }
    @keyframes v4ModalIn { from { opacity:0; transform:translateY(28px) scale(0.97); } to { opacity:1; transform:none; } }
    html.dark .v4-modal { box-shadow: 0 50px 140px rgba(0,0,0,0.65); }

    /* reading-progress hairline, glued to the very top edge of the modal */
    .v4m-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rule-2); z-index: 6; }
    .v4m-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--saffron), var(--crimson) 55%, var(--indigo)); transition: width 0.12s linear; }

    /* ── header: gradient banner + avatar ring + title + badge chips ── */
    .v4m-header {
      position: relative; flex-shrink: 0; overflow: hidden;
      padding: 16px 44px 14px;
      background: linear-gradient(160deg, var(--card-saffron-bg) 0%, var(--parchment) 72%);
      border-bottom: 1px solid var(--rule);
    }
    .v4m-header-blob { position: absolute; border-radius: 50%; filter: blur(36px); pointer-events: none; opacity: 0.55; }
    .v4m-header-blob.a { width: 220px; height: 220px; top: -110px; right: -60px; background: var(--saffron-glow); }
    .v4m-header-blob.b { width: 160px; height: 160px; bottom: -90px; left: 10%; background: var(--indigo-dim); }
    .v4m-header-content { position: relative; display: flex; align-items: center; gap: 14px; padding-right: 50px; }
    .v4m-avatar-ring {
      width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
      background: conic-gradient(from 180deg, var(--saffron), var(--crimson), var(--indigo), var(--saffron));
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 20px var(--saffron-glow);
    }
    .v4m-avatar {
      width: 51px; height: 51px; border-radius: 50%;
      background: var(--surface); display: flex; align-items: center; justify-content: center;
      font-size: 23px; box-shadow: inset 0 0 0 1px var(--rule);
    }
    .v4m-header-text { min-width: 0; }
    .v4m-eyebrow {
      font-family: var(--font-sans); font-size: 10px; font-weight: 800;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
      margin-bottom: 4px;
      display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    }
    .v4m-eyebrow-tag {
      color: var(--saffron); background: var(--saffron-dim);
      padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(200,104,10,0.25);
      font-size: 9.5px;
    }
    .v4m-eyebrow-range { color: var(--ink-3); }
    .v4m-eyebrow-theme {
      color: var(--ink-2); font-weight: 700; text-transform: none; letter-spacing: 0;
      font-size: 11.5px; flex-basis: 100%; margin-top: 1px;
    }
    .v4m-title { font-family: var(--font-body); font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.2; margin-top: 1px; }
    .v4m-badges {
      display: flex; flex-wrap: wrap; align-items: center;
      margin-top: 13px; font-family: var(--font-body); font-style: italic;
      font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
    }
    .v4m-badge {
      position: relative; padding-left: 13px; font-weight: 600;
      background: none; border: none; border-radius: 0;
    }
    .v4m-badge::before {
      content: ''; position: absolute; left: 0; top: 50%;
      width: 5px; height: 5px; border-radius: 50%;
      background: currentColor; transform: translateY(-50%); opacity: 0.85;
    }
    .v4m-badge + .v4m-badge { margin-left: 14px; }
    .v4m-badge          { color: var(--saffron); }
    .v4m-badge.indigo   { color: var(--indigo); }
    .v4m-badge.crimson  { color: var(--crimson); }
    .v4m-badge.viridian { color: var(--viridian); }

    .v4m-close {
      position: absolute; top: 16px; right: 24px; z-index: 3;
      width: 34px; height: 34px; border-radius: 50%;
      border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2);
      display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer;
      backdrop-filter: blur(6px);
      transition: background 0.2s, color 0.2s, transform 0.2s;
    }
    .v4m-close:hover { background: var(--crimson); color: #fff; transform: rotate(90deg); }

    /* ── compact "index" dropdown — replaces the old always-expanded
       pill tab-bar. Collapsed it's a single ~42px-tall row; opened it
       floats OVER the body as an absolutely-positioned panel instead
       of pushing content down. Same <a href="#id" class="v4m-tab">
       markup as before — only the container/visuals changed, so the
       existing scrollspy JS (data-v4-tabs) keeps working untouched. ── */
    .v4m-tabs-bar {
      position: relative; flex-shrink: 0;
      border-bottom: 1px solid var(--rule); background: var(--parchment);
    }
    .v4m-tabs-toggle {
      width: 100%; display: flex; align-items: center; gap: 10px;
      padding: 11px 44px; background: none; border: none; cursor: pointer;
      font-family: var(--font-sans); font-size: 12.5px; font-weight: 800;
      color: var(--ink-2); text-align: left;
    }
    .v4m-tabs-toggle .ic { font-size: 14px; color: var(--saffron); flex-shrink: 0; }
    .v4m-tabs-toggle .cur { color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .v4m-tabs-toggle .car { color: var(--ink-3); font-size: 10px; transition: transform 0.2s var(--ease); flex-shrink: 0; }
    .v4m-tabs-bar.open .v4m-tabs-toggle .car { transform: rotate(180deg); }
    .v4m-tabs {
      position: absolute; top: 100%; left: 0; right: 0; z-index: 8;
      display: none; flex-direction: column; gap: 2px;
      max-height: 360px; overflow-y: auto;
      background: var(--surface); border: 1px solid var(--rule); border-top: none;
      border-radius: 0 0 16px 16px; padding: 8px;
      box-shadow: 0 22px 44px rgba(10,8,6,0.22);
    }
    .v4m-tabs-bar.open .v4m-tabs { display: flex; }
    .v4m-tab {
      font-family: var(--font-sans); font-size: 13px; font-weight: 700;
      color: var(--ink-2); text-decoration: none;
      padding: 9px 14px; border-radius: 9px; border-left: 3px solid transparent;
      transition: all 0.15s var(--ease);
    }
    .v4m-tab:hover { color: var(--ink); background: var(--parchment-2); }
    .v4m-tab.active { color: var(--saffron); background: var(--saffron-dim); border-left-color: var(--saffron); font-weight: 800; }

    /* ── scrollable body ── */
    .v4m-body { flex: 1; overflow-y: auto; padding: 30px 44px 50px; }

    /* hero stat strip */
    .v4m-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 0 0 34px; }
    .v4m-stat {
      position: relative; overflow: hidden; text-align: center;
      background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
      padding: 16px 8px 13px;
      transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .v4m-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--saffron), var(--crimson)); }
    .v4m-stat:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.08); }
    .v4m-stat .n { display: block; font-family: var(--font-mono); font-size: 21px; font-weight: 800; color: var(--crimson); line-height: 1.2; }
    .v4m-stat .l { display: block; font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }

    /* section shell + numbered heading */
    .v4m-section { margin-bottom: 40px; scroll-margin-top: 16px; }
    .v4m-section:last-child { margin-bottom: 0; }
    .v4m-h {
      display: flex; align-items: center; gap: 11px;
      font-family: var(--font-sans); font-size: 15px; font-weight: 800; color: var(--ink);
      padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
    }
    .v4m-h-num {
      width: 25px; height: 25px; border-radius: 8px; flex-shrink: 0;
      background: linear-gradient(135deg, var(--saffron), var(--crimson)); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 12px; font-weight: 800;
    }

    /* chapter / phase divider banner */
    .v4m-phase {
      display: flex; align-items: center; gap: 18px;
      margin: 8px 0 30px; padding: 18px 22px;
      background: linear-gradient(135deg, var(--saffron-dim) 0%, var(--crimson-dim) 100%);
      border: 1px solid rgba(200,104,10,0.22); border-radius: var(--r-xl);
    }
    .v4m-stats + .v4m-phase, .v4m-phase:first-child { margin-top: 0; }
    .v4m-phase-num {
      width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
      background: linear-gradient(135deg, var(--saffron), var(--crimson)); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 20px; font-weight: 800;
      box-shadow: 0 6px 16px var(--saffron-glow);
    }
    .v4m-phase-text .t {
      font-family: var(--font-sans); font-size: 10.5px; font-weight: 800;
      letter-spacing: 0.09em; text-transform: uppercase; color: var(--crimson);
    }
    .v4m-phase-text .h { font-family: var(--font-sans); font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 3px; line-height: 1.3; }

    /* inline sub-heading inside a section */
    .v4m-subhead {
      font-family: var(--font-sans); font-size: 13px; font-weight: 800; color: var(--ink);
      margin: 26px 0 13px; padding-left: 13px; border-left: 3px solid var(--saffron);
    }

    /* info card grid */
    .v4m-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 12px; margin-bottom: 14px; }
    .v4m-card {
      background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
      padding: 14px 17px; transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s;
    }
    .v4m-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.07); border-color: var(--rule-2); }
    .v4m-card-label {
      font-family: var(--font-sans); font-size: 10px; font-weight: 800;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--saffron); margin-bottom: 5px;
    }
    .v4m-card-label.indigo   { color: var(--indigo); }
    .v4m-card-label.viridian { color: var(--viridian); }
    .v4m-card-label.crimson  { color: var(--crimson); }
    .v4m-card-value { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.55; }
    .v4m-card-value strong { color: var(--ink); font-weight: 800; }

    /* chip row (titles / tags) */
    .v4m-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

    /* ── उपाधि / titles — quiet quote-list, NOT pill chips. Use this for
       honorific titles; keep .v4m-chips/.v4m-chip (above) for plain
       tag-lists like objectives, where a filled chip still reads fine. ── */
    .v4m-titles {
      display: flex; flex-wrap: wrap; align-items: baseline;
      gap: 4px 0; margin-bottom: 14px;
      font-family: var(--font-body); font-style: italic; font-size: 14.5px;
      line-height: 1.7; color: var(--ink-2);
      padding-left: 14px; border-left: 2px solid var(--rule-2);
    }
    .v4m-title-item { font-weight: 600; }
    .v4m-title-item.indigo   { color: var(--indigo); }
    .v4m-title-item.crimson  { color: var(--crimson); }
    .v4m-title-item.viridian { color: var(--viridian); }
    .v4m-title-item.saffron  { color: var(--saffron); }
    .v4m-title-sep { color: var(--ink-3); margin: 0 11px; font-style: normal; }
    .v4m-title-item em { font-style: normal; color: var(--ink-3); font-size: 12.5px; }

    /* ── उपाधि HERO BLOCK — तारादत्त गैरोला section redesign ──
       उपाधियाँ are PRIMARY; secondary bio facts become a meta-pill row below. */
    .tdg-upadhi-hero {
      margin-bottom: 16px;
    }
    .tdg-upadhi-label {
      font-family: var(--font-sans); font-size: 10px; font-weight: 800;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
      margin-bottom: 10px;
    }
    .tdg-upadhi-row {
      display: flex; align-items: flex-start; gap: 0;
      padding: 11px 16px 11px 0; position: relative;
      border-left: 3px solid transparent;
      border-radius: 0 var(--r-md) var(--r-md) 0;
      background: transparent;
      transition: background 0.2s, border-color 0.2s;
    }
    .tdg-upadhi-row + .tdg-upadhi-row {
      margin-top: 7px;
    }
    .tdg-upadhi-row.saffron  { border-left-color: var(--saffron);  background: var(--saffron-dim); }
    .tdg-upadhi-row.indigo   { border-left-color: var(--indigo);   background: var(--indigo-dim); }
    .tdg-upadhi-row.viridian { border-left-color: var(--viridian); background: var(--viridian-dim); }
    .tdg-upadhi-glyph {
      font-family: var(--font-body); font-size: 26px; font-weight: 800;
      line-height: 1; margin: 0 10px 0 14px; flex-shrink: 0; opacity: 0.55;
      align-self: center;
    }
    .tdg-upadhi-row.saffron  .tdg-upadhi-glyph { color: var(--saffron); }
    .tdg-upadhi-row.indigo   .tdg-upadhi-glyph { color: var(--indigo); }
    .tdg-upadhi-row.viridian .tdg-upadhi-glyph { color: var(--viridian); }
    .tdg-upadhi-text {
      font-family: var(--font-body); font-style: italic; font-weight: 700;
      font-size: 15px; line-height: 1.45; flex: 1;
    }
    .tdg-upadhi-row.saffron  .tdg-upadhi-text { color: var(--saffron); }
    .tdg-upadhi-row.indigo   .tdg-upadhi-text { color: var(--indigo); }
    .tdg-upadhi-row.viridian .tdg-upadhi-text { color: var(--viridian); }
    .tdg-upadhi-sub {
      display: block; font-style: normal; font-weight: 500;
      font-size: 11.5px; color: var(--ink-3); margin-top: 2px;
    }

    /* meta-pill row — secondary biographical context */
    .tdg-meta-row {
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
      padding: 10px 14px; border-radius: var(--r-md);
      background: var(--parchment-2); border: 1px solid var(--rule);
    }
    .tdg-meta-row-label {
      font-family: var(--font-sans); font-size: 9.5px; font-weight: 800;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
      width: 100%; margin-bottom: 4px;
    }
    .tdg-meta-pill {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-sans); font-size: 12px; font-weight: 500;
      color: var(--ink-2); background: var(--surface);
      border: 1px solid var(--rule); border-radius: 999px;
      padding: 4px 12px;
    }
    .tdg-meta-pill .k {
      font-weight: 800; font-size: 10px; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--ink-3);
    }
    .tdg-meta-pill .v { font-weight: 600; color: var(--ink); }
    .tdg-meta-pill .v strong { color: var(--crimson); }

    .v4m-chip {
      font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--ink);
      background: var(--parchment-2); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 15px;
    }
    .v4m-chip.indigo   { background: var(--indigo-dim);   border-color: rgba(59,78,140,0.25); color: var(--indigo); }
    .v4m-chip.crimson  { background: var(--crimson-dim);  border-color: rgba(160,32,32,0.28); color: var(--crimson); }
    .v4m-chip.viridian { background: var(--viridian-dim); border-color: rgba(26,107,74,0.28); color: var(--viridian); }

    /* timeline — icon rail */
    .v4m-timeline { display: flex; flex-direction: column; margin-bottom: 8px; }
    .v4m-node { display: flex; gap: 16px; position: relative; }
    .v4m-node-rail { display: flex; flex-direction: column; align-items: center; width: 42px; flex-shrink: 0; }
    .v4m-node-dot {
      width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
      background: var(--surface); border: 2px solid var(--saffron);
      display: flex; align-items: center; justify-content: center; font-size: 17px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06); z-index: 1;
    }
    .v4m-node.indigo .v4m-node-dot   { border-color: var(--indigo); }
    .v4m-node.crimson .v4m-node-dot  { border-color: var(--crimson); }
    .v4m-node.viridian .v4m-node-dot { border-color: var(--viridian); }
    .v4m-node-line { width: 2px; flex: 1; min-height: 18px; background: var(--rule); margin-top: 4px; }
    .v4m-node:last-child .v4m-node-line { display: none; }
    .v4m-node-body { flex: 1; padding: 4px 0 28px; min-width: 0; }
    .v4m-node:last-child .v4m-node-body { padding-bottom: 0; }
    .v4m-node-date {
      display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 800;
      color: var(--saffron); background: var(--saffron-dim); border: 1px solid rgba(200,104,10,0.25);
      padding: 2px 10px; border-radius: 999px; margin-bottom: 6px;
    }
    .v4m-node.indigo .v4m-node-date   { color: var(--indigo);   background: var(--indigo-dim);   border-color: rgba(59,78,140,0.25); }
    .v4m-node.crimson .v4m-node-date  { color: var(--crimson);  background: var(--crimson-dim);  border-color: rgba(160,32,32,0.25); }
    .v4m-node.viridian .v4m-node-date { color: var(--viridian); background: var(--viridian-dim); border-color: rgba(26,107,74,0.25); }
    .v4m-node-title { font-family: var(--font-sans); font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.4; margin-bottom: 4px; }
    .v4m-node-text { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
    .v4m-node-text strong { color: var(--ink); }
    .v4m-node-list { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
    .v4m-node-list li {
      font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.7;
      padding-left: 14px; position: relative;
    }
    .v4m-node-list li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); opacity: 0.6; }
    .v4m-node-list li strong { color: var(--ink); }

    /* callouts */
    .v4m-callout {
      display: flex; gap: 12px; align-items: flex-start;
      margin: 14px 0; padding: 15px 19px; border-radius: var(--r-lg);
      background: var(--saffron-dim); border-left: 4px solid var(--saffron);
    }
    .v4m-callout.indigo   { background: var(--indigo-dim);   border-left-color: var(--indigo); }
    .v4m-callout.crimson  { background: var(--crimson-dim);  border-left-color: var(--crimson); }
    .v4m-callout.viridian { background: var(--viridian-dim); border-left-color: var(--viridian); }
    .v4m-callout-icon { font-size: 17px; flex-shrink: 0; line-height: 1.5; }
    .v4m-callout-badge {
      font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
      text-transform: uppercase; color: var(--saffron); margin-bottom: 4px;
    }
    .v4m-callout.indigo .v4m-callout-badge   { color: var(--indigo); }
    .v4m-callout.crimson .v4m-callout-badge  { color: var(--crimson); }
    .v4m-callout.viridian .v4m-callout-badge { color: var(--viridian); }
    .v4m-callout-body { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
    .v4m-callout-body strong { color: var(--ink); }

    /* ── Special Note card (📌 विशेष नोट) ─────────────────────────────────── */
    .v4m-special-note {
      margin: 16px 0;
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid var(--saffron-glow);
    }
    .v4m-special-note__header {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px;
      background: linear-gradient(90deg, var(--saffron-glow) 0%, transparent 100%);
      border-bottom: 1px solid var(--saffron-glow);
    }
    .v4m-special-note__pin {
      font-size: 15px; flex-shrink: 0;
    }
    .v4m-special-note__label {
      font-family: var(--font-sans); font-size: 10.5px; font-weight: 800;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--saffron);
    }
    .v4m-special-note__subject {
      font-family: var(--font-sans); font-size: 12px; font-weight: 600;
      color: var(--ink-2); margin-left: 2px;
    }
    .v4m-special-note__body {
      padding: 12px 14px;
      background: var(--saffron-dim);
      display: flex; flex-direction: column; gap: 8px;
    }
    .v4m-special-note__item {
      display: flex; gap: 10px; align-items: flex-start;
      background: var(--bg); border-radius: var(--r-md);
      padding: 10px 13px;
      border-left: 3px solid var(--saffron);
    }
    .v4m-special-note__year {
      font-family: var(--font-sans); font-size: 11px; font-weight: 800;
      color: var(--saffron); letter-spacing: 0.04em;
      white-space: nowrap; padding-top: 2px; flex-shrink: 0;
    }
    .v4m-special-note__text {
      font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); line-height: 1.75;
    }
    .v4m-special-note__text strong { color: var(--ink); }

    /* quote card */
    .v4m-quote {
      position: relative; overflow: hidden; margin: 16px 0;
      padding: 26px 28px 20px 58px; border-radius: var(--r-xl);
      background: linear-gradient(135deg, var(--indigo-dim) 0%, var(--crimson-dim) 100%);
      border: 1px solid rgba(59,78,140,0.2);
    }
    .v4m-quote::before {
      content: '\201C'; position: absolute; top: -22px; left: 12px;
      font-family: Georgia, serif; font-size: 92px; line-height: 1; color: var(--indigo); opacity: 0.22;
    }
    .v4m-quote-text { font-family: var(--font-body); font-style: italic; font-size: 16px; color: var(--ink); line-height: 1.85; }
    .v4m-quote-attr { font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--ink-2); margin-top: 11px; }
    .v4m-quote-attr::before { content: '— '; color: var(--saffron); font-weight: 800; }

    /* multi-quote grid — several short quotes side-by-side (compact variant of .v4m-quote) */
    .v4m-quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 12px; margin: 16px 0; }
    .v4m-mini-quote {
      position: relative; background: var(--surface); border: 1px solid var(--rule);
      border-top: 3px solid var(--indigo); border-radius: var(--r-lg); padding: 16px 18px;
      transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
    }
    .v4m-mini-quote:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.07); }
    .v4m-mini-quote.saffron  { border-top-color: var(--saffron); }
    .v4m-mini-quote.crimson  { border-top-color: var(--crimson); }
    .v4m-mini-quote.viridian { border-top-color: var(--viridian); }
    .v4m-mini-quote-text { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--ink); line-height: 1.65; }
    .v4m-mini-quote-attr { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--saffron); margin-top: 10px; }
    .v4m-mini-quote-attr::before { content: '— '; }

    /* literary / list grid */
    .v4m-lit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 8px; }
    .v4m-lit-card {
      position: relative; overflow: hidden;
      background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
      padding: 17px 18px;
      transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
    }
    .v4m-lit-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); border-color: var(--rule-2); }
    .v4m-lit-icon { position: absolute; bottom: 6px; right: 8px; font-size: 48px; opacity: 0.18; line-height: 1; pointer-events: none; filter: saturate(0.6); }
    html.dark .v4m-lit-icon { opacity: 0.22; filter: saturate(0.5) brightness(1.3); }
    .v4m-lit-title { font-family: var(--font-sans); font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 6px; position: relative; }
    .v4m-lit-desc { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-2); line-height: 1.65; position: relative; }

    /* key-figure grid (profile cards) */
    .v4m-figure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
    .v4m-figure-card {
      display: flex; gap: 14px; align-items: flex-start;
      background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
      padding: 17px 18px; border-top: 3px solid var(--saffron);
      transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
    }
    .v4m-figure-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.07); }
    .v4m-figure-card.indigo   { border-top-color: var(--indigo); }
    .v4m-figure-card.crimson  { border-top-color: var(--crimson); }
    .v4m-figure-card.viridian { border-top-color: var(--viridian); }
    .v4m-figure-avatar {
      width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
      background: var(--saffron-dim); border: 1px solid rgba(200,104,10,0.25);
      display: flex; align-items: center; justify-content: center; font-size: 19px;
    }
    .v4m-figure-card.indigo .v4m-figure-avatar   { background: var(--indigo-dim);   border-color: rgba(59,78,140,0.25); }
    .v4m-figure-card.crimson .v4m-figure-avatar  { background: var(--crimson-dim);  border-color: rgba(160,32,32,0.25); }
    .v4m-figure-card.viridian .v4m-figure-avatar { background: var(--viridian-dim); border-color: rgba(26,107,74,0.25); }
    .v4m-figure-name { font-family: var(--font-sans); font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.4; }
    .v4m-figure-title {
      font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; font-style: italic;
      color: var(--saffron); margin: 3px 0 8px;
    }
    .v4m-figure-card.indigo .v4m-figure-title   { color: var(--indigo); }
    .v4m-figure-card.crimson .v4m-figure-title  { color: var(--crimson); }
    .v4m-figure-card.viridian .v4m-figure-title { color: var(--viridian); }
    .v4m-figure-body { font-family: var(--font-sans); font-size: 13px; color: var(--ink-2); line-height: 1.7; }
    .v4m-figure-body strong { color: var(--ink); font-weight: 800; }

    /* ═══ AUTO-BUILT "संदर्भित अन्य लेख" बार — हर v4-modal के अंदर मौजूद
       सभी modal-open-btn / v4m-link-btn (जो किसी दूसरे modal को खोलते हैं)
       को स्क्रिप्ट द्वारा स्कैन कर के यहाँ ऊपर इकट्ठा दिखाया जाता है। मूल
       बटन अपनी जगह पर ज्यों के त्यों बने रहते हैं — यह सिर्फ एक quick-jump
       सूची है। पूरी तरह JS-generated, किसी भी modal में मैन्युअल बदलाव की
       ज़रूरत नहीं। */
    .v4m-related {
      display: flex; flex-direction: column; gap: 10px;
      background: var(--indigo-dim); border: 1px solid var(--rule-2);
      border-radius: var(--r-lg); padding: 14px 16px; margin: 0 0 22px;
    }
    .v4m-related-label {
      display: flex; align-items: center; gap: 6px;
      font-family: var(--font-sans); font-size: 11px; font-weight: 800;
      letter-spacing: 0.05em; text-transform: uppercase; color: var(--indigo);
    }
    .v4m-related-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .v4m-related-chip {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--ink-2);
      background: var(--surface); border: 1px solid var(--rule-2); border-radius: 999px;
      padding: 8px 14px; cursor: pointer; transition: all 0.2s var(--ease);
    }
    .v4m-related-chip .ic { font-size: 14px; line-height: 1; }
    .v4m-related-chip:hover { color: var(--indigo); border-color: var(--indigo); background: var(--indigo-dim); transform: translateY(-1px); }
    @media (max-width: 640px) {
      .v4m-related { padding: 12px 14px; margin: 0 0 18px; border-radius: var(--r-lg); }
      .v4m-related-label { font-size: 10px; }
      .v4m-related-chips { gap: 7px; }
      .v4m-related-chip { font-size: 11.5px; padding: 7px 12px; flex: 1 1 auto; justify-content: center; }
    }

    /* cross-link button row */
    .v4m-link-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 4px; }
    .v4m-link-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--ink-2);
      background: var(--surface); border: 1px solid var(--rule-2); border-radius: 999px;
      padding: 9px 16px; cursor: pointer; transition: all 0.2s var(--ease);
    }
    .v4m-link-btn:hover { color: var(--indigo); border-color: var(--indigo); background: var(--indigo-dim); transform: translateY(-1px); }

    /* recap table */
    .v4m-table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--rule); margin-top: 4px; }
    .v4m-table-wrap table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13.5px; }
    .v4m-table-wrap th {
      background: var(--parchment-2); color: var(--ink-2); font-weight: 800; text-align: left;
      padding: 11px 16px; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
      border-bottom: 1px solid var(--rule);
    }
    .v4m-table-wrap td { padding: 11px 16px; color: var(--ink-2); border-bottom: 1px solid var(--parchment-3); line-height: 1.6; vertical-align: top; }
    .v4m-table-wrap tr:last-child td { border-bottom: none; }
    .v4m-table-wrap tr:nth-child(even) td { background: var(--parchment-2); }
    .v4m-table-wrap td strong { color: var(--ink); font-weight: 800; }

    @media (max-width: 640px) {
      .v4-modal { max-height: 94vh; border-radius: 22px 22px 0 0; }
      .v4m-header { padding: 14px 18px 12px; }
      .v4m-header-content { padding-right: 36px; gap: 12px; }
      .v4m-avatar-ring { width: 48px; height: 48px; }
      .v4m-avatar { width: 42px; height: 42px; font-size: 19px; }
      .v4m-title { font-size: 1.18rem; }
      .v4m-close { top: 12px; right: 14px; }
      .v4m-tabs { padding: 10px 18px; }
      .v4m-body { padding: 20px 18px 38px; }
      .v4m-cards, .v4m-lit-grid { grid-template-columns: 1fr; }
      .v4m-stats { grid-template-columns: repeat(2, 1fr); }
      /* ── timeline icon-rail reclaim ──
         .v4m-node-rail is a fixed 42px column (40px dot + centering) plus a
         16px gap before the text even starts — 58px of "left side area"
         that's mostly just the thin connector line with empty space around
         it. On a ~375-412px phone that's ~20% of the modal's width spent on
         a decorative rail before any content begins, squeezing the actual
         paragraph text into a narrower column than necessary. Shrinking the
         dot/rail/gap here reclaims that space for the text without losing
         the visual timeline. */
      .v4m-node { gap: 10px; }
      .v4m-node-rail { width: 30px; }
      .v4m-node-dot { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
      /* same overhead problem as the timeline rail above, just on the
         chapter/phase divider banner: a 46px icon + 22px padding + 18px
         gap = 86px (≈21% of a 412px screen) spent before the heading text
         even starts. Shrink it on mobile so the banner's own heading gets
         the room it needs instead of wrapping into a cramped column. */
      .v4m-phase { gap: 12px; padding: 14px 14px; }
      .v4m-phase-num { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
    }