/* ------------------------------------------------------------------ */
/* tokens                                                              */
/* ------------------------------------------------------------------ */

/*
 * Dark is the default, so it lives on :root with no attribute to match. Light
 * is the override. Everything below this block is written against the tokens
 * alone — no literal colour appears anywhere else in the file, which is what
 * makes a second theme a swap rather than a rewrite.
 */
:root {
  color-scheme: dark;

  --bg: #12161d;
  --surface: #181e27;
  --surface-2: #1f2733;
  --line: #2b3543;
  --line-strong: #4a5768;
  --ink: #e6ebf2;
  --ink-soft: #a3b0c2;
  --ink-faint: #7a8799;

  --accent: #5b9dff;
  --accent-strong: #7db0ff;
  --accent-soft: #1b2b45;
  --on-accent: #0d1420;

  --money-out: #ff7b7b;
  --money-in: #4ed88b;

  --paid: #1f5e37;
  --paid-soft: #17351f;
  --paid-line: #2f7a4b;

  --warn: #e8b45f;
  --warn-soft: #3a2e14;

  --danger-soft: #2e1618;
  --danger-line: #5a2a2e;

  /* The heavy rules the spreadsheet drew in black. On a dark ground a white
     rule is shouting, so the dark theme steps them down a notch. */
  --rule: var(--line-strong);

  --period-bar: #232c39;
  --pill-closed: #232c39;

  --toast-bg: #2b3543;
  --toast-ink: #e6ebf2;
  --overlay: rgba(4, 7, 12, .66);

  /* How much of a person's colour to let through. Their stored colours are
     pastels picked for a white page, so on a dark ground they are mixed down
     hard — full strength would be a glowing block with unreadable text. */
  --tint-head-mix: 26%;
  --tint-cell-mix: 11%;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28);
  --modal-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --line: #dbe1ea;
  --line-strong: #9aa6b8;
  --ink: #1a2230;
  --ink-soft: #5b6879;
  --ink-faint: #8592a3;

  --accent: #2f6fd0;
  --accent-strong: #2560bb;
  --accent-soft: #e8f0fc;
  --on-accent: #ffffff;

  --money-out: #b4232b;
  --money-in: #16794a;

  --paid: #7ee081;
  --paid-soft: #d8f7d9;
  --paid-line: #b7e7bb;

  --warn: #a8620d;
  --warn-soft: #fdf1df;

  --danger-soft: #fdf2f2;
  --danger-line: #eccdcf;

  --rule: var(--ink);

  --period-bar: #eef2f7;
  --pill-closed: #eceff3;

  --toast-bg: #1a2230;
  --toast-ink: #ffffff;
  --overlay: rgba(15, 23, 35, .45);

  --tint-head-mix: 88%;
  --tint-cell-mix: 22%;

  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --modal-shadow: 0 20px 50px rgba(16, 24, 40, .25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ */
/* chrome                                                              */
/* ------------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.brand-mark { font-size: 18px; }

.tabs, .subtabs { display: flex; gap: 4px; }

.tab {
  border: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: 6px;
  font: inherit;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
}

.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.subtabs { margin-bottom: 16px; border-bottom: 1px solid var(--line); }

.subtab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 8px 14px;
  font: inherit;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: -1px;
}

.subtab:hover { color: var(--ink); }
.subtab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.topbar-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.session {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 13px;
}

.theme-toggle { display: flex; padding: 6px; border-radius: 6px; }
.theme-toggle svg { display: block; }

/* Show the destination, not the current state: the sun offers daylight. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

main { padding: 20px; max-width: 1500px; margin: 0 auto; }

.panel { animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.loading { padding: 40px; text-align: center; color: var(--ink-faint); }

/* ------------------------------------------------------------------ */
/* controls                                                            */
/* ------------------------------------------------------------------ */

.toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar-spacer { flex: 1; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); font-weight: 600; }

/* Listed by type rather than as a bare `input`, because the grid's cells are
   untyped inputs that must stay transparent and borderless. */
select, textarea,
input[type="text"], input[type="password"], input[type="email"],
input[type="date"], input[type="number"], input[type="search"] {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
}

select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.btn {
  font: inherit;
  font-weight: 550;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 7px 13px;
  border-radius: 6px;
  cursor: pointer;
}

.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--money-out); border-color: var(--danger-line); }
.btn.danger:hover { background: var(--danger-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.icon-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
}

.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.month-status { font-size: 12px; color: var(--ink-faint); }

/* ------------------------------------------------------------------ */
/* cards                                                               */
/* ------------------------------------------------------------------ */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

.card h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.card .big { font-size: 26px; font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.card .rows { margin-top: 10px; display: grid; gap: 5px; font-size: 13px; }
.card .rows div { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); }
.card .rows b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.card .rows .acct { min-width: 118px; font-weight: 600; font-size: 12px; }
.card .big { font-family: var(--mono); }

.person-card { border-top: 3px solid var(--tint, var(--accent)); }

/* ------------------------------------------------------------------ */
/* section blocks                                                      */
/* ------------------------------------------------------------------ */

.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.block > header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.block > header h2 { margin: 0; font-size: 14px; font-weight: 640; }
.block > header .spacer { flex: 1; }
.block-body { padding: 16px; }

.empty { padding: 28px; text-align: center; color: var(--ink-faint); }

/* ------------------------------------------------------------------ */
/* the budget grid                                                     */
/* ------------------------------------------------------------------ */

.grid-wrap { overflow-x: auto; }

table.grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 720px;
  font-variant-numeric: tabular-nums;
}

table.grid th, table.grid td {
  border-bottom: 1px solid var(--line);
  padding: 0;
  text-align: left;
}

table.grid thead th {
  background: var(--surface-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  /* These name whose column is whose, so they are a step stronger than the
     other small-caps labels — at 11px, faint grey does not clear AA. */
  color: var(--ink-soft);
  font-weight: 650;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-strong);
}

table.grid thead th.person-head {
  text-align: center;
  color: var(--ink);
  font-size: 12px;
  background: color-mix(in srgb, var(--tint) var(--tint-head-mix), var(--surface));
  border-left: 1px solid var(--line);
}

.col-grip { width: 26px; }
.col-due { width: 62px; }
.col-item { width: 200px; }
.col-amount { width: 130px; }
.col-note { width: 110px; }
.col-paid { width: 42px; text-align: center; }
.col-paidon { width: 56px; }

/* Kept quiet: it is a record of what happened, not something you read down the
   column, and it should never compete with the amounts. */
.cell-paidon { text-align: right; font-size: 12px; color: var(--ink-soft); }
.cell-paidon::placeholder { color: var(--line-strong); }
.col-actions { width: 88px; }

/* Cell inputs sit flush so the table reads as a sheet, not a form. */
.cell-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 0;
  padding: 7px 10px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.cell-input:hover { background: var(--surface-2); }
.cell-input:focus { background: var(--surface); border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -2px; }

.cell-amount { text-align: right; font-family: var(--mono); font-size: 13px; }
.cell-amount.is-out { color: var(--money-out); }
.cell-amount.is-in { color: var(--money-in); font-weight: 600; }
.cell-amount.is-zero { color: var(--ink-faint); }
.cell-note { font-size: 12px; color: var(--ink-soft); }

/* A note wider than its column gets a marker offering the whole text. It only
   appears when something is genuinely cut off, so an empty or short note keeps
   the cell clean. */
td.note-cell { position: relative; }

.note-expand {
  display: none;
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 4px 2px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  line-height: 1.1;
  cursor: pointer;
}

td.note-cell.is-clipped .note-expand { display: block; }

/* Make room so the marker never sits on top of the words it is hiding. */
td.note-cell.is-clipped .cell-note { padding-right: 24px; }

.note-expand:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.note-box {
  width: 100%;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
  padding: 9px 11px;
}

td.person-cell { background: color-mix(in srgb, var(--tint) var(--tint-cell-mix), var(--surface)); border-left: 1px solid var(--line); }

/* Accounting format keeps the currency symbol away from the digits, pinned to
   the left edge of the cell while the number stays hard right. An input cannot
   align two things at once, so the $ is drawn by the cell around it. */
td.amount-cell { position: relative; }

td.amount-cell::before {
  content: '$';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  pointer-events: none;
}

td.amount-cell .cell-amount { padding-left: 22px; }

/* While you are typing, the cell holds a formula rather than a currency
   amount, so the symbol steps out of the way. */
td.amount-cell:focus-within::before { opacity: 0; }
td.amount-cell:focus-within .cell-amount { padding-left: 10px; }

/* The same format for the figures that are not inputs. */
.acct {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.acct i { font-style: normal; color: var(--ink-faint); font-weight: 400; }
.acct b { font-weight: inherit; }
.acct.money-out { color: var(--money-out); }
.acct.money-in { color: var(--money-in); }
.acct.muted { color: var(--ink-faint); }

/* A row built from a vendor carries a small link mark, so it is obvious which
   rows will have their due dates worked out for them next month. Clicking it
   opens the row options, where the link can be changed or removed. */
td.item-cell { position: relative; }

.link-mark {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: .75;
}

.link-mark:hover { color: var(--accent); opacity: 1; }
td.item-cell.is-linked .cell-input { padding-left: 27px; }

tr.row-paid td.item-cell { background: var(--paid); }
tr.row-paid td.item-cell .cell-input { font-weight: 600; }
tr.row-paycheck td { background: var(--surface-2); }
tr.row-paycheck td.item-cell .cell-input { font-weight: 680; }
tr.row-overdue td.due-cell { background: var(--warn-soft); color: var(--warn); font-weight: 640; }

td.due-cell .cell-input { text-align: right; font-size: 12px; color: var(--ink-soft); }
/* Drag handle. The row is only made draggable while this is held, so text
   selection inside the cells keeps working the rest of the time. */
td.grip-cell { text-align: center; }

.row-grip {
  display: inline-block;
  padding: 4px 2px;
  color: var(--line-strong);
  cursor: grab;
  user-select: none;
  font-size: 13px;
  line-height: 1;
  opacity: .35;
  transition: opacity .1s;
}

tr:hover .row-grip { opacity: 1; }
.row-grip:active { cursor: grabbing; }

tr.is-dragging { opacity: .4; }
tr.drop-before td { box-shadow: inset 0 2px 0 0 var(--accent); }
tr.drop-after td { box-shadow: inset 0 -2px 0 0 var(--accent); }

.move-row { display: flex; gap: 6px; flex-wrap: wrap; }
.move-row .btn { padding: 6px 10px; font-size: 13px; }

td.actions { text-align: right; white-space: nowrap; padding-right: 6px; }
/* Faint rather than absent: the row controls have to be discoverable without
   having to hover a row to find out they exist. */
td.actions .icon-btn { opacity: .4; transition: opacity .1s; }
tr:hover td.actions .icon-btn { opacity: 1; }

/* The bold lines the spreadsheet draws where a pay period ends. */
tr.period-bar td {
  background: var(--period-bar);
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
  padding: 7px 10px;
  font-weight: 650;
  font-family: var(--mono);
  font-size: 13px;
}

tr.period-bar td.label { font-family: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
tr.period-bar td.amount { padding-left: 9px; padding-right: 10px; }

/* The working between the month's end and the bank figure. Deliberately quiet:
   it is an explanation, not a result. */
tr.addback-bar td { background: var(--surface); padding: 6px 10px; border-bottom: 0; color: var(--ink-soft); font-weight: 500; }
tr.addback-bar td.label { font-size: 12px; }
tr.addback-bar td.amount { padding-left: 9px; padding-right: 10px; font-size: 12px; }
tr.addback-bar .acct { color: var(--ink-soft); }
tr.addback-bar .acct i { color: var(--line-strong); }

/* The reconciliation line: what the bank should say, as opposed to what there
   was to spend. Tinted so it reads as a different kind of figure from the
   pay-period subtotals above it. */
tr.bank-bar td { background: var(--accent-soft); border-bottom: 1px solid var(--line); padding: 8px 10px; font-weight: 650; }
tr.bank-bar td.label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
tr.bank-bar td.label small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-faint); font-size: 11px; margin-top: 1px; }
tr.bank-bar td.amount { padding-left: 9px; padding-right: 10px; }

tr.start-bar td { background: var(--surface-2); border-bottom: 2px solid var(--rule); font-weight: 650; font-family: var(--mono); }
tr.start-bar td.label { font-family: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
tr.start-bar td.amount { padding-left: 9px; padding-right: 10px; }

.add-row-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.add-row-hint { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.add-row-hint b { font-family: var(--mono); color: var(--ink-soft); font-weight: 600; }

/* ------------------------------------------------------------------ */
/* balance header                                                      */
/* ------------------------------------------------------------------ */

.balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 18px; }

.balance-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tint);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.balance-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 640; }
.balance-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.balance-line label { font-size: 12px; color: var(--ink-soft); }
.balance-line input { width: 120px; text-align: right; font-family: var(--mono); font-size: 13px; }
.balance-total { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; font-weight: 650; font-variant-numeric: tabular-nums; }
.balance-total .acct { min-width: 130px; }
.carry-hint { font-size: 11px; color: var(--ink-faint); margin-top: 6px; }
.carry-hint button { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* ------------------------------------------------------------------ */
/* plain tables (settings, overview lists)                             */
/* ------------------------------------------------------------------ */

table.list { width: 100%; border-collapse: collapse; }
table.list th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  font-weight: 650;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
table.list th.num { text-align: right; }
table.list td { padding: 8px 12px; border-bottom: 1px solid var(--line); }
table.list tr:last-child td { border-bottom: 0; }
table.list tr:hover td { background: var(--surface-2); }
table.list td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13px; }
/* In a wide table cell the span must hug its number, or the $ ends up
   stranded against the far edge instead of beside the amount. */
table.list td.num .acct { display: inline-flex; min-width: 112px; }
table.list td.actions { text-align: right; white-space: nowrap; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.pill.overdue { background: var(--danger-soft); color: var(--money-out); border-color: var(--danger-line); }
.pill.paid { background: var(--paid-soft); color: var(--money-in); border-color: var(--paid-line); }
.pill.closed { background: var(--pill-closed); }

.money-out { color: var(--money-out); }
.money-in { color: var(--money-in); }
.muted { color: var(--ink-faint); }

/* ------------------------------------------------------------------ */
/* trend chart                                                         */
/* ------------------------------------------------------------------ */

.chart { width: 100%; height: 220px; display: block; }
.chart .bar-in { fill: var(--money-in); opacity: .8; }
.chart .bar-out { fill: var(--money-out); opacity: .75; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--line-strong); stroke-width: 1; }
.chart text { font-size: 10px; fill: var(--ink-faint); }
.chart-legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

.bar-row { display: grid; grid-template-columns: 130px 1fr 110px; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 13px; }
.bar-row .acct { font-size: 12px; }
.bar-track { background: var(--surface-2); border-radius: 4px; height: 18px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); opacity: .75; }

/* ------------------------------------------------------------------ */
/* modal                                                               */
/* ------------------------------------------------------------------ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
}

/* A class-level display beats the user agent's [hidden] rule, so say it again. */
.modal-backdrop[hidden] { display: none; }

.modal {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--modal-shadow);
  width: min(560px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 640; flex: 1; }
.modal-body { padding: 18px; overflow-y: auto; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); font-weight: 550; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.form-hint { font-size: 12px; color: var(--ink-faint); margin: 0 0 14px; }
.form-error { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--money-out); padding: 9px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }

.radio-row { display: flex; flex-direction: column; gap: 8px; }
.radio-row label { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 500; color: var(--ink); }
.radio-row small { display: block; color: var(--ink-faint); font-weight: 400; }

/* ------------------------------------------------------------------ */
/* toast                                                               */
/* ------------------------------------------------------------------ */

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--toast-bg);
  color: var(--toast-ink);
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 80;
  box-shadow: var(--modal-shadow);
}

.toast.error { background: var(--money-out); }

/* ------------------------------------------------------------------ */
/* login                                                               */
/* ------------------------------------------------------------------ */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 28px; width: min(380px, 100%); }
.login-card h1 { margin: 0 0 4px; font-size: 19px; }
.login-card p.sub { margin: 0 0 20px; color: var(--ink-faint); font-size: 13px; }
.login-card label { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.login-card input { width: 100%; margin-top: 5px; padding: 9px 11px; }
.login-card button { width: 100%; padding: 10px; }

@media (max-width: 720px) {
  .topbar { gap: 12px; padding: 0 12px; }
  .brand span:not(.brand-mark) { display: none; }
  main { padding: 12px; }
  .form-grid { grid-template-columns: 1fr; }
}