.gabion-tool-page {
  --gabion-brand: #0b438e;
  --gabion-brand-dark: #06234b;
  --gabion-ink: #071b35;
  --gabion-muted: #53657f;
  --gabion-line: #cbd9ec;
  --gabion-soft: #f3f7fc;
  --gabion-paper: #ffffff;
  --gabion-accent: #e9b817;
  --gabion-green: #21b85a;
  background: #fff;
  color: var(--gabion-ink);
  font-family: Inter, Arial, "Microsoft YaHei", "微软雅黑", sans-serif;
}

.gabion-tool-page button,
.gabion-tool-page input,
.gabion-tool-page select,
.gabion-tool-page textarea {
  font-family: inherit;
}

.gabion-tool-hero {
  background: linear-gradient(135deg, var(--gabion-brand-dark) 0%, var(--gabion-brand) 64%, #125aa6 100%);
  color: #fff;
}

.gabion-tool-hero .container {
  padding: 24px 0 28px;
}

.gabion-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  font-weight: 700;
}

.gabion-breadcrumb a {
  color: #fff;
  text-decoration: none;
}

.gabion-hero-content {
  max-width: 820px;
}

.gabion-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--gabion-accent);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.gabion-hero-content h1 {
  margin: 0;
  max-width: 760px;
  color: #fff;
  font-size: clamp(34px, 4.3vw, 56px);
  line-height: 1.04;
  letter-spacing: 0;
}

.gabion-hero-content p {
  max-width: 800px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 600;
}

.gabion-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.gabion-btn,
.gabion-hero-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.gabion-btn--primary,
.gabion-hero-actions .btn-accent {
  border-color: var(--gabion-accent);
  background: var(--gabion-accent);
  color: #071b35;
}

.gabion-btn--secondary,
.gabion-hero-actions .btn-light {
  border-color: #b9cbe5;
  background: #fff;
  color: var(--gabion-brand);
}

.gabion-btn--green {
  border-color: var(--gabion-green);
  background: var(--gabion-green);
  color: #fff;
}

.gabion-btn:hover,
.gabion-btn:focus-visible,
.gabion-hero-actions .btn:hover,
.gabion-hero-actions .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 67, 142, .16);
}

.gabion-tool-page .section {
  padding-top: 24px;
  padding-bottom: 22px;
}

.gabion-tool-page .section + .section {
  padding-top: 8px;
}

.gabion-tool-core {
  padding-top: 24px;
  padding-bottom: 12px;
}

.gabion-tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  gap: 24px;
  align-items: stretch;
}

.gabion-card {
  border: 1px solid var(--gabion-line);
  border-radius: 8px;
  background: var(--gabion-paper);
  box-shadow: 0 12px 32px rgba(7, 27, 53, .08);
}

.gabion-form,
.gabion-results {
  box-sizing: border-box;
  height: 100%;
  padding: 24px;
}

.gabion-results {
  display: flex;
  flex-direction: column;
}

.gabion-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.gabion-card h2 {
  margin: 0;
  color: var(--gabion-brand);
  font-size: 26px;
  line-height: 1.18;
}

.gabion-card h3 {
  margin: 0 0 12px;
  color: var(--gabion-ink);
  font-size: 16px;
  line-height: 1.3;
}

.gabion-card p {
  margin: 9px 0 0;
  color: var(--gabion-muted);
  line-height: 1.55;
}

.gabion-reset-btn {
  appearance: none;
  min-height: 38px;
  border: 1px solid #b9cbe5;
  border-radius: 7px;
  background: #fff;
  color: var(--gabion-brand);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0 14px;
}

.gabion-reset-btn:hover,
.gabion-reset-btn:focus-visible {
  border-color: var(--gabion-brand);
  background: #eef6ff;
  outline: none;
}

.gabion-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid #d7e4f5;
  border-radius: 8px;
  background: #f5f9fe;
}

.gabion-presets span {
  color: var(--gabion-muted);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.gabion-presets button {
  flex: 0 1 auto;
  min-height: 38px;
  border: 1px solid #bfd3ed;
  border-radius: 7px;
  background: #fff;
  color: var(--gabion-brand);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0 14px;
  white-space: nowrap;
}

.gabion-presets button:hover,
.gabion-presets button.is-active {
  border-color: var(--gabion-brand);
  background: var(--gabion-brand);
  color: #fff;
}

.gabion-alert {
  padding: 12px 14px;
  border: 1px solid #e6b9b9;
  border-radius: 8px;
  background: #fff0f0;
  color: #8b2323;
  font-weight: 700;
  margin-bottom: 18px;
}

.gabion-form-section {
  padding-top: 16px;
  border-top: 1px solid #dbe6f4;
}

.gabion-form-section + .gabion-form-section,
.gabion-advanced {
  margin-top: 16px;
}

.gabion-section-note {
  margin: -3px 0 10px;
  color: var(--gabion-muted);
  font-size: 14px;
}

.gabion-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px 16px;
}

.gabion-field-grid label,
.gabion-density-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.gabion-field-grid label {
  grid-template-rows: minmax(20px, auto) 44px auto;
}

.gabion-field-grid label > span {
  display: flex;
  align-items: flex-end;
  min-height: 20px;
}

.gabion-field-grid span,
.gabion-density-field span {
  color: var(--gabion-ink);
  font-size: 14px;
  font-weight: 900;
}

.gabion-field-grid em,
.gabion-density-field em {
  color: var(--gabion-muted);
  font-style: normal;
  font-weight: 800;
}

.gabion-field-grid input,
.gabion-field-grid select,
.gabion-density-field input {
  width: 100%;
  height: 44px;
  min-height: 44px;
  border: 1px solid #b9cbe5;
  border-radius: 7px;
  background: #fff;
  color: var(--gabion-ink);
  font-size: 16px;
  line-height: 1.3;
  padding: 8px 12px;
}

.gabion-field-grid small,
.gabion-density-field small {
  display: block;
  color: var(--gabion-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.28;
}

.gabion-advanced {
  border: 1px solid #d7e4f5;
  border-radius: 8px;
  background: #f7fbff;
  overflow: hidden;
}

.gabion-advanced summary {
  cursor: pointer;
  padding: 12px 16px;
  color: var(--gabion-brand);
  font-size: 16px;
  font-weight: 900;
}

.gabion-advanced-body {
  display: grid;
  gap: 10px;
  padding: 0 16px 14px;
}

.gabion-advanced .gabion-field-grid label {
  grid-template-rows: minmax(20px, auto) 44px auto;
}

.gabion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.gabion-actions .gabion-btn {
  flex: 1 1 180px;
}

.gabion-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.gabion-result-item {
  min-height: 86px;
  padding: 14px;
  border: 1px solid #d4e2f3;
  border-radius: 8px;
  background: #f0f6fd;
}

.gabion-result-item span {
  display: block;
  color: var(--gabion-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
}

.gabion-result-item strong {
  display: block;
  margin-top: 8px;
  color: var(--gabion-brand);
  font-size: 24px;
  line-height: 1.12;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.gabion-warning {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid #f3d16c;
  border-radius: 8px;
  background: #fff8df;
  color: #594100;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.gabion-assumptions {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #d7e4f5;
  border-radius: 8px;
  background: #f7fbff;
}

.gabion-assumptions h3 {
  margin-bottom: 10px;
}

.gabion-assumptions dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 0;
}

.gabion-assumptions div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e2ecf8;
  padding-bottom: 7px;
}

.gabion-assumptions dt {
  color: var(--gabion-muted);
  font-size: 12px;
  font-weight: 800;
}

.gabion-assumptions dd {
  margin: 0;
  color: var(--gabion-ink);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.gabion-summary-card {
  margin-top: 18px;
}

.gabion-summary-card label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--gabion-ink);
  font-size: 14px;
  font-weight: 900;
}

.gabion-summary-card textarea {
  width: 100%;
  min-height: 315px;
  resize: vertical;
  border: 1px solid #c5d6ea;
  border-radius: 8px;
  background: #fff;
  color: var(--gabion-ink);
  font-size: 14px;
  line-height: 1.5;
  padding: 12px;
}

.gabion-result-actions {
  display: grid;
  grid-template-columns: minmax(140px, .65fr) minmax(220px, 1.15fr);
  gap: 10px;
  margin-top: 14px;
}

.gabion-result-actions .gabion-btn--green {
  grid-column: 1 / -1;
}

.gabion-copy-status {
  min-height: 22px;
  margin: 8px 0 0;
  color: var(--gabion-brand);
  font-size: 13px;
  font-weight: 800;
}

.gabion-tool-content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 0;
}

.gabion-tool-info-card,
.gabion-tool-related,
.gabion-tool-faq {
  border: 1px solid var(--gabion-line);
  border-radius: 8px;
  background: #fff;
  padding: 22px;
}

.gabion-tool-info-card h2,
.gabion-tool-related h2,
.gabion-tool-faq h2 {
  margin: 0 0 12px;
  color: var(--gabion-brand);
  font-size: 24px;
  line-height: 1.2;
}

.gabion-tool-info-card p,
.gabion-tool-faq p {
  margin: 0;
  color: var(--gabion-muted);
  line-height: 1.6;
}

.gabion-tool-info-card code {
  display: block;
  margin-top: 12px;
  padding: 12px;
  border-radius: 7px;
  background: #edf5ff;
  color: var(--gabion-brand);
  white-space: normal;
}

.gabion-tool-related {
  margin-top: 0;
}

.gabion-tool-related__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.gabion-tool-related__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d4e2f3;
  border-radius: 7px;
  background: #f7fbff;
  color: var(--gabion-brand);
  font-weight: 900;
  text-decoration: none;
}

.gabion-tool-related__links a::after {
  content: ">";
  color: var(--gabion-accent);
}

.gabion-related-card .gabion-tool-related__links {
  grid-template-columns: 1fr;
}

.gabion-tool-faq {
  margin-top: 0;
}

.gabion-tool-faq details {
  border-top: 1px solid #dbe6f4;
  padding: 14px 0;
}

.gabion-tool-faq details:first-of-type {
  border-top: 0;
}

.gabion-tool-faq summary {
  cursor: pointer;
  color: var(--gabion-ink);
  font-weight: 900;
}

@media (max-width: 1024px) {
  .gabion-tool-grid {
    grid-template-columns: 1fr;
  }

  .gabion-tool-content-grid {
    grid-template-columns: 1fr;
  }

  .gabion-tool-related__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .gabion-tool-hero .container {
    padding: 20px 16px 24px;
  }

  .gabion-hero-content h1 {
    font-size: 36px;
  }

  .gabion-tool-core {
    padding-top: 18px;
  }

  .gabion-tool-grid,
  .gabion-tool-content-grid {
    gap: 16px;
  }

  .gabion-form,
  .gabion-results,
  .gabion-tool-info-card,
  .gabion-tool-related,
  .gabion-tool-faq {
    padding: 18px;
  }

  .gabion-card-head {
    display: grid;
  }

  .gabion-presets {
    display: grid;
    grid-template-columns: 1fr;
  }

  .gabion-presets span {
    white-space: normal;
  }

  .gabion-field-grid,
  .gabion-result-grid,
  .gabion-assumptions dl,
  .gabion-result-actions,
  .gabion-tool-related__links {
    grid-template-columns: 1fr;
  }

  .gabion-result-actions .gabion-btn--green {
    grid-column: auto;
  }

  .gabion-summary-card textarea {
    min-height: 180px;
  }
}