:root{
  --sidebar:72px; --panel:350px; --bg:#111318; --surface:#181b22; --surface2:#222631;
  --text:#eef1f5; --muted:#9299a6; --accent:#5da8ff; --border:#303641;
}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
button,input{font:inherit}
#app{display:flex}
.sidebar{width:var(--sidebar);background:#12151b;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;z-index:20}
.brand{font-size:11px;line-height:1.15;text-align:center;padding:14px 3px;color:#cbd3df;border-bottom:1px solid var(--border);width:100%}
.side-btn{width:100%;border:0;background:transparent;color:#aeb6c3;padding:13px 4px;display:flex;gap:4px;flex-direction:column;align-items:center;cursor:pointer}
.side-btn:hover,.side-btn.active{background:#202631;color:white}
.side-btn .icon{font-size:21px}
.main{position:relative;flex:1;min-width:0;height:100%}
.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#151820;border-bottom:1px solid var(--border)}
.mode-switch{display:flex;background:#0f1116;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.mode-switch button{border:0;background:transparent;color:#9da6b3;padding:7px 18px;cursor:pointer}
.mode-switch button.active{background:#2a3443;color:white}
.status{font-size:12px;color:var(--muted)}
.viewport-wrap{position:absolute;left:0;right:0;top:48px;bottom:0}
#view3d,#view2d{width:100%;height:100%;display:block}
#view3d canvas{display:block;width:100%;height:100%}
#view2d{touch-action:none;cursor:grab}
#view2d:active{cursor:grabbing}
.hud{position:absolute;left:12px;bottom:12px;background:rgba(10,12,16,.72);backdrop-filter:blur(8px);padding:7px 10px;border:1px solid rgba(255,255,255,.08);border-radius:6px;font:11px/1.5 ui-monospace,Consolas,monospace;color:#c7ced8;pointer-events:none}
.panel{width:var(--panel);height:100%;background:#171b22;border-left:1px solid var(--border);overflow:auto;z-index:30}
.panel-head{height:48px;position:sticky;top:0;background:#171b22;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:2}
.panel-head button{background:none;border:0;color:#aab2bd;font-size:24px;cursor:pointer}
.setting-section{padding:13px 14px;border-bottom:1px solid var(--border)}
.setting-section h3{font-size:12px;color:#c7ced8;margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em}
.row{min-height:32px;display:grid;grid-template-columns:minmax(86px,1fr) minmax(90px,1.3fr) 32px;align-items:center;gap:8px;font-size:12px;color:#d8dde5}
.row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row input[type=number]{width:100%;background:#0f1217;color:#e9edf4;border:1px solid var(--border);border-radius:4px;padding:5px}
.row input[type=color]{width:100%;height:26px;background:none;border:0}
.row input[type=range]{width:100%}
.row b{font-size:11px;color:#8ea2bb;text-align:right}
.check{display:flex;gap:8px}
.type-grid{max-height:390px;overflow:auto;padding-right:3px}
.type-row{grid-template-columns:minmax(90px,1fr) 1.2fr 34px}
.muted{color:var(--muted);font-size:12px}
.loading-mask{position:absolute;inset:0;background:rgba(10,12,16,.88);display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;z-index:50;color:#dbe1e9}
.loader{width:34px;height:34px;border-radius:50%;border:3px solid #2a303a;border-top-color:#67aaff;animation:spin .8s linear infinite}
.progress{width:min(420px,55vw);height:5px;background:#272c35;border-radius:5px;overflow:hidden}
.progress i{height:100%;display:block;background:#5da8ff;transition:width .15s}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:800px){
  :root{--panel:290px}
  .panel{position:absolute;right:0}
}

.quick-controls{display:flex;gap:8px;align-items:center;margin-left:10px;flex:1;justify-content:center}
.quick-controls label{display:flex;align-items:center;gap:4px;font-size:11px;color:#b7c0cc}
.quick-controls input{width:64px;background:#0f1217;border:1px solid var(--border);color:#e8edf4;border-radius:4px;padding:4px 5px}
.crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:22px/1 monospace;color:rgba(255,255,255,.65);pointer-events:none;text-shadow:0 1px 2px #000}
.key-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.key-grid label{display:grid;grid-template-columns:1fr 80px;align-items:center;font-size:12px;color:#ccd3dc}
.key-btn{background:#10141a;color:#e8edf3;border:1px solid var(--border);border-radius:5px;padding:5px;cursor:pointer}
@media(max-width:1100px){.quick-controls{display:none}}

.layer-controls{display:flex;align-items:center;gap:7px;font-size:11px;color:#c7cfda}
.layer-controls label{display:flex;align-items:center;gap:3px;white-space:nowrap}
.layer-controls select,.setting-section select{background:#0f1217;border:1px solid var(--border);color:#e8edf4;border-radius:4px;padding:4px}
.top-label{color:#7f8997;margin-left:5px}
.speed-legend{display:flex;align-items:center;gap:7px;font-size:11px;color:#9da6b3;margin-top:7px}
.speed-legend i{height:8px;flex:1;border-radius:5px;background:linear-gradient(90deg,#355cff,#23c9a9,#e9dd38,#ff7d2e,#e53333)}
.quick-controls label{min-width:126px;display:grid;grid-template-columns:1fr;gap:2px}.quick-controls input[type=range]{width:126px}.speed-legend{margin-top:10px}.speed-gradient{height:10px;border-radius:999px;background:linear-gradient(90deg,hsl(240 84% 55%),hsl(215 84% 55%),hsl(190 84% 55%),hsl(155 84% 55%),hsl(115 84% 55%),hsl(70 84% 55%),hsl(35 84% 55%),hsl(0 84% 55%),hsl(315 84% 55%),hsl(275 84% 55%))}.speed-ticks{display:flex;justify-content:space-between;font-size:10px;color:#9ca3af;margin-top:4px}.style-grid{display:grid;gap:4px;max-height:330px;overflow:auto}.style-item{display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid #2a2f3a;border-radius:7px;background:#171a20;font-size:12px}.style-item b{font-variant-numeric:tabular-nums;color:#8ab4ff}.filter-actions{display:flex;align-items:center;gap:10px;margin-bottom:8px}.filter-actions button{background:#252b36;border:1px solid #3a4352;color:#eef2f7;padding:6px 10px;border-radius:7px;cursor:pointer}

#view3d{position:relative;overflow:hidden}.station-label-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}.station-label-3d{position:absolute;left:0;top:0;white-space:nowrap;color:#fff;font:600 12px/1.1 system-ui,-apple-system,"Microsoft YaHei",sans-serif;text-shadow:0 1px 2px #000,1px 0 2px #000,-1px 0 2px #000,0 -1px 2px #000;will-change:transform}

/* Mobile / Bedrock-like touch controls */
.mobile-3d-controls{display:none;position:absolute;inset:0;z-index:8;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}
.mobile-look-zone{position:absolute;left:38%;right:0;top:0;bottom:0;pointer-events:auto;touch-action:none}
.mobile-joystick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center}
.mobile-joystick-ring{position:relative;width:104px;height:104px;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:rgba(12,16,22,.28);box-shadow:inset 0 0 20px rgba(0,0,0,.28);backdrop-filter:blur(2px)}
.mobile-joystick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(235,241,249,.58);border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 12px rgba(0,0,0,.35);will-change:transform}
.mobile-fly-buttons{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.mobile-fly-buttons button{width:58px;height:58px;border-radius:15px;border:1px solid rgba(255,255,255,.34);background:rgba(22,27,35,.58);color:#fff;font-size:23px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.35);backdrop-filter:blur(5px);touch-action:none;-webkit-tap-highlight-color:transparent}
.mobile-fly-buttons button:active{background:rgba(93,168,255,.62);transform:scale(.96)}
@media (pointer:coarse){
  #view3d canvas{touch-action:none}
  .mobile-3d-controls{display:block}
  .crosshair{font-size:18px;opacity:.7}
  .hud{bottom:max(170px,calc(env(safe-area-inset-bottom) + 150px));font-size:10px}
}
@media (pointer:coarse) and (max-width:700px){
  .mobile-joystick{width:116px;height:116px;left:max(10px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom))}
  .mobile-joystick-ring{width:92px;height:92px}
  .mobile-joystick-knob{width:44px;height:44px;margin:-22px 0 0 -22px}
  .mobile-fly-buttons{right:max(10px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));gap:9px}
  .mobile-fly-buttons button{width:52px;height:52px;border-radius:13px}
}

.floating-actions{position:absolute;right:14px;top:14px;z-index:12;display:flex;gap:8px;pointer-events:none}
.floating-export{pointer-events:auto;border:1px solid rgba(255,255,255,.16);background:rgba(15,18,24,.82);color:#eef3fb;border-radius:10px;padding:8px 12px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.floating-export:hover{background:rgba(35,42,54,.9);border-color:rgba(93,168,255,.45)}
.floating-export:active{transform:translateY(1px)}
@media(max-width:800px){.floating-actions{right:10px;top:10px}.floating-export{padding:7px 10px;font-size:12px}}