/* PayMaster — resets, typography, layout, and all component classes. References tokens.css only. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:400 var(--fs-14)/var(--lh-body) var(--font-ui);color:var(--text);background:var(--bg)}
h1,h2,h3,h4,p{margin:0}
h1{font-size:var(--fs-22);font-weight:600;line-height:var(--lh-tight)}
h2{font-size:var(--fs-16);font-weight:600}
h3{font-size:var(--fs-13);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong);text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-1)}
.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

/* Numbers */
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.num-bold{font-weight:600}
.cr{color:var(--good-text)}
.cr::after{content:" CR";font-size:var(--fs-11);font-weight:600}
.mono{font-family:var(--font-mono);font-size:.92em}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.small{font-size:var(--fs-12)}

/* ===== App shell ===== */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4);font-weight:700;font-size:var(--fs-16);color:#fff}
.brand .mark{width:24px;height:24px;border-radius:var(--r-1);background:var(--accent);display:grid;place-items:center;font-size:var(--fs-12);font-weight:700;color:#fff}
.nav{flex:1;padding:var(--sp-2);display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:var(--sp-3);padding:8px 10px;border-radius:var(--r-2);color:var(--sidebar-muted);font-weight:500}
.nav a:hover{background:var(--overlay-hover);color:#fff;text-decoration:none}
.nav a[aria-current=page]{background:var(--overlay-active);color:#fff}
.nav .badge{margin-left:auto}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-round);background:var(--bad-solid);color:#fff;font-size:var(--fs-11);font-weight:600;display:inline-grid;place-items:center;line-height:1}
.sidebar-foot{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--overlay-hairline);font-size:var(--fs-12);color:var(--sidebar-muted)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-5);position:sticky;top:0;z-index:30}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:var(--sp-2);background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--r-2);padding:6px 10px;color:var(--text-muted);cursor:text}
.search .kbd{margin-left:auto}
.kbd{font-family:var(--font-mono);font-size:var(--fs-11);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--r-1);padding:1px 5px;background:var(--surface);color:var(--text-muted)}
.env{font-size:var(--fs-11);font-weight:700;letter-spacing:.08em;padding:3px 8px;border-radius:var(--r-1)}
.env[data-env=LIVE]{color:var(--text-muted);border:1px solid var(--border)}
.env[data-env=TEST]{color:#fff;background:var(--warn-solid);color:oklch(25% .05 70)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
.icon-btn{width:32px;height:32px;border:none;background:none;border-radius:var(--r-2);display:grid;place-items:center;color:var(--text-muted);cursor:pointer;position:relative}
.icon-btn:hover{background:var(--surface-sunken);color:var(--text)}
.icon-btn .badge{position:absolute;top:2px;right:2px;min-width:14px;height:14px;font-size:10px}
.avatar{width:28px;height:28px;border-radius:var(--r-round);background:var(--accent-tint);color:var(--accent-strong);display:grid;place-items:center;font-size:var(--fs-11);font-weight:600}
.content{flex:1;padding:var(--sp-5);max-width:var(--content-max);width:100%}
.page-head{display:flex;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.page-head .actions{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
.crumbs{font-size:var(--fs-12);color:var(--text-muted);margin-bottom:var(--sp-1)}
.crumbs a{color:var(--text-muted)}

/* Test-data banner (page-wide) */
.banner{display:flex;align-items:center;gap:var(--sp-2);padding:8px var(--sp-5);font-size:var(--fs-13);font-weight:500}
.banner[data-kind=test]{background:var(--warn-solid);color:oklch(25% .05 70);justify-content:center;font-weight:600;letter-spacing:.02em}
.banner[data-kind=warn]{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border);border-radius:var(--r-2)}
.banner[data-kind=error]{background:var(--bad-bg);color:var(--bad-text);border:1px solid var(--bad-border);border-radius:var(--r-2)}
.banner[data-kind=info]{background:var(--accent-tint);color:var(--accent-strong);border:1px solid var(--flow-border);border-radius:var(--r-2)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-2);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:500 var(--fs-13)/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface-sunken);text-decoration:none;color:var(--text)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-strong);color:#fff}
.btn-danger{background:var(--bad-solid);border-color:var(--bad-solid);color:#fff}
.btn-danger:hover{background:var(--bad-text);color:#fff}
.btn-ghost{border-color:transparent;background:none;color:var(--accent)}
.btn-ghost:hover{background:var(--accent-tint)}
.btn-sm{padding:4px 10px;font-size:var(--fs-12)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;pointer-events:auto}
.btn[disabled]:hover{background:var(--surface)}
.btn-primary[disabled]:hover{background:var(--accent)}
/* Disabled-with-reason: wrap in [data-tip] so the reason shows on hover/focus */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-within::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--surface);font-size:var(--fs-12);font-weight:400;line-height:1.4;padding:6px 10px;border-radius:var(--r-2);white-space:normal;width:max-content;max-width:260px;z-index:60;box-shadow:var(--shadow-2)}

/* ===== Chips — one system. Workflow states = bordered chip; derived facts = quiet tinted text ===== */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-round);font-size:var(--fs-12);font-weight:500;border:1px solid;white-space:nowrap}
.chip .dot{width:6px;height:6px;border-radius:var(--r-round);background:currentColor}
.chip[data-tone=neutral]{background:var(--neutral-bg);color:var(--neutral-text);border-color:var(--neutral-border)}
.chip[data-tone=flow]{background:var(--flow-bg);color:var(--flow-text);border-color:var(--flow-border)}
.chip[data-tone=good]{background:var(--good-bg);color:var(--good-text);border-color:var(--good-border)}
.chip[data-tone=warn]{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-border)}
.chip[data-tone=bad]{background:var(--bad-bg);color:var(--bad-text);border-color:var(--bad-border)}
.chip[data-tone=hold]{background:var(--bad-solid);color:#fff;border-color:var(--bad-solid);font-weight:600}
a.chip:hover{text-decoration:none;filter:brightness(.96)}
/* Derived facts (payment state, allocation state): not a chip — a fact */
.derived{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-12);font-weight:500;white-space:nowrap}
.derived::before{content:"";width:6px;height:6px;border-radius:var(--r-round);background:currentColor;opacity:.7}
.derived[data-tone=good]{color:var(--good-text)}
.derived[data-tone=warn]{color:var(--warn-text)}
.derived[data-tone=bad]{color:var(--bad-text)}
.derived[data-tone=neutral]{color:var(--text-muted)}

/* ===== Stat tiles ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3)}
.stats-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1200px){.stats-5{grid-template-columns:repeat(3,1fr)}.stats-5 .stat-value{font-size:var(--fs-16)}}
@media (max-width:760px){.stats-5{grid-template-columns:1fr 1fr}}
.stat-value{overflow:hidden;text-overflow:ellipsis}
.stat-tile{display:block;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3);padding:var(--sp-4);color:var(--text)}
a.stat-tile:hover{text-decoration:none;border-color:var(--border-strong);box-shadow:var(--shadow-1);color:var(--text)}
.stat-label{font-size:var(--fs-12);font-weight:500;color:var(--text-muted)}
.stat-value{font-size:var(--fs-22);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:2px;white-space:nowrap}
.stat-value.danger{color:var(--bad-text)}
.stat-sub{font-size:var(--fs-12);color:var(--text-faint);margin-top:2px}
/* compact stats row (detail headers) */
.stats-inline{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.stats-inline .stat-label{font-size:var(--fs-11)}
.stats-inline .stat-value{font-size:var(--fs-16)}

/* ===== Cards ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3)}
.card-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
.card-head .actions{margin-left:auto;display:flex;gap:var(--sp-2)}
.card-body{padding:var(--sp-4)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:start}
.grid-3{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-4);align-items:start}
.cluster{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}

/* ===== Tables ===== */
.table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3);overflow:hidden}
.toolbar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);flex-wrap:wrap}
.toolbar .spacer{margin-left:auto}
.table-scroll{overflow:auto;max-height:70vh}
table.table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.table th{position:sticky;top:0;background:var(--surface-sunken);text-align:left;font-size:var(--fs-11);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:5}
.table th.num,.table td.num{text-align:right}
.table th[aria-sort]{cursor:pointer}
.table th[aria-sort=descending]::after{content:" ↓";color:var(--accent)}
.table th[aria-sort=ascending]::after{content:" ↑";color:var(--accent)}
.table td{padding:0 12px;height:var(--row-h);border-bottom:1px solid var(--border);vertical-align:middle}
.table tbody tr:hover{background:var(--surface-sunken)}
.table tbody tr:last-child td{border-bottom:none}
tr.row-link{cursor:pointer}
tr.row-muted td{color:var(--text-faint)}
tr.row-total td{font-weight:600;background:var(--surface-sunken)}
[data-density=compact] .table td{height:var(--row-h-compact);font-size:var(--fs-12)}
.pagination{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);font-size:var(--fs-12);color:var(--text-muted)}
.pagination .spacer{margin-left:auto}
/* filter controls in toolbars */
.filter{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px dashed var(--border-strong);border-radius:var(--r-round);font-size:var(--fs-12);color:var(--text-muted);background:none;cursor:pointer}
.filter[data-active]{border-style:solid;background:var(--accent-tint);color:var(--accent-strong);border-color:var(--flow-border)}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-2);overflow:hidden}
.seg button{border:none;background:var(--surface);padding:5px 10px;font:500 var(--fs-12) var(--font-ui);color:var(--text-muted);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--accent-tint);color:var(--accent-strong)}
.seg button+button{border-left:1px solid var(--border)}

/* ===== Tabs ===== */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border);margin-bottom:var(--sp-4);overflow-x:auto}
.tab{border:none;background:none;padding:9px 14px;font:500 var(--fs-13) var(--font-ui);color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--text)}
.tab[aria-selected=true]{color:var(--accent-strong);border-bottom-color:var(--accent);font-weight:600}
.tab .count{font-size:var(--fs-11);font-weight:600;background:var(--neutral-bg);color:var(--neutral-text);border-radius:var(--r-round);padding:1px 7px}
.tab[aria-selected=true] .count{background:var(--accent-tint);color:var(--accent-strong)}
.tab .count[data-tone=bad]{background:var(--bad-bg);color:var(--bad-text)}
.tab .count[data-tone=warn]{background:var(--warn-bg);color:var(--warn-text)}

/* ===== Stepper (workflow position) ===== */
.stepper{display:flex;align-items:center;gap:0;font-size:var(--fs-12)}
.step{display:flex;align-items:center;gap:6px;color:var(--text-faint);font-weight:500;white-space:nowrap}
.step .pt{width:20px;height:20px;border-radius:var(--r-round);border:2px solid var(--border-strong);display:grid;place-items:center;font-size:10px;background:var(--surface)}
.step[data-state=done]{color:var(--text-muted)}
.step[data-state=done] .pt{background:var(--good-solid);border-color:var(--good-solid);color:#fff}
.step[data-state=current]{color:var(--accent-strong);font-weight:600}
.step[data-state=current] .pt{border-color:var(--accent);background:var(--accent);color:#fff}
.step[data-state=exit]{color:var(--bad-text)}
.step[data-state=exit] .pt{border-color:var(--bad-solid);background:var(--bad-solid);color:#fff}
.step-line{width:28px;height:2px;background:var(--border-strong);margin:0 6px;flex:none}
.step-line[data-state=done]{background:var(--good-solid)}

/* ===== Dialogs ===== */
dialog{border:none;border-radius:var(--r-3);box-shadow:var(--shadow-dialog);padding:0;width:480px;max-width:92vw;color:var(--text);font:400 var(--fs-14)/var(--lh-body) var(--font-ui)}
dialog::backdrop{background:var(--overlay-backdrop)}
.dialog-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);font-size:var(--fs-16);font-weight:600}
.dialog-body{padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.dialog-foot{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:var(--sp-2);background:var(--surface-sunken);border-radius:0 0 var(--r-3) var(--r-3)}

/* ===== Forms ===== */
.field{display:flex;flex-direction:column;gap:4px}
.field>label{font-size:var(--fs-12);font-weight:600;color:var(--text-muted)}
.req::after{content:" *";color:var(--bad-text)}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{font:400 var(--fs-13)/1.4 var(--font-ui);color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-2);padding:7px 10px;width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:var(--focus);border-color:var(--accent)}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--bad-solid)}
.hint{font-size:var(--fs-12);color:var(--text-faint)}
.error-text{font-size:var(--fs-12);color:var(--bad-text);font-weight:500}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:15px;height:15px}
.check{display:flex;align-items:center;gap:8px;font-size:var(--fs-13)}

/* ===== Diff (old → new) ===== */
.diff{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;font-size:var(--fs-13)}
.diff .old{color:var(--text-faint);text-decoration:line-through;text-decoration-color:var(--border-strong)}
.diff .arrow{color:var(--text-faint)}
.diff .new{font-weight:600}
.diff .new[data-sev=high]{color:var(--bad-text);background:var(--bad-bg);padding:0 4px;border-radius:var(--r-1)}
.delta{font-size:var(--fs-11);font-weight:600;padding:1px 6px;border-radius:var(--r-round)}
.delta[data-sev=low]{background:var(--neutral-bg);color:var(--neutral-text)}
.delta[data-sev=high]{background:var(--bad-bg);color:var(--bad-text)}
.diff-table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.diff-table th{text-align:left;font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:6px 10px;border-bottom:1px solid var(--border)}
.diff-table td{padding:6px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.diff-table td.was{color:var(--text-faint)}
.diff-table td.now{font-weight:500}
.diff-table tr[data-changed] td.now{background:var(--warn-bg)}

/* ===== Math bar (payment allocation) ===== */
.math-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--r-2);font-variant-numeric:tabular-nums;font-size:var(--fs-13);flex-wrap:wrap}
.math-bar .term{display:flex;flex-direction:column}
.math-bar .term b{font-size:var(--fs-14)}
.math-bar .op{color:var(--text-faint);font-size:var(--fs-16)}
.math-bar .term.result b{font-size:var(--fs-16)}
.math-bar[data-state=over] .term.result b{color:var(--bad-text)}
.math-bar[data-state=zero] .term.result b{color:var(--good-text)}

/* ===== Horizontal bar list (top suppliers) ===== */
.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:150px 1fr 110px;align-items:center;gap:var(--sp-3);font-size:var(--fs-12)}
.bar-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.bar-track{height:14px;background:var(--surface-sunken);border-radius:var(--r-1);overflow:hidden;display:flex}
.bar-fill{background:var(--accent);opacity:.55;height:100%}
.bar-overdue{background:var(--bad-solid);height:100%}
.bar-val{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-muted)}

/* ===== Aging bands ===== */
.aging{display:flex;height:26px;border-radius:var(--r-2);overflow:hidden;font-size:var(--fs-11);font-weight:600;color:#fff}
.aging span{display:grid;place-items:center;min-width:0;overflow:hidden;white-space:nowrap}
.aging .b-current{background:var(--age-0)}
.aging .b-30{background:var(--age-30);color:var(--age-30-text)}
.aging .b-60{background:var(--age-60)}
.aging .b-90{background:var(--age-90)}
.aging .b-90p{background:var(--age-90p)}
.aging-legend{display:flex;gap:var(--sp-4);font-size:var(--fs-12);color:var(--text-muted);margin-top:var(--sp-2);flex-wrap:wrap}
.aging-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px}

/* ===== Feed / audit ===== */
.feed{list-style:none;margin:0;padding:0;font-size:var(--fs-13)}
.feed li{display:flex;gap:var(--sp-3);padding:9px 0;border-bottom:1px solid var(--border)}
.feed li:last-child{border-bottom:none}
.feed time{color:var(--text-faint);font-size:var(--fs-12);white-space:nowrap;margin-left:auto}
.audit{list-style:none;margin:0;padding:0;font-size:var(--fs-13)}
.audit>li{padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.audit>li:last-child{border-bottom:none}
.audit .who{font-weight:600}
.audit .meta{font-size:var(--fs-12);color:var(--text-faint)}
.audit details{margin-top:6px}
.audit summary{font-size:var(--fs-12);color:var(--accent);cursor:pointer}

/* ===== Key-value ===== */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px var(--sp-5);margin:0;font-size:var(--fs-13)}
.kv dt{color:var(--text-muted)}
.kv dd{margin:0;font-weight:500}

/* ===== Callouts, empty, skeleton ===== */
.callout{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-2);font-size:var(--fs-13);border:1px solid}
.callout[data-kind=info]{background:var(--accent-tint);border-color:var(--flow-border);color:var(--accent-strong)}
.callout[data-kind=warn]{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}
.callout[data-kind=error]{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-text)}
.callout[data-kind=neutral]{background:var(--surface-sunken);border-color:var(--border);color:var(--text-muted)}
.empty{padding:var(--sp-7) var(--sp-5);text-align:center;color:var(--text-muted)}
.empty h2{color:var(--text);margin-bottom:var(--sp-1)}
.empty .btn{margin-top:var(--sp-3)}
.skeleton{background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--bg) 50%,var(--surface-sunken) 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--r-1);color:transparent!important;pointer-events:none;user-select:none}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ===== Misc ===== */
.alias{font-family:var(--font-mono);font-size:var(--fs-12);background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--r-1);padding:1px 6px}
.link-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-12);border:1px solid var(--border-strong);border-radius:var(--r-round);padding:2px 9px;color:var(--accent-strong);background:var(--surface)}
.link-chip:hover{background:var(--accent-tint);text-decoration:none}
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--r-3);padding:var(--sp-7);text-align:center;color:var(--text-muted);background:var(--surface)}
.dropzone[data-state=over]{border-color:var(--accent);background:var(--accent-tint)}
.commit-bar{position:sticky;bottom:0;background:var(--surface);border-top:2px solid var(--border-strong);padding:var(--sp-3) var(--sp-5);display:flex;align-items:center;gap:var(--sp-4);box-shadow:0 -4px 12px oklch(30% .02 235/.08);z-index:20}
.commit-bar .spacer{margin-left:auto}
.proposal{background:var(--accent-tint)!important;outline:1px dashed var(--flow-border);outline-offset:-1px}
.rev-pair{color:var(--text-faint)}
.rev-pair a{font-size:var(--fs-12)}

/* ===== Print (statements/remittance) ===== */
@media print{.sidebar,.topbar,.toolbar,.commit-bar,.banner[data-kind=test],.actions{display:none!important}.shell{grid-template-columns:1fr}.content{padding:0;max-width:none}}

/* ===== Responsive ===== */
@media (max-width:1100px){.grid-2,.grid-3{grid-template-columns:1fr}}
@media (max-width:900px){.shell{grid-template-columns:56px 1fr}.nav a span,.brand span,.sidebar-foot{display:none}.nav .badge{position:absolute;margin-left:14px;margin-top:-14px}}


/* ===== PayMaster additions: mobile & small-screen polish ===== */
@media (max-width:760px){
  .content{padding:var(--sp-3)}
  .page-head .actions{width:100%;flex-wrap:wrap}
  .commit-bar{flex-wrap:wrap;gap:var(--sp-2)}
  .stats-inline{gap:var(--sp-3)}
  .toolbar{gap:6px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .table td,.table th{padding:6px 8px}
  .cluster{row-gap:6px}
  dialog{width:96vw}
}
.table th[aria-sort]{user-select:none}