music: 新建 music app，替换 piano-sheet

听歌 + 练琴曲目管理：
- 数据：piece (title/artist/category/lyrics/play_count/notes) + attachments (audio/video/pdf/image; image 带 role=chord/numbered/staff)
- 后端 axum + sqlite，附件流式落 PVC，ServeFile 支持 Range（视频拖动）
- 前端 guitar 风格 player：左 sidebar + tabs(歌词/吉他谱/简谱/五线谱/PDF/视频)，LRC 同步、快捷键、笔记自动保存
- ns cube-music + music.famzheng.me + bodylimit 5GiB
- scripts/import_guitar.py 用于把 oci /data/guitar/ 旧曲库导入

apps/music/frontend/src/views/PlayerView.vue

@@ -0,0 +1,919 @@
+<template>
+  <div class="root">
+    <header class="topbar">
+      <h1>🎵 Music</h1>
+      <input
+        class="search"
+        type="text"
+        v-model="search"
+        placeholder="搜索曲目 / 歌手"
+      />
+      <span class="count">{{ filtered.length }} / {{ pieces.length }} 首</span>
+      <router-link to="/upload" class="btn-add" title="新增曲目">＋</router-link>
+    </header>
+
+    <div class="main">
+      <aside class="sidebar" :class="{ 'has-selected': !!selected }">
+        <div class="sort-bar">
+          <button :class="{ active: sortMode === 'name' }" @click="setSort('name')">名称</button>
+          <button :class="{ active: sortMode === 'hot' }" @click="setSort('hot')">最多播放</button>
+          <button :class="{ active: sortMode === 'least' }" @click="setSort('least')">最少播放</button>
+          <button :class="{ active: sortMode === 'recent' }" @click="setSort('recent')">最近</button>
+          <button :class="{ active: sortMode === 'random' }" @click="setSort('random')">随机</button>
+        </div>
+
+        <div class="playlist">
+          <p v-if="loading" class="hint">加载中…</p>
+          <p v-else-if="loadError" class="hint err">{{ loadError }}</p>
+          <p v-else-if="filtered.length === 0" class="hint">
+            空空如也，<router-link to="/upload">先加一首</router-link>。
+          </p>
+          <div
+            v-for="p in filtered"
+            :key="p.id"
+            class="row"
+            :class="{ active: selectedId === p.id }"
+            @click="selectPiece(p.id)"
+          >
+            <div class="row-main">
+              <div class="row-title">{{ p.title }}</div>
+              <div class="row-meta">
+                <span v-if="p.artist">{{ p.artist }}</span>
+                <span v-if="p.category" class="cat">{{ p.category }}</span>
+              </div>
+            </div>
+            <div class="badges">
+              <span v-if="p.has_lyrics" class="badge" title="有歌词">词</span>
+              <span v-for="k in iconKinds(p.kinds)" :key="k" class="badge" :title="k">{{ kindLabel(k) }}</span>
+              <span v-if="p.play_count > 0" class="play-count">{{ p.play_count }}</span>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <section class="player-area">
+        <div v-if="!selected" class="empty">
+          <p>从左边挑一首吧 🎶</p>
+        </div>
+
+        <template v-else>
+          <header class="now-playing">
+            <h2>{{ selected.title }}</h2>
+            <div class="np-sub">
+              <span v-if="selected.artist">{{ selected.artist }}</span>
+              <span v-if="selected.category">· {{ selected.category }}</span>
+              <span v-if="selected.play_count">· 播放 {{ selected.play_count }} 次</span>
+              <router-link :to="{ name: 'edit', params: { id: selected.id } }" class="edit-link">编辑</router-link>
+            </div>
+          </header>
+
+          <nav v-if="tabs.length" class="tabs">
+            <button
+              v-for="t in tabs"
+              :key="t.key"
+              :class="{ active: activeTab === t.key }"
+              @click="setTab(t.key)"
+            >{{ t.label }}<span v-if="t.count > 1" class="tab-n">{{ t.count }}</span></button>
+          </nav>
+
+          <main class="content">
+            <!-- 歌词 -->
+            <div v-show="activeTab === 'lyrics'" class="lyrics-box" ref="lyricsBoxEl">
+              <div v-if="lyricsLines.length === 0" class="lyrics-none">
+                <span v-if="selected.lyrics">这首歌的歌词不是 LRC 格式</span>
+                <span v-else>暂无歌词，用心感受 🎶</span>
+                <pre v-if="selected.lyrics" class="lyrics-raw">{{ selected.lyrics }}</pre>
+              </div>
+              <div
+                v-for="(line, i) in lyricsLines"
+                :key="i"
+                class="lyrics-line"
+                :class="{ active: i === activeLyricIdx }"
+                :data-i="i"
+                @click="seek(line.time)"
+              >{{ line.text }}</div>
+            </div>
+
+            <!-- 谱面（chord / numbered / staff） -->
+            <div v-show="['chord', 'numbered', 'staff'].includes(activeTab)" class="sheet-box">
+              <img
+                v-for="att in roleAttachments(activeTab)"
+                :key="att.id"
+                :src="attachmentUrl(att.id)"
+                :alt="att.filename"
+                class="sheet-img"
+              />
+            </div>
+
+            <!-- PDF -->
+            <div v-show="activeTab === 'pdf'" class="pdf-box">
+              <iframe
+                v-for="att in pdfAttachments"
+                :key="att.id"
+                :src="attachmentUrl(att.id)"
+                :title="att.filename"
+                class="pdf-frame"
+              />
+            </div>
+
+            <!-- 视频 -->
+            <div v-show="activeTab === 'video'" class="video-box">
+              <video
+                v-for="att in videoAttachments"
+                :key="att.id"
+                :src="attachmentUrl(att.id)"
+                controls
+                class="video-el"
+              />
+            </div>
+          </main>
+
+          <footer class="controls">
+            <div class="ctrl-row">
+              <label class="repeat" :class="{ on: repeatOne }" @click="repeatOne = !repeatOne">
+                <span>循环</span>
+                <span class="track"><span class="thumb"></span></span>
+              </label>
+              <button @click="prev" class="btn-icon" title="上一首">⏮</button>
+              <button @click="togglePlay" class="btn-icon big" :title="playing ? '暂停' : '播放'">
+                {{ playing ? '⏸' : '▶' }}
+              </button>
+              <button @click="next" class="btn-icon" title="下一首">⏭</button>
+              <span class="time">{{ fmtTime(currentTime) }}</span>
+              <div class="bar" @click="seekBar">
+                <div class="fill" :style="{ width: progressPct + '%' }"></div>
+              </div>
+              <span class="time">{{ fmtTime(duration) }}</span>
+            </div>
+          </footer>
+
+          <audio
+            ref="audioEl"
+            @timeupdate="onTimeUpdate"
+            @loadedmetadata="onLoaded"
+            @ended="onEnded"
+            @play="playing = true"
+            @pause="playing = false"
+          />
+        </template>
+      </section>
+
+      <aside v-if="selected" class="notes" :class="{ active: notesOpen }">
+        <header @click="notesOpen = !notesOpen">
+          <span>笔记</span>
+          <span v-if="notesSavedFlash" class="saved">已保存</span>
+        </header>
+        <textarea
+          v-model="notesDraft"
+          @input="onNotesInput"
+          placeholder="练琴心得 / chord 备注 / 难点…"
+        />
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  listPieces,
+  getPiece,
+  patchPiece,
+  recordPlay,
+  attachmentUrl as attUrl,
+} from '../lib/api.js'
+import { parseLrc } from '../lib/lrc.js'
+
+const route = useRoute()
+const router = useRouter()
+
+const pieces = ref([])
+const loading = ref(true)
+const loadError = ref('')
+const selected = ref(null)
+const selectedId = ref(null)
+
+const search = ref('')
+const sortMode = ref(localStorage.getItem('music.sort') || 'name')
+const repeatOne = ref(false)
+
+const audioEl = ref(null)
+const lyricsBoxEl = ref(null)
+const playing = ref(false)
+const currentTime = ref(0)
+const duration = ref(0)
+const activeTab = ref('lyrics')
+const notesOpen = ref(false)
+const notesDraft = ref('')
+const notesSavedFlash = ref(false)
+let notesTimer = null
+let randomSeed = Math.random()
+let lastReportedId = null
+
+const lyricsLines = computed(() => parseLrc(selected.value?.lyrics || ''))
+
+const activeLyricIdx = computed(() => {
+  const lines = lyricsLines.value
+  if (!lines.length) return -1
+  let idx = -1
+  for (let i = lines.length - 1; i >= 0; i--) {
+    if (currentTime.value >= lines[i].time) { idx = i; break }
+  }
+  return idx
+})
+
+const audioAttachments = computed(() =>
+  (selected.value?.attachments || []).filter(a => a.kind === 'audio'))
+const videoAttachments = computed(() =>
+  (selected.value?.attachments || []).filter(a => a.kind === 'video'))
+const pdfAttachments = computed(() =>
+  (selected.value?.attachments || []).filter(a => a.kind === 'pdf'))
+
+function roleAttachments(role) {
+  return (selected.value?.attachments || []).filter(
+    a => a.kind === 'image' && a.role === role,
+  )
+}
+
+const tabs = computed(() => {
+  if (!selected.value) return []
+  const list = []
+  if (selected.value.lyrics) list.push({ key: 'lyrics', label: '歌词', count: 0 })
+  const chord = roleAttachments('chord').length
+  if (chord) list.push({ key: 'chord', label: '吉他谱', count: chord })
+  const num = roleAttachments('numbered').length
+  if (num) list.push({ key: 'numbered', label: '简谱', count: num })
+  const staff = roleAttachments('staff').length
+  if (staff) list.push({ key: 'staff', label: '五线谱', count: staff })
+  if (pdfAttachments.value.length) list.push({ key: 'pdf', label: '乐谱 PDF', count: pdfAttachments.value.length })
+  if (videoAttachments.value.length) list.push({ key: 'video', label: '视频', count: videoAttachments.value.length })
+  // 没歌词也至少给一个 fallback tab
+  if (list.length === 0) list.push({ key: 'lyrics', label: '歌词', count: 0 })
+  return list
+})
+
+const filtered = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  let arr = pieces.value
+  if (q) {
+    arr = arr.filter(p => {
+      const hay = `${p.title} ${p.artist || ''} ${p.category || ''}`.toLowerCase()
+      return hay.includes(q)
+    })
+  }
+  arr = [...arr]
+  switch (sortMode.value) {
+    case 'hot':
+      arr.sort((a, b) => b.play_count - a.play_count || a.title.localeCompare(b.title, 'zh'))
+      break
+    case 'least':
+      arr.sort((a, b) => a.play_count - b.play_count || a.title.localeCompare(b.title, 'zh'))
+      break
+    case 'recent':
+      arr.sort((a, b) => {
+        const ta = a.last_played_at || ''
+        const tb = b.last_played_at || ''
+        return tb.localeCompare(ta) || a.title.localeCompare(b.title, 'zh')
+      })
+      break
+    case 'random': {
+      // stable random per session
+      const seeded = arr.map((p, i) => ({ p, k: hash(p.id, randomSeed) }))
+      seeded.sort((a, b) => a.k - b.k)
+      arr = seeded.map(x => x.p)
+      break
+    }
+    default:
+      arr.sort((a, b) => a.title.localeCompare(b.title, 'zh'))
+  }
+  return arr
+})
+
+function hash(id, seed) {
+  // 小随机 hash，sort key 稳定
+  let x = (id ^ Math.floor(seed * 1e9)) >>> 0
+  x = (x ^ (x << 13)) >>> 0
+  x = (x ^ (x >>> 17)) >>> 0
+  x = (x ^ (x << 5)) >>> 0
+  return x
+}
+
+function setSort(mode) {
+  if (mode === 'random' && sortMode.value === 'random') {
+    randomSeed = Math.random()
+  }
+  sortMode.value = mode
+  localStorage.setItem('music.sort', mode)
+}
+
+function iconKinds(kinds) {
+  // 显示主要 kind 徽章；'image' / 'audio' / 'video' / 'pdf'
+  const order = ['audio', 'video', 'pdf', 'image']
+  return order.filter(k => kinds.includes(k))
+}
+
+function kindLabel(k) {
+  return ({ audio: '音', video: '视', pdf: 'PDF', image: '谱' })[k] || k
+}
+
+async function loadPieces() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    pieces.value = await listPieces()
+  } catch (e) {
+    loadError.value = e.message || String(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadPiece(id) {
+  selected.value = null
+  notesDraft.value = ''
+  if (!id) return
+  try {
+    const p = await getPiece(id)
+    selected.value = p
+    notesDraft.value = p.notes || ''
+    selectedId.value = p.id
+    // 默认 tab：有歌词进 lyrics，否则进第一个 tab
+    const t = tabs.value
+    if (!t.find(x => x.key === activeTab.value)) {
+      activeTab.value = t[0]?.key || 'lyrics'
+    }
+    // 自动开播放（如果有 audio）
+    await nextTick()
+    const first = audioAttachments.value[0]
+    if (first && audioEl.value) {
+      audioEl.value.src = attUrl(first.id)
+      audioEl.value.play().catch(() => {})
+    } else if (audioEl.value) {
+      audioEl.value.removeAttribute('src')
+      audioEl.value.load()
+    }
+    lastReportedId = null
+  } catch (e) {
+    loadError.value = e.message || String(e)
+  }
+}
+
+function selectPiece(id) {
+  router.push({ name: 'piece', params: { id } })
+}
+
+function attachmentUrl(id) { return attUrl(id) }
+
+// player controls
+function togglePlay() {
+  if (!audioEl.value || !audioEl.value.src) return
+  if (audioEl.value.paused) audioEl.value.play()
+  else audioEl.value.pause()
+}
+
+function next() {
+  if (!filtered.value.length) return
+  const idx = filtered.value.findIndex(p => p.id === selectedId.value)
+  const nextIdx = (idx + 1) % filtered.value.length
+  selectPiece(filtered.value[nextIdx].id)
+}
+
+function prev() {
+  if (!filtered.value.length) return
+  const idx = filtered.value.findIndex(p => p.id === selectedId.value)
+  const prevIdx = (idx - 1 + filtered.value.length) % filtered.value.length
+  selectPiece(filtered.value[prevIdx].id)
+}
+
+function seek(t) {
+  if (!audioEl.value) return
+  audioEl.value.currentTime = t
+  if (audioEl.value.paused) audioEl.value.play().catch(() => {})
+}
+
+function seekBar(e) {
+  if (!audioEl.value || !duration.value) return
+  const rect = e.currentTarget.getBoundingClientRect()
+  const ratio = (e.clientX - rect.left) / rect.width
+  audioEl.value.currentTime = Math.max(0, Math.min(1, ratio)) * duration.value
+}
+
+function onTimeUpdate(e) {
+  currentTime.value = e.target.currentTime
+  // 上报播放（≥10s 时）
+  if (selectedId.value && lastReportedId !== selectedId.value && currentTime.value >= 10) {
+    lastReportedId = selectedId.value
+    recordPlay(selectedId.value).then(d => {
+      // 同步本地 + list
+      if (selected.value) selected.value.play_count = d.play_count
+      const inList = pieces.value.find(p => p.id === selectedId.value)
+      if (inList) {
+        inList.play_count = d.play_count
+        inList.last_played_at = new Date().toISOString().replace('T', ' ').slice(0, 19)
+      }
+    }).catch(() => {})
+  }
+  // 自动滚歌词
+  if (activeTab.value === 'lyrics' && lyricsBoxEl.value) {
+    const idx = activeLyricIdx.value
+    if (idx >= 0) {
+      const el = lyricsBoxEl.value.querySelector(`.lyrics-line[data-i="${idx}"]`)
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+  }
+  // 持久化最近播放进度
+  if (selectedId.value) {
+    localStorage.setItem('music.last', JSON.stringify({
+      id: selectedId.value,
+      time: currentTime.value,
+    }))
+  }
+}
+
+function onLoaded(e) {
+  duration.value = e.target.duration || 0
+}
+
+function onEnded() {
+  if (repeatOne.value && audioEl.value) {
+    audioEl.value.currentTime = 0
+    audioEl.value.play().catch(() => {})
+  } else {
+    next()
+  }
+}
+
+const progressPct = computed(() => {
+  if (!duration.value) return 0
+  return Math.max(0, Math.min(100, (currentTime.value / duration.value) * 100))
+})
+
+function fmtTime(s) {
+  if (!s || isNaN(s)) return '0:00'
+  const m = Math.floor(s / 60)
+  const sec = Math.floor(s % 60)
+  return m + ':' + (sec < 10 ? '0' : '') + sec
+}
+
+function setTab(k) {
+  activeTab.value = k
+}
+
+// notes auto-save
+function onNotesInput() {
+  if (!selectedId.value) return
+  if (notesTimer) clearTimeout(notesTimer)
+  notesTimer = setTimeout(async () => {
+    try {
+      await patchPiece(selectedId.value, { notes: notesDraft.value || null })
+      notesSavedFlash.value = true
+      setTimeout(() => (notesSavedFlash.value = false), 1500)
+    } catch {}
+  }, 600)
+}
+
+// keyboard
+function onKeyDown(e) {
+  const tag = (e.target.tagName || '').toLowerCase()
+  if (tag === 'input' || tag === 'textarea') return
+  if (e.code === 'Space') { e.preventDefault(); togglePlay() }
+  else if (e.code === 'ArrowRight') {
+    if (audioEl.value) audioEl.value.currentTime = Math.min(audioEl.value.currentTime + 5, duration.value)
+  }
+  else if (e.code === 'ArrowLeft') {
+    if (audioEl.value) audioEl.value.currentTime = Math.max(audioEl.value.currentTime - 5, 0)
+  }
+  else if (e.key === 'Tab') {
+    e.preventDefault()
+    const idx = tabs.value.findIndex(t => t.key === activeTab.value)
+    const nx = tabs.value[(idx + 1) % tabs.value.length]
+    if (nx) activeTab.value = nx.key
+  }
+}
+
+// route → selected
+watch(() => route.params.id, async (idStr) => {
+  const id = idStr ? Number(idStr) : null
+  if (id !== selectedId.value) {
+    selectedId.value = id
+    if (id) await loadPiece(id)
+    else selected.value = null
+  }
+}, { immediate: false })
+
+onMounted(async () => {
+  document.addEventListener('keydown', onKeyDown)
+  await loadPieces()
+  const id = route.params.id ? Number(route.params.id) : null
+  if (id) {
+    selectedId.value = id
+    await loadPiece(id)
+  } else {
+    // 无路由 id：恢复 last
+    try {
+      const last = JSON.parse(localStorage.getItem('music.last') || 'null')
+      if (last && pieces.value.find(p => p.id === last.id)) {
+        router.replace({ name: 'piece', params: { id: last.id } })
+      }
+    } catch {}
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onKeyDown)
+  if (notesTimer) clearTimeout(notesTimer)
+})
+</script>
+
+<style scoped>
+.root {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 20px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border-soft);
+  flex-shrink: 0;
+}
+.topbar h1 { font-size: 18px; font-weight: 600; white-space: nowrap; }
+.topbar .search {
+  flex: 1;
+  max-width: 380px;
+  padding: 8px 14px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  font-size: 14px;
+}
+.topbar .search:focus { border-color: var(--accent-strong); }
+.topbar .count { color: var(--text-mute); font-size: 12px; white-space: nowrap; }
+.topbar .btn-add {
+  width: 36px; height: 36px;
+  border-radius: 50%;
+  background: var(--accent-strong);
+  color: #fff;
+  font-size: 22px; font-weight: 600;
+  display: inline-flex; align-items: center; justify-content: center;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+.topbar .btn-add:hover { background: var(--accent); text-decoration: none; }
+
+.main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.sidebar {
+  width: 340px;
+  min-width: 280px;
+  border-right: 1px solid var(--border-soft);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sort-bar {
+  display: flex;
+  padding: 6px 8px;
+  gap: 0;
+  border-bottom: 1px solid var(--border-soft);
+  flex-wrap: wrap;
+}
+.sort-bar button {
+  font-size: 11px;
+  padding: 5px 10px;
+  color: var(--text-mute);
+  border: 1px solid var(--border);
+  background: var(--bg-elev);
+  border-right-width: 0;
+  transition: all 0.15s;
+}
+.sort-bar button:first-child { border-radius: 4px 0 0 4px; }
+.sort-bar button:last-child { border-radius: 0 4px 4px 0; border-right-width: 1px; }
+.sort-bar button:hover { color: var(--text); }
+.sort-bar button.active {
+  background: var(--bg-active);
+  border-color: var(--accent-strong);
+  color: var(--accent);
+}
+
+.playlist { flex: 1; overflow-y: auto; }
+.hint { padding: 40px 20px; text-align: center; color: var(--text-mute); font-size: 14px; }
+.hint.err { color: var(--accent-red); }
+
+.row {
+  display: flex;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-soft);
+  cursor: pointer;
+  align-items: center;
+  gap: 10px;
+}
+.row:hover { background: var(--bg-card); }
+.row.active { background: var(--bg-active); }
+.row.active .row-title { color: var(--accent); }
+.row-main { flex: 1; min-width: 0; }
+.row-title {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.row-meta {
+  font-size: 11px;
+  color: var(--text-mute);
+  margin-top: 2px;
+  display: flex;
+  gap: 6px;
+}
+.row-meta .cat {
+  color: var(--accent-cyan);
+  background: rgba(6, 182, 212, 0.1);
+  padding: 0 6px;
+  border-radius: 8px;
+}
+
+.badges {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex-shrink: 0;
+}
+.badge {
+  font-size: 10px;
+  color: var(--accent-strong);
+  background: rgba(124, 92, 191, 0.12);
+  padding: 1px 6px;
+  border-radius: 8px;
+}
+.play-count {
+  font-size: 10px;
+  color: var(--text-mute);
+}
+
+.player-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-mute);
+  font-size: 16px;
+}
+
+.now-playing {
+  padding: 18px 24px 8px;
+  text-align: center;
+  flex-shrink: 0;
+}
+.now-playing h2 {
+  font-size: 22px;
+  color: var(--accent);
+  margin-bottom: 4px;
+}
+.np-sub {
+  color: var(--text-dim);
+  font-size: 13px;
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.edit-link {
+  margin-left: 6px;
+  color: var(--text-mute);
+  font-size: 12px;
+}
+.edit-link:hover { color: var(--accent); }
+
+.tabs {
+  display: flex;
+  gap: 0;
+  padding: 0 24px;
+  border-bottom: 1px solid var(--border-soft);
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+.tabs button {
+  background: none;
+  color: var(--text-mute);
+  border-bottom: 2px solid transparent;
+  padding: 10px 16px;
+  font-size: 14px;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+.tabs button:hover { color: var(--text-dim); }
+.tabs button.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+.tabs .tab-n {
+  font-size: 10px;
+  color: var(--text-mute);
+  margin-left: 4px;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 24px 80px;
+  min-height: 0;
+}
+
+.lyrics-box .lyrics-line {
+  padding: 8px 0;
+  font-size: 16px;
+  text-align: center;
+  color: var(--text-mute);
+  line-height: 1.6;
+  cursor: pointer;
+  transition: color 0.3s, font-size 0.3s;
+}
+.lyrics-box .lyrics-line.active {
+  color: var(--text);
+  font-size: 19px;
+  font-weight: 500;
+}
+.lyrics-none {
+  text-align: center;
+  color: var(--text-mute);
+  margin-top: 60px;
+  font-size: 14px;
+}
+.lyrics-raw {
+  margin-top: 20px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  text-align: left;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 12px;
+  background: var(--bg-elev);
+  padding: 12px;
+  border-radius: 6px;
+}
+
+.sheet-box {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+.sheet-img {
+  max-width: 100%;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.pdf-box { display: flex; flex-direction: column; gap: 16px; }
+.pdf-frame {
+  width: 100%;
+  height: 90vh;
+  border: none;
+  background: #fff;
+  border-radius: 6px;
+}
+
+.video-box { display: flex; flex-direction: column; gap: 16px; align-items: center; }
+.video-el {
+  max-width: 100%;
+  width: 100%;
+  max-height: 60vh;
+  background: #000;
+  border-radius: 8px;
+}
+
+.controls {
+  flex-shrink: 0;
+  background: var(--bg-card);
+  padding: 12px 20px;
+  border-top: 1px solid var(--border);
+}
+.ctrl-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+.btn-icon {
+  font-size: 22px;
+  color: var(--text-dim);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s;
+}
+.btn-icon:hover { background: rgba(255,255,255,0.06); color: var(--text); }
+.btn-icon.big {
+  font-size: 26px;
+  background: var(--accent-strong);
+  color: #fff;
+}
+.btn-icon.big:hover { background: var(--accent); color: #fff; }
+.repeat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+  color: var(--text-mute);
+  font-size: 11px;
+}
+.repeat .track {
+  width: 30px; height: 16px;
+  border-radius: 8px;
+  background: var(--border);
+  position: relative;
+  transition: background 0.2s;
+}
+.repeat .thumb {
+  position: absolute;
+  top: 2px; left: 2px;
+  width: 12px; height: 12px;
+  border-radius: 50%;
+  background: var(--text-mute);
+  transition: transform 0.2s, background 0.2s;
+}
+.repeat.on .track { background: var(--accent-strong); }
+.repeat.on .thumb { transform: translateX(14px); background: #fff; }
+
+.bar {
+  flex: 1;
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  cursor: pointer;
+  position: relative;
+}
+.fill {
+  height: 100%;
+  background: var(--accent-strong);
+  border-radius: 2px;
+}
+.time {
+  font-size: 12px;
+  color: var(--text-dim);
+  min-width: 40px;
+  text-align: center;
+}
+
+.notes {
+  width: 260px;
+  border-left: 1px solid var(--border-soft);
+  background: var(--bg-elev);
+  display: none;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.notes header {
+  padding: 12px 16px;
+  font-size: 12px;
+  color: var(--text-mute);
+  border-bottom: 1px solid var(--border-soft);
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+}
+.notes header .saved { color: var(--accent-green); font-size: 10px; }
+.notes textarea {
+  flex: 1;
+  padding: 12px 14px;
+  font-size: 13px;
+  line-height: 1.6;
+  resize: none;
+  color: var(--text-dim);
+}
+.notes textarea::placeholder { color: var(--text-mute); }
+@media (min-width: 1200px) {
+  .notes { display: flex; }
+}
+
+@media (max-width: 768px) {
+  .main { flex-direction: column; }
+  .sidebar { width: 100%; height: 38vh; min-height: 200px; border-right: none; border-bottom: 1px solid var(--border-soft); }
+  .sidebar.has-selected { height: 30vh; }
+}
+</style>