/* ============================================
   UI Polish Layer — Visual Refinements
   ============================================
   Layered on top of existing styles.
   Adds: typography upgrade, refined shadows,
   micro-animations, improved depth & hierarchy.
   ============================================ */

/* ============================================
   1. TYPOGRAPHY UPGRADE
   ============================================
   Pair "Manrope" (geometric, tight) for headings
   with Figtree for body text. Gives the app a
   sharper, more distinctive feel.
   ============================================ */

:root {
  --font-heading: 'Manrope', 'Figtree', sans-serif;

  /* Refined shadow system — more layered, more depth */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-card-hover: 0 8px 25px -5px rgba(0,0,0,0.08), 0 4px 10px -3px rgba(0,0,0,0.04);
  --shadow-elevated:   0 12px 40px -10px rgba(0,0,0,0.1), 0 4px 12px -4px rgba(0,0,0,0.05);
  --shadow-glow:       0 0 0 1px rgba(0,181,119,0.1), 0 4px 16px rgba(0,181,119,0.12);
}

/* Apply heading font to key elements */
.page-title,
h1, h2,
.chart-title,
.form-section-title,
.sidebar-brand-text .brand-name-text,
.stat-value,
.header-plan-name,
.mc-sidebar-title,
.overview-glance-title,
.optimize-accordion-btn {
  font-family: var(--font-heading);
}

/* Tighten heading letter-spacing for Plus Jakarta Sans */
.page-title {
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.chart-title {
  letter-spacing: -0.01em;
}

/* ============================================
   2. SIDEBAR REFINEMENTS
   ============================================ */

/* Subtle vertical gradient for depth */
.sidebar,
.app-sidebar {
  background: linear-gradient(180deg, #2f3b4d 0%, #263040 50%, #1e2838 100%);
}

/* Nav item refinements */
.nav-item {
  border-radius: var(--radius-lg);
  padding: 0.55rem var(--sp-3);
  margin-bottom: 1px;
  position: relative;
  font-weight: var(--fw-medium);
  letter-spacing: 0.005em;
}

.nav-item:hover {
  background: rgba(255,255,255,0.06);
}

/* Active nav: Green accent bar on left instead of full bg fill */
.nav-item.active {
  background: rgba(0, 181, 119, 0.12);
  color: white;
  box-shadow: none;
  border-left: 3px solid var(--primary);
  padding-left: calc(var(--sp-3) - 3px);
}

.nav-item.active .material-symbols-outlined {
  color: var(--primary);
}

/* Sidebar brand subtle glow */
.sidebar-brand {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sidebar-brand .logo-icon {
  box-shadow: 0 2px 8px rgba(0,181,119,0.25);
}

/* Pro tip card — glassmorphic feel */
.sidebar-tip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ============================================
   3. HEADER REFINEMENTS
   ============================================ */

header {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
  z-index: 1400;
}

[data-theme="dark"] header {
  background: rgba(17,24,39,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Avatar dropdown fix: ensure it renders above stat cards ── */
#userMenu {
  z-index: 9999 !important;
}

/* Style the avatar dropdown to match the theme */
[data-theme="dark"] #userMenu {
  background: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] #userMenu div[style*="border-bottom"],
[data-theme="dark"] #userMenu div[style*="background:#f0f0f0"] {
  border-color: var(--border-subtle) !important;
  background: var(--border-subtle) !important;
}

[data-theme="dark"] #userMenu button {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] #userMenu button:hover {
  background: var(--page-bg) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] #userMenu button[onclick*="logout"] {
  color: #ef4444 !important;
}

[data-theme="dark"] #userMenu div[style*="font-weight:600"] {
  color: var(--text-main) !important;
}

/* AI Assistant button — subtle glow on hover */
.btn-ai {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ai:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

/* ============================================
   4. STAT CARDS — More Visual Impact
   ============================================ */

/* Give stat cards a colored top accent line */
.stat-card,
.header-kpis .stat-card {
  border-top: 2.5px solid var(--primary);
  border-radius: var(--radius-xl);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(0,181,119,0.03) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.stat-value {
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.stat-label,
.stat-desc {
  position: relative;
  z-index: 1;
}

/* Success card — special treatment */
.success-rate-card {
  border-top-color: var(--success);
}

.success-rate-card::before {
  background: linear-gradient(180deg, rgba(16,185,129,0.05) 0%, transparent 100%);
}

/* ============================================
   5. CHART CARDS — Refined & Polished
   ============================================ */

.chart-card {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.chart-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

[data-theme="dark"] .chart-card {
  border: 1px solid rgba(255,255,255,0.06);
}

/* Chart title subtle decoration */
.chart-title {
  position: relative;
  padding-bottom: 0;
}

/* ============================================
   6. FORM INPUT REFINEMENTS
   ============================================ */

/* Refined input focus states */
.input-group input,
select {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius-lg);
}

.input-group input:focus,
select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,181,119,0.1);
  outline: none;
}

/* Account cards — add depth */
.account-card {
  border-radius: var(--radius-xl);
  transition: all 0.25s ease;
}

.account-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Filing status selection — more polished */
.filing-status-option label {
  border-radius: var(--radius-xl);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.filing-status-option label:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,181,119,0.08);
}

.filing-status-option input[type="radio"]:checked + label {
  box-shadow: 0 0 0 3px rgba(0,181,119,0.12), var(--shadow-card);
}

/* Strategy dropdown refinement */
select {
  border-radius: var(--radius-lg);
}

/* ============================================
   7. BUTTON REFINEMENTS
   ============================================ */

/* Primary buttons — subtle lift on hover */
.btn-primary,
.simulate-btn,
.btn[data-variant="primary"] {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,181,119,0.2);
}

.btn-primary:hover,
.simulate-btn:hover,
.btn[data-variant="primary"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,181,119,0.3);
}

.btn-primary:active,
.simulate-btn:active,
.btn[data-variant="primary"]:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,181,119,0.2);
}

/* Secondary/outline buttons */
.btn-secondary,
.btn-outline {
  transition: all 0.2s ease;
}

.btn-secondary:hover,
.btn-outline:hover {
  transform: translateY(-1px);
}

/* ============================================
   8. MICRO-ANIMATIONS
   ============================================ */

/* Smoother page transitions */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-view.active {
  animation: pageFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered entrance for chart cards */
.chart-card {
  animation: cardSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

/* Nav item hover animation */
.nav-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Guidance items — subtle entrance */
.guidance-item {
  transition: all 0.3s ease;
  border-radius: var(--radius-xl);
}

.guidance-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

/* ============================================
   9. OVERVIEW "AT A GLANCE" REFINEMENTS
   ============================================ */

/* Make the "At a Glance" section feel premium */
.overview-glance-title {
  letter-spacing: -0.02em;
}

/* ============================================
   10. GENERAL POLISH
   ============================================ */

/* Smoother scrolling */
.app-main,
.content,
.sidebar-nav {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: rgba(0, 181, 119, 0.15);
  color: var(--text-main);
}

/* Tooltip-style hover for legend items */
.legend-item {
  transition: opacity 0.2s ease;
  cursor: default;
}

.chart-legend:hover .legend-item {
  opacity: 0.6;
}

.chart-legend:hover .legend-item:hover {
  opacity: 1;
}

/* Table row hover — smoother */
.planner-table tbody tr {
  transition: background 0.15s ease;
}

/* Modal backdrop — smoother */
.modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Toast notifications — slide in from right */
.toast {
  animation: toastSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Form section titles — refined */
.form-section-title {
  letter-spacing: -0.01em;
}

/* ============================================
   11. DARK MODE POLISH OVERRIDES
   ============================================ */

[data-theme="dark"] .sidebar,
[data-theme="dark"] .app-sidebar {
  background: linear-gradient(180deg, #1a2332 0%, #151d2b 50%, #111827 100%);
}

[data-theme="dark"] .stat-card {
  border-top: 2.5px solid var(--primary);
}

[data-theme="dark"] .stat-card::before {
  background: linear-gradient(180deg, rgba(0,181,119,0.06) 0%, transparent 100%);
}

[data-theme="dark"] .stat-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,181,119,0.1);
}

[data-theme="dark"] .chart-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

[data-theme="dark"] .nav-item.active {
  background: rgba(0, 181, 119, 0.15);
}

[data-theme="dark"] .guidance-item:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

[data-theme="dark"] .sidebar-tip {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

/* ============================================
   12. LIGHT THEME POLISH OVERRIDES
   ============================================ */

[data-theme="light"] .sidebar,
[data-theme="light"] .app-sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border-subtle);
}

[data-theme="light"] .nav-item.active {
  background: rgba(0, 181, 119, 0.08);
  color: var(--primary-dark);
  border-left: 3px solid var(--primary);
  padding-left: calc(var(--sp-3) - 3px);
  box-shadow: none;
}

[data-theme="light"] .nav-item:hover {
  background: rgba(0,0,0,0.03);
}

[data-theme="light"] .sidebar-tip {
  background: linear-gradient(135deg, #f0fdf9, #ffffff);
  border: 1px solid var(--border-subtle);
}

/* ============================================
   13. SCROLLBAR REFINEMENT
   ============================================ */

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}

/* ============================================
   14. AI ASSISTANT MODAL POLISH
   ============================================ */

/* Smoother modal entrance */
.ai-modal-content {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Conversation list — smoother interactions */
.ai-pane-left .conversation-item,
.ai-pane-left [class*="conversation"] {
  border-radius: var(--radius-lg);
  transition: background 0.15s ease;
}

/* Chat input area — refined */
.ai-pane-center .chat-input,
.ai-modal-content .chat-input {
  border-radius: var(--radius-xl);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-pane-center .chat-input:focus,
.ai-modal-content .chat-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,181,119,0.1);
}

/* User message bubble — refined */
.chat-message.user {
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius) var(--radius-xl);
}

/* Assistant message — subtle left accent */
.chat-message.assistant {
  border-radius: var(--radius-xl);
}

/* Send button */
.chat-send-btn,
.ai-modal-content [class*="send"] {
  transition: all 0.2s ease;
}

.chat-send-btn:hover,
.ai-modal-content [class*="send"]:hover {
  transform: scale(1.05);
}

/* New chat button */
.ai-pane-left .new-chat-btn,
.ai-pane-left [class*="new-chat"] {
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

/* Search input in sidebar */
.ai-pane-left input[type="text"],
.ai-pane-left input[type="search"] {
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-pane-left input[type="text"]:focus,
.ai-pane-left input[type="search"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,181,119,0.1);
}

/* ============================================
   UX Improvements — Wave 1 & 2
   ============================================ */

/* Save indicator — shows briefly after auto-save (in header-right) */
.save-indicator {
  font-size: var(--text-xs, 11px);
  font-weight: var(--fw-medium, 500);
  color: var(--success, #15803d);
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
  align-self: center;
  margin-right: var(--sp-2, 6px);
}
.save-indicator.visible {
  opacity: 1;
}
[data-theme="dark"] .save-indicator {
  color: #4ade80;
}

/* Plan Settings intro hint */
.settings-intro-hint {
  font-size: var(--text-sm, 13px);
  color: var(--text-muted);
  background: var(--bg-secondary, rgba(0,0,0,0.03));
  border-left: 3px solid var(--primary, #00b577);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  padding: var(--sp-3, 10px) var(--sp-4, 14px);
  margin-bottom: var(--sp-5, 20px);
  line-height: 1.5;
}

/* Run button CSS tooltip — appears on hover, clearly attached to the button */
.btn-optimize[data-tooltip] {
  position: relative;
}
.btn-optimize[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a202c;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  padding: 7px 11px;
  border-radius: 6px;
  width: max-content;
  max-width: 240px;
  white-space: normal;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* Small downward arrow */
.btn-optimize[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a202c;
  z-index: 201;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.btn-optimize[data-tooltip]:hover::after,
.btn-optimize[data-tooltip]:hover::before {
  opacity: 1;
}
[data-theme="dark"] .btn-optimize[data-tooltip]::after {
  background: #0d1117;
  color: #6ee7b7;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,181,119,0.2);
}
[data-theme="dark"] .btn-optimize[data-tooltip]::before {
  border-top-color: #0d1117;
}

.run-analysis-hint {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted, #9ca3af);
  line-height: 1.4;
}

/* ============================================
   UX Improvements — Wave 3
   ============================================ */

/* ── What's Next card (post-onboarding, Overview page) ── */
.overview-whats-next-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: var(--sp-4, 16px);
  margin-bottom: var(--sp-4, 16px);
  box-shadow: var(--shadow-sm);
}

.whats-next-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-4, 16px);
}

.whats-next-icon {
  font-size: 1.6rem;
  color: var(--primary, #00b577);
  flex-shrink: 0;
}

.whats-next-title {
  font-size: var(--text-base, 15px);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-main);
  margin: 0 0 2px;
  line-height: 1.3;
}

.whats-next-subtitle {
  font-size: var(--text-xs, 12px);
  color: var(--text-muted);
  margin: 0;
}

.whats-next-primary {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  width: 100%;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--primary, #00b577);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-base);
  margin-bottom: var(--sp-3, 12px);
}
.whats-next-primary:hover {
  background: var(--primary-dark, #059669);
}
.whats-next-primary .material-symbols-outlined:first-child {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.whats-next-primary .material-symbols-outlined:last-child {
  font-size: 1.1rem;
  margin-left: auto;
  flex-shrink: 0;
}
.whats-next-cta-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.whats-next-cta-label {
  font-size: var(--text-sm, 13px);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.3;
}
.whats-next-cta-sub {
  font-size: var(--text-xs, 11px);
  opacity: 0.85;
  margin-top: 2px;
}

.whats-next-secondary-row {
  display: flex;
  gap: var(--sp-2, 8px);
}
.whats-next-btn-secondary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2, 6px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  background: var(--bg-secondary, rgba(0,0,0,0.04));
  color: var(--text-main);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-xs, 12px);
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.whats-next-btn-secondary:hover {
  background: var(--bg-hover, rgba(0,0,0,0.07));
  border-color: var(--primary, #00b577);
  color: var(--primary, #00b577);
}
.whats-next-btn-secondary .material-symbols-outlined {
  font-size: 1rem;
}

/* ── MFJ Guidance Prompt (shown only when onboarding is already complete) ── */
.mfj-guidance-prompt {
  /* Position on the left to avoid overlap with onboarding panel (bottom-right) */
  right: auto;
  left: 24px;
}
.mfj-guidance-sub {
  font-size: var(--text-xs, 12px);
  color: var(--text-muted);
  margin: 4px 0 10px;
}
.mfj-guidance-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mfj-guidance-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm, 6px);
  transition: background var(--transition-base);
}
.mfj-guidance-step:not(.done):hover {
  background: var(--surface-hover, rgba(0,0,0,0.05));
}
.mfj-step-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  color: var(--text-muted);
}
.mfj-guidance-step.done .mfj-step-icon {
  color: var(--primary, #00b577);
}
.mfj-step-label {
  font-size: var(--text-sm, 13px);
  flex: 1;
  color: var(--text-main);
}
.mfj-guidance-step.done .mfj-step-label {
  color: var(--primary, #00b577);
}
.mfj-step-arrow {
  font-size: 1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Floating Onboarding Panel ── */
.onboarding-floating-panel {
  width: 310px;
}

.onboarding-panel-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-3, 12px);
  padding-right: var(--sp-5, 20px);
}

.onboarding-panel-info-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--text-muted, #9ca3af);
  display: flex;
  align-items: center;
}
.onboarding-panel-info-btn:hover {
  color: var(--primary, #00b577);
}
.onboarding-panel-info-btn .material-symbols-outlined {
  font-size: 1.1rem;
}

.onboarding-panel-icon {
  font-size: 1.4rem;
  color: var(--primary, #00b577);
  flex-shrink: 0;
  background: rgba(0, 181, 119, 0.1);
  border-radius: 8px;
  padding: 6px;
}

.onboarding-panel-title {
  font-size: 14px;
  font-weight: var(--fw-semibold, 600);
  color: var(--text-main);
  line-height: 1.3;
}

.onboarding-panel-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.onboarding-panel-steps {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.onboarding-panel-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2, 8px);
  padding: 7px var(--sp-2, 8px);
  border-radius: var(--radius, 6px);
  cursor: pointer;
  transition: background var(--transition-base);
}

.onboarding-panel-step:hover {
  background: rgba(0, 181, 119, 0.06);
}

.onboarding-panel-step.done {
  cursor: pointer;
}

.onboarding-panel-step-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  color: var(--text-muted);
  margin-top: 2px;
}

.onboarding-panel-step.done .onboarding-panel-step-icon {
  color: var(--primary, #00b577);
}

.onboarding-panel-step-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.onboarding-panel-step-label {
  font-size: var(--text-sm, 13px);
  font-weight: var(--fw-medium, 500);
  color: var(--text-main);
  line-height: 1.3;
}

.onboarding-panel-step.done .onboarding-panel-step-label {
  font-weight: var(--fw-normal, 400);
}

.onboarding-panel-step-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
  line-height: 1.3;
}

.onboarding-panel-step-arrow {
  font-size: 1rem;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.onboarding-step-optional-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--fw-medium, 500);
  color: var(--text-muted);
  background: var(--bg-secondary, rgba(0,0,0,0.05));
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.02em;
}

.onboarding-panel-step.optional .onboarding-panel-step-icon {
  opacity: 0.6;
}
.onboarding-panel-step.optional .onboarding-panel-step-desc {
  opacity: 0.75;
}

/* ── Accordion Phase Blocks ── */
.onboarding-phase-block {
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

.onboarding-phase-block:first-child {
  border-top: none;
}

.onboarding-phase-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px var(--sp-2, 8px) 6px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-base);
}

.onboarding-phase-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

.onboarding-phase-label {
  font-size: 10px;
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  flex: 1;
}

.phase-accordion-chevron {
  font-size: 1rem;
  color: var(--text-muted);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.phase-accordion-chevron.open {
  transform: rotate(180deg);
}

/* Green checkmark icon on completed phase headers */
.phase-checkmark {
  font-size: 0.95rem;
  color: var(--primary);
  flex-shrink: 0;
}


.onboarding-phase-body {
  display: none;
  overflow: hidden;
}

.onboarding-phase-body.expanded {
  display: block;
}

/* Sub-header within a phase body (e.g. "Spouse Details") */
.onboarding-phase-subheader {
  font-size: 10px;
  font-weight: var(--fw-semibold, 600);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 6px var(--sp-2, 8px) 2px;
  margin-top: 2px;
  border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
}

/* Active phase header — green label + left accent + pulse */
.onboarding-phase-block.active-phase > .onboarding-phase-header {
  background: rgba(0, 181, 119, 0.06);
  border-left: 3px solid var(--primary);
  padding-left: calc(var(--sp-2, 8px) - 3px);
  animation: phase-pulse 0.8s ease-out 1;
}

.onboarding-phase-block.active-phase > .onboarding-phase-header .onboarding-phase-label {
  color: var(--primary);
}

.onboarding-phase-block.active-phase > .onboarding-phase-header .phase-accordion-chevron {
  color: var(--primary);
}

@keyframes phase-pulse {
  0%   { background: rgba(0, 181, 119, 0.18); }
  100% { background: rgba(0, 181, 119, 0.06); }
}

/* Completed phase header — muted label, checkmark visible */
.onboarding-phase-block.done-phase > .onboarding-phase-header .onboarding-phase-label {
  color: var(--text-muted);
}

/* ── Action rows (no completion circle, always-arrow) ── */
.onboarding-panel-action {
  cursor: pointer;
}
.onboarding-panel-action .onboarding-panel-step-label {
  color: var(--text-main);
  font-weight: var(--fw-medium, 500);
}

/* ── Header Guide Button (always visible) ── */
.btn-resume-guide {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: #2D3748;
  color: #fff;
  border: 1px solid #2D3748;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-base);
  font-family: inherit;
  margin-right: 4px;
}
.btn-resume-guide:hover {
  background: #4A5568;
  border-color: #4A5568;
  box-shadow: var(--shadow-card-hover);
}
.btn-resume-guide .material-symbols-outlined {
  font-size: 18px;
  color: var(--primary);
}
.btn-resume-guide span:not(.material-symbols-outlined) {
  color: #00c988;
}
[data-theme="dark"] .btn-resume-guide {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-main);
}
[data-theme="dark"] .btn-resume-guide:hover {
  background: var(--border-subtle);
  border-color: var(--border-subtle);
  color: var(--text-main);
  box-shadow: none;
}
[data-theme="dark"] .btn-resume-guide span:not(.material-symbols-outlined),
[data-theme="dark"] .btn-resume-guide .material-symbols-outlined {
  color: #34d399;
}

/* ── Header Resume Onboarding Button ── */
.btn-resume-onboarding {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  background: rgba(0, 181, 119, 0.08);
  color: var(--primary-dark, #059669);
  border: 1.5px solid rgba(0, 181, 119, 0.35);
  border-radius: 20px;
  font-size: 12px;
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  font-family: inherit;
  margin-right: 8px;
}
.btn-resume-onboarding:hover {
  background: var(--primary, #00b577);
  border-color: var(--primary, #00b577);
  color: #fff;
}
.btn-resume-onboarding .material-symbols-outlined {
  font-size: 13px;
  color: var(--primary, #00b577);
  transition: color var(--transition-base);
}
.btn-resume-onboarding:hover .material-symbols-outlined {
  color: #fff;
}
[data-theme="dark"] .btn-resume-onboarding {
  background: rgba(0, 181, 119, 0.12);
  color: #6ee7b7;
  border-color: rgba(0, 181, 119, 0.35);
}
[data-theme="dark"] .btn-resume-onboarding .material-symbols-outlined {
  color: #6ee7b7;
}
[data-theme="dark"] .btn-resume-onboarding:hover {
  background: rgba(0, 181, 119, 0.3);
  color: #fff;
  border-color: var(--primary, #00b577);
}
[data-theme="dark"] .btn-resume-onboarding:hover .material-symbols-outlined {
  color: #fff;
}

/* ── What's Next Modal ── */
.whats-next-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4, 16px);
}

.whats-next-modal {
  background: var(--surface-card, #fff);
  border-radius: var(--radius-xl, 16px);
  padding: var(--sp-6, 24px);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.whats-next-modal-close {
  position: absolute;
  top: var(--sp-3, 12px);
  right: var(--sp-3, 12px);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--radius, 6px);
  display: flex;
  align-items: center;
  transition: color var(--transition-base);
}
.whats-next-modal-close:hover { color: var(--text-main); }

.whats-next-modal-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-4, 16px);
  padding-right: var(--sp-5, 20px);
}

.whats-next-modal-icon {
  font-size: 2rem;
  color: var(--primary, #00b577);
  flex-shrink: 0;
}

.whats-next-modal-title {
  font-size: var(--text-lg, 18px);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-main);
  margin: 0;
  line-height: 1.3;
}

.whats-next-modal-intro {
  font-size: var(--text-sm, 13px);
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4, 16px);
}

.whats-next-section-title {
  font-size: var(--text-sm, 13px);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-main);
  margin: 0 0 var(--sp-2, 8px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.whats-next-features-list,
.whats-next-steps-list {
  margin: 0 0 var(--sp-4, 16px);
  padding-left: var(--sp-4, 16px);
}

.whats-next-features-list li,
.whats-next-steps-list li {
  font-size: var(--text-sm, 13px);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--sp-2, 8px);
}

.whats-next-step-highlight {
  background: rgba(0, 181, 119, 0.06);
  border: 1px solid rgba(0, 181, 119, 0.2);
  border-radius: var(--radius, 6px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  list-style: none;
  margin-left: calc(-1 * var(--sp-4, 16px));
}

.whats-next-modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  margin-top: var(--sp-4, 16px);
  padding-top: 0;
}

.whats-next-modal-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2, 8px);
  width: 100%;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--primary, #00b577);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 13px);
  font-weight: var(--fw-semibold, 600);
  cursor: pointer;
  transition: background var(--transition-base);
  font-family: inherit;
}
.whats-next-modal-cta:hover { background: var(--primary-dark, #059669); }
.whats-next-modal-cta .material-symbols-outlined { font-size: 1.1rem; }

.whats-next-modal-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-xs, 12px);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  padding: var(--sp-1, 4px);
  transition: color var(--transition-base);
}
.whats-next-modal-dismiss:hover { color: var(--text-main); }

/* ── Next Steps Accordion (Overview page) ── */
.overview-next-steps-accordion {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  margin-bottom: var(--sp-4, 16px);
  overflow: hidden;
}

.overview-next-steps-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  width: 100%;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--bg-secondary, rgba(0,0,0,0.02));
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--transition-base);
}
.overview-next-steps-toggle:hover {
  background: var(--bg-hover, rgba(0,0,0,0.05));
}

.overview-next-steps-icon {
  font-size: 1rem;
  color: var(--primary, #00b577);
  flex-shrink: 0;
}

.overview-next-steps-label {
  flex: 1;
  font-size: var(--text-sm, 13px);
  font-weight: var(--fw-medium, 500);
  color: var(--text-main);
}

.overview-next-steps-chevron {
  font-size: 1.1rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.overview-next-steps-toggle[aria-expanded="true"] .overview-next-steps-chevron {
  transform: rotate(180deg);
}

.overview-next-steps-body {
  padding: var(--sp-4, 16px);
  border-top: 1px solid var(--border-subtle);
}

.next-steps-intro {
  font-size: var(--text-sm, 13px);
  color: var(--text-secondary);
  margin: 0 0 var(--sp-3, 12px);
}

.next-steps-section-label {
  font-size: var(--text-xs, 12px);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--sp-3, 12px) 0 var(--sp-2, 8px);
}

.next-steps-features-list {
  margin: 0 0 var(--sp-3, 12px);
  padding-left: var(--sp-4, 16px);
}

.next-steps-features-list li {
  font-size: var(--text-sm, 13px);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--sp-2, 8px);
}

.next-steps-list {
  margin: 0 0 var(--sp-4, 16px);
  padding-left: var(--sp-4, 16px);
}

.next-steps-list li {
  font-size: var(--text-sm, 13px);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--sp-2, 8px);
}

.next-steps-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2, 8px);
  width: 100%;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  background: var(--primary, #00b577);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 13px);
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  transition: background var(--transition-base);
  font-family: inherit;
}
.next-steps-cta:hover { background: var(--primary-dark, #059669); }
.next-steps-cta .material-symbols-outlined { font-size: 1rem; }

/* ── Optimizer Callout (modal + accordion) ───────────────────────────────── */
.optimizer-callout {
  background: linear-gradient(135deg, rgba(0,181,119,0.08) 0%, rgba(0,181,119,0.04) 100%);
  border: 1.5px solid rgba(0,181,119,0.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 20px 0 16px;
}
.optimizer-callout-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.optimizer-callout-icon {
  font-size: 1.1rem;
  color: var(--primary, #00b577);
}
.optimizer-callout-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary, #00b577);
}
.optimizer-callout-body {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary, #4B5563);
  margin: 0;
}

/* Monthly Estimates section — green left accent matching account-card style */
.monthly-estimates-section {
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  border-radius: var(--radius-xl);
}
.monthly-estimates-section .form-section-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-main);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── FAQ Page ─────────────────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 780px;
  padding: var(--sp-4) 0 var(--sp-8);
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5) var(--sp-6);
}

.faq-question {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.faq-icon {
  font-size: 20px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.faq-question h3 {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--text-main);
  margin: 0;
  line-height: 1.4;
}

.faq-answer {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  padding-left: calc(20px + var(--sp-3)); /* align with text after icon */
}