@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  color: #e0e0e0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
}

.page-wrap {
  width: 100%;
  max-width: 1120px;
}

.app-shell {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 40px;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  color: #999;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.nav-tab .nav-icon {
  font-size: 1.1rem;
}

.nav-tab:hover {
  border-color: #3a3a6a;
  color: #ccc;
}

.nav-tab.active {
  background: linear-gradient(135deg, rgba(110,231,183,0.15), rgba(59,130,246,0.15));
  border-color: #6ee7b7;
  color: #fff;
}

.sidebar-divider {
  height: 1px;
  background: #2a2a4a;
  margin: 8px 2px;
}

.sidebar-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #666;
  font-weight: 600;
  padding: 0 2px;
  margin-bottom: 2px;
}

.nav-tab-small {
  padding: 10px 14px;
  font-size: 0.82rem;
  background: transparent;
}

.nav-tab-small:hover {
  background: #1a1a2e;
}

.sidebar-note {
  font-size: 0.72rem;
  color: #666;
  line-height: 1.5;
  padding: 4px 2px 0;
}

/* Brief in-sidebar changelog — see renderSidebarChangelog() in script.js. */
.sidebar-changelog {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 2px 4px;
}

.sidebar-changelog-entry-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sidebar-changelog-version {
  color: #6ee7b7;
  font-weight: 700;
  font-size: 0.72rem;
}

.sidebar-changelog-date {
  color: #555;
  font-size: 0.68rem;
}

.sidebar-changelog-note {
  display: block;
  margin-top: 2px;
  color: #888;
  font-size: 0.72rem;
  line-height: 1.45;
}

.content {
  flex: 1;
  min-width: 0;
  max-width: 880px;
}

@media (max-width: 800px) {
  .app-shell {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    top: auto;
  }
  .nav-tab {
    justify-content: center;
    flex: 1 1 auto;
  }
  .sidebar-divider,
  .sidebar-section-label,
  .sidebar-note {
    flex-basis: 100%;
    width: 100%;
  }
  .sidebar-divider {
    margin: 4px 0;
  }
  .content {
    max-width: 100%;
    width: 100%;
  }
}

/* The title + subtitle double as the "what's changed" entry point — tap
   anywhere on this block to open the changelog modal (see
   openChangelogModal() in script.js). Deliberately NOT a separate fixed
   badge: that badge turned out unreliable to spot, where the title is
   always on screen already. */
.app-title-block {
  cursor: pointer;
  transition: opacity 0.2s;
}

.app-title-block:hover {
  opacity: 0.82;
}

h1 {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

/* Small "vX.Y.Z" pill inline with the title — plain solid color, not part
   of the h1 gradient-text effect (background-clip/text-fill-color reset
   below). Text set by applyAppVersionBadge() in script.js. */
.header-version-tag {
  display: inline-block;
  vertical-align: middle;
  background: #1c1c34;
  background-clip: initial;
  -webkit-background-clip: initial;
  border: 1.5px solid #6ee7b7;
  color: #d4fbe8;
  -webkit-text-fill-color: #d4fbe8;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 11px;
  border-radius: 999px;
  margin-left: 8px;
  box-shadow: 0 2px 12px rgba(110, 231, 183, 0.25);
}

.subtitle {
  text-align: center;
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 36px;
}

@media (max-width: 500px) {
  .header-version-tag { font-size: 0.58rem; padding: 3px 9px; }
}

/* Changelog modal contents — see renderChangelogModal() in script.js. */
.changelog-entry {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #22223a;
}

.changelog-entry:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.changelog-version-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.changelog-version {
  font-weight: 800;
  color: #6ee7b7;
  font-size: 0.95rem;
}

.changelog-date {
  font-size: 0.75rem;
  color: #666;
}

.changelog-notes {
  margin: 0;
  padding-left: 18px;
  color: #ccc;
  font-size: 0.85rem;
  line-height: 1.5;
}

.changelog-notes li {
  margin-bottom: 4px;
}

.card {
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.card h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: #c0c0e0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card h2 .icon {
  font-size: 1.3rem;
}

/* A card heading paired with a small action button (the "?" info toggle
   on Take-Home Pay) — the h2 loses its own bottom margin since the row
   provides consistent spacing below instead. */
.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.card-header-row h2 {
  margin-bottom: 0;
}

.info-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #2a2a4a;
  background: #12121f;
  color: #9ca3af;
  font-weight: 800;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.info-btn:hover,
.info-btn.active {
  color: #6ee7b7;
  border-color: #6ee7b7;
  background: rgba(110, 231, 183, 0.1);
}

/* "About this calculator" — collapsed into this panel behind the "?"
   button instead of always taking up space on screen. */
.about-popover {
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.about-popover p {
  font-size: 0.85rem;
  color: #999;
  line-height: 1.7;
  margin: 0;
}

/* A card-section h2 that can collapse/expand its body — reuses the same
   look as a normal h2, plus a chevron button pushed to the right. */
.collapsible-section-header {
  cursor: pointer;
  user-select: none;
}

.section-collapse-toggle {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.section-collapse-toggle:hover {
  color: #6ee7b7;
  background: rgba(110, 231, 183, 0.1);
}

.input-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #999;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.salary-input-wrap {
  position: relative;
}

.salary-input-wrap .pound {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: #6ee7b7;
}

.salary-input-wrap input {
  width: 100%;
  padding: 16px 20px 16px 44px;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 2px solid #2a2a4a;
  border-radius: 12px;
  color: #fff;
  outline: none;
  transition: border-color 0.3s;
}

.salary-input-wrap input:focus {
  border-color: #6ee7b7;
}

/* A 3-letter currency code is wider than the single-character £ this
   large input was sized for — widen its reserved space so the code
   doesn't crowd/overlap the typed amount. */
.salary-input-wrap.wide-symbol .pound {
  left: 14px;
  font-size: 1.15rem;
}

.salary-input-wrap.wide-symbol input {
  padding-left: 58px;
}

.slider-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider-row span {
  font-size: 0.75rem;
  color: #666;
  min-width: 40px;
}

input[type="range"] {
  -webkit-appearance: none;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #2a2a4a;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  cursor: pointer;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #2a2a4a;
}

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

.toggle-label {
  font-size: 0.9rem;
  color: #ccc;
}

.toggle-label small {
  display: block;
  color: #666;
  font-weight: 400;
  font-size: 0.78rem;
  margin-top: 2px;
}

/* Toggle switch */
.switch {
  position: relative;
  width: 48px;
  height: 26px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider-btn {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #2a2a4a;
  border-radius: 26px;
  transition: 0.3s;
}

.slider-btn::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: #888;
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .slider-btn {
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
}

.switch input:checked + .slider-btn::before {
  transform: translateX(22px);
  background: #fff;
}

/* Results */
.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.result-box {
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, border-color 0.3s;
}

.result-box:hover {
  transform: translateY(-2px);
  border-color: #3a3a6a;
}

.result-box.highlight {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #1a3a2e, #1a2a4e);
  border-color: #6ee7b7;
}

.result-box .label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 8px;
  font-weight: 600;
}

.result-box .value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}

.result-box.highlight .value {
  font-size: 2.2rem;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.result-box .sub {
  font-size: 0.75rem;
  color: #666;
  margin-top: 4px;
}

/* Take-Home Pay card — a row of pressable period pills sits directly
   above the hero figure it controls (Annual/Monthly/Weekly), replacing
   the old five-box grid and the "Show" dropdown. */
.take-home-period-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.period-pill {
  flex: 1;
  padding: 11px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #9ca3af;
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.period-pill:hover {
  color: #ccc;
  border-color: #3a3a6a;
}

.period-pill.active {
  color: #0a2e1a;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  border-color: #6ee7b7;
}

.take-home-hero {
  margin-bottom: 0;
}

/* Breakdown bar */
.breakdown-bar-container {
  margin: 28px 0;
}

.breakdown-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.breakdown-labels span {
  font-size: 0.75rem;
  color: #666;
}

.bar {
  display: flex;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a2e;
}

.bar-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  transition: width 0.6s ease;
  min-width: 0;
  overflow: hidden;
}

.bar-segment.net { background: linear-gradient(135deg, #6ee7b7, #34d399); color: #0a2e1a; }
.bar-segment.tax { background: linear-gradient(135deg, #f59e0b, #d97706); color: #2a1a00; }
.bar-segment.ni { background: linear-gradient(135deg, #ef4444, #dc2626); color: #2a0000; }

.legend {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #aaa;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot.net { background: #34d399; }
.legend-dot.tax { background: #f59e0b; }
.legend-dot.ni { background: #ef4444; }

/* Tax breakdown table */
.tax-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.tax-table th, .tax-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #2a2a4a;
  font-size: 0.88rem;
}

.tax-table th {
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}

.tax-table td { color: #ccc; }

.tax-table .amount {
  font-weight: 700;
  color: #fff;
  text-align: right;
}

.tax-table .rate-cell {
  text-align: center;
  font-weight: 600;
  color: #f59e0b;
}

.tax-table tfoot td {
  border-top: 2px solid #3a3a6a;
  font-weight: 700;
  color: #fff;
}

.disclaimer {
  text-align: center;
  font-size: 0.75rem;
  color: #555;
  margin-top: 24px;
  line-height: 1.6;
}

.pension-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pension-input-row input {
  width: 80px;
  padding: 8px 12px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  outline: none;
}

.pension-input-row input:focus { border-color: #6ee7b7; }

.pension-input-row span { color: #666; font-size: 0.85rem; }

/* Slider alternative to typing the pension % directly — same slider-row
   look as the Gross Annual Salary field, just reused here. */
.pension-slider-row {
  margin-top: 12px;
}

.pension-amount-sub {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #6ee7b7;
  font-weight: 600;
  min-height: 1.2em;
}

/* Always-visible reminder that pension % only comes off salary, not
   dividends — same look as the Limited Companies section's own notes. */
.pension-note {
  font-size: 0.75rem;
  color: #9ca3af;
  background: #16162a;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 10px;
}

/* Same treatment as .pension-note, for the Other Income field's NI/Student
   Loan exclusion reminder. */
.other-income-note {
  font-size: 0.75rem;
  color: #9ca3af;
  background: #16162a;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 10px;
}

/* Only shown once the pension slider would push post-pension salary
   below a realistic full-time wage — same treatment as the VAT warning
   elsewhere in the app. */
.pension-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 10px;
}

@media (max-width: 600px) {
  .results-grid { grid-template-columns: 1fr; }
  .result-box.highlight { grid-column: auto; }
  h1 { font-size: 1.5rem; }
  .salary-input-wrap input { font-size: 1.4rem; }
  .card { padding: 20px; }
  .tax-table th, .tax-table td { padding: 8px 10px; font-size: 0.8rem; }
}

/* ================================================== */
/* Household view                                      */
/* ================================================== */

.text-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 2px solid #2a2a4a;
  border-radius: 12px;
  color: #fff;
  outline: none;
  transition: border-color 0.3s;
}

.text-input:focus {
  border-color: #6ee7b7;
}

.member-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, border-color 0.2s;
}

.member-card:hover {
  transform: translateY(-2px);
  border-color: #6ee7b7;
}

.member-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #0a1a12;
}

.member-info {
  flex: 1;
  min-width: 0;
}

.member-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-sub {
  font-size: 0.8rem;
  color: #888;
  margin-top: 2px;
}

.member-card.member-excluded {
  opacity: 0.6;
}

.member-include-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  user-select: none;
  width: fit-content;
}

.member-include-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #6ee7b7;
  flex-shrink: 0;
}

.member-net {
  text-align: right;
  flex-shrink: 0;
  padding-right: 28px;
}

.member-net-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #6ee7b7;
}

.member-net-label {
  font-size: 0.7rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.member-delete {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: #666;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.member-delete:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.empty-state {
  color: #777;
  font-size: 0.9rem;
  text-align: center;
  padding: 24px 0;
}

.btn-primary {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  border: none;
  border-radius: 12px;
  color: #0a1a12;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: transparent;
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  color: #999;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.btn-secondary:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.form-actions .btn-primary,
.form-actions .btn-secondary {
  margin-top: 0;
}

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

.btn-back {
  background: none;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  color: #c0c0e0;
  padding: 10px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.btn-back:hover {
  border-color: #6ee7b7;
  color: #6ee7b7;
}

.btn-delete-member {
  background: none;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  color: #999;
  padding: 10px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.btn-delete-member:hover {
  border-color: #ef4444;
  color: #ef4444;
}

@media (max-width: 600px) {
  .member-card { flex-wrap: wrap; }
  .member-net { padding-right: 0; margin-left: auto; }
}

/* ================================================== */
/* Rent affordability (Housing panel, Household Costs)  */
/* ================================================== */

.rent-affordability-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.rent-affordability-label {
  font-size: 0.78rem;
  color: #888;
  font-weight: 600;
}

.rent-affordability-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: #6ee7b7;
  margin-right: auto;
}

.rent-affordability-divisor {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #888;
}

.rent-affordability-divisor input {
  width: 48px;
  padding: 5px 6px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  color: #fff;
  text-align: center;
  outline: none;
}

.rent-affordability-divisor input:focus {
  border-color: #6ee7b7;
}

/* "Max" buttons that fill a rent field with the affordability figure */
.input-with-max-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-with-max-row .salary-input-wrap {
  flex: 1;
}

.input-with-max-row select {
  flex-shrink: 0;
  width: auto;
  min-width: 110px;
  padding: 14px 34px 14px 16px;
}

.btn-max {
  flex-shrink: 0;
  padding: 12px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #6ee7b7;
  background: rgba(110, 231, 183, 0.1);
  border: 1px solid rgba(110, 231, 183, 0.4);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.btn-max:hover {
  background: rgba(110, 231, 183, 0.2);
  border-color: #6ee7b7;
}

.empty-state-sm {
  font-size: 0.75rem;
  color: #666;
}

@media (max-width: 600px) {
  .rent-affordability-row { flex-direction: column; align-items: stretch; }
  .rent-affordability-value { margin-right: 0; }
}

/* ================================================== */
/* Household costs                                      */
/* ================================================== */

.select-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23888' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  cursor: pointer;
}

.cost-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 12px;
  position: relative;
  cursor: pointer;
}

/* Tick box for including/excluding a cost from the totals — small and
   precise for mobile tapping. Clicking anywhere else on the card body
   (desktop) does the same thing via the card's own onclick. */
.cost-include-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.cost-include-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #6ee7b7;
}

.cost-include-toggle input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 0.5;
}

.cost-info {
  flex: 1;
  min-width: 0;
}

.cost-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cost-sub {
  font-size: 0.8rem;
  color: #888;
  margin-top: 2px;
  text-transform: capitalize;
}

.cost-annual {
  text-align: right;
  flex-shrink: 0;
  padding-right: 28px;
}

.cost-annual-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #f59e0b;
}

.cost-annual-label {
  font-size: 0.7rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Small GBP reference shown under the per-year total whenever costs are
   being viewed in a non-GBP currency (Nomad Setup) — the main figure
   above follows the "Show amounts in" selector. */
.cost-annual-gbp-sub {
  font-size: 0.68rem;
  color: #666;
  margin-top: 2px;
}

.negative-value {
  color: #ef4444 !important;
  -webkit-text-fill-color: #ef4444 !important;
  background: none !important;
}

@media (max-width: 600px) {
  .cost-card { flex-wrap: wrap; }
  .cost-annual { padding-right: 0; margin-left: auto; }
}

/* ================================================== */
/* Mortgage overpayment                                 */
/* ================================================== */

.mortgage-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.percent-input-wrap {
  position: relative;
}

.percent-input-wrap input {
  width: 100%;
  padding: 16px 44px 16px 20px;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 2px solid #2a2a4a;
  border-radius: 12px;
  color: #fff;
  outline: none;
  transition: border-color 0.3s;
}

.percent-input-wrap input:focus {
  border-color: #6ee7b7;
}

.percent-input-wrap .percent-sign {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: 700;
  color: #6ee7b7;
}

.term-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.term-input-row input {
  width: 100%;
  min-width: 0;
  padding: 16px 10px;
  font-size: 1.3rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 2px solid #2a2a4a;
  border-radius: 12px;
  color: #fff;
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
}

.term-input-row input:focus {
  border-color: #6ee7b7;
}

.term-input-row span {
  color: #888;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.overpay-value-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

#overpayValueDisplay {
  font-size: 1.3rem;
  font-weight: 800;
  color: #6ee7b7;
}

.overpay-hint {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 4px;
}

.overpay-note {
  font-size: 0.72rem;
  color: #666;
  line-height: 1.5;
  margin-top: 12px;
}

.mortgage-warning {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  color: #f87171;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .mortgage-fields-row { grid-template-columns: 1fr; gap: 0; }
}

/* Editable amount/frequency inline on each cost row */
.cost-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.cost-amount-input-wrap {
  position: relative;
  flex-shrink: 0;
  width: 110px;
}

.cost-amount-input-wrap .pound-sm {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: #6ee7b7;
  font-weight: 700;
  pointer-events: none;
}

.cost-amount-input {
  width: 100%;
  padding: 8px 10px 8px 22px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.cost-amount-input:focus {
  border-color: #6ee7b7;
}

/* A 3-letter currency code (THB, ZAR, USD...) is wider than the single-
   character £ this space was sized for — widen the reserved space so the
   code doesn't overlap the typed amount when Household Costs is being
   viewed in a non-GBP currency. */
.cost-amount-input-wrap.wide-symbol .pound-sm {
  left: 8px;
  font-size: 0.66rem;
  letter-spacing: -0.2px;
}

.cost-amount-input-wrap.wide-symbol .cost-amount-input {
  padding-left: 38px;
}

.cost-frequency-input {
  padding: 8px 26px 8px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  color: #ccc;
  outline: none;
  cursor: pointer;
  background-position: right 10px center;
}

.cost-frequency-input:focus {
  border-color: #6ee7b7;
}

/* Household Costs title row, with export/import spreadsheet buttons */
.cost-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.cost-header-row h2 {
  margin: 0;
}

.cost-io-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cost-io-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #2a2a4a;
  color: #9ca3af;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 8px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.cost-io-btn:hover {
  color: #6ee7b7;
  border-color: #6ee7b7;
  background: rgba(110, 231, 183, 0.08);
}

/* Household Costs search/filter row */
.cost-search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cost-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
}

.cost-search-input {
  flex: 1;
  min-width: 180px;
  padding-right: 34px;
}

.cost-search-clear-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #888;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.cost-search-clear-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.cost-search-fuzzy-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #9ca3af;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.cost-search-fuzzy-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #6ee7b7;
}

/* Fixed vs Consumptive cost add-buttons, side by side */
.add-cost-buttons-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.add-cost-buttons-row .btn-primary {
  width: auto;
  flex: 1;
  min-width: 200px;
}

/* Rate/units mini-fields shown on a consumptive cost's card (Units, Rate,
   Used, plus the period select reusing .cost-frequency-input) */
.cost-consumptive-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.cost-mini-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cost-mini-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #666;
}

.cost-mini-input-wrap {
  position: relative;
}

.cost-mini-input {
  width: 64px;
  padding: 7px 9px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.cost-mini-input-suffixed { padding-right: 20px; }

.cost-mini-input:focus { border-color: #6ee7b7; }

.cost-mini-input-wrap .pence-sm {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: #6ee7b7;
  font-weight: 700;
  pointer-events: none;
}

/* A 3-letter currency code in place of the single-character "p" suffix
   needs more reserved space on the right, or it overlaps the digits. */
.cost-mini-input-wrap.wide-symbol .pence-sm {
  right: 6px;
  font-size: 0.6rem;
  letter-spacing: -0.2px;
}

.cost-mini-input-wrap.wide-symbol .cost-mini-input-suffixed {
  padding-right: 32px;
}

.cost-consumptive-summary {
  margin-top: 8px;
  font-size: 0.75rem;
  color: #888;
}

/* Cost-per-unit input on the "Add Consumptive Cost" form — mirrors
   .salary-input-wrap but with the "p" suffix on the right instead of a
   leading £, since utility tariffs are almost always quoted in pence. */
.pence-input-wrap {
  position: relative;
}

.pence-input-wrap input {
  width: 100%;
  padding: 16px 36px 16px 20px;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 2px solid #2a2a4a;
  border-radius: 12px;
  color: #fff;
  outline: none;
  transition: border-color 0.3s;
}

.pence-input-wrap input:focus { border-color: #6ee7b7; }

.pence-input-wrap .pence-suffix {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: #6ee7b7;
}

.cost-card.cost-excluded {
  opacity: 0.65;
}

.strikethrough {
  text-decoration: line-through;
  text-decoration-color: #666;
}

.cost-included-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .cost-annual { display: none; }
}

/* The cost list scrolls in its own box rather than the whole page, so
   "Money Left After Costs" above it (and the search bar / add-cost
   buttons around it) stay put on screen while scrolling through a long
   list of household costs. */
#costList {
  max-height: 55vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

#costList .empty-state {
  max-height: none;
}

/* ================================================== */
/* Housing options (mortgage vs rent scenarios)          */
/* ================================================== */

.housing-intro {
  font-size: 0.8rem;
  color: #888;
  line-height: 1.5;
  margin-bottom: 16px;
}

.rent-includes-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rent-includes-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #ccc;
  /* Reset the generic <label> element styling (uppercase, letter-spacing,
     margin-bottom) that would otherwise cascade onto this label wrapper. */
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
  font-weight: 400;
}

.rent-includes-item input[type="checkbox"] {
  accent-color: #6ee7b7;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Editable cost name (Household Costs list) */
.cost-name-input {
  display: block;
  width: 100%;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 3px 0;
  outline: none;
  transition: border-color 0.2s;
}

.cost-name-input:hover { border-bottom-color: #2a2a4a; }
.cost-name-input:focus { border-bottom-color: #6ee7b7; }
.cost-name-input.strikethrough { text-decoration: line-through; text-decoration-color: #666; }

/* Per-option council tax / rent amount mini inputs (accommodation modal) */
.housing-extra-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.housing-extra-label {
  font-size: 0.7rem;
  color: #888;
  font-weight: 600;
}

.housing-mini-input-wrap {
  position: relative;
  flex-shrink: 0;
  width: 64px;
}

.housing-mini-input-wrap .pound-sm {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: #6ee7b7;
  font-weight: 700;
  pointer-events: none;
}

.housing-mini-input {
  width: 100%;
  padding: 5px 6px 5px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.housing-mini-input:focus { border-color: #6ee7b7; }

/* A 3-letter currency code needs more reserved space than the single-
   character £ this field was sized for, or it overlaps the typed amount. */
.housing-mini-input-wrap.wide-symbol .pound-sm {
  left: 4px;
  font-size: 0.56rem;
  letter-spacing: -0.3px;
}

.housing-mini-input-wrap.wide-symbol .housing-mini-input {
  padding-left: 28px;
}

.housing-mini-select {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 22px 5px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  background-color: #0f0f1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath fill='%23888' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  color: #ccc;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.housing-mini-select:focus { border-color: #6ee7b7; }

/* ================================================== */
/* PDF / print report                                   */
/* ================================================== */
/* Hidden on screen at all times; only shown when printing (see the       */
/* @media print block below), which is how "Download PDF Report" works — */
/* it populates #printReport then calls window.print(), and the user     */
/* picks "Save as PDF" as the destination in the browser's print dialog. */

#printReport {
  display: none;
}

@media print {
  body > *:not(#printReport) {
    display: none !important;
  }

  body {
    display: block;
    padding: 0;
    background: #fff;
  }

  #printReport {
    display: block;
    background: #fff;
    color: #1a1a1a;
    font-family: 'Inter', Arial, sans-serif;
    padding: 0 8mm;
    max-width: 100%;
  }
}

.report-header {
  text-align: center;
  border-bottom: 3px solid #1a1a1a;
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.report-header h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 4px;
  /* Override the app's gradient-text h1 styling (background-clip text with
     a transparent fill) — if "print background graphics" is off, that
     would render this heading invisible. Force a plain solid colour. */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #1a1a1a;
  color: #1a1a1a;
}

.report-header .report-meta {
  font-size: 0.8rem;
  color: #555;
}

.report-section {
  margin-bottom: 22px;
  page-break-inside: avoid;
}

.report-section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
  border-bottom: 1px solid #ccc;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.report-stats-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.report-stat-box {
  flex: 1;
  min-width: 140px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 12px;
}

.report-stat-box .report-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #666;
  margin-bottom: 4px;
}

.report-stat-box .report-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.report-table th,
.report-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #ddd;
}

.report-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #555;
  border-bottom: 1px solid #999;
}

.report-table td.report-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.report-table tfoot td {
  border-top: 2px solid #999;
  font-weight: 700;
}

.report-table .report-excluded td {
  color: #888;
  text-decoration: line-through;
}

.report-note {
  font-size: 0.75rem;
  color: #666;
  margin-top: 6px;
  line-height: 1.5;
}

.report-footer {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid #ccc;
  font-size: 0.7rem;
  color: #888;
  line-height: 1.6;
}

/* ================================================== */
/* Accommodation option comparison                      */
/* ================================================== */

.compare-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}

.compare-row:last-child { margin-bottom: 0; }

.compare-row-current {
  border-color: #6ee7b7;
  background: linear-gradient(135deg, rgba(110, 231, 183, 0.08), rgba(59, 130, 246, 0.08));
}

.compare-row-info {
  flex: 1;
  min-width: 180px;
}

.compare-row-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.compare-row-sub {
  font-size: 0.78rem;
  color: #888;
  margin-top: 4px;
}

.compare-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 20px;
}

.compare-badge-best {
  color: #0a2e1a;
  background: linear-gradient(135deg, #6ee7b7, #34d399);
}

.compare-badge-current {
  color: #1a2a4e;
  background: linear-gradient(135deg, #93c5fd, #60a5fa);
}

.compare-badge-bonus {
  color: #2e2205;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  text-transform: none;
  letter-spacing: 0.2px;
}

.compare-badge-fee {
  color: #3f1414;
  background: linear-gradient(135deg, #fca5a5, #f87171);
  text-transform: none;
  letter-spacing: 0.2px;
}

.compare-row-figures {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}

.compare-figure {
  text-align: right;
  min-width: 90px;
}

.compare-figure-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #666;
  margin-bottom: 2px;
}

.compare-figure-value {
  font-size: 1rem;
  font-weight: 800;
  color: #6ee7b7;
}

.compare-view-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #93c5fd;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}

.compare-view-btn:hover {
  background: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
}

.compare-select-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s;
}

.compare-select-btn:hover { opacity: 0.85; }

.compare-select-current {
  background: none;
  color: #6ee7b7;
  border: 1px solid #6ee7b7;
  cursor: default;
}

.compare-select-current:hover { opacity: 1; }

.compare-delete-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.compare-delete-btn:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: #f87171;
}

.compare-sort-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #2a2a4a;
}

.compare-sort-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #888;
}

.compare-sort-select {
  width: auto;
}

.compare-sort-dir-btn {
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #ccc;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.compare-sort-dir-btn:hover { border-color: #6ee7b7; }

@media (max-width: 700px) {
  .compare-row { flex-direction: column; align-items: stretch; }
  .compare-row-figures { justify-content: space-between; gap: 12px; }
  .compare-figure { text-align: left; }
  .compare-view-btn { width: 100%; }
  .compare-select-btn { width: 100%; }
  .compare-delete-btn { width: 100%; height: auto; padding: 8px; }
}

/* ================================================== */
/* Bill Split Calculator (inline in Household Members)   */
/* ================================================== */

.billsplit-toolbar-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

.billsplit-toolbar-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #888;
  white-space: nowrap;
}

.billsplit-icon-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.billsplit-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 8px;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.billsplit-icon-btn:hover { border-color: #3b82f6; }

.billsplit-icon-btn.active {
  border-color: #6ee7b7;
  background: rgba(110, 231, 183, 0.08);
}

.billsplit-icon-svg {
  width: 28px;
  height: 42px;
  display: block;
}

.billsplit-icon-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.billsplit-icon-btn.active .billsplit-icon-label { color: #6ee7b7; }

.billsplit-warning {
  font-size: 0.78rem;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.member-split-line {
  font-size: 0.76rem;
  color: #6ee7b7;
  margin-top: 4px;
  font-weight: 600;
}

@media (max-width: 700px) {
  .billsplit-toolbar-inline { flex-direction: column; align-items: stretch; }
  .billsplit-icon-group { justify-content: space-between; }
}

/* ================================================== */
/* Accommodation details modal (listing URL + notes)    */
/* ================================================== */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 5, 12, 0.72);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-box {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: #14142a;
  border: 1px solid #2a2a4a;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.modal-icon-btn {
  padding: 4px 8px;
  font-size: 0.95rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}

.modal-icon-btn:hover { background: rgba(255, 255, 255, 0.08); }

.modal-close-btn {
  padding: 2px 9px;
  font-size: 1.1rem;
  line-height: 1.4;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.modal-close-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.modal-detail-block { margin-bottom: 18px; }
.modal-detail-block:last-child { margin-bottom: 0; }

.modal-detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #888;
  margin-bottom: 6px;
}

.modal-link {
  color: #6ee7b7;
  font-size: 0.9rem;
  word-break: break-all;
  text-decoration: underline;
  text-decoration-color: rgba(110, 231, 183, 0.4);
}

.modal-link:hover { color: #93f5d0; }

.modal-notes-text {
  font-size: 0.9rem;
  color: #ddd;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 0;
}

.modal-notes-textarea {
  min-height: 100px;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}

/* Read-only summary table shown in the modal's view mode (standard payment
   / rent, council tax, maintenance, ground rent, service charge, total). */
.modal-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 18px;
}

.modal-details-table td {
  padding: 7px 0;
  border-bottom: 1px solid #2a2a4a;
  color: #ccc;
}

.modal-details-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #eee;
  font-weight: 600;
}

.modal-details-table tfoot td {
  border-bottom: none;
  border-top: 2px solid #3a3a5a;
  padding-top: 10px;
  font-weight: 800;
  color: #6ee7b7;
}

/* Wraps the four cost mini-rows in the modal's edit form with a bit of
   vertical rhythm between them and the fields above/below. */
.modal-extra-costs-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  padding: 14px;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
}

.modal-extra-line .housing-extra-label {
  width: 100px;
  flex-shrink: 0;
}

/* Flexible extra-cost line items in the accommodation modal — a free-text
   label, an amount (negatives allowed), a frequency select, and a remove
   button, one row per user-added cost/credit. */
.modal-extra-costs-group > label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 4px;
}

.modal-extra-costs-group > label small {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: #888;
  margin-top: 2px;
}

.modal-extra-cost-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid #22223a;
}

.modal-extra-cost-row:last-child { border-bottom: none; }

.modal-extra-cost-label {
  flex: 1 1 140px;
  min-width: 100px;
  padding: 6px 8px;
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.modal-extra-cost-label:focus { border-color: #6ee7b7; }

.modal-extra-cost-row .housing-mini-input-wrap {
  width: 84px;
}

.modal-extra-cost-row .modal-extra-cost-amount {
  width: 100%;
  padding: 6px 6px 6px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.modal-extra-cost-row .modal-extra-cost-amount:focus { border-color: #6ee7b7; }

.modal-extra-cost-row .housing-mini-input-wrap.wide-symbol .modal-extra-cost-amount {
  padding-left: 30px;
}

.modal-extra-cost-frequency {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 22px 6px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  background-color: #0f0f1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath fill='%23888' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  border: 1px solid #2a2a4a;
  border-radius: 6px;
  color: #ccc;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.modal-extra-cost-frequency:focus { border-color: #6ee7b7; }

.modal-extra-cost-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #3a2a2a;
  border-radius: 6px;
  color: #f87171;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.modal-extra-cost-remove:hover {
  background: rgba(248, 113, 113, 0.12);
  border-color: #f87171;
}

.modal-add-cost-btn {
  margin-top: 10px;
  font-size: 0.78rem;
  padding: 7px 14px;
}

.modal-readonly-note {
  font-size: 0.85rem;
  color: #aaa;
  margin: 0 0 16px;
}

.modal-readonly-note strong { color: #eee; }

@media (max-width: 560px) {
  .modal-box { padding: 18px; }
}

/* ================================================== */
/* Setup Wizard                                          */
/* ================================================== */

.wizard-launch-btn {
  background: linear-gradient(135deg, rgba(110, 231, 183, 0.12), rgba(59, 130, 246, 0.12));
  border: 1px solid rgba(110, 231, 183, 0.4);
}

.wizard-launch-btn:hover {
  background: linear-gradient(135deg, rgba(110, 231, 183, 0.22), rgba(59, 130, 246, 0.22));
}

.wizard-box {
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #14142a;
  border: 1px solid #2a2a4a;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.wizard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid #2a2a4a;
  flex-shrink: 0;
}

.wizard-header-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.wizard-progress {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
}

.wizard-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.wizard-body h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.wizard-step-sub {
  font-size: 0.82rem;
  color: #888;
  line-height: 1.6;
  margin-bottom: 16px;
}

.wizard-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #2a2a4a;
  flex-shrink: 0;
}

.wizard-footer .btn-primary {
  width: auto;
  margin-left: auto;
  padding: 12px 24px;
}

.wizard-footer .btn-secondary {
  width: auto;
}

.wizard-skip-btn {
  color: #777;
}

.wizard-welcome {
  text-align: center;
  padding: 20px 10px 8px;
}

.wizard-welcome-icon {
  font-size: 2.6rem;
  margin-bottom: 12px;
}

.wizard-welcome h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.wizard-welcome .wizard-step-sub {
  max-width: 440px;
  margin: 0 auto;
}

.wizard-inline-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #2a2a4a;
}

.wizard-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #16162a;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #eee;
}

.wizard-mini-sub {
  color: #888;
  font-size: 0.78rem;
}

.wizard-mini-remove {
  background: none;
  border: none;
  color: #666;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.wizard-mini-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.wizard-choice-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.wizard-choice-btn {
  flex: 1;
  min-width: 120px;
  padding: 14px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #ccc;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.wizard-choice-btn:hover { border-color: #3b82f6; }

.wizard-choice-btn.active {
  border-color: #6ee7b7;
  background: rgba(110, 231, 183, 0.1);
  color: #fff;
}

.wizard-template-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid #2a2a4a;
}

.wizard-template-row:last-child { border-bottom: none; }

.wizard-template-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #eee;
  cursor: pointer;
  flex: 1;
}

.wizard-template-checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #6ee7b7;
  cursor: pointer;
}

.wizard-template-amount {
  width: 90px;
  flex-shrink: 0;
}

.wizard-template-amount input {
  width: 100%;
  padding: 8px 10px 8px 20px;
  font-size: 0.85rem;
  font-weight: 700;
}

.wizard-template-amount .pound {
  left: 8px;
  font-size: 0.85rem;
}

.wizard-template-freq {
  font-size: 0.72rem;
  color: #888;
  flex-shrink: 0;
  white-space: nowrap;
}

.wizard-billsplit-group {
  margin-top: 6px;
}

.wizard-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wizard-summary-box {
  flex: 1;
  min-width: 150px;
  background: #16162a;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  padding: 14px 16px;
}

.wizard-summary-box-wide {
  flex-basis: 100%;
}

.wizard-summary-box-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #666;
  margin-bottom: 4px;
}

.wizard-summary-box-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #6ee7b7;
}

@media (max-width: 560px) {
  .wizard-box { max-width: 100%; }
  .wizard-body { padding: 18px; }
  .wizard-choice-row { flex-direction: column; }
}

/* ============================================================ */
/* LIMITED COMPANIES (member detail view)                        */
/* ============================================================ */
.companies-intro {
  font-size: 0.85rem;
  color: #888;
  line-height: 1.6;
  margin: -6px 0 16px;
}

.company-card {
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  /* .company-card-header's "Remove company" button reuses .member-delete,
     which is position:absolute anchored to the nearest positioned ancestor
     — same pattern as .member-card and .cost-card below. Without this,
     the button escapes all the way up to the page's own corner instead of
     sitting in this card's top-right, exactly the bug already found and
     fixed for the per-recipient remove button. */
  position: relative;
}

.company-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Collapsed cards keep the same padded card shell but drop the bottom
   margin the header normally reserves for the body below it, so a folded
   card reads as a single compact row instead of leaving empty space. */
.company-card-collapsed .company-card-header {
  margin-bottom: 0;
}

.company-collapse-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 0.7rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.company-collapse-toggle:hover {
  color: #6ee7b7;
  background: rgba(110, 231, 183, 0.1);
}

.company-collapsed-summary {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
  overflow: hidden;
}

.company-collapsed-summary strong {
  color: #fff;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-collapsed-figures {
  color: #9ca3af;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-name-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid #2a2a4a;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 4px 2px;
}

.company-name-input:focus {
  outline: none;
  border-bottom-color: #6ee7b7;
}

.vat-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.company-note {
  font-size: 0.75rem;
  color: #9ca3af;
  background: #16162a;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 4px 0 14px;
}

.company-share-row {
  margin-top: 14px;
}

.company-share-row > label {
  display: block;
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.company-share-row > label small {
  text-transform: none;
  letter-spacing: normal;
  color: #6ee7b7;
  font-weight: 600;
}

.company-share-item {
  background: #16162a;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.company-share-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.company-share-item-header .select-input {
  flex: 1;
}

/* Deliberately its own class rather than reusing .member-delete — that
   class is position:absolute, anchored to the nearest positioned ancestor's
   corner (right fit for a card header), but nothing in this row chain is
   position:relative, so an absolutely-positioned button here would escape
   all the way up to the page's own top-right corner instead of sitting next
   to the recipient it removes. This one is a normal flex child instead. */
.company-share-remove-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #666;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.company-share-remove-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.company-share-item label {
  display: block;
  font-size: 0.78rem;
  color: #aaa;
  margin-bottom: 6px;
}

.company-share-pct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.company-share-pct-row label {
  margin-bottom: 0;
  flex: 1;
}

.company-share-pct-input-wrap {
  position: relative;
  flex-shrink: 0;
  width: 74px;
}

.company-share-pct-input-wrap input {
  width: 100%;
  padding: 6px 24px 6px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  color: #fff;
  outline: none;
  text-align: right;
  transition: border-color 0.3s;
}

.company-share-pct-input-wrap input:focus {
  border-color: #6ee7b7;
}

.company-share-pct-input-wrap .pct-sign {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-weight: 700;
  color: #6ee7b7;
  pointer-events: none;
}

.company-suggest-btn {
  margin-top: 10px;
  width: auto;
  font-size: 0.8rem;
  padding: 8px 14px;
}

.ea-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  color: #9ca3af;
  margin: 16px 0 4px;
  cursor: pointer;
  user-select: none;
}

.ea-toggle-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #6ee7b7;
}

.company-breakdown {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #2a2a4a;
}

.company-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: #aaa;
  padding: 5px 0;
}

.company-breakdown-row span:last-child {
  color: #ddd;
  font-weight: 600;
  text-align: right;
}

.company-breakdown-row.company-breakdown-highlight {
  background: rgba(110, 231, 183, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 6px;
}

.company-breakdown-row.company-breakdown-highlight span:last-child {
  color: #6ee7b7;
}

.incoming-share-box {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 18px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
}

.member-company-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.3);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 4px;
}

/* ================================================== */
/* Nomad Setup (multiple countries/currencies)          */
/* ================================================== */
.nomad-country-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #16162a;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.nomad-country-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nomad-country-info strong {
  color: #fff;
  font-size: 0.95rem;
}

.nomad-country-sub {
  font-size: 0.78rem;
  color: #888;
}

/* Editable currency + FX rate fields on each non-UK Nomad Setup row —
   replaces the old static text once a country's rate needs correcting. */
.nomad-country-edit-row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.nomad-country-edit-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nomad-country-edit-field label {
  font-size: 0.68rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nomad-edit-input {
  width: 90px;
  padding: 6px 8px;
  font-size: 0.82rem;
}

/* Currency selector row on the Household Costs screen, shown once Nomad
   Setup has more than just the UK — lets the tab's amounts be viewed/typed
   in a currency independent of which country is active. */
.cost-currency-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: #9ca3af;
}

/* Small hint under the accommodation amount field showing the GBP
   equivalent of a local-currency figure, once a non-GBP currency is
   selected on the Add Rent Option form. */
.fx-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #6ee7b7;
}

.fx-hint-inline {
  color: #6ee7b7;
  font-weight: 400;
  font-size: 0.7rem;
}

/* Country badge shown on each rent option row once Nomad Setup has more
   than just the UK — tells you at a glance which country/currency it's
   tagged with without opening the option's details. */
.rent-country-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 6px;
}

/* Pill-tab row for switching between countries' Household Costs tabs.
   Only rendered once Nomad Setup has more than just the UK. */
.cost-country-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.cost-country-tab {
  background: transparent;
  border: 1px solid #2a2a4a;
  color: #9ca3af;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.cost-country-tab:hover {
  color: #6ee7b7;
  border-color: #6ee7b7;
}

.cost-country-tab.active {
  color: #0a0a14;
  background: linear-gradient(135deg, #6ee7b7, #60a5fa);
  border-color: transparent;
}

/* ============================================================ */
/* SPEED MODE — minimal full-screen "what can I spend" view      */
/* ============================================================ */
.speed-mode-btn {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(110, 231, 183, 0.15));
  border-color: #f59e0b;
  color: #fde68a;
}

.speed-mode-btn:hover {
  border-color: #fbbf24;
  color: #fff;
}

#speedModeView {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0f0f1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.speed-figure-wrap {
  text-align: center;
  max-width: 90vw;
}

.speed-member-pills {
  display: flex;
  gap: 8px;
  max-width: 360px;
  margin: 0 auto 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.speed-member-pills .period-pill {
  flex: 0 1 auto;
  padding: 9px 18px;
}

.speed-period-pills {
  display: flex;
  gap: 8px;
  max-width: 260px;
  margin: 0 auto 28px;
}

/* Reuses .period-pill (defined for the Take-Home Pay card) so every
   pill switcher in the app looks and behaves identically. */
.speed-period-pills .period-pill {
  flex: 1;
}

/* Salary is the primary hero figure — big, front and centre. */
.speed-salary-hero {
  max-width: 460px;
  margin: 0 auto;
}

/* Employed vs Other income type switcher — same pill look as the
   period switcher above, but wider to fit the "Other" label. */
.speed-income-type-pills {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto 16px;
}

.speed-income-type-pills .period-pill {
  flex: 1;
  font-size: 0.78rem;
  padding: 8px 10px;
}

.speed-income-type-note {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #9ca3af;
  background: #16162a;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}

.speed-salary-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  margin-bottom: 12px;
}

.speed-salary-input-wrap {
  position: relative;
}

.speed-salary-symbol {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 700;
  color: #6ee7b7;
  pointer-events: none;
}

.speed-salary-input {
  width: 100%;
  padding: 14px 18px 14px 40px;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 2px solid #2a2a4a;
  border-radius: 12px;
  color: #fff;
  outline: none;
  text-align: left;
  transition: border-color 0.3s;
}

.speed-salary-input:focus {
  border-color: #6ee7b7;
}

/* Hero-sized variant — the big, unmissable number at the top. */
.speed-salary-symbol-hero {
  left: 24px;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  color: #6ee7b7;
}

.speed-salary-input-hero {
  padding: 20px 22px 20px 60px;
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  font-weight: 800;
  text-align: center;
  border-width: 2px;
  border-radius: 16px;
}

.speed-split-section {
  margin-top: 32px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.speed-split-readout {
  margin-top: 10px;
  font-size: 0.82rem;
  color: #888;
}

.speed-leftover-section {
  margin-top: 40px;
}

.speed-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.speed-value {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #6ee7b7, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  word-break: break-word;
}

.speed-value.negative {
  background: linear-gradient(135deg, #f87171, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.speed-sub {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #888;
}

.speed-salary-slider {
  width: 100%;
  margin-top: 14px;
}

.speed-actions {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.speed-secondary-btn,
.speed-exit-btn {
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  color: #ccc;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.speed-secondary-btn:hover {
  border-color: #f59e0b;
  color: #fff;
}

.speed-exit-btn:hover {
  border-color: #6ee7b7;
  color: #fff;
}

/* Costs sub-view — deliberately bare: search box, up to 3 costs, pager. */
.speed-costs-wrap {
  text-align: center;
  max-width: 420px;
  width: 90vw;
}

.speed-costs-search-row {
  margin: 18px 0 20px;
}

.speed-costs-search-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  color: #fff;
  outline: none;
  transition: border-color 0.3s;
}

.speed-costs-search-input:focus {
  border-color: #6ee7b7;
}

.speed-costs-search-input::placeholder {
  color: #666;
}

.speed-costs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 168px;
}

.speed-cost-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 0;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 0.2s;
}

.speed-cost-row:hover {
  border-color: #3a3a6a;
}

.speed-cost-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #6ee7b7;
  cursor: pointer;
}

.speed-cost-name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e0e0e0;
}

.speed-cost-row.speed-cost-excluded .speed-cost-name {
  color: #666;
  text-decoration: line-through;
}

.speed-cost-amount {
  font-size: 0.85rem;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
}

/* Editable £ value on each "Reduce costs" row — a compact version of the
   full Household Costs tab's own amount field (same c.amount, same
   onCostAmountInput-style handler: see onSpeedCostAmountInput()). */
.speed-cost-amount-edit-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.speed-cost-row.speed-cost-excluded .speed-cost-amount-edit-wrap {
  opacity: 0.5;
}

.speed-cost-amount-symbol {
  color: #9ca3af;
  font-size: 0.82rem;
  font-weight: 600;
}

.speed-cost-amount-input {
  width: 62px;
  padding: 6px 7px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  background: #0f0f1a;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  color: #fff;
  text-align: right;
  outline: none;
  transition: border-color 0.2s;
}

.speed-cost-amount-input:focus {
  border-color: #6ee7b7;
}

/* Weekly/monthly/annual dropdown on each "Reduce costs" row — see
   onSpeedCostFrequencyChange() in script.js. */
.speed-cost-freq-select {
  padding: 6px 20px 6px 7px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  background-color: #0f0f1a;
  background-position: right 6px center;
  background-size: 9px 6px;
  border: 1px solid #2a2a4a;
  border-radius: 8px;
  color: #9ca3af;
  outline: none;
  transition: border-color 0.2s;
}

.speed-cost-freq-select:focus {
  border-color: #6ee7b7;
}

/* Shared row style for the "Change split" and "Change accommodation"
   sub-views — a tappable card with a title, one-line description, and a
   result figure, reusing .speed-costs-list's layout as the container. */
.speed-share-row {
  display: block;
  width: 100%;
  background: #12121f;
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}

.speed-share-row:hover {
  border-color: #3a3a6a;
}

.speed-share-row-active {
  border-color: #6ee7b7;
  background: linear-gradient(135deg, rgba(110,231,183,0.08), rgba(59,130,246,0.08));
}

.speed-share-row-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e0e0e0;
}

.speed-share-row-blurb {
  margin-top: 4px;
  font-size: 0.8rem;
  color: #888;
  line-height: 1.4;
}

.speed-share-row-figure {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6ee7b7;
}

.speed-share-row-figure.negative {
  color: #f87171;
}

.speed-costs-empty {
  color: #666;
  font-size: 0.9rem;
  padding: 24px 0;
}

.speed-costs-pager {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.speed-pager-btn {
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  color: #ccc;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}

.speed-pager-btn:hover:not(:disabled) {
  border-color: #6ee7b7;
  color: #fff;
}

.speed-pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.speed-pager-label {
  font-size: 0.8rem;
  color: #888;
  min-width: 70px;
}

.speed-costs-back-btn {
  margin-top: 28px;
}

/* Shared "add a thing" mini-form affordance — used by both the
   accommodation sub-view's "+ Add rent option" and the costs sub-view's
   "+ Add cost" (see speedAddRentOption()/speedAddCost() in script.js). */
.speed-add-form-row {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.speed-add-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.speed-add-form-amount-wrap .speed-salary-input {
  font-size: 1.15rem;
  padding: 12px 16px 12px 36px;
}

.speed-add-form-amount-wrap .speed-salary-symbol {
  left: 14px;
  font-size: 1.05rem;
}

/* Amount + weekly/monthly/annual frequency, side by side, in the "+ Add
   cost" form. */
.speed-add-cost-amount-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.speed-add-cost-amount-row .speed-add-form-amount-wrap {
  flex: 1;
  min-width: 0;
}

.speed-add-cost-amount-row .cost-frequency-input {
  flex-shrink: 0;
  width: 128px;
  font-size: 0.85rem;
  padding: 8px 26px 8px 12px;
}

.speed-add-form-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

@media (max-width: 500px) {
  .speed-salary-input-hero { padding-left: 48px; }
  .speed-actions { gap: 10px; }
  .speed-secondary-btn, .speed-exit-btn { padding: 10px 18px; font-size: 0.85rem; }
  .speed-cost-name { font-size: 0.88rem; }
  .speed-cost-amount { font-size: 0.78rem; }
  .speed-cost-amount-input { width: 52px; font-size: 0.78rem; padding: 5px 6px; }
  .speed-cost-freq-select { font-size: 0.68rem; padding: 5px 18px 5px 5px; }
}