/* ============================================================
   Founding Sharks — shared UI polish layer (theme.css) v2
   Fixes: stacked navy bars, sidebar scroll, weak depth.
   ============================================================ */

/* Softer page background */
body{ background:#F6F8FB !important; }

/* ============================================================
   Cross-platform consistency — align B's palette + one gold
   ------------------------------------------------------------
   NOTE (Phase 0 consolidation): the early :root !important block that
   re-declared base tokens (--teal/--teal-light/--amber/--amber-light/
   --gold-light/--red-light/--gray-light/--gray-border) was REMOVED here.
   Those tokens now have a single canonical definition in dashboard.css :root,
   ending the override war. Consumers pick up the canonical values automatically.
   ============================================================ */
/* one consistent gold across buttons, sidebar-active pills, and the top bar */
.btn-gold{ background:linear-gradient(135deg,#E5C158,#C9A84C) !important; color:#0C1F4A !important; }
#fsTop nav a.on{ background:linear-gradient(135deg,#E5C158,#C9A84C) !important; }

/* FIX 1 — each platform's own top bar becomes a clean white
   sub-nav, so it no longer looks like a repeated navy header */
.topbar{ background:#fff !important; border-bottom:1px solid #EEF1F6 !important; box-shadow:0 1px 0 rgba(12,31,74,.03) !important; }
.topbar .logo-text{ color:#0C1F4A !important; }
.topbar .logo-sub{ color:#6B7280 !important; }
.topbar .logo-badge{ background:#0C1F4A !important; color:#fff !important; }
.topbar-tab,.tab{ background:#F4F6FA !important; color:#475569 !important; }
.topbar-tab.active,.tab.active,.topbar-tab:hover,.tab:hover{ background:#0C1F4A !important; color:#fff !important; }

/* FIX 2 — dashboard sidebar scrolls within the viewport */
.sidebar{ min-height:0 !important; height:calc(100vh - 54px) !important; overflow-y:auto !important; }

/* FIX 3 (cards) + button base — REMOVED (Phase 0 consolidation).
   These rules were fully shadowed by the v3 "premium design system" block below
   (see "Cards: refined depth + calm hover" — the CANONICAL card/button/table styling),
   which re-sets the SAME properties on the SAME selectors with !important later in the
   cascade, so the earlier values never rendered:
     • .card/.kpi/.listing-card/.plan/.queue-item/.tier border-color/border-radius/box-shadow
       → shadowed by the .card,.kpi,… block and the dedicated .listing-card block below.
     • .listing-card:hover box-shadow → shadowed by the v3 .listing-card:hover rule.
     • .btn border-radius/transition → shadowed by the v3 .btn rule.
   Removing them changes nothing rendered. */

/* Buttons */
.btn:hover{ filter:brightness(1.05); }

/* Inputs: clean focus ring */
input,select,textarea{ border-radius:10px !important; transition:border-color .15s, box-shadow .15s !important; }
input:focus,select:focus,textarea:focus{
  outline:none !important; border-color:#0C1F4A !important;
  box-shadow:0 0 0 3px rgba(12,31,74,.10) !important;
}

/* Badges & pills */
.badge,.pill{ border-radius:8px !important; font-weight:600 !important; }


/* ============================================================
   C & D — internal sections become a left sidebar
   (scoped to .platC / .platD so B and Platform A are untouched)
   ============================================================ */
.platC .topbar-tabs, .platD .tabs{
  position:fixed !important; left:0; top:54px;
  width:212px; height:calc(100vh - 54px);
  display:flex !important; flex-direction:column !important; gap:3px !important;
  align-items:stretch !important; box-sizing:border-box;
  background:#0C1F4A !important; padding:16px 12px !important;
  overflow-y:auto !important; z-index:60;
}
.platC .topbar-tab, .platD .tab{
  width:100% !important; text-align:left !important;
  padding:10px 12px !important; border-radius:8px !important;
  font-size:12.5px !important; background:transparent !important; color:#CBD5E1 !important;
}
.platC .topbar-tab:hover, .platD .tab:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
.platC .topbar-tab.active, .platD .tab.active{ background:linear-gradient(135deg,#E5C158,#C9A84C) !important; color:#0C1F4A !important; }
.platC .topbar, .platD .topbar{ margin-left:212px !important; }
.platC .main, .platD .main{ margin-left:212px !important; }


/* ============================================================
   B sidebar — match C & D's look (width + pill-style items)
   ============================================================ */
:root{ --sidebar:212px !important; }
.sb-item{ margin:1px 10px !important; width:calc(100% - 20px) !important; box-sizing:border-box !important; padding:10px 12px !important; border-radius:8px !important; border-right:none !important; color:#CBD5E1 !important; font-size:12.5px !important; }
.sb-item:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
.sb-item.active{ background:linear-gradient(135deg,#E5C158,#C9A84C) !important; color:#0C1F4A !important; border-right:none !important; }


/* ============================================================
   Sidebar consistency — identical item weight + slim scrollbar (B/C/D)
   ============================================================ */
.sb-item, .platC .topbar-tab, .platD .tab{ font-weight:600 !important; }

.sidebar, .platC .topbar-tabs, .platD .tabs{ scrollbar-width:thin !important; scrollbar-color:rgba(255,255,255,.22) transparent !important; }
.sidebar::-webkit-scrollbar, .platC .topbar-tabs::-webkit-scrollbar, .platD .tabs::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-track, .platC .topbar-tabs::-webkit-scrollbar-track, .platD .tabs::-webkit-scrollbar-track{ background:transparent; }
.sidebar::-webkit-scrollbar-thumb, .platC .topbar-tabs::-webkit-scrollbar-thumb, .platD .tabs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }
.sidebar::-webkit-scrollbar-thumb:hover, .platC .topbar-tabs::-webkit-scrollbar-thumb:hover, .platD .tabs::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.35); }


/* ============================================================
   Platform B — premium role-switcher (matches sidebar polish)
   ============================================================ */
.sb-user-btn{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:10px !important; padding:11px 13px !important; transition:.15s !important; }
.sb-user-btn:hover{ background:rgba(255,255,255,.09) !important; border-color:rgba(229,193,88,.45) !important; }
.sb-user-role{ color:#C9A84C !important; font-weight:700 !important; }
.sb-user-name{ font-size:12.5px !important; font-weight:700 !important; }
.role-panel{ background:rgba(0,0,0,.18) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; margin:6px 14px 0 !important; padding:6px !important; }
.role-opt{ padding:9px 11px !important; border-radius:8px !important; font-size:12px !important; font-weight:600 !important; color:#CBD5E1 !important; margin-bottom:1px !important; }
.role-opt:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
.role-opt.active{ background:linear-gradient(135deg,#E5C158,#C9A84C) !important; color:#0C1F4A !important; }


/* Hide B's sidebar section headers so it's a clean list like C & D */
.sb-section{ display:none !important; }


/* Gap between the role-switcher and the nav list */
#sidebarNav{ margin-top:14px !important; }


/* ════════════════════════════════════════════════════════════════════
   FOUNDING SHARKS — PREMIUM DESIGN SYSTEM  v3  (UI/UX polish only)
   Pure presentation layer. No markup, no JS, no logic touched.
   Cascades across all pages that load theme.css via shared classes.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* — Brand — */
  --fs-navy:#0C1F4A;   --fs-navy-2:#173272;  --fs-navy-3:#1E3A6E;
  --fs-gold:#E5C158;   --fs-gold-2:#C9A84C;  --fs-gold-deep:#B8902A;
  --fs-ink:#0F172A;    --fs-body:#334155;    --fs-muted:#64748B;   --fs-faint:#94A3B8;

  /* — Semantic — aligned to the canonical status palette (see dashboard.css :root) — */
  --fs-success:#0A6B51; --fs-success-bg:#E0F5EE;
  --fs-warning:#854F0B; --fs-warning-bg:#FAEEDA;
  --fs-danger:#B91C1C;  --fs-danger-bg:#FDE8E8;
  --fs-info:#2555C7;    --fs-info-bg:#EAF0FD;

  /* — Surfaces & lines — */
  --fs-bg:#F6F8FB; --fs-surface:#FFFFFF; --fs-surface-2:#F7F9FC;
  --fs-border:#E7EBF2; --fs-border-strong:#D7DEEA;

  /* — Radii — */
  --fs-r-sm:8px; --fs-r-md:12px; --fs-r-lg:16px; --fs-r-xl:20px; --fs-r-pill:999px;

  /* — Elevation — soft, spread & editorial, mirroring the Index landing cards — */
  --fs-sh-xs:0 1px 2px rgba(12,31,74,.06);
  --fs-sh-sm:0 2px 8px rgba(12,31,74,.05);
  --fs-sh-md:0 4px 24px rgba(12,31,74,.06);
  --fs-sh-lg:0 12px 40px rgba(12,31,74,.11), 0 3px 8px rgba(12,31,74,.04);
  --fs-sh-xl:0 30px 70px rgba(12,31,74,.16);
  --fs-sh-gold:0 8px 22px rgba(184,144,42,.40);

  /* — Motion — */
  --fs-ease:cubic-bezier(.22,.61,.36,1);
  --fs-fast:.14s; --fs-med:.22s;
}

/* — Global rendering polish — */
html{ scroll-behavior:smooth; }
body{
  -webkit-font-smoothing:antialiased; -moz-osx-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  color:var(--fs-body);
  letter-spacing:.1px;
}

/* Tighter, more confident headings wherever Fraunces/serif display type is used */
h1,h2,h3,.sec-h2{ letter-spacing:-.02em; }

::selection{ background:rgba(229,193,88,.34); color:var(--fs-navy); }

/* ── Cards: refined depth + calm hover — CANONICAL card/button/table styling (Phase 0) ── */
.card,.kpi,.plan,.queue-item,.tier{
  border:1px solid var(--fs-border) !important;
  border-radius:var(--fs-r-lg) !important;
  box-shadow:var(--fs-sh-md) !important;
  transition:box-shadow var(--fs-med) var(--fs-ease),
             transform var(--fs-med) var(--fs-ease),
             border-color var(--fs-med) var(--fs-ease) !important;
}
.card:hover,.kpi:hover{
  box-shadow:var(--fs-sh-lg) !important;
  border-color:var(--fs-border-strong) !important;
}
/* Clearly-interactive cards get a gentle lift */
.listing-card{
  border:1px solid var(--fs-border) !important;
  border-radius:var(--fs-r-lg) !important;
  box-shadow:var(--fs-sh-md) !important;
  transition:box-shadow var(--fs-med) var(--fs-ease), transform var(--fs-med) var(--fs-ease) !important;
}
.listing-card:hover{ transform:translateY(-3px); box-shadow:var(--fs-sh-lg) !important; }

/* ── Buttons: press feedback, hover lift, gold glow ────────────────── */
.btn{
  border-radius:var(--fs-r-md) !important;
  font-weight:600 !important;
  letter-spacing:.15px !important;
  transition:transform var(--fs-fast) var(--fs-ease),
             box-shadow var(--fs-med) var(--fs-ease),
             filter var(--fs-med) var(--fs-ease),
             background var(--fs-med) var(--fs-ease) !important;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.03); box-shadow:var(--fs-sh-sm); }
.btn:active{ transform:translateY(0) scale(.99); box-shadow:var(--fs-sh-xs); }
.btn-gold:hover{ box-shadow:var(--fs-sh-gold) !important; }

/* ── Inputs / selects / textareas: consistent, tactile ─────────────── */
input,select,textarea{
  border:1px solid var(--fs-border-strong) !important;
  border-radius:var(--fs-r-md) !important;
  transition:border-color var(--fs-fast) var(--fs-ease),
             box-shadow var(--fs-fast) var(--fs-ease),
             background var(--fs-fast) var(--fs-ease) !important;
}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){
  border-color:#B9C4D6 !important;
}
input:focus,select:focus,textarea:focus{
  outline:none !important; border-color:var(--fs-navy) !important;
  box-shadow:0 0 0 3.5px rgba(12,31,74,.12) !important;
}
input::placeholder,textarea::placeholder{ color:var(--fs-faint) !important; }
select{ cursor:pointer; }

/* Native controls tinted to brand */
input[type=checkbox],input[type=radio]{
  accent-color:var(--fs-navy); width:16px; height:16px; cursor:pointer;
}
input[type=range]{ accent-color:var(--fs-navy); }

/* ── Badges & pills ────────────────────────────────────────────────── */
.badge{ border-radius:var(--fs-r-sm) !important; font-weight:600 !important; letter-spacing:.2px !important; }
.pill{ border-radius:var(--fs-r-pill) !important; font-weight:600 !important; letter-spacing:.2px !important; }

/* ── Tables: airy, scannable, quiet lines ──────────────────────────── */
table{ border-collapse:separate !important; border-spacing:0 !important; width:100%; }
th{
  text-align:left; font-weight:700 !important;
  font-size:11px !important; letter-spacing:.5px !important; text-transform:uppercase !important;
  color:var(--fs-muted) !important;
  background:var(--fs-surface-2) !important;
  padding:11px 14px !important;
  border-bottom:1px solid var(--fs-border) !important;
}
td{
  padding:12px 14px !important;
  border-bottom:1px solid var(--fs-border) !important;
  color:var(--fs-body);
}
tbody tr{ transition:background var(--fs-fast) var(--fs-ease); }
tbody tr:hover td{ background:var(--fs-surface-2) !important; }
tbody tr:last-child td{ border-bottom:none !important; }

/* ── Tabs (Trade et al.) ───────────────────────────────────────────── */
.tab{ transition:background var(--fs-fast) var(--fs-ease), color var(--fs-fast) var(--fs-ease) !important; }

/* ── Global top bar (#fsTop from app-shell.js): depth + glow ───────── */
#fsTop{
  background:linear-gradient(180deg,#0E2352,#0C1F4A) !important;
  box-shadow:0 2px 14px rgba(12,31,74,.28) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
#fsTop nav a{ transition:background var(--fs-fast) var(--fs-ease), color var(--fs-fast) var(--fs-ease) !important; }
#fsTop nav a.on{ box-shadow:0 4px 12px rgba(201,168,76,.34) !important; }
#fsTop .fs-out{ transition:background var(--fs-fast) var(--fs-ease), border-color var(--fs-fast) var(--fs-ease) !important; }

/* Active sidebar / nav pills get a subtle gold glow to anchor attention */
.sb-item.active,.platC .topbar-tab.active,.platD .tab.active,.role-opt.active{
  box-shadow:0 4px 12px rgba(201,168,76,.30) !important;
}

/* ── Accessible focus rings (keyboard only, never on mouse click) ──── */
a:focus-visible,button:focus-visible,.btn:focus-visible,[role=button]:focus-visible,
.sb-item:focus-visible,.tab:focus-visible,.topbar-tab:focus-visible,.role-opt:focus-visible{
  outline:2px solid var(--fs-gold) !important;
  outline-offset:2px !important;
  border-radius:var(--fs-r-sm);
}

/* ── Refined scrollbars for main content (sidebar handled above) ───── */
.main,.content,body{ scrollbar-width:thin; scrollbar-color:#C6CFDE transparent; }
.main::-webkit-scrollbar,.content::-webkit-scrollbar{ width:9px; height:9px; }
.main::-webkit-scrollbar-thumb,.content::-webkit-scrollbar-thumb{
  background:#CBD5E1; border-radius:var(--fs-r-pill); border:2px solid transparent; background-clip:content-box;
}
.main::-webkit-scrollbar-thumb:hover,.content::-webkit-scrollbar-thumb:hover{ background:#AEB9CC; background-clip:content-box; }

/* ── Tasteful entrance for content cards (once, on render) ─────────── */
@keyframes fsFadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.card,.listing-card{ animation:fsFadeUp .42s var(--fs-ease) both; }

/* ── Skeleton shimmer utility (available for loading states) ───────── */
@keyframes fsShimmer{ 0%{ background-position:-480px 0; } 100%{ background-position:480px 0; } }
.fs-skeleton{
  background:linear-gradient(90deg,#EEF2F8 25%,#E2E8F1 37%,#EEF2F8 63%);
  background-size:960px 100%; animation:fsShimmer 1.4s ease-in-out infinite;
  border-radius:var(--fs-r-sm); color:transparent !important;
}

/* ── Respect users who prefer reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   REUSABLE PREMIUM PRIMITIVES  (opt-in classes — apply per page)
   ════════════════════════════════════════════════════════════════════ */

/* ── Page / section header with supporting microcopy ───────────────── */
.fs-head{ margin:2px 0 22px; }
.fs-head .fs-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  color:var(--fs-gold-deep); margin-bottom:9px;
}
.fs-head .fs-eyebrow::before{ content:""; width:16px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--fs-gold),var(--fs-gold-2)); }
.fs-title{
  font-family:'Fraunces',serif; font-weight:900; color:var(--fs-navy);
  font-size:26px; line-height:1.12; letter-spacing:-.02em; margin:0;
}
.fs-sub{ font-size:13.5px; color:var(--fs-muted); line-height:1.6; margin:7px 0 0; max-width:640px; }

/* Section label — small, quiet, above a card group */
.fs-section-label{
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color:var(--fs-faint); margin:26px 4px 12px;
}
.fs-section-label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--fs-border),transparent); }

/* ── Premium empty state ───────────────────────────────────────────── */
.fs-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:44px 28px; gap:6px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(229,193,88,.10), transparent 60%),
    var(--fs-surface);
  border:1px dashed var(--fs-border-strong); border-radius:var(--fs-r-lg);
}
/* .fs-empty-icon / .fs-empty-title / .fs-empty-text REMOVED (Phase 0): dead selectors — the app
   renders .fs-empty + .fs-empty-ico (note -ico, styled in dashboard.css), never these. Removing
   them changes nothing rendered. The .fs-empty rule above is kept (it is the live empty state). */

/* ── Chips / tags ──────────────────────────────────────────────────── */
.fs-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--fs-r-pill);
  font-size:12px; font-weight:600; letter-spacing:.1px;
  background:var(--fs-surface-2); color:var(--fs-body); border:1px solid var(--fs-border);
  transition:border-color var(--fs-fast) var(--fs-ease), background var(--fs-fast) var(--fs-ease), transform var(--fs-fast) var(--fs-ease);
}
.fs-chip:hover{ border-color:var(--fs-border-strong); }
.fs-chip.is-action{ cursor:pointer; }
.fs-chip.is-action:hover{ transform:translateY(-1px); border-color:var(--fs-navy); color:var(--fs-navy); }
.fs-chip-success{ background:var(--fs-success-bg); color:var(--fs-success); border-color:transparent; }
.fs-chip-warning{ background:var(--fs-warning-bg); color:var(--fs-warning); border-color:transparent; }
.fs-chip-info{ background:var(--fs-info-bg); color:var(--fs-info); border-color:transparent; }

/* ── Divider ───────────────────────────────────────────────────────── */
.fs-divider{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--fs-border),transparent); margin:22px 0; }

/* ── Glass panel (use over navy/gradient backdrops only) ───────────── */
.fs-glass{
  background:rgba(255,255,255,.08); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--fs-r-lg);
}

/* ── KPI tile with gradient top-accent + hover lift ────────────────── */
.fs-kpi{
  position:relative; background:var(--fs-surface);
  border:1px solid var(--fs-border); border-radius:var(--fs-r-lg);
  padding:18px 18px 16px; box-shadow:var(--fs-sh-sm); overflow:hidden;
  transition:box-shadow var(--fs-med) var(--fs-ease), transform var(--fs-med) var(--fs-ease);
}
.fs-kpi::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--fs-gold),var(--fs-gold-2)); opacity:.9; }
.fs-kpi:hover{ transform:translateY(-3px); box-shadow:var(--fs-sh-lg); }
.fs-kpi-label{ font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--fs-muted); }
.fs-kpi-value{ font-family:'Fraunces',serif; font-size:24px; font-weight:800; color:var(--fs-navy); margin-top:5px; line-height:1.05; }

/* ── Soft dotted background texture (apply to page body/main) ──────── */
.fs-canvas{
  background-color:var(--fs-bg);
  background-image:radial-gradient(rgba(12,31,74,.045) 1px, transparent 1px);
  background-size:22px 22px;
}


/* ════════════════════════════════════════════════════════════════════
   LANDING PARITY — make data-driven pages feel like the Index landing.
   Editorial display serif, gold eyebrows, soft borders, gradient CTAs.
   ════════════════════════════════════════════════════════════════════ */

/* Prominent page titles adopt the landing's Fraunces display serif */
.topbar-left h1{
  font-family:'Fraunces',serif !important;
  font-weight:900 !important; letter-spacing:-.02em !important;
}

/* Reusable gold eyebrow (identical spirit to the landing's .sec-eyebrow) */
.fs-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
  color:var(--fs-gold-deep);
}
.fs-eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--fs-gold),var(--fs-gold-2)); }

/* Big numbers read as editorial figures, like the landing's stat blocks */
.kpi-value,.kpi-v,.fs-kpi-value{ font-family:'Fraunces',serif !important; }

/* Cards & inputs carry the landing's slightly heavier 1.5px hairline */
.card,.kpi,.kpi-card,.listing-card{ border-width:1.5px !important; }
input,select,textarea{ border-width:1.5px !important; }

/* Gold CTAs: brand gold gradient with the landing's confident weight */
.btn-gold,.btn.btn-gold{ background:linear-gradient(135deg,var(--fs-gold),var(--fs-gold-2)) !important; color:#0C1F4A !important; font-weight:800 !important; }
.btn-gold:hover{ box-shadow:var(--fs-sh-gold) !important; }

/* Modals/drawers get the landing's generous radius when present */
.modal,.drawer,.dialog,.sheet,.gate-box{ border-radius:20px !important; }


/* ════════════════════════════════════════════════════════════════════
   ICP IDENTITY LAYER — Monitor dashboards
   Investors · Startups & Founders · VC & Venture Builders · VC Analysts
   Pure presentation. Keyed on the existing panel IDs — no markup, no JS,
   no logic touched. Every ICP inherits the shared premium system but
   carries its own accent personality, so they feel like one ecosystem
   with four distinct rooms.
   ════════════════════════════════════════════════════════════════════ */

/* Accent tokens — a sensible gold default, overridden per ICP below */
.panel{
  --icp-accent:#B8902A; --icp-accent-2:#E5C158;
  --icp-tint:rgba(201,168,76,.08); --icp-border-hover:var(--fs-border-strong);
}
/* Investors — dark emerald + gold · Bloomberg × Apple */
[id^="panel-angel"],[id^="panel-invfund"],[id^="panel-lp"],[id^="panel-family_office"]{
  --icp-accent:#0A6B51; --icp-accent-2:#C9A84C; --icp-tint:rgba(10,107,81,.07); --icp-border-hover:rgba(10,107,81,.42);
}
/* Startups & Founders — indigo → cyan · Linear × Notion × Figma */
[id^="panel-startup"]{
  --icp-accent:#4F46E5; --icp-accent-2:#06B6D4; --icp-tint:rgba(79,70,229,.07); --icp-border-hover:rgba(79,70,229,.40);
}
/* VC & Venture Builders — executive navy + slate */
[id^="panel-vc_gp"]{
  --icp-accent:#173272; --icp-accent-2:#6B84BE; --icp-tint:rgba(23,50,114,.06); --icp-border-hover:rgba(23,50,114,.36);
}
/* VC Analysts & Scouts — research teal + violet */
[id^="panel-vc_analyst"]{
  --icp-accent:#0E7490; --icp-accent-2:#7C3AED; --icp-tint:rgba(14,116,144,.07); --icp-border-hover:rgba(14,116,144,.40);
}
/* Evaluate — DYU engine · deep emerald + cyan (its own room, same system).
   Keyed on the Evaluate tab-panel IDs so the accent dots, card top-bars and
   header bands read teal — distinct from Monitor's ICPs, cohesive with the whole. */
#tab-upload,#tab-queue,#tab-output,#tab-certificate,#tab-admin{
  --icp-accent:#0A6B51; --icp-accent-2:#0E7490; --icp-tint:rgba(10,107,81,.07); --icp-border-hover:rgba(10,107,81,.40);
}
/* Impact — NGO · Donor · CSR (the social world) — deep teal → living green. These panels
   were NOT in the map above, so every impact dashboard was defaulting to the gold accent and
   never felt like its own place. Registering them here gives all three a cohesive teal "room"
   through the SAME premium system (hero band, eyebrow, stat-tile accents, card hover, ambient
   wash) that the finance ICPs already enjoy — one edit lifts NGO, Donor and CSR at once. */
[id^="panel-ngo"],[id^="panel-csr"],[id^="panel-donor"],[id^="panel-impact"],[id^="panel-funder"]{
  --icp-accent:#0A6B51; --icp-accent-2:#1FA971; --icp-tint:rgba(10,107,81,.08); --icp-border-hover:rgba(10,107,81,.44);
}
/* Section tabs (.fstabs) adopt the room's accent — teal for impact, indigo for startups, etc.
   General across ICPs, so the whole ecosystem stays consistent. */
.panel .fstab.active{ color:var(--icp-accent) !important; }
.panel .fstab.active .fsb{ background:var(--icp-accent) !important; color:#fff !important; }
.panel .fstab .fsb{ background:var(--icp-tint); color:var(--icp-accent); }
/* The inline navy hero (fsHeroHTML) gets a living-green wash inside the impact rooms via ::before,
   so the big hero on NGO/Donor/CSR dashboards harmonises with the teal cards below instead of
   reading finance-gold. Painted behind the hero content; pointer-events:none so it never blocks a
   click, and the hero's own overflow:hidden clips it. */
[id^="panel-ngo"] .fs-hero::before,[id^="panel-donor"] .fs-hero::before,[id^="panel-csr"] .fs-hero::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:radial-gradient(480px 230px at 4% 132%, rgba(31,169,113,.32), transparent 62%);
}

/* Ambient identity wash across the top of each active panel. Applied as a
   panel BACKGROUND (not an overlay) so it always sits behind the cards and
   can never tint content or intercept a click — pure atmosphere. */
.panel.active{
  position:relative;
  background-image:radial-gradient(90% 240px at 20% 0, var(--icp-tint), transparent 72%);
  background-repeat:no-repeat;
}

/* Eyebrow + section rules pick up the room's accent */
.panel .fs-eyebrow,.panel .fs-head .fs-eyebrow{ color:var(--icp-accent); }
.panel .fs-eyebrow::before,.panel .fs-head .fs-eyebrow::before{
  background:linear-gradient(90deg,var(--icp-accent),var(--icp-accent-2));
}

/* Dashboard hero header (.fs-head) → the SAME premium hero band as the VC firm
   roll-up, tinted to each ICP's accent (Investors emerald · Startups indigo · etc).
   Gold eyebrow, white title, light subtitle on the dark gradient. */
.panel .fs-head{
  position:relative; overflow:hidden;
  background:
    radial-gradient(460px 220px at 100% -28%, rgba(229,193,88,.18), transparent 60%),
    radial-gradient(300px 180px at -6% 130%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(135deg, var(--icp-accent) 0%, #0C1F4A 100%);
  border-radius:18px; padding:22px 24px !important; margin:0 0 16px !important;
  box-shadow:0 14px 36px rgba(12,31,74,.22);
}
.panel .fs-head .fs-eyebrow{ color:#F0CE6A !important; }
.panel .fs-head .fs-eyebrow::before{ background:linear-gradient(90deg,#E5C158,#C9A84C) !important; }
.panel .fs-head .fs-title{ color:#fff !important; }
.panel .fs-head .fs-sub{ color:rgba(255,255,255,.75) !important; }

/* ── Metric / stat cards ────────────────────────────────────────────────
   Two shapes exist: the polished .kpi-card (Startup dashboard) and the
   inline stat tiles elsewhere. Adding class="fs-statgrid" to a metric
   grid promotes its inline tiles to the same premium treatment. Cosmetic
   props only (never layout) so overriding inline styles is safe. */
.panel .kpi-card,
.fs-statgrid > div{
  position:relative !important; overflow:hidden !important;
  background:var(--fs-surface) !important;
  border:1px solid var(--fs-border) !important;
  border-radius:var(--fs-r-lg) !important;
  box-shadow:var(--fs-sh-sm) !important;
  transition:transform var(--fs-med) var(--fs-ease),
             box-shadow var(--fs-med) var(--fs-ease),
             border-color var(--fs-med) var(--fs-ease) !important;
}
.panel .kpi-card::before,
.fs-statgrid > div::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--icp-accent),var(--icp-accent-2)); opacity:.92;
}
.panel .kpi-card:hover,
.fs-statgrid > div:hover{
  transform:translateY(-3px); box-shadow:var(--fs-sh-lg) !important;
  border-color:var(--icp-border-hover) !important;
}

/* ── High-premium interior for the inline stat tiles ─────────────────────
   Targets the tile's own children by position (label · value · sub) so the
   inline markup needs no edits. Cosmetic only. */
.fs-statgrid > div{
  padding:17px 17px 15px !important;
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(12,31,74,.022), transparent 58%),
    var(--fs-surface) !important;
}
/* Label — refined tracking + a small ICP-accent dot */
.fs-statgrid > div > div:nth-child(1){
  display:flex !important; align-items:center; gap:8px;
  font-size:10.5px !important; letter-spacing:.55px !important; color:var(--fs-muted) !important;
}
.fs-statgrid > div > div:nth-child(1)::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--icp-accent),var(--icp-accent-2));
  box-shadow:0 0 0 3px var(--icp-tint);
}
/* Value — larger, tighter editorial figure */
.fs-statgrid > div > div:nth-child(2){
  font-size:25px !important; letter-spacing:-.015em !important; line-height:1.06 !important; margin-top:7px !important;
}
/* Sub-line — quiet caption with a hair more breathing room */
.fs-statgrid > div > div:nth-child(3){ margin-top:5px !important; font-size:10.5px !important; }

/* Same accent dot for the class-based .kpi-card (Startup dashboard) */
.panel .kpi-card .kpi-label{ display:flex; align-items:center; gap:8px; }
.panel .kpi-card .kpi-label::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--icp-accent),var(--icp-accent-2));
  box-shadow:0 0 0 3px var(--icp-tint);
}

/* Buttons inside the ICP dashboards get a tactile press + hover lift even
   when they carry inline styles (dashboards use inline <button> a lot) */
.panel button{ transition:transform var(--fs-fast) var(--fs-ease), filter var(--fs-fast) var(--fs-ease), box-shadow var(--fs-med) var(--fs-ease) !important; }
.panel button:not([disabled]):hover{ filter:brightness(1.03); transform:translateY(-1px); }
.panel button:not([disabled]):active{ transform:translateY(0) scale(.99); }

/* Native selects/inputs in dashboards keep the brand focus ring + a hair
   more polish (inline borders are overridden by the shared input rules) */
.panel select:focus,.panel input:focus,.panel textarea:focus{
  border-color:var(--icp-accent) !important;
  box-shadow:0 0 0 3.5px var(--icp-tint) !important;
}

/* Container cards adopt the room accent on hover (quiet, intentional) */
.panel .card:hover{ border-color:var(--icp-border-hover) !important; }

/* Gentle staggered reveal so a dashboard's cards cascade in, not pop */
.panel.active .card:nth-child(1){ animation-delay:.02s; }
.panel.active .card:nth-child(2){ animation-delay:.06s; }
.panel.active .card:nth-child(3){ animation-delay:.10s; }
.panel.active .card:nth-child(4){ animation-delay:.14s; }
.panel.active .card:nth-child(n+5){ animation-delay:.16s; }

/* Section titles inside a panel stay navy for cohesion, but the little
   emoji-led card headings get consistent weight + spacing */
.panel .fs-title{ color:var(--fs-navy); }


/* ════════════════════════════════════════════════════════════════════
   ONE CONSISTENT CANVAS + READABLE LIST ROWS (site-wide theme)
   Same background, same semantic colour-coding everywhere. The per-ICP
   accents are only the thin details (dots, top-bars); the page itself is
   one cohesive premium surface across the whole product.
   ════════════════════════════════════════════════════════════════════ */
.main{
  background:
    radial-gradient(1100px 560px at 100% -6%, rgba(23,50,114,.045), transparent 60%),
    linear-gradient(180deg,#F7F9FC 0%, #EFF3FA 100%);
  background-attachment:local;
}

/* Card headings (the emoji-led "➕ Add a Startup…" titles) read as real headers */
.panel .card > div:first-child{ letter-spacing:-.01em; }

/* Subtle, consistent depth on every dashboard card. Cards that set their own
   inline background (heroes, "Funds at a glance", fund workspace) keep it —
   inline wins — so the accented ones still stand out. */
.panel .card{ background:linear-gradient(180deg,#FFFFFF 0%, #FAFCFF 100%); }
/* A whisper of a top hairline-sheen gives cards a crafted edge */
.panel .card{ position:relative; }
.panel .card::after{
  content:""; position:absolute; left:16px; right:16px; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(12,31,74,.06),transparent);
  pointer-events:none;
}

/* ── ONE FUND, ONE WORKSPACE ─────────────────────────────────────────────
   Wrap all of a fund's sections (header · waterfall · lifecycle · add-forms ·
   pipeline · cap-table · analysts) in a single tinted container with an accent
   rail, so they visually read as one fund — not a stack of unrelated cards. */
#fund-detail{
  background:
    radial-gradient(700px 240px at 100% 0, rgba(23,50,114,.05), transparent 62%),
    linear-gradient(180deg, rgba(23,50,114,.035), rgba(23,50,114,.012) 46%, transparent);
  border:1px solid #E5EAF3;
  border-left:4px solid var(--icp-accent,#173272);
  border-radius:18px;
  padding:16px 16px 4px;
  margin-top:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
/* Inside the workspace, sections sit calmer so the container reads as the unit */
#fund-detail > .card{ box-shadow:var(--fs-sh-sm) !important; }


/* ════════════════════════════════════════════════════════════════════
   SECTION HEADER BAND — one look for every card heading, every ICP.
   The icon + title sit together on a soft tinted strip. Applied to the VC
   icon-chip heads (.fs-sechead) AND the class-based headers the other
   dashboards use (.card-header), so all four ICPs read identically.
   ════════════════════════════════════════════════════════════════════ */
.fs-sechead,
.panel .card-header{
  background:linear-gradient(180deg,#F3F7FD 0%, #E9F0FA 100%) !important;
  border:1px solid #E3EAF4 !important;
  border-radius:11px !important;
  padding:10px 13px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.fs-sechead{ margin-bottom:14px; }
.panel .card-header{ margin-bottom:14px !important; align-items:center !important; }
.panel .card-header .card-title{ font-weight:800 !important; color:var(--fs-navy) !important; letter-spacing:-.01em; }
.panel .card-header .card-sub{ color:var(--fs-muted) !important; }
/* Give the class-based headers an accent dot so they match the icon-chip ones */
.panel .card-header .card-title{ display:flex; align-items:center; gap:8px; }
.panel .card-header .card-title::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--icp-accent),var(--icp-accent-2));
  box-shadow:0 0 0 3px var(--icp-tint);
}

/* The other ICPs (Investors · Startups · Analysts) use inline "font-size:14px;
   font-weight:700;color:#0C1F4A" headings. Match them by their style signature
   so EVERY card heading in EVERY ICP gets the exact same band — no per-heading
   edits, guaranteed consistency across all four dashboards. */
.panel div[style*="font-size:14px;font-weight:700;color:#0C1F4A"]{
  background:linear-gradient(180deg,#F3F7FD 0%, #E9F0FA 100%);
  border:1px solid #E3EAF4;
  border-radius:11px;
  padding:10px 13px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  letter-spacing:-.01em;
  margin-bottom:14px !important;
  display:flex; align-items:center; gap:8px;
}
/* Accent dot on those inline headings too, so they read like the icon-chip heads */
.panel div[style*="font-size:14px;font-weight:700;color:#0C1F4A"]::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,var(--icp-accent),var(--icp-accent-2));
  box-shadow:0 0 0 3px var(--icp-tint);
}

/* Info list rows (startups / investors / analysts) — cleaner, more legible,
   quieter separators. No hover highlight (removed by request). */
#fund-startups > div, #fund-investors > div, #fund-analysts > div,
#fund-startups > div > div, #fund-investors > div > div, #fund-analysts > div > div{ min-width:0; }
#fund-startups > div, #fund-investors > div, #fund-analysts > div{
  border-bottom-color:#EEF2F8 !important; padding-top:12px !important; padding-bottom:12px !important;
}
#fund-startups > div:last-child, #fund-investors > div:last-child, #fund-analysts > div:last-child{ border-bottom:none !important; }

/* The little joined / invited state chips read as proper status pills everywhere */
.sb-badge{ box-shadow:0 2px 8px rgba(180,35,24,.28); }


/* ════════════════════════════════════════════════════════════════════
   DYNAMIC CONTENT → PREMIUM (JS-rendered lists across all 4 ICPs)
   The renderers add class="fs-listrow" to each row; here we promote those
   flat border-bottom rows into clean card-rows. Cosmetic only. Hover lifts
   with a soft shadow (no flat background highlight — removed by request).
   ════════════════════════════════════════════════════════════════════ */
.panel .fs-listrow{
  background:var(--fs-surface) !important;
  border:1px solid var(--fs-border) !important;
  border-radius:var(--fs-r-md) !important;
  padding:13px 15px !important;
  margin-bottom:9px !important;
  box-shadow:var(--fs-sh-xs) !important;
  transition:box-shadow var(--fs-med) var(--fs-ease),
             transform var(--fs-med) var(--fs-ease),
             border-color var(--fs-med) var(--fs-ease) !important;
}
.panel .fs-listrow:last-child{ margin-bottom:0 !important; }
.panel .fs-listrow:hover{
  box-shadow:var(--fs-sh-md) !important; transform:translateY(-1px);
  border-color:var(--icp-border-hover) !important;
}
/* Inline mini-controls inside a row read as refined chips, not raw form fields */
.panel .fs-listrow select{
  background:#F8FAFD !important; border-color:#E4EAF3 !important; font-weight:600 !important; color:#334155 !important;
}
.panel .fs-listrow .icon,.panel .fs-listrow button{ opacity:.9; transition:opacity var(--fs-fast) var(--fs-ease); }
.panel .fs-listrow:hover button{ opacity:1; }

/* Analyst review cards + investor fund cards lift softly too (they're already
   card-shaped in the markup) */
#analyst-startups > div{
  transition:box-shadow var(--fs-med) var(--fs-ease), transform var(--fs-med) var(--fs-ease), border-color var(--fs-med) var(--fs-ease);
}
#analyst-startups > div:hover{
  box-shadow:var(--fs-sh-md); transform:translateY(-1px); border-color:var(--icp-border-hover);
}

/* Waterfall + lifecycle chips get a hair of depth so they feel tactile */
#fd-waterfall > div:last-child > div,
#fd-timeline .lc-item{ transition:transform var(--fs-fast) var(--fs-ease); }