body.hd-calculator,
body.hd-loan-calculator {
  --bg: #f3f6f8;
  --page: #ffffff;
  --surface: #ffffff;
  --surface-2: #edf2f5;
  --input: #ffffff;
  --text: #102033;
  --muted: #617083;
  --faint: #7a8997;
  --line: #d7e1e9;
  --line-strong: #b9c8d4;
  --brand: #176d5b;
  --green: #176d5b;
  --green-dark: #0f4f43;
  --orange: #c26b17;
  --blue: #245fba;
  --shadow: 0 16px 38px rgba(16, 32, 51, .09);
  font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}

:root[data-theme="dark"] body.hd-calculator,
:root[data-theme="dark"] body.hd-loan-calculator {
  --bg: #0d141c;
  --page: #15202b;
  --surface: #15202b;
  --surface-2: #1b2a37;
  --input: #101a23;
  --text: #edf5fa;
  --muted: #acbac6;
  --faint: #8495a4;
  --line: #2c3b49;
  --line-strong: #425465;
  --brand: #49aa90;
  --green: #49aa90;
  --green-dark: #70c7af;
  --orange: #f0ab61;
  --blue: #82adff;
  --shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

.hd-calculator *, .hd-loan-calculator * { font-variant-numeric: tabular-nums; }
.hd-calculator :focus-visible, .hd-loan-calculator :focus-visible { outline: 3px solid #3585dc; outline-offset: 2px; }
.hd-calculator .hd-skip-link, .hd-loan-calculator .hd-skip-link { position: fixed; z-index: 100; top: -64px; left: 16px; padding: 10px 14px; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 800; text-decoration: none; transition: top .16s ease; }
.hd-calculator .hd-skip-link:focus, .hd-loan-calculator .hd-skip-link:focus { top: 14px; outline-color: #fff; }
.hd-calculator .page, .hd-loan-calculator .page { width: min(1180px, calc(100% - 32px)); gap: 28px; padding: 32px 0 54px; }
.hd-calculator .content, .hd-loan-calculator .content { border-radius: 20px; overflow: hidden; }
.hd-calculator .hero, .hd-loan-calculator .hero, .hd-loan-calculator .hero-title { padding: 32px 34px 26px; background: linear-gradient(120deg, var(--page), var(--surface-2)); }
.hd-calculator h1, .hd-loan-calculator h1 { color: var(--text); font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight: 800; letter-spacing: -.052em; line-height: 1.02; text-wrap: balance; }
.hd-calculator h2, .hd-loan-calculator h2 { color: var(--text); font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em; }
.hd-calculator .subhead, .hd-loan-calculator .subhead { max-width: 650px; margin-top: 10px; font-size: 1rem; }
.hd-calculator .calc { grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr); gap: 30px; padding: 30px 34px; }
.hd-calculator .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hd-calculator .field:last-child:nth-child(odd) { grid-column: span 2; max-width: calc(50% - 9px); }
.hd-calculator .field label, .hd-loan-calculator .field label, .hd-loan-calculator .control-row label { color: var(--text); font-size: .88rem; font-weight: 780; }
.hd-calculator .input-wrap, .hd-loan-calculator .input-wrap { height: 46px; border-radius: 9px; transition: border-color .16s ease, box-shadow .16s ease; }
.hd-calculator .input-wrap:focus-within, .hd-loan-calculator .input-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 17%, transparent); }
.hd-calculator .input-wrap input, .hd-loan-calculator .input-wrap input, .hd-loan-calculator .input-wrap select { font-size: 1rem; }
.hd-calculator .unit, .hd-loan-calculator .unit { min-width: 50px; }
.hd-calculator .tools, .hd-loan-calculator .tools, .hd-loan-calculator .tools-row { gap: 9px; margin-top: 22px; }
.hd-calculator .btn, .hd-loan-calculator .btn, .hd-loan-calculator .action-btn { min-height: 43px; border-radius: 9px; padding: 9px 14px; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.hd-calculator .btn:hover, .hd-loan-calculator .btn:hover, .hd-loan-calculator .action-btn:hover { transform: translateY(-1px); }
.hd-calculator .btn:active, .hd-loan-calculator .btn:active, .hd-loan-calculator .action-btn:active { transform: translateY(0); }
.hd-calculator .primary, .hd-loan-calculator .primary, .hd-loan-calculator .primary-btn { background: var(--brand); border-color: var(--brand); }
.hd-calculator .reset-btn, .hd-loan-calculator .reset-btn { background: transparent; color: var(--muted); }
.hd-calculator .results, .hd-loan-calculator .result-box { position: sticky; top: 94px; border-radius: 15px; box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 24%, transparent); }
.hd-calculator .results { background: var(--brand); }
.hd-results-heading { display: block; padding: 16px 18px 4px; color: rgba(255, 255, 255, .76); font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.hd-result-note { margin: 0; padding: 4px 18px 17px; color: rgba(255, 255, 255, .78); font-size: .78rem; line-height: 1.45; }
.hd-calculator .result, .hd-loan-calculator .result-line { padding: 18px; }
.hd-calculator .result strong, .hd-loan-calculator .result-line strong { font-size: clamp(1.15rem, 2.1vw, 1.5rem); }
.hd-calculator .section, .hd-loan-calculator .section { padding: 29px 34px; }
.hd-calculator .section.article { background: var(--surface-2); }
.hd-calculator .chart { min-height: 238px; height: 238px; border-radius: 12px; }
.hd-calculator .sidebar, .hd-loan-calculator .sidebar { gap: 14px; }
.hd-calculator .side-card, .hd-loan-calculator .side-card { border-radius: 14px; box-shadow: none; }
.hd-calculator .side-card h3, .hd-loan-calculator .side-card h3 { color: var(--text); font-weight: 800; }
.hd-calculator .side-list a, .hd-loan-calculator .side-list a { color: var(--muted); }
.hd-calculator .side-list a:hover, .hd-loan-calculator .side-list a:hover { color: var(--brand); }

.hd-loan-calculator .tabs { padding: 0 34px; }
.hd-loan-calculator .tab { border-radius: 9px 9px 0 0; padding: 14px 24px; }
.hd-loan-calculator .tab.active { background: var(--brand); border-color: var(--brand); }
.hd-loan-calculator .calculator { padding: 30px 34px; }
.hd-loan-calculator .calc-grid { gap: 30px; }
.hd-loan-calculator .form-stack { gap: 22px; }
.hd-loan-calculator .control-row { grid-template-columns: 155px 145px minmax(200px, 1fr); gap: 16px; }
.hd-loan-calculator .result-box { background: var(--brand); }
.hd-loan-calculator .summary { gap: 10px; }
.hd-loan-calculator .stat { border-radius: 11px; background: var(--brand); }
.hd-loan-calculator .stat.alt { background: var(--surface-2); }
.hd-loan-calculator .table-wrap { border-radius: 10px; }
.hd-loan-calculator th { font-size: .72rem; letter-spacing: .06em; }

/* The primary EMI layout becomes single-column at 1180px. Keep its estimate
   in normal document flow throughout that intermediate layout as well. */
@media (max-width: 1180px) {
  .hd-loan-calculator .calc-grid { grid-template-columns: 1fr; }
  .hd-loan-calculator .result-box { position: static; max-width: 520px; }
  .hd-loan-calculator .control-row { grid-template-columns: 1fr; gap: 8px; }
  .hd-loan-calculator .scheme-row .scheme-area { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 900px) {
  .hd-calculator .page, .hd-loan-calculator .page { width: min(100% - 24px, 1180px); }
  .hd-calculator .calc, .hd-loan-calculator .calc-grid { grid-template-columns: 1fr; }
  .hd-calculator .results, .hd-loan-calculator .result-box { position: static; max-width: none; }
  .hd-loan-calculator .control-row { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 600px) {
  .hd-calculator .page, .hd-loan-calculator .page { padding-top: 16px; }
  .hd-calculator .content, .hd-loan-calculator .content { border-radius: 14px; }
  .hd-calculator .hero, .hd-loan-calculator .hero, .hd-loan-calculator .hero-title, .hd-calculator .calc, .hd-loan-calculator .calculator, .hd-calculator .section, .hd-loan-calculator .section { padding-left: 18px; padding-right: 18px; }
  .hd-calculator .fields { grid-template-columns: 1fr; }
  .hd-calculator .field:last-child:nth-child(odd) { grid-column: auto; max-width: none; }
  .hd-calculator .chart { min-height: 210px; height: 210px; }
  .hd-loan-calculator .tabs { padding-left: 18px; }
  .hd-loan-calculator .tab { padding: 11px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-calculator *, .hd-loan-calculator * { transition-duration: .01ms !important; }
}