/* ============================================================
   IS THIS WORTH MY MONEY? - Main Stylesheet
   ============================================================
   Color Palette:
   - Orange/Red accent:    #E85D3A
   - Green accent:         #02b887
   - Gold accent:          #D4940A
   - Purple accent:        #dedaff
   - Blue pie slice:       #5B6AD0
   - Pink pie slice:       #F4C4C4
   - Profile icon:         #E08A7E
   - Card background:      #FFFFFF
   - Page background:      #FFFFFF
   - Inner backgrounds:    #F5F3F0
   - Dark text:            #2D2A26
   - Medium text:          #6B6560
   - Light text:           #A09A94
   - Placeholder text:     #C5C0BA
   - Subtle border:        #EDEAE6
   - Subtle shadow:        rgba(0,0,0,0.06)
   ============================================================ */

/* ============================================================
   1. RESET & BASE
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Nunito', sans-serif;
  background: #FFFFFF;
  color: #2D2A26;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

@media (min-width: 768px) {
  #app {
    max-width: 100%;
  }

  /* Default: all screens stay 420px centered unless individually widened */
  .screen {
    max-width: 420px;
    margin: 0 auto;
  }

  /* Screens that use the wide desktop layout share the same width */
  #screen-home,
  #screen-profile,
  #screen-regular,
  #screen-onetime,
  #screen-expenses {
    max-width: 900px;
    padding: 28px 48px 60px;
  }
}

/* ============================================================
   2. SCREEN MANAGEMENT
   ============================================================ */
.screen {
  display: none;
  padding: 20px 24px 50px;
  min-height: 100vh;
  animation: fadeIn 0.3s ease-out;
}

.screen.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.4s ease;
}

/* ============================================================
   3. TOP BAR
   ============================================================ */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 6px;
}

.top-bar-spacer {
  width: 40px;
}

.top-bar-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #EDEAE6;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s;
}

.back-btn:active {
  background: #E2DFDB;
}

.home-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #02b887;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.15s, background 0.15s;
}

.home-icon-btn:active {
  transform: scale(0.93);
  background: #3D9A69;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #6B6560;
  background: #EDEAE6;
  height: 36px;
  border-radius: 10px;
  padding: 0 14px;
  transition: background 0.15s;
}

.lang-btn:active {
  background: #E2DFDB;
}

.profile-icon {
  width: 28px;
  height: 28px;
}

.profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #F5D5D0;
  border-radius: 10px;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.15s;
}

.profile-btn:hover {
  transform: scale(1.05);
  opacity: 0.85;
}

.profile-btn:active {
  transform: scale(0.93);
}

.profile-btn.active-profile {
  opacity: 1;
}

/* ============================================================
   4. HOME SCREEN
   ============================================================ */
.home-title {
  font-size: 34px;
  font-weight: 800;
  color: #E85D3A;
  text-align: center;
  line-height: 1.15;
  margin-top: 12px;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.home-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0 4px;
}

.home-illustration img {
  width: 280px;
  height: auto;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}


.home-question {
  font-size: 19px;
  font-weight: 800;
  color: #2D2A26;
  text-align: center;
  margin-bottom: 18px;
}

.home-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-btn {
  width: 100%;
  padding: 18px 24px;
  border: none;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #2D2A26;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.home-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.home-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.btn-regular {
  background: #dedaff;
}

.btn-onetime {
  background: #bcffed;
}

/* ============================================================
   5. CARDS (shared)
   ============================================================ */
.card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 8px;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.card-inner {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 20px 22px;
}

.card-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.submit-arrow {
  background: #E85D3A;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 8px 28px;
  border-radius: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(232,93,58,0.15);
}

.submit-arrow:hover {
  background: #02b887;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2,184,135,0.2);
}

.submit-arrow:active {
  transform: scale(0.97);
}

/* Profile-only arrow icon button (plain > with no box) */
.submit-arrow-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  outline: none;
  -webkit-appearance: none;
  transition: transform 0.15s;
}

.submit-arrow-icon:hover {
  transform: scale(1.15);
}

.submit-arrow-icon:active {
  transform: scale(0.9);
}

/* ============================================================
   6. PROFILE SCREEN
   ============================================================ */
.profile-header {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.profile-title-text {
  color: #E85D3A;
}

.profile-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

.profile-row {
  background: #F5F3F0;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-label {
  font-size: 15px;
  font-weight: 700;
  color: #6B6560;
  white-space: nowrap;
}

.profile-value-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.profile-input {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #02b887;
  background: #FFFFFF;
  border: 1.5px solid #EDEAE6;
  border-radius: 14px;
  padding: 8px 14px;
  width: auto;
  min-width: 80px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-input:focus {
  border-color: #02b887;
  box-shadow: 0 0 0 3px rgba(76,175,122,0.12);
}

.profile-input::placeholder {
  color: #C5C0BA;
}

.income-input {
  min-width: 120px;
}

.hours-input {
  width: 60px;
  min-width: 60px;
}

.profile-suffix {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  white-space: nowrap;
}

/* --- Currency dropdown --- */
.currency-search-wrapper {
  position: relative;
  flex: 1;
}

.currency-search-input {
  width: 100%;
  cursor: text;
}

.currency-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #EDEAE6;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  margin-top: 6px;
}

.currency-dropdown.open {
  display: block;
}

.currency-option {
  padding: 12px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #6B6560;
  cursor: pointer;
  transition: background 0.1s;
}

.currency-option:hover,
.currency-option.highlighted {
  background: #F5F3F0;
  color: #02b887;
}

.currency-option:first-child {
  border-radius: 16px 16px 0 0;
}

.currency-option:last-child {
  border-radius: 0 0 16px 16px;
}

.currency-no-results {
  padding: 12px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #C5C0BA;
  font-style: italic;
}

/* --- Hourly rate card --- */
.hourly-rate-card {
  background: #FFFFFF;
  text-align: center;
  padding: 8px;
  display: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.hourly-rate-card.visible {
  display: block;
}

.hourly-rate-inner {
  background: #F5F3F0;
  border-radius: 18px;
  padding: 28px 20px;
}

.hourly-rate-label {
  font-size: 16px;
  font-weight: 700;
  color: #A09A94;
  margin-bottom: 10px;
}

.hourly-rate-value {
  font-size: 40px;
  font-weight: 900;
  color: #E85D3A;
  margin-bottom: 10px;
  letter-spacing: -1px;
}

.hourly-rate-note {
  font-size: 12px;
  color: #C5C0BA;
}

/* ============================================================
   7. SECTION TITLES
   ============================================================ */
.section-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}

.regular-title {
  color: #5B6AD0;
}

.onetime-title {
  color: #02b887;
}

/* ============================================================
   8. INPUT CARDS
   ============================================================ */
.input-card {
  background: #FFFFFF;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  flex-wrap: wrap;
}

.input-label {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  white-space: nowrap;
}

.required {
  color: #E85D3A;
  font-weight: 800;
}

.text-input {
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #02b887;
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed #D5D0CB;
  padding: 6px 16px;
  outline: none;
  flex: 1;
  min-width: 100px;
  transition: border-color 0.2s;
}

.text-input:focus {
  border-bottom-color: #02b887;
}

.text-input::placeholder {
  color: #C5C0BA;
}

.number-input {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #02b887;
  background: #F5F3F0;
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 8px 14px;
  width: 70px;
  outline: none;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.number-input:focus {
  border-color: #02b887;
  box-shadow: 0 0 0 3px rgba(76,175,122,0.12);
}

.number-input::placeholder {
  color: #C5C0BA;
}

.cost-input {
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* Group currency badge + cost input so they never line-break apart */
.exp-currency-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.currency-badge {
  font-size: 15px;
  font-weight: 800;
  color: #02b887;
  white-space: nowrap;
}

.frequency-select {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #02b887;
  background: #F5F3F0;
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 8px 16px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s;
}

.frequency-select:focus {
  border-color: #02b887;
}

/* ============================================================
   9. MONTHLY TOTAL
   ============================================================ */
.monthly-total {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
}

.total-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bar {
  width: 32px;
  height: 5px;
  border-radius: 3px;
  background: #9DBCAC;
}

.total-amount {
  font-size: 30px;
  font-weight: 900;
  color: #02b887;
  letter-spacing: -0.5px;
}

.total-period {
  font-size: 14px;
  font-weight: 600;
  color: #A09A94;
}

/* ============================================================
   10. RESULT CARDS
   ============================================================ */
.result-card {
  border-radius: 24px;
  padding: 0;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.result-content {
  padding: 24px;
  background: #FFFFFF;
  border-radius: 20px;
  margin: 5px;
}

.result-purple { background: #dedaff; }
.result-green  { background: #02b887; }
.result-red    { background: #F25C54; }

.result-text {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.65;
  margin-bottom: 16px;
}

.result-text .highlight {
  font-weight: 900;
  color: #E85D3A;
}

.result-text .highlight-bold {
  font-weight: 400;
  color: #2D2A26;
}

.result-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
}

.payoff-link,
.saving-goal-link {
  font-size: 13px;
  font-weight: 700;
  color: #FFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Saving goal calculator --- */
.saving-goal-title {
  font-size: 18px;
  font-weight: 800;
  color: #02b887;
  margin-bottom: 14px;
}

.saving-goal-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.saving-goal-result {
  padding: 18px 24px 12px;
  text-align: center;
}

.saving-goal-result-text {
  font-size: 15px;
  font-weight: 600;
  color: #FFF;
  line-height: 1.7;
  margin-bottom: 16px;
}

.saving-goal-result-text .highlight {
  font-weight: 900;
  color: #FFD700;
}

.saving-goal-result-text .highlight-bold {
  font-weight: 900;
  color: #FFF;
}


.share-btn {
  background: #F0C020;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(240,192,32,0.3);
}

.share-btn:active {
  transform: scale(0.9);
}

.share-btn:hover {
  box-shadow: 0 4px 14px rgba(240,192,32,0.4);
}

/* ============================================================
   11. PIE CHART
   ============================================================ */
.pie-chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pie-chart {
  width: 140px;
  height: 140px;
  min-width: 140px;
  min-height: 140px;
  flex-shrink: 0;
  border-radius: 50%;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pie-legend-square {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.pie-legend-expense { background: #5B6AD0; }
.pie-legend-income  { background: #F4C4C4; }

.pie-legend-text {
  font-size: 13px;
  font-weight: 600;
  color: #A09A94;
  font-style: italic;
}

/* ============================================================
   12. WORKDAY CARD
   ============================================================ */
.workday-title {
  font-size: 16px;
  font-weight: 800;
  color: #6B6560;
  text-align: center;
  margin-bottom: 16px;
}

.workday-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.workday-time-input {
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #02b887;
  background: #F5F3F0;
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 8px 14px;
  outline: none;
  width: 120px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.workday-time-input:focus {
  border-color: #02b887;
  box-shadow: 0 0 0 3px rgba(76,175,122,0.12);
}

.workday-days-input {
  width: 60px;
  text-align: center;
}

.workday-result {
  padding: 16px 24px 8px;
  text-align: center;
}

.workday-result-text {
  font-size: 14px;
  font-weight: 600;
  color: #4A4A4A;
  line-height: 1.7;
}

.workday-result-text .highlight,
.workday-result-text .highlight-bold {
  font-weight: 900;
  color: #E85D3A;
}

/* ============================================================
   13. WARNING CARD
   ============================================================ */
.warning-title {
  font-size: 21px;
  font-weight: 900;
  color: #E85D3A;
  margin-bottom: 12px;
}

.warning-text {
  font-size: 14px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.7;
  margin-bottom: 14px;
}

/* --- Saving tiers (visual pills) --- */
.saving-tiers {
  margin: 16px 0 14px;
}

.saving-tiers-heading {
  font-size: 14px;
  font-weight: 800;
  color: #2D2A26;
  margin-bottom: 10px;
}

.saving-tiers-row {
  display: flex;
  gap: 10px;
}

.saving-tier {
  flex: 1;
  background: #F5F3F0;
  border-radius: 16px;
  padding: 14px 8px 12px;
  text-align: center;
}

.saving-tier-label {
  font-size: 11px;
  font-weight: 800;
  color: #A09A94;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.saving-tier-months {
  font-size: 28px;
  font-weight: 900;
  color: #E85D3A;
  line-height: 1;
  margin-bottom: 4px;
}

.saving-tier-months small {
  font-size: 14px;
  font-weight: 700;
}

.saving-tier-detail {
  font-size: 11px;
  font-weight: 700;
  color: #6B6560;
  margin-bottom: 2px;
}

.saving-tier-pct {
  font-size: 10px;
  font-weight: 600;
  color: #A09A94;
}

.warning-bottom {
  font-size: 14px;
  color: #6B6560;
  margin-top: 8px;
}

/* ============================================================
   14. NO INCOME STATE
   ============================================================ */
.no-income-card {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.no-income-purple { background: #9B7EC8; }
.no-income-green  { background: #02b887; }

.no-income-content {
  background: #FFFFFF;
  border-radius: 20px;
  margin: 5px;
  padding: 30px 24px;
  text-align: center;
}

.no-income-img {
  width: 150px;
  height: auto;
  margin-bottom: 16px;
}

.no-income-link {
  font-size: 15px;
  font-weight: 700;
  color: #A09A94;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: block;
}

/* ============================================================
   15. INCOME SUMMARY
   ============================================================ */
.income-summary {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 18px 24px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.income-summary-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.income-summary-label {
  font-size: 14px;
  font-weight: 600;
  color: #A09A94;
}

.income-summary-value {
  font-size: 17px;
  font-weight: 800;
  color: #02b887;
}

.income-summary-value.not-set {
  color: #E85D3A;
}

.income-summary-note {
  font-size: 12px;
  color: #C5C0BA;
  text-align: right;
  margin-top: 8px;
}

.income-summary-link {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #A09A94;
  margin-top: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.income-summary-link:hover {
  color: #6B6560;
}

/* ============================================================
   16. BOTTOM NAVIGATION
   ============================================================ */
.bottom-nav {
  margin-top: 10px;
  margin-bottom: 20px;
}

.bottom-nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bottom-nav-buttons .nav-btn:nth-child(n+3) {
  flex: 1 1 100%;
}

.nav-btn {
  flex: 1;
  padding: 15px 12px;
  border: none;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2D2A26;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.nav-btn:active {
  transform: scale(0.97);
}

.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.nav-btn-regular { background: #dedaff; }
.nav-btn-onetime { background: #bcffed; }
.nav-btn-expenses { background: #FFF5D6; }

/* ============================================================
   17. DAILY EXPENSES WIZARD
   ============================================================ */

/* --- Home button for expenses --- */
.btn-expenses {
  background: #FFF3D0;
}

/* --- Title --- */
.expenses-title {
  color: #D4940A;
}

/* --- Subtitle --- */
.exp-subtitle {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  margin-bottom: 16px;
  margin-top: -10px;
}

/* --- No income (yellow variant) --- */
.no-income-yellow {
  background: #E8C07A;
}

.exp-no-income-illustration {
  margin-bottom: 12px;
}

.exp-no-income-text {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.6;
  margin-bottom: 16px;
}

.exp-no-income-link {
  font-size: 15px;
  font-weight: 700;
  color: #D4940A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Pie chart area (right-aligned in steps) --- */
.exp-pie-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.exp-step-pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Step header --- */
.exp-step-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

.exp-step-icon-wrap {
  display: flex;
  flex-direction: column;
}

.exp-step-icon {
  display: block;
  margin-bottom: 6px;
}

.exp-step-underline {
  height: 3px;
  width: 100%;
  min-width: 80px;
  background: #02b887;
  border-radius: 2px;
}

.exp-step-progress {
  font-size: 14px;
  font-weight: 700;
  color: #A09A94;
  padding-top: 4px;
}

.exp-step-title {
  font-size: 22px;
  font-weight: 900;
  color: #D4940A;
  margin-bottom: 8px;
}

.exp-step-question {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  margin-bottom: 18px;
  line-height: 1.5;
}

/* --- Choice cards (side by side, Housing style) --- */
.exp-choice-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.exp-choice-card {
  flex: 1;
  background: #E8F5EE;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 20px 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
  font-family: 'Nunito', sans-serif;
}

.exp-choice-card:active {
  transform: scale(0.97);
}

.exp-choice-card:hover {
  border-color: #02b887;
}

.exp-choice-card.selected {
  background: #ffecc1;
}

.exp-choice-card.not-selected {
  opacity: 0.5;
}

.exp-choice-illustration {
  margin-bottom: 10px;
}

.exp-choice-label {
  font-size: 14px;
  font-weight: 700;
  color: #2D2A26;
  display: block;
  line-height: 1.4;
}

/* --- Choice buttons (full width, Food/Transport style) --- */
.exp-choice-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.exp-choice-btn {
  width: 100%;
  padding: 22px 24px;
  border: 1px solid transparent;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #2D2A26;
  cursor: pointer;
  background: #E8F5EE;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}

.exp-choice-btn-yes {
  background: #E8F5EE;
}

.exp-choice-btn:active {
  transform: scale(0.98);
}

.exp-choice-btn:hover {
  border-color: #02b887;
}

.exp-choice-btn.selected {
  background: #ffecc1;
}

.exp-choice-btn.not-selected {
  opacity: 0.5;
}

/* --- Message card (green response) --- */
.exp-message-card {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.exp-message-text {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.5;
}

.exp-message-highlight {
  color: #02b887;
  font-weight: 800;
}

/* --- Inline input (Housing amount) --- */
.exp-inline-input {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
}

/* --- OR separator --- */
.exp-or-separator {
  text-align: center;
  margin: 12px 0;
  position: relative;
}

.exp-or-separator span {
  font-size: 13px;
  font-weight: 800;
  color: #E85D3A;
  background: #FFFFFF;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}

/* --- Utility total row --- */
.exp-utility-total {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1.5px solid #EDEAE6;
}

/* --- Breakdown toggle --- */
.exp-breakdown-toggle {
  width: 100%;
  background: #FFFFFF;
  border: 1.5px solid #EDEAE6;
  border-radius: 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #6B6560;
  cursor: pointer;
  padding: 14px 16px;
  text-align: center;
  transition: background 0.15s;
}

.exp-breakdown-toggle:hover {
  background: #F5F3F0;
}

/* --- Breakdown grid --- */
.exp-breakdown-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1.5px solid #EDEAE6;
  padding: 14px 16px;
}

.exp-breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.exp-breakdown-label {
  font-size: 14px;
  font-weight: 800;
  color: #D4940A;
  min-width: 80px;
  background: #FFF9E6;
  padding: 4px 12px;
  border-radius: 10px;
  text-align: center;
}

/* --- Sub-title/question --- */
.exp-sub-question {
  font-size: 16px;
  font-weight: 800;
  color: #2D2A26;
  margin: 20px 0 14px;
}

/* --- Subcategory list (Food & Transport) --- */
.exp-subcategory-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exp-subcat-row {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.exp-subcat-badge {
  font-size: 14px;
  font-weight: 800;
  color: #D4940A;
  background: #FFF9E6;
  padding: 4px 14px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
}

.exp-subcat-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.exp-times-input {
  width: 50px !important;
  text-align: center;
}

.exp-times-label {
  font-size: 13px;
  font-weight: 600;
  color: #A09A94;
  white-space: nowrap;
}

.exp-times-x {
  font-size: 16px;
  font-weight: 800;
  color: #02b887;
}

/* --- Result text in steps --- */
.exp-result-text {
  font-size: 14px;
  font-weight: 600;
  color: #6B6560;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 12px;
}

.exp-result-text .highlight {
  font-weight: 900;
  color: #E85D3A;
  font-style: normal;
}

/* --- Bottom nav arrows --- */
.exp-bottom-nav {
  margin-top: 24px;
  padding-bottom: 20px;
}

.exp-nav-arrows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.exp-nav-arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #E85D3A;
  transition: color 0.15s, transform 0.15s;
}

.exp-nav-arrow:hover {
  color: #02b887;
}

.exp-nav-arrow:active {
  transform: scale(0.95);
}

.exp-nav-arrow.exp-nav-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.exp-nav-arrow.exp-nav-disabled:hover {
  color: #E85D3A;
}

/* Currency note inside nav row — hidden on mobile, shown on desktop */
.exp-nav-currency-note {
  display: none;
  margin: 0;
  text-align: center;
}

/* --- Pie chart legend (shared by steps & milestone) --- */
.exp-pie-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.exp-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.exp-pie-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.exp-pie-legend-label {
  font-size: 11px;
  font-weight: 600;
  color: #6B6560;
}

/* --- Milestone summary --- */
.exp-milestone-card {
  text-align: center;
  position: relative;
}

.exp-big-pie {
  width: 220px;
  height: 220px;
  margin: 16px auto 20px;
  border-radius: 50%;
  display: block;
}

.exp-milestone-summary {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.7;
  margin-bottom: 24px;
  text-align: left;
}

.exp-milestone-summary .highlight {
  font-weight: 900;
  color: #E85D3A;
}

.exp-milestone-summary .highlight-bold {
  font-weight: 900;
  color: #2D2A26;
}

/* --- Hours breakdown --- */
.exp-hours-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  text-align: left;
}

.exp-hours-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F5F3F0;
  border-radius: 14px;
  padding: 12px 16px;
  transition: transform 0.15s, box-shadow 0.2s;
}

.exp-hours-row.clickable {
  cursor: pointer;
}

.exp-hours-row.clickable:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.exp-hours-row.clickable:active {
  transform: scale(0.98);
}

.exp-hours-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.exp-hours-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #6B6560;
}

.exp-hours-value {
  font-size: 14px;
  font-weight: 800;
  color: #E85D3A;
  white-space: nowrap;
}

/* --- Confetti canvas --- */
.exp-confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
}

/* --- Profile expenses section --- */
.profile-expenses-card {
  padding: 16px !important;
}


.profile-expenses-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.exp-sub-title {
  font-size: 16px;
  font-weight: 800;
  color: #6B6560;
  margin: 0;
}

.exp-edit-btn {
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #D4940A;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-expense-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #EDEAE6;
  transition: background 0.15s;
}

.profile-expense-row.clickable {
  cursor: pointer;
  padding: 8px 6px;
  margin: 0 -6px;
  border-radius: 8px;
}

.profile-expense-row.clickable:hover {
  background: #F5F3F0;
}

.profile-expense-row.clickable:active {
  background: #EDEAE6;
}

.profile-expense-row:last-child {
  border-bottom: none;
}

.profile-expense-cat {
  font-size: 14px;
  font-weight: 600;
  color: #6B6560;
}

.profile-expense-amount {
  font-size: 14px;
  font-weight: 800;
  color: #02b887;
}

.profile-expenses-total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid #EDEAE6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Utility options container --- */
.exp-utility-options {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */
@media (max-width: 420px) {
  #app {
    max-width: 100%;
  }

  .screen {
    padding: 16px 18px;
  }

  .home-title {
    font-size: 32px;
  }
}

/* ============================================================
   19. OVER-INCOME MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(45, 42, 38, 0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 32px 24px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  animation: modalSlideUp 0.3s ease-out;
}

.modal-icon {
  margin-bottom: 16px;
}

.modal-title {
  font-size: 20px;
  font-weight: 900;
  color: #D4940A;
  line-height: 1.3;
  margin-bottom: 10px;
}

.modal-body {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.6;
  margin-bottom: 24px;
}

.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-btn {
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 18px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.modal-btn:active {
  transform: scale(0.97);
}

.modal-btn-review {
  background: #FFF3D0;
  color: #D4940A;
}

.modal-btn-review:hover {
  box-shadow: 0 4px 14px rgba(212, 148, 10, 0.15);
}

.modal-btn-adjust {
  background: #E8F5EE;
  color: #02b887;
}

.modal-btn-adjust:hover {
  box-shadow: 0 4px 14px rgba(76, 175, 122, 0.15);
}

/* ============================================================
   20. OTHER MONTHLY EXPENSES
   ============================================================ */

/* --- Milestone prompt card --- */
.exp-other-prompt-card {
  background: #E8F5EE;
  border-radius: 20px;
  padding: 20px;
  margin-top: 20px;
}

.exp-other-prompt-title {
  font-size: 16px;
  font-weight: 800;
  color: #D4940A;
  margin-bottom: 6px;
}

.exp-other-prompt-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: #A09A94;
  font-style: italic;
  margin-bottom: 16px;
}

.exp-other-prompt-buttons {
  display: flex;
  gap: 10px;
}

.exp-other-prompt-btn {
  flex: 1;
  padding: 14px 12px;
  border: none;
  border-radius: 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2D2A26;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  text-align: center;
}

.exp-other-prompt-btn:active {
  transform: scale(0.97);
}

.exp-other-prompt-btn-yes {
  background: #c1e8d1;
}

.exp-other-prompt-btn-yes:hover {
  box-shadow: 0 4px 14px rgba(76, 175, 122, 0.15);
}

.exp-other-prompt-btn-skip {
  background: #FFFFFF;
}

.exp-other-prompt-btn-skip:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* --- Progress dots --- */
.exp-progress-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.exp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2D2A26;
}

/* --- Other expenses section header --- */
.exp-other-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.exp-other-section-title {
  font-size: 20px;
  font-weight: 900;
  color: #D4940A;
}

/* --- Search bar --- */
.exp-other-search-wrap {
  position: relative;
  margin-bottom: 16px;
}

.exp-other-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.exp-other-search-input {
  width: 100%;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2D2A26;
  background: #FFF9E6;
  border: 1.5px solid #EDEAE6;
  border-radius: 16px;
  padding: 12px 16px 12px 40px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.exp-other-search-input:focus {
  border-color: #d6d1d1;
  box-shadow: 0 0 0 3px rgba(212, 148, 10, 0.1);
}

.exp-other-search-input::placeholder {
  color: #C5C0BA;
}

/* --- Category cards --- */
#other-expenses-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.exp-other-card {
  background: #F5F3F0;
  border-radius: 16px;
  overflow: hidden;
  transition: background 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.exp-other-card.expanded {
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  cursor: default;
}

.exp-other-card.filled .exp-other-card-label {
  color: #D4940A;
  font-weight: 900;
}

.exp-other-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
}

.exp-other-card-label {
  font-size: 15px;
  font-weight: 700;
  color: #2D2A26;
}

.exp-other-card-total {
  font-size: 14px;
  font-weight: 800;
  color: #2D2A26;
}

/* --- Card body (expanded) --- */
.exp-other-card-body {
  padding: 0 18px 14px;
}

.exp-other-row {
  margin-bottom: 8px;
}

.exp-other-row-inputs {
  display: flex;
  align-items: center;
  gap: 5px;
}

.exp-other-row-name {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #02b887;
  background: #F5F3F0;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 8px 10px;
  flex: 2 1 0;
  min-width: 0;
  outline: none;
  transition: border-color 0.2s;
}

.exp-other-row-name:focus {
  border-color: #02b887;
}

.exp-other-row-name::placeholder {
  color: #C5C0BA;
}

.exp-other-row-sep {
  font-size: 14px;
  font-weight: 600;
  color: #A09A94;
  flex-shrink: 0;
}

.exp-other-row-amount {
  flex: 2 1 0 !important;
  min-width: 0 !important;
  text-align: left !important;
  padding: 8px 8px !important;
  font-size: 14px !important;
}

.exp-other-row-times {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
  padding: 8px 6px !important;
  font-size: 14px !important;
}

.exp-other-row-inputs .currency-badge,
.exp-other-row-inputs .exp-other-row-sep,
.exp-other-row-inputs .exp-times-x,
.exp-other-row-inputs .exp-times-label {
  flex-shrink: 0;
  font-size: 14px;
}

/* --- Remove button --- */
.exp-other-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  margin-left: 1px;
  opacity: 0.4;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.exp-other-remove-btn:hover {
  opacity: 1;
}

.exp-other-remove-btn:active {
  transform: scale(0.85);
}

/* --- Add button --- */
.exp-other-add-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-top: 4px;
  transition: transform 0.15s;
}

.exp-other-add-btn:hover {
  transform: scale(1.15);
}

.exp-other-add-btn:active {
  transform: scale(0.9);
}

/* --- No results --- */
.exp-other-no-results-text {
  font-size: 14px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.5;
  margin-bottom: 12px;
}

#other-expenses-no-results-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Over-income alert (inline card) --- */
.exp-other-over-income-card {
  background: #F5F3F0;
  border-radius: 24px;
  padding: 28px 24px;
  margin: 20px 0;
  text-align: center;
}

.exp-other-over-income-title {
  font-size: 20px;
  font-weight: 900;
  color: #2D2A26;
  margin-bottom: 10px;
}

.exp-other-over-income-text {
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.6;
  margin-bottom: 20px;
}

.exp-other-over-income-rows {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 12px;
}

.exp-other-over-income-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.exp-other-over-income-cat {
  font-size: 14px;
  font-weight: 800;
  color: #2D2A26;
  text-align: right;
  min-width: 100px;
}

.exp-other-over-income-val {
  font-size: 14px;
  font-weight: 600;
  color: #6B6560;
}

.exp-other-over-income-total {
  font-size: 15px;
  font-weight: 800;
  color: #E85D3A;
  margin-bottom: 16px;
}

.exp-other-over-income-actions {
  margin-bottom: 12px;
}

.exp-other-over-income-btn {
  background: #c1e8d1;
  border: none;
  border-radius: 18px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #2D2A26;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.exp-other-over-income-btn:active {
  transform: scale(0.97);
}

.exp-other-over-income-btn:hover {
  box-shadow: 0 4px 14px rgba(76, 175, 122, 0.15);
}

.exp-other-over-income-income {
  background: #FFF9E6;
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
}

.exp-other-over-income-income-label {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #E85D3A;
  margin-bottom: 10px;
}

/* ============================================================
   21. SWIPE BOUNCE ANIMATIONS
   ============================================================ */
@keyframes swipeBounceLeft {
  0% { transform: translateX(0); }
  30% { transform: translateX(-12px); }
  60% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

@keyframes swipeBounceRight {
  0% { transform: translateX(0); }
  30% { transform: translateX(12px); }
  60% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

.swipe-bounce-left {
  animation: swipeBounceLeft 0.35s ease-out;
}

.swipe-bounce-right {
  animation: swipeBounceRight 0.35s ease-out;
}

/* ============================================================
   22. RESULT PAGE
   ============================================================ */

/* --- Shared section wrapper --- */
.res-section {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 24px 20px;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.res-title {
  font-size: 22px;
  font-weight: 900;
  color: #2D2A26;
  text-align: center;
  margin-bottom: 18px;
}

/* --- Section 1: The numbers are in --- */
.res-summary-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.res-summary-card {
  flex: 1;
  border-radius: 18px;
  padding: 16px 14px;
  text-align: center;
}

.res-card-earn {
  background: #FFFFFF;
  border: 1px solid #94c2a9;
}

.res-card-spend {
  background: #FFFFFF;
  border: 1px solid #ffacac;
}

.res-card-save {
  background: #FFF9E6;
}

.res-summary-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #6B6560;
  margin-bottom: 4px;
}

.res-summary-currency {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #A09A94;
  margin-bottom: 2px;
}

.res-card-earn .res-summary-currency {
  color: #02b887;
}

.res-card-spend .res-summary-currency {
  color: #E85D3A;
}

.res-card-save .res-summary-currency {
  color: #D4940A;
}

.res-summary-value {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.3px;
}

.res-card-earn .res-summary-value {
  color: #02b887;
}

.res-card-spend .res-summary-value {
  color: #E85D3A;
}

.res-card-save .res-summary-value {
  color: #D4940A;
}

/* --- Section divider --- */
.res-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  padding: 0 10px;
}

.res-divider-line {
  flex: 1;
  height: 1px;
  background: #EDEAE6;
}

.res-divider-icon {
  flex-shrink: 0;
  opacity: 0.6;
}

/* --- Section 2: Where your time goes --- */
.res-time-intro {
  font-size: 13px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.6;
  margin-bottom: 16px;
}

.res-time-intro .res-weeks-expense {
  font-weight: 900;
  color: #E85D3A;
}

.res-time-intro .res-weeks-save {
  font-weight: 900;
  color: #D4940A;
}

.res-timeline-track-wrap {
  position: relative;
  margin-bottom: 18px;
}

.res-timeline-track {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.res-timeline-seg {
  height: 100%;
}

.res-timeline-markers {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  z-index: 2;
}

.res-timeline-marker {
  width: 10px;
  height: 10px;
  background: #E85D3A;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  box-sizing: border-box;
}

.res-timeline-weeks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.res-timeline-weeks span {
  font-size: 11px;
  font-weight: 600;
  color: #A09A94;
  white-space: nowrap;
  text-align: center;
}

.res-time-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.res-time-breakdown-title {
  font-size: 14px;
  font-weight: 800;
  color: #2D2A26;
  margin-bottom: 6px;
}

.res-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.res-time-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}

.res-time-range {
  font-size: 13px;
  font-weight: 800;
  min-width: 90px;
}

.res-time-cat {
  font-size: 13px;
  font-weight: 600;
  color: #6B6560;
}

/* --- Section 3: Looking ahead --- */
.res-ahead-savings-card {
  background: #FFF9E6;
  border: 1px solid #EDEAE6;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.res-ahead-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #6B6560;
  margin-bottom: 6px;
}

.res-ahead-value-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.res-ahead-value {
  font-size: 28px;
  font-weight: 900;
  color: #D4940A;
  letter-spacing: -0.5px;
}

.res-ahead-value.res-nothing {
  color: #E85D3A;
}

.res-ahead-unit {
  font-size: 15px;
  font-weight: 600;
  color: #A09A94;
}

.res-ahead-explain {
  font-size: 13px;
  font-weight: 600;
  color: #6B6560;
  line-height: 1.65;
  margin-bottom: 16px;
}

.res-ahead-bottom-row {
  display: flex;
  gap: 10px;
}

.res-ahead-bottom-card {
  flex: 1;
  background: #F5F3F0;
  border: 1px solid #EDEAE6;
  border-radius: 18px;
  padding: 16px 14px;
  text-align: center;
}

.res-ahead-bottom-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6B6560;
  margin-bottom: 4px;
  line-height: 1.4;
}

.res-ahead-bottom-currency {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #D4940A;
  margin-bottom: 2px;
}

.res-ahead-bottom-value {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: #D4940A;
  letter-spacing: -0.3px;
}

.res-ahead-bottom-note {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #A09A94;
  margin-top: 4px;
  line-height: 1.4;
}

.res-ahead-months-value {
  color: #02b887;
}

.res-ahead-bottom-card.res-nothing-card {
  background: #FFF0EC;
}

.res-ahead-bottom-card.res-nothing-card .res-ahead-bottom-label {
  color: #E85D3A;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.5;
}

/* --- Section 4: How healthy is your budget? --- */
.res-health-comparison {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 14px;
}

.res-health-col {
  flex: 1;
}

.res-health-col-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #2D2A26;
  margin-bottom: 10px;
}

.res-health-labels-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 28px;
  gap: 0;
  min-width: 52px;
}

.res-health-cat-label {
  font-size: 12px;
  font-weight: 700;
  color: #6B6560;
  text-align: center;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.res-health-cat-label:last-child {
  margin-bottom: 0;
}

.res-health-bar-wrap {
  background: #EDEAE6;
  border-radius: 6px;
  height: 30px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

.res-health-bar-wrap:last-child {
  margin-bottom: 0;
}

.res-health-bar {
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  transition: width 0.6s ease-out;
  min-width: 0;
}

.res-health-bar-label {
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
}

/* Actual bar colors */
.res-bar-green { background: #02b887; }
.res-bar-red { background: #F25C54; }
.res-bar-grey { background: #C5C0BA; }

/* Recommended bar color */
.res-bar-recommended { background: #E8C07A; }

.res-health-footnote {
  font-size: 11px;
  font-weight: 600;
  color: #A09A94;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 18px;
}

/* --- Savings health score — vertical stacked --- */
.res-score-card {
  background: #F5F3F0;
  border-radius: 18px;
  padding: 20px 16px 16px;
}

.res-score-title {
  font-size: 14px;
  font-weight: 800;
  color: #2D2A26;
  margin-bottom: 12px;
}

.res-score-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.res-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #EDEAE6;
  transition: all 0.2s;
}

.res-score-row.active {
  background: #E8F5EE;
  border: 1.5px solid #02b887;
  padding: 8px 11px;
}

.res-score-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.res-score-name {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}

.res-score-range {
  font-size: 12px;
  font-weight: 600;
  color: #A09A94;
}

.res-score-you {
  font-size: 12px;
  font-weight: 900;
  color: #02b887;
  margin-left: 2px;
}

.res-score-verdict {
  font-size: 13px;
  font-weight: 600;
  color: #A09A94;
  font-style: italic;
  text-align: center;
  line-height: 1.5;
}

/* --- Share footer inside result sections --- */
.res-share-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 0;
}

/* --- Section 5: What if... interactive --- */
.whatif-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: #A09A94;
  text-align: center;
  margin-bottom: 20px;
}

.whatif-categories {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.whatif-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.whatif-cat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.whatif-cat-name {
  font-size: 13px;
  font-weight: 700;
  color: #6B6560;
}

.whatif-cat-values {
  display: flex;
  align-items: center;
  gap: 6px;
}

.whatif-cat-current {
  font-size: 12px;
  font-weight: 600;
  color: #A09A94;
  text-decoration: line-through;
}

.whatif-cat-current.same {
  text-decoration: none;
}

.whatif-cat-new {
  font-size: 14px;
  font-weight: 800;
  color: #2D2A26;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 2px 4px;
  text-align: right;
  font-family: 'Nunito', sans-serif;
  width: 100px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}

.whatif-cat-new:focus {
  background: #FFFFFF;
  border-color: #d6d1d1;
  cursor: text;
}

.whatif-cat-new.changed {
  color: #E85D3A;
}

/* Slider track */
.whatif-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #EDEAE6;
  outline: none;
}

.whatif-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #E85D3A;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.1s;
}

.whatif-slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
}

.whatif-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #E85D3A;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Divider */
.whatif-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.whatif-divider-line {
  flex: 1;
  height: 1px;
  background: #EDEAE6;
}

.whatif-divider-label {
  font-size: 11px;
  font-weight: 800;
  color: #A09A94;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Impact cards */
.whatif-impact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.whatif-impact-card {
  background: #F5F3F0;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

.whatif-impact-row {
  display: flex;
  gap: 10px;
}

.whatif-impact-row .whatif-impact-card {
  flex: 1;
}

.whatif-impact-label {
  font-size: 11px;
  font-weight: 700;
  color: #6B6560;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.whatif-impact-currency {
  font-size: 11px;
  font-weight: 700;
  color: #E85D3A;
  margin-bottom: 2px;
}

.whatif-impact-currency.save-currency {
  color: #D4940A;
}

.whatif-impact-value {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.whatif-impact-value.spend { color: #E85D3A; }
.whatif-impact-value.health { color: #02b887; }
.whatif-impact-value.save { color: #D4940A; }
.whatif-impact-value.negative { color: #E85D3A; }

.whatif-impact-delta {
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

.whatif-impact-delta.positive { color: #02b887; }
.whatif-impact-delta.negative { color: #E85D3A; }
.whatif-impact-delta.neutral { color: #A09A94; }

.whatif-impact-tier {
  font-size: 11px;
  font-weight: 600;
  color: #A09A94;
  margin-top: 2px;
}

/* Reset button */
.whatif-reset {
  display: block;
  margin: 16px auto 0;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #A09A94;
  background: none;
  border: 1.5px solid #EDEAE6;
  border-radius: 20px;
  padding: 6px 18px;
  cursor: pointer;
  transition: all 0.15s;
}

.whatif-reset:active {
  background: #F5F3F0;
  color: #6B6560;
}

/* --- Section 6: Amend your figures --- */
.res-amend-section {
  background: #F5F3F0;
}

.res-amend-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: #A09A94;
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.5;
}

.res-amend-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.res-amend-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #FFFFFF;
  border: 1.5px solid #EDEAE6;
  border-radius: 16px;
  padding: 14px 16px;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}

.res-amend-btn:hover {
  border-color: #D4940A;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.res-amend-btn:active {
  transform: scale(0.98);
}

.res-amend-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.res-amend-label {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #2D2A26;
  text-align: left;
}

.res-amend-value {
  font-size: 14px;
  font-weight: 800;
  color: #E85D3A;
  white-space: nowrap;
}

.res-amend-btn-income {
  border-color: #D4E8DC;
  background: #F5FBF8;
}

.res-amend-btn-income .res-amend-value {
  color: #02b887;
}

/* --- Welcome-back modal for returning users --- */
.wb-modal-card {
  max-width: 380px;
  padding: 28px 20px 20px;
  text-align: left;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}

.wb-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  color: #A09A94;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.wb-modal-close:hover {
  color: #E85D3A;
  background: rgba(232,93,58,0.08);
}

.wb-modal-greeting {
  font-size: 14px;
  font-weight: 700;
  color: #A09A94;
  margin-bottom: 6px;
}

.wb-modal-title {
  text-align: left;
  margin-bottom: 6px;
}

.wb-modal-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: #A09A94;
  line-height: 1.5;
  margin-bottom: 16px;
}

.wb-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.wb-modal-buttons .res-amend-btn {
  padding: 12px 14px;
}

.wb-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wb-modal-result-btn {
  width: 100%;
  padding: 16px 24px;
  background: #FFF3D0;
  color: #D4940A;
  border: none;
  border-radius: 18px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.wb-modal-result-btn:hover {
  box-shadow: 0 4px 14px rgba(212, 148, 10, 0.15);
}

.wb-modal-result-btn:active {
  transform: scale(0.97);
}

.wb-modal-start-btn {
  width: 100%;
  padding: 12px 24px;
  background: transparent;
  color: #A09A94;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s;
}

.wb-modal-start-btn:hover {
  color: #E85D3A;
}

/* ============================================================
   23. LANGUAGE POPUP & DROPDOWN
   ============================================================ */

/* --- Language selection popup (first-time users) --- */
.lang-popup-card {
  padding: 40px 28px 32px;
  max-width: 360px;
}

.lang-popup-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.lang-popup-title {
  font-size: 22px;
  font-weight: 900;
  color: #2D2A26;
  line-height: 1.4;
  margin-bottom: 8px;
}

.lang-popup-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: #A09A94;
  line-height: 1.6;
  margin-bottom: 28px;
}

.lang-popup-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lang-popup-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  background: #F5F3F0;
  border: 2px solid transparent;
  border-radius: 18px;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #2D2A26;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.lang-popup-option:hover {
  background: #EDEAE6;
  border-color: #E85D3A;
  transform: translateY(-2px);
}

.lang-popup-option:active {
  transform: scale(0.98);
}

.lang-popup-flag {
  font-size: 28px;
  line-height: 1;
}

.lang-popup-label {
  font-size: 17px;
  font-weight: 700;
}

/* --- Language dropdown (on lang buttons) --- */
.lang-btn {
  position: relative;
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  overflow: hidden;
  z-index: 10001;
  animation: langDropdownFadeIn 0.15s ease-out;
}

@keyframes langDropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.lang-dropdown-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #6B6560;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lang-dropdown-option:hover {
  background: #F5F3F0;
  color: #2D2A26;
}

.lang-dropdown-option.active {
  color: #E85D3A;
  font-weight: 800;
}

.lang-dropdown-option:first-child {
  border-radius: 16px 16px 0 0;
}

.lang-dropdown-option:last-child {
  border-radius: 0 0 16px 16px;
}

.lang-dropdown-flag {
  font-size: 22px;
  line-height: 1;
}

.lang-dropdown-label {
  font-size: 15px;
}

/* ============================================================
   24. FEEDBACK LINK
   ============================================================ */
.feedback-link {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #C0B9B0;
  text-decoration: none;
  padding: 24px 0 12px;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}

.feedback-link:hover {
  color: #A09A94;
}

.feedback-link:active {
  color: #E85D3A;
}

/* ============================================================
   DESKTOP RESPONSIVE — min-width: 768px
   Each screen is scoped individually so they can be styled
   one at a time without affecting others.
   ============================================================ */
@media (min-width: 768px) {

  /* --- Home screen --- */
  .home-title {
    font-size: 52px;
    margin-top: 20px;
    margin-bottom: 24px;
  }

  .home-illustration {
    margin: 16px 0 12px;
  }

  .home-illustration img {
    width: 400px;
  }

  .home-question {
    font-size: 26px;
    margin-bottom: 28px;
  }

  .home-buttons {
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    padding: 0 20px;
  }

  .home-btn {
    width: auto;
    flex: 1 1 0;
    padding: 24px 20px;
    font-size: 17px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* --- Profile screen --- */
  .profile-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px 20px;
    align-items: stretch;
  }

  /* Form card: left column, spans both rows */
  .profile-grid > .profile-card:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  /* Hourly rate card: top right */
  .profile-grid > .hourly-rate-card {
    grid-column: 2;
    grid-row: 1;
  }

  /* Workday card: bottom right */
  .profile-grid > .profile-workday-card {
    grid-column: 2;
    grid-row: 2;
  }

  /* Expenses card: full width below the grid */
  #screen-profile .profile-expenses-card {
    max-width: 100%;
  }

  /* Profile question + buttons: inherit from generic .home-buttons / .home-btn rules above */

  /* Currency+input group: fill available space on desktop */
  .exp-currency-input-group {
    flex: 1;
  }

  /* --- Regular & Onetime screens: cards at 70% width, centered --- */
  #screen-regular .card,
  #screen-regular .monthly-total,
  #screen-regular .result-card,
  #screen-regular .no-income-card,
  #screen-regular .income-summary,
  #screen-regular .bottom-nav,
  #screen-onetime .card,
  #screen-onetime .monthly-total,
  #screen-onetime .result-card,
  #screen-onetime .no-income-card,
  #screen-onetime .income-summary,
  #screen-onetime .bottom-nav {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Expenses screen --- */

  /* Choice cards: square, centered, don't stretch full width */
  .exp-choice-row {
    justify-content: center;
    gap: 24px;
  }

  .exp-choice-card {
    flex: 0 0 180px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Congrats card + housing amount: match width of choice cards and center */
  .exp-message-card,
  #housing-amount-section {
    max-width: 384px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Detail input sections: wider but still centered */
  #utilities-input-section,
  #food-breakdown-section,
  #transport-breakdown-section {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Amount input + currency note: centered */
  .exp-inline-input {
    justify-content: center;
  }

  #screen-expenses .income-summary-note {
    text-align: center;
  }

  /* Show currency note inline between Back/Go on desktop */
  .exp-nav-currency-note {
    display: block;
  }

  /* Hide the standalone currency notes above nav on desktop (Housing & Utilities) */
  #housing-amount-section > .income-summary-note:not(.exp-nav-currency-note),
  #utilities-input-section > .income-summary-note:not(.exp-nav-currency-note) {
    display: none;
  }

  /* --- Milestone summary desktop --- */

  /* Center the summary text */
  .exp-milestone-summary {
    text-align: center;
  }

  /* Hours breakdown rows: narrower and centered */
  .exp-hours-breakdown {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Other expenses prompt card: narrower and centered */
  .exp-other-prompt-card {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Prompt buttons: auto-width instead of stretching */
  .exp-other-prompt-buttons {
    justify-content: center;
  }

  .exp-other-prompt-btn {
    flex: 0 1 auto;
    padding: 14px 24px;
  }

  /* --- Result: Amend section — narrower category rows inside the card --- */
  .res-amend-buttons {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}