/* EMI module only. Existing global typography, header, footer and paths stay owned by the host. */
.ec, .ec-guide {
  --ec-bg:#f8fbff; --ec-surface:#fff; --ec-soft:#f1f6fd; --ec-border:#dde8f6;
  --ec-text:#101c3f; --ec-muted:#536c97; --ec-blue:#007dff; --ec-cyan:#00bfff;
  --ec-green:#00cc8a; --ec-green-text:#008361; --ec-purple:#5520b7;
  --ec-track:#e7eef8; --ec-shadow:0 5px 20px #38699e07; --ec-field:#ffffffb3;
  --ec-hero:linear-gradient(110deg,#fff 15%,#eff8ff 68%,#a5d8ff);
  --ec-button:linear-gradient(110deg,#00b8f3,#006dff 65%,#486bff);
  --ec-interest-bg:linear-gradient(110deg,#effdf8,#fff);
  --ec-purple-bg:linear-gradient(110deg,#f7f2ff,#fff);
  --ec-prepay-bg:linear-gradient(115deg,#effdf9,#f2fdf8);
  --ec-saving-bg:#dffff0; --ec-saving-text:#006849;
  font-family:inherit !important; color:var(--ec-text); color-scheme:light;
}
/* Respect common host theme hooks without creating another theme switch or stored preference. */
:where(html,body,[data-theme],[data-bs-theme],.dark,.dark-mode,.theme-dark):is([data-theme="dark"],[data-bs-theme="dark"],.dark,.dark-mode,.theme-dark) :is(.ec,.ec-guide),
:is(.ec,.ec-guide)[data-theme="dark"] {
  --ec-bg:#080d1a; --ec-surface:#0b1730; --ec-soft:#102343; --ec-border:#25456f;
  --ec-text:#eef4ff; --ec-muted:#a7bfe6; --ec-blue:#139dff; --ec-cyan:#00d2ff;
  --ec-green:#00e696; --ec-green-text:#81f4cf; --ec-purple:#dac5ff;
  --ec-track:#1b355d; --ec-shadow:0 0 20px #0084ff0a; --ec-field:#10203baa;
  --ec-hero:linear-gradient(110deg,#0b1830,#0b2248 65%,#21134d);
  --ec-button:linear-gradient(105deg,#00cfff,#007aff 40%,#432aff 77%,#9850ff);
  --ec-interest-bg:linear-gradient(110deg,#003432,#091a32);
  --ec-purple-bg:linear-gradient(110deg,#201a4e,#0a1b35);
  --ec-prepay-bg:linear-gradient(115deg,#063331,#081c31);
  --ec-saving-bg:linear-gradient(120deg,#60f5ba,#bbffe4); --ec-saving-text:#034f3d;
  color-scheme:dark;
}
.ec, .ec *, .ec *::before, .ec *::after, .ec-guide, .ec-guide *, .ec-guide *::before, .ec-guide *::after { box-sizing:border-box; font-family:inherit !important; }
.ec { width:100%; max-width:1480px; margin:18px auto 30px; padding:24px; background:var(--ec-bg); border:1px solid var(--ec-border); border-radius:24px; isolation:isolate; font-size:14px; line-height:1.45; }
.ec .ec-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.ec h1,.ec h2,.ec p { margin:0; padding:0; border:0; text-transform:none; letter-spacing:normal; }
.ec h1 { font-size:24px; line-height:1.2; font-weight:750; }
.ec h2 { font-size:17px; line-height:1.3; font-weight:700; }
.ec p { color:var(--ec-muted); }
.ec button,.ec input,.ec select { font-family:inherit !important; font-size:inherit; line-height:1.3; color:var(--ec-text); margin:0; }
.ec button { cursor:pointer; min-height:44px; border:1px solid var(--ec-border); border-radius:12px; padding:10px 12px; background:linear-gradient(135deg,var(--ec-surface),var(--ec-soft)); display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:600; -webkit-tap-highlight-color:transparent; }
.ec button:hover { border-color:var(--ec-blue); filter:brightness(1.04); }
.ec button:focus-visible,.ec input:focus-visible,.ec select:focus-visible,.ec-guide summary:focus-visible { outline:3px solid var(--ec-blue); outline-offset:3px; }
.ec button[aria-pressed="true"],.ec #ec-compare-toggle[aria-expanded="true"] { background:var(--ec-button); color:#fff; border-color:var(--ec-cyan); box-shadow:0 4px 12px #007cff30; }
.ec input:not([type="range"]):not([type="checkbox"]),.ec select { border:1px solid var(--ec-border); border-radius:12px; background:var(--ec-field); min-width:0; max-width:100%; width:100%; min-height:46px; padding:9px 12px; }
.ec input[aria-invalid="true"] { outline:2px solid #e34c58; outline-offset:1px; }
.ec input::-webkit-inner-spin-button,.ec input::-webkit-outer-spin-button { appearance:none; margin:0; }
.ec input[type="number"] { -moz-appearance:textfield; }
.ec [hidden] { display:none !important; }
.ec .ec-icon { width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ec .ec-top { display:flex; align-items:center; gap:22px; margin-bottom:22px; }
.ec .ec-brand { display:flex; align-items:center; gap:12px; flex:none; }
.ec .ec-brand>.ec-icon { width:51px; height:54px; padding:10px; border:1px solid var(--ec-border); border-radius:15px; color:var(--ec-blue); background:var(--ec-soft); }
.ec .ec-brand p { font-size:14px; margin-top:4px; }
.ec .ec-categories { display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; padding:5px 2px 8px; flex:1; min-width:0; }
.ec .ec-categories button { flex:1 0 110px; font-size:12px; min-height:56px; padding:8px 10px; gap:8px; }
.ec .ec-categories button:nth-child(4) { flex-basis:136px; }
.ec .ec-categories .ec-icon { width:23px; height:23px; }
.ec .ec-brand-badge { display:flex; align-items:center; gap:10px; border:1px solid var(--ec-border); border-radius:18px; padding:10px 14px; font-size:12px; color:var(--ec-muted); }
.ec .ec-brand-badge .ec-icon { color:#e6a922; }
.ec .ec-layout { display:grid; grid-template-columns:1.12fr 1fr; grid-template-areas:"results controls" "results actions"; gap:14px 18px; align-items:start; }
.ec .ec-results { grid-area:results; display:grid; gap:12px; min-width:0; }
.ec .ec-controls { grid-area:controls; display:grid; gap:12px; min-width:0; }
.ec .ec-card { background:var(--ec-surface); border:1px solid var(--ec-border); border-radius:18px; padding:18px; box-shadow:var(--ec-shadow); min-width:0; }
.ec .ec-hero { position:relative; min-height:210px; display:flex; align-items:center; overflow:hidden; background:var(--ec-hero); padding:24px; }
.ec .ec-hero-copy { z-index:1; position:relative; }
.ec .ec-hero h2 { color:var(--ec-muted); font-size:23px; }
.ec .ec-hero strong { display:block; font-size:clamp(38px,4.2vw,68px); line-height:1.22; letter-spacing:-2px; color:var(--ec-blue); font-weight:800; font-variant-numeric:tabular-nums; margin:12px 0 5px; }
.ec .ec-hero p { display:flex; gap:10px; align-items:center; font-size:14px; }
.ec .ec-house { width:55%; height:100%; position:absolute; right:-2%; bottom:0; }
.ec .ec-tomorrow { position:absolute; right:14px; top:38%; padding:12px 15px; border:1px solid #99c5f087; border-radius:30px 9px 28px 30px; color:#164576; background:linear-gradient(110deg,#c7e9ffe0,#e2f5ffca); font-size:12px; line-height:1.3; font-weight:600; }
.ec .ec-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ec .ec-stat { display:flex; gap:12px; align-items:center; position:relative; padding:20px 16px; min-height:112px; }
.ec .ec-stat h2 { color:var(--ec-muted); font-size:14px; font-weight:500; }
.ec .ec-stat strong { font-size:clamp(19px,2.15vw,32px); font-weight:800; line-height:1.3; display:block; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ec .ec-stat p { font-size:12px; margin-top:4px; }
.ec .ec-interest { background:var(--ec-interest-bg); }
.ec .ec-interest strong { color:var(--ec-green-text); }
.ec .ec-repayment { background:var(--ec-purple-bg); }
.ec .ec-repayment strong { color:var(--ec-purple); }
.ec .ec-icon-box { width:46px; height:46px; border-radius:16px; flex:none; display:grid; place-items:center; background:#078eff13; color:var(--ec-blue); }
.ec .ec-icon-box .ec-icon { width:28px; height:28px; }
.ec .ec-stat .ec-icon-box { width:58px; height:58px; border-radius:50%; }
.ec .ec-interest .ec-icon-box,.ec .ec-prepay .ec-icon-box { color:#00b88a; background:#00ce9518; }
.ec .ec-repayment .ec-icon-box { color:#9a63f5; background:#9e6aff22; }
.ec .ec-info { position:absolute; right:11px; top:12px; color:var(--ec-muted); }
.ec .ec-info .ec-icon { width:15px; height:15px; }
.ec .ec-charts { display:grid; grid-template-columns:1fr 1.1fr; gap:12px; }
.ec .ec-charts .ec-card { padding:16px; min-height:292px; }
.ec .ec-charts h2 { font-size:16px; }
.ec .ec-charts p { font-size:12px; margin-top:3px; }
.ec .ec-donut-layout { display:flex; align-items:center; gap:10px; margin-top:26px; }
.ec .ec-donut { position:relative; flex:1; min-width:0; max-width:205px; aspect-ratio:1; }
.ec .ec-donut svg { width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.ec .ec-donut circle { fill:none; stroke-width:28; }
.ec .ec-donut-track { stroke:var(--ec-green); }
.ec #ec-principal-arc { stroke:var(--ec-blue); }
.ec .ec-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; line-height:1.3; }
.ec .ec-donut-center strong { font-size:clamp(16px,1.65vw,24px); white-space:nowrap; }
.ec .ec-donut-center span { color:var(--ec-muted); font-size:10px; margin-top:4px; }
.ec .ec-legend { display:grid; gap:20px; font-size:12px; flex:none; }
.ec .ec-legend>div { display:flex; gap:7px; color:var(--ec-muted); }
.ec .ec-legend i { width:12px; height:12px; border-radius:50%; background:var(--ec-blue); flex:none; margin-top:3px; }
.ec .ec-legend>div:last-child i { background:var(--ec-green); }
.ec .ec-legend strong { display:block; font-size:19px; color:var(--ec-text); }
.ec .ec-legend b { color:var(--ec-blue); display:block; font-size:12px; }
.ec .ec-legend>div:last-child b { color:var(--ec-green-text); }
.ec .ec-chart-heading { display:flex; gap:6px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ec .ec-chart-heading select { width:auto; max-width:100%; padding:6px; font-size:10px; min-height:32px; border-radius:9px; }
.ec #ec-bars { display:block; width:100%; height:210px; margin-top:13px; overflow:visible; }
.ec #ec-bars text { fill:var(--ec-muted); font-size:11px; }
.ec #ec-bars .ec-grid-line { stroke:var(--ec-border); stroke-width:1; }
.ec .ec-control { padding:18px; }
.ec .ec-control-heading { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ec .ec-control-heading>div:not(.ec-input-wrap):not(.ec-tenure-pair) { flex:1; min-width:0; }
.ec .ec-control label { display:block; font-weight:700; font-size:16px; }
.ec .ec-control p { font-size:12px; margin-top:3px; }
.ec .ec-input-wrap { display:flex; align-items:center; padding-left:12px; border:1px solid var(--ec-border); border-radius:12px; background:var(--ec-field); min-width:0; }
.ec .ec-control-heading>.ec-input-wrap { width:170px; flex:none; }
.ec .ec-input-wrap>span { font-size:20px; font-weight:700; }
.ec .ec-input-wrap input:not([type="range"]) { border:0; background:transparent; border-radius:12px; padding:9px 10px 9px 2px; font-size:21px; font-weight:700; }
.ec .ec-input-wrap:focus-within { border-color:var(--ec-blue); }
.ec .ec-rate-input { padding-left:0; padding-right:14px; }
.ec .ec-rate-input input:not([type="range"]) { text-align:right; padding-right:2px; }
.ec .ec-amount-bottom { display:grid; grid-template-columns:1fr 210px; align-items:end; gap:20px; }
.ec input[type="range"] { --ec-fill:25%; display:block; appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:0; height:30px; width:100%; min-width:0; margin:0; cursor:pointer; touch-action:pan-y; }
.ec input[type="range"]::-webkit-slider-runnable-track { height:12px; border-radius:20px; background:linear-gradient(to right,var(--ec-blue),var(--ec-cyan)) 0/var(--ec-fill) 100% no-repeat,var(--ec-track); }
.ec input[type="range"]::-moz-range-track { height:12px; border-radius:20px; background:var(--ec-track); }
.ec input[type="range"]::-moz-range-progress { height:12px; border-radius:20px; background:var(--ec-blue); }
.ec input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; height:24px; width:24px; border:1.5px solid var(--ec-blue); border-radius:50%; background:#fff; box-shadow:0 3px 9px #007dff30; margin-top:-6px; }
.ec input[type="range"]::-moz-range-thumb { height:22px; width:22px; border:1.5px solid var(--ec-blue); border-radius:50%; background:#fff; box-shadow:0 3px 9px #007dff30; }
.ec .ec-range-labels { display:flex; justify-content:space-between; font-size:12px; color:var(--ec-muted); margin-top:3px; }
.ec .ec-quick>span { display:block; color:var(--ec-muted); font-size:12px; margin-bottom:6px; }
.ec .ec-quick>div { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.ec .ec-quick button { padding:9px 3px; border-radius:10px; font-size:12px; min-height:43px; white-space:nowrap; }
.ec .ec-tenure-pair { display:flex; align-items:center; gap:10px; flex:none; width:260px; }
.ec .ec-tenure-pair>input { text-align:center; font-size:21px; font-weight:700; width:90px; }
.ec .ec-segment { display:flex; border-radius:22px; background:var(--ec-soft); border:1px solid var(--ec-border); padding:2px; flex:1; }
.ec .ec-segment button { border:0; border-radius:20px; font-size:12px; flex:1; padding:9px 12px; background:transparent; min-height:40px; }
.ec .ec-prepay { background:var(--ec-prepay-bg); border-color:#00c79666; }
.ec .ec-prepay-heading { display:flex; align-items:center; gap:11px; }
.ec .ec-prepay-heading>div { flex:1; min-width:0; }
.ec .ec-prepay h2 { font-size:16px; }
.ec .ec-prepay p { font-size:12px; margin-top:4px; }
.ec .ec-switch { width:57px; height:34px; position:relative; display:block; flex:none; cursor:pointer; }
.ec .ec-switch input { position:absolute; opacity:0; width:100%; height:100%; inset:0; cursor:pointer; z-index:1; }
.ec .ec-switch>span { position:absolute; inset:0; border-radius:24px; background:var(--ec-track); border:1px solid var(--ec-border); }
.ec .ec-switch>span:after { content:""; position:absolute; width:26px; height:26px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 1px 5px #0002; }
.ec .ec-switch input:checked+span { background:linear-gradient(120deg,#00e1a4,#00b986); border-color:#00c795; }
.ec .ec-switch input:checked+span:after { transform:translateX(23px); }
.ec .ec-switch input:focus-visible+span { outline:3px solid var(--ec-blue); outline-offset:3px; }
.ec .ec-prepay-fields { display:grid; grid-template-columns:1fr 1.15fr; gap:10px; margin-top:16px; }
.ec .ec-extra { padding:10px; border:1px solid #00bd9a25; border-radius:14px; background:var(--ec-field); min-width:0; }
.ec .ec-extra>label { font-size:11px; color:var(--ec-muted); display:block; margin-bottom:6px; }
.ec .ec-extra>div { display:flex; gap:6px; }
.ec .ec-extra input:not([type="range"]) { font-size:18px; min-height:38px; }
.ec .ec-extra button { min-height:38px; width:35px; padding:0; flex:none; color:var(--ec-blue); font-size:23px; }
.ec .ec-savings { background:var(--ec-saving-bg); color:var(--ec-saving-text); border:1px solid #00c58d33; border-radius:14px; padding:12px; display:flex; align-items:center; gap:10px; }
.ec .ec-savings>.ec-icon { stroke-width:2.5; width:27px; height:33px; }
.ec .ec-savings strong { font-size:15px; line-height:1.3; display:block; }
.ec .ec-savings p { color:var(--ec-saving-text); font-size:11px; }
.ec .ec-actions { grid-area:actions; min-width:0; }
.ec .ec-actions>button { width:100%; }
.ec .ec-primary { background:var(--ec-button); color:#fff; min-height:58px; font-size:16px; border-color:#35bdff; box-shadow:0 4px 14px #007dff25; border-radius:15px; }
.ec .ec-primary small { font-size:inherit; }
.ec .ec-secondary-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.ec .ec-secondary-actions button { min-height:54px; font-size:16px; border-radius:14px; }
.ec #ec-excel { color:var(--ec-green-text); border-color:#00ba8850; background:var(--ec-prepay-bg); }
.ec #ec-share { color:var(--ec-blue); }
.ec .ec-status { min-height:20px; margin-top:8px; font-size:12px; }
.ec .ec-footnote { font-size:11px; margin:4px 0 0; }
.ec .ec-comparison { margin-bottom:18px; }
.ec .ec-section-title { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.ec .ec-section-title span { color:var(--ec-muted); font-size:12px; }
.ec .ec-compare-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:16px 0; }
.ec .ec-compare-fields label { font-weight:600; font-size:13px; }
.ec .ec-compare-fields input { display:block; margin-top:6px !important; }
.ec .ec-table-wrap { overflow-x:auto; }
.ec table { width:100%; border-collapse:collapse; font-size:14px; }
.ec th,.ec td { text-align:left; padding:9px; border-bottom:1px solid var(--ec-border); }
.ec #ec-comparison-note { margin-top:12px; font-size:13px; }
.ec .ec-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ec-guide { max-width:900px; margin:40px auto; line-height:1.8; font-size:16px; background:transparent; }
.ec-guide h2 { font-size:24px; margin:32px 0 12px; line-height:1.35; }
.ec-guide h3 { font-size:19px; margin:20px 0 8px; }
.ec-guide p { margin:0 0 14px; }
.ec-guide ol,.ec-guide ul { padding-left:24px; }
.ec-guide .ec-formula { padding:16px; background:var(--ec-soft); border:1px solid var(--ec-border); border-radius:12px; overflow-wrap:anywhere; }
.ec-guide details { border-bottom:1px solid var(--ec-border); padding:16px 0; }
.ec-guide summary { cursor:pointer; font-weight:650; }
.ec-guide details p { margin:12px 0 0; }
:where(.dark,.dark-mode,.theme-dark,[data-theme="dark"],[data-bs-theme="dark"]) .ec .ec-layout,.ec[data-theme="dark"] .ec-layout { grid-template-columns:1fr 1.12fr; grid-template-areas:"controls results" "controls actions"; }
:where(.dark,.dark-mode,.theme-dark,[data-theme="dark"],[data-bs-theme="dark"]) .ec .ec-hero strong,.ec[data-theme="dark"] .ec-hero strong { color:#83dcff; }
:where(.dark,.dark-mode,.theme-dark,[data-theme="dark"],[data-bs-theme="dark"]) .ec .ec-tomorrow,.ec[data-theme="dark"] .ec-tomorrow { color:#fff; background:linear-gradient(110deg,#075d93dc,#38248aca); }
@media(min-width:1151px) and (max-width:1350px) { .ec .ec-top { gap:12px; flex-wrap:wrap; }.ec .ec-brand { flex:1; }.ec .ec-categories { order:3; flex-basis:100%; }.ec .ec-tenure-pair { width:220px; }.ec .ec-control label { font-size:14px; }.ec .ec-control-heading>.ec-input-wrap { width:140px; }.ec .ec-stat .ec-icon-box { width:42px; height:42px; }.ec .ec-stat { gap:8px; }.ec .ec-prepay-fields { grid-template-columns:1fr; }.ec .ec-donut-layout { flex-direction:column; margin-top:14px; }.ec .ec-donut { width:150px; }.ec .ec-legend { grid-template-columns:1fr 1fr; gap:10px; }.ec .ec-charts .ec-card { min-height:322px; } }
@media(max-width:1150px) {
 .ec { max-width:850px; padding:18px; }.ec .ec-top { flex-wrap:wrap; gap:12px; }.ec .ec-brand { flex:1; }.ec .ec-categories { order:3; flex-basis:100%; }.ec .ec-categories button { font-size:13px; }.ec .ec-layout { display:flex; flex-direction:column; gap:12px; }.ec .ec-results,.ec .ec-controls,.ec .ec-actions { width:100%; }.ec .ec-hero { min-height:180px; }.ec .ec-hero strong { font-size:60px; }.ec .ec-stat strong { font-size:29px; }.ec .ec-charts { grid-template-columns:1fr 1fr; }.ec .ec-charts .ec-card { min-height:270px; }.ec .ec-donut-center strong { font-size:23px; }.ec .ec-donut-layout { margin-top:16px; }.ec .ec-control-heading { margin-bottom:12px; }.ec .ec-control { padding:15px; }.ec .ec-primary { min-height:60px; }.ec .ec-prepay-fields { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
 .ec { padding:12px; border-radius:20px; margin-top:10px; font-size:12px; }.ec .ec-top { margin-bottom:12px; gap:8px; }.ec h1 { font-size:19px; }.ec .ec-brand { gap:8px; }.ec .ec-brand>.ec-icon { width:39px; height:42px; padding:7px; border-radius:12px; }.ec .ec-brand p { font-size:10px; }.ec .ec-brand-badge { padding:8px; border-radius:13px; font-size:9px; gap:6px; }.ec .ec-brand-badge .ec-icon { width:19px; }.ec .ec-categories { gap:6px; }.ec .ec-categories button { flex:0 0 112px; min-height:48px; font-size:11px; padding:8px; }.ec .ec-categories .ec-icon { width:20px; height:20px; }
 .ec .ec-card { border-radius:14px; }.ec .ec-hero { padding:16px; min-height:155px; }.ec .ec-hero h2 { font-size:18px; }.ec .ec-hero strong { font-size:43px; letter-spacing:-1.3px; margin-top:9px; }.ec .ec-hero p { font-size:10px; gap:5px; }.ec .ec-hero p .ec-icon { width:16px; height:16px; }.ec .ec-house { width:57%; right:-5%; }.ec .ec-tomorrow { right:5px; top:36%; font-size:8px; padding:9px; }
 .ec .ec-results { gap:9px; }.ec .ec-stats { gap:8px; }.ec .ec-stat { min-height:102px; padding:13px 10px; gap:7px; flex-wrap:wrap; align-content:center; }.ec .ec-stat .ec-icon-box { height:30px; width:30px; }.ec .ec-stat .ec-icon-box .ec-icon { width:20px; height:20px; }.ec .ec-stat>div { min-width:0; }.ec .ec-stat h2 { font-size:11px; }.ec .ec-stat strong { font-size:19px; letter-spacing:-.4px; }.ec .ec-stat p { font-size:9px; }.ec .ec-info { right:7px; top:7px; }.ec .ec-info .ec-icon { width:12px; height:12px; }
 .ec .ec-charts { gap:8px; grid-template-columns:1fr 1fr; }.ec .ec-charts .ec-card { padding:12px 9px; min-height:267px; }.ec .ec-charts h2 { font-size:12px; }.ec .ec-charts p { font-size:9px; }.ec .ec-donut-layout { flex-direction:column; gap:8px; margin-top:9px; }.ec .ec-donut { width:125px; flex:none; }.ec .ec-donut-center strong { font-size:17px; }.ec .ec-donut-center span { font-size:8px; }.ec .ec-legend { grid-template-columns:1fr 1fr; gap:7px; width:100%; font-size:9px; }.ec .ec-legend>div { gap:4px; }.ec .ec-legend i { width:7px; height:7px; }.ec .ec-legend strong { font-size:14px; }.ec .ec-legend b { font-size:9px; }.ec .ec-chart-heading { gap:7px; }.ec .ec-chart-heading select { font-size:9px; min-height:30px; }.ec #ec-bars { height:163px; margin-top:14px; }
 .ec .ec-control { padding:13px; }.ec .ec-control-heading { flex-wrap:wrap; gap:8px; margin-bottom:9px; }.ec .ec-icon-box { width:34px; height:36px; border-radius:12px; }.ec .ec-icon-box .ec-icon { width:22px; height:22px; }.ec .ec-control label { font-size:13px; }.ec .ec-control p { font-size:10px; }.ec .ec-control-heading>.ec-input-wrap { width:124px; }.ec .ec-input-wrap>span { font-size:16px; }.ec .ec-input-wrap input:not([type="range"]) { font-size:17px; min-height:42px; padding-right:6px; }.ec .ec-amount-bottom { grid-template-columns:1fr; gap:9px; }.ec .ec-quick { display:flex; gap:10px; align-items:center; }.ec .ec-quick>span { margin:0; font-size:10px; }.ec .ec-quick>div { flex:1; }.ec .ec-quick button { min-height:38px; font-size:11px; }.ec .ec-range-labels { font-size:10px; }.ec .ec-tenure-pair { width:100%; margin-top:3px; }.ec .ec-tenure-pair>input { width:100px; font-size:19px; min-height:42px; }.ec .ec-segment button { min-height:36px; }.ec .ec-prepay { padding:13px; }.ec .ec-prepay-heading { gap:7px; }.ec .ec-prepay h2 { font-size:12px; }.ec .ec-prepay p { font-size:9px; }.ec .ec-prepay-heading .ec-icon-box { width:32px; height:34px; }.ec .ec-switch { width:47px; height:29px; }.ec .ec-switch>span:after { width:21px; height:21px; }.ec .ec-switch input:checked+span:after { transform:translateX(18px); }.ec .ec-prepay-fields { grid-template-columns:1fr; gap:8px; margin-top:12px; }.ec .ec-extra { padding:9px; }.ec .ec-extra>label { font-size:11px; }.ec .ec-extra .ec-input-wrap { flex:1; }.ec .ec-extra button { width:40px; min-height:40px; }.ec .ec-savings { min-height:69px; padding:10px; }.ec .ec-savings strong { font-size:15px; }.ec .ec-savings p { font-size:10px; }.ec .ec-primary { font-size:12px; gap:8px; min-height:54px; padding:10px; }.ec .ec-primary>.ec-icon { width:20px; height:20px; }.ec .ec-primary small { display:block; font-size:10px; }.ec .ec-secondary-actions { gap:8px; margin-top:9px; }.ec .ec-secondary-actions button { font-size:13px; min-height:47px; }.ec .ec-secondary-actions .ec-icon { width:20px; height:20px; }.ec .ec-footnote { font-size:10px; }.ec .ec-compare-fields { grid-template-columns:1fr; gap:10px; }.ec table { font-size:11px; }.ec th,.ec td { padding:8px 4px; }.ec-guide { padding:0 8px; font-size:15px; }.ec-guide h2 { font-size:22px; }
}
@media(max-width:380px) { .ec { padding:9px; }.ec .ec-brand-badge { font-size:8px; padding:7px 5px; }.ec .ec-brand-badge .ec-icon { display:none; }.ec .ec-hero strong { font-size:37px; }.ec .ec-control-heading>.ec-input-wrap { width:100%; margin-top:3px; }.ec .ec-stat strong { font-size:17px; }.ec .ec-donut { width:110px; }.ec .ec-legend { font-size:8px; gap:2px; }.ec .ec-legend b { font-size:8px; }.ec .ec-charts h2 { font-size:11px; }.ec .ec-tomorrow { font-size:7px; } }
@media print { .ec { border:0; box-shadow:none; }.ec .ec-actions,.ec .ec-controls,.ec .ec-categories,.ec .ec-footnote { display:none; }.ec .ec-layout { display:block; }.ec .ec-card { break-inside:avoid; }.ec-guide { break-before:page; } }

/* Final narrow-screen and selected-segment refinements. */
.ec .ec-segment button[aria-pressed="true"] { background:var(--ec-button); color:#fff; }
.ec .ec-stat strong { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:600px) { .ec .ec-control-heading>.ec-input-wrap { width:142px; }.ec .ec-stat strong { font-size:clamp(14px,4.4vw,19px); }.ec .ec-legend { grid-template-columns:repeat(2,minmax(0,1fr)); }.ec .ec-legend>div>span { min-width:0; overflow-wrap:anywhere; } }
@media(max-width:380px) { .ec .ec-control-heading>.ec-input-wrap { width:100%; }.ec .ec-legend { display:block; }.ec .ec-legend>div { margin-top:6px; }.ec .ec-legend strong,.ec .ec-legend b { display:inline; margin-left:3px; font-size:10px; }.ec .ec-stat strong { font-size:14px; } }
:where(.dark,.dark-mode,.theme-dark,[data-theme="dark"],[data-bs-theme="dark"]) .ec :is(.ec-control,.ec-breakdown,.ec-balance) { background:linear-gradient(135deg,#10305266,transparent 65%),var(--ec-surface); box-shadow:inset 0 1px 0 #54acff12,0 0 16px #007dff0b; }
:where(.dark,.dark-mode,.theme-dark,[data-theme="dark"],[data-bs-theme="dark"]) .ec .ec-primary { box-shadow:inset 0 0 8px #aeebff88,0 0 17px #245cff38; }
@media(max-width:450px) { .ec .ec-stat { flex-direction:column; align-items:flex-start; align-content:initial; gap:6px; } }
/* Keep the entire maximum supported currency value visible in its input. */
.ec .ec-amount .ec-control-heading>.ec-input-wrap { width:180px; }
.ec #principal { font-size:19px; }
.ec #ec-extra { font-size:16px; }
@media(max-width:600px) { .ec .ec-amount .ec-control-heading>.ec-input-wrap { width:150px; }.ec #principal { font-size:16px; } }
@media(max-width:380px) { .ec .ec-amount .ec-control-heading>.ec-input-wrap { width:100%; } }

/* Editable values: suppress the oversized focus halo; retain the existing thin field border. */
.ec input:is([type="text"],[type="number"]):focus {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
.ec .ec-tenure-pair > input:focus,
.ec .ec-compare-fields input:focus { border-color: var(--ec-blue); }

/* ========================================================================
   EMI CALCULATOR TOOL — LIGHT THEME SURFACE & INPUT POLISH (2026-10-08)
   Scoped to .ec ONLY; the article in .ec-guide keeps its original styles.
   Use the project's real .ec class names, not generic .tool-container etc.
   Default spacing, DOM, JS behavior and focus-halo removal stay unchanged.
   ======================================================================== */
.ec {
  --ec-bg: #F4F6FB;                 /* cool-grey calculator background */
  --ec-surface: #FFFFFF;            /* pure-white calculator cards */
  --ec-border: #E2E8F0;             /* crisp but subtle card outlines */
  --ec-shadow: 0 4px 20px -2px rgba(15,23,42,.05);
  --ec-field: #F8FAFC;              /* clearer editable field fill */
  --ec-track: #E2E8F0;              /* unfilled slider track */
  --ec-interest-bg: #FFFFFF;
  --ec-purple-bg: #FFFFFF;
  --ec-prepay-bg: #FFFFFF;
  --ec-input-border: #CBD5E1;
  --ec-input-border-width: 1.5px;
  --ec-input-radius: 10px;
  --ec-card-radius: 16px;
}
.ec .ec-card { border-radius: var(--ec-card-radius); }
.ec input:not([type="range"]):not([type="checkbox"]),
.ec select,
.ec .ec-input-wrap {
  border-color: var(--ec-input-border);
  border-width: var(--ec-input-border-width);
  border-radius: var(--ec-input-radius);
}
/* Nested inputs should never draw a second border inside the amount box. */
.ec .ec-input-wrap input:not([type="range"]) { border: 0; background: transparent; }

/* Restore EVERY original dark-mode surface, border, track and radius.
   The host site's existing theme switch continues to control dark mode. */
:where(html,body,[data-theme],[data-bs-theme],.dark,.dark-mode,.theme-dark):is([data-theme="dark"],[data-bs-theme="dark"],.dark,.dark-mode,.theme-dark) .ec,
.ec[data-theme="dark"] {
  --ec-input-border: var(--ec-border);
  --ec-input-border-width: 1px;
  --ec-input-radius: 12px;
  --ec-card-radius: 18px;
}
@media (max-width: 600px) {
  :where(html,body,[data-theme],[data-bs-theme],.dark,.dark-mode,.theme-dark):is([data-theme="dark"],[data-bs-theme="dark"],.dark,.dark-mode,.theme-dark) .ec,
  .ec[data-theme="dark"] { --ec-card-radius: 14px; }
}

/* ========================================================================
   ALLFAST EMI CALCULATOR ARTICLE SECTION — STANDALONE STYLES
   Edit this block only when updating the article in content.html.
   Scoped to .ec-guide / .ec-guide-divider. Do NOT alter calculator .ec styles.
   Illustrations are lightweight inline SVG embedded in content.html.
   ======================================================================== */
.ec-guide-divider { width:calc(100% - 32px); max-width:1480px; height:6px; margin:38px auto 0; background:#05080e; border-radius:20px; box-shadow:0 0 0 1px rgba(93,135,196,.16); }
.ec-guide { width:calc(100% - 36px); max-width:1060px; margin:0 auto 72px; padding:48px 0 0; font-size:16px; line-height:1.72; background:transparent; color:var(--ec-text); overflow-wrap:break-word; }
.ec-guide .ecg-intro { max-width:890px; text-align:center; margin:0 auto 64px; }
.ec-guide .ecg-eyebrow,.ec-guide .ecg-kicker,.ec-guide .ecg-formula-label { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.15em; line-height:1.4; text-transform:uppercase; color:var(--ec-blue); }
.ec-guide .ecg-eyebrow { background:var(--ec-soft); border:1px solid var(--ec-border); border-radius:50px; padding:9px 17px; }
.ec-guide h2 { color:var(--ec-text); font-size:clamp(23px,2.75vw,32px); line-height:1.26; font-weight:800; margin:0 0 16px; letter-spacing:-.025em; }
.ec-guide h3 { font-size:18px; font-weight:750; line-height:1.35; color:var(--ec-text); margin:0 0 9px; }
.ec-guide .ecg-intro h2 { font-size:clamp(28px,3.7vw,42px); margin:18px 0 20px; }
.ec-guide p { color:var(--ec-muted); margin:0 0 14px; }
.ec-guide .ecg-lead { font-size:clamp(16px,1.75vw,19px); line-height:1.7; color:var(--ec-text); }
.ec-guide .ecg-highlights { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:25px auto 0; }
.ec-guide .ecg-highlights span { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:40px; border:1px solid var(--ec-border); background:var(--ec-surface); font-size:13px; font-weight:700; line-height:1.45; }
.ec-guide .ecg-highlights i { font-size:15px; font-style:normal; font-weight:900; color:var(--ec-green-text); }
.ec-guide .ecg-story { max-width:940px; margin:0 auto 60px; text-align:center; }
.ec-guide .ecg-story-copy { max-width:800px; margin:0 auto 18px; }
.ec-guide .ecg-story h2 { margin:9px 0 14px; }
.ec-guide figure.ecg-art { width:100%; max-width:735px; margin:18px auto 0; padding:12px; border:1px solid var(--ec-border); border-radius:22px; background:linear-gradient(145deg,var(--ec-surface),var(--ec-soft)); box-shadow:var(--ec-shadow); }
.ec-guide .ecg-art svg { display:block; width:100%; height:auto; }
.ec-guide .ecg-art figcaption { font-size:12px; line-height:1.55; color:var(--ec-muted); text-align:center; margin:1px auto 3px; max-width:600px; }
.ec-guide .ecg-section-heading { max-width:800px; text-align:center; margin:0 auto 28px; }
.ec-guide .ecg-section-heading h2 { margin:9px 0 12px; }
.ec-guide .ecg-steps { position:relative; max-width:100%; overflow:hidden; margin:62px auto; padding:36px 44px 18px; background:linear-gradient(125deg,var(--ec-soft),var(--ec-surface)); border:1px solid var(--ec-border); border-left:7px solid var(--ec-blue); border-radius:18px; }
.ec-guide .ecg-step-list { list-style:none; margin:0 auto; max-width:840px; padding:0; counter-reset:none; }
.ec-guide .ecg-step-list li { display:flex; align-items:flex-start; gap:19px; padding:15px 0; border-bottom:1px solid var(--ec-border); }
.ec-guide .ecg-step-list li:last-child { border-bottom:0; }
.ec-guide .ecg-step-list h3 { margin:0 0 3px; }
.ec-guide .ecg-step-list p { margin:0; font-size:14px; }
.ec-guide .ecg-step-number { display:grid; place-items:center; flex:0 0 40px; height:40px; border-radius:50%; font-size:17px; line-height:1; font-weight:900; color:#fff; background:linear-gradient(135deg,#03baff,#275aff); box-shadow:0 5px 15px #187af42a; }
.ec-guide .ecg-steps-art { display:block; max-width:390px; width:80%; height:auto; margin:15px auto 0; }
.ec-guide .ecg-benefits { margin:68px auto 66px; }
.ec-guide .ecg-benefit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 30px; }
.ec-guide .ecg-benefit { display:flex; align-items:flex-start; gap:15px; border-top:1px solid var(--ec-border); padding:20px 7px; }
.ec-guide .ecg-benefit p { font-size:14px; margin:0; }
.ec-guide .ecg-benefit-icon { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; border-radius:16px; background:var(--ec-soft); border:1px solid var(--ec-border); color:var(--ec-blue); }
.ec-guide .ecg-benefit-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ec-guide .ecg-method { margin:55px auto; max-width:910px; }
.ec-guide .ecg-formula-box { background:linear-gradient(125deg,var(--ec-soft),var(--ec-surface)); border:1px solid var(--ec-border); border-radius:20px; padding:24px 28px; margin:22px auto 20px; }
.ec-guide .ecg-formula { margin:12px auto 20px; text-align:center; font-weight:850; font-size:clamp(16px,2.3vw,25px); letter-spacing:-.02em; line-height:1.7; color:var(--ec-text); overflow-wrap:anywhere; }
.ec-guide .ecg-formula-box dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; margin:0; }
.ec-guide .ecg-formula-box dl>div { display:flex; align-items:flex-start; gap:10px; font-size:14px; padding:8px 0; }
.ec-guide .ecg-formula-box dt { display:grid; place-items:center; width:30px; flex:0 0 30px; height:30px; border-radius:9px; background:var(--ec-blue); color:#fff; font-weight:850; }
.ec-guide .ecg-formula-box dd { margin:2px 0 0; color:var(--ec-muted); }
.ec-guide .ecg-method>h3 { margin-top:28px; }
.ec-guide .ecg-example-wrap { border-radius:16px; border:1px solid var(--ec-border); overflow:hidden; background:var(--ec-surface); margin:12px 0; }
.ec-guide .ecg-example { border-collapse:collapse; width:100%; font-size:14px; margin:0; }
.ec-guide .ecg-example caption { text-align:left; padding:13px 17px; color:var(--ec-muted); font-size:13px; font-weight:700; background:var(--ec-soft); }
.ec-guide .ecg-example th,.ec-guide .ecg-example td { padding:12px 17px; border-top:1px solid var(--ec-border); text-align:left; }
.ec-guide .ecg-example th { font-weight:600; color:var(--ec-muted); }
.ec-guide .ecg-example td { font-weight:700; color:var(--ec-text); }
.ec-guide .ecg-small-note { font-size:13px; }
.ec-guide .ecg-explain { margin:64px auto; padding:26px 0 0; border-top:1px solid var(--ec-border); }
.ec-guide .ecg-explain>h2 { text-align:center; margin:0 auto 28px; }
.ec-guide .ecg-explain-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 36px; }
.ec-guide .ecg-explain-grid>div { padding:15px 3px; }
.ec-guide .ecg-explain-grid p { font-size:14px; margin:0; }
.ec-guide .ecg-faq { border-top:1px solid var(--ec-border); margin:62px auto 0; padding-top:38px; }
.ec-guide .ecg-faq-list { max-width:940px; margin:0 auto; border-top:1px solid var(--ec-border); }
.ec-guide .ecg-faq-list details { padding:0; margin:0; border:0; border-bottom:1px solid var(--ec-border); }
.ec-guide .ecg-faq-list summary { position:relative; display:block; cursor:pointer; list-style:none; padding:19px 42px 19px 3px; color:var(--ec-text); font-weight:730; font-size:16px; line-height:1.45; }
.ec-guide .ecg-faq-list summary::-webkit-details-marker { display:none; }
.ec-guide .ecg-faq-list summary::after { content:""; position:absolute; right:12px; top:50%; width:10px; height:10px; border-right:2px solid var(--ec-muted); border-bottom:2px solid var(--ec-muted); transform:translateY(-65%) rotate(45deg); transition:transform .17s ease; }
.ec-guide .ecg-faq-list details[open] summary::after { transform:translateY(-28%) rotate(225deg); }
.ec-guide .ecg-faq-list details[open] summary { color:var(--ec-blue); }
.ec-guide .ecg-faq-list details>p { font-size:14px; margin:0; padding:0 42px 20px 3px; max-width:860px; }
.ec-guide .ecg-faq-list summary:focus-visible { outline:2px solid var(--ec-blue); outline-offset:2px; border-radius:7px; }
@media(max-width:720px) {
  .ec-guide-divider { width:calc(100% - 24px); height:5px; margin-top:26px; }
  .ec-guide { width:calc(100% - 30px); padding-top:33px; margin-bottom:45px; font-size:15px; line-height:1.66; }
  .ec-guide .ecg-intro { margin-bottom:46px; }
  .ec-guide .ecg-intro h2 { font-size:clamp(25px,7.1vw,34px); }
  .ec-guide h2 { font-size:clamp(22px,6vw,29px); }
  .ec-guide .ecg-lead { font-size:16px; }
  .ec-guide .ecg-story { margin-bottom:42px; }
  .ec-guide figure.ecg-art { border-radius:15px; padding:5px; }
  .ec-guide .ecg-art figcaption { font-size:11px; padding:0 5px 7px; }
  .ec-guide .ecg-steps { border-left-width:5px; border-radius:13px; padding:28px 17px 13px; margin:44px auto; }
  .ec-guide .ecg-step-list li { gap:12px; padding:13px 0; }
  .ec-guide .ecg-step-number { flex-basis:34px; height:34px; font-size:15px; }
  .ec-guide .ecg-step-list h3 { font-size:16px; }
  .ec-guide .ecg-step-list p { font-size:13px; }
  .ec-guide .ecg-steps-art { width:92%; }
  .ec-guide .ecg-benefits { margin:48px auto; }
  .ec-guide .ecg-benefit-grid,.ec-guide .ecg-explain-grid { grid-template-columns:1fr; gap:0; }
  .ec-guide .ecg-benefit { padding:15px 2px; }
  .ec-guide .ecg-benefit-icon { flex-basis:43px; width:43px; height:43px; border-radius:13px; }
  .ec-guide .ecg-method,.ec-guide .ecg-explain { margin:42px auto; }
  .ec-guide .ecg-formula-box { padding:19px 14px; }
  .ec-guide .ecg-formula-box dl { grid-template-columns:1fr; gap:5px; }
  .ec-guide .ecg-example th,.ec-guide .ecg-example td { padding:10px 9px; }
  .ec-guide .ecg-explain-grid>div { padding:13px 0; border-bottom:1px solid var(--ec-border); }
  .ec-guide .ecg-faq { margin-top:43px; padding-top:32px; }
  .ec-guide .ecg-faq-list summary { padding:16px 32px 16px 2px; font-size:15px; }
  .ec-guide .ecg-faq-list details>p { padding:0 25px 18px 2px; font-size:13px; }
}
@media(max-width:360px) {
  .ec-guide { width:calc(100% - 24px); }
  .ec-guide .ecg-highlights { gap:7px; }
  .ec-guide .ecg-highlights span { font-size:11px; }
  .ec-guide .ecg-formula { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) { .ec-guide .ecg-faq-list summary::after { transition:none; } }
/* ====================== END ARTICLE SECTION CSS ======================== */

/* ========================================================================
   EMI CALCULATOR — MOBILE LEFT/RIGHT GUTTER REDUCTION (50%)
   Applies to calculator shell only; host body/header/footer & article stay intact.
   Vertical padding, cards, sliders, calculation UI and JS remain untouched.
   Previous horizontal padding: tablet 18px, mobile 12px, small mobile 9px.
   ======================================================================== */
@media (min-width:601px) and (max-width:768px) {
  .ec { padding-left:9px; padding-right:9px; }
}
@media (min-width:381px) and (max-width:600px) {
  .ec { padding-left:6px; padding-right:6px; }
}
@media (max-width:380px) {
  .ec { padding-left:4.5px; padding-right:4.5px; }
}