/* styles.css - 变电站碳排 App */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f4f5f7; color: #1a1f2c; line-height: 1.55;
}

/* header */
.app-header {
  background: linear-gradient(135deg, #0f3b66 0%, #1a5a99 100%);
  color: #fff; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand .logo { font-size: 32px; }
.brand h1 { margin: 0; font-size: 18px; font-weight: 600; }
.brand .sub { margin: 2px 0 0; font-size: 12px; opacity: .85; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* container */
.container { max-width: 1280px; margin: 24px auto; padding: 0 20px; }
.card {
  background: #fff; border-radius: 10px; padding: 20px 24px; margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.card h2 { margin: 0 0 14px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.card h2 .num {
  display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center;
  background: #0f3b66; color: #fff; border-radius: 50%; font-size: 13px; font-weight: 600;
}
.card .hint { font-weight: normal; font-size: 12px; color: #6b7785; margin-left: 4px; }
.card .explain { color: #5a6573; font-size: 13px; margin: -4px 0 12px; }

/* form */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #4a5460; }
input, select, button { font: inherit; }
input[type=text], input[type=number], select {
  padding: 8px 10px; border: 1px solid #d0d6de; border-radius: 6px; background: #fff;
  transition: border-color .15s;
}
input:focus, select:focus { outline: none; border-color: #1a5a99; }
.ef-row { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; }
.ef-row .unit { color: #6b7785; font-size: 12px; }

/* buttons */
.btn { padding: 8px 14px; border: 1px solid #1a5a99; background: #1a5a99; color: #fff;
  border-radius: 6px; cursor: pointer; font-size: 13px; transition: all .15s; }
.btn:hover { background: #144880; border-color: #144880; }
.btn-ghost { background: transparent; color: #1a5a99; }
.btn-ghost:hover { background: #1a5a99; color: #fff; }
.btn-primary { background: #d96a3a; border-color: #d96a3a; font-size: 14px; padding: 10px 18px; }
.btn-primary:hover { background: #b8531e; border-color: #b8531e; }
.btn-add { background: #f0f4f9; color: #1a5a99; border: 1px dashed #a8b8cc; margin-top: 10px; }
.btn-add:hover { background: #1a5a99; color: #fff; border-style: solid; }
.btn-del { background: transparent; border: 1px solid #d9534f; color: #d9534f; padding: 2px 8px; border-radius: 4px; cursor: pointer; }
.btn-del:hover { background: #d9534f; color: #fff; }

/* tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 8px 6px; text-align: left; border-bottom: 1px solid #e8ecf1; }
.data-table th { background: #f7f9fc; color: #4a5460; font-weight: 600; font-size: 12px; }
.data-table td input, .data-table td select { width: 100%; padding: 5px 6px; font-size: 12px; }
.data-table td.num { text-align: right; color: #2a3340; font-variant-numeric: tabular-nums; }
.data-table .empty { text-align: center; color: #98a3b0; padding: 18px; font-style: italic; }

/* result */
.result-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fossil-ef { font-size: 12px; color: #6b7785; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 800px) { .result-grid { grid-template-columns: 1fr 1fr; } }
.result-tile { background: #f7f9fc; border-radius: 8px; padding: 14px; border: 1px solid #e8ecf1; }
.result-tile .k { color: #6b7785; font-size: 12px; }
.result-tile .v { color: #1a1f2c; font-size: 20px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.result-tile .u { color: #6b7785; font-size: 12px; margin-top: 2px; }
.result-total { background: #fff7f0; border-color: #d96a3a; }
.result-total .v { color: #d96a3a; }
.component-breakdown h3 { font-size: 13px; color: #4a5460; margin: 16px 0 8px; }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.comp-tile { background: #f7f9fc; padding: 10px; border-radius: 6px; text-align: center; }
.comp-tile .k { font-size: 12px; color: #6b7785; }
.comp-tile .v { font-size: 15px; font-weight: 600; color: #1a5a99; font-variant-numeric: tabular-nums; }

.warnings { margin: 12px 0; }
.warns { background: #fff8e6; border: 1px solid #f0c97a; padding: 8px 12px; border-radius: 6px; font-size: 13px; color: #8a6300; }
.errs  { background: #fdecea; border: 1px solid #e89a91; padding: 8px 12px; border-radius: 6px; font-size: 13px; color: #b23a2a; margin-bottom: 6px; }
.fatal { background: #fff8e6; color: #8a6300; padding: 12px 18px; text-align: center; font-weight: 600; border-bottom: 1px solid #f0c97a; }

/* 顶部软提示 Banner（替代原深红底 fatal） */
.app-banner {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 13px;
  border-bottom: 1px solid;
}
.app-banner-error { background: #fff8e6; color: #8a6300; border-color: #f0c97a; }
.app-banner-warn  { background: #f0f6ff; color: #1a3a66; border-color: #b6d1f0; }
.app-banner-ok    { background: #e8f5e9; color: #2e7d32; border-color: #4caf50; }
.app-banner-icon { font-size: 16px; }
.app-banner-msg { flex: 1; }
.app-banner-close {
  background: transparent; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  color: inherit; opacity: .6; padding: 0 4px;
}
.app-banner-close:hover { opacity: 1; }

.formula-box, .detail-box { margin-top: 14px; }
.formula-box summary, .detail-box summary { cursor: pointer; color: #1a5a99; font-size: 13px; font-weight: 600; padding: 6px 0; }
#formula-text { background: #f7f9fc; padding: 12px; border-radius: 6px; font-size: 12px; overflow: auto; }
#detail-tables h4 { font-size: 13px; color: #4a5460; margin: 16px 0 6px; }

/* dual caliber */
.dual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.dual-tile { padding: 12px 16px; border-radius: 8px; }
.dual-tile.dual-66 { background: #e8f0fb; border: 1px solid #b6d1f0; }
.dual-tile.dual-73 { background: #f0eaf7; border: 1px solid #d0bff0; }
.dual-tile .k { font-size: 13px; color: #4a5460; margin-bottom: 4px; }
.dual-tile .k small { font-size: 11px; color: #6b7785; }
.dual-tile .v { font-size: 22px; font-weight: 700; color: #1a3a66; }
.dual-tile.dual-73 .v { color: #4a2870; }
.dual-tile .u { font-size: 11px; color: #6b7785; margin-top: 2px; }
.dc-stages-table, .dc-rel-table { margin-top: 12px; font-size: 12px; }
.dc-stages-table td.num, .dc-rel-table td.num { text-align: right; }
.dc-stages-table tr:hover, .dc-rel-table tr:hover { background: #f7f9fc; }
.dc-verdict { padding: 10px 14px; border-radius: 6px; margin: 10px 0 6px; font-size: 13px; font-weight: 600; }
.dc-verdict-pass { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #4caf50; }
.dc-verdict-fail { background: #fdecea; color: #b23a2a; border-left: 4px solid #e53935; }
.rel-ok td:last-child { color: #2e7d32; font-weight: 600; }
.rel-fail td:last-child { color: #b23a2a; font-weight: 600; }
.dc-note { font-size: 11px; color: #6b7785; margin-top: 8px; padding: 6px 10px; background: #f7f9fc; border-radius: 4px; }
@media (max-width: 720px) { .dual-grid { grid-template-columns: 1fr; } }

/* factor browser */
.factor-tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tab-btn { padding: 6px 12px; border: 1px solid #d0d6de; background: #fff; color: #4a5460; border-radius: 6px; cursor: pointer; font-size: 12px; }
.tab-btn:hover { border-color: #1a5a99; color: #1a5a99; }
.tab-btn.active { background: #1a5a99; color: #fff; border-color: #1a5a99; }
.factor-table { max-height: 480px; overflow: auto; border: 1px solid #e8ecf1; border-radius: 6px; }
.factor-table .data-table th { position: sticky; top: 0; background: #f7f9fc; }

/* footer */
.app-footer { text-align: center; padding: 24px 16px; color: #6b7785; font-size: 12px; }
.app-footer .tip { color: #1a5a99; font-weight: 500; margin-top: 4px; }

/* toast */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
  background: #1a1f2c; color: #fff; padding: 10px 18px; border-radius: 6px;
  font-size: 13px; opacity: 0; transition: all .25s; z-index: 100; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* modal */
.modal {
  position: fixed; inset: 0; background: rgba(15, 31, 44, .6); display: flex;
  align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal-inner { background: #fff; border-radius: 12px; padding: 24px; max-width: 640px; width: 100%; max-height: 85vh; overflow: auto; }
.modal-inner h3 { margin: 0 0 16px; color: #0f3b66; }
.case { border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; }
.case.pass { background: #e8f5e9; border-left: 4px solid #2e7d32; }
.case.fail { background: #ffebee; border-left: 4px solid #c62828; }
.case-title { font-weight: 600; margin-bottom: 4px; }
.case-body { font-size: 13px; color: #4a5460; }
.case-fml, .case-note { font-size: 12px; color: #6b7785; margin-top: 4px; }

/* topnav */
.topnav { max-width: 1280px; margin: 18px auto 0; padding: 0 20px; display: flex; gap: 8px; }
.nav-btn {
  padding: 10px 18px; border: 1px solid #d0d6de; background: #fff; color: #4a5460;
  border-radius: 8px 8px 0 0; cursor: pointer; font-size: 14px; font-weight: 500;
  border-bottom: none; transition: all .15s;
}
.nav-btn:hover { color: #1a5a99; }
.nav-btn.active { background: #0f3b66; color: #fff; border-color: #0f3b66; }

/* views */
.view.hidden { display: none; }

/* research */
.research-section .research-body { font-size: 14px; }
.research-section .lead { font-size: 14px; color: #2a3340; background: #f0f6ff; border-left: 4px solid #1a5a99; padding: 10px 14px; border-radius: 6px; }
.research-section h4 { font-size: 14px; color: #0f3b66; margin: 18px 0 8px; }
.research-table { margin: 10px 0; }
.research-table th { background: #0f3b66; color: #fff; }
.research-table td, .research-table th { vertical-align: top; }
.note { font-size: 12px; color: #6b7785; background: #fbfcfe; border: 1px dashed #c8d2de; padding: 8px 12px; border-radius: 6px; margin: 10px 0; }
blockquote { border-left: 4px solid #d96a3a; margin: 8px 0; padding: 6px 14px; background: #fff7f0; color: #6a3a1e; font-size: 13px; }
.tag-blue, .tag-orange, .tag-green { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.tag-blue { background: #e0f2fe; color: #0369a1; }
.tag-orange { background: #ffedd5; color: #c2410c; }
.tag-green { background: #dcfce7; color: #15803d; }

/* std cards */
.std-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
@media (max-width: 800px) { .std-cards { grid-template-columns: 1fr; } }
.std-card { border: 1px solid #e1e8f0; border-radius: 10px; padding: 16px; background: #fff; }
.std-card .std-code { font-weight: 700; color: #0f3b66; font-size: 15px; }
.std-card .std-name { font-size: 13px; color: #4a5460; margin-bottom: 8px; }
.std-meta { list-style: none; padding: 0; margin: 0; font-size: 12.5px; color: #2a3340; }
.std-meta li { padding: 3px 0; border-bottom: 1px dashed #eef2f7; }
.std-meta b { color: #6b7785; font-weight: 600; margin-right: 4px; }

/* dataflow svg */
.dataflow-svg { width: 100%; max-width: 680px; height: auto; background: #0f172a; border-radius: 8px; padding: 6px; }
.legend { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #4a5460; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.dot.blue { background: #38bdf8; } .dot.orange { background: #fb923c; } .dot.green { background: #4ade80; } .dot.gray { background: #64748b; }

/* maintain */
.maintain-bar { display: flex; gap: 8px; margin: 12px 0; }
.mform { background: #f7f9fc; border: 1px solid #e1e8f0; border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.mform label { font-size: 12.5px; }
.mform textarea { width: 100%; padding: 8px 10px; border: 1px solid #d0d6de; border-radius: 6px; font: inherit; resize: vertical; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }
.muted { color: #6b7785; font-weight: 400; font-size: 12px; }

/* ===== M3 报告生成 ===== */
.report-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #e1e8f0; margin-bottom: 14px; }
.report-toolbar .rradio { font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.report-toolbar .rtool-spacer { flex: 1; }
.report-empty { padding: 40px; text-align: center; color: #8a93a0; background: #f7f9fc; border: 1px dashed #d0d6de; border-radius: 8px; }

/* 报告文档（A4 风格） */
.report-doc { background: #fff; max-width: 860px; margin: 0 auto; padding: 32px 40px; border: 1px solid #d8e0ea; border-radius: 8px; box-shadow: 0 2px 20px rgba(15,35,60,0.08); color: #1a2533; line-height: 1.75; font-size: 14px; }
.report-doc h1, .report-doc h2 { color: #0f3b66; }
.r-cover { text-align: center; border-bottom: 3px double #0f3b66; padding-bottom: 18px; margin-bottom: 22px; }
.r-cover-std { color: #1f7a4d; font-weight: 700; letter-spacing: 2px; font-size: 13px; }
.r-cover-title { font-size: 23px; font-weight: 800; margin: 10px 0 6px; }
.r-cover-proj { font-size: 16px; color: #333; font-weight: 600; }
.r-cover-meta { color: #667; font-size: 13px; margin-top: 6px; }
.r-sec { margin-top: 26px; border-left: 4px solid #0f3b66; padding-left: 12px; font-size: 17px; }
.r-sec-no { color: #0f3b66; font-weight: 800; margin-right: 6px; }
.r-sub { font-weight: 700; color: #2a3a4a; margin: 16px 0 6px; }
.r-table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 8px 0; }
.r-table th, .r-table td { border: 1px solid #cfd8e3; padding: 6px 9px; text-align: left; }
.r-table th { background: #eef3f8; font-weight: 600; }
.r-table td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.r-empty { color: #99a; font-style: italic; }
.r-formula { padding-left: 20px; } .r-formula li { margin: 4px 0; }
.r-item { display: flex; justify-content: space-between; border-bottom: 1px dotted #e3e8ef; padding: 3px 0; font-size: 13px; }
.r-item-name { color: #33414f; } .r-item-kg { color: #0f3b66; font-variant-numeric: tabular-nums; }
.r-total-line { margin: 14px 0; padding: 11px 16px; background: #eef7f0; border: 1px solid #bfe3cc; border-radius: 6px; font-size: 15px; }
.r-total-line b { color: #0a6b35; }
.r-recon-verdict { padding: 9px 13px; border-radius: 6px; margin: 8px 0; font-weight: 600; font-size: 13.5px; }
.r-recon-verdict.ok { background: #eaf7ee; color: #0a6b35; border: 1px solid #bfe3cc; }
.r-recon-verdict.warn { background: #fdeeea; color: #b23a2a; border: 1px solid #f0c4b8; }
.r-sign { margin-top: 32px; border-top: 1px solid #cfd8e3; padding-top: 12px; font-size: 13px; color: #445; }
.r-sign-note { color: #99a; font-size: 12px; margin-top: 6px; }

@media print {
  body { background: #fff !important; }
  .app-header, .topnav, .app-footer, .report-toolbar { display: none !important; }
  .container { display: block !important; }
  .view { display: none !important; }
  #view-report { display: block !important; }
  .card { box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; }
  .report-doc { box-shadow: none !important; border: none !important; max-width: 100%; padding: 0 !important; }
}

/* ===== M4 敏感性分析 ===== */
.sen-toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #e1e8f0; margin-bottom: 14px; }
.sen-group { font-size: 13.5px; display: inline-flex; align-items: center; gap: 10px; }
.sen-summary { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; background: #f4f8fc; border: 1px solid #dde7f1; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; color: #2a3a4a; }
.sen-summary b { color: #0f3b66; }
.sen-chart { margin: 6px 0 18px; }
.sen-h3 { font-size: 15px; color: #0f3b66; margin: 8px 0; }
.sen-table td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.rel-up { color: #c0392b; font-weight: 600; }
.rel-down { color: #1e8449; font-weight: 600; }
.sen-note { font-size: 12.5px; color: #667; line-height: 1.7; margin-top: 10px; background: #f7f9fc; border-left: 3px solid #cbd5e0; padding: 8px 12px; border-radius: 4px; }

/* ===== M5 工程量清单 ===== */
.qty-intro { background: #f4f8fc; border: 1px solid #dde7f1; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #2a3a4a; line-height: 1.7; }
.qty-intro p { margin: 4px 0; }
.qty-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0 14px; border-bottom: 1px solid #e1e8f0; margin-bottom: 12px; }
.qty-stat { font-size: 13px; color: #445; }
.qty-stat b { color: #0f3b66; }
.qty-bad { background: #fdf6f5; }
.r-empty { color: #99a; font-style: italic; }
.rtool-spacer { flex: 1; }

/* ===== 0.5 计算阶段选择 ===== */
.stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 6px 0 14px; }
.stage-item {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid #dde7f1; border-radius: 8px; padding: 10px 12px;
  background: #fbfdff; transition: border-color .15s, background .15s;
}
.stage-item:hover { border-color: #9bbce0; }
.stage-item input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; }
.stage-item.off { opacity: .55; background: #f6f7f9; }
.stage-main { flex: 1; min-width: 0; }
.stage-name { font-weight: 600; color: #0f3b66; font-size: 14px; }
.stage-std { font-size: 11.5px; color: #1e8449; background: #eafaf1; border: 1px solid #c8efd8; border-radius: 4px; padding: 0 6px; margin-left: 6px; }
.stage-note { font-size: 12px; color: #667; line-height: 1.5; margin-top: 2px; }
.stage-caliber { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #445; }
.stage-caliber select { font-size: 12px; padding: 2px 6px; border-radius: 5px; border: 1px solid #cdd; }
.stage-actions { display: flex; align-items: center; gap: 10px; }
.stage-count { font-size: 12.5px; color: #667; }
.stage-count b { color: #0f3b66; }
.stage-caliber-note {
  margin-top: 12px; font-size: 12.5px; line-height: 1.75; color: #445;
  background: #f7f9fc; border-left: 3px solid #cbd5e0; border-radius: 4px; padding: 9px 13px;
}
.stage-caliber-note u { text-decoration-color: #c0392b; }
.stage-caliber-note b { color: #0f3b66; }
.stage-warn {
  margin-top: 10px; font-size: 12.5px; color: #8a5a00; background: #fff8ec;
  border: 1px solid #f3dca0; border-radius: 6px; padding: 8px 12px;
}
.dc-verdict-na { background: #eef2f6 !important; color: #5a6b7b !important; border: 1px solid #cdd8e2 !important; }

/* 报告内重复计入醒目提示（建设施工=12666口径 且 物资获取同选） */
.r-warn {
  margin: 10px 0; padding: 10px 14px; border-radius: 8px;
  background: #fff4ec; border: 1px solid #f0b27a; color: #8a4b16;
  font-size: 13px; line-height: 1.6;
}
.r-warn b { color: #b34700; }
.r-warn-steel { background: #fff8ef; border-color: #e8c08a; color: #8a5a16; }
.r-warn-tip { font-size: 12px; color: #9a7b52; }

/* B7-1：计算视图工程量清单入口卡片 */
.qty-entry-body { margin: 6px 0 12px; }
.qty-entry-stat { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.qty-stat-pill {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 8px 14px; border-radius: 10px; background: #f5f8fb; border: 1px solid #e2e9f0;
  min-width: 92px; font-size: 12px; color: #5a6b7b;
}
.qty-stat-pill b { font-size: 16px; color: #0f3b66; margin-top: 2px; }
.qty-stat-pill.ok b { color: #1f8a4c; }
.qty-stat-pill.bad { background: #fdf6f5; border-color: #f0b27a; }
.qty-stat-pill.bad b { color: #b34700; }
.qty-entry-warn { margin: 4px 0 8px; }
.qty-unmatched-list { font-weight: 600; color: #b34700; }
.qty-entry-tip { font-size: 12px; color: #9a7b52; }

/* B7-2：双口径面板物资获取阶段警告 */
.mat-warn {
  margin: 10px 0; padding: 10px 14px; border-radius: 8px;
  background: #fff8ef; border: 1px solid #e8c08a; color: #8a5a16; font-size: 13px; line-height: 1.6;
}

/* ===== M5 造价软件直连面板 ===== */
.cost-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 10px 12px; background: #f4f8ff; border: 1px solid #d4e2fb; border-radius: 8px; }
.cost-panel-label { font-size: 13px; color: #34507a; }
.cost-panel select { padding: 6px 8px; border-radius: 6px; border: 1px solid #c3d4ef; font-size: 13px; background: #fff; }
.cost-hint { font-size: 12px; color: #667; flex: 1 1 200px; }

/* ============================================================
 * 移动端自适应（手机 ≤ 640px，兼顾微信内置浏览器）
 * 桌面端布局在更宽屏保持不变；窄屏统一改成纵向流式
 * ============================================================ */
@media (max-width: 640px) {
  /* —— 顶部品牌+操作栏：纵向堆叠，避免 actions 被裁 —— */
  .app-header {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    gap: 10px;
    position: static;            /* 微信浏览器 sticky 表现不稳，改为静态更省空间 */
  }
  .brand { gap: 10px; }
  .brand .logo { font-size: 24px; }
  .brand h1 { font-size: 15px; line-height: 1.35; }
  .brand .sub { font-size: 11px; line-height: 1.4; }

  /* —— 操作按钮：纵向堆叠 + 占满宽度，避免文字被切/按钮被挤没 —— */
  .actions { width: 100%; display: flex; flex-direction: column; gap: 6px; }
  .actions .btn { width: 100%; padding: 9px 10px; font-size: 13px; white-space: nowrap; justify-content: center; }

  /* —— 顶部 5 个视图切换：水平滚动，不挤压 —— */
  .topnav {
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 10px;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .nav-btn {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* —— 容器 / 卡片间距收紧 —— */
  .container { padding: 0 12px; margin: 12px auto 0; }
  .card { padding: 14px 14px; margin-bottom: 14px; border-radius: 8px; }
  .card h2 { font-size: 15px; gap: 6px; }
  .card h2 .num { width: 24px; height: 24px; line-height: 24px; font-size: 12px; }
  .card .explain { font-size: 12.5px; }

  /* —— 多列网格全部转单列，避免 2 列在 360px 被切 —— */
  .grid-2,
  .grid-3,
  .result-grid,
  .std-cards,
  .dual-grid,
  .stage-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* —— 阶段卡片内文略缩，避免标签溢出 —— */
  .stage-item { padding: 10px 10px; }
  .stage-name { font-size: 13.5px; }
  .stage-std { font-size: 10.5px; padding: 0 5px; margin-left: 4px; }
  .stage-note { font-size: 11.5px; }
  .stage-caliber-note { font-size: 11.5px; line-height: 1.7; padding: 8px 10px; }
  .stage-warn { font-size: 12px; padding: 7px 10px; }

  /* —— 表单 label 字号略缩，长说明可换行 —— */
  label { font-size: 12.5px; }
  input[type=text], input[type=number], select { font-size: 14px; }  /* ≥16px 防 iOS 缩放 */

  /* —— 报告 / 敏感性 / 标准研究 视图通用微调 —— */
  .report-toolbar, .sens-toolbar { flex-wrap: wrap; gap: 6px; }
  .report-toolbar .btn, .sens-toolbar .btn { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 6px 8px; }

  /* —— 造价软件直连面板：移动端占满宽度，select 满宽 —— */
  .cost-panel { width: 100%; padding: 8px 10px; }
  .cost-panel select { flex: 1 1 100%; }

  /* —— footer —— */
  .app-footer { font-size: 11px; padding: 18px 10px; }
}

/* 平板竖屏（641–800px）：stage-grid 仍 2 列（现有 800px 断点会接管为 1 列），
   此处无需额外规则；只在更窄的手机才转单列。 */