:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-soft: #eef3f6;
  --ink: #15202b;
  --muted: #66727f;
  --line: #dbe2e8;
  --teal: #157f78;
  --blue: #2d6cdf;
  --green: #2f8f5b;
  --amber: #b7791f;
  --red: #c2413b;
  --shadow: 0 14px 34px rgba(23, 36, 48, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

button {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.product-only-shell { display: block; width: 100%; min-width: 0; }
.product-only-main { width: 100%; max-width: none; min-width: 0; margin: 0; padding: 18px 0 24px; }
.product-only-topbar { margin-bottom: 18px; }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px;
  background: #172430;
  color: #f7fafc;
}

.brand {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: #1f766e;
  font-weight: 800;
}

.brand h1,
.topbar h2,
.panel h3,
.hero-band h3 {
  margin: 0;
  letter-spacing: 0;
}

.brand h1 {
  font-size: 20px;
  line-height: 1.25;
}

.brand p,
.eyebrow,
.panel-label,
.score-card span,
.score-card small {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.brand p {
  color: #b6c3cf;
  margin-top: 4px;
}

.module-nav {
  display: grid;
  gap: 8px;
}

.nav-item,
.role,
.icon-button {
  cursor: pointer;
  border: 0;
}

.nav-item {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  background: transparent;
  color: #cad5df;
  text-align: left;
}

.nav-item:hover,
.nav-item.active {
  background: #f7fafc;
  color: #172430;
}

.sidebar-panel {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-panel .panel-label {
  color: #92e0d8;
}

.sidebar-panel ol {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #d9e4ec;
  line-height: 1.75;
  font-size: 13px;
}

.main {
  padding: 24px;
  min-width: 0;
  overflow: visible;
}

.topbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.topbar h2 {
  margin-top: 6px;
  font-size: 28px;
}

.role-switch {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.role {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.role.active {
  background: #172430;
  color: #fff;
}

.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 24px;
  align-items: center;
  min-height: 170px;
  margin-top: 22px;
  padding: 26px;
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(21, 127, 120, 0.12), rgba(45, 108, 223, 0.12)),
    repeating-linear-gradient(135deg, rgba(21, 32, 43, 0.04) 0 1px, transparent 1px 12px),
    #fff;
  box-shadow: var(--shadow);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: #e5f4f1;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
}

.hero-band h3 {
  max-width: 900px;
  margin-top: 14px;
  font-size: 30px;
  line-height: 1.25;
}

.hero-band p {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.score-card {
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.score-card strong {
  font-size: 34px;
}

.score-card small {
  color: var(--green);
}

.hidden {
  display: none !important;
}

.data-source-line {
  margin-top: 8px;
  color: var(--teal) !important;
  font-size: 13px;
  font-weight: 700;
}

.v3-sections {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(23, 36, 48, 0.04);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel h3 {
  margin-top: 5px;
  font-size: 18px;
}

.section-block {
  scroll-margin-top: 18px;
}

.section-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.section-index {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 8px;
  background: #172430;
  color: #fff;
  font-weight: 800;
}

.panel-label {
  color: var(--teal);
  font-weight: 700;
}

.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 20px;
}

.summary-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.summary-list li {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-soft);
  line-height: 1.55;
  font-size: 14px;
}

.summary-list li strong {
  color: var(--teal);
  font-size: 20px;
}

.bridge-chart {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.bridge-row {
  display: grid;
  grid-template-columns: 130px 1fr 82px;
  gap: 10px;
  align-items: center;
  min-height: 28px;
  font-size: 13px;
}

.bridge-row.total {
  font-weight: 800;
}

.bar-track {
  height: 12px;
  border-radius: 99px;
  background: #edf1f5;
  overflow: hidden;
}

.bar {
  height: 100%;
  border-radius: 99px;
  background: var(--green);
}

.bar.negative {
  background: var(--red);
}

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

.data-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-weight: 700;
}

.analysis-note {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px;
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: var(--surface-soft);
}

.analysis-note p {
  margin: 0;
  color: var(--ink);
  line-height: 1.65;
  font-size: 14px;
}

.analysis-grid,
.two-column,
.bp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.analysis-card {
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.analysis-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.two-column h4,
.bp-block h4 {
  margin: 0 0 10px;
  font-size: 15px;
}

.risk-list,
.opportunity-list,
.forecast {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.risk-item,
.opportunity-item,
.forecast-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.risk-item strong,
.opportunity-item strong,
.forecast-item strong {
  font-size: 14px;
}

.risk-item p,
.opportunity-item p,
.forecast-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.forecast-scenario {
  align-content: start;
}

.forecast-month {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.forecast-month b {
  font-size: 13px;
}

.forecast {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bp-conclusion {
  display: grid;
  gap: 14px;
}

.rating-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  background: #e5f4f1;
}

.rating-card span {
  color: var(--teal);
  font-weight: 700;
}

.rating-card strong {
  font-size: 26px;
}

.bp-block {
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.bp-block ol {
  margin: 0;
  padding-left: 22px;
  line-height: 1.8;
}

.bp-grid div {
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.bp-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.data-center-view {
  display: grid;
  gap: 16px;
}

.data-hero {
  margin-bottom: 0;
}

.data-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.data-overview-grid,
.quality-metrics,
.version-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.import-card {
  display: grid;
  gap: 14px;
}

.import-card.locked {
  opacity: 0.68;
}

.import-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.field-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field-list span {
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 12px;
}

.file-action {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  background: #172430;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.file-action input {
  display: none;
}

.template-footer,
.overview-card,
.quality-card,
.version-card {
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.template-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.template-footer div {
  display: grid;
  gap: 4px;
}

.template-footer span,
.overview-card span,
.overview-card small,
.quality-card span,
.quality-card small,
.version-card p {
  color: var(--muted);
  font-size: 13px;
}

.overview-card,
.quality-card {
  display: grid;
  gap: 8px;
}

.overview-card strong,
.quality-card strong {
  font-size: 26px;
}

.version-card p {
  margin: 8px 0 0;
  line-height: 1.6;
}

.quality-report-placeholder {
  padding: 16px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.quality-report-placeholder p {
  margin: 0;
  color: var(--muted);
}

.quality-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.quality-report-grid div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface);
}

.quality-report-grid span {
  color: var(--muted);
  font-size: 13px;
}

.quality-card.danger strong {
  color: var(--red);
}

.quality-card.warn strong {
  color: var(--amber);
}

.quality-card.remind strong {
  color: var(--blue);
}

.uploader-line {
  display: flex;
  width: fit-content;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.uploader-line input {
  width: 150px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.metric-good {
  color: var(--green);
}

.metric-risk {
  color: var(--red);
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .module-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar-panel {
    display: none;
  }

  .summary-list,
  .analysis-grid,
  .two-column,
  .bp-grid,
  .data-import-grid,
  .data-overview-grid,
  .quality-metrics,
  .version-actions,
  .quality-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .main,
  .sidebar {
    padding: 16px;
  }

  .topbar,
  .hero-band {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: stretch;
  }

  .role-switch {
    overflow-x: auto;
  }

  .hero-band h3 {
    font-size: 24px;
  }

  .summary-list,
  .analysis-grid,
  .two-column,
  .bp-grid,
  .forecast,
  .data-import-grid,
  .data-overview-grid,
  .quality-metrics,
  .version-actions,
  .quality-report-grid,
  .module-nav {
    grid-template-columns: 1fr;
  }
}

.report-import-center {
  display: grid;
  gap: 14px;
}

.report-import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  gap: 14px;
}

.report-upload-box,
.report-meta-grid > div,
.report-import-stats {
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.report-upload-box p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.report-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.file-action.secondary {
  background: var(--teal);
}

.report-import-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

.report-meta-grid span {
  color: var(--muted);
  font-size: 13px;
}

.report-meta-grid strong {
  margin-top: 5px;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 700;
}

.report-meta-grid > div {
  display: grid;
  gap: 4px;
}

.report-meta-grid .report-errors {
  grid-column: 1 / -1;
}

.report-errors ul {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.7;
  color: var(--ink);
  font-size: 13px;
}

.trend-section {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.trend-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.trend-toolbar label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.trend-toolbar select {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

.inline-action {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: #172430;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.data-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.tree-table-wrap {
  max-height: 560px;
}

.tree-table .tree-subject-head,
.tree-table .tree-subject-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 260px;
  background: var(--surface);
}

.tree-subject-cell {
  padding-left: calc(12px + var(--tree-depth, 0) * 18px);
  white-space: nowrap;
}

.tree-toggle,
.tree-toggle-spacer {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 4px;
}

.tree-toggle {
  border: 0;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
}

.muted-cell {
  color: var(--muted);
}

@media (max-width: 980px) {
  .report-import-layout,
  .report-meta-grid,
  .report-import-stats {
    grid-template-columns: 1fr;
  }
}

.product-analysis-view { display: grid; width: 100%; min-width: 0; gap: 18px; }
.product-heading { display: flex; flex-wrap: wrap; width: 100%; min-width: 0; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 28px; border-radius: 12px; color: #fff; background: linear-gradient(120deg, #172430, #315b66); }
.product-heading > div:first-child { flex: 1 1 620px; min-width: 0; }
.product-heading h3 { margin: 10px 0 6px; font-size: 26px; }
.product-heading p { margin: 0; max-width: 760px; color: #d9e6e8; }
.product-upload, .text-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 7px; background: rgba(255,255,255,.12); color: inherit; cursor: pointer; font-weight: 700; white-space: nowrap; }
.product-upload input { display: none; }
.product-heading-actions { display: flex; flex: 1 1 480px; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.product-upload.secondary { background: rgba(255,255,255,.05); }
.product-upload.danger { border-color: rgba(255, 220, 220, .65); background: rgba(194, 65, 59, .26); }
.startup-error { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid #f0b8bd; border-radius: 8px; color: #852f33; background: #fae8e8; }
.startup-error strong { font-size: 15px; }
.startup-error span { line-height: 1.6; }
.import-toast-host { position: fixed; top: 18px; right: 18px; z-index: 1000; display: grid; gap: 10px; width: min(380px, calc(100vw - 36px)); }
.import-toast { position: relative; display: grid; gap: 7px; padding: 13px 38px 13px 14px; border: 1px solid #b7d8ca; border-radius: 10px; color: #205a49; background: #e5f3ed; box-shadow: 0 14px 35px rgba(20, 44, 50, .2); }
.import-toast.loading { color: #315b66; border-color: #bed4d8; background: #e8f1f2; }
.import-toast.warning { color: #805c18; border-color: #f2d287; background: #fff3d5; }
.import-toast.error { color: #852f33; border-color: #efb8bd; background: #fae8e8; }
.import-toast strong { font-size: 14px; }
.import-toast ul { margin: 0; padding-left: 18px; line-height: 1.55; font-size: 12px; }
.import-toast button { position: absolute; top: 8px; right: 9px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,.7); color: inherit; cursor: pointer; font-size: 16px; line-height: 1; }
.product-toolbar, .product-section { padding: 20px; }
.toolbar-title, .product-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.toolbar-title .text-action, .product-section .text-action { min-height: 32px; border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
.product-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
.product-filter-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.product-filter-grid input, .product-filter-grid select { min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); }
.product-filter-grid .view-switch { padding: 8px; border-radius: 8px; background: #eaf2f1; color: #244c52; font-weight: 700; }
.validation-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 8px; }
.validation-banner.neutral { color: #5e6870; background: #f0f2f3; }
.validation-banner.success { color: #205a49; background: #e5f3ed; }
.validation-banner.danger { color: #852f33; background: #fae8e8; }
.validation-banner details { flex-basis: 100%; }
.validation-banner p { margin: 6px 0 0; line-height: 1.6; }
.product-section-head span { color: #46717a; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.product-section-head h3 { margin: 4px 0 0; }
.product-section-head small { max-width: 500px; color: var(--muted); text-align: right; }
.product-section h4 { margin: 20px 0 10px; }
.product-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.product-kpi-grid > div { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.product-kpi-grid span { color: var(--muted); font-size: 12px; }
.product-kpi-grid strong { font-size: 22px; }
.product-name-cell { color: #244f57; font-weight: 700; }
.empty-state { margin-top: 12px; padding: 14px; border-radius: 8px; color: var(--muted); background: var(--surface-soft); }
.perspective-tabs { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.perspective-tabs button { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 7px; background: var(--surface-soft); color: var(--muted); cursor: pointer; text-align: left; font-weight: 700; }
.perspective-tabs button b { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #dce6e7; color: #315b66; font-size: 11px; }
.perspective-tabs button.active { background: #315b66; color: #fff; box-shadow: 0 5px 14px rgba(29, 69, 78, .18); }
.perspective-tabs button.active b { background: rgba(255,255,255,.2); color: #fff; }
.product-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.product-workspace-main { min-width: 0; }
.product-top-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.product-top-nav button { display: flex; gap: 9px; align-items: center; min-width: 180px; padding: 10px 13px; border: 0; border-radius: 8px; background: var(--surface-soft); color: var(--muted); cursor: pointer; text-align: left; font-weight: 800; }
.product-top-nav button b { display: inline-grid; place-items: center; flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; background: #dce6e7; color: #315b66; font-size: 11px; }
.product-top-nav button span { display: grid; gap: 3px; }
.product-top-nav button small { color: var(--muted); font-size: 11px; font-weight: 500; }
.product-top-nav button.active { background: #315b66; color: #fff; }
.product-top-nav button.active b { background: rgba(255,255,255,.2); color: #fff; }
.product-top-nav button.active small { color: rgba(255,255,255,.75); }
.perspective-panel { padding: 20px; }
.perspective-panel, .validation-detail-panel, .perspective-tabs { width: 100%; min-width: 0; }
.perspective-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 15px; }
.perspective-head span { color: #46717a; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.perspective-head h3 { margin: 4px 0; font-size: 21px; }
.perspective-head p { margin: 0; color: var(--muted); }
.perspective-panel .text-action { min-height: 36px; border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
.perspective-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.column-settings-panel { margin: 0 0 15px; padding: 14px; border: 1px solid #cfdedf; border-radius: 9px; background: #f7fafa; }
.column-settings-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.column-settings-head > div:first-child { display: grid; gap: 3px; }
.column-settings-head span { color: var(--muted); font-size: 12px; }
.column-settings-head > div:last-child { display: flex; gap: 7px; }
.column-settings-head button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; }
.column-settings-groups { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 10px; }
.column-settings-groups fieldset { min-width: 0; margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.column-settings-groups legend { padding: 0 5px; color: #315b66; font-size: 12px; font-weight: 800; }
.column-settings-groups label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 5px; align-items: center; padding: 4px 0; font-size: 12px; cursor: pointer; }
.column-settings-groups label small { color: var(--muted); }
.column-settings-groups input { margin: 0; }
.column-settings-groups legend small { display: block; max-width: 220px; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.35; }
.filter-shell { position: relative; z-index: 10; margin-bottom: 15px; padding: 12px; border: 1px solid #d4e0e1; border-radius: 9px; background: var(--surface-soft); }
.filter-shell-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.filter-shell-head strong { color: #315b66; font-size: 14px; }
.filter-shell-head button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #315b66; cursor: pointer; }
.filter-primary-row { display: grid; grid-template-columns: minmax(310px, 2fr) minmax(160px, 1fr) repeat(3, max-content); gap: 9px; align-items: end; }
.filter-primary-row > label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.filter-date-range { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.filter-date-range > div { display: grid; grid-template-columns: minmax(125px, 1fr) auto minmax(125px, 1fr); align-items: center; gap: 6px; }
.filter-date-range i { color: var(--muted); font-style: normal; text-align: center; }
.filter-primary-row input, .filter-primary-row select { min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.filter-action { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.filter-action.primary { border-color: #315b66; background: #315b66; color: #fff; }
.filter-action.secondary { background: #fff; color: #315b66; }
.filter-secondary-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.multi-dropdown { position: relative; flex: 1 1 155px; min-width: 145px; max-width: 235px; }
.multi-dropdown.product-search-dropdown { flex: 2 1 320px; max-width: 430px; }
.multi-dropdown-trigger { display: flex; align-items: center; width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.multi-dropdown-trigger span { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.multi-dropdown-trigger strong { min-width: 0; margin-left: 3px; overflow: hidden; color: #244f57; text-overflow: ellipsis; white-space: nowrap; }
.multi-dropdown-trigger b { margin-left: auto; padding-left: 7px; color: #52737a; font-size: 10px; }
.multi-dropdown-panel { position: absolute; top: calc(100% + 5px); left: 0; z-index: 40; width: max(100%, 285px); padding: 11px; border: 1px solid #bfd0d2; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px rgba(28, 58, 64, .18); }
.product-search-dropdown .multi-dropdown-panel { width: min(430px, calc(100vw - 48px)); }
.multi-dropdown-search-label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.multi-dropdown-search { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.multi-dropdown-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 9px 0 5px; padding-bottom: 7px; border-bottom: 1px solid #e6eded; color: var(--muted); font-size: 12px; }
.multi-dropdown-meta label { display: flex; align-items: center; gap: 6px; color: #315b66; font-weight: 700; cursor: pointer; }
.multi-dropdown-options { max-height: 250px; overflow: auto; }
.multi-dropdown-options > label { display: flex; align-items: flex-start; gap: 7px; padding: 6px 4px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.multi-dropdown-options > label:hover { background: #eef5f5; }
.multi-dropdown-options input { flex: 0 0 auto; margin-top: 2px; }
.multi-dropdown-options span { min-width: 0; line-height: 1.35; }
.multi-dropdown-options small { display: block; color: var(--muted); font-size: 10px; }
.multi-dropdown-footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e6eded; }
.multi-dropdown-footer button { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #315b66; cursor: pointer; }
.multi-dropdown-footer button.confirm { border-color: #315b66; background: #315b66; color: #fff; }
.filter-collapsed-summary { display: none; color: #52676b; font-size: 12px; line-height: 1.65; }
.filter-collapsed-summary strong { margin-right: 5px; color: #315b66; }
.filter-shell.collapsed .filter-expanded { display: none; }
.filter-shell.collapsed .filter-collapsed-summary { display: block; }
.filter-shell.collapsed .filter-shell-head { margin-bottom: 6px; }
.compact-perspective-toolbar { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-bottom: 15px; padding: 12px; border-radius: 8px; background: var(--surface-soft); }
.compact-perspective-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.compact-perspective-toolbar input, .compact-perspective-toolbar select { min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.wide-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.operating-table { width: max-content; min-width: 100%; border: 0; font-size: 14px; }
.operating-table th, .operating-table td { padding: 7px 5px; line-height: 1.35; }
.operating-table th { position: sticky; top: 0; z-index: 2; white-space: nowrap; background: #edf2f2; }
.operating-table .group-header-row th { top: 0; height: 54px; color: #fff; border-right-color: rgba(255,255,255,.22); background: #315b66; text-align: center; font-size: 13px; letter-spacing: .04em; }
.operating-table .group-header-row th small { display: block; max-width: 360px; margin: 3px auto 0; color: rgba(255,255,255,.82); font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: 0; white-space: normal; }
.operating-table .group-header-row th:nth-child(2) { background: #3e6f75; }
.operating-table .group-header-row th:nth-child(3) { background: #56756c; }
.operating-table .group-header-row th:nth-child(4) { background: #746b55; }
.operating-table .field-header-row th { top: 54px; min-width: 68px; max-width: 118px; background: #edf2f2; white-space: normal; }
.operating-table th:first-child, .operating-table td:first-child { position: sticky; left: 0; z-index: 1; min-width: 105px; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.operating-table th:first-child { z-index: 3; background: #e5eeee; }
.operating-table .group-header-row th:first-child { z-index: 4; background: #315b66; }
.operating-table .field-header-row th:first-child { z-index: 4; background: #e5eeee; }
.operating-table td { white-space: nowrap; }
.operating-table td.metric-breach { color: #a11f2b; background: #ffe5e7; font-weight: 800; }
.operating-table td.budget-caution-cell { color: #805c18; background: #fff3d5; font-weight: 800; }
.operating-table td.budget-warning-cell, .budget-card-grid .budget-warning-cell { color: #852f33; background: #fae8e8; font-weight: 800; }
.operating-table td.budget-status-normal, .budget-card-grid .budget-status-normal { color: #205a49; background: #e5f3ed; font-weight: 800; }
.operating-table td.budget-status-startup, .budget-card-grid .budget-status-startup { color: #5e6870; background: #f0f2f3; font-weight: 800; }
.operating-table td.budget-status-slow, .budget-card-grid .budget-status-slow { color: #805c18; background: #fff3d5; font-weight: 800; }
.operating-table td.budget-status-severe-slow, .budget-card-grid .budget-status-severe-slow { color: #a11f2b; background: #ffe5e7; font-weight: 800; }
.operating-table td.budget-status-fast, .budget-card-grid .budget-status-fast { color: #205a8a; background: #e3f0fb; font-weight: 800; }
.operating-table td.budget-status-overrun-risk, .budget-card-grid .budget-status-overrun-risk { color: #9a4d12; background: #ffecd8; font-weight: 800; }
.operating-table tr.total-row td { color: #173f47; background: #e2eeee; font-weight: 800; border-bottom: 2px solid #86a7aa; }
.operating-table tr.total-row td:first-child { background: #d5e6e6; }
.table-rule-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.current-scope-panel { margin: 0 0 15px; padding: 14px; border: 1px solid #cfdedf; border-radius: 9px; background: #f5f9f9; }
.scope-summary { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.scope-summary > div { display: grid; gap: 4px; padding: 10px 12px; border-radius: 7px; background: #fff; }
.scope-summary span { color: #46717a; font-size: 12px; font-weight: 800; }
.scope-summary strong { font-size: 14px; }
.scope-summary small { color: var(--muted); }
.scope-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.scope-detail-grid div { display: grid; gap: 4px; padding: 9px 10px; border-radius: 7px; background: #fff; }
.scope-detail-grid span { color: #46717a; font-size: 12px; font-weight: 800; }
.scope-detail-grid strong { font-size: 13px; }
.standards-config { margin-top: 10px; }
.standards-config summary { color: #315b66; cursor: pointer; font-weight: 700; }
.standards-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.5fr); gap: 12px; margin-top: 10px; }
.standards-grid > div { min-width: 0; padding: 10px; border-radius: 7px; background: #fff; }
.standards-grid h4 { margin: 0 0 8px; }
.standards-grid p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.scope-table-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.scope-table-wrap .data-table { font-size: 12px; }
.product-name-multiselect { grid-row: span 2; }
.product-name-multiselect select { min-height: 94px; }
.product-master-overview { margin: 0; }
.validation-detail-panel { padding: 18px; }
.validation-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.validation-detail-head span { color: #46717a; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.validation-detail-head h3 { margin: 4px 0 0; }
.validation-detail-head small { color: var(--muted); }
.validation-table-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.validation-level { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.validation-level.通过 { color: #205a49; background: #e5f3ed; }
.validation-level.预警 { color: #805c18; background: #fff3d5; }
.validation-level.阻断 { color: #852f33; background: #fae8e8; }
.validation-details-collapsible { width: 100%; }
.validation-details-collapsible > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 5px 0 12px; color: #315b66; cursor: pointer; }
.validation-details-collapsible > summary span { font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.validation-details-collapsible > summary strong { color: var(--ink); font-size: 16px; }
.validation-details-collapsible > summary small { margin-left: auto; color: var(--muted); }
.inventory-match-report { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.match-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 9px; margin-bottom: 12px; }
.match-stat-grid > div { display: grid; gap: 4px; padding: 11px; border-radius: 7px; background: var(--surface-soft); }
.match-stat-grid span { color: var(--muted); font-size: 12px; }
.match-stat-grid strong { font-size: 20px; }
.match-note { margin: 8px 0; color: var(--muted); font-size: 13px; }
.inventory-read-error { display: grid; gap: 4px; margin: 0 0 12px; padding: 11px 13px; border-radius: 7px; color: #852f33; background: #fae8e8; }
.inventory-read-error span { line-height: 1.6; }
.inventory-read-error.neutral { color: #315b66; background: #e8f1f2; }
.duplicate-code-block { margin: 12px 0; padding: 12px; border-radius: 8px; background: #fff1f1; }
.duplicate-code-block h4 { margin: 0 0 9px; color: #852f33; }
.unmatched-code-list { margin-top: 12px; }
.unmatched-code-list summary { color: #315b66; cursor: pointer; font-weight: 700; }
.unmatched-code-list .validation-table-wrap { margin-top: 8px; }
.custom-filter-grid { grid-template-columns: repeat(5, minmax(140px, 1fr)); margin-bottom: 15px; padding: 14px; border-radius: 8px; background: var(--surface-soft); }
.custom-filter-grid .filter-export { align-self: end; }
.report-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; padding: 12px; border-radius: 8px; background: var(--surface-soft); }
.report-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.report-controls input, .report-controls select { min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.formula-note { margin-top: 10px; color: #315b66; }
.formula-note p { margin: 8px 0 0; color: var(--muted); line-height: 1.75; }
.report-directory { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid #d4e0e1; border-radius: 9px; background: #fff; }
.report-directory strong { margin-right: 4px; color: #315b66; }
.report-directory button, .report-section-head button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: #315b66; cursor: pointer; font-weight: 700; }
.report-section { margin: 0 0 18px; }
.report-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.report-section-head h3 { margin: 0; font-size: 17px; }
.report-section-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 9px; }
.report-overview-grid div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.report-overview-grid span { color: var(--muted); font-size: 12px; }
.report-overview-grid strong { font-size: 18px; }
.back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 30; min-height: 36px; padding: 0 13px; border: 1px solid #315b66; border-radius: 999px; background: #315b66; color: #fff; cursor: pointer; box-shadow: 0 8px 22px rgba(23, 48, 54, .18); }
.cost-diagnostic-panel { margin: 0 0 10px; padding: 12px; border: 1px solid #ead39b; border-radius: 8px; background: #fff9e9; }
.cost-diagnostic-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #805c18; }
.cost-diagnostic-head span { padding: 3px 8px; border-radius: 999px; background: #ffe0a6; font-size: 12px; font-weight: 800; }
.cost-diagnostic-panel th { width: 230px; color: #805c18; text-align: left; background: #fff3d5; }
.new-budget-section .report-section-head span { color: var(--muted); font-size: 12px; }
.budget-card-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.budget-card-grid > div { display: grid; gap: 6px; min-height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.budget-card-grid span { color: #46717a; font-size: 12px; font-weight: 800; }
.budget-card-grid strong { color: #102d35; font-size: 20px; }
.new-budget-target-board { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.target-board-group { display: grid; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.target-board-group h4 { margin: 0; color: #244f57; font-size: 14px; }
.target-board-group div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 7px; border-top: 1px solid #dfe9ea; }
.target-board-group span { color: var(--muted); font-size: 12px; }
.target-board-group strong { color: #102d35; font-size: 16px; white-space: nowrap; }
.empty-budget-note { margin: 10px 0 0; padding: 12px; border: 1px dashed #cbdadb; border-radius: 8px; background: #f7fbfb; color: var(--muted); }
.budget-table th { min-width: 92px; }
@media (max-width: 1100px) { .product-filter-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } .product-kpi-grid { grid-template-columns: repeat(3, 1fr); } .new-budget-target-board { grid-template-columns: 1fr; } .product-workspace { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .perspective-tabs { grid-template-columns: repeat(2, 1fr); } .compact-perspective-toolbar, .custom-filter-grid { grid-template-columns: repeat(2, 1fr); } .match-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) { .column-settings-groups { grid-template-columns: repeat(2, minmax(160px, 1fr)); } }
@media (max-width: 1100px) { .filter-primary-row { grid-template-columns: repeat(3, minmax(130px, 1fr)); } .filter-date-range { grid-column: span 2; } .filter-action { width: 100%; } }
@media (max-width: 1280px) { .product-heading-actions { justify-content: flex-start; } }
@media (max-width: 700px) { .product-heading, .perspective-head { align-items: flex-start; flex-direction: column; } .product-filter-grid, .product-kpi-grid, .perspective-tabs, .compact-perspective-toolbar, .custom-filter-grid, .scope-summary, .scope-detail-grid, .standards-grid, .match-stat-grid, .column-settings-groups { grid-template-columns: 1fr; } .filter-primary-row { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .filter-date-range { grid-column: 1 / -1; } .multi-dropdown, .multi-dropdown.product-search-dropdown { flex-basis: 100%; max-width: none; } }
.system-top-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.system-top-nav button,
.procurement-filter button,
.procurement-approval-actions button,
.procurement-row-actions button,
.report-controls button {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
}

.system-top-nav button.active,
.procurement-filter button.active,
.procurement-approval-actions button:not(.secondary):not(.danger) {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

.procurement-system-view {
  display: grid;
  gap: 16px;
}

.procurement-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  background: linear-gradient(135deg, #102330, #255d64);
  color: #fff;
  border-radius: 12px;
  padding: 24px 28px;
}

.procurement-heading h3 {
  margin: 12px 0 8px;
  font-size: 26px;
}

.procurement-heading p {
  margin: 0;
  color: #d7f7f4;
}

.procurement-api-note {
  display: grid;
  gap: 6px;
  border: 1px solid #b6e2dc;
  background: #eefcf9;
  color: #0f3f3a;
  border-radius: 12px;
  padding: 14px 16px;
}

.procurement-api-note small {
  color: #47635f;
}

.procurement-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.procurement-section-title span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.procurement-section-title h3 {
  margin: 4px 0 0;
}

.procurement-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.procurement-kpis,
.procurement-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.procurement-kpis > div,
.procurement-detail-grid > div {
  background: #f8fafc;
  border: 1px solid #dbe6ee;
  border-radius: 10px;
  padding: 12px;
}

.procurement-kpis span,
.procurement-detail-grid span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 6px;
}

.procurement-kpis strong,
.procurement-detail-grid strong {
  font-size: 22px;
}

.risk-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.risk-summary span,
.procurement-risk-box span,
.procurement-redline-box span {
  display: inline-flex;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
}

.procurement-table th,
.procurement-table td {
  white-space: nowrap;
}

.procurement-qty-input {
  width: 78px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 8px;
}

.procurement-row-actions {
  display: flex;
  gap: 6px;
}

.selected-row {
  outline: 2px solid #14b8a6;
  outline-offset: -2px;
  background: #f0fdfa;
}

.risk-pill,
.rating-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 9px;
  font-weight: 800;
  font-size: 12px;
}

.risk-低,
.rating-A {
  background: #dcfce7;
  color: #166534;
}

.risk-中,
.rating-B {
  background: #fef9c3;
  color: #854d0e;
}

.risk-高,
.rating-C {
  background: #ffedd5;
  color: #9a3412;
}

.risk-红线,
.rating-D {
  background: #fee2e2;
  color: #991b1b;
}

.procurement-risk-box,
.procurement-redline-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.procurement-redline-box.danger {
  border-color: #fecaca;
  background: #fff1f2;
}

.procurement-approval-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.procurement-approval-actions .danger,
.procurement-row-actions button[data-procurement-delete] {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.procurement-approval-actions .secondary {
  background: #fff;
  color: #475569;
}

@media (max-width: 900px) {
  .procurement-heading,
  .procurement-section-title {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============ AI 对话框样式 ============ */
.chat-toggle { 
  position: fixed; 
  bottom: 24px; 
  right: 24px; 
  width: 56px; 
  height: 56px; 
  border-radius: 50%; 
  background: linear-gradient(135deg, #667eea, #764ba2); 
  color: white; 
  border: none; 
  font-size: 26px; 
  cursor: pointer; 
  box-shadow: 0 4px 16px rgba(102,126,234,0.4); 
  z-index: 999; 
  transition: transform 0.2s; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.chat-toggle:hover { transform: scale(1.1); }

.chat-panel { 
  position: fixed; 
  bottom: 90px; 
  right: 24px; 
  width: 400px; 
  max-height: 560px; 
  background: white; 
  border-radius: 16px; 
  box-shadow: 0 8px 32px rgba(0,0,0,0.18); 
  z-index: 998; 
  display: none; 
  flex-direction: column; 
  overflow: hidden; 
}
.chat-panel.active { display: flex; }

.chat-header { 
  background: linear-gradient(135deg, #667eea, #764ba2); 
  color: white; 
  padding: 14px 18px; 
  font-size: 14px; 
  font-weight: 600; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}
.chat-header .close-btn { 
  background: none; 
  border: none; 
  color: white; 
  font-size: 18px; 
  cursor: pointer; 
  opacity: 0.8; 
}
.chat-header .close-btn:hover { opacity: 1; }

.chat-messages { 
  flex: 1; 
  overflow-y: auto; 
  padding: 16px; 
  max-height: 380px; 
  background: #f8f9ff; 
}
.chat-msg { margin-bottom: 12px; display: flex; gap: 8px; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-msg .bubble { 
  max-width: 85%; 
  padding: 10px 14px; 
  border-radius: 12px; 
  font-size: 13px; 
  line-height: 1.7; 
  word-break: break-word; 
}
.chat-msg.ai .bubble { 
  background: white; 
  color: #333; 
  border: 1px solid #e8eaed; 
  border-top-left-radius: 4px; 
}
.chat-msg.user .bubble { 
  background: #667eea; 
  color: white; 
  border-top-right-radius: 4px; 
}
.chat-msg .bubble b { font-weight: 600; }
.chat-msg .bubble .highlight { color: #e74c3c; font-weight: 600; }
.chat-msg .bubble .safe { color: #27ae60; font-weight: 600; }

.chat-input-area { 
  display: flex; 
  gap: 8px; 
  padding: 12px 14px; 
  border-top: 1px solid #e8eaed; 
  background: white; 
}
.chat-input-area input { 
  flex: 1; 
  padding: 10px 14px; 
  border: 1px solid #d9d9d9; 
  border-radius: 10px; 
  font-size: 13px; 
  outline: none; 
}
.chat-input-area input:focus { border-color: #667eea; }
.chat-input-area button { 
  background: #667eea; 
  color: white; 
  border: none; 
  padding: 10px 16px; 
  border-radius: 10px; 
  font-size: 13px; 
  cursor: pointer; 
  white-space: nowrap; 
}
.chat-input-area button:hover { background: #5a6fd6; }

.chat-suggestions { 
  padding: 8px 14px; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 6px; 
  border-top: 1px solid #f0f0f0; 
}
.chat-suggestions span { 
  font-size: 11px; 
  color: #888; 
  background: #f0f2f5; 
  padding: 4px 10px; 
  border-radius: 12px; 
  cursor: pointer; 
  transition: all 0.2s; 
}
.chat-suggestions span:hover { background: #667eea; color: white; }

@media (max-width: 768px) {
  .chat-panel { width: calc(100vw - 32px); right: 16px; bottom: 80px; max-height: 70vh; }
}