/* Display serif — Fraunces (high-contrast, premium) with Newsreader as a close
   stand-in. Loaded from Google Fonts so headings render intentionally on every
   page; no local font files required. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Newsreader:opsz@6..72&display=swap');

/* ============================================================
   Clear Mint — Design Tokens & Component Styles
   Source of truth extracted from the dashboard screens.
   ============================================================ */

:root {
  /* ======= Clear Mint V5 — Family Wealth OS identity ======= */
  /* Brand greens (token names preserved; values remapped to V5) */
  --green-700: #0D3B2E;   /* deep emerald */
  --green-600: #1B5E4A;   /* forest green — primary */
  --green-500: #2E7D5B;   /* medium green — charts */
  --green-400: #2E8B57;   /* success / positive */
  --mint-100:  #E4ECE5;   /* soft sage fill */
  --mint-50:   #F0F3EE;   /* faint hover */
  --tab-active:#DCE8DE;

  /* V5 named tokens */
  --emerald:   #0D3B2E;
  --forest:    #1B5E4A;
  --gold:      #D4A95D;
  --gold-soft: #E7D2A6;
  --cream:     #F8F6F2;
  --sage:      #A8B8A2;

  /* ---- Status / data ---- */
  --red-500:   #C35B5B;   /* danger */
  --red-100:   #F1DEDC;
  --purple-500:#8A6E9E;   /* muted plum (category variety) */
  --amber-500: #D4A95D;   /* gold */
  --blue-500:  #5E7E9E;   /* dusty blue */

  /* ---- Neutrals (warm) ---- */
  --ink-900:  #1E2A24;
  --ink-700:  #3D4A42;
  --ink-500:  #6B7A70;
  --ink-400:  #98A39B;
  --line:     #EAE5DA;
  --surface:  #FFFFFF;
  --bg:       #F8F6F2;

  /* ---- Radius ---- */
  --r-card: 18px;
  --r-ctrl: 11px;
  --r-pill: 999px;

  /* ---- Shadow (warm, soft — tiered elevation) ---- */
  --shadow-sm:    0 1px 2px rgba(28,42,32,.06);
  --shadow-card:  0 1px 2px rgba(28,42,32,.05), 0 8px 22px -10px rgba(28,42,32,.10);
  --shadow-hover: 0 2px 4px rgba(28,42,32,.06), 0 18px 36px -14px rgba(13,59,46,.18);
  --shadow-pop:   0 14px 40px rgba(13,59,46,.16);
  --ring: 0 0 0 3px rgba(212,169,93,.35);

  /* ---- Spacing ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px;

  --font: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Fraunces","Newsreader", Georgia, "Times New Roman", serif;
  --num: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: var(--font-serif);
  --sans: var(--font);
}
/* Brand book: every figure / KPI / amount renders in Inter tabular, not the display
   serif. !important overrides inline fontFamily:'var(--font-serif)' on .num spans. */
.num, .cm-metric .m-value, .wscore .big, .ai-card .ai-amt, .st-tile-val, .st-gauge-score,
.st-cov-val, .st-insight .ibig, .an-exectile .et-val, .an-stat .v, .an-merch .mc-val,
.an-ctrl .ct-val, .an-out .v, .an-goal .g-amt b, .inv-mini .v, .bp-kpi-v, .st-num {
  font-family: var(--num) !important; font-variant-numeric: tabular-nums lining-nums;
}

/* ---------------- Base ---------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink-700);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: tabular-nums; }

/* type helpers */
.t-display { font-size:32px; line-height:40px; font-weight:700; color:var(--ink-900); letter-spacing:-.02em; }
.t-h1 { font-size:28px; line-height:36px; font-weight:700; color:var(--ink-900); letter-spacing:-.02em; }
.t-h2 { font-size:18px; line-height:26px; font-weight:700; color:var(--ink-900); letter-spacing:-.01em; }
.t-h3 { font-size:15px; line-height:22px; font-weight:600; color:var(--ink-900); }
.t-body { font-size:14px; line-height:20px; font-weight:500; }
.t-label { font-size:13px; line-height:18px; font-weight:600; }
.t-caption { font-size:12px; line-height:16px; font-weight:500; color:var(--ink-500); }
.t-micro { font-size:11px; line-height:14px; font-weight:600; }
.t-serif { font-family:var(--font-serif); }
.t-h1 { font-family:var(--font-serif); font-weight:700; letter-spacing:0; }
.t-h2 { font-family:var(--font-serif); font-weight:600; letter-spacing:0; }

.text-green { color: var(--green-600); }
.text-pos   { color: var(--green-400); }
.text-neg   { color: var(--red-500); }
.text-muted { color: var(--ink-400); }

/* ---------------- Card ---------------- */
.cm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1), border-color .22s ease;
}
/* Interactive cards (clickable / linked / hover-elevate) get a subtle lift.
   Plain content cards stay put — opt in with .cm-card-hover or a wrapping link. */
.cm-card-hover:hover,
a > .cm-card:hover,
.cm-card.is-clickable:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: rgba(46,139,87,.22);
}
.cm-card-pad { padding: var(--s-6); }
.cm-card-head {
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--s-3); margin-bottom: var(--s-5);
}
.cm-card-head .title { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--ink-900); letter-spacing:0; white-space:nowrap; }

/* ---------------- Buttons ---------------- */
.cm-btn {
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  border-radius: var(--r-ctrl); padding: 10px 16px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease, filter .15s ease;
}
.cm-btn:active { transform: scale(.975); }
/* Visible, on-brand keyboard focus across all interactive controls. */
.cm-btn:focus-visible,
.cm-nav-item:focus-visible,
.cm-field input:focus-visible,
a:focus-visible,
button:focus-visible { outline: none; box-shadow: var(--ring); }
.cm-btn-primary { background:var(--forest); color:#fff; }
.cm-btn-primary:hover { background:var(--emerald); }
.cm-btn-gold { background:var(--gold); color:#3A2E12; }
.cm-btn-gold:hover { filter:brightness(1.04); }
.cm-btn-ghost { background:#fff; color:var(--forest); border-color:var(--forest); }
.cm-btn-ghost:hover { background:var(--mint-50); }
.cm-btn-soft { background:#fff; color:var(--ink-700); border-color:var(--line); }
.cm-btn-soft:hover { background:var(--mint-50); }

/* dashed add-row button */
.cm-add-row {
  width:100%; border:1px dashed var(--red-500); color:var(--red-500);
  background:#fff; border-radius:var(--r-ctrl); padding:14px;
  font-weight:600; font-size:14px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; gap:8px;
}
.cm-add-row.green { border-color:var(--green-500); color:var(--green-600); }

/* ---------------- Badge / pill ---------------- */
.cm-badge {
  display:inline-flex; align-items:center; gap:4px; border-radius:var(--r-pill);
  padding:2px 8px; font-size:11px; font-weight:700;
}
.cm-badge-good { background:var(--mint-100); color:var(--green-600); }
.cm-badge-beta { background:var(--mint-100); color:var(--green-600); letter-spacing:.06em; }
.cm-badge-count { background:var(--green-500); color:#fff; border-radius:var(--r-pill);
  min-width:16px; height:16px; padding:0 4px; font-size:10px; display:inline-flex;
  align-items:center; justify-content:center; }

/* delta text */
.cm-delta { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; }
.cm-delta.pos { color:var(--green-400); }
.cm-delta.neg { color:var(--red-500); }

/* ================================================================
   SIDEBAR
   ================================================================ */
.cm-sidebar {
  width:264px; flex:0 0 264px; background:var(--surface);
  border-right:1px solid var(--line); height:100vh; position:sticky; top:0;
  display:flex; flex-direction:column; padding:20px 16px;
}
.cm-brand { display:flex; align-items:flex-start; gap:10px; padding:6px 8px 18px; }
.cm-brand-mark { width:34px; height:38px; flex:0 0 34px; object-fit:contain; color:var(--green-600); }
.cm-brand-name { font-size:24px; font-weight:800; color:var(--green-600); line-height:1; letter-spacing:-.02em; }
.cm-brand-name b { font-weight:800; }
.cm-brand-name span { font-weight:600; }
.cm-brand-tag { font-size:11px; color:var(--ink-400); margin-top:4px; font-weight:500; }

.cm-nav { display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1; }
.cm-nav::-webkit-scrollbar { width:0; }
.cm-nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:var(--r-ctrl); color:var(--ink-500); font-size:14px;
  font-weight:600; cursor:pointer; transition:.12s; text-decoration:none;
}
.cm-nav-item svg { width:18px; height:18px; flex:0 0 18px; }
.cm-nav-item:hover { background:var(--mint-50); color:var(--ink-700); }
.cm-nav-item.active { background:var(--mint-100); color:var(--green-600); }
.cm-nav-item .chev { margin-left:auto; transition:.2s; }
.cm-nav-item.open .chev { transform:rotate(180deg); }
.cm-subnav { display:flex; flex-direction:column; gap:2px; margin:2px 0 2px 30px; }
.cm-subnav-item {
  padding:8px 12px; border-radius:var(--r-ctrl); color:var(--ink-500);
  font-size:13.5px; font-weight:600; cursor:pointer;
}
.cm-subnav-item:hover { background:var(--mint-50); color:var(--ink-700); }
.cm-sidebar {
  width:268px; flex:0 0 268px; background:var(--emerald); color:#E8EFE9;
  height:100vh; position:sticky; top:0;
  display:flex; flex-direction:column; padding:22px 16px; overflow:hidden;
}
.cm-sidebar::after { /* faint botanical glow bottom */
  content:''; position:absolute; left:-30px; bottom:-40px; width:240px; height:260px;
  background:radial-gradient(closest-side, rgba(212,169,93,.10), transparent 70%); pointer-events:none;
}
.cm-brand { display:flex; align-items:center; gap:11px; padding:6px 8px 22px; position:relative; z-index:1; }
.cm-brand-mark { width:36px; height:40px; flex:0 0 36px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.28)); }
.cm-brand-name { font-family:var(--font-serif); font-size:23px; font-weight:600; color:#FBFAF6; line-height:1; letter-spacing:.01em; }
.cm-brand-name b { font-weight:600; }
.cm-brand-name span { font-weight:600; }
.cm-brand-sub { font-size:11px; color:rgba(232,239,233,.6); margin-top:3px; font-weight:600; letter-spacing:.01em; }
.cm-brand-tag { font-size:11px; color:rgba(232,239,233,.55); margin-top:4px; font-weight:500; }

.cm-nav { display:flex; flex-direction:column; gap:3px; overflow-y:auto; flex:1; position:relative; z-index:1; }
.cm-nav::-webkit-scrollbar { width:0; }
.cm-nav-item {
  display:flex; align-items:center; gap:13px; padding:11px 13px;
  border-radius:var(--r-ctrl); color:rgba(232,239,233,.78); font-size:14px;
  font-weight:600; cursor:pointer; transition:.14s; text-decoration:none;
}
.cm-nav-item svg { width:18px; height:18px; flex:0 0 18px; }
.cm-nav-item:hover { background:rgba(255,255,255,.06); color:#FBFAF6; }
.cm-nav-item.active { background:var(--forest); color:#FBFAF6; box-shadow:inset 0 0 0 1px rgba(212,169,93,.25); }
.cm-nav-item.active svg { color:var(--gold); }
.cm-nav-item .chev { margin-left:auto; transition:.2s; }
.cm-nav-item.open .chev { transform:rotate(180deg); }
.cm-subnav { display:flex; flex-direction:column; gap:2px; margin:3px 0 3px 30px; position:relative; z-index:1;
  border-left:1px solid rgba(232,239,233,.14); padding-left:8px; }
.cm-subnav-item {
  padding:8px 12px; border-radius:var(--r-ctrl); color:rgba(232,239,233,.65);
  font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none;
}
.cm-subnav-item:hover { background:rgba(255,255,255,.05); color:#FBFAF6; }
.cm-subnav-item.active { color:var(--gold); }

/* nav admin item — distinct gold-green pill */
.cm-nav-item.cm-nav-admin { background:linear-gradient(135deg,#1F7A53,#0D3D29); color:#FBFAF6; margin-top:4px; }
.cm-nav-item.cm-nav-admin svg { color:var(--gold); }
.cm-nav-item.cm-nav-admin.active { box-shadow:inset 0 0 0 1px rgba(212,169,93,.45); }

/* rearrange mode */
.cm-nav-grip { margin-right:-4px; color:rgba(232,239,233,.5); cursor:grab; display:inline-flex; }
.cm-nav--rearrange .cm-nav-item { cursor:grab; background:rgba(255,255,255,.04); }
.cm-nav-drag { border-radius:var(--r-ctrl); }
.cm-nav-drag[draggable="true"]:active { opacity:.6; }

/* nav tools (rearrange + theme toggle) */
.cm-nav-tools { display:flex; flex-direction:column; gap:3px; margin:8px 0 4px; padding-top:8px; border-top:1px solid rgba(232,239,233,.12); }
.cm-nav-tool { display:flex; align-items:center; gap:13px; padding:11px 13px; border:none; background:none;
  border-radius:var(--r-ctrl); color:rgba(232,239,233,.72); font-size:13.5px; font-weight:600; cursor:pointer;
  font-family:inherit; text-align:left; width:100%; transition:.14s; }
.cm-nav-tool svg { width:18px; height:18px; flex:0 0 18px; }
.cm-nav-tool:hover { background:rgba(255,255,255,.06); color:#FBFAF6; }
.cm-nav-tool.on { background:rgba(212,169,93,.16); color:var(--gold); }
.cm-nav-tool.on svg { color:var(--gold); }

/* AI assistant card */
.cm-ai-card { margin-top:12px; background:linear-gradient(160deg,rgba(212,169,93,.10),rgba(255,255,255,.04));
  border:1px solid rgba(212,169,93,.30); border-radius:16px; padding:15px 15px 14px; position:relative;
  z-index:1; display:block; overflow:hidden; }
.cm-ai-card::after { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px;
  background:radial-gradient(circle,rgba(212,169,93,.18),transparent 70%); pointer-events:none; }
.cm-ai-top { display:flex; align-items:center; gap:12px; margin-bottom:11px; position:relative; }
.cm-ai-bot-wrap { width:60px; height:60px; flex:0 0 60px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:radial-gradient(circle at 50% 35%,rgba(212,169,93,.28),rgba(212,169,93,.06));
  box-shadow:inset 0 0 0 1px rgba(212,169,93,.25); }
.cm-ai-bot-img { width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 3px 7px rgba(0,0,0,.32)); }
.cm-ai-live { position:absolute; top:11px; right:12px; font-size:9px; font-weight:800; letter-spacing:.06em;
  color:#0E2C22; background:var(--gold); padding:2px 7px; border-radius:5px; z-index:2;
  box-shadow:0 0 0 3px rgba(212,169,93,.18); }
.cm-ai-live::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:#0E2C22;
  margin-right:4px; vertical-align:1px; animation:cmPulse 1.6s ease-in-out infinite; }
@keyframes cmPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.cm-ai-title { font-size:14.5px; font-weight:800; color:#FBFAF6; line-height:1.2; }
.cm-ai-tag { font-size:11.5px; color:var(--gold); font-weight:700; margin-top:2px; }
.cm-ai-note { font-size:11.5px; line-height:1.5; color:rgba(232,239,233,.82); margin-bottom:12px;
  background:rgba(0,0,0,.16); border-radius:9px; padding:9px 11px; }
.cm-ai-actions { display:flex; gap:8px; }
.cm-ai-btn { flex:1; text-align:center; background:var(--gold); color:#0E2C22; font-size:12.5px;
  font-weight:800; padding:9px 10px; border-radius:9px; }
.cm-ai-btn:hover { filter:brightness(1.06); }
.cm-ai-chat { width:40px; flex:0 0 40px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10); color:#FBFAF6; border-radius:9px; }
.cm-ai-chat:hover { background:rgba(255,255,255,.18); }

/* sidebar footer: user + sign out */
.cm-side-foot { margin-top:12px; padding-top:12px; border-top:1px solid rgba(232,239,233,.12); position:relative; z-index:1; }
.cm-side-user { display:flex; align-items:center; gap:11px; padding:8px 6px 12px; }
.cm-side-ava { width:40px; height:40px; flex:0 0 40px; border-radius:50%; background:var(--forest);
  color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
.cm-side-uname { font-size:14px; font-weight:700; color:#FBFAF6; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-side-urole { font-size:11.5px; color:rgba(232,239,233,.55); }
.cm-side-badge { font-size:9.5px; font-weight:800; letter-spacing:.04em; color:#0E2C22; background:var(--gold); padding:3px 8px; border-radius:6px; }
.cm-side-signout { display:flex; align-items:center; gap:13px; width:100%; padding:11px 13px; border:none;
  background:none; border-radius:var(--r-ctrl); color:rgba(232,239,233,.72); font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:inherit; text-align:left; transition:.14s; }
.cm-side-signout svg { width:18px; height:18px; flex:0 0 18px; }
.cm-side-signout:hover { background:rgba(224,64,68,.16); color:#FF9B9B; }

/* ============ LIGHT SIDEBAR VARIANT ============ */
.cm-sidebar--light { background:#FFFFFF; border-right:1px solid #ECEFF1; color:#374151; }
.cm-sidebar--light::after { display:none; }
.cm-sidebar--light .cm-brand-name { color:#0B5640; }
.cm-sidebar--light .cm-brand-sub { color:#9AA6A0; }
.cm-sidebar--light .cm-nav-item { color:#5B6B62; }
.cm-sidebar--light .cm-nav-item svg { color:#9AA6A0; }
.cm-sidebar--light .cm-nav-item:hover { background:#F1F6F3; color:#0B5640; }
.cm-sidebar--light .cm-nav-item.active { background:var(--mint-50,#EAF7F1); color:#0B5640; box-shadow:inset 0 0 0 1px rgba(16,145,95,.2); }
.cm-sidebar--light .cm-nav-item.active svg { color:var(--green-600,#0E6A49); }
.cm-sidebar--light .cm-nav-item.cm-nav-admin { color:#FBFAF6; }
.cm-sidebar--light .cm-subnav { border-left-color:#E5EBE7; }
.cm-sidebar--light .cm-subnav-item { color:#6B7A72; }
.cm-sidebar--light .cm-subnav-item:hover { background:#F1F6F3; color:#0B5640; }
.cm-sidebar--light .cm-subnav-item.active { color:var(--green-600,#0E6A49); }
.cm-sidebar--light .cm-nav-tools { border-top-color:#EEF1EF; }
.cm-sidebar--light .cm-nav-tool { color:#5B6B62; }
.cm-sidebar--light .cm-nav-tool:hover { background:#F1F6F3; color:#0B5640; }
.cm-sidebar--light .cm-nav-tool.on { background:rgba(16,145,95,.12); color:var(--green-600,#0E6A49); }
.cm-sidebar--light .cm-nav-grip { color:#B6C0BA; }
.cm-sidebar--light .cm-ai-card { background:linear-gradient(160deg,#F4FBF8,#EAF7F1); border-color:var(--mint-100,#CDEBDD); }
.cm-sidebar--light .cm-ai-card::after { background:radial-gradient(circle,rgba(16,145,95,.12),transparent 70%); }
.cm-sidebar--light .cm-ai-bot-wrap { background:radial-gradient(circle at 50% 38%,rgba(16,145,95,.12),rgba(16,145,95,.03)); }
.cm-sidebar--light .cm-ai-title { color:#0B5640; }
.cm-sidebar--light .cm-ai-tag { color:var(--green-600,#0E6A49); }
.cm-sidebar--light .cm-ai-note { color:#5B6B62; background:rgba(16,145,95,.07); }
.cm-sidebar--light .cm-ai-btn { color:#0E2C22; }
.cm-sidebar--light .cm-ai-bot-img { filter:drop-shadow(0 2px 5px rgba(11,86,64,.18)); }
.cm-sidebar--light .cm-ai-chat { background:#E4F1EA; color:#0B5640; }
.cm-sidebar--light .cm-side-foot { border-top-color:#EEF1EF; }
.cm-sidebar--light .cm-side-ava { background:var(--mint-100,#CDEBDD); color:var(--green-600,#0E6A49); }
.cm-sidebar--light .cm-side-uname { color:#0B5640; }
.cm-sidebar--light .cm-side-urole { color:#9AA6A0; }
.cm-sidebar--light .cm-side-signout { color:#5B6B62; }
.cm-sidebar--light .cm-side-signout:hover { background:var(--red-100,#FCE4E4); color:var(--red-500,#E04044); }

/* ================================================================
   HEADER
   ================================================================ */
.cm-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.cm-header .lede { flex:1 1 240px; min-width:0; }
.cm-header .lede p { margin:6px 0 0; color:var(--ink-500); font-size:15px; }
.cm-header-right { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; justify-content:flex-end; }
.cm-search {
  display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 16px;
  flex:0 1 240px; min-width:46px; max-width:240px; color:var(--ink-400);
}
.cm-search input { border:0; outline:0; background:transparent; font-family:inherit; font-size:14px; flex:1; color:var(--ink-700); }
.cm-iconbtn { position:relative; width:38px; height:38px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; color:var(--ink-500);
  background:var(--surface); border:1px solid var(--line); cursor:pointer; }
.cm-iconbtn .dot { position:absolute; top:-2px; right:-2px; }
.cm-user { display:flex; align-items:center; gap:10px; cursor:pointer; }
.cm-user img, .cm-avatar { width:40px; height:40px; border-radius:var(--r-pill); object-fit:cover;
  background:var(--mint-100); }
.cm-user .name { font-size:14px; font-weight:700; color:var(--ink-900); line-height:1.2; white-space:nowrap; }
.cm-user .role { font-size:12px; color:var(--ink-400); white-space:nowrap; }

/* account dropdown menu */
.cm-usermenu { position:absolute; top:calc(100% + 10px); right:0; width:248px; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 44px -16px rgba(16,40,30,.28); padding:7px; animation:cmMenuIn .14s ease-out; }
@keyframes cmMenuIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.cm-usermenu-head { padding:10px 12px 11px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.cm-usermenu-head .name { font-size:14px; font-weight:800; color:var(--ink-900); }
.cm-usermenu-head .email { font-size:12px; color:var(--ink-400); margin-top:1px; }
.cm-usermenu-item { display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px;
  border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-700); background:none;
  border:none; cursor:pointer; text-decoration:none; font-family:inherit; text-align:left; }
.cm-usermenu-item svg { color:var(--ink-400); flex:0 0 auto; }
.cm-usermenu-item:hover { background:var(--mint-50); color:var(--ink-900); }
.cm-usermenu-item:hover svg { color:var(--green-600); }
.cm-usermenu-item.danger { color:var(--red-500); }
.cm-usermenu-item.danger svg { color:var(--red-500); }
.cm-usermenu-item.danger:hover { background:var(--red-100); color:var(--red-500); }
.cm-usermenu-sep { height:1px; background:var(--line); margin:6px 4px; }

/* ================================================================
   METRIC CARD
   ================================================================ */
.cm-metric { position:relative; overflow:hidden; }
.cm-metric .m-icon { position:absolute; right:22px; top:22px; color:var(--gold); display:flex; }
.cm-metric .m-label { font-size:13.5px; font-weight:600; margin-bottom:12px; padding-right:30px; }
.cm-metric.has-art .m-value, .cm-metric.has-art .m-label, .cm-metric.has-art .m-foot { max-width:calc(100% - 96px); }
.cm-metric .m-value { font-family:var(--font-serif); font-size:30px; line-height:1; font-weight:700; color:var(--ink-900); letter-spacing:0; }
.cm-metric .m-foot { margin-top:12px; display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-400); flex-wrap:nowrap; white-space:nowrap; }
.cm-metric .m-art { position:absolute; right:18px; top:50%; transform:translateY(-50%); opacity:.95; pointer-events:none; }

/* gauge variant */
.cm-gauge-wrap { display:flex; align-items:center; gap:16px; }
.cm-gauge-val { font-size:22px; font-weight:800; color:var(--ink-900); }

/* ================================================================
   INSIGHT CARD (icon list)
   ================================================================ */
.cm-insight-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.cm-insight-row:last-of-type { border-bottom:0; }
.cm-ic-icon { width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; }
.cm-ic-body { flex:1; min-width:0; }
.cm-ic-title { font-size:14px; font-weight:700; color:var(--ink-900); }
.cm-ic-sub { font-size:12px; color:var(--ink-400); margin-top:1px; }
.cm-ic-val { font-size:14px; font-weight:700; white-space:nowrap; }
.cm-insight-total { display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; padding:14px 16px; background:var(--mint-50); border-radius:var(--r-ctrl); }
.cm-insight-total .lbl { font-weight:700; color:var(--ink-900); font-size:14px; }

/* ================================================================
   DATA TABLE
   ================================================================ */
.cm-table { width:100%; border-collapse:collapse; }
.cm-table thead th {
  text-align:left; font-size:12px; font-weight:700; color:var(--ink-400);
  padding:0 16px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.cm-table thead th.right { text-align:right; }
.cm-table tbody td { padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle; transition: background .14s ease; }
.cm-table tbody tr:hover { background:var(--mint-50); box-shadow: inset 0 0 0 1px rgba(46,139,87,.08); }
.cm-table tbody tr:last-child td { border-bottom:0; }
.cm-cell-lead { display:flex; align-items:center; gap:12px; }
.cm-cell-thumb { width:40px; height:40px; flex:0 0 40px; border-radius:10px; object-fit:cover;
  background:var(--mint-100); display:flex; align-items:center; justify-content:center; }
.cm-cell-primary { font-size:14px; font-weight:700; color:var(--ink-900); }
.cm-cell-sub { font-size:12px; color:var(--ink-400); margin-top:1px; }
.cm-cell-strong { font-size:14px; font-weight:700; color:var(--ink-900); }
.cm-cell-meta { font-size:12px; color:var(--ink-400); margin-top:1px; }
/* Compact tables — denser, smaller transaction/earnings/bills rows. Default ON; toggle off in
   Settings → Display to restore the larger text (body.cm-compact-tables added by cm-config). */
body.cm-compact-tables .cm-table tbody td { padding:9px 12px; }
body.cm-compact-tables .cm-table thead th { padding:9px 12px; font-size:10.5px; }
body.cm-compact-tables .cm-table tbody td,
body.cm-compact-tables .cm-cell-primary,
body.cm-compact-tables .cm-cell-strong { font-size:12.5px; }
body.cm-compact-tables .cm-cell-sub,
body.cm-compact-tables .cm-cell-meta { font-size:11px; }
.cm-chev { color:var(--ink-400); cursor:pointer; }

/* tabs */
.cm-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.cm-tab { padding:0 2px 14px; font-size:14px; font-weight:600; color:var(--ink-500);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.cm-tab:hover { color:var(--ink-700); }
.cm-tab.active { color:var(--green-600); border-bottom-color:var(--green-600); }

/* segmented control */
.cm-seg { display:inline-flex; background:var(--mint-50); border:1px solid var(--line);
  border-radius:var(--r-ctrl); padding:3px; gap:2px; }
.cm-seg button { border:0; background:transparent; font-family:inherit; font-size:12.5px;
  font-weight:600; color:var(--ink-500); padding:5px 12px; border-radius:7px; cursor:pointer; }
.cm-seg button.active { background:#fff; color:var(--ink-900); box-shadow:var(--shadow-card); }

/* select */
.cm-select { display:inline-flex; align-items:center; gap:8px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-ctrl); padding:8px 12px;
  font-size:13px; font-weight:600; color:var(--ink-700); cursor:pointer; }

/* ================================================================
   PROGRESS BAR
   ================================================================ */
.cm-progress { width:100%; }
.cm-progress .pb-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:5px; }
.cm-progress .pb-pct { font-size:13px; font-weight:700; color:var(--ink-900); }
.cm-progress .pb-cap { font-size:11px; color:var(--ink-400); }
.cm-progress .pb-track { height:6px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
.cm-progress .pb-fill { height:100%; border-radius:var(--r-pill); background:var(--green-500); }

/* ================================================================
   FINANCIAL HEALTH (gauge / ratio)
   ================================================================ */
.cm-health .h-top { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.cm-health .h-ratio { font-size:24px; font-weight:800; color:var(--ink-900); }
.cm-health .h-scale { position:relative; height:8px; border-radius:var(--r-pill);
  background:linear-gradient(90deg,#E04044 0%, #FBA834 50%, #10A06A 100%); }
.cm-health .h-marker { position:absolute; top:-6px; transform:translateX(-50%);
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:8px solid var(--ink-700); }
.cm-health .h-ticks { display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--ink-400); }
.cm-health .h-note { margin-top:12px; font-size:12px; color:var(--ink-500); }

/* ================================================================
   CHART LEGEND (shared by DonutChart)
   ================================================================ */
.cm-legend { display:flex; flex-direction:column; gap:12px; }
.cm-legend-row { display:flex; align-items:center; gap:10px; font-size:13px; }
.cm-legend-dot { width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.cm-legend-row .lg-label { color:var(--ink-700); font-weight:600; white-space:nowrap; }
.cm-legend-row .lg-pct { margin-left:auto; color:var(--ink-400); font-weight:600; min-width:38px; text-align:right; }
.cm-legend-row .lg-val { color:var(--ink-900); font-weight:700; min-width:74px; text-align:right; }

/* ================================================================
   APP LAYOUT UTILITIES (shared across pages)
   ================================================================ */
.cm-app { display:flex; min-height:100vh; }
.cm-main { flex:1; min-width:0; padding:24px 32px 64px; }
.cm-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cm-grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.cm-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cm-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cm-grid-2a { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.cm-grid-2b { display:grid; grid-template-columns:1fr 1.6fr; gap:20px; }
.cm-mt-20 { margin-top:20px; } .cm-mt-24 { margin-top:24px; } .cm-mb-24 { margin-bottom:24px; }
.cm-row { display:flex; align-items:center; gap:12px; }
.cm-stack { display:flex; flex-direction:column; gap:20px; }
.cm-donut-card { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }

/* category / progress bars */
.cm-catbar { display:flex; align-items:center; gap:14px; padding:9px 0; }
.cm-catbar .name { width:120px; flex:0 0 120px; font-size:13px; font-weight:600; color:var(--ink-700);
  display:flex; align-items:center; gap:8px; }
.cm-catbar .track { flex:1; height:8px; border-radius:999px; background:var(--line); overflow:hidden; }
.cm-catbar .fill { height:100%; border-radius:999px; }
.cm-catbar .val { width:84px; text-align:right; font-size:13px; font-weight:700; color:var(--ink-900); }
.cm-catbar .pct { width:46px; text-align:right; font-size:12px; font-weight:600; color:var(--ink-400); }

/* activity / item rows */
.cm-act { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.cm-act:last-child { border-bottom:0; }
.cm-act-ic { width:36px; height:36px; flex:0 0 36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.cm-act-body { flex:1; min-width:0; }
.cm-act-title { font-size:14px; font-weight:700; color:var(--ink-900); }
.cm-act-sub { font-size:12px; color:var(--ink-400); margin-top:1px; }
.cm-act-right { text-align:right; white-space:nowrap; }
.cm-act-date { font-size:11px; color:var(--ink-400); }
.cm-act-amt { font-size:13px; font-weight:700; margin-top:2px; }

/* status pill */
.cm-pill { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:3px 10px;
  font-size:11px; font-weight:700; }
.cm-pill-green { background:var(--mint-100); color:var(--green-600); }
.cm-pill-amber { background:#FEF1DD; color:#B5740F; }
.cm-pill-red { background:var(--red-100); color:var(--red-500); }
.cm-pill-slate { background:#EEF1F4; color:var(--ink-500); }
.cm-pill-blue { background:#E7EEFE; color:#2563EB; }

/* mom change cell */
.cm-change .pct { display:flex; align-items:center; gap:3px; font-size:13px; font-weight:700; }
.cm-change .amt { font-size:12px; margin-top:1px; }

/* simple card tiles (goals, accounts, policies) */
.cm-tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:20px; }
.cm-tile-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cm-tile-ic { width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:flex; align-items:center; justify-content:center; }

/* mini stat inside tiles */
.cm-ministat .v { font-size:18px; font-weight:800; color:var(--ink-900); }
.cm-ministat .k { font-size:12px; color:var(--ink-400); margin-top:2px; }

/* bar chart (vertical) */
.cm-vbars { display:flex; align-items:flex-end; gap:14px; height:160px; padding-top:10px; }
.cm-vbar { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.cm-vbar .col { width:100%; max-width:46px; border-radius:8px 8px 4px 4px; }
.cm-vbar .lbl { font-size:11px; color:var(--ink-400); font-weight:600; }

/* settings form */
.cm-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.cm-field label { font-size:13px; font-weight:600; color:var(--ink-700); }
.cm-field input, .cm-field select { font-family:inherit; font-size:14px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-ctrl); color:var(--ink-900); background:#fff; outline:none; }
.cm-field input:focus { border-color:var(--green-500); }
.cm-toggle { width:42px; height:24px; border-radius:999px; background:var(--line); position:relative; cursor:pointer; flex:0 0 42px; }
.cm-toggle.on { background:var(--green-500); }
.cm-toggle .knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.18s; }
.cm-toggle.on .knob { left:21px; }

@media (max-width:1180px){
  .cm-grid-4{grid-template-columns:repeat(2,1fr);}
  .cm-grid-6{grid-template-columns:repeat(3,1fr);}
  .cm-grid-3,.cm-grid-2,.cm-grid-2a,.cm-grid-2b{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .cm-grid-6{grid-template-columns:repeat(2,1fr);}
}

/* ================================================================
   V5 DASHBOARD (Family Wealth OS)
   ================================================================ */
.cm-card-dark { background:linear-gradient(155deg,#11422F 0%,#0A2E22 100%); color:#EAF0EA;
  border:1px solid rgba(212,169,93,.22); border-radius:var(--r-card); position:relative; overflow:hidden; }
.cm-card-dark::after { content:''; position:absolute; right:-40px; top:-30px; width:180px; height:180px;
  background:radial-gradient(closest-side, rgba(212,169,93,.14), transparent 70%); pointer-events:none; }

/* dashboard quick-import (Upload OFX / CSV) */
.dash-import { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(120deg,#F3F8F4,#FAFCFA); border:1px solid var(--line);
  border-radius:var(--r-card); padding:16px 20px; }
.dash-import .di-ic { width:46px; height:46px; flex:0 0 46px; border-radius:13px;
  background:var(--mint-100); color:var(--green-600); display:flex; align-items:center; justify-content:center; }
.dash-import .di-copy { flex:1; min-width:200px; }
.dash-import .di-title { font-weight:800; font-size:15px; color:var(--ink-900); }
.dash-import .di-sub { font-size:12.5px; color:var(--ink-500); margin-top:2px; line-height:1.45; max-width:560px; }
.dash-import .di-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dash-import .di-status { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  padding:6px 11px; border-radius:999px; }
.dash-import .di-status--ok { background:var(--mint-100); color:var(--green-600); }
.dash-import .di-status--err { background:#FBEAE8; color:var(--red-500); }
.dash-import .di-status--busy { background:#FEF6E6; color:#9A7A22; }

.dash-grid { display:grid; grid-template-columns:1fr 344px; gap:20px; align-items:start; }
.dash-cf { display:grid; grid-template-columns:1.45fr 1fr; gap:20px; }
@media (max-width:1300px){ .dash-grid{grid-template-columns:1fr;} }
@media (max-width:1000px){ .dash-cf{grid-template-columns:1fr;} }

/* KPI top-right icon chip */
.kpi-ic { color:var(--gold); display:flex; }

/* Family Wealth Score */
.wscore .lbl { display:flex; align-items:center; gap:6px; color:rgba(234,240,234,.85); font-size:14px; font-weight:600; }
.wscore .big { font-family:var(--font-serif); font-size:46px; font-weight:700; color:#fff; line-height:1; }
.wscore .badge { color:var(--gold); font-weight:700; font-size:15px; }
.wscore-bar { height:7px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; margin:14px 0 12px; }
.wscore-bar i { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#2E8B57,#D4A95D); }
.wscore p { color:rgba(234,240,234,.7); font-size:13px; line-height:1.5; margin:0 0 16px; }
.wscore-shield { position:absolute; right:18px; bottom:16px; width:54px; height:62px; color:var(--gold); opacity:.85; }

/* AI Insight card */
.ai-card { background:linear-gradient(135deg,#FBF7EE,#F5EFE1); border:1px solid var(--gold-soft);
  border-radius:var(--r-card); padding:24px; position:relative; overflow:hidden; display:flex; gap:16px; }
.ai-card .ai-head { display:flex; align-items:center; gap:8px; color:var(--gold); font-weight:700; font-size:15px;
  font-family:var(--font-serif); margin-bottom:12px; }
.ai-card .ai-amt { font-family:var(--font-serif); font-size:34px; font-weight:700; color:var(--forest); line-height:1.05; }
.ai-card .ai-text { color:var(--ink-700); font-size:14px; line-height:1.5; max-width:280px; }
.ai-plant { flex:0 0 150px; position:relative; align-self:center; }
/* AI robot (mood-driven) */
.ai-robot-wrap { flex:0 0 150px; position:relative; align-self:stretch; min-height:170px; display:flex; align-items:center; justify-content:center; }
.ai-robot-ring { position:absolute; inset:0; }
.ai-robot { width:118px; height:auto; position:relative; z-index:1; filter:drop-shadow(0 10px 16px rgba(11,40,30,.22));
  transition:transform .5s cubic-bezier(.34,1.4,.5,1); animation:aiRobotBob 4s ease-in-out infinite; }
.ai-robot-wrap[data-mood="thriving"] .ai-robot { animation:aiRobotCheer 2.6s ease-in-out infinite; }
.ai-robot-wrap[data-mood="alert"] .ai-robot { animation:aiRobotNudge 3s ease-in-out infinite; }
@keyframes aiRobotBob { 0%,100%{ margin-top:0 } 50%{ margin-top:-7px } }
@keyframes aiRobotCheer { 0%,100%{ margin-top:0; transform:translateY(-18px) rotate(-2deg) } 50%{ margin-top:-10px; transform:translateY(-18px) rotate(2deg) } }
@keyframes aiRobotNudge { 0%,100%{ margin-top:0 } 50%{ margin-top:-3px } }
@media (prefers-reduced-motion: reduce){ .ai-robot{ animation:none !important; } }
.ai-podium { position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:118px; height:22px; border-radius:50%;
  background:radial-gradient(closest-side,#E7D2A6,#D4A95D); opacity:.55; }

/* Cash flow stacked bar chart */
.cf-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px; gap:12px; white-space:nowrap; }
.cf-legend { display:flex; gap:16px; }
.cf-legend span { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-500); font-weight:600; }
.cf-dot { width:9px; height:9px; border-radius:3px; }
.cf-chart { position:relative; height:210px; display:flex; align-items:stretch; gap:12px; padding:8px 0; }
.cf-col { flex:1; display:flex; flex-direction:column; align-items:center; }
.cf-half { flex:1; display:flex; align-items:flex-end; justify-content:center; width:100%; }
.cf-half.bot { align-items:flex-start; }
.cf-up { width:60%; max-width:24px; background:var(--forest); border-radius:6px 6px 0 0; }
.cf-dn { width:60%; max-width:24px; background:var(--gold); border-radius:0 0 6px 6px; }
.cf-base { position:absolute; left:0; right:0; top:50%; border-top:1px dashed var(--line); }
.cf-xlabels { display:flex; gap:12px; margin-top:8px; }
.cf-xlabels span { flex:1; text-align:center; font-size:11px; color:var(--ink-400); font-weight:600; }

/* quote card */
.quote-card { background:linear-gradient(135deg,#F4F0E6,#EFEADB); border:1px solid var(--line);
  border-radius:var(--r-card); padding:22px; position:relative; overflow:hidden; }
.quote-card .mark { font-family:var(--font-serif); font-size:44px; color:var(--gold); line-height:.6; }
.quote-card .qt { font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--ink-700); line-height:1.5; margin:6px 0 10px; }
.quote-card .by { font-size:12px; color:var(--ink-500); font-weight:600; }

/* bottom banner */
.dash-banner { background:linear-gradient(120deg,#0D3B2E,#11422F); border-radius:var(--r-card);
  padding:26px 30px; display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:22px; align-items:center;
  margin-top:20px; position:relative; overflow:hidden; }
.dash-banner h3 { font-family:var(--font-serif); color:var(--gold); font-size:22px; margin:0 0 6px; font-weight:600; }
.dash-banner .lead { color:rgba(234,240,234,.78); font-size:13px; line-height:1.5; }
.dash-feat { text-align:left; }
.dash-feat .fi { color:var(--gold); margin-bottom:8px; }
.dash-feat .ft { color:#fff; font-weight:700; font-size:13px; }
.dash-feat .fs { color:rgba(234,240,234,.6); font-size:12px; margin-top:2px; }
@media (max-width:1000px){ .dash-banner{grid-template-columns:1fr 1fr;} }

/* ================================================================
   CREDIT CARD STATEMENTS — Command Center
   ================================================================ */
.st-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.st-toolbar .left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.st-toolbar .right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.st-control { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-ctrl); padding:9px 14px; font-size:13.5px; font-weight:700; color:var(--ink-700); cursor:pointer; white-space:nowrap; }
.st-control:hover { background:var(--mint-50); }
.st-control .mut { color:var(--ink-400); font-weight:600; }

/* section eyebrow */
.st-eyebrow { font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--ink-400); text-transform:uppercase; }

/* portfolio summary tiles */
.st-summary { display:grid; grid-template-columns:repeat(6,1fr); }
.st-tile { padding:18px 22px; border-right:1px solid var(--line); position:relative; }
.st-tile:last-child { border-right:0; }
.st-tile-head { display:flex; align-items:center; gap:8px; margin-bottom:13px; }
.st-tile-ic { width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.st-tile-label { font-size:12px; font-weight:700; color:var(--ink-500); line-height:1.25; }
.st-tile-val { font-family:var(--font-serif); font-size:25px; font-weight:700; color:var(--ink-900); line-height:1; letter-spacing:0; }
.st-tile-foot { margin-top:9px; font-size:11.5px; font-weight:600; color:var(--ink-400); display:flex; align-items:center; gap:5px; white-space:nowrap; }

/* health score block */
.st-health { display:grid; grid-template-columns:296px 1fr 392px; gap:30px; align-items:stretch; }
.st-health .col-sep { padding-left:30px; border-left:1px solid var(--line); }
.st-gauge-wrap { position:relative; width:260px; margin:6px auto 0; }
.st-gauge-center { position:absolute; left:0; right:0; bottom:6px; text-align:center; }
.st-gauge-score { font-family:var(--font-serif); font-size:46px; font-weight:700; color:var(--ink-900); line-height:1; }
.st-gauge-rate { font-size:14px; font-weight:800; color:var(--green-600); margin-top:4px; letter-spacing:.01em; }
.st-stars { display:flex; gap:3px; justify-content:center; margin-top:7px; color:var(--gold); }
.st-gauge-tick { position:absolute; font-size:11px; font-weight:700; color:var(--ink-400); }

/* score breakdown rows */
.st-break { display:flex; flex-direction:column; gap:3px; }
.st-break-row { display:grid; grid-template-columns:26px 1fr 56px; align-items:center; gap:11px; padding:8px 0; border-bottom:1px solid var(--line); }
.st-break-row:last-child { border-bottom:0; }
.st-break-ic { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.st-break-name { font-size:13px; font-weight:700; color:var(--ink-900); }
.st-break-wt { font-size:11px; font-weight:600; color:var(--ink-400); margin-left:4px; }
.st-break-track { height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:6px; }
.st-break-fill { height:100%; border-radius:999px; }
.st-break-val { text-align:right; font-size:13px; font-weight:800; color:var(--ink-900); white-space:nowrap; }

/* score trend */
.st-trend-pt { font-size:11px; font-weight:700; fill:var(--ink-500); }
.st-trend-badge { font-size:12px; font-weight:800; fill:#fff; }

/* analytics + insights grids */
.st-analytics { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.st-insights { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.st-mini-title { font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--ink-900); }
.st-mini-sub { font-size:11.5px; font-weight:600; color:var(--ink-400); margin-top:1px; }

/* utilization rows */
.st-util-row { display:grid; grid-template-columns:1fr 86px 40px; align-items:center; gap:10px; padding:6px 0; }
.st-util-name { font-size:12.5px; font-weight:600; color:var(--ink-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-util-track { height:7px; border-radius:999px; background:var(--mint-50); overflow:hidden; }
.st-util-fill { height:100%; border-radius:999px; }
.st-util-pct { text-align:right; font-size:12.5px; font-weight:800; color:var(--ink-900); }

/* coverage gauge */
.st-cov-wrap { position:relative; width:200px; margin:10px auto 4px; }
.st-cov-center { position:absolute; left:0; right:0; bottom:2px; text-align:center; }
.st-cov-val { font-family:var(--font-serif); font-size:34px; font-weight:700; color:var(--ink-900); line-height:1; }
.st-cov-lab { font-size:12px; font-weight:800; color:var(--green-600); margin-top:2px; }

/* info banner */
.st-banner { display:flex; align-items:center; gap:14px; background:linear-gradient(180deg,#F4FBF8,#EAF7F1);
  border:1px solid var(--mint-100); border-radius:var(--r-card); padding:14px 18px; margin:20px 0; }
.st-banner .ic { width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--green-600); box-shadow:var(--shadow-card); }
.st-banner .tx { flex:1; font-size:13px; font-weight:600; color:var(--ink-700); line-height:1.45; }
.st-banner a { color:var(--green-600); font-weight:800; text-decoration:none; white-space:nowrap; }
.st-banner .x { color:var(--ink-400); cursor:pointer; flex:0 0 auto; }

/* statements table */
.st-tablehead { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.st-tablehead .filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.st-searchbox { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-ctrl); padding:8px 12px; color:var(--ink-400); min-width:200px; }
.st-searchbox input { border:0; outline:0; background:transparent; font-family:inherit; font-size:13px; flex:1; color:var(--ink-700); }
.st-net { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:25px; padding:0 7px;
  border-radius:6px; font-size:11px; font-weight:800; color:#fff; letter-spacing:.04em; flex:0 0 auto; }
.st-table { width:100%; border-collapse:collapse; }
.st-table thead th { text-align:left; font-size:11.5px; font-weight:800; color:var(--ink-400); padding:0 14px 13px;
  border-bottom:1px solid var(--line); white-space:nowrap; }
.st-table thead th.r { text-align:right; }
.st-table td { padding:13px 14px; vertical-align:middle; white-space:nowrap; }
.st-table .grouprow td { background:var(--mint-50); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.st-table .subrow td { border-bottom:1px solid var(--line); }
.st-table .subrow:hover td { background:#FCFBF8; }
.st-num { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-900); font-size:13px; }
.st-num.mut { font-weight:600; color:var(--ink-500); }
.st-cardname { font-size:14px; font-weight:800; color:var(--ink-900); }
.st-expand { width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-400); cursor:pointer; transition:.15s; }
.st-expand:hover { background:#fff; color:var(--ink-700); }
.st-expand.open svg { transform:rotate(180deg); }
.st-substem { color:var(--ink-400); display:inline-flex; margin:0 8px 0 30px; }
.st-statuswrap { display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.st-statuswrap .cap { font-size:10px; font-weight:700; color:var(--ink-400); }
.st-pdf { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px;
  background:var(--red-100); color:var(--red-500); cursor:pointer; }
.st-act { display:flex; align-items:center; gap:6px; }
.st-actbtn { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--ink-500);
  cursor:pointer; padding:4px 7px; border-radius:7px; }
.st-actbtn:hover { background:var(--mint-50); color:var(--green-600); }
.st-kebab { color:var(--ink-400); cursor:pointer; padding:4px; border-radius:6px; }
.st-kebab:hover { background:var(--mint-50); }

/* pagination */
.st-pager { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; flex-wrap:wrap; }
.st-pager .dots { display:flex; align-items:center; gap:6px; }
.st-page { width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:#fff; display:inline-flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--ink-500); cursor:pointer; }
.st-page:hover { background:var(--mint-50); }
.st-page.active { background:var(--green-600); color:#fff; border-color:var(--green-600); }

/* insight tiles */
.st-insight { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:20px; display:flex; flex-direction:column; }
.st-insight .ihead { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.st-insight .iic { width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.st-insight .ititle { font-size:13px; font-weight:800; color:var(--ink-900); }
.st-insight .isub { font-size:11px; font-weight:600; color:var(--ink-400); }
.st-insight .ibig { font-family:var(--font-serif); font-size:28px; font-weight:700; color:var(--ink-900); line-height:1; }
.st-insight .itext { font-size:12.5px; font-weight:600; color:var(--ink-500); margin-top:7px; line-height:1.4; }
.st-insight .ilink { margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:800; color:var(--green-600); cursor:pointer; }

@media (max-width:1280px){
  .st-health { grid-template-columns:1fr; }
  .st-health .col-sep { padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:24px; margin-top:4px; }
  .st-analytics { grid-template-columns:1fr 1fr; }
  .st-insights { grid-template-columns:1fr 1fr; }
  .st-summary { grid-template-columns:repeat(3,1fr); }
  .st-tile { border-bottom:1px solid var(--line); }
}
@media (max-width:760px){
  .st-summary { grid-template-columns:repeat(2,1fr); }
  .st-analytics, .st-insights { grid-template-columns:1fr; }
}

/* insurance quick-actions grid */
@media (max-width:1180px){ .ins-actions { grid-template-columns:repeat(2,1fr)!important; } }
@media (max-width:560px){ .ins-actions { grid-template-columns:1fr!important; } }

/* ================================================================
   ANALYTICS — Financial Intelligence Command Center
   (additive; reuses st-* + cm-* vocabulary)
   ================================================================ */

/* section divider heading */
.an-sec { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin:30px 0 16px; flex-wrap:wrap; }
.an-sec .an-sec-l { display:flex; flex-direction:column; gap:3px; }
.an-sec .an-eyebrow { font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.an-sec h2 { font-family:var(--font-serif); font-size:22px; font-weight:600; color:var(--ink-900); margin:0; letter-spacing:0; }
.an-sec .an-sec-sub { font-size:13px; font-weight:600; color:var(--ink-400); }
.an-sec .an-sec-r { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.an-first { margin-top:4px; }

/* executive KPI tiles (6-up, with sparkline) */
.an-exec { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.an-exectile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:17px 18px 14px; position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:150px; }
.an-exectile .et-head { display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.an-exectile .et-ic { width:28px; height:28px; flex:0 0 28px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.an-exectile .et-label { font-size:11.5px; font-weight:700; color:var(--ink-500); line-height:1.2; }
.an-exectile .et-val { font-family:var(--font-serif); font-size:26px; font-weight:700; color:var(--ink-900); line-height:1; letter-spacing:0; }
.an-exectile .et-delta { margin-top:8px; display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.an-exectile .et-delta .mut { color:var(--ink-400); font-weight:600; }
.an-exectile .et-spark { margin-top:auto; padding-top:10px; }
.an-exectile.feat { background:linear-gradient(155deg,#11422F 0%,#0A2E22 100%); border-color:rgba(212,169,93,.24); }
.an-exectile.feat::after { content:''; position:absolute; right:-36px; top:-30px; width:150px; height:150px;
  background:radial-gradient(closest-side, rgba(212,169,93,.16), transparent 70%); pointer-events:none; }
.an-exectile.feat .et-label { color:rgba(234,240,234,.72); }
.an-exectile.feat .et-val { color:#FBFAF6; }
.an-exectile.feat .et-ic { background:rgba(212,169,93,.16); color:var(--gold); }

/* health hero radar + chips */
.an-improve { display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.an-improve-row { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-ctrl);
  background:var(--mint-50); border:1px solid var(--line); }
.an-improve-row .ai-ic { width:28px; height:28px; flex:0 0 28px; border-radius:8px; background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--green-600); box-shadow:var(--shadow-card); }
.an-improve-row .ai-tx { flex:1; font-size:12.5px; font-weight:600; color:var(--ink-700); line-height:1.4; }
.an-improve-row .ai-pts { font-size:12px; font-weight:800; color:var(--green-600); white-space:nowrap; }

/* legend chips for charts */
.an-legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.an-legend span { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-500); }
.an-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.an-legend i.dash { width:14px; height:0; border-top:2px dashed currentColor; border-radius:0; }

/* mini stat strip beside charts */
.an-statcol { display:flex; flex-direction:column; gap:14px; }
.an-stat { padding:14px 16px; border-radius:var(--r-ctrl); border:1px solid var(--line); background:#fff; }
.an-stat .k { font-size:11.5px; font-weight:700; color:var(--ink-400); display:flex; align-items:center; gap:6px; }
.an-stat .v { font-family:var(--font-serif); font-size:23px; font-weight:700; color:var(--ink-900); margin-top:5px; line-height:1; }
.an-stat .c { font-size:11.5px; font-weight:600; color:var(--ink-500); margin-top:4px; }
.an-stat.warn { background:#FBF4E7; border-color:var(--gold-soft); }
.an-stat.warn .v { color:#A9772A; }

/* spending heatmap */
.an-heat { display:flex; flex-direction:column; gap:5px; }
.an-heat-row { display:flex; gap:5px; align-items:center; }
.an-heat-cell { width:100%; aspect-ratio:1; border-radius:5px; flex:1; }
.an-heat-mlabels { display:flex; justify-content:space-between; margin-top:8px; font-size:10.5px; font-weight:700; color:var(--ink-400); }
.an-heat-scale { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:var(--ink-400); }
.an-heat-scale i { width:13px; height:13px; border-radius:4px; }

/* merchant rows */
.an-merch { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.an-merch:last-child { border-bottom:0; }
.an-merch .mc-ic { width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.an-merch .mc-body { flex:1; min-width:0; }
.an-merch .mc-name { font-size:13.5px; font-weight:700; color:var(--ink-900); }
.an-merch .mc-sub { font-size:11.5px; font-weight:600; color:var(--ink-400); margin-top:1px; }
.an-merch .mc-val { font-family:var(--font-serif); font-size:15px; font-weight:700; color:var(--ink-900); white-space:nowrap; }

/* projection lab */
.an-lab { display:grid; grid-template-columns:330px 1fr; gap:0; }
.an-lab-controls { padding:22px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:18px; }
.an-lab-canvas { padding:22px 24px; min-width:0; }
.an-ctrl .ct-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; }
.an-ctrl .ct-name { font-size:12.5px; font-weight:700; color:var(--ink-700); display:flex; align-items:center; gap:7px; }
.an-ctrl .ct-val { font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--green-600); }
.an-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; outline:none;
  background:var(--line); cursor:pointer; }
.an-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:none; box-shadow:0 1px 4px rgba(13,59,46,.28), 0 0 0 5px var(--forest); cursor:pointer; margin-top:-1px;
  position:relative; z-index:2; }
.an-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--forest); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(13,59,46,.28); cursor:pointer; }
.an-lab-outs { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
.an-out { padding:14px 16px; border-radius:var(--r-ctrl); background:var(--mint-50); border:1px solid var(--line); }
.an-out .k { font-size:11px; font-weight:700; color:var(--ink-400); }
.an-out .v { font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--ink-900); margin-top:4px; line-height:1; }
.an-out.gold { background:#FBF4E7; border-color:var(--gold-soft); }
.an-out.gold .v { color:#A9772A; }

/* FI tracker journey */
.an-fi-rail { position:relative; height:10px; border-radius:999px; background:var(--line); overflow:hidden; margin:18px 0 8px; }
.an-fi-rail i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#2E8B57,#D4A95D); }
.an-fi-mile { display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:var(--ink-400); }

/* goal cards */
.an-goals { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.an-goal { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:18px; }
.an-goal .g-head { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.an-goal .g-ic { width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.an-goal .g-name { font-size:14px; font-weight:800; color:var(--ink-900); }
.an-goal .g-sub { font-size:11.5px; font-weight:600; color:var(--ink-400); }
.an-goal .g-amt { display:flex; align-items:baseline; gap:6px; margin-bottom:9px; }
.an-goal .g-amt b { font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--ink-900); }
.an-goal .g-amt span { font-size:12px; font-weight:600; color:var(--ink-400); }
.an-goal .g-foot { display:flex; align-items:center; justify-content:space-between; margin-top:11px; font-size:11.5px; font-weight:700; }

/* responsive */
@media (max-width:1280px){
  .an-exec { grid-template-columns:repeat(3,1fr); }
  .an-lab { grid-template-columns:1fr; }
  .an-lab-controls { border-right:0; border-bottom:1px solid var(--line); }
  .an-goals { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .an-exec { grid-template-columns:1fr 1fr; }
  .an-lab-outs { grid-template-columns:1fr 1fr; }
  .an-goals { grid-template-columns:1fr; }
}

/* ================================================================
   INVESTMENTS — Portfolio Command Center (additive, reuses an-/st-)
   ================================================================ */
.inv-tabbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap; }
.inv-tabs { display:flex; gap:24px; }
.inv-tab { padding:0 2px 13px; font-size:14px; font-weight:600; color:var(--ink-500);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.inv-tab:hover { color:var(--ink-700); }
.inv-tab.active { color:var(--green-600); border-bottom-color:var(--green-600); }
.inv-tabctrls { display:flex; align-items:center; gap:10px; padding-bottom:9px; flex-wrap:wrap; }

/* account / holding rows */
.inv-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.inv-row:last-child { border-bottom:0; }
.inv-badge { width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:800; letter-spacing:-.02em; }
.inv-row-main { flex:1; min-width:0; }
.inv-row-name { font-size:13.5px; font-weight:700; color:var(--ink-900); }
.inv-row-sub { font-size:11.5px; font-weight:600; color:var(--ink-400); margin-top:1px; }
.inv-acctbar { height:5px; border-radius:999px; background:var(--mint-100); overflow:hidden; margin-top:7px; }
.inv-acctbar i { display:block; height:100%; border-radius:999px; }
.inv-row-val { text-align:right; white-space:nowrap; }
.inv-row-val .v { font-size:13.5px; font-weight:800; color:var(--ink-900); }
.inv-row-val .p { font-size:11.5px; font-weight:700; color:var(--ink-400); margin-top:1px; }

/* sector exposure bars */
.inv-sector { display:flex; align-items:center; gap:12px; padding:6.5px 0; }
.inv-sector .nm { font-size:12.5px; font-weight:600; color:var(--ink-700); width:135px; flex:0 0 135px; }
.inv-sector .tk { flex:1; height:7px; border-radius:999px; background:var(--mint-100); overflow:hidden; }
.inv-sector .tk i { display:block; height:100%; border-radius:999px; background:var(--green-500); }
.inv-sector .pc { font-size:12px; font-weight:800; color:var(--ink-700); width:42px; text-align:right; flex:0 0 42px; }

/* small dual stat cards (cash flow & dividends) */
.inv-duo { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.inv-mini { border:1px solid var(--line); border-radius:var(--r-ctrl); padding:15px 16px; background:var(--mint-50); }
.inv-mini .k { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--ink-500); }
.inv-mini .v { font-family:var(--font-serif); font-size:24px; font-weight:700; color:var(--ink-900); margin-top:8px; line-height:1; }
.inv-mini .c { display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--green-600); margin-top:7px; }

/* footer feature band */
.inv-foot { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding:24px 30px; }
.inv-foot-item { display:flex; align-items:flex-start; gap:13px; }
.inv-foot-ic { width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; color:var(--gold); border:1.5px solid rgba(212,169,93,.45); }
.inv-foot-t { font-size:13.5px; font-weight:800; color:#FBFAF6; }
.inv-foot-s { font-size:12px; font-weight:600; color:rgba(234,240,234,.65); margin-top:3px; line-height:1.45; }

@media (max-width:1180px){ .inv-foot { grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .inv-foot { grid-template-columns:1fr; } .inv-duo { grid-template-columns:1fr; } }

@keyframes cm-spin { to { transform:rotate(360deg); } }

/* ================================================================
   BUDGET & PLANNER
   ================================================================ */
.bp-kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.bp-kpi.cm-card { padding:14px 15px 13px; display:flex; flex-direction:column; justify-content:flex-start; }
.bp-kpi-l { font-size:11.5px; font-weight:700; color:var(--ink-500); margin-bottom:5px; }
.bp-kpi-v { font-family:var(--font-serif); font-size:23px; font-weight:700; color:var(--ink-900); line-height:1; margin-bottom:6px; }
.bp-coach { border:1px solid; border-radius:11px; padding:11px 13px; }
.bp-coach-h { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; margin-bottom:4px; }
.bp-coach-t { font-size:12px; line-height:1.45; color:var(--ink-600); font-weight:500; }
.bp-fcbox { flex:1; background:var(--mint-50); border:1px solid var(--line); border-radius:11px; padding:11px 12px; }
.bp-bottom { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bp-action:hover { background:var(--mint-50); }
.bp-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.bp-cal-dow { text-align:center; font-size:10px; font-weight:800; color:var(--ink-400); padding-bottom:4px; }
.bp-cal-cell { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--ink-700); border-radius:8px; }
.bp-cal-cell.today { background:var(--green-600); color:#fff; font-weight:800; }
.bp-cal-cell.bill { background:var(--mint-50); color:var(--ink-900); font-weight:700; }
.bp-cal-dot { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:4px;
  border-radius:50%; background:var(--gold); }
.bp-cal-cell.today .bp-cal-dot { background:#fff; }
@media (max-width:1180px){ .bp-kpis { grid-template-columns:repeat(3,1fr); } .bp-bottom { grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .bp-kpis { grid-template-columns:1fr 1fr; } .bp-bottom { grid-template-columns:1fr; } }

/* ================================================================
   FAMILY ACTIVITY
   ================================================================ */
.cm-actfilter { display:flex; gap:6px; flex-wrap:wrap; }
.cm-actfilter-btn { font-size:12.5px; font-weight:700; color:var(--ink-500); background:var(--mint-50);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer; transition:.12s; }
.cm-actfilter-btn:hover { color:var(--ink-700); }
.cm-actfilter-btn.on { background:var(--green-600); border-color:var(--green-600); color:#fff; }
.cm-actday { font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-400); margin:4px 0 8px; }
.cm-actrow { display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); }
.cm-actrow:last-child { border-bottom:none; }
.cm-actrow-av { width:38px; height:38px; flex:0 0 38px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.cm-actrow-ic { width:30px; height:30px; flex:0 0 30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; }
.cm-actrow-body { flex:1; min-width:0; }
.cm-actrow-line { font-size:13.5px; color:var(--ink-700); line-height:1.4; }
.cm-actrow-line b { color:var(--ink-900); font-weight:700; }
.cm-actrow-detail { font-size:12.5px; color:var(--ink-500); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-actrow-time { font-size:12px; color:var(--ink-400); white-space:nowrap; flex:0 0 auto; }
@media (max-width:600px){ .cm-actrow-ic { display:none; } }

/* ================================================================
   PREMIUM UPLIFT — shared additions (2026 design pass)
   Semantic accent cards, empty states, tasteful motion. Additive only.
   ================================================================ */

/* Contextual accent cards — pale tint + matching hairline border. */
.cm-card-success { background:linear-gradient(135deg,#F0FBF6 0%,#E4F7F0 100%); border-color:#9FE0C4; }
.cm-card-insight { background:linear-gradient(135deg,#FBF7EE 0%,#F4EEDF 100%); border-color:var(--gold-soft); }
.cm-card-alert   { background:linear-gradient(135deg,#FEF4F1 0%,#FBE9E6 100%); border-color:#EEB6AB; }

/* Empty-state pattern — muted icon + serif headline + guiding CTA. */
.cm-empty-state { display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:44px 28px; color:var(--ink-500); }
.cm-empty-state .es-ic { width:56px; height:56px; border-radius:16px; display:flex;
  align-items:center; justify-content:center; color:var(--green-600);
  background:linear-gradient(135deg, rgba(46,139,87,.12), rgba(46,139,87,.05));
  box-shadow:var(--shadow-sm); }
.cm-empty-state h3 { font-family:var(--font-serif); font-size:18px; font-weight:600;
  color:var(--ink-900); margin:4px 0 0; }
.cm-empty-state p { font-size:13.5px; line-height:1.5; max-width:340px; margin:0; }
.cm-empty-state .cm-btn { margin-top:6px; }

/* Opt-in entrance animation for above-the-fold groups. */
@keyframes cmFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.cm-animate-in { animation: cmFadeUp .45s cubic-bezier(.4,0,.2,1) both; }
.cm-animate-in[style*="--i"] { animation-delay: calc(var(--i) * 60ms); }

/* Respect users who prefer reduced motion — disable transforms/animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .cm-card-hover:hover, a > .cm-card:hover, .cm-card.is-clickable:hover { transform:none; }
}