/* ─────────────────────────────────────────────────────────────────────────────
   Responsive convention (adopt for new components; existing CSS not migrated)
   ────────────────────────────────────────────────────────────────────────────
   • Mobile-first: write the narrow-viewport rule, then widen with min-width.
   • Use ONE of these canonical breakpoints — do not invent new ones:
       --bp-sm: 640px   (phone → tablet)
       --bp-md: 1024px  (tablet → desktop)
   • Never put grid-template-columns in inline style=""; use .responsive-grid
     or a component class so breakpoints stay in one place.
   • Legacy rules still use 600/640/680/768 — leave them be, migrate opportunistically.
   ──────────────────────────────────────────────────────────────────────── */

/* Reusable mobile-first grid. Collapses to a single column on phones and
   expands to as many columns as fit above 640px. */

/* Strip the native number-input spinner buttons — their default tan/brown
   tint clashes with the dark theme. Users still get keyboard arrow keys. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Custom checkbox: dark like input fields when unchecked, blue when ticked.
   Kills the OS-default tan tint everywhere. More-specific rules with their
   own dimensions (.toggle-switch input, .tag-chip input) still override. */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease;
}
input[type="checkbox"]:hover {
  border-color: var(--accent);
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 10px;
  border: solid #0f172a;
  border-width: 0 2px 2px 0;
  transform: translate(-55%, -60%) rotate(45deg);
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(56,189,248,0.45);
  outline-offset: 2px;
}

/* Fee-fields section inside the account form. Kept narrow on phones so
   labels don't wrap awkwardly. */
.fee-fields {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .fee-fields {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

:root {
  color-scheme: dark;
  accent-color: var(--accent);
  --bg: #0f172a;
  --panel: #111827;
  --panel-2: #1f2937;
  --text: #e5e7eb;
  --text-white: #ffffff;
  --muted: #94a3b8;
  --primary: #38bdf8;
  --accent: #38bdf8;
  --accent-hover: #7dd3fc;
  --accent-2: #22c55e;
  --accent-3: #f59e0b;
  --accent-4: #f97316;
  --accent-5: #a78bfa;
  --accent-6: #ef4444;
  --accent-7: #14b8a6;
  --accent-8: #eab308;
  --border: #334155;
  --error: #f87171;
  --success: #86efac;
  --danger: #f87171;
  --chart-grid: rgba(255,255,255,0.05);
  --chart-grid-alt: rgba(51,65,85,0.5);
  --chart-bg-deep: #0b1220;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.site-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  background: rgba(17, 24, 39, 0.96);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.site-header h1,
.site-logo {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.site-logo-mark {
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
  display: inline-block;
  object-fit: contain;
}

nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

nav a:hover,
nav a:focus,
nav a:active {
  color: var(--accent);
  background: rgba(56, 189, 248, 0.08);
  border-radius: 999px;
  outline: none;
}

nav a.active {
  color: var(--text);
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.3);
}

.account-link,
.goal-link-card {
  text-decoration: none;
  color: inherit;
}

.account-link:hover,
.goal-link-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.goal-link-card {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.goal-link-card:hover .goal-card-actions,
.goal-link-card:focus .goal-card-actions,
.goal-link-card:focus-within .goal-card-actions {
  opacity: 1;
  transform: translateY(0);
}

.page-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

@media (min-width: 1280px) {
  .page-shell {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* ── Flash messages ──────────────────────────────────────────────── */
.flash-msg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}
.flash-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
}
.flash-dismiss:hover { opacity: 1; }
.flash-success {
  background: rgba(34,197,94,0.1);
  color: var(--accent-2);
  border-color: rgba(34,197,94,0.25);
}
.flash-error {
  background: rgba(248,113,113,0.1);
  color: var(--error);
  border-color: rgba(248,113,113,0.25);
}
.flash-warning {
  background: rgba(245,158,11,0.08);
  color: #fbbf24;
  border-color: rgba(245,158,11,0.3);
}
.flash-info {
  background: rgba(56,189,248,0.07);
  color: var(--accent);
  border-color: rgba(56,189,248,0.3);
}

.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: #7f1d1d;
  color: #fecaca;
  border-bottom: 1px solid #991b1b;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.offline-banner::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f87171;
  flex-shrink: 0;
}
.online-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: #14532d;
  color: #bbf7d0;
  border-bottom: 1px solid #166534;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: opacity 0.4s;
}
.online-toast::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}
/* Push page content down when the fixed banner is showing */
body.is-offline .site-header,
body.is-back-online .site-header {
  margin-top: 2.25rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.goal-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
}

@media (min-width: 600px) and (max-width: 900px) {
  .goal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
}

.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.card.highlight {
  border-color: rgba(56, 189, 248, 0.45);
}

.card h2:not(.hero-value) {
  margin-top: 0;
  font-size: 1rem;
  color: var(--text);
}

/* Section-header titles — consistent across .card and .panel */
.card .section-header h2,
.card .section-header h3,
.panel .section-header h2,
.panel .section-header h3 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.2rem 0 0.25rem;
  color: var(--text);
}

/* Section-header descriptions stay muted/grey */
.section-header + .helper-text,
.helper-text {
  color: var(--muted);
}

.goal-card-title {
  margin-bottom: 0.18rem;
  font-size: 1.08rem;
  line-height: 1.2;
  /* color inherits from .card h2:not(.hero-value) — no override needed. */
}

.goal-card-heading {
  margin-bottom: 0;
}

.goals-page-helper {
  margin: 0 0 0.85rem;
  max-width: 52rem;
  font-size: 0.84rem;
}

.goal-card-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.goal-value-line {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.goal-progress-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  color: var(--muted);
}

.goal-progress-summary small {
  color: inherit;
}

.goal-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: -0.1rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.goal-status-label {
  font-weight: 700;
  color: var(--text);
}

.goal-status-detail {
  color: var(--muted);
}

.goal-projection {
  margin: 0;
  font-size: 0.82rem;
  color: var(--accent);
}

.goal-projection-reached {
  color: var(--accent-2);
}

.goal-projection-none,
.goal-projection-long {
  color: var(--muted);
}

.goal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.goal-chip-overflow {
  color: var(--muted);
  border-color: rgba(148, 163, 184, 0.28);
}

.goal-card-note {
  margin: 0;
  font-size: 0.82rem;
}

.goal-source-details {
  margin-top: 0.1rem;
}

.goal-source-details summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.goal-source-details summary::-webkit-details-marker {
  display: none;
}

.goal-source-details[open] summary {
  color: var(--accent);
}

.goal-source-panel {
  margin-top: 0.55rem;
  padding: 0.72rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.18);
}

.goal-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.goal-source-item {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.goal-source-item span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.goal-source-item strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.2;
}

.goal-source-item-wide {
  grid-column: 1 / -1;
  margin-top: 0.2rem;
  padding-top: 0.48rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.card .goal-source-caveat {
  margin: 0.48rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.goal-row {
  padding: 0.6rem 0;
}

.goal-row-divider {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.6rem;
}

.goal-row-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.3rem;
}

.goal-row-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.goal-track-status {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
}

.goal-track-label {
  font-weight: 600;
}

.goal-track-detail {
  min-width: 0;
}

.goal-progress-pct {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.card p,
.panel p {
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
}

.eyebrow {
  margin: 0 0 0.4rem;
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overview-grid .card,
.account-summary-card{
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.allowance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.allowance-warning-text {
  color: var(--accent-3) !important;
}

.allowance-disclaimer {
  font-size: 0.78rem !important;
}

.allowance-history-title {
  margin: 0.75rem 0 0.4rem !important;
}

@media (max-width: 480px) {
  .allowance-grid {
    grid-template-columns: 1fr;
  }

  .goals-page-helper {
    margin-bottom: 0.7rem;
    font-size: 0.8rem;
  }

  .goal-link-card {
    gap: 0.6rem;
    padding: 1rem;
  }

  .goal-progress-summary {
    gap: 0.3rem 0.55rem;
  }

  .goal-status-line {
    gap: 0.25rem 0.45rem;
    font-size: 0.8rem;
  }

  .goal-chip-row {
    gap: 0.35rem;
  }

  .goal-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .goal-source-item-wide {
    grid-column: 1 / -1;
  }

  .goal-row-header {
    align-items: flex-start;
    gap: 0.6rem;
  }

  .goal-progress-pct {
    padding-top: 0.1rem;
    flex-shrink: 0;
  }
}

.stat-card p,
.allowance-card p,
.account-summary-card p {
  font-size: 1.35rem;
  font-weight: 700;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Allowances page — collapsible log panels */
.allowance-log-panel {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}

.allowance-log-panel-inner {
  padding-top: 0.85rem;
}

.allowance-history-table {
  border-top: 1px solid var(--border);
  padding-top: 0.25rem;
}

.section-header h2 {
  margin: 0;
  color: var(--text);
}

.card small {
  color: var(--muted);
}

.progress {
  margin: 0.75rem 0 0.5rem;
  width: 100%;
  height: 10px;
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
}

.progress-bar.progress-bar-danger {
  background: linear-gradient(90deg, var(--danger), var(--accent-6));
}

.progress-bar.progress-bar-warning {
  background: var(--accent-3);
}

/* ─────────────────────────────────────────────────────────────────────
   Badge variants — pick by semantic role, not by colour:
     .badge                 default pill (neutral secondary action)
     .badge.badge-primary-action   primary call-to-action ("Save", "Add")
     .badge.badge-danger           destructive action ("Delete", "Remove")
     .badge.badge-meta             tertiary / info chip ("Refresh prices")
     .badge.badge-outline          ghost / low-emphasis action
     .badge.badge-accent           accent/highlight for wizard primary
     .badge.badge-tag              static tag-style label (not clickable)
     .badge-sm                     size modifier — smaller padding/font
     .badge-complete               status indicator (completed)
   Group into a .badge-row for spacing/wrap.
   ──────────────────────────────────────────────────────────────────── */
.badge-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.badge {
  font-size: 0.9rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: #0b1220;
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.badge-sm {
  font-size: 0.75rem;
  padding: 0.35rem 0.7rem;
  min-height: auto;
}

.badge:hover,
.badge:focus {
  color: var(--text);
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}

.badge.badge-danger {
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

.badge.badge-danger:hover,
.badge.badge-danger:focus {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.08);
  color: #fee2e2;
}

.badge.badge-warning {
  border-color: rgba(245,158,11,0.35);
  background: rgba(245,158,11,0.08);
  color: #fbbf24;
}

.badge.badge-warning:hover,
.badge.badge-warning:focus {
  border-color: rgba(245,158,11,0.55);
  background: rgba(245,158,11,0.14);
  color: #fde68a;
}

.badge.badge-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}

.badge.badge-outline:hover,
.badge.badge-outline:focus {
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.35);
  color: var(--text);
}

.badge.badge-meta {
  font-size: 0.82rem;
  padding: 0.45rem 0.8rem;
  min-height: 36px;
}

.badge.badge-tag {
  font-size: 0.82rem;
  padding: 0.42rem 0.85rem;
  min-height: 36px;
}

.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.tag-chip {
  position: relative;
  display: inline-block;
}

.tag-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tag-chip .tag-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: #0b1220;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-chip .tag-label:hover {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.06);
}

.tag-chip input:checked + .tag-label {
  color: var(--text);
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.12);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.15), inset 0 0 8px rgba(56, 189, 248, 0.05);
}

.tag-chip .tag-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  min-height: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
  outline: none;
  user-select: none;
  display: block;
}

.tag-chip .tag-delete:hover {
  background: #f87171;
  border-color: #f87171;
  color: #fff;
}

/* "Add custom tag" row — input + button beneath the chip picker. */
.tag-add-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.6rem;
}

.tag-add-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.9rem;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.tag-add-input::placeholder {
  color: var(--muted);
}

.tag-add-input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.04);
}

/* subtle pulse on the tag picker in create mode to draw the eye */
.tag-picker-highlight {
  animation: tags-attention 3s ease-in-out 1s 1;
}

@keyframes tags-attention {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 20px rgba(56, 189, 248, 0.08); }
}

.helper-text {
  color: var(--muted);
  margin-bottom: 1rem;
}

.review-list {
  display: grid;
  gap: 1rem;
}

.simple-list {
  display: grid;
  gap: 0.75rem;
}

.simple-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.35);
  transition: background 0.15s, border-color 0.15s;
}

.simple-list-item:hover,
.simple-list-item:focus-within {
  background: rgba(56,189,248, 0.07);
  border-color: var(--accent);
}

.simple-list-item p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.simple-list-item a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.form-grid {
  display: grid;
  /* 240px min (was 220) so labels like "Pension allowance (£)" don't wrap. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

 .settings-form {
  display: grid;
  gap: 1rem;
}

.settings-form label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--muted);
}

.wizard-focus-note,
.settings-focus-note,
.settings-section-divider {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}

.settings-focus-note strong,
.wizard-focus-note h3 {
  display: block;
  margin: 0.2rem 0 0.35rem;
  color: var(--text);
}

.settings-section-divider {
  border-style: dashed;
  background: rgba(255,255,255,0.02);
}

.wizard-later-details {
  margin-top: 0.9rem;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.02);
}

.wizard-later-details summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}

.acct-budget-flags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.95rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.acct-budget-flags .acct-flag-heading {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .acct-budget-flags {
    grid-template-columns: 1fr;
  }
}

.acct-flag-heading {
  margin: 0 0 0.15rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.acct-flag-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.acct-flag-row:hover {
  background: rgba(56,189,248,0.06);
  border-color: rgba(56,189,248,0.28);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.4);
}

.acct-flag-row input[type="checkbox"] {
  margin: 0.15rem 0 0 0;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.acct-flag-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.acct-flag-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.acct-flag-desc {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.acct-flag-desc em {
  font-style: normal;
  color: var(--fg);
  font-weight: 600;
}

/* Pre-salary deduction sits beside Include in budget; visually identical
   so the pair reads as a unified group rather than parent/child. */
.acct-flag-nested {
  margin-left: 0;
  border-left: none;
  border-radius: 8px;
}

/* Flush variant: when acct-budget-flags lives inside an .edit-card,
   drop the outer chrome so it doesn't look like a box-in-box. */
.acct-budget-flags-flush {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 0.45rem;
}

/* ── Account edit form: section cards ──────────────────────────── */
.acct-edit-form .panel-sm {
  padding: 1.25rem 1.35rem 1.4rem;
}

.edit-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.15rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.edit-card + .edit-card,
.acct-edit-form .section-title + .edit-card {
  margin-top: 0.85rem;
}

.section-title + .edit-card {
  margin-top: 0.5rem;
}

.edit-card:hover {
  border-color: rgba(255,255,255,0.11);
}

.edit-card-header {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.edit-card-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}

.edit-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
}

.edit-card-contrib {
  border-color: color-mix(in srgb, var(--accent-2) 22%, rgba(255,255,255,0.07));
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent-2) 6%, transparent),
              color-mix(in srgb, var(--accent-2) 2%, transparent));
}

.edit-card-contrib .edit-card-eyebrow {
  color: var(--accent-2);
}

/* ── Advanced fees, as a collapsible edit-card ─────────────────── */
details.edit-card-fees {
  padding: 0;
  overflow: hidden;
}

.edit-card-fees-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.edit-card-fees-summary::-webkit-details-marker { display: none; }

.edit-card-fees-summary .edit-card-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.edit-card-fees-toggle {
  font-size: 0.9rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}

details.edit-card-fees[open] .edit-card-fees-toggle {
  transform: rotate(180deg);
}

details.edit-card-fees > .form-grid,
details.edit-card-fees > .form-hint {
  padding: 0 1.1rem 1rem;
}

details.edit-card-fees[open] > .edit-card-fees-summary {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Notes textarea ────────────────────────────────────────────── */
.acct-notes-textarea {
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 80px;
  padding: 0.55rem 0.7rem;
}

/* ── Edit form action bar ──────────────────────────────────────── */
.edit-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.edit-save-btn {
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 28%, transparent),
              color-mix(in srgb, var(--accent) 16%, transparent));
  color: var(--fg);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 45%, transparent);
}

.edit-save-btn:hover {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 40%, transparent),
              color-mix(in srgb, var(--accent) 24%, transparent));
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}

.edit-cancel-btn {
  padding: 0.55rem 1rem;
}

.settings-form label span {
  font-size: 0.9rem;
  font-weight: 600;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  min-height: 48px;
  font: inherit;
}

.settings-form textarea {
  min-height: 120px;
  resize: vertical;
}

.settings-form input:focus,
.settings-form select:focus,
.settings-form textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.settings-form button,
.badge-row button:not(.badge) {
  margin-top: 0.25rem;
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-form button:hover,
.settings-form button:focus,
.badge-row button:not(.badge):hover,
.badge-row button:not(.badge):focus {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.6);
  color: var(--text);
}

.settings-form button.button-secondary {
  background: rgba(56, 189, 248, 0.08);
  color: var(--text);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.month-year-picker {
  display: flex;
  gap: 0.5rem;
}

.month-year-picker select {
  flex: 1;
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  min-height: 48px;
  font: inherit;
}

.month-year-picker select:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

button.button-danger {
  background: rgba(248, 113, 113, 0.16);
  color: #fee2e2;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.button-danger:hover,
button.button-danger:focus {
  background: rgba(248, 113, 113, 0.24);
  border-color: rgba(248, 113, 113, 0.55);
}

.position-entry-card {
  border-color: rgba(56, 189, 248, 0.28);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(10, 18, 35, 0.96));
}

.position-entry-card h3 {
  margin-top: 0;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.position-entry-card p {
  margin-top: 0;
  color: var(--muted);
}

/* ── Compact holding update rows (Monthly Update) ───────────────────────── */
.holding-update-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.holding-update-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}

.holding-update-row:hover,
.holding-update-row:focus-within {
  background: rgba(56,189,248, 0.07);
  border-color: var(--accent);
}

.holding-update-meta strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text);
}

.holding-update-meta span {
  font-size: 0.8rem;
  color: var(--muted);
}

.holding-update-inputs {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.holding-update-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* ── Data Health Summary ──────────────────────────────────────────────────── */
.data-health-summary {
  border-left: 4px solid var(--accent);
}

.data-health-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.data-health-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.data-health-status-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.4rem;
  flex-shrink: 0;
}

.data-health-item-good .data-health-status-icon {
  background-color: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.data-health-item-warning .data-health-status-icon {
  background-color: var(--error);
  box-shadow: 0 0 8px var(--error);
}

.data-health-item-info .data-health-status-icon {
  background-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.data-health-item strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

.link-accent {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  margin-left: 0.25rem;
}

.link-accent:hover {
  text-decoration: underline;
}

.holding-update-field span {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.holding-update-field input {
  width: 10rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.95rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.holding-price-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.holding-price-wrap input {
  flex: 1;
}

.hu-refresh {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.4rem 0.55rem;
  line-height: 1;
  transition: background 0.15s;
}

.hu-refresh:hover {
  background: rgba(56,189,248,0.1);
}

.holding-update-value {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.holding-update-value span {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.holding-update-value strong {
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
}

.hu-submit {
  margin-left: auto;
  align-self: flex-end;
  white-space: nowrap;
}

.allocation-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 1rem;
  align-items: start;
}

.allocation-chart-card {
  position: relative;
  width: 210px;
  height: 210px;
  margin: 0 auto 1rem;
  flex-shrink: 0;
}

.allocation-list {
  display: grid;
  gap: 0.75rem;
}

.allocation-item {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.allocation-item-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.allocation-item-top strong,
.allocation-item-top span {
  font-size: 0.95rem;
}

/* .mt-1 / .mb-1 moved to the utility block further down — kept here only
   as historical reference. The canonical definitions live with the full
   margin scale near line 3820. */
.panel-sm { padding: 1rem; }           /* nested / compact panels */
.row-end {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}

/* ── Inline add-holding bar ───────────────────────────────────────────────── */
.add-holding-bar {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.04);
}

.add-holding-fields {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.add-holding-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.add-holding-field label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.add-holding-field input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.4rem 0.65rem;
  font-size: 0.9rem;
  font-family: inherit;
}

.add-holding-field input:focus {
  outline: none;
  border-color: var(--accent);
}

#ah-ticker { width: 9rem; }
#ah-units  { width: 8rem; }

.add-holding-preview-wrap { min-width: 7rem; }
.add-holding-preview {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.4rem 0;
}

.add-holding-submit { align-self: flex-end; }

.card-danger {
  border-color: rgba(248, 113, 113, 0.35);
}

/* ── Holdings: desktop table vs mobile cards ─────────────────────────── */
/* ── Holdings list ─────────────────────────────────────────────────────
   Single responsive component (desktop tabular row at ≥640px, stacked
   card at <640px). All sizing, alignment, and spacing lives here — the
   markup in accounts.html has no inline styles. To tweak widths,
   padding, or label behaviour, edit this block only.
   ──────────────────────────────────────────────────────────────────── */
.holdings-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.holdings-row {
  display: grid;
  /* Every column has a fixed/flex width with no `auto` — `auto` would
     size to content, making the header row (empty actions cell) narrower
     than data rows and throwing the numeric columns out of alignment. */
  grid-template-columns:
    minmax(0, 1fr)   /* name */
    6rem             /* units */
    7rem             /* price */
    7rem             /* value */
    minmax(8.5rem, 15rem); /* actions (Save + Log + Remove badges) */
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.35);
}

.holdings-row-head {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  padding-top: 0.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
}

.holdings-row:not(.holdings-row-head):hover,
.holdings-row:not(.holdings-row-head):focus-within {
  background: rgba(56, 189, 248, 0.04);
}

.holdings-cell-name strong {
  font-size: 0.92rem;
}

.holdings-cell-name small {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

.holdings-cell-units,
.holdings-cell-price {
  text-align: right;
}

.holdings-cell-value {
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}

/* Anchor the numeric cells and actions to the top of the row so their
   first line shares one baseline. The Price cell's input + timestamp
   stack otherwise centers higher than the Units-only cell. */
.holdings-cell-units,
.holdings-cell-price,
.holdings-cell-value,
.holdings-cell-actions {
  align-self: start;
  /* Small nudge so the £ text and Save/Remove buttons visually sit on
     the input's baseline rather than against the row's top edge. */
  padding-top: 0.35rem;
}

.holdings-timestamp {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.holdings-input {
  width: 100%;
  padding: 0.3rem 0.5rem;
  text-align: right;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
}

.holdings-cell-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Performance link list under the holdings tiles. The mobile tile is
   compact and no longer carries a clickable holding name, so this is the
   way users get from an account view into a holding's performance page. */
.holdings-perf-links {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(51, 65, 85, 0.4);
}

.holdings-perf-eyebrow {
  margin: 0 0 0.5rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.holdings-perf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.holdings-perf-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.04);
  border: 1px solid rgba(56, 189, 248, 0.12);
  color: var(--accent);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.holdings-perf-link:hover,
.holdings-perf-link:focus {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
}

.holdings-perf-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 500;
}

.holdings-perf-ticker {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.holdings-perf-arrow {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.95rem;
  opacity: 0.7;
}

.holdings-cash-panel {
  background: var(--surface-2);
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.holdings-cash-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.holdings-cash-field {
  flex: 1;
  min-width: 10rem;
}

.holdings-cell-actions .form-reset {
  display: contents;
}

/* Labels are only visible in the stacked mobile layout. */
.holdings-label {
  display: none;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

/* The collapsed summary row is mobile-only — hidden on desktop. */
.holdings-row-summary {
  display: none;
}

@media (max-width: 640px) {
  .holdings-row-head {
    display: none;
  }
  .holdings-row {
    /* `minmax(0, 1fr)` (not bare `1fr`) is essential — bare `1fr` is
       `minmax(auto, 1fr)`, which forces the column to be at least as wide
       as the min-content of its children. With a long value like
       £123,456.78, that pushes the tile wider than the panel and tiles
       bleed off-edge. minmax(0, 1fr) lets the row shrink to its container. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "summary"
      "name"
      "units"
      "price"
      "value"
      "actions";
    /* Collapsed tiles only show the summary row — keep row-gap at 0 so
       the 5 hidden grid tracks don't stack up gaps under the content
       and inflate the tile height. Expanded state restores the gap. */
    row-gap: 0;
    column-gap: 1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Two-row card: row 1 carries the headline (TICKER + % on the left,
     VALUE + chevron on the right, all on a shared baseline); row 2 is
     the holding name pushed below with a clear vertical gap. The whole
     summary is one tappable button — pressing anywhere on the tile
     toggles expansion. */
  .holdings-row-summary {
    grid-area: summary;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
  }
  .holdings-summary-left {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
  }
  .holdings-summary-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }
  .holdings-summary-right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    /* Anchor the value to the top of the tile so it lines up with the
       ticker; the holding name flows below on the left only. */
    align-self: flex-start;
  }
  .holdings-summary-ticker {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* % of pot — small accent pill next to the ticker. */
  .holdings-summary-pct {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    white-space: nowrap;
    padding: 0.2rem 0.5rem;
    background: rgba(56, 189, 248, 0.12);
    border-radius: 999px;
  }
  /* Holding name — muted second row, sits below the ticker with a real
     gap so the two don't read as one squashed line. Wraps across lines
     so the full fund name is visible (server-trimmed of verbose suffixes
     like USD / UCITS ETF / Accumulation to keep it tidy). */
  .holdings-summary-name {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .holdings-summary-value {
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.15;
    white-space: nowrap;
  }
  .holdings-summary-chevron {
    color: var(--muted);
    font-size: 0.9rem;
    transition: transform 0.18s ease;
  }
  .holdings-row.is-expanded .holdings-summary-chevron {
    transform: rotate(180deg);
  }
  /* Cells collapsed by default; revealed when the row is expanded. */
  .holdings-cell-name,
  .holdings-cell-units,
  .holdings-cell-price,
  .holdings-cell-value,
  .holdings-cell-actions {
    display: none;
  }
  .holdings-row.is-expanded {
    row-gap: 0.5rem;
  }
  .holdings-row.is-expanded .holdings-cell-units,
  .holdings-row.is-expanded .holdings-cell-price,
  .holdings-row.is-expanded .holdings-cell-value,
  .holdings-row.is-expanded .holdings-cell-actions {
    display: block;
  }
  .holdings-row.is-expanded .holdings-cell-actions {
    display: flex;
  }
  /* Holding name cell stays hidden even when expanded — the summary
     already shows the full name, so a giant accent-blue duplicate in the
     body just clutters the form. */
  .holdings-cell-name    { grid-area: name;    text-align: left; }
  .holdings-cell-units   { grid-area: units;   text-align: left; }
  .holdings-cell-price   { grid-area: price;   text-align: left; }
  .holdings-cell-value   { grid-area: value;   font-size: 1.05rem; text-align: left; }
  .holdings-cell-actions { grid-area: actions; padding-top: 0.5rem; border-top: 1px solid rgba(51, 65, 85, 0.3); }
  .holdings-label        { display: block; }
}

.muted-cell {
  padding: 0.5rem;
  color: var(--muted);
}

@media (max-width: 768px) {
  .page-shell {
    padding: 1rem;
  }

  /* Trim panel side padding on phones so child cards/tiles get a couple
     more pixels of breathing room from the screen edge. The 1.5rem default
     made the holding tiles feel like they were touching the panel border. */
  .panel {
    padding: 1rem 0.85rem 1.15rem;
  }

  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="month"],
  textarea,
  select {
    font-size: 16px;
  }

  .site-header {
    padding: 0.9rem 1rem;
  }

  .site-header h1 {
    margin-bottom: 0.85rem;
    font-size: 1.25rem;
  }

  nav {
    gap: 0.5rem;
  }

  nav a {
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    min-height: 40px;
  }

  .simple-list-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .onboarding-hero {
    flex-wrap: wrap;
  }
  .onboarding-welcome h2.onboarding-title {
    font-size: 1.9rem;
  }
  .onboarding-progress {
    width: 100%;
    margin-left: 0;
    margin-top: 0.25rem;
  }

  .onboarding-primary {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .allowance-grid,
  .allocation-layout {
    grid-template-columns: 1fr;
  }

  .allocation-chart-card {
    width: 170px;
    height: 170px;
  }

  .allocation-list {
    width: 100%;
  }

  /* On mobile the Allocation Snapshot is redundant — the chip list duplicates
     the Holdings list above and the donut alone has no labels to map slices
     back to holdings. Hide the entire panel; desktop keeps it. */
  @media (max-width: 640px) {
    .allocation-panel {
      display: none;
    }
  }

  .settings-form input,
  .settings-form select,
  .settings-form textarea,
  .settings-form button {
    width: 100%;
  }
}

/* Legacy stat colour wrappers — kept in sync with stat-positive-text / stat-negative-text */

.budget-amount-input {
  width: 110px;
  text-align: right;
  padding: 0.3rem 0.5rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
}

/* Redesigned hero */
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}
.hero-top > div:first-child {
  flex: 1;
  min-width: 0;
}

.hero-value {
  font-size: 2.4rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0.2rem 0 0.25rem;
  letter-spacing: -0.02em;
}

.hero-value-xl {
  font-size: 3.8rem;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.review-hero-todo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.review-hero-todo .badge {
  margin: 0;
}

.hero-helper {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Shared month picker inside hero sections */

/* Horizontal stat strip — sits below hero-top, inside the hero card */
.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-top: 1rem;
  margin-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.hero-strip-stat {
  /* 1 1 auto — each stat starts at its natural content width, then grows
     equally to fill the row. Short labels like "AGE" don't steal space
     that longer labels like "PENSION ALLOWANCE" need to stay on one line. */
  flex: 1 1 auto;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 1.25rem 0 0;
}

.hero-strip-stat span {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.hero-strip-stat strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1rem;
  }
  .hero-strip-stat {
    min-width: 0;
    padding: 0.5rem 0.25rem;
    gap: 0.35rem;
  }
  /* In the 2-col mobile grid, "MONTHLY CONTRIBUTIONS" and "PROJECTED AT
     RETIREMENT" don't fit on one line. Allow the label to wrap to two
     lines and shrink it slightly so neighbours don't bleed into one
     another. The strong (value) stays nowrap so big numbers don't break
     mid-figure. */
  .hero-strip-stat span {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    font-size: 0.68rem;
  }
  .hero-strip-stat strong {
    font-size: 1.05rem;
  }
}

.hero-stat {
  background: rgba(11, 18, 32, 0.45);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

.hero-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
}

.hero-stat strong {
  font-size: 1rem;
  font-weight: 700;
}

.overview-access-card {
  display: grid;
  gap: 0.9rem;
}

.overview-compact-only {
  display: none !important;
}

.projections-compact-only {
  display: none !important;
}

.overview-access-header {
  margin-bottom: 0;
}

.overview-access-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.overview-access-mini-card {
  background: rgba(11, 18, 32, 0.35);
}

.overview-access-value {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  .overview-desktop-detail {
    display: none !important;
  }

  .overview-compact-only {
    display: block !important;
  }

  .projections-desktop-detail {
    display: none !important;
  }

  .projections-compact-only {
    display: block !important;
  }

  .overview-access-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-top {
    flex-wrap: wrap;
  }

  .accounts-hero-actions,
  .debts-hero-actions {
    width: 100%;
    flex: 1 0 100%;
    order: 2;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .accounts-hero-actions {
    flex-direction: row;
  }

  .goals-hero-actions,
  .budget-hero-actions {
    width: 100%;
    flex: 1 0 100%;
    order: 2;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .budget-hero-actions {
    justify-content: center;
  }

  .accounts-hero-badges,
  .debts-hero-badges {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    order: 1;
    justify-content: flex-start;
    margin-top: 0;
  }

  .accounts-hero-badges {
    flex-direction: row;
  }

  .accounts-hero-badges .badge {
    width: 100%;
  }

  .debts-hero-badges .badge {
    width: 100%;
  }

  .goals-hero-badges,
  .budget-hero-badges {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: flex-start;
    margin-top: 0;
  }

  .goals-hero-badges .badge {
    width: 100%;
  }

  .budget-hero-badges .badge {
    width: 100%;
  }

  .budget-hero-month-nav {
    width: 100%;
    margin-inline: 0;
    justify-content: center;
  }

  .hero-value {
    font-size: 1.9rem;
  }
  .hero-value-xl {
    font-size: 2.8rem;
  }
  .card .section-header h2,
  .card .section-header h3,
  .panel .section-header h2,
  .panel .section-header h3 {
    font-size: 1.45rem;
    line-height: 1.2;
  }
}

/* Status badges */
.badge-complete {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}

.badge-primary-action {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: var(--accent);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
}

.badge-primary-action:hover,
.badge-primary-action:focus {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.6);
  color: var(--text);
}

/* Charts */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
}

.chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* What-if panel */
.whatif-result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.whatif-result-item {
  background: rgba(11, 18, 32, 0.45);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.whatif-result-item span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
}

.whatif-result-item strong {
  font-size: 1.15rem;
}

.whatif-positive { color: #86efac; }
.whatif-negative { color: #fca5a5; }

/* Contribution overrides */
.override-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.override-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(11, 18, 32, 0.35);
}

.override-item-info strong {
  display: block;
  font-size: 0.95rem;
}

.override-item-info small {
  color: var(--muted);
  font-size: 0.8rem;
}

.override-active {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.05);
}

.override-active-prominent {
  position: relative;
  border-color: rgba(251, 191, 36, 0.55);
  border-left: 4px solid rgba(251, 191, 36, 0.9);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.04));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18), 0 6px 16px -10px rgba(251, 191, 36, 0.35);
  transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.override-active-prominent:hover {
  border-color: rgba(251, 191, 36, 0.95);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.08));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45), 0 10px 24px -8px rgba(251, 191, 36, 0.55);
  transform: translateY(-1px);
}

.override-active-prominent .override-item-info strong {
  color: #fde68a;
}

/* On phones, the right-hand actions cluster (Active badge + Budget link)
   eats roughly half the row width, leaving "Standard contribution from
   Budget" or a date range to wrap onto 3-4 lines. Stack actions below the
   info on narrow viewports so the text gets the full row width. */
@media (max-width: 640px) {
  .override-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
  }
  .override-item > .flex {
    justify-content: flex-end;
  }
}

.override-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
  white-space: nowrap;
}

/* ── Premium Bonds prize tracking ─────────────────────────────────── */

/* monthly review prize form */
.pb-prize-log-form.settings-form .pb-prize-log-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.pb-prize-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pb-prize-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: var(--surface-2, var(--bg-secondary, rgba(0,0,0,0.03)));
  font-size: 0.9rem;
}

.pb-prize-row > div {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pb-prize-won {
  color: var(--color-gain, #22c55e);
  font-weight: 600;
}

.pb-prize-nil {
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}

.pb-prize-empty {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.5rem 0;
}

.pb-prize-pending {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.04);
}

.badge-warning {
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
  white-space: nowrap;
}

/* What-if per-account rows */
.wi-account-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.wi-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(11, 18, 32, 0.35);
}

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

.wi-account-info strong {
  display: block;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wi-account-info small {
  color: var(--muted);
  font-size: 0.78rem;
}

.wi-account-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.wi-account-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 0.6rem;
}

.wi-gbp {
  color: var(--muted);
  font-size: 0.85rem;
}

.wi-contrib-input {
  width: 80px;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.2rem;
  text-align: right;
  outline: none;
}

.wi-account-projected {
  font-size: 0.9rem;
  font-weight: 600;
  color: #86efac;
  min-width: 80px;
  text-align: right;
}

@media (max-width: 640px) {
  .wi-account-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .wi-account-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ── Performance page ─────────────────────────────────────────────── */

.perf-positive {
  color: var(--accent-2);
}

.perf-negative {
  color: var(--error);
}

.holding-perf-strip {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.holding-perf-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 120px;
}

.holding-perf-stat span {
  font-size: 0.78rem;
}

.holding-perf-stat strong {
  font-size: 1.05rem;
}

.perf-legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .perf-chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

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

/* Live stats below the Performance chart — updates with the period filter */
.perf-chart-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.perf-chart-stats .perf-stat p:last-child {
  font-size: 1.1rem;
  margin-top: 0.15rem;
}
@media (max-width: 600px) {
  .perf-chart-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Change-breakdown chips on Overview — make the contribution vs. market split visually distinct from the surrounding helper text. */
.change-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
}
.change-breakdown .change-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  cursor: default;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.change-breakdown .change-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.12) saturate(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.change-breakdown .change-chip-contrib {
  background: color-mix(in srgb, var(--accent-5) 18%, transparent);
  color: var(--accent-5);
  border: 1px solid color-mix(in srgb, var(--accent-5) 35%, transparent);
}
.change-breakdown .change-chip-market-pos {
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
  color: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
}
.change-breakdown .change-chip-market-neg {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.change-breakdown .change-chip-into-pot {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.change-breakdown .change-chip-label {
  opacity: 0.85;
  font-weight: 500;
  font-size: 0.85rem;
}

/* Per-row "+£X into pot" chip on the Monthly Update Expected Contributions list. */
.contrib-pot-chip {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent-2) 16%, transparent);
  color: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent-2) 32%, transparent);
  cursor: help;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}

.data-table th.num,
.data-table td.num {
  text-align: right;
}

.data-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(51,65,85,0.4);
  color: var(--text);
}

/* Holdings table (account detail): top-align cells so the Price input
   stays level with Units/Value when a price-updated-at timestamp pushes
   the cell taller than its neighbours. */
.data-table tbody tr:hover {
  background: rgba(56,189,248,0.04);
}

.data-table tbody tr[data-href] {
  cursor: pointer;
}

/* ── panel (alias for .card without the card-specific borders on nested) ── */
.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.panel:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 22%, transparent), 0 14px 36px rgba(0, 0, 0, 0.28);
}

/* Give focus-panel targets breathing room so scrollIntoView clears the sticky header */
[data-focus-panel] {
  scroll-margin-top: 8rem;
}

/* ── stat text colours (for hero-stat strong values) ─────────────── */
.stat-positive-text { color: var(--accent-2); }
.stat-negative-text { color: var(--error); }

/* ── Debts & Forms Utility Classes ───────────────────────────────── */
.settings-form-sm {
  max-width: 420px;
}

.debts-highlight-value {
  color: var(--accent-3);
  font-size: 1.1rem;
}

.debts-excluded-list {
  margin: 0.5rem 0 0 1.25rem;
}

/* ── Accounts Page Utility Classes ────────────────────────────────── */
.badge-inline {
  font-size: 0.7rem !important;
  margin-left: 6px !important;
}

.bg-accent-5-75 {
  background: var(--accent-5) !important;
  opacity: 0.75 !important;
}

/* ── Advanced Performance Tools ───────────────────────────────────── */
.perf-tools-disclosure {
  margin-top: 1.5rem;
  background: var(--panel) !important;
}

summary,
.cursor-pointer {
  cursor: pointer;
}

.perf-tools-summary {
  outline: none;
  user-select: none;
  color: var(--text-muted);
  padding: 0.25rem 0;
}

.perf-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.perf-tools-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.perf-tools-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.perf-tools-helper {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.perf-tools-form-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.perf-tools-input {
  padding: 0.35rem !important;
}

.perf-tools-btn {
  padding: 0.4rem 0 !important;
}

.perf-tools-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.perf-tools-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.perf-tools-hint {
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.2;
  display: block;
}

.perf-tools-table-header {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

/* ── Projections Page Utility Classes ────────────────────────────── */
.projections-assumptions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.projections-assumption-card {
  padding: 1.1rem !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.projections-assumption-title {
  font-size: 0.95rem;
  color: var(--text);
  display: block;
  margin-bottom: 0.4rem;
}

.projections-assumption-text {
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  line-height: 1.45 !important;
  margin-bottom: 0.25rem !important;
}

.projections-assumptions-grid-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.projections-assumption-card-compact {
  padding: 0.9rem !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.projections-assumption-title-compact {
  font-size: 0.9rem;
  color: var(--text);
  display: block;
  margin-bottom: 0.3rem;
}

.projections-assumption-text-compact {
  font-size: 0.8rem !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
  margin-bottom: 0.2rem !important;
}

.projections-hidden-test-asserts {
  display: none !important;
}

/* ── Toggle switch ───────────────────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.toggle-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.toggle-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.toggle-desc {
  font-size: 0.8rem;
  color: var(--muted);
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  width: 44px;
  height: 26px;
  background: var(--border);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
  border: 1px solid rgba(255,255,255,0.06);
}

.toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.toggle-switch input:checked + .toggle-track {
  background: var(--accent);
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(18px);
  background: #0f172a;
}

/* ── User list rows ──────────────────────────────────────────────────────── */
.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.user-row-divider {
  border-bottom: 1px solid var(--border);
}

.user-row-active {
  background: rgba(56, 189, 248, 0.05);
  border-left: 3px solid var(--accent);
}

.user-row-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.user-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.2);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.user-row-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.user-row-date {
  font-size: 0.78rem;
  color: var(--muted);
}

.user-row-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .user-row {
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
  }
  .user-row-left {
    min-width: 0;
  }
  .user-row-info {
    min-width: 0;
  }
  .user-row-name {
    overflow-wrap: anywhere;
  }
  .user-row-right {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── Role badge ──────────────────────────────────────────────────────── */
.user-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.user-role-admin {
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.user-role-user {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  gap: 0.75rem;
}
/* Ensure cards wrapping empty states span the full grid (e.g. accounts page) */
.acct-grid > .card { grid-column: 1 / -1; }

.empty-state h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.empty-state p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 36ch;
  margin: 0;
}

/* ── Monthly Update Guide steps ─────────────────────────────────────── */
.guide-steps { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.guide-step {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.75rem 1rem; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}
.guide-step-num {
  flex-shrink: 0; width: 1.75rem; height: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--bg);
  font-weight: 700; font-size: 0.8rem;
}
.guide-step strong { color: var(--text); font-size: 0.9rem; }
.guide-step p { color: var(--muted); font-size: 0.85rem; line-height: 1.55; margin: 0.15rem 0 0; }
.guide-step em { font-style: normal; color: var(--accent); }

/* ── Loading / busy states ───────────────────────────────────────────── */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.65;
}
.btn-loading::after {
  content: '';
  position: absolute;
  right: 0.55rem;
  top: 50%;
  width: 0.9em;
  height: 0.9em;
  margin-top: -0.45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Onboarding welcome ─────────────────────────────────────────────── */
.onboarding-welcome {
  border-color: rgba(56, 189, 248, 0.25);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.06) 0%, rgba(56, 189, 248, 0.02) 100%);
  padding: 1.5rem 1.75rem;
}

.onboarding-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.onboarding-welcome h2.onboarding-title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.onboarding-progress {
  margin-left: auto;
  white-space: nowrap;
}

.onboarding-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  margin: 0.5rem 0 1rem;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  background: rgba(15, 23, 42, 0.45);
}

.onboarding-primary strong {
  display: block;
  margin: 0.15rem 0 0.25rem;
  font-size: 1rem;
}

.onboarding-section-label {
  margin: 0.75rem 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* turtle-hello: friendly pop-in then gentle wave */
.turtle-hello {
  animation: turtle-hello-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             turtle-hello-wave 2.5s ease-in-out 0.6s infinite;
}

@keyframes turtle-hello-enter {
  0%   { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes turtle-hello-wave {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(12deg) translateY(-2px); }
  30%      { transform: rotate(-8deg); }
  45%      { transform: rotate(8deg) translateY(-1px); }
  60%      { transform: rotate(-4deg); }
  75%      { transform: rotate(0deg); }
}

/* ── Onboarding checklist ────────────────────────────────────────────── */
.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}

.onboarding-step:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(56,189,248,0.28);
}

.onboarding-step strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.onboarding-step small {
  color: var(--muted);
  font-size: 0.82rem;
}

.onboarding-check {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  color: var(--muted);
}

.onboarding-done .onboarding-check {
  background: rgba(34,197,94,0.15);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.onboarding-done {
  opacity: 0.6;
}

.onboarding-done strong {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}

.onboarding-later {
  margin-top: 0.9rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 0.85rem;
}

.onboarding-later summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--text);
}

.onboarding-later summary::-webkit-details-marker {
  display: none;
}

.onboarding-later summary::after {
  content: '▾';
  margin-left: 0.45rem;
  color: var(--muted);
}

.onboarding-later[open] summary::after {
  content: '▴';
}

.onboarding-steps-secondary {
  margin-top: 0.75rem;
}

/* ── Shelly confirmation modal ────────────────────────────────────────── */
.shelly-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: shelly-modal-fade-in 0.2s ease;
}

.shelly-modal-overlay.hidden {
  display: none;
}

@keyframes shelly-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.shelly-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 2rem 1.5rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  animation: shelly-modal-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes shelly-modal-pop {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.shelly-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.shelly-modal-msg {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.shelly-modal-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.shelly-modal-actions .badge {
  min-width: 120px;
  justify-content: center;
}

/* ── Confirm dialog (legacy) ─────────────────────────────────────────── */
.confirm-dialog {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem;
  color: var(--text);
  padding: 0;
  max-width: 420px;
  width: calc(100% - 2rem);
}
.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.confirm-dialog-content {
  padding: 1.75rem;
}
.confirm-dialog-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.confirm-dialog-content p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.confirm-dialog-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ── Tab navigation system (page tabs + period tabs) ─────────────────── */
.subnav,
#history-period-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.25rem;
  max-width: 100%;
}

.subnav {
  width: fit-content;
}

.subnav-mobile-family {
  display: none;
}

.subnav-page {
  width: 100%;
}

.subnav-history,
#history-period-tabs {
  width: fit-content;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  scroll-snap-type: x proximity;
}

#history-period-tabs {
  margin-left: auto;
}

.subnav-history::-webkit-scrollbar,
#history-period-tabs::-webkit-scrollbar { display: none; }

.subnav a,
#history-period-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.subnav-page a {
  flex: 1 1 0;
  min-width: 0;
}

.subnav-history a,
#history-period-tabs a {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

@media (min-width: 601px) and (max-width: 1024px) {
  .subnav-page.subnav-budget {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .subnav-page.subnav-budget a {
    white-space: normal;
    min-height: 2.75rem;
    padding-inline: 0.75rem;
    line-height: 1.15;
  }
}

@media (max-width: 600px) {
  .subnav-mobile-family {
    display: block;
    width: 100%;
    margin-bottom: 0.65rem;
  }

  .subnav-mobile-panel {
    gap: 0.5rem;
  }

  .subnav-mobile-family .subnav-mobile-panel {
    margin-top: 0;
    gap: 0.5rem;
  }

  .subnav-mobile-panel .badge {
    flex: 1 1 calc(50% - 0.5rem);
    justify-content: center;
    min-height: 2.5rem;
  }

  .subnav-mobile-family-budget .subnav-mobile-panel .badge,
  .subnav-mobile-family-goals .subnav-mobile-panel .badge {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .subnav-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .subnav-page.subnav-budget,
  .subnav-page.subnav-goals {
    display: none;
  }

  .subnav-page a,
  .subnav-history a,
  #history-period-tabs a {
    min-height: 2.35rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
  }

  .subnav-page a {
    width: 100%;
    white-space: normal;
    line-height: 1.15;
  }

  .subnav-page a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .subnav-history,
  #history-period-tabs {
    width: 100%;
  }

  #history-period-tabs {
    margin-left: 0;
  }
}

.subnav a:hover,
#history-period-tabs a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.subnav a:focus-visible,
#history-period-tabs a:focus-visible {
  outline: none;
  color: var(--text);
  border-color: rgba(56, 189, 248, 0.45);
}

.subnav a.subnav-active,
#history-period-tabs a.subnav-active,
#history-period-tabs a[aria-current="page"] {
  background: var(--accent);
  color: #0f172a;
  font-weight: 600;
}

/* Logout link in nav */
.nav-logout {
  margin-left: auto;
  opacity: 0.72;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(148, 163, 184, 0.18);
}

.nav-logout:hover {
  opacity: 1;
}

/* Mobile header layout */
.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Mobile logout icon — hidden on desktop, shown on mobile */
.mobile-logout {
  display: none;
  color: var(--muted);
  padding: 0.5rem;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-logout:hover,
.mobile-logout:active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

/* Mobile */
@media (max-width: 680px) {
  .auth-shell {
    padding: 0;
    align-items: stretch;
  }

  .auth-container {
    grid-template-columns: 1fr;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
  }

  /* Show brand panel on mobile but keep it compact */
  .auth-brand {
    padding: 2rem 1.75rem 1.75rem;
    justify-content: flex-start;
  }

  .auth-brand-logo {
    margin-bottom: 1.25rem;
  }

  .auth-brand-headline {
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
  }

  .auth-brand-sub {
    font-size: 0.9rem;
    margin-bottom: 0;
  }

  .auth-brand-features {
    margin-top: 1.5rem;
  }

  .auth-form-panel {
    padding: 2rem 1.75rem 3rem;
  }
}

/* ── Bottom navigation bar (mobile only) ─────────────────────────────────────
   Shown below 768px. Replaces the header nav on small screens.
   ──────────────────────────────────────────────────────────────────────────── */

.bottom-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
  /* Hide the top nav links and logout — bottom bar takes over */
  .site-header nav {
    display: none;
  }

  /* Show mobile logout icon in header */
  .mobile-logout {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Tighten up the header so it's just the logo */
  .site-header {
    padding: 0.75rem 1rem;
  }
  .site-header h1,
  .site-logo {
    margin: 0;
    font-size: 1.1rem;
  }

  /* Push page content up above the bottom bar */
  .page-shell {
    padding-bottom: 5.5rem;
  }

  /* Shrink the huge hero number on phones */
  .hero-value-xl {
    font-size: 2.4rem;
  }

  /* Bottom nav bar */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(17, 24, 39, 0.97);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1100;
    /* safe area for iPhone home bar */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    padding: 6px 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
  }

  .bottom-nav-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .bottom-nav-item.bottom-nav-active,
  .bottom-nav-item:active {
    color: var(--accent);
  }

  /* Account for home bar on iPhone (adds extra bottom space) */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
      height: calc(56px + env(safe-area-inset-bottom));
    }
    .page-shell {
      padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }
  }
}

@media (max-width: 480px) {
  .page-shell {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.25rem;
  }
}

@media (max-width: 480px) {
  code {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ── CSV Import — upload form (inside monthly review card) ───────────────── */
.csv-upload-form {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 0 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}

.csv-upload-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.csv-upload-field select,
.csv-upload-field input[type="file"] {
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
}

.csv-upload-field select:focus,
.csv-upload-field input[type="file"]:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

/* Style the native file picker consistently */
.csv-upload-field input[type="file"]::file-selector-button {
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  margin-right: 0.6rem;
}

.csv-upload-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── CSV Import — help panel with details/summary ────────────────────────── */

/* ── CSV Import — preview table ──────────────────────────────────────────── */
.csv-import-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.csv-import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.csv-import-table thead th {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.csv-import-table tbody td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  vertical-align: middle;
  color: var(--text);
}

.csv-import-table tbody tr:last-child td {
  border-bottom: none;
}

.csv-import-table .col-check {
  width: 40px;
  text-align: center;
  padding-left: 0.6rem;
  padding-right: 0.4rem;
}

.csv-import-table .col-num {
  text-align: right;
  white-space: nowrap;
}

.csv-import-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.import-ticker {
  font-size: 0.8rem;
  color: var(--muted);
  font-family: monospace;
}

.import-inline-input {
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.88rem;
  width: 100px;
  text-align: right;
}

.import-inline-input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.55);
}

.import-row-dim td {
  opacity: 0.4;
}

.import-confirm-bar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.muted { color: var(--muted); }

@media (max-width: 600px) {
  .csv-import-table thead th.col-num,
  .csv-import-table tbody td.col-num {
    font-size: 0.82rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .holding-update-row {
    padding: 0.85rem 0.9rem;
  }

  .holding-update-inputs {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .holding-update-field input {
    width: 100%;
  }

  .holding-price-wrap {
    width: 100%;
  }

  .hu-refresh {
    flex: 0 0 auto;
  }

  .hu-submit {
    width: 100%;
    margin-left: 0;
    align-self: stretch;
  }

  .import-inline-input {
    width: 76px;
    font-size: 0.82rem;
  }

  .csv-upload-field select,
  .csv-upload-field input[type="file"] {
    width: 100%;
  }

  .csv-upload-actions {
    flex-direction: column;
  }

  .csv-upload-actions .badge {
    width: 100%;
    justify-content: center;
  }
}

/* ── Trading 212 Preview Redesign ─────────────────────────────────────────── */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metric-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.metric-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}

.metric-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.2;
}

.metric-card .helper-text {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
}

.inset-panel {
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Accordion-style Collapsible Details */
.preview-details-disclosure {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
  margin-top: 1.5rem;
}

.preview-details-disclosure:hover {
  border-color: rgba(56, 189, 248, 0.3);
}

.preview-details-summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.preview-details-summary::-webkit-details-marker {
  display: none;
}

.preview-details-summary::after {
  content: "→";
  font-size: 1.1rem;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.preview-details-disclosure[open] .preview-details-summary::after {
  transform: rotate(90deg);
}

.preview-details-disclosure .details-content {
  padding: 1.25rem;
  border-top: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.15);
}

/* Unified Buttons */
.btn {
  margin-top: 0.25rem;
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.15s ease;
  border: none;
}

.btn-primary {
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.btn-primary:hover,
.btn-primary:focus {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.6);
  color: var(--text);
}

.btn-secondary {
  background: rgba(56, 189, 248, 0.08);
  color: var(--text);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
}

.btn-sm {
  min-height: 36px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
}

/* ── Simplified Sync Summary Card ─────────────────────────────────────────── */

.sync-summary-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.sync-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sync-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-white);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.success { background: var(--success); box-shadow: 0 0 8px var(--success); }
.status-dot.warning { background: var(--accent-3); box-shadow: 0 0 8px var(--accent-3); }

.sync-meta-text {
  font-size: 0.8rem;
  color: var(--muted);
}

.sync-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.sync-comparison-col h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

.sync-val-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}

.sync-val-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sync-val-item .label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sync-val-item .val {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-white);
}

.sync-val-divider {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  opacity: 0.5;
}

.sync-diff-status {
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.sync-diff-status.diff-warning {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.04);
  color: #fef3c7;
}

.sync-diff-status.diff-ok {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.04);
  color: #dcfce7;
}

.diff-subtext {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* ── Inline Action Forms ───────────────────────────────────────────────────── */

.sync-action-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.sync-action-info {
  flex: 1;
  min-width: 280px;
}

.sync-action-control {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sync-action-control .checkbox-row {
  margin: 0;
}

.sync-action-control .btn {
  margin: 0;
}

/* ── Cash Yield Card ──────────────────────────────────────────────────────── */
.planning-card-divider {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

.cash-yield-card {
  background: color-mix(in srgb, var(--success) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 15%, transparent);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cash-yield-stat-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.15rem;
}

.cash-yield-rate-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--success);
  line-height: 1.2;
}

.cash-yield-earning-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-normal, #f8fafc);
  display: block;
  line-height: 1.2;
}

.cash-yield-subtext {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: block;
  margin-top: 0.15rem;
}

/* ── Budget redesign ──────────────────────────────────────────────── */

/* ── Month navigation (replaces native input + Go) ───────────────────────── */
.budget-month-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.budget-month-nav-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  min-width: 7rem;
  text-align: center;
}

/* ── Budget section total (right-aligned value inside .section-header) ─────── */
.budget-section-total {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  transition: color 0.2s;
  flex-shrink: 0;
  align-self: flex-end; /* sit at bottom of header beside the section title */
}

/* ── Budget rows ──────────────────────────────────────────────────────────── */
.budget-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.budget-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  gap: 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}

.budget-row:hover,
.budget-row:focus-within {
  background: rgba(255,255,255,0.06);
  border-color: rgba(56,189,248,0.28);
}

.budget-row-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.budget-row-name {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
}

.budget-row-note {
  font-size: 0.75rem;
  color: var(--muted);
}

.budget-pill {
  font-size: 0.7rem;
  background: rgba(56,189,248,0.1);
  color: var(--accent);
  border-radius: 99px;
  padding: 0.1rem 0.5rem;
  border: 1px solid rgba(56,189,248,0.18);
}

.budget-pill-pre-salary {
  background: rgba(148,163,184,0.1);
  color: var(--muted);
  border-color: rgba(148,163,184,0.2);
}

.budget-pill-debt {
  background: rgba(239,68,68,0.08);
  color: #dc2626;
  border-color: rgba(239,68,68,0.18);
}

.budget-row-pre-salary {
  /* Marker class — kept in case we want to style outside-take-home rows
     differently in future. No dimming: these rows are fully editable now
     (cashback, gifts, etc. need monthly edits just like normal rows). */
}

.budget-row-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.budget-row-currency {
  color: var(--muted);
  font-size: 0.875rem;
}

.proj-row-right { gap: 1.5rem; }
.proj-row-current { font-size: 0.82rem; }

.proj-acc {
  border: none;
}

.proj-acc-summary {
  list-style: none;
  cursor: pointer;
}

.proj-acc-summary::-webkit-details-marker { display: none; }
.proj-acc-summary::marker { content: ""; }

.proj-acc[open] .proj-acc-summary {
  background: rgba(255,255,255,0.06);
  border-color: rgba(56,189,248,0.28);
}

.proj-acc-caret {
  color: var(--muted);
  font-size: 0.9rem;
  margin-left: 0.25rem;
  transition: transform 0.15s ease;
}

.proj-acc[open] .proj-acc-caret {
  transform: rotate(180deg);
}

.proj-acc-detail {
  margin-top: 0.5rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}

.proj-acc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.badge-meta.is-active {
  border-color: rgba(56,189,248,0.45);
  background: rgba(56,189,248,0.10);
  color: var(--accent);
}

.proj-acc-series {
  margin-top: 0.75rem;
}

.proj-series-scroll {
  max-height: 320px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(51,65,85,0.55);
  border-radius: 10px;
}

.proj-acc-schedule {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(51,65,85,0.55);
}

.proj-schedule-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.proj-schedule-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.proj-schedule-row label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.proj-schedule-row label span {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.proj-schedule-row input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
}

.proj-schedule-row input[type="number"] { width: 8.5rem; }
.proj-schedule-row input[data-month] { width: 9.5rem; }

.budget-amount-input {
  width: 110px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  padding: 0.42rem 0.65rem;
  text-align: right;
  transition: border-color 0.15s, background 0.15s;
}

.budget-amount-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(56,189,248,0.05);
}

/* Auto-save indicator — fades in green ✓ then disappears */
.budget-save-indicator {
  width: 1.4rem;
  font-size: 0.85rem;
  color: var(--accent-2);
  text-align: center;
  transition: opacity 0.3s;
}

/* Manual balance save status indicator */
.manual-save-status {
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
  transition: opacity 0.3s;
}
.manual-save-ok  { color: var(--accent-2); }
.manual-save-err { color: #f87171; }

/* ── 12-month budget strip ─────────────────────────────────────────── */

.budget-year-strip {
  margin-bottom: 1rem;
  border-radius: 14px;
  padding: 0.6rem 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
}

.budget-year-strip-inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.budget-year-strip-inner::-webkit-scrollbar { display: none; }

.budget-year-arrow {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.35rem 0.45rem;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.budget-year-arrow:hover {
  color: var(--text-white);
  background: var(--panel-2);
}

.budget-month-pill {
  flex: 1 1 0;
  min-width: 3rem;
  text-align: center;
  padding: 0.5rem 0.25rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  position: relative;
}
.budget-month-pill:hover {
  color: var(--text);
  background: var(--panel-2);
}

.budget-month-pill-label {
  display: block;
}

.budget-month-active {
  color: var(--text-white);
  font-weight: 700;
  background: var(--panel-2);
  box-shadow: inset 0 -2px 0 0 var(--month-color, var(--accent));
}

.budget-month-today:not(.budget-month-active) {
  color: var(--text);
  box-shadow: inset 0 -2px 0 0 var(--muted);
}

.budget-month-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--month-color, var(--accent));
  display: block;
}

.holding-unlinked-badge {
  display: inline-block;
  font-size: 0.7rem;
  color: #f59e0b;
  border: 1px solid #f59e0b44;
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.85;
}

.budget-month-has-data .budget-month-pill-label {
  color: inherit;
}

/* Budget edit callout */
.budget-edit-callout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  background: rgba(15,118,110,0.07);
  border: 1px solid rgba(15,118,110,0.18);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0 0;
  color: var(--text);
}
.budget-edit-callout strong { color: var(--accent); }
.budget-edit-callout span { color: var(--muted); }

.budget-what-if-card {
  border-color: rgba(56, 189, 248, 0.22);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.68));
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.budget-what-if-card.budget-what-if-active {
  border-color: var(--accent-3);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-3) 15%, transparent), 0 10px 30px rgba(0, 0, 0, 0.35);
}

.budget-what-if-card.budget-what-if-active #budget-what-if-toggle {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--accent-3);
}

.budget-what-if-header {
  align-items: flex-start;
  margin-bottom: 0.85rem;
}

.budget-what-if-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.budget-what-if-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.budget-what-if-stat {
  display: grid;
  gap: 0.2rem;
  align-content: center;
  min-height: 4.1rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 13px;
  background: rgba(2, 6, 23, 0.18);
}

.budget-what-if-stat span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.budget-what-if-stat strong {
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.1;
  white-space: nowrap;
}

.card .budget-what-if-status {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
}

.budget-container.budget-what-if-active .budget-amount-input {
  border-color: rgba(245, 158, 11, 0.48);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.14);
}

.budget-container.budget-what-if-active .budget-save-indicator {
  color: var(--accent-3);
}

@media (max-width: 760px) {
  .budget-what-if-header {
    display: grid;
    gap: 0.8rem;
  }

  .budget-what-if-actions {
    justify-content: flex-start;
  }

  .budget-what-if-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .budget-what-if-strip {
    gap: 0.42rem;
  }

  .budget-what-if-stat {
    min-height: 3.55rem;
    padding: 0.48rem 0.55rem;
  }

  .budget-what-if-stat span {
    font-size: 0.58rem;
  }

  .budget-what-if-stat strong {
    font-size: 0.9rem;
  }
}

/* Budget linked hint */

/* Section-level helper hints */
.helper-text-section {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.82rem;
  opacity: 0.7;
  line-height: 1.5;
}

/* Per-item source indicators */
.budget-row-source {
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}

.budget-row-source[data-source="inherited"] {
  background: rgba(249, 115, 22, 0.12);
  color: #fb923c;
}

.budget-row-source[data-source="linked"] {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.budget-row-source[data-source="linked_account"] {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.budget-row-source[data-source="linked_debt"] {
  background: rgba(239, 68, 68, 0.10);
  color: #f87171;
}

.budget-row-source[data-source="default"] {
  background: rgba(148, 163, 184, 0.10);
  color: var(--muted);
}

.budget-row-source[data-source="manual_override"] {
  background: rgba(34, 197, 94, 0.10);
  color: #86efac;
}

/* ── Section colour accent strip ─────────────────────────────────── */
.budget-section-panel {
  border-top: 3px solid var(--sec-color, var(--accent));
}

.budget-section-panel[data-sec="income"] { --sec-color: var(--accent-2); }
.budget-section-panel[data-sec="fixed"] { --sec-color: var(--accent); }
.budget-section-panel[data-sec="debt"] { --sec-color: var(--accent-6); }
.budget-section-panel[data-sec="investment"] { --sec-color: var(--accent-5); }
.budget-section-panel[data-sec="saving"] { --sec-color: var(--accent-5); }
.budget-section-panel[data-sec="discretionary"] { --sec-color: var(--accent-3); }

.budget-section-panel .budget-section-eyebrow {
  color: var(--sec-color, var(--muted));
}

.budget-section-title-row {
  margin-bottom: 0.45rem;
}

.budget-section-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.95rem 0 0.85rem;
}

.budget-section-metric {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 4.2rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.18);
  text-align: center;
}

.budget-section-metric-label {
  margin-bottom: 0.32rem;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.budget-section-panel .budget-section-total {
  color: var(--sec-color, var(--accent));
  font-size: 1.18rem;
  line-height: 1.05;
  white-space: nowrap;
}

.budget-section-income-share {
  color: color-mix(in srgb, var(--sec-color, var(--accent)) 78%, var(--text));
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
}

.budget-section-annual {
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
}

.budget-row-annual {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 641px) {
  .budget-section-panel .budget-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 0.34fr) auto;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .budget-section-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.38rem;
    margin: 0.7rem 0 0.65rem;
  }

  .budget-section-metric {
    min-height: 3.15rem;
    padding: 0.5rem 0.35rem;
    border-radius: 11px;
  }

  .budget-section-metric-label {
    margin-bottom: 0.18rem;
    font-size: 0.58rem;
    letter-spacing: 0.055em;
  }

  .budget-section-panel .budget-section-total,
  .budget-section-income-share,
  .budget-section-annual {
    font-size: 0.92rem;
  }

  .budget-section-panel .budget-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.42rem 0.65rem;
    padding: 0.62rem 0.72rem;
  }

  .budget-section-panel .budget-row-left {
    grid-column: 1 / -1;
  }

  .budget-section-panel .budget-row-annual {
    grid-column: 1;
    width: auto;
    align-self: center;
    color: color-mix(in srgb, var(--muted) 88%, var(--text));
    font-size: 0.78rem;
    text-align: left;
  }

  .budget-section-panel .budget-row-right {
    grid-column: 2;
    width: auto;
    justify-content: flex-end;
  }

  .budget-section-panel .budget-row .budget-amount-input {
    width: 6.2rem;
  }
}

/* ── Edit Budget page — row actions + default amount ─────────────── */
.budget-row-default {
  font-size: 0.88rem;
  color: var(--muted);
  white-space: nowrap;
  margin-right: 0.5rem;
}
.budget-row-actions {
  /* Overrides .badge-row gap (0.5rem) — wins on source order, not specificity. */
  gap: 0.35rem;
  flex-shrink: 0;
}
.budget-row-selected {
  border-color: var(--accent);
  background: rgba(56,189,248,0.06);
}
.budget-section-add-hint {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ── Budget toolbar (Edit Budget + Export + Import) ──────────────── */
.budget-compact-flow-card {
  margin-bottom: 1rem;
}

.compact-flow-list {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.75rem;
}

.review-hero-flow {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.monthly-review-start-details {
  margin-bottom: 0.85rem;
}

.monthly-review-start-details summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

.monthly-review-start-details summary::-webkit-details-marker {
  display: none;
}

.monthly-review-start-details summary .eyebrow {
  margin-bottom: 0.35rem;
}

.monthly-review-start-details summary .helper-text {
  margin-top: 0.25rem;
}

.monthly-review-start-details .compact-flow-list {
  margin-top: 0.85rem;
  margin-bottom: 0;
}

.review-hero-badges {
  width: 100%;
}

.compact-flow-list li {
  color: var(--text);
}

.compact-flow-list li span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.budget-tools-details {
  width: 100%;
}

.budget-tools-details summary {
  list-style: none;
  display: inline-flex;
  cursor: pointer;
}

.budget-tools-details summary::-webkit-details-marker {
  display: none;
}

.budget-tools-menu {
  margin-top: 0.75rem;
}

.monthly-review-related-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
}

.monthly-review-related-details[open] summary {
  color: var(--accent);
}

.monthly-review-secondary-details {
  width: 100%;
}

.monthly-review-secondary-details summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

.monthly-review-secondary-details summary::-webkit-details-marker {
  display: none;
}

.monthly-review-secondary-details summary .helper-text {
  margin: 0;
}

.monthly-review-secondary-panel {
  margin-top: 0.9rem;
}

.budget-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.budget-toolbar .budget-linked-hint {
  margin: 0;
}
.budget-import-label {
  cursor: pointer;
}

/* Contribution calendar — keep the new feature in the normal SteadyPlan
   visual system instead of month-coloured accents/native form controls. */
.contribution-calendar-hero .hero-top {
  align-items: flex-start;
}

.contribution-calendar-hero-badges {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.contribution-calendar-form input[type="text"],
.contribution-calendar-form input[type="number"],
.contribution-calendar-form input[type="month"] {
  width: 100%;
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  min-height: 48px;
  font: inherit;
  color-scheme: dark;
}

.contribution-calendar-form input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.contribution-plan-table input[type="number"] {
  min-width: 8.5rem;
}

.allowance-frame-table th,
.allowance-frame-table td {
  vertical-align: top;
  text-align: center;
}

.allowance-frame-table .text-center {
  text-align: center;
}

.allowance-frame-pension-note,
.allowance-frame-overage {
  margin-top: 0.35rem;
}

.allowance-frame-pension-note {
  max-width: 11rem;
  margin-inline: auto;
}

.allowance-frame-overage {
  color: #fbbf24;
}

.allowance-frame-cell-pension {
  min-width: 11rem;
}

.contribution-calendar-details {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.28);
  padding: 0.35rem 0.75rem 0.75rem;
}

.contribution-calendar-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  cursor: pointer;
  list-style: none;
  padding: 0.45rem 0;
}

.contribution-calendar-summary::-webkit-details-marker {
  display: none;
}

.contribution-calendar-summary > span:first-child {
  display: grid;
  gap: 0.2rem;
}

.contribution-calendar-summary strong {
  color: var(--text-white);
}

.contribution-calendar-details[open] .contribution-calendar-summary {
  margin-bottom: 0.55rem;
}

.contribution-calendar-scroll {
  max-height: min(72vh, 46rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.35rem;
  scrollbar-width: none;
  scrollbar-gutter: stable;
}

.contribution-calendar-scroll:hover,
.contribution-calendar-scroll:focus,
.contribution-calendar-scroll:focus-within {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}

.contribution-calendar-scroll::-webkit-scrollbar {
  width: 0;
}

.contribution-calendar-scroll:hover::-webkit-scrollbar,
.contribution-calendar-scroll:focus::-webkit-scrollbar,
.contribution-calendar-scroll:focus-within::-webkit-scrollbar {
  width: 0.55rem;
}

.contribution-calendar-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}

.contribution-calendar-stack {
  display: grid;
  gap: 0.9rem;
}

.contribution-month-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.42);
  padding: 0.95rem;
}

.contribution-month-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.contribution-month-card-head h4 {
  margin: 0;
  color: var(--text-white);
}

.contribution-month-account-list {
  display: grid;
  gap: 0.65rem;
}

.contribution-month-account-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.15fr) minmax(13rem, 1.2fr) minmax(10rem, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.18);
}

.contribution-month-account-row.has-override {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(37, 99, 235, 0.08);
}

.contribution-month-account-row.has-overlap {
  border-color: rgba(251, 191, 36, 0.5);
}

.contribution-month-account-main,
.contribution-month-source {
  display: grid;
  gap: 0.2rem;
}

.contribution-month-account-main span {
  color: var(--muted);
  font-size: 0.86rem;
}

.contribution-month-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  align-items: center;
}

@media (max-width: 768px) {
  .contribution-calendar-hero .hero-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .contribution-calendar-hero-badges {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    justify-content: stretch;
  }

  .contribution-calendar-hero-badges .badge {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .contribution-calendar-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .contribution-calendar-summary .badge {
    width: fit-content;
  }

  .contribution-calendar-hero .hero-value {
    font-size: clamp(1.85rem, 10vw, 2.4rem);
    line-height: 1.05;
  }

  .contribution-calendar-hero .hero-subtitle {
    max-width: 32rem;
    line-height: 1.55;
  }

  .contribution-calendar-form .form-grid {
    gap: 0.8rem;
  }

  .contribution-calendar-scroll {
    max-height: 68vh;
    padding-right: 0;
  }

  .contribution-month-card {
    padding: 0.8rem;
    border-radius: 16px;
  }

  .contribution-month-card-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }

  .contribution-month-account-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.7rem;
  }

  .contribution-month-amounts {
    align-items: flex-start;
    flex-direction: column;
  }

  .contribution-plan-scroll {
    overflow-x: visible;
  }

  .contribution-plan-table,
  .contribution-plan-table thead,
  .contribution-plan-table tbody,
  .contribution-plan-table tr,
  .contribution-plan-table td {
    display: block;
    width: 100%;
  }

  .contribution-plan-table thead {
    display: none;
  }

  .contribution-plan-table tr {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  }

  .contribution-plan-table tr:last-child {
    border-bottom: 0;
  }

  .contribution-plan-table td {
    display: grid;
    grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
    text-align: left;
  }

  .contribution-plan-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .contribution-plan-table td.text-right {
    text-align: left;
  }

  .contribution-plan-table input[type="number"] {
    min-width: 0;
  }
}

/* ── Month colour accents ──────────────────────────────────────────── */
/* Each month gets its own colour. Applied via .month-accent-N on the
   strip and on the hero card. The custom property --month-color cascades
   down to pills, dots, active underlines, and the hero highlight. */

/* Adjacent months sit in different colour families so neighbouring pills
   in the strip pop apart at a glance — calendar-as-clock-face. */
.month-accent-1  { --month-color: #3b82f6; }   /* Jan — cobalt blue       */
.month-accent-2  { --month-color: #ec4899; }   /* Feb — hot pink          */
.month-accent-3  { --month-color: #facc15; }   /* Mar — gold              */
.month-accent-4  { --month-color: #22c55e; }   /* Apr — fresh green       */
.month-accent-5  { --month-color: #a855f7; }   /* May — lavender          */
.month-accent-6  { --month-color: #f97316; }   /* Jun — orange            */
.month-accent-7  { --month-color: #ef4444; }   /* Jul — bright red        */
.month-accent-8  { --month-color: #14b8a6; }   /* Aug — teal              */
.month-accent-9  { --month-color: #d97706; }   /* Sep — amber             */
.month-accent-10 { --month-color: #7c3aed; }   /* Oct — deep violet       */
.month-accent-11 { --month-color: #84cc16; }   /* Nov — lime              */
.month-accent-12 { --month-color: #be123c; }   /* Dec — festive burgundy  */

/* Hero card picks up the month accent as a bold top stripe */
.card.highlight[class*="month-accent-"] {
  border-top: 6px solid var(--month-color, var(--accent));
}

/* Hero strip stats use month colour for strong text */
[class*="month-accent-"] .hero-strip-stat strong:not(.stat-positive-text):not(.stat-negative-text) {
  color: var(--month-color, var(--text-white));
}

/* Active pill underline inherits month colour (already set via --month-color) */

/* ── Inline Shelly icon (replaces 🐢 emoji everywhere) ─────────────── */
.shelly-inline-icon {
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}
.shelly-icon-xs { width: 20px; height: 20px; }     /* inline text */
.shelly-icon-sm { width: 28px; height: 28px; }     /* nudge banners */
.shelly-icon-md { width: 44px; height: 44px; }     /* onboarding */
.shelly-icon-lg { width: 64px; height: 64px; }     /* empty states, modals */

/* ── Global month strip (non-budget pages) ─────────────────────────── */
.month-strip-global {
  pointer-events: none;            /* display-only, no links */
}
.month-strip-global .budget-month-pill {
  cursor: default;
}

@media (max-width: 640px) {
  .month-strip-mobile-hidden {
    display: none;
  }

  .budget-hero-month-nav {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }
}

.goals-hero-actions {
  justify-content: flex-start;
}

.budget-hero-actions {
  justify-content: flex-start;
}

.debts-hero-actions {
  justify-content: flex-start;
}

.goals-hero-badges,
.budget-hero-badges,
.debts-hero-badges {
  justify-content: flex-end;
}

.budget-hero-month-nav {
  display: none;
}

.goals-hero-badges .badge,
.budget-hero-badges .badge,
.debts-hero-badges .badge {
  white-space: nowrap;
}

/* ── Account cards ─────────────────────────────────────────────────── */

.acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.acct-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: border-color 0.15s, transform 0.12s;
}

.acct-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.acct-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.acct-type-pill {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(148,163,184,0.1);
  border: 1px solid transparent;
  border-radius: 99px;
  padding: 0.2rem 0.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Colour-coded account type pills */
.acct-type-pill[data-type="isa"] {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
}
.acct-type-pill[data-type="cash-isa"] {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.10);
  border-color: rgba(74, 222, 128, 0.25);
}
.acct-type-pill[data-type="lisa"] {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  border-color: rgba(192, 132, 252, 0.25);
}
.acct-type-pill[data-type="premium-bonds"] {
  color: #facc15;
  background: rgba(250, 204, 21, 0.11);
  border-color: rgba(250, 204, 21, 0.25);
}
.acct-type-pill[data-type="sipp"],
.acct-type-pill[data-type="pension"] {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.25);
}
.acct-type-pill[data-type="gia"] {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
}

/* Calendar Matrix Row & Cell Tinting by Account Type */
tr[data-acct-type="isa"] td { background-color: rgba(56, 189, 248, 0.05); }
tr[data-acct-type="cash-isa"] td { background-color: rgba(74, 222, 128, 0.05); }
tr[data-acct-type="lisa"] td { background-color: rgba(192, 132, 252, 0.05); }
tr[data-acct-type="premium-bonds"] td { background-color: rgba(250, 204, 21, 0.05); }
tr[data-acct-type="sipp"] td, tr[data-acct-type="pension"] td { background-color: rgba(251, 146, 60, 0.05); }
tr[data-acct-type="gia"] td { background-color: rgba(148, 163, 184, 0.05); }

/* Stronger tint and matching text color for the input wrappers to make the grid pop */
tr[data-acct-type="isa"] td.calendar-matrix-cell .calendar-edit-wrapper { background-color: rgba(56, 189, 248, 0.08); border-radius: 4px; }
tr[data-acct-type="isa"] td.calendar-matrix-cell .calendar-amount-input { color: #38bdf8; font-weight: 600; }

tr[data-acct-type="cash-isa"] td.calendar-matrix-cell .calendar-edit-wrapper { background-color: rgba(74, 222, 128, 0.08); border-radius: 4px; }
tr[data-acct-type="cash-isa"] td.calendar-matrix-cell .calendar-amount-input { color: #4ade80; font-weight: 600; }

tr[data-acct-type="lisa"] td.calendar-matrix-cell .calendar-edit-wrapper { background-color: rgba(192, 132, 252, 0.08); border-radius: 4px; }
tr[data-acct-type="lisa"] td.calendar-matrix-cell .calendar-amount-input { color: #c084fc; font-weight: 600; }

tr[data-acct-type="premium-bonds"] td.calendar-matrix-cell .calendar-edit-wrapper { background-color: rgba(250, 204, 21, 0.08); border-radius: 4px; }
tr[data-acct-type="premium-bonds"] td.calendar-matrix-cell .calendar-amount-input { color: #facc15; font-weight: 600; }

tr[data-acct-type="sipp"] td.calendar-matrix-cell .calendar-edit-wrapper, tr[data-acct-type="pension"] td.calendar-matrix-cell .calendar-edit-wrapper { background-color: rgba(251, 146, 60, 0.08); border-radius: 4px; }
tr[data-acct-type="sipp"] td.calendar-matrix-cell .calendar-amount-input, tr[data-acct-type="pension"] td.calendar-matrix-cell .calendar-amount-input { color: #fb923c; font-weight: 600; }

tr[data-acct-type="gia"] td.calendar-matrix-cell .calendar-edit-wrapper { background-color: rgba(148, 163, 184, 0.08); border-radius: 4px; }
tr[data-acct-type="gia"] td.calendar-matrix-cell .calendar-amount-input { color: #94a3b8; font-weight: 600; }

.acct-rate-chip {
  font-size: 0.7rem;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border-radius: 99px;
  padding: 0.2rem 0.5rem;
}
.acct-rate-chip-interest {
  color: #86efac;
  background: rgba(134,239,172,0.12);
}

.acct-card-mid {
  flex: 1;
  margin-top: 0.5rem;
}

.acct-balance {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.acct-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 0.35rem;
}

.acct-provider {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

.acct-broker-desktop-detail {
  margin-top: 0.18rem;
}

.acct-broker-mobile-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.acct-broker-mobile-summary strong {
  color: var(--text);
  font-weight: 600;
}

.acct-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(51,65,85,0.4);
  font-size: 0.8rem;
  color: var(--muted);
}

.acct-mode-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-manual    { background: #94a3b8; }
.dot-positions { background: #38bdf8; }

/* Account detail stats bar */
.acct-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.acct-detail-stat {
  flex: 1;
  min-width: 120px;
  padding: 0.85rem 1rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.acct-detail-stat:last-child {
  border-right: none;
}

.acct-detail-stat span {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.acct-detail-stat strong {
  font-size: 1rem;
  color: var(--text);
  font-weight: 600;
}

.linked-broker-summary-panel {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.34);
}

.linked-broker-summary-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.linked-broker-summary-header h3 {
  margin: 0.1rem 0 0;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.linked-broker-difference {
  flex: 0 0 auto;
  text-align: right;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.42);
}

.linked-broker-difference span,
.linked-broker-grid p {
  display: block;
  margin: 0 0 0.22rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.linked-broker-difference strong,
.linked-broker-grid strong {
  color: var(--text);
  font-size: 0.95rem;
}

.linked-broker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.8rem 1rem;
}

@media (max-width: 640px) {
  .linked-broker-summary-header {
    flex-direction: column;
  }
  .linked-broker-difference {
    width: 100%;
    text-align: left;
  }
}

/* "Show details" toggle is mobile-only — hidden on desktop. */
.acct-detail-toggle {
  display: none;
}


/* Mobile-only account hero (Balance + 30d delta + Monthly).
   Hidden on desktop; visible at ≤640px. */
.acct-hero-mobile {
  display: none;
}
@media (max-width: 640px) {
  .acct-hero-mobile {
    display: block;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(56, 189, 248, 0.06), rgba(56, 189, 248, 0) 60%),
      var(--panel-2);
  }
  .acct-hero-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
  }
  .acct-hero-label {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
  }
  .acct-hero-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
  }
  .acct-hero-delta {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
  }
  .acct-hero-delta.gain { color: var(--accent-2); }
  .acct-hero-delta.loss { color: #f87171; }
  .acct-hero-monthly {
    text-align: right;
  }
  .acct-hero-monthly strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
  }
  .acct-hero-monthly small {
    display: block;
    font-size: 0.7rem;
    margin-top: 0.15rem;
  }
}

/* ── Global tile hover/touch feedback ────────────────────────────────────
   The user's brief: "every tile should highlight when you hover with the
   mouse or touch on mobile". Uniform subtle outline so the whole app feels
   alive, not just a few cards. NOT applied to .panel — panels are section
   containers, and tapping any child propagates :active up to the panel,
   producing a cyan ring that fights with inner tiles' own highlight (e.g.
   the gold "active contribution" tile). Tile classes only. */
.acct-card,
.acct-detail-stat,
.allocation-item,
.allowance-card,
.holdings-row:not(.holdings-row-head),
.acct-flag-row,
.edit-card,
.tag-chip {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

@media (hover: hover) {
  .acct-card:hover,
  .acct-detail-stat:hover,
  .allocation-item:hover,
  .allowance-card:hover,
  .acct-flag-row:hover,
  .edit-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18);
  }
}

/* :active fires on touch press (and desktop click-hold) — same accent ring
   so mobile users get the same "this tile registered your touch" cue. */
.acct-card:active,
.acct-detail-stat:active,
.allocation-item:active,
.allowance-card:active,
.holdings-row:not(.holdings-row-head):active,
.acct-flag-row:active,
.edit-card:active {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25);
}

.account-detail-actions {
  align-items: center;
}
.account-delete-form {
  display: inline-flex;
  margin: 0;
}
.account-delete-form .badge {
  width: 100%;
}
@media (max-width: 640px) {
  .account-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.55rem;
  }
  .account-detail-actions .badge,
  .account-delete-form {
    width: 100%;
  }
  .account-detail-actions .badge {
    justify-content: center;
    min-height: 44px;
  }
}

/* Suppress the default blue/grey tap-highlight rectangle on touch devices —
   it's distracting on tappable summaries, donut canvases, and badge buttons.
   CSS :active states still fire, so deliberate feedback (e.g. button press)
   continues to work. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Holdings catalogue table ─────────────────────────────────────── */

/* Collapsible catalogue details */

/* ── Instrument search bar ───────────────────────────────────────────────── */
.instrument-search-bar {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  align-items: center;
}

.instrument-search-bar input[type="text"] {
  flex: 1;
  max-width: 22rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.45rem 0.75rem;
  font-size: 0.95rem;
  font-family: monospace;
  letter-spacing: 0.04em;
}

.instrument-search-bar input[type="text"]:focus {
  outline: none;
  border-color: rgba(56,189,248,0.55);
}

@media (max-width: 480px) {
  .instrument-search-bar {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .instrument-search-bar input[type="text"] {
    max-width: none;
    width: 100%;
  }
  .instrument-search-bar .badge {
    width: 100%;
  }
}

.instrument-result-card {
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(56,189,248,0.2);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}

.holding-ticker {
  font-family: monospace;
  font-size: 0.8rem;
  background: rgba(56,189,248,0.1);
  color: var(--accent);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.holding-type-pill {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 99px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

.holding-type-etf {
  background: rgba(34,197,94,0.12);
  color: var(--accent-2);
}

.holding-type-fund {
  background: rgba(56,189,248,0.1);
  color: var(--accent);
}

.holding-type-pension-fund {
  background: rgba(168,139,250,0.12);
  color: #a78bfa;
}

.holding-type-other {
  background: rgba(148,163,184,0.1);
  color: var(--muted);
}

@media (max-width: 768px) {
  .acct-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .acct-broker-mobile-summary {
    display: flex !important;
    flex-wrap: wrap;
  }

  .trading212-apply-form {
    padding: 0.9rem;
  }

  .trading212-apply-form .button-row {
    width: 100%;
  }

  .trading212-apply-form .btn {
    width: 100%;
    justify-content: center;
  }

  .trading212-apply-summary,
  .trading212-apply-footer {
    line-height: 1.45;
  }

  .acct-balance {
    font-size: 1.3rem;
  }

  /* Gap-trick grid: 1px coloured gaps between tiles render as separators
     regardless of which tiles are display:none. auto-fit collapses to a
     single column when only one tile is visible (e.g. before "Show
     details" expands the secondary tiles), so the right side is never an
     awkward empty box. */
  .acct-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--border);
    overflow: hidden;
  }

  .acct-detail-stat {
    background: var(--panel-2);
    border: none;
    min-width: 0;
  }

  /* Secondary stats are hidden until the user taps "Show details". */
  .acct-detail-stat-secondary {
    display: none;
  }
  .acct-detail-stats.show-secondary .acct-detail-stat-secondary {
    display: flex;
  }
  .acct-detail-toggle {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.55rem 0.75rem;
    margin-top: 0.4rem;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
  }


  .budget-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .budget-row-right {
    width: 100%;
    justify-content: flex-end;
  }

  .budget-year-strip {
    padding: 0.45rem 0.25rem;
    border-radius: 10px;
  }

  .budget-month-pill {
    min-width: 2.4rem;
    padding: 0.4rem 0.15rem;
    font-size: 0.68rem;
  }

  .budget-year-arrow {
    padding: 0.25rem 0.35rem;
    font-size: 0.75rem;
  }

  .budget-month-dot {
    width: 3px;
    height: 3px;
  }

  .hero-turtle {
    width: 56px;
    height: 56px;
  }
}

/* ── Monthly review hero: mobile layout ────────────────────────────────── */
@media (max-width: 600px) {
  .budget-compact-flow-card .section-header,
  .monthly-review-start-card .section-header {
    align-items: flex-start;
  }

  .budget-compact-flow-card .badge-row,
  .monthly-review-start-card .badge-row,
  .review-hero-badges,
  .budget-tools-menu,
  .monthly-review-related-details .badge-row,
  .monthly-review-secondary-details {
    width: 100%;
  }

  .budget-compact-flow-card .badge-row .badge,
  .monthly-review-start-card .badge-row .badge,
  .review-hero-badges .badge,
  .budget-tools-menu .badge,
  .monthly-review-related-details .badge-row .badge {
    flex: 1 1 100%;
    justify-content: center;
  }

  .monthly-review-secondary-details summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .review-hero-card .hero-top {
    position: relative;
    flex-direction: column;
    gap: 0.6rem;
  }

  /* Actions bar: button on left, month nav on right, same row */
  .review-hero-card .hero-actions-col {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Subtitle: don't let it get too large on mobile */
  .review-hero-card .hero-subtitle {
    font-size: 0.82rem;
  }

  .review-hero-card .review-hero-todo {
    gap: 0.4rem;
    margin-top: 0.55rem;
  }
}

/* ── Contribution Calendar Matrix ─────────────────────────────────────────── */
.contribution-calendar-matrix-scroll {
  margin-top: 0.5rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow-x: auto;
  background: rgba(15, 23, 42, 0.2);
}

.contribution-calendar-matrix {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
}

.contribution-calendar-matrix th,
.contribution-calendar-matrix td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.contribution-calendar-matrix th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: rgba(15, 23, 42, 0.4);
}

/* Sticky first column (Account Name) */
.contribution-calendar-matrix th:first-child,
.contribution-calendar-matrix td:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 2;
  border-right: 1px solid var(--border);
  min-width: 160px;
}

.contribution-calendar-matrix th:first-child {
  z-index: 3;
  background: var(--panel);
}

/* Highlight hover row */
.contribution-calendar-matrix tbody tr:hover {
  background: rgba(255, 255, 255, 0.01);
}

.contribution-calendar-matrix tbody tr:hover td:first-child {
  background: var(--panel);
}

/* Override Cell Styling */
.calendar-matrix-cell.cell-override {
  color: #fff;
  font-weight: 600;
}

.calendar-matrix-cell.cell-override:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Overlap Cell Styling */
.calendar-matrix-cell.cell-overlap {
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-3, #f59e0b);
}

.calendar-matrix-cell.cell-overlap:hover {
  background: rgba(245, 158, 11, 0.18) !important;
}

.matrix-overlap-warning {
  font-size: 0.8rem;
  margin-left: 0.25rem;
}

/* Calendar Tooltip */
.calendar-tooltip {
  position: absolute;
  z-index: 9999;
  background: #1e293b; /* Slate 800 */
  color: #f8fafc; /* Slate 50 */
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  max-width: 240px;
  white-space: normal;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  transform: translate(-50%, -100%);
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.calendar-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-6px);
}

.calendar-tooltip.hidden {
  display: none;
}

.calendar-matrix-cell[data-tooltip] {
  cursor: help;
}
/* ── Account creation wizard (single-panel flow) ───────────────────── */

/* Progress dots */
.cw-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1.25rem 0 0.5rem;
}
.cw-dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: all 0.3s ease;
  padding: 0;
}
.cw-dot-done {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.cw-dot-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}
.cw-line {
  width: 2.5rem;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
}

/* Panel container — only one visible at a time */
.cw-panel {
  display: none;
  padding: 1rem 0 0.5rem;
  opacity: 0;
  transform: translateX(30px);
}
.cw-panel.cw-visible {
  display: block;
  opacity: 1;
  transform: translateX(0);
  animation: cwFadeIn 0.3s ease forwards;
}

/* Slide transitions */
@keyframes cwFadeIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cw-panel.cw-enter-left {
  animation: cwSlideFromLeft 0.3s ease forwards;
}
@keyframes cwSlideFromLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cw-panel.cw-enter-right {
  animation: cwFadeIn 0.3s ease forwards;
}
.cw-panel.cw-slide-left {
  display: block;
  animation: cwOutLeft 0.25s ease forwards;
}
@keyframes cwOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-30px); }
}
.cw-panel.cw-slide-right {
  display: block;
  animation: cwOutRight 0.25s ease forwards;
}
@keyframes cwOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(30px); }
}

/* Step title & hint */
.cw-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.25rem;
}
.cw-hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.cw-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem;
  margin: 0 0 1rem;
}

@media (min-width: 720px) {
  .cw-template-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cw-template {
  text-align: left;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5rem;
}

.cw-template:hover,
.cw-template:focus-visible {
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.32);
  transform: translateY(-1px);
}

.cw-template-selected {
  background: rgba(56,189,248,0.16);
  border-color: rgba(56,189,248,0.72);
  box-shadow: 0 0 0 2px rgba(56,189,248,0.14), inset 0 0 0 1px rgba(56,189,248,0.18);
  transform: translateY(-1px);
}

.cw-template-selected strong {
  color: var(--accent);
}

.cw-template strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.15rem;
}

.cw-template span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.cw-template .cw-template-action {
  margin-top: 0.45rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cw-template-selected .cw-template-action {
  color: var(--accent);
}

.cw-template-status {
  margin: -0.35rem 0 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Provider combobox — dark-theme replacement for native <datalist> */
.provider-combo {
  position: relative;
  display: block;
  width: 100%;
}
.provider-combo > input {
  width: 100%;
  box-sizing: border-box;
}
.provider-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  display: none;
}
.provider-combo-list.is-open {
  display: block;
}
.provider-combo-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--text);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.provider-combo-item:hover,
.provider-combo-item.is-active {
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent-hover);
}
.provider-combo-empty {
  padding: 0.5rem 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* Action bar */
.cw-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* Setup mode — holding chips */
.setup-holding-chip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--panel-2);
  border-radius: 8px;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
}
.setup-holding-chip strong {
  flex: 1;
  color: var(--text);
}
.setup-holding-chip span:last-child {
  color: var(--accent);
  font-weight: 600;
}

/* Contribution preview box */
.cw-preview {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--panel-2);
  border-radius: 10px;
  border: 1px solid var(--border);
  animation: cwFadeIn 0.25s ease;
}
.cw-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.cw-preview-row strong {
  color: var(--text);
  font-weight: 500;
}
.cw-preview-bonus strong {
  color: var(--accent);
}
.cw-preview-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0 0.15rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text);
}
.cw-preview-total strong {
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
}

/* Accent badge variant for primary wizard buttons.
   Wins over the base .badge colours by source order (this rule
   appears later in the file). */
.badge-accent {
  background: var(--accent);
  color: #fff;
}
.badge-accent:hover {
  filter: brightness(1.15);
}

/* ── Danger Zone ───────────────────────────────────────────────────── */
/* Self-assessment relief row in contribution preview */
.cw-preview-selfassess {
  border-top: 1px dashed rgba(255,255,255,0.1);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.cw-preview-selfassess strong {
  color: #fbbf24;
}

.danger-zone {
  border-color: rgba(248, 113, 113, 0.25);
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.04) 0%, transparent 100%);
}
.danger-eyebrow {
  /* Overrides .eyebrow colour; wins on source order. */
  color: var(--danger);
}

/* ── Monthly review nudge ────────────────────────────────────────────── */
.review-nudge {
  border-left: 3px solid var(--accent);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, transparent 100%);
}

.next-action-card {
  border-left: 3px solid rgba(56,189,248,0.55);
  background: linear-gradient(135deg, rgba(56,189,248,0.055) 0%, transparent 100%);
}

/* ── Contribution confirmation checklist ────────────────────────────── */
.contribution-check-row {
  transition: opacity 0.2s, background 0.2s;
}

.contribution-check-main {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1 1 16rem;
  min-width: 0;
}

.contribution-check-toggle {
  flex-shrink: 0;
  cursor: pointer;
  align-items: flex-start;
}

.contribution-check-account {
  min-width: 0;
}

.contribution-check-side {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-shrink: 0;
}

.contribution-check-status {
  text-align: right;
}
.contribution-check-row.contribution-confirmed {
  opacity: 0.7;
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.25);
}

.contribution-cb {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  accent-color: var(--accent-2, #22c55e);
  cursor: pointer;
}

.budget-diff-match,
.budget-diff-over,
.budget-diff-under {
  margin: 0.1rem 0 0 0;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}
.budget-diff-match { color: var(--text-muted, #64748b); }
.budget-diff-over  { color: var(--accent-danger, #dc2626); }
.budget-diff-under { color: var(--accent-2, #22c55e); }

@media (max-width: 768px) {
  .contribution-check-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: flex-start;
  }

  .contribution-check-main {
    min-width: 0;
  }

  .contribution-check-account p {
    display: none;
  }

  .contribution-check-side {
    width: 100%;
    padding-left: 1.7rem;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
  }

  .contribution-check-status {
    text-align: left;
  }

  .contrib-pot-chip,
  .budget-diff-match,
  .budget-diff-over,
  .budget-diff-under {
    white-space: normal;
  }

  .contribution-check-side .badge {
    margin-left: auto;
  }

  .contribution-check-toggle .helper-text {
    display: none;
  }
}

/* ── Goal on-track callout (Projections page) ───────────────────────── */
.goal-track-callout {
  border-left: 3px solid var(--accent);
  padding: 0.875rem 1rem;
}
.goal-track-callout.goal-track-ok {
  border-left-color: var(--accent-2);
  background: linear-gradient(135deg, rgba(34,197,94,0.07) 0%, transparent 100%);
}
.goal-track-callout.goal-track-short {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245,158,11,0.07) 0%, transparent 100%);
}
.goal-track-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ── Stale prices chip on account cards ─────────────────────────────── */
.acct-stale-chip {
  font-size: 0.68rem;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245,158,11,0.12);
  border-radius: 99px;
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
}

/* ── Alert banners ───────────────────────────────────────────────────── */
.alert-banner {
  border-left: 3px solid var(--accent);
}
.alert-banner.alert-warning {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.07) 0%, transparent 100%);
}
.alert-banner.alert-danger {
  border-left-color: var(--danger);
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.07) 0%, transparent 100%);
}
.alert-banner.alert-info {
  border-left-color: var(--accent);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, transparent 100%);
}

/* ── Mini table (allowance breakdown, contribution history) ──────────── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.trading212-mobile-only {
  display: none;
}
.trading212-position-name {
  font-weight: 600;
}
.trading212-mobile-position-list {
  display: none;
  gap: 0.85rem;
}
.trading212-mobile-position-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.35);
}
.trading212-mobile-position-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.trading212-mobile-position-value {
  flex-shrink: 0;
  text-align: right;
  font-weight: 700;
  color: var(--text);
}
.trading212-position-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
}
.trading212-position-facts div {
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.3);
}
.trading212-position-facts dt {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.trading212-position-facts dd {
  margin: 0.25rem 0 0;
  font-weight: 600;
  color: var(--text);
}
.trading212-candidate-heading {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.trading212-candidate-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.trading212-candidate-card {
  padding: 0.6rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.35);
}
.trading212-candidate-title {
  font-weight: 600;
  color: var(--text);
}
.trading212-candidate-account {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.trading212-candidate-clues {
  margin-top: 0.5rem;
  gap: 0.35rem;
}
.trading212-mobile-candidate-overflow {
  margin-top: 0.15rem;
}
.trading212-mobile-candidate-overflow summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
}
.trading212-mobile-candidate-overflow[open] summary {
  margin-bottom: 0.55rem;
}
.trading212-candidate-list-overflow {
  margin-top: 0;
}
@media (max-width: 640px) {
  .trading212-desktop-only {
    display: none;
  }

  .trading212-mobile-only {
    display: grid;
  }

  .trading212-mobile-position-card {
    padding: 0.8rem;
  }

  .trading212-mobile-position-top {
    flex-direction: column;
  }

  .trading212-mobile-position-value {
    text-align: left;
  }

  .trading212-position-facts {
    grid-template-columns: 1fr;
  }

  .trading212-candidate-card {
    padding: 0.55rem 0.65rem;
  }

  .trading212-candidate-clues .badge {
    max-width: 100%;
  }

  .trading212-mobile-candidate-overflow summary {
    font-size: 0.8rem;
  }
}
.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.mini-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mini-table th.text-right  { text-align: right; }
.mini-table th.text-center { text-align: center; }
.mini-table th.text-left   { text-align: left; }
.mini-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mini-table tbody tr:last-child td { border-bottom: none; }
.mini-table tfoot td {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-weight: 600;
}

/* ── Contribution summary table ────────────────────────────────────────────── */
.contrib-table th, .contrib-table td { white-space: nowrap; }
.contrib-account-name { font-weight: 500; }
/* Cell-level coloring */
.contrib-confirmed  { background: rgba(34,197,94,0.15); color: #4ade80; font-weight: 600; }
.contrib-pending    { background: rgba(251,191,36,0.10); color: #fbbf24; }
.contrib-skipped    { background: rgba(148,163,184,0.08); color: var(--muted); font-style: italic; }
.contrib-none       { color: var(--muted); }
.contrib-tick       { color: #4ade80; margin-left: 4px; font-size: 0.85rem; }
.contrib-skip-amount { text-decoration: line-through; opacity: 0.55; }

/* Row-level accent on account name cell */
.contrib-row-confirmed > td:first-child { border-left: 3px solid #4ade80; }
.contrib-row-pending   > td:first-child { border-left: 3px solid #fbbf24; }
.contrib-row-skipped   > td:first-child { border-left: 3px solid var(--muted); }
.contrib-row-none      > td:first-child { border-left: 3px solid transparent; }

.contrib-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1rem;
  font-size: 0.8rem;
}
.contrib-legend-item {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.78rem;
}
.contrib-legend-sep {
  color: var(--muted);
  font-size: 0.78rem;
}
.contrib-legend-sep::after {
  content: '·';
  margin-left: 0.75rem;
  color: var(--border);
}
.contrib-legend-sep:last-child::after {
  content: '';
}
.contrib-totals td { border-top: 1px solid var(--border); padding-top: 0.75rem; }

/* ── Asset allocation chart ─────────────────────────────────────────────── */
.allocation-wrap {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.allocation-legend {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.allocation-legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.allocation-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.allocation-label { flex: 1; }
.allocation-value { font-weight: 600; white-space: nowrap; }
.allocation-pct   { min-width: 3.5rem; text-align: right; }

/* ── Offline banner ─────────────────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #f59e0b;
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  padding: 0.4rem 1rem;
  z-index: 9999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.offline-banner[hidden] { display: none; }


/* ── Planning tab ─────────────────────────────────────────────────────────── */
.planning-compact-only {
  display: none !important;
}

.planning-milestone-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.planning-mini-card {
  background: var(--panel);
  border-color: var(--border);
}

.planning-progress {
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
  margin-top: 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.planning-progress span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.planning-assumptions-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.planning-assumptions-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.planning-assumptions-form input {
  width: 100%;
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  min-height: 48px;
  font: inherit;
  box-shadow: none;
  appearance: textfield;
}

.planning-assumptions-form input::placeholder {
  color: rgba(148, 163, 184, 0.72);
}

.planning-assumptions-form input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.planning-form-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.planning-big-number {
  margin: 0.3rem 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.planning-big-number-large {
  font-size: 2.2rem;
  margin: 0.25rem 0 0.5rem;
  font-weight: 800;
  color: var(--text-normal, #f8fafc);
  letter-spacing: -0.03em;
}

.planning-signal-value {
  font-size: 1.25rem;
  margin: 0.25rem 0 0.5rem;
  font-weight: 700;
  color: var(--text-normal, #f8fafc);
}

.planning-account-values {
  gap: 0.25rem;
}

.planning-compact-details,
.overview-compact-details,
.projections-compact-details {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  padding: 0;
  margin-top: 0.8rem;
  overflow: hidden;
}

.planning-compact-details summary,
.overview-compact-details summary,
.projections-compact-details summary {
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 1rem;
  color: var(--text);
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.planning-compact-details summary::-webkit-details-marker,
.overview-compact-details summary::-webkit-details-marker,
.projections-compact-details summary::-webkit-details-marker {
  display: none;
}

.planning-compact-details summary::after,
.overview-compact-details summary::after,
.projections-compact-details summary::after {
  content: '+';
  color: var(--accent);
  font-size: 1.2rem;
  line-height: 1;
}

.planning-compact-details[open] summary::after,
.overview-compact-details[open] summary::after,
.projections-compact-details[open] summary::after {
  content: '–';
}

.planning-compact-details > :not(summary),
.overview-compact-details > :not(summary),
.projections-compact-details > :not(summary) {
  padding: 0 1rem 1rem;
}

.planning-account-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.planning-account-summary div {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.planning-account-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.planning-account-summary strong {
  color: var(--text);
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .planning-desktop-only,
  .planning-desktop-detail {
    display: none !important;
  }

  .planning-compact-only {
    display: block !important;
  }

  .planning-account-summary.planning-compact-only {
    display: grid !important;
  }

  .planning-hero-card {
    padding: 1rem;
  }

  .planning-hero-top {
    gap: 0.75rem;
    align-items: flex-start;
  }

  .planning-hero-card .hero-value {
    font-size: clamp(2rem, 8vw, 3.2rem);
    line-height: 0.95;
  }

  .planning-hero-card .hero-subtitle {
    font-size: 0.95rem;
    line-height: 1.45;
    margin-top: 0.45rem;
  }

  .planning-hero-caveat {
    font-size: 0.82rem;
    display: none;
  }

  .budget-hero-mobile-hint {
    display: none;
  }

  .planning-turtle-wrap {
    max-width: 74px;
    opacity: 0.78;
  }

  .planning-hero-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .planning-section-header {
    gap: 0.75rem;
  }

  .planning-section-header .badge {
    width: 100%;
    justify-content: center;
  }

  .planning-signal-card h2,
  .planning-income-summary h2,
  .planning-next-card h2 {
    font-size: 1.45rem;
    line-height: 1.15;
  }

  .planning-assumptions-form {
    grid-template-columns: 1fr;
  }

  .planning-assumptions-form label {
    width: 100%;
  }

  .planning-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .planning-form-actions .badge {
    justify-content: center;
    width: 100%;
  }

  .planning-account-row {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .planning-account-values {
    align-items: flex-start;
    text-align: left;
    min-width: 100%;
  }
}

@media (max-width: 520px) {
  .planning-turtle-wrap {
    display: none;
  }

  .planning-hero-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-account-summary {
    grid-template-columns: 1fr;
  }
}

/* ── Liquidity Stack Bar ──────────────────────────────────────────────────── */
.liquidity-stack-container {
  margin: 1.5rem 0 1.25rem;
}

.liquidity-stack-bar {
  display: flex;
  height: 12px;
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.liquidity-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.liquidity-segment.segment-cash {
  background: hsl(160, 80%, 45%); /* Vibrant mint */
}

.liquidity-segment.segment-invested {
  background: hsl(160, 40%, 55%); /* Softer sage-green */
}

.liquidity-segment.segment-restricted {
  background: hsl(35, 90%, 55%); /* Warm amber/orange */
}

.liquidity-segment.segment-locked {
  background: hsl(220, 80%, 60%); /* Dusk blue */
}

.liquidity-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.liquidity-legend-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted, #94a3b8);
}

.liquidity-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.liquidity-legend-dot.dot-cash {
  background: hsl(160, 80%, 45%);
}

.liquidity-legend-dot.dot-invested {
  background: hsl(160, 40%, 55%);
}

.liquidity-legend-dot.dot-restricted {
  background: hsl(35, 90%, 55%);
}

.liquidity-legend-dot.dot-locked {
  background: hsl(220, 80%, 60%);
}

.liquidity-legend-item strong {
  color: var(--text-normal, #f8fafc);
}

/* ── Settings tab ─────────────────────────────────────────────────────────── */
.settings-tab-content {
  display: none;
}

.settings-tab-content.active {
  display: block;
}

.subnav-page a {
  cursor: pointer;
}

/* Plan Dashboard Grid */
.plan-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.plan-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 22%, transparent), 0 14px 36px rgba(0, 0, 0, 0.2);
}

.plan-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.plan-card-icon {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-radius: 8px;
}

.plan-card-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.plan-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.plan-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
}

.plan-stat-row span {
  color: var(--text-muted);
}

.plan-stat-row strong {
  color: var(--text);
  font-weight: 600;
}

.plan-dashboard-grid .panel {
  margin-top: 0 !important; /* override mt-1 inside the grid */
}

.plan-dashboard-grid .panel .section-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section.panel h3, .plan-card h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* ── Responsive Details (Collapsible on mobile, block on desktop) ─────────── */
details.planning-responsive-details {
  box-sizing: border-box;
}

@media (min-width: 769px) {
  details.planning-responsive-details {
    display: block !important;
  }
  details.planning-responsive-details > summary {
    display: none !important;
  }
  details.planning-responsive-details > :not(summary) {
    display: block !important;
  }
  details.planning-responsive-details > .card-grid {
    display: grid !important;
  }
  details.planning-responsive-details > .planning-assumptions-form {
    display: grid !important;
  }
}

@media (max-width: 768px) {
  details.planning-responsive-details {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.85rem 1.15rem;
    background: rgba(255, 255, 255, 0.01);
    transition: background 0.2s ease;
  }
  details.planning-responsive-details[open] {
    background: rgba(255, 255, 255, 0.02);
  }
  details.planning-responsive-details summary {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    user-select: none;
    outline: none;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  details.planning-responsive-details summary::-webkit-details-marker {
    display: none;
  }
  details.planning-responsive-details summary::after {
    content: "↓";
    font-size: 0.85rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
  }
  details.planning-responsive-details[open] summary::after {
    transform: rotate(180deg);
  }
  details.planning-responsive-details > :not(summary) {
    margin-top: 0.75rem;
    display: block;
  }
  details.planning-responsive-details > .card-grid {
    display: grid;
  }
  details.planning-responsive-details > .planning-assumptions-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ── Overview Dashboard Hero ─────────────────────────────────────────────── */
.overview-hero-card {
  padding: 1.5rem !important;
}

.overview-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.overview-hero-value {
  font-size: 2rem;
  font-weight: 800;
  margin: 0.25rem 0 0.15rem;
  color: var(--text);
}

.overview-hero-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.overview-hero-helper {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
}

.overview-hero-stats-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.overview-hero-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}

.overview-hero-stat-value {
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 600;
}

.overview-hero-stat-block {
  margin-top: 0.25rem;
}

.overview-hero-stat-title-large {
  font-size: 2rem;
  font-weight: 800;
  margin: 0.25rem 0 0.15rem;
}

.overview-hero-stat-title-large.accent-color {
  color: var(--month-color, var(--accent));
}

.overview-hero-stat-title-large.normal-color {
  color: var(--text);
}

.overview-hero-stat-label-normal {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  display: block;
  margin-top: 0.25rem;
}

.overview-hero-empty-state {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.overview-hero-description {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Auth pages ──────────────────────────────────────────────────────────── */

/* Full-page wrapper — centers the card */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 2rem;
}

/* The card itself — two columns inside a constrained box */
.auth-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 880px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* ── Left: branding ─────────────────────────────────────────────────── */
.auth-brand {
  background: linear-gradient(150deg, #0d1f38 0%, #0f172a 75%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2.75rem;
  position: relative;
  overflow: hidden;
}

.auth-brand::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.13) 0%, transparent 65%);
  pointer-events: none;
}

.auth-brand-logo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
}

.auth-brand-mark {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  padding: 0.35rem;
  margin: -0.35rem;
  border-radius: 1.25rem;
  background: radial-gradient(circle at 50% 35%, rgba(173, 255, 214, 0.2) 0%, rgba(56, 189, 248, 0.12) 42%, rgba(56, 189, 248, 0) 78%);
  filter: drop-shadow(0 10px 26px rgba(15, 23, 42, 0.32)) drop-shadow(0 0 18px rgba(56, 189, 248, 0.12));
}

.auth-brand-mark--float {
  animation: brand-mark-float 7s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes brand-mark-float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-4px) rotate(2deg);
  }
}

/* Legacy emoji fallback */

.auth-brand-name-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.auth-brand-name {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}

.auth-version-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  letter-spacing: 0.04em;
  width: fit-content;
}

/* Subtle dot grid overlay on brand panel */
.auth-brand-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* ── Turtle animations ──────────────────────────────────────────────── */
/* Each page gives Shelly a different personality.                       */

/* Fallback / default: subtle breathe */
.turtle-breathe { animation: turtle-breathe 6s ease-in-out infinite; }
@keyframes turtle-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Overview: happy nod — Shelly's pleased with the numbers */
.turtle-overview { animation: turtle-overview 3s ease-in-out infinite; }
@keyframes turtle-overview {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-4px) rotate(-3deg); }
  50%      { transform: translateY(0) rotate(2deg); }
  70%      { transform: scaleX(-1) translateY(-3px) rotate(-2deg); }
}

/* Accounts: guarding — Shelly's watching over your money */
.turtle-accounts { animation: turtle-accounts 5s ease-in-out infinite; }
@keyframes turtle-accounts {
  0%, 100% { transform: scaleX(-1) translateX(0) rotate(0deg); }
  25%      { transform: scaleX(-1) translateX(3px) rotate(2deg); }
  50%      { transform: scaleX(-1) translateX(-3px) rotate(-2deg); }
  75%      { transform: scaleX(-1) translateX(2px) rotate(1deg); }
}

/* Budget / Monthly review: busy counting — Shelly's working hard */
.turtle-budget,
.turtle-monthly_review { animation: turtle-budget 2.5s ease-in-out infinite; }
@keyframes turtle-budget {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
  15%      { transform: scaleX(-1) translateY(-3px) rotate(-4deg); }
  30%      { transform: scaleX(-1) translateY(0) rotate(0deg); }
  45%      { transform: scaleX(-1) translateY(-3px) rotate(4deg); }
  60%      { transform: scaleX(-1) translateY(0) rotate(0deg); }
}

/* Goals: determined walk — Shelly's marching towards the finish line */
.turtle-goals { animation: turtle-goals 3s ease-in-out infinite; }
@keyframes turtle-goals {
  0%       { transform: scaleX(-1) translateX(0) translateY(0); }
  25%      { transform: scaleX(-1) translateX(4px) translateY(-2px) rotate(-3deg); }
  50%      { transform: scaleX(-1) translateX(6px) translateY(0) rotate(0deg); }
  75%      { transform: scaleX(-1) translateX(4px) translateY(-2px) rotate(3deg); }
  100%     { transform: scaleX(-1) translateX(0) translateY(0); }
}

/* Projections: dreaming — Shelly's gazing into the future */
.turtle-projections { animation: turtle-projections 6s ease-in-out infinite; }
@keyframes turtle-projections {
  0%, 100% { transform: scaleX(-1) translateY(0) scale(1) rotate(0deg); }
  30%      { transform: scaleX(-1) translateY(-5px) scale(1.04) rotate(-5deg); }
  60%      { transform: scaleX(-1) translateY(-3px) scale(1.02) rotate(3deg); }
}

/* Performance: flexing — Shelly's checking the gains */
.turtle-performance { animation: turtle-performance 3s ease-in-out infinite; }
@keyframes turtle-performance {
  0%, 100% { transform: scaleX(-1) scale(1) rotate(0deg); }
  20%      { transform: scaleX(-1) scale(1.1) rotate(-3deg); }
  40%      { transform: scaleX(-1) scale(1) rotate(0deg); }
  60%      { transform: scaleX(-1) scale(1.08) rotate(3deg); }
  80%      { transform: scaleX(-1) scale(1) rotate(0deg); }
}

/* Settings: tinkering — Shelly's adjusting the dials */
.turtle-settings,
.turtle-users { animation: turtle-settings 4s ease-in-out infinite; }
@keyframes turtle-settings {
  0%, 100% { transform: scaleX(-1) rotate(0deg); }
  25%      { transform: scaleX(-1) rotate(10deg); }
  50%      { transform: scaleX(-1) rotate(-8deg); }
  75%      { transform: scaleX(-1) rotate(5deg); }
}

/* Empty states: slow peek — Shelly's looking around for data */
.turtle-peek { animation: turtle-peek 5s ease-in-out infinite; }
@keyframes turtle-peek {
  0%, 100% { transform: translateX(0) scale(1); }
  50%      { transform: translateX(5px) scale(1.08); }
}

.auth-brand-headline {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 0.85rem;
}

.auth-brand-headline span {
  color: var(--accent);
}

.auth-brand-sub {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 2rem;
}

.auth-brand-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.auth-brand-features li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.auth-brand-features li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.75;
}

/* ── Right: form ────────────────────────────────────────────────────── */
.auth-form-panel {
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.75rem;
}

.auth-form-inner {
  width: 100%;
}

.auth-form-inner .eyebrow {
  margin-bottom: 0.4rem;
}

.auth-form-inner h2 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 0.35rem;
}

.auth-hint {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0 0 1.75rem;
  line-height: 1.55;
}

.auth-form-inner .form-group {
  margin-bottom: 1rem;
}

.auth-form-inner .form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-form-inner .form-group input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.975rem;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.auth-form-inner .form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.form-hint {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.3rem 0 0;
}

.auth-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  color: var(--error);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.auth-submit {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.78rem 1rem;
  font-size: 0.975rem;
  font-weight: 600;
  background: var(--accent);
  color: #0f172a;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.auth-submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.auth-submit:active {
  transform: translateY(0);
}

.auth-footer-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.6;
}
.auth-footer-note a {
  color: var(--accent);
  text-decoration: none;
}
.auth-footer-note a:hover {
  text-decoration: underline;
}

/* ── Auth mobile layout ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .auth-shell {
    padding: 0;
    align-items: flex-start;
  }
  .auth-container {
    grid-template-columns: 1fr;
    border-radius: 0;
    border: none;
    max-width: 100%;
  }
  .auth-brand {
    padding: 2rem 1.5rem 1.5rem;
  }
  .auth-brand-headline {
    font-size: 1.5rem;
  }
  .auth-brand-features {
    display: none;
  }
  .auth-form-panel {
    padding: 1.5rem;
  }
}

/* ── Utility classes (replacing inline styles) ────────────────────────── */

/* Margins — scale: 025/05/075/1/125/15 = 0.25/0.5/0.75/1/1.25/1.5rem */
.m-0     { margin: 0; }
.mt-0    { margin-top: 0; }
.mt-025  { margin-top: 0.25rem; }
.mt-05   { margin-top: 0.5rem; }
.mt-075  { margin-top: 0.75rem; }
.mt-1    { margin-top: 1rem; }
.mt-125  { margin-top: 1.25rem; }

.mb-025  { margin-bottom: 0.25rem; }
.mb-05   { margin-bottom: 0.5rem; }
.mb-075  { margin-bottom: 0.75rem; }
.mb-1    { margin-bottom: 1rem; }
.ml-025  { margin-left: 0.25rem; }

/* Padding — same scale */

/* Widths */
.w-full  { width: 100%; }

/* Forms */
.form-reset    { margin: 0; }
.form-contents { display: contents; }
.form-full-col { grid-column: 1 / -1; }

/* Text */
.text-muted    { color: var(--muted); }

.text-accent-2 { color: var(--accent-2); }
.text-danger   { color: var(--danger); }
.text-success  { color: #86efac; }
.text-gain     { color: #86efac; }
.text-loss     { color: var(--danger); }
.text-sm      { font-size: 0.8rem; }
.text-sm-2    { font-size: 0.875rem; }
.text-xs      { font-size: 0.75rem; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }

.text-bold    { font-weight: 600; }
.text-nowrap  { white-space: nowrap; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Period selector buttons (overview chart, potentially others) */
.period-btn,
.overview-toggle-btn {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.period-btn.active,
.overview-toggle-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.25);
}

.period-btn:hover:not(.active),
.overview-toggle-btn:hover:not(.active) {
  border-color: rgba(56, 189, 248, 0.45);
  color: var(--text);
  background: rgba(56, 189, 248, 0.06);
}

.period-btn:active,
.overview-toggle-btn:active {
  transform: translateY(1px);
}

.overview-position-toggle {
  align-self: flex-start;
}

@media (max-width: 480px) {
  .period-selector {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .overview-position-toggle {
    width: 100%;
  }
  .period-btn {
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
  }
}

/* Eyebrow (tiny uppercase label) */

/* Layout */
.flex          { display: flex; }

.flex-wrap     { flex-wrap: wrap; }
.flex-center   { align-items: center; }

.flex-between  { justify-content: space-between; }
.flex-start    { align-items: flex-start; }

.gap-05        { gap: 0.5rem; }
.gap-06        { gap: 0.6rem; }
.gap-075       { gap: 0.75rem; }

/* Display */
.hidden       { display: none; }

.inline       { display: inline; }

.block        { display: block; }

/* Panel variants */
.panel-compact   { padding: 1rem; }
.panel-spacious  { padding: 2rem; }

/* Chart */
.chart-wrap-sm   { height: 160px; }
.chart-wrap-md   { height: 280px; }

.chart-range-pills {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
.chart-range-pill {
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chart-range-pill:hover { background: var(--surface-2); color: var(--text); }
.chart-range-pill-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Total money chart label */
.chart-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}

/* Links (unstyled accent link) */
a.link-accent {
  color: var(--accent);
  text-decoration: none;
}
a.link-accent:hover {
  text-decoration: underline;
}

/* Inline link button (looks like text link) */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.78rem;
  text-decoration: underline;
}
.btn-link:hover {
  color: var(--text);
}

/* Error text (for search results, validation) */

/* Danger card/panel border */
.border-danger {
  border: 1px solid rgba(248, 113, 113, 0.25);
}

/* Section title (used in panels) */
.section-title {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.section-title-sm {
  margin: 0;
  font-size: 1rem;
}

/* Allowance denominator */
.allowance-denom {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.95rem;
}

/* Badge row end-aligned */
.badge-row-end {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Allocation dot */
.alloc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  transition: box-shadow 0.18s ease;
}

/* Override list */
.override-list {
  margin-top: 0.75rem;
}

/* Ticker subtitle */
.ticker-sub {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.875rem;
}

/* Performance legend dot */
.perf-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Hero month nav container */
.hero-actions-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

/* Right column: turtle + actions stacked — two-child hero-top layout */

/* Monthly review: badge + month nav sit below the hero text */

/* Hero actions row */

/* Budget save indicator default cursor on badges */
.badge { cursor: pointer; }

/* Form input standard (for JS-generated forms) */
.input-standard {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.35rem 0.6rem;
  font-size: 0.875rem;
  font-family: inherit;
}

/* Add holding field sizing */
.input-narrow { width: 7rem; }
.input-medium { width: 9rem; }
.input-full   { width: 100%; }

/* Disabled/muted row */
.row-disabled { opacity: 0.5; }

/* Total row in tables */
.table-total-row {
  border-top: 2px solid var(--border);
}

.table-total-label {
  text-align: right;
  color: var(--muted);
  font-size: 0.8rem;
  padding-right: 0.75rem;
}


/* New Utilities Generated for Inline Styles Cleanup */
.mt-02 { margin-top: 0.2rem; }
.mt-04 { margin-top: 0.4rem; }
.mt-045 { margin-top: 0.45rem; }
.mt-085 { margin-top: 0.85rem; }
.mt-neg-025 { margin-top: -0.25rem; }
.mb-035 { margin-bottom: 0.35rem; }
.mb-04 { margin-bottom: 0.4rem; }
.mb-045 { margin-bottom: 0.45rem; }
.fw-normal { font-weight: 400; }
.fw-bold { font-weight: 700; }
.text-accent-3 { color: var(--accent-3); }
.text-base { font-size: 1rem; }
.text-sm-3 { font-size: 0.95rem; }
.text-sm-alt { font-size: 0.82rem; }
.flex-1-min-200 { flex: 1; min-width: 200px; }
.flex-1-min-12 { flex: 1; min-width: 12rem; }
.flex-end { justify-content: flex-end; }
.gap-055 { gap: 0.55rem; }
.gap-15 { gap: 1.5rem; }
.p-0 { padding: 0; }
.border-none { border: none; }
.min-h-125 { min-height: 1.25rem; }
.my-04-02 { margin: 0.4rem 0 0.2rem; }
.m-custom-1 { margin: 0.35rem 0 0 1.15rem; }
.max-w-12 { max-width: 12rem; }
.uppercase { text-transform: uppercase; }
.bg-accent-2 { background: var(--accent-2); }
.bg-muted-60 { background: var(--muted); opacity: 0.6; }
.border-t { border-top: 1px solid var(--border); }
.pt-075 { padding-top: 0.75rem; }
/* Modular CSS imports */







/* Global Hover Glow effect for all tiles/panels/cards (excluding highlight/hero tiles) */
.card:not(.highlight):not(.alert-banner), 
.panel:not(.highlight):not(.alert-banner):not(.inset-panel):not(.panel-compact),
.acct-card,
.allowance-card,
.edit-card,
.acct-detail-stat,
.allocation-item {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:not(.highlight):not(.alert-banner):hover, 
.panel:not(.highlight):not(.alert-banner):not(.inset-panel):not(.panel-compact):hover,
.acct-card:hover,
.allowance-card:hover,
.edit-card:hover,
.acct-detail-stat:hover,
.allocation-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent) !important;
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

/* Contribution Table Redesign - Chip/Badge Style Grid */
.contrib-table {
  border-collapse: separate !important;
  border-spacing: 0.35rem 0.35rem !important;
  margin-top: 0.5rem;
}

.contrib-table th {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.contrib-table td {
  padding: 0.6rem 0.8rem !important;
  border-radius: 6px;
  font-size: 0.85rem;
  border: none !important;
}

.contrib-table tr > td:first-child {
  background: var(--panel-2);
  border-left: 3px solid var(--border) !important;
  font-weight: 500;
}

.contrib-row-confirmed > td:first-child {
  border-left: 3px solid #4ade80 !important;
}
.contrib-row-pending > td:first-child {
  border-left: 3px solid #fbbf24 !important;
}
.contrib-row-skipped > td:first-child {
  border-left: 3px solid var(--text-muted) !important;
}

.contrib-confirmed {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
}

.contrib-pending {
  background: rgba(251, 191, 36, 0.08) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.15) !important;
}

.contrib-skipped {
  background: rgba(148, 163, 184, 0.06) !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
}

.contrib-none {
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.contrib-totals td {
  background: transparent !important;
  border-top: 2px solid var(--border) !important;
  border-radius: 0 !important;
}

/* Modern, Spacious Data Tables for Performance and Lists */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr[data-href] {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.data-table tr[data-href]:hover {
  background-color: var(--panel-2);
}

/* Overview Hero Grid Layout */
.overview-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.hero-col-panel,
.budget-hero-actions,
.accounts-hero-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .hero-col-panel:not(:last-child),
  .budget-hero-actions,
  .accounts-hero-actions {
    border-right: 1px solid var(--border);
    padding-right: 1.5rem;
  }
}

@media (max-width: 767px) {
  .hero-col-panel:not(:last-child),
  .budget-hero-actions,
  .accounts-hero-actions {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.5rem;
  }
}

.budget-hero-mobile-hint {
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
  line-height: 1.3 !important;
}

.hero-strip-stat span {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}