/* Cashflow — one visual system: warm paper ground, white cards, spruce accent,
   red ink only for "over". Hanken Grotesk everywhere, tabular figures for money. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --surface-2: #EDEAE2;
  --border: #E2DED3;
  --ink: #20312A;
  --ink-2: #57675E;
  --ink-3: #94A099;         /* disabled only */
  --brand: #166B4D;
  --brand-deep: #0E4A36;
  --brand-tint: #E0EDE6;
  --red: #B0382A;
  --red-tint: #F8E7E3;
  --track: #E6E2D7;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 10px rgba(32, 49, 42, 0.07), 0 1px 3px rgba(32, 49, 42, 0.05);
  --shadow-raised: 0 6px 20px rgba(32, 49, 42, 0.16), 0 2px 6px rgba(32, 49, 42, 0.10);
  --font: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.icon { display: inline-flex; width: 22px; height: 22px; flex: none; }
.icon svg { width: 100%; height: 100%; }
.icon.inline { width: 16px; height: 16px; vertical-align: -3px; }
.icon.dim { color: var(--ink-2); }
.icon.spin svg { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.grow { flex: 1 1 auto; min-width: 0; }

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

#app { min-height: 100dvh; }
.boot-splash { min-height: 100dvh; background: var(--bg); }

.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.screen {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom));
}

/* ---------- banners ---------- */

.banner {
  display: flex; gap: 10px; align-items: center;
  background: var(--ink); color: #F3F1EA;
  padding: 10px max(16px, env(safe-area-inset-left));
  padding-top: max(10px, env(safe-area-inset-top));
  font-size: 0.9rem; font-weight: 500;
}
.banner .icon { color: #E8C77C; }
.banner-warn { background: #5C4708; cursor: pointer; }

/* ---------- headers ---------- */

.month-head { padding: 6px 0 14px; }
.hh-name {
  font-size: 0.85rem; font-weight: 600; color: var(--ink-2);
  letter-spacing: 0.01em;
}
.month-nav { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.month-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--ink-2);
}
.icon-btn:active { background: var(--surface-2); }
.icon-btn-spacer { width: 44px; }
.year-link { margin-top: 2px; padding-left: 0; }

.detail-head { display: flex; align-items: center; gap: 6px; padding: 6px 0 12px; }
.detail-title {
  flex: 1; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}

/* ---------- hero ---------- */

.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px 18px;
  margin-bottom: 12px;
}
.hero-label {
  font-size: 0.9rem; font-weight: 600; color: var(--ink-2);
}
.hero-amount {
  font-size: clamp(2.4rem, 11vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-deep);
  margin: 2px 0 4px;
}
.hero-amount.neg, .hero-amount-sm.neg, .cat-left.neg, .year-diff.neg { color: var(--red); }
.hero-amount-sm {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--brand-deep); margin: 2px 0 4px;
}
.hero-sub { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.hero-neg { border-color: #EAC8C1; }
.hero-compact { padding: 16px 18px 16px; }

/* ---------- bars ---------- */

.bar { height: 8px; background: var(--track); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--brand); border-radius: 99px; }
.bar-fill.bar-over { background: var(--red); }

/* ---------- income strip ---------- */

.income-strip {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 0.95rem; font-weight: 500;
  text-align: left;
}
.income-strip .icon { color: var(--brand); }
.income-strip strong { font-variant-numeric: tabular-nums; font-weight: 700; }
.income-strip:active { filter: brightness(0.97); }

/* ---------- install nudge ---------- */

.nudge {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.nudge-body strong { font-size: 0.95rem; }
.nudge-body p { font-size: 0.88rem; color: var(--ink-2); margin-top: 2px; }

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

.cat-list { display: flex; flex-direction: column; gap: 8px; }
.section-label {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 18px 4px 8px;
}
.cat-row-unfunded {
  border-style: dashed;
  box-shadow: none;
  background: transparent;
  padding: 10px 14px;
}
.cat-row-unfunded .cat-name { color: var(--ink-2); font-weight: 500; }
.set-budget-chip {
  flex: none;
  font-size: 0.82rem; font-weight: 600;
  color: var(--brand-deep);
  background: var(--brand-tint);
  border-radius: 99px;
  padding: 4px 12px;
}
.hidden-tag {
  margin-left: 8px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--surface-2); color: var(--ink-2);
  border-radius: 99px; padding: 2px 8px;
  vertical-align: 2px;
}
.hidden-list { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.hidden-list-label { margin-bottom: 0; }
.dim-row { color: var(--ink-2); }
.cat-row {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  text-align: left;
  transition: transform 0.12s ease-out;
}
.cat-row:active { transform: scale(0.985); }
.cat-row-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.cat-name {
  font-weight: 600; font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-left {
  font-weight: 700; font-size: 0.98rem; color: var(--brand-deep);
  font-variant-numeric: tabular-nums; flex: none;
}
.cat-row-sub {
  display: flex; justify-content: space-between;
  font-size: 0.84rem; color: var(--ink-2);
  margin: 1px 0 8px; font-variant-numeric: tabular-nums;
}

/* ---------- transactions ---------- */

.row-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.tx-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tx-row {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.tx-row:last-child { border-bottom: 0; }
.tx-row:active { background: var(--surface-2); }
.tx-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tx-note {
  font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-date { font-size: 0.82rem; color: var(--ink-2); }
.tx-amount { font-weight: 700; font-variant-numeric: tabular-nums; }

.member-dot {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--dot, var(--brand));
  color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
}
.member-dot.sm { width: 24px; height: 24px; font-size: 0.65rem; }

/* ---------- empty states ---------- */

.empty {
  text-align: center;
  padding: 36px 24px;
  color: var(--ink-2);
  font-size: 0.95rem;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}

/* ---------- year ---------- */

.year-totals { display: flex; gap: 8px; margin-bottom: 12px; }
.year-total-card {
  flex: 1;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.year-total-label { font-size: 0.82rem; color: var(--ink-2); font-weight: 500; }
.year-total-card strong { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.year-list {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.year-row {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.year-row:last-child { border-bottom: 0; }
.year-row:active { background: var(--surface-2); }
.year-month { width: 36px; font-weight: 700; color: var(--ink-2); flex: none; }
.year-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.year-sub { font-size: 0.8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.year-diff { font-weight: 600; font-size: 0.88rem; font-variant-numeric: tabular-nums; flex: none; }
.year-diff.pos { color: var(--brand-deep); }

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.card-sub { font-size: 0.88rem; color: var(--ink-2); margin-bottom: 10px; }
.plain-list { display: flex; flex-direction: column; }
.member-row, .goal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.plain-list li:last-child { border-bottom: 0; }
.you-tag {
  margin-left: 8px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--brand-tint); color: var(--brand-deep);
  border-radius: 99px; padding: 2px 8px;
}
.dim-amount { color: var(--ink-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; flex: none; }
.struck { text-decoration: line-through; color: var(--ink-2); }

.goal-check {
  width: 26px; height: 26px; flex: none;
  border: 2px solid var(--border); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.goal-check.done { background: var(--brand); border-color: var(--brand); }
.goal-check .icon { width: 16px; height: 16px; }

.invite-row { display: flex; align-items: center; gap: 10px; }
.invite-code {
  flex: 1;
  font-size: 1.5rem; font-weight: 800; letter-spacing: 0.18em;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.data-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sync-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.88rem; color: var(--ink-2);
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
/* Signing out is safe, not destructive — red stays reserved for "over". */
.signout { margin: 4px auto 0; color: var(--ink-2); display: flex; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem;
  border-radius: 12px;
  padding: 11px 16px;
  min-height: 44px;
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 18px; height: 18px; }
.btn-big { width: 100%; padding: 14px 18px; font-size: 1.02rem; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.btn-primary:active { filter: brightness(0.92); }
.btn-primary:disabled { background: var(--ink-3); box-shadow: none; cursor: default; transform: none; }
.btn-secondary { background: var(--brand-tint); color: var(--brand-deep); }
.btn-secondary:active { filter: brightness(0.95); }
.btn-ghost { background: transparent; color: var(--brand-deep); padding: 8px 10px; min-height: 40px; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--red); }
.btn-danger-ghost:active { background: var(--red-tint); }

.row-x {
  width: 38px; height: 38px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--ink-2);
}
.row-x:active { background: var(--surface-2); }
.row-x .icon { width: 17px; height: 17px; }

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

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field-label { font-size: 0.88rem; font-weight: 600; color: var(--ink-2); }
.field-hint {
  display: flex; gap: 8px; align-items: center;
  font-size: 0.85rem; color: var(--ink-2); margin: 4px 0 10px;
}
.field-hint .icon { width: 16px; height: 16px; flex: none; }
.input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  min-height: 46px;
  font-size: 1rem;
}
.input::placeholder { color: var(--ink-2); opacity: 1; }
.input:focus { border-color: var(--brand); outline: none; }
.input-code { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; text-align: center; }
.form-error {
  background: var(--red-tint); color: var(--red);
  font-size: 0.9rem; font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 12px;
}

.money-input { position: relative; width: 110px; flex: none; }
.money-sign {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); font-weight: 600; pointer-events: none;
}
.input-money { padding-left: 24px; text-align: right; font-variant-numeric: tabular-nums; }

.toggle-row {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; font-size: 0.92rem;
}
.toggle-row input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; margin-top: 1px; }

/* ---------- onboarding ---------- */

.onb {
  min-height: 100dvh;
  max-width: 560px; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.onb-hero { text-align: center; padding: 7vh 0 4vh; }
.brand-mark {
  width: 76px; height: 76px; margin: 0 auto 16px;
  background: var(--brand); color: #fff;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-raised);
}
.brand-mark .icon { width: 40px; height: 40px; }
.onb-title { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; }
.onb-tag { color: var(--ink-2); font-size: 1.02rem; margin-top: 6px; }
.onb-points { display: flex; flex-direction: column; gap: 16px; padding: 8px 4px 28px; }
.onb-points li { display: flex; gap: 14px; align-items: flex-start; font-size: 0.98rem; color: var(--ink-2); }
.onb-points li strong { color: var(--ink); font-weight: 700; }
.onb-points .icon { color: var(--brand); margin-top: 1px; }
.onb-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.onb-form { padding-top: max(12px, env(safe-area-inset-top)); }
.onb-back { align-self: flex-start; margin-bottom: 6px; margin-left: -8px; }
.onb-h2 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.onb-sub { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 18px; }
.onb-footer {
  position: sticky; bottom: 0;
  margin-top: auto;
  padding: 12px 0 max(4px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  display: flex; flex-direction: column; gap: 8px;
}
.setup-total { font-size: 0.92rem; color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.setup-total strong { color: var(--brand-deep); }

.step-dots { display: flex; gap: 6px; margin-bottom: 16px; }
.step-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--track); }
.step-dot.on { background: var(--brand); width: 22px; }
.step-dot.done { background: var(--brand); opacity: 0.45; }

.setup-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.setup-row { display: flex; gap: 8px; align-items: center; }
.src-name { font-weight: 500; }

.color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatch {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--swatch);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  border: 3px solid transparent;
  transition: transform 0.12s ease-out;
}
.color-swatch.on { border-color: var(--ink); transform: scale(1.08); }
.color-swatch .icon { width: 18px; height: 18px; }

/* ---------- tab bar ---------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: stretch; justify-content: space-around;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 6px max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom));
  z-index: 20;
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ink-2);
  padding: 6px 0 2px;
  border-radius: var(--radius-sm);
}
.tab.on { color: var(--brand-deep); }
.tab-label { font-size: 0.72rem; font-weight: 600; }
.fab-add {
  width: 58px; height: 58px; flex: none;
  margin-top: -22px;
  align-self: center;
  background: var(--brand); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-raised);
  transition: transform 0.12s ease-out;
}
.fab-add:active { transform: scale(0.94); }
.fab-add .icon { width: 26px; height: 26px; }

/* ---------- sheets ---------- */

.sheet-back {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(24, 34, 29, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade-in 0.18s ease-out;
}
.sheet {
  width: 100%; max-width: 560px;
  max-height: 94dvh;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  animation: slide-up 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  overflow: hidden;
}
@keyframes slide-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet-head {
  display: flex; align-items: center;
  padding: 8px 10px 0;
}
.sheet-title { flex: 1; text-align: center; font-size: 1.02rem; font-weight: 700; }
.sheet-spacer { width: 64px; }
.sheet-body { padding: 12px 18px 4px; overflow-y: auto; }
.sheet-footer {
  position: sticky; bottom: 0;
  padding: 10px 0 max(14px, env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.sheet .btn-danger-ghost { margin: 0 auto 14px; }

/* ---------- add sheet ---------- */

.add-body { display: flex; flex-direction: column; overflow-y: auto; padding: 0 16px; }
.amount-display {
  text-align: center;
  font-size: clamp(2.6rem, 13vw, 3.4rem);
  font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-deep);
  padding: 10px 0 4px;
}
.amount-display.zero { color: var(--ink-3); }

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px 4px 12px;
}
.key {
  height: 54px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.35rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s ease-out, background 0.1s ease-out;
}
.key:active { transform: scale(0.95); background: var(--surface-2); }
.key .icon { width: 22px; height: 22px; color: var(--ink-2); }

.add-fields { padding-bottom: 16px; }
.chip-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.date-chip {
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 99px;
  padding: 7px 14px;
  font-size: 0.88rem; font-weight: 600; color: var(--ink-2);
}
.date-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.date-chip-input { padding: 4px 10px; display: inline-flex; }
.date-input {
  border: 0; background: none; font-size: 0.88rem; font-weight: 600; color: var(--ink-2);
  width: 118px;
}

.where-label { font-size: 0.85rem; font-weight: 700; color: var(--ink-2); margin: 6px 0 8px; }
.where-wrap {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 132px; overflow-y: auto;
  padding-bottom: 4px; margin-bottom: 6px;
}
.where-chip {
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 0.9rem; font-weight: 600;
  transition: transform 0.1s ease-out;
}
.where-chip:active { transform: scale(0.96); }
.where-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.note-input { margin: 8px 0 4px; }
.save-btn { margin: 0; }

/* ---------- tx actions sheet ---------- */

.tx-actions { padding: 10px 18px 8px; display: flex; flex-direction: column; gap: 10px; }
.tx-meta { display: flex; gap: 12px; align-items: center; padding: 6px 2px 10px; }
.tx-meta-text { display: flex; flex-direction: column; gap: 2px; }
.tx-meta-text span { font-size: 0.88rem; color: var(--ink-2); }

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

.modal-back {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(24, 34, 29, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fade-in 0.15s ease-out;
}
.confirm {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  padding: 20px;
  width: 100%; max-width: 360px;
}
.confirm h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.confirm p { color: var(--ink-2); font-size: 0.92rem; margin-bottom: 16px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

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

.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #F3F1EA;
  font-size: 0.92rem; font-weight: 500;
  border-radius: 99px;
  padding: 11px 18px;
  box-shadow: var(--shadow-raised);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index: 80;
  max-width: min(92vw, 480px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- larger screens (iPad) ---------- */

@media (min-width: 700px) {
  .screen { max-width: 880px; padding-top: 24px; }
  .cat-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .hero-amount { font-size: 3.4rem; }
  .sheet-back { align-items: center; }
  .sheet { border-radius: 20px; max-height: 86dvh; }
  .keypad { max-width: 380px; margin: 0 auto; width: 100%; }
  .amount-display { font-size: 3rem; }
  .card { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}