/* ======================================================================
   r10 NOTE - palette + spectrum removed from this file.

   theme.css is documented as COMPONENT RULES ONLY, but had accumulated 359
   --palette-* / --neon-* redefinitions across 14 blocks - sediment from r7
   Royal Sapphire, r8 Graphite, r8.5 Pearl Slate and r9 Heritage Navy, none of
   which were removed when the next revision landed. They silently overrode
   design-tokens.css, which is why editing the "single source of truth" had no
   effect on the main surfaces.

   Both palettes now live ONLY in web/design-tokens.css. Do not reintroduce a
   --palette-* or --neon-* declaration here.
   ====================================================================== */
/* ======================================================================
   GLOBAL COMPONENT THEME — v0.27.7
   IMPORTANT: this file contains COMPONENT RULES ONLY.
   All editable COLOR + TYPOGRAPHY values live in design-tokens.css.
   No palette value may be redefined here.
   ====================================================================== */

/* Compatibility aliases consume the single source of truth. */
:root,body{
  --ui-bg:var(--palette-canvas);
  --ui-shell:var(--palette-shell);
  --ui-side:var(--palette-sidebar);
  --ui-card:var(--palette-card);
  --ui-card-soft:var(--palette-card-soft);
  --ui-text:var(--palette-text);
  --ui-muted:var(--palette-muted);
  --ui-line:var(--palette-line);
  --ui-line-soft:var(--palette-line-soft);
  --ui-accent:var(--palette-accent);
  --ui-accent-2:var(--palette-accent-2);
  --ui-accent-soft:var(--palette-accent-soft);
  --ui-positive:var(--palette-positive);
  --green:var(--palette-accent);
  --green2:var(--palette-accent-2);
  --text:var(--palette-text);
  --muted:var(--palette-muted);
  --line:var(--palette-line-soft);
  --card:var(--palette-card);
  --bg:var(--palette-main);
  --shadow:0 12px 34px var(--palette-shadow);
  --radius:var(--layout-card-radius);
  --lg-bg:var(--palette-canvas);
  --lg-shell:var(--palette-shell);
  --lg-side:var(--palette-sidebar);
  --lg-card:var(--palette-card);
  --lg-text:var(--palette-text);
  --lg-muted:var(--palette-muted);
  --lg-line:var(--palette-line);
  --lg-accent:var(--palette-accent);
  --lg-accent-soft:var(--palette-accent-soft);
}

/* ----------------------------------------------------------------------
   Application surfaces
   ---------------------------------------------------------------------- */
html,body{color:var(--palette-text)}
body:not(.theme-dark){background:var(--palette-canvas)!important}
body[data-theme="dark"],body.theme-dark{background:var(--palette-canvas)!important;color:var(--palette-text)!important}

.app{
  background:var(--palette-shell)!important;
  color:var(--palette-text)!important;
  border-color:color-mix(in srgb,var(--palette-line) 76%,var(--color-transparent))!important;
  box-shadow:0 28px 78px var(--palette-shadow)!important;
}
.main{background:var(--palette-main)!important;color:var(--palette-text)!important}
.side{
  background:var(--palette-sidebar)!important;
  color:var(--palette-text)!important;
  border-left-color:var(--palette-line-soft)!important;
  box-shadow:none!important;
}
/* FinSet light sidebar is deliberately flat. */
body:not([data-theme="dark"]) .side{background:var(--palette-sidebar)!important;box-shadow:none!important}

/* Strong, readable type hierarchy */
body,button,input,select,textarea{font-weight:var(--type-weight-520)}
.nav button{color:var(--palette-text)!important;font-weight:var(--type-weight-780) !important}
.navGroup{color:var(--palette-muted-2)!important;font-weight:var(--type-weight-850) !important}
.brand h1,.pagehead h2,.finsetGreeting h2{color:var(--palette-text-strong)!important}
.brand small,.sidefoot,.sub,.muted,.pagehead p,.finsetGreeting p{color:var(--palette-muted)!important}
.card h3,.finsetPanelHead h3,.sectionTitle h3,.finsetKpi strong{color:var(--palette-text-strong)!important}
.finsetKpi label,.field label{color:var(--palette-text)!important}

/* Side navigation — palette driven, no decorative gradient in light */
.nav button:hover{background:var(--palette-accent-soft)!important;color:var(--palette-text-strong)!important}
.nav button.active{
  background:var(--palette-accent)!important;
  color:var(--palette-on-accent)!important;
  box-shadow:none!important;
}
.nav button.active .ni{background:color-mix(in srgb,var(--palette-on-accent) 18%,var(--color-transparent))!important;color:var(--palette-on-accent)!important}
.moneyModeSwitch{background:var(--palette-accent-soft)!important;border-color:var(--palette-line-soft)!important}
.moneyModeSwitch button{color:var(--palette-muted)!important}
.moneyModeSwitch button.active{background:var(--palette-elevated)!important;color:var(--palette-accent)!important;box-shadow:0 2px 8px var(--palette-shadow)!important}
.globalAssetSearchBox{background:var(--palette-card-soft)!important;border-color:var(--palette-line)!important;color:var(--palette-text)!important}
.globalAssetSearchBox input{color:var(--palette-text)!important}
.globalAssetSearchBox input::placeholder{color:var(--palette-muted-2)!important;opacity:1!important}
.sideBottom{background:var(--palette-sidebar)!important;border-top-color:var(--palette-line-soft)!important}
.appearancePanel{border-color:var(--palette-line-soft)!important}
.appearancePanel summary{color:var(--palette-text)!important}
.sideUserCard{background:var(--palette-card-soft)!important;border-color:var(--palette-line)!important;color:var(--palette-text)!important}
.sideUserMeta small{color:var(--palette-muted)!important}

/* Cards — clearer light separation, stronger dark separation */
.card,.finsetKpi,.finsetPanel,.question,.allocItem,.feedItem,.rebRow,.scenario,.scoreCard,.mcard,.price,.recCard,.fundCard,.positionCard,.ownerSection,.fundWizard,.fundScenarioCard,.smartMetric,.messageCard,.messageComposer,.metalResult,.ratioCard,.assumptionCard,.factorCard,.analysisEvidenceCard,.evidenceEdit,.smartAlert,.assetRelation>div,
.marketTableCard,.marketQuickCard,.mobileRefCard,.mobileQuickCards>button{
  background:var(--palette-card)!important;
  border-color:var(--palette-line)!important;
  color:var(--palette-text)!important;
}
body:not([data-theme="dark"]) .card,
body:not([data-theme="dark"]) .finsetKpi,
body:not([data-theme="dark"]) .finsetPanel{
  box-shadow:0 3px 12px color-mix(in srgb,var(--palette-accent) 8%,var(--color-transparent))!important;
}
body[data-theme="dark"] .card,
body[data-theme="dark"] .finsetKpi,
body[data-theme="dark"] .finsetPanel{
  box-shadow:0 12px 28px var(--palette-shadow)!important;
}
.finsetCircleBtn,.finsetProfileChip,.finsetPeriod,.finsetPeriodIcon,.finsetSelect,.panelArrow,
.btn.ghost,input,select,textarea{
  background:var(--palette-card)!important;
  color:var(--palette-text)!important;
  border-color:var(--palette-line)!important;
}
.finsetTableHead,th{background:var(--palette-card-soft)!important;color:var(--palette-muted)!important}
.finsetTableRow,td{color:var(--palette-text)!important;border-color:var(--palette-line-soft)!important}

/* Primary chrome */
.btn.primary,.btn:not(.ghost):not(.danger):not(.gold),.tabs button.active{
  background:var(--palette-accent)!important;
  color:var(--palette-on-accent)!important;
  border-color:var(--palette-accent)!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--palette-accent) 20%,var(--color-transparent))!important;
}
.btn.primary:hover,.btn:not(.ghost):not(.danger):not(.gold):hover{background:var(--palette-accent-hover)!important}
.progress i{background:linear-gradient(90deg,var(--palette-accent),var(--palette-accent-2))!important}
.up{color:var(--palette-positive)!important}.down{color:var(--palette-negative)!important}

/* Hero/banner legacy sections follow the same brand family. */
.hero,.moduleBanner,.subscriptionHero,.marketProHero{
  background:linear-gradient(135deg,color-mix(in srgb,var(--palette-accent) 26%,var(--palette-sidebar)),var(--palette-shell))!important;
  border-color:var(--palette-line)!important;
}
body[data-theme="dark"] .hero,
body[data-theme="dark"] .moduleBanner,
body[data-theme="dark"] .subscriptionHero,
body[data-theme="dark"] .marketProHero{
  background:linear-gradient(135deg,var(--palette-card-soft),var(--palette-card) 60%,var(--palette-elevated))!important;
}
.hero:before{background:radial-gradient(circle,var(--palette-glow),var(--color-transparent) 67%)!important}

/* Dark Vesper gloss — preserve the shape, only palette controls its color. */
body[data-theme="dark"] .app{position:relative;isolation:isolate}
body[data-theme="dark"] .app:before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-112px;top:-92px;width:410px;height:315px;border-radius:46% 54% 58% 42%;
  background:radial-gradient(ellipse at center,var(--palette-glow) 0,color-mix(in srgb,var(--palette-accent) 13%,var(--color-transparent)) 40%,var(--color-transparent) 72%)!important;
  filter:blur(4px);opacity:.98;
}
body[data-theme="dark"] .app:after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:20px;top:18px;width:238px;height:124px;
  border-left:1px solid color-mix(in srgb,var(--palette-accent-2) 36%,var(--color-transparent))!important;
  border-top:1px solid color-mix(in srgb,var(--palette-accent-2) 40%,var(--color-transparent))!important;
  border-radius:28px 0 0 0;
  filter:drop-shadow(0 0 15px var(--palette-glow));opacity:.90;
}

/* Empty Create Money area: intentionally no card, border or placeholder. */
.createBlank{display:block;min-height:calc(100vh - 165px);background:var(--color-transparent)!important;border:0!important;box-shadow:none!important}
body[data-money-mode="create"] .main{background:var(--palette-main)!important}

/* Boot fallback is visually readable if a true API/startup failure ever happens. */
.bootErrorCard{background:var(--palette-card)!important;border:1px solid var(--palette-line)!important;color:var(--palette-text)!important;box-shadow:0 18px 45px var(--palette-shadow)!important}

/* ----------------------------------------------------------------------
   Responsive header/sidebar integrity
   ---------------------------------------------------------------------- */
.mobileTopbar{
  background:color-mix(in srgb,var(--palette-card) 95%,var(--color-transparent))!important;
  border-color:var(--palette-line-soft)!important;
  color:var(--palette-text)!important;
}
.mobileTopbar button{background:var(--palette-card)!important;border-color:var(--palette-line)!important;color:var(--palette-text)!important}
.mobileHeaderActions{grid-template-columns:repeat(3,44px)!important;gap:6px!important;justify-self:end!important}
.mobileBrand{min-width:0!important;overflow:hidden!important}
.mobileBrand span{min-width:0!important;overflow:hidden!important}
.mobileBrand b,.mobileBrand small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

/* only navigation scrolls; bottom controls own their fixed region */
.side{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.nav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:20px!important;overscroll-behavior:contain!important}
.sideBottom{flex:0 0 auto!important;position:relative!important;z-index:8!important}

/* Desktop shell slightly larger, matching the approved reference proportions. */
@media(min-width:1281px){
  body{padding:22px!important}
  .app{width:min(1600px,calc(100vw - 44px))!important;min-height:calc(100vh - 44px)!important;border-radius:36px!important}
  .side{height:calc(100vh - 44px)!important;max-height:calc(100vh - 44px)!important;top:22px!important}
  .main{padding:27px 26px 32px!important}
  .nav button{font-size:var(--type-size-12_25px) !important;min-height:43px!important}
  .navGroup{font-size:var(--type-size-9_5px) !important}
  .sideUserMeta b{font-size:var(--type-size-11_5px) !important}
  .sideUserMeta small{font-size:var(--type-size-9_5px) !important}
}

@media(max-width:1280px){
  .mobileTopbar{grid-template-columns:48px minmax(0,1fr) 144px!important}
  .side{background:var(--palette-sidebar)!important}
  .createBlank{min-height:calc(100dvh - 145px)}
}
@media(max-width:560px){
  .mobileTopbar{grid-template-columns:46px minmax(0,1fr) 132px!important;padding-inline:10px!important}
  .mobileHeaderActions{grid-template-columns:repeat(3,40px)!important;gap:4px!important}
  .mobileHeaderActions button{min-width:40px!important;width:40px!important;min-height:40px!important;height:40px!important;border-radius:13px!important}
  .mobileBrand b{font-size:var(--type-size-11_5px) !important}.mobileBrand small{font-size:var(--type-size-8_5px) !important}
}
@media(max-width:390px){
  .mobileTopbar{grid-template-columns:42px minmax(0,1fr) 120px!important;gap:5px!important}
  .mobileHeaderActions{grid-template-columns:repeat(3,37px)!important;gap:3px!important}
  .mobileHeaderActions button{min-width:37px!important;width:37px!important;min-height:37px!important;height:37px!important}
}

/* ----------------------------------------------------------------------
   Login/Register uses the exact same palette tokens
   ---------------------------------------------------------------------- */
body:not(.theme-dark) .shell{background:var(--palette-shell)!important}
body:not(.theme-dark) .intro{background:var(--palette-sidebar)!important;border-color:var(--palette-line-soft)!important;color:var(--palette-text)!important}
body:not(.theme-dark) .auth{background:var(--palette-main)!important}
body.theme-dark .shell{background:var(--palette-shell)!important;border-color:var(--palette-line)!important;box-shadow:0 28px 78px var(--palette-shadow)!important}
body.theme-dark .intro{background:var(--palette-sidebar)!important;border-color:var(--palette-line-soft)!important;color:var(--palette-text)!important}
body.theme-dark .auth{background:var(--palette-main)!important}
.benefit{
  background:linear-gradient(135deg,var(--palette-accent-2),var(--palette-accent))!important;
  border-color:color-mix(in srgb,var(--palette-accent) 72%,var(--palette-line))!important;
  color:var(--palette-on-accent)!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--palette-accent) 18%,var(--color-transparent))!important;
}
.tabs{background:var(--palette-accent-soft)!important}.tabs button{color:var(--palette-muted)!important}
.tabs button.active{background:var(--palette-card)!important;color:var(--palette-accent)!important;box-shadow:0 3px 10px var(--palette-shadow)!important}
.field input{background:var(--palette-card)!important;color:var(--palette-text)!important;border-color:var(--palette-line)!important}
.field input:focus{border-color:var(--palette-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--palette-accent) 13%,var(--color-transparent))!important}
.passwordToggle{color:var(--palette-muted)!important}.passwordToggle:hover{background:var(--palette-accent-soft)!important;color:var(--palette-accent)!important}
.hint{background:var(--palette-card-soft)!important;color:var(--palette-muted)!important;border-color:var(--palette-line-soft)!important}
.themeToggle{background:var(--palette-card)!important;color:var(--palette-text)!important;border-color:var(--palette-line)!important}
body.theme-dark .intro:after{background:radial-gradient(circle,var(--palette-glow) 0,color-mix(in srgb,var(--palette-accent) 13%,var(--color-transparent)) 38%,var(--color-transparent) 69%)!important}
body.theme-dark .intro:before{border-color:color-mix(in srgb,var(--palette-accent-2) 34%,var(--color-transparent))!important}

/* motion stays short and understated */
.app,.side,.main,.card,.finsetKpi,.finsetPanel,.nav button,.btn,.moneyModeSwitch button,.mobileTopbar{transition-duration:150ms!important}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Remaining interactive chrome also consumes the global brand tokens. */
.themeBtns,.appearanceBody{background:var(--palette-card-soft)!important;border-color:var(--palette-line)!important;color:var(--palette-text)!important}
.themeBtns button,.experienceMode button,.complexityRibbon button{background:var(--palette-card)!important;color:var(--palette-muted)!important;border-color:var(--palette-line)!important}
.themeBtns button.active,.experienceMode button.active,.complexityRibbon button.active,.choice.sel{
  background:var(--palette-accent-soft)!important;color:var(--palette-accent)!important;border-color:color-mix(in srgb,var(--palette-accent) 38%,var(--palette-line))!important;
}
.qnum{background:var(--palette-accent-soft)!important;color:var(--palette-accent)!important}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--palette-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--palette-accent) 11%,var(--color-transparent))!important}
.searchBadge{background:var(--palette-accent-soft)!important;color:var(--palette-accent)!important}

/* Keep semantic colors independent from the brand palette. */
.hint,.goodbox{background:var(--palette-positive-soft)!important;color:var(--palette-positive)!important;border-color:color-mix(in srgb,var(--palette-positive) 22%,var(--palette-line))!important}
.dangerbox,.pill.red{background:var(--palette-negative-soft)!important;color:var(--palette-negative)!important;border-color:color-mix(in srgb,var(--palette-negative) 22%,var(--palette-line))!important}
.warn,.pill.gold{background:var(--palette-warning-soft)!important;color:var(--palette-warning)!important;border-color:color-mix(in srgb,var(--palette-warning) 22%,var(--palette-line))!important}

/* ======================================================================
   v0.27.7 MASTER UI PASS
   Palette + typography definitions intentionally live ONLY in
   design-tokens.css. This section consumes those tokens.
   ====================================================================== */
/* --- Global legibility ------------------------------------------------ */
html{font-size:var(--type-root) !important}
body,button,input,select,textarea{font-family:var(--ui-font,var(--font-family-default)) !important;font-weight:var(--type-weight-560) !important}
body{color:var(--palette-text)!important}
.main{font-size:var(--font-size-body)!important;line-height:var(--type-line-1_75) !important}
.pagehead h2,.finsetGreeting h2,.card h3,.sectionTitle h3,.finsetPanelHead h3{font-weight:var(--type-weight-850) !important;color:var(--palette-text-strong)!important}
.pagehead p,.sub,.muted,.tiny,.small,.kfoot,.finsetGreeting p,.finsetKpi .kpiFoot{color:var(--palette-muted)!important;font-weight:var(--type-weight-570) !important}
.nav button{font-size:var(--font-size-nav)!important;font-weight:var(--type-weight-790) !important;line-height:var(--type-line-1_5) !important;color:var(--palette-text)!important}
.navGroup{font-size:var(--type-size-10px) !important;font-weight:var(--type-weight-850) !important;color:var(--palette-muted-2)!important}
.field label{font-size:var(--type-size-11_5px) !important;font-weight:var(--type-weight-800) !important;color:var(--palette-text)!important}
.field input,.field select,.field textarea{font-size:var(--type-size-12_5px) !important;font-weight:var(--type-weight-600) !important;color:var(--palette-text)!important}
.finsetKpi label{font-size:var(--type-size-13_5px) !important;font-weight:var(--type-weight-800) !important;color:var(--palette-text)!important}
.finsetKpi strong{font-weight:var(--type-weight-900) !important;color:var(--palette-text-strong)!important}

/* --- One visual shell for both money modes --------------------------- */
body,body[data-money-mode="growth"],body[data-money-mode="create"]{background:var(--palette-canvas)!important}
.app,body[data-money-mode="growth"] .app,body[data-money-mode="create"] .app{background:var(--palette-shell)!important;border-color:var(--palette-line-soft)!important}
.main,body[data-money-mode="growth"] .main,body[data-money-mode="create"] .main{background:var(--palette-main)!important;color:var(--palette-text)!important}
.side,body[data-money-mode="growth"] .side,body[data-money-mode="create"] .side{background:var(--palette-sidebar)!important;color:var(--palette-text)!important}
.createBlank{display:block!important;min-height:calc(100vh - 150px)!important;background:var(--color-transparent)!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important}
/* Create Money has no modules/nav yet; the mode switch and account utilities remain. */
body[data-money-mode="create"] #nav{display:none!important}
body[data-money-mode="create"] .globalAssetSearchShell{display:none!important}
body[data-money-mode="create"] .appearancePanel{display:none!important}

/* --- FinSet-like light sidebar: flat, clear, no gradients/shadows ----- */
body:not([data-theme="dark"]) .side{background:var(--palette-sidebar)!important;background-image:none!important;box-shadow:none!important;border-left:1px solid var(--palette-line-soft)!important}
body:not([data-theme="dark"]) .sideBottom{background:var(--palette-sidebar)!important}
body:not([data-theme="dark"]) .nav button:hover{background:var(--palette-accent-soft)!important;color:var(--palette-text-strong)!important}
.nav button.active{background:var(--palette-accent)!important;color:var(--palette-on-accent)!important;box-shadow:none!important}
.nav button.active::before,.nav button.active::after{background:var(--palette-accent-2)!important;border-color:var(--palette-accent-2)!important;box-shadow:0 0 16px color-mix(in srgb,var(--palette-accent) 44%,var(--color-transparent))!important}
.nav button.active .ni{background:color-mix(in srgb,var(--palette-on-accent) 18%,var(--color-transparent))!important;color:var(--palette-on-accent)!important}
.moneyModeSwitch{background:var(--palette-accent-soft)!important;border:1px solid var(--palette-line-soft)!important;box-shadow:none!important}
.moneyModeSwitch button{color:var(--palette-muted)!important;font-weight:var(--type-weight-800) !important}
.moneyModeSwitch button.active{background:var(--palette-card)!important;color:var(--palette-accent)!important;box-shadow:0 2px 10px color-mix(in srgb,var(--palette-shadow) 55%,var(--color-transparent))!important}
.globalAssetSearchBox{background:var(--palette-card)!important;border-color:var(--palette-line)!important;color:var(--palette-text)!important}
.globalAssetSearchBox input{color:var(--palette-text)!important}
.globalAssetSearchBox input::placeholder{color:var(--palette-muted-2)!important;opacity:1!important}
.appearancePanel summary,.appearanceBody,.themeBtns{background:var(--palette-card-soft)!important;color:var(--palette-text)!important;border-color:var(--palette-line)!important}
.sideUserCard{background:var(--palette-card)!important;border:1px solid var(--palette-line)!important;color:var(--palette-text)!important;box-shadow:none!important}
.sideUserMeta b{font-size:var(--type-size-12px) !important;font-weight:var(--type-weight-800) !important;color:var(--palette-text-strong)!important}
.sideUserMeta small{font-size:var(--type-size-10px) !important;font-weight:var(--type-weight-600) !important;color:var(--palette-muted)!important}
.sidefoot{color:var(--palette-muted-2)!important;font-weight:var(--type-weight-600) !important}

/* --- Clear surfaces in light; richer Vesper material in dark ---------- */
.card,.finsetKpi,.finsetPanel,.question,.allocItem,.feedItem,.rebRow,.scenario,.scoreCard,.mcard,.price,.recCard,.fundCard,.positionCard,.ownerSection,.fundWizard,.fundScenarioCard,.smartMetric,.messageCard,.messageComposer,.metalResult,.ratioCard,.assumptionCard,.factorCard,.analysisEvidenceCard,.evidenceEdit,.smartAlert,.assetRelation>div,.marketTableCard,.marketQuickCard,.mobileRefCard,.mobileQuickCards>button{
  background:var(--palette-card)!important;border-color:var(--palette-line)!important;color:var(--palette-text)!important;border-radius:var(--layout-card-radius)!important
}
body:not([data-theme="dark"]) .card,body:not([data-theme="dark"]) .finsetKpi,body:not([data-theme="dark"]) .finsetPanel{
  box-shadow:0 6px 18px color-mix(in srgb,var(--palette-shadow) 22%,var(--color-transparent))!important
}
body[data-theme="dark"] .card,body[data-theme="dark"] .finsetKpi,body[data-theme="dark"] .finsetPanel,
body[data-theme="dark"] .mobileSnapshot,body[data-theme="dark"] .mobileRefCard,body[data-theme="dark"] .mobileQuickCards>button{
  background:linear-gradient(155deg,color-mix(in srgb,var(--palette-card) 93%,var(--palette-elevated) 7%),var(--palette-card))!important;
  border-color:var(--palette-line)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--palette-on-accent) 16%,var(--color-transparent)),0 15px 34px var(--palette-shadow)!important
}
body[data-theme="dark"] .main{background:var(--palette-main)!important}
body[data-theme="dark"] .side{background:var(--palette-sidebar)!important;border-left-color:var(--palette-line-soft)!important}
body[data-theme="dark"] .moneyModeSwitch{background:var(--palette-card-soft)!important}
body[data-theme="dark"] .moneyModeSwitch button.active{background:var(--palette-elevated)!important;color:var(--palette-accent-2)!important}

/* Preserve the glow shape but use the theme palette. Remove the two decorative lines. */
body[data-theme="dark"] .app{position:relative!important;isolation:isolate!important;box-shadow:0 32px 94px var(--palette-shadow)!important}
body[data-theme="dark"] .app::before{
  content:""!important;display:block!important;position:absolute!important;z-index:-1!important;pointer-events:none!important;
  left:-190px!important;bottom:-175px!important;top:auto!important;width:560px!important;height:500px!important;border-radius:50%!important;
  background:radial-gradient(ellipse at 55% 45%,color-mix(in srgb,var(--palette-accent) 50%,var(--color-transparent)) 0%,color-mix(in srgb,var(--palette-accent) 28%,var(--color-transparent)) 28%,color-mix(in srgb,var(--palette-accent-2) 12%,var(--color-transparent)) 52%,var(--color-transparent) 78%)!important;
  filter:blur(30px)!important;opacity:1!important
}
body[data-theme="dark"] .app::after{display:none!important;content:none!important}

/* Generic legacy green chrome -> accent; green remains semantic only. */
.sectionTitle::before,.progress i,.simpleGoalBar i,.mobileGoalTrack i{background:linear-gradient(90deg,var(--palette-accent),var(--palette-accent-2))!important}
.choice.sel,.themeBtns button.active,.experienceMode button.active,.complexityRibbon button.active{background:var(--palette-accent-soft)!important;color:var(--palette-accent)!important;border-color:color-mix(in srgb,var(--palette-accent) 38%,var(--palette-line))!important}
.btn.primary,.tabs button.active{background:var(--palette-accent)!important;color:var(--palette-on-accent)!important;border-color:var(--palette-accent)!important}
.up,.finsetDelta.positive,.pill.green{color:var(--palette-positive)!important}

/* --- Sidebar discipline / no overlap --------------------------------- */
.side{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.nav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;padding-bottom:24px!important}
.sideBottom{flex:0 0 auto!important;margin-top:auto!important;position:relative!important;z-index:20!important;background:var(--palette-sidebar)!important;border-top:1px solid var(--palette-line-soft)!important;padding-top:9px!important}
.appearancePanel{flex:0 0 auto!important}

/* --- Desktop proportions --------------------------------------------- */
@media(min-width:1281px){
  body{padding:20px!important}
  .app{width:min(1660px,calc(100vw - 40px))!important;min-height:calc(100vh - 40px)!important;border-radius:var(--layout-shell-radius)!important;grid-template-columns:286px minmax(0,1fr)!important;overflow:hidden!important}
  body.sidebar-collapsed .app{grid-template-columns:86px minmax(0,1fr)!important}
  .side{height:calc(100vh - 40px)!important;max-height:calc(100vh - 40px)!important;top:20px!important;padding:20px 15px 14px!important}
  .main{padding:28px 28px 34px!important;max-width:none!important}
  .brand{min-height:72px!important}.brand img{width:54px!important;height:54px!important;flex-basis:54px!important}.brand h1{font-size:var(--type-size-15px) !important}.brand small{font-size:var(--type-size-10px) !important}
  .nav button{min-height:48px!important;padding:8px 12px!important;gap:11px!important}
  .nav .ni{width:32px!important;height:32px!important;flex:0 0 32px!important}
  .moneyModeSwitch button{font-size:var(--type-size-11_5px) !important;min-height:38px!important}
  .finsetKpi{min-height:176px!important}.finsetKpi strong{font-size:var(--type-size-29px) !important}
  .finsetPanelHead h3{font-size:var(--type-size-17px) !important}.finsetTableRow{font-size:var(--type-size-11px) !important}
}

/* --- Responsive header + drawer: never spill/blur -------------------- */
@media(max-width:1280px){
  body{padding:0!important}
  .app,body.sidebar-collapsed .app{display:block!important;width:100%!important;min-height:100dvh!important;border-radius:0!important;border:0!important;box-shadow:none!important}
  .main{padding:86px 16px 104px!important;min-height:100dvh!important}
  .mobileTopbar{display:grid!important;grid-template-columns:46px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;position:fixed!important;inset-inline:0!important;top:0!important;height:72px!important;padding:9px 12px!important;z-index:1600!important;background:var(--palette-shell)!important;border-bottom:1px solid var(--palette-line-soft)!important;box-shadow:0 8px 24px color-mix(in srgb,var(--palette-shadow) 28%,var(--color-transparent))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .mobileTopbar>button,.mobileHeaderActions button{min-width:42px!important;width:42px!important;min-height:42px!important;height:42px!important;border-radius:14px!important;background:var(--palette-card)!important;color:var(--palette-text)!important;border:1px solid var(--palette-line)!important;box-shadow:none!important}
  .mobileBrand{width:auto!important;min-width:0!important;height:auto!important;border:0!important;background:var(--color-transparent)!important;display:flex!important;justify-content:flex-start!important;gap:9px!important;overflow:hidden!important}
  .mobileBrand img{width:38px!important;height:38px!important;flex:0 0 38px!important}
  .mobileBrand span{display:grid!important;min-width:0!important}.mobileBrand b{font-size:var(--type-size-12px) !important;font-weight:var(--type-weight-850) !important}.mobileBrand small{font-size:var(--type-size-9px) !important;color:var(--palette-muted)!important}
  .mobileHeaderActions{display:flex!important;gap:6px!important;min-width:0!important;justify-self:end!important}
  .mobileIcon{width:20px!important;height:20px!important}
  .mobileMenuOverlay{display:block!important;position:fixed!important;inset:0!important;z-index:1700!important;background:var(--palette-overlay)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:opacity var(--motion-card) ease,visibility var(--motion-card) ease!important}
  body.mobile-menu-open .mobileMenuOverlay{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  .side,body.sidebar-collapsed .side{position:fixed!important;right:0!important;left:auto!important;top:0!important;bottom:0!important;width:min(360px,90vw)!important;height:100dvh!important;max-height:100dvh!important;padding:16px 15px calc(18px + env(safe-area-inset-bottom))!important;z-index:1800!important;transform:translateX(102%)!important;visibility:hidden!important;transition:transform 180ms cubic-bezier(.22,.78,.24,1),visibility 180ms!important;box-shadow:-22px 0 54px var(--palette-shadow)!important;border-radius:0!important}
  body.mobile-menu-open .side{transform:translateX(0)!important;visibility:visible!important}
  .mobileMenuClose{display:grid!important}
  .createBlank{min-height:calc(100dvh - 190px)!important}
  body[data-theme="dark"] .app::before{display:none!important}
}

/* --- Mobile bottom navigation: larger and clearer -------------------- */
@media(max-width:1280px){
  .mobileBottomNav{display:grid!important;grid-template-columns:repeat(5,1fr)!important;position:fixed!important;left:10px!important;right:10px!important;bottom:8px!important;min-height:78px!important;height:auto!important;padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;background:var(--palette-card)!important;border:1px solid var(--palette-line)!important;border-radius:24px!important;box-shadow:0 16px 40px color-mix(in srgb,var(--palette-shadow) 48%,var(--color-transparent))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:1500!important}
  .mobileBottomNav button{min-height:60px!important;border:0!important;background:var(--color-transparent)!important;color:var(--palette-muted)!important;border-radius:18px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;font-size:var(--type-size-10px) !important;font-weight:var(--type-weight-780) !important;padding:4px 2px!important}
  .mobileBottomNav .mobileIcon{width:24px!important;height:24px!important}
  .mobileBottomNav button.active{background:var(--palette-accent)!important;color:var(--palette-on-accent)!important;font-weight:var(--type-weight-900) !important}
  .mobileBottomNav button:not(.active){opacity:1!important}
  .mobileBottomNav .mobileCount{top:3px!important;right:calc(50% - 23px)!important}
}
@media(max-width:560px){
  .main{padding:82px 12px 102px!important}
  .mobileTopbar{height:68px!important;padding-inline:9px!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:6px!important}
  .mobileTopbar>button,.mobileHeaderActions button{min-width:38px!important;width:38px!important;min-height:38px!important;height:38px!important;border-radius:12px!important}
  .mobileHeaderActions{gap:4px!important}.mobileBrand img{width:34px!important;height:34px!important;flex-basis:34px!important}.mobileBrand b{font-size:var(--type-size-11px) !important}.mobileBrand small{font-size:var(--type-size-8px) !important}
  .mobileBottomNav{left:7px!important;right:7px!important;bottom:6px!important;min-height:74px!important;border-radius:22px!important}
  .mobileBottomNav button{min-height:56px!important;font-size:var(--type-size-9_5px) !important}.mobileBottomNav .mobileIcon{width:23px!important;height:23px!important}
  .mobileSnapshot>strong{font-size:var(--type-size-31px) !important}.mobileQuickCards b{font-size:var(--type-size-11px) !important}.mobileQuickCards small{font-size:var(--type-size-8_5px) !important}.mobileRecentRow>span:nth-child(2) b{font-size:var(--type-size-10_5px) !important}.mobileRecentRow>span:nth-child(2) small{font-size:var(--type-size-8_5px) !important}
}

/* --- Login/Register: same palette, cleaner desktop and rebuilt mobile - */
body.authPage .shell{background:var(--palette-shell)!important;color:var(--palette-text)!important;border-color:var(--palette-line-soft)!important}
body.authPage .intro,body.authPage .benefitsPanel{background:var(--palette-sidebar)!important;color:var(--palette-text)!important}
body.authPage .auth{background:var(--palette-main)!important;color:var(--palette-text)!important}
body.authPage .shell{display:grid!important;grid-template-columns:.92fr 1.08fr!important;grid-template-rows:auto 1fr!important;overflow:hidden!important}
body.authPage .intro{grid-column:1!important;grid-row:1!important;padding:52px 48px 20px!important;border-left:1px solid var(--palette-line-soft)!important;position:relative!important;overflow:hidden!important}
body.authPage .benefitsPanel{grid-column:1!important;grid-row:2!important;padding:10px 48px 52px!important;border-left:1px solid var(--palette-line-soft)!important;position:relative!important;overflow:hidden!important}
body.authPage .auth{grid-column:2!important;grid-row:1/3!important;padding:58px 52px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
body.authPage .brand img{width:92px!important;height:92px!important;flex:0 0 92px!important;box-shadow:0 10px 28px color-mix(in srgb,var(--palette-shadow) 32%,var(--color-transparent))!important}
body.authPage .brand b{font-size:var(--type-size-17px) !important;font-weight:var(--type-weight-900) !important;color:var(--palette-text-strong)!important}
body.authPage .doctor{font-size:var(--type-size-11_5px) !important;font-weight:var(--type-weight-700) !important;color:var(--palette-muted)!important}
body.authPage .intro h1{font-size:var(--type-size-34px) !important;font-weight:var(--type-weight-900) !important;line-height:var(--type-line-1_55) !important;color:var(--palette-text-strong)!important;margin:48px 0 0!important}
body.authPage .benefits{display:grid!important;gap:14px!important;margin:0!important}
body.authPage .benefit{min-height:64px!important;border-radius:20px!important;padding:16px 18px!important;font-size:var(--type-size-14_5px) !important;line-height:var(--type-line-1_7) !important;font-weight:var(--type-weight-900) !important;background:linear-gradient(135deg,var(--palette-accent-2),var(--palette-accent))!important;color:var(--palette-on-accent)!important;border:1px solid color-mix(in srgb,var(--palette-accent) 76%,var(--palette-line))!important;box-shadow:0 13px 28px color-mix(in srgb,var(--palette-accent) 18%,var(--color-transparent))!important}
body.authPage .tabs{background:var(--palette-accent-soft)!important;border-radius:16px!important;padding:4px!important}
body.authPage .tabs button{color:var(--palette-muted)!important;font-weight:var(--type-weight-850) !important}
body.authPage .tabs button.active{background:var(--palette-card)!important;color:var(--palette-accent)!important;box-shadow:0 3px 10px color-mix(in srgb,var(--palette-shadow) 42%,var(--color-transparent))!important}
body.authPage .field input{background:var(--palette-card)!important;color:var(--palette-text)!important;border-color:var(--palette-line)!important;font-size:var(--type-size-14px) !important;font-weight:var(--type-weight-650) !important}
body.authPage .passwordToggle{color:var(--palette-muted)!important;background:var(--color-transparent)!important}
body.authPage .passwordToggle:hover{background:var(--palette-accent-soft)!important;color:var(--palette-accent)!important}
body.authPage .themeToggle{background:var(--palette-card)!important;color:var(--palette-text)!important;border-color:var(--palette-line)!important;backdrop-filter:none!important}
body.authPage.theme-dark .intro,body.authPage.theme-dark .benefitsPanel{background:var(--palette-sidebar)!important;background-image:none!important}
body.authPage.theme-dark .intro::before{display:none!important;content:none!important}
body.authPage.theme-dark .intro::after,body.authPage.theme-dark .benefitsPanel::after{
  content:""!important;display:block!important;position:absolute!important;pointer-events:none!important;border-radius:50%!important;
  left:-190px!important;bottom:-210px!important;width:560px!important;height:520px!important;
  background:radial-gradient(circle at 55% 45%,color-mix(in srgb,var(--palette-accent) 50%,var(--color-transparent)) 0%,color-mix(in srgb,var(--palette-accent) 28%,var(--color-transparent)) 30%,color-mix(in srgb,var(--palette-accent-2) 12%,var(--color-transparent)) 54%,var(--color-transparent) 80%)!important;
  filter:blur(34px)!important;opacity:1!important
}
body.authPage.theme-dark .intro::after{bottom:-390px!important}
body.authPage.theme-dark .benefitsPanel::after{bottom:-210px!important}
body.authPage.theme-dark .brand b,body.authPage.theme-dark .intro h1{color:var(--palette-text-strong)!important}
body.authPage.theme-dark .benefit{background:linear-gradient(135deg,var(--palette-accent),color-mix(in srgb,var(--palette-accent) 78%,var(--palette-accent-2)))!important;border-color:var(--palette-accent-2)!important}

@media(max-width:760px){
  body.authPage{display:block!important;padding:12px!important;background:var(--palette-canvas)!important;min-height:100dvh!important}
  body.authPage .shell{width:100%!important;min-height:calc(100dvh - 24px)!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;border-radius:28px!important;border:1px solid var(--palette-line-soft)!important;box-shadow:0 18px 48px color-mix(in srgb,var(--palette-shadow) 38%,var(--color-transparent))!important}
  body.authPage .intro{grid-column:1!important;grid-row:1!important;border:0!important;border-bottom:0!important;padding:58px 20px 14px!important;text-align:center!important;display:grid!important;justify-items:center!important}
  body.authPage .brand{display:grid!important;justify-items:center!important;gap:12px!important;text-align:center!important}
  body.authPage .brand img{width:86px!important;height:86px!important;flex-basis:86px!important}
  body.authPage .brand b{font-size:var(--type-size-15px) !important}body.authPage .doctor{font-size:var(--type-size-10_5px) !important}
  body.authPage .intro h1{font-size:var(--type-size-25px) !important;line-height:var(--type-line-1_6) !important;margin:22px 0 0!important;max-width:320px!important}
  body.authPage .auth{grid-column:1!important;grid-row:2!important;padding:16px 18px 22px!important;justify-content:flex-start!important;background:var(--palette-main)!important}
  body.authPage .tabs{margin:0 0 22px!important}body.authPage .tabs button{min-height:48px!important;font-size:var(--type-size-13px) !important}
  body.authPage .form{gap:16px!important}body.authPage .field label{font-size:var(--type-size-12px) !important}body.authPage .field input{min-height:52px!important;font-size:var(--type-size-16px) !important;border-radius:15px!important}body.authPage .passwordField input{padding-left:58px!important}body.authPage .passwordToggle{width:42px!important;height:42px!important;left:5px!important}
  body.authPage .btn{min-height:52px!important;font-size:var(--type-size-14px) !important;border-radius:15px!important}
  body.authPage .benefitsPanel{grid-column:1!important;grid-row:3!important;padding:8px 18px 26px!important;border:0!important;background:var(--palette-main)!important}
  body.authPage .benefits{display:grid!important;gap:10px!important}body.authPage .benefit{min-height:58px!important;font-size:var(--type-size-13px) !important;border-radius:17px!important;padding:14px 16px!important}
  body.authPage .themeToggle{left:18px!important;top:18px!important;width:42px!important;height:42px!important;z-index:50!important}
  body.authPage.theme-dark .intro::after{left:-160px!important;bottom:-300px!important;width:480px!important;height:440px!important;filter:blur(34px)!important}
  body.authPage.theme-dark .benefitsPanel::after{display:none!important}
}
@media(max-width:390px){
  body.authPage{padding:7px!important}body.authPage .shell{min-height:calc(100dvh - 14px)!important;border-radius:23px!important}body.authPage .intro{padding-top:48px!important}body.authPage .brand img{width:78px!important;height:78px!important}body.authPage .intro h1{font-size:var(--type-size-22px) !important}body.authPage .auth{padding-inline:14px!important}body.authPage .benefitsPanel{padding-inline:14px!important}body.authPage .benefit{font-size:var(--type-size-12_5px) !important}
}

/* --- Motion: short and perceptible, never theatrical ----------------- */
.app,.side,.main,.card,.finsetKpi,.finsetPanel,.nav button,.btn,.moneyModeSwitch button,.mobileTopbar,.mobileBottomNav{transition-duration:var(--motion-card)!important;transition-timing-function:cubic-bezier(.22,.78,.24,1)!important}
.main.uiPageEntering>.pagehead,.main.uiPageEntering>.finsetHome,.main.uiPageEntering>.grid,.main.uiPageEntering>.card,.main.uiPageEntering>.subscriptionHero{animation-duration:var(--motion-page)!important}
@media(hover:hover) and (pointer:fine){.card:hover,.finsetKpi:hover,.finsetPanel:hover{transform:translateY(-1.5px)!important}}
@media(hover:none){.card:hover,.finsetKpi:hover,.finsetPanel:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ======================================================================
   v0.27.7 FINAL QC OVERRIDES
   These rules are intentionally last. Do not place page-specific colors
   below this block; extend the semantic tokens above instead.
   ====================================================================== */

/* Typography: user's default was too small. */
.main{font-size:var(--font-size-body)!important}
.nav button{font-size:var(--font-size-nav)!important;font-weight:var(--type-weight-820) !important}
.navGroup{font-size:var(--type-size-10_5px) !important;font-weight:var(--type-weight-850) !important;letter-spacing:var(--type-track-01em) !important}
.sub,.small{font-size:var(--type-size-12_5px) !important}.tiny{font-size:var(--type-size-10_5px) !important}
.card h3,.finsetPanelHead h3{font-weight:var(--type-weight-900) !important}

/* Remove the decorative frame/lines the user explicitly rejected. */
.brand::after,.brand:after{display:none!important;content:none!important;background:none!important;box-shadow:none!important}
body[data-theme="dark"] .app::after,body[data-theme="dark"] .app:after{display:none!important;content:none!important;border:0!important;box-shadow:none!important}
.side::before,.side::after,.side:before,.side:after{display:none!important;content:none!important}

/* Same canvas/shell in Growth and Create Money: switching mode never recolors the app. */
body[data-money-mode="growth"],body[data-money-mode="create"]{background-color:var(--palette-canvas)!important;background-image:none!important}
body[data-money-mode="growth"] .app,body[data-money-mode="create"] .app{background-color:var(--palette-shell)!important;background-image:none!important}
body[data-money-mode="growth"] .main,body[data-money-mode="create"] .main{background-color:var(--palette-main)!important;color:var(--palette-text)!important}
body[data-money-mode="growth"] .side,body[data-money-mode="create"] .side{background-color:var(--palette-sidebar)!important;background-image:none!important}

/* Create Money is intentionally empty until product scope is supplied. */
body[data-money-mode="create"] #nav,
body[data-money-mode="create"] .globalAssetSearchShell,
body[data-money-mode="create"] .appearancePanel{display:none!important}
body[data-money-mode="create"] .createBlank{display:block!important;min-height:calc(100vh - 120px)!important;background:var(--color-transparent)!important;border:0!important;box-shadow:none!important;outline:0!important}

/* The bright half-edge remains, but uses the theme violet instead of green. */
.nav button.active::before,.nav button.active:before{
  content:""!important;display:block!important;position:absolute!important;right:0!important;top:23%!important;bottom:23%!important;width:3px!important;border-radius:5px!important;
  background:var(--palette-accent-2)!important;
  box-shadow:0 0 15px color-mix(in srgb,var(--palette-accent) 58%,var(--color-transparent))!important
}
.nav button.active{background:linear-gradient(135deg,var(--palette-accent),color-mix(in srgb,var(--palette-accent) 83%,var(--palette-accent-2)))!important;color:var(--palette-on-accent)!important;border-color:color-mix(in srgb,var(--palette-accent-2) 58%,var(--color-transparent))!important;box-shadow:0 8px 22px color-mix(in srgb,var(--palette-accent) 17%,var(--color-transparent))!important}

/* Light: FinSet-like flat sidebar and crisp card separation. */
body:not([data-theme="dark"]) .side{background:var(--palette-sidebar)!important;background-image:none!important;box-shadow:none!important}
body:not([data-theme="dark"]) .main{background:var(--palette-main)!important}
body:not([data-theme="dark"]) .card,body:not([data-theme="dark"]) .finsetKpi,body:not([data-theme="dark"]) .finsetPanel{
  background:var(--palette-card)!important;border:1px solid var(--palette-line)!important;
  box-shadow:0 7px 20px color-mix(in srgb,var(--palette-shadow) 22%,var(--color-transparent))!important
}

/* Dark: more Vesper-like depth, same geometry. */
body[data-theme="dark"] .main{
  background:
    radial-gradient(ellipse 680px 560px at -9% 108%,color-mix(in srgb,var(--palette-accent) 28%,var(--color-transparent)) 0%,color-mix(in srgb,var(--palette-accent) 14%,var(--color-transparent)) 34%,color-mix(in srgb,var(--palette-accent-2) 7%,var(--color-transparent)) 53%,var(--color-transparent) 82%),
    var(--palette-main)!important
}
body[data-theme="dark"] .card,body[data-theme="dark"] .finsetKpi,body[data-theme="dark"] .finsetPanel,body[data-theme="dark"] .mobileRefCard,body[data-theme="dark"] .mobileQuickCards>button{
  background:linear-gradient(155deg,color-mix(in srgb,var(--palette-elevated) 34%,var(--palette-card)),var(--palette-card) 72%)!important;
  border:1px solid var(--palette-line)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--palette-on-accent) 12%,var(--color-transparent)),0 17px 38px var(--palette-shadow)!important
}
/* Same brightness, much softer falloff: blur, not dimming. */
body[data-theme="dark"] .app::before,body[data-theme="dark"] .app:before{
  left:-245px!important;bottom:-235px!important;top:auto!important;width:720px!important;height:650px!important;
  background:radial-gradient(ellipse at 58% 46%,color-mix(in srgb,var(--palette-accent) 52%,var(--color-transparent)) 0%,color-mix(in srgb,var(--palette-accent) 31%,var(--color-transparent)) 31%,color-mix(in srgb,var(--palette-accent-2) 15%,var(--color-transparent)) 55%,color-mix(in srgb,var(--palette-accent-2) 5%,var(--color-transparent)) 70%,var(--color-transparent) 90%)!important;
  filter:blur(68px)!important;opacity:1!important
}

/* Tokenize common legacy surfaces so palette swaps are truly global. */
.field input,.field select,.field textarea,.tableWrap,.question,.allocItem,.scenario,.feedItem,.newsItem,.price,.rebRow,.bias,.degree,.chip,.sig,.scBox,.postRow,.richEditor,.editorToolbar,.authorChart,.chartBuilder{
  background-color:var(--palette-card)!important;color:var(--palette-text)!important;border-color:var(--palette-line)!important
}
.field input:focus,.field select:focus,.field textarea:focus,.richEditor:focus{border-color:var(--palette-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--palette-accent) 14%,var(--color-transparent))!important}
th,.editorToolbar{background:var(--palette-card-soft)!important;color:var(--palette-text)!important}.scBox,.sig,.chip{background:var(--palette-card-soft)!important}
.choice:hover{border-color:var(--palette-accent)!important}.choice.sel,.qnum,.mbubble{background:var(--palette-accent-soft)!important;color:var(--palette-accent)!important;border-color:color-mix(in srgb,var(--palette-accent) 35%,var(--palette-line))!important}
.price::before,.price:before{background:radial-gradient(circle,color-mix(in srgb,var(--palette-accent) 12%,var(--color-transparent)),var(--color-transparent) 70%)!important}
.progress,.comparebar,.itrack,.allocationStrip{background:var(--palette-card-soft)!important}
.progress i,.simpleGoalBar i,.mobileGoalTrack i,.authorChartRow i,.dots i.on{background:linear-gradient(90deg,var(--palette-accent),var(--palette-accent-2))!important}

/* Sidebar: fixed footer, only nav scrolls; protects scenarios from appearance controls. */
.side{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
.brand,.moneyModeSwitch,.globalAssetSearchShell,.sideBottom{flex:0 0 auto!important}
.nav{flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:30px!important;scroll-padding-bottom:30px!important}
.sideBottom{margin-top:0!important;flex:0 0 auto!important;background:var(--palette-sidebar)!important;position:relative!important;z-index:25!important}

/* Login: larger logo, benefits physically lower, one stable custom eye. */
body.authPage .benefitsPanel{display:flex!important;align-items:flex-end!important;padding-top:30px!important}
body.authPage .benefits{width:100%!important;margin-top:0!important}
body.authPage .brand img{width:100px!important;height:100px!important;flex-basis:100px!important}
body.authPage input[type="password"]::-ms-reveal,body.authPage input[type="password"]::-ms-clear{display:none!important;width:0!important;height:0!important}
body.authPage input[type="password"]::-webkit-credentials-auto-fill-button{visibility:hidden!important;display:none!important;pointer-events:none!important}
body.authPage .passwordToggle{display:grid!important;opacity:1!important;visibility:visible!important;z-index:5!important}

@media(max-width:1280px){
  /* Drawer overlay may shade, never blur. */
  .mobileMenuOverlay{background:var(--palette-overlay)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body[data-theme="dark"] .app::before,body[data-theme="dark"] .app:before{display:none!important}
  /* Create remains visually empty; drawer state is controlled by JS and retained on mode switch. */
  body[data-money-mode="create"] .createBlank{min-height:calc(100dvh - 175px)!important}
  /* Large, readable bottom navigation. */
  .mobileBottomNav{min-height:82px!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;border-radius:25px!important}
  .mobileBottomNav button{min-height:62px!important;font-size:var(--type-size-10_5px) !important;font-weight:var(--type-weight-800) !important;color:var(--palette-muted)!important;gap:5px!important}
  .mobileBottomNav .mobileIcon{width:25px!important;height:25px!important}
  .mobileBottomNav button.active{font-weight:var(--type-weight-900) !important;background:var(--palette-accent)!important;color:var(--palette-on-accent)!important}
  /* Mobile login is a purposeful stacked composition. */
  body.authPage .shell{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;min-height:calc(100dvh - 24px)!important}
  body.authPage .intro{grid-column:1!important;grid-row:1!important;padding:64px 20px 12px!important}
  body.authPage .brand img{width:94px!important;height:94px!important;flex-basis:94px!important}
  body.authPage .intro h1{font-size:var(--type-size-25px) !important;margin-top:20px!important;max-width:340px!important}
  body.authPage .auth{grid-column:1!important;grid-row:2!important;padding:18px 18px 24px!important}
  body.authPage .benefitsPanel{grid-column:1!important;grid-row:3!important;display:flex!important;align-items:flex-end!important;padding:24px 18px 30px!important;background:var(--palette-main)!important}
  body.authPage .benefits{display:grid!important;gap:11px!important;width:100%!important}
  body.authPage .benefit{min-height:62px!important;font-size:var(--type-size-13_5px) !important;font-weight:var(--type-weight-900) !important;color:var(--palette-on-accent)!important}
}
@media(max-width:390px){
  body.authPage .brand img{width:86px!important;height:86px!important;flex-basis:86px!important}
  body.authPage .intro h1{font-size:var(--type-size-22_5px) !important}
  body.authPage .benefit{font-size:var(--type-size-13px) !important}
  .mobileBottomNav{min-height:78px!important}
}
/* Login benefit cards stay vivid in both themes; no unsupported derived color needed. */
body.authPage .benefit,body.authPage.theme-dark .benefit{
  background:linear-gradient(135deg,var(--palette-accent-2),var(--palette-accent))!important;
  border:1px solid var(--palette-accent-2)!important;color:var(--palette-on-accent)!important;
  box-shadow:0 12px 28px var(--palette-shadow)!important
}
body.authPage .passwordToggle svg{display:block!important;width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}


/* ======================================================================
   v0.27.7 USER-LOCKED QC OVERRIDES
   These are explicit last-mile constraints from the approved checklist.
   ====================================================================== */
/* No decorative frame lines around the login intro or application shell. */
body.authPage .intro::before,body.authPage .intro:before,
body.authPage .benefitsPanel::before,body.authPage .benefitsPanel:before,
body[data-theme="dark"] .app::after,body[data-theme="dark"] .app:after{
  display:none!important;content:none!important;border:0!important;box-shadow:none!important;background:none!important
}
/* Growth/Create always share the exact same shell surfaces. */
body[data-money-mode="growth"],body[data-money-mode="create"]{background:var(--palette-canvas)!important;background-image:none!important}
body[data-money-mode="growth"] .app,body[data-money-mode="create"] .app{background:var(--palette-shell)!important;background-image:none!important}
body[data-money-mode="growth"] .side,body[data-money-mode="create"] .side{background:var(--palette-sidebar)!important;background-image:none!important}
body[data-money-mode="growth"] .main,body[data-money-mode="create"] .main{background-color:var(--palette-main)!important}
/* Create Money intentionally has zero product/UI content for now. */
body[data-money-mode="create"] #nav,
body[data-money-mode="create"] .globalAssetSearchShell,
body[data-money-mode="create"] .appearancePanel{display:none!important}
body[data-money-mode="create"] .createBlank{display:block!important;background:var(--color-transparent)!important;border:0!important;box-shadow:none!important;color:var(--color-transparent)!important}
/* Preserve the glossy active edge shape, but never green. */
.nav button.active::before,.nav button.active:before{background:var(--palette-accent-2)!important;box-shadow:0 0 15px color-mix(in srgb,var(--palette-accent) 58%,var(--color-transparent))!important}
/* Mobile drawer shades only; never blurs. */
@media(max-width:1280px){
  .mobileMenuOverlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--palette-overlay)!important}
  .mobileBottomNav{min-height:82px!important}
  .mobileBottomNav button{font-size:var(--type-size-10_5px) !important;font-weight:var(--type-weight-800) !important;color:var(--palette-muted)!important}
  .mobileBottomNav .mobileIcon{width:25px!important;height:25px!important}
  .mobileBottomNav button.active{background:var(--palette-accent)!important;color:var(--palette-on-accent)!important;font-weight:var(--type-weight-900) !important}
}
/* Login: stable single custom eye and requested visual hierarchy. */
body.authPage .passwordToggle{display:grid!important;opacity:1!important;visibility:visible!important}
body.authPage .benefit{background:linear-gradient(135deg,var(--palette-accent-2),var(--palette-accent))!important;color:var(--palette-on-accent)!important;font-weight:var(--type-weight-900) !important}

/* ======================================================================
   v0.27.7 RELEASE POLISH — all values are token-driven.
   ====================================================================== */
/* Slightly stronger default Persian typography without making the UI heavy. */
.main{font-size:var(--font-size-body)!important}
.nav button{font-size:var(--font-size-nav)!important;font-weight:var(--type-weight-830) !important}
.sub,.small{font-size:var(--type-size-13px) !important;font-weight:var(--type-weight-600) !important}
.tiny{font-size:var(--type-size-11px) !important;font-weight:var(--type-weight-600) !important}

/* Create Money: brand + mode switch only. No unfinished nav, search, controls or footer cards. */
body[data-money-mode="create"] #nav,
body[data-money-mode="create"] .globalAssetSearchShell,
body[data-money-mode="create"] .appearancePanel,
body[data-money-mode="create"] .sideBottom{display:none!important}
body[data-money-mode="create"] .createBlank{background:var(--color-transparent)!important;border:0!important;box-shadow:none!important}

/* Vesper-like dark depth: same geometry as light, stronger surface separation and restrained violet sheen. */
body[data-theme="dark"] .card,
body[data-theme="dark"] .finsetKpi,
body[data-theme="dark"] .finsetPanel,
body[data-theme="dark"] .mobileRefCard,
body[data-theme="dark"] .mobileQuickCards>button{
  background:
    radial-gradient(420px 150px at 100% -28%,var(--palette-card-highlight),var(--color-transparent) 64%),
    linear-gradient(155deg,color-mix(in srgb,var(--palette-elevated) 36%,var(--palette-card)),var(--palette-card) 74%)!important;
  border-color:var(--palette-line)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--palette-on-accent) 14%,var(--color-transparent)),0 18px 40px var(--palette-shadow)!important
}

/* Drawer is only a click-catcher/separator. It must not make the page look blurred or dark. */
@media(max-width:1280px){
  .mobileMenuOverlay{
    background:var(--palette-overlay)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important
  }
  .mobileBottomNav{min-height:86px!important;padding:8px 8px calc(9px + env(safe-area-inset-bottom))!important}
  .mobileBottomNav button{min-height:64px!important;font-size:var(--type-size-12px) !important;font-weight:var(--type-weight-800) !important;color:color-mix(in srgb,var(--palette-text) 72%,var(--palette-muted))!important;gap:5px!important}
  .mobileBottomNav .mobileIcon{width:27px!important;height:27px!important}
  .mobileBottomNav button.active{font-weight:var(--type-weight-900) !important;background:var(--palette-accent)!important;color:var(--palette-on-accent)!important}
}
@media(max-width:390px){
  .mobileBottomNav{min-height:84px!important}
  .mobileBottomNav button{font-size:var(--type-size-11_5px) !important}
  .mobileBottomNav .mobileIcon{width:26px!important;height:26px!important}
}

/* ======================================================================
   v0.27.7 PALETTE COVERAGE ADAPTERS
   Legacy modules may still contain historical literals in their original
   rules. These final semantic adapters make all BRAND/CHROME colors follow
   the centralized palette. Semantic gain/loss colors intentionally remain
   positive/negative tokens; asset-category colors may remain categorical.
   ====================================================================== */
.marketFilter.active{
  background:var(--palette-accent)!important;
  color:var(--palette-on-accent)!important;
  border-color:var(--palette-accent)!important
}
.marketFilter:hover{border-color:var(--palette-accent)!important;color:var(--palette-accent)!important}
.marketAssetIcon,
.personalNewsChips span{
  background:var(--palette-accent-soft)!important;
  color:var(--palette-accent)!important;
  border-color:color-mix(in srgb,var(--palette-accent) 22%,var(--palette-line))!important
}
.personalNewsAside em{color:var(--palette-accent)!important}
.lessonIcon,.credentialCard>span{
  background:linear-gradient(135deg,var(--palette-accent),var(--palette-accent-2))!important;
  color:var(--palette-on-accent)!important;
  box-shadow:0 10px 25px color-mix(in srgb,var(--palette-accent) 18%,var(--color-transparent))!important
}
.fundSection h4::before,.fundSection h4:before{
  background:linear-gradient(180deg,var(--palette-accent),var(--palette-accent-2))!important
}
.recCard::before,.recCard:before,.fundCard::before,.fundCard:before{
  background:var(--rc,var(--palette-accent))!important
}
.authorChartRow i,.marketPulseBar i,.wealthBarTrack i,.goalProgress i,
.simpleGoalBar i,.capitalBalanceBar i,.homePortfolioWeight i,.fundMiniGauge{
  --legacy-brand-accent:var(--palette-accent)
}
.authorChartRow i,.marketPulseBar i,.wealthBarTrack i,.goalProgress i,.homePortfolioWeight i{
  background:linear-gradient(90deg,var(--palette-accent),var(--palette-accent-2))!important
}
.simpleGoalBar i,.capitalBalanceBar i{background:var(--palette-accent)!important}
body:not([data-theme="dark"]) .gauge,
body:not([data-theme="dark"]) .fundMiniGauge{
  background:conic-gradient(var(--palette-accent) calc(var(--p)*1%),var(--palette-card-soft) 0)!important
}
body[data-theme="dark"] .gauge,
body[data-theme="dark"] .fundMiniGauge{
  background:conic-gradient(var(--palette-accent-2) calc(var(--p)*1%),var(--palette-card-soft) 0)!important
}
.sheetLogic{
  border-right-color:var(--palette-accent)!important;
  background:var(--palette-accent-faint)!important;
  color:var(--palette-text)!important
}
.signalEditor,.createMoneyCard{
  background:linear-gradient(145deg,var(--palette-card),color-mix(in srgb,var(--palette-card) 93%,var(--palette-accent) 7%))!important;
  border-color:var(--palette-line)!important
}
.unreadDot{
  background:var(--palette-accent)!important;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--palette-accent) 11%,var(--color-transparent))!important
}
.messageCard.success::before,.messageCard.success:before{background:var(--palette-positive)!important}
.marketStatus{background:var(--palette-card-soft)!important;color:var(--palette-muted)!important}
.marketStatus.up{background:var(--palette-positive-soft)!important;color:var(--palette-positive)!important}
.marketStatus.down{background:var(--palette-negative-soft)!important;color:var(--palette-negative)!important}
body[data-theme="dark"] .hero,
body[data-theme="dark"] .moduleBanner,
body[data-theme="dark"] .subscriptionHero,
body[data-theme="dark"] .marketProHero{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--palette-accent) 13%,var(--palette-card-soft)),
    color-mix(in srgb,var(--palette-accent-2) 9%,var(--palette-card)) 62%,
    var(--palette-card))!important;
  border-color:var(--palette-line)!important
}
/* Centralized table chrome: page-specific tables inherit the active palette. */
.marketTableCard,.marketTable thead th,.workbookTable thead th{
  border-color:var(--palette-line)!important
}
.marketTable thead th,.workbookTable thead th{
  background:var(--palette-card-soft)!important;
  color:var(--palette-muted)!important
}
.marketTable tbody td,.workbookTable tbody td{border-color:var(--palette-line-soft)!important}

/* v0.27.7 mobile stacking fix: the dark desktop glow uses isolation on .app,
   but the tablet/mobile drawer must escape that stacking context so it stays
   above the click-catcher overlay. */
@media(max-width:1280px){
  body[data-theme="dark"] .app,body.theme-dark .app{isolation:auto!important}
}


/* v0.27.7 FINAL TOKEN AUTHORITY — legacy selector specificity must never beat master tokens. */
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active,
body[data-theme="dark"] .nav button.active,body.theme-dark .nav button.active{
  background:linear-gradient(135deg,var(--palette-accent),color-mix(in srgb,var(--palette-accent) 83%,var(--palette-accent-2)))!important;
  color:var(--palette-on-accent)!important;
  border-color:color-mix(in srgb,var(--palette-accent-2) 58%,var(--color-transparent))!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--palette-accent) 17%,var(--color-transparent))!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active::before,
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active:before,
body[data-theme="dark"] .nav button.active::before,body[data-theme="dark"] .nav button.active:before,
body.theme-dark .nav button.active::before,body.theme-dark .nav button.active:before{
  background:var(--palette-accent-2)!important;
  box-shadow:0 0 15px color-mix(in srgb,var(--palette-accent) 58%,var(--color-transparent))!important;
}


/* ======================================================================
   v0.27.7 DESKTOP APPEARANCE DOCK
   Desktop replaces the sidebar “نمایش و خوانایی” panel with compact
   font + light/dark controls at the upper-left of the application shell.
   Mobile/tablet retain the full accessibility panel in the drawer.
   ====================================================================== */
.desktopAppearanceDock{display:none}
@media(min-width:1281px){
  .desktopAppearanceDock{display:flex!important;position:absolute!important;top:18px!important;left:24px!important;z-index:70!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;border:1px solid var(--palette-line)!important;border-radius:16px!important;background:var(--palette-card)!important;color:var(--palette-text)!important;box-shadow:0 8px 24px color-mix(in srgb,var(--palette-shadow) 38%,var(--color-transparent))!important}
  .desktopFontMenu{position:relative!important;display:flex!important;align-items:center!important}
  .desktopFontButton{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border:1px solid var(--palette-line-soft)!important;border-radius:11px!important;background:var(--palette-card-soft)!important;color:var(--palette-muted)!important;padding:0!important;cursor:pointer!important;transition:background .16s ease,color .16s ease,border-color .16s ease!important}
  .desktopFontButton:hover,.desktopFontButton.active{background:var(--palette-accent-soft)!important;color:var(--palette-accent-hover)!important;border-color:color-mix(in srgb,var(--palette-accent) 42%,var(--palette-line))!important}
  .desktopFontButton svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .desktopFontPopover{position:absolute!important;top:calc(100% + 9px)!important;left:0!important;width:212px!important;padding:8px!important;border:1px solid var(--palette-line)!important;border-radius:14px!important;background:var(--palette-card)!important;box-shadow:0 14px 38px color-mix(in srgb,var(--palette-shadow) 58%,var(--color-transparent))!important;z-index:95!important}
  .desktopFontPopover[hidden]{display:none!important}
  .desktopFontPopoverTitle{padding:5px 8px 8px!important;color:var(--palette-muted)!important;font-size:var(--type-size-10px)!important;font-weight:var(--type-weight-800)!important}
  .desktopFontPopover button{width:100%!important;min-height:36px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;border:0!important;border-radius:9px!important;background:var(--color-transparent)!important;color:var(--palette-text)!important;padding:7px 9px!important;text-align:right!important;font-size:var(--type-size-10_5px)!important;font-weight:var(--type-weight-700)!important;cursor:pointer!important}
  .desktopFontPopover button:hover{background:var(--palette-card-soft)!important}
  .desktopFontPopover button span{visibility:hidden!important;color:var(--palette-accent-hover)!important;font-weight:var(--type-weight-900)!important}
  .desktopFontPopover button.active{background:var(--palette-accent-soft)!important;color:var(--palette-accent-hover)!important}
  .desktopFontPopover button.active span{visibility:visible!important}
  .desktopThemeBtns{display:flex!important;align-items:center!important;gap:3px!important;padding:3px!important;border:1px solid var(--palette-line-soft)!important;border-radius:12px!important;background:var(--palette-card-soft)!important}
  .desktopThemeBtns button{height:30px!important;border:0!important;border-radius:9px!important;background:var(--color-transparent)!important;color:var(--palette-muted)!important;padding:0 10px!important;font-size:var(--type-size-10px)!important;font-weight:var(--type-weight-800)!important;cursor:pointer!important}
  .desktopThemeBtns button.active{background:var(--palette-accent)!important;color:var(--palette-on-accent)!important}
  .side .appearancePanel{display:none!important}
}
@media(max-width:1280px){.desktopAppearanceDock{display:none!important}}

/* ======================================================================
   v0.27.7 EMERALD PALETTE COMPLETION
   Remove the last Vesper/violet dashboard accents that were still visible
   through legacy high-specificity FinSet rules. All dashboard chrome now
   resolves to the reference emerald palette or neutral text/border tokens.
   ====================================================================== */
.finsetProfileAvatar{
  background:linear-gradient(145deg,var(--palette-accent-2),var(--palette-accent))!important;
  color:var(--palette-on-accent)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--palette-accent) 20%,var(--palette-line))!important
}
body[data-theme="dark"] .finsetProfileAvatar,body.theme-dark .finsetProfileAvatar{
  background:linear-gradient(145deg,var(--palette-accent-2),var(--palette-accent))!important;
  color:var(--palette-on-accent)!important
}
.finsetLegend i{background:var(--palette-accent)!important}
.finsetLegend span:nth-child(2) i{background:var(--palette-accent-2)!important}
.allocBarGroup .bar.actual{background:var(--palette-accent)!important}
.allocBarGroup .bar.target{background:var(--palette-accent-2)!important}
.allocBars,.allocBars:before,.allocBars:after{border-color:var(--palette-line-soft)!important}
.allocBarGroup em{
  background:var(--palette-card)!important;
  border-color:var(--palette-accent-2)!important;
  color:var(--palette-text)!important
}
.healthLegend i{background:var(--palette-accent)!important}
.healthLegend span:nth-child(2) i{background:var(--palette-accent-2)!important}
.healthLegend span:nth-child(3) i{background:var(--palette-muted)!important}
.healthLegend span:nth-child(4) i{background:var(--palette-line)!important}
.finsetDonut{
  background:conic-gradient(
    var(--palette-accent) calc(var(--score)*1%),
    var(--palette-accent-2) 0 74%,
    var(--palette-muted) 0 84%,
    var(--palette-line) 0
  )!important
}
.finsetDonut:after{background:var(--palette-card)!important}
.healthHint{
  background:var(--palette-card)!important;
  border-color:var(--palette-line)!important;
  color:var(--palette-text)!important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--palette-shadow) 55%,var(--color-transparent))!important
}
.moneyModeSwitch{
  background:var(--palette-accent-soft)!important;
  border:1px solid var(--palette-line)!important
}
.moneyModeSwitch button{color:var(--palette-muted)!important}
.moneyModeSwitch button.active{
  background:var(--palette-card)!important;
  color:var(--palette-accent)!important;
  box-shadow:0 2px 9px color-mix(in srgb,var(--palette-shadow) 55%,var(--color-transparent))!important
}
.finsetDelta,.mobileSnapshotTop em,.mobileQuickCards>button>span,.mobileGoalTrack{
  background:var(--palette-accent-soft)!important;
  color:var(--palette-accent)!important
}
.finsetTableHead{
  background:var(--palette-card-soft)!important;
  color:var(--palette-muted)!important
}
.finsetTableRow{border-color:var(--palette-line-soft)!important;color:var(--palette-text)!important}
.finsetSelect,.finsetCircleBtn,.finsetProfileChip,.finsetPeriod,.finsetPeriodIcon{
  background:var(--palette-card)!important;
  border-color:var(--palette-line)!important;
  color:var(--palette-text)!important
}
.finsetKpi,.finsetPanel{border-color:var(--palette-line)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel{background:var(--palette-card)!important}
/* money-mode selector has theme-qualified legacy rules; match their specificity. */
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch{
  background:var(--palette-accent-soft)!important;
  border-color:var(--palette-line)!important
}
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch button{color:var(--palette-muted)!important}
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch button.active{
  background:var(--palette-card)!important;
  color:var(--palette-accent)!important;
  box-shadow:0 2px 9px color-mix(in srgb,var(--palette-shadow) 55%,var(--color-transparent))!important
}
body[data-theme="dark"] .moneyModeSwitch,body.theme-dark .moneyModeSwitch{
  background:var(--palette-card-soft)!important;
  border-color:var(--palette-line)!important
}
body[data-theme="dark"] .moneyModeSwitch button,body.theme-dark .moneyModeSwitch button{color:var(--palette-muted)!important}
body[data-theme="dark"] .moneyModeSwitch button.active,body.theme-dark .moneyModeSwitch button.active{
  background:var(--palette-elevated)!important;
  color:var(--palette-accent-2)!important;
  box-shadow:0 2px 9px color-mix(in srgb,var(--palette-shadow) 55%,var(--color-transparent))!important
}

/* ======================================================================
   v0.27.7 DARK PALETTE FINAL AUTHORITY
   Some legacy inline FinSet rules redefine --ui-* tokens with old
   navy/violet values using body[data-theme="dark"] specificity.  Keep the
   app's compatibility aliases pinned to the approved emerald palette and
   neutral dark surfaces so no legacy brand colors leak into dashboard UI.
   ====================================================================== */
body[data-theme="dark"],body.theme-dark{
  --ui-bg:var(--palette-canvas)!important;
  --ui-shell:var(--palette-shell)!important;
  --ui-side:var(--palette-sidebar)!important;
  --ui-card:var(--palette-card)!important;
  --ui-card-soft:var(--palette-card-soft)!important;
  --ui-text:var(--palette-text)!important;
  --ui-muted:var(--palette-muted)!important;
  --ui-line:var(--palette-line)!important;
  --ui-line-soft:var(--palette-line-soft)!important;
  --ui-accent:var(--palette-accent)!important;
  --ui-accent-2:var(--palette-accent-2)!important;
  --ui-accent-soft:var(--palette-accent-soft)!important;
  --ui-positive:var(--palette-positive)!important;
  --bg:var(--palette-canvas)!important;
  --card:var(--palette-card)!important;
  --text:var(--palette-text)!important;
  --muted:var(--palette-muted)!important;
  --line:var(--palette-line)!important;
  --soft:var(--palette-card-soft)!important;
}
body[data-theme="dark"] .globalAssetSearchBox,body.theme-dark .globalAssetSearchBox{
  background:var(--palette-card-soft)!important;
  border-color:var(--palette-line)!important;
  color:var(--palette-text)!important;
}
body[data-theme="dark"] .globalAssetSearchBox input,body.theme-dark .globalAssetSearchBox input{
  color:var(--palette-text)!important;
}
body[data-theme="dark"] .globalAssetSearchBox input::placeholder,body.theme-dark .globalAssetSearchBox input::placeholder{
  color:var(--palette-muted)!important;
}
body[data-theme="dark"] .finsetCircleBtn,
body[data-theme="dark"] .finsetProfileChip,
body[data-theme="dark"] .finsetPeriod,
body[data-theme="dark"] .finsetPeriodIcon,
body[data-theme="dark"] .finsetSelect,
body[data-theme="dark"] .panelArrow,
body[data-theme="dark"] .finsetKpi .kpiArrow,
body.theme-dark .finsetCircleBtn,
body.theme-dark .finsetProfileChip,
body.theme-dark .finsetPeriod,
body.theme-dark .finsetPeriodIcon,
body.theme-dark .finsetSelect,
body.theme-dark .panelArrow,
body.theme-dark .finsetKpi .kpiArrow{
  background:var(--palette-card-soft)!important;
  border-color:var(--palette-line)!important;
  color:var(--palette-text)!important;
  box-shadow:none!important;
}
body[data-theme="dark"] .btn.ghost,body.theme-dark .btn.ghost{
  background:var(--palette-card-soft)!important;
  color:var(--palette-text)!important;
  border-color:var(--palette-line)!important;
}
body[data-theme="dark"] .btn.ghost:hover,body.theme-dark .btn.ghost:hover{
  background:var(--palette-elevated)!important;
  border-color:var(--palette-accent)!important;
}
body[data-theme="dark"] .finsetTableHead,body.theme-dark .finsetTableHead{
  background:var(--palette-card-soft)!important;
  color:var(--palette-muted)!important;
}
body[data-theme="dark"] .finsetDonut:after,body.theme-dark .finsetDonut:after{
  background:var(--palette-card)!important;
}
body[data-theme="dark"] .healthHint,body.theme-dark .healthHint{
  background:var(--palette-elevated)!important;
  border-color:var(--palette-line)!important;
  color:var(--palette-text)!important;
}
body[data-theme="dark"] .goalTrack,body.theme-dark .goalTrack{
  background:var(--palette-accent-soft)!important;
}
body[data-theme="dark"] .sideUserCard,body.theme-dark .sideUserCard{
  background:var(--palette-card-soft)!important;
  border-color:var(--palette-line)!important;
}
body[data-theme="dark"] .sideUserAvatar,body.theme-dark .sideUserAvatar{
  background:linear-gradient(135deg,var(--palette-accent),var(--palette-accent-2))!important;
  color:var(--palette-on-accent)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--palette-accent) 24%,var(--palette-line))!important;
}
body[data-theme="dark"] .nav button:hover,body.theme-dark .nav button:hover{
  background:var(--palette-card-soft)!important;
}
body[data-theme="dark"] .brand h1,body[data-theme="dark"] .nav button,body[data-theme="dark"] .appearancePanel summary,
body.theme-dark .brand h1,body.theme-dark .nav button,body.theme-dark .appearancePanel summary{
  color:var(--palette-text)!important;
}
body[data-theme="dark"] .brand small,body[data-theme="dark"] .navGroup,body[data-theme="dark"] .sidefoot,
body.theme-dark .brand small,body.theme-dark .navGroup,body.theme-dark .sidefoot{
  color:var(--palette-muted)!important;
}


/* ======================================================================
   HIGH-CONTRAST GLASS MATERIAL — palette experiment
   Uses all palette hues visibly while preserving the existing layout.
   ====================================================================== */
:root,body{
  --glass-border:color-mix(in srgb,var(--palette-line) 74%,var(--palette-accent-3) 26%);
  --glass-sheen:color-mix(in srgb,var(--palette-card) 72%,var(--color-transparent));
  --glass-sheen-soft:color-mix(in srgb,var(--palette-card-soft) 58%,var(--color-transparent));
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:
    radial-gradient(760px 520px at 5% 2%,color-mix(in srgb,var(--palette-accent-3) 20%,var(--color-transparent)),var(--color-transparent) 72%),
    radial-gradient(680px 540px at 96% 96%,color-mix(in srgb,var(--palette-accent-2) 16%,var(--color-transparent)),var(--color-transparent) 74%),
    var(--palette-main)!important;
}
body[data-theme="dark"] .main,body.theme-dark .main{
  background:
    radial-gradient(780px 560px at 4% 3%,color-mix(in srgb,var(--palette-accent-3) 13%,var(--color-transparent)),var(--color-transparent) 72%),
    radial-gradient(760px 620px at 95% 96%,color-mix(in srgb,var(--palette-accent) 16%,var(--color-transparent)),var(--color-transparent) 76%),
    var(--palette-main)!important;
}
.side,.desktopAppearanceDock,.mobileTopbar,.mobileBottomNav{
  backdrop-filter:blur(24px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(145%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:color-mix(in srgb,var(--palette-sidebar) 84%,var(--color-transparent))!important;
  border-left:1px solid color-mix(in srgb,var(--palette-line) 78%,var(--color-transparent))!important;
}
body[data-theme="dark"] .side,body.theme-dark .side{
  background:color-mix(in srgb,var(--palette-sidebar) 82%,var(--color-transparent))!important;
  border-left:1px solid color-mix(in srgb,var(--palette-line) 92%,var(--color-transparent))!important;
}
.card,.finsetKpi,.finsetPanel,.question,.allocItem,.feedItem,.rebRow,.scenario,.scoreCard,.mcard,.price,.recCard,.fundCard,.positionCard,.ownerSection,.fundWizard,.fundScenarioCard,.smartMetric,.messageCard,.messageComposer,.metalResult,.ratioCard,.assumptionCard,.factorCard,.analysisEvidenceCard,.evidenceEdit,.smartAlert,.assetRelation>div,.marketTableCard,.marketQuickCard,.mobileRefCard,.mobileQuickCards>button{
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(20px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
  border:1px solid var(--glass-border)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .mobileSnapshot,
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel,
body:not([data-theme="dark"]):not(.theme-dark) .mobileRefCard,
body:not([data-theme="dark"]):not(.theme-dark) .mobileQuickCards>button{background:linear-gradient(145deg,#FFFFFF 0%,#FBFDFE 66%,#F3F7F9 100%)!important;border-color:#C5D2DB!important;box-shadow:0 14px 34px rgba(6,26,45,.12),inset 0 1px 0 #FFFFFF!important}
body[data-theme="dark"] .mobileSnapshot,body.theme-dark .mobileSnapshot,
body[data-theme="dark"] .card,body.theme-dark .card,
body[data-theme="dark"] .finsetKpi,body.theme-dark .finsetKpi,
body[data-theme="dark"] .finsetPanel,body.theme-dark .finsetPanel,
body[data-theme="dark"] .mobileRefCard,body.theme-dark .mobileRefCard,
body[data-theme="dark"] .mobileQuickCards>button,body.theme-dark .mobileQuickCards>button{background:linear-gradient(150deg,#102735 0%,#0C202D 58%,#091A25 100%)!important;border-color:#294657!important;box-shadow:0 18px 46px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035)!important}
.finsetKpi{--card-tone:var(--palette-accent);isolation:isolate}
.finsetKpi:nth-child(2){--card-tone:var(--palette-accent-2)}
.finsetKpi:nth-child(3){--card-tone:var(--palette-accent-3)}
.finsetKpi:nth-child(4){--card-tone:var(--palette-secondary)}
.finsetKpi::before{
  content:"";position:absolute;z-index:0;right:0;left:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--card-tone),color-mix(in srgb,var(--card-tone) 40%,var(--palette-accent-3)));opacity:.96
}
.finsetKpi::after{
  content:"";position:absolute;z-index:-1;width:170px;height:170px;left:-70px;bottom:-105px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--card-tone) 21%,var(--color-transparent)),var(--color-transparent) 70%)
}
.finsetKpi .kpiArrow{border-color:color-mix(in srgb,var(--card-tone) 58%,var(--palette-line))!important;color:var(--card-tone)!important;background:color-mix(in srgb,var(--palette-card) 62%,var(--color-transparent))!important}
.finsetKpi .finsetDelta,.finsetKpi .kpiFoot .finsetDelta{background:color-mix(in srgb,var(--card-tone) 14%,var(--palette-card))!important;color:var(--card-tone)!important}
.finsetPanel{--panel-tone:var(--palette-accent)}
.finsetMiddle .finsetPanel:nth-child(2),.finsetBottom .finsetPanel:nth-child(1){--panel-tone:var(--palette-accent-2)}
.finsetBottom .finsetPanel:nth-child(2){--panel-tone:var(--palette-accent-3)}
.finsetPanel::before{content:"";position:absolute;right:18px;left:18px;top:0;height:2px;background:linear-gradient(90deg,var(--color-transparent),var(--panel-tone),var(--color-transparent));opacity:.85}
.finsetPanelHead h3{position:relative;padding-right:13px}
.finsetPanelHead h3::before{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);background:var(--panel-tone);box-shadow:0 0 14px color-mix(in srgb,var(--panel-tone) 50%,var(--color-transparent))}
.nav button.active{
  background:linear-gradient(135deg,var(--palette-accent),var(--palette-secondary))!important;
  border-color:color-mix(in srgb,var(--palette-accent-3) 58%,var(--palette-line))!important;
  box-shadow:0 10px 26px color-mix(in srgb,var(--palette-accent) 30%,var(--color-transparent))!important;
}
.nav button.active::before{background:var(--palette-accent-3)!important;box-shadow:0 0 16px color-mix(in srgb,var(--palette-accent-3) 70%,var(--color-transparent))!important}
.btn.primary,.btn:not(.ghost):not(.danger):not(.gold){
  background:linear-gradient(135deg,var(--palette-accent),color-mix(in srgb,var(--palette-secondary) 80%,var(--palette-accent-3) 20%))!important;
  border-color:color-mix(in srgb,var(--palette-accent-3) 50%,var(--palette-accent))!important;
  box-shadow:0 9px 24px color-mix(in srgb,var(--palette-accent) 25%,var(--color-transparent))!important;
}
.moneyModeSwitch{background:color-mix(in srgb,var(--palette-highlight) 42%,var(--palette-card))!important;border-color:color-mix(in srgb,var(--palette-accent-2) 48%,var(--palette-line))!important}
.finsetProfileAvatar{background:linear-gradient(135deg,var(--palette-accent-3),var(--palette-accent))!important;color:var(--palette-on-accent)!important;box-shadow:0 7px 20px color-mix(in srgb,var(--palette-accent-3) 32%,var(--color-transparent))!important}
.finsetLegend span:nth-child(1) i,.healthLegend span:nth-child(1) i{background:var(--palette-accent)!important}
.finsetLegend span:nth-child(2) i,.healthLegend span:nth-child(2) i{background:var(--palette-accent-3)!important}
.healthLegend span:nth-child(3) i{background:var(--palette-accent-2)!important}.healthLegend span:nth-child(4) i{background:var(--palette-line)!important}
.allocBarGroup:nth-child(3n+1) .bar.actual{background:linear-gradient(to top,var(--palette-accent),var(--palette-accent-3))!important}
.allocBarGroup:nth-child(3n+2) .bar.actual{background:linear-gradient(to top,var(--palette-secondary),var(--palette-accent-2))!important}
.allocBarGroup:nth-child(3n) .bar.actual{background:linear-gradient(to top,var(--palette-accent-2),var(--palette-accent-3))!important}
.allocBarGroup .bar.target{background:color-mix(in srgb,var(--palette-accent-3) 48%,var(--palette-card))!important;border:1px solid color-mix(in srgb,var(--palette-accent-3) 70%,var(--palette-line))!important}
.finsetDonut{background:conic-gradient(var(--palette-accent) calc(var(--score)*1%),var(--palette-accent-3) 0 74%,var(--palette-accent-2) 0 86%,var(--palette-line) 0)!important;box-shadow:0 12px 30px color-mix(in srgb,var(--palette-accent) 24%,var(--color-transparent))!important}
.finsetDonut:after{background:color-mix(in srgb,var(--palette-card) 88%,var(--color-transparent))!important;backdrop-filter:blur(18px)!important}
.finsetTableHead{background:linear-gradient(90deg,color-mix(in srgb,var(--palette-highlight) 42%,var(--palette-card)),color-mix(in srgb,var(--palette-accent-2) 20%,var(--palette-card)))!important;color:var(--palette-text-strong)!important}
.goalTrack{background:color-mix(in srgb,var(--palette-highlight) 48%,var(--palette-card))!important}.goalTrack i{background:linear-gradient(90deg,var(--palette-accent),var(--palette-accent-3))!important}
.finsetSelect,.finsetCircleBtn,.finsetProfileChip,.finsetPeriod,.finsetPeriodIcon,.panelArrow,.btn.ghost,input,select,textarea{
  background:color-mix(in srgb,var(--palette-card) 70%,var(--color-transparent))!important;
  backdrop-filter:blur(13px) saturate(140%)!important;
  border-color:color-mix(in srgb,var(--palette-line) 86%,var(--palette-accent-2) 14%)!important;
}
.desktopAppearanceDock{background:color-mix(in srgb,var(--palette-card) 66%,var(--color-transparent))!important;border:1px solid color-mix(in srgb,var(--palette-line) 78%,var(--palette-accent-3) 22%)!important;box-shadow:0 13px 38px color-mix(in srgb,var(--palette-shadow) 75%,var(--color-transparent))!important}
#desktopFontPopover{background:color-mix(in srgb,var(--palette-card) 92%,var(--color-transparent))!important;backdrop-filter:blur(24px) saturate(150%)!important;border-color:color-mix(in srgb,var(--palette-line) 75%,var(--palette-accent-3) 25%)!important;box-shadow:0 22px 58px var(--palette-shadow)!important}
#desktopFontPopover [data-font-family].active{background:color-mix(in srgb,var(--palette-highlight) 58%,var(--palette-card))!important;color:var(--palette-secondary)!important}
\n\n/* ======================================================================\n   ADJACENT CARD CONTRAST PASS\n   Fixes the "all cards melt together" problem introduced by the first\n   glass pass. Glass is preserved, but neighboring cards now have distinct\n   luminance, tint, border tone and elevation.\n   ====================================================================== */\n\n/* dashboard KPI row: four visibly different glass tints */\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(1){\n  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-card) 88%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent) 15%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent) 55%,var(--palette-line))!important;\n}\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(2){\n  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-card) 90%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-2) 30%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent-2) 70%,var(--palette-line))!important;\n}\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(3){\n  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-card) 90%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-3) 28%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent-3) 68%,var(--palette-line))!important;\n}\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(4){\n  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-card) 88%,var(--color-transparent)),color-mix(in srgb,var(--palette-secondary) 12%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-secondary) 44%,var(--palette-line))!important;\n}\n\n/* large dashboard panels: alternate surface families, not one washed tint */\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetMiddle .finsetPanel:nth-child(1){\n  background:linear-gradient(150deg,color-mix(in srgb,var(--palette-card) 94%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-2) 18%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent) 54%,var(--palette-line))!important;\n}\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetMiddle .finsetPanel:nth-child(2){\n  background:linear-gradient(150deg,color-mix(in srgb,var(--palette-card) 94%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-3) 20%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent-3) 58%,var(--palette-line))!important;\n}\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetBottom .finsetPanel:nth-child(1){\n  background:linear-gradient(150deg,color-mix(in srgb,var(--palette-card) 94%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent) 13%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent) 58%,var(--palette-line))!important;\n}\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetBottom .finsetPanel:nth-child(2){\n  background:linear-gradient(150deg,color-mix(in srgb,var(--palette-card) 94%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-2) 24%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent-2) 64%,var(--palette-line))!important;\n}\n\n/* stronger separation between neighboring surfaces */\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,\nbody:not([data-theme="dark"]):not(.theme-dark) .finsetPanel{\n  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--palette-elevated) 94%,var(--color-transparent)),0 10px 28px color-mix(in srgb,var(--palette-shadow) 42%,var(--color-transparent))!important;\n}\n\n/* dark mode uses stepped brightness as well as hue, so adjacent cards do not merge */\nbody[data-theme="dark"] .finsetKpi:nth-child(1),body.theme-dark .finsetKpi:nth-child(1){\n  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-elevated) 76%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent) 14%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent) 58%,var(--palette-line))!important;\n}\nbody[data-theme="dark"] .finsetKpi:nth-child(2),body.theme-dark .finsetKpi:nth-child(2){\n  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-card-soft) 84%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-2) 14%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent-2) 52%,var(--palette-line))!important;\n}\nbody[data-theme="dark"] .finsetKpi:nth-child(3),body.theme-dark .finsetKpi:nth-child(3){\n  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-elevated) 72%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-3) 15%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-accent-3) 55%,var(--palette-line))!important;\n}\nbody[data-theme="dark"] .finsetKpi:nth-child(4),body.theme-dark .finsetKpi:nth-child(4){\n  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-card) 90%,var(--color-transparent)),color-mix(in srgb,var(--palette-secondary) 28%,var(--palette-card)))!important;\n  border-color:color-mix(in srgb,var(--palette-secondary) 72%,var(--palette-line))!important;\n}\nbody[data-theme="dark"] .finsetMiddle .finsetPanel:nth-child(1),body.theme-dark .finsetMiddle .finsetPanel:nth-child(1){\n  background:linear-gradient(150deg,color-mix(in srgb,var(--palette-elevated) 70%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent) 9%,var(--palette-card)))!important;\n}\nbody[data-theme="dark"] .finsetMiddle .finsetPanel:nth-child(2),body.theme-dark .finsetMiddle .finsetPanel:nth-child(2){\n  background:linear-gradient(150deg,color-mix(in srgb,var(--palette-card-soft) 87%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-3) 11%,var(--palette-card)))!important;\n}\nbody[data-theme="dark"] .finsetBottom .finsetPanel:nth-child(1),body.theme-dark .finsetBottom .finsetPanel:nth-child(1){\n  background:linear-gradient(150deg,color-mix(in srgb,var(--palette-card) 88%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-2) 10%,var(--palette-card)))!important;\n}\nbody[data-theme="dark"] .finsetBottom .finsetPanel:nth-child(2),body.theme-dark .finsetBottom .finsetPanel:nth-child(2){\n  background:linear-gradient(150deg,color-mix(in srgb,var(--palette-elevated) 66%,var(--color-transparent)),color-mix(in srgb,var(--palette-accent-3) 12%,var(--palette-card)))!important;\n}\nbody[data-theme="dark"] .finsetKpi,body.theme-dark .finsetKpi,\nbody[data-theme="dark"] .finsetPanel,body.theme-dark .finsetPanel{\n  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--palette-text-strong) 20%,var(--color-transparent)),0 20px 42px color-mix(in srgb,var(--palette-shadow) 86%,var(--color-transparent))!important;\n}\n\n/* preserve glass, but make the edge readable against adjacent glass */\n.finsetKpi,.finsetPanel{outline:1px solid color-mix(in srgb,var(--palette-text-strong) 7%,var(--color-transparent));outline-offset:-2px}\n
/* ======================================================================
   v0.27.7-r6 — Premium Green Gradient Canvas
   Light-mode visual experiment requested by user:
   - stronger green canvas behind cards
   - much lighter, calmer sidebar
   - glass cards with clearer depth/separation
   ====================================================================== */
body:not([data-theme="dark"]):not(.theme-dark){
  background:
    radial-gradient(circle at 12% 8%, rgba(132,204,22,.22) 0 0, rgba(132,204,22,0) 34%),
    radial-gradient(circle at 88% 82%, rgba(22,163,74,.16) 0 0, rgba(22,163,74,0) 40%),
    linear-gradient(135deg,#F2F9E3 0%,#E2F2C9 43%,#CFE8AD 100%) !important;
}
body:not([data-theme="dark"]):not(.theme-dark) .app{
  background:rgba(244,249,229,.72)!important;
  border-color:rgba(77,124,15,.22)!important;
  box-shadow:0 26px 70px rgba(45,75,20,.18)!important;
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:
    radial-gradient(circle at 18% 14%,rgba(163,230,53,.19) 0 0,rgba(163,230,53,0) 30%),
    radial-gradient(circle at 82% 88%,rgba(22,163,74,.13) 0 0,rgba(22,163,74,0) 38%),
    linear-gradient(145deg,#F3FBE4 0%,#E3F4C9 45%,#CFEAAE 100%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:
    linear-gradient(180deg,rgba(252,254,246,.98) 0%,rgba(246,251,235,.97) 55%,rgba(240,248,225,.96) 100%)!important;
  border-left:1px solid rgba(111,154,57,.22)!important;
  box-shadow:-10px 0 32px rgba(63,93,31,.06)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .sideBottom{
  background:linear-gradient(180deg,rgba(247,252,237,.92),rgba(242,249,228,.98))!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel,
body:not([data-theme="dark"]):not(.theme-dark) .question,
body:not([data-theme="dark"]):not(.theme-dark) .allocItem,
body:not([data-theme="dark"]):not(.theme-dark) .feedItem,
body:not([data-theme="dark"]):not(.theme-dark) .rebRow,
body:not([data-theme="dark"]):not(.theme-dark) .scenario,
body:not([data-theme="dark"]):not(.theme-dark) .scoreCard,
body:not([data-theme="dark"]):not(.theme-dark) .mcard,
body:not([data-theme="dark"]):not(.theme-dark) .price,
body:not([data-theme="dark"]):not(.theme-dark) .recCard,
body:not([data-theme="dark"]):not(.theme-dark) .fundCard,
body:not([data-theme="dark"]):not(.theme-dark) .positionCard{
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(247,252,234,.62))!important;
  border-color:rgba(93,143,42,.30)!important;
  box-shadow:
    0 14px 34px rgba(55,93,26,.10),
    inset 0 1px 0 rgba(255,255,255,.88)!important;
  backdrop-filter:blur(16px) saturate(132%);
  -webkit-backdrop-filter:blur(16px) saturate(132%);
}
/* subtle hue alternation makes adjacent dashboard cards readable at a glance */
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(1){background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(222,247,205,.70))!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(2){background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(234,249,207,.72))!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(3){background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(226,245,190,.72))!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(4){background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(216,242,213,.72))!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(odd){background:linear-gradient(145deg,rgba(255,255,255,.79),rgba(235,248,213,.64))!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(even){background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(222,242,209,.65))!important}
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active{
  background:linear-gradient(135deg,#16A34A,#3EAD36 55%,#84CC16)!important;
  box-shadow:0 10px 24px rgba(22,163,74,.20)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch{
  background:rgba(225,243,198,.62)!important;
  border-color:rgba(77,124,15,.22)!important;
  backdrop-filter:blur(10px);
}
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch button.active{
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 5px 14px rgba(61,96,31,.10)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(103,148,53,.25)!important;
  backdrop-filter:blur(12px);
}

/* r6.1 polish: make the canvas noticeably greener while the sidebar stays near-neutral */
body:not([data-theme="dark"]):not(.theme-dark){
  background:
    radial-gradient(circle at 8% 6%, rgba(163,230,53,.20) 0 0, rgba(163,230,53,0) 30%),
    radial-gradient(circle at 92% 92%, rgba(34,197,94,.18) 0 0, rgba(34,197,94,0) 38%),
    linear-gradient(135deg,#EEF7D9 0%,#DCEEBB 48%,#C5E29D 100%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:
    radial-gradient(circle at 16% 10%,rgba(217,249,157,.34) 0 0,rgba(217,249,157,0) 30%),
    radial-gradient(circle at 84% 86%,rgba(74,222,128,.18) 0 0,rgba(74,222,128,0) 38%),
    linear-gradient(145deg,#ECF8D5 0%,#D9EFB6 45%,#C5E6A0 100%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:linear-gradient(180deg,#FCFEF8 0%,#F8FCEF 55%,#F4FAE8 100%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel{
  border-color:rgba(78,127,26,.31)!important;
  box-shadow:0 16px 34px rgba(55,93,26,.11),inset 0 1px 0 rgba(255,255,255,.94)!important;
}

/* ======================================================================
   v0.27.7-r6.2 — Corrected layer hierarchy
   User clarification:
   - keep the OUTER page/canvas the existing pale green
   - make ONLY the middle content layer behind cards richer green gradient
   - give the sidebar a coordinated sage tone, calmer than the middle layer
   ====================================================================== */
body:not([data-theme="dark"]):not(.theme-dark){
  background:var(--palette-canvas)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .app{
  background:var(--palette-shell)!important;
  border-color:color-mix(in srgb,var(--palette-line) 64%,var(--color-transparent))!important;
  box-shadow:0 26px 70px rgba(45,75,20,.14)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:
    radial-gradient(circle at 16% 12%,rgba(190,242,100,.30) 0 0,rgba(190,242,100,0) 30%),
    radial-gradient(circle at 84% 88%,rgba(74,222,128,.16) 0 0,rgba(74,222,128,0) 38%),
    linear-gradient(145deg,#EEF8DC 0%,#DCEFBF 44%,#CBE6A8 100%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:
    linear-gradient(180deg,#EDF5E3 0%,#DFECCF 52%,#D5E6C2 100%)!important;
  border-left:1px solid rgba(91,126,50,.24)!important;
  box-shadow:-9px 0 24px rgba(54,81,31,.05)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .sideBottom{
  background:linear-gradient(180deg,rgba(223,236,207,.92),rgba(213,230,194,.98))!important;
  border-top-color:rgba(91,126,50,.22)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch{
  background:rgba(203,230,168,.54)!important;
  border-color:rgba(91,126,50,.24)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard{
  background:rgba(255,255,255,.62)!important;
  border-color:rgba(91,126,50,.23)!important;
}
/* Keep cards bright/glassy so the greener middle layer is visible between them. */
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel{
  background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(248,252,240,.63))!important;
  border-color:rgba(83,129,34,.33)!important;
  box-shadow:0 16px 34px rgba(55,93,26,.11),inset 0 1px 0 rgba(255,255,255,.94)!important;
  backdrop-filter:blur(15px) saturate(128%)!important;
  -webkit-backdrop-filter:blur(15px) saturate(128%)!important;
}

/* ======================================================================
   v0.27.7-r6.3 — Desktop typography is ONE top action icon.
   Clicking it opens a real modal window with font + text size controls.
   The old detached top-left control and desktop sidebar appearance panel
   are intentionally removed/hidden. Tablet/mobile keep the full sidebar panel.
   ====================================================================== */
.desktopAppearanceDock{display:none!important}
@media(min-width:1281px){
  .side .appearancePanel{display:none!important}
  .finsetHeaderTools .typographyQuickBtn,.finsetHeaderTools .themeQuickBtn{display:grid!important}
}
.typographyQuickBtn,.themeQuickBtn{isolation:isolate}
.typographyQuickBtn:hover,.themeQuickBtn:hover{border-color:color-mix(in srgb,var(--palette-accent) 52%,var(--palette-line))!important;background:color-mix(in srgb,var(--palette-highlight) 64%,var(--palette-card))!important;color:var(--palette-accent)!important}
.themeQuickBtn .themeSunIcon,.themeQuickBtn .themeMoonIcon{position:absolute;transition:opacity .16s ease,transform .16s ease}
body:not([data-theme="dark"]) .themeQuickBtn .themeSunIcon{opacity:0;transform:scale(.72) rotate(-20deg)}
body:not([data-theme="dark"]) .themeQuickBtn .themeMoonIcon{opacity:1;transform:scale(1)}
body[data-theme="dark"] .themeQuickBtn .themeSunIcon{opacity:1;transform:scale(1)}
body[data-theme="dark"] .themeQuickBtn .themeMoonIcon{opacity:0;transform:scale(.72) rotate(20deg)}

.typographyOverlay{position:fixed!important;inset:0!important;z-index:900!important;display:grid!important;place-items:center!important;padding:22px!important;background:rgba(10,28,17,.22)!important;backdrop-filter:blur(8px) saturate(118%)!important;-webkit-backdrop-filter:blur(8px) saturate(118%)!important}
.typographyOverlay[hidden]{display:none!important}
body.typography-modal-open{overflow:hidden!important}
.typographyModal{width:min(520px,calc(100vw - 36px))!important;max-height:min(760px,calc(100dvh - 42px))!important;overflow:auto!important;border-radius:26px!important;padding:22px!important;background:color-mix(in srgb,var(--palette-card) 92%,var(--color-transparent))!important;border:1px solid color-mix(in srgb,var(--palette-accent) 22%,var(--palette-line))!important;box-shadow:0 34px 90px rgba(19,78,35,.22),inset 0 1px 0 rgba(255,255,255,.62)!important;backdrop-filter:blur(26px) saturate(160%)!important;-webkit-backdrop-filter:blur(26px) saturate(160%)!important;color:var(--palette-text)!important;direction:rtl!important}
.typographyModalHead{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:14px!important;padding-bottom:15px!important;border-bottom:1px solid var(--palette-line-soft)!important}
.typographyModalHead h3{margin:3px 0 0!important;font-size:var(--type-size-19px)!important;font-weight:var(--type-weight-900)!important;color:var(--palette-text)!important}
.typographyEyebrow{font-size:var(--type-size-9_5px)!important;font-weight:var(--type-weight-850)!important;color:var(--palette-accent)!important}
.typographyClose{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:12px!important;border:1px solid var(--palette-line)!important;background:var(--palette-card-soft)!important;color:var(--palette-muted)!important;font-size:26px!important;line-height:1!important;cursor:pointer!important;display:grid!important;place-items:center!important}
.typographyClose:hover{background:var(--palette-highlight)!important;color:var(--palette-accent)!important}
.typographyPreview{margin:16px 0!important;padding:15px 16px!important;border:1px solid color-mix(in srgb,var(--palette-accent) 20%,var(--palette-line))!important;border-radius:17px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--palette-highlight) 74%,var(--palette-card)),color-mix(in srgb,var(--palette-card) 92%,var(--palette-accent-3) 8%))!important;display:grid!important;gap:4px!important}
.typographyPreview b{font-size:var(--type-size-15px)!important;color:var(--palette-text)!important}
.typographyPreview span{font-size:var(--type-size-10_5px)!important;color:var(--palette-muted)!important}
.typographySection{padding:14px 0!important}
.typographySection+.typographySection{border-top:1px solid var(--palette-line-soft)!important}
.typographySectionTitle{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:10px!important}
.typographySectionTitle b{font-size:var(--type-size-12px)!important;color:var(--palette-text)!important}
.typographySectionTitle span{font-size:var(--type-size-9px)!important;color:var(--palette-muted)!important}
.typographyFontGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.typographyFontGrid button{min-height:44px!important;border-radius:13px!important;border:1px solid var(--palette-line)!important;background:color-mix(in srgb,var(--palette-card-soft) 86%,var(--color-transparent))!important;color:var(--palette-text)!important;padding:9px 11px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;text-align:right!important;font-size:var(--type-size-10_5px)!important;font-weight:var(--type-weight-750)!important;cursor:pointer!important}
.typographyFontGrid button i{font-style:normal!important;visibility:hidden!important;color:var(--palette-accent)!important;font-weight:var(--type-weight-950)!important}
.typographyFontGrid button:hover,.typographyFontGrid button.active{background:color-mix(in srgb,var(--palette-highlight) 70%,var(--palette-card))!important;border-color:color-mix(in srgb,var(--palette-accent) 45%,var(--palette-line))!important;color:var(--palette-secondary)!important}
.typographyFontGrid button.active i{visibility:visible!important}
.typographySizeGrid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
.typographySizeGrid button{min-height:40px!important;border-radius:12px!important;border:1px solid var(--palette-line)!important;background:var(--palette-card-soft)!important;color:var(--palette-muted)!important;padding:7px 8px!important;font-size:var(--type-size-9_5px)!important;font-weight:var(--type-weight-800)!important;cursor:pointer!important}
.typographySizeGrid button:hover,.typographySizeGrid button.active{background:var(--palette-accent)!important;border-color:var(--palette-accent)!important;color:var(--palette-on-accent)!important;box-shadow:0 7px 18px color-mix(in srgb,var(--palette-accent) 24%,var(--color-transparent))!important}
.typographyModalFoot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding-top:15px!important;border-top:1px solid var(--palette-line-soft)!important}
.typographyModalFoot span{font-size:var(--type-size-9px)!important;color:var(--palette-muted)!important}
.typographyModalFoot button{min-width:82px!important;height:38px!important;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,var(--palette-accent),var(--palette-secondary))!important;color:var(--palette-on-accent)!important;font-weight:var(--type-weight-850)!important;cursor:pointer!important}
body[data-theme="dark"] .typographyOverlay{background:rgba(0,15,8,.48)!important}
body[data-theme="dark"] .typographyModal{box-shadow:0 38px 110px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08)!important}
@media(max-width:1280px){.typographyOverlay{display:none!important}.finsetHeaderTools .typographyQuickBtn,.finsetHeaderTools .themeQuickBtn{display:none!important}}
@media(max-width:560px){.typographyFontGrid{grid-template-columns:1fr!important}.typographySizeGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ======================================================================
   v0.27.7-r7 — Royal Sapphire / Aristocratic Blue variant
   Same layer hierarchy + typography modal; only the visual theme changes.
   ====================================================================== */
body:not([data-theme="dark"]):not(.theme-dark){background:#EEF3FA!important}
body:not([data-theme="dark"]):not(.theme-dark) .app{
  background:#E8EFF8!important;
  border-color:rgba(53,88,137,.24)!important;
  box-shadow:0 28px 76px rgba(23,58,108,.15)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:
    radial-gradient(circle at 18% 10%,rgba(147,197,253,.42) 0 0,rgba(147,197,253,0) 31%),
    radial-gradient(circle at 84% 88%,rgba(56,189,248,.18) 0 0,rgba(56,189,248,0) 38%),
    linear-gradient(145deg,#EAF3FF 0%,#D8E8FF 46%,#C4DAF7 100%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:linear-gradient(180deg,#E3EBF6 0%,#D5E1F0 52%,#C8D8EB 100%)!important;
  border-left:1px solid rgba(47,82,132,.28)!important;
  box-shadow:-10px 0 26px rgba(28,58,101,.06)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .sideBottom{
  background:linear-gradient(180deg,rgba(214,225,240,.94),rgba(200,216,235,.98))!important;
  border-top-color:rgba(47,82,132,.23)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch{
  background:rgba(188,211,240,.64)!important;
  border-color:rgba(47,82,132,.24)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard{
  background:rgba(255,255,255,.64)!important;
  border-color:rgba(47,82,132,.24)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel{
  background:linear-gradient(145deg,rgba(255,255,255,.83),rgba(237,245,255,.65))!important;
  border-color:rgba(42,85,151,.36)!important;
  box-shadow:0 17px 38px rgba(25,66,125,.12),inset 0 1px 0 rgba(255,255,255,.96)!important;
  backdrop-filter:blur(16px) saturate(132%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(132%)!important;
}
body[data-theme="dark"] .main{
  background:
    radial-gradient(circle at 14% 10%,rgba(37,99,235,.20),transparent 33%),
    radial-gradient(circle at 84% 88%,rgba(56,189,248,.13),transparent 38%),
    linear-gradient(145deg,#08152B 0%,#0B1E3D 48%,#0B2448 100%)!important;
}
body[data-theme="dark"] .side{
  background:linear-gradient(180deg,#08142A 0%,#0A1A35 58%,#0B2040 100%)!important;
  border-left-color:rgba(96,165,250,.20)!important;
}
body[data-theme="dark"] .card,
body[data-theme="dark"] .finsetKpi,
body[data-theme="dark"] .finsetPanel{
  background:linear-gradient(145deg,rgba(16,35,66,.88),rgba(10,27,54,.74))!important;
  border-color:rgba(96,165,250,.24)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(18px) saturate(132%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(132%)!important;
}
body:not([data-theme="dark"]) .typographyOverlay{background:rgba(8,31,70,.22)!important}
body:not([data-theme="dark"]) .typographyModal{box-shadow:0 36px 96px rgba(21,57,107,.26),inset 0 1px 0 rgba(255,255,255,.74)!important}
body[data-theme="dark"] .typographyOverlay{background:rgba(1,7,19,.56)!important}
/* Royal Sapphire dashboard card contrast + chrome overrides */
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(1){background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(219,234,254,.74))!important;border-color:rgba(37,99,235,.34)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(2){background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(207,226,252,.76))!important;border-color:rgba(30,64,175,.38)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(3){background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(224,242,254,.76))!important;border-color:rgba(14,165,233,.34)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(4){background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(214,226,246,.76))!important;border-color:rgba(15,61,138,.34)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(odd){background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(222,235,252,.68))!important;border-color:rgba(37,99,235,.31)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(even){background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(211,229,250,.70))!important;border-color:rgba(14,165,233,.28)!important}
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active{background:linear-gradient(135deg,#1E40AF,#2563EB 56%,#38BDF8)!important;box-shadow:0 10px 25px rgba(30,64,175,.24)!important}
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch{background:rgba(191,215,244,.66)!important;border-color:rgba(30,64,175,.22)!important}
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch button.active{background:rgba(255,255,255,.94)!important;color:#1E40AF!important;box-shadow:0 5px 15px rgba(30,64,175,.12)!important}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard{background:rgba(255,255,255,.72)!important;border-color:rgba(30,64,175,.24)!important}
body[data-theme="dark"] .nav button.active,body.theme-dark .nav button.active{background:linear-gradient(135deg,#1D4ED8,#2563EB 58%,#38BDF8)!important;color:#fff!important;box-shadow:0 12px 26px rgba(37,99,235,.28)!important}
/* High-specificity semantic token override so every chart/icon/control follows Royal Sapphire. */
/* ======================================================================
   v0.27.7-r8 — GRAPHITE / MONOCHROME + NEON SPECTRUM
   Neutral white→gray→black surfaces. Vivid color is reserved for icons,
   data marks, status shapes and small interactive accents. The spectrum
   follows a consistent functional mapping instead of random decoration.
   ====================================================================== */
:root,
/* grayscale composition: outer canvas -> middle graphite layer -> glass cards */
body:not([data-theme="dark"]):not(.theme-dark){background:#BFC2C8!important}
body:not([data-theme="dark"]):not(.theme-dark) .app{
  background:#E7E8EB!important;border-color:rgba(35,38,45,.18)!important;
  box-shadow:0 30px 78px rgba(18,20,26,.16)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:
    radial-gradient(circle at 14% 8%,rgba(255,255,255,.96),transparent 30%),
    radial-gradient(circle at 88% 88%,rgba(151,155,164,.22),transparent 38%),
    linear-gradient(145deg,#F4F5F6 0%,#E1E3E6 46%,#CACDD2 100%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:linear-gradient(180deg,#D9DBDF 0%,#CACDD2 58%,#BEC1C7 100%)!important;
  border-left:1px solid rgba(37,40,46,.20)!important;
  box-shadow:-10px 0 30px rgba(20,22,27,.07)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .sideBottom{
  background:linear-gradient(180deg,rgba(204,207,212,.96),rgba(188,192,199,.98))!important;
  border-top-color:rgba(37,40,46,.18)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel,
body:not([data-theme="dark"]):not(.theme-dark) .mobileRefCard,
body:not([data-theme="dark"]):not(.theme-dark) .mobileQuickCards>button{
  background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(238,239,242,.66))!important;
  border-color:rgba(71,75,84,.27)!important;
  box-shadow:0 16px 36px rgba(24,26,31,.12),inset 0 1px 0 rgba(255,255,255,.90)!important;
  backdrop-filter:blur(18px) saturate(118%)!important;-webkit-backdrop-filter:blur(18px) saturate(118%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard,
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch,
body:not([data-theme="dark"]):not(.theme-dark) .finsetCircleBtn,
body:not([data-theme="dark"]):not(.theme-dark) .finsetProfileChip{
  background:rgba(255,255,255,.58)!important;border-color:rgba(55,59,67,.22)!important;
  backdrop-filter:blur(15px)!important;-webkit-backdrop-filter:blur(15px)!important;
}

body[data-theme="dark"]{background:#050507!important}
body[data-theme="dark"] .app,body.theme-dark .app{
  background:#0E0F12!important;border-color:rgba(255,255,255,.07)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.62)!important;
}
body[data-theme="dark"] .main,body.theme-dark .main{
  background:
    radial-gradient(circle at 14% 8%,rgba(102,106,116,.16),transparent 31%),
    radial-gradient(circle at 88% 88%,rgba(255,255,255,.035),transparent 38%),
    linear-gradient(145deg,#202329 0%,#15171B 48%,#0B0C0F 100%)!important;
}
body[data-theme="dark"] .side,body.theme-dark .side{
  background:linear-gradient(180deg,#111318 0%,#0B0C0F 60%,#07080A 100%)!important;
  border-left-color:rgba(255,255,255,.08)!important;
  box-shadow:-12px 0 34px rgba(0,0,0,.28)!important;
}
body[data-theme="dark"] .sideBottom,body.theme-dark .sideBottom{background:rgba(8,9,11,.94)!important;border-top-color:rgba(255,255,255,.07)!important}
body[data-theme="dark"] .card,body.theme-dark .card,
body[data-theme="dark"] .finsetKpi,body.theme-dark .finsetKpi,
body[data-theme="dark"] .finsetPanel,body.theme-dark .finsetPanel,
body[data-theme="dark"] .mobileRefCard,body.theme-dark .mobileRefCard,
body[data-theme="dark"] .mobileQuickCards>button,body.theme-dark .mobileQuickCards>button{
  background:linear-gradient(145deg,rgba(36,39,46,.80),rgba(22,24,29,.72))!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 20px 46px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(20px) saturate(122%)!important;-webkit-backdrop-filter:blur(20px) saturate(122%)!important;
}
body[data-theme="dark"] .globalAssetSearchBox,body.theme-dark .globalAssetSearchBox,
body[data-theme="dark"] .sideUserCard,body.theme-dark .sideUserCard,
body[data-theme="dark"] .moneyModeSwitch,body.theme-dark .moneyModeSwitch,
body[data-theme="dark"] .finsetCircleBtn,body.theme-dark .finsetCircleBtn,
body[data-theme="dark"] .finsetProfileChip,body.theme-dark .finsetProfileChip{
  background:rgba(30,33,39,.70)!important;border-color:rgba(255,255,255,.10)!important;
}

/* Consistent neon spectrum by function. */
.nav button[data-page="home"]{--neon-tone:var(--neon-cyan)}
.nav button[data-page="profile"]{--neon-tone:var(--neon-yellow)}
.nav button[data-page="risk"]{--neon-tone:var(--neon-pink)}
.nav button[data-page="aboutme"]{--neon-tone:var(--neon-violet)}
.nav button[data-page="capital"]{--neon-tone:var(--neon-lime)}
.nav button[data-page="scenarios"]{--neon-tone:var(--neon-orange)}
.nav button[data-page="market"]{--neon-tone:var(--neon-blue)}
.nav button[data-page="live"]{--neon-tone:var(--neon-cyan)}
.nav button[data-page="metals"]{--neon-tone:var(--neon-yellow)}
.nav button[data-page="fundamental"]{--neon-tone:var(--neon-violet)}
.nav button[data-page="recommendations"]{--neon-tone:var(--neon-magenta)}
.nav button[data-page="education"]{--neon-tone:var(--neon-teal)}
.nav button[data-page="consultation"]{--neon-tone:var(--neon-orange)}
.nav button[data-page="messages"]{--neon-tone:var(--neon-pink)}
.nav button[data-page="account"]{--neon-tone:var(--neon-blue)}
.nav button[data-page="doctor"]{--neon-tone:var(--neon-lime)}
.nav button[data-page="about"]{--neon-tone:var(--neon-violet)}
.nav button .ni{
  color:var(--neon-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 13%,var(--palette-card))!important;
  border:1px solid color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 34%,var(--palette-line))!important;
  box-shadow:0 0 13px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 16%,transparent)!important;
}
.nav button:hover{background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 9%,var(--palette-card-soft))!important}
.nav button.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--palette-card) 90%,var(--neon-tone) 10%),color-mix(in srgb,var(--palette-card-soft) 85%,var(--neon-tone) 15%))!important;
  color:var(--palette-text-strong)!important;
  border:1px solid color-mix(in srgb,var(--neon-tone) 58%,var(--palette-line))!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--neon-tone) 18%,transparent)!important;
}
body[data-theme="dark"] .nav button.active,body.theme-dark .nav button.active{
  background:linear-gradient(135deg,rgba(34,37,43,.96),color-mix(in srgb,#17191e 80%,var(--neon-tone) 20%))!important;
  color:#FFF!important;border-color:color-mix(in srgb,var(--neon-tone) 62%,#3A3D44)!important;
  box-shadow:0 0 24px color-mix(in srgb,var(--neon-tone) 21%,transparent)!important;
}
.nav button.active .ni{color:var(--neon-tone)!important;background:color-mix(in srgb,var(--neon-tone) 16%,var(--palette-card))!important}

/* Header utility icons: one role, one neon color. */
.finsetHeaderTools .finsetCircleBtn:nth-child(1){--tool-tone:var(--neon-cyan)}
.finsetHeaderTools .finsetCircleBtn:nth-child(2){--tool-tone:var(--neon-pink)}
.finsetHeaderTools .finsetCircleBtn:nth-child(3){--tool-tone:var(--neon-lime)}
.finsetHeaderTools .finsetCircleBtn:nth-child(4){--tool-tone:var(--neon-violet)}
.finsetHeaderTools .finsetCircleBtn{
  color:var(--tool-tone)!important;border-color:color-mix(in srgb,var(--tool-tone) 40%,var(--palette-line))!important;
  box-shadow:0 0 16px color-mix(in srgb,var(--tool-tone) 11%,transparent)!important;
}
.finsetHeaderTools .finsetCircleBtn:hover{
  background:color-mix(in srgb,var(--tool-tone) 13%,var(--palette-card))!important;
  border-color:color-mix(in srgb,var(--tool-tone) 72%,var(--palette-line))!important;
  box-shadow:0 0 22px color-mix(in srgb,var(--tool-tone) 23%,transparent)!important;
}
.finsetProfileAvatar{background:linear-gradient(135deg,var(--neon-yellow),var(--neon-orange),var(--neon-pink))!important;color:#101114!important;box-shadow:0 0 18px color-mix(in srgb,var(--neon-orange) 25%,transparent)!important}

/* KPI / panel colors are deliberately different while surfaces stay neutral. */
.finsetKpi:nth-child(1){--card-tone:var(--neon-yellow)!important}
.finsetKpi:nth-child(2){--card-tone:var(--neon-cyan)!important}
.finsetKpi:nth-child(3){--card-tone:var(--neon-lime)!important}
.finsetKpi:nth-child(4){--card-tone:var(--neon-magenta)!important}
.finsetKpi::before{background:linear-gradient(90deg,transparent,var(--card-tone),transparent)!important;height:3px!important;opacity:.95!important}
.finsetKpi::after{background:radial-gradient(circle,color-mix(in srgb,var(--card-tone) 18%,transparent),transparent 68%)!important;opacity:.80!important}
.finsetKpi .kpiArrow{color:var(--card-tone)!important;border-color:color-mix(in srgb,var(--card-tone) 56%,var(--palette-line))!important;background:color-mix(in srgb,var(--card-tone) 10%,var(--palette-card))!important;box-shadow:0 0 15px color-mix(in srgb,var(--card-tone) 15%,transparent)!important}
.finsetKpi .finsetDelta{color:var(--card-tone)!important;background:color-mix(in srgb,var(--card-tone) 10%,var(--palette-card))!important}

.finsetMiddle .finsetPanel:nth-child(1){--panel-tone:var(--neon-violet)!important}
.finsetMiddle .finsetPanel:nth-child(2){--panel-tone:var(--neon-lime)!important}
.finsetBottom .finsetPanel:nth-child(1){--panel-tone:var(--neon-blue)!important}
.finsetBottom .finsetPanel:nth-child(2){--panel-tone:var(--neon-orange)!important}
.finsetPanel::before{height:3px!important;background:linear-gradient(90deg,transparent,var(--panel-tone),transparent)!important;opacity:.95!important}
.finsetPanelHead h3::before{background:var(--panel-tone)!important;box-shadow:0 0 16px color-mix(in srgb,var(--panel-tone) 50%,transparent)!important}
.panelArrow{color:var(--panel-tone,var(--neon-cyan))!important;border-color:color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 46%,var(--palette-line))!important}

/* Data visualization uses the full spectrum, in a fixed readable order. */
.finsetLegend span:nth-child(1) i{background:var(--neon-cyan)!important;box-shadow:0 0 9px color-mix(in srgb,var(--neon-cyan) 40%,transparent)!important}
.finsetLegend span:nth-child(2) i{background:var(--neon-violet)!important;box-shadow:0 0 9px color-mix(in srgb,var(--neon-violet) 40%,transparent)!important}
.allocBarGroup .bar.actual{background:linear-gradient(180deg,var(--neon-cyan),var(--neon-blue))!important}
.allocBarGroup .bar.target{background:linear-gradient(180deg,var(--neon-magenta),var(--neon-violet))!important}
.healthLegend span:nth-child(1) i{background:var(--neon-lime)!important}
.healthLegend span:nth-child(2) i{background:var(--neon-cyan)!important}
.healthLegend span:nth-child(3) i{background:var(--neon-pink)!important}
.healthLegend span:nth-child(4) i{background:var(--neon-yellow)!important}
.finsetDonut{
  background:conic-gradient(var(--neon-lime) calc(var(--score)*1%),var(--neon-cyan) 0 74%,var(--neon-violet) 0 86%,var(--neon-pink) 0)!important;
  box-shadow:0 0 28px color-mix(in srgb,var(--neon-cyan) 17%,transparent)!important;
}
.finsetDonut:after{background:color-mix(in srgb,var(--palette-card) 92%,transparent)!important}

/* Small shapes/badges/icons around the product get color, not their container surfaces. */
.marketTablePro tbody tr:nth-child(8n+1) .marketAssetIcon,.marketQuickGrid .marketQuickCard:nth-child(8n+1){--row-tone:var(--neon-cyan)}
.marketTablePro tbody tr:nth-child(8n+2) .marketAssetIcon,.marketQuickGrid .marketQuickCard:nth-child(8n+2){--row-tone:var(--neon-violet)}
.marketTablePro tbody tr:nth-child(8n+3) .marketAssetIcon,.marketQuickGrid .marketQuickCard:nth-child(8n+3){--row-tone:var(--neon-lime)}
.marketTablePro tbody tr:nth-child(8n+4) .marketAssetIcon,.marketQuickGrid .marketQuickCard:nth-child(8n+4){--row-tone:var(--neon-magenta)}
.marketTablePro tbody tr:nth-child(8n+5) .marketAssetIcon{--row-tone:var(--neon-yellow)}
.marketTablePro tbody tr:nth-child(8n+6) .marketAssetIcon{--row-tone:var(--neon-orange)}
.marketTablePro tbody tr:nth-child(8n+7) .marketAssetIcon{--row-tone:var(--neon-blue)}
.marketTablePro tbody tr:nth-child(8n) .marketAssetIcon{--row-tone:var(--neon-pink)}
.marketAssetIcon{
  color:var(--row-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 11%,var(--palette-card))!important;
  border-color:color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 34%,var(--palette-line))!important;
  box-shadow:0 0 12px color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 13%,transparent)!important;
}
.marketQuickCard{border-color:color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 24%,var(--palette-line))!important}
.liveDot{background:var(--neon-lime)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--neon-lime) 12%,transparent),0 0 13px color-mix(in srgb,var(--neon-lime) 44%,transparent)!important}

/* Keep typography modal monochrome with neon selection cues. */
.typographyOverlay{background:rgba(12,13,16,.36)!important}
.typographyModal{background:color-mix(in srgb,var(--palette-card) 93%,transparent)!important;border-color:rgba(128,132,142,.28)!important;box-shadow:0 36px 96px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.32)!important}
.typographyEyebrow{color:var(--neon-cyan)!important}
.typographyPreview{background:linear-gradient(135deg,color-mix(in srgb,var(--neon-violet) 8%,var(--palette-card)),color-mix(in srgb,var(--neon-cyan) 7%,var(--palette-card)))!important;border-color:color-mix(in srgb,var(--neon-violet) 28%,var(--palette-line))!important}
.typographyFontGrid button.active{border-color:var(--neon-cyan)!important;color:var(--palette-text-strong)!important;box-shadow:0 0 16px color-mix(in srgb,var(--neon-cyan) 14%,transparent)!important}
.typographyFontGrid button.active i{color:var(--neon-lime)!important}
.typographySizeGrid button.active{background:linear-gradient(135deg,var(--neon-violet),var(--neon-magenta))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 0 20px color-mix(in srgb,var(--neon-magenta) 24%,transparent)!important}
.typographyModalFoot button{background:linear-gradient(135deg,var(--neon-blue),var(--neon-violet))!important;color:#fff!important;box-shadow:0 0 18px color-mix(in srgb,var(--neon-violet) 18%,transparent)!important}

/* Primary actions stay restrained graphite with a neon edge; semantic states remain semantic. */
.btn.primary{
  background:linear-gradient(135deg,#202329,#101216)!important;color:#fff!important;
  border:1px solid color-mix(in srgb,var(--neon-cyan) 46%,#444851)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18),0 0 15px color-mix(in srgb,var(--neon-cyan) 12%,transparent)!important;
}
body:not([data-theme="dark"]) .btn.primary{background:linear-gradient(135deg,#383B42,#1F2227)!important}
.btn.primary:hover{border-color:var(--neon-cyan)!important;box-shadow:0 10px 26px rgba(0,0,0,.22),0 0 20px color-mix(in srgb,var(--neon-cyan) 22%,transparent)!important}

/* Do not re-tint adjacent cards: contrast comes from neutral luminance + colored micro-accents. */
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(1),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(2),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(3),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(4),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(odd),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(even){
  background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(238,239,242,.66))!important;
  border-color:rgba(71,75,84,.27)!important;
}

/* r8.1 — keep the selected navigation row neutral in Light Mode too. */
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active{
  background:linear-gradient(135deg,rgba(250,250,251,.84),rgba(225,227,231,.82))!important;
  color:var(--palette-text-strong)!important;
  border:1px solid color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 62%,#9EA2AA)!important;
  box-shadow:0 8px 22px rgba(23,25,30,.10),0 0 18px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 16%,transparent)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active .ni{
  color:var(--neon-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 12%,#F7F8FA)!important;
}

/* ======================================================================
   v0.27.7-r8.1 — SEMANTIC LIVE PRICE SURFACES
   Live-price change owns the container background: green for gain,
   red for loss, graphite/neutral for unchanged. This is intentionally
   separate from category identity colors, which stay on icons/shapes.
   ====================================================================== */
.marketQuickCard.liveMoveUp,
.price.liveMoveUp{
  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-positive) 17%,var(--palette-card)),color-mix(in srgb,var(--palette-positive) 8%,var(--palette-card-soft)))!important;
  border-color:color-mix(in srgb,var(--palette-positive) 38%,var(--palette-line))!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--palette-positive) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.34)!important;
}
.marketQuickCard.liveMoveDown,
.price.liveMoveDown{
  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-negative) 18%,var(--palette-card)),color-mix(in srgb,var(--palette-negative) 8%,var(--palette-card-soft)))!important;
  border-color:color-mix(in srgb,var(--palette-negative) 40%,var(--palette-line))!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--palette-negative) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
.marketQuickCard.liveMoveFlat,
.price.liveMoveFlat{
  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-card) 94%,var(--palette-accent) 6%),var(--palette-card-soft))!important;
  border-color:var(--palette-line)!important;
}
.marketTablePro tbody tr.liveMoveUp{
  background:linear-gradient(90deg,color-mix(in srgb,var(--palette-positive) 14%,var(--palette-card)),color-mix(in srgb,var(--palette-positive) 5%,var(--palette-card)) 72%,var(--palette-card))!important;
  box-shadow:inset -3px 0 0 color-mix(in srgb,var(--palette-positive) 72%,transparent)!important;
}
.marketTablePro tbody tr.liveMoveDown{
  background:linear-gradient(90deg,color-mix(in srgb,var(--palette-negative) 15%,var(--palette-card)),color-mix(in srgb,var(--palette-negative) 5%,var(--palette-card)) 72%,var(--palette-card))!important;
  box-shadow:inset -3px 0 0 color-mix(in srgb,var(--palette-negative) 72%,transparent)!important;
}
.marketTablePro tbody tr.liveMoveFlat{
  background:linear-gradient(90deg,color-mix(in srgb,var(--palette-accent) 3%,var(--palette-card)),var(--palette-card))!important;
  box-shadow:inset -3px 0 0 color-mix(in srgb,var(--palette-accent) 32%,transparent)!important;
}
.marketTablePro tbody tr.liveMoveUp:hover{background:color-mix(in srgb,var(--palette-positive) 20%,var(--palette-card))!important}
.marketTablePro tbody tr.liveMoveDown:hover{background:color-mix(in srgb,var(--palette-negative) 21%,var(--palette-card))!important}
.marketTablePro tbody tr.liveMoveFlat:hover{background:color-mix(in srgb,var(--palette-accent) 7%,var(--palette-card))!important}
.marketTablePro tbody tr.liveMoveUp .marketChange,
.marketQuickCard.liveMoveUp em{color:var(--palette-positive)!important;font-weight:900!important}
.marketTablePro tbody tr.liveMoveDown .marketChange,
.marketQuickCard.liveMoveDown em{color:var(--palette-negative)!important;font-weight:900!important}
.marketTablePro tbody tr.liveMoveFlat .marketChange,
.marketQuickCard.liveMoveFlat em{color:var(--palette-muted)!important}
body[data-theme="dark"] .marketQuickCard.liveMoveUp,body.theme-dark .marketQuickCard.liveMoveUp,
body[data-theme="dark"] .price.liveMoveUp,body.theme-dark .price.liveMoveUp{
  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-positive) 18%,#1B1E23),color-mix(in srgb,var(--palette-positive) 8%,#14161A))!important;
}
body[data-theme="dark"] .marketQuickCard.liveMoveDown,body.theme-dark .marketQuickCard.liveMoveDown,
body[data-theme="dark"] .price.liveMoveDown,body.theme-dark .price.liveMoveDown{
  background:linear-gradient(145deg,color-mix(in srgb,var(--palette-negative) 19%,#1B1E23),color-mix(in srgb,var(--palette-negative) 8%,#14161A))!important;
}
body[data-theme="dark"] .marketTablePro tbody tr.liveMoveUp,body.theme-dark .marketTablePro tbody tr.liveMoveUp{
  background:linear-gradient(90deg,color-mix(in srgb,var(--palette-positive) 16%,#1B1E23),color-mix(in srgb,var(--palette-positive) 5%,#181A1F) 72%,#181A1F)!important;
}
body[data-theme="dark"] .marketTablePro tbody tr.liveMoveDown,body.theme-dark .marketTablePro tbody tr.liveMoveDown{
  background:linear-gradient(90deg,color-mix(in srgb,var(--palette-negative) 17%,#1B1E23),color-mix(in srgb,var(--palette-negative) 5%,#181A1F) 72%,#181A1F)!important;
}

/* Market categories keep their own neon identity independently of direction. */
.market-row-fx .marketAssetIcon{--row-tone:var(--neon-blue)!important}
.market-row-metal .marketAssetIcon{--row-tone:var(--neon-yellow)!important}
.market-row-commodity .marketAssetIcon{--row-tone:var(--neon-orange)!important}
.market-row-crypto .marketAssetIcon{--row-tone:var(--neon-violet)!important}
.market-row-tse .marketAssetIcon{--row-tone:var(--neon-cyan)!important}
.market-row-stock .marketAssetIcon{--row-tone:var(--neon-lime)!important}
.market-row-fund .marketAssetIcon{--row-tone:var(--neon-magenta)!important}
.market-row-cert .marketAssetIcon{--row-tone:var(--neon-teal)!important}

/* ======================================================================
   v0.27.7-r8.2 — FROSTED GRAPHITE GLASS (NO CORNER BLOBS)
   Request refinement:
   - monochrome white → gray → black hierarchy remains the base system;
   - neon spectrum stays on icons / shapes / status / data identity;
   - glass uses broad translucent neutral surfaces, not radial corner glows;
   - light and dark keep clear layer separation;
   - semantic live-price surfaces from r8.1 remain unchanged.
   ====================================================================== */

/* Broad middle-layer gradients only: no circular spotlight blobs. */
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:linear-gradient(138deg,#F7F8F9 0%,#E8EAED 44%,#D5D8DD 72%,#C5C9CF 100%)!important;
}
body[data-theme="dark"] .main,body.theme-dark .main{
  background:linear-gradient(138deg,#292C32 0%,#1D1F24 44%,#121317 72%,#090A0D 100%)!important;
}

/* Sidebar reads as its own neutral layer while remaining in the same family. */
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:linear-gradient(180deg,rgba(218,220,224,.96) 0%,rgba(201,204,210,.96) 58%,rgba(185,189,196,.98) 100%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .sideBottom{
  background:rgba(188,192,199,.88)!important;
  backdrop-filter:blur(20px) saturate(112%)!important;-webkit-backdrop-filter:blur(20px) saturate(112%)!important;
}
body[data-theme="dark"] .side,body.theme-dark .side{
  background:linear-gradient(180deg,rgba(20,22,27,.98) 0%,rgba(12,13,16,.98) 58%,rgba(6,7,9,.99) 100%)!important;
}
body[data-theme="dark"] .sideBottom,body.theme-dark .sideBottom{
  background:rgba(7,8,10,.88)!important;
  backdrop-filter:blur(20px) saturate(112%)!important;-webkit-backdrop-filter:blur(20px) saturate(112%)!important;
}

/* True frosted-glass cards: subtle white↔gray transmission, no radial tint blobs. */
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel,
body:not([data-theme="dark"]):not(.theme-dark) .mobileRefCard,
body:not([data-theme="dark"]):not(.theme-dark) .mobileQuickCards>button{
  background:linear-gradient(135deg,rgba(255,255,255,.74) 0%,rgba(248,249,250,.67) 46%,rgba(228,231,235,.58) 100%)!important;
  border:1px solid rgba(81,85,94,.24)!important;
  box-shadow:0 18px 44px rgba(26,28,34,.11),inset 0 1px 0 rgba(255,255,255,.94),inset 0 -1px 0 rgba(101,106,116,.08)!important;
  backdrop-filter:blur(24px) saturate(116%) contrast(103%)!important;-webkit-backdrop-filter:blur(24px) saturate(116%) contrast(103%)!important;
}
body[data-theme="dark"] .card,body.theme-dark .card,
body[data-theme="dark"] .finsetKpi,body.theme-dark .finsetKpi,
body[data-theme="dark"] .finsetPanel,body.theme-dark .finsetPanel,
body[data-theme="dark"] .mobileRefCard,body.theme-dark .mobileRefCard,
body[data-theme="dark"] .mobileQuickCards>button,body.theme-dark .mobileQuickCards>button{
  background:linear-gradient(135deg,rgba(48,51,58,.70) 0%,rgba(30,32,37,.67) 46%,rgba(16,17,20,.61) 100%)!important;
  border:1px solid rgba(255,255,255,.105)!important;
  box-shadow:0 22px 52px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(0,0,0,.18)!important;
  backdrop-filter:blur(26px) saturate(118%) contrast(104%)!important;-webkit-backdrop-filter:blur(26px) saturate(118%) contrast(104%)!important;
}

/* Remove inherited decorative circular glows from dashboard cards. */
.finsetKpi::after{background:none!important;opacity:0!important;display:none!important}

/* Keep panel/KPI identity as crisp neon micro-accents, not tinted card surfaces. */
.finsetKpi::before{
  background:linear-gradient(90deg,color-mix(in srgb,var(--card-tone) 8%,transparent),var(--card-tone),color-mix(in srgb,var(--card-tone) 8%,transparent))!important;
  box-shadow:0 0 13px color-mix(in srgb,var(--card-tone) 30%,transparent)!important;
}
.finsetPanel::before{
  background:linear-gradient(90deg,color-mix(in srgb,var(--panel-tone) 7%,transparent),var(--panel-tone),color-mix(in srgb,var(--panel-tone) 7%,transparent))!important;
  box-shadow:0 0 12px color-mix(in srgb,var(--panel-tone) 27%,transparent)!important;
}

/* Utility glass also follows white/gray transmission instead of colored fills. */
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard,
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch,
body:not([data-theme="dark"]):not(.theme-dark) .finsetCircleBtn,
body:not([data-theme="dark"]):not(.theme-dark) .finsetProfileChip{
  background:linear-gradient(135deg,rgba(255,255,255,.70),rgba(235,237,240,.58))!important;
  backdrop-filter:blur(22px) saturate(112%)!important;-webkit-backdrop-filter:blur(22px) saturate(112%)!important;
}
body[data-theme="dark"] .globalAssetSearchBox,body.theme-dark .globalAssetSearchBox,
body[data-theme="dark"] .sideUserCard,body.theme-dark .sideUserCard,
body[data-theme="dark"] .moneyModeSwitch,body.theme-dark .moneyModeSwitch,
body[data-theme="dark"] .finsetCircleBtn,body.theme-dark .finsetCircleBtn,
body[data-theme="dark"] .finsetProfileChip,body.theme-dark .finsetProfileChip{
  background:linear-gradient(135deg,rgba(42,44,50,.72),rgba(19,20,24,.66))!important;
  backdrop-filter:blur(22px) saturate(112%)!important;-webkit-backdrop-filter:blur(22px) saturate(112%)!important;
}

/* Typography modal follows the same frosted treatment. */
.typographyModal{
  background:linear-gradient(135deg,color-mix(in srgb,var(--palette-card) 91%,transparent),color-mix(in srgb,var(--palette-card-soft) 78%,transparent))!important;
  backdrop-filter:blur(30px) saturate(120%)!important;-webkit-backdrop-filter:blur(30px) saturate(120%)!important;
}
.typographyPreview{
  background:linear-gradient(135deg,color-mix(in srgb,var(--palette-card) 94%,var(--neon-violet) 6%),color-mix(in srgb,var(--palette-card-soft) 92%,var(--neon-cyan) 8%))!important;
}

/* Specificity seal: neutral frosted surfaces win over earlier per-card experiment rules. */
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(1),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(2),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(3),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(4),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(odd),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(even){
  background:linear-gradient(135deg,rgba(255,255,255,.74) 0%,rgba(248,249,250,.67) 46%,rgba(228,231,235,.58) 100%)!important;
  border-color:rgba(81,85,94,.24)!important;
}
body[data-theme="dark"] .finsetKpi:nth-child(1),body.theme-dark .finsetKpi:nth-child(1),
body[data-theme="dark"] .finsetKpi:nth-child(2),body.theme-dark .finsetKpi:nth-child(2),
body[data-theme="dark"] .finsetKpi:nth-child(3),body.theme-dark .finsetKpi:nth-child(3),
body[data-theme="dark"] .finsetKpi:nth-child(4),body.theme-dark .finsetKpi:nth-child(4),
body[data-theme="dark"] .finsetPanel:nth-of-type(odd),body.theme-dark .finsetPanel:nth-of-type(odd),
body[data-theme="dark"] .finsetPanel:nth-of-type(even),body.theme-dark .finsetPanel:nth-of-type(even){
  background:linear-gradient(135deg,rgba(48,51,58,.70) 0%,rgba(30,32,37,.67) 46%,rgba(16,17,20,.61) 100%)!important;
  border-color:rgba(255,255,255,.105)!important;
}

/* ======================================================================
   v0.27.7-r8.3 — LAYER CONTRAST + SOLID NEON ICONS
   User-directed refinement:
   - Light: outer/side layers move close to white; center work layer gets
     visibly grayer so glass cards read as separate objects.
   - Dark: outer/application shell is lifted to a lighter graphite while
     the center work layer is deliberately darker for stronger separation.
   - Side rail stays brighter than the center layer in BOTH themes.
   - Icon containers are solid vivid neon; the actual glyph stays a clean
     light outline/negative mark. Color carries identity, not card fill.
   - No radial/corner blob gradients are introduced.
   ====================================================================== */

/* ---------- LIGHT: white side shell + distinctly gray work layer ---------- */
body:not([data-theme="dark"]):not(.theme-dark){
  background:#D8DBE0!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .app{
  background:#FAFBFC!important;
  border-color:rgba(45,49,57,.16)!important;
  box-shadow:0 30px 82px rgba(20,23,29,.17)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:linear-gradient(142deg,#D8DBE0 0%,#C9CDD3 44%,#BBC0C7 72%,#D1D4D9 100%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFBFC 52%,#F1F3F5 100%)!important;
  border-left-color:rgba(50,54,62,.16)!important;
  box-shadow:-10px 0 28px rgba(31,34,40,.06)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .sideBottom{
  background:rgba(250,251,252,.94)!important;
  border-top-color:rgba(50,54,62,.13)!important;
}

/* cards stay bright and frosted against the stronger gray middle layer */
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel,
body:not([data-theme="dark"]):not(.theme-dark) .mobileRefCard,
body:not([data-theme="dark"]):not(.theme-dark) .mobileQuickCards>button{
  background:linear-gradient(135deg,rgba(255,255,255,.90) 0%,rgba(250,251,252,.83) 48%,rgba(238,240,243,.76) 100%)!important;
  border-color:rgba(74,78,87,.25)!important;
  box-shadow:0 18px 42px rgba(25,28,34,.13),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(88,93,103,.08)!important;
  backdrop-filter:blur(25px) saturate(112%) contrast(104%)!important;
  -webkit-backdrop-filter:blur(25px) saturate(112%) contrast(104%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(1),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(2),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(3),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(4),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(odd),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(even){
  background:linear-gradient(135deg,rgba(255,255,255,.90) 0%,rgba(250,251,252,.83) 48%,rgba(238,240,243,.76) 100%)!important;
  border-color:rgba(74,78,87,.25)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard,
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch,
body:not([data-theme="dark"]):not(.theme-dark) .finsetProfileChip{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(62,66,74,.16)!important;
}

/* ---------- DARK: brighter outer shell/side rail + darker center ---------- */
body[data-theme="dark"],body.theme-dark{
  background:#242830!important;
}
body[data-theme="dark"] .app,body.theme-dark .app{
  background:#30353D!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.48)!important;
}
body[data-theme="dark"] .main,body.theme-dark .main{
  background:linear-gradient(142deg,#121419 0%,#0A0C10 46%,#07080B 72%,#111319 100%)!important;
}
body[data-theme="dark"] .side,body.theme-dark .side{
  background:linear-gradient(180deg,#343A43 0%,#2B3038 54%,#242931 100%)!important;
  border-left-color:rgba(255,255,255,.13)!important;
  box-shadow:-12px 0 34px rgba(0,0,0,.24)!important;
}
body[data-theme="dark"] .sideBottom,body.theme-dark .sideBottom{
  background:rgba(40,45,53,.94)!important;
  border-top-color:rgba(255,255,255,.11)!important;
}
body[data-theme="dark"] .card,body.theme-dark .card,
body[data-theme="dark"] .finsetKpi,body.theme-dark .finsetKpi,
body[data-theme="dark"] .finsetPanel,body.theme-dark .finsetPanel,
body[data-theme="dark"] .mobileRefCard,body.theme-dark .mobileRefCard,
body[data-theme="dark"] .mobileQuickCards>button,body.theme-dark .mobileQuickCards>button{
  background:linear-gradient(135deg,rgba(37,41,48,.78) 0%,rgba(25,28,34,.74) 48%,rgba(16,18,23,.72) 100%)!important;
  border-color:rgba(255,255,255,.115)!important;
  box-shadow:0 24px 54px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.085),inset 0 -1px 0 rgba(0,0,0,.24)!important;
}
body[data-theme="dark"] .finsetKpi:nth-child(1),body.theme-dark .finsetKpi:nth-child(1),
body[data-theme="dark"] .finsetKpi:nth-child(2),body.theme-dark .finsetKpi:nth-child(2),
body[data-theme="dark"] .finsetKpi:nth-child(3),body.theme-dark .finsetKpi:nth-child(3),
body[data-theme="dark"] .finsetKpi:nth-child(4),body.theme-dark .finsetKpi:nth-child(4),
body[data-theme="dark"] .finsetPanel:nth-of-type(odd),body.theme-dark .finsetPanel:nth-of-type(odd),
body[data-theme="dark"] .finsetPanel:nth-of-type(even),body.theme-dark .finsetPanel:nth-of-type(even){
  background:linear-gradient(135deg,rgba(37,41,48,.78) 0%,rgba(25,28,34,.74) 48%,rgba(16,18,23,.72) 100%)!important;
  border-color:rgba(255,255,255,.115)!important;
}
body[data-theme="dark"] .globalAssetSearchBox,body.theme-dark .globalAssetSearchBox,
body[data-theme="dark"] .sideUserCard,body.theme-dark .sideUserCard,
body[data-theme="dark"] .moneyModeSwitch,body.theme-dark .moneyModeSwitch,
body[data-theme="dark"] .finsetProfileChip,body.theme-dark .finsetProfileChip{
  background:rgba(55,61,71,.74)!important;
  border-color:rgba(255,255,255,.12)!important;
}

/* ---------- SOLID NEON ICON SYSTEM ---------- */
/* Sidebar navigation: solid color tile, light outlined glyph. */
.nav button .ni{
  color:#FFFFFF!important;
  background:var(--neon-tone,var(--neon-cyan))!important;
  border:1px solid color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 76%,#FFFFFF 24%)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 28%,transparent),0 0 16px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 20%,transparent)!important;
}
.nav button.active .ni,
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active .ni,
body[data-theme="dark"] .nav button.active .ni,body.theme-dark .nav button.active .ni{
  color:#FFFFFF!important;
  background:var(--neon-tone,var(--neon-cyan))!important;
}
.nav button .ni svg,.nav button .ni svg *{
  stroke:currentColor;
}

/* Top utility icons: each one keeps its assigned neon identity. */
.finsetHeaderTools .finsetCircleBtn{
  color:#FFFFFF!important;
  background:var(--tool-tone,var(--neon-cyan))!important;
  border-color:color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 70%,#FFFFFF 30%)!important;
  box-shadow:0 5px 15px color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 28%,transparent),0 0 17px color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 18%,transparent)!important;
}
.finsetHeaderTools .finsetCircleBtn:hover{
  color:#FFFFFF!important;
  background:color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 86%,#FFFFFF 14%)!important;
  border-color:#FFFFFF!important;
  transform:translateY(-1px);
}
.finsetHeaderTools .finsetCircleBtn svg{fill:none!important;stroke:currentColor!important}

/* KPI and panel action icons become solid identity chips too. */
.finsetKpi .kpiArrow{
  color:#FFFFFF!important;
  background:var(--card-tone,var(--neon-cyan))!important;
  border-color:color-mix(in srgb,var(--card-tone,var(--neon-cyan)) 74%,#FFFFFF 26%)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--card-tone,var(--neon-cyan)) 25%,transparent)!important;
}
.panelArrow{
  color:#FFFFFF!important;
  background:var(--panel-tone,var(--neon-cyan))!important;
  border-color:color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 74%,#FFFFFF 26%)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 25%,transparent)!important;
}

/* Market/category icons: solid identity color; text/glyph is negative white. */
.marketAssetIcon{
  color:#FFFFFF!important;
  background:var(--row-tone,var(--neon-cyan))!important;
  border-color:color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 76%,#FFFFFF 24%)!important;
  box-shadow:0 5px 13px color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 24%,transparent),0 0 14px color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 15%,transparent)!important;
}

/* Small semantic/feature badges can be vivid, while cards remain neutral. */
.finsetPanelHead h3::before,.liveDot{
  border:1px solid rgba(255,255,255,.72)!important;
}

/* Typography launcher is a real solid icon, while modal remains neutral glass. */
#desktopTypographyButton{
  color:#FFFFFF!important;
  background:var(--neon-lime)!important;
  border-color:color-mix(in srgb,var(--neon-lime) 72%,#FFFFFF 28%)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--neon-lime) 25%,transparent),0 0 16px color-mix(in srgb,var(--neon-lime) 16%,transparent)!important;
}
#desktopThemeQuick{
  color:#FFFFFF!important;
  background:var(--neon-violet)!important;
  border-color:color-mix(in srgb,var(--neon-violet) 72%,#FFFFFF 28%)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--neon-violet) 25%,transparent),0 0 16px color-mix(in srgb,var(--neon-violet) 16%,transparent)!important;
}

/* Live price semantics remain authoritative; only category icons are solid. */
.marketQuickCard.liveMoveUp,.price.liveMoveUp,
.marketQuickCard.liveMoveDown,.price.liveMoveDown,
.marketQuickCard.liveMoveFlat,.price.liveMoveFlat{
  backdrop-filter:blur(24px) saturate(118%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(118%)!important;
}

/* r8.3 specificity seal — every visible action icon is a solid color tile. */
.finsetHeaderTools #finsetSearchBtn{--tool-tone:var(--neon-cyan)!important}
.finsetHeaderTools button[data-jump="messages"]{--tool-tone:var(--neon-pink)!important}
.finsetHeaderTools #desktopTypographyButton{--tool-tone:var(--neon-lime)!important}
.finsetHeaderTools #desktopThemeQuick{--tool-tone:var(--neon-violet)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetHeaderTools .finsetCircleBtn,
body[data-theme="dark"] .finsetHeaderTools .finsetCircleBtn,
body.theme-dark .finsetHeaderTools .finsetCircleBtn{
  color:#FFFFFF!important;
  background:var(--tool-tone,var(--neon-cyan))!important;
  border-color:color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 72%,#FFFFFF 28%)!important;
  box-shadow:0 5px 15px color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 28%,transparent),0 0 17px color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 18%,transparent)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel .panelArrow,
body[data-theme="dark"] .finsetPanel .panelArrow,
body.theme-dark .finsetPanel .panelArrow{
  color:#FFFFFF!important;
  background:var(--panel-tone,var(--neon-cyan))!important;
  border-color:color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 74%,#FFFFFF 26%)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 25%,transparent)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .finsetPeriodIcon,
body[data-theme="dark"] .finsetPeriodIcon,
body.theme-dark .finsetPeriodIcon{
  color:#FFFFFF!important;
  background:var(--neon-blue)!important;
  border-color:color-mix(in srgb,var(--neon-blue) 72%,#FFFFFF 28%)!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--neon-blue) 24%,transparent)!important;
}
.finsetPeriodIcon svg,.finsetPanel .panelArrow svg{fill:none!important;stroke:currentColor!important}

/* ======================================================================
   v0.27.7-r8.4 — GRAPHITE PASTEL + STRONG LIGHT LAYER CONTRAST
   User-directed refinement:
   - Replaces the neon spectrum with a coordinated pastel spectrum.
   - Icons remain solid-filled identity tiles; the glyph itself stays an
     outlined/hollow graphite mark for crisp recognition.
   - Light theme deliberately separates three neutral layers:
       outer canvas = soft silver gray,
       middle work layer = noticeably deeper gray,
       sidebar/shell = near-white.
   - Dark theme keeps the center darkest and lifts the shell/sidebar,
     preserving strong layer separation while pastel colors stay soft.
   - Glass cards remain neutral; color is reserved for identity/meaning.
   ====================================================================== */

/* ---------- PASTEL SPECTRUM: same semantic map, calmer chroma ---------- */
/* ---------- LIGHT LAYERS: silver outside -> gray center -> white side ---------- */
body:not([data-theme="dark"]):not(.theme-dark){
  background:#E4E7EB!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .app{
  background:#FAFBFC!important;
  border-color:rgba(50,55,64,.15)!important;
  box-shadow:0 30px 78px rgba(30,34,41,.15)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:linear-gradient(145deg,#D4D8DE 0%,#C5CAD1 48%,#B9BFC7 76%,#CDD2D8 100%)!important;
  border-inline-color:rgba(62,67,76,.11)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 48%,#F4F5F7 100%)!important;
  border-left-color:rgba(55,60,68,.15)!important;
  box-shadow:-12px 0 30px rgba(27,31,37,.065)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .sideBottom{
  background:rgba(250,251,252,.97)!important;
  border-top-color:rgba(55,60,68,.12)!important;
}

/* neutral white frosted cards read clearly against the stronger gray center */
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel,
body:not([data-theme="dark"]):not(.theme-dark) .mobileRefCard,
body:not([data-theme="dark"]):not(.theme-dark) .mobileQuickCards>button,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(1),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(2),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(3),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(4),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(odd),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(even){
  background:linear-gradient(135deg,rgba(255,255,255,.91) 0%,rgba(250,251,252,.86) 52%,rgba(241,243,246,.79) 100%)!important;
  border-color:rgba(68,73,82,.23)!important;
  box-shadow:0 18px 42px rgba(28,32,38,.12),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(78,84,94,.07)!important;
  backdrop-filter:blur(26px) saturate(108%) contrast(103%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(108%) contrast(103%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard,
body:not([data-theme="dark"]):not(.theme-dark) .moneyModeSwitch,
body:not([data-theme="dark"]):not(.theme-dark) .finsetProfileChip{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(60,65,74,.14)!important;
}

/* ---------- DARK LAYERS: lifted shell/side -> deliberately dark center ---------- */
body[data-theme="dark"],body.theme-dark{background:#30353D!important}
body[data-theme="dark"] .app,body.theme-dark .app{
  background:#383E47!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.45)!important;
}
body[data-theme="dark"] .main,body.theme-dark .main{
  background:linear-gradient(145deg,#15181D 0%,#0C0E12 50%,#080A0D 78%,#12151A 100%)!important;
}
body[data-theme="dark"] .side,body.theme-dark .side{
  background:linear-gradient(180deg,#414852 0%,#363C45 52%,#2F353D 100%)!important;
  border-left-color:rgba(255,255,255,.14)!important;
  box-shadow:-12px 0 34px rgba(0,0,0,.23)!important;
}
body[data-theme="dark"] .sideBottom,body.theme-dark .sideBottom{
  background:rgba(52,58,67,.96)!important;
  border-top-color:rgba(255,255,255,.11)!important;
}
body[data-theme="dark"] .card,body.theme-dark .card,
body[data-theme="dark"] .finsetKpi,body.theme-dark .finsetKpi,
body[data-theme="dark"] .finsetPanel,body.theme-dark .finsetPanel,
body[data-theme="dark"] .mobileRefCard,body.theme-dark .mobileRefCard,
body[data-theme="dark"] .mobileQuickCards>button,body.theme-dark .mobileQuickCards>button,
body[data-theme="dark"] .finsetKpi:nth-child(1),body.theme-dark .finsetKpi:nth-child(1),
body[data-theme="dark"] .finsetKpi:nth-child(2),body.theme-dark .finsetKpi:nth-child(2),
body[data-theme="dark"] .finsetKpi:nth-child(3),body.theme-dark .finsetKpi:nth-child(3),
body[data-theme="dark"] .finsetKpi:nth-child(4),body.theme-dark .finsetKpi:nth-child(4),
body[data-theme="dark"] .finsetPanel:nth-of-type(odd),body.theme-dark .finsetPanel:nth-of-type(odd),
body[data-theme="dark"] .finsetPanel:nth-of-type(even),body.theme-dark .finsetPanel:nth-of-type(even){
  background:linear-gradient(135deg,rgba(39,43,50,.80) 0%,rgba(27,30,36,.76) 50%,rgba(18,20,25,.74) 100%)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 24px 54px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.22)!important;
}
body[data-theme="dark"] .globalAssetSearchBox,body.theme-dark .globalAssetSearchBox,
body[data-theme="dark"] .sideUserCard,body.theme-dark .sideUserCard,
body[data-theme="dark"] .moneyModeSwitch,body.theme-dark .moneyModeSwitch,
body[data-theme="dark"] .finsetProfileChip,body.theme-dark .finsetProfileChip{
  background:rgba(62,69,80,.80)!important;
  border-color:rgba(255,255,255,.13)!important;
}

/* ---------- SOLID PASTEL ICONS; GLYPH ITSELF REMAINS OUTLINED ---------- */
.nav button .ni,
.finsetHeaderTools .finsetCircleBtn,
.finsetKpi .kpiArrow,
.finsetPanel .panelArrow,
.finsetPeriodIcon,
.marketAssetIcon{
  box-shadow:0 5px 14px color-mix(in srgb,var(--neon-tone,var(--tool-tone,var(--card-tone,var(--panel-tone,var(--row-tone,var(--neon-cyan)))))) 16%,transparent)!important;
}
.nav button .ni{
  background:var(--neon-tone,var(--neon-cyan))!important;
  color:#293039!important;
  border-color:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 82%,#FFFFFF 18%)!important;
}
.finsetHeaderTools .finsetCircleBtn{
  background:var(--tool-tone,var(--neon-cyan))!important;
  color:#283039!important;
  border-color:color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 82%,#FFFFFF 18%)!important;
}
.finsetKpi .kpiArrow{
  background:var(--card-tone,var(--neon-cyan))!important;
  color:#283039!important;
  border-color:color-mix(in srgb,var(--card-tone,var(--neon-cyan)) 82%,#FFFFFF 18%)!important;
}
.finsetPanel .panelArrow{
  background:var(--panel-tone,var(--neon-cyan))!important;
  color:#283039!important;
  border-color:color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 82%,#FFFFFF 18%)!important;
}
.finsetPeriodIcon{
  background:var(--neon-blue)!important;
  color:#283039!important;
  border-color:color-mix(in srgb,var(--neon-blue) 82%,#FFFFFF 18%)!important;
}
.marketAssetIcon{
  background:var(--row-tone,var(--neon-cyan))!important;
  color:#283039!important;
  border-color:color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 82%,#FFFFFF 18%)!important;
}
body[data-theme="dark"] .nav button .ni,body.theme-dark .nav button .ni,
body[data-theme="dark"] .finsetHeaderTools .finsetCircleBtn,body.theme-dark .finsetHeaderTools .finsetCircleBtn,
body[data-theme="dark"] .finsetKpi .kpiArrow,body.theme-dark .finsetKpi .kpiArrow,
body[data-theme="dark"] .finsetPanel .panelArrow,body.theme-dark .finsetPanel .panelArrow,
body[data-theme="dark"] .finsetPeriodIcon,body.theme-dark .finsetPeriodIcon,
body[data-theme="dark"] .marketAssetIcon,body.theme-dark .marketAssetIcon{
  color:#1E242B!important;
  box-shadow:0 5px 14px rgba(0,0,0,.22)!important;
}
.nav button .ni svg,.nav button .ni svg *,
.finsetHeaderTools .finsetCircleBtn svg,.finsetHeaderTools .finsetCircleBtn svg *,
.finsetKpi .kpiArrow svg,.finsetKpi .kpiArrow svg *,
.finsetPanel .panelArrow svg,.finsetPanel .panelArrow svg *,
.finsetPeriodIcon svg,.finsetPeriodIcon svg *,
.marketAssetIcon svg,.marketAssetIcon svg *{
  fill:none!important;
  stroke:currentColor!important;
}

/* Pastel identity should not turn into glow. Keep accents calm and readable. */
.finsetKpi::before,.finsetPanel::before{opacity:.72!important}
.finsetKpi::after{display:none!important;content:none!important}
.finsetPanelHead h3::before,
.finsetLegend i,.healthLegend i,.liveDot{
  box-shadow:none!important;
}
.finsetDonut{box-shadow:0 8px 22px rgba(28,32,38,.08)!important}
body[data-theme="dark"] .finsetDonut,body.theme-dark .finsetDonut{box-shadow:0 10px 26px rgba(0,0,0,.24)!important}

/* Active navigation remains neutral; pastel tile carries the section identity. */
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active{
  background:rgba(246,247,249,.97)!important;
  border-color:rgba(88,94,104,.22)!important;
  box-shadow:0 7px 18px rgba(28,32,38,.075)!important;
}
body[data-theme="dark"] .nav button.active,body.theme-dark .nav button.active{
  background:rgba(43,48,56,.96)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.22)!important;
}

/* Typography UI follows the same pastel language without neon glow. */
.typographyEyebrow{color:#6A8790!important}
.typographyPreview{
  background:linear-gradient(135deg,color-mix(in srgb,var(--neon-violet) 12%,var(--palette-card)),color-mix(in srgb,var(--neon-cyan) 12%,var(--palette-card)))!important;
  border-color:color-mix(in srgb,var(--neon-violet) 34%,var(--palette-line))!important;
}
.typographyFontGrid button.active{border-color:var(--neon-cyan)!important;box-shadow:none!important}
.typographyFontGrid button.active i{color:#587B66!important}
.typographySizeGrid button.active{background:linear-gradient(135deg,var(--neon-violet),var(--neon-magenta))!important;color:#252A31!important;box-shadow:none!important}
.typographyModalFoot button{background:linear-gradient(135deg,var(--neon-blue),var(--neon-violet))!important;color:#252A31!important;box-shadow:none!important}

/* Live prices: pastel semantic fill, but still unambiguous. */
.marketQuickCard.liveMoveUp,.price.liveMoveUp{
  background:linear-gradient(135deg,rgba(221,242,228,.96),rgba(198,232,210,.90))!important;
  border-color:#8FC8A2!important;
}
.marketQuickCard.liveMoveDown,.price.liveMoveDown{
  background:linear-gradient(135deg,rgba(247,221,225,.97),rgba(238,198,205,.91))!important;
  border-color:#D69AA3!important;
}
.marketQuickCard.liveMoveFlat,.price.liveMoveFlat{
  background:linear-gradient(135deg,rgba(247,248,250,.92),rgba(228,231,235,.88))!important;
  border-color:rgba(90,95,105,.23)!important;
}
body[data-theme="dark"] .marketQuickCard.liveMoveUp,body.theme-dark .marketQuickCard.liveMoveUp,
body[data-theme="dark"] .price.liveMoveUp,body.theme-dark .price.liveMoveUp{
  background:linear-gradient(135deg,#284136,#21372E)!important;border-color:#638F72!important;
}
body[data-theme="dark"] .marketQuickCard.liveMoveDown,body.theme-dark .marketQuickCard.liveMoveDown,
body[data-theme="dark"] .price.liveMoveDown,body.theme-dark .price.liveMoveDown{
  background:linear-gradient(135deg,#4A2D33,#3E262B)!important;border-color:#97616A!important;
}
body[data-theme="dark"] .marketQuickCard.liveMoveFlat,body.theme-dark .marketQuickCard.liveMoveFlat,
body[data-theme="dark"] .price.liveMoveFlat,body.theme-dark .price.liveMoveFlat{
  background:linear-gradient(135deg,#2E333A,#252A30)!important;border-color:rgba(255,255,255,.11)!important;
}

/* ======================================================================
   v0.27.7-r8.5 — PEARL SLATE + MINERAL PASTEL
   - Stronger three-layer contrast in light mode.
   - Mature pastel identity colors (powder blue, sage, mauve, apricot,
     muted teal, butter) instead of candy/neon accents.
   - Create Money is temporarily removed from the visible product UI.
   - Dashboard label shortened to «داشبورد».
   ====================================================================== */

.moneyModeSwitchDisabled{display:none!important}

:root,body:not([data-theme="dark"]):not(.theme-dark){
  /* Mineral-pastel identity spectrum */

}
/* ---------------- LIGHT: clear separation of canvas / work layer / sidebar ---------------- */
body:not([data-theme="dark"]):not(.theme-dark){
  background:#E9EDF2!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .app{
  background:#F6F8FA!important;
  border:1px solid rgba(69,76,87,.16)!important;
  box-shadow:0 30px 78px rgba(39,46,56,.15)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  /* deliberately darker center; no radial corner blobs */
  background:linear-gradient(180deg,#C3CAD3 0%,#B9C1CB 48%,#C4CBD4 100%)!important;
  border-left:1px solid rgba(72,79,90,.12)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 56%,#F5F7F9 100%)!important;
  border-left:1px solid rgba(76,83,94,.16)!important;
  box-shadow:-12px 0 30px rgba(42,48,57,.08)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .sideBottom{
  background:rgba(250,251,252,.98)!important;
  border-top-color:rgba(75,82,93,.13)!important;
}

/* Frosted cards: near-white against the darker slate middle layer. */
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel,
body:not([data-theme="dark"]):not(.theme-dark) .mobileRefCard,
body:not([data-theme="dark"]):not(.theme-dark) .mobileQuickCards>button,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(1),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(2),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(3),
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(4),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(odd),
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel:nth-of-type(even){
  background:linear-gradient(145deg,rgba(255,255,255,.94) 0%,rgba(248,250,252,.89) 54%,rgba(239,242,246,.84) 100%)!important;
  border-color:rgba(66,73,84,.25)!important;
  box-shadow:0 17px 38px rgba(37,43,52,.14),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(73,80,91,.08)!important;
  backdrop-filter:blur(24px) saturate(104%) contrast(104%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(104%) contrast(104%)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard,
body:not([data-theme="dark"]):not(.theme-dark) .finsetProfileChip{
  background:rgba(255,255,255,.97)!important;
  border-color:rgba(72,79,90,.15)!important;
  box-shadow:0 7px 18px rgba(39,46,56,.055)!important;
}

/* ---------------- DARK: brighter shell/sidebar, darker middle work layer ---------------- */
body[data-theme="dark"],body.theme-dark{
  background:#3D434C!important;
}
body[data-theme="dark"] .app,body.theme-dark .app{
  background:#4A515B!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.46)!important;
}
body[data-theme="dark"] .main,body.theme-dark .main{
  background:linear-gradient(180deg,#171A1F 0%,#0E1115 50%,#15181D 100%)!important;
  border-left:1px solid rgba(255,255,255,.08)!important;
}
body[data-theme="dark"] .side,body.theme-dark .side{
  background:linear-gradient(180deg,#555D68 0%,#484F59 55%,#414851 100%)!important;
  border-left-color:rgba(255,255,255,.16)!important;
  box-shadow:-13px 0 32px rgba(0,0,0,.24)!important;
}
body[data-theme="dark"] .sideBottom,body.theme-dark .sideBottom{
  background:rgba(73,80,90,.97)!important;
  border-top-color:rgba(255,255,255,.12)!important;
}
body[data-theme="dark"] .card,body.theme-dark .card,
body[data-theme="dark"] .finsetKpi,body.theme-dark .finsetKpi,
body[data-theme="dark"] .finsetPanel,body.theme-dark .finsetPanel,
body[data-theme="dark"] .mobileRefCard,body.theme-dark .mobileRefCard,
body[data-theme="dark"] .mobileQuickCards>button,body.theme-dark .mobileQuickCards>button,
body[data-theme="dark"] .finsetKpi:nth-child(1),body.theme-dark .finsetKpi:nth-child(1),
body[data-theme="dark"] .finsetKpi:nth-child(2),body.theme-dark .finsetKpi:nth-child(2),
body[data-theme="dark"] .finsetKpi:nth-child(3),body.theme-dark .finsetKpi:nth-child(3),
body[data-theme="dark"] .finsetKpi:nth-child(4),body.theme-dark .finsetKpi:nth-child(4),
body[data-theme="dark"] .finsetPanel:nth-of-type(odd),body.theme-dark .finsetPanel:nth-of-type(odd),
body[data-theme="dark"] .finsetPanel:nth-of-type(even),body.theme-dark .finsetPanel:nth-of-type(even){
  background:linear-gradient(145deg,rgba(48,53,61,.84) 0%,rgba(32,36,43,.80) 55%,rgba(23,26,31,.78) 100%)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:0 22px 52px rgba(0,0,0,.41),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body[data-theme="dark"] .globalAssetSearchBox,body.theme-dark .globalAssetSearchBox,
body[data-theme="dark"] .sideUserCard,body.theme-dark .sideUserCard,
body[data-theme="dark"] .finsetProfileChip,body.theme-dark .finsetProfileChip{
  background:rgba(82,90,101,.88)!important;
  border-color:rgba(255,255,255,.14)!important;
}

/* Pastel tiles stay solid; graphite glyphs keep them restrained and legible. */
.nav button .ni,
.finsetHeaderTools .finsetCircleBtn,
.finsetKpi .kpiArrow,
.finsetPanel .panelArrow,
.finsetPeriodIcon,
.marketAssetIcon{
  color:#27303A!important;
  box-shadow:0 5px 13px rgba(43,50,60,.12)!important;
}
body[data-theme="dark"] .nav button .ni,body.theme-dark .nav button .ni,
body[data-theme="dark"] .finsetHeaderTools .finsetCircleBtn,body.theme-dark .finsetHeaderTools .finsetCircleBtn,
body[data-theme="dark"] .finsetKpi .kpiArrow,body.theme-dark .finsetKpi .kpiArrow,
body[data-theme="dark"] .finsetPanel .panelArrow,body.theme-dark .finsetPanel .panelArrow,
body[data-theme="dark"] .finsetPeriodIcon,body.theme-dark .finsetPeriodIcon,
body[data-theme="dark"] .marketAssetIcon,body.theme-dark .marketAssetIcon{
  color:#20272F!important;
  box-shadow:0 5px 13px rgba(0,0,0,.20)!important;
}

/* Slightly stronger neutral active row so color tiles carry identity, not the whole row. */
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active{
  background:#F2F4F7!important;
  border-color:rgba(69,76,87,.25)!important;
  box-shadow:0 8px 20px rgba(37,43,52,.08)!important;
}
body[data-theme="dark"] .nav button.active,body.theme-dark .nav button.active{
  background:rgba(55,61,70,.98)!important;
  border-color:rgba(255,255,255,.13)!important;
}

/* Keep the semantic price language from r8.4: green up, red down, neutral flat. */
.marketQuickCard.liveMoveUp,.price.liveMoveUp{
  background:linear-gradient(135deg,rgba(222,238,226,.97),rgba(199,224,207,.92))!important;
  border-color:#86B694!important;
}
.marketQuickCard.liveMoveDown,.price.liveMoveDown{
  background:linear-gradient(135deg,rgba(243,220,223,.97),rgba(232,196,202,.92))!important;
  border-color:#C98B94!important;
}
.marketQuickCard.liveMoveFlat,.price.liveMoveFlat{
  background:linear-gradient(135deg,rgba(248,249,250,.95),rgba(226,230,234,.91))!important;
  border-color:rgba(80,87,98,.24)!important;
}

/* ======================================================================
   v0.27.7-r8.6 — PEARL SLATE + ORIGINAL NEON OUTLINE ICONS
   User-directed refinement:
   - Keeps the r8.5 neutral/high-contrast shell, center layer, sidebar,
     frosted cards, hidden Create Money UI, and short «داشبورد» label.
   - Restores the original vivid r8 neon spectrum ONLY for identity cues.
   - Converts visible identity/action icon tiles back to hollow/outlined
     neon treatment: transparent/tinted center, colored border + glyph.
   - SVG glyphs remain line icons (fill:none) for a clean financial UI.
   ====================================================================== */

/* Original r8 neon spectrum. Neutral surfaces stay exactly as r8.5. */
/* Hollow neon icon language — color lives in the outline/glyph, not fill. */
.nav button .ni,
.nav button.active .ni,
body:not([data-theme="dark"]):not(.theme-dark) .nav button.active .ni,
body[data-theme="dark"] .nav button.active .ni,
body.theme-dark .nav button.active .ni{
  color:var(--neon-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 7%,transparent)!important;
  border:1.5px solid color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 78%,var(--palette-line))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 5%,transparent),0 0 15px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 16%,transparent)!important;
}
.nav button:hover .ni,
.nav button.active .ni{
  background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 11%,transparent)!important;
  border-color:var(--neon-tone,var(--neon-cyan))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 7%,transparent),0 0 20px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 24%,transparent)!important;
}

.finsetHeaderTools #finsetSearchBtn{--tool-tone:var(--neon-cyan)!important}
.finsetHeaderTools button[data-jump="messages"]{--tool-tone:var(--neon-pink)!important}
.finsetHeaderTools #desktopTypographyButton{--tool-tone:var(--neon-lime)!important}
.finsetHeaderTools #desktopThemeQuick{--tool-tone:var(--neon-violet)!important}
.finsetHeaderTools .finsetCircleBtn,
body:not([data-theme="dark"]):not(.theme-dark) .finsetHeaderTools .finsetCircleBtn,
body[data-theme="dark"] .finsetHeaderTools .finsetCircleBtn,
body.theme-dark .finsetHeaderTools .finsetCircleBtn,
#desktopTypographyButton,#desktopThemeQuick{
  color:var(--tool-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 6%,transparent)!important;
  border:1.5px solid color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 78%,var(--palette-line))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 5%,transparent),0 0 16px color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 17%,transparent)!important;
}
.finsetHeaderTools .finsetCircleBtn:hover{
  color:var(--tool-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 12%,transparent)!important;
  border-color:var(--tool-tone,var(--neon-cyan))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 7%,transparent),0 0 22px color-mix(in srgb,var(--tool-tone,var(--neon-cyan)) 28%,transparent)!important;
}

.finsetKpi .kpiArrow{
  color:var(--card-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--card-tone,var(--neon-cyan)) 7%,transparent)!important;
  border:1.5px solid color-mix(in srgb,var(--card-tone,var(--neon-cyan)) 80%,var(--palette-line))!important;
  box-shadow:0 0 15px color-mix(in srgb,var(--card-tone,var(--neon-cyan)) 17%,transparent)!important;
}
.finsetPanel .panelArrow,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel .panelArrow,
body[data-theme="dark"] .finsetPanel .panelArrow,
body.theme-dark .finsetPanel .panelArrow{
  color:var(--panel-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 7%,transparent)!important;
  border:1.5px solid color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 80%,var(--palette-line))!important;
  box-shadow:0 0 15px color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 17%,transparent)!important;
}
.finsetPeriodIcon,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPeriodIcon,
body[data-theme="dark"] .finsetPeriodIcon,
body.theme-dark .finsetPeriodIcon{
  color:var(--neon-blue)!important;
  background:color-mix(in srgb,var(--neon-blue) 7%,transparent)!important;
  border:1.5px solid color-mix(in srgb,var(--neon-blue) 80%,var(--palette-line))!important;
  box-shadow:0 0 15px color-mix(in srgb,var(--neon-blue) 17%,transparent)!important;
}
.marketAssetIcon{
  color:var(--row-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 7%,transparent)!important;
  border:1.5px solid color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 78%,var(--palette-line))!important;
  box-shadow:0 0 14px color-mix(in srgb,var(--row-tone,var(--neon-cyan)) 16%,transparent)!important;
}

/* Explicitly keep every SVG glyph hollow/outlined. */
.nav button .ni svg,.nav button .ni svg *,
.finsetHeaderTools .finsetCircleBtn svg,.finsetHeaderTools .finsetCircleBtn svg *,
.finsetKpi .kpiArrow svg,.finsetKpi .kpiArrow svg *,
.finsetPanel .panelArrow svg,.finsetPanel .panelArrow svg *,
.finsetPeriodIcon svg,.finsetPeriodIcon svg *,
.marketAssetIcon svg,.marketAssetIcon svg *{
  fill:none!important;
  stroke:currentColor!important;
}

/* Restore the first neon energy on identity accents without recoloring surfaces. */
.finsetKpi::before,.finsetPanel::before{opacity:.96!important}
.finsetPanelHead h3::before{
  box-shadow:0 0 14px color-mix(in srgb,var(--panel-tone,var(--neon-cyan)) 42%,transparent)!important;
}
.finsetLegend i,.healthLegend i,.liveDot{
  box-shadow:0 0 10px color-mix(in srgb,currentColor 24%,transparent)!important;
}
.finsetDonut{box-shadow:0 0 25px color-mix(in srgb,var(--neon-cyan) 14%,transparent)!important}

/* Typography modal keeps neutral glass, with vivid neon selection cues. */
.typographyEyebrow{color:var(--neon-cyan)!important}
.typographyPreview{
  background:linear-gradient(135deg,color-mix(in srgb,var(--neon-violet) 7%,var(--palette-card)),color-mix(in srgb,var(--neon-cyan) 7%,var(--palette-card)))!important;
  border-color:color-mix(in srgb,var(--neon-violet) 34%,var(--palette-line))!important;
}
.typographyFontGrid button.active{border-color:var(--neon-cyan)!important;box-shadow:0 0 15px color-mix(in srgb,var(--neon-cyan) 13%,transparent)!important}
.typographyFontGrid button.active i{color:var(--neon-lime)!important}
.typographySizeGrid button.active{background:linear-gradient(135deg,var(--neon-violet),var(--neon-magenta))!important;color:#FFFFFF!important;box-shadow:0 0 18px color-mix(in srgb,var(--neon-magenta) 22%,transparent)!important}
.typographyModalFoot button{background:linear-gradient(135deg,var(--neon-blue),var(--neon-violet))!important;color:#FFFFFF!important;box-shadow:0 0 18px color-mix(in srgb,var(--neon-violet) 18%,transparent)!important}

/* Live-price semantic states remain authoritative. */
.marketQuickCard.liveMoveUp,.price.liveMoveUp{
  background:linear-gradient(135deg,rgba(225,247,232,.96),rgba(196,238,210,.91))!important;
  border-color:#62B97A!important;
}
.marketQuickCard.liveMoveDown,.price.liveMoveDown{
  background:linear-gradient(135deg,rgba(255,230,234,.97),rgba(246,203,210,.92))!important;
  border-color:#D76A78!important;
}
.marketQuickCard.liveMoveFlat,.price.liveMoveFlat{
  background:linear-gradient(135deg,rgba(249,250,251,.94),rgba(231,234,238,.89))!important;
  border-color:rgba(85,91,101,.24)!important;
}
body[data-theme="dark"] .marketQuickCard.liveMoveUp,body.theme-dark .marketQuickCard.liveMoveUp,
body[data-theme="dark"] .price.liveMoveUp,body.theme-dark .price.liveMoveUp{
  background:linear-gradient(135deg,#1D3A29,#162D21)!important;border-color:#36C56A!important;
}
body[data-theme="dark"] .marketQuickCard.liveMoveDown,body.theme-dark .marketQuickCard.liveMoveDown,
body[data-theme="dark"] .price.liveMoveDown,body.theme-dark .price.liveMoveDown{
  background:linear-gradient(135deg,#442129,#351920)!important;border-color:#F05266!important;
}
body[data-theme="dark"] .marketQuickCard.liveMoveFlat,body.theme-dark .marketQuickCard.liveMoveFlat,
body[data-theme="dark"] .price.liveMoveFlat,body.theme-dark .price.liveMoveFlat{
  background:linear-gradient(135deg,#303640,#252A32)!important;border-color:rgba(255,255,255,.12)!important;
}


/* ======================================================================
   v0.27.7-r9 — HERITAGE NAVY + SPECTRUM HIGH CONTRAST
   - Keeps the complete v0.27.7 structure and behavior.
   - Brings back the v0.25.1 navy/emerald visual DNA without copying the
     old layout.
   - Uses a controlled multi-color spectrum for section identity.
   - Raises text/background contrast and typographic hierarchy.
   ====================================================================== */

/* Stronger type hierarchy and readability. */
body,button,input,select,textarea{font-weight:var(--type-weight-600)!important}
.main{font-size:var(--font-size-body)!important;line-height:1.82!important}
.pagehead h2,.finsetGreeting h2{font-weight:950!important;letter-spacing:-.45px!important}
.card h3,.sectionTitle,.finsetPanelHead h3,.finsetKpi label,.nav button{font-weight:850!important}
.sub,.muted,.tiny,.small,.kfoot,.finsetGreeting p,.finsetKpi .kpiFoot{font-weight:600!important}
.finsetKpi strong,.kpi strong,.donutCenter b{font-weight:950!important;letter-spacing:-.25px!important}

/* Light mode: v0.25.1 navy sidebar + clean modern work surface. */
body:not([data-theme="dark"]):not(.theme-dark){background:linear-gradient(135deg,#DCE6EB 0%,#EAF0F3 52%,#DFE8ED 100%)!important}
body:not([data-theme="dark"]):not(.theme-dark) .app{
  background:#F8FAFC!important;border-color:rgba(6,26,45,.16)!important;
  box-shadow:0 28px 78px rgba(6,26,45,.16)!important
}
body:not([data-theme="dark"]):not(.theme-dark) .main{
  background:
    radial-gradient(circle at 10% 4%,rgba(56,213,165,.10),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(57,120,168,.09),transparent 27%),
    linear-gradient(180deg,#EDF3F6 0%,#E7EEF2 100%)!important;
  color:#102331!important;border-left:1px solid rgba(6,26,45,.10)!important
}
body:not([data-theme="dark"]):not(.theme-dark) .side{
  background:linear-gradient(180deg,#061A2D 0%,#0A2944 62%,#08243B 100%)!important;
  color:#F4FAFD!important;border-left-color:rgba(255,255,255,.08)!important;
  box-shadow:-12px 0 34px rgba(6,26,45,.17)!important
}
body:not([data-theme="dark"]):not(.theme-dark) .sideBottom{
  background:rgba(6,26,45,.97)!important;border-top-color:rgba(255,255,255,.10)!important
}
body:not([data-theme="dark"]):not(.theme-dark) .brand h1,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserMeta b{color:#FFFFFF!important}
body:not([data-theme="dark"]):not(.theme-dark) .brand small,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserMeta small,
body:not([data-theme="dark"]):not(.theme-dark) .sidefoot,
body:not([data-theme="dark"]):not(.theme-dark) .navGroup{color:#AFC4D1!important}
body:not([data-theme="dark"]):not(.theme-dark) .side .nav button{color:#DDEAF1!important}
body:not([data-theme="dark"]):not(.theme-dark) .side .nav button:hover{
  background:rgba(255,255,255,.075)!important;color:#FFFFFF!important;border-color:rgba(255,255,255,.08)!important
}
body:not([data-theme="dark"]):not(.theme-dark) .side .nav button.active{
  background:linear-gradient(135deg,rgba(10,167,123,.30),rgba(56,213,165,.12))!important;
  color:#FFFFFF!important;border-color:rgba(56,213,165,.32)!important;
  box-shadow:inset 0 0 0 1px rgba(56,213,165,.08),0 8px 22px rgba(0,0,0,.12)!important
}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserCard{
  background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.13)!important;color:#F5FAFD!important;
  box-shadow:none!important
}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox input{color:#FFFFFF!important}
body:not([data-theme="dark"]):not(.theme-dark) .globalAssetSearchBox input::placeholder{color:#AFC4D1!important}
body:not([data-theme="dark"]):not(.theme-dark) .sideUserOpen,
body:not([data-theme="dark"]):not(.theme-dark) .sideUserLogout{color:#DCEAF1!important}

/* Cards: crisp white with colored identity edge; stronger separation than r8.6. */
body:not([data-theme="dark"]):not(.theme-dark) .card,
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi,
body:not([data-theme="dark"]):not(.theme-dark) .finsetPanel,
body:not([data-theme="dark"]):not(.theme-dark) .mobileRefCard,
body:not([data-theme="dark"]):not(.theme-dark) .mobileQuickCards>button{
  background:linear-gradient(145deg,#FFFFFF 0%,#FBFDFE 66%,#F3F7F9 100%)!important;
  border-color:#C5D2DB!important;
  box-shadow:0 14px 34px rgba(6,26,45,.12),inset 0 1px 0 #FFFFFF!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(1){background:linear-gradient(145deg,#FFFFFF,#FFF9E8)!important;border-color:color-mix(in srgb,var(--neon-yellow) 48%,#C5D2DB)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(2){background:linear-gradient(145deg,#FFFFFF,#EBF7FB)!important;border-color:color-mix(in srgb,var(--neon-cyan) 42%,#C5D2DB)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(3){background:linear-gradient(145deg,#FFFFFF,#EDF9F3)!important;border-color:color-mix(in srgb,var(--neon-lime) 42%,#C5D2DB)!important}
body:not([data-theme="dark"]):not(.theme-dark) .finsetKpi:nth-child(4){background:linear-gradient(145deg,#FFFFFF,#F9EEF7)!important;border-color:color-mix(in srgb,var(--neon-magenta) 38%,#C5D2DB)!important}

/* Dark mode: original navy DNA, but with much clearer surfaces and text. */
body[data-theme="dark"],body.theme-dark{background:#06131F!important}
body[data-theme="dark"] .app,body.theme-dark .app{
  background:#07131F!important;border-color:rgba(126,169,193,.16)!important;box-shadow:0 34px 100px rgba(0,0,0,.34)!important
}
body[data-theme="dark"] .main,body.theme-dark .main{
  background:
    radial-gradient(circle at 10% 3%,rgba(56,213,165,.075),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(102,168,213,.07),transparent 28%),
    linear-gradient(180deg,#0C1E2C 0%,#081A26 100%)!important;
  color:#EDF6FA!important;border-left-color:rgba(126,169,193,.10)!important
}
body[data-theme="dark"] .side,body.theme-dark .side{
  background:linear-gradient(180deg,#0D2030 0%,#061A2D 56%,#081A26 100%)!important;
  border-left-color:rgba(126,169,193,.12)!important;box-shadow:-14px 0 36px rgba(0,0,0,.30)!important
}
body[data-theme="dark"] .sideBottom,body.theme-dark .sideBottom{background:rgba(4,21,34,.98)!important;border-top-color:rgba(126,169,193,.12)!important}
body[data-theme="dark"] .card,body.theme-dark .card,
body[data-theme="dark"] .finsetKpi,body.theme-dark .finsetKpi,
body[data-theme="dark"] .finsetPanel,body.theme-dark .finsetPanel,
body[data-theme="dark"] .mobileRefCard,body.theme-dark .mobileRefCard,
body[data-theme="dark"] .mobileQuickCards>button,body.theme-dark .mobileQuickCards>button{
  background:linear-gradient(150deg,#102735 0%,#0C202D 58%,#091A25 100%)!important;
  border-color:#294657!important;
  box-shadow:0 18px 46px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035)!important
}
body[data-theme="dark"] .side .nav button,body.theme-dark .side .nav button{color:#DDEAF1!important}
body[data-theme="dark"] .side .nav button:hover,body.theme-dark .side .nav button:hover{background:rgba(255,255,255,.06)!important;color:#FFFFFF!important}
body[data-theme="dark"] .side .nav button.active,body.theme-dark .side .nav button.active{
  background:linear-gradient(135deg,rgba(56,213,165,.18),rgba(57,120,168,.13))!important;
  color:#FFFFFF!important;border-color:rgba(56,213,165,.24)!important
}

/* Multicolor identity stays on icons, top edges and charts—not on body text. */
.finsetKpi:nth-child(1){--card-tone:var(--neon-yellow)!important}
.finsetKpi:nth-child(2){--card-tone:var(--neon-cyan)!important}
.finsetKpi:nth-child(3){--card-tone:var(--neon-lime)!important}
.finsetKpi:nth-child(4){--card-tone:var(--neon-magenta)!important}
.finsetMiddle .finsetPanel:nth-child(1){--panel-tone:var(--neon-violet)!important}
.finsetMiddle .finsetPanel:nth-child(2){--panel-tone:var(--neon-lime)!important}
.finsetBottom .finsetPanel:nth-child(1){--panel-tone:var(--neon-blue)!important}
.finsetBottom .finsetPanel:nth-child(2){--panel-tone:var(--neon-orange)!important}
.finsetKpi::before,.finsetPanel::before{height:3px!important;opacity:1!important}

/* Buttons echo the original green/gold theme with stronger contrast. */
.btn.primary{background:linear-gradient(135deg,#0AA77B,#08795F)!important;color:#FFFFFF!important;box-shadow:0 9px 22px rgba(10,167,123,.23)!important}
.btn.gold{background:linear-gradient(135deg,#E0B64F,#B98018)!important;color:#FFFFFF!important}
.btn.ghost{background:var(--palette-card)!important;color:var(--palette-text-strong)!important;border-color:var(--palette-line)!important}
body[data-theme="dark"] .btn.ghost,body.theme-dark .btn.ghost{background:#102735!important;color:#F4FAFD!important;border-color:#315166!important}

/* Forms/tables: higher-contrast labels, values and separators. */
.field label,th{color:var(--palette-text-strong)!important;font-weight:850!important}
.field input,.field select,.field textarea{background:var(--palette-card)!important;color:var(--palette-text-strong)!important;border-color:var(--palette-line)!important}
th{background:color-mix(in srgb,var(--palette-card-soft) 90%,var(--palette-card))!important}
td{color:var(--palette-text)!important;border-bottom-color:var(--palette-line-soft)!important}

/* Login/register receives the same heritage navy identity. */
.authPage .intro{background:linear-gradient(145deg,#061A2D 0%,#0A2944 64%,#0B574C 118%)!important}
.authPage .intro h1,.authPage .intro .brand b{color:#FFFFFF!important}
.authPage .intro .doctor{color:#BDD0DC!important}
.authPage .benefit{background:linear-gradient(135deg,#0B6F65,#3978A8)!important;border-color:rgba(255,255,255,.14)!important;color:#FFFFFF!important}
.authPage .auth .btn{background:linear-gradient(135deg,#0AA77B,#08795F)!important;color:#FFFFFF!important}
body.theme-dark.authPage .intro{background:linear-gradient(145deg,#081A26,#061A2D 62%,#083A36 118%)!important}

@media(max-width:980px){
  body:not([data-theme="dark"]):not(.theme-dark) .mobileTopbar{background:#061A2D!important;color:#FFFFFF!important;border-color:rgba(255,255,255,.10)!important}
  body[data-theme="dark"] .mobileTopbar,body.theme-dark .mobileTopbar{background:#061A2D!important;color:#FFFFFF!important}
}

/* r9 final polish: sidebar search, dark card hue, mobile header readability. */
body:not([data-theme="dark"]):not(.theme-dark) .side .globalAssetSearchBox{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body:not([data-theme="dark"]):not(.theme-dark) .side .globalAssetSearchBox span{color:#D7E6EE!important;opacity:.92!important}
body:not([data-theme="dark"]):not(.theme-dark) .side .globalAssetSearchBox input{background:transparent!important;color:#FFFFFF!important}
body:not([data-theme="dark"]):not(.theme-dark) .side .globalAssetSearchBox input::placeholder{color:#B8CBD7!important;opacity:1!important}
body[data-theme="dark"] .side .globalAssetSearchBox,body.theme-dark .side .globalAssetSearchBox{
  background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.14)!important
}
body[data-theme="dark"] .side .globalAssetSearchBox input,body.theme-dark .side .globalAssetSearchBox input{color:#FFFFFF!important}
body[data-theme="dark"] .side .globalAssetSearchBox input::placeholder,body.theme-dark .side .globalAssetSearchBox input::placeholder{color:#B8CBD7!important}

body[data-theme="dark"] .finsetKpi:nth-child(1),body.theme-dark .finsetKpi:nth-child(1){background:linear-gradient(145deg,#102735 0%,#172A2E 100%)!important;border-color:color-mix(in srgb,var(--neon-yellow) 30%,#294657)!important}
body[data-theme="dark"] .finsetKpi:nth-child(2),body.theme-dark .finsetKpi:nth-child(2){background:linear-gradient(145deg,#102735 0%,#0D2934 100%)!important;border-color:color-mix(in srgb,var(--neon-cyan) 30%,#294657)!important}
body[data-theme="dark"] .finsetKpi:nth-child(3),body.theme-dark .finsetKpi:nth-child(3){background:linear-gradient(145deg,#102735 0%,#102D29 100%)!important;border-color:color-mix(in srgb,var(--neon-lime) 28%,#294657)!important}
body[data-theme="dark"] .finsetKpi:nth-child(4),body.theme-dark .finsetKpi:nth-child(4){background:linear-gradient(145deg,#102735 0%,#2A2031 100%)!important;border-color:color-mix(in srgb,var(--neon-magenta) 28%,#294657)!important}
body[data-theme="dark"] .finsetMiddle .finsetPanel:nth-child(1),body.theme-dark .finsetMiddle .finsetPanel:nth-child(1),
body[data-theme="dark"] .finsetMiddle .finsetPanel:nth-child(2),body.theme-dark .finsetMiddle .finsetPanel:nth-child(2),
body[data-theme="dark"] .finsetBottom .finsetPanel:nth-child(1),body.theme-dark .finsetBottom .finsetPanel:nth-child(1),
body[data-theme="dark"] .finsetBottom .finsetPanel:nth-child(2),body.theme-dark .finsetBottom .finsetPanel:nth-child(2){
  background:linear-gradient(150deg,#102735 0%,#0C202D 58%,#091A25 100%)!important;
  border-color:#294657!important
}

@media(max-width:980px){
  body:not([data-theme="dark"]):not(.theme-dark) .mobileTopbar .mobileBrand b,
  body[data-theme="dark"] .mobileTopbar .mobileBrand b,body.theme-dark .mobileTopbar .mobileBrand b{color:#FFFFFF!important}
  body:not([data-theme="dark"]):not(.theme-dark) .mobileTopbar .mobileBrand small,
  body[data-theme="dark"] .mobileTopbar .mobileBrand small,body.theme-dark .mobileTopbar .mobileBrand small{color:#B8CBD7!important}
  body:not([data-theme="dark"]):not(.theme-dark) .mobileTopbar .mobileBrand,
  body[data-theme="dark"] .mobileTopbar .mobileBrand,body.theme-dark .mobileTopbar .mobileBrand{background:transparent!important;border-color:transparent!important}
}

/* ======================================================================
   v0.27.7-r9.1 — SIDEBAR ALIGNMENT + DARK ICON VISIBILITY
   User-directed polish: sidebar flush with the app shell, a fully visible
   rounded-square collapse toggle, and readable glyphs inside dark nav icons.
   ====================================================================== */
@media(min-width:1281px){
  /* The sidebar already lives inside the padded app shell: do not inset it a second time. */
  .side{
    top:0!important;
    height:calc(100vh - 40px)!important;
    max-height:calc(100vh - 40px)!important;
    align-self:stretch!important;
  }

  /* Keep the collapse control fully inside the sidebar so it can never be clipped. */
  .sidebarToggle,
  body.sidebar-collapsed .sidebarToggle{
    position:absolute!important;
    top:14px!important;
    left:12px!important;
    right:auto!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    margin:0!important;
    border-radius:10px!important;
    display:grid!important;
    place-items:center!important;
    z-index:60!important;
    overflow:visible!important;
    font-size:22px!important;
    line-height:1!important;
    background:rgba(255,255,255,.10)!important;
    color:#F8FCFF!important;
    border:1px solid rgba(255,255,255,.24)!important;
    box-shadow:0 6px 16px rgba(0,0,0,.18)!important;
  }
  .sidebarToggle:hover{
    background:rgba(56,213,165,.18)!important;
    border-color:rgba(56,213,165,.52)!important;
    color:#FFFFFF!important;
    transform:translateY(-1px)!important;
  }
  body:not([data-theme="dark"]):not(.theme-dark) .sidebarToggle{
    background:rgba(255,255,255,.13)!important;
    color:#FFFFFF!important;
    border-color:rgba(255,255,255,.26)!important;
  }
}

/* Dark mode: keep the glyph in its section color, as in light mode. */
body[data-theme="dark"] .nav button .ni,
body.theme-dark .nav button .ni,
body[data-theme="dark"] .nav button.active .ni,
body.theme-dark .nav button.active .ni{
  color:var(--neon-tone,var(--neon-cyan))!important;
  background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 10%,rgba(6,26,45,.92))!important;
  border-color:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 88%,#DDF7FF 12%)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 7%,transparent),0 0 14px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 24%,transparent)!important;
}
body[data-theme="dark"] .nav button .ni svg,
body[data-theme="dark"] .nav button .ni svg *,
body.theme-dark .nav button .ni svg,
body.theme-dark .nav button .ni svg *{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.95!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke;
}
body[data-theme="dark"] .nav button:hover .ni svg,
body[data-theme="dark"] .nav button.active .ni svg,
body.theme-dark .nav button:hover .ni svg,
body.theme-dark .nav button.active .ni svg{
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 42%,transparent));
}

/* ======================================================================
   v0.27.7-r9.2 — SYMMETRIC SIDEBAR HEIGHT LOCK
   The sidebar and the middle work layer now share the exact same grid row.
   No one-sided top/height compensation: the rail stretches from the common
   vertical center to both row edges, keeping top and bottom perfectly flush.
   ====================================================================== */
@media(min-width:1281px){
  .app{
    align-items:stretch!important;
  }

  /* r10: the stretch below made the rail grow to document height
     (11,908px on سناریوها). Geometry now lives in the r10 block at the end
     of this file, which keeps r9.2's flush-top intent via sticky. */
  .main{
    min-height:calc(100vh - 60px)!important;
  }
}

/* ======================================================================
   v0.27.7-r9.3 — SIDEBAR CONTENT VERTICAL RHYTHM
   Move the sidebar content stack down as one natural flow. The outer rail
   geometry and collapse control stay fixed; brand, search, navigation and
   footer inherit the lower starting point together.
   ====================================================================== */
@media(min-width:1281px){
  .side,
  body.sidebar-collapsed .side{
    padding-top:36px!important;
  }
}

/* ======================================================================
   v0.27.7-r10 — SIDEBAR GEOMETRY FIX

   r9.2 made the rail share the middle layer's grid row via
   `align-self:stretch; height:auto`. Because that row is sized to CONTENT,
   the rail grew to the whole document: measured 1,846px on فلزات, 3,587px on
   تست شخصیت and 11,908px on سناریوها against a 1,000px viewport.

   r9.2's actual intent - rail flush with the top of the work layer, no
   one-sided compensation - is kept. It is delivered with sticky positioning
   instead of stretch, so the rail is always exactly one viewport tall and
   its navigation scrolls internally.
   ====================================================================== */
@media(min-width:1281px){
  :root{--rail-gap:22px;}

  .side,
  body.sidebar-collapsed .side{
    position:sticky!important;
    top:var(--rail-gap)!important;
    bottom:auto!important;
    inset-block:auto!important;
    align-self:start!important;           /* was: stretch - the stretch was the bug */
    height:calc(100dvh - (var(--rail-gap) * 2))!important;
    max-height:calc(100dvh - (var(--rail-gap) * 2))!important;
    min-height:0!important;
    margin-block:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }

  /* The rail's own content scrolls; the frame never grows. */
  .side .nav{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:thin;
    scrollbar-color:var(--nv-line) transparent;
  }
  .side .nav::-webkit-scrollbar{width:6px}
  .side .nav::-webkit-scrollbar-thumb{background:var(--nv-line);border-radius:999px}
  .side .nav::-webkit-scrollbar-track{background:transparent}

  /* Footer card stays pinned to the bottom of the rail, not of the document. */
  .side .sideBottom{flex:0 0 auto!important;margin-top:auto!important}

  .main{align-self:start!important;min-height:calc(100dvh - 60px)!important}
}

/* ======================================================================
   v0.27.7-r10 — PAGE COLOUR IDENTITY ON EVERY PAGE

   The section spectrum previously reached only the sidebar nav icons and the
   dashboard cards, so every other page rendered as grey-on-grey: measured
   colourfulness was 0.7-2.2% across all 18 light-theme pages, against
   88-99% in dark. That gap is why colour had to be bolted onto the icons.

   Each page now carries its own --neon-tone, and the tone is expressed the
   way r8.2 settled on: a thin rail, a marker and a tinted work layer -
   never a colour-filled card.
   ====================================================================== */
body[data-page="home"]{--neon-tone:var(--neon-cyan)}
body[data-page="brief"]{--neon-tone:var(--neon-teal)}
body[data-page="profile"]{--neon-tone:var(--neon-yellow)}
body[data-page="risk"]{--neon-tone:var(--neon-pink)}
body[data-page="aboutme"]{--neon-tone:var(--neon-violet)}
body[data-page="capital"]{--neon-tone:var(--neon-lime)}
body[data-page="scenarios"]{--neon-tone:var(--neon-orange)}
body[data-page="market"]{--neon-tone:var(--neon-blue)}
body[data-page="live"]{--neon-tone:var(--neon-cyan)}
body[data-page="metals"]{--neon-tone:var(--neon-yellow)}
body[data-page="fundamental"]{--neon-tone:var(--neon-violet)}
body[data-page="recommendations"]{--neon-tone:var(--neon-magenta)}
body[data-page="education"]{--neon-tone:var(--neon-teal)}
body[data-page="consultation"]{--neon-tone:var(--neon-orange)}
body[data-page="messages"]{--neon-tone:var(--neon-pink)}
body[data-page="account"]{--neon-tone:var(--neon-blue)}
body[data-page="doctor"]{--neon-tone:var(--neon-lime)}
body[data-page="about"]{--neon-tone:var(--neon-violet)}

/* The work layer carries a whisper of the page tone - enough to leave
   monotone, far below anything that reads as a coloured panel. */
.main{
  background-color:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 5%,var(--sf-main))!important;
}
body[data-theme="dark"] .main,body.theme-dark .main{
  background-color:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 7%,var(--sf-main))!important;
}

/* Cards keep a neutral surface and take identity from a thin top rail. */
.main .card{
  position:relative;
  border-radius:var(--radius-xl)!important;
  overflow:hidden;
}
.main .card::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 88%,transparent),
    color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 16%,transparent));
  pointer-events:none;
  z-index:1;
}

/* Page header takes the tone as a marker, not as a fill. */
.pagehead h2::before,.pagehead h1::before{
  content:"";
  display:inline-block;
  inline-size:8px;
  block-size:8px;
  border-radius:999px;
  margin-inline-end:8px;
  background:var(--neon-tone,var(--neon-cyan));
  vertical-align:middle;
}

/* ======================================================================
   v0.27.7-r10 — ONE RADIUS SCALE
   The audit found 6-8 different corner radii per page (31 elements at 0px on
   فلزات). Everything now snaps to the scale in design-tokens.css.
   ====================================================================== */
.main .card,.main .panel,.main .box{border-radius:var(--radius-xl)!important}
.main .card .card,.main .subcard,.main .inner,.question{border-radius:var(--radius-lg)!important}
.main input,.main select,.main textarea,.main .field{border-radius:var(--radius-md)!important}
.main .btn,.main button:not(.ni):not(.sidebarToggle){border-radius:var(--radius-md)!important}
.main .pill,.main .chip,.main .tag,.main .badge{border-radius:var(--radius-pill)!important}
.choice{border-radius:var(--radius-sm)!important}

/* ======================================================================
   v0.27.7-r10 — MUTED TEXT FLOOR
   `.tiny.muted` measured 2.35-2.43:1 in dark. Muted must still clear 4.5:1.
   ====================================================================== */
.main .muted,.main .tiny,.main .sub,.main small{color:var(--tx-muted)!important}
body[data-theme="dark"] .main .muted,body[data-theme="dark"] .main .tiny,
body[data-theme="dark"] .main .sub,body[data-theme="dark"] .main small,
body.theme-dark .main .muted,body.theme-dark .main .tiny,
body.theme-dark .main .sub,body.theme-dark .main small{color:var(--tx-muted)!important}

/* ======================================================================
   v0.27.7-r10 — NO FRAME INSIDE A FRAME

   A box drawn inside another box with the same fill reads as a doubled
   frame. Where two frames genuinely nest, the inner one drops its own
   border and takes a sunken surface so the hierarchy is one step, not two.
   ====================================================================== */

/* Rail footer: the rail is already a frame - its footer must not draw a
   second one around the user card (audit: gap 5px on every page). */
.side .sideBottom{
  background:transparent!important;
  border:0!important;
  border-top:1px solid var(--nv-line-soft)!important;
  box-shadow:none!important;
  padding-top:var(--space-3)!important;
}
.side .sideUserCard{
  background:var(--nv-800)!important;
  border:1px solid var(--nv-line)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:none!important;
}

/* A card nested directly inside a card loses its frame and sinks instead. */
.main .card .card,
.main .card .panel,
.main .card .sheet,
.main .tableWrap,
.main .metalInputsSheet > .inner{
  background:var(--sf-card-2)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* Inputs must stay distinguishable from the sheet they sit on. */
.main .metalInputsSheet input,
.main .sheet input,
.main .card input,
.main .card select,
.main .card textarea{
  background:var(--sf-input)!important;
  border:1px solid var(--ln)!important;
}

/* ======================================================================
   v0.27.7-r10 — MOBILE / DESKTOP PARITY

   Mobile had drifted onto the pre-r9 green palette and its own geometry:
   the top bar buttons drew a white `--card` box on the navy bar, the bottom
   nav used a green tint unrelated to the desktop section spectrum, and both
   used a 14px radius against the desktop's rounder language.

   Mobile now draws from the same tokens and the same per-page --neon-tone
   as desktop. The icon glyphs themselves are unchanged.
   ====================================================================== */
@media(max-width:1280px){

  /* --- top bar: it sits on the navy rail colour, so it is a rail context --- */
  .mobileTopbar{
    background:var(--nv-900)!important;
    border-bottom:1px solid var(--nv-line-soft)!important;
    --palette-text:var(--nv-tx);
    --palette-muted:var(--nv-tx-muted);
    --text:var(--nv-tx);
    --muted:var(--nv-tx-muted);
    --card:transparent;
    --line:var(--nv-line);
  }

  /* No white box behind the hamburger or the header actions. Circular, to
     match the desktop top action row. */
  .mobileTopbar button,
  .mobileHeaderActions button,
  .mobileTopbar .hamburger,
  .mobileTopbar [class*="burger"]{
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.20)!important;
    border-radius:var(--radius-pill)!important;
    color:var(--nv-tx)!important;
    box-shadow:none!important;
    min-width:42px!important;
    min-height:42px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .mobileTopbar button:active,
  .mobileTopbar button:hover{
    background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 22%,rgba(255,255,255,.08))!important;
    border-color:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 55%,transparent)!important;
  }
  .mobileTopbar button svg{fill:none!important;stroke:currentColor!important}

  /* --- bottom nav: smaller box, distinctly rounder, desktop's tone --- */
  .mobileBottomNav{
    background:var(--nv-900)!important;
    border:1px solid var(--nv-line-soft)!important;
    border-radius:var(--radius-2xl)!important;
    gap:2px!important;
  }
  .mobileBottomNav button{
    min-height:48px!important;                 /* was 54 - a bit smaller */
    border-radius:var(--radius-lg)!important;  /* was 14px - toward circular */
    color:var(--nv-tx-muted)!important;
    background:transparent!important;
  }
  .mobileBottomNav button.active{
    background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 18%,var(--nv-800))!important;
    color:var(--nv-tx)!important;
    border:1px solid color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 62%,transparent)!important;
  }
  .mobileBottomNav button.active .mobileIcon,
  .mobileBottomNav button.active svg{
    color:var(--neon-tone,var(--neon-cyan))!important;
    stroke:var(--neon-tone,var(--neon-cyan))!important;
  }
  /* Outlined glyph language, same as desktop (r8.6). */
  .mobileBottomNav button svg,
  .mobileBottomNav button .mobileIcon svg{
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.9!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }

  /* --- mobile drawer inherits the rail context (it is the sidebar) --- */
  .drawer,.mobileDrawer{
    background:var(--nv-900)!important;
    border-color:var(--nv-line-soft)!important;
  }

  /* Mobile cards follow the desktop radius scale, not a squarer one. */
  .main .card,.main .panel{border-radius:var(--radius-xl)!important}
  .mobileQuick a,.mobileQuick button,[class*="quick"] a,[class*="quick"] button{
    border-radius:var(--radius-lg)!important;
  }
}

/* ======================================================================
   v0.27.7-r10 — ICONS MUST NOT STRETCH
   The audit found 100 icons on قیمت‌های بازار rendering off their own
   aspect ratio (a flex child with no shrink guard gets squeezed).
   ====================================================================== */
svg{flex:0 0 auto}
.mobileIcon,.ni,.icon,[class*="Icon"]{flex:0 0 auto}
.mobileIcon svg,.ni svg,.icon svg{width:100%;height:100%;display:block}

/* ======================================================================
   v0.27.7-r10 — mobile top bar fits its title
   Making the action buttons circular widened the action column and the
   brand title started truncating ("...سرمایه‌گذا"). The grid gives the
   title the room instead.
   ====================================================================== */
@media(max-width:1280px){
  .mobileTopbar{
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:var(--space-2)!important;
    padding-inline:var(--space-3)!important;
  }
  .mobileTopbar .brand,.mobileTopbar .brandT{min-width:0!important}
  .mobileTopbar .brand b,.mobileTopbar .brandT b,.mobileTopbar h1{
    font-size:var(--type-size-13px)!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .mobileTopbar .brand small,.mobileTopbar small{
    font-size:var(--type-size-10px)!important;
    white-space:nowrap!important;
  }
  .mobileHeaderActions{gap:var(--space-1)!important}
}

/* Mobile cards carry the same identity rail as desktop. */
@media(max-width:1280px){
  .main .card{position:relative;overflow:hidden}
  .main .mobileSnapshot::before,.main .card::before{
    content:"";position:absolute;inset-inline:0;top:0;height:2px;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 88%,transparent),
      color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 16%,transparent));
    pointer-events:none;z-index:1;
  }
}

/* ======================================================================
   v0.27.7-r10 — MOBILE: icon boxes square, typography out of the drawer

   The rail's icon containers were flex:0 0 34px with no height, so they
   rendered 34x25 (ratio 1.36) - the "کشیده" icons. They are square now.

   The font/size panel also still lived inside the side drawer on mobile;
   it now opens as the same centred modal desktop uses, launched from the
   top bar, so the drawer holds navigation only.
   ====================================================================== */
.side .ni,.drawer .ni,.nav button .ni{
  inline-size:34px!important;
  block-size:34px!important;
  aspect-ratio:1/1!important;
  flex:0 0 34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:var(--radius-md)!important;
}
.side .ni svg,.drawer .ni svg,.nav button .ni svg{
  inline-size:19px!important;block-size:19px!important;display:block!important;
}

@media(max-width:1280px){
  /* navigation only in the drawer */
  .side #appearancePanel,
  .drawer #appearancePanel{display:none!important}

  #mobileTypographyButton{display:inline-flex!important}
  #mobileTypographyButton svg{fill:none!important;stroke:currentColor!important;stroke-width:1.9!important}
}
@media(min-width:1281px){
  #mobileTypographyButton{display:none!important}
}

/* ======================================================================
   v0.27.7-r10 — TINTED CHIPS CARRY THE INK STEP, NOT THE BASE STEP

   A chip is a tint surface with text on it, so its text must come from the
   -ink step of the same hue. Where the remap picked -base instead, the pair
   measured 2.78-4.07:1. Binding the trio (tint / ink / edge) per variant
   makes the pair correct in BOTH themes by construction: ink sits at L .45
   on a L .935 tint in light, and L .84 on a L .31 tint in dark.
   ====================================================================== */
.main .pill,.main .statusChip,.main .badge,.main .tag,.main .chip,
.main .ownerBadge,.main .freshTag,.main .targetBadge,.main .mobileBadge{
  --tint:var(--id-emerald-soft);
  --ink:var(--id-emerald-ink);
  --edge:var(--id-emerald-line);
  background:var(--tint)!important;
  color:var(--ink)!important;
  border:1px solid var(--edge)!important;
}
.main .pill.blue,.main .statusChip.blue,.main .badge.blue,.main .targetBadge,.main .mobileBadge{
  --tint:var(--id-blue-soft);--ink:var(--id-blue-ink);--edge:var(--id-blue-line);
}
.main .pill.gold,.main .statusChip.vip,.main .ownerBadge.warn,.main .badge.gold{
  --tint:var(--id-gold-soft);--ink:var(--id-gold-ink);--edge:var(--id-gold-line);
}
.main .pill.red,.main .ownerBadge.red,.main .badge.red{
  --tint:var(--id-red-soft);--ink:var(--id-red-ink);--edge:var(--id-red-line);
}
.main .pill.violet,.main .badge.violet{
  --tint:var(--id-violet-soft);--ink:var(--id-violet-ink);--edge:var(--id-violet-line);
}
.main .pill.orange,.main .badge.orange{
  --tint:var(--id-orange-soft);--ink:var(--id-orange-ink);--edge:var(--id-orange-line);
}

/* Status text keeps the reserved status ramp (direction, never identity). */
.main .marketStatus.up,.main .up,.main .pos{color:var(--st-pos-ink)!important}
.main .marketStatus.down,.main .down,.main .neg{color:var(--st-neg-ink)!important}
.main .marketStatus.up,.main .marketStatus.down{background:transparent!important;border:0!important}

/* Hints, notes and warnings are body text on a tint - ink step, not muted. */
.main .hint,.main .note,.main .warn,.main .callout{color:var(--tx)!important}
.main .warn,.main .warn b{color:var(--st-warn-ink)!important}
.main .hint b,.main .note b,.main .callout b{color:var(--tx-strong)!important}

/* Selected filter/tab chips: tint + ink, in both themes. */
.main .marketFilter.active,.main .filter.active,.main .tab.active,
.main .segmented button.active,.main .switcher button.active{
  background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 16%,var(--sf-card))!important;
  color:var(--tx-strong)!important;
  border:1px solid color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 55%,transparent)!important;
}

/* ======================================================================
   v0.27.7-r10 — remaining measured pairs
   Mode toggles, segmented controls and the rail's plan label were still
   below 4.5:1 (1.04 on «ورود دستی», 1.59 on «نمای کلی», 3.79 on the plan).
   ====================================================================== */

/* Any selected control inside the work layer: tint + strong ink. */
.main button.active,.main .seg button.active,.main .metalMode button.active,
.main [role="tab"][aria-selected="true"]{
  background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 16%,var(--sf-card))!important;
  color:var(--tx-strong)!important;
  border:1px solid color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 55%,transparent)!important;
}
/* ...and the unselected sibling stays legible instead of tint-on-tint. */
.main button.seg,.main .seg button,.main .metalMode button,
.main [role="tab"]{
  background:var(--sf-card-2)!important;
  color:var(--tx)!important;
  border:1px solid var(--ln)!important;
}
.main .metalMode button.active{
  background:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 16%,var(--sf-card))!important;
  color:var(--tx-strong)!important;
}

/* The rail's plan label is small text on the navy user card. */
.side .sideUserCard small,.side #sideUserPlan,#sideUserPlan{
  color:var(--nv-tx)!important;
  opacity:1!important;
}
.side .sideUserAvatar,.finsetProfileAvatar{
  color:var(--nv-tx)!important;
  background:color-mix(in srgb,var(--id-emerald-base) 42%,var(--nv-700))!important;
}

/* ======================================================================
   v0.27.7-r10 — CATEGORY IDENTITY LIVES ON THE SWATCH, NOT ON THE TEXT

   Asset-class labels were painted in the class's own colour, so «طلا» in
   gold measured 1.99:1 on a white card. Identity moves to the icon/swatch
   beside the label; the label itself wears a text token. This is also the
   rule that keeps direction (gain/loss) readable as direction.
   ====================================================================== */
.main .assetName,.main .assetRow b,.main .allocRow b,.main .legend b,
.main .catName,.main .assetLabel{color:var(--tx)!important}
.main .assetRow .dot,.main .legend .dot,.main .allocRow .dot,.main .swatch{
  inline-size:10px!important;block-size:10px!important;border-radius:999px!important;
  flex:0 0 10px!important;display:inline-block!important;
}

/* Avatars: tint disc + ink glyph. One rule, correct in both themes - the
   earlier version put an ID in the base selector, which outranked its own
   dark override and left the disc at 1.59:1. */
.sideUserAvatar,.finsetProfileAvatar,i.finsetProfileAvatar,span#sideUserAvatar{
  background-image:none!important;
  background-color:var(--id-emerald-soft)!important;
  color:var(--id-emerald-ink)!important;
  -webkit-text-fill-color:var(--id-emerald-ink)!important;
}

/* Primary action: solid brand emerald with a guaranteed on-colour text. */
.main .btn.primary,.main button.primary,.mobileQuick .primary{
  background-image:none!important;
  background-color:var(--id-emerald-ink)!important;
  color:#FFFFFF!important;
  border:1px solid var(--id-emerald-ink)!important;
}
body[data-theme="dark"] .main .btn.primary,body[data-theme="dark"] .main button.primary,
body.theme-dark .main .btn.primary,body.theme-dark .main button.primary{
  background-color:var(--id-emerald-base)!important;
  color:#04140F!important;
  border-color:var(--id-emerald-base)!important;
}

/* ======================================================================
   v0.27.7-r10 — the same tint/ink pairing for the remaining tint surfaces
     .choice.sel  #0AA77B on #E6F6F1 = 2.76:1
     .goodbox     #078B66 on #E6F6F0 = 3.84:1
     .btn.danger  #C84C5C on #FFEFEC = 4.05:1
   A -soft tint always carries the -ink step, never the -base step.
   ====================================================================== */
.main .choice.sel,.choice.sel{
  background:var(--id-emerald-soft)!important;
  color:var(--id-emerald-ink)!important;
  border-color:var(--id-emerald-line)!important;
}
.main .goodbox,.main .okbox,.main .successbox,.main .tipbox{
  background:var(--st-pos-soft)!important;color:var(--st-pos-ink)!important;
  border:1px solid color-mix(in srgb,var(--st-pos) 34%,transparent)!important;
}
.main .badbox,.main .errorbox,.main .dangerbox{
  background:var(--st-neg-soft)!important;color:var(--st-neg-ink)!important;
  border:1px solid color-mix(in srgb,var(--st-neg) 34%,transparent)!important;
}
.main .btn.danger,.main button.danger{
  background:var(--st-neg-soft)!important;color:var(--st-neg-ink)!important;
  border:1px solid var(--st-neg)!important;
}
.main .warnbox,.main .notebox{
  background:var(--st-warn-soft)!important;color:var(--st-warn-ink)!important;
  border:1px solid color-mix(in srgb,var(--st-warn) 34%,transparent)!important;
}

/* ======================================================================
   v0.27.7-r10 — last tint/ink pairs
     .qnum                 #0AA77B on #E6F6F1
     .finsetDelta.positive #D7AA45 on a gold veil
     .finsetDelta.accent   #2C93B5 on a cyan veil
     .words / .feedCat     muted ink on a translucent card
   ====================================================================== */
.main .qnum,.qnum{
  background:var(--id-emerald-soft)!important;color:var(--id-emerald-ink)!important;
}
.main .finsetDelta{color:var(--tx)!important}
.main .finsetDelta.positive,.main .finsetDelta.gold{color:var(--id-gold-ink)!important}
.main .finsetDelta.accent,.main .finsetDelta.cyan{color:var(--id-cyan-ink)!important}
.main .finsetDelta.up{color:var(--st-pos-ink)!important}
.main .finsetDelta.down{color:var(--st-neg-ink)!important}
.main .words,.main .moneyInline .words{color:var(--tx)!important}
.main .feedCat{
  background:var(--id-cyan-soft)!important;color:var(--id-cyan-ink)!important;
  border:1px solid var(--id-cyan-line)!important;
}

/* ======================================================================
   v0.27.7-r10 — final two measured pairs
     .capitalBalanceTop b   category colour as label text, on white (1.99:1)
     .mobileSnapshotTop em  -base on its own -soft tint (2.76:1)
   ====================================================================== */
.main .capitalBalanceTop b,.main .capitalBalanceRow b{color:var(--tx)!important}
.main .capitalBalanceTop .dot,.main .capitalBalanceRow .dot{
  inline-size:10px!important;block-size:10px!important;border-radius:999px!important;
  display:inline-block!important;flex:0 0 10px!important;
}
.main .mobileSnapshotTop em,.mobileSnapshot em{
  background:var(--id-emerald-soft)!important;
  color:var(--id-emerald-ink)!important;
  font-style:normal!important;
}

/* ======================================================================
   v0.27.7-r10 — status chips and quiet buttons (last 3 measured pairs)
   ====================================================================== */
.main .status{background:var(--sf-card-2)!important;color:var(--tx)!important}
.main .status.ok,.main .status.good{background:var(--st-pos-soft)!important;color:var(--st-pos-ink)!important}
.main .status.watch,.main .status.warn{background:var(--st-warn-soft)!important;color:var(--st-warn-ink)!important}
.main .status.bad,.main .status.danger{background:var(--st-neg-soft)!important;color:var(--st-neg-ink)!important}
.main .ghost,.main .linkBtn,.main button.quiet,.main .moreBtn,
.main .card > button:not(.primary):not(.danger):not(.active){color:var(--tx)!important}

/* Quiet "see all"-style buttons in mobile sections take the text token. */
@media(max-width:1280px){
  .main section button:not(.primary):not(.danger):not(.active):not(.ni):not([class*="Icon"]){
    color:var(--tx)!important;
  }
}

/* ======================================================================
   v0.27.7-r10 — remaining same-fill nesting
   A list item inside a panel must not repeat the panel's fill and border;
   it sinks one step instead.
   ====================================================================== */
.main .newsItem,.main details .newsItem,.main .wealthDetails .newsItem{
  background:var(--sf-card-2)!important;
  border:0!important;
  border-radius:var(--radius-md)!important;
  box-shadow:none!important;
}
.main .metalInputsSheet,.main .metalTableSheet{
  background:var(--sf-card)!important;border:1px solid var(--ln-soft)!important;
}
.main .metalInputsSheet input{background:var(--sf-card-2)!important}
.main .tableWrap{background:transparent!important;border:0!important}
.side .sideBottom{padding-inline:var(--space-3)!important;padding-bottom:var(--space-3)!important}

/* ======================================================================
   v0.27.7-r10 — scroll affordance on the rail

   With the rail locked to one viewport, 18 nav items no longer fit (content
   1082px in a 649px track), so the list scrolls. Without an edge treatment
   the cut item reads as a broken layout rather than as "more below".
   ====================================================================== */
@media(min-width:1281px){
  .side .nav{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 26px),transparent 100%);
    padding-block-end:26px!important;
    scroll-behavior:smooth;
  }
  /* No fade once the list is fully scrolled (progressive enhancement). */
  .side .nav:not(:hover){scrollbar-color:transparent transparent}
}

/* ======================================================================
   v0.27.7-r10 — LOGIN PAGE

   The navy column is two grid cells (.intro row 1, .benefitsPanel row 2).
   .intro carried a decorative ::before glow under overflow:hidden, so the
   glow was cut square at the section boundary and read as a hard seam
   across the panel at y≈473. The glow goes; the column is one flat navy.

   The navy column is also a rail context: it must carry rail text tokens,
   not the page's (which are dark in the light theme).
   ====================================================================== */
body.authPage .intro,body.authPage .benefitsPanel{
  --palette-text:var(--nv-tx);
  --palette-text-strong:var(--nv-tx);
  --palette-muted:var(--nv-tx-muted);
  --palette-line:var(--nv-line);
  --palette-line-soft:var(--nv-line-soft);
  --palette-card:var(--nv-800);
  background:var(--nv-900)!important;
  background-image:none!important;
  color:var(--nv-tx)!important;
  border-left:0!important;
}
body.authPage .intro::before,body.authPage .intro::after,
body.authPage.theme-dark .intro::before,body.authPage .benefitsPanel::before{
  content:none!important;display:none!important;
}
body.authPage .intro h1{color:var(--nv-tx)!important}
body.authPage .intro .doctor,body.authPage .intro small{color:var(--nv-tx-muted)!important}

/* Benefit chips: tint + ink on the navy column, not a teal-to-blue gradient. */
body.authPage .benefit{
  background:color-mix(in srgb,var(--id-emerald-base) 16%,var(--nv-800))!important;
  background-image:none!important;
  color:var(--nv-tx)!important;
  border:1px solid color-mix(in srgb,var(--id-emerald-base) 34%,transparent)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:none!important;
}

/* Primary action matches the app: solid emerald, not emerald-to-violet. */
body.authPage .btn,body.authPage #loginBtn,body.authPage #registerBtn{
  background-image:none!important;
  background-color:var(--id-emerald-ink)!important;
  color:#FFFFFF!important;
  border:1px solid var(--id-emerald-ink)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:none!important;
}
body.authPage.theme-dark .btn,body.authPage.theme-dark #loginBtn{
  background-color:var(--id-emerald-base)!important;color:#04140F!important;
  border-color:var(--id-emerald-base)!important;
}

/* The form column takes a whisper of tone so it is not dead grey. */
body.authPage .auth{
  background-color:color-mix(in srgb,var(--id-emerald-base) 4%,var(--sf-main))!important;
}
body.authPage .shell{border-radius:var(--radius-2xl)!important;overflow:hidden!important}
body.authPage .field input{border-radius:var(--radius-md)!important}
body.authPage .tabs{border-radius:var(--radius-md)!important}
body.authPage .tabs button{border-radius:var(--radius-sm)!important}
body.authPage .themeToggle{border-radius:var(--radius-pill)!important}

/* ======================================================================
   v0.27.7-r10 — every form control is visibly separate from its container
   A control may share the card's fill, but it must never share its edge.
   ====================================================================== */
.main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.main select,.main textarea,.main .fundSection input,.main .ffGroup{
  background:var(--sf-input)!important;
  border:1px solid var(--ln)!important;
  border-radius:var(--radius-md)!important;
  color:var(--tx)!important;
}
.main input:focus-visible,.main select:focus-visible,.main textarea:focus-visible{
  outline:2px solid color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 70%,transparent)!important;
  outline-offset:1px!important;
  border-color:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 60%,var(--ln))!important;
}
body[data-theme="dark"] .main input:not([type="checkbox"]):not([type="radio"]),
body[data-theme="dark"] .main select,body[data-theme="dark"] .main textarea,
body.theme-dark .main input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark .main select,body.theme-dark .main textarea{
  background:var(--sf-sunken)!important;
  border-color:var(--ln)!important;
}
/* Mode toggles read as a segmented control, not a button inside a box. */
.main .metalMode{background:var(--sf-card-2)!important;border:1px solid var(--ln-soft)!important;padding:3px!important;border-radius:var(--radius-md)!important}
.main .metalMode button{border:0!important;background:transparent!important}
.main .metalMode button.active{border:0!important}


/* ======================================================================
   v0.27.7-r10 — EMPTY STATES

   48 call sites render a bare <div class="empty">text</div>, which drew a
   large blank area with one centred sentence floating in it. The whole
   treatment is done here so no call site changes: a tinted mark in the
   page's own tone, the message at readable contrast, and room for the CTA
   the markup already places after it.
   ====================================================================== */
.main .empty,
.main .portfolioEmpty,.main .briefEmpty,.main .goalEmpty,.main .marketEmpty,
.main .homePortfolioEmpty,.main .personalNewsEmpty,.main .finsetTableEmpty,
.main .assetSearchEmpty,.main .mobileRefEmpty{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:var(--space-3)!important;
  min-block-size:150px!important;
  padding:var(--space-7) var(--space-5)!important;
  margin-inline:auto!important;
  max-inline-size:48ch!important;
  text-align:center!important;
  color:var(--tx)!important;
  background:var(--sf-card-2)!important;
  border:1px dashed var(--ln)!important;
  border-radius:var(--radius-lg)!important;
  line-height:1.9!important;
  font-weight:var(--font-weight-regular)!important;
}

/* The mark takes the page tone, so an empty page still reads as that page. */
.main .empty::before,
.main .portfolioEmpty::before,.main .briefEmpty::before,.main .goalEmpty::before,
.main .marketEmpty::before,.main .homePortfolioEmpty::before,
.main .personalNewsEmpty::before,.main .finsetTableEmpty::before,
.main .assetSearchEmpty::before,.main .mobileRefEmpty::before{
  content:""!important;
  inline-size:40px!important;
  block-size:40px!important;
  flex:0 0 40px!important;
  background-color:color-mix(in srgb,var(--neon-tone,var(--neon-cyan)) 78%,var(--tx-faint))!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2013.5h4.2l1.8%202.6h6l1.8-2.6H21%22%2F%3E%3Cpath%20d%3D%22M5.2%205.5h13.6l2.2%208v4.2a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4.2z%22%2F%3E%3C%2Fsvg%3E") center / 40px 40px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2013.5h4.2l1.8%202.6h6l1.8-2.6H21%22%2F%3E%3Cpath%20d%3D%22M5.2%205.5h13.6l2.2%208v4.2a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4.2z%22%2F%3E%3C%2Fsvg%3E") center / 40px 40px no-repeat;
  opacity:.9;
}

/* A CTA that follows an empty state sits with it, not adrift below it. */
.main .empty + .btn,.main .empty + button,
.main .empty ~ .btn:first-of-type{
  margin-block-start:var(--space-3)!important;
}

/* Inside a table or a compact row the dashed panel would be too heavy. */
.main td .empty,.main tr .empty,.main .tableWrap .empty,
.main .finsetTableEmpty{
  border:0!important;
  background:transparent!important;
  min-block-size:96px!important;
  padding:var(--space-5) var(--space-4)!important;
}
.main td .empty::before,.main tr .empty::before,.main .tableWrap .empty::before{
  inline-size:30px!important;block-size:30px!important;flex-basis:30px!important;
  -webkit-mask-size:30px 30px;mask-size:30px 30px;
}

/* Boot placeholder must not look like a designed empty state. */
.main > .empty:only-child{border-style:solid!important}

/* ======================================================================
   v0.27.7-r10 — login navy column, dark theme

   `body.theme-dark.authPage .intro` (0,3,1) still carried a hardcoded
   gradient and outranked the r10 rule (0,2,1), so the dark login kept the
   seam the light one had lost. Matched on specificity and flattened.
   ====================================================================== */
body.theme-dark.authPage .intro,
body.authPage.theme-dark .intro,
body[data-theme="dark"].authPage .intro,
body.theme-dark.authPage .benefitsPanel,
body[data-theme="dark"].authPage .benefitsPanel{
  background:var(--nv-900)!important;
  background-image:none!important;
  border-color:var(--nv-line-soft)!important;
}
body.theme-dark.authPage .intro::after,
body.theme-dark.authPage .intro::before,
body[data-theme="dark"].authPage .intro::after,
body.authPage.theme-dark .benefitsPanel::after{
  content:none!important;display:none!important;
}

/* Bottom nav: actually smaller, not just a smaller min-height. */
@media(max-width:1280px){
  .mobileBottomNav{padding:5px!important}
  .mobileBottomNav button{
    min-height:44px!important;
    padding-block:5px!important;
    gap:2px!important;
    line-height:1.25!important;
  }
  .mobileBottomNav button .mobileIcon{inline-size:20px!important;block-size:20px!important}
  /* The brand is a wide label, not an icon button - it keeps its own shape. */
  .mobileTopbar .mobileBrand{border-radius:var(--radius-md)!important;background:transparent!important;border:0!important}
}

/* The grid stretched each item to the bar's height (84px bar -> 72px button).
   Centring stops the stretch; min-height keeps a 44px tap target. */
@media(max-width:1280px){
  .mobileBottomNav{align-items:center!important}
  .mobileBottomNav button{height:auto!important;align-self:center!important}
}

/* ======================================================================
   v0.27.7-r10 — mobile top bar fits five actions AND the brand
   Adding the typography launcher took the row to five buttons and the brand
   started ellipsing again. The actions shrink on narrow screens and the
   brand is allowed to wrap instead of truncate.
   ====================================================================== */
@media(max-width:1280px){
  #mobileHomeBrand{min-width:0!important;overflow:visible!important}
  #mobileHomeBrand span{min-width:0!important;display:block!important}
  #mobileHomeBrand b,#mobileHomeBrand small{
    display:block!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.3!important;
  }
  #mobileHomeBrand b{font-size:var(--type-size-12px)!important}
  #mobileHomeBrand small{font-size:var(--type-size-10px)!important}
  #mobileHomeBrand img{inline-size:30px!important;block-size:30px!important;flex:0 0 30px!important}
}
@media(max-width:460px){
  .mobileTopbar{grid-template-columns:38px minmax(0,1fr) auto!important;gap:var(--space-1)!important}
  .mobileTopbar button:not(.mobileBrand),
  .mobileHeaderActions button{min-width:36px!important;min-height:36px!important}
  .mobileHeaderActions{gap:2px!important}
  .mobileTopbar .mobileIcon{inline-size:17px!important;block-size:17px!important}
  #mobileHomeBrand b{font-size:var(--type-size-11px)!important}
  #mobileHomeBrand small{display:none!important}
}

/* ======================================================================
   v0.27.7-r10 — THE WORK LAYER SCROLLS, THE SHELL DOES NOT

   `.app` carried min-height, so the whole shell grew with the content and the
   document scrolled. On a long page (اطلاعات من, سناریوها) the middle layer
   stretched far past the viewport and the rail had nothing to sit against.

   Desktop now behaves like an application shell: the frame is exactly one
   viewport, and the work layer scrolls inside it. The rail no longer needs
   sticky - it simply fills its own cell.

   Mobile keeps normal document scrolling (a fixed bottom nav plus an inner
   scroller fights the browser's URL-bar behaviour).
   ====================================================================== */
@media(min-width:1281px){
  html,body{height:100%!important;overflow:hidden!important}

  .app,body.sidebar-collapsed .app{
    height:calc(100dvh - 40px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 40px)!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }

  /* the rail fills its cell; no document scroll left to stick against */
  .side,body.sidebar-collapsed .side{
    position:relative!important;
    top:auto!important;
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    align-self:stretch!important;
  }

  /* the work layer is the scroll container */
  .main{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
    padding-block-end:var(--space-7)!important;
    scrollbar-width:thin;
    scrollbar-color:var(--ln) transparent;
  }
  .main::-webkit-scrollbar{width:10px}
  .main::-webkit-scrollbar-thumb{
    background:var(--ln);border-radius:999px;
    border:3px solid transparent;background-clip:content-box;
  }
  .main::-webkit-scrollbar-thumb:hover{background:var(--ln-strong);background-clip:content-box}
  .main::-webkit-scrollbar-track{background:transparent}
}

/* Keep the legend aligned with the physical left-to-right valuation scale.
   Each Persian label retains its own right-to-left text direction. */
.valuationLabels{direction:ltr}
.valuationLabels>span{direction:rtl}

/* ===== v0.27.7-r11 additive fundamental-analysis laboratory ===== */
.fundamentalLab{overflow:hidden;position:relative}
.fundamentalLab:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--palette-accent),var(--palette-accent-2));pointer-events:none}
.fundLabHero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px;align-items:end;padding:8px 4px 19px;border-bottom:1px solid var(--line)}
.fundLabHero h3{margin:10px 0 6px;font-size:var(--type-size-19px)}.fundLabHero p{margin:0;color:var(--muted);line-height:var(--type-line-1_9)}
.fundLabLookup{display:flex;gap:8px;align-items:center}.fundLabLookup input{min-width:0;flex:1}
.fundLabPane{display:none;padding-top:14px}.fundLabPane.active{display:block}
.fundLabGuide{border:1px solid var(--line);background:var(--soft);border-radius:18px;padding:15px 16px;margin-bottom:14px;line-height:var(--type-line-1_9)}
.fundLabGuide>p{margin:6px 0;color:var(--muted)}.fundLabGuide ol{margin:8px 18px 0 0;padding:0;color:var(--muted)}
.fundLabStatusGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.fundLabStatus{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:13px}.fundLabStatus>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.fundLabStatus>div>span{width:9px;height:9px;border-radius:50%;background:var(--muted)}.fundLabStatus.verified>div>span{background:var(--palette-positive)}.fundLabStatus.review>div>span{background:var(--palette-warning)}.fundLabStatus.missing>div>span{background:var(--palette-negative)}.fundLabStatus em{font-style:normal;margin-right:auto;color:var(--muted);font-size:var(--type-size-9px)}.fundLabStatus small,.fundLabStatus time{display:block;color:var(--muted);font-size:var(--type-size-9px);margin-top:5px}.fundLabStatus p{margin:8px 0 0;font-size:var(--type-size-10px);line-height:var(--type-line-1_8)}
.fundLabReportList{display:grid;gap:7px}.fundLabReport{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);border:1px solid var(--line);background:var(--card);border-radius:14px;padding:10px}.fundLabReport>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:var(--type-weight-900)}.fundLabReport b,.fundLabReport small{display:block}.fundLabReport small{color:var(--muted);margin-top:3px;font-size:var(--type-size-9px)}
.fundLabSubHead,.fundLabManualTitle,.fundImportHead,.fundV2SectionTitle{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:14px 0 10px}.fundLabSubHead small,.fundLabManualTitle span,.fundImportHead small,.fundV2SectionTitle span{display:block;color:var(--muted);font-size:var(--type-size-9px);margin-top:3px}
.fundCompareGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}.fundCompareMetric{border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--card)}.fundCompareMetric.good{box-shadow:inset 0 3px 0 var(--palette-positive)}.fundCompareMetric.watch{box-shadow:inset 0 3px 0 var(--palette-warning)}.fundCompareMetric small,.fundCompareMetric span{display:block;color:var(--muted);font-size:var(--type-size-9px)}.fundCompareMetric b{display:block;margin:5px 0}.fundCompareMetric em{font-style:normal;font-size:var(--type-size-10px);color:var(--muted)}
.fundEPSFlow{display:flex;gap:7px;align-items:stretch;overflow:auto;margin:12px 0}.fundEPSFlow>div{min-width:150px;flex:1;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:11px}.fundEPSFlow>i{display:grid;place-items:center;color:var(--muted);font-style:normal}.fundEPSFlow small,.fundEPSFlow span{display:block;color:var(--muted);font-size:var(--type-size-9px)}.fundEPSFlow b{display:block;margin:4px 0}
.fundSensitivityTable{overflow:auto;margin-top:12px}.fundSensitivityTable table{width:100%;border-collapse:separate;border-spacing:5px}.fundSensitivityTable th,.fundSensitivityTable td{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;background:var(--card)}.fundSensitivityTable th{background:var(--soft)}.fundSensitivityTable td b,.fundSensitivityTable td small{display:block}.fundSensitivityTable td small{color:var(--muted);margin-top:4px}
.fundV2Hero{border:1px solid var(--line);background:linear-gradient(135deg,var(--card-soft),var(--card));border-radius:22px;padding:22px;margin-top:4px}.fundV2Progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:16px 0 18px}.fundV2Progress button{border:1px solid var(--line);background:var(--card);color:var(--muted);padding:12px 8px;border-radius:14px;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;min-height:54px;transition:.18s ease}.fundV2Progress button:hover{border-color:var(--palette-accent)}.fundV2Progress button span{display:grid;place-items:center;width:25px;height:25px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-weight:800}.fundV2Progress button.active{color:var(--text);border-color:var(--palette-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--palette-accent) 15%,transparent);background:color-mix(in srgb,var(--palette-accent) 5%,var(--card))}.fundV2Progress button.active span{background:var(--palette-accent);color:var(--palette-on-accent);border-color:var(--palette-accent)}
.fundV2StepHero{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--soft);margin-bottom:16px}.fundV2StepHero>span{flex:0 0 auto;padding:7px 10px;border-radius:12px;background:var(--palette-accent);color:var(--palette-on-accent);font-weight:900}.fundV2StepHero h3{margin:0 0 6px}.fundV2StepHero p{margin:0;color:var(--muted);line-height:1.9}.fundV2Formula{padding:14px 16px;border:1px dashed var(--palette-accent);border-radius:16px;background:color-mix(in srgb,var(--palette-accent) 6%,var(--card));text-align:center;font-weight:800;line-height:2;margin-bottom:14px}
.fundV2ValidationHead{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-bottom:12px}.fundV2Score{width:112px;height:112px;border-radius:50%;border:9px solid color-mix(in srgb,var(--palette-accent) 20%,var(--line));display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--soft)}.fundV2Score b{font-size:30px;line-height:1}.fundV2Score span,.fundV2Score small{color:var(--muted);font-size:11px}.fundV2ValidationHead h4{margin:0 0 6px}.fundV2ValidationHead p{margin:0;color:var(--muted);line-height:1.8}.fundV2ValidationGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}.fundV2Check{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.fundV2Check>span{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--muted)}.fundV2Check.green>span{background:var(--palette-positive)}.fundV2Check.gold>span{background:var(--palette-warning)}.fundV2Check.red>span{background:var(--palette-negative)}.fundV2Check b,.fundV2Check small{display:block}.fundV2Check small,.fundV2Check p{color:var(--muted);font-size:11px}.fundV2Check p{margin:5px 0 0;line-height:1.7}
.fundV2Identity,.fundV2Kpis,.fundV2MonthlyHero,.fundLabAutoStrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.fundV2Identity>div,.fundV2Kpis>div,.fundV2MonthlyHero>div,.fundLabAutoStrip>div{padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--card)}.fundV2Identity small,.fundV2Identity b,.fundV2Kpis small,.fundV2Kpis b,.fundV2MonthlyHero small,.fundV2MonthlyHero b,.fundLabAutoStrip small,.fundLabAutoStrip b{display:block}.fundV2Identity small,.fundV2Kpis small,.fundV2MonthlyHero small,.fundLabAutoStrip small{color:var(--muted);margin-bottom:5px}.fundV2Identity .accent{border-color:color-mix(in srgb,var(--palette-accent) 45%,var(--line));background:color-mix(in srgb,var(--palette-accent) 7%,var(--card))}
.fundIndustryModel{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--card);margin:12px 0}.fundIndustryModel>div:first-child{display:flex;justify-content:space-between;gap:10px}.fundIndustryModel>div:first-child span,.fundIndustryModel p{color:var(--muted)}.fundModelDrivers{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.fundModelDrivers>span{padding:10px;border-radius:12px;background:var(--soft)}.fundModelDrivers small{display:block;color:var(--muted)}
.fundV2Fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.fundV2Field{padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--card)}.fundV2InputWrap{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card-soft)}.fundV2InputWrap input{border:0!important;border-radius:0!important;background:transparent!important;min-width:0;flex:1}.fundV2InputWrap>span{padding:0 9px;color:var(--muted);font-size:11px;white-space:nowrap}.fundV2Meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}.fundV2Meta em{font-style:normal;font-size:10px;font-weight:800;padding:3px 7px;border-radius:999px;border:1px solid var(--line)}.fundV2Meta em.green{color:var(--palette-positive)}.fundV2Meta em.gold{color:var(--palette-warning)}.fundV2Meta em.red{color:var(--palette-negative)}.fundV2Meta small,.fundV2Field p{font-size:10px;color:var(--muted)}.fundV2Field p{margin:6px 0 0;line-height:1.7}.fundV2Details{margin-top:14px}.fundV2MainAction{margin-top:12px}
.fundV2CalcFlow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--soft);margin-top:12px}.fundV2CalcFlow>div{text-align:center}.fundV2CalcFlow small,.fundV2CalcFlow b{display:block}.fundV2CalcFlow small{color:var(--muted);margin-bottom:5px}.fundV2CalcFlow i{font-style:normal;color:var(--palette-accent);font-weight:800;text-align:center}.fundV2Scenario{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:11px}.fundV2Scenario>div{padding:14px;border:1px solid var(--line);border-radius:15px}.fundV2Scenario small,.fundV2Scenario b,.fundV2Scenario span{display:block}.fundV2Scenario b{font-size:20px;margin:5px 0}.fundV2Scenario span{font-size:11px;color:var(--muted);line-height:1.6}.fundV2Scenario .bear{border-color:color-mix(in srgb,var(--palette-negative) 35%,var(--line))}.fundV2Scenario .base{border-color:color-mix(in srgb,var(--palette-accent) 45%,var(--line));background:color-mix(in srgb,var(--palette-accent) 5%,var(--card))}.fundV2Scenario .bull{border-color:color-mix(in srgb,var(--palette-positive) 35%,var(--line))}
.fundV2MonthlyHero b{font-size:18px}.fundV2MonthlyHero em{font-style:normal;font-size:10px;color:var(--muted)}.fundV2Chart{height:240px;padding:20px 12px 4px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--soft),var(--card));margin-bottom:12px}.fundV2Bars{height:100%;display:flex;align-items:end;gap:8px}.fundV2Bar{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:38px}.fundV2Bar>span{width:min(64px,75%);min-height:5px;background:linear-gradient(180deg,var(--palette-accent),color-mix(in srgb,var(--palette-accent) 55%,var(--card)));border-radius:10px 10px 4px 4px;position:relative;display:block}.fundV2Bar>span b{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap}.fundV2Bar small{font-size:10px;color:var(--muted)}.fundSensitivityTable td.good{background:color-mix(in srgb,var(--palette-positive) 8%,var(--card))}.fundSensitivityTable td.watch{background:color-mix(in srgb,var(--palette-negative) 6%,var(--card))}
.fundV2ModelOverride{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,.75fr);gap:10px 14px;align-items:center;padding:14px 16px;margin:12px 0;border:1px solid color-mix(in srgb,var(--palette-accent) 24%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--palette-accent) 5%,var(--card));box-shadow:var(--shadow)}.fundV2ModelOverride>div{display:grid;gap:4px}.fundV2ModelOverride b{font-size:14px}.fundV2ModelOverride small,.fundV2ModelOverride>span{color:var(--muted);font-size:12px;line-height:1.8}.fundV2ModelOverride>span{grid-column:1/-1}.fundV2ModelOverride select{min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);padding:8px 12px;font:inherit}
.fundLegacyWrap>.pagehead,.fundLegacyWrap>.fundInfoStrip{display:none!important}.legacyFundHeader{margin-top:18px;border-color:color-mix(in srgb,var(--palette-warning) 34%,var(--line))!important}
@media(max-width:1100px){.fundV2Progress{grid-template-columns:repeat(3,1fr)}.fundV2ValidationGrid,.fundV2Fields{grid-template-columns:repeat(2,1fr)}.fundV2Identity,.fundV2Kpis,.fundV2MonthlyHero,.fundLabAutoStrip{grid-template-columns:repeat(2,1fr)}.fundV2CalcFlow{grid-template-columns:1fr}.fundV2CalcFlow i{transform:rotate(90deg)}}
@media(max-width:900px){.fundLabHero{grid-template-columns:1fr}.fundLabStatusGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fundCompareGrid{grid-template-columns:1fr}.fundModelDrivers{grid-template-columns:1fr}}
@media(max-width:680px){.fundV2Progress{grid-template-columns:repeat(2,1fr)}.fundV2Progress button{font-size:11px}.fundV2ValidationHead{grid-template-columns:1fr}.fundV2Score{width:92px;height:92px}.fundV2ValidationGrid,.fundV2Fields,.fundV2Identity,.fundV2Kpis,.fundV2MonthlyHero,.fundV2Scenario,.fundLabStatusGrid,.fundLabAutoStrip{grid-template-columns:1fr}.fundV2SectionTitle{display:block}.fundV2SectionTitle span{display:block;margin-top:5px}.fundV2Chart{overflow-x:auto}.fundV2Bars{min-width:520px}.fundLabLookup,.fundLabSubHead,.fundLabManualTitle,.fundImportHead{align-items:stretch;flex-direction:column}.fundV2ModelOverride{grid-template-columns:1fr}.fundV2ModelOverride>span{grid-column:auto}.fundEPSFlow>div{min-width:135px}}
/* ===== end v0.27.7-r11 additive fundamental-analysis laboratory ===== */


/* ===== v0.27.7-r13 fundamental + typography stabilization ===== */
.fundR12Progress{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.fundUnitHint{margin-top:6px!important;padding:6px 8px!important;border-radius:9px!important;background:color-mix(in srgb,var(--palette-accent) 6%,var(--palette-card))!important;color:var(--palette-muted)!important;font-size:10px!important}
.fundLearnSimple{border:1px solid var(--palette-border);border-radius:18px;padding:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--palette-accent) 5%,var(--palette-card)),var(--palette-card));margin-bottom:14px}
.fundLearnSimple>h3{margin:0 0 8px}.fundLearnSimple>p{line-height:2;color:var(--palette-muted)}
.fundLearnSteps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:14px 0}
.fundLearnSteps>div{padding:12px;border:1px solid var(--palette-border);border-radius:14px;background:var(--palette-card)}
.fundLearnSteps span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--palette-accent);color:var(--palette-on-accent);font-weight:900;margin-bottom:8px}
.fundLearnSteps b,.fundLearnSteps p{display:block}.fundLearnSteps p{font-size:11px;line-height:1.8;color:var(--palette-muted);margin:5px 0 0}
.fundV2CalcFlow span{display:block;color:var(--palette-muted);font-size:10px;margin-top:4px}
#fundamentalList .fundGrid{margin-top:4px}
body,button,input,select,textarea{font-variant-ligatures:normal;text-rendering:optimizeLegibility}
@media(max-width:1050px){.fundLearnSteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.fundR12Progress{grid-template-columns:1fr!important}.fundLearnSteps{grid-template-columns:1fr}}
/* ===== end r13 ===== */

/* Merged approved UI corrections */
/* Keep the legend aligned with the physical left-to-right valuation scale.
   Each Persian label retains its own right-to-left text direction. */
.valuationLabels{direction:ltr}
/* Keep the full market table reachable within the content viewport. */
body[data-page="live"] .main .marketTableCard{
  min-width:0;
  max-width:100%;
  max-height:70dvh;
  overflow:auto!important;
  touch-action:pan-x pan-y;
  border-radius:20px!important;
  clip-path:inset(0 round 20px);
  scrollbar-width:auto;
  scrollbar-color:auto;
}
body[data-page="live"] .marketTableCard::-webkit-scrollbar{width:7px;height:7px}
body[data-page="live"] .marketTableCard::-webkit-scrollbar-track{background:transparent;margin:16px}
body[data-page="live"] .marketTableCard::-webkit-scrollbar-track:vertical{
  margin-top:var(--market-header-height,52px);margin-bottom:18px;
}
body[data-page="live"] .marketTableCard::-webkit-scrollbar-track:horizontal{margin-left:18px;margin-right:18px}
body[data-page="live"] .marketTableCard::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--tx-muted) 45%,transparent);
  border:2px solid transparent;background-clip:padding-box;border-radius:999px;
}
body[data-page="live"] .marketTableCard::-webkit-scrollbar-corner{background:transparent}
body[data-page="live"] .marketTableCard::-webkit-scrollbar-button{display:none}
body[data-page="live"] .marketTableCard:focus-visible{
  outline:2px solid var(--id-cyan-base);
  outline-offset:-2px;
}
/* Emerald overlay on the middle content surface, dark theme only. */
body[data-theme="dark"] .main,body.theme-dark .main{
  background-image:
    radial-gradient(ellipse at 22% 30%,rgba(92,203,164,.025),transparent 58%),
    radial-gradient(ellipse at 78% 64%,rgba(3,30,25,.06),transparent 62%),
    radial-gradient(ellipse at 38% 88%,rgba(72,184,157,.018),transparent 55%),
    linear-gradient(rgba(16,185,129,.10),rgba(16,185,129,.10)),
    radial-gradient(circle at 10% 3%,rgba(56,213,165,.075),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(102,168,213,.07),transparent 28%),
    linear-gradient(180deg,#0C1E2C 0%,#081A26 100%)!important;
}
#networkSettingsForm label{display:block;margin-bottom:8px}
#networkSettingsForm input,#networkSettingsForm select{display:block;width:100%;min-height:42px;box-sizing:border-box}
#networkSettingsForm{gap:16px}
#networkSaveStatus{display:block;margin-top:8px}
.valuationLabels>span{direction:rtl}
/* Keep quote tiles clean and the radar introduction at its natural height. */
.metalQuoteCard::after{content:none!important;display:none!important}
.metalLiveIntro{align-self:start}

/* A broad emerald middle layer adds color without a bright yellow surface. */
body[data-theme="dark"] .metalLiveIntro,body.theme-dark .metalLiveIntro{
  background:linear-gradient(120deg,#12634F 0%,#147961 20%,#168565 45%,#168565 62%,#218361 82%,#2C7054 100%)!important;
  border:1px solid #40947A!important;
  color:#F3FAF7!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16)!important;
}
body[data-theme="dark"] .metalLiveIntro.silver,body.theme-dark .metalLiveIntro.silver{
  background:linear-gradient(125deg,#102735 0%,#244A57 35%,#315C65 65%,#394C59 100%)!important;
  border-color:#567580!important;
}
body[data-theme="dark"] .metalLiveIntro h3,body.theme-dark .metalLiveIntro h3{color:#F3FAF7!important}
body[data-theme="dark"] .metalLiveIntro p,body.theme-dark .metalLiveIntro p{color:#FFFFFF!important}
body[data-theme="dark"] .metalFreshLine span,body.theme-dark .metalFreshLine span{
  color:#E0EEE7!important;background:rgba(8,27,35,.3)!important;border-color:rgba(210,239,226,.25)!important;
}

/* Bright semantic glyphs override the older dark graphite icon rule. */
.finsetKpi:nth-child(1){--kpi-glyph:var(--id-gold-base)}
.finsetKpi:nth-child(2){--kpi-glyph:var(--id-cyan-base)}
.finsetKpi:nth-child(3){--kpi-glyph:var(--id-emerald-base)}
.finsetKpi:nth-child(4){--kpi-glyph:var(--id-magenta-base)}
body[data-theme="dark"] .finsetKpi .kpiArrow,body.theme-dark .finsetKpi .kpiArrow{
  color:var(--kpi-glyph)!important;
  border-color:color-mix(in srgb,var(--kpi-glyph) 50%,transparent)!important;
  background:color-mix(in srgb,var(--kpi-glyph) 10%,var(--sf-card))!important;
}
body[data-theme="dark"] .finsetKpi .kpiArrow svg,body.theme-dark .finsetKpi .kpiArrow svg{
  stroke:currentColor!important;
}
.side .nav button[data-page="brief"]{--neon-tone:var(--neon-teal)}

/* Scenario guide keeps its content height beside the long scenario list. */
body[data-page="scenarios"] #main>.grid>.card.s3{
  align-self:start;
}
@media(min-width:1281px){
  body[data-page="scenarios"] #main>.grid>.card.s3{
    position:sticky;
    top:16px;
    max-height:calc(100dvh - 104px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* Mobile snapshot follows the desktop card exactly (2026-09-17).
   The radial .mobileSnapshotGlow drew a hard-edged dark rectangle because its
   gradient stopped on a non-zero alpha inside a square box; it is hidden rather
   than deleted so it can be brought back. */
.mobileSnapshotGlow{display:none!important}
.main .mobileSnapshot{position:relative;overflow:hidden}