/* ============================================================
 * theme-light.css —— 「参考站风格」浅色主题
 * ============================================================
 * 参考对象：https://www.xltxa.cn/ （浅灰蓝底 + 白卡片 + 大圆角 + 轻阴影）
 *
 * 定位（2026-09-27 起：从「静态主题」升级为「可切换主题」）
 *   **覆盖层**，加载在所有基础样式之后。
 *   启用条件 = `<html class="theme-light">`
 *     ✗ 不加 → 深色（**全站默认**）
 *     ✓ 加上 → 浅色
 *   切换逻辑在 `js/theme.js`，持久化 key = `lmweb_theme`（'dark' | 'light'）。
 *
 * 🔴 为什么作用域挂在 **html** 而不是 body：
 *   主题必须在**首次绘制之前**定下来，否则会闪一下白/黑。
 *   body 要等 <body> 标签解析出来才存在，那时浏览器可能已经画过一帧了；
 *   html 元素在 <head> 里就存在 → `<head>` 内联引导脚本可以立刻加 class，
 *   实现**零闪烁**。所以本文件一律用 `html.theme-light body ...` 这种写法
 *   （早先版本是 `body.theme-light`，2026-09-27 由 sed 机械替换，137 处全改）。
 *
 * 设计语言（取自参考站实测）
 *   底 #f1f5f8 ｜ 面 #ffffff ｜ 墨 #17212b ｜ 弱 #6f7d88 ｜ 线 #e4eaef
 *   大圆角 18px ｜ 卡片 hover translateY(-4px) ｜ 顶栏白底 + blur(16px) 胶囊
 *
 * ⚠️ 与参考站的一处**刻意不同**：主色不用它的蓝 #315bff，
 *    改用洛洛云仓的粉紫（#6366f1 → #8b5cf6）。
 *    logo / 封面海报 / 小程序都是粉紫系，换蓝会丢品牌辨识度。
 *
 * 🔴 本项目特有约束（别踩）：
 *   1. `html { font-size: 14px }` → **尺寸一律写 px，不要写 rem**
 *   2. 中轴由 style-v2.css 的 `padding/margin: max(...)` 负责
 *      → 本文件**绝不重写 padding-left/right 与 margin-left/right**，
 *        否则中轴会被打乱（这是本轮最容易犯的错）
 *   3. 有底色的卡片类元素（.notice-bar / .motto-bar）中轴用 margin，
 *      通栏底色元素中轴用 padding —— 保持父层原样即可
 *   4. **新增覆盖必须同时给两支**：`html.theme-light` 自身（overscroll 区）
 *      和 `html.theme-light body`（页面内容）。只写后者会在手机端下拉时
 *      露出一条跟主题不符的底色（iOS Safari / 安卓 Chrome 的橡皮筋区域）。
 * ============================================================ */

/* ------------------------------------------------------------
 * §0 令牌 —— 重定义语义变量
 * ------------------------------------------------------------
 * 🔑 关键杠杆：style-v2.css 里的规则大量使用 var(--brand-soft) / var(--line)
 *    / var(--txt-*) 等，在这里重定义这些变量后，**它们会自动跟着变浅色**，
 *    不需要逐条覆盖。style.css 里是硬编码，那些才要单独处理。
 * ---------------------------------------------------------- */

/* html 自身 —— 只管「页面内容之外」的底色：
 *   · overscroll / 橡皮筋区（手机下拉、桌面拉到顶）
 *   · 滚动条槽、浏览器 UI 取色
 * 不加这段的话，手机端一拉就露出深色的 html 底，会闪一条黑边。
 * 深色那支的对应规则在 theme-toggle.css（同样原因，只是颜色相反）。 */
html.theme-light {
  background: #f1f5f8;
  color-scheme: light;
}

html.theme-light body {
  /* 品牌色（沿用本站粉紫，只做深浅适配） */
  --brand-1: #6366f1;
  --brand-2: #8b5cf6;
  --brand-soft: #eef1fd;
  --brand-line: #dcdefa;

  /* 语义色 —— 深→浅 */
  --line: #e8edf1;
  --line-strong: #d7e0e7;
  --surface: #ffffff;
  --txt-1: #17212b;
  --txt-2: #46545f;
  --txt-3: #7d8b96;

  /* 阴影：浅色下要更柔、更散，否则会显脏 */
  --shadow-2: 0 10px 26px rgba(41, 59, 74, .07);
  --shadow-3: 0 18px 34px rgba(41, 59, 74, .10);

  /* 本主题专用（B7 令牌化：base 用 var(), 这里重定义浅色值） */
  --bg: #f1f5f8;
  --bg-soft: #f8fafb;
  --img-bg: #e9eef3;          /* 图片占位底：浅色下比卡片底略深的灰蓝 */
  --link: #6366f1;            /* 链接/强调：浅底上用主品牌色（原覆盖为 var(--brand-1)） */
  --amber: #b45309;           /* 琥珀在浅底要压深，否则发飘（原各处覆盖 #b45309） */
  --radius-lg: 18px;
  --radius-md: 14px;

  background: var(--bg);
  color: var(--txt-2);
}

/* 滚动条跟着变浅 */
html.theme-light body ::-webkit-scrollbar-thumb { background: #c8d2da; }

/* ------------------------------------------------------------
 * §1 Header —— 全宽白条（手机）/ 悬浮白胶囊（PC，照参考站）
 * ---------------------------------------------------------- */
html.theme-light body .header {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(41, 59, 74, .02);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html.theme-light body .header-title { color: var(--txt-1); }
html.theme-light body .header-right { color: var(--txt-3); }
html.theme-light body .header-back { color: var(--txt-2); }
/* logo 是深色描边的浅色图，浅底上直接用即可 */

@media (min-width: 1024px) {
  /* 参考站的招牌：悬浮白胶囊顶栏。
     max-width = 容器 + 2×内边距 → 内容线仍精确落在 1120 中轴，
     与下方 .section 对齐（所以这里能覆盖 style-v2 的中轴 padding）。 */
  html.theme-light body .header {
    max-width: calc(var(--container) + 32px);
    margin: 14px auto 0;
    padding-left: 16px;
    padding-right: 16px;
    height: 64px;
    top: 14px;
    border: 1px solid #fff;
    border-radius: 15px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 26px rgba(41, 59, 74, .06);
  }
}

/* ------------------------------------------------------------
 * §2 封面轮播（手机端保留，PC 由 body.pc-no-cover 关掉）
 * ---------------------------------------------------------- */
html.theme-light body .cover-carousel,
html.theme-light body .cover-carousel img { background: #e9eef3; }
html.theme-light body .cover-dot { background: rgba(23, 33, 43, .22); }
html.theme-light body .cover-dot.active { background: var(--brand-1); }

/* ------------------------------------------------------------
 * §3 公告条 / 一言
 * ---------------------------------------------------------- */
html.theme-light body .notice-bar { background: var(--brand-soft); border-color: var(--brand-line); }
html.theme-light body .notice-bar:active { background: #e6eafc; }
html.theme-light body .notice-tag { color: #5a5fd0; background: #dfe3fb; }
html.theme-light body .notice-tag::before { background: var(--brand-1); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }
html.theme-light body .notice-text { color: var(--txt-2); }
html.theme-light body .notice-more { color: var(--brand-1); }

html.theme-light body .motto-bar { background: #fff; border-color: var(--line); color: var(--txt-3); }

@media (min-width: 1024px) {
  html.theme-light body .notice-bar { background: #fff; border-color: var(--line); box-shadow: var(--shadow-2); }
  html.theme-light body .notice-bar:hover { background: #fff; border-color: var(--brand-line); }
}

/* ------------------------------------------------------------
 * §4 搜索栏
 * ---------------------------------------------------------- */
html.theme-light body .search-bar { background: transparent; }
html.theme-light body .search-wrap {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .04);
}
html.theme-light body .search-wrap:focus-within {
  border-color: var(--brand-1);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
html.theme-light body .search-icon { color: var(--txt-3); }
html.theme-light body .search-input { color: var(--txt-1); }
html.theme-light body .search-input::placeholder { color: #a3aeb8; }
html.theme-light body .search-clear { color: #a3aeb8; }
html.theme-light body .search-clear:active { color: var(--txt-2); }

/* ------------------------------------------------------------
 * §5 区块标题
 * ---------------------------------------------------------- */
html.theme-light body .section-title { color: var(--txt-1); }
html.theme-light body .section-title::before { background: linear-gradient(180deg, var(--brand-1), var(--brand-2)); }

/* ------------------------------------------------------------
 * §6 分类网格
 * ---------------------------------------------------------- */
html.theme-light body .cat-item {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .03);
}
html.theme-light body .cat-item:active { background: var(--bg-soft); }
html.theme-light body .cat-icon { background: var(--brand-soft); }
html.theme-light body .cat-icon-text { background: linear-gradient(135deg, #e6e9fc, #ece7fc); }
html.theme-light body .cat-name { color: var(--txt-2); }

/* ------------------------------------------------------------
 * §7 「更多页面」卡片
 * ---------------------------------------------------------- */
html.theme-light body .page-item {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .03);
}
html.theme-light body .page-item:active { background: var(--bg-soft); }
html.theme-light body .page-icon { background: linear-gradient(135deg, #e6e9fc, #ece7fc); }
html.theme-light body .page-name { color: var(--txt-1); }
html.theme-light body .page-desc { color: var(--txt-3); }
html.theme-light body .page-cat { color: #5a5fd0; background: var(--brand-soft); }
html.theme-light body .page-updated { color: #9aa6b0; }
html.theme-light body .page-item-locked { border-color: #f5e2b8; }

/* ------------------------------------------------------------
 * §8 文章网格
 * ---------------------------------------------------------- */
html.theme-light body .art-item {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .03);
}
html.theme-light body .art-cover { background: #eef2f5; }   /* ⚠️ 只改底色，不动 object-fit（contain 是刻意的） */
html.theme-light body .art-title { color: var(--txt-1); }
html.theme-light body .art-meta { color: var(--txt-3); }
html.theme-light body .art-count { background: rgba(23, 33, 43, .58); }

/* ------------------------------------------------------------
 * §9 加载更多 / 空态 / 载入中
 * ---------------------------------------------------------- */
html.theme-light body .load-more-btn {
  background: #fff;
  border-color: var(--line);
  color: var(--txt-2);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .04);
}
html.theme-light body .load-more-btn:active { background: var(--bg-soft); }
html.theme-light body .empty-state,
html.theme-light body .loading-state { color: var(--txt-3); }
html.theme-light body .spinner { border-color: #dde4ea; border-top-color: var(--brand-1); }

/* ------------------------------------------------------------
 * §10 搜索结果 / 建议
 * ---------------------------------------------------------- */
html.theme-light body .suggest-item { color: var(--txt-2); border-bottom-color: var(--line); }
html.theme-light body .suggest-item:active { background: var(--bg-soft); }
html.theme-light body .suggest-empty { color: var(--txt-3); }

/* ------------------------------------------------------------
 * §11 公告弹窗（遮罩保持深色 —— 浅色主题下遮罩也该是深色半透明）
 * ---------------------------------------------------------- */
html.theme-light body .notice-dialog {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 24px 64px rgba(23, 33, 43, .22);
}
html.theme-light body .notice-dialog-hd { border-bottom-color: var(--line); }
html.theme-light body .notice-dialog-close { background: var(--bg-soft); color: var(--txt-3); }
html.theme-light body .notice-dialog-close:hover { background: #e9eef3; color: var(--txt-1); }
html.theme-light body .notice-footer { border-top-color: var(--line); }

html.theme-light body .notice-body { color: var(--txt-2); }
html.theme-light body .notice-body h1,
html.theme-light body .notice-body h2,
html.theme-light body .notice-body h3,
html.theme-light body .notice-body h4 { color: var(--txt-1); }
html.theme-light body .notice-body li::before { background: var(--brand-1); }
html.theme-light body .notice-body strong { color: var(--txt-1); background: var(--brand-soft); }
html.theme-light body .notice-body em { color: var(--txt-3); }
html.theme-light body .notice-body a { color: var(--brand-1); }
html.theme-light body .notice-body code { background: #eef1f5; color: #6d5bd0; }
html.theme-light body .notice-body blockquote {
  background: var(--brand-soft);
  border-left-color: var(--brand-1);
  color: var(--txt-2);
}
html.theme-light body .notice-body hr { border-top-color: var(--line); }

/* ------------------------------------------------------------
 * §12 小程序引流卡片
 * ---------------------------------------------------------- */
html.theme-light body .mq-card {
  background: linear-gradient(180deg, #f4f6ff, #fbfcff);
  border-color: var(--brand-line);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .03);
}
html.theme-light body .mq-card::before {
  background: radial-gradient(circle, rgba(99, 102, 241, .16), transparent 70%);
}
html.theme-light body .mq-badge { color: #5a5fd0; background: #e4e8fd; }
html.theme-light body .mq-desc { color: var(--txt-3); }
html.theme-light body .mq-hint { color: #9aa6b0; }
html.theme-light body .mq-code-wrap { box-shadow: 0 8px 26px rgba(23, 33, 43, .16); }
html.theme-light body .mq-fallback {
  background: #fff;
  border-color: #cfd6dd;
  color: var(--txt-2);
}
html.theme-light body .mq-fallback b { color: var(--brand-1); }

/* 小程序模式下的正文预览 */
html.theme-light body .mq-preview { color: var(--txt-2); }
/* 🔴 收尾渐隐的底色必须跟着主题走，否则浅色下会糊出一条深色带 */
html.theme-light body .detail-body .mq-preview-fade {
  background: linear-gradient(to bottom, rgba(241, 245, 248, 0), #f1f5f8 88%);
}

/* ------------------------------------------------------------
 * §13 详情页
 * ---------------------------------------------------------- */
html.theme-light body .detail-cover {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-3);
}
html.theme-light body .detail-swiper { background: #e9eef3; }
html.theme-light body .detail-swiper-item { background: #fff; }
html.theme-light body .detail-swiper-item img { background: #eef2f5; }
html.theme-light body .detail-swiper-empty { color: var(--txt-3); }

html.theme-light body .detail-body { color: var(--txt-2); }
html.theme-light body .detail-body h1,
html.theme-light body .detail-body h2,
html.theme-light body .detail-body h3,
html.theme-light body .detail-body h4 { color: var(--txt-1); }
html.theme-light body .detail-body h2 { border-bottom-color: var(--line); }
html.theme-light body .detail-body strong { color: var(--txt-1); }
html.theme-light body .detail-body em { color: var(--txt-3); }
html.theme-light body .detail-body a { color: var(--brand-1); }
html.theme-light body .detail-body a:active { color: var(--brand-2); }
html.theme-light body .detail-body blockquote {
  background: var(--brand-soft);
  border-left-color: var(--brand-1);
  color: var(--txt-2);
}
html.theme-light body .detail-body hr { border-top-color: var(--line); }
html.theme-light body .detail-body code { background: #eef1f5; color: #6d5bd0; }
html.theme-light body .detail-body pre { background: #f6f8fa; border-color: var(--line); }
html.theme-light body .detail-body pre code { color: #2f3a45; }
html.theme-light body .detail-meta { color: var(--txt-3); border-bottom-color: var(--line); }

/* ------------------------------------------------------------
 * §14 访问权限门（密码 / 部分预览 / 引导）
 * ---------------------------------------------------------- */
html.theme-light body .gate-box { background: var(--brand-soft); border-color: var(--brand-line); }
html.theme-light body .gate-guide-text { color: var(--txt-2); }
html.theme-light body .gate-pwd {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--txt-1);
}
html.theme-light body .gate-pwd:focus { border-color: var(--brand-1); }
html.theme-light body .gate-msg { color: #e0435c; }
html.theme-light body .detail-preview {
  background: var(--brand-soft);
  border-left-color: var(--brand-1);
  color: var(--txt-2);
}

/* ------------------------------------------------------------
 * §15 Footer
 * ---------------------------------------------------------- */
html.theme-light body .footer { border-top-color: var(--line); }
/* 加入QQ群按钮保持粉紫渐变 —— 浅色底上更醒目 */

/* ------------------------------------------------------------
 * §16 指针设备：hover（照参考站的 translateY + 阴影加深）
 * ---------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html.theme-light body .cat-item:hover {
    background: #fff;
    border-color: var(--brand-line);
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
  }
  html.theme-light body .art-item:hover {
    border-color: var(--brand-line);
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
  }
  html.theme-light body .page-item:hover {
    background: #fff;
    border-color: var(--brand-line);
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
  }
  html.theme-light body .suggest-item:hover { background: var(--bg-soft); }
  html.theme-light body .sp-item:hover { background: var(--bg-soft); border-color: var(--brand-line); }
  html.theme-light body .load-more-btn:hover {
    background: #fff;
    border-color: var(--brand-line);
    color: var(--txt-1);
    box-shadow: var(--shadow-2);
  }
html.theme-light body .search-clear:hover { color: var(--txt-2); }
}

/* 品牌色焦点环（浅底上要有足够对比，否则几乎看不见） */
html.theme-light body a:focus-visible,
html.theme-light body button:focus-visible,
html.theme-light body .notice-bar:focus-visible {
  outline: 2px solid rgba(99, 102, 241, .6);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
 * §17 观感打磨（PC）—— 对齐参考站的圆角与留白节奏
 * ------------------------------------------------------------
 * 参考站实测：卡片圆角 18px、内边距 25px、区块间距 ~30px。
 * 本站原值：圆角 12~14px、内边距 16~20px，偏紧。
 * 这里只在 PC 放宽，手机端保持原样（布局探针已断言 0 差异）。
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  html.theme-light body .cat-item,
  html.theme-light body .page-item,
  html.theme-light body .art-item,
  html.theme-light body .notice-bar,
  html.theme-light body .motto-bar,
  html.theme-light body .search-wrap {
    border-radius: 16px;
  }
  html.theme-light body .mq-card { border-radius: 18px; }
  html.theme-light body .notice-dialog { border-radius: 18px; }

  /* 分类卡：参考站的卡更"透气"，纵向多给一点 */
  html.theme-light body .cat-item { padding-top: 24px; padding-bottom: 22px; }
  html.theme-light body .page-item { padding: 18px; }

  /* PC：这行空提示与输入框 placeholder 说的是同一件事，
     留着只是一条孤零零的灰字，反而把「搜索」和「内容分类」割开。
     手机端保留（触屏上没有 hover 提示，这句还有点引导作用）。 */
  html.theme-light body .search-panel.active .suggest-empty { display: none; }

  /* 区块标题再大一点，层级更清楚 */
  html.theme-light body .section-title { font-size: 20px; }
}

/* ------------------------------------------------------------
 * §18 品牌色按钮（浅底上要够重）
 * ---------------------------------------------------------- */
html.theme-light body .join-group-link,
html.theme-light body .notice-footer-btn,
html.theme-light body .gate-btn {
  box-shadow: 0 6px 18px rgba(99, 102, 241, .28);
}

/* ============================================================
 * §19 子页面 / 列表页 / 更新记录 / 权限锁定页
 * ============================================================
 * 为什么补这一段（2026-09-27）：
 *   §1-§18 只覆盖「首页 + 详情页」（它们吃 style.css / style-v2.css）。
 *   子页面走 subpage.css，里面**大量硬编码了深色专用的浅字**：
 *     .meta { color: rgba(255,255,255,.38) }   .app-link { color:#a5b4fc }
 *     .upd-nolink { color: rgba(255,255,255,.22) }  ...
 *   这些在 #f1f5f8 浅底上基本等于隐形 —— 不覆盖 = 「一切浅色子页面就瞎了」。
 *
 * 🔴 两个必须注意的坑：
 *   1. **只改颜色 / 底色 / 边框，绝不碰 padding/margin** ——
 *      否则会打乱 860px 子页面中轴（见文件头约束 2）。
 *   2. 本文件选择器特异性是 (0,2,2)，**高于** subpage.css 里的
 *      `.sub-tab.active` (0,2,0)、`.app-card:target` (0,2,0) 等
 *      → 一旦我覆盖了父级（如 .sub-tab 的 color），
 *        原本更具体的子规则（.sub-tab.active 的白字）反而会被压住。
 *      所以下面凡是父级有覆盖的，都把对应的 .active / :target 一并补回来。
 * ============================================================ */

/* ---- §19.1 子页面内页头（各子页面顶部那块深色渐变） ---- */
html.theme-light body .sub-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .04);
}
html.theme-light body .sub-hero h1 { color: var(--txt-1); }
html.theme-light body .sub-hero-info { color: var(--txt-2); }
html.theme-light body .sub-hero-info a { color: var(--brand-1); }
html.theme-light body .sub-hero-get { border-top-color: var(--line); }
html.theme-light body .sub-hero-get a { color: #b45309; }   /* 琥珀在浅底要压深，否则发飘 */
html.theme-light body .sub-hero-time { color: var(--txt-3); }

/* ---- §19.2 Tab 条（吸顶）---- */
html.theme-light body .sub-tabs {
  background: rgba(241, 245, 248, .92);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html.theme-light body .sub-tab {
  background: #fff;
  border-color: var(--line);
  color: var(--txt-2);
}
/* ⚠️ 必须补：否则被上面那条 (0,2,2) 压住，选中态变成灰字 */
html.theme-light body .sub-tab.active {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-color: transparent;
  color: #fff;
}

/* ---- §19.3 APP 卡片（ios / 安卓等子页面正文）---- */
html.theme-light body .app-card {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .03);
}
html.theme-light body .app-card:target {
  border-color: rgba(99, 102, 241, .55);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, .25);
}
html.theme-light body .app-title { color: var(--txt-1); }
html.theme-light body .stars { color: #d97706; }
html.theme-light body .app-card > div { color: var(--txt-2); }
html.theme-light body .app-link { color: var(--brand-1); }
html.theme-light body .app-link:active { color: var(--brand-2); }
html.theme-light body .app-note { color: #15803d; }
html.theme-light body .meta { color: var(--txt-3); }
html.theme-light body .method,
html.theme-light body .comment { color: var(--txt-2); }
html.theme-light body .note { color: #b45309; }
html.theme-light body .source {
  color: var(--txt-3);
  background: #eef2f6;
}

html.theme-light body .subpage-footer-note { color: var(--txt-3); }

/* ---- §19.4 搜索结果里的「子页面」结果块 ---- */
html.theme-light body .sp-result-head,
html.theme-light body .sp-divider { color: var(--txt-3); }
html.theme-light body .sp-item {
  background: #fff;
  border-color: var(--line);
}
html.theme-light body .sp-item:active { background: var(--bg-soft); }
html.theme-light body .sp-item-top { color: var(--txt-1); }
html.theme-light body .sp-item-badge { color: #5a5fd0; background: #e4e8fd; }
html.theme-light body .sp-item-snippet { color: var(--txt-3); }
html.theme-light body .sp-item-group,
html.theme-light body .sp-loading { color: var(--txt-3); }
html.theme-light body .sp-item mark { color: var(--brand-1); }

/* ---- §19.5 更新记录页 /updates/ ---- */
html.theme-light body .upd-search { border-top-color: var(--line); }
html.theme-light body .upd-search input {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--txt-1);
}
html.theme-light body .upd-search input::placeholder { color: #a3aeb8; }
html.theme-light body .upd-search input:focus {
  border-color: var(--brand-1);
  background: #fff;
}
html.theme-light body .upd-search-ico { opacity: .45; }
html.theme-light body .upd-search-clr { background: #eef2f6; color: var(--txt-3); }
html.theme-light body .upd-search-clr:active { background: #e4eaef; }
html.theme-light body .upd-search-cnt,
html.theme-light body .upd-day-week,
html.theme-light body .upd-hit-none { color: var(--txt-3); }
html.theme-light body .upd-hit-date { color: #9aa6b0; }

html.theme-light body .upd-stat {
  background: #fff;
  border-color: var(--line);
}
html.theme-light body .upd-stat b { color: var(--txt-1); }
html.theme-light body .upd-stat span { color: var(--txt-3); }

html.theme-light body .upd-day-date { color: var(--brand-1); }
html.theme-light body .upd-day-count { background: var(--brand-soft); color: #5a5fd0; }

html.theme-light body .upd-item {
  background: #fff;
  border-color: var(--line);
}
html.theme-light body .upd-item:target {
  border-color: rgba(99, 102, 241, .55);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, .25);
}
html.theme-light body .upd-name { color: var(--txt-1); }
html.theme-light body .upd-ver  { background: #e4e8fd; color: #5a5fd0; }
html.theme-light body .upd-plat { background: #fdf0d5; color: #b45309; }
html.theme-light body .upd-sub { color: var(--txt-3); }
html.theme-light body .upd-sub > .upd-cat:not(:first-child)::before,
html.theme-light body .upd-sub > .upd-size:not(:first-child)::before { color: #c3ccd4; }
html.theme-light body .upd-cat { color: var(--txt-3); }
html.theme-light body .upd-link { color: #b45309; background: #fdf0d5; }
/* 「暂无链接」是弱提示，但也不能弱到看不见 —— #b3bec7 在浅底上合成亮度 188（太飘），
   压到 #9aa6b0 与 .page-updated / .upd-hit-date 同一档 */
html.theme-light body .upd-nolink { color: #9aa6b0; }

/* ---- §19.6 子页面访问权限锁定页（password / partial / guide）---- */
html.theme-light body .lock-card {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .04);
}
html.theme-light body .lock-title { color: var(--txt-1); }
html.theme-light body .lock-sub { color: var(--txt-3); }
html.theme-light body .lock-input {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--txt-1);
}
html.theme-light body .lock-input:focus { border-color: var(--brand-1); }
html.theme-light body .lock-err { color: #d9364f; }
html.theme-light body .lock-note { color: var(--txt-3); }

html.theme-light body .lock-preview {
  background: #f7fafc;
  border-color: var(--line);
}
html.theme-light body .lock-preview-hd { color: #b45309; }
html.theme-light body .lock-preview-body { color: var(--txt-2); }
/* 🔴 渐隐底色必须和 .lock-preview 的底色**完全一致**，否则收尾会糊出一条色带 */
html.theme-light body .lock-preview-fade {
  background: linear-gradient(to bottom, rgba(247, 250, 252, 0), #f7fafc 92%);
}
html.theme-light body .lock-guide { border-top-color: var(--line); }
html.theme-light body .lock-guide-text { color: var(--txt-2); }

/* 锁图标在浅底上的投影别太重 */
html.theme-light body .page-lock { filter: drop-shadow(0 1px 2px rgba(23, 33, 43, .28)); }

/* ---- §19.7 指针设备 hover ---- */
@media (hover: hover) and (pointer: fine) {
  html.theme-light body .app-card:hover,
  html.theme-light body .upd-item:hover,
  html.theme-light body .upd-stat:hover {
    border-color: var(--brand-line);
  }
  html.theme-light body .sp-item:hover { background: var(--bg-soft); border-color: var(--brand-line); }
}

/* ------------------------------------------------------------
 * §20 通用界面增强（回到顶部 / 阅读进度条）
 * ------------------------------------------------------------
 * 对应 ui.css。深色那支在 ui.css，这里是浅色覆盖（成对，别拆）。
 * ⚠️ 新增任何 ui.js 注入的控件，都必须来这里补一条 ——
 *    否则浅色下会隐形（本项目已因漏覆盖踩过坑，即 §19 的由来）。
 *    第 11 轮的骨架屏就属于这一类，见下面的 §21。
 * ---------------------------------------------------------- */
html.theme-light body .to-top {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(41, 59, 74, .12);
  color: #46545f;
  box-shadow: 0 4px 14px rgba(41, 59, 74, .10);
}

/* 浅底上光晕要收一收，否则糊成一团（渐变本身用品牌色，两主题一致） */
html.theme-light body .read-progress > i {
  box-shadow: 0 0 6px rgba(99, 102, 241, .38);
}

@media (hover: hover) and (pointer: fine) {
  html.theme-light body .to-top:hover {
    background: var(--brand-1);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(99, 102, 241, .28);
  }
}

/* ------------------------------------------------------------
 * §21 骨架屏 / 破图占位 / 减少动效环色（第 11 轮）
 * ------------------------------------------------------------
 * 🔴 这一节不是"锦上添花"，是**必需项**：
 *  · ui.css §4 的深色骨架是 `rgba(255,255,255,.06)` —— 半透明白，
 *    铺在浅色主题的白底上**完全隐形**，用户会看到一片空白，
 *    比原来的转圈还糟；
 *  · ui.css §7 的破图占位同理（渐变里的白/紫在浅底上糊成一片浅紫）；
 *  · ui.css §3 里 `.spinner` 在「减少动效」下的环色写的是半透明白。
 *
 * 浅色的做法：骨架底色取比卡片底(#fff)略深的灰蓝，高光用**白**扫过
 * （深色那边正好反过来：底暗白、光更亮）。
 * ---------------------------------------------------------- */
html.theme-light body .sk {
  --sk-base: #e8edf1;
  --sk-hi: rgba(255, 255, 255, .85);
}
html.theme-light body .sk-cat,
html.theme-light body .sk-art {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(41, 59, 74, .03);
}

html.theme-light body .img-fb {
  background: linear-gradient(135deg, #eef1fb, #f1edfb);
  color: rgba(41, 59, 74, .28);
}
@media (min-width: 1024px) {
  html.theme-light body .img-fb-lg { border-color: var(--line-strong); }
}

/* 「减少动效」下的加载环 —— 浅底上用灰环，写死的半透明白会隐形 */
html.theme-light body .spinner { --lmw-ring: #d4dde4; }

/* 键盘焦点环（ui.css §8）在浅底上要加重，否则几乎看不见 */
html.theme-light body [role="button"]:focus-visible {
  outline-color: var(--brand-1);
}

/* 搜索空态的 chips（ui.css §9）—— 深色那套是「半透明白」，浅底上会隐形 */
html.theme-light body .sp-sec + .sp-sec { border-top-color: var(--line); }
html.theme-light body .sp-sec-title { color: var(--txt-3); }
html.theme-light body .sp-sec-clear { color: var(--txt-3); }
html.theme-light body .sp-sec-clear:active { color: var(--txt-1); }
html.theme-light body .sp-chip {
  color: var(--txt-2);
  background: var(--bg-soft);
  border-color: var(--line);
}
html.theme-light body .sp-chip:active {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: #4b50c6;
}
@media (hover: hover) and (pointer: fine) {
  html.theme-light body .sp-chip:hover {
    background: #fff;
    border-color: var(--brand-line);
    color: #4b50c6;
  }
  html.theme-light body .sp-sec-clear:hover { color: var(--txt-1); }
}