/* ==========================================================================
   Money manager — visual system
   Ground: deep indigo-navy (Rishtan ceramic dark), income in glaze turquoise,
   expense in clay orange. Signature: the "ledger comb" — a mirrored day chart
   where income grows up and expense grows down from one hairline baseline.
   ========================================================================== */

:root {
  --ink: #0e1422;
  --ink-2: #121a2c;
  --surface: #17203a;
  --surface-2: #1e2947;
  --line: rgba(150, 172, 224, 0.14);
  --line-strong: rgba(150, 172, 224, 0.28);
  --text: #e9edf8;
  --muted: #93a2c4;
  --faint: #63739a;

  --kirim: #3ec9a7;
  --kirim-soft: rgba(62, 201, 167, 0.16);
  --chiqim: #ef8354;
  --chiqim-soft: rgba(239, 131, 84, 0.16);
  --accent: #6b8cff;
  --accent-soft: rgba(107, 140, 255, 0.16);
  --warn: #f2c14e;

  --radius: 14px;
  --radius-sm: 10px;
  --rail: 232px;
  --shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);

  --display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background:
    radial-gradient(1100px 520px at 82% -12%, rgba(107, 140, 255, 0.14), transparent 62%),
    radial-gradient(760px 460px at 4% 104%, rgba(62, 201, 167, 0.08), transparent 60%),
    var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------- shell --- */

.app {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  border-right: 1px solid var(--line);
  padding: 22px 16px 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 26px;
  background: linear-gradient(180deg, rgba(23, 32, 58, 0.6), transparent 45%);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 8px;
}

.brand-mark {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand-sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.14s ease, color 0.14s ease;
}

.rail-link i { font-size: 16px; }
.rail-link:hover { background: var(--surface); color: var(--text); }

.rail-link.is-active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.rail { overflow-y: auto; }

.rail-heading {
  margin: 0 0 6px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rail-user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rail-user form { display: flex; }

.rail-user-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.rail-user-link:hover { background: var(--surface); }

.rail-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}

.rail-user-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rail-user-name strong,
.rail-user-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user-name strong { font-size: 13.5px; color: var(--text); }
.rail-user-name small { font-size: 12px; color: var(--faint); }

.main {
  padding: 28px 32px 48px;
  max-width: 1120px;
  width: 100%;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-title {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  margin: 0 0 6px;
}

.topbar { display: none; }

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

.card {
  background: linear-gradient(180deg, var(--surface), var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

/* Vertical rhythm between top-level blocks. `.card + .card` alone left a grid
   sitting flush against the card after it. */
.card + .card,
.card + .grid,
.grid + .card,
.grid + .grid { margin-top: 18px; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.card-title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

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

.balance {
  background:
    linear-gradient(150deg, rgba(107, 140, 255, 0.18), transparent 52%),
    linear-gradient(180deg, var(--surface), var(--ink-2));
}

.balance-value {
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  /* Tight tracking, but the digit-group spaces stay legible. */
  letter-spacing: -0.03em;
  word-spacing: 0.06em;
  line-height: 1;
  margin: 2px 0 4px;
  overflow-wrap: anywhere;
}

.balance-value .cur {
  font-size: 0.36em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-left: 8px;
  text-transform: uppercase;
}

.balance-note { color: var(--muted); font-size: 13px; margin: 0; }

.split {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.split-item { min-width: 120px; }

.split-label {
  font-size: 12px;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 6px;
}

.split-value {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

.up { color: var(--kirim); }
.down { color: var(--chiqim); }
.neutral { color: var(--muted); }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.dot-in { background: var(--kirim); }
.dot-out { background: var(--chiqim); }

/* ------------------------------------------------------------- period ---- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
}

.stat-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
}

.stat { min-width: 0; }

.stat-value {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 6px;
  white-space: nowrap;
}

/* Period summary: one row per period. Three columns of nine-digit so'm in a
   half-width card either clip or break mid-number — a list does neither. */
.period-list { display: flex; flex-direction: column; }

.period-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.period-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.period-row:first-child { padding-top: 4px; }

.period-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
}

.period-values {
  display: flex;
  gap: 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.stat-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------- signature: the comb --- */

.comb {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 168px;
  padding-top: 4px;
}

.comb-col {
  flex: 1 1 0;
  display: grid;
  grid-template-rows: 1fr 1px 1fr auto;
  gap: 0;
  min-width: 0;
}

.comb-up, .comb-down {
  display: flex;
  min-height: 0;
}

.comb-up { align-items: flex-end; }
.comb-down { align-items: flex-start; }

.comb-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--kirim);
  transform-origin: bottom;
  animation: comb-grow 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.comb-down .comb-bar {
  background: var(--chiqim);
  border-radius: 0 0 3px 3px;
  transform-origin: top;
}

.comb-bar.is-empty { background: var(--line); min-height: 2px; }

.comb-axis { background: var(--line-strong); }

.comb-label {
  text-align: center;
  font-size: 10px;
  color: var(--faint);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}

.comb-col.is-today .comb-label { color: var(--text); font-weight: 700; }

@keyframes comb-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}

.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ----------------------------------------------------------- breakdown --- */

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.donut { width: 150px; height: 150px; flex: none; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 5; }

.donut-center {
  position: relative;
  width: 150px;
  height: 150px;
  flex: none;
}

.donut-center .donut { position: absolute; inset: 0; }

.donut-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.donut-label .amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.03em;
}

.donut-label .caption {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.bars { display: flex; flex-direction: column; gap: 11px; flex: 1 1 240px; min-width: 220px; }

.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }

.bar-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
}

.bar-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-amount { font-size: 13px; font-weight: 600; }
.bar-pct { font-size: 12px; color: var(--faint); }

.bar-track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.bar-fill { height: 100%; border-radius: 99px; }

/* ------------------------------------------------------------- budgets --- */

.budget {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.budget:last-child { border-bottom: 0; padding-bottom: 0; }
.budget:first-child { padding-top: 0; }

.budget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.budget-name { display: flex; align-items: center; gap: 9px; font-weight: 600; }

.budget-meta { font-size: 12px; color: var(--muted); text-align: right; }

.progress {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.progress-fill.is-warn { background: var(--warn); }
.progress-fill.is-over { background: var(--chiqim); }

.budget-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 7px;
}

/* ---------------------------------------------------------------- list --- */

.tx-list { display: flex; flex-direction: column; }

.tx {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
}

/* Category rows have no amount column. */
.tx--cat { grid-template-columns: 38px minmax(0, 1fr) auto; }

/* Full-row tap target — only active on touch layouts, where the inline
   edit/delete buttons are hidden. */
.tx-tap { position: absolute; inset: 0; display: none; border-radius: 8px; }

.tx:last-child { border-bottom: 0; }
.tx:hover { background: rgba(255, 255, 255, 0.02); }

.tx-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-content: center;
  font-size: 17px;
}

.tx-main { min-width: 0; }

.tx-title {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-sub { font-size: 12px; color: var(--faint); }

.tx-amount {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.tx-actions { display: flex; gap: 2px; opacity: 0.55; transition: opacity 0.14s ease; }
.tx:hover .tx-actions, .tx:focus-within .tx-actions { opacity: 1; }

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-content: center;
  font-size: 15px;
  font-family: inherit;
}

.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.is-danger:hover { background: var(--chiqim-soft); color: var(--chiqim); }

/* Armed state of a two-step delete button (see money.js). */
.icon-btn.is-armed,
.btn.is-armed {
  width: auto;
  padding: 0 12px;
  height: 32px;
  background: var(--chiqim-soft);
  border-color: var(--chiqim);
  color: var(--chiqim);
  font-size: 12.5px;
  font-weight: 700;
}

/* -------------------------------------------------------------- pieces --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.14s ease, border-color 0.14s ease;
}

.btn:hover { background: #24304f; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: #0b1020;
}

.btn-primary:hover { background: #7f9cff; }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface); }

.btn-danger { background: transparent; border-color: rgba(239, 131, 84, 0.4); color: var(--chiqim); }
.btn-danger:hover { background: var(--chiqim-soft); }

.btn-sm { padding: 7px 12px; font-size: 13px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.pill:hover { color: var(--text); border-color: var(--line-strong); }

.pill.is-active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--text);
}

.pill-row { display: flex; gap: 7px; flex-wrap: wrap; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tag-in { background: var(--kirim-soft); color: var(--kirim); }
.tag-out { background: var(--chiqim-soft); color: var(--chiqim); }
.tag-muted { background: rgba(255, 255, 255, 0.05); color: var(--faint); }

.empty {
  text-align: center;
  padding: 34px 18px;
  color: var(--muted);
}

.empty i { font-size: 26px; color: var(--faint); display: block; margin-bottom: 10px; }
.empty p { margin: 0 0 14px; font-size: 14px; }

/* --------------------------------------------------------------- forms --- */

/* Forms are one column of fields — centre them instead of stranding the card
   against the left edge of a wide page. */
.form-card { max-width: 560px; margin-inline: auto; }
.page-head--narrow { max-width: 560px; margin-inline: auto; width: 100%; }

.field { margin-bottom: 16px; }

.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  margin-bottom: 7px;
}

.field-input,
select.field-input {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--ink-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.field-input:focus {
  border-color: var(--accent);
  background: #141c31;
  outline: none;
}

.field-input::placeholder { color: var(--faint); }

/* Native date/number controls are white-on-white in dark mode without this.
   On touch devices the native picker is what you get — it's better than
   anything scripted here. */
.field-input[type='date'] { color-scheme: dark; }

/* ------------------------------------------------------- date picker --- */

.dp { position: relative; }

/* The real field stays in the DOM (and still posts) once enhanced. */
.dp .dp-native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.dp-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  min-height: 45px;             /* matches a .field-input, so rows stay aligned */
}

.dp-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-trigger i { color: var(--muted); font-size: 15px; }
.dp-trigger:hover { border-color: var(--line-strong); background: #141c31; }
.dp-trigger.is-empty .dp-value { color: var(--faint); }
.dp-trigger[aria-expanded='true'] { border-color: var(--accent); }

.dp-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 290px;
  max-width: calc(100vw - 36px);
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.85);
}

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.dp-month {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
}

.dp-nav {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-content: center;
  font-family: inherit;
}

.dp-nav:hover { background: var(--surface); color: var(--text); }

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-dow {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  padding-bottom: 6px;
}

.dp-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s ease;
}

.dp-day:hover { background: var(--surface); }
.dp-day.is-today { color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }

.dp-day.is-selected {
  background: var(--accent);
  color: #0b1020;
  font-weight: 700;
  box-shadow: none;
}

.dp-foot {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* In the filter row the panel would otherwise open past the card edge. */
.filters .dp-panel { right: 0; left: auto; }

.field-amount .field-input {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 14px;
}

.field-error {
  color: var(--chiqim);
  font-size: 12.5px;
  margin-top: 6px;
}

.field-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.input-wrap { position: relative; }
.field-amount .field-input { padding-right: 74px; }

.field-hint { color: var(--faint); font-size: 12.5px; margin-top: 6px; }

.field-hint a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Radio pills: the RadioSelect renders <li><label><input>…, so style by input. */
.choice-row { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

.choice-row li { margin: 0; }

.choice-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.choice-row input { accent-color: var(--accent); }

.choice-row label:hover { color: var(--text); }

.choice-row label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

.choice-row.kind label:has(input[value='income']:checked) {
  background: var(--kirim-soft);
  border-color: var(--kirim);
}

.choice-row.kind label:has(input[value='expense']:checked) {
  background: var(--chiqim-soft);
  border-color: var(--chiqim);
}

.swatches { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

.swatches label {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}

/* The radio itself is invisible but still focusable — the label is the target. */
.swatches input,
.icon-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.swatches label:has(input:checked) { border-color: var(--text); }
.swatches label:has(input:checked)::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
}

.swatches label:has(input:focus-visible),
.icon-picker label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.icon-picker { display: flex; gap: 7px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

.icon-picker label {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: grid;
  place-content: center;
  cursor: pointer;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 16px;
}

.icon-picker label:hover { color: var(--text); }

.icon-picker label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

.filters .field { margin-bottom: 0; }

/* -------------------------------------------------------------- alerts --- */

.msgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
}

.msg.success { border-color: rgba(62, 201, 167, 0.35); background: var(--kirim-soft); }
.msg.error { border-color: rgba(239, 131, 84, 0.4); background: var(--chiqim-soft); }

/* --------------------------------------------------------------- pager --- */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* ------------------------------------------------------------ mobile ----- */

.tabbar { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(14, 20, 34, 0.92);
    backdrop-filter: blur(10px);
  }

  .main { padding: 18px 16px 108px; }
  .card { padding: 17px; }
  .grid { gap: 14px; }
  .card + .card, .card + .grid, .grid + .card, .grid + .grid { margin-top: 14px; }
  .grid-hero, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }

  .tabbar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: rgba(18, 26, 44, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--faint);
    padding: 5px 2px;
    border-radius: 10px;
  }

  .tab i { font-size: 19px; }

  .tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tab.is-active { color: var(--text); }

  .tab-add {
    color: #0b1020;
  }

  .tab-add i {
    background: var(--accent);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    margin-top: -16px;
    box-shadow: 0 8px 20px -8px var(--accent);
    font-size: 22px;
  }

  .tab-add span { color: var(--faint); }

  .tx { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .tx-actions { display: none; }
  .tx-tap { display: block; }
  /* Categories stay manageable on a phone — no edit page shortcut for them. */
  .tx--cat .tx-actions { display: flex; opacity: 1; }
  .tx--cat .tx-tap { display: none; }
  .comb { height: 132px; }
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 10px; }
  .stat-value { font-size: 16px; }
}

@media (max-width: 420px) {
  .stat-row { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- ai yordamchi --- */

.ai-card textarea.field-input {
  min-height: 108px;
  resize: vertical;
  line-height: 1.55;
}

.ai-model {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--faint);
  background: rgba(107, 140, 255, 0.1);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
}

.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -4px 0 16px;
}

.chip {
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.chip:hover { color: var(--text); border-color: var(--line-strong); }

.ai-actions { align-items: center; gap: 12px; flex-wrap: wrap; }

.ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.ai-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.ai-toggle:hover { color: var(--text); }

.btn.is-busy { opacity: 0.65; cursor: progress; }

/* --- review rows ------------------------------------------------------- */

.draft-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

.draft {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-2);
}

/* An unticked row stays readable but visibly out of the save. */
.draft:has(.draft-check input:not(:checked)) { opacity: 0.5; }

.draft-check input { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 26px; }

.draft-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.draft-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

.draft-cell { min-width: 0; }

.draft-cell .field-label { display: block; margin-bottom: 5px; }

.draft-amount .field-input { padding-right: 62px; text-align: right; }

.draft .field-error { margin-top: 4px; }

/* --- q&a --------------------------------------------------------------- */

.ai-chat { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }

.ai-turn { display: flex; flex-direction: column; gap: 8px; }

.ai-q, .ai-a { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; }

.ai-q { color: var(--text); font-weight: 600; }
.ai-a { color: var(--muted); }

.ai-q i, .ai-a i {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-content: center;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--faint);
}

.ai-a i { background: var(--accent-soft); color: var(--accent); }

.ai-ask { display: flex; gap: 10px; align-items: flex-start; }
.ai-ask .btn { flex: none; }

@media (max-width: 700px) {
  .draft-line { grid-template-columns: minmax(0, 1fr); }
  .ai-ask { flex-direction: column; }
  .ai-ask .btn { width: 100%; justify-content: center; }
}

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

/* The sign-in page is site-wide (/login/), so it speaks for the whole
   kabinet rather than for the money manager alone: a pitch on the left, the
   card on the right, stacked on a phone. */

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 24px;
  position: relative;
}

/* A soft glow behind the page, not a picture — stays cheap and on-palette. */
.login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(600px 420px at 12% 18%, rgba(107, 140, 255, 0.16), transparent 70%),
    radial-gradient(520px 380px at 88% 86%, rgba(62, 201, 167, 0.10), transparent 70%),
    var(--ink);
}

.login-intro { min-width: 0; }

.login-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.login-brand img { border-radius: 50%; }

.login-pitch h2 {
  margin: 44px 0 12px;
  font-family: var(--display);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.login-pitch p { margin: 0; max-width: 400px; color: var(--muted); font-size: 15.5px; }

.login-features {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.login-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(23, 32, 58, 0.45);
  min-width: 0;
}
.login-features li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.login-features strong { font-size: 14px; }
.login-features small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lf-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 17px;
}
.login-features li:nth-child(2) .lf-icon { background: var(--kirim-soft); color: var(--kirim); }
.login-features li:nth-child(3) .lf-icon { background: rgba(242, 193, 78, 0.14); color: var(--warn); }
.login-features li:nth-child(4) .lf-icon { background: var(--chiqim-soft); color: var(--chiqim); }

.login-card {
  width: 100%;
  /* Grid items are min-width:auto, and Google's button iframe has a wider
     intrinsic size than a 320px phone leaves — without this the card is sized
     by the iframe and hangs off both edges. */
  min-width: 0;
  background: linear-gradient(180deg, var(--surface), var(--ink-2));
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 34px 30px 26px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}

.login-title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 6px;
}

.login-sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }

.login-input { position: relative; }
.login-input > i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 15px;
  pointer-events: none;
}
.login-input .field-input { padding-left: 38px; }
.login-input:has(.login-eye) .field-input { padding-right: 44px; }
.login-input:focus-within > i { color: var(--accent); }

.login-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}
.login-eye:hover { color: var(--text); background: var(--surface-2); }

.login-submit { width: 100%; margin-top: 4px; padding: 12px 16px; font-size: 15px; }

.login-back {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}

.login-back:hover { color: var(--text); }

@media (max-width: 860px) {
  .login-page {
    grid-template-columns: minmax(0, 1fr);
    max-width: 460px;
    align-content: start;
    gap: 22px;
    padding: 22px 16px 32px;
  }
  /* On a phone the form comes first: brand, card, then what you get. */
  .login-intro { display: contents; }
  .login-brand { order: 0; justify-self: start; }
  .login-card { order: 1; }
  .login-pitch { order: 2; margin-top: 10px; }
  .login-features { order: 3; }
  .login-pitch h2 { margin: 0 0 8px; font-size: 26px; }
  .login-pitch br { display: none; }
  .login-features { margin-top: 0; gap: 8px; }
  .login-features li { padding: 10px; gap: 10px; }
  .login-features small { display: none; }
  .lf-icon { width: 30px; height: 30px; font-size: 15px; }
  .login-card { padding: 26px 20px 20px; }
}

@media (max-width: 360px) {
  .login-features { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Sign-in: Google button + the "or" divider ─────────────────────────── */
.gbtn-block[hidden] { display: none !important; }

/* Google renders its button in an iframe whose corners we can't style, so the
   wrapper clips them to the same radius as the app's own buttons. Width is set
   from JS to match the form, which is why nothing is fixed here. */
.gbtn-wrap {
  display: flex;
  justify-content: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 44px;
  /* The iframe must never be what decides how wide this page is. */
  max-width: 100%;
  min-width: 0;
}

.gbtn-wrap > div { border-radius: var(--radius-sm); overflow: hidden; }

.login-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.login-or::before,
.login-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.login-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.msg.error[hidden] { display: none !important; }