@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');
/* Group header rows in two-row table headers */
.th-group{text-align:center;font-size:.78rem;font-weight:600;letter-spacing:normal;text-transform:none;color:var(--muted);background:var(--panel);}
th[rowspan]{vertical-align:middle;}
.tip-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--input-bg);color:var(--muted);font-size:.7rem;font-weight:600;cursor:default;margin-left:5px;flex-shrink:0;vertical-align:middle;line-height:1;border:1px solid var(--border);transition:border-color var(--motion-fast),color var(--motion-fast);}
.tip-icon:hover{border-color:var(--accent);color:var(--accent);}
/* Toggle switch */
.toggle-row{display:flex;align-items:center;gap:10px;padding:10px 0 12px;border-top:1px solid var(--border);}
.toggle-label{font-weight:700;font-size:.88rem;flex:1;}
.toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--motion-base);pointer-events:none;}
.toggle-switch input:checked~.toggle-knob,.toggle-switch input:checked+.toggle-track+.toggle-knob{transform:translateX(18px);}
*{box-sizing:border-box;min-width:0;margin:0;padding:0;}
body{margin:0;font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);transition:background var(--motion-base),color var(--motion-base);min-height:100vh;overflow-x:hidden;}
.container{max-width:1460px;margin:0 auto;padding:24px;}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow);}
.header{padding:22px 28px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.header-left h1{font-size:1.85rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;}
.header-left p{color:var(--muted);font-size:.9rem;line-height:1.5;}
.header-right{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.btn-theme{background:var(--input-bg);border:1.5px solid var(--border);color:var(--muted);border-radius:var(--radius-md);padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--motion-fast);white-space:nowrap;letter-spacing:.01em;}
.btn-theme:hover{border-color:var(--accent);color:var(--text);}
.btn-back{text-decoration:none;display:inline-flex;align-items:center;}
.layout{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px;}
.controls{padding:0;position:sticky;top:16px;align-self:start;overflow:hidden;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.controls::-webkit-scrollbar{width:0;height:0;}
.ctrl-tabs{display:flex;border-bottom:1px solid var(--border);}
.ctrl-tab{flex:1;padding:12px 6px;text-align:center;font-weight:600;font-size:.82rem;cursor:pointer;color:var(--muted);background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--motion-fast);letter-spacing:.02em;}
.ctrl-tab.active{color:var(--text);border-bottom-color:var(--accent);}
.ctrl-panel{display:none;padding:14px 16px 18px;}
.ctrl-panel.active{display:block;}
.section-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--border);}
.section-label:first-child{margin-top:0;}
.slider-block{padding:10px 0 14px;border-top:1px solid var(--border);}
.slider-block:first-of-type{border-top:none;}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;}
.slider-label{font-weight:700;font-size:.88rem;}
.slider-value{color:var(--accent);font-weight:700;font-size:.88rem;font-variant-numeric:tabular-nums;font-family:'DM Mono',monospace;cursor:text;}
input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;}
.slider-val-edit{display:none;width:5em;background:transparent;border:none;border-bottom:1.5px solid var(--accent);color:var(--accent);font-weight:700;font-size:.88rem;font-variant-numeric:tabular-nums;font-family:'DM Mono',monospace;text-align:right;outline:none;padding:0 1px;}
.help{color:var(--muted);font-size:.8rem;margin-top:4px;line-height:1.4;}
.field-row{display:flex;flex-direction:column;gap:4px;padding:10px 0 12px;border-top:1px solid var(--border);}
.field-row:first-of-type{border-top:none;}
.field-label{font-weight:700;font-size:.88rem;}
.field-sub{color:var(--muted);font-size:.78rem;line-height:1.35;margin-top:2px;}
.num-input{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:.9rem;font-weight:500;padding:10px 13px;width:100%;outline:none;transition:border-color var(--motion-fast);}
.num-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,184,248,.15);}
.input-row{display:flex;gap:8px;align-items:center;}
.input-row .num-input,.input-row .currency-wrap{flex:1;}
.input-row select{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:.88rem;font-weight:500;padding:10px 13px;outline:none;cursor:pointer;transition:border-color var(--motion-fast);}
select{background:var(--panel)!important;color:var(--text)!important;border:1.5px solid var(--border);border-radius:var(--radius-md);outline:none;}
select:focus{border-color:var(--accent);}
select option{background:var(--panel);color:var(--text);}
.radio-group{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.radio-opt{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--motion-fast);}
.radio-opt:hover{border-color:var(--accent);}
body.light .radio-opt:hover{border-color:var(--accent);}
.radio-opt.selected{border-color:var(--accent);background:rgba(139,184,248,.10);}
.radio-opt input[type=radio]{margin-top:2px;accent-color:var(--accent);flex-shrink:0;}
.radio-opt-text{font-size:.82rem;line-height:1.45;color:var(--muted);}
.radio-opt-text strong{color:var(--text);font-weight:700;display:block;margin-bottom:2px;font-size:.86rem;}
/* Segmented control (Simple / Detailed mortgage mode) */
.seg-group{display:flex;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:2px;margin-top:4px;}
.seg-btn{flex:1;background:transparent;border:none;border-radius:7px;padding:7px 14px;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all var(--motion-fast);font-family:inherit;white-space:nowrap;}
.seg-btn.active{background:var(--accent);color:#fff;}
.seg-btn:hover:not(.active){color:var(--text);}
/* Mortgage rate schedule (detailed mode) */
.rate-periods{display:grid;gap:8px;margin-top:6px;}
.rate-period-row{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 10px;display:grid;gap:7px;}
.rate-period-row.rp-beyond{opacity:.45;}
.rp-head{display:flex;align-items:center;gap:7px;}
.rp-years{font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap;}
.rp-years b{color:var(--text);font-family:'DM Mono',monospace;font-weight:600;}
.rp-head select{flex:1;min-width:0;font-size:.8rem;padding:6px 8px;cursor:pointer;}
.rate-period-row input[type=number]{background:var(--panel);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.84rem;padding:6px 8px;outline:none;text-align:right;font-family:'DM Mono',monospace;transition:border-color var(--motion-fast);}
.rate-period-row input[type=number]:focus{border-color:var(--accent);}
.rp-head .rp-to{width:4.4em;flex-shrink:0;}
.rp-delete{padding:5px 9px;font-size:.75rem;flex-shrink:0;}
.rp-rates{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.rp-fixed-wrap,.rp-float-wrap{display:inline-flex;align-items:center;gap:6px;}
.rp-rates input{width:5.2em;}
.rp-dash{color:var(--muted);}
.rp-unit{font-size:.78rem;color:var(--muted);}
.rate-schedule-actions{display:flex;gap:8px;margin-top:8px;}
.rate-schedule-actions .cagr-btn{flex:1;}
/* Detailed cost item lists (Costs of Owning / Renting) */
.cost-items{display:grid;gap:8px;margin-top:6px;}
.cost-item-row{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 10px;display:grid;gap:7px;}
.ci-head{display:flex;align-items:center;gap:7px;}
.ci-name{flex:1;min-width:0;background:var(--panel);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.82rem;padding:6px 8px;outline:none;transition:border-color var(--motion-fast);}
.ci-name:focus{border-color:var(--accent);}
.ci-delete{padding:5px 9px;font-size:.75rem;flex-shrink:0;}
.ci-line{display:flex;align-items:center;gap:7px;}
.ci-line .currency-wrap{flex:1;min-width:0;}
.ci-line .currency-input{width:100%;background:var(--panel);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.84rem;padding:6px 8px 6px 32px;outline:none;font-family:'DM Mono',monospace;transition:border-color var(--motion-fast);}
.ci-line .currency-input:focus{border-color:var(--accent);}
.ci-line select{flex-shrink:0;max-width:55%;font-size:.8rem;padding:6px 8px;cursor:pointer;}
.ci-infl-wrap{justify-content:flex-start;}
.ci-infl-label{font-size:.78rem;color:var(--muted);}
.ci-infl{width:5.2em;background:var(--panel);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.84rem;padding:6px 8px;outline:none;text-align:right;font-family:'DM Mono',monospace;transition:border-color var(--motion-fast);}
.ci-infl:focus{border-color:var(--accent);}
.cagr-box{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;margin-top:8px;display:grid;gap:10px;}
#cagrRows{display:grid;gap:8px;}
.cagr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;gap:8px;align-items:center;}
.cagr-actions{display:flex;flex-wrap:wrap;gap:8px;}
.cagr-row input{width:100%;min-width:0;background:var(--panel);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.84rem;padding:8px 10px;outline:none;transition:border-color var(--motion-fast);}
.cagr-row input:focus{border-color:var(--accent);}
.cagr-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:8px 12px;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity var(--motion-fast);}
.cagr-btn:hover{opacity:.85;}
.cagr-btn.delete{background:transparent;color:var(--negative-em);border:1px solid var(--data-neg-border);padding-inline:10px;}
.cagr-btn.delete:disabled{opacity:.45;cursor:not-allowed;}
.cagr-result{color:var(--accent2);font-size:.82rem;font-weight:700;line-height:1.4;min-height:1.2em;font-family:'DM Mono',monospace;}
@media(max-width:520px){
  .cagr-row{grid-template-columns:1fr;}
  .cagr-row .cagr-btn.delete{justify-self:start;}
}
.warning{margin:0 0 12px;padding:10px 12px;border-radius:var(--radius-md);background:rgba(255,210,140,.12);border:1px solid rgba(255,210,140,.25);color:#FFD28C;display:none;font-size:.82rem;line-height:1.5;}
body.light .warning{background:#FFF0D9;border-color:#F5D08A;color:#7A4A00;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px 16px;border-top:1px solid var(--border);}
.btn-primary{background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);padding:11px 22px;font-weight:600;cursor:pointer;font-size:14px;transition:opacity var(--motion-fast);flex:1;letter-spacing:.01em;}
.btn-primary:hover{opacity:.85;}
.btn-secondary{background:var(--input-bg);color:var(--text);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:11px 22px;font-weight:600;cursor:pointer;font-size:14px;transition:border-color var(--motion-fast);flex:1;letter-spacing:.01em;}
.btn-secondary:hover{border-color:var(--accent);}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.metric{padding:12px 14px;}
.metric .label{color:var(--muted);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.metric .value{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;font-family:'DM Mono',monospace;}
.metric .sub{color:var(--muted);font-size:.75rem;margin-top:4px;}
.chart-card{padding:20px;margin-bottom:18px;}
.chart-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.chart-header h2{font-size:1.1rem;}
.chart-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.graph-btn{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--muted);padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--motion-fast);letter-spacing:.01em;}
.graph-btn.active{border-color:var(--accent);color:var(--text);background:rgba(139,184,248,.12);}
.chart-export-btn{flex:0 0 auto;min-width:52px;padding:6px 10px;font-size:.68rem;line-height:1;white-space:nowrap;text-align:center;}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;font-size:.86rem;}
.legend-item{display:flex;align-items:center;gap:7px;}
.dot{width:11px;height:11px;border-radius:999px;flex-shrink:0;}
.canvas-wrap{position:relative;width:100%;height:400px;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);}
body.light .canvas-wrap{background:linear-gradient(180deg,rgba(139,184,248,.04),transparent);}
.hover-box{margin-top:10px;color:var(--muted);font-size:.84rem;min-height:20px;}
.bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:18px;}
.tile{padding:12px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-md);}
.tile .label{color:var(--muted);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;line-height:1.3;}
.tile .value{font-size:.95rem;font-weight:700;font-family:'DM Mono',monospace;}
.tile .value.pos{color:var(--data-pos-em);}
.tile .value.neg{color:var(--data-neg-em);}
.detail-section{padding:20px;margin-bottom:18px;}
.tab-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.tab-row{display:flex;gap:10px;flex-wrap:wrap;}
.tab-btn{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--muted);padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--motion-fast);}
.tab-btn.active{border-color:var(--accent);color:var(--text);background:rgba(139,184,248,.12);}
.cagr-toggle-btn{margin-top:8px;}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.84rem;font-family:'DM Mono',monospace;}
th,td{padding:8px 6px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;}
th:first-child,td:first-child{text-align:left;font-family:'DM Sans',system-ui,sans-serif;}
th{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
tr:hover td{background:rgba(139,184,248,.04);}
body.light tr:hover td{background:rgba(90,145,232,.04);}
.table-wrap{overflow-x:auto;overflow-y:auto;max-height:420px;border:1px solid var(--border);border-radius:var(--radius-md);scrollbar-gutter:stable both-edges;}
/* Sticky header — use box-shadow instead of border-bottom to survive border-collapse+sticky bug */
.table-wrap thead th{position:sticky;background:var(--panel);z-index:2;border-bottom:none;box-shadow:inset 0 -1px 0 var(--border);}
.table-wrap thead tr:first-child th{top:0;z-index:4;}
.table-wrap thead tr:nth-child(2) th{top:var(--thead-row1-height,34px);z-index:3;}
.table-wrap table{min-width:max-content;}
.table-wrap table td:first-child{
  position:sticky;
  left:0;
  background:var(--panel);
  z-index:1;
}
/* Corner cell (Year, rowspan=2 in first header row) — frozen in both x and y; must outrank all other sticky cells */
.table-wrap table thead tr:first-child th:first-child{
  left:0;
  z-index:8;
}
/* Group separator applied to both th and td */
.th-sep-right,.td-sep-right{border-right:1px solid var(--border)!important;}
h3{font-size:.75rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;font-family:'DM Sans',system-ui,sans-serif;}
.page-footer{max-width:1460px;margin:0 auto;padding:0 24px 24px;}
.page-footer-info p:last-child{margin-bottom:0;}
@media(max-width:1200px){
  .metrics{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .layout,.bottom,.metrics{grid-template-columns:1fr;}
  .controls{position:static;max-height:none;}
  .canvas-wrap{height:380px!important;}
  .summary-grid{grid-template-columns:repeat(2,1fr);}
  .header{flex-direction:column;gap:10px;padding:16px 18px;}
  .container{padding:16px;}
}
@media(max-width:600px){
  h1{font-size:1.35rem;}
  .container{padding:10px;}
  .summary-grid{grid-template-columns:1fr 1fr;}
  .metrics{grid-template-columns:1fr;}
  .btn-row{flex-direction:column;}
  .header{padding:14px 16px;}
}
.quick-start-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.quick-start-label{font-weight:700;font-size:.82rem;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.quick-start-btns{display:flex;gap:6px;flex-wrap:wrap;}
.quick-start-btn{background:var(--input-bg);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--muted);padding:5px 11px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all var(--motion-fast);white-space:nowrap;}
.quick-start-btn:hover{border-color:var(--accent);color:var(--text);}
.quick-start-btn.active{border-color:var(--accent2);color:var(--text);background:rgba(143,205,189,.15);}
abbr.abbr-hint{text-decoration:underline dotted;cursor:help;text-underline-offset:2px;}