/* ==========================================================================
   ClearMint Essentials — app-wide dc design refresh (2026)
   Override layer that extends the dc prototype language (see *.dc.html) to
   every app page by restyling the SHARED classes: cards/panels, KPI tiles,
   buttons, tabs, tables, pills, inputs, modals, month nav, sidebar + topbar.

   - Loaded from app.html AFTER dashboard-refresh.css.
   - Every rule is scoped under `.app` (the React app shell root) because
     .btn / .tabs / .field also exist on marketing + login pages, which must
     stay untouched. `.app` is only ever rendered by js/app.jsx.
   - Dark-sidebar mode (body content goes --ink-900 via the
     `.app:has(.side:not(.side-light))` rules in lite.css) is preserved:
     those rules have higher specificity than anything here, and cards stay
     white in both themes, exactly like before.

   dc language tokens:
     card #fff · border #e3eae4 · radius 14px (16px large panels, 18px modal)
     hover #f0f5f1 / #f0faf4 · row divider #f3f7f4 · thead #fbfcfa
     microcaps 10.5px 700 .06–.08em #94a3b8 uppercase
     primary gradient 135deg #3da77c→#2a8862, pill radius, weight 700
     secondary button: white, border #cdd8cf, hover border #8ad6a8 bg #f0faf4
     focus ring: border #2a8862 + 0 0 0 3px rgba(61,167,124,.18)
   ========================================================================== */

/* ---------------------------------------------------------------- shell */
/* Light theme surfaces move from blue-gray (#eef1f4) to dc paper (#fafbf9).
   Dark-sidebar mode keeps its own higher-specificity backgrounds. */
.app .main.theme-alt .topbar,
.app .main.theme-alt .content{background:#fafbf9}

/* Crowded topbar states (Review badge + Undo + Spanish labels) overflowed
   horizontally at any width — let it wrap like the dc prototype headers do. */
.app .topbar{padding:13px 26px;flex-wrap:wrap;row-gap:8px}
.app .topbar h1{font-size:24px;letter-spacing:-.01em}

/* ------------------------------------------------------------- sidebar */
/* Light (default) sidebar = the prototypes' white sidebar. */
.app .side.side-light{background:#fff;border-right:1px solid #e3eae4;color:#475569}
.app .side.side-light nav .nav-group{color:#94a3b8;letter-spacing:.09em}
.app .side.side-light nav button{color:#475569;font-weight:500}
.app .side.side-light nav button:hover{background:#f0f5f1;color:#0f1f2e}
.app .side.side-light .brand .tag{background:#d9f2e2;color:#2a8862}
/* Active item: green gradient pill (both themes). */
.app .side nav button{border-radius:10px;padding:9px 11px;font-size:13.8px;gap:10px}
.app .side nav button.on,
.app .side.side-light nav button.on{
  background:linear-gradient(135deg,#3da77c,#2a8862);
  color:#fff;font-weight:600;
  box-shadow:0 6px 14px -8px rgba(42,136,98,.6);
}
/* Dark sidebar: deep-emerald dc tone instead of blue ink. */
.app .side:not(.side-light){background:linear-gradient(180deg,#0d2a1f,#103125)}
.app .side:not(.side-light) nav button:hover{background:rgba(255,255,255,.07)}
.app .side:not(.side-light) .who{border-top-color:rgba(255,255,255,.12)}

/* ------------------------------------------------------------- buttons */
.app .btn{
  border-color:#cdd8cf;border-radius:8px;
  font-size:13px;font-weight:600;padding:8px 14px;color:#1a2c3d;
}
.app .btn:hover{border-color:#8ad6a8;background:#f0faf4}
.app .btn.sm{padding:6px 11px;font-size:12.5px}
.app .btn.primary{
  background:linear-gradient(135deg,#3da77c,#2a8862);
  border-color:transparent;color:#fff;font-weight:700;border-radius:999px;
  box-shadow:0 6px 14px -8px rgba(42,136,98,.7);
}
.app .btn.primary:hover{
  background:linear-gradient(135deg,#37996f,#257956);
  border-color:transparent;
}
.app .btn.ghost{border-color:transparent;background:transparent}
.app .btn.ghost:hover{background:#f0f5f1}
.app .btn.danger{border-color:#f0d4d4}
.app .btn.danger:hover{background:#fdf3f3;border-color:var(--bad)}
.app .iconbtn{border-radius:8px}
.app .iconbtn:hover{background:#f0f5f1;color:#0f1f2e}

/* ------------------------------------------------------- cards / panels */
.app .panel{border-radius:16px;border-color:#e3eae4;box-shadow:none}
.app .panel .head{border-bottom-color:#eef3ef;padding:14px 18px}
.app .panel .head h3{font-size:15px;font-weight:700;color:#0f1f2e}
.app .card{border-radius:14px;border-color:#e3eae4}
.app .plan-card{border-radius:14px}

/* KPI tiles — dc card language on every page (dashboard already had it). */
.app .kpi{
  border-radius:14px;border-color:#e3eae4;padding:16px 18px;box-shadow:none;
  transition:box-shadow .18s ease,border-color .18s ease;
}
.app .kpi::before{display:none}
.app .kpi:hover{box-shadow:0 12px 26px -18px rgba(15,31,46,.22);transform:none;border-color:#e3eae4}
.app .kpi .lbl{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--ink-500)}
.app .kpi .val{font-size:22px;margin-top:8px}
.app .kpi .sub{font-size:11.5px;margin-top:6px}
.app .kpi.accent{
  background:linear-gradient(150deg,#3da77c,#2a8862);
  border-color:transparent;
  box-shadow:0 12px 26px -16px rgba(42,136,98,.7);
}
.app .kpi.accent:hover{box-shadow:0 14px 30px -16px rgba(42,136,98,.75);border-color:transparent}
.app .kpi.accent .lbl{color:#d9f2e2}
.app .kpi.accent .val{color:#fff}
.app .kpi.accent .sub{color:#b6e6c8}

/* ---------------------------------------------------------------- tabs */
/* Segmented .tabs → dc filter chips (white pills, active solid emerald). */
.app .tabs{background:transparent;padding:0;gap:6px;border-radius:0}
.app .tabs .tab{
  border:1px solid #cdd8cf;background:#fff;border-radius:999px;
  padding:6px 13px;font-size:12.5px;font-weight:600;color:#475569;
  transition:background .14s,color .14s,border-color .14s;
}
.app .tabs .tab:hover{color:#0f1f2e;border-color:#8ad6a8;background:#f0faf4}
.app .tabs .tab.on{background:#2a8862;border-color:#2a8862;color:#fff;font-weight:700;box-shadow:none}

/* Big view tabs (.subtabs-glass / .gtab) → dc underline nav tabs. */
.app .subtabs-glass{
  background:transparent;border:0;border-bottom:1px solid #e3eae4;
  border-radius:0;box-shadow:none;padding:0;gap:4px;
}
.app .gtab{
  flex:0 1 auto;border:0;border-bottom:2px solid transparent;border-radius:0;
  background:transparent;padding:9px 13px 10px;margin-bottom:-1px;
  font-size:13px;font-weight:600;color:#64748b;box-shadow:none;
}
.app .gtab:hover{color:#0f1f2e;background:transparent}
.app .gtab.on{
  color:#206a4d;background:transparent;border-color:transparent;
  border-bottom:2px solid #2a8862;box-shadow:none;font-weight:700;
}
.app .gtab-sep{margin:8px 8px;background:#e3eae4}
.app .gtab-reports{color:var(--mint-700);font-weight:700}
.app .gtab-reports:hover{background:transparent;color:var(--mint-800)}
.app .gtab-reports.on{background:transparent;border-bottom:2px solid #2a8862;color:#206a4d;box-shadow:none}
@media(max-width:900px){.app .gtab{padding:8px 10px 9px;font-size:12.5px}}

/* Secondary pill tab group (.bigtabs) → same chip language. */
.app .bigtabs{background:transparent;border:0;border-radius:0;padding:0;gap:6px}
.app .bigtab{
  border:1px solid #cdd8cf;background:#fff;border-radius:999px;
  padding:7px 15px;font-size:13px;font-weight:600;color:#475569;
}
.app .bigtab:hover{color:#0f1f2e;border-color:#8ad6a8;background:#f0faf4}
.app .bigtab.on{background:#2a8862;border-color:#2a8862;color:#fff;box-shadow:none}

/* --------------------------------------------------------------- tables */
.app .sheet-wrap{border-radius:16px;border-color:#e3eae4;box-shadow:none}
.app table.sheet thead th{
  background:#fbfcfa;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#94a3b8;border-bottom:1px solid #eef3ef;
}
.app table.sheet thead th:hover{color:#475569}
.app table.sheet tbody td{border-bottom-color:#f3f7f4}
/* dc tables have no zebra striping — white rows + soft dividers. Functional
   selection / drag highlights are excluded so they keep their mint states. */
.app table.sheet tbody tr:nth-child(even):not(.selected):not(.row-sel):not(.drag-over){background:transparent}
.app table.sheet tbody tr:hover:not(.selected):not(.row-sel):not(.drag-over),
.app table.sheet tbody tr:nth-child(even):hover:not(.selected):not(.row-sel):not(.drag-over){background:#f6faf7}

/* --------------------------------------------------------------- pills */
.app .pill{padding:3px 10px;font-size:11.5px;font-weight:700;line-height:1.5}
.app .pill.paid,.app .pill.income{background:#ecf5ee;color:#2a8862}
.app .pill.unpaid{background:#fdf6ec;color:#b9863b}

/* --------------------------------------------------------------- inputs */
.app .field label{font-size:12.5px;color:#475569}
.app .field input,.app .field select,.app .field textarea{
  border-color:#cdd8cf;border-radius:8px;font-size:14px;padding:10px 12px;
}
.app .field input:focus,.app .field select:focus,.app .field textarea:focus{
  border-color:#2a8862;box-shadow:0 0 0 3px rgba(61,167,124,.18);
}
.app .toolbar select,.app .toolbar .fbtn{
  border-color:#cdd8cf;border-radius:8px;font-size:12.5px;font-weight:600;color:#0f1f2e;
}
.app .toolbar .search input{
  border-color:#e3eae4;border-radius:10px;background:#fafbf9;font-size:13px;
}
.app .toolbar .search input:focus{
  outline:none;border-color:#2a8862;box-shadow:0 0 0 3px rgba(61,167,124,.18);background:#fff;
}

/* ------------------------------------------------------------ month nav */
.app .monthnav .mn-center{border-radius:999px;border-color:#e3eae4;box-shadow:none;padding:5px 8px}
.app .monthnav .mn-arrow{background:transparent;border-radius:999px;color:#475569}
.app .monthnav .mn-arrow:hover{background:#f0f5f1;color:#0f1f2e}
.app .monthnav .mn-label{font-size:13.5px}

/* --------------------------------------------------------------- modals */
.app .modal{border-radius:18px}
.app .modal .mhead{border-bottom-color:#eef3ef;padding:16px 22px}
.app .modal .mhead h3{
  font-family:var(--font-display);font-optical-sizing:auto;
  font-size:20px;font-weight:600;letter-spacing:-.01em;
}
.app .modal .mfoot{border-top-color:#eef3ef}
.app .modal-bg{background:rgba(15,31,46,.45)}

/* Subscriptions split "Add" button → dc gradient pill. Also fixes a
   pre-existing lite.css collision: the generic `.main{flex-direction:column}`
   layout rule (line ~281) matches this button's class and stacked its icon
   above the label. */
.app .subx-add{border-radius:999px;box-shadow:0 6px 14px -8px rgba(42,136,98,.7)}
.app .subx-add .main{
  display:inline-flex;flex-direction:row;
  background:linear-gradient(135deg,#3da77c,#2a8862);
}
.app .subx-add .main:hover{background:linear-gradient(135deg,#37996f,#257956)}
.app .subx-add .caret{background:#257956}
.app .subx-kpi{border-radius:14px;border-color:#e3eae4;box-shadow:none}
.app .subx-kpi .lbl{color:#94a3b8;letter-spacing:.07em}
.app .subx-card{border-radius:16px;border-color:#e3eae4;box-shadow:none}
.app .subx-search{border-color:#cdd8cf;border-radius:8px}
/* Grid items default to min-width:auto — the wide subscriptions table blew the
   page out horizontally under 1150px (single-column layout used `1fr`). */
.app .subx-grid > *{min-width:0}
@media(max-width:1150px){.app .subx-grid{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------ misc bits */
.app .drop{border-radius:14px;border-color:#cdd8cf}
.app .toast{border-radius:10px}
.app .empty{color:#64748b}
.app .recon-intro{border-radius:12px;border-color:#e3eae4}
.app .strat{border-radius:12px}
.app .strat:hover{background:#f0f5f1}
.app .catrow .track{height:6px;background:#eef3ef}
.app .dl-toolbar{border-radius:12px;border-color:#e3eae4}
/* Safety net: an empty layout grid must never occupy space (its 18px bottom
   margin showed up as a phantom gap between dashboard rows when duplicate
   grids existed — see convertContainer() in js/dashboard-layout.js). */
.app [data-dl-grid]:empty{display:none;margin:0}

/* Reusable microcap section label (dashboard uses .dash-section-label). */
.app .app-microcap{
  margin:0 0 12px;font-family:var(--font);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#94a3b8;
}

/* Insights row shared by Earnings / Spending (dc prototypes' bottom card grids). */
.app .insights-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;align-items:stretch;margin-top:18px;
}
.app .insights-grid .panel{min-width:0}

/* Account / credit-card tiles (dc Bank Accounts + Credit Cards prototypes). */
.app .acct-tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:16px;margin-bottom:18px;
}
.app .acct-tile{
  display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid #e3eae4;border-radius:18px;overflow:hidden;
  transition:box-shadow .18s ease,transform .18s ease;
}
.app .acct-tile:hover{box-shadow:0 18px 36px -22px rgba(15,31,46,.28);transform:translateY(-2px)}
.app .acct-tile .at-bar{height:4px;flex:0 0 auto}
.app .acct-tile .at-body{padding:14px 16px 13px;display:flex;flex-direction:column;gap:11px;flex:1}
.app .acct-tile .at-head{display:flex;align-items:center;gap:10px;min-width:0}
.app .acct-tile .at-title{flex:1;min-width:0}
.app .acct-tile .at-title .nm{
  display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:#0f1f2e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.app .acct-tile .at-title .ln{font-size:11px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .acct-tile .at-chip{
  font-size:9px;font-weight:800;letter-spacing:.04em;color:#206a4d;background:#d9f2e2;
  border-radius:999px;padding:2px 7px;text-transform:uppercase;flex:0 0 auto;
}
.app .acct-tile .at-mid{display:flex;align-items:center;gap:14px;min-width:0}
.app .acct-tile .at-ring{width:64px;height:64px;flex:0 0 auto}
.app .acct-tile .at-ring .fig{font-family:var(--mono);font-size:9px;font-weight:600;fill:#0f1f2e}
.app .acct-tile .at-bal .v{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:600;color:#0f1f2e;line-height:1.1;
}
.app .acct-tile .at-bal .s{font-size:11px;color:#64748b;font-weight:600;margin-top:2px}
.app .acct-tile .at-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;font-size:11.5px;color:#64748b;
}
.app .acct-tile .at-meta strong{color:#0f1f2e;font-family:var(--mono);font-weight:600}
.app .acct-tile .at-foot{
  display:flex;align-items:center;gap:8px;margin-top:auto;
  border-top:1px solid #eef3ef;padding-top:10px;flex-wrap:wrap;
}
.app .acct-tile .at-actions{display:flex;gap:6px;flex-wrap:wrap}
.app .acct-tile .at-actions .btn{flex:1 1 auto;justify-content:center}

/* Settings — exact-markup transplant of "Settings.dc.html" (static dc styles live
   inline in the JSX; the dc style-hover states live here as .setx-* helpers). */
.app .setx-rail-btn:hover{background:#f0f5f1 !important}
.app .setx-btn:hover:not(:disabled){border-color:#8ad6a8 !important;background:#f0faf4 !important}
.app .setx-choice:hover{border-color:#8ad6a8}
.app .setx-prim:hover{filter:brightness(1.06)}
.app .setx-link:hover{color:#206a4d !important}
.app .setx-rulerow:hover{background:#fbfcfa}
@media(max-width:900px){
  .app .setx-layout{flex-direction:column}
  .app .setx-rail{position:static !important;width:100% !important;flex-direction:row !important;flex-wrap:wrap;border-radius:999px !important}
  .app .setx-rail-btn{width:auto !important;border-radius:999px !important}
}

/* Standalone utilization ring (Analytics credit panel — same look as tile rings). */
.app .util-ring{width:72px;height:72px;flex:0 0 auto}
.app .util-ring .fig{font-family:var(--mono);font-size:9px;font-weight:600;fill:#0f1f2e}

/* dc Net Worth headline card — deep emerald, distinct from the mint accent KPIs. */
.app .kpi.accent[data-dl-widget="nw-net"]{
  background:linear-gradient(135deg,#103125,#1c4a37);
  box-shadow:0 12px 26px -16px rgba(16,49,37,.75);
}

/* Bulk-selection bar → dc dark emerald action bar (Sheet's .bulk-actions). */
.app .sheet-toolbar .bulk-actions{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#103125;border-radius:12px;padding:7px 12px;color:#fff;
}
.app .sheet-toolbar .bulk-actions .bulk-count{font-size:12.5px;font-weight:700;color:#fff;margin-right:2px}
.app .sheet-toolbar .bulk-actions .btn{
  background:rgba(255,255,255,.12);border-color:transparent;color:#fff;
  border-radius:999px;font-size:12px;font-weight:600;padding:5px 13px;
}
.app .sheet-toolbar .bulk-actions .btn:hover{background:rgba(255,255,255,.2);border-color:transparent}
.app .sheet-toolbar .bulk-actions .btn.danger{color:#ffb9a3}
.app .sheet-toolbar .bulk-actions .btn.primary{background:linear-gradient(135deg,#3da77c,#2a8862);box-shadow:none}
.app .sheet-toolbar .bulk-actions .kpi-sel{
  background:rgba(255,255,255,.12);border:0;border-radius:999px;color:#fff;
  font-size:12px;font-weight:600;padding:5px 10px;
}

/* Analytics — bundle "6-MO …" stat strip under the income-vs-spending chart */
.app .ana-6mo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.app .ana-6mo{display:flex;flex-direction:column;gap:3px}
.app .ana-6mo .k{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-400)}
.app .ana-6mo .v{font-family:var(--mono);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-900)}
.app .ana-6mo .v.pos{color:var(--mint-600)}
.app .ana-6mo .v.neg{color:var(--bad)}
/* Analytics exact-markup — the bundle draws income bars mint and spending bars gold */
.app [data-dl-page="analytics"] .bc-bar.inc{background:#2a8862}
.app [data-dl-page="analytics"] .bc-bar.exp{background:#D4A95D}

/* Analytics dc parity — filters row */
.app .ana-filters{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #e3eae4;border-radius:16px;padding:14px 18px;margin-bottom:18px}
.app .ana-filters .filter-field{min-width:120px}
.app .ana-filters select{font-family:var(--font);font-size:12.5px;font-weight:600;color:#0f1f2e;background:#fff;border:1px solid #cdd8cf;border-radius:8px;padding:7px 10px;cursor:pointer;max-width:210px}
.app .ana-filters select:hover{border-color:#8ad6a8}
.app .ana-filters-note{margin-left:auto;font-size:12px;padding-bottom:8px}

/* Analytics dc parity — Cash flow & forecast: stat rail + balance runway strip */
.app .ana-fcst-seg{display:inline-flex;gap:8px}
.app .ana-fcst-seg button{font-family:var(--font);font-size:12px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid #cdd8cf;background:#fff;color:#475569;cursor:pointer}
.app .ana-fcst-seg button:hover{border-color:#8ad6a8;background:#f0faf4}
.app .ana-fcst-seg button.on{color:#fff;background:linear-gradient(135deg,#3da77c,#2a8862);border-color:transparent;box-shadow:0 5px 12px -7px rgba(42,136,98,.7)}
.app .ana-fcst-grid{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:22px;align-items:stretch}
@media(max-width:760px){.app .ana-fcst-grid{grid-template-columns:1fr}}
.app .ana-fcst-rail{display:flex;flex-direction:column;border-right:1px solid #eef3ef;padding-right:22px}
@media(max-width:760px){.app .ana-fcst-rail{border-right:0;padding-right:0}}
.app .ana-fcst-k{font-size:11px;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase}
.app .ana-fcst-big{font-family:var(--mono);font-size:26px;font-weight:600;color:#0f1f2e;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.app .ana-fcst-delta{font-size:11.5px;font-weight:600;color:#206a4d}
.app .ana-fcst-delta.warn{color:#b9863b}
.app .ana-fcst-rows{display:flex;flex-direction:column;margin-top:12px}
.app .ana-fcst-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid #f3f7f4}
.app .ana-fcst-row .k{font-size:11.5px;font-weight:600;color:#64748b}
.app .ana-fcst-row .v{font-family:var(--mono);font-size:12px;font-weight:600;color:#0f1f2e;font-variant-numeric:tabular-nums}
.app .ana-fcst-row .v.pos{color:#2a8862}
.app .ana-fcst-row .v.warn{color:#b9863b}
.app .ana-runway{display:flex;flex-direction:column;gap:10px;min-width:0;justify-content:flex-end;overflow-x:auto}
.app .ana-run-bars{display:flex;align-items:flex-end;gap:9px;min-width:460px}
.app .ana-run-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.app .ana-run-val{font-family:var(--mono);font-size:10px;font-weight:600;color:#0f1f2e;visibility:hidden;white-space:nowrap}
.app .ana-run-col.today .ana-run-val,.app .ana-run-col.proj .ana-run-val{visibility:visible}
.app .ana-run-col.proj .ana-run-val{color:#8a6a2f}
.app .ana-run-track{width:100%;max-width:42px;height:132px;display:flex;align-items:flex-end;border-radius:7px;background:#f4f7f4}
.app .ana-run-col.proj .ana-run-track{background:#faf5ea}
.app .ana-run-fill{width:100%;border-radius:7px;background:linear-gradient(180deg,#3da77c,#2a8862);opacity:.55}
.app .ana-run-col.today .ana-run-fill{opacity:1}
.app .ana-run-col.proj .ana-run-fill{opacity:1;background:repeating-linear-gradient(135deg,#e3c383 0 5px,#f0dcb2 5px 10px)}
.app .ana-run-mo{font-size:10.5px;color:#94a3b8;white-space:nowrap}
.app .ana-run-col.today .ana-run-mo{font-weight:700;color:#0f1f2e}
.app .ana-run-col.proj .ana-run-mo{color:#8a6a2f}
.app .ana-run-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:#64748b}
.app .ana-run-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* Analytics dc parity — Budget analysis notes + stat grid */
.app .ana-budget-sec{margin-top:0}
.app .ana-note{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:12.5px;color:#475569}
.app .ana-note.warn{background:#fdf6ec}
.app .ana-note.good{background:#ecf5ee}
.app .ana-note .ico{width:28px;height:28px;border-radius:9px;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.app .ana-note.warn .ico{color:#b9863b}
.app .ana-note.good .ico{color:#2a8862}
.app .ana-note strong{color:#0f1f2e}
.app .ana-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;border-top:1px solid #eef3ef;padding-top:12px;margin-top:12px}
.app .ana-stat-grid .k{font-size:11px;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase}
.app .ana-stat-grid .v{font-size:13px;font-weight:600;color:#0f1f2e;margin-top:3px}
.app .ana-stat-grid .v.fig{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums}
.app .ana-stat-grid .v.pos{color:#2a8862}
.app .ana-stat-grid .v.warn{color:#b45f2c}

/* Analytics dc parity — Savings goals */
.app .ana-goal{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.app .ana-goal .top{display:flex;align-items:baseline;gap:8px}
.app .ana-goal .nm{font-size:13px;font-weight:600;color:#0f1f2e}
.app .ana-goal .amt{margin-left:auto;font-size:12px;color:#64748b;font-variant-numeric:tabular-nums}
.app .ana-goal .track{height:8px;border-radius:999px;background:#eef3ef;overflow:hidden}
.app .ana-goal .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#3da77c,#5fc59a)}
.app .ana-goal .sub{font-size:11.5px;color:#94a3b8}

/* Analytics dc parity — Subscriptions section */
.app .ana-sub-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.app .ana-sub-tile{background:#f6f8f5;border-radius:12px;padding:14px 16px}
.app .ana-sub-tile .k{font-size:11px;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase}
.app .ana-sub-tile .v{font-family:var(--mono);font-size:19px;font-weight:600;color:#0f1f2e;margin-top:5px;font-variant-numeric:tabular-nums}
.app .ana-sub-tile .v.txt{font-family:var(--font);font-size:15px;margin-top:7px}
.app .ana-sub-tile .v.warn{color:#8a6a2f}
.app .ana-sub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.app .ana-sub-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f3f7f4}
.app .ana-sub-row:last-child{border-bottom:0}
.app .ana-sub-date{display:flex;flex-direction:column;align-items:center;width:36px;border:1px solid #e3eae4;border-radius:9px;overflow:hidden;flex:0 0 auto}
.app .ana-sub-date .mo{font-size:9px;font-weight:700;background:#f6f8f5;color:#64748b;width:100%;text-align:center;padding:2px 0;text-transform:uppercase}
.app .ana-sub-date .dy{font-size:14px;font-weight:700;color:#0f1f2e;padding:2px 0}
.app .ana-sub-row .nm{font-size:13px;font-weight:600;color:#0f1f2e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .ana-sub-row .sub{font-size:11.5px;color:#94a3b8}
.app .ana-sub-row .amt{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:600;color:#1a2c3d;font-variant-numeric:tabular-nums}
.app .ana-sub-unused{border:1.5px dashed #cdd8cf;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;align-self:stretch}
.app .ana-sub-unused .hd{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#0f1f2e}
.app .ana-sub-unused .ico{width:30px;height:30px;border-radius:10px;background:#f1ede2;color:#8a6a2f;display:inline-flex;align-items:center;justify-content:center}
.app .ana-sub-unused p{margin:0;font-size:12.5px;color:#64748b;line-height:1.55}

/* Analytics dc parity — Insights cards */
.app .ana-ai-pill{font-size:10px;font-weight:700;letter-spacing:.06em;color:#8a6a2f;background:#f1ede2;border-radius:999px;padding:3px 8px}
.app .ana-insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.app .ana-insight{background:#fff;border:1px solid #e3eae4;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .18s ease}
.app .ana-insight:hover{box-shadow:0 12px 26px -18px rgba(15,31,46,.22)}
.app .ana-insight .ico{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.app .ana-insight .ico.good{background:#ecf5ee;color:#2a8862}
.app .ana-insight .ico.warn{background:#fdf6ec;color:#b9863b}
.app .ana-insight .ico.info{background:#eef4fb;color:#4a7fb5}
.app .ana-insight .ico.gold{background:#f1ede2;color:#8a6a2f}
.app .ana-insight .tt{font-size:13.5px;font-weight:700;color:#0f1f2e}
.app .ana-insight .bd{font-size:12.5px;color:#64748b;line-height:1.5}

/* Analytics dc parity — empty state ("Your analytics will appear here") */
.app .ana-empty{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 32px;min-height:60vh}
.app .ana-empty-inner{max-width:560px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.app .ana-empty-ico{width:88px;height:88px;border-radius:24px;background:#ecf5ee;color:#2a8862;display:inline-flex;align-items:center;justify-content:center}
.app .ana-empty-inner h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:30px;letter-spacing:-.01em;color:#0f1f2e}
.app .ana-empty-inner p{margin:0;font-size:14.5px;color:#64748b;line-height:1.6}
.app .ana-empty-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ==========================================================================
   Household dc parity ("Household.dc.html") — exact-markup transplant: every
   static style is inline in js/app.jsx; only the dc style-hover / style-focus /
   disabled states and small-screen grid fallbacks live here (.hhx-* helpers).
   ========================================================================== */
.app .hhx-ghost:hover:not(:disabled){border-color:#8ad6a8 !important;background:#f0faf4 !important}
.app .hhx-del:hover:not(:disabled){background:#fbf1f0 !important;border-color:#d9a29d !important}
.app .hhx-avadd:hover{background:#f0faf4 !important}
.app .hhx-link:hover{color:#206a4d !important;text-decoration:underline}
.app .hhx-input:focus{border-color:#2a8862 !important;box-shadow:0 0 0 3px rgba(61,167,124,.18) !important;outline:none;background:#fff !important}
.app .hhx-input:disabled{color:#94a3b8 !important;cursor:not-allowed !important}
.app .hhx-scope:hover,.app .hhx-select:hover:not(:disabled){border-color:#8ad6a8 !important}
.app .hhx-select:disabled{color:#94a3b8 !important;background:#fafbf9 !important;cursor:not-allowed !important}
.app .hhx-view{transition:border-color .15s ease,box-shadow .15s ease}
.app .btn.danger-o{color:#b3372f;border-color:#e8cfcd}
.app .btn.danger-o:hover:not(:disabled){background:#fbf1f0;border-color:#d9a29d}
@media(max-width:900px){.app .hhx-invgrid,.app .hhx-actgrid{grid-template-columns:1fr !important}}
@media(max-width:640px){.app .hhx-orow{grid-template-columns:1fr auto !important;grid-auto-flow:row}}

/* ==========================================================================
   Transactions dc parity ("ClearMint Transactions.html")
   ========================================================================== */

/* hero empty state — "Your financial ledger starts here" */
.app .tx-empty-hero{display:flex;align-items:center;justify-content:center;padding:56px 32px;min-height:52vh}
.app .tx-empty-hero-inner{max-width:560px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.app .tx-empty-hero-ico{width:76px;height:76px;border-radius:22px;background:#ecf5ee;color:#2a8862;display:inline-flex;align-items:center;justify-content:center}
.app .tx-empty-hero h1{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:30px;letter-spacing:-.01em;color:#0f1f2e}
.app .tx-empty-hero p{margin:0;font-size:14.5px;color:#64748b;line-height:1.6}
.app .tx-empty-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* view-tab count badges */
.app .gtab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;margin-left:7px;padding:0 6px;border-radius:999px;background:#eef3ef;color:#64748b;font-size:10.5px;font-weight:700;font-family:'JetBrains Mono',ui-monospace,monospace;line-height:1}
.app .gtab-count.on{background:#d9f2e2;color:#206a4d}

/* date controls — own row above the summary cards */
.app .tx-date-row{margin:0 0 14px}
.app .tx-date-row .tx-date-filter{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.app .tx-date-row .tx-date-filter .monthnav{margin:0;flex:0 0 auto}
.app .tx-date-row .tx-date-custom{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
@media(max-width:820px){.app .tx-date-row .tx-date-filter{justify-content:flex-start}}

/* "More filters" row (recurring / reconciled / origin / amount range / reset) */
.app .tx-more-btn{font-size:12.5px;font-weight:600;color:#2a8862;background:#ecf5ee;border:none;border-radius:8px;padding:8px 12px;cursor:pointer}
.app .tx-more-btn:hover{background:#d9f2e2}
.app .tx-more-row{flex:1 1 100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid #eef3ef;padding-top:10px;margin-top:2px}
.app .tx-amt-range{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#64748b}
.app .tx-amt-range input{width:82px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}
.app .tx-reset-link{margin-left:auto;font-size:12.5px;font-weight:600;color:#64748b;background:none;border:none;cursor:pointer;text-decoration:underline}
.app .tx-reset-link:hover{color:#0f1f2e}

/* recurring column pill */
.app .pill.rc{background:#e8f0fb;color:#4a6fa8}
.app .tx-onetime{font-size:11.5px}

/* contextual empty state (filters active, no matches) */
.app .tx-ledger-empty{padding:44px 24px 48px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.app .tx-ledger-empty .ico{width:46px;height:46px;border-radius:14px;background:#ecf5ee;color:#2a8862;display:inline-flex;align-items:center;justify-content:center}
.app .tx-ledger-empty .ttl{font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:600;color:#0f1f2e}
.app .tx-ledger-empty .bd{font-size:13px;color:#64748b;max-width:420px;line-height:1.55}
.app .tx-ledger-empty .acts{display:flex;gap:9px;margin-top:4px;flex-wrap:wrap;justify-content:center}

/* ledger-rules footnote under the table */
.app .tx-ledger-rules{font-size:11.5px;color:#94a3b8;margin-top:10px}
.app .tx-ledger-rules strong{color:#64748b}

/* transaction detail drawer (right side) */
.app .tx-drawer-scrim{position:fixed;inset:0;background:rgba(15,31,46,.32);z-index:70}
.app .tx-drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:#fff;z-index:71;box-shadow:-24px 0 60px -30px rgba(15,31,46,.45);display:flex;flex-direction:column}
.app .tx-drawer-head{display:flex;align-items:flex-start;gap:12px;padding:20px 24px 16px;border-bottom:1px solid #eef3ef}
.app .tx-drawer-title{flex:1;min-width:0}
.app .tx-drawer-title h2{margin:0;font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:600;color:#0f1f2e;line-height:1.25}
.app .tx-drawer-title .sub{font-size:12px;color:#94a3b8;margin-top:2px}
.app .tx-drawer-title .amt-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.app .tx-drawer-title .amt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.app .tx-drawer-body{flex:1;overflow:auto;padding:18px 24px;display:flex;flex-direction:column;gap:16px}
.app .tx-drawer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.app .tx-drawer-fields .fld .l{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#94a3b8;text-transform:uppercase}
.app .tx-drawer-fields .fld .v{font-size:13px;color:#0f1f2e;font-weight:500;margin-top:2px;overflow-wrap:anywhere}
.app .tx-drawer-actions .l{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#94a3b8;text-transform:uppercase;margin-bottom:8px}
.app .tx-drawer-actions .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.app .tx-drawer-actions .grid button{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#1a2c3d;background:#fff;border:1px solid #cdd8cf;border-radius:10px;padding:9px 12px;cursor:pointer;text-align:left}
.app .tx-drawer-actions .grid button:hover{border-color:#8ad6a8;background:#f0faf4}
.app .tx-drawer-notes{background:#f6f8f5;border-radius:12px;padding:12px 14px}
.app .tx-drawer-notes .l{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#94a3b8;text-transform:uppercase;margin-bottom:4px}
.app .tx-drawer-notes .v{font-size:12.5px;color:#475569;line-height:1.5}
.app .tx-drawer-foot{display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #eef3ef}
.app .tx-drawer-foot .sp{flex:1}

/* ==========================================================================
   Assets & Net Worth page (dc "Net Worth.dc.html" — nav "Assets")
   Exact-markup transplant: every static style is inline in js/app.jsx; only
   the dc style-hover states live here (.astx-* helpers). .ast-empty stays —
   the Banking Connections empty state still uses it.
   ========================================================================== */
.app .astx-type:hover{border-color:#8ad6a8 !important;background:#f0faf4 !important}
.app .astx-pill:hover{border-color:#8ad6a8 !important;background:#f0faf4 !important}
.app .astx-ghost:hover{border-color:#8ad6a8 !important}
.app .astx-upd:hover{background:#d9f2e2 !important}
.app .astx-del:hover{border-color:#e8b8c0 !important;background:#fdf3f5 !important}
.app .astx-row:hover{background:#fbfcfa}
.app .astx-link:hover{color:#206a4d}
/* ==========================================================================
   Liabilities page (dc "Debt Planner.dc.html" v3 — nav "Liabilities") +
   Cash Flow Forecast (dc "Cash Flow Forecast.dc.html").
   Exact-markup transplants: static styles are inline in js/app.jsx; only the
   dc style-hover states live here (.debtx-* / .cffx-* helpers).
   ========================================================================== */
.app .debtx-tile:hover{box-shadow:0 18px 36px -22px rgba(15,31,46,.28);transform:translateY(-2px)}
.app .debtx-ghost:hover{border-color:#8ad6a8 !important;background:#f0faf4 !important}
.app .debtx-row:hover{background:#f9fbf9}
.app .cffx-ghost:hover{border-color:#8ad6a8 !important;background:#f0faf4 !important}
.app .cffx-hz:hover{border-color:#8ad6a8 !important}
.app .ast-empty{background:#fff;border:1px dashed #cdd8cf;border-radius:16px;padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:16px}
.app .ast-empty .ico{width:44px;height:44px;border-radius:12px;background:#ecf5ee;color:#206a4d;display:inline-flex;align-items:center;justify-content:center}
.app .ast-empty .tt{font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:600;color:var(--ink-900);max-width:460px}
.app .ast-empty .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.app .link-btn.danger{color:#b0485c}

/* ==========================================================================
   Cash Flow Forecast — Balance runway + day-by-day ledger (dc redesign)
   ========================================================================== */
.app .cff-runway{display:flex;align-items:flex-end;gap:10px;padding-top:6px;overflow-x:auto}
.app .cff-runway .rw{flex:1;min-width:34px;display:flex;flex-direction:column;align-items:center;gap:6px}
.app .cff-runway .v{font-size:10.5px;color:var(--ink-700,#475569);white-space:nowrap}
.app .cff-runway .track{width:100%;max-width:48px;height:150px;display:flex;align-items:flex-end;border-radius:8px;background:#f4f7f4}
.app .cff-runway .fill{width:100%;border-radius:8px;background:linear-gradient(180deg,#3da77c,#2a8862)}
.app .cff-runway .fill.dip{background:linear-gradient(180deg,#e08d5f,#b45f2c)}
.app .cff-runway .l{font-size:10px;color:var(--ink-400);white-space:nowrap}
.app .cff-runsw{width:11px;height:11px;border-radius:4px;display:inline-block;background:linear-gradient(180deg,#3da77c,#2a8862)}
.app .cff-runsw.dip{background:linear-gradient(180deg,#e08d5f,#b45f2c)}
.app .cff-ledger{display:flex;flex-direction:column;max-height:420px;overflow-y:auto}
.app .cff-ledger .lr{display:grid;grid-template-columns:minmax(66px,auto) minmax(0,1fr) auto auto;gap:0 12px;align-items:baseline;padding:8px 8px;border-bottom:1px solid #f3f7f4;border-radius:8px}
.app .cff-ledger .lr.low{background:#fdf6ef}
.app .cff-ledger .d{font-size:10.5px;font-weight:700;white-space:nowrap}
.app .cff-ledger .nm{font-size:12.5px;font-weight:600;color:var(--ink-900);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .cff-ledger .amt{font-size:11.5px;color:var(--ink-700,#475569)}
.app .cff-ledger .amt.pos{color:var(--mint-700,#206a4d)}
.app .cff-ledger .bal{font-size:11px;color:var(--ink-400)}
.app .cff-ledger .bal.neg{color:#b45f2c;font-weight:700}

/* ==========================================================================
   Banking Connections (Settings → Integrations, dc parity)
   ========================================================================== */
.app .bkc{display:flex;flex-direction:column;gap:16px}
.app .bkc-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.app .bkc-pill{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:3px 9px;white-space:nowrap}
.app .bkc-pill.ok{color:#206a4d;background:#d9f2e2}
.app .bkc-pill.warn{color:#8a6a2f;background:#f9f1e3}
.app .bkc-pill.soon{color:#94a3b8;background:#f1f5f4}
.app .bkc-pill.av{color:#206a4d;background:#ecf5ee}
.app .bkc-notcfg{background:#fff;border:1px solid #ecd9b0;border-radius:16px;padding:18px 22px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.app .bkc-notcfg .ico{width:34px;height:34px;border-radius:10px;background:#f9f1e3;color:#8a6a2f;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.app .bkc-kpis{margin-bottom:0}
.app .bkc-connhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.app .bkc-conn{background:#fff;border:1px solid var(--line,#e3eae4);border-radius:16px;overflow:hidden;margin-bottom:10px}
.app .bkc-conn .r1{display:flex;align-items:center;gap:12px;padding:14px 18px;flex-wrap:wrap}
.app .bkc-conn .nm{font-size:14.5px;font-weight:700;color:var(--ink-900)}
.app .bkc-accts{border-top:1px solid #eef3ef}
.app .bkc-accts .row{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid #f3f7f4}
.app .bkc-accts .nm{font-size:12px;font-weight:600;color:var(--ink-900)}
.app .bkc-accts .foot{display:flex;align-items:center;gap:14px;padding:9px 18px;flex-wrap:wrap}
.app .bkc-sec{background:linear-gradient(135deg,#103125,#1c4a37);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:11px;color:#fff}
.app .bkc-sec .h{display:flex;align-items:center;gap:9px}
.app .bkc-sec .h .ico{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#8ad6a8}
.app .bkc-sec .row{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.55}
.app .bkc-sec .row .ico,.app .bkc-sec .row svg{flex:0 0 auto;margin-top:2px;color:#8ad6a8}
.app .bkc-sec .ft{font-size:10.5px;color:#9fc4ae;line-height:1.5;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}
.app .bkc-banks-wrap{background:#fff;border:1px solid var(--line,#e3eae4);border-radius:16px;padding:16px 20px}
.app .bkc-banks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;margin-top:12px}
.app .bkc-banks .bk{display:flex;flex-direction:column;gap:8px;background:#fbfcfa;border:1px solid var(--line,#e3eae4);border-radius:12px;padding:12px 13px}
.app .bkc-banks .bk .r{display:flex;align-items:center;gap:9px;min-width:0}
.app .bkc-banks .bk .nm{font-size:12px;font-weight:700;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .bkc-banks .bk .ty{font-size:9.5px}
.app .bkc-banks .bk .bkc-pill{align-self:flex-start;margin-top:auto}

/* ==========================================================================
   Earnings dc parity ("ClearMint Earnings.html") — hero empty state, KPI icon
   chips, range chips, income-table figures, insights row (source note, monthly
   bar chart, upcoming income list).
   ========================================================================== */
/* hero empty state — "Every dollar coming in, in one place" */
.app .earn-empty-hero{display:flex;align-items:center;justify-content:center;padding:56px 32px;min-height:52vh}
.app .earn-empty-hero .inner{max-width:560px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.app .earn-empty-hero .ico{width:76px;height:76px;border-radius:22px;background:#ecf5ee;color:#2a8862;display:inline-flex;align-items:center;justify-content:center}
.app .earn-empty-hero h1{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:30px;letter-spacing:-.01em;color:#0f1f2e}
.app .earn-empty-hero p{margin:0;font-size:14.5px;color:#64748b;line-height:1.6}
.app .earn-empty-hero .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
/* KPI icon chip (bundle tiles carry a small rounded icon before the microcap) */
.app .kpi .lbl{display:flex;align-items:center;gap:8px}
.app .kpi .kico{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.app .kpi .kico-w{background:rgba(255,255,255,.16);color:#fff}
.app .kpi .kico-mint{background:#ecf5ee;color:#2a8862}
.app .kpi .kico-blue{background:#eef4fb;color:#4a7fb5}
.app .kpi .kico-gold{background:#f1ede2;color:#8a6a2f}
/* range chips sit in the month filter's left slot */
.app .earn-range{margin:0}
/* income amounts render mint-green like the bundle table */
.app [data-dl-page="earnings"] table.sheet tbody td.num,
.app [data-dl-page="earnings"] table.sheet tfoot .sheet-totals td.num{color:#2a8862}
/* insights panels: flex bodies so footnotes pin to the bottom edge */
.app [data-dl-page="earnings"] .insights-grid .panel{display:flex;flex-direction:column}
.app [data-dl-page="earnings"] .insights-grid .panel .body{display:flex;flex-direction:column;gap:12px;flex:1}
.app .earn-src-note,.app .earn-up-note{font-size:12px;color:#64748b;line-height:1.55;border-top:1px solid #eef3ef;padding-top:10px;margin-top:auto}
.app .earn-src-note strong{color:#0f1f2e}
.app .earn-bars{width:100%;height:auto}
/* upcoming income rows (date chip · name · relative pill · amount) */
.app .earn-up-list{display:flex;flex-direction:column}
.app .earn-up-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #f3f7f4}
.app .earn-up-row:last-child{border-bottom:0}
.app .earn-up-date{display:flex;flex-direction:column;align-items:center;width:36px;border:1px solid #e3eae4;border-radius:9px;overflow:hidden;flex:0 0 auto}
.app .earn-up-date .mo{font-size:9px;font-weight:700;background:#f6f8f5;color:#64748b;width:100%;text-align:center;padding:2px 0;letter-spacing:.05em}
.app .earn-up-date .dy{font-size:14px;font-weight:700;color:#0f1f2e;padding:2px 0}
.app .earn-up-row .mid{flex:1;min-width:0}
.app .earn-up-row .nm{font-size:13px;font-weight:600;color:#0f1f2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .earn-up-row .sub{font-size:11.5px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .earn-up-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:#f1f5f4;color:#64748b;white-space:nowrap;flex:0 0 auto}
.app .earn-up-pill.soon{background:#f1ede2;color:#8a6a2f}
.app .earn-up-row .amt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;font-weight:600;color:#2a8862;font-variant-numeric:tabular-nums;white-space:nowrap}
.app .earn-link{border:0;background:none;padding:0;font-size:12.5px;font-weight:600;color:#206a4d;cursor:pointer}
.app .earn-link:hover{text-decoration:underline}

/* ---------------- Spending page (dc "ClearMint Spending.html" parity) ---------------- */
/* mini stat strip under the KPI tiles */
.app .sp-ministats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:12px 0 14px}
.app .sp-ministat{background:#fff;border:1px solid #e3eae4;border-radius:12px;padding:11px 15px;display:flex;align-items:baseline;gap:8px;min-width:0}
.app .sp-ministat .k{font-size:11px;font-weight:700;letter-spacing:.06em;color:#94a3b8;text-transform:uppercase;white-space:nowrap}
.app .sp-ministat .v{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;font-weight:600;color:#0f1f2e;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .sp-ministat .v.pos{color:#2a8862}
.app .sp-ministat .v.warn{color:#8a6a2f}
/* upcoming bills + cash-flow / budget connection grid */
.app .sp-connect-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:18px;align-items:start;margin-top:18px}
.app .sp-connect-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.app .sp-upcoming .earn-up-row .amt{color:#0f1f2e}
.app .sp-cash-panel{background:linear-gradient(150deg,#103125,#185540);border:1px solid #185540;border-radius:18px;padding:20px 22px;color:#fff;display:flex;flex-direction:column;gap:14px}
.app .sp-cash-panel .head{display:flex;align-items:baseline;gap:10px}
.app .sp-cash-panel h3{margin:0;font-size:15px;font-weight:700;color:#fff}
.app .sp-cash-link{border:0;background:none;padding:0;font-size:12.5px;font-weight:600;color:#E7D2A6;cursor:pointer}
.app .sp-cash-link:hover{text-decoration:underline}
.app .sp-cash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.app .sp-cash-grid .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;color:#9dbfab;text-transform:uppercase}
.app .sp-cash-grid .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:17px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.app .sp-cash-grid .v.pos{color:#b6e6c8}
.app .sp-cash-grid .s{font-size:11px;color:#9dbfab;margin-top:2px}
.app .sp-cash-warn{display:flex;align-items:center;gap:10px;background:rgba(212,169,93,.16);border:1px solid rgba(231,210,166,.4);border-radius:12px;padding:10px 14px;color:#E7D2A6;font-size:12.5px;line-height:1.5}
.app .sp-cash-warn svg{flex:0 0 auto}
/* budget pace rows (fill vs gray on-pace marker) */
.app .sp-blist{display:flex;flex-direction:column;gap:11px}
.app .sp-brow{display:grid;grid-template-columns:110px 1fr 110px;gap:10px;align-items:center;font-size:12.5px}
.app .sp-brow .nm{font-weight:600;color:#0f1f2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .sp-brow .track{height:7px;border-radius:999px;background:#eef3ef;position:relative}
.app .sp-brow .fill{height:100%;border-radius:999px}
.app .sp-brow .mark{position:absolute;top:-2px;width:2px;height:11px;background:#94a3b8;border-radius:2px}
.app .sp-brow .amt{color:#64748b;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* vendor + category insights */
.app [data-dl-page="spending"] .insights-grid .panel{display:flex;flex-direction:column}
.app [data-dl-page="spending"] .insights-grid .panel .body{display:flex;flex-direction:column;gap:12px;flex:1}
.app .sp-catlines{display:flex;flex-direction:column;gap:9px}
.app .sp-catline{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.app .sp-catline .nm{color:#475569;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .sp-catline .amt{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;color:#0f1f2e;font-variant-numeric:tabular-nums;white-space:nowrap}
.app .sp-cat-delta{width:44px;text-align:right;font-size:12px;color:#94a3b8;flex:0 0 auto}
.app .sp-cat-delta.up{color:#b45f2c;font-weight:600}
.app .sp-cat-delta.down{color:#2a8862;font-weight:600}
.app .sp-split-bar{display:flex;height:16px;border-radius:999px;overflow:hidden}
.app .sp-split-legend{display:flex;gap:16px;font-size:12px;font-weight:600;color:#475569;flex-wrap:wrap}
.app .sp-split-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.app .sp-largest{border-top:1px solid #eef3ef;padding-top:12px;display:flex;flex-direction:column;gap:8px;margin-top:auto}
.app .sp-lg-head{font-size:11px;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase}
.app .sp-lg-row{display:flex;align-items:baseline;gap:8px;font-size:12.5px;min-width:0}
.app .sp-lg-row .nm{font-weight:600;color:#0f1f2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .sp-lg-row .dt{color:#94a3b8;white-space:nowrap}
.app .sp-lg-row .amt{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;color:#0f1f2e;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------- Bank Accounts page (dc "ClearMint Bank Accounts.html" parity) ---------------- */
/* KPI cards double as clickable filters over the account list */
.app [data-dl-page="accounts"] .kpi.kpi-click{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.app [data-dl-page="accounts"] .kpi.kpi-click:hover{box-shadow:0 10px 24px -16px rgba(15,31,46,.3);transform:translateY(-1px)}
.app [data-dl-page="accounts"] .kpi.kpi-click:focus-visible{outline:2px solid #2a8862;outline-offset:2px}
.app [data-dl-page="accounts"] .kpi.kpi-click.kpi-sel:not(.accent){border-color:#8ad6a8;box-shadow:0 0 0 3px rgba(61,167,124,.14)}
/* active-filter notice bar */
.app .acct-filter-notice{display:flex;align-items:center;gap:10px;background:#ecf5ee;border-radius:12px;padding:9px 14px;font-size:12.5px;color:#206a4d;font-weight:600;margin-bottom:14px}
.app .acct-filter-notice button{margin-left:auto;font-size:12px;font-weight:700;color:#206a4d;background:none;border:none;cursor:pointer;text-decoration:underline}
/* recent-activity ledger table */
.app .acct-recent table.sheet{font-size:12.5px}
.app .acct-recent table.sheet th{white-space:nowrap}
/* ---- account workspace ---- */
.app .acct-ws{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
.app .acct-ws .aw-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.app .acct-ws .aw-title{flex:1;min-width:0}
.app .acct-ws .aw-title .nm-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app .acct-ws .aw-title .nm{font-family:'Newsreader',Georgia,serif;font-size:20px;font-weight:600;color:#0f1f2e}
.app .acct-ws .aw-title .ln{font-size:11.5px;color:#94a3b8}
.app .acct-ws .aw-bal{margin-left:auto;text-align:right}
.app .acct-ws .aw-bal .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:22px;font-weight:600;color:#0f1f2e;font-variant-numeric:tabular-nums}
.app .acct-ws .aw-bal .s{font-size:11px;color:#64748b}
.app .acct-ws .aw-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #e3eae4}
.app .acct-ws .aw-tab{font-size:12.5px;font-weight:600;color:#475569;background:none;border:none;border-bottom:2px solid transparent;padding:9px 12px;cursor:pointer;margin-bottom:-1px}
.app .acct-ws .aw-tab:hover{color:#0f1f2e}
.app .acct-ws .aw-tab.on{color:#206a4d;border-bottom-color:#2a8862;font-weight:700}
/* stat tiles */
.app .acct-ws .aw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.app .acct-ws .aw-stat{background:#fff;border:1px solid #e3eae4;border-radius:13px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.app .acct-ws .aw-stat .k{font-size:10px;font-weight:700;letter-spacing:.06em;color:#64748b}
.app .acct-ws .aw-stat .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:17px;font-weight:600;color:#0f1f2e;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .acct-ws .aw-stat .s{font-size:11px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .acct-ws .aw-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:stretch}
@media (max-width:900px){.app .acct-ws .aw-grid{grid-template-columns:1fr}}
.app .acct-ws .aw-grid .panel{margin:0;display:flex;flex-direction:column}
/* health row */
.app .acct-ws .aw-health{display:flex;align-items:center;gap:14px;border-top:1px solid #eef3ef;padding-top:11px;margin-top:10px}
.app .acct-ws .aw-health .k{font-size:10px;font-weight:700;letter-spacing:.06em;color:#94a3b8}
.app .acct-ws .aw-health .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:19px;font-weight:600;color:#206a4d}
.app .acct-ws .aw-health .track{flex:1;height:9px;border-radius:5px;background:#eef3ef;overflow:hidden}
.app .acct-ws .aw-health .fill{height:100%;border-radius:5px}
.app .acct-ws .aw-health .s{font-size:11.5px;color:#64748b;max-width:220px}
/* statements rows */
.app .acct-ws .aw-stmt{display:flex;align-items:center;gap:14px;padding:12px 20px;border-top:1px solid #f3f7f4;flex-wrap:wrap}
.app .acct-ws .aw-stmt .kind{width:34px;height:34px;border-radius:10px;background:#ecf5ee;color:#2a8862;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:0 0 auto}
.app .acct-ws .aw-stmt .mid{min-width:150px;flex:1}
.app .acct-ws .aw-stmt .nm{font-size:13px;font-weight:600;color:#0f1f2e}
.app .acct-ws .aw-stmt .sub{font-size:10.5px;color:#94a3b8}
.app .acct-ws .aw-stmt .acts{margin-left:auto;display:flex;gap:5px}
/* forecast drivers */
.app .acct-ws .aw-driver{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #f3f7f4;font-size:12.5px}
.app .acct-ws .aw-driver .nm{font-weight:600;color:#0f1f2e}
.app .acct-ws .aw-driver .sub{color:#94a3b8;font-size:11px}
.app .acct-ws .aw-driver .amt{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* insight card (reuses .sp-cash-panel gradient) */
.app .acct-ws .aw-insight .head{display:flex;align-items:center;gap:8px}
.app .acct-ws .aw-insight .k{font-size:10px;font-weight:700;letter-spacing:.08em;color:#9dbfab}
.app .acct-ws .aw-insight .tag{font-size:9px;font-weight:700;color:#D4A95D;background:rgba(212,169,93,.14);border:1px solid rgba(212,169,93,.4);border-radius:999px;padding:2px 7px}
.app .acct-ws .aw-insight .txt{font-family:'Newsreader',Georgia,serif;font-size:17px;font-weight:500;line-height:1.5;color:#e8f3ec}
/* settings tab */
.app .acct-ws .aw-colors{display:flex;gap:8px}
.app .acct-ws .aw-color{width:26px;height:26px;border-radius:999px;border:2px solid transparent;cursor:pointer;padding:0}
.app .acct-ws .aw-color.on{border-color:#0f1f2e;box-shadow:0 0 0 2px #fff inset}
.app .acct-ws .aw-set-checks{display:grid;grid-template-columns:1fr 1fr;gap:9px;background:#f6f8f5;border-radius:12px;padding:14px 16px}
.app .acct-ws .aw-set-checks label{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#475569;cursor:pointer}
.app .acct-ws .aw-set-checks input{accent-color:#2a8862;width:15px;height:15px}
.app .acct-ws .aw-set-soon{background:#fbfcfa;border:1px dashed #cdd8cf;border-radius:12px;padding:12px 15px;font-size:11.5px;color:#94a3b8;line-height:1.6}
.app .acct-ws .aw-set-soon strong{color:#64748b}
/* account tile extras (purpose chip + 2-col meta grid) */
.app .acct-tile .at-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:11.5px;color:#64748b}
.app .acct-tile .at-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   Subscriptions page — dc "ClearMint Subscriptions.html" parity
   ============================================================ */
.app .subx-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app .subx-ai{font-size:8.5px;font-weight:700;color:#8a6a2f;background:#f1ede2;border-radius:999px;padding:2px 6px;margin-left:2px}
/* KPI chips — clickable filters (8 cards, 2 rows) */
.app .subx-kpi.kpi-click{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.app .subx-kpi.kpi-click:hover{box-shadow:0 10px 24px -16px rgba(15,31,46,.3);transform:translateY(-1px)}
.app .subx-kpi.kpi-click:focus-visible{outline:2px solid #2a8862;outline-offset:2px}
.app .subx-kpi.kpi-sel{border-color:#8ad6a8;box-shadow:0 0 0 3px rgba(61,167,124,.14)}
/* savings opportunities — dark gradient section */
.app .subx-save{background:linear-gradient(150deg,#103125,#1c4a38);border-radius:18px;padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px;color:#fff;margin-bottom:18px}
.app .subx-save .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.app .subx-save .hd .k{font-size:10px;font-weight:700;letter-spacing:.08em;color:#9dbfab}
.app .subx-save .hd .ai{font-size:9px;font-weight:700;color:#D4A95D;background:rgba(212,169,93,.14);border:1px solid rgba(212,169,93,.4);border-radius:999px;padding:2px 7px}
.app .subx-save .hd .tot{margin-left:auto;font-size:13px;font-weight:600;color:#e8f3ec}
.app .subx-save .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.app .subx-save-empty{font-size:12.5px;color:#c9ded1}
.app .subx-rec{background:#fff;border-radius:14px;padding:13px 15px;display:flex;flex-direction:column;gap:8px;color:#0f1f2e}
.app .subx-rec .tags{display:flex;align-items:center;gap:8px}
.app .subx-rec .kind{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#206a4d;background:#ecf5ee;border-radius:999px;padding:3px 9px}
.app .subx-rec .conf{font-size:10px;font-weight:600;color:#94a3b8}
.app .subx-rec .ttl{font-size:13.5px;font-weight:700;line-height:1.35}
.app .subx-rec .bd{font-size:11.5px;color:#64748b;line-height:1.55}
.app .subx-rec .sum{display:flex;align-items:center;gap:8px;margin-top:auto}
.app .subx-rec .sum .mo{margin-left:auto;font-size:14px;font-weight:600;color:#206a4d}
.app .subx-rec .sum .yr{font-size:10.5px;color:#94a3b8}
.app .subx-rec .acts{display:flex;gap:6px;border-top:1px solid #eef3ef;padding-top:9px}
.app .subx-rec .go{font-family:inherit;font-size:11.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3da77c,#2a8862);border:none;border-radius:8px;padding:6px 11px;cursor:pointer}
.app .subx-rec .dis{margin-left:auto;font-family:inherit;font-size:11.5px;font-weight:600;color:#94a3b8;background:none;border:none;cursor:pointer}
.app .subx-rec .dis:hover{color:#b0485c}
.app .subx-save-ai{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px}
.app .subx-save-ai .h{display:flex;align-items:center;gap:8px;font-size:13px;color:#e8f3ec}
.app .subx-save-ai .wk{margin-left:auto;font-size:11px;color:#9dbfab}
.app .subx-save-ai .s{font-size:12.5px;color:#d5e6db;white-space:pre-wrap;line-height:1.55;margin-top:6px}
.app .subx-save-ai .n{font-size:10.5px;color:#8fae9b;margin-top:6px}
.app .subx-save .ft{font-size:11px;color:#9dbfab}
/* toolbar */
.app .subx-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid #e3eae4;border-radius:14px;padding:10px 14px;margin-bottom:14px}
.app .subx-seg{display:inline-flex;background:#f1f5f4;border-radius:9px;padding:3px;gap:2px}
.app .subx-seg button{font-family:inherit;font-size:12px;font-weight:700;color:#64748b;background:none;border:none;border-radius:7px;padding:6px 13px;cursor:pointer}
.app .subx-seg button.on{background:#fff;color:#0f1f2e;box-shadow:0 1px 3px rgba(15,31,46,.12)}
.app .subx-toolbar .subx-search{flex:1 1 200px;min-width:170px}
.app .subx-showcx{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#475569;cursor:pointer}
.app .subx-showcx input{accent-color:#2a8862;width:14px;height:14px}
.app .subx-count{font-size:11.5px;color:#94a3b8}
.app .subx-notice{display:flex;align-items:center;gap:10px;background:#ecf5ee;border-radius:12px;padding:9px 14px;font-size:12.5px;color:#206a4d;font-weight:600;margin-bottom:14px}
.app .subx-notice button{margin-left:auto;font-family:inherit;font-size:12px;font-weight:700;color:#206a4d;background:none;border:none;cursor:pointer;text-decoration:underline}
/* cards view */
.app .subx-tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.app .subx-tile{background:#fff;border:1px solid #e3eae4;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s ease,transform .18s ease}
.app .subx-tile:hover{box-shadow:0 18px 36px -22px rgba(15,31,46,.28);transform:translateY(-2px)}
.app .subx-tile.off{opacity:.72}
.app .subx-tile .bar{height:4px;flex:0 0 auto}
.app .subx-tile .bd{padding:15px 17px 14px;display:flex;flex-direction:column;gap:11px;flex:1}
.app .subx-tile .hd{display:flex;align-items:center;gap:10px;min-width:0}
.app .subx-tile .ttl{flex:1;min-width:0}
.app .subx-tile .ttl .nm{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:#0f1f2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .subx-tile .ttl .ln{font-size:11px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .subx-tile .cost{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.app .subx-tile .cost .amt{font-size:23px;font-weight:600;color:#0f1f2e}
.app .subx-tile .cost .freq{font-size:11px;color:#64748b;font-weight:600}
.app .subx-tile .cost .yr{margin-left:auto;font-size:11px;color:#94a3b8}
.app .subx-tile .meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:11.5px;color:#64748b}
.app .subx-tile .meta strong{color:#0f1f2e;font-weight:600}
.app .subx-tile .meta strong.soon{color:#b9863b}
.app .subx-tile .ft{display:flex;align-items:center;gap:7px;margin-top:auto;border-top:1px solid #eef3ef;padding-top:10px;flex-wrap:wrap}
.app .subx-tile .ft .st{margin-left:auto;font-size:10.5px;color:#94a3b8}
.app .subx-tile .acts{display:flex;gap:6px;flex-wrap:wrap}
.app .subx-tile .acts .btn:first-child{flex:1;justify-content:center}
.app .subx-cancelbtn{color:#b45f2c;border-color:#e8c4b4}
.app .subx-cancelbtn:hover{background:#faece7;border-color:#e8c4b4}
/* health chips */
.app .subx-hchip{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.app .subx-hchip.ok{background:#ecf5ee;color:#206a4d}
.app .subx-hchip.warn{background:#fdf6ec;color:#b9863b}
.app .subx-hchip.info{background:#eef2fb;color:#4f83c4}
.app .subx-hchip.bad{background:#faece7;color:#b45f2c}
.app .subx-hchip.off{background:#f1f5f4;color:#64748b}
.app .subx-hchip.save{background:#ecf5ee;color:#206a4d}
/* table view */
.app .subx-bulkbar{display:flex;align-items:center;gap:10px;background:#0f1f2e;color:#fff;border-radius:12px;padding:9px 14px;font-size:12.5px;font-weight:600;flex-wrap:wrap;margin-bottom:10px}
.app .subx-bulkbar .btn2{font-family:inherit;font-size:11.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 12px;cursor:pointer}
.app .subx-bulkbar .btn2.solid{color:#0f1f2e;background:#fff;border-color:#fff}
.app .subx-bulkbar .clear{margin-left:auto;font-family:inherit;font-size:11.5px;font-weight:600;color:#9dbfab;background:none;border:none;cursor:pointer;text-decoration:underline}
.app .subx-table .subx-tmain .nm{font-weight:600;color:#0f1f2e;display:flex;align-items:center;gap:6px}
.app .subx-table tr.off td{opacity:.6}
.app .subx-table .rowact button{font-family:inherit;font-size:11px;font-weight:600;background:none;border:none;cursor:pointer;padding:2px 5px}
.app .subx-rowlink{color:#2a8862}
.app .subx-rowdel{color:#b45f2c}
/* connect grid (upcoming + cash flow + budget) */
.app .subx-connect{display:grid;grid-template-columns:minmax(320px,7fr) minmax(280px,5fr);gap:16px;align-items:start;margin-bottom:18px}
@media(max-width:1000px){.app .subx-connect{grid-template-columns:1fr}}
.app .subx-connect-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.app .subx-up-row{display:flex;align-items:center;gap:12px;padding:9px 18px;border-top:1px solid #f3f7f4}
.app .subx-up-row:hover{background:#f9fbf9}
.app .subx-up-row .mid{flex:1;min-width:0}
.app .subx-up-row .mid .a{font-size:12.5px;font-weight:600;color:#0f1f2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .subx-up-row .mid .b{font-size:10.5px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .subx-up-row .dt{width:84px;text-align:right;font-size:11px;color:#94a3b8;white-space:nowrap}
.app .subx-up-row .amt{width:76px;text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;font-weight:600;color:#0f1f2e;white-space:nowrap}
/* budget connection */
.app .subx-bud-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.app .subx-bud-big .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:22px;font-weight:600;color:#0f1f2e}
.app .subx-bud-big .of{font-size:12px;color:#64748b}
.app .subx-bud-track{height:10px;border-radius:5px;background:#eef3ef;overflow:hidden;position:relative;margin-top:8px}
.app .subx-bud-track .fill{height:100%;border-radius:5px}
.app .subx-bud-track .tick{position:absolute;top:-1px;width:2px;height:12px;background:#94a3b8;border-radius:2px}
/* clickable category rows */
.app .subx-catbtn{width:100%;background:none;border:none;font-family:inherit;cursor:pointer;padding:4px 6px;border-radius:9px;text-align:left}
.app .subx-catbtn:hover{background:#f0f5f1}
.app .subx-catbtn.on{background:#ecf5ee;box-shadow:inset 0 0 0 1px #8ad6a8}
/* details drawer extras (reuses .tx-drawer chrome) */
.app .subx-dw{gap:18px}
.app .subx-dw h3{margin:0 0 6px;font-size:13px;font-weight:700;color:#0f1f2e}
.app .subx-dw-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.app .subx-dw-stat{background:#fbfcfa;border:1px solid #eef3ef;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.app .subx-dw-stat .k{font-size:9.5px;font-weight:700;letter-spacing:.05em;color:#94a3b8;text-transform:uppercase}
.app .subx-dw-stat .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px;font-weight:600;color:#0f1f2e}
.app .subx-dw-stat .s{font-size:10.5px;color:#94a3b8}
.app .subx-dw-note{background:#ecf5ee;border-radius:12px;padding:12px 14px;font-size:12px;color:#206a4d;line-height:1.55}
.app .subx-dw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #f3f7f4;font-size:12.5px}
.app .subx-dw-row .l{color:#64748b}
.app .subx-dw-row .r{color:#0f1f2e;font-weight:600}
.app .subx-dw-tl{display:flex;align-items:flex-start}
.app .subx-dw-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.app .subx-dw-step .dot{width:11px;height:11px;border-radius:50%;background:#cdd8cf}
.app .subx-dw-step.done .dot{background:#2a8862}
.app .subx-dw-step .lb{font-size:10.5px;font-weight:700;color:#475569;text-align:center}
.app .subx-dw-step .sb{font-size:9.5px;color:#94a3b8;text-align:center}
.app .subx-dw-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.app .subx-dw-chip{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:#f1f5f4;color:#64748b}
.app .subx-dw-hist{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.app .subx-dw-price{background:#fbfcfa;border:1px solid #eef3ef;border-radius:10px;padding:6px 10px;text-align:center}
.app .subx-dw-price .y{font-size:9.5px;font-weight:700;color:#94a3b8}
.app .subx-dw-price .p{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;font-weight:600;color:#0f1f2e}
.app .subx-dw-price.up .p{color:#b45f2c}
.app .subx-dw-pay{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #f3f7f4;font-size:12.5px}
.app .subx-dw-pay .d{color:#475569;width:78px;flex:0 0 auto}
.app .subx-dw-pay .st{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:#ecf5ee;color:#206a4d}
.app .subx-dw-pay .n{flex:1;font-size:10.5px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .subx-dw-pay .a{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;color:#0f1f2e}
.app .subx-dw-soon{background:#fbfcfa;border:1px dashed #cdd8cf;border-radius:12px;padding:11px 14px;font-size:11px;color:#94a3b8;line-height:1.6}

/* ============ Budget Planner (dc "ClearMint Budget Planner.html" parity) ============ */
.app .bud-empty-hero .ico{background:#ecf5ee;color:#2a8862}
.app .bud-tabs{margin:0;flex-wrap:wrap}
.app .bud-note{font-size:13px;margin:0 0 14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* status chips (On track / Over pace / Over budget / zero-based assign states) */
.app .bud-chip-st{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap;flex:0 0 auto}
.app .bud-chip-st.ok{color:#2a8862;background:#d9f2e2}
.app .bud-chip-st.warn{color:#a97e2f;background:#fbf3e6}
.app .bud-chip-st.over{color:#c2453a;background:#fdf0ef}
/* category table TOTAL footer row */
.app .budget-total{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0 2px}
.app .budget-total .nm{font-size:12px;font-weight:700;letter-spacing:.05em;color:#64748b}
.app .budget-total .nums{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:#475569;font-variant-numeric:tabular-nums}
/* zero-based: LEFT TO ASSIGN card + stacked assignment bar + legend + lists */
.app .bud-zero-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.app .bud-zero-head .k{font-size:11px;font-weight:700;letter-spacing:.07em;color:#64748b}
.app .bud-zero-head .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:22px;font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums}
.app .bud-zero-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:#eef3ef;margin-top:12px}
.app .bud-zero-bar .seg{height:100%}
.app .bud-zero-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:#64748b;margin-top:10px}
.app .bud-zero-legend span{display:inline-flex;align-items:center;gap:6px}
.app .bud-zero-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.app .bud-zero-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.app .bud-zero-row:last-child{border-bottom:0}
.app .bud-zero-row:hover .nm{color:var(--mint-700)}
.app .bud-zero-row .nm{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .bud-zero-row .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:#475569;font-variant-numeric:tabular-nums}
/* envelopes grid */
.app .bud-env-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.app .bud-env-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:box-shadow .18s ease,transform .18s ease}
.app .bud-env-card:hover{box-shadow:0 12px 26px -18px rgba(15,31,46,.22);transform:translateY(-2px)}
.app .bud-env-card .hd{display:flex;align-items:center;gap:9px;min-width:0}
.app .bud-env-card .hd .nm{font-size:13.5px;font-weight:600;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .bud-env-card .hd .bud-chip-st{margin-left:auto}
.app .bud-env-card .amt .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:20px;font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums}
.app .bud-env-card .amt .of{font-size:12px;color:#64748b}
.app .bud-env-card .bar{position:relative;height:9px;border-radius:999px;background:#eef3ef;overflow:hidden}
.app .bud-env-card .bar .fill{height:100%;border-radius:999px;transition:width .3s ease}
.app .bud-env-card .ft{font-size:11.5px;color:#94a3b8}
/* pay yourself first: 3-step grid, step 1 in the mint gradient */
.app .bud-pyf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.app .bud-pyf-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:11px}
.app .bud-pyf-card .k{font-size:11px;font-weight:700;letter-spacing:.07em;color:#64748b}
.app .bud-pyf-card .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:22px;font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums}
.app .bud-pyf-card .v .pct{font-size:12px;color:#64748b;font-weight:500}
.app .bud-pyf-card.first{background:linear-gradient(150deg,#2a8862,#206a4d);border:0;color:#fff;box-shadow:0 12px 26px -16px rgba(42,136,98,.7)}
.app .bud-pyf-card.first .k{color:#d9f2e2}
.app .bud-pyf-card.first .v{color:#fff}
.app .bud-pyf-card.first .v .pct{color:#b6e6c8}
.app .bud-pyf-card.first .bud-chip-st{color:#fff;background:rgba(255,255,255,.18)}
.app .bud-pyf-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.app .bud-pyf-list{display:flex;flex-direction:column}
.app .bud-pyf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.app .bud-pyf-row:last-child{border-bottom:0}
.app .bud-pyf-row .nm{font-weight:600;color:var(--ink-900);display:inline-flex;align-items:center;gap:2px;min-width:0}
.app .bud-pyf-row .v2{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:#475569;font-variant-numeric:tabular-nums}
.app .bud-pyf-card.first .bud-pyf-row{border-bottom-color:rgba(255,255,255,.14)}
.app .bud-pyf-card.first .bud-pyf-row .nm{color:#eafaf0}
.app .bud-pyf-card.first .bud-pyf-row .v2{color:#fff}
.app .bud-pyf-note{margin:0;font-size:12.5px;color:#64748b;line-height:1.6}
.app .bud-pyf-target{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;width:120px;padding:4px 8px;border:1px solid #8ad6a8;border-radius:6px;outline:none;color:#0f1f2e}

/* --------------------------------------------------------------------------
   Liquid-glass popups (design-handoff pass) — the shared GlassModal carries the
   full recipe inline (scrim blur, frosted gradient dialog, 26px radius). These
   helpers only adapt legacy drawer content that now lives INSIDE the glass
   dialog, plus popup titles in Newsreader serif.
   -------------------------------------------------------------------------- */
.app .glassm h2,.app .glassm .tx-drawer-title h2{font-family:'Newsreader',Georgia,serif}
/* legacy drawer chrome inside glass: soften the hard white head/foot borders */
.app .glassm .tx-drawer-head{border-bottom:1px solid rgba(15,31,46,.07)}
/* glass form chrome (GlassFormModal) — shared head/body/foot for every form popup */
.app .glassfm .gfm-head{display:flex;align-items:center;gap:10px;padding:16px 22px 12px;border-bottom:1px solid rgba(15,31,46,.07);flex:0 0 auto}
.app .glassfm .gfm-head h2{margin:0;font-size:20px;font-weight:600;color:#0f1f2e;line-height:1.25;min-width:0}
.app .glassfm .gfm-x{margin-left:auto;width:30px;height:30px;border-radius:999px;border:1px solid #e3eae4;background:#fff;color:#64748b;font-size:13px;cursor:pointer;flex:0 0 auto}
.app .glassfm .gfm-x:hover{background:#f4f7f4;color:#0f1f2e}
.app .glassfm .gfm-body{flex:1;overflow:auto;padding:18px 22px}
.app .glassfm .gfm-foot{display:flex;align-items:center;gap:10px;padding:14px 22px 18px;border-top:1px solid rgba(15,31,46,.07);flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.app .glassfm .gfm-foot .sp{flex:1}
/* glass confirm (Confirmer) — centered icon/title/message inside the frosted dialog */
.app .glassfm-confirm .cbody{padding:26px 24px 6px;text-align:center}
.app .glassfm-confirm .cbody h3{margin:0 0 6px;font-family:'Newsreader',Georgia,serif;font-size:19px;color:#0f1f2e}
.app .glassfm-confirm .cbody p{margin:0;color:#475569;font-size:14px;line-height:1.5}
.app .glassfm-confirm .cicon{width:52px;height:52px;border-radius:50%;background:var(--mint-50,#ecf5ee);color:var(--mint-600,#2a8862);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.app .glassfm-confirm .cicon.danger{background:#fdf3f3;color:var(--bad,#b3372f)}
.app .glassfm-confirm .gfm-foot{border-top:0;justify-content:center;padding-top:16px}
/* dashboard workspace: remove-tile ✕ hover */
.app .dash-ws-grid button[aria-label]:hover{background:#faece7}
/* ── Review Center / Vendors / Categories / Import Center (dc exact-markup
   transplants). Static styles live inline as JSX objects; only hover/focus
   states live here as scoped helpers — mirrors the dc's style-hover attrs. */
.app .rvx-railbtn:hover{background:#f0f5f1}
.app .rvx-pubchip:hover{border-color:#8ad6a8;color:#206a4d}
.app .rvx-card:hover{border-color:#dbe7de}
.app .rvx-actbtn:hover{filter:brightness(.97)}
.app .vnx-chip:hover{border-color:#8ad6a8}
.app .vnx-row:hover{background:#fbfdfb}
.app .vnx-bulkbtn:hover{border-color:#8ad6a8;background:#f0faf4}
.app .catx-row:hover{background:#fbfdfb}
.app .imx-drop:hover{background:#f0faf4}
/* ── Bank Connections — Connected accounts + Connect flow (dc: "Connected Accounts.dc.html").
   Static styles live inline as JSX; only hover/focus + the sync/handoff spinner keyframes live
   here as scoped helpers. Reduced-motion turns the spinner into a static ring (a11y: WCAG 2.2). */
@keyframes cnx-spin{to{transform:rotate(360deg)}}
@keyframes cnx-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.app .cnx-flow{animation:cnx-fade .25s ease}
.app .cnx-spin{animation:cnx-spin .8s linear infinite}
.app .cnx-primary:hover{filter:brightness(1.04)}
.app .cnx-ghost:hover{border-color:#8ad6a8;color:#0f1f2e}
.app .cnx-link:hover{color:#206a4d}
.app .cnx-card:hover{border-color:#8ad6a8}
.app .cnx-result:hover{border-color:#8ad6a8;background:#fbfdfb}
.app .cnx-iconbtn:hover{border-color:#8ad6a8;color:#0f1f2e}
.app .cnx-danger-link:hover{color:#8f3548}
.app .cnx-input:focus{border-color:#8ad6a8;box-shadow:0 0 0 3px rgba(61,167,124,.16)}
@media (prefers-reduced-motion:reduce){
  .app .cnx-spin{animation:none}
  .app .cnx-flow{animation:none}
}
/* ── Transactions → Reconcile workspace (two-column matcher).
   Static styles live inline as JSX; here: hover/focus states + the responsive column collapse.
   ≥1024px: two balanced columns, segmented switch hidden. <1024px: one column at a time,
   picked by the ClearMint | Bank segmented control (data-mob on the grid). */
.app .rcw-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;min-width:0}
.app .rcw-seg{display:none}
.app .rcw-row:hover{background:#fbfdfb}
.app .rcw-row.rcw-row-sel:hover{background:#eaf7ef}
.app .rcw-row:focus-visible{outline:2px solid #2a8862;outline-offset:-2px}
.app .rcw-chip:hover{border-color:#8ad6a8}
.app .rcw-mini:hover{border-color:#8ad6a8;background:#f0faf4}
@media (max-width:1023px){
  .app .rcw-seg{display:inline-flex}
  .app .rcw-cols{grid-template-columns:1fr}
  .app .rcw-cols[data-mob="left"] .rcw-col-right{display:none!important}
  .app .rcw-cols[data-mob="right"] .rcw-col-left{display:none!important}
}
/* ── Balance Report print stylesheet.
   The report view (BalanceReportView, js/app.jsx) is a portal directly under <body> and
   toggles body.cm-balrep-open while it is on screen. Printing then hides every other
   direct child of <body> and lets the report flow naturally across pages: clean white
   background, black text, no glass/blur, no action bar, no clipped fixed viewport. */
@media print{
  body.cm-balrep-open > *:not(.cm-balrep){display:none!important}
  body.cm-balrep-open .cm-balrep{
    position:static!important;inset:auto!important;overflow:visible!important;
    padding:0!important;background:#fff!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important
  }
  body.cm-balrep-open .cm-balrep-actions{display:none!important}
  body.cm-balrep-open .cm-balrep-sheet{
    max-width:none!important;margin:0!important;padding:0!important;
    background:#fff!important;border:none!important;border-radius:0!important;box-shadow:none!important;
    color:#000!important
  }
  body.cm-balrep-open .cm-balrep-sheet *{color:#000!important;text-shadow:none!important;box-shadow:none!important}
  body.cm-balrep-open .cm-balrep table{page-break-inside:auto}
  body.cm-balrep-open .cm-balrep tr{page-break-inside:avoid}
  body.cm-balrep-open .cm-balrep-bucket{page-break-inside:auto}
  body.cm-balrep-open .cm-balrep-bucket h3{page-break-after:avoid}
}