/* ============ NEON TAP · 4K Rhythm Game ============ */
:root{
  --bg:#070912;
  --bg2:#0d1122;
  --panel:rgba(255,255,255,.045);
  --panel-brd:rgba(255,255,255,.09);
  --txt:#e8ecf8;
  --txt-dim:#8b93b3;
  --cyan:#2ee6ff;
  --violet:#a97bff;
  --pink:#ff5fa2;
  --amber:#ffb545;
  --green:#3ef2a4;
  --red:#ff4d6d;
  --glow:0 0 18px rgba(46,230,255,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
#app{position:relative;width:100vw;height:100vh;overflow:hidden}

/* 动态背景 */
#app::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(46,230,255,.14), transparent 60%),
    radial-gradient(800px 600px at 100% 10%, rgba(169,123,255,.14), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(255,95,162,.10), transparent 60%),
    linear-gradient(180deg,#070912,#0b0f1e 60%,#070912);
}
#app::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
}

.screen{
  position:absolute;inset:0;z-index:1;
  display:none;flex-direction:column;
}
.screen.active{display:flex}

/* ---------- 通用控件 ---------- */
.ghost-btn{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  color:var(--txt);padding:8px 16px;border-radius:10px;
  font-size:13px;cursor:pointer;transition:.18s;font-family:inherit;
}
.ghost-btn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.ghost-btn.full{width:100%;margin-top:4px}
.primary-btn{
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  border:0;color:#04070f;padding:11px 26px;border-radius:11px;
  font-size:15px;font-weight:700;cursor:pointer;transition:.18s;font-family:inherit;
  box-shadow:0 6px 24px rgba(46,230,255,.28);letter-spacing:.5px;
}
.primary-btn:hover{filter:brightness(1.12);transform:translateY(-2px)}
.hidden{display:none !important}

.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  outline:none;cursor:pointer;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px rgba(46,230,255,.8);cursor:pointer;
}
.slider::-moz-range-thumb{
  width:18px;height:18px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 0 12px rgba(46,230,255,.8);cursor:pointer;
}

.toggle-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  color:var(--txt-dim);padding:6px 14px;border-radius:8px;font-size:12px;cursor:pointer;font-family:inherit;
}
.toggle-btn.on{background:rgba(62,242,164,.14);border-color:rgba(62,242,164,.5);color:var(--green)}

/* ---------- 选曲页 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 26px;border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
}
.logo-main{font-size:26px;font-weight:800;letter-spacing:2px}
.logo-accent{color:var(--cyan);text-shadow:var(--glow)}
.logo-sub{display:block;font-size:10px;letter-spacing:4px;color:var(--txt-dim);margin-top:2px}

.menu-body{
  flex:1;display:grid;grid-template-columns:1fr 340px;
  /* minmax(0,1fr) 关键：让两列高度被容器约束，内部才能真正滚动；
     否则内容超出后会被 overflow:hidden 直接裁掉，「开始游戏」按钮点不到 */
  grid-template-rows:minmax(0,1fr);
  gap:22px;padding:22px 26px;overflow:hidden;
}
.menu-col{overflow-y:auto;padding-right:6px}
.menu-col::-webkit-scrollbar{width:6px}
.menu-col::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.side{display:flex;flex-direction:column;gap:14px;overflow-y:auto}

.col-title{
  font-size:12px;letter-spacing:3px;color:var(--txt-dim);
  text-transform:uppercase;margin:14px 0 10px;display:flex;align-items:center;gap:8px;
}
.col-title:first-child{margin-top:0}
.hint{
  font-size:9px;letter-spacing:2px;padding:2px 7px;border-radius:20px;
  background:rgba(46,230,255,.12);color:var(--cyan);
}

.track-list{display:flex;flex-direction:column;gap:9px}
.track-item{
  display:flex;align-items:center;gap:14px;padding:12px 14px;
  background:var(--panel);border:1px solid var(--panel-brd);border-radius:14px;
  cursor:pointer;transition:.18s;position:relative;overflow:hidden;
}
.track-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--tc,var(--cyan));opacity:.7;
}
.track-item:hover{background:rgba(255,255,255,.09);transform:translateX(3px)}
.track-item.selected{
  background:rgba(46,230,255,.10);border-color:rgba(46,230,255,.45);
  box-shadow:0 0 24px rgba(46,230,255,.16);
}
.track-cover{
  width:46px;height:46px;border-radius:11px;flex:0 0 46px;
  display:grid;place-items:center;font-size:20px;font-weight:800;
  background:linear-gradient(135deg,var(--tc,#2ee6ff),rgba(169,123,255,.7));
  color:#04070f;
}
.track-info{flex:1;min-width:0}
.track-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-sub{font-size:11px;color:var(--txt-dim);margin-top:3px}
.track-diff{
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:rgba(255,255,255,.08);color:var(--tc,var(--cyan));
}
.track-del{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--txt-dim);font-size:16px;cursor:pointer;opacity:0;transition:.18s;
}
.track-item:hover .track-del{opacity:1}
.track-del:hover{color:var(--red)}

.dropzone{
  border:1.5px dashed rgba(255,255,255,.18);border-radius:16px;
  padding:24px 16px;text-align:center;transition:.2s;background:rgba(255,255,255,.02);
}
.dropzone.dragover{
  border-color:var(--cyan);background:rgba(46,230,255,.08);
  box-shadow:inset 0 0 40px rgba(46,230,255,.12);
}
.dz-icon{font-size:26px;color:var(--cyan);text-shadow:var(--glow)}
.dz-title{font-size:14px;margin-top:6px;font-weight:600}
.dz-sub{font-size:11px;color:var(--txt-dim);margin-top:4px}
.dz-btn{
  display:inline-block;margin-top:12px;padding:7px 18px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-size:12px;cursor:pointer;transition:.18s;
}
.dz-btn:hover{background:rgba(46,230,255,.16);border-color:var(--cyan)}
.custom-list{margin-top:9px}

.panel{
  background:var(--panel);border:1px solid var(--panel-brd);
  border-radius:16px;padding:14px 16px 16px;
}
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.preset-btn{
  padding:9px 4px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--txt-dim);transition:.18s;font-family:inherit;
}
.preset-btn:hover{background:rgba(255,255,255,.1);color:var(--txt)}
.preset-btn.active{
  background:linear-gradient(135deg,rgba(46,230,255,.22),rgba(169,123,255,.22));
  border-color:var(--cyan);color:#fff;box-shadow:0 0 16px rgba(46,230,255,.25);
}

.readout{
  margin-top:10px;font-size:26px;font-weight:800;letter-spacing:1px;
  color:var(--cyan);text-shadow:var(--glow);
}
.readout .unit{font-size:13px;color:var(--txt-dim);margin-left:2px;text-shadow:none}
.readout-sub{display:block;font-size:10px;color:var(--txt-dim);margin-top:3px;letter-spacing:1px;text-shadow:none}

.adv-row{margin-top:12px}
.adv-label{
  display:flex;justify-content:space-between;font-size:11px;
  color:var(--txt-dim);margin-bottom:5px;
}
.adv-label b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}

/* 判定区间分组 */
.adv-group{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09)}
.adv-group-title{
  font-size:11px;letter-spacing:2px;color:var(--txt);font-weight:700;margin-bottom:9px;
  display:flex;align-items:baseline;gap:7px;
}
.adv-group-title span{font-size:9px;letter-spacing:1.4px;color:var(--txt-dim);font-weight:500}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.win-chip{
  flex:1 1 auto;min-width:52px;padding:5px 7px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  color:var(--txt-dim);font-family:inherit;font-size:11px;transition:.15s;white-space:nowrap;
}
.win-chip:hover{background:rgba(255,255,255,.11);color:var(--txt)}
.win-chip.on{
  background:linear-gradient(135deg,rgba(46,230,255,.22),rgba(155,109,255,.22));
  border-color:rgba(46,230,255,.6);color:#fff;box-shadow:0 0 14px rgba(46,230,255,.22);
}
.adv-note{
  margin-top:10px;font-size:10.5px;line-height:1.7;color:var(--txt-dim);
  background:rgba(255,255,255,.035);border-radius:8px;padding:7px 9px;
}
.adv-note b{color:var(--txt);font-variant-numeric:tabular-nums}

/* ---------- 延迟校准 ---------- */
.step-btn{
  min-width:30px;height:30px;padding:0 8px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:var(--txt);font-size:14px;font-family:inherit;line-height:1;
  transition:background .15s,border-color .15s;
}
.step-btn:hover{background:rgba(46,230,255,.16);border-color:var(--cyan)}
.step-btn:active{transform:scale(.93)}
.calib-card{max-width:420px;text-align:center}
.calib-card h3{margin-bottom:12px}
.calib-pad{
  position:relative;width:190px;height:190px;margin:14px auto;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(46,230,255,.14), rgba(10,14,29,.9) 68%);
  border:2px solid rgba(46,230,255,.4);cursor:pointer;user-select:none;
  display:grid;place-items:center;overflow:hidden;
  transition:border-color .12s;
}
.calib-pad:active{border-color:#fff}
#calib-pulse{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(46,230,255,.5), transparent 62%);
  opacity:0;transform:scale(.55);
}
#calib-pulse.on{animation:calibPulse .38s ease-out}
@keyframes calibPulse{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(1.25)}}
#calib-beat-num{font-size:26px;font-weight:700;letter-spacing:2px;color:var(--cyan);text-shadow:var(--glow);position:relative}
.calib-last-dev{position:absolute;bottom:38px;font-size:12px;color:rgba(232,236,248,.6);font-variant-numeric:tabular-nums}
.calib-progress{height:5px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden;margin:8px 0}
#calib-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink,#ff4d9d));transition:width .3s}
.calib-verdict{font-size:15px;margin:6px 0 2px;color:var(--txt)}
.calib-mean{font-size:42px;font-weight:700;color:var(--cyan);text-shadow:var(--glow);font-variant-numeric:tabular-nums}
.calib-mean .unit{font-size:16px;margin-left:4px;color:rgba(232,236,248,.6)}
.calib-apply-row{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 6px;
  font-size:13px;color:rgba(232,236,248,.75);
}
.calib-apply-row b{min-width:64px;font-size:17px;color:var(--txt);font-variant-numeric:tabular-nums}
#calib-result .tip{margin:6px 0 10px}
.q-line{margin-top:6px;letter-spacing:.5px}
.q-line b{font-weight:800}
.stars-line{
  display:flex;align-items:center;gap:4px;margin-top:12px;font-size:11px;color:var(--txt-dim);
}
.stars{letter-spacing:2px;color:var(--amber);text-shadow:0 0 10px rgba(255,181,69,.5)}

/* 开始游戏区 */
.play-panel{
  display:flex;flex-direction:column;gap:11px;padding:14px 16px 16px;
  /* 微调参数展开后侧栏会变长：开始栏始终吸在侧栏底部，不用滚到最下面才看得到 */
  position:sticky;bottom:0;z-index:6;
  background:linear-gradient(180deg,rgba(10,14,29,.72),rgba(10,14,29,.985) 38%);
  backdrop-filter:blur(8px);
}
.play-panel .primary-btn{width:100%;padding:14px;font-size:16px;letter-spacing:2px}
.play-panel .primary-btn:disabled{opacity:.28;filter:grayscale(1);cursor:not-allowed;box-shadow:none;transform:none}
#now-playing{
  padding:11px 13px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;
}
#now-playing b{display:block;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#now-playing span{display:block;font-size:11px;color:var(--txt-dim);margin-top:3px}
.np-empty{padding:11px;text-align:center;font-size:12px;color:var(--txt-dim)}
#advanced-box .select-wrap{margin-top:6px}
#diff-readout{min-height:76px}
#diff-readout .hint{font-size:22px;font-weight:800;color:var(--cyan)}

/* ---------- 游戏页 ---------- */
/* 注意：不要用 position:relative 覆盖 .screen 的 absolute，否则 inset:0 失效、高度塌陷为 0 */
#game{position:absolute;inset:0;overflow:hidden}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.hud{
  position:absolute;inset:0;pointer-events:none;padding:16px 22px;
  display:flex;flex-direction:column;
}
.hud-row{display:flex;justify-content:space-between;align-items:flex-start}
.hud-label{font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.45)}
.hud-value{
  font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:1px;text-shadow:0 0 20px rgba(46,230,255,.4);
}
.hud-block.right{text-align:right}
.hud-progress{
  margin-top:10px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;
}
#hud-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 10px var(--cyan)}
.hud-meta{
  margin-top:7px;display:flex;gap:16px;font-size:10px;letter-spacing:1px;color:rgba(255,255,255,.4);
}
.hud-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32%}

/* 局内暂停按钮：右上角（舞台之外），鼠标/触屏都能一击暂停。
   放在正中会挡住落下来的音符，所以贴着右上角，并给 ACCURACY 让出空间 */
.hud-pause{
  position:absolute;z-index:4;top:12px;right:16px;
  width:42px;height:40px;border-radius:12px;cursor:pointer;
  background:rgba(8,11,23,.72);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);font-size:12px;letter-spacing:1px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(6px);
  transition:background .16s,border-color .16s,box-shadow .16s,transform .12s;
  font-family:inherit;
}
.hud-pause:hover{background:rgba(46,230,255,.18);border-color:var(--cyan);color:#fff;box-shadow:0 0 18px rgba(46,230,255,.35)}
.hud-pause:active{transform:scale(.94)}
.pause-bars{display:flex;gap:4px;align-items:center;justify-content:center}
.pause-bars i{display:block;width:4px;height:14px;border-radius:2px;background:currentColor}
.hud-block.right{padding-right:52px}

.pause-mask{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:rgba(4,7,15,.82);backdrop-filter:blur(6px);
}
.pause-card{
  text-align:center;display:flex;flex-direction:column;gap:10px;
  min-width:270px;max-width:86vw;pointer-events:auto;
  background:rgba(13,17,34,.72);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:22px 20px 18px;
  box-shadow:0 26px 70px rgba(0,0,0,.55);
}
.pause-card h3{font-size:24px;letter-spacing:8px;margin-bottom:6px;color:var(--cyan);text-shadow:var(--glow)}
.pause-card .primary-btn{width:100%}
.pause-card .ghost-btn{width:100%}
.pause-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:2px}
.pause-stats>div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 4px}
.pause-stats span{display:block;font-size:9px;letter-spacing:1.5px;color:var(--txt-dim)}
.pause-stats b{display:block;font-size:16px;margin-top:3px;font-variant-numeric:tabular-nums;color:var(--txt)}
.pause-speed{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--txt-dim);margin-bottom:4px}
.pause-speed .slider{flex:1}
.pause-speed b{width:34px;text-align:right;font-variant-numeric:tabular-nums;color:var(--cyan);font-size:12px}
.pause-tip{font-size:10.5px;color:var(--txt-dim);line-height:1.6}
.countdown{
  position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  font-size:120px;font-weight:900;color:var(--cyan);
  text-shadow:0 0 60px rgba(46,230,255,.7);pointer-events:none;
}

/* ---------- 结算页 ---------- */
#result{align-items:center;justify-content:center}
.result-card{
  width:min(680px,92vw);background:rgba(13,17,34,.86);
  border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);backdrop-filter:blur(10px);
}
.result-head{display:flex;align-items:center;gap:22px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.09)}
.grade{
  width:92px;height:92px;flex:0 0 92px;border-radius:22px;display:grid;place-items:center;
  font-size:52px;font-weight:900;background:rgba(255,255,255,.06);
  border:2px solid currentColor;
}
.result-title{flex:1;min-width:0}
.res-song{font-size:21px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-sub{font-size:12px;color:var(--txt-dim);margin-top:5px;letter-spacing:1px}
.result-score{text-align:right}
.res-score-val{font-size:32px;font-weight:800;color:var(--cyan);text-shadow:var(--glow);font-variant-numeric:tabular-nums}
.result-body{display:grid;grid-template-columns:1fr 220px;gap:24px;padding:20px 0}
.judge-list{display:flex;flex-direction:column;gap:8px}
.judge-row{display:flex;align-items:center;gap:12px;font-size:13px}
.judge-row .jg-name{width:74px;font-weight:800;letter-spacing:1px;font-size:12px}
.judge-row .jg-bar{flex:1;height:7px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.judge-row .jg-bar i{display:block;height:100%;border-radius:4px}
.judge-row .jg-num{width:52px;text-align:right;font-variant-numeric:tabular-nums;color:var(--txt-dim)}
.result-stats{display:flex;flex-direction:column;gap:9px}
.stat{
  display:flex;justify-content:space-between;padding:9px 13px;
  background:rgba(255,255,255,.045);border-radius:10px;font-size:12px;
}
.stat span{color:var(--txt-dim)}
.stat b{font-variant-numeric:tabular-nums;font-size:14px}
.result-actions{display:flex;gap:11px;justify-content:flex-end}

/* ---------- 弹层 / 加载 / toast ---------- */
.modal{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(4,7,15,.78);backdrop-filter:blur(6px);padding:16px;
}
.modal-card{
  width:min(430px,92vw);background:rgba(13,17,34,.96);
  border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  /* 矮屏（横屏手机 / 小笔记本）下内容可能超出视口，允许卡片内滚动 */
  max-height:calc(100% - 8px);overflow-y:auto;overscroll-behavior:contain;
}
.modal-card h3{font-size:17px;letter-spacing:3px;margin-bottom:18px;color:var(--cyan)}
.setting-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:13px}
.setting-row label{width:74px;color:var(--txt-dim);flex:0 0 74px}
.setting-row .slider{flex:1}
.setting-val{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px;color:var(--txt-dim)}
.keybind{display:flex;gap:7px;flex:1}
.keybind input{
  width:0;flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;color:var(--txt);text-align:center;padding:8px 0;font-size:13px;
  font-family:inherit;text-transform:uppercase;cursor:pointer;
}
.keybind input:focus{outline:1px solid var(--cyan);background:rgba(46,230,255,.12)}
.modal-card .primary-btn{width:100%;margin-top:6px}
.tip{font-size:11px;color:var(--txt-dim);margin-top:12px;line-height:1.7}
.tip b{color:var(--cyan)}

/* 加载提示：用不拦截点击的底部小卡片，避免合成期间把整个界面盖死 */
.loading{
  position:absolute;left:0;right:0;bottom:26px;z-index:30;
  display:flex;justify-content:center;
  pointer-events:none;
}
.loading-inner{
  display:flex;align-items:center;gap:12px;
  background:rgba(10,14,29,.95);border:1px solid rgba(255,255,255,.14);
  border-radius:13px;padding:11px 18px;
  box-shadow:0 14px 44px rgba(0,0,0,.6);
}
.spinner{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(255,255,255,.14);border-top-color:var(--cyan);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#loading-text{font-size:12px;letter-spacing:1px;color:var(--txt-dim);white-space:nowrap}
.loading-bar{
  width:132px;height:3px;background:rgba(255,255,255,.1);
  border-radius:2px;overflow:hidden;flex:0 0 auto;
}
#loading-bar-fill{
  height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--violet));
  transition:width .25s;box-shadow:0 0 10px var(--cyan);
}
.toast{
  position:absolute;left:50%;bottom:34px;transform:translate(-50%,20px);
  background:rgba(13,17,34,.96);border:1px solid rgba(255,255,255,.16);
  padding:11px 20px;border-radius:12px;font-size:13px;z-index:40;
  opacity:0;pointer-events:none;transition:.28s;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  /* 单列：改用纵向 flex 流，避免 grid 行高塌陷把曲目列表压成 0 高 */
  .menu-body{display:flex;flex-direction:column;overflow-y:auto;gap:14px;padding-bottom:108px}
  .menu-body>.menu-col{overflow:visible;padding-right:0}
  .side{overflow:visible}
  .result-body{grid-template-columns:1fr}
  .hud-value{font-size:22px}
  .hud-pause{width:38px;height:36px;top:10px;right:12px;border-radius:10px;font-size:11px}
  .hud-block.right{padding-right:46px}
  /* 开始栏固定在底部，任何高度的窗口都能直接点到开始（横向排布，尽量不占高度） */
  .play-panel{
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    flex-direction:row;align-items:center;gap:12px;
    border-radius:0;border-left:0;border-right:0;border-bottom:0;
    background:linear-gradient(180deg,rgba(10,14,29,.94),rgba(10,14,29,.99));
    backdrop-filter:blur(8px);padding:11px 18px;
  }
  .play-panel #now-playing{flex:1;min-width:0;padding:9px 11px}
  .play-panel .primary-btn{width:auto;padding:13px 22px;white-space:nowrap}
}

/* 矮屏桌面：右列会滚动，把开始栏钉在右下角，避免被裁到视口外 */
@media (min-width:901px) and (max-height:740px){
  .play-panel{
    position:fixed;right:26px;bottom:18px;width:340px;z-index:20;
    flex-direction:row;align-items:center;gap:10px;
    border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.6);
    background:rgba(10,14,29,.97);backdrop-filter:blur(8px);
    padding:10px 12px;
  }
  .play-panel #now-playing{flex:1;min-width:0;padding:8px 10px}
  .play-panel .primary-btn{width:auto;padding:12px 18px;white-space:nowrap;font-size:14px}
  /* 侧栏留出固定栏高度，滚到底也不会被压住 */
  .side{padding-bottom:94px}
}