:root {
  --bg: #f3f6fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --navy: #092c4c;
  --navy-2: #174a72;
  --text: #10253a;
  --muted: #64778a;
  --border: #dbe4ec;
  --green: #9dcc3b;
  --green-2: #79ab1f;
  --green-soft: #eef7dc;
  --blue-soft: #e9f3fb;
  --red: #b84242;
  --shadow: 0 18px 50px rgba(21, 49, 75, .08);
  --radius: 20px;
}

html[data-theme="dark"] {
  --bg: #071624;
  --surface: #0d2235;
  --surface-2: #112b41;
  --navy: #dceefa;
  --navy-2: #87bce2;
  --text: #e8f1f8;
  --muted: #9db0c1;
  --border: #263f54;
  --green: #aed958;
  --green-2: #c2e47e;
  --green-soft: #1d3828;
  --blue-soft: #112f49;
  --red: #ff8a8a;
  --shadow: 0 22px 55px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "DM Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.topbar { height: 76px; padding: 0 max(24px, calc((100vw - 1440px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #092c4c; color: #b1dc52; font: 800 16px/1 Manrope, sans-serif; letter-spacing: -.05em; }
.brand strong { display: block; font: 800 16px/1.2 Manrope, sans-serif; letter-spacing: -.02em; }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.header-actions, .language { display: flex; align-items: center; gap: 8px; }
.language { padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.language button { border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; padding: 7px 9px; border-radius: 7px; }
.language button.active { background: var(--navy); color: var(--surface); }
.icon-button, .button { border: 1px solid var(--border); background: var(--surface); min-height: 40px; border-radius: 10px; }
.icon-button { width: 40px; display: grid; place-items: center; font-size: 19px; }
.moon { display: none; }
[data-theme="dark"] .moon { display: inline; }
[data-theme="dark"] .sun { display: none; }
.button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 0 14px; font-size: 13px; font-weight: 700; }
.button:hover, .icon-button:hover { border-color: var(--green); }

.page-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
.hero { min-height: 256px; padding: 64px 0 48px; display: flex; align-items: end; justify-content: space-between; gap: 56px; }
.hero h1 { max-width: 800px; margin: 9px 0 0; font: 800 clamp(38px, 5vw, 70px)/.99 Manrope, sans-serif; letter-spacing: -.055em; color: var(--navy); }
.hero h1 em { color: var(--green-2); font-style: normal; }
.hero > p { max-width: 450px; margin: 0 0 5px; color: var(--muted); font-size: 17px; }
.eyebrow { color: var(--green-2); font-weight: 800; font-size: 11px; letter-spacing: .17em; }

.app-grid { display: grid; grid-template-columns: 440px 1fr; gap: 24px; align-items: start; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.inputs { padding: 26px; position: sticky; top: 96px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.card-head > div:first-child { display: flex; align-items: center; gap: 10px; }
.card-head h2 { margin: 0; font: 800 20px/1.2 Manrope, sans-serif; letter-spacing: -.025em; }
.step { display: grid; place-items: center; width: 30px; height: 30px; background: var(--green-soft); color: var(--green-2); border-radius: 9px; font-size: 11px; font-weight: 800; }
.text-button { border: 0; background: none; padding: 4px; color: var(--muted); font-size: 12px; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }

.form-section { border-top: 1px solid var(--border); padding-top: 21px; margin-top: 20px; }
.form-section h3, .section-line h3 { margin: 0; font: 700 13px/1.3 Manrope, sans-serif; color: var(--navy); }
.field-label { display: grid; grid-template-columns: minmax(0, 1fr) 172px; align-items: center; gap: 15px; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--muted); }
.field-label small { display: block; font-size: 10px; font-weight: 400; line-height: 1.2; margin-top: 2px; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two-fields .field-label { grid-template-columns: 1fr; gap: 6px; }
.input-shell, .select-shell { min-height: 45px; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.input-shell:focus-within, .select-shell:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.input-shell input, .select-shell select { width: 100%; min-width: 0; height: 43px; padding: 0 9px 0 12px; border: 0; outline: 0; background: transparent; font-weight: 700; }
.input-shell b { padding: 0 11px 0 4px; white-space: nowrap; color: var(--muted); font-size: 11px; font-weight: 600; }
.select-shell select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 19px, calc(100% - 10px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.section-line { display: flex; justify-content: space-between; align-items: center; }
.section-line small, summary small { font-size: 10px; color: var(--muted); font-weight: 500; }
.rate-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 13px 0 10px; }
.rate-item { display: flex; align-items: center; min-height: 44px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.rate-item input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 3px 0 12px; font-weight: 800; }
.rate-item > span { color: var(--muted); font-weight: 700; }
.rate-item button { width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); font-size: 18px; }
.add-button { width: 100%; min-height: 40px; border: 1px dashed var(--border); border-radius: 10px; background: transparent; color: var(--green-2); font-size: 12px; font-weight: 700; }
.add-button:disabled { opacity: .4; cursor: not-allowed; }
details summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--navy); font: 700 13px/1.3 Manrope, sans-serif; list-style: none; }
details summary::-webkit-details-marker { display: none; }
.overpayment-grid { margin-top: 6px; }
.error { background: #fff0f0; color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); padding: 11px 13px; border-radius: 10px; font-size: 12px; }

.results-column { display: grid; gap: 24px; }
.summary, .chart-card { padding: 26px; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--green-2); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.live i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 16%, transparent); }
.best-banner { background: linear-gradient(120deg, #092c4c, #174c73); color: white; border-radius: 16px; padding: 25px 27px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; position: relative; overflow: hidden; }
.best-banner::after { content: ""; width: 180px; height: 180px; position: absolute; right: -55px; top: -85px; border: 36px solid rgba(169, 215, 71, .17); border-radius: 50%; }
.best-banner span { display: block; color: #b9c9d7; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.best-banner strong { display: block; margin-top: 5px; font: 800 clamp(30px, 4vw, 46px)/1 Manrope, sans-serif; letter-spacing: -.045em; }
.best-banner .banner-detail { text-align: right; position: relative; z-index: 2; }
.best-banner .banner-detail strong { color: #b4df58; font-size: 24px; }
.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 13px; }
.summary-card { padding: 15px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; }
.summary-card span { display: block; min-height: 30px; color: var(--muted); font-size: 10px; line-height: 1.25; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.summary-card strong { display: block; margin-top: 6px; font: 800 18px/1.1 Manrope, sans-serif; letter-spacing: -.03em; color: var(--navy); }
.summary-card small { color: var(--green-2); font-size: 10px; }
.note { margin: 13px 3px 0; color: var(--muted); font-size: 10px; }
.card-head.compact { margin-bottom: 12px; }
.tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.tabs button { border: 0; background: transparent; padding: 7px 11px; border-radius: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.tabs button.active { background: var(--navy); color: var(--surface); }
.chart-wrap { position: relative; min-height: 250px; }
#comparison-chart { width: 100%; height: 220px; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 9px; height: 9px; border-radius: 3px; }

.detail-area { padding: 90px 0 50px; }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 28px; }
.section-title h2 { margin: 7px 0 0; font: 800 clamp(30px, 4vw, 48px)/1.05 Manrope, sans-serif; letter-spacing: -.045em; color: var(--navy); }
.section-title > p { max-width: 410px; margin: 0; color: var(--muted); }
.table-card { margin-top: 18px; overflow: hidden; box-shadow: none; }
.subhead { min-height: 62px; padding: 0 21px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--border); }
.subhead h3 { margin: 0; font: 800 15px/1.2 Manrope, sans-serif; color: var(--navy); }
.subhead span { color: var(--muted); font-size: 10px; }
.table-scroll { overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 13px 15px; border-bottom: 1px solid var(--border); text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; }
th { background: var(--surface-2); color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
td { color: var(--text); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--green-soft) 45%, transparent); }
.scenario-name { font-weight: 800; color: var(--navy); }
.scenario-name small { display: block; color: var(--muted); font-weight: 500; }
.positive { color: var(--green-2); font-weight: 800; }
.negative { color: var(--red); font-weight: 800; }
.pill { display: inline-block; padding: 3px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green-2); font-weight: 800; }
.split-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.schedule-card { margin-top: 18px; overflow: hidden; box-shadow: none; }
.schedule-head { padding: 19px 21px; display: flex; align-items: end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); }
.schedule-head h3 { margin: 4px 0 0; font: 800 17px/1.2 Manrope, sans-serif; }
.schedule-controls { display: flex; gap: 10px; }
.schedule-controls label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.schedule-controls select { display: block; min-width: 185px; height: 36px; margin-top: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 0 10px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.schedule-controls label:last-child select { min-width: 90px; }
.schedule-scroll { max-height: 440px; }
.schedule-scroll thead { position: sticky; top: 0; z-index: 2; }
.capital-card { margin-top: 18px; overflow: hidden; box-shadow: none; }
.capital-head { padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 1.15fr; gap: 34px; align-items: end; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, var(--surface), var(--green-soft)); }
.capital-head h3 { margin: 6px 0 0; font: 800 24px/1.15 Manrope, sans-serif; letter-spacing: -.04em; color: var(--navy); }
.capital-head p { max-width: 520px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.capital-inputs { display: grid; grid-template-columns: 1.1fr .85fr 1.1fr; gap: 9px; }
.capital-inputs label { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.capital-inputs .input-shell { margin-top: 5px; background: var(--surface); }
.capital-highlights { padding: 16px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.capital-stat { padding: 14px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 11px; }
.capital-stat span { display: block; min-height: 26px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.capital-stat strong { display: block; margin-top: 6px; color: var(--navy); font: 800 16px/1.15 Manrope, sans-serif; letter-spacing: -.03em; }
.capital-stat small { color: var(--green-2); font-size: 9px; }
.capital-chart-wrap { margin: 0 24px 20px; padding: 17px 17px 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
#capital-chart { width: 100%; height: 230px; display: block; }
.contribution-color { background: #2e8bc0; }
.profit-color { background: var(--green); }
.loan-color { background: #7356bf; }
.capital-subhead { border-top: 1px solid var(--border); }
.method-card { margin-top: 18px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; padding: 23px 25px; background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--navy-2) 20%, transparent); border-radius: 16px; }
.method-card strong { color: var(--navy); }
.method-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
footer { max-width: 1440px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.watermark { position: fixed; right: 15px; bottom: 11px; z-index: 40; padding: 5px 9px; border-radius: 7px; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--border); color: var(--muted); font: 600 9px/1 Manrope, sans-serif; backdrop-filter: blur(8px); pointer-events: none; }

@media (max-width: 1100px) {
  .app-grid { grid-template-columns: 380px 1fr; }
  .summary-cards { grid-template-columns: 1fr 1fr; }
  .split-tables { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .page-shell { width: min(100% - 28px, 720px); }
  .topbar { padding: 0 14px; }
  .brand small, .button-ghost span:first-child { display: none; }
  .hero { min-height: 0; padding: 45px 0 34px; display: block; }
  .hero > p { margin-top: 22px; }
  .app-grid { grid-template-columns: 1fr; }
  .inputs { position: static; }
  .section-title { display: block; }
  .section-title > p { margin-top: 15px; }
  .schedule-head { align-items: start; flex-direction: column; }
  .schedule-controls { width: 100%; }
  .schedule-controls label:first-child { flex: 1; }
  .schedule-controls select { width: 100%; min-width: 0; }
  .method-card { grid-template-columns: 1fr; gap: 15px; }
  .capital-head { grid-template-columns: 1fr; }
  .capital-highlights { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .topbar { height: 66px; }
  .brand > span:last-child { display: none; }
  .header-actions { gap: 5px; }
  .button { padding: 0 10px; }
  .inputs, .summary, .chart-card { padding: 18px; }
  .hero h1 { font-size: 40px; }
  .field-label { grid-template-columns: 1fr 145px; }
  .two-fields { grid-template-columns: 1fr; }
  .two-fields .field-label { grid-template-columns: 1fr 145px; gap: 15px; }
  .summary-cards { grid-template-columns: 1fr 1fr; }
  .best-banner { grid-template-columns: 1fr; }
  .best-banner .banner-detail { text-align: left; }
  .tabs button { padding: 7px 8px; }
  .schedule-controls { flex-direction: column; }
  .capital-head { padding: 19px; gap: 18px; }
  .capital-inputs { grid-template-columns: 1fr; }
  .capital-highlights { padding: 13px 19px; grid-template-columns: 1fr 1fr; }
  .capital-chart-wrap { margin: 0 19px 19px; }
  footer { display: block; }
  footer span { display: block; margin-top: 5px; }
}

@media print {
  @page { size: A4 landscape; margin: 11mm; }
  :root, html[data-theme="dark"] { --bg: #fff; --surface: #fff; --surface-2: #f5f7fa; --text: #172b3d; --navy: #092c4c; --muted: #5c6d7c; --border: #d9e1e8; --green-2: #6f9e1e; --green-soft: #edf5df; --blue-soft: #eef5fa; --shadow: none; }
  body { background: #fff; font-size: 10px; }
  .no-print, .inputs, .schedule-card { display: none !important; }
  .page-shell { width: 100%; }
  .hero { min-height: 0; padding: 0 0 8mm; align-items: start; }
  .hero h1 { font-size: 29px; }
  .hero > p { font-size: 10px; max-width: 360px; }
  .app-grid { display: block; }
  .summary { padding: 6mm; break-inside: avoid; }
  .best-banner { padding: 5mm; }
  .best-banner strong { font-size: 25px; }
  .detail-area { padding: 9mm 0 0; }
  .section-title h2 { font-size: 25px; }
  .section-title { margin-bottom: 5mm; }
  .card { box-shadow: none; }
  .table-card { break-inside: avoid; margin-top: 5mm; }
  th, td { padding: 6px 7px; font-size: 8px; }
  th { font-size: 6.5px; }
  .split-tables { grid-template-columns: 1fr 1fr; gap: 5mm; }
  .method-card { margin-top: 5mm; padding: 4mm; break-inside: avoid; }
  .capital-card { break-before: page; }
  .capital-head { grid-template-columns: 1fr; padding: 5mm; }
  .capital-highlights { padding: 4mm 5mm; }
  .capital-chart-wrap { margin: 0 5mm 5mm; }
  footer { padding: 5mm 0; }
  .watermark { position: fixed; border: 0; color: #777; background: transparent; right: 0; bottom: 0; font-size: 8px; }
}