:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #dbe1ea;
  --accent: #1d4ed8;
  --accent-soft: #dbeafe;
  --good: #166534;
  --bad: #991b1b;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); }
header { background:#0f172a; color:#fff; position:static; z-index:20; box-shadow:0 4px 18px rgba(15,23,42,.18); }
.header-inner {
  max-width:1380px;
  margin:0 auto;
  padding:10px 16px 12px;
  display:grid;
  grid-template-columns:minmax(190px,240px) 1fr auto;
  grid-template-areas:
    "brand nav anon"
    "brand controls controls";
  gap:8px 16px;
  align-items:start;
}
.brand-block { grid-area:brand; min-width:0; max-width:320px; }
.brand-link { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.site-logo { width:88px; height:auto; display:block; border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.22); background:rgba(255,255,255,.08); }
.brand-text { min-width:0; }
.brand { font-size:1.05rem; font-weight:700; line-height:1.2; }
.subbrand { font-size:.78rem; color:#cbd5e1; margin-top:4px; line-height:1.28; max-width:30ch; }
.nav { grid-area:nav; display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.nav button { background:transparent; border:1px solid rgba(255,255,255,.18); color:#fff; border-radius:999px; padding:5px 10px; cursor:pointer; font-size:.95rem; line-height:1.1; }
.nav button.active { background:#fff; color:#0f172a; }
.header-controls {
  grid-area:controls;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 14px;
  align-items:center;
  min-width:0;
}
.scenario-controls, .session-controls { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.scenario-controls { flex:1 1 520px; }
.mode-controls { flex:0 0 auto; }
.session-controls { margin-left:auto; justify-content:flex-end; }
.scenario-controls select { min-width:210px; max-width:260px; }
.subtle-label { color:#cbd5e1; font-size:.82rem; }
.user-email { color:#e5e7eb; font-size:.92rem; }
.status-pill { padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.12); color:#e5e7eb; font-size:.82rem; min-width:84px; text-align:center; }
.status-pill.error { background:#7f1d1d; color:#fff; }
#anon-status { grid-area:anon; justify-self:end; align-self:start; }
.hidden { display:none !important; }
main { max-width:1380px; margin:0 auto; padding:16px; display:grid; gap:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 8px 20px rgba(15,23,42,.04); }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:16px; }
.metric-label { color:var(--muted); font-size:.9rem; }
.metric-value { font-size:1.65rem; font-weight:700; margin-top:6px; }
.muted { color:var(--muted); }
.pill { display:inline-block; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:#1e40af; font-size:.82rem; margin-bottom:10px; }
.callout { border-left:4px solid var(--accent); background:#eff6ff; padding:12px 14px; border-radius:0 12px 12px 0; }
.section-title { margin:0 0 14px 0; }
.card h1, .card h2, .card h3 { margin:0 0 14px 0; line-height:1.3; }
p, ol { margin-top:0; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.toolbar button, .toolbar label.buttonish, .action-btn, button, label.buttonish {
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  text-decoration:none;
  display:inline-block;
}
.secondary { background:#fff !important; color:var(--text) !important; border:1px solid var(--line) !important; }
.small-btn { padding:7px 11px; font-size:.9rem; }
.table-wrap { overflow:auto; max-width:100%; max-height:62vh; margin-top:12px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.table-wrap table { min-width:0; }
.table-wrap.wide-table table { min-width:760px; }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#f8fafc; font-size:.92rem; position:sticky; top:0; z-index:2; box-shadow:inset 0 -1px 0 var(--line); }
input, select, textarea, button { font:inherit; }
input[type='text'], input[type='number'], input[type='date'], input[type='email'], input[type='password'], select, textarea {
  width:100%; padding:8px 10px; border-radius:10px; border:1px solid #cbd5e1; background:#fff;
}
textarea { min-height:80px; }
.grid-2 { display:grid; gap:16px; grid-template-columns: 1.1fr .9fr; }
.auth-grid { display:grid; gap:16px; grid-template-columns: 1.2fr .9fr .9fr; }
.auth-card { min-height: 100%; }
.stack-form { display:grid; gap:12px; }
.stack-form label { display:grid; gap:6px; font-weight:600; }
.section { display:none; gap:18px; }
.section.active { display:grid; }
.small { font-size:.9rem; }
.footer-note { margin-top:12px; color:var(--muted); font-size:.9rem; line-height:1.45; }
.right { text-align:right; }
.positive { color:var(--good); }
.negative { color:var(--bad); }
.spacer { height:6px; }
@media (max-width: 1180px) {
  .site-logo { width:76px; }
  .header-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "anon"
      "nav"
      "controls";
  }
  #anon-status { justify-self:start; }
  .header-controls { justify-content:flex-start; }
  .session-controls { margin-left:0; }
  .auth-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .grid-2 { grid-template-columns: 1fr; }
  .brand-link { align-items:flex-start; }
  .site-logo { width:68px; }
  .table-wrap { max-height:50vh; }
  .header-inner { padding:10px 12px 12px; gap:8px 12px; }
  .nav button { font-size:.9rem; padding:5px 9px; }
  .scenario-controls select { min-width:180px; max-width:none; }
}

.auth-grid-production { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.footer-note a { color: var(--accent); }

.auth-grid-reset { grid-template-columns: minmax(320px, 640px); justify-content: center; }
.reset-page-card { max-width: 640px; width: 100%; justify-self: center; }

.table-toolbar { justify-content: space-between; }
.table-toolbar h2 { margin-bottom: 0; }

.choice-row { display:flex !important; align-items:center; gap:10px; font-weight:600; }
.choice-row input[type="radio"], .choice-row input[type="checkbox"] { width:auto; margin:0; }
.two-col-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#twofactor-card .toolbar { margin-top: 4px; }

.summary-row td { background:#f8fafc; font-weight:700; position:sticky; bottom:0; z-index:1; box-shadow:inset 0 1px 0 var(--line); }
.summary-label { text-align:right; color:var(--muted); }
.inline-note { margin-top:8px; }
.inline-note.error-text { color:var(--bad); }

.mode-controls { display:flex; align-items:center; gap:8px; }
.segmented { display:inline-flex; background:rgba(255,255,255,.08); border-radius:999px; padding:3px; gap:4px; }
.segmented button { background:transparent; border:0; color:#fff; border-radius:999px; padding:6px 12px; }
.segmented button.active { background:#fff; color:#0f172a; }
.advanced-only.hidden-by-mode { display:none !important; }
.simple-only.hidden-by-mode { display:none !important; }
.helper-text { color:var(--muted); font-size:.88rem; line-height:1.45; margin-top:6px; }
.helper-chip { display:inline-block; font-size:.78rem; background:#eef2ff; color:#3730a3; border-radius:999px; padding:3px 8px; margin-left:8px; }
.warning-list, .action-list, .check-list { margin:0; padding-left:18px; line-height:1.6; }
.warning-list li { color:var(--bad); }
.check-list li.good { color:var(--good); }
.hero-grid { display:grid; gap:16px; grid-template-columns: 1.15fr .85fr; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.section-kicker { text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:#475569; margin-bottom:8px; }
.empty-state { border:1px dashed #cbd5e1; border-radius:14px; padding:18px; background:#f8fafc; }
.summary-grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.summary-box { border:1px solid var(--line); border-radius:14px; padding:14px; background:#f8fafc; }
.summary-box h3 { margin-bottom:10px; }
.wizard-shell { display:grid; gap:18px; }
.wizard-progress { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:10px; }
.wizard-step { border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff; color:var(--text); width:100%; text-align:left; }
.wizard-step.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(29,78,216,.08); }
.wizard-step.done { background:#f0fdf4; border-color:#86efac; }
.wizard-step-title { font-weight:700; margin-bottom:4px; }
.wizard-nav { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; }
.kpi-strip { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi-strip .summary-box { background:#fff; }
.table-note-row td { background:#fcfcfd; color:var(--muted); font-size:.85rem; }
.actions-col { white-space:nowrap; width:140px; }
.icon-btn-row { display:flex; gap:6px; }
.icon-btn { min-width:34px; padding:7px 9px; }
.warning-card { border-left:4px solid #f59e0b; }
.good-card { border-left:4px solid #16a34a; }
.bad-card { border-left:4px solid #dc2626; }
.print-only { display:none; }
.subcard-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.info-definition { display:grid; gap:8px; }
.info-definition div { display:flex; justify-content:space-between; gap:16px; border-bottom:1px dashed var(--line); padding-bottom:6px; }
.status-inline { font-weight:700; }
.page-anchor-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.page-anchor-links button { background:#fff; color:var(--text); border:1px solid var(--line); }
.first-year-action { font-size:1.05rem; font-weight:700; }
.section-tabs-mini { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.section-tabs-mini button { background:#fff; color:var(--text); border:1px solid var(--line); }
.section-tabs-mini button.active { background:var(--accent-soft); color:#1e40af; }
.warning-pill { display:inline-block; padding:4px 8px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:.82rem; }
.good-pill { display:inline-block; padding:4px 8px; border-radius:999px; background:#dcfce7; color:#166534; font-size:.82rem; }
@media print {
  header, #auth, #reset-page, #wizard, #cashflow, #review, #overrides, #holdings, #projection, #account, #settings, .hero-actions, .page-anchor-links, .toolbar, .mode-controls, .scenario-controls, .session-controls, .helper-chip { display:none !important; }
  body { background:#fff; }
  main { max-width:none; padding:0; }
  #summary.section.active, #summary { display:block !important; }
  .card, .summary-box { box-shadow:none; border:1px solid #ddd; break-inside:avoid; }
  .print-only { display:block; }
}

.auth-card .toolbar { margin-top: 10px; }
.auth-logo { display:block; width:min(280px, 100%); height:auto; margin:0 0 14px; border-radius:18px; box-shadow:0 8px 20px rgba(15,23,42,.08); }
.footer-note.success-text { color: var(--good); }
.footer-note.error-text { color: var(--bad); }


.account-scenario-controls { margin-top: 12px; gap: 10px; }
.account-scenario-controls .subtle-label { color: var(--muted); }
.account-scenario-controls select { min-width: 260px; }

.site-footer { max-width:1380px; margin:0 auto 24px; padding:0 20px; color:var(--muted); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.9rem; }
.site-footer a { color:var(--accent); text-decoration:none; }


.account-scenario-controls { gap:10px; align-items:flex-end; }
.account-backup-toolbar { margin-top:10px; }
.compact-settings-box .info-definition span { min-width: 0; }
.mobile-form-list { display:grid; gap:12px; margin-top:12px; }
.mobile-edit-card { border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff; }
.mobile-edit-card-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.mobile-edit-grid { display:grid; gap:10px; grid-template-columns:1fr; }
.mobile-edit-row { display:grid !important; gap:6px; font-weight:600; }
.mobile-edit-label { color:var(--muted); font-size:.85rem; font-weight:600; }
.compact-definition { gap:6px; }
.compact-definition div { padding-bottom:4px; }

@media (max-width: 900px) {
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .nav button { flex: 0 0 auto; }
  .header-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .mode-controls, .session-controls, .scenario-controls { width:100%; }
  .session-controls { justify-content:space-between; }
  .hero-grid { grid-template-columns:1fr; }
  .wizard-nav { justify-content:flex-start; }
}

@media (max-width: 768px) {
  main { padding:12px; gap:14px; }
  .card { padding:14px; border-radius:16px; }
  .cards, .summary-grid, .subcard-grid, .kpi-strip, .wizard-progress, .two-col-grid { grid-template-columns:1fr; }
  .toolbar { align-items:stretch; }
  .toolbar button, .toolbar label.buttonish, .action-btn, button, label.buttonish { width:100%; text-align:center; }
  .icon-btn-row { flex-wrap:wrap; }
  .icon-btn-row .icon-btn, .icon-btn-row .small-btn { width:auto; }
  .table-wrap { max-height:none; }
  .table-wrap:not(.wide-table) { overflow-x:visible; }
  .table-wrap:not(.wide-table) table { min-width:0; }
  .table-wrap.wide-table { overflow-x:auto; }
  .info-definition div { flex-direction:column; gap:4px; }
  .page-anchor-links { flex-direction:column; }
  .page-anchor-links button { width:100%; }
  .metric-value { font-size:1.4rem; }
  .subbrand { max-width:none; }
}


/* Step 4 mobile polish: CSS-only to avoid auth/render regressions */
@media (max-width: 1024px) {
  .header-inner {
    padding: 8px 12px 10px;
    gap: 8px 12px;
  }
  .brand-block { max-width: none; }
  .brand-link { gap: 10px; }
  .site-logo { width: 62px; border-radius: 12px; }
  .subbrand { font-size: .74rem; max-width: none; }
  .nav { gap: 5px; }
  .nav button { padding: 5px 9px; font-size: .88rem; }
  .status-pill { min-width: 72px; }
  .table-wrap.wide-table table { min-width: 680px; }
  th, td { padding: 8px 10px; }
}

@media (max-width: 640px) {
  .header-inner { padding: 8px 10px 10px; }
  .site-logo { width: 52px; }
  .brand { font-size: .98rem; }
  .subbrand { display: none; }
  .nav button { padding: 5px 8px; font-size: .84rem; }
  main { padding: 10px; gap: 12px; }
  .card { padding: 12px; }
  .metric-value { font-size: 1.28rem; }
  th, td { padding: 7px 8px; font-size: .88rem; }
  .table-wrap.wide-table table { min-width: 620px; }
  .site-footer { padding: 0 12px; font-size: .82rem; }
}