/* ===================== 三维数字沙盘平台 · 样式 ===================== */
:root{
  --bg:#eef1f5;
  --panel:#ffffff;
  --panel2:#f7f9fc;
  --line:#dbe2ea;
  --line2:#e8edf3;
  --txt:#1c2733;
  --txt2:#5a6b7d;
  --txt3:#8d9bab;
  --brand:#0b5fa5;
  --brand2:#1779c4;
  --accent:#e8791a;
  --ok:#1f9d55;
  --warn:#e8a30d;
  --bad:#d9534f;
  --gray:#9aa7b4;
  --shadow:0 4px 18px rgba(24,44,72,.10);
  --shadow2:0 10px 34px rgba(24,44,72,.16);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:"Microsoft YaHei","PingFang SC","Source Han Sans SC",system-ui,sans-serif;color:var(--txt);background:var(--bg);overflow:hidden}
button{font-family:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#c8d3de;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 顶栏 ---------- */
#topbar{position:fixed;left:0;top:0;right:0;height:56px;background:linear-gradient(90deg,#0a4f8c,#0b5fa5 45%,#1272b8);
  display:flex;align-items:center;gap:14px;padding:0 16px;z-index:60;box-shadow:0 2px 12px rgba(6,40,72,.28)}
#topbar .logo{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;font-size:15px;letter-spacing:.5px;border:1px solid rgba(255,255,255,.28)}
#topbar h1{font-size:15px;color:#fff;margin:0;font-weight:600;letter-spacing:.5px;white-space:nowrap}
#topbar .sub{font-size:11px;color:#bcd8ef;margin-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topbar .spacer{flex:1}
.navbtn{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#e7f2fb;font-size:12.5px;padding:7px 13px;border-radius:7px;cursor:pointer;transition:.15s;white-space:nowrap}
.navbtn:hover{background:rgba(255,255,255,.22)}
.navbtn.on{background:#fff;color:var(--brand);font-weight:600;border-color:#fff}
#clock{font-size:11.5px;color:#bcd8ef;white-space:nowrap}

/* ---------- 主体 ---------- */
#stage{position:fixed;left:0;top:56px;right:0;bottom:0}
#canvasWrap{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#dfe9f2,#f2f6fa)}
#glcanvas{display:block;width:100%;height:100%}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#labels .bl{position:absolute;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;font-size:11px;color:#123;
  background:rgba(255,255,255,.86);border:1px solid #c9d6e3;border-radius:5px;padding:2px 6px;box-shadow:0 1px 4px rgba(20,45,75,.16)}
#labels .bl b{color:var(--brand);font-weight:600}
#labels .bl.dim{opacity:.5}
#labels .bl.future{background:rgba(250,248,235,.9);border-color:#e0d59a;color:#7a6a1d}
#labels .bl.sml{opacity:.82}

/* 标注点位（HTML 覆盖层） */
.mk{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  filter:drop-shadow(0 2px 4px rgba(20,40,70,.30));transition:transform .12s}
.mk:hover{transform:translate(-50%,-100%) scale(1.12)}
.mk .pin{width:26px;height:26px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;
  border:2px solid #fff}
.mk .pin span{transform:rotate(45deg);font-size:11px;font-weight:700;color:#fff;line-height:1}
.mk .cap{margin-top:3px;font-size:10.5px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  color:#22303d;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk.quality .pin{background:#0b8f6a}
.mk.safety  .pin{background:#d9534f}
.mk.risk    .pin{background:#7a4ddb}
.mk.progress .pin{background:#0b6fb5}
.mk.sel .pin{outline:3px solid rgba(232,121,26,.55)}
.mk:hover .cap{display:block !important}
.mk:hover{z-index:5}

/* 左下：视角/工具条 */
#tools{position:absolute;left:14px;bottom:14px;display:flex;gap:8px;align-items:flex-end;z-index:20}
.toolcard{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:var(--shadow)}
.row{display:flex;gap:6px;align-items:center}
.tbtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:15px;color:#2b3a49;
  display:flex;align-items:center;justify-content:center;transition:.12s}
.tbtn:hover{background:#eef5fc;border-color:#b7d3ea}
.tbtn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.tbtn.wide{width:auto;padding:0 11px;font-size:12.5px}

/* 右下：图层 / 图例 */
#layers{position:absolute;left:14px;top:14px;width:214px;background:rgba(255,255,255,.95);border:1px solid var(--line);
  border-radius:11px;box-shadow:var(--shadow);z-index:20;overflow:hidden}
#layers .hd{padding:9px 11px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line2);background:var(--panel2);
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:#1d3247}
#layers .bd{padding:8px 11px 11px;max-height:calc(100vh - 300px);overflow:auto}
.sw{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 0;cursor:pointer;color:#31414f;user-select:none}
.sw input{accent-color:var(--brand);width:14px;height:14px;cursor:pointer}
.sw .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.legend{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.legend .li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--txt2);padding:3px 0}
.legend .li i{width:14px;height:9px;border-radius:2px;display:block}

/* 右上：小地图 */
#minimap{position:absolute;right:14px;top:14px;width:246px;background:rgba(255,255,255,.95);border:1px solid var(--line);
  border-radius:11px;box-shadow:var(--shadow);z-index:20;overflow:hidden}
#minimap .hd{padding:8px 11px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line2);background:var(--panel2);color:#1d3247;display:flex;justify-content:space-between}
#minimap .hd em{font-style:normal;font-size:11px;color:var(--txt3);font-weight:400}
#mmcv{display:block;width:100%;height:auto;cursor:crosshair}

/* 通用面板（右侧抽屉） */
#drawer{position:absolute;right:14px;top:14px;bottom:14px;width:390px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow2);z-index:40;display:none;flex-direction:column;overflow:hidden}
#drawer.open{display:flex}
#drawer .dh{padding:12px 14px;border-bottom:1px solid var(--line2);display:flex;align-items:flex-start;gap:10px;background:linear-gradient(#fbfdff,#f3f7fb)}
#drawer .dh .tt{flex:1;min-width:0}
#drawer .dh h3{margin:0 0 3px;font-size:15px;color:#12314e}
#drawer .dh .no{display:inline-block;font-size:11px;background:#e8f2fb;color:var(--brand);border:1px solid #c9e0f3;border-radius:4px;padding:1px 6px;margin-right:6px}
#drawer .dh p{margin:3px 0 0;font-size:11.5px;color:var(--txt3)}
.xbtn{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:15px;color:#5b6b7a;flex:0 0 auto}
.xbtn:hover{background:#f2f6fa}
#drawer .dc{padding:13px 14px;overflow:auto;flex:1}
.kv{display:grid;grid-template-columns:88px 1fr;gap:6px 10px;font-size:12.5px;margin:6px 0 2px}
.kv dt{color:var(--txt3)}
.kv dd{margin:0;color:#22303d}
.sect{margin:14px 0 6px;font-size:12.5px;font-weight:600;color:#12314e;display:flex;align-items:center;gap:7px}
.sect::before{content:'';width:3px;height:13px;background:var(--brand);border-radius:2px}
ul.pts{margin:4px 0 0;padding-left:18px;font-size:12.5px;color:#31414f;line-height:1.75}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-size:11.5px;background:#eef5fc;border:1px solid #d3e5f4;color:#1a5c92;border-radius:20px;padding:3px 9px}
.tag.g{background:#eaf7f0;border-color:#c7e8d6;color:#1a7a48}
.tag.o{background:#fdf3e7;border-color:#f5ddc0;color:#a35d0c}
.tag.r{background:#fdeceb;border-color:#f6cfcd;color:#a3322f}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-size:12.5px;
  border-radius:8px;padding:8px 14px;cursor:pointer;transition:.15s}
.btn:hover{background:#0a5490}
.btn.ghost{background:#fff;color:var(--brand);border-color:#bcd8ee}
.btn.ghost:hover{background:#eef6fd}
.btn.warnbtn{background:var(--accent);border-color:var(--accent)}
.btn.warnbtn:hover{background:#d06a12}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge{font-size:11px;padding:2px 7px;border-radius:20px;border:1px solid}
.badge.done{background:#eaf7f0;border-color:#c7e8d6;color:#1a7a48}
.badge.doing{background:#eef5fc;border-color:#cfe3f5;color:#155f95}
.badge.todo{background:#f4f6f8;border-color:#e0e5ea;color:#7c8894}
.badge.future{background:#fdf7e8;border-color:#f0e2b8;color:#8a6d15}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.thumbs img{width:100%;height:96px;object-fit:cover;border:1px solid var(--line);border-radius:7px;cursor:zoom-in;background:#fff}

/* 模态 */
#modal{position:fixed;inset:0;background:rgba(12,26,42,.62);z-index:80;display:none;align-items:center;justify-content:center;padding:26px}
#modal.open{display:flex}
#modal .box{background:#fff;border-radius:14px;max-width:1120px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#modal .mh{padding:12px 16px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px;background:var(--panel2)}
#modal .mh h3{margin:0;font-size:15px;flex:1;color:#12314e}
#modal .mb{padding:14px 16px;overflow:auto}
#modal .mb img{width:100%;border:1px solid var(--line);border-radius:8px}

/* 图表页 */
#page{position:absolute;inset:0;background:var(--bg);z-index:50;display:none;overflow:auto;padding:18px 20px 60px}
#page.open{display:block}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.card h2{margin:0 0 12px;font-size:15px;color:#12314e;display:flex;align-items:center;gap:8px}
.card h2::before{content:'';width:4px;height:15px;background:var(--brand);border-radius:2px}
.card h3{margin:16px 0 8px;font-size:13.5px;color:#1d3247}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.stat{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--panel2)}
.stat .k{font-size:11.5px;color:var(--txt3)}
.stat .v{font-size:17px;font-weight:600;color:#0b4a7d;margin:3px 0 2px;letter-spacing:.3px}
.stat .s{font-size:11px;color:var(--txt3)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{border-bottom:1px solid var(--line2);padding:7px 8px;text-align:left}
th{background:var(--panel2);color:#2b3f52;font-weight:600;position:sticky;top:0}
tbody tr:hover{background:#f7fbff}
table input,table select{width:100%;border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:12px;font-family:inherit;background:#fff;color:var(--txt)}
table input[type=number]{width:64px}
.pbar{height:8px;border-radius:5px;background:#eef1f5;overflow:hidden;min-width:70px}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,#1f9d55,#5cc98a)}
.pbar.blue i{background:linear-gradient(90deg,#1779c4,#63b1e6)}
.pbar.orange i{background:linear-gradient(90deg,#e8791a,#f0a45c)}
.pbar.gray i{background:linear-gradient(90deg,#9aa7b4,#c2cdd8)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.gitem{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;cursor:zoom-in;transition:.15s}
.gitem:hover{box-shadow:var(--shadow2);transform:translateY(-2px)}
.gitem img{width:100%;height:132px;object-fit:cover;display:block;background:#f4f7fa}
.gitem .cap{padding:7px 9px;font-size:11.5px;color:#31414f;line-height:1.4}
.gitem .cap em{display:block;font-style:normal;color:var(--txt3);font-size:10.5px;margin-top:2px}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.chip{font-size:12px;border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 12px;cursor:pointer;color:#31414f}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.hint{font-size:11.5px;color:var(--txt3);line-height:1.7}
.milestone{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line2)}
.milestone:last-child{border-bottom:0}
.milestone .d{font-size:11px;color:#fff;background:var(--brand);border-radius:6px;padding:3px 8px;white-space:nowrap;margin-top:2px}
.milestone .c{flex:1}
.milestone .c b{font-size:12.5px;color:#12314e;font-weight:600}
.milestone .c p{margin:3px 0 0;font-size:12px;color:var(--txt2);line-height:1.7}

/* 内景提示条 */
#indoor{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(255,255,255,.96);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:8px 12px;display:none;gap:10px;align-items:center;z-index:30}
#indoor.open{display:flex}
#indoor .flr{display:flex;gap:5px}
#toast{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);background:rgba(20,40,62,.92);color:#fff;font-size:12.5px;
  padding:9px 16px;border-radius:20px;opacity:0;transition:.25s;pointer-events:none;z-index:70}
#toast.on{opacity:1}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#eef2f7;z-index:65;font-size:13px;color:#48607a;flex-direction:column;gap:12px}
#loading .spin{width:34px;height:34px;border:3px solid #cfdcea;border-top-color:var(--brand);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (max-width:820px){
  #layers{width:170px} #minimap{width:170px} #drawer{width:min(94vw,390px)} #topbar h1{font-size:13px} #topbar .sub{display:none}
}