/* ══════════════════════════════════════════════════════
   WEALTHVAULT V2 — design tokens (light = cool slate + white cards; dark = obsidian terminal)
   ══════════════════════════════════════════════════════ */
:root, [data-theme="light"] {
  /* Slate-Blue Canvas Base */
  --bg:          hsl(220, 25%, 97%);     /* Clean slate-white page background */
  --bg2:         hsl(220, 20%, 93%);     /* Sidebar base background */
  --surface:     hsl(0, 0%, 100%);       /* Card background */
  --surface2:    hsl(220, 16%, 96%);     /* Elevated surfaces/legends */
  --surface3:    hsl(220, 14%, 90%);
  --glass:       rgba(255, 255, 255, 0.92);
  --border:      hsla(220, 20%, 10%, 0.05);
  --border2:     hsla(220, 20%, 10%, 0.08);
  --border3:     hsla(220, 20%, 10%, 0.15);
  --text:        hsl(222, 47%, 11%);     /* Off-black text */
  --text2:       hsl(215, 25%, 27%);     /* Dark slate gray text */
  --text3:       hsl(215, 16%, 47%);     /* Medium gray text */

  /* Curated Palette - Sophisticated Financial Hues */
  --accent:      hsl(217, 91%, 56%);     /* Sapphire Blue */
  --accent2:     hsla(217, 91%, 56%, 0.08);
  --indigo:      hsl(239, 84%, 60%);
  --indigo2:     hsla(239, 84%, 60%, 0.08);
  --teal:        hsl(172, 66%, 40%);
  --teal2:       hsla(172, 66%, 40%, 0.08);
  --green:       hsl(142, 69%, 40%);     /* Emerald Green (Positive P&L) */
  --green2:      hsla(142, 69%, 40%, 0.08);
  --red:         hsl(346, 77%, 49%);     /* Crimson Red (Negative P&L) */
  --red2:        hsla(346, 77%, 49%, 0.08);
  --purple:      hsl(271, 76%, 53%);
  --purple2:     hsla(271, 76%, 53%, 0.08);
  --blue:        hsl(217, 91%, 56%);
  --blue2:       hsla(217, 91%, 56%, 0.08);
  --gold:        hsl(35, 92%, 50%);
  --gold2:       hsla(35, 92%, 50%, 0.08);
  --amber:       hsl(25, 95%, 53%);
  --amber2:      hsla(25, 95%, 53%, 0.08);

  --font:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-heading:'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:        'JetBrains Mono', monospace;
  --nav-w:       230px;
  --top-h:       56px;
  --r:           14px;
  --r-sm:        10px;
  --r-lg:        20px;
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --shadow:      0 2px 8px -2px rgba(15, 23, 42, 0.04), 0 12px 24px -4px rgba(15, 23, 42, 0.03);
  --shadow-lg:   0 16px 40px -8px rgba(15, 23, 42, 0.08);
  
  /* Shared “vault AI” panels (sections + dashboard) */
  --vault-ai-hero-a:hsl(210, 40%, 98%);
  --vault-ai-hero-b:hsl(220, 25%, 95%);
  --vault-ai-panel-a:hsl(0, 0%, 100%);
  --vault-ai-panel-b:hsl(210, 40%, 98%);
  --vault-ai-line:hsla(220, 20%, 10%, 0.05);
  --vault-ai-mist:hsla(142, 69%, 40%, 0.12);
}

[data-theme="dark"] {
  /* Obsidian Space Base */
  --bg:          hsl(224, 71%, 4%);      /* Deep space black-blue */
  --bg2:         hsl(222, 47%, 7%);      /* Sidebar base */
  --surface:     hsl(224, 40%, 10%);     /* Card base background */
  --surface2:    hsl(223, 35%, 13%);     /* Elevated surfaces/legends */
  --surface3:    hsl(223, 30%, 18%);
  --glass:       rgba(15, 23, 42, 0.85);
  --border:      hsla(217, 30%, 60%, 0.08);
  --border2:     hsla(217, 30%, 60%, 0.14);
  --border3:     hsla(217, 30%, 60%, 0.24);
  --text:        hsl(210, 40%, 98%);     /* Clean white-blue text */
  --text2:       hsl(215, 20%, 75%);     /* Soft gray text */
  --text3:       hsl(215, 14%, 55%);     /* Dark gray text */

  --accent:      hsl(217, 91%, 60%);
  --accent2:     hsla(217, 91%, 60%, 0.12);
  --indigo:      hsl(239, 84%, 68%);
  --indigo2:     hsla(239, 84%, 68%, 0.12);
  --teal:        hsl(172, 66%, 45%);
  --teal2:       hsla(172, 66%, 45%, 0.12);
  --green:       hsl(142, 72%, 43%);     /* Glowing green */
  --green2:      hsla(142, 72%, 43%, 0.12);
  --red:         hsl(346, 87%, 60%);     /* Soft crimson */
  --red2:        hsla(346, 87%, 60%, 0.12);
  --purple:      hsl(271, 76%, 60%);
  --purple2:     hsla(271, 76%, 60%, 0.12);
  --blue:        hsl(217, 91%, 60%);
  --blue2:       hsla(217, 91%, 60%, 0.12);
  --gold:        hsl(35, 92%, 50%);
  --gold2:       hsla(35, 92%, 50%, 0.12);
  --amber:       hsl(25, 95%, 58%);
  --amber2:      hsla(25, 95%, 58%, 0.12);

  --shadow:      0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 16px 64px rgba(0, 0, 0, 0.6);
  --vault-ai-hero-a:hsl(222, 47%, 6%);
  --vault-ai-hero-b:hsl(224, 71%, 3%);
  --vault-ai-panel-a:hsl(224, 40%, 8%);
  --vault-ai-panel-b:hsl(224, 71%, 3%);
  --vault-ai-line:hsla(217, 30%, 60%, 0.06);
  --vault-ai-mist:hsla(142, 72%, 43%, 0.18);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;min-height:100dvh;-webkit-text-size-adjust:100%;transition:background-color .25s ease,color .25s ease;font-family:var(--font)}
body{font-family:var(--font);font-weight:400;background:var(--bg);color:var(--text);height:100%;min-height:100dvh;overflow:hidden;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease}
input,select,textarea,button{font-family:inherit;font-size:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--border3)}

/* ── LAYOUT ── */
#app{display:flex;height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;background:var(--bg);transition:background-color .25s ease}
#sidebar{
  width:var(--nav-w);flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  transition:background-color .25s ease,border-color .25s ease;
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;max-height:100dvh;overflow-y:auto;overflow-x:hidden;
  position:relative;z-index:50;
}
#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#mob-overlay{
  display:none;position:fixed;inset:0;z-index:199;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
}
#mob-overlay.open{display:block}
/* Desktop / wide Chrome: optional start with nav hidden (localStorage wv2_sidebarDocked === '0') */
@media(min-width:769px){
  #app.sidebar-hidden #sidebar{
    position:fixed;left:calc(-1 * var(--nav-w));top:0;bottom:0;
    width:var(--nav-w);z-index:200;flex-shrink:0;
    transition:left .28s var(--ease);
    box-shadow:4px 0 32px rgba(0,0,0,.45);
    padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));
  }
  #app.sidebar-hidden #sidebar.open{left:0}
  .mob-menu-toggle{display:none!important}
  #app.sidebar-hidden .mob-menu-toggle{display:flex!important;align-items:center;justify-content:center}
}
#topbar{
  min-height:var(--top-h);flex-shrink:0;
  background:var(--bg2);border-bottom:1px solid var(--border);
  transition:background-color .25s ease,border-color .25s ease;
  display:flex;align-items:center;gap:10px;padding:0 20px;
  padding-top:max(0px,env(safe-area-inset-top));
  position:relative;z-index:40;
}
#content{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));transition:background-color .25s ease}
.section{display:none;padding:24px;animation:fadeIn .2s var(--ease)}
.section.active{display:block}
.section-title,.topbar-title,.nav-logo-text,.card-title,.modal-title{font-family:var(--font-heading);font-weight:800;letter-spacing:-0.02em}
.btn,.nav-item,.holding-actions button{font-family:var(--font);font-weight:600}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.price-tick{animation:priceTick .6s ease}
@keyframes priceTick{0%{color:var(--text)}15%{color:var(--green);text-shadow:0 0 6px rgba(34,197,94,.3)}100%{color:inherit;text-shadow:none}}
@keyframes countUp{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ── SIDEBAR HEADER (logo + compact collapse) ── */
.sidebar-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:14px 12px 10px 14px;flex-shrink:0;border-bottom:1px solid var(--border);
}
.sidebar-collapse-toggle{
  flex-shrink:0;width:32px;height:32px;margin-top:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;border:1px solid var(--border2);background:var(--surface);
  color:var(--text2);font-size:15px;line-height:1;transition:background .15s var(--ease),border-color .15s,color .15s;
}
.sidebar-collapse-toggle:hover{
  background:var(--surface2);border-color:var(--border3);color:var(--text);
}
.sidebar-header-actions{
  display:flex;align-items:flex-start;gap:6px;flex-shrink:0;margin-top:2px;
}
/* Pin ↔ only when desktop sidebar is temporarily open (collapsed mode + ☰ flyout) */
.sidebar-pin-toggle{display:none!important}
@media(min-width:769px){
  #app.sidebar-hidden #sidebar.open .sidebar-pin-toggle{display:inline-flex!important}
}
/* ── SIDEBAR LOGO ── */
.nav-logo{
  padding:0;display:flex;align-items:center;gap:10px;min-width:0;flex:1;
}
.nav-logo-mark{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#d97706);
  display:grid;place-items:center;font-size:18px;
  box-shadow:0 0 20px rgba(245,158,11,0.25);
}
.nav-logo-text{font-size:16px;font-weight:800;letter-spacing:-.3px}
.nav-logo-sub{font-size:10px;color:var(--text3);font-weight:500;letter-spacing:.5px;text-transform:uppercase}

/* ── SIDEBAR NAV ── */
.nav-section-label{
  font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--text3);padding:16px 16px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 16px;margin:1px 8px;border-radius:var(--r-sm);
  color:var(--text2);font-size:13px;font-weight:500;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
  position:relative;cursor:pointer;
  background:none;border:none;width:calc(100% - 16px);text-align:left;
}
.nav-item:hover{
  background:var(--surface);
  color:var(--text);
  transform: translateX(4px);
}
.nav-item.active{
  background:linear-gradient(90deg, var(--accent2), transparent);
  color:var(--accent);
  font-weight:700;
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:15%;height:70%;width:4px;
  background:var(--accent);border-radius:0 4px 4px 0;
  box-shadow: 0 0 10px var(--accent);
  transition: all 0.3s var(--ease);
}
.nav-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-badge{
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;
  background:var(--surface3);color:var(--text2);min-width:18px;text-align:center;
  font-family:var(--mono);transition:all .2s;
}
.nav-item.active .nav-badge{background:rgba(245,158,11,.2);color:var(--accent)}
.nav-divider{height:1px;background:var(--border);margin:8px 16px}

/* ── SIDEBAR MEMBER SECTION ── */
.nav-member-section{padding:12px 16px;border-top:1px solid var(--border);margin-top:auto}
.member-label{font-size:10px;color:var(--text3);font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px}
.member-chips{display:flex;flex-wrap:wrap;gap:5px}
.member-chip{
  font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--text2);cursor:pointer;transition:all .15s;
}
.member-chip:hover{border-color:var(--accent);color:var(--accent)}
.member-chip.active{background:var(--accent2);border-color:var(--accent);color:var(--accent)}

/* ── TOPBAR ── */
.topbar-breadcrumb{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.topbar-title{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-sub{font-size:12px;color:var(--text3);white-space:nowrap}
.topbar-divider{width:1px;height:20px;background:var(--border2)}
.topbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
.topbar-pill{
  display:flex;align-items:center;gap:5px;padding:5px 10px;
  border-radius:99px;border:1px solid var(--border2);background:var(--surface);
  font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.topbar-pill:hover{border-color:var(--border3);color:var(--text)}
.topbar-pill.active{border-color:var(--indigo);background:var(--indigo2);color:var(--indigo)}

/* ── MARKET INDEX TICKER TAPE (scrolling strip, same quote format) ── */
#mkt-tape{
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:8px 0;overflow:hidden;position:relative;
  transition:background-color .25s ease,border-color .25s ease;
}
#mkt-tape::before,#mkt-tape::after{
  content:'';position:absolute;top:0;bottom:0;width:36px;z-index:2;pointer-events:none;
}
#mkt-tape::before{
  left:0;background:linear-gradient(90deg,var(--bg2),transparent);
}
#mkt-tape::after{
  right:0;background:linear-gradient(270deg,var(--bg2),transparent);
}
.mkt-tape-scroll{
  display:flex;width:max-content;
  animation:mktTapeScroll 48s linear infinite;
  font-size:12px;font-weight:600;line-height:1.45;font-family:var(--font);
}
.mkt-tape-scroll:hover{animation-play-state:paused}
.mkt-tape-chunk{
  display:flex;align-items:baseline;flex-shrink:0;flex-wrap:nowrap;
  gap:8px 32px;padding:0 24px;
}
.mkt-index-item{
  cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.mkt-index-item:hover{opacity:.88}
@keyframes mktTapeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .mkt-tape-scroll{animation:none}
  .mkt-tape-chunk:last-child{display:none}
}
.mkt-index-item .mkt-idx-name{
  color:var(--text2);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;margin-right:5px;
}
.mkt-index-item .mkt-idx-val{
  color:var(--text);font-weight:600;margin-right:5px;
}
.mkt-index-item .mkt-idx-move,.mkt-index-item .mkt-idx-pct{font-weight:600}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-bottom:24px;align-items:stretch}
.kpi-grid > .kpi-card{min-width:0}
.kpi-card{
  background:linear-gradient(145deg, var(--surface), var(--surface2));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px;cursor:pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.25s ease, background 0.25s ease;
  position:relative;overflow:hidden;
  min-height:140px;display:flex;flex-direction:column;justify-content:flex-start;
  box-shadow: var(--shadow);
}
.kpi-card:hover{
  border-color:var(--border3);
  transform:translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
}
.kpi-card::before{
  content:'';position:absolute;inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.kpi-card:hover::before{opacity:1}
.kpi-card::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.05),transparent 50%);
  pointer-events:none;
}
.kpi-card:hover::after{opacity:1}
.kpi-card-hero{
  grid-column:span 2;
  background:var(--surface);
  border-color:var(--accent2);
  transition:background .25s ease,border-color .25s ease;
}
[data-theme="dark"] .kpi-card-hero{
  background:linear-gradient(135deg,#0e1628 0%,#152040 50%,#0e1628 100%);
  border-color:rgba(245,158,11,.25);
}
.kpi-card-hero-narrow{grid-column:span 1;min-width:0}
.kpi-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kpi-icon{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-size:14px;flex-shrink:0;background:var(--surface2);
}
.kpi-lbl{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;flex:1}
.kpi-val{font-family:var(--font);font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.kpi-hero .kpi-val{font-size:32px;color:var(--accent)}
.kpi-sub{font-size:11px;color:var(--text3)}
/* Pills in dashboard cards: cap width to grid cell; scroll horizontally if label is very long (e.g. large %) */
.kpi-chg{
  font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:2px;
  padding:3px 8px;border-radius:99px;
  align-self:flex-start;
  max-width:100%;
  min-width:0;
  width:auto;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  box-sizing:border-box;
  letter-spacing:-.02em;
}
.kpi-chg::-webkit-scrollbar{display:none;height:0;width:0}
.kpi-chg.up{background:var(--green2);color:var(--green)}
.kpi-chg.down{background:var(--red2);color:var(--red)}
.kpi-chg.neutral{background:var(--surface2);color:var(--text3)}

/* ── CARDS ── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.25s ease, background 0.25s ease;
  box-shadow: var(--shadow);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border2);
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;
}
.card-title{font-size:13px;font-weight:700;color:var(--text)}
.card-sub{font-size:11px;color:var(--text3)}
.card-body{padding:16px}
.card-body-sm{padding:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border-radius:var(--r-sm);font-size:13px;font-weight:600;border:none;
  cursor:pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space:nowrap;
}
.btn:hover{
  transform: translateY(-1px);
}
.btn:active{
  transform: scale(0.97);
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent);filter:brightness(0.92);color:#fff}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border2)}
.btn-secondary:hover{border-color:var(--border3);background:var(--surface3);transform: translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface2);color:var(--text);transform: translateY(-1px)}
.btn-danger{background:var(--red2);color:var(--red);border:1px solid transparent}
.btn-danger:hover{background:rgba(248,113,113,.25);border-color:var(--red);transform: translateY(-1px)}
.btn-icon{width:32px;height:32px;padding:0;border-radius:var(--r-sm);justify-content:center}
.btn-sm{padding:4px 10px;font-size:11px;border-radius:6px}
.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ── BADGES ── */
.badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;display:inline-block}
.badge-default{background:var(--surface2);color:var(--text2)}
.badge-green{background:var(--green2);color:var(--green)}
.badge-red{background:var(--red2);color:var(--red)}
.btn-sell{background:var(--red2)!important;color:var(--red)!important;border:1px solid rgba(248,113,113,.3)!important;font-size:11px!important;font-weight:700!important}
.btn-sell:hover{background:var(--red)!important;color:#fff!important}
.trend-range-btn.active{background:var(--green2)!important;color:var(--green)!important;border-color:var(--green)!important}

/* Dashboard: asset allocation legend (sorted high → low), reference-style rows */
.dash-alloc-shell{display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,1.1fr);gap:20px;align-items:center}
@media(max-width:900px){.dash-alloc-shell{grid-template-columns:1fr;justify-items:center}}
.dash-alloc-list-wrap{width:100%;max-height:260px;overflow-y:auto;padding-right:4px}
.dash-alloc-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;gap:10px 14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border2);font-size:12px}
.dash-alloc-row:last-child{border-bottom:none}
.dash-alloc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dash-alloc-name{color:var(--text);font-weight:600;text-align:left;min-width:0}
.dash-alloc-val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);white-space:nowrap;font-size:12px;text-align:right}
.dash-alloc-pct{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:800;color:var(--text3);font-size:12px;text-align:right;min-width:2.75rem}

/* Portfolio growth: legend swatches */
.pg-leg{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text3)}
.pg-leg-line-solid{width:14px;height:3px;border-radius:2px;flex-shrink:0}
.pg-leg-line-dash{width:16px;height:0;border:none;border-top:3px dotted;flex-shrink:0;background:transparent}

.kpi-card[data-kpi="cash"].negative .kpi-val{color:var(--red)}
.badge-gold{background:var(--gold2);color:var(--gold)}
.badge-blue{background:var(--blue2);color:var(--blue)}
.badge-teal{background:var(--teal2);color:var(--teal)}
.badge-purple{background:var(--purple2);color:var(--purple)}
.badge-indigo{background:var(--indigo2);color:var(--indigo)}

/* ── TABLES ── */
.table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  max-height: min(860px, calc(100vh - 220px));
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
thead th{
  padding:12px 14px;text-align:left;
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text3);background:var(--surface2);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
thead th:first-child{
  position: sticky;
  left: 0;
  z-index: 12;
  border-right:1px solid var(--border);
}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--text2);background:var(--surface3)}
th.sortable .sort-icon{font-size:10px;opacity:.8;margin-left:4px;display:inline;vertical-align:middle}
tbody tr{transition:background .12s}
td{
  padding:12px 14px;vertical-align:middle;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
tbody td:first-child{
  position: sticky;
  left: 0;
  z-index: 11;
  border-right:1px solid var(--border);
  font-weight:600;
  background:var(--surface);
}
tbody tr:hover td{background:var(--surface2)}
tbody tr:last-child td{border-bottom:none}
tfoot tr.table-total td{
  background:var(--surface2);font-weight:600;padding:12px 14px;
  border-top:2px solid var(--border);
  position: sticky; bottom: 0; z-index: 10;
}
tfoot tr.table-total td:first-child{
  position: sticky; left: 0; bottom: 0; z-index: 12; border-right:1px solid var(--border);
}
.td-mono{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.td-bold{font-weight:600;color:var(--text)}
.td-muted{color:var(--text3);font-size:11px}
.td-green{color:var(--green);font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums}
.td-red{color:var(--red);font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums}
.td-gold{color:var(--gold);font-weight:600}

/* Table toolbar */
.table-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface2);
}
.table-search{
  flex:1;min-width:160px;max-width:260px;background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--r-sm);
  padding:6px 12px;color:var(--text);outline:none;font-size:13px;
  transition:border-color .15s;
}
.table-search::placeholder{color:var(--text3)}
.table-search:focus{border-color:var(--indigo)}
.table-select{
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-sm);
  padding:6px 10px;color:var(--text2);font-size:12px;outline:none;cursor:pointer;
}
.table-select:focus{border-color:var(--indigo)}

/* ── FORMS & MODALS ── */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(8,12,22,0.6);
  display:none;align-items:center;justify-content:center;padding:16px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation:fadeIn 0.3s var(--ease);
}
.modal-overlay.open{display:flex}
/* Full-screen modal for mobile (Gainers/Losers list, All Holdings) */
.modal-overlay.movers-fullscreen .modal,
.modal-overlay.holdings-fullscreen .modal{max-width:none;width:100%;height:100%;max-height:none;border-radius:0;border:none}
@media(min-width:769px){
  .modal-overlay.holdings-fullscreen .modal,
  .modal-overlay.movers-fullscreen.holdings-fullscreen .modal{max-width:1040px;max-height:92vh;border-radius:var(--r-lg);border:1px solid var(--border2)}
}
@media(max-width:768px){
  .modal-overlay.movers-fullscreen,
  .modal-overlay.holdings-fullscreen{padding:0;align-items:stretch}
  .modal-overlay.movers-fullscreen .modal,
  .modal-overlay.holdings-fullscreen .modal{min-height:100dvh;min-height:100vh}
}
.modal{
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:modalSlideUp 0.45s var(--ease);
}
@keyframes modalSlideUp{
  from{opacity:0;transform:translateY(30px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.modal-lg{max-width:680px}
.modal-xl{max-width:1040px;max-height:92vh}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.modal-title{font-size:15px;font-weight:700}
.modal-close{
  width:28px;height:28px;border-radius:50%;background:var(--surface2);
  border:1px solid var(--border);color:var(--text2);font-size:16px;
  display:grid;place-items:center;cursor:pointer;transition:all .15s;flex-shrink:0;
}
.modal-close:hover{background:var(--surface3);color:var(--text)}
.modal-body{padding:20px}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;letter-spacing:.3px}
.form-input{
  width:100%;background:var(--surface2);border:1px solid var(--border2);
  border-radius:var(--r-sm);padding:9px 12px;color:var(--text);
  outline:none;transition:border-color .15s;font-size:13px;
}
.form-input:focus{border-color:var(--indigo)}
.form-input::placeholder{color:var(--text3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-hint{font-size:11px;color:var(--text3);margin-top:4px}
.form-error{font-size:12px;color:var(--red);margin-top:8px;min-height:18px}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}

/* ── SECTION HEADERS ── */
.section-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.section-title{font-size:22px;font-weight:800;letter-spacing:-.4px}
.section-sub{font-size:13px;color:var(--text3);margin-top:2px}
.last-price-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--accent);background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.25);padding:3px 10px;border-radius:99px;margin-top:4px;letter-spacing:.3px;white-space:nowrap}
.price-pulse{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;animation:pricePulse 1.5s ease-in-out infinite}
@keyframes pricePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{opacity:.7;box-shadow:0 0 0 4px rgba(34,197,94,0)}}
.section-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── Vault section shell + KPI (shared with Trading Journal look) ── */
.section-header.vault-section-hero{
  position:relative;
  overflow:hidden;
  align-items:flex-start;
  padding:24px 28px;margin-bottom:24px;
  background:linear-gradient(135deg, var(--accent2), transparent 75%), var(--surface);
  border:1px solid var(--border2);border-radius:var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease;
}
.section-header.vault-section-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 10% 50%, rgba(255,255,255,0.04), transparent 60%);
}
.vault-section-eyebrow{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
.vault-section-hero .section-title{margin-bottom:4px; font-size:24px; letter-spacing: -0.02em;}
.vault-section-hero .section-actions .btn{border-radius:10px;font-weight:600; padding: 8px 16px;}
.section-header.vault-section-hero.vault-hero--teal{
  background:linear-gradient(125deg,var(--teal2),transparent 60%),var(--surface);
}
.section-header.vault-section-hero.vault-hero--teal .vault-section-eyebrow{color:var(--teal)}
.kpi-grid.vault-kpi-bento{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;margin-bottom:18px;
  align-items:start;
}
.kpi-grid.vault-kpi-bento .kpi-card{
  border:1px solid var(--border);border-radius:var(--r);
  padding:14px 16px;
  background:linear-gradient(160deg,var(--surface),var(--surface2));
  box-shadow:var(--shadow);
  transition:transform .18s var(--ease),border-color .18s,box-shadow .18s;
  overflow:visible;
  min-height:0;
}
.kpi-grid.vault-kpi-bento .kpi-card:hover{
  border-color:var(--border3);transform:translateY(-2px);box-shadow:var(--shadow-lg);
}
/* Section KPIs: row stays in card; long % pills scroll inside pill, row scrolls if needed */
.kpi-val-block{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
  gap:12px;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;
  min-width:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.kpi-val-block::-webkit-scrollbar{display:none;height:0;width:0}
.kpi-val-block .kpi-val{
  margin-bottom:0;flex:0 0 auto;min-width:max-content;
  font-size:clamp(15px,2.6vw,20px);font-weight:700;white-space:nowrap;font-family:var(--font);
  line-height:1.15;letter-spacing:-.02em;
}
.kpi-val-block .kpi-chg{
  margin-top:0;flex:0 1 auto;min-width:0;max-width:100%;
  white-space:nowrap;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  font-size:11px;font-weight:700;
  padding:5px 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:4px;line-height:1.2;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.kpi-val-block .kpi-chg::-webkit-scrollbar{display:none;height:0;width:0}
.kpi-grid.vault-kpi-bento .kpi-val-block .kpi-chg.up,
.card-body .kpi-val-block .kpi-chg.up{
  background:rgba(52,211,153,.22);color:var(--green);border:1px solid rgba(52,211,153,.2);
}
.kpi-grid.vault-kpi-bento .kpi-val-block .kpi-chg.down,
.card-body .kpi-val-block .kpi-chg.down{
  background:rgba(248,113,113,.2);color:var(--red);border:1px solid rgba(248,113,113,.18);
}
.kpi-grid.vault-kpi-bento .kpi-val-block .kpi-chg.neutral,
.card-body .kpi-val-block .kpi-chg.neutral{
  background:var(--surface2);color:var(--text3);border:1px solid var(--border2);
}
[data-theme="light"] .kpi-grid.vault-kpi-bento .kpi-val-block .kpi-chg.up,
[data-theme="light"] .card-body .kpi-val-block .kpi-chg.up{
  background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.25);
}
[data-theme="light"] .kpi-grid.vault-kpi-bento .kpi-val-block .kpi-chg.down,
[data-theme="light"] .card-body .kpi-val-block .kpi-chg.down{
  background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.22);
}

/* Light theme: softer cards (reference-style separation without harsh borders) */
[data-theme="light"] .card{
  border:none;
  box-shadow:var(--shadow);
}

/* Dashboard KPI grid — same density as Stock/MF vault bento (content-sized rows, no extra vertical flex) */
.dash-kpi-insights.kpi-grid.vault-kpi-bento{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
  align-items:start;
  width:100%;
}
@media(max-width:1200px){
  .dash-kpi-insights.kpi-grid.vault-kpi-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .dash-kpi-insights.kpi-grid.vault-kpi-bento{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card{align-self:stretch}
}
@media(max-width:560px){
  .dash-kpi-insights.kpi-grid.vault-kpi-bento{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card{align-self:stretch;min-height:80px}
}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card{
  position:relative;
  background:var(--surface)!important;
  box-shadow:var(--shadow);
  border-radius:var(--r)!important;
  border:1px solid var(--border)!important;
  padding:14px 16px!important;
  overflow:hidden;
  min-height:0;
  height:auto;
  min-width:0;
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-self:stretch;
  gap:0;
}
@media(min-width:901px) {
  .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-kpi="networth"],
  .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-kpi="pl"] {
    grid-column: span 2;
  }
}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card:hover{
  box-shadow:var(--shadow-lg);
  border-color:var(--border2)!important;
}
/* Side Color Accents */
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="networth"]{ border-left: 3px solid var(--blue)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="pl"]{ border-left: 3px solid var(--green)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="in"]{ border-left: 3px solid var(--teal)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="us"]{ border-left: 3px solid var(--purple)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="mf"]{ border-left: 3px solid var(--teal)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="fd"]{ border-left: 3px solid var(--gold)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="metals"]{ border-left: 3px solid var(--gold)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="ret"]{ border-left: 3px solid var(--indigo)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="cash"]{ border-left: 3px solid var(--green)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="re"]{ border-left: 3px solid var(--amber)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="cashflow"]{ border-left: 3px solid var(--green)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="heatmap"]{ border-left: 3px solid var(--purple)!important; }
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="watchlist"]{ border-left: 3px solid var(--teal)!important; }
/* Web: main figure + % pill in one row (narrower tiles); mobile: stack like before */
@media(min-width:769px){
  .dash-kpi-insights .dash-kpi-primary-row{
    flex-direction:row;
    align-items:center;
    flex-wrap:nowrap;
    gap:10px;
    width:100%;
    min-width:0;
  }
  .dash-kpi-insights .dash-kpi-primary-row .kpi-val{
    flex:1 1 auto;
    min-width:0;
    margin-bottom:0!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .dash-kpi-insights .dash-kpi-primary-row .kpi-chg{
    flex:0 0 auto;
    margin-top:0!important;
    align-self:center;
    max-width:min(56%,100%);
    min-width:0;
  }
}
@media(max-width:768px){
  .dash-kpi-insights .dash-kpi-primary-row{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    width:100%;
  }
  .dash-kpi-insights .dash-kpi-primary-row .kpi-chg{max-width:100%}
}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .kpi-top{margin-bottom:6px;min-width:0;width:100%}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .kpi-lbl{
  font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--text3);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card > .kpi-val,
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .dash-kpi-primary-row .kpi-val{
  font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:0;
}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card > .kpi-val{
  flex:0 0 auto;
}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .dash-kpi-primary-row{
  flex:0 0 auto;
  width:100%;
}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .kpi-sub{
  flex-shrink:0;
  margin-top:6px;
  font-size:11px;line-height:1.35;color:var(--text3);
  min-width:0;overflow-wrap:break-word;word-break:break-word;
}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .kpi-chg{font-size:11px;font-weight:700;padding:4px 10px;margin-top:0}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .kpi-icon{width:26px;height:26px;border-radius:8px;font-size:12px}

/* Heatmap KPI: up / down / flat counts only (no mini grid) */
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-kpi="heatmap"] .kpi-top{margin-bottom:6px}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-kpi="heatmap"] .kpi-hm-stats{
  font-size:11px;margin-top:0;line-height:1.35;
  min-width:0;overflow-wrap:break-word;
  flex:0 0 auto;
  display:flex;
  align-items:center;
}
.dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card.kpi-card-heatmap-launch{
  justify-content:flex-start!important;
}

/* ── Vault AI shell: heroes, KPIs, cards (all sections except Cash Flow module) ── */
#content .section:not(#sec-cashflow) .section-header.vault-section-hero{
  position:relative;
  overflow:hidden;
  align-items:flex-start;
  padding:24px;
  margin-bottom:20px;
  border-radius:20px;
  border:1px solid var(--vault-ai-line)!important;
  background:linear-gradient(135deg,var(--vault-ai-hero-a),var(--vault-ai-hero-b))!important;
  box-shadow:0 8px 32px rgba(0,0,0,.18)!important;
}
[data-theme="dark"] #content .section:not(#sec-cashflow) .section-header.vault-section-hero{
  box-shadow:0 8px 40px rgba(0,0,0,.45)!important;
}
#content .section:not(#sec-cashflow) .section-header.vault-section-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 18% 45%, var(--vault-ai-mist), transparent 42%);
}
#content .section:not(#sec-cashflow) .section-header.vault-section-hero.vault-hero--teal::after{
  background:radial-gradient(circle at 18% 45%, rgba(45,212,191,.2), transparent 42%);
}
#content .section:not(#sec-cashflow) .section-header.vault-section-hero > *{
  position:relative;
  z-index:1;
}
#content .section:not(#sec-cashflow) .vault-section-hero .section-title{
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.25;
}
#content .section:not(#sec-cashflow) .vault-section-hero .section-sub{
  color:#94a3b8;
  margin-top:6px;
}
[data-theme="light"] #content .section:not(#sec-cashflow) .vault-section-hero .section-sub{
  color:var(--text3);
}
#content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento{
  gap:16px;
  margin-bottom:20px;
  align-items:start;
  width:100%;
}
#content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights){
  grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(200px,calc((100% - 42px) / 4),100%)),1fr));
}
@media(max-width:1200px){
  #content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights){
    grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(200px,calc((100% - 28px) / 3),100%)),1fr));
  }
}
@media(max-width:900px){
  #content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights){
    grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(180px,calc((100% - 14px) / 2),100%)),1fr));
  }
}
@media(max-width:560px){
  #content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights){
    grid-template-columns:minmax(0,1fr);
  }
}
/* Dashboard KPI — match Stock/MF bento: start-aligned tracks, compact tile height */
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento{
  align-items:start;
}
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card{
  min-height:0;
  height:auto;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
#content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento > .kpi-card{
  min-width:0;
  max-width:100%;
  background:linear-gradient(165deg,var(--vault-ai-panel-a),var(--vault-ai-panel-b))!important;
  border:1px solid var(--vault-ai-line)!important;
  border-radius:16px!important;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  transition:transform .3s ease,box-shadow .3s ease,border-color .25s ease!important;
}
[data-theme="dark"] #content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento > .kpi-card{
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
[data-theme="dark"] #content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento > .kpi-card:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 0 24px rgba(34,197,94,.22),0 12px 32px rgba(0,0,0,.35)!important;
  border-color:rgba(34,197,94,.2)!important;
}
[data-theme="light"] #content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento > .kpi-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 12px 32px rgba(34,197,94,.12),var(--shadow-lg)!important;
}

/* Side Color Accents (High Specificity) */
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="networth"]{ border-left: 3px solid var(--blue)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="pl"]{ border-left: 3px solid var(--green)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="in"]{ border-left: 3px solid var(--teal)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="us"]{ border-left: 3px solid var(--purple)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="mf"]{ border-left: 3px solid var(--teal)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="fd"]{ border-left: 3px solid var(--gold)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="metals"]{ border-left: 3px solid var(--gold)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="ret"]{ border-left: 3px solid var(--indigo)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="cash"]{ border-left: 3px solid var(--green)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="re"]{ border-left: 3px solid var(--amber)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="cashflow"]{ border-left: 3px solid var(--green)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="heatmap"]{ border-left: 3px solid var(--purple)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-dash-accent="watchlist"]{ border-left: 3px solid var(--teal)!important; }
#content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .kpi-lbl{
  color:#64748b;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
}
[data-theme="light"] #content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .kpi-lbl{
  color:var(--text3);
}
#content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights) > .kpi-card .kpi-lbl{
  color:#64748b;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
}
[data-theme="light"] #content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights) > .kpi-card .kpi-lbl{
  color:var(--text3);
}
#content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento > .kpi-card .kpi-icon{
  background:rgba(255,255,255,.06);
  border:1px solid var(--vault-ai-line);
}
[data-theme="light"] #content .section:not(#sec-cashflow) .kpi-grid.vault-kpi-bento > .kpi-card .kpi-icon{
  background:var(--surface2);
}
#content .section:not(#sec-cashflow) .grid-2.mb-4{gap:20px}
#content .section:not(#sec-cashflow) .card{
  position:relative;
  border-radius:18px!important;
  border:1px solid var(--vault-ai-line)!important;
  background:linear-gradient(145deg,var(--vault-ai-panel-a),var(--vault-ai-panel-b))!important;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.08)!important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease;
}
[data-theme="dark"] #content .section:not(#sec-cashflow) .card{
  box-shadow:0 6px 24px rgba(0,0,0,.32)!important;
}
#content .section:not(#sec-cashflow) .card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 0% 0%, rgba(34,197,94,.1), transparent 40%);
}
#content .section:not(#sec-cashflow) .card > .card-header,
#content .section:not(#sec-cashflow) .card > .card-body,
#content .section:not(#sec-cashflow) .card > .table-wrap,
#content .section:not(#sec-cashflow) .card > .tb-journal-toolbar{
  position:relative;
  z-index:1;
}
#content .section:not(#sec-cashflow) .card > .card-header{
  border-bottom:1px solid var(--vault-ai-line);
  background:transparent;
}
[data-theme="dark"] #content .section:not(#sec-cashflow) .card:hover{
  border-color:rgba(34,197,94,.12)!important;
  box-shadow:0 0 20px rgba(34,197,94,.1),0 8px 28px rgba(0,0,0,.35)!important;
}
#content .section:not(#sec-cashflow) .holding-chart-wrap{
  background:linear-gradient(165deg,var(--vault-ai-panel-a),var(--vault-ai-panel-b));
  border:1px solid var(--vault-ai-line);
  border-radius:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
}
[data-theme="dark"] #content .section:not(#sec-cashflow) .holding-chart-wrap{
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}
#news-widget .news-grid{
  gap:12px;
  padding:4px 2px 8px;
}
#news-widget .news-card{
  background:var(--vault-ai-panel-a);
  border:1px solid var(--vault-ai-line);
  border-radius:14px;
  padding:14px;
  transition:transform .3s ease,box-shadow .3s ease;
}
[data-theme="dark"] #news-widget .news-card:hover{
  transform:translateY(-4px);
  box-shadow:0 0 16px rgba(34,197,94,.18);
  border-color:rgba(34,197,94,.15);
}
[data-theme="light"] #news-widget .news-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(34,197,94,.1);
}
#content .section:not(#sec-cashflow) .mover-row{
  border-radius:8px;
  transition:background .2s, box-shadow .2s;
}
[data-theme="dark"] #content .section:not(#sec-cashflow) .mover-row:hover{
  background:rgba(255,255,255,.04)!important;
  box-shadow:0 0 14px rgba(34,197,94,.1);
}
[data-theme="light"] #content .section:not(#sec-cashflow) .mover-row:hover{
  background:var(--surface2)!important;
}
#content .section:not(#sec-cashflow) .dash-alloc-row{
  border-color:var(--vault-ai-line);
}
#content .section:not(#sec-cashflow) .pg-leg{color:#94a3b8}
[data-theme="light"] #content .section:not(#sec-cashflow) .pg-leg{color:var(--text3)}

/* P&L report: sortable headers + total row */
#sec-tradebook .tb-tpnl th.tb-pnl-sort{
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:color .12s;
}
#sec-tradebook .tb-tpnl th.tb-pnl-sort:hover{color:var(--accent)}
#sec-tradebook .tb-tpnl tfoot tr.tb-pnl-total td,
#sec-tradebook .tb-tpnl.sheet-format tfoot tr.table-total td{
  background:var(--surface2);
  font-weight:700;
  border-top:2px solid var(--border2);
  padding-top:12px;
  padding-bottom:12px;
}

/* ── ANALYTICS TABS ── */
.tab-bar{display:flex;justify-content:flex-start;align-items:center;gap:2px;padding:4px;background:var(--surface2);border-radius:var(--r-sm);border:1px solid var(--border);margin-bottom:20px;flex-wrap:wrap;scrollbar-width:none;-ms-overflow-style:none}
.tab-bar::-webkit-scrollbar{display:none;width:0;height:0}
.tab-btn{
  flex:0 0 auto;width:auto;min-width:max-content;max-width:none;
  padding:7px 14px;border-radius:6px;border:none;background:transparent;
  font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.tab-btn:hover{color:var(--text);background:var(--surface)}
.tab-btn.active{background:var(--surface3);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tab-bar.vault-tabs{
  gap:6px;padding:8px;background:var(--surface2);
  border:1px solid var(--border2);border-radius:var(--r-lg);margin-bottom:20px;
}
.tab-bar.vault-tabs .tab-btn{flex:0 0 auto;width:auto;min-width:max-content;border-radius:10px;padding:9px 14px;font-weight:700}
.tab-bar.vault-tabs .tab-btn:hover{background:var(--surface3)}
.tab-bar.vault-tabs .tab-btn.active{
  background:var(--surface);color:var(--accent);
  box-shadow:0 1px 0 var(--border),0 4px 14px rgba(0,0,0,.06);
}
[data-theme="dark"] .tab-bar.vault-tabs .tab-btn.active{
  box-shadow:0 0 0 1px var(--border2),0 8px 24px rgba(0,0,0,.35);
}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeIn .18s}

/* ── METALS TABS ── */
.metals-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:16px}
.metal-tab{
  flex:0 0 auto;width:auto;min-width:max-content;
  padding:7px 16px;border-radius:99px;border:1px solid var(--border2);
  font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;
  transition:all .15s;background:var(--surface);
}
.metal-tab:hover{color:var(--text);border-color:var(--border3)}
.metal-tab.active{background:var(--gold2);color:var(--gold);border-color:transparent}

/* ── CHART CONTAINERS ── */
.chart-wrap{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.holding-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;margin-bottom:20px}
@media(max-width:900px){.holding-layout{grid-template-columns:1fr}}
.holding-chart-wrap{background:var(--surface2);border-radius:var(--r);padding:20px;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.holding-chart-wrap .chart-wrap{height:300px;max-width:100%}
.holding-chart-wrap canvas{max-height:300px;max-width:100%}
/* Compact table spacing */
.holding-table th,.holding-table td{padding:8px 10px;font-size:12px}
.holding-table th{font-size:10px}
.holding-table .td-mono{white-space:nowrap}
.holding-table td:last-child{white-space:nowrap;min-width:140px;width:auto}
/* Content-sized columns; horizontal scroll via .table-wrap when needed */
.holding-table{table-layout:auto;width:max-content;min-width:100%}
/* Stock tables: avoid squeezed/overlapping numeric cols; MA cells stay distinct */
#sec-instocks .holding-table,
#sec-usstocks .holding-table{table-layout:auto;width:max-content;min-width:100%}
#sec-instocks .holding-table .col-stock-num,
#sec-usstocks .holding-table .col-stock-num{
  min-width:5.5rem;text-align:right;white-space:nowrap;vertical-align:middle
}
#sec-instocks .holding-table .stock-ma-cell,
#sec-usstocks .holding-table .stock-ma-cell{
  min-width:4.75rem;text-align:center;vertical-align:middle;
  padding:6px 4px!important;white-space:normal
}
#sec-instocks .holding-table td:last-child,
#sec-usstocks .holding-table td:last-child{min-width:200px;width:auto}
/* Stock tables: freeze Symbol (col 1) at left:0 */
#sec-instocks .holding-table th:nth-child(1),
#sec-usstocks .holding-table th:nth-child(1){
  position:sticky;left:0;z-index:12;
  background:var(--surface2);
  box-shadow:2px 0 5px -2px rgba(0,0,0,.12);
}
#sec-instocks .holding-table td:nth-child(1),
#sec-usstocks .holding-table td:nth-child(1){
  position:sticky;left:0;z-index:2;
  background:var(--surface);
  box-shadow:2px 0 5px -2px rgba(0,0,0,.08);
}
#sec-instocks tbody tr:hover td:nth-child(1),
#sec-usstocks tbody tr:hover td:nth-child(1){background:var(--surface2)}
/* Freeze ALL tfoot cells at bottom; Total (colspan=2) cell is sticky-left via inline style */
#sec-instocks tfoot td,
#sec-usstocks tfoot td{
  position:sticky;bottom:0;z-index:2;
  background:var(--surface2);
}
#sec-mf .table-wrap{overflow-x:auto;max-width:100%}
#sec-mf .holding-table{table-layout:auto;width:max-content;min-width:100%}
/* MF journal history modal — full width, readable on mobile */
#mf-journal-modal .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
#mf-journal-table.mf-journal-hist-table{width:100%;min-width:100%}
#mf-journal-table th,#mf-journal-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px}
#mf-journal-table th{text-align:left;color:var(--text3);font-weight:600;position:sticky;top:0;background:var(--surface);z-index:1}
#mf-journal-table .td-mono{font-family:var(--mono);font-size:12px}
#sec-mf .holding-table td:first-child{min-width:280px;white-space:nowrap}
#sec-mf .holding-table th:first-child{min-width:280px}
/* FD: match stock table readability — auto layout + scroll; platform / tenure / maturity stay visible */
#sec-fd .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
#sec-fd .holding-table{table-layout:auto;width:max-content;min-width:100%}
#sec-fd .holding-table.sheet-format{font-family:var(--font);font-weight:500}
#sec-fd .holding-table.sheet-format .td-mono{font-family:var(--font)}
#sec-fd .holding-table th:nth-child(3),
#sec-fd .holding-table td:nth-child(3){min-width:92px}
#sec-fd .holding-table th:nth-child(6),
#sec-fd .holding-table td:nth-child(6){min-width:108px;white-space:nowrap}
#sec-fd .holding-table th:nth-child(7),
#sec-fd .holding-table td:nth-child(7){min-width:104px;white-space:nowrap}
#sec-fd .holding-table td:last-child{min-width:200px;width:auto}
/* SGB + NPS/EPF: same table treatment as FD */
#sec-metals .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
#sec-metals .holding-table{table-layout:auto;width:max-content;min-width:100%}
#sec-metals .holding-table.sheet-format{font-family:var(--font);font-weight:500}
#sec-metals .holding-table.sheet-format .td-mono{font-family:var(--font)}
#sec-metals .holding-table td:last-child{min-width:200px;width:auto}
#sec-retirement .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
#sec-retirement .holding-table{table-layout:auto;width:max-content;min-width:100%}
#sec-retirement .holding-table.sheet-format{font-family:var(--font);font-weight:500}
#sec-retirement .holding-table.sheet-format .td-mono{font-family:var(--font)}
#sec-retirement .holding-table td:last-child{min-width:200px;width:auto}
/* Trade Book: toolbar shell (tabs + filters; segment styles under #sec-tradebook .tb-segmented) */
.tb-journal-toolbar{padding:0}
.tb-journal-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;box-sizing:border-box}
/* ── Trade Book: layout, readable dates, aligned numeric columns ── */
#sec-tradebook #tb-content{min-width:0;max-width:100%}
#sec-tradebook #tb-content .table-wrap{width:100%;max-width:100%;margin:0}
#sec-tradebook .tb-tax-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:20px;
}
@media(max-width:900px){
  #sec-tradebook .tb-tax-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  #sec-tradebook .tb-segmented{
    flex-wrap:wrap;
    overflow-x:visible;
    gap:6px;
  }
  #sec-tradebook .tb-seg{flex-shrink:0}
}
#sec-tradebook .tb-td-date{
  color:var(--text2);
  font-family:var(--mono);
  font-size:11px;
  white-space:nowrap;
}
#sec-tradebook .holding-table thead th{font-size:10px;letter-spacing:.04em}
#sec-tradebook .tb-tlog th,
#sec-tradebook .tb-tlog td{vertical-align:middle}
#sec-tradebook .tb-tlog th:nth-child(1),
#sec-tradebook .tb-tlog td:nth-child(1){text-align:left;min-width:6.5rem;max-width:13rem}
#sec-tradebook .tb-tlog th:nth-child(2),
#sec-tradebook .tb-tlog td:nth-child(2),
#sec-tradebook .tb-tlog th:nth-child(3),
#sec-tradebook .tb-tlog td:nth-child(3){text-align:center}
#sec-tradebook .tb-tlog th:nth-child(4),
#sec-tradebook .tb-tlog td:nth-child(4),
#sec-tradebook .tb-tlog th:nth-child(5),
#sec-tradebook .tb-tlog td:nth-child(5),
#sec-tradebook .tb-tlog th:nth-child(6),
#sec-tradebook .tb-tlog td:nth-child(6){text-align:right}
#sec-tradebook .tb-tlog th:nth-child(7),
#sec-tradebook .tb-tlog td:nth-child(7){text-align:left}
#sec-tradebook .tb-tlog th:nth-child(8),
#sec-tradebook .tb-tlog td:nth-child(8){text-align:center;white-space:nowrap}
#sec-tradebook .tb-tlog th:nth-child(9),
#sec-tradebook .tb-tlog td:nth-child(9){text-align:left;max-width:6rem;overflow:hidden;text-overflow:ellipsis}
#sec-tradebook .tb-tlog th:nth-child(10),
#sec-tradebook .tb-tlog td:nth-child(10){text-align:center;width:1%;padding-left:6px;padding-right:6px}
#sec-tradebook .tb-tpos th,
#sec-tradebook .tb-tpos td{vertical-align:middle}
#sec-tradebook .tb-tpos th:nth-child(1),
#sec-tradebook .tb-tpos td:nth-child(1){text-align:left;min-width:5rem;max-width:11rem}
#sec-tradebook .tb-tpos th:nth-child(2),
#sec-tradebook .tb-tpos td:nth-child(2),
#sec-tradebook .tb-tpos th:nth-child(3),
#sec-tradebook .tb-tpos td:nth-child(3),
#sec-tradebook .tb-tpos th:nth-child(4),
#sec-tradebook .tb-tpos td:nth-child(4),
#sec-tradebook .tb-tpos th:nth-child(5),
#sec-tradebook .tb-tpos td:nth-child(5),
#sec-tradebook .tb-tpos th:nth-child(6),
#sec-tradebook .tb-tpos td:nth-child(6),
#sec-tradebook .tb-tpos th:nth-child(7),
#sec-tradebook .tb-tpos td:nth-child(7),
#sec-tradebook .tb-tpos th:nth-child(8),
#sec-tradebook .tb-tpos td:nth-child(8),
#sec-tradebook .tb-tpos th:nth-child(9),
#sec-tradebook .tb-tpos td:nth-child(9){text-align:right}
#sec-tradebook .tb-tpos th:nth-child(10),
#sec-tradebook .tb-tpos td:nth-child(10){text-align:center}
#sec-tradebook .tb-tpos th:nth-child(11),
#sec-tradebook .tb-tpos td:nth-child(11){text-align:center;width:1%;white-space:nowrap}
#sec-tradebook .tb-tpnl th,
#sec-tradebook .tb-tpnl td{vertical-align:middle}
#sec-tradebook .tb-tpnl th:nth-child(1),
#sec-tradebook .tb-tpnl td:nth-child(1){text-align:left;min-width:4rem}
#sec-tradebook .tb-tpnl th:nth-child(2),
#sec-tradebook .tb-tpnl td:nth-child(2){text-align:left;min-width:5.5rem;max-width:12rem}
#sec-tradebook .tb-tpnl th:nth-child(3),
#sec-tradebook .tb-tpnl td:nth-child(3),
#sec-tradebook .tb-tpnl th:nth-child(4),
#sec-tradebook .tb-tpnl td:nth-child(4){text-align:left;white-space:nowrap}
#sec-tradebook .tb-tpnl th:nth-child(5),
#sec-tradebook .tb-tpnl td:nth-child(5),
#sec-tradebook .tb-tpnl th:nth-child(6),
#sec-tradebook .tb-tpnl td:nth-child(6),
#sec-tradebook .tb-tpnl th:nth-child(7),
#sec-tradebook .tb-tpnl td:nth-child(7),
#sec-tradebook .tb-tpnl th:nth-child(8),
#sec-tradebook .tb-tpnl td:nth-child(8),
#sec-tradebook .tb-tpnl th:nth-child(9),
#sec-tradebook .tb-tpnl td:nth-child(9),
#sec-tradebook .tb-tpnl th:nth-child(10),
#sec-tradebook .tb-tpnl td:nth-child(10),
#sec-tradebook .tb-tpnl th:nth-child(11),
#sec-tradebook .tb-tpnl td:nth-child(11),
#sec-tradebook .tb-tpnl th:nth-child(12),
#sec-tradebook .tb-tpnl td:nth-child(12),
#sec-tradebook .tb-tpnl th:nth-child(13),
#sec-tradebook .tb-tpnl td:nth-child(13){text-align:right}
#sec-tradebook .tb-tpnl th:nth-child(14),
#sec-tradebook .tb-tpnl td:nth-child(14){text-align:center}
.holding-table .btn-icon{min-width:28px;padding:4px}

/* ── Trading Journal (tax tiles + shell; hero/KPI use global .vault-*) ── */
#sec-tradebook .tb-tax-board .tb-tax-tile{
  border-radius:var(--r);border:1px solid var(--border2);
  padding:16px 18px;
  background:var(--surface);
  position:relative;overflow:hidden;
}
#sec-tradebook .tb-tax-board .tb-tax-tile::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--teal));
  border-radius:3px 0 0 3px;
}
#sec-tradebook .tb-tax-board .tb-tax-tile .tb-tax-val{font-size:clamp(18px,4vw,22px);font-weight:800;font-family:var(--mono)}
#sec-tradebook .tb-journal-shell{border-radius:var(--r-lg);border:1px solid var(--border2);box-shadow:var(--shadow);overflow:hidden}
#sec-tradebook .tb-segmented{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px;
  padding:12px 14px;margin:0;
  background:var(--surface2);
  border-bottom:1px solid var(--border2);
}
#sec-tradebook .tb-seg{
  flex:0 0 auto;width:auto;min-width:max-content;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;font-size:12px;font-weight:700;border:none;border-radius:10px;
  cursor:pointer;background:transparent;color:var(--text2);
  transition:background .15s,color .15s,box-shadow .15s;
  white-space:nowrap;
}
#sec-tradebook .tb-seg .tb-seg-ico{opacity:.85;font-size:13px}
#sec-tradebook .tb-seg.is-active{
  background:var(--surface);color:var(--accent);
  box-shadow:0 1px 0 var(--border),0 4px 14px rgba(0,0,0,.06);
}
[data-theme="dark"] #sec-tradebook .tb-seg.is-active{box-shadow:0 0 0 1px var(--border2),0 8px 24px rgba(0,0,0,.35)}
#sec-tradebook .tb-filter-bar{
  padding:12px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--border2);
}
#sec-tradebook .tb-filter-bar .tb-filter-search{
  flex:1 1 200px;min-width:0;max-width:100%;
  background:var(--surface2);border:1px solid var(--border2);border-radius:10px;
  padding:10px 12px;font-size:13px;color:var(--text);
}
#sec-tradebook .tb-filter-bar select.tb-filter-select,
#sec-tradebook .tb-filter-bar .tb-filter-select{
  background:var(--surface2);border:1px solid var(--border2);border-radius:10px;
  padding:8px 12px;font-size:12px;font-weight:600;color:var(--text);
}
#sec-tradebook .tb-table-panel{
  padding:0;background:var(--surface);
  border-top:none;
}
#sec-tradebook .tb-table-panel .table-wrap{
  padding:0; /* Remove padding to fix sticky header misalignment */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  max-height: min(860px, calc(100vh - 220px));
}

/* ── Real Estate (modern panels; hero uses .vault-section-hero.vault-hero--teal) ── */
#sec-realestate .re-stack{display:flex;flex-direction:column;gap:16px}
#sec-realestate .re-panel{
  border:1px solid var(--border2);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow);overflow:hidden;
}
#sec-realestate .re-panel-h{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);
  padding:14px 18px 0;margin-bottom:4px;
}
#sec-realestate .re-panel-body{padding:0 18px 18px}
#sec-realestate .re-two-col{
  display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;
}
#sec-realestate .re-prepay-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
#sec-realestate .re-prepay-row input[type=range]{flex:1;min-width:160px;accent-color:var(--teal)}
#sec-realestate .re-mini-stats{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:14px;
}
#sec-realestate .re-mini-stat{
  padding:12px 14px;background:var(--surface2);border-radius:var(--r-sm);
  border:1px solid var(--border);
}
#sec-realestate .re-mini-stat .re-ms-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
#sec-realestate .re-mini-stat .re-ms-val{font-size:15px;font-weight:800;font-family:var(--mono);margin-top:4px;white-space:nowrap;min-width:0}
#sec-realestate .re-insight .re-insight-val{white-space:nowrap}
#sec-realestate .re-chart-wrap{
  margin-top:16px;padding:18px;background:var(--surface2);border-radius:var(--r);
  border:1px solid var(--border2);
}
#sec-realestate .re-chart-wrap .re-chart-title{font-size:14px;font-weight:800;margin-bottom:4px}
#sec-realestate .re-chart-wrap .re-chart-sub{font-size:12px;color:var(--text3);margin-bottom:16px;line-height:1.45}
#sec-realestate .re-chart-canvas{position:relative;width:100%;min-height:300px;max-height:52vh}
#sec-realestate .re-legend-row{
  display:flex;flex-wrap:wrap;gap:16px 24px;margin-top:18px;align-items:flex-start;justify-content:space-between;
}
#sec-realestate .re-legend-pills{display:flex;flex-wrap:wrap;gap:12px 18px}
#sec-realestate .re-legend-pill{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text)}
#sec-realestate .re-legend-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0}
#sec-realestate .re-insight{
  flex:1;min-width:200px;max-width:400px;padding:14px 16px;
  background:var(--surface);border-radius:var(--r-sm);border:1px solid var(--border);
}
#sec-realestate .re-insight .re-insight-val{font-size:22px;font-weight:800;font-family:var(--mono);color:var(--green);margin-top:6px}
#sec-realestate .re-am-wrap{margin-top:8px;max-height:320px;overflow-y:auto;border-radius:var(--r-sm);border:1px solid var(--border2)}
#sec-realestate .re-kpi-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;
}
#sec-realestate .re-props-card .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){
  #sec-realestate .re-kpi-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  #sec-realestate .re-two-col{grid-template-columns:1fr}
}

/* Spreadsheet-style tables (Indian / US stocks + mutual funds) */
.holding-table.sheet-format{font-family:var(--font);font-weight:500}
.holding-table.sheet-format th,.holding-table.sheet-format td{
  border:1px solid var(--border3);text-align:center;vertical-align:middle
}
.holding-table.sheet-format th.sortable,.holding-table.sheet-format td.text-left{text-align:left}
.holding-table.sheet-format .td-mono{font-family:var(--font)}
.holding-table.sheet-format th.th-cmp,.holding-table.sheet-format th.th-cur-nav{background:#fce7f3;color:#0f172a}
[data-theme="dark"] .holding-table.sheet-format th.th-cmp,
[data-theme="dark"] .holding-table.sheet-format th.th-cur-nav{background:#4a2040;color:#fce7f3}
.holding-table.sheet-format td.td-cmp,.holding-table.sheet-format td.td-cur-nav{background:rgba(20,184,166,.22)}
[data-theme="dark"] .holding-table.sheet-format td.td-cmp,
[data-theme="dark"] .holding-table.sheet-format td.td-cur-nav{background:rgba(45,212,191,.14)}
.holding-table.sheet-format td.td-alloc-w{background:rgba(251,191,36,.15)}
[data-theme="dark"] .holding-table.sheet-format td.td-alloc-w{background:rgba(251,191,36,.1)}
.holding-table.sheet-format td.td-hold-time{background:rgba(34,197,94,.12)}
[data-theme="dark"] .holding-table.sheet-format td.td-hold-time{background:rgba(52,211,153,.1)}
.holding-table.sheet-format .td-sheet-blue{color:var(--blue);font-weight:600}
.holding-table.sheet-format .td-sheet-blue.td-neg{color:var(--red)}

/* ── ACTION BAR (unified across all sections) ── */
.holding-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;align-items:center}
.act-btn{
  display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:6px;
  font-size:11px;font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.act-btn:hover{transform:translateY(-1px)}
.act-btn-ghost{background:var(--surface2);color:var(--text2);border-color:var(--border2)}
.act-btn-ghost:hover{background:var(--surface3);color:var(--text);border-color:var(--border3)}
.act-btn-chart{background:rgba(99,102,241,.12);color:#818cf8;border-color:rgba(99,102,241,.3)}
.act-btn-chart:hover{background:rgba(99,102,241,.2);color:#a5b4fc}
.act-btn-lots{background:rgba(34,197,94,.08);color:#4ade80;border-color:rgba(34,197,94,.25)}
.act-btn-lots:hover{background:rgba(34,197,94,.15);color:#86efac}
.act-btn-sell{background:var(--red2);color:var(--red);border-color:rgba(248,113,113,.3)}
.act-btn-sell:hover{background:var(--red);color:#fff;border-color:var(--red)}
.act-btn-buy{background:rgba(34,197,94,.12);color:var(--green);border-color:rgba(34,197,94,.35)}
.act-btn-buy:hover{background:var(--green);color:#fff;border-color:var(--green)}
.act-btn-danger{background:rgba(248,113,113,.1);color:#f87171;border-color:rgba(248,113,113,.25)}
.act-btn-danger:hover{background:rgba(248,113,113,.2);color:#fca5a5}

/* ── EMPTY STATE ── */
.empty-state{padding:40px 20px;text-align:center}
.empty-icon{font-size:36px;margin-bottom:12px;opacity:.4}
.empty-title{font-size:15px;font-weight:600;color:var(--text2);margin-bottom:6px}
.empty-sub{font-size:13px;color:var(--text3)}

/* ── PROGRESS BAR ── */
.progress-bar{height:4px;background:var(--surface3);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;border-radius:99px;transition:width .6s var(--ease)}

/* ── TOASTS ── */
#toast-root{position:fixed;bottom:24px;right:24px;top:auto;left:auto;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:calc(100vw - 48px)}
.toast{
  background:var(--glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border2);
  border-radius:var(--r);
  padding:14px 20px;font-size:13px;font-weight:600;color:var(--text);
  box-shadow:var(--shadow-lg);pointer-events:all;max-width:min(340px,calc(100vw - 48px));
  animation:slideInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display:flex;align-items:center;gap:12px;
}
.toast.success{border-color:hsla(142, 69%, 40%, 0.3);background:hsla(142, 69%, 40%, 0.08);color:var(--green)}
.toast.error{border-color:hsla(346, 77%, 49%, 0.3);background:hsla(346, 77%, 49%, 0.08);color:var(--red)}
.toast.warn{border-color:hsla(35, 92%, 50%, 0.3);background:hsla(35, 92%, 50%, 0.08);color:var(--gold)}
@keyframes slideInUp{from{opacity:0;transform:translateY(24px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.tv-tape-wrap{background:#131722;border-radius:var(--r);overflow:hidden;min-height:44px;margin-bottom:16px}

/* ── SYNC BADGE ── */
.sync-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.sync-dot.synced{background:var(--green);box-shadow:0 0 6px var(--green)}
.sync-dot.syncing{background:var(--gold);animation:pulse 1s infinite}
.sync-dot.offline{background:var(--text3)}
.sync-dot.error{background:var(--red)}

/* ── NEWS: BLOOMBERG-STYLE TICKER TAPE ── */
.news-ticker-wrap{
  overflow:hidden;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-sm);margin:0 14px 10px;padding:8px 0;
  position:relative;
}
.news-ticker-wrap::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:40px;
  background:linear-gradient(90deg,var(--surface2),transparent);z-index:2;pointer-events:none;
}
.news-ticker-wrap::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:40px;
  background:linear-gradient(270deg,var(--surface2),transparent);z-index:2;pointer-events:none;
}
.news-ticker{
  display:flex;gap:24px;animation:newsTickerScroll 45s linear infinite;
  white-space:nowrap;padding-left:100%;
}
.news-ticker:hover{animation-play-state:paused}
.news-ticker span{
  font-size:12px;color:var(--text2);cursor:pointer;
  transition:color .15s;
}
.news-ticker span:hover{color:var(--accent)}
.news-ticker span::after{content:' • ';color:var(--text3);margin-left:24px}
.news-ticker span:last-child::after{content:''}
@keyframes newsTickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.news-live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:newsPulse 2s ease-in-out infinite;flex-shrink:0;
}
@keyframes newsPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{opacity:.9}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}

/* ── NEWS CARDS ── */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:14px}
.news-card{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);
  padding:14px;transition:all .2s;display:flex;flex-direction:column;gap:8px;cursor:pointer;
}
.news-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.news-card.positive{border-left:3px solid var(--green)}
.news-card.negative{border-left:3px solid var(--red)}
.news-card.neutral{border-left:3px solid var(--text3)}
.news-headline{font-size:12px;font-weight:700;color:var(--text);line-height:1.4}
.news-summary{font-size:11px;color:var(--text2);line-height:1.5}
.news-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}

/* ── MOVER CARDS ── */
.mover-row{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;
}
.mover-row:last-child{border-bottom:none}
.mover-row:hover{background:var(--surface2)}
.mover-chip{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;font-size:10px;font-weight:800;
}

/* ── TOPBAR MEMBER SWITCHER (always visible: sidebar open/closed, mobile + desktop) ── */
#member-switcher{
  display:flex;align-items:center;gap:4px;
  overflow-x:auto;flex:1;min-width:0;
  scrollbar-width:none;
  border-left:1px solid var(--border2);
  border-right:1px solid var(--border2);
  padding:0 12px;margin:0 4px;
  -webkit-overflow-scrolling:touch;
}
#member-switcher::-webkit-scrollbar{display:none}
#member-switcher button{flex-shrink:0}
/* Mobile: second row under title/actions — full width strip */
@media(max-width:768px){
  #topbar{flex-wrap:wrap;row-gap:0;padding-bottom:6px;min-height:unset}
  #member-switcher{
    order:10;
    flex:1 1 100%;
    max-width:100%;
    width:100%;
    border-left:none;
    border-right:none;
    margin:0;
    padding:6px 0 2px 0;
    border-top:1px solid var(--border2);
  }
  #member-switcher button{font-size:11px;padding:3px 8px 3px 4px}
  #member-switcher button [data-avatar]{width:20px;height:20px;font-size:8px}
}
#usd-pill{display:none!important}

/* ── MOBILE ── */
.mob-menu-toggle{display:none!important}
@media(max-width:768px){
  :root{--nav-w:280px}
  #sidebar{
    position:fixed;left:-280px;top:0;bottom:0;
    transition:left .25s var(--ease);z-index:200;
    box-shadow:4px 0 32px rgba(0,0,0,.6);
    padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 20px));
  }
  #sidebar.open{left:0}
  .mob-menu-toggle{display:flex!important;align-items:center;justify-content:center}
  .kpi-card-hero{grid-column:span 1}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .section{padding:16px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
  .table-wrap .holding-table{min-width:100%;width:max-content;table-layout:auto}
  .holding-table th,.holding-table td{padding:6px 8px;font-size:11px}
  .holding-table th{font-size:9px;white-space:nowrap}
  .section-header{flex-direction:column;gap:10px;align-items:flex-start}
  .section-actions{width:100%;display:flex;flex-wrap:wrap;gap:6px}
  .kpi-grid{grid-template-columns:1fr 1fr!important}
  /* Section bento KPIs: fixed 2×N grid (matches Trade Book / Indian Stocks mobile reference) */
  .kpi-grid.vault-kpi-bento{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px;
  }
  .kpi-grid.vault-kpi-bento .kpi-card{
    min-width:0;
    padding:12px 12px;
  }
  .kpi-grid.vault-kpi-bento .kpi-top{margin-bottom:8px}
  /* Horizontal scroll row: section KPIs only — dashboard uses vertical stack + equal-height grid */
  .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights) .kpi-val-block{
    gap:8px;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights) .kpi-val-block::-webkit-scrollbar{display:none;width:0;height:0}
  .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights) .kpi-val-block .kpi-val{
    font-size:clamp(11px,3.2vw,16px);
    flex:0 0 auto;
    min-width:max-content;
  }
  .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights) .kpi-val-block .kpi-chg{
    flex:0 0 auto;
    min-width:max-content;
    padding:4px 9px;
    font-size:10px;
  }
  .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights) > .kpi-card > .kpi-val{
    font-size:clamp(14px,4vw,18px);
  }
  .dash-kpi-insights.kpi-grid.vault-kpi-bento{gap:10px}
  #content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento{
    align-items:start!important;
  }
  #content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card{
    min-height:0!important;
    height:auto!important;
    align-self:start!important;
    box-sizing:border-box;
    padding:12px 12px!important;
  }
  .dash-kpi-insights.kpi-grid.vault-kpi-bento .dash-kpi-primary-row{
    flex:0 0 auto!important;
    width:100%;
    overflow-x:visible!important;
    max-width:100%;
  }
  .dash-kpi-insights.kpi-grid.vault-kpi-bento .dash-kpi-primary-row .kpi-val{
    flex:0 1 auto!important;
    min-width:0!important;
    width:100%;
    max-width:100%;
    white-space:normal!important;
  }
  .dash-kpi-insights.kpi-grid.vault-kpi-bento .dash-kpi-primary-row .kpi-chg{
    flex:0 0 auto!important;
    max-width:100%;
  }
  .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card > .kpi-val{
    flex:0 0 auto!important;
    width:100%;
    min-width:0;
  }
  #content .section:not(#sec-cashflow) .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card[data-kpi="heatmap"] .kpi-hm-stats{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    min-height:0!important;
    margin-top:0!important;
  }
  .holding-actions{flex-wrap:wrap;gap:4px}
  .act-btn{padding:4px 7px;font-size:10px}
}
@media(max-width:768px){
  .lev-grid{grid-template-columns:1fr!important}
}
@media(max-width:480px){
  .section{padding:12px}
  .kpi-card{padding:12px}
  .kpi-val{font-size:18px!important}
  .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card > .kpi-val,
  .dash-kpi-insights.kpi-grid.vault-kpi-bento > .kpi-card .dash-kpi-primary-row .kpi-val{
    font-size:clamp(0.95rem,3.6vw,1.25rem)!important;
  }
  /* Keep section bento rows readable in 2-col; don't let global .kpi-val !important break P&L + pill */
  .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights) .kpi-val-block .kpi-val{
    font-size:clamp(10px,2.9vw,15px)!important;
  }
  .kpi-grid.vault-kpi-bento:not(.dash-kpi-insights) > .kpi-card > .kpi-val{
    font-size:clamp(12px,3.6vw,16px)!important;
  }
  .holding-layout{grid-template-columns:1fr}
  .holding-chart-wrap .chart-wrap{height:220px}
  #topbar{padding:0 10px;gap:8px}
  .topbar-title{font-size:14px}
  .topbar-actions{gap:4px}
  .topbar-pill{font-size:10px;padding:4px 8px}
  #refresh-btn{font-size:11px;padding:4px 10px}
}

/* ── LIVE PRICE STATUS INDICATOR ── */
.price-status-wrap{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;white-space:nowrap}
.price-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:background .3s}
.price-status-dot.live{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.5);animation:statusPulse 2s ease-in-out infinite}
.price-status-dot.delayed{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.4)}
.price-status-dot.offline{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.4)}
.price-status-label{color:var(--text3);font-size:10px;font-weight:600;letter-spacing:.3px}
@keyframes statusPulse{0%,100%{opacity:1;box-shadow:0 0 6px rgba(34,197,94,.5)}50%{opacity:.6;box-shadow:0 0 12px rgba(34,197,94,.8)}}
#refresh-btn.refreshing{pointer-events:none;opacity:.7}
#refresh-btn.refreshing::before{content:'';display:inline-block;width:12px;height:12px;border:2px solid var(--text3);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;margin-right:4px;vertical-align:middle}

/* ── Cash Flow V3 — Premium Financial Intelligence Module ── */
@keyframes cf-fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes cf-countUp{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes cf-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes cf-pulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes cf-progressFill{from{width:0}to{width:var(--fill)}}
@keyframes cf-slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
#sec-cashflow{--cf-nav-h:0px}
#sec-cashflow .cf-shell{max-width:1280px;margin:0 auto;min-height:60vh}
#sec-cashflow .cf-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;transition:all .3s var(--ease);position:relative;overflow:hidden}
#sec-cashflow .cf-card:hover{border-color:var(--border2);box-shadow:0 8px 32px rgba(0,0,0,.06)}
[data-theme="dark"] #sec-cashflow .cf-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.25)}
#sec-cashflow .cf-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
#sec-cashflow .cf-card-header h3{margin:0;font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.01em}
#sec-cashflow .cf-card-header .cf-subtle{margin:0;color:var(--text3);font-size:11px;line-height:1.5}
#sec-cashflow .cf-chip{display:inline-flex;padding:5px 12px;gap:6px;border-radius:99px;border:1px solid var(--border2);background:var(--surface2);align-items:center;font-size:12px;transition:all .15s}
#sec-cashflow .cf-chip:hover{background:var(--surface3)}
#sec-cashflow .cf-chip span{color:var(--text2);font-size:11px;font-weight:600}
#sec-cashflow .cf-chip strong{font-weight:700}
/* Hero — premium gradient banner */
#sec-cashflow .cf-hero{background:linear-gradient(135deg,var(--accent2) 0%,transparent 40%),linear-gradient(225deg,var(--green2) 0%,transparent 40%),var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden;margin-bottom:20px}
#sec-cashflow .cf-hero::before{content:"";position:absolute;top:-50%;right:-30%;width:300px;height:300px;background:radial-gradient(circle,var(--accent2) 0%,transparent 70%);opacity:.4;pointer-events:none}
[data-theme="dark"] #sec-cashflow .cf-hero{background:linear-gradient(135deg,rgba(245,158,11,.08) 0%,#111827 35%,rgba(52,211,153,.05) 100%);border-color:rgba(245,158,11,.2)}
[data-theme="dark"] #sec-cashflow .cf-hero::before{opacity:.15}
#sec-cashflow .cf-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative;z-index:1}
#sec-cashflow .cf-hero h2{margin:8px 0 6px;font-size:clamp(1.8rem,5vw,2.8rem);line-height:1;letter-spacing:-.05em;font-weight:800;color:var(--accent);animation:cf-countUp .5s var(--ease)}
#sec-cashflow .cf-hero p{font-size:12.5px;color:var(--text2);margin:0;line-height:1.6;max-width:480px}
#sec-cashflow .cf-hero small{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#sec-cashflow .cf-hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;position:relative;z-index:1}
#sec-cashflow .cf-hero-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;transition:all .2s var(--ease);animation:cf-fadeUp .4s var(--ease) both}
#sec-cashflow .cf-hero-stat:nth-child(1){animation-delay:.05s}
#sec-cashflow .cf-hero-stat:nth-child(2){animation-delay:.1s}
#sec-cashflow .cf-hero-stat:nth-child(3){animation-delay:.15s}
#sec-cashflow .cf-hero-stat:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
#sec-cashflow .cf-hero-stat span{display:block;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px}
#sec-cashflow .cf-hero-stat strong{display:block;margin-top:8px;font-size:clamp(.9rem,2.5vw,1.15rem);font-weight:800;font-family:var(--mono)}
/* KPI Bento Cards */
#sec-cashflow .cf-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
#sec-cashflow .cf-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;position:relative;overflow:hidden;transition:all .25s var(--ease);animation:cf-fadeUp .4s var(--ease) both}
#sec-cashflow .cf-kpi:nth-child(1){animation-delay:.1s}
#sec-cashflow .cf-kpi:nth-child(2){animation-delay:.15s}
#sec-cashflow .cf-kpi:nth-child(3){animation-delay:.2s}
#sec-cashflow .cf-kpi:nth-child(4){animation-delay:.25s}
#sec-cashflow .cf-kpi:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.08);border-color:var(--border2)}
[data-theme="dark"] #sec-cashflow .cf-kpi:hover{box-shadow:0 12px 40px rgba(0,0,0,.3)}
#sec-cashflow .cf-kpi::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0}
#sec-cashflow .cf-kpi.cf-kpi-income::after{background:linear-gradient(90deg,var(--green),var(--teal))}
#sec-cashflow .cf-kpi.cf-kpi-expense::after{background:linear-gradient(90deg,var(--red),#fb923c)}
#sec-cashflow .cf-kpi.cf-kpi-savings::after{background:linear-gradient(90deg,var(--blue),var(--indigo))}
#sec-cashflow .cf-kpi.cf-kpi-rate::after{background:linear-gradient(90deg,var(--accent),var(--gold))}
#sec-cashflow .cf-kpi-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
#sec-cashflow .cf-kpi-label i{font-style:normal;font-size:14px}
#sec-cashflow .cf-kpi-value{font-size:clamp(1.1rem,3vw,1.5rem);font-weight:800;font-family:var(--mono);letter-spacing:-.02em;line-height:1.1}
#sec-cashflow .cf-kpi-trend{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;margin-top:8px;padding:5px 12px;border-radius:999px;border:1px solid transparent;box-shadow:0 1px 0 rgba(0,0,0,.06);line-height:1.2}
#sec-cashflow .cf-kpi-trend.up{color:var(--green);background:rgba(52,211,153,.22);border-color:rgba(52,211,153,.2)}
#sec-cashflow .cf-kpi-trend.down{color:var(--red);background:rgba(248,113,113,.2);border-color:rgba(248,113,113,.18)}
#sec-cashflow .cf-kpi-trend.neutral{color:var(--text3);background:var(--surface2);border-color:var(--border2)}
[data-theme="light"] #sec-cashflow .cf-kpi-trend.up{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.25)}
[data-theme="light"] #sec-cashflow .cf-kpi-trend.down{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.22)}
#sec-cashflow .cf-kpi-spark{margin-top:10px;height:32px;display:flex;align-items:flex-end;gap:2px}
#sec-cashflow .cf-kpi-spark i{flex:1;border-radius:2px;background:var(--surface3);min-width:4px;transition:height .3s var(--ease);font-style:normal}
/* Score card */
#sec-cashflow .cf-score-card{background:linear-gradient(160deg,var(--surface),var(--surface2));border-color:var(--border2)}
#sec-cashflow .cf-score-number{font-size:clamp(2.2rem,6vw,3rem);font-weight:800;line-height:1;margin:12px 0 8px;background:linear-gradient(135deg,var(--accent),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#sec-cashflow .cf-progress{height:7px;border-radius:999px;background:var(--surface3);overflow:hidden;margin-top:12px}
#sec-cashflow .cf-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--teal));transition:width .6s var(--ease);animation:cf-progressFill .8s var(--ease)}
/* Metrics */
#sec-cashflow .cf-metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
#sec-cashflow .cf-metric{border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);padding:14px;transition:all .2s var(--ease)}
#sec-cashflow .cf-metric:hover{background:var(--surface3);transform:translateY(-1px)}
#sec-cashflow .cf-metric .cf-mlabel{color:var(--text3);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
#sec-cashflow .cf-metric .cf-mval{display:block;margin-top:8px;font-size:clamp(.95rem,2.5vw,1.15rem);font-weight:700;font-family:var(--mono)}
#sec-cashflow .cf-badge-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
/* Insights */
#sec-cashflow .cf-insight-stack{display:grid;gap:10px}
#sec-cashflow .cf-insight-card{border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);padding:16px 18px;transition:all .2s var(--ease);display:flex;gap:14px;align-items:flex-start;animation:cf-slideIn .3s var(--ease) both}
#sec-cashflow .cf-insight-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.05);border-color:var(--border2)}
#sec-cashflow .cf-insight-icon{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;font-size:.95rem}
#sec-cashflow .cf-insight-card strong{display:block;margin-bottom:4px;font-size:13px;font-weight:700}
#sec-cashflow .cf-insight-card .cf-sm{color:var(--text3);font-size:12px;line-height:1.55}
/* Transactions */
#sec-cashflow .cf-tx-list{display:grid;gap:0}
#sec-cashflow .cf-tx-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0;border-bottom:1px solid var(--border);background:var(--surface);padding:14px 16px;cursor:pointer;transition:all .15s var(--ease)}
#sec-cashflow .cf-tx-item:hover{background:var(--surface2);padding-left:20px}
#sec-cashflow .cf-tx-item:last-child{border-bottom:none}
#sec-cashflow .cf-tx-main{display:flex;gap:12px;flex:1;align-items:center;min-width:0}
#sec-cashflow .cf-tx-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;flex-shrink:0;font-size:1.05rem;box-shadow:0 2px 8px rgba(0,0,0,.12)}
#sec-cashflow .cf-tx-title{margin:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-cashflow .cf-tx-sub{margin:3px 0 0;color:var(--text3);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-cashflow .cf-amount{font-weight:600;white-space:nowrap;font-family:var(--mono);font-size:13.5px}
#sec-cashflow .cf-kpi-value.td-green,
#sec-cashflow .cf-kpi-value.td-red{font-weight:600;font-family:var(--mono);letter-spacing:-.02em}
#sec-cashflow .cf-hero h2.td-green,
#sec-cashflow .cf-hero h2.td-red,
#sec-cashflow .cf-hero h2.text-muted{font-weight:700;font-family:var(--mono);letter-spacing:-.03em}
/* Charts */
#sec-cashflow .cf-chart-wrap{position:relative;height:280px;margin-bottom:8px}
#sec-cashflow .cf-chart-wrap canvas{width:100%!important;height:100%!important;display:block}
#sec-cashflow .cf-donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
#sec-cashflow .cf-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px;font-size:11px;color:var(--text3)}
#sec-cashflow .cf-dot{width:10px;height:10px;border-radius:999px;display:inline-block;vertical-align:middle;margin-right:4px}
#sec-cashflow .cf-legend-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);font-size:11px;transition:all .15s}
#sec-cashflow .cf-legend-pill:hover{background:var(--surface3)}
/* Goals */
#sec-cashflow .cf-goal-list{display:grid;gap:10px}
#sec-cashflow .cf-goal-card{display:flex;align-items:center;justify-content:space-between;gap:14px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);padding:16px;transition:all .2s var(--ease);cursor:pointer}
#sec-cashflow .cf-goal-card:hover{background:var(--surface3);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.05)}
#sec-cashflow .cf-goal-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent2);color:var(--accent);flex-shrink:0;font-size:1.2rem}
/* Budgets */
#sec-cashflow .cf-budget-list{display:grid;gap:10px}
#sec-cashflow .cf-budget-card{display:flex;align-items:center;justify-content:space-between;gap:14px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);padding:16px;transition:all .2s var(--ease);cursor:pointer}
#sec-cashflow .cf-budget-card:hover{background:var(--surface3);transform:translateY(-1px)}
/* Profile tiles */
#sec-cashflow .cf-profile-list{display:grid;gap:10px}
#sec-cashflow .cf-profile-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);padding:14px 16px;transition:all .15s}
#sec-cashflow .cf-profile-tile:hover{background:var(--surface3)}
/* Page grid — bento layout */
#sec-cashflow .cf-page-grid{display:grid;gap:16px}
#sec-cashflow .cf-grid-2{display:grid;gap:16px}
#sec-cashflow .cf-full{grid-column:1/-1}
/* Bento grid for dashboard */
#sec-cashflow .cf-bento{display:grid;gap:16px;grid-template-columns:1fr 1fr}
#sec-cashflow .cf-bento-wide{grid-column:1/-1}
#sec-cashflow .cf-bento-tall{grid-row:span 2}
/* Summary tiles */
#sec-cashflow .cf-summary-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);padding:14px 16px}
/* FAB — premium floating button */
#sec-cashflow .cf-floating-panel{position:fixed;right:20px;bottom:28px;z-index:41}
#sec-cashflow .cf-fab{width:56px;height:56px;border-radius:16px;border:none;background:linear-gradient(135deg,var(--accent),#fbbf24);color:#000;font-size:1.6rem;font-weight:800;cursor:pointer;box-shadow:0 6px 24px rgba(245,158,11,.35),0 0 0 0 rgba(245,158,11,.2);transition:all .25s var(--ease);display:grid;place-items:center}
#sec-cashflow .cf-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 36px rgba(245,158,11,.5),0 0 0 6px rgba(245,158,11,.1);border-radius:18px}
#sec-cashflow .cf-fab:active{transform:scale(.92)}
/* Tab bar — uses app's vault-tabs pattern */
#sec-cashflow .cf-tab-bar{display:flex;justify-content:flex-start;align-items:center;gap:4px;padding:6px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-lg);margin-bottom:22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
#sec-cashflow .cf-tab-bar::-webkit-scrollbar{display:none}
#sec-cashflow .cf-tab-bar .tab-btn{flex:0 0 auto;min-width:max-content;border-radius:12px;padding:10px 16px;font-weight:700;border:none;background:transparent;font-size:12px;color:var(--text2);cursor:pointer;transition:all .2s var(--ease);white-space:nowrap;position:relative}
#sec-cashflow .cf-tab-bar .tab-btn:hover{background:var(--surface3);color:var(--text)}
#sec-cashflow .cf-tab-bar .tab-btn.active{background:var(--surface);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.06),0 0 0 1px var(--border)}
[data-theme="dark"] #sec-cashflow .cf-tab-bar .tab-btn.active{box-shadow:0 0 0 1px var(--border2),0 8px 28px rgba(0,0,0,.35)}
#sec-cashflow .cf-bottom-nav{display:none!important}
/* Buttons */
#sec-cashflow .cf-ghost-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;transition:all .2s var(--ease)}
#sec-cashflow .cf-ghost-btn:hover{background:var(--surface2);color:var(--text);border-color:var(--border2)}
#sec-cashflow .cf-primary-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;border:none;background:var(--accent);color:#000;cursor:pointer;transition:all .2s var(--ease)}
#sec-cashflow .cf-primary-btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,158,11,.3)}
#sec-cashflow .cf-secondary-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;border:1px solid var(--border2);background:var(--surface2);color:var(--text);cursor:pointer;transition:all .2s var(--ease)}
#sec-cashflow .cf-secondary-btn:hover{border-color:var(--border3);background:var(--surface3);transform:translateY(-1px)}
/* Quick actions */
/* Filter row */
#sec-cashflow .cf-filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
#sec-cashflow .cf-filter-row select,#sec-cashflow .cf-filter-row input{border:1px solid var(--border2);background:var(--surface);color:var(--text);border-radius:10px;padding:8px 12px;font-size:12px;outline:none;cursor:pointer;transition:all .15s}
#sec-cashflow .cf-filter-row select:focus,#sec-cashflow .cf-filter-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent2)}
/* Capsule segmented toggle — global (works inside section AND modals) */
.cf-segmented{display:flex;gap:0;background:var(--surface2);border-radius:999px;padding:5px;border:1px solid var(--border)}
[data-theme="dark"] .cf-segmented{background:#0f1729;border-color:rgba(148,163,184,0.12)}
.cf-segmented button{flex:1;border-radius:999px;padding:12px 20px;border:2px solid transparent;background:transparent;color:var(--text3);cursor:pointer;font-weight:700;font-size:13px;transition:all .3s var(--ease);position:relative;letter-spacing:-.01em;text-align:center}
.cf-segmented button:hover:not(.active){color:var(--text2);background:var(--surface3)}
.cf-segmented button.active{color:#fff}
.cf-segmented button[data-type="income"].active{background:#10b981;border-color:#34d399;box-shadow:0 0 20px rgba(16,185,129,.35),inset 0 1px 0 rgba(255,255,255,.15);color:#fff}
.cf-segmented button[data-type="expense"].active{background:#ef4444;border-color:#f87171;box-shadow:0 0 20px rgba(239,68,68,.3),inset 0 1px 0 rgba(255,255,255,.15);color:#fff}
[data-theme="light"] .cf-segmented button[data-type="income"].active{background:#059669;border-color:#10b981;box-shadow:0 0 16px rgba(5,150,105,.25)}
[data-theme="light"] .cf-segmented button[data-type="expense"].active{background:#dc2626;border-color:#ef4444;box-shadow:0 0 16px rgba(220,38,38,.2)}
/* Recurring toggle */
#cf-recurring-toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.18)}
#cf-recurring-toggle.active{background:var(--accent)}
#cf-recurring-toggle.active::after{transform:translateX(18px)}
/* Month navigator */
#sec-cashflow .cf-month-nav{display:flex;align-items:center;gap:0;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:3px;transition:all .2s}
[data-theme="dark"] #sec-cashflow .cf-month-nav{background:#0f1729;border-color:rgba(148,163,184,0.1)}
#sec-cashflow .cf-month-nav .cf-nav-arrow{width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--text2);cursor:pointer;display:grid;place-items:center;font-size:16px;font-weight:700;transition:all .2s var(--ease);flex-shrink:0}
#sec-cashflow .cf-month-nav .cf-nav-arrow:hover{background:var(--surface3);color:var(--text)}
#sec-cashflow .cf-month-nav .cf-nav-arrow:active{transform:scale(.9)}
#sec-cashflow .cf-month-nav .cf-nav-label{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--text);padding:0 6px;white-space:nowrap;cursor:pointer;min-width:120px;line-height:34px}
#sec-cashflow .cf-month-nav .cf-nav-label:hover{color:var(--accent)}
#sec-cashflow .cf-month-input{background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--text);font-family:var(--mono);transition:all .15s;position:absolute;opacity:0;pointer-events:none}
/* Period filter dropdown */
#sec-cashflow .cf-period-select{appearance:none;-webkit-appearance:none;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:8px 32px 8px 14px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer;transition:all .2s var(--ease);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
[data-theme="dark"] #sec-cashflow .cf-period-select{background-color:#0f1729;border-color:rgba(148,163,184,0.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234d5b7a'/%3E%3C/svg%3E")}
#sec-cashflow .cf-period-select:hover{border-color:var(--border2);background-color:var(--surface3)}
[data-theme="dark"] #sec-cashflow .cf-period-select:hover{background-color:var(--surface2)}
#sec-cashflow .cf-period-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent2)}
#sec-cashflow .cf-period-select option{background:var(--surface);color:var(--text);padding:8px}
/* Daily grouped transactions */
#sec-cashflow .cf-day-group{margin-bottom:6px;animation:cf-fadeUp .3s var(--ease) both}
#sec-cashflow .cf-day-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r) var(--r) 0 0;margin-top:14px}
#sec-cashflow .cf-day-date{display:flex;align-items:center;gap:10px}
#sec-cashflow .cf-day-num{font-size:20px;font-weight:800;color:var(--text);font-family:var(--mono);min-width:28px}
#sec-cashflow .cf-day-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:6px;background:var(--accent2);color:var(--accent);border:1px solid rgba(245,158,11,.2)}
#sec-cashflow .cf-day-my{font-size:11px;color:var(--text3);font-family:var(--mono)}
#sec-cashflow .cf-day-totals{display:flex;gap:14px;align-items:center}
#sec-cashflow .cf-day-group .cf-tx-list{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r)}
#sec-cashflow .cf-day-group .cf-tx-item:last-child{border-bottom:none}
#sec-cashflow .cf-tx-summary-bar{display:flex;gap:16px;align-items:center;padding:12px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:14px;font-size:12px;flex-wrap:wrap}
/* Analytics category list */
#sec-cashflow .cf-cat-list{display:flex;flex-direction:column;gap:0}
#sec-cashflow .cf-cat-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:all .15s var(--ease)}
#sec-cashflow .cf-cat-row:hover{background:var(--surface2);padding-left:20px}
#sec-cashflow .cf-cat-row:last-child{border-bottom:none}
#sec-cashflow .cf-cat-pct-badge{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:5px 10px;border-radius:8px;font-size:11px;font-weight:700;font-family:var(--mono);flex-shrink:0}
/* Month comparison */
#sec-cashflow .cf-compare-row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:14px 0}
#sec-cashflow .cf-compare-bar{height:8px;border-radius:99px;min-width:20px;transition:width .6s var(--ease)}
/* Spending heatmap calendar */
#sec-cashflow .cf-heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:12px;align-content:start}
#sec-cashflow .cf-heatmap.cf-heatmap--annual{grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
#sec-cashflow .cf-heatmap.cf-heatmap--annual .cf-heatmap-cell{min-height:36px}
@media(max-width:520px){
  #sec-cashflow .cf-heatmap.cf-heatmap--annual{grid-template-columns:repeat(6,minmax(0,1fr))}
}
#sec-cashflow .cf-heatmap-cell{aspect-ratio:1;border-radius:4px;background:var(--surface3);transition:all .15s;cursor:default;position:relative}
#sec-cashflow .cf-heatmap-cell:hover{transform:scale(1.2);z-index:1}
#sec-cashflow .cf-heatmap-cell[title]:hover::after{content:attr(title);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:4px 8px;background:var(--surface);border:1px solid var(--border);border-radius:6px;font-size:10px;white-space:nowrap;z-index:10;box-shadow:var(--shadow);pointer-events:none}
#sec-cashflow .cf-heatmap-label{font-size:9px;color:var(--text3);text-align:center;font-weight:600}
/* Responsive */
@media (min-width:769px){
  #sec-cashflow .cf-grid-2{grid-template-columns:1.15fr .85fr}
  #sec-cashflow .cf-page-grid{grid-template-columns:1.1fr .9fr}
  #sec-cashflow .cf-bento{grid-template-columns:1fr 1fr}
}
@media (min-width:580px) and (max-width:768px){
  #sec-cashflow .cf-page-grid{grid-template-columns:1fr 1fr}
  #sec-cashflow .cf-grid-2{grid-template-columns:1fr 1fr}
  #sec-cashflow .cf-bento{grid-template-columns:1fr 1fr}
  #sec-cashflow .cf-kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:579px){
  #sec-cashflow .cf-hero-stats{grid-template-columns:1fr}
  #sec-cashflow .cf-hero-top{flex-direction:column}
  #sec-cashflow .cf-metric-row{grid-template-columns:1fr}
  #sec-cashflow .cf-page-grid{grid-template-columns:1fr}
  #sec-cashflow .cf-grid-2{grid-template-columns:1fr}
  #sec-cashflow .cf-bento{grid-template-columns:1fr}
  #sec-cashflow .cf-kpi-grid{grid-template-columns:repeat(2,1fr)}
  #sec-cashflow .cf-hero{padding:18px}
  #sec-cashflow .cf-month-nav .cf-nav-label{min-width:100px;font-size:12px}
  #sec-cashflow .cf-period-select{padding:6px 28px 6px 10px;font-size:11px}
  #sec-cashflow .cf-card{padding:16px}
  #sec-cashflow .cf-kpi{padding:14px 16px}
}

/* ── UTILITY ── */
.text-xs{font-size:11px}.text-sm{font-size:12px}.text-base{font-size:14px}
.font-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.text-muted{color:var(--text3)}
.text-2{color:var(--text2)}
.text-green{color:var(--green)}.text-red{color:var(--red)}.text-gold{color:var(--gold)}
.text-accent{color:var(--accent)}
.font-bold{font-weight:700}.font-semibold{font-weight:600}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}
.mt-3{margin-top:12px}.mt-4{margin-top:16px}
/* Tax Summary — equal-height cards + mobile stack */
.tax-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px;align-items:stretch}
@media(max-width:900px){.tax-summary-grid{grid-template-columns:1fr}}
.tax-summary-card{display:flex!important;flex-direction:column!important;min-height:0}
.tax-summary-card > .tax-card-inner{padding:16px;display:flex;flex-direction:column;flex:1;min-height:min(320px,52vh)}
@media(max-width:600px){.tax-summary-card > .tax-card-inner{min-height:0}}
.tax-fd-scroll{flex:1;min-height:0;max-height:min(200px,38vh);overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
/* Stock heatmap (dashboard KPI mini + full page) */
.kpi-card-heatmap-launch{border-color:rgba(245,158,11,.22)!important;background:linear-gradient(165deg,rgba(245,158,11,.07),transparent)!important;justify-content:flex-start!important}
.kpi-card-heatmap-launch .kpi-sub{margin-top:auto;padding-top:6px;font-size:10px;line-height:1.25}
.kpi-hm-stats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px;font-size:10px;font-weight:600;color:var(--text2);line-height:1.35}
.kpi-hm-stats .hm-up{color:var(--green);font-family:var(--mono)}
.kpi-hm-stats .hm-down{color:var(--red);font-family:var(--mono)}
.kpi-hm-stats .hm-neu{color:var(--text3);font-weight:600}
.hm-page-header{align-items:flex-start!important}
.hm-page-header .hm-header-left{flex:1;min-width:min(100%,260px)}
.hm-page-header .hm-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.hm-page-header .hm-header-right .section-actions{flex-wrap:nowrap;justify-content:flex-end}
.hm-period-bar{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:8px 2px 6px;margin:0 0 4px;-webkit-overflow-scrolling:touch}
.hm-period-btn{flex:0 0 auto;min-width:38px;padding:7px 11px;border-radius:9px;font-size:11px;font-weight:800;border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.hm-period-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.hm-period-btn.hm-period-btn--off{opacity:.5}
.hmLegend-row{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:2px 0 16px;-webkit-overflow-scrolling:touch}
.hmLegend-pill{flex:0 0 auto;display:inline-flex;flex-direction:column;gap:1px;padding:6px 12px;border-radius:99px;font-size:10px;font-weight:800;white-space:nowrap;line-height:1.2;border:1px solid rgba(255,255,255,.1)}
.hmLeg-lbl{letter-spacing:.02em}
.hmLeg-meta{font-size:9px;font-weight:800;font-family:var(--mono);opacity:.95}
.hmLeg-p5{background:hsl(152,42%,26%);color:#e8fff4}
.hmLeg-p2_5{background:hsl(150,36%,30%);color:#e8fff4}
.hmLeg-p0_2{background:hsl(148,32%,36%);color:#f4fffb}
.hmLeg-z{background:hsl(220,10%,36%);color:var(--text)}
.hmLeg-n0_2{background:hsl(0,32%,38%);color:#fff5f5}
.hmLeg-n2_5{background:hsl(0,40%,32%);color:#fff0f0}
.hmLeg-n5{background:hsl(0,48%,28%);color:#ffecec}
.hm-metric-pills{display:flex;flex-wrap:nowrap;gap:8px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0;justify-content:flex-end}
.hm-metric-pill{flex:0 0 auto;padding:7px 14px;border-radius:99px;font-size:11px;font-weight:800;font-family:var(--mono);white-space:nowrap;border:1px solid transparent;line-height:1.25}
.hm-metric-pill--up{background:rgba(34,197,94,.22);color:var(--green);border-color:rgba(34,197,94,.35)}
.hm-metric-pill--down{background:rgba(248,113,113,.2);color:#f87171;border-color:rgba(248,113,113,.38)}
.hm-metric-pill--flat{background:rgba(148,163,184,.14);color:var(--text2);border-color:rgba(148,163,184,.28)}
.dash-heatmap-wrap{max-height:min(52vh,420px);overflow-y:auto;padding:2px 0}
.dash-heatmap-wrap--expanded{max-height:none}
.dash-heatmap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:5px}
.dash-heatmap-tile{
  text-align:left;border:none;border-radius:10px;padding:8px 7px;min-height:68px;
  display:flex;flex-direction:column;justify-content:space-between;gap:4px;cursor:pointer;
  font-family:var(--font,inherit);line-height:1.2;box-shadow:0 1px 0 rgba(0,0,0,.12) inset;
  transition:transform .12s var(--ease),box-shadow .12s,filter .12s
}
.dash-heatmap-tile:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.dash-heatmap-sym{font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;opacity:.95;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.dash-heatmap-row{display:flex;justify-content:space-between;align-items:flex-end;gap:4px;margin-top:auto}
.dash-heatmap-price{font-size:11px;font-weight:700;font-family:var(--mono);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.dash-heatmap-pct{font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.dash-heatmap-tile--v2{min-height:76px;padding:10px 10px 8px;border-radius:14px;justify-content:flex-start;gap:6px}
.dash-heatmap-tile-v2-top{display:flex;justify-content:space-between;align-items:flex-start;width:100%;gap:8px}
.dash-heatmap-avatar{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:12px;font-weight:900;letter-spacing:0;text-transform:uppercase;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.dash-heatmap-pct-lg{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.35);margin-left:auto}
.dash-heatmap-tile-v2-body{display:flex;flex-direction:column;gap:2px;align-items:flex-start;width:100%}
.dash-heatmap-tile--v2 .dash-heatmap-sym{font-size:10px}
.dash-heatmap-tile--v2 .dash-heatmap-price{font-size:11px}
@media(max-width:520px){
  .dash-heatmap-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:4px}
  .dash-heatmap-tile{min-height:62px;padding:6px 5px}
  .dash-heatmap-tile--v2{min-height:72px;padding:8px 8px 6px}
}
.p-4{padding:16px}
.hidden{display:none}
.blur-sensitive{transition:filter .3s}
body.privacy .blur-sensitive{filter:blur(6px);user-select:none}
.tv-symbol-btn{
  display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:99px;background:var(--indigo2);color:var(--indigo);
  border:none;cursor:pointer;transition:all .15s;vertical-align:middle;
}
.tv-symbol-btn:hover{background:var(--indigo);color:#fff}
.name-link-btn{
  display:inline-flex;align-items:center;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:99px;background:var(--teal2);color:var(--teal);
  text-decoration:none;transition:all .15s;vertical-align:middle;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.name-link-btn:hover{background:var(--teal);color:#fff}
/* ── Setup & Auth screens (gated access) ── */
#setup-screen, #auth-screen, #lock-screen, #password-reset-screen { display:none; min-height:100vh; background:var(--bg); align-items:center; justify-content:center; padding:24px; }
#setup-screen.show, #auth-screen.show, #lock-screen.show, #password-reset-screen.show { display:flex; flex-direction:column; }
.auth-forgot-block { display:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--border2) }
.auth-forgot-block.show { display:block }
.auth-forgot-block code { font-size:11px; background:var(--bg2); padding:2px 6px; border-radius:4px }
#lock-screen .lock-card { max-width:340px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; text-align:center; }
#lock-screen .lock-title { font-size:20px; font-weight:800; margin-bottom:6px; color:var(--text) }
#lock-screen .lock-sub { font-size:12px; color:var(--text2); margin-bottom:20px }
#lock-screen .lock-pin-input { width:100%; padding:14px; font-size:24px; letter-spacing:12px; text-align:center; font-family:var(--mono); border:2px solid var(--border2); border-radius:var(--r-sm); background:var(--bg2); color:var(--text); margin-bottom:16px }
#lock-screen .lock-pin-input:focus { outline:none; border-color:var(--accent) }
#lock-screen .lock-btn-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
#lock-screen .lock-fp-btn { margin-top:12px; padding:10px 20px; font-size:13px; color:var(--text2); background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r-sm); cursor:pointer }
#lock-screen .lock-fp-btn:hover { background:var(--surface3); color:var(--text) }
#lock-screen .lock-fp-btn.primary { background:var(--accent); color:#000; border-color:var(--accent) }
.lock-biometric-opt { display:flex; align-items:center; gap:10px; margin:16px 0; padding:12px; background:var(--bg2); border-radius:var(--r-sm); cursor:pointer }
.lock-biometric-opt input { accent-color:var(--accent) }
#setpin-screen { display:none }
#setpin-screen.show { display:flex; flex-direction:column }
.auth-card { max-width:400px; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; }
.auth-title { font-size:22px; font-weight:800; margin-bottom:8px; color:var(--text) }
.auth-sub { font-size:13px; color:var(--text2); margin-bottom:24px }
.auth-form .form-group { margin-bottom:16px }
.auth-form .form-label { display:block; font-size:12px; font-weight:600; color:var(--text2); margin-bottom:6px }
.auth-form .form-input { width:100%; padding:10px 14px; border:1px solid var(--border2); border-radius:var(--r-sm); background:var(--bg2); color:var(--text); font-size:14px }
.auth-form .form-input:focus { outline:none; border-color:var(--accent) }
.auth-btn { width:100%; padding:12px; border-radius:var(--r-sm); font-weight:700; font-size:14px; cursor:pointer; border:none; margin-top:8px; transition:all .15s }
.auth-btn-primary { background:var(--accent); color:#000 }
.auth-btn-primary:hover { background:#fbbf24; transform:translateY(-1px) }
.auth-btn-google { background:var(--surface2); color:var(--text); border:1px solid var(--border2) }
.auth-btn-google:hover { border-color:var(--border3); background:var(--surface3) }
.auth-divider { margin:20px 0; text-align:center; color:var(--text3); font-size:12px }
.auth-link { color:var(--accent); cursor:pointer; font-weight:600 }
.auth-link:hover { text-decoration:underline }
.auth-error { font-size:12px; color:var(--red); margin-top:8px }
/* Mobile fixes for sticky tables - release freeze only in Mutual Funds */
@media (max-width: 768px) {
  #sec-mf thead th:first-child, 
  #sec-mf tbody td:first-child, 
  #sec-mf tfoot tr.table-total td:first-child {
    position: static !important;
  }
}

/* Pull to Refresh Indicator */
.ptr-indicator {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.ptr-indicator i {
  font-size: 18px;
  color: var(--accent);
  transition: transform 0.1s ease;
}

.ptr-indicator.ptr-refreshing i {
  animation: spin 0.8s linear infinite;
}

/* 52-Week Range Bar styles */
.wl-range-bar-track {
  height: 4px;
  background: var(--border2);
  border-radius: 2px;
  position: relative;
  margin: 2px 0;
}

.wl-range-bar-fill {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent);
}

/* Mobile responsive enhancements */
@media(max-width:768px) {
  #refresh-btn {
    display: none !important;
  }
  #news-widget {
    max-height: 650px !important;
  }
}