:root {
  /* Default rendering matches 150% browser zoom (Tino ruling) — the design's
     px scale reads too small at 100%. */
  zoom: 1.5;
  --bg: #F4F2ED;
  --paper: #fff;
  --navy: #101F45;
  --navy-hover: #1E3468;
  --ink: #1A1D26;
  --ink-soft: #4A4E58;
  --muted: #6B6F7B;
  --muted-soft: #8A8E99;
  --faint: #B0ADA3;
  --slash: #B9B5A9;
  --line: #E5E2DA;
  --rule: #EDEBE4;
  --row: #F2F0EA;
  --hover: #FBFAF7;
  --expanded: #FDFCFA;
  --btn-line: #D8D4C9;
  --btn-hover: #E8E5DC;
  --danger: #B23A2E;
  --danger-line: #E2C4C0;
  --danger-bg: #FBF2F1;
  --good-bg: #E4F1E7;
  --good-fg: #1E6B3A;
  --warn-bg: #FBEFD3;
  --warn-fg: #8A5B10;
  --flat-bg: #ECEAE3;
  --flat-fg: #5A5E68;
  --bad-bg: #FBE9E7;
  --bad-fg: #B23A2E;
  --teal-bg: #D9F0EE;
  --teal-fg: #14615C;
  --key-bg: #E7EAF2;
  --key-fg: #1E3468;
  --rowPad: 13px;
  --sans: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 13.5px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--key-fg); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }
h1 { margin: 0; font: 600 24px/1.15 var(--sans); letter-spacing: -0.01em; }
h2 { margin: 0; font: 700 16px/1.2 var(--sans); letter-spacing: -0.01em; }
h3 { margin: 0; font: 600 13.5px/1.2 var(--sans); }
p { margin: 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13px; }
.kicker { margin: 0 0 8px; color: var(--muted-soft); font: 600 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.wordmark img { display: block; height: 26px; width: auto; }

/* topbar */
.topbar { position: sticky; top: 0; z-index: 20; height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; background: var(--navy); color: #fff; }
.topbar-left { display: flex; align-items: center; gap: 34px; }
.brand { display: flex; flex-direction: column; gap: 5px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; text-decoration: none; }
.brand b { font: 700 15px/1 var(--sans); letter-spacing: .18em; }
.brand i { display: block; width: 96px; height: 3px; background: #fff; }
.topnav { display: flex; align-items: center; gap: 22px; font-size: 13.5px; }
.topnav a { color: rgba(255, 255, 255, .66); }
.topnav a:hover { color: #fff; text-decoration: none; }
.topnav .is-active { color: #fff; font-weight: 600; border-bottom: 2px solid #fff; padding-bottom: 3px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar form { display: flex; align-items: center; gap: 10px; }
.topbar-search input { width: 300px; height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 13.5px; }
.topbar-search input::placeholder { color: rgba(255, 255, 255, .5); }
.topbar-search input:focus { outline: none; border-color: #fff; }
.topbar button { height: 36px; padding: 0 16px; border: 0; border-radius: 6px; background: #fff; color: var(--navy); font: 600 13.5px/1 var(--sans); cursor: pointer; }
.topbar button:hover:not(:disabled) { background: var(--btn-hover); }
.topbar button.ghost { border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font-weight: 400; }
.topbar button.ghost:hover { background: rgba(255, 255, 255, .1); }

/* forms */
input, select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--btn-line); border-radius: 6px; background: var(--paper); color: var(--ink); font: 400 13.5px/1.3 var(--sans); }
input:focus, select:focus { outline: none; border-color: var(--navy); }
label { display: grid; gap: 6px; font: 500 13px/1.3 var(--sans); color: var(--ink-soft); }
button { height: 36px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--navy); color: #fff; font: 600 13.5px/1 var(--sans); cursor: pointer; }
button:hover:not(:disabled) { background: var(--navy-hover); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--btn-line); font-weight: 400; }
button.ghost:hover:not(:disabled) { background: var(--bg); }
button.is-danger { background: var(--paper); border: 1px solid var(--danger-line); color: var(--danger); }
button.is-danger:hover:not(:disabled) { background: var(--danger-bg); }

/* auth + search */
.center-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.center-panel { width: min(480px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 34px 32px; display: grid; gap: 20px; }
.center-panel h1 { font-size: 26px; }
.center-panel form { display: grid; gap: 16px; }
.center-panel .hint { color: var(--muted); font-size: 13px; }
.form-error { padding: 11px 14px; background: var(--bad-bg); border-radius: 6px; color: var(--bad-fg); font-size: 13px; }
.search-shell { min-height: calc(100vh - 140px); display: grid; place-items: center; padding: 48px 16px; }
.search-panel { width: min(620px, 100%); display: grid; gap: 18px; justify-items: center; text-align: center; }
.search-panel h1 { font-size: 30px; }
.search-panel form { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.search-panel input { height: 46px; font-size: 15px; text-align: center; }
.search-panel button { height: 46px; }
.matches { width: 100%; text-align: left; }

/* page shell */
.shell { max-width: 1360px; margin: 0 auto; padding: 28px 28px 64px; display: grid; gap: 20px; }
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sheet-pad { padding: 20px 22px; }
.warnings { display: grid; gap: 6px; padding: 12px 16px; background: var(--warn-bg); border-radius: 10px; color: var(--warn-fg); font-size: 13px; }
.notice { padding: 12px 16px; background: var(--good-bg); border-radius: 10px; color: var(--good-fg); font-size: 13px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.crumbs .sep { color: var(--slash); }
.crumbs .here { color: var(--ink); }

/* identity card */
.cust-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 26px; }
.cust-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cust-main .kicker { margin: 0; }
.cust-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cust-title h1 { font: 500 24px/1.15 var(--mono); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cust-no { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cust-no span { font-family: var(--mono); color: var(--ink); }
.cust-id { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: -4px; }
.cust-id > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cust-id .label { font-size: 12.5px; color: var(--muted-soft); }
.copy { width: 22px; height: 22px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: var(--muted); opacity: .55; }
.copy:hover:not(:disabled) { opacity: 1; background: #F0EEE7; }
.copy.is-copied { opacity: 1; background: var(--good-bg); color: var(--good-fg); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }

/* fact grids */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--rule); }
.fact { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; border-left: 1px solid var(--rule); }
.fact:first-child { padding-left: 22px; border-left: 0; }
.fact span { color: var(--muted-soft); font: 600 10.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.fact strong { font: 400 13.5px/1.4 var(--sans); overflow-wrap: anywhere; }
.fact strong.mono { font-family: var(--mono); font-size: 13px; }
.fact small { display: block; margin-top: 2px; color: var(--muted-soft); font: 12px/1.35 var(--mono); }
.fact .empty { color: var(--faint); }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 16px; }
.kpi { display: flex; flex-direction: column; gap: 10px; min-height: 118px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.kpi-label { color: var(--muted-soft); font: 600 10.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.kpi-value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 600 34px/1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-value .of { font: 400 12.5px/1.2 var(--sans); color: var(--muted); letter-spacing: 0; }
.kpi-sub { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.kpi-sub b { color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi.is-date .kpi-value { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.kpi.is-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.kpi.is-primary .kpi-label { color: rgba(255, 255, 255, .62); }
.kpi.is-primary .kpi-sub { color: rgba(255, 255, 255, .72); }

/* sections */
.sec-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--rule); }
.sec-head::before { content: ""; width: 4px; height: 18px; flex: none; background: var(--navy); border-radius: 2px; }
.sec-head .count { color: var(--muted); font-size: 12.5px; }
.sec-head .spacer { margin-left: auto; }
.sec-empty { padding: 34px 22px; text-align: center; color: var(--muted-soft); font-size: 13.5px; }
.sub-table-title { padding: 18px 22px 4px; color: var(--muted-soft); font: 600 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* balance */
.balance { display: flex; align-items: baseline; gap: 14px; padding: 20px 22px; background: var(--hover); border-bottom: 1px solid var(--rule); }
.balance b { font: 600 30px/1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.balance.is-credit b { color: var(--good-fg); }
.balance.is-debit b { color: var(--danger); }
.balance span { color: var(--muted); font-size: 12.5px; }

/* tables */
.table-wrap { overflow-x: auto; }
table { min-width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; vertical-align: top; }
th { padding: 9px 12px; background: var(--hover); color: var(--muted-soft); font: 600 10.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--rule); }
th:first-child { padding-left: 22px; }
th:last-child { padding-right: 22px; }
td { padding: var(--rowPad) 12px; border-bottom: 1px solid var(--row); }
td:first-child { padding-left: 22px; }
td:last-child { padding-right: 22px; }
tbody tr:hover td { background: var(--hover); }
td.money, th.money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.money { font-weight: 600; }
td.money.is-negative { color: var(--teal-fg); }
td.mono { font-family: var(--mono); }
td small { display: block; margin-top: 3px; color: var(--muted-soft); font: 12px/1.35 var(--mono); }
td .empty, td.empty { color: var(--faint); }
.cell-actions { display: flex; gap: 8px; justify-content: flex-end; }
tr.linked a { font-weight: 500; }

/* subscriptions */
.sub { border-bottom: 1px solid var(--rule); }
.sub:last-child { border-bottom: 0; }
.sub-summary { display: flex; align-items: center; gap: 10px; padding: 15px 22px; cursor: pointer; list-style: none; }
.sub-summary::-webkit-details-marker { display: none; }
.sub-summary:hover { background: var(--hover); }
.caret { flex: none; transition: transform .12s ease; }
.sub[open] > .sub-summary { background: var(--hover); }
.sub[open] .caret { transform: rotate(90deg); }
.sub-id { width: 140px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.3 var(--mono); }
.sub-summary .badge.fixed { width: 88px; text-align: center; padding-left: 0; padding-right: 0; }
.sub-boxes { width: 66px; flex: none; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sub-next { flex: 1; min-width: 140px; text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sub-amount { width: 118px; flex: none; text-align: right; font: 600 14px/1.3 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub-body { border-top: 1px solid var(--rule); background: var(--expanded); padding-bottom: 8px; }
.sub-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--rule); }
.sub-body .facts { border-top: 0; border-bottom: 1px solid var(--rule); }
.sub-body th { background: var(--hover); border-top: 1px solid var(--rule); }

/* identification */
.ident-result { border-bottom: 1px solid var(--rule); }
.ident-result:last-child { border-bottom: 0; }

/* badges */
.badge { display: inline-block; padding: 4px 8px; border-radius: 5px; background: var(--flat-bg); color: var(--flat-fg); font: 600 10.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.badge.is-good { background: var(--good-bg); color: var(--good-fg); }
.badge.is-bad { background: var(--bad-bg); color: var(--bad-fg); }
.badge.is-warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge.is-flat { background: var(--flat-bg); color: var(--flat-fg); }
.badge.is-key { background: var(--key-bg); color: var(--key-fg); }
.badge.is-teal { background: var(--teal-bg); color: var(--teal-fg); }

/* link buttons */
.ghost-link { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--btn-line); border-radius: 6px; background: var(--paper); color: var(--ink); text-decoration: none; font: 400 13px/1 var(--sans); white-space: nowrap; }
.ghost-link:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.ghost-link.is-primary { border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 600; }
.ghost-link.is-primary:hover { background: var(--navy-hover); color: #fff; }
.ghost-link.is-danger { border-color: var(--danger-line); color: var(--danger); font-weight: 600; }
.ghost-link.is-danger:hover { background: var(--danger-bg); color: var(--danger); }
.ghost-link.is-small { height: 30px; padding: 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .04em; }

/* action pages */
.shell.narrow { max-width: 860px; }
.action-head { padding: 22px 26px; border-bottom: 1px solid var(--rule); }
.action-body { display: grid; gap: 16px; padding: 20px 22px; }
.action-body .lede { color: var(--ink-soft); font-size: 13.5px; }
.action-body .sub-title { margin-top: 6px; color: var(--muted-soft); font: 600 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.choices { display: grid; gap: 10px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.choices legend { padding: 0 6px; color: var(--muted-soft); font: 600 10.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
label.choice { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
label.choice input { width: auto; height: auto; }
label.indent { padding-left: 26px; }
label.indent input { max-width: 220px; }
.warn-note { padding: 10px 14px; background: var(--warn-bg); border-radius: 6px; color: var(--warn-fg); font-size: 13px; }
.action-buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.result { display: grid; gap: 16px; padding: 20px 22px; }
.result > .ghost-link, .action-body > .ghost-link { justify-self: start; }
.result .ok { font: 600 15px/1.2 var(--sans); color: var(--good-fg); }
.result dl { display: grid; gap: 0; margin: 0; }
.result dl div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.result dt { color: var(--muted); font: 600 12px/1.4 var(--sans); }
.result dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }

/* invoice detail */
.crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-size: 12.5px; }
.crumb:hover { color: var(--ink); text-decoration: none; }
.inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; }
.inv-head h1 { font-family: var(--mono); font-weight: 500; }
.inv-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.download { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 6px; background: var(--navy); color: #fff; text-decoration: none; font: 600 13px/1 var(--sans); }
.download:hover { background: var(--navy-hover); color: #fff; text-decoration: none; }
.totals { display: grid; gap: 0; justify-content: end; padding: 8px 22px 20px; }
.totals div { display: grid; grid-template-columns: 220px 130px; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.totals div:last-child { border-bottom: 0; padding-top: 12px; font: 600 16px/1.2 var(--sans); }
.totals b { text-align: right; }
.totals span { color: var(--muted); }
.failures { margin: 0; padding: 0 0 0 16px; color: var(--muted); font-size: 12.5px; }

/* dashboard shell */
.dash { gap: 22px; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dash-sub { margin-top: 6px; color: var(--muted); font-size: 13px; }
.dash-branch { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dash-branch .kicker { margin: 0; }
.dash-slot { display: block; }

/* The 2px bar that runs while sections are in flight. It sits at the very top
   of the viewport, over the navy topbar — the topbar's height changes with the
   window, and a bar positioned under it by a magic number ends up hidden
   behind it on a phone. On navy, the runner reads white. */
#dash-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
#dash-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 32%; background: #fff; animation: dash-slide 1.1s ease-in-out infinite; }
@keyframes dash-slide { from { transform: translateX(-110%); } to { transform: translateX(330%); } }

/* skeletons */
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--flat-bg) 0%, #F0EEE7 50%, var(--flat-bg) 100%); background-size: 220% 100%; animation: skel-pulse 1.5s ease-in-out infinite; }
@keyframes skel-pulse { from { background-position: 220% 0; } to { background-position: -220% 0; } }
.skel-seg { width: 268px; height: 40px; border-radius: 8px; }
.skel-sm { width: 88px; height: 10px; }
.skel-lg { width: 132px; height: 28px; margin: 4px 0 6px; }
.skel-row { width: 100%; height: 7px; }
.skel-title { width: 190px; height: 13px; }
.skel-block { width: 100%; height: 118px; }
.skel-block.is-tall { height: 268px; }
@media (prefers-reduced-motion: reduce) {
  .skel, #dash-progress::after { animation: none; }
}

/* branch toggle */
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--flat-bg); border-radius: 8px; }
.seg-item { padding: 7px 15px; border-radius: 6px; color: var(--ink-soft); font: 500 12.5px/1.2 var(--sans); text-decoration: none; white-space: nowrap; }
.seg-item:hover { background: rgba(255, 255, 255, .55); color: var(--ink); text-decoration: none; }
.seg-item.is-on { background: var(--paper); color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 31, 69, .12); }

/* KPI mini-bars */
.kpi-value small { font: 400 12.5px/1.2 var(--sans); color: var(--muted); letter-spacing: 0; }
.kpi-value.is-bad { color: var(--danger); }
.kpi.is-primary .kpi-value small { color: rgba(255, 255, 255, .7); }
.kpi-bars { display: grid; gap: 5px; margin-top: 2px; }
.kpi-bar { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 9px; font-size: 11px; color: var(--muted); }
.kpi-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-bar-value { font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi-bar-track { display: block; height: 6px; border-radius: 3px; background: var(--flat-bg); overflow: hidden; }
.kpi-bar-track i { display: block; height: 100%; border-radius: 3px; background: var(--navy); }
.kpi-bar-track i.is-mid { background: #6C7CA6; }
.kpi-bar-track i.is-far { background: #AFB7CA; }
.kpi-bar-track i.is-flat { background: var(--slash); }
.kpi-bar-track i.is-good { background: #4E9A6B; }
.kpi-bar-track i.is-warn { background: #D2A046; }
.kpi-bar-track i.is-bad { background: var(--danger); }
.kpi-bar-track i.is-l1 { background: #D2A046; }
.kpi-bar-track i.is-l2 { background: #C57A33; }
.kpi-bar-track i.is-l3 { background: var(--danger); }
.kpi.is-primary .kpi-bar { color: rgba(255, 255, 255, .68); }
.kpi.is-primary .kpi-bar-value { color: #fff; }
.kpi.is-primary .kpi-bar-track { background: rgba(255, 255, 255, .16); }
.kpi.is-primary .kpi-bar-track i { background: #fff; }
.kpi.is-primary .kpi-bar-track i.is-mid { background: rgba(255, 255, 255, .68); }
.kpi.is-primary .kpi-bar-track i.is-far { background: rgba(255, 255, 255, .42); }
.badge.is-l1 { background: var(--warn-bg); color: var(--warn-fg); }
.badge.is-l2 { background: #F6DFC2; color: #8A4A10; }
.badge.is-l3 { background: var(--bad-bg); color: var(--bad-fg); }

/* timeline */
.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; color: var(--muted); font-size: 11.5px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend i, .split-legend i { display: block; width: 9px; height: 9px; border-radius: 2px; }
.sw-cap { background: var(--navy); }
.sw-bounce { background: var(--danger); }
.sw-await { background: #AFB7CA; }
.sw-ran { background: #C57A33; }
.sw-book { background: #E2C489; }
.sw-flat { background: var(--flat-bg); }

.chart { padding: 20px 22px 4px; }
.chart-row { display: flex; gap: 12px; }
.chart-axis { width: 74px; flex: none; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; color: var(--muted-soft); font: 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.chart-axis .kicker { margin: 0; align-self: flex-end; }
.chart-plot { position: relative; flex: 1; height: 190px; min-width: 0; }
.chart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid i { display: block; height: 1px; background: var(--rule); }
.chart-cols { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 2px; min-width: 0; }
.chart-plot .chart-cols { position: absolute; inset: 0; }
.col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.col i { display: block; width: 100%; min-height: 0; }
.col i:first-child { border-radius: 0 0 2px 2px; }
.bar-cap { background: var(--navy); }
.bar-bounce { background: var(--danger); }
.bar-await { background: #AFB7CA; }
.col.is-future .bar-await { background: repeating-linear-gradient(135deg, #AFB7CA 0 3px, #C6CCDA 3px 6px); }
.col.is-divider::before, .ccol.is-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; border-left: 1px dashed var(--btn-line); }
.chart-row.is-cancel { margin-top: 10px; }
.chart-row.is-cancel .chart-cols { height: 38px; }
.ccol { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.ccol i { display: block; width: 100%; min-height: 0; border-radius: 2px 2px 0 0; }
.bar-ran { background: #C57A33; }
.bar-book { background: #E2C489; }
.chart-row.is-labels { margin-top: 7px; }
.chart-row.is-labels .chart-cols { align-items: flex-start; }
.xcol { flex: 1; min-width: 0; color: var(--muted-soft); font: 10.5px/1.2 var(--sans); white-space: nowrap; }
.xcol.is-today { color: var(--ink); font-weight: 600; }

/* summary strips */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--rule); }
.strip-cell { display: flex; flex-direction: column; gap: 3px; padding: 15px 20px; border-left: 1px solid var(--rule); }
.strip-cell:first-child { padding-left: 22px; border-left: 0; }
.strip-cell .kicker { margin: 0; }
.strip-cell b { font: 600 19px/1.2 var(--sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.strip-cell span { color: var(--muted-soft); font-size: 12px; }
.strip-cell.is-bad b { color: var(--danger); }
.strip-cell.is-warn b { color: var(--warn-fg); }
.strip-cell.is-soft b { color: var(--ink-soft); }
.strip.is-tight { border-top: 1px solid var(--rule); }
.strip.is-tight .strip-cell { padding: 12px 20px; }
.strip.is-tight b { font-size: 16px; }

/* dunning section */
.dun-grid { display: grid; grid-template-columns: 1.1fr 1fr; }
.dun-levels { display: grid; align-content: start; gap: 14px; padding: 20px 22px; }
.dun-row { display: grid; gap: 6px; }
.dun-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-soft); }
.dun-line b { font-variant-numeric: tabular-nums; color: var(--ink); }
.dun-retries { display: grid; align-content: start; gap: 2px; padding: 20px 22px; border-left: 1px solid var(--rule); background: var(--hover); }
.dun-retries .kicker { margin-bottom: 6px; }
.dun-retries .sec-empty { padding: 12px 0; text-align: left; }
.retry { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.retry:last-child { border-bottom: 0; }
.retry a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retry b { font-variant-numeric: tabular-nums; }

/* add-on sections */
.sec-stat { display: flex; align-items: baseline; gap: 8px; margin-left: auto; color: var(--muted); font-size: 12.5px; }
.sec-stat b { font: 600 18px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
td.share { min-width: 150px; }
td.share .kpi-bar-track { width: 100px; margin-bottom: 3px; }
td.share span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
td.money.is-bad { color: var(--danger); }
td.money.is-good { color: var(--good-fg); }
.split { display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
.split-cell { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 20px 22px; border-left: 1px solid var(--rule); }
.split-cell:first-child { border-left: 0; }
.split-cell .kicker { margin: 0; }
.split-cell b { font: 600 19px/1.2 var(--sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.split-cell span { color: var(--muted-soft); font-size: 12px; }
.split-bar { display: block; height: 10px; border-radius: 5px; background: var(--flat-bg); overflow: hidden; }
.split-bar i { display: block; height: 100%; border-radius: 5px; background: var(--navy); }
.split-legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 11.5px; }
.split-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }

/* pills */
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pills span { padding: 4px 10px; border-radius: 20px; background: var(--flat-bg); color: var(--flat-fg); font-size: 11.5px; white-space: nowrap; }

@media (max-width: 980px) {
  .dash-head { align-items: flex-start; }
  .dash-branch { align-items: flex-start; }
  .seg { flex-wrap: wrap; }
  .chart { padding: 16px 12px 4px; }
  .chart-axis { width: 56px; }
  .dun-grid, .split { grid-template-columns: 1fr; }
  .dun-retries, .split-cell { border-left: 0; border-top: 1px solid var(--rule); }
  .strip-cell { padding-left: 16px; padding-right: 16px; }
  .topbar { height: auto; flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .topbar-search input { width: 100%; }
  .topbar form { flex: 1; }
  .shell { padding: 20px 12px 64px; }
  th:first-child, td:first-child { padding-left: 16px; }
  th:last-child, td:last-child { padding-right: 16px; }
  .sec-head, .cust-head, .balance, .sub-summary, .sub-actions { padding-left: 16px; padding-right: 16px; }
  .sub-next { display: none; }
}