:root {
  --calculator-blue: #263ee1;
  --calculator-ink: #172033;
  --calculator-muted: #697289;
  --calculator-line: #e1e6f0;
  --calculator-bg: #f4f6fb;
}

body { min-height: 100vh; background: var(--calculator-bg); }
.calculator-header { background: rgba(255, 255, 255, .96); }
.calculator-header nav { display: flex; align-items: center; gap: 22px; }
.calculator-header nav a { color: var(--calculator-ink); font-weight: 750; text-decoration: none; }
.calculator-header nav a:hover { color: var(--calculator-blue); }

.calculator-main { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 70px 0 90px; color: var(--calculator-ink); }
.calculator-intro { max-width: 720px; margin-bottom: 32px; }
.calculator-intro > span { color: var(--calculator-blue); font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.calculator-intro h1 { margin: 10px 0 12px; font-size: clamp(38px, 6vw, 62px); line-height: 1; letter-spacing: -.045em; }
.calculator-intro p { margin: 0; color: var(--calculator-muted); font-size: 18px; line-height: 1.55; }

.calculator-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .75fr); align-items: start; gap: 24px; }
.calculator-form, .result-card { border: 1px solid var(--calculator-line); border-radius: 22px; box-shadow: 0 18px 55px rgba(35, 47, 85, .08); }
.calculator-form { padding: 26px; background: #fff; }
.source-note { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 14px 16px; border-radius: 14px; background: #f0f3ff; }
.source-note-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--calculator-blue); font-weight: 900; }
.source-note p { margin: 0; color: #4c5771; line-height: 1.45; }
.source-note a { color: var(--calculator-blue); font-weight: 850; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field-wide { grid-column: 1 / -1; }
.calculator-field { display: grid; gap: 8px; font-weight: 780; }
.calculator-field input { width: 100%; min-height: 52px; box-sizing: border-box; border: 1px solid #d5dbea; border-radius: 12px; padding: 0 14px; color: var(--calculator-ink); background: #fbfcff; font: inherit; font-size: 17px; outline: none; }
.calculator-field input:focus { border-color: var(--calculator-blue); background: #fff; box-shadow: 0 0 0 4px rgba(38, 62, 225, .1); }
.calculator-field small { color: var(--calculator-muted); font-size: 12px; font-weight: 500; line-height: 1.45; }
.calculator-error { margin: 18px 0 0; padding: 13px 15px; border: 1px solid #ffc6cb; border-radius: 12px; color: #a61b27; background: #fff1f2; font-weight: 750; }
.calculate-button { width: 100%; min-height: 58px; margin-top: 24px; border: 0; border-radius: 13px; color: #fff; background: var(--calculator-blue); box-shadow: 0 14px 30px rgba(38, 62, 225, .24); font: inherit; font-size: 19px; font-weight: 900; cursor: pointer; }
.calculate-button:hover { background: #1730d2; transform: translateY(-1px); }
.calculate-button:focus-visible { outline: 4px solid rgba(38, 62, 225, .2); outline-offset: 3px; }

.result-card { position: sticky; top: 92px; padding: 28px; color: #fff; background: linear-gradient(150deg, #263ee1, #17258f); border-color: transparent; }
.result-card:focus { outline: none; }
.result-card > span { color: #cbd2ff; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.result-metric { padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.result-metric small { display: block; margin-bottom: 7px; color: #dce1ff; font-size: 14px; }
.result-metric strong { display: block; font-size: clamp(32px, 5vw, 46px); line-height: 1; letter-spacing: -.04em; }
.result-card p { margin: 20px 0 0; color: #cbd2ff; font-size: 13px; line-height: 1.5; }
.result-card.is-ready { box-shadow: 0 24px 65px rgba(38, 62, 225, .32); }
.result-card.is-negative { background: linear-gradient(150deg, #d52f3d, #7b131c); }

.target-calculator { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .8fr) minmax(220px, .65fr); align-items: end; gap: 24px; margin-top: 24px; padding: 26px; border: 1px solid var(--calculator-line); border-radius: 22px; background: #fff; box-shadow: 0 18px 55px rgba(35, 47, 85, .08); }
.target-calculator-copy > span { color: var(--calculator-blue); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.target-calculator-copy h2 { margin: 7px 0 8px; font-size: 25px; line-height: 1.15; letter-spacing: -.025em; }
.target-calculator-copy p { margin: 0; color: var(--calculator-muted); line-height: 1.45; }
.target-form { display: grid; gap: 12px; }
.target-button { min-height: 50px; border: 1px solid var(--calculator-blue); border-radius: 12px; color: var(--calculator-blue); background: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.target-button:hover { color: #fff; background: var(--calculator-blue); }
.target-error { margin: 0; color: #a61b27; font-size: 12px; font-weight: 750; }
.target-result { min-height: 118px; box-sizing: border-box; padding: 18px; border-radius: 16px; color: #fff; background: #172033; }
.target-result small { display: block; color: #bdc7dc; }
.target-result strong { display: block; margin: 8px 0 6px; font-size: 32px; letter-spacing: -.03em; }
.target-result p { margin: 0; color: #bdc7dc; font-size: 12px; line-height: 1.4; }

@media (max-width: 760px) {
  .calculator-main { padding: 38px 0 60px; }
  .calculator-layout { grid-template-columns: 1fr; }
  .result-card { position: static; }
  .target-calculator { grid-template-columns: 1fr; align-items: stretch; }
  .calculator-header nav a:first-child { display: none; }
}

@media (max-width: 540px) {
  .calculator-main { width: min(100% - 20px, 960px); }
  .calculator-intro h1 { font-size: 40px; }
  .calculator-intro p { font-size: 16px; }
  .calculator-form, .result-card { padding: 20px; border-radius: 18px; }
  .field-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
}