:root {
  color-scheme: dark;
  --bg: #06101f;
  --bg-2: #09182b;
  --panel: rgba(13, 31, 52, 0.92);
  --panel-2: #102943;
  --panel-3: #153550;
  --line: rgba(149, 190, 222, 0.18);
  --line-strong: rgba(94, 231, 247, 0.42);
  --text: #f4f8fb;
  --muted: #9db2c6;
  --muted-2: #7189a1;
  --cyan: #5ee7f7;
  --cyan-2: #25b8df;
  --blue: #3f7cff;
  --raspberry: #ff4c8b;
  --lime: #a8f06a;
  --amber: #ffc763;
  --danger: #ff6d79;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
  --radius: 22px;
  --radius-sm: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(37, 184, 223, 0.13), transparent 28rem),
    radial-gradient(circle at 88% 34%, rgba(255, 76, 139, 0.08), transparent 30rem),
    linear-gradient(180deg, #06101f 0%, #071426 48%, #050d18 100%);
  font-size: 16px;
  line-height: 1.5;
}

button, input, select { font: inherit; }

button, select { cursor: pointer; }

a { color: inherit; text-decoration: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 66px;
  padding: 10px clamp(18px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 16, 31, 0.84);
  backdrop-filter: blur(22px) saturate(135%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(94, 231, 247, 0.4);
  border-radius: 12px;
  color: var(--cyan);
  background: linear-gradient(145deg, rgba(94, 231, 247, 0.13), rgba(63, 124, 255, 0.12));
  box-shadow: inset 0 0 20px rgba(94, 231, 247, 0.08);
}

.topnav {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}

.topnav a {
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.87rem;
  transition: color .2s ease, background .2s ease;
}

.topnav a:hover,
.topnav a:focus-visible {
  color: var(--text);
  background: rgba(94, 231, 247, 0.08);
  outline: none;
}

.ghost-button {
  justify-self: end;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
}

.ghost-button:hover { color: var(--text); border-color: var(--line-strong); }

main {
  width: min(1520px, calc(100% - clamp(24px, 5vw, 82px)));
  margin: 0 auto;
}

.intro {
  position: relative;
  min-height: 230px;
  margin: clamp(22px, 3vw, 40px) 0 24px;
  overflow: hidden;
  border: 1px solid rgba(94, 231, 247, 0.2);
  border-radius: 28px;
  background: #07172b;
  box-shadow: var(--shadow);
}

.intro-image {
  position: absolute;
  inset: 0 0 0 auto;
  width: 69%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
}

.intro-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #07172b 8%, rgba(7, 23, 43, .97) 31%, rgba(7, 23, 43, .58) 58%, rgba(7,23,43,.08) 100%),
    linear-gradient(0deg, rgba(5, 14, 26, .72), transparent 52%);
}

.intro-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(690px, 58%);
  min-height: 230px;
  padding: clamp(24px, 4vw, 52px);
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 680px;
  margin-bottom: 10px;
  font-size: clamp(2rem, 3.5vw, 3.45rem);
  line-height: .98;
  letter-spacing: -0.055em;
}

.intro-copy > p:not(.eyebrow) {
  max-width: 600px;
  margin-bottom: 18px;
  color: #c0d1df;
}

.scenario-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.scenario-switch button {
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #c2d1dd;
  background: rgba(5, 15, 28, .64);
  backdrop-filter: blur(8px);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.scenario-switch button:hover { transform: translateY(-1px); border-color: var(--cyan); }

.scenario-switch button.active {
  color: #021118;
  border-color: var(--cyan);
  background: var(--cyan);
  font-weight: 800;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(390px, .82fr);
  gap: 22px;
  align-items: start;
}

.inputs-column,
.results-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.results-column {
  position: sticky;
  top: 84px;
}

.panel,
.result-card,
.chart-card,
.table-wrap {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(15, 35, 58, .96), rgba(9, 26, 45, .95));
  box-shadow: 0 14px 42px rgba(0, 0, 0, .18);
}

.panel { padding: clamp(20px, 2.4vw, 30px); }

.panel-accent {
  border-color: rgba(94, 231, 247, .28);
  background:
    linear-gradient(145deg, rgba(16, 43, 69, .98), rgba(8, 29, 50, .96));
}

.panel-heading,
.card-title-row,
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.panel-heading { margin-bottom: 22px; }

.panel-heading > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.panel-heading h2,
.card-title-row h2,
.card-title-row h3 {
  margin: 0;
  letter-spacing: -0.025em;
}

.panel-heading h2 { font-size: 1.15rem; }

.step {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
}

.hint,
.card-title-row > span {
  color: var(--muted-2);
  font-size: .8rem;
  white-space: nowrap;
}

.field-grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field.wide { grid-column: span 1; }

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

.field > span:first-child {
  color: #aabfd0;
  font-size: .84rem;
  font-weight: 650;
}

.input-shell {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 46px;
  border: 1px solid rgba(157, 178, 198, .18);
  border-radius: 12px;
  background: rgba(3, 13, 25, .42);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.input-shell:focus-within {
  border-color: var(--cyan);
  background: rgba(3, 16, 30, .72);
  box-shadow: 0 0 0 3px rgba(94, 231, 247, .09);
}

input,
select {
  width: 100%;
  min-width: 0;
  height: 46px;
  border: 1px solid rgba(157, 178, 198, .18);
  border-radius: 12px;
  color: var(--text);
  background: rgba(3, 13, 25, .42);
  outline: none;
}

input { padding: 0 11px; border: 0; background: transparent; }

select {
  padding: 0 38px 0 12px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(94, 231, 247, .09);
}

.input-shell em {
  flex: 0 0 auto;
  padding: 0 11px 0 5px;
  color: var(--muted-2);
  font-size: .76rem;
  font-style: normal;
  white-space: nowrap;
}

.subheading {
  margin: 24px 0 12px;
  color: var(--muted);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.subheading:first-of-type { margin-top: 4px; }

.model-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.model-strip div {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(3, 15, 28, .38);
}

.model-strip span,
.model-strip small {
  display: block;
  color: var(--muted-2);
  font-size: .7rem;
}

.model-strip strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: .86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-preview {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: center;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(94,231,247,.12);
  border-radius: 14px;
  background: rgba(3, 14, 27, .32);
}

.flow-preview > div { display: grid; text-align: center; }
.flow-preview strong { font-size: 1.1rem; }
.flow-preview span { color: var(--muted-2); font-size: .72rem; }
.flow-preview i { height: 1px; background: linear-gradient(90deg, var(--line), var(--cyan)); }
.flow-primary strong { color: var(--cyan); }

.result-card { padding: 20px; }

.result-main {
  overflow: hidden;
  border-color: rgba(94,231,247,.32);
  background:
    radial-gradient(circle at 92% 10%, rgba(94,231,247,.13), transparent 13rem),
    linear-gradient(145deg, #102e49, #0b2037 68%);
}

.result-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.result-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.result-status[data-tone="good"] { color: var(--lime); }
.result-status[data-tone="warn"] { color: var(--amber); }
.result-status[data-tone="bad"] { color: var(--danger); }

.profit-block {
  display: grid;
  margin: 17px 0 20px;
}

.profit-block > span { color: var(--muted); font-size: .85rem; }
.profit-block strong { margin: 3px 0; font-size: clamp(2.1rem, 4vw, 3.7rem); line-height: 1; letter-spacing: -.055em; }
.profit-block small { color: var(--muted-2); font-size: .72rem; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.metric-grid > div {
  display: grid;
  gap: 3px;
  padding: 11px 9px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(2, 13, 26, .32);
}

.metric-grid span,
.threshold-grid span { color: var(--muted-2); font-size: .7rem; }
.metric-grid strong { font-size: .88rem; }

.card-title-row { align-items: center; margin-bottom: 15px; }
.card-title-row h2 { font-size: 1rem; }
.card-title-row h3 { font-size: 1rem; }

.card-title-row button {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font-size: .74rem;
}

.card-title-row button:hover { color: var(--text); border-color: var(--line-strong); }

#grossMarginBadge {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(94,231,247,.08);
}

.threshold-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 8px;
}

.threshold-grid > div {
  display: grid;
  padding: 11px;
  border-radius: 12px;
  background: rgba(2, 13, 26, .32);
}

.threshold-main {
  grid-row: span 2;
  align-content: center;
  border: 1px solid rgba(94,231,247,.15);
}

.threshold-main strong { color: var(--cyan); font-size: 2rem; line-height: 1; }
.threshold-main small { color: var(--muted-2); font-size: .72rem; }
.threshold-grid > div:not(.threshold-main) strong { margin-top: 2px; }

.investment-total { margin-bottom: 13px; }
.investment-total strong { font-size: 1.9rem; letter-spacing: -.04em; }

.cost-stack {
  display: flex;
  width: 100%;
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}

.cost-stack span { min-width: 3px; transition: width .25s ease; }

.cost-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 12px;
}

.cost-legend div { display: grid; }
.cost-legend span { color: var(--muted-2); font-size: .68rem; }
.cost-legend strong { font-size: .78rem; }

.waterfall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  align-items: end;
  gap: 5px;
  height: 94px;
  padding: 8px 5px 0;
  border-bottom: 1px solid var(--line);
}

.waterfall div {
  position: relative;
  min-height: 3px;
  border-radius: 5px 5px 0 0;
  background: var(--cyan-2);
}

.waterfall div.negative { background: var(--raspberry); }
.waterfall div.profit { background: var(--lime); }
.waterfall div.loss { background: var(--danger); }

.waterfall div span {
  position: absolute;
  bottom: -25px;
  left: 50%;
  color: var(--muted-2);
  font-size: .58rem;
  transform: translateX(-50%);
  white-space: nowrap;
}

.monthly-list {
  display: grid;
  gap: 7px;
  margin-top: 33px;
}

.monthly-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .78rem;
}

.monthly-list strong { color: var(--text); font-weight: 650; }

.decision-card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.decision-card li {
  position: relative;
  padding-left: 18px;
  color: #c1d1dd;
  font-size: .84rem;
}

.decision-card li::before {
  position: absolute;
  top: .52em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  content: "";
}

.technical-note {
  margin: 15px 0 0;
  padding: 11px;
  border-left: 2px solid var(--amber);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  background: rgba(255,199,99,.055);
  font-size: .75rem;
}

.section-block {
  margin-top: clamp(48px, 7vw, 90px);
  scroll-margin-top: 86px;
}

.section-heading {
  align-items: flex-end;
  margin-bottom: 20px;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: clamp(1.65rem, 3vw, 2.7rem);
  letter-spacing: -.04em;
}

.section-heading > p {
  max-width: 510px;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.sensitivity-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.sensitivity-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(14,34,56,.95), rgba(8,24,41,.95));
}

.sensitivity-card::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--tone, var(--cyan));
  content: "";
}

.sensitivity-card span { color: var(--muted); font-size: .75rem; }
.sensitivity-card strong { display: block; margin: 3px 0; font-size: 1.3rem; }
.sensitivity-card small { color: var(--muted-2); font-size: .7rem; }

.chart-card { margin-top: 12px; padding: 20px; }

#cashflowChart {
  display: block;
  width: 100%;
  min-height: 220px;
  overflow: visible;
}

.chart-grid { stroke: rgba(157,178,198,.13); stroke-width: 1; }
.chart-zero { stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 6 6; }
.chart-line { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(94,231,247,.35)); }
.chart-fill { fill: url(#cashGradient); }
.chart-label { fill: var(--muted-2); font-size: 13px; }
.chart-point { fill: var(--cyan); stroke: #082036; stroke-width: 3; }

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

th, td {
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted-2);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

td { color: #bfd0dd; font-size: .86rem; }
td:first-child { color: var(--text); font-weight: 750; }
tr:last-child td { border-bottom: 0; }

.warning-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  margin-top: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(255,199,99,.25);
  border-radius: 15px;
  color: #d4c19f;
  background: rgba(255,199,99,.055);
  font-size: .87rem;
}

.warning-box strong { color: var(--amber); }

footer {
  display: flex;
  justify-content: space-between;
  width: min(1520px, calc(100% - clamp(24px, 5vw, 82px)));
  margin: 56px auto 0;
  padding: 22px 0 28px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: .78rem;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 100;
  max-width: min(360px, calc(100vw - 44px));
  padding: 12px 16px;
  border: 1px solid rgba(94,231,247,.25);
  border-radius: 12px;
  color: var(--text);
  background: rgba(9, 28, 47, .96);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); }
  .field-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .sensitivity-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topnav { display: none; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .results-column { position: static; grid-row: 1; }
  .inputs-column { grid-row: 2; }
  .result-card:not(.result-main) { display: block; }
  .intro-copy { width: 72%; }
  .intro-image { width: 82%; }
  .section-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .topbar { min-height: 58px; padding: 8px 14px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand span:last-child { display: none; }
  .ghost-button { padding: 8px 11px; }
  main, footer { width: min(100% - 24px, 1520px); }
  .intro { min-height: 280px; margin-top: 14px; }
  .intro-image { width: 100%; opacity: .68; object-position: 62% center; }
  .intro-shade { background: linear-gradient(90deg, rgba(7,23,43,.98), rgba(7,23,43,.72) 65%, rgba(7,23,43,.45)); }
  .intro-copy { width: 100%; min-height: 280px; padding: 22px; justify-content: flex-end; }
  h1 { max-width: 420px; font-size: 2.25rem; }
  .intro-copy > p:not(.eyebrow) { max-width: 420px; font-size: .88rem; }
  .scenario-switch button { padding: 8px 11px; font-size: .79rem; }
  .panel, .result-card, .chart-card { border-radius: 17px; }
  .panel { padding: 18px; }
  .field-grid.two, .field-grid.three { grid-template-columns: 1fr; }
  .panel-heading { align-items: center; }
  .hint { display: none; }
  .model-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-preview { grid-template-columns: 1fr 18px 1fr 18px 1fr; padding: 11px 5px; }
  .flow-preview strong { font-size: .94rem; }
  .flow-preview span { font-size: .62rem; }
  .profit-block strong { font-size: 2.6rem; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .sensitivity-grid { grid-template-columns: 1fr; }
  .sensitivity-card { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .sensitivity-card strong { text-align: right; }
  .cost-legend { grid-template-columns: 1fr; }
  .section-block { margin-top: 54px; }
  .warning-box { grid-template-columns: 1fr; }
  footer { gap: 12px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.intro-copy .demo-disclosure{max-width:690px;margin-top:17px;padding:11px 14px;border-left:3px solid #5ee7f7;background:#071426ba;border-radius:3px 9px 9px 3px;font-size:.77rem;line-height:1.55;color:#deecf3}.provenance-field{display:block;margin-top:17px}.provenance-field input{width:100%;padding:10px 12px;border:1px solid #51687a;border-radius:8px;background:#f8fcff;color:#071426}.storage-actions{display:flex;gap:10px;flex-wrap:wrap}.storage-actions button,.storage-actions label{border:1px solid #70d6e6;background:#071426;color:#eefcff;border-radius:10px;padding:11px 14px;font-size:12px;font-weight:800;cursor:pointer}.storage-actions button:hover,.storage-actions label:hover{background:#163451}.storage-actions label input{display:none}#storageStatus{font-size:12px;color:#a2c9d1;min-height:20px;margin-top:11px}.scenario-storage{padding-bottom:45px}
.source-note{font-size:12px;color:#9fbdc7;line-height:1.6}.source-note a{color:#5ee7f7}