:root {
  --demo-navy: #0a2742;
  --demo-navy-deep: #061a2d;
  --demo-navy-soft: #173b59;
  --demo-gold: #dca43a;
  --demo-gold-light: #f0c76c;
  --demo-cream: #f3f0e8;
  --demo-paper: #fbfaf6;
  --demo-white: #ffffff;
  --demo-ink: #10202c;
  --demo-muted: #66717a;
  --demo-line: rgba(10, 39, 66, 0.15);
  --demo-green: #24745a;
  --demo-red: #a73f42;
  --demo-orange: #a46516;
  --demo-serif: Georgia, "Times New Roman", serif;
  --demo-sans: "Segoe UI", Arial, sans-serif;
  --demo-shadow: 0 28px 80px rgba(6, 26, 45, 0.14);
  --color-bg: #f6f7f8;
  --color-surface: #ffffff;
  --color-surface-muted: #eef2f4;
  --color-ink: #0b2239;
  --color-text: #243746;
  --color-text-muted: #657786;
  --color-border: rgba(11, 34, 57, 0.14);
  --color-accent: #d99a24;
  --color-positive: #19704f;
  --color-negative: #a43a40;
  --color-warning: #a6680d;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(11, 34, 57, 0.06), 0 8px 24px rgba(11, 34, 57, 0.05);
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 36px;
}

/* NOVA information architecture and financial visual system */
.demo-app-body { background: var(--color-bg); color: var(--color-text); }
.demo-app-sidebar nav { gap: 2px; }
.demo-app-sidebar nav a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
  padding: 7px 12px;
  border-left: 3px solid transparent;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .76rem;
  font-weight: 650;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.demo-app-sidebar nav a span { color: rgba(255,255,255,.36); font-size: .62rem; letter-spacing: .08em; }
.demo-app-sidebar nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.demo-app-sidebar nav a.active { color: #fff; border-left-color: var(--color-accent); background: rgba(255,255,255,.1); }
.demo-app-sidebar nav a:focus-visible,
.demo-link-action:focus-visible,
.demo-analysis-link-grid a:focus-visible,
.demo-breadcrumb:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.demo-nav-group { margin: 17px 12px 5px; color: rgba(255,255,255,.4); font-size: .59rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.demo-page-description { display: block; max-width: 720px; margin-top: 8px; color: var(--color-text-muted); font-size: .92rem; }
.demo-breadcrumb { color: var(--color-accent); text-decoration: none; }

.demo-panel { border-color: var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.demo-analytics-center { display: grid; gap: 36px; }
.demo-analytics-center > section { display: grid; grid-template-columns: minmax(190px,.42fr) minmax(0,1.58fr); gap: 28px; padding-bottom: 32px; border-bottom: 1px solid var(--color-border); }
.demo-analysis-category span,
.demo-definition-hub-card > div > span { color: var(--color-accent); font-size: .68rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.demo-analysis-category p { max-width: 270px; margin: 8px 0 0; color: var(--color-text-muted); font-size: .82rem; }
.demo-analysis-link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.demo-analysis-link-grid a { display: grid; gap: 8px; min-height: 136px; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-surface); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .16s ease, border-color .16s ease; }
.demo-analysis-link-grid a:hover { transform: translateY(-2px); border-color: rgba(217,154,36,.65); }
.demo-analysis-link-grid a > span { color: var(--color-ink); font-family: var(--demo-serif); font-size: 1.25rem; font-weight: 700; }
.demo-analysis-link-grid a strong { font-size: .82rem; font-weight: 600; }
.demo-analysis-link-grid a i { align-self: end; color: var(--color-accent); font-size: .72rem; font-style: normal; font-weight: 800; text-transform: uppercase; }

.demo-definition-center-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.demo-definition-hub-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.demo-definition-hub-card h2 { margin: 6px 0; color: var(--color-ink); font-family: var(--demo-serif); }
.demo-definition-hub-card p { max-width: 560px; margin: 0; color: var(--color-text-muted); font-size: .84rem; }
.demo-link-action { color: var(--color-accent); font-size: .76rem; font-weight: 800; text-decoration: none; white-space: nowrap; }

.demo-ledger-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 18px 0 14px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-border); }
.demo-ledger-summary > div { display: grid; gap: 4px; padding: 16px 18px; background: var(--color-surface); }
.demo-ledger-summary span { color: var(--color-text-muted); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.demo-ledger-summary strong { color: var(--color-ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.demo-ledger-summary small { color: var(--color-text-muted); font-size: .68rem; }

.demo-table-wrap,
.demo-cash-report-scroll { overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.demo-table,
.demo-cash-report-table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.demo-table thead th,
.demo-cash-report-table thead th { position: sticky; top: 0; z-index: 2; color: var(--color-text-muted); background: #f3f6f7; box-shadow: inset 0 -1px var(--color-border); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }
.demo-table tbody tr,
.demo-cash-report-table tbody tr { transition: background .14s ease; }
.demo-table tbody tr:hover,
.demo-cash-report-table tbody tr:hover { background: rgba(217,154,36,.055); }
.demo-table td,
.demo-cash-report-table td { border-bottom-color: rgba(11,34,57,.08); }
.demo-table td:nth-last-child(n+3):not(:first-child),
.demo-cash-report-table td { font-variant-numeric: tabular-nums; }
.demo-cash-report-table th:first-child { position: sticky; left: 0; z-index: 3; background: #fff; }
.demo-cash-report-table thead th:first-child { z-index: 4; background: #f3f6f7; }
.demo-cash-report-section th { color: var(--color-ink); background: var(--color-surface-muted) !important; }

.demo-visual-first-panel { overflow: hidden; }

.demo-heatmap-grid { display: grid; grid-template-columns: minmax(100px,1.2fr) repeat(var(--months),minmax(72px,1fr)); gap: 5px; align-items: stretch; }
.demo-heatmap-grid > b { padding: 5px; color: var(--color-text-muted); font-size: .65rem; text-align: center; text-transform: uppercase; }
.demo-heatmap-grid > strong { display: flex; align-items: center; color: var(--color-ink); font-size: .74rem; }
.demo-heatmap-grid > i { display: grid; min-height: 52px; place-items: center; border-radius: var(--radius-sm); color: color-mix(in srgb, var(--color-ink) 80%, white); background: color-mix(in srgb, var(--color-accent) calc(var(--intensity) * 75%), #f3f6f7); font-style: normal; }
.demo-heatmap-grid > i span { font-size: .7rem; font-weight: 800; }

.demo-breakeven-matrix { display: grid; grid-template-columns: repeat(6,minmax(118px,1fr)); gap: 9px; }
.demo-breakeven-matrix article { display: grid; gap: 5px; min-height: 132px; padding: 14px; border: 1px solid var(--color-border); border-top: 4px solid var(--color-positive); border-radius: var(--radius-sm); background: var(--color-surface); }
.demo-breakeven-matrix article[data-status="monitor"],
.demo-breakeven-matrix article[data-status="critical"] { border-top-color: var(--color-warning); background: rgba(166,104,13,.045); }
.demo-breakeven-matrix article[data-status="below"] { border-top-color: var(--color-negative); background: rgba(164,58,64,.045); }
.demo-breakeven-matrix article[data-status="no-data"] { border-top-color: var(--color-border); opacity: .68; }
.demo-breakeven-matrix span { color: var(--color-text-muted); font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.demo-breakeven-matrix strong { color: var(--color-ink); font-size: .88rem; font-variant-numeric: tabular-nums; }
.demo-breakeven-matrix small { color: var(--color-text-muted); font-size: .66rem; }
.demo-breakeven-matrix b { margin-top: auto; font-size: .76rem; font-variant-numeric: tabular-nums; }
.demo-breakeven-matrix em { color: var(--color-text-muted); font-size: .62rem; font-style: normal; }

.demo-financial-waterfall { display: grid; grid-template-columns: repeat(7,minmax(92px,1fr)); gap: 12px; min-height: 240px; align-items: end; overflow-x: auto; padding: 18px 8px 4px; }
.demo-waterfall-step { display: grid; gap: 7px; min-width: 92px; text-align: center; }
.demo-waterfall-step > div { display: flex; height: 140px; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--color-border); }
.demo-waterfall-step i { display: block; width: 72%; height: var(--height); min-height: 5px; border-radius: 5px 5px 0 0; background: var(--color-positive); }
.demo-waterfall-step[data-kind="negative"] i { background: var(--color-negative); }
.demo-waterfall-step[data-kind="balance"] i { background: var(--color-ink); }
.demo-waterfall-step strong { color: var(--color-ink); font-size: .76rem; font-variant-numeric: tabular-nums; }
.demo-waterfall-step span { color: var(--color-text-muted); font-size: .66rem; }

.demo-warning { border-radius: var(--radius-sm); background: #fff; box-shadow: inset 4px 0 var(--color-warning); }
.demo-warning[data-level="critical"] { background: rgba(164,58,64,.055); box-shadow: inset 4px 0 var(--color-negative); }
.demo-warning[data-level="positive"] { background: rgba(25,112,79,.055); box-shadow: inset 4px 0 var(--color-positive); }
.demo-scenario-comparison { align-items: stretch; }
.demo-scenario-card { border-radius: var(--radius-md); }
.demo-scenario-card.highlight { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.demo-panel-action-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.demo-secondary-button,
.demo-panel-action-button { border-radius: var(--radius-sm); }
.demo-app-body button:focus-visible,
.demo-app-body input:focus-visible,
.demo-app-body select:focus-visible,
.demo-app-body summary:focus-visible { outline: 3px solid rgba(217,154,36,.45); outline-offset: 2px; }

@media (max-width: 1100px) {
  .demo-app-sidebar nav { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .demo-app-sidebar nav a { min-width: max-content; grid-template-columns: 22px auto; border-left: 0; border-bottom: 3px solid transparent; }
  .demo-app-sidebar nav a.active { border-bottom-color: var(--color-accent); }
  .demo-nav-group { display: none; }
  .demo-analytics-center > section { grid-template-columns: 1fr; }
  .demo-analysis-category p { max-width: none; }
}
@media (max-width: 760px) {
  .demo-analysis-link-grid,
  .demo-definition-center-grid,
  .demo-ledger-summary { grid-template-columns: 1fr; }
  .demo-definition-hub-card { align-items: flex-start; flex-direction: column; }
  .demo-visual-first-panel { overflow-x: auto; }
  .demo-heatmap-grid { min-width: 620px; }
  .demo-breakeven-matrix { grid-template-columns: repeat(2,minmax(118px,1fr)); }
}

.demo-login-section {
  min-height: calc(100vh - 84px);
  padding: 76px 0 92px;
  background:
    radial-gradient(circle at 12% 25%, rgba(220, 164, 58, 0.11), transparent 28%),
    linear-gradient(135deg, var(--demo-paper) 0 62%, var(--demo-cream) 62% 100%);
}

.demo-business-choice {
  display: contents;
}

.demo-no-business-state {
  max-width: 760px;
  margin: 10vh auto;
  padding: 54px;
  border: 1px solid var(--demo-line);
  background: #fff;
  box-shadow: var(--demo-shadow);
}

.demo-no-business-state p,
.demo-user-business-access legend {
  color: var(--demo-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.demo-no-business-state h1 { color: var(--demo-navy-deep); font-family: var(--demo-serif); }
.demo-no-business-state span { color: var(--demo-muted); }

.demo-user-business-access { margin: 22px 0; padding: 18px; border: 1px solid var(--demo-line); }
.demo-user-business-access legend { padding: 0 8px; }
.demo-user-business-access > div { display: grid; gap: 10px; }
.demo-business-access-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; gap: 14px; }
.demo-business-access-row > span { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.demo-business-access-row select { min-height: 40px; }
.demo-business-access-badge { display: inline-flex; flex-direction: column; margin: 2px 6px 2px 0; padding: 5px 8px; border: 1px solid var(--demo-line); }
.demo-business-access-badge small { color: var(--demo-muted); font-size: 0.62rem; }

.demo-login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  align-items: center;
  gap: 100px;
}

.demo-login-copy h1 {
  max-width: 800px;
  margin: 0;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(2.65rem, 5.4vw, 5.35rem);
  font-weight: 600;
  line-height: 0.99;
  letter-spacing: -0.055em;
}

.demo-login-lead {
  max-width: 680px;
  margin: 30px 0 42px;
  color: #42515d;
  font-size: 1.08rem;
  line-height: 1.8;
}

.demo-feature-list {
  display: grid;
  border-top: 1px solid var(--demo-line);
}

.demo-feature-list article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 19px 0;
  border-bottom: 1px solid var(--demo-line);
}

.demo-feature-list article > span {
  padding-top: 3px;
  color: var(--demo-gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.demo-feature-list h2 {
  margin: 0 0 4px;
  color: var(--demo-navy);
  font-size: 0.98rem;
}

.demo-feature-list p {
  margin: 0;
  color: var(--demo-muted);
  font-size: 0.87rem;
  line-height: 1.6;
}

.demo-login-card {
  position: relative;
  padding: 44px;
  border: 1px solid var(--demo-line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--demo-shadow);
}

.demo-login-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--demo-gold), var(--demo-gold-light));
  content: "";
}

.demo-login-mark,
.demo-app-brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  margin-bottom: 24px;
  border: 2px solid var(--demo-navy);
  border-radius: 50%;
}

.demo-login-mark::after,
.demo-app-brand-mark::after {
  position: absolute;
  inset: 9px;
  border: 2px solid var(--demo-gold);
  border-radius: 50%;
  content: "";
}

.demo-login-mark i,
.demo-app-brand-mark i {
  position: absolute;
  top: 50%;
  right: -5px;
  width: 11px;
  height: 2px;
  background: var(--demo-navy);
}

.demo-card-kicker {
  margin: 0 0 9px;
  color: var(--demo-gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.demo-card-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin: 0 0 9px;
  color: var(--demo-gold);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}

.demo-card-credentials strong {
  color: var(--demo-navy);
  font-weight: 800;
}

.demo-login-card h2 {
  margin: 0;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.12;
}

.demo-login-card > p:not(.demo-card-kicker):not(.demo-card-credentials):not(.demo-security-note) {
  margin: 14px 0 28px;
  color: var(--demo-muted);
  font-size: 0.9rem;
}

.demo-login-form {
  display: grid;
  gap: 18px;
}

.demo-login-form label,
.demo-dialog label {
  display: grid;
  gap: 7px;
}

.demo-login-form label > span,
.demo-dialog label > span {
  color: var(--demo-navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-login-form input,
.demo-dialog input,
.demo-dialog select {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--demo-line);
  border-radius: 0;
  color: var(--demo-ink);
  background: var(--demo-paper);
  font: inherit;
}

.demo-login-form input:focus,
.demo-dialog input:focus,
.demo-dialog select:focus {
  border-color: var(--demo-gold);
  outline: 2px solid rgba(220, 164, 58, 0.18);
}

.demo-form-error {
  margin: -4px 0 0;
  padding: 11px 13px;
  color: #7e2528;
  background: #fff0f0;
  font-size: 0.82rem;
}

.demo-login-submit {
  width: 100%;
  margin-top: 2px;
  border: 0;
  cursor: pointer;
}

.demo-login-submit b {
  color: var(--demo-gold);
}

.demo-login-submit[aria-busy="true"] {
  opacity: 0.7;
  cursor: wait;
}

.demo-security-note {
  margin: 22px 0 0;
  color: var(--demo-muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

.demo-security-note span {
  margin-right: 7px;
  color: var(--demo-green);
}

/* Application */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.demo-app-body {
  min-width: 320px;
  margin: 0;
  color: var(--demo-ink);
  background: #f3f5f5;
  font-family: var(--demo-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.demo-app-body button,
.demo-app-body input,
.demo-app-body select {
  font: inherit;
}

.demo-app-body button,
.demo-app-body a {
  -webkit-tap-highlight-color: transparent;
}

.demo-app-body button {
  cursor: pointer;
}

.demo-app-body a {
  color: inherit;
  text-decoration: none;
}

.demo-app-body :focus-visible {
  outline: 3px solid var(--demo-gold);
  outline-offset: 3px;
}

.demo-skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 15px;
  color: white;
  background: var(--demo-navy);
  transform: translateY(-180%);
}

.demo-skip-link:focus {
  transform: translateY(0);
}

.demo-app-topbar {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: 270px minmax(510px, 0.9fr) minmax(200px, 1.1fr) auto;
  min-height: 76px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  color: white;
  background: var(--demo-navy-deep);
}

.demo-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.demo-app-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 26px;
}

.demo-app-brand-mark {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: 0;
  border-color: white;
}

.demo-app-brand-mark i {
  background: white;
}

.demo-app-brand strong,
.demo-app-brand small {
  display: block;
}

.demo-app-brand strong {
  font-family: var(--demo-serif);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.demo-app-brand small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-business-switcher {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
}

.demo-business-switcher button {
  white-space: nowrap;
}

.demo-business-switcher label {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-business-switcher select {
  min-width: 210px;
  padding: 9px 34px 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  background: var(--demo-navy-soft);
}

.demo-business-switcher button,
.demo-logout {
  padding: 9px 12px;
  border: 0;
  color: var(--demo-gold-light);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-fx-ticker {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.demo-fx-meta {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  padding: 8px 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}

.demo-fx-meta strong {
  color: var(--demo-gold-light);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.11em;
}

.demo-fx-meta small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.55rem;
  white-space: nowrap;
}

.demo-fx-viewport {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

.demo-fx-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: demo-fx-scroll 34s linear infinite;
  will-change: transform;
}

.demo-fx-ticker:hover .demo-fx-track {
  animation-play-state: paused;
}

.demo-fx-group {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0 30px 0 14px;
}

.demo-fx-rate {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: white;
  white-space: nowrap;
}

.demo-fx-rate > strong {
  color: var(--demo-gold-light);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
}

.demo-fx-rate > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.demo-fx-rate i {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.52rem;
  font-style: normal;
  text-transform: uppercase;
}

.demo-fx-rate b {
  font-size: 0.67rem;
  font-weight: 750;
}

.demo-fx-loading {
  padding: 0 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.64rem;
  white-space: nowrap;
}

@keyframes demo-fx-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.demo-app-topbar > form {
  padding-right: 22px;
}

.demo-logout span {
  margin-left: 7px;
}

.demo-app-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: calc(100vh - 76px);
}

.demo-app-sidebar {
  position: sticky;
  top: 76px;
  display: flex;
  height: calc(100vh - 76px);
  flex-direction: column;
  justify-content: flex-start;
  padding: 28px 20px 24px;
  color: white;
  background: var(--demo-navy);
  overflow-y: auto;
}

.demo-app-sidebar nav {
  display: grid;
  gap: 4px;
}

.demo-app-sidebar nav button {
  display: grid;
  grid-template-columns: 29px 1fr;
  align-items: center;
  width: 100%;
  padding: 12px 13px;
  border: 0;
  color: rgba(255, 255, 255, 0.68);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: left;
  transition: color 160ms ease, background-color 160ms ease;
}

.demo-app-sidebar nav button span {
  color: var(--demo-gold);
  font-size: 0.61rem;
  letter-spacing: 0.1em;
}

.demo-app-sidebar nav button:hover,
.demo-app-sidebar nav button.active {
  color: white;
  background: rgba(255, 255, 255, 0.09);
}

.demo-sidebar-user {
  display: grid;
  gap: 3px;
  margin: 18px 8px 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

.demo-sidebar-user span {
  color: var(--demo-gold-light);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-sidebar-user strong {
  color: white;
  font-size: 0.76rem;
}

.demo-sidebar-user small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
}

.demo-sidebar-note {
  margin: auto 8px 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.demo-sidebar-note span {
  color: var(--demo-gold-light);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.demo-sidebar-note p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.7rem;
  line-height: 1.55;
}

.demo-app-main {
  width: min(100%, 1450px);
  padding: 46px clamp(28px, 4vw, 64px) 80px;
}

.demo-view[hidden] {
  display: none;
}

.demo-view-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}

.demo-view-heading p {
  margin: 0 0 7px;
  color: var(--demo-gold);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.demo-view-heading h1 {
  margin: 0;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(2rem, 3vw, 3.15rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.demo-view-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.demo-export-menu {
  position: relative;
  z-index: 25;
  flex: 0 0 auto;
}

.demo-export-menu summary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: white;
  cursor: pointer;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  list-style: none;
}

.demo-export-menu summary::-webkit-details-marker {
  display: none;
}

.demo-export-menu[open] summary,
.demo-export-menu summary:hover,
.demo-export-menu summary:focus-visible {
  border-color: var(--demo-gold);
  outline: none;
}

.demo-export-menu summary span {
  color: var(--demo-gold);
}

.demo-export-card {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(330px, calc(100vw - 40px));
  padding: 10px;
  border: 1px solid var(--demo-line);
  background: white;
  box-shadow: var(--demo-shadow);
}

.demo-export-card button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 0;
  color: var(--demo-navy-deep);
  background: transparent;
  text-align: left;
}

.demo-export-card button:hover {
  background: var(--demo-paper);
}

.demo-export-card button span,
.demo-export-card button strong,
.demo-export-card button small {
  display: block;
}

.demo-export-card button strong {
  font-size: 0.72rem;
}

.demo-export-card button small {
  margin-top: 3px;
  color: var(--demo-muted);
  font-size: 0.62rem;
}

.demo-export-card button i {
  color: var(--demo-gold);
  font-style: normal;
}

.demo-export-card > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 0;
  padding: 12px;
  border-top: 1px solid var(--demo-line);
  color: var(--demo-muted);
  font-size: 0.61rem;
}

.demo-export-card > p strong {
  color: var(--demo-navy-deep);
  text-align: right;
}

.demo-page-tip {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
}

.demo-page-tip summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 9px 7px 12px;
  color: var(--demo-navy-deep);
  background: color-mix(in srgb, var(--demo-gold) 12%, white);
  border: 1px solid color-mix(in srgb, var(--demo-gold) 52%, white);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  list-style: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  user-select: none;
}

.demo-page-tip summary::-webkit-details-marker {
  display: none;
}

.demo-page-tip summary i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: white;
  background: var(--demo-gold);
  border-radius: 50%;
  font-family: var(--demo-sans);
  font-size: 0.68rem;
  font-style: normal;
}

.demo-page-tip summary:hover,
.demo-page-tip summary:focus-visible,
.demo-page-tip[open] summary {
  border-color: var(--demo-gold);
  box-shadow: 0 7px 20px rgba(10, 39, 66, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.demo-page-tip-card {
  position: absolute;
  top: calc(100% + 11px);
  right: 0;
  display: none;
  width: min(370px, calc(100vw - 48px));
  padding: 20px 21px 18px;
  color: var(--demo-navy-deep);
  background: white;
  border: 1px solid var(--demo-border);
  border-top: 3px solid var(--demo-gold);
  box-shadow: 0 20px 55px rgba(10, 39, 66, 0.18);
  text-align: left;
}

.demo-page-tip-card::before {
  position: absolute;
  top: -8px;
  right: 18px;
  width: 13px;
  height: 13px;
  background: var(--demo-gold);
  content: "";
  transform: rotate(45deg);
}

.demo-page-tip[open] .demo-page-tip-card,
.demo-page-tip:hover .demo-page-tip-card,
.demo-page-tip summary:focus-visible + .demo-page-tip-card {
  display: block;
  animation: demo-tip-in 150ms ease-out;
}

.demo-page-tip-card strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--demo-serif);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.2;
}

.demo-page-tip-card p {
  margin: 0;
  color: var(--demo-ink);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.65;
  text-transform: none;
}

.demo-page-tip-card ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 12px 0 0 17px;
  border-top: 1px solid var(--demo-border);
  color: var(--demo-muted);
  font-size: 0.71rem;
  line-height: 1.55;
}

.demo-page-tip-card li::marker {
  color: var(--demo-gold);
}

@keyframes demo-tip-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.demo-view-help,
.demo-period-filter {
  color: var(--demo-muted);
  font-size: 0.72rem;
}

.demo-period-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.demo-period-filter select {
  padding: 9px 34px 9px 11px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy);
  background: white;
}

.demo-section-tabs {
  display: flex;
  gap: 5px;
  margin: -4px 0 24px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--demo-navy) 24%, white);
  background: color-mix(in srgb, var(--demo-navy) 6%, white);
  box-shadow: 0 8px 20px rgba(10, 39, 66, 0.045);
}

.demo-section-tabs button {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: white;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.demo-section-tabs button:hover {
  border-color: var(--demo-gold);
  color: var(--demo-navy-deep);
  background: color-mix(in srgb, var(--demo-gold) 10%, white);
  transform: translateY(-1px);
}

.demo-section-tabs button.active {
  border-color: var(--demo-navy);
  color: white;
  background: var(--demo-navy);
  box-shadow: inset 0 -3px 0 var(--demo-gold);
}

.demo-analysis-panel[hidden],
[data-cash-tab-panel][hidden] {
  display: none;
}

.demo-analysis-panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 30px 0 18px;
}

.demo-analysis-panel-heading span {
  display: block;
  margin-bottom: 5px;
  color: var(--demo-gold);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-analysis-panel-heading h2 {
  margin: 0;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  font-weight: 600;
}

.demo-analysis-panel-heading small {
  color: var(--demo-muted);
  font-size: 0.65rem;
}

.demo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-kpi-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-kpi-grid-management {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.demo-kpi-grid.demo-kpi-grid-management article {
  padding: 21px 19px;
}

.demo-kpi-grid.demo-kpi-grid-management strong {
  overflow: visible;
  font-size: clamp(1.2rem, 1.7vw, 1.65rem);
  text-overflow: clip;
  white-space: nowrap;
}

.demo-kpi-grid article {
  min-width: 0;
  padding: 23px 25px;
  border-right: 1px solid var(--demo-line);
}

.demo-kpi-grid article:last-child {
  border-right: 0;
}

.demo-kpi-grid article > span,
.demo-breakeven-result > span {
  display: block;
  margin-bottom: 9px;
  color: var(--demo-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-kpi-grid strong {
  display: block;
  overflow: hidden;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.45rem, 2.3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-kpi-grid small {
  display: block;
  margin-top: 8px;
  color: #8a9399;
  font-size: 0.66rem;
}

.demo-kpi-grid .demo-kpi-emphasis {
  color: white;
  background: var(--demo-navy);
}

.demo-kpi-grid .demo-kpi-emphasis span,
.demo-kpi-grid .demo-kpi-emphasis small {
  color: rgba(255, 255, 255, 0.62);
}

.demo-kpi-grid .demo-kpi-emphasis strong {
  color: white;
}

.demo-overview-grid,
.demo-breakeven-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 22px;
  margin-bottom: 22px;
}

.demo-breakeven-grid {
  grid-template-columns: 1fr 1fr;
}

.demo-panel {
  min-width: 0;
  padding: 27px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 23px;
}

.demo-panel-heading span,
.demo-formula-card > span,
.demo-privacy-card > span {
  display: block;
  margin-bottom: 4px;
  color: var(--demo-gold);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-panel-heading h2,
.demo-report-grid h2,
.demo-privacy-card h2 {
  margin: 0;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}

.demo-panel-heading small {
  color: var(--demo-muted);
  font-size: 0.65rem;
}

.demo-bar-chart {
  display: flex;
  min-height: 230px;
  align-items: end;
  gap: clamp(12px, 2vw, 27px);
  padding: 15px 6px 0;
  border-bottom: 1px solid var(--demo-line);
}

.demo-chart-column {
  display: grid;
  flex: 1;
  justify-items: center;
  gap: 7px;
}

.demo-chart-bars {
  display: flex;
  height: 170px;
  align-items: end;
  gap: 4px;
}

.demo-chart-bars i {
  display: block;
  width: clamp(12px, 1.7vw, 21px);
  min-height: 3px;
  background: var(--demo-navy);
}

.demo-chart-bars i:last-child {
  background: var(--demo-gold);
}

.demo-chart-column > span {
  color: var(--demo-muted);
  font-size: 0.61rem;
}

.demo-warning-list {
  display: grid;
  gap: 10px;
}

.demo-warning {
  padding: 14px;
  border-left: 3px solid var(--demo-orange);
  background: #fff8ec;
}

.demo-warning[data-level="critical"] {
  border-left-color: var(--demo-red);
  background: #fff2f2;
}

.demo-warning[data-level="positive"] {
  border-left-color: var(--demo-green);
  background: #eff9f5;
}

.demo-warning[data-level="neutral"] {
  border-left-color: var(--demo-navy);
  background: #f2f6f8;
}

.demo-warning strong,
.demo-warning p {
  display: block;
}

.demo-warning strong {
  color: var(--demo-navy);
  font-size: 0.77rem;
}

.demo-warning p {
  margin: 4px 0 9px;
  color: var(--demo-muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-warning-actions {
  display: flex;
  gap: 8px;
}

.demo-warning-actions button {
  padding: 4px 8px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy);
  background: white;
  font-size: 0.61rem;
  font-weight: 700;
}

.demo-warning-actions button.selected {
  color: white;
  background: var(--demo-navy);
}

.demo-expense-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.demo-expense-bar span,
.demo-expense-bar strong {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.69rem;
}

.demo-expense-bar span {
  color: var(--demo-muted);
}

.demo-expense-bar strong {
  margin-top: 5px;
  color: var(--demo-navy);
}

.demo-expense-bar i {
  display: block;
  height: 5px;
  margin-top: 10px;
  background: var(--demo-cream);
  overflow: hidden;
}

.demo-expense-bar i::after {
  display: block;
  width: var(--bar-width, 0%);
  height: 100%;
  background: var(--demo-gold);
  content: "";
}

.demo-monthly-spend-summary {
  margin-top: 22px;
}

.demo-monthly-spend-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0;
  border: 1px solid var(--demo-line);
}

.demo-monthly-spend-kpis > div {
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--demo-line);
}

.demo-monthly-spend-kpis > div:last-child { border-right: 0; }
.demo-monthly-spend-kpis span,
.demo-monthly-spend-kpis strong { display: block; }

.demo-monthly-spend-kpis span {
  color: var(--demo-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.demo-monthly-spend-kpis strong {
  overflow: hidden;
  margin-top: 8px;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-monthly-spend-summary > p {
  margin: 0 0 15px;
  color: var(--demo-navy-deep);
  font-size: 0.8rem;
  line-height: 1.6;
}

.demo-monthly-spend-list { display: grid; }

.demo-monthly-spend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 15px;
  padding: 12px 0;
  border-top: 1px solid var(--demo-line);
}

.demo-monthly-spend-row > div { min-width: 0; }
.demo-monthly-spend-row span,
.demo-monthly-spend-row small { display: block; }

.demo-monthly-spend-row span {
  overflow: hidden;
  color: var(--demo-navy-deep);
  font-size: 0.74rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-monthly-spend-row small {
  margin-top: 4px;
  color: var(--demo-muted);
  font-size: 0.61rem;
  line-height: 1.45;
}

.demo-monthly-spend-row > strong {
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.demo-monthly-spend-row > i {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  overflow: hidden;
  background: #edf1f4;
}

.demo-monthly-spend-row > i > b {
  display: block;
  height: 100%;
  background: var(--demo-gold);
}

.demo-expense-control-copy {
  max-width: 780px;
  margin: 0 0 21px;
  color: var(--demo-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.demo-expense-control-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 22px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-expense-control-inputs > div {
  min-width: 0;
  padding: 16px 19px;
  border-right: 1px solid var(--demo-line);
}

.demo-expense-control-inputs > div:nth-child(3) {
  border-right: 0;
}

.demo-expense-control-inputs span,
.demo-expense-control-inputs strong,
.demo-expense-control-inputs small {
  display: block;
}

.demo-expense-control-inputs span {
  margin-bottom: 6px;
  color: var(--demo-muted);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.demo-expense-control-inputs strong {
  overflow: hidden;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-expense-control-inputs small {
  margin-top: 5px;
  color: var(--demo-muted);
  font-size: 0.58rem;
}

.demo-expense-control-inputs > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 11px 19px;
  border-top: 1px solid var(--demo-line);
  color: var(--demo-muted);
  background: var(--demo-cream-soft);
  font-size: 0.67rem;
  line-height: 1.55;
}

.demo-expense-control-inputs code {
  color: var(--demo-navy);
  font-family: inherit;
  font-weight: 800;
}

.demo-expense-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-expense-control-grid article {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid var(--demo-line);
}

.demo-expense-control-grid article:last-child {
  border-right: 0;
}

.demo-expense-control-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.demo-expense-control-card-heading > span {
  color: var(--demo-muted);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-expense-control-card-heading i {
  flex: 0 0 auto;
  padding: 4px 6px;
  color: var(--demo-muted);
  background: var(--demo-paper);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-expense-control-grid article[data-status="improving"] .demo-expense-control-card-heading i {
  color: #176a50;
  background: #eff9f5;
}

.demo-expense-control-grid article[data-status="monitor"] .demo-expense-control-card-heading i {
  color: #8b5b08;
  background: #fff8ec;
}

.demo-expense-control-grid article[data-status="no-data"] .demo-expense-control-card-heading i {
  color: var(--demo-muted);
}

.demo-expense-control-grid > article > strong {
  display: block;
  overflow: hidden;
  margin-top: 15px;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.35rem, 2.2vw, 2.05rem);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-expense-control-grid p {
  margin: 8px 0 16px;
  color: var(--demo-muted);
  font-size: 0.69rem;
}

.demo-expense-control-grid p b {
  color: var(--demo-navy);
  font-weight: 800;
}

.demo-expense-control-grid dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.demo-expense-control-grid dl > div {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--demo-line);
}

.demo-expense-control-grid dt,
.demo-expense-control-grid dd {
  margin: 0;
  color: var(--demo-muted);
  font-size: 0.62rem;
}

.demo-expense-control-grid dd {
  color: var(--demo-navy);
  font-weight: 800;
  text-align: right;
}

.demo-expense-control-note {
  margin-top: 22px;
  padding-block: 20px;
  background: var(--demo-cream-soft);
}

.demo-expense-control-note > span {
  display: block;
  margin-bottom: 6px;
  color: var(--demo-gold);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-expense-control-note p {
  max-width: 900px;
  margin: 0;
  color: var(--demo-muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

.demo-ytd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-ytd-kpi-grid article {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid var(--demo-line);
}

.demo-ytd-kpi-grid article:last-child {
  border-right: 0;
}

.demo-ytd-kpi-grid span,
.demo-ytd-kpi-grid strong,
.demo-ytd-kpi-grid small {
  display: block;
}

.demo-ytd-kpi-grid span {
  margin-bottom: 8px;
  color: var(--demo-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-ytd-kpi-grid strong {
  overflow: hidden;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-ytd-kpi-grid small {
  margin-top: 7px;
  color: var(--demo-muted);
  font-size: 0.63rem;
}

.demo-ytd-kpi-grid .demo-ytd-kpi-emphasis {
  background: var(--demo-navy);
}

.demo-ytd-kpi-grid .demo-ytd-kpi-emphasis span,
.demo-ytd-kpi-grid .demo-ytd-kpi-emphasis strong,
.demo-ytd-kpi-grid .demo-ytd-kpi-emphasis small {
  color: white;
}

.demo-ytd-kpi-grid .demo-ytd-kpi-emphasis span,
.demo-ytd-kpi-grid .demo-ytd-kpi-emphasis small {
  color: rgba(255, 255, 255, 0.68);
}

.demo-ytd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr);
  gap: 22px;
}

.demo-ytd-stat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--demo-line);
  border-left: 1px solid var(--demo-line);
}

.demo-ytd-stat-list > div {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid var(--demo-line);
  border-bottom: 1px solid var(--demo-line);
}

.demo-ytd-stat-list span,
.demo-ytd-stat-list strong,
.demo-ytd-stat-list small {
  display: block;
}

.demo-ytd-stat-list span {
  margin-bottom: 6px;
  color: var(--demo-muted);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.demo-ytd-stat-list strong {
  overflow: hidden;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: 1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-ytd-stat-list small {
  margin-top: 5px;
  color: var(--demo-muted);
  font-size: 0.61rem;
  line-height: 1.4;
}

.demo-ytd-forecast-panel {
  background: var(--demo-navy);
}

.demo-ytd-forecast-panel .demo-panel-heading h3,
.demo-ytd-forecast-panel .demo-panel-heading span,
.demo-ytd-forecast-panel .demo-panel-heading small {
  color: white;
}

.demo-ytd-forecast-panel .demo-panel-heading span,
.demo-ytd-forecast-panel .demo-panel-heading small {
  color: rgba(255, 255, 255, 0.7);
}

.demo-ytd-forecast-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-ytd-forecast-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-ytd-forecast-grid span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.67rem;
}

.demo-ytd-forecast-grid strong {
  color: white;
  font-family: var(--demo-serif);
  font-size: 1.1rem;
  font-weight: 600;
}

.demo-ytd-forecast-panel > p {
  margin: 17px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
  line-height: 1.55;
}

.demo-ytd-scenarios-panel {
  margin-bottom: 20px;
}

.demo-ytd-scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--demo-line);
}

.demo-ytd-scenarios > article {
  min-width: 0;
  padding: 21px;
  border-right: 1px solid var(--demo-line);
  background: white;
}

.demo-ytd-scenarios > article:last-child { border-right: 0; }

.demo-ytd-scenarios > article[data-scenario="current"] {
  color: white;
  background: var(--demo-navy);
}

.demo-ytd-scenarios > article > span,
.demo-ytd-scenarios > article > small {
  display: block;
}

.demo-ytd-scenarios > article > span {
  color: var(--demo-muted);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.demo-ytd-scenarios > article > strong {
  display: block;
  margin: 11px 0 4px;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  line-height: 1;
}

.demo-ytd-scenarios > article > small {
  color: var(--demo-muted);
  font-size: 0.61rem;
}

.demo-ytd-scenarios > article[data-scenario="current"] > span,
.demo-ytd-scenarios > article[data-scenario="current"] > small,
.demo-ytd-scenarios > article[data-scenario="current"] > p {
  color: rgba(255, 255, 255, 0.7);
}

.demo-ytd-scenarios > article[data-scenario="current"] > strong,
.demo-ytd-scenarios > article[data-scenario="current"] dd { color: white; }

.demo-ytd-scenarios dl {
  display: grid;
  gap: 7px;
  margin: 17px 0;
  padding: 12px 0;
  border-top: 1px solid var(--demo-line);
  border-bottom: 1px solid var(--demo-line);
}

.demo-ytd-scenarios > article[data-scenario="current"] dl { border-color: rgba(255, 255, 255, 0.22); }

.demo-ytd-scenarios dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.demo-ytd-scenarios dt,
.demo-ytd-scenarios dd { margin: 0; }
.demo-ytd-scenarios dt { color: var(--demo-muted); font-size: 0.62rem; }
.demo-ytd-scenarios dd { color: var(--demo-navy-deep); font-size: 0.71rem; font-weight: 800; }
.demo-ytd-scenarios > article[data-scenario="current"] dt { color: rgba(255, 255, 255, 0.7); }

.demo-ytd-scenarios > article > p {
  min-height: 34px;
  margin: 0;
  color: var(--demo-muted);
  font-size: 0.63rem;
  line-height: 1.45;
}

.demo-ytd-scenarios em {
  display: block;
  margin-top: 12px;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 850;
}

.demo-revenue-quality-kpis,
.demo-product-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-revenue-quality-kpis article,
.demo-product-kpis article {
  min-width: 0;
  min-height: 126px;
  padding: 19px;
  border-right: 1px solid var(--demo-line);
}

.demo-revenue-quality-kpis article:last-child,
.demo-product-kpis article:last-child { border-right: 0; }
.demo-revenue-quality-kpis span,
.demo-revenue-quality-kpis small,
.demo-product-kpis span,
.demo-product-kpis small { display: block; }

.demo-revenue-quality-kpis span,
.demo-product-kpis span {
  color: var(--demo-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.demo-revenue-quality-kpis strong,
.demo-product-kpis strong {
  display: block;
  overflow: hidden;
  margin: 12px 0 5px;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-revenue-quality-kpis small,
.demo-product-kpis small {
  color: var(--demo-muted);
  font-size: 0.6rem;
  line-height: 1.35;
}

.demo-product-reconciliation { margin-top: 20px; }

.demo-product-reconciliation-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 24px minmax(150px, 1fr) 24px minmax(150px, 1fr) 24px minmax(150px, 1fr);
  align-items: center;
  gap: 8px;
}

.demo-product-reconciliation-grid > div {
  min-width: 0;
  padding: 15px;
  background: var(--demo-paper);
}

.demo-product-reconciliation-grid span,
.demo-product-reconciliation-grid strong { display: block; }
.demo-product-reconciliation-grid span { color: var(--demo-muted); font-size: 0.62rem; font-weight: 800; }
.demo-product-reconciliation-grid strong { margin-top: 7px; color: var(--demo-navy-deep); font-family: var(--demo-serif); font-size: 1.15rem; }
.demo-product-reconciliation-grid i { color: var(--demo-gold); font-style: normal; font-weight: 900; text-align: center; }
.demo-product-reconciliation > p { margin: 16px 0 0; color: var(--demo-muted); font-size: 0.7rem; }

.demo-revenue-quality-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 20px;
  margin-bottom: 20px;
}

.demo-revenue-quality-composition { display: grid; gap: 15px; }

.demo-revenue-quality-bar > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.demo-revenue-quality-bar span {
  overflow: hidden;
  color: var(--demo-navy-deep);
  font-size: 0.75rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-revenue-quality-bar strong {
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.demo-revenue-quality-bar strong small {
  color: var(--demo-muted);
  font-family: var(--demo-sans);
  font-size: 0.62rem;
}

.demo-revenue-quality-bar i {
  display: block;
  height: 8px;
  overflow: hidden;
  background: #edf1f4;
}

.demo-revenue-quality-bar b {
  display: block;
  height: 100%;
  background: var(--demo-gold);
}

.demo-revenue-quality-insight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 4px solid var(--demo-gold);
}

.demo-revenue-quality-insight > span {
  color: var(--demo-gold);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-revenue-quality-insight p {
  margin: 10px 0 0;
  color: var(--demo-navy-deep);
  font-size: 0.84rem;
  line-height: 1.65;
}

.demo-management-summary {
  margin-bottom: 22px;
}

.demo-management-summary-copy {
  max-width: 900px;
  margin: -6px 0 20px;
  color: var(--demo-muted);
  font-size: 0.79rem;
  line-height: 1.65;
}

.demo-management-narrative {
  margin-bottom: 22px;
  border-top: 3px solid var(--demo-gold);
}

.demo-management-narrative-overall {
  margin: -5px 0 18px;
  color: var(--demo-navy-deep);
  font-size: 0.85rem;
  font-weight: 750;
  line-height: 1.6;
}

.demo-management-narrative-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--demo-line);
}

.demo-management-narrative-answer {
  min-width: 0;
  padding: 17px;
  border-right: 1px solid var(--demo-line);
  background: white;
}

.demo-management-narrative-answer:last-child { border-right: 0; }

.demo-management-narrative-answer h3 {
  margin: 0 0 10px;
  color: var(--demo-navy-deep);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.demo-management-narrative-answer p {
  margin: 0;
  color: var(--demo-muted);
  font-size: 0.69rem;
  line-height: 1.58;
}

.demo-management-narrative-answer[data-tone="positive"] h3 { color: #17623a; }
.demo-management-narrative-answer[data-tone="negative"] h3 { color: #a23939; }
.demo-management-narrative-answer[data-tone="attention"] h3 { color: #8f6200; }

.demo-management-comparison-table th:first-child,
.demo-management-comparison-table td:first-child {
  padding-left: 0;
}

.demo-management-comparison-table th {
  white-space: normal;
}

.demo-management-insight-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.demo-management-change-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.demo-management-change-columns section {
  min-width: 0;
}

.demo-management-change-columns h3 {
  margin: 0 0 10px;
  color: var(--demo-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-management-change {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--demo-line);
  color: var(--demo-muted);
  font-size: 0.72rem;
}

.demo-management-change strong {
  flex: 0 0 auto;
  color: var(--demo-navy);
  font-size: 0.73rem;
}

.demo-management-change strong small {
  margin-left: 4px;
  color: var(--demo-muted);
  font-size: 0.61rem;
  font-weight: 600;
}

.demo-management-empty {
  margin: 0;
  padding: 12px;
  color: var(--demo-muted);
  background: var(--demo-paper);
  font-size: 0.7rem;
  line-height: 1.55;
}

.demo-profit-bridge {
  display: grid;
}

.demo-profit-bridge-row,
.demo-profit-bridge-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--demo-line);
  color: var(--demo-muted);
  font-size: 0.72rem;
}

.demo-profit-bridge-row strong,
.demo-profit-bridge-total strong {
  flex: 0 0 auto;
  color: var(--demo-navy);
  font-size: 0.78rem;
}

.demo-profit-bridge-total {
  border-top: 2px solid var(--demo-navy);
  color: var(--demo-navy);
  font-weight: 800;
}

.demo-profit-bridge-total:first-child {
  border-top: 0;
  border-bottom: 1px solid var(--demo-line);
}

.demo-profit-bridge-total.is-current {
  margin-top: 2px;
}

.demo-entry-form,
.demo-definition-form,
.demo-product-form,
.demo-scenario-form,
.demo-profile-form {
  margin-bottom: 22px;
}

.demo-panel-heading > button,
.demo-panel-actions > button {
  padding: 8px 10px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: var(--demo-paper);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.demo-panel-heading > button:hover,
.demo-panel-actions > button:hover {
  border-color: var(--demo-gold);
  color: var(--demo-gold);
}

.demo-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.demo-panel-actions > .demo-panel-text-link {
  align-self: center;
  padding: 5px 2px;
  color: var(--demo-navy-deep);
  border-bottom: 1px solid currentColor;
  font-size: 0.64rem;
  font-weight: 800;
  text-decoration: none;
}

.demo-panel-actions > .demo-panel-text-link:hover,
.demo-panel-actions > .demo-panel-text-link:focus-visible {
  color: var(--demo-gold);
  outline: none;
}

.demo-panel-actions > .demo-panel-action-button {
  min-height: 34px;
}

.demo-record-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.demo-entry-filters {
  margin: 20px 0 10px;
  padding: 18px;
  border: 1px solid var(--demo-line);
  background: color-mix(in srgb, var(--demo-navy) 3%, white);
}

.demo-entry-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px 16px;
}

.demo-entry-filter-grid label {
  display: grid;
  gap: 6px;
}

.demo-entry-filter-grid label > span {
  color: var(--demo-navy-deep);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.demo-entry-filter-grid input,
.demo-entry-filter-grid select {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: white;
  font: inherit;
  font-size: 0.69rem;
}

.demo-entry-filter-grid input:focus,
.demo-entry-filter-grid select:focus {
  border-color: var(--demo-gold);
  outline: 2px solid color-mix(in srgb, var(--demo-gold) 22%, transparent);
}

.demo-entry-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.demo-entry-filter-actions small {
  color: var(--demo-muted);
  font-size: 0.62rem;
}

.demo-entry-filter-actions button {
  padding: 8px 10px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: white;
  font-size: 0.64rem;
  font-weight: 800;
}

.demo-entry-filter-actions button:hover {
  border-color: var(--demo-gold);
  color: var(--demo-gold);
}

.demo-entry-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 18px;
}

.demo-entry-pagination[hidden] {
  display: none;
}

.demo-entry-pagination span {
  color: var(--demo-muted);
  font-size: 0.65rem;
}

.demo-entry-pagination span strong {
  color: var(--demo-navy-deep);
}

.demo-entry-pagination button {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: white;
  font-size: 0.64rem;
  font-weight: 800;
}

.demo-entry-pagination button:hover:not(:disabled) {
  border-color: var(--demo-gold);
  color: var(--demo-gold);
}

.demo-entry-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.demo-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.demo-form-grid-products {
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
}

.demo-form-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-form-grid label {
  display: grid;
  gap: 7px;
}

.demo-form-grid label[hidden] {
  display: none;
}

.demo-form-grid label > span {
  color: var(--demo-muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.demo-form-grid label > small {
  color: var(--demo-muted);
  font-size: 0.62rem;
  line-height: 1.45;
}

.demo-entry-try-equivalent {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 72px;
  padding: 10px 12px;
  border-left: 3px solid var(--demo-gold);
  background: color-mix(in srgb, var(--demo-gold) 9%, white);
}

.demo-entry-try-equivalent[hidden] {
  display: none;
}

.demo-entry-try-equivalent span,
.demo-entry-try-equivalent small {
  color: var(--demo-muted);
  font-size: 0.62rem;
}

.demo-entry-try-equivalent strong {
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: 1.15rem;
}

.demo-form-grid input,
.demo-form-grid select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--demo-line);
  border-radius: 0;
  color: var(--demo-ink);
  background: var(--demo-paper);
}

.demo-form-grid input:focus,
.demo-form-grid select:focus {
  border-color: var(--demo-gold);
  outline: 2px solid rgba(220, 164, 58, 0.16);
}

.demo-form-grid select:disabled {
  color: var(--demo-muted);
  background: var(--demo-cream);
  cursor: not-allowed;
}

.demo-form-actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.demo-form-grid .demo-checkbox {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 10px;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--demo-line);
  background: var(--demo-paper);
}

.demo-form-grid .demo-checkbox input {
  width: 18px;
  min-height: 18px;
  margin: 0;
}

.demo-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--demo-line);
}

.demo-definition-note {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--demo-gold);
  color: var(--demo-muted);
  background: var(--demo-cream);
  font-size: 0.72rem;
  line-height: 1.6;
}

.demo-form-actions p {
  margin: 0;
  color: var(--demo-muted);
  font-size: 0.69rem;
}

.demo-form-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.demo-form-actions button,
.demo-report-grid button,
.demo-dialog-actions button:last-child {
  padding: 10px 15px;
  border: 0;
  color: white;
  background: var(--demo-navy);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.demo-form-actions button span,
.demo-report-grid button span {
  margin-left: 12px;
  color: var(--demo-gold);
}

.demo-form-actions .demo-secondary-button {
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: transparent;
}

.demo-form-actions .demo-secondary-button:hover {
  border-color: var(--demo-gold);
  color: var(--demo-gold);
}

.demo-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.demo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.73rem;
}

.demo-table th,
.demo-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--demo-line);
  text-align: right;
  white-space: nowrap;
}

.demo-table th {
  color: var(--demo-muted);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.demo-table td > small {
  display: block;
  margin-top: 4px;
  color: var(--demo-muted);
  font-size: 0.58rem;
}

.demo-table th:first-child,
.demo-table td:first-child {
  padding-left: 0;
  text-align: left;
}

.demo-table th:last-child,
.demo-table td:last-child {
  padding-right: 0;
}

.demo-table tfoot th,
.demo-table tfoot td {
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 2px solid var(--demo-navy);
  border-bottom: 0;
  color: var(--demo-navy-deep);
  background: color-mix(in srgb, var(--demo-gold) 8%, white);
  font-size: 0.68rem;
  font-weight: 850;
}

.demo-table tfoot th {
  text-align: right;
}

.demo-table tfoot .demo-entry-total {
  font-size: 0.77rem;
  font-variant-numeric: tabular-nums;
}

.demo-table button {
  padding: 5px 8px;
  border: 0;
  color: var(--demo-red);
  background: transparent;
  font-size: 0.62rem;
}

.demo-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.demo-table .demo-edit-button {
  color: var(--demo-navy);
}

.demo-table .demo-edit-button:hover {
  color: var(--demo-gold);
}

.demo-user-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, 0.75fr);
  gap: 20px;
  margin-bottom: 20px;
}

.demo-user-management-grid > .demo-panel {
  margin-bottom: 0;
}

.demo-user-active {
  align-self: end;
  min-height: 44px;
}

.demo-role-summary {
  display: grid;
  align-content: start;
  gap: 14px;
  background: color-mix(in srgb, var(--demo-navy) 4%, white);
}

.demo-role-summary > div:not(.demo-panel-heading) {
  padding: 14px;
  border-left: 3px solid var(--demo-gold);
  background: white;
}

.demo-role-summary > div strong {
  color: var(--demo-navy-deep);
  font-family: var(--font-display);
  font-size: 1rem;
}

.demo-role-summary > div p,
.demo-role-summary > small {
  margin: 5px 0 0;
  color: var(--demo-muted);
  font-size: 0.69rem;
  line-height: 1.6;
}

.demo-user-table td:first-child strong,
.demo-user-table td:first-child small {
  display: block;
}

.demo-user-table td:first-child small {
  margin-top: 3px;
  color: var(--demo-muted);
  font-size: 0.62rem;
}

.demo-role-badge,
.demo-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-role-badge[data-role="admin"] {
  color: var(--demo-navy-deep);
  background: var(--demo-gold-light);
}

.demo-role-badge[data-role="user"] {
  color: var(--demo-navy);
  background: color-mix(in srgb, var(--demo-navy) 10%, white);
}

.demo-status-badge[data-active="true"] {
  color: #17633a;
  background: #e5f6ec;
}

.demo-status-badge[data-active="false"] {
  color: #8d3b34;
  background: #f9e8e6;
}

.demo-value-positive {
  color: var(--demo-green);
}

.demo-value-negative {
  color: var(--demo-red);
}

.demo-cash-list {
  display: grid;
  gap: 12px;
}

.demo-cash-row {
  display: grid;
  grid-template-columns: 90px minmax(150px, 1fr) minmax(150px, 1fr) 110px;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--demo-line);
  color: var(--demo-muted);
  font-size: 0.7rem;
}

.demo-cash-row i {
  display: block;
  height: 8px;
  background: var(--demo-cream);
}

.demo-cash-row i::after {
  display: block;
  width: var(--cash-width, 0%);
  height: 100%;
  background: var(--demo-green);
  content: "";
}

.demo-cash-row i.demo-payment::after {
  background: var(--demo-gold);
}

.demo-cash-row strong {
  color: var(--demo-navy);
  text-align: right;
}

.demo-cash-management-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  gap: 22px;
  margin-bottom: 22px;
}

.demo-form-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.demo-cash-resilience {
  margin-bottom: 22px;
}

.demo-cash-resilience-status {
  padding: 5px 9px;
  color: var(--demo-muted);
  background: var(--demo-paper);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.demo-cash-resilience-status.is-strong {
  color: #176a50;
  background: #eff9f5;
}

.demo-cash-resilience-status.is-monitor {
  color: #8b5b08;
  background: #fff8ec;
}

.demo-cash-resilience-status.is-critical {
  color: #a32626;
  background: #fff2f2;
}

.demo-cash-resilience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 -27px;
  border-top: 1px solid var(--demo-line);
  border-bottom: 1px solid var(--demo-line);
}

.demo-cash-resilience-grid > div {
  min-width: 0;
  padding: 20px 27px;
  border-right: 1px solid var(--demo-line);
}

.demo-cash-resilience-grid > div:last-child {
  border-right: 0;
}

.demo-cash-resilience-grid span,
.demo-cash-resilience-grid strong,
.demo-cash-resilience-grid small {
  display: block;
}

.demo-cash-resilience-grid span {
  margin-bottom: 8px;
  color: var(--demo-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-cash-resilience-grid strong {
  overflow: hidden;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nakit analizi, yüksek bakiyelerde genel KPI kartlarından daha uzun tutarlar üretir.
   Tam TL tutarını korurken kart içinde görünür bırakmak için bu iki gruba daha kompakt rakam stili uygulanır. */
.demo-cash-resilience-grid strong,
.demo-kpi-grid[data-cash-tab-panel="analysis"] strong {
  overflow: visible;
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  text-overflow: clip;
  white-space: nowrap;
}

.demo-cash-resilience-grid small {
  margin-top: 7px;
  color: var(--demo-muted);
  font-size: 0.63rem;
  line-height: 1.45;
}

.demo-cash-resilience-grid .demo-cash-resilience-emphasis {
  color: white;
  background: var(--demo-navy);
}

.demo-cash-resilience-grid .demo-cash-resilience-emphasis span,
.demo-cash-resilience-grid .demo-cash-resilience-emphasis strong,
.demo-cash-resilience-grid .demo-cash-resilience-emphasis small {
  color: white;
}

.demo-cash-resilience-grid .demo-cash-resilience-emphasis span,
.demo-cash-resilience-grid .demo-cash-resilience-emphasis small {
  color: rgba(255, 255, 255, 0.68);
}

.demo-cash-resilience-copy {
  margin: 20px 0 0;
  color: var(--demo-muted);
  font-size: 0.76rem;
  line-height: 1.65;
}

.demo-cash-bridge {
  display: grid;
  gap: 0;
}

.demo-cash-bridge > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--demo-line);
  color: var(--demo-muted);
  font-size: 0.73rem;
}

.demo-cash-bridge > div[data-kind="opening"],
.demo-cash-bridge > div[data-kind="closing"] {
  color: var(--demo-navy-deep);
  font-weight: 800;
  background: var(--demo-cream-soft);
}

.demo-cash-bridge > div[data-kind="closing"] {
  margin-top: 4px;
  border-bottom: 0;
  background: #eff9f5;
}

.demo-cash-bridge strong {
  font-size: 0.82rem;
}

.demo-cash-bridge > p {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-left: 3px solid var(--demo-orange);
  color: var(--demo-muted);
  background: #fff8ec;
  font-size: 0.7rem;
  line-height: 1.5;
}

.demo-annual-profit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.demo-annual-profit > div {
  padding: 18px;
  background: var(--demo-cream-soft);
}

.demo-annual-profit span,
.demo-annual-profit strong {
  display: block;
}

.demo-annual-profit span {
  margin-bottom: 7px;
  color: var(--demo-muted);
  font-size: 0.65rem;
}

.demo-annual-profit strong {
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  font-weight: 600;
}

.demo-annual-profit > i {
  color: var(--demo-gold);
  font-style: normal;
  font-size: 1.4rem;
}

.demo-annual-profit > p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
}

.demo-warning ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--demo-navy);
  font-size: 0.68rem;
  line-height: 1.45;
}

.demo-breakeven-result {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  justify-content: center;
  color: white;
  background: var(--demo-navy);
}

.demo-breakeven-result > span {
  color: var(--demo-gold-light);
}

.demo-breakeven-result > strong {
  font-family: var(--demo-serif);
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.demo-breakeven-result > p {
  max-width: 580px;
  margin: 19px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.78rem;
}

.demo-subsection-tabs {
  display: inline-flex;
  margin: 0 0 20px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-subsection-tabs button {
  min-height: 38px;
  padding: 9px 16px;
  border: 0;
  border-right: 1px solid var(--demo-line);
  color: var(--demo-muted);
  background: transparent;
  font-size: 0.66rem;
  font-weight: 850;
}

.demo-subsection-tabs button:last-child {
  border-right: 0;
}

.demo-subsection-tabs button.active {
  color: white;
  background: var(--demo-navy);
  box-shadow: inset 0 -3px 0 var(--demo-gold);
}

.demo-expense-trend-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 2px 0 18px;
}

.demo-expense-trend-heading > div > span,
.demo-expense-trend-heading label {
  color: var(--demo-gold);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-expense-trend-heading h3 {
  margin: 7px 0 0;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  font-weight: 600;
}

.demo-expense-trend-heading label {
  display: grid;
  gap: 6px;
  color: var(--demo-muted);
}

.demo-expense-trend-heading select {
  min-width: 190px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: white;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}

.demo-expense-trend-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-expense-trend-kpis article {
  min-height: 120px;
  padding: 18px;
  border-right: 1px solid var(--demo-line);
}

.demo-expense-trend-kpis article:last-child { border-right: 0; }

.demo-expense-trend-kpis span,
.demo-expense-trend-kpis small { display: block; }

.demo-expense-trend-kpis span {
  color: var(--demo-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.demo-expense-trend-kpis strong {
  display: block;
  margin: 12px 0 5px;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-weight: 600;
  line-height: 1;
}

.demo-expense-trend-kpis small {
  color: var(--demo-muted);
  font-size: 0.59rem;
  line-height: 1.35;
}

.demo-expense-trend-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(44px, 1fr));
  align-items: end;
  gap: 10px;
  min-width: 0;
  padding: 10px 2px 2px;
  overflow-x: auto;
}

.demo-expense-trend-column {
  display: grid;
  grid-template-rows: 158px auto auto;
  gap: 7px;
  color: var(--demo-muted);
  text-align: center;
}

.demo-expense-trend-column > div {
  display: flex;
  align-items: end;
  justify-content: center;
  border-bottom: 1px solid var(--demo-line);
  background: repeating-linear-gradient(to top, transparent 0, transparent 38px, rgba(215, 224, 230, 0.62) 39px, transparent 40px);
}

.demo-expense-trend-column i {
  display: block;
  width: min(34px, 68%);
  min-height: 2px;
  background: var(--demo-gold);
}

.demo-expense-trend-column strong {
  color: var(--demo-navy-deep);
  font-size: 0.66rem;
}

.demo-expense-trend-column span {
  font-size: 0.61rem;
  font-weight: 800;
}

.demo-expense-trend-insight {
  margin-top: 20px;
  border-left: 4px solid var(--demo-gold);
}

.demo-expense-trend-insight > span {
  color: var(--demo-gold);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-expense-trend-insight p {
  margin: 9px 0 0;
  color: var(--demo-navy-deep);
  font-size: 0.82rem;
  line-height: 1.65;
}

.demo-annual-breakeven-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 2px 0 18px;
}

.demo-annual-breakeven-heading > div > span,
.demo-annual-breakeven-heading label {
  color: var(--demo-gold);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo-annual-breakeven-heading h3 {
  margin: 7px 0 0;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  font-weight: 600;
}

.demo-annual-breakeven-heading label {
  display: grid;
  gap: 6px;
  color: var(--demo-muted);
}

.demo-annual-breakeven-heading select {
  min-width: 115px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: white;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}

.demo-breakeven-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.demo-breakeven-kpi-grid article {
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-breakeven-kpi-grid span,
.demo-breakeven-kpi-grid small {
  display: block;
}

.demo-breakeven-kpi-grid span {
  color: var(--demo-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.demo-breakeven-kpi-grid strong {
  display: block;
  margin: 12px 0 5px;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-weight: 600;
  line-height: 1;
}

.demo-breakeven-kpi-grid small {
  color: var(--demo-muted);
  font-size: 0.59rem;
  line-height: 1.35;
}

.demo-annual-breakeven-chart-panel {
  margin-bottom: 20px;
}

.demo-annual-breakeven-chart {
  padding-top: 12px;
}

.demo-annual-breakeven-chart > p {
  margin: 20px 0;
  color: var(--demo-muted);
  font-size: 0.75rem;
}

.demo-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 8px 60px;
  color: var(--demo-muted);
  font-size: 0.66rem;
}

.demo-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.demo-chart-legend i {
  display: inline-block;
  width: 20px;
  border-top: 3px solid var(--demo-gold);
}

.demo-chart-legend i.break-even {
  border-top-style: dashed;
  border-color: var(--demo-navy);
}

.demo-annual-breakeven-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.demo-annual-breakeven-chart .grid line {
  stroke: var(--demo-line);
  stroke-width: 1;
}

.demo-annual-breakeven-chart .grid text,
.demo-annual-breakeven-chart .labels text {
  fill: var(--demo-muted);
  font-family: var(--demo-sans);
  font-size: 12px;
}

.demo-annual-breakeven-chart .income-line {
  fill: none;
  stroke: var(--demo-gold);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.demo-annual-breakeven-chart .break-even-line {
  fill: none;
  stroke: var(--demo-navy);
  stroke-dasharray: 8 7;
  stroke-linecap: round;
  stroke-width: 3;
}

.demo-annual-breakeven-chart circle {
  fill: var(--demo-gold);
  stroke: white;
  stroke-width: 2;
}

.demo-annual-breakeven-chart circle.is-below {
  fill: var(--demo-red);
}

.demo-breakeven-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.demo-breakeven-status[data-status="safe"] { color: #17623a; background: #e4f6ea; }
.demo-breakeven-status[data-status="monitor"] { color: #795500; background: #fff3c9; }
.demo-breakeven-status[data-status="critical"] { color: #a34b00; background: #ffead7; }
.demo-breakeven-status[data-status="below"] { color: #9d2730; background: #ffe5e7; }
.demo-breakeven-status[data-status="no-data"] { color: var(--demo-muted); background: var(--demo-paper); }

.demo-metric-list {
  display: grid;
}

.demo-metric-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--demo-line);
}

.demo-metric-list div:first-child {
  padding-top: 0;
}

.demo-metric-list span {
  color: var(--demo-muted);
  font-size: 0.72rem;
}

.demo-metric-list strong {
  color: var(--demo-navy);
  font-family: var(--demo-serif);
  font-size: 1.4rem;
}

.demo-formula-card {
  margin-top: 22px;
}

.demo-formula-card code {
  display: block;
  margin: 14px 0;
  padding: 16px;
  color: var(--demo-navy);
  background: var(--demo-cream);
  font-size: 0.84rem;
  overflow-x: auto;
}

.demo-formula-card p,
.demo-privacy-card p,
.demo-report-grid p {
  margin: 0;
  color: var(--demo-muted);
  font-size: 0.76rem;
  line-height: 1.65;
}

.demo-scenario-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.demo-scenario-card {
  padding: 30px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-scenario-card.highlight {
  color: white;
  background: var(--demo-navy);
}

.demo-scenario-card > span {
  color: var(--demo-gold);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-scenario-card h2 {
  margin: 7px 0 21px;
  font-family: var(--demo-serif);
  font-size: 1.6rem;
}

.demo-scenario-card dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.demo-scenario-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--demo-line);
}

.demo-scenario-card.highlight dl div {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.demo-scenario-card dt {
  color: var(--demo-muted);
  font-size: 0.73rem;
}

.demo-scenario-card.highlight dt {
  color: rgba(255, 255, 255, 0.61);
}

.demo-scenario-card dd {
  margin: 0;
  font-weight: 750;
}

.demo-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.demo-report-grid article {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: start;
}

.demo-report-number {
  color: rgba(10, 39, 66, 0.16);
  font-family: var(--demo-serif);
  font-size: 3.8rem;
  line-height: 1;
}

.demo-report-grid h2 {
  margin: 17px 0 13px;
}

.demo-report-grid button,
.demo-report-grid strong {
  margin-top: auto;
}

.demo-report-grid strong {
  color: var(--demo-navy);
  font-size: 0.78rem;
}

.demo-privacy-card {
  margin-top: 22px;
}

.demo-privacy-card h2 {
  margin-bottom: 12px;
}

.demo-danger-button {
  margin-top: 22px;
  padding: 8px 12px;
  border: 1px solid rgba(167, 63, 66, 0.35);
  color: var(--demo-red);
  background: transparent;
  font-size: 0.67rem;
  font-weight: 750;
}

.demo-dialog {
  width: min(480px, calc(100% - 32px));
  padding: 0;
  border: 0;
  box-shadow: var(--demo-shadow);
}

.demo-dialog-wide {
  width: min(1080px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.demo-dialog-profile {
  width: min(760px, calc(100% - 32px));
}

.demo-dialog::backdrop {
  background: rgba(6, 26, 45, 0.72);
  backdrop-filter: blur(5px);
}

.demo-dialog-form {
  position: relative;
  display: grid;
  gap: 17px;
  padding: 38px;
}

.demo-dialog-form > p:not(.demo-dialog-privacy) {
  margin: 0 0 -10px;
  color: var(--demo-gold);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-dialog-intro {
  max-width: 590px;
  color: var(--demo-muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

.demo-dialog-privacy {
  margin: 2px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--demo-line);
  color: var(--demo-muted);
  font-size: 0.67rem;
  line-height: 1.55;
}

.demo-dialog-privacy strong {
  color: var(--demo-navy-deep);
}

.demo-dialog h2 {
  margin: 0 0 4px;
  color: var(--demo-navy);
  font-family: var(--demo-serif);
  font-size: 1.7rem;
  font-weight: 600;
}

.demo-dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  color: var(--demo-muted);
  background: transparent;
  font-size: 1.5rem;
}

.demo-dialog-actions {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: 7px;
}

.demo-dialog-actions button:first-child {
  border: 0;
  color: var(--demo-muted);
  background: transparent;
}

.demo-dialog-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.demo-import-dialog .demo-dialog-form {
  gap: 20px;
}

.demo-import-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.demo-import-steps > a,
.demo-import-steps > label {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding: 15px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: var(--demo-paper);
  text-decoration: none;
  cursor: pointer;
}

.demo-import-steps > a:hover,
.demo-import-steps > label:hover {
  border-color: var(--demo-gold);
}

.demo-import-steps b {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--demo-navy);
}

.demo-import-steps span,
.demo-import-steps strong,
.demo-import-steps small {
  display: block;
}

.demo-import-steps small {
  margin-top: 4px;
  color: var(--demo-muted);
  font-size: 0.67rem;
}

.demo-import-steps input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.demo-import-references {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.demo-import-references > div {
  padding: 13px 15px;
  border-left: 3px solid var(--demo-gold);
  background: color-mix(in srgb, var(--demo-gold) 7%, white);
}

.demo-import-references strong {
  color: var(--demo-navy-deep);
  font-size: 0.7rem;
}

.demo-import-references p {
  margin: 5px 0 0;
  color: var(--demo-muted);
  font-size: 0.67rem;
  line-height: 1.55;
}

.demo-import-status,
.demo-import-errors {
  padding: 12px 14px;
  font-size: 0.72rem;
  line-height: 1.55;
}

.demo-import-status {
  border: 1px solid var(--demo-line);
  color: var(--demo-muted);
  background: white;
}

.demo-import-status.is-valid {
  border-color: #75ad8e;
  color: #1c6840;
  background: #eef9f2;
}

.demo-import-status.is-error,
.demo-import-errors {
  border-color: #d7a0a0;
  color: #8a2f2f;
  background: #fff1f1;
}

.demo-import-errors strong {
  display: block;
  margin-bottom: 6px;
}

.demo-import-errors ul {
  margin: 0;
  padding-left: 20px;
}

.demo-import-preview {
  padding: 18px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-import-preview .demo-panel-heading {
  margin-bottom: 13px;
}

.demo-import-preview .demo-table {
  min-width: 780px;
}

.demo-dialog-shell {
  position: relative;
  display: grid;
  gap: 22px;
  padding: 38px;
}

.demo-dialog-shell-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.demo-dialog-shell-heading p {
  margin: 0 0 5px;
  color: var(--demo-gold);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-dialog-shell-heading h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

.demo-dialog-shell-heading > span {
  max-width: 360px;
  color: var(--demo-muted);
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: right;
}

.demo-dialog-shell .demo-panel {
  margin: 0;
}

.demo-toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  max-width: 360px;
  padding: 13px 17px;
  color: white;
  background: var(--demo-navy-deep);
  box-shadow: var(--demo-shadow);
  font-size: 0.75rem;
}

.demo-cash-report-filters {
  margin-bottom: 22px;
}

.demo-cash-report-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.demo-cash-report-filter-grid label {
  display: grid;
  gap: 7px;
}

.demo-cash-report-filter-grid span {
  color: var(--demo-muted);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-cash-report-filter-grid input,
.demo-cash-report-filter-grid select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--demo-line);
  color: var(--demo-navy-deep);
  background: white;
}

.demo-cash-report-loading {
  margin: 22px 0;
  padding: 24px;
  border-left: 4px solid var(--demo-gold);
  color: var(--demo-navy-deep);
  background: white;
  box-shadow: var(--demo-shadow);
  font-size: 0.78rem;
  font-weight: 700;
}

.demo-cash-report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
  border: 1px solid var(--demo-line);
  background: white;
}

.demo-cash-report-kpis article {
  min-width: 0;
  padding: 22px 20px;
  border-right: 1px solid var(--demo-line);
  border-bottom: 1px solid var(--demo-line);
}

.demo-cash-report-kpis article:nth-child(4n) {
  border-right: 0;
}

.demo-cash-report-kpis article:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.demo-cash-report-kpis span,
.demo-cash-report-control span {
  display: block;
  color: var(--demo-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-cash-report-kpis strong {
  display: block;
  margin-top: 12px;
  overflow: visible;
  color: var(--demo-navy-deep);
  font-family: var(--demo-serif);
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-overflow: clip;
  white-space: nowrap;
}

.demo-cash-report-kpis .demo-kpi-emphasis {
  background: var(--demo-navy-deep);
}

.demo-cash-report-kpis .demo-kpi-emphasis strong,
.demo-cash-report-kpis .demo-kpi-emphasis span {
  color: white;
}

.demo-cash-report-insights ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-cash-report-insights li {
  padding: 11px 13px;
  border-left: 3px solid var(--demo-gold);
  color: var(--demo-navy-deep);
  background: var(--demo-paper);
  font-size: 0.75rem;
  line-height: 1.55;
}

.demo-cash-report-panel {
  padding-inline: 0;
}

.demo-cash-report-panel > .demo-panel-heading {
  padding-inline: 28px;
}

.demo-cash-report-scroll {
  max-height: 70vh;
  overflow: auto;
  border-top: 1px solid var(--demo-line);
}

.demo-cash-report-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.7rem;
}

.demo-cash-report-table th,
.demo-cash-report-table td {
  min-width: 155px;
  padding: 12px 14px;
  border-right: 1px solid var(--demo-line);
  border-bottom: 1px solid var(--demo-line);
  text-align: right;
  white-space: nowrap;
}

.demo-cash-report-table th:first-child,
.demo-cash-report-table td:first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  min-width: 280px;
  max-width: 280px;
  color: var(--demo-navy-deep);
  background: white;
  text-align: left;
  white-space: normal;
}

.demo-cash-report-table thead th {
  position: sticky;
  z-index: 4;
  top: 0;
  color: white;
  background: var(--demo-navy);
  vertical-align: bottom;
}

.demo-cash-report-table thead th:first-child {
  z-index: 6;
  color: white;
  background: var(--demo-navy);
}

.demo-cash-report-table thead span,
.demo-cash-report-table thead small {
  display: block;
}

.demo-cash-report-table thead small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1.35;
}

.demo-cash-report-table tr[data-kind="subtotal"] th,
.demo-cash-report-table tr[data-kind="subtotal"] td {
  font-weight: 800;
  background: #f2f5f7;
}

.demo-cash-report-table tr[data-kind="total"] th,
.demo-cash-report-table tr[data-kind="total"] td {
  border-bottom: 2px solid var(--demo-navy);
  font-weight: 850;
  background: #e8eef2;
}

.demo-cash-report-table tr[data-kind="balance"] th,
.demo-cash-report-table tr[data-kind="balance"] td {
  color: white;
  background: var(--demo-navy-deep);
  font-weight: 850;
}

.demo-cash-report-table tr[data-kind="balance"] th:first-child {
  background: var(--demo-navy-deep);
}

.demo-cash-report-table tr[data-kind="control"] th,
.demo-cash-report-table tr[data-kind="control"] td {
  color: var(--demo-muted);
  background: #fffaf0;
  font-weight: 750;
}

.demo-cash-report-table .demo-cash-report-section th {
  position: static;
  padding: 9px 14px;
  color: var(--demo-gold);
  background: var(--demo-navy);
  font-size: 0.61rem;
  letter-spacing: 0.1em;
}

.demo-cash-report-table td button {
  padding: 0;
  border: 0;
  border-bottom: 1px dotted currentColor;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.demo-cash-report-control > div[data-cash-report-control],
[data-cash-report-control] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

[data-cash-report-control] > div {
  padding: 14px;
  border: 1px solid var(--demo-line);
  background: var(--demo-paper);
}

[data-cash-report-control] > div strong {
  display: block;
  margin-top: 7px;
  color: var(--demo-navy-deep);
  font-size: 0.75rem;
}

[data-cash-report-control] > div[data-status="ok"] strong {
  color: #176b46;
}

[data-cash-report-control] > div[data-status="error"] strong {
  color: var(--demo-red);
}

[data-cash-report-control] > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  color: #8a5a14;
  background: #fff7e7;
  font-size: 0.7rem;
}

@media (max-width: 1100px) {
  .demo-product-reconciliation-grid {
    grid-template-columns: 1fr;
  }

  .demo-product-reconciliation-grid i { text-align: left; }
  .demo-cash-report-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .demo-cash-report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-cash-report-kpis article:nth-child(2n) {
    border-right: 0;
  }

  .demo-cash-report-kpis article:nth-last-child(-n + 4) {
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-cash-report-kpis article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .demo-login-grid {
    gap: 55px;
  }

  .demo-app-topbar,
  .demo-app-layout {
    grid-template-columns: 225px minmax(0, 1fr);
  }

  .demo-app-topbar {
    grid-template-columns: 225px minmax(400px, 0.9fr) minmax(180px, 1.1fr) auto;
  }

  .demo-business-switcher {
    gap: 8px;
    padding-inline: 12px;
  }

  .demo-business-switcher select {
    min-width: 160px;
  }

  .demo-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-overview-grid {
    grid-template-columns: 1fr;
  }

  .demo-cash-management-grid {
    grid-template-columns: 1fr;
  }

  .demo-report-grid {
    grid-template-columns: 1fr 1fr;
  }

  .demo-breakeven-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 821px) and (max-width: 900px) {
  .demo-app-topbar {
    grid-template-columns: 190px minmax(315px, 0.9fr) minmax(125px, 1.1fr) auto;
  }

  .demo-app-brand {
    padding-inline: 16px;
  }

  .demo-app-brand small,
  .demo-business-switcher label {
    display: none;
  }

  .demo-business-switcher {
    padding-inline: 8px;
  }

  .demo-business-switcher select {
    min-width: 140px;
  }

  .demo-business-switcher button {
    padding-inline: 6px;
    font-size: 0.6rem;
  }
}

@media (max-width: 820px) {
  .demo-product-kpis { grid-template-columns: 1fr 1fr; }
  .demo-product-kpis article:nth-child(2) { border-right: 0; }
  .demo-product-kpis article:nth-child(-n + 2) { border-bottom: 1px solid var(--demo-line); }
  .demo-login-section {
    padding: 55px 0 70px;
    background: var(--demo-paper);
  }

  .demo-login-grid {
    grid-template-columns: 1fr;
  }

  .demo-login-card {
    max-width: 580px;
  }

  .demo-app-topbar {
    position: static;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 7px 10px;
  }

  .demo-app-brand {
    padding: 8px;
  }

  .demo-business-switcher {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 8px 8px;
  }

  .demo-fx-ticker {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 38px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-left: 0;
    border-right: 0;
  }

  .demo-app-topbar > form {
    grid-column: 2;
    grid-row: 1;
  }

  .demo-business-switcher select {
    min-width: 0;
    flex: 1;
  }

  .demo-app-topbar > form {
    padding-right: 0;
  }

  .demo-app-layout {
    display: block;
  }

  .demo-app-sidebar {
    position: static;
    display: block;
    height: auto;
    padding: 10px 14px;
    overflow-x: auto;
  }

  .demo-app-sidebar nav {
    display: flex;
    width: max-content;
  }

  .demo-app-sidebar nav button {
    display: flex;
    width: auto;
    gap: 7px;
    white-space: nowrap;
  }

  .demo-sidebar-note {
    display: none;
  }

  .demo-sidebar-user {
    display: none;
  }

  .demo-app-main {
    padding: 34px 18px 70px;
  }

  .demo-kpi-grid,
  .demo-kpi-grid-three {
    grid-template-columns: 1fr 1fr;
  }

  .demo-kpi-grid-management {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .demo-kpi-grid-management article:nth-child(2) {
    border-right: 1px solid var(--demo-line);
  }

  .demo-kpi-grid-management article:nth-child(3) {
    border-right: 0;
  }

  .demo-kpi-grid-management article:nth-child(-n + 3) {
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-kpi-grid article:nth-child(2) {
    border-right: 0;
  }

  .demo-kpi-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-expense-bars,
  .demo-breakeven-grid,
  .demo-scenario-comparison,
  .demo-report-grid,
  .demo-management-change-columns {
    grid-template-columns: 1fr;
  }

  .demo-management-narrative-list {
    grid-template-columns: 1fr 1fr;
  }

  .demo-management-narrative-answer:nth-child(2),
  .demo-management-narrative-answer:nth-child(4) {
    border-right: 0;
  }

  .demo-management-narrative-answer:nth-child(-n + 4) {
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-breakeven-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .demo-cash-resilience-grid {
    grid-template-columns: 1fr 1fr;
  }

  .demo-cash-resilience-grid > div:nth-child(2) {
    border-right: 0;
  }

  .demo-cash-resilience-grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-expense-control-grid {
    grid-template-columns: 1fr 1fr;
  }

  .demo-expense-trend-heading {
    align-items: start;
    flex-direction: column;
  }

  .demo-expense-trend-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .demo-expense-trend-kpis article:nth-child(2) {
    border-right: 0;
  }

  .demo-expense-trend-kpis article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-expense-control-grid article:nth-child(2) {
    border-right: 0;
  }

  .demo-expense-control-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-ytd-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .demo-ytd-kpi-grid article:nth-child(2) {
    border-right: 0;
  }

  .demo-ytd-kpi-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-ytd-grid {
    grid-template-columns: 1fr;
  }

  .demo-revenue-quality-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .demo-revenue-quality-kpis article:nth-child(2) {
    border-right: 0;
  }

  .demo-revenue-quality-kpis article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-revenue-quality-grid {
    grid-template-columns: 1fr;
  }

  .demo-annual-breakeven-heading {
    align-items: start;
    flex-direction: column;
  }

  .demo-cash-row {
    grid-template-columns: 70px 1fr 1fr;
  }

  .demo-cash-row strong {
    grid-column: 2 / -1;
  }
}

@media (max-width: 560px) {
  .demo-product-kpis { grid-template-columns: 1fr; }
  .demo-product-kpis article,
  .demo-product-kpis article:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--demo-line); }
  .demo-product-kpis article:last-child { border-bottom: 0; }
  .demo-cash-report-filter-grid,
  .demo-cash-report-kpis,
  [data-cash-report-control] {
    grid-template-columns: 1fr;
  }

  .demo-cash-report-kpis article,
  .demo-cash-report-kpis article:nth-child(2n),
  .demo-cash-report-kpis article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-cash-report-kpis article:last-child {
    border-bottom: 0;
  }

  .demo-cash-report-table th:first-child,
  .demo-cash-report-table td:first-child {
    min-width: 220px;
    max-width: 220px;
  }

  .demo-breakeven-kpi-grid {
    grid-template-columns: 1fr;
  }

  .demo-cash-resilience-grid {
    grid-template-columns: 1fr;
  }

  .demo-cash-resilience-grid > div,
  .demo-cash-resilience-grid > div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-cash-resilience-grid > div:last-child {
    border-bottom: 0;
  }

  .demo-expense-control-grid {
    grid-template-columns: 1fr;
  }

  .demo-expense-trend-heading select {
    min-width: min(290px, 100%);
  }

  .demo-expense-trend-kpis {
    grid-template-columns: 1fr;
  }

  .demo-expense-trend-kpis article,
  .demo-expense-trend-kpis article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-expense-trend-kpis article:last-child {
    border-bottom: 0;
  }

  .demo-ytd-kpi-grid,
  .demo-ytd-stat-list {
    grid-template-columns: 1fr;
  }

  .demo-ytd-kpi-grid article,
  .demo-ytd-kpi-grid article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-ytd-kpi-grid article:last-child {
    border-bottom: 0;
  }

  .demo-ytd-scenarios {
    grid-template-columns: 1fr;
  }

  .demo-ytd-scenarios > article {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-ytd-scenarios > article:last-child {
    border-bottom: 0;
  }

  .demo-revenue-quality-kpis {
    grid-template-columns: 1fr;
  }

  .demo-revenue-quality-kpis article,
  .demo-revenue-quality-kpis article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-revenue-quality-kpis article:last-child {
    border-bottom: 0;
  }

  .demo-expense-control-inputs {
    grid-template-columns: 1fr;
  }

  .demo-expense-control-inputs > div,
  .demo-expense-control-inputs > div:nth-child(3) {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-expense-control-grid article,
  .demo-expense-control-grid article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-expense-control-grid article:last-child {
    border-bottom: 0;
  }

  .demo-monthly-spend-kpis {
    grid-template-columns: 1fr;
  }

  .demo-monthly-spend-kpis > div {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-monthly-spend-kpis > div:last-child {
    border-bottom: 0;
  }

  .demo-management-narrative-list {
    grid-template-columns: 1fr;
  }

  .demo-management-narrative-answer,
  .demo-management-narrative-answer:nth-child(2),
  .demo-management-narrative-answer:nth-child(4) {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-management-narrative-answer:last-child {
    border-bottom: 0;
  }

  .demo-subsection-tabs {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .demo-subsection-tabs button {
    padding-inline: 8px;
  }

  .demo-chart-legend {
    margin-left: 0;
  }
  .demo-user-management-grid {
    grid-template-columns: 1fr;
  }

  .demo-login-copy h1 {
    font-size: 2.65rem;
  }

  .demo-login-card {
    padding: 34px 24px;
  }

  .demo-app-brand small,
  .demo-business-switcher label {
    display: none;
  }

  .demo-business-switcher button {
    flex: 0 0 auto;
    padding-inline: 4px;
    font-size: 0.6rem;
  }

  .demo-view-heading {
    display: grid;
    align-items: start;
  }

  .demo-view-tools {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .demo-section-tabs {
    overflow-x: auto;
  }

  .demo-section-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .demo-analysis-panel-heading,
  .demo-dialog-shell-heading {
    align-items: start;
    flex-direction: column;
    gap: 7px;
  }

  .demo-dialog-shell-heading > span {
    text-align: left;
  }

  .demo-view-help {
    max-width: 70%;
  }

  .demo-page-tip {
    margin-left: auto;
  }

  .demo-page-tip-card {
    width: min(370px, calc(100vw - 48px));
  }

  .demo-kpi-grid,
  .demo-kpi-grid-three,
  .demo-kpi-grid-management,
  .demo-form-grid,
  .demo-form-grid-products,
  .demo-form-grid-three,
  .demo-form-grid-two {
    grid-template-columns: 1fr;
  }

  .demo-annual-profit {
    grid-template-columns: 1fr;
  }

  .demo-annual-profit > i {
    transform: rotate(90deg);
    text-align: center;
  }

  .demo-kpi-grid article {
    border-right: 0;
    border-bottom: 1px solid var(--demo-line);
  }

  .demo-kpi-grid article:last-child {
    border-bottom: 0;
  }

  .demo-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .demo-form-actions button {
    width: 100%;
  }

  .demo-form-buttons {
    width: 100%;
    flex-direction: column-reverse;
  }

  .demo-dialog-form,
  .demo-dialog-shell {
    padding: 32px 20px 24px;
  }

  .demo-panel-heading {
    align-items: start;
    flex-direction: column;
  }

  .demo-panel-actions,
  .demo-import-steps,
  .demo-import-references {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .demo-panel-actions {
    justify-content: flex-start;
  }

  .demo-entry-filter-grid {
    grid-template-columns: 1fr;
  }

  .demo-record-heading-actions {
    width: 100%;
    justify-content: space-between;
  }

  .demo-entry-pagination {
    justify-content: space-between;
  }
}

@media print {
  .demo-app-topbar,
  .demo-app-sidebar,
  .demo-warning-actions,
  .demo-export-menu,
  .demo-page-tip,
  .demo-section-tabs,
  body:not(.demo-print-entries) .demo-view:not([data-demo-view="overview"]),
  body.demo-print-entries .demo-view:not([data-demo-view="entries"]) {
    display: none !important;
  }

  .demo-app-layout {
    display: block;
  }

  .demo-app-main {
    width: 100%;
    padding: 0;
  }

  .demo-panel,
  .demo-kpi-grid {
    break-inside: avoid;
    box-shadow: none;
  }

  body.demo-print-entries .demo-view[data-demo-view="entries"] {
    display: block !important;
  }

  body.demo-print-entries .demo-entry-form,
  body.demo-print-entries .demo-entry-filters,
  body.demo-print-entries .demo-record-heading-actions .demo-export-menu,
  body.demo-print-entries .demo-table th:last-child,
  body.demo-print-entries .demo-table td:last-child {
    display: none !important;
  }

  body.demo-print-entries [data-entry-records-panel] {
    border: 0;
    padding: 0;
  }

  body.demo-print-entries .demo-table-wrap {
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-fx-track {
    animation: none;
  }

  .demo-fx-group[aria-hidden="true"] {
    display: none;
  }

  .demo-fx-viewport {
    overflow-x: auto;
    mask-image: none;
  }
}

/* Keep the NOVA token layer authoritative over legacy component defaults. */
.demo-app-body { color: var(--color-text); background: var(--color-bg); }
.demo-app-sidebar nav { gap: 2px; }
.demo-app-body .demo-panel { border-color: var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.demo-app-body .demo-table-wrap,
.demo-app-body .demo-cash-report-scroll { border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.demo-app-body .demo-table thead th,
.demo-app-body .demo-cash-report-table thead th { position: sticky; top: 0; z-index: 2; color: var(--color-text-muted); background: #f3f6f7; }
.demo-app-body .demo-table tbody tr:hover,
.demo-app-body .demo-cash-report-table tbody tr:hover { background: rgba(217,154,36,.055); }

/* NOVA design-system completion: authoritative application layer */
:root {
  --bg: #f4f5f3;
  --surface: #fff;
  --surface-muted: #eef1f0;
  --ink: #071d31;
  --text: #263947;
  --text-muted: #6b7983;
  --border: rgba(7,29,49,.13);
  --accent: #d69a29;
  --positive: #137052;
  --negative: #ae3944;
  --warning: #a96812;
  --focus: #e2a531;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(7,29,49,.04), 0 10px 28px rgba(7,29,49,.045);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 36px;
}

.nova-routing-pending [data-demo-view] { display: none !important; }
.demo-app-body { color: var(--text); background: var(--bg); font-family: var(--demo-sans); }
.demo-app-main { min-width: 0; padding: 28px clamp(20px,2.3vw,40px) 64px; }
.demo-view-heading { margin-bottom: 22px; }
.demo-view-heading h1 { max-width: 900px; font-size: clamp(2rem,2.6vw,2.35rem); line-height: 1.08; letter-spacing: -.035em; }
.demo-analysis-panel-heading h2,
.demo-panel-heading h2 { font-size: clamp(1.18rem,1.6vw,1.48rem); line-height: 1.2; }
.demo-kpi-grid strong,
.demo-cash-report-kpis strong,
.demo-revenue-quality-kpis strong,
.demo-ytd-kpi-grid strong,
.demo-breakeven-kpi-grid strong,
.demo-cash-resilience-grid strong,
.demo-monthly-spend-kpis strong,
.demo-table { font-family: var(--demo-sans); font-variant-numeric: tabular-nums lining-nums; }
.demo-kpi-grid strong,
.demo-cash-report-kpis strong { font-size: clamp(1.35rem,2vw,1.8rem); letter-spacing: -.025em; }

.demo-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
.demo-panel + .demo-panel { margin-top: 18px; }
.demo-overview-grid { gap: 16px; }

.demo-button,
.demo-app-body button,
.demo-app-body input[type="submit"] {
  min-height: 38px;
  border-radius: 7px;
  font-family: var(--demo-sans);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .01em;
}
.demo-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; text-decoration: none; }
.demo-button-primary,
.demo-form-actions button[type="submit"],
.demo-dialog-actions button:last-child { border: 1px solid var(--ink); color: #fff; background: var(--ink); }
.demo-button-secondary,
.demo-secondary-button,
.demo-panel-action-button { border: 1px solid var(--border); color: var(--ink); background: var(--surface); }
.demo-button-ghost { border: 1px solid transparent; color: var(--text); background: transparent; }
.demo-button-link { min-height: auto; padding-inline: 3px; border: 0; color: var(--ink); background: transparent; text-decoration: underline; text-decoration-color: rgba(214,154,41,.55); text-underline-offset: 4px; }
.demo-table-actions button:not(.demo-edit-button) { color: var(--negative); }
.demo-app-body button:hover:not(:disabled), .demo-button:hover { filter: brightness(.97); transform: translateY(-1px); }
.demo-app-body button:disabled { cursor: not-allowed; opacity: .5; }
.demo-app-body :is(button,a,input,select,summary):focus-visible { outline: 3px solid color-mix(in srgb,var(--focus) 45%,transparent); outline-offset: 2px; }

.demo-form-grid input,
.demo-form-grid select,
.demo-entry-filters input,
.demo-entry-filters select,
.demo-cash-report-filter-grid input,
.demo-cash-report-filter-grid select {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface);
  font: 500 .82rem/1.2 var(--demo-sans);
}
.demo-form-grid input:hover,
.demo-form-grid select:hover,
.demo-entry-filters input:hover,
.demo-entry-filters select:hover { border-color: rgba(7,29,49,.28); }

.demo-app-topbar { grid-template-columns: max-content minmax(350px,.8fr) minmax(320px,1fr) max-content; gap: 14px; min-width: 0; padding-inline: 22px; }
.demo-fx-ticker { min-width: 0; max-width: 100%; overflow: hidden; }
.demo-fx-viewport { min-width: 0; overflow: hidden; }
.demo-business-switcher { min-width: 0; }

.demo-app-layout { grid-template-columns: 246px minmax(0,1fr); }
.demo-app-sidebar { width: 246px; padding: 14px 10px 18px; transition: width .18s ease; }
.demo-sidebar-toggle { display: flex; width: 100%; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 8px; padding: 6px 9px; border: 0; color: rgba(255,255,255,.62); background: transparent; }
.demo-sidebar-toggle b { font-size: .66rem; }
.demo-app-sidebar nav { display: grid; gap: 5px; }
.demo-app-sidebar nav a { display: flex; grid-template-columns: none; gap: 10px; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 6px; }
.demo-app-sidebar nav a::before { content: attr(data-nav-icon); display: grid; flex: 0 0 22px; width: 22px; place-items: center; color: rgba(255,255,255,.48); font-size: .9rem; }
.demo-app-sidebar nav a > span { overflow: hidden; color: inherit; font-size: .74rem; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.demo-app-sidebar nav a.active { border: 0; box-shadow: inset 3px 0 var(--accent); }
.demo-nav-section { margin: 0; }
.demo-nav-section > summary { display: grid; min-height: 38px; grid-template-columns: 22px 1fr 16px; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: rgba(255,255,255,.65); cursor: pointer; font-size: .66rem; font-weight: 800; letter-spacing: .08em; list-style: none; text-transform: uppercase; }
.demo-nav-section > summary::-webkit-details-marker { display: none; }
.demo-nav-section > summary i { font-style: normal; text-align: center; }
.demo-nav-section > summary b { transition: transform .15s ease; }
.demo-nav-section[open] > summary b { transform: rotate(180deg); }
.demo-nav-section > div { display: grid; gap: 2px; margin: 2px 0 6px 10px; padding-left: 5px; border-left: 1px solid rgba(255,255,255,.1); }
.demo-sidebar-compact .demo-app-layout { grid-template-columns: 74px minmax(0,1fr); }
.demo-app-sidebar.is-compact { width: 74px; }
.demo-app-sidebar.is-compact .demo-sidebar-toggle { justify-content: center; }
.demo-app-sidebar.is-compact .demo-sidebar-toggle b,
.demo-app-sidebar.is-compact nav a > span,
.demo-app-sidebar.is-compact .demo-nav-section summary span,
.demo-app-sidebar.is-compact .demo-nav-section summary b,
.demo-app-sidebar.is-compact .demo-sidebar-user,
.demo-app-sidebar.is-compact .demo-sidebar-note { display: none; }
.demo-app-sidebar.is-compact .demo-nav-section > summary { grid-template-columns: 1fr; place-items: center; }
.demo-app-sidebar.is-compact .demo-nav-section > div { margin-left: 0; padding-left: 0; border-left: 0; }
.demo-app-sidebar.is-compact nav a { justify-content: center; padding-inline: 7px; }

.demo-page-tip summary { width: 34px; min-width: 34px; padding: 0; border-color: var(--border); border-radius: 50%; }
.demo-page-tip summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.demo-page-tip summary i { border: 0; background: transparent; }

.demo-entry-filter-primary { grid-template-columns: repeat(4,minmax(150px,1fr)); }
.demo-advanced-filters { margin-top: 10px; border-top: 1px solid var(--border); }
.demo-advanced-filters > summary { display: inline-flex; align-items: center; gap: 7px; padding: 12px 0 4px; color: var(--ink); cursor: pointer; font-size: .74rem; font-weight: 800; }
.demo-advanced-filters > summary span { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; color: #fff; background: var(--accent); font-size: .64rem; }
.demo-advanced-filters > div { padding-top: 10px; }

.demo-grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; color: var(--text-muted); font-size: .7rem; }
.demo-column-menu { position: relative; }
.demo-column-menu summary { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--ink); background: var(--surface); cursor: pointer; font-weight: 750; }
.demo-column-menu > div { position: absolute; z-index: 12; top: calc(100% + 5px); left: 0; display: grid; width: 220px; gap: 5px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.demo-column-menu label { display: flex; gap: 8px; align-items: center; }

.demo-table-wrap,
.demo-cash-report-scroll { border-color: var(--border); border-radius: 8px; background: var(--surface); }
.demo-table { width: 100%; min-width: 0; table-layout: auto; }
.demo-table th,
.demo-table td { height: 46px; padding: 9px 12px; border-right: 0; border-bottom: 1px solid rgba(7,29,49,.08); vertical-align: middle; }
.demo-table th { color: var(--text-muted); background: var(--surface-muted); font-size: .64rem; letter-spacing: .05em; }
.demo-table th button { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 0; border: 0; color: inherit; background: transparent; text-transform: inherit; }
.demo-table th button i { color: var(--accent); font-style: normal; }
.demo-table td { color: var(--text); font-size: .76rem; }
.demo-table tbody tr:focus-within { outline: 2px solid color-mix(in srgb,var(--focus) 42%,transparent); outline-offset: -2px; }
.demo-table .demo-number,
.demo-table td:nth-last-child(2),
.demo-annual-breakeven-table td:not(:first-child):not(:last-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-table-actions { justify-content: flex-end; white-space: nowrap; }
.demo-column-filters th { top: 39px !important; padding: 5px 6px; background: #f8f9f8 !important; }
.demo-column-filters :is(input,select) { width: 100%; min-width: 64px; height: 30px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--text); background: var(--surface); font-size: .68rem; }
.demo-entry-grid th:nth-child(7), .demo-entry-grid th:nth-child(8),
.demo-entry-grid td:nth-child(7), .demo-entry-grid td:nth-child(8) { text-align: right; }
.demo-entry-grid th:last-child, .demo-entry-grid td:last-child { width: 122px; }
.demo-entry-grid td:nth-child(6) { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-status { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-size: .7rem; font-weight: 750; white-space: nowrap; }
.demo-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.demo-status[data-status="income"]::before,
.demo-status[data-status="completed"]::before { background: var(--positive); }
.demo-status[data-status="expense"]::before { background: var(--negative); }
.demo-status[data-status="pending"]::before { background: var(--warning); }
.demo-small-grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.demo-small-grid-toolbar input { min-width: min(300px,100%); min-height: 36px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.demo-small-grid-toolbar small { color: var(--text-muted); font-size: .68rem; }

.demo-entry-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0 0; flex-wrap: wrap; }
.demo-page-buttons { display: flex; align-items: center; gap: 4px; }
.demo-entry-pagination button { min-width: 34px; min-height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; color: var(--ink); background: var(--surface); }
.demo-entry-pagination button[aria-current="page"] { color: #fff; border-color: var(--ink); background: var(--ink); }
.demo-entry-pagination label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .7rem; font-weight: 700; }
.demo-entry-pagination :is(input,select) { width: 66px; min-height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); text-align: center; }
.demo-page-size select { width: 76px; }
.demo-page-ellipsis { padding-inline: 4px; }
.demo-grid-footer-metrics { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; color: var(--text-muted); font-size: .68rem; white-space: nowrap; }
.demo-grid-performance { position: relative; color: var(--text-muted); }
.demo-grid-performance summary { display: inline-flex; align-items: center; min-height: 30px; padding: 0 3px; border-radius: 5px; cursor: help; list-style: none; color: inherit; font-size: inherit; }
.demo-grid-performance summary::-webkit-details-marker { display: none; }
.demo-grid-performance summary:hover,.demo-grid-performance summary:focus-visible { color: var(--ink); outline: 1px solid color-mix(in srgb,var(--accent) 55%,transparent); outline-offset: 2px; }
.demo-grid-performance summary strong { color: var(--ink); font-weight: 800; }
.demo-grid-performance dl { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 25; display: none; width: max-content; min-width: 210px; margin: 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 12px 30px rgba(7,29,49,.14); }
.demo-grid-performance:hover dl,.demo-grid-performance:focus-within dl,.demo-grid-performance[open] dl { display: grid; gap: 6px; }
.demo-grid-performance dl div { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
.demo-grid-performance :is(dt,dd) { margin: 0; }
.demo-grid-performance dt { color: var(--text-muted); font-weight: 650; }
.demo-grid-performance dd { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 800; }
.demo-grid-performance.is-loading,.demo-grid-performance.is-error { color: var(--text-muted); }

.demo-date-input { padding-right: 34px !important; background-image: linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%) !important; background-position: calc(100% - 15px) 17px,calc(100% - 10px) 17px !important; background-repeat: no-repeat !important; background-size: 5px 5px !important; }
.demo-date-popover { position: fixed; z-index: 1000; width: 298px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); box-shadow: 0 18px 55px rgba(7,29,49,.2); }
.demo-date-heading { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 6px; }
.demo-date-heading strong { text-align: center; text-transform: capitalize; }
.demo-date-heading button { min-height: 32px; border: 0; background: var(--surface-muted); }
.demo-date-week,.demo-date-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.demo-date-week { margin: 12px 0 4px; color: var(--text-muted); font-size: .6rem; text-align: center; }
.demo-date-days button { min-width: 0; min-height: 34px; padding: 0; border: 0; background: transparent; }
.demo-date-days button[data-today] { box-shadow: inset 0 0 0 1px var(--accent); }
.demo-date-days button[aria-current="date"] { color: #fff; background: var(--ink); }
.demo-date-actions { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.demo-date-actions button { min-height: 32px; border: 0; color: var(--ink); background: transparent; }

.demo-detail-drawer { width: min(460px,100vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--surface); box-shadow: -20px 0 60px rgba(7,29,49,.18); }
.demo-detail-drawer::backdrop { background: rgba(7,29,49,.38); }
.demo-drawer-shell { min-height: 100%; padding: 38px 30px; }
.demo-drawer-shell > p { margin: 0 0 8px; color: var(--accent); font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.demo-drawer-shell > h2 { margin: 0 42px 24px 0; color: var(--ink); font: 600 1.75rem/1.1 var(--demo-serif); }
.demo-drawer-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.demo-drawer-metrics div { display: grid; gap: 5px; padding: 16px 10px 16px 0; border-bottom: 1px solid var(--border); }
.demo-drawer-metrics span { color: var(--text-muted); font-size: .68rem; }
.demo-drawer-metrics strong { color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.demo-drawer-insight { margin: 20px 0; padding: 14px; border-left: 3px solid var(--accent); background: var(--surface-muted); font-size: .82rem; line-height: 1.6; }

.demo-revenue-quality-ranked { grid-template-columns: 1fr; }
.demo-analysis-link-grid a i { justify-self: start; padding: 4px 8px; border-radius: 999px; color: var(--text-muted); background: var(--surface-muted); font-size: .62rem; letter-spacing: .05em; }
.demo-analysis-link-grid a[data-status="positive"] i { color: var(--positive); background: color-mix(in srgb,var(--positive) 10%,white); }
.demo-analysis-link-grid a[data-status="warning"] i { color: var(--warning); background: color-mix(in srgb,var(--warning) 10%,white); }
.demo-analysis-link-grid a[data-status="negative"] i { color: var(--negative); background: color-mix(in srgb,var(--negative) 10%,white); }

.demo-cash-report-detail-disclosure,.demo-validation-disclosure { padding: 0; overflow: hidden; }
.demo-cash-report-detail-disclosure > summary,.demo-validation-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; cursor: pointer; list-style: none; }
.demo-cash-report-detail-disclosure > summary::-webkit-details-marker,.demo-validation-disclosure > summary::-webkit-details-marker { display: none; }
.demo-cash-report-detail-disclosure > summary span { display: grid; gap: 3px; }
.demo-cash-report-detail-disclosure > summary small,.demo-validation-disclosure > summary small { color: var(--text-muted); font-size: .68rem; }
.demo-cash-report-detail-disclosure[open] > summary,.demo-validation-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.demo-validation-disclosure > summary span { color: var(--positive); font-weight: 800; }
.demo-cash-report-table th:first-child,.demo-cash-report-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.demo-cash-report-table thead th:first-child { z-index: 5; background: var(--surface-muted); }
.demo-cash-compact-insight .demo-warning-list { max-width: 900px; }
.demo-formula-help { margin-top: 14px; border-top: 1px solid var(--border); }
.demo-formula-help summary { padding: 12px 0; color: var(--text-muted); cursor: pointer; font-size: .72rem; font-weight: 750; }
.demo-formula-help > div { padding: 0 0 14px; }
.demo-breakeven-flow + .demo-breakeven-flow { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.demo-breakeven-result strong { font: 700 clamp(2rem,3.2vw,3rem)/1 var(--demo-sans); font-variant-numeric: tabular-nums; }

@media (min-width: 1180px) {
  [data-cash-account-table] td:nth-child(1) { width: 24%; }
  [data-cash-account-table] td:nth-child(2) { width: 9%; }
  [data-cash-account-table] td:nth-child(3) { width: 19%; text-align: right; }
  [data-cash-account-table] td:nth-child(4) { width: 20%; }
  [data-cash-account-table] td:nth-child(5) { width: 18%; text-align: right; }
  [data-cash-account-table] td:nth-child(6) { width: 10%; }
}

@media (max-width: 1440px) {
  .demo-app-topbar { grid-template-columns: 205px minmax(330px,.85fr) minmax(260px,1fr) max-content; padding-inline: 14px; }
  .demo-app-brand small { display: none; }
  .demo-business-switcher button { padding-inline: 7px; }
  .demo-app-layout { grid-template-columns: 226px minmax(0,1fr); }
  .demo-app-sidebar { width: 226px; }
  .demo-sidebar-compact .demo-app-layout { grid-template-columns: 70px minmax(0,1fr); }
  .demo-app-sidebar.is-compact { width: 70px; }
  .demo-entry-grid th,.demo-entry-grid td { padding-inline: 8px; }
  .demo-entry-grid td { font-size: .72rem; }
  .demo-entry-grid td:nth-child(6) { max-width: 140px; }
  .demo-cash-management-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1160px) {
  .demo-app-topbar { grid-template-columns: minmax(150px,190px) 1fr max-content; }
  .demo-fx-ticker { grid-column: 1 / -1; grid-row: 2; max-height: 38px; }
  .demo-app-layout,.demo-sidebar-compact .demo-app-layout { display: block; }
  .demo-app-sidebar,.demo-app-sidebar.is-compact { position: static; width: 100%; min-height: 0; }
  .demo-sidebar-toggle,.demo-sidebar-user,.demo-sidebar-note { display: none; }
  .demo-app-sidebar nav { display: flex; overflow-x: auto; }
  .demo-nav-section { flex: 0 0 auto; }
  .demo-nav-section > summary { display: none; }
  .demo-nav-section > div { display: flex; margin: 0; padding: 0; border: 0; }
  .demo-app-sidebar nav a { min-width: max-content; }
  .demo-entry-filter-primary { grid-template-columns: repeat(2,minmax(160px,1fr)); }
}

@media (max-width: 760px) {
  .demo-app-topbar { display: flex; flex-wrap: wrap; padding: 10px 12px; }
  .demo-business-switcher { order: 3; width: 100%; }
  .demo-fx-ticker { order: 4; width: 100%; }
  .demo-app-main { padding: 22px 14px 52px; }
  .demo-view-heading h1 { font-size: 1.9rem; }
  .demo-entry-filter-primary { grid-template-columns: 1fr; }
  .demo-entry-pagination { align-items: flex-start; flex-direction: column; }
  .demo-grid-footer-metrics { width: 100%; justify-content: flex-start; }
  .demo-page-buttons { max-width: 100%; overflow-x: auto; }
  .demo-detail-drawer { width: 100vw; }
  .demo-drawer-shell { padding: 32px 20px; }
}

/* NOVA UI V3 — shared financial intelligence system */
:root {
  --text-primary: #071d31;
  --text-secondary: #304653;
  --text-muted: #667681;
  --text-on-dark: #f7faf9;
  --text-positive: #106a4d;
  --text-negative: #a93442;
  --surface-default: #fff;
  --surface-emphasis: #f4f1e9;
  --surface-dark: #092942;
  --surface-subtle: #f1f3f2;
  --grid-row-height: 42px;
  --type-page: clamp(1.9rem,2.4vw,2.2rem);
  --type-major: clamp(1.35rem,1.8vw,1.6rem);
  --type-section: clamp(1.08rem,1.35vw,1.3rem);
  --type-kpi: clamp(1.55rem,2vw,2rem);
  --type-kpi-secondary: clamp(1.25rem,1.7vw,1.6rem);
  --type-body: .875rem;
  --type-small: .75rem;
}

.demo-app-body { color: var(--text-secondary); font-size: var(--type-body); }
.demo-view-heading h1 { font-size: var(--type-page); color: var(--text-primary); line-height: 1.12; }
.demo-analysis-panel-heading h2,.demo-panel-heading h2 { font-size: var(--type-major); color: var(--text-primary); }
.demo-panel-heading h3,.demo-analysis-panel h3,.demo-dialog h2,.demo-dialog-shell-heading h2 { font-size: var(--type-section); color: var(--text-primary); }
.demo-page-description,.demo-panel-heading small,.demo-analysis-panel-heading small,.demo-app-body small { color: var(--text-muted); font-size: var(--type-small); line-height: 1.45; }
.demo-kpi-grid strong,.demo-cash-report-kpis strong,.demo-revenue-quality-kpis strong,.demo-ytd-kpi-grid strong,.demo-breakeven-kpi-grid strong,.demo-cash-resilience-grid strong,.demo-monthly-spend-kpis strong { color: var(--text-primary); font: 760 var(--type-kpi)/1.08 var(--demo-sans); font-variant-numeric: tabular-nums lining-nums; }
.demo-product-kpis strong,.demo-expense-trend-kpis strong,.demo-ytd-stat-list strong,.demo-scenario-card dd { font: 740 var(--type-kpi-secondary)/1.12 var(--demo-sans); font-variant-numeric: tabular-nums; }
.demo-value-positive,.positive,[data-direction="up"] { color: var(--text-positive) !important; }
.demo-value-negative,.negative,[data-direction="down"] { color: var(--text-negative) !important; }

.demo-ytd-forecast-panel { color: var(--text-primary); background: var(--surface-emphasis); }
.demo-ytd-forecast-panel :is(h3,span,strong,p,small) { color: inherit; }
.demo-ytd-forecast-panel .demo-panel-heading :is(span,small),.demo-ytd-forecast-panel > p { color: var(--text-muted); }
.demo-breakeven-result { color: var(--text-on-dark); background: var(--surface-dark); }
.demo-breakeven-result :is(span,strong,p) { color: inherit; }
.demo-breakeven-result strong { font-size: clamp(1.85rem,2.8vw,2.55rem); }
.demo-ytd-scenarios > article > strong { font-size: clamp(1.35rem,1.8vw,1.65rem); }
.demo-ytd-scenarios > article { padding: 18px; }
.demo-formula-help[open] { padding-inline: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); }
.demo-formula-help code { display: block; padding: 12px; border-radius: 6px; color: var(--text-primary); background: var(--surface-default); font-size: .78rem; line-height: 1.55; }

.demo-grid-toolbar { min-height: 42px; }
.demo-grid-search { margin-right: auto; }
.demo-grid-search input { width: min(320px,42vw); min-height: 36px; padding: 7px 34px 7px 11px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-primary); background: var(--surface-default); font: 600 .76rem var(--demo-sans); }
.demo-column-menu > div { width: 270px; max-height: min(520px,70vh); overflow-y: auto; }
.demo-column-menu > div > p { margin: 0 0 7px; color: var(--text-muted); font-size: .67rem; }
.demo-column-option { display: grid; grid-template-columns: 30px 1fr; align-items: center; border: 1px solid transparent; border-radius: 6px; }
.demo-column-option:hover { border-color: var(--border); background: var(--surface-subtle); }
.demo-column-drag { min-width: 30px !important; min-height: 32px !important; padding: 0 !important; border: 0 !important; color: var(--text-muted) !important; background: transparent !important; cursor: grab; }
.demo-column-option label { padding: 6px 5px 6px 0; }
.demo-column-menu [data-entry-columns-reset],.demo-column-menu [data-cash-movement-columns-reset] { justify-self: start; margin-top: 6px; }
.demo-operational-grid .demo-table { width: max-content; min-width: 100%; table-layout: fixed; }
.demo-table th,.demo-table td { height: var(--grid-row-height); padding: 7px 12px; }
.demo-table th:first-child,.demo-table td:first-child { padding-left: 16px; }
.demo-table th:last-child,.demo-table td:last-child { padding-right: 16px; }
.demo-operational-grid th { position: sticky; }
.demo-operational-grid th[data-grid-column] { position: sticky; }
.demo-column-resize { position: absolute !important; z-index: 4; top: 0; right: -4px; width: 9px; min-width: 9px !important; height: 100%; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; cursor: col-resize; }
.demo-column-resize::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 4px; width: 1px; background: transparent; }
.demo-column-resize:hover::after { background: var(--accent); }
.demo-column-filter-field { position: relative; display: block; }
.demo-column-filter-field input { padding-right: 25px !important; }
.demo-column-filter-field button { position: absolute; top: 1px; right: 1px; width: 27px; min-width: 27px !important; height: 27px; min-height: 27px !important; padding: 0 !important; border: 0 !important; color: var(--text-muted) !important; background: transparent !important; }
.demo-column-filters th.is-filtered { box-shadow: inset 0 -2px var(--accent); }
.demo-cash-movement-grid td[data-grid-column="amount"] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-filter-context { display: flex; align-items: center; gap: 7px; margin: -2px 0 14px; padding: 9px 12px; border: 1px solid color-mix(in srgb,var(--accent) 38%,var(--border)); border-radius: 8px; background: color-mix(in srgb,var(--accent) 7%,white); }
.demo-filter-context span { color: var(--text-muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
.demo-filter-context b { padding: 4px 8px; border-radius: 999px; color: var(--text-primary); background: var(--surface-default); font-size: .7rem; }
.demo-filter-context button { margin-left: auto; min-height: 30px; border: 0; color: var(--text-primary); background: transparent; }

.demo-dialog,.demo-detail-drawer { border-radius: 12px; color: var(--text-secondary); background: var(--surface-default); }
.demo-dialog::backdrop,.demo-detail-drawer::backdrop { background: rgba(4,20,34,.48); backdrop-filter: blur(2px); }
.demo-dialog-close { display: grid; width: 40px; min-width: 40px; height: 40px; min-height: 40px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--text-primary); background: var(--surface-default); font: 500 1.35rem/1 var(--demo-sans); }
.demo-dialog-close:hover { color: var(--text-negative); border-color: color-mix(in srgb,var(--negative) 35%,var(--border)); background: color-mix(in srgb,var(--negative) 6%,white); }
.demo-dialog-shell,.demo-dialog-form { padding: 26px; }
.demo-drawer-shell { padding: 30px 28px; }

.demo-date-heading .demo-date-level { width: 100%; color: var(--text-primary); background: transparent; font-weight: 800; text-transform: capitalize; }
.demo-date-months,.demo-date-years { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 14px 0 4px; }
.demo-date-months button,.demo-date-years button { min-height: 44px; border: 1px solid transparent; color: var(--text-secondary); background: var(--surface-subtle); text-transform: capitalize; }
.demo-date-months button:hover,.demo-date-years button:hover { border-color: var(--accent); }
.demo-date-months button[aria-current="date"],.demo-date-years button[aria-current="date"] { color: var(--text-on-dark); background: var(--surface-dark); }

@media (min-width: 1000px) {
  .demo-cash-management-grid { grid-template-columns: minmax(290px,340px) minmax(0,1fr); align-items: start; }
  .demo-cash-management-grid > form { padding: 18px; }
  .demo-cash-management-grid > form .demo-form-grid-two { grid-template-columns: 1fr; }
  .demo-cash-management-grid > article { min-width: 0; }
}

.demo-cash-report-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
.demo-cash-report-kpis article { min-height: 96px; padding: 14px 16px; }
.demo-cash-report-kpis strong { font-size: clamp(1.25rem,1.55vw,1.55rem); }
.demo-cash-report-visual-panel { padding-block: 18px; }
.demo-financial-waterfall { min-height: 168px; padding-top: 8px; }
.demo-waterfall-step > div { min-height: 92px; }
.demo-cash-report-detail-disclosure > summary { position: relative; }
.demo-disclosure-state { display: inline-flex; align-items: center; gap: 10px; }
.demo-disclosure-state > b { transition: transform .15s ease; }
.demo-cash-report-detail-disclosure[open] .demo-disclosure-state > b { transform: rotate(180deg); }
.demo-cash-report-table th,.demo-cash-report-table td { height: 34px; padding: 5px 10px; font-size: .71rem; }
.demo-cash-report-table tr[data-kind="subtotal"] :is(th,td),.demo-cash-report-table tr[data-kind="total"] :is(th,td),.demo-cash-report-table tr[data-kind="balance"] :is(th,td) { height: 39px; }
.demo-cash-report-table .demo-cash-report-section th { position: sticky; left: 0; z-index: 4; width: max-content; max-width: min(420px,70vw); padding-left: 14px; color: var(--text-primary); background: var(--surface-emphasis); box-shadow: 8px 0 12px rgba(7,29,49,.04); }
.demo-validation-disclosure > summary { min-height: 54px; }
.demo-validation-disclosure .demo-cash-report-control { padding: 14px 18px 18px; }
.demo-validation-disclosure .demo-panel-heading { margin-bottom: 10px; }
.demo-validation-disclosure [data-cash-report-control] { display: grid; grid-template-columns: repeat(5,minmax(120px,1fr)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.demo-validation-disclosure [data-cash-report-control] > div { display: grid; gap: 3px; padding: 11px; border-right: 1px solid var(--border); background: var(--surface-default); }
.demo-validation-disclosure [data-cash-report-control] span { color: var(--text-muted); font-size: .66rem; }
.demo-validation-disclosure [data-cash-report-control] strong { color: var(--text-primary); font-size: .75rem; }

.demo-portfolio-controls { display: flex; align-items: center; gap: 12px; }
.demo-view-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); }
.demo-view-toggle button { min-height: 30px; padding: 0 11px; border: 0; color: var(--text-muted); background: transparent; }
.demo-view-toggle button.active { color: var(--text-on-dark); background: var(--surface-dark); }
.demo-portfolio-controls label { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: .7rem; }
.demo-portfolio-controls select { min-height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-default); }
.demo-product-board { display: grid; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.demo-product-board[hidden],.demo-product-performance[hidden] { display: none !important; }
.demo-product-board-row { position: relative; display: grid; min-height: 66px; grid-template-columns: minmax(210px,1.4fr) repeat(3,minmax(120px,.7fr)); align-items: center; gap: 16px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0 !important; color: var(--text-secondary); background: linear-gradient(90deg,color-mix(in srgb,var(--positive) 7%,white) var(--contribution),transparent var(--contribution)); text-align: left; }
.demo-product-board-row:last-child { border-bottom: 0; }
.demo-product-board-row:hover,.demo-product-board-row:focus-visible { z-index: 1; background-color: var(--surface-emphasis); }
.demo-product-board-row > span { display: grid; gap: 3px; }
.demo-product-board-row small { color: var(--text-muted); font-size: .66rem; }
.demo-product-board-row strong { color: var(--text-primary); font-size: .82rem; font-variant-numeric: tabular-nums; }
.demo-product-board-name strong { font-size: .9rem; }
.demo-product-performance { display: grid; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.demo-product-performance-row {
  display: grid;
  min-height: 84px;
  grid-template-columns: minmax(210px,1.05fr) minmax(280px,1fr) minmax(240px,1.2fr);
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
  color: var(--text-secondary);
  background: var(--surface-default);
  text-align: left;
}
.demo-product-performance-row:last-child { border-bottom: 0; }
.demo-product-performance-row:is(:hover,:focus-visible) { z-index: 1; background: var(--surface-emphasis); }
.demo-product-performance-row[data-contribution-direction="negative"] { box-shadow: inset 3px 0 var(--negative); }
.demo-product-performance-name { display: grid; min-width: 0; gap: 4px; }
.demo-product-performance-name strong { color: var(--text-primary); font-size: .86rem; overflow-wrap: anywhere; }
.demo-product-performance-name small { color: var(--text-muted); font-size: .65rem; line-height: 1.35; }
.demo-product-performance-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.demo-product-performance-values > span { display: grid; min-width: 0; gap: 3px; }
.demo-product-performance-values small,.demo-comparative-bars small { color: var(--text-muted); font-size: .61rem; font-weight: 750; text-transform: uppercase; }
.demo-product-performance-values strong { color: var(--text-primary); font-size: clamp(.74rem,.85vw,.88rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-comparative-bars { display: grid; min-width: 0; gap: 8px; }
.demo-comparative-bars > span { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 8px; }
.demo-comparative-bars i { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-subtle); }
.demo-comparative-bars b { display: block; width: 0; height: 100%; min-width: 2px; border-radius: inherit; background: var(--surface-dark); }
.demo-comparative-bars > span[data-direction="positive"] b { background: var(--positive); }
.demo-comparative-bars > span[data-direction="negative"] b { background: var(--negative); }
.demo-comparative-bars > span[data-direction="flat"] b { background: var(--text-muted); }

.demo-revenue-portfolio-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.demo-revenue-portfolio-toolbar label { width: min(100%,360px); }
.demo-revenue-portfolio-toolbar input { width: 100%; }
.demo-revenue-portfolio { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.demo-revenue-quadrant-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-default); }
.demo-revenue-quadrant-card > header { display: flex; min-height: 92px; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--border); background: var(--surface-emphasis); }
.demo-revenue-quadrant-card > header > div { display: grid; gap: 3px; }
.demo-revenue-quadrant-card > header span { color: var(--accent-strong); font-size: .59rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.demo-revenue-quadrant-card > header h4 { margin: 0; color: var(--text-primary); font: 650 1rem/1.2 var(--demo-serif); }
.demo-revenue-quadrant-card > header p { margin: 0; color: var(--text-muted); font-size: .65rem; }
.demo-revenue-quadrant-card > header > strong { display: grid; min-width: 30px; height: 30px; place-items: center; border-radius: 999px; color: var(--text-primary); background: var(--surface-default); font-size: .74rem; font-variant-numeric: tabular-nums; }
.demo-revenue-quadrant-card[data-portfolio-quadrant="growing-large"] { border-top: 3px solid var(--positive); }
.demo-revenue-quadrant-card[data-portfolio-quadrant="growing-small"] { border-top: 3px solid var(--accent); }
.demo-revenue-quadrant-card[data-portfolio-quadrant="shrinking-large"] { border-top: 3px solid var(--negative); }
.demo-revenue-quadrant-card[data-portfolio-quadrant="low-priority"] { border-top: 3px solid var(--text-muted); }
.demo-revenue-quadrant-list { display: grid; max-height: 390px; overflow-y: auto; overscroll-behavior: contain; }
.demo-revenue-portfolio-row {
  display: grid;
  min-height: 68px;
  grid-template-columns: minmax(140px,1.35fr) repeat(3,minmax(78px,.65fr));
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0 !important;
  color: var(--text-secondary);
  background: var(--surface-default);
  text-align: left;
}
.demo-revenue-portfolio-row:last-child { border-bottom: 0; }
.demo-revenue-portfolio-row:is(:hover,:focus-visible) { z-index: 1; background: var(--surface-emphasis); }
.demo-revenue-portfolio-row > span { display: grid; min-width: 0; gap: 3px; }
.demo-revenue-portfolio-row small { color: var(--text-muted); font-size: .6rem; }
.demo-revenue-portfolio-row strong { color: var(--text-primary); font-size: clamp(.69rem,.78vw,.78rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-revenue-portfolio-name strong { white-space: normal; overflow-wrap: anywhere; }
.demo-revenue-direction[data-direction="up"] strong { color: var(--positive); }
.demo-revenue-direction[data-direction="down"] strong { color: var(--negative); }
.demo-revenue-direction[data-direction="flat"] strong { color: var(--text-secondary); }

[data-expense-view-panel="overview"] { display: grid; gap: 14px; }
[data-expense-view-panel="overview"] .demo-expense-control-copy { order: 1; margin: 0; font-size: .9rem; }
[data-expense-view-panel="overview"] .demo-expense-control-inputs { order: 2; margin: 0; }
[data-expense-view-panel="overview"] .demo-expense-heatmap-panel { order: 3; }
[data-expense-view-panel="overview"] .demo-expense-control-grid { order: 4; }
[data-expense-view-panel="overview"] .demo-expense-control-note { order: 5; }
.demo-expense-control-grid article { padding: 16px; }
.demo-expense-control-grid > article > strong { font-size: var(--type-kpi-secondary); }
.demo-definition-hub { align-items: stretch; }
.demo-definition-hub-card { display: flex; min-height: 230px; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px; }
.demo-definition-hub-card > button { align-self: flex-start; min-width: 190px; }

@media (max-width: 1100px) {
  .demo-validation-disclosure [data-cash-report-control] { grid-template-columns: repeat(2,minmax(140px,1fr)); }
  .demo-product-board-row { grid-template-columns: minmax(190px,1.2fr) repeat(3,minmax(110px,.7fr)); }
  .demo-product-performance-row { grid-template-columns: minmax(180px,.9fr) minmax(260px,1fr); }
  .demo-comparative-bars { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .demo-revenue-portfolio { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .demo-view-heading h1 { font-size: 1.8rem; }
  .demo-cash-report-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .demo-product-board { overflow-x: auto; }
  .demo-product-board-row { min-width: 720px; }
  .demo-product-performance-row { grid-template-columns: 1fr; }
  .demo-product-performance-values { grid-template-columns: repeat(3,minmax(90px,1fr)); }
  .demo-revenue-portfolio-row { grid-template-columns: minmax(130px,1.2fr) repeat(3,minmax(75px,.7fr)); }
  .demo-portfolio-controls { align-items: flex-end; flex-direction: column; }
  .demo-filter-context { align-items: flex-start; flex-wrap: wrap; }
  .demo-filter-context button { margin-left: 0; }
  .demo-validation-disclosure [data-cash-report-control] { grid-template-columns: 1fr; }
  .demo-dialog-shell,.demo-dialog-form,.demo-drawer-shell { padding: 22px 18px; }
}

/* NOVA live-UAT maturity layer: shared financial typography and interactions */
:root {
  --type-page: clamp(1.875rem,2.15vw,2.125rem);
  --type-major: clamp(1.375rem,1.65vw,1.625rem);
  --type-kpi: clamp(1.5rem,1.85vw,1.875rem);
  --type-kpi-secondary: clamp(1.1875rem,1.45vw,1.5rem);
  --type-financial-secondary: clamp(1.02rem,1.15vw,1.25rem);
  --paired-surface-padding: 24px;
  --paired-surface-header-height: 110px;
  --surface-dark-readable: #17425f;
  --surface-dark-readable-strong: #113954;
}

.demo-kpi-grid article,
.demo-cash-report-kpis article,
.demo-product-kpis article,
.demo-revenue-quality-kpis article,
.demo-ytd-kpi-grid article,
.demo-breakeven-kpi-grid article,
.demo-cash-resilience-grid article,
.demo-monthly-spend-kpis article,
.demo-scenario-card dl div { min-width: 0; }

.demo-kpi-grid strong,
.demo-cash-report-kpis strong,
.demo-product-kpis strong,
.demo-revenue-quality-kpis strong,
.demo-ytd-kpi-grid strong,
.demo-breakeven-kpi-grid strong,
.demo-cash-resilience-grid strong,
.demo-monthly-spend-kpis strong,
.demo-ytd-forecast-grid strong,
.demo-ytd-scenarios strong,
.demo-scenario-card dd,
.demo-metric-list strong,
.demo-expense-control-inputs strong,
.demo-expense-trend-kpis strong {
  max-width: 100%;
  font-family: var(--demo-sans);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.demo-kpi-grid strong,
.demo-ytd-kpi-grid strong,
.demo-revenue-quality-kpis strong,
.demo-cash-resilience-grid strong,
.demo-monthly-spend-kpis strong { font-size: var(--type-kpi); }
.demo-product-kpis strong,
.demo-expense-trend-kpis strong,
.demo-ytd-forecast-grid strong,
.demo-scenario-card dd,
.demo-metric-list strong { font-size: var(--type-kpi-secondary); }

/* Shared side-by-side surfaces keep a common geometry without stretching content. */
.demo-paired-surface-grid { align-items: stretch; }
.demo-paired-surface-grid > .demo-paired-surface {
  box-sizing: border-box;
  height: 100%;
  margin-top: 0;
  padding: var(--paired-surface-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.demo-paired-surface-grid > .demo-paired-surface + .demo-paired-surface { margin-top: 0; }
.demo-paired-surface > .demo-panel-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: start;
  gap: var(--space-1);
  height: var(--paired-surface-header-height);
  margin-bottom: var(--space-4);
}
.demo-paired-surface-primary { border-top-color: color-mix(in srgb,var(--accent) 42%,var(--border)); }

/* Denser audit statement while preserving subtotal/category hierarchy. */
.demo-cash-report-table th,
.demo-cash-report-table td { height: 30px; padding: 3px 9px; font-size: .69rem; line-height: 1.2; }
.demo-cash-report-table thead th { height: 34px; padding-block: 4px; }
.demo-cash-report-table thead small { margin-top: 2px; font-size: .55rem; line-height: 1.2; }
.demo-cash-report-table tr[data-kind="subtotal"] :is(th,td),
.demo-cash-report-table tr[data-kind="total"] :is(th,td) { height: 33px; }
.demo-cash-report-table tr[data-kind="balance"] :is(th,td) {
  height: 36px;
  color: #fff !important;
  background: var(--surface-dark-readable);
}
.demo-cash-report-table tr[data-kind="balance"] th:first-child { color: #fff !important; background: var(--surface-dark-readable-strong); }
.demo-cash-report-table tr[data-kind="balance"] :is(button,.positive,.negative,.demo-value-positive,.demo-value-negative) { color: #fff !important; }
.demo-cash-report-table tr[data-kind="balance"] button { border-bottom-color: rgba(255,255,255,.55); }
.demo-cash-report-table td button { min-height: 22px !important; line-height: 1.2; }
.demo-cash-report-table .demo-cash-report-section th { height: 30px; padding-block: 4px; }
.demo-dialog-shell-heading > span { color: var(--text-muted); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Expense control is a true, mutually-exclusive tab region. */
[data-expense-view-panel][hidden] { display: none !important; }
[data-expense-view-panel="overview"]:not([hidden]) { display: grid; gap: 14px; }
.demo-subsection-tabs button[aria-selected="true"] { color: var(--text-on-dark); background: var(--surface-dark); box-shadow: inset 0 -3px var(--accent); }

/* Surface-aware YTD forecast contrast. */
.demo-ytd-forecast-panel { color: var(--text-primary); background: var(--surface-emphasis); }
.demo-ytd-forecast-panel .demo-panel-heading h3,
.demo-ytd-forecast-panel .demo-ytd-forecast-grid strong { color: var(--text-primary) !important; }
.demo-ytd-forecast-panel .demo-panel-heading :is(span,small),
.demo-ytd-forecast-panel .demo-ytd-forecast-grid span,
.demo-ytd-forecast-panel > p { color: var(--text-muted) !important; }
.demo-ytd-forecast-grid { border-top-color: var(--border); }
.demo-ytd-forecast-grid > div { padding-block: 10px; border-bottom-color: var(--border); }

/* Compact break-even composition with 100M+ resilient KPI values. */
.demo-breakeven-grid { align-items: stretch; }
.demo-breakeven-grid > .demo-panel + .demo-panel { margin-top: 0; }
.demo-breakeven-result { min-height: 170px; padding: 22px 24px; justify-content: center; }
.demo-breakeven-result > strong { margin-top: 9px; font: 760 clamp(1.75rem,2.45vw,2.35rem)/1.02 var(--demo-sans); white-space: nowrap; }
.demo-breakeven-result > p { margin-top: 12px; }
.demo-breakeven-grid > .demo-panel:not(.demo-breakeven-result) { padding-block: 18px; }
.demo-breakeven-grid .demo-metric-list div { padding-block: 12px; }
.demo-breakeven-grid .demo-metric-list div:first-child { padding-top: 0; }
.demo-breakeven-kpi-grid article { min-height: 116px; padding: 15px; }
.demo-breakeven-kpi-grid strong { margin-block: 9px 4px; font-size: clamp(1.05rem,1.35vw,1.35rem); }

/* Scenario comparison stays prominent without oversized numbers. */
.demo-scenario-comparison { gap: 16px; }
.demo-scenario-card { padding: 22px; }
.demo-scenario-card h2 { margin: 6px 0 16px; font: 650 var(--type-major)/1.15 var(--demo-serif); }
.demo-scenario-card dl { gap: 8px; }
.demo-scenario-card dl div { padding-bottom: 8px; }
.demo-scenario-card dd { font-size: clamp(1.15rem,1.35vw,1.4rem); }
.demo-scenario-delta-panel { grid-column: 1 / -1; }
.demo-scenario-delta-list strong { font-size: var(--type-financial-secondary); }

/* Shared Definitions management cards and calm premium CTA. */
.demo-definition-center-grid { align-items: stretch; }
.demo-definition-center-grid > .demo-panel + .demo-panel { margin-top: 0; }
.demo-definition-hub-card { height: 100%; min-height: 224px; padding: 24px; }
.demo-definition-hub-card > div { display: grid; align-content: start; }
.demo-management-cta {
  display: grid;
  width: min(100%,250px);
  min-height: 44px !important;
  grid-template-columns: 30px minmax(0,1fr) 24px;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb,var(--accent) 40%,var(--border));
  border-radius: 8px;
  color: var(--text-primary);
  background: color-mix(in srgb,var(--accent) 6%,var(--surface-default));
  text-align: left;
}
.demo-management-cta i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 6px; color: var(--text-primary); background: var(--surface-default); font-style: normal; }
.demo-management-cta span { overflow: hidden; font-size: .76rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.demo-management-cta b { color: var(--accent); font-size: 1rem; text-align: center; transition: transform .16s ease; }
.demo-management-cta:hover b,.demo-management-cta:focus-visible b { transform: translateX(3px); }

/* Shared small-grid pagination for master and modal tables. */
.demo-small-grid-pagination { padding-top: 10px; }
.demo-small-grid-pagination[hidden] { display: none !important; }
.demo-small-grid-pagination .demo-page-buttons { flex-wrap: wrap; }

/* Collapsed navigation keeps context through tooltips and an accessible flyout. */
.demo-sidebar-flyout[hidden] { display: none !important; }
.demo-sidebar-flyout {
  position: fixed;
  z-index: 1200;
  width: min(286px,calc(100vw - 100px));
  max-height: min(520px,calc(100vh - 20px));
  padding: 9px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fff;
  background: #0b2d48;
  box-shadow: 0 18px 46px rgba(4,20,34,.28);
}
.demo-sidebar-flyout > strong { display: block; padding: 8px 10px 10px; color: rgba(255,255,255,.56); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.demo-sidebar-flyout > div { display: grid; gap: 2px; }
.demo-sidebar-flyout a { display: flex; min-height: 38px; align-items: center; padding: 8px 10px; border-radius: 6px; color: rgba(255,255,255,.78); font-size: .76rem; font-weight: 700; text-decoration: none; }
.demo-sidebar-flyout a:is(:hover,:focus-visible),.demo-sidebar-flyout a.active { color: #fff; background: rgba(255,255,255,.09); }
.demo-sidebar-flyout a.active { box-shadow: inset 3px 0 var(--accent); }

@media (min-width: 981px) {
  .demo-app-sidebar.is-compact { overflow: visible; }
  .demo-app-sidebar.is-compact .demo-nav-section > div { display: none !important; }
  .demo-app-sidebar.is-compact :is(.demo-nav-section > summary,.demo-nav-home) { position: relative; }
  .demo-app-sidebar.is-compact :is(.demo-nav-section > summary,.demo-nav-home)::after {
    content: attr(data-sidebar-tooltip);
    position: absolute;
    z-index: 1100;
    top: 50%;
    left: calc(100% + 12px);
    width: max-content;
    max-width: 220px;
    padding: 6px 9px;
    border-radius: 6px;
    color: #fff;
    background: #071d31;
    box-shadow: 0 8px 24px rgba(4,20,34,.22);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    text-transform: none;
    transform: translate(4px,-50%);
    transition: opacity .12s ease,transform .12s ease;
  }
  .demo-app-sidebar.is-compact :is(.demo-nav-section > summary,.demo-nav-home):is(:hover,:focus-visible)::after { opacity: 1; transform: translate(0,-50%); }
}

@media (max-width: 1440px) {
  .demo-kpi-grid strong,.demo-ytd-kpi-grid strong,.demo-revenue-quality-kpis strong,.demo-cash-resilience-grid strong,.demo-monthly-spend-kpis strong { font-size: clamp(1.28rem,1.65vw,1.55rem); }
  .demo-breakeven-kpi-grid { gap: 8px; }
  .demo-breakeven-kpi-grid article { padding-inline: 12px; }
  .demo-scenario-card dd { font-size: clamp(1.05rem,1.35vw,1.25rem); }
}

@media (max-width: 980px) {
  .demo-paired-surface > .demo-panel-heading { height: auto; }
  .demo-app-sidebar.is-compact .demo-nav-section > div { display: flex !important; }
  .demo-sidebar-flyout { display: none !important; }
}

/* Product performance V1: existing surfaces, compact line editing and attribution controls. */
.demo-checkbox-label { display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 9px; }
.demo-checkbox-label input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.demo-checkbox-label span,.demo-checkbox-label small { grid-column: 2; }
.demo-product-line-editor { margin-top: 18px; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); }
.demo-product-line-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.demo-product-line-heading > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-product-line-heading span,.demo-product-line-heading p { color: var(--text-muted); }
.demo-product-line-heading h3 { margin: 3px 0; }
[data-product-line-rows] { display: grid; gap: 8px; }
.demo-product-line-row { display: grid; grid-template-columns: minmax(210px,1.7fr) minmax(90px,.55fr) minmax(120px,.75fr) minmax(120px,.75fr) minmax(110px,.65fr) 36px; align-items: end; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-default); }
.demo-product-line-row > label { min-width: 0; }
.demo-product-line-row :is(input,select) { width: 100%; }
.demo-product-line-internal { align-self: center; margin-top: 20px; }
.demo-product-line-remove { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-negative); background: var(--surface-default); font-size: 1.15rem; }
.demo-product-line-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; padding-top: 12px; }
.demo-product-line-total strong { font: 750 var(--type-financial-secondary)/1 var(--demo-sans); }
.demo-product-line-total small { color: var(--text-muted); }
.demo-catalog-management { display: grid; gap: 14px; margin-top: 18px; }
.demo-catalog-management > .demo-dialog-shell-heading { margin-top: 8px; }
.demo-definition-dialog-tabs { margin: 18px 0 14px; }
[data-product-definition-panel][hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.demo-entry-product-metrics { margin-bottom: 20px; }
.demo-entry-product-actions { margin-top: 20px; }
.demo-table-actions .demo-entry-detail-button { color: var(--text-primary); }
.demo-product-detail-drawer { width: min(680px,100vw); }
.demo-drawer-period { display: block; margin: -14px 0 22px; color: var(--text-muted); font-size: .72rem; font-weight: 700; }
.demo-product-group-summary { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-default); }
.demo-product-group-primary { display: grid; grid-template-columns: 1.35fr 1fr; background: var(--ink); }
.demo-product-group-primary article { display: grid; min-width: 0; gap: 5px; padding: 18px; }
.demo-product-group-primary article + article { border-left: 1px solid rgba(255,255,255,.14); }
.demo-product-group-primary span { color: rgba(255,255,255,.66); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.demo-product-group-primary strong { overflow-wrap: anywhere; color: #fff; font-size: clamp(1.35rem,2.3vw,1.7rem); font-variant-numeric: tabular-nums; line-height: 1.05; }
.demo-product-group-primary strong.demo-value-positive { color: #aee8d5; }
.demo-product-group-primary strong.demo-value-negative { color: #ffc0c5; }
.demo-product-group-secondary,.demo-product-group-attention { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; }
.demo-product-group-secondary { color: var(--text-muted); font-size: .68rem; }
.demo-product-group-secondary strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.demo-product-group-attention { border-top: 1px solid color-mix(in srgb,var(--warning) 26%,transparent); color: var(--warning); background: color-mix(in srgb,var(--warning) 7%,white); font-size: .67rem; }
.demo-product-group-attention strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.demo-product-detail-content { display: grid; gap: 12px; margin: 20px 0; }
.demo-product-catalog-detail { overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-default); }
.demo-product-catalog-detail > summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px; padding: 14px 42px 14px 16px; cursor: pointer; list-style: none; }
.demo-product-catalog-detail > summary::-webkit-details-marker { display: none; }
.demo-product-catalog-detail > summary::after { content: "+"; position: absolute; right: 16px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--surface-muted); font-size: .85rem; font-weight: 850; }
.demo-product-catalog-detail[open] > summary::after { content: "−"; color: #fff; background: var(--ink); }
.demo-product-catalog-detail > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.demo-product-catalog-detail > summary span { display: grid; min-width: 0; gap: 4px; }
.demo-product-catalog-detail > summary strong { color: var(--text-primary); font-size: .88rem; }
.demo-product-catalog-detail > summary small { color: var(--text-muted); font-size: .66rem; line-height: 1.4; }
.demo-product-catalog-detail > summary em { justify-self: start; padding: 3px 7px; border-radius: 999px; color: var(--warning); background: color-mix(in srgb,var(--warning) 9%,white); font-size: .58rem; font-style: normal; font-weight: 850; }
.demo-product-catalog-value { flex: 0 0 auto; align-items: end; text-align: right; }
.demo-product-catalog-value b { color: var(--text-primary); font-size: .82rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.demo-product-catalog-detail[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.demo-product-catalog-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 8px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.demo-product-catalog-tabs button { min-height: 36px; padding: 7px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: .65rem; font-weight: 800; cursor: pointer; }
.demo-product-catalog-tabs button:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.demo-product-catalog-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.demo-product-catalog-tabs button.active { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: none; }
.demo-product-catalog-detail > section { min-width: 0; }
.demo-product-financial-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: stretch; gap: 0; padding: 14px; border-bottom: 1px solid var(--border); background: var(--surface-default); }
.demo-product-financial-flow article { display: grid; min-width: 0; align-content: center; gap: 5px; padding: 12px; border-radius: 7px; background: var(--surface-subtle); }
.demo-product-financial-flow > i { align-self: center; padding: 0 8px; color: var(--text-muted); font-size: .84rem; font-style: normal; font-weight: 850; }
.demo-product-financial-flow span { color: var(--text-muted); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.demo-product-financial-flow strong { overflow-wrap: anywhere; color: var(--ink); font-size: .85rem; font-variant-numeric: tabular-nums; }
.demo-product-financial-flow small { color: var(--text-muted); font-size: .58rem; }
.demo-product-financial-flow article[data-contribution="positive"] { border-left: 3px solid var(--positive); background: color-mix(in srgb,var(--positive) 6%,white); }
.demo-product-financial-flow article[data-contribution="positive"] strong { color: var(--positive); }
.demo-product-financial-flow article[data-contribution="negative"] { border-left: 3px solid var(--negative); background: color-mix(in srgb,var(--negative) 6%,white); }
.demo-product-financial-flow article[data-contribution="negative"] strong { color: var(--negative); }
.demo-product-open-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: color-mix(in srgb,var(--warning) 25%,var(--border)); }
.demo-product-open-primary article { display: grid; min-width: 0; gap: 6px; padding: 18px 16px; background: color-mix(in srgb,var(--warning) 7%,white); }
.demo-product-open-primary span { color: var(--warning); font-size: .6rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.demo-product-open-primary strong { overflow-wrap: anywhere; color: var(--ink); font-size: clamp(1.05rem,2vw,1.25rem); font-variant-numeric: tabular-nums; }
.demo-product-open-progress { display: grid; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.demo-product-open-progress > span { display: flex; justify-content: space-between; gap: 10px; color: var(--text-secondary); font-size: .64rem; }
.demo-product-open-progress small { color: var(--warning); }
.demo-product-open-progress [role="progressbar"] { overflow: hidden; height: 6px; border-radius: 999px; background: var(--surface-muted); }
.demo-product-open-progress [role="progressbar"] i { display: block; height: 100%; border-radius: inherit; background: var(--warning); }
.demo-product-open-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px; }
.demo-product-open-secondary span { display: grid; min-width: 0; gap: 4px; color: var(--text-muted); font-size: .62rem; }
.demo-product-open-secondary strong { overflow-wrap: anywhere; color: var(--text-primary); font-size: .72rem; font-variant-numeric: tabular-nums; }
.demo-product-context-note,.demo-product-scenario-note { margin: 0; padding: 12px 16px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .64rem; line-height: 1.55; }
.demo-product-scenario { display: grid; }
.demo-product-scenario-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; background: var(--surface-subtle); }
.demo-product-scenario-inputs > p,.demo-product-scenario-output > p { grid-column: 1 / -1; margin: 0 0 2px; color: var(--text-muted); font-size: .6rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.demo-product-scenario-inputs label { display: grid; min-width: 0; gap: 5px; color: var(--text-secondary); font-size: .65rem; font-weight: 800; }
.demo-product-scenario-inputs input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface-default); color: var(--text-primary); font: 700 .74rem var(--demo-sans); font-variant-numeric: tabular-nums; }
.demo-product-scenario-inputs input:focus { outline: 2px solid color-mix(in srgb,var(--accent) 25%,transparent); outline-offset: 1px; }
.demo-product-scenario-inputs input:disabled { background: var(--surface-subtle); color: var(--text-muted); }
.demo-product-scenario-inputs small { color: var(--text-muted); font-size: .58rem; font-weight: 500; line-height: 1.35; }
.demo-product-scenario-output { display: grid; gap: 12px; padding: 16px; border-top: 1px solid var(--border); }
.demo-product-price-decision { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 8px; color: #fff; background: var(--ink); }
.demo-product-price-decision article { display: grid; min-width: 0; gap: 4px; }
.demo-product-price-decision article:last-child { text-align: right; }
.demo-product-price-decision span { color: rgba(255,255,255,.63); font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.demo-product-price-decision strong { overflow-wrap: anywhere; color: #fff; font-size: .82rem; font-variant-numeric: tabular-nums; }
.demo-product-price-decision > i { color: var(--accent); font-style: normal; font-weight: 900; }
.demo-product-price-decision small { color: #aee8d5; font-size: .6rem; font-weight: 800; }
.demo-product-scenario-results { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--border); }
.demo-product-scenario-results article,.demo-product-scenario-comparison article { display: grid; min-width: 0; gap: 5px; padding: 14px; background: var(--surface-default); }
.demo-product-scenario-results article[data-primary-result] { border-left: 3px solid var(--positive); background: color-mix(in srgb,var(--positive) 6%,white); }
.demo-product-scenario-results article[data-primary-result] strong { font-size: clamp(1.2rem,2.2vw,1.55rem); }
.demo-product-scenario-results article[data-primary-result] strong.demo-value-negative { color: var(--negative); }
.demo-product-scenario-results strong,.demo-product-scenario-comparison strong { overflow-wrap: anywhere; color: var(--text-primary); font-size: .82rem; font-variant-numeric: tabular-nums; }
.demo-product-scenario-results small,.demo-product-scenario-comparison small,.demo-product-target-result small { color: var(--text-muted); font-size: .58rem; line-height: 1.4; }
.demo-product-scenario-comparison { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--border); }
.demo-product-scenario-comparison article[data-decision-delta] { background: var(--surface-subtle); }
.demo-product-target-result { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3px 14px; padding: 15px 16px; border: 1px solid color-mix(in srgb,var(--warning) 35%,var(--border)); border-left: 4px solid var(--accent); border-radius: 8px; background: color-mix(in srgb,var(--warning) 8%,white); }
.demo-product-target-result > span { grid-column: 1 / -1; color: var(--warning); font-size: .6rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.demo-product-target-result > small { color: var(--text-muted); font-size: .62rem; }
.demo-product-target-result strong { grid-row: 2 / span 2; grid-column: 2; overflow-wrap: anywhere; color: var(--ink); font: 600 clamp(1.05rem,2vw,1.28rem)/1.2 var(--demo-serif); font-variant-numeric: tabular-nums; text-align: right; }
.demo-product-target-result em { color: var(--text-muted); font-size: .58rem; font-style: normal; line-height: 1.4; }
.demo-product-scenario-message { margin: 0; padding: 14px 16px; border-block: 1px solid var(--border); background: color-mix(in srgb,var(--warning) 8%,white); color: var(--text-secondary); font-size: .68rem; }
.demo-product-sales { display: grid; gap: 12px; padding: 14px; }
.demo-product-sale { padding: 14px; border-left: 3px solid var(--ink); background: var(--surface-default); }
.demo-product-sale header,.demo-product-sale footer,.demo-product-matches li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-product-sale header span { display: grid; gap: 2px; }
.demo-product-sale header strong,.demo-product-sale footer strong { color: var(--text-primary); font-size: .76rem; }
.demo-product-sale header small { color: var(--ink); font-size: .56rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.demo-product-sale > p,.demo-product-matches small { color: var(--text-muted); font-size: .64rem; }
.demo-product-sale header b { color: var(--positive); font-size: .76rem; font-variant-numeric: tabular-nums; }
.demo-product-sale > p { margin: 6px 0 12px; }
.demo-product-matches { padding: 11px 12px; border-left: 2px solid var(--border); background: var(--surface-subtle); }
.demo-product-matches > span { display: flex; justify-content: space-between; gap: 8px; color: var(--text-primary); font-size: .68rem; font-weight: 800; }
.demo-product-matches ul { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.demo-product-matches li { padding-top: 7px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: .67rem; }
.demo-product-matches li span { display: grid; gap: 2px; }
.demo-product-match-missing { color: var(--text-negative) !important; }
.demo-product-sale footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .66rem; }
.demo-product-detail-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 16px; background: var(--surface-default); }
.demo-product-detail-actions .demo-button { justify-content: center; text-align: center; }
.demo-expense-usage-summary { display: flex; align-items: stretch; justify-content: space-between; gap: 14px; margin: 14px 0; }
.demo-expense-usage-summary > button { display: grid; min-width: 220px; gap: 3px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); background: var(--surface-default); text-align: left; }
.demo-expense-usage-summary > button strong { font: 750 var(--type-financial-secondary)/1.1 var(--demo-sans); }
.demo-expense-usage-summary > button small { color: var(--text-muted); }
.demo-product-reconciliation-grid { display: flex; flex-wrap: wrap; }
.demo-product-reconciliation-grid > div { flex: 1 1 150px; }
.demo-product-reconciliation-grid > i { flex: 0 0 18px; }

@media (max-width: 1200px) {
  .demo-product-line-row { grid-template-columns: minmax(210px,1.6fr) minmax(90px,.55fr) minmax(110px,.75fr) minmax(120px,.8fr) 36px; }
  .demo-product-line-internal { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 760px) {
  .demo-product-line-heading,.demo-expense-usage-summary { align-items: stretch; flex-direction: column; }
  .demo-product-line-row { grid-template-columns: 1fr 1fr; }
  .demo-product-line-row > label:first-child { grid-column: 1 / -1; }
  .demo-product-line-remove { justify-self: end; }
  .demo-product-line-total { align-items: flex-end; flex-direction: column; }
  .demo-product-group-primary,.demo-product-open-primary,.demo-product-open-secondary,.demo-product-scenario-inputs,.demo-product-scenario-results,.demo-product-scenario-comparison { grid-template-columns: 1fr; }
  .demo-product-financial-flow { grid-template-columns: 1fr; gap: 6px; }
  .demo-product-financial-flow > i { transform: rotate(90deg); justify-self: center; }
  .demo-product-catalog-tabs { grid-template-columns: 1fr; }
  .demo-product-price-decision { grid-template-columns: 1fr; text-align: left; }
  .demo-product-price-decision article:last-child { text-align: left; }
  .demo-product-price-decision > i { transform: rotate(90deg); justify-self: start; }
  .demo-product-target-result { grid-template-columns: 1fr; }
  .demo-product-target-result strong { grid-area: auto; text-align: left; }
  .demo-product-detail-actions { grid-template-columns: 1fr; }
}
.demo-danger-button,
.demo-danger-link {
  color: #9f1d20 !important;
  border-color: #d9a4a5 !important;
  background: #fff7f7 !important;
}

.demo-danger-button:hover,
.demo-danger-link:hover {
  color: #fff !important;
  border-color: #9f1d20 !important;
  background: #9f1d20 !important;
}