:root {
  --ink: #263d35;
  --muted: #6e837b;
  --line: #dce8e2;
  --canvas: #f5f8f7;
  --surface: #ffffff;
  --soft: #f7faf8;
  --forest: #006343;
  --green: #087a4f;
  --green-pale: #edf8f1;
  --amber: #9a6700;
  --red: #b42318;
  --shadow: 0 10px 30px rgba(0, 99, 67, .08);
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.5;
}

.shell { max-width: 1280px; padding-bottom: 64px; }

.hero {
  margin-bottom: 38px;
  padding: 56px 40px 50px;
  text-align: left;
  color: #fff;
  background: linear-gradient(120deg, #004b35 0%, #006343 60%, #168154 100%);
}

.hero::before {
  content: "";
  inset: auto -8% -120px auto;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
  color: transparent;
  box-shadow: 0 0 0 54px rgba(255, 255, 255, .04), 0 0 0 108px rgba(255, 255, 255, .03);
}

.hero-mark {
  display: inline-grid;
  margin: 0 0 14px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 14px;
  transform: none;
  background: rgba(255, 255, 255, .1);
}

.hero-mark span { color: #fff; transform: none; }
.hero h1, .hero .eyebrow { color: #fff; }
.hero h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -.5px; }
.hero .eyebrow { color: #c9f0d7; }
.hero .subtle { max-width: 580px; color: #d7f0e0; font-size: 15px; }

button {
  min-height: 42px;
  border-radius: 7px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0); }
.primary { background: #087a4f; border-color: #087a4f; box-shadow: 0 4px 10px rgba(0, 99, 67, .18); }
.primary:hover { background: #006343; }
.secondary, .multi-receivables .secondary, .customer-row .secondary { border-color: #b9d9c3; color: #006343; background: #fff; }
.secondary:hover, .multi-receivables .secondary:hover, .customer-row .secondary:hover { background: #edf8f1; border-color: #087a4f; }

button:focus-visible, input:focus-visible, select:focus-visible, .tab:focus-visible {
  outline: 3px solid #7ed69c;
  outline-offset: 2px;
}

.notice {
  border: 1px solid #c7e4d1;
  border-left: 4px solid #087a4f;
  border-radius: 7px;
  background: #f0faf4;
  color: #356b55;
  padding: 13px 16px;
}

.intro { margin-bottom: 18px; }
.eyebrow { color: #006343; }
h2 { color: #263d35; }

.form-grid { gap: 24px; }
.panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.panel-title { padding-bottom: 15px; }
.fields { column-gap: 20px; row-gap: 18px; }
.input-section-title { color: #006343; border-color: #dcebe3; }
label { color: #40584f; }

input, select, .customer-row input, .customer-row select {
  height: 42px;
  border: 1px solid #c9ddd3;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

input::placeholder { color: #92a59b; }
input:focus, select:focus {
  border-color: #087a4f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(8, 122, 79, .15);
}
.input-row input { border-radius: 6px 0 0 6px; }
.input-row span, .input-row select { border-left: 0; border-radius: 0 6px 6px 0; background: #eff5f1; color: #587067; }
.field-error input { border-color: var(--red); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.field-error small { color: var(--red); }

.multi-receivables, .limit-suggestion {
  border: 1px solid #c7e4d1;
  border-left: 4px solid #087a4f;
  border-radius: 8px;
  background: #f2faf5;
}
.multi-receivables p, .limit-suggestion p { color: #587067; }
.limit-suggestion strong { color: #006343; }
.customer-row { border-color: #dce9e2; border-radius: 7px; background: #fff; }
.customer-row strong { color: #40584f; }

.bottom-action {
  margin: 32px 0 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 22px rgba(0, 99, 67, .06);
}

.scenario, .efficiency { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.scenario { background: var(--soft); }
.scenario-topline { background: linear-gradient(90deg, #006343, #087a4f, #5dca80); }
.tabs { background: #fff; padding-left: 22px; }
.tab { color: #6e837b; }
.tab.active { color: #006343; box-shadow: inset 0 -3px 0 #5dca80; }
.scenario-layout > div:first-child, .callout, .annual { border-radius: 8px; }
.scenario-layout > div:first-child { border-color: var(--line); background: #fff; }
.tag { border-radius: 999px; }
.economic { color: #12623b; background: #e9f8ef; border-color: #93d7ad; }
.slightly_economic { color: #7a5200; background: #fff6df; }
.not_economic { color: #9b1c1c; }
.callout { border-color: #c7e4d1; border-left-color: #087a4f; }
.callout h3, .metric strong { color: #006343; }
.risk { border-color: #ead5a1; border-left-color: #a16207; }
.detail-table td { border-color: #e6ebf2; }
.annual { border-top-color: #5dca80; }
.metric-grid { border-color: var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.metric { border-color: var(--line); }
.efficiency { padding: 28px 32px; background: #fff; }
footer { color: #6e837b; }

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

@media (max-width: 900px) {
  .panel { padding: 20px; }
}

@media (max-width: 640px), (pointer: coarse) and (max-width: 900px) {
  .hero { padding: 36px 20px 34px; }
  .hero::before { width: 270px; height: 270px; right: -100px; bottom: -110px; }
  .panel { padding: 18px 16px; }
  .bottom-action { border-radius: 0; border-left: 0; border-right: 0; }
  .bottom-action .primary { min-height: 48px; }
}