:root {
      --sage: #83ae62;
      --sage-dark: #4a6f3c;
      --sage-soft: #eef6e9;
      --ink: #111827;
      --charcoal: #363636;
      --muted: #667085;
      --line: #dce5d6;
      --paper: #ffffff;
      --wash: #f8fafc;
      --blue: #315f8f;
      --shadow: 0 24px 60px rgba(17, 24, 39, 0.08);
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--wash);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    button, input, select { font: inherit; }
    button { cursor: pointer; }

    .page {
      min-height: 100vh;
      padding: 58px 0;
      background: linear-gradient(180deg, #ffffff 0, #f8fafc 430px), var(--wash);
    }
    .hero, .tool, .report {
      width: min(1280px, calc(100% - 40px));
      margin: 0 auto;
    }
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, 520px);
      gap: 32px;
      align-items: end;
      padding-bottom: 42px;
    }
    .pill {
      display: inline-flex;
      margin: 0 0 16px;
      padding: 8px 14px;
      border-radius: 999px;
      color: var(--sage-dark);
      background: var(--sage-soft);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .eyebrow {
      margin: 0 0 6px;
      color: var(--sage-dark);
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: 780px;
      margin-bottom: 0;
      font-size: clamp(2.5rem, 6vw, 5.2rem);
      line-height: 0.95;
      letter-spacing: 0;
    }
    h1 span { color: var(--sage); }
    .hero > p {
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 1.08rem;
      line-height: 1.65;
    }

    .tool {
      display: grid;
      grid-template-columns: minmax(340px, 470px) 1fr;
      gap: 26px;
      align-items: start;
    }
    .inputs, .results, .report {
      border: 1px solid var(--line);
      background: var(--paper);
      box-shadow: var(--shadow);
    }
    .inputs {
      position: sticky;
      top: 24px;
      display: grid;
      gap: 22px;
      padding: 28px;
      border-radius: 30px;
    }
    .panel-title, .results-head, .report-head, .report-top {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: start;
    }
    .panel-title h2, .results-head h2, .report-head h2 {
      margin: 0;
      font-size: 1.55rem;
      line-height: 1.1;
    }
    fieldset {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 18px 0 0;
      border: 0;
      border-top: 1px solid var(--line);
    }
    legend {
      padding: 0;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    label, .mode-field {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    label span, .mode-field span, .tax-deduction-block > span {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .label-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
    }
    .field-link {
      padding: 0;
      border: 0;
      color: var(--sage-dark);
      background: transparent;
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    input, select {
      width: 100%;
      min-height: 46px;
      padding: 11px 13px;
      border: 1px solid var(--line);
      border-radius: 14px;
      color: var(--ink);
      background: #ffffff;
    }
    input:focus, select:focus {
      outline: 3px solid rgba(131, 174, 98, 0.18);
      border-color: var(--sage);
    }
    .is-hidden { display: none !important; }
    .mode-field { grid-column: 1 / -1; }
    .mode {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--wash);
    }
    .mode button {
      min-height: 40px;
      border: 0;
      border-radius: 14px;
      color: var(--muted);
      background: transparent;
      font-weight: 800;
    }
    .mode button.active {
      color: #ffffff;
      background: var(--sage);
      box-shadow: 0 8px 18px rgba(74, 111, 60, 0.22);
    }
    .modal-backdrop {
      position: fixed;
      z-index: 20;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 28px;
      background: rgba(17, 24, 39, 0.52);
    }
    .tax-modal {
      display: grid;
      gap: 18px;
      width: min(1120px, 100%);
      max-height: min(900px, calc(100vh - 56px));
      overflow: auto;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 26px;
      background: #ffffff;
      box-shadow: 0 34px 90px rgba(17, 24, 39, 0.24);
    }
    .tax-modal-head, .tax-modal-actions {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }
    .tax-modal-head h2 {
      margin: 0;
      font-size: 1.8rem;
      line-height: 1.05;
    }
    .icon-button {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink);
      background: var(--wash);
      font-weight: 900;
    }
    .tax-modal-grid {
      display: grid;
      grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
      gap: 16px;
      align-items: start;
    }
    .tax-form-panel, .tax-output-panel, .tax-bracket-panel {
      display: grid;
      gap: 16px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--wash);
    }
    .tax-deduction-block {
      display: grid;
      gap: 10px;
    }
    .tax-checkbox-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .tax-checkbox-grid label {
      display: flex;
      min-height: 42px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #ffffff;
      color: var(--ink);
      font-weight: 800;
      align-items: center;
    }
    .tax-checkbox-grid input {
      width: auto;
      min-height: auto;
      margin: 0 8px 0 0;
    }
    .tax-stat-grid, .tax-comparison-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .tax-stat-grid article, .tax-comparison-grid article {
      display: grid;
      gap: 6px;
      min-height: 92px;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
      align-content: center;
    }
    .tax-stat-grid article:first-child {
      color: #ffffff;
      background: var(--charcoal);
      border-color: var(--charcoal);
    }
    .tax-stat-grid article:first-child span,
    .tax-stat-grid article:first-child strong {
      color: #ffffff;
    }
    .tax-stat-grid span, .tax-comparison-grid span {
      color: var(--muted);
      font-size: 0.7rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .tax-stat-grid strong {
      font-size: 1.65rem;
      line-height: 1;
    }
    .tax-comparison-grid strong {
      font-size: 1.15rem;
      line-height: 1.1;
    }
    .tax-bracket-panel {
      background: #ffffff;
    }
    .tax-bracket-table {
      font-size: 0.82rem;
    }
    .tax-modal-actions {
      justify-content: flex-end;
    }
    .tax-modal-actions button {
      min-height: 44px;
      padding: 0 18px;
      border: 0;
      border-radius: 999px;
      color: #ffffff;
      background: var(--charcoal);
      font-weight: 900;
    }
    .tax-modal-actions .secondary-button {
      color: var(--ink);
      background: var(--sage-soft);
    }

    .results {
      display: grid;
      gap: 22px;
      padding: 30px;
      border-radius: 30px;
    }
    .age-badge {
      display: inline-grid;
      place-items: center;
      min-width: 86px;
      min-height: 42px;
      border-radius: 999px;
      color: var(--sage-dark);
      background: var(--sage-soft);
      font-weight: 900;
    }
    .cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .card {
      display: grid;
      gap: 14px;
      align-content: center;
      min-height: 150px;
      padding: 20px;
      border-radius: 24px;
      color: #ffffff;
    }
    .card.dark { background: var(--charcoal); }
    .card.green { background: var(--sage); }
    .card.blue { background: var(--blue); }
    .card strong {
      font-size: clamp(1.8rem, 3vw, 2.55rem);
      line-height: 1;
      white-space: nowrap;
    }
    .card span {
      max-width: 190px;
      font-size: 0.8rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      line-height: 1.3;
      text-transform: uppercase;
    }
    .mini, .report-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .small {
      display: grid;
      gap: 7px;
      min-height: 86px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--wash);
    }
    .small span {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .small strong {
      font-size: 1.25rem;
      line-height: 1.1;
    }
    .chart {
      display: grid;
      gap: 10px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #ffffff;
    }
    .chart h3 { margin: 0; }
    svg { width: 100%; height: auto; }
    svg text {
      fill: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }
    .grid-line { stroke: #edf1ea; stroke-width: 1; }
    .line {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 4;
    }
    .no-tax { stroke: var(--charcoal); }
    .roth-tax { stroke: var(--sage); }
    .roth-value { stroke: var(--blue); }
    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 800;
    }
    .legend span {
      display: inline-flex;
      gap: 7px;
      align-items: center;
    }
    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .dot.no { background: var(--charcoal); }
    .dot.roth-tax-dot { background: var(--sage); }
    .dot.roth-value-dot { background: var(--blue); }

    .report {
      margin-top: 30px;
      padding: 30px;
      border-radius: 30px;
    }
    .report-head {
      align-items: center;
      margin-bottom: 22px;
    }
    .report-head button {
      min-height: 44px;
      padding: 0 18px;
      border: 0;
      border-radius: 999px;
      color: #ffffff;
      background: var(--charcoal);
      font-weight: 900;
    }
    .paper {
      display: grid;
      gap: 24px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
    }
    .report-page {
      display: grid;
      gap: 18px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #ffffff;
    }
    .report-top {
      padding-bottom: 18px;
      border-bottom: 6px solid var(--sage);
    }
    .report-top div {
      display: grid;
      gap: 4px;
    }
    .report-top span {
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .report-top strong { font-size: 1.15rem; }
    .report-title {
      display: grid;
      gap: 6px;
    }
    .report-title h2 {
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.7rem);
      line-height: 0.96;
      letter-spacing: 0;
    }
    .report-title p {
      margin: 0;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.45;
    }
    .report-detail-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 12px;
    }
    .report-detail,
    .input-summary {
      display: grid;
      gap: 6px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--wash);
    }
    .report-detail span,
    .input-summary span {
      color: var(--muted);
      font-size: 0.7rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .report-detail strong {
      font-size: 1.35rem;
      line-height: 1.08;
    }
    .input-summary-block {
      display: grid;
      gap: 10px;
    }
    .input-summary-block h3 {
      margin: 0;
      font-size: 1rem;
    }
    .input-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .input-summary strong {
      font-size: 1rem;
      line-height: 1.12;
    }
    .report-snapshot {
      display: grid;
      gap: 14px;
    }
    .report-snapshot .card {
      min-height: 118px;
      border-radius: 20px;
    }
    .report-snapshot .card strong {
      font-size: clamp(1.75rem, 2.7vw, 2.35rem);
    }
    .report-snapshot .chart {
      padding: 18px;
      border-radius: 20px;
    }
    .report-disclaimer {
      margin: 0;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.45;
    }
    .report-hero {
      display: grid;
      grid-template-columns: 1fr minmax(340px, 0.8fr);
      gap: 18px;
      align-items: stretch;
    }
    .report-hero > div:first-child {
      display: grid;
      align-content: center;
      min-height: 180px;
      padding: 26px;
      border-radius: 18px;
      color: #ffffff;
      background: var(--charcoal);
    }
    .report-hero p {
      margin-bottom: 10px;
      color: rgba(255, 255, 255, 0.74);
      font-weight: 800;
      text-transform: uppercase;
    }
    .report-hero h3 {
      margin: 0;
      font-size: clamp(2rem, 4vw, 4rem);
      line-height: 0.98;
    }
    .report-kpis { grid-template-columns: 1fr; }
    .ledger {
      display: grid;
      gap: 10px;
      margin-top: 20px;
    }
    .ledger h3 { margin-bottom: 0; }
    table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      border-radius: 12px;
      font-size: 0.88rem;
    }
    th, td {
      padding: 11px 10px;
      border-bottom: 1px solid var(--line);
      text-align: right;
    }
    th:first-child, td:first-child { text-align: left; }
    th {
      color: #ffffff;
      background: var(--charcoal);
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    tbody tr:nth-child(even) { background: var(--wash); }
    tbody tr.target-row,
    tbody tr.target-row:nth-child(even) {
      background: var(--sage-soft);
      box-shadow: inset 5px 0 0 var(--sage);
      font-weight: 800;
    }
    .target-badge {
      display: inline-flex;
      margin-left: 8px;
      padding: 3px 7px;
      border-radius: 999px;
      color: var(--sage-dark);
      background: #ffffff;
      font-size: 0.68rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      vertical-align: middle;
      white-space: nowrap;
    }
    .note {
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.5;
    }

    @media (max-width: 1080px) {
      .hero, .tool, .report-hero { grid-template-columns: 1fr; }
      .inputs { position: static; }
    }
    @media (max-width: 760px) {
      .page { padding: 34px 0; }
      .hero, .tool, .report { width: min(100% - 24px, 1280px); }
      .inputs, .results, .report { padding: 20px; border-radius: 22px; }
      .fields, .cards, .mini, .report-kpis, .report-detail-grid, .input-summary-grid { grid-template-columns: 1fr; }
      .panel-title, .results-head, .report-head, .report-top { display: grid; }
      .tax-modal-grid, .tax-stat-grid, .tax-comparison-grid, .tax-checkbox-grid { grid-template-columns: 1fr; }
      .tax-modal { padding: 20px; border-radius: 20px; }
      .tax-modal-actions { display: grid; }
      .paper { padding: 20px; }
      table { display: block; overflow-x: auto; white-space: nowrap; }
    }
    @media print {
      @page {
        size: Letter landscape;
        margin: 0.35in;
      }
      body { background: #ffffff; }
      .hero, .tool, .report-head { display: none; }
      .page { padding: 0; background: #ffffff; }
      .report {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
      }
      .paper {
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0;
      }
      .report-page {
        min-height: 7.75in;
        padding: 0.22in;
        border: 1px solid var(--line);
        border-radius: 14px;
        gap: 8pt;
        break-after: page;
        page-break-after: always;
      }
      .report-top {
        padding-bottom: 8pt;
        border-bottom-width: 4pt;
      }
      .report-title h2 { font-size: 24pt; }
      .report-title p { font-size: 8pt; }
      .report-detail-grid { grid-template-columns: 1.2fr 1fr 1fr; }
      .report-detail,
      .input-summary {
        padding: 5.5pt 7pt;
        border-radius: 10pt;
      }
      .report-detail strong { font-size: 12pt; }
      .report-detail span,
      .input-summary span { font-size: 5.8pt; }
      .input-summary-block { gap: 5pt; }
      .input-summary-block h3 { font-size: 9pt; }
      .input-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5pt; }
      .input-summary strong { font-size: 7.8pt; }
      .report-snapshot { gap: 7pt; }
      .report-snapshot .cards { gap: 7pt; }
      .report-snapshot .card {
        min-height: 62pt;
        padding: 9pt;
        border-radius: 12pt;
      }
      .report-snapshot .card strong { font-size: 20pt; }
      .report-snapshot .card span { font-size: 6pt; }
      .report-snapshot .chart {
        padding: 8pt 10pt;
        border-radius: 12pt;
      }
      .report-snapshot .chart h3 { font-size: 11pt; }
      .report-snapshot .chart svg { max-height: 1.85in; }
      .legend { font-size: 7.5pt; }
      .ledger {
        break-before: page;
        page-break-before: always;
        break-after: page;
        page-break-after: always;
        gap: 5pt;
        margin-top: 0;
        padding: 0.16in;
        border: 1px solid var(--line);
        border-radius: 12px;
      }
      #ledgers .ledger:last-child {
        break-after: auto;
        page-break-after: auto;
      }
      .ledger h3 { font-size: 13pt; }
      .ledger .note,
      .ledger-note { font-size: 7pt; }
      .ledger table {
        display: table;
        overflow: visible;
        white-space: normal;
        font-size: 7.2pt;
      }
      .ledger th,
      .ledger td {
        padding: 3.2pt 3.6pt;
        line-height: 1.08;
      }
      .ledger th {
        font-size: 5.8pt;
        letter-spacing: 0.04em;
      }
      .target-badge {
        display: block;
        width: fit-content;
        margin: 2pt 0 0 auto;
        font-size: 5.3pt;
      }
      .report-disclaimer { font-size: 6.3pt; }
    }