/* XF-Accounting components — consume tokens only, never raw values. */

* { box-sizing: border-box; }

/* The canvas (html) carries the themed background too, so a boosted navigation's
   scroll-to-top or a shorter page never reveals the white UA backdrop. */
html { background: var(--c-bg); }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-neutral-900);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

a { color: var(--c-primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: var(--text-h1); line-height: var(--lh-h1); font-weight: 650; margin: 0 0 var(--space-4); color: var(--c-neutral-800); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: 600; margin: 0; color: var(--c-neutral-800); }

/* ---- app shell ---- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--c-surface);
  border-right: 1px solid var(--c-neutral-200);
  padding: var(--space-4);
  flex-shrink: 0;
}
.sidebar .brand {
  font-weight: 700; font-size: var(--text-h2); color: var(--c-primary-600);
  padding: var(--space-2) var(--space-3) var(--space-5);
  display: block;
}
.nav-group { margin-bottom: var(--space-4); }
.nav-group-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .02em;
  color: var(--c-neutral-500); font-weight: 500; padding: var(--space-2) var(--space-3);
}
.nav-item {
  display: block; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); color: var(--c-neutral-700);
  font-size: var(--text-sm); margin-bottom: 2px;
  border-left: 3px solid transparent;
  transition: background var(--motion);
}
.nav-item:hover { background: var(--c-neutral-100); text-decoration: none; }
.nav-item.active {
  background: var(--c-primary-50); color: var(--c-primary-700);
  border-left-color: var(--c-primary-500); font-weight: 600;
}

.main { flex: 1; min-width: 0; }

.topbar {
  height: var(--topbar-h); background: var(--c-surface);
  border-bottom: 1px solid var(--c-neutral-200);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-6);
}
.topbar .spacer { flex: 1; }
.entity-logo {
  height: var(--logo-h); width: auto; max-width: var(--logo-box);
  object-fit: contain; border-radius: var(--radius-sm); display: block;
}
.entity-logo--row { height: var(--logo-h-row); }
.logo-preview {
  width: var(--logo-box); height: var(--logo-box);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-neutral-200); border-radius: var(--radius-md);
  background: var(--c-surface); padding: var(--space-2);
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-preview__empty { color: var(--c-neutral-500); font-size: var(--text-xs); text-align: center; }
.ws-dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--c-warning); display: inline-block;
}
.ws-dot.live { background: var(--c-success); }

/* ---- theme toggle ---- */
/* The button is icon-only and square; its two glyphs are swapped purely in CSS
   so the icon always matches the rendered theme, including OS-driven auto mode
   (no [data-theme] set). JS only flips the attribute and persists the choice. */
.btn.theme-toggle { padding: 0; width: var(--control-h-sm); justify-content: center; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

.content { max-width: var(--content-max); padding: var(--space-6); margin: 0 auto; }

/* ---- cards ---- */
.card {
  background: var(--c-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6);
  margin-bottom: var(--space-6); border: 1px solid var(--c-neutral-200);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-neutral-200);
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 550;
  cursor: pointer; transition: background var(--motion);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn--primary { background: var(--c-primary-500); color: var(--c-surface); }
.btn--primary:hover { background: var(--c-primary-400); }
.btn--secondary { background: var(--c-surface); border-color: var(--c-neutral-300); color: var(--c-neutral-800); }
.btn--secondary:hover { background: var(--c-neutral-100); }
.btn--ghost { background: transparent; color: var(--c-neutral-700); }
.btn--ghost:hover { background: var(--c-neutral-100); }
.btn--danger { background: var(--c-danger); color: var(--c-surface); }
.btn--danger-soft { background: var(--c-danger-soft); color: var(--c-danger); }
.btn--sm { height: var(--control-h-sm); padding: 0 var(--space-3); }

/* ---- forms ---- */
label {
  display: block; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .02em; color: var(--c-neutral-600); font-weight: 500;
  margin-bottom: var(--space-1);
}
input, select, textarea {
  width: 100%; height: var(--control-h); padding: 0 var(--space-3);
  border: 1px solid var(--c-neutral-300); border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: var(--text-body);
  background: var(--c-surface); color: var(--c-neutral-900);
}
textarea { height: auto; padding: var(--space-2) var(--space-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-primary-500); box-shadow: var(--shadow-focus);
}
input.amount { text-align: right; font-family: var(--font-num); }
.field { margin-bottom: var(--space-4); }
.field-row { display: flex; gap: var(--space-4); }
.field-row > .field { flex: 1; }

/* ---- filter bars ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); }
.filter-field { display: flex; flex-direction: column; gap: var(--space-1); }

/* ---- searchable combobox (filter bar) ---- */
[x-cloak] { display: none !important; }
.combo { position: relative; min-width: 180px; }
.combo-menu {
  position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto; margin: 0; padding: var(--space-1);
  list-style: none; background: var(--c-surface);
  border: 1px solid var(--c-neutral-300); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.combo-item {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
}
.combo-item:hover { background: var(--c-neutral-100); }

/* ---- financial tables ---- */
.table-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-neutral-200); }
.table-fin { width: 100%; border-collapse: collapse; background: var(--c-surface); }
.table-fin th {
  background: var(--c-neutral-100); text-align: left;
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .02em;
  color: var(--c-neutral-600); font-weight: 600;
  padding: var(--space-2) var(--space-4); position: sticky; top: 0;
}
.table-fin th.amount, .table-fin td.amount { text-align: right; }
.table-fin td {
  padding: var(--space-2) var(--space-4); height: var(--row-h);
  border-bottom: 1px solid var(--c-neutral-200); font-size: var(--text-sm);
}
.table-fin tbody tr:hover { background: var(--c-neutral-100); }
.table-fin tr.totals td {
  background: var(--c-neutral-100); font-weight: 600;
  border-top: 2px solid var(--c-neutral-300);
  font-size: var(--text-num-lg); font-family: var(--font-num);
}
.amount.negative { color: var(--c-danger); }

/* Highlight-fade for live-swapped rows (WebSocket pushes only). Do NOT add the
   generic htmx `.htmx-added` class here: htmx stamps it onto every node it swaps
   in — including the whole #content subtree on a boosted navigation — so the
   highlight would flash on every page change. `.ws-settled` is applied
   deliberately by the WS handler in the layout. */
.ws-settled { animation: settle 1.2s ease-out; }
@keyframes settle { from { background: var(--c-highlight); } to { background: transparent; } }

/* ---- status pills ---- */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs); font-weight: 600;
}
.pill--draft   { border: 1px solid var(--c-neutral-300); color: var(--c-neutral-500); }
.pill--posted  { background: var(--c-info-soft); color: var(--c-info); }
.pill--sent    { background: var(--c-info-soft); color: var(--c-info); }
.pill--partial { background: var(--c-warning-soft); color: var(--c-warning); }
.pill--paid    { background: var(--c-success-soft); color: var(--c-success); }
.pill--void    { border: 1px solid var(--c-danger); color: var(--c-danger); opacity: .7; }
.pill--overdue { background: var(--c-danger-soft); color: var(--c-danger); }
.pill--unmatched { background: var(--c-draft-soft); color: var(--c-draft); }
.pill--matched { background: var(--c-success-soft); color: var(--c-success); }
.pill--ignored { border: 1px solid var(--c-neutral-300); color: var(--c-neutral-500); }

/* period dots */
.dot { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; margin-right: var(--space-1); }
.dot--open { background: var(--c-success); }
.dot--user_closed { background: var(--c-warning); }
.dot--accountant_closed { background: var(--c-info); }
.dot--locked { background: var(--c-danger); }

/* ---- dashboard stat cards ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-card {
  background: var(--c-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--c-neutral-200);
  padding: var(--space-5);
}
.stat-card .stat-label { font-size: var(--text-xs); text-transform: uppercase; color: var(--c-neutral-500); font-weight: 600; }
.stat-card .stat-value {
  font-size: var(--text-display); line-height: var(--lh-display); font-weight: 700;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--c-neutral-900); margin-top: var(--space-2);
}

/* ---- alerts ---- */
.alert {
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4); font-size: var(--text-sm);
}
.alert--error { background: var(--c-danger-soft); color: var(--c-danger); }
.alert--info { background: var(--c-info-soft); color: var(--c-info); }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--c-bg); }
.login-card {
  width: 380px; background: var(--c-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); padding: var(--space-10);
}
.login-card .brand { font-weight: 700; font-size: var(--text-h1); color: var(--c-primary-600); margin-bottom: var(--space-6); }

/* ---- invoice line editor ---- */
.line-editor td { padding: var(--space-1) var(--space-2); }
.line-editor input, .line-editor select { height: var(--control-h-sm); font-size: var(--text-sm); }
.totals-panel {
  background: var(--c-primary-50); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin-top: var(--space-4);
  display: flex; justify-content: flex-end; gap: var(--space-8);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.totals-panel .total-gross { font-size: var(--text-num-lg); font-weight: 600; }

/* ---- bill attachments: split form (viewer | fields) ---- */
.bill-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.bill-viewer-inner {
  border: 1px solid var(--c-neutral-200); border-radius: var(--radius-md);
  background: var(--c-surface); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
  position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8));
}
.bill-viewer-inner.dragover { border-color: var(--c-primary-500); background: var(--c-primary-50); }
.bill-viewer-toolbar { display: flex; align-items: center; gap: var(--space-2); }
.bill-viewer-toolbar .spacer { flex: 1; }
.bill-preview { flex: 1; min-height: 0; overflow: auto; background: var(--c-neutral-100); border-radius: var(--radius-sm); }
.bill-preview-stage { display: flex; align-items: flex-start; justify-content: center; min-height: 60vh; padding: var(--space-2); }
.bill-frame { width: 100%; height: 70vh; border: 0; background: #fff; }
.bill-image { max-width: 100%; height: auto; transform-origin: top center; }
.bill-dropzone {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 60vh; padding: var(--space-5); cursor: pointer;
  border: 2px dashed var(--c-neutral-300); border-radius: var(--radius-sm);
  color: var(--c-neutral-600);
}
.bill-dropzone:hover { border-color: var(--c-primary-400); color: var(--c-neutral-800); }
.bill-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.bill-thumb {
  display: flex; align-items: center; gap: var(--space-1);
  border: 1px solid var(--c-neutral-200); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
}
.bill-thumb.active { border-color: var(--c-primary-500); background: var(--c-primary-50); }
.bill-thumb-btn { background: none; border: 0; cursor: pointer; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.bill-error { color: var(--c-danger); }
.bills-bulk-drop {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: var(--space-2);
  border: 2px dashed var(--c-neutral-300); border-radius: var(--radius-sm);
  padding: var(--space-4); margin-bottom: var(--space-4); color: var(--c-neutral-600); cursor: pointer;
}
.bills-bulk-drop.dragover { border-color: var(--c-primary-500); background: var(--c-primary-50); color: var(--c-neutral-800); }

/* ============================================================
   Reconcile — two-pane match workspace (pages/banking/reconcile.html).
   Colours are all tokens, so the light/dark themes apply unchanged.
   ============================================================ */
.recon-toolbar {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--c-surface); border: 1px solid var(--c-neutral-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
}
.recon-seg { display: inline-flex; background: var(--c-neutral-100); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.recon-seg button {
  border: 0; background: transparent; height: 30px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600;
  color: var(--c-neutral-600); cursor: pointer;
}
.recon-seg button.on { background: var(--c-surface); color: var(--c-neutral-900); box-shadow: var(--shadow-sm); }
.recon-prog { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); min-width: 240px; }
.recon-prog .meta { font-size: var(--text-xs); color: var(--c-neutral-600); font-weight: 550; white-space: nowrap; }
.recon-prog .meta b { color: var(--c-neutral-900); }
.recon-bar { flex: 1; height: 8px; background: var(--c-neutral-200); border-radius: var(--radius-pill); overflow: hidden; min-width: 100px; }
.recon-bar i { display: block; height: 100%; background: var(--c-primary-500); border-radius: var(--radius-pill); transition: width .4s ease-out; }

.recon { display: grid; grid-template-columns: minmax(360px, 5fr) minmax(400px, 6fr); gap: var(--space-4); align-items: start; }
.recon-panel {
  background: var(--c-surface); border: 1px solid var(--c-neutral-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; display: flex; flex-direction: column;
}
.recon-phead { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-neutral-200); }
.recon-phead h2 { font-size: var(--text-h3); font-weight: 600; }
.recon-phead .count { font-size: var(--text-xs); font-weight: 600; color: var(--c-neutral-500); background: var(--c-neutral-100); border-radius: var(--radius-pill); padding: 2px 9px; }

/* left: transaction list */
.recon-txlist { display: flex; flex-direction: column; max-height: 640px; overflow: auto; }
.recon-tx {
  display: grid; grid-template-columns: 36px 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-neutral-200);
  cursor: pointer; position: relative; transition: background .15s;
}
.recon-tx:hover { background: var(--c-neutral-100); }
.recon-tx.sel { background: var(--c-primary-50); }
.recon-tx.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-primary-500); }
.recon-tx.gone { animation: reconSettle .4s ease forwards; }
@keyframes reconSettle { to { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; transform: translateX(8px); } }
.recon-ico { width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; }
.recon-ico svg { width: 16px; height: 16px; }
.recon-ico.in { background: var(--c-success-soft); color: var(--c-success); }
.recon-ico.out { background: var(--c-danger-soft); color: var(--c-danger); }
.recon-tx .party { font-size: var(--text-body); font-weight: 600; color: var(--c-neutral-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recon-tx .meta { font-size: var(--text-xs); color: var(--c-neutral-500); margin-top: 2px; display: flex; gap: var(--space-2); }
.recon-tx .col-r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.recon-tx .amt { font-size: var(--text-num); font-weight: 650; font-variant-numeric: tabular-nums; }
.recon-tx .amt.in { color: var(--c-success); }
.recon-tx .amt.out { color: var(--c-danger); }
.recon-hint { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-pill); padding: 2px 8px; }
.recon-hint.ready { background: var(--c-primary-50); color: var(--c-primary-700); }
.recon-hint.multi { background: var(--c-warning-soft); color: var(--c-warning); }

/* right: match panel */
.recon-empty { padding: 60px var(--space-6); text-align: center; color: var(--c-neutral-500); }
.recon-recap { padding: var(--space-4); background: var(--c-neutral-100); border-bottom: 1px solid var(--c-neutral-200); display: flex; align-items: center; gap: var(--space-4); }
.recon-recap .lab { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-neutral-500); }
.recon-recap .big { font-size: var(--text-num-lg); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.recon-recap .big.in { color: var(--c-success); }
.recon-recap .big.out { color: var(--c-danger); }
.recon-recap .who { font-size: var(--text-sm); color: var(--c-neutral-600); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.recon-suggest { margin: var(--space-3) var(--space-4) 0; border: 1px solid var(--c-primary-200); background: var(--c-primary-50); border-radius: var(--radius-md); padding: var(--space-3); display: flex; align-items: center; gap: var(--space-3); }
.recon-suggest .t1 { font-size: var(--text-sm); font-weight: 600; color: var(--c-primary-800); }
.recon-suggest .t2 { font-size: var(--text-xs); color: var(--c-primary-700); margin-top: 2px; }

.recon-candhead { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-1); }
.recon-candhead .lab { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-neutral-500); }
.recon-candhead input { margin-left: auto; max-width: 170px; height: var(--control-h-sm); font-size: var(--text-sm); }
.recon-cands { padding: var(--space-1) var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); max-height: 320px; overflow: auto; }
.recon-cand {
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--c-neutral-200);
  border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, background .15s;
}
.recon-cand:hover { border-color: var(--c-neutral-300); background: var(--c-neutral-100); }
.recon-cand.on { border-color: var(--c-primary-300); background: var(--c-primary-50); }
.recon-cand .box { width: 20px; height: 20px; border-radius: var(--radius-sm); border: 1.5px solid var(--c-neutral-300); background: var(--c-surface); display: grid; place-items: center; }
.recon-cand.on .box { background: var(--c-primary-500); border-color: var(--c-primary-500); }
.recon-cand .box svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.recon-cand.on .box svg { opacity: 1; }
.recon-cand .doc { font-size: var(--text-sm); font-weight: 600; color: var(--c-neutral-900); }
.recon-cand .sub { font-size: var(--text-xs); color: var(--c-neutral-500); margin-top: 2px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.recon-cand .open { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.recon-cand .alloc { font-size: var(--text-xs); font-weight: 600; margin-top: 3px; color: var(--c-primary-700); text-align: right; }
.recon-cand .alloc.partial { color: var(--c-warning); }

.recon-tally { margin: var(--space-2) var(--space-4) 0; border-top: 1px dashed var(--c-neutral-300); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.recon-tally .row { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); }
.recon-tally .row .lab { color: var(--c-neutral-600); }
.recon-tally .row .val { font-weight: 650; font-variant-numeric: tabular-nums; }
.recon-tally .row.tot .lab { color: var(--c-neutral-900); font-weight: 600; }
.recon-state { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin-top: 2px; }
.recon-state.ok { background: var(--c-success-soft); color: var(--c-success); }
.recon-state.partial { background: var(--c-warning-soft); color: var(--c-warning); }
.recon-state.over { background: var(--c-info-soft); color: var(--c-info); }
.recon-foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-top: var(--space-2); border-top: 1px solid var(--c-neutral-200); flex-wrap: wrap; }
.recon-foot .btn--primary { flex: 1; justify-content: center; min-width: 170px; }

.recon-done { padding: var(--space-12) var(--space-6); text-align: center; }
.recon-done .mk { width: 54px; height: 54px; border-radius: var(--radius-lg); background: var(--c-success-soft); color: var(--c-success); display: grid; place-items: center; margin: 0 auto var(--space-3); }
.recon-done .mk svg { width: 26px; height: 26px; }
.recon-done h3 { font-size: var(--text-h2); font-weight: 650; }
.recon-done p { color: var(--c-neutral-500); font-size: var(--text-sm); margin-top: 5px; }

.recon-toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: var(--space-3); z-index: 60; }
.recon-toast { display: flex; align-items: center; gap: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-neutral-200); border-left: 3px solid var(--c-success); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); min-width: 260px; animation: reconToastIn .25s ease; }
.recon-toast.err { border-left-color: var(--c-danger); }
@keyframes reconToastIn { from { opacity: 0; transform: translateY(8px); } }
.recon-toast .t1 { font-size: var(--text-sm); font-weight: 600; }
.recon-toast .t2 { font-size: var(--text-xs); color: var(--c-neutral-500); margin-top: 1px; }

/* tabs (match vs. code to GL) */
.recon-tabs { display: flex; gap: 4px; padding: var(--space-3) var(--space-4) 0; }
.recon-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; border: 1px solid var(--c-neutral-200); border-bottom: 0; cursor: pointer;
  background: var(--c-neutral-100); color: var(--c-neutral-600); font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.recon-tab svg { width: 15px; height: 15px; }
.recon-tab.on { background: var(--c-surface); color: var(--c-neutral-900); margin-bottom: -1px; }

/* GL coder */
.recon-suggest.rule { border-color: var(--c-info); background: var(--c-info-soft); }
.recon-suggest.rule .t1, .recon-suggest.rule .t2 { color: var(--c-info); }
.gl-table { margin: 0 var(--space-4); border: 1px solid var(--c-neutral-200); border-radius: var(--radius-md); overflow: hidden; }
.gl-hd, .gl-row { display: grid; grid-template-columns: 1.7fr 1.3fr .9fr 1fr 30px; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); }
.gl-hd { background: var(--c-neutral-100); font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--c-neutral-600); }
.gl-hd .r { text-align: right; }
.gl-row { border-top: 1px solid var(--c-neutral-200); }
.gl-table .inp { height: var(--control-h-sm); font-size: var(--text-sm); margin: 0; }
.gl-table .inp.err { border-color: var(--c-danger); }
.gl-table .inp.amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.gl-rm { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--c-neutral-400); display: grid; place-items: center; cursor: pointer; }
.gl-rm:hover { background: var(--c-danger-soft); color: var(--c-danger); }
.gl-rm svg { width: 15px; height: 15px; }
.gl-foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--c-neutral-200); background: var(--c-neutral-100); }
.gl-foot .btn svg { width: 14px; height: 14px; }
.gl-vatnote { margin-left: auto; font-size: var(--text-xs); color: var(--c-neutral-500); }
.gl-vatnote b { color: var(--c-neutral-700); font-variant-numeric: tabular-nums; }

/* remember-this-coding checkbox */
.recon-remember {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
  margin: var(--space-3) var(--space-4) 0; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-neutral-200); border-radius: var(--radius-md);
  background: var(--c-neutral-100); font-size: var(--text-sm); color: var(--c-neutral-700);
}
.recon-remember .chk { width: 18px; height: 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--c-neutral-300); background: var(--c-surface); display: grid; place-items: center; flex: none; }
.recon-remember.on .chk { background: var(--c-primary-500); border-color: var(--c-primary-500); }
.recon-remember .chk svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.recon-remember.on .chk svg { opacity: 1; }

.recon-hybrid { margin-top: var(--space-3); }
.recon-hybrid .recon-candhead { padding-left: 0; padding-right: 0; }
.cand-alloc { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-top: 4px; }
.cand-alloc .inp.amt { height: var(--control-h-sm); width: 110px; font-size: var(--text-sm); }

@media (max-width: 1080px) { .recon { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .gl-hd, .gl-row { grid-template-columns: 1fr 1fr; row-gap: var(--space-2); } .gl-hd .r { display: none; } }

/* ---- responsive ---- */
@media (max-width: 960px) {
  .sidebar { display: none; }
  .table-wrap { overflow-x: auto; }
}
@media (max-width: 1000px) {
  .bill-split { grid-template-columns: 1fr; }
  .bill-viewer-inner { position: static; max-height: none; }
}