:root{
  --bg:#05060a;
  --panel:rgba(10,13,20,.78);
  --line:rgba(255,255,255,.09);
  --text:#dfe6f2;
  --dim:#8b95a8;
  --accent:#ffb45e;
  --accent2:#6fb7ff;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

#glcanvas{
  position:fixed; inset:0; width:100%; height:100%; display:block;
  touch-action:none; cursor:grab;
}
#glcanvas:active{ cursor:grabbing; }

/* ---------- 标题 ---------- */
#titlebar{
  position:fixed; top:18px; left:22px; z-index:5; pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
  user-select:none;
}
#titlebar h1{
  margin:0; font-size:17px; letter-spacing:.34em; font-weight:600; color:#f3ede2;
}
#titlebar h1 .zh{ letter-spacing:.18em; color:var(--accent); font-size:15px; margin-left:12px; }
#titlebar p{ margin:6px 0 0; font-size:11.5px; color:var(--dim); letter-spacing:.12em; }

/* ---------- HUD ---------- */
#hud{
  position:fixed; left:22px; bottom:16px; z-index:5;
  font:11px/1.5 ui-monospace,Consolas,monospace;
  color:rgba(200,214,235,.78); letter-spacing:.06em;
  background:rgba(5,7,12,.38); padding:6px 10px;
  border:1px solid rgba(255,255,255,.06); border-radius:8px;
  pointer-events:none; user-select:none;
}

/* ---------- 侧边栏 ---------- */
#toggle{
  position:fixed; top:16px; right:16px; z-index:20; width:40px; height:40px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel); color:#e8edf7; font-size:16px;
  cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
#toggle:hover{ border-color:rgba(255,180,94,.5); color:#fff; }

#sidebar{
  position:fixed; top:68px; right:16px; bottom:16px; width:304px; z-index:10;
  background:var(--panel);
  border:1px solid var(--line); border-radius:16px;
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  overflow-y:auto; overflow-x:hidden;
  padding:16px 16px 14px;
  transition:transform .35s cubic-bezier(.22,.8,.3,1), opacity .3s;
}
body.side-hidden #sidebar{
  transform:translateX(calc(100% + 28px));
  opacity:.35; pointer-events:none;
}
#sidebar::-webkit-scrollbar{ width:8px; }
#sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:4px; }
#sidebar::-webkit-scrollbar-track{ background:transparent; }

.side-head{ margin-bottom:14px; }
.side-head .t{ font-size:13px; letter-spacing:.22em; color:#e8edf7; font-weight:600; }
.side-head .t small{
  display:block; margin-top:3px; font-size:9.5px; letter-spacing:.16em;
  color:var(--dim); font-weight:400;
}

/* ---------- 预设 ---------- */
.presets{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px; }
.presets button{
  appearance:none; border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:var(--text); font-size:12px; letter-spacing:.08em; padding:8px 6px;
  border-radius:9px; cursor:pointer; transition:all .18s;
}
.presets button:hover{ border-color:rgba(255,180,94,.5); color:#fff; }
.presets button.active{
  border-color:var(--accent); color:var(--accent);
  background:rgba(255,180,94,.08);
  box-shadow:0 0 0 1px rgba(255,180,94,.22) inset;
}

/* ---------- 分组与滑杆 ---------- */
.group{ margin:14px 0 4px; }
.group h3{
  margin:0 0 10px; font-size:10.5px; letter-spacing:.24em; color:var(--dim);
  font-weight:600; display:flex; align-items:center; gap:8px;
}
.group h3::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.14), transparent);
}

.ctl{ margin:10px 0 12px; }
.ctl .row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.ctl .name{ font-size:12px; color:#c7d0de; letter-spacing:.04em; }
.ctl .val{
  font-size:11.5px; color:var(--accent);
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace,Consolas,monospace;
}

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:18px; background:transparent; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,180,94,.65), rgba(255,180,94,.16));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
  background:#ffd9a8; margin-top:-5px; border:1px solid rgba(0,0,0,.4);
  box-shadow:0 0 10px rgba(255,170,80,.55);
}
input[type=range]::-moz-range-track{
  height:3px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,180,94,.65), rgba(255,180,94,.16));
}
input[type=range]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:#ffd9a8;
  border:1px solid rgba(0,0,0,.4); box-shadow:0 0 10px rgba(255,170,80,.55);
}

/* ---------- 底部操作 ---------- */
.actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.actions button{
  flex:1; appearance:none; border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:var(--text); font-size:12px; letter-spacing:.05em;
  padding:9px 8px; border-radius:9px; cursor:pointer; transition:all .18s;
}
.actions button:hover{ border-color:rgba(111,183,255,.55); color:#fff; }
.actions button.on{ border-color:var(--accent2); color:var(--accent2); background:rgba(111,183,255,.08); }

.hint{ margin-top:14px; font-size:10.5px; line-height:1.8; color:var(--dim); letter-spacing:.04em; }

/* ---------- 提示 / 加载 / 错误 ---------- */
#toast{
  position:fixed; left:50%; bottom:26px;
  transform:translateX(-50%) translateY(20px);
  background:rgba(12,15,22,.92); border:1px solid rgba(255,180,94,.4); color:#ffd9a8;
  padding:9px 18px; border-radius:10px; font-size:12.5px; letter-spacing:.05em;
  opacity:0; pointer-events:none; transition:all .3s; z-index:30;
  max-width:80vw; text-align:center;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

#loading{
  position:fixed; inset:0; z-index:40; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .6s; color:var(--dim); letter-spacing:.3em; font-size:11px;
  user-select:none;
}
#loading.hide{ opacity:0; pointer-events:none; }
.ring{
  width:54px; height:54px; border-radius:50%;
  border:2px solid rgba(255,180,94,.22); border-top-color:var(--accent);
  animation:spin 1.1s linear infinite;
  box-shadow:0 0 40px rgba(255,140,50,.25);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

#fatal{
  position:fixed; inset:0; z-index:50; background:rgba(4,5,9,.94);
  display:none; align-items:center; justify-content:center; text-align:center; padding:30px;
}
#fatal.show{ display:flex; }
#fatal .box{ max-width:600px; }
#fatal h2{ color:#ff9a5c; margin:0 0 12px; letter-spacing:.2em; }
#fatal p{ color:var(--text); font-size:13px; }
#fatal pre{ white-space:pre-wrap; color:var(--dim); font-size:11.5px; text-align:left; margin-top:14px; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px){
  #titlebar{ top:12px; left:14px; }
  #titlebar h1{ font-size:14px; letter-spacing:.26em; }
  #titlebar h1 .zh{ font-size:12px; }
  #titlebar p{ font-size:10px; }
  #hud{ left:12px; bottom:12px; }
  #toggle{ top:12px; right:12px; }
  #sidebar{
    top:auto; bottom:12px; right:12px; left:12px; width:auto;
    max-height:54vh;
  }
  body.side-hidden #sidebar{ transform:translateY(calc(100% + 24px)); }
}