/* ambient aurora — fixed accents blended into transparent, pinned behind all
   content (paints over the opaque body bg, under the page). Light default gets
   the airier tint; dark gets the richer wash. */
html body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(680px 440px at 10% -8%,color-mix(in srgb,#416aec 9%,transparent),transparent 68%),
   radial-gradient(620px 440px at 94% 2%,color-mix(in srgb,#8b5cf6 8%,transparent),transparent 70%),
   radial-gradient(760px 520px at 50% 112%,color-mix(in srgb,#0ea5e9 7%,transparent),transparent 70%);}
html[data-theme="dark"] body::before{
  background:
   radial-gradient(680px 440px at 10% -8%,color-mix(in srgb,#416aec 20%,transparent),transparent 68%),
   radial-gradient(620px 440px at 94% 2%,color-mix(in srgb,#8b5cf6 16%,transparent),transparent 70%),
   radial-gradient(760px 520px at 50% 112%,color-mix(in srgb,#0ea5e9 14%,transparent),transparent 70%);}

/* buttons — smooth transition + a subtle accent glow / lift on hover (additive;
   vtm/tm only exist on the Bitcoin Vector page, harmless elsewhere) */
.vtm-btn,.tm-btn,.navbtn,.ai-brief-link{transition:transform .16s ease,border-color .16s ease,
  color .16s ease,background .16s ease,box-shadow .18s ease;}
.vtm-btn:hover,.tm-btn:hover,.navbtn:hover{border-color:color-mix(in srgb,var(--blue) 58%,var(--grid));
  box-shadow:0 4px 13px -5px color-mix(in srgb,var(--blue) 40%,transparent);}
.ai-brief-link:hover{transform:translateY(-1px);
  box-shadow:0 5px 14px -5px color-mix(in srgb,var(--blue) 42%,transparent);}

/* top-bar link light-up — accent-tinted hover/active. Mix base uses the FULL
   surface fallback chain --card → --panel2 → --panel (+ hardcoded final), same as
   the glass fill below: the vector family has two palette conventions (most pages
   define --card; commodities uses --panel2/--panel and no --card), so a bare
   --card OR bare --panel2 base is null on some pages → invalid color-mix → dead
   hover. The dropdown-item hover moved to the aurora-glass block below. */
a.nav-link:hover,a.nav-link.active{background:color-mix(in srgb,var(--blue) 12%,var(--card,var(--panel2,var(--panel,#eef1f6))));}
html[data-theme="dark"] a.nav-link:hover,html[data-theme="dark"] a.nav-link.active{
  background:color-mix(in srgb,var(--blue) 20%,var(--card,var(--panel2,var(--panel,#222732))));}

/* 3rd-tier fly-out (Other Assets ▸ Bitcoin Vector / Commodities) — layout only,
   palette inherited from the host page's inline nav-dd-menu. Loaded after the
   page <style>, so these position overrides win. */
.nav-dd-menu .nav-sub{display:block;position:relative;}
.nav-dd-menu .nav-sub>a.nav-sub-trig{display:flex;align-items:flex-start;}
.nav-dd-menu .nav-sub>a.nav-sub-trig .caret-r{margin-left:auto;padding-left:12px;font-size:10px;
  opacity:.55;flex:none;align-self:center;transition:transform .2s,color .2s,opacity .2s,filter .2s;}
/* breathe only while the dropdown is open + hover-capable + motion allowed — never
   on hidden carets (perf) or the mobile accordion (theme.js rotate clobber). */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .nav-dd:hover .nav-sub>a.nav-sub-trig .caret-r,
  .nav-dd:focus-within .nav-sub>a.nav-sub-trig .caret-r{animation:navCaretBreath 2.6s ease-in-out infinite;}}
.nav-dd-menu .nav-sub:hover>a.nav-sub-trig .caret-r{animation:none;opacity:1;transform:translateX(3px);
  color:var(--blue,var(--link,#5b9dff));
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--blue,var(--link,#5b9dff)) 65%,transparent));}
.nav-dd-menu .nav-sub>a.nav-sub-trig .nav-sub-text{display:block;flex:1;min-width:0;white-space:normal;}
.nav-dd-menu .nav-sub>.nav-dd-menu{top:-7px;left:100%;z-index:95;}
.nav-dd-menu .nav-sub::after{content:"";position:absolute;top:0;left:100%;width:12px;height:100%;}

/* ---- #286 regression repair -------------------------------------------------
   PR #286 switched the self-contained Vector-family pages (vector, commodities,
   forex, bonds, transmission) from the old inline `.topbar` nav to
   `<nav class="site-nav">` — but these pages don't link theme.css, so the
   `.site-nav` menu lost ALL its base styling and rendered as a fully-expanded,
   unstyled list ("menu looks css-broken"). Restore the base menu + controls CSS
   here (the partial every Vector-family page already shares), themed with the
   Vector-family vars (--card/--grid/--ink/--text/--muted/--blue) and scoped to
   `.site-nav` so the `.topbar` pages that also include this partial keep their
   own inline nav untouched. The fly-out + hover polish above still apply. The
   `≤700px` mobile hamburger is injected later by theme.js and wins on order. */
.site-nav{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:9px;max-width:1500px;margin-left:auto;margin-right:auto}
/* menu on its own first row (one line); search + controls share row two — holds the bar to two rows */
.site-nav .nav-links{grid-column:1 / -1;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-width:0}
.site-nav .nav-search{grid-column:1;grid-row:2;max-width:480px;position:relative;min-width:0}
/* global stock search field — the #286 repair restored the menu/brand/controls but
   left the search field itself unstyled: the <input> fell back to a raw browser box
   (inset border, square corners, ~150px wide) with the 🔎 glyph floating inline and
   the suggestions list dropping into normal flow ("search bar looks css-broken").
   Port theme.css's .nav-search recipe, scoped to .site-nav and themed via var
   fallbacks that cover every palette this partial serves: theme.css pages
   (--panel2/--line/--text/--muted/--link/--glass-*), the --card/--grid/--text/--muted
   pages, and commodities' --panel2/--line/--tx/--mut/--blue. Loaded after each page's
   own <style> (and after theme.css on the two pages that link it), so it wins. */
.site-nav .nav-search .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.65;pointer-events:none}
.site-nav .nav-search input{width:100%;box-sizing:border-box;padding:8px 12px 8px 32px;border-radius:10px;border:1px solid var(--line,var(--grid));background:var(--panel2,var(--card));color:var(--text,var(--tx));font:inherit;font-size:13px;outline:none;transition:border-color .18s,box-shadow .25s ease;animation:vpSearchGlow 3.8s ease-in-out infinite}
@keyframes vpSearchGlow{
  0%,100%{border-color:color-mix(in srgb,#416aec 30%,var(--line,var(--grid)));box-shadow:0 0 0 0 rgba(65,106,236,0),0 0 5px 0 rgba(65,106,236,.10)}
  50%{border-color:#416aec;box-shadow:0 0 0 3px rgba(65,106,236,.22),0 0 16px 2px rgba(65,106,236,.38)}}
.site-nav .nav-search input::placeholder{color:var(--muted,var(--mut))}
.site-nav .nav-search input:focus{border-color:var(--blue,var(--link));animation:none;box-shadow:none}
@media(prefers-reduced-motion:reduce){.site-nav .nav-search input{animation:none}}
.site-nav .nav-sugg{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:80;background:var(--glass-bg,color-mix(in srgb,var(--card,var(--panel)) 92%,transparent));-webkit-backdrop-filter:var(--glass-blur,saturate(180%) blur(22px));backdrop-filter:var(--glass-blur,saturate(180%) blur(22px));border:1px solid var(--glass-brd,color-mix(in srgb,var(--ink) 12%,transparent));border-radius:13px;overflow:hidden;overflow-y:auto;max-height:60vh;box-shadow:var(--glass-shadow,0 20px 54px -24px rgba(20,32,64,.34),0 10px 24px -14px rgba(20,32,64,.20));display:none}
html[data-theme="dark"] .site-nav .nav-sugg{box-shadow:var(--glass-shadow,0 24px 64px -22px rgba(3,7,18,.74),0 10px 26px -12px rgba(3,7,18,.55))}
.site-nav .nav-sugg.show{display:block}
.site-nav .nav-sugg .row{display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer}
.site-nav .nav-sugg .row:hover,.site-nav .nav-sugg .row.sel{background:color-mix(in srgb,var(--blue,var(--link)) 12%,var(--panel2,var(--card)))}
.site-nav .nav-sugg .row .mkt{flex:none;width:20px;text-align:center;font-size:13px;line-height:1}
.site-nav .nav-sugg .row b{min-width:58px;font-size:13px;color:var(--text,var(--tx));font-weight:600}
.site-nav .nav-sugg .row small{flex:1;color:var(--muted,var(--mut));font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-nav .nav-sugg .row .stt{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}
.site-nav .nav-sugg .empty{padding:11px 13px;color:var(--muted,var(--mut));font-size:12.5px}
/* MASTERMIND brand lockup — covers the .site-nav (migrated) and legacy .topbar nav (mirrors theme.css; --blue stands in for the macro --link). */
.site-nav .nav-brand,.topbar .nav-brand{display:inline-flex;align-items:center;gap:8px;flex:none;padding:3px 10px 3px 4px;margin:0 6px 0 0;border-radius:11px;text-decoration:none;transition:background .18s,transform .16s ease}
.site-nav .nav-brand:hover,.topbar .nav-brand:hover{background:color-mix(in srgb,var(--blue) 11%,transparent);transform:translateY(-1px)}
.site-nav .nav-brand .brand-glyph,.topbar .nav-brand .brand-glyph{width:29px;height:29px;display:block;flex:none;filter:drop-shadow(0 2px 6px rgba(40,56,128,.34))}
.site-nav .nav-brand .brand-word,.topbar .nav-brand .brand-word{font-family:var(--font-ui);font-size:13.5px;font-weight:900;letter-spacing:.07em;line-height:1;color:var(--text);white-space:nowrap}
@media(max-width:560px){.site-nav .nav-brand .brand-word,.topbar .nav-brand .brand-word{display:none}}
.site-nav a.nav-link{padding:7px 11px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .18s,background .18s}
.site-nav .nav-dd{position:relative;display:inline-flex}
.site-nav .nav-dd>a.nav-link .caret{display:inline-block;margin-left:3px;font-size:9px;opacity:.6;transition:transform .2s}
.site-nav .nav-dd:hover>a.nav-link .caret,.site-nav .nav-dd:focus-within>a.nav-link .caret{transform:rotate(180deg)}
.site-nav .nav-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:9px}
/* frosted glass — mirrors the --glass-* token recipe in theme.css (which this
   self-contained family can't load), themed with the vector palette. Dual-targets
   BOTH nav wrappers this family ships: the migrated `.site-nav` pages (forex,
   bonds, commodities, vector, crossasset, transmission) and the legacy `.topbar`
   pages (strategies, masterminds, spr, *_allocation …), so every page in the
   family gets the same glass — not just the site-nav half. Loaded after each
   page's inline `.nav-dd-menu` (0,1,0), so this (0,2,0) wins. */
/* surface fallback chain --card → --panel2 → --panel covers BOTH vector-family
   palette conventions: most pages (forex/vector/bonds/spr/strategies…) define
   --card but not --panel2; commodities uses --panel2/--panel and no --card. A
   hardcoded final keeps the glass opaque even if a page defines none. */
.site-nav .nav-dd-menu,.topbar .nav-dd-menu{position:absolute;top:calc(100% + 7px);left:0;min-width:218px;
  background:color-mix(in srgb,var(--card,var(--panel2,var(--panel,#ffffff))) 90%,transparent);
  -webkit-backdrop-filter:saturate(185%) blur(26px);backdrop-filter:saturate(185%) blur(26px);
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:15px;
  box-shadow:0 20px 54px -24px rgba(20,32,64,.34),0 12px 28px -14px rgba(20,32,64,.20),inset 0 1px 0 rgba(255,255,255,.85);
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70}
html[data-theme="dark"] .site-nav .nav-dd-menu,html[data-theme="dark"] .topbar .nav-dd-menu{background:color-mix(in srgb,var(--card,var(--panel2,var(--panel,#14171f))) 86%,transparent);
  border-color:color-mix(in srgb,var(--text,var(--tx)) 14%,transparent);
  box-shadow:0 24px 64px -22px rgba(3,7,18,.74),0 12px 28px -14px rgba(3,7,18,.55),inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent)}
/* 3rd-tier fly-out: its parent .nav-dd-menu is already a backdrop root, so the
   nested backdrop-filter can't blur the page behind and the fill reads see-through.
   A denser near-opaque card fill matches the 2nd tier's frosted density. This
   selector is (0,4,0) — it beats the 2nd-tier glass rules above, including the
   dark override (0,3,1), so one rule covers both themes. */
.site-nav .nav-dd-menu .nav-sub>.nav-dd-menu,.topbar .nav-dd-menu .nav-sub>.nav-dd-menu{
  background:color-mix(in srgb,var(--card,var(--panel2,var(--panel,#181b21))) 97%,transparent)}
.site-nav .nav-dd:hover>.nav-dd-menu,.site-nav .nav-dd:focus-within>.nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.site-nav .nav-dd-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.site-nav .nav-dd-menu a .d{display:block;font-size:11.5px;font-weight:400;color:var(--muted,var(--mut,#8b93a1));margin-top:2px}
/* aurora-glass hover — mirrors theme.css so the whole site shares one menu feel:
   a soft blue→violet wash (::before) + luminous left bar (::after) + 2px glide.
   Excludes the Research mega cards (.nm-feat/.nav-mega-item, kept as-is). Accent
   --blue→--link→#5b9dff so it resolves on every family palette. .active = current
   page. Loaded after the page's inline nav, so it wins. */
.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item){position:relative;isolation:isolate;transition:transform .24s cubic-bezier(.2,.7,.3,1),color .18s}
.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item)::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(130% 150% at 0% 50%,color-mix(in srgb,var(--blue,var(--link,#5b9dff)) 18%,transparent),transparent 62%),linear-gradient(90deg,color-mix(in srgb,var(--blue,var(--link,#5b9dff)) 10%,transparent),color-mix(in srgb,#9b8cff 7%,transparent) 70%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent)}
.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item)::after{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);height:0;width:2.5px;border-radius:3px;z-index:-1;opacity:0;
  background:linear-gradient(color-mix(in srgb,var(--blue,var(--link,#5b9dff)) 90%,#fff),#9b8cff);
  box-shadow:0 0 8px color-mix(in srgb,var(--blue,var(--link,#5b9dff)) 70%,transparent);transition:height .3s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
/* background:transparent neutralises each page's hardcoded inline flat hover
   (#222732 / #eef1f6) so only the aurora wash paints (my 0,4,1 beats page 0,2,0). */
.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item):hover{transform:translateX(2px);background:transparent}
.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item).active{background:transparent}
.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item):hover::before,.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item).active::before{opacity:1}
.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item):hover::after,.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item).active::after{height:56%;opacity:1}
@keyframes navCaretBreath{0%,100%{opacity:.45;transform:translateX(0)}50%{opacity:.9;transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.nav-dd-menu .nav-sub>a.nav-sub-trig .caret-r{animation:none}.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item):hover{transform:none}.nav-dd-menu a:not(.nm-feat):not(.nav-mega-item)::after{transition:none}}
.site-nav .nav-ctrls{grid-column:2;grid-row:2;justify-self:end;align-self:center;display:flex;align-items:center;gap:10px}
.site-nav .nav-ctrls .ai-brief-link{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:none;padding:5px 12px;border-radius:999px;background:var(--card);border:1px solid var(--grid);color:var(--text);font-size:12.5px;font-weight:600;line-height:1;cursor:pointer}
.site-nav .nav-ctrls .ai-brief-link.active{background:var(--blue);border-color:var(--blue);color:#fff}
.site-nav .theme-switch{width:56px;height:27px;border-radius:999px;background:var(--card);border:1px solid var(--grid);position:relative;cursor:pointer;padding:0;flex:none}
.site-nav .theme-switch .ic{position:absolute;top:50%;transform:translateY(-50%);font-size:10.5px;opacity:.5;line-height:1}
.site-nav .theme-switch .ic.sun{right:8px}
.site-nav .theme-switch .ic.moon{left:8px}
.site-nav .theme-switch .knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#e8c15a;display:flex;align-items:center;justify-content:center;font-size:11px;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .34s cubic-bezier(.34,1.45,.5,1),background .3s}
.site-nav .theme-switch .knob::before{content:"🌙"}
html[data-theme="light"] .site-nav .theme-switch .knob{transform:translateX(29px);background:#285fff}
html[data-theme="light"] .site-nav .theme-switch .knob::before{content:"☀️"}
.site-nav .lang-toggle{display:inline-flex;position:relative;background:var(--card);border:1px solid var(--grid);border-radius:999px;padding:3px;flex:none;cursor:pointer}
.site-nav .lang-toggle .pill{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:999px;background:var(--blue);transition:transform .34s cubic-bezier(.34,1.4,.5,1)}
html[data-lang="zh"] .site-nav .lang-toggle .pill{transform:translateX(100%)}
.site-nav .lang-toggle .opt{position:relative;z-index:1;min-width:28px;text-align:center;padding:3px 9px;font-size:11.5px;font-weight:600;color:var(--muted);transition:color .25s;user-select:none}
html:not([data-lang="zh"]) .site-nav .lang-toggle .en-opt{color:#fff}
html[data-lang="zh"] .site-nav .lang-toggle .zh-opt{color:#fff}

/* One-row section menu (re-fix on current main): the 8-dropdown section menu
   (~1418px) overflowed the 1180 content rail and wrapped onto a second row.
   Widen the nav to the same ~1500 rail the macro family uses, on >=701px, for
   whichever nav variant a family page renders today: the body-level .site-nav
   (migrated vector pages, capped by an inline max-width:1180) and the legacy
   in-wrap .topbar (strategy / misc pages, a sticky bar inside the content rail).
   The page body keeps its 1180 rail and the <=700px hamburger (theme.js) is
   untouched. */
@media (min-width:701px){
  nav.site-nav{max-width:1500px !important;}
  .topbar{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding-left:max(40px,calc((100vw - 1500px)/2));
    padding-right:max(40px,calc((100vw - 1500px)/2));}
}

/* toggles — subtle hover feedback (their slide animations are untouched) */
.theme-switch,.lang-toggle{transition:border-color .18s ease,box-shadow .18s ease;}
.theme-switch:hover,.lang-toggle:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--grid));
  box-shadow:0 3px 11px -5px color-mix(in srgb,var(--blue) 40%,transparent);}

/* clickable card / tile containers — the landing's hover light-up, but only when
   the card is actually a link (display cards are untouched) */
a.card,a.actitem,a.idx-alloc{transition:transform .2s cubic-bezier(.2,.7,.3,1),
  border-color .2s ease,box-shadow .2s ease;}
a.card:hover,a.actitem:hover,a.idx-alloc:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--blue) 45%,var(--grid));
  box-shadow:0 14px 30px -16px color-mix(in srgb,var(--blue) 40%,transparent);}

/* AI Daily Brief card — these self-contained pages don't link theme.css, where
   the .aibrief-card / .abc-* layout lives, so the 🧠 card collapsed to a raw
   emoji + text run with no flex. Port the layout here (mirrors theme.css) so it
   lays out; the base .card surface + the a.card:hover above still apply. */
.aibrief-card{display:flex;align-items:center;gap:14px;text-decoration:none}
.aibrief-card .abc-ic{font-size:30px;line-height:1;flex:none}
.aibrief-card .abc-mid{flex:1;min-width:0}
.aibrief-card .abc-tit{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.aibrief-card .abc-sub{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.5}
.aibrief-card .abc-go{font-size:22px;font-weight:700;color:var(--blue);flex:none}

/* "?" help affordance — a circled question-mark that reveals a plain-language
   note on hover/focus (native title, bilingual "EN · ZH" like the .tip pattern).
   Used to lift cryptic micro-copy off the cards without losing the explanation. */
.qm{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;border:1px solid var(--faint);color:var(--muted);font-size:10px;
  font-weight:700;line-height:1;cursor:help;vertical-align:middle;margin-left:5px;
  user-select:none;transition:border-color .15s ease,color .15s ease}
.qm:hover,.qm:focus{border-color:var(--blue);color:var(--blue);outline:none}

/* accessible keyboard focus ring */
:where(.vtm-btn,.tm-btn,.navbtn,.ai-brief-link,a.nav-link,.nav-dd-menu a,.theme-switch,
  .lang-toggle,a.card,a.actitem,a.idx-alloc):focus-visible{
  outline:2px solid color-mix(in srgb,var(--blue) 70%,transparent);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  .vtm-btn:hover,.tm-btn:hover,.navbtn:hover,.ai-brief-link:hover,
  a.card:hover,a.actitem:hover,a.idx-alloc:hover{transform:none;}
}