/* ═══════════════════════════════════════
       CLEAN LIGHT THEME — Blue · White · Gray
       ═══════════════════════════════════════ */
    :root {
      --bg:        #f0f4f8;
      --white:     #ffffff;
      --blue:      #2979c8;
      --blue2:     #1f65ae;
      --blue-lt:   #e8f1fb;
      --blue-lt2:  #d0e4f7;
      --blue-dim:  rgba(41,121,200,.1);
      --slate:     #1e293b;
      --slate2:    #334155;
      --muted:     #64748b;
      --muted2:    #94a3b8;
      --border:    #e2e8f0;
      --border2:   #cbd5e1;
      --green:     #16a34a;
      --green-dim: rgba(22,163,74,.1);
      --red:       #dc2626;
      --red-dim:   rgba(220,38,38,.1);
      --amber:     #d97706;
      --radius:    10px;
      --shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
      --shadow-md: 0 4px 24px rgba(0,0,0,.1);
      /* Aliases for legacy JS-generated content */
      --cyan:      var(--blue);
      --navy:      var(--white);
      --navy2:     var(--white);
      --navy3:     var(--bg);
      --navy4:     var(--blue-lt);
      --text:      var(--slate);
      --text2:     var(--muted);
      --text3:     var(--muted2);
      --surface:   var(--bg);
      --card:      var(--white);
      --silver:    var(--muted);
      --dark-muted:var(--muted2);
      --panel:     var(--border);
    }

    /* ─── Reset & Base ────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Lato', sans-serif;
      background: var(--bg);
      color: var(--slate);
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before { display: none; }
    body::after  { display: none; }

    header, .mode-switcher, .container { position: relative; z-index: 1; }

    /* ─── Header ────────────────────────────────────── */
    header {
      text-align: center;
      padding: 0;
      animation: fadeDown .55s cubic-bezier(.22,1,.36,1) both;
    }

    .header-bar { display: none; }

    .header-main {
      background: var(--blue);
      padding: 36px 24px 32px;
    }

    .logo-line {
      display: flex; align-items: center; justify-content: center;
      gap: 10px; margin-bottom: 6px;
    }
    .logo-icon {
      width: 36px; height: 36px;
      background: rgba(255,255,255,.2);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
    }
    .logo-text {
      font-family: 'Lato', sans-serif;
      font-weight: 700; font-size: 11px;
      letter-spacing: .2em; text-transform: uppercase;
      color: rgba(255,255,255,.75);
    }

    h1 {
      font-family: 'Merriweather', serif;
      font-size: clamp(1.7rem, 4vw, 2.5rem);
      font-weight: 900; line-height: 1.15;
      color: var(--white);
    }
    h1 span { color: rgba(255,255,255,.85); }

    .subtitle {
      margin-top: 6px; color: rgba(255,255,255,.65);
      font-size: 13px; font-weight: 400; letter-spacing: .02em;
    }

    /* ─── Main grid ──────────────────────────────────── */
    .container {
      max-width: 1160px; margin: 0 auto;
      padding: 24px 20px 80px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 18px;
      animation: fadeUp .55s .1s cubic-bezier(.22,1,.36,1) both;
    }
    @media (max-width: 820px) { .container { grid-template-columns: 1fr; } }

    /* ─── Card ────────────────────────────────────────── */
    .card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      box-shadow: var(--shadow);
    }

    .card-title {
      font-family: 'Lato', sans-serif;
      font-size: .72rem; font-weight: 900;
      color: var(--blue); margin-bottom: 22px;
      letter-spacing: .18em; text-transform: uppercase;
      display: flex; align-items: center; gap: 10px;
    }
    .card-title::before {
      content: ''; display: inline-block;
      width: 14px; height: 3px;
      background: var(--blue); border-radius: 99px; flex-shrink: 0;
    }

    /* ─── Form Fields ────────────────────────────────── */
    .field { margin-bottom: 18px; }

    label {
      display: block; font-family: 'Lato', sans-serif;
      font-size: 10.5px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 7px;
    }

    .input-wrap { position: relative; }
    .input-prefix, .input-suffix {
      position: absolute; top: 50%; transform: translateY(-50%);
      color: var(--muted2); font-family: 'Roboto Mono', monospace;
      font-size: 13px; pointer-events: none;
    }
    .input-prefix { left: 13px; }
    .input-suffix { right: 13px; }

    input[type="number"], input[type="range"], select {
      width: 100%; background: var(--white);
      border: 1.5px solid var(--border2);
      color: var(--slate); border-radius: 8px;
      font-family: 'Roboto Mono', monospace; font-size: 14px;
      transition: border-color .18s, box-shadow .18s; outline: none;
    }
    input[type="number"] { padding: 11px 13px 11px 30px; -moz-appearance: textfield; }
    input[type="number"]::-webkit-inner-spin-button { display: none; }
    input[type="number"]:focus, select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px var(--blue-dim);
    }

    select {
      padding: 11px 13px; cursor: pointer; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 13px center;
    }
    select option { background: var(--white); color: var(--slate); }

    .range-field { margin-bottom: 18px; }
    .range-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
    .range-value {
      font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 600;
      color: var(--white); background: var(--blue);
      padding: 2px 10px; border-radius: 99px;
    }

    input[type="range"] {
      -webkit-appearance: none; height: 5px; background: var(--blue-lt2);
      border: none; border-radius: 99px; cursor: pointer; padding: 0;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
      background: var(--blue); border: 3px solid var(--white);
      box-shadow: 0 1px 6px rgba(41,121,200,.4);
      cursor: pointer; transition: transform .15s, box-shadow .15s;
    }
    input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); box-shadow: 0 2px 12px rgba(41,121,200,.5); }
    input[type="range"]::-moz-range-thumb {
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--blue); border: 3px solid var(--white);
    }

    .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    /* ─── Toggle Switch ───────────────────────────────── */
    .toggle-wrap {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 11px 14px;
      cursor: pointer; margin-bottom: 12px; transition: border-color .18s, background .18s;
    }
    .toggle-wrap:hover { border-color: var(--blue); background: var(--blue-lt); }
    .toggle-label { font-size: 13px; font-weight: 700; color: var(--slate); }
    .toggle-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

    .toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-track {
      position: absolute; inset: 0; background: var(--border2);
      border-radius: 11px; border: 1.5px solid var(--border);
      transition: background .2s, border-color .2s;
    }
    .toggle-thumb {
      position: absolute; top: 3px; left: 3px;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--muted2); transition: left .2s, background .2s, box-shadow .2s;
    }
    .toggle input:checked ~ .toggle-track { background: var(--blue-dim); border-color: var(--blue); }
    .toggle input:checked ~ .toggle-thumb { left: 21px; background: var(--blue); box-shadow: 0 1px 4px rgba(41,121,200,.4); }

    /* ─── Results Panel ───────────────────────────────── */
    .results-card { display: flex; flex-direction: column; gap: 14px; }

    .payment-hero {
      background: linear-gradient(135deg, var(--blue), var(--blue2));
      border-radius: var(--radius);
      padding: 28px 22px; text-align: center;
      position: relative; overflow: hidden;
      box-shadow: 0 4px 20px rgba(41,121,200,.3);
    }
    .payment-hero::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.1) 0%, transparent 60%);
    }
    .payment-label {
      font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 900;
      letter-spacing: .22em; text-transform: uppercase;
      color: rgba(255,255,255,.7); margin-bottom: 8px;
    }
    .payment-amount {
      font-family: 'Merriweather', serif;
      font-size: clamp(2.1rem, 5vw, 2.9rem);
      font-weight: 900; color: var(--white); line-height: 1.05;
    }
    .payment-sub {
      font-family: 'Lato', sans-serif; font-size: 11.5px; font-weight: 700;
      color: rgba(255,255,255,.75); margin-top: 6px;
    }

    .breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .breakdown-item {
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 11px 14px; transition: border-color .15s, background .15s;
    }
    .breakdown-item:hover { border-color: var(--blue); background: var(--blue-lt); }
    .breakdown-item.full { grid-column: 1/-1; }
    .b-label {
      font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); margin-bottom: 4px;
    }
    .b-value { font-family: 'Roboto Mono', monospace; font-size: 14.5px; font-weight: 600; color: var(--slate); }
    .b-value.accent { color: var(--blue); }
    .b-value.danger  { color: var(--red); }
    .b-value.success { color: var(--green); }

    .chart-wrap {
      display: flex; align-items: center; gap: 18px;
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 16px 18px;
    }
    .donut-svg { flex-shrink: 0; }
    .donut-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; }
    .legend-item { display: flex; align-items: center; gap: 8px; }
    .legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
    .legend-label { color: var(--muted); flex: 1; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .03em; }
    .legend-pct { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; color: var(--slate); }

    /* Donut segment colors for light theme */
    #seg-pi  { stroke: var(--blue) !important; }
    #seg-int { stroke: #64748b !important; }
    #seg-tax { stroke: var(--amber) !important; }
    #seg-ins { stroke: var(--green) !important; }

    .amort-bar-wrap {
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 14px 16px;
    }
    .amort-bar-title {
      font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); margin-bottom: 10px;
    }
    .stacked-bar { height: 8px; border-radius: 99px; overflow: hidden; display: flex; }
    .bar-principal { background: var(--blue); }
    .bar-interest  { background: #94a3b8; }
    .bar-tax       { background: var(--amber); }
    .bar-ins       { background: var(--green); }
    .bar-pmi       { background: #c084fc; }

    .amort-labels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
    .a-label { display: flex; align-items: center; gap: 5px; font-family: 'Lato', sans-serif; font-size: 10px; font-weight: 700; color: var(--muted); }
    .a-dot { width: 8px; height: 8px; border-radius: 2px; }

    .btn-table {
      width: 100%; padding: 11px; background: transparent;
      border: 1.5px solid var(--blue); border-radius: 8px;
      color: var(--blue); font-family: 'Lato', sans-serif;
      font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
      cursor: pointer; transition: background .18s, color .18s;
    }
    .btn-table:hover { background: var(--blue); color: var(--white); }

    /* ─── Amortization Table ──────────────────────────── */
    .table-section { grid-column: 1/-1; animation: fadeUp .35s ease both; }
    .table-card { padding: 22px; }
    .table-controls {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
    }
    .view-toggle {
      display: flex; background: var(--bg);
      border-radius: 8px; padding: 3px; border: 1.5px solid var(--border);
    }
    .view-btn {
      padding: 5px 16px; border: none; background: transparent; color: var(--muted);
      font-family: 'Lato', sans-serif; font-size: 11.5px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      cursor: pointer; border-radius: 6px; transition: background .18s, color .18s;
    }
    .view-btn.active { background: var(--blue); color: var(--white); }

    .table-scroll { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    thead th {
      padding: 9px 14px; text-align: right;
      font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 900;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted); border-bottom: 2px solid var(--blue-lt2);
    }
    thead th:first-child { text-align: left; }
    tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
    tbody tr:hover { background: var(--blue-lt); }
    tbody tr.year-row { background: var(--blue-lt); font-weight: 600; }
    td { padding: 9px 14px; text-align: right; font-family: 'Roboto Mono', monospace; color: var(--slate2); }
    td:first-child { text-align: left; font-family: 'Lato', sans-serif; font-weight: 600; color: var(--muted); font-size: 12px; }
    td.balance { color: var(--blue); font-weight: 700; }
    td.interest { color: var(--red); }

    /* ─── Animations ──────────────────────────────────── */
    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .number-animate { transition: color .18s; }

    /* ─── Loan Type Selector ──────────────────────────── */
    .loan-type-bar {
      display: flex; gap: 4px; background: var(--bg);
      border-radius: 8px; padding: 4px; margin-bottom: 20px;
      border: 1.5px solid var(--border);
    }
    .lt-btn {
      flex: 1; padding: 7px 3px; border: none; border-radius: 6px;
      background: transparent; cursor: pointer;
      font-family: 'Lato', sans-serif; font-size: 10.5px; font-weight: 700;
      letter-spacing: .04em; color: var(--muted);
      transition: background .18s, color .18s;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
    }
    .lt-btn:hover { color: var(--slate); background: var(--blue-lt); }
    .lt-btn.active { background: var(--blue) !important; color: var(--white) !important; box-shadow: 0 2px 8px rgba(41,121,200,.3); }
    .lt-btn .lt-emoji { font-size: 13px; }

    .loan-info-banner {
      border-radius: 8px; padding: 11px 14px; margin-bottom: 16px;
      border-left: 3px solid var(--blue);
      border: 1.5px solid var(--border); border-left: 3px solid var(--blue);
      background: var(--blue-lt); animation: fadeUp .2s ease both;
    }
    .loan-info-banner.conv, .loan-info-banner.fha, .loan-info-banner.va,
    .loan-info-banner.usda, .loan-info-banner.arm {
      background: var(--blue-lt); border-color: var(--border); border-left-color: var(--blue);
    }

    .lib-title {
      font-family: 'Lato', sans-serif; font-weight: 900; font-size: 10px;
      letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px;
      display: flex; align-items: center; gap: 6px; color: var(--blue);
    }
    .lib-pills { display: flex; flex-wrap: wrap; gap: 4px; }
    .lib-pill {
      font-family: 'Roboto Mono', monospace; font-size: 9.5px; font-weight: 500;
      border-radius: 4px; padding: 2px 8px;
      background: var(--white); color: var(--muted);
      border: 1px solid var(--border);
    }
    .lib-pill.warn { background: rgba(220,38,38,.06); color: var(--red); border-color: rgba(220,38,38,.2); }
    .lib-pill.good { background: rgba(22,163,74,.06); color: var(--green); border-color: rgba(22,163,74,.2); }

    .upfront-row { display: none; }
    .upfront-row.visible { display: block; }

    .arm-section {
      display: none; background: rgba(217,119,6,.05);
      border: 1.5px solid rgba(217,119,6,.2); border-left: 3px solid var(--amber);
      border-radius: 8px; padding: 14px; margin-bottom: 16px; animation: fadeUp .2s ease both;
    }
    .arm-section.visible { display: block; }
    .arm-section-title {
      font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px;
    }
    .arm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .arm-field label { color: var(--amber); }
    .arm-field input, .arm-field select { border-color: rgba(217,119,6,.3) !important; background: rgba(217,119,6,.04) !important; }
    .arm-caps { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .arm-cap-label { font-family: 'Lato', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
    .arm-rate-preview {
      grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center;
      background: rgba(217,119,6,.07); border: 1px solid rgba(217,119,6,.2);
      border-radius: 6px; padding: 9px 13px; margin-top: 4px;
    }
    .arm-preview-label { font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 700; color: var(--muted); }
    .arm-preview-val { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: 700; color: var(--amber); }

    .va-funding-field { display: none; }
    .va-funding-field.visible { display: block; }
    .va-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
    .va-opt {
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 8px 11px; cursor: pointer;
      transition: border-color .18s, background .18s;
    }
    .va-opt.active { background: var(--green-dim); border-color: rgba(22,163,74,.4); }
    .va-opt-label { font-family: 'Lato', sans-serif; font-size: 9px; color: var(--muted); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
    .va-opt-val { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: 700; color: var(--green); margin-top: 2px; }

    /* ─── Comparison Panel ────────────────────────────── */
    .compare-section { grid-column: 1/-1; }
    .compare-toggle-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: var(--radius); padding: 18px 26px; color: var(--slate);
      cursor: pointer; transition: border-color .18s, background .18s; box-shadow: var(--shadow);
    }
    .compare-toggle-btn:hover { border-color: var(--blue); background: var(--blue-lt); }
    .compare-toggle-btn.open .ctc-chevron { transform: rotate(180deg); }
    .compare-body { display: none; margin-top: 12px; animation: fadeUp .25s ease both; }
    .compare-body.open { display: block; }

    .compare-grid {
      display: grid; grid-template-columns: 1.6fr repeat(4, 1fr);
      border-radius: 8px; overflow: hidden; border: 1.5px solid var(--border);
    }
    @media (max-width: 820px) { .compare-grid { grid-template-columns: 1fr; } }

    .cg-header { display: contents; }
    .cg-th {
      padding: 12px 14px; font-family: 'Lato', sans-serif;
      font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
      background: var(--blue); color: var(--white);
      border-bottom: none; border-right: 1px solid rgba(255,255,255,.15); text-align: center;
    }
    .cg-th:first-child { text-align: left; background: var(--bg); color: var(--muted); }

    .cg-row { display: contents; }
    .cg-cell {
      padding: 10px 14px; font-family: 'Roboto Mono', monospace; font-size: 12px;
      border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
      text-align: center; color: var(--slate2); transition: background .12s;
    }
    .cg-cell:first-child {
      text-align: left; font-family: 'Lato', sans-serif;
      font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
      color: var(--muted); background: var(--bg);
    }
    .cg-row:hover .cg-cell { background: var(--blue-lt); }
    .cg-cell.highlight { color: var(--blue); font-weight: 700; }
    .cg-cell.red { color: var(--red); }
    .cg-cell.green { color: var(--green); }
    .cg-best { position: relative; }
    .best-badge {
      display: inline-block; font-family: 'Lato', sans-serif;
      font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
      background: var(--blue); color: var(--white);
      border-radius: 3px; padding: 1px 5px; margin-left: 5px; vertical-align: middle;
    }
    .compare-note {
      font-family: 'Lato', sans-serif; font-size: 9.5px; color: var(--muted2);
      padding: 10px 16px; background: var(--bg); border-radius: 0 0 8px 8px;
      border: 1.5px solid var(--border); border-top: none;
    }

    /* ─── Cash to Close Section ───────────────────────── */
    .ctc-section { grid-column: 1/-1; }
    .ctc-toggle-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: var(--radius); padding: 18px 26px; color: var(--slate);
      cursor: pointer; transition: border-color .18s, background .18s; box-shadow: var(--shadow);
    }
    .ctc-toggle-btn:hover { border-color: var(--blue); background: var(--blue-lt); }
    .ctc-btn-left { display: flex; align-items: center; gap: 14px; }
    .ctc-btn-icon {
      width: 32px; height: 32px; background: var(--blue);
      border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px;
    }
    .ctc-btn-text { text-align: left; }
    .ctc-btn-title { font-family: 'Merriweather', serif; font-size: .95rem; font-weight: 700; color: var(--slate); display: block; }
    .ctc-btn-sub { font-family: 'Lato', sans-serif; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
    .ctc-btn-right { display: flex; align-items: center; gap: 14px; }
    .ctc-preview-amount { font-family: 'Roboto Mono', monospace; font-size: 1.2rem; font-weight: 700; color: var(--blue); }
    .ctc-chevron { font-size: 11px; color: var(--muted2); transition: transform .25s; }
    .ctc-toggle-btn.open .ctc-chevron { transform: rotate(180deg); }

    .ctc-body { display: none; margin-top: 12px; }
    .ctc-body.open { display: block; animation: fadeUp .25s ease both; }

    .cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
    @media (max-width: 820px) { .cc-grid { grid-template-columns: 1fr; } }

    .cc-section { margin-bottom: 7px; }
    .cc-section-header {
      display: flex; align-items: center; padding: 8px 13px;
      background: var(--bg); border-radius: 6px 6px 0 0;
      cursor: pointer; user-select: none;
      border: 1.5px solid var(--border); transition: background .15s;
    }
    .cc-section-header:hover { background: var(--blue-lt); }
    .cc-section-letter { font-family: 'Lato', sans-serif; font-weight: 900; font-size: 10.5px; letter-spacing: .08em; color: var(--blue); margin-right: 8px; flex-shrink: 0; }
    .cc-section-name { font-family: 'Lato', sans-serif; font-size: 11.5px; font-weight: 700; color: var(--slate); flex: 1; }
    .cc-section-total { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 700; color: var(--blue); margin-right: 8px; }
    .cc-section-chev { font-size: 9px; color: var(--muted2); transition: transform .18s; }
    .cc-section.collapsed .cc-section-chev { transform: rotate(-90deg); }
    .cc-section.collapsed .cc-rows { display: none; }

    .cc-rows {
      background: var(--white); border: 1.5px solid var(--border); border-top: none;
      border-radius: 0 0 6px 6px;
    }

    .fee-row {
      display: flex; align-items: center; gap: 8px; padding: 6px 13px;
      border-bottom: 1px solid var(--border); min-height: 34px; transition: background .1s;
    }
    .fee-row:last-child { border-bottom: none; }
    .fee-row:hover { background: var(--blue-lt); }
    .fee-num { font-family: 'Roboto Mono', monospace; font-size: 9.5px; color: var(--muted2); width: 16px; flex-shrink: 0; }
    .fee-desc { flex: 1; font-family: 'Lato', sans-serif; font-size: 11.5px; color: var(--slate); line-height: 1.35; }
    .fee-vendor { font-family: 'Lato', sans-serif; font-size: 9.5px; color: var(--muted); display: block; margin-top: 1px; }

    .dyn-badge {
      font-family: 'Lato', sans-serif; font-size: 8.5px; font-weight: 900;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--white); background: var(--blue);
      border-radius: 3px; padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
    }

    .ctc-body input[type="number"] { padding: 4px 8px 4px 18px; font-size: 11.5px; border-radius: 6px; height: auto; }
    .ctc-body .input-wrap .input-prefix { font-size: 10px; left: 5px; }
    .ctc-body .input-wrap .input-suffix { font-size: 10px; right: 5px; }
    .fee-amt-wrap { width: 108px; flex-shrink: 0; position: relative; }
    .fee-amt-wrap input[type="number"] { width: 100%; text-align: right; }
    .fee-amt-wrap .input-prefix { font-size: 10px; left: 5px; }

    .fee-dyn { width: 108px; flex-shrink: 0; font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--blue); text-align: right; padding-right: 4px; }
    .fee-dyn.neg { color: var(--red); }
    .fee-dyn.muted { color: var(--muted2); }

    .fee-pct-group { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
    .fee-pct-group .pct-wrap { width: 56px; position: relative; }
    .fee-pct-group .pct-wrap input { width: 100%; text-align: center; padding: 4px 14px 4px 5px; }
    .fee-pct-group .pct-wrap .input-suffix { font-size: 10px; right: 4px; }
    .fee-pct-sep { font-size: 10px; color: var(--muted2); }
    .fee-pct-result { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--blue); min-width: 76px; text-align: right; }

    .fee-days-group { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
    .fee-days-group .small-num { width: 36px; position: relative; }
    .fee-days-group .small-num input { width: 100%; text-align: center; padding: 4px; }
    .fee-days-label { font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
    .fee-days-result { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--blue); min-width: 78px; text-align: right; }

    .fee-subtotal-bar {
      display: flex; justify-content: space-between; align-items: center;
      padding: 7px 13px; background: var(--blue-lt);
      border: 1.5px solid var(--blue-lt2);
      border-radius: 0 0 6px 6px; margin-bottom: 4px;
    }
    .fsb-label { font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .fsb-val { font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: 700; color: var(--blue); }

    .ctc-summary { background: var(--white); border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
    .ctc-sum-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 22px; border-bottom: 1px solid var(--border); }
    .ctc-sum-row:last-child { border-bottom: none; }
    .ctc-sum-label { font-family: 'Lato', sans-serif; font-size: 12.5px; color: var(--muted); font-weight: 700; }
    .ctc-sum-val { font-family: 'Roboto Mono', monospace; font-size: 13px; color: var(--slate); }
    .ctc-sum-row.sub-header { background: var(--bg); padding-top: 7px; padding-bottom: 7px; }
    .ctc-sum-row.sub-header .ctc-sum-label { font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); }
    .ctc-sum-row.bold-row .ctc-sum-label { color: var(--slate); font-weight: 900; font-size: 13px; }
    .ctc-sum-row.bold-row .ctc-sum-val   { color: var(--blue); font-size: 14px; font-weight: 700; }
    .ctc-sum-row.credit-row .ctc-sum-val { color: var(--green); }

    .ctc-hero-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 22px 26px; background: var(--blue);
    }
    .ctc-hero-label { font-family: 'Merriweather', serif; font-size: 1.05rem; font-weight: 700; color: rgba(255,255,255,.85); }
    .ctc-hero-label span { color: var(--white); }
    .ctc-hero-amount { font-family: 'Merriweather', serif; font-size: 2rem; font-weight: 900; color: var(--white); }

    .lender-credit-wrap { width: 108px; flex-shrink: 0; position: relative; }
    .lender-credit-wrap input { width: 100%; text-align: right; color: var(--green) !important; }

    /* CTC state selector bar */
    .ctc-state-bar {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      background: var(--blue-lt); border: 1.5px solid var(--blue-lt2);
      border-radius: 8px; padding: 10px 16px;
      margin-bottom: 18px;
    }
    .ctc-state-label {
      font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 900;
      letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
      white-space: nowrap;
    }
    .ctc-state-select {
      padding: 6px 32px 6px 10px; border: 1.5px solid var(--blue-lt2);
      border-radius: 6px; background: var(--white);
      font-family: 'Lato', sans-serif; font-size: 12.5px; font-weight: 600;
      color: var(--slate); cursor: pointer; outline: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232979c8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 10px center;
      transition: border-color .18s;
    }
    .ctc-state-select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-dim); }
    .ctc-state-note {
      font-family: 'Lato', sans-serif; font-size: 10.5px; color: var(--muted);
      font-style: italic;
    }

    /* ─── Mode Switcher ──────────────────────────────── */
    .mode-switcher {
      display: flex; align-items: center; justify-content: center;
      gap: 0; margin: 20px auto 22px;
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: 50px; padding: 4px;
      width: fit-content; box-shadow: var(--shadow);
      animation: fadeDown .5s .1s ease both;
    }
    .mode-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 28px; border: none; border-radius: 50px;
      background: transparent; font-family: 'Lato', sans-serif;
      font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
      color: var(--muted); cursor: pointer; transition: background .2s, color .2s;
    }
    .mode-btn .mode-emoji { font-size: 15px; }
    .mode-btn.active { background: var(--blue); color: var(--white); box-shadow: 0 2px 12px rgba(41,121,200,.35); }
    .mode-btn[data-mode="refi"].active { background: var(--slate2); color: var(--white); box-shadow: 0 2px 12px rgba(0,0,0,.15); }
    .mode-divider { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }

    /* ─── Refi Inputs ────────────────────────────────── */
    .refi-section { display: none; }
    .refi-section.visible { display: block; }
    .purchase-section { display: block; }
    .purchase-section.hidden { display: none; }

    .refi-type-bar {
      display: flex; gap: 4px; background: var(--bg);
      border-radius: 8px; padding: 4px; margin-bottom: 16px;
      border: 1.5px solid var(--border);
    }
    .rt-btn {
      flex: 1; padding: 7px 6px; border: none; border-radius: 6px;
      background: transparent; font-family: 'Lato', sans-serif;
      font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
      color: var(--muted); cursor: pointer; transition: background .18s, color .18s;
    }
    .rt-btn.active { background: var(--blue); color: var(--white); }

    .refi-divider { height: 1px; background: var(--border); margin: 16px 0; }

    .refi-card-title {
      font-family: 'Lato', sans-serif; font-size: .72rem; font-weight: 900;
      color: var(--blue); margin-bottom: 16px; letter-spacing: .18em; text-transform: uppercase;
      display: flex; align-items: center; gap: 10px;
    }
    .refi-card-title::before {
      content: ''; display: inline-block; width: 14px; height: 3px;
      background: var(--blue); border-radius: 99px; flex-shrink: 0;
    }

    .cashout-field { display: none; }
    .cashout-field.visible { display: block; }

    /* ─── Refi Results ───────────────────────────────── */
    .refi-results-card { display: none; flex-direction: column; gap: 13px; }
    .refi-results-card.visible { display: flex; }
    .purchase-results-card { display: flex; }
    .purchase-results-card.hidden { display: none; }

    .refi-compare-hero {
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center; gap: 8px;
      background: linear-gradient(135deg, var(--blue), var(--blue2));
      border-radius: var(--radius); padding: 22px 18px;
      box-shadow: 0 4px 20px rgba(41,121,200,.25);
    }
    .rch-side { text-align: center; }
    .rch-label { font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 5px; }
    .rch-label.old { color: rgba(255,255,255,.6); }
    .rch-label.new { color: rgba(255,255,255,.85); }
    .rch-amount { font-family: 'Merriweather', serif; font-size: 1.7rem; font-weight: 900; line-height: 1; }
    .rch-amount.old { color: rgba(255,255,255,.5); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); }
    .rch-amount.new { color: var(--white); }
    .rch-sub { font-family: 'Lato', sans-serif; font-size: 9.5px; color: rgba(255,255,255,.6); font-weight: 700; margin-top: 4px; }
    .rch-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .rch-arrow-icon { font-size: 18px; color: rgba(255,255,255,.4); }
    .rch-savings-pill { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
    .rch-savings-pill.save { background: rgba(255,255,255,.2); color: var(--white); }
    .rch-savings-pill.cost { background: rgba(220,38,38,.25); color: #fca5a5; }

    .refi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .rs-item { background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px; padding: 11px 13px; }
    .rs-item.full { grid-column: 1/-1; }
    .rs-item.highlight { background: var(--green-dim); border-color: rgba(22,163,74,.25); }
    .rs-item.warn { background: var(--red-dim); border-color: rgba(220,38,38,.2); }
    .rs-label { font-family: 'Lato', sans-serif; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); margin-bottom: 4px; }
    .rs-val { font-family: 'Roboto Mono', monospace; font-size: 14px; font-weight: 700; color: var(--slate); }
    .rs-val.green { color: var(--green); }
    .rs-val.red   { color: var(--red); }
    .rs-val.blue  { color: var(--blue); }
    .rs-val.gold  { color: var(--amber); }
    .rs-sub { font-family: 'Lato', sans-serif; font-size: 9.5px; color: var(--muted); margin-top: 2px; font-weight: 700; }

    .breakeven-bar-wrap { background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px; padding: 13px 15px; }
    .be-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
    .be-title { font-family: 'Lato', sans-serif; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); }
    .be-val   { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 700; color: var(--blue); }
    .be-track { height: 7px; background: var(--blue-lt2); border-radius: 99px; overflow: hidden; }
    .be-fill  { height: 100%; border-radius: 99px; background: linear-gradient(to right, var(--blue), var(--green)); transition: width .45s ease; }
    .be-labels { display: flex; justify-content: space-between; margin-top: 5px; font-family: 'Lato', sans-serif; font-size: 9px; font-weight: 700; color: var(--muted2); }

    .int-compare-bars { background: var(--bg); border: 1.5px solid var(--border); border-radius: 8px; padding: 13px 15px; }
    .icb-title { font-family: 'Lato', sans-serif; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); margin-bottom: 11px; }
    .icb-row { margin-bottom: 9px; }
    .icb-row:last-child { margin-bottom: 0; }
    .icb-row-header { display: flex; justify-content: space-between; font-family: 'Lato', sans-serif; font-size: 10.5px; font-weight: 700; margin-bottom: 5px; }
    .icb-row-label { color: var(--muted); }
    .icb-row-val { font-family: 'Roboto Mono', monospace; font-weight: 600; color: var(--slate); }
    .icb-bar-track { height: 6px; background: var(--blue-lt2); border-radius: 99px; overflow: hidden; }
    .icb-bar-fill  { height: 100%; border-radius: 99px; transition: width .45s ease; }
    .icb-bar-fill.old-bar { background: var(--red); opacity: .6; }
    .icb-bar-fill.new-bar { background: var(--blue); }

    .refi-notice {
      background: var(--blue-lt); border: 1.5px solid var(--blue-lt2);
      border-left: 3px solid var(--blue);
      border-radius: 8px; padding: 11px 14px;
      font-family: 'Lato', sans-serif; font-size: 11.5px; color: var(--muted); line-height: 1.6;
    }
    .refi-notice strong { color: var(--blue); font-weight: 700; }
    .refi-ctc-note { font-family: 'Lato', sans-serif; font-size: 9.5px; color: var(--muted2); text-align: center; padding: 4px; }

    /* ─── Compare Loans Panel ────────────────────────────── */
    .cl-panel {
      max-width: 1160px; margin: 0 auto;
      padding: 0 20px 80px;
      animation: fadeUp .4s ease both;
    }
    .cl-wrap { display: flex; flex-direction: column; gap: 24px; }

    .cl-scenarios-header {
      display: flex; align-items: center; justify-content: space-between;
    }
    .cl-title {
      font-family: 'Merriweather', serif;
      font-size: 1.3rem; font-weight: 900; color: var(--slate);
    }
    .cl-add-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 22px;
      background: var(--blue); color: var(--white);
      border: none; border-radius: 8px;
      font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 900;
      letter-spacing: .06em; cursor: pointer;
      transition: background .18s, box-shadow .18s;
      box-shadow: 0 2px 8px rgba(41,121,200,.3);
    }
    .cl-add-btn:hover { background: var(--blue2); box-shadow: 0 4px 14px rgba(41,121,200,.4); }
    .cl-add-btn:disabled { background: var(--muted2); box-shadow: none; cursor: not-allowed; }

    /* Scenario cards grid */
    .cl-scenario-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
    }

    .cl-scenario-card {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow);
      position: relative;
      animation: fadeUp .3s ease both;
    }
    .cl-scenario-card.cl-best-card { border-color: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,.15), var(--shadow); }

    .cl-card-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px;
    }
    .cl-card-num {
      width: 26px; height: 26px;
      background: var(--blue); color: var(--white);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 900;
      flex-shrink: 0;
    }
    .cl-card-name {
      flex: 1; margin: 0 10px;
      font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700;
      color: var(--slate); background: transparent; border: none;
      border-bottom: 1.5px solid var(--border); padding: 2px 4px;
      outline: none; width: 100%;
      transition: border-color .18s;
    }
    .cl-card-name:focus { border-color: var(--blue); }
    .cl-remove-btn {
      width: 24px; height: 24px;
      background: transparent; border: 1.5px solid var(--border);
      border-radius: 50%; color: var(--muted2);
      font-size: 14px; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, border-color .15s, color .15s;
      flex-shrink: 0;
    }
    .cl-remove-btn:hover { background: var(--red-dim); border-color: var(--red); color: var(--red); }

    /* Fields inside scenario card */
    .cl-field { margin-bottom: 12px; }
    .cl-field label {
      display: block; font-family: 'Lato', sans-serif;
      font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted2); margin-bottom: 5px;
    }
    .cl-field .input-wrap input[type="number"],
    .cl-field select {
      font-size: 13px; padding: 8px 13px 8px 28px;
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 6px; color: var(--slate);
    }
    .cl-field select { padding-left: 10px; }
    .cl-field .input-wrap input[type="number"]:focus,
    .cl-field select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-dim); }
    .cl-field .input-prefix { font-size: 11px; left: 10px; }
    .cl-field .input-suffix { font-size: 11px; right: 10px; }
    .cl-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    .cl-pmi-field { display: none; }
    .cl-pmi-field.visible { display: block; }

    /* Section label inside card */
    .cl-section-label {
      font-family: 'Lato', sans-serif;
      font-size: 9px; font-weight: 900;
      letter-spacing: .15em; text-transform: uppercase;
      color: var(--blue); margin-bottom: 8px;
      padding-bottom: 5px;
      border-bottom: 1.5px solid var(--blue-lt2);
    }

    /* Result pill shown on card */
    .cl-result-pill {
      margin-top: 14px;
      padding: 12px 14px;
      background: var(--blue-lt); border: 1.5px solid var(--blue-lt2);
      border-radius: 8px; text-align: center;
    }
    .cl-result-pill.best { background: var(--green-dim); border-color: rgba(22,163,74,.3); }
    .cl-result-label {
      font-family: 'Lato', sans-serif; font-size: 9px; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 3px;
    }
    .cl-result-amount {
      font-family: 'Roboto Mono', monospace; font-size: 1.4rem; font-weight: 700;
      color: var(--blue);
    }
    .cl-result-pill.best .cl-result-amount { color: var(--green); }
    .cl-result-sub {
      font-family: 'Lato', sans-serif; font-size: 10px; color: var(--muted); margin-top: 2px;
    }
    .cl-best-badge {
      display: inline-block;
      background: var(--green); color: var(--white);
      font-family: 'Lato', sans-serif; font-size: 8.5px; font-weight: 900;
      letter-spacing: .08em; text-transform: uppercase;
      padding: 2px 7px; border-radius: 99px; margin-bottom: 4px;
    }

    /* Empty state */
    .cl-empty {
      grid-column: 1/-1;
      text-align: center; padding: 48px 20px;
      color: var(--muted2); font-family: 'Lato', sans-serif;
      font-size: 14px; font-weight: 400;
    }
    .cl-empty-icon { font-size: 36px; margin-bottom: 12px; }

    /* Results comparison table */
    .cl-results-title {
      font-family: 'Merriweather', serif;
      font-size: 1.1rem; font-weight: 900; color: var(--slate);
      margin-bottom: 14px;
    }
    .cl-table-scroll { overflow-x: auto; border-radius: 10px; box-shadow: var(--shadow); }
    .cl-table {
      width: 100%; border-collapse: collapse;
      background: var(--white);
      border-radius: 10px; overflow: hidden;
      min-width: 600px;
    }
    .cl-table thead th {
      padding: 14px 18px; text-align: center;
      font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 900;
      letter-spacing: .1em; text-transform: uppercase;
      background: var(--blue); color: var(--white);
      border-right: 1px solid rgba(255,255,255,.15);
    }
    .cl-table thead th:first-child { text-align: left; background: var(--slate); }
    .cl-table thead th.best-col { background: #1a7c3e; }

    .cl-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
    .cl-table tbody tr:last-child { border-bottom: none; }
    .cl-table tbody tr:hover { background: var(--blue-lt); }
    .cl-table tbody tr.cl-divider-row td { background: var(--bg); padding: 5px 18px; }
    .cl-table tbody tr.cl-divider-row td:first-child {
      font-family: 'Lato', sans-serif; font-size: 9px; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
    }

    .cl-table td {
      padding: 11px 18px; text-align: center;
      font-family: 'Roboto Mono', monospace; font-size: 13px; color: var(--slate2);
      border-right: 1px solid var(--border);
    }
    .cl-table td:first-child {
      text-align: left; font-family: 'Lato', sans-serif;
      font-size: 11px; font-weight: 700; color: var(--muted);
      letter-spacing: .04em; background: var(--bg);
    }
    .cl-table td.best-val { color: var(--green); font-weight: 700; }
    .cl-table td.worst-val { color: var(--red); }
    .cl-table td.highlight-val { color: var(--blue); font-weight: 700; }
    .cl-table tr.cl-hero-row td {
      padding: 14px 18px;
      font-size: 15px; font-weight: 700;
      background: var(--blue-lt);
    }
    .cl-table tr.cl-hero-row td:first-child { font-size: 11.5px; color: var(--blue); }
    .cl-table tr.cl-hero-row td.best-val { background: var(--green-dim); font-size: 16px; }

    .cl-disclaimer {
      font-family: 'Lato', sans-serif; font-size: 10px; color: var(--muted2);
      margin-top: 10px; padding: 0 4px;
    }

    /* ─── Property Tax Lookup Panel ──────────────────────── */
    .ptl-subtitle {
      font-family: 'Lato', sans-serif; font-size: 13px; color: var(--muted); margin-top: 4px;
    }

    .ptl-search-card {
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: var(--radius); padding: 24px 28px;
      box-shadow: var(--shadow);
    }

    .ptl-search-wrap {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg); border: 2px solid var(--border2);
      border-radius: 10px; padding: 4px 4px 4px 16px;
      transition: border-color .2s, box-shadow .2s;
    }
    .ptl-search-wrap:focus-within {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px var(--blue-dim);
    }
    .ptl-search-icon { font-size: 18px; flex-shrink: 0; }
    .ptl-address-input {
      flex: 1; border: none; background: transparent;
      font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 400;
      color: var(--slate); outline: none;
      padding: 8px 0;
    }
    .ptl-address-input::placeholder { color: var(--muted2); }
    .ptl-search-btn {
      padding: 10px 24px; border: none; border-radius: 8px;
      background: var(--blue); color: var(--white);
      font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 900;
      letter-spacing: .06em; cursor: pointer; flex-shrink: 0;
      transition: background .18s;
    }
    .ptl-search-btn:hover { background: var(--blue2); }
    .ptl-search-btn:disabled { background: var(--muted2); cursor: not-allowed; }

    .ptl-source-tags {
      display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
    }
    .ptl-source-tag {
      font-family: 'Lato', sans-serif; font-size: 10.5px; font-weight: 700;
      color: var(--muted); background: var(--bg);
      border: 1.5px solid var(--border); border-radius: 99px;
      padding: 3px 10px; letter-spacing: .04em;
    }

    /* Status/loading */
    .ptl-status {
      display: flex; align-items: center; gap: 12px;
      background: var(--blue-lt); border: 1.5px solid var(--blue-lt2);
      border-radius: 10px; padding: 16px 20px;
      font-family: 'Lato', sans-serif; font-size: 13px; color: var(--blue);
      font-weight: 600;
    }
    .ptl-spinner {
      width: 20px; height: 20px; border-radius: 50%;
      border: 2.5px solid var(--blue-lt2);
      border-top-color: var(--blue);
      animation: spin .8s linear infinite; flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Results card */
    .ptl-results-card {
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: var(--radius); padding: 28px;
      box-shadow: var(--shadow);
    }

    .ptl-results-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; margin-bottom: 22px;
    }
    .ptl-results-address {
      font-family: 'Merriweather', serif; font-size: 1.1rem;
      font-weight: 700; color: var(--slate);
    }
    .ptl-results-meta {
      font-family: 'Lato', sans-serif; font-size: 11.5px;
      color: var(--muted); margin-top: 4px;
    }
    .ptl-confidence-badge {
      font-family: 'Lato', sans-serif; font-size: 10px; font-weight: 900;
      letter-spacing: .1em; text-transform: uppercase;
      padding: 4px 12px; border-radius: 99px; flex-shrink: 0;
    }
    .ptl-confidence-badge.high   { background: var(--green-dim); color: var(--green); border: 1.5px solid rgba(22,163,74,.25); }
    .ptl-confidence-badge.medium { background: rgba(217,119,6,.1); color: var(--amber); border: 1.5px solid rgba(217,119,6,.25); }
    .ptl-confidence-badge.low    { background: var(--red-dim); color: var(--red); border: 1.5px solid rgba(220,38,38,.2); }

    .ptl-metrics-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 12px; margin-bottom: 20px;
    }
    @media (max-width: 820px) { .ptl-metrics-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 900px) {
      .bd-payment-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 600px) {
      .bd-payment-grid { grid-template-columns: 1fr; }
      .bd-cost-header { flex-direction: column; gap: 8px; }
      .bd-cost-total { font-size: 1.6rem; }
    }

    .ptl-metric {
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 14px 16px;
    }
    .ptl-metric.highlight {
      background: var(--blue-lt); border-color: var(--blue-lt2);
    }
    .ptl-metric-label {
      font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase; color: var(--muted2);
      margin-bottom: 5px;
    }
    .ptl-metric-value {
      font-family: 'Roboto Mono', monospace; font-size: 1.35rem;
      font-weight: 700; color: var(--slate);
    }
    .ptl-metric.highlight .ptl-metric-value { color: var(--blue); }

    .ptl-detail-box {
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 14px 18px;
      font-family: 'Lato', sans-serif; font-size: 12.5px;
      color: var(--muted); line-height: 1.7; margin-bottom: 20px;
    }
    .ptl-detail-box:empty { display: none; }

    .ptl-apply-row {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      padding-top: 18px; border-top: 1.5px solid var(--border);
    }
    .ptl-apply-btn {
      padding: 9px 18px; border: 1.5px solid var(--blue);
      border-radius: 8px; background: transparent;
      color: var(--blue); font-family: 'Lato', sans-serif;
      font-size: 12.5px; font-weight: 900; letter-spacing: .04em;
      cursor: pointer; transition: background .18s, color .18s;
    }
    .ptl-apply-btn.primary { background: var(--blue); color: var(--white); }
    .ptl-apply-btn:hover { background: var(--blue); color: var(--white); }
    .ptl-scenario-apply { display: flex; align-items: center; gap: 8px; }
    .ptl-scenario-select {
      padding: 8px 32px 8px 10px; border: 1.5px solid var(--border2);
      border-radius: 8px; background: var(--bg);
      font-family: 'Lato', sans-serif; font-size: 12.5px; color: var(--slate);
      cursor: pointer; outline: none; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 10px center;
    }

    /* Raw notes accordion */
    .ptl-raw-wrap { margin-top: 10px; }
    .ptl-raw-toggle {
      background: none; border: none; color: var(--muted);
      font-family: 'Lato', sans-serif; font-size: 11.5px; font-weight: 700;
      cursor: pointer; padding: 6px 0; letter-spacing: .03em;
      transition: color .15s;
    }
    .ptl-raw-toggle:hover { color: var(--blue); }
    .ptl-raw-text {
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 16px 18px; margin-top: 8px;
      font-family: 'Lato', sans-serif; font-size: 12px; color: var(--slate2);
      line-height: 1.7; max-height: 400px; overflow-y: auto;
      white-space: pre-wrap;
    }

    /* Error */
    .ptl-error {
      background: var(--red-dim); border: 1.5px solid rgba(220,38,38,.2);
      border-radius: 10px; padding: 16px 20px;
      font-family: 'Lato', sans-serif; font-size: 13px;
      color: var(--red); font-weight: 600;
    }

    /* Disclaimer */
    .ptl-disclaimer {
      font-family: 'Lato', sans-serif; font-size: 11px; color: var(--muted2);
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 12px 16px; line-height: 1.6;
    }

    /* ─── Temporary Buydown Calculator ───────────────────── */
    .bd-layout {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 18px;
      align-items: start;
    }
    @media (max-width: 900px) { .bd-layout { grid-template-columns: 1fr; } }

    .bd-inputs-card { /* inherits .card */ }
    .bd-results-col { display: flex; flex-direction: column; gap: 16px; }

    /* Buydown type selector */
    .bd-type-bar {
      display: flex; flex-direction: column; gap: 6px;
      margin-bottom: 20px;
    }
    .bd-type-btn {
      display: flex; flex-direction: column; align-items: flex-start;
      padding: 11px 16px;
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; cursor: pointer;
      transition: border-color .18s, background .18s;
      text-align: left;
    }
    .bd-type-btn:hover { border-color: var(--blue); background: var(--blue-lt); }
    .bd-type-btn.active { border-color: var(--blue); background: var(--blue-lt); box-shadow: 0 0 0 2px var(--blue-dim); }
    .bd-type-label {
      font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 900;
      color: var(--slate);
    }
    .bd-type-btn.active .bd-type-label { color: var(--blue); }
    .bd-type-sub {
      font-family: 'Lato', sans-serif; font-size: 10.5px; color: var(--muted);
      margin-top: 2px;
    }

    /* Seed button */
    .bd-seed-btn {
      width: 100%; padding: 9px 14px; margin-top: 4px;
      background: transparent; border: 1.5px dashed var(--border2);
      border-radius: 8px; color: var(--muted);
      font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 700;
      cursor: pointer; transition: border-color .18s, color .18s, background .18s;
    }
    .bd-seed-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }

    /* Buydown rate fields */
    .bd-rate-grid {
      display: flex; flex-direction: column; gap: 8px;
    }
    .bd-rate-row {
      display: flex; align-items: center; gap: 12px;
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 8px; padding: 10px 14px;
    }
    .bd-rate-year {
      font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 900;
      letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
      width: 52px; flex-shrink: 0;
    }
    .bd-rate-input-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }
    .bd-rate-badge {
      font-family: 'Lato', sans-serif; font-size: 10px; font-weight: 900;
      letter-spacing: .06em; text-transform: uppercase;
      padding: 2px 8px; border-radius: 99px; white-space: nowrap;
    }
    .bd-rate-badge.reduced { background: var(--green-dim); color: var(--green); }
    .bd-rate-badge.note    { background: var(--blue-dim); color: var(--blue); }

    /* Payment hero grid */
    .bd-payment-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
    }
    .bd-payment-card {
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: 10px; padding: 16px;
      text-align: center; position: relative; overflow: hidden;
      transition: border-color .18s;
    }
    .bd-payment-card.note-rate-card {
      background: linear-gradient(135deg, var(--blue), var(--blue2));
      border-color: var(--blue);
    }
    .bd-payment-card.reduced-card {
      background: var(--white);
      border-color: var(--green);
    }
    .bd-pmt-period {
      font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 900;
      letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px;
    }
    .bd-payment-card.note-rate-card .bd-pmt-period { color: rgba(255,255,255,.75); }
    .bd-payment-card.reduced-card .bd-pmt-period   { color: var(--green); }
    .bd-payment-card:not(.note-rate-card):not(.reduced-card) .bd-pmt-period { color: var(--muted2); }
    .bd-pmt-rate {
      font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 500;
      margin-bottom: 4px;
    }
    .bd-payment-card.note-rate-card .bd-pmt-rate { color: rgba(255,255,255,.7); }
    .bd-payment-card:not(.note-rate-card) .bd-pmt-rate { color: var(--muted); }
    .bd-pmt-amount {
      font-family: 'Merriweather', serif; font-size: 1.5rem; font-weight: 900;
      line-height: 1.1;
    }
    .bd-payment-card.note-rate-card .bd-pmt-amount { color: var(--white); }
    .bd-payment-card.reduced-card .bd-pmt-amount   { color: var(--slate); }
    .bd-payment-card:not(.note-rate-card):not(.reduced-card) .bd-pmt-amount { color: var(--slate); }
    .bd-pmt-savings {
      display: inline-block; margin-top: 6px;
      font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600;
      background: var(--green-dim); color: var(--green);
      padding: 2px 8px; border-radius: 99px;
    }

    /* Cost card */
    .bd-cost-card { /* inherits .card */ }
    .bd-cost-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; margin-bottom: 16px;
    }
    .bd-cost-total {
      font-family: 'Merriweather', serif; font-size: 2rem; font-weight: 900;
      color: var(--blue); white-space: nowrap;
    }
    .bd-cost-breakdown {
      display: flex; flex-direction: column; gap: 6px;
      margin-bottom: 14px;
    }
    .bd-cost-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px; background: var(--bg);
      border: 1px solid var(--border); border-radius: 6px;
    }
    .bd-cost-row-label {
      font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 700; color: var(--muted);
    }
    .bd-cost-row-val {
      font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: 700; color: var(--slate);
    }
    .bd-note {
      font-family: 'Lato', sans-serif; font-size: 11.5px; color: var(--muted);
      background: var(--blue-lt); border: 1.5px solid var(--blue-lt2);
      border-radius: 8px; padding: 10px 14px; line-height: 1.6;
    }
    .bd-note:empty { display: none; }

    /* Schedule table */
    .bd-schedule-table {
      width: 100%; border-collapse: collapse; font-size: 12.5px;
    }
    .bd-schedule-table thead th {
      padding: 9px 14px; text-align: center;
      font-family: 'Lato', sans-serif; font-size: 9.5px; font-weight: 900;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--white); background: var(--blue);
      border-right: 1px solid rgba(255,255,255,.15);
    }
    .bd-schedule-table thead th:first-child { text-align: left; }
    .bd-schedule-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
    .bd-schedule-table tbody tr:hover { background: var(--blue-lt); }
    .bd-schedule-table tbody tr.bd-note-row { background: var(--bg); }
    .bd-schedule-table tbody tr.bd-note-row td { font-weight: 700; color: var(--blue); }
    .bd-schedule-table td {
      padding: 10px 14px; text-align: center;
      font-family: 'Roboto Mono', monospace; color: var(--slate2);
      border-right: 1px solid var(--border);
    }
    .bd-schedule-table td:first-child {
      text-align: left; font-family: 'Lato', sans-serif;
      font-size: 12px; font-weight: 700; color: var(--muted);
    }
    .bd-schedule-table td.bd-savings-cell { color: var(--green); font-weight: 700; }
    .bd-schedule-table td.bd-zero-cell    { color: var(--muted2); }
    .bd-schedule-table tfoot td {
      padding: 10px 14px; font-weight: 700;
      background: var(--blue-lt); border-top: 2px solid var(--blue-lt2);
      font-family: 'Lato', sans-serif; font-size: 11.5px; color: var(--blue);
    }

    /* Savings bar chart */
    #bdSavingsChart { display: flex; flex-direction: column; gap: 8px; }
    .bd-bar-row {
      display: flex; align-items: center; gap: 10px;
    }
    .bd-bar-label {
      font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 700;
      color: var(--muted); width: 52px; flex-shrink: 0; text-align: right;
    }
    .bd-bar-track {
      flex: 1; height: 28px; background: var(--bg);
      border: 1.5px solid var(--border); border-radius: 6px;
      overflow: hidden; position: relative;
    }
    .bd-bar-fill {
      height: 100%; border-radius: 4px;
      background: linear-gradient(to right, var(--green), #34d399);
      transition: width .5s cubic-bezier(.22,1,.36,1);
      display: flex; align-items: center; justify-content: flex-end;
      padding-right: 8px;
    }
    .bd-bar-fill-label {
      font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 700;
      color: var(--white); white-space: nowrap;
    }
    .bd-bar-note-label {
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      font-family: 'Roboto Mono', monospace; font-size: 11px;
      font-weight: 700; color: var(--muted2);
    }
    .bd-lifetime-row {
      margin-top: 14px; padding: 12px 16px;
      background: var(--blue-lt); border: 1.5px solid var(--blue-lt2);
      border-radius: 8px; display: flex; justify-content: space-between;
      align-items: center;
    }
    .bd-lifetime-row .bd-lt-label {
      font-family: 'Lato', sans-serif; font-size: 11.5px; font-weight: 700; color: var(--muted);
    }
    .bd-lifetime-row .bd-lt-val {
      font-family: 'Roboto Mono', monospace; font-size: 14px; font-weight: 700; color: var(--green);
    }
    .bd-lifetime-row:empty { display: none; }


/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════ */

@media (max-width: 600px) {
  h1 { font-size: 1.55rem; }
  .subtitle { font-size: 11.5px; }

  .mode-switcher {
    width: calc(100% - 24px);
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mode-switcher::-webkit-scrollbar { display: none; }
  .mode-btn { padding: 9px 13px; font-size: 11px; }
  .mode-btn .mode-emoji { font-size: 13px; }

  .container { gap: 12px; padding: 12px 12px 60px; }
  .card { padding: 18px 16px; }
  .row-2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .breakdown { grid-template-columns: 1fr 1fr; gap: 6px; }
  .breakdown-item { padding: 9px 11px; }
  .b-value { font-size: 13px; }
  .payment-amount { font-size: 2rem; }
  .chart-wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .donut-svg { align-self: center; }

  table { font-size: 11px; }
  thead th, td { padding: 7px 8px; }

  .cc-grid { grid-template-columns: 1fr; gap: 10px; }
  .fee-row { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .fee-amt-wrap { width: 90px; }
  .ctc-hero-amount { font-size: 1.6rem; }
  .ctc-state-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ctc-state-select { width: 100%; }

  .cl-scenario-grid { grid-template-columns: 1fr; }
  .cl-row-2 { grid-template-columns: 1fr 1fr; gap: 6px; }

  .refi-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .refi-compare-hero { gap: 6px; padding: 16px 12px; }
  .rch-amount { font-size: 1.4rem; }

  .ptl-metrics-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ptl-apply-row { flex-direction: column; align-items: flex-start; }
  .ptl-search-wrap { flex-wrap: wrap; gap: 8px; }
  .ptl-search-btn { width: 100%; }

  .bd-payment-grid { grid-template-columns: 1fr; }
  .bd-cost-header { flex-direction: column; gap: 8px; }
  .bd-cost-total { font-size: 1.6rem; }
  .bd-type-btn { padding: 9px 14px; }
}

@media (min-width: 601px) and (max-width: 820px) {
  .mode-btn { padding: 9px 16px; font-size: 12px; }
  .cl-scenario-grid { grid-template-columns: 1fr 1fr; }
  .ptl-metrics-grid { grid-template-columns: 1fr 1fr; }
  .bd-payment-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) and (orientation: landscape) {
  header .header-main { padding: 16px 24px; }
  h1 { font-size: 1.4rem; }
}

@media (hover: none) {
  input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
  .lt-btn { padding: 10px 3px; }
  .toggle-wrap { padding: 14px 16px; }
  .btn-table { padding: 14px; }
  .cl-remove-btn { width: 32px; height: 32px; font-size: 18px; }
  .bd-type-btn { padding: 12px 16px; }
}