/* 中标通 · 网页版 —— 淡蓝专业风（与桌面版同一主色 #1F6FEB） */
:root{
  --primary:#1F6FEB; --primary-dark:#1558c0; --bg:#f4f7fb; --card:#ffffff;
  --text:#1b2430; --sub:#5b6b7f; --line:#dce6f2; --ok:#0f9d58; --warn:#c77700;
  --danger:#d93025; --row-done:#e8f6ec; --row-pending:#fff8e1;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.6 "Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 10px}
.topbar{display:flex;align-items:center;gap:18px;background:#fff;border-bottom:1px solid var(--line);
  padding:10px 18px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.topbar .brand{font-size:17px;font-weight:700;color:var(--primary)}
.topbar .brand .ver{font-size:12px;color:var(--sub);font-weight:400}
.topbar nav{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}
.topbar nav .who{color:var(--sub)}
.wrap{max-width:1500px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.card h3{font-size:15px;color:var(--primary)}
.sub{color:var(--sub);font-size:12.5px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12.5px;color:var(--sub)}
input,select,button,textarea{font:inherit}
input[type=text],input[type=password],input[type=date],select,textarea{
  padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--text);min-width:120px}
select[multiple]{min-height:78px;min-width:150px}
input:focus,select:focus{outline:2px solid #cfe1ff;border-color:var(--primary)}
.btn{background:#eef3fb;border:1px solid var(--line);color:var(--text);padding:8px 14px;
  border-radius:7px;cursor:pointer}
.btn:hover{background:#e3ecfa}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--primary-dark)}
.btn.danger{background:#fdecea;border-color:#f6c7c3;color:var(--danger)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.drop{border:2px dashed #b9d0f2;background:#f8fbff;border-radius:10px;padding:22px;text-align:center;color:var(--sub);cursor:pointer}
.drop.hot{border-color:var(--primary);background:#eef5ff;color:var(--primary)}
.tablebox{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
thead th{position:sticky;top:0;background:#f2f6fc;z-index:5;font-weight:600}
tbody tr{cursor:pointer}
tbody tr:nth-child(even){background:#fafcff}
tbody tr:hover{background:#eef5ff}
tbody tr.done{background:var(--row-done)}
tbody tr.pending{background:var(--row-pending)}
tbody tr.conflict{background:#fdeaea;box-shadow:inset 3px 0 0 #e05252}
tbody tr.conflict:hover{background:#fadede}
td.num,th.num{text-align:right}
.modal{position:fixed;inset:0;background:rgba(15,30,60,.45);display:none;align-items:center;
  justify-content:center;padding:18px;z-index:50}
.modal.show{display:flex}
.modal .box{background:#fff;border-radius:12px;max-width:1000px;width:100%;max-height:88vh;
  overflow:auto;padding:18px}
.msg{padding:9px 12px;border-radius:8px;margin:8px 0;font-size:13px}
.msg.ok{background:#e8f6ec;color:#0b6b3a;border:1px solid #bfe6cd}
.msg.warn{background:#fff6e5;color:#8a5a00;border:1px solid #ffdfa8}
.msg.err{background:#fdecea;color:#a1291f;border:1px solid #f6c7c3}
.kv{display:grid;grid-template-columns:88px 1fr;gap:4px 10px;font-size:13px;margin:6px 0}
.kv .k{color:var(--sub)}
.stat{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0;font-size:13px}
.stat b{color:var(--primary)}
ul.notes{margin:6px 0 0 18px;padding:0;font-size:13px}
.auth{max-width:420px;margin:8vh auto}
.auth .card{padding:22px}
label.inline{display:flex;gap:6px;align-items:center;font-size:13px}

/* ---------- 多选筛选：点开是勾选框面板（替代 Ctrl 多选的原生 select） ---------- */
.ms { position: relative; display: inline-block; }
.ms-btn { font: inherit; padding: 6px 10px; border: 1px solid #cfd8e3; border-radius: 6px;
  background: #fff; color: #223; cursor: pointer; white-space: nowrap; }
.ms-btn:after { content: " ▾"; color: #8896ab; }   /* ▾ 下拉指示 */
.ms-sum { color: #1F6FEB; margin-left: 4px; }
.ms-pop { display: none; position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 4px;
  min-width: 190px; background: #fff; border: 1px solid #cfd8e3; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.13); padding: 8px; }
.ms.open .ms-pop { display: block; }
.ms-list { max-height: 220px; overflow: auto; }
.ms-list label { display: block; padding: 4px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.ms-list label:hover { background: #f2f7ff; }
.ms-ops { display: flex; gap: 6px; margin-top: 8px; border-top: 1px solid #eef1f5; padding-top: 8px; }
@media (max-width: 860px) { .ms-pop { min-width: 150px; } }

/* ---------- 报价密度图 ---------- */
.dp-head { font-size: 13px; color: #44506b; margin-bottom: 6px; }
.dp-scroll { overflow-x: auto; overflow-y: hidden; }
.dp-inner { position: relative; height: 172px; min-width: 100%; border-bottom: 1px solid #e3e9f0; }
.dp-bars { display: flex; align-items: flex-end; height: 150px; }
.dp-bars .db { display: flex; align-items: flex-end; height: 100%; }
.dp-bars .db i { display: block; width: 100%; background: #bcd8ff; border-radius: 2px 2px 0 0; }
.dp-bars .db i:hover { background: #7fb2ff; }
.dp-layer, .dp-marks, .dp-ticks { position: absolute; left: 0; right: 0; top: 0; bottom: 22px;
  pointer-events: none; }
/* 试算「看位置」的蓝线：必须画在横轴刻度线**之上** ——
   否则它的位置正好落在某条刻度线上时，两条 1px 竖线完全重合，看起来就像"没显示出来"。
   层序（从下往上）：刻度线 1 → 中标点位 2 → 试算线 3 → 线上文字 4 */
.dp-ticks { z-index: 1; }
.dp-marks { z-index: 2; }
.dp-layer { z-index: 3; }
.dp-layer .dline { width: 2px; }
.dp-layer .dline.try { background: #1657c8; box-shadow: 0 0 0 1px #fff; }
.dp-layer .dline b { z-index: 4; }
.dp-ticks .dtick { position: absolute; top: 0; bottom: 0; width: 1px; background: #eef2f7; }
.dp-ticks .dtick b { position: absolute; bottom: -17px; left: 0; transform: translateX(-50%);
  font-size: 11px; color: #8896ab; white-space: nowrap; }
.dp-layer .dline { position: absolute; top: 0; bottom: 0; width: 1px; background: #c0392b; opacity: .8; }
.dp-layer .dline b { position: absolute; top: -2px; left: 3px; font-size: 11px; color: #c0392b;
  background: rgba(255,255,255,.88); padding: 0 2px; white-space: nowrap; }
.dp-layer .dline.try { background: #1F6FEB; }
.dp-layer .dline.try b { color: #1F6FEB; }
.dp-marks .dm { position: absolute; bottom: -1px; width: 3px; height: 12px; background: #e8590c;
  transform: translateX(-50%); border-radius: 1px; }
.dp-legend { font-size: 12px; color: #667; margin-top: 6px; display: flex; align-items: center;
  gap: 4px; flex-wrap: wrap; }
.dp-legend .lg { display: inline-block; width: 12px; height: 8px; margin-left: 10px; }
.dp-legend .lg.bar { background: #bcd8ff; }
.dp-legend .lg.mark { background: #e8590c; width: 3px; height: 12px; }
.dp-legend .lg.line { background: #c0392b; width: 2px; height: 12px; }
.dp-try { font-size: 13px; margin-top: 8px; }
.dp-try input { width: 72px; }
.dp-peers { font-size: 12px; color: #556; max-height: 120px; overflow: auto; margin-top: 4px; }
.dp-peers div { padding: 2px 0; border-bottom: 1px dashed #eef1f5; }

/* ---------- 叠加视图（多工程密度叠在一张图） ---------- */
.ov-grad { display: inline-flex; align-items: center; margin: 0 4px; }
.ov-grad i { display: inline-block; width: 16px; height: 10px; }
#ovBox details > summary { font-size: 14px; }
#ovBox .ms-pop { z-index: 80; }
#ovCanvas { border-radius: 4px; background: #fff; }

/* ---------- 风控价"带"（风控价＝限价×(X+P)%，P 开标时随机 ±1） ---------- */
.dp-layer .dband { position: absolute; top: 0; bottom: 0; background: rgba(192, 57, 43, .16);
  border-left: 1px dashed rgba(192, 57, 43, .6); border-right: 1px dashed rgba(192, 57, 43, .6); }

/* ---------- 弹窗右上角关闭（像浏览器一样，滚动内容时也固定在右上角） ---------- */
.modal .box { position: relative; }
.modal-x { position: sticky; top: 0; margin-left: auto; display: block;
  width: 30px; height: 30px; line-height: 1; font-size: 18px; border: 0; cursor: pointer;
  background: #eef3fb; color: #44506b; border-radius: 50%; z-index: 6; }
.modal-x:hover { background: #dde8f8; color: #1F6FEB; }

/* ---------- 中标下浮率标注：横轴以下（上排本工程=深蓝，下排类似工程=橙） ---------- */
.dp-inner { height: 200px; }
.dp-wins { position: absolute; left: 0; right: 0; top: 178px; height: 22px; pointer-events: none; }
.dp-wins .dp-wrow { position: relative; height: 11px; }
.dp-legend .lg.self { background: #1F6FEB; width: 2px; height: 12px; }

/* ---------- 箱图内不再展示风控价；刻度与中标标注分层（互不重叠） ---------- */
.dp-inner { height: 202px; }
.dp-layer, .dp-marks, .dp-ticks { bottom: 52px; }      /* 柱区只到 150px */
.dp-ticks .dtick b { bottom: -18px; }                  /* 刻度数字落在 150~170 */
.dp-wins { top: 174px; height: 26px; }                 /* 中标下浮率两排：174~200 */

/* ---------- 修正：本工程中标竖线原来没写高度 → 高度 0 看不见；这里重排轴下三层 ---------- */
.dp-inner { height: 210px; }
.dp-layer, .dp-marks, .dp-ticks { bottom: 60px; }        /* 柱区 0~150 */
.dp-ticks .dtick b { bottom: -18px; }                    /* 刻度数字 150~170 */
.dp-wins { top: 172px; height: 30px; }                   /* 中标两排 172~202 */
.dp-wins .dp-wrow { position: relative; height: 15px; }
.dp-wins .dw.self { position: absolute; bottom: 0; height: 14px; width: 0;
  border-left: 1.5px solid #1F6FEB; }                    /* ★ 竖线要高度才看得见 */
.dp-wins .dw.self b { position: absolute; bottom: 1px; left: 3px; font-size: 11px;
  color: #1F6FEB; white-space: nowrap; background: rgba(255,255,255,.9);
  padding: 0 2px; border-radius: 3px; }
.dp-wins .dm { position: absolute; bottom: 0; width: 3px; height: 11px; background: #e8590c;
  transform: translateX(-50%); border-radius: 1px; }

/* 本工程还没有中标价时的占位提示（灰字，避免被当成故障） */
.dp-wins .dw.none { position: absolute; left: 0; bottom: 0; }
.dp-wins .dw.none b { font-size: 11px; color: #8896ab; font-weight: normal; }

/* ---------- 中标刻度合成一排：橙＝类似工程，蓝＝本工程（都不写字） ---------- */
.dp-inner { height: 196px; }
.dp-layer, .dp-marks, .dp-ticks { bottom: 46px; }        /* 柱区只到 150px */
.dp-ticks .dtick b { bottom: -18px; }                     /* 刻度数字 150~170 */
.dp-wins { top: 174px; height: 16px; }                    /* 中标刻度一排：174~190 */
.dp-wins .dp-wrow { position: relative; height: 14px; }
.dp-wins .dm { position: absolute; bottom: 0; width: 3px; height: 10px; background: #e8590c;
  transform: translateX(-50%); border-radius: 1px; }
.dp-wins .dw.self { position: absolute; bottom: 0; width: 0; height: 14px;
  border-left: 2px solid #1F6FEB; }
.dp-wins .dw.self b, .dp-wins .dw.none { display: none; }  /* 不再显示任何文字 */

/* ---------- 会员到期提醒：右下角小浮标（点 × 关掉，当天不再出现） ---------- */
.mem-tip { position: fixed; right: 16px; bottom: 78px; z-index: 45;
  display: flex; align-items: center; gap: 8px; max-width: 76vw;
  background: #fffdf5; border: 1px solid #ffdfa8; border-left: 4px solid #f0a500;
  border-radius: 10px; padding: 8px 10px; font-size: 13px; color: #6b4a00;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.mem-tip .btn.tiny { padding: 3px 10px; }
.mem-tip-x { border: 0; background: transparent; font-size: 18px; line-height: 1;
  color: #9aa6b8; cursor: pointer; padding: 0 2px; }
.mem-tip-x:hover { color: #44506b; }
@media (max-width: 860px) {
  .mem-tip { left: 12px; right: 12px; bottom: 70px; max-width: none; justify-content: space-between; }
}

/* 页脚：品牌名 + 备案号 */
.foot{max-width:1500px;margin:0 auto;padding:14px 16px 24px;color:var(--sub);font-size:12.5px;text-align:center}

/* 首页「照着四步走」引导 */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:8px}
.steps .step{background:#fff;border:1px solid #dbe7f8;border-radius:8px;padding:10px 12px;font-size:13px}
.steps .step b{display:block;color:#1F6FEB;margin-bottom:3px;font-size:13.5px}
.steps .step span{color:#44506b;line-height:1.6}

/* ---------- 功能一览（帮助页图文）/ 首页单张示例图 ---------- */
.guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:10px}
.guide figure{margin:0}
.guide img{width:100%;display:block;border:1px solid #dbe4f0;border-radius:8px;background:#fff}
.guide figcaption{font-size:13px;color:#44506b;margin-top:6px;line-height:1.6}
.guide figcaption b{color:#1F6FEB}
.shot img{width:100%;max-width:940px;display:block;border:1px solid #dbe4f0;border-radius:8px}

/* ---------- 分步图文教程（帮助页「去哪儿下载」） ---------- */
.howto{margin:10px 0 0 22px;padding:0}
.howto li{margin-bottom:14px;color:#44506b;font-size:13.5px;line-height:1.7}
.howto li img{max-width:100%;margin-top:6px;display:block;border:1px solid #dbe4f0;border-radius:6px;background:#fff}

/* ★ 2026-10-15：列宽固定，超出用省略号，鼠标停上去看全文（像 Excel）—— 不再被内容撑开 */
#tbl{table-layout:fixed;width:100%}
#tbl th,#tbl td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ★ 2026-10-15：列宽改成可拖动（表头右边缘那个小条），默认宽度见 app.js 的 COL_W。
   内容超长的按 Excel 只显示前面部分（配合上面的省略号），鼠标停上去看全文。 */
.col-resizer{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:2}
.col-resizer:hover{background:rgba(31,111,235,.25)}
#tbl thead th{position:relative}