* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 13px; color: #222; background: #f4f5f7;
  display: flex; flex-direction: column; overflow: hidden;
}
#topbar {
  height: 48px; min-height: 48px; background: #16324f; color: #fff;
  display: flex; align-items: center; padding: 0 16px; gap: 24px;
}
.brand { font-size: 15px; font-weight: 600; white-space: nowrap; }
.brand .ver { font-size: 11px; opacity: .6; font-weight: 400; }
#tabs { display: flex; gap: 4px; }
.bundle-bar { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.bundle-bar .file { display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
.bundle-bar .file:hover { filter: brightness(1.06); }
.bundle-msg { color: #7fe0a3; font-size: 12px; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.tab {
  background: transparent; border: none; color: #cdd9e5; padding: 8px 16px;
  font-size: 13px; cursor: pointer; border-radius: 6px 6px 0 0;
}
.tab:hover { color: #fff; }
.tab.active { background: #f4f5f7; color: #16324f; font-weight: 600; }
.page { display: none; flex: 1; overflow: auto; }
.page.active { display: block; }
#page-site.active { display: flex; overflow: hidden; }

.site-layout { display: flex; width: 100%; height: 100%; }
#site-left { width: 240px; min-width: 240px; overflow-y: auto; padding: 10px; background: #fff; border-right: 1px solid #e2e5e9; }
#site-right { width: 280px; min-width: 280px; overflow-y: auto; padding: 10px; background: #fff; border-left: 1px solid #e2e5e9; }
#site-center { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#site-toolbar { display: flex; gap: 8px; padding: 8px 10px; background: #fafbfc; border-bottom: 1px solid #e2e5e9; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
#canvas-wrap { flex: 1; position: relative; background: #fff; overflow: hidden; }
#cv { display: block; cursor: default; }
#cv-hint { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: #999; pointer-events: none; background: rgba(255,255,255,.8); padding: 2px 8px; border-radius: 4px; }

.panel { margin-bottom: 14px; }
.panel-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #16324f; display: flex; justify-content: space-between; align-items: center; }
.cat-title { font-size: 11px; color: #888; margin: 8px 0 4px; }
.palette { display: flex; flex-wrap: wrap; gap: 4px; }
.palette button {
  font-size: 12px; padding: 4px 8px; border: 1px solid #d4d9df; background: #fff;
  border-radius: 4px; cursor: pointer; color: #333;
}
.palette button:hover { border-color: #2f6fb0; color: #2f6fb0; }
.palette button.arming { background: #2f6fb0; color: #fff; border-color: #2f6fb0; }
.row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; flex-wrap: wrap; }
.hint { font-size: 11px; color: #999; line-height: 1.6; }
.chk { display: block; font-size: 12px; padding: 2px 0; cursor: pointer; }
.chk input { vertical-align: -2px; margin-right: 4px; }

.btn {
  font-size: 13px; padding: 6px 14px; border: 1px solid #c9cfd6; background: #fff;
  border-radius: 5px; cursor: pointer; color: #333; display: inline-block;
}
.btn:hover { border-color: #2f6fb0; color: #2f6fb0; }
.btn.primary { background: #2f6fb0; border-color: #2f6fb0; color: #fff; }
.btn.primary:hover { background: #275e96; color: #fff; }
.btn.sm { font-size: 12px; padding: 4px 10px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.synced { background: #e7f6ec; border-color: #bfe3cb; color: #22693a; }
.file-btn, .file-btn2 { position: relative; overflow: hidden; }
select, input[type=number], input[type=text] {
  font-size: 12px; padding: 4px 6px; border: 1px solid #c9cfd6; border-radius: 4px; background: #fff;
}
input[type=number] { width: 72px; }

#prop-panel .frow { margin-bottom: 6px; }
.frow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.frow label { flex: 1; font-size: 12px; color: #555; }
.frow input, .frow select { width: 110px; }

#warn-list .warn { padding: 6px 8px; border-radius: 4px; margin-bottom: 6px; font-size: 12px; line-height: 1.5; }
.warn.err { background: #fdeaea; color: #a32d2d; border-left: 3px solid #d64545; }
.warn.wrn { background: #fdf3e0; color: #8a5a0b; border-left: 3px solid #e5a028; }
.warn.ok  { background: #e9f5ec; color: #22693a; border-left: 3px solid #3d9c5d; }

.doc { max-width: 1200px; margin: 0 auto; padding: 24px; }
.doc h2 { font-size: 18px; color: #16324f; margin-bottom: 12px; }
.doc h3 { font-size: 15px; color: #16324f; margin: 20px 0 10px; }
.toolbar-line { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.table-scroll { overflow-x: auto; background: #fff; border: 1px solid #e2e5e9; border-radius: 6px; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th { background: #f0f3f6; color: #444; font-weight: 600; padding: 8px 6px; text-align: center; white-space: nowrap; border-bottom: 2px solid #dde2e8; }
td { padding: 6px; border-bottom: 1px solid #eef1f4; text-align: center; }
tbody tr:hover { background: #f8fafc; }
td input, td select { width: 100%; min-width: 48px; }
td .num { font-family: Consolas, monospace; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #e6f1fb; color: #185fa5; white-space: nowrap; }
.pill.red { background: #fdeaea; color: #a32d2d; }
.del-x { color: #c66; cursor: pointer; font-size: 14px; padding: 0 6px; }
.del-x:hover { color: #d00; }

.kgrid { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; background: #fff; border: 1px solid #e2e5e9; border-radius: 6px; padding: 12px; }
.kgrid .frow { margin: 0; }
.kgrid input { width: 64px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mcard { background: #fff; border: 1px solid #e2e5e9; border-radius: 8px; padding: 14px; }
.mcard .lb { font-size: 12px; color: #888; margin-bottom: 6px; }
.mcard .vl { font-size: 22px; font-weight: 600; color: #16324f; font-family: Consolas, monospace; }
.mcard .vl small { font-size: 12px; font-weight: 400; color: #999; }
#sum-detail { background: #fff; border: 1px solid #e2e5e9; border-radius: 6px; padding: 14px; font-size: 13px; line-height: 2; }

/* 临电演算：单设备选型推导框 */
.derive-box { margin: 10px 0 4px; background: #fbfdff; border: 1px solid #cfe2f3; border-left: 4px solid #185fa5; border-radius: 8px; padding: 12px 14px; font-size: 12.5px; line-height: 1.9; color: #2a3b4d; }
.derive-box .dv-h { font-weight: 600; color: #16324f; margin-bottom: 4px; }
.derive-box .dv-row { padding: 1px 0; }
.derive-box .dv-err { color: #a32d2d; background: #fdeaea; border-radius: 4px; padding: 4px 8px; }
.derive-box .dv-final { margin-top: 4px; font-weight: 600; color: #185fa5; }
/* 合规一键优化日志 */
.opt-log { margin-top: 10px; }
.opt-log .warn { padding: 4px 8px; border-radius: 4px; margin-bottom: 4px; font-size: 12px; line-height: 1.5; }

.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wcard { background: #fff; border: 1px solid #e2e5e9; border-radius: 8px; padding: 16px; }
.wcard h3 { margin-top: 0; }
#w-result .rline { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed #eee; }
#w-result .rline b { font-family: Consolas, monospace; }
#w-result .final { background: #e6f1fb; margin-top: 10px; padding: 10px; border-radius: 6px; }

/* 蓄水池有效容积推导过程（临水计算页签 #pool-plan） */
#pool-plan .derive-step { border: 1px solid #e7eaf0; border-radius: 8px; padding: 10px 12px; margin-top: 10px; background: #fbfcfe; }
#pool-plan .derive-step .dh { display: block; margin-bottom: 6px; color: #16324f; font-size: 13px; }
#pool-plan .formula { font-family: Consolas, "Microsoft YaHei", monospace; background: #f1f4f8; padding: 4px 8px; border-radius: 5px; display: inline-block; margin: 4px 0; color: #16324f; }
#pool-plan .derive-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; }
#pool-plan .derive-tbl th, #pool-plan .derive-tbl td { border: 1px solid #e7eaf0; padding: 3px 6px; text-align: center; }
#pool-plan .derive-tbl th { background: #eef2f7; }
#pool-plan .final { background: #e6f1fb; margin-top: 10px; padding: 10px; border-radius: 6px; }

.cklist { background: #fff; border: 1px solid #e2e5e9; border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.cklist h3 { margin-top: 0; }
.cklist li { margin: 6px 0 6px 20px; line-height: 1.7; }

@media print {
  #topbar, .toolbar-line, #site-left, #site-right, #site-toolbar { display: none !important; }
  .page { display: none; }
  .page.active { display: block; overflow: visible; }
  body { overflow: visible; background: #fff; }
}

/* 工期排布：甘特色块 */
.gantt-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
#sch-gantt svg text { font-family: "Microsoft YaHei", SimHei, sans-serif; }
/* 工期分项表：子项展开行 */
.sch-subrow td { background: #fafbfc; border-top: 1px dashed #eef1f4; }
.sch-tri { user-select: none; transition: transform .12s; }
.sch-row:hover, .sch-subrow:hover { background: #f6f9fc; }
/* 子项工期可编辑输入框 + 已调标记 */
.sch-day {
  width: 54px; padding: 2px 4px; font-size: 12px; text-align: center;
  border: 1px solid #cfd6df; border-radius: 4px; background: #fff; color: #2b3a4a;
}
.sch-day:focus { outline: none; border-color: #4f86c6; box-shadow: 0 0 0 2px rgba(79,134,198,.15); }
.sch-subrow.sch-edited td { background: #fff7e8; }
.sch-tag {
  display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 10px; line-height: 15px;
  color: #b8860b; background: #fbeecb; border-radius: 8px; vertical-align: 1px;
}
/* 预留工期可编辑输入框（位于汇总卡片内） */
.sch-reserve-in {
  width: 50px; padding: 2px 5px; font-size: 13px; text-align: right;
  border: 1px solid #cfd6dd; border-radius: 4px; background: #fff; color: #1f2d3d;
}
.sch-reserve-in:focus { outline: none; border-color: #2f6f8f; box-shadow: 0 0 0 2px rgba(47,111,143,.15); }
/* 分项工期表右侧导出按钮组 */
.sch-tab-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; gap: 10px; flex-wrap: wrap; }
.sch-export-group { display: flex; gap: 8px; flex-wrap: wrap; }
#fp-bytype table { width: auto; min-width: 360px; margin-top: 10px; background: #fff; border: 1px solid #e2e5e9; border-radius: 6px; }

/* 消防推导提示 / 供电方案答复单 */
.hint .ok, span.ok { color: #22693a; }
#fp-fire-note { line-height: 1.8; }
.reply-doc { border: 1px solid #333; padding: 20px 26px; border-radius: 6px; background: #fff; max-width: 880px; }
.reply-title { text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 6px; }
.reply-sub { text-align: center; color: #666; font-size: 12px; margin-bottom: 14px; }
.reply-tbl { width: 100%; border-collapse: collapse; margin: 8px 0 14px; }
.reply-tbl th, .reply-tbl td { border: 1px solid #bbb; padding: 6px 8px; vertical-align: top; text-align: left; font-size: 12px; }
.reply-tbl th { background: #f2f4f7; width: 118px; white-space: nowrap; font-weight: 600; }
.reply-tbl thead th { background: #e8edf3; text-align: center; width: auto; }
.lv1 { color: #b5331f; font-weight: bold; } .lv2 { color: #c47a00; font-weight: bold; } .lv3 { color: #22693a; font-weight: bold; }
.reply-doc h4 { margin: 16px 0 4px; border-left: 4px solid #1f6f3a; padding-left: 8px; font-size: 15px; }
.reply-fee { background: #fff8ef; border: 1px solid #f0d9b5; border-radius: 6px; padding: 10px 14px; }
.reply-fee p { margin: 6px 0; line-height: 1.8; }
.fee-amt { font-size: 14px; color: #b5331f; font-weight: bold; }
.reply-note, .reply-foot { font-size: 12px; color: #555; line-height: 1.8; }
.reply-note.warn { color: #b5331f; background: #fdecea; border: 1px solid #f3c0b8; border-radius: 6px; padding: 8px 12px; }
.bus-seg { border: 1px solid #d4d9df; border-radius: 6px; padding: 8px 12px; margin: 8px 0; background: #fbfcfd; }
.bus-seg .bus-h { font-weight: 600; color: #1f4f7a; font-size: 13px; margin-bottom: 6px; }
.bus-seg .bus-meta { font-size: 12px; color: #555; margin-top: 6px; }
.bus-seg .reply-tbl { margin: 4px 0 2px; }
.bus-sum td { font-weight: 700; background: #eef3f8; }
.reply-foot { margin-top: 14px; padding-top: 8px; border-top: 1px dashed #ccc; color: #888; }

/* ============ 工作台（工程库 + 总览） ============ */
.lib-banner { background:#e8f6ee; border:1px solid #bfe3cd; color:#1f7a45; padding:7px 10px; border-radius:8px; margin:10px 0; font-size:13px; }
.lib-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap:14px; margin-top:14px; }
.lib-ov { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
.ov-card { border:1px solid #e3e6ea; border-radius:10px; padding:12px; background:#fafbfc; }
.ov-t { font-size:12px; color:#7a8699; }
.ov-big { font-size:22px; font-weight:700; color:#1f2d4d; margin:4px 0 2px; }
.ov-sub { font-size:12px; color:#5b6b85; }
.lib-list { display:flex; flex-direction:column; gap:8px; max-height:460px; overflow:auto; }
.lib-item { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #e8eaef; border-radius:8px; padding:8px 10px; background:#fff; }
.lib-item:hover { border-color:#b9c6da; }
.lib-item-main { min-width:0; }
.lib-item-name { font-weight:600; color:#1f2d4d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-item-meta { font-size:12px; color:#8a96a8; }
.lib-item-actions { display:flex; gap:6px; flex:0 0 auto; }
@media (max-width: 880px) { .lib-grid { grid-template-columns: 1fr; } .lib-ov { grid-template-columns: 1fr; } }