/* ============================================================
   SiraLink ERP — Design System
   Executive-grade, light B2B finance workspace.
   Structure:
     1. Tokens & base
     2. App shell (sidebar, topbar, page)
     3. Panels, cards, grids, stats
     4. Buttons
     5. Tables, badges, row actions
     6. Forms, toolbars, tabs
     7. Alerts, empty states, misc components
     8. Bank workspace
     9. Auth layer
    10. Responsive
   ============================================================ */

/* ---------- 1. Tokens & base ---------- */
:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f9fafb;
  --line:#e4e7ec;
  --line-strong:#d0d5dd;
  --text:#101828;
  --text-2:#344054;
  --muted:#667085;
  --accent:#2563eb;
  --accent-strong:#1d4ed8;
  --accent-soft:#eff4ff;
  --accent-ink:#1e3a8a;
  --brand-dark:#0f1c2e;
  --success:#067647;--success-bg:#ecfdf3;--success-line:#abefc6;
  --warn:#b54708;--warn-bg:#fffaeb;--warn-line:#fedf89;
  --danger:#b42318;--danger-bg:#fef3f2;--danger-line:#fecdca;
  --info:#175cd3;--info-bg:#eff8ff;--info-line:#b2ddff;
  --radius:12px;--radius-sm:8px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 3px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 12px 24px -6px rgba(16,24,40,.10);
  --sidebar-w:248px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-weight:700;letter-spacing:-.02em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
.pre{white-space:pre-wrap}
.right{text-align:right}
.small{font-size:12px}
.hint,.muted{color:var(--muted)}
.breakable{overflow-wrap:anywhere}

/* ---------- 2. App shell ---------- */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px 14px;overflow-y:auto;z-index:50}
.sidebar-head{margin-bottom:14px}
.brand{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:10px}
.brand:hover{background:var(--surface-2)}
.brand-mark,.siralink-logo{width:34px;height:34px;border-radius:9px;object-fit:contain;flex:0 0 auto}
.brand-text b{display:block;font-size:14.5px;letter-spacing:-.01em}
.brand-text small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px}
.sidebar nav{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.nav-section{margin-top:14px}
.nav-section:first-child{margin-top:2px}
.nav-section-title{padding:0 10px 6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#98a2b3}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:1px 0;border-radius:8px;color:var(--text-2);font-weight:550;line-height:1.2;min-height:36px}
.nav:hover{background:var(--surface-2);color:var(--text)}
.nav.active{background:var(--accent-soft);color:var(--accent-strong);font-weight:650}
.nav.active .nav-icon{color:var(--accent-strong)}
.nav-icon{display:inline-grid;place-items:center;flex:0 0 20px;width:20px;height:20px;color:#667085}
.nav-icon svg{width:18px;height:18px}
.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-foot{margin-top:12px;padding:10px 10px 2px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px}

.page{margin-left:var(--sidebar-w);padding:0 32px 56px;max-width:1560px}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:22px 0 16px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.eyebrow{margin:0 0 4px;color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.02em}
.eyebrow b{color:var(--text-2);font-weight:650}
.topbar h1{margin:0;font-size:24px;letter-spacing:-.03em}
.topbar .hint{margin:4px 0 0;font-size:13px;max-width:760px}
.actions,.footer-actions,.inline-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--surface);color:var(--text-2);font-weight:550;font-size:12.5px}

/* ---------- 3. Panels, grids, stats ---------- */
.panel,.glass-panel,.glass-panel-strong,.pro-card,.block-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px;box-shadow:var(--shadow-xs)}
.panel h2,.pro-card h2{margin:0 0 12px;font-size:15.5px}
.panel>p:first-child{margin-top:0}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.section-head h2{margin:0;font-size:15.5px}
.section-head p,.section-head .muted{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.narrow{max-width:920px}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.two>.panel,.grid.two>.pro-card{margin-bottom:0}
.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}
.stat{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:0;box-shadow:var(--shadow-xs);transition:border-color .12s ease,box-shadow .12s ease}
a.stat:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.stat span{display:block;color:var(--muted);font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.06em}
.stat b{display:block;font-size:26px;letter-spacing:-.03em;margin:8px 0 4px;font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:12px}
.stat.tone-success b{color:var(--success)}
.stat.tone-warn b{color:var(--warn)}
.hero-panel{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:24px;align-items:center;margin-bottom:16px;padding:24px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(135deg,var(--brand-dark),#1e3a5f);color:#fff;box-shadow:var(--shadow-sm)}
.hero-panel h2{margin:0 0 8px;font-size:24px;letter-spacing:-.03em}
.hero-panel p{margin:0;color:#cbd5e1;font-size:13.5px;line-height:1.6;max-width:680px}
.hero-panel .eyebrow{color:#94a3b8}
.hero-metrics{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.hero-metrics span{min-width:140px;padding:14px 16px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.07)}
.hero-metrics b{display:block;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-metrics small{color:#94a3b8}

/* ---------- 4. Buttons ---------- */
.btn,.primary,.ghost,.danger{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text-2);border-radius:var(--radius-sm);padding:8px 13px;font-weight:600;font-size:13.5px;cursor:pointer;box-shadow:var(--shadow-xs);transition:background .12s ease,border-color .12s ease;white-space:nowrap}
.btn:hover,.ghost:hover{background:var(--surface-2);border-color:#98a2b3}
.btn.primary,.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover,.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn.ghost,.ghost{background:var(--surface)}
.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.danger:hover{background:#fee4e2}
.btn.small{padding:5px 10px;font-size:12.5px}
.icon-btn{width:37px;height:37px;padding:0;font-size:16px}
.btn.disabled{opacity:.45;pointer-events:none}

/* ---------- 5. Tables, badges ---------- */
table{width:100%;border-collapse:separate;border-spacing:0}
th{font-size:11px;text-align:left;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:650;background:var(--surface-2);border-bottom:1px solid var(--line);padding:9px 12px;white-space:nowrap}
td{border-bottom:1px solid #eef1f5;padding:10px 12px;vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover td,tr:hover td{background:#fafbfc}
.panel>table,.pro-card>table{margin:0 -18px -18px;width:calc(100% + 36px)}
.panel>table th:first-child,.panel>table td:first-child,.pro-card>table th:first-child,.pro-card>table td:first-child{padding-left:18px}
.panel>table th:last-child,.panel>table td:last-child,.pro-card>table th:last-child,.pro-card>table td:last-child{padding-right:18px}
.amount{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.amount.negative{color:var(--danger)}
.amount.positive{color:var(--success)}
.badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-strong);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;background:var(--surface);color:var(--text-2);white-space:nowrap}
.status-draft{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.status-sent{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.status-paid,.badge.success{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.status-due{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.muted-badge{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.status-pill{display:inline-flex;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:650;border:1px solid var(--line)}
tr.clickable-row{cursor:pointer}
tr.clickable-row:hover td{background:#f5f8ff}
tr.clickable-row:focus{outline:2px solid var(--accent);outline-offset:-2px}
.row-actions{white-space:nowrap;text-align:right}
.select-col{width:36px;text-align:center}
.select-col input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}
.more{position:relative;display:inline-block}
.more summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:7px;padding:3px 9px;background:var(--surface);color:var(--muted);font-weight:700;line-height:1.4}
.more summary:hover{border-color:var(--line-strong);color:var(--text)}
.more summary::-webkit-details-marker{display:none}
.more div{position:absolute;right:0;z-index:30;min-width:170px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-md);padding:5px;text-align:left}
.more a,.more button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--text-2);font-weight:550;font-size:13px}
.more a:hover,.more button:hover{background:var(--surface-2)}
.more button{color:var(--danger)}

/* ---------- 6. Forms, toolbars, tabs ---------- */
input,select,textarea{border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);padding:8px 11px;min-width:0;font-size:13.5px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(37,99,235,.25);outline-offset:0;border-color:var(--accent)}
textarea{width:100%;min-height:100px;resize:vertical}
.toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.toolbar input[name="q"]{flex:1;min-width:220px}
.form h2{font-size:15.5px;margin:0 0 12px}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:8px}
.form label,.stack label{display:grid;gap:5px;color:var(--text-2);font-weight:600;font-size:12.5px}
.form label input,.form label select,.form label textarea{font-weight:400;font-size:13.5px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 18px;padding-bottom:0;overflow-x:auto}
.form-tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:9px 14px 10px;font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.form-tab:hover{color:var(--text)}
.form-tab.active{color:var(--accent-strong);border-bottom-color:var(--accent)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.footer-actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.line-items{display:grid;gap:10px}
.line-card{display:grid;grid-template-columns:1.2fr 110px 130px 2fr;gap:8px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface-2)}
.line-card textarea{min-height:42px}
.form-section{padding:18px 0;border-top:1px solid var(--line)}
.form-section:first-of-type{border-top:0;padding-top:0}
.form-section>h2{margin:0 0 4px}
.form-section>.hint{margin:0 0 14px;font-size:12.5px}
.stack{display:grid;gap:12px}
.checkline{display:flex!important;align-items:center;gap:8px;font-weight:550;color:var(--muted)}
.checkline input{width:15px;height:15px;accent-color:var(--accent)}
.bulk-form{margin:0}
.bulk-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-xs);font-size:13px}
.bulk-actions .muted{font-size:12px}
.check-all{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:12.5px}
.check-all input{width:15px;height:15px;accent-color:var(--accent)}

/* ---------- 7. Alerts, empty states, misc ---------- */
.alert{border-radius:10px;padding:10px 13px;margin:10px 0;font-weight:550;font-size:13px;border:1px solid var(--line)}
.alert.error{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.alert.ok{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.empty-state{padding:28px 16px;text-align:center;color:var(--muted)}
.empty-state b{display:block;color:var(--text-2);font-size:14px;margin-bottom:4px}
.empty-state p{margin:0 0 12px;font-size:12.5px}
td.empty-state{text-align:center}
.quick-actions{display:flex;gap:8px;flex-wrap:wrap}
.quick-actions .btn{flex:0 0 auto}
.compact-list{display:grid;gap:8px}
.match-row{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.match-row span,.match-row small{display:block;color:var(--muted);font-size:12px}
.arrow{color:var(--muted)}
.summary-line{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.summary-line b{font-size:20px;font-variant-numeric:tabular-nums}
.summary-line span{color:var(--muted);margin-right:10px;font-size:12.5px}
.account-strip{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.account-strip span{border:1px solid var(--line);border-radius:999px;background:var(--surface-2);padding:4px 10px;color:var(--text-2);font-size:12.5px}
.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card-soft{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:16px}
.secret-code{display:block;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--surface);font-size:15px;letter-spacing:.08em;font-family:ui-monospace,monospace}
.reminder-card{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.reminder-card:first-of-type{border-top:0;margin-top:0;padding-top:0}
.reminder-card>label{margin-top:10px}
.reminder-card .btn{margin-top:12px}
.pending-panel{padding:0;overflow:hidden}
.pending-panel>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;cursor:pointer;list-style:none}
.pending-panel>summary::-webkit-details-marker{display:none}
.pending-panel>summary span:first-child{display:grid;gap:2px}
.pending-panel>summary b{font-size:14px}
.pending-panel>summary small{color:var(--muted);font-size:12px}
.pending-panel>summary:before{content:'▸';font-weight:800;color:var(--muted);transition:transform .14s ease}
.pending-panel[open]>summary:before{transform:rotate(90deg)}
.pending-panel[open]>summary{border-bottom:1px solid var(--line)}
.pending-panel form{padding:14px 18px 18px}
.invoice{padding:24px}
.invoice-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.invoice-head h2{margin:2px 0 8px;font-size:22px}
.recipient{text-align:right;color:var(--text-2);line-height:1.6}
.pdf-frame{width:100%;height:760px;border:1px solid var(--line);border-radius:10px;background:#fff}
.code-block{background:var(--brand-dark);color:#e2e8f0;border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:12.5px;line-height:1.6}
.setup-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.setup-checks>div{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface-2)}
.setup-checks b{display:block;margin-bottom:3px}
.setup-checks span{color:var(--muted);font-size:12.5px}
.setup-checks .ok{border-color:var(--success-line);background:var(--success-bg)}
.inline-drawer summary{list-style:none}
.inline-drawer summary::-webkit-details-marker{display:none}
.drawer{margin-top:8px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:10px;display:grid;gap:8px;min-width:520px}
.drawer select{min-width:280px}
.env-pill{display:inline-flex;border-radius:999px;border:1px solid var(--line-strong);padding:4px 10px;font-size:12px;font-weight:650;background:var(--surface-2);color:var(--text-2)}
.plaid-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.plaid-head h2{margin:0 0 6px}
.plaid-big{padding:12px 20px;font-size:14.5px}
.mini-muted{margin-top:10px;color:var(--muted);font-size:12.5px}
.inline-setup{border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:13px}
.bank-picker{max-width:760px}

/* ---------- 8. Bank workspace ---------- */
.bank-workspace{padding:0}
.bank-workspace>.section-head,.bank-workspace>.pagination{padding:14px 18px;margin:0}
.bank-filters{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.bank-filters .wide{min-width:min(480px,100%);flex:1}
.bank-table-wrap{overflow-x:auto;background:var(--surface)}
.bank-ledger{width:100%;border-collapse:separate;border-spacing:0}
.bank-ledger th{position:sticky;top:0;background:var(--surface-2);z-index:2;vertical-align:top;border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;white-space:nowrap}
.bank-ledger th a{font-weight:700;color:var(--text-2)}
.bank-ledger th input,.bank-ledger th select{display:block;margin-top:7px;width:100%;min-width:110px;padding:5px 8px;font-size:12.5px}
.bank-ledger td{border-bottom:1px solid #eef1f5;padding:10px 12px;vertical-align:top}
.group-row td{padding:0!important;border-bottom:0!important}
.group-row summary{cursor:pointer;list-style:none;padding:8px 14px;font-weight:700;color:var(--text-2);font-size:12.5px}
.group-row summary::-webkit-details-marker{display:none}
.month-row summary{background:#eef1f6;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.04em;font-size:11.5px}
.day-row summary{background:var(--surface-2);border-bottom:1px solid #eef1f5;padding-left:26px;font-size:12.5px;font-weight:600}
.tx-row:hover td{background:#fafbfd}
.tx-focused td{background:#fff8e1!important;box-shadow:inset 3px 0 var(--warn)}
.tx-jump{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:8px;padding:5px 10px;margin-right:8px;font-weight:650;font-size:12.5px;color:var(--text-2);background:var(--surface)}
.tx-jump:hover{border-color:#98a2b3}
.suggestion-row{align-items:center}
.bank-actions{white-space:nowrap;min-width:104px}
.icon-action{display:inline-grid;place-items:center;width:38px;height:34px;margin-right:6px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text-2);font-size:16px;cursor:pointer;list-style:none}
.icon-action::-webkit-details-marker{display:none}
.icon-action:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.action-popover{display:inline-block;position:relative}
.popover{position:absolute;right:0;top:40px;width:360px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);z-index:40;padding:14px;white-space:normal;text-align:left}
.popover h3{margin:0 0 6px;font-size:14px}
.stack-form{display:grid;gap:10px}
.stack-form select,.stack-form input{width:100%}
.column-config{position:relative}
.column-config summary{list-style:none}
.column-config summary::-webkit-details-marker{display:none}
.column-menu{position:absolute;right:0;top:40px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-md);padding:10px;display:grid;gap:8px;z-index:40;min-width:160px}
.column-menu label{display:flex;gap:8px;align-items:center;font-size:13px}
.pagination{display:flex;justify-content:center;align-items:center;gap:12px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--muted)}

/* ---------- 9. Auth layer ---------- */
.auth-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,#f8fafc 0%,#eef2f7 60%,#e8edf5 100%);padding:24px}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow-md)}
.auth-card h1{margin:4px 0 16px;font-size:22px}
.auth-logo{width:52px;height:52px;border-radius:14px;margin-bottom:14px}

/* ---------- 10. Responsive ---------- */
@media(max-width:1180px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.two{grid-template-columns:1fr}
  .grid.two>.panel,.grid.two>.pro-card{margin-bottom:0}
  .hero-panel{grid-template-columns:1fr}
  .hero-metrics{justify-content:flex-start}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:920px){
  .sidebar{position:static;width:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px 14px;overflow:visible}
  .sidebar nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .nav-section{margin-top:0;display:flex;flex-wrap:wrap;gap:4px}
  .nav-section-title{display:none}
  .nav{padding:7px 10px;min-height:0;border:1px solid var(--line);border-radius:999px;font-size:12.5px}
  .nav.active{border-color:var(--accent)}
  .sidebar-foot{display:none}
  .page{margin-left:0;padding:0 16px 40px}
  .topbar{padding-top:16px;align-items:flex-start}
  .topbar h1{font-size:21px}
  .stats,.form-grid,.line-card,.split-grid,.setup-checks{grid-template-columns:1fr}
  .match-row{grid-template-columns:1fr;text-align:left}
  .drawer{min-width:0}
  .popover{position:fixed;left:12px;right:12px;top:auto;bottom:16px;width:auto}
  .panel>table,.pro-card>table{display:block;overflow-x:auto}
  .pdf-frame{height:520px}
  .invoice-head{flex-direction:column}
  .recipient{text-align:left}
}

/* ---------- 8b. Bank reconciliation console ---------- */
/* KPI strip */
.bank-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;box-shadow:var(--shadow-xs);transition:border-color .12s ease,box-shadow .12s ease}
a.kpi:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.kpi.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.kpi-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:0 0 auto}
.kpi-icon svg{width:19px;height:19px}
.kpi.tone-warn .kpi-icon{background:var(--warn-bg);color:#f79009}
.kpi.tone-info .kpi-icon{background:var(--info-bg);color:var(--info)}
.kpi.tone-success .kpi-icon{background:var(--success-bg);color:var(--success)}
.kpi.tone-accent .kpi-icon{background:var(--accent-soft);color:var(--accent-strong)}
.kpi-text{min-width:0}
.kpi-text b{display:block;font-size:20px;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-text span{display:block;color:var(--muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:1px}

/* Filter chips + keyboard hints */
.chip-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.chip:hover{border-color:#98a2b3;background:var(--surface-2)}
.chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot.warn{background:#f79009}.dot.info{background:#2e90fa}.dot.ok{background:#12b76a}
.chip-count{color:var(--muted);font-size:12px;margin-left:4px;white-space:nowrap}
.kbd-hints{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11.5px;white-space:nowrap}
kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;background:var(--surface);font:600 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-2)}

/* Ledger rows */
.bank-rows{background:var(--surface)}
.bank-month{position:sticky;top:0;z-index:3;padding:6px 18px;background:#eef1f6;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.bank-row{display:block;border-bottom:1px solid #eef1f5;padding:9px 18px 10px;outline:none;scroll-margin-top:80px}
.bank-row:hover{background:#fafbfd}
.bank-row:focus-visible,.bank-row.is-focused{background:#f5f8ff;box-shadow:inset 3px 0 var(--accent)}
.bank-row.flash{background:#fffaeb;box-shadow:inset 3px 0 #f79009}
.bk-line{display:grid;grid-template-columns:26px 46px minmax(0,1fr) 170px 150px;gap:12px;align-items:center}
.bk-date{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.st{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;flex:0 0 auto}
.st svg{width:14px;height:14px}
.st-unmatched{color:#f79009;background:var(--warn-bg)}
.st-partial{color:#2e90fa;background:var(--info-bg)}
.st-matched{color:#12b76a;background:var(--success-bg)}
.st-booked{color:var(--muted);background:var(--surface-2)}
.bk-who{min-width:0}
.bk-who b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-who small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-progress{display:grid;gap:4px;min-width:0}
.bk-bar{display:block;height:5px;border-radius:99px;background:#eef1f5;overflow:hidden}
.bk-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .2s ease}
.is-matched .bk-bar i{background:#12b76a}
.is-partial .bk-bar i{background:#2e90fa}
.bk-progress small{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-progress small b{color:var(--warn);font-weight:700}
.is-matched .bk-progress small{color:var(--success)}
.bk-amt{display:flex;align-items:center;justify-content:flex-end;gap:5px;font-weight:750;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--success)}
.bk-amt.negative{color:var(--danger)}
.bk-amt svg{width:13px;height:13px;flex:0 0 auto;opacity:.75}

/* Row toolbelt: allocation chips, quick match, inline editors */
.bk-belt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:7px 0 0 38px}
.bk-belt .qmatch{margin:0}
.alloc-chips{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.alloc-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--success-line);background:var(--success-bg);color:var(--success);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.alloc-chip b{font-variant-numeric:tabular-nums;font-weight:700}
.alloc-chip:hover{border-color:#12b76a}
details.bk-ed{min-width:0}
details.bk-ed>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text-2);padding:4px 10px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-xs)}
details.bk-ed>summary::-webkit-details-marker{display:none}
details.bk-ed>summary:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
details.bk-ed[open]{flex:1 1 100%}
details.bk-ed[open]>summary{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.bk-ed-body{margin-top:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:12px}

/* Allocation editor */
.reconcile-form{display:grid;gap:8px}
.allocation-row{display:grid;grid-template-columns:minmax(220px,1fr) 130px auto;gap:8px;align-items:center}
.js .allocation-row[hidden]{display:none}
.native-select,.allocation-row input,.account-form input{width:100%;min-width:0}
.row-fill{display:inline-flex;gap:4px}
.row-fill button{padding:4px 9px;font-size:11.5px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);color:var(--muted);cursor:pointer;font-weight:600;white-space:nowrap}
.row-fill button:hover{color:var(--accent-strong);border-color:var(--accent);background:var(--accent-soft)}
.reconcile-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.remaining-pill{margin-left:auto;display:inline-flex;gap:5px;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:5px 11px;font-size:12.5px;color:var(--text-2)}
.remaining-pill b{font-variant-numeric:tabular-nums}
.account-form{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,1fr) auto;gap:8px;align-items:center}

/* Workspace panel framing */
.bank-workspace>.bank-filters{border-top:0;border-radius:var(--radius) var(--radius) 0 0}
.bank-workspace .account-strip{margin:0;padding:10px 18px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}
.bank-workspace>.pagination:last-child{border-radius:0 0 var(--radius) var(--radius)}

@media(max-width:1180px){
  .bank-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-line{grid-template-columns:26px minmax(0,1fr) 150px 140px;grid-template-areas:"st who prog amt"}
  .st{grid-area:st}.bk-who{grid-area:who}.bk-progress{grid-area:prog}.bk-amt{grid-area:amt}
  .bk-date{display:none}
}
@media(max-width:920px){
  .bk-line{grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:"st who amt" ". prog prog"}
  .bk-belt{margin-left:0}
  .allocation-row{grid-template-columns:1fr}
  .account-form{grid-template-columns:1fr}
  .kbd-hints{display:none}
}