@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 1000;
  font-display: swap;
  src: url("./fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 1000;
  font-display: swap;
  src: url("./fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("./fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   英文主字体：Geist（2026-10-01，用户要求「整个网页的英文字体」都换掉）
   ---------------------------------------------------------------------------
   用户点名要 Mobbin（mobbin.com/pricing）那套英文字体。那套叫 **Saans**，
   是 Mobbin 自己买了授权、自托管的商业字体 —— 直接把它拷到本站上等于盗用授权，
   所以这里换成**外观最接近、可以合法自托管**的 Geist（Vercel 那套，SIL OFL 1.1）。
   同样是 100~900 的可变字重，笔画干净、字距偏紧，正是那种 SaaS 站的味道。

   ⚠️ 字体文件放在 assets/fonts/geist-*.woff2（本仓库自托管，不走 CDN，
      因为 _headers 里的 CSP 只允许 'self'）。
   ⚠️ unicode-range 只用 latin / latin-ext：中文继续交给系统里的
      PingFang SC / 微软雅黑，中文字形不会被英文西文字体带跑。
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* only light：本站在亮色下自己完整配色，不要让 MIUI / 安卓浏览器再强制反色 */
  color-scheme: only light;
  --bg: #f7f5f0;
  --bg-strong: #ffffff;
  --surface: rgba(255, 255, 255, 0.8);
  --surface-solid: #ffffff;
  --surface-muted: rgba(0, 0, 0, 0.045);
  /* 参考 qiewenpaper.com 的桌面左栏：浅蓝底，和右侧内容区形成明确分区 */
  --desktop-nav-bg: #f3f8ff;
  --desktop-nav-border: #e1ebf8;
  --desktop-nav-hover: rgba(255, 255, 255, 0.72);
  --desktop-nav-active: #ffffff;
  --text: #1d1d1f;
  --text-soft: #3f3f46;
  --text-faint: #5f5f65;
  --border: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.2);
  --shadow: 0 16px 50px rgba(0, 0, 0, 0.09);
  --shadow-hover: 0 24px 70px rgba(0, 0, 0, 0.15);
  --accent: #0071e3;
  /* 小字号文字用的深一档蓝色：保留原来的亮蓝做图形和强调色 */
  --accent-ink: #0065cd;
  --accent-two: #0071e3;
  --active-accent: #0071e3;
  --danger: #d70015;
  --focus: #0071e3;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 11px;
  --max-width: 1180px;
  /* Geist 排在最前面：英文走 Geist，中文没覆盖到就自动落到后面的系统字体。
     ⚠️ DM Sans 保留在最后当兜底（它还在 fonts 目录里，删掉也不影响）。 */
  /* 2026-10-11：字体库（/assets/cover-fonts，34 款开源字体）选中之后，
     app.js 会把 --site-font-ui / --site-font-display 设成那款字体的名字，
     这里用 var(..., 默认值) 把它插到字体栈最前面；没选就是原来的 Geist 栈。 */
  --font-ui: var(--site-font-ui, "Geist"), -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "DM Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: var(--site-font-display, "Geist"), -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "DM Sans", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --page-overlay: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.1));
  --neon-lines: none;
  --neon-glow: none;
  --site-background-mobile-image: none;
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24));
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.78);
  --glass-shadow: 0 10px 32px rgba(0, 0, 0, 0.07);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-theme="dark"] {
  color-scheme: dark;
  /*
   * 2026-10-01 第二次重做暗色（用户原话：「模板自带的黑色模式配色真的特别特别难看，
   * 尤其是模块，黑色非常难看，模块的左上角还泛一点光，简直跟塑料一样」）。
   *
   * 上一版是「带蓝的炭黑 + 玻璃渐变 + 左上角白色高光」，问题就在那层高光：
   * 深色下它是唯一的亮块，看着像塑料。
   *
   * 现在照 saaspo.com 那种暗色来做（也贴近 Attio / Linear 的观感）：
   *   1) 底 = 近黑的中性灰 #0b0b0c，**不带蓝**，和任何强调色都不打架
   *   2) 卡片 = 平底 #141416，只靠一条极细的边框和底色分开，没有渐变、没有高光
   *   3) 正文 #f2f2f3、次要 #a1a1a7，避免纯白刺眼
   *   4) 阴影压到几乎看不见（深色下大投影只会显脏）
   *   5) --glass-* 全部改成平色：卡片、搜索框、侧栏都不再做「玻璃」质感
   * ⚠️ --bg 必须和 app.js 的 THEME_PAGE_BACKGROUND.dark、theme-bootstrap.js 一致。
   */
  --bg: #0b0b0c;
  --bg-strong: #141416;
  --surface: #141416;
  --surface-solid: #141416;
  --surface-muted: rgba(255, 255, 255, 0.055);
  --desktop-nav-bg: #101114;
  --desktop-nav-border: rgba(255, 255, 255, 0.09);
  --desktop-nav-hover: rgba(255, 255, 255, 0.055);
  --desktop-nav-active: #1b1d21;
  --text: #f2f2f3;
  --text-soft: #a1a1a7;
  --text-faint: #7c7c84;
  --border: rgba(255, 255, 255, 0.085);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.5);
  --accent: #3b82f6;
  --accent-ink: #6ea8ff;
  --accent-two: #3b82f6;
  --active-accent: #3b82f6;
  --focus: #6ea8ff;
  --page-overlay: linear-gradient(rgba(11, 11, 12, 0.42), rgba(11, 11, 12, 0.92));
  --neon-lines: none;
  --neon-glow: none;
  --glass-bg: #141416;
  --glass-border: rgba(255, 255, 255, 0.085);
  --glass-highlight: transparent;
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* PurePin-inspired solid dark: neutral surfaces, no full-page gradients.
 * Kept separate from dark-fluid, MicroSlats and user wallpaper settings.
 * First-paint colour must match theme-bootstrap.js and app.js.
 */
html[data-background-mode="dark"] {
  --bg: #0a0a0b;
  --bg-strong: #151515;
  --surface: #151515;
  --surface-solid: #151515;
  --surface-muted: #1e1e20;
  --desktop-nav-bg: #101011;
  --desktop-nav-border: #282829;
  --desktop-nav-hover: #1e1e20;
  --desktop-nav-active: #242426;
  --text: #ffffff;
  --text-soft: #b7b7bd;
  --text-faint: #9a9a9f;
  --border: #282829;
  --border-strong: #414145;
  --shadow: none;
  --shadow-hover: none;
  --accent: #e11d27;
  --accent-ink: #ff4458;
  --accent-two: #e11d27;
  --active-accent: #e11d27;
  --focus: #ff4458;
  --glass-bg: #151515;
  --glass-border: #282829;
  --glass-highlight: transparent;
  --glass-shadow: none;
  --page-overlay: none;
  --font-ui: var(--site-font-ui, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[data-background-mode="dark"] :is(.ambient, .liquid-stage) { display: none; }
html:not([data-background-mode="light"]):not([data-background-mode="dark-fluid"]) .liquid-stage.is-fallback::before {
  animation: none;
}

/* ---------------------------------------------------------------------------
   「Reddit 白」背景主题（2026-09-27 用户点名要的）
   ---------------------------------------------------------------------------
   用户原话：「我还喜欢这两个网站的白色（Reddit / YouTube）…加到我的背景主题颜色
   里面，你给这个白色起个名字，就是这两个网站的背景颜色」。
   那两个站的光感是：页面底一层很淡的冷灰、卡片是干净的纯白 —— 比咱们原来的
   「纯白档」（整页死白）更有层次。液态画布照旧不显示（只有 light / dark 两档才显示）。
   ⚠️ --bg 必须和 app.js / theme-bootstrap.js 里的 paper 底色一模一样（#f6f7f8）。
   --------------------------------------------------------------------------- */
html[data-background-mode="paper"] {
  /* 照 YouTube / Reddit 的浅色主题抄的（用户 2026-09-27 第二次点名：
     「现在的白色跟那个网站的白色还差远了，请你仔细看看这两个网站的白」）。
       · 页面底 = **纯白 #ffffff**（上一版是 #f6f7f8 冷灰，用户说差远了）
       · 卡片 = 平底纯白 + 一条 #e5e5e5 细线，没有毛玻璃、没有大投影
       · 正文 #0f0f0f（YouTube 的 text-primary）、次要文字 #606060
       · 搜索框 / 小胶囊用 #f2f2f2 浅灰填充（YouTube 那条搜索框就长这样）
     ⚠️ --bg 必须和 app.js 的 THEME_PAGE_BACKGROUND.paper、theme-bootstrap.js 一致。 */
  --bg: #ffffff;
  --bg-strong: #ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-muted: #f2f2f2;
  --desktop-nav-bg: #f6f7f8;
  --desktop-nav-border: #e5e5e5;
  --desktop-nav-hover: #ffffff;
  --desktop-nav-active: #ffffff;
  --text: #0f0f0f;
  --text-soft: #3d3d3d;
  --text-faint: #606060;
  --border: #e5e5e5;
  --border-strong: #d9d9d9;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1);
  --glass-bg: #ffffff;
  --glass-border: #e5e5e5;
  --glass-highlight: transparent;
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 卡片：平底白 + 一条细线（那两个站的卡片都是这样，不是毛玻璃）。
   ⚠️ 特意带上 [data-theme="light"] 提高特异性 —— 后面还有一条
   `html[data-theme="light"] .module-card`（毛玻璃渐变），光写
   `html[data-background-mode="paper"] .module-card` 会被它压过去（实测踩过）。 */
html[data-background-mode="paper"][data-theme="light"] .module-card {
  border-color: #e5e5e5;
  background: #ffffff;
  box-shadow: none;
}

/* 搜索框：浅灰填充 + 细边（照 YouTube 那条搜索框） */
html[data-background-mode="paper"] .search-box {
  background: #f2f2f2;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  backdrop-filter: none;
}

html[data-background-mode="paper"] .hero-stats {
  border-color: #e5e5e5;
  background: #f9f9f9;
}

/* ---------------------------------------------------------------------------
   主题颜色（设置 → 主题颜色，2026-09-27）
   ---------------------------------------------------------------------------
   用户在设置里锁了一个颜色、或者选了「随机」时，全站的大模块图标 / 小分类强调色
   都换成它。这些颜色本来是 JS 写在元素行内 style 上的（--module-accent /
   --section-accent），只有带 !important 的作者样式才压得住行内声明。
   --------------------------------------------------------------------------- */
html[data-accent-lock] {
  --active-accent: var(--locked-accent) !important;
}

html[data-accent-lock] .module-card,
html[data-accent-lock] .bookmark-section,
html[data-accent-lock] .bookmark-card {
  --module-accent: var(--locked-accent) !important;
  --section-accent: var(--locked-accent) !important;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html {
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-width: 320px;
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background: var(--bg);
  isolation: isolate;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 240ms ease, color 240ms ease;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  /* 背景图「怎么摆」由 app.js 算好写成变量（完整显示/填满、放大缩小、拖位置都在这里生效）：
       --wallpaper-size      图片画多大（px px；没给就沿用老规则 cover）
       --wallpaper-position  background-position 的百分比（拖拽改的就是它） */
  background-color: transparent;
  background-image: var(--site-background-image, none);
  background-position: var(--wallpaper-position, center);
  background-repeat: no-repeat;
  background-size: var(--wallpaper-size, cover);
  content: "";
  opacity: 0;
  transition: opacity 550ms ease;
  pointer-events: none;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page-overlay);
  content: "";
  opacity: 0;
  transition: opacity 550ms ease;
  pointer-events: none;
}

html[data-background-mode="custom"] body::before,
html[data-background-mode="custom"] body::after {
  opacity: 1;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

svg {
  display: block;
}

.ambient {
  display: none;
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.6;
}

.ambient-one {
  top: 18%;
  left: -10rem;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16), transparent 70%);
}

.ambient-two {
  right: -8rem;
  bottom: 8%;
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.12), transparent 70%);
}

html[data-theme="dark"] .ambient {
  opacity: 0.72;
  filter: blur(34px);
  animation: neon-breathe 8s ease-in-out infinite alternate;
}

html[data-theme="dark"] .ambient-one {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.24), transparent 70%);
}

html[data-theme="dark"] .ambient-two {
  background: radial-gradient(circle, rgba(217, 70, 239, 0.22), transparent 70%);
  animation-delay: -3s;
}

html[data-theme="dark"] .hero h1 {
  text-shadow: 0 0 28px rgba(10, 132, 255, 0.18), 0 5px 34px rgba(0, 0, 0, 0.58);
}

/* 首屏中间那个圆形头像 2026-09-27 已删（用户：左上角那个就够了）。
   它的样式（.hero-avatar / ::after / img）跟着一起删了；如果以后又想加回来，
   宠物吸附用的那几个调好的偏移量记在 assets/pet.js 的 dockPosition() 注释里。 */
@keyframes neon-breathe {
  from {
    opacity: 0.46;
    transform: scale(0.96);
  }
  to {
    opacity: 0.78;
    transform: scale(1.06);
  }
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  color: #ffffff;
  background: #4f46e5;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent);
  outline-offset: 3px;
}

.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 0 auto;
  padding: 0.95rem 0;
}

.header-brand-slot,
.header-search-slot {
  display: contents;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  /* 它是打开侧边栏的主要入口，补到 44px 高更好点（头像本身尺寸不变） */
  min-height: 2.75rem;
  align-items: center;
  gap: 0.78rem;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.brand-mark {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 50%;
  background: var(--surface-muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.brand-copy strong {
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.brand-copy small {
  color: var(--text-faint);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.icon-button {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  backdrop-filter: blur(16px);
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.icon-button:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.icon-button svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.theme-toggle .sun-icon {
  display: none;
}

.theme-toggle .moon-icon {
  display: block;
}

html[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

html[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

main {
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 0 auto;
}

.hero {
  /* 首屏整体往上带（2026-09-25 用户第二次反馈：「标题怎么没往上移」）。
     实测目标：标题中心落在屏幕 31%~39%（屏幕越高越靠上），页首不留大片空白。
     头像和标题的间距拆成两段算，见下面 .hero .eyebrow。 */
  padding: clamp(0.5rem, calc(8vh - 45px), 3rem) 0 clamp(0.25rem, 0.8vw, 0.55rem);
  text-align: center;
}

/* 头像和标题之间那段留白随屏幕高度伸缩：矮屏收紧、高屏放开。
   结果是头像始终靠上（12vh），标题中心稳定落在 40vh 附近。
   只作用于 hero 里的 eyebrow，别影响 .toolbar-kicker 那种通用用法。 */
.hero .eyebrow {
  margin-top: clamp(0.6rem, calc(12vh - 70px), 4.5rem);
}

.eyebrow,
.toolbar-kicker {
  margin: 0 0 0.7rem;
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}

.hero h1 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(2.15rem, 5vw, 3.9rem);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.hero h1 span {
  color: transparent;
  background: linear-gradient(100deg, var(--accent) 5%, #57c7f5 48%, var(--accent-two) 94%);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero-copy {
  max-width: 640px;
  margin: 0.9rem auto 0;
  color: var(--text-soft);
  font-size: clamp(0.95rem, 1.7vw, 1.03rem);
  line-height: 1.65;
}

.hero-stats {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.6rem auto 0;
  padding: 0.55rem 0.78rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.status-dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.search-shell {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 720px);
  height: 3.9rem;
  margin: 1.35rem auto 0;
  border: 1px solid var(--border-strong);
  border-radius: 21px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.search-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-2px);
}

.search-icon {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin-left: 1.3rem;
  fill: none;
  stroke: var(--text-faint);
  stroke-linecap: round;
  stroke-width: 1.8;
}

.search-shell input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 7.3rem 0 0.9rem;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 1rem;
}

.search-shell input::placeholder {
  color: var(--text-faint);
}

.search-shell input::-webkit-search-cancel-button {
  display: none;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.38rem;
  border: 1px solid var(--border);
  border-bottom-color: var(--border-strong);
  border-radius: 7px;
  color: var(--text-faint);
  background: var(--surface-muted);
  box-shadow: 0 1px 0 var(--border-strong);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.search-shortcut {
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.search-clear {
  position: absolute;
  right: 0.8rem;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: var(--text-soft);
  background: var(--surface-muted);
  cursor: pointer;
}

.search-clear svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.usage-guide {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 2.2rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.usage-copy h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: -0.03em;
}

.usage-copy > p:last-child {
  margin: 0.65rem 0 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.65;
}

.usage-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.usage-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: 100%;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-muted);
}

.step-number {
  display: grid;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
}

.usage-steps strong {
  display: block;
  font-size: 0.8rem;
}

.usage-steps p {
  margin: 0.28rem 0 0;
  color: var(--text-faint);
  font-size: 0.68rem;
  line-height: 1.5;
}

.collection-panel {
  padding-bottom: 3.2rem;
}

.toolbar {
  position: sticky;
  z-index: 8;
  top: 0.8rem;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bg-strong) 80%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.toolbar-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0.25rem 0.9rem;
}

.toolbar-kicker {
  margin-bottom: 0.28rem;
  font-size: 0.62rem;
}

.toolbar-heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  letter-spacing: -0.035em;
}

.result-count {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.82rem;
}

.category-nav {
  display: flex;
  gap: 0.55rem;
  padding: 0.1rem 0.15rem 0.8rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.module-description {
  margin: 0 0.25rem 0.9rem;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.65;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.48rem;
  min-height: 2.55rem;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text-soft);
  background: var(--surface-muted);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 650;
  transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease, transform 170ms ease;
}

.category-button:hover {
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.category-button[aria-pressed="true"] {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #3ba8f5));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 24%, transparent);
}

.category-button .category-symbol {
  font-size: 0.92rem;
}

.category-button .category-count {
  display: inline-grid;
  min-width: 1.45rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  place-items: center;
  border-radius: 999px;
  color: inherit;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 0.68rem;
}

.view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.2rem 0.05rem;
  border-top: 1px solid var(--border);
}

.view-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--text-faint);
  font-size: 0.75rem;
}

.view-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.78rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 0.77rem;
  font-weight: 650;
  transition: border-color 170ms ease, color 170ms ease, background-color 170ms ease;
}

.view-toggle:hover,
.view-toggle[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-muted);
}

.view-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.square-toggle {
  display: none;
}

.collection-toggle svg {
  transition: transform 180ms ease;
}

.collection-toggle[aria-pressed="false"] svg {
  transform: rotate(180deg);
}

.bookmark-root {
  padding-top: 1.6rem;
}

.bookmark-section {
  --section-accent: var(--accent);
  margin-top: 1.8rem;
}

.bookmark-section:first-child {
  margin-top: 0;
}

.bookmark-root.is-all-collapsed .bookmark-section {
  margin-top: 1.25rem;
}

.bookmark-root.is-all-collapsed .section-heading {
  margin-bottom: 0;
}

.bookmark-root.is-all-collapsed .bookmark-grid {
  display: none;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0 0.2rem;
}

.section-identity {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.section-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--section-accent) 22%, var(--border));
  border-radius: 13px;
  color: var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 12%, transparent);
  font-size: 1rem;
  font-weight: 800;
}

.section-title {
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: -0.025em;
}

.section-description {
  margin: 0.18rem 0 0;
  color: var(--text-faint);
  font-size: 0.78rem;
}

.section-count {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 0.77rem;
}

/*
 * 「已隐藏」标记：只在管理员预览隐藏内容时出现（首页带 ?preview-hidden=1）。
 * 以前隐藏的分类在预览里没有任何标记，看起来就像「隐藏没生效」。
 */
.section-hidden-badge {
  flex: none;
  align-self: center;
  margin-left: 0.55rem;
  padding: 0.16rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-faint);
  background: var(--surface-muted);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 650;
  transition: color 170ms ease, border-color 170ms ease, background-color 170ms ease;
}

.section-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-solid);
}

.section-toggle svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  transition: transform 180ms ease;
}

.bookmark-section:not(.is-collapsed) .section-toggle svg {
  transform: rotate(180deg);
}

.bookmark-section.is-collapsed .bookmark-grid {
  display: none;
}

.bookmark-section.is-collapsed .section-heading {
  margin-bottom: 0;
}

.bookmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 0.9rem;
}

.bookmark-card {
  position: relative;
  display: flex;
  min-height: 220px;
  padding: 1.2rem;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  /* 2026-10-01：书签卡也一样不做实时毛玻璃 —— 一个模块页动辄上百张卡，
     每张都来一层 backdrop-filter，滚动时必掉帧。 */
  backdrop-filter: none;
  transition: transform 210ms ease, border-color 210ms ease, box-shadow 210ms ease, background-color 210ms ease;
}

.bookmark-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--section-accent) 10%, transparent), transparent 48%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 210ms ease;
}

.bookmark-card:hover {
  z-index: 1;
  border-color: color-mix(in srgb, var(--section-accent) 38%, var(--border));
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}

.bookmark-card:hover::before {
  opacity: 1;
}

.card-glow {
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: var(--section-accent);
  filter: blur(52px);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 210ms ease;
}

.bookmark-card:hover .card-glow {
  opacity: 0.18;
}

.card-top,
.card-content,
.card-bottom {
  position: relative;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.bookmark-icon {
  position: relative;
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--section-accent) 27%, var(--border));
  border-radius: 13px;
  color: var(--section-accent);
  background: color-mix(in srgb, var(--section-accent) 13%, var(--surface-muted));
  font-size: 1rem;
  font-weight: 850;
}

.bookmark-icon.has-image {
  background: #ffffff;
}

.bookmark-icon img {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 5px;
  object-fit: contain;
}

/* 高清图标：压在 16×16 的旧图标上面，加载完再淡入，避免看到半张糊图 */
.bookmark-icon img.bookmark-icon-hd {
  position: absolute;
  inset: 0;
  width: 1.65rem;
  height: 1.65rem;
  margin: auto;
  opacity: 0;
  transition: opacity 240ms ease;
}

.bookmark-icon.has-hd {
  background: #ffffff;
}

.bookmark-icon.has-hd img.bookmark-icon-hd {
  opacity: 1;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hidden-badge {
  padding: 0.24rem 0.44rem;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-radius: 999px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  font-size: 0.62rem;
  font-weight: 750;
}

.bookmark-health-tag {
  flex: 0 0 auto;
  padding: 0.22rem 0.46rem;
  border: 1px solid var(--ref-line, var(--border));
  border-radius: 999px;
  color: var(--ref-muted, var(--text-faint));
  background: var(--ref-soft, var(--surface-muted));
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.bookmark-health-tag.is-domestic {
  border-color: color-mix(in srgb, #16a34a 28%, var(--ref-line, var(--border)));
  color: #15803d;
  background: color-mix(in srgb, #16a34a 9%, var(--ref-surface, var(--surface)));
}

.bookmark-health-tag.is-foreign {
  border-color: color-mix(in srgb, #dc2626 32%, var(--ref-line, var(--border)));
  color: #b91c1c;
  background: color-mix(in srgb, #ef4444 9%, var(--ref-surface, var(--surface)));
}

.bookmark-health-tag.is-unavailable {
  border-color: color-mix(in srgb, #64748b 32%, var(--ref-line, var(--border)));
  color: #475569;
  background: color-mix(in srgb, #64748b 9%, var(--ref-surface, var(--surface)));
}

.bookmark-card > .bookmark-health-tag {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 2;
}
.bookmark-card.has-health-badge .bookmark-arrow { visibility: hidden; }
.bookmark-root:is(.is-view-2,.is-compact) .bookmark-card.has-health-badge .bookmark-title { padding-inline-end: 4.6rem; }
html[lang="zh-CN"] .bookmark-root:is(.is-view-2,.is-compact) .bookmark-card.has-health-badge .bookmark-title { padding-inline-end: 2.8rem; }

html[data-theme="dark"] .bookmark-health-tag.is-domestic {
  color: #86efac;
  background: rgb(22 163 74 / 13%);
}

html[data-theme="dark"] .bookmark-health-tag.is-foreign {
  color: #fca5a5;
  background: rgb(239 68 68 / 14%);
}
html[data-theme="dark"] .bookmark-health-tag.is-unavailable { color: #cbd5e1; background: rgb(100 116 139 / 16%); }

.bookmark-card.is-link-dead {
  border-color: color-mix(in srgb, #ef4444 42%, var(--ref-line, var(--border))) !important;
}

.bookmark-card.is-link-dead .bookmark-title {
  color: color-mix(in srgb, #dc2626 72%, var(--ref-ink, var(--text)));
}

.link-health-legend {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.34rem 0.62rem;
  color: var(--text-faint);
  font-size: 0.67rem;
  line-height: 1.45;
}

.link-health-legend-head {
  color: var(--text-soft);
  font-weight: 700;
}

.link-health-legend-date {
  white-space: nowrap;
}

.link-health-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}

.link-health-legend-item::before {
  width: 0.38rem;
  height: 0.38rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.link-health-legend-item.is-ok {
  color: #15803d;
}

.link-health-legend-item.is-limited {
  color: #b91c1c;
}

.link-health-legend-item.is-dead {
  color: #475569;
}

html[data-theme="dark"] .link-health-legend-item.is-ok {
  color: #86efac;
}

html[data-theme="dark"] .link-health-legend-item.is-limited {
  color: #fca5a5;
}

html[data-theme="dark"] .link-health-legend-item.is-dead {
  color: #cbd5e1;
}

.search-hit-top > .bookmark-health-tag,
.search-source-title-line > .bookmark-health-tag {
  padding: 0.13rem 0.36rem;
  font-size: 0.59rem;
}

.search-hit-top > .bookmark-health-tag {
  flex: 0 0 auto;
  margin-left: auto;
}

.search-source-title-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.38rem;
}

.search-source-title-line > strong {
  min-width: 0;
}

.bookmark-card.is-hidden-bookmark {
  border-style: dashed;
}

.bookmark-arrow {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 10px;
  color: var(--text-faint);
  background: var(--surface-muted);
  transform: translate(2px, -2px);
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.bookmark-card:hover .card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hidden-badge {
  padding: 0.24rem 0.44rem;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-radius: 999px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  font-size: 0.62rem;
  font-weight: 750;
}

.bookmark-card.is-hidden-bookmark {
  border-style: dashed;
}

.bookmark-arrow {
  color: #ffffff;
  background: var(--section-accent);
  transform: translate(0, 0);
}

.bookmark-arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.card-content {
  display: flex;
  margin: 1.15rem 0 1.15rem;
  flex: 1;
  flex-direction: column;
}

.bookmark-title {
  font-size: 1rem;
  font-weight: 720;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.bookmark-description {
  display: -webkit-box;
  margin-top: 0.5rem;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.79rem;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bookmark-description:empty {
  display: none;
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.bookmark-domain {
  min-width: 0;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.69rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-tags {
  display: flex;
  flex: 0 1 auto;
  justify-content: flex-end;
  gap: 0.3rem;
  min-width: 0;
  overflow: hidden;
}

.bookmark-tag {
  max-width: 6rem;
  padding: 0.24rem 0.45rem;
  overflow: hidden;
  border-radius: 6px;
  color: var(--text-faint);
  background: var(--surface-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   卡片显示大小：大 / 中 / 小（参考 Wetab 的三种文件夹尺寸）
     大 = 本档新增（图标更大、留白更足、描述看得更清）
     中 = 原来的「紧凑视图」  小 = 原来的「方形视图」
   只做加法：不动 is-compact / is-square-view 已有规则。
   --------------------------------------------------------------------------- */

.view-size {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-solid);
}

.view-size-button {
  min-width: 2.1rem;
  min-height: 2.1rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 999px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease;
}

.view-size-button:hover {
  color: var(--text);
}

.view-size-button[aria-pressed="true"] {
  color: #fff;
  background: var(--accent);
}

/* ---------------------------------------------------------------------------
   卡片显示档位（2026-09-29 用户改版 + 第二轮返工）：两档 —— 1 号（原中号）+ 2 号。
   2 号 1:1 复刻用户给的参考站（pmbaobao / 优设导航，第一轮做成了「图标单独占一列」，
   用户指出不对：「人家是头像和名字在一行，小的简介在下面」）。
   所以正确布局是（看参考截图量出来的）：
     · 第一行：圆形图标（约 34px）+ 标题，同一行水平排列，图标和标题垂直居中；
     · 第二行：简介文字独占整行（从图标下面一直铺到卡片右缘），两行截断；
     · 卡片白底、圆角约 10px、无边框、极淡阴影；内边距约 14~16px。
   用 grid 两列实现：第一行图标列 + 文字列，第二行简介跨两列（column 1 / -1）。
   --------------------------------------------------------------------------- */
.bookmark-root.is-view-2 .bookmark-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}

/* 2026-09-29 用户第二次反馈：「外框边缘做得不是很明显，而且样式太方了。
   你就直接按我首页里的大模块来做就行了」——所以 2 号卡片直接套首页 .module-card 那套：
   玻璃底 + 明显描边 + 大圆角 + 顶部内高光 + 同样的悬浮阴影。 */
.bookmark-root.is-view-2 .bookmark-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  min-height: 118px;
  padding: 14px 16px 13px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  color: var(--text);
  background: var(--glass-bg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-shadow);
  backdrop-filter: none;
}

/* 下面几条和大模块 .module-card 一一对应（亮色 / 暗色 / 有壁纸 / 深色壁纸） */
html[data-theme="light"] .bookmark-root.is-view-2 .bookmark-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.22));
}

html[data-theme="dark"] .bookmark-root.is-view-2 .bookmark-card {
  /* 2026-10-01：跟着全站暗色改成中性平底（原来是偏蓝的塑料渐变） */
  background: var(--surface-solid);
  border-color: var(--border);
}

html[data-wallpaper="on"][data-theme="light"] .bookmark-root.is-view-2 .bookmark-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.4));
}

html[data-wallpaper="on"][data-theme="dark"] .bookmark-root.is-view-2 .bookmark-card {
  background: color-mix(in srgb, #141416 92%, transparent);
}

html[data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="light"] .bookmark-root.is-view-2 .bookmark-card {
  background: linear-gradient(145deg, rgba(20, 20, 22, 0.72), rgba(20, 20, 22, 0.5));
}

.bookmark-root.is-view-2 .bookmark-card::before,
.bookmark-root.is-view-2 .card-glow {
  display: none;
}

/* 第一行：图标（左）+ 标题（右），同一行、垂直居中 */
.bookmark-root.is-view-2 .card-top {
  display: contents;
}

.bookmark-root.is-view-2 .bookmark-icon {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  width: 34px;
  height: 34px;
  place-items: center;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(116, 116, 116, 0.1);
  font-size: 0.74rem;
  box-shadow: none;
  align-self: center;
}

.bookmark-root.is-view-2 .bookmark-icon img,
.bookmark-root.is-view-2 .bookmark-icon img.bookmark-icon-hd {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* 标题放到第一行第二列 */
.bookmark-root.is-view-2 .card-content {
  display: contents;
}

.bookmark-root.is-view-2 .bookmark-title {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  align-self: center;
  word-break: break-word;
}

/* 第二行：简介独占整行（从最左铺到最右），两行截断 */
.bookmark-root.is-view-2 .bookmark-description {
  grid-column: 1 / -1;
  grid-row: 2;
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.62;
  align-self: start;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

.bookmark-root.is-view-2 .bookmark-description:empty {
  display: none;
}

/* 管理员徽标跟着标题走（隐藏站标记要能看见） */
.bookmark-root.is-view-2 .card-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3px;
}

/* 参考站没有箭头 / 域名 / 标签 */
.bookmark-root.is-view-2 .bookmark-arrow,
.bookmark-root.is-view-2 .card-bottom,
.bookmark-root.is-view-2 .bookmark-tag {
  display: none;
}

.bookmark-root.is-view-2 .bookmark-card:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 48%, var(--glass-border));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 18px 42px color-mix(in srgb, var(--active-accent, var(--accent)) 16%, transparent);
  transform: translateY(-4px);
}

html[data-theme="dark"] .bookmark-root.is-view-2 .bookmark-icon,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .bookmark-root.is-view-2 .bookmark-icon {
  background: rgba(255, 255, 255, 0.09);
}

.bookmark-root.is-large-view .bookmark-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
}

.bookmark-root.is-large-view .bookmark-card {
  min-height: 0;
  padding: 1.15rem;
}

.bookmark-root.is-large-view .bookmark-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  font-size: 1.05rem;
}

.bookmark-root.is-large-view .bookmark-title {
  font-size: 1.02rem;
}

.bookmark-root.is-large-view .bookmark-description {
  font-size: 0.82rem;
  line-height: 1.6;
}

.bookmark-root.is-compact .bookmark-grid {
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 0.65rem;
}

.bookmark-root.is-compact .bookmark-card {
  min-height: 0;
  padding: 0.9rem;
}

.bookmark-root.is-compact .bookmark-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  font-size: 0.84rem;
}

.bookmark-root.is-compact .card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hidden-badge {
  padding: 0.24rem 0.44rem;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-radius: 999px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  font-size: 0.62rem;
  font-weight: 750;
}

.bookmark-card.is-hidden-bookmark {
  border-style: dashed;
}

.bookmark-arrow {
  width: 1.65rem;
  height: 1.65rem;
}

.bookmark-root.is-compact .card-content {
  margin: 0.75rem 0 0.65rem;
}

.bookmark-root.is-compact .bookmark-title {
  font-size: 0.9rem;
}

.bookmark-root.is-compact .bookmark-description {
  /* 2026-09-25：现在每个站都有「这个站能干什么」的一句话了（批量生成的），
     默认档还藏着它就等于白写 —— 而且用户反馈「打开电脑端不知道这站是干嘛的」。
     这里放开显示，但仍压到 2 行，不至于把紧凑感毁掉。 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
}

.bookmark-root.is-compact .bookmark-tag {
  display: none;
}

.loading-state,
.empty-state {
  display: flex;
  min-height: 280px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--text-faint);
  text-align: center;
}

.loading-state {
  flex-direction: row;
  gap: 0.45rem;
}

.loading-state span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 900ms ease-in-out infinite;
}

.loading-state span:nth-child(2) {
  animation-delay: 130ms;
}

.loading-state span:nth-child(3) {
  animation-delay: 260ms;
}

.loading-state p {
  margin: 0 0 0 0.6rem;
  font-size: 0.85rem;
}

.empty-state[hidden] {
  display: none;
}

.empty-symbol {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent);
  background: var(--surface);
  font-size: 2rem;
}

.empty-state h2 {
  margin: 1rem 0 0;
  color: var(--text);
  font-size: 1.1rem;
}

.empty-state p {
  margin: 0.45rem 0 0;
  font-size: 0.84rem;
}

.empty-state button {
  margin-top: 1.2rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 11px;
  color: #ffffff;
  background: var(--accent);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 0 auto;
  padding: 1.6rem 0 2.2rem;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.72rem;
}

.site-footer p {
  margin: 0;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@media (max-width: 720px) {
  .site-header,
  main,
  .site-footer {
    /* 2026-10-03：左右边距从 10px 加到 18px。
       对着 Reddit 手机端那张截图量过：它那条搜索胶囊左沿离屏幕边约 19 CSS px、
       右边最靠外的图标离边约 18 CSS px —— 我们原来只有 10px，所以左上角那个
       汉堡看着「明显更靠左」。现在页头和正文用同一套边距，左边缘才对得齐。 */
    width: min(calc(100% - 2.25rem), var(--max-width));
  }

  .brand-copy small {
    display: none;
  }

  /* 桌面端**不要**再写死 .hero 的 padding-top：留白交给基础规则里的视口公式
     （见 .hero 那段注释）。2026-09-25 之前这里是 `padding-top: 2.2rem`，
     它把「大标题落在屏幕 2/5」的算法整个顶掉了 —— 就是这个坑让标题一直偏下。 */

  .hero h1 {
    letter-spacing: -0.045em;
  }

.search-shell {
    height: 3.75rem;
    border-radius: 17px;
  }

  .search-shortcut {
    display: none;
  }

  .search-shell input {
    padding-right: 3.5rem;
    font-size: 0.9rem;
  }

  .toolbar {
    top: 0.45rem;
    padding: 0.85rem;
    border-radius: 22px;
  }

  .toolbar-heading {
    align-items: flex-start;
  }

  .result-count {
    padding-top: 0.25rem;
  }

  .view-hint {
    display: none;
  }

  .view-row {
    justify-content: flex-end;
  }

  .view-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .bookmark-root {
    padding-top: 1.65rem;
  }

  .bookmark-section {
    margin-top: 2rem;
  }

  .bookmark-grid {
    grid-template-columns: 1fr;
  }

  .bookmark-card {
    min-height: 190px;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

  .square-toggle {
    display: inline-flex;
  }

  .bookmark-root.is-square-view .bookmark-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem 0.45rem;
    align-items: start;
  }

  .bookmark-root.is-square-view .bookmark-card {
    min-height: 0;
    padding: 0.4rem 0.2rem;
    align-items: center;
    gap: 0.5rem;
    border-color: transparent;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
  }

  .bookmark-root.is-square-view .bookmark-card::before,
  .bookmark-root.is-square-view .card-glow {
    display: none;
  }

  .bookmark-root.is-square-view .bookmark-card:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--section-accent) 10%, transparent);
    box-shadow: none;
    transform: translateY(-2px);
  }

  .bookmark-root.is-square-view .card-top {
    width: 100%;
    justify-content: center;
  }

  .bookmark-root.is-square-view .bookmark-arrow,
  .bookmark-root.is-square-view .bookmark-description,
  .bookmark-root.is-square-view .card-bottom {
    display: none;
  }

  .bookmark-root.is-square-view .bookmark-icon {
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 1.05rem;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
    font-size: 1.15rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .bookmark-root.is-square-view .bookmark-icon img {
    width: 76%;
    height: 76%;
    border-radius: 24%;
  }

  .bookmark-root.is-square-view .bookmark-card:hover .bookmark-icon {
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.18);
    transform: translateY(-2px) scale(1.03);
  }

  .bookmark-root.is-square-view .card-content {
    display: block;
    margin: 0;
    overflow: hidden;
    text-align: center;
  }

  .bookmark-root.is-square-view .bookmark-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
  }

  .section-toggle {
    width: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
    justify-content: center;
  }

  .section-toggle span {
    display: none;
  }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .usage-guide {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .usage-steps {
    grid-template-columns: 1fr;
  }
}

.bookmark-card {
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}

@media (max-width: 720px) {
  body {
    background: var(--bg);
  }

  body::before {
    background-image: var(--site-background-mobile-image, none);
    background-position: var(--wallpaper-position, center);
    background-size: var(--wallpaper-size, cover);
  }

  .ambient {
    display: none;
  }

  .icon-button,
  .toolbar,
  .usage-guide,
  .bookmark-card {
    backdrop-filter: none;
  }

  .toolbar {
    background: var(--bg-strong);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  }

  .usage-guide {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }

  .bookmark-card {
    background: var(--surface-solid);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    content-visibility: auto;
    contain-intrinsic-size: 200px;
    transition: border-color 120ms ease, background-color 120ms ease;
  }

  .bookmark-card:hover {
    transform: none;
  }

  .bookmark-card::before,
  .card-glow {
    display: none;
  }
}

html[data-background-preset] {
  --neon-lines: none;
  --neon-glow: none;
  --site-background-mobile-image: none;
  --page-overlay: none;
}

html[data-background-preset] body {
  background: var(--preset-solid, #090d19);
}

html[data-background-preset="midnight"] { --preset-solid: #06101f; }
html[data-background-preset="violet"] { --preset-solid: #160924; }
html[data-background-preset="graphite"] { --preset-solid: #171a20; }
html[data-background-preset="emerald"] { --preset-solid: #071814; }
html[data-background-preset="sunset"] { --preset-solid: #24100d; }
html[data-background-preset="pure"] { --preset-solid: #070707; }

.toolbar-status {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.5rem;
}

.goal-open-button {
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 9px;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 750;
  white-space: nowrap;
}

.goal-prompt {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  /* 显式把网格列限制在视口内。只写 place-items:center 时，
     隐式列会按内容撑宽，手机上的引导弹窗会从右侧溢出。 */
  grid-template-columns: minmax(0, 1fr);
  padding: 1rem;
  place-items: center;
  background: rgba(3, 6, 14, 0.72);
  backdrop-filter: blur(10px);
}

.goal-dialog {
  position: relative;
  width: min(940px, 100%);
  min-width: 0;
  max-height: min(92vh, 760px);
  overflow-y: auto;
  padding: 1.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 26px;
  background: var(--bg-strong);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.42);
}

.goal-dialog .toolbar-kicker {
  margin-bottom: 0.55rem;
  text-align: center;
}

.goal-dialog h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  letter-spacing: -0.04em;
}

.goal-intro {
  margin: 0.75rem 0 1.3rem;
  color: var(--text-soft);
  text-align: center;
  font-size: 0.85rem;
}

.goal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-soft);
  background: var(--surface-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.goal-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.goal-options button {
  display: grid;
  min-height: 140px;
  padding: 1rem;
  align-content: start;
  justify-items: start;
  border: 1px solid var(--border);
  border-radius: 17px;
  color: var(--text);
  background: var(--surface-muted);
  cursor: pointer;
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.goal-options button:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-muted));
  transform: translateY(-2px);
}

.goal-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.8rem;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 0.8rem;
  font-weight: 850;
}

.goal-options strong {
  font-size: 0.92rem;
}

.goal-options small {
  margin-top: 0.38rem;
  color: var(--text-faint);
  font-size: 0.7rem;
  line-height: 1.55;
}

.goal-skip {
  display: block;
  min-height: 2.75rem;
  margin: 1.1rem auto 0;
  padding: 0.55rem 1rem;
  border: 0;
  color: var(--text-faint);
  background: transparent;
  cursor: pointer;
  font-size: 0.74rem;
}

body.goal-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .goal-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .goal-dialog {
    max-height: none;
    overflow: visible;
    padding: 1.2rem;
    border-radius: 20px;
  }

  .goal-options {
    grid-template-columns: 1fr;
  }

  .goal-options button {
    min-height: 0;
  }

  .goal-prompt {
    align-items: start;
    overflow-y: auto;
    padding: 0.7rem;
  }

  .toolbar-status {
    align-items: flex-end;
    flex-direction: column;
  }
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}

.social-label {
  color: var(--text-faint);
  font-size: 0.65rem;
  font-weight: 650;
  white-space: nowrap;
}

.social-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.social-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.32rem 0.62rem 0.32rem 0.36rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.social-link:hover {
  border-color: var(--border-strong);
  background: var(--surface);
  transform: translateY(-1px);
}

.social-link img {
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 50%;
  object-fit: cover;
}

.social-link strong,
.social-link small {
  display: block;
  text-align: left;
}

.social-link strong {
  font-size: 0.75rem;
}

.social-link small {
  margin-top: 0.08rem;
  color: var(--text-faint);
  font-size: 0.58rem;
}

@media (max-width: 560px) {
  .social-links {
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
  }

  .social-list {
    width: 100%;
  }

  .social-link {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }
}

.icon-button,
.category-button:not([aria-pressed="true"]),
.view-toggle,
.section-toggle,
.social-link,
.goal-open-button {
  position: relative;
  border-color: var(--glass-border);
  background: var(--glass-bg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(150%);
}

.icon-button::after,
.category-button::after,
.view-toggle::after,
.section-toggle::after,
.social-link::after,
.goal-open-button::after {
  position: absolute;
  top: 1px;
  right: 12%;
  left: 12%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
  content: "";
  opacity: 0.78;
  pointer-events: none;
}

.category-button[aria-pressed="true"] {
  color: #07101c;
  border-color: color-mix(in srgb, var(--group-accent, var(--accent)) 72%, #ffffff);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--group-accent, var(--accent)) 88%, #ffffff),
    var(--group-accent, var(--accent))
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 10px 28px color-mix(in srgb, var(--group-accent, var(--accent)) 24%, transparent);
}

.category-button[aria-pressed="true"] .category-count {
  background: rgba(7, 16, 28, 0.13);
}

.goal-open-button {
  color: var(--text);
}

.section-toggle {
  color: var(--text-soft);
}

.social-link {
  color: var(--text);
}

@media (max-width: 720px) {
  .icon-button,
  .category-button,
  .view-toggle,
  .section-toggle,
  .social-link,
  .goal-open-button {
    backdrop-filter: none;
  }

  .category-button[aria-pressed="true"] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  .icon-button,
  .category-button,
  .view-toggle,
  .section-toggle,
  .social-link,
  .goal-open-button {
    box-shadow:
      inset 0 1px 0 var(--glass-highlight),
      0 5px 16px rgba(0, 0, 0, 0.14);
  }
}

.icon-button:hover,
.category-button:not([aria-pressed="true"]):hover,
.view-toggle:hover:not([aria-pressed="true"]),
.section-toggle:hover,
.social-link:hover,
.goal-open-button:hover {
  border-color: var(--glass-border);
  background: var(--glass-bg);
}

.view-toggle[aria-pressed="true"] {
  color: #07101c;
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 72%, #ffffff);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--active-accent, var(--accent)) 88%, #ffffff),
    var(--active-accent, var(--accent))
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 10px 28px color-mix(in srgb, var(--active-accent, var(--accent)) 24%, transparent);
}

.module-home {
  width: min(100%, 1040px);
  margin: 0 auto 2.2rem;
  padding-top: 0;
}

.module-home-heading {
  margin-bottom: 0.7rem;
  text-align: center;
}

.module-home-heading .toolbar-kicker {
  margin-bottom: 0.28rem;
}

.module-home-heading h2 {
  margin: 0;
  font-size: clamp(1.48rem, 3.6vw, 2.08rem);
  line-height: 1.03;
  letter-spacing: -0.05em;
}

.module-home-hint-row {
  position: relative;
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.35rem;
}

.module-home-hint-row p {
  margin: 0;
  padding: 0 3.2rem;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.module-home-search {
  position: absolute;
  right: 0;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.module-card {
  position: relative;
  display: flex;
  min-width: 0;
  aspect-ratio: 1;
  padding: 1.25rem;
  overflow: hidden;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  color: var(--text);
  background: var(--glass-bg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-shadow);
  cursor: pointer;
  text-align: left;
  /* ⚠️ 2026-10-01（perf4）：这里原来有 backdrop-filter: blur(18px) saturate(150%)。
     实测（1440 桌面、真实显卡、脚本滚动 2.6 秒）单独关掉它，
     平均帧间隔从 19.13ms 掉到 9.35ms、掉帧从 39 次降到 4 次 —— 首页滚动的
     卡顿几乎全部来自这 11 张卡片各自的实时毛玻璃。
     现在改成「稍微加实一点的半透明底 + 细边框」，观感差别很小，但不再每帧重算。 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.module-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.26), transparent 38%),
    linear-gradient(145deg, transparent 45%, rgba(0, 113, 227, 0.07));
  content: "";
  pointer-events: none;
}

.module-card:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 48%, var(--glass-border));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 18px 42px color-mix(in srgb, var(--active-accent, var(--accent)) 16%, transparent);
  transform: translateY(-4px);
}

.module-icon,
.module-name,
.module-card-description,
.module-count {
  position: relative;
}

.module-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 15px;
  color: var(--active-accent, var(--accent));
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.15rem;
  font-weight: 800;
}

.module-name {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}

.module-card-description {
  display: block;
  margin-top: 0.45rem;
  color: var(--text-soft);
  font-size: 0.76rem;
  line-height: 1.6;
}

.module-count {
  display: block;
  margin-top: auto;
  padding-top: 0.8rem;
  color: var(--text-faint);
  font-size: 0.68rem;
}

.module-back-button {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--glass-bg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 5px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(16px) saturate(145%);
}

.toolbar-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

@media (max-width: 900px) {
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .module-home {
    padding-top: 0;
  }

  .module-card,
  .module-back-button {
    backdrop-filter: none;
  }

  .module-card {
    padding: 0.95rem;
    border-radius: 20px;
  }

  .module-card:hover {
    transform: none;
  }

  .module-icon {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 12px;
  }

  .module-name {
    font-size: 0.96rem;
  }

  .module-card-description {
    font-size: 0.68rem;
    line-height: 1.5;
  }

  .module-count {
    font-size: 0.62rem;
  }

  .toolbar-heading {
    grid-template-columns: 1fr auto;
  }

  .module-back-button {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 720px) {
  .section-actions {
    flex: 0 0 auto;
    align-self: center;
  }

  .section-toggle {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .section-toggle span {
    display: none;
  }
}

.layout-toggle {
  display: inline-flex;
}

@media (min-width: 721px) {
  .bookmark-root.is-square-view .bookmark-grid {
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 1.05rem 0.6rem;
    align-items: start;
  }

  .bookmark-root.is-square-view .bookmark-card {
    min-height: 0;
    padding: 0.55rem 0.3rem 0.75rem;
    align-items: center;
    gap: 0.6rem;
    border-color: transparent;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
  }

  .bookmark-root.is-square-view .bookmark-card::before,
  .bookmark-root.is-square-view .card-glow {
    display: none;
  }

  .bookmark-root.is-square-view .bookmark-card:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--section-accent) 9%, transparent);
    box-shadow: none;
    transform: translateY(-3px);
  }

  .bookmark-root.is-square-view .card-top {
    width: 100%;
    justify-content: center;
  }

  .bookmark-root.is-square-view .bookmark-arrow,
  .bookmark-root.is-square-view .bookmark-description,
  .bookmark-root.is-square-view .card-bottom {
    display: none;
  }

  .bookmark-root.is-square-view .bookmark-icon {
    width: 4.35rem;
    height: 4.35rem;
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    border-radius: 1.3rem;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
    font-size: 1.5rem;
    transition: transform 190ms ease, box-shadow 190ms ease;
  }

  .bookmark-root.is-square-view .bookmark-icon img {
    width: 74%;
    height: 74%;
    border-radius: 24%;
  }

  .bookmark-root.is-square-view .bookmark-card:hover .bookmark-icon {
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.18);
    transform: translateY(-3px) scale(1.04);
  }

  .bookmark-root.is-square-view .card-content {
    display: block;
    margin: 0;
    overflow: hidden;
    text-align: center;
  }

  .bookmark-root.is-square-view .bookmark-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-size: 0.79rem;
    font-weight: 650;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
  }
}

html[data-theme="light"] .hero-copy,
html[data-theme="light"] .module-description,
html[data-theme="light"] .section-description,
html[data-theme="light"] .module-card-description,
html[data-theme="light"] .view-hint,
html[data-theme="light"] .result-count,
html[data-theme="light"] .module-count {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] body::before {
  filter: brightness(0.92) saturate(0.96);
}

html[data-theme="light"] .hero-copy {
  text-shadow: none;
  font-weight: 500;
}

@media (max-width: 720px) {
  .site-header {
    padding: 0.7rem 0;
  }

  .brand-mark {
    width: 2.4rem;
    height: 2.4rem;
  }

  .hero {
    padding: 0.9rem 0 0.1rem;
  }

  /* 2026-09-27：中间那个头像删掉之后标题往上带一档（搜索框搬进顶栏会占掉
     第二行，这里补回来一点，让手机上标题也明显比原来靠上）。 */
  .hero .eyebrow {
    margin-top: 0.5rem;
  }

  .eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.64rem;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    line-height: 1.06;
  }

  .hero-copy {
    margin-top: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.48;
  }

  .social-links {
    gap: 0.4rem;
    /* 2026-09-26：用户说「手机端标题和下面的按钮之间挨得有点距离」。
       原来是 2.8rem（约 45px）的空白，这里收到 1.15rem。 */
    margin-top: 1.15rem;
  }

  .social-link {
    gap: 0.4rem;
    padding: 0.28rem 0.55rem 0.28rem 0.32rem;
  }

  .social-link img {
    width: 1.65rem;
    height: 1.65rem;
  }

  .social-link strong {
    font-size: 0.72rem;
  }

  .social-link small {
    font-size: 0.58rem;
  }

  .hero-stats {
    margin-top: 0.45rem;
    padding: 0.42rem 0.6rem;
    font-size: 0.67rem;
  }

  .module-home {
    margin-bottom: 1.1rem;
  }

  .module-home-heading {
    margin-bottom: 0.5rem;
  }

  .module-home-hint-row {
    margin-top: 0.35rem;
    min-height: 2.5rem;
  }

  .module-home-hint-row p {
    font-size: 0.72rem;
  }

  .module-grid {
    gap: 0.65rem;
  }

  .module-card {
    padding: 0.75rem;
  }

  .module-icon {
    width: 2.1rem;
    height: 2.1rem;
  }

  .module-name {
    margin-top: 0.55rem;
    font-size: 0.88rem;
  }

  .module-card-description {
    margin-top: 0.3rem;
    font-size: 0.62rem;
    line-height: 1.35;
  }

  .module-count {
    padding-top: 0.45rem;
    font-size: 0.58rem;
  }

  .collection-panel {
    padding-bottom: 2rem;
  }

  .toolbar {
    padding: 0.68rem;
  }

  .toolbar-heading {
    gap: 0.45rem;
    padding-bottom: 0.55rem;
  }

  .toolbar-heading h2 {
    font-size: 1.15rem;
  }

  .toolbar-status {
    gap: 0.32rem;
  }

  .goal-open-button,
  .layout-toggle {
    min-height: 2.75rem;
    padding: 0 0.55rem;
    font-size: 0.65rem;
  }

  .module-description {
    margin: 0.45rem 0 0.5rem;
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .view-row {
    padding-top: 0.5rem;
  }

  .view-hint {
    font-size: 0.67rem;
  }

  .bookmark-root {
    padding-top: 0.9rem;
  }

  .bookmark-section {
    margin-top: 1rem;
  }

  .section-heading {
    gap: 0.45rem;
    margin-bottom: 0.5rem;
  }

  .section-identity {
    gap: 0.5rem;
  }

  .section-icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 11px;
  }

  .section-title {
    font-size: 0.95rem;
  }

  .section-description {
    margin-top: 0.12rem;
    font-size: 0.65rem;
    line-height: 1.4;
  }

  .section-count {
    font-size: 0.64rem;
  }

  .bookmark-grid {
    gap: 0.7rem;
  }

  .bookmark-card {
    min-height: 150px;
    padding: 0.9rem;
  }
}

.module-home {
  max-width: 820px;
}

.module-grid {
  gap: 0.85rem;
}

.module-card {
  padding: 1rem;
  border-radius: 22px;
  background: var(--glass-bg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-shadow);
  /* 同上：桌面端也不再实时模糊 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.module-card::before {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(145deg, transparent 52%, rgba(10, 132, 255, 0.045));
}

.module-card:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 40%, var(--glass-border));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 16px 38px rgba(0, 0, 0, 0.12);
}

.module-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  font-size: 0.95rem;
}

.module-name {
  margin-top: 0.62rem;
  font-size: 1rem;
}

.module-card-description {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  line-height: 1.48;
}

.module-count {
  padding-top: 0.55rem;
  font-size: 0.62rem;
}

html[data-theme="light"] .module-card {
  /* 没有毛玻璃了，白色要再实一点，卡片才不会糊在背景上 */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.68));
}

html[data-theme="dark"] .module-card {
  /* 2026-10-01：照 saaspo.com 的暗色做 —— 平底中性灰 + 一条细边框，
     没有渐变、没有内高光、没有大投影（用户说上一版的暗色「跟塑料一样」）。 */
  background: var(--surface-solid);
  border-color: var(--border);
  box-shadow: none;
}

/* 暗色下把卡片左上角那团白色高光彻底关掉 —— 它就是在深底上「泛一点光」的来源 */
html[data-theme="dark"] .module-card::before {
  background: none;
}

html[data-theme="dark"] .module-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.category-button[aria-pressed="true"],
.view-toggle[aria-pressed="true"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 52%, var(--glass-border));
  background: var(--glass-bg);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 10px 28px color-mix(in srgb, var(--active-accent, var(--accent)) 12%, transparent);
}

.category-button[aria-pressed="true"] .category-count {
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 12%, transparent);
}

@media (max-width: 720px) {
  .module-card {
    padding: 0.75rem;
    backdrop-filter: none;
  }

  html[data-theme="light"] .module-card {
    background: rgba(255, 255, 255, 0.72);
  }

  html[data-theme="dark"] .module-card {
    background: var(--surface-solid);
  }
}

.hero h1.hero-display {
  max-width: 1060px;
  margin: 0 auto;
  /* 2026-10-01：标题也跟着换到全站英文字体（原来这里是 Fraunces 衬线体）。
     用户要求「整个网页的英文字体都按 Mobbin 那套来」，Mobbin 的大标题就是
     粗体无衬线，所以这里跟着换成 Geist。想换回衬线体只要把这一行改回
     "Fraunces", "Songti SC", Georgia, serif 即可（字形文件还在 fonts 目录里）。 */
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8.6vw, 6.2rem);
  font-weight: 800;
  font-variation-settings: normal;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-transform: uppercase;
}

.hero h1.hero-display span,
.hero h1.hero-display strong {
  display: block;
}

.hero h1.hero-display span {
  margin-bottom: 0.55em;
  /* 上层小字（BREAK THE）压成「冷灰蓝」：比下面的大字浅、比正文更冷，
     这样上下两行天然分出一层，不再是一整块同色。 */
  color: #6b7688;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: 0.34em;
  /* Geist 没有配套意大利体文件，斜体会是浏览器硬造的歪字，所以这里改成
     「小号大写 + 宽字距」的标签样式，更接近 Mobbin 那种干净排版。 */
  font-style: normal;
  font-weight: 560;
  font-variation-settings: normal;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

.hero h1.hero-display strong {
  color: transparent;
  /* 大标题要有「层次」，不是一块平均的蓝：
     深墨蓝起手 → 中间亮一档（珠光高光，字才有体积）→ 收尾再压回深蓝。
     整体仍在同一个蓝色家族里，所以不会洗成「蓝中带白」。 */
  background-image: linear-gradient(
    104deg,
    #0a2a52 0%,
    #0d4585 28%,
    #1f7ad4 58%,
    #0a2f5e 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1em;
  /* 大字更重一档，和上面那行轻体斜体拉开「重/轻」对比 */
  font-weight: 800;
  font-variation-settings: normal;
  letter-spacing: -0.04em;
  word-spacing: 0.04em;
}

.hero-cn {
  margin: 0.85rem auto 0;
  color: var(--text-soft);
  /* 用展示字体 DM Sans：后台可以把这句小标题改成英文，
     系统默认字体下的英文太糙（用户 2026-09-25 反馈）。 */
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.3vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

@media (max-width: 720px) {
  .hero h1.hero-display {
    /* 手机端要「大而霸气」：一行塞不下就按词换行（INFORMATION / GAP），
       字号随屏宽长到 3.55rem 为止（实测 560px 宽时标题离屏幕两边约 22px，
       不会顶边；再往上到 721px 由桌面规则接管）。 */
    /* 2026-10-03：这里试过放大到 13vw（390 屏 50.7px）+ 左右各伸 0.7rem，
       用户看完说「大了反而不好看」，已改回 11.8vw。
       ⚠️ 别再凭「参考站标题看着更大」去动这一档：
       实测 windx 手机端标题只有 30px（Tailwind text-3xl），它显得大是因为
       4 行铺满宽度，不是字号大 —— 我们的 11.8vw 已经比它大不少了。 */
    font-size: clamp(2.35rem, 11.8vw, 3.55rem);
    letter-spacing: -0.035em;
    line-height: 0.88;
  }

  .hero h1.hero-display span {
    /* 大字放大了，小字反而收小一点：轻重对比更明显 */
    margin-bottom: 0.34em;
    font-size: 0.36em;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }

  .hero-cn {
    margin-top: 0.6rem;
    font-size: 0.84rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
}

html[data-theme="light"] .hero h1.hero-display {
  text-shadow: none;
}

html[data-theme="dark"] .hero h1.hero-display strong {
  /* 暗色下同样要「有光」：亮起手 → 中间压暗 → 收尾再亮，成一束冷银蓝的光泽 */
  background-image: linear-gradient(
    104deg,
    #eef5fc 0%,
    #9dbfe3 52%,
    #dfeaf7 100%
  );
}

html[data-theme="dark"] .hero h1.hero-display span {
  color: #8e99a8;
}

html[data-theme="dark"] .hero h1.hero-display {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.56);
}

/* ---------------------------------------------------------------------------
   「INFORMATION GAP」的**霓虹灯**光（2026-09-26 第三版）
   ---------------------------------------------------------------------------
   用户原话一路是这样变过来的：
     ·「发光发亮、再大一点」→ 我做成外圈白晕 → 被他否掉：「你怎么还发白光啊？
        不要发白光，你让自己发光就行了」；
     ·「你发出来的光把字体的边缘给模糊了，我不希望你模糊它」→ 我把光压到只剩 16px/0.3；
     · 这一轮他又说：「标题发光没有了…我希望是那种霓虹灯的发光，给我增点光泽」。
   所以现在按**霓虹灯**的四层来写（越外越淡），而不是「随便糊一圈」：
     ① 3~4px  贴笔画的一圈「灯管光」——透明度压在 0.4~0.5，再亮就变成描边、字就糊了
     ② 14~20px 主光（这层是「看得见在发光」的关键）
     ③ 34~46px 中圈
     ④ 76~104px 大范围溢光（铺在画面上那层氛围）
   ⛔ 依旧一个白色都不许有（`rgba(255,255,255,…)` 一律不要），只用标题自己那套冷蓝：
      亮色 `rgb(86 199 245)`，暗色 `rgb(150 222 255)`。
   ⚠️ **四个组合必须写全**（亮/暗 × 有/无壁纸）：`html[data-theme="dark"] .hero h1.hero-display`
      的特异性比老那条 `html[data-wallpaper="on"] .hero-display` 高，
      只写「有壁纸」那一条的话，**暗色主题下永远吃不到加强版**（实测踩到，所以下面用
      `html[data-wallpaper="on"][data-theme="…"]` 把两个条件写在一起）。
   --------------------------------------------------------------------------- */
.hero h1.hero-display {
  filter:
    drop-shadow(0 0 3px rgba(86, 199, 245, 0.45))
    drop-shadow(0 0 16px rgba(86, 199, 245, 0.75))
    drop-shadow(0 0 40px rgba(86, 199, 245, 0.48))
    drop-shadow(0 0 90px rgba(86, 199, 245, 0.3));
}

html[data-theme="dark"] .hero h1.hero-display {
  filter:
    drop-shadow(0 0 3px rgba(150, 222, 255, 0.42))
    drop-shadow(0 0 17px rgba(150, 222, 255, 0.62))
    drop-shadow(0 0 40px rgba(150, 222, 255, 0.42))
    drop-shadow(0 0 90px rgba(150, 222, 255, 0.27));
}

/* 有壁纸时再加强一档：照片会把光「吃」掉，同样的数值压不住画面 */
html[data-wallpaper="on"][data-theme="light"] .hero h1.hero-display {
  filter:
    drop-shadow(0 0 4px rgba(86, 199, 245, 0.46))
    drop-shadow(0 0 20px rgba(86, 199, 245, 0.7))
    drop-shadow(0 0 48px rgba(86, 199, 245, 0.46))
    drop-shadow(0 0 110px rgba(86, 199, 245, 0.32));
}

html[data-wallpaper="on"][data-theme="dark"] .hero h1.hero-display {
  filter:
    drop-shadow(0 0 4px rgba(150, 222, 255, 0.48))
    drop-shadow(0 0 22px rgba(150, 222, 255, 0.72))
    drop-shadow(0 0 52px rgba(150, 222, 255, 0.48))
    drop-shadow(0 0 118px rgba(150, 222, 255, 0.34));
}

/* 大标题上面那行小字（BREAK THE）也是标题的一部分：给它一层**弱一点**的光，
   整块招牌才像「通着电」。注意它比大字暗一档是故意的（重/轻对比），
   所以光也只能给弱的，别把小字提亮成第二个太阳。 */
.hero h1.hero-display span {
  filter: drop-shadow(0 0 12px rgba(86, 199, 245, 0.32));
}

html[data-theme="dark"] .hero h1.hero-display span {
  filter: drop-shadow(0 0 14px rgba(150, 222, 255, 0.36));
}

/* ⚠️ 有壁纸时把这层光**关掉**：花背景上哪怕只有 8px，小字看着也发糊
   （用户 2026-09-26 反馈过「光把字体边缘模糊了」，所以小字宁可干净）。
   这一条必须排在上面两条之后（特异性相同，靠顺序生效）。 */
html[data-wallpaper="on"] .hero h1.hero-display span {
  filter: none;
}

/* ---------------------------------------------------------------------------
   大标题跟着「设置 → 主题颜色」走（2026-09-28 用户要求）
   ---------------------------------------------------------------------------
   用户原话：「我希望这个标题颜色还能改，更改的位置同样放在设置里，
   然后关于颜色，就用我设置里自带的主题颜色就行了」。
   只在**锁了颜色**时才覆盖（html[data-accent-lock]）—— 没锁色时上面那套
   深墨蓝 / 冷银蓝一个字节都不动（零回归）。锁了色就用 color-mix 从那个颜色
   里算出「深墨 → 珠光 → 深墨」三层，任何色相都保住原来的体积感，
   不会洗成一块平色。
   ⚠️ 用 !important 是因为上面「有壁纸时加强一档」那几条特异性更高，
   不压一下的话锁色只在没壁纸时才生效（同样的坑踩过）。
   --------------------------------------------------------------------------- */
/* 标题颜色 = 单独设的标题色 > 设置里的主题色（用户：「用我设置里自带的主题颜色就行了」） */
html[data-accent-lock] .hero h1.hero-display strong,
html[data-title-accent] .hero h1.hero-display strong {
  background-image: linear-gradient(
    104deg,
    color-mix(in srgb, var(--title-accent, var(--locked-accent)) 40%, #08182c) 0%,
    color-mix(in srgb, var(--title-accent, var(--locked-accent)) 76%, #08182c) 28%,
    color-mix(in srgb, var(--title-accent, var(--locked-accent)) 84%, #ffffff) 58%,
    color-mix(in srgb, var(--title-accent, var(--locked-accent)) 44%, #08182c) 100%
  ) !important;
}

html[data-accent-lock][data-theme="dark"] .hero h1.hero-display strong,
html[data-title-accent][data-theme="dark"] .hero h1.hero-display strong {
  background-image: linear-gradient(
    104deg,
    color-mix(in srgb, var(--title-accent, var(--locked-accent)) 48%, #eef5fc) 0%,
    color-mix(in srgb, var(--title-accent, var(--locked-accent)) 68%, #9dbfe3) 52%,
    color-mix(in srgb, var(--title-accent, var(--locked-accent)) 54%, #dfeaf7) 100%
  ) !important;
}

/* 霓虹光也换成同一个色系：不换就是「红字配青光」，很脏 */
html[data-accent-lock] .hero h1.hero-display,
html[data-title-accent] .hero h1.hero-display {
  filter:
    drop-shadow(0 0 3px color-mix(in srgb, var(--title-accent, var(--locked-accent)) 45%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--title-accent, var(--locked-accent)) 72%, transparent))
    drop-shadow(0 0 40px color-mix(in srgb, var(--title-accent, var(--locked-accent)) 46%, transparent))
    drop-shadow(0 0 90px color-mix(in srgb, var(--title-accent, var(--locked-accent)) 28%, transparent)) !important;
}

html[data-accent-lock][data-theme="dark"] .hero h1.hero-display,
html[data-title-accent][data-theme="dark"] .hero h1.hero-display {
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, color-mix(in srgb, var(--title-accent, var(--locked-accent)) 62%, #ffffff) 46%, transparent))
    drop-shadow(0 0 20px color-mix(in srgb, color-mix(in srgb, var(--title-accent, var(--locked-accent)) 62%, #ffffff) 70%, transparent))
    drop-shadow(0 0 48px color-mix(in srgb, color-mix(in srgb, var(--title-accent, var(--locked-accent)) 62%, #ffffff) 46%, transparent))
    drop-shadow(0 0 100px color-mix(in srgb, color-mix(in srgb, var(--title-accent, var(--locked-accent)) 62%, #ffffff) 32%, transparent)) !important;
}

html[data-accent-lock] .hero h1.hero-display span,
html[data-title-accent] .hero h1.hero-display span {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--title-accent, var(--locked-accent)) 34%, transparent)) !important;
}

/* ---------------------------------------------------------------------------
   很浅 / 很深的标题色（2026-09-28 用户要「可以自定义任何颜色，包括黑和白」）
   ---------------------------------------------------------------------------
   纯白标题压在亮色页面上会直接看不见；纯黑标题压在暗色页面上同理。
   app.js 会按相对亮度给 html 挂 data-title-tone="light"/"dark"，
   这里给它补一层反向的描边把字「托」出来 —— 颜色还是用户选的那个，
   只是多一圈轮廓，不会变成另一个颜色。
   --------------------------------------------------------------------------- */
html[data-title-tone="light"][data-theme="light"] .hero h1.hero-display strong {
  -webkit-text-stroke: 1.5px rgba(13, 17, 23, 0.55);
}

html[data-title-tone="light"][data-theme="light"] .hero h1.hero-display {
  filter:
    drop-shadow(0 0 3px rgba(13, 17, 23, 0.5))
    drop-shadow(0 0 18px color-mix(in srgb, var(--title-accent) 55%, transparent))
    drop-shadow(0 0 48px color-mix(in srgb, var(--title-accent) 34%, transparent)) !important;
}

html[data-title-tone="dark"][data-theme="dark"] .hero h1.hero-display strong {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.42);
}

html[data-title-tone="dark"][data-theme="dark"] .hero h1.hero-display {
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.42))
    drop-shadow(0 0 22px color-mix(in srgb, color-mix(in srgb, var(--title-accent) 55%, #ffffff) 60%, transparent))
    drop-shadow(0 0 60px color-mix(in srgb, color-mix(in srgb, var(--title-accent) 55%, #ffffff) 36%, transparent)) !important;
}

/* 很浅的标题色：那行小字（BREAK THE）也要跟着提亮，否则一大一小反差太大 */
html[data-title-tone="light"][data-theme="light"] .hero h1.hero-display span {
  color: color-mix(in srgb, var(--title-accent) 55%, #6b7688);
}

/* 很深的标题色在亮色页面上：小字本来也是深灰，拉开一点层次 */
html[data-title-tone="dark"][data-theme="dark"] .hero h1.hero-display span {
  color: color-mix(in srgb, var(--title-accent) 30%, #8e99a8);
}

html[data-theme="light"] .hero-cn {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.language-toggle span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

html[data-language="en"] .hero-cn {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.8vw, 1.14rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
}

html[data-language="en"] body {
  font-family: var(--font-ui);
}

@media (max-width: 720px) {
  html[data-language="en"] .hero-cn {
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    text-indent: 0;
  }
}

html[data-language="en"] .brand-copy strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-optical-sizing: auto;
}

html[data-language="en"] .brand-copy small {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.14em;
}

html[data-language="en"] .module-name,
html[data-language="en"] .section-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.015em;
}

html[data-language="en"] .module-name {
  text-transform: uppercase;
}

.liquid-stage {
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: min(58vh, 720px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  contain: layout paint style;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
  transition: opacity 560ms ease;
}

/* 四态背景（2026-09-26 `20260926-4state1`）：纯白 plain / 亮色流体 light /
   暗色流体 dark-fluid / 自定义 custom。dark 已独立为纯色暗夜，
   纯白和自定义都不显示它。 */
html[data-liquid-effect="on"][data-background-mode="light"] .liquid-stage,
html[data-liquid-effect="on"][data-background-mode="dark-fluid"] .liquid-stage {
  opacity: 0.96;
}

/* MicroSlats：React Bits 的背景组件。它自己就是一块 WebGL 画布；
   只有设置里选中这一档才显示，其它背景时完全不占渲染资源。 */
.micro-slats-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  contain: strict;
  transition: opacity 520ms ease;
}

.micro-slats-stage > .micro-slats {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.micro-slats-stage.is-fallback {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(168, 85, 247, 0.48), transparent 62%),
    linear-gradient(180deg, #050507, #000);
}

html[data-background-mode="microslats"] .micro-slats-stage {
  opacity: 1;
  visibility: visible;
}

html[data-background-mode="microslats"] .liquid-stage,
html[data-background-mode="microslats"] .ambient {
  opacity: 0;
  visibility: hidden;
}

.liquid-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* 2026-10-01（perf4）：整块画布原来套着 filter（浅色再叠 mix-blend-mode: multiply）。
     这两样会让这张全屏图层每一帧都要被单独混合/重算，是纯粹的滚动负担。
     背景本身就是一层柔和渐变，去掉后肉眼几乎看不出差别（手机端实测对比过截图）。 */
  filter: none;
  mix-blend-mode: normal;
}

html[data-theme="light"] .liquid-canvas {
  filter: none;
  mix-blend-mode: normal;
}

/*
 * 暗色下的液态（2026-09-25 第二次返工）。
 * 用户原话：「暗色模式做得更丑了，跟核废水一样」—— 问题不在底色，在**这层满饱和的彩色**：
 * 深底上它像一层油膜/核废水。参照 Codex 自己的暗色（中性、克制、只有一点点色偏），
 * 这里把它压成一层很淡的冷光：饱和度砍到 0.38、整体不透明度降到 0.34，
 * 并且更早开始淡出（34% 处就开始透，82% 处完全消失），不再有硬边界。
 * 注意选择器要带够权重：上面 `html[data-liquid-effect="on"][data-background-mode="light"]`
 * 那条是 (0,2,1)，不写全就会被它盖掉。
 */
html[data-theme="dark"][data-liquid-effect="on"][data-background-mode="dark-fluid"] .liquid-stage {
  opacity: 0.34;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 82%);
}

html[data-theme="dark"] .liquid-canvas {
  /* 暗色那层本来靠 filter 压饱和度，现在画布不再走 filter 通道，
     改成由 .liquid-stage 的 opacity 控制浓度（下面那条 dark 规则）。 */
  filter: none;
}

html[data-liquid-pointer="off"] .liquid-canvas {
  filter: none;
}

.liquid-stage.is-fallback::before {
  position: absolute;
  inset: -16%;
  background:
    conic-gradient(from 45deg at 28% 42%, rgba(0, 132, 255, 0.62), rgba(114, 74, 255, 0.08), rgba(255, 58, 145, 0.54), rgba(0, 188, 170, 0.54), rgba(0, 132, 255, 0.62)),
    linear-gradient(118deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0));
  background-size: 145% 145%, 72% 120%;
  content: "";
  opacity: 0.48;
  animation: liquid-fallback-flow 16s ease-in-out infinite alternate;
  will-change: transform, background-position;
}

html[data-theme="dark"] .liquid-stage.is-fallback::before {
  background:
    conic-gradient(from 45deg at 28% 42%, rgba(10, 88, 255, 0.72), rgba(112, 55, 255, 0.18), rgba(0, 183, 255, 0.68), rgba(255, 158, 64, 0.54), rgba(10, 88, 255, 0.72)),
    linear-gradient(118deg, rgba(0, 0, 0, 0), rgba(190, 214, 255, 0.16), rgba(0, 0, 0, 0));
  opacity: 0.64;
}

@keyframes liquid-fallback-flow {
  0% {
    background-position: 0% 20%, 0% 50%;
    transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(-2deg);
  }
  100% {
    background-position: 100% 70%, 90% 40%;
    transform: translate3d(4%, 3%, 0) scale(1.12) rotate(3deg);
  }
}

@media (max-width: 720px) {
  .liquid-stage {
    height: 56vh;
  }

  .liquid-canvas {
    filter: saturate(0.94);
  }

  html[data-theme="light"] .liquid-canvas {
    filter: saturate(0.88) brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-stage {
    transition: none;
  }

  .liquid-stage.is-fallback::before {
    animation: none;
    opacity: 0.34;
  }
}

/* ---------------------------------------------------------------------------
   跑马灯：首页「今天想找什么？」下面的横向滚动条
   借鉴 lanatires.com：文字半透明、匀速极慢，直接融进背景里
   --------------------------------------------------------------------------- */

.hero-marquee {
  position: relative;
  margin-bottom: clamp(0.4rem, 1.4vw, 1rem);
}

.hero-marquee-title {
  margin: 0 0 clamp(0.5rem, 1.2vw, 0.85rem);
  color: var(--text-soft);
  font-size: clamp(0.82rem, 1.4vw, 0.96rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}

.hero-marquee-viewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-block: clamp(0.4rem, 1.2vw, 0.85rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.hero-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: hero-marquee-scroll var(--marquee-duration, 90s) linear infinite;
}

/*
 * 自动滚动的内容要能停下来（WCAG 2.2.2）：
 * 鼠标悬停或键盘把焦点移进来时暂停，方便看清和点击。
 */
.hero-marquee-viewport:hover .hero-marquee-track,
.hero-marquee-viewport:focus-within .hero-marquee-track {
  animation-play-state: paused;
}

@keyframes hero-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.hero-marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.8vw, 2.6rem);
}

/* 没有底、没有边框，只有一层半透明文字，和背景叠在一起 */
.hero-marquee-chip {
  flex: none;
  padding: 0;
  border: 0;
  color: color-mix(in srgb, var(--text) 38%, transparent);
  background: none;
  font-family: inherit;
  font-size: clamp(1.15rem, 2.9vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s ease;
}

.hero-marquee-chip:hover,
.hero-marquee-chip:focus-visible {
  color: color-mix(in srgb, var(--accent) 80%, transparent);
}

.hero-marquee-sep {
  flex: none;
  width: clamp(0.4rem, 0.85vw, 0.58rem);
  height: clamp(0.4rem, 0.85vw, 0.58rem);
  fill: currentColor;
  color: color-mix(in srgb, var(--text) 22%, transparent);
}

html[data-theme="dark"] .hero-marquee-chip {
  color: color-mix(in srgb, var(--text) 32%, transparent);
}

html[data-theme="dark"] .hero-marquee-sep {
  color: color-mix(in srgb, var(--text) 18%, transparent);
}

html[data-language="en"] .hero-marquee-title {
  font-family: "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(0.7rem, 1.2vw, 0.84rem);
  font-weight: 800;
  letter-spacing: 0.22em;
}

html[data-language="en"] .hero-marquee-chip {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.95rem, 2.3vw, 1.72rem);
  letter-spacing: 0.1em;
}

/* 系统设置「减少动态效果」时停止滚动，改成可以自己横向拖动的静态条 */
.hero-marquee.is-static .hero-marquee-viewport {
  display: flex;
  justify-content: safe center;
  overflow-x: auto;
  -webkit-mask-image: none;
  mask-image: none;
  scrollbar-width: none;
}

.hero-marquee.is-static .hero-marquee-viewport::-webkit-scrollbar {
  display: none;
}

.hero-marquee.is-static .hero-marquee-track {
  animation: none;
}

@media (max-width: 720px) {
  .hero-marquee {
    margin-bottom: 0.8rem;
  }

  .hero-marquee-title {
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }

  .hero-marquee-viewport {
    padding-block: 0.35rem;
  }

  .hero-marquee-group {
    gap: 1.15rem;
  }

  .hero-marquee-chip {
    font-size: 1.2rem;
  }
}

/* ---------------------------------------------------------------------------
   搜索：首屏搜索框（含沿边框跑动的光束，参考 border-beam 的效果）
   --------------------------------------------------------------------------- */

.hero-search {
  /* 只留一道同色系的柔光。
     原来这里是橙→粉→紫→蓝的四色光带，颜色跳、亮度高，
     和站点「暖白 + 蓝强调色」的调子打架，也会把注意力从内容上抢走。
     现在是一条 accent 色的窄光带沿边缘慢慢扫过，亮度压到刚好能看见。 */
  --beam-hue: var(--accent);
  --beam-conic: conic-gradient(
    from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--beam-hue) 20%, transparent) 148deg,
    color-mix(in srgb, var(--beam-hue) 62%, transparent) 182deg,
    color-mix(in srgb, var(--beam-hue) 20%, transparent) 216deg,
    transparent 356deg 360deg
  );
  --beam-alpha: 0.55;
  position: relative;
  /* 要比下面那些 z-index:auto 的卡片高一层，否则展开的结果会被卡片盖住 */
  z-index: 40;
  /* 2026-09-27：用户要求把搜索框搬到「网站的正上方」（参考 Reddit / YouTube）——
     现在它住在顶栏中间：站名在左、搜索居中、主题/语言在右，宽度跟着中间
     那段空间走，最宽 640px。手机端（≤720）放不下就换到顶栏第二行，仍是通栏居中。 */
  flex: 1 1 auto;
  width: auto;
  max-width: min(44vw, 640px);
  margin: 0 clamp(0.5rem, 2vw, 1.8rem);
  isolation: isolate;
}

/* 暗色下同样一道光更明显一点就够，不需要换颜色 */
html[data-theme="dark"] .hero-search {
  --beam-alpha: 0.72;
}

.search-box {
  position: relative;
  z-index: 2;
  display: flex;
  /* 高度照 Reddit / YouTube 那两条搜索框来（40~44px）。原来最大 3.5rem＝56px，
     用户 2026-09-27：「上下有点太宽了」。 */
  height: clamp(2.6rem, 3.4vw, 2.75rem);
  overflow: hidden;
  align-items: center;
  gap: 0.7rem;
  padding: 0 clamp(1rem, 2.6vw, 1.45rem);
  /* 不放普通边框（会在光带中间出现一道硬边），改用极细的内描边：
     没有光的时候输入框自己也要站得住，不至于糊在背景里。 */
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent),
    inset 0 1px 0 var(--glass-highlight),
    var(--shadow);
  backdrop-filter: blur(20px) saturate(150%);
  transition: box-shadow 0.35s ease;
}

.hero-search:focus-within .search-box {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent),
    inset 0 1px 0 var(--glass-highlight),
    0 14px 38px color-mix(in srgb, var(--accent) 13%, transparent);
}

.search-box-icon {
  position: relative;
  z-index: 1;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: var(--text-faint);
  stroke-linecap: round;
  stroke-width: 1.8;
  transition: stroke 0.3s ease;
}

.hero-search:focus-within .search-box-icon {
  stroke: var(--accent);
}

#search-input {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  color: var(--text);
  background: none;
  font-family: inherit;
  font-size: clamp(0.92rem, 1.5vw, 1.04rem);
  font-weight: 650;
  outline: none;
}

#search-input::placeholder {
  /* 2026-09-27 用户反馈：「提示文字颜色太深了，分不清是提示还是我打的字」——
     压到 62% 透明度，和真正输入的文字明显区分开。 */
  color: color-mix(in srgb, var(--text-faint) 62%, transparent);
  font-weight: 500;
}

#search-input::-webkit-search-cancel-button {
  display: none;
}

/* 「按回车搜索」的提示。手机上交给键盘自己的搜索键，所以小屏不显示 */
.search-box-enter {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 0.34rem 0.7rem;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px;
  color: var(--text-faint);
  background: var(--surface-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.search-box-enter:hover,
.hero-search:focus-within .search-box-enter {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

@media (max-width: 560px) {
  .search-box-enter {
    display: none;
  }
}

/* 三段共享同一段旋转渐变：框外一点点余光、框内贴着边缘化开的光、中间那块盖住光的「芯」 */
.search-glow > i,
.search-box-beam-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  margin: -100vmax 0 0 -100vmax;
  background-image: var(--beam-conic);
  will-change: transform;
  /* 慢慢扫过去，不再是「转圈跑马灯」 */
  animation: search-beam-run 16s linear infinite;
}

/* 框外只有很淡的一圈余光，稍微溢出边界就停 */
.search-glow {
  position: absolute;
  inset: -2px;
  z-index: 1;
  border-radius: 999px;
  overflow: hidden;
  opacity: calc(0.18 * var(--beam-alpha));
  filter: blur(14px);
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.hero-search:focus-within .search-glow {
  opacity: calc(0.44 * var(--beam-alpha));
}

/* 框内的光：整块都铺一层旋转渐变，再用一个羽化过的「芯」把中间盖掉，
   于是光从边缘平滑地化进框里，没有任何硬边 */
.search-box-beam {
  position: absolute;
  inset: -2px;
  z-index: 0;
  overflow: hidden;
  border-radius: 999px;
  pointer-events: none;
}

/* 透明度只加在旋转的光上，不能加在整个层上：
   否则中间那块「芯」也会变半透明，光就漏得满框都是了 */
.search-box-beam-spin {
  opacity: calc(0.34 * var(--beam-alpha));
  transition: opacity 0.45s ease;
}

.hero-search:focus-within .search-box-beam-spin {
  opacity: calc(0.9 * var(--beam-alpha));
}

.search-box-beam-core {
  position: absolute;
  inset: 9px;
  border-radius: 999px;
  background: var(--surface-solid);
  filter: blur(5px);
}

@keyframes search-beam-run {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-glow > i,
  .search-box-beam-spin {
    animation: none;
  }
}

.search-drop {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  left: 0;
  z-index: 20;
  max-height: min(52vh, 440px);
  overflow-y: auto;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 26px 70px rgba(4, 8, 20, 0.28);
  backdrop-filter: blur(24px) saturate(150%);
  overscroll-behavior: contain;
  animation: search-drop-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-drop[hidden] {
  display: none;
}

@keyframes search-drop-in {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.search-status {
  margin: 0;
  padding: 0.6rem clamp(0.9rem, 2.2vw, 1.3rem) 0;
  color: var(--text-faint);
  font-size: 0.73rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.search-status[hidden] {
  display: none;
}

.search-results {
  overflow-y: auto;
  padding: 0.4rem clamp(0.55rem, 1.6vw, 0.85rem) clamp(0.8rem, 2vw, 1.1rem);
  overscroll-behavior: contain;
}

.search-block + .search-block {
  margin-top: 0.85rem;
}

.search-block-title {
  margin: 0.55rem 0 0.45rem;
  padding-inline: 0.45rem;
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.search-intent {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.search-intent strong {
  color: var(--accent-ink);
  font-size: 0.96rem;
}

.search-intent small {
  color: var(--text-soft);
  font-size: 0.72rem;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.search-result:hover,
.search-result.is-active {
  border-color: var(--glass-border);
  background: var(--surface-muted);
}

.search-result-mark {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.search-result-main {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.12rem;
}

.search-result-main strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-main small {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-reason {
  max-width: 40%;
  flex: none;
  overflow: hidden;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 0.66rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * 搜索结果里的「我自己的内容」：自己的速记 / 待办。
 * 用更明显的底色跟公开网站的匹配结果区分开，让人一眼看出这是私人数据。
 */
.search-personal:empty {
  display: none;
}

.search-personal .search-block {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.search-personal-hint {
  display: block;
  margin: -0.2rem 0 0.35rem;
  padding-inline: 0.45rem;
  color: var(--text-faint);
  font-size: 0.66rem;
}

.search-result.is-personal {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  background: transparent;
}

.search-result.is-personal .search-result-main strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.search-chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding-inline: 0.1rem;
}

.search-chip {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.search-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent-ink);
}

.search-empty-hint {
  margin: 0 0 0.3rem;
  padding-inline: 0.45rem;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.search-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
}

.search-toggle[aria-expanded="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--glass-border));
}

.build-tag {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
  opacity: 0.72;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .hero-search {
    width: 100%;
    /* 它在顶栏里，下面留白交给站点头部自己的 padding，别再顶出一段空白 */
    margin-bottom: 0;
  }

  .search-box-kbd {
    display: none;
  }

  .search-drop {
    right: -0.25rem;
    left: -0.25rem;
    max-height: min(58vh, 420px);
  }

  .search-result {
    flex-wrap: wrap;
  }

  .search-result-main {
    flex: 1 1 calc(100% - 3rem);
  }

  .search-result-reason {
    max-width: calc(100% - 2.9rem);
    margin-left: 2.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 用户要求减少动效时，跑马灯不再自动滚，改成可以手动横向滑的静态一行 */
  .hero-marquee-viewport {
    display: flex;
    justify-content: safe center;
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-marquee-track {
    animation: none;
  }

  .search-drop {
    animation: none;
  }

  .search-glow > i,
  .search-box-beam-spin {
    animation: none;
  }
}

/* 识别卡片：认出这是电影 / 书之后展示的那一小块 */
.search-lookup {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.search-lookup-cover {
  width: 3.4rem;
  height: 4.6rem;
  flex: none;
  border-radius: 8px;
  background: var(--surface-muted);
  object-fit: cover;
}

.search-lookup-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.18rem;
}

.search-lookup-body strong {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.search-lookup-body small {
  color: var(--accent-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.search-lookup-summary {
  display: -webkit-box;
  margin: 0.15rem 0 0;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.74rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Jev 的类型化判断：小事一桩，做成一枚很轻的小标签，别抢标题的视觉重心 */
.search-lookup-jev {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.12rem 0.42rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-faint);
  background: var(--surface-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* AI 智能解读：标题上的小徽标 + 思考中的扫光动画 */
.search-ai-title {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.search-ai-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  padding: 0.1rem 0.34rem;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #7c5cff));
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}

.search-ai-loading {
  position: relative;
  overflow: hidden;
}

.search-ai-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  animation: search-ai-sweep 1.35s ease-in-out infinite;
}

@keyframes search-ai-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-ai-loading::after {
    animation: none;
  }
}

.search-chip.is-primary {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 750;
}

/* 已经认出来了，就不用再说「没有直接对应的网站」 */
.search-drop:has(.search-lookup) .search-nomatch,
.search-drop:has(.search-lookup) .search-sitesearch {
  display: none;
}

/* ---------------------------------------------------------------------------
   网站小宠物：右下角的小助手（换造型 / 打转 / 闲聊 / 问答）
   --------------------------------------------------------------------------- */

.pet {
  position: fixed;
  right: clamp(0.7rem, 2vw, 1.5rem);
  bottom: clamp(4rem, 9vw, 7rem);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  /* 容器本身不挡页面，只有里面的元素可点 */
  pointer-events: none;
  transform: translate3d(var(--pet-drag-x, 0), var(--pet-drag-y, 0), 0);
  will-change: transform;
}

.pet > * {
  pointer-events: auto;
}

.pet-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.pet-stage {
  display: block;
  transform-origin: 50% 66%;
  filter: drop-shadow(0 14px 26px rgba(6, 12, 24, 0.3));
}

.pet-puppet {
  position: relative;
  display: block;
  height: clamp(108px, 12.5vw, 150px);
  aspect-ratio: var(--pet-ratio, 1.2);
  transform-origin: 50% 88%;
  filter: drop-shadow(0 12px 20px rgba(6, 12, 24, 0.32));
  animation: pet-bob 6.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.pet-img,
.pet-head-joint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.pet-img {
  object-fit: contain;
}

/* 完整底图永远留在原位，分层关节只做很小的覆盖运动，因此不会出现裂缝。 */
.pet-img-base {
  z-index: 0;
  transform-origin: 50% 86%;
  animation: pet-body-breathe 5.8s ease-in-out infinite;
}

.pet-img-lower {
  z-index: 1;
  transform-origin: 50% 88%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 58%, #000 76%);
  mask-image: linear-gradient(to bottom, transparent 58%, #000 76%);
  animation: pet-lower-idle 6.8s ease-in-out infinite;
}

.pet-img-torso {
  z-index: 2;
  transform-origin: 50% 67%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 49%, #000 68%, transparent 84%);
  mask-image: linear-gradient(to bottom, transparent 34%, #000 49%, #000 68%, transparent 84%);
  animation: pet-torso-idle 6.2s ease-in-out infinite;
}

.pet-img-arm {
  z-index: 3;
  transform-origin: 50% 62%;
  opacity: 0.98;
}

.pet-img-arm-left {
  clip-path: polygon(0 34%, 45% 43%, 45% 82%, 0 95%);
  transform-origin: 30% 56%;
  animation: pet-arm-left-idle 7.2s ease-in-out infinite;
}

.pet-img-arm-right {
  clip-path: polygon(55% 38%, 100% 30%, 100% 94%, 55% 82%);
  transform-origin: 70% 56%;
  animation: pet-arm-right-idle 7.6s ease-in-out infinite;
}

.pet-head-joint {
  z-index: 4;
  transform-origin: 50% 56%;
  animation: pet-head-idle 6.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.pet-img-head {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 40%, transparent 67%);
  mask-image: linear-gradient(to bottom, #000 0 40%, transparent 67%);
}

.pet-eye-overlay {
  z-index: 1;
  opacity: 0;
}

/* 睡姿已经是完整闭眼插画，不再叠加站立造型使用的关节层。 */
.pet[data-kind="sleepy"] .pet-img-lower,
.pet[data-kind="sleepy"] .pet-img-torso,
.pet[data-kind="sleepy"] .pet-img-arm,
.pet[data-kind="sleepy"] .pet-head-joint {
  opacity: 0;
  animation: none;
}

@keyframes pet-bob {
  0%, 100% { transform: translateY(0) rotate(-0.45deg); }
  50% { transform: translateY(-4px) rotate(0.55deg); }
}

@keyframes pet-body-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.003, 1.008); }
}

@keyframes pet-head-idle {
  0%, 100% { transform: translateY(0) rotate(-0.65deg); }
  50% { transform: translateY(-1.1px) rotate(0.8deg); }
}

@keyframes pet-torso-idle {
  0%, 100% { transform: translateY(0) rotate(0.35deg) scaleY(1); }
  50% { transform: translateY(0.7px) rotate(-0.4deg) scaleY(1.009); }
}

@keyframes pet-lower-idle {
  0%, 100% { transform: translateY(0.8px) rotate(-0.25deg); }
  50% { transform: translateY(0) rotate(0.3deg); }
}

@keyframes pet-arm-left-idle {
  0%, 100% { transform: rotate(-0.35deg) translateY(0); }
  50% { transform: rotate(0.5deg) translateY(-0.4px); }
}

@keyframes pet-arm-right-idle {
  0%, 100% { transform: rotate(0.4deg) translateY(0); }
  50% { transform: rotate(-0.45deg) translateY(-0.45px); }
}

/* 自然眨眼：专门绘制的闭眼帧快速盖过眼睛，不压扁整颗头。 */
.pet.is-blinking .pet-eye-overlay {
  animation: pet-natural-blink 460ms ease-in-out;
}

@keyframes pet-natural-blink {
  0%, 18%, 72%, 100% { opacity: 0; }
  32%, 57% { opacity: 1; }
}

/* 点头、侧望、挥手和跳跃都只动对应关节。 */
.pet-gesture-nod .pet-head-joint {
  animation: pet-joint-nod 1.3s cubic-bezier(0.33, 0, 0.2, 1);
}

@keyframes pet-joint-nod {
  0%, 100% { transform: translateY(0) rotate(0); }
  28% { transform: translateY(2px) rotate(1.4deg); }
  58% { transform: translateY(-0.7px) rotate(-0.7deg); }
}

.pet-gesture-shake .pet-head-joint {
  animation: pet-joint-shake 1.5s cubic-bezier(0.33, 0, 0.2, 1);
}

@keyframes pet-joint-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  22% { transform: translateX(-1.5px) rotate(-1.8deg); }
  46% { transform: translateX(1.5px) rotate(1.8deg); }
  68% { transform: translateX(-0.7px) rotate(-0.8deg); }
}

.pet-gesture-wave .pet-img-arm-right {
  animation: pet-joint-wave 1.8s cubic-bezier(0.33, 0, 0.2, 1);
}

.pet-gesture-wave .pet-img-torso {
  animation: pet-wave-balance 1.8s ease-in-out;
}

@keyframes pet-joint-wave {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-3.5deg) translateY(-1px); }
  38% { transform: rotate(3deg) translateY(-1.5px); }
  58% { transform: rotate(-2.6deg) translateY(-1px); }
  78% { transform: rotate(1.4deg); }
}

@keyframes pet-wave-balance {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(-0.8deg) translateX(-0.5px); }
  72% { transform: rotate(0.4deg); }
}

.pet-gesture-hop .pet-puppet {
  animation: pet-joint-hop 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pet-joint-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  22% { transform: translateY(1.5px) scale(1.015, 0.985); }
  52% { transform: translateY(-8px) scale(0.99, 1.012); }
  76% { transform: translateY(0.8px) scale(1.006, 0.994); }
}

/* 换装时所有图层同步收拢再展开，避免各关节错层。 */
.pet.is-switching .pet-img,
.pet.is-switching .pet-head-joint {
  animation: pet-swap 760ms ease-in-out;
}

@keyframes pet-swap {
  0%, 100% { opacity: 1; transform: scale(1); }
  48% { opacity: 0.18; transform: scale(0.84); }
  52% { opacity: 0.18; transform: scale(0.84); }
}
@keyframes pet-spin {
  0% {
    transform: rotate(0turn) scale(1) translateY(0);
  }

  45% {
    transform: rotate(0.5turn) scale(0.82) translateY(-10px);
  }

  100% {
    transform: rotate(1turn) scale(1) translateY(0);
  }
}

.pet-bubble {
  max-width: min(15rem, 62vw);
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: 16px 16px 16px 4px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    var(--shadow);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: left;
  backdrop-filter: blur(16px) saturate(150%);
  animation: pet-pop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pet-bubble[hidden] {
  display: none;
}

@keyframes pet-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.pet-chat {
  display: flex;
  width: min(21rem, calc(100vw - 1.6rem));
  max-height: min(68vh, 30rem);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-solid) 95%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 26px 70px rgba(4, 8, 20, 0.3);
  backdrop-filter: blur(24px) saturate(150%);
  animation: pet-pop 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pet-chat[hidden] {
  display: none;
}

.pet-chat-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
}

.pet-chat-avatar {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
}

.pet-chat-titles {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.1rem;
}

.pet-chat-titles strong {
  font-size: 0.86rem;
}

.pet-chat-titles small {
  color: var(--text-faint);
  font-size: 0.68rem;
}

.pet-chat-close {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-soft);
  background: var(--surface-muted);
  font-size: 0.7rem;
  cursor: pointer;
}

.pet-chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding: 0.75rem;
}

.pet-msg {
  display: flex;
}

.pet-msg-user {
  justify-content: flex-end;
}

.pet-msg-body {
  max-width: 88%;
  padding: 0.5rem 0.7rem;
  border-radius: 14px;
  color: var(--text);
  background: var(--surface-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.pet-msg-user .pet-msg-body {
  border-bottom-right-radius: 4px;
  color: #fff;
  background: var(--accent);
}

.pet-msg-bot .pet-msg-body {
  border-bottom-left-radius: 4px;
}

.pet-msg-thinking .pet-msg-body {
  color: var(--text-faint);
}

.pet-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.pet-link {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: inherit;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  text-decoration: none;
}

.pet-link:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.pet-link strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-link small {
  color: var(--text-faint);
  font-size: 0.66rem;
}

.pet-chip {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.pet-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent-ink);
}

.pet-chat-hints {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0 0.75rem 0.55rem;
}

.pet-hints-label {
  color: var(--text-faint);
  font-size: 0.68rem;
}

.pet-chat-form {
  display: flex;
  gap: 0.45rem;
  padding: 0.6rem 0.7rem 0.7rem;
  border-top: 1px solid var(--border);
}

.pet-chat-form input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-muted);
  font-family: inherit;
  font-size: 0.78rem;
  outline: none;
}

.pet-chat-form input:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.pet-chat-form button {
  flex: none;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

/* 刚点“问”时只显示一条小输入框；提交后 JS 会移除 is-compact 并展示完整回答。 */
.pet-chat.is-compact {
  width: min(16rem, calc(100vw - 1.2rem));
  max-height: none;
  border-radius: 999px;
}

.pet-chat.is-compact .pet-chat-head,
.pet-chat.is-compact .pet-chat-log,
.pet-chat.is-compact .pet-chat-hints {
  display: none;
}

.pet-chat.is-compact .pet-chat-form {
  gap: 0.35rem;
  padding: 0.34rem;
  border-top: 0;
}

.pet-chat.is-compact .pet-chat-form input {
  padding: 0.48rem 0.72rem;
  border-color: transparent;
  background: transparent;
}

.pet-chat.is-compact .pet-chat-form input:focus {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--surface-muted);
}

.pet-chat.is-compact .pet-chat-form button {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.pet.is-dragging,
.pet.is-dragging * {
  cursor: grabbing !important;
}

.pet.is-dragging .pet-puppet,
.pet.is-dragging .pet-img,
.pet.is-dragging .pet-head-joint {
  animation-play-state: paused;
}
@media (max-width: 720px) {
  .pet {
    right: 0.6rem;
    bottom: 0.6rem;
  }

  .pet-puppet {
    height: 92px;
  }

  .pet-chat {
    width: min(19rem, calc(100vw - 1.2rem));
    max-height: 62vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pet-puppet,
  .pet-img,
  .pet-head-joint,
  .pet.is-switching .pet-stage {
    animation: none;
  }

  .pet-bubble,
  .pet-chat {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   宠物：三类造型（原皮 / 有皮肤 / 睡觉）+ 变身过渡 + 睡觉小动作
   --------------------------------------------------------------------------- */

/* 变身：闪一下 + 星光扩散 */
.pet.is-transforming .pet-stage::after {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 214, 240, 0.6) 35%, transparent 70%);
  content: "";
  animation: pet-flash 900ms ease-out;
  pointer-events: none;
}

@keyframes pet-flash {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.pet.is-transforming .pet-puppet {
  animation: pet-transform-pop 900ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes pet-transform-pop {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(0.82); filter: brightness(1.9); }
  70% { transform: scale(1.08); filter: brightness(1.25); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* 睡着的时候：翻身（左右压扁 + 旋转，做出立体感） */
.pet-gesture-turn .pet-puppet {
  animation: pet-turn 2600ms ease-in-out;
}

@keyframes pet-turn {
  0% { transform: rotate(0) scaleX(1) scaleY(1); }
  30% { transform: rotate(-7deg) scaleX(0.9) scaleY(1.02); }
  55% { transform: rotate(9deg) scaleX(0.86) scaleY(1.04); }
  80% { transform: rotate(-3deg) scaleX(0.96) scaleY(1.01); }
  100% { transform: rotate(0) scaleX(1) scaleY(1); }
}

/* 伸懒腰：整只拉长再回弹 */
.pet-gesture-stretch .pet-puppet {
  animation: pet-stretch 2400ms ease-in-out;
}

@keyframes pet-stretch {
  0% { transform: scale(1, 1); }
  35% { transform: scale(1.06, 0.94); }
  60% { transform: scale(0.95, 1.09); }
  80% { transform: scale(1.02, 0.99); }
  100% { transform: scale(1, 1); }
}

/* 打呼：身体缓慢起伏 */
.pet-gesture-breathe .pet-puppet,
.pet.is-snoring .pet-puppet {
  animation: pet-breathe 3000ms ease-in-out;
}

@keyframes pet-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.035); }
}

/* 打呼时冒「Z」 */
.pet.is-snoring::after {
  position: absolute;
  top: -0.4rem;
  right: -0.2rem;
  color: var(--accent);
  content: "Z z z";
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0;
  animation: pet-zzz 2600ms ease-out;
  pointer-events: none;
}

@keyframes pet-zzz {
  0% { opacity: 0; transform: translateY(6px) scale(0.7); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .pet.is-transforming .pet-stage::after,
  .pet.is-transforming .pet-puppet,
  .pet.is-switching .pet-img,
  .pet.is-switching .pet-head-joint,
  .pet-gesture-turn .pet-puppet,
  .pet-gesture-stretch .pet-puppet,
  .pet-gesture-breathe .pet-puppet,
  .pet.is-snoring .pet-puppet,
  .pet.is-snoring::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   宠物 v2：附着在 AI 模块卡角 / 真正独立手臂 / 两阶段动漫眨眼
   --------------------------------------------------------------------------- */
.module-home {
  position: relative;
  overflow: visible;
}

.pet {
  position: absolute;
  right: auto;
  bottom: auto;
  z-index: 25;
  display: flex;
  width: max-content;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  pointer-events: none;
  transform: translate3d(var(--pet-drag-x, 0), var(--pet-drag-y, 0), 0);
  transform-origin: 50% 65%;
  will-change: transform;
}

/*
 * 被拖到自由位置之后：改成 fixed + 屏幕坐标。
 * 这样上下滚动网页时，它会一直停在屏幕上你放的那个位置
 * （默认吸附在卡片上时仍然是 absolute，跟着卡片走）。
 */
.pet.is-free {
  position: fixed;
  right: auto;
  bottom: auto;
}

/*
 * 空闲时不要一直挂在合成层上。
 * 手机上「position: fixed + will-change: transform」这个组合，
 * 滚动时容易出现整块图层跟不上的轻微漂移，所以不拖动就把它们撤掉。
 */
.pet.is-free:not(.is-dragging) {
  transform: none;
  will-change: auto;
}

.pet.is-snapping {
  transition: left 340ms cubic-bezier(0.22, 1, 0.36, 1),
    top 340ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pet > * {
  pointer-events: auto;
}

.pet-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.pet.is-dragging .pet-open {
  cursor: grabbing;
}

.pet-stage {
  position: relative;
  display: block;
  filter: drop-shadow(0 14px 25px rgba(6, 12, 24, 0.28));
}

/* 趴在卡片角上时换成「接触阴影」：几乎不偏移、几乎不虚化。
   默认那条 14px 偏移 / 25px 虚化的投影会让它看起来浮在卡片上面一层。 */
.pet.is-hugging .pet-stage {
  filter: drop-shadow(0 1px 1px rgba(6, 12, 24, 0.26)) drop-shadow(0 4px 6px rgba(6, 12, 24, 0.12));
}

.pet-puppet {
  position: relative;
  display: block;
  height: clamp(126px, 14vw, 174px);
  aspect-ratio: var(--pet-ratio, 1);
  filter: none;
  animation: none;
}

.pet-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.pet-img-base {
  z-index: 2;
  animation: none;
}

.pet-arm {
  display: none !important;
}

.pet-arm-left {
  transform-origin: var(--arm-left-origin, 42% 62%);
}

.pet-arm-right {
  transform-origin: var(--arm-right-origin, 58% 62%);
}

.pet-eye-frame {
  z-index: 3;
  opacity: 0;
}

/* 睡着时只做极轻的呼吸，保持“抱住卡角”的重量感。 */
.pet[data-kind="sleepy"] .pet-puppet {
  animation: pet-hug-breathe 3.2s ease-in-out infinite;
}

@keyframes pet-hug-breathe {
  0%, 100% { transform: translateY(0) scaleY(1) rotate(-0.18deg); }
  50% { transform: translateY(2.4px) scaleY(1.012) rotate(0.18deg); }
}

/* 清醒造型也只用完整原图呼吸：变形中心放在胸口，不拆手臂、衣服或脸。 */
.pet:not([data-kind="sleepy"]) .pet-puppet {
  transform-origin: 50% 62%;
  animation: pet-chest-breathe 3.6s ease-in-out infinite;
}

@keyframes pet-chest-breathe {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }

  50% {
    transform: translateY(-0.8px) scale(1.04, 1.03);
  }
}

.pet-gesture-hop .pet-puppet {
  animation: pet-awake-hop 1.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes pet-awake-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

/* 日漫式眨眼：开眼 → 半闭 → 全闭 → 半闭 → 开眼。肤色帧与各造型分别匹配。 */
.pet.is-blinking .pet-eye-half {
  animation: pet-blink-half 230ms linear;
}

.pet.is-blinking .pet-eye-closed {
  animation: pet-blink-closed 230ms linear;
}

@keyframes pet-blink-half {
  0%, 8%, 92%, 100% { opacity: 0; }
  16%, 34%, 68%, 84% { opacity: 1; }
  43%, 58% { opacity: 0; }
}

@keyframes pet-blink-closed {
  0%, 34%, 68%, 100% { opacity: 0; }
  43%, 58% { opacity: 1; }
}

.pet.is-switching .pet-puppet {
  animation: pet-wake-switch 370ms ease-in-out !important;
}

@keyframes pet-wake-switch {
  0%, 100% { opacity: 1; transform: scale(1); }
  46%, 54% { opacity: 0.25; transform: scale(0.9) rotate(-3deg); }
}

/* 拖动不再给整只身体施加旋转反馈，避免衣服和身体出现撕裂感。 */
.pet.was-shaken {
  animation: none !important;
}

.pet.is-dragging .pet-puppet,
.pet.is-dragging .pet-arm,
.pet.is-dragging .pet-eye-frame {
  animation-play-state: paused !important;
}

.pet-chat,
.pet-bubble {
  position: relative;
  z-index: 4;
}

@media (max-width: 720px) {
  .pet-puppet {
    height: 106px;
  }

  .pet-chat {
    width: min(19rem, calc(100vw - 1.2rem));
    max-height: 62vh;
  }
}

/* 2026-09-27 用户：「电脑端的宠物模型太大了，给我缩小一点」——
   174px（1440 实测）缩到 120px，手机端（≤720 的 106px）一个字节都没动。 */
@media (min-width: 721px) {
  .pet-puppet {
    height: clamp(104px, 8.6vw, 120px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pet,
  .pet-puppet,
  .pet-arm,
  .pet-eye-frame {
    animation: none !important;
    transition: none !important;
  }
}

.pet.is-switching .pet-img { animation: none !important; }

.pet-open:focus:not(:focus-visible) { outline: none; }

/*
 * 触摸设备上在宠物身上滑动 = 拖动宠物，不要被浏览器当成「滚动页面」。
 * 这条很关键：真机上竖向滑动如果被判成滚动手势，浏览器会发 pointercancel
 * 打断拖动，宠物就留在「日常动态」卡片上，跟着页面一起滚 —— 用户看到的
 * 就是「拖出来了但滚动时它还跟着页面动」。
 * 只作用在宠物本体这个小区域；聊天面板是它的兄弟元素，不受影响。
 */
.pet-open {
  touch-action: none;
}

/* 宠物是前景主体：它抱住卡角，而不是被半透明卡片盖住。 */
.module-grid {
  position: relative;
  z-index: 1;
}

.module-card[data-group-id="daily"] {
  z-index: 2;
}

.pet {
  z-index: 120;
}

.pet.is-hugging .pet-puppet {
  transform: translateZ(0);
}

/* 问答入口只保留输入框，不再出现“问 / Ask”提交圆钮。 */
.pet-chat-form:has(input:only-child) {
  gap: 0;
}

.pet-chat-form input:only-child {
  width: 100%;
  flex-basis: 100%;
}

.pet-chat.is-compact .pet-chat-form input:only-child {
  padding-right: 0.9rem;
}

/* 主页 AI 宠物快捷开关：按钮名固定为 teto。 */
.teto-toggle {
  width: auto;
  min-width: 3.35rem;
  height: 2.75rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.header-pet-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.teto-toggle[aria-pressed="true"] {
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  border-color: color-mix(in srgb, var(--accent) 46%, var(--glass-border));
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-solid));
}

.teto-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* ---------------------------------------------------------------------------
   左侧边栏：点左上角头像 / 站名滑出，里面按「模块」往下堆内容
   （结构参考了同类导航站的 sidebar-header + module 布局）
   --------------------------------------------------------------------------- */

html.sidebar-open {
  overflow: hidden;
}

/* 侧边栏打开时把宠物收起来：遮罩是半透明的，不收起来的话它会透过遮罩露在右边 */
html.sidebar-open .pet {
  display: none;
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  border: 0;
  background: rgba(12, 16, 28, 0.42);
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(2px);
  /* visibility 用 0s + delay 来切：淡出结束才真正隐藏 */
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.sidebar-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
}

.site-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  display: flex;
  width: min(23.5rem, 92vw);
  height: 100dvh;
  flex-direction: column;
  border-right: 1px solid var(--glass-border, var(--border));
  background: var(--surface-solid);
  box-shadow: 24px 0 70px rgba(8, 12, 24, 0.24);
  outline: none;
  transform: translateX(-102%);
  visibility: hidden;
  /* 同上。这里很关键：如果 visibility 跟着过渡走，打开的第一帧还是 hidden，
     紧跟着的 panel.focus() 会被浏览器静默忽略，键盘用户就进不去抽屉。 */
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.32s;
}

.site-sidebar.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-avatar {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-muted);
}

.sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-head-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.12rem;
}

.sidebar-head-copy strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-head-copy small {
  color: var(--text-faint);
  font-size: 0.7rem;
}

.sidebar-close {
  display: grid;
  /* 手机关闭抽屉主要靠这个按钮，原本 2rem(32px) 偏小，提到 44px 更好点 */
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-close:hover,
.sidebar-close:focus-visible {
  color: var(--text);
  background: var(--surface-muted);
}

.sidebar-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sidebar-module {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.sidebar-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sidebar-module-head h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sidebar-module-count {
  color: var(--text-faint);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.sidebar-module-hint {
  margin: -0.35rem 0 0;
  color: var(--text-faint);
  font-size: 0.72rem;
  line-height: 1.5;
}

/* 「我的工作台」里的两个快捷入口（2026-09-29）：全网热点榜 / 工具箱。
   从右上角搬进来的，放在**密码锁外面** —— 不输密码就能点。
   两列等宽、图标 + 文字，跟抽屉底部那排按钮同一套观感。 */
.workspace-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0 0.15rem;
}

.workspace-quick-item {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.workspace-quick-item:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, transparent);
  color: var(--text);
}

.workspace-quick-item svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 抽屉底部那一排：用户留言 / 我的工作台 / 设置 / teto
   （2026-09-27 用户要求「这 4 个按钮一定要统一样式和大小」——所以四颗共用
   .sidebar-tool 这一套尺寸，只有「按下」状态靠 aria-pressed 变色区分） */
.sidebar-tools {
  display: grid;
  flex: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.8rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}

.sidebar-tool {
  display: inline-flex;
  min-height: 2.7rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.sidebar-tool svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-tool:hover,
.sidebar-tool:focus-visible {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

/* 当前打开的那一屏 / 宠物开着的时候，按钮亮起来 */
.sidebar-tool[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.sidebar-tool[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.sidebar-tool-resource {
  grid-column: 1 / -1;
}

.module-card-resource-library {
  color: var(--text);
  text-decoration: none;
}

.module-card-resource-library .module-icon {
  color: #0f8b78;
  background: color-mix(in srgb, #0f8b78 10%, var(--surface));
}

/* ---------------------------------------------------------------------------
   2026-10-11：电脑端头像面板改成「头像旁边的小卡片菜单」
   ---------------------------------------------------------------------------
   用户反馈：左边栏已经有展开/折叠按钮了，点头像不该再展开一遍目录。
   所以 ≥1200px（也就是左边栏存在的那一档）：
     · 不再是整条贴边抽屉，而是头像旁边一张圆角小卡片；
     · 菜单态只有那 4 个功能（用户留言 / 我的工作台 / 设置 / teto），不摆目录；
     · 点「留言 / 工作台」时才长成有内容的浮层（同一个位置、宽度变宽、可滚动）。
   手机 / 窄屏（<1200px）一个字节都不动，点头像还是展开目录。
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .site-sidebar {
    top: 3.7rem;
    left: calc(var(--rail-width) + 0.85rem);
    width: 13.6rem;
    height: auto;
    max-height: min(72dvh, 34rem);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(8, 12, 24, 0.18);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top left;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0s linear 0.18s;
  }

  .site-sidebar.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0s linear 0s;
  }

  /* 有内容那一屏（留言 / 工作台）才长成浮层 */
  .site-sidebar.is-open:not(.is-menu) {
    width: min(23.5rem, 92vw);
  }

  /* 菜单态：不摆内容区，4 个功能竖着排一行一个，比 2×2 更好点也好读 */
  .site-sidebar.is-menu .sidebar-body {
    display: none;
  }

  /* 菜单态只留那 4 个功能：标题栏（头像 / 站名 / 关闭）在电脑端是多余的 ——
     头像就在旁边，点它就能关，点卡片外面也能关。 */
  .site-sidebar.is-menu .sidebar-head {
    display: none;
  }

  .site-sidebar.is-menu .sidebar-tools {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem;
    border-top: 0;
  }

  /* 小卡片不需要整屏压暗，只留一层「点外面关掉」的透明遮罩 */
  .sidebar-scrim {
    background: transparent;
    backdrop-filter: none;
  }
}

.sidebar-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sidebar-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.sidebar-field-label {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sidebar-field input,
.sidebar-field textarea {
  width: 100%;
  /* 移动端输入框至少 44px 高，手指好点 */
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface-solid);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
  resize: vertical;
}

.sidebar-field textarea {
  min-height: 4.5rem;
}

.sidebar-field input:focus-visible,
.sidebar-field textarea:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 1px;
}

/* 蜜罐字段：正常用户看不见，也不该被 Tab 到 */
.sidebar-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sidebar-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sidebar-counter {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.sidebar-counter[data-full="true"] {
  color: var(--danger);
}

.sidebar-submit {
  padding: 0.42rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sidebar-submit:hover:not(:disabled) {
  transform: translateY(-1px);
}

.sidebar-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.sidebar-status {
  margin: 0;
  min-height: 1em;
  color: var(--text-faint);
  font-size: 0.7rem;
  line-height: 1.5;
}

.sidebar-status[data-tone="ok"] {
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.sidebar-status[data-tone="error"],
.sidebar-status[data-tone="warn"] {
  color: var(--danger);
}

.sidebar-messages {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
}

.sidebar-message {
  display: flex;
  gap: 0.55rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
}

.sidebar-message-avatar {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: hsl(var(--msg-hue, 210) 62% 52%);
  font-size: 0.75rem;
  font-weight: 700;
}

.sidebar-message-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.22rem;
}

.sidebar-message-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sidebar-message-name {
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-message-time {
  flex: none;
  color: var(--text-faint);
  font-size: 0.66rem;
}

.sidebar-message-text {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sidebar-messages-placeholder,
.sidebar-empty {
  margin: 0;
  padding: 0.6rem 0;
  color: var(--text-faint);
  font-size: 0.74rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   我的工作台：侧边栏里的私人储存模块（速记 + 待办，版本 20260925-workspace1）
   沿用留言板那套排版语言（同样的圆角 / 边框 / 字号），只是把「公开」换成「只有我能看」。
   --------------------------------------------------------------------------- */

.workspace-module {
  /* 和「用户留言」区分开：底色偏中性，不抢留言板的位置 */
  background: var(--surface-muted);
}

.workspace-lock-row {
  display: flex;
  gap: 0.45rem;
}

.workspace-lock-row input {
  min-width: 0;
  min-height: 2.75rem;
  flex: 1;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface-solid);
  font-family: inherit;
  font-size: 0.82rem;
}

.workspace-lock-row input:focus-visible,
.workspace-field textarea:focus-visible,
.notes-item-area:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 1px;
}

.workspace-unlock {
  flex: none;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  transition: opacity 0.2s ease;
}

.workspace-unlock:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.workspace-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.workspace-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.workspace-field-label {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.workspace-field textarea,
.notes-item-area {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface-solid);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.6;
  resize: vertical;
}

.workspace-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.workspace-editor-actions {
  display: flex;
  gap: 0.4rem;
}

.workspace-counter {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.workspace-counter[data-full="true"] {
  color: var(--danger);
}

.workspace-action {
  /* 手机上要够 44px 才好点：这里用 2.75rem(=44px)，小屏和桌面都够 */
  min-height: 2.75rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-solid);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.workspace-action:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-muted);
}

.workspace-action.is-primary {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: #fff;
  background: var(--accent);
}

.workspace-action.is-primary:hover:not(:disabled) {
  color: #fff;
  background: var(--accent-ink);
}

.workspace-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.workspace-status {
  margin: 0;
  min-height: 1em;
  color: var(--text-faint);
  font-size: 0.7rem;
  line-height: 1.5;
}

.workspace-status[data-tone="ok"] {
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.workspace-status[data-tone="error"],
.workspace-status[data-tone="warn"] {
  color: var(--danger);
}

.notes-list {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 0.55rem;
  list-style: none;
}

.notes-item {
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
}

.notes-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.notes-item-time {
  color: var(--text-faint);
  font-size: 0.66rem;
}

.notes-item-tools {
  display: flex;
  flex: none;
  gap: 0.15rem;
}

/* 编辑 / 删除：默认压得很轻，鼠标移上去或键盘聚焦才明显 —— 平时不打扰阅读 */
.workspace-tool {
  padding: 0.2rem 0.4rem;
  border: 0;
  border-radius: 6px;
  color: var(--text-faint);
  background: transparent;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
  transition: color 0.2s ease, background 0.2s ease;
}

.workspace-tool:hover,
.workspace-tool:focus-visible {
  color: var(--text);
  background: var(--surface-muted);
}

.workspace-tool.is-danger:hover,
.workspace-tool.is-danger:focus-visible {
  color: var(--danger);
}

.notes-item-text {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.notes-link {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.notes-item-edit {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.notes-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.notes-placeholder,
.notes-empty {
  margin: 0;
  padding: 0.6rem 0;
  color: var(--text-faint);
  font-size: 0.74rem;
  text-align: center;
}

/* 工作台的标签页：速记 / 待办 / 锁定。面积压得很小，手机上一屏能看全 */
.workspace-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-solid);
}

/* 管理后台入口（2026-09-27 从首页中间那个头像搬过来的）：解锁后才看得见 */
.workspace-admin-link {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.workspace-admin-link svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-admin-link:hover,
.workspace-admin-link:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.workspace-tab {
  display: inline-flex;
  min-height: 2.1rem;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 999px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease;
}

.workspace-tab:hover {
  color: var(--text);
}

.workspace-tab.is-active {
  color: #fff;
  background: var(--accent);
}

.workspace-tab-count {
  min-width: 0.95rem;
  padding: 0 0.24rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.workspace-tab.is-active .workspace-tab-count {
  background: rgba(255, 255, 255, 0.26);
}

.workspace-tab-count:empty {
  display: none;
}

.workspace-lock-button {
  flex: none;
  min-height: 2.1rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 999px;
  color: var(--text-faint);
  background: transparent;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease;
}

.workspace-lock-button:hover,
.workspace-lock-button:focus-visible {
  color: var(--text);
  background: var(--surface-muted);
}

.workspace-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 待办：输入行 + 统计行 */
.workspace-todo-form {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}

.workspace-todo-form .workspace-field {
  min-width: 0;
  flex: 1;
}

.workspace-todo-form input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface-solid);
  font-family: inherit;
  font-size: 0.82rem;
}

.workspace-todo-form input:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 1px;
}

.workspace-todo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.todos-list {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
}

.todos-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
}

.todos-item.is-done {
  opacity: 0.62;
}

/* 勾选圈：手机上至少 44px 的点击区，但视觉上还是很小的一个圈 */
/* 勾选圈：整个按钮是 44px 的点击区，里面那个小圈才是视觉上的勾选框 */
.todos-check {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  margin: -0.35rem 0 -0.35rem -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.todos-check-dot {
  display: flex;
  width: 1.15rem;
  height: 1.15rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.todos-check:hover .todos-check-dot,
.todos-check:focus-visible .todos-check-dot {
  border-color: var(--accent);
}

.todos-item.is-done .todos-check-dot {
  border-color: var(--accent);
  background: var(--accent);
}
.todos-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.18rem;
  padding-top: 0.1rem;
}

.todos-text {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.todos-item.is-done .todos-text {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text) 40%, transparent);
}

.todos-meta {
  color: var(--text-faint);
  font-size: 0.64rem;
}

.todos-tools {
  display: flex;
  flex: none;
  gap: 0.15rem;
  padding-top: 0.15rem;
}

.todos-item-edit {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.4rem;
}

.todos-item-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface-solid);
  font-family: inherit;
  font-size: 0.82rem;
}

.todos-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.todos-empty {
  margin: 0;
  padding: 0.6rem 0;
  color: var(--text-faint);
  font-size: 0.74rem;
  text-align: center;
}

/* 从搜索结果跳过来时，把那一条亮一下，让人一眼看到是它 */
.notes-item.is-flash,
.todos-item.is-flash {
  animation: workspace-flash 1.7s ease;
}

@keyframes workspace-flash {
  0%,
  100% {
    border-color: var(--border);
    background: var(--surface-solid);
  }
  18%,
  62% {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-solid));
  }
}

@media (prefers-reduced-motion: reduce) {
  .notes-item.is-flash,
  .todos-item.is-flash {
    animation: none;
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  }
}

.brand[aria-expanded="true"] {
  color: var(--accent-ink);
}

@media (max-width: 720px) {
  .site-sidebar {
    width: min(21rem, 100vw);
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-sidebar,
  .sidebar-scrim {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   移动端输入框字号
   viewport 里不再写 user-scalable=no（那会挡住需要放大阅读的人），
   代价是 iOS 遇到小于 16px 的输入框会自作主张放大整页。
   所以小屏下把输入框统一提到 16px，聚焦时就不会乱跳。
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  #search-input,
  .sidebar-field input,
  .sidebar-field textarea,
  .workspace-field input,
  .workspace-field textarea,
  .workspace-todo-form input,
  .todos-item-input,
  .pet-chat-form input {
    font-size: 16px;
  }

  /* 手机上标签页和「锁定」也要够 44px 才好点 */
  .workspace-tab,
  .workspace-lock-button {
    min-height: 2.75rem;
  }
}

/* 关掉 JavaScript 时给一句说明：页面主体还在，但分类展不开、搜索用不了 */
/* 左下角原来那个「快捷添加网站」的按钮和面板（.quick-add-*）已经在
   2026-09-26 按用户要求换成「设置」面板（样式在文件末尾那一节），
   这里的样式连同 public/assets/quick-add.js 一起删掉了。
   加网站仍走后台的「添加网站」，服务端接口 /api/admin/bookmarks 没动。 */

.noscript-note {
  max-width: 42rem;
  margin: 1rem auto;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   桌面端排版（20260922-desk1）
   手机端的排版一直没问题，所以这整段都关在 min-width 里，小屏一个字节都不动。
   桌面端原来是「把手机版拉宽」，实测出来的四个毛病：
     1. 工作区 1180，而「选择一个方向」那一块还被额外夹在 820 里
        —— 1920 的屏上只占 43% 宽，两边空掉一大片；
        而且 1440 和 1920 的画面完全一样，没有任何针对大屏的处理；
     2. 字号是按手机定的：模块说明 11.2px、计数 9.9px、页脚 11.5px，
        在笔记本电脑和台式屏上都偏小；
     3. hero 和「选择一个方向」是贴着的（实测 hero 结束于 702px、模块块开始于 701px），
        整页没有段落节奏；
     4. 模块卡片 264×264 挤在中间，显得小气。
   这轮只做四件事：放宽工作区、抬字号、给节奏、把模块格子铺满。
   不加新装饰（项目铁律：视觉风格已经稳定，优先做功能）。
   --------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* 1. 工作区放宽：1440 以下 1200，再往上到 1280 / 1380（见下面两段） */
  :root {
    --max-width: 1200px;
  }

  .site-header,
  main,
  .site-footer {
    width: min(calc(100% - 3.5rem), var(--max-width));
  }

  /* 2. 顶部：站名稍大一点，别让 header 显得比内容轻 */
  .site-header {
    /* 原来上下各 1.6 / 1.1rem，加上 hero 自己的上留白，
       头像被顶到 200px 以下才出现，整页看着「整体靠下」。
       这里和下面 .hero 一起收紧，把首屏让给内容。 */
    padding: 0.8rem 0 0.5rem;
  }

  /* 「主题 / 语言」和「teto」原来在大屏上竖着堆成两行，顶栏白占 50px，
     首屏整体被顶下去（2026-09-25 用户反馈「整体太靠下」）。并成一行。 */
  .header-actions {
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
  }

  .brand-mark {
    width: 3rem;
    height: 3rem;
  }

  .brand-copy strong {
    font-size: 1.08rem;
  }

  /* 3. 首屏：给足上下留白，头像 / 社媒 / 统计整体抬一档。
        另外把「在别处找到我」和「已整理 343 个网站」并成一条居中的横条：
        大屏上不再是一根竖着堆的小柱子，而且省掉整整一行的高度，
        首屏还能露出下面的大模块卡片（原来这两行是上下叠着的）。 */
  .hero {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    justify-items: center;
    column-gap: clamp(1.1rem, 2vw, 2rem);
    /* 和基础规则保持一致：首屏整体往上带，别在顶部留大片空白。 */
    padding: clamp(0.5rem, calc(8vh - 45px), 3rem) 0 clamp(1.05rem, 1.8vw, 1.6rem);
  }

  .hero-avatar,
  .eyebrow,
  .hero h1.hero-display,
  .hero-cn {
    grid-column: 1 / -1;
  }

  .hero-avatar {
    width: 5rem;
    height: 5rem;
    margin-bottom: 0;
  }

  .eyebrow {
    font-size: 0.78rem;
  }

  .hero-cn {
    margin-top: 0.75rem;
    font-size: 1.2rem;
  }

  .social-links {
    grid-column: 1;
    justify-self: end;
    gap: 1rem;
    margin-top: clamp(1.3rem, 2.1vw, 1.9rem);
  }

  .social-label {
    font-size: 0.72rem;
  }

  .social-link {
    min-height: 3rem;
    padding: 0.34rem 0.8rem 0.34rem 0.38rem;
  }

  .social-link img {
    width: 2.2rem;
    height: 2.2rem;
  }

  .social-link strong {
    font-size: 0.86rem;
  }

  .social-link small {
    font-size: 0.66rem;
  }

  .hero-stats {
    grid-column: 2;
    justify-self: start;
    margin-top: clamp(1.3rem, 2.1vw, 1.9rem);
    padding: 0.62rem 0.95rem;
    font-size: 0.85rem;
  }

  /* 展开的搜索 / 快捷分类区，大屏上别贴着上下两块 */
  .hero-marquee {
    margin-top: 0.6rem;
    margin-bottom: 1.6rem;
  }

  .hero-marquee-title {
    font-size: 1rem;
  }

  /* 4. 大模块：解开 820 的限制（原来 width 是 min(100%,1040px)、又压了 max-width:820px），
        卡片铺满整个工作区，改成宽而扁、字号抬一档 */
  .module-home {
    width: 100%;
    max-width: none;
    margin: 2.1rem auto 4.5rem;
  }

  .module-home-heading {
    margin-bottom: 1.15rem;
  }

  .module-home-heading .toolbar-kicker {
    margin-bottom: 0.45rem;
    font-size: 0.76rem;
  }

  .module-home-heading h2 {
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  }

  .module-home-hint-row {
    /* 大屏上把放大镜收回内容里，不再绝对定位飘在整行最右边 */
    min-height: 0;
    gap: 0.6rem;
    margin-top: 0.7rem;
  }

  .module-home-hint-row p {
    padding: 0;
    font-size: 0.9rem;
  }

  .module-home-search {
    position: static;
  }

  .module-grid {
    gap: 1rem;
  }

  .module-card {
    min-height: 11rem;
    padding: 1.25rem;
    border-radius: 26px;
    aspect-ratio: auto;
    /* 数量改成绝对定位到右上角（见下面的 .module-count），
       所以这里不再用 space-between 把它顶到底部 */
    justify-content: flex-start;
  }

  .module-icon {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 19px;
    font-size: 1.3rem;
  }

  .module-name {
    margin-top: 0.8rem;
    font-size: 1.18rem;
  }

  .module-card-description {
    /* 别限得太窄：卡片宽了之后 34ch 会让中文说明在中间断行，看着很别扭 */
    max-width: 28ch;
    margin-top: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.62;
  }

  .module-count {
    /* 挪到卡片右下角：卡片变宽之后说明文字只占左边一条，
       缩在左下角会让右半边空着。
       注意别放右上角 —— 宠物默认就吸附在「日常动态」卡的右上角，会被它压住。 */
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
  }

  /* 打开某个大模块之后那一页（工具栏 / 小分类 / 书签卡）也一并抬一档，
        否则首页变大了、点进去又变回手机尺寸，会显得两套东西 */
  .toolbar {
    padding: 1.4rem;
  }

  /* 打开模块之后，工具栏右边那三样（数量 / 按目标找 / 图标视图）
     在手机上竖着堆是对的，大屏上并成一行更稳 */
  .toolbar-status {
    align-items: center;
    flex-direction: row;
    gap: 0.7rem;
  }

  .toolbar-kicker {
    font-size: 0.68rem;
  }

  .toolbar-heading h2 {
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  }

  .result-count {
    font-size: 0.88rem;
  }

  .module-description {
    font-size: 0.88rem;
  }

  .view-hint {
    font-size: 0.8rem;
  }

  .section-title {
    font-size: 1.32rem;
  }

  .section-description {
    font-size: 0.86rem;
  }

  .section-count {
    font-size: 0.82rem;
  }

  .bookmark-grid {
    gap: 1.15rem;
  }

  .bookmark-card {
    min-height: 198px;
    padding: 1.25rem;
  }

  .bookmark-icon {
    width: 3.15rem;
    height: 3.15rem;
  }

  .bookmark-icon img,
  .bookmark-icon img.bookmark-icon-hd {
    width: 1.85rem;
    height: 1.85rem;
  }

  .bookmark-title {
    font-size: 1.06rem;
  }

  .bookmark-description {
    font-size: 0.86rem;
  }

  .bookmark-domain {
    font-size: 0.75rem;
  }

  .site-footer {
    padding: 1.9rem 0 2.6rem;
    font-size: 0.78rem;
  }
}

@media (min-width: 1360px) {
  :root {
    --max-width: 1280px;
  }

  /* 11 个大模块在 3 列下会拖出 4 行、页面变长（用户 2026-09-25 反馈「太长了」）。
     宽屏改 4 列，11 个卡片只要 3 行。 */
  .module-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  :root {
    --max-width: 1380px;
  }

  /* 大屏上标题也放大一点，否则工作区变宽之后标题反而显得缩了。
     max-width 要跟着放宽，不然 1120px 的字会被 1060px 的框挤成两行。 */
  .hero h1.hero-display {
    max-width: 1280px;
    font-size: clamp(2.7rem, 9.4vw, 7.1rem);
  }

  .module-card {
    min-height: 12rem;
  }
}

/* ===========================================================================
   侧边目录（左）+ 本页目录（右）—— 2026-09-26（版本号 20260926-nav1）
   ---------------------------------------------------------------------------
   照着 fmhy.net 的导航结构做的：
     · 左边＝「这个站有哪些大模块」常驻目录，当前那个高亮；
     · 右边＝「本页有哪些段落」（首页是首屏 / 选择方向，进了模块就是它的小分类）；
     · 小屏（<1200px）两栏都收起来，顶栏多一个 ☰ 打开左边的抽屉。

   ⚠️ 内容区一收窄，首屏大标题就可能折行。2026-09-26 实测：
      一行「INFORMATION GAP」的宽度 ≈ 8.75 × 字号（1440 下 99.2px 的字 → 868px）。
      所以下面内容区最窄也有 922px（1200 视口），大标题 868px 放得下；
      以后要改两栏宽度，必须重新量这一条。
   ⚠️ 目录里的项是从「已经渲染好的 DOM」里读的（模块卡、分类区块），
      中英切换、后台改数据之后会自动重建，不用再维护一份列表。
   =========================================================================== */

/* 顶栏那个 ☰：小屏有、宽屏没有（宽屏左边本来就常驻目录了） */
.nav-toggle {
  display: inline-grid;
}

.page-toc {
  display: none;
}

html.nav-open {
  overflow: hidden;
}

html.nav-open .pet {
  display: none;
}

.site-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 86;
  border: 0;
  background: rgba(12, 16, 28, 0.42);
  opacity: 0;
  visibility: hidden;
  /* visibility 用 0s + delay 来切：淡出结束才真正隐藏 */
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

html.nav-open .site-nav-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
}

/* 小屏：左边目录 = 从左侧滑出的抽屉 */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 87;
  display: flex;
  width: min(19.5rem, 86vw);
  height: 100dvh;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 0.9rem 1.6rem;
  border-right: 1px solid var(--border);
  background: var(--bg-strong);
  box-shadow: 0 24px 70px rgba(12, 16, 28, 0.28);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateX(-104%);
  transition: transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
}

html.nav-open .site-nav {
  visibility: visible;
  transform: none;
  transition: transform 0.3s var(--ease-out), visibility 0s linear 0s;
}

.site-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0 0.5rem 0.5rem;
}

.site-nav-title,
.page-toc-title {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav-close {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.site-nav-list,
.page-toc-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.site-nav-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.46rem 0.55rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.site-nav-item:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.site-nav-item[aria-current="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font-weight: 620;
}

.site-nav-icon {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 600;
}

.site-nav-item[aria-current="true"] .site-nav-icon {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-ink);
}

.site-nav-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav-count {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.site-nav-item-home .site-nav-icon {
  font-size: 0.85rem;
}

/* 右边「本页目录」：窄窄一列，字小、层级靠缩进区分（跟 fmhy 一致） */
.page-toc-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.22rem 0.4rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.page-toc-item.is-sub {
  padding-left: 1rem;
  color: var(--text-faint);
  font-size: 0.75rem;
}

.page-toc-item:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.page-toc-item[aria-current="true"] {
  color: var(--accent-ink);
  font-weight: 600;
}

.page-toc-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-toc-count {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.page-toc-top {
  margin-top: 0.75rem;
  padding: 0.34rem 0.4rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
}

.page-toc-top:hover {
  background: var(--surface-muted);
  color: var(--text);
}

@media (min-width: 1200px) {
  :root {
    --rail-width: 224px;
  }

  /* 宽屏：顶栏的 ☰ 和遮罩收起来，左边目录变成常驻一栏 */
  .nav-toggle,
  .site-nav-scrim {
    display: none;
  }

  .site-nav {
    position: sticky;
    top: 0.85rem;
    z-index: 1;
    width: auto;
    height: auto;
    min-height: calc(100dvh - 1.7rem);
    /* ⚠️ 2026-09-27：用户明确说「不希望加滚动条，那一栏原本就是固定的」——
       以前这里是 max-height + overflow-y:auto，内容一多就冒出竖滚动条（还有一条
       横向的）。现在不设 max-height、也不滚动：内容多就让它自然往下排，
       要看得靠滚页面（那一栏本身是 sticky，一直贴着顶部）。 */
    max-height: none;
    padding: 0.75rem 0.7rem 0.85rem;
    border: 1px solid var(--desktop-nav-border);
    border-radius: 18px;
    background: var(--desktop-nav-bg);
    box-shadow: 0 12px 32px rgba(20, 41, 77, 0.055);
    overflow: visible;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .site-nav-head {
    padding: 0 0.5rem 0.65rem;
  }

  .site-nav-list {
    gap: 0.18rem;
  }

  .site-nav-item {
    min-height: 2.55rem;
    padding: 0.5rem 0.58rem;
    border-radius: 12px;
  }

  .site-nav-item:hover {
    background: var(--desktop-nav-hover);
  }

  .site-nav-item[aria-current="true"] {
    background: var(--desktop-nav-active);
    box-shadow: 0 4px 14px rgba(20, 41, 77, 0.06);
  }

  .site-nav-close {
    display: none;
  }

  /* 内容区收窄居中，左右各留一栏 */
  .page-shell {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 2rem 1.75rem;
    width: min(calc(100% - 3.5rem), 1400px);
    margin: 0 auto;
    align-items: start;
  }

  .page-shell > main {
    width: 100%;
    max-width: none;
    margin: 0;
  }

}

/* 1200–1279：左栏先收一档，保证首屏大标题不被挤换行。 */
@media (min-width: 1200px) and (max-width: 1279px) {
  .page-shell {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: 1.5rem 1.35rem;
  }
}

@media (min-width: 1600px) {
  /* 再宽一点才加右边那栏：不然两栏一挤，内容区比 1440 还窄 */
  .page-shell {
    grid-template-columns: 288px minmax(0, 1fr) 11rem;
    width: min(calc(100% - 3.5rem), 1620px);
  }

  .page-toc:not([hidden]) {
    display: block;
    position: sticky;
    top: 1.1rem;
    align-self: start;
    max-height: calc(100vh - 2.2rem);
    padding-left: 1.1rem;
    border-left: 1px solid var(--border);
    overflow-y: auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav-scrim {
    transition: none;
  }
}

/* ===========================================================================
   2026-09-26 第二轮：首页压缩 + 常显搜索框 + 搜索结果页（版本号 20260926-search1）
   ---------------------------------------------------------------------------
   用户的原话：「跟 fmhy 主页比，我这站长、还不密；上下长度太长，整体往上压一压。
   搜索框直接展开、放到原来那一行的最右边、做原来一半长。『CHOOSE A TOPIC /
   选择一个方向』那块没用、去掉，但跑马灯别删，挪到页面最底部。
   搜完不要弹一个模糊的卡片和没用的解读，直接进另一个界面把相关的东西整理好。」

   所以这一节的四件事：
     1) 首屏与大模块整体压一档（hero 上留白 8vh→5vh，模块卡 11rem→9rem、图标/字号同步收）；
     2) 搜索行 .search-row：常显，统计在左、搜索框在右，宽度是原来的一半（620→310）；
     3) 跑马灯搬到底部 .bottom-marquee（样式沿用 .hero-marquee，只补一条分隔线和标题）；
     4) 搜索结果页 .search-view：来源直达 + 收藏命中 + 我自己的内容。
   ⚠️ 首屏公式（12vh/-70 那套）是历史上一轮轮量出来的，这次只改「上留白」这一类
      整体位移，不动标题本身的大小和渐变；改完要重新量一遍标题中心百分比。
   =========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 1. 首屏整体往上压一档 ---------------------------------------------------- */
.hero {
  padding: clamp(0.35rem, calc(5vh - 28px), 2rem) 0 clamp(0.2rem, 0.6vw, 0.45rem);
}

.hero .eyebrow {
  margin-top: clamp(0.5rem, calc(7vh - 42px), 3rem);
}

.hero-cn {
  margin-top: 0.5rem;
}

/* 2. 统计行：搜索框 2026-09-27 搬到顶栏中间之后，这一行只剩「已整理 N 个网站」
      那颗胶囊（仍然正好占一格大模块卡，和第一张卡左对齐）。 ------------------- */
.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 auto clamp(0.9rem, 1.8vw, 1.5rem);
}

.search-row .hero-stats {
  margin: 0;
}

/* 3. 大模块：卡片压矮、图标压小，一屏能看到更多 ---------------------------- */
.module-home {
  margin: clamp(0.9rem, 2vw, 1.3rem) auto clamp(1.8rem, 4vw, 2.6rem);
}

@media (min-width: 1024px) {
  .hero {
    padding: clamp(0.35rem, calc(5vh - 28px), 2rem) 0 clamp(0.7rem, 1.2vw, 1.05rem);
  }

  .social-links {
    margin-top: clamp(0.85rem, 1.5vw, 1.3rem);
  }

  .module-home {
    margin: 1.1rem auto 2.6rem;
  }

  .module-grid {
    gap: 0.85rem;
  }

  .module-card {
    min-height: 9rem;
    padding: 1.05rem;
    border-radius: 22px;
  }

  .module-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 15px;
    font-size: 1.05rem;
  }

  .module-name {
    margin-top: 0.55rem;
    font-size: 1.06rem;
  }

  .module-card-description {
    max-width: 32ch;
    margin-top: 0.4rem;
    font-size: 0.84rem;
    line-height: 1.55;
  }

  .module-count {
    bottom: 1.05rem;
    right: 1.05rem;
    font-size: 0.73rem;
  }
}

@media (min-width: 1600px) {
  .module-card {
    min-height: 9.4rem;
  }
}

/* 4. 跑马灯挪到最底部（除了分隔线和标题，轨道样式完全沿用） ---------------- */
.bottom-marquee {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  margin-bottom: clamp(0.5rem, 1.2vw, 0.9rem);
  padding-top: clamp(0.9rem, 2vw, 1.4rem);
  border-top: 1px solid var(--border);
}

.bottom-marquee-title {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

/* 5. 搜索结果页（参考 zip0.com：标题 → 来源 → 结果） ---------------------- */
.search-view {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 1.9rem);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.search-view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(0.5rem, 1.2vw, 0.8rem);
  border-bottom: 1px solid var(--border);
}

.search-view-copy h2 {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.search-view-summary {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.84rem;
}

.search-view-back {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.search-view-back:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  color: var(--text);
}

/* 结果页右上那两个动作：用必应搜 / 返回 */
.search-view-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.search-view-source {
  padding: 0.5rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.search-view-source:hover,
.search-view-source:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.search-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.search-block-head h3 {
  margin: 0;
  font-size: 1rem;
}

.search-block-head p {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.78rem;
}

.search-source-grid {
  display: grid;
  gap: 1rem;
}

.search-source-group-title {
  margin: 0 0 0.45rem;
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.search-source-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.7rem;
}

.search-source-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.search-source-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow);
}

.search-source-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.search-source-top strong {
  font-size: 0.95rem;
}

.search-source-tag {
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-faint);
  font-size: 0.64rem;
}

.search-source-card small {
  color: var(--text-faint);
  font-size: 0.76rem;
  line-height: 1.5;
}

.search-source-arrow {
  position: absolute;
  top: 0.65rem;
  right: 0.8rem;
  color: var(--text-faint);
  font-size: 0.85rem;
}

.search-hit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}

.search-hit {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.search-hit:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.search-hit-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-faint);
  font-size: 0.72rem;
}

.search-hit-mark {
  position: relative;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
  font-size: 0.68rem;
  font-weight: 700;
  overflow: hidden;
}

/* 搜索结果页「收藏里直接相关的网站」那一块的真图标（2026-09-27 之前只有首字母） */
.search-hit-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  background: #fff;
}
}

.search-hit-domain {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-hit-tag {
  margin-left: auto;
  padding: 0.08rem 0.34rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-faint);
  font-size: 0.64rem;
}

.search-hit-title {
  font-size: 0.95rem;
}

.search-hit-desc {
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

.search-hit-meta {
  color: var(--text-faint);
  font-size: 0.72rem;
}

.search-view-empty {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  color: var(--text-faint);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
  }

  .bottom-marquee {
    margin-top: 1rem;
    padding-top: 0.8rem;
  }

  .search-row .hero-stats {
    order: 2;
    justify-content: center;
    text-align: center;
  }

  /* 手机端顶栏放不下「站名 + 搜索 + 按钮」一整行：搜索框换到顶栏第二行通栏显示，
     位置仍在网站最上方、横向居中（Reddit / YouTube 手机端也是这个思路）。 */
  .site-header {
    flex-wrap: wrap;
    align-items: center;
  }

  /* 2026-09-27：中间那个头像删掉之后，手机端标题也往上带一档
     （搜索框搬进顶栏会占掉第二行，这里把首屏上面那段留白收回来）。
     ⚠️ 必须写在上面 6767 行那条 `.hero .eyebrow` 之后才压得住。 */
  .hero {
    padding: 0.5rem 0 0.1rem;
  }

  .hero .eyebrow {
    margin-top: 0.2rem;
  }

  .hero-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin: 0.55rem 0 0;
  }

  .search-view-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-block-head {
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* ===========================================================================
   2026-09-26 第三轮：可视化搜索结果（版本号 20260926-visual1）
   ---------------------------------------------------------------------------
   用户拿搜片.com 举例：「它的搜索非常高效、有选择性，而且可视化，
   能直接给出结果」——所以这一节做两件事：
     · 结果页第一块变成「封面 + 年份 + 类型 + 简介 + 看详情」（.search-visual*），
       封面来自 /api/visual（维基），直连 upload.wikimedia.org（CSP 已白名单）；
     · 「来源」从卡片格子改成一行一个来源（.search-source-card 改 grid 三栏：
       图标 / 名字+说明 / 打开按钮），跟搜片那排结果行的感觉一致。
   另外搜索框里「↵ 回车」换成「× 清空」（有内容才显示）。
   =========================================================================== */

/* 放大镜现在是提交按钮（原来只是个纯图标，鼠标点不了） */
.search-box-icon {
  display: inline-grid;
  padding: 0;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.search-box-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--text-faint);
  stroke-linecap: round;
  stroke-width: 1.8;
  transition: stroke 0.3s ease;
}

.search-box-icon:hover svg,
.hero-search:focus-within .search-box-icon svg {
  stroke: var(--accent);
}

/* × 清空按钮（有内容才出现） */
.search-box-clear {
  position: relative;
  z-index: 1;
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-faint);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.search-box-clear[hidden] {
  display: none;
}

.search-box-clear svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.search-box-clear:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-ink);
}

/* 「这就是你在找的」：封面 + 信息 */
.search-visual {
  display: grid;
  gap: 0.9rem;
}

.search-visual-body {
  display: grid;
}

.search-visual-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.search-visual-cover {
  width: 132px;
  height: 186px;
  border-radius: 14px;
  background: var(--surface-muted);
  object-fit: cover;
}

.search-visual-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}

.search-visual-name {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.search-visual-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.search-visual-chips span {
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 0.74rem;
}

.search-visual-desc {
  margin: 0.15rem 0 0;
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.65;
}

.search-visual-link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--accent-ink);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.search-visual-link:hover {
  text-decoration: underline;
}

.search-visual-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}

.search-visual-related-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform 170ms ease, border-color 170ms ease;
}

.search-visual-related-item:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.search-visual-related-cover {
  width: 52px;
  height: 72px;
  border-radius: 8px;
  background: var(--surface-muted);
  object-fit: cover;
}

.search-visual-related-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}

.search-visual-related-copy strong {
  overflow: hidden;
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-visual-related-copy small {
  color: var(--text-faint);
  font-size: 0.72rem;
}

/* 来源：一行一个（图标 + 名字/说明 + 打开按钮） */
.search-source-row {
  grid-template-columns: repeat(auto-fill, minmax(282px, 1fr));
  gap: 0.6rem;
}

/* 2026-10-10：卡片改成「统一尺寸」——用户反馈「字多的站会把卡片撑大」。
   做法：卡片固定高度 + 标题/说明都单行省略号，行内的图标、文字、按钮都垂直居中。
   所以不管站名多长、分类名多长，一排卡片的宽高完全一致。 */
.search-source-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  height: 4.5rem;
  padding: 0 0.85rem;
  overflow: hidden;
}

.search-source-badge {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.search-source-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}

.search-source-copy strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.9rem;
  line-height: 1.35;
}

.search-source-copy small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-faint);
  font-size: 0.75rem;
  line-height: 1.35;
}

.search-source-action {
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 「好好看」这类需要先算一个服务端令牌的站：用户在算完之前就点了，给一点「在处理」的反馈 */
.search-source-card[data-direct-search="waiting"] {
  opacity: 0.72;
  pointer-events: none;
}

.search-source-card:hover .search-source-action {
  background: var(--accent);
  color: #fff;
}

/* AI 现场找站那块（复用来源行的样式） */
.search-ai {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}

.search-ai-head {
  margin-bottom: 0.55rem;
}

.search-ai-head h3 {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
}

.search-ai-head p {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.76rem;
}

/* 播放时唱片转起来 —— 用户 2026-09-27：「做一个像网易云这种磁盘式的播放动画，能旋转的」。
   ⚠️ 用 animation-play-state 暂停，**不要**在暂停时把 animation 去掉：
   去掉会瞬间弹回 0 度（用户：「转的过程中点一下，它就恢复到正中位置了」）。 */

@keyframes search-music-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------------
   歌词（首页小组件展开后的播放器）
   行为在 lyrics-view.js 里，这里只管长相。
   ⚠️ 不要在这里写 scroll-behavior:smooth —— 自动滚动时我们用 scrollTo 显式指定
   behavior，展开那一刻要的是「瞬间对准」（auto），CSS 写死了就没法区分。
   --------------------------------------------------------------------------- */
.lyrics-scroll {
  overflow-y: auto;
  overscroll-behavior: contain; /* 滚到歌词尽头别把整个页面也带着滚 */
  scrollbar-width: thin;
  /* 上下边缘淡出，像音乐软件那种「歌词从雾里出来」的感觉 */
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.lyric-line {
  display: block;
  width: 100%;
  margin: 0.1rem 0;
  padding: 0.36rem 0.45rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--text-faint) 88%, transparent);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 560;
  line-height: 1.72;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition:
    color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 160ms ease,
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lyric-line:hover {
  color: var(--text-soft);
}

.lyric-line:focus {
  outline: none;
}

.lyric-line.is-active,
.lyric-line.is-active:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.lyric-line .lyric-line-extra {
  display: block;
  color: color-mix(in srgb, var(--text-faint) 78%, transparent);
  font-size: 0.72rem;
  font-weight: 400;
}

.lyric-line .lyric-line-text {
  display: inline;
  white-space: pre-wrap;
}

.lyric-line .lyric-line-word,
.lyric-line .lyric-line-space {
  display: inline;
}

.lyric-line .lyric-line-word {
  white-space: pre;
}

.lyric-line .lyric-line-space {
  white-space: pre-wrap;
}

.lyric-line .lyric-line-word {
  display: inline;
  color: color-mix(in srgb, var(--text-faint) 86%, transparent);
  white-space: pre;
}

.lyric-line .lyric-line-word.is-sung {
  color: var(--text);
  text-shadow: none;
}

.lyric-line .lyric-line-word.is-current {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--text) 0 var(--word-progress, 0%),
    color-mix(in srgb, var(--text-faint) 86%, transparent) var(--word-progress, 0%) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lyric-line ::selection,
.lyric-line::selection {
  background: transparent;
  color: inherit;
}

.lyric-line.is-active {
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  transform: translateY(-1px);
}

html[data-theme="dark"] .lyric-line .lyric-line-word.is-sung,
html[data-theme="dark"] .lyric-line .lyric-line-word.is-current {
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.18);
}

.lyric-line.is-near {
  opacity: 0.74;
}

.lyric-line.is-far {
  opacity: 0.42;
  filter: blur(0.7px);
}

/* 用户正在自己翻歌词时，整块略微变淡 —— 给一个「已接管滚动」的视觉反馈，
   和市面上音乐软件一致（这条纯装饰，不影响行为） */
.lyrics-scroll[data-user-scrolling="true"] .lyric-line:not(:hover) {
  opacity: 0.72;
}

/* ===========================================================================
   展开的大播放器（2026-09-29 第三十一轮）
   点首页左下角小组件的空白处滑出来；和小组件共用同一台 <audio>，不断歌。
   动画只动 transform / opacity（走合成层，不触发重排），缓动用 easeOutQuint
   —— 起步快、收尾极慢，这就是「顺滑」的来源。
   =========================================================================== */
.player-expand-scrim {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: color-mix(in srgb, #0b1020 46%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 280ms ease;
}

.player-expand-scrim[data-open="on"] {
  opacity: 1;
}

.player-expand {
  position: fixed;
  z-index: 121;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  pointer-events: none; /* 只有卡片本身可点，四周让给遮罩 */
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 260ms ease, transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.player-expand[data-open="on"] {
  opacity: 1;
  transform: none;
}

.player-expand-inner {
  pointer-events: auto;
  display: flex;
  width: min(58rem, 100%);
  max-height: min(38rem, calc(100vh - 2.4rem));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface-solid);
  box-shadow: 0 30px 80px rgba(8, 12, 24, 0.34);
}

.player-expand-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.6rem 1.15rem;
}

.player-expand-kicker {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.player-expand-close {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}

.player-expand-close:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.player-expand-close svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.player-expand-body {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  gap: 1.4rem;
  padding: 0.35rem 1.4rem 1.4rem;
}

.player-expand-left {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.player-expand-disc {
  position: relative;
  display: grid;
  width: min(16rem, 100%);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #23262d 0 18%, #14161b 19% 100%);
  box-shadow: 0 18px 44px rgba(8, 12, 24, 0.3);
}

/* 播放时慢慢转（和首页那台唱机同一套观感） */
.player-expand-disc.is-spinning {
  animation: player-expand-spin 14s linear infinite;
}

@keyframes player-expand-spin {
  to {
    transform: rotate(360deg);
  }
}

.player-expand-disc img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* 封面在唱片的「内圈」上，和首页那台唱机的画法保持一致 */
  transform: scale(0.72);
  will-change: transform;
}

.player-expand-hole {
  position: absolute;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface-solid);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-faint) 40%, transparent);
}

.player-expand-meta {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.player-expand-meta strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-expand-meta small {
  display: block;
  overflow: hidden;
  margin-top: 0.15rem;
  color: var(--text-faint);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-expand-controls {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.player-expand-step,
.player-expand-toggle {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 220ms ease;
}

.player-expand-step {
  width: 2.65rem;
  height: 2.65rem;
  color: var(--text-soft);
}

.player-expand-toggle {
  width: 3.9rem;
  height: 3.9rem;
  color: #fff;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--active-accent, var(--accent)) 82%, #fff),
    var(--active-accent, var(--accent))
  );
  box-shadow: 0 12px 30px color-mix(in srgb, var(--active-accent, var(--accent)) 28%, transparent);
}

.player-expand-step:hover:not(:disabled),
.player-expand-toggle:hover {
  transform: scale(1.045);
}

.player-expand-step:hover:not(:disabled) {
  color: var(--text);
  background: color-mix(in srgb, var(--text-faint) 12%, transparent);
}

.player-expand-toggle:hover {
  box-shadow: 0 16px 38px color-mix(in srgb, var(--active-accent, var(--accent)) 34%, transparent);
}

.player-expand-step:disabled {
  opacity: 0.4;
  cursor: default;
}

.player-expand-step svg,
.player-expand-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
  stroke: none;
}

.player-expand-toggle svg {
  width: 1.3rem;
  height: 1.3rem;
}

.player-expand-toggle .player-expand-pause-icon {
  display: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.player-expand-toggle.is-playing .player-expand-play-icon {
  display: none;
}

.player-expand-toggle.is-playing .player-expand-pause-icon {
  display: block;
}

.player-expand-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.player-expand-action {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-solid) 38%, transparent);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.player-expand-action svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.player-expand-action:hover {
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.player-expand-action.is-active {
  color: var(--active-accent, var(--accent));
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 12%, transparent);
}

.player-expand-action.is-active svg {
  fill: color-mix(in srgb, var(--active-accent, var(--accent)) 28%, transparent);
}

.player-expand-action:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.player-expand-offset {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-faint);
  font-size: 0.7rem;
  white-space: nowrap;
}

.player-expand-offset input {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--active-accent, var(--accent));
  cursor: pointer;
}

.player-expand-offset output {
  min-width: 2.9rem;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.player-expand-progress-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-faint);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.player-expand-progress {
  --range-progress: 0%;
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 1.15rem;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
}

/* BitChord 的细进度条：平时 7px、按住或悬停变到 11px，没有凸出来的圆点。
   已播部分走主题色，未播部分压得很淡，视线自然落在歌词上。 */
.player-expand-progress::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--text) 0 var(--range-progress),
    color-mix(in srgb, var(--text) 16%, transparent) var(--range-progress) 100%
  );
  transition: height 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.player-expand-progress::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

.player-expand-progress:hover::-webkit-slider-runnable-track,
.player-expand-progress.is-active::-webkit-slider-runnable-track {
  height: 11px;
}

.player-expand-progress::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
  transition: height 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.player-expand-progress::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--text);
}

.player-expand-progress::-moz-range-thumb {
  width: 0;
  height: 0;
  border: 0;
  background: transparent;
}

.player-expand-progress:hover::-moz-range-track,
.player-expand-progress:hover::-moz-range-progress,
.player-expand-progress.is-active::-moz-range-track,
.player-expand-progress.is-active::-moz-range-progress {
  height: 11px;
}

.player-expand-progress.is-loading::-webkit-slider-runnable-track {
  background:
    linear-gradient(
      100deg,
      transparent 16%,
      color-mix(in srgb, var(--text) 32%, transparent) 42%,
      transparent 68%
    ),
    linear-gradient(
      90deg,
      var(--text) 0 var(--range-progress),
      color-mix(in srgb, var(--text) 16%, transparent) var(--range-progress) 100%
    );
  background-size: 220% 100%, 100% 100%;
  animation: player-progress-sheen 1.15s linear infinite;
}

@keyframes player-progress-sheen {
  from { background-position: 140% 0, 0 0; }
  to { background-position: -90% 0, 0 0; }
}

.player-expand-note {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.74rem;
  line-height: 1.5;
  text-align: center;
}

.player-expand-lyrics {
  min-height: 0;
  padding: 0.5rem 0.2rem;
  font-size: 1.08rem;
}

.player-expand-lyrics .lyric-line {
  padding: 0.56rem 0.6rem;
  border-radius: 10px;
  font-size: 1.08rem;
  line-height: 1.62;
}

.player-expand-lyrics .lyric-line.is-active {
  font-size: 1.42rem;
}

/* 手机 / 窄屏：改成上下排（封面小一点、歌词占满剩下的高度），
   这样即使在小屏打开也还是「能滚、能点」的 */
@media (max-width: 860px) {
  .player-expand {
    padding: 0.7rem;
    place-items: center;
  }

  .player-expand-inner {
    width: min(88vw, 32rem);
    height: min(64dvh, 32rem);
    max-height: calc(100dvh - 1.4rem);
    border-radius: 20px;
  }

  .player-expand-body {
    grid-template-columns: minmax(0, 1fr);
    /* 歌词和上方播放区各占一半；上方内容多时内部自己滚。 */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.1rem 0.9rem 0.9rem;
  }

  .player-expand-left {
    display: grid;
    grid-template-columns: 8.25rem minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 0.75rem;
    row-gap: 0.42rem;
    align-content: start;
    align-items: center;
    overflow: visible;
  }

  .player-expand-disc {
    grid-column: 1;
    grid-row: 1;
    width: 5.5rem;
    height: 5.5rem;
    max-width: 100%;
    justify-self: center;
    flex: none;
  }

  .player-expand-meta {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    text-align: center;
  }

  .player-expand-controls,
  .player-expand-actions {
    grid-column: 2;
    width: 100%;
    justify-content: flex-start;
    margin-top: 0;
  }

  .player-expand-controls {
    grid-row: 1;
    align-self: end;
  }

  .player-expand-actions {
    grid-row: 2;
    align-self: start;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .player-expand-actions .player-expand-action {
    width: 100%;
    justify-content: flex-start;
  }

  .player-expand-progress-row {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0.25rem;
  }

  .player-expand-note {
    grid-column: 1 / -1;
    grid-row: 4;
    text-align: left;
  }

  .player-expand-lyrics {
    min-height: 0;
  }

  /* 手机端不做整行模糊（层数少、滚动更稳），只保留透明度和字号落差。 */
  .lyric-line.is-far {
    filter: none;
  }

  .player-expand-lyrics .lyric-line.is-active {
    font-size: 1.5rem;
  }
}

/* 系统开了「减弱动效」就直接显示，不做位移和旋转 */
@media (prefers-reduced-motion: reduce) {
  .player-expand,
  .player-expand-scrim {
    transition: none;
  }

  .player-expand {
    transform: none;
  }

  .player-expand-disc.is-spinning {
    animation: none;
  }

  .lyric-line {
    transition: none;
  }

  .player-expand-progress.is-loading::-webkit-slider-runnable-track {
    animation: none;
  }
}
/* 系统设置「减少动态效果」时唱片不转 */
@media (prefers-reduced-motion: reduce) {
  .music-dock-disc {
    animation: none;
  }
}

@media (max-width: 720px) {
  .search-visual-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.9rem;
  }

  .search-visual-cover {
    width: 96px;
    height: 136px;
  }

  .search-visual-related,
  .search-source-row {
    grid-template-columns: 1fr;
  }

  /* 手机端一列铺满，卡片再矮一点，一屏能多放两个站 */
  .search-source-card {
    height: 3.9rem;
    gap: 0.6rem;
    padding: 0 0.75rem;
  }

  .search-source-badge {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 10px;
  }

  .search-source-copy strong {
    font-size: 0.86rem;
  }
}

/* ===========================================================================
   2026-09-26 第四轮：手机端做密 + 来源图标（版本号 20260926-dense1）
   ---------------------------------------------------------------------------
   用户原话：「电脑端排版我很满意，一到手机端就不好看了。手机端主打一个密集嘛，
   电脑端主打一个好看嘛」——参考 pmbaobao.com 的移动端：**没有大首屏**，
   顶栏一行、搜索一行，然后直接铺两列小卡片，一屏能看到好几行。
   所以这里（只在 ≤720px）：
     · 顶栏压成一行（站名小一档、按钮 2.35rem、teto 并排）；
     · 首屏那个两层大标题缩成一条品牌行（头像 3.1rem、字 ~24px、社交只留图标）；
     · 大模块卡两列、矮、说明最多两行；
     · 模块内容里的书签卡也两列（小尺寸三列），说明两行封顶、标签藏起来；
     · 搜索行 / 结果页 / 页脚整体各压一档。
   电脑端（≥1024px）一个字节都不动。
   =========================================================================== */

/* 收藏来源的图标：盖在首字母徽章上，加载不出来就留首字母 */
.search-source-badge {
  position: relative;
  overflow: hidden;
}

.search-source-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--surface-solid);
  object-fit: contain;
}

.search-source-foot {
  display: flex;
  margin-top: 0.5rem;
}

.search-source-foot button {
  padding: 0.34rem 0.7rem;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.search-source-foot button:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ===========================================================================
   2026-09-26 第六轮：壁纸（在线 / 动态 / 上传）+ 字体自适应 + 设置面板
   ---------------------------------------------------------------------------
   用户要的四件事：①换了壁纸字看不清、有重影 → 做自适应；②支持动态背景；
   ③直接调用 haowallpaper.com 的壁纸；④搜索框做成透明玻璃。
   另外左下角那个「快捷添加网站」按用户要求换成「设置」，设置里第一块是壁纸。
   --------------------------------------------------------------------------- */

/* 1. 动态壁纸：固定铺满整个视口，压在内容下面（液体画布更靠后） */
.wallpaper-video {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 完整显示（contain）时上下/左右露出来的地方垫这张壁纸的平均色 */
  background: var(--wallpaper-backdrop, transparent);
  pointer-events: none;
}

/* 壁纸和屏幕比例差太多时（典型：竖屏手机壁纸放到电脑上），app.js 会把
   data-wallpaper-fit 设成 contain —— 完整显示，不切人；露出来的边用平均色垫。
   用户 2026-09-26：「壁纸应用时不是全屏的，感觉上面那一部分被裁切了」。 */
/* contain 模式分三层：最底下是「同一张图模糊铺满」当衬底（比一条纯色带好看），
   上面盖「完整、不裁切」的高清图，再上面才是遮罩和内容。 */
.wallpaper-still {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: none;
  background-image: var(--site-background-image, none);
  background-position: var(--wallpaper-position, center);
  background-repeat: no-repeat;
  background-size: var(--wallpaper-size, contain);
  pointer-events: none;
}

/* ⚠️ 「完整显示」那张高清图只在**背景真的在显示**时才铺出来。
   少了前面那个条件，访客在「纯色」模式下也会看到背景图冒出来
   （2026-09-26 做显示调整时发现的：JS 会在后台算好摆放尺寸备用）。 */
html[data-background-mode="custom"][data-wallpaper-fit="contain"] .wallpaper-still {
  display: block;
}

html[data-wallpaper-fit="contain"] body::before {
  z-index: -4;
  background-color: var(--wallpaper-backdrop, transparent);
  background-image: var(--wallpaper-blur-source, var(--site-background-image, none));
  background-position: center;
  background-size: cover;
  filter: blur(30px) saturate(115%);
  transform: scale(1.15);
}

html[data-wallpaper-fit="contain"] .wallpaper-video {
  z-index: -3;
  object-fit: contain;
}

html[data-wallpaper-video="on"] .liquid-stage {
  display: none;
}

/* 2. 字体自适应：有壁纸时换一套遮罩 + 卡片更实 + 标题加投影。
      scrim 的浓度由 app.js 采样壁纸亮度算出来（--wallpaper-scrim / -strong）。 */
html[data-wallpaper="on"] {
  /* 三层：①用户自己拉的深色遮罩（设置里那个 1~100，默认 0 等于没有）；
           ②很薄的整幅遮罩（保证最刺眼的地方不糊字）；③一圈很淡的暗角 ——
     壁纸中间鲜艳、四周收一点，画面才有「层次」而不是平铺一张图。
     用户 2026-09-26：「背景很通透、很鲜艳、看起来很有层次」。 */
  --page-overlay:
    linear-gradient(var(--wallpaper-veil, rgba(13, 17, 23, 0)), var(--wallpaper-veil, rgba(13, 17, 23, 0))),
    radial-gradient(135% 105% at 50% 0%, transparent 52%, rgba(13, 17, 23, 0.16) 100%),
    linear-gradient(
      var(--wallpaper-scrim, rgba(247, 245, 240, 0.3)),
      var(--wallpaper-scrim-strong, rgba(247, 245, 240, 0.72)) 58%,
      var(--wallpaper-scrim-strong, rgba(247, 245, 240, 0.72))
    );
  /* 卡片那层毛玻璃原来是 58%→24% 的白（暗色主题是 6%→1.5%），
     压花壁纸时会「透」得字发虚 —— 有壁纸时把底衬加实一档，
     只影响有壁纸的情况，没壁纸时一个字节都不变。
     ⚠️ 2026-09-27：原来那档是 0.88→0.7，用户反馈「每个小模块的背景怎么变成
     不透明的了」—— 太实了，现在压回 0.62→0.4：还是比没壁纸时稳，但能看见壁纸。 */
  --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.4));
  --glass-border: rgba(255, 255, 255, 0.72);
}

/* 壁纸本身再「鲜」一点：稍微提饱和 + 一点点对比，缩略图那种灰扑扑的感觉就没了。
   ⚠️ 必须排除 contain 模式 —— 那种情况下 body::before 是「模糊衬底」，
   它自己的 filter 写在上面那条规则里，别被这里盖掉（盖掉就成了清晰图，看着像两张纸叠在一起）。 */
html[data-wallpaper="on"]:not([data-wallpaper-fit="contain"]) body::before {
  filter: saturate(114%) contrast(1.03);
}

/* 「自己上传的图」：用户要的是「比我原图更鲜艳更清晰」——
   遮罩几乎取消（见下面的 --page-overlay 覆盖），这里再把亮度/饱和/对比提一档，
   把「洗白感」拉回来。整数倍地提一点对比，肉眼看就是「更锐」。 */
html[data-wallpaper="on"][data-background-kind="upload"]:not([data-wallpaper-fit="contain"]) body::before {
  filter: saturate(118%) contrast(1.06) brightness(1.02);
}

/* 完整显示（contain）时露出来的高清图在 .wallpaper-still 上，也要跟着提一档 */
html[data-wallpaper="on"][data-background-kind="upload"][data-wallpaper-fit="contain"] .wallpaper-still {
  filter: saturate(118%) contrast(1.06) brightness(1.02);
}

html[data-wallpaper="on"][data-background-kind="upload"][data-wallpaper-fit="contain"] .wallpaper-video {
  filter: saturate(118%) contrast(1.06) brightness(1.02);
}

/* 上传的图不要那圈暗角：它会让人觉得「怎么这么暗」。
   所以这里只把上面那条「暗角 + 遮罩」里的暗角去掉，遮罩本身仍旧用 app.js
   按这张图算出来的 --wallpaper-scrim（上传图那套参数已经压得很薄：
   亮色最低 2% 最高 14%、暗色最低 22% 最高 50%）。
   ⚠️ 别在这里写死一个浅色/深色的 rgba —— 写死了另一边主题就会反过来糊上一层
   白雾（暗色主题配白遮罩 = 用户最讨厌的那种「白蒙蒙」）。 */
html[data-wallpaper="on"][data-background-kind="upload"] {
  --page-overlay: linear-gradient(
      var(--wallpaper-veil, rgba(13, 17, 23, 0)),
      var(--wallpaper-veil, rgba(13, 17, 23, 0))
    ),
    linear-gradient(
      var(--wallpaper-scrim, rgba(247, 245, 240, 0.3)),
      var(--wallpaper-scrim-strong, rgba(247, 245, 240, 0.72)) 58%,
      var(--wallpaper-scrim-strong, rgba(247, 245, 240, 0.72))
    );
}

html[data-wallpaper-video="on"] .wallpaper-video {
  filter: saturate(114%) contrast(1.03);
}

html[data-theme="dark"][data-wallpaper="on"] {
  --glass-bg: color-mix(in srgb, #141416 88%, transparent);
}

/* 壁纸图案很花（明暗跨度大）时，搜索 / 收藏那类卡片直接做实色底。 */
html[data-wallpaper="on"][data-wallpaper-busy="busy"] {
  --surface: var(--surface-solid);
}

/* 卡片本身的底其实不走 --glass-bg，而是被这两条老规则写死了：
     电脑亮色：linear-gradient(白 52% → 22%)   手机亮色：rgba(255,255,255,0.72)
   没壁纸时这样很好看；一压壁纸，字就跟着壁纸一起花（手机端还没有毛玻璃兜底，
   实测「载」那张卡里能看到壁纸的笔画）。所以「有壁纸」时单独给一档更实的底：
     电脑保留一点玻璃感（底色 0.88→0.72，仍有 blur），手机直接做实底。 */
html[data-wallpaper="on"][data-theme="light"] .module-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.4));
}

@media (max-width: 720px) {
  html[data-wallpaper="on"] {
    --glass-border: color-mix(in srgb, var(--border) 80%, transparent);
  }

  html[data-wallpaper="on"][data-theme="light"] .module-card {
    /* 原来是纯实底（怕字跟着壁纸花）；2026-09-27 用户说「背景怎么变成不透明的
       了」—— 改成 88%，壁纸能透出来一点点，字照样压在实底上。
       ⚠️ 只改透明度，**别加 backdrop-filter**：手机端加了 blur，卡片底部会
       透出壁纸的笔画（2026-09-26 实测踩过）。 */
    background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
  }

  html[data-wallpaper="on"][data-theme="dark"] .module-card {
    background: color-mix(in srgb, #161b22 92%, transparent);
  }
}

/* 有壁纸时标题发光的加强版写在上面《「INFORMATION GAP」的霓虹灯光》那一节里 ——
   四层光 + 亮暗主题必须成套看，别在这一带再加一条（特异性容易互相打架，踩过）。 */
html[data-wallpaper="on"] .hero .eyebrow,
html[data-wallpaper="on"] .hero-cn {
  /* 小字原来是浅灰（--text-soft），叠在花壁纸上就「看不清」；
     有壁纸时统一用正文色，配合 --text-soft → --text 的深浅在两个主题下都对：
     亮色主题是深墨字、暗色主题是浅字。 */
  color: var(--text);
  /* ⛔ 不要白晕！用户 2026-09-26 明确否掉「周围发白光」。
     这里只在字下面压一条很紧的深色投影（1px、低透明度）——
     看上去是字自己的厚度，不是一圈光。 */
  text-shadow: 0 1px 1px rgba(13, 17, 23, 0.28);
}

html[data-wallpaper="on"] .hero-stats {
  /* 遮罩压到很薄之后，这行小字（自己只有 4.5% 黑底）会直接贴在壁纸上。
     整页不再加厚，改成只给这个小胶囊一块很淡的玻璃 —— 大画面保持通透，
     小字有自己的底，实测移动端最差对比度从 1.26:1 提到 4:1 以上。 */
  background: color-mix(in srgb, var(--surface-solid) 48%, transparent);
  backdrop-filter: blur(10px);
  text-shadow: none;
}

/* 暗色主题下统计条那行小字原本是 --text-soft（实测只有 4.06:1，偏低），
   有壁纸时提到正文色，实测升到 5.5:1 以上。 */
html[data-theme="dark"][data-wallpaper="on"] .hero-stats {
  color: var(--text);
}

/* 暗色主题的小字是浅色，投影也跟着换成深色（同样是「自己的厚度」，不是光） */
html[data-theme="dark"][data-wallpaper="on"] .hero .eyebrow,
html[data-theme="dark"][data-wallpaper="on"] .hero-cn {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* 3.5 侧边目录：用户 2026-09-26 反馈「侧边栏的文字灰灰的，不是很明显」。
   没壁纸时目录直接坐在浅底上（--text-soft 够用），压在花壁纸上就不行了：
   文字提到正文色，手机端是抽屉（本来就有底色）不受影响，
   电脑端常驻那一栏加一层很淡的玻璃，字立住但不抢壁纸。 */
html[data-wallpaper="on"] .site-nav-item {
  color: var(--text);
}

html[data-wallpaper="on"] .site-nav-item .site-nav-count,
html[data-wallpaper="on"] .site-nav-icon,
html[data-wallpaper="on"] .site-nav-title,
html[data-wallpaper="on"] .page-toc-title {
  color: var(--text-soft);
}

@media (min-width: 1200px) {
  html[data-wallpaper="on"] .site-nav {
    border-color: var(--desktop-nav-border);
    background: var(--desktop-nav-bg);
    box-shadow: 0 12px 32px rgba(20, 41, 77, 0.055);
    backdrop-filter: none;
  }
}

/* 注意两条：
   ① **不要**给 .module-card 再加 backdrop-filter —— 它自己本来就有一条 blur(18px)，
      手机端那条 `backdrop-filter: none` 是特意关掉的（关掉才不糊）。
   ② **不要**给 .site-header 加 backdrop-filter —— 顶栏自己没有底色，
      只模糊背景的结果就是页面最顶上多出一条「糊掉的横杠」
      （用户 2026-09-26 第一句就是「网站最顶部有一个不透明的横条，把它去掉」）。 */
html[data-wallpaper="on"] .collection-panel,
html[data-wallpaper="on"] .toolbar,
html[data-wallpaper="on"] .search-source-card,
html[data-wallpaper="on"] .search-hit,
html[data-wallpaper="on"] .search-visual-card,
html[data-wallpaper="on"] .bookmark-card {
  backdrop-filter: blur(14px) saturate(120%);
}

/* 3. 搜索框：透明玻璃 */
.search-box {
  background: color-mix(in srgb, var(--surface-solid) 58%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    0 12px 30px rgba(16, 24, 40, 0.12);
}

html[data-theme="dark"] .search-box {
  background: color-mix(in srgb, #161b22 52%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
    0 12px 30px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-27：有壁纸时的显示修正（用户连着报了三条）
   ---------------------------------------------------------------------------
   ① 「小分类的字有重影、看着变粗了」：根因是基础样式给小字套了一层
      `text-shadow: 0 1px 0 rgba(255,255,255,.8)`（白影）—— 白影叠在灰字上就是
      双影/加粗的观感。有壁纸时换成一层很紧的深色暗影（和首屏小字同一套），
      字反而更利落。
   ② 「卡片背景变不透明了」：见上面 --glass-bg 与 .module-card 的两条（已压薄）。
   ③ 「搜索框颜色非常难看」：58% 白 + blur 压在花壁纸上像一块蒙了雾的塑料板，
      压到 30%，让它透出壁纸本身的颜色。
   ⚠️ 这一段的顺序必须在这几条基础规则之后（同样是 (0,2,1)，靠顺序生效）。
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-wallpaper="on"] .hero-copy,
html[data-wallpaper="on"] .module-description,
html[data-wallpaper="on"] .section-description,
html[data-wallpaper="on"] .module-card-description,
html[data-wallpaper="on"] .view-hint,
html[data-wallpaper="on"] .result-count,
html[data-wallpaper="on"] .module-count,
html[data-wallpaper="on"] .bookmark-description,
html[data-wallpaper="on"] .bookmark-domain,
html[data-wallpaper="on"] .section-count {
  color: var(--text);
  text-shadow: 0 1px 2px rgba(13, 17, 23, 0.35);
}

/* 模块页顶上那张「模块内容」工具条原来是 80% 的实底，压薄一档 */
html[data-wallpaper="on"] .toolbar {
  background: color-mix(in srgb, var(--bg-strong) 58%, transparent);
}

html[data-wallpaper="on"] .search-box {
  background: color-mix(in srgb, var(--surface-solid) 22%, transparent);
  backdrop-filter: blur(24px) saturate(165%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent),
    0 14px 34px rgba(16, 24, 40, 0.16);
}

html[data-theme="dark"][data-wallpaper="on"] .search-box {
  background: color-mix(in srgb, #161b22 34%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #ffffff 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
    0 14px 34px rgba(0, 0, 0, 0.45);
}

/* 「灯泡」问题（2026-09-28 用户报的）：
   有壁纸时 .search-box 的底色压到了 22% 透明，可中间那块「芯」还是
   100% 实心的 var(--surface-solid) —— 于是框正中浮出一块白亮斑，像灯泡。
   把芯压到和框一样的透明度，光就只剩贴着边缘那一圈（芯照样盖住中间的光，
   只是不再自己发亮）。 */
html[data-wallpaper="on"] .search-box-beam-core {
  background: color-mix(in srgb, var(--surface-solid) 22%, transparent);
  filter: blur(6px);
}

/* 页面最底部那排跑马灯大字：原来是 38% 墨色，压在壁纸上基本看不见
   （用户 2026-09-27：「选择自定义壁纸之后，最底下的跑马灯字体基本上都看不见」） */
html[data-wallpaper="on"] .hero-marquee-chip {
  color: var(--text);
  text-shadow: 0 1px 2px rgba(13, 17, 23, 0.35);
}

html[data-wallpaper="on"] .hero-marquee-sep {
  color: color-mix(in srgb, var(--text) 45%, transparent);
}

html[data-wallpaper="on"] .bottom-marquee-title {
  color: var(--text-soft);
}

/* ---------------------------------------------------------------------------
   深色背景图下的可读性（2026-09-28 用户报的）
   ---------------------------------------------------------------------------
   用户原话：「我换了一个深颜色的背景图（灰色或者黑色）…跑马灯的文字不太明显了…
   点开模块后小模块中的文字因为原本是黑色的，也显示得不清楚…只要页面中有文字
   是黑色的，就会因为黑色背景图的原因显示不明显」。
   根因：自定义背景走的是**亮色外观**（黑字 + 白玻璃卡），压在深色照片上就看不见。
   app.js 采样壁纸平均亮度时会写 data-wallpaper-tone="dark"（< 128 算深色），
   这里就把整套文字 / 玻璃变量换成暗色版 —— 不动主题、不动液态、不动壁纸本身，
   只让字和卡片在深图上立住。
   --------------------------------------------------------------------------- */
html[data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="light"] {
  --text: #f3f6fa;
  --text-soft: #d5dce6;
  --text-faint: #aab4c2;
  --border: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --bg-strong: #141416;
  --surface: rgba(20, 20, 22, 0.66);
  --surface-solid: #141416;
  --surface-muted: rgba(255, 255, 255, 0.07);
  --glass-bg: rgba(20, 20, 22, 0.72);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-highlight: transparent;
  --glass-shadow: 0 14px 40px rgba(0, 0, 0, 0.36);
}

/* 模块卡：电脑端那条写死了白玻璃（特异性比 --glass-bg 高），这里单独压掉 */
html[data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="light"] .module-card {
  background: linear-gradient(145deg, rgba(20, 20, 22, 0.72), rgba(20, 20, 22, 0.5));
}

/* 「BREAK THE」那行小字原本是 #6b7688，深图上偏暗 */
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .hero h1.hero-display span {
  color: #c6cfdc;
}

/* 深色壁纸上的文字投影：浅字配深影才立得住（亮色那条是白影，压在深图上会发糊） */
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .hero-copy,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .module-description,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .section-description,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .module-card-description,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .view-hint,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .result-count,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .module-count,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .bookmark-description,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .bookmark-domain,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .section-count,
html[data-wallpaper="on"][data-wallpaper-tone="dark"] .hero-marquee-chip {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* 4. 左下角原来那个「设置」浮动按钮已经删掉（2026-09-27 挪进左上角头像的面板里，
      样式是 .sidebar-tools / .sidebar-tool，见《设置面板》那一节上面的注释）。 */

/* 5. 设置面板 */
.settings-scrim {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(12, 16, 28, 0.4);
  backdrop-filter: blur(2px);
}

.settings-panel {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  z-index: 89;
  display: flex;
  width: min(32rem, calc(100vw - 2.2rem));
  max-height: min(78vh, 44rem);
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem 1.2rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-solid);
  box-shadow: 0 28px 80px rgba(12, 16, 28, 0.32);
}

.settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.settings-head h2 {
  margin: 0.15rem 0 0;
  font-size: 1.35rem;
}

.settings-close {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 1rem;
}

.settings-block {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 16px;
}

.settings-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.settings-block h3 {
  margin: 0;
  font-size: 1rem;
}

.settings-current {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.76rem;
  text-align: right;
}

.settings-tabs {
  display: flex;
  gap: 0.35rem;
}

.settings-tab {
  padding: 0.36rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.settings-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
  font-weight: 650;
}

.settings-tabpanel {
  display: grid;
  gap: 0.6rem;
}

.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.55rem;
  min-height: 4rem;
}

/* 在线壁纸的两档来源（4K 高清 / 动态壁纸）——2026-09-26 加 */
.wallpaper-source {
  display: flex;
  gap: 0.35rem;
}

.wallpaper-source-button {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.wallpaper-source-button.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
  font-weight: 650;
}

.wallpaper-source-link {
  display: inline-block;
  margin-left: 0.35rem;
}

.wallpaper-grid[aria-busy="true"]::after {
  color: var(--text-faint);
  content: "…";
  font-size: 0.9rem;
  grid-column: 1 / -1;
}

.wallpaper-card {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 0.35rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.wallpaper-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: var(--surface-muted);
  object-fit: cover;
}

.wallpaper-card.is-poster-loading img {
  background: linear-gradient(110deg, var(--surface-muted) 8%, var(--surface-solid) 18%, var(--surface-muted) 33%);
  background-size: 200% 100%;
  animation: wallpaper-poster-shimmer 1.2s linear infinite;
}

.wallpaper-card.is-unavailable {
  cursor: not-allowed;
  opacity: 0.58;
}

.wallpaper-card.is-unavailable:hover {
  border-color: var(--border);
  transform: none;
}

@keyframes wallpaper-poster-shimmer {
  to { background-position: -200% 0; }
}

.wallpaper-card-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.68rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wallpaper-card-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(12, 16, 28, 0.62);
  color: #fff;
  font-size: 0.62rem;
}

.wallpaper-card:hover,
.wallpaper-card.is-busy {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-2px);
}

/* 收藏（2026-09-27 用户要的「在线壁纸收藏」）：卡片右上角那颗 ★。
   ★ 必须是卡片这个 <button> 的兄弟节点，所以外面套了一层 .wallpaper-cell。 */
.wallpaper-cell {
  position: relative;
  display: block;
}

.wallpaper-fav {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 16, 28, 0.52);
  color: #fff;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease, color 160ms ease;
}

.wallpaper-fav:hover,
.wallpaper-fav:focus-visible {
  background: rgba(12, 16, 28, 0.78);
  transform: scale(1.06);
}

.wallpaper-fav.is-on {
  color: #ffd166;
}

/* 星星本身只有 27px，手机上点着费劲 —— 用一层看不见的伪元素把可点范围撑到 ~45px
   （视觉大小不变） */
.wallpaper-fav::after {
  position: absolute;
  inset: -0.55rem;
  content: "";
}

.wallpaper-pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ===========================================================================
   壁纸面板：一页式排版 + 搜索 / 分类 / 色系 / 页码（2026-09-29）
   用户要求：「在线壁纸 / 上传壁纸 / 恢复默认放一页就行，排版要清晰明了」。
   所以三块竖着排，各自一个小标题 + 分隔线，不再切页签。
   =========================================================================== */
.wallpaper-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.wallpaper-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.wallpaper-section-title {
  margin: 0;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.wallpaper-filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-muted) 60%, transparent);
}

.wallpaper-search {
  display: flex;
  gap: 0.45rem;
}

.wallpaper-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
}

.wallpaper-search input:focus-visible {
  outline: 2px solid var(--active-accent, var(--accent));
  outline-offset: 1px;
}

.wallpaper-search button,
.wallpaper-jump button {
  flex: 0 0 auto;
  padding: 0.32rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--active-accent, var(--accent)) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 13%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.wallpaper-filter-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.wallpaper-filter-label {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 0.72rem;
}

.wallpaper-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.wallpaper-chip {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.wallpaper-chip:hover {
  color: var(--text);
}

.wallpaper-chip.is-active {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 16%, transparent);
  color: var(--text);
  font-weight: 650;
}

.wallpaper-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.wallpaper-color {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text-faint) 45%, transparent);
  border-radius: 50%;
  background: var(--swatch, transparent);
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 140ms ease;
}

.wallpaper-color:hover {
  transform: scale(1.14);
}

.wallpaper-color.is-active {
  box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--active-accent, var(--accent));
}

.wallpaper-color.is-any {
  width: auto;
  height: auto;
  padding: 0.2rem 0.58rem;
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.72rem;
}

/* 页码：当前页前后各两页 + 首末页，中间用 … 省略 */
.wallpaper-pages {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.wallpaper-page-number {
  min-width: 1.85rem;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.wallpaper-page-number:hover {
  color: var(--text);
}

.wallpaper-page-number[aria-current="page"] {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 16%, transparent);
  color: var(--text);
  font-weight: 700;
}

.wallpaper-pages-gap {
  color: var(--text-faint);
  font-size: 0.74rem;
}

/* 「跳转到 __ 页」 */
.wallpaper-jump {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-faint);
  font-size: 0.72rem;
}

.wallpaper-jump input {
  width: 3.6rem;
  padding: 0.26rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
}

.wallpaper-page-button {
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.wallpaper-page-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.wallpaper-page-label {
  color: var(--text-faint);
  font-size: 0.76rem;
}

.settings-row {
  display: flex;
  gap: 0.5rem;
}

.settings-input,
.settings-file {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}

/* 文件框里那个原生「选择文件」按钮：不统一的话它在手机上会撑得很宽，
   把旁边的「上传并应用」顶出面板（用户 2026-09-27 报的）。 */
.settings-file::file-selector-button {
  margin-right: 0.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.settings-primary {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.settings-primary:hover {
  filter: brightness(1.05);
}

.settings-hint {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.74rem;
  line-height: 1.5;
}

.settings-hint a {
  color: var(--accent-ink);
  text-decoration: underline;
}

/* 2026-09-27：原来这里是「解锁管理员密码」那块，用户要求去掉密码，只留一句说明 */
.settings-lock-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
}

.settings-lock-note strong {
  color: var(--text);
  font-size: 0.78rem;
}

.settings-message {
  margin: 0;
  min-height: 1.1rem;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.settings-message[data-tone="error"] {
  color: var(--danger);
}

.settings-message[data-tone="success"] {
  color: var(--accent-ink);
}

.settings-message[data-tone="warn"] {
  color: #b26a00;
}

@media (max-width: 720px) {
  .settings-panel {
    right: 0.6rem;
    left: 0.6rem;
    bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 86vh;
  }

  /* 「上传并应用」在手机上原来是和文件框挤一行，窄屏会被顶出面板：
     改成上下两行，按钮拉满一行（用户 2026-09-27：「超出了屏幕外」）。 */
  .settings-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-row .settings-primary {
    width: 100%;
  }

  .settings-file {
    width: 100%;
    font-size: 0.8rem;
  }

  /* 手机端「壁纸」标题和右边那行「当前：xxx（只有你自己看得到）」挤一行时，
     标题会被压成竖排两个字（实测截图）。窄屏改成上下两行。 */
  .settings-block-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .settings-current {
    text-align: left;
  }

  .wallpaper-grid {
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  }
}

/* ===========================================================================
   2026-09-26 第七轮：背景「显示调整」（设置 → 上传图片 下面那块）
   ---------------------------------------------------------------------------
   用户要的：①壁纸压暗开关；②深色遮罩开关 + 1~100 的进度条；
   ③「我上传的图原本那么大，上传到网站之后就被放大了，看不到原貌」——
     所以加完整显示/填满、缩放、拖动位置，而且预览框所见即所得。
   --------------------------------------------------------------------------- */
.settings-adjust {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.settings-adjust-head {
  display: grid;
  gap: 0.12rem;
}

.settings-adjust-head h4 {
  margin: 0;
  font-size: 0.9rem;
}

.settings-adjust-image {
  display: grid;
  gap: 0.5rem;
}

/* 预览框：形状跟着用户屏幕走（JS 写 aspect-ratio），摆法和真实背景同一套算法 */
.wallpaper-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  cursor: grab;
  /* 手机上按住拖动不能变成滚页面（和后台排序把手同一个道理） */
  touch-action: none;
}

.wallpaper-stage.is-dragging {
  cursor: grabbing;
}

/* 「自动压暗」那一层：浓度实时读 CSS 变量，和真实背景一致 */
.wallpaper-stage::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--stage-scrim, transparent);
  content: "";
  pointer-events: none;
}

.wallpaper-stage img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.wallpaper-stage-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgb(13, 17, 23);
  opacity: 0;
  pointer-events: none;
}

.wallpaper-stage-badge {
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  z-index: 4;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: rgba(12, 16, 28, 0.62);
  color: #fff;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.settings-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-field-label,
.settings-slider-label {
  color: var(--text-soft);
  font-size: 0.78rem;
}

.settings-seg {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
}

.settings-seg-button {
  padding: 0.28rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.settings-seg-button.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-ink);
  font-weight: 650;
}

/* 主题颜色（2026-09-27）：背景主题那一排按钮换行排 + 强调色的色块 */
.settings-seg-wrap {
  margin-left: 0;
  flex-wrap: wrap;
}

.settings-field-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
}

.settings-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.settings-swatch {
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 50%;
  background: var(--swatch, var(--surface-muted));
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.settings-swatch:hover,
.settings-swatch:focus-visible {
  transform: scale(1.1);
}

.settings-swatch.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 24%, transparent);
}

.settings-swatch-text {
  width: auto;
  min-width: 1.9rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
}

.settings-swatch-text.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* 自定义色板（2026-09-28 用户：「放一个可以自定义颜色的色板，包括黑色和白色」）：
   默认收起的 <details>，展开后是 预览 + 色相/浓淡/明暗 + 颜色代码。 */
.settings-palette {
  margin-top: 0.45rem;
}

.settings-palette > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 650;
  list-style: none;
}

.settings-palette > summary::-webkit-details-marker {
  display: none;
}

.settings-palette > summary::before {
  content: "＋";
  font-size: 0.8rem;
  line-height: 1;
}

.settings-palette[open] > summary::before {
  content: "－";
}

.settings-palette-body {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
}

.settings-palette-preview {
  height: 1.6rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--palette-color, transparent);
}

.settings-palette-preview[data-empty="on"] {
  background-image: repeating-linear-gradient(
    45deg,
    var(--border) 0 6px,
    transparent 6px 12px
  );
}

.settings-palette-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--text-soft);
}

.settings-palette-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* 色相那条给一道彩虹底，拖的时候能看出会变什么色 */
.settings-palette-row input[type="range"][data-palette-hue] {
  accent-color: auto;
}

.settings-palette-hex {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--text-soft);
}

.settings-palette-hex input {
  width: 100%;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-solid);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
}

.settings-accent-custom {
  margin-top: 0.1rem;
}

.settings-accent-custom input[type="color"] {
  width: 3.1rem;
  height: 1.9rem;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: none;
  cursor: pointer;
}

.settings-slider {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.settings-slider input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.settings-slider-value {
  min-width: 2.6rem;
  color: var(--text-soft);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.settings-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.settings-switch-copy {
  display: grid;
  gap: 0.1rem;
}

.settings-switch-copy strong {
  font-size: 0.82rem;
  font-weight: 620;
}

.settings-switch-copy small {
  color: var(--text-faint);
  font-size: 0.7rem;
}

/* 开关：原生 checkbox 藏在上面（可点、可聚焦、可键盘操作），外观自己画 */
.settings-switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  width: 2.6rem;
  height: 1.5rem;
  cursor: pointer;
}

.settings-switch input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.settings-switch-ui {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-muted);
  transition: background 180ms ease;
}

.settings-switch-ui::after {
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(12, 16, 28, 0.3);
  content: "";
  transition: transform 180ms ease;
}

.settings-switch input:checked + .settings-switch-ui {
  border-color: transparent;
  background: var(--accent);
}

.settings-switch input:checked + .settings-switch-ui::after {
  transform: translateX(1.1rem);
}

.settings-switch input:focus-visible + .settings-switch-ui {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 动态壁纸（视频）没法拖位置、也没法缩放：把预览那几行收起来，只留两个开关 */
html[data-wallpaper-video="on"] .settings-adjust-image {
  display: none;
}

@media (max-width: 720px) {
  .settings-field {
    flex-wrap: wrap;
  }

  .settings-seg {
    margin-left: 0;
  }
}

/* ===========================================================================
   2026-09-26 第八轮：对齐 + 长度一致（版本号 20260926-align1）
   ---------------------------------------------------------------------------
   用户原话：「我希望你能在自定义上传图片的下面增添…」之外，这一轮是排版对齐：
     ·「这两个按钮（哔哩哔哩 / X）现在是靠右放的，我想让你直接移到左边，
        和下面『已整理 657 个网站』的按钮左对齐」；
     ·「电脑端右上角那三个按钮都没有靠右边」；
     ·「搜索框的长度和底下的模块长度不一致」；
     · 手机端：「两个按钮做得太大了，做小一点」「搜索框太长了」。

   根因（改之前实测，1920 宽）：
     · 顶栏 / 页脚用的是自己的 --max-width（1380），而左右两栏的 .page-shell 是 1620，
       所以右上三个按钮停在 1650、比右侧那栏的右边缘（1770）缩进去 120px —— 看着「没靠右」；
     · 首屏在 ≥1024 是两列网格（.hero），社媒块被放在第 1 列且 justify-self:end，
       于是缩在偏左的位置、和下面的统计胶囊（贴内容区左边缘）对不齐；
     · 搜索框是写死的 min(50%, 310px)，而大模块卡片一格是 287px（4 列 / gap 0.85rem），
       两者左右两条边都差着一截。
   =========================================================================== */

@media (min-width: 1200px) {
  :root {
    --rail-width: 288px;
  }

  .page-shell {
    width: 100%;
    margin: 0;
    padding-top: 14px;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    gap: 0;
  }

  /* 左栏固定贴屏幕左边，高度从顶部 14px 一直延伸到视口底部。 */
  .site-nav {
    position: fixed;
    top: 14px;
    left: 0;
    z-index: 24;
    width: var(--rail-width);
    height: calc(100dvh - 28px);
    min-height: 0;
    padding: 10px 10px 10px 12px;
    border: 0;
    border-right: 1px solid var(--desktop-nav-border);
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .page-shell > main {
    grid-column: 2;
    min-height: calc(100dvh - 28px);
    margin: 0 14px 0 0;
    padding: 52px 1.25rem 1.5rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-solid);
  }

  /* 桌面端只保留右上角控件。 */
  .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--rail-width);
    width: auto;
    margin: 0;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 30;
    pointer-events: none;
  }

  .header-actions {
    pointer-events: auto;
  }

  /* 头像/名字进入左栏；图标照参考站做成 32×32 方形。 */
  .site-nav .brand {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    gap: 8px;
    padding: 0 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .site-nav .brand-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 8px;
    background: var(--surface-solid);
    box-shadow: none;
  }

  .site-nav .brand-mark img {
    border-radius: inherit;
  }

  .site-nav .brand-copy {
    min-width: 0;
  }

  .site-nav .brand-copy strong {
    font-size: 0.88rem;
    letter-spacing: 0.01em;
  }

  .site-nav .brand-copy small {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
  }

  .site-nav .brand-copy strong,
  .site-nav .brand-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 右侧搜索框改成参考站那种聊天框：960×138、20px 圆角。 */
  .hero-search {
    position: static;
    width: min(960px, 100%);
    max-width: 960px;
    flex: none;
    margin: 24px auto 0;
  }

  .hero-search .search-glow,
  .hero-search .search-box-beam {
    display: none;
  }

  .hero-search .search-box {
    height: 138px;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 20px;
    background: var(--surface-solid);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero-search #search-input {
    height: 62px;
    padding: 0 4px;
    font-size: 1rem;
    font-weight: 560;
  }

  .hero-search .search-box-icon {
    width: 20px;
    height: 20px;
    margin-top: 20px;
  }

  .hero-search .search-box-clear {
    margin-top: 16px;
  }

  .hero-search .search-box::after {
    position: absolute;
    bottom: 14px;
    left: 46px;
    color: color-mix(in srgb, var(--text-faint) 70%, transparent);
    content: "按 Enter 搜索";
    font-size: 0.72rem;
    font-weight: 650;
  }
}

@media (min-width: 1200px) and (max-width: 1279px) {
  :root {
    --rail-width: 208px;
  }
}

/* 短屏笔记本：压缩菜单行和音乐卡，保证「音乐库」按钮不被挤到屏幕外。 */
@media (min-width: 1200px) and (max-height: 800px) {
  .site-nav .brand {
    min-height: 40px;
    padding-bottom: 8px;
  }

  .site-nav-head {
    padding-bottom: 0.28rem;
  }

  .site-nav-list {
    gap: 0.08rem;
  }

  .site-nav-item {
    min-height: 1.95rem;
    padding: 0.25rem 0.5rem;
  }

  .music-dock-wrap {
    width: 10.5rem;
    margin-top: 0.55rem;
  }
}

@media (min-width: 1200px) and (max-width: 1279px) {
  :root {
    --rail-width: 240px;
  }

  .site-header {
    gap: 0;
  }
}

@media (min-width: 1600px) {
  .site-header,
  .site-footer {
    width: min(calc(100% - 3.5rem), 1620px);
  }

  .page-shell {
    grid-template-columns: var(--rail-width) minmax(0, 1fr) 11rem;
  }

  /* 桌面端页头是 fixed 的，窄规则不再参与双栏标题布局。 */
}

@media (min-width: 1024px) {
  /* ⚠️ 首屏原本是「两列网格」（历史遗留：以前「在别处找到我」和统计胶囊并排，
     每人占一列）。统计胶囊早就搬去搜索行了，两列就成了空壳 ——
     社媒块被塞在第 1 列，宽度只有两列轨道那点（1920 下实测 994px）、还偏中间，
     所以左边缘对不上内容区。
     现在改成**一列铺满**：社媒行从内容区左边缘排起，
     和下面「已整理 xxx 个网站」那颗胶囊、以及大模块卡片严丝合缝。 */
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .social-links {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    gap: 0.8rem;
  }

  /* 「在别处找到我」那句文字用户 2026-09-26 让删掉（「没啥用」），
     社媒行现在只有两个按钮，直接贴内容区左边缘。 */
}

/* 搜索框 = 大模块卡片的一格：搜索行用和 .module-grid **完全一样**的列数和间隙，
   统计胶囊占前面几格、搜索框占最后一格，两条边自然就对齐了。
   （列数跟着 .module-grid 走：≤900 两列、901~1359 三列、≥1360 四列） */
@media (min-width: 721px) and (max-width: 900px) {
  .search-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: center;
    /* ≤1023 时 .module-home 被限制在 820 居中（见上面那条老规则），
       搜索行跟着一起限制，两条边才对得上卡片 */
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }

  .search-row .hero-stats {
    grid-column: 1;
    /* 统计胶囊也做成「正好一格模块卡」宽（用户 2026-09-26：「已整理 657 个网站
       那个按钮的长度，没有和下面的模块长度对齐」）——文字自动折成两行，
       左边缘贴着第一张卡、右边缘贴着第一格的右边缘。 */
    justify-self: stretch;
    margin: 0;
    /* ⚠️ `keep-all`：中文默认可以任意位置断行，两行时会把「大模块」劈成
       「大模 / 块」。加上它之后只在空格处换行，破折号两侧自然分两行。 */
    word-break: keep-all;
    line-height: 1.35;
    padding: 0.5rem 0.85rem;
  }

}

@media (min-width: 901px) {
  .search-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: center;
  }

  .search-row .hero-stats {
    grid-column: 1;
    justify-self: stretch;
    margin: 0;
  }

}

@media (min-width: 901px) and (max-width: 1023px) {
  .search-row {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1360px) {
  .search-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .search-row .hero-stats {
    grid-column: 1;
  }

}

@media (max-width: 720px) {
  /* 统计横栏（手机端）：搜索框已经搬到顶栏，这一行只剩这颗胶囊。 */
  /* 统计横栏改成透明（用户：「白色的太难看了」）。
     有壁纸时它原来会自动补一层 76% 的白玻璃，手机端一起摘掉，
     改成给自己的小字压一层很淡的投影 —— 压在花壁纸上也看得清。 */
  .search-row .hero-stats {
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    justify-content: flex-start;
    text-align: left;
  }

  html[data-wallpaper="on"] .search-row .hero-stats {
    background: transparent;
    backdrop-filter: none;
    color: var(--text);
    text-shadow: 0 1px 2px rgba(13, 17, 23, 0.45);
  }

  /* 两个社媒按钮的长度＝下面大模块的长度（用户 2026-09-27）：
     按钮／统计横栏／模块卡共用同一条左边缘（实测 10px），
     两个按钮各占半格，合起来正好从第一张卡的左边铺到第二张卡的右边。 */
  .social-links {
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.45rem;
  }

  .social-list {
    width: 100%;
    /* 间隙和大模块的格子间距一致（0.85rem），两个按钮就正好＝两张卡片的宽度 */
    gap: 0.85rem;
  }

  .social-link {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.4rem;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem 0.2rem 0.28rem;
  }

  .social-link img {
    width: 1.6rem;
    height: 1.6rem;
  }

  .social-link strong {
    font-size: 0.7rem;
  }

  .social-link small {
    font-size: 0.55rem;
  }
}

/* ---------------------------------------------------------------------------
   手机上的壁纸层高度（2026-09-27 修的用户 bug）
   ---------------------------------------------------------------------------
   用户报：「在手机端随便选一张壁纸后，从上往下滑到底部，背景壁纸会默默放大」。
   根因是手机下滑会收起地址栏 → 视口高度变大（宽度不变）→ app.js 拿新的
   innerHeight 重算 cover 比例 → 图被重新算大一次（实测 1500×844 → 1618×910）。
   app.js 那边改成按「大视口」(100lvh) 摆，这里把三层壁纸层的高度也钉成同一个
   像素值（--wallpaper-layer-height，由 app.js 写），图层就不会在滚动时长高，
   图上下也不会露出垫底色。没写过这个变量时先用 100lvh 顶着，避免首帧闪一下。
   阈值 760px 和 app.js 的 stableViewport() 一致。电脑端一个字节都不动。
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body::before,
  body::after,
  .wallpaper-still,
  .wallpaper-video {
    bottom: auto;
    height: var(--wallpaper-layer-height, 100lvh);
  }
}

/* ===========================================================================
   站内音乐播放器（2026-09-27，版本 20260927-music4）
   ---------------------------------------------------------------------------
   用户这一轮的两条：
     · 「我有网易云会员，你在这个网站直接让我登录一下，不就能播放 VIP 歌曲了吗」
       → 搜索结果页音乐块里的扫码登录（.search-music-auth 那几档）
     · 「首页左下角刚好有个空白的地方，把那个光碟播放动画放在那儿，
        返回主页的时候让它转起来」
       → 左边目录栏底部的黑胶唱机（.music-dock）

   ⚠️ 左边这栏只在 ≥1200 常驻（小屏目录收进头像面板里），所以唱机也只在
      ≥1200 显示 —— 手机端一个字节没动（手机端保持原样是用户定下的规矩）。
   =========================================================================== */

/* 共用那个 <audio> 不占位、不出原生控件 */
.site-audio {
  display: none;
}

.music-dock-wrap,
.music-dock {
  display: none;
}

/* 手机端：同一台唱机被 music-player.js 移到标题下面、模块上面。
   桌面端这个容器始终 hidden，唱机仍在左侧目录栏。 */
.mobile-music-dock {
  display: none;
}

@media (max-width: 720px) {
  .mobile-music-dock {
    display: block;
    width: min(100%, var(--max-width, 34rem));
    margin: 0.1rem auto 0.85rem;
    pointer-events: auto;
  }

  .mobile-music-dock[hidden] {
    display: none !important;
  }

  .mobile-music-dock .music-dock-wrap {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
  }

  .mobile-music-dock .music-dock {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 7.4rem;
    grid-template-columns: 4.85rem minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 0.78rem;
    align-items: center;
    padding: 0.68rem 0.82rem 0.72rem 0.72rem;
    border: 1px solid var(--border);
    border-radius: 22px;
    background:
      radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
      color-mix(in srgb, var(--surface-solid) 92%, transparent);
    box-shadow: 0 10px 28px rgba(10, 14, 22, 0.1);
    text-align: left;
  }

  .mobile-music-dock .music-dock-stage {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 4.85rem;
    height: 4.85rem;
    margin: 0;
    align-self: center;
  }

  .mobile-music-dock .music-dock-disc {
    width: 4.85rem;
    height: 4.85rem;
  }

  .mobile-music-dock .music-dock-arm {
    top: -0.84rem;
    width: 1.22rem;
    height: 3.55rem;
  }

  .mobile-music-dock .music-dock-hint {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.58rem;
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.9);
  }

  .mobile-music-dock .music-dock-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding-right: 0.2rem;
    font-size: 0.82rem;
    font-weight: 650;
    text-align: left;
  }

  .mobile-music-dock .music-dock-lyric {
    display: none;
  }

  .mobile-music-dock .music-dock-lyric:not([hidden]) {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: 2.45rem;
    margin: 0.2rem 0 0;
    text-align: left;
  }

  .mobile-music-dock .music-dock-lyric span {
    font-size: 0.74rem;
  }

  .mobile-music-dock .music-dock-lyric em {
    font-size: 0.64rem;
  }

  .mobile-music-dock .music-dock-progress {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0.12rem;
    padding: 0.18rem 0;
  }

  .mobile-music-dock .music-dock-controls {
    grid-column: 2;
    grid-row: 4;
    justify-content: flex-start;
    gap: 0.42rem;
    margin-top: 0.18rem;
  }

  .mobile-music-dock .music-dock-step {
    width: 1.18rem;
    height: 1.18rem;
  }

  .mobile-music-dock .music-dock-play {
    width: 1.68rem;
    height: 1.68rem;
  }

  .mobile-music-dock .music-dock-library {
    position: absolute;
    right: 0.78rem;
    bottom: 0.68rem;
    margin: 0;
    padding: 0.24rem 0.54rem;
    font-size: 0.62rem;
  }

  .mobile-music-dock .music-dock-time {
    display: none;
  }
}

@media (min-width: 1200px) {
  /* 2026-09-27 第十五轮：用户要求做成「像手机软件小组件那样的正方形小卡片」。
     ⚠️ 不要把 .site-nav 改成 flex、也不要让 .site-nav-list 自己滚：第一版这么干过，
     结果目录被压成内部滚动、下面几个分类看不见（用户：「上面本来能完整显示的目录
     都被挡住了」）。卡片 200×200，正常排在目录下面就行，位置居中。 */
  .music-dock-wrap {
    display: block;
    width: 12.25rem; /* 196px 的正方形小组件（左栏去掉滚动条后留出的可用宽度） */
    margin: 1.4rem auto 0;
    text-align: center;
  }

  .music-dock {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0.5rem 0.55rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 22px;
    background:
      radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
      color-mix(in srgb, var(--surface-solid) 88%, transparent);
    box-shadow: 0 14px 32px rgba(10, 14, 22, 0.1);
    text-align: center;
  }
}

/* 唱片 + 唱臂（卡片里的主体，撑满剩下的空间） */
.music-dock-stage {
  position: relative;
  display: grid;
  width: 6rem; /* 96px 的唱片：用户两次要求「再加大一点、大气一点」 */
  height: 6rem;
  flex: 0 0 auto;
  margin: 0 auto;
  aspect-ratio: 1;
  place-items: center;
  flex: 1 1 auto;
  align-self: center;
}

/* 黑胶唱片。点它 = 播放 / 暂停。
   ⚠️ 里面**只能有 .music-dock-label 一个参与布局的子元素** —— 多一个空 span
      （哪怕只是想当装饰层）就会在 disc 的 grid 里多占一行，把封面挤偏（第一版的 bug）。
   ⚠️ 盘面**不加 box-shadow 外发光、不加 1px 内描边**：用户 2026-09-27 说
      「外面还有一个轮廓」「感觉你就是没批好」—— 白底上一圈淡黑影确实像抠图没抠干净。
   ⚠️ 转动用 animation-play-state 控制，**别在暂停时把 animation 去掉**：
      去掉会瞬间弹回 0 度（用户：「转的过程中点一下，它就恢复到正中位置了」）。 */
.music-dock-disc {
  display: grid;
  width: 6rem;
  height: 6rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 33%, rgba(0, 0, 0, 0.5) 33.5% 35.5%, transparent 36%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.045) 0 0.6px, rgba(0, 0, 0, 0) 0.6px 2.1px),
    radial-gradient(circle at 50% 46%, #1e1e25 0%, #141419 62%, #0c0c11 100%);
  cursor: pointer;
  /* 转速：用户 2026-09-27「感觉转得有点快了，缓慢一点」→ 6s 一圈改成 14s */
  animation: search-music-spin 14s linear infinite;
  animation-play-state: paused;
}

.music-dock-disc.is-spinning {
  animation-play-state: running;
}

.music-dock-disc:focus-visible {
  outline: 2px solid var(--active-accent, var(--accent));
  outline-offset: 3px;
}

/* 中间那张封面当圆标（62% 是黑胶圆标常见比例，实测封面与唱片圆心偏差 0） */
.music-dock-label {
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #232329;
  background-image: none;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* 没有封面时给一圈低调的渐变，别露一块死黑 */
.music-dock-label.is-blank {
  background-image: linear-gradient(135deg, #3f4b63, #1d2231 60%, #10131c);
}

.music-dock-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dfe3ea;
  transform: translate(-50%, -50%);
}

/* 反光层是唱片的**兄弟节点**：不跟着转（真唱片的反光是环境光），只用很淡的斜光 */
.music-dock-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.11) 0 12%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(300deg, rgba(255, 255, 255, 0.06) 0 8%, rgba(255, 255, 255, 0) 30%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 唱臂（SVG）：暂停抬起来、播放落下去。
   ⚠️ transform-origin 要对准 SVG 里的转轴圆心（viewBox 40×120 里的 26,10 →
      65% / 8.3%），否则转起来整根臂会平移（上一版踩过）。 */
.music-dock-arm {
  position: absolute;
  z-index: 3;
  top: -1.05rem;
  left: calc(50% - 0.05rem);
  width: 1.55rem;
  height: 4.55rem;
  transform-origin: 52% 7.9%;
  filter: drop-shadow(0 3px 6px rgba(10, 14, 22, 0.18));
  /* ⚠️ 两个姿态（用户 2026-09-27 贴了播放/暂停两张参考图）：
       暂停 = 抬起来、唱头离开唱片甩到右上方（≈ −50°）；
       播放 = 放下、唱头落在圆标外侧的沟槽区（≈ −5°，距唱片中心约 75% 半径）。
       ⚠️ 符号别搞反：屏幕坐标 y 向下时，**正角度让向下的唱臂往左摆**
       （rotate(+θ) 把 (0,L) 变成 (−L·sinθ, L·cosθ)）。2026-09-27 就为这个返工过一次。 */
  transform: rotate(-62deg);
  transition: transform 520ms var(--ease-out);
}

/* 播放中：唱臂落到唱片上 */
.music-dock-arm.is-on {
  /* 唱头落在**圆标外侧的沟槽区**，而不是压在圆标上
     （照用户给的参考图量的位置） */
  transform: rotate(-37deg);
}

/* 首页歌词：两行（原文 + 翻译），定高，不跳动 */
  /* ⚠️ 歌词/歌名一定要给确定的宽度：它们 white-space: nowrap，不给宽度时超长的一行会把
     卡片撑宽（用户 2026-09-27：「一选歌它的宽就变宽了一点，就不是正方形了」）。 */
.music-dock-lyric {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 1.6rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  margin: 0.2rem 0 0;
  overflow: hidden;
}

.music-dock-lyric span {
  overflow: hidden;
  color: var(--text);
  width: 100%;
  min-width: 0;
  font-size: 0.62rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-dock-lyric em {
  overflow: hidden;
  color: var(--text-faint);
  width: 100%;
  min-width: 0;
  font-size: 0.56rem;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 鼠标停在唱片上时，中间冒一个小播放/暂停符号（不挡点击） */
.music-dock-hint {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 12, 18, 0.55);
  color: #fff;
  font-size: 0.72rem;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.music-dock-stage:hover .music-dock-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 一行歌名 */
.music-dock-title {
  margin: 0.05rem 0 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.68rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.music-dock-note {
  width: 100%;
  min-width: 0;
  margin: 0.1rem 0 0;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.6rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-dock-note[hidden] {
  display: none;
}

/* 进度条：平时 3px 细线，悬停/拖动变 5px 并冒出圆点（Spotify / AF Media Bar 都这么做） */
.music-dock-progress {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.3rem 0;
  cursor: pointer;
  touch-action: none;
}

.music-dock-track {
  position: relative;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
  transition: height 160ms ease;
}

.music-dock-progress:hover .music-dock-track,
.music-dock-progress.is-active .music-dock-track {
  height: 5px;
}

.music-dock-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--dock-progress, 0%);
  border-radius: 999px;
  background: var(--active-accent, var(--accent));
}

.music-dock-knob {
  position: absolute;
  top: 50%;
  left: var(--dock-progress, 0%);
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(6, 8, 14, 0.4);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 160ms ease;
  pointer-events: none;
}

.music-dock-progress:hover .music-dock-knob,
.music-dock-progress.is-active .music-dock-knob,
.music-dock-progress:focus-visible .music-dock-knob {
  transform: translate(-50%, -50%) scale(1);
}

.music-dock-progress:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--active-accent, var(--accent));
  outline-offset: 2px;
}

.music-dock-time {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0.05rem 0 0;
  color: var(--text-faint);
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
}

/* 上一首 / 播放暂停 / 下一首（照手机音乐小组件那种：中间那颗大一点、带主色） */
.music-dock-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.music-dock-step,
.music-dock-play {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.music-dock-step {
  width: 1.25rem;
  height: 1.25rem;
}

.music-dock-step svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

.music-dock-step:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-muted);
}

.music-dock-step:disabled {
  opacity: 0.35;
  cursor: default;
}

.music-dock-play {
  width: 1.75rem;
  height: 1.75rem;
  background: var(--active-accent, var(--accent));
  color: #fff;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--active-accent, var(--accent)) 35%, transparent);
}

.music-dock-play:hover {
  transform: scale(1.06);
}

.music-dock-play svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}

.music-dock-play .music-dock-play-icon {
  fill: currentColor;
  stroke: none;
}

/* 暂停时藏暂停条、显示三角；播放时反过来 */
.music-dock-play .music-dock-pause-icon {
  display: none;
}

.music-dock-play.is-playing .music-dock-play-icon {
  display: none;
}

.music-dock-play.is-playing .music-dock-pause-icon {
  display: block;
}

/* 搜索结果页那台播放器的进度条也照同一套做（原来是浏览器默认的灰条） */

/* ---------------------------------------------------------------------------
   音乐库（2026-09-27 第十一轮新增）：每日榜单 + 我的收藏
   --------------------------------------------------------------------------- */
.music-dock-library,

.music-dock-library {
  margin-top: 0.55rem;
}

.music-dock-library:hover,

.music-library-scrim {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(12, 16, 28, 0.42);
}

.music-library {
  position: fixed;
  inset: 0;
  z-index: 89;
  display: grid;
  padding: clamp(0.75rem, 3vh, 2.5rem) clamp(0.75rem, 4vw, 3rem);
  place-items: start center;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.music-library-panel {
  display: flex;
  width: min(100%, 46rem);
  /* 随内容收口；只有长列表触及视口上限时滚动，不给短榜单留下固定空白。 */
  height: auto;
  max-height: min(80dvh, 46rem);
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem clamp(0.9rem, 3vw, 1.5rem) 1.3rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface-solid);
  box-shadow: 0 28px 70px rgba(12, 16, 28, 0.3);
  overflow: hidden;
}

.music-library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.music-library-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.15rem;
}

/* 音乐库右上角的搜歌框（2026-09-27 加） */
.music-library-search {
  /* 靠右由外层 .music-library-tools 统一负责，自己不再抢中间的位置 */
  flex: 0 1 13rem;
  min-width: 8rem;
  max-width: 15rem;
}

.music-library-search input {
  width: 100%;
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
}

.music-library-search input:focus-visible {
  outline: 2px solid var(--active-accent, var(--accent));
  outline-offset: 1px;
}

.music-library-tabs {
  display: flex;
  gap: 0.3rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
}

.music-library-tabs button {
  padding: 0.32rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.music-library-tabs button[aria-selected="true"] {
  background: var(--surface-solid);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(12, 16, 28, 0.14);
}

.music-library-close {
  display: grid;
  width: 2rem;
  height: 2rem;
  /* 靠右交给 .music-library-tools；这里再留一个 auto 会把「来源+搜索」和它挤开 */
  margin-left: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.8rem;
  cursor: pointer;
}

.music-library-close:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.music-library-body {
  min-height: 0;
  flex: 0 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
}

.music-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.7rem;
}

.music-library-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}

.music-library-card:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  transform: translateY(-2px);
}

.music-library-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background-color: var(--surface-muted);
  background-position: center;
  background-size: cover;
}


/* 免费专区那张卡没有封面，给一块渐变底 */
/* 免费专区那张卡的封面文字（别的榜封面上的字是图片自带的，这张是我们自己画的渐变） */
.music-library-cover-label {
  display: grid;
  height: 100%;
  place-items: center;
  color: #fff;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.music-library-cover.is-free {
  background-image: linear-gradient(135deg, #34d399, #0ea5e9 70%);
}

/* VIP / 免费 标记 */



/* 「只看能免费听的」开关 */
.music-library-filter {
  margin-left: auto;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.music-library-filter[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 14%, transparent);
  color: var(--text);
}

.music-library-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.music-library-paste {
  display: flex;
  gap: 0.4rem;
  width: min(100%, 18rem);
  margin-top: 0.2rem;
}

.music-library-paste input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
}

.music-library-paste button {
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.music-library-retry {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.music-library-retry:hover {
  background: var(--surface-muted);
}

.music-library-card strong {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-library-card small {
  color: var(--text-faint);
  font-size: 0.7rem;
}

.music-library-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 85%, #000 15%);
  color: #fff;
  font-size: 0.62rem;
  font-style: normal;
}

.music-library-section {
  margin: 1rem 0 0.5rem;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.music-library-section:first-child {
  margin-top: 0;
}

.music-library-subhead {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.music-library-subhead strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-library-back {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.music-library-back:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.music-library-tracks {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}














.music-library-empty {
  margin: 1.2rem 0;
  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 720px) {
  .music-library {
    padding: 0.75rem;
    place-items: center;
  }

  .music-library-panel {
    width: min(100%, 21rem);
    height: auto;
    max-height: min(64dvh, 32rem);
    padding: 0.9rem 0.8rem 1.1rem;
    border-radius: 18px;
  }

  .music-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.5rem;
  }


}
/* ---------------------------------------------------------------------------
   网易云扫码登录（搜索结果页的音乐块里）
   --------------------------------------------------------------------------- */
.search-music-auth {
  margin-top: 0.7rem;
}

.search-music-auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.search-music-login {
  padding: 0.42rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.search-music-login:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.search-music-logout {
  padding: 0.34rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.search-music-logout:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.search-music-auth-ok {
  margin: 0;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.search-music-qr {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-solid);
  flex-wrap: wrap;
}

.search-music-qr canvas {
  width: 152px;
  height: 152px;
  border-radius: 10px;
  background: #fff;
}

.search-music-qr-copy {
  display: flex;
  min-width: 11rem;
  flex: 1 1 11rem;
  flex-direction: column;
  gap: 0.35rem;
}

.search-music-qr-copy strong {
  color: var(--text);
  font-size: 0.9rem;
}

.search-music-qr-copy small {
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* 「请用网易云 App 扫（微信、相机扫不出来）」这一行 */
.search-music-qr-copy em {
  color: var(--text-faint);
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.5;
}

.search-music-qr-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.search-music-qr-actions button {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.search-music-qr-actions button:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.search-music-auth-note {
  margin: 0.5rem 0 0;
  color: var(--text-faint);
  font-size: 0.74rem;
  line-height: 1.55;
}

/* 系统设置「减少动态效果」：唱片不转、粒子也不画（JS 那边同样会跳过） */
@media (prefers-reduced-motion: reduce) {
  .music-dock-disc.is-spinning {
    animation: none;
  }
}

/* ===========================================================================
   网站背面：全网热点榜 + 公版书阅读器（2026-09-27 第十五轮）
   =========================================================================== */
/* 整站「翻过去」的观感：正面轻微转走 + 变暗，背面带着透视转进来 */
html.hot-flipped .page-shell,
html.hot-flipped .site-header,
html.hot-flipped .site-footer {
  transform: perspective(1400px) rotateY(-14deg) scale(0.97);
  transform-origin: left center;
  filter: saturate(0.85) brightness(0.96);
  transition: transform 520ms var(--ease-out), filter 520ms var(--ease-out);
  pointer-events: none;
}

.hot-flip {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  padding: clamp(0.8rem, 3vh, 2.2rem) clamp(0.8rem, 4vw, 3rem);
  place-items: start center;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  animation: hot-flip-in 460ms var(--ease-out);
}

@keyframes hot-flip-in {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateY(18deg) translateX(6%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hot-flip-inner {
  width: min(100%, 44rem);
  padding-bottom: 2rem;
}

.hot-flip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.hot-flip-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.hot-flip-time {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.72rem;
}

.hot-flip-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
}

.hot-flip-tabs button {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.hot-flip-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 12%, transparent);
  color: var(--text);
}

.hot-flip-close {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.8rem;
  cursor: pointer;
}

.hot-list {
  display: flex;
  flex-direction: column;
}

.hot-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  color: var(--text);
  text-decoration: none;
}

.hot-row:hover {
  background: var(--surface-muted);
}

.hot-rank {
  color: var(--text-faint);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.hot-rank[data-top="true"] {
  color: var(--active-accent, var(--accent));
  font-weight: 700;
}

.hot-title {
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-tags {
  display: flex;
  gap: 0.25rem;
}

.hot-tags i {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-faint);
  font-size: 0.62rem;
  font-style: normal;
}

.hot-score {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-style: normal;
  white-space: nowrap;
}

.hot-empty {
  margin: 1.2rem 0;
  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: center;
}

/* 搜索结果里的公版书卡片 */
.book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.book-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  min-width: 0;
  gap: 4px 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.book-card:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  transform: translateY(-2px);
}

.book-cover {
  grid-row: 1 / span 3;
  width: 48px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  background-color: var(--surface-muted);
  background-position: center;
  background-size: cover;
}

.book-card strong {
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.book-card small {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-card .book-badge {
  justify-self: start;
}

@media (max-width: 1000px) {
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .book-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   「你收藏里的在线阅读站」卡片（2026-09-27 第十九轮，版本号 20260928-order1）
   用户：光给微信读书跳转不够（电脑上老被拽去装 App），他收藏里本来就有一堆
   免费在线阅读站（Z-Library / 安娜档案 / 图书派 / 书格…），要摆成卡片、点一下就去。
   卡片＝站点图标（/api/icon，加载失败退回首字母）+ 站名 + 一行说明 + 「站内搜索/打开网站」。
   --------------------------------------------------------------------------- */
.library-head {
  margin: 1.15rem 0 0.5rem;
}

.library-head h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 620;
}

.library-head p {
  margin: 0.2rem 0 0;
  color: var(--text-faint);
  font-size: 0.72rem;
}

/* 「展开全部 / 收起」按钮（2026-10-12）：阅读站默认收起，别一屏占太大 */
.library-toggle {
  margin: 0.45rem 0 0;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.72rem;
  cursor: pointer;
}

.library-toggle:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  color: var(--text);
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr));
  gap: 0.7rem;
}

.library-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.library-card:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  transform: translateY(-2px);
}

/* 图标底：淡渐变方块，图标没来之前显示站点首字母 */
.library-logo {
  position: relative;
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--surface-muted) 92%, transparent),
    color-mix(in srgb, var(--active-accent, var(--accent)) 12%, transparent)
  );
}

.library-logo i {
  color: color-mix(in srgb, var(--active-accent, var(--accent)) 70%, var(--text));
  font-size: 1.35rem;
  font-style: normal;
  font-weight: 650;
  opacity: 0.85;
}

.library-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.8rem;
  object-fit: contain;
  opacity: 0;
  transition: opacity 200ms ease;
}

.library-logo.has-icon img {
  opacity: 1;
}

.library-name {
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-note {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 0.66rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.library-tag {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 14%, transparent);
  color: color-mix(in srgb, var(--active-accent, var(--accent)) 88%, var(--text));
  font-size: 0.62rem;
  font-style: normal;
}

/* 没有书籍卡、只有阅读站卡片时，把那句「公版书可以直接读正文」的说明收起来 */
#search-book-block.no-books .search-ai-head p {
  display: none;
}

/* ---------------------------------------------------------------------------
   人物 / 创作者卡（2026-09-28 第二十五轮）
   用户：「我搜『野兽先生』，没给正确的主页链接」「搜任何红人都该直达他的主页，
   最好还能直接看视频，链接要带图片」。左边头像 + 名字/简介 + 一排官方主页按钮，
   下面是他最新的视频（缩略图直接点开看）。
   --------------------------------------------------------------------------- */
/* 赛事 / 比赛预览（2026-10-01）：搜「CS2 / 乒乓球 / 张继科」→ 未来几天的比赛。
   和人物卡同一套「模块 + 卡片」语言：浅色毛玻璃底、圆角、hover 提亮。 */
.search-schedule {
  display: grid;
  gap: 0.9rem;
}

.schedule-list {
  display: grid;
  gap: 0.55rem;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.schedule-item:hover {
  border-color: var(--accent, #48f);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.12));
}

.schedule-item-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--surface-2, rgba(127, 127, 127, 0.12));
  flex: 0 0 auto;
}

.schedule-item-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.schedule-item-copy strong {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-item-copy small {
  font-size: 0.82rem;
  color: var(--text-2, rgba(0, 0, 0, 0.55));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-item-teams {
  font-weight: 700;
  font-size: 0.96rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.schedule-more {
  display: inline-flex;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #48f) 12%, transparent);
  color: var(--accent, #48f);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease;
}

.schedule-more:hover {
  background: color-mix(in srgb, var(--accent, #48f) 20%, transparent);
}

@media (max-width: 640px) {
  .schedule-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .schedule-item-teams {
    white-space: normal;
  }
}

.search-creator {
  display: grid;
  gap: 0.9rem;
}

/* 等人资料时的等待动画（2026-09-29）：thinking-orbs 的点阵小球。
   外面这层刻意做得和真卡片（.creator-card-inner）一样的边框 / 圆角 / 底衬，
   等结果到了换成卡片时不会「跳一下」。小球由 thinking-orb.js 画在 canvas 上。 */
.creator-loading {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  /* 淡入 160ms：立刻显示（用户要求「搜了就显示」），但缓存命中那种几十毫秒的快回复
     不会「闪一下像故障」—— 它还没淡进来就已经被真卡片替换掉了。 */
  animation: creator-loading-in 160ms ease-out both;
}

@keyframes creator-loading-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 系统开了「减少动态效果」就不做淡入（小球的静止帧由 JS 那边负责） */
@media (prefers-reduced-motion: reduce) {
  .creator-loading {
    animation: none;
  }
}

.creator-loading-orb {
  display: block;
  width: 56px;
  height: 56px;
  flex: none;
}

.creator-loading-text {
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* 等待中不要同时摆着上一次的卡片和标题，否则看着像「旧的没走、新的在转」 */
.search-creator.is-loading .search-block-head,
.search-creator.is-loading .creator-card,
.search-creator.is-loading .creator-videos {
  display: none;
}

.creator-card-inner {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.creator-avatar {
  position: relative;
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-faint);
  font-size: 2rem;
  font-weight: 700;
}

.creator-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 200ms ease;
}

.creator-avatar.has-photo img {
  opacity: 1;
}

.creator-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}

.creator-name {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 680;
}

.creator-name-en {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
}

/* 电竞选手资料行（2026-09-28）：真名 / 项目 / 战队 / 位置 / 国籍 */
.creator-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0.4rem 0 0.1rem;
  font-size: 0.76rem;
  line-height: 1.4;
}

.creator-facts dt {
  color: var(--text-soft);
  white-space: nowrap;
}

.creator-facts dd {
  margin: 0;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 准心码（2026-09-28）：等宽字体 + 一键复制 */
.creator-crosshair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.45rem 0 0.1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
}

.creator-crosshair-head {
  font-size: 0.72rem;
  color: var(--text-soft);
}

.creator-crosshair-code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

.creator-crosshair-copy {
  flex: 0 0 auto;
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.72rem;
  cursor: pointer;
}

.creator-crosshair-copy:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
}

/* 设置 / 装备：小胶囊，一行一个「标签 值」 */
.creator-chips {
  margin: 0.45rem 0 0.1rem;
}

.creator-chips-head {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  color: var(--text-soft);
}

.creator-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.creator-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  font-size: 0.74rem;
  max-width: 100%;
}

.creator-chip em {
  font-style: normal;
  color: var(--text-soft);
  flex: 0 0 auto;
}

.creator-chip span {
  overflow-wrap: anywhere;
}

/* ===== 通用人物 / 实体资料系统（2026-10-01）=====
   后端按实体类型给模块清单，这里只补「新模块」的样式；
   老的（facts 资料行 / chips 胶囊 / crosshair 准心）一行没动 ——
   所以 donk 那张卡看起来和以前完全一样。 */
.creator-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin: 0.4rem 0 0.05rem;
}

.creator-tag {
  padding: 0.16rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--active-accent, var(--accent)) 26%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 8%, transparent);
  color: var(--text-soft);
  font-size: 0.7rem;
  line-height: 1.5;
}

.creator-module {
  margin: 0.5rem 0 0.05rem;
}

.creator-module-head {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  color: var(--text-soft);
}

/* 时间线：左边一条竖线，日期在前、标题在后，和资料行同一套字级 */
.creator-timeline {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0 0 0 0.85rem;
  list-style: none;
  border-left: 1px solid var(--border);
}

.creator-timeline li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.45;
}

.creator-timeline time {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.creator-timeline strong {
  font-weight: 600;
}

.creator-timeline span {
  color: var(--text-soft);
}

/* 作品 / 成就 / 相关：小卡片 */
.creator-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.35rem;
}

.creator-card-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  color: inherit;
  font-size: 0.75rem;
  text-decoration: none;
}

a.creator-card-item:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 40%, var(--border));
}

.creator-card-item strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.creator-card-item small {
  color: var(--text-soft);
  font-size: 0.68rem;
}

/* 资料来源：一行小字，点得过去 */
.creator-sources {
  margin: 0.5rem 0 0;
  color: var(--text-faint);
  font-size: 0.68rem;
}

.creator-sources a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.creator-actions .creator-link {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 30%, var(--border));
}

.creator-links-head {
  flex-basis: 100%;
  margin: 0 0 2px;
  font-size: 0.72rem;
  color: var(--text-soft);
}

.creator-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.creator-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem 0.3rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.78rem;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.creator-link:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  transform: translateY(-1px);
}

.creator-link-mark {
  position: relative;
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.creator-link-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 200ms ease;
}

.creator-link-mark.has-icon img {
  opacity: 1;
}

.creator-link-mark.has-icon {
  color: transparent;
}

.creator-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.7rem;
}

.creator-videos-head {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.creator-video {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--text);
  text-decoration: none;
}

.creator-video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-muted);
}

.creator-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-video strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.creator-video small {
  color: var(--text-faint);
  font-size: 0.68rem;
}

@media (max-width: 720px) {
  .creator-card-inner {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.8rem;
  }

  .creator-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
  }

  .creator-videos {
    grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   「AI 找到的答案」卡（2026-09-28 第二十七轮）
   用户：「我搜濮阳石油化工职业技术学院，一个结果都没有 —— 接了大模型不该连官网、
   介绍资料和图片都搜不出来。」左边是官网自己的图标（走 /api/image 同源代理），
   右边是 AI 的说明 + 关键点 +「打开官网」（链接是当场打开验证过的）。
   --------------------------------------------------------------------------- */
.search-answer {
  display: grid;
  gap: 0.9rem;
}

.answer-card-inner {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.answer-mark {
  position: relative;
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-muted);
  color: var(--text-faint);
  font-size: 1.6rem;
  font-weight: 700;
}

.answer-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  background: #fff;
  object-fit: contain;
  opacity: 0;
  transition: opacity 200ms ease;
}

.answer-mark.has-photo img {
  opacity: 1;
}

.answer-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}

.answer-name {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 680;
}

.answer-type {
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 14%, transparent);
  color: color-mix(in srgb, var(--active-accent, var(--accent)) 88%, var(--text));
  font-size: 0.66rem;
  font-weight: 600;
  vertical-align: middle;
}

.answer-summary {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.6;
}

.answer-facts {
  margin: 0.1rem 0 0;
  padding-left: 1.05rem;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.7;
}

.answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.answer-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.78rem;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.answer-link:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  transform: translateY(-1px);
}

.answer-link.is-primary {
  border-color: transparent;
  background: var(--active-accent, var(--accent));
  color: #fff;
  font-weight: 600;
}

.answer-from-site {
  margin: 0.15rem 0 0;
  color: var(--text-faint);
  font-size: 0.72rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .answer-card-inner {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.8rem;
  }

  .answer-mark {
    width: 64px;
    height: 64px;
    font-size: 1.3rem;
  }
}

/* 「在哪看」的平台入口（2026-09-28）：一排带图标的胶囊按钮 */
.watch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* 平台按钮默认整行排（flex 换行）；只有真的拿到封面（.has-cover）才切成「封面在左、按钮在右」
   —— 2026-09-28 修：以前不管有没有封面都是两栏网格，没封面时左边空 84px，
   一排胶囊被挤成一条竖线（搜「奇异博士」实测）。 */
.watch-card-inner {
  display: block;
}

.watch-card-inner.has-cover {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
}

@media (max-width: 720px) {
  .watch-card-inner.has-cover {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.7rem;
  }
}

.watch-card-inner > .watch-grid {
  align-content: center;
}

.watch-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.watch-link:hover {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  transform: translateY(-1px);
}
/* 热榜卡片（2026-09-27 第二轮）：照他网站自己的模块卡样式 —— 圆角、细边、透明底 */
.hot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.85rem;
  align-items: start;
}

.hot-card {
  padding: 0.75rem 0.85rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-solid) 62%, transparent);
}

.hot-card.is-wide {
  grid-column: 1 / -1;
}

.hot-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.hot-card-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 620;
}

.hot-card-head small {
  color: var(--text-faint);
  font-size: 0.68rem;
}

.hot-card .hot-row {
  grid-template-columns: 1.2rem minmax(0, 1fr) auto;
  padding: 0.32rem 0.2rem;
  border-bottom: 0;
}

.hot-card .hot-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 8px;
}

.hot-card .hot-title {
  font-size: 0.8rem;
}

.hot-card .hot-score,
.hot-card .hot-tags i {
  font-size: 0.6rem;
}

@media (max-width: 720px) {
  .hot-grid {
    grid-template-columns: 1fr;
  }
}
.book-badge {
  align-self: flex-start;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-soft);
  font-size: 0.62rem;
  font-style: normal;
}

/* ===========================================================================
   工具箱（2026-09-28）：PDF 合并 / PDF 拆分 / 图片压缩 / 二维码
   四件都在访客浏览器里跑（pdf-lib + canvas），文件不上传。
   视觉沿用「翻到背面」那一套：整站轻轻转走 + 面板带着透视转进来。
   =========================================================================== */
html.tools-open .page-shell,
html.tools-open .site-header,
html.tools-open .site-footer {
  transform: perspective(1400px) rotateY(-14deg) scale(0.97);
  transform-origin: left center;
  filter: saturate(0.85) brightness(0.96);
  transition: transform 520ms var(--ease-out), filter 520ms var(--ease-out);
  pointer-events: none;
}

.tools-panel {
  position: fixed;
  inset: 0;
  z-index: 97;
  display: grid;
  padding: clamp(0.8rem, 3vh, 2.2rem) clamp(0.8rem, 4vw, 3rem);
  place-items: start center;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  animation: hot-flip-in 420ms var(--ease-out);
}

.tools-inner {
  width: min(100%, 42rem);
  padding-bottom: 2.4rem;
}

.tools-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

.tools-head h2 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
}

.tools-note {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.72rem;
}

.tools-close {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.8rem;
  cursor: pointer;
}

.tools-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.tools-tabs button {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.78rem;
  cursor: pointer;
}

.tools-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 12%, transparent);
  color: var(--text);
}

.tools-body {
  display: grid;
  gap: 0.8rem;
}

.tool-pane {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 0.95rem 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-solid) 62%, transparent);
}

.tool-hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

.tool-file {
  width: 100%;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.tool-file::file-selector-button {
  margin-right: 0.6rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 12%, transparent);
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
}

.tool-list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-file-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.76rem;
}

.tool-drag {
  color: var(--text-faint);
  cursor: grab;
  font-size: 0.85rem;
  line-height: 1;
}

.tool-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tool-file-size {
  flex: none;
  color: var(--text-faint);
  font-size: 0.68rem;
}

.tool-file-remove,
.tool-file-save {
  flex: none;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.7rem;
  cursor: pointer;
}

.tool-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.tool-field {
  display: grid;
  gap: 0.25rem;
  color: var(--text-soft);
  font-size: 0.72rem;
}

.tool-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent);
  color: var(--text);
  font-size: 0.82rem;
}

.tool-textarea {
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.tool-range {
  width: 100%;
  accent-color: var(--active-accent, var(--accent));
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tool-run {
  padding: 0.42rem 1rem;
  border: 1px solid color-mix(in srgb, var(--active-accent, var(--accent)) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 14%, transparent);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
}

.tool-run:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tool-ghost {
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.78rem;
  cursor: pointer;
}

.tool-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tool-status {
  color: var(--text-faint);
  font-size: 0.72rem;
}

.tool-status[data-error="true"] {
  color: #e05252;
}

.tool-qr-wrap {
  display: grid;
  place-items: center;
  padding: 0.4rem 0;
}

.tool-qr {
  max-width: 100%;
  border-radius: 12px;
}

@media (max-width: 480px) {
  .tools-panel {
    padding: 0.7rem 0.6rem 2rem;
  }

  .tools-tabs button {
    padding: 0.28rem 0.62rem;
    font-size: 0.74rem;
  }

  .tool-pane {
    padding: 0.75rem 0.75rem 0.85rem;
  }
}

/* ---------------------------------------------------------------------------
   音乐第二来源（2026-09-29）：来源切换按钮组 / 下载按钮 / 换曲库试听
   --------------------------------------------------------------------------- */
/* 来源选择（2026-09-29 第二轮重做成**收起式下拉**）：
   收起时只显示当前来源 + 一句说明；点开才列出三个选项。 */
.music-source {
  position: relative;
}

.music-source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.3rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}

.music-source-toggle:hover,
.music-source.is-open .music-source-toggle {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 55%, transparent);
}

.music-source-name {
  font-weight: 600;
}

.music-source-tag {
  padding: 0.05rem 0.34rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 15%, transparent);
  color: var(--text-soft);
  font-size: 0.63rem;
}

.music-source-caret {
  font-size: 0.6rem;
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.music-source.is-open .music-source-caret {
  transform: rotate(180deg);
}

/* 四个来源各一个颜色，收起时一眼能认出现在是哪个 */
.music-source-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: 0 0 auto;
}

.music-source-dot[data-source="bitchord"] {
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6 54%, #f43f5e);
}

.music-source-dot[data-source="gd"] {
  background: #10b981;
}

.music-source-dot[data-source="netease"] {
  background: #ef4444;
}

.music-source-dot[data-source="saavn"] {
  background: #6366f1;
}

.music-source-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  min-width: 15rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-solid);
  box-shadow: 0 14px 34px rgba(12, 16, 28, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.music-source-menu[hidden] {
  display: none;
}

.music-source-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.5rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.music-source-option:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.music-source-option[aria-checked="true"] {
  color: var(--text);
  font-weight: 600;
}

.music-source-option-name {
  flex: 0 0 auto;
}

.music-source-option-tag {
  flex: 1 1 auto;
  color: var(--text-faint);
  font-size: 0.67rem;
  font-weight: 400;
  text-align: right;
}

.music-source-check {
  flex: 0 0 auto;
  width: 0.8rem;
  color: var(--active-accent, var(--accent));
}

.music-source-note {
  margin: 0.55rem 0 0;
  color: var(--text-faint);
  font-size: 0.73rem;
  line-height: 1.5;
}

/* 音乐库下载按钮：搜索页移除后仍保留独立音乐库的完整样式。 */




@media (max-width: 720px) {

}

/* 音乐库右上角那一组（2026-09-29 第二轮）：来源选择 + 搜索框**同一行、整体靠右**。
   之前搜索框自己 margin-left:auto 抢了中间的位置，现在交给外层容器统一靠右。 */
.music-library-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.music-library-sources {
  position: relative;
  display: flex;
}

@media (max-width: 720px) {
  /* 手机端：这一组单独占一行，搜索框吃掉剩下的宽度 */
  .music-library-tools {
    margin-left: 0;
    width: 100%;
  }

  .music-library-search {
    flex: 1 1 auto;
    max-width: none;
  }

  .music-source-menu {
    right: auto;
    left: 0;
    min-width: min(15rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }

  .music-source-option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .music-source-option-tag {
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   2026-09-30：界面质感自定义 + 首页专注模式
   ---------------------------------------------------------------------------
   手机端原来是「清澈透明」，桌面端原来是「磨砂」；这次不再写死两套观感，
   设置里保存一个全局值后，电脑和手机刷新都会走同一套模块玻璃参数。
   没有保存过设置时，原来的设备专属样式保持不动。
   --------------------------------------------------------------------------- */
.home-visibility-toggle .eye-off-icon {
  display: none;
}

html[data-home-ui="hidden"] .home-visibility-toggle .eye-icon {
  display: none;
}

html[data-home-ui="hidden"] .home-visibility-toggle .eye-off-icon {
  display: block;
}

.home-visibility-toggle[aria-pressed="true"] {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

/* 只隐藏首页的标题、模块入口和底部装饰；搜索结果页/目录点进去的内容照常出现。 */
html[data-home-ui="hidden"] .hero,
html[data-home-ui="hidden"] .search-row,
html[data-home-ui="hidden"] #module-home,
html[data-home-ui="hidden"] .bottom-marquee,
html[data-home-ui="hidden"] .site-footer {
  display: none !important;
}

/* 模块玻璃：透明度 0 = 实心，100 = 全部透出背景；磨砂强度 0 = 清晰透明。 */
html[data-module-glass="custom"] .module-card {
  background: linear-gradient(
    145deg,
    rgb(var(--module-glass-rgb) / var(--module-glass-alpha)),
    rgb(var(--module-glass-rgb) / calc(var(--module-glass-alpha) * 0.68))
  ) !important;
  /* ⚠️ 2026-10-01（perf4）：这一条原来写着
     `backdrop-filter: blur(var(--module-glass-blur)) saturate(150%) !important`，
     也就是设置里那个「磨砂强度」。实测它就是电脑端滚动掉帧的元凶：
     11 张卡片各自实时毛玻璃 → 平均帧间隔 19.13ms、掉帧 39 次；
     只把这一条关掉 → 9.35ms、掉帧 4 次。
     毛玻璃在纯色/渐变背景上肉眼几乎看不出差别，却要每帧重算，
     所以这里只保留「透明度」（上面的 background），不再做实时模糊。
     设置里对应的滑块也一并去掉了。 */
}

html[data-module-glass="custom"][data-theme="light"] {
  --module-glass-rgb: 255 255 255;
}

html[data-module-glass="custom"][data-theme="dark"] {
  /* 卡片透明度的基色：跟暗色表面保持一致，不然调透明度会偏蓝 */
  --module-glass-rgb: 20 20 22;
}

html[data-module-glass="custom"][data-theme="light"][data-wallpaper="on"][data-wallpaper-tone="dark"] {
  --module-glass-rgb: 20 20 22;
}

.settings-secondary {
  flex: 0 0 auto;
  padding: 0.42rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}

.settings-secondary:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* ---------------------------------------------------------------------------
   2026-09-30：有壁纸时的「液态玻璃标题」
   ---------------------------------------------------------------------------
   用户反馈：左下角小模块的液态玻璃能看见壁纸，但首页的大标题和中文小标题
   像一块实色字，压在照片上很挡背景。

   做法不新增任何 DOM，也不给标题铺矩形玻璃板（那会更挡）：
     1) 把标题原有的四层霓虹大光晕收成「贴边高光 + 很紧的暗影 + 一点点冷光」，
        尤其是原来 90~118px 的大范围溢光，它在壁纸上会糊掉一大片；
     2) 标题正文留 84% 左右的不透明度，让壁纸从字形里透出来；
     3) 用极细的内高光描边保留玻璃边缘和可读性。

   ⚠️ 只作用于 data-title-style="glass" + data-wallpaper="on"，
      「原版」和「iPhone 锁屏」两档不会吃到这里的透明度。
   ⚠️ 不要重新加回大范围 drop-shadow；那正是标题「挡背景」的主因。
   --------------------------------------------------------------------------- */
html[data-title-style="glass"][data-wallpaper="on"][data-theme="light"] .hero h1.hero-display,
html[data-title-style="glass"][data-wallpaper="on"][data-theme="dark"] .hero h1.hero-display {
  filter:
    drop-shadow(0 1px 0 color-mix(in srgb, #ffffff 22%, transparent))
    drop-shadow(0 2px 4px color-mix(in srgb, #05101f 42%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, #56c7f5 18%, transparent)) !important;
}

html[data-title-style="glass"][data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="light"] .hero h1.hero-display,
html[data-title-style="glass"][data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="dark"] .hero h1.hero-display {
  filter:
    drop-shadow(0 1px 0 color-mix(in srgb, #ffffff 14%, transparent))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 20px color-mix(in srgb, #96deff 15%, transparent));
}

html[data-title-style="glass"][data-wallpaper="on"] .hero h1.hero-display strong {
  /* 自定义标题色/主题色仍然保留，只把整块字面变透，不再额外盖一层颜色。 */
  opacity: calc(0.84 * var(--title-opacity, 1));
  /* 英文笔画靠得近，描边一粗就会在转折处互相“糊”到一起；
     2026-09-30 用户反馈后压到 0.35px，只保留一圈很细的边缘。 */
  -webkit-text-stroke: 0.35px color-mix(in srgb, #ffffff 38%, transparent);
  text-shadow: none;
}

html[data-title-style="glass"][data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="light"] .hero h1.hero-display strong,
html[data-title-style="glass"][data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="dark"] .hero h1.hero-display strong {
  opacity: calc(0.82 * var(--title-opacity, 1));
  -webkit-text-stroke-color: color-mix(in srgb, #07101d 48%, transparent);
}

html[data-title-style="glass"][data-wallpaper="on"] .hero h1.hero-display span {
  opacity: calc(0.8 * var(--title-opacity, 1));
  -webkit-text-stroke: 0.35px color-mix(in srgb, #ffffff 32%, transparent);
  filter: none;
  text-shadow: 0 1px 2px rgba(4, 10, 20, 0.38);
}

html[data-title-style="glass"][data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="light"] .hero h1.hero-display span,
html[data-title-style="glass"][data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="dark"] .hero h1.hero-display span {
  opacity: calc(0.84 * var(--title-opacity, 1));
  -webkit-text-stroke-color: color-mix(in srgb, #07101d 42%, transparent);
}

html[data-title-style="glass"][data-wallpaper="on"] .hero-cn {
  opacity: calc(0.84 * var(--title-opacity, 1));
  -webkit-text-stroke: 0.35px color-mix(in srgb, #ffffff 34%, transparent);
  text-shadow: 0 1px 3px rgba(4, 10, 20, 0.42);
}

html[data-title-style="glass"][data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="light"] .hero-cn,
html[data-title-style="glass"][data-wallpaper="on"][data-wallpaper-tone="dark"][data-theme="dark"] .hero-cn {
  opacity: calc(0.88 * var(--title-opacity, 1));
  -webkit-text-stroke-color: color-mix(in srgb, #07101d 42%, transparent);
}

html[data-title-style="glass"][data-wallpaper="on"] .hero .eyebrow {
  opacity: calc(0.76 * var(--title-opacity, 1));
  text-shadow: 0 1px 2px rgba(4, 10, 20, 0.38);
}

/* ---------------------------------------------------------------------------
   第三个标题效果：iPhone 锁屏时钟的透明字（2026-09-30）
   ---------------------------------------------------------------------------
   参考思路（不是照抄代码）：
     · iPhone 锁屏时钟不是一块矩形玻璃，而是**半透明白色大数字**；
     · 字面保留上下渐变，顶部略亮、底部略淡，像玻璃受光；
     · 只用紧贴文字的暗影/高光，不做网页液态玻璃那种大面积溢光；
     · 字体换成 SF Pro 风格的紧凑无衬线，靠近锁屏时钟。
   选择器保留独立的 data-title-style="ios"，不会和「原版 / 液态玻璃」互相串。
   --------------------------------------------------------------------------- */
html[data-title-style="ios"][data-wallpaper="on"] {
  --ios-title-rgb: 255 255 255;
}

html[data-title-style="ios"]:not([data-wallpaper="on"])[data-theme="light"] {
  --ios-title-rgb: 13 17 23;
}

html[data-title-style="ios"]:not([data-wallpaper="on"])[data-theme="dark"] {
  --ios-title-rgb: 240 247 255;
}

/* 样式 2 的自定义颜色：只有用户挑了颜色才覆盖自动黑白。 */
html[data-title-style="ios"][data-title-style2-color="on"] {
  --ios-title-rgb: var(--title-style2-rgb);
}

html[data-title-style="ios"][data-wallpaper="on"][data-theme="light"] .hero h1.hero-display,
html[data-title-style="ios"][data-wallpaper="on"][data-theme="dark"] .hero h1.hero-display,
html[data-title-style="ios"]:not([data-wallpaper="on"]) .hero h1.hero-display {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.055em;
  filter:
    drop-shadow(0 1px 0 rgb(var(--ios-title-rgb) / 0.16))
    drop-shadow(0 5px 18px rgba(2, 8, 18, 0.26)) !important;
  opacity: var(--title-opacity, 1);
}

html[data-title-style="ios"] .hero h1.hero-display strong {
  background-image: linear-gradient(
    180deg,
    rgb(var(--ios-title-rgb) / 0.76) 0%,
    rgb(var(--ios-title-rgb) / 0.4) 54%,
    rgb(var(--ios-title-rgb) / 0.66) 100%
  ) !important;
  -webkit-text-stroke: 0.5px rgb(var(--ios-title-rgb) / 0.28) !important;
  opacity: 1;
  text-shadow: none;
  font-weight: 700;
  letter-spacing: -0.055em;
}

html[data-title-style="ios"] .hero h1.hero-display span {
  color: rgb(var(--ios-title-rgb) / 0.58);
  -webkit-text-stroke: 0.35px rgb(var(--ios-title-rgb) / 0.28);
  filter: none;
  opacity: var(--title-opacity, 1);
  text-shadow: 0 1px 5px rgba(2, 8, 18, 0.34);
}

html[data-title-style="ios"] .hero-cn {
  color: rgb(var(--ios-title-rgb) / 0.62);
  -webkit-text-stroke: 0.35px rgb(var(--ios-title-rgb) / 0.24);
  opacity: var(--title-opacity, 1);
  text-shadow: 0 1px 6px rgba(2, 8, 18, 0.34);
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
}

html[data-title-style="ios"] .hero .eyebrow {
  color: rgb(var(--ios-title-rgb) / 0.52);
  opacity: var(--title-opacity, 1);
  text-shadow: 0 1px 4px rgba(2, 8, 18, 0.3);
}

/* ---------------------------------------------------------------------------
   原版标题的可调发光 / 边缘清晰度（2026-09-30）
   ---------------------------------------------------------------------------
   --title-glow-alpha：发光浓度，滑块默认 50，接近原来的亮度；
   --title-glow-scale：光晕大小，50 = 原来的大小；
   --title-edge-width：文字描边宽度，0 = 原始无描边，越大边缘越清楚。
   --------------------------------------------------------------------------- */
html[data-title-style="classic"] {
  --classic-glow-color: #56c7f5;
  /* 边缘描边也跟霓虹色走，不再用纯白/纯黑；
     这样“边缘清晰度”拉高时只会把霓虹边缘收紧，不会变成一圈白光。 */
  --classic-edge-color: color-mix(in srgb, var(--classic-glow-color) 70%, #07101d);
}

html[data-title-style="classic"][data-theme="dark"],
html[data-title-style="classic"][data-wallpaper="on"][data-wallpaper-tone="dark"] {
  --classic-glow-color: #96deff;
  --classic-edge-color: color-mix(in srgb, var(--classic-glow-color) 68%, #ffffff);
}

html[data-title-style="classic"][data-title-accent] {
  --classic-glow-color: var(--title-accent) !important;
}

html[data-title-style="classic"][data-accent-lock] {
  --classic-glow-color: var(--locked-accent) !important;
}

html[data-title-style="classic"] .hero h1.hero-display {
  filter:
    drop-shadow(0 0 calc(3px * var(--title-glow-scale, 1)) color-mix(in srgb, var(--classic-glow-color) calc(var(--title-glow-alpha, 50) * 1%), transparent))
    drop-shadow(0 0 calc(16px * var(--title-glow-scale, 1)) color-mix(in srgb, var(--classic-glow-color) calc(var(--title-glow-alpha, 50) * 1.6%), transparent))
    drop-shadow(0 0 calc(40px * var(--title-glow-scale, 1)) color-mix(in srgb, var(--classic-glow-color) calc(var(--title-glow-alpha, 50) * 1%), transparent))
    drop-shadow(0 0 calc(90px * var(--title-glow-scale, 1)) color-mix(in srgb, var(--classic-glow-color) calc(var(--title-glow-alpha, 50) * 0.66%), transparent)) !important;
  opacity: var(--title-opacity, 1);
}

html[data-title-style="classic"] .hero h1.hero-display strong {
  -webkit-text-stroke: var(--title-edge-width, 0px) var(--classic-edge-color) !important;
  paint-order: stroke fill;
}

/* 2026-10-01：GrowthSync 暖白方案 */
html[data-background-mode="growthsync"] { --bg:#f3f1e8; --bg-strong:#fffdf5; --surface:rgba(255,253,245,.88); --surface-solid:#fffdf5; --surface-muted:rgba(25,35,20,.055); --text:#182019; --text-soft:#4c584b; --text-faint:#6f786d; --border:rgba(24,32,25,.14); --border-strong:rgba(24,32,25,.26); --accent:#b8ef3f; --accent-ink:#355411; --active-accent:#b8ef3f; --focus:#1b65ff; --glass-bg:linear-gradient(140deg,rgba(255,255,255,.76),rgba(255,255,255,.34)); --glass-border:rgba(24,32,25,.14); --glass-highlight:rgba(255,255,255,.9); --glass-shadow:0 18px 50px rgba(40,48,31,.1); }
html[data-background-mode="growthsync"] body { background:#f3f1e8; }
html[data-background-mode="growthsync"] .module-card, html[data-background-mode="growthsync"] .bookmark-section, html[data-background-mode="growthsync"] .hero-stats { border-color:rgba(24,32,25,.13); box-shadow:0 18px 45px rgba(40,48,31,.07); }
html[data-background-mode="growthsync"] .module-card:hover { border-color:#1b65ff; transform:translateY(-4px); }
html[data-background-mode="growthsync"] .hero h1.hero-display strong { background-image:linear-gradient(100deg,#172118 0%,#1b65ff 48%,#172118 100%); }
html[data-background-mode="growthsync"] .hero h1.hero-display { filter:none; }
html[data-background-mode="growthsync"] .status-dot { background:#b8ef3f; box-shadow:0 0 0 5px rgba(184,239,63,.22); }
html[data-title-style="tanweer"] .hero h1.hero-display { max-width:1280px; font-family:var(--hero-title-font, Impact),Haettenschweiler,"Arial Narrow Bold","Arial Narrow",sans-serif; font-weight:900; font-style:normal; letter-spacing:-.07em; line-height:.88; text-align:left; text-transform:uppercase; filter:none !important; }
html[data-title-style="tanweer"] .hero h1.hero-display span { margin:0 0 .2em; color:var(--text); font-size:.36em; font-style:normal; font-weight:900; letter-spacing:.02em; text-indent:0; }
html[data-title-style="tanweer"] .hero h1.hero-display strong { color:var(--text); background:none; -webkit-text-fill-color:currentColor; font-size:1.14em; letter-spacing:-.085em; text-wrap:balance; }
html[data-title-style="tanweer"] .hero-cn { margin-left:0; text-align:left; color:var(--accent-ink,var(--text-soft)); font-size:clamp(1rem,2vw,1.25rem); letter-spacing:.08em; text-indent:0; }
html[data-title-style="tanweer"] .hero { align-items:start; }
/* ═══════════════════════════════════════════════════════════════════════════
   页脚（2026-10-01 重做，版本 20261013-hotboard8）
   ---------------------------------------------------------------------------
   用户要求：① 删掉「CURATED WITH INTENT + 那句说明」；② 手机上两个社交按钮
   大小要一致；③ 社交按钮和统计胶囊做得更高级一点，位置摆在最底部恰到好处。

   参考 Attio / Linear / Mobbin 这类站的页脚做法：
     · 一条细分线开场 → 第一行放「有用的东西」（社交 + 数据）→ 第二行才是小字版权
     · 社交按钮做成等宽卡片（圆角 + 细边 + 悬停轻抬），名字与账号分两级
     · 统计数字单独放大、用等宽数字（tabular-nums），读起来像一组数据而不是一句话

   ⚠️ 两个按钮等宽必须靠 grid（下面 .social-list 那一行），**不要**用 padding 撑 ——
      哔哩哔哩 / X 这两条文案长度不同，padding 撑出来必然一大一小（用户就是这么发现的）。
   ⚠️ .site-footer 原本自带一条上边框，这里把它去掉，让整块页脚只有开场那一条线。
   ═══════════════════════════════════════════════════════════════════════════ */
.footer-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 3rem auto 0;
  padding: 1.75rem 0 1.35rem;
  border-top: 1px solid var(--border);
}

.footer-utility .social-links {
  margin: 0;
}

/* 桌面：两个按钮等宽（11.5rem 起），手机：一人一半，永远一样大 */
.footer-utility .social-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11.5rem, 1fr);
  gap: 0.6rem;
}

.footer-utility .social-link {
  min-height: 3.4rem;
  min-width: 0;
  gap: 0.65rem;
  padding: 0.45rem 0.95rem 0.45rem 0.5rem;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.footer-utility .social-link:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.footer-utility .social-link img {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.social-copy {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.social-copy strong,
.social-copy small {
  display: block;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-copy strong {
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.social-copy small {
  margin-top: 0.12rem;
  color: var(--text-faint);
  font-size: 0.7rem;
}

/* 统计：数字放大 + 等宽数字，标签缩小，读起来像一组数据 */
.footer-stats {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.footer-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
}

/* ⚠️ 这条必须有：#hero-stats-text 是 span（inline），里面那些分隔线与数字块
   全靠它做 flex 容器；少了它，.footer-stat-sep 的 width/height 不生效、
   分隔线根本画不出来，数字和单位会挤成一坨（实测踩过）。 */
#hero-stats-text {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.62rem;
}

.footer-stat strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.footer-stat-label {
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 550;
}

.footer-stat-sep {
  display: block;
  flex: none;
  width: 1px;
  height: 1.05rem;
  background: var(--border-strong);
}

.footer-stat-badge {
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  color: var(--accent-ink, var(--accent));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
}

/* 小字那行：让出上边框给 .footer-utility，只保留一点点间距 */
.site-footer {
  border-top: 0;
  padding-top: 0.35rem;
}

html[data-theme="dark"] .footer-utility .social-link,
html[data-theme="dark"] .footer-stats {
  box-shadow: none;
}

html[data-theme="dark"] .footer-utility .social-link:hover {
  box-shadow: none;
  background: color-mix(in srgb, #1c1c1f 92%, transparent);
}

@media (max-width: 720px) {
  .footer-utility {
    /* 和页头 / 正文同一套左右边距（18px），整页左边缘一条线 */
    width: min(calc(100% - 2.25rem), var(--max-width));
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.4rem;
  }

  /* 手机上两个按钮严格一人一半，彻底解决「大小不统一」 */
  .footer-utility .social-links,
  .footer-utility .social-list {
    width: 100%;
  }

  .footer-utility .social-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .footer-utility .social-link {
    min-height: 3.5rem;
    padding: 0.4rem 0.6rem 0.4rem 0.45rem;
    gap: 0.5rem;
  }

  .footer-utility .social-link img {
    width: 2.1rem;
    height: 2.1rem;
  }

  .social-copy strong {
    font-size: 0.78rem;
  }

  .social-copy small {
    font-size: 0.64rem;
  }

  .footer-stats {
    align-self: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    white-space: normal;
  }

  html[data-title-style="tanweer"] .hero h1.hero-display {
    font-size: clamp(3.2rem, 18vw, 6.2rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-01（20261013-hotboard8）：手机端性能档
   ---------------------------------------------------------------------------
   用户原话：「电脑端浏览还行，但一到手机端就感觉卡卡的，不是很跟手，帧率不高」。

   电脑端一切照旧，这里只在「小屏 / 触摸设备」上做三件事（视觉几乎不变）：
     ① 液态背景：JS 侧已降分辨率 + 降噪声层数 + 封 30 帧 + 滚出屏幕即停；
        这里再拿掉画布上的 filter 和 mix-blend-mode —— 那两样会让整块全屏图层
        每一帧都要被重新混合一遍，是手机上最贵的一笔开销。
     ② 搜索框：那圈「旋转的光带」是一个 200vmax（手机上约 1700×1700）的图层，
        每秒都在转，外面还套了 14px 模糊。手机上改成静态光带、去掉外圈模糊，
        观感基本一样，但滚动时不再每一帧重做大面积重绘。
     ③ 卡片右上角那团 blur(52px) 的光斑 + 标题的四层发光：光斑在手机上直接不画
        （本来只有 8% 不透明度），标题光降到两层。

   为什么用 !important：下面这几条要覆盖的是「带 html[…] 前缀的高特异性规则」
   （比如 html[data-theme="light"] .liquid-canvas），不加 !important 压不住。
   ⛔ 电脑端不受影响，不要把这些规则挪出媒体查询。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px), (pointer: coarse) {
  /* ① 液态背景：去掉全屏滤镜与正片叠底 */
  .liquid-canvas {
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* ② 搜索框：静态光带 + 去掉外圈模糊 */
  .search-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .search-glow {
    display: none;
  }

  .search-box-beam-spin,
  .search-glow > i {
    animation: none;
    will-change: auto;
  }

  /* ③ 卡片光斑不画（手机端几乎看不见，却要被模糊一整块） */
  .card-glow {
    display: none;
  }

  /* 标题发光：四层降到两层（有壁纸的加强版也一起压）

     ⚠️ 这里的选择器为什么这么长：标题发光有好几条带 !important 的规则
     （锁色 `html[data-accent-lock][data-theme=…]`、浅/深标题色
     `html[data-title-tone][data-theme=…]`、液态玻璃+壁纸 等），
     最高的一条是 `html[data-title-style][data-wallpaper][data-theme]`（0,5,2）。
     想压住它们，本条的权重必须 ≥ (0,5,2)：下面 4 个属性 + 2 个类 = (0,6,3)。
     少了这几个属性，手机上就还是四层发光（实测踩过）。 */
  html[data-theme][data-language][data-title-style][data-background-mode] body .hero h1.hero-display {
    filter:
      drop-shadow(0 0 4px rgba(86, 199, 245, 0.42))
      drop-shadow(0 0 18px rgba(86, 199, 245, 0.5)) !important;
  }

  html[data-theme="dark"][data-language][data-title-style][data-background-mode] body .hero h1.hero-display {
    filter:
      drop-shadow(0 0 4px rgba(150, 222, 255, 0.4))
      drop-shadow(0 0 18px rgba(150, 222, 255, 0.46)) !important;
  }

  /* 「Tanweer 展览字」和「GrowthSync 暖白」本来就没有发光，保持不发光 */
  html[data-theme][data-language][data-title-style="tanweer"][data-background-mode] body .hero h1.hero-display,
  html[data-theme][data-language][data-title-style][data-background-mode="growthsync"] body .hero h1.hero-display {
    filter: none !important;
  }

  /* ④ 弹层：手机上不做实时毛玻璃（这些面板本身就是实底 + 阴影） */
  .settings-scrim,
  .sidebar-scrim,
  .music-library-scrim,
  .hot-flip-scrim {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   明暗切换的整体淡入淡出（2026-10-01 foot2）
   ---------------------------------------------------------------------------
   用户原话：「黑暗与白天模式按钮切换的过渡动画不是很流畅，感觉很僵硬，
   有明显的卡顿，要特别丝滑、优雅、简约、直接」。

   机制在 app.js 的 runThemeSwitch()：点按钮时用浏览器原生的 View Transitions
   给整页做一次交叉淡入淡出，这里是它的时长和曲线。

   · 280ms + cubic-bezier(.4,0,.2,1)：这是 Material 的「标准缓动」，
     起步快、收尾稳 —— 既不拖泥带水（用户要「直接」），也不会像 linear 那样生硬。
   · 新旧两层都写死 280ms，保证两边严格同步（只改一边会出现「闪一下」的中缝）。
   · 顶层只淡 root 这一层；别的元素不单独设 view-transition-name，
     所以整页是一起淡，不会出现局部漂移。
   ⚠️ 不要在这里加 filter / blur —— 那会把这层本来免费的合成动画重新变成逐帧重绘。
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes theme-switch-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes theme-switch-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

::view-transition-old(root) {
  animation: theme-switch-out 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: theme-switch-in 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* 切换的那 280ms 里，先把元素自己那些零散的 transition 关掉：
   否则「背景已经跳完、边框还在爬」，正是用户说的那种僵硬。
   只关 transition，不动 animation（跑马灯、宠物照常）。 */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* 系统开了「减少动态效果」的用户直接瞬间切换，不做淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   手机端顶部重排（2026-10-03，版本 20261013-hotboard8）
   ---------------------------------------------------------------------------
   用户原话：照着 windx.co.uk 和 reddit.com 的手机端顶部重排，只做最顶部那一条：
     ① 左上角换成「三条横线」的侧边栏按钮；
     ② 站名跟在三条横线右边，要有一个独特的样式和颜色；
     ③ 搜索框照 Reddit 手机端 1:1（大小、圆角弧度、浅灰填充都要一样）；
     ④ 头像挪进搜索框里面；
     ⑤ 点开搜索框那一下要顺滑（参考 windx 的丝滑感）。

   ⚠️ 全部只在 ≤720px 生效，电脑端一个字节不变（桌面端仍然是「头像 + 站名 + 居中搜索框」）。
   ⚠️ 头像在搜索框里用的是 `./assets/avatar.jpg`：_worker.js 会把整页这个路径统一换成
      `/api/avatar?v=…`，所以后台换过头像之后这里也会跟着变，不用另外写 JS。
   ⚠️ 这里的「顺滑」只用 transform / box-shadow / background-color 做过渡，
      绝不动 width / margin（那会引起每帧重排，手机上必卡 —— 性能档那一节的教训）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 三条横线：电脑端不显示 */
.brand-burger {
  display: none;
  /* 照 reddit / windx 手机端那条汉堡：三条短线、细、紧凑。
     第一版做成了 24×17.6px，又长又高，用户说「太丑了」—— 现在 18.4×12.8px。 */
  width: 1.15rem;
  height: 0.8rem;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
}

.brand-burger i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* 搜索框里的小头像：电脑端不显示 */
.search-avatar {
  display: none;
}

/* 搜索态左边的返回箭头：电脑端不显示 */
.search-back {
  display: none;
}

/* 搜索态那层暗幕：平时完全不存在（不占位、不能点、不参与无障碍） */
.search-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  opacity: 0;
  background: rgba(12, 16, 28, 0.34);
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 720px) {
  /* ① + ② 第一行：三条横线 + 站名（站名给一个品牌色，像 reddit 那个橙色词标） */
  .site-header .brand {
    /* 汉堡和站名之间留一点气（Reddit 那条大约 20px，我们取 12px 更紧凑） */
    gap: 0.75rem;
    /* 整行统一成 44px 高的一条基线：汉堡、站名、右边三个按钮都在同一条线上 */
    min-height: 2.75rem;
    align-items: center;
  }

  .brand-burger {
    display: flex;
  }

  /* 头像挪进搜索框了，这里就不重复出现 */
  .site-header .brand-mark {
    display: none;
  }

  /* ⚠️ 选择器写成 `html[data-language] …`：上面有一条英文专属规则
     `html[data-language="en"] .brand-copy strong`，权重是 (0,2,2)，
     比 `.site-header .brand-copy strong` 的 (0,2,1) 高 —— 而本站默认语言正是英文，
     少写一个 [data-language] 就会被它顶掉，站名不会变色也不会变大（实测踩过）。 */
  html[data-language] .site-header .brand-copy strong {
    color: var(--accent-ink, var(--accent));
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .site-header .brand-copy small {
    display: none;
  }

  /* 右上角那三个：外框照「页脚那两个主页按钮」来做（2026-10-03 第五版）。
     中间试过一版「完全去掉底和边」（纯图标，像 Reddit），用户反馈：
     「去掉之后就没有我之前那个外边框的效果了…你把这三个钮的外框做成
     【网站底部那两个主页链接按钮】那种效果就行了」——
     也就是 1px 细边 + 16px 圆角 + 淡淡底色 + 一层很轻的投影，
     和 .footer-utility .social-link 完全同一套观感。 */
  .site-header .header-actions {
    min-height: 2.75rem;
    flex-direction: row;
    align-items: center;
  }

  .site-header .header-tools {
    min-height: 2.75rem;
    align-items: center;
    gap: 0.35rem;
  }

  .site-header .header-actions .icon-button {
    /* ⚠️ 这里必须是 --glass-border（白 55%），不能写 --border（黑 12%）！
       页脚那两个主页按钮的外框之所以看着「有渐进感、很柔和」，是因为：
         · 边 = var(--glass-border)（白 55%，在浅色底上几乎看不见）
         · 真正被看见的是那层 box-shadow: 0 1px 2px rgba(15,23,42,.06) ——
           模糊的投影自带渐隐，看着就像一条渐进的线；
       我上一版给顶栏按钮写成了 --border（黑色 12%）+ 同样的投影，
       于是变成一条又实又粗的硬线，跟页脚的完全不是一回事（用户一眼就看出来了）。
       深色主题下 --border 和 --glass-border 刚好同值，所以只在浅色下露馅。 */
    border-color: var(--glass-border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    backdrop-filter: none;
  }

  .site-header .header-actions .icon-button:active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    transform: none;
  }

  html[data-theme="dark"] .site-header .header-actions .icon-button {
    box-shadow: none;
  }

  .site-header .header-actions .language-toggle span {
    font-size: 0.78rem;
  }

  /* 图标略放大一档：Reddit 那排图标约 20~24px，我们原来 1.2rem（19px） */
  .site-header .header-actions .icon-button svg {
    width: 1.3rem;
    height: 1.3rem;
  }

  /* ③ + ④ 第二行：Reddit 那条通栏搜索胶囊 */
  .site-header .hero-search {
    /* 2026-10-03：用户反馈手机端「搜索框及以上的位置太高」。
       搜索框本身仍保持 48px，只把第一行到搜索框之间的空隙
       从 8px 收到 4px，顶栏整体更紧凑但不碰交互尺寸。 */
    margin-top: 0.25rem;
  }

  .site-header .search-box {
    /* ⚠️ 尺寸是拿用户那张 Reddit 截图逐像素量出来的：
       胶囊高 144 物理像素，同一张图里汉堡是 48×42 → DPR≈2.75~3，
       换算下来 Reddit 那条是 48~52 CSS px 高。
       2026-10-06：用户要求胶囊高度再降到 **46px**，其余按比例缩。
       ⚠️ 别再用「看起来差不多」去猜这个尺寸，要量就量截图里的物理像素。 */
    height: 2.875rem;
    gap: 0.6rem;
    padding: 0 0.6rem 0 0.625rem;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* ⑤ 只过渡这三样，都是合成/绘制属性，不触发重排 */
    transition:
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 220ms ease;
  }

  /* 填充色写死成 Reddit 那条的灰（浅色 #f6f7f8 / 深色一层淡白），
     比原来的 --surface-muted 更浅一点，才不会显得「压得重」。 */
  html[data-theme="light"] .site-header .search-box {
    background: #f6f7f8;
  }

  html[data-theme="dark"] .site-header .search-box {
    background: rgba(255, 255, 255, 0.07);
  }

  /* 搜索框里面那些装饰在手机上全部去掉，得到 Reddit 那种干净的浅灰胶囊 */
  .search-box-beam,
  .search-glow,
  .search-box-icon {
    display: none;
  }

  .search-avatar {
    display: inline-flex;
    /* 46px 的胶囊里放 1.75rem（28px）的头像：比例 0.61，跟上一版基本一致 ——
       Reddit 那个 snoo 占胶囊约 0.69，用户明确说过「头像只占一点位置」才好。 */
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-solid);
    box-shadow: 0 0 0 2px var(--surface-solid);
    cursor: pointer;
  }

  .search-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  /* 没输入内容时提示文字居中（Reddit 就是这样）；一旦开始打字就回到左对齐 */
  .site-header #search-input {
    font-size: 1.03rem;
    text-align: center;
  }

  .site-header #search-input:not(:placeholder-shown) {
    text-align: left;
  }

  /* 点开的那一下：轻轻放大一点 + 抬起一层柔影，背景从浅灰变白 */
  .site-header .search-box:focus-within {
    transform: scale(1.012);
    background: var(--surface-solid);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  }

  html[data-theme="dark"] .site-header .search-box:focus-within {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }

  /* 下拉结果弹出来时更顺一点（只动 transform / opacity） */
  .site-header .search-drop {
    animation: search-drop-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   手机端顶栏：细分隔线 + 点开搜索框进入「搜索态」（2026-10-03 第三版）
   ---------------------------------------------------------------------------
   用户第二轮反馈（逐条对着参考图）：
     · 顶栏和下面的大标题之间要有一条明显的细线（windx 就是那样分隔的）；
     · 点一下搜索框要「进入一个搜索栏的位置」，像 reddit 那样进搜索页，
       而且要像 windx 那样丝滑。
   做法：进入搜索态时给 html 挂一个 search-focus 类，然后
     · 第一行（汉堡 + 站名 + 右侧按钮）淡出并收起 → 搜索胶囊升到最顶部；
     · 胶囊左边长出返回箭头、里面的头像让位（reddit 的搜索页也是这样）；
     · 下面压一层暗幕，点暗幕 / 点返回箭头 / 按 Esc 都能退回来；
     · 顶栏在搜索态下变成不透明整条，暗幕不会透到顶栏上。
   动画只碰 opacity / transform / max-height（一次性的、不跟手），
   绝不改 width —— 所以胶囊的宽度前后完全一致，不会跳。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* 顶栏和下面内容之间那条细线。.site-header 是居中的定宽容器，
     直接加 border 只能画到内容宽度，所以用伪元素铺满整屏再居中拉回来。 */
  .site-header {
    position: relative;
    /* 2026-10-03：顶栏上下留白各收一档；配合上面搜索框上方少掉的 4px，
       手机端「搜索框及以上」合计缩短约 12px（129 → 117）。
       2026-10-06：顶部再往上收，只留最小安全距离；搜索框 48px、按钮 44px 不动。 */
    padding: max(0.25rem, env(safe-area-inset-top)) 0 0.55rem;
  }

  .site-header::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    background: var(--border);
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* 第一行的淡出 / 收起（只在搜索态动，平时就是原样） */
  .site-header .brand,
  .site-header .header-actions {
    max-height: 4rem;
    transition:
      opacity 180ms ease,
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
      max-height 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.search-focus .site-header {
    /* 整条铺满屏宽 + 加 10px 内边距：内容宽度和原来的 370px 一模一样，
       所以胶囊不会跳宽度，但顶栏有了不透明底色，暗幕不会透上来。 */
    width: 100%;
    max-width: none;
    margin: 0;
    /* 左右内边距 = 常态下那 18px 边距，返回箭头才和整页左边缘对齐 */
    padding: 0.6rem 1.125rem 0.7rem;
    z-index: 90;
    background: var(--bg-strong);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  }

  html[data-theme="dark"].search-focus .site-header {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  }

  html.search-focus .brand,
  html.search-focus .header-actions {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }

  /* ⚠️ 必须把 min-height 也清掉：.brand 基础样式里有 min-height: 2.75rem，
     而 CSS 规定 min-height 大过 max-height 时以 min-height 为准 ——
     只写 max-height: 0 的话这一行根本收不起来，顶栏会留一大块空白（实测踩过）。 */
  /* ⚠️ 同一个坑在 2026-10-03 第五版又踩了一次：为了让第一行四个控件「高度统一」，
     我给 .header-actions / .header-tools 也加了 min-height: 2.75rem，
     结果搜索态里它们同样收不起来，顶栏上方又留出一片空白（用户：
     「点完之后上面还留了一片空白，是什么情况？」）。所以这里要一并清掉。 */
  html.search-focus .brand,
  html.search-focus .header-actions,
  html.search-focus .header-tools {
    min-height: 0;
  }

  html.search-focus .hero-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
  }

  html.search-focus .search-back {
    display: inline-flex;
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--text);
    background: transparent;
    cursor: pointer;
  }

  html.search-focus .search-back svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  html.search-focus .search-box {
    flex: 1 1 auto;
    min-width: 0;
  }

  html.search-focus .search-avatar {
    display: none;
  }

  html.search-focus .search-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* 搜索态下面那排「热门搜索」：整块贴在顶栏下沿（绝对定位，不占文档流，
     所以进入搜索态的瞬间页面内容不会往下跳）。 */
  html.search-focus .search-suggest {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 0.9rem 0.9rem 1.15rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-strong);
    box-shadow: 0 20px 34px -22px rgba(15, 23, 42, 0.4);
  }

  /* 顶栏自己那条细线让位给「热门搜索」这块的底边，免得两条线叠在一起 */
  html.search-focus .site-header::after {
    opacity: 0;
  }
}

/* 「热门搜索」平时和电脑端都不显示 */
.search-suggest {
  display: none;
}

.search-suggest-title {
  margin: 0 0 0.6rem;
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.search-suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.search-suggest-chip {
  padding: 0.44rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.search-suggest-chip:active {
  transform: scale(0.97);
}

/* ---------------------------------------------------------------------------
   2026-10-07 桌面端最终收口（sidebar5）
   1) 左栏真正固定到视口顶部，不留上下空隙，内容多时允许内部滚动；
   2) 底部跑马灯 / 社交链接 / 页脚整体让出左栏宽度，不再被遮住；
   3) 大标题、聊天框、模块网格统一 960px，左边缘严格对齐；
   4) 模块简介最多 3 行并预留右下角数量位置，长文字不遮「xx 个网站」。
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  :root {
    --rail-width: 288px;
  }

  /* 侧栏整屏铺开：头像在上、目录填中间、音乐组件贴底；
     目录本身不再产生内部滚动。 */
  .site-nav {
    position: sticky;
    top: 6px;
    display: flex;
    height: calc(100dvh - 12px);
    max-height: none;
    flex-direction: column;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-width: none;
    border-right: 0;
    background: transparent;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  /* 最顶部一条与左栏同色的过渡带，横跨左右，不再露出右侧白边。 */
  .page-shell::before {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
    height: 6px;
    background: var(--desktop-nav-bg);
    content: "";
    pointer-events: none;
  }

  /* 左栏底色只放在 page-shell 里，并在它结束前淡出；
     这样不会再延伸到跑马灯/页脚下面，也不会在底部突然断出色条。 */
  .page-shell {
    padding-top: 6px;
    background-image: linear-gradient(
      to bottom,
      var(--desktop-nav-bg) 0,
      var(--desktop-nav-bg) calc(100% - 300px),
      color-mix(in srgb, var(--desktop-nav-bg) 62%, transparent) calc(100% - 210px),
      transparent calc(100% - 120px)
    );
    background-repeat: no-repeat;
    background-position: left top;
    background-size: var(--rail-width) 100%;
  }

  /* 右侧大面板恢复四角圆角。 */
  .page-shell > main {
    position: relative;
    z-index: 0;
    width: auto;
    margin-right: 0;
    border: 0;
    background: transparent;
  }

  /* 垫层和面板用同一套 Arcade 式蓝渐变；圆角缺口就不会再透白。 */
  .page-shell > main::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(
        120% 88% at 94% 102%,
        #0a84ff 0%,
        #2b96ff 30%,
        #79c2ff 58%,
        #d9ecff 80%,
        #f7fbff 100%
      );
    content: "";
    pointer-events: none;
  }

  .page-shell > main::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 28px;
    background:
      radial-gradient(
        120% 88% at 94% 102%,
        #0a84ff 0%,
        #2b96ff 30%,
        #79c2ff 58%,
        #d9ecff 80%,
        #f7fbff 100%
      );
    box-shadow: 0 18px 48px rgba(11, 87, 208, 0.12);
    content: "";
    pointer-events: none;
  }

  /* 目录保持呼吸感；条目高度收敛后，音乐组件能完整排在目录下方。 */
  .site-nav-list {
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.02rem;
    overflow: visible;
  }

  .site-nav-item {
    min-height: 1.75rem;
    padding: 0.18rem 0.6rem;
    line-height: 1.4;
  }

  /* 左上头像/站名放大一档，贴近 gainfg 的顶部信息尺寸。 */
  .site-nav .brand {
    min-height: 58px;
    gap: 10px;
    padding: 4px 0 14px;
  }

  .site-nav .brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  html[data-language="en"] .site-nav .brand-copy strong {
    font-size: 1.14rem;
  }

  .site-nav .brand-copy strong {
    font-size: 1.14rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }

  /* 「Have fun」只保留主名字，不再在下面显示英文副名。 */
  #sidebar-open .brand-copy small {
    display: none;
  }

  /* 聊天框、标题和模块网格同宽同左边线。 */
  .page-shell > main > .hero,
  .page-shell > main > .module-home,
  .page-shell > main > .hero-search {
    width: min(960px, 100%);
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
  }

  .page-shell > main > .module-home {
    margin-top: 1.4rem;
  }

  .module-card {
    padding-bottom: 2.9rem;
  }

  .module-card-description {
    display: -webkit-box;
    max-width: none;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .module-count {
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
  }

  /* 音乐组件回到目录后面的正常文档流，不用 sticky 盖到目录上。 */
  .music-dock-wrap {
    position: static;
    bottom: auto;
    z-index: auto;
    flex: 0 0 auto;
    width: 13.25rem;
    margin-top: auto;
    padding-top: 0.9rem;
  }

  .music-dock {
    width: 100%;
    height: 13.75rem;
    aspect-ratio: auto;
    overflow: hidden;
    padding: 1.75rem 0.65rem 0.7rem;
    box-shadow: 0 8px 20px rgba(10, 14, 22, 0.06);
  }

  .music-dock-stage {
    flex: 0 0 auto;
    margin-top: 0;
  }

  /* 小组件里的歌名/歌词固定占一行，不能被 flex 压成 0 高。 */
  .music-dock-title {
    flex: 0 0 auto;
    height: 1.15rem;
    margin: 0.05rem 0 0;
  }

  .music-dock-lyric {
    flex: 0 0 auto;
    height: 1.15rem;
    margin: 0.1rem 0 0;
  }

  /* 用户要的是小组件上直接显示一行歌词，翻译行收起来。 */
  .music-dock-lyric em {
    display: none;
  }

  /* 跑马灯继续避开左栏；页脚社交和版权按用户要求直接贴屏幕最左。 */
  .bottom-marquee {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    width: calc(100% - var(--rail-width) - 14px) !important;
    max-width: none;
    margin-top: 1.1rem !important;
    margin-right: 14px !important;
    margin-bottom: 0.55rem !important;
    margin-left: var(--rail-width) !important;
    padding-top: 0;
    border-top: 0;
  }

  .footer-utility {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    width: calc(100% - 14px) !important;
    max-width: none;
    margin-top: 0.35rem !important;
    margin-right: 14px !important;
    margin-bottom: 0;
    margin-left: 0 !important;
    padding-right: 0;
    padding-left: 1rem;
    border-top: 0;
  }

  .site-footer {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    width: calc(100% - 14px) !important;
    max-width: none;
    margin-right: 14px !important;
    margin-left: 0 !important;
    padding-left: 1rem;
    justify-content: flex-start;
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .bottom-marquee {
    padding-right: 0;
    padding-left: 0;
  }

  /* 第一行保持两端对齐：B 站 / X 贴屏幕最左，网站数量胶囊贴右。 */
  .footer-utility {
    justify-content: space-between;
  }

  .footer-utility .footer-stats {
    margin-left: auto;
  }

  /* 暗色下的蓝色渐变面板：保留蓝色氛围，但不会刺眼。 */
  html[data-theme="dark"] .page-shell > main::before,
  html[data-theme="dark"] .page-shell > main::after {
    background:
      radial-gradient(
        120% 88% at 94% 102%,
        #0a84ff 0%,
        #1450b8 28%,
        #10275c 60%,
        #0b1120 100%
      );
  }

  html[data-theme="dark"] .page-shell > main::after {
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  }

  /* 绝对定位挂在文档顶部：视觉上贴右侧大面板右上角，但会随页面一起滚走。 */
  .site-header {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    z-index: 30;
  }

  /* 跑马灯视口换算回屏幕最左，文字能一直滚到最左边才消失。 */
  .bottom-marquee .hero-marquee-viewport {
    width: 100vw;
    margin-left: calc(-1 * var(--rail-width));
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (min-width: 1200px) and (max-height: 760px) {
  .site-nav-item {
    min-height: 1.55rem;
    padding: 0.07rem 0.55rem;
    line-height: 1.2;
  }

  .site-nav-list {
    gap: 0;
  }

  .music-dock {
    height: 13.25rem;
    padding-top: 2rem;
  }
}

@media (min-width: 1200px) and (max-width: 1279px) {
  :root {
    --rail-width: 288px;
  }
}

/* 收起按钮只在桌面端出现。 */
.site-nav-collapse {
  display: none;
}

/* ---------------------------------------------------------------------------
   2026-10-09：侧栏收起/展开 + arena 风格行距 + 右侧白边收口
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  html[data-sidebar="collapsed"] {
    --rail-width: 72px;
  }

  html[data-sidebar="expanded"] {
    --rail-width: 288px;
  }

  /* arena.ai 实测收起按钮 32×32，贴在侧栏顶部右侧。 */
  .site-nav-collapse {
    position: absolute;
    top: 2px;
    right: 8px;
    z-index: 6;
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--desktop-nav-border);
    border-radius: 8px;
    color: var(--text-soft);
    background: var(--desktop-nav-active);
    box-shadow: 0 2px 8px rgba(20, 41, 77, 0.08);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
  }

  .site-nav-collapse:hover,
  .site-nav-collapse:focus-visible {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--desktop-nav-border));
    background: var(--desktop-nav-hover);
  }

  /* 收起时只保留窄栏、头像和按钮；展开后才显示目录与音乐组件。 */
  html[data-sidebar="collapsed"] .site-nav-head,
  html[data-sidebar="collapsed"] .site-nav-list,
  html[data-sidebar="collapsed"] .music-dock-wrap {
    display: none;
  }

  html[data-sidebar="collapsed"] .site-nav .brand {
    justify-content: center;
    padding: 48px 0 0;
  }

  html[data-sidebar="collapsed"] .site-nav .brand-mark {
    width: 42px;
    height: 42px;
  }

  html[data-sidebar="collapsed"] .site-nav .brand-copy {
    display: none;
  }

  html[data-sidebar="expanded"] .site-nav .brand {
    padding-right: 42px;
  }

  /* 目录行距向 arena 靠拢：一行约 36px，文字不再挤在一起。 */
  .site-nav-list {
    gap: 0.14rem;
  }

  .site-nav-item {
    min-height: 2.25rem;
    padding: 0.42rem 0.68rem;
    font-size: 0.88rem;
    line-height: 1.4;
  }

  .site-nav-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  /* 右侧蓝色面板右下角补一条始终清晰的白色内边。 */
  .page-shell > main {
    isolation: isolate;
  }

  .page-shell > main::after {
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.58),
      inset -2px -2px 0 rgba(255, 255, 255, 0.3),
      0 18px 48px rgba(11, 87, 208, 0.12);
  }

  html[data-theme="dark"] .page-shell > main::after {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.14),
      0 18px 48px rgba(0, 0, 0, 0.34);
  }
}

@media (min-width: 1200px) and (max-width: 1279px) {
  html[data-sidebar="collapsed"] {
    --rail-width: 64px;
  }

  html[data-sidebar="expanded"] {
    --rail-width: 264px;
  }
}

/* Merged from refinement.css: keep one render-blocking stylesheet to prevent mobile FOUC. */
/* Starmap / editorial refinement, 2026-10-09.
   Scoped to the public site: admin and custom wallpaper controls stay independent.
   Reference principles: clear hierarchy, quiet surfaces, consistent rhythm.
   No per-card blur, new animation framework, or duplicate audio elements. */
.site-refined {
  --ref-ink: #202735;
  --ref-muted: #657080;
  --ref-line: #e3e7ed;
  --ref-surface: #ffffff;
  --ref-soft: #f6f8fb;
  --ref-accent: #365edc;
  /* 桌面端给右侧留出的完整内容宽度；手机/平板仍由各自的响应式规则控制。 */
  --ref-content: 1320px;
}
html[data-theme="dark"] .site-refined {
  --ref-ink: #edeef2;
  --ref-muted: #a1a5b0;
  --ref-line: #2b2d34;
  --ref-surface: #16171b;
  --ref-soft: #1d1f25;
  --ref-accent: #a5b7ff;
}
.site-refined :is(button,a,input,textarea,select):focus-visible {
  outline: 2px solid var(--ref-accent);
  outline-offset: 4px;
}
.site-refined .page-shell > main { min-width: 0; }
.site-refined .hero { text-align: left; justify-items: start; gap: 0; }
.site-refined .hero .eyebrow {
  margin: 0 0 20px;
  color: var(--ref-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .14em;
  line-height: 1.6;
}
.site-refined #hero-display {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
  /* 2026-10-11：后台挑的「大标题字体」走 --hero-title-font（没挑就用 --font-display，
     也就是原来的 Geist）。字体库见 public/assets/cover-fonts。 */
  font-family: var(--hero-title-font, var(--font-display));
  font-size: clamp(36px, 5vw, 66px);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.site-refined #hero-display-lead {
  margin: 0 0 7px;
  font-size: .7em;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.035em;
  color: var(--ref-ink);
}
.site-refined #hero-display-main { font-weight: 650; line-height: 1.1; }
/* Original title keeps its configurable colour/opacity, without the 90px halo. */
html[data-title-style="classic"] .site-refined #hero-display {
  filter: drop-shadow(0 0 calc(3px * var(--title-glow-scale, 1)) color-mix(in srgb, var(--title-accent, #365edc) calc(var(--title-glow-alpha, 50) * .1%), transparent)) !important;
}
.site-refined .hero-cn {
  max-width: 580px;
  margin: 19px 0 0;
  color: var(--ref-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.01em;
}
.site-refined .hero-search .search-glow,
.site-refined .hero-search .search-box-beam { display: none; }
.site-refined .hero-search .search-box {
  background: var(--ref-surface);
  border: 1px solid var(--ref-line);
  box-shadow: 0 4px 14px rgb(22 35 65 / 4%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-refined .hero-search .search-box:focus-within {
  border-color: var(--ref-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ref-accent) 12%, transparent);
  transform: none;
}
.site-refined .hero-search .search-box::after { content: none; }
.site-refined .collection-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px;
}
.site-refined .section-kicker {
  margin: 0 0 7px;
  color: var(--ref-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .13em;
}
.site-refined .collection-heading h2 {
  margin: 0;
  color: var(--ref-ink);
  font-size: 25px;
  font-weight: 550;
  letter-spacing: -.04em;
  line-height: 1.2;
}
.site-refined .collection-heading > p {
  margin: 0 0 2px;
  color: var(--ref-muted);
  font-size: 12px;
}
.site-refined .module-grid { gap: 14px; }
.site-refined .module-card,
.site-refined .bookmark-card,
.site-refined .bookmark-root.is-view-2 .bookmark-card {
  border: 1px solid var(--ref-line) !important;
  border-radius: 14px;
  background: var(--ref-surface) !important;
  color: var(--ref-ink);
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}
.site-refined .module-card {
  position: relative;
  min-height: 180px;
  padding: 20px 20px 43px;
  gap: 0;
  align-items: start;
  justify-content: start;
  text-align: left;
}
.site-refined .module-card::before,
.site-refined .bookmark-card::before { display: none; }
.site-refined .module-card::after {
  position: absolute;
  top: 22px;
  right: 19px;
  color: var(--ref-muted);
  content: "↗";
  font-size: 17px;
  opacity: .6;
  background: none;
  width: auto;
  height: auto;
}
.site-refined .module-card:hover,
.site-refined .bookmark-card:hover {
  border-color: color-mix(in srgb, var(--ref-accent) 45%, var(--ref-line)) !important;
  transform: translateY(-2px);
}
.site-refined .module-icon {
  display: grid;
  width: 34px;
  height: 34px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--ref-accent);
  background: var(--ref-soft);
  box-shadow: none;
  place-items: center;
}
.site-refined .module-icon svg { width: 21px; height: 21px; }
.site-refined .site-nav-icon svg { width: 19px; height: 19px; }
.site-refined .module-name {
  margin: 0 0 7px;
  color: var(--ref-ink) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-transform: none;
  text-shadow: none !important;
}
.site-refined .module-card-description {
  color: var(--ref-muted) !important;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 400;
  text-shadow: none !important;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.site-refined .module-count {
  right: auto;
  left: 20px;
  bottom: 16px;
  color: var(--ref-muted);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.site-refined .category-head,
.site-refined .collection-top { border-color: var(--ref-line); }
.site-refined .bookmark-title { letter-spacing: -.02em; }
/* One player, in normal document flow. Controls never sit below a clipped disc. */
.site-refined #mobile-music-dock {
  display: block;
  width: min(var(--ref-content), 100%);
  margin: 18px auto 34px;
  pointer-events: auto;
}
.site-refined #mobile-music-dock .music-dock-wrap {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 12px 18px;
  gap: 20px;
  border: 1px solid var(--ref-line);
  border-radius: 14px;
  background: var(--ref-surface);
  box-shadow: none;
}
.site-refined #mobile-music-dock .music-dock {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 126px;
  grid-template-rows: 21px 18px 10px;
  column-gap: 15px;
  row-gap: 0;
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.site-refined #mobile-music-dock .music-dock-stage {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 48px;
  height: 48px;
  margin: 0;
  flex: none;
  transform: none;
}
.site-refined #mobile-music-dock .music-dock-disc { width: 48px; height: 48px; }
.site-refined #mobile-music-dock .music-dock-arm { display: none; }
.site-refined #mobile-music-dock .music-dock-sheen { inset: 0; width: 48px; height: 48px; }
.site-refined #mobile-music-dock .music-dock-title {
  grid-column: 2;
  grid-row: 1;
  height: auto;
  margin: 0;
  color: var(--ref-ink);
  font-size: 12px;
  font-weight: 550;
  line-height: 21px;
}
.site-refined #mobile-music-dock .music-dock-note {
  grid-column: 2;
  grid-row: 2;
  height: 18px;
  margin: 0;
  color: var(--ref-muted);
  font-size: 10px;
  line-height: 18px;
}
.site-refined #mobile-music-dock .music-dock-lyric:not([hidden]) {
  display: block;
  grid-column: 2;
  grid-row: 2;
  height: 18px;
  margin: 0;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 11px;
  line-height: 18px;
}
.site-refined #mobile-music-dock .music-dock-lyric em { display: none; }
.site-refined #mobile-music-dock .music-dock-progress {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
  margin: 0;
  padding: 8px 0;
}
.site-refined #mobile-music-dock .music-dock-time { display: none; }
.site-refined #mobile-music-dock .music-dock-controls {
  grid-column: 3;
  grid-row: 1 / 4;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  transform: none;
}
.site-refined #mobile-music-dock :is(.music-dock-play,.music-dock-step) {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  box-shadow: none;
}
.site-refined #mobile-music-dock .music-dock-play {
  background: var(--ref-ink);
  color: var(--ref-surface);
}
.site-refined #mobile-music-dock .music-dock-library {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--ref-line);
  border-radius: 9px;
  background: var(--ref-soft);
  color: var(--ref-ink);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: none;
}
.site-refined :is(.settings-panel,.music-library-panel,.goal-dialog,.tools-panel) {
  border: 1px solid var(--ref-line);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgb(0 0 0 / 16%);
}
.site-refined .header-actions button {
  border: 1px solid var(--ref-line);
  background: var(--ref-surface);
  box-shadow: none;
  border-radius: 10px;
}
.site-refined .bottom-marquee { opacity: .7; }
.site-refined .hero-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
.site-refined .hero-marquee-copy[aria-hidden="true"] { display: none; }
.site-refined .footer-utility .social-link { background: transparent; border-color: var(--ref-line); box-shadow: none; }
.site-refined .site-footer { color: var(--ref-muted); font-size: 11px; }
@media (min-width: 1200px) {
  html[data-sidebar="collapsed"] { --rail-width: 76px; }
  html[data-sidebar="expanded"] { --rail-width: 248px; }
  .site-refined .page-shell {
    padding: 0;
    background: none;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
  }
  .site-refined .page-shell::before { display: none; }
  .site-refined .page-shell > main {
    isolation: isolate;
    padding: 96px 48px 44px;
    margin: 0;
    border-radius: 0;
    background: var(--ref-surface);
    border: 0;
  }
  .site-refined .page-shell > main::before,
  .site-refined .page-shell > main::after { display: none; }
  html[data-background-mode="plain"] .site-refined .page-shell > main {
    background: radial-gradient(ellipse 58% 460px at 88% 0%, #e4ebfd 0%, #f4f7fc 48%, transparent 100%), #fcfcfd;
  }
  html[data-background-mode="dark-fluid"] .site-refined .page-shell > main {
    background: radial-gradient(ellipse 65% 400px at 90% 0%, #1b2031, transparent 100%), #0b0b0c;
  }
  html:is([data-background-mode="custom"],[data-background-mode="microslats"],[data-background-mode="light"]) .site-refined .page-shell > main {
    background: transparent;
  }
  .site-refined .page-shell > main > :is(.hero,.hero-search,.module-home) {
    width: min(var(--ref-content), 100%);
    max-width: var(--ref-content);
    margin-left: auto;
    margin-right: auto;
  }
  .site-refined .page-shell > main > .hero { padding: 14px 0 0; display: block; }
  .site-refined .page-shell > main > .hero-search { margin-top: 28px; }
  .site-refined .hero-search .search-box {
    height: 64px;
    padding: 8px 16px;
    align-items: center;
    gap: 12px;
    border-radius: 13px;
  }
  .site-refined .hero-search #search-input { height: 44px; font-size: 15px; font-weight: 400; }
  .site-refined .hero-search :is(.search-box-icon,.search-box-clear) { margin: 0; }
  .site-refined .hero-search .search-box-icon { width: 32px; height: 40px; }
  .site-refined .page-shell > main > .module-home { margin-top: 0; }
  .site-refined .site-nav {
    position: sticky;
    top: 0;
    height: 100dvh;
    padding: 14px 12px;
    background: var(--ref-surface);
    border-right: 1px solid var(--ref-line);
    overflow: hidden;
  }
  .site-refined .site-nav .brand { min-height: 48px; margin: 40px 0 24px; padding: 0; gap: 10px; }
  .site-refined .site-nav .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .site-refined .site-nav .brand-copy strong { font-size: 14px; }
  .site-refined .site-nav-head { flex: 0 0 auto; margin: 0 0 12px; padding: 0 10px; }
  .site-refined .site-nav-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 4px;
    padding: 0 0 12px;
    scrollbar-width: thin;
  }
  .site-refined .site-nav-item {
    display: flex;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--ref-muted);
    font-size: 12px;
    font-weight: 450;
    gap: 10px;
  }
  .site-refined .site-nav-item[aria-current="true"] { color: var(--ref-accent); background: var(--ref-soft); box-shadow: none; }
  .site-refined .site-nav-count { margin-left: auto; font-size: 10px; opacity: .65; }
  .site-refined .site-nav-icon { display: grid; place-items: center; flex: 0 0 20px; background: none; color: inherit; }
  .site-refined .site-nav-collapse { top: 13px; right: 21px; width: 32px; height: 32px; box-shadow: none; border-color: var(--ref-line); border-radius: 8px; }
  html[data-sidebar="collapsed"] .site-refined .site-nav .brand { justify-content: center; margin-top: 40px; padding: 0; }
  html[data-sidebar="collapsed"] .site-refined .site-nav .brand-mark { width: 34px; height: 34px; }
  html[data-sidebar="collapsed"] .site-refined .site-nav-list { display: flex; align-items: center; }
  html[data-sidebar="collapsed"] .site-refined .site-nav-item { width: 44px; justify-content: center; padding: 10px; }
  html[data-sidebar="collapsed"] .site-refined .site-nav-item :is(.site-nav-label,.site-nav-count) { display: none; }
  .site-refined .site-header { top: 8px; right: 24px; padding: 12px; }
  .site-refined .page-toc { display: none; }
  .site-refined :is(.bottom-marquee,.footer-utility,.site-footer) {
    width: auto !important;
    margin-left: var(--rail-width) !important;
    margin-right: 0 !important;
    padding-left: 48px;
    padding-right: 48px;
  }
  .site-refined .bottom-marquee .hero-marquee-viewport { width: 100%; margin: 0; }
  .site-refined .footer-utility { margin-top: 16px !important; padding-top: 24px; border-top: 1px solid var(--ref-line); }
  .site-refined .site-footer { padding-bottom: 24px; }
}
@media (min-width: 721px) and (max-width: 1199px) {
  .site-refined .page-shell { display: block; width: min(100% - 48px, 960px); margin: 0 auto; }
  .site-refined .site-nav,.site-refined .page-toc { display: none; }
  .site-refined .hero { display: block; padding: 36px 0; }
  .site-refined .module-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .site-refined .site-header { background: var(--ref-surface); border-bottom: 1px solid var(--ref-line); box-shadow: none; }
  .site-refined .hero { display: block; padding: 32px 0 24px; }
  .site-refined .hero .eyebrow { font-size: 8px; letter-spacing: .1em; margin-bottom: 14px; }
  .site-refined #hero-display { font-size: clamp(31px, 8.6vw, 55px); line-height: 1.12; letter-spacing: -.045em; }
  .site-refined #hero-display-lead { font-size: .73em; margin-bottom: 5px; }
  .site-refined .hero-cn { margin-top: 14px; font-size: 13px; }
  .site-refined #mobile-music-dock { margin: 0 auto 28px; }
  .site-refined #mobile-music-dock .music-dock-wrap { flex-wrap: wrap; padding: 13px; gap: 12px; }
  .site-refined #mobile-music-dock .music-dock { flex-basis: 100%; grid-template-columns: 44px minmax(0,1fr) 40px; column-gap: 12px; }
  .site-refined #mobile-music-dock .music-dock-stage,
  .site-refined #mobile-music-dock .music-dock-disc,
  .site-refined #mobile-music-dock .music-dock-sheen { width: 44px; height: 44px; }
  .site-refined #mobile-music-dock .music-dock-step { display: none; }
  .site-refined #mobile-music-dock .music-dock-library { min-height: 36px; margin-left: 56px; padding: 0 12px; font-size: 11px; }
  .site-refined .collection-heading { margin-bottom: 16px; gap: 10px; }
  .site-refined .collection-heading h2 { font-size: 22px; }
  .site-refined .collection-heading > p { display: none; }
  .site-refined .section-kicker { font-size: 9px; }
  .site-refined .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .site-refined .module-card { min-height: 178px; padding: 15px 14px 35px; border-radius: 12px; }
  .site-refined .module-card::after { top: 16px; right: 13px; font-size: 15px; }
  .site-refined .module-icon { width: 31px; height: 31px; margin-bottom: 13px; }
  .site-refined .module-name { font-size: 13px; line-height: 1.35; }
  .site-refined .module-card-description { font-size: 11px; line-height: 1.55; }
  .site-refined .module-count { bottom: 13px; left: 14px; font-size: 10px; }
  .site-refined :is(.settings-panel,.music-library-panel,.goal-dialog,.tools-panel) { max-width: calc(100vw - 24px); border-radius: 16px; }
  .site-refined .footer-utility { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-refined *, .site-refined *::before, .site-refined *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}/* Explicitly reset legacy fixed widths, text effects and duplicate marquee groups. */
.site-refined .module-card { width: auto; min-width: 0; max-width: 100%; aspect-ratio: auto; }
.site-refined .module-name { font-family: var(--font-ui); text-transform: none !important; }
.site-refined .module-count { position: absolute; top: auto; padding: 0; margin: 0; text-shadow: none !important; }
.site-refined .module-card-description { margin: 0; }
.site-refined #hero-display-lead { filter: none !important; }
html:not([data-title-style="classic"]) .site-refined #hero-display { filter: none !important; }
html .site-refined #hero-subtitle { font-family: var(--font-ui); font-size: 15px; font-weight: 400; text-shadow: none; }
.site-refined .hero-marquee-group { flex-wrap: wrap; justify-content: center; width: auto; }
.site-refined .hero-marquee-group[aria-hidden="true"] { display: none; }
.site-refined .hero-marquee-viewport { -webkit-mask-image: none; mask-image: none; }
.site-refined .hero-marquee-chip { font-size: 11px; padding: 5px 10px; box-shadow: none; }
@media (max-width: 720px) {
  html .site-refined #hero-subtitle { font-size: 13px; }
}
/* Wallpaper opacity remains an actual setting, not an inert control. Default
   plain/dark surfaces stay opaque; custom wallpapers may use the saved alpha. */
html[data-background-mode="custom"][data-module-glass="custom"] .site-refined .module-card {
  background: rgb(var(--module-glass-rgb) / var(--module-glass-alpha)) !important;
}
html[data-background-mode="custom"][data-wallpaper-tone="dark"] .site-refined {
  --ref-ink: #f2f4f8; --ref-muted: #c2c7d0; --ref-line: #454a55;
  --ref-surface: #171b23; --ref-soft: #262d39; --ref-accent: #a5b7ff;
}
html[data-home-ui="hidden"] .site-refined .hero { display: none; }
.site-refined .music-dock-expand {
  display: grid; place-items: center; flex: 0 0 36px;
  width: 36px; height: 40px; padding: 8px; border: 0;
  border-radius: 9px; background: transparent; color: var(--ref-muted); cursor: pointer;
}
.site-refined .music-dock-expand:hover { background: var(--ref-soft); color: var(--ref-ink); }
.site-refined .music-dock-expand svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.site-refined .player-expand-inner { border-radius: 20px; border-color: var(--ref-line); }
html[data-title-style="tanweer"] .site-refined #hero-display { font-family: var(--hero-title-font, Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif); }
@media (max-width:720px) {
  .site-refined #mobile-music-dock .music-dock-expand { margin-left: auto; min-height: 36px; height: 36px; }
  .site-refined .header-actions button { border: 0; }
  .site-refined .site-header .brand-copy strong { color: var(--ref-ink); font-size: 17px; font-weight: 600; letter-spacing: -.035em; }
}
/* Inner pages use the same alignment and hierarchy as the homepage. */
.site-refined :is(.collection-panel,.search-view) { width: min(var(--ref-content), 100%); margin-inline: auto; }
.site-refined .toolbar { padding: 22px; border: 1px solid var(--ref-line); border-radius: 14px; background: var(--ref-surface); box-shadow: none; }
.site-refined :is(.module-back-button,.goal-open-button,.section-toggle,.search-view-back) { border: 1px solid var(--ref-line); border-radius: 9px; background: var(--ref-surface); box-shadow: none; font-weight: 500; }
.site-refined .toolbar-heading h2 { font-size: 28px; font-weight: 600; letter-spacing: -.04em; }
.site-refined .section-title { font-family: var(--font-ui); font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.site-refined .section-icon { border: 1px solid var(--ref-line); border-radius: 10px; background: var(--ref-soft); color: var(--ref-accent); box-shadow: none; }
.site-refined .bookmark-section { box-shadow: none; }
.site-refined .view-row { padding-top: 14px; }
.site-refined .hero-search input::placeholder { color: var(--ref-muted); opacity: 1; }
/* Respect saved opacity without bringing back live backdrop blur. */
html[data-module-glass="custom"] .site-refined .module-card {
  background: rgb(var(--module-glass-rgb) / var(--module-glass-alpha)) !important;
}
html .site-refined .bottom-marquee { opacity: 1; padding-top: 12px; padding-bottom: 12px; }
html .site-refined .hero-marquee-group { gap: 6px 10px; }
html .site-refined .hero-marquee-chip {
  font-family: var(--font-ui); font-size: 12px; font-weight: 450;
  line-height: 1.5; letter-spacing: 0; color: var(--ref-muted);
  padding: 5px 8px; border-radius: 7px; text-shadow: none;
}

/*
 * 首屏底色防闪（2026-10-09）
 * theme-bootstrap.js 在 <head> 里按用户上次选的背景档写入这个变量。
 * body 默认的暖白 / 黄色会在 app.js 执行前露出来，这里先用正确底色兜住；
 * app.js 真正应用背景时仍会用 inline style 覆盖。
 */
html,
body {
  background-color: var(--bootstrap-page-bg, var(--bg));
}
html .site-refined .hero-marquee-chip:hover { color: var(--ref-ink); background: var(--ref-soft); }
.site-refined .hero-marquee-sep { display: none; }
.site-refined .bottom-marquee-title { color: var(--ref-muted); font-size: 9px; letter-spacing: .12em; }
@media (min-width:721px) {
  .site-refined .module-card-description { font-size: 13px; }
  .site-refined .module-count { font-size: 11px; }
}
@media (max-width:720px) {
  html[data-language] .site-refined .site-header .brand-copy strong { color: var(--ref-ink); font-size: 17px; font-weight: 600; letter-spacing: -.035em; }
  .site-refined .music-library-head {
    display: grid; grid-template-columns: minmax(0,1fr) 36px; gap: 12px;
    position: relative; padding: 16px 14px 12px; align-items: center;
  }
  .site-refined #music-library-title { grid-column: 1; grid-row: 1; margin: 0; font-size: 19px; }
  .site-refined .music-library-close { grid-column: 2; grid-row: 1; width: 36px; height: 36px; margin: 0; }
  .site-refined .music-library-tabs { grid-column: 1 / -1; grid-row: 2; width: fit-content; max-width: 100%; gap: 0; }
  .site-refined .music-library-tabs button { padding: 6px 10px; font-size: 11px; }
  .site-refined .music-library-tools { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; width: 100%; margin: 0; }
  .site-refined .music-library-search { width: 100%; min-width: 0; }
  .site-refined .music-library-search input { width: 100%; min-width: 0; height: 38px; font-size: 16px; }
  .site-refined .music-source-toggle { max-width: 100%; }
  .site-refined .music-source-menu { left: 0; right: auto; max-width: calc(100vw - 68px); }
  .site-refined .toolbar { padding: 16px; }
  .site-refined .toolbar-heading h2 { font-size: 23px; }
  .site-refined .section-title { font-size: 16px; }
  .site-refined .section-description { font-size: 12px; }
}
@media (max-width:720px) {
  .site-refined .toolbar-heading { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; align-items: start; }
  .site-refined .module-back-button { justify-self: start; min-height: 36px; }
  .site-refined .toolbar-heading > div:not(.toolbar-status) { grid-row: 2; }
  .site-refined .toolbar-status { display: flex; width: 100%; flex-wrap: wrap; gap: 10px; justify-content: flex-start; align-items: center; }
  .site-refined .toolbar-status .result-count { flex-basis: 100%; width: 100%; margin: 0; text-align: left; }
  .site-refined .toolbar-status .view-size { margin-left: auto; }
  .site-refined .module-description { margin: 15px 0 0; }
  .site-refined .view-row:has(.view-hint:only-child) { display: none; }
  .site-refined .settings-section { min-width: 0; }
  .site-refined .settings-panel { overscroll-behavior: contain; scrollbar-gutter: stable; }
}

/* ---------------------------------------------------------------------------
   2026-10-11：首屏改成「左边标题 + 右边会动的 3D 图案」
   ---------------------------------------------------------------------------
   用户参考了 bravadotrade / framer / hiver：左边文字、右边一个会动的 3D 物体。
   他原来的首屏是「960px 居中的一栏、右边一大片空白」，这里改成：
     · 首屏这一条带子放宽到 min(1240px, 100%)，整体重心往左移（用户要求「往左挪一挪」）；
     · 里面两栏：左标题（hero-text）/ 右 3D 图案（hero-visual）；
     · 搜索框和下面的模块网格保持原来的 960px 不动 —— 只有首屏这条带子放宽了。
   3D 图案本体在 assets/hero-visual.js（three.js r186，MIT，自托管在 assets/vendor/three/），
   只在大屏加载：手机上 .hero-visual 直接 display:none，脚本都不会下载。
   --------------------------------------------------------------------------- */
/* ⚠️ 2026-10-12 用户第二次反馈：手机上那个小图案「很模糊、很难看、也没必要」，
   要求去掉；同时他电脑上（窗口宽度可能不到 1200）得能看到。所以现在：
     · <1000px（手机 / 平板）：整块不显示，three.js 也不下载；
     · ≥1000px：作为首屏右边那一栏出现（1000–1199 小一点，≥1200 大一点）。 */
.hero-visual {
  display: none;
}

/* canvas 必须由 CSS 撑满这个方框：否则它的「固有尺寸」会反过来把父框越撑越高
   （2026-10-12 实测：168 宽的图案被撑到 1138 高，整屏都被它顶下去）。 */
.hero-visual-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 1000–1199：没有左边栏，但屏幕够宽，首屏照样能左右分栏（图案小一档）。
   选 .site-refined 前缀 + 放在文件最后，是为了压过视觉整理那节的 display:block。 */
@media (min-width: 1000px) and (max-width: 1199px) {
  .page-shell > main > .hero,
  .site-refined .page-shell > main > .hero {
    display: grid;
    /* ⚠️ 2026-10-13 用户：「高度太高了，缩低一点，宽度适当放宽一点」——
       所以这一列变宽、形状从正方形改成 16:10 的扁矩形。 */
    grid-template-columns: minmax(0, 1fr) clamp(240px, 32vw, 360px);
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(1rem, 2.4vw, 2rem);
  }

  .hero-visual {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    aspect-ratio: 16 / 10;
    justify-self: end;
  }
}

@media (min-width: 1200px) {
  /* ⚠️ 选择器必须写成 .site-refined .page-shell > main > .hero：
     视觉整理那一节（15966 行）就是用这个选择器把 .hero 写死成 display:block 的，
     这里同等优先级 + 排在文件最后，才能真的改成两栏网格。 */
  .page-shell > main > .hero,
  .site-refined .page-shell > main > .hero {
    display: grid;
    width: min(var(--ref-content), 100%);
    max-width: var(--ref-content);
    margin-left: 0;
    margin-right: auto;
    /* 宽度放宽（389 → 约 547）、形状改扁（16:10），整体高度比原来矮一截 */
    grid-template-columns: minmax(0, 1fr) clamp(320px, 38vw, 560px);
    align-items: start;
    /* 视觉整理那节给 .hero 设了 justify-items:start（标题按内容宽度收窄）。
       这里改回 stretch：站长在后台把大标题改得很长时，标题列会正常换行，
       不会横向撑到图案上。 */
    justify-items: stretch;
    column-gap: clamp(1rem, 2.6vw, 3rem);
  }

  .hero-text {
    min-width: 0;
  }

  .hero-visual {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    aspect-ratio: 16 / 10;
    justify-self: end;
  }

  .hero-visual-canvas {
    /* 图案底下垫一层很淡的蓝光，让它在白底上「坐得住」 */
    filter: drop-shadow(0 24px 44px rgba(20, 70, 170, 0.16));
  }

  html[data-theme="dark"] .hero-visual-canvas {
    filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.5));
  }
}

/* ===========================================================================
   首屏「媒体热点榜单」（2026-10-13）
   用户：① 放在标题右边、跟 3D 图案**同尺寸**、直接盖住图案；② 顶部切媒体；
        ③ 右上角一个旋转按钮，切回原来的图案。
   桌面端就是盖在图案那一格里（绝对定位铺满）；<1000px 没有图案，榜单改成整行一块。
   =========================================================================== */
.hot-board {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 手机端才会生成 / 显示这套横向卡片，桌面端保持原来的站标选择器。 */
.hot-board-mobile-track {
  display: none;
}

.hot-board-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(4px);
  color: var(--text-faint);
}

.hot-board-loading-overlay[hidden] {
  display: none;
}

.hot-board-loading-orb {
  display: block;
  width: 52px;
  height: 52px;
}

.hot-board-loading-text {
  font-size: 11px;
  line-height: 1.4;
}

/* 盖住图案时连画布一起收掉（省 GPU），切回图案再放出来 */
/* 两种状态：榜单 / 歌词。画布已经没有了（3D 按用户要求撤掉），
   这里只负责该显示哪一块。 */
.hero-visual[data-mode="board"] .hero-lyrics,
.hero-visual[data-mode="lyrics"] .hot-board {
  display: none;
}

/* ===== 正在播放的歌词（2026-10-13）=====
   和 .hot-board 同尺寸同位置；只留歌词，没有封面 / 播放键 / 收藏下载。 */
.hero-lyrics {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-lyrics-head {
  flex: none;
  padding-right: 2rem;
}

.hero-lyrics-title {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-lyrics-meta {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
  margin: 3px 0 0;
}

.hero-lyrics-meta strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-lyrics-meta small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-lyrics-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.hero-lyrics-empty {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  place-items: center;
  padding: 0 12px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.hero-lyrics-scroll {
  position: absolute;
  inset: 0;
  padding: 6px 2px;
  font-size: 12px;
}

/* 歌词行：沿用展开播放器那套观感，字号按这块小面积收一档 */
.hero-lyrics-scroll .lyric-line {
  padding: 5px 6px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
}

.hero-lyrics-scroll .lyric-line.is-active {
  font-size: 14px;
}

.hot-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* 右上角那个旋转按钮是绝对定位的常驻按钮，给标题留出位置别被压住 */
  padding-right: 2rem;
}

.hot-board-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-soft);
}

.hot-board-rotate {
  /* ⚠️ 2026-10-13 用户报：「点了旋转变回图案，按钮就不见了，回不去」——
     所以它不再属于榜单内部，而是 #hero-visual 的常驻兄弟节点：
     榜单态在卡片右上角，图案态浮在图案右上角，两种状态都点得到。 */
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  display: grid;
  flex: none;
  width: 26px;
  height: 26px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text-soft);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.hot-board-rotate:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  transform: none;
}

/* 媒体标签：一行横向滚动，不换行不占高度 */
.hot-board-tabs {
  display: flex;
  flex: none;
  /* ⚠️ 2026-10-13 用户：「站标可以显示两行」—— 标签改成换行排布，最多两行，
     16 个源排不下的部分在标签区里面竖着滚，不再横向拉长一条。 */
  flex-wrap: wrap;
  gap: 0.2rem;
  /* 正好两行的高度（每行约 24px + 间距 3.2px ≈ 51px，留一点余量到 55px）——
     16 个源在窄屏放不下两行时，多的部分在标签区里竖着滚，底部用渐隐提示「下面还有」。 */
  max-height: 3.45rem;
  overflow-y: auto;
  padding-bottom: 0.1rem;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 7px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 7px), transparent);
}

.hot-board-tabs::-webkit-scrollbar {
  display: none;
}

.hot-board-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.22rem;
  padding: 0.12rem 0.38rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.62rem;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}

/* 站标：跟收藏站卡片一样走自家 /api/icon */
.hot-board-tab-icon {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  object-fit: contain;
}

.hot-board-tab.is-active {
  border-color: color-mix(in srgb, var(--active-accent, var(--accent)) 45%, var(--border));
  background: color-mix(in srgb, var(--active-accent, var(--accent)) 12%, transparent);
  color: var(--text);
  font-weight: 600;
}

.hot-board-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* ⚠️ 2026-10-13 用户：「固定 10 条，右边那个滚动条没必要，去掉」。
     先收紧行距让 10 条真的放得下（见 .hot-board-source-card .hot-board-item），
     这里再把滚动条本身藏掉。overflow 仍保留 auto 当兜底：万一某个极窄屏幕放不下，
     内容还能滚到，不会直接被裁掉。 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hot-board-body::-webkit-scrollbar {
  display: none;
}

.hot-board-list {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hot-board-item {
  /* 一行一条（用户：只给标题，不要小介绍） */
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  align-items: center;
  gap: 0 0.35rem;
  font-size: 0.78rem;
  line-height: 1.55;
}

.hot-board-rank {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hot-board-rank.is-top {
  color: var(--active-accent, var(--accent));
  font-weight: 700;
}

.hot-board-link {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hot-board-link:hover {
  text-decoration: underline;
}

.hot-board-meta {
  grid-column: 2;
  color: var(--text-faint);
  font-size: 0.66rem;
}

.hot-board-empty {
  display: grid;
  height: 100%;
  place-items: center;
  gap: 0.5rem;
  color: var(--text-faint);
  font-size: 0.76rem;
  text-align: center;
}

.hot-board-retry {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.72rem;
  cursor: pointer;
}

/* <1000px：没有 3D 图案，榜单改成整行一块（图案态就整块收起） */
@media (max-width: 999px) {
  .hero-visual {
    position: relative;
    display: block;
    width: 100%;
    margin: 0.5rem 0 0;
  }

  /* ⚠️ 手机上没有 3D 图案可看：切到「图案」态时**不能整块 display:none**，
     否则连右上角那个旋转按钮一起消失，用户就回不来了（2026-10-13 用户报过这个）。
     现在只收起榜单内容，留一条 44px 的空带放着按钮。 */
  /* 手机上两块都是整行一块，尺寸对齐榜单 */
  .hero-visual[data-mode="lyrics"] .hot-board {
    display: none;
  }

  .hero-visual .hero-lyrics {
    position: static;
    height: min(46vh, 330px);
  }

  .hero-visual .hot-board {
    position: static;
    /* 手机端也压矮：原来最高 420px，现在最多 330px */
    height: min(46vh, 330px);
  }
}

/* 2026-10-12：参考设计目录的克制层级，压缩手机分类页首屏信息卡。 */
.site-refined .hero-search .search-shortcut {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid var(--ref-line);
  border-radius: 6px;
  color: var(--ref-muted);
  background: var(--ref-surface);
  font: 500 11px/1 var(--font-ui);
  white-space: nowrap;
  pointer-events: none;
}
.site-refined .hero-search .search-box:focus-within .search-shortcut,
.site-refined .hero-search.has-query .search-shortcut { display: none; }
@media (max-width: 720px) {
  .site-refined .hero-search .search-shortcut { display: none; }
  .site-refined .collection-panel .toolbar {
    position: relative;
    top: auto;
    padding: 14px 16px;
  }
  .site-refined .collection-panel .toolbar-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 8px;
    padding: 0;
  }
  .site-refined .collection-panel .module-back-button {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
  }
  .site-refined .collection-panel .toolbar-heading > div:not(.toolbar-status) {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  .site-refined .collection-panel .toolbar-status { display: contents; }
  .site-refined .collection-panel .toolbar-status .result-count {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: auto;
    max-width: 125px;
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    text-align: right;
  }
  .site-refined .collection-panel .goal-open-button {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
  .site-refined .collection-panel .view-size {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
    margin: 0;
  }
  .site-refined .collection-panel .module-description {
    margin: 12px 0 0;
    line-height: 1.5;
  }
}

/* 2026-10-13 hotboard6：一行方形站标 + 最右侧展开 + APK 风格独立榜单卡。 */
.hot-board { gap: 5px; }
.hot-board-station-wrap { position: relative; flex: 0 0 40px; min-width: 0; }
.hot-board-station-shell {
  position: absolute; inset: 0 0 auto; z-index: 5; height: 40px;
  display: grid; grid-template-columns: minmax(0,1fr) 62px; align-items: start;
  gap: 5px; padding: 6px 0; overflow: hidden; border-radius: 10px;
  background: var(--surface); transition: height 200ms cubic-bezier(.22,1,.36,1);
}
.hot-board-station-shell[data-expanded="true"] {
  padding: 6px; border: 1px solid var(--border); background: var(--bg); box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.hot-board-tabs {
  display: flex; flex-wrap: nowrap; align-content: start; gap: 5px;
  height: 28px; min-height: 0; max-height: none; margin: 0; padding: 0;
  overflow-x: auto; overflow-y: hidden; mask-image: none; -webkit-mask-image: none;
}
.hot-board-station-shell[data-expanded="true"] .hot-board-tabs {
  flex-wrap: wrap; height: 100%; overflow-x: hidden; overflow-y: auto;
}
.hot-board-tab {
  border-radius: 7px; height: 28px; padding: 4px 7px; gap: 5px;
  font-size: 11px; line-height: 1; border-color: transparent;
  background: var(--surface-muted); transition: background-color 140ms, border-color 140ms;
}
.hot-board-tab-icon { width: 16px; height: 16px; border-radius: 4px; }
.hot-board-expand {
  display: inline-flex; height: 28px; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted);
  padding: 0 5px; color: var(--text-soft); font: inherit; font-size: 11px; cursor: pointer;
}
.hot-board-expand svg { transition: transform 200ms cubic-bezier(.22,1,.36,1); }
.hot-board-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.hot-board-source-card {
  display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 5px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted);
}
.hot-board-source-head { display: flex; flex: none; gap: 7px; align-items: center; min-height: 26px; }
.hot-board-source-icon { width: 28px; height: 28px; object-fit: contain; border-radius: 7px; }
.hot-board-source-copy { min-width: 0; flex: 1; }
.hot-board-source-copy h3 { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.hot-board-source-copy p { margin: 2px 0 0; font-size: 10px; line-height: 1.2; color: var(--text-faint); }
.hot-board-view-all {
  border: 0; border-radius: 7px; background: var(--surface); padding: 5px 7px;
  font: inherit; font-size: 10px; color: var(--text-soft); cursor: pointer; white-space: nowrap;
}
.hot-board-view-all:disabled { opacity: .45; cursor: default; }
.hot-board-source-card .hot-board-list { gap: 0; }
.hot-board-source-card .hot-board-item { min-height: 0; font-size: 0.72rem; line-height: 1.35; }
.hot-board-source-card .hot-board-body {
  display: flex;
  flex: 1 1 auto;
}
.hot-board-source-card .hot-board-body > .hot-board-list {
  flex: 1 1 auto;
  height: 100%;
  grid-auto-rows: minmax(0, 1fr);
}
.hot-board-source-card .hot-board-rank {
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}
.hot-board-source-card .hot-board-rank.is-top {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}
.hot-board-tab:focus-visible, .hot-board-expand:focus-visible, .hot-board-view-all:focus-visible,
.hot-board-detail-close:focus-visible, .hot-board-link:focus-visible {
  outline: 2px solid var(--active-accent,var(--accent)); outline-offset: 2px;
}
.hot-board-dialog {
  width: min(640px,calc(100vw - 32px)); max-width: 640px; max-height: 82dvh;
  border: 1px solid var(--border); border-radius: 20px; padding: 0;
  background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.24);
}
.hot-board-dialog::backdrop { background: rgba(0,0,0,.4); }
.hot-board-dialog[open] { animation: hot-detail-enter 200ms cubic-bezier(.22,1,.36,1); }
.hot-board-detail-card { display: flex; max-height: 80dvh; flex-direction: column; }
.hot-board-detail-head { display: flex; align-items: center; flex: none; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.hot-board-detail-icon { width: 36px; height: 36px; object-fit: contain; border-radius: 9px; }
.hot-board-detail-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; }
.hot-board-detail-close { width: 36px; height: 36px; border: 0; border-radius: 9px; font-size: 24px; color: var(--text-soft); background: var(--surface-muted); cursor: pointer; }
.hot-board-detail-body { padding: 10px 18px 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hot-board-detail-body .hot-board-item { min-height: 36px; padding: 4px 0; font-size: 14px; line-height: 1.5; border-bottom: 1px solid var(--border); }
@keyframes hot-detail-enter { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@media (max-width:999px) {
  .hot-board-dialog { width: calc(100vw - 20px); margin: auto auto 10px; max-height: 80dvh; border-radius: 18px; }
  .hot-board-detail-close { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion:reduce) {
  .hot-board-station-shell, .hot-board-expand svg { transition: none; }
  .hot-board-dialog[open] { animation: none; }
}

/* ---------------------------------------------------------------------------
   2026-10-13：大屏首屏左对齐
   ---------------------------------------------------------------------------
   标题所在的首屏带子按内容区左边缘起排；搜索框、音乐横条、首页模块、
   搜索结果和分类页原本各自居中，视觉上会比标题向右缩一截。
   这里只统一左边线，不改变各自的宽度和移动端布局。
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .site-refined .page-shell > main > :is(.hero-search, .module-home),
  .site-refined #mobile-music-dock,
  .site-refined :is(.collection-panel, .search-view) {
    margin-left: 0;
    margin-right: auto;
  }
}

/* ---------------------------------------------------------------------------
   2026-10-13：手机端热点媒体改成横向卡片
   ---------------------------------------------------------------------------
   参考用户给的 APK 订阅页：卡片整体横向滑动、下一张露出一部分。
   桌面端不显示这条轨道，仍使用原来的站标选择器。
   --------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .hot-board-station-wrap {
    display: none;
  }

  .hot-board > .hot-board-source-card {
    display: none;
  }

  .hot-board-mobile-track {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
    margin: 0 -4px;
    padding: 0 4px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hot-board-mobile-track::-webkit-scrollbar {
    display: none;
  }

  .hot-board-mobile-card {
    display: flex;
    flex: 0 0 calc(100% - 30px);
    min-width: 0;
    height: 100%;
    padding: 8px 9px;
    scroll-snap-align: center;
  }

  .hot-board-mobile-card .hot-board-source-head {
    min-height: 30px;
  }

  .hot-board-mobile-card .hot-board-body {
    display: flex;
    min-height: 0;
  }

  .hot-board-mobile-card .hot-board-list {
    flex: 1 1 auto;
    height: 100%;
    grid-auto-rows: minmax(0, 1fr);
  }

  .hot-board-mobile-card .hot-board-item {
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: 0 0.4rem;
    font-size: 0.78rem;
  }

  .hot-board-mobile-card .hot-board-rank {
    width: 1.18rem;
    height: 1.18rem;
    font-size: 9px;
  }

  .hero-visual .hot-board,
  .hero-visual .hero-lyrics {
    height: min(52vh, 360px);
  }
}

/* ---------------------------------------------------------------------------
   2026-10-13：桌面端把右侧空白真正用起来
   ---------------------------------------------------------------------------
   首屏和下方内容不再固定 1040px；大屏按完整内容区展开：
     · 标题在左、热点榜在右；热点榜贴内容区右边；
     · 音乐横条在左、搜索框在右，共用一行；
     · 首页大模块在宽屏排 5 列。
   其它结果页仍限制在 --ref-content 内居中，避免大屏文字拉得太长。
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .site-refined .page-shell > main > .hero {
    width: min(var(--ref-content), 100%);
    max-width: var(--ref-content);
    margin-left: auto;
    margin-right: auto;
    /* 跟首页第 4 张模块卡的左边线对齐：右列宽 = 2 格 + 1 个 14px 间距。 */
    grid-template-columns: minmax(0, 1fr) calc(40% - 8.4px);
  }

  .site-refined .page-shell > main > .hero-tools-row {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    align-items: center;
    width: min(var(--ref-content), 100%);
    max-width: var(--ref-content);
    margin: 28px auto 0;
    gap: 20px;
  }

  .site-refined .hero-tools-row #mobile-music-dock {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .site-refined .hero-tools-row #hero-search {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .site-refined .hero-tools-row #search-suggest {
    display: none;
  }

  .site-refined .page-shell > main > .module-home {
    width: min(var(--ref-content), 100%);
    max-width: var(--ref-content);
    margin-left: auto;
    margin-right: auto;
  }

  .site-refined :is(.collection-panel,.search-view) {
    width: min(var(--ref-content), 100%);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1200px) {
  .site-refined .module-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   2026-10-13 hotboard11：手机整卡横滑 + 桌面榜单收口
   ---------------------------------------------------------------------------
   手机端卡片的列表区原来是一个纵向滚动容器，手指落在下面时会把横滑手势
   吃掉；现在整个卡片统一交给横向轨道处理，内部行距仍由网格自动分配。
   桌面端榜单卡不再重复画一遍图标 / 名称（顶部站标已经有一份），并把
   排行行距、序号尺寸和手机端对齐，避免 1~10 的序号挤在一起。
   --------------------------------------------------------------------------- */

@media (max-width: 999px) {
  .hot-board-mobile-track,
  .hot-board-mobile-card,
  .hot-board-mobile-card .hot-board-source-head,
  .hot-board-mobile-card .hot-board-body,
  .hot-board-mobile-card .hot-board-list,
  .hot-board-mobile-card .hot-board-item,
  .hot-board-mobile-card .hot-board-link {
    /* 交给浏览器原生判断横滑和上下滚，不要固定成单一方向。 */
    touch-action: auto;
  }

  .hot-board-mobile-track {
    /* overflow:hidden 会建立纵向滚动容器，把手指上的上下滚动手势吃掉；
       clip 仍然负责裁切，但不会拦页面滚动。 */
    overflow-y: clip;
    -webkit-overflow-scrolling: touch;
  }

  .hot-board-mobile-card .hot-board-body {
    /* overflow-y:auto 会让浏览器优先把下方手势判成纵向滚动。 */
    overflow: clip;
    overscroll-behavior: none;
  }

  .hot-board {
    /* 外层圆形卡片也要继续裁切，但不要再建立一层不可滚动的容器。 */
    overflow: clip;
  }
}

@media (min-width: 1000px) {
  .hot-board-source-card:not(.hot-board-mobile-card) {
    gap: 2px;
  }

  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-source-head {
    height: 18px;
    min-height: 0;
    justify-content: flex-end;
  }

  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-source-icon,
  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-source-copy {
    display: none;
  }

  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-view-all {
    height: 18px;
    padding: 1px 6px;
    font-size: 9px;
    line-height: 1;
  }

  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-list {
    /* 桌面卡比手机卡矮，行距不能写死；用等分网格留出圆点之间的间隔。 */
    gap: 0;
  }

  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-item {
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: 0 0.4rem;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-rank {
    width: 0.95rem;
    height: 0.95rem;
    font-size: 8px;
  }
}

/* ---------------------------------------------------------------------------
   2026-10-14 hotboard15：桌面榜单去空白 + 手机音乐库入口一行
   --------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  .hot-board-source-card:not(.hot-board-mobile-card) {
    position: relative;
    gap: 0;
  }

  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-source-head {
    /* 「查看全部」不再单独占一行，浮到榜单右上角，把空白还给第一条榜单。 */
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    height: auto;
    min-height: 0;
    justify-content: flex-end;
  }

  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-body {
    flex: 1 1 auto;
  }

  .hot-board-source-card:not(.hot-board-mobile-card) .hot-board-list .hot-board-item:first-child {
    padding-right: 62px;
  }
}

@media (max-width: 720px) {
  .site-refined .music-library-head {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  }

  .site-refined .music-library-tabs {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: auto;
    max-width: 100%;
  }

  .site-refined .music-library-tools {
    display: contents;
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    margin: 0;
  }

  .site-refined .music-library-sources {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    max-width: 48%;
  }

  .site-refined .music-source-toggle {
    max-width: 100%;
  }

  .site-refined .music-source-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-refined .music-library-search {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }
}

@media (max-width: 430px) {
  /* 小屏优先保证三个入口一行，不牺牲「热门榜单 / 我的收藏」的可点区域。 */
  .site-refined .music-source-tag {
    display: none;
  }
}
@media (max-width: 720px) {
  .site-refined .music-library-tabs {
    align-self: center;
  }

  .site-refined .music-library-tabs button {
    padding: 6px 8px;
    white-space: nowrap;
  }
}
@media (max-width: 720px) {
  .site-refined .music-library-sources {
    max-width: 42%;
  }

  .site-refined .music-library-tabs {
    max-width: calc(58% - 8px);
    overflow: hidden;
  }

  .site-refined .music-library-tabs button {
    min-width: 0;
    padding: 6px 7px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 720px) {
  .site-refined .music-library-tabs {
    width: calc(58% - 8px);
    max-width: calc(58% - 8px);
  }

  .site-refined .music-library-tabs button {
    flex: 1 1 0;
  }
}
@media (max-width: 720px) {
  .site-refined .music-library-tabs {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
}
/* ---------------------------------------------------------------------------
   2026-10-14 hotboard16：手机音乐库行内按钮与关闭按钮位置
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .site-refined .music-library-panel {
    padding-top: 8px;
    gap: 8px;
  }

  .site-refined .music-library-head {
    padding: 8px 12px 6px;
    align-items: center;
  }

  .site-refined #music-library-title {
    font-size: 18px;
    line-height: 1;
  }

  .site-refined .music-library-close {
    width: 32px;
    height: 32px;
    align-self: center;
    justify-self: end;
  }






}
@media (max-width: 720px) {
  .site-refined .music-library-panel {
    padding-top: 6px;
  }

  .site-refined .music-library-head {
    padding-top: 6px;
  }
}
/* ---------------------------------------------------------------------------
   2026-10-14 admin3：手机端音乐 / 热点榜顺序 + 桌面搜索 / 音乐等高
   --------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .site-refined .hero-tools-row #hero-search .search-box {
    height: 64px;
  }

  .site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap {
    box-sizing: border-box;
    height: 64px;
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
/* ---------------------------------------------------------------------------
   2026-10-14 mobile-module-layout：手机端模块单列 / 双列 / 随机
   参考 WindX 搜索结果的单列卡片：图标在左、名字和说明在右、数量靠右。
   只加新格式，原双列规则不动。
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
  html[data-mobile-module-layout="single"] .site-refined .module-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  html[data-mobile-module-layout="single"] .site-refined .module-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 96px;
    padding: 14px 16px;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    border-radius: 14px;
  }

  html[data-mobile-module-layout="single"] .site-refined .module-card .module-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  html[data-mobile-module-layout="single"] .site-refined .module-card .module-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    font-size: 14px;
    line-height: 1.3;
  }

  html[data-mobile-module-layout="single"] .site-refined .module-card .module-card-description {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px;
    line-height: 1.5;
  }

  html[data-mobile-module-layout="single"] .site-refined .module-card .module-count {
    position: static;
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
    font-size: 11px;
    white-space: nowrap;
  }

  html[data-mobile-module-layout="single"] .site-refined .module-card::after {
    top: 14px;
    right: 14px;
  }
}
/* Genspark 式搜索：并行查询、来源、追问建议（2026-10-15） */
.answer-agent {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.answer-agent-plan,
.answer-agent-sources,
.answer-agent-followups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.answer-agent-label {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.answer-agent-chip,
.answer-agent-followup {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text-soft);
  padding: 0.28rem 0.55rem;
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.answer-agent-chip:hover,
.answer-agent-followup:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--text);
}

.answer-agent-source {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text-soft);
  font-size: 0.7rem;
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answer-agent-source:hover {
  color: var(--accent);
}

@media (max-width: 720px) {
  .answer-agent-plan,
  .answer-agent-sources,
  .answer-agent-followups {
    align-items: flex-start;
  }

  .answer-agent-chip,
  .answer-agent-followup {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   2026-10-15 musicwidget4：音乐小组件重做（用户反馈版）
   ---------------------------------------------------------------------------
   用户这轮的原话与要求，逐条对应：
   ① 桌面端封面改回**圆形**（方形真的难看）→ .music-dock-disc / .music-dock-label 全部 50%
   ② 收藏按钮不能被裁掉、按钮不能乱放 → 三行网格固定：
        第一行  圆形封面 | 歌名 + 歌手/歌词 | 音乐库 · 展开
        第二行  收藏 | 上一首 · 播放 · 下一首 | 真·音柱
        第三行  时间 + 进度条 + 时间（整行铺满）
      手机端是**同一套结构**，只是尺寸小一档，不再玩绝对定位。
   ③ 手机端要有上一首 / 下一首 → 不再 display:none。
   ④ 音柱必须跟着音乐律动 → 高度由 audio-meter.js 用 Web Audio 实时频谱写 --lv，
      这里**没有任何 keyframes 假律动**；读不到真数据时整条不显示。
   ⑤ 保留：根据封面取色做的背景柔光。
   选择器一律带 body.site-refined + #mobile-music-dock，写在文件最后，
   特异性 (1,4,1) 高于历史遗留规则，不需要再去翻前面几十处覆盖。
   --------------------------------------------------------------------------- */

body.site-refined #mobile-music-dock {
  display: block;
  width: min(var(--ref-content), 100%);
  margin: 18px auto 34px;
  pointer-events: auto;
}

/* —— 卡片本体 —— */
body.site-refined #mobile-music-dock .music-dock-wrap {
  --mw-cover: 60px;
  --mw-gap: 12px;
  --mw-btn: 34px;
  --mw-play: 40px;
  height: auto;
  min-height: 0;
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  margin: 0;
  /* 四边等距：封面顶边距才可能和左边距完全相等 */
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ref-line) 82%, transparent);
  border-radius: 18px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--ref-surface) 94%, transparent), color-mix(in srgb, var(--ref-soft) 88%, transparent));
  box-shadow: 0 10px 28px rgb(24 43 73 / 8%), inset 0 1px rgb(255 255 255 / 55%);
  color: var(--ref-ink);
  transition: border-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}

/* 封面取色的柔光底（用户点名要保留的那一条） */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-ambient {
  position: absolute;
  z-index: -2;
  inset: -45% -10%;
  display: block;
  background-image:
    linear-gradient(90deg, rgb(var(--music-cover-rgb, 47 105 180) / 72%), rgb(18 23 34 / 36%)),
    var(--music-cover-image, none);
  background-position: center;
  background-size: cover;
  filter: blur(26px) saturate(1.35);
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 300ms ease, transform 900ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

body.site-refined #mobile-music-dock .music-dock-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, rgb(5 8 14 / 80%), rgb(5 8 14 / 52%) 58%, rgb(var(--music-cover-rgb, 47 105 180) / 26%));
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"] {
  border-color: rgb(255 255 255 / 14%);
  box-shadow: 0 14px 34px rgb(8 15 30 / 20%), inset 0 1px rgb(255 255 255 / 14%);
  color: rgb(255 255 255 / 96%);
}

body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"] .music-dock-ambient { opacity: .78 }
body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"]::after { opacity: 1 }

body.site-refined #mobile-music-dock .music-dock-wrap[data-playing="true"] .music-dock-ambient {
  animation: music-widget-breathe 6s ease-in-out infinite alternate;
}

/* —— 三行网格 —— */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--mw-cover) minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "cover copy tools"
    "cover controls controls"
    "bar bar bar";
  gap: 10px var(--mw-gap);
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  text-align: left;
}

/* —— ① 圆形封面 —— */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-stage {
  grid-area: cover;
  /* 用户 2026-10-15：封面再靠上一点，让它到上边框的距离 = 到左边框的距离。
     所以这里改成顶对齐（配合卡片四边等内边距），不再垂直居中。 */
  align-self: start;
  justify-self: start;
  width: var(--mw-cover);
  height: var(--mw-cover);
  margin: 0;
  flex: none;
  transform: none;
  border-radius: 50%;
  overflow: visible;
  box-shadow: none;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 10%) 0 58%, transparent 59%),
    var(--ref-soft);
  box-shadow: 0 4px 12px rgb(10 17 30 / 16%);
  cursor: pointer;
  overflow: hidden;
  /* 和展开播放器同一个 14s 一圈的节奏；暂停时只是把动画停住，不摘掉动画本身，
     否则会瞬间弹回 0 度（这个坑 2026-09-27 踩过）。 */
  animation: player-expand-spin 14s linear infinite;
  animation-play-state: paused;
  transition: box-shadow 220ms ease;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-disc:hover { filter: brightness(1.05) }
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-disc.is-spinning { animation-play-state: running }
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-disc:active { filter: brightness(.96) }
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-disc:focus-visible { outline: 2px solid var(--ref-accent, #2f69b4); outline-offset: 3px }

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-label {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

/* 没封面时：淡色圆 + 音符，别摆一块死黑（用户上一轮就吐槽过方形黑封面难看） */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-label.is-blank {
  display: grid;
  place-items: center;
  background-color: rgb(128 134 148 / 18%);
  background-image: none;
  color: currentColor;
  font-size: calc(var(--mw-cover) * .38);
  line-height: 1;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-label.is-blank::before { content: "♪"; opacity: .5 }

/* 老唱机的零件在这个版本里全部不用了（DOM 已删，这里顺手兜底） */
body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-arm, .music-dock-hole, .music-dock-sheen, .music-dock-hint) {
  display: none;
}

/* —— ② 歌名 / 歌手 / 歌词 —— */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-copy {
  grid-area: copy;
  /* ⚠️ 这里必须是 flex、不能是 grid：旧黑胶唱机那套规则给 .music-dock-title /
     .music-dock-note / .music-dock-lyric 留着 `grid-column: 2; grid-row: 1`，
     在 grid 容器里会把这三行文字整体推到第二列（实测右移约 26px），
     文字一长一短看着就像在乱动 —— 用户 2026-10-15 报的「跟收藏按钮不对齐」就是这个。
     flex 容器里这些网格属性直接失效，歌名 / 歌词一律贴左边缘。 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  /* 歌名 / 歌词的左边缘 = 下面心形图标的可见左边缘（心形在按钮里居中，
     天生内缩 (按钮宽 - 图标宽)/2，这里补回来，两边就落在同一条竖线上）。 */
  padding-inline-start: calc((var(--mw-btn) - 20px) / 2);
  /* 标题 + 歌手/歌词 = 两行；进歌之前先把位子留好，卡片高度不会一跳一跳 */
  min-height: 43px;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-title {
  display: block;
  grid-column: auto;
  grid-row: auto;
  text-align: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  font-size: 15px;
  font-weight: 680;
  line-height: 22px;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-note,
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-lyric:not([hidden]) {
  display: block;
  grid-column: auto;
  grid-row: auto;
  text-align: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ref-muted);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-lyric em { display: none }

/* ⚠️ 歌词文字真正的载体是里面那个 <span id="music-dock-lyric-text">：
   旧黑胶唱机的遗留规则 `.music-dock-lyric span { color: var(--text); font-size: .62rem }`
   把这一行单独染成深色、字号压到 9.9px —— 外层 <p> 改成白色/放大都没用，
   这就是用户看到的「歌词是黑色的、还特别小」。这里把 span 全部继承外层样式。 */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-lyric span {
  /* 用户 2026-10-15：一句歌词太长时要能看到**两行**，不要只留一行截断。
     用逐行截断（-webkit-line-clamp）而不是 nowrap+省略号。 */
  display: -webkit-box;
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 有歌时卡片是深色底，副标题 / 时间戳要跟着变白（别用 currentColor 混色，见上面的坑） */
body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"] :is(.music-dock-note, .music-dock-lyric) {
  /* 卡片是深色底 + 封面取色柔光，字色固定成高对比白，再加一层暗描边：
     不管封面是亮是暗、背景怎么变都看得清（用户 2026-10-15 的要求）。 */
  color: rgb(255 255 255 / 94%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 55%), 0 0 10px rgb(0 0 0 / 34%);
}

/* 当前这句歌词再提一档：纯白 + 更实的暗描边（用户点名要「歌词一定看得清」） */
body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"] .music-dock-lyric {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 3px rgb(0 0 0 / 62%), 0 0 12px rgb(0 0 0 / 40%);
}

body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"] .music-dock-clock {
  color: rgb(255 255 255 / 86%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
}

/* 正在唱歌 → 第二行给歌词，歌手那行让位（见 music-player.js 的 dataset.lyric） */
body.site-refined #mobile-music-dock .music-dock-wrap[data-lyric="true"] .music-dock-note {
  display: none;
}

/* 有歌词时给「歌名 + 两行歌词」留够高度；没歌词时还是「歌名 + 一行」。
   两种状态各自固定，所以歌词逐句切换不会把卡片撑得一跳一跳。 */
body.site-refined #mobile-music-dock .music-dock-wrap[data-lyric="true"] .music-dock-copy {
  min-height: 63px;
}

/* —— ③ 右上角：音乐库 / 展开（固定位置，不再随机） —— */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-tools {
  grid-area: tools;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: none;
}

body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-library, .music-dock-expand) {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--ref-line) 80%, transparent);
  border-radius: 9px;
  background: rgb(255 255 255 / 52%);
  color: var(--ref-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-library-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-expand {
  width: 28px;
  padding: 0;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-expand svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"] :is(.music-dock-library, .music-dock-expand) {
  border-color: rgb(255 255 255 / 16%);
  background: rgb(255 255 255 / 12%);
  color: rgb(255 255 255 / 88%);
}

body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-library, .music-dock-expand):hover {
  transform: translateY(-1px);
  background: rgb(255 255 255 / 78%);
}

body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"] :is(.music-dock-library, .music-dock-expand):hover {
  background: rgb(255 255 255 / 22%);
}

/* —— ④ 第二行：收藏 + 上一首 / 播放 / 下一首 + 音柱 —— */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-controls {
  grid-area: controls;
  position: static;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0;
  transform: none;
}

body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-favorite, .music-dock-step, .music-dock-play) {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--mw-btn);
  height: var(--mw-btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  box-shadow: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-play {
  width: var(--mw-play);
  height: var(--mw-play);
  background: var(--ref-ink);
  color: var(--ref-surface);
}

body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"] .music-dock-play {
  background: rgb(255 255 255 / 18%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
}

body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-favorite, .music-dock-step, .music-dock-play):hover { transform: translateY(-1px) }
body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-favorite, .music-dock-step):hover { background: rgb(127 127 127 / 16%) }
body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-favorite, .music-dock-step, .music-dock-play):disabled { opacity: .38; cursor: default; transform: none }

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-favorite {
  /* ⚠️ 2026-10-15 第二轮：不要再用「负 margin 把按钮往左拉」——手机端那样会让
     按钮框离封面只剩 4px，封面的投影一压过来看着就像心形被遮住了一点
     （用户报的「收藏按钮有一点点遮挡」）。现在按钮留在原格子里，
     改由上面的文案区加等量左内边距去对齐心的可见左边缘。 */
  margin-inline-start: 0;
  margin-inline-end: auto;
  color: inherit;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-favorite svg {
  width: 20px;
  height: 20px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-favorite.is-active svg { fill: #ff5f6d; stroke: #ff5f6d }

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-controls .music-dock-step svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-controls .music-dock-play svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  stroke-linecap: round;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-play .music-dock-play-icon { display: block }
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-play .music-dock-pause-icon { display: none; stroke-width: 2.4 }
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-play.is-playing .music-dock-play-icon { display: none }
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-play.is-playing .music-dock-pause-icon { display: block }

/* —— ⑤ 真·音柱：高度 = Web Audio 实时频谱写进来的 --lv —— */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-visualizer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2px;
  width: 34px;
  height: 24px;
  margin-inline-start: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-visualizer[hidden] { display: none }

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-visualizer i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  opacity: .72;
  transform-origin: bottom center;
  transform: scaleY(var(--lv, .08));
  will-change: transform;
}

body.site-refined #mobile-music-dock .music-dock-wrap[data-playing="true"] .music-dock-visualizer[data-live="true"] { opacity: 1 }

/* —— ⑥ 第三行：时间 + 进度条 + 时间 —— */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-clock {
  flex: 0 0 auto;
  min-width: 30px;
  color: var(--ref-muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-clock#music-dock-total { text-align: right }

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-progress {
  flex: 1 1 auto;
  display: block;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 6px 0;
  border-radius: 999px;
  cursor: pointer;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-progress:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 55%, transparent);
  outline-offset: 2px;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-track {
  display: block;
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ref-ink) 14%, transparent);
  transition: height 160ms ease;
}

body.site-refined #mobile-music-dock .music-dock-wrap[data-has-track="true"] .music-dock-track { background: rgb(255 255 255 / 22%) }
body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-progress:hover, .music-dock-progress.is-active) .music-dock-track { height: 6px }

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: var(--dock-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  color: inherit;
}

body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-knob {
  position: absolute;
  top: 50%;
  left: var(--dock-progress, 0%);
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity 160ms ease, transform 160ms ease;
}

body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-progress:hover, .music-dock-progress.is-active, .music-dock-progress:focus-visible) .music-dock-knob {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 进度条的填充宽度用 --dock-progress（paintDock 每帧写） */
body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-progress .music-dock-fill { width: var(--dock-progress, 0%) }

@keyframes music-widget-breathe {
  0% { transform: scale(1.08) translate3d(-1.5%, -1%, 0); filter: blur(26px) saturate(1.25) }
  100% { transform: scale(1.18) translate3d(2%, 1.5%, 0); filter: blur(32px) saturate(1.55) }
}

/* —— 桌面端（≥1200px）：更高一档、封面 76px —— */
@media (min-width: 1200px) {
  body.site-refined .hero-tools-row #mobile-music-dock {
    width: 100%;
    margin: 0;
  }

  /* 组件列加宽到 470：歌名不再被右上角两个按钮挤成 8 个字 */
  body.site-refined .page-shell > main > .hero-tools-row {
    grid-template-columns: minmax(360px, 470px) minmax(0, 1fr);
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap {
    --mw-cover: 76px;
    --mw-gap: 14px;
    --mw-btn: 36px;
    --mw-play: 44px;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    padding: 18px;
    border-radius: 20px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-copy {
    min-height: 49px;
  }

  /* 桌面端歌词两行（歌名 25 + 两行 22×2 = 71） */
  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap[data-lyric="true"] .music-dock-copy {
    min-height: 71px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-title {
    font-size: 17px;
    line-height: 25px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-note,
  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-lyric:not([hidden]) {
    font-size: 14.5px;
    line-height: 22px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-visualizer {
    width: 46px;
    height: 26px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-visualizer i { width: 3px }
  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-favorite svg { width: 20px; height: 20px }
}

/* —— 手机端：同一套结构，尺寸小一档 —— */
@media (max-width: 720px) {
  body.site-refined #mobile-music-dock { margin: 14px auto 26px }

  body.site-refined #mobile-music-dock .music-dock-wrap {
    --mw-cover: 62px;
    --mw-gap: 11px;
    --mw-btn: 34px;
    --mw-play: 40px;
    padding: 13px;
    border-radius: 16px;
  }

  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-title { font-size: 14.5px; line-height: 21px }
  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-note,
  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-lyric:not([hidden]) { font-size: 13.5px; line-height: 20px }
  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-clock { font-size: 10.5px; min-width: 28px; opacity: .82 }

  /* 手机端把「音乐库」收成图标，把宽度还给歌名（用户：手机端封面小、按钮乱） */
  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-library {
    width: 30px;
    padding: 0;
  }

  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-library .music-dock-library-text {
    display: none;
  }

  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-expand { width: 30px }
  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-tools { gap: 5px }
}

/* —— 无障碍：关掉动效时不呼吸、不缩放 —— */
@media (prefers-reduced-motion: reduce) {
  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-ambient { animation: none !important }
  body.site-refined #mobile-music-dock .music-dock-wrap .music-dock-disc { animation: none !important }
  body.site-refined #mobile-music-dock .music-dock-wrap :is(.music-dock-disc, .music-dock-play, .music-dock-step, .music-dock-favorite, .music-dock-library, .music-dock-expand):hover { transform: none }
}

/* ---------------------------------------------------------------------------
   2026-10-15 musicwidget6：小组件的「封面取色动态背景」搬进展开播放器
   ---------------------------------------------------------------------------
   用户：「我感觉你这个小组件的动态背景做得挺好的，希望你也把它应用到展开后的
   大背景上」。这里复用 music-player.js 写到 :root 的 --music-cover-image /
   --music-cover-rgb（同一首歌同一套颜色），面板有歌时变成封面玻璃，
   同时把面板内部的文字色变量改掉，歌词 / 标题 / 按钮自动跟着变白。
   --------------------------------------------------------------------------- */
.player-expand-inner {
  position: relative;
  isolation: isolate;
}

.player-expand-inner::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -28% -12%;
  display: block;
  background-image:
    linear-gradient(105deg, rgb(var(--music-cover-rgb, 47 105 180) / 62%), rgb(16 20 30 / 26%)),
    var(--music-cover-image, none);
  background-position: center;
  background-size: cover;
  filter: blur(38px) saturate(1.35);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 420ms ease;
  pointer-events: none;
}

.player-expand-inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(120deg, rgb(5 8 14 / 88%), rgb(5 8 14 / 66%) 55%, rgb(var(--music-cover-rgb, 47 105 180) / 32%));
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}

.player-expand[data-has-track="true"] .player-expand-inner::before { opacity: .82 }
.player-expand[data-has-track="true"] .player-expand-inner::after { opacity: 1 }

.player-expand[data-has-track="true"] .player-expand-inner {
  --text: #fff;
  --text-soft: rgb(255 255 255 / 84%);
  --text-faint: rgb(255 255 255 / 58%);
  --border: rgb(255 255 255 / 16%);
  --surface: rgb(255 255 255 / 10%);
  --surface-solid: rgb(20 24 33 / 92%);
  border-color: rgb(255 255 255 / 14%);
  background: rgb(16 19 27 / 82%);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   2026-10-21 desktop-layout1：桌面端统一版式节奏
   ---------------------------------------------------------------------------
   用户反馈：手机端已经够紧凑，桌面端却像几套不同尺寸的组件拼在一起。
   根因不是单个模块，而是三处节奏不一致：
     · 首屏标题区过高，和右侧热点榜之间留下大片无效空白；
     · 音乐卡 176px 左右，搜索框只有 64px，整行被音乐卡拉松；
     · 首页固定 5 列，11 个模块排成 5 + 5 + 1，最后一张孤零零挂在左边。
   这里只在 ≥1200px 生效：收紧首屏、统一工具栏高度、改成稳定的 4 列
   横向信息卡。手机端和平板端完全不动。
   --------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  body.site-refined .page-shell > main {
    padding: 82px 40px 42px;
  }

  body.site-refined .page-shell > main > :is(.hero, .hero-tools-row, .module-home) {
    width: min(1360px, 100%);
    max-width: 1360px;
  }

  /* 首屏：标题和热点榜顶部对齐，高度从约 330px 收到约 250px。 */
  body.site-refined .page-shell > main > .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(420px, .9fr);
    align-items: stretch;
    gap: 30px;
    padding-top: 0;
  }

  body.site-refined .hero-text {
    align-self: center;
    min-width: 0;
    max-width: 780px;
    padding: 10px 0;
  }

  body.site-refined .hero .eyebrow {
    margin-bottom: 14px;
    font-size: 9px;
    letter-spacing: .13em;
  }

  body.site-refined #hero-display {
    font-size: clamp(42px, 4vw, 58px);
    line-height: 1.01;
    letter-spacing: -.05em;
  }

  body.site-refined #hero-display-lead {
    margin-bottom: 5px;
    font-size: .64em;
  }

  body.site-refined .hero-cn {
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.55;
  }

  body.site-refined .hero-visual {
    align-self: stretch;
    aspect-ratio: auto;
    height: auto;
    min-height: clamp(228px, 19vw, 258px);
  }

  body.site-refined .hero-visual :is(.hot-board, .hero-lyrics) {
    height: clamp(228px, 19vw, 258px);
    border-radius: 20px;
  }

  body.site-refined .hero-visual .hot-board {
    padding: 18px;
  }

  body.site-refined .hero-visual .hot-board-head {
    min-height: 24px;
    margin-bottom: 10px;
  }

  body.site-refined .hero-visual .hot-board-title {
    font-size: 13px;
    letter-spacing: -.01em;
  }

  /* 搜索与音乐：同一排、同一视觉重心。音乐卡保留完整功能，但压到约 112px。 */
  body.site-refined .page-shell > main > .hero-tools-row {
    grid-template-columns: minmax(390px, 440px) minmax(0, 1fr);
    align-items: center;
    margin: 18px auto 0;
    gap: 16px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock {
    width: 100%;
    margin: 0;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap {
    --mw-cover: 64px;
    --mw-gap: 12px;
    --mw-btn: 30px;
    --mw-play: 36px;
    box-sizing: border-box;
    height: auto;
    min-height: 112px;
    padding: 12px 14px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgb(24 43 73 / 7%), inset 0 1px rgb(255 255 255 / 55%);
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock {
    grid-template-columns: var(--mw-cover) minmax(0, 1fr) auto;
    grid-template-rows: auto 32px 8px;
    grid-template-areas:
      "cover copy tools"
      "cover controls controls"
      "bar bar bar";
    column-gap: var(--mw-gap);
    row-gap: 4px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-copy {
    min-height: 0;
    justify-content: center;
    padding-inline-start: 0;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-title {
    font-size: 15px;
    line-height: 20px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-note,
  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-lyric:not([hidden]) {
    font-size: 12.5px;
    line-height: 17px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap[data-lyric="true"] .music-dock-copy {
    min-height: 0;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap :is(.music-dock-library, .music-dock-expand) {
    height: 26px;
    min-height: 26px;
    padding-inline: 9px;
    border-radius: 8px;
    font-size: 10px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-expand {
    width: 26px;
    padding: 0;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-controls {
    gap: 2px;
  }

  body.site-refined .hero-tools-row #mobile-music-dock .music-dock-wrap .music-dock-visualizer {
    width: 34px;
    height: 20px;
  }

  body.site-refined .hero-tools-row #hero-search .search-box {
    height: 76px;
    align-self: center;
    padding: 8px 14px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgb(24 43 73 / 6%);
  }

  body.site-refined .hero-tools-row #hero-search #search-input {
    height: 48px;
    font-size: 15px;
  }

  /* 模块区：稳定的 4 列；标题和图标同排，卡片从 178px 收到约 140px。 */
  body.site-refined .page-shell > main > .module-home {
    margin-top: 18px !important;
  }

  body.site-refined .collection-heading {
    align-items: center;
    margin-bottom: 16px;
    padding: 0 2px;
  }

  body.site-refined .collection-heading h2 {
    font-size: 22px;
    letter-spacing: -.035em;
  }

  body.site-refined .section-kicker {
    margin-bottom: 5px;
  }

  body.site-refined .module-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  body.site-refined .module-grid .module-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: 42px minmax(34px, auto) 14px;
    min-height: 140px;
    height: auto;
    padding: 16px;
    column-gap: 12px;
    row-gap: 8px;
    align-content: start;
    align-items: center;
    border-radius: 15px;
    box-shadow: 0 1px 2px rgb(24 43 73 / 3%) !important;
  }

  body.site-refined .module-grid .module-card .module-icon {
    grid-column: 1;
    grid-row: 1;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 12px;
  }

  body.site-refined .module-grid .module-card .module-name {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    margin: 0;
    padding-right: 18px;
    font-size: 15px;
    line-height: 1.3;
  }

  body.site-refined .module-grid .module-card .module-card-description {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  body.site-refined .module-grid .module-card .module-count {
    position: static !important;
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: end;
    margin: 0;
    font-size: 10.5px;
  }

  body.site-refined .module-grid .module-card::after {
    top: 17px;
    right: 16px;
  }
}

/* Service Worker 缓存页提示：只在到 Cloudflare 的连接失败时出现。 */
.offline-cache-notice {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 11px 12px 11px 14px;
  border: 1px solid color-mix(in srgb, var(--ref-line, #e3e7ed) 84%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ref-surface, #fff) 94%, transparent);
  color: var(--ref-ink, #202735);
  box-shadow: 0 16px 48px rgb(10 20 40 / 20%);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transform: translateX(-50%);
  animation: offline-notice-in 220ms ease-out both;
}

.offline-cache-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgb(245 158 11 / 14%);
}

.offline-cache-notice.is-update .offline-cache-dot {
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgb(59 130 246 / 14%);
}

.offline-cache-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  font-size: 11px;
  line-height: 1.45;
}

.offline-cache-copy strong {
  font-size: 12px;
  font-weight: 650;
}

.offline-cache-copy span {
  color: var(--ref-muted, #657080);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offline-cache-retry {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--ref-line, #e3e7ed) 88%, transparent);
  border-radius: 8px;
  background: var(--ref-soft, #f6f8fb);
  color: var(--ref-ink, #202735);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.offline-cache-retry:hover {
  border-color: color-mix(in srgb, var(--ref-accent, #365edc) 42%, var(--ref-line, #e3e7ed));
}

.offline-cache-dismiss {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ref-muted, #657080);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.offline-cache-dismiss:hover {
  background: var(--ref-soft, #f6f8fb);
  color: var(--ref-ink, #202735);
}

html[data-theme="dark"] .offline-cache-notice {
  border-color: rgb(255 255 255 / 12%);
  background: rgb(22 24 30 / 94%);
  color: #f1f3f7;
}

html[data-theme="dark"] .offline-cache-copy span {
  color: #aeb4c0;
}

html[data-theme="dark"] .offline-cache-retry {
  border-color: rgb(255 255 255 / 13%);
  background: rgb(255 255 255 / 7%);
  color: #f1f3f7;
}

html[data-theme="dark"] .offline-cache-dismiss:hover {
  background: rgb(255 255 255 / 8%);
  color: #f1f3f7;
}

@keyframes offline-notice-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 720px) {
  .view-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .link-health-legend {
    width: 100%;
    justify-content: flex-start;
    gap: 0.28rem 0.55rem;
    font-size: 0.64rem;
  }

  .offline-cache-notice {
    width: calc(100vw - 24px);
    max-width: none;
    padding: 10px 10px 10px 12px;
    gap: 9px;
  }

  .offline-cache-copy span {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   2026-10-26 bento1：桌面首页改成三块明确层级的 Bento
   ---------------------------------------------------------------------------
   左大卡：标题 + 全网热点榜；右上卡：正在播放；右下卡：搜索 + THE DIRECTORY。
   手机端仍沿用“标题 → 音乐 → 热点榜 → 目录”的原顺序。
   --------------------------------------------------------------------------- */
.home-bento.is-secondary > .hero,
.home-bento.is-secondary .bento-player-panel,
.home-bento.is-secondary .module-home {
  display: none !important;
}

.hot-board-updated {
  margin: 0;
  color: var(--ref-muted, var(--text-faint));
  font-size: 10px;
  font-weight: 550;
  white-space: nowrap;
}

.bento-panel-heading {
  display: none;
}

@media (min-width: 1200px) {
  .home-bento {
    display: grid;
    width: min(1360px, 100%);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.52fr) minmax(430px, .88fr);
    gap: 16px;
    align-items: stretch;
  }

  .home-bento.is-secondary {
    display: block;
    width: min(1040px, 100%);
    margin: 0 auto 20px;
  }

  .home-bento.is-secondary .bento-side,
  .home-bento.is-secondary .bento-directory-panel {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .home-bento.is-secondary .directory-search-slot {
    width: 100%;
    margin: 0 0 18px;
  }

  .bento-side {
    display: grid;
    min-width: 0;
    grid-template-rows: 190px minmax(0, 1fr);
    gap: 16px;
  }

  .page-shell > main > .home-bento > .hero {
    display: flex;
    height: 100%;
    min-width: 0;
    min-height: 664px;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 0;
    border: 1px solid var(--ref-line, var(--border));
    border-radius: 22px;
    background: var(--ref-surface, var(--surface));
    box-shadow: none;
    text-align: left;
  }

  .home-bento > .hero .hero-text {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 136px;
    margin: 0;
    padding: 21px 24px 17px;
    align-content: center;
    align-self: stretch;
    justify-items: start;
    gap: 0;
  }

  .home-bento > .hero .eyebrow {
    margin: 0 0 8px;
    color: var(--ref-accent, var(--accent));
    font-size: 8.5px;
    letter-spacing: .15em;
  }

  .home-bento > .hero #hero-display {
    max-width: 760px;
    margin: 0;
    font-size: clamp(35px, 3.55vw, 50px);
    line-height: .98;
    letter-spacing: -.055em;
  }

  .home-bento > .hero #hero-display-lead {
    display: inline;
    margin: 0;
    font-size: .5em;
    letter-spacing: -.035em;
  }

  .home-bento > .hero #hero-display-main {
    display: block;
  }

  .home-bento > .hero .hero-cn {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
  }

  .home-bento > .hero .hero-visual {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    flex: 1;
    align-self: stretch;
    border: 0;
    border-top: 1px solid var(--ref-line, var(--border));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .home-bento > .hero .hero-visual :is(.hot-board, .hero-lyrics) {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .home-bento > .hero .hot-board {
    display: flex;
    padding: 17px 20px 19px;
    flex-direction: column;
  }

  .home-bento > .hero .hot-board-head {
    min-height: 24px;
    margin-bottom: 12px;
  }

  .home-bento > .hero .hot-board-title {
    font-size: 15px;
    font-weight: 650;
  }

  .home-bento > .hero .hot-board-station-wrap {
    flex: none;
  }

  .home-bento > .hero .hot-board-source-card {
    min-height: 0;
    flex: 1;
  }

  .home-bento > .hero .hot-board-body {
    min-height: 0;
    flex: 1;
  }

  .home-bento > .hero .hot-board-list {
    height: 100%;
    grid-auto-rows: minmax(0, 1fr);
  }

  .home-bento > .hero .hot-board-rotate {
    top: 15px;
    right: 18px;
  }

  .bento-player-panel,
  .bento-directory-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ref-line, var(--border));
    border-radius: 20px;
    background: var(--ref-surface, var(--surface));
    box-shadow: none;
  }

  .bento-player-panel {
    display: flex;
    padding: 14px 15px 13px;
    flex-direction: column;
    justify-content: space-between;
  }

  .bento-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
  }

  .bento-panel-heading p {
    margin: 0 0 2px;
    color: var(--ref-accent, var(--accent));
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .15em;
  }

  .bento-panel-heading h2 {
    margin: 0;
    color: var(--ref-ink, var(--text));
    font-size: 15px;
    font-weight: 620;
    letter-spacing: -.025em;
  }

  .bento-live-dot {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgb(34 197 94 / 12%);
    animation: bento-live-pulse 2.2s ease-in-out infinite;
  }

  .bento-player-panel .hero-tools-row {
    display: block;
    width: 100%;
    margin: 0;
  }

  #hero-tools-row > #hero-search,
  #hero-tools-row > #search-suggest {
    display: none;
  }

  .bento-player-panel #mobile-music-dock {
    display: block;
    width: 100%;
    margin: 0;
  }

  .bento-player-panel #mobile-music-dock .music-dock-wrap {
    width: 100%;
    min-height: 112px;
    padding: 11px 13px;
    border-radius: 15px;
    background: var(--ref-soft, var(--surface-muted));
    box-shadow: none;
  }

  .bento-player-panel #mobile-music-dock .music-dock-wrap .music-dock {
    grid-template-columns: var(--mw-cover) minmax(0, 1fr) auto;
    grid-template-rows: auto 31px 7px;
    grid-template-areas:
      "cover copy tools"
      "cover controls controls"
      "bar bar bar";
    column-gap: 11px;
    row-gap: 3px;
  }

  .bento-directory-panel {
    display: flex;
    min-height: 0;
    padding: 14px;
    flex-direction: column;
  }

  .directory-search-slot {
    flex: none;
  }

  #directory-search-slot #hero-search {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  #directory-search-slot #hero-search .search-box {
    width: 100%;
    height: 50px;
    padding: 5px 10px;
    border-radius: 13px;
    box-shadow: none;
  }

  #directory-search-slot #hero-search #search-input {
    height: 38px;
    font-size: 13px;
  }

  #directory-search-slot #hero-search .search-shortcut {
    display: none;
  }

  #directory-search-slot .search-suggest {
    display: none !important;
  }

  .bento-directory-panel .module-home {
    display: flex;
    width: 100%;
    min-height: 0;
    margin: 11px 0 0;
    padding: 0;
    flex: 1;
    flex-direction: column;
  }

  .bento-directory-panel .collection-heading {
    min-height: 35px;
    margin: 0 0 9px;
    padding: 0 2px;
    align-items: flex-end;
  }

  .bento-directory-panel .collection-heading h2 {
    font-size: 18px;
    line-height: 1.1;
  }

  .bento-directory-panel .collection-heading > p {
    max-width: 170px;
    margin-bottom: 1px;
    font-size: 9.5px;
    line-height: 1.45;
    text-align: right;
  }

  .bento-directory-panel .section-kicker {
    margin-bottom: 3px;
    font-size: 8px;
    letter-spacing: .13em;
  }

  .site-refined .bento-directory-panel .module-grid {
    display: grid;
    min-height: 0;
    flex: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(48px, 1fr);
    gap: 8px;
  }

  .site-refined .bento-directory-panel .module-grid .module-card {
    display: grid;
    min-width: 0;
    min-height: 0;
    padding: 7px 9px;
    overflow: hidden;
    grid-template-columns: 27px minmax(0, 1fr);
    grid-template-rows: 28px minmax(0, 1fr);
    column-gap: 7px;
    row-gap: 3px;
    align-items: center;
    border-radius: 12px;
    box-shadow: none !important;
    text-decoration: none;
  }

  .site-refined .bento-directory-panel .module-grid .module-icon {
    display: grid;
    width: 27px;
    height: 27px;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    place-items: center;
    border-color: var(--ref-line, var(--border));
    border-radius: 8px;
    background: var(--ref-soft, var(--surface-muted));
    font-size: 10px;
  }

  .site-refined .bento-directory-panel .module-grid .module-name {
    display: -webkit-box;
    min-width: 0;
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
    color: var(--ref-ink, var(--text));
    font-size: 11.5px;
    font-weight: 620;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .site-refined .bento-directory-panel .module-grid .module-card-description {
    display: none;
  }

  .site-refined .bento-directory-panel .module-grid .module-count {
    position: static !important;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    overflow: hidden;
    color: var(--ref-muted, var(--text-faint));
    font-size: 9px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-refined .bento-directory-panel .module-grid .module-card::after {
    top: 10px;
    right: 10px;
    font-size: 11px;
  }

}

@keyframes bento-live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgb(34 197 94 / 10%);
    opacity: .75;
  }
  50% {
    box-shadow: 0 0 0 7px rgb(34 197 94 / 3%);
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
   2026-10-26 mobilesticky1：手机端紧凑排版 + 液态毛玻璃吸顶
   ---------------------------------------------------------------------------
   参考 Open-Source Android Apps 的排版规律：18px 页边距、细边框、12~16px
   圆角、低饱和蓝色强调色和更高信息密度；吸顶实现参考 RadioHub：
   position: sticky + 半透明表面 + backdrop-filter。RadioHub 的底色里有两层
   低透明度径向渐变，这里也用纯 CSS 伪元素复现流动的液态光，不额外加载
   canvas、图片或高频 JavaScript。滚动超过首屏标题后，顶栏收成单行，给内容
   让出高度；桌面端没有任何变化。
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  html {
    scroll-padding-top: calc(68px + env(safe-area-inset-top, 0px));
  }

  body.site-refined .site-header {
    position: sticky;
    z-index: 70;
    top: 0;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 96px;
    margin: 0;
    padding: max(2px, env(safe-area-inset-top, 0px)) 18px 6px;
    overflow: visible;
    align-items: center;
    border: 0;
    background: color-mix(in srgb, var(--ref-surface) 78%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ref-line) 82%, transparent);
    isolation: isolate;
    transition:
      min-height 220ms cubic-bezier(.22, 1, .36, 1),
      background-color 220ms ease,
      box-shadow 220ms ease;
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
  }

  .header-sticky-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  body.site-refined .site-header::before {
    position: absolute;
    z-index: -1;
    inset: -28px -12%;
    border-radius: 0 0 34px 34px;
    background:
      radial-gradient(circle at 14% 10%, rgb(86 132 238 / 24%), transparent 34%),
      radial-gradient(circle at 84% 78%, rgb(72 193 205 / 18%), transparent 32%),
      linear-gradient(105deg, rgb(255 255 255 / 12%), transparent 58%);
    content: "";
    filter: blur(17px) saturate(1.22);
    opacity: .9;
    transform: translate3d(-1.5%, 0, 0) scale(1.06);
    animation: mobile-header-liquid 11s ease-in-out infinite alternate;
    pointer-events: none;
  }

  html[data-theme="dark"] body.site-refined .site-header::before {
    background:
      radial-gradient(circle at 14% 10%, rgb(105 133 255 / 22%), transparent 35%),
      radial-gradient(circle at 84% 78%, rgb(48 171 184 / 16%), transparent 33%),
      linear-gradient(105deg, rgb(255 255 255 / 4%), transparent 58%);
  }

  body.site-refined .site-header::after {
    right: 18px;
    bottom: 0;
    left: 18px;
    width: auto;
    transform: none;
    background: color-mix(in srgb, var(--ref-line) 78%, transparent);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.site-refined .site-header {
      background: color-mix(in srgb, var(--ref-surface) 96%, transparent);
    }
  }

  body.site-refined .site-header :is(.brand, .header-actions, .header-tools) {
    min-height: 40px;
  }

  body.site-refined .site-header .header-actions .icon-button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  body.site-refined .site-header .hero-search {
    margin-top: 2px;
  }

  body.site-refined .site-header .search-box {
    height: 44px;
    background: color-mix(in srgb, var(--ref-surface) 88%, transparent);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--ref-line) 70%, transparent),
      0 3px 12px rgb(20 34 62 / 5%);
    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
  }

  html[data-theme="dark"] body.site-refined .site-header .search-box {
    background: color-mix(in srgb, var(--ref-soft) 88%, transparent);
  }

  body.site-refined .site-header .search-box:focus-within {
    transform: none;
    background: var(--ref-surface);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--ref-accent) 70%, transparent),
      0 5px 18px color-mix(in srgb, var(--ref-accent) 13%, transparent);
  }

  /* 进入模块 / 搜索结果后，首页目录已经没有内容可显示，不再保留空面板。 */
  body.site-refined .home-bento.is-secondary .bento-directory-panel {
    display: none;
  }

  /* 滚过标题后，顶栏从两行切成单行：菜单 + 搜索 + 功能按钮仍在。 */
  html.header-condensed body.site-refined .site-header {
    display: grid;
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding-top: max(3px, env(safe-area-inset-top, 0px));
    padding-bottom: 5px;
    grid-template-areas: "brand search actions";
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 8px;
    background: color-mix(in srgb, var(--ref-surface) 86%, transparent);
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--ref-line) 88%, transparent),
      0 8px 26px rgb(20 34 62 / 8%);
  }

  html[data-theme="dark"].header-condensed body.site-refined .site-header,
  html.header-condensed[data-theme="dark"] body.site-refined .site-header {
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--ref-line) 88%, transparent),
      0 10px 28px rgb(0 0 0 / 26%);
  }

  html.header-condensed body.site-refined .site-header .brand {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    grid-area: brand;
    gap: 0;
  }

  html.header-condensed body.site-refined .site-header .brand-copy {
    display: none;
  }

  html.header-condensed body.site-refined .site-header .hero-search {
    min-width: 0;
    margin: 0;
    grid-area: search;
  }

  html.header-condensed body.site-refined .site-header .header-actions {
    min-width: 0;
    min-height: 40px;
    grid-area: actions;
  }

  html.header-condensed body.site-refined .site-header .header-tools {
    min-height: 40px;
    gap: 3px;
  }

  html.header-condensed body.site-refined .site-header .header-actions .icon-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
  }

  html.header-condensed body.site-refined .site-header .header-actions .icon-button svg {
    width: 17px;
    height: 17px;
  }

  html.header-condensed body.site-refined .site-header .language-toggle span {
    font-size: 10px;
  }

  html.header-condensed body.site-refined .site-header .search-box {
    height: 40px;
    padding-inline: 9px;
    gap: 7px;
  }

  html.header-condensed body.site-refined .site-header .search-avatar {
    width: 24px;
    height: 24px;
  }

  html.header-condensed body.site-refined .site-header #search-input {
    font-size: 13px;
  }

  /* 搜索态沿用原来的全宽输入界面，不被滚动后的单行网格干扰。 */
  html.header-condensed.search-focus body.site-refined .site-header,
  html.search-focus body.site-refined .site-header {
    display: flex;
    min-height: 0;
    padding: .6rem 18px .7rem;
    grid-template-areas: none;
    background: color-mix(in srgb, var(--ref-surface) 94%, transparent);
  }

  html.search-focus body.site-refined .site-header .hero-search {
    grid-area: auto;
  }

  html.search-focus body.site-refined .site-header :is(.brand, .header-actions, .header-tools) {
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Hero：保留大标题的辨识度，但收紧上下留白，并让文字真正铺满内容列。 */
  .home-bento > .hero {
    padding: 16px 0 14px;
  }

  .home-bento > .hero .hero-text {
    width: 100%;
    max-width: none;
    padding: 0;
    justify-self: stretch;
  }

  .home-bento > .hero .eyebrow {
    margin: 0 0 9px;
    font-size: 8px;
    line-height: 1.45;
    letter-spacing: .13em;
  }

  .home-bento > .hero #hero-display {
    max-width: 100%;
    font-size: clamp(29px, 8.25vw, 33px);
    line-height: 1.02;
    letter-spacing: -.052em;
  }

  .home-bento > .hero #hero-display-lead {
    margin-bottom: 4px;
    font-size: .59em;
    letter-spacing: -.025em;
  }

  .home-bento > .hero .hero-cn {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: .08em;
    text-indent: 0;
  }

  /* 播放器保留差异化，但压掉多余内边距，让首屏更早看到榜单。 */
  body.site-refined .bento-player-panel #mobile-music-dock {
    margin-top: 10px;
  }

  body.site-refined .bento-player-panel #mobile-music-dock .music-dock-wrap {
    padding: 10px 11px;
    border-radius: 14px;
  }

  body.site-refined .bento-player-panel #mobile-music-dock .music-dock-wrap .music-dock {
    grid-template-rows: 41px 38px 13px;
    row-gap: 2px;
  }

  body.site-refined .bento-player-panel #mobile-music-dock .music-dock-wrap .music-dock-play,
  body.site-refined .bento-player-panel #mobile-music-dock .music-dock-wrap .music-dock-step {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  body.site-refined .bento-player-panel #mobile-music-dock .music-dock-wrap .music-dock-title {
    font-size: 14px;
    line-height: 19px;
  }

  body.site-refined .bento-player-panel #mobile-music-dock .music-dock-wrap :is(.music-dock-note, .music-dock-lyric:not([hidden])) {
    font-size: 12.5px;
    line-height: 18px;
  }

  /* 热点榜：标题固定单行；高密度列表不把目录挤到第二屏。 */
  body.site-refined .bento-player-panel .hero-visual {
    margin: 10px 0 0;
  }

  body.site-refined .bento-player-panel .hero-visual :is(.hot-board, .hero-lyrics) {
    height: min(39vh, 326px);
    min-height: 300px;
    border-radius: 16px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board {
    padding: 12px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-head {
    display: flex;
    min-height: 24px;
    margin-bottom: 7px;
    align-items: center;
    gap: 8px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-title {
    flex: 0 0 auto;
    font-size: 14px;
    white-space: nowrap;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-updated {
    min-width: 0;
    overflow: hidden;
    flex: 0 1 auto;
    margin-left: auto;
    text-align: right;
    text-overflow: ellipsis;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-mobile-track {
    gap: 8px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-mobile-card {
    flex-basis: calc(100% - 24px);
    padding: 7px 8px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-mobile-card .hot-board-item {
    min-height: 0;
    font-size: 11.5px;
  }

  /* THE DIRECTORY：两列高密度信息卡，参考列表站的“图标 + 标题 + 元信息”节奏。 */
  body.site-refined .bento-directory-panel {
    margin-top: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  body.site-refined .bento-directory-panel .collection-heading {
    min-height: 34px;
    margin-bottom: 10px;
  }

  body.site-refined .bento-directory-panel .collection-heading h2 {
    font-size: 18px;
  }

  body.site-refined .bento-directory-panel .collection-heading > p {
    display: block;
    max-width: 145px;
    font-size: 9px;
  }

  body.site-refined .bento-directory-panel .module-home {
    margin-top: 0;
  }

  body.site-refined .bento-directory-panel .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(96px, auto);
    gap: 8px;
  }

  body.site-refined .bento-directory-panel .module-grid .module-card {
    display: grid;
    min-height: 96px;
    padding: 10px 10px 9px;
    grid-template-columns: 29px minmax(0, 1fr);
    grid-template-rows: 29px minmax(30px, auto) 12px;
    column-gap: 8px;
    row-gap: 4px;
    align-content: start;
    border-radius: 12px;
  }

  body.site-refined .bento-directory-panel .module-grid .module-icon {
    width: 29px;
    height: 29px;
    grid-column: 1;
    grid-row: 1;
    border-radius: 8px;
    font-size: 11px;
  }

  body.site-refined .bento-directory-panel .module-grid .module-name {
    display: -webkit-box;
    min-height: 0;
    padding-right: 10px;
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
    align-self: center;
    font-size: 12px;
    font-weight: 620;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.site-refined .bento-directory-panel .module-grid .module-card-description {
    display: -webkit-box;
    min-height: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.site-refined .bento-directory-panel .module-grid .module-count {
    min-height: 0;
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: end;
    font-size: 8.5px;
    line-height: 1.2;
  }

  body.site-refined .bento-directory-panel .module-grid .module-card::after {
    top: 10px;
    right: 10px;
    font-size: 10px;
  }

  /* 预览层只服务桌面 hover；手机点按直接进入模块。 */
}

/* ---------------------------------------------------------------------------
   2026-10-27 glasssquircle1：恢复手机顶栏液态玻璃 + iPhone 连续圆角
   ---------------------------------------------------------------------------
   GitHub 先例：
   - wopian/smooth-corners（MIT）用 5.0 作为 iOS app icon 的 squircle 曲率；
   - phamfoo/figma-squircle 与 CornerKit（均 MIT）使用约 0.6 的连续圆角平滑度。
   实测 Chrome 的 superellipse(4) 会把这类小卡片的曲率压得偏方，
   因此最终只保留更大的连续半径，所有浏览器都走统一的标准圆角。
   顶栏只恢复原有的半透明背景、backdrop blur 和 CSS 流动光斑，不恢复折叠逻辑。
   --------------------------------------------------------------------------- */
:root {
  --ios-radius-control: 13px;
  --ios-radius-widget: 26px;
  --ios-radius-panel: 34px;
}

body.site-refined :where(
  .module-card,
  .bookmark-card,
  .bookmark-section,
  .collection-panel,
  .toolbar
) {
  border-radius: 20px;
}

body.site-refined :where(
  .music-dock-wrap,
  .hot-board,
  .hero-lyrics,
  .hot-board-source-card
) {
  border-radius: var(--ios-radius-widget);
}

body.site-refined :where(
  .player-expand-inner,
  .settings-panel,
  .music-library-panel,
  .goal-dialog,
  .tools-panel,
  .workspace-card
) {
  border-radius: var(--ios-radius-panel);
}

body.site-refined :where(
  .icon-button,
  .hot-board-detail-close,
  .hot-board-tab,
  .hot-board-expand,
  .hot-board-view-all
) {
  border-radius: var(--ios-radius-control);
}

@media (max-width: 720px) {
  body.site-refined .site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    background: color-mix(in srgb, var(--ref-surface) 66%, transparent);
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--ref-line) 72%, transparent),
      0 10px 32px rgb(20 34 62 / 10%);
    backdrop-filter: blur(24px) saturate(185%);
    -webkit-backdrop-filter: blur(24px) saturate(185%);
  }

  body.site-refined .site-header::before {
    display: block;
    opacity: .82;
  }

  body.site-refined .site-header::after {
    right: 12px;
    left: 12px;
    background: rgb(255 255 255 / 44%);
  }

  html[data-theme="dark"] body.site-refined .site-header {
    background: color-mix(in srgb, var(--ref-soft) 70%, transparent);
    box-shadow:
      0 1px 0 rgb(255 255 255 / 8%),
      0 12px 34px rgb(0 0 0 / 28%);
  }

  html[data-theme="dark"] body.site-refined .site-header::after {
    background: rgb(255 255 255 / 9%);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.site-refined .site-header {
      background: color-mix(in srgb, var(--ref-surface) 94%, transparent);
    }
  }

  body.site-refined :where(
    .module-card,
    .bookmark-card,
    .bookmark-section,
    .collection-panel,
    .toolbar
  ) {
    border-radius: 18px;
  }

  body.site-refined :where(
    .music-dock-wrap,
    .hot-board,
    .hero-lyrics,
    .hot-board-source-card
  ) {
    border-radius: 24px;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel #mobile-music-dock .music-dock-wrap {
    min-height: 112px;
    padding-block: 14px;
    border-radius: 26px;
  }

  .hot-board-dialog {
    inset: 0;
    width: min(calc(100vw - 28px), 440px);
    height: min(64dvh, 620px);
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7ec;
    border-radius: 32px;
    background: #fff;
    color: #111;
    opacity: 1;
    box-shadow: 0 24px 70px rgb(0 0 0 / 20%);
    color-scheme: light;
  }

  .hot-board-dialog::backdrop {
    background: #fff;
  }

  .hot-board-dialog[open] {
    animation: hot-detail-enter 180ms cubic-bezier(.22, 1, .36, 1);
  }

  .hot-board-detail-card {
    height: 100%;
    max-height: none;
    background: #fff;
    color: #111;
  }

  .hot-board-detail-head {
    padding: 16px 18px 14px;
    border-bottom-color: #ececf1;
    background: #fff;
  }

  .hot-board-detail-head h2,
  .hot-board-detail-body .hot-board-link {
    color: #111;
  }

  .hot-board-detail-close {
    border-radius: 13px;
    background: #f2f2f7;
    color: #555;
  }

  .hot-board-detail-body {
    padding: 0 18px 18px;
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: #c7c7cc transparent;
  }

  .hot-board-detail-body .hot-board-list {
    gap: 0;
  }

  .hot-board-detail-body .hot-board-list + .hot-board-list {
    margin-top: 0;
  }

  .hot-board-detail-body .hot-board-item {
    min-height: 46px;
    padding: 8px 0;
    border-bottom-color: #ececf1;
  }

  .hot-board-detail-body .hot-board-rank {
    color: #8e8e93;
  }

  .hot-board-detail-body .hot-board-rank.is-top {
    border-color: #111;
    background: #111;
    color: #fff;
  }
}

@media (min-width: 721px) {
  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel #mobile-music-dock .music-dock-wrap {
    min-height: 112px;
    padding-block: 12px;
    border-radius: 26px;
  }
}

@keyframes mobile-header-liquid {
  0% {
    transform: translate3d(-2.5%, -2%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(2%, 1.5%, 0) scale(1.12);
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  body.site-refined .site-header::before {
    animation: none !important;
  }

  body.site-refined .site-header {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   2026-10-27 desktoplayout1：桌面首页改成参考站的“内容列 + 辅助列”
   ---------------------------------------------------------------------------
   Open-Source Android Apps 的桌面版没有把所有内容塞进两块巨型 Bento：
     左侧是标题、中央搜索、紧凑音乐条和完整目录；
     右侧只留一个高度受控的辅助模块；
     顶部还有第二个紧凑搜索入口。
   这里保留本站功能，仅重排 ≥1200px 的首页。移动端吸顶和原顺序不动。
   --------------------------------------------------------------------------- */
.header-search-shortcut {
  display: none;
}

@media (min-width: 1200px) {
  body.site-refined .site-header {
    top: 0;
    right: 0;
    left: var(--rail-width);
    display: flex;
    width: auto;
    max-width: none;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border: 0;
    border-bottom: 1px solid var(--ref-line);
    background: var(--ref-surface);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header-search-shortcut {
    display: inline-flex;
    width: 224px;
    height: 34px;
    min-width: 0;
    padding: 0 9px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--ref-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ref-surface) 92%, transparent);
    color: var(--ref-muted);
    font: 500 12px/1 var(--font-ui);
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
  }

  .header-search-shortcut:hover,
  .header-search-shortcut:focus-visible {
    border-color: color-mix(in srgb, var(--ref-accent) 55%, var(--ref-line));
    background: var(--ref-surface);
    color: var(--ref-ink);
  }

  .header-search-shortcut svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .header-search-shortcut span {
    min-width: 0;
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-search-shortcut kbd {
    flex: none;
    padding: 3px 5px;
    border: 0;
    border-radius: 5px;
    background: var(--ref-soft);
    color: var(--ref-muted);
    font: 500 9px/1 var(--font-ui);
  }

  body.site-refined .site-header .header-tools {
    gap: 4px;
  }

  body.site-refined .site-header .header-actions .icon-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 9px;
  }

  body.site-refined .site-header .header-actions .icon-button svg {
    width: 17px;
    height: 17px;
  }

  body.site-refined .home-bento:not(.is-secondary) {
    display: grid;
    width: min(1105px, 100%);
    max-width: 1105px;
    margin: 0 auto;
    padding: 0;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 374px);
    grid-template-rows: auto auto auto;
    column-gap: clamp(48px, 4.7vw, 68px);
    row-gap: 42px;
    align-items: start;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero {
    display: contents;
  }

  body.site-refined .home-bento:not(.is-secondary) > .bento-side {
    display: contents;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hero-text {
    display: block;
    width: 100%;
    max-width: 576px;
    min-height: 0;
    margin: 0;
    padding: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .eyebrow {
    margin: 0 0 12px;
    color: var(--ref-muted);
    font-size: 9px;
    line-height: 1.45;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero #hero-display {
    max-width: 576px;
    margin: 0;
    font-size: clamp(31px, 2.4vw, 34px);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 600;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero #hero-display-lead {
    margin-bottom: 4px;
    font-size: .52em;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hero-cn {
    margin: 12px 0 0;
    color: var(--ref-muted);
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: 0;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hero-visual {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: calc(100% + 36px);
    min-height: 0;
    margin: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    aspect-ratio: auto;
    margin-top: -36px;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hero-visual :is(.hot-board, .hero-lyrics) {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid var(--ref-line);
    border-radius: 18px;
    background: var(--ref-surface);
    box-shadow: none;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hero-visual .hot-board {
    display: flex;
    padding: 14px;
    flex-direction: column;
    gap: 6px;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-head {
    min-height: 24px;
    margin: 0;
    align-items: center;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-title {
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-updated {
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-station-wrap {
    flex-basis: 34px;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-station-shell {
    height: 34px;
    grid-template-columns: minmax(0, 1fr) 54px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-tabs {
    height: 28px;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-source-card {
    min-height: 0;
    padding: 8px;
    flex: 1;
    border-radius: 12px;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-source-head {
    min-height: 24px;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-source-icon {
    width: 24px;
    height: 24px;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-source-copy h3 {
    font-size: 12px;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-body {
    min-height: 0;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-list {
    height: 100%;
    grid-auto-rows: minmax(0, 1fr);
    gap: 1px;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-item {
    font-size: 11.5px;
    line-height: 1.3;
  }

  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-rotate {
    top: 12px;
    right: 12px;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel {
    display: flex;
    width: 100%;
    max-width: 448px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    flex-direction: column;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel .bento-panel-heading {
    display: none;
  }

  body.site-refined .center-search-slot {
    display: block;
    width: 100%;
    max-width: 448px;
    margin: 0;
  }

  body.site-refined #center-search-slot #hero-search {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  body.site-refined #center-search-slot #hero-search .search-box {
    width: 100%;
    height: 44px;
    padding: 4px 12px;
    gap: 10px;
    border: 1px solid var(--ref-line);
    border-radius: 18px;
    background: var(--ref-surface);
    box-shadow: none;
  }

  body.site-refined #center-search-slot #hero-search #search-input {
    height: 34px;
    min-width: 0;
    padding-right: 68px;
    font-size: 14px;
  }

  body.site-refined #center-search-slot #hero-search .search-box {
    position: relative;
  }

  body.site-refined #center-search-slot #hero-search .search-shortcut {
    position: absolute;
    top: 50%;
    right: 10px;
    margin: 0;
    transform: translateY(-50%);
  }

  body.site-refined #center-search-slot #hero-search .search-box-icon {
    width: 28px;
    height: 34px;
  }

  body.site-refined #center-search-slot .search-suggest {
    display: none !important;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel .hero-tools-row {
    display: block;
    width: 100%;
    max-width: 448px;
    margin: 0;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel #mobile-music-dock {
    display: block;
    width: 100%;
    margin: 0;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel #mobile-music-dock .music-dock-wrap {
    --mw-cover: 56px;
    --mw-gap: 10px;
    --mw-btn: 28px;
    --mw-play: 34px;
    box-sizing: border-box;
    width: 100%;
    min-height: 112px;
    padding: 12px 11px;
    border-radius: 26px;
    background: var(--ref-soft);
    box-shadow: none;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel #mobile-music-dock .music-dock-wrap .music-dock {
    grid-template-columns: var(--mw-cover) minmax(0, 1fr) auto;
    grid-template-rows: auto 32px 8px;
    grid-template-areas:
      "cover copy tools"
      "cover controls controls"
      "bar bar bar";
    column-gap: var(--mw-gap);
    row-gap: 4px;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel #mobile-music-dock .music-dock-wrap .music-dock-title {
    font-size: 13px;
    line-height: 18px;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-player-panel #mobile-music-dock .music-dock-wrap :is(.music-dock-note, .music-dock-lyric:not([hidden])) {
    font-size: 11.5px;
    line-height: 16px;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 14px 0 0;
    padding: 0;
    overflow: visible;
    grid-column: 1 / -1;
    grid-row: 3;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.site-refined .home-bento:not(.is-secondary) .directory-search-slot {
    display: none;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .module-home {
    display: block;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .collection-heading {
    min-height: 38px;
    margin: 0 0 13px;
    padding: 0 2px;
    align-items: end;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .collection-heading h2 {
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -.035em;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .collection-heading > p {
    max-width: 220px;
    margin-bottom: 1px;
    font-size: 10.5px;
    text-align: right;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .section-kicker {
    margin-bottom: 4px;
    font-size: 8.5px;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(148px, auto);
    gap: 12px;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .module-grid .module-card {
    display: grid;
    min-height: 148px;
    height: auto;
    padding: 15px;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: 42px minmax(44px, auto) 14px;
    column-gap: 12px;
    row-gap: 8px;
    align-content: start;
    border-radius: 13px;
    box-shadow: none !important;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .module-grid .module-icon {
    width: 42px;
    height: 42px;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    border-radius: 11px;
    font-size: 13px;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .module-grid .module-name {
    display: -webkit-box;
    min-width: 0;
    margin: 0;
    padding-right: 14px;
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
    align-self: center;
    font-size: 14px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .module-grid .module-card-description {
    display: -webkit-box;
    min-height: 0;
    margin: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .module-grid .module-count {
    position: static !important;
    min-height: 0;
    margin: 0;
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: end;
    font-size: 10.5px;
    line-height: 1.2;
  }

  body.site-refined .home-bento:not(.is-secondary) .bento-directory-panel .module-grid .module-card::after {
    top: 16px;
    right: 15px;
    font-size: 11px;
  }

  /* 参考站主列从顶部栏下方约 93px 开始；右栏向上贴近顶部栏。 */
  body.site-refined .page-shell > main {
    padding: 116px 32px 44px;
  }

  html[data-sidebar="expanded"] {
    --rail-width: 256px;
  }

  /*
   * 展开态必须重新给站标列表真实高度。上一版只把外壳拉高，列表仍被锁在
   * 28px，所以 16 个来源中只露出了前 3~4 个。
   */
  body.site-refined .home-bento:not(.is-secondary) > .hero .hot-board-station-shell[data-expanded="true"] .hot-board-tabs {
    height: 100%;
    max-height: none;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* ---------------------------------------------------------------------------
   2026-10-27 mobilelike1：手机端按 Open-Source Android Apps 的结构收紧
   ---------------------------------------------------------------------------
   参考实测：固定 48px 单行顶栏、16px 页边距、28px 两行标题、358×44px
   中央搜索、两列分类入口。吸顶栏不随滚动折叠，眼睛按钮的收入设置。
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  html {
    scroll-padding-top: calc(48px + env(safe-area-inset-top, 0px));
  }

  body.site-refined main {
    width: min(calc(100% - 32px), var(--max-width));
  }

  body.site-refined .site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    display: grid;
    width: 100%;
    max-width: none;
    height: calc(48px + env(safe-area-inset-top, 0px));
    min-height: calc(48px + env(safe-area-inset-top, 0px));
    margin: 0;
    padding: env(safe-area-inset-top, 0px) 16px 0;
    grid-template-columns: minmax(0, 1fr) 36px auto;
    align-items: center;
    gap: 8px;
    overflow: visible;
    border: 0;
    background: color-mix(in srgb, var(--ref-surface) 66%, transparent);
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--ref-line) 72%, transparent),
      0 10px 32px rgb(20 34 62 / 10%);
    backdrop-filter: blur(24px) saturate(185%);
    -webkit-backdrop-filter: blur(24px) saturate(185%);
    transition: none;
  }

  body.site-refined .site-header::before {
    display: block;
    opacity: .82;
  }

  body.site-refined .site-header::after {
    right: 12px;
    bottom: 0;
    left: 12px;
    width: auto;
    transform: none;
    background: rgb(255 255 255 / 44%);
  }

  html[data-theme="dark"] body.site-refined .site-header {
    background: color-mix(in srgb, var(--ref-soft) 70%, transparent);
    box-shadow:
      0 1px 0 rgb(255 255 255 / 8%),
      0 12px 34px rgb(0 0 0 / 28%);
  }

  html[data-theme="dark"] body.site-refined .site-header::after {
    background: rgb(255 255 255 / 9%);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.site-refined .site-header {
      background: color-mix(in srgb, var(--ref-surface) 94%, transparent);
    }
  }

  body.site-refined :is(.header-brand-slot, .header-search-slot) {
    display: contents;
  }

  body.site-refined .site-header .brand {
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 44px;
    gap: 7px;
    align-items: center;
  }

  body.site-refined .site-header .brand-burger {
    display: flex;
    width: 18px;
    flex: 0 0 18px;
  }

  body.site-refined .site-header .brand-mark {
    display: block;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    overflow: hidden;
    border: 1px solid var(--ref-line);
    border-radius: 10px;
    background: var(--ref-soft);
    box-shadow: none;
  }

  body.site-refined .site-header .brand-mark img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

  body.site-refined .site-header .brand-copy {
    min-width: 0;
  }

  html[data-language] body.site-refined .site-header .brand-copy strong {
    display: block;
    overflow: hidden;
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.site-refined .site-header .brand-copy small {
    display: none;
  }

  body.site-refined .header-search-shortcut {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--ref-line);
    border-radius: 12px;
    background: var(--ref-surface);
    color: var(--ref-muted);
    pointer-events: auto;
  }

  body.site-refined .header-search-shortcut :is(span, kbd) {
    display: none;
  }

  body.site-refined .header-search-shortcut svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.site-refined .site-header .header-actions,
  body.site-refined .site-header .header-tools {
    min-height: 44px;
    align-items: center;
  }

  body.site-refined .site-header .header-tools {
    gap: 4px;
  }

  body.site-refined .site-header .header-actions .icon-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid var(--ref-line);
    border-radius: 13px;
    background: var(--ref-surface);
    box-shadow: none;
  }

  body.site-refined .site-header .header-actions .icon-button svg {
    width: 17px;
    height: 17px;
  }

  /* 参考站的手机首屏：标题直接贴在 48px 顶栏下面，正文统一 16px 边距。 */
  body.site-refined .home-bento > .hero {
    padding: 28px 0 0;
  }

  body.site-refined .home-bento > .hero .hero-text {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  body.site-refined .home-bento > .hero .eyebrow {
    display: none;
  }

  body.site-refined .home-bento > .hero #hero-display {
    width: 100%;
    max-width: none;
    margin: 0;
    color: var(--ref-ink);
    font-family: var(--hero-title-font, var(--font-display));
    font-size: 28px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-align: left;
  }

  body.site-refined .home-bento > .hero #hero-display-lead,
  body.site-refined .home-bento > .hero #hero-display-main {
    display: block;
    margin: 0;
    color: var(--ref-ink);
    background-color: transparent !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor;
    font-size: 1em;
    font-weight: 600;
    line-height: inherit;
    letter-spacing: inherit;
  }

  body.site-refined .home-bento > .hero #hero-subtitle {
    max-width: 358px;
    margin: 12px 0 0;
    color: var(--ref-muted);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    text-align: left;
    text-indent: 0;
  }

  body.site-refined .bento-player-panel {
    display: flex;
    width: 100%;
    margin: 28px 0 0;
    padding: 0;
    flex-direction: column;
    gap: 10px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.site-refined .bento-player-panel .bento-panel-heading {
    display: none;
  }

  body.site-refined .center-search-slot {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  body.site-refined #center-search-slot #hero-search {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  body.site-refined #center-search-slot #hero-search .search-box {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    gap: 10px;
    border: 1px solid var(--ref-line);
    border-radius: 18px;
    background: var(--ref-surface);
    box-shadow: none;
  }

  body.site-refined #center-search-slot #hero-search .search-avatar {
    display: none;
  }

  body.site-refined #center-search-slot #hero-search .search-box-icon {
    display: grid;
    width: 20px;
    height: 32px;
    flex: 0 0 20px;
    place-items: center;
    padding: 0;
    color: var(--ref-muted);
  }

  body.site-refined #center-search-slot #hero-search .search-box-icon svg {
    width: 18px;
    height: 18px;
  }

  body.site-refined #center-search-slot #hero-search #search-input {
    min-width: 0;
    height: 34px;
    padding: 0;
    color: var(--ref-ink);
    font-size: 14px;
    text-align: left;
  }

  body.site-refined #center-search-slot #hero-search .search-shortcut {
    display: none;
  }

  body.site-refined .bento-player-panel #mobile-music-dock {
    width: 100%;
    margin: 0;
  }

  body.site-refined .bento-player-panel #mobile-music-dock .music-dock-wrap {
    min-height: 112px;
    padding: 12px 11px;
    border-radius: 26px;
  }

  body.site-refined .bento-player-panel .hero-visual {
    width: 100%;
    margin: 10px 0 0;
  }

  body.site-refined .bento-player-panel .hero-visual :is(.hot-board, .hero-lyrics) {
    height: 252px;
    min-height: 238px;
    border-radius: 24px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board {
    padding: 11px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-head {
    min-height: 22px;
    margin-bottom: 6px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-title {
    font-size: 13px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-mobile-card {
    padding: 7px;
  }

  body.site-refined .bento-player-panel .hero-visual .hot-board-mobile-card .hot-board-item {
    font-size: 11px;
  }

  /* 分类入口改成参考站那种紧凑两列信息块，不再使用大卡片。 */
  body.site-refined .bento-directory-panel {
    margin-top: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.site-refined .bento-directory-panel .collection-heading {
    min-height: 0;
    margin: 0 0 10px;
    padding: 0;
    align-items: end;
  }

  body.site-refined .bento-directory-panel .collection-heading h2 {
    font-size: 18px;
    line-height: 1.2;
  }

  body.site-refined .bento-directory-panel .collection-heading > p {
    display: none;
  }

  body.site-refined .bento-directory-panel .section-kicker {
    margin-bottom: 3px;
    font-size: 8px;
  }

  body.site-refined .bento-directory-panel .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 56px;
    gap: 6px;
  }

  html[data-mobile-module-layout="single"] body.site-refined .bento-directory-panel .module-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.site-refined .bento-directory-panel .module-grid .module-card {
    display: grid;
    min-height: 56px;
    height: 56px;
    padding: 7px 9px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    column-gap: 8px;
    row-gap: 0;
    align-items: center;
    border-radius: 18px;
  }

  body.site-refined .bento-directory-panel .module-grid .module-icon {
    width: 24px;
    height: 24px;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    border-radius: 10px;
    font-size: 8px;
  }

  body.site-refined .bento-directory-panel .module-grid .module-name {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
    align-self: center;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.site-refined .bento-directory-panel .module-grid .module-card-description {
    display: none;
  }

  body.site-refined .bento-directory-panel .module-grid .module-count {
    position: static !important;
    display: block;
    min-width: 0;
    margin: 0;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
  }

  body.site-refined .bento-directory-panel .module-grid .module-card::after {
    display: none;
  }

}