/* DroneForge · 深色玻璃拟态主题（与 RoboForge 同款视觉体系） */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 13px/1.5 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0b0e16; color: #c7d0e0; overflow: hidden;
}
#app { display: flex; flex-direction: column; height: 100vh; }

/* 顶栏 */
#topbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: linear-gradient(180deg, #141a28, #0e131f); border-bottom: 1px solid #1e2738;
}
.brand { font-weight: 700; font-size: 17px; color: #e8eefc; letter-spacing: .5px; }
.brand .sub { font-weight: 400; font-size: 11px; color: #6b7a93; margin-left: 8px; }
.tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tools label { color: #8a97ad; font-size: 12px; display: flex; align-items: center; gap: 4px; }
select, input[type="text"], input:not([type]), input[type="password"], input[type="number"], textarea {
  background: #0e1422; color: #d7e0f0; border: 1px solid #243047; border-radius: 7px;
  padding: 5px 8px; font-size: 12px; outline: none;
}
select:focus, input:focus, textarea:focus { border-color: #3b82f6; }
button {
  background: #1a2233; color: #cdd8ec; border: 1px solid #2a3850; border-radius: 7px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; transition: .15s;
}
button:hover { background: #232f45; border-color: #3b82f6; }
button.pri { background: #2563eb; border-color: #2563eb; color: #fff; }
button.pri:hover { background: #1d4ed8; }
button.dis { opacity: .5; cursor: not-allowed; }

/* 三栏主体 */
.body { flex: 1; display: grid; grid-template-columns: 264px 1fr 326px; min-height: 0; }
#sidebar { background: #0d121d; border-right: 1px solid #1a2233; display: flex; flex-direction: column; min-height: 0; }
#stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
#right { background: #0d121d; border-left: 1px solid #1a2233; display: flex; flex-direction: column; min-height: 0; }

/* 左侧配件库 */
.lib-head { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid #162033; }
.lib-head input { flex: 1; min-width: 0; }
.lib-custom-btn { white-space: nowrap; font-size: 11px; padding: 5px 8px; }
.lib-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-bottom: 1px solid #162033; }
.lib-filter label { font-size: 11px; color: #8a97ad; display: flex; align-items: center; gap: 4px; }
.lib-filter select { flex: 1; min-width: 80px; }
.lib-chk { display: flex; align-items: center; gap: 4px; }
.sec-title { padding: 8px 12px; font-size: 11px; color: #6b7a93; text-transform: uppercase; letter-spacing: .5px; }
#compList { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.grp { margin: 8px 4px 4px; font-size: 12px; color: #9fb0cc; font-weight: 600; }
.grp .cnt { color: #5e6e88; font-weight: 400; }
.ci { padding: 7px 9px; border: 1px solid #1a2233; border-radius: 8px; margin: 4px 0; cursor: grab; background: #111826; transition: .12s; }
.ci:hover { border-color: #3b82f6; background: #15203a; }
.ci:active { cursor: grabbing; }
.ci.dragging { opacity: .45; border-color: #38bdf8; }
.ci .meta { display: block; font-size: 11px; color: #6b7a93; margin-top: 2px; }
#view.dropok { outline: 2px dashed #38bdf8; outline-offset: -6px; }
.vend { font-size: 10px; color: #f5a623; border: 1px solid #5a4410; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.empty { color: #5e6e88; padding: 12px; text-align: center; }
.dim { color: #5e6e88; font-size: 11px; }

/* 中央视口 + 悬浮仿真面板 */
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #0b0e16; }
#hud {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(10,14,22,.82); border: 1px solid #243047; border-radius: 8px;
  padding: 6px 14px; color: #e8eefc; font-size: 12px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5;
}
.view-bar {
  position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; z-index: 4;
}
.badge { background: rgba(10,14,22,.7); border: 1px solid #243047; border-radius: 6px; padding: 3px 8px; font-size: 11px; color: #9fb0cc; }
.badge.l0 { color: #6b7a93; }
.vtools { margin-left: auto; display: flex; gap: 6px; }
.vtools button { padding: 4px 9px; font-size: 11px; }
.vtools button.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.sim-panel {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6;
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  background: rgba(13,18,28,.52);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  padding: 0; max-height: 60%; overflow: hidden;
  transition: background .2s;
}
.sim-panel:hover { background: rgba(13,18,28,.92); }
.sim-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.sim-body { padding: 0 10px 10px; overflow-y: auto; max-height: calc(60vh - 46px); }
.sim-panel.min .sim-body { display: none; }
.sim-panel.min .sim-prog { display: none; }
.sim-toggle { margin-left: auto; padding: 3px 9px; font-size: 12px; }
.sim-mini { margin-left: 10px; font-size: 12px; color: #cfe0ff; display: none; white-space: nowrap; }
.sim-panel.min .sim-mini { display: inline; }
.sim-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.sim-lbl { color: #9fb0cc; font-size: 12px; }
.sim-prog { flex: 1; min-width: 80px; height: 6px; background: #1a2233; border-radius: 4px; overflow: hidden; }
.sim-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3b82f6, #38bdf8); }
.sim-row.stats { position: relative; padding-right: 30px; }
.sim-stat { background: #111826; border: 1px solid #1a2233; border-radius: 7px; padding: 4px 9px; font-size: 11px; color: #8a97ad; min-width: 56px; text-align: center; }
.sim-stat b { display: block; color: #e8eefc; font-size: 13px; margin-top: 1px; }
.sim-stat.opt { background: #0e1422; }
.stat-toggle { position: absolute; top: 2px; right: 2px; padding: 2px 7px; font-size: 11px; }
.sim-stats-mini { display: none; width: 100%; margin-top: 6px; font-size: 12px; color: #cfe0ff; }
.sim-row.stats.collapsed .sim-stat { display: none; }
.sim-row.stats.collapsed .sim-stats-mini { display: inline-block; }
.traj-wrap { margin: 6px 0 8px; }
.traj-title { font-size: 11px; color: #6b7a93; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.traj-tools { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #9fb0cc; }
.mini-btn { padding: 2px 8px; font-size: 11px; }
#traj { width: 100%; display: block; border: 1px solid #1a2233; border-radius: 8px; background: #0c1018; cursor: grab; }
#traj:active { cursor: grabbing; }
.sim-log { font-size: 11px; color: #9fb0cc; max-height: 84px; overflow-y: auto; border-top: 1px dashed #1a2233; padding-top: 6px; }
.sim-log div { padding: 1px 0; }

/* 右侧分层面板 */
.rtabs { display: flex; border-bottom: 1px solid #1a2233; background: #0e1422; }
.rtabs button { flex: 1; border: none; border-radius: 0; background: transparent; color: #8a97ad; padding: 9px 4px; font-size: 12px; border-bottom: 2px solid transparent; }
.rtabs button.on { color: #e8eefc; border-bottom-color: #2563eb; background: #111826; }
.rbody { flex: 1; overflow-y: auto; padding: 12px; }
.card { background: #111826; border: 1px solid #1a2233; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.card h4 { margin: 0 0 10px; font-size: 13px; color: #d7e0f0; display: flex; align-items: center; gap: 8px; }
.tag { font-size: 10px; color: #38bdf8; border: 1px solid #134e6e; border-radius: 4px; padding: 1px 6px; font-weight: 400; }
.big { font-size: 30px; font-weight: 700; color: #e8eefc; }
.big small { font-size: 12px; color: #6b7a93; font-weight: 400; margin-left: 6px; }
.bar { height: 8px; background: #1a2233; border-radius: 5px; overflow: hidden; margin-top: 8px; }
.bar i.ok { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #38bdf8); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.kv dt { color: #8a97ad; }
.kv dd { margin: 0; color: #e8eefc; text-align: right; }
.issue { border-radius: 7px; padding: 7px 9px; margin-bottom: 6px; border: 1px solid #2a3850; background: #0e1422; }
.issue b { display: inline-block; margin-right: 6px; }
.issue.err { border-color: #7f1d1d; }
.issue.warn { border-color: #78531a; }
.issue.ok { border-color: #14532d; }
.issue.err b { color: #f87171; } .issue.warn b { color: #fbbf24; } .issue.ok b { color: #4ade80; }

/* 结构树 */
.tree { font-size: 12px; }
.tnode { margin: 2px 0; }
.trow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #111826; border: 1px solid #1a2233; border-radius: 7px; }
.tkids { margin-left: 16px; border-left: 1px dashed #243047; padding-left: 8px; }
.sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tnm { color: #e8eefc; }
.tmeta { margin-left: auto; color: #6b7a93; font-size: 11px; }
.rm { margin-left: 8px; padding: 2px 7px; font-size: 11px; background: #2a1620; border-color: #5a2a3a; color: #f0a0b0; }
.rm:hover { background: #3a1c2c; }

/* 兼容 */
.cnode { border: 1px solid #1a2233; border-radius: 8px; padding: 8px; margin-bottom: 8px; background: #0e1422; }
.cnhead { font-size: 12px; color: #9fb0cc; margin-bottom: 6px; }
.cport { display: flex; align-items: center; gap: 8px; margin: 5px 0; flex-wrap: wrap; }
.cpname { font-size: 12px; color: #e8eefc; }
.cpname small { color: #6b7a93; font-size: 10px; }
.cpcomps { display: flex; flex-wrap: wrap; gap: 4px; }
.cbtn { font-size: 11px; padding: 3px 8px; background: #16243a; border-color: #2a3f5c; }

/* 任务卡片 */
.cards { display: flex; flex-direction: column; gap: 10px; }
.tcard { background: #111826; border: 1px solid #1a2233; border-radius: 10px; padding: 11px; }
.tch { font-size: 13px; color: #e8eefc; font-weight: 600; }
.tcd { font-size: 11px; color: #8a97ad; margin: 4px 0; }
.tcs { font-size: 11px; color: #6b7a93; margin-bottom: 8px; }
.tbtn { width: 100%; background: #16243a; border-color: #2a3f5c; }

/* 实验对比 */
.labtab { width: 100%; border-collapse: collapse; font-size: 11px; }
.labtab th { color: #6b7a93; text-align: right; padding: 4px 5px; border-bottom: 1px solid #243047; font-weight: 500; }
.labtab td { color: #d7e0f0; text-align: right; padding: 4px 5px; border-bottom: 1px solid #162033; }
.labtab td:first-child, .labtab th:first-child { text-align: left; }
.bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 11px; }
.bar-row .bl { width: 96px; color: #9fb0cc; flex: none; }
.bar-row .bb { flex: 1; height: 8px; background: #1a2233; border-radius: 4px; overflow: hidden; }
.bar-row .bb i { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #38bdf8); }
.bar-row .bv { width: 48px; text-align: right; color: #e8eefc; }
.sl { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: #9fb0cc; }
.sl input[type="range"] { flex: 1; }
.brow { font-size: 11px; color: #8a97ad; padding: 2px 0; }

/* 撞击 / 失败诊断 */
.diag-card { border-color: #3a2436; background: linear-gradient(180deg, #1a1420, #121826); }
.diag-card h4 { color: #ffd7cf; }
.diag-sum { font-size: 12px; color: #cbd5e8; line-height: 1.6; margin: 0 0 10px; }
.diag-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.diag-facts .df { background: #0e1422; border: 1px solid #1f2a3d; border-radius: 7px; padding: 5px 8px; font-size: 11px; }
.diag-facts .df i { display: block; color: #6b7a93; font-style: normal; font-size: 10px; }
.diag-facts .df b { color: #e8eefc; font-weight: 600; }
.diag-cause { background: #0f1523; border: 1px solid #1f2a3d; border-left: 3px solid #f59e0b; border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; }
.diag-cause b { display: block; font-size: 12px; color: #e8eefc; margin: 4px 0 3px; }
.diag-cause p { margin: 0; font-size: 11px; color: #9fb0cc; line-height: 1.6; }
.diag-cause .tag { margin-right: 6px; color: #fbbf24; border-color: #6b4a12; }
.diag-cause .tag.t-规划 { color: #fbbf24; border-color: #6b4a12; }
.diag-cause .tag.t-抗风 { color: #7dd3fc; border-color: #1a4b63; }
.diag-cause .tag.t-定位 { color: #a78bfa; border-color: #3d2f6b; }
.diag-cause .tag.t-感知 { color: #fca5a5; border-color: #6b2323; }
.diag-card h5 { margin: 12px 0 8px; font-size: 12px; color: #9fb0cc; font-weight: 600; }
.diag-rem { background: #0e1422; border: 1px solid #1f2a3d; border-left: 3px solid #22c55e; border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; }
.diag-rem.dis { border-left-color: #64748b; opacity: .72; }
.diag-rem b { display: block; font-size: 12px; color: #e8eefc; }
.diag-rem p { margin: 3px 0 8px; font-size: 11px; color: #9fb0cc; line-height: 1.6; }

/* 底部汇总 */
#foot { display: flex; gap: 18px; align-items: center; padding: 8px 16px; background: #0e131f; border-top: 1px solid #1e2738; font-size: 12px; color: #8a97ad; }
#foot b { color: #e8eefc; }
#foot .sp { margin-left: auto; color: #6b7a93; }

/* 弹窗 */
.modal { position: fixed; inset: 0; background: rgba(4,7,12,.66); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal.hidden { display: none; }
.modal-box { width: 560px; max-width: 92vw; max-height: 86vh; overflow-y: auto; background: #111826; border: 1px solid #243047; border-radius: 12px; padding: 16px; }
.tabs { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #243047; padding-bottom: 10px; margin-bottom: 12px; }
.tabs button { background: transparent; border: none; color: #8a97ad; padding: 6px 12px; border-radius: 7px; }
.tabs button.active { background: #1d4ed8; color: #fff; }
.tab-title { font-size: 14px; color: #e8eefc; font-weight: 600; }
.close { margin-left: auto; cursor: pointer; color: #8a97ad; padding: 2px 8px; border-radius: 6px; }
.close:hover { background: #232f45; }
.tab-pane.hidden { display: none; }
.pane p, .tab-pane p { color: #8a97ad; font-size: 12px; }
.modal-box textarea { width: 100%; min-height: 120px; font-family: monospace; font-size: 11px; margin: 8px 0; }
.modal-box pre { background: #0b0f18; border: 1px solid #1a2233; border-radius: 7px; padding: 8px; font-size: 11px; color: #9fb0cc; white-space: pre-wrap; max-height: 160px; overflow-y: auto; }
.ck { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9fb0cc; margin: 8px 0; }
.pack-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: #0e1422; border: 1px solid #1a2233; border-radius: 8px; margin-bottom: 6px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.form-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #8a97ad; }

/* 云端面板（XCompute 提交 / L0 vs L1 对照） */
.sl input, .sl select { flex: 1; min-width: 0; }
.card h5 { margin: 10px 0 6px; font-size: 11px; color: #8a97ad; font-weight: 600; }
.cftab td, .cftab th { text-align: left; vertical-align: top; }
.cftab td:first-child, .cftab th:first-child { white-space: nowrap; color: #9fb0cc; }
.cftab td:last-child { white-space: nowrap; }
.cfnote td { color: #5e6e88; font-size: 10.5px; padding-top: 0; border-bottom: 1px solid #162033; }
.brow .tbtn { width: auto; display: inline-block; margin-left: 6px; padding: 2px 8px; }
.brow { display: flex; align-items: center; }

/* 场景编辑器 / 配件库 */
.edrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.edrow .mini { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: #8a97ad; }
.edrow .mini input { width: 58px; padding: 3px 5px; font-size: 11px; }
.editem { border: 1px solid #1a2233; border-radius: 7px; padding: 5px 7px; margin-bottom: 5px; background: #0e1422; }
.editem.sel { border-color: #fbbf24; background: #171b12; }
.edidx { font-size: 10.5px; color: #9fb0cc; min-width: 26px; }
.scbtns { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.scbtns .tbtn { width: auto; padding: 4px 10px; font-size: 11px; }
.vtools label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #8a97ad; }
.vtools select { padding: 3px 6px; font-size: 11px; }
.tggrid { display: flex; flex-wrap: wrap; gap: 5px; }
.tgchip { font-size: 10.5px; color: #9fb0cc; background: #0e1422; border: 1px solid #1a2233; border-radius: 6px; padding: 3px 7px; }
.tgchip b { color: #e2e8f0; margin-left: 3px; }
.tgchip.zero { opacity: 0.45; }
.liblist { max-height: 320px; overflow-y: auto; margin-top: 8px; }
.librow { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid #1a2233; border-radius: 7px; margin-bottom: 5px; background: #0e1422; }
.librow .lname { flex: 1; font-size: 11.5px; color: #d7e0f0; display: flex; flex-direction: column; }
.librow .lname small { color: #6f7f99; font-size: 10px; }
#libQ, #libTg { margin-top: 6px; }
#libQ { width: 100%; }

/* 模型导出 / 能力护照 */
.note { background: #0e1422; border: 1px solid #1a2233; border-left: 3px solid #38bdf8; padding: 8px 10px; border-radius: 6px; font-size: 11.5px; color: #9fb0cc; margin: 8px 0; line-height: 1.6; }
.note b { color: #d7e0f0; }
#exCode { white-space: pre; overflow: auto; font-family: Consolas, Menlo, monospace; font-size: 10.5px; line-height: 1.5; }
#reportBox { background: #0d121d; color: #d7e0f0; }
#reportBox h3, #reportBox h4 { color: #e8eefc; }
#reportBox .card { background: #111826; border-color: #1a2233; }
#reportBox svg { display: block; margin: 0 auto; }
#reportBox .labtab td, #reportBox .labtab th { font-size: 11px; }

/* 云端 · 登录态 */
#cfLoginRow { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; padding: 7px 10px; border-radius: 7px; font-size: 12px; }
.cf-logged { background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.35); }
.cf-nologin { background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.35); }
.cf-stat { font-weight: 600; }
.cf-stat.ok { color: #4ade80; }
.cf-stat.no { color: #f87171; }
#cfLoginRow #cfLogin { margin: 0; padding: 5px 12px; font-size: 12px; }
#cfLogin { background: #2563eb; border-color: #2563eb; }
#cfLogin:hover { background: #1d4ed8; }