.calculator-page {
  --calculator-surface: #171d31;
  --calculator-elevated: #1d253d;
  --calculator-muted: #242d49;
  --calculator-border: #20344b;
  --calculator-text: #f4f8fc;
  --calculator-subtle: #93a4b8;
  --calculator-cyan: #01d6e7;
  --calculator-primary: #2f3c8f;
  --calculator-success: #17b890;
  --calculator-warning: #f5a524;
  --calculator-danger: #ef5b5b;
}

.calculator-intro { padding: 4rem 0 2rem; max-width: 980px; }
.calculator-intro h1 { max-width: 900px; margin: .65rem 0 1rem; }
.calculator-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 1.25rem;
  align-items: start;
}
.calculator-controls,
.calculator-result {
  border: 1px solid var(--calculator-border);
  border-radius: 24px;
  background: var(--calculator-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}
.calculator-controls { padding: clamp(1rem, 2.5vw, 1.75rem); }
.calculator-result { padding: clamp(1.25rem, 3vw, 2rem); position: sticky; top: 104px; overflow: hidden; }
.calculator-result::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(1, 214, 231, .11); filter: blur(2px); right: -70px; top: -80px; pointer-events: none; }
.calculator-toolbar > label,
#kpi-form > h2 { display: block; margin: 0 0 .65rem; color: var(--calculator-text); font-size: .88rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.calculator-select,
.calculator-option-row select,
.calculator-field input,
.calculator-option-row input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--calculator-border);
  border-radius: 12px;
  background: #101525;
  color: var(--calculator-text);
  padding: .72rem .8rem;
  font: inherit;
}
.calculator-select:focus,
.calculator-option-row select:focus,
.calculator-field input:focus,
.calculator-option-row input:focus { outline: 2px solid var(--calculator-cyan); outline-offset: 2px; }
.calculator-categories { display: flex; flex-wrap: wrap; gap: .45rem; margin: .85rem 0 1.5rem; }
.calculator-categories button,
.calculator-catalogue button {
  border: 1px solid var(--calculator-border);
  border-radius: 999px;
  background: var(--calculator-elevated);
  color: var(--calculator-subtle);
  padding: .56rem .78rem;
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.calculator-categories button:hover,
.calculator-categories button:focus-visible,
.calculator-catalogue button:hover,
.calculator-catalogue button:focus-visible { color: var(--calculator-text); border-color: var(--calculator-cyan); }
.calculator-categories button.is-active { color: #07131e; background: var(--calculator-cyan); border-color: var(--calculator-cyan); font-weight: 800; }
.calculator-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.calculator-input-grid label,
.calculator-option-row label { color: var(--calculator-subtle); font-size: .86rem; }
.calculator-input-grid label > span:first-child,
.calculator-option-row label { display: grid; gap: .38rem; }
.calculator-field { display: flex; align-items: center; border-radius: 12px; background: #101525; }
.calculator-field input { min-width: 0; border: 0; background: transparent; }
.calculator-field > span { padding-right: .75rem; color: var(--calculator-subtle); white-space: nowrap; }
.calculator-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--calculator-danger); }
.calculator-option-row { display: grid; grid-template-columns: 1fr minmax(130px, .4fr); gap: .85rem; margin-top: 1rem; }
.calculator-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.calculator-status { min-height: 1.5rem; margin: .8rem 0 0; color: var(--calculator-subtle); font-size: .88rem; }
.calculator-status.is-error { color: var(--calculator-danger); }
.calculator-status.is-warning { color: var(--calculator-warning); }
.calculator-result h2 { margin: .45rem 0 .85rem; position: relative; }
.calculator-result-number { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: 1rem 0; border-block: 1px solid var(--calculator-border); }
.calculator-result-number strong { color: var(--calculator-cyan); font-size: clamp(2.4rem, 7vw, 4.8rem); line-height: 1; letter-spacing: -.055em; }
.calculator-result-number span { color: var(--calculator-subtle); font-weight: 700; }
#kpi-result-summary { color: var(--calculator-subtle); }
.calculator-result section { margin-top: 1.2rem; }
.calculator-result section h3 { margin: 0 0 .55rem; font-size: .86rem; color: var(--calculator-subtle); text-transform: uppercase; letter-spacing: .04em; }
.calculator-formula { display: block; padding: .9rem; overflow-wrap: anywhere; border-radius: 12px; background: #101525; color: var(--calculator-text); line-height: 1.6; }
.calculator-components { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0; }
.calculator-components dt { color: var(--calculator-subtle); }
.calculator-components dd { margin: 0; color: var(--calculator-text); font-weight: 750; }
.calculator-target-result { margin-top: .8rem; padding: .7rem .8rem; border-radius: 10px; }
.calculator-target-result:empty { display: none; }
.calculator-target-result.is-met { color: #baf3df; background: rgba(23, 184, 144, .14); }
.calculator-target-result.is-missed { color: #ffc7c7; background: rgba(239, 91, 91, .14); }
.calculator-hint { color: var(--calculator-subtle); font-size: .82rem; margin-top: 1.3rem; }
.calculator-disclaimer { margin-top: 1rem; color: var(--calculator-subtle); font-size: .88rem; }
.calculator-disclaimer p { border-left: 2px solid var(--calculator-warning); padding-left: .9rem; }
.calculator-catalogue { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 900px) {
  .calculator-shell { grid-template-columns: 1fr; }
  .calculator-result { position: static; }
}

@media (max-width: 620px) {
  .calculator-intro { padding-top: 2.5rem; }
  .calculator-controls, .calculator-result { border-radius: 18px; }
  .calculator-input-grid, .calculator-option-row { grid-template-columns: 1fr; }
  .calculator-result-number strong { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .calculator-page { scroll-behavior: auto; }
}