:root{
    --bg:#0d1117; --tunnel:#0a0e1a; --hud:#161b27; --hud-border:#2a3245;
    --card:#161b27; --panel:#111827; --panel-border:#1f2937;
    --label:#9ca3af; --accent:#3b82f6; --tab-active:#1d4ed8;
    --shape-fill:#1e3a5f; --shape-stroke:#63b3ed;
    --drag:#f87171; --lift:#4ade80;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:#fff;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.4;}
  body{padding:12px;max-width:1280px;margin:0 auto;}
  .hud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
  .badge{background:var(--hud);border:1px solid var(--hud-border);border-radius:999px;padding:6px 14px;color:#cbd5e1;font-size:13px;white-space:nowrap;}
  .badge b{color:var(--accent);font-weight:600;margin-left:6px;}
  .main{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;}
  .col-left{flex:0 0 64%;max-width:64%;}
  .col-right{flex:1;min-width:300px;}
  .tunnel-wrap{position:relative;background:var(--tunnel);border:1px solid var(--panel-border);border-radius:8px;overflow:hidden;height:380px;}
  #tunnel{display:block;width:100%;height:380px;}
  .overlay-btns{position:absolute;top:8px;left:8px;display:flex;flex-wrap:wrap;gap:4px;max-width:70%;z-index:3;}
  .ovbtn{background:rgba(22,27,39,.85);border:1px solid var(--hud-border);color:#cbd5e1;font-size:11px;padding:4px 8px;border-radius:4px;cursor:pointer;}
  .ovbtn.on{background:var(--tab-active);color:#fff;border-color:var(--accent);}
  .legend{position:absolute;bottom:10px;right:10px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:#cbd5e1;}
  .legend .lgrad{width:12px;height:84px;border-radius:3px;border:1px solid #2a3245;
    background:linear-gradient(to bottom,#ef4444,#facc15,#22c55e,#22d3ee,#3b82f6);}
  .stall{position:absolute;top:8px;right:8px;background:#92400e;color:#fde68a;border:1px solid #f59e0b;border-radius:4px;padding:4px 10px;font-size:12px;display:none;z-index:3;}
  .stall.show{display:block;}
  .readout{display:flex;flex-direction:column;gap:10px;height:100%;}
  .metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .mcard{background:var(--card);border:1px solid var(--hud-border);border-radius:6px;padding:8px 10px;}
  .mcard .ml{color:var(--label);font-size:11px;}
  .mcard .mv{font-size:20px;font-weight:600;color:#fff;}
  .mcard .mu{font-size:11px;color:var(--label);margin-left:3px;}
  .gtabs{display:flex;gap:4px;}
  .gtab{flex:1;background:var(--panel);border:1px solid var(--panel-border);color:var(--label);font-size:12px;padding:5px;border-radius:4px;cursor:pointer;text-align:center;}
  .gtab.on{background:var(--tab-active);color:#fff;}
  .graph-wrap{background:var(--card);border:1px solid var(--hud-border);border-radius:6px;padding:8px;display:flex;justify-content:center;}
  #graph{display:block;width:260px;height:140px;}
  .controls{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;}
  .panel{flex:1;min-width:300px;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:12px;}
  .panel h3{font-size:12px;color:var(--label);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;font-weight:600;}
  .objtabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
  .objtab{background:#1e293b;border:1px solid var(--panel-border);color:#cbd5e1;font-size:12px;padding:5px 10px;border-radius:4px;cursor:pointer;}
  .objtab.on{background:var(--tab-active);color:#fff;border-color:var(--accent);}
  .dropzone{border:2px dashed #374151;border-radius:6px;padding:14px;text-align:center;color:var(--label);font-size:12px;cursor:pointer;transition:border-color .15s;}
  .dropzone.drag{border-color:var(--accent);color:#fff;}
  .dropzone.err{border-color:var(--drag);color:var(--drag);}
  .slice{margin-top:10px;display:none;}
  .slice.show{display:block;}
  .slice-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
  .slider-row{margin-bottom:12px;}
  .slider-row label{display:flex;justify-content:space-between;font-size:12px;color:var(--label);margin-bottom:4px;}
  .slider-row label b{color:#fff;font-weight:600;}
  input[type=range]{width:100%;accent-color:var(--accent);height:4px;cursor:pointer;}
  .numwrap{color:#fff;font-weight:600;}
  .numin{width:64px;background:#0f1623;color:#fff;border:1px solid var(--panel-border);border-radius:4px;
    padding:2px 6px;font-size:12px;font-weight:600;text-align:right;}
  .numin:focus{outline:none;border-color:var(--accent);}
  .numin.bad{border-color:var(--drag);}
  .credit{margin:16px 4px 6px;padding-top:12px;border-top:1px solid var(--panel-border);
    text-align:center;color:var(--label);font-size:12px;}
  .credit a{color:var(--accent);text-decoration:none;}
  .credit a:hover{text-decoration:underline;}
  select{background:#1e293b;color:#fff;border:1px solid var(--panel-border);border-radius:4px;padding:4px 6px;font-size:12px;}
  .actionbar{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
  .abtn{background:#1e293b;border:1px solid var(--panel-border);color:#cbd5e1;font-size:12px;padding:6px 10px;border-radius:4px;cursor:pointer;}
  .abtn:hover{background:#334155;color:#fff;}
  .abtn.act{background:var(--tab-active);color:#fff;border-color:var(--accent);}
  .learn{margin-top:12px;}
  .lpanel{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;margin-bottom:8px;overflow:hidden;}
  .lhead{padding:10px 12px;cursor:pointer;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
  .lhead .chev{transition:transform .15s;color:var(--label);}
  .lpanel.open .chev{transform:rotate(90deg);}
  .lbody{padding:0 12px 12px;display:none;font-size:13px;}
  .lpanel.open .lbody{display:block;}
  .eqrow{margin:8px 0;color:#e5e7eb;overflow-x:auto;}
  .coach{color:#cbd5e1;line-height:1.6;}
  .coach .tip{padding:4px 0;border-bottom:1px solid #1f2937;}
  table.cmp{width:100%;border-collapse:collapse;font-size:12px;}
  table.cmp th,table.cmp td{border:1px solid var(--panel-border);padding:5px 8px;text-align:left;color:#cbd5e1;}
  table.cmp th{color:var(--label);background:#0f1623;}
  table.cmp tr.cur td{background:#1e293b;color:#fff;}
  .ctxmenu{position:fixed;z-index:1000;background:var(--hud);border:1px solid var(--hud-border);border-radius:6px;padding:4px;display:none;min-width:140px;box-shadow:0 4px 16px rgba(0,0,0,.5);}
  .ctxmenu div{padding:6px 10px;font-size:12px;color:#cbd5e1;cursor:pointer;border-radius:4px;}
  .ctxmenu div:hover{background:#1e293b;color:#fff;}
  #view3d{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:#0d1320;}
  .view3d-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#141c2e;color:#94a3b8;font-size:13px;flex-shrink:0;}
  .view3d-bar button{background:none;border:none;color:#94a3b8;font-size:26px;cursor:pointer;line-height:1;padding:0 4px;}
  .view3d-bar button:hover{color:#fff;}
  .view3d-ctrl{display:flex;align-items:center;font-size:12px;color:#94a3b8;margin-left:auto;margin-right:12px;}
  .view3d-ctrl select{margin-left:4px;padding:2px 4px;font-size:12px;}
  .wind3d-arrow{font-size:18px;line-height:1;color:#00d4ff;min-width:20px;text-align:center;}
  .view3d-scl{display:flex;align-items:center;gap:4px;font-size:11px;color:#94a3b8;margin-left:20px;white-space:nowrap;}
  .view3d-scl input[type=range]{width:80px;accent-color:#3b82f6;}
  #canvas3d{flex:1;display:block;width:100%;cursor:grab;}
  #canvas3d:active{cursor:grabbing;}
  .view3d-legend{display:flex;align-items:center;gap:10px;padding:6px 16px;background:#141c2e;font-size:11px;color:#94a3b8;flex-shrink:0;}
  .view3d-lgrad{flex:1;height:8px;border-radius:4px;background:linear-gradient(to right,#00008b,#0000ff,#00ffff,#00ff00,#ffff00,#ff8800,#ff0000);}
  @media(max-width:900px){.col-left{flex:0 0 100%;max-width:100%;}}