/* ==========================================================================
   I Musicer · 深色（ThinkPad 黑）配色层（2026-09-27 自 theme-thinkpad.css 段 B 拆出）
   --------------------------------------------------------------------------
   配色定稿：黑机身 #08080a / 灰字 #e8e6e3·#8e8e93 / 一点红 #ea4d45（全站唯一彩色）

   ★ 为什么拆成独立文件（昼夜手动切换 2026-09-27）：
     手动切换按钮需要「单独开关深色层」，而 @media (prefers-color-scheme: ...)
     无法被 data 属性覆盖，只能整文件控制。拆出后每页 <head> 里：
       <link ... theme-dark.css  id="cssDark"  media="(prefers-color-scheme: dark)">
       <link ... theme-day.css   id="cssDay"   media="(prefers-color-scheme: light)">
     三种模式由 js/main.js（按钮）与 head 内联裁决脚本共同维护：
       auto  ：两层都启用，media 原样 → 浏览器按系统偏好自动二选一（与拆分前行为一致）
       light ：cssDark.disabled = true
       dark  ：cssDay.disabled = true + cssDark.media = 'all'
     head 内联脚本在首帧渲染前按 localStorage('im-color-mode') 预置，避免闪色。

   ★ 深浅的开关控制点在每页 <head> 的 <link media> 属性上（本文件内不再包 @media）：
       <link ... theme-dark.css  id="cssDark"  media="(prefers-color-scheme: dark)">
     三种模式由 js/main.js（按钮）与 head 内联裁决脚本共同维护：
       auto  ：media 属性原样 → 浏览器按系统偏好自动二选一（与无手动功能时行为一致）
       light ：cssDark.disabled = true
       dark  ：cssDark.media = 'all'（强制生效）+ cssDay.disabled = true
     head 内联脚本在首帧渲染前按 localStorage('im-color-mode') 预置，避免闪色。
     ⚠ 因此别在本文件里再包一层 @media (prefers-color-scheme: ...)——那会和
       link.media 双重拦截，手动 dark（系统浅色）时整层失效。

   加载顺序（各页 <head>）：style.css → theme-thinkpad.css（结构）→ 本文件 → [home-vinyl.css] → theme-day.css
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   页面配色（外层由 link.media 控制：auto=系统深色时生效，手动 dark=强制生效）
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 变量覆盖（:root 兜底覆盖无 data-theme 的页面） ---------- */
:root,
[data-theme="thinkpad"] {
  --bg: #08080a;              /* ThinkPad 黑：近乎纯黑 */
  --bg-soft: #101013;         /* 次级块底色 */
  --card: #131316;            /* 卡片底 */
  --ink: #e8e6e3;             /* 主文字 */
  --ink-2: #8e8e93;           /* 次级灰（Apple 系灰） */
  --ink-3: #6e6e73;           /* 弱化灰 */
  --line: rgba(255, 255, 255, .10);   /* 细分隔线 */
  --dark: #101013;            /* 深色块（CTA / 封面衬底） */
  --dark-2: #16161a;          /* 深色块内的浅色面 */
  --accent: #ea4d45;          /* TrackPoint 红：全站唯一彩色（色块：按钮/唱针/边框） */
  --accent-deep: #ed6761;     /* hover 提亮一档（2026-09-20） */
  --accent-text: #ea4d45;     /* 文字专用红：与色块同色（2026-09-18 用户定稿） */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-lift: 0 14px 34px rgba(0, 0, 0, .6);
  color-scheme: dark;         /* 原生表单控件走深色 */
}

body {
  background: var(--bg);
  color: var(--ink);
}

/* ---------- 反向覆盖各页内联「深墨绿」块的 !important 规则 ---------- */
.site-header {
  background: rgba(8, 8, 10, .82) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom-color: var(--line) !important;
}

.hero-desc, .track-note {
  color: #c6c4c2 !important;      /* hero 导语 = 参考稿 ink@85%；曲目注释中性暖灰 */
}

.hero-eyebrow, .eyebrow, .card-vol {
  color: var(--accent-text) !important;      /* 红提亮一档，黑底可读 */
}
.hero-eyebrow::before {
  background: var(--accent-text) !important;
}

.btn-ghost-light {
  border-color: rgba(255, 255, 255, .22) !important;
  color: var(--ink) !important;
}
.btn-ghost-light:hover {
  border-color: rgba(255, 255, 255, .45) !important;
}

/* ---------- 深底可读性修补 ---------- */

/* 卡片 hover：深底描边 */
.card { border-color: var(--line); }
a.card:hover, .card:hover { border-color: rgba(255, 255, 255, .22); }

/* 搜索框与下拉面板 */
.search-input {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--ink);
}
.search-results {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .65);
}

/* 二维码保留白底（扫码对比度），只换边框 */
.contact-item .qr-img { border-color: var(--line); }

/* 页脚 */
.site-footer { background: var(--bg); }

/* Hero 文字光晕：黑 */
body.home-vinyl .hero-title {
  text-shadow: 0 1px 16px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .6);
}

/* 首页遮罩：径向中心跟随唱片 60%，四周压暗护读 */
body.home-vinyl .bg-vinyl::after {
  background:
    radial-gradient(115% 85% at 60% 50%, transparent 0 28%, rgba(8, 8, 10, .62) 100%),
    linear-gradient(rgba(8, 8, 10, .22), rgba(8, 8, 10, .22));
}
/* 移动端遮罩中心跟随唱片：透明区落在唱片上，四周压暗护住上方文案 */
@media (max-width: 720px) {
  body.home-vinyl .bg-vinyl::after {
    background:
      radial-gradient(115% 85% at 52% 66%, transparent 0 26%, rgba(8, 8, 10, .62) 100%),
      linear-gradient(rgba(8, 8, 10, .22), rgba(8, 8, 10, .22));
  }
}

/* ---------- 优化 2（2026-09-18 用户确认 / 2026-10-05 修正）---------- */
/* ---------- 封面在深色底上必须「有边界」 ----------
   原方案：filter brightness(.94) saturate(.88) + 1px rgba(255,255,255,.07) 描边。
   2026-10-05 实测失效，根因不是亮度而是**明度重合**：
     9 张封面原图平均亮度只有 26/255（本质是近黑图），深色卡片底是 #131316(21)，
     页面底 #08080a(8)。采样结果：封面区 (8,8,10) 与页面底 (8,8,10) **完全同色**
     → 封面在深色下不是「变暗」，是**直接消失进背景**，卡片变成一块纯黑。
   浅色下同一个封面没问题，因为白卡片(255) 与黑封面(26) 反差极大。
   ✓ 修法（不动封面图本身，只给边界）：
     ① 描边从 .07 / 1px 提到 .16 / 1.5px —— 封面从卡片里「浮」出来；
     ② brightness 由 .94 提到 1.06，抵消近黑图的先天暗淡（hover 提到 1.18）；
     ③ saturate 提到 1.04，暖色剪影不至于被灰掉。
   ⚠ 不要试图靠更暗的 filter 解决——那只会让封面更沉（方向反了）。 */
.playlist-head .cover-frame img,
.card-cover img {
  filter: brightness(1.06) saturate(1.04);
  box-shadow: var(--shadow-card), 0 0 0 1.5px rgba(255, 255, 255, .16);
}
.playlist-head .cover-frame::before {
  border: 1px solid rgba(255, 255, 255, .12);
}
/* hover 恢复一点生气（下方优化 6 会再提到 1.18） */
a.card:hover .card-cover img,
a:hover .playlist-head .cover-frame img {
  filter: brightness(1.14) saturate(1.06);
}

/* ---------- 「收听线索」在深色下的适配（2026-10-05，第 5 条）----------
   浅色版 .story-note 用 --ink-3 做正文灰；深色下 --ink-3 是 #6e6e73，
   在 #08080a 上对比度偏低（小字更明显），提到 --ink-2(#8e8e93) 才够读。
   左边竖线也从 --line 提到略亮一档，避免容器边界看不见。 */
.playlist-head-info .story-note-body { color: var(--ink-2); }
.playlist-head-info .story-note { border-left-color: rgba(255, 255, 255, .18); }
.playlist-head-info .story-note-label { color: var(--accent-text); }

/* ---------- 公众号订阅模块 .mp-cta 在深色下的适配（2026-10-06 新增）----------
   与上面的 .story-note 同源问题：--ink-3 在 #08080a 上对比度偏低，
   小字（.mp-cta-desc 13px / .mp-cta-biz 12px）更明显，所以提到 --ink-2。
   另：底色 --bg-soft 与页底同色时要靠边线划出容器，否则块"消失"。 */
.mp-cta-desc { color: var(--ink-2); }
.mp-cta-biz { color: var(--ink-2); }
.mp-cta-biz:hover { color: var(--ink); }
.mp-cta { border-color: rgba(255, 255, 255, .16); }
.mp-cta-act { color: var(--accent-text); }
.mp-cta-act:hover { color: var(--accent-deep); }

/* ---------- 优化 3（2026-09-18 用户反馈）：红色小字统一 ----------
   全站「文字用红」一律走 --accent-text。
   注：浅色不需要本段——style.css 里这些选择器本来就是 var(--accent)，同色。 */
.hero-eyebrow, .eyebrow, .card-vol,
.about-head .eyebrow, .stat-num,
.preview summary::before,
.promo-bar a,
.search-result .sr-badge, .search-result mark,
.comment-name,
.disc-post-body a,
.dim-card .dim-tag,
.tool-link, .badge-soon,
.wechat-cta-text .wechat-cta-desc b {
  color: var(--accent-text) !important;
}
.disc-post-body a { border-bottom-color: rgba(234, 77, 69, .35) !important; }

/* ---------- 优化 4（2026-09-18 用户反馈，二次加亮）：弱化灰小标签 ----------
   「7 首 / 7 TRACKS」「歌单定制 PLAYLIST」这类小节标签原 --ink-3 #6e6e73 太暗，
   先提 10% 到 #79797f 仍不够，用户要求再亮些 → 提到次级灰 #8e8e93。 */
.about-section .sec-label,
.shop-section .sec-label,
.playlist-head-info .sub-en {
  color: #8e8e93;
}

/* ---------- 优化 6（2026-09-20 用户反馈）：触碰时「一点红」提亮一档 ----------
   注意：基点规则（优化 3）带了 !important，这里必须同强度才能覆盖。 */
.card-vol, .eyebrow, .hero-eyebrow, .stat-num,
.search-result .sr-badge, .search-result mark,
.tool-link, .badge-soon {
  transition: color .22s ease;
}
a.card:hover .card-vol, .card:hover .card-vol,
a.card:hover .eyebrow, .card:hover .eyebrow,
.card:hover .stat-num,
.search-result:hover .sr-badge, .search-result:hover mark,
.tool-link:hover, .badge-soon:hover {
  color: var(--accent-deep) !important;
}
/* 卡片 hover 时封面进一步提亮，与描边一起形成整体的「唤醒」感
   （2026-10-05 与上方「优化 2」对齐：基准已改为 1.06，故hover 提到 1.18） */
a.card:hover .card-cover img,
a:hover .playlist-head .cover-frame img {
  filter: brightness(1.18) saturate(1.08) !important;
}