:root{ --bg:#0b1220;--panel:#0f172a;--txt:#e5e7eb;--mut:#9ca3af;--bd:rgba(255,255,255,.12);--br:14px }
  html,body{height:100%;margin:0;background:var(--bg);color:var(--txt);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Helvetica Neue",Arial}
  #app{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr}
  header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15));z-index:20;position:sticky;top:0;backdrop-filter:blur(8px)}
  header .brand{display:flex;align-items:center;gap:10px}
  header .logo{width:34px;height:34px;border-radius:12px;background:rgba(6,182,212,.15);border:1px solid rgba(6,182,212,.35);display:grid;place-items:center}
  header .title{font-weight:800;font-size:18px}
  #canvas-wrap{position:relative}
  canvas.webgl{position:absolute;inset:0;display:block;z-index:0}
  #fallback{position:absolute;inset:0;display:grid;place-items:center;color:#9ca3af;background:linear-gradient(180deg,rgba(8,12,20,.8),rgba(8,12,20,.6));z-index:2;font-size:14px}

  /* 左侧抽屉（固定式，默认收起；把手永远可见在屏幕最左上角） */
  #leftDrawer{position:fixed;left:12px;top:72px;height:calc(100% - 84px);width:400px;max-width:88vw;z-index:40;pointer-events:auto;overflow:hidden;transition:transform .25s ease}
  #leftDrawer.collapsed{transform:translateX(-100%)}
  #leftDrawer.pinned{transform:translateX(0)}
  #leftDrawer:not(.pinned):hover{transform:translateX(-6%)}
  #leftDrawer .inner{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
  #leftDrawer .scroll{flex:1;overflow:auto;padding-right:8px;-webkit-overflow-scrolling:touch}
  .drawer-handle{position:fixed;top:12px;left:12px;transform:none;width:44px;height:44px;border-radius:10px;padding:0;border:1px solid var(--bd);background:rgba(2,6,23,.92);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:60;box-shadow:0 2px 8px rgba(0,0,0,.35)}
  .drawer-handle:hover{background:rgba(30,41,59,.92)}

  .panel{background:rgba(17,24,39,.68);backdrop-filter:blur(6px);border:1px solid var(--bd);border-radius:var(--br);padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
  .panel h4{margin:0 0 8px 0;font-size:13px;display:flex;align-items:center;gap:8px}
  .g{display:grid;gap:8px}
  .g.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metric{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--bd);border-radius:10px;background:rgba(2,6,23,.45)}
  .metric .k{color:#cbd5e1;font-size:12px}
  .metric .v{font-weight:800}
  .btn{border:1px solid var(--bd);background:rgba(2,6,23,.7);color:var(--txt);padding:8px 10px;border-radius:12px;cursor:pointer;text-align:left}
  .btn:hover{background:rgba(30,41,59,.7)}
  .btn.active{background:#0891b2;border-color:#06b6d4}
  .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .badge{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:3px 8px;border:1px solid var(--bd);background:#0b1220;font-size:12px}
  .badge.ok{background:#064e3b;color:#dcfce7;border-color:#065f46}
  .badge.warn{background:#4d2d00;color:#fde68a;border-color:#78350f}
  .badge.err{background:#4c0519;color:#fecdd3;border-color:#9f1239}
  input[type="range"]{width:100%}
  .charts{position:relative;height:180px;border:1px solid var(--bd);border-radius:12px;background:rgba(6,11,22,.45);backdrop-filter:blur(3px);padding:6px;padding-top:28px}
  #chart{width:100%;height:100%}
  .legend{position:absolute;left:8px;right:8px;top:6px;height:22px;display:flex;gap:10px;align-items:center;justify-content:flex-start;font-size:12px;color:#cbd5e1;pointer-events:auto}
  .legend .item{display:flex;align-items:center;gap:6px;border:1px solid var(--bd);background:rgba(2,6,23,.6);padding:2px 8px;border-radius:10px;cursor:pointer;user-select:none}
  .legend .sw{width:10px;height:10px;border-radius:50%}
  .legend .item.off{opacity:.45;filter:grayscale(.6)}
  #engLegend{position:fixed;right:10px;top:88px;background:rgba(17,24,39,.55);border:1px solid var(--bd);border-radius:10px;padding:6px 8px;font-size:11px;z-index:5}
  #diag{position:fixed;right:8px;bottom:8px;font-size:11px;opacity:.9;background:#111827;border:1px solid var(--bd);border-radius:10px;padding:6px 8px;white-space:pre-line;max-width:48ch}
  .ui-hidden #leftDrawer{display:none}
  .ui-hidden #engLegend{display:none!important}
  /* 手机/PC 虚拟摇杆（可强制显示） */
  #joystick{position:fixed;left:16px;bottom:16px;width:120px;height:120px;border-radius:50%;background:rgba(2,6,23,.55);border:1px solid var(--bd);backdrop-filter:blur(6px);display:none;z-index:45}
  #joystick.show{display:block}
  #joyKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(8,145,178,.85);border:1px solid rgba(6,182,212,.6);box-shadow:0 8px 24px rgba(0,0,0,.35)}
  /* 下拉样式（加宽以避免文字竖排） */
  #joyModeSel{min-width:260px;white-space:nowrap}
  /* 允许PC上用鼠标拖拽摇杆 */
  #joystick{touch-action:none}
  /* 触控与摇杆整行控件宽度对齐 */
  #joyRow .btn {width: 280px; box-sizing: border-box;}
  #joyRow select{width:100%;display:block;box-sizing:border-box}