/* ============================================================================
   轻影 · 日间模式（独立开关，2026-10-15）

   ★ 三条铁律（本文件存在的全部理由）
     1. 【零侵入夜间】除末尾第 8 节「新开关自身的状态样式」外，所有规则都挂在
        `:where(html[data-theme="light"])` 之下。html 上没有这个属性时，这些
        规则一条都不生效，夜间模式与加这个功能之前逐像素一致。
        夜间模式的既有代码（styles.css / index-1230.css / rank.css /
        modals.css / player.css / player-detail.css）【一个字都没改】。
        （第 8 节之所以不挂前缀：那是「新增的第 3 个开关」的状态样式，两个
          主题下都得有，且只命中 #dayModeToggle，不会碰到任何一个旧开关。）
     2. 【单一开关】唯一入口 = 设置面板顶部的弹珠开关（#dayModeToggle）。
        存储键 `ltv_theme`（'light' | 'dark'），缺省 = dark（老用户无感升级）。
        切换只做两件事：改 html[data-theme] + 写 localStorage，不刷新页面、
        不重载样式表、不走网络。
     3. 【覆盖而非改写】夜间那套是「暖黑底 + 暖白字 + 单一橙点」，日间这套
        是它的镜像：真暖白底 + 暖黑字 + 同一个橙。橙色主色 #ff9c48 两侧完全共用，
        只把它「当文字用」时压深一档（--accent-ink），否则白底上糊成一片。

   ★ 为什么作用域写成 :where(html[data-theme="light"]) 而不是裸的 html[data-theme="light"]
      —— 这是本文件唯一一个「不看代码就会写错」的地方，务必看完再改。

      :where() 的权重恒为 0。于是 `:where(html[data-theme="light"]) .bg-\[\#222\]`
      的权重是 (0,1,0) —— 与它要覆盖的原工具类**完全相等**，只靠「本文件排在最后」
      取胜；而 `html[data-theme="light"] .bg-\[\#222\]` 是 (0,2,1)，凭空多出一级。

      多出这一级的后果不是理论问题，是当场踩到的坑（2026-10-15，截图实测）：
      源清单里的复选框是 `<input class="form-checkbox bg-[#222] border-[#333]">`，
      「已勾选 = 橙底白勾」由 styles.css 的 `.form-checkbox:checked`(0,2,0) 给出。
      加前缀后我的 `.bg-\[\#222\]` 变成 (0,2,1) → 反压 :checked → 日间下所有已勾选
      的源看着像没勾（白底 + 白勾）。同一机制还会吃掉 .rank-tab.on / .ct-tab.ct-on /
      .pd-skip.on / .rank-no.gold / .rank-score.mid / .resource-card.current /
      input:checked + .slider 等等一整类「状态色」。
      换成 :where() 后，这类状态规则(0,2,0)自然继续赢，本文件只管「没状态时的底色」，
      语义与「把浅色规则追加到原样式表末尾」完全一致。

      兼容性：:where() 需要 Chrome/Edge 88+（2021-01）、Safari 14+。
      本站的验收基线本就高于此 —— docs/07-真机验收手册.md：「Android 真机
      （WebView 内核 Chrome ≥ 90）」，且首屏内联关键样式里已在用 aspect-ratio
      （同为 Chrome 88 档）。故不额外做降级分支。

      ⚠️ 三个例外必须保留裸前缀（本文件里只有这三处，别顺手改）：
        ① token 块 `html[data-theme="light"]{...}` —— 要 (0,1,1) 才能压过 `:root`(0,1,0)；
        ② ③ 与 css-pending 相关的两条 —— 要压过 index.html 里同名的内联规则。

   ★ 为什么要用 html[data-theme] 而不是 body 类
      首屏防闪：index.html <head> 里有一段同步脚本，在样式表到达前就把
      data-theme 写到 <html> 上；等这份 CSS 姗姗来迟时，属性早已就位，
      不会出现「先黑一帧再变白」。挂 body 就需要等 body 解析，晚一步。

   ★ 为什么日间仍保留「黑色播放区」
      视频画面/全屏/手势提示/锁屏按钮/加载遮罩一律不覆盖 —— 亮底包着视频
      会让画面看起来发灰，YouTube/B站也都是浅色页面 + 黑色播放盒。
      本文件明确【不】触碰：.art-video-player / video / .player-placeholder /
      .player-loading-* / .loading-container / .error-container /
      .gesture-indicator / .ltv-lock-side / .position-restore-hint /
      .shortcut-hint / .rank-badge / .mine-card-del / .src-speed / .src-quality
      （后几项是压在封面图上的角标，底色是图片不是页面，浅色化反而看不清）。
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1. 语义 token（覆盖 :root 里的同一批变量；选择器权重 0,1,1 > :root 的 0,1,0，
      且本文件排在所有样式表最后，两层保险）
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
    /* 让浏览器原生控件（滚动条/输入框/自动填充/日期选择器）也走浅色 */
    color-scheme: light;

    --primary-color: #ff9c48;
    --primary-light: #ffb36f;
    --secondary-color: #faf9f7;

    --text-color: #1f1d1a;          /* 暖黑文本（与夜间暖白 #f6f3ed 互为镜像） */
    --text-muted: #6c665d;          /* 暖灰次级文本 */
    --border-color: #e6e3dc;

    /* ★ 2026-10-15 用户实拍反馈：原 #f3efe7 偏黄 —— 在「封面密集」的首页上，
       奶油底把每张白卡衬出格子，看着凌乱。改为真暖白：中性色阶整体去黄
       （R-B 差 12~17 → 3~10），只是「极轻暖调的白」，不是奶油色；
       卡与底的落差随之收窄，密集排布不再有网格感。 */
    --bg: #faf9f7;                  /* 页面底：真暖白 */
    --surface: #ffffff;             /* 卡片/面板面：纯白，靠投影与描边分层 */
    --soft: #f0eee9;                /* 次级面：胶囊/输入内衬 */
    --line: #e6e3dc;
    --muted: #6c665d;

    --accent: #ff9c48;
    --accent-hover: #ffb36f;
    /* ★ 日间专有：橙色当「文字」用时压深一档（#ff9c48 在白底上对比度仅 ~2:1，
       压到 #b25705 约 4.8:1，正文级可读）。当「底色」用时仍用原 #ff9c48。 */
    --accent-ink: #b25705;

    --page-gradient-start: #faf9f7;
    --page-gradient-end: #faf9f7;
    --card-gradient-start: #ffffff;
    --card-gradient-end: #ffffff;
    --card-accent: rgba(255, 156, 72, 0.14);
    --card-hover-border: rgba(255, 156, 72, 0.50);

    /* 日间专有：投影/描边的统一语汇（夜间靠「更黑」分层，日间只能靠影子） */
    --ltv-shadow-sm: 0 1px 3px rgba(31, 29, 26, 0.06);
    --ltv-shadow-md: 0 4px 14px rgba(31, 29, 26, 0.10);
    --ltv-shadow-lg: 0 10px 30px rgba(31, 29, 26, 0.14);
    --ltv-scrim: rgba(31, 29, 26, 0.42);

    /* 日间专有：给「运行时注入的内联样式」用的两个 token（version-info.js 的
       版本行 hover/active）。那边写的是 var(--hover-surface, #262422) 这种带兜底的
       形式 —— 夜间这两个变量不存在，落到兜底值 = 与改动前逐字节一致；
       日间才由这里接管。这样既修了「日间悬停变黑块」，又保证夜间零差异。 */
    --hover-surface: #f0eee9;
    --press-surface: #e8e5de;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. Tailwind 任意值工具类（HTML/JS 里写死的深色底：
      bg-[#161616] / text-white / text-gray-400 … 逐个镜像到浅色）
      这些类在 tailwind.build.css 里是单类权重（0,1,0）；本节写法
      `:where(html[data-theme="light"]) .bg-\[\#222\]` 的权重同样是（0,1,0），
      靠「本文件排在最后」取胜 —— 这正是我们要的：不凭空抬高权重，
      那些挂在同一元素上的状态规则（.form-checkbox:checked 等）继续按原样生效。
      带 hover: 的是（0,2,0）对原（0,2,0），同样靠顺序取胜。
   ────────────────────────────────────────────────────────────────────────── */

/* —— 2.1 底色：深 → 浅（数字越小越浅，据此排序）—— */
:where(html[data-theme="light"]) .bg-\[\#000\],
:where(html[data-theme="light"]) .bg-\[\#0a0a0a\],
:where(html[data-theme="light"]) .bg-\[\#0d0d0d\],
:where(html[data-theme="light"]) .bg-\[\#111\] { background-color: #ebe8e1; }
:where(html[data-theme="light"]) .bg-\[\#160\] { background-color: #ebe8e1; }
:where(html[data-theme="light"]) .bg-\[\#121212\] { background-color: #faf9f7; }
:where(html[data-theme="light"]) .bg-\[\#161616\] { background-color: #ffffff; }
:where(html[data-theme="light"]) .bg-\[\#191919\],
:where(html[data-theme="light"]) .bg-\[\#1a1a1a\],
:where(html[data-theme="light"]) .bg-\[\#1b1b1b\],
:where(html[data-theme="light"]) .bg-\[\#1e1e1e\] { background-color: #ffffff; }
:where(html[data-theme="light"]) .bg-\[\#1d1b19\] { background-color: #efece6; }
:where(html[data-theme="light"]) .bg-\[\#222\],
:where(html[data-theme="light"]) .bg-\[\#232323\],
:where(html[data-theme="light"]) .bg-\[\#242321\],
:where(html[data-theme="light"]) .bg-\[\#262422\],
:where(html[data-theme="light"]) .bg-\[\#262626\],
:where(html[data-theme="light"]) .bg-\[\#2a2a2a\],
:where(html[data-theme="light"]) .bg-\[\#2e2e2e\] { background-color: #f0eee9; }
:where(html[data-theme="light"]) .bg-\[\#333\],
:where(html[data-theme="light"]) .bg-\[\#33312e\] { background-color: #e8e5de; }
:where(html[data-theme="light"]) .bg-\[\#3d3a36\] { background-color: #dedad2; }
:where(html[data-theme="light"]) .bg-\[\#444\] { background-color: #d8d4cc; }
:where(html[data-theme="light"]) .bg-\[\#555\] { background-color: #cdc8be; }
:where(html[data-theme="light"]) .bg-\[\#666\] { background-color: #b8b2a8; }
:where(html[data-theme="light"]) .bg-\[\#777\] { background-color: #b4aea4; }

/* 状态底色（源码探索/统计里的深红深绿胶囊 → 浅色同调） */
:where(html[data-theme="light"]) .bg-\[\#3b1d1d\] { background-color: #fbeceb; }
:where(html[data-theme="light"]) .bg-\[\#1d3b2a\] { background-color: #e7f5ee; }

/* 橙色底/橙色淡染保持原样（白底上更好看），此处仅显式声明意图、不写规则 */

/* —— 2.2 hover 底色 —— */
:where(html[data-theme="light"]) .hover\:bg-\[\#333\]:hover { background-color: #dedad2; }
:where(html[data-theme="light"]) .hover\:bg-\[\#3d3a36\]:hover { background-color: #dedad2; }
:where(html[data-theme="light"]) .hover\:bg-\[\#555\]:hover { background-color: #cdc8be; }
:where(html[data-theme="light"]) .hover\:bg-gray-700:hover,
:where(html[data-theme="light"]) .hover\:bg-gray-800:hover { background-color: #dedad2; }

/* —— 2.3 文字色 —— */
/* 白字 → 暖黑字（body 上就挂着 text-white，这一条是整页文字的地基） */
:where(html[data-theme="light"]) .text-white,
:where(html[data-theme="light"]) .text-\[\#fff\],
:where(html[data-theme="light"]) .text-\[\#ffffff\],
:where(html[data-theme="light"]) .text-\[\#f0f0f0\],
:where(html[data-theme="light"]) .text-\[\#f5f5f5\],
:where(html[data-theme="light"]) .text-\[\#e5e5e5\],
:where(html[data-theme="light"]) .text-\[\#ccc\] { color: #1f1d1a; }

/* ★ 例外（2026-10-15 用户实拍反馈）—— `text-[#f6f3ed]` 不能一律压深：
     首页每张封面上的「更新至第N集」胶囊是 `bg-black/65 text-[#f6f3ed]`。
     它的底是【压在封面图上的深色半透明覆盖层】，本文件刻意不动（见文件头清单）。
     若只把字压深、底保持深色，就成了「深底 + 深字」——实测对比度 2.08:1，
     角标整条看不清。
     规则：元素自己带 bg-black/NN（= 深色覆盖层）时，字保持浅色，与底自洽。
     凡是「底压在图片上」的角标都归这类：底与字必须成对保留，不能只映射一半。 */
:where(html[data-theme="light"]) .text-\[\#f6f3ed\] { color: #1f1d1a; }
:where(html[data-theme="light"]) .text-\[\#f6f3ed\][class*="bg-black/"],
:where(html[data-theme="light"]) [class*="bg-black/"] .text-\[\#f6f3ed\] { color: #f6f3ed; }
:where(html[data-theme="light"]) .text-\[\#d8d4cd\],
:where(html[data-theme="light"]) .text-\[\#e5e7eb\] { color: #33302b; }
:where(html[data-theme="light"]) .text-\[\#f5e9d7\] { color: #1f1d1a; }
/* 次级灰阶：夜间「越亮越淡」，日间「越暗越淡」，两端对调 */
:where(html[data-theme="light"]) .text-gray-200,
:where(html[data-theme="light"]) .text-gray-300 { color: #3f3a33; }
:where(html[data-theme="light"]) .text-gray-400 { color: #5f594f; }
:where(html[data-theme="light"]) .text-gray-500,
:where(html[data-theme="light"]) .text-gray-600 { color: #7b746a; }
:where(html[data-theme="light"]) .text-\[\#aaa7a1\],
:where(html[data-theme="light"]) .text-\[\#9ca3af\],
:where(html[data-theme="light"]) .text-\[\#aaa\],
:where(html[data-theme="light"]) .text-\[\#888\],
:where(html[data-theme="light"]) .text-\[\#8a867f\],
:where(html[data-theme="light"]) .text-\[\#c7c3bc\],
:where(html[data-theme="light"]) .text-\[\#b8b4ad\],
:where(html[data-theme="light"]) .text-\[\#b8bcc4\],
:where(html[data-theme="light"]) .text-\[\#9aa0a6\],
:where(html[data-theme="light"]) .text-\[\#9aa4b2\] { color: #6c665d; }
:where(html[data-theme="light"]) .text-\[\#d1d5db\] { color: #3f3a33; }
:where(html[data-theme="light"]) .text-\[\#8f8b84\] { color: #857f74; }
/* 橙色文字：同色相压深，保证白底可读 */
:where(html[data-theme="light"]) .text-\[\#ff9c48\],
:where(html[data-theme="light"]) .text-\[\#ffb36f\],
:where(html[data-theme="light"]) .text-\[\#ffcf9e\],
:where(html[data-theme="light"]) .text-\[\#ffc07a\],
:where(html[data-theme="light"]) .text-\[\#ffc14d\],
:where(html[data-theme="light"]) .text-\[\#e2b07e\],
:where(html[data-theme="light"]) .text-\[\#ffd98a\] { color: var(--accent-ink); }
:where(html[data-theme="light"]) .text-\[\#a67c2d\],
:where(html[data-theme="light"]) .text-\[\#d8a55c\] { color: #8a5a12; }
/* 语义色（成功/失败/警告）在浅底上压深一档 */
:where(html[data-theme="light"]) .text-\[\#7ee2a8\],
:where(html[data-theme="light"]) .text-green-400,
:where(html[data-theme="light"]) .text-green-500 { color: #12794a; }
:where(html[data-theme="light"]) .text-\[\#e27e7e\],
:where(html[data-theme="light"]) .text-\[\#ff6b6b\],
:where(html[data-theme="light"]) .text-\[\#ff5c5c\] { color: #c92a2a; }
:where(html[data-theme="light"]) .text-red-400,
:where(html[data-theme="light"]) .text-red-500,
:where(html[data-theme="light"]) .text-red-400\/70 { color: #c92a2a; }
:where(html[data-theme="light"]) .hover\:text-red-400:hover,
:where(html[data-theme="light"]) .hover\:text-red-700:hover { color: #a01d1d; }
:where(html[data-theme="light"]) .hover\:text-\[\#f6f3ed\]:hover { color: #1f1d1a; }
:where(html[data-theme="light"]) .hover\:text-\[\#ffb36f\]:hover { color: var(--accent-ink); }
:where(html[data-theme="light"]) .text-\[\#ff6b8b\],
:where(html[data-theme="light"]) .text-\[\#ff7b9d\] { color: #c2185b; }
:where(html[data-theme="light"]) .text-\[\#60a5fa\],
:where(html[data-theme="light"]) .text-blue-400 { color: #1d4ed8; }

/* —— 2.4 描边 —— */
:where(html[data-theme="light"]) .border-\[\#33312e\],
:where(html[data-theme="light"]) .border-\[\#333\],
:where(html[data-theme="light"]) .border-\[\#222\] { border-color: #e6e3dc; }
:where(html[data-theme="light"]) .border-gray-800 { border-color: #e6e3dc; }
:where(html[data-theme="light"]) .border-gray-300 { border-color: #dedad2; }
:where(html[data-theme="light"]) .border-\[\#ff9c48\] { border-color: #ff9c48; }

/* ──────────────────────────────────────────────────────────────────────────
   3. styles.css 里的组件（全局：设置面板 / 开关 / 滚动条 / 弹窗 / 历史面板）
   ────────────────────────────────────────────────────────────────────────── */
:where(html[data-theme="light"]) .close-btn {
    background: #f0eee9;
    border-color: #e6e3dc;
    color: #1f1d1a;
}
:where(html[data-theme="light"]) .close-btn:hover { background: #e8e5de; border-color: #cdc5b5; }

:where(html[data-theme="light"]) .card-hover { box-shadow: var(--ltv-shadow-sm); }
:where(html[data-theme="light"]) .card-hover:hover { box-shadow: var(--ltv-shadow-md); }

/* 滚动条：夜间是深灰轨 + 更深的滑条，日间反过来 */
:where(html[data-theme="light"]) ::-webkit-scrollbar-track { background: #f0eee9; }
:where(html[data-theme="light"]) ::-webkit-scrollbar-thumb { background: #cdc5b5; }
:where(html[data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: #b8b2a8; }
:where(html[data-theme="light"]) .settings-panel::-webkit-scrollbar-thumb,
:where(html[data-theme="light"]) #apiCheckboxes::-webkit-scrollbar-thumb,
:where(html[data-theme="light"]) #customApisList::-webkit-scrollbar-thumb,
:where(html[data-theme="light"]) #modal .detail-desc-content::-webkit-scrollbar-thumb { background-color: #cdc5b5; }
:where(html[data-theme="light"]) #apiCheckboxes::-webkit-scrollbar-track,
:where(html[data-theme="light"]) #modal .detail-desc-content::-webkit-scrollbar-track { background: #f0eee9; }

/* ── 弹珠开关（.toggle-wrap）在日间的配色 ────────────────────────────────
   只改颜色，不动几何：轨道 56×32 / 滚珠 24 / 位移 24px 全部沿用夜间那套，
   保证新旧开关视觉上是同一颗「弹珠」。 */
:where(html[data-theme="light"]) .toggle-wrap > .toggle-bg { background-color: #cfcbc2; }
:where(html[data-theme="light"]) .toggle-wrap > .toggle-dot { background-color: #ffffff; }
:where(html[data-theme="light"]) .filter-disabled .toggle-bg { background-color: #e4e0d8 !important; }
:where(html[data-theme="light"]) .filter-disabled .toggle-dot { background-color: #b8b2a8 !important; }

/* ⚠️ 必须带 :not(:checked)：本文件的选择器权重比 `.form-checkbox:checked`
   （0,2,0）高一级，若直接写 `.form-checkbox` 会把「已勾选 = 橙底」的状态
   一起盖成白底 —— 实测症状是设置面板里所有已勾选的源看着像没勾。
   只改「未勾选」那一半，勾选态（橙底 + 白勾）原样交给夜间那套。 */
:where(html[data-theme="light"]) .form-checkbox:not(:checked) {
    background-color: #ffffff;
    border-color: #dedad2;
}
/* 勾选后被 tailwind 的 text-[#ff9c48] 上色，浅底上仍是橙色方块，无需改 */

:where(html[data-theme="light"]) .filter-disabled::after { background-color: rgba(31, 29, 26, 0.06); }
:where(html[data-theme="light"]) .filter-tooltip { background-color: rgba(198, 40, 60, 0.08); border-color: rgba(198, 40, 60, 0.2); }
:where(html[data-theme="light"]) .adult-warning,
:where(html[data-theme="light"]) .api-group-title.adult,
:where(html[data-theme="light"]) .adult-tag,
:where(html[data-theme="light"]) .api-adult + label { color: #c2185b !important; }
/* 「选中成人源时过滤器被禁用」的告警文案：原为亮粉 #ff7b9d，白底上几乎看不见 */
:where(html[data-theme="light"]) .filter-disabled .filter-description { color: #c2185b !important; }

:where(html[data-theme="light"]) #customApisList .api-item { background-color: #f0eee9; }
:where(html[data-theme="light"]) #customApisList .api-item:hover { background-color: #e8e5de; }

/* 历史面板 */
:where(html[data-theme="light"]) .history-panel { box-shadow: -2px 0 10px rgba(31, 29, 26, 0.12); }
:where(html[data-theme="light"]) .history-item:hover { border-color: #dedad2; box-shadow: var(--ltv-shadow-sm); }
:where(html[data-theme="light"]) .history-thumbnail,
:where(html[data-theme="light"]) .history-thumb { background-color: #f0eee9; }
:where(html[data-theme="light"]) .history-time,
:where(html[data-theme="light"]) .progress-text { color: #857f74; }
:where(html[data-theme="light"]) .progress-bar { background-color: rgba(31, 29, 26, 0.10); }
:where(html[data-theme="light"]) .history-episode { color: #1d4ed8; }
:where(html[data-theme="light"]) .history-source { color: #12794a; }

:where(html[data-theme="light"]) .search-card-img-container { background-color: #f0eee9; }

/* 详情弹窗（#modal 内的信息块） */
:where(html[data-theme="light"]) #modal > div:not(.src-modal-panel) { box-shadow: var(--ltv-shadow-lg); }
:where(html[data-theme="light"]) #modal .modal-detail-info {
    background: linear-gradient(135deg, #ffffff, #f7f4ee);
    border-color: #f0eee9;
}
:where(html[data-theme="light"]) #modal .detail-label,
:where(html[data-theme="light"]) #modal .episode-stats { color: #6c665d; }
:where(html[data-theme="light"]) #modal .detail-desc { border-top-color: #e6e3dc; }
:where(html[data-theme="light"]) #modal .detail-desc-content { color: #3f3a33; }
:where(html[data-theme="light"]) .modal,
:where(html[data-theme="light"]) [role="dialog"] { box-shadow: var(--ltv-shadow-lg); }

/* ──────────────────────────────────────────────────────────────────────────
   4. index-1230.css（首页 / 搜索 / 我的 / 豆瓣）
   ────────────────────────────────────────────────────────────────────────── */

/* 顶栏：夜间的半透明黑渐变 → 半透明纸白渐变（仍保留 30px 淡出） */
:where(html[data-theme="light"]) .app-header {
    background: linear-gradient(to bottom,
        rgba(250, 249, 247, 0.92) 0%,
        rgba(250, 249, 247, 0.92) calc(100% - 30px),
        rgba(250, 249, 247, 0) 100%);
}
:where(html[data-theme="light"]) .bottom-nav { background: rgba(255, 255, 255, 0.96); border-top: 1px solid #e6e3dc; }
:where(html[data-theme="light"]) .ct-tab { color: #6c665d; }
/* ⚠️ 悬停与「选中/临近选中」同理：不加则日间下顶部频道 tab 悬停无反应、
   且看不出当前选中哪一个（原规则权重都低于本文件的基类覆盖）。 */
:where(html[data-theme="light"]) .ct-tab:hover,
:where(html[data-theme="light"]) .ct-tab.ct-on,
:where(html[data-theme="light"]) .ct-tab.ct-near { color: var(--text-color); }
:where(html[data-theme="light"]) .ah-icon:hover { border-color: #cdc5b5; }

:where(html[data-theme="light"]) .top-corner-button { background: #ffffff; border-color: #e6e3dc; color: #1f1d1a; }
/* 原 `.top-corner-button:hover` 权重低于上面的基类覆盖，日间下悬停会失效，补一条 */
:where(html[data-theme="light"]) .top-corner-button:hover { background: #f0eee9; border-color: #cdc5b5; }

:where(html[data-theme="light"]) .search-box { box-shadow: 0 1px 8px rgba(31, 29, 26, 0.06); }
:where(html[data-theme="light"]) .search-input { background: #ffffff; border-top-color: #e6e3dc; border-bottom-color: #e6e3dc; color: #1f1d1a; }
:where(html[data-theme="light"]) .search-input:focus { background: #ffffff; }
:where(html[data-theme="light"]) .search-input::placeholder { color: #9d968a; }
:where(html[data-theme="light"]) .search-button:hover { background: #f0eee9; }

:where(html[data-theme="light"]) .recent-search-tag { color: #3f3a33; }
:where(html[data-theme="light"]) .recent-searches { background: #ffffff; border-color: #e6e3dc; box-shadow: var(--ltv-shadow-lg); }
:where(html[data-theme="light"]) .rs-item { color: #3f3a33; }
:where(html[data-theme="light"]) .rs-item:active { background: #f0eee9; }
:where(html[data-theme="light"]) .rs-item-icon,
:where(html[data-theme="light"]) .rs-item-del { color: #857f74; }

:where(html[data-theme="light"]) .rs-item-del:active { color: #c92a2a; }

:where(html[data-theme="light"]) .douban-toggle { background: #f0eee9; }
:where(html[data-theme="light"]) .douban-toggle-button:not(.active) { color: #6c665d; }
/* 原规则 `.douban-toggle-button:not(.active):hover{color:#fff}` 权重低于本文件
   的基类覆盖，日间下会「悬停没反应」——补一条同权重更高的悬停态。 */
:where(html[data-theme="light"]) .douban-toggle-button:not(.active):hover { color: #1f1d1a; }
:where(html[data-theme="light"]) .douban-tag { color: var(--accent-ink); }
/* 选中态是橙底，文字必须是深色（否则橙底 + 深橙字几乎看不见） */
:where(html[data-theme="light"]) .douban-tag.active { color: #1f1d1a; }
:where(html[data-theme="light"]) .search-result-stats { color: #6c665d; }

:where(html[data-theme="light"]) .fl-chip:hover { color: #1f1d1a; }
:where(html[data-theme="light"]) .fl-row[data-row="sort"] { border-bottom-color: rgba(31, 29, 26, 0.08); }

/* 骨架屏：夜间的「亮一点的黑」→ 日间的「深一点的纸」 */
:where(html[data-theme="light"]) .hb-skel-title,
:where(html[data-theme="light"]) .hb-skel-card { background: #efece6; }
:where(html[data-theme="light"]) .hb-skel-title::after,
:where(html[data-theme="light"]) .hb-skel-card::after {
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
}
/* 站内骨架（scripts 之外，index.html 内联那条 + 这里统一兜一层） */
:where(html[data-theme="light"]) .ltv-home-skel .hb-skel-title,
:where(html[data-theme="light"]) .ltv-home-skel .hb-skel-card { background: #efece6; }

:where(html[data-theme="light"]) .mine-head-clear { color: #6c665d; border-color: #e6e3dc; }
:where(html[data-theme="light"]) .mine-head-clear:active { color: #c92a2a; border-color: #c92a2a; }

/* ──────────────────────────────────────────────────────────────────────────
   4.5 全屏蒙层（密码门 / 免责声明 / 加载中 / 探索源 / JS 动态弹窗）

   夜间这些是 80%~95% 的纯黑。日间若照搬，「日间模式」下打开的第一个界面
   （密码门）就是一块 95% 的黑屏 —— 与功能名直接矛盾。
   日间统一换成一层暖色半透明（--ltv-scrim，#1f1d1a 的 42%），卡片浮在上面。

   ⚠️ 必须按「角色」命中（#id 或 .fixed.inset-0.bg-black），不能全局改
   `.bg-black\/65` —— 那是首页封面左下角那枚提示标签的底，压在图片上，
   底色不是页面而是图，浅色化会让它直接看不清。
   ────────────────────────────────────────────────────────────────────────── */
:where(html[data-theme="light"]) #passwordModal,
:where(html[data-theme="light"]) #disclaimerModal,
:where(html[data-theme="light"]) #loading,
:where(html[data-theme="light"]) #sourceFinderModal,
:where(html[data-theme="light"]) .fixed.inset-0.bg-black { background-color: var(--ltv-scrim); }

/* ──────────────────────────────────────────────────────────────────────────
   5. rank.css（榜单）
   ────────────────────────────────────────────────────────────────────────── */
:where(html[data-theme="light"]) .rank-tabs { background: rgba(250, 249, 247, 0.96); }
:where(html[data-theme="light"]) .rank-tab { color: #6c665d; }
/* ⚠️ 选中/临近选中态：原规则 `.rank-tab.on{color:var(--text-color)}` 权重低于
   本文件的基类覆盖，不加这两条的话日间下「选中和没选中一个颜色」。 */
:where(html[data-theme="light"]) .rank-tab.on,
:where(html[data-theme="light"]) .rank-tab.near { color: var(--text-color); }
:where(html[data-theme="light"]) .rank-tab-group { background: rgba(31, 29, 26, 0.05); }
/* ⚠️ 排除金银铜：那三枚名次牌是「彩底 + 深字」的成就徽章，与主题无关，
   底色是渐变不算页面底色 —— 被基类覆盖成灰字就毁了。 */
:where(html[data-theme="light"]) .rank-no:not(.gold):not(.silver):not(.bronze) { color: #857f74; }
:where(html[data-theme="light"]) .rank-poster { background: #f0eee9; }
:where(html[data-theme="light"]) .rank-card-tip.bad { background: #eae7e0; color: #4a453e; }
:where(html[data-theme="light"]) .rank-score { color: #33302b; }
/* mid / hot 是带色底的口径标签，基类覆盖会盖掉它们的配色，逐条补回浅色版 */
:where(html[data-theme="light"]) .rank-score.mid { color: #a2500a; background: rgba(255, 156, 72, 0.16); }
:where(html[data-theme="light"]) .rank-score.hot { color: #c92a2a; }
:where(html[data-theme="light"]) .rank-spike-note { color: #c92a2a; }
:where(html[data-theme="light"]) .rank-desc { color: #4a453e; }
:where(html[data-theme="light"]) .rank-tag { color: #33302b; }
:where(html[data-theme="light"]) .rank-meta-rm { color: #857f74; }
:where(html[data-theme="light"]) .rank-loading,
:where(html[data-theme="light"]) .rank-empty,
:where(html[data-theme="light"]) .rank-end { color: #6c665d; }

/* ──────────────────────────────────────────────────────────────────────────
   6. modals.css（弹窗 / 加载 / toast）
   ────────────────────────────────────────────────────────────────────────── */
:where(html[data-theme="light"]) .modal-overlay { background-color: rgba(31, 29, 26, 0.55); }
:where(html[data-theme="light"]) .modal-content { background-color: #ffffff; border-color: #e6e3dc; box-shadow: var(--ltv-shadow-lg); }
:where(html[data-theme="light"]) .modal-close { color: #6c665d; }
/* 原 `.modal-close:hover{color:white}` 权重低于上面的基类覆盖，日间下会「悬停变白不可见」 */
:where(html[data-theme="light"]) .modal-close:hover { color: #1f1d1a; }
:where(html[data-theme="light"]) .password-input { background-color: #ffffff; border-color: #e6e3dc; color: #1f1d1a; }
/* 原 `.password-input:focus{border-color:white}` 同理：白边在白底输入框上等于没有焦点 */
:where(html[data-theme="light"]) .password-input:focus { border-color: var(--accent); }
:where(html[data-theme="light"]) .loading-overlay { background-color: rgba(250, 249, 247, 0.85); }
:where(html[data-theme="light"]) .loading-content { background-color: #ffffff; border-color: #e6e3dc; box-shadow: var(--ltv-shadow-md); }
:where(html[data-theme="light"]) .loading-text { color: #3f3a33; }
:where(html[data-theme="light"]) .resource-card { background-color: #ffffff; border-color: #e6e3dc; }
:where(html[data-theme="light"]) .resource-card:hover { box-shadow: var(--ltv-shadow-sm); }
/* 「当前选中源」的蓝框：原规则权重低于基类覆盖，必须显式补回（否则选中态丢失） */
:where(html[data-theme="light"]) .resource-card.current { border-color: #3b82f6; box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3); }
:where(html[data-theme="light"]) #toast { box-shadow: var(--ltv-shadow-md); }

/* ──────────────────────────────────────────────────────────────────────────
   7. player.css / player-detail.css —— 只覆盖「播放页的界面壳」，
      黑色播放区（见文件头清单）原样保留

   ⚠️ 本节【故意】用裸前缀（0,1,1），不用 :where()。
   原因：这两张样式表在 index.html 里【不是 <link>，而是 player-loader.js 进播放视图时
   动态注入的】——注入位置排在 <head> 末尾，也就是排在本文件【后面】。
   同权重下按文档顺序决定胜负，于是 :where() 写法会被它们压掉（实测症状：
   点开任意一部片，播放入口的顶栏仍是 #111 的黑条，其余部分已经变白）。
   加一级权重即可稳定压过，而本节覆盖的对象（顶栏/抽屉/剧集弹窗/跳过设置/详情文字）
   里，带状态子类的几条（.pd-skip.on / .pd-skip:hover / .skip-input-row :focus /
   input:checked + .slider）都已在本节内用更高的权重逐条显式补回，不会丢状态。
   ────────────────────────────────────────────────────────────────────────── */
/* ⚠️ 这两条必须用裸前缀：`:where(...) html` 找的是「html 里的 html」，永远匹配不到，
   而 player.css 里恰好有一条 `body, html { background-color: #121212 }` —— 实测症状是
   player.html 在日间下整页仍是黑的（只有弹窗变白）。用 (0,1,1) 才能压过它。 */
html[data-theme="light"],
html[data-theme="light"] body { background-color: var(--bg); }

/* 播放/播放入口的顶栏：与首页顶栏、页面底同一个真暖白色。
   ★ 2026-10-15 用户实拍反馈：原先给的是 --surface(#fff)，在浅色页面上一整条纯白，
     与其他区域的暖调割裂；改为 var(--bg)（= 页面底同色），靠底部 hairline 分割。 */
html[data-theme="light"] .player-header-fixed { background: var(--bg); border-bottom: 1px solid #e6e3dc; }
/* 「上一页」按钮里的箭头是 SVG 上的 fill="#ffffff" 硬编码属性（不是 CSS）——
   日间下「白箭头 + 浅色按钮」等于看不见（用户实拍第一张图圈的就是这里）。
   CSS 的 fill 能覆盖 presentation 属性，故在此按主题改色。
   注：底部导航「豆」图标里的 fill="#ffffff" 是白字压橙圆，两边都成立，不动。 */
:where(html[data-theme="light"]) .home-btn svg { fill: #1f1d1a; }
html[data-theme="light"] .resource-info-bar-left { color: #1f1d1a; }
html[data-theme="light"] .resource-info-bar-videos { color: #6c665d; }

/* 换源底部抽屉 */
html[data-theme="light"] .src-modal { background: var(--ltv-scrim); }
html[data-theme="light"] .src-modal-panel { background: #ffffff; box-shadow: 0 -10px 40px rgba(31, 29, 26, 0.18); }
html[data-theme="light"] .src-poster { background: #f0eee9; }
html[data-theme="light"] .src-item { color: #3f3a33; }

/* 剧集选择弹窗 */
html[data-theme="light"] .ep-modal { background: rgba(31, 29, 26, 0.45); }
html[data-theme="light"] .ep-modal-panel { background: #ffffff; }

/* 跳过片头/片尾设置 */
html[data-theme="light"] .skip-row { background: #f0eee9; }
html[data-theme="light"] .skip-input-row input[type="number"] { background: #ffffff; color: #1f1d1a; border-color: #e6e3dc; }
/* 原 `:focus{border-color:var(--accent)}` 与上面的基类同权重、被本文件排在后面压掉，补回焦点态 */
html[data-theme="light"] .skip-input-row input[type="number"]:focus { border-color: var(--accent); }
html[data-theme="light"] .skip-menu { background: #ffffff; box-shadow: var(--ltv-shadow-lg); }
html[data-theme="light"] .skip-tip b { color: #33302b; }
html[data-theme="light"] .pd-skip { background: rgba(31, 29, 26, 0.04); border-color: rgba(31, 29, 26, 0.12); color: #1f1d1a; }
html[data-theme="light"] .pd-skip:hover { border-color: var(--card-hover-border); }
/* ⚠️ 「已启用跳过」态：原规则权重低于基类覆盖，必须显式补回，否则开启前后
   看不出区别。原色是黄字 #ffcc4d，白底上压深为 #8a5a12，保持同一语义色。 */
html[data-theme="light"] .pd-skip.on {
    background: rgba(255, 193, 77, 0.16);
    border-color: rgba(255, 193, 77, 0.55);
    color: #8a5a12;
}
html[data-theme="light"] .pd-skip.on svg { color: #8a5a12; }

/* 详情面板文字 */
html[data-theme="light"] .pd-info-item,
html[data-theme="light"] .pd-people,
html[data-theme="light"] .pd-desc { color: #33302b; }
html[data-theme="light"] .pd-hint-text {
    color: #4a453e;
    background: linear-gradient(90deg, #4a453e 0%, #4a453e 40%, var(--accent) 50%, #4a453e 60%, #4a453e 100%);
}

/* 播放设置里的滑块（⚠️ 只改「未选中」那一半：原 `input:checked + .slider`
   与本文件的基类覆盖同权重，若不排除 checked，日间下「开启」的滑块会变成灰色） */
html[data-theme="light"] input:not(:checked) + .slider { background-color: #d8d4cc; }

/* 播放页加载失败提示的次级文案（在浅底卡片内） */
html[data-theme="light"] .error-message-sub { color: #6c665d; }

/* ──────────────────────────────────────────────────────────────────────────
   8. 新开关自身的状态样式（★ 唯一不挂 data-theme 作用域的一节）

   夜间那两个开关（#yellowFilterToggle / #adFilterToggle）的勾选态是具名写死的
   （styles.css 里各一条 :checked + .toggle-bg / ~ .toggle-dot）。新开关
   #dayModeToggle 需要同样的一套，否则点了没有任何视觉反馈。
   这里用同一个视觉语言补齐，且只命中 #dayModeToggle —— 对两个旧开关零影响，
   所以放不挂前缀也没关系；放这儿而不是 styles.css，是为了让「这次新增的东西」
   全部集中在这一个文件里，回滚只需删掉本文件 + 三处引用。
   ────────────────────────────────────────────────────────────────────────── */
#dayModeToggle:checked + .toggle-bg { background-color: var(--accent); }
#dayModeToggle:checked ~ .toggle-dot { transform: translateX(24px); }
#dayModeToggle:checked ~ .toggle-dot { box-shadow: 0 2px 4px rgba(255, 156, 72, 0.3); }
#dayModeToggle:focus + .toggle-bg,
#dayModeToggle:hover + .toggle-bg { box-shadow: 0 0 0 2px rgba(255, 156, 72, 0.35); }

/* 设置里那一行「日间模式」的说明文字：浅色主题下用次级灰，深色下沿用原有灰阶 */
:where(html[data-theme="light"]) #dayModeRow .day-mode-desc { color: #7b746a; }
:where(html[data-theme="light"]) #dayModeRow .day-mode-title { color: #5f594f; }

/* ──────────────────────────────────────────────────────────────────────────
   9. 日间模式下的滚动条与「窗口期」细节
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="light"].css-pending body::after {
    border-color: #e8e5de;
    border-top-color: #d9a441;
}