@import url('data:text/css,');

:root {
  --ink: #17231f;
  --muted: #69736f;
  --faint: #98a19d;
  --paper: #f4f5f0;
  --card: #ffffff;
  --line: #e4e7e0;
  --line-dark: #d7dcd4;
  --forest: #173c31;
  --forest-2: #245647;
  --green: #2e7d61;
  --mint: #dff2e9;
  --lime: #c8e86b;
  --amber: #c7792d;
  --amber-bg: #fff3df;
  --red: #b94c48;
  --red-bg: #fbe9e7;
  --blue: #486f9d;
  --blue-bg: #eaf0f7;
  --purple: #78649d;
  --shadow: 0 1px 2px rgba(19, 37, 31, .035), 0 8px 25px rgba(19, 37, 31, .025);
  --radius: 16px;
  --sidebar: 248px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { margin: 0; min-height: 100%; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar); color: #e8f0ec; background: #13251f; display: flex; flex-direction: column; padding: 24px 15px 16px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 2px 11px 27px; }
.brand-mark { width: 35px; height: 35px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 8px; }
.brand-mark span { width: 4px; border-radius: 4px; background: var(--lime); }
.brand-mark span:nth-child(1) { height: 10px; opacity: .65; }
.brand-mark span:nth-child(2) { height: 18px; }
.brand-mark span:nth-child(3) { height: 14px; opacity: .8; }
.brand strong { display: block; font-size: 16px; letter-spacing: -.2px; }
.brand small { color: #8fa39b; display: block; margin-top: 2px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.main-nav { display: grid; gap: 5px; }
.nav-item { width: 100%; min-height: 45px; border: 0; background: transparent; color: #9aada6; border-radius: 10px; display: grid; grid-template-columns: 23px 1fr auto; align-items: center; text-align: left; gap: 10px; padding: 0 12px; cursor: pointer; transition: .18s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.045); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.095); box-shadow: inset 3px 0 0 var(--lime); }
.nav-item svg { width: 19px; height: 19px; }
.nav-item b { font-size: 10px; font-weight: 700; color: #b9c8c2; background: rgba(255,255,255,.09); border-radius: 999px; min-width: 24px; text-align: center; padding: 3px 6px; }
.sidebar-lower { margin-top: auto; }
.sync-mini { margin: 12px 5px 17px; padding: 12px 10px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); border-radius: 11px; display: grid; grid-template-columns: 30px 1fr 8px; align-items: center; gap: 9px; }
.sync-mini .sync-icon { width: 29px; height: 29px; border-radius: 7px; background: #1b744f; position: relative; }
.sync-mini .sync-icon:before { content: ""; position: absolute; inset: 6px 8px; border: 2px solid #fff; border-left: 0; }
.sync-mini strong, .profile strong { display: block; font-size: 11px; font-weight: 650; color: #e7efeb; white-space: nowrap; }
.sync-mini small, .profile small { display: block; font-size: 9px; color: #839991; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(200,232,107,.09); }
.profile { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 8px 0; display: grid; grid-template-columns: 33px 1fr 24px; gap: 9px; align-items: center; }
.avatar { width: 33px; height: 33px; border-radius: 50%; color: #183129; background: #dce9d8; display: grid; place-items: center; font-weight: 800; font-size: 10px; }
.profile button { background: none; border: 0; color: #80958e; cursor: pointer; }

.main { margin-left: var(--sidebar); min-height: 100vh; }
.topbar { height: 74px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 31px; background: rgba(244,245,240,.94); backdrop-filter: blur(13px); border-bottom: 1px solid rgba(215,220,212,.8); }
.global-search { min-width: 340px; max-width: 510px; width: 42%; height: 40px; border: 1px solid var(--line-dark); background: #fafbf8; border-radius: 10px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; padding: 0 11px; color: #7a847f; cursor: text; text-align: left; }
.global-search:hover { border-color: #b9c4bd; background: #fff; }
.global-search svg { width: 18px; }
kbd { border: 1px solid #d7dbd5; border-bottom-width: 2px; background: #fff; border-radius: 5px; color: #89928e; min-width: 24px; padding: 2px 6px; font-size: 10px; text-align: center; box-shadow: 0 1px 0 #eee; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.date-control { height: 40px; border: 1px solid var(--line-dark); background: #fff; border-radius: 10px; display: flex; align-items: stretch; position: relative; }
.date-control > button { border: 0; background: transparent; cursor: pointer; }
.date-control > button:first-child, .date-control > button:last-child { width: 28px; font-size: 20px; color: #75807b; }
.date-control > button:first-child:hover, .date-control > button:last-child:hover { background: #f5f6f2; }
.date-button { min-width: 103px; padding: 4px 8px 3px; border-left: 1px solid #edf0eb !important; border-right: 1px solid #edf0eb !important; }
.date-button span { display: block; font-weight: 720; color: var(--ink); font-size: 11px; }
.date-button small { display: block; color: #8c9691; font-size: 8px; margin-top: 1px; }
#asOfDate { position: absolute; opacity: 0; pointer-events: none; width: 0; }
.btn { height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; border: 1px solid transparent; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: .15s ease; }
.btn svg { width: 16px; }
.btn.primary { color: white; background: var(--forest-2); border-color: var(--forest-2); box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.btn.primary:hover { background: #193f34; transform: translateY(-1px); }
.btn.secondary { color: #42514b; background: #fff; border-color: var(--line-dark); }
.btn.secondary:hover { border-color: #b7c1bb; background: #fafbf8; }
.btn.compact { height: 36px; padding: 0 11px; }
.mobile-menu { display: none; }
.icon-btn { width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; }

.view { display: none; padding: 29px 31px 48px; max-width: 1600px; margin: 0 auto; }
.view.active { display: block; animation: viewIn .22s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.page-head h1 { margin: 6px 0 5px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px, 2.4vw, 37px); line-height: 1.08; font-weight: 500; letter-spacing: -.025em; }
.page-head p { margin: 0; color: var(--muted); font-size: 12px; }
.eyebrow, .section-kicker { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.text-btn, .icon-text { border: 0; background: transparent; color: var(--forest-2); font-size: 11px; font-weight: 750; cursor: pointer; padding: 6px 0; }
.text-btn span { margin-left: 4px; }
.icon-text { color: var(--muted); }

.quality-alert { min-height: 51px; position: relative; border: 1px solid #ebd6b8; background: #fffaf2; border-radius: 11px; padding: 10px 42px 10px 13px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; margin-bottom: 15px; }
.quality-alert.hidden { display: none; }
.quality-icon { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; color: #a66727; background: #f8e9d3; font-weight: 900; }
.quality-alert strong { display: block; font-size: 11px; }
.quality-alert div > span { display: block; color: #817566; font-size: 10px; margin-top: 2px; }
.quality-alert > button:not(.dismiss) { border: 0; background: none; color: #8e5c28; font-size: 10px; font-weight: 750; cursor: pointer; }
.quality-alert .dismiss { position: absolute; right: 12px; top: 11px; border: 0; background: none; color: #aa9a88; font-size: 19px; cursor: pointer; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.metric-card { min-height: 122px; padding: 17px 18px 15px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.metric-card.featured { color: white; background: var(--forest); border-color: var(--forest); }
.metric-card.featured:after { content: ""; position: absolute; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; right: -56px; bottom: -79px; box-shadow: 0 0 0 23px rgba(255,255,255,.025), 0 0 0 47px rgba(255,255,255,.018); }
.metric-label { color: #7c8782; font-size: 9px; font-weight: 800; letter-spacing: .11em; display: flex; justify-content: space-between; align-items: center; }
.featured .metric-label { color: #a9bbb4; }
.metric-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(200,232,107,.08); }
.metric-value { margin-top: 13px; display: flex; align-items: baseline; gap: 7px; }
.metric-value strong { font-family: Georgia, serif; font-size: 27px; font-weight: 500; letter-spacing: -.025em; }
.metric-value span { color: #7f8985; font-size: 10px; }
.featured .metric-value span { color: #9db1aa; }
.metric-footer { margin-top: 10px; color: #84908b; font-size: 9px; display: flex; justify-content: space-between; }
.featured .metric-footer { color: #9eb0aa; }
.metric-footer b { color: var(--ink); }
.featured .metric-footer b { color: #dbe7e2; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .75fr); gap: 14px; margin-bottom: 14px; }
.overview-grid.lower { grid-template-columns: minmax(0, 1.35fr) minmax(310px, .95fr); }
.schedule-card, .pulse-card, .category-card, .upcoming-card { padding: 20px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.card-head h2 { margin: 4px 0 0; font-family: Georgia, serif; font-weight: 500; font-size: 19px; letter-spacing: -.015em; }
.legend { display: flex; align-items: center; gap: 13px; color: #7f8a85; font-size: 9px; white-space: nowrap; padding-top: 4px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot.d102 { background: #356e5b; }
.dot.d107 { background: #94a98c; }
.schedule-lanes { margin-top: 18px; border-top: 1px solid var(--line); }
.schedule-lane { display: grid; grid-template-columns: 125px 1fr auto; align-items: center; gap: 13px; min-height: 74px; padding: 11px 2px; border-bottom: 1px solid #eef0ec; }
.schedule-date strong { display: block; font-size: 11px; }
.schedule-date span { display: block; color: #8d9692; font-size: 9px; margin-top: 3px; }
.schedule-date.today strong { color: var(--green); }
.schedule-items { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cheque-chip { min-width: 0; max-width: 230px; height: 43px; display: grid; grid-template-columns: 5px 1fr; gap: 9px; align-items: center; padding: 6px 10px 6px 0; border: 1px solid #e4e8e2; border-radius: 9px; background: #fbfcfa; cursor: pointer; text-align: left; }
.cheque-chip:hover { background: #f6f9f6; border-color: #cfd8d2; }
.cheque-chip i { height: 25px; border-radius: 0 3px 3px 0; background: #356e5b; }
.cheque-chip.a107 i { background: #94a98c; }
.cheque-chip strong { display: block; max-width: 155px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cheque-chip span { display: block; color: #84908a; font-size: 9px; margin-top: 2px; }
.more-chip { border: 0; background: #edf1ec; border-radius: 8px; color: #5f6d67; height: 34px; padding: 0 10px; font-size: 9px; font-weight: 700; cursor: pointer; }
.schedule-amount { min-width: 86px; text-align: right; }
.schedule-amount strong { display: block; font-family: Georgia, serif; font-size: 15px; font-weight: 500; }
.schedule-amount span { display: block; margin-top: 3px; color: #89938f; font-size: 8px; }
.empty-lane { color: #97a09c; font-size: 10px; display: flex; align-items: center; gap: 7px; }
.empty-lane:before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #59826e; background: #e7f1eb; font-size: 9px; }
.wide-link { width: 100%; height: 38px; border: 0; margin-top: 10px; background: #f6f8f4; border-radius: 9px; color: var(--forest-2); font-size: 10px; font-weight: 750; cursor: pointer; }
.wide-link:hover { background: #edf2ec; }

.tiny-total { font-family: Georgia, serif; font-size: 14px; color: #45534d; }
.pulse-chart { height: 190px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; border-bottom: 1px solid #dee3dc; margin-top: 18px; padding: 0 3px; position: relative; }
.pulse-chart:before, .pulse-chart:after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed #edf0eb; }
.pulse-chart:before { top: 33%; }
.pulse-chart:after { top: 66%; }
.pulse-bar-group { height: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; position: relative; z-index: 1; }
.pulse-bar { width: min(10px, 42%); min-height: 2px; border-radius: 4px 4px 0 0; background: #356e5b; position: relative; transition: height .35s ease; }
.pulse-bar.a107 { background: #b1c0ac; }
.pulse-bar:hover:after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); color: white; background: #1a2b25; padding: 4px 6px; font-size: 8px; white-space: nowrap; border-radius: 5px; z-index: 5; }
.pulse-label { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 8px; color: #8a9490; text-align: center; white-space: nowrap; }
.pulse-label b { display: block; font-size: 9px; color: #4b5953; margin-bottom: 1px; }
.account-split { margin-top: 41px; }
.split-head { display: flex; justify-content: space-between; font-size: 9px; color: #7c8782; margin-bottom: 7px; }
.split-head b { color: var(--ink); }
.split-track { width: 100%; height: 6px; background: #e9eee8; border-radius: 5px; overflow: hidden; display: flex; }
.split-track span:first-child { background: #356e5b; }
.split-track span:last-child { background: #b1c0ac; }
.split-detail { display: flex; justify-content: space-between; margin-top: 8px; color: #7d8883; font-size: 9px; }

.segmented { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f6f7f3; }
.segmented button { height: 26px; border: 0; border-radius: 6px; background: transparent; color: #7d8782; font-size: 9px; font-weight: 700; padding: 0 10px; cursor: pointer; }
.segmented button.active { color: var(--forest); background: white; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.segmented.large button { height: 32px; font-size: 10px; padding: 0 14px; }
.category-content { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 24px; min-height: 238px; margin-top: 8px; }
.donut-wrap { display: grid; place-items: center; }
.donut { width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(#356e5b 0 30%, #83a28d 30% 50%, #c8a162 50% 70%, #7291a5 70% 85%, #ae8b99 85% 100%); }
.donut:before { content: ""; position: absolute; inset: 19px; background: #fff; border-radius: 50%; }
.donut > div { position: relative; text-align: center; z-index: 1; }
.donut strong { display: block; max-width: 92px; font-family: Georgia, serif; font-size: 16px; font-weight: 500; }
.donut span { display: block; color: #89928e; font-size: 8px; margin-top: 4px; }
.category-list { display: grid; gap: 10px; padding-right: 5px; }
.category-row { display: grid; grid-template-columns: 9px minmax(85px, 1fr) minmax(70px, 1.5fr) auto; align-items: center; gap: 8px; font-size: 9px; }
.category-row i { width: 7px; height: 7px; border-radius: 2px; }
.category-row b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.category-row .cat-track { height: 5px; background: #eef0ed; border-radius: 5px; overflow: hidden; }
.category-row .cat-track span { display: block; height: 100%; border-radius: 5px; }
.category-row em { color: #75807b; font-style: normal; min-width: 66px; text-align: right; }
.future-list { margin-top: 14px; }
.future-item { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 11px; min-height: 58px; border-top: 1px solid #eef0ec; cursor: pointer; }
.future-item:hover { background: #fbfcfa; }
.future-date { width: 38px; height: 40px; border: 1px solid #e3e7e1; border-radius: 8px; display: grid; align-content: center; text-align: center; }
.future-date strong { font-family: Georgia, serif; font-size: 16px; font-weight: 500; line-height: 1; }
.future-date span { color: #8c9691; font-size: 7px; margin-top: 3px; }
.future-copy strong { display: block; font-size: 10px; }
.future-copy span { display: block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #8a9490; font-size: 8px; margin-top: 3px; }
.future-amount { text-align: right; }
.future-amount strong { display: block; font-family: Georgia, serif; font-size: 13px; font-weight: 500; }
.account-badge { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 4px; color: #2f6653; background: #e5f0eb; font-size: 7px; font-weight: 800; }
.account-badge.a107 { color: #65765f; background: #edf0e9; }
.future-empty { padding: 42px 10px; text-align: center; color: #8b9590; font-size: 11px; }

.table-title { align-items: center; margin-bottom: 25px; }
.head-actions { display: flex; gap: 8px; }
.register-card { overflow: hidden; }
.table-toolbar { min-height: 70px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.table-search { width: min(360px, 36%); height: 38px; display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: center; border: 1px solid var(--line-dark); border-radius: 9px; padding: 0 10px; background: #fafbf8; }
.table-search svg { width: 17px; color: #8b9590; }
.table-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; color: var(--ink); }
.filter-row { display: flex; gap: 7px; }
.filter-row select, .preference-row select { height: 36px; border: 1px solid var(--line-dark); border-radius: 8px; background: #fff; color: #52605a; padding: 0 27px 0 10px; font-size: 10px; outline: none; }
.filter-clear { border: 0; background: none; color: #79847f; font-size: 9px; cursor: pointer; }
.table-summary { min-height: 34px; display: flex; align-items: center; justify-content: space-between; background: #fafbf8; padding: 0 18px; color: #818b86; font-size: 9px; border-bottom: 1px solid var(--line); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th { height: 39px; padding: 0 12px; text-align: left; color: #89938e; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; background: #fff; border-bottom: 1px solid var(--line); }
td { height: 62px; padding: 8px 12px; border-bottom: 1px solid #eef0ed; vertical-align: middle; font-size: 10px; }
tbody tr { cursor: pointer; transition: background .12s ease; }
tbody tr:hover { background: #fafcf9; }
.date-cell strong { display: block; font-size: 10px; }
.date-cell span { display: block; color: #8b9590; font-size: 8px; margin-top: 3px; }
.cheque-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #395449; font-size: 9px; }
.payee-cell { max-width: 300px; }
.payee-cell strong { display: block; font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.payee-cell span { display: block; max-width: 300px; color: #89938e; font-size: 8px; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.category-pill, .status-pill { display: inline-flex; min-height: 21px; align-items: center; border-radius: 5px; padding: 0 7px; white-space: nowrap; color: #52615a; background: #f0f2ee; font-size: 8px; font-weight: 700; }
.status-pill:before { content: ""; width: 5px; height: 5px; border-radius: 50%; margin-right: 5px; background: #708d80; }
.status-pill.cleared { color: #236248; background: #e2f1e8; }
.status-pill.cleared:before { background: #2d8a62; }
.status-pill.cancelled { color: #974641; background: var(--red-bg); }
.status-pill.cancelled:before { background: #c65a52; }
.status-pill.scheduled { color: #846022; background: #fff0d8; }
.status-pill.scheduled:before { background: #d08d30; }
.amount-cell { text-align: right; white-space: nowrap; }
td.amount-cell { font-family: Georgia, serif; font-size: 12px; }
.row-menu { width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: #8b9590; cursor: pointer; }
.row-menu:hover { background: #edf1ec; }
.empty-table { padding: 70px 20px; text-align: center; color: #8a9490; font-size: 11px; }
.table-footer { min-height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; color: #87918c; font-size: 9px; }

.analytics-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 14px; }
.analytics-stat { padding: 17px 19px; min-height: 105px; }
.analytics-stat span { color: #7b8681; font-size: 9px; font-weight: 700; }
.analytics-stat strong { display: block; font-family: Georgia, serif; font-size: 24px; font-weight: 500; margin-top: 11px; }
.analytics-stat small { display: block; color: #8d9692; font-size: 9px; margin-top: 5px; }
.analytics-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 14px; }
.analytics-grid > .card { padding: 20px; min-height: 330px; }
.trend-chart { height: 245px; display: flex; align-items: flex-end; gap: 18px; padding: 22px 8px 24px; border-bottom: 1px solid var(--line); position: relative; }
.trend-month { height: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; position: relative; }
.trend-bar { width: min(22px, 38%); min-height: 2px; border-radius: 5px 5px 0 0; background: #356e5b; transition: .3s ease; }
.trend-bar.a107 { background: #a6b6a1; }
.trend-month > span { position: absolute; bottom: -21px; font-size: 8px; color: #89938e; }
.trend-month:hover:after { content: attr(data-tip); position: absolute; bottom: calc(var(--tip-height, 50%) + 8px); left: 50%; transform: translateX(-50%); color: white; background: #172a23; font-size: 8px; padding: 5px 7px; border-radius: 5px; white-space: nowrap; }
.rank-list { margin-top: 17px; display: grid; gap: 13px; }
.rank-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; }
.rank-no { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: #74807b; background: #f0f2ee; font-size: 8px; font-weight: 800; }
.rank-info strong { display: block; font-size: 10px; }
.rank-info .rank-track { width: 100%; height: 4px; margin-top: 5px; background: #edf0ec; border-radius: 4px; overflow: hidden; }
.rank-info .rank-track span { display: block; height: 100%; border-radius: 4px; background: #668c7d; }
.rank-value { text-align: right; }
.rank-value strong { font-family: Georgia, serif; font-size: 11px; font-weight: 500; }
.rank-value span { display: block; color: #8a9490; font-size: 7px; margin-top: 3px; }
.account-comparison { margin-top: 22px; display: grid; gap: 18px; }
.compare-account { padding: 15px; border: 1px solid var(--line); border-radius: 11px; }
.compare-head { display: flex; justify-content: space-between; align-items: center; }
.compare-head strong { font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.compare-head span { color: #84908b; font-size: 9px; }
.compare-track { height: 7px; margin-top: 13px; border-radius: 7px; background: #edf0ec; overflow: hidden; }
.compare-track span { display: block; height: 100%; background: #356e5b; border-radius: 7px; }
.compare-account.a107 .compare-track span { background: #9eaf98; }
.compare-foot { display: flex; justify-content: space-between; margin-top: 9px; color: #8a9490; font-size: 8px; }

.settings-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 14px; align-items: start; }
.settings-grid > .card { padding: 21px; }
.integration-card { grid-row: span 2; }
.integration-title { display: grid; grid-template-columns: 40px 1fr auto; gap: 11px; align-items: center; }
.sheets-logo { width: 39px; height: 39px; border-radius: 9px; background: #1c8655; position: relative; box-shadow: inset 0 -6px 0 rgba(0,0,0,.07); }
.sheets-logo:before { content: ""; position: absolute; inset: 8px 10px; border: 2px solid white; border-radius: 2px; background: linear-gradient(to bottom, transparent 29%, white 30% 36%, transparent 37% 62%, white 63% 69%, transparent 70%), linear-gradient(to right, transparent 44%, white 45% 52%, transparent 53%); }
.integration-title h2 { margin: 3px 0 0; font-family: Georgia, serif; font-size: 19px; font-weight: 500; }
.connection-pill { min-height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; color: #80642e; background: #fff1da; font-size: 8px; font-weight: 800; }
.connection-pill.connected { color: #286046; background: #e2f2e9; }
.integration-card > p, .mapping-card > p, .data-actions-card > p { color: #73807a; font-size: 10px; line-height: 1.7; margin: 19px 0; }
.field { display: grid; gap: 7px; }
.field > span { color: #56645e; font-size: 9px; font-weight: 750; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-dark); border-radius: 8px; background: #fff; color: var(--ink); outline: 0; font-size: 11px; padding: 0 11px; transition: border-color .15s, box-shadow .15s; }
.field input, .field select { height: 40px; }
.field textarea { resize: vertical; min-height: 78px; padding-top: 10px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #7ba08f; box-shadow: 0 0 0 3px rgba(53,110,91,.08); }
.url-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.help-box { margin-top: 17px; padding: 14px 15px; border: 1px solid #e3e8e1; background: #f8faf7; border-radius: 10px; }
.help-box strong { font-size: 10px; }
.help-box ol { margin: 8px 0 0; padding-left: 17px; color: #74807b; font-size: 9px; line-height: 1.8; }
.help-box b { color: #4a5751; }
.sync-status { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 15px; display: grid; grid-template-columns: 9px 1fr; gap: 9px; align-items: center; }
.status-light { width: 8px; height: 8px; border-radius: 50%; background: #9ba6a0; }
.status-light.good { background: #43a274; box-shadow: 0 0 0 3px #e8f3ed; }
.sync-status strong { display: block; font-size: 10px; }
.sync-status small { display: block; color: #8b9590; font-size: 8px; margin-top: 3px; }
.column-preview { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 17px; }
.column-preview div { padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.column-preview div:nth-child(even) { border-right: 0; }
.column-preview div:nth-last-child(-n+2) { border-bottom: 0; }
.column-preview b { display: block; font-size: 8px; color: #4e5d56; }
.column-preview span { display: block; color: #8b9590; font-size: 8px; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.muted { color: #8b9590 !important; }
.preference-row { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); }
.preference-row:first-of-type { margin-top: 13px; }
.preference-row strong { display: block; font-size: 10px; }
.preference-row span { display: block; color: #8b9590; font-size: 8px; margin-top: 4px; }
.preference-row select { width: 190px; color: #67736d; background: #f8f9f6; }
.data-action-buttons { display: flex; gap: 8px; }
.file-button input { display: none; }
.data-actions-card > small { display: block; color: #919a96; font-size: 8px; margin-top: 10px; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(10,21,17,.52); backdrop-filter: blur(4px); }
.modal-backdrop.open { display: flex; animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.search-modal { width: min(680px, 95vw); max-height: min(680px, 86vh); overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.25); align-self: flex-start; margin-top: 8vh; }
.search-modal-input { height: 64px; display: grid; grid-template-columns: 24px 1fr auto; gap: 11px; align-items: center; padding: 0 17px; border-bottom: 1px solid var(--line); }
.search-modal-input svg { color: #6f7d77; }
.search-modal-input input { border: 0; outline: 0; font-size: 16px; color: var(--ink); }
.search-hint { min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; color: #8a9490; background: #fafbf8; font-size: 8px; border-bottom: 1px solid var(--line); }
.search-results { max-height: 515px; overflow-y: auto; padding: 5px; }
.search-result { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; cursor: pointer; }
.search-result:hover { background: #f4f7f3; }
.search-result-icon { width: 36px; height: 36px; display: grid; place-items: center; color: #3b6656; background: #e6f0eb; border-radius: 8px; font-size: 9px; font-weight: 800; }
.search-result-copy strong { display: block; font-size: 10px; }
.search-result-copy span { display: block; max-width: 430px; color: #89938e; font-size: 8px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-value { text-align: right; }
.search-result-value strong { font-family: Georgia, serif; font-weight: 500; font-size: 12px; }
.search-result-value span { display: block; color: #89938e; font-size: 8px; margin-top: 3px; }
.search-empty { padding: 60px 20px; text-align: center; color: #89938e; font-size: 11px; }

.cheque-modal { width: min(650px, 96vw); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 17px; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.modal-head { min-height: 75px; padding: 17px 21px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.modal-close { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f3f5f1; color: #6e7a74; font-size: 20px; cursor: pointer; }
.cheque-modal form { padding: 20px 21px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.field.wide { grid-column: 1 / -1; }
.form-note { display: grid; grid-template-columns: 25px 1fr; gap: 8px; margin-top: 17px; padding: 11px; color: #426153; background: #edf5f0; border-radius: 9px; }
.form-note > span { font-size: 16px; }
.form-note strong { font-size: 9px; }
.form-note p { margin: 3px 0 0; font-size: 8px; color: #6e8178; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); margin-top: 19px; padding-top: 17px; }
.detail-modal { width: min(570px, 95vw); max-height: 90vh; overflow-y: auto; padding: 0; background: #fff; border-radius: 17px; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.detail-hero { color: white; background: var(--forest); padding: 23px; border-radius: 17px 17px 0 0; position: relative; overflow: hidden; }
.detail-hero:after { content: ""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; right: -70px; top: -100px; box-shadow: 0 0 0 27px rgba(255,255,255,.025); }
.detail-close { position: absolute; right: 16px; top: 14px; z-index: 2; width: 31px; height: 31px; border: 0; border-radius: 8px; color: white; background: rgba(255,255,255,.1); font-size: 18px; cursor: pointer; }
.detail-hero small { color: #a9bdb5; font-size: 8px; letter-spacing: .12em; }
.detail-hero h2 { margin: 9px 45px 3px 0; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.detail-hero p { margin: 0; color: #b6c6c0; font-size: 10px; }
.detail-amount { margin-top: 24px; font-family: Georgia, serif; font-size: 29px; }
.detail-body { padding: 21px 23px 23px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
.detail-field span { display: block; color: #909995; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.detail-field strong { display: block; font-size: 11px; margin-top: 5px; }
.detail-narration { margin-top: 20px; padding: 13px; color: #53615b; background: #f6f8f4; border-radius: 9px; font-size: 10px; line-height: 1.6; }
.detail-actions { display: flex; gap: 8px; margin-top: 20px; }
.detail-actions .btn:last-child { margin-left: auto; color: #a14540; }

.toast-stack { position: fixed; z-index: 200; right: 22px; bottom: 22px; display: grid; gap: 8px; }
.toast { min-width: 280px; max-width: 380px; min-height: 48px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 9px; padding: 10px 13px; color: white; background: #19332a; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.2); animation: toastIn .22s ease; }
.toast.error { background: #733a37; }
.toast > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #173127; background: var(--lime); font-size: 10px; font-weight: 900; }
.toast.error > span { color: #7c332f; background: #f4c9c6; }
.toast strong { display: block; font-size: 10px; }
.toast small { display: block; color: rgba(255,255,255,.68); font-size: 8px; margin-top: 3px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1180px) {
  :root { --sidebar: 210px; }
  .topbar, .view { padding-left: 21px; padding-right: 21px; }
  .global-search { min-width: 250px; }
  .schedule-lane { grid-template-columns: 104px 1fr auto; }
  .cheque-chip:nth-of-type(n+3) { display: none; }
  .category-content { grid-template-columns: 160px 1fr; gap: 13px; }
  .future-copy span { max-width: 160px; }
}

@media (max-width: 960px) {
  :root { --sidebar: 228px; }
  .sidebar { transform: translateX(-100%); box-shadow: 14px 0 45px rgba(0,0,0,.2); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .mobile-menu { display: inline-flex; }
  .global-search { flex: 1; min-width: 0; }
  .global-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .date-control > button:first-child, .date-control > button:last-child { display: none; }
  .date-button { border: 0 !important; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-grid, .overview-grid.lower { grid-template-columns: 1fr; }
  .pulse-card { min-height: 390px; }
  .category-content { grid-template-columns: 200px 1fr; }
  .analytics-grid, .settings-grid { grid-template-columns: 1fr; }
  .integration-card { grid-row: auto; }
  .table-toolbar { align-items: flex-start; flex-direction: column; }
  .table-search { width: 100%; }
  .filter-row { width: 100%; overflow-x: auto; }
}

@media (max-width: 680px) {
  .topbar { height: 64px; padding: 0 13px; gap: 8px; }
  .global-search { height: 38px; }
  .global-search span { display: none; }
  .global-search { width: 44px; flex: 0 0 44px; min-width: 44px; grid-template-columns: 1fr; place-items: center; padding: 0; }
  .global-search kbd { display: none; }
  .date-button { min-width: 90px; }
  #syncButton { display: none; }
  #addChequeButton { width: 40px; padding: 0; font-size: 0; }
  #addChequeButton span { font-size: 17px; }
  .view { padding: 22px 13px 40px; }
  .page-head { align-items: flex-start; }
  .page-head h1 { font-size: 27px; }
  .page-head > .text-btn { display: none; }
  .quality-alert { grid-template-columns: 28px 1fr; }
  .quality-alert > button:not(.dismiss) { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric-card { min-height: 114px; padding: 14px; }
  .metric-value strong { font-size: 21px; }
  .metric-footer { gap: 5px; }
  .schedule-card, .pulse-card, .category-card, .upcoming-card { padding: 15px; }
  .card-head { gap: 8px; }
  .legend { display: none; }
  .schedule-lane { grid-template-columns: 78px 1fr auto; gap: 7px; }
  .schedule-date span { font-size: 8px; }
  .cheque-chip { height: 39px; }
  .cheque-chip:nth-of-type(n+2), .more-chip { display: none; }
  .schedule-amount { min-width: 67px; }
  .schedule-amount strong { font-size: 12px; }
  .category-content { grid-template-columns: 1fr; padding-top: 15px; }
  .category-list { width: 100%; }
  .category-row { grid-template-columns: 9px minmax(90px,1fr) minmax(50px,1fr) auto; }
  .future-copy span { max-width: 145px; }
  .head-actions .btn.secondary { display: none; }
  .analytics-metrics { grid-template-columns: 1fr; }
  .analytics-grid > .card { padding: 16px; }
  .filter-row select { max-width: 130px; }
  .settings-grid > .card { padding: 16px; }
  .url-field { grid-template-columns: 1fr; }
  .preference-row { align-items: flex-start; flex-direction: column; padding: 12px 0; }
  .preference-row select { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .field.wide { grid-column: auto; }
  .cheque-modal form { padding: 17px; }
  .detail-grid { gap: 14px; }
}

/* Dark workspace theme */
:root {
  --ink: #edf4f0;
  --muted: #92a29b;
  --faint: #6f8078;
  --paper: #07100e;
  --card: #0e1a16;
  --line: #22312b;
  --line-dark: #304039;
  --forest: #163b30;
  --forest-2: #286a55;
  --green: #8fc9ac;
  --mint: #19382e;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 16px 35px rgba(0,0,0,.12);
}
html, body { background: var(--paper); color: var(--ink); }
.sidebar { background: #060e0c; border-right: 1px solid #1d2a26; }
.main { background: radial-gradient(circle at 92% 2%, rgba(42,92,73,.13), transparent 31%), var(--paper); }
.topbar { background: rgba(7,16,14,.93); border-color: #21302a; }
.global-search, .date-control, .btn.secondary, .icon-btn { color: #bdc9c3; background: #0f1b17; border-color: #2c3b35; }
.global-search:hover, .btn.secondary:hover { color: #eaf2ee; background: #14221d; border-color: #43574e; }
kbd { color: #8ea098; background: #17251f; border-color: #33443c; box-shadow: 0 1px 0 #050b09; }
.date-control > button:first-child:hover, .date-control > button:last-child:hover { background: #17231f; }
.date-button { border-color: #2b3a34 !important; }
.date-button span { color: #edf4f0; }
.date-button small { color: #778a81; }
.btn.primary { color: #07110d; background: #9bd7b7; border-color: #9bd7b7; }
.btn.primary:hover { color: #06100c; background: #b5e5cb; }
.card, .metric-card { color: var(--ink); background: var(--card); border-color: var(--line); }
.metric-card { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.metric-card:hover { transform: translateY(-2px); border-color: #3f5b4f; background: #12211c; }
.metric-card.expanded { border-color: #87bea2; box-shadow: 0 0 0 2px rgba(143,201,172,.1), var(--shadow); }
.metric-card.featured { color: #f4faf7; background: linear-gradient(145deg,#1a4537,#123027); border-color: #2d604d; }
.metric-label, .metric-value span, .metric-footer, .metric-footer b { color: #85978e; }
.featured .metric-label, .featured .metric-footer { color: #b5c9bf; }
.featured .metric-footer b { color: #deebe5; }
.metric-footer b { color: #b9c7c0; }
.expand-cue { color: #789187; font-size: 8px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.quality-alert { color: #eadbc4; background: #241d13; border-color: #4c3b24; }
.quality-icon { color: #f2bb76; background: #3b2a18; }
.quality-alert div > span { color: #b8a58a; }
.quality-alert > button:not(.dismiss) { color: #e3b879; }
.card-head h2, .page-head h1 { color: #f2f6f4; }
.page-head p, .future-copy span, .schedule-date span, .schedule-amount span { color: #84968d; }
.text-btn, .wide-link { color: #9ed2b6; }
.schedule-lanes, .schedule-lane, .future-item, td, th, .table-summary, .table-toolbar, .table-footer, .modal-head, .detail-actions, .sync-status, .preference-row { border-color: #21302a; }
.cheque-chip { color: #dce7e2; background: #111f1a; border-color: #283a32; }
.cheque-chip:hover { background: #172821; border-color: #3a5448; }
.more-chip, .wide-link, .rank-no { color: #a7b7af; background: #192722; }
.wide-link:hover { background: #20322a; }
.empty-lane:before { color: #8bc4a6; background: #163126; }
.empty-lane, .future-empty, .empty-table { color: #70837a; }
.pulse-chart { border-color: #2b3a34; }
.pulse-chart:before, .pulse-chart:after { border-color: #1e2c27; }
.pulse-label b, .tiny-total { color: #c3d0ca; }
.split-track, .cat-track, .rank-track, .compare-track { background: #1d2c26 !important; }
.segmented { background: #0a1411; border-color: #27362f; }
.segmented button { color: #82948b; }
.segmented button.active { color: #e5efe9; background: #21332b; box-shadow: 0 1px 2px #050908; }
.donut:before { background: var(--card); }
.category-row em { color: #9aaca3; }
.future-date { border-color: #2c3c35; }
.future-item:hover { background: #13211c; }
.account-badge { color: #8fc9ac; background: #173329; }
.account-badge.a107 { color: #b0bda8; background: #263127; }
.register-card { background: #0d1815; }
.table-toolbar, .table-summary { background: #0c1713; }
.table-search, .filter-row select, .preference-row select { color: #cad6d0; background: #111f1a; border-color: #2c3d35; }
.table-search input { color: #e8f0ec; }
th { color: #7e9188; background: #101c18; border-color: #26342f; }
tbody tr:hover { background: #14231d; }
.cheque-no { color: #9ecab4; }
.payee-cell span, .date-cell span { color: #788a81; }
.category-pill { color: #b8c7c0; background: #1d2b26; }
.status-pill { color: #c2d0c9; background: #20312a; }
.status-pill.cleared { color: #a8dfbf; background: #173829; }
.status-pill.cancelled { color: #efa29c; background: #3b201f; }
.status-pill.scheduled { color: #e5be7d; background: #3a2c17; }
.analytics-stat small, .analytics-stat span { color: #83958c; }
.trend-chart { border-color: #28362f; }
.compare-account { border-color: #283932; }
.integration-card > p, .mapping-card > p, .data-actions-card > p, .liability-connection-card > p { color: #8a9c93; }
.field > span { color: #a8b8b0; }
.field input, .field select, .field textarea { color: #e3ece7; background: #0c1713; border-color: #304139; }
.field input::placeholder, .field textarea::placeholder { color: #5e7168; }
.help-box { color: #c9d5cf; background: #101e19; border-color: #293a32; }
.help-box ol { color: #889a91; }
.help-box b { color: #cbd8d2; }
.column-preview { border-color: #2a3933; }
.column-preview div { border-color: #2a3933; }
.column-preview b { color: #bac8c1; }
.column-preview span { color: #7e9087; }
.preference-row select { color: #8fa098; background: #101b18; }
.search-modal, .cheque-modal, .detail-modal { color: #eaf2ee; background: #0d1915; }
.search-modal-input, .search-hint { border-color: #273730; }
.search-modal-input input { color: #edf4f0; background: transparent; }
.search-hint { color: #809188; background: #101c18; }
.search-result:hover { background: #172720; }
.search-result-icon { color: #9bd0b4; background: #183429; }
.cheque-modal form { background: #0d1915; }
.modal-close { color: #a6b6ae; background: #1b2a24; }
.form-note { color: #b9d5c7; background: #153127; }
.detail-body { background: #0d1915; }
.detail-narration { color: #b8c6bf; background: #14231d; }
.toast { background: #204a3b; }
.connection-pill { color: #e7bd7b; background: #382b18; }
.connection-pill.connected { color: #a8dbbf; background: #17372a; }
.sheets-logo { box-shadow: inset 0 -6px 0 rgba(0,0,0,.15); }

/* Expandable cheque queue */
[hidden] { display: none !important; }
.queue-expansion { margin: 0 0 14px; overflow: hidden; animation: queueReveal .24s ease; border-color: #385246; }
@keyframes queueReveal { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.queue-expansion-head { min-height: 84px; display: grid; grid-template-columns: 1fr auto 30px; align-items: center; gap: 22px; padding: 17px 20px; background: linear-gradient(90deg,#12251e,#0e1a16); border-bottom: 1px solid #2a3d34; }
.queue-expansion-head h2 { margin: 4px 0 2px; font-family: Georgia,serif; font-size: 22px; font-weight: 500; }
.queue-expansion-head p { margin: 0; color: #84978e; font-size: 9px; }
.queue-expansion-total { text-align: right; }
.queue-expansion-total span { display:block; color:#7f9289; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.queue-expansion-total strong { display:block; margin-top:5px; font-family:Georgia,serif; font-size:19px; font-weight:500; }
.queue-close { width:30px; height:30px; border:0; border-radius:8px; color:#9aada3; background:#1b2b24; font-size:18px; cursor:pointer; }
.account-queue-grid { display:grid; grid-template-columns:1fr 1fr; }
.account-queue:first-child { border-right:1px solid #27362f; }
.account-queue-head { min-height:68px; padding:12px 17px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #22312b; background:#0c1713; }
.account-queue-head > div { display:flex; align-items:center; gap:9px; }
.account-queue-head strong { display:block; font-size:10px; }
.account-queue-head small { display:block; margin-top:3px; color:#788b82; font-size:8px; }
.account-queue-head > b { font-family:Georgia,serif; font-size:14px; font-weight:500; }
.bank-orb { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; color:#dcebe4; background:#235642; font-size:9px; font-weight:800; }
.bank-orb.bank-107 { color:#e1e8dd; background:#53634d; }
.account-queue-list { min-height:118px; max-height:365px; overflow-y:auto; }
.queue-row { min-height:82px; display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center; padding:11px 16px; border-bottom:1px solid #1f2e28; }
.queue-row:last-child { border-bottom:0; }
.queue-row.is-cleared { opacity:.62; }
.queue-row-date { width:34px; height:39px; display:grid; align-content:center; text-align:center; border:1px solid #30423a; border-radius:7px; }
.queue-row-date strong { font-family:Georgia,serif; font-size:15px; font-weight:500; }
.queue-row-date span { margin-top:2px; color:#7c9086; font-size:7px; }
.queue-row-copy { min-width:0; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; }
.queue-row-copy strong { display:block; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-row-copy span { display:block; max-width:320px; margin-top:3px; color:#7f9188; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-row-copy em { display:inline-block; margin-top:6px; color:#9ab4a7; font-size:7px; font-style:normal; }
.queue-row-value { min-width:105px; text-align:right; }
.queue-row-value > strong { display:block; font-family:Georgia,serif; font-size:12px; font-weight:500; }
.clear-cheque { margin-top:7px; height:24px; padding:0 8px; border:1px solid #406c58; border-radius:6px; color:#a8d9bf; background:#173429; font-size:7px; font-weight:800; cursor:pointer; }
.clear-cheque:hover { color:#07110d; background:#9ed2b6; }
.cleared-label { display:block; margin-top:6px; color:#84c6a4; font-size:8px; font-weight:700; }
.account-queue-empty { min-height:145px; display:grid; place-items:center; align-content:center; text-align:center; }
.account-queue-empty > span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#91c9ab; background:#183429; }
.account-queue-empty strong { margin-top:8px; font-size:10px; }
.account-queue-empty small { margin-top:4px; color:#73867d; font-size:8px; }

/* Liabilities */
.liabilities-card { margin-top:14px; padding:20px; }
.liabilities-head { align-items:center; }
.liabilities-head p { margin:5px 0 0; color:#7e9188; font-size:9px; }
.liability-summary { min-width:130px; padding:9px 12px; text-align:right; border-left:1px solid #2a3933; }
.liability-summary span, .liability-summary small { display:block; color:#7f9289; font-size:8px; }
.liability-summary strong { display:block; margin:4px 0; font-family:Georgia,serif; font-size:19px; font-weight:500; }
.liability-filters { min-height:51px; display:flex; align-items:center; gap:6px; margin-top:16px; border-top:1px solid #26352f; border-bottom:1px solid #26352f; }
.liability-filters button { height:28px; padding:0 10px; border:1px solid transparent; border-radius:7px; color:#7f9188; background:transparent; font-size:8px; font-weight:700; cursor:pointer; }
.liability-filters button.active { color:#dce9e3; background:#1a2b24; border-color:#2d4138; }
.liability-filters > span { margin-left:auto; color:#72857b; font-size:8px; }
.liability-list { min-height:100px; }
.liability-row { min-height:65px; display:grid; grid-template-columns:105px 1fr 73px 140px; align-items:center; gap:13px; border-bottom:1px solid #1f2e28; }
.liability-row:last-child { border-bottom:0; }
.liability-due span { display:block; color:#82958b; font-size:7px; font-weight:800; }
.liability-due strong { display:block; margin-top:4px; font-size:9px; }
.liability-due.overdue span { color:#ee8e86; }
.liability-copy strong { display:block; font-size:10px; }
.liability-copy span { display:block; margin-top:4px; color:#7c8f86; font-size:8px; }
.liability-value { text-align:right; }
.liability-value strong { display:block; font-family:Georgia,serif; font-size:12px; font-weight:500; }
.liability-value span { display:block; margin-top:4px; color:#768980; font-size:7px; }
.liability-empty { min-height:130px; display:grid; place-items:center; align-content:center; text-align:center; }
.liability-empty > div { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#90c9aa; background:#173328; }
.liability-empty strong { margin-top:8px; font-size:10px; }
.liability-empty span { margin-top:4px; color:#74877e; font-size:8px; }
.writeback-fields { display:grid; grid-template-columns:1.4fr .8fr; gap:10px; margin-top:12px; }
.field-help { display:block; margin:8px 0 0 !important; color:#74877e !important; font-size:8px !important; line-height:1.55 !important; }
.liability-logo { width:39px; height:39px; display:grid; place-items:center; border-radius:9px; color:#102119; background:#d5ad62; font-family:Georgia,serif; font-size:20px; }
.liability-connection-card .integration-title h2 { margin:3px 0 0; font-family:Georgia,serif; font-size:19px; font-weight:500; }
.liability-columns { display:flex; flex-wrap:wrap; gap:5px; margin-top:14px; }
.liability-columns span { padding:5px 7px; border:1px solid #2b3c34; border-radius:5px; color:#91a49a; background:#111f1a; font-size:7px; }

@media (max-width: 900px) {
  .account-queue-grid { grid-template-columns:1fr; }
  .account-queue:first-child { border-right:0; border-bottom:1px solid #27362f; }
  .liability-row { grid-template-columns:95px 1fr 120px; }
  .liability-row .account-badge { display:none; }
}
@media (max-width: 680px) {
  .queue-expansion-head { grid-template-columns:1fr 28px; gap:8px; padding:14px; }
  .queue-expansion-total { display:none; }
  .queue-row { grid-template-columns:32px 1fr; }
  .queue-row-value { grid-column:2; display:flex; align-items:center; justify-content:space-between; text-align:left; }
  .clear-cheque { margin-top:0; }
  .liabilities-card { padding:15px; }
  .liability-filters { overflow-x:auto; }
  .liability-filters > span { display:none; }
  .liability-row { grid-template-columns:80px 1fr; padding:10px 0; }
  .liability-value { grid-column:2; display:flex; justify-content:space-between; text-align:left; }
  .writeback-fields { grid-template-columns:1fr; }
}
.source-url-stack { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
.source-url-stack .btn { grid-column:1 / -1; justify-self:start; }
@media (max-width:680px){ .source-url-stack { grid-template-columns:1fr; } .source-url-stack .btn { grid-column:auto; width:100%; } }

/* Amber cheque pane tint */
.metric-card.expanded { border-color:#bd8a3f; box-shadow:0 0 0 2px rgba(201,151,75,.12),var(--shadow); }
.queue-expansion { border-color:#6f5129; background:#18150f; }
.queue-expansion-head { background:linear-gradient(100deg,#332717,#1c1811); border-bottom-color:#5b4324; }
.queue-expansion-head .section-kicker { color:#e2af62; }
.queue-expansion-total strong { color:#f1d29d; }
.queue-close { color:#d7b57e; background:#3a2d1b; }
.account-queue:first-child { border-right-color:#4a3821; }
.account-queue-head { background:#19150f; border-bottom-color:#44331e; }
.bank-orb { color:#211508; background:#d4a253; }
.bank-orb.bank-107 { color:#f2e1c1; background:#7f5a2e; }
.queue-row { border-bottom-color:#382b1c; }
.queue-row-date { border-color:#5a4428; background:#211a11; }
.queue-row-date span,.queue-row-copy em { color:#c49b61; }
.clear-cheque { color:#edc884; background:#352817; border-color:#8c6633; }
.clear-cheque:hover { color:#211508; background:#e4b76f; }
.account-queue-empty > span { color:#e0b46b; background:#332817; }

/* Visible sync health and settings access */
.sync-control { min-width:88px; display:grid; justify-items:center; align-content:center; gap:3px; }
.sync-control .btn { width:100%; }
.sync-indicator { display:flex; align-items:center; justify-content:center; gap:4px; min-height:10px; color:#8b9b94; font-size:7px; font-weight:700; white-space:nowrap; }
.sync-indicator i { width:5px; height:5px; border-radius:50%; background:#7b8983; box-shadow:0 0 0 2px rgba(123,137,131,.1); }
.sync-indicator.connected { color:#8bc6a6; }
.sync-indicator.connected i { background:#60c58e; box-shadow:0 0 0 2px rgba(96,197,142,.12); }
.sync-indicator.syncing { color:#dfb873; }
.sync-indicator.syncing i { background:#dda84e; animation:syncPulse 1s ease infinite; }
.sync-indicator.error { color:#e49189; }
.sync-indicator.error i { background:#d7665e; }
.sync-indicator.disconnected { color:#88978f; }
@keyframes syncPulse { 50% { opacity:.35; transform:scale(.7); } }
.settings-top { color:#aebdb5; background:#0f1b17; cursor:pointer; }
.settings-top:hover { color:#efc681; border-color:#72542f; background:#211a11; }
.avatar { color:#24180a; background:#dfb36c; }

@media (max-width:680px) {
  .settings-top { width:38px; height:38px; }
  .sync-control { display:none; }
}

/* v1.1 — clearly visible amber pane treatment */
.metric-card {
  background:linear-gradient(145deg,#251c10 0%,#17140f 72%);
  border-color:#5a4327;
}
.metric-card:hover { background:linear-gradient(145deg,#302315,#1b1710); border-color:#886434; }
.metric-card.featured {
  color:#fff8ec;
  background:linear-gradient(145deg,#67471f 0%,#3e2c17 58%,#241b11 100%);
  border-color:#a87838;
}
.metric-card .metric-label { color:#c6a66f; }
.metric-card .metric-value strong { color:#fff2d5; }
.metric-card.featured .metric-label { color:#efd29e; }
.metric-card.featured .metric-footer,.metric-card.featured .metric-value span { color:#d8bd90; }
.schedule-card,.pulse-card,.category-card,.upcoming-card,.liabilities-card {
  background:linear-gradient(155deg,#1c1811 0%,#111713 80%);
  border-color:#4e3b24;
}
.schedule-card .section-kicker,.pulse-card .section-kicker,.category-card .section-kicker,.upcoming-card .section-kicker,.liabilities-card .section-kicker { color:#d7a758; }
.schedule-card .card-head,.pulse-card .card-head,.category-card .card-head,.upcoming-card .card-head { position:relative; }
.schedule-card .card-head:before,.pulse-card .card-head:before,.category-card .card-head:before,.upcoming-card .card-head:before {
  content:""; position:absolute; left:-20px; top:0; bottom:0; width:3px; border-radius:0 3px 3px 0; background:#c49349;
}
.queue-expansion { background:linear-gradient(145deg,#2a2013,#15130f); border-color:#9a7139; box-shadow:0 18px 40px rgba(0,0,0,.2),0 0 0 1px rgba(217,170,91,.08); }
.account-queue { background:rgba(35,27,17,.42); }
.sync-indicator.offline { color:#9aabb8; }
.sync-indicator.offline i { background:#7d94a4; box-shadow:0 0 0 2px rgba(125,148,164,.13); }

/* v1.4 official ISMA logo */
.brand-logo { width:40px;height:40px;object-fit:contain;border-radius:50%;padding:2px;background:#f6f7ef;border:1px solid #ab9727;box-shadow:0 0 0 4px rgba(171,151,39,.09);flex:0 0 auto; }

/* v1.5 articulate historical search */
.advanced-search-toolbar { min-height:72px; }
.articulate-search { width:min(620px,62%); }
.articulate-search input { font-size:12px; }
.search-examples { margin-left:auto;color:#788b82;font-size:8px;white-space:nowrap; }
.search-examples b { color:#c7a460;font-weight:700; }
.advanced-filter-bar { min-height:67px;padding:10px 17px;display:flex;align-items:end;gap:8px;background:#0b1512;border-bottom:1px solid var(--line);overflow-x:auto; }
.compact-field { display:grid;gap:5px;min-width:132px; }
.compact-field span { color:#71847a;font-size:7px;font-weight:800;letter-spacing:.1em; }
.compact-field input,.advanced-filter-bar select { height:36px;border:1px solid #304139;border-radius:8px;color:#dce7e2;background:#111f1a;padding:0 9px;font-size:9px;outline:0; }
.compact-field input:focus,.advanced-filter-bar select:focus { border-color:#a47b3f;box-shadow:0 0 0 3px rgba(164,123,63,.09); }
.amount-filter { min-width:118px; }
.advanced-filter-bar select { min-width:112px; }
.advanced-clear { height:36px;padding:0 11px;border:1px solid #5a4327!important;border-radius:8px!important;color:#d8b777!important;background:#2a2014!important;white-space:nowrap; }
.advanced-clear:hover { background:#3a2a18!important; }
.sort-order { color:#c8a662;font-size:8px;font-weight:800;letter-spacing:.04em; }
@media(max-width:960px){.articulate-search{width:100%}.search-examples{display:none}.advanced-filter-bar{align-items:end}}
@media(max-width:680px){.advanced-filter-bar{padding:10px 12px}.compact-field{min-width:126px}.sort-order{display:none}}

/* v1.6 private API settings */
.private-api-flow { margin:18px 0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px; }
.private-api-flow>div { min-height:82px;padding:13px;border:1px solid #4c3b23;border-radius:10px;background:linear-gradient(145deg,#241c11,#111a15); }
.private-api-flow>div span { width:20px;height:20px;display:grid;place-items:center;border-radius:6px;color:#251708;background:#c6ab46;font-size:8px;font-weight:900; }
.private-api-flow strong { display:block;margin-top:9px;font-size:10px;color:#ecf2ee; }
.private-api-flow small { display:block;margin-top:4px;color:#7f9188;font-size:8px; }
.private-api-flow>i { color:#9e8230;font-style:normal; }
.private-test-btn { margin-top:2px; }
.private-security-list { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:17px 0; }
.private-security-list div { padding:10px;border:1px solid #2c4036;border-radius:8px;color:#a9c5b6;background:#12231c;font-size:9px; }
@media(max-width:680px){.private-api-flow{grid-template-columns:1fr}.private-api-flow>i{display:none}.private-security-list{grid-template-columns:1fr}}