/* ============================================================================
   style.css  -  the whole look of the app
   ----------------------------------------------------------------------------
   Phone-first. Every size is chosen for a screen about 390px wide, held in one
   hand. The rule that drives the layout is the THUMB ZONE: anything you tap
   often lives in the bottom half of the screen, because that is all a thumb
   comfortably reaches.

   Three ideas hold the design together:

   1. ONE NUMBER IS THE HERO. Every screen has a single big number that answers
      the question you opened the app to ask. Everything else is quieter.
   2. COLOUR MEANS SOMETHING. Lime = money you still have, and the main action.
      Pink/red = over, gone, careful. Violet = saved. Grey = recorded but not
      counted. Colour is never decoration.
   3. FEWER, BIGGER THINGS. The old version had lots of small grey labels and
      tiny tiles, which is what made it feel cluttered. Big blocks with air
      around them read faster on a phone.
   ========================================================================== */

:root {
  /* --- surfaces: near-black with a slight blue tint, so the colours sing --- */
  --bg:         #0B0D12;
  --surface:    #141824;
  --surface-2:  #1C2130;
  --surface-3:  #252B3C;
  --line:       #262C3D;

  /* --- text --- */
  --ink:        #F2F5FF;   /* headlines and numbers */
  --ink-2:      #A3ACC2;   /* body text */
  --ink-3:      #6B7488;   /* labels and hints */

  /* --- meaning --- */
  --lime:       #C6FF4F;   /* money left, and the primary button */
  --lime-ink:   #16200A;   /* text on top of lime */
  --violet:     #7C5CFF;   /* savings */
  --pink:       #FF5C9D;
  --amber:      #FFB020;   /* getting close */
  --good:       #3DDC84;
  --bad:        #FF5C7A;   /* over budget */

  --r-lg: 28px;
  --r:    20px;
  --r-sm: 14px;

  /* A gentle overshoot. Used on nearly every animation so the whole app feels
     like one object rather than a pile of parts. */
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* On iPhone the home bar sits over the bottom of the screen. These let us
     pad around it instead of hiding underneath it. */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --tabbar-h: 68px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

/* Numbers line up in neat columns when every digit is the same width. */
.num, .hero-value, .stat-value, .amount-digits, .row-amount,
.bar-value, .total-value, .pay-amount, .plan-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

h1, h2, h3, p { margin: 0; }

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }

input, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  width: 100%;
}
input::placeholder { color: var(--ink-3); }
input:focus, textarea:focus { border-color: var(--lime); outline: none; }
input:focus-visible, button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Screens
   --------------------------------------------------------------------------- */

.screen {
  display: none;
  /* The bottom padding clears the tab bar AND the floating + button, or the
     last row of a list ends up hidden under them. */
  padding: calc(var(--safe-t) + 20px) 16px calc(var(--tabbar-h) + var(--safe-b) + 100px);
  max-width: 560px;
  margin: 0 auto;
  animation: screen-in .24s ease-out;
}
.screen.is-active { display: block; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

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

.screen-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.screen-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }

.icon-btn {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 18px;
  display: grid;
  place-items: center;
  transition: transform .12s var(--spring), background .15s;
}
.icon-btn:active { transform: scale(.88); background: var(--surface-3); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 14px;
}
.section-head h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.link-btn { font-size: 13px; color: var(--lime); font-weight: 700; }
.hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.hint.push { margin-bottom: 14px; }

/* ---------------------------------------------------------------------------
   THE HERO CARD  -  the one number you opened the app to see
   --------------------------------------------------------------------------- */

.hero {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 24px 22px 22px;
  position: relative;
  overflow: hidden;
}

/* A soft wash of colour bleeding in from the top right. Costs nothing and
   stops the card looking like a grey box. */
.hero::before {
  content: "";
  position: absolute;
  top: -70px; right: -50px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--hero-glow, var(--lime));
  opacity: .14;
  filter: blur(34px);
  pointer-events: none;
}

.hero-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero-value {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.05;
  margin-top: 8px;
  color: var(--hero-colour, var(--lime));
}
.hero-value.small { font-size: 34px; }

.hero-meta { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; }

/* The segmented progress bar. Chunky, and it changes colour as it fills. */
.hero-bar {
  height: 12px;
  background: var(--surface-3);
  border-radius: 99px;
  margin-top: 18px;
  overflow: hidden;
}
.hero-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--hero-colour, var(--lime));
  transition: width .8s var(--spring), background .4s;
}

.hero-split {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* The call to action when no month plan has been set up yet. */
.hero.setup { cursor: pointer; transition: transform .14s var(--spring); }
.hero.setup:active { transform: scale(.98); }
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 800;
  font-size: 14px;
  padding: 13px 20px;
  border-radius: 99px;
}

/* ---------------------------------------------------------------------------
   Stat chips
   --------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 10px;
}
.stat {
  background: var(--surface);
  border-radius: var(--r);
  padding: 15px 10px;
  text-align: center;
}
.stat-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.stat-value { font-size: 17px; font-weight: 800; }
.stat-value.violet { color: var(--violet); }
.stat-value.lime   { color: var(--lime); }

/* The compact weekly strip under the hero */
.weekline {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--r);
  padding: 15px 18px;
  margin-top: 10px;
  width: 100%;
  text-align: left;
  transition: transform .12s var(--spring);
}
.weekline:active { transform: scale(.985); }
.weekline-main { flex: 1; min-width: 0; }
.weekline-top {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 9px;
}
.weekline-top span:last-child { color: var(--ink-3); font-weight: 600; }
.weekline-bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.weekline-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--lime);
  transition: width .7s var(--spring), background .3s;
}

/* ---------------------------------------------------------------------------
   Expense rows
   --------------------------------------------------------------------------- */

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

.day-head {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 18px 2px 4px;
}

.row {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border-radius: var(--r);
  padding: 13px 15px;
  width: 100%;
  text-align: left;
  transition: transform .12s var(--spring), background .15s;
}
.row:active { transform: scale(.98); background: var(--surface-2); }

.row-emoji {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 21px;
  /* Each category tints its own chip with its own colour, at low opacity. */
  background: color-mix(in srgb, var(--tint, #888) 22%, var(--surface-2));
}

.row-main { flex: 1; min-width: 0; }
.row-name, .row-meta { display: block; }
.row-name { font-size: 15px; font-weight: 700; }
.row-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-amount { font-size: 16px; font-weight: 800; flex: 0 0 auto; }
.row-amount.uncounted { color: var(--ink-3); font-weight: 600; }

.empty {
  text-align: center;
  padding: 44px 24px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.7;
}
.empty-face { font-size: 46px; display: block; margin-bottom: 12px; }

/* ---------------------------------------------------------------------------
   ADD  -  category first, then the amount
   --------------------------------------------------------------------------- */

/* Three across instead of four. The old four-column grid squeezed names down
   to 10px, which is what made it look messy. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 94px;
  padding: 14px 8px;
  border-radius: var(--r);
  /* The tile is tinted with its own category colour, so the grid reads as a
     map of colours you learn by position rather than a wall of grey. */
  background: color-mix(in srgb, var(--tint) 16%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint) 24%, transparent);
  transition: transform .11s var(--spring), background .14s;
}
.cat-tile:active {
  transform: scale(.94);
  background: color-mix(in srgb, var(--tint) 34%, var(--surface));
}

.cat-tile-emoji { font-size: 27px; line-height: 1; }
.cat-tile-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-tile.saved { animation: tile-saved .55s var(--spring); }
@keyframes tile-saved {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); background: var(--lime); }
  100% { transform: scale(1); }
}

/* --- the amount sheet that slides up after you pick a category ------------ */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(5, 7, 11, .64);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.sheet-backdrop.is-on { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--surface);
  border-radius: 30px 30px 0 0;
  padding: 10px 16px calc(18px + var(--safe-b));
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .6);
  transform: translateY(110%);
  transition: transform .32s var(--spring);
  max-width: 560px;
  margin: 0 auto;
  max-height: 92vh;
  overflow-y: auto;
}
.sheet.is-on { transform: none; }

/* The little grab handle at the top, so it reads as something you can pull. */
.sheet-grip {
  width: 42px; height: 4px;
  border-radius: 99px;
  background: var(--surface-3);
  margin: 0 auto 16px;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.sheet-emoji {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 22px;
  background: color-mix(in srgb, var(--tint, #888) 24%, var(--surface-2));
}
.sheet-title { font-size: 18px; font-weight: 800; }
.sheet-note-line { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }

/* Sub-categories as pills */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pill {
  padding: 11px 16px;
  border-radius: 99px;
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  transition: transform .1s var(--spring), background .14s, color .14s;
}
.pill:active { transform: scale(.94); }
.pill.is-on { background: var(--lime); color: var(--lime-ink); }

/* The amount, as the hero of the sheet */
.amount-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 6px 0 4px;
}
.amount-rupee { font-size: 28px; font-weight: 700; color: var(--ink-3); }
.amount-digits { font-size: 54px; font-weight: 800; line-height: 1; }
.amount-digits.is-zero { color: var(--ink-3); }

.amount-display.bump { animation: bump .18s ease-out; }
@keyframes bump { 50% { transform: scale(1.05); } }

/* THE ONE-TAP AMOUNTS. The app watches what you usually spend in a category
   and offers those as buttons, so the common case needs no typing at all. */
.quick {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}
.quick-chip {
  padding: 12px 18px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--lime) 16%, var(--surface-2));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 30%, transparent);
  color: var(--lime);
  font-size: 15px;
  font-weight: 800;
  transition: transform .1s var(--spring);
}
.quick-chip:active { transform: scale(.92); background: var(--lime); color: var(--lime-ink); }

.quick-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 14px;
}

.pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.pad-key {
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 22px;
  font-weight: 700;
  transition: transform .08s var(--spring), background .1s;
}
.pad-key:active { transform: scale(.92); background: var(--lime); color: var(--lime-ink); }
.pad-del { background: var(--surface-3); }

.note-input { margin-bottom: 10px; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
  border-radius: var(--r-sm);
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 800;
  transition: transform .1s var(--spring), filter .12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--lime);      color: var(--lime-ink); }
.btn-ghost   { background: var(--surface-2); color: var(--ink); }
.btn-danger  { background: var(--bad);       color: #fff; }
.btn-block   { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.btn-row .btn { flex: 1; min-width: 140px; }

/* ---------------------------------------------------------------------------
   PLAN  -  setting up the month
   --------------------------------------------------------------------------- */

.plan-step { margin-bottom: 22px; }
.plan-q {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.plan-why { font-size: 13px; color: var(--ink-3); line-height: 1.6; margin-bottom: 16px; }

.plan-value {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin: 4px 0 2px;
}
.plan-value.lime   { color: var(--lime); }
.plan-value.violet { color: var(--violet); }

/* The money-in / savings / spendable summary */
.plan-summary {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 14px;
}
.plan-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.plan-line:last-child { border-bottom: none; }
.plan-line-label { font-size: 14px; color: var(--ink-2); }
.plan-line-value { font-size: 18px; font-weight: 800; }
.plan-line.big .plan-line-value { font-size: 26px; color: var(--lime); }
.plan-line.big .plan-line-label { font-weight: 700; color: var(--ink); }

/* Suggested per-category targets, month two onwards */
.target-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--r);
  padding: 14px 15px;
  margin-bottom: 8px;
}
.target-main { flex: 1; min-width: 0; }
.target-name { font-size: 14.5px; font-weight: 700; }
.target-was { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.target-input { width: 108px; flex: 0 0 108px; text-align: right; font-weight: 800; padding: 11px 13px; }

/* ---------------------------------------------------------------------------
   INSIGHTS
   --------------------------------------------------------------------------- */

.totals-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.total-big { background: var(--surface); border-radius: var(--r); padding: 17px; }
.total-value { font-size: 25px; font-weight: 800; margin-top: 6px; }
.total-value.saved { color: var(--violet); }
.delta { font-size: 11.5px; margin-top: 7px; color: var(--ink-3); line-height: 1.45; }
.delta.up   { color: var(--bad); }
.delta.down { color: var(--good); }

.weekstrip {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 100px;
  margin-top: 10px;
  padding: 14px;
  background: var(--surface);
  border-radius: var(--r);
}
.wk { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 7px; }
.wk-bar {
  background: var(--lime);
  border-radius: 7px 7px 4px 4px;
  min-height: 4px;
  transition: height .6s var(--spring);
}
.wk-bar.over { background: var(--bad); }
.wk-label { font-size: 10px; font-weight: 600; text-align: center; color: var(--ink-3); }

.advice-list { display: flex; flex-direction: column; gap: 10px; }
.advice {
  display: flex;
  gap: 13px;
  background: var(--surface);
  border-radius: var(--r);
  padding: 17px;
  border-left: 4px solid var(--advice-colour, var(--lime));
}
.advice-face { font-size: 23px; line-height: 1.15; flex: 0 0 auto; }
.advice-title { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
.advice-body { font-size: 13px; line-height: 1.6; color: var(--ink-2); }

.cat-bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: block; width: 100%; text-align: left; }
.bar-top { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.bar-emoji { font-size: 16px; }
.bar-name  { font-size: 14px; font-weight: 700; flex: 1; }
.bar-value { font-size: 14px; font-weight: 800; }
.bar-delta { font-size: 11px; color: var(--ink-3); margin-left: 6px; }
.bar-delta.up   { color: var(--bad); }
.bar-delta.down { color: var(--good); }

.bar-track { height: 10px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 99px; transition: width .7s var(--spring); }

/* When a category has a budget, show the budget line as a notch on the track */
.bar-track.budgeted { position: relative; }
.bar-notch {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--ink);
  opacity: .55;
  border-radius: 2px;
}
.bar-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.bar-sub.over { color: var(--bad); font-weight: 700; }

/* ---------------------------------------------------------------------------
   SETTINGS
   --------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 11px;
}
.card.danger { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 34%, transparent); }
.card-title { font-size: 17px; font-weight: 800; margin-bottom: 7px; }
.card-note { font-size: 13px; line-height: 1.65; color: var(--ink-2); margin-bottom: 16px; }

.seg { display: flex; gap: 5px; background: var(--bg); padding: 5px; border-radius: var(--r-sm); }
.seg button {
  flex: 1; padding: 12px; border-radius: 11px;
  font-size: 13px; font-weight: 700; color: var(--ink-3);
  transition: background .15s, color .15s;
}
.seg button.is-active { background: var(--lime); color: var(--lime-ink); }

.newcat-row { display: flex; gap: 8px; margin-bottom: 18px; }
.newcat-row input[type="text"]:not(.emoji-input) { flex: 1; }
.emoji-input { width: 60px; flex: 0 0 60px; text-align: center; font-size: 19px; }

.manage-group { margin-top: 18px; }
.manage-group h3 {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); margin-bottom: 9px;
}
.manage-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.manage-row:last-child { border-bottom: none; }
.manage-emoji { font-size: 19px; width: 28px; text-align: center; }
.manage-name { flex: 1; font-size: 14px; font-weight: 700; }
.manage-row.is-hidden .manage-name { color: var(--ink-3); text-decoration: line-through; }

.chip {
  font-size: 10.5px; font-weight: 800;
  padding: 6px 10px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-3);
  white-space: nowrap;
}
.chip.on  { background: color-mix(in srgb, var(--good) 20%, var(--surface-2)); color: var(--good); }
.chip.off { background: color-mix(in srgb, var(--amber) 20%, var(--surface-2)); color: var(--amber); }

.footnote { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 30px; }

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

.fab {
  position: fixed;
  right: 18px;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px);
  z-index: 30;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--lime-ink);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(198, 255, 79, .3);
  transition: transform .15s var(--spring), opacity .18s;
}
.fab:active { transform: scale(.86); }
.fab.is-hidden { opacity: 0; transform: scale(.4); pointer-events: none; }

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(11, 13, 18, .92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
}
.tabbar button {
  height: var(--tabbar-h);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  font-size: 9.5px; font-weight: 700;
  color: var(--ink-3);
  transition: color .15s;
}
.tabbar button span { font-size: 19px; line-height: 1; }
.tabbar button.is-active { color: var(--lime); }

/* ---------------------------------------------------------------------------
   Toast, popup, confetti
   --------------------------------------------------------------------------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 96px);
  z-index: 60;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .3s var(--spring);
  width: max-content;
  max-width: calc(100vw - 36px);
}
#toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast-inner {
  background: var(--ink);
  color: var(--bg);
  padding: 13px 20px;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.toast-inner.bad { background: var(--bad); color: #fff; }

#popup {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 7, 11, .76);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
#popup.is-on { opacity: 1; pointer-events: auto; }

.popup-card {
  background: var(--surface);
  border-radius: 30px;
  padding: 32px 24px 24px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  border-top: 5px solid var(--good);
  transform: scale(.86);
  transition: transform .36s var(--spring);
}
#popup.is-on .popup-card { transform: none; }
.popup-card.bad     { border-top-color: var(--bad); }
.popup-card.neutral { border-top-color: var(--lime); }

.popup-face { font-size: 56px; line-height: 1; margin-bottom: 16px; }
.popup-title { font-size: 22px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.02em; }
.popup-body { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.popup-line {
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--line);
}
.popup-close { margin-top: 22px; width: 100%; }
.confirm-row { display: flex; gap: 9px; margin-top: 22px; }
.confirm-row .btn { flex: 1; }

#confetti { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
#confetti i {
  position: absolute;
  top: -16px;
  width: 9px; height: 15px;
  border-radius: 2px;
  animation-name: fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes fall {
  from { transform: translateY(-5vh) rotate(0deg); opacity: 1; }
  to   { transform: translateY(105vh) rotate(var(--spin, 360deg)); opacity: .9; }
}

/* ---------------------------------------------------------------------------
   If the phone has been asked for less movement, give it less movement.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* A little more room on a big phone or a laptop. */
@media (min-width: 430px) {
  .screen-title  { font-size: 32px; }
  .hero-value    { font-size: 52px; }
  .amount-digits { font-size: 60px; }
  .cat-tile-name { font-size: 12.5px; }
}