/* =========================================================================
 * 左侧导航菜单 · 五套可切换视觉风格
 *   流光律动 flow / 时空穿梭 time / 极简隐形 minimal / 音乐水晶 crystal / 胶片齿轨 film
 * ========================================================================= */

.sidenav {
  /* ★ 顶部「导航头带」高度：为右上角的展开/收起按钮、以及「时空穿梭」风格的黑胶装饰
     预留一块独立空间。
     ★ 为什么必须有它：这条头带之前是 0，于是 .nav-collapse 和 .nav-deco-top 都直接压在
     第一个菜单项「推荐」上（实测交叠 480px² / 884px²）。深色主题下折叠按钮背景是
     rgba(255,255,255,.05) 几乎透明所以看不出问题；**浅色主题下它的背景是
     --panel / --panel-3（86%~96% 不透明的浅色），会把「推荐」二字整个盖掉** ——
     这正是「浅色时推荐二字不显示」的真正原因。
     头带高度 = 按钮 26px + 上下呼吸 8px = 34px；time 风格顶部黑胶 34px，另加 10px。 */
  --nav-head: 34px;
  position: fixed;
  z-index: 50;
  left: 14px;
  top: calc(var(--top-h) + 4px);
  bottom: calc(var(--player-h) + 34px);
  width: var(--nav-w);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 12px;
  /* 四角圆角统一由 base.css 的 --nav-r / --nav-r-right 控制
     （右两角独立，是为了「导航条贴合右侧内容面板」的直角试验；还原只改那一个变量） */
  border-radius: var(--nav-r) var(--nav-r-right) var(--nav-r-right) var(--nav-r);
  background: var(--glass);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  overflow: hidden;
  transition: width var(--dur) var(--ease), background var(--dur), border-color var(--dur),
    box-shadow 0.7s var(--ease), border-radius var(--dur);
  isolation: isolate;
}
/* 细腻噪点纹理（避免纯玻璃的廉价感） */
.sidenav::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 彩色弥散阴影：取自当前播放封面主色 */
.nav-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 150%;
  height: 62%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--tint), transparent 72%);
  opacity: 0.3;
  filter: blur(42px);
  pointer-events: none;
  z-index: -1;
  transition: background 1s var(--ease), opacity 0.6s;
}
/* ★ .nav-deco 必须带 z-index 且高于 .nav-list(2)：
   「时空穿梭」风格给选中项加了 perspective + translateZ(28px)，
   元素会被投影放大、视觉上向上溢出布局盒 1~11px，而 transform 不参与布局，
   所以靠 --nav-head 留白无法完全吸收。
   不给层级的话，被放大的菜单项会盖到顶部黑胶上（看起来像"变形"）。
   按钮 .nav-collapse 已经是 z-index:4，它不会被盖。
   .nav-deco 是 pointer-events:none，压上去也不会吃掉点击。 */
.nav-ambient, .nav-spot, .nav-deco { position: absolute; pointer-events: none; }
.nav-deco { z-index: 3; }
.nav-spot {
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(120px 120px at var(--sx, 50%) var(--sy, 20%), rgba(255, 255, 255, 0.18), transparent 70%);
}

.nav-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* ★ 顶部留出「导航头带」—— 菜单项从按钮/黑胶下方开始，二者不再压住「推荐」。
     底部仍是原来的 4px。 */
  padding: calc(var(--nav-head) + 4px) 0 4px;
  scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 15px;
  border-radius: 16px;
  color: var(--dim);
  flex: none;
  transition: color var(--dur), background var(--dur), transform var(--dur) var(--ease), box-shadow var(--dur);
}
.nav-ico { position: relative; width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.nav-ico .ic { width: 22px; height: 22px; transition: transform var(--dur) var(--ease); }
.nav-label {
  /* ★ 必须自建层叠上下文并抬到选中胶囊之上。
     .nav-item.active::before 是「已定位元素」，而不加 position 的文字属于「未定位的行内内容」，
     按 CSS 绘制顺序会被前者盖住 —— 图标因为 .nav-ico 有 position:relative 所以没事，
     文字却会被胶囊整块吃掉。crystal/time 的胶囊是半透明的所以看不出，
     **flow 的胶囊底色取自 --tint（不透明），于是「推荐」二字直接消失**。 */
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.24s var(--ease), transform 0.3s var(--ease);
}
body.nav-wide .nav-label { opacity: 1; transform: none; }
.nav-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
}
.nav-sep {
  height: 1px;
  margin: 8px 12px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  flex: none;
}

/* ★ 系统入口的"弱化"要弱而不失：0.55 / 0.32 的透明度乘在 --dim 上只有 2.5:1 / 1.5:1，
   在浅色主题里那颗锁形图标基本读不出来（用户截图里就是最下面那个几乎看不见的图标）。
   0.72 / 0.5 仍然明显比普通项轻，但保住 3:1 的图形对比度下限。 */
.nav-item.is-system { opacity: 0.72; }
.nav-item.is-system:hover { opacity: 1; }
.nav-item.is-system.locked { opacity: 0.5; }

.nav-foot { position: relative; z-index: 2; padding-top: 8px; flex: none; }
.nav-nowplaying {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.nav-np-text { font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.24s; }
body.nav-wide .nav-np-text { opacity: 1; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; flex: none; }
.eq i { width: 2.5px; background: var(--brand); border-radius: 2px; height: 30%; }
.is-playing .eq i { animation: eqBounce 0.9s var(--ease) infinite; }
.eq i:nth-child(2) { animation-delay: 0.15s; }
.eq i:nth-child(3) { animation-delay: 0.3s; }
.eq i:nth-child(4) { animation-delay: 0.45s; }
@keyframes eqBounce { 0%, 100% { height: 22%; } 50% { height: 100%; } }

.nav-collapse {
  position: absolute;
  right: 10px;
  /* ★ 在「导航头带」内垂直居中：头带从内容盒顶部（= padding-top 14px 处）起算 */
  top: calc(14px + (var(--nav-head) - 26px) / 2);
  z-index: 4;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--mute);
  background: var(--panel);
  opacity: 0;
  transition: opacity var(--dur), transform var(--dur), color var(--dur);
}
.nav-collapse .ic { width: 15px; height: 15px; }
.sidenav:hover .nav-collapse { opacity: 1; }
body.nav-wide .nav-collapse .ic { transform: rotate(180deg); }
.nav-collapse:hover { color: var(--text); background: var(--panel-3); }

/* 选中态：液态胶囊高亮 */
.nav-item.active { color: var(--text); }
.nav-item.active::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 26%, transparent), color-mix(in srgb, var(--brand-2) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  animation: capMorph 0.5s var(--ease-out) both;
}
.nav-item.active .nav-ico { color: var(--brand); }
.nav-item.active::after {
  content: "";
  position: absolute;
  left: -12px; top: 50%;
  width: 3px; height: 20px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
  background: var(--brand);
  box-shadow: 0 0 12px var(--brand);
}
@keyframes capMorph {
  0% { border-radius: 26px; transform: scaleX(0.82); opacity: 0; }
  60% { border-radius: 19px; }
  100% { border-radius: inherit; transform: none; opacity: 1; }
}

/* ======================== 风格一：流光律动 flow ======================== */
html[data-nav="flow"] .sidenav {
  /* 圆角不再单独写死：走 .sidenav 的 --nav-r / --nav-r-right（原值即 34px，行为不变） */
  /* ★★ v1.2.11：加一层**不透明的主题兜底底**（--bg-1）。
     原因见下方 crystal 的注释 —— 玻璃色 --glass 只有 ~0.70 的不透明度，
     剩下 30% 直接透出"站内氛围光 + backdrop-filter 的 saturate(1.5)"，
     于是同一个主题的轨道亮度会随页面上半部那块氛围光飘。 */
  background-color: var(--bg-1);
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--tint) 12%, var(--glass)), var(--glass));
  box-shadow: var(--shadow-2), 0 0 46px -12px var(--tint);
}
html[data-nav="flow"] .nav-ambient {
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0.5;
  background:
    radial-gradient(60% 26% at 50% 106%, color-mix(in srgb, var(--tint) 46%, transparent), transparent 70%),
    radial-gradient(50% 22% at 50% -6%, color-mix(in srgb, var(--wave-2) 40%, transparent), transparent 72%);
  animation: flowShift 6.5s ease-in-out infinite;
}
@keyframes flowShift {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.42; }
  50% { transform: translateY(-6px) scale(1.05); opacity: 0.62; }
}
/* 播放时的声波流光 */
html[data-nav="flow"] .sidenav.is-playing .nav-ambient { animation-duration: 2.6s; }
html[data-nav="flow"] .nav-item { border-radius: 999px; }
html[data-nav="flow"] .nav-item:hover .nav-ico { transform: translateX(2px) scale(1.08); }
html[data-nav="flow"] .nav-item:hover .nav-label { transform: translateX(3px); }
html[data-nav="flow"] .nav-item.active::before {
  /* ★ 底色必须走 --brand → --brand-2，不能直接拿 --tint 当底：
     --tint 是从当前播放封面提取的颜色、明度不可控，而文字用的是 --on-brand
     （每个主题里只保证「在 --brand 上可读」）。用 --tint 打底时，
     浅色主题出现白字压浅底、深色主题出现墨字压深底，对比度实测只有 1.1~1.3。
     这里把 --tint 降成 22% 的一层薄纱叠在主题色渐变之上 ——
     既保住「跟随封面」的流光感，又让 --on-brand 的对比度重新受控。 */
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--tint) 22%, transparent), transparent 72%),
    linear-gradient(120deg, var(--brand), var(--brand-2));
  border-color: transparent;
  box-shadow: 0 6px 22px -6px var(--brand);
}
html[data-nav="flow"] .nav-item.active { color: var(--on-brand); }
html[data-nav="flow"] .nav-item.active .nav-ico { color: var(--on-brand); }
html[data-nav="flow"] .nav-item.active::after { display: none; }
/* 均衡器背景条 */
html[data-nav="flow"] .nav-list::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 34px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tint) 34%, transparent) 0 3px, transparent 3px 9px);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: 0.4;
  animation: barsDrift 4s linear infinite;
  pointer-events: none;
}
@keyframes barsDrift { to { background-position: 72px 0; } }

/* ======================== 风格二：时空穿梭 time ======================== */
/* ★★ v1.2.11 主题跟随改造（用户反馈：「明亮主题切换后左侧还是暗色的菜单」）
   改造前的写法是 `background: linear-gradient(200deg, #1c1206, #120b06 60%, #1a1109)` ——
   三个色值全是**硬编码的深褐色**。实测后果（theme_matrix.js，修复前基线）：
     6 套浅色主题（pure-white / forest-green / cream / sakura / ink / mint）× time
     导航轨底色一律 = #160e08，相对亮度 0.005 ⇒ 浅色主题下左侧是一条纯黑轨。
   更严重的是非选中菜单项：`.nav-item:not(.active) { filter: brightness(0.72) }`
   把浅色主题的深色文字又压暗一档，叠在深色轨上 ⇒ **差分像素数 = 0、对比度 = 0**，
   也就是那几项**完全不可见**（不是"不清楚"，是"没有"）。
   现在改为从主题的 --brand / --bg-1 派生：深色主题仍得到琥珀金的黑胶质感，
   浅色主题自动变成"暖奶油 + 琥珀描边"，与整站主题同调。 */
html[data-nav="time"] .sidenav {
  background:
    linear-gradient(200deg,
      color-mix(in srgb, var(--brand) 20%, var(--bg-1)),
      color-mix(in srgb, var(--brand) 7%, var(--bg-1)) 58%,
      color-mix(in srgb, var(--brand) 15%, var(--bg-1)));
  border-color: color-mix(in srgb, var(--brand) 36%, transparent);
  box-shadow: var(--shadow-2), 0 0 46px -14px color-mix(in srgb, var(--brand) 52%, transparent);
  perspective: 900px;
  /* 顶部黑胶装饰 34px 高 + 10px 呼吸 —— 头带不够高它就会压住「推荐」 */
  --nav-head: 44px;
}
html[data-nav="time"] .nav-list { perspective: 900px; transform-style: preserve-3d; }
html[data-nav="time"] .nav-item { transform-style: preserve-3d; transition: transform 0.42s var(--ease), filter 0.42s, opacity 0.42s, color 0.3s; }
/* ★ 纵深只靠透视 + 缩放表达，**不再叠加 filter/opacity**。
   原来 `filter: brightness(0.72)` + `opacity: 0.82` 在浅色主题上把文字压到对比度 0
   （见上方注释）；在深色主题上也只到 2.8:1。视觉上"远"的感觉由 translateZ/scale 完全够用。 */
html[data-nav="time"] .nav-item:not(.active) {
  transform: perspective(900px) translateZ(-30px) scale(0.94);
  /* ★★ v1.2.11：非选中项的**字色**必须是 --text 派生，不能沿用基础样式的 --dim。
     两层原因叠加，实测让"时空穿梭"在浅色主题下成为全站最差的一组：
       ① 基础 `.nav-item { color: var(--dim) }`，而 --dim 是 --text 的 66%~68% alpha，
          压在浅色轨上理论对比只有 4.6:1，本来就贴着 WCAG 正文 4.5 的线；
       ② time 的非选中项被 `translateZ(-30px) scale(0.94)` 做**3D 缩小**，
          再由 `.sidenav::after` 的 fractalNoise（opacity .16 + mix-blend-mode:overlay）
          叠一层 —— 两者都会软化肥薄笔画，实测峰值对比再掉一档到 3.57~4.05。
     改成 84% alpha 的 --text：浅色主题得到深墨字、深色主题得到近白字，
     实测最低 4.0 → 5.4+（见 _verify/sum_theme_v11.js 的 G2）。
     选中态仍靠胶囊底 + glow + translateZ(28px) 放大区分，层级不受影响。 */
  color: color-mix(in srgb, var(--text) 84%, transparent);
}
html[data-nav="time"] .nav-item:hover { transform: perspective(900px) translateZ(6px) scale(1.02); }
html[data-nav="time"] .nav-item.active {
  transform: perspective(900px) translateZ(28px) scale(1.05);
  /* 原来是 #ffe9b0（固定浅金）—— 浅色主题下压在浅面板上只有 1.3:1。
     改成「--brand 与 --text 按 6:4 调」：深色主题≈暖金，浅色主题≈深琥珀/墨色，两边都 ≥8:1。 */
  color: color-mix(in srgb, var(--brand) 60%, var(--text));
  text-shadow: 0 0 16px var(--glow);
}
html[data-nav="time"] .nav-item.active::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 24%, transparent),
    color-mix(in srgb, var(--brand-2) 12%, transparent));
  border-color: color-mix(in srgb, var(--brand) 44%, transparent);
}
/* 菜单顶/底微缩旋转黑胶 */
html[data-nav="time"] .nav-deco { display: block; height: 34px; flex: none; }
html[data-nav="time"] .nav-deco .reel {
  display: block;
  width: 26px; height: 26px;
  margin: 4px auto;
  border-radius: 50%;
  /* 原来是 #2a1c0c/#3a2712/#150e05 三个硬编码深褐 —— 同样改成主题派生 */
  background: repeating-radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--brand) 20%, var(--bg-2)) 0 2px,
    color-mix(in srgb, var(--brand) 34%, var(--bg-2)) 2px 3px);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--brand) 10%, var(--bg-0)),
    0 0 12px color-mix(in srgb, var(--brand) 32%, transparent);
  position: relative;
}
html[data-nav="time"] .nav-deco .reel::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--brand);
}
html[data-nav="time"] .sidenav.is-playing .nav-deco-bottom .reel { animation: spin 2.2s linear infinite; }
html[data-nav="time"] .nav-deco-top .reel { animation-direction: reverse; }
html[data-nav="time"] .sidenav:not(.is-playing) .nav-deco .reel { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
html[data-nav="time"] .nav-collapse { color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, transparent); }

/* ======================== 风格三：极简隐形 minimal ======================== */
html[data-nav="minimal"] .sidenav {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: width var(--dur) var(--ease), background 0.5s var(--ease), box-shadow 0.5s, border-color 0.5s, backdrop-filter 0.5s;
}
/* 极简风格原本是 30px（比其它风格略小），现在改成只覆盖半径变量，不影响直角开关 */
html[data-nav="minimal"] { --nav-r: 30px; }
html[data-nav="minimal"] .sidenav::after { opacity: 0; transition: opacity 0.5s; }
html[data-nav="minimal"] .nav-glow { opacity: 0; transition: opacity 0.6s; }
/* ★★ v1.2.11 可读性修复（用户反馈：「有的切换后左侧菜单不显示了」）
   「极简隐形」的设计意图是**面板隐形**（背景/描边/阴影全无），不是**图标隐形**。
   但原来两处叠着削弱：`color: var(--mute)`（各主题 0.4~0.46 的文字色）
   再乘 `opacity: 0.7` ⇒ 等效 alpha 只有 0.28~0.32。
   实测（theme_matrix.js，修复前基线）14 套主题 × minimal 的非选中图标对比度：
     **1.83 / 1.85 / 1.87 / 1.88 / 1.89 / 1.92 / 2.20 / 2.30 / 2.31 / 2.38 / 2.42 / 2.45 / 2.71 / 2.94** —— 全部低于 3:1，
   浅色主题上就是"一片极淡的灰点"，用户读成"菜单没了"。
   改成 --dim（主题的次级文字色，各主题都保证 ≥4.5:1）+ 不再降透明；
   "隐身"感全部交给面板本身（transparent + 无描边）与 hover 渐显承担。 */
html[data-nav="minimal"] .nav-item { color: var(--dim); background: transparent !important; }
html[data-nav="minimal"] .nav-item::before { display: none; }
html[data-nav="minimal"] .nav-item.active { color: var(--text); }
html[data-nav="minimal"] .nav-item.active .nav-ico { color: var(--brand); }
html[data-nav="minimal"] .sidenav:hover,
html[data-nav="minimal"] .sidenav:focus-within,
html[data-nav="minimal"] .sidenav.is-wide {
  background: var(--glass-2);
  border-color: var(--hair);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(34px) saturate(1.7);
  -webkit-backdrop-filter: blur(34px) saturate(1.7);
}
html[data-nav="minimal"] .sidenav:hover::after,
html[data-nav="minimal"] .sidenav:focus-within::after,
html[data-nav="minimal"] .sidenav.is-wide::after { opacity: 0.14; }
html[data-nav="minimal"] .sidenav:hover .nav-glow,
html[data-nav="minimal"] .sidenav:focus-within .nav-glow,
html[data-nav="minimal"] .sidenav.is-wide .nav-glow { opacity: 0.3; }
html[data-nav="minimal"] .sidenav:hover .nav-spot,
html[data-nav="minimal"] .sidenav:focus-within .nav-spot { opacity: 1; }
html[data-nav="minimal"] .nav-item:hover { background: var(--panel-2) !important; color: var(--text); }
/* 折扇展开：逐项延迟滑入
   ★ 只保留位移，不再叠 opacity（同上：那 0.7 会把图标压到 2:1 以下）。 */
html[data-nav="minimal"] .nav-item { transform: translateX(-10px); }
html[data-nav="minimal"] .sidenav:hover .nav-item,
html[data-nav="minimal"] .sidenav:focus-within .nav-item,
html[data-nav="minimal"] .sidenav.is-wide .nav-item { transform: none; opacity: 1; }
html[data-nav="minimal"] .nav-item:nth-child(1) { transition-delay: 0.02s; }
html[data-nav="minimal"] .nav-item:nth-child(2) { transition-delay: 0.05s; }
html[data-nav="minimal"] .nav-item:nth-child(3) { transition-delay: 0.08s; }
html[data-nav="minimal"] .nav-item:nth-child(4) { transition-delay: 0.11s; }
html[data-nav="minimal"] .nav-item:nth-child(5) { transition-delay: 0.14s; }
html[data-nav="minimal"] .nav-item:nth-child(6) { transition-delay: 0.17s; }
html[data-nav="minimal"] .nav-nowplaying { background: transparent; border-color: transparent; }

/* ======================== 风格四：音乐水晶 crystal（默认） ======================== */
html[data-nav="crystal"] .sidenav {
  /* 圆角走 .sidenav 的 --nav-r / --nav-r-right（原值即 34px，行为不变） */
  /* ★★ v1.2.11：把轨道底从"纯半透明玻璃"改成"玻璃 + 不透明主题兜底"。
     这是本轮唯一一处**用数据逼出来的结构改动**，理由写清楚：
       玻璃色 --glass 的不透明度只有 ~0.70（`color-mix(--brand 12%, rgba(...,0.66))`
       → α=0.70），剩下 30% 是**直接透出背后的东西** —— 而轨道背后正好是
       `body::before` 那块 82vh 高的站内氛围光，再被 `backdrop-filter: saturate(1.5)` 提纯。
       于是"轨道底色"根本不是主题色，而是**主题色 × 氛围光 × 背景图**的混合体，明度不可控。
     实测（_verify/out-theme-matrix/run-after.log）三套深色主题的 crystal 轨道被抬到中间明度：
       sunset     #985a4c（亮度 0.145）· warm-orange #9d5925（0.145）· neon-purple #744d9e（0.115）
     压在中间明度上时，白色系图标（--dim 是 --text 的 66% alpha）峰值对比只有 3.64~4.12，
     掉到 WCAG 正文 4.5 以下 —— 这正是用户说的"切换后左侧菜单不显示了"。
     改成 `background-color: var(--bg-1)`（**不透明、纯主题色**）打底、
     玻璃色只作为其上的一层半透明渐变：轨道亮度从此只由主题决定，
     深色主题必暗、浅色主题必亮（_verify/sum_theme_v11.js 的 G3/G4 就是钉这一点）。
     ★ 必须用 background-color / background-image 拆开写：
       `background: <渐变>, var(--glass), var(--bg-1)` 会被判成"第 2 层是颜色"⇒
       整条声明在 computed-value 阶段失效 ⇒ 静默回退到基础样式。 */
  background-color: var(--bg-1);
  background-image:
    linear-gradient(175deg, color-mix(in srgb, var(--tint) 9%, transparent), transparent 42%),
    linear-gradient(var(--glass), var(--glass));
  box-shadow: var(--shadow-2), 0 22px 60px -22px var(--tint);
  border-color: var(--hair);
}
html[data-nav="crystal"] .sidenav::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.36), transparent 38%, transparent 62%, color-mix(in srgb, var(--tint) 40%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
html[data-nav="crystal"] .nav-list::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 1px; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--line), transparent);
  opacity: 0.5;
}
html[data-nav="crystal"] .nav-item { border-radius: 18px; }
html[data-nav="crystal"] .nav-item:hover { background: var(--panel-2); color: var(--text); }
html[data-nav="crystal"] .nav-item:hover .nav-ico .ic { transform: scale(1.12) rotate(-4deg); }
/* 悬停时文字如气泡自图标旁浮现 */
html[data-nav="crystal"] .nav-label {
  transform: translateX(-14px) scale(0.92);
  filter: blur(3px);
  transition: opacity 0.26s var(--ease), transform 0.32s var(--ease-out), filter 0.3s;
}
body.nav-wide[data-nav="crystal"] .nav-label,
html[data-nav="crystal"] body.nav-wide .nav-label { transform: none; filter: none; }
html[data-nav="crystal"] .nav-item:hover .nav-label { filter: none; }
html[data-nav="crystal"] .nav-item.active .nav-ico::after {
  content: "";
  position: absolute;
  top: -7px; right: -7px; bottom: -7px; left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 34%, transparent), transparent 70%);
  z-index: -1;
}
html[data-nav="crystal"] .nav-collapse { border-radius: 10px; }

/* ======================== 风格五：胶片齿轨 film ======================== */
/* 设计意图：把左侧轨道读成一**条竖向走的胶片**。
 *   ① 左右两条齿孔带（.nav-ambient 的 ::before / ::after）——胶片与生俱来的识别符号；
 *   ② 每个菜单项 = 一格画格：近直角、带描边、底色比轨道深一档；
 *   ③ 选中 = 这一格"曝光"：品牌色渐变灌满、文字换成 --on-brand；
 *   ④ 播放时齿孔**向下走片**（背景位移动画），暂停时自动停下。
 *
 * ★ 为什么这套不需要新的 DOM：齿孔用 .nav-ambient 的两个伪元素画，
 *   片盘复用 time 那对 .nav-deco .reel。改款只动 CSS，不碰 index.html 结构 ——
 *   time 已经证明这条复用路线可行（同一对 reel 在两套风格里长得完全不同）。
 *
 * ★ 为什么用 radial-gradient 点而不是 repeating-linear-gradient 条纹：
 *   胶片齿孔是**离散的圆角小孔**，条纹画出来是"虚线"，远看会跟 flow 的均衡器条撞。
 *   圆点 + background-size 控制步距，一眼就是胶片。
 *
 * ★ 颜色全部走 --text / --brand 派生，不写死任何一个色值：
 *   浅色主题得到"纸白轨道 + 灰齿孔 + 品牌色画格"，深色主题得到"夜幕轨道 + 亮齿孔"，
 *   两边都是胶片，只是冲印在不同底材上。 */
html[data-nav="film"] .sidenav {
  background-color: var(--bg-1);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 38%),
    linear-gradient(var(--glass), var(--glass));
  border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
  box-shadow: var(--shadow-2), 0 0 40px -16px color-mix(in srgb, var(--brand) 46%, transparent);
  /* 顶部片盘 24px + 上下呼吸，保住"推荐"不被压住（与 time 同一个坑） */
  --nav-head: 42px;
}
html[data-nav="film"] .nav-ambient { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; }
html[data-nav="film"] .nav-ambient::before,
html[data-nav="film"] .nav-ambient::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 7px;
  border-radius: 4px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 32%, transparent) 2.2px, transparent 2.8px);
  background-size: 7px 21px;
  background-repeat: repeat;
}
html[data-nav="film"] .nav-ambient::before { left: 3px; }
html[data-nav="film"] .nav-ambient::after { right: 3px; }
/* 走片：播放时才动，暂停即停（用 animation-play-state 而不是删动画，
   否则暂停会"跳"回起点，看起来像穿帮） */
html[data-nav="film"] .sidenav.is-playing .nav-ambient::before,
html[data-nav="film"] .sidenav.is-playing .nav-ambient::after {
  animation: filmRun 1.5s linear infinite;
}
@keyframes filmRun { to { background-position: 0 21px; } }
/* 画格 */
html[data-nav="film"] .nav-item {
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--line-2) 62%, transparent);
  background: color-mix(in srgb, var(--bg-2) 36%, transparent);
  transform: translateX(-3px);
  transition: transform 0.34s var(--ease), background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.34s;
}
html[data-nav="film"] .nav-item:hover {
  transform: translateX(3px);
  background: color-mix(in srgb, var(--brand) 10%, var(--bg-2));
  border-color: color-mix(in srgb, var(--brand) 36%, transparent);
  color: var(--text);
}
/* 选中：这一格曝光。基础样式的液态胶囊（::before）与左侧指示条（::after）
   都关掉 —— 画格本身就是选中标识，再叠胶囊会变成"两套语言打架"。 */
html[data-nav="film"] .nav-item.active::before,
html[data-nav="film"] .nav-item.active::after { display: none; }
html[data-nav="film"] .nav-item.active {
  transform: translateX(3px);
  color: var(--on-brand);
  border-color: transparent;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px -8px var(--brand);
}
html[data-nav="film"] .nav-item.active .nav-ico { color: var(--on-brand); }
/* 片盘：沿用 time 的那对 .nav-deco .reel，改成"方头盘 + 中间方块轴" */
html[data-nav="film"] .nav-deco { display: block; height: 30px; flex: none; }
html[data-nav="film"] .nav-deco .reel {
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px auto;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--brand) 30%, transparent) 0 3px,
    transparent 3px 8px);
  position: relative;
}
html[data-nav="film"] .nav-deco .reel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 2px;
  background: var(--brand);
}
html[data-nav="film"] .sidenav.is-playing .nav-deco-bottom .reel { animation: spin 2.6s linear infinite; }
html[data-nav="film"] .nav-deco-top .reel { animation-direction: reverse; }
html[data-nav="film"] .sidenav:not(.is-playing) .nav-deco .reel { animation-play-state: paused; }
html[data-nav="film"] .nav-collapse { border-radius: 7px; color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, transparent); }
/* 当前播放条也做成一小格胶片，跟轨道同一套语言 */
html[data-nav="film"] .nav-nowplaying { border-radius: 8px; border-color: color-mix(in srgb, var(--line-2) 62%, transparent); }

/* 管理员「系统」入口：金边呼吸灯 */
.nav-item.is-system.admin {
  opacity: 0.78;
  border: 1px solid rgba(245, 196, 81, 0.3);
  box-shadow: 0 0 0 0 rgba(245, 196, 81, 0.5);
  animation: goldBreath 3.4s ease-in-out infinite;
}
@keyframes goldBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0.34); }
  50% { box-shadow: 0 0 16px 2px rgba(245, 196, 81, 0.34); }
}
.nav-item.is-system.admin:hover {
  animation: none;
  opacity: 1;
  box-shadow: 0 0 22px 3px rgba(245, 196, 81, 0.5);
  background: linear-gradient(120deg, rgba(245, 196, 81, 0.2), rgba(255, 255, 255, 0.06) 60%);
}
.nav-item.is-system.admin:hover::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.42) 48%, transparent 66%);
  animation: sweep 0.85s var(--ease-out);
  pointer-events: none;
}
@keyframes sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* 年代联动：切换到 80 年代皮肤时，时空穿梭菜单字体变像素/霓虹 */
body[data-skin="80s"] .sidenav[data-nav="time"] .nav-label {
  font-family: var(--font-num);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-skin="70s"] .sidenav[data-nav="time"] .nav-label {
  font-family: Georgia, "Songti SC", serif;
  letter-spacing: 0.08em;
}

/* ---------------- 移动端 / 窄屏：只有底部标签栏，没有左侧导航 ----------------
 * ★ 用户要求（2026-09-23）：手机端底部标签栏（推荐 / 电台 / 音乐 / MV / 我的）
 *   已经覆盖全部主栏目，顶栏左上角那颗汉堡按钮与它拉出的左侧抽屉都不再需要 —— 已整体删除。
 *   同批删掉的还有：`.drawer-mask` 遮罩、`body.drawer-open` 联动、
 *   `#i-menu` 按钮，以及 ui.js / app.js 里的绑定与清理代码。
 *
 * ★ 这里为什么必须 `display:none`，而不是像原来那样 `transform: translateX(-104%)` 挪出屏幕：
 *   挪出屏幕的元素**仍然留在布局树里、仍然可被 Tab 聚焦** —— 键盘用户会一路 Tab 进一个
 *   看不见的导航，读屏也会把它读出来。`display:none` 才是真正从可访问性树里移除。
 *
 * ★ 顺带记录原抽屉那个「点开是模糊的」的真实成因（同类问题以后要认得）：
 *   `.drawer-mask` 是 body 的直接子元素、`z-index:85`；
 *   而 `.sidenav` 虽然写了 `z-index:90`，却是 `.app` 的孩子，
 *   而 `.app` 是 `position:relative; z-index:1` —— **自己建立了一个层叠上下文**。
 *   层叠上下文的 z-index 只在**同一个上下文内**比较，所以整个 .app 子树
 *   一律按 z-index:1 参与 body 的层叠，85 的遮罩反而盖在整个 .app 之上（含抽屉），
 *   它的 `backdrop-filter: blur(3px)` 就把抽屉里的文字一起糊掉了 —— 线上实测复现。
 *   ⇒ 教训：**跨层叠上下文比 z-index 是无效的**。要把 A 盖在 B 上，
 *     两者必须在同一层叠上下文里（或把遮罩也放进 .app）。
 * ============================================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767px) {
  .sidenav { display: none; }
}

/* =========================================================================
 * ★ 矮屏收口（老 720p 笔记本 / 1280×653 这类）
 *   必须放在文件末尾：上面的 `html[data-nav="time"] .sidenav { --nav-head: 44px }`
 *   特异度是 (0,2,1)，放在它前面写覆盖一律无效，所以这里的规则要
 *   ① 同样带 html[data-nav="time"] 前缀，② 位于其后。
 *   目的：压缩「导航头带」与菜单行高，否则顶部留白会把最后一个菜单项顶出可视区。
 *   实测 1280×653 + time：不压缩时 scrollHeight 393 / clientHeight 383（溢出 10px，
 *   而 .nav-list 的滚动条是隐藏的，用户看不出还能滚）；压缩后降到 351，留出 30px 余量。
 * ========================================================================= */
@media (max-height: 760px) {
  .sidenav { --nav-head: 30px; }
  html[data-nav="time"] .sidenav { --nav-head: 36px; }
  html[data-nav="film"] .sidenav { --nav-head: 34px; }
  .nav-list { gap: 2px; }
  .nav-item { height: 46px; }
}