:root {
  --bg: #f4f5f8;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f2f3f7;
  --surface-hover: #eef0f5;
  --border: #e3e6ec;
  --border-strong: #d2d7e0;
  --text: #1a1f29;
  --text-muted: #626b7a;
  --text-faint: #939bab;
  --accent: #5661f0;
  --accent-soft: #ecedfe;
  --accent-contrast: #ffffff;
  --green: #1f9d57;
  --green-soft: #e2f5ea;
  --amber: #c98518;
  --amber-soft: #fbefd8;
  --red: #d94a4a;
  --red-soft: #fbe6e6;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 33, 0.06);
  --shadow: 0 2px 8px rgba(20, 24, 33, 0.07), 0 1px 2px rgba(20, 24, 33, 0.05);
  --shadow-lg: 0 10px 30px rgba(20, 24, 33, 0.12);
  --nav-h: 58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --bg-elev: #171b21;
    --surface: #1a1f26;
    --surface-alt: #222831;
    --surface-hover: #262d37;
    --border: #2b323c;
    --border-strong: #3a424e;
    --text: #eef1f5;
    --text-muted: #9aa4b2;
    --text-faint: #6b7480;
    --accent: #7d88ff;
    --accent-soft: #23264a;
    --accent-contrast: #0b0d12;
    --green: #3ec27a;
    --green-soft: #16311f;
    --amber: #e0ab3d;
    --amber-soft: #33280f;
    --red: #ec6a6a;
    --red-soft: #34191a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="light"] {
  --bg: #f4f5f8; --bg-elev: #fff; --surface: #fff; --surface-alt: #f2f3f7; --surface-hover: #eef0f5;
  --border: #e3e6ec; --border-strong: #d2d7e0; --text: #1a1f29; --text-muted: #626b7a; --text-faint: #939bab;
  --accent: #5661f0; --accent-soft: #ecedfe; --accent-contrast: #fff;
  --green: #1f9d57; --green-soft: #e2f5ea; --amber: #c98518; --amber-soft: #fbefd8; --red: #d94a4a; --red-soft: #fbe6e6;
  --shadow-sm: 0 1px 2px rgba(20,24,33,.06); --shadow: 0 2px 8px rgba(20,24,33,.07),0 1px 2px rgba(20,24,33,.05); --shadow-lg: 0 10px 30px rgba(20,24,33,.12);
}
:root[data-theme="dark"] {
  --bg: #0f1216; --bg-elev: #171b21; --surface: #1a1f26; --surface-alt: #222831; --surface-hover: #262d37;
  --border: #2b323c; --border-strong: #3a424e; --text: #eef1f5; --text-muted: #9aa4b2; --text-faint: #6b7480;
  --accent: #7d88ff; --accent-soft: #23264a; --accent-contrast: #0b0d12;
  --green: #3ec27a; --green-soft: #16311f; --amber: #e0ab3d; --amber-soft: #33280f; --red: #ec6a6a; --red-soft: #34191a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow: 0 2px 10px rgba(0,0,0,.4); --shadow-lg: 0 12px 34px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  max-width: 1060px;
  margin: 0 auto;
  padding: 22px 18px 80px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Page header ---------- */
.page-head { margin: 4px 0 22px; }
.page-head h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.page-head .page-sub { color: var(--text-muted); margin: 5px 0 0; max-width: 60ch; }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -0.02em; }
h2 { font-size: 17px; margin: 0 0 12px; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 12px; margin: 20px 0 8px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 650; }
p.subtitle { color: var(--text-muted); margin: 0 0 20px; }

/* ---------- Nav ---------- */
.app-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--nav-h);
  padding: 0 18px;
  background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.app-nav-brand-wrap { display: flex; flex-direction: column; line-height: 1.05; }
.app-nav-brand { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.app-nav-brand::before { content: "💰"; font-size: 15px; }
.app-nav-brand:hover { color: var(--accent); }
.app-nav-version { font-size: 10px; font-weight: 500; color: var(--text-faint); margin-left: 22px; }
.app-nav-links { display: flex; gap: 2px; margin-left: auto; }
.app-nav-links a {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  color: var(--text-muted);
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 14px; font-weight: 550;
  transition: background .12s, color .12s;
}
.app-nav-links a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.app-nav-links a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.app-nav-links a svg { width: 18px; height: 18px; flex: none; }
.app-nav-links a .nav-label { display: inline; }

@media (max-width: 680px) {
  .app-nav {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    height: auto; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-bottom: none; border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  }
  .app-nav-brand-wrap { display: none; }
  .app-nav-links { margin: 0; width: 100%; gap: 0; }
  .app-nav-links a {
    flex: 1; flex-direction: column; gap: 3px;
    padding: 6px 2px; border-radius: 10px; font-size: 10.5px; font-weight: 600;
  }
  .app-nav-links a[aria-current="page"] { background: transparent; color: var(--accent); }
  .app-nav-links a svg { width: 21px; height: 21px; }
  main { padding-bottom: 84px; }
}

/* ---------- Cards ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 16px;
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }

/* ---------- Buttons ---------- */
button, .btn {
  font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .12s, border-color .12s, transform .04s;
  text-decoration: none;
  white-space: nowrap;
}
button:hover, .btn:hover { background: var(--surface-hover); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
button.primary, .btn.primary {
  background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
button.primary:hover, .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
button.ghost:hover, .btn.ghost:hover { background: var(--surface-hover); color: var(--text); }
button.danger, .btn.danger { color: var(--red); border-color: transparent; background: transparent; }
button.danger:hover, .btn.danger:hover { background: var(--red-soft); }
button.small, .btn.small { padding: 5px 9px; font-size: 13px; }

/* ---------- Forms ---------- */
input, select, textarea {
  font: inherit;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
input::placeholder { color: var(--text-faint); }
label { font-size: 12.5px; color: var(--text-muted); display: block; margin-bottom: 4px; font-weight: 550; }
.field { margin-bottom: 14px; }
.inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 14px; }
.inline-fields .field { margin-bottom: 0; min-width: 0; }
.inline-fields .field input:not([type="color"]), .inline-fields .field select { width: 100%; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody td { padding-top: 5px; padding-bottom: 5px; }
thead th { background: var(--surface); }
th { color: var(--text-faint); font-weight: 650; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; user-select: none; white-space: nowrap; }
th[data-sort] { cursor: pointer; }
th[data-sort]:hover { color: var(--text); }
th.sorted { color: var(--accent); }
th.sorted::after { content: ' ↓'; }
tbody tr { transition: background .1s; scroll-margin-top: 110px; }
tbody tr:hover { background: var(--surface-alt); }
tbody tr.bucket-row { cursor: pointer; }
tbody tr.bucket-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
tbody tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; border-radius: var(--r); }
/* nowrap because a leading "-" (negative currency, e.g. "-$287.65") is a
   legal line-break point under the default Unicode line-breaking rules --
   without this, any amount cell can wrap with the minus sign orphaned
   alone on its own line the moment its column gets narrow (seen for real
   in the Statistics bucket table's Delta $ column on a phone). */
td.amount, th.amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.low-confidence td:nth-child(3) textarea { color: var(--amber); }
tr.group-header td { background: var(--surface-alt); font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
tr.selected { background: var(--accent-soft) !important; }
tbody input, tbody select, tbody textarea { border-color: transparent; background: transparent; border-radius: 6px; padding: 5px 7px; width: 100%; }
tbody input:hover, tbody select:hover, tbody textarea:hover { background: var(--surface); border-color: var(--border); }
tbody input:focus, tbody select:focus, tbody textarea:focus { background: var(--surface); border-color: var(--accent); }
textarea.row-desc { resize: none; overflow: hidden; min-height: 0; line-height: 1.35; white-space: pre-wrap; word-break: break-word; font: inherit; display: block; }
tbody input[type="date"] { min-width: 138px; }
tbody input[type="checkbox"] { width: auto; }

/* A cell holding one or more action buttons: keep them on one line so a
   squeezed column scrolls horizontally instead of wrapping the buttons onto
   several stacked lines, which otherwise inflates that row's height a lot. */
.actions-cell { white-space: nowrap; }
.actions-cell button { margin-right: 4px; }
.actions-cell button:last-child { margin-right: 0; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  color: #fff;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge.muted { background: var(--surface-alt); color: var(--text-muted); }
.badge.auto { font-weight: 550; }

/* ---------- Debug parsing panel ---------- */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.status-pill.matched { background: var(--green-soft); color: var(--green); }
.status-pill.rejected { background: var(--surface-alt); color: var(--text-muted); }
.status-pill.unmatched { background: var(--amber-soft); color: var(--amber); }
#debug-parse-table td { font-family: ui-monospace, monospace; font-size: 12px; vertical-align: top; }
#debug-parse-table td:nth-child(3) { font-family: inherit; }
#debug-parse-table .line-trimmed { color: var(--text-muted); text-decoration: line-through; display: block; }

/* ---------- Toolbars ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
/* Groups a prev/label/next trio as one flex item so flex-wrap can only ever
   move the whole group to its own line, never split the arrows away from
   the label they belong to. */
.period-nav { display: flex; align-items: center; gap: 10px; }
@media (max-width: 680px) {
  #stat-toolbar { flex-direction: column; align-items: stretch; }
  #stat-toolbar .spacer { display: none; }
  #stat-toolbar #stat-scope { align-self: center; }
  #stat-toolbar .period-nav { justify-content: center; }
  /* Statistics' KPI values can be large and sign-prefixed (e.g.
     "-$11,992.99"); a full-width single column gives them room instead of
     squeezing into a ~150px auto-fit column. */
  #stat-tiles { grid-template-columns: 1fr; }
}
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.filter-bar .field { margin: 0; }

.bulk-toolbar {
  position: sticky;
  bottom: 12px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  margin-top: 14px;
}
@media (max-width: 680px) { .bulk-toolbar { bottom: 78px; } }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; background: var(--surface-alt); padding: 4px; border-radius: var(--r); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { border: none; background: none; border-radius: var(--r-sm); padding: 8px 15px; color: var(--text-muted); font-weight: 600; }
.tabs button:hover { background: var(--surface-hover); }
.tabs button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Budget bars ---------- */
.bar-track { background: var(--surface-alt); border-radius: 999px; height: 8px; width: 100%; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.bar-fill.green { background: var(--green); }
.bar-fill.amber { background: var(--amber); }
.bar-fill.red { background: var(--red); }

/* ---------- Statistics deltas ---------- */
.delta-pos { color: var(--red); }   /* spend increased */
.delta-neg { color: var(--green); } /* spend decreased */

/* Year-scope drill-down: a row expands to its months, each a link. */
.stat-expand-row td { background: var(--surface-alt); padding: 10px 12px; }
.stat-expand-row:hover { background: transparent; }
.stat-months { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-month-link {
  display: inline-flex; gap: 5px; align-items: center;
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.stat-month-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ---------- Dashboard ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 15px 16px; box-shadow: var(--shadow-sm);
}
.stat .stat-label { font-size: 12px; color: var(--text-muted); font-weight: 550; }
/* nowrap because a leading "-" (negative currency) is a legal line-break
   point in the default Unicode line-breaking rules -- without this, a
   value like "-$11,992.99" can wrap with the minus sign orphaned alone on
   its own line the moment the tile gets narrow. */
.stat .stat-value { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat a.stat-value { color: var(--text); }
.stat a.stat-value:hover { color: var(--accent); text-decoration: none; }
.stat.accent { background: var(--accent-soft); border-color: transparent; }
.stat.accent .stat-value { color: var(--accent); }

.hero {
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #8b5bf0) 100%);
  color: #fff; border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.hero h2 { color: #fff; margin: 0; font-size: 15px; font-weight: 600; opacity: .9; }
.hero .hero-amount { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero .hero-sub { opacity: .9; margin-top: 6px; font-size: 14px; }
.hero .hero-bar { background: rgba(255,255,255,.25); border-radius: 999px; height: 8px; margin-top: 14px; overflow: hidden; }
.hero .hero-bar > div { height: 100%; background: #fff; border-radius: 999px; }
.hero-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.hero-nav-btn {
  flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff;
}
.hero-nav-btn:hover { background: rgba(255,255,255,.28); }

.callout {
  display: flex; align-items: center; gap: 14px;
  background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px;
}
.callout .callout-body { flex: 1; }
.callout .callout-title { font-weight: 650; }
.callout .callout-sub { color: var(--text-muted); font-size: 13px; }

.list-rows { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: none; }
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .lr-sub { color: var(--text-muted); font-size: 13px; }

/* ---------- Misc ---------- */
.empty-state { text-align: center; color: var(--text-muted); padding: 48px 20px; }
.empty-state .es-icon { font-size: 38px; }
.empty-state .es-title { font-weight: 650; color: var(--text); font-size: 17px; margin-top: 10px; }
.empty-state .es-body { margin: 8px auto 18px; max-width: 42ch; }

.drop-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: 46px 22px; text-align: center; color: var(--text-muted);
  cursor: pointer; background: var(--surface-alt);
  transition: border-color .15s, background .15s, color .15s;
}
.drop-zone:hover { border-color: var(--accent); color: var(--text); }
.drop-zone.dragover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.drop-zone .dz-icon { font-size: 30px; display: block; margin-bottom: 8px; }

.color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.right { margin-left: auto; }
code.snippet { background: var(--surface-alt); padding: 2px 6px; border-radius: 5px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}

/* ---------- Import bar (on Transactions) ---------- */
.import-bar .import-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.import-bar #acc-select { min-width: 170px; }
.import-bar #acc-new-name { min-width: 170px; }
.import-bar #file-label { font-size: 13px; }

/* ---------- Transactions table: column sizing ---------- */
/* Description gets the slack; everything else is sized to its content so the
   description is never the column that gets squeezed. */
#tx-table { table-layout: auto; }
#tx-table th:nth-child(1), #tx-table td:nth-child(1) { width: 32px; padding-left: 12px; }
#tx-table td:nth-child(2) { width: 148px; }        /* date */
#tx-table td:nth-child(3) { width: auto; min-width: 200px; }  /* description — flexes */
#tx-table td:nth-child(4) { width: 104px; }        /* amount */
#tx-table td:nth-child(5) { width: 168px; }        /* bucket */
#tx-table td:nth-child(6) { width: 1%; white-space: nowrap; } /* account */
#tx-table th:nth-child(7), #tx-table td:nth-child(7) { width: 26px; }  /* warn */
#tx-table .row-approve { width: auto; }

/* On phones the wide table would clip the description, so each transaction
   becomes a compact 3-row card via CSS Grid: [date … amount] / [description]
   / [bucket … account]. Grid (not flex-wrap) is deliberate: it places every
   cell in a fixed slot regardless of how wide its content renders, so a
   native control (e.g. iOS's date input) can never unexpectedly wrap onto
   its own line and leave a big empty gap around it. */
@media (max-width: 680px) {
  #tx-table thead { display: none; }
  #tx-table, #tx-table tbody { display: block; }
  #tx-table tr[data-id] {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "check date warn amount"
      "desc  desc desc desc"
      "bucket bucket bucket account";
    align-items: center;
    column-gap: 8px;
    row-gap: 3px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
  }
  #tx-table tr.group-header td { display: block; }
  /* The desktop rules above set a fixed pixel/percent width per column
     (needed for the real <table> layout); those selectors are more specific
     than a bare "#tx-table td" reset, so this has to win with !important or
     several columns silently keep their desktop width/shrink to ~0 on the
     grid, pushing content off the edge of the screen. */
  #tx-table td { padding: 0 !important; border: none !important; min-width: 0 !important; width: auto !important; }
  #tx-table td:nth-child(1) { grid-area: check; }
  #tx-table td:nth-child(2) { grid-area: date; }
  #tx-table td:nth-child(7) { grid-area: warn; }
  #tx-table td:nth-child(4) { grid-area: amount; font-weight: 650; }
  #tx-table td:nth-child(4) input { text-align: right; }
  #tx-table td:nth-child(3) { grid-area: desc; }
  #tx-table td:nth-child(5) { grid-area: bucket; }
  #tx-table td:nth-child(6) { grid-area: account; text-align: right; }
  #tx-table td:nth-child(3) textarea { font-weight: 550; }
  #tx-table tr[data-id] .badge { font-size: 11px; }
}