/* =============================================
   YHuo 全站样式（多页面改造：由原 index.html <style id="theme-vars"> 提取）
   所有页面共用；改样式改这一处全站生效。
   ============================================= */
    /* ===== Pinguo Apple Design Tokens ===== */
    :root {
      --apple-background: var(--background, #ffffff);
      --apple-foreground: var(--foreground, #0f172a);
      --apple-card: var(--card, var(--background));
      --apple-card-foreground: var(--card-foreground, var(--foreground));
      --apple-popover: var(--popover, var(--card));
      --apple-popover-foreground: var(--popover-foreground, var(--card-foreground, var(--foreground)));
      --apple-primary: var(--primary, #007AFF);
      --apple-primary-foreground: var(--primary-foreground, #ffffff);
      --apple-secondary: var(--secondary, var(--muted, var(--card)));
      --apple-secondary-foreground: var(--secondary-foreground, var(--foreground));
      --apple-muted: var(--muted, var(--card));
      --apple-muted-foreground: var(--muted-foreground, var(--foreground));
      --apple-accent: var(--accent, var(--secondary, var(--muted, var(--card))));
      --apple-accent-foreground: var(--accent-foreground, var(--foreground));
      --apple-destructive: var(--destructive, #ef4444);
      --apple-destructive-foreground: var(--destructive-foreground, #ffffff);
      --apple-border: var(--border, currentColor);
      --apple-input: var(--input, var(--border));
      --apple-ring: var(--ring, var(--primary));

      /* Primitive palette（默认强调色 = 陶土色，取自参考博客站 yyyyolo7a79 的品牌色 #b0532b） */
      --brand-50: #fdf3ee;
      --brand-100: #f9e0d4;
      --brand-200: #f0c0aa;
      --brand-300: #e09a76;
      --brand-400: #c96a42;
      --brand-500: #b0532b;
      --brand-600: #93421f;
      --brand-700: #743318;
      --brand-800: #562512;
      --brand-900: #3a180b;

      /* 画布/hero 光斑双色（2026-10-07 从硬编码 rgba 抽出，随主题色联动）：
         --glow-a 深色层 = 浅色画布顶部光晕 + 时钟后光斑；--glow-b 浅色层 = 深色画布 + 视频盒旁光斑。
         各主题色在下方 data-accent 块里各自覆盖；默认值 = 陶土原值，默认主题观感零变化。 */
      --glow-a: #cc7442;
      --glow-b: #e7a37c;

      --background-50: #ffffff;
      --background-100: #f7f7fa;
      --background-200: #f2f2f7;
      --background-300: #e5e5ea;
      --background-400: #d1d1d6;
      --background-500: #aeaeb2;
      --background-600: #8e8e93;
      --background-700: #3a3a3c;
      --background-800: #1c1c1e;
      --background-900: #000000;

      --text-50: #f5f5f7;
      --text-100: #e3e3e8;
      --text-200: #c7c7cc;
      --text-300: #aeaeb2;
      --text-400: #8e8e93;
      --text-500: #6e6e73;
      --text-600: #48484a;
      --text-700: #3c3c43;
      --text-800: #1d1d1f;
      --text-900: #000000;

      /* Semantic roles - light（默认白色主题对齐参考博客站的暖白纸感配色：
         底 #f8f7f4 / 面 #fff / 文字 #1b1c1e / 次级面 #f0ede6 / 边框 #e6e3da；只覆盖浅色，暗色在 .dark 全量重定义不受影响） */
      --background: #f8f7f4;
      --foreground: #1b1c1e;
      --card: #ffffff;
      --card-foreground: #1b1c1e;
      --popover: #ffffff;
      --popover-foreground: #1b1c1e;

      --primary: var(--brand-500);
      --primary-foreground: #ffffff;
      --secondary: #f0ede6;
      --secondary-foreground: #1b1c1e;
      --muted: #f0ede6;
      --muted-foreground: #5f6166;
      --accent: #efece4;
      --accent-foreground: #1b1c1e;
      --destructive: #ff3b30;
      --destructive-foreground: #ffffff;
      --success: #34c759;
      --success-foreground: #ffffff;
      --border: #e6e3da;
      --input: #d3cfc3;
      --ring: var(--brand-500);

      /* Typography */
      --font-sans: 'DM Sans', ui-sans-serif, sans-serif, system-ui;
      --font-mono: 'JetBrains Mono', monospace;

      /* Radius */
      --radius: 1.2rem;

      /* Shadows */
      --shadow-2xs: 0 1px 2px -1px rgba(0, 0, 0, 0.04);
      --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.05);
      --shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
      --shadow-lg: 0 8px 24px -8px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.05);
      --shadow-xl: 0 16px 40px -10px rgba(0, 0, 0, 0.10), 0 8px 16px -8px rgba(0, 0, 0, 0.06);
      --shadow-2xl: 0 24px 64px -12px rgba(0, 0, 0, 0.12);

      /* Spacing */
      --spacing: 0.24rem;

      /* Motion */
      --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
      --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 近似 spring 的回弹，照片回正用 */
    }

    /* 主题色（外观卡片可切换，覆盖 brand-400/500 即可全局生效） */
    html[data-accent='purple'] { --brand-400: #a78bfa; --brand-500: #8b5cf6; }
    html[data-accent='pink'] { --brand-400: #f472b6; --brand-500: #ec4899; }
    html[data-accent='green'] { --brand-400: #34d399; --brand-500: #10b981; }
    html[data-accent='orange'] { --brand-400: #fbbf24; --brand-500: #f59e0b; }

    /* —— 完整主题（2026-10-07）：强调色之外连纸底/次级面/边框一起染，切换=换一套纸。
       浅色块覆盖 light 语义变量；.dark 组合选择器（特异性高于 .dark 单类）覆盖深色色温。
       深浅各给一套 --glow-a/b，画布光晕与 hero 光斑随之换色。默认陶土不在此列（原值即默认）。 —— */

    /* 青花（墨水蓝）：青花瓷、钢笔水、书信——纸底微冷 */
    html[data-accent='qinghua'] {
      --brand-400: #4a7db3;
      --brand-500: #2f5f96;
      --background: #f6f7f9;
      --secondary: #edf0f4;
      --muted: #edf0f4;
      --accent: #f0f3f6;
      --border: #e2e6ec;
      --input: #ccd4de;
      --glow-a: #4a7db3;
      --glow-b: #9dbbdd;
    }
    html[data-accent='qinghua'].dark {
      --background: #0c1016;
      --card: #141a22;
      --popover: #182029;
      --secondary: #161d26;
      --muted: #161d26;
      --accent: #1b242e;
      --border: #263140;
      --input: #263140;
      --brand-400: #5b8cc0; /* 深色下提亮一档，黑底上才立得住 */
    }

    /* 青瓷（灰绿）：宋瓷、雨过天青——纸底带青，最安静的一款 */
    html[data-accent='celadon'] {
      --brand-400: #7fa78f;
      --brand-500: #5d8a72;
      --background: #f4f6f2;
      --secondary: #e9eee7;
      --muted: #e9eee7;
      --accent: #edf1ec;
      --border: #dfe5dc;
      --input: #c7d1c6;
      --glow-a: #74a186;
      --glow-b: #a9c7b1;
    }
    html[data-accent='celadon'].dark {
      --background: #0c110e;
      --card: #141a16;
      --popover: #19201b;
      --secondary: #161d18;
      --muted: #161d18;
      --accent: #1b231d;
      --border: #26302a;
      --input: #26302a;
    }

    /* 水墨（墨黑）：铅字、版画——浅色纸上落墨，深色纸上反白（黑底白墨） */
    html[data-accent='ink'] {
      --brand-400: #44403c;
      --brand-500: #292524;
      --background: #f7f6f3;
      --secondary: #edebe7;
      --muted: #edebe7;
      --accent: #f0eeea;
      --border: #e3e0d9;
      --input: #cfcbc3;
      --glow-a: #78716c;
      --glow-b: #b8b2aa;
    }
    html[data-accent='ink'].dark {
      --background: #0e0d0c;
      --card: #171614;
      --popover: #1d1c1a;
      --secondary: #1a1917;
      --muted: #1a1917;
      --accent: #201e1c;
      --border: #2b2926;
      --input: #2b2926;
      --brand-400: #d6d3cf; /* 深色=白墨：brand-400 是深色的 --primary，反白才可读 */
    }

    /* 焙茶（焙棕）：牛皮纸、旧书页——纸底偏奶油，陶土的近亲但更沉 */
    html[data-accent='coffee'] {
      --brand-400: #a3815a;
      --brand-500: #7c5e3d;
      --background: #f9f5ee;
      --secondary: #f1eadf;
      --muted: #f1eadf;
      --accent: #f4eee3;
      --border: #e9e0d0;
      --input: #d6c9b4;
      --glow-a: #9a7748;
      --glow-b: #cdb28a;
    }
    html[data-accent='coffee'].dark {
      --background: #100e0b;
      --card: #191612;
      --popover: #201c17;
      --secondary: #1d1915;
      --muted: #1d1915;
      --accent: #242019;
      --border: #322c23;
      --input: #322c23;
      --brand-400: #b18d5f;
    }

    /* 达妮娅 · 粉焰剧场（2026-10-11，鸣潮 Denia）：角色专属主题。
       粉发（玫瑰粉）× 热熔（焰金）× 终幕剧场（暗夜李紫深色）——
       浅色=暖白透粉纸底玫瑰红主色，深色=剧场幕布紫黑提亮粉；
       光斑=玫瑰粉×焰金（呼应技能「织梦盛宴 / 泡泡与饵 / 终幕」意象）。 */
    html[data-accent='denia'] {
      --brand-400: #e07a92;
      --brand-500: #c25571;
      --background: #faf4f2;
      --card: #fffcfd;
      --popover: #fffbfd;
      --secondary: #f3e9e8;
      --muted: #f3e9e8;
      --accent: #f6edeb;
      --border: #ecd9da;
      --input: #dcc3c5;
      --glow-a: #e88ba3;
      --glow-b: #f2a878;
    }
    html[data-accent='denia'].dark {
      --background: #17111a;
      --card: #221a24;
      --popover: #281f2a;
      --secondary: #241b26;
      --muted: #241b26;
      --accent: #2b202c;
      --border: #3a2d3c;
      --input: #3a2d3c;
      --brand-400: #ec93a8;
    }

    /* 达妮娅专属细节（仅 denia 挂载）：选中色 / 正文链接渐变下划线 / 泡泡光斑。
       泡泡层照 crt body::after 先例（fixed 满屏装饰、pointer-events:none、零 JS），
       纯静态径向渐变无动画，reduced-motion 天然合规；
       z-index:-1 与画布层同档，内容之下、体背景之上。 */
    html[data-accent='denia'] ::selection {
      background: #e88ba3;
      color: #fff;
    }
    html[data-accent='denia'].dark ::selection {
      background: #ec93a8;
      color: #17111a;
    }
    html[data-accent='denia'] .page-main p a:not(.btn):hover {
      text-decoration: none;
      background-image: linear-gradient(90deg, #c25571, #f2a878);
      background-repeat: no-repeat;
      background-size: 100% 2px;
      background-position: 0 100%;
    }
    /* —— 达妮娅加量细节（2026-10-11 晚，站长反馈「主题还不够足」）——
       流星→泡泡：泡泡与饵是她的技能签名，denia 下流星层整体退场、
       一群泡泡从页底缓缓升起（common.js 仅 denia+非 reduced-motion 时注入 .denia-bubbles，
       负 animation-delay 预填充，进页即有泡泡在场）；顶栏胶囊/滚动条染粉；
       深色档泡泡层顶部加一道舞台聚光。 */
    html[data-accent='denia'] .fx-meteors { display: none; }
    html[data-accent='denia'] .header-pill {
      background: color-mix(in srgb, var(--brand-400) 10%, var(--card));
      border-color: color-mix(in srgb, var(--brand-400) 32%, var(--border));
    }
    /* 导航激活胶囊从墨黑换玫瑰——顶栏一眼可辨的主题元素 */
    html[data-accent='denia'] .nav-link.active {
      background: var(--brand-500);
      color: #fff;
    }
    /* 首页时钟的毫秒与冒号染玫瑰（大标题区最显眼的点缀） */
    html[data-accent='denia'] .clock-ms,
    html[data-accent='denia'] .clock-colon {
      color: color-mix(in srgb, var(--brand-500) 72%, var(--foreground));
    }
    html[data-accent='denia'] ::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--brand-400) 45%, transparent);
    }
    html[data-accent='denia'] ::-webkit-scrollbar-thumb:hover {
      background: color-mix(in srgb, var(--brand-400) 70%, transparent);
    }
    /* 右缘大幅立绘水印（common.js 随主题注入，官方全身透明立绘） */
    .denia-sprite-wall {
      position: fixed;
      right: 1.5vw;
      bottom: 4vh;
      z-index: -1;
      width: min(23vw, 360px);
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      opacity: .18;
      filter: drop-shadow(0 10px 30px rgba(194, 85, 113, .12));
    }
    html[data-accent='denia'].dark .denia-sprite-wall { opacity: .26; }
    /* 前景缓升大泡泡：飘在内容之上（z 30，低于顶栏 50/挂件 40），大而淡不遮字 */
    .denia-bubbles-fg {
      position: fixed;
      inset: 0;
      z-index: 30;
      pointer-events: none;
      overflow: hidden;
    }
    .denia-bubbles-fg i {
      position: absolute;
      bottom: -160px;
      left: var(--x);
      width: var(--s);
      height: var(--s);
      border-radius: 50%;
      border: 1px solid rgba(232, 139, 163, .30);
      background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .30), rgba(232, 139, 163, .03) 60%);
      filter: blur(1px);
      opacity: 0;
      animation: denia-rise-fg var(--d) linear infinite;
      animation-delay: var(--dl);
    }
    @keyframes denia-rise-fg {
      0% { transform: translate(0, 0); opacity: 0; }
      12% { opacity: var(--o, .16); }
      85% { opacity: var(--o, .16); }
      100% { transform: translate(var(--sway), -112vh); opacity: 0; }
    }
    .denia-bubbles {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }
    html[data-accent='denia'].dark .denia-bubbles {
      background: radial-gradient(ellipse 90% 46% at 50% -8%, rgba(236, 147, 168, .12), transparent 72%);
    }
    /* 暗色模式不显示泡泡（2026-10-14 站长要求）：CSS 门控切暗色即时收场、切回亮色自动恢复，
       不动 JS 挂载（View Transitions 切换瞬间也生效）；聚光背景一并隐掉 */
    html[data-accent='denia'].dark .denia-bubbles,
    html[data-accent='denia'].dark .denia-bubbles-fg {
      display: none;
    }
    .denia-bubbles i {
      position: absolute;
      bottom: -48px;
      left: var(--x);
      width: var(--s);
      height: var(--s);
      border-radius: 50%;
      border: 1px solid rgba(232, 139, 163, .38);
      background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .55), rgba(232, 139, 163, .05) 62%);
      opacity: 0;
      animation: denia-rise var(--d) linear infinite;
      animation-delay: var(--dl);
    }
    @keyframes denia-rise {
      0% { transform: translate(0, 0); opacity: 0; }
      10% { opacity: .85; }
      88% { opacity: .45; }
      100% { transform: translate(var(--sway), -108vh); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      html[data-accent='denia'] body::after { animation: none; }
      .denia-bubbles, .denia-bubbles-fg { display: none; }
      .denia-bubbles i, .denia-bubbles-fg i { animation: none; }
    }

    /* 爱弥斯 · 星海轻歌（2026-10-14，鸣潮 Aemeath）：角色专属主题，与达妮娅同款全链路。
       电子幽灵×星海轻歌×长航的星辉——
       浅色=冷白透丁香纸底电光粉主色（粉发+驾驶服电子扰动），深色=星海夜空紫黑提亮星辉粉；
       光斑=电光粉×星辉金（呼应机兵化作星辉穿梭夜空意象）。
       与达妮娅（暖色焰金系）区分：爱弥斯走冷色电光系。 */
    html[data-accent='aemeath'] {
      --brand-400: #c77dbb;
      --brand-500: #a4529b;
      --background: #f9f4f9;
      --card: #fefbfe;
      --popover: #fefcfe;
      --secondary: #f2eaf4;
      --muted: #f2eaf4;
      --accent: #f5edf6;
      --border: #e8d8ea;
      --input: #d9c2dc;
      --glow-a: #d186c4;
      --glow-b: #8d7bd6;
    }
    html[data-accent='aemeath'].dark {
      --background: #14101d;
      --card: #1e1829;
      --popover: #241c30;
      --secondary: #201930;
      --muted: #201930;
      --accent: #271e35;
      --border: #372c48;
      --input: #372c48;
      --brand-400: #d795cb;
    }

    /* 爱弥斯专属细节（仅 aemeath 挂载）：选中色 / 正文链接渐变下划线。
       达妮娅=玫瑰粉→焰金（暖），爱弥斯=电光粉→星辉蓝紫（冷）。 */
    html[data-accent='aemeath'] ::selection {
      background: #d186c4;
      color: #fff;
    }
    html[data-accent='aemeath'].dark ::selection {
      background: #d795cb;
      color: #14101d;
    }
    html[data-accent='aemeath'] .page-main p a:not(.btn):hover {
      text-decoration: none;
      background-image: linear-gradient(90deg, #a4529b, #8d7bd6);
      background-repeat: no-repeat;
      background-size: 100% 2px;
      background-position: 0 100%;
    }
    /* 星屑升腾群（泡泡同款机制）：电子幽灵的星辉签名，aemeath 下流星退场、
       一群星屑从页底缓缓升起（common.js 对 aemeath+非 reduced-motion 注入 .aemeath-motes，
       负 animation-delay 预填充，进页即有星屑在场）；顶栏胶囊/滚动条染电光粉；
       深色档星屑层顶部加一道星海聚光；暗色不显示（2026-10-14 站长口径，与达妮娅同款） */
    html[data-accent='aemeath'] .fx-meteors { display: none; }
    html[data-accent='aemeath'] .header-pill {
      background: color-mix(in srgb, var(--brand-400) 10%, var(--card));
      border-color: color-mix(in srgb, var(--brand-400) 32%, var(--border));
    }
    /* 导航激活胶囊从墨黑换电光粉——顶栏一眼可辨的主题元素 */
    html[data-accent='aemeath'] .nav-link.active {
      background: var(--brand-500);
      color: #fff;
    }
    /* 首页时钟的毫秒与冒号染电光粉（大标题区最显眼的点缀） */
    html[data-accent='aemeath'] .clock-ms,
    html[data-accent='aemeath'] .clock-colon {
      color: color-mix(in srgb, var(--brand-500) 72%, var(--foreground));
    }
    html[data-accent='aemeath'] ::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--brand-400) 45%, transparent);
    }
    html[data-accent='aemeath'] ::-webkit-scrollbar-thumb:hover {
      background: color-mix(in srgb, var(--brand-400) 70%, transparent);
    }
    /* 右缘大幅立绘水印（common.js 随主题注入，官方全身透明立绘） */
    .aemeath-sprite-wall {
      position: fixed;
      right: 1.5vw;
      bottom: 4vh;
      z-index: -1;
      width: min(23vw, 360px);
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      opacity: .18;
      filter: drop-shadow(0 10px 30px rgba(164, 82, 155, .12));
    }
    html[data-accent='aemeath'].dark .aemeath-sprite-wall { opacity: .26; }
    /* 前景缓升大星屑：飘在内容之上（z 30，低于顶栏 50/挂件 40），大而淡不遮字 */
    .aemeath-motes-fg {
      position: fixed;
      inset: 0;
      z-index: 30;
      pointer-events: none;
      overflow: hidden;
    }
    .aemeath-motes-fg i {
      position: absolute;
      bottom: -160px;
      left: var(--x);
      width: var(--s);
      height: var(--s);
      border-radius: 50%;
      border: 1px solid rgba(209, 134, 196, .30);
      background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .30), rgba(141, 123, 214, .04) 60%);
      filter: blur(1px);
      opacity: 0;
      animation: aemeath-rise-fg var(--d) linear infinite;
      animation-delay: var(--dl);
    }
    @keyframes aemeath-rise-fg {
      0% { transform: translate(0, 0); opacity: 0; }
      12% { opacity: var(--o, .16); }
      85% { opacity: var(--o, .16); }
      100% { transform: translate(var(--sway), -112vh); opacity: 0; }
    }
    .aemeath-motes {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }
    html[data-accent='aemeath'].dark .aemeath-motes {
      background: radial-gradient(ellipse 90% 46% at 50% -8%, rgba(215, 149, 203, .12), transparent 72%);
    }
    /* 暗色模式不显示星屑（2026-10-14 站长要求，与达妮娅暗色泡泡同口径）：CSS 门控切暗色即时
       收场、切回亮色自动恢复，不动 JS 挂载；聚光背景一并隐掉 */
    html[data-accent='aemeath'].dark .aemeath-motes,
    html[data-accent='aemeath'].dark .aemeath-motes-fg {
      display: none;
    }
    .aemeath-motes i {
      position: absolute;
      bottom: -48px;
      left: var(--x);
      width: var(--s);
      height: var(--s);
      border-radius: 50%;
      border: 1px solid rgba(209, 134, 196, .38);
      background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .55), rgba(141, 123, 214, .06) 62%);
      opacity: 0;
      animation: aemeath-rise var(--d) linear infinite;
      animation-delay: var(--dl);
    }
    @keyframes aemeath-rise {
      0% { transform: translate(0, 0); opacity: 0; }
      10% { opacity: .85; }
      88% { opacity: .45; }
      100% { transform: translate(var(--sway), -108vh); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      html[data-accent='aemeath'] body::after { animation: none; }
      .aemeath-motes, .aemeath-motes-fg { display: none; }
      .aemeath-motes i, .aemeath-motes-fg i { animation: none; }
    }

    /* ============================================================
       复古主题（2026-10-08 站长提出，「很多年前的网站」）：四款全做，
       完整复古皮肤=不只换色，还连「形」一起换。实现拆两层：
       ① 颜色层：照上面四款完整主题的套路写 data-accent 变量块（浅+深+glow），
          画布/hero 光斑/开场封面自动跟随；
       ② 结构层：按 html[data-accent='…'] 追加结构性覆盖段（站点首例），
          四款共享的「形」用四连选择器下发（直角/宋体/经典链接色/实色标题条），
          色温差异再按单款微调（win98 浮雕、crt 扫描线、portal 页头条、oldbook 纸感）。
       零 JS 改动：applyAccent 对任何 accent 名都直接设 data-accent 属性，
       CSS 认名即生效；后台默认主题色需 admin.js ACCENTS 与服务端白名单同步登记。
       ⚠️ 本文件 border-radius 约 183 处硬编码（--radius 仅 19 处消费），直角化
       按高频组件族逐个覆盖；头像/圆形元素刻意保留圆形。admin 后台不走本文件。
       ============================================================ */

    /* ---- ① 颜色层：Win98 经典（银灰桌面 + 海军蓝标题条 + 浮雕银灰按钮） ---- */
    html[data-accent='win98'] {
      --brand-400: #3a6ea5;
      --brand-500: #000080;
      --background: #c0c0c0;
      --foreground: #000000;
      --card: #ffffff;
      --popover: #ffffff;
      --secondary: #d4d0c8;
      --muted: #d4d0c8;
      --accent: #d4d0c8;
      --border: #808080;
      --input: #ffffff;
      --glow-a: #000080;
      --glow-b: #3a6ea5;
    }
    html[data-accent='win98'].dark {
      --background: #3a3a3a;
      --card: #2b2b2b;
      --popover: #303030;
      --secondary: #404040;
      --muted: #404040;
      --accent: #454545;
      --border: #5a5a5a;
      --input: #2b2b2b;
      --brand-400: #7ba7d0;
    }

    /* ---- ① 颜色层：早期门户（淡蓝底 + 白卡 + 深蓝页头条，宋体大字报时代） ---- */
    html[data-accent='portal'] {
      --brand-400: #4a6f9e;
      --brand-500: #1f3a60;
      --background: #e8f0f8;
      --foreground: #1a1a1a;
      --card: #ffffff;
      --popover: #ffffff;
      --secondary: #dbe7f3;
      --muted: #dbe7f3;
      --accent: #e2ecf6;
      --border: #b8c8d8;
      --input: #ffffff;
      --glow-a: #1f3a60;
      --glow-b: #4a6f9e;
    }
    html[data-accent='portal'].dark {
      --background: #0e1520;
      --card: #16202e;
      --popover: #1a2534;
      --secondary: #1d2838;
      --muted: #1d2838;
      --accent: #223044;
      --border: #2d3d52;
      --input: #16202e;
      --brand-400: #6f95c2;
    }

    /* ---- ① 颜色层：CRT 终端（磷光绿；浅档=白纸绿墨，深档=黑底荧光 + 扫描线） ---- */
    html[data-accent='crt'] {
      --brand-400: #0a8f3c;
      --brand-500: #0a6b2e;
      --background: #eef2ea;
      --foreground: #10240f;
      --card: #f7faf5;
      --popover: #f7faf5;
      --secondary: #e2e9dc;
      --muted: #e2e9dc;
      --accent: #e6eede;
      --border: #b9c9b0;
      --input: #f7faf5;
      --glow-a: #33ff66;
      --glow-b: #0a8f3c;
    }
    html[data-accent='crt'].dark {
      --background: #050805;
      --card: #0a120a;
      --popover: #0d160d;
      --secondary: #101a10;
      --muted: #101a10;
      --accent: #122012;
      --border: #1e351e;
      --input: #0a120a;
      --brand-400: #33ff66;
      --brand-500: #33ff66;
      --glow-a: #33ff66;
      --glow-b: #33ff66;
    }

    /* ---- ① 颜色层：老书纸（米黄 + 墨绿/砖红，衬线书卷气） ---- */
    html[data-accent='oldbook'] {
      --brand-400: #8a5a3c;
      --brand-500: #6b3f2a;
      --background: #f4ecd8;
      --foreground: #2b241a;
      --card: #faf5e9;
      --popover: #faf5e9;
      --secondary: #ece2cb;
      --muted: #ece2cb;
      --accent: #efe6d0;
      --border: #d9cba9;
      --input: #faf5e9;
      --glow-a: #6b3f2a;
      --glow-b: #8a6a4a;
    }
    html[data-accent='oldbook'].dark {
      --background: #14100a;
      --card: #1c1710;
      --popover: #221c13;
      --secondary: #241e14;
      --muted: #241e14;
      --accent: #2a2317;
      --border: #3a2f1e;
      --input: #1c1710;
      --brand-400: #c08a5e;
    }

    /* ---- ② 结构层：四款共享的「形」（四连选择器；变量覆写 + 组件直角化） ---- */
    /* 变量覆写：--radius 清零（16 处消费位直角化）、抹掉现代柔和投影、字体总闸。
       字体按款给：win98/portal/oldbook 宋体/衬线，crt 全等宽（终端本无衬线） */
    html[data-accent='win98'],
    html[data-accent='portal'],
    html[data-accent='crt'],
    html[data-accent='oldbook'] {
      --radius: 0;                                 /* --radius 消费面（16 处）直角化 */
      --shadow-2xs: none; --shadow-xs: none;       /* 抹掉现代柔和投影，浮雕语言另行下发 */
      --shadow-sm: none; --shadow: none;
      --shadow-md: none; --shadow-lg: none; --shadow-2xl: none;
    }
    html[data-accent='win98'],
    html[data-accent='portal'] {
      --font-sans: 'SimSun', 'NSimSun', 'Songti SC', 'STSong', serif;   /* 宋体正文总闸（body/控件全部继承） */
      --font-mono: 'Courier New', 'Courier', monospace;                 /* 老等宽（时钟/代码/计数器） */
    }
    html[data-accent='crt'] {
      --font-sans: 'Courier New', 'Courier', monospace;   /* 终端一切等宽 */
      --font-mono: 'Courier New', 'Courier', monospace;
    }
    html[data-accent='oldbook'] {
      --font-sans: 'Songti SC', 'STSong', 'SimSun', 'Georgia', serif;   /* 书卷衬线，比 Win98 宋体软一档 */
      --font-mono: 'Courier New', 'Courier', monospace;
    }

    /* 直角化：容器/卡/浮层/输入/按钮族（高频硬编码圆角的主体） */
    html[data-accent='win98'] .apple-card, html[data-accent='portal'] .apple-card,
    html[data-accent='crt'] .apple-card, html[data-accent='oldbook'] .apple-card,
    html[data-accent='win98'] .login-card, html[data-accent='portal'] .login-card,
    html[data-accent='crt'] .login-card, html[data-accent='oldbook'] .login-card,
    html[data-accent='win98'] .doc-card, html[data-accent='portal'] .doc-card,
    html[data-accent='crt'] .doc-card, html[data-accent='oldbook'] .doc-card,
    html[data-accent='win98'] .note-card, html[data-accent='portal'] .note-card,
    html[data-accent='crt'] .note-card, html[data-accent='oldbook'] .note-card,
    html[data-accent='win98'] .board-item, html[data-accent='portal'] .board-item,
    html[data-accent='crt'] .board-item, html[data-accent='oldbook'] .board-item,
    html[data-accent='win98'] .cl-entry, html[data-accent='portal'] .cl-entry,
    html[data-accent='crt'] .cl-entry, html[data-accent='oldbook'] .cl-entry,
    html[data-accent='win98'] .sched-day-card, html[data-accent='portal'] .sched-day-card,
    html[data-accent='crt'] .sched-day-card, html[data-accent='oldbook'] .sched-day-card,
    html[data-accent='win98'] .sched-editor-panel, html[data-accent='portal'] .sched-editor-panel,
    html[data-accent='crt'] .sched-editor-panel, html[data-accent='oldbook'] .sched-editor-panel,
    html[data-accent='win98'] .weather-picker-panel, html[data-accent='portal'] .weather-picker-panel,
    html[data-accent='crt'] .weather-picker-panel, html[data-accent='oldbook'] .weather-picker-panel,
    html[data-accent='win98'] .bg-picker-panel, html[data-accent='portal'] .bg-picker-panel,
    html[data-accent='crt'] .bg-picker-panel, html[data-accent='oldbook'] .bg-picker-panel,
    html[data-accent='win98'] .cmdk-panel, html[data-accent='portal'] .cmdk-panel,
    html[data-accent='crt'] .cmdk-panel, html[data-accent='oldbook'] .cmdk-panel,
    html[data-accent='win98'] .ai-model-menu, html[data-accent='portal'] .ai-model-menu,
    html[data-accent='crt'] .ai-model-menu, html[data-accent='oldbook'] .ai-model-menu,
    html[data-accent='win98'] .vis-panel, html[data-accent='portal'] .vis-panel,
    html[data-accent='crt'] .vis-panel, html[data-accent='oldbook'] .vis-panel,
    html[data-accent='win98'] .mini-playlist, html[data-accent='portal'] .mini-playlist,
    html[data-accent='crt'] .mini-playlist, html[data-accent='oldbook'] .mini-playlist,
    html[data-accent='win98'] .lightbox, html[data-accent='portal'] .lightbox,
    html[data-accent='crt'] .lightbox, html[data-accent='oldbook'] .lightbox,
    html[data-accent='win98'] .video-box, html[data-accent='portal'] .video-box,
    html[data-accent='crt'] .video-box, html[data-accent='oldbook'] .video-box,
    html[data-accent='win98'] .home-entry, html[data-accent='portal'] .home-entry,
    html[data-accent='crt'] .home-entry, html[data-accent='oldbook'] .home-entry,
    html[data-accent='win98'] .album-entry, html[data-accent='portal'] .album-entry,
    html[data-accent='crt'] .album-entry, html[data-accent='oldbook'] .album-entry,
    html[data-accent='win98'] .profile-view, html[data-accent='portal'] .profile-view,
    html[data-accent='crt'] .profile-view, html[data-accent='oldbook'] .profile-view,
    html[data-accent='win98'] #pjaxSkel .ps-card, html[data-accent='portal'] #pjaxSkel .ps-card,
    html[data-accent='crt'] #pjaxSkel .ps-card, html[data-accent='oldbook'] #pjaxSkel .ps-card,
    html[data-accent='win98'] #pjaxSkel .ps-ai, html[data-accent='portal'] #pjaxSkel .ps-ai,
    html[data-accent='crt'] #pjaxSkel .ps-ai, html[data-accent='oldbook'] #pjaxSkel .ps-ai,
    html[data-accent='win98'] .login-btn, html[data-accent='portal'] .login-btn,
    html[data-accent='crt'] .login-btn, html[data-accent='oldbook'] .login-btn,
    html[data-accent='win98'] .login-field input, html[data-accent='portal'] .login-field input,
    html[data-accent='crt'] .login-field input, html[data-accent='oldbook'] .login-field input,
    html[data-accent='win98'] .sched-inline-input, html[data-accent='portal'] .sched-inline-input,
    html[data-accent='crt'] .sched-inline-input, html[data-accent='oldbook'] .sched-inline-input,
    html[data-accent='win98'] .profilev-input, html[data-accent='portal'] .profilev-input,
    html[data-accent='crt'] .profilev-input, html[data-accent='oldbook'] .profilev-input,
    html[data-accent='win98'] .ai-input-bar, html[data-accent='portal'] .ai-input-bar,
    html[data-accent='crt'] .ai-input-bar, html[data-accent='oldbook'] .ai-input-bar,
    html[data-accent='win98'] .nav-link, html[data-accent='portal'] .nav-link,
    html[data-accent='crt'] .nav-link, html[data-accent='oldbook'] .nav-link,
    html[data-accent='win98'] .board-btn, html[data-accent='portal'] .board-btn,
    html[data-accent='crt'] .board-btn, html[data-accent='oldbook'] .board-btn,
    html[data-accent='win98'] .switch-ui, html[data-accent='portal'] .switch-ui,
    html[data-accent='crt'] .switch-ui, html[data-accent='oldbook'] .switch-ui,
    html[data-accent='win98'] .theme-toggle, html[data-accent='portal'] .theme-toggle,
    html[data-accent='crt'] .theme-toggle, html[data-accent='oldbook'] .theme-toggle,
    html[data-accent='win98'] .login-toggle, html[data-accent='portal'] .login-toggle,
    html[data-accent='crt'] .login-toggle, html[data-accent='oldbook'] .login-toggle,
    html[data-accent='win98'] .search-toggle, html[data-accent='portal'] .search-toggle,
    html[data-accent='crt'] .search-toggle, html[data-accent='oldbook'] .search-toggle {
      border-radius: 0;
    }
    /* 头像/圆点类（board-avatar/profile-avatar 的 50%）刻意不覆盖：方头像是「坏掉的复古」 */
    /* 悬浮播放器作用域内自带一套 --radius 重定义，需同位清零（否则播放器独圆） */
    html[data-accent='win98'] .music-player, html[data-accent='win98'] .music-player__morph-shell,
    html[data-accent='portal'] .music-player, html[data-accent='portal'] .music-player__morph-shell,
    html[data-accent='crt'] .music-player, html[data-accent='crt'] .music-player__morph-shell,
    html[data-accent='oldbook'] .music-player, html[data-accent='oldbook'] .music-player__morph-shell {
      --radius: 0; --radius-sm: 0; --radius-lg: 0;
    }

    /* 4 处硬编码 code 字体（--font-mono 改动管不到）补齐老等宽 */
    html[data-accent='win98'] .cl-entry-body code, html[data-accent='win98'] .doc-article code,
    html[data-accent='win98'] .ai-msg.bot code, html[data-accent='win98'] .notes-year,
    html[data-accent='portal'] .cl-entry-body code, html[data-accent='portal'] .doc-article code,
    html[data-accent='portal'] .ai-msg.bot code, html[data-accent='portal'] .notes-year,
    html[data-accent='crt'] .cl-entry-body code, html[data-accent='crt'] .doc-article code,
    html[data-accent='crt'] .ai-msg.bot code, html[data-accent='crt'] .notes-year,
    html[data-accent='oldbook'] .cl-entry-body code, html[data-accent='oldbook'] .doc-article code,
    html[data-accent='oldbook'] .ai-msg.bot code, html[data-accent='oldbook'] .notes-year {
      font-family: 'Courier New', 'Courier', monospace;
    }

    /* 经典链接色：正文区未访问 #0000ee / 已访问 #551a8b（压掉 3 处 accent 定点规则；
       crt 不在此列——终端链接用荧光绿，见下方 crt 段） */
    html[data-accent='win98'] .doc-article a,
    html[data-accent='win98'] .note-body a,
    html[data-accent='win98'] .ai-msg.bot a,
    html[data-accent='portal'] .doc-article a,
    html[data-accent='portal'] .note-body a,
    html[data-accent='portal'] .ai-msg.bot a,
    html[data-accent='oldbook'] .doc-article a,
    html[data-accent='oldbook'] .note-body a,
    html[data-accent='oldbook'] .ai-msg.bot a {
      color: #0000ee;
      text-decoration: underline;
    }
    html[data-accent='win98'] .doc-article a:visited,
    html[data-accent='win98'] .note-body a:visited,
    html[data-accent='win98'] .ai-msg.bot a:visited,
    html[data-accent='portal'] .doc-article a:visited,
    html[data-accent='portal'] .note-body a:visited,
    html[data-accent='portal'] .ai-msg.bot a:visited,
    html[data-accent='oldbook'] .doc-article a:visited,
    html[data-accent='oldbook'] .note-body a:visited,
    html[data-accent='oldbook'] .ai-msg.bot a:visited {
      color: #551a8b;
    }
    /* 深色档：经典 #0000ee/#551a8b 在深底不可读，换亮色变体（2026-10-08 目验修正） */
    html[data-accent='win98'].dark .doc-article a,
    html[data-accent='win98'].dark .note-body a,
    html[data-accent='win98'].dark .ai-msg.bot a,
    html[data-accent='portal'].dark .doc-article a,
    html[data-accent='portal'].dark .note-body a,
    html[data-accent='portal'].dark .ai-msg.bot a,
    html[data-accent='oldbook'].dark .doc-article a,
    html[data-accent='oldbook'].dark .note-body a,
    html[data-accent='oldbook'].dark .ai-msg.bot a {
      color: #7aa5ff;
    }
    html[data-accent='win98'].dark .doc-article a:visited,
    html[data-accent='win98'].dark .note-body a:visited,
    html[data-accent='win98'].dark .ai-msg.bot a:visited,
    html[data-accent='portal'].dark .doc-article a:visited,
    html[data-accent='portal'].dark .note-body a:visited,
    html[data-accent='portal'].dark .ai-msg.bot a:visited,
    html[data-accent='oldbook'].dark .doc-article a:visited,
    html[data-accent='oldbook'].dark .note-body a:visited,
    html[data-accent='oldbook'].dark .ai-msg.bot a:visited {
      color: #b39ddb;
    }

    /* 顶栏毛玻璃胶囊 → 实色标题条：backdrop-filter 显式清掉、实底、直角、1px 实线边 */
    html[data-accent='win98'] .header-pill,
    html[data-accent='portal'] .header-pill,
    html[data-accent='crt'] .header-pill,
    html[data-accent='oldbook'] .header-pill,
    html[data-accent='win98'] .nav-drawer,
    html[data-accent='portal'] .nav-drawer,
    html[data-accent='crt'] .nav-drawer,
    html[data-accent='oldbook'] .nav-drawer {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      border-radius: 0;
      background: var(--apple-card);
      border: 1px solid var(--apple-border);
      box-shadow: none;
    }
    html[data-accent='win98'] .nav-drawer-mask,
    html[data-accent='portal'] .nav-drawer-mask,
    html[data-accent='crt'] .nav-drawer-mask,
    html[data-accent='oldbook'] .nav-drawer-mask,
    html[data-accent='win98'] .cmdk-backdrop,
    html[data-accent='portal'] .cmdk-backdrop,
    html[data-accent='crt'] .cmdk-backdrop,
    html[data-accent='oldbook'] .cmdk-backdrop,
    html[data-accent='win98'] .login-gate,
    html[data-accent='portal'] .login-gate,
    html[data-accent='crt'] .login-gate,
    html[data-accent='oldbook'] .login-gate {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    html[data-accent='win98'] .apple-card.appear-panel,
    html[data-accent='portal'] .apple-card.appear-panel,
    html[data-accent='crt'] .apple-card.appear-panel,
    html[data-accent='oldbook'] .apple-card.appear-panel {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* Win98 浮雕语言：银灰双线 outset（上左亮/下右暗=凸），按下翻 inset（98 按压本体） */
    html[data-accent='win98'] .header-pill,
    html[data-accent='win98'] .nav-drawer {
      background: #d4d0c8;
      border: 1px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
    }
    html[data-accent='win98'] .login-btn,
    html[data-accent='win98'] .board-btn {
      background: #d4d0c8;
      color: #000000;
      border: 1px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
      box-shadow: none;
    }
    html[data-accent='win98'] .login-btn:active,
    html[data-accent='win98'] .board-btn:active {
      border-color: #404040 #ffffff #ffffff #404040;
    }
    html[data-accent='win98'] .login-field input,
    html[data-accent='win98'] .sched-inline-input,
    html[data-accent='win98'] .profilev-input {
      background: #ffffff;
      border: 1px solid;
      border-color: #404040 #ffffff #ffffff #404040;
      color: #000000;
    }
    /* 深色档：凹陷改暗色变体，白底太刺眼（2026-10-08 目验修正） */
    html[data-accent='win98'].dark .login-field input,
    html[data-accent='win98'].dark .sched-inline-input,
    html[data-accent='win98'].dark .profilev-input {
      background: #1a1a1a;
      border-color: #101010 #6a6a6a #6a6a6a #101010;
      color: #e8e8e8;
    }
    /* 98 标题条语言：当前导航项=海军蓝实底白字（替代现代反色胶囊） */
    html[data-accent='win98'] .nav-link.active {
      background: #000080;
      color: #ffffff;
    }

    /* 早期门户：顶栏=深蓝页头条白字，白底反白选中项 */
    html[data-accent='portal'] .header-pill {
      background: #1f3a60;
      border-color: #16304f;
      color: #ffffff;
    }
    html[data-accent='portal'] .nav-link {
      color: #e8f0f8;
    }
    html[data-accent='portal'] .nav-link:hover {
      background: #2f4d78;
    }
    html[data-accent='portal'] .nav-link.active {
      background: #ffffff;
      color: #1f3a60;
    }
    html[data-accent='portal'] .header-actions button,
    html[data-accent='portal'] .nav-toggle {
      color: #e8f0f8;
    }

    /* CRT：扫描线（body::after 满屏 fixed 横纹，pointer-events:none、无动画无闪烁）
       + 磷光辉光（text-shadow 微光 + 选中/主按钮辉光）；链接不用蓝紫用荧光绿 */
    html[data-accent='crt'] body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.10) 0px, rgba(0, 0, 0, 0.10) 1px,
        transparent 1px, transparent 3px
      );
    }
    html[data-accent='crt'] body {
      text-shadow: 0 0 2px currentColor;
    }
    html[data-accent='crt'] .nav-link.active,
    html[data-accent='crt'] .login-btn {
      background: transparent;
      border: 1px solid var(--brand-400);
      box-shadow: 0 0 8px rgba(51, 255, 102, 0.45);
      color: var(--brand-400);
    }
    html[data-accent='crt'] .doc-article a,
    html[data-accent='crt'] .note-body a,
    html[data-accent='crt'] .ai-msg.bot a {
      color: var(--brand-400);
    }
    html[data-accent='crt'] .doc-article a:visited,
    html[data-accent='crt'] .note-body a:visited,
    html[data-accent='crt'] .ai-msg.bot a:visited {
      color: #22cc55;
    }

    /* 老书纸：衬线已由 --font-sans 下发，补「纸感」——做旧边框 + 老印刷硬偏移影 */
    html[data-accent='oldbook'] .apple-card,
    html[data-accent='oldbook'] .doc-card,
    html[data-accent='oldbook'] .note-card {
      border: 1px solid #d9cba9;
      box-shadow: 2px 2px 0 rgba(107, 63, 42, 0.08);
    }

    /* ============================================================
       复古主题二次深化（2026-10-08 晚）：从「换色换角」到「换骨架」。
       前半段只动了皮，页面骨架仍是现代 Web（悬浮胶囊顶栏/软 hover/
       大字大留白），本段补上「老网页」的结构性语言。四款共享 + 各款
       标志性细节两层。全部纯 CSS，零 JS 零页面结构改动。
       ============================================================ */

    /* ---- 老骨架 A：通栏实色顶条（不再是悬浮胶囊） ----
       顶栏胶囊拉满视口宽、方角、底部实线边——老网站顶栏是「通栏一条」。
       .site-header 本身是 fixed 全宽壳，把胶囊拉满即成通栏条。 */
    html[data-accent='win98'] .site-header,
    html[data-accent='portal'] .site-header,
    html[data-accent='crt'] .site-header,
    html[data-accent='oldbook'] .site-header {
      padding: 0;
    }
    html[data-accent='win98'] .header-pill,
    html[data-accent='portal'] .header-pill,
    html[data-accent='crt'] .header-pill,
    html[data-accent='oldbook'] .header-pill {
      width: 100%;
      max-width: none;
      border-radius: 0;
      border-width: 0 0 2px 0;
      border-bottom-style: solid;
      border-bottom-color: var(--apple-border);
      box-shadow: none;
    }
    /* 窄屏抽屉按钮同平（在通栏条内） */
    html[data-accent='win98'] .nav-toggle,
    html[data-accent='portal'] .nav-toggle,
    html[data-accent='crt'] .nav-toggle,
    html[data-accent='oldbook'] .nav-toggle {
      border-radius: 0;
    }

    /* ---- 老骨架 B：全组件浮雕化 + 输入凹陷化 ----
       凸起 = 上左亮/下右暗；凹陷 = 上左暗/下右亮。旧色用 color-mix
       从纸底派生（深浅主题自动适配），不逐主题写死。 */
    html[data-accent='win98'] .theme-toggle,
    html[data-accent='win98'] .login-toggle,
    html[data-accent='win98'] .search-toggle,
    html[data-accent='win98'] .appear-knob,
    html[data-accent='win98'] .back-top {
      background: #d4d0c8;
      color: #000000;
      border: 1px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
      box-shadow: none;
    }
    html[data-accent='win98'] .theme-toggle:active,
    html[data-accent='win98'] .login-toggle:active,
    html[data-accent='win98'] .search-toggle:active {
      border-color: #404040 #ffffff #ffffff #404040;
    }

    /* ---- 老骨架 C：压平现代软动效（老网页没有「悬停浮起」） ----
       卡片 hover 抬升/按钮 translateY 全部压平，反馈改用老语言
       （链接变色/按下浮雕翻转，已在各款段内下发）。 */
    html[data-accent='win98'] .apple-card:hover,
    html[data-accent='portal'] .apple-card:hover,
    html[data-accent='crt'] .apple-card:hover,
    html[data-accent='oldbook'] .apple-card:hover,
    html[data-accent='win98'] .doc-card:hover,
    html[data-accent='portal'] .doc-card:hover,
    html[data-accent='crt'] .doc-card:hover,
    html[data-accent='oldbook'] .doc-card:hover,
    html[data-accent='win98'] .note-card:hover,
    html[data-accent='portal'] .note-card:hover,
    html[data-accent='crt'] .note-card:hover,
    html[data-accent='oldbook'] .note-card:hover {
      transform: none;
      box-shadow: var(--shadow-sm);
    }

    /* ---- 老骨架 D：小字密排（老网页 = 小字） ----
       只作用于继承文本（body 层基准字号降一档），组件显式字号不动，
       防布局破坏。 */
    html[data-accent='win98'] body,
    html[data-accent='portal'] body,
    html[data-accent='crt'] body,
    html[data-accent='oldbook'] body {
      font-size: 14px;
    }

    /* ---- 老骨架 E：经典选中文本（navy 反白 / CRT 荧光反色） ---- */
    html[data-accent='win98'] ::selection,
    html[data-accent='portal'] ::selection,
    html[data-accent='oldbook'] ::selection {
      background: #000080;
      color: #ffffff;
    }
    html[data-accent='crt'] ::selection {
      background: #33ff66;
      color: #000000;
    }

    /* ---- 老骨架 F：方形滚动条（Win98 桌面感） ---- */
    html[data-accent='win98'] ::-webkit-scrollbar,
    html[data-accent='portal'] ::-webkit-scrollbar,
    html[data-accent='crt'] ::-webkit-scrollbar,
    html[data-accent='oldbook'] ::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }
    html[data-accent='win98'] ::-webkit-scrollbar-track,
    html[data-accent='portal'] ::-webkit-scrollbar-track,
    html[data-accent='crt'] ::-webkit-scrollbar-track,
    html[data-accent='oldbook'] ::-webkit-scrollbar-track {
      background: repeating-conic-gradient(#d4d0c8 0% 25%, #ffffff 0% 50%) 0 0 / 4px 4px;
    }
    html[data-accent='win98'] ::-webkit-scrollbar-thumb,
    html[data-accent='portal'] ::-webkit-scrollbar-thumb,
    html[data-accent='crt'] ::-webkit-scrollbar-thumb,
    html[data-accent='oldbook'] ::-webkit-scrollbar-thumb {
      border-radius: 0;
      border: 2px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
      background: #d4d0c8;
    }
    html[data-accent='crt'] ::-webkit-scrollbar-track {
      background: #0a120a;
    }
    html[data-accent='crt'] ::-webkit-scrollbar-thumb {
      border-color: #33ff66 #0a3d1c #0a3d1c #33ff66;
      background: #0f2b12;
    }

    /* ---- 老骨架 G：卡片窗格化（2px 实线 + 内容区内边线，像窗口窗格） ----
       全屏沉浸组件（灯箱/播放器）不做，避免过度装饰。 */
    html[data-accent='win98'] .apple-card,
    html[data-accent='portal'] .apple-card,
    html[data-accent='oldbook'] .apple-card {
      border: 2px solid var(--apple-border);
      box-shadow: none;
    }
    html[data-accent='win98'] .apple-card:hover {
      border-color: var(--apple-border);
    }

    /* ---- Win98 标志性细节：经典标题条渐变 + 任务条页脚 + 窗格化 ---- */
    /* 顶条 = Win98 活动窗口标题条本命渐变（#000080→#1084d0，左→右）+ 白粗体站名 */
    html[data-accent='win98'] .header-pill {
      background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
      border-bottom: 2px solid #404040;
      color: #ffffff;
    }
    html[data-accent='win98'].dark .header-pill {
      background: linear-gradient(90deg, #1a1a4a 0%, #0c5a94 100%);
    }
    html[data-accent='win98'] .header-pill .logo {
      color: #ffffff;
      font-weight: 700;
    }
    html[data-accent='win98'] .nav-link {
      color: #ffffff;
    }
    html[data-accent='win98'] .nav-link:hover {
      background: rgba(255, 255, 255, 0.18);
    }
    html[data-accent='win98'] .header-actions button {
      color: #ffffff;
    }
    /* 页脚 = 灰色任务条（outset 浮雕 + 凹陷内槽） */
    html[data-accent='win98'] .site-footer {
      background: #d4d0c8;
      border-top: 1px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
      color: #000000;
    }
    html[data-accent='win98'].dark .site-footer {
      background: #2b2b2b;
      border-color: #6a6a6a #101010 #101010 #6a6a6a;
      color: #e8e8e8;
    }
    /* 卡片标题区 = 灰色渐变条（Win98 窗格标题）——外观抽屉与各卡 eyebrow 行 */
    html[data-accent='win98'] .card-eyebrow {
      background: linear-gradient(90deg, #d4d0c8, #efefef);
      color: #000000;
      padding: 3px 8px;
      margin: -4px -4px 10px;
      border: 1px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
      letter-spacing: 0.06em;
    }

    /* ---- 早期门户标志性细节：通栏已由老骨架 A 下发，补栏目渐变条 + 正文白底蓝框 ---- */
    html[data-accent='portal'] .card-eyebrow {
      background: linear-gradient(90deg, #1f3a60 0%, #4a6f9e 100%);
      color: #ffffff;
      padding: 3px 8px;
      margin: -4px -4px 10px;
      letter-spacing: 0.06em;
    }
    html[data-accent='portal'] .doc-article {
      background: #ffffff;
      border: 1px solid #b8c8d8;
      padding: 16px;
    }
    html[data-accent='portal'].dark .doc-article {
      background: #16202e;
    }

    /* ---- CRT 标志性细节：方括号导航 + 悬停反色 + 磷光暗角 + 可选闪烁 ---- */
    /* 导航项加 [方括号]（终端菜单语言）；反色悬停 = 荧光绿底黑字 */
    html[data-accent='crt'] .nav-link::before { content: '['; }
    html[data-accent='crt'] .nav-link::after { content: ']'; }
    html[data-accent='crt'] .nav-link::before,
    html[data-accent='crt'] .nav-link::after {
      opacity: 0.55;
      transition: opacity 120ms linear;
    }
    html[data-accent='crt'] .nav-link:hover::before,
    html[data-accent='crt'] .nav-link:hover::after,
    html[data-accent='crt'] .nav-link.active::before,
    html[data-accent='crt'] .nav-link.active::after {
      opacity: 1;
    }
    html[data-accent='crt'] .nav-link:hover {
      background: var(--brand-400);
      color: #000000;
      text-shadow: none;
    }
    /* 磷光增强：双层辉光（现有 text-shadow 之上再叠 drop-shadow） + 屏幕暗角 */
    html[data-accent='crt'] body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: radial-gradient(ellipse at center,
        transparent 55%, rgba(0, 0, 0, 0.38) 100%);
    }
    html[data-accent='crt'] .nav-link.active {
      background: transparent;
      color: var(--brand-400);
      box-shadow: 0 0 12px rgba(51, 255, 102, 0.55), inset 0 0 6px rgba(51, 255, 102, 0.25);
      text-shadow: 0 0 6px rgba(51, 255, 102, 0.8);
    }
    /* 可选极轻微闪烁（磷光呼吸感；reduced-motion 全局兜底自动静止） */
    @media (prefers-reduced-motion: no-preference) {
      html[data-accent='crt'] body {
        animation: crtFlicker 4s steps(1) infinite;
      }
      @keyframes crtFlicker {
        0%, 100% { opacity: 1; }
        92% { opacity: 1; }
        93% { opacity: 0.97; }
        94% { opacity: 1; }
        97% { opacity: 0.985; }
        98% { opacity: 1; }
      }
    }

    /* ---- 老书纸标志性细节：双线框 + 纸晕 + 段首缩进首字下沉 + 花饰分隔线 ---- */
    /* 卡片改老书装帧双线框（3px double，外粗内细像包背装书衣） */
    html[data-accent='oldbook'] .apple-card,
    html[data-accent='oldbook'] .doc-card,
    html[data-accent='oldbook'] .note-card {
      border: 3px double #b89a6a;
      box-shadow: none;
    }
    /* 纸面旧晕：四边轻微变暗（radial 叠在画布上，不挡交互） */
    html[data-accent='oldbook'] body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(ellipse at center,
        transparent 60%, rgba(107, 63, 42, 0.10) 100%);
    }
    /* 正文排版：段首两字缩进 + 首字下沉（文档页/随笔正文） */
    html[data-accent='oldbook'] .doc-article p {
      text-indent: 2em;
    }
    html[data-accent='oldbook'] .doc-article > p:first-of-type::first-letter {
      float: left;
      font-size: 2.6em;
      line-height: 0.9;
      padding: 4px 8px 0 0;
      color: #6b3f2a;
      font-weight: 700;
    }
    /* 分隔线改居中花饰（老书章回分隔） */
    html[data-accent='oldbook'] .doc-article hr {
      border: none;
      text-align: center;
      margin: 18px 0;
    }
    html[data-accent='oldbook'] .doc-article hr::after {
      content: '❦';
      color: #8a5a3c;
      font-size: 16px;
    }

    /* ============================================================
       复古主题三次补刀（2026-10-08 晚二）：内容层小细节——把散落在
       页面里的现代胶囊/浮层也拉回年代里。全部纯 CSS，零 JS。
       ============================================================ */

    /* ---- ① 胶囊 chip 全族 → 方角实边（老网页的小部件没有全圆胶囊） ----
       天气胶囊/流星雨预告/课表周筛选/节次/随笔标签/今日课表 chip */
    html[data-accent='win98'] .weather-chip,
    html[data-accent='win98'] .shower-chip,
    html[data-accent='win98'] .sched-pill,
    html[data-accent='win98'] .note-tag,
    html[data-accent='win98'] .sched-today-chip,
    html[data-accent='portal'] .weather-chip,
    html[data-accent='portal'] .shower-chip,
    html[data-accent='portal'] .sched-pill,
    html[data-accent='portal'] .note-tag,
    html[data-accent='portal'] .sched-today-chip,
    html[data-accent='crt'] .weather-chip,
    html[data-accent='crt'] .shower-chip,
    html[data-accent='crt'] .sched-pill,
    html[data-accent='crt'] .note-tag,
    html[data-accent='crt'] .sched-today-chip,
    html[data-accent='oldbook'] .weather-chip,
    html[data-accent='oldbook'] .shower-chip,
    html[data-accent='oldbook'] .sched-pill,
    html[data-accent='oldbook'] .note-tag,
    html[data-accent='oldbook'] .sched-today-chip {
      border-radius: 2px;
    }
    /* 课表周筛选选中态 = 实底反白（像老表单的选中按钮） */
    html[data-accent='win98'] .sched-pill.on,
    html[data-accent='portal'] .sched-pill.on,
    html[data-accent='oldbook'] .sched-pill.on {
      border-radius: 2px;
    }
    html[data-accent='win98'] .sched-pill:active {
      transform: none;
    }

    /* ---- ② 迷你播放器：悬浮胶囊 → 通栏状态条（贴底、方角、实边） ----
       悬浮样式与顶栏同语言：不浮不圆不投影。播放器内部结构零改动。 */
    html[data-accent='win98'] .mini-player,
    html[data-accent='portal'] .mini-player,
    html[data-accent='crt'] .mini-player,
    html[data-accent='oldbook'] .mini-player {
      left: 0;
      right: 0;
      bottom: 0;
      transform: translate(0, 12px);
      width: auto;
      max-width: none;
      border-radius: 0;
      border-width: 2px 0 0 0;
      border-bottom-style: none;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: var(--apple-card);
    }
    html[data-accent='win98'] .mini-player.show,
    html[data-accent='portal'] .mini-player.show,
    html[data-accent='crt'] .mini-player.show,
    html[data-accent='oldbook'] .mini-player.show {
      transform: translate(0, 0);
    }
    html[data-accent='win98'].dark .mini-player,
    html[data-accent='portal'].dark .mini-player,
    html[data-accent='crt'].dark .mini-player,
    html[data-accent='oldbook'].dark .mini-player {
      background: var(--apple-card);
    }
    /* Win98 播放条 = 任务条同款浮雕顶边；CRT = 荧光绿顶线 */
    html[data-accent='win98'] .mini-player {
      border-color: #ffffff;
      box-shadow: inset 0 1px 0 #ffffff, inset 0 2px 0 #404040;
      background: #d4d0c8;
      color: #000000;
    }
    html[data-accent='win98'].dark .mini-player {
      background: #2b2b2b;
      color: #e8e8e8;
      box-shadow: inset 0 1px 0 #6a6a6a;
      border-color: #6a6a6a;
    }
    html[data-accent='crt'] .mini-player {
      border-color: #1e351e;
      box-shadow: 0 -2px 10px rgba(51, 255, 102, 0.18);
    }

    /* ---- ③ 歌词横条：圆角毛玻璃暗条 → 方角实色横幅（像老播放器的歌词屏） ---- */
    html[data-accent='win98'] .lyric-bar,
    html[data-accent='portal'] .lyric-bar,
    html[data-accent='crt'] .lyric-bar,
    html[data-accent='oldbook'] .lyric-bar {
      border-radius: 0;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: none;
    }
    html[data-accent='win98'] .lyric-bar {
      background: #000080;
      color: #ffffff;
      border: 1px solid;
      border-color: #404040 #ffffff #ffffff #404040;
    }
    html[data-accent='portal'] .lyric-bar {
      background: #1f3a60;
      color: #ffffff;
      border: 1px solid #16304f;
    }
    html[data-accent='crt'] .lyric-bar {
      background: #0a120a;
      color: #33ff66;
      border: 1px solid #1e351e;
      text-shadow: 0 0 4px rgba(51, 255, 102, 0.7);
    }
    html[data-accent='oldbook'] .lyric-bar {
      background: #2b241a;
      color: #f4ecd8;
      border: 1px solid #d9cba9;
    }

    /* ---- ④ 节气印章：圆角章 → 传统方印（直角 + 双线印框） ----
      （老书纸本身已是衬线，印文更挺） */
    html[data-accent='win98'] .term-seal,
    html[data-accent='portal'] .term-seal,
    html[data-accent='crt'] .term-seal,
    html[data-accent='oldbook'] .term-seal {
      border-radius: 0;
      border-width: 2px;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal-ink) 55%, transparent);
    }

    /* ---- ⑤ hud 角标（时钟四角的取景框角）——CRT 款换磷光绿，别家淡化成直角细线 ---- */
    html[data-accent='crt'] .hud-corner {
      border-color: rgba(51, 255, 102, 0.75);
    }
    html[data-accent='win98'] .hud-corner,
    html[data-accent='portal'] .hud-corner,
    html[data-accent='oldbook'] .hud-corner {
      border-color: color-mix(in srgb, var(--apple-foreground) 35%, transparent);
    }

    /* ---- ⑥ 开关控件：圆润现代开关 → 方形滑块（Win98 复选框质感） ---- */
    html[data-accent='win98'] .switch-ui,
    html[data-accent='portal'] .switch-ui,
    html[data-accent='crt'] .switch-ui,
    html[data-accent='oldbook'] .switch-ui {
      border: 1px solid var(--apple-border);
    }
    html[data-accent='win98'] .switch-ui::after,
    html[data-accent='portal'] .switch-ui::after,
    html[data-accent='crt'] .switch-ui::after,
    html[data-accent='oldbook'] .switch-ui::after {
      border-radius: 0;
    }

    /* ---- ⑦ 头像：老论坛的时代感 = 无圆角方头像（含留言板/个人中心） ----
      （「方头像才是老论坛」——首字块与图片一起方化） */
    html[data-accent='win98'] .board-avatar,
    html[data-accent='win98'] .board-avatar-img,
    html[data-accent='portal'] .board-avatar,
    html[data-accent='portal'] .board-avatar-img,
    html[data-accent='oldbook'] .board-avatar,
    html[data-accent='oldbook'] .board-avatar-img,
    html[data-accent='crt'] .board-avatar,
    html[data-accent='crt'] .board-avatar-img {
      border-radius: 0;
    }

    /* ---- ⑧ 快捷入口磁贴/首页数据行：already 窗格化走 .apple-card；磁贴内图标方块方角 ---- */
    html[data-accent='win98'] .home-entry,
    html[data-accent='portal'] .home-entry,
    html[data-accent='crt'] .home-entry,
    html[data-accent='oldbook'] .home-entry {
      border-width: 2px;
    }

    /* ============================================================
       复古主题四次补刀（2026-10-08 晚三）：小控件逐个过——上一批只盖了
       「面」上的东西，这一批把散在各处的独立控件全部拉回年代里。
       覆盖清单：顶栏三圆钮/灯箱翻页钮与关闭钮/子页关闭钮/播放器控制钮/
       AI 发送钮与模型切换钮/AI 会话 chip/留言板输入框/全站搜索 ESC 键
       与结果项/空态图标方块。全部纯 CSS，零 JS。
       ============================================================ */

    /* ---- ① 顶栏三圆钮：通栏标题条内应是「嵌入式平面按钮」——悬停浅底、
       按下凹陷（经典工具栏按钮行为），不再是圆形浮钮 ---- */
    html[data-accent='win98'] .theme-toggle,
    html[data-accent='win98'] .login-toggle,
    html[data-accent='win98'] .search-toggle,
    html[data-accent='portal'] .theme-toggle,
    html[data-accent='portal'] .login-toggle,
    html[data-accent='portal'] .search-toggle,
    html[data-accent='crt'] .theme-toggle,
    html[data-accent='crt'] .login-toggle,
    html[data-accent='crt'] .search-toggle,
    html[data-accent='oldbook'] .theme-toggle,
    html[data-accent='oldbook'] .login-toggle,
    html[data-accent='oldbook'] .search-toggle {
      border-radius: 0;
      background: none;
      border: none;
    }
    html[data-accent='win98'] .theme-toggle:hover,
    html[data-accent='win98'] .login-toggle:hover,
    html[data-accent='win98'] .search-toggle:hover,
    html[data-accent='portal'] .theme-toggle:hover,
    html[data-accent='portal'] .login-toggle:hover,
    html[data-accent='portal'] .search-toggle:hover {
      background: rgba(255, 255, 255, 0.18);
    }
    html[data-accent='crt'] .theme-toggle:hover,
    html[data-accent='crt'] .login-toggle:hover,
    html[data-accent='crt'] .search-toggle:hover {
      background: rgba(51, 255, 102, 0.14);
    }
    html[data-accent='oldbook'] .theme-toggle:hover,
    html[data-accent='oldbook'] .login-toggle:hover,
    html[data-accent='oldbook'] .search-toggle:hover {
      background: rgba(0, 0, 0, 0.07);
    }

    /* ---- ② 灯箱翻页钮/关闭钮、子页关闭钮：圆形毛玻璃浮钮 → 方形实钮 ---- */
    html[data-accent='win98'] .lb-nav,
    html[data-accent='win98'] .album-close,
    html[data-accent='portal'] .lb-nav,
    html[data-accent='portal'] .album-close,
    html[data-accent='crt'] .lb-nav,
    html[data-accent='crt'] .album-close,
    html[data-accent='oldbook'] .lb-nav,
    html[data-accent='oldbook'] .album-close {
      border-radius: 0;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    html[data-accent='win98'] .lb-nav,
    html[data-accent='win98'] .album-close {
      background: #d4d0c8;
      color: #000000;
      border: 1px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
    }
    html[data-accent='win98'] .lb-nav:hover,
    html[data-accent='win98'] .album-close:hover {
      transform: none;
      background: #d4d0c8;
    }
    html[data-accent='win98'] .lb-nav:active,
    html[data-accent='win98'] .album-close:active {
      border-color: #404040 #ffffff #ffffff #404040;
    }
    html[data-accent='crt'] .lb-nav {
      background: rgba(10, 18, 10, 0.8);
      border: 1px solid #1e351e;
      color: #33ff66;
    }
    html[data-accent='crt'] .lb-nav:hover {
      background: #33ff66;
      color: #000000;
      transform: translateY(-50%);
    }

    /* ---- ③ 播放器控制钮（上一首/播放/下一首/列表等）：圆形描边钮 →
       方形窗体钮；主播放钮的渐变+外发光→浮雕实底，悬停不再缩放浮起 ---- */
    html[data-accent='win98'] .ctrl-btn,
    html[data-accent='portal'] .ctrl-btn,
    html[data-accent='crt'] .ctrl-btn,
    html[data-accent='oldbook'] .ctrl-btn {
      border-radius: 0;
    }
    html[data-accent='win98'] .ctrl-btn {
      background: #d4d0c8;
      color: #000000;
      border: 1px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
    }
    html[data-accent='win98'] .ctrl-btn:hover {
      background: #d4d0c8;
      transform: none;
      box-shadow: none;
    }
    html[data-accent='win98'] .ctrl-btn:active {
      transform: none;
      border-color: #404040 #ffffff #ffffff #404040;
    }
    html[data-accent='win98'] .ctrl-btn.play-btn-main {
      background: #d4d0c8;
      box-shadow: none;
    }
    html[data-accent='win98'] .ctrl-btn.play-btn-main::before {
      display: none;   /* 现代外发光光斑摘掉 */
    }
    html[data-accent='win98'] .ctrl-btn.play-btn-main:hover {
      transform: none;
      box-shadow: none;
    }
    html[data-accent='crt'] .ctrl-btn {
      background: transparent;
      border-color: #1e351e;
      color: #33ff66;
    }
    html[data-accent='crt'] .ctrl-btn:hover {
      background: rgba(51, 255, 102, 0.12);
      transform: none;
      box-shadow: 0 0 8px rgba(51, 255, 102, 0.3);
    }
    html[data-accent='crt'] .ctrl-btn.play-btn-main {
      box-shadow: 0 0 10px rgba(51, 255, 102, 0.35);
    }
    html[data-accent='crt'] .ctrl-btn.play-btn-main::before {
      display: none;
    }
    html[data-accent='crt'] .ctrl-btn.play-btn-main:hover {
      transform: none;
      box-shadow: 0 0 14px rgba(51, 255, 102, 0.5);
    }
    html[data-accent='portal'] .ctrl-btn,
    html[data-accent='oldbook'] .ctrl-btn {
      background: var(--apple-card);
    }
    html[data-accent='portal'] .ctrl-btn:hover,
    html[data-accent='oldbook'] .ctrl-btn:hover {
      transform: none;
      box-shadow: none;
    }
    html[data-accent='portal'] .ctrl-btn.play-btn-main::before,
    html[data-accent='oldbook'] .ctrl-btn.play-btn-main::before {
      display: none;
    }
    html[data-accent='portal'] .ctrl-btn.play-btn-main,
    html[data-accent='oldbook'] .ctrl-btn.play-btn-main {
      background: var(--apple-primary);
      box-shadow: none;
    }

    /* ---- ④ AI 发送钮（12px 圆角反色钮）→ 方角；AI 会话 chip 方角化；
       模型切换钮去圆角 ---- */
    html[data-accent='win98'] .ai-send-btn,
    html[data-accent='portal'] .ai-send-btn,
    html[data-accent='crt'] .ai-send-btn,
    html[data-accent='oldbook'] .ai-send-btn,
    html[data-accent='win98'] .ai-chip,
    html[data-accent='portal'] .ai-chip,
    html[data-accent='crt'] .ai-chip,
    html[data-accent='oldbook'] .ai-chip,
    html[data-accent='win98'] .ai-chip .chip-tag,
    html[data-accent='portal'] .ai-chip .chip-tag,
    html[data-accent='crt'] .ai-chip .chip-tag,
    html[data-accent='oldbook'] .ai-chip .chip-tag,
    html[data-accent='win98'] .ai-chip .chip-x,
    html[data-accent='portal'] .ai-chip .chip-x,
    html[data-accent='crt'] .ai-chip .chip-x,
    html[data-accent='oldbook'] .ai-chip .chip-x,
    html[data-accent='win98'] .ai-model-btn,
    html[data-accent='portal'] .ai-model-btn,
    html[data-accent='crt'] .ai-model-btn,
    html[data-accent='oldbook'] .ai-model-btn {
      border-radius: 0;
    }
    html[data-accent='win98'] .ai-send-btn {
      background: #d4d0c8;
      color: #000000;
      border: 1px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
    }
    html[data-accent='win98'] .ai-send-btn:hover {
      transform: none;
      opacity: 1;
    }
    html[data-accent='crt'] .ai-send-btn {
      background: transparent;
      border: 1px solid var(--brand-400);
      color: var(--brand-400);
      box-shadow: 0 0 8px rgba(51, 255, 102, 0.35);
    }

    /* ---- ⑤ 留言板输入框（10px 圆角+聚焦环）→ 方角实边+经典聚焦
      （聚焦 = 边框变主题色 2px，不是现代发光环） ---- */
    html[data-accent='win98'] .board-area,
    html[data-accent='portal'] .board-area,
    html[data-accent='crt'] .board-area,
    html[data-accent='oldbook'] .board-area {
      border-radius: 0;
    }
    html[data-accent='win98'] .board-area {
      background: #ffffff;
      color: #000000;
      border: 1px solid;
      border-color: #404040 #ffffff #ffffff #404040;
    }
    html[data-accent='win98'] .board-area:focus {
      outline: 1px dotted #000000;
      outline-offset: -4px;
      box-shadow: none;
      border-color: #404040 #ffffff #ffffff #404040;
    }
    html[data-accent='win98'].dark .board-area {
      background: #1a1a1a;
      color: #e8e8e8;
      border-color: #101010 #6a6a6a #6a6a6a #101010;
    }
    html[data-accent='crt'] .board-area {
      background: #0a120a;
      border: 1px solid #1e351e;
      color: #33ff66;
    }
    html[data-accent='crt'] .board-area:focus {
      border-color: var(--brand-400);
      box-shadow: none;
    }

    /* ---- ⑥ 全站搜索（Ctrl+K）：ESC 小键方角、结果项选中 = 反色（不是现代灰底） ---- */
    html[data-accent='win98'] .cmdk-esc,
    html[data-accent='portal'] .cmdk-esc,
    html[data-accent='crt'] .cmdk-esc,
    html[data-accent='oldbook'] .cmdk-esc {
      border-radius: 0;
    }
    html[data-accent='win98'] .cmdk-item.active,
    html[data-accent='portal'] .cmdk-item.active,
    html[data-accent='oldbook'] .cmdk-item.active {
      background: var(--apple-foreground);
      color: var(--apple-background);
    }
    html[data-accent='crt'] .cmdk-item.active {
      background: var(--brand-400);
      color: #000000;
    }
    html[data-accent='crt'] .cmdk-item.active mark {
      color: #000000;
    }

    /* ---- ⑦ 空态图标方块：主题色 10% 染底圆角块 → 2px 实线空框（老软件
       「无内容」占位图的画法） ---- */
    html[data-accent='win98'] .empty-state .es-icon,
    html[data-accent='portal'] .empty-state .es-icon,
    html[data-accent='crt'] .empty-state .es-icon,
    html[data-accent='oldbook'] .empty-state .es-icon {
      border-radius: 0;
      background: none;
      border: 2px dashed var(--apple-border);
      color: var(--apple-muted-foreground);
    }

    /* ---- ⑧ 子页标题行关闭钮已含在 ②；寄语胶囊方角化补进 chip 族
      （hero-quote 与 weather-chip 同款圆角，同批拉直） ---- */
    html[data-accent='win98'] .hero-quote,
    html[data-accent='portal'] .hero-quote,
    html[data-accent='crt'] .hero-quote,
    html[data-accent='oldbook'] .hero-quote {
      border-radius: 2px;
    }

    /* ---- ⑨ 健康灯行（2026-10-08，关于页站点数据卡内；原 /status/ 独立页能力并入）。
       语义与配色跟 /status/ 同源（灰=未启用不算故障，黄=备份偏旧，红=真异常）；
       颜色全走语义变量，主题/深浅自动跟随；复古四款方灯（与 /status/ 页内联规则同形） */
    .health-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 2px;
      border-top: 1px solid var(--apple-border);
    }
    .health-row:first-of-type { border-top: 0; }
    .health-row .name { font-size: 13px; font-weight: 600; margin: 0; color: var(--apple-foreground); }
    .health-row .desc { font-size: 11.5px; color: var(--apple-muted-foreground); margin: 2px 0 0; }
    .hstate { margin-left: auto; font-size: 12.5px; color: var(--apple-muted-foreground); text-align: right; }
    .hstate.ok { color: var(--success, #27814e); }
    .hstate.warn { color: #a86f08; }
    .hstate.bad { color: var(--destructive, #b93a3a); }
    html[data-accent='win98'] .health-row .dot,
    html[data-accent='portal'] .health-row .dot,
    html[data-accent='crt'] .health-row .dot,
    html[data-accent='oldbook'] .health-row .dot {
      border-radius: 0;
    }

    /* ============================================================
       复古主题窄屏适配（2026-10-08 晚四）：老骨架与窄屏断点的四处打架逐个拆——
       后方断点特异性同级会胜出，必须用更高特异性拉回；全部纯 CSS。
       ============================================================ */

    /* ---- 窄屏①：通栏顶条在 767/480px 断点被 .site-header padding 挤出两侧漏边——
       retro 下顶条必须真通栏（padding:0 拉回，特异性 0,2,0 压过断点内 0,1,0） */
    @media (max-width: 767px) {
      html[data-accent='win98'] .site-header,
      html[data-accent='portal'] .site-header,
      html[data-accent='crt'] .site-header,
      html[data-accent='oldbook'] .site-header {
        padding: 0;
      }
      html[data-accent='win98'] .header-pill,
      html[data-accent='portal'] .header-pill,
      html[data-accent='crt'] .header-pill,
      html[data-accent='oldbook'] .header-pill {
        width: 100%;
        border-radius: 0;
        border-width: 0 0 2px 0;
      }
    }

    /* ---- 窄屏②：一言胶囊换行断点（640px）把圆角改回 18px——retro 压回方角 ---- */
    @media (max-width: 640px) {
      html[data-accent='win98'] .hero-quote,
      html[data-accent='portal'] .hero-quote,
      html[data-accent='crt'] .hero-quote,
      html[data-accent='oldbook'] .hero-quote {
        border-radius: 2px;
      }
    }

    /* ---- 窄屏③：色板预览卡在小面板里收紧（13 枚卡 36px 宽在 300px 面板 6 枚/行 →
       手机 8 枚/行），主题名行同步收紧行距 */
    @media (max-width: 480px) {
      .swatch {
        width: 30px;
        height: 26px;
      }
      .swatch-row {
        gap: 8px;
      }
      .swatch-name {
        margin-top: 6px;
      }
    }

    /* ---- 窄屏④：抽屉（≤900px 汉堡模式打开）——本体已方角实底，补：
       抽屉内导航项与关闭钮同步方角、Win98 浮雕；抽屉头部底边 2px 实线（老菜单分隔） */
    @media (max-width: 900px) {
      html[data-accent='win98'] .nav-drawer-link,
      html[data-accent='portal'] .nav-drawer-link,
      html[data-accent='crt'] .nav-drawer-link,
      html[data-accent='oldbook'] .nav-drawer-link {
        border-radius: 0;
      }
      html[data-accent='win98'] .nav-drawer-close {
        border-radius: 0;
        background: #d4d0c8;
        color: #000000;
        border: 1px solid;
        border-color: #ffffff #404040 #404040 #ffffff;
      }
      html[data-accent='win98'] .nav-drawer-close:active {
        border-color: #404040 #ffffff #ffffff #404040;
      }
      html[data-accent='win98'] .nav-drawer-head,
      html[data-accent='portal'] .nav-drawer-head,
      html[data-accent='crt'] .nav-drawer-head,
      html[data-accent='oldbook'] .nav-drawer-head {
        border-bottom-width: 2px;
      }
      /* 通栏顶条在汉堡模式的高度：hero 顶部留白跟随（retro 下顶条更高 2px 底边） */
      html[data-accent='win98'] .hero-section,
      html[data-accent='portal'] .hero-section,
      html[data-accent='crt'] .hero-section,
      html[data-accent='oldbook'] .hero-section {
        padding-top: 70px;
      }
    }
    @media (max-width: 767px) {
      html[data-accent='win98'] .hero-section,
      html[data-accent='portal'] .hero-section,
      html[data-accent='crt'] .hero-section,
      html[data-accent='oldbook'] .hero-section {
        padding-top: 72px;
      }
    }
    @media (max-width: 480px) {
      html[data-accent='win98'] .hero-section,
      html[data-accent='portal'] .hero-section,
      html[data-accent='crt'] .hero-section,
      html[data-accent='oldbook'] .hero-section {
        padding-top: 68px;
      }
    }

    /* ---- 窄屏⑤：通栏迷你播放器在手机上不要太高（行内 padding 收紧），
       CRT 展幕扫描线层变淡（小屏闪恧感知更强），老书纸纸晕减淡（小屏四角暗角占比过大） */
    @media (max-width: 640px) {
      html[data-accent='win98'] .mini-player,
      html[data-accent='portal'] .mini-player,
      html[data-accent='crt'] .mini-player,
      html[data-accent='oldbook'] .mini-player {
        padding-top: 6px;
        padding-bottom: 6px;
      }
      html[data-accent='crt'] body::after {
        background: repeating-linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.06) 0px, rgba(0, 0, 0, 0.06) 1px,
          transparent 1px, transparent 3px
        );
      }
      html[data-accent='oldbook'] body::after {
        background: radial-gradient(ellipse at center,
          transparent 70%, rgba(107, 63, 42, 0.07) 100%);
      }
      html[data-accent='crt'] body::before {
        background: radial-gradient(ellipse at center,
          transparent 65%, rgba(0, 0, 0, 0.28) 100%);
      }
    }

    /* Dark mode */
    .dark {
      --background: var(--background-900);
      --foreground: var(--text-50);
      --card: var(--background-800);
      --card-foreground: var(--text-50);
      --popover: var(--background-700);
      --popover-foreground: var(--text-50);

      --primary: var(--brand-400);
      --primary-foreground: var(--background-900);
      --secondary: var(--background-800);
      --secondary-foreground: var(--text-50);
      --muted: var(--background-800);
      --muted-foreground: var(--text-400);
      --accent: var(--background-700);
      --accent-foreground: var(--text-50);
      --destructive: #ff453a;
      --destructive-foreground: #ffffff;
      --success: #30d158;
      --success-foreground: #ffffff;
      --border: var(--background-700);
      --input: var(--background-700);
      --ring: var(--brand-400);

      --shadow-2xs: 0 1px 2px -1px rgba(0, 0, 0, 0.30);
      --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.36), 0 1px 3px -1px rgba(0, 0, 0, 0.36);
      --shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.36);
      --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.44), 0 2px 4px -2px rgba(0, 0, 0, 0.36);
      --shadow-lg: 0 8px 24px -8px rgba(0, 0, 0, 0.50), 0 4px 8px -4px rgba(0, 0, 0, 0.40);
      --shadow-xl: 0 16px 40px -10px rgba(0, 0, 0, 0.55), 0 8px 16px -8px rgba(0, 0, 0, 0.44);
      --shadow-2xl: 0 24px 64px -12px rgba(0, 0, 0, 0.60);
    }

    /* ===== Reset & Base ===== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-sans);
      color: var(--apple-foreground);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out);
      /* 长内容兜底：横向溢出一律裁掉，不让页面被撑宽（fixed 定位弹层在移动端会随布局视口位移）；
         用 clip 不产生滚动容器，不影响 sticky/fixed 与页面内横向滚动区 */
      overflow-x: clip;
      /* body 必须保持透明：底色+顶部暖橙光晕都在 html（画布层）上，
         流星层（.fx-meteors，z-index:-1）与自定义背景层（.bg-layer）才能透出来——
         body 若有不透明底色，普通盒背景会绘制在负 z 层之上把它们全盖住（接入流星时踩过） */
      background: transparent;
    }

    ::selection {
      background: var(--apple-primary);
      color: var(--apple-primary-foreground);
    }

    /* ===== Inline SVG Icon System ===== */
    .svg-icon {
      flex-shrink: 0;
      stroke: currentColor;
      transition: stroke 0.2s ease;
    }

    .svg-icon.inline-arrow {
      vertical-align: 1px;
      margin-left: 2px;
    }

    .play-icon {
      stroke-width: 2;
    }

    /* ===== Reading Progress Bar ===== */
    .progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0;
      background: var(--apple-primary);
      z-index: 100;
      transition: width 100ms linear;
    }

    /* ===== pjax 换页加载态（2026-09-07）：慢线上点击导航后到内容就位之间零反馈、像"点了没反应"，
       发起 160ms 后还没到就亮出反馈（秒回完全不出现不闪）：顶部进度条变滑动段 + 内容轻降透明度。
       width 用 !important 压过滚动处理器写的内联宽度，滑动走 transform 与 width 互不打架；
       fetch 失败整页加载兜底时保留加载态，旧页带着进度条直到卸载 */
    .progress-bar.pjax-busy {
      width: 30% !important;
      animation: pjaxSlide 1.1s linear infinite;
    }
    @keyframes pjaxSlide {
      from { transform: translateX(-110%); }
      to { transform: translateX(380%); }
    }
    main.page-main,
    .site-footer { transition: opacity 180ms var(--ease-out); }
    body.pjax-loading main.page-main,
    body.pjax-loading .site-footer { opacity: 0.55; }

    /* 换页入场（2026-09-07 用户反馈"加载好了切换太生硬、像突然出现"）：新内容就位后 main 整体淡入，
       统一覆盖八页。
       ⚠️ 只动 opacity 不动 transform：transform 配 fill 会把 main 里 fixed 后代（AI 历史抽屉等）
       的包含块改到 main 上（坑 22/28 同源）；fill:both 残留的是 opacity:1 无副作用 */
    main.page-main.pjax-enter { animation: pjaxEnter 300ms var(--ease-out) both; }
    @keyframes pjaxEnter { from { opacity: 0; } to { opacity: 1; } }

    @media (prefers-reduced-motion: reduce) {
      .progress-bar.pjax-busy { animation: none; width: 40% !important; }
      main.page-main,
      .site-footer { transition: none; }
      main.page-main.pjax-enter { animation: none; }
    }

    /* ===== Site Header：居中悬浮胶囊导航 ===== */
    /* 头部本身透明不挡点击（pointer-events 穿透），只有胶囊可交互；全屏层（z-151）从 52px 起，
       胶囊悬浮在层上方缝隙里，与参考站（悬浮 pill 导航）同款形态 */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      display: flex;
      justify-content: center;
      padding: 10px 12px 0;
      pointer-events: none;
    }

    .header-pill {
      pointer-events: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 100%;
      min-width: 0;
      padding: 5px 8px 5px 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.6);
      -webkit-backdrop-filter: saturate(1.8) blur(22px);
      backdrop-filter: saturate(1.8) blur(22px);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 28px rgba(0, 0, 0, 0.1);
      transition: box-shadow 250ms var(--ease-out), background-color 250ms var(--ease-out);
    }

    .dark .header-pill {
      background: rgba(30, 30, 32, 0.58);
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 28px rgba(0, 0, 0, 0.42);
    }

    /* 滚动后投影加深（onScroll 挂 .scrolled，原通栏态的分割线改走投影） */
    .site-header.scrolled .header-pill {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 32px rgba(0, 0, 0, 0.16);
    }

    .dark .site-header.scrolled .header-pill {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 32px rgba(0, 0, 0, 0.5);
    }

    .logo {
      flex: none;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--apple-foreground);
      text-decoration: none;
      transition: color 250ms var(--ease-out), opacity 250ms var(--ease-out);
    }

    .logo:hover { opacity: 0.7; }

    .site-nav {
      display: flex;
      align-items: center;
      gap: 2px;
      min-width: 0;
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      height: 34px;
      padding: 0 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: var(--apple-foreground);
      text-decoration: none;
      transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
    }

    .nav-link:hover {
      background: var(--apple-secondary);
    }

    /* 当前项：反色胶囊 chip（参考站同款选中态） */
    .nav-link.active {
      background: var(--apple-foreground);
      color: var(--apple-background);
      font-weight: 600;
    }

    .nav-link:focus-visible {
      outline: 2px solid var(--apple-ring);
      outline-offset: 2px;
    }


    /* Theme toggle button */
    .theme-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 999px;
      background: none;
      color: var(--apple-foreground);
      font-size: 16px;
      cursor: pointer;
      transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
    }

    /* 右上角按钮组：搜索 + 登录 + 深色模式（胶囊内无边框圆钮） */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 2px;
      flex: none;
      padding-left: 6px;
      margin-left: 2px;
      border-left: 1px solid var(--apple-border);
    }

    .login-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 999px;
      background: none;
      color: var(--apple-foreground);
      cursor: pointer;
      transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
    }

    .login-toggle:hover,
    .theme-toggle:hover,
    .search-toggle:hover {
      background: var(--apple-secondary);
      transform: none;
    }

    .login-toggle.logged-in {
      color: var(--apple-primary);
      background: color-mix(in srgb, var(--apple-primary) 12%, transparent);
    }

    /* ===== 主题切换圆形揭示（View Transitions API） ===== */
    /* .theme-vt 由 JS 只在切换瞬间挂到 <html> 上；keyframes theme-reveal 按点击坐标动态注入。
       旧主题定格垫底，新主题从按钮位置圆形扫出；不支持 VT 的浏览器不挂类、直接切换 */
    html.theme-vt::view-transition-old(root),
    html.theme-vt::view-transition-new(root) { mix-blend-mode: normal; }

    html.theme-vt::view-transition-old(root) {
      animation: none;
      opacity: 1;
      z-index: 1;
    }

    html.theme-vt::view-transition-new(root) {
      animation: 0.52s linear both theme-reveal;
      z-index: 2;
    }

    /* 快照期间冻结元素自身过渡，防止与揭示动画叠加抖动 */
    html.theme-vt *,
    html.theme-vt *::before,
    html.theme-vt *::after { transition: none !important; }

    /* 切换按钮独立成像：出场旋转缩小、入场反转进入（图标翻转小动效）。
       门屏圆钮同挂主题钮的过渡名——两者任一时刻只渲染一个（门开时顶栏 display:none、
       门关时门屏节点已摘），不会撞名；门屏态点击的揭示动效与顶栏完全同款 */
    html.theme-vt .theme-toggle,
    html.theme-vt .gate-theme { view-transition-name: theme-toggle !important; }

    html.theme-vt::view-transition-group(theme-toggle) {
      animation: none;
      z-index: 4;
    }

    html.theme-vt::view-transition-old(theme-toggle) {
      mix-blend-mode: normal;
      animation: 0.18s ease-in both theme-toggle-out;
    }

    html.theme-vt::view-transition-new(theme-toggle) {
      mix-blend-mode: normal;
      animation: theme-toggle-in 0.46s 40ms var(--ease-out-soft, ease-out) both;
    }

    @keyframes theme-toggle-out {
      to { opacity: 0; transform: rotate(28deg) scale(0.72); }
    }

    @keyframes theme-toggle-in {
      0% { opacity: 0; transform: rotate(-32deg) scale(0.62); }
      to { opacity: 1; transform: rotate(0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      /* 减弱动效：JS 已跳过 startViewTransition，这里双保险 */
      html.theme-vt::view-transition-new(root) { animation: none; }
    }

    /* 顶栏头像三态：默认人形图标 / 已登录首字徽章 / 有头像显示圆图 */
    .login-toggle .avatar-letter {
      display: none;
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
    }

    .login-toggle.logged-in .avatar-letter { display: block; }
    .login-toggle.logged-in .login-default-icon { display: none; }

    .login-toggle .avatar-img { display: none; }

    .login-toggle.has-avatar .avatar-img {
      display: block;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      margin: -1px;
      object-fit: cover;
      border-radius: 999px;
    }

    .login-toggle.has-avatar .avatar-letter,
    .login-toggle.has-avatar .login-default-icon { display: none; }
    .login-toggle.has-avatar { overflow: hidden; }

    .theme-toggle:hover {
      background: var(--apple-secondary);
      transform: scale(1.06);
    }

    .theme-toggle:focus-visible {
      outline: 2px solid var(--apple-ring);
      outline-offset: 2px;
    }

    /* 顶栏搜索按钮（与 theme-toggle 同款观感） */
    .search-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      flex: none;
      border: none;
      border-radius: 999px;
      background: none;
      color: var(--apple-foreground);
      cursor: pointer;
      transition: transform 160ms var(--ease-out, ease), background 160ms;
    }

    .search-toggle:hover { background: var(--apple-secondary); }
    .search-toggle:active { transform: scale(0.86); }
    .search-toggle:focus-visible { outline: 2px solid var(--apple-ring); outline-offset: 2px; }

    @media (max-width: 700px) {
      .search-toggle { width: 32px; height: 32px; }
    }

    /* 留言板：发布区 + 留言列表（等级徽标/站长标识/删除钮）。
       发布框 2026-10-02 重写：原用工具页 .tool-area/.tool-btn 类，工具页移除批删掉了那段样式，
       文本框/按钮裸奔成浏览器默认样式（站长实报「太丑」）——改留言板自有类，
       设计语言对齐登录卡输入框（10px 圆角 + primary 聚焦环 + color-mix 阴影） */
    .board-compose { display: flex; flex-direction: column; gap: 10px; }
    .board-area {
      width: 100%;
      min-height: 88px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--secondary, var(--card));
      color: var(--apple-foreground);
      font-family: inherit;
      font-size: 14px;
      line-height: 1.6;
      resize: vertical;
      transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
    }
    .board-area::placeholder { color: var(--apple-muted-foreground); }
    .board-area:focus {
      outline: none;
      border-color: var(--apple-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--apple-primary) 22%, transparent);
    }
    .board-btn {
      flex: none;
      padding: 8px 18px;
      border: none;
      border-radius: 999px;
      background: var(--primary);
      color: var(--primary-foreground);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), opacity 160ms var(--ease-out);
    }
    .board-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .board-btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
    .board-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
    @media (prefers-reduced-motion: reduce) {
      .board-btn, .board-area { transition: none; }
      .board-btn:hover { transform: none; }
    }
    .board-compose-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
    .board-hint { flex: 1; font-size: 12px; color: var(--apple-muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .board-count { flex: none; font-size: 11px; color: var(--apple-muted-foreground); font-variant-numeric: tabular-nums; }
    .board-list { margin-top: 14px; }
    /* 信箱化（2026-09-17）：每条留言 = 一封信，卡片化；信纸/邮戳/邮票/展信动画全在末段「留言板信箱」段 */
    .board-item { display: flex; gap: 12px; padding: 14px 16px; }
    .board-avatar { position: relative; 
      width: 38px; height: 38px; border-radius: 50%; flex: none;
      background: var(--apple-primary); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 700;
    }
    .board-item.is-admin .board-avatar { background: linear-gradient(135deg, #c99416, #e9b949); }
    .board-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .board-body { flex: 1; min-width: 0; }
    .board-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .board-name { font-size: 13px; font-weight: 700; }
    .board-lv {
      flex: none; font-size: 10px; font-weight: 700; line-height: 15px;
      color: var(--apple-primary); border: 1px solid currentColor;
      border-radius: 999px; padding: 0 7px; white-space: nowrap;
    }
    .board-admin-badge {
      flex: none; font-size: 10px; font-weight: 700; line-height: 15px;
      color: #fff; background: linear-gradient(135deg, #c99416, #e9b949);
      border-radius: 999px; padding: 0 7px;
    }
    /* 普通管理员徽标（2026-09-30）：绿色系，与站长金标/路人灰标区分 */
    .board-mod-badge {
      flex: none; font-size: 10px; font-weight: 700; line-height: 15px;
      color: #fff; background: linear-gradient(135deg, #3f7f5f, #66a583);
      border-radius: 999px; padding: 0 7px;
    }
    .board-del {
      border: none; background: none; cursor: pointer; flex: none;
      color: var(--apple-muted-foreground); font-size: 12px; padding: 2px 4px;
    }
    .board-del:hover { color: #e5484d; }
    .board-content { font-size: 14px; line-height: 1.65; margin-top: 5px; white-space: pre-wrap; word-break: break-word; }

    /* 更新日志时间轴（docViewer 特例渲染） */
    .cl-timeline { position: relative; padding-left: 22px; }
    .cl-timeline::before {
      content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
      width: 2px; background: var(--apple-border); border-radius: 2px;
    }
    .cl-day { position: relative; margin-bottom: 26px; }
    .cl-day::before {
      content: ""; position: absolute; left: -22px; top: 7px;
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--apple-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--apple-primary) 22%, transparent);
    }
    .cl-date { font-size: 16px; font-weight: 700; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
    .cl-entry {
      border: 1px solid var(--apple-border); border-radius: 12px;
      padding: 12px 14px; margin-bottom: 10px;
      background: color-mix(in srgb, var(--apple-background) 60%, transparent);
    }
    .cl-entry-title { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; }
    .cl-entry-body { font-size: 13px; line-height: 1.7; color: var(--apple-foreground); }
    .cl-entry-body p { margin: 0 0 6px; }
    .cl-entry-body p:last-child { margin-bottom: 0; }
    .cl-entry-body code {
      font-family: ui-monospace, monospace; font-size: 12px;
      background: var(--apple-secondary, rgba(128, 128, 128, 0.14));
      border-radius: 4px; padding: 1px 5px;
    }
    .cl-clamp { max-height: 120px; overflow: hidden; position: relative; }
    .cl-clamp::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
      background: linear-gradient(transparent, var(--apple-background));
    }
    .cl-toggle { border: none; background: none; color: var(--apple-primary); cursor: pointer; font-size: 12px; padding: 2px 0; font-family: inherit; }
    .cl-toggle:hover { text-decoration: underline; }
    .cl-back { margin-bottom: 18px; }

    /* 全站搜索面板（Ctrl+K / 顶栏放大镜）：独立浮层，z-index 350——高于灯箱 200 低于登录卡 400，
       不参与全屏层互斥（打开时盖在当前界面上，关闭回到原界面） */
    .cmdk { position: fixed; inset: 0; z-index: 350; }

    .cmdk-backdrop {
      position: absolute; inset: 0;
      background: color-mix(in srgb, var(--apple-background) 40%, transparent);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      transition: opacity 240ms ease;
    }

    .cmdk.show .cmdk-backdrop { opacity: 1; }

    .cmdk-panel {
      position: absolute; left: 50%; top: 13vh;
      /* 收回态（基准）：缩小下沉行程放大到 scale(0.9)/22px，让收回全程有可见位移；
         过渡用 ease-out——运动从一开始就明显（原 ease-in 起步慢，透明度先掉完显得瞬间消失，踩过已修）。
         淡出拉长到 240ms 与位移同步，玻璃面板半透明、淡出太快也会加重"直接消失"感 */
      transform: translate(-50%, 22px) scale(0.9);
      width: min(580px, calc(100vw - 32px));
      max-height: 70vh;
      display: flex; flex-direction: column;
      background: color-mix(in srgb, var(--apple-background) 92%, transparent);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--apple-border);
      border-radius: 18px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
      overflow: hidden;
      opacity: 0;
      transition: opacity 240ms ease, transform 260ms var(--ease-out, ease);
      will-change: transform, opacity;
    }

    /* 弹出：弹簧曲线（y>1 带轻微过冲，scale 冲过 1 再落回），2026-09-08 用户要求「弹出收回动画」 */
    .cmdk.show .cmdk-panel {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
      transition: opacity 170ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @media (prefers-reduced-motion: reduce) {
      .cmdk-panel, .cmdk.show .cmdk-panel { transition: none; }
    }

    .cmdk-input-row {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--apple-border);
      color: var(--apple-muted-foreground);
      flex: none;
    }

    .cmdk-input-row input {
      flex: 1; min-width: 0;
      border: none; outline: none; background: none;
      color: var(--apple-foreground);
      font-size: 15px; font-family: inherit;
    }

    .cmdk-esc {
      flex: none; font-size: 11px; color: var(--apple-muted-foreground);
      border: 1px solid var(--apple-border); border-radius: 6px; padding: 2px 6px;
    }

    .cmdk-results { overflow-y: auto; overscroll-behavior: contain; padding: 8px; flex: 1; min-height: 0; }

    .cmdk-group {
      font-size: 11px; font-weight: 700; letter-spacing: .08em;
      color: var(--apple-muted-foreground);
      margin: 10px 8px 4px;
    }

    .cmdk-item {
      display: flex; align-items: center; gap: 10px; width: 100%;
      border: none; background: none; font-family: inherit; text-align: left;
      padding: 9px 10px; border-radius: 10px; cursor: pointer;
      color: var(--apple-foreground); font-size: 14px;
    }

    .cmdk-item .cmdk-tag {
      flex: none; font-size: 11px; font-weight: 600;
      color: var(--apple-muted-foreground);
      border: 1px solid var(--apple-border); border-radius: 6px;
      padding: 1px 6px; min-width: 36px; text-align: center;
    }

    .cmdk-item .cmdk-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cmdk-item .cmdk-sub { flex: none; font-size: 11px; color: var(--apple-muted-foreground); }
    .cmdk-item mark { background: none; color: var(--apple-primary); font-weight: 700; padding: 0; }
    .cmdk-item.active { background: var(--apple-chip, var(--apple-secondary, rgba(128, 128, 128, 0.14))); }
    .cmdk-item:disabled { opacity: .45; cursor: default; }
    .cmdk-empty { padding: 28px 0 32px; text-align: center; font-size: 13px; color: var(--apple-muted-foreground); }

    .cmdk-foot {
      flex: none; display: flex; gap: 14px;
      padding: 8px 14px;
      border-top: 1px solid var(--apple-border);
      font-size: 11px; color: var(--apple-muted-foreground);
    }

    /* 搜索跳转工具卡时的高亮脉冲 */
    @keyframes cmdkFlash {
      0%, 55% { outline: 2px solid var(--apple-primary); outline-offset: 3px; }
      100% { outline: 2px solid transparent; outline-offset: 3px; }
    }

    .cmdk-flash { animation: cmdkFlash 1.5s ease; }

    @media (prefers-reduced-motion: reduce) {
      .cmdk-backdrop, .cmdk-panel { transition: none; }
      .cmdk-flash { animation: none; }
    }

    /* ===== Main Content ===== */
    .page-main {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 6vw;
    }

    /* ===== Hero / Clock Section ===== */
    .hero-section {
      min-height: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 72px 0 60px; /* 顶部留白须容得下悬浮胶囊（fixed 不占流，胶囊底 ~55px） */
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 600ms var(--ease-out) 100ms forwards;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ===== 科幻终端时钟（黑白） ===== */
    .clock-hud {
      position: relative;
      display: inline-block;
      padding: 22px 34px 20px;
      margin-left: -8px;
      overflow: hidden;
    }

    /* Hero 左右布局：时钟在左，视频轮播卡片在右 */
    .hero-row {
      display: flex;
      align-items: stretch;
      gap: 28px;
    }

    .hero-row .clock-hud {
      flex: 1 1 auto;
    }

    .video-box {
      flex: 0 0 320px;
      min-height: 200px;
      border: 1px solid var(--apple-border);
      border-radius: var(--radius);
      overflow: hidden;
      background: #000;
      box-shadow: var(--shadow-sm);
    }

    .video-box video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 窄屏：视频换到时钟下方占满宽度 */
    @media (max-width: 900px) {
      .hero-row {
        flex-direction: column;
        gap: 20px;
      }

      .video-box {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 0;
      }
    }

    .hud-corner {
      position: absolute;
      width: 14px;
      height: 14px;
      border: 1px solid color-mix(in srgb, var(--apple-foreground) 55%, transparent);
      pointer-events: none;
    }

    .hud-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
    .hud-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
    .hud-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
    .hud-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

    .hud-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--apple-muted-foreground);
      margin-bottom: 8px;
    }

    .clock-display {
      position: relative;
      display: flex;
      align-items: baseline;
      font-family: var(--font-mono);
      color: var(--apple-foreground);
      text-shadow:
        0 0 16px color-mix(in srgb, currentColor 30%, transparent),
        0 0 56px color-mix(in srgb, currentColor 14%, transparent);
      transition: color 300ms var(--ease-out);
    }

    .clock-seg,
    .clock-colon {
      font-size: clamp(3rem, 9vw, 6rem);
      font-weight: 600;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
    }

    .clock-colon {
      padding: 0 0.1em;
      font-weight: 400;
      animation: colonBreath 2s ease-in-out infinite;
    }

    @keyframes colonBreath {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.2; }
    }

    /* 秒位跳动脉冲 */
    .clock-seg.tick {
      animation: segTick 420ms var(--ease-out);
    }

    @keyframes segTick {
      0% { transform: translateY(-0.1em); opacity: 0.35; filter: blur(3px); }
      100% { transform: translateY(0); opacity: 1; filter: blur(0); }
    }

    /* 毫秒滚数 */
    .clock-ms {
      font-size: clamp(1rem, 2.4vw, 1.5rem);
      font-weight: 400;
      color: var(--apple-muted-foreground);
      margin-left: 10px;
      font-variant-numeric: tabular-nums;
      min-width: 3.4em;
    }

    /* 扫描线：周期性从上到下扫过时钟区域 */
    .scanline {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--apple-foreground) 30%, transparent), transparent);
      animation: scan 5s linear infinite;
      pointer-events: none;
    }

    @keyframes scan {
      0% { top: 0; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    .clock-date {
      font-size: clamp(1rem, 2vw, 1.25rem);
      font-weight: 500;
      color: var(--apple-muted-foreground);
      font-variant-numeric: tabular-nums;
    }

    /* 时钟上方的时段问候 */
    .hero-greeting {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--apple-muted-foreground);
      margin-bottom: 10px;
    }

    /* 每日一言：天气胶囊同款样式（浅色胶囊底），按内容自适应宽度；多条时打字机轮播 */
    .hero-quote {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: min(860px, 100%); /* 上限同时受容器约束，长句绝不把页面撑出横向溢出（fixed 弹层会被拖动） */
      align-self: flex-start; /* hero-section 是纵向 flex，防止被拉满整行 */
      margin-top: 14px;
      padding: 7px 14px;
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      background: var(--apple-card);
      color: var(--apple-muted-foreground);
      font-size: 13px;
      line-height: 1.6;
      /* 首帧占位策略：胶囊常驻文档流（markup 不再 hidden，靠 opacity 渐现），
         min-height 按单行文本撑足——空胶囊与有字胶囊同高，一言到达时零布局位移 */
      min-height: calc(1.6em + 16px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0;
      transform: translateY(4px);
      /* min-height 过渡：一言打字前按完整文本锁最终高度（common.js hqTypeText），轮播切换的
         高度差平滑缩放，打字期间行数增长不再顶得下面的歌词条上下抽搐（2026-09-07 用户实报） */
      transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out),
        min-height 260ms var(--ease-out);
    }

    .hero-quote.loaded {
      opacity: 1;
      transform: translateY(0);
    }

    .hero-quote .hq-cursor {
      display: none;
      width: 2px;
      height: 1.05em;
      margin-left: 2px;
      background: currentColor;
      vertical-align: text-bottom;
      animation: lyricBlink 900ms steps(1) infinite;
    }

    .hero-quote.typing .hq-cursor { display: inline-block; }

    /* 窄屏：一言过长换行成多行（手机上 nowrap 会撑出横向溢出，登录弹窗等 fixed 层跟着左右位移） */
    @media (max-width: 640px) {
      .hero-quote {
        white-space: normal;
        border-radius: 18px;
      }
    }

    /* ===== 歌词横条（hero 末尾，播放时同步显示当前句，打字机逐字打出） ===== */
    .lyric-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      max-width: 860px;
      margin-top: 18px;
      padding: 18px 22px;
      border-radius: 18px;
      background: rgba(24, 24, 28, 0.78);
      color: #f5f5f7;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
      overflow: hidden;
    }

    .lyric-bar.show {
      opacity: 1;
      transform: translateY(0);
    }

    .lyric-dots {
      flex: none;
      display: inline-flex;
      gap: 5px;
      opacity: 0;
      transition: opacity 400ms var(--ease-out);
    }

    .lyric-bar.waiting .lyric-dots { opacity: 0.55; }

    .lyric-dots i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    .lyric-line {
      flex: 1;
      min-width: 0;
      text-align: center;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 0.02em;
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lyric-cursor {
      display: none;
      width: 2px;
      height: 1.05em;
      margin-left: 2px;
      background: currentColor;
      vertical-align: text-bottom;
      animation: lyricBlink 900ms steps(1) infinite;
    }

    .lyric-bar.typing .lyric-cursor { display: inline-block; }

    @keyframes lyricBlink { 50% { opacity: 0; } }

    /* 歌词条右侧律动条：与底部音乐播放器（.mini-eq）同款，播放=主题色跳动；暂停/待机=灰色静止 */
    .lyric-eq {
      flex: none;
      display: inline-flex;
      align-items: flex-end;
      gap: 3px;
      height: 18px;
      padding-bottom: 1px;
    }

    .lyric-eq i {
      width: 3.5px;
      border-radius: 2px;
      background: currentColor;
      opacity: 0.55;
      transform-origin: bottom;
      /* 与 .mini-eq 同款：动画常驻、play-state 控制启停，暂停冻结当前姿态不弹回；
         正 delay 让待机态停在基础高度，颜色/透明度走过渡淡出 */
      transition: background-color 300ms var(--ease-out), opacity 300ms var(--ease-out);
      animation: lyricEq 0.9s ease-in-out infinite;
      animation-play-state: paused;
    }

    .lyric-eq i:nth-child(1) { height: 55%; animation-delay: 0.3s; }
    .lyric-eq i:nth-child(2) { height: 100%; animation-delay: 0.15s; }
    .lyric-eq i:nth-child(3) { height: 75%; animation-delay: 0.45s; }

    .lyric-bar.playing .lyric-eq i {
      background: var(--apple-primary);
      opacity: 1;
      animation-play-state: running;
    }

    @keyframes lyricEq {
      0%, 100% { transform: scaleY(0.3); }
      50% { transform: scaleY(1); }
    }

    /* 歌词条占位文案（歌名/待机提示）样式弱化 */
    .lyric-bar.placeholder .lyric-line {
      font-weight: 500;
      opacity: 0.75;
      font-size: 15px;
    }

    @media (max-width: 640px) {
      .lyric-bar { padding: 14px 16px; gap: 10px; }
      .lyric-line { font-size: 14.5px; }
      .lyric-bar.placeholder .lyric-line { font-size: 13.5px; }
      /* 左右装饰都隐藏：只藏右侧律动条的话，左侧待机点（opacity:0 但仍占位）会把居中歌词顶向右偏 */
      .lyric-dots, .lyric-eq { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .lyric-cursor { animation: none; }
      /* 减少动态效果：律动条不跳动，静止在基础高度 */
      .mini-eq i, .lyric-eq i { animation: none; }
      /* 系统开了"减少动态效果"：弹窗直接显隐，不做缩放回弹 */
      .sched-editor-panel,
      .sched-editor-overlay.show .sched-editor-panel {
        transform: none;
        transition: opacity 120ms var(--ease-out);
      }
    }

    /* ===== 天气胶囊（首页日期下方，点击换城市） ===== */
    .weather-chip {
      display: inline-flex;
      align-items: center;
      align-self: flex-start; /* hero-section 是纵向 flex，防止被拉满整行 */
      gap: 8px;
      margin-top: 14px;
      padding: 7px 14px;
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      background: var(--apple-card);
      color: var(--apple-muted-foreground);
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out),
        border-color 180ms var(--ease-out), color 180ms var(--ease-out);
    }

    .weather-chip.loaded {
      opacity: 1;
      transform: translateY(0);
    }

    .weather-chip:hover {
      border-color: var(--apple-primary);
      color: var(--apple-foreground);
    }

    .weather-icon { font-size: 16px; line-height: 1; }

    .weather-picker {
      position: fixed;
      inset: 0;
      z-index: 250; /* 高于相册/主页(150)、灯箱(200)，低于登录卡片(400) */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      visibility: hidden;
      transition: opacity 200ms var(--ease-out), visibility 200ms;
    }

    .weather-picker.show {
      opacity: 1;
      visibility: visible;
    }

    .weather-picker-panel {
      width: min(360px, 92vw);
      background: var(--apple-card);
      color: var(--apple-card-foreground);
      border: 1px solid var(--apple-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      padding: 22px 20px 16px;
      transform: translateY(12px) scale(0.97);
      transition: transform 250ms var(--ease-out);
    }

    .weather-picker.show .weather-picker-panel { transform: none; }

    .weather-picker-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .weather-results {
      list-style: none;
      margin: 8px 0 4px;
      padding: 0;
      max-height: 200px;
      overflow-y: auto;
    }

    .weather-results button {
      display: flex;
      align-items: baseline;
      gap: 8px;
      width: 100%;
      padding: 9px 10px;
      border: none;
      border-radius: 10px;
      background: none;
      color: var(--apple-foreground);
      font-size: 13px;
      text-align: left;
      cursor: pointer;
      transition: background-color 150ms var(--ease-out);
    }

    .weather-results button:hover {
      background: var(--apple-chip, var(--apple-secondary, rgba(128, 128, 128, 0.14)));
    }

    .weather-results .wr-region {
      font-size: 12px;
      color: var(--apple-muted-foreground);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .weather-picker-foot {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }

    .weather-picker-foot .appear-btn { flex: 1; }

    /* ===== 文档区 ===== */
    .docs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 12px;
      margin-top: 4px;
    }

    .doc-card {
      text-align: left;
      border: 1px solid var(--apple-border);
      border-radius: 14px;
      background: color-mix(in srgb, var(--apple-background) 55%, transparent);
      color: var(--apple-foreground);
      padding: 14px;
      cursor: pointer;
      transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
    }

    .doc-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--apple-primary);
    }

    .doc-card-title { font-size: 14px; font-weight: 700; }
    .doc-card-desc { font-size: 12px; color: var(--apple-muted-foreground); margin-top: 6px; line-height: 1.6; }
    .doc-card-meta { font-size: 11px; color: var(--apple-muted-foreground); margin-top: 10px; opacity: 0.8; }

    /* 文档阅读层（结构沿用相册/个人主页的全屏模式）；z 高于文档界面，阅读时文档界面垫底 */
    .doc-viewer {
      position: fixed;
      top: 52px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 175;
      display: flex;
      flex-direction: column;
      background: color-mix(in srgb, var(--apple-background) 88%, transparent);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 250ms var(--ease-out), visibility 250ms var(--ease-out);
    }

    .doc-viewer.show { opacity: 1; visibility: visible; }
    .doc-viewer.show .album-bar { transform: none; opacity: 1; }

    .doc-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 24px 6vw 48px;
      transform: translateY(28px);
      opacity: 0;
      transition: transform 400ms var(--ease-out) 60ms, opacity 300ms var(--ease-out) 60ms;
    }

    .doc-viewer.show .doc-scroll { transform: none; opacity: 1; }

    .doc-article {
      max-width: 760px;
      margin: 0 auto;
      padding: 26px 28px;
      font-size: 14px;
      line-height: 1.9;
    }

    .doc-article h1, .doc-article h2, .doc-article h3 { margin: 22px 0 10px; line-height: 1.4; }
    .doc-article h1 { font-size: 22px; }
    .doc-article h2 { font-size: 18px; }
    .doc-article h3 { font-size: 15px; }
    .doc-article h1:first-child { margin-top: 0; }
    .doc-article p { margin: 8px 0; }
    .doc-article ul, .doc-article ol { padding-left: 22px; margin: 8px 0; }
    .doc-article li { margin: 3px 0; }
    .doc-article blockquote {
      border-left: 3px solid var(--apple-primary);
      color: var(--apple-muted-foreground);
      padding: 2px 14px;
      margin: 10px 0;
    }
    .doc-article code {
      font-family: ui-monospace, monospace;
      font-size: 12px;
      background: var(--apple-chip, rgba(128, 128, 128, 0.14));
      border-radius: 5px;
      padding: 1px 6px;
    }
    .doc-article pre {
      background: var(--apple-chip, rgba(128, 128, 128, 0.14));
      border-radius: 10px;
      padding: 12px 14px;
      overflow-x: auto;
      margin: 10px 0;
    }
    .doc-article pre code { background: none; padding: 0; }
    .doc-article a { color: var(--apple-primary); }
    .doc-article hr { border: none; border-top: 1px solid var(--apple-border); margin: 18px 0; }
    .doc-article img { max-width: 100%; border-radius: 10px; }

    /* ===== AI 界面（聊天骨架，对话功能待接入）===== */
    /* 工具合集/文档界面复用同一套全屏层样式 */
    .ai-view, .docs-view {
      position: fixed;
      top: 52px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 150;
      display: flex;
      flex-direction: column;
      background: color-mix(in srgb, var(--apple-background) 88%, transparent);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 250ms var(--ease-out), visibility 250ms var(--ease-out);
    }

    .ai-view.show, .docs-view.show { opacity: 1; visibility: visible; }
    /* 切换界面时被新层覆盖的旧层：保持不透明垫底 + 禁点击，等新层完全不透明后再真正关闭（主页不闪） */
    .fs-covered { pointer-events: none; }
    .ai-view.show .album-bar, .tools-view.show .album-bar, .docs-view.show .album-bar { transform: none; opacity: 1; }

    .tools-scroll, .docs-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 24px 6vw 48px;
      transform: translateY(28px);
      opacity: 0;
      transition: transform 400ms var(--ease-out) 60ms, opacity 300ms var(--ease-out) 60ms;
    }

    .tools-view.show .tools-scroll, .docs-view.show .docs-scroll { transform: none; opacity: 1; }

    .tools-view .tool-block { max-width: 940px; margin: 0 auto 18px; }
    .tools-view .apple-card { width: 100%; }
    .docs-view .tool-block { max-width: 940px; margin: 0 auto; }

    /* AI 布局：左侧历史栏（默认收起成抽屉，点顶栏按钮唤出）+ 右侧聊天区 */
    .ai-body {
      flex: 1;
      display: flex;
      min-height: 0;
    }

    .ai-history {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 20;
      width: min(300px, 84vw);
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: 16px 14px 14px 18px;
      background: var(--apple-background);
      transform: translateX(-100%);
      transition: transform 250ms var(--ease-out);
      box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12);
      border-radius: 0 18px 18px 0;
    }

    .ai-history.open { transform: none; }

    /* 抽屉遮罩：与抽屉同开合同步淡入淡出，点击关闭 */
    .ai-history-scrim {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 19;
      background: rgba(0, 0, 0, 0.32);
      opacity: 0;
      pointer-events: none;
      transition: opacity 250ms var(--ease-out);
    }

    .ai-history-scrim.show { opacity: 1; pointer-events: auto; }

    .ai-history-new {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: none;
      padding: 9px 12px;
      border: none;
      border-radius: 999px;
      background: var(--apple-primary);
      color: #ffffff;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: filter 150ms var(--ease-out), transform 150ms var(--ease-out);
    }

    .ai-history-new:hover { filter: brightness(1.08); }
    .ai-history-new:active { transform: scale(0.97); }

    .ai-history-title {
      flex: none;
      margin: 16px 2px 6px;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--apple-muted-foreground);
    }

    .ai-history-list {
      flex: 1;
      overflow-y: auto;
      scrollbar-width: none; /* 隐藏滚动条（偏好：侧栏不露滚动条） */
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding-right: 4px;
    }

    .ai-history-list::-webkit-scrollbar { display: none; }

    .ai-history-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      border: none;
      border-radius: 12px;
      background: none;
      color: var(--apple-muted-foreground);
      text-align: left;
      cursor: pointer;
      transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
    }

    .ai-history-item:hover { background: var(--apple-secondary, rgba(128, 128, 128, 0.12)); color: var(--apple-foreground); }

    .ai-history-item.active {
      background: color-mix(in srgb, var(--apple-primary) 12%, transparent);
      color: var(--apple-foreground);
    }

    .ai-history-item.active .hi-title {
      font-weight: 600;
      color: var(--apple-primary);
    }

    .ai-history-item .hi-main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .ai-history-item .hi-title {
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ai-history-item .hi-meta {
      font-size: 11px;
      color: var(--apple-muted-foreground);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ai-history-item .hi-del {
      flex: none;
      display: none;
      width: 24px;
      height: 24px;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 7px;
      background: none;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
    }

    /* 桌面悬停浮现；触屏没有 hover，常显否则删不掉（后台同款约定） */
    .ai-history-item:hover .hi-del { display: inline-flex; }

    @media (hover: none) {
      .ai-history-item .hi-del { display: inline-flex; }
    }

    .ai-history-item .hi-del:hover { color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }

    /* 两段式确认武装态：红底白图标，非悬停也保持可见 */
    .ai-history-item .hi-del.armed {
      display: inline-flex;
      background: #e5484d;
      color: #ffffff;
    }

    .ai-history-empty {
      padding: 28px 10px;
      text-align: center;
      color: var(--apple-muted-foreground);
    }

    .ai-history-empty svg { opacity: 0.5; margin-bottom: 8px; }

    .ai-history-empty .he-main { font-size: 13px; margin: 0 0 4px; }

    .ai-history-empty .he-sub { font-size: 12px; opacity: 0.75; margin: 0; }

    .ai-history-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin-left: -8px;
      border: none;
      border-radius: 8px;
      background: none;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
    }

    .ai-history-toggle:hover { color: var(--apple-foreground); background: var(--apple-secondary, rgba(128, 128, 128, 0.12)); }

    /* 抽屉开着时唤出按钮高亮提示状态 */
    .ai-history-toggle.open { color: var(--apple-primary); }

    @media (prefers-reduced-motion: reduce) {
      .ai-history,
      .ai-history-scrim { transition: none; }
    }

    .ai-chat {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      max-width: 760px;
      width: 100%;
      margin: 0 auto;
      padding: 20px 6vw 22px;
      transform: translateY(28px);
      opacity: 0;
      transition: transform 400ms var(--ease-out) 60ms, opacity 300ms var(--ease-out) 60ms;
    }

    .ai-view.show .ai-chat { transform: none; opacity: 1; }

    .ai-messages {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 6px 2px 14px;
    }

    .ai-msg {
      max-width: 78%;
      padding: 10px 14px;
      border-radius: 16px;
      font-size: 14px;
      line-height: 1.7;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .ai-msg.bot {
      align-self: flex-start;
      background: var(--apple-card);
      border: 1px solid var(--apple-border);
      border-bottom-left-radius: 6px;
      color: var(--apple-foreground);
    }

    .ai-msg.user {
      align-self: flex-end;
      background: var(--apple-primary);
      color: #fff;
      border-bottom-right-radius: 6px;
    }

    .ai-msg.bot.pending { opacity: 0.65; }

    /* 回复气泡下的 token 用量小字 */
    .ai-usage {
      margin-top: 4px;
      font-size: 10px;
      opacity: 0.5;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    /* 顶栏：新对话 + 关闭按钮组 */
    .ai-bar-actions { display: flex; align-items: center; gap: 8px; }

    /* 输入条：上下两行（输入 / 工具行），仿桌面客户端输入框 */
    .ai-input-bar {
      display: flex;
      flex-direction: column;
      gap: 6px;
      border: 1px solid var(--apple-border);
      border-radius: 20px;
      background: var(--apple-card);
      padding: 14px 10px 8px 16px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
    }

    /* 附件 chips 行 */
    .ai-attach-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 2px 4px 0;
    }

    .ai-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 240px;
      padding: 4px 6px 4px 10px;
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      background: color-mix(in srgb, var(--apple-foreground) 5%, transparent);
      font-size: 12px;
      color: var(--apple-foreground);
    }

    .ai-chip .chip-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ai-chip .chip-tag {
      flex: none;
      font-size: 10px;
      color: var(--apple-primary);
      background: color-mix(in srgb, var(--apple-primary) 12%, transparent);
      border-radius: 6px;
      padding: 1px 5px;
    }

    .ai-chip .chip-x {
      flex: none;
      width: 18px;
      height: 18px;
      border: none;
      border-radius: 50%;
      background: none;
      color: var(--apple-foreground);
      opacity: 0.55;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      line-height: 1;
      padding: 0;
    }

    .ai-chip .chip-x:hover { opacity: 1; background: color-mix(in srgb, var(--apple-foreground) 10%, transparent); }

    .ai-input-bar input {
      width: 100%;
      border: none;
      outline: none;
      background: none;
      color: var(--apple-foreground);
      font-size: 14px;
      font-family: inherit;
      padding: 0 4px;
    }

    .ai-input-bar input::placeholder { color: var(--apple-muted-foreground, var(--apple-foreground)); opacity: 0.45; }

    /* 工具行：左 + 按钮，右侧 模型切换 + 发送 */
    .ai-input-tools {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 0 0 2px;
    }

    .ai-tools-spacer { flex: 1; }

    .ai-tool-icon {
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 9px;
      background: none;
      color: var(--apple-foreground);
      opacity: 0.72;
      cursor: pointer;
      transition: background-color 150ms var(--ease-out), opacity 150ms;
    }

    .ai-tool-icon:hover { background: color-mix(in srgb, var(--apple-foreground) 7%, transparent); opacity: 1; }

    .ai-send-btn {
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 12px;
      background: var(--apple-foreground);
      color: var(--apple-background);
      cursor: pointer;
      transition: transform 150ms var(--ease-out), opacity 150ms;
    }

    .ai-send-btn:hover { transform: scale(1.05); opacity: 0.88; }
    .ai-send-btn:disabled { opacity: 0.35; cursor: default; transform: none; }

    /* 模型切换：纯文字 + ⌄，点击向上弹菜单 */
    .ai-model-switch { position: relative; }

    .ai-model-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: none;
      background: none;
      padding: 6px 8px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      color: var(--apple-foreground);
      opacity: 0.82;
      cursor: pointer;
      max-width: 280px;
      transition: background-color 150ms var(--ease-out), opacity 150ms;
    }

    .ai-model-btn:hover { background: color-mix(in srgb, var(--apple-foreground) 7%, transparent); opacity: 1; }

    .ai-model-btn #aiModelLabel {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ai-model-btn .chev { flex: none; opacity: 0.45; }

    /* 模型菜单：供应商分组 + 名称 + 上游模型徽标 + ✓，底部"管理模型" */
    .ai-model-menu {
      position: absolute;
      left: 0;
      bottom: calc(100% + 12px);
      min-width: 264px;
      max-width: 340px;
      background: var(--apple-card);
      border: 1px solid var(--apple-border);
      border-radius: 16px;
      box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
      padding: 6px;
      z-index: 30;
    }

    /* 弹出/收回动画（2026-09-12）：贴输入条向上弹——transform-origin 取菜单左下（贴锚点），
       弹出 ease-out 上浮展开、收回 .closing 缩回下沉（common.js 挂类后延时真隐藏，hidden 语义不变）；
       思考强度菜单复用同类名自动同款 */
    @keyframes aiMenuIn {
      from { opacity: 0; transform: translateY(8px) scale(0.96); }
    }

    @keyframes aiMenuOut {
      to { opacity: 0; transform: translateY(8px) scale(0.96); }
    }

    .ai-model-menu:not([hidden]) {
      transform-origin: 14px 100%;
      animation: aiMenuIn 200ms var(--ease-out, ease) backwards;
    }

    /* 收回规则写在弹出之后（同特异性靠后者胜）；forwards 定格在消失帧等 JS 摘除，pointer-events 挡住收回途中误点 */
    .ai-model-menu.closing {
      animation: aiMenuOut 160ms var(--ease-out, ease) forwards;
      pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .ai-model-menu:not([hidden]), .ai-model-menu.closing { animation: none; }
    }

    .ai-model-group {
      font-size: 11px;
      color: var(--apple-muted-foreground, var(--apple-foreground));
      opacity: 0.7;
      padding: 8px 10px 4px;
    }

    .ai-model-item {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 9px 10px;
      border: none;
      border-radius: 10px;
      background: none;
      font-size: 13.5px;
      font-family: inherit;
      color: var(--apple-foreground);
      text-align: left;
      cursor: pointer;
    }

    .ai-model-item:hover { background: color-mix(in srgb, var(--apple-foreground) 7%, transparent); }

    .ai-model-item .tag {
      flex: none;
      font-size: 10px;
      line-height: 1.4;
      color: var(--apple-muted-foreground, var(--apple-foreground));
      opacity: 0.75;
      background: color-mix(in srgb, var(--apple-foreground) 6%, transparent);
      border-radius: 6px;
      padding: 1px 6px;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }    .ai-model-item .chk {
      flex: none;
      margin-left: auto;
      color: var(--apple-primary);
      font-weight: 700;
      visibility: hidden;
    }

    .ai-model-item.active .chk, .ai-model-item[aria-selected='true'] .chk { visibility: visible; }

    .ai-model-foot {
      border-top: 1px solid var(--apple-border);
      margin-top: 6px;
      padding-top: 6px;
    }

    .ai-model-manage {
      display: flex;
      align-items: center;
      padding: 9px 10px;
      border-radius: 10px;
      font-size: 13.5px;
      font-family: inherit;
      color: var(--apple-foreground);
      text-decoration: none;
    }

    .ai-model-manage:hover { background: color-mix(in srgb, var(--apple-foreground) 7%, transparent); }

    /* AI 回复里的 Markdown（复用文档区渲染器，先转义再解析） */
    .ai-msg.bot p { margin: 0; }
    .ai-msg.bot p + p { margin-top: 8px; }
    .ai-msg.bot ul, .ai-msg.bot ol { margin: 8px 0; padding-left: 20px; }
    .ai-msg.bot li { margin: 2px 0; }
    .ai-msg.bot h1, .ai-msg.bot h2, .ai-msg.bot h3 { margin: 10px 0 6px; font-size: 15px; }
    .ai-msg.bot blockquote { margin: 8px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--apple-border); opacity: 0.85; }
    .ai-msg.bot hr { border: none; border-top: 1px solid var(--apple-border); margin: 10px 0; }
    .ai-msg.bot a { color: var(--apple-primary); }
    .ai-msg.bot pre {
      background: color-mix(in srgb, var(--apple-foreground) 7%, transparent);
      border: 1px solid var(--apple-border);
      border-radius: 10px;
      padding: 10px 12px;
      overflow-x: auto;
      margin: 8px 0;
    }
    .ai-msg.bot code { font-family: ui-monospace, SFMono-Regular, Consolas, 'Courier New', monospace; font-size: 13px; }
    .ai-msg.bot p code, .ai-msg.bot li code {
      background: color-mix(in srgb, var(--apple-foreground) 8%, transparent);
      border-radius: 5px;
      padding: 1px 5px;
    }
    .ai-msg.bot pre code { background: none; padding: 0; }

    /* 窗口最大化/宽屏时，顶部本地时间靠左对齐（与左上角 logo 的 6vw 左边距一致，不会被遮挡） */
    @media (min-width: 1200px) {
      :root {
        --main-w: min(1560px, 94vw);
      }

      .page-main {
        max-width: var(--main-w);
      }

      .hero-section {
        padding-top: 80px;
      }

      .content-section {
        padding: 100px 0;
      }
    }

    /* ===== Section Styles ===== */
    .content-section {
      padding: 80px 0;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
    }

    .content-section.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ===== 外观设置抽屉：默认靠右隐藏，点击箭头弹出 ===== */
    .appear-dock {
      position: fixed;
      bottom: 16px;
      right: 0;
      /* 高于全屏界面(150)：工具/文档/AI/个人主页等页面里箭头也可见可点；
         低于灯箱(200)和登录卡片(400)，大图预览时不抢层 */
      z-index: 160;
      transition: transform 350ms var(--ease-out);
    }

    /* 收起时整个抽屉（含面板）右移出屏，箭头恰好贴住屏幕右下角 */
    body:not(.appear-open) .appear-dock {
      transform: translateX(100%);
    }

    /* 用 .apple-card.appear-panel 提高特异性，确保直角覆盖 .apple-card 的 border-radius：
       右侧贴屏、左下接箭头，均为直角，避免衔接处出现圆角缺口 */
    .apple-card.appear-panel {
      width: min(300px, 82vw);
      max-height: calc(100vh - 96px);
      overflow-y: auto;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      box-shadow: var(--shadow-md);
    }

    .apple-card.appear-panel:hover {
      transform: none;
    }

    /* ===== 个人中心下拉菜单：点击顶栏头像展开，右缘/顶缘由 JS 对齐头像按钮（留 8px 间距） ===== */
    .profile-dock {
      position: fixed;
      top: 64px; /* JS 打开时会按头像按钮实际位置覆盖 */
      right: 12px;
      z-index: 160; /* 高于相册界面(150)：相册里也能点头像打开 */
      transition: visibility 220ms;
    }

    body:not(.profile-open) .profile-dock {
      visibility: hidden;
    }

    /* 独立于外观抽屉(appear-panel)的菜单样式：全圆角 + 重投影 + 从头像方向缩放淡入 */
    .apple-card.profile-panel {
      width: min(272px, calc(100vw - 24px));
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.12);
      padding: 16px 12px 10px;
      transform-origin: top right;
      opacity: 0;
      transform: translateY(-8px) scale(0.95);
      pointer-events: none;
      transition: opacity 180ms var(--ease-out), transform 200ms var(--ease-out),
        box-shadow 250ms var(--ease-out), background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
    }

    body.profile-open .apple-card.profile-panel {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    /* 菜单不参与 .apple-card 的悬停抬升（:hover 规则在后面，需显式压回） */
    .apple-card.profile-panel:hover {
      transform: none;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .profile-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 6px;
      margin-bottom: 12px;
    }

    .profile-avatar {
      position: relative;
      width: 64px;
      height: 64px;
      flex: none;
      border-radius: 999px;
      overflow: hidden;
      background: var(--apple-secondary, var(--apple-card));
      border: 1px solid var(--apple-border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      transition: transform 180ms var(--ease-out);
    }

    .profile-avatar:hover { transform: scale(1.05); }

    .profile-avatar-img {
      display: none;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .profile-avatar.has-img .profile-avatar-img { display: block; }

    .profile-avatar-letter {
      font-size: 24px;
      font-weight: 600;
      line-height: 1;
    }

    .profile-avatar.has-img .profile-avatar-letter { display: none; }

    .profile-avatar-mask {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.45);
      color: #fff;
      font-size: 12px;
      letter-spacing: 0.05em;
      opacity: 0;
      transition: opacity 200ms var(--ease-out);
      pointer-events: none;
    }

    .profile-avatar:hover .profile-avatar-mask,
    .profile-avatar:focus-visible .profile-avatar-mask { opacity: 1; }

    .profile-info { min-width: 0; }
    .profile-name {
      font-size: 14px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .profile-status {
      font-size: 12px;
      color: var(--apple-muted-foreground);
      margin-top: 3px;
    }

    .profile-hint {
      font-size: 12px;
      color: var(--apple-muted-foreground);
      line-height: 1.6;
      padding: 0 6px;
      margin-bottom: 10px;
    }

    /* 消息行：空内容时不占位（不留死空白） */
    .profile-msg {
      font-size: 12px;
      color: var(--apple-muted-foreground);
      padding: 0 6px;
      margin-bottom: 6px;
    }
    .profile-msg:empty { display: none; }
    .profile-msg.err { color: #ef4444; }

    .profile-menu {
      border-top: 1px solid var(--apple-border);
      padding-top: 6px;
      display: flex;
      flex-direction: column;
    }

    .profile-menu-sep {
      height: 1px;
      background: var(--apple-border);
      margin: 5px 6px;
    }

    .profile-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px 10px;
      border: none;
      border-radius: 10px;
      background: none;
      color: var(--apple-foreground);
      font-size: 13px;
      text-align: left;
      cursor: pointer;
      transition: background-color 150ms var(--ease-out);
    }

    .profile-menu-item:hover { background: var(--apple-chip, var(--apple-secondary, rgba(128, 128, 128, 0.14))); }
    .profile-menu-item .svg-icon { flex: none; opacity: 0.72; }

    .profile-menu-item.danger { color: #ef4444; }
    .profile-menu-item.danger:hover { background: rgba(239, 68, 68, 0.1); }
    .profile-menu-item.danger .svg-icon { opacity: 0.9; }

    /* 没有头像时隐藏"移除头像"项 */
    .profile-panel:not(.has-avatar) .remove-only { display: none; }

    /* 游客/未登录：隐藏菜单区，只留提示文案 */
    body:not(.profile-member) .profile-menu { display: none; }
    body:not(.profile-member) #profileAvatar { cursor: default; }
    body:not(.profile-member) .profile-avatar-mask { display: none; }
    body:not(.profile-member) .profile-avatar:hover { transform: none; }

    /* ===== 个人主页界面：全屏结构沿用相册（.album-bar/.album-scroll 复用），进入后 Esc/右上角退出 ===== */
    .profile-view {
      position: fixed;
      top: 52px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 150; /* 与相册同级：两者不会同时打开（打开时先收起另一个） */
      display: flex;
      flex-direction: column;
      /* 毛玻璃适度透：不透明度 ~65%、模糊 14px——太高会完全盖住身后内容观感成"独立实心背景"（用户反馈）；
         流星可见性由下方 body:has 规则解决（浮层打开时流星层抬到玻璃之上），这里不必调到极透 */
      background: color-mix(in srgb, var(--apple-background) 65%, transparent);
      backdrop-filter: blur(14px) saturate(1.2);
      -webkit-backdrop-filter: blur(14px) saturate(1.2);
      opacity: 0;
      visibility: hidden;
      transition: opacity 250ms var(--ease-out), visibility 250ms var(--ease-out);
    }

    .profile-view.show {
      opacity: 1;
      visibility: visible;
    }

    /* 标题栏复用相册的 .album-bar（默认透明+上移），进入个人主页后同样要复位显示 */
    .profile-view.show .album-bar {
      transform: none;
      opacity: 1;
    }

    .profile-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 24px 6vw 48px;
      transform: translateY(28px);
      opacity: 0;
      transition: transform 400ms var(--ease-out) 60ms, opacity 300ms var(--ease-out) 60ms;
    }

    .profile-view.show .profile-scroll {
      transform: none;
      opacity: 1;
    }

    .profile-view .apple-card {
      width: 100%;
      max-width: 860px;
      margin: 0 auto 16px;
    }

    .profilev-head {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    /* 大号头像：复用下拉菜单头像的悬停"更换"遮罩逻辑 */
    .profilev-avatar {
      width: 88px;
      height: 88px;
    }

    .profilev-avatar .profile-avatar-letter { font-size: 32px; }

    .profilev-name {
      font-size: 18px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .profilev-sub {
      font-size: 13px;
      color: var(--apple-muted-foreground);
      margin-top: 5px;
    }

    .profilev-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      max-width: 860px;
      margin: 0 auto 16px;
    }

    /* ===== 课表卡（个人主页）===== */
    .sched-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .sched-week-nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sched-mini-btn {
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--apple-border);
      border-radius: 8px;
      background: var(--apple-secondary);
      color: var(--apple-foreground);
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
    }
    .sched-week-label {
      font-size: 13px;
      font-weight: 600;
      min-width: 64px;
      text-align: center;
    }
    .sched-toolbar-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .sched-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--apple-muted-foreground);
      white-space: nowrap;
    }
    .sched-inline-input {
      height: 30px;
      padding: 0 8px;
      font-size: 12px;
      font-family: inherit;
      color: var(--apple-foreground);
      background: var(--apple-secondary);
      border: 1px solid var(--apple-border);
      border-radius: 8px;
      outline: none;
    }
    .sched-time-input { width: 92px; }
    .sched-num-input { width: 60px; }

    /* 周视图：左侧节次号 + 7 天列；课程块按节次跨行 */
    .sched-grid {
      display: grid;
      grid-template-columns: 30px repeat(7, minmax(0, 1fr));
      gap: 3px;
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .sched-head {
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      color: var(--apple-muted-foreground);
      padding: 4px 0 6px;
    }
    .sched-node {
      font-size: 10px;
      color: var(--apple-muted-foreground);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sched-empty-cell {
      border-radius: 8px;
      background: color-mix(in srgb, var(--apple-foreground) 4%, transparent);
      min-height: 46px;
      cursor: copy; /* 提示可点击添加 */
      transition: background-color 120ms var(--ease-out);
    }
    .sched-empty-cell:hover {
      background: color-mix(in srgb, var(--apple-primary) 14%, transparent);
    }
    .sched-empty-cell.drag-on {
      background: color-mix(in srgb, var(--apple-primary) 22%, transparent);
    }
    /* 编辑实时预览块：半透明 + 虚线描边，和正式课程区分 */
    .sched-course.sched-preview {
      opacity: 0.75;
      outline: 2px dashed rgba(255, 255, 255, 0.8);
      outline-offset: -2px;
    }
    .sched-course {
      border-radius: 8px;
      padding: 4px 6px;
      font-size: 11px;
      line-height: 1.35;
      color: #fff;
      overflow: hidden;
      cursor: pointer;
      transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .sched-course:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }
    .sched-course-name {
      font-weight: 600;
      word-break: break-all;
    }
    .sched-course-place { opacity: 0.85; }
    .sched-course-remind { align-self: flex-start; }

    /* 课程编辑弹窗：居中遮罩 + 面板（复用背景选择器的浮层模式） */
    .sched-editor-overlay {
      position: fixed;
      inset: 0;
      z-index: 300; /* 高于全屏层(150/160)，低于登录卡片(400) */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 250ms var(--ease-out), visibility 250ms var(--ease-out);
    }
    .sched-editor-overlay.show {
      opacity: 1;
      visibility: visible;
    }
    .sched-editor-overlay[hidden] {
      display: none;
    }
    /* 弹窗动效：打开时从 92% 弹起并轻微过冲（自定义弹簧曲线），关闭时缩回淡出 */
    .sched-editor-panel {
      width: min(440px, 92vw);
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      background: var(--apple-card);
      color: var(--apple-card-foreground);
      border: 1px solid var(--apple-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      padding: calc(var(--spacing) * 5);
      transform: scale(0.92);
      opacity: 0;
      transition: transform 200ms var(--ease-out), opacity 160ms var(--ease-out);
    }
    .sched-editor-overlay.show .sched-editor-panel {
      /* cubic-bezier 过冲：末段越过 1 再回落，模拟弹簧回弹 */
      transform: scale(1);
      opacity: 1;
      transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms var(--ease-out);
    }
    .sched-editor-title {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      margin-bottom: 14px;
      color: var(--apple-foreground);
    }
    .sched-editor-row {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .sched-remind-row {
      display: flex;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--apple-border);
    }
    .sched-editor-row .profilev-input { flex: 1; min-width: 90px; }
    .sched-editor-actions { margin-top: 16px; }
    .sched-editor-row select.profilev-input { flex: 0 0 auto; }

    /* ===== 胶囊点选控件（课程编辑弹窗 + 提醒设置）===== */
    .sched-field-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--apple-muted-foreground);
      margin: 12px 0 6px;
    }
    .sched-field-label:first-child { margin-top: 0; }
    .sched-field-sub { font-weight: 400; opacity: 0.8; }
    .sched-field-sub-label { margin: 4px 0 6px; }
    .sched-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .sched-pill {
      min-width: 34px;
      height: 30px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12.5px;
      font-family: inherit;
      color: var(--apple-foreground);
      background: var(--apple-secondary);
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      cursor: pointer;
      transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out),
        border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
    }
    .sched-pill:hover {
      border-color: var(--apple-primary);
      color: var(--apple-primary);
    }
    .sched-pill:active { transform: scale(0.94); }
    .sched-pill.on {
      background: var(--apple-primary);
      border-color: var(--apple-primary);
      color: var(--apple-primary-foreground);
    }
    /* 节次胶囊：数字多，收紧一点 */
    .sched-pill-dense .sched-pill {
      min-width: 30px;
      height: 26px;
      padding: 0 8px;
      font-size: 12px;
    }
    .sched-pill-row .sched-inline-input { margin-left: 6px; }

    /* iOS 风格开关（每日早报） */
    .sched-switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      cursor: pointer;
    }
    .sched-switch {
      position: relative;
      flex: none;
      width: 44px;
      height: 26px;
    }
    .sched-switch input {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      cursor: pointer;
    }
    .sched-switch i {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: color-mix(in srgb, var(--apple-foreground) 18%, transparent);
      transition: background-color 220ms var(--ease-out);
      pointer-events: none;
    }
    .sched-switch i::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
      transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); /* 和编辑弹窗同款回弹 */
    }
    .sched-switch input:checked + i {
      background: var(--apple-primary);
    }
    .sched-switch input:checked + i::after {
      transform: translateX(18px);
    }

    /* 提醒设置区：分行布局，早报关闭时时间快选淡出禁用 */
    .sched-remind-block {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--apple-border);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .sched-remind-line {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .sched-remind-dep {
      transition: opacity 220ms var(--ease-out);
    }
    .sched-remind-dep.off {
      opacity: 0.45;
      pointer-events: none;
    }
    .sched-nodetimes { margin-top: 10px; }
    .sched-nodetimes summary {
      font-size: 12px;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      user-select: none;
    }
    /* 作息时间项：标签在上、输入框占满整格，避免窄格里文字+输入框横向溢出 */
    .sched-nodetimes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
      gap: 8px;
      margin-top: 8px;
    }
    .sched-nt-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .sched-nt-item .sched-inline-input { width: 100%; }
    .sched-nodetimes-extra { margin-bottom: 2px; }
    .flex-spacer { flex: 1; }

    /* ===== 课表·列表视图（2026-10-02 双视图重做：列表=看课默认，周视图=编辑工具） =====
       颜色全走语义变量，深浅主题/主题色自动跟随；页面结构 = 页头 + 视图切换行 +
       今日卡 + 筛选行 + 课程卡列表（课程卡不套大卡壳，直接排在页面底色上） */
    .sched-page-head { margin: 0 0 20px; }
    .sched-page-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--apple-primary);
      margin: 0 0 6px;
    }
    .sched-page-title {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin: 0 0 8px;
    }
    .sched-viewbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .sched-viewbar-msg { margin: 0 0 0 auto; }
    .sched-view-switch {
      display: inline-flex;
      gap: 2px;
      padding: 3px;
      background: var(--apple-secondary);
      border: 1px solid var(--apple-border);
      border-radius: 999px;
    }
    .sched-view-btn {
      border: 0;
      background: transparent;
      color: var(--apple-muted-foreground);
      font: inherit;
      font-size: 12.5px;
      font-weight: 600;
      padding: 5px 16px;
      border-radius: 999px;
      cursor: pointer;
      transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
    }
    .sched-view-btn.on {
      background: var(--apple-primary);
      color: var(--apple-primary-foreground);
    }
    /* 今日卡：左边周几+日期，右边当天课程胶囊（正在上的课主题色点亮） */
    .sched-today { margin-bottom: 14px; }
    .sched-today-in {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .sched-today-info { flex: none; }
    .sched-today-dow { font-size: 17px; font-weight: 700; margin: 0; }
    .sched-today-date {
      font-size: 12px;
      color: var(--apple-muted-foreground);
      margin: 2px 0 0;
      font-variant-numeric: tabular-nums;
    }
    .sched-today-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      flex: 1;
      min-width: 0;
    }
    .sched-today-free { font-size: 13px; color: var(--apple-muted-foreground); }
    /* 假期态（2026-10-02 接入节假日，与邮件停发同一条假日表）：日期下说明行 + 胶囊区假期提示 */
    .sched-today-holnote {
      font-size: 11.5px;
      color: var(--apple-primary);
      margin: 3px 0 0;
    }
    .sched-today-holiday {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--apple-primary);
      background: color-mix(in srgb, var(--apple-primary) 10%, transparent);
      border: 1px solid color-mix(in srgb, var(--apple-primary) 30%, transparent);
      border-radius: 999px;
      padding: 6px 14px;
    }
    .sched-today-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--apple-border);
      background: var(--apple-secondary);
      color: var(--apple-foreground);
      font: inherit;
      font-size: 12.5px;
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
    }
    .sched-today-chip:hover {
      border-color: color-mix(in srgb, var(--apple-primary) 45%, var(--apple-border));
      transform: translateY(-1px);
    }
    .sched-today-chip .stc-time {
      color: var(--apple-muted-foreground);
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-variant-numeric: tabular-nums;
    }
    .sched-today-chip.now {
      border-color: color-mix(in srgb, var(--apple-primary) 45%, transparent);
      background: color-mix(in srgb, var(--apple-primary) 10%, var(--apple-secondary));
    }
    .sched-today-chip.past { opacity: 0.55; }
    .sched-today-chip.past .stc-time { color: var(--apple-muted-foreground); }
    /* 筛选行：周几胶囊（导入/新增在编辑视图，看课侧无动作钮） */
    .sched-filter-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .sched-day-pills { flex-wrap: wrap; }
    /* 课程卡：左竖条=课程色（与周视图同名课同色），不套大卡壳直接排在页面上 */
    .sched-day-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .sched-day-card {
      --sdc-color: var(--sdc-course, var(--apple-primary)); /* JS 内联写 --sdc-course，类级置灰才能覆盖 --sdc-color */
      display: flex;
      align-items: flex-start;
      gap: 18px;
      background: var(--apple-card);
      border: 1px solid var(--apple-border);
      border-left: 3px solid var(--sdc-color);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      padding: 16px 18px;
    }
    .sched-day-card.now {
      border-color: color-mix(in srgb, var(--apple-primary) 40%, var(--apple-border));
      border-left-color: var(--sdc-color);
      background: color-mix(in srgb, var(--apple-primary) 5%, var(--apple-card));
    }
    /* 已上过（本周已过的日子或今天已结束）：整卡置灰降透明，竖条与时间不再用彩色 */
    .sched-day-card.past {
      --sdc-color: color-mix(in srgb, var(--apple-muted-foreground) 65%, var(--apple-border));
      opacity: 0.62;
    }
    .sched-day-card.past .sdc-time { color: var(--apple-muted-foreground); }
    /* 假期当天的排课卡：同样置灰（假期不上课，卡留着只挂「假期」章供查看） */
    .sched-day-card.hol-today {
      --sdc-color: color-mix(in srgb, var(--apple-muted-foreground) 65%, var(--apple-border));
      opacity: 0.62;
    }
    .sched-day-card.hol-today .sdc-time { color: var(--apple-muted-foreground); }
    .sched-day-card.off-week { opacity: 0.55; }
    .sdc-when { flex: none; min-width: 112px; }
    .sdc-time {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 13.5px;
      font-weight: 600;
      color: var(--apple-primary);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .sdc-day {
      margin: 4px 0 0;
      font-size: 11.5px;
      color: var(--apple-muted-foreground);
    }
    .sdc-main { flex: 1; min-width: 0; }
    .sdc-name {
      margin: 0;
      font-size: 15.5px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    /* 课程信息行：教师/地点/提醒拆成整项 span——换行只发生在项与项之间，不再出现「地/点：526」半句折断 */
    .sdc-meta {
      margin: 5px 0 0;
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--apple-muted-foreground);
    }
    .sdc-meta span { white-space: nowrap; }
    .sdc-meta span + span { margin-left: 12px; }
    .sdc-live {
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--apple-primary);
      background: color-mix(in srgb, var(--apple-primary) 12%, transparent);
      border-radius: 999px;
      padding: 2px 8px;
    }
    .sdc-live::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--apple-primary);
      animation: sdcPulse 2s ease-in-out infinite;
    }
    @keyframes sdcPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
    /* 日期筛选切换：课程卡错峰入场（仅筛选日变化时由 JS 挂 anim-in，30s 轻刷新/首次加载不播）；
       fill 用 backwards——延迟期藏起、播完归还级联（both 会把 opacity 永久冻在 1 盖掉 past/hol 的 0.62 置灰） */
    .sched-day-card.anim-in {
      animation: schedCardIn 300ms var(--ease-out) backwards;
    }
    .sched-day-list .empty-hint.anim-in { animation: schedCardIn 300ms var(--ease-out) backwards; }
    @keyframes schedCardIn {
      /* 只写起点，终点由各卡 resting 值补全——别写死 to opacity:1：灰卡（past/hol-today 62%）会先淡入到全亮、播完才跳回灰色（站长实报「点前天的课过一会才变灰」） */
      from { opacity: 0; transform: translateY(10px); }
    }
    .sdc-off {
      flex: none;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--apple-muted-foreground);
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      padding: 2px 8px;
    }
    /* 假期章：假期当天的排课卡（显示但今天实际不上课） */
    .sdc-hol {
      flex: none;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--apple-primary);
      border: 1px solid color-mix(in srgb, var(--apple-primary) 35%, transparent);
      border-radius: 999px;
      padding: 2px 8px;
    }
    /* 窄屏课程卡：改上下堆叠——首行=时间+周次+徽标（周次可截断），课名/信息整行铺开。
       别回到「时间列+内容列」左右两栏：长周次文本会把课名挤成两三个字一行的窄竖条（2026-10-14 站长实报） */
    @media (max-width: 560px) {
      .sched-page-title { font-size: 26px; }
      .sched-today-info { flex: 1 1 100%; } /* 日期独占一行，胶囊换行排下方（flex:1 会把日期挤到卡底） */
      .sched-day-card { display: block; padding: 12px 14px 13px; }
      .sdc-when { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
      .sdc-time { font-size: 14.5px; }
      .sdc-day {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
      }
      .sdc-main { margin-top: 6px; }
      .sdc-name { font-size: 16px; }
      .sdc-meta { line-height: 1.55; }
      .sdc-live, .sdc-off, .sdc-hol { vertical-align: 2px; }
      .sched-today-chips { justify-content: flex-start; }
      /* 星期筛选胶囊：单行横滑（滑动条隐藏但有惯性，日期一目七行变一行） */
      .sched-day-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-right: calc(var(--spacing) * -4); /* 呼吸感延伸到今日卡内边距右缘，胶囊贴边滑出 */
        padding-right: calc(var(--spacing) * 4);
      }
      .sched-day-pills::-webkit-scrollbar { display: none; }
      .sched-day-pills .sched-pill { flex: none; }
      /* 编辑视图工具区：date 输入框收窄 + 按钮字距收紧，工具行折行不超过 2 行（默认约 3~4 行） */
      .sched-toolbar { gap: 8px; margin-bottom: 10px; }
      .sched-week-label { min-width: 56px; font-size: 12px; }
      .sched-toolbar-right { gap: 5px 10px; }
      .sched-inline { font-size: 11px; gap: 4px; }
      .sched-inline-input { font-size: 11px; padding: 0 6px; }
      .sched-inline-input[type='date'] { width: 108px; }
      .sched-toolbar-right .appear-btn { font-size: 12px; padding-bottom: 1px; }
      .sched-inline .sched-mini-btn { font-size: 11px; padding: 0 8px; height: 28px; }
      /* 周视图：390px 下 minmax(0,1fr) 每列仅约 39px 字挤成一列，给课程块最低可用宽、保持横向滚动 */
      .sched-grid { grid-template-columns: 24px repeat(7, minmax(86px, 1fr)); gap: 3px; }
      /* 触屏拖选排课：格上起始滑动交给拖选手势，不滚页面（周视图整体仍在 overflow-x 外框里滚） */
      .sched-empty-cell { touch-action: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .sdc-live::before { animation: none; }
      .sched-today-chip, .sched-view-btn { transition: none; }
      .sched-day-card.anim-in, .sched-day-list .empty-hint.anim-in { animation: none; }
      .note-detail { animation: none; }
      .note-card, .note-detail-back { transition: none; }
    }

    /* 个人主页操作区按钮行（危险项描红） */
    .profile-actions {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    .profile-actions .appear-btn { flex: 1; }

    .danger-btn {
      color: #ef4444;
      border-color: color-mix(in srgb, #ef4444 40%, transparent);
    }

    @media (max-width: 640px) {
      .profilev-grid { grid-template-columns: 1fr; }
    }

    .profilev-input {
      width: 100%;
      padding: 9px 12px;
      border: 1px solid var(--apple-border);
      border-radius: 10px;
      background: var(--apple-background);
      color: var(--apple-foreground);
      font-size: 13px;
      margin-bottom: 8px;
      box-sizing: border-box;
      font-family: inherit;
    }

    .profilev-input:focus {
      outline: none;
      border-color: var(--apple-primary);
    }

    .profilev-name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .profilev-name-row .profilev-name { margin: 0; }
    .profilev-name-row .appear-btn { flex: none; }

    .profilev-sec-title {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--apple-muted-foreground);
      margin: 14px 0 8px;
    }

    .profilev-sec-title:first-of-type { margin-top: 4px; }

    /* 签到卡（个人主页）：等级徽标 + 进度条 + 连续天数 + 近 7 日圆点 */
    .ck-head { display: flex; align-items: center; gap: 8px; }
    .ck-lv {
      flex: none; font-size: 12px; font-weight: 700; color: #fff;
      background: var(--apple-primary); border-radius: 999px; padding: 3px 11px;
      font-variant-numeric: tabular-nums;
    }
    .ck-lv.max { background: linear-gradient(135deg, #c99416, #e9b949); }
    .ck-lvname { font-size: 14px; font-weight: 600; }
    .ck-head .appear-btn { margin-left: auto; white-space: nowrap; }
    .ck-btn-done { color: var(--apple-muted-foreground) !important; border-bottom-color: transparent !important; cursor: default; }
    .ck-bar {
      height: 8px; border-radius: 999px; overflow: hidden;
      background: var(--apple-chip, var(--apple-secondary, rgba(128, 128, 128, 0.14)));
      margin-top: 14px;
    }
    .ck-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--apple-primary); transition: width .45s var(--ease-out, ease); }
    .ck-bar-hint { font-size: 12px; color: var(--apple-muted-foreground); margin: 7px 0 0; }
    .ck-stats { font-size: 13px; margin-top: 12px; }
    .ck-week { display: flex; gap: 6px; margin-top: 10px; }
    .ck-day { flex: 1; text-align: center; font-size: 11px; color: var(--apple-muted-foreground); }
    .ck-day i {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; margin: 0 auto 4px;
      border: 1px solid var(--apple-border); border-radius: 50%;
      font-style: normal; font-size: 13px;
    }
    .ck-day.on i { background: var(--apple-primary); border-color: var(--apple-primary); color: #fff; }
    .ck-day.today:not(.on) i { border-color: var(--apple-primary); color: var(--apple-primary); }
    .ck-loading { font-size: 13px; color: var(--apple-muted-foreground); margin: 0; }

    /* 收藏音乐行 */
    .fav-music { list-style: none; margin: 0; padding: 0; }

    .fav-music-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 8px;
      border-radius: 10px;
      transition: background-color 150ms var(--ease-out);
    }

    .fav-music-item:hover { background: var(--apple-chip, var(--apple-secondary, rgba(128, 128, 128, 0.12))); }

    .fav-music-name {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fav-icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      flex: none;
      padding: 0;
      border: none;
      border-radius: 999px;
      background: none;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
    }

    .fav-icon-btn:hover { background: rgba(128, 128, 128, 0.14); color: var(--apple-foreground); }
    .fav-icon-btn:disabled { opacity: 0.35; cursor: default; }
    .fav-icon-btn.faved { color: #ff4d6a; }

    /* ===== 收藏心形按钮 ===== */

    /* 灯箱右上角 */
    .lb-fav {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.42);
      color: #fff;
      cursor: pointer;
      transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out);
    }

    .lb-fav:hover { transform: scale(1.1); background: rgba(0, 0, 0, 0.58); }
    .lb-fav svg { fill: none; transition: fill 180ms var(--ease-out), stroke 180ms var(--ease-out); }
    .lb-fav.faved svg { fill: #ff4d6a; stroke: #ff4d6a; }

    /* 迷你播放器播放列表行尾 */
    .pl-fav {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      padding: 4px;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      border-radius: 999px;
      transition: color 150ms var(--ease-out);
    }

    .pl-fav:hover { color: #ff4d6a; }
    .pl-fav.faved, .pl-fav.faved:hover { color: #ff4d6a; }
    .pl-fav svg { fill: none; }
    .pl-fav.faved svg { fill: #ff4d6a; }

    /* ===== 登录欢迎浮窗（Swipe Toast 形态，2026-10-14 升级——reactbits.dev/c/micro/swipe-toast 原生复刻）：
       右下角；颜色=白卡（#fff 底 / #27272a 字 / #f5a524 琥珀引线，不随主题）——先对齐原版深灰卡，
       后站长「不是你这个提示怎么还是黑色的，我要白色的」翻白：按原版同一套 token 结构对调（bg/ink 互换）；
       底部一根引线随 6 秒剩余时间烧完自动关；向下滑走 / Esc / 悬停暂停（卡内结构由 common.js 构建，
       八页外壳 markup 零改动）。外层 .admin-toast 只做定位与显隐，内层 .swipe-toast-card 承担滑动与引线。
       卡内：「进入后台」= 原版动作钮同款（白卡下=深底白字药丸）、关闭 = 原版 X 钮同款。
       注意：两钮的规则用 .swipe-toast-card 前缀（0,2,0）——「进入后台」带 .appear-btn 类，
       文件更后方的 .appear-btn（0,1,0）文字链样式会盖掉同特异度规则 ===== */
    .admin-toast {
      position: fixed;
      right: 32px;
      bottom: calc(32px + env(safe-area-inset-bottom, 0px));
      z-index: 300; /* 高于相册/主页(150)和灯箱(200)，低于登录卡片(400) */
      width: min(356px, calc(100vw - 64px)); /* 原版：min(--st-w, 100vw - 2*offset) */
      opacity: 0;
      visibility: hidden;
      /* 出场（原版 closing 口径）：整卡下滑 280ms = slideMs*0.7、淡出 200ms */
      transform: translateY(100%);
      transition: opacity 200ms ease, transform 280ms cubic-bezier(.23, 1, .32, 1), visibility 280ms;
    }

    .admin-toast.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      /* 入场（原版 lift 口径）：整卡从下方滑入 400ms、淡入 240ms = slideMs*0.6 */
      transition: opacity 240ms ease, transform 400ms cubic-bezier(.23, 1, .32, 1), visibility 240ms;
    }

    /* 迷你播放条出现时让位（条贴底 16px 高约 56px，右端可达窄屏整宽） */
    body.mini-active .admin-toast {
      bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    }

    /* 悬浮播放球模式：右下角三级台阶占满角落（球 32~80 / 外观圆钮 84~124 / 回顶钮 92~140），
       抬到台阶之上——148 = 回顶钮顶 140 + 8 缝隙（实测 96 会同时压住圆钮和回顶钮） */
    html.using-blog-player .admin-toast {
      bottom: calc(148px + env(safe-area-inset-bottom, 0px));
    }

    /* AI 页输入条占底部（条顶约 bottom 133 起，手机/桌面同高）：抬到输入条之上（否则压发送键） */
    html[data-page="ai"] .admin-toast {
      bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    }

    .swipe-toast-card {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px;
      border-radius: 12px;
      background: #fff;
      color: #27272a;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.1);
      cursor: grab;
      outline: none;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }

    .swipe-toast-card.dragging { cursor: grabbing; }

    .swipe-toast-card:focus-visible {
      outline: 2px solid #f5a524;
      outline-offset: 2px;
    }

    .swipe-toast-body {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-width: 0;
    }

    .swipe-toast-text {
      font-size: 13px;
      font-weight: 500;
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 引线：2px 渐变细线贴卡片底缘，scaleX 1→0 随剩余时间烧完（JS WAAPI 驱动） */
    .swipe-toast-fuse {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, #f5a524 18%, transparent) 9%,
        color-mix(in srgb, #f5a524 50%, transparent) 18%,
        color-mix(in srgb, #f5a524 84%, transparent) 28%,
        #f5a524 38%, #f5a524 62%,
        color-mix(in srgb, #f5a524 84%, transparent) 72%,
        color-mix(in srgb, #f5a524 50%, transparent) 82%,
        color-mix(in srgb, #f5a524 18%, transparent) 91%,
        transparent 100%);
      transform-origin: left center;
      pointer-events: none;
    }

    /* 「进入后台」= 原版动作钮同款（24px 药丸、反色字——白卡下=深底白字、悬停 .88、按压 .97）；
       0,2,0 特异度压过 .appear-btn 文字链样式 */
    .swipe-toast-card .admin-toast-btn {
      flex: none;
      border: 0;
      border-bottom: 0;
      cursor: pointer;
      height: 24px;
      padding: 0 8px;
      border-radius: 5px;
      background: #27272a;
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      outline: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: transform 160ms cubic-bezier(.23,1,.32,1), background-color 160ms ease, opacity 160ms ease;
    }

    .swipe-toast-card .admin-toast-btn:active { transform: scale(.97); }

    .swipe-toast-card .admin-toast-btn:focus-visible { outline: 2px solid #f5a524; outline-offset: 2px; }

    /* 关闭 = 原版 X 钮同款（24×24 方角、悬停 10% 墨、命中区外扩 8px；图标收到原版 12px/2.5） */
    .swipe-toast-card .admin-toast-close {
      position: relative;
      flex: none;
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: inherit;
      cursor: pointer;
      outline: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: transform 160ms cubic-bezier(.23,1,.32,1), background-color 160ms ease, opacity 160ms ease;
    }

    .swipe-toast-card .admin-toast-close::before { content: ''; position: absolute; inset: -8px; }

    .swipe-toast-card .admin-toast-close svg { width: 12px; height: 12px; stroke-width: 2.5; }

    .swipe-toast-card .admin-toast-close:active { transform: scale(.97); }

    .swipe-toast-card .admin-toast-close:focus-visible { outline: 2px solid #f5a524; outline-offset: 2px; }

    @media (hover: hover) and (pointer: fine) {
      .swipe-toast-card .admin-toast-btn:hover { opacity: .88; }
      .swipe-toast-card .admin-toast-close:hover { background: rgba(39, 39, 42, 0.1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .admin-toast { transition: opacity 200ms ease; transform: none; }
      .admin-toast.show { transform: none; }
      .swipe-toast-card .admin-toast-btn:active,
      .swipe-toast-card .admin-toast-close:active { transform: none; }
    }

    @media (max-width: 600px) {
      .admin-toast {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: min(356px, calc(100vw - 32px)); /* 原版：min(--st-w, 100vw - 2*16px) */
      }
      /* 窄屏右侧控件堆叠高（圆钮 96~136、回顶钮 136~176），迷你条出现时让到最上层 */
      body.mini-active .admin-toast {
        bottom: calc(184px + env(safe-area-inset-bottom, 0px));
      }
      /* AI 页输入条之上（该页迷你条/圆钮都不显示，无需 184 高位）；写在 mini-active 之后压过它 */
      html[data-page="ai"] .admin-toast {
        bottom: calc(140px + env(safe-area-inset-bottom, 0px));
      }
      /* 博客款悬浮播放器：窄屏右侧三级台阶更高（圆钮 720~760 / 回顶钮 680~720），
         148 的桌面口径会压住回顶钮——与迷你条同高让到最上层 */
      html.using-blog-player .admin-toast {
        bottom: calc(184px + env(safe-area-inset-bottom, 0px));
      }
    }

    /* 外观入口：圆形毛玻璃小钮（2026-09-08 用户嫌白色耳朵突兀，选定圆钮方案；同日追加自由拖动）。
       视口固定定位（position:fixed + z 165）：高于外观面板 160——开着时浮在面板上就是关闭把手，
       低于搜索 350/登录卡 400；bottom 84px 避让回顶钮(≤62)与音乐球(≤60)。
       按钮本体由 common.js 挪到 body 下——曾挂在 .appear-dock 内，dock 收起 translateX(100%)
       会把拖到左侧的钮一并带出屏外（用户实报） */
    .appear-tab {
      position: fixed;
      bottom: 84px;
      right: 12px;
      z-index: 165;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.6);
      -webkit-backdrop-filter: saturate(1.8) blur(22px);
      backdrop-filter: saturate(1.8) blur(22px);
      color: var(--apple-card-foreground);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 28px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      touch-action: none; /* 指针拖动定位：触屏上不把手势交给页面滚动 */
      transition: background-color 300ms var(--ease-out), box-shadow 250ms var(--ease-out), color 300ms var(--ease-out);
    }

    .dark .appear-tab {
      background: rgba(30, 30, 32, 0.58);
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 28px rgba(0, 0, 0, 0.42);
    }

    /* AI 页不显示外观圆钮（2026-09-08 用户要求）：全屏聊天布局自足，避免遮挡输入区。
       面板本体无需同规则——只能由圆钮打开，pjax 进 AI 页时 closeAllTransientOverlays 已收起 */
    html[data-page="ai"] .appear-tab { display: none !important; }


    .appear-tab:hover {
      color: var(--apple-primary);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 32px rgba(0, 0, 0, 0.16);
    }

    .dark .appear-tab:hover {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 32px rgba(0, 0, 0, 0.5);
    }

    .appear-tab svg {
      transition: transform 350ms var(--ease-out);
    }

    body.appear-open .appear-tab {
      color: var(--apple-primary);
    }

    body.appear-open .appear-tab svg {
      transform: rotate(90deg);
    }

    /* ===== Card Component ===== */
    .apple-card {
      background: var(--apple-card);
      color: var(--apple-card-foreground);
      border: 1px solid var(--apple-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
    }

    .apple-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .card-padding {
      padding: calc(var(--spacing) * 6);
    }

    .card-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--apple-muted-foreground);
      margin-bottom: 16px;
    }

    /* ===== Music Player（底部悬浮迷你播放器） ===== */
    /* 均衡器：常驻显示在歌名左侧。播放=主题色跳动；暂停=灰色静止 */
    .mini-eq {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 18px;
      flex-shrink: 0;
      padding-bottom: 1px;
    }

    .mini-eq i {
      width: 3.5px;
      border-radius: 2px;
      background: var(--apple-muted-foreground);
      transform-origin: bottom;
      /* 动画常驻、用 play-state 控制启停：暂停冻结在当前姿态，不会瞬间弹回原始高度；
         正 delay 让未播放过的待机态停在基础高度（动画未启动时显示元素本身样式） */
      transition: background-color 300ms var(--ease-out);
      animation: eq 0.9s ease-in-out infinite;
      animation-play-state: paused;
    }

    .mini-eq i:nth-child(1) { height: 55%; animation-delay: 0.3s; }
    .mini-eq i:nth-child(2) { height: 100%; animation-delay: 0.15s; }
    .mini-eq i:nth-child(3) { height: 75%; animation-delay: 0.45s; }

    .mini-player.playing .mini-eq i {
      background: var(--apple-primary);
      animation-play-state: running;
    }

    @keyframes eq {
      0%, 100% { transform: scaleY(0.3); }
      50% { transform: scaleY(1); }
    }

    .ctrl-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      background: var(--apple-card);
      color: var(--apple-card-foreground);
      font-size: 18px;
      cursor: pointer;
      overflow: hidden;
      transition: background-color 200ms var(--ease-out),
                  color 200ms var(--ease-out),
                  transform 200ms var(--ease-out),
                  border-color 200ms var(--ease-out),
                  box-shadow 200ms var(--ease-out);
    }

    .ctrl-btn:hover {
      background: var(--apple-accent);
      border-color: color-mix(in srgb, var(--apple-border) 80%, var(--apple-primary) 20%);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    .ctrl-btn:active {
      transform: translateY(0) scale(0.94);
      transition: transform 80ms ease;
    }

    .ctrl-btn:focus-visible {
      outline: 2px solid var(--apple-ring);
      outline-offset: 2px;
    }

    .play-btn-main {
      position: relative;
      width: 52px;
      height: 52px;
      background: linear-gradient(135deg, var(--apple-primary) 0%, color-mix(in srgb, var(--apple-primary) 85%, #ffffff) 100%);
      color: var(--apple-primary-foreground);
      box-shadow:
        0 2px 8px -2px color-mix(in srgb, var(--apple-primary) 35%, transparent),
        0 4px 16px -4px color-mix(in srgb, var(--apple-primary) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
      overflow: visible;
    }

    .play-btn-main::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 999px;
      background: var(--apple-primary);
      opacity: 0;
      filter: blur(12px);
      z-index: -1;
      transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
      transform: scale(0.8);
    }

    .play-btn-main:hover {
      background: linear-gradient(135deg, color-mix(in srgb, var(--apple-primary) 92%, #000000) 0%, var(--apple-primary) 100%);
      transform: translateY(-1px) scale(1.04);
      box-shadow:
        0 4px 12px -2px color-mix(in srgb, var(--apple-primary) 45%, transparent),
        0 8px 24px -6px color-mix(in srgb, var(--apple-primary) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .play-btn-main:hover::before {
      opacity: 0.4;
      transform: scale(1);
    }

    .play-btn-main:active {
      transform: translateY(0) scale(0.96);
      transition: transform 100ms ease;
    }

    .play-btn-main:focus-visible {
      outline: 2px solid var(--apple-ring);
      outline-offset: 3px;
    }

    /* 播放按钮涟漪效果 */
    .play-btn-main .ripple {
      position: absolute;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.4);
      transform: scale(0);
      animation: ripple 600ms var(--ease-out) forwards;
      pointer-events: none;
    }

    @keyframes ripple {
      to {
        transform: scale(2.5);
        opacity: 0;
      }
    }

    /* 播放图标动画 */
    .play-btn-main .play-icon {
      transition: transform 250ms var(--ease-out);
    }

    .play-btn-main:hover .play-icon {
      transform: scale(1.08);
    }

    /* 播放状态脉冲动画 */
    .play-btn-main.is-playing::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 999px;
      border: 2px solid var(--apple-primary);
      opacity: 0;
      animation: pulse-ring 2s ease-out infinite;
      pointer-events: none;
    }

    @keyframes pulse-ring {
      0% {
        transform: scale(0.95);
        opacity: 0.6;
      }
      100% {
        transform: scale(1.4);
        opacity: 0;
      }
    }

    .empty-hint {
      font-size: 14px;
      color: var(--apple-muted-foreground);
      padding: 24px 0 8px;
    }

    /* 大空态组件（2026-10-07）：留言板/相册/课表启用前的整卡空态——
       图标 + 标题 + 引导语（+可选操作钮）居中排版，替代孤零零一行灰字。
       颜色全走语义变量，主题色/深浅自动跟随；.es-icon 用主题色 10% 染底。 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      text-align: center;
      padding: 34px 18px 28px;
    }
    .empty-state .es-icon {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 5px;
      border-radius: 13px;
      color: var(--primary);
      background: color-mix(in srgb, var(--primary) 10%, transparent);
    }
    .empty-state .es-title {
      font-size: 14.5px;
      font-weight: 650;
    }
    .empty-state .es-hint {
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--apple-muted-foreground);
      max-width: 30em;
    }
    .empty-state .appear-btn {
      margin-top: 10px;
    }

    .album-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      padding: 16px 6vw;
      border-bottom: 1px solid var(--apple-border);
      /* 入场：标题行从上方轻轻落位 */
      transform: translateY(-10px);
      opacity: 0;
      transition: transform 350ms var(--ease-out), opacity 250ms var(--ease-out);
    }

    .album-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--apple-foreground);
    }

    .album-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      background: var(--apple-card);
      color: var(--apple-foreground);
      cursor: pointer;
      transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
    }

    .album-close:hover {
      transform: scale(1.06);
    }

    .album-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 24px 6vw 48px;
      /* 入场：内容从下方浮上来，与标题行形成先后层次 */
      transform: translateY(28px);
      opacity: 0;
      transition: transform 400ms var(--ease-out) 60ms, opacity 300ms var(--ease-out) 60ms;
    }

    /* ===== 背景图选择器：从站内图片中挑选 ===== */
    .bg-picker {
      position: fixed;
      inset: 0;
      z-index: 300; /* 高于灯箱(200)：选择背景时盖住一切 */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 250ms var(--ease-out), visibility 250ms var(--ease-out);
    }

    .bg-picker.show {
      opacity: 1;
      visibility: visible;
    }

    .bg-picker-panel {
      width: min(560px, 92vw);
      max-height: min(70vh, 620px);
      display: flex;
      flex-direction: column;
      background: var(--apple-card);
      color: var(--apple-card-foreground);
      border: 1px solid var(--apple-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      padding: calc(var(--spacing) * 5);
    }

    .bg-picker-title {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      margin-bottom: 14px;
      color: var(--apple-foreground);
    }

    .bg-picker-grid {
      flex: 1;
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 12px;
      padding: 2px;
    }

    .bg-picker-grid img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 10px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out);
    }

    .bg-picker-grid img:hover {
      transform: scale(1.04);
      border-color: var(--apple-border);
    }

    .bg-picker-grid img.picked {
      border-color: var(--apple-primary);
    }

    .bg-picker-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 14px;
    }

    /* ===== Footer ===== */
    .site-footer {
      max-width: 1080px;
      margin: 0 auto;
      padding: 48px 6vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: var(--apple-muted-foreground);
      border-top: 1px solid var(--apple-border);
      transition: color 300ms var(--ease-out), border-color 300ms var(--ease-out);
    }

    .site-footer a {
      color: var(--apple-muted-foreground);
      text-decoration: none;
      transition: color 180ms var(--ease-out);
    }

    .site-footer a:hover {
      color: var(--apple-foreground);
    }

    /* 页脚运行时长：数字等宽避免每秒跳动 */
    .uptime {
      font-variant-numeric: tabular-nums;
    }

    /* ===== Back to Top Button ===== */
    .back-top {
      position: fixed;
      right: 28px;
      /* 上移避让右下角的外观抽屉箭头（箭头占底部 16~76px） */
      bottom: 92px;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--apple-primary);
      color: var(--apple-primary-foreground);
      border: none;
      border-radius: 999px;
      font-size: 18px;
      cursor: pointer;
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      box-shadow: var(--shadow-lg);
      transition: opacity 250ms var(--ease-out), visibility 250ms var(--ease-out), transform 250ms var(--ease-out), background-color 180ms var(--ease-out);
    }

    .back-top.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .back-top:hover {
      transform: translateY(-3px);
      filter: brightness(0.96);
    }

    .back-top:active {
      transform: translateY(0);
    }

    .back-top:focus-visible {
      outline: 2px solid var(--apple-ring);
      outline-offset: 3px;
    }

    /* ===== 底部悬浮迷你播放器 ===== */
    .mini-player {
      position: fixed;
      left: 50%;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      transform: translate(-50%, 16px);
      z-index: 90;
      display: flex;
      align-items: center;
      gap: 10px;
      width: min(520px, calc(100vw - 32px));
      padding: 8px 12px 8px 8px;
      background: rgba(255, 255, 255, 0.82);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 250ms var(--ease-out), visibility 250ms var(--ease-out), transform 250ms var(--ease-out), background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
    }

    .dark .mini-player {
      background: rgba(28, 28, 30, 0.82);
    }

    .mini-player.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
      pointer-events: auto;
    }

    /* 闲置收纳态（2026-10-11）：曲库非空但 5 秒无交互整条下沉藏起，复用上面的过渡；
       唤出 = 鼠标/触点移到屏幕底部边缘（common.js 全局被动监听，不挡点击）或键盘聚焦进条内 */
    .mini-player.show.away {
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 16px);
      pointer-events: none;
    }

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

    /* 顶在胶囊下沿的细进度线 */
    .mini-progress {
      position: absolute;
      bottom: 0;
      left: 28px;
      right: 28px;
      height: 2px;
      border-radius: 999px;
      overflow: hidden;
    }

    .mini-progress-fill {
      height: 100%;
      width: 0;
      background: var(--apple-primary);
      border-radius: 999px;
    }

    .mini-cover {
      position: relative;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      background: linear-gradient(135deg, var(--apple-primary) 0%, color-mix(in srgb, var(--apple-primary) 55%, #1c1c3a) 100%);
      border-radius: 999px;
    }

    /* 专辑封面：后台传了封面时替换音符图标，播放时黑胶式旋转（暂停保持角度）；
       中心白点盖在图上不随图转（::after 在容器上，旋转的是 img 本身） */
    .mini-cover img {
      display: none;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 999px;
      animation: mini-cover-spin 9s linear infinite;
      animation-play-state: paused;
    }

    .mini-cover.has-cover svg {
      display: none;
    }

    .mini-cover.has-cover img {
      display: block;
    }

    .mini-cover.has-cover::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 10px;
      height: 10px;
      margin: -5px 0 0 -5px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.22);
      z-index: 1;
    }

    .mini-player.playing .mini-cover img {
      animation-play-state: running;
    }

    @keyframes mini-cover-spin {
      to { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .mini-cover img {
        animation: none;
      }
    }

    .mini-title {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--apple-foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .mini-btn {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      border: none;
      font-size: 16px;
    }

    .mini-btn.play-btn-main {
      width: 40px;
      height: 40px;
    }

    .mini-btn.active {
      background: var(--apple-secondary);
    }

    /* ===== 播放列表面板（悬浮在胶囊上方） ===== */
    .mini-playlist {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 0;
      right: 0;
      max-height: 320px;
      overflow-y: auto;
      padding: 6px;
      background: rgba(255, 255, 255, 0.92);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border: 1px solid var(--apple-border);
      border-radius: 18px;
      box-shadow: var(--shadow-xl);
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
    }

    .dark .mini-playlist {
      background: rgba(28, 28, 30, 0.92);
    }

    .mini-playlist.show {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .mini-playlist[hidden] {
      display: none;
    }

    .mini-playlist ul {
      list-style: none;
    }

    .mini-playlist li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-size: 13px;
      color: var(--apple-muted-foreground);
      transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
    }

    .mini-playlist li:hover {
      background: var(--apple-secondary);
      color: var(--apple-card-foreground);
    }

    .mini-playlist li.active {
      color: var(--apple-primary);
      font-weight: 600;
      background: var(--apple-secondary);
    }

    .mini-playlist .pl-index {
      flex-shrink: 0;
      width: 20px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 11px;
    }

    .mini-playlist .pl-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 迷你播放器出现时，回顶按钮上移避让 */
    body.mini-active .back-top {
      bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }

    /* 迷你播放器收纳中（.mini-idle）时回顶按钮回位：避让只为条可见时让路 */
    body.mini-active.mini-idle .back-top {
      bottom: 92px;
    }

    /* 窄屏右下角让位：回顶钮（right28/bottom92/48px 大）与外观圆钮（right12/bottom84/40px 大，z165）
       在 390px 上圆心距仅约 20px 必然叠住——回顶钮让位（圆钮有拖动记忆不能动），左移+上抬一整个身位 */
    @media (max-width: 560px) {
      .back-top {
        right: 16px;
        bottom: calc(136px + env(safe-area-inset-bottom, 0px));
      }
      body.mini-active .back-top {
        bottom: calc(136px + env(safe-area-inset-bottom, 0px));
      }
      body.mini-active.mini-idle .back-top {
        bottom: calc(136px + env(safe-area-inset-bottom, 0px));
      }
    }

    /* ===== 自定义背景层 ===== */
    html {
      /* 底色 + 顶部暖橙光晕（参考博客站观感）放在画布层：光晕铺视口顶部 540px、随主题换色；
         原先底色在 body 上会盖住 z-index:-1 的流星/自定义背景层，见 body 处注释。
         自定义背景（.bg-layer，同为负 z）绘制在画布之上，自然盖住光晕 */
      background:
        radial-gradient(62% 100% at 50% -8%, color-mix(in srgb, var(--glow-a) 16%, transparent), transparent 62%) top center / 100% 540px no-repeat fixed,
        var(--apple-background);
      transition: background-color 300ms var(--ease-out);
      /* 滚动条槽位恒定（2026-10-06）：开场动画期间 html.intro-pending 用 overflow:hidden 锁滚动，
         经典滚动条随之消失会把视口收窄约 15px，揭幕那一下整页横向跳——gutter 恒定后overflow:hidden
         只藏滚动条本体不再收窄视口，揭幕零位移。代价是 Windows 桌面端永久留15px 空边。 */
      scrollbar-gutter: stable;
    }

    html.dark {
      background:
        radial-gradient(62% 100% at 50% -8%, color-mix(in srgb, var(--glow-b) 12%, transparent), transparent 62%) top center / 100% 540px no-repeat fixed,
        var(--apple-background);
    }

    /* ===== 流星（参考博客站 fx 特效接入）：负 z 固定层，浅色也显示（原站仅暗色，demo 版强制双主题可见）；
         主题切换 View Transitions 快照期间隐藏防半截流星入快照 ===== */
    .fx-meteors {
      position: fixed;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      pointer-events: none;
    }

    /* 个人主页/课表浮层（.profile-view，z 150 毛玻璃）打开时：流星层抬到玻璃之上（150<155<外观抽屉/头像下拉 160），
       否则浮层观感是"独立实心背景"、流星全被盖住（用户反馈）；浮层关闭自动回落 z:-1，不影响日常"流星在内容后面"的设计 */
    body:has(.profile-view.show) .fx-meteors {
      z-index: 155;
    }

    /* 同场景的顶缝修复：浮层从 52px 起铺玻璃，顶条(0~52px)在自定义背景下露原图原样，与下方磨砂反差极大（用户反馈）。
       浮层打开时给头部透明壳补一条与浮层同参数的磨砂带，与浮层连成整面（头部 z50 < 浮层150，带子只在顶条露出）；
       胶囊/进度条在头部内、绘制在带子之上不受影响；壳是 pointer-events:none，带子不挡点击 */
    body:has(.profile-view.show) .site-header::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 52px;
      background: color-mix(in srgb, var(--apple-background) 65%, transparent);
      backdrop-filter: blur(14px) saturate(1.2);
      -webkit-backdrop-filter: blur(14px) saturate(1.2);
    }

    .theme-vt .fx-meteors {
      visibility: hidden;
      opacity: 0;
    }

    .fx-meteor {
      position: absolute;
      top: -4rem;
      left: var(--left);
      width: 2px;
      height: 2px;
      border-radius: 9999px;
      background: rgba(148, 163, 184, 0.95);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
      transform: rotate(215deg) translate(0);
      opacity: 0;
      animation: fx-meteor-fall var(--duration, 6s) linear var(--delay, 0s) infinite;
      will-change: transform, opacity;
    }

    .fx-meteor::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      z-index: -1;
      width: var(--tail, 50px);
      height: 1px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, rgba(148, 163, 184, 0.9), rgba(0, 0, 0, 0));
      border-radius: 9999px;
    }

    @keyframes fx-meteor-fall {
      0% { opacity: 0; transform: rotate(215deg) translate(0); }
      4%, 68% { opacity: 1; }
      100% { opacity: 0; transform: rotate(215deg) translate(-180vh); }
    }

    @media (prefers-reduced-motion: reduce) {
      .fx-meteor { animation: none; }
      .fx-meteors { display: none; }
    }

    .bg-layer {
      position: fixed;
      inset: 0;
      z-index: -1;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      /* 只在设了自定义背景时存在：body 常透明后（见 body 处注释），默认态的压暗层
         （bgDim 默认 25% 黑）会漏出来把整页压灰——此前靠 body 不透明底色无意间盖住 */
      display: none;
    }

    body.has-custom-bg .bg-layer {
      display: block;
    }

    .bg-dim {
      position: absolute;
      inset: 0;
      background: #000000;
      opacity: 0;
      transition: opacity 300ms var(--ease-out);
    }

    /* 使用自定义背景时：页面底色透明让图露出来，卡片变半透明+毛玻璃保证可读 */
    body.has-custom-bg {
      background: transparent;
    }

    body.has-custom-bg .apple-card {
      background: color-mix(in srgb, var(--apple-card) 85%, transparent);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }

    /* ===== 外观设置卡片 ===== */
    .appear-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--apple-muted-foreground);
      margin: 20px 0 10px;
    }

    .appear-label:first-of-type {
      margin-top: 0;
    }

    .swatch-row {
      display: flex;
      flex-wrap: wrap;   /* 色板 9→13 枚（2026-10-08 复古主题）：窄面板自动换行兜底 */
      gap: 10px;
    }

    /* 主题色板 = 迷你主题预览卡（2026-10-08 重设计，替代纯色圆点）：
       上条=主题色（accent）、下底=纸底色（--sw2），复古款直角、现代款圆角，
       一眼能看出「点了之后页面长什么样」。双色值由八页外壳 inline style 下发（--sw/--sw2）。 */
    .swatch {
      position: relative;
      width: 36px;
      height: 30px;
      border: 1px solid rgba(0, 0, 0, 0.18);
      border-radius: 6px;
      background:
        linear-gradient(180deg,
          var(--sw, #b0532b) 0%, var(--sw, #b0532b) 38%,
          var(--sw2, #f8f7f4) 38%, var(--sw2, #f8f7f4) 100%);
      cursor: pointer;
      padding: 0;
      transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
    }

    .swatch:hover {
      transform: translateY(-2px);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    }

    .swatch.active::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 8px;
      border: 2px solid var(--apple-foreground);
    }

    /* 复古四款直角（标题条感的卡型） */
    .swatch.sw-retro {
      border-radius: 2px;
    }
    .swatch.sw-retro.active::after {
      border-radius: 4px;
    }

    /* 当前主题名（色板行下方一行小字） */
    .swatch-name {
      margin-top: 8px;
      font-size: 12px;
      color: var(--apple-muted-foreground);
    }
    .swatch-name b {
      color: var(--apple-foreground);
      font-weight: 600;
    }

    .bg-actions {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .appear-btn {
      background: none;
      border: none;
      font-size: 13px;
      font-family: inherit;
      color: var(--apple-primary);
      cursor: pointer;
      padding: 0 0 2px;
      border-bottom: 1px solid currentColor;
      transition: opacity 0.2s;
    }

    .appear-btn:hover {
      opacity: 0.6;
    }

    .dim-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--apple-muted-foreground);
    }

    .dim-row input[type='range'] {
      width: 110px;
      accent-color: var(--apple-primary);
    }

    .appear-hint {
      font-size: 12px;
      color: var(--apple-muted-foreground);
      margin-top: 14px;
    }

    /* 开关 */
    .switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      user-select: none;
    }

    .switch-row input {
      display: none;
    }

    .switch-ui {
      position: relative;
      width: 40px;
      height: 22px;
      flex-shrink: 0;
      border-radius: 999px;
      background: var(--apple-muted);
      transition: background-color 200ms var(--ease-out);
    }

    .switch-ui::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: #ffffff;
      box-shadow: var(--shadow-sm);
      transition: transform 200ms var(--ease-out);
    }

    .switch-row input:checked + .switch-ui {
      background: var(--apple-primary);
    }

    .switch-row input:checked + .switch-ui::after {
      transform: translateX(18px);
    }

    .switch-row + .switch-row {
      margin-top: 12px;
    }

    /* ===== Responsive ===== */

    /* 平板横向 (900-1199px) */
    @media (min-width: 900px) and (max-width: 1199px) {
      .page-main {
        max-width: 860px;
        padding: 0 5vw;
      }

      .content-section {
        padding: 80px 0;
      }

      /* 这段主容器收窄到 860px，视频盒却仍固定 320px 占右侧、时钟字号仍是 9vw（最大 96px）——
         时钟容器(overflow:hidden)必溢出，秒数/毫秒正好被视频盒方向的裁剪切掉（900~1199px 全段复现，
         1040px 以上秒位整位消失）。该段内视频盒收窄、时钟整体降一档；≥1200px 主容器加宽后恢复原字号 */
      .video-box {
        flex-basis: 260px;
        min-height: 170px;
      }

      .clock-hud {
        padding: 22px 24px 20px;
      }

      .clock-seg,
      .clock-colon {
        font-size: clamp(3rem, 7.5vw, 68px);
      }

      .clock-ms {
        font-size: clamp(1rem, 2vw, 1.25rem);
        min-width: 3em;
      }
    }

    /* 平板纵向 (768-899px) */
    @media (min-width: 768px) and (max-width: 899px) {
      .page-main {
        max-width: 720px;
        padding: 0 5vw;
      }

      .hero-section {
        padding: 68px 0 48px;
      }

      .content-section {
        padding: 70px 0;
      }

    }

    /* 大屏手机 (480-767px)：导航进抽屉（≤900px 汉堡模式），胶囊占满行宽 */
    @media (max-width: 767px) {
      .site-header {
        padding: 8px 8px 0;
      }

      .header-pill {
        width: 100%;
        gap: 6px;
        padding: 4px 6px 4px 12px;
      }

      .page-main {
        padding: 0 4vw;
      }

      /* 顶栏（汉堡模式）高约 51px：顶部留白必须盖过它——原 40px 时问候语被顶栏盖住上半截
         （2026-09-08 用户手机实测，480-767 宽正好命中；相邻断点均为 64/68px） */
      .hero-section {
        padding: 68px 0 44px;
      }

      .clock-date {
        font-size: 0.95rem;
      }

      .content-section {
        padding: 56px 0;
      }

      .card-padding {
        padding: calc(var(--spacing) * 4);
      }

      .tool-block + .tool-block {
        margin-top: 32px;
      }

      .site-footer {
        padding: 28px 4vw;
        flex-direction: column;
        gap: 10px;
        text-align: center;
      }

      .back-top {
        right: 18px;
        bottom: 18px;
        width: 44px;
        height: 44px;
      }
    }

    /* 小屏手机 (≤480px)：胶囊收紧。导航已进抽屉（≤900px 汉堡模式，见文件末尾「窄屏导航抽屉」段），
       胶囊里只剩 汉堡+logo+动作钮，logo 放得下不再隐藏 */
    @media (max-width: 480px) {
      .site-header {
        padding: 6px 6px 0;
      }

      .header-pill {
        padding: 4px 4px 4px 8px;
        gap: 4px;
      }

      .header-actions {
        padding-left: 4px;
        margin-left: 0;
      }

      .page-main {
        padding: 0 5vw;
      }

      .hero-section {
        padding: 64px 0 40px;
      }

      .clock-date {
        font-size: 0.85rem;
      }

      .content-section {
        padding: 48px 0;
      }

      .card-padding {
        padding: 16px;
      }

      .card-eyebrow {
        font-size: 10px;
        letter-spacing: 0.2em;
        margin-bottom: 16px;
      }

      .tool-block + .tool-block {
        margin-top: 28px;
      }

      .ctrl-btn {
        width: 38px;
        height: 38px;
      }

      .play-btn-main {
        width: 46px;
        height: 46px;
      }

      .site-footer {
        padding: 24px 5vw;
        font-size: 12px;
      }

      .back-top {
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
      }

      .back-top .svg-icon {
        width: 18px;
        height: 18px;
      }
    }

    /* 横屏手机优化 */
    @media (max-height: 500px) and (orientation: landscape) {
      .hero-section {
        padding: 64px 0 36px;
      }
    }

    /* ===== Reduced Motion ===== */
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
      .clock-colon,
      .scanline,
      .clock-seg.tick {
        animation: none;
      }
      .hero-section,
      .content-section {
        opacity: 1;
        transform: none;
        animation: none;
      }
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
    }

    /* ===== 登录界面（演示版门）：页面不上锁盖白幕，只弹出登录卡片 ===== */
    .login-gate {
      position: fixed;
      /* 显式四边定位，兼容不支持 inset 简写的浏览器 */
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 400; /* 盖住所有浮层，登录后才放行 */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      /* 轻微暗色遮罩：页面在背后可见，只突出登录卡片 */
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 1;
      visibility: visible;
      transition: opacity 400ms var(--ease-out), visibility 400ms var(--ease-out);
    }

    .login-gate.hide {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* 门开着时锁定背后的页面：无滚动条、不可滚动 */
    body.login-lock {
      overflow: hidden;
    }

    .login-card {
      width: min(340px, 90vw);
      display: flex;
      flex-direction: column;
      background: var(--apple-card);
      color: var(--apple-card-foreground);
      border: 1px solid var(--apple-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      padding: calc(var(--spacing) * 7) calc(var(--spacing) * 6);
      /* 卡片入场：从下方轻轻浮起 */
      opacity: 0;
      transform: translateY(18px) scale(0.97);
      transition: opacity 300ms var(--ease-out), transform 350ms var(--ease-out);
    }

    .login-gate.show .login-card {
      opacity: 1;
      transform: none;
    }

    /* 退场：卡片向上飘走（与入场自下方浮起方向相反，点空白/登录成功关闭时生效） */
    .login-gate.hide .login-card {
      opacity: 0;
      transform: translateY(-20px) scale(0.98);
    }

    .login-logo {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-align: center;
      color: var(--apple-foreground);
    }

    .login-sub {
      font-size: 13px;
      text-align: center;
      color: var(--apple-muted-foreground);
      margin: 8px 0 24px;
    }

    .login-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
    }

    .login-field span {
      font-size: 12px;
      font-weight: 600;
      color: var(--apple-muted-foreground);
    }

    .login-field input {
      height: 40px;
      padding: 0 12px;
      font-size: 14px;
      font-family: inherit;
      color: var(--apple-foreground);
      background: var(--apple-secondary);
      border: 1px solid var(--apple-border);
      border-radius: 10px;
      outline: none;
      transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
    }

    .login-field input:focus {
      border-color: var(--apple-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--apple-primary) 22%, transparent);
    }

    .login-error {
      font-size: 12px;
      color: #ff3b30;
      margin-bottom: 8px;
    }

    .login-btn {
      height: 42px;
      border: none;
      border-radius: 10px;
      background: var(--apple-primary);
      color: var(--apple-primary-foreground);
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 0.3em;
      cursor: pointer;
      transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
    }

    .login-btn:hover {
      opacity: 0.88;
    }

    .login-btn:active {
      transform: scale(0.98);
    }

    .login-btn:disabled {
      opacity: 0.5;
      cursor: default;
    }

    /* 登录 / 注册并排 */
    .login-actions {
      display: flex;
      gap: 10px;
    }

    .login-actions .login-btn {
      flex: 1;
      letter-spacing: 0.2em;
    }

    .login-register {
      background: var(--apple-secondary);
      color: var(--apple-foreground);
      border: 1px solid var(--apple-border);
    }

    .login-hint {
      font-size: 11px;
      text-align: center;
      color: var(--apple-muted-foreground);
      margin-top: 14px;
    }

    /* 验证码：输入框整行（与其他输入框同宽），发送按钮单独一行 */
    .login-code-btn {
      width: 100%;
      margin-top: 8px;
      font-size: 13px;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .login-code-btn:disabled { opacity: 0.55; cursor: default; }

    /* 忘记密码 / 返回登录 链接行 */
    .login-alt-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-top: 10px;
    }
    .login-link {
      background: none;
      border: none;
      padding: 0;
      font-size: 12px;
      font-family: inherit;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      border-bottom: 1px solid transparent;
      transition: color 180ms var(--ease-out);
    }
    .login-link:hover { color: var(--apple-primary); }

    .login-guest {
      margin: 14px auto 0;
      padding: 2px 0;
      background: none;
      border: none;
      font-size: 13px;
      font-family: inherit;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      border-bottom: 1px solid transparent;
      transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
    }

    .login-guest:hover {
      color: var(--apple-primary);
      border-bottom-color: currentColor;
    }
  /* 功能开关首屏预隐藏：类由 head 内联脚本按 localStorage 缓存在渲染前打上（无闪现），
     applyFeatureFlags / fetchAiConfig 拉到最新配置后会增删同样的类做校正 */
  .ff-docs-off #docsBtn, .ff-album-off #albumBtn,
  .ff-ai-off #aiBtn { display: none !important; }
  .ff-video-off .video-box { display: none !important; }
  /* 首访无缓存：可选功能先藏（默认先藏、配置到了再放行；接口失败或超时兜底放行） */
  .ff-boot-hide #docsBtn, .ff-boot-hide #albumBtn,
  .ff-boot-hide .video-box { display: none !important; }
  .ff-ai-boot-hide #aiBtn { display: none !important; }
    /* ===== 悬浮音乐播放器（参考博客站款，后台「外观」可选替换迷你播放条） =====
       变量映射：原站 CSS 依赖它自己的一套 token（--brand/--surface/--nav-pill-bg 等），
       全部映射到本站语义变量并限定在播放器作用域内，不污染全局 */
    .music-player, .music-player__morph-shell {
      --brand: var(--apple-primary);
      --brand-soft: color-mix(in srgb, var(--apple-primary) 12%, transparent);
      --accent: var(--apple-primary);
      --button-text-on-accent: #ffffff;
      --surface: var(--card);
      --surface-muted: var(--secondary);
      --text: var(--apple-foreground);
      --text-muted: var(--muted-foreground);
      --text-faint: #7f8187;
      --bg: var(--background);
      --border-strong: var(--input);
      --hairline: color-mix(in srgb, var(--border) 72%, transparent);
      --edge: color-mix(in srgb, var(--border) 82%, transparent);
      --nav-pill-bg: rgba(255, 255, 255, 0.85);
      --radius-sm: 0.625rem;
      --radius: 1rem;
      --radius-lg: 1.375rem;
      --shadow-sm: 0 1px 2px rgba(20, 24, 32, 0.05), 0 1px 3px rgba(20, 24, 32, 0.05);
      --shadow: 0 6px 18px rgba(20, 24, 32, 0.07), 0 2px 6px rgba(20, 24, 32, 0.04);
      --shadow-lg: 0 22px 48px rgba(20, 24, 32, 0.13), 0 8px 18px rgba(20, 24, 32, 0.06);
      --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: var(--spring);
      --t-fast: 0.22s;
      --t-base: 0.4s;
      --floating-edge: clamp(1rem, 4vw, 2rem);
    }

    .dark .music-player, .dark .music-player__morph-shell {
      --text-faint: #79828f;
      --nav-pill-bg: rgba(30, 30, 32, 0.85);
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36);
      --shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
      --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.5);
    }

    /* 显隐门控：默认只显示原迷你播放条；后台切到"悬浮播放器"后由 html.using-blog-player 反向
       （首屏缓存 yhuoPlayerMode 会在 head 内联脚本里预挂这个类，防迷你条闪现） */
    .music-player { display: none; }
    html.using-blog-player .music-player { display: block; }
    html.using-blog-player #miniPlayer { display: none !important; }

    @keyframes music-player-spin { 
      100% { rotate: 1turn; }
    }

    @keyframes music-player-bar { 
      100% { height: 0.48rem; }
    }
    .music-player { right: var(--floating-edge,clamp(1rem, 4vw, 2rem)); bottom: calc(var(--floating-edge,clamp(1rem, 4vw, 2rem)) + env(safe-area-inset-bottom,0px)); z-index: 40; pointer-events: none; width: 3rem; height: 3rem; position: fixed; }

    .music-player button, .music-player input { font: inherit; }

    .music-player [hidden] { display: none !important; }

    .music-player button, .music-player a { -webkit-tap-highlight-color: transparent; }

    .music-player svg { fill: none; stroke: currentcolor; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; width: 1.25rem; height: 1.25rem; display: block; }

    .music-player__toggle { border: 1px solid var(--border); background: var(--nav-pill-bg); width: 3rem; height: 3rem; color: var(--text-muted); box-shadow: var(--shadow); cursor: pointer; pointer-events: auto; touch-action: none; transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out); border-radius: 50%; place-items: center; padding: 0px; display: grid; position: relative; overflow: visible; }

    .music-player__toggle > * { pointer-events: none; user-select: none; }

    .music-player__toggle img { -webkit-user-drag: none; }

    .music-player.is-open .music-player__toggle { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); }

    .music-player__disc { background: radial-gradient(circle at center, var(--surface) 0 9%, transparent 10% 20%, #00000052 21%), repeating-radial-gradient(circle, #34373b 0 2px, #202226 3px 4px); color: rgba(255, 255, 255, 0.9); border-radius: 50%; place-items: center; width: 2.15rem; height: 2.15rem; display: grid; position: relative; overflow: hidden; box-shadow: rgba(255, 255, 255, 0.16) 0px 0px 0px 1px inset; }

    .music-player__disc::after { content: ""; z-index: 2; background: var(--brand); border-radius: 50%; position: absolute; inset: 41%; box-shadow: rgba(255, 255, 255, 0.62) 0px 0px 0px 2px; }

    .music-player__disc img { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0px; }

    .music-player__disc-fallback { font-size: 1rem; line-height: 1; }

    .music-player__pulse { border: 2px solid var(--bg); background: var(--brand); opacity: 0; height: 0.72rem; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring); border-radius: 999px; align-items: flex-end; gap: 1px; padding: 0.14rem 0.18rem; display: flex; position: absolute; bottom: 0.05rem; right: -0.18rem; transform: scale(0.7); }

    .music-player__pulse i { background: var(--button-text-on-accent); border-radius: 99px; width: 2px; height: 0.22rem; }

    .music-player__panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 94%, transparent); width: min(22.5rem, -2rem + 100vw); max-height: min(76vh, 39rem); color: var(--text); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 92% 100%; transition: opacity var(--t-base) var(--ease-out-soft), transform var(--t-base) var(--ease-spring), visibility 0s linear var(--t-base); flex-direction: column; display: flex; position: absolute; bottom: calc(100% + 0.75rem); right: 0px; overflow: hidden; transform: translateY(0.75rem) scale(0.95); }

    .music-player__header { border-bottom: 1px solid var(--hairline); justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.05rem 1.1rem 0.85rem; display: flex; }

    .music-player__eyebrow { color: var(--brand); letter-spacing: 0.18em; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 800; line-height: 1; display: inline-flex; }

    .music-player__header h2 { letter-spacing: -0.015em; margin-top: 0.32rem; font-size: 1.12rem; }

    .music-player__equalizer { align-items: flex-end; gap: 2px; height: 0.68rem; display: inline-flex; }

    .music-player__equalizer i { background: currentcolor; border-radius: 99px; width: 2px; }

    .music-player__equalizer i:first-child { height: 45%; }

    .music-player__equalizer i:nth-child(2) { height: 100%; }

    .music-player__equalizer i:nth-child(3) { height: 68%; }

    .music-player__header-actions { gap: 0.25rem; display: flex; }

    .music-player__header-actions :is(a, button), .music-player__controls button { width: 2.15rem; height: 2.15rem; color: var(--text-muted); cursor: pointer; transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring); background: 0px 0px; border: 0px; border-radius: 50%; justify-content: center; align-items: center; padding: 0px; display: inline-flex; }

    .music-player__header-actions :is(a, button):hover, .music-player__controls button:hover:not(:disabled) { color: var(--brand); background: var(--brand-soft); }

    .music-player__header-actions :is(a, button):active, .music-player__controls button:active:not(:disabled) { transform: scale(0.9); }

    .music-player__header-actions button { appearance: none; }

    .music-player__now { grid-template-columns: 4.5rem minmax(0px, 1fr); align-items: center; gap: 0.9rem; padding: 1rem 1.1rem 0.8rem; display: grid; }

    .music-player__cover { border: 1px solid var(--edge); background: radial-gradient(circle at center, var(--surface) 0 8%, transparent 9% 19%, #0000004d 20%), repeating-radial-gradient(circle, #3a3c41 0 3px, #222429 4px 6px); color: rgba(255, 255, 255, 0.9); border-radius: 50%; place-items: center; width: 4.5rem; height: 4.5rem; display: grid; position: relative; overflow: hidden; box-shadow: rgba(20, 24, 32, 0.14) 0px 8px 20px; }

    .music-player__cover img { object-fit: cover; width: 100%; height: 100%; position: absolute; inset: 0px; }

    .music-player__cover-hole { z-index: 2; background: var(--surface); border-radius: 50%; position: absolute; inset: 42%; box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 0px 3px, rgba(0, 0, 0, 0.1) 0px 0px 0px 4px; }

    .music-player__cover-fallback { font-size: 1.45rem; }

    .music-player__meta { min-width: 0px; }

    .music-player__status { min-height: 1.25rem; color: var(--brand); letter-spacing: 0.04em; margin-bottom: 0.18rem; font-size: 0.7rem; font-weight: 700; display: block; }

    .music-player__meta > span:last-child { color: var(--text-muted); margin-top: 0.1rem; font-size: 0.82rem; }

    .music-player__timeline input { width: 100%; height: 1rem; accent-color: var(--brand); cursor: pointer; margin: 0px; display: block; }

    .music-player__time { color: var(--text-faint); font-variant-numeric: tabular-nums; justify-content: space-between; margin-top: -0.05rem; font-size: 0.68rem; display: flex; }

    .music-player__controls button:disabled { cursor: default; opacity: 0.35; }

    .music-player__controls .music-player__play { background: var(--accent); width: 2.85rem; height: 2.85rem; color: var(--button-text-on-accent); box-shadow: var(--shadow-sm); margin-inline: 0.15rem; }

    .music-player__play .music-player__play-icon { fill: currentcolor; stroke: none; transform: translate(1px); }

    .music-player__queue-head { border-top: 1px solid var(--hairline); justify-content: space-between; align-items: baseline; padding: 0.68rem 1.1rem 0.52rem; display: flex; }

    .music-player__queue-head > span { letter-spacing: 0.12em; font-size: 0.76rem; font-weight: 800; }

    .music-player__queue-head small { color: var(--text-faint); font-size: 0.72rem; }

    .music-player__track-button { border-radius: var(--radius-sm); width: 100%; color: var(--text); text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); background: 0px 0px; border: 0px; grid-template-columns: 1.75rem minmax(0px, 1fr); align-items: center; gap: 0.55rem; padding: 0.58rem 0.55rem; display: grid; }

    .music-player__track-button:hover { background: var(--surface-muted); }

    .music-player__track-button[aria-current="true"] { background: var(--brand-soft); }

    .music-player__track-number { color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: center; font-size: 0.72rem; }

    .music-player__track-button[aria-current="true"] .music-player__track-number { color: var(--brand); font-weight: 800; }

    .music-player__track-copy strong { font-size: 0.83rem; font-weight: 650; line-height: 1.35; }

    .music-player__track-copy small { color: var(--text-faint); margin-top: 0.08rem; font-size: 0.7rem; }

    .music-player__footer { border-top: 1px solid var(--hairline); color: var(--text-faint); flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.45rem 0.8rem; padding: 0.72rem 1.1rem 0.88rem; font-size: 0.68rem; display: flex; }

    .music-player__footer a, .music-player__footer button { color: var(--brand); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; cursor: pointer; background: 0px 0px; border: 0px; align-items: center; gap: 0.2rem; padding: 0px; font-weight: 700; display: inline-flex; }

    .music-player__footer > span { flex-basis: 100%; }

    @media ((prefers-reduced-motion: no-preference)){
    .music-player__disc { animation: 20s linear 0s infinite normal none paused music-player-spin; }
    }

    @media ((prefers-reduced-motion: no-preference)){
    .music-player.is-playing:not(.is-loading) .music-player__disc { animation-play-state: running; }
    }

    @media ((prefers-reduced-motion: no-preference)){
    .music-player.is-playing .music-player__pulse i:first-child { animation: 0.8s ease-in-out 0s infinite alternate none running music-player-bar; }
    }

    @media ((prefers-reduced-motion: no-preference)){
    .music-player.is-playing .music-player__pulse i:nth-child(2) { animation: 0.58s ease-in-out 0.12s infinite alternate-reverse none running music-player-bar; }
    }

    @media ((prefers-reduced-motion: no-preference)){
    .music-player.is-playing .music-player__pulse i:nth-child(3) { animation: 0.72s ease-in-out 0.2s infinite alternate none running music-player-bar; }
    }

    @keyframes music-player-spin { 
      100% { rotate: 1turn; }
    }

    @keyframes music-player-bar { 
      100% { height: 0.48rem; }
    }

    @media ((width <= 460px)){
    .music-player__panel { width: min(22.5rem, -1.25rem + 100vw); max-height: min(72vh, 36rem); }
    }

    @media ((width <= 460px)){
    .music-player__queue { max-height: 10rem; }
    }

    @media ((prefers-reduced-motion: reduce)){
    .music-player__pulse { opacity: 0; }
    }

    .music-player { width: 3.25rem; height: 3.25rem; }

    .music-player__toggle { width: 3.25rem; height: 3.25rem; transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), translate var(--t-base) var(--ease-out-soft), scale var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out); padding: 0.3rem; transform: translate(0px, 0px) scale(1); }

    .music-player__toggle:hover { transform: translateY(-0.2rem) scale(1.025); }

    .music-player__disc { width: 2.38rem; height: 2.38rem; }

    .music-player__panel { border-radius: calc(var(--radius-lg) + 2px); background: linear-gradient(145deg, color-mix(in srgb, var(--brand-soft) 42%, transparent), transparent 34%), color-mix(in srgb, var(--surface) 94%, transparent); transform-origin: 94% 100%; width: min(24rem, -2rem + 100vw); max-height: min(78vh, 42rem); transition: opacity .28s var(--ease-out), translate .28s var(--ease-out-soft), visibility 0s linear .28s; will-change: opacity, translate; bottom: calc(100% + 0.85rem); transform: translateY(0.85rem); }

    .music-player.is-open .music-player__panel { transition-delay: 0s; transform: translate(0px, 0px); }

    .music-player__header { align-items: center; padding: 1rem 1rem 0.82rem; }

    .music-player__eyebrow { letter-spacing: 0.15em; font-size: 0.61rem; }

    .music-player__header h2 { margin-top: 0.38rem; font-size: 1.08rem; }

    .music-player__header-actions { gap: 0.12rem; }

    .music-player__header-actions :is(a, button) { width: 2.55rem; height: 2.55rem; }

    .music-player__header-actions :is(a, button):focus-visible, .music-player__controls button:focus-visible, .music-player__track-button:focus-visible { outline-offset: 1px; }

    .music-player__now { border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--hairline)); border-radius: calc(var(--radius) + 2px); background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface)); grid-template-columns: 5.25rem minmax(0px, 1fr); gap: 0.9rem; margin: 0.82rem 1rem 0.6rem; padding: 0.78rem; }

    .music-player__cover { border-radius: var(--radius); background: var(--surface-muted); width: 5.25rem; height: 5.25rem; box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 13%, transparent); }

    .music-player__status { letter-spacing: 0.02em; min-height: 1.15rem; margin-bottom: 0.22rem; font-size: 0.66rem; }

    .music-player__meta strong { font-size: 1.03rem; line-height: 1.4; }

    .music-player__meta > span:last-child { margin-top: 0.18rem; font-size: 0.78rem; }

    .music-player__timeline input { appearance: none; background: 0px 0px; height: 1.2rem; }

    .music-player__timeline input::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--brand) 0 var(--music-progress,0%), var(--border-strong) var(--music-progress,0%) 100%); border-radius: 999px; height: 0.3rem; }

    .music-player__time { margin-top: -0.08rem; font-size: 0.64rem; }

    .music-player__controls { gap: 0.32rem; padding: 0.18rem 1rem 0.92rem; }

    .music-player__controls .music-player__play { width: 3.35rem; height: 3.35rem; box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent); margin-inline: 0.28rem; position: relative; }

    .music-player.is-loading .music-player__play { scale: 0.96; }

    .music-player__queue-head { padding: 0.72rem 1rem 0.48rem; }

    .music-player__queue-head > span { letter-spacing: 0.1em; font-size: 0.72rem; }

    .music-player__queue { scrollbar-gutter: auto; max-height: 14.25rem; padding: 0.12rem 0.62rem 0.65rem; }

    .music-player__track-button { border-radius: calc(var(--radius-sm) + 2px); min-height: 3.4rem; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out); border: 1px solid rgba(0, 0, 0, 0); grid-template-columns: 2.55rem minmax(0px, 1fr); gap: 0.68rem; padding: 0.42rem 0.5rem; }

    .music-player__track-button[aria-current="true"] { border-color: color-mix(in srgb, var(--brand) 24%, transparent); background: color-mix(in srgb, var(--brand-soft) 68%, var(--surface)); }

    .music-player__track-number { background: var(--surface-muted); place-items: center; display: grid; }

    .music-player__track-copy strong { font-size: 0.8rem; font-weight: 680; }

    .music-player__track-copy small { margin-top: 0.12rem; font-size: 0.67rem; }

    .music-player__footer { background: color-mix(in srgb, var(--surface-muted) 56%, transparent); gap: 0.35rem 0.6rem; padding: 0.68rem 1rem 0.78rem; font-size: 0.64rem; }

    .music-player__footer > span { text-align: right; flex: 1 1 auto; }

    @media ((width <= 520px)){
    .music-player__panel { width: min(24rem, -1.5rem + 100vw); max-height: min(76vh, 40rem); }
    }

    @media ((width <= 520px)){
    .music-player__now { grid-template-columns: 4.65rem minmax(0px, 1fr); }
    }

    @media ((width <= 520px)){
    .music-player__cover { width: 4.65rem; height: 4.65rem; }
    }

    @media ((width <= 520px)){
    .music-player__queue { max-height: 11.5rem; }
    }

    .music-player { width: 3.25rem; height: 3.25rem; right: clamp(1.25rem, 3vw, 2.85rem); }

    .music-player .music-player__icon { flex: 0 0 auto; place-items: center; width: 1.25rem; height: 1.25rem; line-height: 0; display: inline-grid; }

    .music-player .music-player__icon svg { fill: currentcolor; stroke: none; width: 100%; height: 100%; display: block; }

    .music-player__toggle { border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent); background: color-mix(in srgb, var(--surface) 92%, transparent); width: 3.25rem; height: 3.25rem; color: var(--text-muted); box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 12%, transparent), inset 0 1px 0 #ffffffb3; transition: color .18s var(--ease-out), border-color .18s var(--ease-out), translate .26s var(--ease-out), scale .26s var(--ease-out), box-shadow .26s var(--ease-out); border-radius: 50%; padding: 0.28rem; transform: translate(0px, 0px) scale(1); }

    .music-player__toggle:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 48%, var(--border)); box-shadow: 0 14px 34px color-mix(in srgb, var(--text) 16%, transparent), inset 0 1px 0 #ffffffb8; transform: translateY(-0.16rem) scale(1.02); }

    .music-player__toggle:active { transform: translate(0px, 0px) scale(0.95); }

    .music-player__disc { background: var(--surface-muted); width: 2.55rem; height: 2.55rem; color: var(--brand); box-shadow: none; border-radius: 50%; }

    .music-player__disc::after { content: none; }

    .music-player__disc .music-player__disc-fallback { width: 1.1rem; height: 1.1rem; }

    .music-player__disc img { border-radius: inherit; }

    .music-player__pulse { border: 2px solid var(--bg); background: var(--brand); width: 1.08rem; height: 1.08rem; color: var(--button-text-on-accent); opacity: 0; transition: opacity .18s var(--ease-out), scale .26s var(--ease-out); border-radius: 50%; padding: 0.2rem; bottom: 0px; right: -0.18rem; transform: scale(0.72); }

    .music-player.is-playing .music-player__pulse { opacity: 1; transform: scale(1); }

    .music-player__panel { border: 1px solid color-mix(in srgb, var(--border-strong) 74%, transparent); background: color-mix(in srgb, var(--surface) 91%, transparent); width: min(24rem, -2rem + 100vw); max-height: min(78dvh, 41.5rem); color: var(--text); box-shadow: 0 28px 70px color-mix(in srgb, var(--text) 17%, transparent), 0 6px 18px color-mix(in srgb, var(--text) 7%, transparent), inset 0 1px 0 #ffffffbd; opacity: 0; visibility: hidden; pointer-events: none; transform-origin: center bottom; transition: opacity .22s var(--ease-out), translate .3s var(--ease-out-soft), visibility 0s linear .3s; will-change: auto; contain: paint; border-radius: 1.8rem; bottom: 1.8rem; right: 0px; transform: translateY(0.75rem) scale(1); }

    .music-player.is-open .music-player__panel { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; transform: translate(0px, 0px) scale(1); }

    .music-player.is-open .music-player__toggle { opacity: 0; visibility: hidden; pointer-events: none; }

    .music-player__header { border-bottom: 0px; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem; padding: 0.82rem 1.15rem 0.55rem 1.3rem; display: flex; }

    .music-player__playing-state { align-items: center; gap: 0.58rem; min-width: 0px; display: flex; }

    .music-player__playing-state .music-player__status-icon { width: 1.15rem; height: 1.15rem; color: var(--brand); }

    .music-player__status { min-width: 0px; min-height: 0px; color: var(--text); letter-spacing: 0.01em; text-overflow: ellipsis; white-space: nowrap; margin: 0px; font-size: 0.76rem; font-weight: 650; display: block; overflow: hidden; }

    .music-player__header-actions { align-items: center; gap: 0.08rem; display: flex; }

    .music-player__header-actions [data-music-mute] { display: none; }

    .music-player.is-muted .music-player__header-actions [data-music-mute] { display: inline-flex; }

    .music-player__header-actions :is(a, button), .music-player__controls button, .music-player__favorite { width: 2.5rem; height: 2.5rem; color: var(--text-muted); cursor: pointer; transition: color .18s var(--ease-out), background-color .18s var(--ease-out), scale .22s var(--ease-out); background: 0px 0px; border: 0px; border-radius: 50%; justify-content: center; align-items: center; padding: 0px; display: inline-flex; }

    .music-player__header-actions :is(a, button):hover, .music-player__controls button:hover:not(:disabled), .music-player__favorite:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--surface-muted) 70%, transparent); }

    .music-player__header-actions :is(a, button):active, .music-player__controls button:active:not(:disabled), .music-player__favorite:active:not(:disabled) { transform: scale(0.9); }

    .music-player__header-actions :is(a, button):disabled, .music-player__controls button:disabled, .music-player__favorite:disabled { cursor: default; opacity: 0.38; }

    .music-player__now { background: 0px 0px; border: 0px; border-radius: 0px; grid-template-columns: 7.7rem minmax(0px, 1fr) 2.5rem; align-items: center; gap: 1.05rem; margin: 0px; padding: 0.7rem 1.2rem 1.05rem; display: grid; }

    .music-player__cover { border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); background: var(--surface-muted); width: 7.7rem; height: 7.7rem; color: var(--brand); box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 16%, transparent); border-radius: 1.45rem; }

    .music-player__cover img { border-radius: inherit; }

    .music-player__cover .music-player__cover-fallback { width: 2rem; height: 2rem; }

    .music-player__meta { align-self: center; min-width: 0px; }

    .music-player__meta strong, .music-player__meta > span:last-child { text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden; }

    .music-player__meta strong { color: var(--text); letter-spacing: -0.015em; font-size: 1.08rem; font-weight: 720; line-height: 1.42; }

    .music-player__meta > span:last-child { color: var(--text-muted); white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 0.32rem; font-size: 0.78rem; line-height: 1.45; display: -webkit-box; }

    .music-player__favorite { align-self: center; }

    .music-player__favorite .music-player__heart-fill-icon, .music-player__favorite.is-favorite .music-player__heart-icon { display: none; }

    .music-player__favorite.is-favorite .music-player__heart-fill-icon { display: inline-grid; }

    .music-player__favorite.is-favorite { color: var(--brand); }

    .music-player__timeline { padding: 0.18rem 1.3rem 0.28rem; }

    .music-player__seek { --music-progress: 0%; height: 1.15rem; position: relative; }

    .music-player__seek-track { background: color-mix(in srgb, var(--border-strong) 76%, transparent); pointer-events: none; border-radius: 999px; height: 0.22rem; position: absolute; top: 50%; left: 0px; right: 0px; overflow: hidden; translate: 0px -50%; }

    .music-player__seek-fill { width: var(--music-progress); border-radius: inherit; background: var(--brand); height: 100%; display: block; }

    .music-player__timeline input { z-index: 1; appearance: none; cursor: pointer; background: 0px 0px; width: 100%; height: 100%; margin: 0px; position: absolute; inset: 0px; }

    .music-player__timeline input:disabled { cursor: default; opacity: 0.58; }

    .music-player__timeline input::-webkit-slider-runnable-track { background: 0px 0px; height: 0.22rem; }

    .music-player__timeline input::-webkit-slider-thumb { appearance: none; border: 3px solid var(--surface); background: var(--brand); width: 0.82rem; height: 0.82rem; box-shadow: 0 2px 7px color-mix(in srgb, var(--text) 24%, transparent); border-radius: 50%; margin-top: -0.3rem; }

    .music-player__time { color: var(--text-faint); font-variant-numeric: tabular-nums; justify-content: space-between; margin-top: 0.04rem; font-size: 0.68rem; line-height: 1.3; display: flex; }

    .music-player__controls { justify-content: space-between; align-items: center; gap: 0.22rem; padding: 0.45rem 1.2rem 1.1rem; display: flex; }

    .music-player__controls button { width: 2.7rem; height: 2.7rem; }

    .music-player__controls button[aria-pressed="true"], .music-player__controls button[aria-pressed="true"]:hover:not(:disabled) { color: var(--brand); background: var(--brand-soft); }

    .music-player__controls .music-player__play { background: var(--brand); width: 4.1rem; height: 4.1rem; color: var(--button-text-on-accent); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 36%, transparent); margin: 0px 0.18rem; position: relative; }

    .music-player__controls .music-player__play:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 88%, var(--text)); color: var(--button-text-on-accent); transform: scale(1.04); }

    .music-player__controls .music-player__play .music-player__icon { width: 1.42rem; height: 1.42rem; }

    .music-player .music-player__pause-icon, .music-player .music-player__muted-icon, .music-player.is-playing .music-player__play-icon, .music-player.is-muted .music-player__volume-icon { display: none; }

    .music-player.is-playing .music-player__pause-icon, .music-player.is-muted .music-player__muted-icon { display: inline-grid; }

    .music-player.is-loading .music-player__play { opacity: 0.78; scale: 0.96; }

    .music-player__queue-head { border-top: 1px solid var(--hairline); align-items: center; gap: 0.65rem; padding: 0.9rem 1.25rem 0.55rem; display: flex; }

    .music-player__queue-head > span { color: var(--text); letter-spacing: 0.01em; flex: 1 1 auto; font-size: 0.76rem; font-weight: 720; }

    .music-player__queue-head small { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: 0.69rem; }

    .music-player__queue-head button { background: var(--brand-soft); color: var(--brand); cursor: pointer; border: 0px; border-radius: 999px; padding: 0.2rem 0.5rem; font-size: 0.67rem; font-weight: 700; }

    .music-player__queue { overscroll-behavior: contain; scrollbar-gutter: stable; flex: 1 1 11.65rem; min-height: 4.4rem; max-height: 13.4rem; margin: 0px; padding: 0.2rem 0.72rem 0.78rem; list-style: none; overflow-y: auto; }

    .music-player__queue > li { content-visibility: auto; contain-intrinsic-size: auto 4.25rem; }

    .music-player__queue::-webkit-scrollbar { width: 0.34rem; }

    .music-player__queue::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-faint) 30%, transparent); border-radius: 999px; }

    .music-player__empty { color: var(--text-muted); text-align: center; padding: 1.4rem 0.7rem 1.7rem; font-size: 0.78rem; line-height: 1.6; }

    .music-player__track-button { width: 100%; min-height: 4.25rem; color: var(--text); text-align: left; cursor: pointer; transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), translate .22s var(--ease-out); background: 0px 0px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 0.95rem; grid-template-columns: 3rem minmax(0px, 1fr) auto; align-items: center; gap: 0.78rem; padding: 0.42rem 0.6rem; display: grid; translate: 0px; }

    .music-player__track-button:hover { background: color-mix(in srgb, var(--surface-muted) 72%, transparent); translate: 0.08rem; }

    .music-player__track-button[aria-current="true"] { background: color-mix(in srgb, var(--brand-soft) 72%, var(--surface)); border-color: rgba(0, 0, 0, 0); }

    .music-player__track-art, .music-player__track-number { border-radius: 0.78rem; width: 3rem; height: 3rem; }

    .music-player__track-art { object-fit: cover; background: var(--surface-muted); display: block; }

    .music-player__track-number { background: var(--surface-muted); color: var(--text-faint); font-variant-numeric: tabular-nums; place-items: center; font-size: 0.68rem; display: grid; }

    .music-player__track-button[aria-current="true"] .music-player__track-art { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 62%, transparent); }

    .music-player__track-copy { min-width: 0px; }

    .music-player__track-copy strong, .music-player__track-copy small { text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden; }

    .music-player__track-copy strong { color: var(--text); font-size: 0.79rem; font-weight: 680; line-height: 1.4; }

    .music-player__track-copy small { color: var(--text-faint); margin-top: 0.1rem; font-size: 0.67rem; line-height: 1.4; }

    .music-player__track-button[aria-current="true"] .music-player__track-copy strong { color: var(--brand); }

    .music-player__track-position { min-width: 1.7rem; color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: right; font-size: 0.66rem; }

    @media ((width <= 520px)){
    .music-player { right: max(.75rem, env(safe-area-inset-right,0px)); bottom: max(.75rem, env(safe-area-inset-bottom,0px)); }
    /* 避让右下角外观抽屉箭头（right 0~33px / bottom 16~76px、z 160 高于球 z 40）：博客款球整体上移 68px */
    body.using-blog-player .music-player { bottom: calc(max(.75rem, env(safe-area-inset-bottom,0px)) + 68px); }
    }

    @media ((width <= 520px)){
    .music-player__header { min-height: 4.15rem; padding: 0.72rem 0.76rem 0.55rem 1rem; }
    }

    @media ((width <= 520px)){
    .music-player__header-actions :is(a, button) { width: 3rem; height: 3rem; }
    }

    @media ((width <= 520px)){
    .music-player__now { grid-template-columns: 5.65rem minmax(0px, 1fr) 2.25rem; gap: 0.72rem; padding: 0.58rem 0.92rem 0.85rem; }
    }

    @media ((width <= 520px)){
    .music-player__cover { border-radius: 1.15rem; width: 5.65rem; height: 5.65rem; }
    }

    @media ((width <= 520px)){
    .music-player__meta strong { font-size: 0.94rem; }
    }

    @media ((width <= 520px)){
    .music-player__timeline { padding-inline: 1rem; }
    }

    @media ((width <= 520px)){
    .music-player__controls { padding: 0.3rem 0.78rem 0.85rem; }
    }

    @media ((width <= 520px)){
    .music-player__controls button { width: 2.8rem; height: 2.8rem; }
    }

    @media ((width <= 520px)){
    .music-player__controls .music-player__play { width: 3.62rem; height: 3.62rem; margin: 0px 0.06rem; }
    }

    @media ((width <= 520px)){
    .music-player__queue-head { padding: 0.75rem 1rem 0.45rem; }
    }

    @media ((width <= 520px)){
    .music-player__queue { max-height: 10.8rem; padding-inline: 0.52rem; }
    }

    @media ((width <= 520px)){
    .music-player__track-button { grid-template-columns: 2.65rem minmax(0px, 1fr) auto; gap: 0.65rem; min-height: 3.82rem; padding: 0.36rem 0.48rem; }
    }

    @media ((width <= 520px)){
    .music-player__track-art, .music-player__track-number { border-radius: 0.68rem; width: 2.65rem; height: 2.65rem; }
    }

    @media ((height <= 620px) and (width >= 521px)){
    .music-player__panel { max-height: calc(-5.7rem + 100dvh); }
    }

    @media ((height <= 620px) and (width >= 521px)){
    .music-player__now { grid-template-columns: 5.8rem minmax(0px, 1fr) 2.5rem; padding-block: 0.45rem 0.75rem; }
    }

    @media ((height <= 620px) and (width >= 521px)){
    .music-player__cover { border-radius: 1.1rem; width: 5.8rem; height: 5.8rem; }
    }

    @media ((height <= 620px) and (width >= 521px)){
    .music-player__queue { max-height: 8.2rem; }
    }

    @media ((prefers-reduced-motion: reduce)){
    .music-player__toggle, .music-player__disc, .music-player__panel, .music-player__pulse, .music-player__header-actions :is(a, button), .music-player__controls button, .music-player__favorite, .music-player__track-button { transition-duration: 0.01ms !important; animation: auto ease 0s 1 normal none running none !important; }
    }

    @media ((prefers-reduced-motion: reduce)){
    .music-player__track-button:hover { translate: 0px; }
    }

    .music-player__header { touch-action: none; }

    .music-player.is-dragging .music-player__panel, .music-player.is-dragging .music-player__panel.is-open { transition: none; }

    .music-player[data-music-size="small"] .music-player__panel { width: min(18.5rem, -2rem + 100vw); }

    .music-player[data-music-size="small"] .music-player__now { grid-template-columns: 5rem minmax(0px, 1fr) 2.5rem; }

    .music-player[data-music-size="small"] .music-player__cover { width: 5rem; height: 5rem; }

    .music-player[data-music-size="small"] .music-player__meta strong { font-size: 0.94rem; }

    .music-player[data-music-size="large"] .music-player__panel { width: min(28rem, -2rem + 100vw); }

    .music-player[data-music-size="large"] .music-player__now { grid-template-columns: 9.5rem minmax(0px, 1fr) 2.5rem; }

    .music-player[data-music-size="large"] .music-player__cover { width: 9.5rem; height: 9.5rem; }

    .music-player[data-music-size="large"] .music-player__meta strong { font-size: 1.2rem; }

    @media ((width <= 520px)){
    .music-player[data-music-size="small"] .music-player__panel, .music-player[data-music-size="large"] .music-player__panel { width: min(25rem, -1rem + 100vw); }
    }

    .music-player__morph-shell { z-index: 39; box-sizing: border-box; pointer-events: none; background: color-mix(in srgb, var(--surface) 91%, transparent); border: 1px solid color-mix(in srgb, var(--border-strong) 74%, transparent); box-shadow: 0 28px 70px color-mix(in srgb, var(--text) 17%, transparent), 0 6px 18px color-mix(in srgb, var(--text) 7%, transparent), inset 0 1px 0 #ffffffbd; will-change: left, top, width, height, border-radius, opacity; position: fixed; overflow: hidden; }

    .music-player:is([data-music-morph-state="opening"], [data-music-morph-state="closing"]) .music-player__panel { opacity: 1; visibility: visible; pointer-events: none; box-shadow: none; backdrop-filter: none; background: 0px 0px; border-color: rgba(0, 0, 0, 0); transition: none; translate: 0px; }

    .music-player[data-music-morph-state="closed"] .music-player__panel { transition: none; }

    .music-player[data-music-morph-state="closing"] .music-player__toggle { opacity: 0; visibility: visible; pointer-events: none; }

    @media ((width <= 859px)){
    .music-player__toggle { width: 48px; height: 48px; }
    }

    @media ((width <= 859px)){
    .music-player.is-open .music-player__panel { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: max(.5rem, env(safe-area-inset-bottom,0px)); width: 100% !important; max-height: min(78dvh, -4rem + 100dvh) !important; position: fixed !important; inset: auto 0px 0px !important; }
    }

    @media ((width <= 859px)){
    .music-player__header { touch-action: auto; cursor: default; }
    }

    @media ((width <= 859px)){
    .music-player__queue { overscroll-behavior: contain; }
    }

    @media ((width <= 859px)){
    .music-player.is-open ~ .back-top, body:has(.music-player.is-open) .back-top { opacity: 0; pointer-events: none; }
    }

    .music-player { view-transition-name: none !important; }



    /* ===== 多页面常规化（2026-09-05：栏目拆独立页 /tools/ /docs/ /ai/ /board/）=====
       栏目内容原为全屏毛玻璃层（fixed + .show 显隐），现在是常规页面：
       容器回文档流、去毛玻璃壳，内容排在悬浮导航下方随页滚动（进场沿用 fadeInUp）。 */

    html[data-page]:not([data-page="home"]) main.page-main {
      padding-top: 96px; /* 顶部留白容得下悬浮胶囊（fixed 不占流） */
      padding-bottom: 24px;
    }

    html[data-page="docs"] #docsView,
    html[data-page="board"] #boardView,
    html[data-page="ai"] #aiView {
      position: static;
      z-index: auto;
      opacity: 1;
      visibility: visible;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: none;
      animation: pageFade 600ms var(--ease-out) both;
    }

    /* AI 页保持全高聊天布局：消息区内部滚动，输入条钉在视口底部；
       顶部留白 96→68px（2026-09-06 用户要求"向上移动不要太多空"——96px 在胶囊下沿(~58px)
       之下还有近 40px 空档；68 = 胶囊下沿 + 余量），高度公式同步改；头部标题行压缩上下内边距。
       注意选择器要带 :not() 抬到与上方 5145 行子页通用规则同特异性（0-3-2），靠源码顺序取胜 */
    html[data-page="ai"]:not([data-page="home"]) main.page-main { padding-top: 68px; }
    html[data-page="ai"] #aiView {
      height: calc(100dvh - 68px - 24px);
    }
    /* header.album-bar 抬一档特异性：5191 行的子页 14px 规则同分但更靠后会 otherwise 反超 */
    html[data-page="ai"] .ai-view header.album-bar { padding: 8px 0; }

    /* AI 聊天区的入场态原由 .ai-view.show 门控（独立页没有 .show，直接放行） */
    html[data-page="ai"] .ai-chat {
      transform: none;
      opacity: 1;
    }

    /* 页面容器入场只做透明度：fadeInUp 的 transform 配 fill:both 会持续占位，
       把 position:fixed 的 AI 历史抽屉的包含块改成视图自身，抽屉会被顶出屏幕左缘 */
    @keyframes pageFade {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    html[data-page="docs"] #docsView,
    html[data-page="board"] #boardView,
    html[data-page="ai"] #aiView {
      animation: pageFade 600ms var(--ease-out) both;
    }

    html[data-page]:not([data-page="home"]) .album-bar {
      padding: 14px 0; /* 已在 main 的内边距里，不再 6vw 双重留白 */
      transform: none;
      opacity: 1;
      transition: none;
    }

    html[data-page]:not([data-page="home"]) .tools-scroll,
    html[data-page]:not([data-page="home"]) .docs-scroll {
      flex: none;
      overflow: visible;
      padding: 20px 0 32px;
      transform: none;
      opacity: 1;
      transition: none;
    }

    @media (prefers-reduced-motion: reduce) {
      html[data-page] #docsView,
      html[data-page] #boardView,
      html[data-page] #aiView { animation: none; }
    }

    /* =========================
       链接预览卡片（参考博客站 fx 特效接入，2026-09-06；源码 博客动画源码/06 + demo.html）
       悬停白名单站点外链 150ms 弹出；卡片 DOM 由 common.js 尾部注入，白名单也在那里。
       颜色/阴影/缓动全部映射站点语义变量，深浅主题与主题色自动跟随
       ========================= */
    .fx-link-preview {
      --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
      position: fixed;
      inset: 0;
      z-index: 320; /* 低于全站搜索 350/登录卡 400，高于灯箱 200 */
      pointer-events: none;
    }

    .fx-link-preview__card {
      position: absolute;
      top: 0;
      left: 0;
      display: grid;
      grid-template-rows: 112px minmax(0, 1fr);
      width: min(320px, calc(100vw - 2rem));
      height: 190px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 1rem;
      background: color-mix(in srgb, var(--card) 94%, transparent);
      color: var(--foreground);
      box-shadow: var(--shadow-xl);
      opacity: 0;
      visibility: hidden;
      translate: 0.4rem 0.4rem;
      transition: opacity 0.18s var(--ease-out), translate 0.2s var(--lp-ease), visibility 0s linear 0.2s;
    }

    .fx-link-preview.is-visible .fx-link-preview__card {
      opacity: 1;
      visibility: visible;
      translate: 0 0;
      transition-delay: 0s;
      animation: fx-preview-in 0.28s var(--spring) both;
    }

    .fx-link-preview__domain {
      display: flex;
      align-items: center;
      overflow: hidden;
      color: var(--primary);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .fx-link-preview__visual {
      position: relative;
      height: 100%;
      overflow: hidden;
      background: #24292f;
      color: #ffffff;
    }

    .fx-link-preview[data-preview-site="bilibili"] .fx-link-preview__visual { background: #fb7299; }
    .fx-link-preview[data-preview-site="blog"] .fx-link-preview__visual,
    .fx-link-preview[data-preview-site="site"] .fx-link-preview__visual {
      background: color-mix(in srgb, var(--primary) 82%, #000);
    }

    /* 站内页面的实时缩略 iframe：common.js 按路径创建并缓存，加载完成前露出
       下层彩色兜底当 loading 态；pointer-events:none 纯展示不可交互。
       只显示 is-current 那一张（display 切换不触发 iframe 重载，缓存依然秒开） */
    .fx-link-preview__page {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: none;
      width: 1280px;
      height: 448px;
      border: 0;
      background: transparent;
      transform: scale(0.25); /* 1280 宽整页缩进 320px 卡片，0.25 后正好 320×112 铺满视觉区 */
      transform-origin: 0 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s var(--ease-out);
    }

    .fx-link-preview__page.is-current { display: block; }
    .fx-link-preview__page.is-ready { opacity: 1; }

    .fx-link-preview__image {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .fx-link-preview__fallback {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.7rem;
      padding: 1rem;
    }

    .fx-link-preview__mark { display: none; justify-content: center; align-items: center; }

    .fx-link-preview[data-preview-site="github"] .fx-link-preview__mark--github,
    .fx-link-preview[data-preview-site="bilibili"] .fx-link-preview__mark--bilibili { display: inline-flex; }

    .fx-link-preview__context {
      overflow: hidden;
      max-width: 13rem;
      font-size: 0.88rem;
      font-weight: 700;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .fx-link-preview__meta {
      display: grid;
      gap: 0.12rem;
      padding: 0.7rem 0.85rem 0.78rem;
    }

    .fx-link-preview__title {
      display: -webkit-box;
      overflow: hidden;
      color: var(--foreground);
      font-size: 0.8rem;
      line-height: 1.4;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .fx-link-preview__desc {
      display: -webkit-box;
      overflow: hidden;
      color: var(--muted-foreground);
      font-size: 0.68rem;
      line-height: 1.45;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .fx-link-preview.is-visible .fx-link-preview__card::after {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      pointer-events: none;
      background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%);
      animation: fx-preview-glow 2.4s ease-in-out infinite;
    }

    @keyframes fx-preview-in {
      0% { opacity: 0; scale: 0.92; }
      100% { opacity: 1; scale: 1; }
    }

    @keyframes fx-preview-glow {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .fx-link-preview.is-visible .fx-link-preview__card,
      .fx-link-preview.is-visible .fx-link-preview__card::after { animation: none; }
    }

    /* 顶栏外链标识：新标签打开的导航项带 ↗ */
    .site-nav a[target="_blank"]::after {
      content: "↗";
      margin-left: 2px;
      font-size: 0.72em;
      opacity: 0.55;
    }


    /* =========================
       预览演示页（/blog/，2026-09-06：第八页，对齐 博客动画源码/demo.html 的链接预览演示区）
       顶栏「预览」为站内链接（id blogBtn）；页面就是两张示例外链，悬停看预览卡。
       卡片本体样式在上方「链接预览卡片」段
       ========================= */
    html[data-page="blog"] .tool-block { max-width: 940px; margin: 0 auto; }

    .preview-lead {
      margin: 0 0 16px;
      line-height: 1.9;
    }

    .preview-links {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin: 0;
      font-size: 1.05rem;
    }

    .preview-links a {
      color: var(--primary);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
    }

    .preview-links a:hover { border-bottom-style: solid; }

    /* =========================
       AI 页隐藏播放条（2026-09-06 用户要求）：迷你条/悬浮球都不显示，聊天输入条独占底部；
       音乐本身不打断——pjax 只换 <main>，外壳的 audio 不参与换页，进 AI 页照常续播
       ========================= */
    html[data-page="ai"] #miniPlayer { display: none !important; }
    html.using-blog-player[data-page="ai"] .music-player { display: none !important; }

    /* AI 页锁视口（2026-09-06 手机实报：页脚跟在全高聊天区下面把页面撑出 100+px 可滚，
       输入条会随页面滚走、与消息区内部滚动形成双滚混乱）：
       AI 页禁页面滚动、页脚不参与——应用式全高布局，仅消息区内部滚动，桌面手机统一 */
    html[data-page="ai"] body { overflow: hidden; height: 100dvh; }
    html[data-page="ai"] .site-footer { display: none; }

    /* AI 历史抽屉是模态层：整体（含遮罩）抬到顶栏胶囊之上——手机上抽屉从胶囊底下钻过，
       顶部的「新对话」按钮会被胶囊压住（2026-09-06 手机实报）；遮罩同层罩住全屏含顶栏 */
    .ai-history { z-index: 60; }
    .ai-history-scrim { z-index: 59; }

    /* AI 输入条底部留出 iOS 手势条安全区 */
    html[data-page="ai"] .ai-input-bar { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

    /* 坑 28：pageFade（fill:both）让页面容器在 Chromium 里持续构成层叠上下文——AI 历史抽屉
       （fixed z60，在 #aiView 里）整体被关进容器的 z:auto 上下文，画在顶栏胶囊 z50 之下，
       手机上抽屉顶部的「新对话」按钮被胶囊压住。修法：AI 页把 #aiView 自身抬到顶栏之上
       （容器盒从 y96 起，与顶栏不重叠，无副作用；高于顶栏 50、低于外观抽屉/头像下拉 160 与灯箱 200）。
       ⚠️ relative 会激活老全屏层样式残留的 top:52px/bottom:0 偏移（静态时被忽略、relative 下生效，
       整页内容下坠 52px）——必须一并归零 auto（2026-09-06 "头部上移"实报时发现） */
    html[data-page="ai"] #aiView {
      position: relative;
      top: auto;
      bottom: auto;
      left: auto;
      right: auto;
      z-index: 60;
    }

    /* iOS 聚焦不放大：触屏设备输入字号 ≥16px（<16px 聚焦时 Safari 会强制放大视口）；
       2026-10-15 Prompt Bar 化后输入框是 textarea，同步覆盖（漏掉会让 iOS 聚焦整页放大） */
    @media (pointer: coarse) {
      .ai-input-bar input, .ai-input-bar textarea { font-size: 16px; }
    }

    /* AI 页手机端贴边（2026-09-06 用户实报"对话框贴边"）：page-main(4vw) + ai-chat(6vw)
       两侧留白双重叠加出 ~40px 外边距，气泡远离屏幕边——手机端把总留白收到 ~12px，
       气泡/输入条贴向屏幕两侧（顶栏分隔线同步变宽，整页一致）；桌面/平板布局不变 */
    @media (max-width: 767px) {
      html[data-page="ai"] .page-main { padding-left: 8px; padding-right: 8px; }
      html[data-page="ai"] .ai-chat { padding-left: 2px; padding-right: 2px; }
    }

    /* =========================
       随笔页 /notes/（2026-09-07）：notes/notes.json 时间线（与参考博客站 /notes/ 同思路）
       按年份分组；.note 单条 = 日期/天气时段 + 正文（common.js mdToHtml 输出，先转义防注入）
       ========================= */
    /* 时间树容器（2026-10-03，参考博客站同款排布）：左主轴竖线 + 年份实心节点 + 每卡空心挂点；
       主轴中心在 padding 盒 x=6px（left 5px + 宽 2px 的一半），年份点 12px 挂 -24px（中心 6 对齐）、
       卡片环 8px 挂 -22px（中心 6 对齐，别改回 -24px 会偏 2px） */
    .notes-timeline {
      position: relative;
      padding-left: 24px;
    }
    .notes-timeline::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 10px;
      bottom: 10px;
      width: 2px;
      border-radius: 2px;
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 45%, transparent),
        var(--apple-border) 70%,
        transparent);
    }

    .notes-year {
      position: relative;
      margin: 26px 0 10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--primary);
    }
    .notes-year:first-child { margin-top: 4px; }
    .notes-year::before {
      content: "";
      position: absolute;
      left: -24px;
      top: 50%;
      width: 12px;
      height: 12px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: var(--primary);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
    }

    /* 列表卡：白卡化（原底纹行+底部分隔线），挂在时间轴上（.note 保留类名——locateNote 按
       .contains('note') 找锚点卡，fx-reveal 揭示清单也按它扫） */
    .note { position: relative; }

    .note-card {
      display: block;
      margin-bottom: 12px;
      padding: 14px 16px;
      border: 1px solid var(--apple-border);
      border-radius: 12px;
      background: color-mix(in srgb, var(--apple-foreground) 2%, transparent);
      cursor: pointer;
      /* transform 280ms：移出悬停时用更长的减速曲线「落定」回去（悬停内 120ms 见 hover 态） */
      transition: transform 280ms var(--ease-out), border-color 160ms var(--ease-out),
        box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
    }
    .note-card::before {
      content: "";
      position: absolute;
      left: -22px;
      top: 26px;
      width: 8px;
      height: 8px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: var(--apple-card);
      border: 2px solid color-mix(in srgb, var(--apple-foreground) 28%, var(--apple-border));
      transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
    }
    /* 按压感（2026-10-03 站长三轮定稿：3D「按角陷角」+ 不要悬停描边——边框保持原色不变，
       只剩 3D 下陷与内凹压痕；光标压在哪个角那个角向后仰进屏幕，旋转量由 common.js pointermove
       写 --press-rx/--press-ry（±2.5° 封顶、仅鼠标、reduced-motion 不绑），非悬停态零 transform。
       真正按下（:active）拍平压深、回弹更快 */
    /* 压痕跟随层（观感优化 2026-10-03）：暗影出现在光标压住的位置（--press-x/y 由 JS 写），
       而非固定顶缘跟卡片一起转——「角被按进纸面」的视觉主要靠它；不挡点击、圆角继承 */
    .note-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(140px circle at var(--press-x, 50%) var(--press-y, 50%),
        rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.02) 45%, transparent 70%);
      transition: opacity 200ms var(--ease-out);
    }
    .note-card:hover::after { opacity: 1; }

    .note-card:hover {
      /* 悬停内移动：更快贴住指针（跟手不飘）；离开后回落到基础态 280ms 缓缓落定 */
      transition-duration: 120ms;
      transform: perspective(700px) rotateX(var(--press-rx, 0deg)) rotateY(var(--press-ry, 0deg)) translateY(1px);
      /* 局部压痕已由 ::after 渐变承担，静态内阴影退为辅助（6%） */
      box-shadow: inset 0 1px 4px color-mix(in srgb, black 6%, transparent), var(--shadow-2xs);
    }
    .note-card:active {
      transform: translateY(3px);
      transition-duration: 80ms;
      box-shadow: inset 0 3px 8px color-mix(in srgb, black 14%, transparent), var(--shadow-2xs);
    }
    .note-card:hover::before {
      border-color: var(--primary);
      background: var(--primary);
    }
    .note-card:focus-visible {
      outline: 2px solid var(--apple-primary);
      outline-offset: -2px;
    }
    .note-excerpt {
      font-size: 13.5px;
      line-height: 1.7;
      color: var(--apple-muted-foreground);
      margin: 2px 0 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .note-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 6px;
    }

    .note-meta time {
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--apple-muted-foreground);
      font-variant-numeric: tabular-nums;
    }

    .note-mood {
      font-size: 11.5px;
      line-height: 1;
      padding: 4px 9px;
      border-radius: 999px;
      color: var(--primary);
      background: color-mix(in srgb, var(--primary) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    }

    /* 标题与标签（2026-10-02 后台随笔文章化）：老数据无标题/标签不渲染，行为与改版前一致 */
    .note-title {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin: 2px 0 6px;
      /* 无标题随笔的标题=正文前 24 字，正文开头是超长连续英文/URL 时靠它断词，别让卡片横向撑破 */
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .note-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: -2px 0 8px;
    }
    .note-tag {
      font-size: 11.5px;
      line-height: 1;
      color: var(--apple-muted-foreground);
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      padding: 4px 9px;
    }

    /* 详情态（2026-10-02 两态改版）：点摘要卡切到这里，#note-<id> 可分享可后退 */
    .note-detail {
      animation: noteDetailIn 320ms var(--ease-out) both;
    }
    @keyframes noteDetailIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: none; }
    }
    .note-detail-bar {
      display: flex;
      align-items: center;
      margin-bottom: 14px;
    }
    .note-detail-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--apple-muted-foreground);
      background: none;
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      padding: 7px 16px 7px 12px;
      cursor: pointer;
      transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 150ms var(--ease-out);
    }
    .note-detail-back:hover {
      color: var(--apple-foreground);
      border-color: color-mix(in srgb, var(--apple-primary) 40%, var(--apple-border));
      transform: translateX(-2px);
    }
    .note-detail-meta {
      font-size: 12.5px;
      color: var(--apple-muted-foreground);
      font-variant-numeric: tabular-nums;
      margin: 0 0 8px;
    }
    .note-detail-title {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.3;
      margin: 0 0 14px;
    }
    .note-detail-body {
      font-size: 15px;
    }
    .note-detail .note-tags { margin: 0 0 16px; }
    .note-detail .note-foot {
      margin-top: 22px;
      padding-top: 14px;
      border-top: 1px solid var(--apple-border);
    }

    .note-body {
      font-size: 14.5px;
      line-height: 1.75;
      color: var(--apple-foreground);
    }

    .note-body p + p { margin-top: 6px; }
    .note-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
    .note-body code {
      font-family: var(--font-mono);
      font-size: 0.92em;
      padding: 1px 6px;
      border-radius: 6px;
      background: var(--apple-muted);
    }
    .note-body ul, .note-body ol { padding-left: 20px; margin: 4px 0; }
    .note-body ul { list-style: disc; }
    .note-body ol { list-style: decimal; }
    .note-body blockquote {
      margin: 6px 0;
      padding: 2px 0 2px 12px;
      border-left: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
      color: var(--apple-muted-foreground);
    }

    /* =========================
       滚动模糊揭示（2026-09-07 接入参考博客站 04 号特效：内容进视口从模糊+下移逐个清晰，见 common.js 顶部同名模块）
       门控：head 内联脚本在 JS 可用且未开启「减少动态效果」时给 <html> 打 fx-reveal 类——
       无 JS / 减少动态效果时本段整体不命中，内容常显（禁 JS 页面可读性优先）。
       目标限定 .page-main 内：外壳浮层（外观抽屉/个人主页/登录卡都是 .apple-card）绝不参与揭示。
       用动画不用过渡：过渡规则会常驻压过卡片自身的 hover 过渡；动画 fill 只用 backwards
       （both 会把 transform 残留在已揭示元素上，改掉 fixed 后代的包含块——坑 22 同源）。
       与 JS 的选择器清单保持同步：album-bar/apple-card/doc-card/note/notes-year
       ========================= */
    @media (prefers-reduced-motion: no-preference) {
      html.fx-reveal .page-main :is(.album-bar, .apple-card, .doc-card, .note, .notes-year):not(.is-revealed) {
        opacity: 0;
        transform: translateY(1.25rem);
        filter: blur(10px);
      }

      html.fx-reveal .page-main :is(.album-bar, .apple-card, .doc-card, .note, .notes-year).is-revealed {
        animation: fx-reveal-in 0.6s var(--ease-out) var(--reveal-delay, 0s) backwards;
      }
    }

    @keyframes fx-reveal-in {
      from {
        opacity: 0;
        transform: translateY(1.25rem);
        filter: blur(10px);
      }

      to {
        opacity: 1;
        transform: none;
        filter: blur(0);
      }
    }

    /* =========================
       滚动模糊揭示 · 文档阅读层（2026-09-07 补，用户要求「关于界面的更新日志什么的也加上」）：
       docViewer 是外壳浮层不在 .page-main 内，单独一档——mdToHtml 顶层块 + 更新日志时间轴按天（.cl-day）
       逐块揭示；采集/滚动监听（.doc-scroll 内部滚动）/openDoc 注入重扫都在 common.js 顶部揭示模块。
       .cl-timeline 本身不参与（避免与 .cl-day 嵌套双重动画）
       ========================= */
    @media (prefers-reduced-motion: no-preference) {
      html.fx-reveal #docArticle > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, img, hr, div:not(.cl-timeline)):not(.is-revealed),
      html.fx-reveal #docArticle .cl-day:not(.is-revealed) {
        opacity: 0;
        transform: translateY(1.25rem);
        filter: blur(10px);
      }

      html.fx-reveal #docArticle > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, img, hr, div:not(.cl-timeline)).is-revealed,
      html.fx-reveal #docArticle .cl-day.is-revealed {
        animation: fx-reveal-in 0.6s var(--ease-out) var(--reveal-delay, 0s) backwards;
      }
    }

    /* =========================
       窄屏导航抽屉（2026-09-07 起，对齐后台「汉堡+抽屉」窄屏模式，断点同为 900px，两种导航自由适配）：
       >900px 维持悬浮胶囊导航（汉堡/抽屉不可见）；≤900px 胶囊收窄为 汉堡+logo+动作钮，导航项进左侧抽屉。
       抽屉/遮罩常驻 DOM，开关走 body.nav-drawer-open 类 + transition（visibility 延迟切换保住收起动画），
       状态由 common.js「窄屏导航抽屉」块管理；pjax 换页经 closeAllTransientOverlays 收起
       ========================= */
    .nav-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      flex: none;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 999px;
      background: none;
      color: var(--apple-foreground);
      cursor: pointer;
      transition: background-color 180ms var(--ease-out);
    }

    .nav-toggle:hover { background: var(--apple-secondary); }

    .nav-drawer-mask {
      position: fixed;
      inset: 0;
      z-index: 300;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms;
    }

    body.nav-drawer-open .nav-drawer-mask {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 280ms var(--ease-out);
    }

    .nav-drawer {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 310;
      width: min(75vw, 292px);
      display: flex;
      flex-direction: column;
      padding: 16px 12px 12px;
      border-radius: 0 22px 22px 0;
      background: rgba(255, 255, 255, 0.86);
      -webkit-backdrop-filter: saturate(1.8) blur(22px);
      backdrop-filter: saturate(1.8) blur(22px);
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-left: none;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
      transform: translateX(-105%);
      visibility: hidden;
      transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
    }

    .dark .nav-drawer {
      background: rgba(30, 30, 32, 0.86);
      border-color: rgba(255, 255, 255, 0.1);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    }

    body.nav-drawer-open .nav-drawer {
      transform: none;
      visibility: visible;
      transition: transform 320ms var(--ease-out);
    }

    /* 抽屉开着锁背景滚动（登录卡 login-lock 同款机制） */
    body.nav-drawer-open { overflow: hidden; }

    .nav-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2px 6px 12px;
      border-bottom: 1px solid var(--apple-border);
      margin-bottom: 10px;
    }

    .nav-drawer-logo {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--apple-foreground);
    }

    .nav-drawer-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 999px;
      background: none;
      color: var(--apple-foreground);
      cursor: pointer;
      transition: background-color 180ms var(--ease-out);
    }

    .nav-drawer-close:hover { background: var(--apple-secondary); }

    .nav-drawer-links {
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow-y: auto;
    }

    /* 条目：图标 + 文字。图标默认次级色，悬停/选中随文字变 */
    .nav-drawer-link {
      display: flex;
      align-items: center;
      gap: 12px;
      height: 46px;
      padding: 0 14px;
      border-radius: 14px;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--apple-foreground);
      text-decoration: none;
      transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 150ms var(--ease-out);
    }

    .nav-drawer-ico {
      flex: none;
      color: var(--apple-muted-foreground);
      transition: color 180ms var(--ease-out);
    }

    .nav-drawer-link span { flex: 1; min-width: 0; }

    /* 悬停按压感：整行轻微下压；真正按下（:active）压得更深、回弹更快 */
    .nav-drawer-link:hover {
      background: var(--apple-secondary);
      transform: scale(0.98);
    }

    .nav-drawer-link:hover .nav-drawer-ico { color: var(--apple-foreground); }

    .nav-drawer-link:active {
      transform: scale(0.96);
      transition-duration: 80ms;
    }

    /* 当前项：主题色柔和底 + 主题色文字/图标（比反色黑块轻盈，与站点陶土色语言一致） */
    .nav-drawer-link.active {
      background: color-mix(in srgb, var(--apple-primary) 12%, transparent);
      color: var(--apple-primary);
      font-weight: 600;
    }

    .nav-drawer-link.active .nav-drawer-ico { color: var(--apple-primary); }

    /* 行尾导航箭头：锚住行的右缘（文字 flex:1 顶开），行不再右半空着 */
    .nav-drawer-chev {
      margin-left: auto;
      flex: none;
      color: var(--apple-muted-foreground);
      opacity: 0.6;
      transition: color 180ms var(--ease-out), opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
    }

    .nav-drawer-link:hover .nav-drawer-chev {
      color: var(--apple-foreground);
      opacity: 1;
      transform: translateX(2px);
    }

    /* 抽屉底部品牌落款：margin-top:auto 沉底，填充列表下方的竖向空白 */
    .nav-drawer-foot {
      margin-top: auto;
      padding: 12px 8px 2px;
      font-size: 11px;
      letter-spacing: 0.08em;
      color: var(--apple-muted-foreground);
      border-top: 1px solid var(--apple-border);
    }

    /* 开抽屉时条目从左级联滑入：只靠 keyframes from 隐藏 + fill backwards 盖住延迟期，
       不设 opacity:0 基准态——backwards 动画结束后回基准样式，基准若隐藏条目会永远隐形（踩过已修） */
    @media (prefers-reduced-motion: no-preference) {
      .nav-drawer .nav-drawer-link:nth-child(1) { --i: 0; }
      .nav-drawer .nav-drawer-link:nth-child(2) { --i: 1; }
      .nav-drawer .nav-drawer-link:nth-child(3) { --i: 2; }
      .nav-drawer .nav-drawer-link:nth-child(4) { --i: 3; }
      .nav-drawer .nav-drawer-link:nth-child(5) { --i: 4; }
      .nav-drawer .nav-drawer-link:nth-child(6) { --i: 5; }
      .nav-drawer .nav-drawer-link:nth-child(7) { --i: 6; }
      .nav-drawer .nav-drawer-link:nth-child(8) { --i: 7; }

      body.nav-drawer-open .nav-drawer .nav-drawer-link {
        animation: nav-drawer-item-in 420ms var(--ease-out) backwards;
        animation-delay: calc(70ms + var(--i, 0) * 36ms);
      }
    }

    @keyframes nav-drawer-item-in {
      from {
        opacity: 0;
        transform: translateX(-10px);
      }

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

    .nav-toggle:focus-visible,
    .nav-drawer-close:focus-visible,
    .nav-drawer-link:focus-visible {
      outline: 2px solid var(--apple-ring);
      outline-offset: 2px;
    }

    /* 功能开关：抽屉项与胶囊导航项（#docsBtn 等按 id）同口径隐藏 */
    .ff-docs-off .nav-drawer-link[data-target="docs"],
    .ff-ai-off .nav-drawer-link[data-target="ai"],
    .ff-boot-hide .nav-drawer-link[data-target="docs"],
    .ff-ai-boot-hide .nav-drawer-link[data-target="ai"] { display: none !important; }

    /* ≤900px（与后台窄屏同断点）：导航项进抽屉，胶囊收窄为 汉堡+logo+动作钮 */
    @media (max-width: 900px) {
      .site-nav { display: none; }
      .nav-toggle { display: inline-flex; }
      .header-pill { gap: 6px; padding: 4px 6px 4px 8px; }
      /* 胶囊占满行宽后没有 .site-nav 的 flex:1 撑开了（导航进抽屉）——动作组推到最右 */
      .header-actions { margin-left: auto; }
    }

    /* ===== 音乐频谱可视化（assets/common.js 尾部同名 IIFE：开关小钮与面板均 JS 注入，无 JS 不占位） ===== */
    /* 开关小钮通用态：开启=主题色（is-on），初始化失败=置灰（is-broken，title 提示「当前浏览器不支持频谱」） */
    .vis-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out),
                  background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
    }

    .vis-toggle:hover { color: var(--apple-primary); }

    .vis-toggle:active { transform: scale(0.92); }

    .vis-toggle:focus-visible {
      outline: 2px solid var(--apple-ring);
      outline-offset: 2px;
    }

    .vis-toggle.is-on { color: var(--apple-primary); }

    .vis-toggle.is-broken {
      opacity: 0.45;
      cursor: not-allowed;
    }

    /* 迷你播放条上的那枚：28px 圆钮（.ctrl-btn 同语言缩小版），横条 flex 里不缩 */
    .vis-toggle--mini {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      background: transparent;
      color: var(--apple-muted-foreground);
    }

    .vis-toggle--mini:hover {
      border-color: color-mix(in srgb, var(--apple-primary) 40%, var(--apple-border));
      background: color-mix(in srgb, var(--apple-primary) 10%, transparent);
      transform: translateY(-1px);
    }

    /* 悬浮播放器头部那枚：尺寸/底色随 .music-player__header-actions 既有规则，这里只补开启态色 */
    .music-player__header-actions .vis-toggle--panel.is-on { color: var(--brand); }

    /* 频谱面板：fixed 在底部播放条上方居中，毛玻璃圆角卡对齐 .mini-player 胶囊；显隐走 show 类（坑 14） */
    .vis-panel {
      position: fixed;
      left: 50%;
      bottom: calc(92px + env(safe-area-inset-bottom, 0px)); /* 避开底部播放条高度 */
      transform: translate(-50%, 12px);
      z-index: 95; /* 盖过迷你播放条(90)与悬浮播放器(40)，让位灯箱/背景选择器 */
      width: min(520px, 92vw);
      height: 96px;
      background: rgba(255, 255, 255, 0.82);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border: 1px solid var(--apple-border);
      border-radius: 24px;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 250ms var(--ease-out), visibility 250ms var(--ease-out), transform 250ms var(--ease-out), background-color 300ms var(--ease-out);
    }

    .dark .vis-panel {
      background: rgba(28, 28, 30, 0.82);
    }

    .vis-panel.show {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
      pointer-events: auto;
    }

    .vis-panel__canvas {
      position: absolute;
      top: 10px;
      right: 46px; /* 右侧给 ✕ 留位 */
      bottom: 10px;
      left: 18px;
      width: calc(100% - 64px);
      height: calc(100% - 20px);
    }

    .vis-panel__close {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 999px;
      background: transparent;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
    }

    .vis-panel__close:hover {
      color: var(--apple-foreground);
      background: color-mix(in srgb, var(--apple-foreground) 10%, transparent);
    }

    /* 待机提示：没在播/频谱未启动时盖在画布上（谁在播画谁，开播即由 JS 摘掉） */
    .vis-panel__hint {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--apple-muted-foreground);
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms var(--ease-out);
    }

    .vis-panel__hint.is-visible { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .vis-panel,
      .vis-panel__hint,
      .vis-toggle { transition: none; }
    }

    /* ===== 背景选择器「今日壁纸」首格（assets/common.js openBgPicker 注入的 button.bg-wallpaper-entry） ===== */
    /* 视觉对齐 .bg-picker-grid img 缩略格：4:3 圆角、hover 放大描边、picked 主题色描边 */
    .bg-wallpaper-entry {
      width: 100%;
      aspect-ratio: 4 / 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 2px solid transparent;
      border-radius: 10px;
      background: color-mix(in srgb, var(--apple-primary) 8%, var(--apple-card));
      color: var(--apple-muted-foreground);
      font-size: 12px;
      cursor: pointer;
      transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out);
    }

    .bg-wallpaper-entry:hover {
      transform: scale(1.04);
      border-color: var(--apple-border);
      color: var(--apple-foreground);
    }

    .bg-wallpaper-entry.picked { border-color: var(--apple-primary); }

    .bg-wallpaper-entry:disabled {
      cursor: default;
      opacity: 0.6;
      transform: none;
    }

    /* 版权/结果小字：挂在选择器面板底部（bg-picker-panel 常驻，节点按 id 复用），成功/失败二用 */
    .bg-wallpaper-note {
      margin: 10px 0 0;
      font-size: 12px;
      line-height: 1.5;
      text-align: center;
      color: var(--apple-muted-foreground);
      overflow-wrap: anywhere;
    }

    .bg-wallpaper-note.is-error { color: #e5484d; }

    /* ===== 2026-09-10 新增：AI 历史导出钮 / Ctrl+K 算数模式 / 番茄钟热力图 ===== */

    /* —— AI 历史条目「导出」图标钮：完全镜像上方 .hi-del（24px、悬停浮现、触屏常显） —— */
    .ai-history-item .hi-exp {
      flex: none;
      display: none;
      width: 24px;
      height: 24px;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 7px;
      background: none;
      color: var(--apple-muted-foreground);
      cursor: pointer;
      transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
    }

    /* 桌面悬停浮现；触屏没有 hover，常显否则导不出（hi-del 同款约定） */
    .ai-history-item:hover .hi-exp { display: inline-flex; }

    @media (hover: none) {
      .ai-history-item .hi-exp { display: inline-flex; }
    }

    /* 悬停高亮用主题色（区别于删除钮的红色武装感） */
    .ai-history-item .hi-exp:hover {
      color: var(--apple-primary);
      background: color-mix(in srgb, var(--apple-primary) 12%, transparent);
    }

    /* —— Ctrl+K 算数模式结果行（= 开头时结果区只显示这一条） —— */
    .cmdk-math {
      padding: 18px 4px 22px;
      text-align: center;
    }

    .cmdk-math-line {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--apple-foreground);
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    .cmdk-math-sub {
      margin: 6px 0 0;
      font-size: 12px;
      color: var(--apple-muted-foreground);
    }

    /* —— 番茄钟历史热力图（common.js initPomo 动态挂在 #toolPomo 卡片底部） —— */
    .pomo-heat { margin-top: 14px; }

    /* 7 行 × 15 列（列=周，行=周一~周日）；390px 下约 18px 一格放得下，无需横向滚动 */
    .pomo-heat-grid {
      display: grid;
      grid-template-rows: repeat(7, 1fr);
      grid-template-columns: repeat(15, 1fr);
      grid-auto-flow: column;
      gap: 3px;
    }

    .pomo-heat-cell {
      min-width: 0;
      aspect-ratio: 1 / 1;
      border-radius: 3px;
      background: var(--apple-secondary, rgba(128, 128, 128, 0.12));
    }

    /* 0=无色；1~2 / 3~4 / 5+ 三档主题色透明度梯度 */
    .pomo-heat-cell.lv1 { background: color-mix(in srgb, var(--apple-primary) 30%, transparent); }
    .pomo-heat-cell.lv2 { background: color-mix(in srgb, var(--apple-primary) 60%, transparent); }
    .pomo-heat-cell.lv3 { background: var(--apple-primary); }

    /* 本周今天之后的占位格：无色 */
    .pomo-heat-cell.future { background: transparent; }

    .pomo-heat-sum {
      margin: 8px 0 0;
      font-size: 11px;
      color: var(--apple-muted-foreground);
    }

    /* ===================== 签到成就徽章 ===================== */
    /* common.js ckRenderBadges 动态挂在个人主页签到卡近 7 日圆点（#ckWeek）下方，
       全部由签到 GET 已返回数据实时计算，随签到卡整体显隐（管理员/未拉到数据时不出现）。
       静态小 chips：flex wrap 一行放不下换行，窄屏 390px 不溢出；无动画（reduced-motion 无需另处理），提示走悬停 title */
    .ck-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }

    .ck-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      max-width: 100%;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
      cursor: default;
      /* 未达成默认态：灰底 + 半透明文字 */
      background: var(--apple-secondary, rgba(128, 128, 128, 0.14));
      color: color-mix(in srgb, var(--apple-muted-foreground) 75%, transparent);
    }

    .ck-badge-ico { font-style: normal; font-size: 13px; }

    /* 已达成：主题色柔和高亮底 + 正常文字 */
    .ck-badge.on {
      background: color-mix(in srgb, var(--apple-primary) 15%, transparent);
      color: var(--apple-foreground);
    }

    /* 满级金徽章（👑 传奇登顶达成）：照抄 .ck-lv.max 的金色渐变先例 */
    .ck-badge.on.max {
      background: linear-gradient(135deg, #c99416, #e9b949);
      color: #fff;
    }

    /* ========================= AI 输入条：思考强度切换（2026-09-11） ========================= */

    /* 思考强度切换：入口与菜单复用 .ai-model-btn / .ai-model-menu / .ai-model-item 全套样式，
       这里只补菜单收窄与底部说明一行的弱化态 */
    .ai-effort-menu { min-width: 208px; }

    .ai-effort-note {
      padding: 2px 10px 4px;
      font-size: 11.5px;
      color: var(--apple-muted-foreground, var(--apple-foreground));
      opacity: 0.65;
    }

    /* ========================= AI 输入条 Prompt Bar 化（2026-10-15，reactbits.dev Prompt Bar 原生复刻） =========================
       结构/行为见 common.js 同名段：.pb-spark 星火画布 / .pb-mention-menu @来源与/指令菜单 /
       .pb-effect-panel 强度滑杆 / .pb-send-glyph 形变键。全部取 --apple-* 变量随 15 主题走；
       四复古主题走既有直角语言；手机端见本段末尾 640px 媒体查询。 */

    /* 输入框本体由 input 升级为 textarea（自动增高）：换掉旧的单行 input 样式 */
    .ai-input-bar textarea {
      width: 100%;
      border: none;
      outline: none;
      background: none;
      color: var(--apple-foreground);
      font-size: 14px;
      font-family: inherit;
      line-height: 22px;
      padding: 0 4px;
      resize: none;
      overflow-y: hidden;
      overflow-wrap: anywhere;
      max-height: 110px; /* 5 行 × 22px；超出转内部滚动 */
    }

    .ai-input-bar textarea::placeholder { color: var(--apple-muted-foreground, var(--apple-foreground)); opacity: 0.45; }

    /* 星火画布：铺满输入条、不吃指针（拉满思考档时由 JS 启动绘制） */
    .ai-input-bar { position: relative; }
    .pb-spark {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      pointer-events: none;
      z-index: 0;
    }
    /* 画布垫底：内容行全部抬到 z1（否则画布盖在文字上） */
    .ai-input-bar > :not(.pb-spark) { position: relative; z-index: 1; }

    /* 拉满档的整条辉光（对齐原版 data-max 的 radial-gradient 渐显） */
    .ai-input-bar::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      z-index: 0;
      background: radial-gradient(140% 120% at 0% 100%, color-mix(in srgb, var(--apple-primary) 26%, transparent), transparent 62%);
      transition: opacity 500ms ease;
    }
    .ai-input-bar[data-max]::before { opacity: 1; }

    /* 来源/指令菜单：复用 .ai-model-menu 定位与弹收动画，行样式对齐原版（图标+名称+描述） */
    .pb-mention-menu { min-width: 264px; max-width: 340px; }
    /* 模型菜单（2026-10-15 对齐原版 Prompt Bar）：窄栏 200px、扁平列表、行高 36px 同规约，
       悬停光斑与 @// 菜单共用一套 .pb-menu-glow */
    #aiModelMenu { min-width: 200px; max-width: 300px; }
    .pb-menu-glow {
      position: absolute;
      left: 4px;
      right: 4px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--apple-foreground) 8%, transparent);
      opacity: 0;
      pointer-events: none;
      transition: top 220ms cubic-bezier(0.23, 1, 0.32, 1), height 220ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms ease;
    }
    .pb-mention-menu .ai-model-item, #aiModelMenu .ai-model-item { position: relative; z-index: 1; height: 36px; padding: 0 8px; }
    #aiModelMenu .pb-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #aiModelMenu .ai-model-item .tag { margin-left: auto; }
    #aiModelMenu .ai-model-item .chk { margin-left: 6px; }
    .pb-row-ico {
      flex: none;
      width: 20px;
      display: inline-flex;
      justify-content: center;
      color: color-mix(in srgb, var(--apple-foreground) 70%, transparent);
    }
    .pb-row-ico svg { width: 15px; height: 15px; display: block; }
    .pb-row-slash { font-weight: 700; font-size: 13px; }
    .pb-row-name { flex: none; font-size: 13px; font-weight: 500; }
    .pb-row-desc {
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: color-mix(in srgb, var(--apple-foreground) 55%, transparent);
    }
    .pb-menu-none {
      display: flex;
      align-items: center;
      height: 36px;
      padding: 0 8px;
      font-size: 12px;
      color: color-mix(in srgb, var(--apple-foreground) 55%, transparent);
    }
    @media (prefers-reduced-motion: reduce) {
      .pb-menu-glow { transition: opacity 150ms ease; }
    }

    /* 思考强度滑杆面板（原 Prompt Bar 的 effort 弹层：标题行 + Faster/Smarter + 滑轨 + 底部说明） */
    .pb-effort-panel { min-width: 248px; padding: 12px 14px 12px; }
    .pb-effort-head { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; }
    .pb-effort-cap { color: color-mix(in srgb, var(--apple-foreground) 55%, transparent); }
    .pb-effort-name { font-weight: 500; }
    .pb-effort-help {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--apple-foreground) 30%, transparent);
      font-size: 10px;
      line-height: 1;
      color: color-mix(in srgb, var(--apple-foreground) 55%, transparent);
      cursor: default;
    }
    .pb-effort-ends {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      font-size: 12px;
      line-height: 16px;
      color: color-mix(in srgb, var(--apple-foreground) 55%, transparent);
    }
    .pb-effort-track {
      position: relative;
      margin-top: 8px;
      height: 22px;
      border-radius: 11px;
      background: color-mix(in srgb, var(--apple-foreground) 8%, transparent);
      cursor: pointer;
      touch-action: none;
      outline: none;
      user-select: none;
    }
    .pb-effort-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0;
      border-radius: 11px;
      background: color-mix(in srgb, var(--apple-foreground) 18%, transparent);
      transition: width 220ms cubic-bezier(0.23, 1, 0.32, 1), background-color 300ms ease;
    }
    .pb-effort-track[data-max] .pb-effort-fill { background: color-mix(in srgb, var(--apple-primary) 35%, transparent); }
    .pb-effort-dot {
      position: absolute;
      top: 50%;
      width: 4px;
      height: 4px;
      margin: -2px 0 0 -2px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--apple-foreground) 30%, transparent);
    }
    .pb-effort-thumb {
      position: absolute;
      top: 2px;
      margin-left: -9px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--apple-foreground);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
      transition: left 220ms cubic-bezier(0.23, 1, 0.32, 1), background-color 300ms ease;
    }
    .pb-effort-track[data-max] .pb-effort-thumb { background: var(--apple-primary); }
    .pb-effort-track:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--apple-primary) 25%, transparent); }
    .pb-effort-panel .ai-model-foot { margin-top: 10px; }
    @media (prefers-reduced-motion: reduce) {
      .pb-effort-fill, .pb-effort-thumb { transition: background-color 300ms ease; }
    }

    /* 发送键：形变 glyph（SVG path 由 JS 逐帧改写；按压缩放同原版 pressScale 0.96） */
    .pb-send-glyph { display: block; transform-origin: center; }
    .ai-send-btn[data-armed] { background: var(--apple-foreground); color: var(--apple-background); }
    .ai-send-btn[data-pressed] { transform: scale(0.96); }
    @media (prefers-reduced-motion: reduce) {
      .ai-send-btn[data-pressed] { transform: none; }
    }

    /* 语音听写：未听写显示麦克风、听写中显示三根跳动均衡条（原版同款） */
    .pb-mic-eq { display: none; height: 14px; align-items: center; gap: 2.5px; }
    .pb-mic-eq i {
      display: block;
      width: 2.5px;
      height: 100%;
      border-radius: 999px;
      background: currentColor;
      transform-origin: center;
      animation: pbMicEq 900ms ease-in-out infinite;
    }
    .pb-mic-eq i:nth-child(2) { animation-delay: 150ms; }
    .pb-mic-eq i:nth-child(3) { animation-delay: 300ms; }
    #aiMicBtn[data-on] .pb-mic-ico { display: none; }
    #aiMicBtn[data-on] .pb-mic-eq { display: inline-flex; }
    #aiMicBtn[data-on] { color: var(--apple-primary); opacity: 1; }
    @keyframes pbMicEq {
      0%, 100% { transform: scaleY(0.35); }
      50% { transform: scaleY(1); }
    }

    /* 四复古主题：直角语言（与既有 .ai-input-bar 等一整串选择器同规约，逐条跟进） */
    html[data-accent='win98'] .pb-mention-menu, html[data-accent='portal'] .pb-mention-menu,
    html[data-accent='crt'] .pb-mention-menu, html[data-accent='oldbook'] .pb-mention-menu,
    html[data-accent='win98'] .pb-menu-glow, html[data-accent='portal'] .pb-menu-glow,
    html[data-accent='crt'] .pb-menu-glow, html[data-accent='oldbook'] .pb-menu-glow,
    html[data-accent='win98'] .pb-effort-track, html[data-accent='portal'] .pb-effort-track,
    html[data-accent='crt'] .pb-effort-track, html[data-accent='oldbook'] .pb-effort-track,
    html[data-accent='win98'] .pb-effort-fill, html[data-accent='portal'] .pb-effort-fill,
    html[data-accent='crt'] .pb-effort-fill, html[data-accent='oldbook'] .pb-effort-fill,
    html[data-accent='win98'] .pb-effort-thumb, html[data-accent='portal'] .pb-effort-thumb,
    html[data-accent='crt'] .pb-effort-thumb, html[data-accent='oldbook'] .pb-effort-thumb,
    html[data-accent='win98'] .ai-send-btn[data-armed], html[data-accent='portal'] .ai-send-btn[data-armed],
    html[data-accent='crt'] .ai-send-btn[data-armed], html[data-accent='oldbook'] .ai-send-btn[data-armed] {
      border-radius: 0;
    }

    /* 手机端：输入区多一排按钮（＋/模型/强度/麦克风/发送）在 390px 会挤，把模型与强度钮收窄 */
    @media (max-width: 640px) {
      .pb-mention-menu, .pb-effort-panel { min-width: 216px; max-width: min(86vw, 300px); }
      .ai-input-tools { gap: 4px; }
      .ai-input-tools .ai-model-btn { padding: 6px 6px; font-size: 12.5px; max-width: 108px; }
    }

    /* 「思考中」等待态（2026-09-11）：三点跳动（纯 CSS 动画，零 DOM 写入）+ 耗时秒数
       （common.js 每 1s 改一次 textContent，远低于坑 36 的 80ms 高频阈值）。
       挂在 .ai-msg.bot.pending 气泡内，首个 delta 到达即被正文整体替换 */
    .ai-msg.bot.pending {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      max-width: 100%;
    }

    .ai-thinking {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex: none;
    }

    .ai-thinking i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.35;
      animation: ai-think-bounce 1.2s ease-in-out infinite;
    }

    .ai-thinking i:nth-child(2) { animation-delay: 0.15s; }
    .ai-thinking i:nth-child(3) { animation-delay: 0.3s; }

    @keyframes ai-think-bounce {
      0%, 100% { opacity: 0.3; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-3px); }
    }

    .ai-thinking-txt { font-weight: 600; }

    .ai-thinking-sec {
      font-size: 12px;
      opacity: 0.55;
      font-variant-numeric: tabular-nums;
    }

    @media (prefers-reduced-motion: reduce) {
      .ai-thinking i { animation: none; opacity: 0.55; }
    }

    /* ========================= 天气联动粒子层（2026-09-09，common.js 末尾同名 IIFE） ========================= */
    /* 雨天落雨丝 / 雪天飘雪片的 canvas 固定层：z-index 与流星层（.fx-meteors，同为 -1）同级量级、内容之下；
       DOM 追加在 body 尾（流星层之后），同为负 z 时按 DOM 顺序绘制在 bg-layer/流星之上，互不影响；
       pointer-events:none 纯装饰；启停与粒子逻辑全在 JS（天气缓存驱动），CSS 只管层叠与可访问性隐藏 */
    .fx-weather {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
    }

    /* 系统减弱动态：整个层隐藏（JS 侧同条件不启动，双保险照流星段先例） */
    @media (prefers-reduced-motion: reduce) {
      .fx-weather { display: none; }
    }

    /* ========================= 留言板「路人」身份（2026-09-09，未登录留言） ========================= */
    /* 路人首字块：🎭 直接写在块里，底色中性灰（区别于注册用户主题色块与站长金渐变） */
    .board-item.is-guest .board-avatar {
      background: var(--apple-secondary);
      color: var(--apple-muted-foreground);
    }

    /* 路人灰徽章：与等级描边徽标（.board-lv）、站长金徽章（.board-admin-badge）三足鼎立 */
    .board-guest-badge {
      flex: none; font-size: 10px; font-weight: 700; line-height: 15px;
      color: var(--apple-muted-foreground); background: var(--apple-secondary);
      border-radius: 999px; padding: 0 7px; white-space: nowrap;
    }

    /* =========================
       随笔分享卡片（2026-09-09，common.js 随笔页「随笔分享卡片」段）：每条随笔尾部「生成分享图」小钮，
       点击离屏 canvas 绘暖白纸感分享卡 → PNG 直接下载（无预览浮层）。按钮随条目 JS 渲染，无外壳同步问题；
       顶栏悬停预览 iframe（坑 29）里 common.js 不渲染按钮。观感对齐随笔页 .note-mood 胶囊
       ========================= */
    .note-foot {
      margin-top: 10px;
    }

    .note-share-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      color: var(--apple-muted-foreground);
      background: var(--apple-secondary);
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      cursor: pointer;
      transition: color 180ms var(--ease-out, ease), border-color 180ms var(--ease-out, ease),
        background-color 180ms var(--ease-out, ease), transform 180ms var(--ease-out, ease);
    }

    .note-share-btn:hover {
      color: var(--primary);
      border-color: color-mix(in srgb, var(--primary) 30%, transparent);
      background: color-mix(in srgb, var(--primary) 8%, transparent);
    }

    .note-share-btn:active { transform: scale(0.96); }

    .note-share-btn:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    /* 「已生成 ✓」短暂成功态（1.5 秒后 JS 复原），底色同 .note-mood 的主题色 12% 混合 */
    .note-share-btn.is-done {
      color: var(--primary);
      border-color: color-mix(in srgb, var(--primary) 35%, transparent);
      background: color-mix(in srgb, var(--primary) 12%, transparent);
    }

    /* ===== 首页 Hero 视差光斑（2026-09-09）=====
       两枚柔光斑（时钟后 --glow-a 一层、视频盒旁 --glow-b 一层；2026-10-07 起随主题色联动，
       默认陶土观感不变）：
       绝对定位 + 模糊渐变圆 + 低透明度，z 压在全部内容之下，深浅主题都当"色斑"不抢戏。
       指针跟随在 common.js 首页模块（heroGlowFx）。坑 22/28 铁律：transform 只加在光斑自身
       （普通绝对定位、无 fixed 后代，安全），绝不给 .hero-section/.page-main 加 transform/animation——
       hero 的 fadeInUp（fill:forwards）本就让容器持续构成包含块/层叠上下文，别再叠加放大布局雷。 */
    .hero-section {
      position: relative;      /* 光斑定位上下文；不加 z-index，容器层叠维持现状（坑 28） */
      isolation: isolate;      /* 显式收敛层叠上下文，光斑 z:-1 不会漏到 hero 之外，不依赖入场动画是否在"filling"态 */
    }

    .hero-glow {
      position: absolute;
      z-index: -1;             /* 内容之下：hero 自成层叠上下文，-1 只压到 hero 内容底、不会钻到页面背景后 */
      pointer-events: none;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.16;
      transform: translate3d(0, 0, 0); /* 静态归零；跟随逻辑只改这一个属性，走合成层不触发重排 */
      will-change: transform;
    }

    /* 时钟后方一层：色深一点、跟随幅度小（JS 里 0.5%），近乎凝住 */
    .hero-glow--clock {
      width: 420px;
      height: 420px;
      left: -8%;
      top: -12%;
      background: radial-gradient(circle, color-mix(in srgb, var(--glow-a) 55%, transparent), transparent 70%);
    }

    /* 视频盒附近一层：色浅一点、跟随幅度大（JS 里 2%），视差主层 */
    .hero-glow--video {
      width: 360px;
      height: 360px;
      right: -6%;
      top: 10%;
      background: radial-gradient(circle, color-mix(in srgb, var(--glow-b) 60%, transparent), transparent 70%);
    }

    /* 暗色主题：透明度再压一档，避免暗底上泛灰发脏 */
    .dark .hero-glow {
      opacity: 0.12;
    }

    @media (max-width: 900px) {
      .hero-glow {
        filter: blur(48px);
      }

      .hero-glow--clock {
        width: 300px;
        height: 300px;
      }

      .hero-glow--video {
        width: 260px;
        height: 260px;
      }
    }

    /* =========================
       首页内容区（2026-09-11）：hero 下方「门面」层——最新随笔 / 快捷入口 / 站点数据行。
       只存在于首页 main（不碰外壳，坑 23 免同步）；.apple-card 自动进滚动模糊揭示清单（site.css「滚动模糊揭示」段）。
       功能开关同口径：ff-* 关掉的页面，对应入口磁贴一并隐藏（对齐窄屏抽屉的 [data-target] 规则）。
       ========================= */
    html.ff-album-off .home-entry[data-target="album"],
    html.ff-ai-off .home-entry[data-target="ai"],
    html.ff-boot-hide .home-entry[data-target="tools"],
    html.ff-ai-boot-hide .home-entry[data-target="ai"] { display: none !important; }

    .home-lower {
      padding: 6px 0 28px;
    }

    /* 随笔卡被后台整体关闭（隐藏清单）或将来摘除时，入口卡自动满宽不破格 */
    .home-lower.no-notes .home-lower-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .home-lower-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      gap: 18px;
      align-items: stretch;
    }

    /* ----- 最新随笔 ----- */
    .home-notes-list {
      list-style: none;
      margin: 0;
      padding: 0;
      min-height: 118px; /* 三条摘要的预期高度：异步到达前后零布局位移（同天气/一言首帧占位思路） */
    }

    /* 加载骨架：三根浅色横条轻微呼吸；数据到达 JS 摘掉 is-loading 换真内容 */
    .home-notes-list.is-loading li {
      height: 16px;
      margin: 14px 2px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--apple-muted-foreground) 14%, transparent);
      animation: homeNotesPulse 1.6s ease-in-out infinite;
    }

    .home-notes-list.is-loading li:nth-child(2) { width: 86%; }
    .home-notes-list.is-loading li:nth-child(3) { width: 64%; }

    @keyframes homeNotesPulse {
      0%, 100% { opacity: 0.55; }
      50% { opacity: 1; }
    }

    .home-notes-list li {
      border-bottom: 1px solid var(--apple-border);
    }

    .home-notes-list li:last-child {
      border-bottom-color: transparent;
    }

    .home-note-item {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 11px 2px;
      color: inherit;
      text-decoration: none;
    }

    .hn-date {
      flex: none;
      min-width: 46px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--apple-muted-foreground);
      font-variant-numeric: tabular-nums;
    }

    .home-note-item .note-mood {
      flex: none;
      font-size: 10.5px;
      padding: 3px 8px;
    }

    .hn-text {
      flex: 1;
      min-width: 0;
      font-size: 13.5px;
      color: var(--apple-muted-foreground);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color 200ms var(--ease-out);
    }

    .home-note-item:hover .hn-text,
    .home-note-item:focus-visible .hn-text {
      color: var(--primary);
    }

    .home-note-item:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 6px;
    }

    .home-more-link {
      display: inline-block;
      margin-top: 12px;
      font-size: 12.5px;
      color: var(--primary);
      text-decoration: none;
    }

    .home-more-link:hover {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* ----- 快捷入口磁贴 ----- */
    .home-entry-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    /* 五磁贴收尾（2026-10-07 快捷入口扩到 随笔/留言/相册/课表/AI 五块）：
       最后一块为奇数 DOM 位时跨满两列，避免孤儿半格。AI 故意排末位：
       全开时 2+2+宽 AI；AI 被 ff-ai-off 隐藏（display:none 不占格，但 :last-child 仍指它，
       规则落空）→ 剩四块正好 2×2；相册被隐藏时 AI 顶到末位承接宽位 → 2+宽 AI。
       仅「相册+AI 同时关」的罕见组合会剩三块出半格孤块（与旧版三磁贴行为一致，可接受）。 */
    .home-entry:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    .home-entry {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      min-height: 84px;
      padding: 13px 14px 12px;
      border: 1px solid var(--apple-border);
      border-radius: calc(var(--radius) * 0.75);
      background: var(--apple-secondary);
      color: inherit;
      text-decoration: none;
      transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }

    .home-entry:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--primary) 45%, var(--apple-border));
      box-shadow: var(--shadow-sm);
    }

    /* 深色下磁贴与承载卡同为 secondary 色会糊成一片（2026-10-07）：
       掺入页面底色调成一档「凹槽」层次，浅色主题不受影响 */
    .dark .home-entry {
      background: color-mix(in srgb, var(--apple-secondary) 55%, var(--apple-background));
    }

    .home-entry:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .home-entry svg {
      color: var(--primary);
      margin-bottom: 2px;
    }

    .he-name {
      font-size: 13.5px;
      font-weight: 650;
    }

    .he-desc {
      font-size: 11.5px;
      line-height: 1.35;
      color: var(--apple-muted-foreground);
    }

    /* 悬停浮现的 ↗：轻推一下表示「能点」，不喧宾夺主 */
    .he-arrow {
      position: absolute;
      top: 10px;
      right: 12px;
      font-size: 12px;
      color: var(--apple-muted-foreground);
      opacity: 0;
      transform: translate(-4px, 4px);
      transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
    }

    .home-entry:hover .he-arrow,
    .home-entry:focus-visible .he-arrow {
      opacity: 1;
      transform: none;
    }

    /* ----- 站点数据行 ----- */
    .home-stats {
      margin: 14px 4px 0;
      text-align: center;
      font-size: 12px;
      letter-spacing: 0.02em;
      color: var(--apple-muted-foreground);
      font-variant-numeric: tabular-nums;
    }

    .home-stats b {
      font-weight: 600;
      color: var(--primary);
    }

    /* 随笔卡整体收起（数据两路都拿不到时不收卡，只给提示行；这里仅备用满宽规则） */
    .home-notes-card[hidden] {
      display: none !important;
    }

    /* ----- 响应式 ----- */
    @media (max-width: 900px) {
      .home-lower-grid {
        grid-template-columns: minmax(0, 1fr); /* 必须 minmax(0,·)：裸 1fr 的 min-width:auto 会被单行省略文本撑破视口 */
        gap: 14px;
      }

      .home-lower {
        padding-bottom: 22px;
      }
    }

    @media (max-width: 480px) {
      .home-entry-grid {
        gap: 8px;
      }

      .home-entry {
        min-height: 76px;
        padding: 11px 12px 10px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .home-notes-list.is-loading li {
        animation: none;
      }

      .home-entry,
      .he-arrow,
      .hn-text {
        transition: none;
      }

      .home-entry:hover {
        transform: none;
      }
    }

    /* =========================
       留言板「信箱」化（2026-09-17，创意集 2.1）：每条留言 = 一封信。
       信纸卡（卡面 + 一道对折痕）+ 圆形邮戳（日期/时间盖戳，头部行尾）+ 小邮票（留言 id 变四款色），
       入场 = 展信动画逐封错峰（延迟由 common.js boardLoad 内联注入）。数据与接口零改动；
       戳/痕/章的墨色是本段新增的三个语义变量（深色各自重定义）；reduced-motion 只去展信动画
       ========================= */
    :root { --letter-crease: rgba(60, 50, 40, 0.05); --postmark-ink: rgba(96, 88, 80, 0.66); --seal-ink: #bf3f2e; }
    .dark { --letter-crease: rgba(255, 255, 255, 0.055); --postmark-ink: rgba(232, 226, 220, 0.55); --seal-ink: #e0654a; }
    .board-item {
      position: relative;
      margin-bottom: 10px;
      background:
        linear-gradient(105deg, transparent 49.6%, var(--letter-crease) 49.6%, var(--letter-crease) 50.4%, transparent 50.4%),
        var(--apple-card);
      border: 1px solid var(--apple-border);
      border-radius: 12px;
      animation: letterIn 420ms var(--ease-out) backwards;
    }
    .board-item:last-child { margin-bottom: 0; }
    @keyframes letterIn {
      from { opacity: 0; transform: perspective(700px) rotateX(-12deg) translateY(8px); }
      to { opacity: 1; transform: none; }
    }
    .board-postmark {
      position: relative;
      margin-left: auto;
      flex: none;
      width: 52px; height: 52px;
      border: 1px dashed var(--postmark-ink);
      border-radius: 50%;
      transform: rotate(-9deg);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 1px;
      color: var(--postmark-ink);
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    .board-postmark::before {
      content: "";
      position: absolute; inset: 3px;
      border: 1px solid var(--postmark-ink);
      border-radius: 50%;
      opacity: .45;
    }
    .board-postmark .pm-brand { font-style: normal; font-size: 7px; font-weight: 700; letter-spacing: .18em; opacity: .75; }
    .board-postmark .pm-date { font-size: 10px; font-weight: 700; line-height: 1.15; }
    .board-postmark .pm-time { font-size: 9px; line-height: 1.15; opacity: .85; }
    .board-stamp {
      flex: none;
      position: relative;
      width: 34px; height: 42px;
      margin: -2px 0 -2px 2px;
      border: 1px dashed var(--apple-border);
      border-radius: 4px;
      background: var(--apple-card);
      transform: rotate(5deg);
    }
    .board-stamp::after {
      content: "";
      position: absolute; inset: 3px;
      border-radius: 2px;
      background:
        radial-gradient(circle at 70% 26%, rgba(255, 255, 255, .95) 0 3.5px, transparent 4px),
        linear-gradient(to top, rgba(255, 255, 255, .38) 0 5px, transparent 5px),
        linear-gradient(150deg, var(--stamp-c1), var(--stamp-c2));
    }
    .board-stamp.v1 { --stamp-c1: #a34c22; --stamp-c2: #d98b5f; }
    .board-stamp.v2 { --stamp-c1: #a8842a; --stamp-c2: #e0b95c; }
    .board-stamp.v3 { --stamp-c1: #2f8f6f; --stamp-c2: #6cc4a4; }
    .board-stamp.v4 { --stamp-c1: #7a5cc4; --stamp-c2: #ab8fe0; }
    @media (max-width: 560px) {
      .board-stamp { display: none; }
      .board-postmark { width: 46px; height: 46px; }
      .board-postmark .pm-date { font-size: 9px; }
      .board-postmark .pm-time { font-size: 8.5px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .board-item { animation: none; }
    }

    /* =========================
       首页「今日印记」（2026-09-17，创意集 1.2/1.3）：节气红章 + 流星雨极大预告。
       平日 #heroMarks 整块 hidden（属性控制，坑 14 口径）；元素只在 index.html 的 main 里，
       不进八页外壳（坑 23 免同步）；内容由 common.js startHomeClock 段 applyHeroMarks 按当日历法填充
       ========================= */
    .hero-marks { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .term-seal {
      flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px;
      border: 2px solid var(--seal-ink);
      border-radius: 8px;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seal-ink) 40%, transparent);
      color: var(--seal-ink);
      font-size: 15px; font-weight: 700; letter-spacing: 3px;
      writing-mode: vertical-rl;
      transform: rotate(-4deg);
      opacity: .92;
      user-select: none;
    }
    .shower-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px;
      border: 1px solid var(--apple-border);
      border-radius: 999px;
      background: var(--apple-card);
      color: var(--apple-muted-foreground);
      font-size: 12.5px;
    }
    .shower-chip .sc-star { font-style: normal; color: var(--apple-accent); font-size: 12px; }


    /* ===== 登录卡·注册邮箱开关（2026-10-01）：邮件服务开启且后台未强制时显示 =====
       勾选=邮箱注册（可用于找回密码），去勾=纯用户名注册（之后可在个人主页绑定邮箱） */
    .login-emailopt {
      flex-direction: row;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }
    .login-emailopt input[type='checkbox'] {
      width: 15px;
      height: 15px;
      margin: 0;
      flex: none;
      accent-color: var(--primary);
      cursor: pointer;
    }
    .login-emailopt span {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--apple-muted-foreground);
    }


    /* ===== 相册页（/album/，2026-10-01 恢复）：牌堆封面 → 照片墙 → 灯箱 =====
       旧版（2026-09-05 前寄生首页画廊）的全屏 .album-view 壳不再需要——本版是常规子页，
       标题行复用子页通用 .album-bar/.album-title（随笔页同款），卡片壳走 .apple-card。 */
    .album-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      user-select: none;
      margin-top: 14px;
    }
    @media (max-width: 1024px) { .album-list { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px)  { .album-list { grid-template-columns: 1fr; } }

    .album-entry {
      border-radius: calc(var(--radius) - 2px);
      cursor: pointer;
      transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
    }
    /* order:-1 = 展开项即刻排到列表最前（站长要求「展开后显示在最上面」，2026-10-01）：
       与 JS 的瞬时锚定一次到位；其他相册 360ms 后 display:none 时展开项位置不变，无二次跳变 */
    .album-entry.expanded { grid-column: 1 / -1; cursor: default; order: -1; }
    /* 展开时卡片背景盖满一屏（站长定版 2026-10-02）：照片少时 .apple-card 壳也延伸到屏幕底，
       页面始终可滑；收回期间的动态撑高与收尾回落由 JS 管（albumToggleEntry 锁视口底沿、
       albumCollapseFinish 量自然高后过渡回落），这里只管展开静态态 */
    .album-list.has-expanded { min-height: calc(100vh - 96px); }
    /* 展开某个相册时，其它相册缩小退场 */
    .album-list.has-expanded .album-entry:not(.expanded) { opacity: 0; transform: scale(.92); pointer-events: none; }
    .album-list.has-expanded .album-entry:not(.expanded).gone { display: none; }

    /* 牌堆封面：三张微旋转叠放，悬停/展开时扇形张开 */
    .album-cover { padding: 22px 16px 8px; text-align: center; }
    .album-stack { position: relative; height: 176px; max-width: 240px; margin: 0 auto; }
    .stack-photo {
      position: absolute; inset: 0;
      transform-origin: center;
      transition: transform .5s var(--spring), opacity .35s ease;
      will-change: transform;
    }
    .stack-photo .img-wrap {
      position: relative;
      width: 100%; height: 100%;
      border-radius: 10px; overflow: hidden;
      border: 6px solid var(--card);
      box-shadow: var(--shadow-md);
      background: var(--card);
    }
    /* 两张图叠在一起做交叉淡入淡出（幻灯片式换图，不做位移避免割裂感） */
    .stack-photo .img-wrap img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: opacity .7s ease;
    }
    .stack-photo .img-wrap img.under { opacity: 0; }
    .stack-photo:nth-child(1) { transform: rotate(-4deg) translateY(0)    scale(1);    z-index: 1; }
    .stack-photo:nth-child(2) { transform: rotate(0deg)  translateY(12px) scale(.96); z-index: 2; }
    .stack-photo:nth-child(3) { transform: rotate(3deg)  translateY(24px) scale(.92); z-index: 3; }
    .album-entry:hover .stack-photo:nth-child(1),
    .album-entry.expanded .stack-photo:nth-child(1) { transform: rotate(-12deg) translateY(-4px)  scale(.95); }
    .album-entry:hover .stack-photo:nth-child(2),
    .album-entry.expanded .stack-photo:nth-child(2) { transform: rotate(0deg)   translateY(-10px) scale(1); }
    .album-entry:hover .stack-photo:nth-child(3),
    .album-entry.expanded .stack-photo:nth-child(3) { transform: rotate(12deg)  translateY(-4px)  scale(.95); }

    .album-count-badge {
      position: absolute; bottom: -6px; right: 0; z-index: 4;
      padding: 3px 12px; border-radius: 999px;
      background: var(--primary); color: var(--primary-foreground);
      font-size: 11px; font-weight: 700;
      box-shadow: var(--shadow-md);
    }

    .album-info { margin-top: 20px; padding-bottom: 6px; }
    .album-info h3 { font-size: 17px; font-weight: 700; }
    .album-info p { font-size: 12px; color: var(--muted-foreground); margin-top: 4px; letter-spacing: .05em; }

    /* 照片墙容器：高度不参与动画——display 瞬时切换，入场动画由每张 .wall-item 的
       stagger 错落（纯 transform/opacity 合成动画）承担。
       曾用 max-height 0→4000px 过渡（站长实报展开/收回卡顿，2026-10-01 改）：
       ① layout 动画过渡期间每帧全量 reflow，照片一多必掉帧；② 4000px 上限大半程
       空跑——收回时前段页面毫无变化、后段突然收起，观感是「点了没反应再猛收」。
       配套：img decoding=async 把解码挪出动画关键路径（common.js albumRender） */
    .album-photos { display: none; overflow: hidden; }
    .album-entry.expanded .album-photos { display: block; }

    /* 收回退场（2026-10-01 站长三报「要像卡片收回去、慢一点」）：照片墙容器高度
       平滑收拢（高度过渡 + 剪裁可见），照片同步淡出+更深下沉——观感是整叠照片被
       慢慢收回牌堆，而非旧版「淡出后容器瞬切消失」。高度动画只在收回瞬间由 JS
       锁定内联 px（albumCollapseStart），动画结束回落 display:none（不常驻布局）。
       特异性与 .in:hover 同级、源顺序在后，退场期间悬停不抢；transition-delay 显式
       归零防大相册入场 stagger 未重置完的残留延迟拖慢退场 */
    .album-photos.collapsing {
      display: block;
      overflow: visible; /* 收回的卡要飞出容器上缘、落进牌堆封面（发牌的逆过程） */
      height: var(--collapse-h, 0px);
      transition: height .5s cubic-bezier(.5, 0, .3, 1);
    }
    /* 每张卡的飞回位移由 JS 按其与牌堆封面的实际相对位置写入 --fly-x/--fly-y（albumToggleEntry），
       逐张错峰（--fly-d）依次收进：加速飞向牌堆、缩到卡背大小、轻微带回旋角度——
       全程可见地飞回（2026-10-02 三修「照片少时顿感依旧」）：旧版淡出 .38s ease-out 起手就快速
       隐身、而位移曲线前慢后快，卡没走多远就看不见了，飞回过程近乎隐形（观感=照片闪没→空等→
       相册冒出来）。改：飞行 .56s 全程可见，淡出压到最后 .22s（各自延迟 +.34s 起）——卡缩着
       旋进牌堆时才溶掉，站长要的「慢一点、有过程」即此 */
    .wall-item.in.out {
      opacity: 0;
      transform: translate(var(--fly-x, 0px), var(--fly-y, -240px)) rotate(calc(var(--tilt, 0deg) * 2)) scale(.08);
      transition: transform .56s cubic-bezier(.55, 0, .8, .6), opacity .22s ease-in;
      transition-delay: var(--fly-d, 0s), calc(var(--fly-d, 0s) + .34s);
    }
    /* 牌堆「接卡」轻弹：卡陆续飞回时堆身微胀一下像被塞进去（gathering 由 JS 在收回期间挂在 entry 上；
       延迟 .22s≈首卡临堆时刻，弹在点子上才读得出「接住」） */
    .album-entry.gathering .album-stack { animation: album-deck-catch .5s var(--ease-out) .22s backwards; }
    @keyframes album-deck-catch {
      0% { transform: none; }
      40% { transform: scale(1.08) rotate(-1.2deg); }
      100% { transform: none; }
    }
    /* 牌堆「放牌」轻缩：展开发牌时堆身微收一下像把牌撒出去（gathering 接卡的镜像，dealing 由 JS 挂） */
    .album-entry.dealing .album-stack { animation: album-deck-release .5s var(--ease-out) .08s backwards; }
    @keyframes album-deck-release {
      0% { transform: none; }
      40% { transform: scale(.93) rotate(1.2deg); }
      100% { transform: none; }
    }
    /* 其他相册浮回：从 display:none 恢复可见的瞬间从头播（animation 不依赖旧渲染态，
       对 display 切换可靠；fill 默认 none，结束不留 transform——坑 22 教训同款） */
    @keyframes album-entry-back {
      from { opacity: 0; transform: translateY(14px) scale(.96); }
    }
    /* 浮回 .28s（2026-10-02 提速自 .34s）：收尾提前后其他相册的回归要与收卡动作无缝衔接，
       节奏太慢会把「浮回」读成第二段等待 */
    .album-entry.back { animation: album-entry-back .28s var(--ease-out); }
    @media (prefers-reduced-motion: reduce) {
      .wall-item.in.out { transition: none; }
      .album-photos.collapsing { transition: none; }
      .album-entry.gathering .album-stack { animation: none; }
      .album-entry.dealing .album-stack { animation: none; }
      .wall-item.deal { transition: none; }
      .album-entry.back { animation: none; }
    }
    .album-photos-inner { padding: 4px 22px 24px; }
    .wall {
      display: grid;
      /* 列数固定四档响应式（2026-10-01 站长定版：桌面一排四张）：曾用 auto-fill+minmax(300px,1fr)
         自适应（桌面 958px 卡宽下出 3 列），更早的 JS 按 clientWidth 算 --cols 写 inline 变量有
         渲染时序下误写 1 列的时机性 bug（照片撑满整行）——固定列数最直观也无时机依赖 */
      grid-template-columns: repeat(4, 1fr);
      gap: 22px 20px;
      padding-top: 14px;
    }
    @media (max-width: 1024px) { .wall { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 640px)  { .wall { grid-template-columns: repeat(2, 1fr); } }

    /* 拍立得照片卡：白框 + 随机倾斜 + 错落入场 + spring 回正 */
    .wall-item {
      position: relative;
      cursor: zoom-in;
      opacity: 0;
      /* 入场前：下移 30px、双倍倾斜；入场后由 .in 归位 */
      transform: translateY(var(--ey, 30px)) rotate(var(--er, calc(var(--tilt, 0deg) * 2))) scale(var(--es, 1))
        perspective(700px) rotateX(var(--ix, 0deg)) rotateY(var(--iy, 0deg));
      transform-origin: center;
      /* 淡入 .28s（2026-10-02 二修「展开顿一下」）：发牌起手即现身、边飞边大，不再空场后突然弹出；
         与收回的晚段淡出（.out 的 .38s）刻意不对称——展开始于可见、收回终于隐没 */
      transition: transform .6s var(--ease-out), opacity .28s ease;
      transition-delay: var(--d, 0s);
    }
    .wall-item.in {
      --ey: 0px; --er: var(--tilt, 0deg); --es: 1;
      opacity: 1;
    }
    /* 展开发牌（2026-10-02，收回飞回的逆过程）：JS 先把卡摆到牌堆位置（--fly-x/--fly-y 与收回
       同一套向量），摘 .deal 挂 .in 即从牌堆飞向格子——过渡曲线/延迟用 .in 的基础规则承担。
       transition:none 是关键：初始态的摆放（含测量期间变量从 0 改为真实位移）绝不能播过渡 */
    .wall-item.deal {
      opacity: 0;
      transform: translate(var(--fly-x, 0px), var(--fly-y, 0px)) rotate(calc(var(--tilt, 0deg) * 2)) scale(.08);
      transition: none;
    }
    /* 悬停 spring 回正 + 微放大（transition-delay 归零才跟手） */
    .wall-item.in:hover {
      --er: 0deg; --es: 1.03;
      transition: transform .45s var(--spring);
      transition-delay: 0s;
      z-index: 10;
    }
    .wall-item .frame {
      background: var(--card);
      padding: 8px 8px 26px;
      border-radius: 3px;
      box-shadow: var(--shadow-md);
      transition: box-shadow .3s ease;
    }
    .wall-item:hover .frame { box-shadow: var(--shadow-xl); }
    /* 照片统一 4:3 宽幅取景（站长定版 2026-10-02：先试 1:1 方形，站长选了 4:3——横图几乎不裁、
       网格行高恒定；原横 4:3/竖 4:5 两档并存导致格子有宽有矮。完整原片点开灯箱看原图） */
    .wall-item .img-wrap { overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; }
    .wall-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* ===== 灯箱大图预览（相册页内，随 main 装卸；z 200 低于登录卡 400） ===== */
    .lightbox[hidden] { display: none; }
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: zoom-out;
      padding: 5vw;
      opacity: 0;
      visibility: hidden;
      transition: opacity 250ms var(--ease-out), visibility 250ms var(--ease-out);
    }
    .lightbox.show { opacity: 1; visibility: visible; }
    .lightbox img {
      max-width: 100%;
      max-height: 90vh;
      border-radius: calc(var(--radius) * 0.8);
      box-shadow: var(--shadow-2xl);
      transform: scale(0.95);
      transition: transform 300ms var(--ease-out);
    }
    .lightbox.show img { transform: scale(1); }

    .lb-fav {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.42);
      color: #fff;
      cursor: pointer;
      transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out);
    }
    .lb-fav:hover { transform: scale(1.1); background: rgba(0, 0, 0, 0.58); }
    .lb-fav svg { fill: none; transition: fill 180ms var(--ease-out), stroke 180ms var(--ease-out); }
    .lb-fav.faved svg { fill: #ff4d6a; stroke: #ff4d6a; }

    /* 灯箱左右翻页按钮 + 张数指示 */
    .lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
      cursor: pointer;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
    }
    .lb-nav:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-50%) scale(1.08);
    }
    .lb-prev { left: 24px; }
    .lb-next { right: 24px; }
    .lb-nav[hidden] { display: none; }

    .lb-counter {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: 0.15em;
      color: rgba(255, 255, 255, 0.8);
    }

    /* ===== 个人主页 · 收藏照片网格（favPhotos，八页外壳 profileView 内） ===== */
    .fav-photos {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .fav-photo {
      width: 108px;
      height: 108px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      background: var(--secondary, var(--card));
      transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
    }
    .fav-photo:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: var(--shadow-md);
    }
    .fav-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* =========================
       骨架屏（2026-10-02 慢线路体验批）：数据未到前先给「形状」
       ① .data-skel 静态数据骨架：写在各页 main 里（docs/notes/board/album），数据渲染后由 JS
          置 hidden——main 内容不参与八页外壳比对（坑 23 免同步）；脉冲走 --apple-chip 语义色，
          深浅主题自动跟随；reduced-motion 去动画留静态块
       ② #pjaxSkel 换页骨架层：common.js 注入一次（外壳免同步），pjax 160ms 反馈时机显示，
          按目标页 data-skel 变体切换轮廓；不透明底盖住变暗旧页，观感=旧页→骨架→新页
       ========================= */
    .data-skel[hidden] { display: none; }
    .data-skel { display: grid; gap: 20px; margin-top: 14px; }
    .data-skel.ds-grid-3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
    .data-skel.ds-stack { grid-template-columns: 1fr; gap: 16px; }
    .data-skel.ds-album { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px; }
    .skel {
      display: block;
      border-radius: 10px;
      background: var(--apple-chip, rgba(128, 128, 128, 0.14));
      animation: skel-pulse 1.4s ease-in-out infinite;
    }
    @keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
    @media (prefers-reduced-motion: reduce) {
      .skel { animation: none; opacity: .6; }
    }

    /* pjax 换页骨架层：z 40 压过内容与页脚、低于头部胶囊(50)；不透明底直接当「新页加载态」 */
    #pjaxSkel {
      position: fixed;
      inset: 0;
      z-index: 40;
      background: var(--background);
      display: none;
      overflow: hidden;
    }
    #pjaxSkel.show { display: block; }
    #pjaxSkel .ps-wrap {
      max-width: 860px;
      margin: 0 auto;
      padding: 130px 4vw 40px;
    }
    #pjaxSkel .ps-var { display: none; }
    #pjaxSkel[data-skel="sub"] .ps-var[data-v="sub"],
    #pjaxSkel[data-skel="album"] .ps-var[data-v="album"],
    #pjaxSkel[data-skel="home"] .ps-var[data-v="home"],
    #pjaxSkel[data-skel="ai"] .ps-var[data-v="ai"] { display: block; }
    #pjaxSkel .ps-eyebrow { width: 130px; height: 14px; margin-bottom: 22px; }
    #pjaxSkel .ps-card { padding: 24px; border-radius: calc(var(--radius, 1.2rem)); background: var(--card); border: 1px solid var(--border); }
    #pjaxSkel .ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
    #pjaxSkel .ps-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px; }
    #pjaxSkel .ps-stack { display: grid; gap: 16px; }
    #pjaxSkel .ps-hero { display: flex; gap: 24px; align-items: stretch; }
    #pjaxSkel .ps-hero .skel:first-child { flex: 1 1 auto; height: 320px; }
    #pjaxSkel .ps-hero .skel:last-child { flex: 0 0 320px; height: 320px; }
    @media (max-width: 900px) {
      #pjaxSkel .ps-hero { flex-direction: column; }
      #pjaxSkel .ps-hero .skel:last-child { flex: none; height: 180px; }
    }
    #pjaxSkel .ps-lower { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
    #pjaxSkel .ps-ai { height: calc(100vh - 200px); border-radius: var(--radius, 1.2rem); }
    #pjaxSkel .ps-album .skel { height: 280px; }
    @media (max-width: 640px) {
      #pjaxSkel .ps-album .skel { height: 240px; }
    }

    /* ===== 全屏开场动画（2026-10-04） =====
       判定在八页外壳 head 内联小片段（深链 #hash 跳过 / reduced-motion 跳过 / 后台开关关掉跳过；
       命中才打 html.intro-pending——坑 23 同步块，check-code 步骤[4] 把关）。⚠️ 原会话一次
       （sessionStorage yhuoIntroDone）已于 2026-10-06 本地测试期临时摘除，改成每次整页加载都演，
       上线前须回退（回退说明写在八页 head 片段注释里）。
       封面 = html.intro-pending 的**单片 ::after（满屏）**，从首帧就在：
       纸底 + 顶部暖橙光晕（叠顶部白高光、底部极淡暗角三层）与 html 画布层同源同参数，
       观感是「画布先到、内容跟进」。
       字标（#introRoot，z501）由 common.js 开场段注入，**压在封面之上**。
       揭幕 = **整层封面直接淡出**（opacity 1→0；2026-10-06 定稿，形态沿革见下方「淡出」段注释）。
       ⚠️ 别把封面挪进 body：它必须在 common.js 执行前就随 CSS 上帧，只能挂 html 伪元素上。
       ⚠️ 封面挂 html 上而非 body：body 内的元素会随 pjax 换页被替换，封面会掉。 */
    html.intro-pending { overflow: hidden; } /* 封面期间锁滚动，随类摘除一并放行 */
    #introRoot {
      position: fixed;
      inset: 0;
      z-index: 501;
      display: grid;
      place-items: center;
      padding-bottom: 9vh; /* 字标略抬到版心偏上，落点接近首页时钟的位置 */
      pointer-events: none; /* 输入由 common.js 的 window 监听接住，页面元素在封面期间收不到点击 */
    }
    .intro-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      /* 字标 620ms 落位（原 700ms）——与圆点 420+260=680ms、副标 360+460=820ms 形成先后层次 */
      animation: introBrandIn 620ms var(--ease-out) both;
    }
    /* 开场进度条（2026-10-06）：封面底部一条 3px 细线，随揭幕时机从 0% 走到 100%。两套模式：
       快线路（脚本 ≤2s 到）= 假进度条：按停顿时长匀速走完，纯装饰，与 finish() 严格同步；
       慢线路（脚本 >2s 到）= 真进度条：common.js 用 Resource Timing 观测已在下载的资源到达率
       （零额外请求），走满即揭幕，另有 WAIT_CAP 上限兜底。时长取 --intro-progress-dur
       （由 common.js 按当前停顿/跳过时长同步写入），所以走完即揭幕、跳过时冲完，两者不脱节。 */
    .intro-progress {
      position: absolute;
      left: 50%;
      bottom: 9vh; /* 与字标 padding-bottom:9vh 呼应，落在同一视觉水平线上 */
      width: min(200px, 38vw);
      height: 3px;
      transform: translateX(-50%);
      border-radius: 3px;
      background: color-mix(in srgb, var(--apple-foreground) 9%, transparent);
      overflow: hidden;
      animation: introBarIn 300ms var(--ease-out) both;
    }
    .intro-progress > i {
      display: block;
      height: 100%;
      width: 100%;
      border-radius: inherit;
      /* 静态暖陶土渐变（左浅右实），比纯色更有走向感；绘制一次、不逐帧。 */
      background: linear-gradient(90deg,
        color-mix(in srgb, var(--primary) 65%, transparent), var(--primary));
      transform-origin: left center;
      transform: scaleX(0);
      /* --intro-progress-dur 由 common.js 按当前停顿/跳过时长同步写入（正常档 PAUSE）。
         ⚠️ 用 transform: scaleX() 而非 width 动画（2026-10-06 站长报「卡」后改）：
         width 是**重绘**属性，逐帧重新布局+绘制这条线；transform 是合成器属性，零重绘。
         真进度模式（慢线路）由 JS 逐帧写 style.transform——那是低频离散更新（每个资源落地才写一次），
         不构成逐帧动画，不在此列。 */
      animation: introBarFill var(--intro-progress-dur, 1400ms) var(--ease-out) forwards;
    }
    /* 真进度模式（慢线路）：JS 写 width、CSS 动画已停，这里加一点高亮与光点提示「在真加载」 */
    .intro-progress.is-real > i {
      background: linear-gradient(90deg,
        color-mix(in srgb, var(--primary) 55%, transparent), var(--primary));
      box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 45%, transparent);
    }
    .intro-progress.is-real::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--apple-foreground) 22%, transparent), transparent);
      animation: introBarShimmer 1.1s linear infinite;
    }
    @keyframes introBarShimmer {
      from { transform: translateX(-100%); }
      to   { transform: translateX(100%); }
    }
    @keyframes introBarIn {
      from { opacity: 0; transform: translateX(-50%) scaleX(0.6); }
      to   { opacity: 1; transform: translateX(-50%) scaleX(1); }
    }
    @keyframes introBarFill {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
    /* 揭幕时进度条随 #introRoot 一起淡出上浮（共用 introBrandOut，无需单列规则） */

    /* ⚠️ 原introBrandIn 带 `filter: blur(10px) → blur(0)`（2026-10-06 站长报「卡」后移除）：
       filter 是**重绘**属性，逐帧对整块字标做高斯模糊，代价极高；
       且它与「揭开时内容被切开」的观感无关，纯属装饰。
       改为只用 opacity + transform（均为合成器属性）模拟同样的「由虚到实」入场感：
       字号不变、位移照旧，只是少了模糊，视觉几乎无差但主线程零重绘。 */
    @keyframes introBrandIn {
      from { opacity: 0; transform: translateY(14px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .intro-word {
      /* 2026-10-06 收敛精致版：字重 700→640（DM Sans 可变轴）、字号上限 72→68px、
         字距 .18em→.16em。字距与 margin-right 必须相等才真居中。 */
      font-size: clamp(42px, 8.6vw, 68px);
      font-weight: 640;
      letter-spacing: 0.16em;
      margin-right: -0.16em; /* 抵消末字符字距，视觉真居中（= letter-spacing） */
      font-kerning: normal;
      text-transform: uppercase; /* 与顶栏 .logo 同口径 */
      line-height: 1;
      color: var(--apple-foreground);
    }
    .intro-dot {
      display: inline-block;
      width: 0.17em;
      height: 0.17em;
      margin-left: 0.12em;
      border-radius: 50%;
      background: var(--primary);
      /* 静态外环：细一圈陶土描边，收一点印感。属 box-shadow 但**不逐帧**——
         入场动画只动 transform: scale()，外环随整块一起被合成器缩放，零重绘。 */
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
      transform: scale(0);
      animation: introDotIn 260ms var(--spring) 420ms forwards;
    }
    @keyframes introDotIn { to { transform: scale(1); } }
    .intro-sub {
      font-family: var(--font-mono);
      font-size: 12.5px;
      letter-spacing: 0.30em;
      margin-right: -0.30em; /* = letter-spacing，视觉真居中 */
      color: var(--apple-muted-foreground);
      /* 落位时刻 = 延迟 360 + 时长 460 = 820ms（停顿 1400ms 前留足呼吸） */
      animation: introSubIn 460ms var(--ease-out) 360ms both;
    }
    @keyframes introSubIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }
    /* 揭幕形态（2026-10-06 定稿）= **单片满屏淡出**：封面整层 opacity 1→0，无位移、无裁剪、无分片。
       形态沿革（四版，前三版均已废弃，别再改回去）：
         ① 圆形收拢 clip-path circle(120%→0%)（否）→ ② 从中间裂开向左右滑出（否）
         → ③ 上下展开两片 translateY（否）→ ④ **单片淡出（定稿）**，实现见下方「淡出」段。
       废弃原因：三版分片方案都要为「分片」额外处理 background 坐标系对齐（左右那版踩过
       「光晕圆心跑到视口外」的坑），单片满屏天生没有这个问题。 */
    /* 封面 = html.intro-pending::after 单片满屏（2026-10-06 站长定「加载完直接淡出」后简化）。
       ⚠️ 曾用 ::before+::after 两片做「上下展开」，现已废弃——单片淡出更简、也更稳：
       两片方案要为分片做 background 坐标系对齐（左右分片时踩过光晕圆心跑到视口外的坑），
       单片满屏不存在这类问题。
       仍必须挂 html 伪元素上（不能挪进 body）：封面要在 common.js 执行前就随 CSS 上帧，
       且 body 元素会被 pjax 换页替换，封面会掉。 */
    html.intro-pending::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 500; /* 全站最高层（次高 400）；字标 501 压在其上 */
      /* 纵深质感（2026-10-06）：陶土光晕 + 顶部白高光 + 底部极淡暗角三层叠在纸底上。
         ⚠️ 全是静态 background（只在插入/揭幕时绘制，不逐帧），零合成成本。 */
      background:
        radial-gradient(62% 100% at 50% -8%, color-mix(in srgb, var(--glow-a) 16%, transparent), transparent 62%) top center / 100% 540px no-repeat,
        radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%) top center / 100% 60% no-repeat,
        radial-gradient(140% 60% at 50% 108%, rgba(27, 28, 30, 0.035), rgba(27, 28, 30, 0) 60%) bottom center / 100% 55% no-repeat,
        var(--background, #f8f7f4);
    }
    html.dark.intro-pending::after {
      background:
        radial-gradient(62% 100% at 50% -8%, color-mix(in srgb, var(--glow-b) 12%, transparent), transparent 62%) top center / 100% 540px no-repeat,
        radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%) top center / 100% 60% no-repeat,
        radial-gradient(140% 60% at 50% 108%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 60%) bottom center / 100% 55% no-repeat,
        var(--background, #000000);
    }
    /* 访客设了自定义背景（body.has-custom-bg，由 common.js 背景应用逻辑打）时，底图与流星层都在
       z-index:-1、被不透明纸底盖住，淡出后图会「啪一下出现」——那就破坏「画布先到、内容跟进」的连续感。
       这里只把纸底层换成 transparent（暖橙光晕层保留、与画布层同源参数不动），让底图/流星透出。
       ⚠️ 这两条**故意不加**上面新增的白高光/暗角——它们会把底图压住，正是本条要避免的断层。
       ⚠️ 伪元素挂 html 而has-custom-bg 类在 body 上，只能靠 :has() 反向选中；
       :has() 特异性取参数中最强者（body.has-custom-bg = 0,1,1），深色那条再加 .dark 抬高一档。 */
    html.intro-pending:has(body.has-custom-bg)::after {
      background:
        radial-gradient(62% 100% at 50% -8%, color-mix(in srgb, var(--glow-a) 16%, transparent), transparent 62%) top center / 100% 540px no-repeat,
        transparent;
    }
    html.dark.intro-pending:has(body.has-custom-bg)::after {
      background:
        radial-gradient(62% 100% at 50% -8%, color-mix(in srgb, var(--glow-b) 12%, transparent), transparent 62%) top center / 100% 540px no-repeat,
        transparent;
    }
    /* 淡出（2026-10-06 站长定「加载完直接淡出即可」）：封面整体透明度 1→0，无位移无裁剪。
       ⚠️ **只用 opacity**（合成器属性，主线程零参与）——这是最省的开销形态。
       ⚠️ 形态沿革（四版）：① 原圆形收拢 circle(120%→0%)（否）
          → ② 从中间裂开向左右（否）→ ③ 上下展开两片 translateY（否：仍要分片对坐标系）
          → ④ **单片淡出（定稿）**。三版分片方案都已废弃，别再改回去。
       字标 #introRoot 随封面一起淡出（introBrandOut），不另做位移。 */
    html.intro-pending.intro-out::after {
      animation: introFade var(--intro-fade-dur, 500ms) var(--ease-out) forwards;
      will-change: opacity;
    }
    @keyframes introFade {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    html.intro-out #introRoot { animation: introBrandOut 300ms var(--ease-out) forwards; }
    @keyframes introBrandOut {
      to { opacity: 0; transform: translateY(-8px); }
    }
    /* 任意输入跳过：淡出收短到 300ms，进度条同步冲完（--intro-progress-dur 一起收短） */
    html.intro-skip {
      --intro-fade-dur: 300ms;
      --intro-progress-dur: 300ms;
    }
    /* 字体对齐（2026-10-06）：字标元素必须先插入（否则 Google Fonts 的字体文件不会被请求），
       但入场动画要等字体就绪再跑，避免「先显本地字、再换字体」的闪跳。
       做法= common.js 先给 <html> 加 .intro-fontpending、再插入 #introRoot，
       这里把五处入场动画全部暂停在 0% 起点；字体就绪（或 300ms 上限到）后 common.js 摘类，
       五条动画同帧一起解冻，原有先后时序不变。 */
    html.intro-fontpending .intro-brand,
    html.intro-fontpending .intro-dot,
    html.intro-fontpending .intro-sub,
    html.intro-fontpending .intro-progress,
    html.intro-fontpending .intro-progress > i { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) {
      /* JS 判定本就不演；这层是兜底——真打上了类也瞬时完成，不停留。
         ⚠️ 淡出只有一片（::after），reduced-motion 只需覆盖它一条。 */
      html.intro-pending.intro-out::after { animation-duration: 1ms; }
      #introRoot, #introRoot .intro-brand, #introRoot .intro-dot, #introRoot .intro-sub,
      #introRoot .intro-progress, #introRoot .intro-progress > i,
      #introRoot .intro-progress.is-real::after { animation-duration: 1ms !important; }
    }

    /* —— 看板娘 · 达妮娅（2026-10-11，角色主题 denia 专属彩蛋）——
       仅当前主题为 denia 时由 common.js 注入显示（window.__chibiSync 门控，随主题切换进出）。
       位置=左下角（右下角已被音乐球/外观圆钮/回顶钮占用）；fixed 直挂 body、不进任何
       transform 容器（坑 22/28），动画只落在 img 叶子节点上；reduced-motion 全关。 */
    .chibi-mascot {
      position: fixed;
      left: 14px;
      bottom: calc(14px + env(safe-area-inset-bottom));
      z-index: 40;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
    }
    .chibi-pose { transform-origin: 50% 100%; transition: transform .25s ease; }
    .chibi-mascot:hover .chibi-pose { transform: scale(1.05); }
    .chibi-pose.chibi-tilt-l { transform: rotate(-5deg); }
    .chibi-pose.chibi-tilt-r { transform: rotate(5deg); }
    .chibi-pose.chibi-bounce { transform: translateY(-10px) scale(1.03); }
    .chibi-mascot img {
      display: block;
      height: 150px;
      width: auto;
      filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .16));
      animation: chibi-bob 3.4s ease-in-out infinite;
    }
    @keyframes chibi-bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-7px); }
    }
    .chibi-bubble {
      position: absolute;
      left: 6px;
      bottom: calc(100% + 10px);
      white-space: nowrap;
      max-width: 250px;
      overflow: hidden;
      text-overflow: ellipsis;
      background: color-mix(in srgb, var(--card) 93%, transparent);
      color: var(--foreground, #1f1b18);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 12.5px;
      line-height: 1.6;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
      opacity: 0;
      translate: 0 6px;
      transition: opacity .3s ease, translate .3s ease;
      pointer-events: none;
    }
    .chibi-bubble.show { opacity: 1; translate: 0 0; }
    .chibi-mascot[hidden] { display: none; }
    @media (max-width: 640px) {
      .chibi-mascot { left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); }
      .chibi-mascot img { height: 88px; }
      .chibi-bubble { max-width: 190px; font-size: 12px; }
      /* 手机端给立绘+气泡让出底部空间：页面最后一块内容能完整滚到看板娘上方，不被盖住。
         特异度须压过 html[data-page]:not([data-page=home]) main.page-main 的 padding-bottom:24px；
         达妮娅/爱弥斯两角色同款（2026-10-14） */
      html[data-page][data-accent='denia'] main.page-main,
      html[data-page][data-accent='aemeath'] main.page-main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
    }
    @media (prefers-reduced-motion: reduce) {
      .chibi-mascot img { animation: none; }
      .chibi-pose { transition: none; }
      .chibi-bubble { transition: none; }
    }

    /* ===== 手机版信息密度批（2026-10-14 站长实报「手机版 UI 缩放有点大，可显示的内容太少」）=====
       实测字号本身已合理（正文 16px、课程卡 11~14.5px），吃屏的是留白：子页顶部 96px + 课表页头
       135px + 今日卡 131px，390×844 首屏只能见到一张课程卡的一半。全批仅手机断点生效，桌面零改动。 */
    @media (max-width: 640px) {
      /* 子页顶部留白 96→68px：与 AI 页 2026-09-06 同口径（68 = 胶囊下沿 ~58px + 余量），其余子页跟进。
         特异度与 6815 行子页通用规则同为 0-3-2，靠文件位置更后取胜；AI 页本就 68px，值相同无变化 */
      html[data-page]:not([data-page="home"]) main.page-main { padding-top: 68px; }
      /* 卡片内边距 16→12px：全部子页卡片密度整体提升（外观抽屉/个人中心等浮层卡同步收紧，观感一致） */
      .card-padding { padding: 12px; }
      .sched-page-head { margin-bottom: 12px; }
    }
    @media (max-width: 560px) {
      /* 课表页头：装饰性眉题隐藏、标题 26→22px，省出约一行课程卡高度 */
      .sched-page-eyebrow { display: none; }
      .sched-page-title { font-size: 22px; margin-bottom: 6px; }
      /* 今日卡/筛选行/视图条/卡间距收紧：14→10px，今日卡上下内边距 16→12px */
      .sched-today { margin-bottom: 10px; }
      .sched-today-in { padding: 12px 14px; }
      .sched-filter-row { margin-bottom: 10px; }
      .sched-viewbar { margin-bottom: 10px; }
      .sched-day-list { gap: 10px; }
    }

    /* =========================
       验证码格子输入（2026-10-14，参考 reactbits.dev Code Slots，原生 CSS 复刻）：
       ①输入段——真输入透明铺满承担键入/粘贴/自动填充，6 格只镜像显示，单字弹入（scale 过冲）、
       焦点高亮当前位、清空整组下沉；②确认段（2026-10-14 追，站长问「验证码正确格子合并显示对勾」）——
       校验通过时主题色洗条从中间铺开把整排连成一块（视觉上「六格合并」）、数字逐格下沉隐去、
       对勾延迟 280ms 弹入；③错误段——整排染红 + 有字格从右往左逐个蒸掉再清空
       （确认/错误两态时序均对齐原版 status=success/error 源码常量）。
       提交逻辑读的仍是原输入框 value，上游零改动。
       ========================= */
    .code-slots {
      position: relative;
      display: flex;
      gap: 8px;
      height: 40px;
      cursor: text;
      --cs-wash-radius: 10px; /* 洗条/对勾圆角：四复古主题清零（与格子直角同口径） */
    }
    /* 真输入：铺满容器透明接管键入；opacity 0 而非 display:none（保持可聚焦/自动填充）；
       z-index 4 = 最上层（对齐原版层序：洗条 z1 只盖格子、输入永远可聚焦） */
    .code-slots > input {
      position: absolute;
      inset: 0;
      z-index: 4;
      width: 100%;
      height: 100%;
      opacity: 0;
      border: none;
      padding: 0;
      margin: 0;
      background: transparent;
      font-size: 16px; /* iOS 聚焦自动放大阈值以下（站内既有口径） */
      cursor: text;
    }
    .code-slots > input:focus { outline: none; }
    /* 选择器带 .code-slots 前缀提特异性：登录卡里既有 .login-field span（12px/600/灰）会压 .code-slot */
    .code-slots .code-slot {
      flex: 1 1 0;
      min-width: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      font-family: inherit;
      font-variant-numeric: tabular-nums;
      color: var(--apple-foreground);
      background: var(--apple-secondary);
      border: 1px solid var(--apple-border);
      border-radius: 10px;
      transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
        background-color 180ms var(--ease-out);
      user-select: none;
    }
    /* 数字墨层：下沉/蒸掉动画只动这层，不动格子底（同原版 Slot 的 fill 与 ink 分离口径） */
    .code-slot-ink { display: block; }
    /* 焦点跟随：真输入聚焦时当前位（=已填格数）亮起 */
    .code-slots.is-focus .code-slot.is-active {
      border-color: var(--apple-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--apple-primary) 22%, transparent);
      background: var(--apple-card);
    }
    /* 数字弹入：scale 0.4 起跳过冲到 1.12 再回落（cubic-bezier 双段模拟弹簧），
       加轻微透明度入场；一次性类，animationend 摘除可重播 */
    .code-slot-pop { animation: code-slot-pop 260ms var(--ease-out); }
    @keyframes code-slot-pop {
      0% { transform: scale(0.4); opacity: 0.2; }
      60% { transform: scale(1.12); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    /* 清空（退格到空/模式切换/提交后清码）：整组快速下沉淡出再回位，示意「已清空」 */
    .code-slots-clear .code-slot { animation: code-slot-clear 180ms var(--ease-out); }
    @keyframes code-slot-clear {
      0% { transform: scale(1); opacity: 1; }
      45% { transform: scale(0.86); opacity: 0.25; }
      100% { transform: scale(1); opacity: 1; }
    }
    /* ---- 成功确认态（对齐原版：WASH 0.3s 从中间铺开 → 数字逐格下沉 60ms+i*30ms → 对勾延迟 0.28s 升起） ---- */
    .code-slots-wash {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      place-items: center;
      border-radius: var(--cs-wash-radius);
      background: var(--apple-primary);
      color: var(--apple-primary-foreground);
      clip-path: inset(0px 50% round var(--cs-wash-radius)); /* 左右各裁一半=完全不可见 */
      pointer-events: none;
      transition: clip-path 200ms var(--ease-out); /* 收回走 WASH_OUT 200ms */
    }
    .code-slots.is-success .code-slots-wash {
      clip-path: inset(0px 0px round var(--cs-wash-radius));
      transition-duration: 300ms; /* 铺开走 WASH_IN 300ms */
    }
    .code-slots-check {
      width: 24px;
      height: 24px;
      opacity: 0;
      transform: translateY(8px) scale(0.85);
    }
    .code-slots.is-success .code-slots-check {
      opacity: 1;
      transform: translateY(0) scale(1);
      transition: transform 350ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 150ms var(--ease-out);
      transition-delay: 280ms;
    }
    /* 成功态数字下沉隐去（原版 SINK_DELAY/SINK_STEP 同口径） */
    .code-slots.is-success .code-slot-ink {
      animation: code-slot-sink 300ms var(--ease-out) both;
      animation-delay: calc(60ms + var(--i, 0) * 30ms);
    }
    @keyframes code-slot-sink {
      to { transform: translateY(0.9em); opacity: 0; }
    }
    /* ---- 错误态：整排染红，有字格从右往左逐个蒸掉（20ms 步进，原版 error drain 同口径） ---- */
    .code-slots.is-error .code-slot {
      border-color: #ff3b30;
      background: color-mix(in srgb, #ff3b30 18%, var(--apple-secondary));
    }
    .code-slots.is-error .code-slot-ink {
      animation: code-slot-evaporate 300ms var(--ease-out) both;
      animation-delay: calc((5 - var(--i, 0)) * 20ms);
    }
    @keyframes code-slot-evaporate {
      to { transform: scale(0.4); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .code-slot-pop, .code-slots-clear .code-slot,
      .code-slots.is-success .code-slot-ink, .code-slots.is-error .code-slot-ink {
        animation: none;
      }
      .code-slots-wash, .code-slots.is-success .code-slots-wash,
      .code-slots-check, .code-slots.is-success .code-slots-check { transition: none; }
      /* 动效关停时状态直达：成功数字立即让位、对勾立即出现；错误数字立即隐去 */
      .code-slots.is-success .code-slot-ink { opacity: 0; }
      .code-slots.is-success .code-slots-check { opacity: 1; transform: none; }
      .code-slots.is-error .code-slot-ink { opacity: 0; }
    }
    /* 复古四主题：格子直角（并入既有「圆角清零」语言；Win98 凹陷下面单独给） */
    html[data-accent='win98'] .code-slot, html[data-accent='portal'] .code-slot,
    html[data-accent='crt'] .code-slot, html[data-accent='oldbook'] .code-slot {
      border-radius: 0;
    }
    html[data-accent='win98'] .code-slot {
      background: #ffffff;
      border: 1px solid;
      border-color: #404040 #ffffff #ffffff #404040;
      color: #000000;
    }
    html[data-accent='win98'].dark .code-slot {
      background: #1a1a1a;
      border-color: #101010 #6a6a6a #6a6a6a #101010;
      color: #e8e8e8;
    }
    /* win98 深色档的格子背景是 (0,3,1) 特异性，错误染红要再压一层，否则暗色下看不见红 */
    html[data-accent='win98'].dark .code-slots.is-error .code-slot {
      border-color: #ff3b30;
      background: color-mix(in srgb, #ff3b30 18%, #1a1a1a);
    }
    /* 复古主题洗条圆角清零（与格子直角同口径） */
    html[data-accent='win98'] .code-slots, html[data-accent='portal'] .code-slots,
    html[data-accent='crt'] .code-slots, html[data-accent='oldbook'] .code-slots {
      --cs-wash-radius: 0px;
    }
    /* 资料卡绑定邮箱行（flex 横排）：格子容器占满剩余宽度，高度对齐原输入框 */
    .pwd-out-row .code-slots { flex: 1 1 auto; min-width: 0; height: 36px; }
    /* 手机端：格高 40→36px、间距 8→6px，390px 下 6 格不挤 */
    @media (max-width: 560px) {
      .code-slots { height: 36px; gap: 6px; }
      .code-slots .code-slot { font-size: 16px; }
    }

    /* =============================================================
       进站门屏（2026-10-14，reactbits.dev CardNav 原生复刻；仅首页 main 有 .home-gate）
       门控 = html.gate-pending（head 内联片段判定：根路径 + 无 hash；常驻名义首页——
       每次根路径整页加载都演，会话旗标 yhuoGateDone 已退场）。
       门开时：真首页内容藏到门后（main 里除 .home-gate 外全部 display:none）、
       原导航胶囊/回顶钮/外观圆钮/迷你播放条/页脚隐藏——防第一帧闪出原导航。
       收场（gate-out）：整层淡出，animationend 后 common.js 摘 gate-pending，
       外壳件与真首页内容随类摘除自然回归。pjax 换页 <main> 整体被换：换页前 __gateDisarm
       同步摘类摘门、落地首页 __gateArm 原地重演（常驻语义，见 common.js 门屏段）。
       ⚠️ .home-gate 只在首页，永不进八页外壳（坑 23 免同步）；外壳件隐藏规则全部挂在
          html.gate-pending 门控类下，摘类即还原，其他页面零波及。
       ⚠️ 门屏 fixed 层在 main 之内（坑 22/28：main 有 pjax-enter 动画构成层叠上下文，
          fixed 层 z-index 出不去——门屏 z 90 无越层需求，登录卡 400 / 开场动画 500 都在其上）。
       ============================================================= */

    /* ---------- 门控：门开时藏真首页内容与外壳件 ---------- */
    html.gate-pending main.page-main > :not(.home-gate) { display: none !important; }
    html.gate-pending .site-header,
    html.gate-pending .site-footer,
    html.gate-pending .back-top,
    html.gate-pending .appear-tab,
    html.gate-pending .mini-player,
    html.gate-pending .music-player, /* 悬浮播放器（博客款音乐球）也要藏：站长实测门屏态漏出右下角白球 */
    html.gate-pending .progress-bar { display: none !important; }

    /* ---------- 门屏态极简黑白（站长「这个状态下就始终极简黑白色主题不要背景」）：
       门开着 = 只认黑与白 + 深浅两态，不随站内主题（陶土/角色/复古全套主题）走，
       背景装饰（html 光晕/流星/自定义背景/角色泡泡立绘/复古扫描线暗角/特效天气）全部退场。
       全部规则挂在 html.gate-pending 门控下，特异性压过 data-accent 变量块与主题装饰，
       摘类（收场/换页）即整组还原——主题自身零改动、零 JS 参与。 ---------- */
    /* ① 色板：门屏态强制中性黑白（深浅两态由既有 .dark 组合选择器跟随，只换黑白色温） */
    html.gate-pending {
      --brand-400: #1b1c1e;      /* 强调色一律墨色（浅态）/浅灰白（深态，深色档再覆盖） */
      --brand-500: #1b1c1e;
      --background: #f6f6f4;     /* 浅态纸底：近白冷灰 */
      --card: #ffffff;
      --popover: #ffffff;
      --secondary: #f0f0ee;
      --muted: #f0f0ee;
      --accent: #ececea;
      --border: #e3e3e1;
      --input: #dcdcda;
      --glow-a: transparent;     /* 画布光晕清零 */
      --glow-b: transparent;
    }
    html.gate-pending.dark {
      --brand-400: #f5f5f4;
      --brand-500: #f5f5f4;
      --background: #0a0a0a;
      --card: #141414;
      --popover: #141414;
      --secondary: #1b1b1b;
      --muted: #1b1b1b;
      --accent: #1b1b1b;
      --border: #2a2a2a;
      --input: #2a2a2a;
    }
    /* ② 画布底：光晕整段撤掉，只留平色（浅/深） */
    html.gate-pending {
      background: var(--apple-background) !important;
    }
    /* ③ 背景装饰全部退场：流星层/自定义背景/雨雪 canvas/角色粒子与立绘水印/看板娘 */
    html.gate-pending .fx-meteors,
    html.gate-pending .bg-layer,
    html.gate-pending .fx-weather,
    html.gate-pending .denia-bubbles,
    html.gate-pending .denia-bubbles-fg,
    html.gate-pending .denia-sprite-wall,
    html.gate-pending .aemeath-motes,
    html.gate-pending .aemeath-motes-fg,
    html.gate-pending .aemeath-sprite-wall,
    html.gate-pending .chibi-mascot { display: none !important; }
    /* ④ 复古主题的 body 级装饰（CRT 扫描线/暗角/老书纸色）在门屏态一并隐掉 */
    html.gate-pending[data-accent='crt'] body::before,
    html.gate-pending[data-accent='crt'] body::after,
    html.gate-pending[data-accent='oldbook'] body::after { content: none !important; }
    html.gate-pending[data-accent='crt'] body { text-shadow: none !important; }
    /* ⑤ 复古主题对门屏面板的皮（win98 浮雕实底 #d4d0c8/圆角清零等）在门屏态一并回退——
       门屏「始终极简」= 形态也不随主题：毛玻璃面板 + 既有圆角语言。
       （门屏段末尾的 win98 皮肤规则特异性同档且更靠后，这里用 [data-accent] 提一档压住） */
    html.gate-pending[data-accent='win98'] .gate-panel {
      background: var(--gp-panel);
      border: 0;
      box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.5), 0 6px 16px -8px rgba(0, 0, 0, 0.35);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      backdrop-filter: blur(20px) saturate(1.6);
    }
    html.gate-pending[data-accent='win98'] .gate-panel,
    html.gate-pending[data-accent='portal'] .gate-panel,
    html.gate-pending[data-accent='crt'] .gate-panel,
    html.gate-pending[data-accent='oldbook'] .gate-panel { border-radius: var(--gp-radius); }
    html.gate-pending[data-accent='win98'] .gate-card,
    html.gate-pending[data-accent='portal'] .gate-card,
    html.gate-pending[data-accent='crt'] .gate-card,
    html.gate-pending[data-accent='oldbook'] .gate-card,
    html.gate-pending[data-accent='win98'] .gate-cta,
    html.gate-pending[data-accent='portal'] .gate-cta,
    html.gate-pending[data-accent='crt'] .gate-cta,
    html.gate-pending[data-accent='oldbook'] .gate-cta,
    html.gate-pending[data-accent='win98'] .gate-menu,
    html.gate-pending[data-accent='portal'] .gate-menu,
    html.gate-pending[data-accent='crt'] .gate-menu,
    html.gate-pending[data-accent='oldbook'] .gate-menu { border-radius: calc(var(--gp-radius) - var(--gp-inset)); }

    /* ---------- 门屏层：满屏居中，背景透出画布（光晕/流星/自定义背景全在 body/html 层） ---------- */
    .home-gate {
      position: fixed;
      inset: 0;
      z-index: 90; /* 在 main 内受 pjax-enter 层叠上下文约束（坑 28），无越层需求：登录卡 400/开场动画 500 都在其上 */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      padding: 24px;
      overflow-y: auto; /* 矮视口/卡展开超高时可滚 */
    }

    /* ---------- CardNav 面板（原版 --cn-* 常量口径，映射站内令牌浅深自动跟随） ---------- */
    .gate-panel {
      --gp-max: 800px;
      --gp-bar: 64px;
      --gp-inset: 8px;
      --gp-gap: 8px;
      --gp-radius: 18px;
      --gp-card-h: 176px;
      --gp-panel: color-mix(in srgb, var(--card) 72%, transparent);
      --gp-tile: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--card) 88%, var(--apple-background)) 100%);
      --gp-text: var(--apple-foreground);
      --gp-muted: var(--apple-muted-foreground);
      --gp-hover: color-mix(in srgb, var(--foreground) 6%, transparent);
      --gp-edge: color-mix(in srgb, var(--foreground) 8%, transparent);
      --gp-highlight: color-mix(in srgb, #ffffff 22%, transparent);
      --gp-cta: linear-gradient(180deg, color-mix(in srgb, var(--foreground) 92%, #ffffff) 0%, var(--foreground) 100%);
      --gp-cta-ink: var(--apple-background);
      position: relative;
      width: 100%;
      max-width: var(--gp-max);
      height: var(--gp-bar);
      font-size: 14px;
      line-height: 1.4;
      -webkit-tap-highlight-color: transparent;
      flex: none;
      margin-top: -6vh; /* 视觉重心略抬（原版 demo 版心偏上） */
    }

    .gate-panel {
      z-index: 10;
      border-radius: var(--gp-radius);
      overflow: hidden; /* 展开内容随面板弹簧长高逐帧揭示（原版同构） */
      background: var(--gp-panel);
      box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.5), 0 6px 16px -8px rgba(0, 0, 0, 0.35);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      backdrop-filter: blur(20px) saturate(1.6);
    }

    /* ---------- 顶栏三件套 grid：菜单 | logo | CTA ---------- */
    .gate-bar {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      height: var(--gp-bar);
      padding: 0 var(--gp-inset);
    }

    .gate-menu {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      justify-self: start;
      height: calc(var(--gp-bar) - var(--gp-inset) * 2);
      padding: 0 16px;
      border: 0;
      border-radius: calc(var(--gp-radius) - var(--gp-inset));
      background: none;
      color: var(--gp-text);
      font-family: inherit;
      font-size: inherit;
      font-weight: 500;
      cursor: pointer;
      outline: none;
      transition: background-color 0.2s ease;
    }
    .gate-menu:hover { background: var(--gp-hover); }
    .gate-menu:focus-visible, .gate-logo:focus-visible, .gate-cta:focus-visible, .gate-link:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--foreground) 55%, transparent);
      outline-offset: 2px;
    }

    .gate-burger { position: relative; width: 18px; height: 12px; }
    .gate-line {
      position: absolute;
      left: 0;
      width: 100%;
      height: 1.5px;
      border-radius: 2px;
      background: currentColor;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), top 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .gate-line--top { top: 2.25px; }
    .gate-line--bottom { top: 8.25px; }
    .gate-panel.open .gate-line--top { top: 5.25px; transform: rotate(45deg); }
    .gate-panel.open .gate-line--bottom { top: 5.25px; transform: rotate(-45deg); }

    .gate-menu-label { position: relative; display: inline-grid; overflow: hidden; }
    .gate-word { grid-area: 1 / 1; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
    .gate-word--close { transform: translateY(110%); }
    .gate-panel.open .gate-word--open { transform: translateY(-110%); }
    .gate-panel.open .gate-word--close { transform: translateY(0); }

    .gate-logo {
      display: inline-flex;
      align-items: center;
      justify-self: center;
      height: 24px;
      color: var(--gp-text);
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 0.01em;
      text-decoration: none;
      outline: none;
    }

    .gate-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      justify-self: end;
      height: calc(var(--gp-bar) - var(--gp-inset) * 2);
      padding: 0 18px;
      border: 0;
      border-radius: calc(var(--gp-radius) - var(--gp-inset));
      background: var(--gp-cta);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(0, 0, 0, 0.45);
      color: var(--gp-cta-ink);
      font-family: inherit;
      font-size: inherit;
      font-weight: 600;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      outline: none;
      transition: filter 0.2s ease;
    }
    .gate-cta:hover { filter: brightness(1.25); }

    /* ---------- 展开内容区（visibility 由 shown 门控防 tab 落进收起态） ---------- */
    .gate-content {
      position: absolute;
      top: var(--gp-bar);
      right: 0;
      left: 0;
      visibility: hidden;
      display: flex;
      flex-direction: column;
      gap: var(--gp-gap);
      padding: 0 var(--gp-inset) var(--gp-inset);
      perspective: 900px;
    }
    .gate-panel.shown .gate-content { visibility: visible; }

    .gate-cards { display: flex; gap: var(--gp-gap); }

    .gate-card {
      position: relative;
      display: flex;
      flex: 1 1 0;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
      min-height: var(--gp-card-h);
      padding: 16px 16px 14px;
      border-radius: calc(var(--gp-radius) - var(--gp-inset));
      background: var(--gp-tile);
      box-shadow:
        inset 0 0 0 1px var(--gp-edge),
        inset 0 1px 0 var(--gp-highlight),
        0 4px 10px -4px rgba(0, 0, 0, 0.25);
      color: var(--gp-text);
      transform-origin: 50% 0;
      will-change: transform, opacity;
    }

    .gate-card-head { display: flex; flex-direction: column; gap: 4px; }
    .gate-card-label { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
    .gate-card-desc { margin: 0; color: var(--gp-muted); font-size: 13px; line-height: 1.45; }

    .gate-links { display: flex; flex-direction: column; gap: 2px; margin: auto 0 0; padding: 0; list-style: none; }
    .gate-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 3px 0;
      border-radius: 6px;
      color: inherit;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      opacity: 0.82;
      transition: opacity 0.2s ease;
    }
    .gate-link:hover { opacity: 1; }

    /* 箭头斜飞换位（原版 45° 双图标对飞） */
    .gate-arrow {
      position: relative;
      display: inline-block;
      flex: none;
      width: 14px;
      height: 14px;
      overflow: hidden;
    }
    .gate-arrow svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
    .gate-arrow .ga-in { transform: translate(-110%, 110%); }
    .gate-link:hover .gate-arrow .ga-out, .gate-link:focus-visible .gate-arrow .ga-out { transform: translate(110%, -110%); }
    .gate-link:hover .gate-arrow .ga-in, .gate-link:focus-visible .gate-arrow .ga-in { transform: translate(0, 0); }

    /* ---------- 面板内高光描边（.gate-rim，只描 bar 段；展开段卡片自带描边） ---------- */
    .gate-rim {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px var(--gp-edge), inset 0 1px 0 var(--gp-highlight);
      pointer-events: none;
    }

    /* ---------- 深色切换小圆钮（复用外观圆钮形态语言）+ 提示行 ---------- */
    .gate-theme {
      position: fixed;
      right: 16px;
      bottom: 16px;
      width: 40px;
      height: 40px;
      border: 1px solid var(--gp-edge);
      border-radius: 50%;
      background: var(--gp-panel);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      backdrop-filter: blur(20px) saturate(1.6);
      color: var(--apple-foreground);
      display: grid;
      place-items: center;
      cursor: pointer;
      outline: none;
      transition: transform 0.2s var(--ease-out);
      z-index: 91;
    }
    .gate-theme:hover { transform: scale(1.06); }
    .gate-theme:focus-visible { outline: 2px solid color-mix(in srgb, var(--foreground) 55%, transparent); outline-offset: 2px; }
    .gate-theme .gt-moon, .gate-theme .gt-sun { display: grid; place-items: center; }
    .gate-theme .gt-sun { display: none; }
    html.dark .gate-theme .gt-moon { display: none; }
    html.dark .gate-theme .gt-sun { display: grid; }

    /* ---------- 收场（gate-out）：整层淡出，animationend 后 common.js 摘 gate-pending ---------- */
    html.gate-pending.gate-out .home-gate,
    html.gate-pending.gate-out .gate-theme {
      animation: gateFadeOut 420ms var(--ease-out) forwards;
      pointer-events: none;
    }
    @keyframes gateFadeOut { from { opacity: 1; } to { opacity: 0; } }

    /* ---------- 窄屏（≤560px）：卡片竖排、顶栏 CTA 居中常显 ---------- */
    @media (max-width: 560px) {
      .gate-panel { --gp-card-h: 0px; margin-top: 0; }
      /* 1fr auto 1fr：两侧等宽轨道，中列天然精确居中（auto 1fr auto 会因两侧件宽不等偏 12px）；
         不用绝对定位+translate——入场 WAAPI（.gate-bar > * 错峰淡入）延迟段强制 transform 会盖掉它 */
      .gate-bar { grid-template-columns: 1fr auto 1fr; }
      .gate-logo { grid-column: 1; grid-row: 1; justify-self: start; padding-left: 14px; }
      .gate-menu { grid-column: 3; grid-row: 1; justify-self: end; }
      .gate-cta { grid-column: 2; grid-row: 1; justify-self: center; } /* 通栏 CTA 已撤（站长「移除」），顶栏 CTA 居中接管（手机上保进站入口） */
      .gate-cards { flex-direction: column; }
      .gate-card { flex: none; min-height: 0; gap: 10px; padding: 14px 14px 12px; }
      .gate-links { flex-direction: row; flex-wrap: wrap; gap: 2px 16px; }
    }

    /* ---------- reduced-motion：收场瞬完成（演出/弹簧 JS 侧同步直达） ---------- */
    @media (prefers-reduced-motion: reduce) {
      html.gate-pending.gate-out .home-gate, html.gate-pending.gate-out .gate-theme { animation-duration: 1ms; }
      .gate-word, .gate-line, .gate-arrow svg { transition: none; }
    }

    /* ---------- 复古主题：面板圆角清零对齐既有语言（Win98 另给浮雕实底） ---------- */
    html[data-accent='win98'] .gate-panel, html[data-accent='portal'] .gate-panel,
    html[data-accent='crt'] .gate-panel, html[data-accent='oldbook'] .gate-panel,
    html[data-accent='win98'] .gate-card, html[data-accent='portal'] .gate-card,
    html[data-accent='crt'] .gate-card, html[data-accent='oldbook'] .gate-card,
    html[data-accent='win98'] .gate-cta,
    html[data-accent='win98'] .gate-menu { border-radius: 0; }
    html[data-accent='win98'] .gate-panel {
      background: #d4d0c8;
      border: 1px solid;
      border-color: #ffffff #404040 #404040 #ffffff;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }