:root {
      --bg: #eef1f6;
      --card-bg: #ffffff;
      --border: #dce1ea;
      --foreground: #0c1526;
      --muted: #f0f4f8;
      --muted-fg: #64748b;
      --label: #445170;
      --sublabel: #7a8aa8;
      --muted-text: #a8b5c8;
      --surface-alt: #f2f5f9;
      --primary: #4338ca;
    }
    *, *::before, *::after { box-sizing: border-box; }
     body {
      font-family: "Inter", sans-serif;
      background: var(--bg);
      color: var(--foreground);
      margin: 0; padding: 0;
    }

    /* ── Hero ── */
    #hero { padding: 2.25rem 1.75rem 0; transition: background 0.35s; }
    #hero .hero-inner { max-width: 1060px; margin: 0 auto; }
    #hero h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 0.5rem; }
    .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.5rem; }
    .subtitle { color: rgba(255,255,255,0.7); font-size: 15px; margin: 0; }

    /* ── Goal tabs ── */
    .goal-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; }
    .goal-tab { padding: 1.25rem; border-radius: 1rem 1rem 0 0; border: none; cursor: pointer; text-align: left; transition: all 0.2s; background: rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .goal-tab:hover { background: rgba(255,255,255,0.2); }
    .goal-tab.active { background: var(--card-bg); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
    .goal-icon-wrap { width:36px; height:36px; border-radius:0.6rem; display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:rgba(255,255,255,0.2); flex-shrink:0; }
    .goal-label-sm { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.12em; }
    .goal-name { font-size:17px; font-weight:800; margin:0; }
    .goal-desc { font-size:12px; line-height:1.45; margin:0; }

    /* ── Main ── */
    #main-content { max-width:1060px; margin:0 auto; padding:1.5rem 1.75rem 2.5rem; }
    .calc-layout { display:flex; gap:1rem; align-items:flex-start; }
    .left-col { flex:1; min-width:0; }
    .right-col { width:360px; flex-shrink:0; position:sticky; top:1rem; }

    /* ── Cards ── */
    .lims-card { background:var(--card-bg); border-radius:1rem; border:1px solid var(--border); padding:1.5rem; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:1rem; }
    .lims-card.no-pad { padding:0; overflow:hidden; }

    /* ── Badges / Labels ── */
    .step-badge { width:28px; height:28px; border-radius:0.5rem; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; flex-shrink:0; }
    .section-title { font-size:14px; font-weight:800; color:var(--foreground); margin:0; }
    .section-sub { font-size:11px; color:var(--muted-fg); margin:0; }
    .lims-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--label); display:block; }

    /* ── Selector cards ── */
    .selector-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; }
    .selector-card { padding:1.25rem; border-radius:0.75rem; border:2px solid var(--border); cursor:pointer; text-align:left; transition:all 0.2s; background:var(--card-bg); position:relative; overflow:hidden; }
    .selector-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.1); transform:translateY(-2px); }
    .selector-card.active { box-shadow:0 8px 20px rgba(0,0,0,0.1); }
    .top-bar { position:absolute; top:0; left:0; right:0; height:3px; }
    .selected-pill { display:inline-flex; align-items:center; border-radius:0.4rem; padding:0.15rem 0.5rem; font-size:10px; font-weight:800; color:#fff; text-transform:uppercase; margin-top:0.625rem; }
    .auto-match-pill { position:absolute; top:10px; right:10px; background:#fffbeb; border:1px solid #fcd34d; border-radius:4px; padding:2px 8px; font-size:9px; font-weight:800; color:#92400e; text-transform:uppercase; }

    /* ── Stat grid ── */
    .stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.75rem; margin-top:1.25rem; padding:1rem; border-radius:0.75rem; background:var(--surface-alt); }
    .stat-val { font-size:15px; font-weight:800; }
    .stat-lbl { font-size:10px; color:var(--muted-fg); text-transform:uppercase; letter-spacing:0.07em; margin-top:2px; }

    /* ── Inputs ── */
    .input-row { margin-bottom:0.875rem; }
    .input-lbl-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.25rem; }
    .input-note { font-size:10px; color:var(--muted-text); font-style:italic; }
    .input-wrap { display:flex; align-items:center; border:1.5px solid var(--border); border-radius:0.5rem; overflow:hidden; background:#fff; transition:border-color 0.15s, box-shadow 0.15s; }
    .input-wrap:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
    .input-prefix { padding:0 0.625rem; font-size:12px; font-weight:700; color:var(--muted-text); background:var(--surface-alt); border-right:1px solid var(--border); align-self:stretch; display:flex; align-items:center; white-space:nowrap; }
    .input-suffix { padding:0 0.625rem; font-size:12px; color:var(--muted-text); white-space:nowrap; }
    .input-wrap input { flex:1; border:none; background:transparent; padding:0.5rem 0.75rem; font-size:14px; font-weight:600; color:var(--foreground); outline:none; font-family:inherit; min-width:0; width:100%; }
    .input-wrap.readonly { opacity:0.6; }

    /* ── Sliders ── */
    .slider-row { margin-bottom:1rem; }
    .slider-lbl-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.25rem; }
    .slider-val { font-size:14px; font-weight:800; }
    .slider-note { font-size:10px; color:var(--muted-text); font-style:italic; margin-bottom:0.375rem; }
    .range-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--muted-text); margin-top:2px; }
    input[type=range] { width:100%; cursor:pointer; }

    /* ── Advanced ── */
    .adv-header { width:100%; border:none; cursor:pointer; padding:1rem 1.5rem; display:flex; justify-content:space-between; align-items:center; background:var(--card-bg); transition:background 0.15s; }
    .adv-header.open { background:rgba(0,0,0,0.025); }
    .adv-toggle-pill { padding:0.375rem 0.75rem; border-radius:0.5rem; font-size:11px; font-weight:700; background:var(--muted); color:var(--label); }
    .adv-tabs { display:flex; border-bottom:1px solid var(--border); overflow-x:auto; }
    .adv-tab { padding:0.625rem 1rem; border:none; cursor:pointer; font-size:12px; font-weight:700; white-space:nowrap; background:transparent; color:var(--label); border-bottom:2px solid transparent; transition:all 0.15s; display:flex; align-items:center; gap:0.375rem; font-family:inherit; }
    .adv-tab.active { background:var(--muted); }
    .adv-body { padding:1.5rem; }

    /* ── Results ── */
    .metric-card { border-radius:0.75rem; padding:0.875rem; border:1.5px solid var(--border); }
    .metric-icon { font-size:1.125rem; margin-bottom:0.25rem; }
    .metric-val { font-size:1.25rem; font-weight:800; line-height:1; }
    .metric-lbl { font-size:11px; margin-top:0.25rem; font-weight:500; }

    /* ── HIGHLIGHT metric card ── */
    .metric-card.highlight-result {
      border-width: 2px;
      box-shadow: 0 0 0 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.12);
      position: relative;
      overflow: hidden;
    }
    .metric-card.highlight-result::before {
      content: '★ KEY';
      position: absolute;
      top: 6px;
      right: 6px;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.06em;
      padding: 2px 5px;
      border-radius: 3px;
      background: rgba(255,255,255,0.25);
      color: #fff;
    }

    .breakdown-bar { height:8px; border-radius:999px; overflow:hidden; display:flex; margin-bottom:0.625rem; }

    /* ── Cash flow ── */
    .cf-table { width:100%; font-size:12px; border-collapse:collapse; }
    .cf-table th, .cf-table td { padding:0.5rem 0.625rem; }
    .cf-table thead tr { background:var(--muted); }
    .cf-table thead th { font-weight:700; color:var(--muted-fg); text-align:right; font-size:11px; border-bottom:2px solid var(--border); }
    .cf-table thead th:first-child { text-align:left; }
    .cf-table td { text-align:right; }
    .cf-table td:first-child { text-align:left; }
    .cf-table tbody tr { border-bottom:1px solid var(--border); }
    .cf-table tbody tr.bold-row { background:var(--muted); font-weight:700; }

    /* ── Logic box ── */
    .logic-box { border:1.5px dashed #c7d2fe; border-radius:0.75rem; overflow:hidden; margin-top:1.5rem; }
    .logic-toggle { width:100%; background:#eef2ff; border:none; cursor:pointer; padding:0.75rem 1rem; display:flex; justify-content:space-between; align-items:center; font-family:inherit; }
    .logic-body { padding:1rem; background:rgba(238,242,255,0.3); }
    .logic-item { padding-bottom:0.75rem; margin-bottom:0.75rem; border-bottom:1px solid #e0e7ff; }
    .logic-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
    .logic-formula { font-size:11px; font-family:monospace; background:#eef2ff; padding:0.25rem 0.5rem; border-radius:0.375rem; margin:0.25rem 0; line-height:1.5; }
    .logic-assumption { font-size:10px; color:var(--muted-text); font-style:italic; }

    /* ── Plan badge ── */
    .plan-auto-badge { display:inline-flex; align-items:center; gap:0.375rem; background:#fffbeb; border:1px solid #fcd34d; border-radius:0.5rem; padding:0.375rem 0.75rem; font-size:11px; font-weight:700; color:#92400e; }

    /* ── Responsive ── */
    @media (max-width:991px) { .calc-layout { flex-direction:column; } .right-col { width:100%; position:static; } }
    @media (max-width:767px) { .goal-tabs { grid-template-columns:1fr; } .goal-tab { border-radius:0.75rem; } .goal-tab.active { border-radius:0.75rem; } .stat-grid { grid-template-columns:repeat(2,1fr); } #hero { padding:1.5rem 1rem 0; } #main-content { padding:1rem; } }
    @media (max-width:575px) { .selector-grid { grid-template-columns:1fr; } .selector-grid-2 { grid-template-columns:1fr; } }
    .selector-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem; }
    .input-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
    .input-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.75rem; }
    @media (max-width:575px) { .input-grid-2, .input-grid-3 { grid-template-columns:1fr; } }