/* 大屏驾驶舱样式：深蓝科技风（参考行业大屏：图2 顶栏 + 图3 蓝色线框氛围）
   四角面板默认收起（body 无 .panels-on），点击「驾驶舱面板」按钮滑出 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #e6eef8;
  background: radial-gradient(ellipse at 50% 42%, #1d3a5f 0%, #132841 60%, #0f2033 100%);
}

/* ---- 中央 3D 场景 ---- */
#scene { position: absolute; inset: 0; z-index: 0; }
#scene canvas { display: block; }
.loading3d {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #5f7f9f; font-size: 14px; letter-spacing: 2px;
}

/* ---- 顶部两行：1) 平台名独占一行（居中发光） 2) 导航按钮另起一行（可继续加，自动换行） ---- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 6px 0 0;
  background: linear-gradient(180deg, rgba(18, 42, 72, .94), rgba(20, 46, 76, .52) 72%, transparent);
  border-bottom: 1px solid rgba(96, 186, 255, .22);
}
#titleRow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 6px 20px 2px;
}
#title {
  font-size: 25px; letter-spacing: 7px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 30%, #8fdcff 78%, #46a8ec);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 26px rgba(96, 200, 255, .45);
}
.tline { flex: 0 1 190px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(96, 200, 255, .8)); }
.tline.right { background: linear-gradient(270deg, transparent, rgba(96, 200, 255, .8)); }

#navRow {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  padding: 6px 20px 12px;
}
.navbtn {
  cursor: pointer; font-size: 13px; letter-spacing: 1px; color: #cfe4fa;
  padding: 7px 18px; border-radius: 16px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(46, 104, 176, .32), rgba(24, 60, 108, .32));
  border: 1px solid rgba(96, 200, 255, .34);
  transition: all .15s;
}
.navbtn:hover { color: #fff; border-color: rgba(96, 200, 255, .85); box-shadow: 0 0 10px rgba(79, 195, 255, .38); }
.navbtn.active {
  color: #fff; border-color: #5fc8ff; background: linear-gradient(180deg, #2a7de0, #1a559f);
  box-shadow: 0 0 12px rgba(79, 195, 255, .55);
}

/* ---- 仿真数据角标 ---- */
#simBadge {
  position: absolute; top: 104px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-size: 12px; letter-spacing: 3px; color: #ffd166; padding: 3px 18px;
  border: 1px dashed rgba(255, 209, 102, .6); border-radius: 12px;
  background: rgba(60, 42, 8, .45);
}
#simBadge.hidden { display: none; }

/* ---- 四角面板（默认收起：随 body.panels-on 滑入） ---- */
.panel {
  position: absolute; z-index: 4; width: 322px;
  background: linear-gradient(160deg, rgba(26, 56, 92, .88), rgba(18, 40, 66, .76));
  border: 1px solid rgba(88, 172, 255, .34);
  border-radius: 6px; padding: 12px 14px;
  box-shadow: 0 0 22px rgba(24, 92, 170, .3), inset 0 0 30px rgba(36, 100, 180, .12);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
body.panels-on .panel { opacity: 1; pointer-events: auto; }
.panel::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px;
  border-left: 2px solid #4fc3ff; border-top: 2px solid #4fc3ff; border-radius: 6px 0 0 0;
}
.panel::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px;
  border-right: 2px solid #4fc3ff; border-bottom: 2px solid #4fc3ff; border-radius: 0 0 6px 0;
}
.tl { left: 16px; top: 132px; transform: translateX(-24px); }
.tr { right: 16px; top: 132px; transform: translateX(24px); }
.bl { left: 16px; bottom: 92px; transform: translateX(-24px); }
.br { right: 16px; bottom: 92px; transform: translateX(24px); }
body.panels-on .tl, body.panels-on .tr,
body.panels-on .bl, body.panels-on .br { transform: translateX(0); }
.panel h2 {
  font-size: 14px; color: #4fc3ff; letter-spacing: 2px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.panel h2 i {
  width: 4px; height: 14px; background: #4fc3ff; border-radius: 1px;
  box-shadow: 0 0 8px rgba(79, 195, 255, .8);
}
.panel h2 .cnt { margin-left: auto; font-size: 12px; color: #9db8d4; }
.dim { color: #6e8bab; font-size: 12px; }
.small { margin-top: 6px; font-size: 11px; }

/* 项目基本信息 */
.kv p { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; }
.kv p + p { border-top: 1px dashed rgba(64, 156, 255, .18); }
.kv b { color: #eaf6ff; font-weight: 500; text-align: right; max-width: 200px; word-break: break-all; }
.kv.slim { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(64, 156, 255, .18); }

/* 整改闭环态势 */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stat-grid .cell { text-align: center; padding: 8px 0; background: rgba(30, 80, 150, .18); border-radius: 4px; }
.stat-grid .num { font-size: 22px; font-weight: 700; color: #eaf6ff; font-family: Consolas, monospace; }
.stat-grid .lab { font-size: 11px; color: #8fb3d9; margin-top: 2px; }
.stat-grid .c-wait .num { color: #ff7f2a; }
.stat-grid .c-doing .num { color: #ffd166; }
.stat-grid .c-done .num { color: #4ade80; }
.stat-grid .c-sev .num { color: #ff5d5d; }

/* L2 类目横条 */
.catbar { margin: 6px 0; }
.catbar .row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.catbar .lab { width: 92px; color: #9db8d4; white-space: nowrap; }
.catbar .bar { flex: 1; height: 8px; background: rgba(30, 80, 150, .25); border-radius: 4px; overflow: hidden; }
.catbar .fill { height: 100%; background: linear-gradient(90deg, #1e6fd9, #4fc3ff); border-radius: 4px; }
.catbar .val { width: 34px; text-align: right; color: #cfe7ff; font-family: Consolas, monospace; }

/* 最新问题列表 */
#issueList { max-height: 190px; overflow-y: auto; }
#issueList::-webkit-scrollbar { width: 4px; }
#issueList::-webkit-scrollbar-thumb { background: rgba(79, 195, 255, .4); border-radius: 2px; }
.issue-row {
  padding: 7px 8px; margin-bottom: 6px; cursor: pointer; border-radius: 4px;
  background: rgba(30, 80, 150, .14); border-left: 3px solid #ff7f2a;
  font-size: 12px; line-height: 1.5;
}
.issue-row:hover { background: rgba(79, 195, 255, .12); }
.issue-row .st { color: #ffd166; margin-right: 6px; }
.issue-row.done { border-left-color: #4ade80; }
.issue-row.done .st { color: #4ade80; }
.issue-row .t { color: #eaf6ff; display: block; }

/* ---- 底部楼栋切换条（3D 分级查看快捷键） ---- */
#bldBar {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 10px; padding: 8px 14px;
  background: linear-gradient(180deg, rgba(28, 58, 94, .88), rgba(20, 44, 72, .78));
  border: 1px solid rgba(96, 186, 255, .38); border-radius: 8px;
  box-shadow: 0 4px 18px rgba(10, 30, 55, .35);
}
#bldBar .bldbtn {
  cursor: pointer; font-size: 13px; letter-spacing: 2px; color: #d3e6fa;
  padding: 6px 18px; border-radius: 4px; border: 1px solid rgba(96, 200, 255, .34);
  background: rgba(40, 92, 152, .22); transition: all .15s;
}
#bldBar .bldbtn:hover { color: #fff; border-color: rgba(96, 200, 255, .8); }
#bldBar .bldbtn.active {
  color: #fff; border-color: #5fc8ff; background: linear-gradient(180deg, #2a7de0, #1a559f);
  box-shadow: 0 0 12px rgba(79, 195, 255, .5);
}
/* 模型来源切换（仿真工地 / 真实图纸模型）：与楼栋按钮同排，用琥珀色区分 */
#bldBar .bldbtn.mdl {
  color: #ffe0a8; border-color: rgba(255, 186, 96, .45); background: rgba(120, 78, 20, .28);
  letter-spacing: 1px;
}
#bldBar .bldbtn.mdl:hover { color: #fff; border-color: rgba(255, 200, 120, .9); }
#bldBar .bldbtn.mdl.active {
  color: #fff; border-color: #ffb84d; background: linear-gradient(180deg, #d98a1f, #a35f10);
  box-shadow: 0 0 12px rgba(255, 178, 77, .5);
}
#bldBar .sep { width: 1px; align-self: stretch; background: rgba(96, 186, 255, .3); margin: 0 2px; }

/* 底部状态条 */
#statusbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 30px;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  font-size: 12px; color: #8fb3d9;
  background: linear-gradient(0deg, rgba(10, 24, 44, .9), transparent);
}
#clock { margin-left: auto; }
#clock #timeText { margin-left: 10px; font-size: 14px; color: #cfe7ff; font-family: Consolas, monospace; }

/* 弹层 */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(4, 10, 20, .6); display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-box {
  width: 460px; max-height: 70vh; overflow-y: auto; padding: 18px 20px;
  background: linear-gradient(160deg, #10263f, #0b1a2e);
  border: 1px solid rgba(79, 195, 255, .5); border-radius: 8px;
  box-shadow: 0 0 40px rgba(20, 100, 200, .4);
}
.modal-box h3 { color: #4fc3ff; font-size: 15px; margin-bottom: 10px; letter-spacing: 1px; }
.modal-body-line { font-size: 13px; padding: 5px 0; border-bottom: 1px dashed rgba(64, 156, 255, .2); line-height: 1.6; }
.modal-body-line .k { color: #8fb3d9; margin-right: 8px; }
#modalClose {
  margin-top: 14px; padding: 6px 22px; cursor: pointer;
  color: #cfe7ff; background: rgba(79, 195, 255, .12);
  border: 1px solid rgba(79, 195, 255, .5); border-radius: 4px;
}
#modalClose:hover { background: rgba(79, 195, 255, .25); }

/* 窄屏：面板收缩（大屏优先，兼容笔记本 1366 宽） */
@media (max-width: 1280px) {
  .panel { width: 270px; }
  #title { font-size: 19px; letter-spacing: 4px; }
  .tline { flex-basis: 80px; }
  #navRight { min-width: 0; }
}