/* ============================================================
   INVESTRA v3 - APP LAYER  (app.css)
   Shared, theme-agnostic. Loaded AFTER the theme CSS on every page.
   Uses var(--token) names that BOTH dark.css and light.css define,
   so every rule adapts to the active theme automatically.

   Scope (all ADDITIVE - desktop layout is never altered):
   - Shared shell: ASTRA floating button, disclaimer footer, DRISHTI panel
   - Tap-to-reveal tooltips (mobile hover equivalent)
   - Premium mobile/responsive polish (additive, inside @media only)
   - Liquid-glass performance guard on mobile
   - prefers-reduced-motion
   ============================================================ */

/* ============================================================
   ASTRA FLOATING BUTTON  (every page, logo only, bottom-right)
   ============================================================ */
.astra-fab {
  position: fixed;
  right: calc(26px + env(safe-area-inset-right, 0px));
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  width: 88px; height: 88px;            /* enlarged on desktop per brief */
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border-gold);
  overflow: visible;                    /* let the real canvas fire spill past the circle */
  box-shadow:
    0 6px 22px var(--glass-shadow, rgba(0,0,0,0.35)),
    0 0 22px 2px rgba(255,150,40,0.22),
    0 0 46px 7px rgba(201,168,76,0.14),
    inset 0 0 0 1px var(--glass-shine, transparent);
  cursor: pointer;
  text-decoration: none;
  transition: transform 180ms var(--ease-out, ease), box-shadow 180ms ease, border-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.astra-fab img { width: 84px; height: 84px; object-fit: contain; border-radius: 50%; pointer-events: none; position: relative; z-index: 1; }
/* Real fire is a canvas (.fab-fire-canvas) injected by app.js initFabFire(),
   positioned over the FAB at z-index:299 so flames render behind the opaque
   button/logo and spill above + around it. Warm in both themes (colours in JS). */
.fab-fire-canvas {
  position: fixed;
  z-index: 299;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
  contain: layout style size;
}
@media (prefers-reduced-motion: reduce) { .fab-fire-canvas { display: none !important; } }
.astra-fab::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  transform: scale(1);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .astra-fab:hover { transform: translateY(-3px) scale(1.03); border-color: var(--gold); }
  .astra-fab:hover::after { opacity: 0.6; transform: scale(1.14); }
}
.astra-fab:active { transform: scale(0.94); }

/* FAB tooltip */
.astra-fab .fab-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--bg-card);
  color: var(--text-sub);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms var(--ease-out, ease);
  box-shadow: 0 4px 14px var(--glass-shadow, rgba(0,0,0,0.25));
}
@media (hover: hover) and (pointer: fine) {
  .astra-fab:hover .fab-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ============================================================
   GUIDE BUTTON  (index only) - small, like the theme toggle; re-opens the Guide
   ============================================================ */
.guide-fab {
  position: fixed;
  left: calc(18px + env(safe-area-inset-left, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 290; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card, #1c1c1b);
  border: 1px solid var(--border-gold, rgba(239,211,149,0.4));
  color: var(--gold, #efd395);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
  -webkit-tap-highlight-color: transparent;
}
.guide-fab:hover { transform: translateY(-2px); border-color: var(--gold, #efd395); box-shadow: 0 10px 24px rgba(0,0,0,0.4); }
.guide-fab svg { width: 22px; height: 22px; }
.guide-fab .gf-tip {
  position: absolute; left: calc(100% + 10px); white-space: nowrap;
  background: var(--bg-card); color: var(--text-sub); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 9px; font-size: 11px; font-family: var(--font-mono, monospace);
  opacity: 0; pointer-events: none; transition: opacity 0.16s;
}
@media (hover: hover) and (pointer: fine) { .guide-fab:hover .gf-tip { opacity: 1; } }

/* ============================================================
   BRAND EMBLEM PLATE  (both themes)
   The tight-cropped INVESTRA emblem sits on a dark disc so its gold + white
   ring-text read on any surface (light or dark). app.css loads after the theme
   sheet, so this wins; the disc bg is a fixed dark tone in both themes.
   ============================================================ */
.sidebar-logo {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 38%, #26261f 0%, #131313 72%);
  border: 1px solid var(--border-gold, rgba(239,211,149,0.32));
  object-fit: contain;
  padding: 2px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.40), inset 0 0 0 1px rgba(255,244,214,0.05);
  filter: none;
}

/* ============================================================
   SMALL-SCREEN ADVISORY  (suggest a laptop / PC for the full experience)
   Injected by app.js initDeviceHint() only on narrow screens, once per
   session; the X dismisses it for good. Bottom-left so it clears the FAB.
   ============================================================ */
.device-hint {
  position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right: auto;
  z-index: 280; max-width: min(340px, calc(100vw - 96px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 14px; border-radius: 14px;
  background: var(--glass-bg, var(--bg-card));
  border: 1px solid var(--glass-border, var(--border));
  box-shadow: 0 12px 34px var(--glass-shadow, rgba(0,0,0,0.4));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--text); font-size: 12px; line-height: 1.5;
  transform: translateY(150%); opacity: 0;
  transition: transform 0.5s var(--ease-out, ease), opacity 0.5s ease;
}
.device-hint.show { transform: translateY(0); opacity: 1; }
.device-hint .dh-ic { flex: 0 0 auto; color: var(--gold); margin-top: 1px; }
.device-hint .dh-title { font-weight: 700; color: var(--text); margin-bottom: 2px; font-size: 12.5px; }
.device-hint .dh-body { color: var(--text-sub); }
.device-hint .dh-x {
  flex: 0 0 auto; align-self: flex-start; margin-left: 4px; background: none; border: none;
  color: var(--text-muted); font-size: 17px; line-height: 1; padding: 2px 5px; border-radius: 8px; cursor: pointer;
}
.device-hint .dh-x:hover { color: var(--text); background: var(--bg-hover, rgba(128,128,128,0.12)); }
@media (min-width: 900px) { .device-hint { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .device-hint { transition: opacity 0.3s ease; transform: none; } }

/* ASTRA score + grade pill (tables) */
.astra-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.astra-pill .g { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 17px; padding: 0 5px; border-radius: 4px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.2px; }
.astra-pill.na { color: var(--text-muted); font-weight: 400; }

/* Ticker-only company navigation (most pages); whole-row uses cursor on tbody */
tbody.ticker-link td:first-child { cursor: pointer; }
tbody.ticker-link td:first-child:hover { color: var(--gold); text-decoration: underline; }

/* Honest "Model N/A" valuation badge (pairs with .sig in theme CSS) */
.sig-na {
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ============================================================
   DISCLAIMER FOOTER  (every page)
   ============================================================ */
.disclaimer-footer {
  margin-top: 40px;
  padding: 18px 0 8px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
  max-width: 880px;
}
.disclaimer-footer strong { color: var(--text-sub); font-weight: 600; }
.disclaimer-footer .disc-brand {
  font-family: var(--font-display, serif);
  letter-spacing: 1px;
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.disclaimer-footer .disc-copy {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.6;
}

/* ============================================================
   HEAT TABLE + DIVERGING BARS  (shared chart idiom, both themes)
   ============================================================ */
.heat-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; }
.heat-table { border-collapse: collapse; width: 100%; min-width: 420px; font-variant-numeric: tabular-nums; }
.heat-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-card); color: var(--text-sub); font-size: 10.5px; font-weight: 700; text-align: center; padding: 9px 8px; border-bottom: 1px solid var(--border); letter-spacing: .3px; white-space: nowrap; }
.heat-table th.heat-rowhead-th { text-align: left; }
.heat-table td { font-size: 12px; text-align: center; padding: 8px 8px; border-top: 1px solid var(--border); color: var(--text); font-weight: 600; }
.heat-table tbody tr:first-child td, .heat-table tbody tr:first-child th { border-top: none; }
.heat-rowhead { text-align: left; font-family: var(--font-mono); font-weight: 700; color: var(--text); white-space: nowrap; position: sticky; left: 0; background: var(--bg-card); border-right: 1px solid var(--border); border-top: 1px solid var(--border); cursor: pointer; padding: 8px 11px; font-size: 12px; }
.heat-rowhead:hover { color: var(--gold); }
/* column-leader ring + row hover lift for a richer sector-map read */
.heat-table td.heat-cell { transition: filter .12s ease; }
.heat-table td.heat-best { box-shadow: inset 0 0 0 1.5px var(--accent-contrast, var(--gold)); font-weight: 800; }
.heat-table tbody tr:hover td.heat-cell { filter: brightness(1.08) saturate(1.12); }
.heat-table tbody tr:hover .heat-rowhead { color: var(--gold); background: var(--bg-hover, var(--bg-card)); }
.heat-na { color: var(--text-muted); font-weight: 400; }
.heat-group td { background: var(--bg-input); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-sub); text-align: left; padding: 6px 11px; }
.heat-legend { font-size: 11px; color: var(--text-muted); margin-top: 9px; font-style: italic; }
.dbar-row { display: grid; grid-template-columns: 92px 1fr 66px; align-items: center; gap: 10px; padding: 4px 0; }
.dbar-lbl { font-family: var(--font-mono); font-size: 11px; color: var(--text-sub); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar-lbl:hover { color: var(--gold); }
.dbar-track { position: relative; height: 16px; background: var(--bg-input); border-radius: 4px; overflow: hidden; }
.dbar-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.dbar-fill { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; transition: width .6s var(--ease-out); }
.dbar-val { font-family: var(--font-mono); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .dbar-fill { transition: none; } }
/* segment chips are clickable -> segment profile (site-wide) */
.seg-tag { cursor: pointer; }

/* ============================================================
   PRELOADER SIZING (bigger INVESTRA emblem everywhere; the whole
   card reads larger on laptop/desktop). Overrides the theme css
   (app.css loads after it), so it applies in BOTH themes.
   ============================================================ */
.page-preloader-logo { width: 96px; height: 96px; margin-bottom: 18px; }
.page-preloader-name { font-size: 16px; }
@media (min-width: 1024px) {
  .page-preloader-card { width: 344px; padding: 40px 34px; }
  .page-preloader-logo { width: 128px; height: 128px; margin-bottom: 22px; }
  .page-preloader-name { font-size: 19px; letter-spacing: 1.4px; }
  .page-preloader-sub { font-size: 13px; margin-bottom: 22px; }
}

/* ============================================================
   TAP-TO-REVEAL TOOLTIPS  (mobile hover equivalent)
   Usage: <span class="tip" data-tip="text">…</span>
   Desktop: hover. Touch: tap toggles .tip-open (wired in app.js).
   ============================================================ */
.tip { position: relative; cursor: help; border-bottom: 1px dotted var(--border-strong); }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 240px;
  background: var(--bg-card);
  color: var(--text-sub);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 10px;
  font-size: 11px; line-height: 1.5;
  font-family: var(--font-sans, sans-serif);
  white-space: normal;
  box-shadow: 0 6px 20px var(--glass-shadow, rgba(0,0,0,0.3));
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms var(--ease-out, ease);
  z-index: 50;
}
@media (hover: hover) and (pointer: fine) { .tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } }
.tip.tip-open::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   PREMIUM MOBILE / RESPONSIVE POLISH  (additive - desktop untouched)
   ============================================================ */
/* Use dynamic viewport height where the theme used 100vh */
@supports (min-height: 100dvh) {
  body, .app-shell, .sidebar, .content { min-height: 100dvh; }
}

/* Horizontal-scroll utility for slicer/button strips */
.chip-scroll { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  /* Comfortable touch targets */
  .nav-item { min-height: 44px; }
  .theme-toggle { width: 40px; height: 40px; }
  .tab-btn { min-height: 40px; }
  .hamburger { width: 42px; height: 42px; }

  /* Tab bars & button strips scroll horizontally instead of wrapping/cramping */
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; white-space: nowrap; }

  /* Wide data tables: scroll with momentum + keep the first (ticker) column visible */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap table thead th:first-child,
  .table-wrap table tbody td:first-child {
    position: sticky; left: 0; z-index: 2;
  }
  .table-wrap table thead th:first-child { background: var(--bg-input); }
  .table-wrap table tbody td:first-child { background: var(--bg-card); }
  .table-wrap table tbody tr:hover td:first-child { background: var(--bg-hover); }

  /* Room above the bottom so the ASTRA FAB never covers the last content/footer */
  .content { padding-bottom: 96px; }

  /* Liquid-glass performance guard: drop the expensive SVG-displacement
     backdrop-filter on phones (GPU/battery). Keep a clean solid surface. */
  .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-card);
  }

  /* Moderately sized FAB on phones (still bold), clear of the home indicator */
  .astra-fab { width: 66px; height: 66px; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .astra-fab img { width: 62px; height: 62px; }
}

@media (max-width: 480px) {
  .page-title { font-size: 19px; }
  .kpi-value { font-size: 20px; }
}

/* ============================================================
   ACCESSIBILITY - reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Fire embers - subtle rising-spark ambience behind content (both themes) */
.ember-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Chart tagline - plain-language "how to read this" caption under a chart.
   Token-driven so it reads on both the cosmic-dark and beige-light canvases. */
.chart-tagline {
  margin-top: 13px;
  padding: 9px 13px 9px 13px;
  border-left: 2px solid var(--gold);
  background: var(--gold-dim, rgba(201,168,76,0.08));
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-sub);
}
/* business-mix explainer (Large/Small split + product definitions) */
.bmix-split{margin-top:14px}
.bmix-split-head{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:7px}
.bmix-split-bar{display:flex;height:22px;border-radius:7px;overflow:hidden;border:1px solid var(--border)}
.bmix-seg{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#0b0f17;font-variant-numeric:tabular-nums;transition:width .8s var(--ease-out)}
.bmix-seg.lg{background:linear-gradient(90deg,#6f9ff0,#5b9cf6)}
.bmix-seg.sm{background:linear-gradient(90deg,#3ecfb2,#2bb89a)}
.bmix-split-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:11.5px;color:var(--text-sub)}
.bmix-split-key span{display:inline-flex;align-items:center;gap:6px}
.bmix-split-key i{width:9px;height:9px;border-radius:3px;flex:none}
.bmix-split-key i.lg{background:#5b9cf6}.bmix-split-key i.sm{background:#2bb89a}
.bmix-split-key em{color:var(--text-muted);font-style:normal}
.bmix-defs{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}
.bmix-defs-head{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:8px}
.bmix-def{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:5px 0;font-size:12px;line-height:1.5}
.bmix-def-name{color:var(--text);font-weight:600}
.bmix-def-name b{color:var(--gold);font-family:var(--font-mono)}
.bmix-def-text{color:var(--text-sub)}
@media(max-width:560px){.bmix-def{grid-template-columns:1fr;gap:1px}}
/* LIVE price indicator (shown by assets/js/live.js when the price bridge is on) */
.live-pill{display:inline-flex;align-items:center;margin-left:8px;padding:1px 7px;border-radius:999px;
  font-size:8.5px;font-weight:800;letter-spacing:.8px;color:#0b0f17;background:var(--teal,#3ecfb2);
  animation:livePulse 2.2s ease-in-out infinite;vertical-align:1px;}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.live-pill{animation:none}}
/* inline deep-link to the Research Methods explanation (used wherever a score/signal is shown) */
.mlink { color: var(--accent-contrast, var(--gold)); font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--accent-contrast, var(--gold)); white-space: nowrap; }
.mlink:hover { color: var(--accent-plum, var(--gold-strong, var(--gold))); border-bottom-style: solid; }
/* a small "what is this?" descriptor line that sits under a score/badge */
.score-explain { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); margin-top: 6px; }
.score-explain .mlink { font-size: 11.5px; }
.chart-tagline b, .chart-tagline strong { color: var(--text); font-weight: 600; }
.chart-tagline .tag-key { color: var(--accent-contrast, var(--gold)); font-weight: 700; font-style: normal; }

/* Universe by Segment - market-cap share bars (theme colours injected inline by render fn) */
#segShareChart{height:100%;}
.seg-share{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:7px;}
.ssr{display:flex;flex-direction:column;gap:6px;}
.ssr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ssr-id{display:flex;align-items:center;gap:7px;min-width:0;}
.ssr-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--seg);box-shadow:0 0 7px var(--seg);}
.ssr-name{font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ssr-count{flex:none;font-size:10px;font-weight:500;line-height:1;padding:2px 7px;border:1px solid;border-radius:999px;white-space:nowrap;}
.ssr-nums{flex:none;display:flex;align-items:baseline;gap:10px;white-space:nowrap;}
.ssr-val{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;opacity:.92;}
.ssr-pct{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;min-width:46px;text-align:right;}
.ssr-track{position:relative;height:9px;border-radius:7px;overflow:hidden;}
.ssr-fill{height:100%;width:var(--w);min-width:6px;border-radius:7px;transform:scaleX(0);transform-origin:left center;animation:ssrGrow .8s cubic-bezier(.22,.61,.36,1) var(--d,0ms) forwards;}
.ssr:hover .ssr-fill{filter:brightness(1.12) saturate(1.05);}
@keyframes ssrGrow{to{transform:scaleX(1);}}
@media (prefers-reduced-motion: reduce){.ssr-fill{animation:none;transform:none;}}

/* ============================================================
   HERO - BFSI Universe market map (squarified treemap)
   Tiles are positioned in % by JS (renderUniverseMap). Grade colours
   are fixed (readable in both themes); tile borders adopt the page bg.
   ============================================================ */
.umap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:13px;}
.umap-legend{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--text-muted);font-family:var(--font-mono,monospace);}
.umap-leg-label{letter-spacing:.04em;text-transform:uppercase;}
.umap-leg-end{opacity:.8;}
.umap-grad{width:120px;height:8px;border-radius:5px;background:linear-gradient(90deg,#8f2418,#bf3b2c,#bf6a0c,#b07d0a,#5a9226,#2e9e57,#1b8f4d);}
.umap-host{position:relative;width:100%;height:400px;border-radius:11px;overflow:hidden;}
.umap-tile{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid;border-radius:3px;text-decoration:none;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 22px rgba(0,0,0,.10);transition:filter .15s ease,transform .12s ease,box-shadow .15s ease,z-index 0s;animation:umapIn .55s cubic-bezier(.2,.7,.3,1) var(--d,0ms) both;-webkit-tap-highlight-color:transparent;}
.umap-tile:hover{filter:brightness(1.16) saturate(1.08);z-index:6;transform:scale(1.012);box-shadow:0 6px 22px rgba(0,0,0,.42),0 0 0 1.5px var(--gold);}
.umap-t{font-family:var(--font-mono,monospace);font-size:11px;font-weight:700;letter-spacing:.2px;line-height:1.05;text-shadow:0 1px 2px rgba(0,0,0,.5);max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.umap-s{font-family:var(--font-mono,monospace);font-size:9.5px;font-weight:600;line-height:1.2;color:rgba(255,255,255,.86);text-shadow:0 1px 2px rgba(0,0,0,.5);}
@keyframes umapIn{from{opacity:0;transform:scale(.84);}to{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion: reduce){.umap-tile{animation:none;}}
@media (max-width:700px){.umap-host{height:320px;}.umap-grad{width:84px;}}

/* ============================================================
   ASTRA GALAXY - signature hero (living deep-space universe map)
   Stage interior is always cosmic-dark in both themes; the glass
   card frame adapts via theme tokens. Orbs + tooltip are JS-driven.
   ============================================================ */
.galaxy-head{align-items:flex-start;justify-content:space-between;gap:14px;}
.galaxy-head-main{min-width:0;}
.galaxy-head-tools{display:flex;align-items:center;gap:8px;flex:none;}
.galaxy-theme-hint{font-size:10px;letter-spacing:.02em;color:var(--text-muted);white-space:nowrap;}
.gx-title-gold{color:var(--gold);}
/* legend - single horizontal line under the head */
.galaxy-legend{display:flex;flex-wrap:nowrap;align-items:center;gap:7px 14px;justify-content:center;margin:4px 0 2px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;}
.galaxy-legend::-webkit-scrollbar{display:none;}
.gx-leg{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--text-muted);white-space:nowrap;flex:none;cursor:pointer;padding:3px 7px;border-radius:999px;border:1px solid transparent;transition:border-color .15s,background .15s,color .15s,opacity .15s;}
.gx-leg:hover{color:var(--text-sub);border-color:var(--border-gold);}
.gx-leg i{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 6px currentColor;}
/* interactive legend: when a segment is active, it lights up and the rest dim */
.galaxy-legend.has-active .gx-leg{opacity:.42;}
.galaxy-legend.has-active .gx-leg.active{opacity:1;color:var(--text);border-color:var(--gold);background:var(--gold-dim);font-weight:700;}
.galaxy-stage{position:relative;width:100%;height:452px;border-radius:14px;overflow:hidden;background:#06070f;margin-top:6px;
  box-shadow:inset 0 0 0 1px rgba(201,168,76,0.16), inset 0 0 70px rgba(0,0,0,0.65), 0 14px 44px rgba(0,0,0,0.32);}
.galaxy-bg{position:absolute;inset:0;display:block;}
/* crisp HD planet labels — real DOM text (never canvas), so always sharp */
.galaxy-labels{position:absolute;inset:0;z-index:400;pointer-events:none;overflow:hidden;}
.gx-label{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:1.05;white-space:nowrap;opacity:0;transition:opacity .25s ease;will-change:transform;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;pointer-events:none;}
.gx-label.show{opacity:1;}
.gx-label-name{font-family:var(--font-mono,monospace);font-weight:800;color:#fff;letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(0,0,0,0.98),0 0 8px rgba(0,0,0,0.9),0 0 2px rgba(0,0,0,0.95);}
.gx-label-mc{display:none;}
.galaxy-orbits{position:absolute;inset:0;}
/* orbs are procedural planet canvases; glow kept subtle (no harsh bloom) */
.gx-orb{position:absolute;top:0;left:0;border-radius:50%;cursor:pointer;will-change:transform;opacity:var(--o,1);
  box-shadow:0 0 6px -2px var(--seg), 0 4px 11px rgba(0,0,0,0.5);
  transition:filter .2s ease, box-shadow .2s ease, opacity .25s ease, transform .12s ease;}
.gx-planet{position:absolute;top:0;left:0;border-radius:50%;pointer-events:none;}
.gx-orb.hot{opacity:1 !important;filter:brightness(1.08);box-shadow:0 0 12px 0 var(--seg), 0 0 0 2px rgba(240,210,138,0.7);z-index:300 !important;}
/* hover spotlight - dim the rest of the galaxy to focus the hovered company */
.galaxy-orbits.gx-focus .gx-orb:not(.hot){opacity:calc(var(--o,1) * 0.28);filter:saturate(.7) brightness(.8);}
.gx-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,0.75);padding:4px;line-height:1;}
.gx-lbl b{font-size:12px;font-weight:700;letter-spacing:.01em;}
.gx-lbl i{font-size:10px;font-style:normal;font-weight:600;opacity:.94;margin-top:3px;font-variant-numeric:tabular-nums;}
.galaxy-scale{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.14em;color:rgba(222,212,182,0.62);pointer-events:none;text-transform:uppercase;}
.gx-scale-bar{width:130px;height:5px;border-radius:4px;background:linear-gradient(90deg,rgba(201,168,76,0.16),rgba(240,210,138,0.95));box-shadow:0 0 10px rgba(240,210,138,0.4);}
/* premium glass tooltip - gold border, always cosmic-dark */
.galaxy-tip{position:absolute;left:0;top:0;z-index:500;width:250px;max-width:80%;padding:13px 14px;border-radius:14px;pointer-events:none;opacity:0;transform:translateY(5px) scale(.97);transition:opacity .16s ease, transform .16s ease;
  background:linear-gradient(160deg, rgba(22,24,37,0.93), rgba(10,12,22,0.96));backdrop-filter:blur(15px) saturate(1.25);-webkit-backdrop-filter:blur(15px) saturate(1.25);
  border:1px solid rgba(201,168,76,0.55);box-shadow:0 20px 54px rgba(0,0,0,0.62), 0 0 0 1px rgba(201,168,76,0.12), inset 0 1px 0 rgba(255,255,255,0.07);color:#e7dfca;}
.galaxy-tip.show{opacity:1;transform:translateY(0) scale(1);}
.gx-tip-head{display:flex;align-items:center;gap:7px;padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid rgba(201,168,76,0.2);}
.gx-tip-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.gx-tip-name{font-size:13px;font-weight:700;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gx-tip-seg{font-size:9px;font-weight:600;padding:2px 7px;border:1px solid;border-radius:999px;white-space:nowrap;}
.gx-tip-grid{display:flex;flex-direction:column;gap:4px;}
.gx-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11px;}
.gx-row>span{color:rgba(231,223,202,0.6);}
.gx-row>b{font-weight:600;font-variant-numeric:tabular-nums;color:#ece6d2;}
.gx-row>b.pos{color:#3ecfb2;} .gx-row>b.neg{color:#f0876f;}
.gx-tip-badges{display:flex;align-items:center;gap:7px;margin-top:10px;}
.gx-tip-badges .sig{flex:1;text-align:center;}
.gx-grade{font-size:10px;font-weight:700;color:#06070f;padding:3px 9px;border-radius:7px;white-space:nowrap;}
.gx-tip-cta{display:block;margin-top:10px;padding-top:9px;border-top:1px solid rgba(201,168,76,0.2);font-size:11px;font-weight:600;color:#e6c46a;text-decoration:none;text-align:right;pointer-events:auto;}
.gx-tip-cta:hover{color:#f4d98a;}
.galaxy-bg{touch-action:pan-y;}
@media (max-width:700px){.galaxy-stage{height:368px;}.galaxy-tip{width:212px;}}
@media (prefers-reduced-motion: reduce){.galaxy-tip{transition:none;}}

/* ---- Home hero: ASTRA Galaxy as the first visual (rotating spiral galaxy + HUD overlay) ---- */
.galaxy-hero{position:relative;}
.galaxy-hero .galaxy-stage{height:clamp(500px,70vh,700px);margin-top:0;border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(201,168,76,0.2), inset 0 0 120px rgba(0,0,0,0.5), 0 26px 64px rgba(0,0,0,0.38);}
.gx-hud{position:absolute;z-index:450;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);}
.galaxy-stage.gx-ready .gx-hud{opacity:1;transform:none;}
.gx-hud-top{left:28px;top:24px;max-width:min(540px,58%);}
.gx-kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:rgba(231,210,150,.75);}
.gx-title{font-family:var(--font-display);font-size:clamp(30px,3.5vw,48px);font-weight:700;letter-spacing:.07em;color:#f4eddb;line-height:1.04;margin-top:9px;text-shadow:0 2px 26px rgba(0,0,0,.65);}
.gx-title .gx-title-gold{background:linear-gradient(95deg,#f8e2a0 0%,#d4a94e 48%,#f3d686 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 18px rgba(201,168,76,.35));}
.gx-sub{font-size:12px;line-height:1.6;color:rgba(231,223,202,.7);margin-top:10px;max-width:430px;text-shadow:0 1px 8px rgba(0,0,0,.8);}
.gx-hud-stats{right:24px;top:24px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:40%;transition-delay:.15s;}
.gx-stat{font-family:var(--font-mono);font-size:11px;color:#efe6cc;padding:6px 12px;border-radius:999px;background:rgba(10,12,22,.55);border:1px solid rgba(201,168,76,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;}
.gx-stat b{color:#f1d27e;font-weight:700;}
.galaxy-legend.gx-hud-legend{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:450;margin:0;padding:6px 8px;border-radius:999px;
  background:rgba(8,10,20,.58);border:1px solid rgba(201,168,76,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:calc(100% - 32px);opacity:0;transition:opacity 1s var(--ease-out) .3s;}
.galaxy-stage.gx-ready .gx-hud-legend{opacity:1;}
.gx-hud-legend .gx-leg{color:rgba(231,223,202,.8);border-color:transparent;}
.gx-hud-legend .gx-leg:hover{color:#fff;border-color:rgba(201,168,76,.5);}
.gx-hud-legend.has-active .gx-leg.active{color:#fff;background:rgba(201,168,76,.2);border-color:rgba(201,168,76,.75);}
@media (max-width:700px){ .galaxy-hero .galaxy-stage{height:440px;border-radius:14px;} .gx-hud-top{left:16px;top:14px;max-width:84%;} .gx-sub,.gx-hud-stats{display:none;} .galaxy-legend.gx-hud-legend{bottom:10px;} }
@media (prefers-reduced-motion: reduce){ .gx-hud,.galaxy-legend.gx-hud-legend{transition:none;} }

/* ---- Home: BFSI Market Map (replaces the segment donut) ---- */
.mm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.mm-modes{display:flex;flex:none;}
.mm-mode{padding:5px 11px;font-size:10.5px;font-weight:600;color:var(--text-sub);background:transparent;border:1px solid var(--border);border-left-width:0;cursor:pointer;font-family:inherit;transition:background .12s var(--ease-out),color .12s var(--ease-out);}
.mm-mode:first-child{border-left-width:1px;border-radius:999px 0 0 999px;padding-left:13px;}
.mm-mode:last-child{border-radius:0 999px 999px 0;padding-right:13px;}
.mm-mode:hover:not(.active){color:var(--text);background:var(--bg-input);}
.mm-mode.active{background:var(--accent-contrast-dim,var(--gold-dim));color:var(--accent-contrast,var(--text));box-shadow:inset 0 0 0 1px var(--accent-contrast,var(--gold));font-weight:700;}
.mm-mode:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.mm-wrap{position:relative;height:300px;margin-top:12px;border-radius:12px;overflow:hidden;background:var(--bg-input);}
.mm-seg{position:absolute;border-radius:9px;overflow:hidden;background:color-mix(in srgb,var(--seg) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--seg) 55%,transparent);}
.mm-seg-head{position:absolute;left:0;top:0;right:0;height:18px;display:flex;align-items:center;gap:6px;padding:0 8px;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mm-seg-head span{font-family:var(--font-mono);color:var(--text-sub);font-weight:600;letter-spacing:.02em;}
.mm-seg-head:hover{color:var(--gold);}
.mm-tile{position:absolute;border-radius:5px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;line-height:1.12;padding:2px;
  transition:background-color .45s var(--ease-out),color .45s var(--ease-out),filter .15s ease,box-shadow .15s ease;}
.mm-tile:hover{filter:brightness(1.14) saturate(1.05);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8),0 6px 18px rgba(0,0,0,.3);z-index:3;}
.mm-tile b{font-family:var(--font-mono);font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap;}
.mm-tile i{font-style:normal;font-family:var(--font-mono);font-size:9.5px;opacity:.85;margin-top:2px;white-space:nowrap;}
.mm-tile.mm-in{animation:mmIn .6s var(--ease-out) both;}
@keyframes mmIn{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:none;}}
.mm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:11px;color:var(--text-muted);min-height:18px;flex-wrap:wrap;}
.mm-foot b{color:var(--text);}
.mm-scale{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;}
.mm-scale .bar{width:120px;height:7px;border-radius:5px;display:inline-block;}
.mm-tip{position:absolute;left:0;top:0;z-index:20;width:236px;padding:11px 13px;border-radius:12px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;
  background:var(--bg-card);border:1px solid var(--border-gold,var(--gold));box-shadow:0 16px 42px rgba(0,0,0,.34);font-size:11.5px;color:var(--text);}
.mm-tip.show{opacity:1;transform:none;}
.mm-tip .h{font-weight:700;font-size:12.5px;margin-bottom:7px;display:flex;gap:7px;align-items:center;line-height:1.3;}
.mm-tip .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.mm-tip .r{display:flex;justify-content:space-between;gap:10px;padding:2px 0;color:var(--text-muted);}
.mm-tip .r b{font-family:var(--font-mono);color:var(--text);font-weight:600;text-align:right;}
.mm-tip .b{margin-top:8px;}
@media (max-width:700px){ .mm-wrap{height:260px;} .mm-modes{width:100%;} .mm-mode{flex:1;} }
@media (prefers-reduced-motion: reduce){ .mm-tile.mm-in{animation:none;} .mm-tile{transition:none;} }

/* fixed page theme toggle - top-right corner of every page */
.theme-toggle-fixed{position:fixed;top:14px;right:18px;z-index:1200;box-shadow:0 6px 18px rgba(0,0,0,0.3);}
.content .page-header{padding-right:56px;}
@media (max-width:760px){.theme-toggle-fixed{top:10px;right:12px;}.content .page-header{padding-right:48px;}}

/* ============================================================
   Premium custom dropdown (.psel) - replaces native <select>
   ============================================================ */
.psel{position:relative;display:inline-block;min-width:150px;max-width:100%;vertical-align:top;}
.psel-native{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0);overflow:hidden;}
.psel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 13px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.psel-btn:hover{border-color:var(--border-gold);}
.psel.open .psel-btn{border-color:var(--border-gold);box-shadow:0 0 0 2px rgba(201,168,76,0.16);}
.psel-cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.psel-chev{flex:none;width:13px;height:13px;color:var(--text-muted);transition:transform .2s;}
.psel.open .psel-chev{transform:rotate(180deg);}
.psel-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:340px;z-index:400;max-height:288px;overflow-y:auto;padding:5px;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border-gold);box-shadow:0 18px 44px rgba(0,0,0,0.42);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s,transform .16s;}
.psel.open .psel-menu{opacity:1;transform:translateY(0);pointer-events:auto;}
.psel-search{width:100%;padding:7px 10px;margin-bottom:5px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;font-family:inherit;outline:none;}
.psel-search:focus{border-color:var(--border-gold);}
.psel-opt{padding:8px 11px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s;}
.psel-opt:hover{background:var(--bg-input);}
.psel-opt.sel{color:var(--gold);font-weight:700;background:var(--bg-input);}
.psel-menu::-webkit-scrollbar{width:8px;}
.psel-menu::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

/* Company slicer (Banks + NBFC): centered group tabs + Reset on top, single-line company chips */
.co-slicer { display: flex; flex-direction: column; gap: 11px; }
.co-slicer-top { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; }
.co-slicer-list { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.co-slicer-list .co-chip { flex: 0 0 auto; }
/* ---- Slicer visual upgrade (both themes, token-only; no wiring changed) ---- */
.co-slicer .tab-btn { transition: background .12s var(--ease-out), border-color .12s var(--ease-out), color .12s var(--ease-out), transform .12s var(--ease-out), box-shadow .12s var(--ease-out); }
.co-slicer .tab-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* group buttons form a joined segmented control */
.co-slicer-top .tab-btn[data-seg] { flex: 0 0 auto; padding: 7px 15px; border: 1px solid var(--border); border-left-width: 0; border-radius: 0; background: transparent; color: var(--text-sub); font-weight: 600; }
.co-slicer-top .tab-btn[data-seg]:first-of-type { border-left-width: 1px; border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.co-slicer-top .tab-btn[data-seg]:has(+ .co-reset), .co-slicer-top .tab-btn[data-seg]:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.co-slicer-top .tab-btn[data-seg]:hover:not(.active) { color: var(--text); background: var(--bg-input); }
.co-slicer-top .tab-btn[data-seg].active { background: var(--accent-contrast-dim, var(--gold-dim, rgba(201,168,76,0.16))); color: var(--accent-contrast, var(--text)); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent-contrast, var(--gold)); }
/* company chips: outline when off, filled-gold when on */
.co-chip { flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-sub); font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; }
.co-chip:hover:not(.active) { color: var(--text); border-color: var(--gold); transform: translateY(-1px); }
.co-chip.active { background: var(--accent-contrast-dim, var(--gold-dim, rgba(201,168,76,0.16))); border-color: var(--accent-contrast, var(--gold)); color: var(--accent-contrast, var(--text)); box-shadow: inset 0 0 0 1px var(--accent-contrast, var(--gold)); font-weight: 700; }
/* reset: quiet ghost button, clearly secondary */
.co-reset { flex: 0 0 auto; margin-left: 12px !important; padding: 6px 13px; border: 1px dashed var(--border); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.co-reset:hover { color: var(--coral); border-color: var(--coral); background: transparent; }
/* live "N selected" count */
.co-count { flex: 0 0 auto; margin-left: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); letter-spacing: .3px; }
.co-count b { color: var(--gold); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .co-slicer .tab-btn { transition: none; } }

/* EKLA - key-metrics grid + history metric chips */
.ekla-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px 30px;}
.ekla-mgrp{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--gold);font-weight:700;margin:12px 0 3px;}
.ekla-mcol .kv{padding:5px 0;}
.hist-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px;}
.hist-chips .pickchip{padding:4px 11px;font-size:11px;}
.hist-chips .pickchip[disabled]{opacity:.35;cursor:not-allowed;}

/* ============================================================
   HOME PRELOADER - "energy core" logo intro
   Mirrors the gold powering-up reference: a core glow pulses and
   horizontal energy beams flash at the peak. Defined here with var()
   tokens + theme-agnostic keyframes so BOTH themes animate identically
   (gold-on-cosmic in dark, warm-gold-on-beige in light) and neither breaks.
   ============================================================ */
#preloader .energy-stage { position: relative; display: inline-flex; align-items: center; justify-content: center; }
#preloader .preloader-pulse { z-index: 2; }
#preloader .preloader-logo {
  position: relative; z-index: 3; opacity: 0;
  animation: pl-logo-in 0.8s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) forwards,
             pl-logo-glow 2.6s cubic-bezier(0.45,0,0.2,1) 0.8s infinite;
}
@keyframes pl-logo-in {
  0%   { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes pl-logo-glow {
  0%,100% { filter: drop-shadow(0 0 10px var(--gold-glow)); }
  46%     { filter: drop-shadow(0 0 26px var(--gold-bright)) drop-shadow(0 0 46px var(--gold-glow)); }
  64%     { filter: drop-shadow(0 0 16px var(--gold-glow)); }
}
.energy-core {
  position: absolute; top: 50%; left: 50%; width: 210px; height: 210px;
  transform: translate(-50%,-50%) scale(0.6); border-radius: 50%;
  background: radial-gradient(circle, var(--gold-bright) 0%, var(--gold) 22%, transparent 62%);
  filter: blur(16px); opacity: 0.35; z-index: 1; pointer-events: none;
  animation: energy-core-pulse 2.6s cubic-bezier(0.45,0,0.2,1) infinite;
}
@keyframes energy-core-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(0.6); opacity: 0.30; }
  46%     { transform: translate(-50%,-50%) scale(1.28); opacity: 0.9; }
  64%     { transform: translate(-50%,-50%) scale(1.0); opacity: 0.5; }
}
.energy-beam {
  position: absolute; top: 50%; left: 50%; width: 640px; max-width: 94vw; height: 2px;
  transform: translate(-50%,-50%) scaleX(0.12);
  background: linear-gradient(90deg, transparent 0%, var(--gold) 28%, var(--gold-bright) 50%, var(--gold) 72%, transparent 100%);
  box-shadow: 0 0 14px var(--gold-glow); filter: blur(0.4px);
  opacity: 0; z-index: 1; pointer-events: none;
  animation: energy-beam-flash 2.6s cubic-bezier(0.45,0,0.2,1) infinite;
}
.energy-beam.beam-2 { width: 440px; height: 1px; opacity: 0; animation-delay: 0.07s; }
@keyframes energy-beam-flash {
  0%,38%  { opacity: 0; transform: translate(-50%,-50%) scaleX(0.12); }
  47%     { opacity: 0.95; transform: translate(-50%,-50%) scaleX(1); }
  58%     { opacity: 0.22; transform: translate(-50%,-50%) scaleX(1); }
  64%,100%{ opacity: 0; transform: translate(-50%,-50%) scaleX(1); }
}

/* ============================================================
   MAIN PRELOADER (index) - pure logo-formation, ~5.5s, no bar
   Overrides the older energy-core intro. Theme-agnostic via tokens.
   ============================================================ */
#preloader { background: var(--bg-base); }
.preloader-logo-wrap { gap: 16px; }
.pl-stage { position: relative; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; }
#preloader .preloader-logo { width: 150px; height: 150px; object-fit: contain; opacity: 0; animation: plLogoForm 1.7s cubic-bezier(.22,.61,.36,1) 0.2s forwards; }
@media (min-width: 1024px) {
  .pl-stage { width: 224px; height: 224px; }
  #preloader .preloader-logo { width: 180px; height: 180px; }
  .pl-ring { width: 224px !important; height: 224px !important; }
}
@keyframes plLogoForm {
  0%   { opacity: 0; transform: scale(0.58); filter: blur(16px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.pl-ring { position: absolute; top: 50%; left: 50%; width: 190px; height: 190px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; transform: translate(-50%,-50%) scale(0.35); }
.pl-ring:nth-child(1) { animation: plRing 2.8s ease-out 0.15s infinite; }
.pl-ring:nth-child(2) { animation: plRing 2.8s ease-out 1.05s infinite; }
.pl-ring:nth-child(3) { animation: plRing 2.8s ease-out 1.95s infinite; }
@keyframes plRing {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.35); }
  16%  { opacity: 0.45; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); }
}
#preloader .preloader-wordmark { opacity: 0; animation: plUp 0.85s cubic-bezier(.22,.61,.36,1) 1.7s forwards; }
#preloader .preloader-sanskrit { opacity: 0; animation: plUp 0.85s cubic-bezier(.22,.61,.36,1) 2.4s forwards; }
#preloader .preloader-tagline { opacity: 0; animation: plUp 0.85s cubic-bezier(.22,.61,.36,1) 3.0s forwards; }
.preloader-tagline2 { font-size: 12px; color: var(--text-muted); letter-spacing: 0.2px; text-align: center; max-width: 430px; line-height: 1.6; margin-top: 2px; opacity: 0; animation: plUp 0.9s cubic-bezier(.22,.61,.36,1) 3.5s forwards; }
@keyframes plUp { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
.preloader-pulse, .preloader-bar-wrap, .energy-stage .energy-core, .energy-stage .energy-beam { display: none !important; }
/* ASTRA-yug cosmic entry */
.pl-cosmos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#preloader .preloader-logo-wrap { position: relative; z-index: 3; }
.pl-halo { position: absolute; top: 50%; left: 50%; width: 340px; height: 340px; border-radius: 50%; transform: translate(-50%,-50%) scale(0.4); background: radial-gradient(circle, rgba(244,217,138,0.22) 0%, rgba(201,168,76,0.08) 34%, transparent 66%); opacity: 0; filter: blur(6px); pointer-events: none; animation: plHalo 3.2s cubic-bezier(.22,.61,.36,1) 0.5s forwards; }
@media (min-width:1024px){ .pl-halo { width: 440px; height: 440px; } }
@keyframes plHalo { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.4); } 55% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  #preloader .preloader-logo, .pl-ring, #preloader .preloader-wordmark, #preloader .preloader-sanskrit, #preloader .preloader-tagline, .preloader-tagline2 { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .pl-cosmos, .pl-halo { display: none !important; }
}

/* ============================================================
   R4 - LIVE FIRE on the currently-open nav item (both themes)
   The open page reads as "lit": a flickering flame runs down the
   left edge + a warm ember wash breathes across the row. Pure CSS,
   token-driven, GPU-friendly. app.css loads last so this wins.
   ============================================================ */
.nav-item.active {
  border-left-color: transparent;
  background: linear-gradient(90deg, rgba(255,150,60,0.14), rgba(240,115,96,0.05) 55%, transparent);
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(0deg, #ff5a2c, #ffae3c 35%, #ffd24a 60%, #ff7a2c 100%);
  background-size: 100% 280%;
  box-shadow: 0 0 10px 1px rgba(255,160,60,0.7), 0 0 20px 3px rgba(255,90,40,0.42);
  animation: navFlameGlow 2.2s ease-in-out infinite;   /* R20: opacity + scale only (compositor); the canvas fire carries the flicker */
  will-change: opacity, transform;
  z-index: 2;
}
@keyframes navFlameGlow {
  0%,100% { opacity: .78; transform: scaleY(1); }
  40%     { opacity: 1; transform: scaleY(1.04); }
  70%     { opacity: .86; transform: scaleY(0.98); }
}
.nav-item.active::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 130% at 0% 50%, rgba(255,140,50,0.18), rgba(255,90,40,0.05) 55%, transparent 75%);
  animation: navEmber 2.4s ease-in-out infinite; opacity: 0.7;
}
@keyframes navEmber { 0%,100% { opacity: 0.5; } 35% { opacity: 0.95; } 65% { opacity: 0.68; } }
/* real (canvas) fire on the open nav item; text/icon stay above it */
.nav-item.active .nav-fire { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0; mix-blend-mode: screen; }
.nav-item.active .nav-fire.nav-fire-light { mix-blend-mode: multiply; opacity: .9; }   /* R19: light theme - the flame darkens into the cream instead of washing out */
.nav-item.active .nav-icon { position: relative; z-index: 1; }

/* ============================================================
   R4 - ASTRA shown as the PREMIUM tool in the sidebar index.
   A gold-bordered plaque with a glowing star icon and a slow
   "sheen" sweep + a PRO marker, so it's instantly identifiable
   as the signature weapon. (When ASTRA is the open page, the
   live-fire rules above take over via source order.)
   ============================================================ */
.nav-item.nav-astra {
  margin: 5px 12px; padding: 10px 13px; border-radius: 11px;
  border: 1px solid var(--border-gold);
  background: linear-gradient(120deg, rgba(201,168,76,0.12), rgba(240,115,96,0.05));
  font-weight: 700; letter-spacing: 0.4px; color: var(--gold);
  overflow: hidden; isolation: isolate;
}
.nav-item.nav-astra:hover { border-color: var(--gold); background: linear-gradient(120deg, rgba(201,168,76,0.2), rgba(240,115,96,0.08)); }
.nav-item.nav-astra .nav-icon { width: 18px; height: 18px; color: var(--gold); opacity: 1; filter: drop-shadow(0 0 6px var(--gold-glow)); animation: astraStar 3.4s ease-in-out infinite; will-change: transform; }
@keyframes astraStar { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(12deg) scale(1.08); } }   /* R20: no animated filter */
.nav-item.nav-astra:not(.active)::before {
  content: '\2726'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; line-height: 1; color: var(--gold-bright); opacity: 1;
  text-shadow: 0 0 8px var(--gold-glow); z-index: 3;
  animation: astraSpark 3.2s ease-in-out infinite;
}
@keyframes astraSpark { 0%,100% { opacity: .85; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.18); } }
.nav-item.nav-astra:not(.active)::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,235,180,0.4), transparent);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none; z-index: 1;
  animation: astraSheen 6s ease-in-out infinite; will-change: transform;
}
@keyframes astraSheen { 0%,70% { transform: translateX(-160%) skewX(-18deg); } 85%,100% { transform: translateX(320%) skewX(-18deg); } }   /* R20: transform, not left */

@media (prefers-reduced-motion: reduce) {
  .nav-item.active::before, .nav-item.active::after, .nav-item.nav-astra .nav-icon, .nav-item.nav-astra::after, .nav-item.nav-astra::before { animation: none !important; }
}

/* ============================================================
   R4 - COHESIVE MOTION, 3D TILT, SCROLL FLOW & TYPE POLISH
   Goal: the site should read as ONE continuous, living surface -
   sections ease in as you approach (no abrupt pop), cards respond
   in 3D so the page feels physical, and a hairline progress thread
   ties the whole scroll together. Transform / opacity only.
   ============================================================ */

/* --- gentler, EARLIER reveals so content is already settling as you
   reach it (the JS fires the observer ahead of the fold). Shorter
   travel + ease-out-expo = a calm "rise into place", not a pop. --- */
.fade-up { transform: translateY(13px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.scale-in { transform: scale(0.97); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
/* No stagger: the first screen reveals together (real-time), not one-by-one. */

/* Site-wide smooth scrolling (reduced-motion falls back to instant) */
html { scroll-behavior: smooth; }
/* Reveal variants: modifiers on .fade-up so they ride the SAME IntersectionObserver
   trigger (.visible) with zero new scroll listeners - exactly like the existing
   .fade-up.visible { transform: translateY(0) } settle. Transform/opacity only. */
.fade-up.reveal-left { transform: translateX(-20px); }
.fade-up.reveal-left.visible { transform: translateX(0); }
.fade-up.reveal-scale { transform: scale(0.98); }
.fade-up.reveal-scale.visible { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up.reveal-left, .fade-up.reveal-scale { transform: none; }
}

/* --- 3D parallax tilt: discrete tiles lean toward the cursor --- */
/* HD: tiles are NOT promoted to a 3D layer at rest - a permanent will-change/preserve-3d made
   Chrome rasterise their text as a texture (soft on 1x / 125% / 150% screens). Only while tilting. */
.kpi-card, .sg-preset, .battle-card { position: relative; }
.kpi-card.tilting, .sg-preset.tilting, .battle-card.tilting {
  transform-style: preserve-3d; will-change: transform;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .12s linear, box-shadow .2s var(--ease-out);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.5), 0 0 0 1px var(--border-gold);
  z-index: 5;
}
.kpi-card:not(.tilting), .sg-preset:not(.tilting), .battle-card:not(.tilting) { transition: transform .5s var(--ease-out), box-shadow .35s var(--ease-out); }
/* a soft cursor-spotlight sheen on tilted tiles (its own layer, no pseudo clash) */
.tilt-glow { position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s var(--ease-out);
  background: radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(255,225,140,.16), transparent 60%); z-index:1; }
.tilting > .tilt-glow { opacity:1; }

/* --- hairline scroll-progress thread (one continuous experience) --- */
.scroll-progress { position:fixed; top:0; left:0; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright), #ff9a45); box-shadow:0 0 10px var(--gold-glow);
  z-index:1400; pointer-events:none; }

/* --- typography polish: tabular data, tighter premium headings --- */
.kpi-value, .mono, table td.mono, .gauge-big, .pillar-score { font-variant-numeric: tabular-nums; }
.sidebar-wordmark, .preloader-wordmark, .page-title { letter-spacing:.5px; }
.kpi-label, .section-meta, .chart-sub { font-feature-settings:"ss01" on; }

@media (prefers-reduced-motion: reduce) {
  .kpi-card.tilting, .sg-preset.tilting, .battle-card.tilting { transform:none !important; }
  .scroll-progress { display:none; }
}
@media (hover: none) {
  .kpi-card.tilting, .sg-preset.tilting, .battle-card.tilting { transform:none; }
}

/* ============================================================
   R4 - type rendering refinement (kept the Cinzel + DM Sans + JetBrains
   Mono identity; this just makes it render crisper everywhere).
   ============================================================ */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto; }

/* ============================================================
   R4 - sentence-case the first letter of descriptive text everywhere
   (chart subs, captions, taglines, metas often authored lowercase).
   ::first-letter only touches the very first glyph, so acronyms / units
   mid-string are untouched, and it applies to dynamically-set text too.
   ============================================================ */
.chart-sub::first-letter, .section-meta::first-letter, .page-meta::first-letter,
.chart-tagline::first-letter, .note-line::first-letter, .gauge-sub::first-letter,
.drishti-sub::first-letter, .page-subtitle::first-letter, .sgp-meta::first-letter,
.sg-preset-intro::first-letter, .vh-hint::first-letter, .rng52-pct::first-letter,
.vc-thanks::first-letter, .vs-body::first-letter { text-transform: uppercase; }

/* ============================================================
   R4 - premium 52-WEEK PRICE RANGE component (shared, both themes)
   A gradient low->high track with a glowing marker at the live price,
   L52 / CMP / H52 labels and "% of range from 52W low".
   Rendered by window.render52Week() into any container.
   ============================================================ */
.rng52-host { overflow: visible !important; }   /* let the 52-week tooltip escape the card */
.rng52 { width: 100%; }
.rng52-src { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .3px; color: var(--text-muted); margin: 12px 0 0; }
.r52-src-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.r52-src-dot.on { background: #34d39e; box-shadow: 0 0 0 3px rgba(52,211,158,.18); animation: r52pulse 2s ease-in-out infinite; }
.rng52-livetag { display: inline-block; vertical-align: 2px; margin-left: 8px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; color: #34d39e; border: 1px solid rgba(52,211,158,.45); background: rgba(52,211,158,.10); border-radius: 999px; padding: 2px 8px; }
.rng52-head { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rng52-title { font-family: var(--font-display, serif); font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.rng52-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--accent-contrast, var(--gold)); background: var(--accent-contrast-dim, var(--gold-dim)); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.rng52-live .r52-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d39e; box-shadow: 0 0 0 3px rgba(52,211,158,.18); animation: r52pulse 2s ease-in-out infinite; }
@keyframes r52pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.rng52-bar { margin-top: 46px; }   /* room for the CMP flag above the track */
.rng52-flag { position: absolute; bottom: calc(100% + 12px); left: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border-gold, var(--gold)); box-shadow: 0 5px 16px rgba(0,0,0,.32); z-index: 3; transition: left 1s cubic-bezier(.22,1,.36,1); }
.rng52-flag b { display: block; font-family: var(--font-mono); font-size: 14.5px; font-weight: 800; color: var(--gold); line-height: 1.1; }
.rng52-flag i { font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); font-style: normal; }
.rng52-flag::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--border-gold, var(--gold)); }
.rng52-row em { display: block; font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: 2px; }
.rng52-badges { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.r52b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); }
.r52b.pos { color: #2aa06e; border-color: rgba(52,211,158,.34); background: rgba(52,211,158,.08); }
.r52b.neg { color: #d9614e; border-color: rgba(240,135,111,.34); background: rgba(240,135,111,.08); }
.rng52-explain { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin: 0 0 6px; max-width: 70ch; }
.rng52-bar { margin-top: 36px; }   /* room above the centred bar so the tooltip is fully visible */
.rng52-track { position: relative; height: 8px; border-radius: 6px; background: linear-gradient(90deg, rgba(120,130,150,.16), rgba(120,130,150,.28)); }
.rng52-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, #ef5a3f, #f5a623 42%, #e6c44d 66%, #34d39e); transition: width 1s cubic-bezier(.22,1,.36,1); }
.rng52-marker { position: absolute; top: 50%; left: 0; width: 17px; height: 17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold-bright) 55%, var(--gold)); border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px var(--gold-glow), 0 2px 10px rgba(0,0,0,.45), 0 0 14px var(--gold); transition: left 1s cubic-bezier(.22,1,.36,1); z-index: 2; cursor: pointer; outline: none; }
.rng52-marker::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }   /* larger hit area */
.rng52-tip { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(5px) scale(.97); transform-origin: bottom center; width: max-content; max-width: 240px; padding: 12px 14px; border-radius: 13px; background: linear-gradient(160deg, rgba(24,26,40,.98), rgba(9,11,20,.99)); border: 1px solid rgba(201,168,76,.45); box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.1), inset 0 1px 0 rgba(255,255,255,.06); color: #e7dfca; display: flex; flex-direction: column; gap: 7px; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); z-index: 60; }
.rng52-tip .rt-cmp { font-family: var(--font-mono); font-size: 12px; color: rgba(231,223,202,.6); letter-spacing: .5px; text-transform: uppercase; display: flex; align-items: baseline; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid rgba(201,168,76,.18); }
.rng52-tip .rt-cmp b { color: var(--gold-bright); font-size: 17px; font-weight: 800; letter-spacing: 0; }
.rng52-tip .rt-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: #ece6d2; }
.rng52-tip .rt-row svg { flex: none; }
.rng52-tip .rt-row.pos { color: #34d39e; } .rng52-tip .rt-row.neg { color: #f0876f; }
.rng52-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: rgba(10,12,21,.99); }
.rng52-marker:hover .rng52-tip, .rng52-marker:focus .rng52-tip { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
/* edge-aware variants so the tip never runs off-screen */
.rng52-tip.tip-left { left: -10px; transform: translateX(0) translateY(5px) scale(.97); }
.rng52-tip.tip-left::after { left: 20px; }
.rng52-marker:hover .rng52-tip.tip-left, .rng52-marker:focus .rng52-tip.tip-left { transform: translateX(0) translateY(0) scale(1); }
.rng52-tip.tip-right { left: auto; right: -10px; transform: translateX(0) translateY(5px) scale(.97); }
.rng52-tip.tip-right::after { left: auto; right: 20px; transform: none; }
.rng52-marker:hover .rng52-tip.tip-right, .rng52-marker:focus .rng52-tip.tip-right { transform: translateX(0) translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .rng52-tip { transition: none; } }
.rng52-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; gap: 10px; }
.rng52-lo, .rng52-hi { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.rng52-cmp { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.rng52-pct { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 7px; }
@media (prefers-reduced-motion: reduce) { .rng52-fill, .rng52-marker { transition: none; } }

/* ============================================================
   R4 - SVG arc GAUGES (key-metric dials) - shared, both themes
   ============================================================ */
.gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.gauge { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 10px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.gauge-svg { width: 142px; height: 138px; display: block; overflow: visible; }
.gauge-needle { transform-box: view-box; transform-origin: 60px 64px; animation: needleIn 1s cubic-bezier(.34,1.4,.5,1) both; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
@keyframes needleIn { from { transform: rotate(var(--r0, -90deg)); } to { transform: rotate(0); } }
.gauge-val { font-family: var(--font-mono); font-size: 21px; font-weight: 800; }
.gauge-unit { font-family: var(--font-mono); font-size: 8.5px; fill: var(--text-muted); }
.gauge-cap { margin-top: 12px; }
.gauge-label { font-size: 11.5px; font-weight: 600; color: var(--text-sub); line-height: 1.3; }
.gauge-sub { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .gauge-arc { animation: none; stroke-dashoffset: 0; } .gauge-needle { animation: none; } }

/* Layout: let the main column and grid cells shrink so wide tables scroll INSIDE their .table-wrap
   (a flex/grid item defaults to min-width:auto = the table width, which stretched whole pages on
   narrow screens). */
.content { min-width: 0; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

/* ---- CSV download button (home universe table, company "why this score") ---- */
.csv-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-sub);font:600 10.5px/1 var(--font-sans,inherit);letter-spacing:.02em;cursor:pointer;transition:border-color .15s var(--ease-out),color .15s var(--ease-out),background .15s var(--ease-out);white-space:nowrap;}
.csv-btn svg{width:12px;height:12px;flex:none;}
.csv-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-dim,rgba(201,160,74,.08));}
.csv-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.sh-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

/* ---- Segment KPI strip (6 cards; identical on Banks / NBFCs / HFC-MFI-SFB) ---- */
.kpi-strip.kpi-6{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (min-width:1720px){.kpi-strip.kpi-6{grid-template-columns:repeat(6,minmax(0,1fr));}}
.kpi-strip.kpi-6 .kpi-label{padding-right:30px;}
.kpi-strip.kpi-6 .kpi-value{white-space:nowrap;}
@media (max-width:760px){.kpi-strip.kpi-6{grid-template-columns:repeat(2,minmax(0,1fr));}}
.kpi-strip.kpi-6 .kpi-change{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}   /* R16: two lines, not a cut-off one */

/* ---- Asset Quality Monitor (shared: Banks / NBFCs / HFC-MFI-SFB) ---- */
.aq-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.aq-stat{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm,10px);background:var(--bg-input);min-width:0;}
.aq-stat-l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.aq-stat-v{font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--text);line-height:1.1;}
.aq-stat-s{font-size:11px;color:var(--text-sub);}
.aq-stat .pos,.aq-stat-s .pos{color:var(--teal);} .aq-stat .neg,.aq-stat-s .neg{color:var(--coral);}
.aq-mixbar{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;margin:6px 0 2px;}
.aq-mixbar i{display:block;height:100%;} .aq-mixbar .imp{background:var(--teal);} .aq-mixbar .st{background:var(--text-muted);opacity:.55;} .aq-mixbar .det{background:var(--coral);} .aq-mixbar .na{background:var(--border);}
.aq-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 10px;}
.aq-legend{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.aq-legend i{display:inline-block;width:12px;height:7px;border-radius:3px;margin-left:4px;}
.aq-legend .lg-prov,.aq-bar .prov{background:var(--teal);} .aq-legend .lg-net,.aq-bar .net{background:var(--coral);}
.aq-sort{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;}
.aq-sort-b{padding:5px 11px;font:600 10.5px/1 inherit;font-family:inherit;color:var(--text-sub);background:transparent;border:0;border-left:1px solid var(--border);cursor:pointer;}
.aq-sort-b:first-child{border-left:0;} .aq-sort-b.on{background:var(--gold-dim,rgba(201,160,74,.12));color:var(--gold);}
.aq-head-row,.aq-row{display:grid;grid-template-columns:150px minmax(180px,1.6fr) 74px 118px minmax(150px,1fr) 64px;gap:14px;align-items:center;}
.aq-head-row{padding:0 12px 6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);}
.aq-rows{display:flex;flex-direction:column;}
.aq-row{padding:10px 12px;border-bottom:1px dashed var(--border);cursor:pointer;border-radius:8px;transition:background .15s var(--ease-out);}
.aq-row:last-child{border-bottom:0;}
.aq-row:hover,.aq-row:focus-visible{background:var(--bg-input);outline:none;}
.aq-co{display:flex;flex-direction:column;gap:2px;min-width:0;}
.aq-t{font-family:var(--font-mono);font-weight:700;font-size:12.5px;color:var(--text);}
.aq-out{font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--coral);border:1px solid var(--coral);border-radius:999px;padding:0 5px;margin-left:4px;}
.aq-q{font-size:10.5px;color:var(--text-muted);font-family:var(--font-mono);}
.aq-book{display:flex;flex-direction:column;gap:5px;min-width:0;}
.aq-bar{height:10px;border-radius:5px;background:var(--bg-input);overflow:hidden;position:relative;}
.aq-bar-g{height:100%;display:flex;border-radius:5px;overflow:hidden;transition:width .7s var(--ease-out);}
.aq-bar-g i{display:block;height:100%;} .aq-bar .unk{background:var(--amber,#d9a441);opacity:.8;}
.aq-bar.na{background:transparent;height:auto;} .aq-bar.na span{font-size:10.5px;color:var(--text-muted);}
.aq-vals{font-size:11px;color:var(--text-sub);font-family:var(--font-mono);} .aq-vals b{color:var(--text);}
.aq-pcr{display:flex;flex-direction:column;align-items:flex-start;}
.aq-pcr-v{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text);} .aq-pcr-l{font-size:10px;color:var(--text-muted);}
.aq-move{display:inline-flex;flex-direction:column;font-family:var(--font-mono);font-size:12.5px;font-weight:600;}
.aq-move small{font-size:10px;font-weight:400;color:var(--text-muted);}
.aq-move.pos{color:var(--teal);} .aq-move.neg{color:var(--coral);} .aq-move.flat{color:var(--text-sub);}
.aq-flow{font-size:11px;color:var(--text-sub);font-family:var(--font-mono);line-height:1.45;}
.aq-cq{text-align:right;}
.aq-cq-b{display:inline-block;min-width:40px;text-align:center;padding:4px 8px;border-radius:999px;font-family:var(--font-mono);font-weight:700;font-size:12px;border:1px solid var(--border);color:var(--text-sub);}
.aq-cq-b.hi{color:var(--teal);border-color:var(--teal);} .aq-cq-b.mid{color:var(--gold);border-color:var(--gold);} .aq-cq-b.lo{color:var(--coral);border-color:var(--coral);}
.aq-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);line-height:1.5;}
@media (max-width:1100px){.aq-stats{grid-template-columns:repeat(2,minmax(0,1fr));}.aq-head-row{display:none;}
  .aq-row{grid-template-columns:1fr auto;grid-template-areas:"co cq" "book book" "pcr mv" "flow flow";gap:8px 12px;}
  .aq-co{grid-area:co;} .aq-cq{grid-area:cq;} .aq-book{grid-area:book;} .aq-pcr{grid-area:pcr;flex-direction:row;gap:6px;align-items:baseline;} .aq-mv{grid-area:mv;text-align:right;} .aq-move{align-items:flex-end;} .aq-flow{grid-area:flow;}}
@media (max-width:520px){.aq-stats{grid-template-columns:1fr 1fr;gap:8px;}.aq-stat{padding:10px;}.aq-stat-v{font-size:17px;}.aq-sort{width:100%;}.aq-sort-b{flex:1;padding:6px 4px;}}
@media (prefers-reduced-motion: reduce){.aq-bar-g{transition:none;}}

/* smooth-scroll.js drives wheel scrolling itself (desktop pointers only) */
html.ss-on { scroll-behavior: auto; }

/* ---- Segment KPI strip v2: one row of five cards (Banks / NBFCs / HFC-MFI-SFB) ---- */
.kpi-strip.kpi-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
.kpi-strip.kpi-5 .kpi-card{padding:16px 16px 14px;min-width:0;}
.kpi-strip.kpi-5 .kpi-label{padding-right:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kpi-strip.kpi-5 .kpi-value{white-space:nowrap;font-size:clamp(17px,1.55vw,23px);}
.kpi-strip.kpi-5 .kpi-change{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}   /* R16: two lines, not a cut-off one */
@media (max-width:1080px){.kpi-strip.kpi-5{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){.kpi-strip.kpi-5{grid-template-columns:repeat(2,minmax(0,1fr));}.kpi-strip.kpi-5 .kpi-card:last-child{grid-column:1 / -1;}}
/* phones: segment KPI labels and notes wrap instead of being cut off */
@media (max-width:640px){.kpi-strip.kpi-5 .kpi-label,.kpi-strip.kpi-5 .kpi-change{white-space:normal;line-height:1.35;}.kpi-strip.kpi-5 .kpi-card{padding:13px 13px 12px;}}

/* ---- Home "aura" KPI cards ---- */
.aura-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:28px}
.aura-card{--ac:var(--gold);position:relative;overflow:hidden;padding:16px 18px 14px;border-radius:var(--radius-lg,16px);
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--ac) 16%,transparent) 0%,transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--bg-card) 92%,#000) 0%,var(--bg-card) 100%);
  border:1px solid color-mix(in srgb,var(--ac) 30%,var(--border));box-shadow:0 10px 30px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s;isolation:isolate}
.aura-card::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--ac),transparent);opacity:.75}
.aura-card::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,240,205,.07) 50%,transparent 60%);transform:translateX(-60%);transition:transform 1.1s var(--ease-out);pointer-events:none;z-index:-1}
.aura-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ac) 60%,var(--border));box-shadow:0 18px 40px -20px color-mix(in srgb,var(--ac) 45%,#000)}
.aura-card:hover::after{transform:translateX(60%)}
.aura-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.aura-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ac);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);background:color-mix(in srgb,var(--ac) 10%,transparent);flex:none}
.aura-ico svg{width:13px;height:13px}
.aura-label{font-size:10px;font-weight:600;letter-spacing:.12em;line-height:1.25;text-transform:uppercase;color:var(--text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.aura-value{font-family:var(--font-mono);font-size:clamp(19px,1.7vw,26px);font-weight:700;letter-spacing:-.5px;line-height:1.1;white-space:nowrap;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 55%,#fff) 0%,var(--ac) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.aura-viz{height:34px;margin:10px 0 8px;color:var(--ac);display:flex;align-items:center;gap:10px}
.aura-sub{font-size:10.5px;line-height:1.4;color:var(--text-sub);font-family:var(--font-mono);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.aura-stack{display:flex;width:100%;height:10px;border-radius:5px;overflow:hidden;gap:2px}
.aura-stack i{display:block;height:100%}
.aura-spark{width:100%;height:34px;overflow:visible}
.aura-meter{position:relative;width:100%;height:10px;border-radius:5px;background:var(--bg-input);overflow:visible}
.aura-meter .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 40%,transparent),var(--ac))}
.aura-meter b{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--text);opacity:.75;border-radius:1px}
.aura-gap{position:relative;width:100%;height:10px;border-radius:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--teal) 22%,var(--bg-input)),var(--bg-input) 50%,color-mix(in srgb,var(--coral) 22%,var(--bg-input)))}
.aura-gap .z{position:absolute;left:50%;top:-5px;bottom:-5px;width:1px;background:var(--text-muted)}
.aura-gap i{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--ac)}
.aura-gap em{position:absolute;top:13px;left:0;font-style:normal;font-size:9px;color:var(--text-muted);font-family:var(--font-mono)} .aura-gap em.r{left:auto;right:0}
.aura-ring{position:relative;width:38px;height:38px;flex:none}
.aura-ring svg{width:38px;height:38px;transform:rotate(-90deg)}
.aura-ring circle{fill:none;stroke-width:4}
.aura-ring .bg{stroke:var(--bg-input)} .aura-ring .fg{stroke:var(--ac);stroke-linecap:round;transition:stroke-dashoffset 1.3s var(--ease-out)}
.aura-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;color:var(--text)}
.aura-ring-txt{font-size:10.5px;line-height:1.35;color:var(--text-muted)} .aura-ring-txt span{color:var(--text-sub)}
@media (max-width:1180px){.aura-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.aura-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.aura-strip .aura-card:last-child{grid-column:1 / -1}}
@media (prefers-reduced-motion: reduce){.aura-card,.aura-card::after{transition:none}}

/* home: Segment Performance fills its grid cell (no empty band under the chart) */
.seg-perf-card{display:flex;flex-direction:column}
.seg-perf-card .seg-perf-canvas{flex:1 1 auto;min-height:300px;height:auto;position:relative}

/* valuation gap colour (window.vgapHtml): below the model's fair value = green, a premium = red */
.vg-cheap { color: var(--teal) !important; font-weight: 700; }
.vg-rich { color: var(--coral) !important; font-weight: 700; }
.vg-flat, .vg-na { color: var(--text-muted); }

/* ============================================================
   Round 14 - company visuals (assets/js/company-viz.js), shared by PARICHAYA and EKLA
   ============================================================ */
/* the live intro: written from the data on every render, re-written when a price arrives */
.cv-intro { font-size: 13.5px; line-height: 1.75; color: var(--text-sub); margin: 0; max-width: 72ch; }
.cv-intro b { color: var(--text); font-weight: 650; }
.cv-up { color: var(--teal); } .cv-dn { color: var(--coral); } .cv-flat { color: var(--text-muted); }
.cv-intro .cv-up, .cv-intro .cv-dn, .cv-intro .cv-flat { font-family: var(--font-mono); font-weight: 700; font-size: .92em; }
.cv-stamp { margin-top: 9px; font-family: var(--font-mono); font-size: 10px; line-height: 1.6; letter-spacing: .3px; color: var(--text-muted); }
.cv-stamp::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 0 2px; vertical-align: 1px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }

/* quarter in brief */
.cv-qb-wrap { padding: 14px 20px 16px; }
.cv-qb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cv-qb-title { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.cv-qb-q { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.cv-qb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 10px; }
.cv-qb-chip { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-input); border: 1px solid var(--border); }
.cv-qb-chip > span { font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); }
.cv-qb-chip > b { font-family: var(--font-mono); font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--text); }
.cv-qb-chip > small { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-qb-note { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--amber); }
/* R18: quarter in brief - plain-language cards (company-viz.js quarterBrief) */
.cv-qb-wrap { padding: 18px 22px 20px; }
.qb2-hero { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; padding: 13px 16px; border-radius: 14px; border: 1px solid; }
.qb2-hero > div > b { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.qb2-hero > div > span { display: block; font-size: 13px; line-height: 1.45; color: var(--text-sub); }
.qb2-hi { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff; }
.qb2-hero.qb2-up { background: color-mix(in srgb, var(--teal) 10%, transparent); border-color: color-mix(in srgb, var(--teal) 35%, transparent); }
.qb2-hero.qb2-dn { background: color-mix(in srgb, var(--coral) 10%, transparent); border-color: color-mix(in srgb, var(--coral) 35%, transparent); }
.qb2-hero.qb2-flat { background: var(--bg-input); border-color: var(--border); }
.qb2-up .qb2-hi { background: var(--teal); box-shadow: 0 0 18px -4px var(--teal); } .qb2-up .qb2-hi::before { content: "¹3"; }
.qb2-dn .qb2-hi { background: var(--coral); box-shadow: 0 0 18px -4px var(--coral); } .qb2-dn .qb2-hi::before { content: "!"; }
.qb2-flat .qb2-hi { background: var(--text-muted); } .qb2-flat .qb2-hi::before { content: "="; }
.qb2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.qb2-card { --qc: var(--text-muted); display: flex; flex-direction: column; gap: 10px; padding: 14px 15px 13px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(170deg, color-mix(in srgb, var(--qc) 8%, var(--bg-card)) 0%, var(--bg-card) 70%); position: relative; overflow: hidden; }
.qb2-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--qc); opacity: .85; }
.qb2-card.qb2-up { --qc: var(--teal); } .qb2-card.qb2-dn { --qc: var(--coral); }
.qb2-top { display: flex; align-items: center; gap: 10px; }
.qb2-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--qc); background: color-mix(in srgb, var(--qc) 14%, transparent); }
.qb2-card.qb2-flat .qb2-ic { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.qb2-ic svg { width: 19px; height: 19px; }
.qb2-name { display: flex; flex-direction: column; min-width: 0; }
.qb2-name b { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
.qb2-name small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.qb2-q { font-size: 12px; line-height: 1.4; color: var(--text-sub); }
.qb2-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.qb2-val > b { font-family: var(--font-mono); font-size: 28px; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -.02em; }
.qb2-chip { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.qb2-chip.up { color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, transparent); }
.qb2-chip.dn { color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, transparent); }
.qb2-chip.flat { color: var(--text-muted); background: var(--bg-input); font-family: inherit; font-weight: 600; }
.qb2-bars { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 4px 0 18px; }
.qb2-bar { display: grid; grid-template-columns: 58px 1fr 52px; align-items: center; gap: 8px; }
.qb2-bar span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.qb2-bar i { position: relative; display: block; height: 12px; border-radius: 6px; background: var(--bg-input); overflow: hidden; }
.qb2-bar s { display: block; height: 100%; border-radius: 6px; transform-origin: left; transition: transform 1s var(--ease-out); }
.qb2-bar.was s { background: color-mix(in srgb, var(--text-muted) 55%, transparent); }
.qb2-bar.now s { background: linear-gradient(90deg, color-mix(in srgb, var(--qc) 55%, transparent), var(--qc)); }
.qb2-card.qb2-flat .qb2-bar.now s { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 45%, transparent), var(--gold)); }
.qb2-bar em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--text); text-align: right; }
.qb2-bar.was em { color: var(--text-sub); font-weight: 600; }
.qb2-med { position: absolute; top: 0; bottom: 14px; left: calc(58px + 8px + (100% - 58px - 52px - 16px) * var(--x) / 100%); width: 0; border-left: 1.5px dashed color-mix(in srgb, var(--text) 55%, transparent); }
.qb2-med span { position: absolute; top: 100%; left: 0; transform: translateX(-50%); margin-top: 2px; font-size: 9.5px; white-space: nowrap; color: var(--text-muted); }
.qb2-verdict { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; line-height: 1.45; color: var(--text-sub); }
.qb2-verdict b.ok { color: var(--teal); } .qb2-verdict b.no { color: var(--coral); }
.qb2-vi { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--qc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc) 22%, transparent); }
.qb2-card.qb2-flat .qb2-vi { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.qb2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.qb2-tile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 13px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); }
.qb2-tile > span { font-size: 12px; font-weight: 700; color: var(--text); }
.qb2-tile > b { font-family: var(--font-mono); font-size: 15px; color: var(--text); margin-left: auto; }
.qb2-tile > small { flex-basis: 100%; font-size: 11px; color: var(--text-muted); }
/* bars grow in when the card is revealed */
.cv-qb-wrap.fade-up:not(.visible) .qb2-bar s { transform: scaleX(0); }
@media (max-width: 640px) {
  .cv-qb-wrap { padding: 14px 14px 16px; }
  .qb2-hero { padding: 11px 12px; gap: 11px; } .qb2-hi { width: 32px; height: 32px; font-size: 17px; }
  .qb2-val > b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .qb2-bar s { transition: none; } .cv-qb-wrap.fade-up:not(.visible) .qb2-bar s { transform: none; } }

/* fair-value bullet */
.cv-fb { margin: 6px 0 4px; padding: 0 30px 0 6px; }
.cv-fb-track { position: relative; height: 12px; margin: 30px 0 0; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border); }
.cv-fb-band { position: absolute; top: -1px; bottom: -1px; border-radius: 999px; background: linear-gradient(90deg, var(--teal-dim), rgba(62,207,178,.30), var(--teal-dim)); border: 1px solid rgba(62,207,178,.45); }
.cv-fb-fair, .cv-fb-act { position: absolute; top: 50%; width: 0; height: 0; }
.cv-fb-fair::before { content: ""; position: absolute; left: -1.5px; top: -12px; width: 3px; height: 24px; border-radius: 2px; background: var(--teal); }
.cv-fb-act::before { content: ""; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 2px solid var(--bg-card); box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(0,0,0,.3); z-index: 1; }
.cv-fb em { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }
.cv-fb-act em { bottom: 13px; color: var(--gold); }
.cv-fb-fair em { top: 15px; color: var(--teal); }
.cv-fb-axis { display: flex; justify-content: space-between; margin-top: 26px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); }
.cv-fb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px -30px 0 -6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-sub); }

/* the tabbed financial story */
.cv-story-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cv-story-title { font-size: 14px; font-weight: 700; color: var(--text); }
.cv-story-sub { margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.cv-story-canvas { position: relative; }
.cv-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border); }
.cv-tabs button { appearance: none; border: 0; background: transparent; color: var(--text-sub); font: 600 11.5px var(--font-sans); padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.cv-tabs button:hover { color: var(--text); }
.cv-tabs button.on { background: var(--accent-contrast-dim, var(--gold-dim)); color: var(--accent-contrast, var(--gold)); box-shadow: inset 0 0 0 1px var(--accent-contrast, var(--border-gold)); }
.cv-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cv-cagrs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cv-cagr { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; color: var(--text-sub); }
.cv-cagr b { font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: var(--text); }
.cv-cagr i { font-style: normal; font-weight: 700; }

/* loan book vs the segment */
.cv-mix-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: 10.5px; color: var(--text-muted); }
.cv-mix-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.cv-mix-legend i.me, .cv-mix-bars i.me { background: var(--gold); }
.cv-mix-legend i.avg, .cv-mix-bars i.avg { background: var(--text-muted); opacity: .6; }
.cv-mix-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) 54px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.cv-mix-row:last-child { border-bottom: 0; }
.cv-mix-k { font-size: 12px; color: var(--text-sub); }
.cv-mix-bars { display: flex; flex-direction: column; gap: 3px; }
.cv-mix-bars i { display: block; height: 8px; min-width: 2px; border-radius: 999px; transition: width .6s cubic-bezier(.22,1,.36,1); }
.cv-mix-bars i.avg { height: 5px; }
.cv-mix-v { text-align: right; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--text); }
.cv-mix-v small { display: block; font-size: 10px; font-weight: 500; color: var(--text-muted); }
.cv-empty { padding: 14px 0; font-size: 12px; color: var(--text-muted); }

/* key takeaways + growth scorecard (PARICHAYA) */
.cv-take { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cv-take li { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 10px 8px 12px; border-radius: var(--radius-sm); background: var(--bg-input); border-left: 3px solid var(--text-muted); font-size: 12px; line-height: 1.5; color: var(--text-sub); }
.cv-take li.up { border-left-color: var(--teal); } .cv-take li.dn { border-left-color: var(--coral); }
.cv-take li > span { font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--text-muted); }
.cv-take li b { color: var(--text); }
.cv-growth { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.cv-growth th:first-child, .cv-growth td:first-child { width: 36%; }
.cv-growth thead tr { background: transparent; }
.cv-growth thead th { padding: 6px 8px; text-align: right; cursor: default; white-space: normal; overflow-wrap: anywhere; vertical-align: bottom; }
.cv-growth th:first-child, .cv-growth td:first-child { text-align: left; }
.cv-growth tbody td { padding: 10px 6px; text-align: right; font-family: var(--font-mono); font-weight: 700; border-bottom: 1px dashed var(--border); white-space: nowrap; }
.cv-then small.u { display: block; font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
@media (max-width:599.98px) { .cv-growth { font-size: 11.5px; } .cv-growth thead th { padding: 6px 4px; letter-spacing: .02em; } .cv-then tbody td:first-child { white-space: normal; } }
.cv-growth tbody td:first-child { font-family: var(--font-sans); font-weight: 600; color: var(--text-sub); }
.cv-growth tbody td.cv-up { color: var(--teal); } .cv-growth tbody td.cv-dn { color: var(--coral); }
.cv-growth tbody td.na { color: var(--text-muted); font-weight: 400; }
.cv-then { margin-top: 16px; }
.cv-then tbody td { font-weight: 600; color: var(--text); }
.cv-then small { font-size: 9.5px; color: var(--text-muted); font-weight: 500; }
.cv-compact thead th, .cv-compact tbody td { padding: 8px 9px; }

/* EKLA hero */
.ekla-hero { padding: 22px 24px 20px; border-top: 3px solid var(--seg, var(--gold)); }
.ekla-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.ekla-hero-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .3px; color: var(--text-muted); }
.ekla-hero-name { margin: 8px 0 9px; font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.2px; color: var(--text); }
.ekla-hero-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ekla-hero-side .cv-qb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ekla-hero-side .mlink { align-self: flex-end; font-size: 12px; }
.ekla-ph-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
@media (max-width: 900px) { .ekla-hero-grid { grid-template-columns: 1fr; } .ekla-hero-side .mlink { align-self: flex-start; } }
@media (max-width: 560px) { .ekla-hero { padding: 18px 16px; } .ekla-hero-name { font-size: 20px; } .cv-take li { grid-template-columns: 1fr; gap: 2px; } .cv-mix-row { grid-template-columns: 104px minmax(0, 1fr) 48px; } .cv-tabs button { padding: 6px 10px; } }

/* Round 15 - 52-week bar: the current-price flag sits BELOW the track, so the hover tooltip (above)
   never covers it; the low / high labels move down beneath the flag */
.rng52-bar { margin-top: 24px; }
.rng52-flag { top: calc(100% + 13px); bottom: auto; }
.rng52-flag::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--border-gold, var(--gold)); }
.rng52-flag.fl-left { transform: translateX(-14px); }
.rng52-flag.fl-left::after { left: 14px; }
.rng52-flag.fl-right { transform: translateX(calc(-100% + 14px)); }
.rng52-flag.fl-right::after { left: auto; right: 9px; transform: none; }
.rng52-bar > .rng52-row { margin-top: 64px; }

/* Round 15 - NBFC business mix: 100%-stacked bars, grouped by main product (nbfc.html) */
.bm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 14px; font-size: 11.5px; color: var(--text-sub); }
.bm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bm-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bm-row { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) 118px; gap: 14px; align-items: center; padding: 6px 8px; border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: background .15s ease; }
a.bm-row:hover { background: var(--bg-input); }
a.bm-row:hover .bm-name b { color: var(--gold); }
.bm-avg { background: var(--bg-input); border: 1px dashed var(--border); margin-bottom: 14px; }
.bm-name { display: flex; flex-direction: column; min-width: 0; }
.bm-name b { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); }
.bm-name small { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-bar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; background: var(--bg-input); box-shadow: inset 0 0 0 1px var(--border); }
.bm-seg { position: relative; min-width: 3px; background: var(--c); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset -1px 0 0 rgba(0,0,0,.28); transition: filter .15s ease; }
.bm-seg:last-child { box-shadow: none; }
.bm-seg:hover { filter: brightness(1.15) saturate(1.1); }
.bm-seg em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; color: #0d0f14; white-space: nowrap; padding: 0 5px; text-overflow: clip; }
.bm-prof { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.bm-top { font-family: var(--font-mono); font-size: 11px; font-weight: 800; white-space: nowrap; }
.bm-group + .bm-group { margin-top: 12px; }
.bm-ghead { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--text-sub); }
.bm-ghead::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.bm-ghead small { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0; }
@media (max-width: 640px) {
  .bm-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name prof" "bar bar"; row-gap: 6px; column-gap: 10px; padding: 8px 6px; }
  .bm-row .bm-name { grid-area: name; } .bm-row .bm-bar { grid-area: bar; } .bm-row .bm-prof { grid-area: prof; flex-direction: row; align-items: center; gap: 6px; }
  .bm-seg em { font-size: 9.5px; padding: 0 3px; }
}

/* Round 15 - phone polish: KPI labels wrap instead of being cut off; a smaller floating ASTRA button
   and DRISHTI launcher so they cover less of the content */
@media (max-width:640px){
  .aura-label{white-space:normal;letter-spacing:.08em;line-height:1.3}
  .aura-sub{white-space:normal;line-height:1.35;-webkit-line-clamp:3}
  .aura-card{padding:13px 13px 12px}
}
@media (max-width:480px){
  .astra-fab{width:56px;height:56px;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .astra-fab img{width:52px;height:52px}
}

/* Outliers (R16): one tag everywhere (window.outlierTag), a popover with the reason, and the
   "excludes 5 outliers" link (window.OUTLIER_NOTE). Tokens only, both themes. */
.out-tag { display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:1px 7px; border-radius:999px; border:1px solid color-mix(in srgb, var(--coral) 35%, transparent); background:var(--coral-dim); color:var(--coral); font:700 10.5px/1.5 var(--font-sans, inherit); letter-spacing:.02em; white-space:nowrap; cursor:pointer; vertical-align:middle; text-transform:none; }
.out-tag::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.out-tag:hover, .out-tag[aria-expanded="true"] { border-color:var(--coral); }
.out-tag:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
@media (pointer:coarse) { .out-tag { min-height:24px; padding:3px 9px; } }
.out-pop { position:absolute; z-index:1300; width:min(280px, calc(100vw - 32px)); display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:12px; background:var(--bg-card); color:var(--text); border:1px solid var(--border); box-shadow:0 12px 32px var(--glass-shadow, rgba(0,0,0,.35)); font-size:12.5px; line-height:1.5; text-align:left; white-space:normal; }
.out-pop b { font-size:12px; color:var(--coral); }
.out-pop a { color:var(--gold); font-weight:600; font-size:12px; }
.out-info { color:inherit; text-decoration:underline dotted; text-underline-offset:2px; }
.out-info:hover { color:var(--gold); }

/* macro KPI source lines (R16): date and source on two short lines, the long note in the tooltip */
.kpi-strip .kpi-change.kpi-src2, .kpi-change.kpi-src2 { white-space:normal; display:block; overflow:visible; -webkit-line-clamp:unset; }
.kpi-src2 .kpi-src-date { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpi-src2 .kpi-src-org { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; }
.kpi-src2 .kpi-src-org { color:var(--text-muted); }

/* touch: a tapped title shows here (app.js initTitleTips) */
.title-pop { position:absolute; z-index:1300; max-width:min(300px, calc(100vw - 24px)); padding:8px 12px; border-radius:10px; background:var(--bg-card); color:var(--text); border:1px solid var(--border-gold, var(--border)); box-shadow:0 10px 28px var(--glass-shadow, rgba(0,0,0,.35)); font-size:12.5px; line-height:1.45; pointer-events:none; }