/* Talon Ledger — Carbon, Ember, Graphite, Ash; Geist and Geist Mono. */
:root {
  --bg: #F6F6F4; --surface: #FFFFFF; --surface-2: #FAFAF8; --sunk: #F1F1EE;
  --line: #E6E6E1; --line-soft: #EEEEEA; --line-strong: #D3D3CD;
  --ink: #0F1113; --ink-2: #33373C; --muted: #5B6068; --faint: #8A8F96;
  --forest: #0F1113; --forest-2: #1D2024; --forest-line: #2E3238; --on-forest: #F6F6F4; --on-forest-muted: #A7ABB1;
  --primary: #0F1113; --primary-hover: #2B2F34; --on-primary: #FFFFFF;
  --tint: #FCEDE7; --tint-2: #F6D3C5;
  --amber: #E4572E; --amber-ink: #FFFFFF; --amber-text: #B8431F;
  --accent: #E4572E; --accent-ink: #B8431F;
  --good: #1B7A4B; --good-bg: #E5F3EB; --warn: #9A5A0C; --warn-bg: #FBF0DF; --bad: #B42318; --bad-bg: #FDECEA; --info: #28527A; --info-bg: #E8EFF6; --mute-bg: #F0F0EC;
  --bar-in: #0F1113; --bar-out: #E4572E;
  --hero-bg: #0F1113; --hero-ink: #F6F6F4; --hero-muted: #9EA3AA; --hero-line: #262A2F;
  --nav-active-bg: #0F1113; --nav-active-ink: #FFFFFF;
  --shadow: 0 1px 2px rgba(15, 17, 19, .05), 0 8px 24px rgba(15, 17, 19, .07);
  --radius: 14px; --radius-sm: 9px;
  --f-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C0D0F; --surface: #15171A; --surface-2: #1A1C20; --sunk: #0A0B0C;
    --line: #26292E; --line-soft: #1F2226; --line-strong: #353940;
    --ink: #F2F2EF; --ink-2: #C9CBCE; --muted: #9EA3AA; --faint: #72777E;
    --forest: #08090A; --forest-2: #17191C; --forest-line: #2A2D32;
    --primary: #F2F2EF; --primary-hover: #FFFFFF; --on-primary: #0F1113;
    --tint: #2A1812; --tint-2: #43251A;
    --amber-text: #F4875F; --accent-ink: #F4875F;
    --good: #6FD39C; --good-bg: #12291D; --warn: #F1BE76; --warn-bg: #2E2313; --bad: #F59A8E; --bad-bg: #351A17; --info: #93BFE6; --info-bg: #16222E; --mute-bg: #1D2024;
    --bar-in: #E9E9E5; --bar-out: #E4572E;
    --hero-bg: #1A1C20; --hero-ink: #F6F6F4; --hero-muted: #9EA3AA; --hero-line: #2A2D32;
    --nav-active-bg: #F2F2EF; --nav-active-ink: #0F1113;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C0D0F; --surface: #15171A; --surface-2: #1A1C20; --sunk: #0A0B0C;
  --line: #26292E; --line-soft: #1F2226; --line-strong: #353940;
  --ink: #F2F2EF; --ink-2: #C9CBCE; --muted: #9EA3AA; --faint: #72777E;
  --forest: #08090A; --forest-2: #17191C; --forest-line: #2A2D32;
  --primary: #F2F2EF; --primary-hover: #FFFFFF; --on-primary: #0F1113;
  --tint: #2A1812; --tint-2: #43251A;
  --amber-text: #F4875F; --accent-ink: #F4875F;
  --good: #6FD39C; --good-bg: #12291D; --warn: #F1BE76; --warn-bg: #2E2313; --bad: #F59A8E; --bad-bg: #351A17; --info: #93BFE6; --info-bg: #16222E; --mute-bg: #1D2024;
  --bar-in: #E9E9E5; --bar-out: #E4572E;
  --hero-bg: #1A1C20; --hero-ink: #F6F6F4; --hero-muted: #9EA3AA; --hero-line: #2A2D32;
  --nav-active-bg: #F2F2EF; --nav-active-ink: #0F1113;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--f-sans); -webkit-font-smoothing: antialiased; }
#app { height: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.mono, .tbl td.r, .kpi-val { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .block { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1 1 auto; }
.pad { padding: 12px 20px; } .pad-lg { padding: 24px; }
.good-text { color: var(--good); } .bad-text { color: var(--bad); } .warn-text { color: var(--warn); } .danger-text { color: var(--bad) !important; }
.neg { color: var(--bad); }
.display { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eyebrow.amber { color: var(--amber-text); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ic { flex-shrink: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--surface-2); border-color: var(--faint); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary-soft { background: var(--tint); border-color: var(--tint-2); color: var(--primary); font-weight: 600; }
.btn-primary-soft:hover { background: var(--tint-2); }
.btn-amber { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); font-weight: 600; }
.btn-amber:hover { background: #E8B26D; border-color: #E8B26D; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--mute-bg); border-color: transparent; }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-link { background: none; border: 0; min-height: 0; padding: 2px 4px; color: var(--primary); font-weight: 500; }
.btn-link:hover { background: none; text-decoration: underline; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px; }
.icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; position: relative; }
.icon-btn:hover { background: var(--mute-bg); color: var(--ink); }
.icon-btn.on-dark { color: var(--on-forest); width: 44px; height: 44px; }
.icon-btn.on-dark:hover { background: var(--forest-2); color: #fff; }

/* ---------- shell ---------- */
.app { height: 100%; display: flex; flex-direction: column; }
.topbar { flex-shrink: 0; height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 20px; background: var(--forest); color: var(--on-forest); position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-forest); text-decoration: none; }
.brand span { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.brand:hover { color: #fff; text-decoration: none; }
.nav-toggle { display: none; color: var(--on-forest); }
.co-wrap, .new-wrap, .bell-wrap, .acct-wrap { position: relative; }
.co-switch { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; background: var(--forest-2); color: var(--on-forest); border: 1px solid var(--forest-line); border-radius: var(--radius-sm); cursor: pointer; max-width: 300px; }
.co-switch:hover { border-color: var(--on-forest-muted); }
.co-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-mark { width: 24px; height: 24px; border-radius: 5px; background: var(--amber); color: var(--amber-ink); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.search { flex: 1 1 auto; max-width: 540px; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; background: var(--forest-2); border: 1px solid var(--forest-line); border-radius: var(--radius-sm); color: var(--on-forest-muted); cursor: text; text-align: left; }
.search:hover { border-color: var(--on-forest-muted); }
.search-ph { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
kbd { font-family: var(--f-mono); font-size: 11.5px; padding: 1px 6px; border: 1px solid var(--forest-line); border-radius: 4px; }
.dot { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--amber); color: var(--amber-ink); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--forest-line); color: var(--on-forest); border: 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.body { flex: 1 1 auto; min-height: 0; display: flex; }
.side { width: 232px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; background: var(--surface-2); border-right: 1px solid var(--line); overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--ink-2); font-size: 14px; text-decoration: none; }
.nav-item:hover { background: var(--mute-bg); color: var(--ink); text-decoration: none; }
.nav-item.active { background: var(--tint); color: var(--forest); font-weight: 600; }
:root[data-theme="dark"] .nav-item.active { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-item.active { color: var(--ink); } }
.nav-item.sm { min-height: 34px; font-size: 13.5px; }
.nav-count { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); }
.side-label { margin: 18px 12px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ent-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--primary); margin: 0 5px; }
.ent-dot.all { background: var(--amber); border-color: var(--amber); }
.nav-item.active .ent-dot { background: var(--primary); }
.close-card { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 8px; padding: 14px; border-radius: var(--radius); background: var(--forest); color: var(--on-forest); text-decoration: none; }
.close-card:hover { text-decoration: none; color: #fff; background: var(--forest-2); }
.cc-title { font-weight: 600; font-size: 13.5px; }
.cc-bar { height: 6px; border-radius: 3px; background: var(--forest-line); overflow: hidden; display: block; }
.cc-bar > span { display: block; height: 100%; background: var(--amber); border-radius: 3px; }
.cc-bar.big { width: 180px; height: 8px; background: var(--line); }
.cc-sub { font-size: 12px; color: var(--on-forest-muted); }
.cc-link { font-size: 12.5px; color: var(--amber); font-weight: 500; }
.main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 24px 28px 64px; display: flex; flex-direction: column; gap: 18px; }
.sample-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--warn-bg); color: var(--warn); font-size: 13px; border-top: 1px solid var(--line); }
.sample-bar button { background: none; border: 0; color: var(--warn); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------- menus ---------- */
.menu { position: absolute; top: calc(100% + 8px); z-index: 60; min-width: 240px; padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.menu button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; background: none; border: 0; border-radius: 6px; text-align: left; cursor: pointer; color: var(--ink); }
.menu button:hover, .menu button.on { background: var(--tint); }
.menu-label { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.menu-meta { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.menu-sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }
.co-menu { left: 0; }
.new-menu { right: 0; display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 4px; min-width: 600px; padding: 10px; }
.new-menu[hidden] { display: none; }
.bell-menu { right: 0; width: 340px; max-height: 420px; overflow-y: auto; }
.note { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.note time { font-size: 11.5px; color: var(--faint); }
.me-menu { right: 0; }

/* ---------- page head & common ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--f-display); font-size: 30px; font-weight: 500; letter-spacing: -0.015em; }
.page-head .sub { margin-top: 4px; color: var(--muted); max-width: 70ch; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 10px; }
.card-h h2 { font-size: 16px; font-weight: 600; color: var(--ink); }
.card-foot { padding: 4px 16px 12px; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--mute-bg); color: var(--ink-2); }
.badge.good { background: var(--good-bg); color: var(--good); } .badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); } .badge.info { background: var(--info-bg); color: var(--info); }
.badge.mute { background: var(--mute-bg); color: var(--muted); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; color: var(--muted); text-align: center; }
.banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; }
.banner.warn { background: var(--warn-bg); color: var(--warn); } .banner.info { background: var(--info-bg); color: var(--info); } .banner.mute { background: var(--mute-bg); color: var(--muted); }
.linked { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); }
.linked .sep { color: var(--faint); }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 500; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); position: sticky; top: 0; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .r, .lines .r { text-align: right; } .tbl .c { text-align: center; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td, .tbl tr.click:focus td { background: var(--surface-2); }
.tbl tfoot td { font-weight: 600; border-top: 1px solid var(--line); }
.trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--mute-bg); color: var(--muted); font-size: 11.5px; text-align: center; }
.tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { flex-shrink: 0; min-height: 44px; padding: 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--ink); } .tab.active { color: var(--ink); border-bottom-color: var(--primary); }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
.toolbar .tabs { border: 0; padding: 0; }
.filter-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); min-width: 240px; flex: 0 1 340px; }
.filter-search input { border: 0; outline: none; background: transparent; flex: 1; min-width: 0; }
.subnav { display: flex; gap: 4px; flex-wrap: wrap; }
.subnav button { min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font-weight: 500; }
.subnav button.on { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field input, .field select, .field textarea, .lines input, .lines select, .quick-add input, .quick-add select, .inline-add input, .tag-list input { height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); width: 100%; min-width: 0; }
.field textarea { height: auto; padding: 10px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .lines input:focus, .lines select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--tint); }
.field input:disabled { background: var(--sunk); color: var(--muted); }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.field.inline > span { white-space: nowrap; color: var(--muted); }
.field.inline input, .field.inline select { height: 36px; width: auto; }
.check-field { display: flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.check-field input { width: 18px; height: 18px; accent-color: var(--primary); }
input[type="checkbox"] { accent-color: var(--primary); width: 18px; height: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span2 { grid-column: span 2; }

/* ---------- transaction forms ---------- */
.form-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.form-card.narrow { max-width: 820px; }
.form-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.cust-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--radius-sm); background: var(--sunk); font-size: 13px; color: var(--ink-2); }
.cust-card .btn-link { align-self: flex-start; padding-left: 0; }
.lines { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lines th { text-align: left; font-weight: 500; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lines td { padding: 6px; border-bottom: 1px solid var(--line-soft); }
.lines input, .lines select { height: 36px; padding: 0 8px; }
.lines .c-item { min-width: 190px; } .lines .c-desc { min-width: 180px; } .lines .c-num { width: 110px; } .lines .c-num input { text-align: right; font-family: var(--f-mono); }
.lines .c-amt { width: 110px; text-align: right; padding-right: 10px; } .lines .c-tag { width: 150px; } .lines .c-x { width: 40px; }
.line-actions { display: flex; gap: 8px; }
.sec-h { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 8px; display: flex; gap: 10px; align-items: baseline; }
.form-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.totals { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.totals > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.totals .t-total { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.rate-in { width: 60px !important; height: 30px !important; padding: 0 6px !important; margin: 0 4px; text-align: right; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); }
.form-actions { position: sticky; bottom: -64px; margin: 0 -28px -64px; padding: 14px 28px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; z-index: 5; }
.form-actions.plain { position: static; margin: 16px 0 0; padding: 0; border: 0; background: none; }
.fa-left, .fa-right { display: flex; gap: 8px; flex-wrap: wrap; }
.xfer-bal { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.xfer-bal div { display: flex; gap: 8px; }
.doc-preview { display: flex; flex-direction: column; gap: 18px; padding: 8px; }
.dp-head { display: flex; justify-content: space-between; gap: 16px; }
.dp-co { font-family: var(--f-display); font-size: 22px; font-weight: 600; }
.dp-title { font-family: var(--f-display); font-size: 26px; text-align: right; color: var(--primary); }
.dp-meta { display: flex; justify-content: space-between; gap: 16px; }
.dp-tot { margin-left: auto; width: 280px; }

/* ---------- modal, toast, palette ---------- */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(12, 22, 17, .45); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow-y: auto; }
.modal { width: 100%; max-width: 560px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.modal.wide { max-width: 760px; }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.modal-h h2 { font-family: var(--f-display); font-size: 21px; font-weight: 500; }
.modal-b { padding: 8px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.modal-msg { color: var(--ink-2); }
#toasts { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: 10px; background: var(--forest); color: var(--on-forest); box-shadow: var(--shadow); font-size: 13.5px; max-width: min(520px, 90vw); transition: opacity .3s, transform .3s; }
.toast.bad { background: #7A2416; color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }
.palette-input { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--muted); }
.palette-input input { flex: 1; border: 0; outline: none; background: transparent; font-size: 16px; }
.palette-res { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; }
.pal-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 42px; padding: 0 10px; border: 0; background: none; border-radius: 8px; text-align: left; cursor: pointer; }
.pal-row:hover, .pal-row.sel { background: var(--tint); }
.pal-kind { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.pal-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-sub { font-size: 12.5px; color: var(--muted); font-family: var(--f-mono); }

/* ---------- home ---------- */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.home-head h1 { font-size: 34px; }
.seg { display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; gap: 2px; }
.seg button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-weight: 500; cursor: pointer; }
.seg button.on { background: var(--forest); color: var(--on-forest); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; cursor: pointer; }
button.kpi:hover { border-color: var(--primary); }
.kpi.static { cursor: default; }
.kpi-label { font-size: 13px; color: var(--muted); font-family: var(--f-sans); }
.kpi-val { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.kpis.three .kpi-val { font-size: 21px; }
.kpi-note { font-size: 12.5px; color: var(--muted); }
.kpi-note.up { color: var(--good); } .kpi-note.down { color: var(--bad); } .kpi-note.warnt { color: var(--warn); }
.wf { padding-bottom: 14px; }
.wf-row { display: flex; align-items: center; gap: 14px; padding: 6px 20px; }
.wf-lane { width: 90px; flex-shrink: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-text); }
.wf-steps { flex: 1; display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 4px 0; }
.wf-step { flex: 1 1 0; min-width: 118px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; }
.wf-step:hover { background: var(--tint); border-color: var(--tint-2); }
.wf-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--tint); color: var(--primary); display: flex; align-items: center; justify-content: center; position: relative; }
.wf-step:hover .wf-ic { background: var(--forest); color: var(--amber); }
.wf-n { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--amber); color: var(--amber-ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.wf-label { font-size: 13px; font-weight: 600; color: var(--ink); text-align: center; }
.wf-hint { font-size: 11.5px; color: var(--muted); }
.wf-arrow { color: var(--faint); flex-shrink: 0; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
.bank-list, .todo { list-style: none; margin: 0; padding: 0 8px 10px; }
.bank-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; border-radius: 8px; text-align: left; cursor: pointer; }
.bank-row:hover { background: var(--surface-2); }
.bank-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--tint); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bank-ic.lg { width: 44px; height: 44px; border-radius: 10px; }
.bank-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bank-name b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-name small { font-size: 12px; color: var(--muted); }
.bank-bal { font-size: 14px; }
.chart { padding: 0 16px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--f-sans); }
.chart .bar-in { fill: var(--bar-in); } .chart .bar-out { fill: var(--bar-out); }
.chart-note { padding: 4px 20px 14px; }
.legend { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--muted); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.sw.in { background: var(--bar-in); } .sw.out { background: var(--bar-out); }
.todo li button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.todo li button span { flex: 1; }
.todo li button:hover { background: var(--surface-2); }
.todo li button .ic:first-child { color: var(--primary); }
.moneybar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.mb-seg { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 0; border-bottom: 4px solid; background: var(--surface); text-align: left; cursor: pointer; }
.mb-seg + .mb-seg { border-left: 1px solid var(--line); }
.mb-seg:hover { background: var(--surface-2); }
.mb-seg.mute { border-bottom-color: var(--faint); } .mb-seg.bad { border-bottom-color: var(--bad); } .mb-seg.info { border-bottom-color: var(--info); } .mb-seg.good { border-bottom-color: var(--good); }
.mb-amt { font-family: var(--f-mono); font-size: 18px; font-weight: 500; }
.mb-label { font-size: 12.5px; color: var(--muted); }

/* ---------- banking ---------- */
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bank-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bc-top { display: flex; gap: 12px; align-items: center; }
.bc-top h2 { font-size: 16px; font-weight: 600; }
.bc-bal { display: flex; flex-direction: column; gap: 2px; }
.bc-bal b { font-size: 24px; font-weight: 500; }
.bc-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--muted); align-items: center; }
.bc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.register td { padding: 7px 12px; }
.register tr[data-unc="1"] td { background: var(--warn-bg); background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface)); }
.reg-open td { color: var(--muted); font-style: italic; }
.clr { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--faint); font-family: var(--f-mono); font-size: 12px; font-weight: 600; cursor: pointer; }
.clr.c { background: var(--tint); color: var(--primary); border-color: var(--tint-2); }
.clr.r { background: var(--primary); color: var(--on-primary); border-color: var(--primary); cursor: default; }
.quick-add td { background: var(--surface-2); vertical-align: top; }
.quick-add input, .quick-add select { height: 34px; padding: 0 8px; margin-bottom: 4px; }
.feed-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.feed-act select { height: 36px; min-width: 220px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 0 8px; }
.feed-match { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rec-head { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.rec-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rec-sum > div { background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.rec-sum span { font-size: 12.5px; color: var(--muted); } .rec-sum b { font-size: 17px; font-weight: 500; }
.rec-sum .ok { background: var(--good-bg); } .rec-sum .ok b { color: var(--good); }
.rec-sum .off b { color: var(--bad); }
.rec-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rec-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px 12px; min-width: 0; }
.pay-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px; border-top: 1px solid var(--line); }
.pay-total { display: flex; align-items: center; gap: 14px; }
.pay-total b { font-size: 20px; font-weight: 500; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }

/* ---------- COA, reports, budgets ---------- */
.coa .grp td, .budget .grp td { background: var(--sunk); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; }
.fav-card { padding-bottom: 14px; }
.fav-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 20px; }
.fav { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); cursor: pointer; font-weight: 500; }
.fav:hover { border-color: var(--primary); }
.fav .ic { color: var(--primary); }
.report-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.report-list { list-style: none; margin: 0; padding: 0 8px 10px; }
.report-list li { display: flex; align-items: center; }
.report-list li button:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 0; background: none; border-radius: 8px; text-align: left; cursor: pointer; }
.report-list li button:first-child:hover { background: var(--surface-2); }
.report-list b { font-weight: 600; color: var(--primary); }
.report-list span { font-size: 12.5px; color: var(--muted); }
.star { width: 36px; height: 36px; border: 0; background: none; color: var(--line-strong); font-size: 18px; cursor: pointer; border-radius: 8px; }
.star.on { color: var(--amber); } .star:hover { background: var(--mute-bg); }
.report-paper { padding: 8px 24px 24px; }
.rp-head { text-align: center; padding: 16px 0 20px; display: flex; flex-direction: column; gap: 4px; }
.rp-co { font-size: 13px; color: var(--muted); }
.rp-title { font-family: var(--f-display); font-size: 24px; font-weight: 500; }
.rp-dates { font-size: 13px; color: var(--muted); }
.report td { padding: 7px 12px; }
.report .rr.head td { font-weight: 600; padding-top: 16px; border-bottom: 0; }
.report .rr.sub-head td { font-weight: 600; color: var(--ink-2); border-bottom: 0; }
.report .rr.sub td { font-weight: 600; border-top: 1px solid var(--line); }
.report .rr.total td { font-weight: 600; background: var(--surface-2); }
.report .rr.grand td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); background: var(--surface-2); }
.report .rr.click:hover td { background: var(--tint); }
.rp-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.rp-foot { margin-top: 20px; font-size: 11.5px; color: var(--faint); text-align: center; }
.budget th.b-acct { font-weight: 500; color: var(--ink); white-space: nowrap; position: sticky; left: 0; background: var(--surface); }
.budget td { padding: 4px; }
.budget td input { width: 84px; height: 32px; padding: 0 6px; text-align: right; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-family: var(--f-mono); font-size: 12.5px; }
.budget td.fc { background: var(--warn-bg); }
.budget .b-tot { font-weight: 600; }
.budget .grand th, .budget .grand td { font-weight: 700; border-top: 2px solid var(--ink); padding: 10px 4px; }

/* ---------- close ---------- */
.close-list { list-style: none; margin: 0; padding: 0 16px 8px; }
.ct { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line-soft); }
.ct:last-child { border-bottom: 0; }
.ct-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ct.done .ct-text b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.ct-box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px dashed var(--faint); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ct.done .ct-box { background: var(--primary); border: 0; color: var(--on-primary); }
.close-meter { display: flex; align-items: center; gap: 10px; }

/* ---------- settings ---------- */
.ind-now { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.switch { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.sw-track { width: 36px; height: 20px; border-radius: 10px; background: var(--line-strong); position: relative; flex-shrink: 0; margin-top: 2px; transition: background .15s; }
.sw-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .sw-track { background: var(--primary); }
.switch input:checked + .sw-track::after { transform: translateX(16px); }
.switch input:focus-visible + .sw-track { outline: 2px solid var(--amber); outline-offset: 2px; }
.sw-text { display: flex; flex-direction: column; gap: 2px; } .sw-text small { color: var(--muted); font-size: 12.5px; }
.tag-list { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.tag-list li { display: flex; align-items: center; gap: 10px; }
.inline-add { display: flex; gap: 8px; max-width: 520px; }
.file-list { list-style: none; margin: 8px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-list li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; }
.file-list li.on { border-color: var(--primary); background: var(--tint); }
.file-list li div { display: flex; flex-direction: column; }
.file-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 18px; }
.pad-lg .sec-h { margin: 18px 0 8px; }

/* ---------- welcome & setup ---------- */
.welcome { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: var(--forest); background-image: radial-gradient(circle at 80% 10%, rgba(228, 87, 46, .12), transparent 45%); }
.wl-card { max-width: 640px; display: flex; flex-direction: column; gap: 20px; color: var(--on-forest); }
.wl-brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: 28px; font-weight: 600; }
.wl-card .display { color: #fff; font-size: 44px; line-height: 1.1; }
.wl-card .lead { color: var(--on-forest-muted); font-size: 17px; line-height: 1.55; max-width: 60ch; }
.wl-card .muted { color: var(--on-forest-muted); }
.wl-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.wl-actions .btn:not(.btn-primary) { background: transparent; color: var(--on-forest); border-color: var(--forest-line); }
.wl-actions .btn-primary { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.setup { min-height: 100%; display: flex; flex-direction: column; background: var(--bg); }
.setup-top { height: 72px; flex-shrink: 0; display: flex; align-items: center; gap: 24px; padding: 0 32px; background: var(--forest); color: var(--on-forest); }
.steps { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.step { display: flex; align-items: center; gap: 8px; color: var(--on-forest-muted); }
.step.cur { color: var(--on-forest); font-weight: 600; }
.step-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--forest-line); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.step.done .step-dot { background: var(--forest-line); border-color: var(--forest-line); color: var(--on-forest); }
.step.cur .step-dot { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.step-line { width: 28px; height: 1px; background: var(--forest-line); }
.setup-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; padding: 36px 48px 48px; max-width: 1440px; width: 100%; margin: 0 auto; }
.setup-body.one { grid-template-columns: minmax(0, 860px); justify-content: center; }
.setup-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.setup-main h1 { font-size: 36px; color: var(--ink); }
.lead { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 64ch; }
.setup-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ind-grid.compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 20px; }
.ind { min-height: 84px; display: flex; align-items: center; gap: 14px; padding: 0 16px; text-align: left; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.ind:hover { border-color: var(--primary); }
.ind.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.ind-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: var(--tint); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.ind.on .ind-ic { background: var(--amber); color: var(--forest); }
.ind-t { display: flex; flex-direction: column; gap: 2px; } .ind-t b { font-size: 15px; font-weight: 600; } .ind-t small { font-size: 12px; color: var(--muted); }
.ind.on .ind-t small { color: #C9D4CD; }
.describe { max-width: 620px; }
.match-line { min-height: 22px; font-size: 13.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.setup-aside { padding: 26px; display: flex; flex-direction: column; gap: 20px; align-self: start; position: sticky; top: 16px; }
.display.sm { font-size: 24px; color: var(--ink); }
.sa-sec { display: flex; flex-direction: column; gap: 10px; }
.sa-sec h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sa-on, .sa-off { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sa-on li, .sa-off li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.sa-off li { color: var(--muted); }
.tick { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; }
.ring { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--faint); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 10px; border-radius: 6px; background: var(--sunk); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.q-card { padding: 4px 20px; }
.q-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.q-row:last-child { border-bottom: 0; }
.q-row > div:first-child { flex: 1 1 300px; display: flex; flex-direction: column; gap: 3px; }
.bank-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 110px minmax(0, 1fr) 36px; gap: 12px; align-items: end; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.card.pad-lg { display: flex; flex-direction: column; gap: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid, .two-col { grid-template-columns: minmax(0, 1fr); }
  .setup-body { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .setup-aside { position: static; }
  .form-top, .form-bottom { grid-template-columns: minmax(0, 1fr); }
  .rec-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .new-menu { grid-template-columns: repeat(2, minmax(160px, 1fr)); min-width: 400px; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .side { position: fixed; top: 60px; bottom: 0; left: 0; z-index: 40; transform: translateX(-105%); transition: transform .2s; box-shadow: var(--shadow); }
  body.nav-open .side { transform: none; }
  .search-ph, .search kbd, .co-name { display: none; }
  .search { flex: 0 0 auto; width: 40px; padding: 0; justify-content: center; }
  .topbar { gap: 8px; padding: 0 12px; }
  .brand span { display: none; }
  .main { padding: 18px 16px 64px; }
  .form-actions { margin: 0 -16px -64px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .moneybar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-seg:nth-child(3) { border-left: 0; }
  .rec-grid, .ind-grid, .form-grid.two { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span2 { grid-column: auto; }
  .kpis.three { grid-template-columns: minmax(0, 1fr); }
  .setup-top { padding: 0 16px; gap: 12px; height: auto; min-height: 64px; flex-wrap: wrap; }
  .step-t { display: none; } .step.cur .step-t { display: inline; }
  .bank-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .new-menu { position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0; grid-template-columns: minmax(0, 1fr); max-height: 75vh; overflow-y: auto; }
  .bell-menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .wf-lane { width: auto; }
  .wf-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .page-head h1 { font-size: 25px; }
  .home-head h1 { font-size: 28px; }
  .filter-search { min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .rec-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-main h1 { font-size: 28px; }
  .wl-card .display { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .topbar, .side, .sample-bar, .no-print, .page-head .actions, .form-actions { display: none !important; }
  .main { overflow: visible; padding: 0; } body, .card { background: #fff; border: 0; }
}

/* ---------- sign in / sign up ---------- */
.auth { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.auth-side { background: var(--forest); background-image: radial-gradient(circle at 85% 8%, rgba(228, 87, 46, .14), transparent 45%); color: var(--on-forest); padding: 48px 56px; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.auth-side .display { color: #fff; font-size: 40px; line-height: 1.12; max-width: 16ch; }
.auth-side .lead { color: var(--on-forest-muted); }
.auth-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-points li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.auth-points .ic { color: var(--amber); }
.auth-main { display: flex; flex-direction: column; padding: 20px 32px 40px; background: var(--bg); }
.auth-top { display: flex; justify-content: flex-end; }
.auth-card { width: 100%; max-width: 440px; margin: auto; display: flex; flex-direction: column; gap: 20px; }
.auth-card h2.display { font-size: 30px; }
.auth-tabs { align-self: flex-start; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .btn-lg { width: 100%; margin-top: 4px; }
.auth-err { padding: 10px 12px; border-radius: 8px; background: var(--bad-bg); color: var(--bad); font-size: 13.5px; }
.forgot { align-self: flex-start; padding-left: 0; }
.auth-demo { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-demo .btn { align-self: flex-start; }
.auth-note { color: var(--faint); }
.lang-pick { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--muted); }
.lang-pick select { border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.lang-pick.on-dark { background: var(--forest-2); border-color: var(--forest-line); color: var(--on-forest-muted); }
.lang-pick.on-dark select { color: var(--on-forest); }
.lang-pick.on-dark option { color: #1B2420; }
.me-head { display: flex; flex-direction: column; padding: 8px 10px; }
.me-head small { color: var(--muted); font-size: 12.5px; }
.me-lang { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; color: var(--ink); }
.me-lang select { margin-left: auto; height: 30px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); padding: 0 6px; }
.sec-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.sec-title .ic { color: var(--primary); }
.form-grid.tight { gap: 12px; }
.tax-box { border: 1px solid var(--tint-2); background: var(--tint); background: color-mix(in srgb, var(--tint) 60%, var(--surface)); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.tax-box-h { display: flex; align-items: center; gap: 8px; color: var(--primary); }
.tax-box-h b { color: var(--ink); }
.tax-box small { font-size: 12px; line-height: 1.4; }
.tax-auto { min-height: 40px; display: flex; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-side { padding: 28px 20px; gap: 14px; }
  .auth-side .display { font-size: 28px; }
  .auth-points { display: none; }
  .auth-main { padding: 16px 16px 32px; }
}

/* ---------- payroll tax breakdown ---------- */
.tax-detail td { background: var(--surface-2); }
.tax-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 6px 0; }
.tbl.mini { font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.tbl.mini th, .tbl.mini td { padding: 6px 10px; }
.pay-sum { display: flex; flex-wrap: wrap; gap: 18px; padding: 4px 0 8px; font-size: 13.5px; color: var(--muted); }
.pay-sum b { color: var(--ink); margin-left: 4px; }
.print-later { align-self: end; min-height: 40px; }

/* ---------- write & print checks ---------- */
.print-setup .ps-body { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.style-card { display: flex; gap: 14px; align-items: center; padding: 14px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); }
.style-card:hover { border-color: var(--primary); }
.style-card.on { border-color: var(--primary); background: var(--tint); }
.style-card input { position: absolute; opacity: 0; }
.style-card:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.style-card span { display: flex; flex-direction: column; gap: 3px; }
.style-card small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.style-ic { flex-shrink: 0; }
.si-page { fill: var(--surface); stroke: var(--line-strong); }
.si-check { fill: var(--primary); }
.si-stub { fill: var(--tint-2); stroke: var(--line-strong); stroke-width: .5; }
.si-blank { fill: none; stroke: var(--line-soft); stroke-dasharray: 2 2; }
.ps-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ck-preview { overflow: auto; max-height: 70vh; background: #d9d6cc; padding: 16px; border-radius: 8px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.ck-preview .ck-page { box-shadow: 0 2px 10px rgba(0, 0, 0, .18); flex-shrink: 0; }
.ck-preview .ck-part { outline: 1px dashed #b9b4a6; outline-offset: -1px; }

/* Check pages are laid out in inches for US letter check stock. */
.ck-page { width: 8.5in; height: 11in; background: #fff; color: #111; position: relative; font: 10.5pt/1.3 'Geist', Arial, sans-serif; overflow: hidden; }
.ck-part { height: 3.5in; position: relative; overflow: hidden; }
.ck-page.voucher .ck-part.stub { height: 3.75in; }
.ck-check { position: absolute; inset: 0; }
.ck-check > div { position: absolute; white-space: nowrap; }
.ck-lbl { display: none; font-size: 7pt; text-transform: uppercase; letter-spacing: .06em; color: #555; margin-right: 6px; }
.ck-co { top: .35in; left: .45in; font-size: 9pt; white-space: normal !important; width: 3.6in; display: none; }
.ck-bank { top: .35in; left: 4.3in; font-size: 8.5pt; display: none; }
.ck-no { top: .35in; right: .45in; font: 600 10pt 'Geist Mono', monospace; display: none; }
.ck-date { top: .72in; left: 6.55in; font-family: 'Geist Mono', monospace; }
.ck-payee { top: 1.3in; left: 1.1in; font-weight: 600; }
.ck-amt { top: 1.3in; left: 6.8in; font: 600 11pt 'Geist Mono', monospace; }
.ck-words { top: 1.72in; left: .45in; right: .9in; overflow: hidden; }
.ck-addr { top: 2.05in; left: 1.1in; white-space: normal !important; width: 3.2in; font-size: 9.5pt; }
.ck-memo { top: 2.85in; left: .6in; font-size: 9.5pt; }
.ck-sign { top: 2.85in; left: 5.1in; width: 2.9in; height: .3in; display: none; }
.ck-check.blank .ck-lbl, .ck-check.blank .ck-co, .ck-check.blank .ck-bank, .ck-check.blank .ck-no, .ck-check.blank .ck-sign { display: block; }
.ck-check.blank .ck-lbl { display: inline; }
.ck-check.blank .ck-payee { left: .45in; width: 5.9in; border-bottom: 1px solid #333; }
.ck-check.blank .ck-amt { border: 1px solid #333; padding: 2px 8px; left: 6.6in; }
.ck-check.blank .ck-words { border-bottom: 1px solid #333; }
.ck-check.blank .ck-memo { width: 3.6in; border-bottom: 1px solid #333; }
.ck-check.blank .ck-sign { border-bottom: 1px solid #333; }
.ck-check.blank .ck-sign .ck-lbl { position: absolute; top: .34in; left: 0; }
.ck-dollars { margin-left: 8px; }
.ck-stub { position: absolute; inset: .3in .45in; display: flex; flex-direction: column; gap: 8px; font-size: 9pt; }
.st-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid #999; }
.st-head div { display: flex; flex-direction: column; } .st-head .r { text-align: right; }
.st-head span { color: #555; font-size: 8.5pt; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-t { width: 100%; border-collapse: collapse; font-size: 8.5pt; margin-bottom: 6px; }
.st-t th { text-align: left; font-weight: 600; border-bottom: 1px solid #bbb; padding: 2px 4px; }
.st-t td { padding: 2px 4px; border-bottom: 1px dotted #ddd; }
.st-t .r { text-align: right; font-family: 'Geist Mono', monospace; }
.st-net { margin-top: auto; display: flex; justify-content: flex-end; gap: 18px; padding-top: 6px; border-top: 1px solid #999; font-family: 'Geist Mono', monospace; }
#print-root { display: none; }
@media print {
  @page { size: letter; margin: 0; }
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  body.printing { background: #fff; }
  #print-root .ck-page { page-break-after: always; break-after: page; }
}
.tbl td.act { text-align: right; white-space: nowrap; }
.modal.xwide { max-width: 940px; }
.ck-preview { display: block; }
.ck-preview .ck-page { margin: 0 auto 16px; }

/* ---------- home map (QuickBooks-style) ---------- */
.home-map { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0; overflow: hidden; }
.hm-flow { overflow-x: auto; padding: 12px; border-right: 1px solid var(--line); }
.hm-canvas { position: relative; min-width: 760px; aspect-ratio: 1000 / 760; }
.hm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-band { fill: var(--surface-2); stroke: var(--line-soft); }
.hm-line { fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linejoin: round; opacity: .55; }
.hm-line.off { stroke: var(--faint); opacity: .35; stroke-dasharray: 5 5; }
.hm-head { fill: var(--primary); opacity: .75; } .hm-head.off { fill: var(--faint); opacity: .5; }
.hm-band-label { position: absolute; left: 50%; transform: translate(-50%, -50%); padding: 2px 12px; border-radius: 10px; background: var(--forest); color: var(--on-forest); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; z-index: 1; }
.hm-band-label.static { position: static; transform: none; align-self: center; }
.hm-node { position: absolute; transform: translate(-50%, -24px); width: 120px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; }
.hm-node .hm-label { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; }
.hm-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--tint-2); color: var(--primary); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 1px 2px rgba(15, 17, 19, .08); transition: background .12s, color .12s; }
.hm-node:hover .hm-ic, .hm-node:focus-visible .hm-ic { background: var(--forest); border-color: var(--forest); color: var(--amber); }
.hm-node.off { cursor: help; } .hm-node.off .hm-ic { color: var(--faint); border-style: dashed; background: transparent; box-shadow: none; } .hm-node.off .hm-label { color: var(--faint); font-weight: 500; }
.hm-side { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--surface-2); }
.hm-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.hm-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border: 0; background: none; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--ink); text-align: center; }
.hm-tile:hover { background: var(--tint); }
.hm-ic.sm { width: 38px; height: 38px; border-radius: 10px; }
.hm-tile:hover .hm-ic { background: var(--forest); color: var(--amber); border-color: var(--forest); }
@media (max-width: 1180px) { .home-map { grid-template-columns: minmax(0, 1fr); } .hm-flow { border-right: 0; border-bottom: 1px solid var(--line); } .hm-side { flex-direction: row; flex-wrap: wrap; } .hm-panel { flex: 1 1 260px; } .hm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Write Checks: the on-screen check ---------- */
.ck-card { padding: 0; overflow: hidden; }
.ck-ribbon { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ck-bal { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ck-bal b { font-size: 17px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.icon-btn.gear { border: 1px solid var(--line-strong); background: var(--surface); }
.ck-face-wrap { padding: 20px 18px; overflow-x: auto; background: var(--sunk); }
.check-face { position: relative; max-width: 860px; min-width: 640px; margin: 0 auto; padding: 18px 22px 16px; border-radius: 6px; border: 1px solid var(--tint-2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tint) 70%, var(--surface)), var(--surface) 60%, color-mix(in srgb, var(--tint) 55%, var(--surface)));
  box-shadow: 0 1px 3px rgba(15, 17, 19, .12); display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px 24px; }
.check-face.void { opacity: .7; }
.cf-void { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 64px var(--f-display); color: var(--bad); opacity: .25; transform: rotate(-12deg); pointer-events: none; }
.cf-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cf-co { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-2); } .cf-co b { font-family: var(--f-display); font-size: 16px; color: var(--ink); }
.cf-meta { display: flex; flex-direction: column; gap: 6px; }
.cf-inline { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 6px; }
.check-face input, .check-face select, .check-face textarea { height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); width: 100%; min-width: 0; }
.check-face textarea { height: auto; padding: 6px 8px; resize: vertical; font-size: 13px; }
.check-face input:focus, .check-face select:focus, .check-face textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--tint); }
.check-face input:disabled { background: transparent; border-style: dashed; }
.cf-pay { grid-column: 1 / -1; display: grid; grid-template-columns: 96px minmax(0, 1fr) 220px; gap: 12px; align-items: center; }
.cf-pay .cf-lbl { white-space: normal; line-height: 1.2; }
.cf-payee { display: flex; gap: 8px; min-width: 0; } .cf-payee > * { flex: 1 1 0; }
.cf-amt { display: flex; align-items: center; gap: 6px; }
.cf-dollar { font: 600 18px var(--f-mono); color: var(--ink-2); }
.cf-amt input { height: 38px; font: 600 16px var(--f-mono); text-align: right; }
.cf-words { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 10px; min-height: 26px; padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); font-size: 14px; }
.cf-words #ck-words { flex: 1; }
.cf-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: end; }
.cf-addr { display: flex; flex-direction: column; gap: 4px; }
.cf-sign { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .cf-sign span:first-child { width: 260px; max-width: 100%; border-bottom: 1px solid var(--ink-2); height: 28px; }
.cf-memo { grid-column: 1 / -1; display: grid; grid-template-columns: 56px minmax(0, 420px); gap: 8px; align-items: center; }
.ck-tabs { display: flex; align-items: center; gap: 4px; padding: 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.ck-tabs button { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-weight: 600; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.ck-tabs button.on { color: var(--ink); border-bottom-color: var(--primary); }
.ck-lines { padding: 8px 18px 16px; }

/* ---------- check alignment tool ---------- */
.al-wrap { overflow-x: auto; padding: 10px; background: #d9d6cc; border-radius: 8px; }
.al-check { position: relative; width: 8.5in; height: 3.5in; margin: 0 auto; background: #fff; color: #111; font-family: 'Geist', Arial, sans-serif; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); overflow: hidden; }
.al-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(15, 17, 19, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 17, 19, .08) 1px, transparent 1px); background-size: .5in .5in; pointer-events: none; }
.al-f { position: absolute; white-space: nowrap; cursor: grab; padding: 1px 3px; border: 1px dashed rgba(15, 17, 19, .55); border-radius: 3px; background: rgba(228, 87, 46, .12); user-select: none; touch-action: none; line-height: 1.3; }
.al-f.fixed { cursor: default; border-color: transparent; background: none; font-size: 9pt; }
.al-f:hover, .al-f.drag, .al-f:focus-visible { border-color: #0F1113; background: rgba(228, 87, 46, .3); outline: none; z-index: 2; }
.al-f.drag { cursor: grabbing; }
.al-tag { position: absolute; left: 0; bottom: 100%; font: 600 9px 'Geist', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #0F1113; background: #fff; padding: 0 3px; border-radius: 2px; opacity: 0; transition: opacity .1s; }
.al-f:hover .al-tag, .al-f.drag .al-tag, .al-f:focus-visible .al-tag { opacity: 1; }
.al-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
.al-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.al-move { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.al-move-l { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.al-pad { display: flex; flex-direction: column; align-items: center; gap: 2px; } .al-pad > div { display: flex; gap: 30px; }
.btn.nudge { min-height: 30px; width: 34px; padding: 0; }
.al-tbl input { height: 32px; }
@media (max-width: 860px) { .al-controls { grid-template-columns: minmax(0, 1fr); } .check-face { min-width: 560px; } }

/* printed-check fields are placed from the saved layout; these only style them */
.ck-co { display: block; white-space: normal !important; width: 3.6in; font-size: 9pt; }
.ck-no, .ck-bank, .ck-sign { display: block; }
.ck-check.test { outline: 1px dashed #999; outline-offset: -1px; }
.ck-check.test > div { outline: 1px dotted #0F1113; }
.ck-stub.test { align-items: center; justify-content: center; color: #777; border: 1px dashed #bbb; }

/* ---------- check register (QuickBooks-style) ---------- */
.reg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reg-head h1 { font-family: var(--f-display); font-size: 28px; font-weight: 500; }
.reg-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.reg-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.filter-search.sm { height: 34px; min-width: 220px; flex: 0 1 280px; margin-right: 8px; }
.reg-scroll { max-height: min(62vh, 640px); overflow: auto; }
.register.qb { table-layout: fixed; min-width: 900px; font-size: 13px; }
.register.qb col.w-date { width: 104px; } .register.qb col.w-num { width: 86px; } .register.qb col.w-payee { width: 24%; } .register.qb col.w-amt { width: 110px; } .register.qb col.w-clr { width: 44px; }
.register.qb thead th { position: sticky; top: 0; z-index: 1; background: var(--forest); color: var(--on-forest); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; border-bottom: 0; }
.register.qb td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.register.qb .reg-row { cursor: default; }
.register.qb tbody > .reg-row:nth-child(even) td { background: color-mix(in srgb, var(--tint) 35%, var(--surface)); }
.register.qb .reg-row.unc td { color: var(--ink); }
.register.qb .reg-row:hover td, .register.qb tbody.two:hover td { background: var(--tint); }
.register.qb .reg-row.sel td, .register.qb tbody.two.sel td { background: color-mix(in srgb, var(--amber) 28%, var(--surface)) !important; }
.register.qb.two-line tbody.two .reg-row td { border-bottom: 0; padding-bottom: 2px; }
.register.qb.two-line tbody.two .reg-row2 td { padding-top: 0; }
.register.qb.two-line tbody.two:nth-child(even) td { background: color-mix(in srgb, var(--tint) 35%, var(--surface)); }
.register.qb .clr { width: 24px; height: 24px; font-size: 13px; }
.reg-entry { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-top: 2px solid var(--primary); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); overflow-x: auto; }
.re-grid { flex: 1; min-width: 860px; display: grid; grid-template-columns: 130px 86px minmax(0, 1.2fr) minmax(0, 1.2fr) 110px 110px minmax(0, 1fr); gap: 6px; }
.re-grid.two { grid-template-columns: 130px 86px minmax(0, 1fr) minmax(0, 1fr) 110px 110px; } .re-grid.two .re-memo { grid-column: 3 / 5; }
.re-grid input, .re-grid select { height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); min-width: 0; }
.re-grid input.r { text-align: right; font-family: var(--f-mono); }
.re-actions { display: flex; gap: 6px; }
.reg-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); }
.reg-bal { display: flex; flex-direction: column; align-items: flex-end; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.reg-bal b { font-size: 15px; color: var(--ink); letter-spacing: 0; }
.reg-bal.big b { font-size: 22px; }
/* page sections keep their natural height inside the scrolling main column */
.main > * { flex-shrink: 0; }

/* ---------- time sheets ---------- */
.week-nav { display: flex; align-items: center; gap: 6px; }
.week-nav b { font-size: 14px; min-width: 190px; text-align: center; font-variant-numeric: tabular-nums; }
.week-nav.boxed { height: 40px; padding: 0 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); justify-content: space-between; }
.week-nav.boxed b { min-width: 0; font-weight: 500; }
.ts-grid { min-width: 1100px; }
.ts-grid th small { display: block; font-weight: 400; color: var(--faint); font-size: 11px; }
.ts-grid th.today, .ts-grid td.today { background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.ts-grid td.c-hr { width: 62px; } .ts-grid td.c-hr input { text-align: center; font-family: var(--f-mono); padding: 0 4px; }
.ts-grid td select { min-width: 140px; }
.ts-grid tfoot td { font-weight: 600; }
.ts-grid tr.ts-paid td { opacity: .7; }
.ts-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--line); }
.ts-sum { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); } .ts-sum b { color: var(--ink); margin-left: 4px; }
.ts-sum .warn-text b { color: var(--warn); }
.time-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.tc-main { display: flex; align-items: center; gap: 14px; } .tc-main > .ic { color: var(--primary); } .tc-main div { display: flex; flex-direction: column; gap: 2px; }
.tc-act { display: flex; gap: 8px; flex-wrap: wrap; }
.st-period { font-size: 8pt; color: #555; }
td .badge { margin-top: 4px; }
.rp-multi { margin-top: 8px; }
.rp-from { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.rp-from select { height: 32px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); max-width: 240px; font-size: 12.5px; }
.rp-accts { display: flex; flex-direction: column; gap: 10px; }
.rp-split { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; color: var(--ink-2); max-width: 340px; line-height: 1.35; }
.rp-split .ic { color: var(--primary); margin-top: 2px; }
.rp-jobs { padding-left: 0; margin-top: 2px; align-self: flex-start; }
.ja-wrap { max-height: 55vh; overflow: auto; }


/* =====================================================================
   Talon Ledger layout (sidebar brand + switcher, white top bar, home)
   ===================================================================== */
body { font-feature-settings: 'ss01' on; letter-spacing: -0.005em; }
h1, h2, h3, .display { font-family: var(--f-display); }
.display { font-weight: 600; letter-spacing: -0.025em; }
.page-head h1 { font-family: var(--f-display); font-weight: 600; font-size: 28px; letter-spacing: -0.025em; }
.reg-head h1 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; }
a { color: var(--accent-ink); }
a:hover { color: var(--accent-ink); }
.btn-link { color: var(--accent-ink); }
.kpi-val { font-family: var(--f-sans); font-weight: 600; letter-spacing: -0.02em; }
.eyebrow { color: var(--muted); }
:focus-visible { outline-color: var(--accent); }

/* shell */
.app { flex-direction: row; }
.side { width: 236px; padding: 16px 12px 12px; gap: 4px; background: var(--surface); border-right: 1px solid var(--line); height: 100%; }
.side .brand { padding: 4px 8px 10px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.wm-text { font-family: var(--f-display); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.wm-sub { font-weight: 500; color: var(--muted); }
.brand:hover { text-decoration: none; }
.side .co-wrap { margin-bottom: 10px; }
.side .co-switch { width: 100%; max-width: none; height: auto; min-height: 48px; padding: 8px 10px; gap: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 1px 2px rgba(15, 17, 19, .04); text-align: left; }
.side .co-switch:hover { border-color: var(--line-strong); background: var(--surface-2); }
.co-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--tint); color: var(--accent-ink); font-size: 11px; }
.co-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.co-text b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-text small { font-size: 11.5px; color: var(--muted); }
.side .co-switch > .ic { color: var(--faint); }
.side .co-menu { left: 0; right: 0; top: calc(100% + 6px); }
.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-item { min-height: 38px; border-radius: 9px; color: var(--ink-2); font-weight: 500; }
.nav-item .ic { color: var(--muted); }
.nav-item:hover { background: var(--sunk); color: var(--ink); }
.nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 600; }
.nav-item.active .ic { color: var(--nav-active-ink); }
.nav-count { background: var(--tint); color: var(--accent-ink); }
.nav-item.active .nav-count { background: var(--accent); color: #fff; }
.close-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; gap: 8px; margin: 12px 0 6px; }
.close-card:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.cc-row { display: flex; justify-content: space-between; align-items: baseline; }
.cc-title { font-size: 13px; font-weight: 600; }
.cc-count { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.cc-bar { background: var(--sunk); height: 5px; }
.cc-bar > span { background: var(--accent); }
.cc-link { color: var(--accent-ink); font-size: 12.5px; font-weight: 600; }
.sync-line { display: flex; align-items: center; gap: 8px; padding: 6px 8px 2px; font-size: 12px; color: var(--muted); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #22A06B; box-shadow: 0 0 0 3px rgba(34, 160, 107, .15); }
.body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 64px; background: var(--bg); color: var(--ink); gap: 12px; padding: 0 28px; border-bottom: 0; }
.topbar .search { max-width: 440px; height: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--faint); box-shadow: 0 1px 2px rgba(15, 17, 19, .03); }
.topbar .search:hover { border-color: var(--line-strong); }
.topbar kbd { border-color: var(--line); color: var(--muted); background: var(--sunk); font-size: 11px; }
.topbar .icon-btn { color: var(--ink-2); width: 40px; height: 40px; }
.topbar .icon-btn:hover { background: var(--surface); color: var(--ink); }
.dot { background: var(--accent); color: #fff; }
.btn-new, .btn-amber { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; min-height: 38px; border-radius: 10px; }
.btn-new:hover, .btn-amber:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-new .ic { color: var(--accent); }
.avatar { background: var(--surface); color: var(--ink); border: 1px solid var(--line); width: 38px; height: 38px; }
.brand.mobile-only { display: none; }
.main { padding: 8px 28px 64px; }
.sample-bar { background: var(--tint); color: var(--accent-ink); border-top: 1px solid var(--tint-2); }
.sample-bar button { color: var(--accent-ink); }
.btn { border-radius: 9px; }
.btn-primary-soft { background: var(--tint); border-color: var(--tint-2); color: var(--accent-ink); }
.btn-primary-soft:hover { background: var(--tint-2); }
.subnav button.on, .seg button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tab.active { border-bottom-color: var(--accent); }
.ck-tabs button.on { border-bottom-color: var(--accent); }
.card { border-radius: var(--radius); }
.wf-n { background: var(--accent); color: #fff; }
.hm-line { stroke: var(--muted); opacity: .5; }
.hm-head { fill: var(--muted); }
.hm-ic { border-color: var(--line); color: var(--ink); }
.hm-node:hover .hm-ic, .hm-node:focus-visible .hm-ic, .hm-tile:hover .hm-ic { background: var(--primary); border-color: var(--primary); color: var(--accent); }
.hm-tile:hover { background: var(--sunk); }
.style-card.on { background: var(--tint); border-color: var(--accent); }
.si-check { fill: var(--accent); }
.check-face { background: linear-gradient(135deg, var(--surface), var(--sunk)); border-color: var(--line); box-shadow: 0 1px 3px rgba(15, 17, 19, .08); }
.register.qb thead th { background: var(--primary); color: var(--on-primary); }
.register.qb .reg-row.sel td, .register.qb tbody.two.sel td { background: var(--tint) !important; }
.reg-entry { border-top-color: var(--accent); background: color-mix(in srgb, var(--tint) 50%, var(--surface)); }
.style-card:focus-within, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.wl-card .display, .auth-side .display { font-weight: 600; letter-spacing: -0.03em; }
.welcome, .auth-side { background: var(--forest); background-image: radial-gradient(circle at 85% 8%, rgba(228, 87, 46, .22), transparent 42%); }
.wl-brand { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.03em; }
.wl-brand .wm-sub, .setup-top .wm-sub { color: var(--on-forest-muted); }
.setup-top .brand span { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; }
.step.cur .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.ind.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ind.on .ind-ic { background: var(--accent); color: #fff; }
.ind.on .ind-t small { color: var(--on-forest-muted); }
.toast { background: var(--primary); color: var(--on-primary); }

/* home */
.hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 8px; }
.hd-date { font-size: 13px; color: var(--muted); }
.hd h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; margin-top: 2px; }
.quick { display: flex; gap: 8px; flex-wrap: wrap; }
.quick .btn { border-radius: 999px; background: var(--surface); border-color: var(--line); min-height: 36px; font-weight: 500; }
.quick .btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.home-tabs { display: flex; gap: 2px; }
.home-tabs button { background: none; border: 0; padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; cursor: pointer; }
.home-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 17, 19, .06); }
.top-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; }
.hero { background: var(--hero-bg); color: var(--hero-ink); border-radius: 18px; padding: 22px 24px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hero-label { font-size: 13px; color: var(--hero-muted); }
.hero-amt { font-size: 46px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hero-amt .cents { color: var(--hero-muted); font-weight: 500; }
.hero-delta { font-size: 13px; color: var(--hero-muted); } .hero-delta b { color: #F2805A; font-weight: 600; } .hero-delta b.down { color: #F59A8E; }
.hero-seg { display: inline-flex; padding: 3px; background: rgba(255, 255, 255, .06); border: 1px solid var(--hero-line); border-radius: 10px; gap: 2px; }
.hero-seg button { border: 0; background: none; color: var(--hero-muted); font: 500 12px var(--f-sans); padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.hero-seg button.on { background: #F6F6F4; color: #0F1113; }
.hero-chart svg { width: 100%; height: auto; display: block; }
.hero-chart .grid { stroke: var(--hero-line); }
.hero-chart .axis { fill: var(--hero-muted); font: 11px var(--f-sans); }
.attn { padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.attn h2 { font-size: 15px; font-weight: 600; padding: 0 6px 8px; }
.attn-item { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid transparent; border-radius: 11px; background: none; text-align: left; cursor: pointer; color: var(--ink); width: 100%; }
.attn-item:hover { background: var(--sunk); }
.attn-item.hot { background: var(--tint); border-color: var(--tint-2); }
.attn-ic { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--ink-2); flex-shrink: 0; }
.attn-item.hot .attn-ic { color: var(--accent-ink); border-color: var(--tint-2); }
.attn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attn-t b { font-size: 13.5px; font-weight: 600; } .attn-t small { font-size: 12px; color: var(--muted); }
.attn-item > .ic:last-child { color: var(--faint); }
.kpis.talon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi.spark { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 16px 18px; }
.kpi.spark .kpi-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi.spark .kpi-val { font-size: 25px; }
.kpi-note.up { color: var(--good); } .kpi-note.down, .kpi-note.bad { color: var(--bad); }
.spark-svg { flex-shrink: 0; overflow: visible; }
.spark-svg .sp-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.bottom-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
.legend .sw { border-radius: 2px; }
.act-list { list-style: none; margin: 0; padding: 0 12px 10px; }
.act-list li button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line-soft); background: none; text-align: left; cursor: pointer; color: var(--ink); }
.act-list li:last-child button { border-bottom: 0; }
.act-list li button:hover { background: var(--surface-2); }
.act-av { width: 34px; height: 34px; border-radius: 50%; background: var(--sunk); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.act-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .act-t b { font-weight: 600; font-size: 13.5px; } .act-t small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-amt { font-family: var(--f-mono); font-size: 13.5px; font-weight: 500; } .act-amt.in { color: var(--good); }
@media (max-width: 1180px) { .top-row, .bottom-row { grid-template-columns: minmax(0, 1fr); } .kpis.talon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; transform: translateX(-105%); transition: transform .2s; box-shadow: var(--shadow); }
  body.nav-open .side { transform: none; }
  .brand.mobile-only { display: inline-flex; }
  .topbar { padding: 0 12px; }
  .main { padding: 8px 16px 64px; }
  .hero-amt { font-size: 36px; }
  .quick { width: 100%; }
}
@media (max-width: 520px) { .kpis.talon { grid-template-columns: minmax(0, 1fr); } }

/* ---------- menu bar (File … Help) ---------- */
.menubar { position: relative; z-index: 35; display: flex; align-items: center; gap: 1px; height: 34px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex-shrink: 0; overflow: visible; }
.mb-top { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.mb-top:hover, .mb-top.on, .mb-top:focus-visible { background: var(--sunk); color: var(--ink); outline: none; }
.mb-top.on { background: var(--primary); color: var(--on-primary); }
.mb-menu { min-width: 250px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.mb-drop { position: absolute; top: 32px; max-height: calc(100vh - 80px); overflow-y: auto; overflow-x: visible; }
.mb-drop:has(.mb-it.has-sub) { overflow: visible; max-height: none; }
.mb-btn { width: 100%; display: flex; align-items: center; gap: 18px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; }
.mb-btn > span { flex: 1; }
.mb-btn:hover, .mb-btn:focus-visible, .mb-it.has-sub:hover > .mb-btn, .mb-it.open > .mb-btn { background: var(--tint); color: var(--ink); outline: none; }
.mb-btn[aria-disabled="true"] { color: var(--faint); cursor: default; }
.mb-btn[aria-disabled="true"]:hover { background: var(--sunk); }
.mb-btn kbd { font: 11px var(--f-mono); color: var(--muted); border: 0; padding: 0; background: none; }
.mb-btn .ic { color: var(--faint); }
.mb-btn.chk > span::before { content: '•'; color: var(--accent); margin-right: 6px; }
.mb-sep { height: 1px; margin: 5px 6px; background: var(--line-soft); }
.mb-it { position: relative; }
.mb-sub { display: none; position: absolute; top: -6px; left: calc(100% + 2px); z-index: 2; max-height: 80vh; overflow-y: auto; }
.mb-sub.left { left: auto; right: calc(100% + 2px); }
.mb-it.has-sub:hover > .mb-sub, .mb-it.open > .mb-sub { display: block; }
body.side-hidden .side { display: none; }
@media (max-width: 860px) { .menubar { display: none; } }

/* ---------- report extras ---------- */
.rp-chart { margin: 0 0 14px; }
.rp-chart .legend { justify-content: flex-end; padding: 0 16px 4px; }
.fav.mem { padding: 0 4px 0 0; gap: 0; }
.fav.mem > button:first-child { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 10px 0 14px; border: 0; background: none; cursor: pointer; font-weight: 500; color: var(--ink); }
.multi-rep { margin-top: 18px; }

/* ---------- company pages ---------- */
.exp-bars { list-style: none; margin: 0; padding: 4px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.exp-bars li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; }
.exp-bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-track { height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; } .eb-track span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.cal-wrap { overflow-x: auto; padding: 0 12px 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 4px; min-width: 780px; }
.cal-dow { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; }
.cal-day { min-height: 104px; display: flex; flex-direction: column; gap: 3px; align-items: stretch; padding: 6px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface); text-align: left; cursor: pointer; overflow: hidden; }
.cal-day:hover { border-color: var(--line-strong); }
.cal-day.other { background: var(--surface-2); } .cal-day.other .cal-n { color: var(--faint); }
.cal-day.today .cal-n { background: var(--accent); color: #fff; }
.cal-day.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cal-n { align-self: flex-start; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.cal-ev { font-size: 11px; line-height: 1.3; padding: 2px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--sunk); color: var(--ink-2); border-left: 3px solid var(--faint); }
.cal-ev.in, .cal-dot.in { border-color: var(--good); } .cal-ev.out, .cal-dot.out { border-color: var(--accent); } .cal-ev.pay, .cal-dot.pay { border-color: var(--info); } .cal-ev.todo, .cal-dot.todo { border-color: var(--warn); }
.cal-more { font-size: 11px; color: var(--muted); padding-left: 6px; }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; border: 3px solid var(--faint); flex-shrink: 0; }
.cal-key span { font-size: 12.5px; }
.todo-list, .rem-list { list-style: none; margin: 0; padding: 4px 12px 12px; }
.todo-list li { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--line-soft); }
.todo-list li.done .td-main b { text-decoration: line-through; color: var(--muted); }
.td-main { flex: 1; display: flex; flex-direction: column; gap: 2px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); padding: 2px 0; }
.td-main small { color: var(--muted); font-size: 12px; }
.rem-list > li { border-bottom: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; }
.rem-h { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 6px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.rem-items { width: 100%; list-style: none; margin: 0 0 10px; padding: 0 0 0 30px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.rem-items li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 120px; gap: 10px; align-items: center; }
.rem-items .mono { text-align: right; }
.lt-pick { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.letters { display: flex; flex-direction: column; gap: 18px; }
.letter { background: #fff; color: #111; max-width: 8.5in; width: 100%; margin: 0 auto; padding: .8in .9in; border: 1px solid var(--line); border-radius: 6px; font-size: 11pt; line-height: 1.55; display: flex; flex-direction: column; gap: 14px; }
.lt-date { color: #444; } .lt-to { margin-top: 10px; }
.verify-list, .help-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.fav-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; max-height: 55vh; overflow-y: auto; }
@media print { body.printing-letters .letter { border: 0; page-break-after: always; } }

/* ---------- Home Page & Insights charts ---------- */
:root { --cat1: #E4572E; --cat2: #2F6DB5; --cat3: #2A9D8F; --cat4: #C9951A; --cat5: #8B5CB8; --cat-other: #B9BDC2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cat2: #3F7AC4; --cat3: #2FA394; --cat4: #B8871A; --cat5: #9B6FCA; --cat-other: #4A4F56; } }
:root[data-theme="dark"] { --cat2: #3F7AC4; --cat3: #2FA394; --cat4: #B8871A; --cat5: #9B6FCA; --cat-other: #4A4F56; }
.home-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pl-card .card-h { flex-wrap: wrap; }
.pl-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px 24px; padding: 4px 20px 16px; align-items: center; }
.pl-stats { display: flex; flex-direction: column; gap: 14px; }
.pl-stats > div { display: flex; flex-direction: column; gap: 2px; }
.pl-net b { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pl-net small { color: var(--muted); font-size: 12px; }
.pl-stats b.mono { font-size: 17px; }
.pl-lbl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.chart .zero { stroke: var(--line-strong); stroke-width: 1; }
.c-in { fill: var(--bar-in); background: var(--bar-in); } .c-out { fill: var(--bar-out); background: var(--bar-out); }
.c-net { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; background: var(--muted); }
.c-net-dot { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
.c-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.c-area { fill: var(--accent); opacity: .12; }
.c-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; } .c-dot.end { fill: var(--accent); }
.chart .hit { fill: transparent; }
.chart .mk:hover rect:not(.hit) { opacity: .82; }
.chart .mk:hover .hit { fill: var(--ink); opacity: .04; }
.ch-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 16px 6px; font-size: 12.5px; color: var(--muted); }
.ch-legend span, .inc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--faint); flex-shrink: 0; }
.lg.c-net { height: 2px; border-radius: 1px; width: 14px; }
.lg.cat1, .seg.cat1 { background: var(--cat1); fill: var(--cat1); } .lg.cat2, .seg.cat2 { background: var(--cat2); fill: var(--cat2); } .lg.cat3, .seg.cat3 { background: var(--cat3); fill: var(--cat3); }
.lg.cat4, .seg.cat4 { background: var(--cat4); fill: var(--cat4); } .lg.cat5, .seg.cat5 { background: var(--cat5); fill: var(--cat5); } .lg.cat-other, .seg.cat-other { background: var(--cat-other); fill: var(--cat-other); }
.seg { stroke: var(--surface); stroke-width: 2; } .seg:hover { opacity: .85; }
.ins-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ins-card { min-width: 0; } .ins-card .card-h { flex-wrap: wrap; } .ins-body { padding: 0 8px 14px; }
.ins-stats { display: flex; gap: 18px; flex-wrap: wrap; padding: 0 16px 8px; font-size: 13px; color: var(--muted); } .ins-stats span { display: inline-flex; align-items: center; gap: 6px; } .ins-stats b { color: var(--ink); }
.donut-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; padding: 0 12px; }
.donut { width: 100%; max-width: 200px; height: auto; }
.d-total { font: 600 17px var(--f-sans); fill: var(--ink); }
.d-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.d-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 40px; gap: 8px; align-items: center; }
.d-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d-legend small { color: var(--muted); text-align: right; }
.inc-bar { display: flex; gap: 2px; height: 22px; margin: 18px 12px 12px; border-radius: 6px; overflow: hidden; background: var(--sunk); }
.inc-bar span { display: block; height: 100%; min-width: 2px; }
.ib-open { background: var(--bar-in); } .ib-over { background: var(--bad); } .ib-paid { background: var(--good); }
.inc-legend { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; font-size: 13px; }
.inc-legend span { justify-content: flex-start; } .inc-legend b { margin-left: auto; }
.hbars { list-style: none; margin: 0; padding: 4px 12px; display: flex; flex-direction: column; gap: 10px; }
.hbars li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; }
.hbars li.click { cursor: pointer; } .hbars li.click:hover .hb-l { text-decoration: underline; }
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-t { height: 10px; border-radius: 5px; background: var(--sunk); overflow: hidden; } .hb-t span { display: block; height: 100%; border-radius: 5px; }
@media (max-width: 1180px) { .ins-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .pl-body, .donut-wrap { grid-template-columns: minmax(0, 1fr); } .pl-stats { flex-direction: row; flex-wrap: wrap; gap: 16px 24px; } }
.lg.c-in { background: var(--bar-in); } .lg.c-out { background: var(--bar-out); } .lg.c-net { background: var(--muted); }
.ins-card.wide { width: 100%; }
/* Home Page / Insights tabs in Ember, one size up */
.home-tabs { gap: 6px; }
.home-tabs button { font-size: 15px; font-weight: 600; color: var(--accent-ink); padding: 8px 16px; border: 1px solid var(--tint-2); background: var(--tint); }
.home-tabs button:hover { border-color: var(--accent); }
.home-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }