/* ════════════════════════════════════════════════════════════
   Calculator layout — shared by every Simvln finance calculator.
   ════════════════════════════════════════════════════════════ */
/* Page shell: left ad | content | right ad (matches the SFinance hub) */
.calc-shell{display:grid;grid-template-columns:170px minmax(0,1fr) 170px;gap:1.2rem;max-width:1580px;margin:0 auto;padding:0 1.5%;align-items:start;}
.calc-ad{position:sticky;top:18px;}
.calc-mid{min-width:0;}
.calc-wrap{max-width:none;margin:0;padding:16px 0 0;}
.calc-mid .calc-seo{max-width:none;margin:1.6rem 0 0;padding:0;}

/* Breadcrumb */
.calc-bc{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:0.8rem;color:var(--muted);margin-bottom:0.7rem;}
.calc-bc a{color:var(--accent);text-decoration:none;}
.calc-bc a:hover{color:var(--accent3);}
.calc-bc .sep{opacity:0.6;}
.calc-bc .tool-s{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;}

/* Heading */
.calc-head{margin-bottom:1rem;}
.calc-head h1{font-family:'Syne',sans-serif;font-size:clamp(1.3rem,2.5vw,2rem);font-weight:700;line-height:1.18;letter-spacing:-0.02em;}
.calc-head h1 .grad{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.calc-head p{color:var(--muted);font-size:0.9rem;margin-top:0.35rem;max-width:720px;font-weight:300;}

/* ── STAGE: [inputs+buttons] | [results] | [quick access] ── */
.calc-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 172px;gap:1.2rem;align-items:start;}
.calc-col{display:flex;flex-direction:column;}
.calc-panel{position:relative;background:linear-gradient(160deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.02) 60%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.13);border-radius:18px;box-shadow:0 6px 22px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.22);padding:1.2rem 1.3rem;}
.calc-panel-title{font-family:'Syne',sans-serif;font-size:0.95rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:8px;}
.calc-panel-title i{color:var(--accent);}
.calc-right{display:flex;flex-direction:column;}

/* Currency picker — floats above the results box (doesn't push box position or size), right-aligned */
.cur-pick-bar{position:absolute;top:0;right:1.3rem;transform:translateY(-140%);}
.cur-pick{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:50px;padding:3px 6px 3px 11px;box-shadow:0 4px 14px rgba(0,0,0,0.25);}
.cur-pick i{color:var(--accent);font-size:0.78rem;}
.cur-pick select{background:transparent;border:none;outline:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:600;cursor:pointer;}
.cur-pick select option{background:#0A1220;color:var(--text);}

/* ── Input control ── */
.cinput{margin-bottom:1.05rem;}
.cinput:last-child{margin-bottom:0;}
.cinput-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:0.5rem;}
.cinput-row label{font-size:0.82rem;color:var(--text);font-weight:500;}
.cinput-ctrl{display:flex;align-items:center;gap:8px;}
.cinput-box{display:flex;align-items:center;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:9px;padding:5px 9px;transition:border-color 0.18s;}
.cinput-box.box-wide{width:118px;}
.cinput-box.box-narrow{width:64px;}
.cinput-box:focus-within{border-color:var(--accent);}
.cinput-box input{background:transparent;border:none;outline:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.92rem;font-weight:600;width:100%;text-align:right;-moz-appearance:textfield;}
.cinput-box input::-webkit-outer-spin-button,.cinput-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cinput-after{color:var(--muted);font-size:0.8rem;white-space:nowrap;}
.cinput-words{font-size:0.74rem;color:var(--accent3);margin-top:4px;text-align:right;min-height:0.9rem;}
.cseg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.cseg-btn{background:rgba(255,255,255,0.04);border:none;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.76rem;font-weight:600;padding:5px 11px;cursor:pointer;transition:all 0.15s;}
.cseg-btn+.cseg-btn{border-left:1px solid var(--border);}
.cseg-btn.active{background:var(--grad);color:#050A14;}

/* Range slider */
input[type=range].crange{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:rgba(255,255,255,0.1);outline:none;cursor:pointer;}
input[type=range].crange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:var(--accent);border:2px solid #050A14;box-shadow:0 0 0 1px var(--accent),0 2px 6px rgba(0,212,255,0.5);cursor:pointer;}
input[type=range].crange::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid #050A14;box-shadow:0 0 0 1px var(--accent);cursor:pointer;}

/* ── Results: donut LEFT + breakdown RIGHT ── */
.cres-top{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:center;}
.cchart-donut{width:204px;height:204px;position:relative;flex-shrink:0;}
.cres-breakdown{display:flex;flex-direction:column;}
.cres-hero{margin-bottom:0.9rem;}
.cres-hero .lbl{font-size:0.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;}
.cres-hero .val{font-family:'DM Sans',sans-serif;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.05;margin-top:0.15rem;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum";}
.cres-list{display:flex;flex-direction:column;gap:0.5rem;}
.cres-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:0.5rem;border-bottom:1px solid var(--border);}
.cres-row:last-child{border-bottom:none;padding-bottom:0;}
.cres-k{display:flex;align-items:center;gap:8px;font-size:0.82rem;color:var(--muted);}
.cres-k .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.cres-v{font-family:'DM Sans',sans-serif;font-size:1.02rem;font-weight:600;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum","lnum";}

/* Trend chart inside right box bottom (fixed height — no resize loop) */
.cres-trend{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--border);}
.cres-trend-title{font-size:0.78rem;color:var(--muted);margin-bottom:0.5rem;}
.cchart-trend{position:relative;height:210px;width:100%;}

/* Internal rail: quick access (vertical list) */
.calc-rail{display:block;}
.rail-quick .crail-title{font-size:0.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;margin-bottom:0.5rem;}
.rail-quick .crail-quick{display:flex;flex-direction:column;gap:0.45rem;}
.ad-slot{width:160px;height:600px;margin:0 auto;border:1px dashed rgba(255,255,255,0.14);border-radius:14px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:0.72rem;letter-spacing:0.04em;line-height:1.7;background:rgba(255,255,255,0.02);}

/* ── Controls below each box (compare+actions under left, quick under right) ── */
.belt-left{display:flex;flex-direction:column;align-items:center;gap:0.7rem;margin-top:1rem;}
.belt-right{margin-top:1rem;}
.cbtn-compare{display:inline-flex;align-items:center;gap:6px;background:rgba(0,255,157,0.08);border:1px solid rgba(0,255,157,0.25);color:var(--accent3);font-family:'DM Sans',sans-serif;font-size:0.82rem;font-weight:700;padding:8px 22px;border-radius:50px;cursor:pointer;text-decoration:none;transition:all 0.18s;}
.cbtn-compare:hover{border-color:var(--accent3);transform:translateY(-2px);}
.cactions{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;width:100%;max-width:320px;}
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:500;padding:7px 14px;border-radius:50px;cursor:pointer;transition:all 0.18s;text-decoration:none;}
.cbtn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.cbtn i{font-size:0.8rem;}

/* Quick access buttons */
.crail-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;padding:8px 11px;color:var(--text);text-decoration:none;font-size:0.76rem;transition:all 0.16s;}
.crail-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateX(2px);}
.crail-btn i{color:var(--accent);font-size:0.8rem;width:16px;text-align:center;flex-shrink:0;}
.crail-btn:hover i{color:var(--accent3);}

/* Toast */
.cbtn-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg3);border:1px solid var(--accent);color:var(--text);padding:10px 20px;border-radius:50px;font-size:0.84rem;opacity:0;pointer-events:none;transition:opacity 0.25s,transform 0.25s;z-index:9999;}
.cbtn-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── Amortisation schedule (single header, tight years, date button) ── */
.ctable-wrap{margin-top:1.4rem;}
.ctable-toggle{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;width:100%;background:linear-gradient(160deg,rgba(0,212,255,0.08),rgba(255,255,255,0.02));border:1px solid var(--border);border-radius:12px;padding:0.7rem 1.1rem;}
.ctt-label{font-family:'Syne',sans-serif;font-size:0.9rem;font-weight:700;color:var(--text);cursor:pointer;justify-self:start;}
.ctt-date{position:relative;justify-self:center;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:50px;padding:5px 12px;font-size:0.78rem;color:var(--accent);cursor:pointer;font-weight:600;}
.ctt-date .ctt-date-lbl{white-space:nowrap;}
.ctt-date input[type=date]{background:transparent;border:none;outline:none;color:var(--accent);font-family:'DM Sans',sans-serif;font-size:0.76rem;font-weight:600;cursor:pointer;color-scheme:dark;width:112px;padding:0;}
.ctt-date input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(0.7) sepia(1) saturate(4) hue-rotate(150deg) brightness(1.3);}
.ctt-chev{justify-self:end;color:var(--accent);cursor:pointer;transition:transform 0.25s;font-size:0.8rem;}
.ctable-toggle.open .ctt-chev{transform:rotate(180deg);}
.ctable-years{margin-top:0.6rem;}
table.ctable{width:100%;border-collapse:collapse;table-layout:fixed;font-size:0.78rem;}
table.ctable th,table.ctable td{padding:5px 9px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
table.ctable td{border-bottom:1px solid rgba(255,255,255,0.05);}
table.ctable td:first-child,table.ctable th:first-child{text-align:left;}
.ctable-head{margin-bottom:0;}
.ctable-head th{background:var(--bg2);color:var(--muted);font-weight:600;text-transform:uppercase;font-size:0.66rem;letter-spacing:0.04em;padding:7px 9px;border-bottom:1px solid var(--border);}
.cyear{border-bottom:1px solid var(--border);}
.cyear-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.82rem;font-weight:600;padding:0.5rem 0.4rem;cursor:pointer;text-align:left;}
.cyear-tab .ysum{color:var(--muted);font-weight:400;font-size:0.74rem;}
.cyear-tab i{color:var(--accent);font-size:0.66rem;transition:transform 0.25s;}
.cyear-tab.open i{transform:rotate(180deg);}
.cyear-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease;}
.cyear-body.open{max-height:560px;overflow:auto;}

/* ── SEO content (Formula only) ── */
.calc-seo{max-width:1240px;margin:1.6rem auto 0;padding:0 4%;}
.calc-seo h2{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:700;margin:1.2rem 0 0.6rem;}
.calc-formula{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:0.9rem 1.1rem;font-size:0.92rem;color:var(--text);max-width:820px;line-height:1.7;}
.calc-formula code{color:var(--accent);font-family:'DM Sans',sans-serif;}

/* ── Tool hub cards (Utility Tools / SFinance hub standalone pages) ── */
.tool-grid{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;margin-top:0.4rem;}
.tool-section .tool-grid{justify-content:flex-start;}
.tool-card{width:150px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.4rem 0.9rem 1.2rem;cursor:pointer;font-family:inherit;text-decoration:none;background:linear-gradient(160deg,rgba(255,255,255,0.11) 0%,rgba(255,255,255,0.025) 42%,rgba(255,255,255,0.01) 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.15);border-radius:20px;box-shadow:0 6px 20px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.28);transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;}
.tool-card:hover{transform:translateY(-5px);border-color:rgba(0,212,255,0.4);box-shadow:0 10px 28px rgba(0,150,200,0.22),inset 0 1px 0 rgba(255,255,255,0.38);}
.tool-ic{width:36px;height:36px;border-radius:11px;background:rgba(0,212,255,0.12);border:1px solid rgba(0,212,255,0.2);display:flex;align-items:center;justify-content:center;margin-bottom:0.55rem;}
.tool-ic i{font-size:0.95rem;color:var(--accent);transition:color 0.2s;}
.tool-card:hover .tool-ic i{color:var(--accent3);}
.tool-card h4{font-size:0.84rem;font-weight:700;margin:0 0 0.3rem;color:var(--text);line-height:1.3;}
.tool-card p{font-size:0.7rem;color:var(--muted);margin:0;line-height:1.45;}
.tool-section{padding:0;margin-bottom:1.6rem;}
.tool-section:last-child{margin-bottom:0;}
.tool-cat-title{font-family:'Syne',sans-serif;font-size:1.35rem;font-weight:700;letter-spacing:-0.01em;text-align:left;color:var(--text);margin:0 0 1rem;}
.tool-cat-title::after{content:'';display:block;width:36px;height:3px;background:var(--grad);border-radius:2px;margin:0.45rem 0 0;}

/* ── Live converters (currency / crypto) ── */
.conv-panel{max-width:620px;margin:0 auto;}
.conv-row{display:grid;grid-template-columns:1fr auto 1fr;gap:0.8rem;align-items:end;margin-bottom:1.1rem;}
.conv-field label{display:block;font-size:0.76rem;color:var(--muted);margin-bottom:0.35rem;text-transform:uppercase;letter-spacing:0.04em;}
.conv-field select,.conv-amt input{width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.95rem;font-weight:600;outline:none;transition:border-color 0.18s;}
.conv-field select:focus,.conv-amt input:focus{border-color:var(--accent);}
.conv-field select option{background:#0A1220;}
.conv-swap{background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.3);color:var(--accent);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:0.95rem;transition:all 0.2s;flex-shrink:0;margin-bottom:2px;}
.conv-swap:hover{background:rgba(0,212,255,0.2);transform:rotate(180deg);}
.conv-amt{margin-bottom:1.2rem;}
.conv-result{text-align:center;padding:1.4rem 1rem;background:linear-gradient(160deg,rgba(0,212,255,0.08),rgba(255,255,255,0.02));border:1px solid var(--border);border-radius:16px;}
.conv-result .big{font-family:'DM Sans',sans-serif;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-variant-numeric:tabular-nums lining-nums;}
.conv-result .rate{color:var(--muted);font-size:0.84rem;margin-top:0.5rem;}
.conv-note{text-align:center;font-size:0.74rem;color:var(--muted);margin-top:0.9rem;}
.conv-note .stale{color:#FFD84D;}

/* ── EMI Compare (2–5 scenarios) ── */
.ccmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:1.2rem;}
.ccmp-card{position:relative;display:flex;flex-direction:column;}
.ccmp-card.best{border-color:rgba(0,255,157,0.45);box-shadow:0 6px 22px rgba(0,255,157,0.12),inset 0 1px 0 rgba(255,255,255,0.22);}
.ccmp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:0.9rem;}
.ccmp-name{display:flex;align-items:center;gap:8px;font-family:'Syne',sans-serif;font-size:0.92rem;font-weight:700;}
.ccmp-name .dot{width:11px;height:11px;border-radius:4px;flex-shrink:0;}
.ccmp-badge{background:var(--grad);color:#050A14;font-size:0.62rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;padding:3px 9px;border-radius:50px;white-space:nowrap;}
.ccmp-x{background:none;border:1px solid var(--border);color:var(--muted);width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:0.7rem;display:inline-flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0;}
.ccmp-x:hover{color:#FF6B6B;border-color:#FF6B6B;}
.ccmp-emi{margin:0.9rem 0 0.55rem;padding-top:0.75rem;border-top:1px solid var(--border);}
.ccmp-emi .lbl{font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;}
.ccmp-emi .val{font-family:'DM Sans',sans-serif;font-size:1.55rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-variant-numeric:tabular-nums lining-nums;}
.ccmp-add-wrap{display:flex;justify-content:center;margin-bottom:1.4rem;}
.ccmp-add{display:inline-flex;align-items:center;gap:8px;background:rgba(0,212,255,0.07);border:1px dashed rgba(0,212,255,0.4);color:var(--accent);font-family:'DM Sans',sans-serif;font-size:0.84rem;font-weight:700;padding:9px 24px;border-radius:50px;cursor:pointer;transition:all 0.18s;}
.ccmp-add:hover{background:rgba(0,212,255,0.13);transform:translateY(-2px);}
.ccmp-add:disabled{opacity:0.35;cursor:not-allowed;transform:none;}
.ccmp-section-title{font-family:'Syne',sans-serif;font-size:0.95rem;font-weight:700;margin-bottom:0.8rem;display:flex;align-items:center;gap:8px;}
.ccmp-section-title i{color:var(--accent);}
.ccmp-tbl-scroll{overflow-x:auto;}
table.ccmp-tbl{width:100%;border-collapse:collapse;font-size:0.82rem;}
table.ccmp-tbl th,table.ccmp-tbl td{padding:8px 12px;text-align:right;white-space:nowrap;}
table.ccmp-tbl th:first-child,table.ccmp-tbl td:first-child{text-align:left;color:var(--muted);font-weight:500;}
table.ccmp-tbl thead th{color:var(--text);font-family:'Syne',sans-serif;font-size:0.8rem;border-bottom:1px solid var(--border);}
table.ccmp-tbl thead th .dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;}
table.ccmp-tbl tbody td{border-bottom:1px solid rgba(255,255,255,0.05);font-variant-numeric:tabular-nums lining-nums;}
table.ccmp-tbl td.best{color:var(--accent3);font-weight:700;}
.ccmp-chart{position:relative;height:250px;width:100%;}
.ccmp-actions{display:flex;justify-content:center;gap:0.5rem;flex-wrap:wrap;margin-top:1.3rem;}
.ccmp-actions .cbtn{min-width:110px;}

/* Matrix input+result table (fields as rows, loans A/B… as columns) */
.ccmp-matrix{min-width:440px;}
.ccmp-matrix .rowlbl{text-align:left;color:var(--text);font-weight:600;font-size:0.82rem;white-space:normal;}
.ccmp-matrix thead th{vertical-align:bottom;font-size:0.82rem;}
.ccmp-matrix .colhead{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;white-space:nowrap;}
.ccmp-matrix .colhead .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.ccmp-matrix .colhead .ccmp-badge{padding:2px 7px;}
.ccmp-colx{background:none;border:1px solid var(--border);color:var(--muted);width:20px;height:20px;border-radius:50%;font-size:0.56rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0;}
.ccmp-colx:hover{color:#FF6B6B;border-color:#FF6B6B;}
.ccmp-in-cell input{width:100%;min-width:96px;max-width:160px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:8px;padding:6px 9px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.92rem;font-weight:600;text-align:right;outline:none;transition:border-color 0.18s;-moz-appearance:textfield;}
.ccmp-in-cell input:focus{border-color:var(--accent);}
.ccmp-in-cell input::-webkit-outer-spin-button,.ccmp-in-cell input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ccmp-in-cell .w{font-size:0.66rem;color:var(--accent3);margin-top:3px;text-align:right;min-height:0.8rem;}
.ccmp-unit{display:inline-flex;vertical-align:middle;transform:scale(0.88);}
.ccmp-matrix tbody.res{border-top:2px solid var(--border);}
.ccmp-matrix tbody.res td{padding-top:9px;}
.ccmp-addcol{display:inline-flex;align-items:center;gap:6px;background:rgba(0,212,255,0.08);border:1px dashed rgba(0,212,255,0.4);color:var(--accent);border-radius:50px;padding:5px 15px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:700;transition:all 0.18s;}
.ccmp-addcol:hover{background:rgba(0,212,255,0.15);}
.ccmp-addcol:disabled{opacity:0.35;cursor:not-allowed;}
.ccmp-title-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.9rem;flex-wrap:wrap;}

/* Loan details board: labels column + one card per loan + Add-loan card */
.ccmp-board{display:flex;gap:0.5rem;align-items:stretch;padding-top:0.2rem;}
.ccmp-lcol{display:flex;flex-direction:column;flex-shrink:0;min-width:130px;}
.ccmp-lhead{height:54px;}
.ccmp-lrow{height:62px;display:flex;align-items:center;font-size:0.82rem;font-weight:600;color:var(--text);}
.ccmp-lrow .u{color:var(--muted);font-weight:400;margin-left:5px;font-size:0.76rem;}
.ccmp-lrow .ccmp-unit{margin-left:8px;}
.ccmp-lcard{display:flex;flex-direction:column;flex:1 1 110px;min-width:110px;max-width:160px;background:linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid var(--border);border-radius:14px;padding:0 0.65rem 0.7rem;transition:border-color 0.18s,box-shadow 0.18s;}
.ccmp-lcard.best{border-color:rgba(0,255,157,0.45);box-shadow:0 6px 22px rgba(0,255,157,0.12);}
.ccmp-lchead{height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:'Syne',sans-serif;font-weight:700;font-size:0.82rem;}
.ccmp-lchead-top{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;}
.ccmp-lchead .dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.ccmp-lchead .ccmp-colx{margin-left:auto;}
.ccmp-lcell{height:62px;display:flex;flex-direction:column;justify-content:center;}
.ccmp-lcell input{width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:9px;padding:6px 8px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.88rem;font-weight:600;text-align:right;outline:none;transition:border-color 0.18s;-moz-appearance:textfield;}
.ccmp-lcell input:focus{border-color:var(--accent);}
.ccmp-lcell input::-webkit-outer-spin-button,.ccmp-lcell input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ccmp-lcell .w{font-size:0.65rem;color:var(--accent3);margin-top:3px;text-align:right;min-height:0.8rem;}
.ccmp-addcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;flex-shrink:0;align-self:stretch;min-width:80px;max-width:90px;background:rgba(0,212,255,0.06);border:1px dashed rgba(0,212,255,0.4);border-radius:14px;color:var(--accent);cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:700;font-size:0.82rem;transition:background 0.18s,transform 0.18s;}
.ccmp-addcard:hover{background:rgba(0,212,255,0.13);transform:translateY(-2px);}
.ccmp-addcard i{font-size:1.15rem;}

/* ── Responsive ── */
@media(max-width:1200px){
  .calc-shell{grid-template-columns:1fr;gap:0;padding:0 4%;}
  .calc-ad{display:none;}
}
@media(max-width:1000px){
  .calc-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);}
  .calc-rail{grid-column:1 / -1;}
  .rail-quick .crail-quick{flex-direction:row;flex-wrap:wrap;}
  .rail-quick .crail-btn{flex:1;min-width:150px;}
}
@media(max-width:760px){
  /* minmax(0,1fr) — not 1fr — so the track may shrink below its min-content
     and never forces horizontal scroll from a wide child (segmented buttons etc.). */
  .calc-stage{grid-template-columns:minmax(0,1fr);}
  .cres-top{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .cres-breakdown{width:100%;}
  /* Amortisation toggle: label + chevron on row 1, date button on its own row
     so the wide date control never forces horizontal scroll on small screens. */
  .ctable-toggle{grid-template-columns:1fr auto;grid-template-areas:"label chev" "date date";row-gap:9px;column-gap:8px;padding:0.7rem 0.9rem;}
  .ctt-label{grid-area:label;min-width:0;}
  .ctt-chev{grid-area:chev;}
  .ctt-date{grid-area:date;justify-self:stretch;justify-content:center;}
  /* Segmented control (e.g. compounding frequency): its buttons have a wide
     min-content that overflows the row on narrow screens. Let the row wrap so the
     control drops to a full-width line, then stretch the buttons to share it. */
  .cinput-row{flex-wrap:wrap;}
  .cinput-ctrl{flex:1 1 100%;min-width:0;flex-wrap:wrap;}
  .cseg{display:flex;width:100%;}
  .cseg-btn{flex:1;text-align:center;padding:5px 4px;}
}