.sales-calculator {
  --calc-ink: var(--appearance-workspace-text-primary, #182532);
  --calc-muted: var(--appearance-workspace-text-secondary, #6b7b8c);
  --calc-line: rgb(255 255 255 / var(--appearance-workspace-border-alpha, .45));
  --calc-panel: rgb(var(--appearance-workspace-surface-rgb, 255 255 255) / var(--appearance-workspace-opacity, .82));
  --calc-inner: rgb(var(--appearance-workspace-surface-rgb, 255 255 255) / var(--appearance-workspace-inner-opacity, .52));
  color: var(--calc-ink);
}

.sales-calc-head {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.sales-calc-head > div:first-child > span,
.sales-assumptions header small,
.sales-scenario header small {
  color: #277be4;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.sales-calc-head h1 {
  margin: 5px 0 0;
  color: var(--calc-ink);
  font-size: clamp(29px, 3vw, 43px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.sales-calc-head p {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--calc-muted);
  font-size: 13px;
  line-height: 1.5;
}

.sales-calc-savebar {
  margin-bottom: 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(220px, .8fr) auto;
  gap: 10px;
  align-items: end;
  background: var(--calc-panel);
  border: 1px solid var(--calc-line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--appearance-workspace-effective-blur, 18px));
}

.sales-calc-savebar label,
.sales-goal-input > label:first-child {
  display: grid;
  gap: 6px;
}

.sales-calc-savebar label > span,
.sales-goal-input > label:first-child > span {
  color: var(--calc-muted);
  font-size: 10px;
  font-weight: 750;
}

.sales-calc-savebar input,
.sales-calc-savebar select,
.sales-goal-input select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: var(--calc-ink);
  background: var(--calc-inner);
  border: 1px solid var(--calc-line);
  border-radius: 12px;
  outline: 0;
}

.sales-calc-savebar input:focus,
.sales-calc-savebar select:focus,
.sales-goal-input select:focus,
.sales-calc-field > div:focus-within,
.sales-calc-cell > div:focus-within {
  border-color: rgba(39, 123, 228, .58);
  box-shadow: 0 0 0 3px rgba(39, 123, 228, .1);
}

.sales-calc-scenarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sales-scenario,
.sales-assumptions,
.sales-metrics {
  position: relative;
  padding: 20px;
  overflow: hidden;
  background: var(--calc-panel);
  border: 1px solid var(--calc-line);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--appearance-workspace-effective-blur, 18px));
}

.sales-scenario::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4c7fea, transparent);
}

.sales-scenario.is-goal::before {
  background: linear-gradient(90deg, transparent, #28b879, transparent);
}

.sales-scenario > header,
.sales-assumptions > header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.sales-scenario header h2,
.sales-assumptions header h2 {
  margin: 4px 0 0;
  color: var(--calc-ink);
  font-size: 23px;
  letter-spacing: -.025em;
}

.sales-scenario > header > span {
  padding: 7px 10px;
  color: #2f68ca;
  font-size: 10px;
  font-weight: 800;
  background: rgba(76, 127, 234, .1);
  border: 1px solid rgba(76, 127, 234, .16);
  border-radius: 999px;
}

.sales-scenario.is-goal > header > span {
  color: #14865a;
  background: rgba(40, 184, 121, .1);
  border-color: rgba(40, 184, 121, .16);
}

.sales-scenario-inputs,
.sales-goal-input {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sales-goal-input {
  grid-template-columns: minmax(140px, .75fr) minmax(0, 1.25fr);
}

.sales-calc-field {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.sales-calc-field > span,
.sales-calc-cell > span {
  min-height: 25px;
  display: flex;
  align-items: flex-end;
  color: var(--calc-muted);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.25;
}

.sales-calc-field > div,
.sales-calc-cell > div {
  min-width: 0;
  min-height: 45px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--calc-inner);
  border: 1px solid var(--calc-line);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sales-calc-field input,
.sales-calc-cell input {
  min-width: 0;
  width: 100%;
  padding: 0;
  color: var(--calc-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 820;
  background: transparent;
  border: 0;
  outline: 0;
}

.sales-calc-field em,
.sales-calc-cell em {
  flex: 0 0 auto;
  color: var(--calc-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.sales-calc-field > small {
  min-height: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sales-calc-field > small button {
  min-height: 23px;
  padding: 0 7px;
  color: var(--calc-muted);
  font-size: 9px;
  font-weight: 760;
  background: var(--calc-inner);
  border: 1px solid var(--calc-line);
  border-radius: 8px;
  cursor: pointer;
}

.sales-calc-field > small button:hover {
  color: #277be4;
  border-color: rgba(39, 123, 228, .35);
}

.sales-scenario-results {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sales-scenario.is-goal .sales-scenario-results {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sales-calc-cell {
  min-width: 0;
  padding: 11px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--calc-line);
  border-radius: 14px;
}

.sales-calc-cell > div {
  min-height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.sales-calc-cell input {
  font-size: 15px;
}

.sales-calc-cell.is-emphasis {
  background: rgba(76, 127, 234, .08);
  border-color: rgba(76, 127, 234, .22);
}

.is-goal .sales-calc-cell.is-emphasis {
  background: rgba(40, 184, 121, .075);
  border-color: rgba(40, 184, 121, .2);
}

.sales-economy-row {
  margin-top: 9px;
  padding-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--calc-line);
}

.sales-assumptions {
  margin-top: 14px;
}

.sales-assumptions header > span {
  color: var(--calc-muted);
  font-size: 10px;
}

.sales-assumptions > div {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.sales-metrics {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.sales-calc-message {
  max-height: 0;
  margin-top: 0;
  padding: 0 14px;
  overflow: hidden;
  color: #a73445;
  font-size: 12px;
  background: rgba(210, 65, 86, .08);
  border: 0 solid rgba(210, 65, 86, .16);
  border-radius: 12px;
  opacity: 0;
  transition: max-height .2s ease, margin .2s ease, padding .2s ease, opacity .2s ease;
}

.sales-calc-message.is-visible {
  max-height: 80px;
  margin-top: 12px;
  padding: 10px 14px;
  border-width: 1px;
  opacity: 1;
}

.sales-calc-message[data-tone="success"] {
  color: #12724c;
  background: rgba(32, 174, 111, .09);
  border-color: rgba(32, 174, 111, .18);
}

.sales-calc-disclaimer {
  margin: 11px 2px 0;
  color: var(--calc-muted);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1280px) {
  .sales-scenario.is-goal .sales-scenario-results,
  .sales-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .sales-calc-scenarios {
    grid-template-columns: 1fr;
  }

  .sales-assumptions > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .sales-calc-head,
  .sales-scenario > header,
  .sales-assumptions > header {
    display: grid;
  }

  .sales-calc-savebar,
  .sales-scenario-inputs,
  .sales-goal-input,
  .sales-assumptions > div,
  .sales-metrics {
    grid-template-columns: 1fr;
  }

  .sales-scenario-results,
  .sales-scenario.is-goal .sales-scenario-results,
  .sales-economy-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .sales-scenario-results,
  .sales-scenario.is-goal .sales-scenario-results,
  .sales-economy-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sales-calculator * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}