/* ============================================================
   osu!mania 谱面预览 —— 样式
   ============================================================ */

.mp-app {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6em;
  align-items: flex-start;
  margin-top: 1.2em;
}

/* ---------- 左边：画布 ---------- */
.mp-stage { flex: 0 0 auto; }

.mp-canvas {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  background: #000;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

/* ---------- 右边：信息 + 控件 + 载入方式 ---------- */
.mp-side { flex: 1 1 20em; min-width: 0; }

.mp-title {
  font-family: var(--font-heading);
  font-size: 1.15em;
  color: var(--color-heading);
  letter-spacing: 0.04em;
  margin-bottom: 0.25em;
  word-break: break-word;
}

.mp-sub {
  font-size: 0.82em;
  color: var(--color-quiet);
  margin-bottom: 1.1em;
}

/* 控件 */
.mp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em 0.9em;
  margin-bottom: 0.7em;
}

.mp-btn {
  padding: 0.45em 0.95em;
  font: inherit;
  font-size: 0.9em;
  color: var(--color-body-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.mp-btn:hover:not([disabled]) {
  border-color: var(--color-link-hover);
  color: var(--color-link-hover);
  background: rgba(255, 255, 255, 0.07);
}

.mp-btn[disabled] { opacity: .35; cursor: not-allowed; }

.mp-speed {
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
  color: var(--color-link-hover);
  min-width: 3.4em;
  text-align: center;
}

.mp-seek {
  flex: 1 1 100%;
  width: 100%;
  accent-color: var(--color-link-hover);
}

.mp-time {
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
  color: var(--color-quiet);
}

/* ---------- 载入方式 ---------- */
.mp-load {
  margin-top: 1.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--color-border);
}

.mp-drop {
  display: block;
  padding: 1.5em 1em;
  text-align: center;
  font-size: 0.88em;
  color: var(--color-quiet);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.mp-drop:hover,
.mp-drop.is-over {
  border-color: var(--color-link-hover);
  color: var(--color-link-hover);
  background: rgba(255, 255, 255, 0.05);
}

.mp-or {
  margin: 1em 0 0.6em;
  font-size: 0.78em;
  letter-spacing: 0.14em;
  color: var(--color-quiet);
}

.mp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  align-items: center;
  margin-bottom: 0.7em;
}

.mp-input,
.mp-textarea {
  padding: 0.5em 0.7em;
  font: inherit;
  font-size: 0.88em;
  color: var(--color-body-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  min-width: 0;
}

.mp-input:focus,
.mp-textarea:focus { outline: none; border-color: var(--color-link-hover); }

.mp-id { width: 9em; }
.mp-textarea { width: 100%; height: 5.5em; resize: vertical; font-family: var(--font-mono, monospace); font-size: 0.8em; }

.mp-status {
  margin-top: 0.2em;
  font-size: 0.82em;
  line-height: 1.6;
  color: var(--color-quiet);
  word-break: break-word;
}

.mp-ok   { color: #5fc98a; }
.mp-warn { color: #e9b45a; }
.mp-err  { color: #e0705f; }

/* ---------- 署名 ---------- */
.mp-credit {
  margin-top: 2em;
  padding-top: 1.2em;
  border-top: 1px solid var(--color-border);
  font-size: 0.82em;
  line-height: 1.9;
  color: var(--color-quiet);
}

.mp-credit a { color: var(--color-link-hover); text-decoration: none; }
.mp-credit a:hover { text-decoration: underline; }

/* ---------- 小屏 ---------- */
@media (max-width: 700px) {
  .mp-app { gap: 1.2em; }
  .mp-stage { flex: 1 1 100%; }
  .mp-canvas { width: 100%; max-width: 400px; margin: 0 auto; }
  .mp-side { flex: 1 1 100%; }
  .mp-controls { justify-content: center; }
}

/* ---------- 难度选择（一个 .osz 里有多张时） ---------- */
.mp-pick { margin-top: 1em; }

.mp-pick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em;
  max-height: 14em;
  overflow-y: auto;
  padding: 0.7em;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.mp-pick-item {
  padding: 0.35em 0.8em;
  font: inherit;
  font-size: 0.82em;
  color: var(--color-body-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, color .15s, background .15s;
}

.mp-pick-item:hover {
  border-color: var(--color-link-hover);
  color: var(--color-link-hover);
  background: rgba(255, 255, 255, 0.07);
}

/* ---------- 两个 ID 的输入行 ---------- */
/* 侧栏窄的时候两个 ID 框会挤到框外 ✗ 直接竖着排 */
.mp-row-id { gap: 1em; }

.mp-field {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-size: 0.76em;
  letter-spacing: 0.08em;
  color: var(--color-quiet);
}

.mp-row-id .mp-id { width: 11em; }

@media (max-width: 700px) {
  .mp-row-id { width: 100%; }
  .mp-row-id .mp-field { flex: 1 1 45%; }
  .mp-row-id .mp-id { width: 100%; }
}

/* 主按钮（跟其它按钮区分开） */
.mp-btn-primary {
  border-color: var(--color-link-hover);
  color: var(--color-link-hover);
}

.mp-load .mp-or:first-child { margin-top: 0; }

/* ---------- 格式转换工具的难度清单 ---------- */
.cv-list {
  margin: 0.9em 0 0;
  padding: 0.8em 1em 0.8em 2.2em;
  font-size: 0.86em;
  line-height: 1.9;
  color: var(--color-body-text);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  max-height: 18em;
  overflow-y: auto;
}

/* h1 里图标和标题之间留个空 */
.section-title .section-icon { margin-right: 0.35em; }

/* 转换工具那个丢文件的框，做大一点、显眼一点 */
#cv-drop, #cv2-drop {
  padding: 2.6em 1.2em;
  font-size: 0.95em;
}
#cv-drop::before, #cv2-drop::before {
  content: '⇩';
  display: block;
  font-size: 1.8em;
  line-height: 1.2;
  margin-bottom: 0.25em;
  color: var(--color-link-hover);
  opacity: .8;
}
#cv-drop b, #cv2-drop b { color: var(--color-link-hover); }

/* ============================================================
   倍速包 · 滑条
   ------------------------------------------------------------
   用跟「谱面预览」的进度条（.mp-seek）一样的做法：
   浏览器原生滑条 + accent-color —— 跟全站风格一致，不格格不入 ✓
   ============================================================ */
.sp-rate-box {
  margin-top: 1.2em;
  width: 100%;
  max-width: none;          /* 跟上面的丢文件框一样宽 ✓ */
}

.sp-rate-head {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin-bottom: 0.6em;
}

.sp-rate-label {
  font-size: 0.78em;
  letter-spacing: 0.14em;
  color: var(--color-quiet);
}

.sp-rate-val {
  font-family: var(--font-heading);
  font-size: 1.4em;
  color: var(--color-link-hover);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* 跟 .mp-seek 同款 */
.sp-range {
  width: 100%;
  flex: 1 1 100%;
  accent-color: var(--color-link-hover);
  cursor: pointer;
}

.sp-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45em;
  font-size: 0.76em;
  color: var(--color-quiet);
}

/* ============================================================
   倍速工具 · 谱面勾选 / 倍速档位 / 已选倍速
   ============================================================ */
.sp-sec { margin-top: 2em; }
.sp-sec-head {
  display: flex; align-items: baseline; gap: 0.8em;
  margin-bottom: 0.8em;
  font-size: 0.8em; letter-spacing: 0.12em; color: var(--color-quiet);
}
.sp-mini { font-size: 1em; color: var(--color-link-hover); background: none; border: none; cursor: pointer; padding: 0; }
.sp-quiet { color: var(--color-quiet); }

.sp-picks { display: flex; flex-direction: column; gap: 0.35em; }

.sp-pick {
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.55em 0.85em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
  transition: border-color .15s, background .15s;
}
.sp-pick:hover { border-color: var(--color-link-hover); background: rgba(255,255,255,.03); }
body.theme-light .sp-pick:hover { background: rgba(0,0,0,.025); }
.sp-pick input { accent-color: var(--color-link-hover); flex: 0 0 auto; }
.sp-pick span { flex: 1 1 auto; color: var(--color-body-text); }
.sp-pick em { font-style: normal; font-size: 0.82em; color: var(--color-quiet); }

.sp-presets { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1.1em; }
.sp-preset {
  padding: 0.4em 0.95em; font: inherit; font-size: 0.88em;
  color: var(--color-body-text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--color-border);
  border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
body.theme-light .sp-preset { background: rgba(0,0,0,.04); }
.sp-preset:hover { border-color: var(--color-link-hover); color: var(--color-link-hover); }

.sp-chips { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.2em; min-height: 1.8em; align-items: center; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28em 0.4em 0.28em 0.85em;
  border: 1px solid var(--color-link-hover);
  border-radius: 999px;
  font-size: 0.86em;
}
.sp-chip b { color: var(--color-link-hover); font-weight: 600; }
.sp-chip button {
  background: none; border: none; cursor: pointer;
  color: var(--color-quiet); font-size: 0.9em; line-height: 1; padding: 0 0.2em;
}
.sp-chip button:hover { color: #e0705f; }

/* ============================================================
   BPM 检测
   ============================================================ */
.bp-sec { margin-top: 2em; }

.bp-chart {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
body.theme-light .bp-chart { background: rgba(0,0,0,.02); }

.bp-segs { display: flex; flex-direction: column; gap: 0.4em; }

.bp-seg {
  display: flex; align-items: center; gap: 0.9em;
  padding: 0.5em 0.9em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9em;
}
.bp-seg b { color: var(--color-link-hover); font-variant-numeric: tabular-nums; }
.bp-seg span { color: var(--color-quiet); font-size: 0.9em; font-variant-numeric: tabular-nums; }

.bp-exp { margin-bottom: 1.1em; }
.bp-exp label {
  display: block; margin-bottom: 0.4em;
  font-size: 0.78em; letter-spacing: 0.1em; color: var(--color-quiet);
}
.bp-out {
  width: 100%; height: 5.5em; resize: vertical;
  padding: 0.6em 0.8em;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82em; line-height: 1.7;
  color: var(--color-body-text);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
body.theme-light .bp-out { background: rgba(0,0,0,.03); }
.bp-copy { margin-top: 0.5em; }

/* ---------- BPM 检测 · 主结果 ---------- */
.bp-main {
  margin-top: 2em;
  padding: 1.6em 1.4em 1.3em;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-align: center;
}
.bp-bpm { display: flex; align-items: baseline; justify-content: center; gap: 0.4em; }
.bp-bpm b {
  font-family: var(--font-heading);
  font-size: 4.2em;
  line-height: 1;
  color: var(--color-link-hover);
  font-variant-numeric: tabular-nums;
}
.bp-bpm span { font-size: 0.9em; letter-spacing: 0.16em; color: var(--color-quiet); }
.bp-meta {
  margin-top: 1.1em;
  display: flex; flex-direction: column; gap: 0.35em;
  font-size: 0.9em; color: var(--color-quiet);
}
.bp-meta b { color: var(--color-body-text); font-variant-numeric: tabular-nums; }

/* ---------- BPM 候选 ---------- */
.bp-cands { display: flex; flex-wrap: wrap; gap: 0.6em; }

.bp-cand {
  display: flex; flex-direction: column; align-items: center; gap: 0.15em;
  min-width: 8.5em;
  padding: 0.6em 0.9em;
  font: inherit;
  color: var(--color-body-text);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
body.theme-light .bp-cand { background: rgba(0,0,0,.03); }
.bp-cand:hover { border-color: var(--color-link-hover); }
.bp-cand.is-on { border-color: var(--color-link-hover); border-width: 2px; padding: calc(0.6em - 1px) calc(0.9em - 1px); }
.bp-cand b { font-size: 1.15em; font-variant-numeric: tabular-nums; }
.bp-cand.is-on b { color: var(--color-link-hover); }
.bp-cand span { font-size: 0.72em; color: var(--color-quiet); font-variant-numeric: tabular-nums; }

/* ---------- B站提取 ---------- */
.bi-note {
  margin: 1.6em 0;
  padding: 0.9em 1.1em;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-link-hover);
  border-radius: 8px;
  font-size: 0.88em;
  line-height: 1.8;
  color: var(--color-quiet);
}
.bi-note b { color: var(--color-body-text); }
.bi-p { font-size: 0.9em; line-height: 1.9; margin: 0.5em 0; }
.bi-ol { padding-left: 1.3em; }
.bi-ol li { margin: 0.25em 0; }
.bi-bm {
  display: inline-block;
  padding: 0.7em 1.6em;
  font-weight: 600;
  color: var(--color-body-bg);
  background: var(--color-link-hover);
  border-radius: 999px;
  text-decoration: none;
  cursor: grab;
}
.bi-bm:active { cursor: grabbing; }
.bi-details { margin-top: 0.9em; font-size: 0.85em; color: var(--color-quiet); }
.bi-details summary { cursor: pointer; }
.bi-code { height: 8em; margin-top: 0.6em; word-break: break-all; }
.bi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 0.7em; }
.bi-item {
  display: flex; flex-direction: column; gap: 0.2em;
  padding: 0.8em 1em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.88em;
}
.bi-item b { color: var(--color-link-hover); }
.bi-item span { color: var(--color-quiet); font-size: 0.9em; }

/* ---------- B站提取 · 教程 ---------- */
.bi-table { width: 100%; border-collapse: collapse; font-size: 0.86em; margin: 0.7em 0; }
.bi-table th, .bi-table td {
  text-align: left; padding: 0.5em 0.8em;
  border-bottom: 1px solid var(--color-border);
}
.bi-table th { color: var(--color-quiet); font-weight: 500; font-size: 0.9em; }
.bi-table code, .bi-p code {
  padding: 0.1em 0.4em; border-radius: 4px;
  background: rgba(255,255,255,.07);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
}
body.theme-light .bi-table code, body.theme-light .bi-p code { background: rgba(0,0,0,.06); }
.bi-pre {
  padding: 0.8em 1em; margin: 0.5em 0;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: rgba(255,255,255,.03);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82em; overflow-x: auto;
  color: var(--color-link-hover);
}
body.theme-light .bi-pre { background: rgba(0,0,0,.03); }

/* ---------- B站提取 · 教程 ---------- */
.bi-table { width: 100%; border-collapse: collapse; font-size: 0.86em; margin: 0.7em 0; }
.bi-table th, .bi-table td {
  text-align: left; padding: 0.5em 0.8em;
  border-bottom: 1px solid var(--color-border);
}
.bi-table th { color: var(--color-quiet); font-weight: 500; font-size: 0.9em; }
.bi-table code, .bi-p code {
  padding: 0.1em 0.4em; border-radius: 4px;
  background: rgba(255,255,255,.07);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
}
body.theme-light .bi-table code, body.theme-light .bi-p code { background: rgba(0,0,0,.06); }
.bi-pre {
  padding: 0.8em 1em; margin: 0.5em 0;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: rgba(255,255,255,.03);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82em; overflow-x: auto;
  color: var(--color-link-hover);
}
body.theme-light .bi-pre { background: rgba(0,0,0,.03); }

/* ============================================================
   音频转换
   ============================================================ */
.au-field {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.78em; letter-spacing: 0.12em; color: var(--color-quiet);
}
.au-field .mp-input { font-size: 1.05em; letter-spacing: 0; min-width: 7.5em; cursor: pointer; }

.au-check {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.86em; color: var(--color-quiet); cursor: pointer;
}
.au-check input[type="checkbox"] { accent-color: var(--color-link-hover); cursor: pointer; width: 1.05em; height: 1.05em; }
.au-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.45; }

.au-info { margin: 1.1em 0 0; }

.au-info-row {
  display: flex; flex-direction: column; gap: 0.25em;
  padding: 0.8em 1em;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-link-hover);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  font-size: 0.88em;
}
body.theme-light .au-info-row { background: rgba(0, 0, 0, .025); }
.au-info-row b { color: var(--color-body-text); word-break: break-all; }
.au-info-row span { color: var(--color-quiet); font-size: 0.92em; }
.au-info-row .au-quiet { color: var(--color-quiet); font-size: 0.86em; }

.au-note {
  margin-top: 2em;
  padding: 0.9em 1.1em;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-link-hover);
  border-radius: 8px;
  font-size: 0.86em;
  line-height: 1.8;
  color: var(--color-quiet);
}
.au-note b { color: var(--color-body-text); }

/* ============================================================
   谱面裁剪
   ------------------------------------------------------------
   跟倍速工具（.sp-*）同一套排法：勾选列表 + 分段 + 状态行。
   底色都用 rgba(255,255,255,α)，浅色模式再用 theme-light 覆盖 ✓
   ============================================================ */
.ct-sec { margin-top: 2em; }

.ct-sec-head {
  display: flex; align-items: baseline; gap: 0.8em;
  margin-bottom: 0.8em;
  font-size: 0.8em; letter-spacing: 0.12em; color: var(--color-quiet);
}

.ct-mini {
  font-size: 1em; color: var(--color-link-hover);
  background: none; border: none; cursor: pointer; padding: 0;
}
.ct-quiet { color: var(--color-quiet); }

.ct-picks { display: flex; flex-direction: column; gap: 0.35em; }

.ct-pick {
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.55em 0.85em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
  transition: border-color .15s, background .15s;
}
.ct-pick:hover { border-color: var(--color-link-hover); background: rgba(255,255,255,.03); }
body.theme-light .ct-pick:hover { background: rgba(0,0,0,.025); }
.ct-pick input { accent-color: var(--color-link-hover); flex: 0 0 auto; }
.ct-pick span { flex: 1 1 auto; color: var(--color-body-text); }
.ct-pick em {
  font-style: normal; font-size: 0.82em; color: var(--color-quiet);
  font-variant-numeric: tabular-nums;
}

/* 三个时间输入框 */
.ct-field {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.78em; letter-spacing: 0.12em; color: var(--color-quiet);
}
.ct-field .mp-input {
  font-size: 1.05em; letter-spacing: 0;
  min-width: 7em; cursor: text;
  font-variant-numeric: tabular-nums;
}

/* 生成后的结果清单 */
.ct-range {
  margin: 0.9em 0 0;
  padding: 0.8em 1em 0.8em 2.2em;
  font-size: 0.86em;
  line-height: 1.9;
  color: var(--color-body-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-link-hover);
  border-radius: 8px;
}
body.theme-light .ct-range { background: rgba(0, 0, 0, 0.025); }
.ct-range b { color: var(--color-link-hover); font-variant-numeric: tabular-nums; }

/* 说明块 */
.ct-note {
  margin-top: 2em;
  padding: 0.9em 1.1em;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-link-hover);
  border-radius: 8px;
  font-size: 0.86em;
  line-height: 1.8;
  color: var(--color-quiet);
}
.ct-note b { color: var(--color-body-text); }

/* ---------- ② 实时谱面区 ---------- */
.ct-stage {
  display: flex;
  justify-content: center;
  padding: 0.7em;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
body.theme-light .ct-stage { background: rgba(0, 0, 0, 0.025); }

.ct-canvas-box { width: 100%; max-width: 100%; display: flex; justify-content: center; }
.ct-canvas-box canvas {
  display: block;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  touch-action: none;            /* 上下拖动预览时别让页面跟着滚 ✓ */
  cursor: ns-resize;             /* 提示：这里是「上下拖 = 翻谱面」✓ */
}
/* 按住拖动的过程中（松手才吸附）✓ */
.ct-canvas-box canvas.is-scrub { cursor: grabbing; }

/* 播放控制行 */
.ct-transport {
  display: flex; align-items: center; gap: 0.9em;
  margin-top: 0.7em;
  flex-wrap: wrap;
}
.ct-now {
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  color: var(--color-body-text);
  min-width: 7.5em;
}
.ct-hint { font-size: 0.82em; color: var(--color-quiet); font-variant-numeric: tabular-nums; }

/* ---------- ③ 选区条（拖把手） ---------- */
.ct-lane { margin-top: 0.9em; position: relative; }

.ct-track {
  position: relative;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  touch-action: none;            /* 触屏拖动把手时别让页面跟着滚 ✓ */
  user-select: none;
  -webkit-user-select: none;
}
body.theme-light .ct-track { background: rgba(0, 0, 0, 0.035); }
.ct-track:focus { outline: none; border-color: var(--color-link-hover); }
.ct-track.is-dragging { cursor: grabbing; }

/* 选中的那一段 */
.ct-ghost {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--color-link-hover) 26%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--color-link-hover) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-link-hover) 55%, transparent);
  pointer-events: none;
}

/* 当前位置游标（播放时跟着动）✓ */
.ct-playhead {
  position: absolute; top: -3px; bottom: -3px;
  width: 2px; margin-left: -1px;
  background: var(--color-body-text);
  opacity: 0.65;
  pointer-events: none;
}

/* 两个可以拖的把手 ✓ */
.ct-handle {
  position: absolute; top: -4px; bottom: -4px;
  width: 18px; margin-left: -9px;
  border-radius: 5px;
  background: var(--color-link-hover);
  border: 2px solid var(--color-body-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}
.ct-handle::after {                 /* 方便看清抓哪 —— 中间一道竖纹 */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 2px; height: 12px; margin: -6px 0 0 -1px;
  background: rgba(0, 0, 0, 0.35); border-radius: 1px;
}
body.theme-light .ct-handle::after { background: rgba(255, 255, 255, 0.6); }
.ct-handle:hover, .ct-handle.is-drag { filter: brightness(1.12); }
.ct-handle:focus-visible { outline: 2px solid var(--color-body-text); outline-offset: 2px; }
.ct-handle-start { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.ct-handle-end { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* 时间轴下面的 mm:ss 刻度 ✓ */
.ct-ticks { position: relative; height: 1.5em; margin-top: 0.25em; }
.ct-ticks i {
  position: absolute; top: 0; width: 1px; height: 5px;
  margin-left: -0.5px;
  background: var(--color-border);
}
.ct-ticks u {
  position: absolute; top: 6px;
  transform: translateX(-50%);
  font-size: 0.72em; font-style: normal; text-decoration: none;
  color: var(--color-quiet);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 音乐状态 + 流速滑块（谱面裁剪新增） ----------
   只用现有的 CSS 变量，日夜两套主题都跟着走 ✓ */
.ct-audio {
  font-size: 0.82em;
  color: var(--color-quiet);
  max-width: 24em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ct-speedrow {
  display: flex; align-items: center; gap: 0.7em;
  margin-top: 0.6em;
  flex-wrap: wrap;
}
.ct-speed-val {
  color: var(--color-link-hover);
  font-size: 1.2em;
  font-variant-numeric: tabular-nums;
}

.ct-rng {
  -webkit-appearance: none; appearance: none;
  flex: 0 1 240px; min-width: 130px; height: 20px;
  margin: 0; padding: 0;
  background: none; cursor: pointer;
  accent-color: var(--color-link-hover);
}
.ct-rng:focus-visible { outline: 2px solid var(--color-link-hover); outline-offset: 3px; border-radius: 4px; }
.ct-rng::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--color-border);
}
body.theme-light .ct-rng::-webkit-slider-runnable-track { background: rgba(0, 0, 0, 0.10); }
.ct-rng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -6px;
  border-radius: 50%;
  background: var(--color-link-hover);
  border: 2px solid var(--color-body-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.ct-rng::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--color-border);
}
body.theme-light .ct-rng::-moz-range-track { background: rgba(0, 0, 0, 0.10); }
.ct-rng::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-link-hover);
  border: 2px solid var(--color-body-bg);
}

/* 拖动把手时浮出来的时间提示（显示未吸附的时间）✓ */
.ct-tip {
  display: none;
  position: absolute; top: -1.8em; left: 0;
  transform: translateX(-50%);
  padding: 0.15em 0.5em;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-panel);
  color: var(--color-body-text);
  font-size: 0.76em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.ct-tip.is-on { display: block; }