/* ═══════════════════════════════════════════════════════════════════════════
   GREEKS VAULT — design tokens + shared primitives (v3, 2026-09-17)
   Source of truth: GreeksVault_Master_UI_UX_Build_Documentation.md §2–§5.
   Rule: pages never hard-code a colour — only var(--gv-*).
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@500;600&display=swap');

:root{
  /* §2.1 core palette — exact values */
  --gv-ivory:#F8F7F3; --gv-paper:#FCFBF8; --gv-white:#FFFFFF;
  --gv-navy:#101827; --gv-navy-soft:#263653; --gv-text:#33415C; --gv-muted:#7A8498; --gv-border:#E4E1D9;
  --gv-gold:#B89452; --gv-gold-soft:#E9DDBF;
  --gv-green:#159A62; --gv-green-soft:#E6F6EE;
  --gv-red:#D94B4B;   --gv-red-soft:#FBE9E9;
  --gv-blue:#356FD8;  --gv-blue-soft:#EAF1FF;
  /* derived (documented, not new colours) */
  --gv-gold-ink:#7A5E2B;                 /* text on gold-soft */
  --gv-shadow:0 1px 2px rgba(16,24,39,.04),0 6px 18px rgba(16,24,39,.05);
  --gv-shadow-lg:0 10px 30px rgba(16,24,39,.10);
  /* type */
  --gv-serif:'Cormorant Garamond',Georgia,serif;
  --gv-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --gv-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --gv-hand:'Caveat',cursive;
  /* layout */
  --gv-radius:12px; --gv-radius-sm:8px; --gv-radius-pill:999px;
  --gv-gutter:24px; --gv-gap:16px;
  --gv-header-h:64px; --gv-ticker-h:44px;
  --gv-maxw:1400px;
  --gv-ease:cubic-bezier(.22,.61,.36,1); --gv-t:180ms;
}
@media (max-width:760px){ :root{ --gv-gutter:16px; --gv-gap:12px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body.gv-v3{
  margin:0; background:var(--gv-ivory); color:var(--gv-text);
  font-family:var(--gv-sans); font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; display:flex; flex-direction:column;
}
body.gv-v3 a{ color:inherit; text-decoration:none; }
body.gv-v3 h1,body.gv-v3 h2,body.gv-v3 h3{ font-family:var(--gv-serif); color:var(--gv-navy); margin:0; font-weight:600; letter-spacing:-.01em; }
body.gv-v3 h1{ font-size:40px; line-height:1.05; }
body.gv-v3 h2{ font-size:20px; }
body.gv-v3 h3{ font-size:17px; }
.gv-num{ font-family:var(--gv-mono); font-variant-numeric:tabular-nums; }
.gv-up{ color:var(--gv-green); } .gv-down{ color:var(--gv-red); } .gv-flat{ color:var(--gv-muted); }
.gv-muted{ color:var(--gv-muted); }
.gv-hand{ font-family:var(--gv-hand); color:var(--gv-navy); }
.gv-quote{ font-family:var(--gv-serif); font-style:italic; font-size:17px; color:var(--gv-navy); line-height:1.3; }
.gv-quote small{ display:block; font-family:var(--gv-sans); font-style:normal; font-size:10px; letter-spacing:.14em; color:var(--gv-muted); margin-top:4px; }

/* ── page container ─────────────────────────────────────────────────────── */
.gv-main{ flex:1 0 auto; width:100%; max-width:var(--gv-maxw); margin:0 auto; padding:0 var(--gv-gutter) 32px; }
.gv-grid{ display:grid; gap:var(--gv-gap); }
.gv-grid-12{ grid-template-columns:repeat(12,minmax(0,1fr)); }
@media (max-width:1100px){ .gv-grid-12{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:760px){ .gv-grid-12{ grid-template-columns:1fr; } }

/* ── page header (§ per-page: title + tagline + quote + artwork) ─────────── */
.gv-pagehead{ position:relative; display:flex; align-items:center; gap:18px; padding:14px 0 10px; min-height:64px; overflow:hidden; }
.gv-ph-title h1{ font-family:var(--gv-serif); font-size:40px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gv-navy); line-height:1; }
.gv-ph-title .gv-ph-sub{ font-size:13px; color:var(--gv-text); letter-spacing:.01em; }
/* shell subtitle line under the header ("Your trading command center") hidden — Siva 09-17 18:00 "this also need[s to go]"; markup kept */
.gv-pagehead .gv-ph-title{ display:none; }
.gv-pagehead:not(:has(> :not(.gv-ph-title):not(.gv-ph-tagline))){ display:none; }
.gv-ph-title .gv-ph-sub b{ color:var(--gv-navy); font-weight:600; }
.gv-pagehead .gv-ph-tagline{ font-size:13px; color:var(--gv-text); }
.gv-pagehead .gv-ph-tagline em{ font-style:normal; color:var(--gv-navy); font-weight:500; }
.gv-pagehead .gv-ph-ic{ width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; color:var(--gv-gold); }
.gv-pagehead .gv-ph-ic svg{ width:34px; height:34px; }
.gv-pagehead h1 small{ display:block; font-family:var(--gv-sans); font-size:13px; color:var(--gv-text); letter-spacing:0; font-weight:500; margin-top:6px; }
.gv-pagehead h1 small em{ font-style:normal; color:var(--gv-navy); }
.gv-pagehead .gv-ph-tag{ font-size:12px; color:var(--gv-muted); margin-top:3px; }
.gv-pagehead .gv-ph-right{ margin-left:auto; text-align:right; padding-right:250px; position:relative; z-index:1; align-self:center; }
.gv-pagehead .gv-ph-art{ position:absolute; right:-8px; bottom:-6px; height:70px; width:auto; pointer-events:none; opacity:.95; z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%); mask-image:linear-gradient(90deg,transparent,#000 35%); }
@media (max-width:900px){ .gv-pagehead .gv-ph-right{ display:none; } .gv-pagehead .gv-ph-art{ height:56px; opacity:.6; } }
@media (max-width:600px){ .gv-pagehead .gv-ph-art{ display:none; } .gv-ph-title h1{ font-size:30px; } }

/* ── KPI / MetricCard — ONE component for every page (Command, Positions, Performance, Live…) ── */
.gv-kpi{ position:relative; background:var(--gv-white); border:1px solid var(--gv-border); border-radius:var(--gv-radius); box-shadow:var(--gv-shadow); padding:12px 12px; min-height:88px; display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:10px; align-content:center; min-width:0; overflow:hidden; container-type:inline-size; }
.gv-kpi > *{ grid-column:2; }
.gv-kpi .ic{ grid-column:1; grid-row:1 / span 6; align-self:center; width:30px; height:30px; border-radius:50%; background:var(--gv-gold-soft); color:var(--gv-gold-ink); display:grid; place-items:center; }
.gv-kpi .ic svg{ position:static; width:16px; height:16px; opacity:1; }
.gv-kpi .k{ display:flex; align-items:center; gap:4px; font-size:10.5px; line-height:1.3; color:var(--gv-muted); font-weight:500; white-space:nowrap; overflow:hidden; margin:0 0 3px; min-height:0; }
.gv-kpi .k .info{ flex:0 0 auto; margin-left:2px; }
.gv-kpi .v{ font-family:var(--gv-mono); font-size:18px; font-weight:600; color:var(--gv-navy); line-height:1.15; letter-spacing:-.02em; white-space:nowrap; min-width:0; }
/* the value scales with the card so ten mono characters always fit (8-card strips at 1280–1500 px) */
@container (max-width:170px){ .gv-kpi .v{ font-size:16px; } .gv-kpi{ padding:10px 10px; column-gap:8px; } .gv-kpi .d{ -webkit-line-clamp:1; } }
@container (max-width:150px){ .gv-kpi .v{ font-size:14px; letter-spacing:-.03em; } }
@container (max-width:130px){ .gv-kpi .v{ font-size:12.5px; } }
.gv-kpi .d{ font-size:10.5px; line-height:1.35; margin-top:3px; color:var(--gv-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; }
.gv-kpi .d.mut,.gv-kpi .d .mut{ color:var(--gv-muted); }
.gv-kpi .bar{ height:5px; border-radius:3px; background:var(--gv-ivory); overflow:hidden; margin-top:7px; }
.gv-kpi .bar i{ display:block; height:100%; background:var(--gv-gold); }
.gv-kpi > svg{ display:none; }
.gv-kpi select{ font:inherit; font-family:var(--gv-sans); font-size:12.5px; font-weight:700; color:var(--gv-navy); background:var(--gv-white); border:1px solid var(--gv-border); border-radius:6px; padding:3px 6px; width:100%; margin-top:2px; }
.gv-kpi-strip{ display:grid; gap:var(--gv-gap); }

/* ── Card / MetricCard / StatusPill / Tabs / Button ─────────────────────── */
.gv-card{ background:var(--gv-white); border:1px solid var(--gv-border); border-radius:var(--gv-radius); box-shadow:var(--gv-shadow); padding:16px 18px; min-width:0; }
.gv-card-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.gv-card-h h3{ flex:1; }
.gv-card-h .gv-link{ font-size:12px; color:var(--gv-blue); font-weight:500; }
.gv-metric{ display:flex; gap:12px; align-items:flex-start; }
.gv-metric .gv-m-ic{ width:34px; height:34px; border-radius:50%; background:var(--gv-gold-soft); color:var(--gv-gold-ink); display:grid; place-items:center; flex:0 0 34px; }
.gv-metric .gv-m-ic svg{ width:18px; height:18px; }
.gv-metric .gv-m-l{ font-size:11px; color:var(--gv-muted); font-weight:500; }
.gv-metric .gv-m-v{ font-family:var(--gv-mono); font-size:22px; font-weight:600; color:var(--gv-navy); line-height:1.15; margin-top:2px; }
.gv-metric .gv-m-s{ font-size:11px; margin-top:2px; }
.gv-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--gv-radius-pill); font-size:11px; font-weight:600; line-height:1.4; border:1px solid transparent; white-space:nowrap; }
.gv-pill-green{ background:var(--gv-green-soft); color:var(--gv-green); }
.gv-pill-red{ background:var(--gv-red-soft); color:var(--gv-red); }
.gv-pill-gold{ background:var(--gv-gold-soft); color:var(--gv-gold-ink); }
.gv-pill-blue{ background:var(--gv-blue-soft); color:var(--gv-blue); }
.gv-pill-navy{ background:var(--gv-navy); color:var(--gv-white); }
.gv-pill-muted{ background:var(--gv-ivory); color:var(--gv-muted); border-color:var(--gv-border); }
.gv-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }
.gv-tabs{ display:inline-flex; gap:4px; background:var(--gv-ivory); border:1px solid var(--gv-border); border-radius:var(--gv-radius-sm); padding:3px; }
.gv-tabs button{ appearance:none; border:0; background:transparent; font:inherit; font-family:var(--gv-sans); font-size:12px; font-weight:500; color:var(--gv-text); padding:5px 12px; border-radius:6px; cursor:pointer; transition:background var(--gv-t) var(--gv-ease),color var(--gv-t); }
.gv-tabs button[aria-selected="true"]{ background:var(--gv-gold); color:var(--gv-white); }
.gv-subnav{ display:flex; gap:26px; border-bottom:1px solid var(--gv-border); margin-bottom:var(--gv-gap); overflow-x:auto; }
.gv-subnav a{ padding:12px 2px; font-size:14px; font-weight:500; color:var(--gv-text); border-bottom:2px solid transparent; white-space:nowrap; }
.gv-subnav a[aria-current="page"]{ color:var(--gv-blue); border-bottom-color:var(--gv-blue); }
.gv-btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:13px; font-weight:600; padding:9px 16px; border-radius:var(--gv-radius-sm); border:1px solid var(--gv-border); background:var(--gv-white); color:var(--gv-navy); cursor:pointer; transition:transform var(--gv-t) var(--gv-ease),box-shadow var(--gv-t),background var(--gv-t); }
.gv-btn:hover{ box-shadow:var(--gv-shadow); }
.gv-btn:active{ transform:translateY(1px); }
.gv-btn-gold{ background:var(--gv-gold); border-color:var(--gv-gold); color:var(--gv-white); }
.gv-btn-navy{ background:var(--gv-navy); border-color:var(--gv-navy); color:var(--gv-white); }
.gv-btn-green{ background:var(--gv-green); border-color:var(--gv-green); color:var(--gv-white); }
.gv-btn-danger{ background:var(--gv-red-soft); border-color:var(--gv-red-soft); color:var(--gv-red); }
.gv-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.gv-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.gv-table th{ text-align:left; font-weight:500; color:var(--gv-muted); font-size:11px; padding:8px 10px; background:var(--gv-ivory); border-bottom:1px solid var(--gv-border); }
.gv-table td{ padding:9px 10px; border-bottom:1px solid var(--gv-border); color:var(--gv-navy); }
.gv-table td.gv-num,.gv-table th.gv-num{ text-align:right; }
.gv-table tr:last-child td{ border-bottom:0; }
.gv-table tbody tr:hover td{ background:var(--gv-paper); }
.gv-empty{ padding:28px 16px; text-align:center; color:var(--gv-muted); font-size:12.5px; border:1px dashed var(--gv-border); border-radius:var(--gv-radius-sm); }
.gv-empty b{ display:block; color:var(--gv-navy); font-family:var(--gv-serif); font-size:16px; font-weight:600; margin-bottom:4px; }
.gv-help{ display:inline-grid; place-items:center; width:13px; height:13px; border-radius:50%; border:1px solid var(--gv-blue); color:var(--gv-blue); font-size:9px; font-weight:700; margin-left:4px; cursor:help; vertical-align:middle; }
.gv-toggle{ position:relative; width:42px; height:24px; border-radius:var(--gv-radius-pill); background:var(--gv-border); border:0; cursor:pointer; transition:background var(--gv-t); flex:0 0 42px; }
.gv-toggle::after{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--gv-white); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform var(--gv-t) var(--gv-ease); }
.gv-toggle[aria-checked="true"]{ background:var(--gv-green); }
.gv-toggle[aria-checked="true"]::after{ transform:translateX(18px); }
html.gv-night .gv-toggle{ background:#3A4A6B; }   /* 10-19 Siva: at night the off track and knob were the same navy as the card */
html.gv-night .gv-toggle::after{ background:#E6EDF7; }
html.gv-night .gv-toggle[aria-checked="true"]{ background:var(--gv-green); }
.gv-modal-bg{ position:fixed; inset:0; background:rgba(16,24,39,.35); display:grid; place-items:center; z-index:60; padding:16px; }
.gv-modal{ background:var(--gv-white); border-radius:14px; box-shadow:var(--gv-shadow-lg); width:min(640px,100%); padding:20px 22px; }
.gv-drawer{ background:var(--gv-white); border:1px solid var(--gv-border); border-radius:var(--gv-radius); box-shadow:var(--gv-shadow); }
.gv-skel{ background:linear-gradient(90deg,var(--gv-ivory) 25%,var(--gv-paper) 50%,var(--gv-ivory) 75%); background-size:200% 100%; animation:gv-shimmer 1.2s infinite; border-radius:6px; color:transparent!important; }
@keyframes gv-shimmer{ to{ background-position:-200% 0; } }
.gv-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ body.gv-v3 *,body.gv-v3 *::before,body.gv-v3 *::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* ═══ SHELL: header ══════════════════════════════════════════════════════ */
.gv-hdr{ position:sticky; top:0; z-index:200; background:rgba(252,251,248,.92); backdrop-filter:saturate(1.2) blur(8px); -webkit-backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--gv-border); }
.gv-hdr-in{ max-width:var(--gv-maxw); margin:0 auto; height:var(--gv-header-h); padding:0 var(--gv-gutter); display:flex; align-items:center; gap:14px; }
.gv-brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-right:8px; }
.gv-brand img{ width:46px; height:46px; object-fit:contain; }
.gv-brand b{ display:block; font-family:var(--gv-serif); font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--gv-navy); line-height:1; white-space:nowrap; }
.gv-brand small{ display:block; font-size:8px; letter-spacing:.2em; color:var(--gv-muted); margin-top:4px; font-weight:500; white-space:nowrap; }
.gv-foot .gv-brand b{ font-size:19px; font-weight:700; letter-spacing:.12em; }
.gv-nav{ display:flex; gap:8px; margin:0 auto; }   /* centred between brand and the right cluster */
.gv-nav > div{ position:relative; }
.gv-nav-btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:var(--gv-radius-sm); border:1px solid var(--gv-border); background:var(--gv-white); color:var(--gv-navy); font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background var(--gv-t) var(--gv-ease),box-shadow var(--gv-t); }
.gv-nav-btn svg{ width:16px; height:16px; }
.gv-nav-btn:hover{ box-shadow:var(--gv-shadow); }
.gv-nav > div.is-active > .gv-nav-btn{ background:var(--gv-gold); border-color:var(--gv-gold); color:var(--gv-white); }
/* 2026-09-21 (Sid/partner #22): the gold pill follows the OPEN dropdown. While a group is hovered/open, the current page's
   pill steps back to an outline so only one tab reads as "active". */
.gv-nav > div:hover > .gv-nav-btn,.gv-nav > div:focus-within > .gv-nav-btn,.gv-nav > div.is-open > .gv-nav-btn{ background:var(--gv-gold); border-color:var(--gv-gold); color:var(--gv-white); }
.gv-nav:has(> div:hover) > div.is-active:not(:hover) > .gv-nav-btn,.gv-nav:has(> div.is-open) > div.is-active:not(.is-open) > .gv-nav-btn,.gv-nav:has(> div:focus-within) > div.is-active:not(:focus-within) > .gv-nav-btn{ background:var(--gv-white); border-color:var(--gv-gold); color:var(--gv-navy); }
.gv-nav-dd{ position:absolute; top:calc(100% + 8px); left:0; min-width:220px; background:var(--gv-white); border:1px solid var(--gv-border); border-radius:var(--gv-radius); box-shadow:var(--gv-shadow-lg); padding:6px; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity var(--gv-t) var(--gv-ease),transform var(--gv-t) var(--gv-ease),visibility 0s linear var(--gv-t); z-index:210; }
.gv-nav > div:hover > .gv-nav-dd,.gv-nav > div:focus-within > .gv-nav-dd,.gv-nav > div.is-open > .gv-nav-dd{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.gv-nav-dd a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; font-size:13px; font-weight:500; color:var(--gv-text); }
.gv-nav-dd a:hover{ background:var(--gv-ivory); color:var(--gv-navy); }
.gv-nav-dd a[aria-current="page"]{ color:var(--gv-gold-ink); background:var(--gv-gold-soft); }
.gv-nav-dd a .gv-pill{ margin-left:auto; padding:1px 7px; font-size:9px; }
.gv-nav-dd .gv-nav-sec{ font-size:9.5px; letter-spacing:.16em; color:var(--gv-muted); padding:8px 10px 4px; font-weight:600; }
.gv-search{ display:flex; align-items:center; gap:8px; height:38px; width:220px; padding:0 12px; border:1px solid var(--gv-border); border-radius:var(--gv-radius-sm); background:var(--gv-white); color:var(--gv-muted); }
.gv-search svg{ width:15px; height:15px; flex:0 0 15px; }
.gv-search input{ border:0; outline:0; background:transparent; font:inherit; font-size:12.5px; color:var(--gv-navy); width:100%; min-width:0; }
.gv-search input::placeholder{ color:var(--gv-muted); }
.gv-search:focus-within{ border-color:var(--gv-blue); box-shadow:0 0 0 3px var(--gv-blue-soft); }
.gv-hdr-r{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.gv-bell{ position:relative; width:36px; height:36px; display:grid; place-items:center; border:0; background:transparent; color:var(--gv-navy); cursor:pointer; border-radius:50%; }
.gv-bell:hover{ background:var(--gv-ivory); }
.gv-bell svg{ width:19px; height:19px; }
.gv-bell i{ position:absolute; top:3px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--gv-red); color:var(--gv-white); border:1.5px solid var(--gv-white); display:none; font:700 10px/13px var(--gv-sans); font-style:normal; text-align:center; }
.gv-bell.has-new i{ display:block; }
.gv-clock{ text-align:right; line-height:1.2; }
.gv-clock b{ display:block; font-family:var(--gv-mono); font-size:12px; font-weight:500; color:var(--gv-navy); }
.gv-clock span{ font-size:10.5px; color:var(--gv-muted); }
.gv-acct{ height:30px; padding:0 10px 0 10px; border-radius:var(--gv-radius-pill); border:1px solid var(--gv-border); background:var(--gv-white); color:var(--gv-navy); display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; cursor:pointer; max-width:200px; }
.gv-acct svg{ flex:none; color:var(--gv-muted); }
.gv-acct select{ appearance:none; -webkit-appearance:none; border:0; background:transparent; font:inherit; color:inherit; cursor:pointer; padding:0; max-width:150px; text-overflow:ellipsis; outline:none; }
.gv-acct:focus-within{ border-color:var(--gv-gold); }
/* UAT #83 (10-15): the wallet icon and the chevron were outside the <select>, so clicking them did nothing. The select now
   reaches under both icons (same pill width) and the icons let clicks through. */
.gv-acct svg{ pointer-events:none; position:relative; z-index:1; }
.gv-acct select{ box-sizing:content-box; padding:0 26px; margin:0 -26px; }
.gv-user{ position:relative; }
.gv-user-btn{ display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; cursor:pointer; padding:2px; font:inherit; color:var(--gv-navy); }
/* avatar = the FULL disc in the book colour (Siva 09-18: "show the full circle in that colour so it's more obvious"):
   green + white letter = LIVE book, gold + navy letter = PAPER book; 2px white hairline keeps the disc off the ivory header */
.gv-user-btn .gv-avatar{ background:var(--gv-green); color:var(--gv-white); box-shadow:0 0 0 2px var(--gv-white), 0 0 0 3px var(--gv-green); }
.gv-user-btn .gv-avatar[data-book="paper"]{ background:var(--gv-gold); color:var(--gv-navy); box-shadow:0 0 0 2px var(--gv-white), 0 0 0 3px var(--gv-gold); }
.gv-avatar{ width:36px; height:36px; border-radius:50%; background:var(--gv-navy); color:var(--gv-white); display:grid; place-items:center; font-family:var(--gv-serif); font-weight:700; font-size:17px; }
.gv-user-dd{ right:0; left:auto; width:250px; padding:12px 10px 8px; }
.gv-user-dd .gv-user-id{ display:grid; grid-template-columns:36px 1fr 20px; gap:0 10px; align-items:center; padding:0 0 10px; }
.gv-user-dd .gv-avatar-lg{ width:36px !important; height:36px !important; font-size:17px !important; }
.gv-user-dd .gv-avatar-lg{ width:56px; height:56px; font-size:26px; background:#E3E8F0; color:var(--gv-navy); box-shadow:none; }
.gv-user-dd .gv-user-txt{ min-width:0; }
.gv-user-dd .gv-user-txt b{ display:block; color:var(--gv-navy); font-size:13px; font-weight:700; line-height:1.2; }
.gv-user-dd .gv-user-txt > span{ display:block; font-size:11px; color:var(--gv-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gv-user-dd .gv-user-x{ width:20px; height:20px; border:0; background:transparent; color:var(--gv-muted); cursor:pointer; padding:0; display:grid; place-items:center; justify-self:end; }
.gv-user-dd .gv-user-x:hover{ color:var(--gv-navy); }
.gv-user-dd .gv-book{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--gv-border); border-radius:10px; padding:2px; background:var(--gv-white); margin:0 0 8px; }
.gv-user-dd .gv-book button{ display:flex; align-items:center; justify-content:center; gap:7px; height:32px; min-height:0; border:0; border-radius:8px; box-shadow:none; background:transparent; font:500 12.5px var(--gv-sans); color:var(--gv-navy); cursor:pointer; padding:0; margin:0; }
.gv-user-dd .gv-book button b{ width:22px; height:22px; border:1.5px solid var(--gv-navy); border-radius:5px; display:grid; place-items:center; font:600 12px var(--gv-sans); }
.gv-user-dd .gv-book button.on[data-set="paper"]{ background:var(--gv-gold-soft); }
.gv-user-dd .gv-book button.on[data-set="paper"] b{ border-color:var(--gv-gold-ink); color:var(--gv-gold-ink); }
.gv-user-dd .gv-book button.on[data-set="real"]{ background:var(--gv-green-soft); }
.gv-user-dd .gv-book button.on[data-set="real"] b{ border-color:var(--gv-green); color:var(--gv-green); }
.gv-user-dd .gv-book button:not(.on):hover{ background:var(--gv-ivory); }
.gv-user-dd .gv-user-sep{ height:1px; background:var(--gv-border); margin:4px 0; }
.gv-user-dd > a{ display:grid; grid-template-columns:18px 1fr 14px; align-items:center; gap:10px; padding:8px 6px; border-radius:8px; font-size:13px; font-weight:500; color:var(--gv-navy); border-top:1px solid transparent; }
.gv-user-dd > a:first-of-type{ border-top:1px solid var(--gv-border); border-radius:0 0 8px 8px; padding-top:10px; margin-top:2px; }
.gv-user-dd > a .gv-mi{ width:18px; height:18px; display:grid; place-items:center; color:var(--gv-navy); } .gv-user-dd > a .gv-mi svg{ width:17px; height:17px; }
.gv-user-dd > a .gv-mc{ color:var(--gv-navy); opacity:.7; display:grid; place-items:center; }
.gv-user-dd > a:hover{ background:var(--gv-ivory); }
.gv-user-dd > a.gv-danger{ background:var(--gv-red-soft); color:var(--gv-red); margin:5px 0; padding:8px 6px; border-top:0; border-radius:8px; }
.gv-user-dd > a.gv-danger .gv-mi,.gv-user-dd > a.gv-danger .gv-mc{ color:var(--gv-red); opacity:1; }
.gv-user:hover .gv-user-dd,.gv-user:focus-within .gv-user-dd,.gv-user.is-open .gv-user-dd{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.gv-burger{ display:none; width:38px; height:38px; border:1px solid var(--gv-border); border-radius:var(--gv-radius-sm); background:var(--gv-white); cursor:pointer; place-items:center; color:var(--gv-navy); }
.gv-burger svg{ width:18px; height:18px; }
@media (max-width:1180px){ .gv-search{ width:170px; } .gv-clock{ display:none; } .gv-nav-btn{ padding:0 12px; } }
@media (max-width:980px){
  .gv-hdr{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--gv-paper); } /* backdrop-filter would become the containing block of the fixed drawer */
  .gv-nav{ display:none; position:fixed; top:var(--gv-header-h); left:0; right:0; bottom:0; background:var(--gv-paper); padding:12px var(--gv-gutter) 40px; flex-direction:column; gap:6px; overflow:auto; z-index:49; margin:0; }
  html.gv-nav-open .gv-nav{ display:flex; }
  .gv-nav > div > .gv-nav-btn{ width:100%; justify-content:flex-start; }
  .gv-nav .gv-nav-dd{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:2px 0 8px 14px; }
  .gv-burger{ display:grid; }
  .gv-search{ display:none; }
  .gv-brand b{ font-size:16px; }
}

/* ═══ SHELL: ticker — ABOVE the header, continuously moving (Siva 09-17) ═══ */
.gv-tick{ background:var(--gv-white); color:var(--gv-navy); border-bottom:1px solid var(--gv-border); }
.gv-tick-in{ max-width:none; height:var(--gv-ticker-h); display:flex; align-items:center; }
.gv-tick-scroll{ flex:1; min-width:0; overflow:hidden; position:relative; }
.gv-tick-scroll::before,.gv-tick-scroll::after{ content:''; position:absolute; top:0; bottom:0; width:40px; z-index:1; pointer-events:none; }
.gv-tick-scroll::before{ left:0; background:linear-gradient(90deg,var(--gv-white),transparent); }
.gv-tick-scroll::after{ right:0; background:linear-gradient(270deg,var(--gv-white),transparent); }
.gv-tick-track{ display:flex; width:max-content; animation:gv-marquee var(--gv-tick-dur,60s) linear infinite; will-change:transform; }
.gv-tick-scroll:hover .gv-tick-track,.gv-tick-scroll:focus-within .gv-tick-track{ animation-play-state:paused; }
@keyframes gv-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.gv-tick-cell{ display:flex; align-items:center; gap:8px; padding:0 22px; border-right:1px solid var(--gv-border); flex:0 0 auto; color:inherit; height:var(--gv-ticker-h); }
.gv-tick-cell:hover{ background:var(--gv-paper); }
.gv-tick-cell svg{ width:44px; height:20px; flex:0 0 44px; }
.gv-tick-cell b{ display:block; font-size:11px; color:var(--gv-navy); font-weight:600; line-height:1.1; letter-spacing:.04em; }
.gv-tick-cell span{ display:block; font-family:var(--gv-mono); font-size:11px; line-height:1.25; color:var(--gv-navy); }
.gv-tick-cell span i{ font-style:normal; margin-left:6px; }
.gv-tick-right{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:0 var(--gv-gutter) 0 16px; border-left:1px solid var(--gv-border); font-size:11.5px; color:var(--gv-text); white-space:nowrap; height:var(--gv-ticker-h); }
.gv-tick-right .gv-mkt{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.gv-tick-right .gv-mkt.open{ color:var(--gv-green); } .gv-tick-right .gv-mkt.closed{ color:var(--gv-muted); }
.gv-tick-right button{ display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; font:inherit; font-size:11.5px; font-weight:500; color:var(--gv-navy); cursor:pointer; }
.gv-tick-right button svg{ width:14px; height:14px; }
@media (max-width:1500px){ .gv-tick-right button span{ display:none; } }
@media (max-width:760px){ .gv-acct{ max-width:120px; } .gv-acct select{ max-width:80px; } .gv-tick-right{ padding-left:10px; gap:8px; } .gv-tick-right .gv-mkt span:last-child{ display:none; } .gv-hdr-in{ gap:8px; } .gv-hdr-r{ gap:6px; } .gv-brand{ margin-right:0; } .gv-brand small{ display:none; } .gv-brand b{ font-size:17px; } .gv-brand img{ width:34px; height:34px; } .gv-book{ padding:0 9px; font-size:11px; } .gv-avatar{ width:32px; height:32px; font-size:15px; } }
@media (prefers-reduced-motion:reduce){ .gv-tick-track{ animation:none; width:auto; } .gv-tick-scroll{ overflow-x:auto; scrollbar-width:none; } .gv-tick-track .gv-tick-clone{ display:none; } }

/* ═══ SHELL: news bar + footer ════════════════════════════════════════════ */
.gv-news{ background:var(--gv-navy-soft); color:var(--gv-white); border-radius:var(--gv-radius); margin:var(--gv-gap) 0 0; }
.gv-news-in{ display:flex; align-items:center; gap:14px; height:40px; padding:0 8px 0 8px; overflow:hidden; }
.gv-news-tag{ background:var(--gv-gold); color:var(--gv-white); font-size:10.5px; font-weight:700; letter-spacing:.12em; padding:7px 12px; border-radius:6px; flex:0 0 auto; }
.gv-news-track{ display:flex; gap:22px; flex:1; min-width:0; overflow:hidden; white-space:nowrap; }
.gv-news-track a{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--gv-white); opacity:.92; flex:0 0 auto; }
.gv-news-track a time{ font-family:var(--gv-mono); font-size:10.5px; opacity:.75; }
.gv-news-track a b{ font-weight:600; font-size:11px; }
.gv-news-track a + a::before{ content:''; width:1px; height:14px; background:rgba(255,255,255,.25); margin-right:14px; }
.gv-news-all{ flex:0 0 auto; font-size:12px; font-weight:600; padding:0 10px; color:var(--gv-white); }
.gv-news.is-empty .gv-news-track::after{ content:attr(data-empty); font-size:12px; opacity:.7; }

/* ═══ SHELL: bottom NEWS tape — pinned to the bottom of EVERY shell page, continuously moving, same language as the
   top ticker + the in-page NEWS bar it replaces (Siva 09-18 "add the bottom news scroll matching the theme") ═══ */
:root{ --gv-news-h:32px; }
body.gv-v3.gv-has-tape{ padding-bottom:var(--gv-news-h); }
.gv-tape{ position:fixed; left:0; right:0; bottom:0; height:var(--gv-news-h); z-index:50; display:flex; align-items:stretch; overflow:hidden;
  background:var(--gv-navy-soft); color:var(--gv-white); border-top:1px solid var(--gv-navy); }
.gv-tape-tag{ flex:0 0 auto; display:flex; align-items:center; padding:0 14px; background:var(--gv-gold); color:var(--gv-white); font-size:10.5px; font-weight:700; letter-spacing:.12em; }
.gv-tape-scroll{ flex:1; min-width:0; overflow:hidden; position:relative; }
.gv-tape-scroll::after{ content:''; position:absolute; top:0; bottom:0; right:0; width:40px; background:linear-gradient(270deg,var(--gv-navy-soft),transparent); pointer-events:none; }
.gv-tape-track{ display:flex; width:max-content; height:var(--gv-news-h); align-items:center; animation:gv-marquee var(--gv-tape-dur,120s) linear infinite; will-change:transform; }
.gv-tape-scroll:hover .gv-tape-track,.gv-tape-scroll:focus-within .gv-tape-track{ animation-play-state:paused; }
.gv-tape-track a{ display:inline-flex; align-items:baseline; gap:8px; padding:0 22px; font-size:12px; color:var(--gv-white); opacity:.92; text-decoration:none; white-space:nowrap; flex:0 0 auto; border-right:1px solid rgba(255,255,255,.14); }
.gv-tape-track a:hover{ opacity:1; }
.gv-tape-track a b{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gv-gold-soft); }
.gv-tape-track a time{ font-family:var(--gv-mono); font-size:10.5px; opacity:.7; }
.gv-tape-track .gv-tape-empty{ padding:0 22px; font-size:12px; opacity:.7; white-space:nowrap; }
.gv-tape-all{ flex:0 0 auto; display:flex; align-items:center; padding:0 16px; font-size:11.5px; font-weight:600; color:var(--gv-white); text-decoration:none; border-left:1px solid rgba(255,255,255,.14); }
@media (max-width:760px){ .gv-tape-all{ display:none; } .gv-tape-tag{ padding:0 10px; } }
.gv-foot{ position:relative; margin-top:auto; overflow:hidden; }
.gv-foot-in{ max-width:var(--gv-maxw); margin:0 auto; padding:20px var(--gv-gutter) 26px; display:flex; align-items:flex-end; gap:20px; min-height:104px; }
.gv-foot .gv-brand{ align-items:stretch; }
.gv-foot .gv-brand>span{ display:flex; flex-direction:column; justify-content:space-between; padding:6px 0 5px; }
.gv-foot .gv-brand b{ margin-right:-.12em; }
/* 2026-09-24 Siva: caption fits inside the name's width and the mark's height */
.gv-foot .gv-brand small.gv-cap{ display:flex; justify-content:space-between; width:0; min-width:100%; margin-top:0; font-size:7px; letter-spacing:.04em; line-height:1; text-transform:uppercase; }
.gv-foot-art{ position:absolute; right:0; bottom:0; height:96px; pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%); mask-image:linear-gradient(90deg,transparent,#000 30%); }
.gv-foot-quote{ margin-left:auto; position:relative; z-index:1; font-family:var(--gv-hand); font-size:19px; color:var(--gv-navy); text-align:right; line-height:1.15; transform:rotate(-4deg); padding-right:16px; padding-bottom:6px; }
.gv-foot-legal{ position:absolute; left:var(--gv-gutter); bottom:6px; font-size:10px; color:var(--gv-muted); }
.gv-foot-legal a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }   /* 2026-09-24 legal links */
.gv-foot-legal a:hover{ color:var(--gv-navy); }
@media (max-width:760px){ .gv-foot-art{ height:64px; opacity:.6; } .gv-foot-quote{ font-size:16px; } }

/* ═══ SHELL: MEGA panel (Siva 09-18 mockup "Explore Deeper") — Edge dropdown as a full-width panel: headline column,
   items as numbered stops on a rising mountain path, quote, tagline strip, handwritten note. ≤980px = plain list. ═══ */
.gv-nav > div.gv-has-mega{ position:static; }
.gv-nav-dd.gv-mega{ left:50%; right:auto; transform:translate(-50%,-4px); width:min(1040px, calc(100vw - 32px)); padding:0; overflow:hidden;
  background:var(--gv-paper); }
.gv-nav > div.gv-has-mega:hover > .gv-nav-dd.gv-mega,.gv-nav > div.gv-has-mega:focus-within > .gv-nav-dd.gv-mega,.gv-nav > div.gv-has-mega.is-open > .gv-nav-dd.gv-mega{ transform:translate(-50%,0); }
.gv-mega .gv-mega-plain{ display:none; }
.gv-mega-in{ position:relative; min-height:430px; padding:26px 34px 24px; overflow:hidden; }
.gv-mega-art{ position:absolute; right:-40px; bottom:-10px; width:64%; max-width:760px; height:auto; opacity:.9; pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 40%); -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 40%); mask-composite:intersect; }
.gv-mega-head{ position:relative; z-index:1; max-width:320px; }
.gv-mega-eyebrow{ display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.22em; color:var(--gv-muted); font-weight:600; }
.gv-mega-eyebrow i{ display:inline-block; width:44px; height:2px; background:var(--gv-gold); }
.gv-mega-in h2.gv-mega-title{ font-family:var(--gv-serif); font-size:44px; line-height:1; font-weight:600; color:var(--gv-navy); margin:10px 0 10px; letter-spacing:-.01em; }
.gv-mega-sub{ font-family:var(--gv-serif); font-size:14.5px; line-height:1.35; color:var(--gv-text); margin:0; }
.gv-mega-quote{ position:absolute; right:300px; top:28px; z-index:1; font-family:var(--gv-serif); font-style:italic; font-size:16px; line-height:1.3; color:var(--gv-navy); text-align:center; max-width:220px; }
.gv-mega-stage{ position:absolute; left:34px; right:34px; top:132px; height:230px; z-index:1; }
.gv-mega-path{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.gv-mega-path path{ fill:none; stroke:var(--gv-gold); stroke-width:1.6; }
.gv-mega-path circle{ fill:var(--gv-gold); stroke:var(--gv-white); stroke-width:2; }
.gv-nav-dd a.gv-mega-stop{ position:absolute; width:106px; margin-left:-4px; padding:0 0 16px 10px; display:block; font-size:11.5px; font-weight:400; border-radius:0; background:transparent; color:var(--gv-text); text-decoration:none; border-left:1.5px solid var(--gv-gold); }
.gv-nav-dd a.gv-mega-stop:hover{ background:transparent; }
.gv-mega-stop:hover .gv-mega-name{ color:var(--gv-gold); }
.gv-mega-num{ display:block; font-family:var(--gv-serif); font-size:18px; font-weight:700; color:var(--gv-gold); line-height:1; margin-bottom:6px; }
.gv-mega-name{ display:block; font-family:var(--gv-serif); font-size:15px; font-weight:700; color:var(--gv-navy); line-height:1.1; margin-bottom:4px; }
.gv-mega-desc{ display:block; font-size:11.5px; line-height:1.3; color:var(--gv-text); }
.gv-mega-strip{ position:absolute; left:34px; bottom:24px; z-index:1; background:rgba(255,255,255,.92); border:1px solid var(--gv-border); border-radius:var(--gv-radius); padding:12px 18px 10px; min-width:360px; }
.gv-mega-strip i{ display:block; width:44px; height:2px; background:var(--gv-gold); margin-bottom:10px; }
.gv-mega-strip-q{ font-family:var(--gv-serif); font-style:italic; font-size:15px; color:var(--gv-navy); margin-bottom:6px; }
.gv-mega-strip-w{ font-size:10.5px; letter-spacing:.2em; color:var(--gv-muted); font-weight:600; }
.gv-mega-hand{ position:absolute; right:50px; bottom:40px; z-index:1; font-size:18px; line-height:1.15; text-align:right; transform:rotate(-4deg); }
.gv-mega-hand::after{ content:''; display:block; width:110px; height:2px; background:var(--gv-gold); margin:6px 0 0 auto; transform:rotate(-2deg); }
@media (max-width:1240px){ .gv-mega-in h2.gv-mega-title{ font-size:38px; } .gv-mega-quote{ right:260px; } .gv-nav-dd a.gv-mega-stop{ width:96px; } .gv-mega-name{ font-size:14px; } }
@media (max-width:980px){ .gv-nav-dd.gv-mega{ width:auto; transform:none !important; left:auto; background:transparent; } .gv-mega .gv-mega-plain{ display:block; } .gv-mega .gv-mega-in{ display:none; } .gv-nav > div.gv-has-mega{ position:relative; } }

/* 2026-09-20 (Siva): Cormorant's old-style figures draw 0 like an o ("oDTE") — lining numerals everywhere. */
html,body{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}

/* ═══ NIGHT MODE (Siva 2026-09-28: "as we had in our old design we need that toggle") ═══════════════════════════════
   html.gv-night (set by gv_shell_v3.js from localStorage gv_theme). Same token names, night values — every v3 page that
   uses the tokens follows. Meaning of colours kept: green = up, red = down, gold = brand, blue = links. */
html.gv-night{
  color-scheme:dark;
  --gv-ivory:#0B1220; --gv-paper:#111A2B; --gv-white:#151F33;
  --gv-navy:#E6EDF7; --gv-navy-soft:#B8C4D8; --gv-text:#C9D3E3; --gv-muted:#8391A8; --gv-border:#25324D;
  --gv-gold:#C9A55E; --gv-gold-soft:#3A2F18; --gv-gold-ink:#E3C88E;
  --gv-green:#2FBF7F; --gv-green-soft:#12301F;
  --gv-red:#F06464;   --gv-red-soft:#3A1719;
  --gv-blue:#6EA0FF;  --gv-blue-soft:#172746;
  --gv-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.30);
  --gv-shadow-lg:0 10px 30px rgba(0,0,0,.45);
}
html.gv-night body{ background:var(--gv-ivory); color:var(--gv-text); }
/* the pen-and-ink mountain art is drawn for paper — invert it softly so it reads as moonlit, not as a white block */
html.gv-night img[src*="art_"], html.gv-night img[src*="/art"], html.gv-night .gv-ph-art, html.gv-night .art{ filter:invert(.92) hue-rotate(180deg) brightness(.62) contrast(1.1); opacity:.4; }
html.gv-night img[src*="gv_mark"]{ filter:brightness(1.15); }
/* same art drawn as a ::after background (header corner, Backtest Lab head — Siva Image #11) — the night pass can't reach pseudo-elements */
html.gv-night .gv-hdr::after, html.gv-night .lab-bar::after{ filter:invert(.92) hue-rotate(180deg) brightness(.62) contrast(1.1); opacity:.4; }
/* navy-filled controls (selected chips, navy pills/buttons) — navy is the light text colour at night, so give them the blue fill */
html.gv-night .gv-pill-navy, html.gv-night .gv-btn-navy{ background:#2E5BD8; color:#fff; }
/* surfaces with hard-coded day colours */
html.gv-night .gv-hdr{ background:rgba(11,18,32,.92); border-bottom-color:var(--gv-border); }
html.gv-night .gv-mega-strip{ background:rgba(21,31,51,.94); }
html.gv-night .gv-hdr select, html.gv-night .gv-hdr input{ background:transparent !important; color:var(--gv-navy) !important; }   /* the account picker sits inside the dark pill; page-local select{#fff} rules must not win */
/* "inverse" blocks (dark bar, white text by day) keep that look at night: scope their own token values */
html.gv-night .gv-tape, html.gv-night .gv-news{ --gv-navy-soft:#0E1628; --gv-white:#E6EDF7; --gv-gold-soft:#E3C88E; border-top:1px solid var(--gv-border); }
/* theme button in the header */
.gv-theme-btn svg{ width:18px; height:18px; }
/* 2026-10-09 PHONE: at 390 px the header row needed ~416 px (brand 128 + burger + 5 right-side buttons) → 10 px sideways scroll on every
   page. ≤420 px: header shows the logo mark only (wordmark hidden; footer brand unchanged). */
@media (max-width:420px){ .gv-hdr-in .gv-brand > span{ display:none; } .gv-hdr-in .gv-brand{ margin-right:0; } }