/* ===================================================================
 * 主题变量：默认浅色（清爽 / 科技感），可切换深色
 * 所有颜色都走变量，切换主题时无需改结构
 * ================================================================= */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#eaf1f9;
  --bg2:#f6fafe;
  --panel:#ffffff;
  --panel2:#f3f8fd;
  --line:#e0e9f4;
  --line2:#ccdaea;
  --txt:#16232f;
  --txt2:#4a5b6d;
  --muted:#8597a9;
  --accent:#2b7fe3;
  --accent2:#1868c9;
  --accent-soft:#e6f1fd;
  --ok:#12a37a;
  --warn:#bd7508;
  --shadow:0 8px 24px rgba(28,62,109,.13);
  --shadow-sm:0 2px 8px rgba(28,62,109,.09);
  --rowhover:#eef5fd;
  --rowsel:#cfe3fb;
  --chipbg:#edf4fc;
  --childbg:rgba(24,72,130,.028);
  --dash:rgba(20,60,110,.08);
  --swborder:rgba(20,50,90,.18);
  --glass:rgba(255,255,255,.84);
  --glassbd:#dde7f3;
  --tagbg:rgba(255,255,255,.95);
  --tagbd:#ccdaea;
  --tagtxt:#16232f;
  --dimtagbg:#f1f8ff;
  --dimtagbd:#a8c8ea;
  --dimtagtxt:#1d6cb4;
  --seltagbg:#e2effd;
  --seltagbd:#2b7fe3;
  --seltagtxt:#12539f;
  --tipbg:rgba(255,255,255,.98);
  --toastbg:#ffffff;
  --stage1:#ffffff;
  --stage2:#e8f1fb;
  --stage3:#dbe8f6;
  --top1:#ffffff;
  --top2:#f2f8fe;
  --brand:linear-gradient(92deg,#1868c9,#12a3b8 70%,#2b7fe3);
  --accent-line:linear-gradient(90deg,#57c7f5,#2b7fe3 42%,#7a6bff 78%,#57c7f5);
  --accent-glow:rgba(43,127,227,.16);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1620;
  --bg2:#141d29;
  --panel:#18222e;
  --panel2:#1f2b39;
  --line:#25323f;
  --line2:#35485c;
  --txt:#e8f1f9;
  --txt2:#a5b9ca;
  --muted:#73879e;
  --accent:#38a1e8;
  --accent2:#6ec8f7;
  --accent-soft:#16324a;
  --ok:#35c08e;
  --warn:#e0a530;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --rowhover:#1d2a38;
  --rowsel:#1c4165;
  --chipbg:#16283b;
  --childbg:rgba(140,200,255,.022);
  --dash:rgba(150,200,255,.07);
  --swborder:rgba(255,255,255,.16);
  --glass:rgba(23,33,45,.87);
  --glassbd:#2a3a4c;
  --tagbg:rgba(15,23,33,.9);
  --tagbd:#2f4054;
  --tagtxt:#dceaf7;
  --dimtagbg:rgba(13,25,39,.92);
  --dimtagbd:#2b5580;
  --dimtagtxt:#93cdff;
  --seltagbg:rgba(18,48,80,.94);
  --seltagbd:#38a1e8;
  --seltagtxt:#d6ecff;
  --tipbg:rgba(13,20,29,.96);
  --toastbg:#1a2634;
  --stage1:#1a2534;
  --stage2:#111a25;
  --stage3:#0b1219;
  --top1:#1a2532;
  --top2:#141d28;
  --brand:linear-gradient(92deg,#6ec8f7,#7de3c8 75%,#8fb6ff);
  --accent-line:linear-gradient(90deg,#3fd0f0,#38a1e8 45%,#8f7bff 80%,#3fd0f0);
  --accent-glow:rgba(56,161,232,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:13px/1.5 "Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
.mono{font-family:"Cascadia Mono",Consolas,"Courier New",monospace}

#app{display:flex;flex-direction:column;height:100vh}

/* ---------- 顶栏 ---------- */
#topbar{
  position:relative;
  display:flex;align-items:center;gap:14px;
  height:52px;padding:0 14px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--top1),var(--top2));
  border-bottom:1px solid var(--line);
}
/* 顶部一条渐变细线，科技感点缀 */
#topbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent-line);opacity:.9;
}
.brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;white-space:nowrap}
.brand svg{color:var(--accent)}
.brand span{
  background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.tb-actions{display:flex;gap:6px;flex:0 0 auto}

.btn{
  background:var(--panel);color:var(--txt);border:1px solid var(--line2);
  padding:6px 12px;border-radius:7px;cursor:pointer;font-size:12.5px;
  transition:.15s;font-family:inherit;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--panel2);border-color:var(--accent);color:var(--accent2)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,#3f92ee,#2374d6);border-color:#2578da;color:#fff;
  box-shadow:0 3px 12px rgba(43,127,227,.32);
}
.btn.primary:hover{background:linear-gradient(180deg,#4d9cf3,#2b7fe3);color:#fff}
.btn.ghost{background:transparent;color:var(--txt2);box-shadow:none}
.btn.ghost:hover{color:var(--accent2);border-color:var(--accent);background:var(--accent-soft)}
.btn.sm{padding:4px 10px;font-size:12px;border-radius:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tb-sep{width:1px;height:20px;background:var(--line2);flex:0 0 auto;margin:0 2px}

.file-chips{
  display:flex;gap:6px;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;
  padding:2px;scrollbar-width:thin;
}
.file-chips::-webkit-scrollbar{height:6px}
.file-chips::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.chip{
  display:flex;align-items:center;gap:6px;max-width:290px;
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:3px 6px 3px 10px;font-size:12px;white-space:nowrap;flex:0 0 auto;
  transition:.15s;opacity:.6;
}
/* .shown = 正在三维里显示（可多个并存）；.active = 当前主文件（左侧树/订单信息跟随它） */
.chip.shown{opacity:1;border-color:var(--accent);background:var(--accent-soft)}
.chip.active{box-shadow:0 0 0 2px var(--accent-glow)}
.chip .cname{overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:var(--txt2)}
.chip.shown .cname{color:var(--accent2);font-weight:600}
.chip.active .cname{font-weight:800}
.chip .eye,.chip .x{
  cursor:pointer;color:var(--muted);font-size:12px;padding:0 3px;user-select:none;flex:0 0 auto;
}
.chip .eye:hover,.chip .x:hover{color:var(--accent)}
.chip .eye.off{opacity:.45}
.chips-hint{
  flex:0 0 auto;align-self:center;font-size:11px;color:var(--muted);
  padding:0 6px;white-space:nowrap;user-select:none;
}

.tb-stats{display:flex;gap:14px;font-size:12px;color:var(--txt2);white-space:nowrap;flex:0 0 auto}
.tb-stats b{color:var(--accent2);font-weight:700}

/* ---------- 主体 ---------- */
#main{flex:1 1 auto;display:flex;min-height:0}
.panel{
  width:302px;flex:0 0 302px;background:var(--panel);
  display:flex;flex-direction:column;min-height:0;
}
#leftPanel{border-right:1px solid var(--line)}
#rightPanel{border-left:1px solid var(--line);width:322px;flex-basis:322px}

.sec{display:flex;flex-direction:column;border-bottom:1px solid var(--line);min-height:0}
.sec.grow{flex:1 1 auto}
.sec-title{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  font-size:12px;font-weight:600;color:var(--txt2);
  background:linear-gradient(180deg,var(--bg2),var(--panel));
  border-bottom:1px solid var(--line);
  letter-spacing:.4px;flex:0 0 auto;
}
.sec-title::before{
  content:"";width:3px;height:12px;border-radius:2px;flex:0 0 3px;
  background:var(--accent-line);
}
.badge{
  background:var(--accent-soft);color:var(--accent2);border-radius:9px;
  padding:0 7px;font-size:11px;font-weight:600;
}
.mini-btn{
  margin-left:auto;background:none;border:1px solid var(--line2);color:var(--muted);
  border-radius:5px;padding:1px 7px;font-size:11px;cursor:pointer;font-family:inherit;
  transition:.15s;
}
.mini-btn:hover{color:var(--accent2);border-color:var(--accent);background:var(--accent-soft)}

.empty-hint{padding:14px 12px;color:var(--muted);font-size:12px}

/* 订单信息 */
.info-grid{padding:8px 12px 10px;display:grid;grid-template-columns:74px 1fr;gap:3px 8px;font-size:12px;max-height:210px;overflow:auto}
.info-grid .k{color:var(--muted)}
.info-grid .v{color:var(--txt);word-break:break-all}

/* 树 */
.search-box{padding:6px 10px;border-bottom:1px solid var(--line);flex:0 0 auto}
.search-box input{
  width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);
  border-radius:6px;padding:5px 8px;font-size:12px;font-family:inherit;outline:none;transition:.15s;
}
.search-box input::placeholder{color:var(--muted)}
.search-box input:focus{border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 2px var(--accent-glow)}
.tree{flex:1 1 auto;overflow:auto;padding:4px 0 10px}
.tree::-webkit-scrollbar,.legend::-webkit-scrollbar,.detail::-webkit-scrollbar,.info-grid::-webkit-scrollbar{width:8px}
.tree::-webkit-scrollbar-thumb,.legend::-webkit-scrollbar-thumb,.detail::-webkit-scrollbar-thumb,.info-grid::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.tree::-webkit-scrollbar-track,.legend::-webkit-scrollbar-track,.detail::-webkit-scrollbar-track,.info-grid::-webkit-scrollbar-track{background:transparent}

.trow{
  display:flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;
  cursor:pointer;font-size:12px;line-height:1.45;position:relative;
}
.trow:hover{background:var(--rowhover)}
.trow.sel{background:var(--rowsel);box-shadow:inset 0 0 0 1px var(--accent-glow)}
.trow.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.trow.sel .nm{color:var(--accent2);font-weight:700}
.trow.sel .ln{color:var(--accent2);font-weight:700}
.trow.dim{opacity:.35}
.trow.hid .nm{opacity:.45;text-decoration:line-through}
.trow.hid .dot{opacity:.3}
.trow .tw{width:12px;flex:0 0 12px;color:var(--muted);font-size:9px;text-align:center;user-select:none}
.trow .dot{width:8px;height:8px;border-radius:2px;flex:0 0 8px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.trow .ln{
  color:var(--muted);font-family:Consolas,monospace;font-size:11px;
  flex:0 0 auto;min-width:26px;text-align:right;
}
.trow .nm{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow.root .nm{font-weight:600}
.trow .mt{
  color:var(--muted);font-size:11px;flex:0 1 auto;max-width:106px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:Consolas,"Courier New",monospace;
}
.trow .ve{cursor:pointer;color:var(--muted);font-size:11px;padding:0 2px}
.trow .ve:hover{color:var(--accent)}
.trow .ve.off{opacity:.4}
.trow .ve.shell{font-size:10px;opacity:.9}
.trow.child{background:var(--childbg)}
.trow.child .nm{font-size:11.5px;color:var(--txt2)}
.trow.child .tw{opacity:.7}

/* ---------- 3D 舞台 ---------- */
#stage{flex:1 1 auto;position:relative;min-width:0}
#canvasWrap{
  position:absolute;inset:0;
  background:radial-gradient(125% 95% at 50% 0%,var(--stage1) 0%,var(--stage2) 55%,var(--stage3) 100%);
}
#canvas{display:block;width:100%;height:100%}
#overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}

.stage-top{
  position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:12px;
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glassbd);border-radius:10px;padding:6px 10px;
  box-shadow:var(--shadow);flex-wrap:wrap;z-index:5;
}
.ctl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2)}
.ctl select{
  background:var(--panel);color:var(--txt);border:1px solid var(--line2);
  border-radius:6px;padding:3px 6px;font-family:inherit;font-size:12px;outline:none;cursor:pointer;
}
.ctl select:focus{border-color:var(--accent)}
.ctl input[type=range]{width:92px;accent-color:var(--accent);cursor:pointer}
.ctl.expl input[type=range]{width:104px}
.ctl.expl b{
  color:var(--accent2);font-size:11px;font-weight:700;min-width:32px;
  text-align:right;font-family:Consolas,monospace;
}
.chk{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--txt2);cursor:pointer}
.chk input{accent-color:var(--accent);margin:0;cursor:pointer}
.divider{width:1px;height:18px;background:var(--line2)}

.stage-side{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:4px;z-index:5;
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glassbd);border-radius:10px;padding:6px;box-shadow:var(--shadow);
}
.vbtn{
  width:38px;height:30px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--txt2);border-radius:6px;cursor:pointer;font-size:11px;font-family:inherit;
  transition:.15s;
}
.vbtn:hover{background:var(--accent-soft);color:var(--accent2);border-color:var(--accent)}
.vbtn.on{
  background:linear-gradient(180deg,#3f92ee,#2374d6);border-color:#2578da;color:#fff;
  box-shadow:0 2px 10px rgba(43,127,227,.35);
}
.vsep{height:1px;background:var(--line2);margin:3px 0}

.drop-hint{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--muted);z-index:4;pointer-events:none;
}
.drop-hint.hidden{display:none}
.drop-hint .btn{pointer-events:auto}
.dh-icon{color:var(--accent);opacity:.42}
.dh-title{font-size:16px;color:var(--txt2);font-weight:600}
.dh-sub{font-size:12px}

.hover-tip{
  position:absolute;pointer-events:none;z-index:6;display:none;
  background:var(--tipbg);border:1px solid var(--line2);border-radius:8px;
  padding:6px 10px;font-size:12px;box-shadow:var(--shadow);max-width:380px;
  backdrop-filter:blur(8px);
}
.hover-tip b{color:var(--accent2)}
.hover-tip .tt-h{font-weight:600;margin-bottom:3px;white-space:nowrap}
.hover-tip .tt-h b{margin-right:5px;font-family:Consolas,monospace}
.hover-tip .tt-r{display:flex;gap:6px;font-size:11.5px;line-height:1.65;white-space:nowrap}
.hover-tip .tt-r i{font-style:normal;color:var(--muted);flex:0 0 28px}
.hover-tip .tt-r span{color:var(--txt2);font-family:Consolas,monospace}

/* 3D 标注 */
.tag{
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  background:var(--tagbg);border:1px solid var(--tagbd);border-radius:6px;
  padding:2px 7px;font-size:11.5px;white-space:nowrap;color:var(--tagtxt);
  font-family:Consolas,monospace;box-shadow:var(--shadow-sm);
}
.tag.dim-tag{border-color:var(--dimtagbd);color:var(--dimtagtxt);background:var(--dimtagbg)}
.tag.sel-tag{
  border-color:var(--seltagbd);color:var(--seltagtxt);background:var(--seltagbg);
  font-family:inherit;box-shadow:0 2px 12px var(--accent-glow);
}

/* ---------- 详情 ---------- */
/* 详情区吃掉剩余高度；图例区按内容自适应，最多占 30%，超出则内部滚动 */
.detail-sec{flex:1 1 0;min-height:0}
#rightPanel .sec.grow{flex:0 1 auto;min-height:98px;max-height:30%}
.detail{padding:6px 0 10px;overflow:auto;flex:1 1 auto;min-height:0}
.d-none{padding:16px 12px;color:var(--muted);font-size:12px;text-align:center}
.d-head{padding:6px 12px 8px;border-bottom:1px solid var(--line)}
.d-head .t{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.d-head .s{font-size:11.5px;color:var(--muted);margin-top:2px;font-family:Consolas,monospace}
.kv{display:grid;grid-template-columns:82px 1fr;gap:1px 8px;padding:7px 12px;font-size:12px}
.kv .k{color:var(--muted)}
.kv .v{color:var(--txt);word-break:break-all;font-family:Consolas,monospace;font-size:11.5px}
.kv .v.hl{color:var(--accent2)}
/* 全部字段表 + 搜索 */
.field-bar{
  display:flex;align-items:center;gap:8px;padding:8px 12px 7px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel);position:sticky;top:0;z-index:3;
}
.field-bar input{
  flex:1 1 auto;min-width:0;background:var(--panel2);border:1px solid var(--line2);
  color:var(--txt);border-radius:6px;padding:4px 8px;font-size:11.5px;
  font-family:inherit;outline:none;transition:.15s;
}
.field-bar input::placeholder{color:var(--muted)}
.field-bar input:focus{border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 2px var(--accent-glow)}
.field-bar .fc{color:var(--muted);font-size:11px;flex:0 0 auto}
.field-list{padding:2px 12px 14px}
.frow{
  display:grid;grid-template-columns:45% 1fr;gap:8px;padding:2px 0;
  border-bottom:1px dashed var(--dash);
  font-family:Consolas,"Courier New",monospace;font-size:11px;line-height:1.55;
}
.frow .fk{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .fk em{
  font-style:normal;font-size:9px;color:var(--accent2);border:1px solid var(--line2);
  border-radius:3px;padding:0 2px;margin-right:4px;vertical-align:1px;
}
.frow .fv{color:var(--txt2);word-break:break-all}
.frow:hover{background:var(--rowhover)}

/* 图例 */
.legend{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 0 8px}
.lrow{
  display:flex;align-items:center;gap:8px;padding:2px 12px;cursor:pointer;font-size:11.5px;
}
.lrow:hover{background:var(--rowhover)}
.lrow.off{opacity:.38}
.lrow .sw{width:12px;height:12px;border-radius:3px;flex:0 0 12px;border:1px solid var(--swborder)}
.lrow .ln{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .cn{color:var(--muted);font-size:11px;font-family:Consolas,monospace}

/* ---------- 状态栏 ---------- */
#statusbar{
  height:24px;flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:0 12px;background:linear-gradient(180deg,var(--bg2),var(--panel));
  border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);
}
#statusbar .sp{flex:1 1 auto}
#axisInfo{color:var(--txt2)}

/* ---------- 其它 ---------- */
.toast{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(14px);
  background:var(--toastbg);border:1px solid var(--line2);color:var(--txt);
  padding:8px 16px;border-radius:9px;font-size:12.5px;box-shadow:var(--shadow);
  opacity:0;transition:.22s;pointer-events:none;z-index:99;max-width:70vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:#c0483f;color:#c0483f}

.drag-mask{
  position:fixed;inset:0;background:rgba(20,44,78,.55);z-index:98;display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(2px);
}
.drag-mask.show{display:flex}
.drag-mask div{
  border:2px dashed var(--accent);border-radius:16px;padding:44px 70px;
  font-size:17px;color:#fff;background:rgba(30,74,128,.55);
}

@media (max-width:1280px){
  .panel{width:250px;flex-basis:250px}
  #rightPanel{width:270px;flex-basis:270px}
  .ctl.expl input[type=range]{width:70px}
}