:root{
  --bg:#05070b; --panel:rgba(9,14,21,.72); --line:rgba(120,180,220,.16);
  --txt:#c8d6e4; --dim:#6b8199; --cy:#5ad1ff; --am:#ffb257; --hot:#ff6a3d;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);}
body{font-family:"Segoe UI",-apple-system,"Microsoft YaHei",system-ui,sans-serif;color:var(--txt);-webkit-font-smoothing:antialiased;}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}
#vignette{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%);}
.panel{position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.45);}
.panel-hd{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;
  font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.panel-body{overflow:auto;scrollbar-width:thin;scrollbar-color:#2a3b4d transparent}
.panel-body::-webkit-scrollbar{width:6px}
.panel-body::-webkit-scrollbar-thumb{background:#233241;border-radius:3px}

#brand{position:fixed;left:22px;top:18px;z-index:5;pointer-events:none}
#brand .mark{font-size:22px;font-weight:700;letter-spacing:.22em;color:#eaf4ff;
  text-shadow:0 0 24px rgba(90,209,255,.35)}
#brand .mark span{color:var(--cy)}
#brand .sub{margin-top:5px;font-size:9.5px;letter-spacing:.26em;color:var(--dim)}

#viewbtns{position:fixed;right:22px;top:20px;display:flex;gap:8px;z-index:6}
button{font:inherit;font-size:12px;letter-spacing:.06em;color:var(--txt);cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;
  padding:7px 12px;transition:.18s;backdrop-filter:blur(8px)}
button:hover{background:rgba(90,209,255,.12);border-color:rgba(90,209,255,.45);color:#dff3ff}
button.on{border-color:rgba(90,209,255,.5);color:var(--cy);background:rgba(90,209,255,.1)}
button.primary{background:rgba(90,209,255,.16);border-color:rgba(90,209,255,.5);color:#d8f2ff}

#parts{left:22px;top:92px;width:252px;bottom:152px;display:flex;flex-direction:column}
#parts .panel-body{flex:1;padding:6px 0 12px}
.grp{padding:10px 14px 4px;font-size:9.5px;letter-spacing:.2em;color:#4d6478;text-transform:uppercase}
.item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12.5px;color:#9fb4c7;
  cursor:pointer;border-left:2px solid transparent;transition:.14s}
.item:hover{background:rgba(90,209,255,.07);color:#d6ecff}
.item.sel{background:rgba(90,209,255,.13);border-left-color:var(--cy);color:#eaf7ff}
.item .dot{width:5px;height:5px;border-radius:50%;background:#31465a;flex:none}
.item.sel .dot{background:var(--cy);box-shadow:0 0 8px var(--cy)}
.item.out .dot{background:var(--am)}
.item.lock{opacity:.5;cursor:default}
.item .idx{margin-left:auto;font-size:9.5px;color:#3f5468;font-variant-numeric:tabular-nums}

#dossier{right:22px;top:92px;width:318px;bottom:152px;display:flex;flex-direction:column}
#dossier .panel-body{flex:1;padding:16px}
#dEmpty .empty-box{margin-top:60px;text-align:center;font-size:12px;line-height:2.2;color:#41586b}
#dEmpty em{color:#2c3b49;font-style:normal}
.hide{display:none!important}
#dTitle{font-size:16px;font-weight:600;color:#eaf7ff;letter-spacing:.02em}
#dEn{font-size:9.5px;letter-spacing:.14em;color:#4d6478;margin-top:4px;text-transform:uppercase}
#dChips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.chip{font-size:9.5px;letter-spacing:.08em;padding:3px 7px;border-radius:4px;
  border:1px solid rgba(90,209,255,.24);color:#7fc6e8;background:rgba(90,209,255,.07)}
.chip.warn{border-color:rgba(255,178,87,.3);color:var(--am);background:rgba(255,178,87,.07)}
.sect{margin-top:16px;font-size:9.5px;letter-spacing:.2em;color:#47606f;text-transform:uppercase;
  border-bottom:1px solid rgba(120,180,220,.1);padding-bottom:5px}
table#dSpec{width:100%;border-collapse:collapse;margin-top:8px}
#dSpec td{font-size:11.5px;padding:4px 0;color:#9db2c4;vertical-align:top}
#dSpec td:first-child{color:#5c7285;width:46%}
#dSpec td:last-child{text-align:right;color:#cfe2f0;font-variant-numeric:tabular-nums}
.desc{font-size:12px;line-height:1.85;color:#93a9bb;margin-top:8px}
.notes{margin:8px 0 0 14px;font-size:11.5px;line-height:1.8;color:#8298aa}
.notes li{margin-bottom:3px}
.torque{font-size:11.5px;color:#9db2c4;margin-top:8px;line-height:1.7;
  padding:8px 10px;border-left:2px solid rgba(255,178,87,.45);background:rgba(255,178,87,.05)}
.acts{display:flex;gap:8px;margin-top:20px}
.acts button{flex:1;padding:8px 0}

#hud{position:fixed;left:22px;right:22px;bottom:18px;height:112px;display:flex;
  align-items:center;gap:28px;padding:0 22px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.tele{display:flex;gap:30px;flex:1}
.tele .row{display:flex;align-items:baseline;gap:5px;position:relative;min-width:86px}
.tele .k{font-size:9.5px;letter-spacing:.18em;color:#4f6678;width:30px}
.tele b{font-size:19px;font-weight:500;color:#dceefb;font-variant-numeric:tabular-nums;
  min-width:52px;text-align:right;text-shadow:0 0 18px rgba(90,209,255,.18)}
.tele .u{font-size:9.5px;color:#4f6678}
.tele .bar{position:absolute;left:0;right:0;bottom:-9px;height:2px;background:rgba(255,255,255,.06);border-radius:2px}
.tele .bar i{display:block;height:100%;width:0%;background:var(--cy);border-radius:2px;
  box-shadow:0 0 8px rgba(90,209,255,.7);transition:width .12s linear}
.tele .bar.hot i{background:var(--hot);box-shadow:0 0 8px rgba(255,106,61,.7)}

.ctl{display:flex;align-items:center;gap:14px}
.start{width:74px;padding:9px 0;font-size:12px;letter-spacing:.14em;font-weight:600;
  border-color:rgba(255,106,61,.4);color:#ffb59a;background:rgba(255,106,61,.1)}
.start.run{border-color:rgba(90,209,255,.45);color:var(--cy);background:rgba(90,209,255,.1)}
.slider{display:flex;flex-direction:column;gap:5px;font-size:9.5px;letter-spacing:.16em;color:#4f6678}
.slider input{-webkit-appearance:none;width:118px;height:2px;background:rgba(255,255,255,.12);
  border-radius:2px;outline:none}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:var(--cy);box-shadow:0 0 10px rgba(90,209,255,.8);cursor:pointer}
.slider input::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:var(--cy)}

#hint{position:fixed;left:50%;bottom:140px;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.16em;color:#3b4f60;pointer-events:none;transition:opacity .6s}

#loading{position:fixed;inset:0;background:#05070b;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;z-index:50;transition:opacity .7s}
#loading .t{font-size:11px;letter-spacing:.3em;color:#3f5468}
#loading .ring{width:44px;height:44px;border:1px solid rgba(90,209,255,.15);
  border-top-color:var(--cy);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading.done{opacity:0;pointer-events:none}


#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
#labellines{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
#labellines line{stroke:rgba(90,209,255,.5);stroke-width:1;transition:opacity .2s}
.lbl-dot{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .2s}
.lbl-dot::after{content:'';position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;
  background:#5ad1ff;box-shadow:0 0 9px rgba(90,209,255,.95)}
.lbl-txt{position:absolute;left:0;top:0;font-size:10.5px;letter-spacing:.06em;color:#cdeaff;
  white-space:nowrap;pointer-events:auto;cursor:pointer;opacity:0;transition:opacity .18s,color .18s;
  padding:1px 6px;border-radius:3px;background:rgba(4,9,15,.62);
  text-shadow:0 0 8px rgba(0,0,0,.9)}
.lbl-txt.hot{color:#ffffff;background:rgba(20,120,180,.92);
  box-shadow:0 0 14px rgba(90,209,255,.65);opacity:1!important}
body.clay .lbl-txt{color:#20384a;background:rgba(255,255,255,.72);text-shadow:none}
body.labels-on .panel{opacity:0;pointer-events:none}
body.labels-on #labels,body.labels-on #labellines{z-index:40}
#hud,.panel{transition:opacity .3s}
body.clay #labellines line{stroke:rgba(30,60,80,.55)}
#mtabs{display:none}

#mdetail{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;
  background:linear-gradient(180deg,#060a10 0%,#0a121b 60%,#070c12 100%)}
@media (max-width:820px){
  #mdetail.show{display:flex}
}
.md-hd{display:flex;align-items:center;gap:10px;padding:14px 12px;border-bottom:1px solid var(--line)}
.md-hd button{width:38px;height:34px;padding:0;font-size:15px;line-height:1}
.md-title{flex:1;min-width:0}
.md-title b{display:block;font-size:16px;color:#eaf7ff;font-weight:600}
.md-title span{display:block;margin-top:3px;font-size:9px;letter-spacing:.14em;color:#4d6478;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-body{flex:1;overflow:auto;padding:16px 16px 24px;-webkit-overflow-scrolling:touch}
.md-body .sect{margin-top:18px}
.md-body table{width:100%;border-collapse:collapse;margin-top:8px}
.md-body td{font-size:12.5px;padding:5px 0;color:#9db2c4;vertical-align:top}
.md-body td:first-child{color:#5c7285;width:46%}
.md-body td:last-child{text-align:right;color:#cfe2f0}
.md-body p{font-size:13px;line-height:1.9;color:#93a9bb;margin-top:8px}
.md-body ul{margin:8px 0 0 16px;font-size:12.5px;line-height:1.85;color:#8298aa}
.md-body .torque{margin-top:8px}
.md-idx{margin-top:22px;text-align:center;font-size:10px;letter-spacing:.2em;color:#39505f}
.md-ft{display:flex;gap:8px;padding:12px 12px 20px;border-top:1px solid var(--line)}
.md-ft button{flex:1;padding:11px 0;font-size:12px}

@media (max-width:1100px){
  #parts{width:200px}
  #dossier{width:270px}
  .tele{gap:16px}
  .tele b{font-size:16px;min-width:44px}
}
@media (max-width:820px){
  #parts,#dossier{display:block;position:fixed;left:8px;right:8px;bottom:8px;top:auto;
    height:66vh;width:auto;transform:translateY(calc(100% + 24px));
    transition:transform .32s ease;z-index:25}
  body.show-list #parts{transform:translateY(0)}
  body.show-detail #dossier{transform:translateY(0)}
  #mtabs{display:flex;position:fixed;left:8px;right:8px;bottom:8px;gap:6px;z-index:30}
  #mtabs button{flex:1;padding:9px 0;font-size:11px;background:rgba(9,14,21,.95)}
  #brand .sub{display:none}
  #brand .mark{font-size:18px}
  #brand{left:14px;top:14px}
  #viewbtns{top:56px;right:10px}
  #viewbtns button{font-size:11px;padding:6px 9px}
  #hud{height:auto;padding:12px 14px;flex-direction:column;align-items:stretch;gap:10px;
    bottom:60px;left:8px;right:8px}
  .tele{gap:6px;justify-content:space-between}
  .tele .row{min-width:0;flex:1}
  .tele b{font-size:14px;min-width:0}
  .tele .k{width:22px;font-size:8.5px}
  .ctl{justify-content:space-between;flex-wrap:wrap;gap:8px}
  .slider input{width:92px}
  .start{width:62px;padding:7px 0}
  #hint{display:none}
}