/* ============================================================
   FAMILY BUDGET TRACKER — PASTEL FEMININE THEME
   ============================================================ */

/* --- TOKENS --- */
:root {
  --pink:        #f9c5d1;
  --pink-mid:    #f5a8ba;
  --pink-deep:   #e8839a;
  --rose:        #fce4ec;
  --rose-mid:    #f48fb1;
  --lilac:       #e8d5f5;
  --lilac-mid:   #ce93d8;
  --lilac-deep:  #ab47bc;
  --mint:        #d4f0e8;
  --mint-mid:    #80cbc4;
  --mint-deep:   #26a69a;
  --peach:       #fde8d8;
  --peach-mid:   #ffb74d;
  --peach-deep:  #f57c00;
  --sky:         #dbeafe;
  --sky-mid:     #93c5fd;
  --sky-deep:    #3b82f6;
  --cream:       #fdfaf6;
  --white:       #ffffff;

  --text-dark:   #3d2b3d;
  --text-mid:    #7a5c7a;
  --text-light:  #b09ab0;

  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;

  --shadow-soft: 0 4px 20px rgba(200, 130, 160, 0.12);
  --shadow-card: 0 2px 12px rgba(180, 100, 140, 0.1);

  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'DM Sans', system-ui, sans-serif;

  --header-h:    68px;
  --nav-h:       72px;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text-dark);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================================
   APP HEADER
   ============================================================ */
.app-header {
  background: linear-gradient(135deg, #f9c5d1 0%, #e8d5f5 60%, #dbeafe 100%);
  height: var(--header-h);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  box-shadow: 0 2px 16px rgba(200,130,160,0.15);
}
.header-inner {
  max-width: 900px;
  margin: 0 auto;
  height: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.brand-icon { font-size: 26px; }
.brand-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.1;
}
.brand-sub {
  font-size: 11px;
  color: var(--text-mid);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Back button */
.back-btn {
  background: rgba(255,255,255,0.7);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 22px;
  color: var(--text-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
  line-height: 1;
}
.back-btn:hover { background: rgba(255,255,255,0.95); }

/* Detail header title (shown on detail views) */
.header-detail-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-header-emoji { font-size: 20px; }
.detail-header-text {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
}
.detail-total-pill {
  background: linear-gradient(135deg, #f9c5d1, #e8d5f5);
  color: var(--text-dark);
  font-weight: 700;
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Month nav buttons */
.header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-month {
  background: rgba(255,255,255,0.7);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 18px;
  color: var(--text-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.btn-month:hover { background: rgba(255,255,255,0.95); }

.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.app-locked {
  overflow: hidden;
}

/* ============================================================
   VIEW SYSTEM — page navigation
   ============================================================ */
.view {
  display: none;
  min-height: calc(100vh - var(--header-h) - var(--nav-h));
  padding-top: calc(var(--header-h) + 12px);
  padding-bottom: calc(var(--nav-h) + 16px);
}
.view.active { display: block; }

/* Slide-in animation when navigating to a view */
.view.slide-in {
  animation: slideIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.view.slide-out {
  animation: slideOut 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  background: linear-gradient(135deg, #f9c5d1 0%, #e8d5f5 60%, #dbeafe 100%);
  padding: 16px 16px 24px;
  margin-bottom: 4px;
}
.hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hero-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 18px 12px 14px;
  text-align: center;
  border: 1.5px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s;
}
.hero-card:hover { transform: translateY(-2px); }
.hero-icon { font-size: 24px; margin-bottom: 5px; }
.hero-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: 3px;
}
.hero-amount {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  margin-bottom: 3px;
}
.hero-note { font-size: 10px; color: var(--text-light); }
.hero-card.spent .hero-amount { color: #e8839a; }
.hero-card.due   .hero-amount { color: #f0a500; }
.hero-card.left  .hero-amount { color: #26a69a; }

.hero-budget-bar { max-width: 900px; margin: 12px auto 0; }
.budget-bar-track {
  height: 7px;
  background: rgba(255,255,255,0.5);
  border-radius: 999px;
  overflow: hidden;
}
.budget-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pink-deep), var(--lilac-deep));
  border-radius: 999px;
  transition: width 0.6s ease;
}
.budget-bar-label {
  font-size: 11px;
  color: var(--text-mid);
  margin-top: 5px;
  text-align: right;
}

/* ============================================================
   HOME TOOLS
   ============================================================ */
.home-tools {
  padding: 12px 16px 4px;
}
.home-tools-inner {
  max-width: 900px;
  margin: 0 auto;
}
.home-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.scan-receipt-btn {
  width: 100%;
  border: none;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(249,197,209,0.95), rgba(232,213,245,0.95));
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.scan-receipt-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(200,130,160,0.18);
}
.scan-receipt-btn strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}
.scan-receipt-btn small {
  display: block;
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 500;
}
.scan-receipt-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  font-size: 22px;
}
.settings-launch-btn {
  background: linear-gradient(135deg, rgba(219,234,254,0.95), rgba(232,213,245,0.95));
}

/* ============================================================
   TILES TOOLBAR
   ============================================================ */
.tiles-toolbar {
  max-width: 900px;
  margin: 0 auto;
  padding: 6px 14px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tiles-toolbar-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-light);
  font-weight: 700;
}
.tiles-toolbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tiles-toolbar-btn {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(249,197,209,0.5);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  padding: 6px 12px;
  font-family: var(--font-sans);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tiles-toolbar-btn:hover {
  background: rgba(255,255,255,0.98);
  border-color: var(--pink-mid);
  color: var(--text-dark);
}
#theme-toggle-btn { font-size: 15px; padding: 5px 9px; }

/* Hidden tile */
.tile.tile-hidden { display: none !important; }

/* ============================================================
   HOME TILES GRID
   ============================================================ */
.tiles-grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.display-grid .tiles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

body.display-grid .tile {
  width: auto;
  min-height: 172px;
  padding: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
}

body.display-grid .tile-income {
  grid-column: 1 / -1;
  min-height: 148px;
}

body.display-grid .tile-left {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

body.display-grid .tile-info {
  gap: 5px;
  width: 100%;
}

body.display-grid .tile-sub {
  white-space: normal;
  overflow: hidden;
  text-overflow: unset;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 32px;
}

body.display-grid .tile-right {
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
}

body.display-grid .tile-amount {
  font-size: 18px;
}

body.display-grid .tile-arrow {
  font-size: 18px;
}

.tile {
  width: 100%;
  background: var(--white);
  border: 1px solid rgba(249,197,209,0.35);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.15s;
  text-align: left;
  font-family: var(--font-sans);
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200,130,160,0.18);
  background: linear-gradient(135deg, rgba(249,197,209,0.06), rgba(232,213,245,0.06));
}
.tile:active { transform: scale(0.985); }

.tile-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.tile-emoji {
  font-size: 26px;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, rgba(249,197,209,0.3), rgba(232,213,245,0.3));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tile-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
}
.tile-sub {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tile-amount {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
}
.tile-min {
  font-size: 13px;
  color: var(--text-mid);
  font-family: var(--font-sans);
  font-weight: 600;
}
.tile-arrow {
  font-size: 20px;
  color: var(--text-light);
  font-weight: 300;
  line-height: 1;
}
.tile-debt { border-left: 3px solid rgba(249,197,209,0.7); }

/* ============================================================
   DETAIL VIEW CONTENT
   ============================================================ */
.detail-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 16px 24px;
}
.detail-content.two-child-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px 16px 24px;
}
.detail-content.pots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.pot-add-row-btn,
.pot-empty-state {
  grid-column: 1 / -1;
}
.pot-empty-state {
  border: 1px dashed rgba(249,197,209,0.35);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
  color: var(--text-light);
  background: rgba(253,250,246,0.7);
  font-size: 13px;
}

/* ============================================================
   ENTRY LIST
   ============================================================ */
.entry-list {
  display: flex;
  flex-direction: column;
}
.entry-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(249,197,209,0.25);
  gap: 8px;
}
.entry-item:last-child { border-bottom: none; }
.interactive-row,
.interactive-card,
.interactive-surface {
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.interactive-row:hover,
.interactive-row:focus-visible,
.interactive-surface:hover,
.interactive-surface:focus-visible {
  background: rgba(249,197,209,0.1);
  outline: none;
}
.interactive-card:hover,
.interactive-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  outline: none;
}
.entry-left  { display: flex; align-items: center; gap: 8px; min-width: 0; }
.entry-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bill-right {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.bill-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.entry-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}
.entry-name.muted { color: var(--text-light); font-style: italic; font-weight: 400; }
.entry-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: var(--font-serif);
}
.entry-date { font-size: 11px; color: var(--text-light); }

/* Status dots */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.paid { background: var(--mint-deep); }
.status-dot.due  { background: var(--peach-mid); }
.status-dot.upcoming { background: var(--sky-deep); }
.status-dot.overdue { background: var(--peach-deep); }

/* Badges */
.entry-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.paid-badge { background: var(--mint); color: var(--mint-deep); }
.due-badge  { background: var(--peach); color: #d4720a; }
.upcoming-badge { background: var(--sky); color: var(--sky-deep); }
.overdue-badge { background: rgba(245,124,0,0.16); color: var(--peach-deep); }

/* Fixed tag */
.fixed-tag { display: flex; align-items: center; gap: 6px; }
.tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tag.fixed { background: var(--sky); color: var(--sky-deep); }

/* Add row button */
.add-row-btn {
  margin-top: 14px;
  width: 100%;
  padding: 11px;
  border: 2px dashed rgba(249,197,209,0.7);
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--pink-deep);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.add-row-btn:hover {
  border-color: var(--pink-deep);
  background: rgba(249,197,209,0.1);
}
.add-row-btn.blue-add { border-color: rgba(147,197,253,0.7); color: var(--sky-deep); }
.add-row-btn.blue-add:hover { border-color: var(--sky-deep); background: rgba(219,234,254,0.2); }

/* Budget mini progress */
.budget-progress-wrap { margin-top: 16px; }
.budget-progress-wrap.interactive-surface {
  padding: 10px 12px;
  border-radius: var(--radius-md);
}
.mini-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 5px;
}
.mini-track {
  height: 6px;
  background: rgba(249,197,209,0.2);
  border-radius: 999px;
  overflow: hidden;
}
.mini-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.mini-fill.mint   { background: linear-gradient(90deg, #80cbc4, #26a69a); }
.mini-fill.lilac  { background: linear-gradient(90deg, #ce93d8, #ab47bc); }
.mini-fill.peach  { background: linear-gradient(90deg, #ffb74d, #f57c00); }
.mini-fill.outing  { background: linear-gradient(90deg, #f48fb1, #93c5fd); }
.mini-fill.pet     { background: linear-gradient(90deg, #80cbc4, #f48fb1); }
.mini-fill.beauty  { background: linear-gradient(90deg, #f48fb1, #ce93d8); }

/* ============================================================
   TWO-CHILD GRID (School Fees / Clubs / Debts / Pocket Money)
   ============================================================ */
.child-block { display: flex; flex-direction: column; gap: 0; }
.child-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: 12px;
}
.blue-child   { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.rose-child   { background: linear-gradient(135deg, #fce4ec, #f9c5d1); }
.me-debt      { background: linear-gradient(135deg, #e8d5f5, #d4b8f0); }
.husband-debt { background: linear-gradient(135deg, #d4f0e8, #b2dfdb); }

.child-avatar { font-size: 20px; }
.child-name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}
.sub-section { margin-bottom: 14px; }
.sub-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-light);
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.blue-bill-tag {
  background: var(--sky);
  color: var(--sky-deep);
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.child-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 2px solid rgba(249,197,209,0.3);
  font-size: 13px;
  color: var(--text-mid);
  font-weight: 600;
}
.child-total-val {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

/* ============================================================
   CLUBS
   ============================================================ */
.club-item { gap: 10px; }
.club-icon-wrap { font-size: 18px; flex-shrink: 0; }
.club-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.club-freq { font-size: 10px; color: var(--text-light); font-weight: 500; }

/* ============================================================
   POCKET MONEY
   ============================================================ */
.pocket-money-card {
  background: linear-gradient(135deg, rgba(249,197,209,0.12), rgba(232,213,245,0.12));
  border: 1px solid rgba(249,197,209,0.3);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pm-label {
  font-size: 12px;
  color: var(--text-mid);
  font-weight: 500;
}
.pm-amount {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pm-pay-btn {
  margin-top: 4px;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #f9c5d1, #e8d5f5);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.2px;
}
.pm-pay-btn:hover {
  background: linear-gradient(135deg, #f5a8ba, #ce93d8);
  color: var(--white);
}
.pm-pay-btn.is-paid,
.pm-pay-btn:disabled {
  background: linear-gradient(135deg, #d4f0e8, #b2dfdb);
  color: var(--mint-deep);
  cursor: default;
}
.pm-pay-btn:disabled:hover {
  color: var(--mint-deep);
}

/* ============================================================
   POTS
   ============================================================ */
.pot-card {
  border-radius: var(--radius-md);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  border: 1.5px solid transparent;
}
.savings-pot { background: linear-gradient(160deg, #d4f0e8 0%, #e8f8f4 100%); border-color: rgba(128,203,196,0.4); }
.holiday-pot { background: linear-gradient(160deg, #dbeafe 0%, #eef4ff 100%); border-color: rgba(147,197,253,0.4); }
.trips-pot   { background: linear-gradient(160deg, #e8d5f5 0%, #f3ebfa 100%); border-color: rgba(206,147,216,0.4); }
.gifts-pot   { background: linear-gradient(160deg, #fde8d8 0%, #fce4ec 100%); border-color: rgba(249,197,209,0.5); }

.pot-icon { font-size: 30px; }
.pot-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-mid);
  font-weight: 700;
}
.pot-amount {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
}
.pot-goal-line { font-size: 11px; color: var(--text-light); }
.pot-track {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.6);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.pot-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.savings-fill { background: linear-gradient(90deg, #80cbc4, #26a69a); }
.holiday-fill { background: linear-gradient(90deg, #93c5fd, #3b82f6); }
.trips-fill   { background: linear-gradient(90deg, #ce93d8, #ab47bc); }
.gifts-fill   { background: linear-gradient(90deg, #ffb74d, #f48fb1); }
.pot-pct { font-size: 11px; font-weight: 700; color: var(--text-light); }
.pot-note { font-size: 10px; color: var(--text-light); font-style: italic; }
.pot-btn {
  margin-top: 8px;
  background: rgba(255,255,255,0.7);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.pot-btn:hover { background: rgba(255,255,255,0.95); color: var(--text-dark); }

/* ============================================================
   DEBTS
   ============================================================ */
.debt-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(249,197,209,0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.debt-item:last-child { border-bottom: none; }
.debt-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.debt-full-amount { font-size: 11px; color: var(--text-light); font-weight: 500; }
.debt-bar-wrap { display: flex; align-items: center; gap: 8px; }
.debt-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(249,197,209,0.25);
  border-radius: 999px;
  overflow: hidden;
}
.debt-bar-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.me-fill      { background: linear-gradient(90deg, #f48fb1, #e8839a); }
.husband-fill { background: linear-gradient(90deg, #80cbc4, #26a69a); }
.debt-pct { font-size: 10px; color: var(--text-light); white-space: nowrap; }
.debt-bottom { display: flex; justify-content: space-between; align-items: center; }
.debt-min-label { font-size: 11px; color: var(--text-light); }
.debt-min-val {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

/* ============================================================
   INCOME TILE (distinct green/mint theme)
   ============================================================ */
.tile-income {
  background: linear-gradient(135deg, #d4f0e8 0%, #e8f8f4 60%, #dbeafe 100%);
  border: 1.5px solid rgba(128,203,196,0.45);
}
.tile-income:hover {
  background: linear-gradient(135deg, #b2dfdb 0%, #d4f0e8 60%, #bfdbfe 100%);
}
.tile-emoji-income {
  background: linear-gradient(135deg, rgba(38,166,154,0.2), rgba(59,130,246,0.15));
}
.tile-amount-income {
  color: var(--mint-deep);
}

/* ============================================================
   INCOME DETAIL VIEW
   ============================================================ */
.income-banner {
  background: linear-gradient(135deg, #d4f0e8, #dbeafe);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  border: 1.5px solid rgba(128,203,196,0.4);
}
.income-banner-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--mint-deep);
  font-weight: 700;
  margin-bottom: 6px;
}
.income-banner-amount {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  margin-bottom: 4px;
}
.income-banner-sub {
  font-size: 12px;
  color: var(--text-light);
}

.me-income      { background: linear-gradient(135deg, #e8d5f5, #d4b8f0); }
.husband-income { background: linear-gradient(135deg, #d4f0e8, #b2dfdb); }

.income-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(212,240,232,0.35), rgba(219,234,254,0.35));
  border-radius: var(--radius-sm);
  border: 1px solid rgba(128,203,196,0.25);
}
.income-source-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}
.income-amount {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--mint-deep);
}

.add-income-btn {
  border-color: rgba(128,203,196,0.6);
  color: var(--mint-deep);
}
.add-income-btn:hover {
  border-color: var(--mint-deep);
  background: rgba(212,240,232,0.2);
}

.income-total { border-top-color: rgba(128,203,196,0.35); }
.income-total-val { color: var(--mint-deep); }

.negative-amount { color: #d45c72 !important; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(61, 43, 61, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 300;
}
.modal-card {
  width: min(100%, 460px);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(249,197,209,0.35);
  box-shadow: 0 24px 60px rgba(109, 66, 91, 0.22);
  overflow: hidden;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px 14px;
  background: linear-gradient(135deg, rgba(249,197,209,0.22), rgba(232,213,245,0.22));
}
.modal-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  font-weight: 700;
  margin-bottom: 4px;
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
}
.modal-description {
  margin: 0;
  padding: 14px 20px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid);
}
.modal-close {
  border: none;
  background: rgba(255,255,255,0.8);
  color: var(--text-mid);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.modal-form {
  padding: 18px 20px 20px;
}
.modal-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-field span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
}
.modal-field input,
.modal-field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(249,197,209,0.55);
  background: rgba(253,250,246,0.9);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 14px;
}
.modal-field input:focus,
.modal-field select:focus {
  outline: 2px solid rgba(232,131,154,0.18);
  border-color: var(--pink-deep);
}
.modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.modal-primary,
.modal-secondary {
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.modal-primary {
  background: linear-gradient(135deg, #f5a8ba, #ce93d8);
  color: var(--white);
}
.modal-secondary {
  background: rgba(249,197,209,0.14);
  color: var(--text-mid);
}
.modal-delete {
  margin-right: auto;
  background: rgba(253,232,216,0.65);
  color: #c06957;
}

.passcode-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(249,197,209,0.28), transparent 42%),
    rgba(61, 43, 61, 0.44);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 420;
}
.passcode-card {
  width: min(100%, 360px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(249,197,209,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(253,250,246,0.96));
  box-shadow: 0 28px 70px rgba(61, 43, 61, 0.24);
  padding: 28px 24px;
  text-align: center;
}
.passcode-brand-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pink), var(--lilac));
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
}
.passcode-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-light);
}
.passcode-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--text-dark);
}
.passcode-help {
  margin: 10px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-mid);
}
.passcode-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.passcode-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(249,197,209,0.55);
  background: rgba(255,255,255,0.9);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-align: center;
}
.passcode-input:focus {
  outline: 2px solid rgba(232,131,154,0.18);
  border-color: var(--pink-deep);
}
.passcode-error {
  margin: 0;
  font-size: 12px;
  color: #c06957;
}
.passcode-submit {
  width: 100%;
  justify-content: center;
}

.family-card {
  max-height: min(90vh, 760px);
  display: flex;
  flex-direction: column;
}
.family-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}
.family-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.family-section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.family-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-light);
}
.family-adults-grid,
.family-children-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.family-person-card,
.family-child-card {
  border: 1px solid rgba(249,197,209,0.28);
  border-radius: var(--radius-md);
  background: rgba(253,250,246,0.9);
  padding: 14px;
}
.family-person-header,
.family-child-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.family-child-header {
  justify-content: space-between;
}
.family-person-preview {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(249,197,209,0.18);
  font-size: 20px;
}
.family-person-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}
.family-child-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(249,197,209,0.16);
  color: var(--text-mid);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.family-add-child {
  padding: 9px 14px;
  flex-shrink: 0;
}
.family-remove-child {
  border: 0;
  border-radius: 999px;
  background: rgba(61, 43, 61, 0.08);
  color: var(--text-mid);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.family-remove-child:hover,
.family-remove-child:focus-visible {
  background: rgba(61, 43, 61, 0.14);
  color: var(--text-dark);
}

/* ============================================================
   RECEIPT MODAL
   ============================================================ */
.receipt-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(61, 43, 61, 0.36);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 320;
}
.receipt-card {
  width: min(100%, 540px);
  max-height: min(92vh, 860px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(249,197,209,0.35);
  box-shadow: 0 24px 60px rgba(109, 66, 91, 0.22);
}
.receipt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px 14px;
  background: linear-gradient(135deg, rgba(249,197,209,0.22), rgba(232,213,245,0.22));
}
.receipt-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  font-weight: 700;
  margin-bottom: 4px;
}
.receipt-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
}
.receipt-close {
  border: none;
  background: rgba(255,255,255,0.8);
  color: var(--text-mid);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.receipt-preview-wrap {
  padding: 16px 20px 0;
}
.receipt-preview {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: rgba(253,250,246,0.9);
  border: 1px solid rgba(249,197,209,0.25);
}
.receipt-status {
  padding: 16px 20px 0;
}
.receipt-status-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--radius-md);
  padding: 14px;
  background: rgba(219,234,254,0.35);
  border: 1px solid rgba(147,197,253,0.35);
}
.receipt-status-card.is-success {
  background: rgba(212,240,232,0.28);
  border-color: rgba(128,203,196,0.35);
}
.receipt-status-card.is-warning {
  background: rgba(253,232,216,0.28);
  border-color: rgba(255,183,77,0.35);
}
.receipt-status-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.receipt-status-card p {
  font-size: 12px;
  color: var(--text-mid);
  line-height: 1.45;
}
.receipt-form {
  padding: 16px 20px 0;
}
.receipt-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.receipt-raw {
  margin: 16px 20px 0;
  border: 1px solid rgba(249,197,209,0.28);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  background: rgba(253,250,246,0.8);
}
.receipt-raw summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mid);
}
.receipt-raw-text {
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dark);
  max-height: 220px;
  overflow: auto;
}
.receipt-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(79,47,85,0.18);
  border-top-color: var(--pink-deep);
  flex-shrink: 0;
  animation: spin 0.8s linear infinite;
}
.receipt-card .modal-actions {
  padding: 18px 20px 20px;
  margin-top: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(249,197,209,0.4);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 0 10px;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(200,130,160,0.1);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  font-family: var(--font-sans);
}
.nav-item:hover, .nav-item.active { background: rgba(249,197,209,0.2); }
.nav-icon { font-size: 20px; }
.nav-label { font-size: 10px; font-weight: 600; color: var(--text-light); letter-spacing: 0.3px; }
.nav-item.active .nav-label { color: var(--pink-deep); }

/* ============================================================
   MANAGE SECTIONS PANEL
   ============================================================ */
.manage-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(61,43,61,0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 300;
}
.manage-card {
  width: min(100%, 420px);
  max-height: min(90vh, 680px);
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(249,197,209,0.35);
  box-shadow: 0 24px 60px rgba(109,66,91,0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 20px 14px;
  background: linear-gradient(135deg, rgba(249,197,209,0.22), rgba(232,213,245,0.22));
  flex-shrink: 0;
}
.manage-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  font-weight: 700;
  margin-bottom: 4px;
}
.manage-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}
.manage-close-btn {
  border: none;
  background: rgba(255,255,255,0.8);
  color: var(--text-mid);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.manage-desc {
  font-size: 12px;
  color: var(--text-light);
  padding: 10px 20px 6px;
  flex-shrink: 0;
}
.manage-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0 8px;
}
.manage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.manage-row:hover { background: rgba(249,197,209,0.08); }
.manage-section-emoji { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.manage-section-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  font-family: var(--font-sans);
}
.manage-toggle {
  width: 44px; height: 24px;
  background: rgba(200,200,200,0.35);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.22s;
}
.manage-toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.22s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.manage-toggle.is-on { background: var(--pink-deep); }
.manage-toggle.is-on::after { transform: translateX(20px); }
.manage-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(249,197,209,0.25);
  flex-shrink: 0;
}
.manage-done-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--pink-mid), var(--lilac-mid));
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: opacity 0.2s;
}
.manage-done-btn:hover { opacity: 0.88; }

/* ============================================================
   SETTINGS BUTTON (HEADER)
   ============================================================ */
.btn-settings {
  background: rgba(255,255,255,0.7);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
  line-height: 1;
}
.btn-settings:hover { background: rgba(255,255,255,0.95); }
.btn-settings.is-active {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 2px var(--pink-deep);
}

/* ============================================================
   SETTINGS PANEL
   ============================================================ */
.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: var(--white);
  border-left: 1px solid rgba(249,197,209,0.4);
  box-shadow: -8px 0 40px rgba(200,130,160,0.14);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-panel.is-open { transform: translateX(0); }

/* Narrow the fixed chrome + content when settings open */
.app-header { transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.bottom-nav { transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
body { transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
body.settings-open .app-header { right: 280px; }
body.settings-open .bottom-nav { right: 280px; }
body.settings-open { padding-right: 280px; }

/* Settings panel header */
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: var(--header-h);
  background: linear-gradient(135deg, rgba(249,197,209,0.28), rgba(232,213,245,0.28));
  border-bottom: 1px solid rgba(249,197,209,0.3);
  flex-shrink: 0;
}
.settings-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
}
.settings-close-btn {
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 22px;
  color: var(--text-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.2s;
}
.settings-close-btn:hover { background: rgba(255,255,255,0.98); }

/* Settings panel body */
.settings-body {
  overflow-y: auto;
  flex: 1;
  padding-bottom: calc(var(--nav-h) + 16px);
}
.settings-section { padding: 18px 16px 12px; }
.settings-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-light);
  font-weight: 700;
  margin-bottom: 12px;
}
.settings-subheading {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 2px 0 8px;
}
.settings-section-sub {
  font-size: 11px;
  color: var(--text-light);
  margin-top: -6px;
  margin-bottom: 12px;
}
.settings-dropdown-toggle {
  width: 100%;
  border: 1px solid rgba(249,197,209,0.28);
  border-radius: var(--radius-md);
  background: rgba(253,250,246,0.88);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
}
.settings-dropdown-toggle:hover {
  border-color: rgba(232,131,154,0.45);
  background: rgba(255,255,255,0.96);
}
.settings-dropdown-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.settings-dropdown-copy .settings-section-label {
  margin-bottom: 6px;
}
.settings-dropdown-copy .settings-section-sub {
  margin: 0;
}
.settings-action-btn {
  width: 100%;
  border: 1px solid rgba(249,197,209,0.28);
  border-radius: var(--radius-md);
  background: rgba(253,250,246,0.88);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
}
.settings-action-btn:hover {
  border-color: rgba(232,131,154,0.45);
  background: rgba(255,255,255,0.96);
}
.settings-action-btn .settings-dropdown-arrow {
  transform: none;
}
.settings-dropdown-arrow {
  font-size: 18px;
  color: var(--text-mid);
  flex-shrink: 0;
  transition: transform 0.22s ease, color 0.22s ease;
}
.settings-section.is-expanded .settings-dropdown-toggle {
  border-color: rgba(232,131,154,0.5);
  background: rgba(249,197,209,0.08);
}
.settings-section.is-expanded .settings-dropdown-arrow {
  transform: rotate(180deg);
  color: var(--text-dark);
}
.settings-dropdown-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.24s ease, opacity 0.18s ease, margin-top 0.18s ease;
}
.settings-section.is-expanded .settings-dropdown-content {
  max-height: 560px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  margin-top: 12px;
}
.settings-divider {
  height: 1px;
  background: rgba(249,197,209,0.3);
  margin: 0 16px;
}

/* Theme swatches */
.theme-mode-grid,
.display-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.theme-mode-grid {
  margin-bottom: 14px;
}
.display-mode-grid {
  margin-top: 14px;
}
.theme-mode-btn,
.display-mode-btn {
  border: 1px solid rgba(249,197,209,0.35);
  border-radius: var(--radius-md);
  background: rgba(253,250,246,0.9);
  color: var(--text-mid);
  padding: 11px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-mode-btn:hover,
.display-mode-btn:hover {
  border-color: var(--pink-mid);
  color: var(--text-dark);
}
.theme-mode-btn.is-active,
.display-mode-btn.is-active {
  border-color: var(--pink-deep);
  background: rgba(249,197,209,0.12);
  color: var(--text-dark);
  box-shadow: 0 0 0 1px rgba(232,131,154,0.12);
}
.theme-swatches { display: flex; gap: 10px; }
.theme-swatch {
  flex: 1;
  padding: 10px 8px;
  border: 2px solid rgba(249,197,209,0.4);
  border-radius: var(--radius-md);
  background: rgba(253,250,246,0.9);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  transition: all 0.2s;
}
.theme-swatch:hover { border-color: var(--pink-mid); }
.theme-swatch.is-active {
  border-color: var(--pink-deep);
  background: rgba(249,197,209,0.1);
  color: var(--text-dark);
}
.swatch-dot { width: 34px; height: 34px; border-radius: 50%; }
.swatch-pink { background: linear-gradient(135deg, #f9c5d1, #e8d5f5); }
.swatch-blue { background: linear-gradient(135deg, #b8d4f8, #e0e7ff); }
.swatch-neutral { background: linear-gradient(135deg, #d6d3d1, #f5f5f4); }

/* Section toggles in settings */
.settings-toggle-list { display: flex; flex-direction: column; }
.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(249,197,209,0.2);
  user-select: none;
}
.settings-toggle-row:last-child { border-bottom: none; }
.settings-row-emoji { font-size: 17px; width: 24px; text-align: center; flex-shrink: 0; }
.settings-row-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
}
.settings-toggle {
  width: 40px; height: 22px;
  background: rgba(200,200,200,0.38);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.22s;
}
.settings-toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.22s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.settings-toggle.is-on { background: var(--pink-deep); }
.settings-toggle.is-on::after { transform: translateX(18px); }

.settings-option-list { display: flex; flex-direction: column; }
.settings-option-row {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(249,197,209,0.2);
  background: transparent;
  padding: 11px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
}
.settings-option-row:last-child { border-bottom: none; }
.settings-option-copy {
  flex: 1;
  min-width: 0;
}
.settings-option-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}
.settings-option-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-light);
}
.settings-option-check {
  width: 18px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--pink-deep);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.settings-option-row.is-active .settings-option-check { opacity: 1; }

/* Mobile: panel becomes full-screen overlay */
@media (max-width: 600px) {
  .settings-panel { width: 100%; max-width: 320px; }
  body.settings-open { padding-right: 0; }
  body.settings-open .app-header,
  body.settings-open .bottom-nav { right: 0; }
  body.settings-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(61,43,61,0.28);
    z-index: 55;
    pointer-events: none;
  }
}

/* ============================================================
   BLUE THEME OVERRIDES
   ============================================================ */
body.theme-blue {
  --pink:       #b8d4f8;
  --pink-mid:   #7eb0f4;
  --pink-deep:  #2563eb;
  --rose:       #dbeafe;
  --rose-mid:   #60a5fa;
  --lilac:      #e0e7ff;
  --lilac-mid:  #818cf8;
  --lilac-deep: #4f46e5;
  --shadow-soft: 0 4px 20px rgba(37,99,235,0.12);
  --shadow-card: 0 2px 12px rgba(37,99,235,0.10);
}
body.theme-blue .app-header {
  background: linear-gradient(135deg, #b8d4f8 0%, #e0e7ff 60%, #dbeafe 100%);
  box-shadow: 0 2px 16px rgba(37,99,235,0.15);
}
body.theme-blue .hero {
  background: linear-gradient(135deg, #b8d4f8 0%, #e0e7ff 60%, #dbeafe 100%);
}
body.theme-blue .budget-bar-fill {
  background: linear-gradient(90deg, #60a5fa, #818cf8);
}
body.theme-blue .tile { border-color: rgba(184,212,248,0.4); }
body.theme-blue .tile:hover {
  background: linear-gradient(135deg, rgba(184,212,248,0.07), rgba(224,231,255,0.07));
  box-shadow: 0 8px 28px rgba(37,99,235,0.14);
}
body.theme-blue .tile-emoji {
  background: linear-gradient(135deg, rgba(184,212,248,0.3), rgba(224,231,255,0.3));
}
body.theme-blue .tile-debt { border-left-color: rgba(184,212,248,0.7); }
body.theme-blue .detail-total-pill {
  background: linear-gradient(135deg, #b8d4f8, #e0e7ff);
}
body.theme-blue .scan-receipt-btn {
  background: linear-gradient(135deg, rgba(184,212,248,0.95), rgba(224,231,255,0.95));
}
body.theme-blue .scan-receipt-btn:hover {
  box-shadow: 0 10px 28px rgba(37,99,235,0.15);
}
body.theme-blue .tiles-toolbar-btn {
  border-color: rgba(184,212,248,0.55);
}
body.theme-blue .tiles-toolbar-btn:hover { border-color: #2563eb; }
body.theme-blue .add-row-btn {
  border-color: rgba(184,212,248,0.7);
  color: #2563eb;
}
body.theme-blue .add-row-btn:hover {
  border-color: #2563eb;
  background: rgba(184,212,248,0.1);
}
body.theme-blue .entry-item { border-bottom-color: rgba(184,212,248,0.3); }
body.theme-blue .modal-header,
body.theme-blue .receipt-header,
body.theme-blue .manage-header {
  background: linear-gradient(135deg, rgba(184,212,248,0.22), rgba(224,231,255,0.22));
}
body.theme-blue .modal-card,
body.theme-blue .manage-card {
  border-color: rgba(184,212,248,0.4);
}
body.theme-blue .family-person-card,
body.theme-blue .family-child-card {
  border-color: rgba(184,212,248,0.35);
  background: rgba(248,250,255,0.92);
}
body.theme-blue .modal-primary { background: linear-gradient(135deg, #7eb0f4, #818cf8); }
body.theme-blue .modal-delete {
  background: rgba(219,234,254,0.65);
  color: #2563eb;
}
body.theme-blue .modal-field input,
body.theme-blue .modal-field select { border-color: rgba(184,212,248,0.6); }
body.theme-blue .modal-field input:focus,
body.theme-blue .modal-field select:focus {
  outline-color: rgba(37,99,235,0.18);
  border-color: #2563eb;
}
body.theme-blue .bottom-nav {
  border-top-color: rgba(184,212,248,0.45);
  box-shadow: 0 -4px 20px rgba(37,99,235,0.08);
}
body.theme-blue .nav-item:hover,
body.theme-blue .nav-item.active { background: rgba(184,212,248,0.2); }
body.theme-blue .nav-item.active .nav-label { color: #2563eb; }
body.theme-blue .pocket-money-card {
  background: linear-gradient(135deg, rgba(184,212,248,0.12), rgba(224,231,255,0.12));
  border-color: rgba(184,212,248,0.3);
}
body.theme-blue .pm-pay-btn {
  background: linear-gradient(135deg, #b8d4f8, #e0e7ff);
}
body.theme-blue .pm-pay-btn:hover {
  background: linear-gradient(135deg, #7eb0f4, #818cf8);
  color: white;
}
body.theme-blue .child-total { border-top-color: rgba(184,212,248,0.35); }
body.theme-blue .debt-bar-track { background: rgba(184,212,248,0.25); }
body.theme-blue .manage-toggle.is-on { background: #2563eb; }
body.theme-blue .manage-done-btn {
  background: linear-gradient(135deg, #7eb0f4, #818cf8);
}
body.theme-blue .manage-footer { border-top-color: rgba(184,212,248,0.3); }
body.theme-blue .manage-row:hover { background: rgba(184,212,248,0.08); }

/* Blue theme — settings panel */
body.theme-blue .settings-panel {
  border-left-color: rgba(184,212,248,0.5);
  box-shadow: -8px 0 40px rgba(37,99,235,0.1);
}
body.theme-blue .settings-header {
  background: linear-gradient(135deg, rgba(184,212,248,0.28), rgba(224,231,255,0.28));
  border-bottom-color: rgba(184,212,248,0.35);
}
body.theme-blue .settings-divider { background: rgba(184,212,248,0.35); }
body.theme-blue .settings-dropdown-toggle {
  border-color: rgba(184,212,248,0.35);
  background: rgba(248,250,255,0.92);
}
body.theme-blue .settings-action-btn {
  border-color: rgba(184,212,248,0.35);
  background: rgba(248,250,255,0.92);
}
body.theme-blue .settings-dropdown-toggle:hover {
  border-color: #7eb0f4;
  background: rgba(255,255,255,0.98);
}
body.theme-blue .settings-action-btn:hover {
  border-color: #7eb0f4;
  background: rgba(255,255,255,0.98);
}
body.theme-blue .settings-section.is-expanded .settings-dropdown-toggle {
  border-color: rgba(37,99,235,0.45);
  background: rgba(184,212,248,0.12);
}
body.theme-blue .settings-toggle-row,
body.theme-blue .settings-option-row { border-bottom-color: rgba(184,212,248,0.22); }
body.theme-blue .settings-toggle.is-on { background: #2563eb; }
body.theme-blue .theme-mode-btn,
body.theme-blue .display-mode-btn { border-color: rgba(184,212,248,0.45); }
body.theme-blue .theme-mode-btn:hover,
body.theme-blue .display-mode-btn:hover { border-color: #7eb0f4; }
body.theme-blue .theme-mode-btn.is-active,
body.theme-blue .display-mode-btn.is-active {
  border-color: #2563eb;
  background: rgba(184,212,248,0.12);
}
body.theme-blue .theme-swatch { border-color: rgba(184,212,248,0.45); }
body.theme-blue .theme-swatch:hover { border-color: #7eb0f4; }
body.theme-blue .theme-swatch.is-active {
  border-color: #2563eb;
  background: rgba(184,212,248,0.12);
}
body.theme-blue .btn-settings.is-active { box-shadow: 0 0 0 2px #2563eb; }

/* ============================================================
   NEUTRAL THEME OVERRIDES
   ============================================================ */
body.theme-neutral {
  --pink:       #d6d3d1;
  --pink-mid:   #a8a29e;
  --pink-deep:  #57534e;
  --rose:       #f5f5f4;
  --rose-mid:   #a8a29e;
  --lilac:      #e7e5e4;
  --lilac-mid:  #cbd5e1;
  --lilac-deep: #64748b;
  --shadow-soft: 0 4px 20px rgba(87,83,78,0.14);
  --shadow-card: 0 2px 12px rgba(87,83,78,0.12);
}
body.theme-neutral .app-header {
  background: linear-gradient(135deg, #d6d3d1 0%, #e7e5e4 60%, #eef2f7 100%);
  box-shadow: 0 2px 16px rgba(87,83,78,0.14);
}
body.theme-neutral .hero {
  background: linear-gradient(135deg, #d6d3d1 0%, #e7e5e4 60%, #eef2f7 100%);
}
body.theme-neutral .budget-bar-fill {
  background: linear-gradient(90deg, #a8a29e, #64748b);
}
body.theme-neutral .tile {
  border-color: rgba(168,162,158,0.35);
}
body.theme-neutral .tile:hover {
  background: linear-gradient(135deg, rgba(214,211,209,0.1), rgba(231,229,228,0.08));
  box-shadow: 0 8px 28px rgba(87,83,78,0.14);
}
body.theme-neutral .tile-emoji {
  background: linear-gradient(135deg, rgba(214,211,209,0.38), rgba(231,229,228,0.32));
}
body.theme-neutral .detail-total-pill {
  background: linear-gradient(135deg, #d6d3d1, #e7e5e4);
}
body.theme-neutral .scan-receipt-btn {
  background: linear-gradient(135deg, rgba(214,211,209,0.95), rgba(231,229,228,0.95));
}
body.theme-neutral .scan-receipt-btn:hover {
  box-shadow: 0 10px 28px rgba(87,83,78,0.15);
}
body.theme-neutral .tiles-toolbar-btn {
  border-color: rgba(168,162,158,0.45);
}
body.theme-neutral .tiles-toolbar-btn:hover { border-color: #57534e; }
body.theme-neutral .add-row-btn {
  border-color: rgba(168,162,158,0.55);
  color: #57534e;
}
body.theme-neutral .add-row-btn:hover {
  border-color: #57534e;
  background: rgba(214,211,209,0.14);
}
body.theme-neutral .entry-item { border-bottom-color: rgba(168,162,158,0.22); }
body.theme-neutral .modal-header,
body.theme-neutral .receipt-header,
body.theme-neutral .manage-header {
  background: linear-gradient(135deg, rgba(214,211,209,0.24), rgba(231,229,228,0.24));
}
body.theme-neutral .modal-card,
body.theme-neutral .manage-card {
  border-color: rgba(168,162,158,0.35);
}
body.theme-neutral .family-person-card,
body.theme-neutral .family-child-card {
  border-color: rgba(168,162,158,0.35);
  background: rgba(248,247,246,0.95);
}
body.theme-neutral .modal-primary,
body.theme-neutral .manage-done-btn {
  background: linear-gradient(135deg, #a8a29e, #64748b);
}
body.theme-neutral .modal-delete {
  background: rgba(231,229,228,0.78);
  color: #57534e;
}
body.theme-neutral .modal-field input,
body.theme-neutral .modal-field select { border-color: rgba(168,162,158,0.42); }
body.theme-neutral .modal-field input:focus,
body.theme-neutral .modal-field select:focus {
  outline-color: rgba(87,83,78,0.18);
  border-color: #57534e;
}
body.theme-neutral .bottom-nav {
  border-top-color: rgba(168,162,158,0.35);
  box-shadow: 0 -4px 20px rgba(87,83,78,0.08);
}
body.theme-neutral .nav-item:hover,
body.theme-neutral .nav-item.active { background: rgba(214,211,209,0.18); }
body.theme-neutral .nav-item.active .nav-label { color: #57534e; }
body.theme-neutral .pocket-money-card {
  background: linear-gradient(135deg, rgba(214,211,209,0.16), rgba(231,229,228,0.14));
  border-color: rgba(168,162,158,0.3);
}
body.theme-neutral .pm-pay-btn {
  background: linear-gradient(135deg, #d6d3d1, #e7e5e4);
}
body.theme-neutral .pm-pay-btn:hover {
  background: linear-gradient(135deg, #a8a29e, #64748b);
  color: white;
}
body.theme-neutral .child-total { border-top-color: rgba(168,162,158,0.3); }
body.theme-neutral .debt-bar-track { background: rgba(168,162,158,0.22); }
body.theme-neutral .manage-toggle.is-on { background: #57534e; }
body.theme-neutral .manage-row:hover { background: rgba(214,211,209,0.12); }
body.theme-neutral .settings-panel {
  border-left-color: rgba(168,162,158,0.4);
  box-shadow: -8px 0 40px rgba(87,83,78,0.1);
}
body.theme-neutral .settings-header {
  background: linear-gradient(135deg, rgba(214,211,209,0.28), rgba(231,229,228,0.28));
  border-bottom-color: rgba(168,162,158,0.28);
}
body.theme-neutral .settings-divider { background: rgba(168,162,158,0.3); }
body.theme-neutral .settings-dropdown-toggle,
body.theme-neutral .settings-action-btn {
  border-color: rgba(168,162,158,0.35);
  background: rgba(248,247,246,0.95);
}
body.theme-neutral .settings-dropdown-toggle:hover,
body.theme-neutral .settings-action-btn:hover {
  border-color: #57534e;
  background: rgba(255,255,255,0.98);
}
body.theme-neutral .settings-section.is-expanded .settings-dropdown-toggle {
  border-color: rgba(87,83,78,0.45);
  background: rgba(214,211,209,0.14);
}
body.theme-neutral .settings-toggle-row,
body.theme-neutral .settings-option-row { border-bottom-color: rgba(168,162,158,0.22); }
body.theme-neutral .settings-toggle.is-on { background: #57534e; }
body.theme-neutral .theme-mode-btn,
body.theme-neutral .display-mode-btn {
  border-color: rgba(168,162,158,0.4);
}
body.theme-neutral .theme-mode-btn:hover,
body.theme-neutral .display-mode-btn:hover { border-color: #57534e; }
body.theme-neutral .theme-mode-btn.is-active,
body.theme-neutral .display-mode-btn.is-active {
  border-color: #57534e;
  background: rgba(214,211,209,0.12);
}
body.theme-neutral .theme-swatch { border-color: rgba(168,162,158,0.4); }
body.theme-neutral .theme-swatch:hover { border-color: #57534e; }
body.theme-neutral .theme-swatch.is-active {
  border-color: #57534e;
  background: rgba(214,211,209,0.12);
}
body.theme-neutral .btn-settings.is-active { box-shadow: 0 0 0 2px #57534e; }

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */
body.theme-dark {
  --cream:       #101217;
  --white:       #181c24;
  --text-dark:   #f4f2f6;
  --text-mid:    #cdc6d4;
  --text-light:  #8f8a96;
  --shadow-soft: 0 10px 28px rgba(0,0,0,0.34);
  --shadow-card: 0 12px 24px rgba(0,0,0,0.22);
  background: var(--cream);
}
body.theme-dark .app-header {
  background: linear-gradient(135deg, #181c24 0%, #241f2b 58%, #1b2430 100%);
  box-shadow: 0 2px 20px rgba(0,0,0,0.28);
}
body.theme-dark .hero {
  background: linear-gradient(135deg, #181c24 0%, #241f2b 58%, #1b2430 100%);
}
body.theme-dark .hero-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}
body.theme-dark .budget-bar-track {
  background: rgba(255,255,255,0.08);
}
body.theme-dark .budget-bar-fill {
  background: linear-gradient(90deg, var(--pink-mid), var(--lilac-mid));
}
body.theme-dark .back-btn,
body.theme-dark .btn-month,
body.theme-dark .btn-settings,
body.theme-dark .settings-close-btn,
body.theme-dark .modal-close,
body.theme-dark .receipt-close {
  background: rgba(255,255,255,0.08);
  color: var(--text-mid);
}
body.theme-dark .back-btn:hover,
body.theme-dark .btn-month:hover,
body.theme-dark .btn-settings:hover,
body.theme-dark .settings-close-btn:hover,
body.theme-dark .modal-close:hover,
body.theme-dark .receipt-close:hover {
  background: rgba(255,255,255,0.14);
}
body.theme-dark .btn-settings.is-active {
  background: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 2px var(--pink-deep);
}
body.theme-dark .detail-total-pill {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  color: var(--text-dark);
}
body.theme-dark .scan-receipt-btn,
body.theme-dark .settings-action-btn,
body.theme-dark .settings-dropdown-toggle {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}
body.theme-dark .scan-receipt-icon {
  background: rgba(255,255,255,0.08);
}
body.theme-dark .passcode-input {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-dark);
}
body.theme-dark .passcode-brand-mark {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  color: var(--text-dark);
}
body.theme-dark .scan-receipt-btn:hover,
body.theme-dark .settings-action-btn:hover,
body.theme-dark .settings-dropdown-toggle:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.14);
}
body.theme-dark .tiles-toolbar-btn,
body.theme-dark .theme-mode-btn,
body.theme-dark .display-mode-btn,
body.theme-dark .theme-swatch {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-mid);
}
body.theme-dark .tiles-toolbar-btn:hover,
body.theme-dark .theme-mode-btn:hover,
body.theme-dark .display-mode-btn:hover,
body.theme-dark .theme-swatch:hover {
  border-color: var(--pink-mid);
  color: var(--text-dark);
}
body.theme-dark .theme-mode-btn.is-active,
body.theme-dark .display-mode-btn.is-active,
body.theme-dark .theme-swatch.is-active {
  border-color: var(--pink-deep);
  background: rgba(255,255,255,0.08);
  color: var(--text-dark);
}
body.theme-dark .tile,
body.theme-dark .modal-card,
body.theme-dark .passcode-card,
body.theme-dark .receipt-card,
body.theme-dark .manage-card,
body.theme-dark .settings-panel,
body.theme-dark .family-person-card,
body.theme-dark .family-child-card,
body.theme-dark .debt-item,
body.theme-dark .pot-card,
body.theme-dark .child-block,
body.theme-dark .income-banner,
body.theme-dark .pocket-money-card {
  background: var(--white);
  border-color: rgba(255,255,255,0.08);
  box-shadow: var(--shadow-card);
}
body.theme-dark .tile:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  box-shadow: 0 12px 28px rgba(0,0,0,0.24);
}
body.theme-dark .tile-emoji,
body.theme-dark .club-icon-wrap,
body.theme-dark .pot-btn,
body.theme-dark .manage-toggle,
body.theme-dark .theme-swatch.is-active .swatch-dot {
  box-shadow: none;
}
body.theme-dark .family-person-preview,
body.theme-dark .family-child-badge {
  background: rgba(255,255,255,0.08);
  color: var(--text-mid);
}
body.theme-dark .tile-emoji {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
}
body.theme-dark .entry-item,
body.theme-dark .settings-toggle-row,
body.theme-dark .settings-option-row,
body.theme-dark .manage-row {
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-dark .modal-header,
body.theme-dark .receipt-header,
body.theme-dark .manage-header,
body.theme-dark .settings-header {
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-dark .modal-primary,
body.theme-dark .manage-done-btn,
body.theme-dark .pm-pay-btn {
  background: linear-gradient(135deg, var(--pink-mid), var(--lilac-mid));
  color: #fff;
}
body.theme-dark .modal-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text-mid);
}
body.theme-dark .modal-delete {
  background: rgba(255,255,255,0.08);
  color: var(--text-mid);
}
body.theme-dark .modal-field input,
body.theme-dark .modal-field select {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-dark);
}
body.theme-dark .modal-field input:focus,
body.theme-dark .modal-field select:focus {
  outline-color: rgba(255,255,255,0.12);
  border-color: var(--pink-mid);
}
body.theme-dark .receipt-raw,
body.theme-dark .receipt-preview,
body.theme-dark .settings-dropdown-content,
body.theme-dark .budget-bar-track,
body.theme-dark .debt-bar-track {
  background-color: rgba(255,255,255,0.04);
}
body.theme-dark .receipt-status-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
body.theme-dark .bottom-nav {
  background: rgba(16,18,23,0.92);
  border-top-color: rgba(255,255,255,0.08);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.28);
}
body.theme-dark .nav-item:hover,
body.theme-dark .nav-item.active {
  background: rgba(255,255,255,0.06);
}
body.theme-dark .nav-item.active .nav-label {
  color: var(--pink-mid);
}
body.theme-dark .add-row-btn {
  border-color: rgba(255,255,255,0.12);
  color: var(--pink-mid);
  background: rgba(255,255,255,0.03);
}
body.theme-dark .add-row-btn:hover,
body.theme-dark .pot-btn:hover {
  border-color: var(--pink-mid);
  background: rgba(255,255,255,0.08);
  color: var(--text-dark);
}
body.theme-dark .pot-btn {
  background: rgba(255,255,255,0.05);
  color: var(--text-mid);
}
body.theme-dark .settings-divider,
body.theme-dark .manage-footer,
body.theme-dark .child-total {
  border-top-color: rgba(255,255,255,0.08);
}
body.theme-dark .settings-divider {
  background: rgba(255,255,255,0.08);
}
body.theme-dark .manage-row:hover {
  background: rgba(255,255,255,0.05);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 720px) {
  body.display-grid .tiles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  body.display-grid .tiles-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hero-inner { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-amount { font-size: 18px; }
  .detail-content.two-child-grid { grid-template-columns: 1fr; }
  .detail-content.pots-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .hero-inner { grid-template-columns: 1fr; gap: 10px; }
  .hero-card {
    display: flex; align-items: center; gap: 12px;
    text-align: left; padding: 14px 16px;
  }
  .hero-icon { margin-bottom: 0; font-size: 22px; }
  .hero-amount { font-size: 22px; }
  .home-tools-grid {
    grid-template-columns: 1fr;
  }
  .scan-receipt-btn {
    padding: 14px 16px;
    align-items: flex-start;
  }
  body.display-grid .tiles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body.display-grid .tile {
    min-height: 158px;
    padding: 14px;
    gap: 14px;
  }
  body.display-grid .tile-name {
    font-size: 15px;
  }
  body.display-grid .tile-sub {
    font-size: 11px;
    min-height: 30px;
  }
  body.display-grid .tile-amount {
    font-size: 16px;
  }
  .scan-receipt-btn strong { font-size: 16px; }
  .receipt-preview-wrap,
  .receipt-status,
  .receipt-form,
  .receipt-raw {
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 0;
    margin-right: 0;
  }
  .modal-actions { flex-wrap: wrap; }
  .modal-primary,
  .modal-secondary {
    width: 100%;
  }
  .modal-delete { margin-right: 0; }
}

@media (max-width: 359px) {
  body.display-grid .tiles-grid {
    grid-template-columns: 1fr;
  }
}