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

.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;
  inset: 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 {
  inset: 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;
}

.nav-item.is-system { opacity: 0.55; }
.nav-item.is-system:hover { opacity: 1; }
.nav-item.is-system.locked { opacity: 0.32; }

.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;
  inset: 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，行为不变） */
  background: 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 {
  inset: 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 ======================== */
html[data-nav="time"] .sidenav {
  background: linear-gradient(200deg, #1c1206, #120b06 60%, #1a1109);
  border-color: rgba(245, 196, 81, 0.2);
  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; }
html[data-nav="time"] .nav-item:not(.active) { transform: perspective(900px) translateZ(-30px) scale(0.94); filter: brightness(0.72); opacity: 0.82; }
html[data-nav="time"] .nav-item:hover { transform: perspective(900px) translateZ(6px) scale(1.02); filter: brightness(1.16); opacity: 1; }
html[data-nav="time"] .nav-item.active {
  transform: perspective(900px) translateZ(28px) scale(1.05);
  color: #ffe9b0;
  text-shadow: 0 0 16px rgba(245, 196, 81, 0.6);
}
html[data-nav="time"] .nav-item.active::before {
  background: linear-gradient(135deg, rgba(245, 196, 81, 0.22), rgba(224, 150, 74, 0.1));
  border-color: rgba(245, 196, 81, 0.4);
}
/* 菜单顶/底微缩旋转黑胶 */
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%;
  background: repeating-radial-gradient(circle at 50% 50%, #2a1c0c 0 2px, #3a2712 2px 3px);
  box-shadow: inset 0 0 0 6px #150e05, 0 0 12px rgba(245, 196, 81, 0.3);
  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: #e5c07b; background: rgba(245, 196, 81, 0.12); }

/* ======================== 风格三：极简隐形 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; }
html[data-nav="minimal"] .nav-item { color: var(--mute); background: transparent !important; }
html[data-nav="minimal"] .nav-item::before { display: none; }
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); }
/* 折扇展开：逐项延迟滑入 */
html[data-nav="minimal"] .nav-item { transform: translateX(-10px); opacity: 0.7; }
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，行为不变） */
  background:
    linear-gradient(175deg, color-mix(in srgb, var(--tint) 9%, transparent), transparent 42%),
    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;
  inset: 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;
  inset: -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; }

/* 管理员「系统」入口：金边呼吸灯 */
.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;
  inset: 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;
}

/* ---------------- 移动端 / 窄屏：抽屉 + 底部标签栏 ---------------- */
@media (max-width: 767px) {
  .sidenav {
    left: 0;
    top: 0;
    bottom: 0;
    width: 268px;
    min-height: 0;
    border-radius: 0 28px 28px 0;
    padding: 20px 16px;
    transform: translateX(-104%);
    transition: transform 0.4s var(--ease-out), background var(--dur);
    z-index: 90;
  }
  .sidenav .nav-label { opacity: 1; transform: none; filter: none; }
  .sidenav .nav-np-text { opacity: 1; }
  html[data-nav] .sidenav .nav-item:not(.active) { transform: none; filter: none; opacity: 0.9; }
  body.drawer-open .sidenav { transform: none; }
  .nav-collapse { display: none; }
  .drawer-mask {
    position: fixed; inset: 0; z-index: 85;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fadeIn 0.3s var(--ease) both;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}
@media (min-width: 768px) {
  .drawer-mask { display: none !important; }
}

/* =========================================================================
 * ★ 矮屏收口（老 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; }
  .nav-list { gap: 2px; }
  .nav-item { height: 46px; }
}