/* 字体：优先系统字体（零延迟、国内可用）。
       不再用 @import 引 Google Fonts —— 它在国内被墙，会阻塞样式解析、
       拖慢首屏。若确实需要 Noto Sans SC，可自行在服务器本地托管字体文件。 */
    body {
      font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei',
                   system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      scroll-behavior: smooth;
    }

    /* ============================================================
       动效令牌（iOS 26 风格）
       ------------------------------------------------------------
       iOS 的「丝滑」不是靠动画更长，而是靠三点：
       1) 弹簧曲线：带轻微过冲的缓动（而非线性 ease），起步快、收尾带一点回弹；
       2) 只动 transform / opacity —— 这两个属性走 GPU 合成层，不触发布局重排；
       3) 分层错峰：一组元素依次入场（stagger），而不是同时弹出来。
       下面把曲线统一成变量，全站复用，任何地方改一处即可整体调整手感。
       ============================================================ */
    :root {
      /* 标准弹簧：用于大多数交互（悬浮、切页）。收尾有极轻微过冲，观感"活" */
      --ease-spring: cubic-bezier(.22, 1, .36, 1);
      /* 强调弹簧：用于弹窗、激活态等需要"弹一下"的场景，过冲更明显 */
      --ease-spring-bouncy: cubic-bezier(.34, 1.56, .64, 1);
      /* 柔和进出：用于颜色/透明度这类不该弹的属性 */
      --ease-soft: cubic-bezier(.4, 0, .2, 1);
      /* 时长梯度：交互反馈短、入场中等、大容器略长 */
      --dur-fast: .18s;
      --dur-base: .34s;
      --dur-slow: .56s;

      /* ---- iOS 圆角梯度 ----
         iOS 的圆角比常见网页更大、更饱满（卡片 26~28pt，小控件 16~20pt），
         且是"连续圆角(squircle)"，转角过渡更平滑、没有生硬的直角感。
         这里统一放大一档，全站复用，改一处即可整体调节。 */
      --r-xs: 10px;    /* 极小：徽章、标签 */
      --r-sm: 14px;    /* 小：输入框内的小块 */
      --r-md: 20px;    /* 中：输入框、按钮、菜单项 */
      --r-lg: 26px;    /* 大：卡片、面板 —— iOS 卡片标准圆角 */
      --r-xl: 32px;    /* 特大：大容器、弹窗面板 */
      --r-2xl: 40px;   /* 超大：整块区域 */
    }

    /* Custom Scrollbar —— 彻底隐藏滚动条（滚动功能不受影响）。
       原因：滚动条属于 UA 层，永远绘制在页面之上，会盖住壁纸形成一条竖带；
       浅色主题下轨道/滑块更是像屏幕右侧多了一条「白边」。
       这里整个隐藏，让壁纸真正铺满到屏幕边缘。 */
    ::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: transparent; }
    ::-webkit-scrollbar-corner { background: transparent; }
    html { scrollbar-width: none; -ms-overflow-style: none; }

    /* Glassmorphism Styles —— 底色由主色变量驱动，自动跟随背景图主色 */
    /* ===== 顶部导航：悬浮「胶囊」磨砂条（对齐参考图）=====
       特征：脱离屏幕边缘悬浮（左右/顶部留白）、整条一个大圆角、
       内部强磨砂透出背景、边缘有亮折射描边 + 厚度暗边（iOS 液态玻璃感）。
       注意：header 本身不再铺满全宽，而是「外框透明 + 内层胶囊」，这样
       左右两侧能露出壁纸，形成悬浮感。 */
    .site-header {
      position: fixed;
      top: .875rem;                     /* 顶部留白，脱离边缘（悬浮感） */
      left: 0; right: 0;
      z-index: 50;
      /* 左右留白对称：fixed 元素参照视口（含滚动条），而页面内容区不含滚动条。
         right:0 在含滚动条的视口坐标系里会向右多出 --sbw，故把 right 设为滚动条宽，
         让 header 的可用宽度与内容区一致，胶囊才能和内容严格左右对齐。 */
      right: var(--sbw, 0px);
      padding: 0 1rem;
      background: none;
      border: none;
      pointer-events: none;             /* 外层不吃点击，交给内层胶囊 */
    }
    /* 内层胶囊：真正的磨砂玻璃条。
       用 width:100% + box-sizing 保证左右留白严格对称（不受滚动条影响）。
       ⚠️ 必须排除 #mobile-menu：它是 header 的兄弟级子元素、同样带 max-w-7xl 类，
       若不排除会继承 9999px 超大圆角，把菜单内容裁成弧形（之前"菜单 bug"的根因）。 */
    .site-header > .max-w-7xl:not(#mobile-menu) {
      pointer-events: auto;
      width: 100%;
      max-width: 80rem;
      box-sizing: border-box;
      margin: 0 auto;
      border-radius: 9999px;            /* 全圆角胶囊 */
      /* ===== 更「玻璃」：极低底色 + 强模糊 + 高饱和 + 亮折射边 + 厚度暗边 =====
         底色从 0.26 降到 0.10，壁纸能明显透出来（真透明而非灰块）；
         模糊提到 30px 让透过来的画面化成柔光，同时 saturate 提饱和避免发灰。 */
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgb(var(--accent-950) / 0.10);
      backdrop-filter: blur(30px) saturate(190%) brightness(1.10);
      -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.10);
      box-shadow: 0 12px 40px -14px rgba(0, 0, 0, .50),
                  inset 0 1px 1px rgba(255, 255, 255, .28),   /* 顶部亮折射 */
                  inset 0 -1px 1px rgba(255, 255, 255, .08),  /* 底部微反光 */
                  inset 0 0 0 .5px rgba(255, 255, 255, .10);  /* 玻璃厚度 */
      transition: background-color .3s ease, border-color .3s ease,
                  box-shadow .3s ease, backdrop-filter .3s ease;
    }
    /* 浅色：更透的白玻璃（白纱仅 0.16，壁纸透出约 84%），靠强模糊 + 高亮折射边撑起质感 */
    body.bg-is-light .site-header > .max-w-7xl:not(#mobile-menu),
    body.theme-light .site-header > .max-w-7xl:not(#mobile-menu),
    .light .site-header > .max-w-7xl:not(#mobile-menu) {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.62);
      backdrop-filter: blur(30px) saturate(200%) brightness(1.22);
      -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.22);
      box-shadow: 0 14px 42px -16px rgba(10, 30, 25, .32),
                  inset 0 1px 1.5px rgba(255, 255, 255, .95),
                  inset 0 -1px 1px rgba(15, 30, 25, .08),
                  inset 0 0 0 .5px rgba(255, 255, 255, .35);
    }
    /* 移动端抽屉菜单：独立磨砂面板（与胶囊同宽、同左右留白，但圆角适中）。
       必须显式声明，避免被上方胶囊样式（max-w-7xl 命中）污染成超大圆角。 */
    #mobile-menu {
      pointer-events: auto;
      border-radius: 1.25rem !important;   /* 20px：常规面板圆角，不裁内容 */
      margin-top: .5rem;
      padding: .5rem !important;
      background: rgb(var(--accent-950) / 0.30);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(24px) saturate(170%) brightness(1.08);
      -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.08);
      box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .55),
                  inset 0 1px 1px rgba(255, 255, 255, .18);
    }
    body.bg-is-light #mobile-menu,
    body.theme-light #mobile-menu {
      background: rgba(255, 255, 255, 0.22);
      border-color: rgba(255, 255, 255, 0.60);
      backdrop-filter: blur(26px) saturate(190%) brightness(1.18);
      -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.18);
    }

    /* 注：旧类名 .glass-nav 已废弃（HTML 中无引用），导航完全由 .site-header 体系控制。 */

    /* 卡片/模块：同样改为透明毛玻璃，靠模糊与描边保证可读性，背景图完整透出 */
    .glass-card {
      background: rgb(var(--accent-950) / 0.22);
      backdrop-filter: blur(18px) saturate(125%);
      -webkit-backdrop-filter: blur(18px) saturate(125%);
      border: 1px solid rgb(var(--accent-300) / 0.18);
      box-shadow: 0 8px 32px -14px rgb(0 0 0 / 0.40);
    }

    /* 浅色卡片：透明磨砂——白纱 + 高模糊 + 内高光描边，壁纸透出约 60%，
       既要贴合壁纸、也要让深色文字在花背景上读得清（故 0.40 是透明度/可读性折中） */
    .light .glass-card {
      background: rgba(255, 255, 255, 0.30);
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 12px 34px -14px rgba(10, 30, 25, 0.32),
                  inset 0 1px 1px rgba(255, 255, 255, 0.75),
                  inset 0 -1px 1px rgba(15, 30, 25, 0.12);
    }

    .glass-pill {
      background: rgb(var(--accent-950) / 0.26);
      backdrop-filter: blur(16px) saturate(120%);
      -webkit-backdrop-filter: blur(16px) saturate(120%);
      border: 1px solid rgb(var(--accent-300) / 0.20);
    }

    /* ---- 全站配色统一：把散落的"纯黑/纯白"硬编码底色收敛到主色系 ----
       背景图没有遮罩了，这些半透明块若不跟随主色，会和背景色调打架。 */
    /* 输入/内容块：比卡片略实一点，保证输入时光标与文字清晰，但仍保持通透 */
    .bg-black\/30, .bg-black\/40 { background-color: rgba(0,0,0,0.42) !important; }
    /* 弹窗遮罩需要压暗聚焦，保留较高不透明度 */
    .bg-black\/70, .bg-black\/80 { background-color: rgba(0,0,0,0.72) !important; }
    /* 页脚：彻底「无效果」——没有背景、没有毛玻璃、没有边框、没有阴影，
       只剩纯文字信息直接压在壁纸上。
       用 body 前缀 + footer.bg-black\/40 提高特异性，压过：
         · .bg-black\/40 的半透明黑底 (深色模式黑块)
         · body.theme-light .bg-black\/40 → 白 0.42 (浅色模式白块)
       并显式清掉 backdrop-filter / border，避免被其它规则重新加上。 */
    footer, footer.bg-black\/40,
    body footer, body footer.bg-black\/40,
    body.bg-is-light footer, body.theme-light footer {
      background: none !important;
      background-color: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: none !important;
      border-top: none !important;
      box-shadow: none !important;
      outline: none !important;
      text-shadow: none !important;
    }
    /* 页脚文字统一纯白 → 规则放在样式表最末尾（见文件中 footer 纯白段落），以确保源顺序压过浅色文字规则。
       附带：纯白文字遇到明亮壁纸（例如浅色主题的白色背景）会完全不可读。
       因此给页脚加一层"几乎看不出来"的自适应暗底渐隐：只在下边缘把壁纸轻微压暗，
       不构成任何可见卡片/边框/毛玻璃，仍然保持"无效果"的观感，但保证文字始终有对比度。 */
    body footer {
      position: relative;
      /* 不能用 negative z-index 的伪元素：页脚本身是透明层，
         负 z-index 会把它推到壁纸(z-0 固定层)之下，反而露出白底。 */
      background-image: linear-gradient(
        to bottom,
        rgba(10, 12, 20, 0) 0%,
        rgba(10, 12, 20, 0.18) 50%,
        rgba(10, 12, 20, 0.34) 100%
      ) !important;
      background-color: transparent !important;
      background-repeat: no-repeat !important;
    }
    body.bg-is-light footer,
    body.theme-light footer {
      background-image: linear-gradient(
        to bottom,
        rgba(10, 12, 20, 0) 0%,
        rgba(10, 12, 20, 0.34) 50%,
        rgba(10, 12, 20, 0.50) 100%
      ) !important;
    }
    .bg-slate-900\/80, .bg-slate-950\/95 { background-color: rgb(var(--accent-950) / 0.92) !important; }
    /* 边框统一带主色 */
    .border-white\/5  { border-color: rgb(var(--accent-300) / 0.07) !important; }
    .border-white\/10 { border-color: rgb(var(--accent-300) / 0.14) !important; }
    .border-white\/15 { border-color: rgb(var(--accent-300) / 0.20) !important; }
    .border-white\/20 { border-color: rgb(var(--accent-300) / 0.26) !important; }

    /* Typewriter Cursor */
    .typing-cursor::after {
      content: '|';
      animation: blink 1s infinite;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    /* Hero Canvas */
    #hero-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    /* SVG Wave Animation */
    .wave-path {
      animation: waveMove 10s ease-in-out infinite alternate;
    }
    @keyframes waveMove {
      0% { d: path("M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,90.7C672,85,768,107,864,122.7C960,139,1056,149,1152,138.7C1248,128,1344,96,1392,80L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"); }
      100% { d: path("M0,96L48,106.7C96,117,192,139,288,138.7C384,139,480,117,576,101.3C672,85,768,75,864,90.7C960,107,1056,149,1152,144C1248,139,1344,85,1392,58.7L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"); }
    }

    /* Tab 切换淡入动画（轻量优化，不改原结构） */
    @keyframes tabIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .tab-anim-in { animation: tabIn 0.38s cubic-bezier(.22,.61,.36,1); }
    /* Hero 内容入场（仅加载时一次） */
    @keyframes heroRise {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #hero-section .my-auto { animation: heroRise 0.9s ease both; }
    /* 主标题在花哨背景上需要一点投影才立得住（但不加底，保持通透） */
    #hero-title, .hero-title {
      text-shadow: 0 2px 18px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .28);
    }

    /* ---------- 一言（极简版式）----------
       参考图的做法没有任何容器：不描边、不加底、不加毛玻璃，
       靠字重与字距撑起气质，靠投影保证在任何壁纸上都能读。
       投影用两层柔光即可：贴字形的细描边层会让字发"硬"，
       去掉后观感更清透，同时保留足够暗度压住明亮壁纸。 */
    .quote-line {
      font-size: 1.0625rem;                 /* 17px 基准 */
      line-height: 1.75;
      font-weight: 500;                     /* 比正文略重，远看更挺 */
      letter-spacing: 0.06em;               /* 汉字间留气，接近参考图 */
      color: #fff;
      text-align: center;
      text-wrap: balance;                   /* 换行处两侧长度均衡，避免孤字 */
      /* 两层柔光：外层大范围压底、内层收拢边缘，不做贴边描边 */
      text-shadow: 0 2px 14px rgba(0, 0, 0, .55),
                   0 1px 4px  rgba(0, 0, 0, .40);
      transition: opacity var(--dur-base) var(--ease-soft);
    }
    .quote-meta {
      margin-top: 0.875rem;
      margin-right: 0.25rem;                /* 视觉补偿「」右括号的字面留白 */
      text-align: center;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.10em;
      color: #fff;                          /* 与诗句同色，纯白 */
      text-shadow: 0 1px 10px rgba(0, 0, 0, .55),
                   0 1px 3px  rgba(0, 0, 0, .38);
      transition: opacity var(--dur-base) var(--ease-soft);
    }
    .quote-dot {
      display: inline-block;
      margin: 0 0.45em;
      color: #fff;
      opacity: .85;
    }
    /* 换句时的淡入淡出（只动 opacity，不触 layout） */
    #quote-block.quote-swap .quote-line,
    #quote-block.quote-swap .quote-meta { opacity: 0; }

    /* 浅色主题下白字会糊在浅壁纸上，切深色 */
    body.bg-is-light .quote-line,
    body.theme-light .quote-line {
      color: #0a0f1a;
      text-shadow: 0 1px 10px rgba(255, 255, 255, .85),
                   0 0 2px    rgba(255, 255, 255, .70);
    }
    body.bg-is-light .quote-meta,
    body.theme-light .quote-meta {
      color: #0a0f1a;
      text-shadow: 0 1px 8px rgba(255, 255, 255, .80);
    }
    body.bg-is-light .quote-dot,
    body.theme-light .quote-dot { color: #0a0f1a; }

    @media (max-width: 640px) {
      .quote-line { font-size: 1rem; letter-spacing: 0.04em; line-height: 1.7; }
      .quote-meta { font-size: 0.6875rem; letter-spacing: 0.08em; }
      #quote-block { margin-top: 1.25rem; padding-left: 1rem; padding-right: 1rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .quote-line, .quote-meta { transition: none; }
    }

    /* ============================================================
       iOS 26 风格交互动效层
       ------------------------------------------------------------
       统一原则：所有动效只作用于 transform / opacity / filter，
       绝不碰 width/height/top/left 等会触发 layout 的属性。
       ============================================================ */

    /* --- A. 卡片入场：从下方浮起 + 轻微放大（带弹性） --- */
    @keyframes iosCardIn {
      from { opacity: 0; transform: translateY(16px) scale(.985); }
      to   { opacity: 1; transform: translateY(0)    scale(1); }
    }
    /* 逐个错峰用：配合 JS 设置 animation-delay */
    .ios-in {
      animation: iosCardIn var(--dur-slow) var(--ease-spring) both;
      will-change: transform, opacity;
    }

    /* --- B. 卡片悬浮：轻抬升 + 阴影加深（比原来的 translateY 更细腻） --- */
    .glass-card {
      transition: transform var(--dur-base) var(--ease-spring),
                  box-shadow var(--dur-base) var(--ease-spring),
                  border-color var(--dur-base) var(--ease-soft),
                  background-color var(--dur-base) var(--ease-soft);
    }
    @media (hover: hover) and (min-width: 641px) {
      .glass-card:hover {
        transform: translateY(-4px) scale(1.008);
      }
      /* 按下时微微"压下去"，给手指反馈 */
      .glass-card:active {
        transform: translateY(-1px) scale(.996);
        transition-duration: var(--dur-fast);
      }
    }

    /* --- C. 按钮：按压回弹 + 悬浮微放大（覆盖全站 button/a 交互元素） --- */
    .nav-btn,
    .btn-ios,
    button:not(.no-ios),
    a.btn-ios {
      transition: transform var(--dur-fast) var(--ease-spring-bouncy),
                  background-color var(--dur-fast) var(--ease-soft),
                  color var(--dur-fast) var(--ease-soft),
                  border-color var(--dur-fast) var(--ease-soft),
                  box-shadow var(--dur-base) var(--ease-soft);
      -webkit-tap-highlight-color: transparent;
    }
    .nav-btn:hover,
    .btn-ios:hover { transform: translateY(-1px); }
    .nav-btn:active,
    .btn-ios:active { transform: scale(.94); transition-duration: .08s; }

    /* --- D. 弹窗：遮罩淡入 + 面板弹性放大（iOS 的 sheet 观感） --- */
    @keyframes iosBackdropIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes iosSheetIn {
      from { opacity: 0; transform: translateY(14px) scale(.94); }
      to   { opacity: 1; transform: translateY(0)    scale(1); }
    }
    @keyframes iosSheetOut {
      from { opacity: 1; transform: translateY(0)   scale(1); }
      to   { opacity: 0; transform: translateY(8px) scale(.97); }
    }
    /* 打开态：JS 给弹窗根节点加 .ios-open */
    .ios-modal.ios-open { animation: iosBackdropIn var(--dur-base) var(--ease-soft) both; }
    /* 用 !important 压过面板上可能存在的 Tailwind 循环动画（如 animate-float），
       否则两者都写 animation 属性，入场动画会被无限循环动画顶掉。 */
    .ios-modal.ios-open .ios-sheet {
      animation: iosSheetIn var(--dur-slow) var(--ease-spring-bouncy) both !important;
    }
    .ios-modal.ios-closing { animation: iosBackdropIn var(--dur-fast) var(--ease-soft) reverse both; }
    .ios-modal.ios-closing .ios-sheet {
      animation: iosSheetOut var(--dur-fast) var(--ease-soft) both;
    }

    /* --- E. 提示条（Toast）：从右侧滑入 + 弹性 --- */
    @keyframes iosToastIn {
      from { opacity: 0; transform: translateX(20px) scale(.96); }
      to   { opacity: 1; transform: translateX(0)    scale(1); }
    }
    @keyframes iosToastOut {
      from { opacity: 1; transform: translateX(0)    scale(1); }
      to   { opacity: 0; transform: translateX(16px) scale(.96); }
    }

    /* --- F. 滚动进场：元素进入视口时浮起（由 IntersectionObserver 加类） --- */
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s var(--ease-soft),
                  transform .7s var(--ease-spring);
      will-change: opacity, transform;
    }
    .reveal.reveal-in {
      opacity: 1;
      transform: translateY(0);
    }

    /* --- G. 主题切换：整页色彩柔和过渡（不能太慢，否则像卡顿） --- */
    html.ios-theme-anim,
    html.ios-theme-anim body,
    html.ios-theme-anim .glass-card,
    html.ios-theme-anim .glass-pill {
      transition: background-color .38s var(--ease-soft),
                  color .38s var(--ease-soft),
                  border-color .38s var(--ease-soft) !important;
    }

    /* 亮背景时 Hero 文字不再强行翻深色：大面积背景之上保留白字更干净，
       仅给深色描边/阴影保证可读性 */

    /* ---- Hero 文字局部可读性：不靠整屏压暗，用小范围柔和暗底 + 轻微阴影 ----
       背景图主体保持原色，只在文字背后垫一层看不见边界的暗晕。 */
    .hero-readable {
      display: inline-block;
      padding: .3rem 1rem;
      border-radius: 9999px;
      /* 柔和玻璃底：范围小、边界虚化，既托住文字又不遮挡背景主体 */
      background: radial-gradient(ellipse at center, rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,0) 100%);
      text-shadow: 0 1px 6px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .55);
      -webkit-backdrop-filter: blur(2px);
              backdrop-filter: blur(2px);
    }
    body.bg-is-light, body.theme-light .hero-readable {
      color: #14231f !important;
      background: radial-gradient(ellipse at center, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 55%, rgba(255,255,255,0) 100%);
      text-shadow: none;
    }

    /* 内容区稳定底色：从顶部透明渐入到主色深底，既保住背景可见性，又让正文清晰 */
    /* 内容区不再叠任何整层底色：背景图完整可见，可读性由卡片自身承担 */
    #content-shell { background: transparent; }

    /* 底部波浪：跟随主色 + 半透明渐隐，与背景图自然衔接 */
    .hero-wave {
      color: rgb(var(--accent-950) / 0.86);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, #000 85%);
              mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, #000 85%);
    }
    body.bg-is-light, body.theme-light .hero-wave { color: rgb(var(--accent-900) / 0.30); }

    /* ---- 自适应背景：按背景明暗自动切换整套配色，任何背景都保证可读 ---- */
    :root {
      /* 主色阶。服务端已从背景图提取并内联（accent-ssr），这里再输出一遍动态值，
         确保 <style> 顺序造成的覆盖也不会把颜色打回默认绿。 */
<?php
// 与 accent-ssr 同源同缓存（0ms），拿不到时回落到 emerald 绿
$__accSteps = [];
try {
    $__acc = accent_get($__bg, __DIR__);
    if (!empty($__acc['steps'])) $__accSteps = $__acc['steps'];
} catch (Throwable $e) {}
$__DEF = ['50'=>'236 253 245','100'=>'209 250 229','200'=>'167 243 208','300'=>'110 231 183',
          '400'=>'52 211 153','500'=>'16 185 129','600'=>'5 150 105','700'=>'4 120 87',
          '800'=>'6 95 70','850'=>'12 56 48','900'=>'6 78 59','950'=>'2 44 34'];
foreach ($__DEF as $__k => $__v) {
    $__val = $__accSteps[$__k] ?? $__v;
    echo '      --accent-' . $__k . ': ' . $__val . ";\n";
}
?>
    }
    /* 背景层：只放背景图 + 雨滴画布，不再有任何整屏遮罩。
       默认渐变也走主色变量，避免背景图尚未加载时先闪一下绿色。
       关键：必须显式锁成视口高。否则 fixed + inset-0 在此会被算成"整篇文档高"，
       背景图按竖长盒子 cover → 宽图被纵向裁切放大（浅色无遮罩时尤其明显 = "比例不对"）。 */
    #site-bg {
      background: linear-gradient(135deg, #0a0a0a 0%, #050505 55%, #0a0a0a 100%);
      height: 100vh;
      height: 100dvh;
    }
    body.has-custom-bg #site-bg { background: transparent; }
    /* 浅色模式：白纱底色，背景随主题切换 */
    .light #site-bg {
      background: linear-gradient(135deg, #ffffff 0%, #f1f5f4 55%, #ffffff 100%);
    }

    /* ===== 亮背景：改用白纱 + 深色文字（不再把背景压黑） ===== */
    body.bg-is-light, body.theme-light { --tone-strong: #16201d; --tone-normal: #2a3a35; --tone-muted: #4a5b56; }
    /* 浅色模式 → 透明磨砂（之前是实心白霜 0.86，把背景盖死、看着像白板）。
       现在白纱 0.40 + 高模糊，壁纸透出约 60%，"透明磨砂 + 贴合壁纸"观感回来了。 */
    body.bg-is-light, body.theme-light .glass-card {
      background: rgba(255, 255, 255, 0.30) !important;
      border-color: rgba(255, 255, 255, 0.55) !important;
      box-shadow: 0 14px 38px -16px rgba(10, 30, 25, 0.34),
                  inset 0 1px 1px rgba(255, 255, 255, 0.80),
                  inset 0 -1px 1px rgba(15, 30, 25, 0.14) !important;
    }
    body.bg-is-light, body.theme-light .glass-pill {
      background: rgba(255, 255, 255, 0.26) !important;
      border-color: rgba(255, 255, 255, 0.52) !important;
    }
    /* （.glass-nav 相关规则已移除：导航改由 .site-header 控制） */
    /* ⚠️ 关键修正：body 绝不能带 backdrop-filter。
       上面大量「body.bg-is-light, body.theme-light .xxx」选择器里，第一部分是**裸的
       body.bg-is-light**，会意外命中 body 本身，把玻璃属性（backdrop-filter / 白底）
       加到 body 上。而带 backdrop-filter 的元素会成为 fixed 子元素的包含块 →
       背景层 #site-bg 不再固定于视口、只盖住首屏，下方露出白色画布，
       观感就是「模块是实心白、不贴合壁纸」。
       这里显式清除 body 的玻璃属性，让壁纸真正 fixed 铺满整页、所有模块透出壁纸。 */
    body.bg-is-light, body.theme-light {
      -webkit-backdrop-filter: none !important;
              backdrop-filter: none !important;
    }
    body.bg-is-light, body.theme-light .text-slate-100,
    body.bg-is-light, body.theme-light .text-slate-200 { color: #16201d !important; }
    /* Hero 大标题保持白色（大面积背景图之上白字更清爽），靠阴影保证可读 */
    body.bg-is-light, body.theme-light #hero-section .text-white,
    body.bg-is-light, body.theme-light .hero-title { color: #ffffff !important; }
    body.bg-is-light, body.theme-light .text-slate-300,
    body.bg-is-light, body.theme-light .text-slate-400 { color: #2a3a35 !important; }
    /* 亮背景：主色强调文字（副标题/页脚站点名等）改用主色最深的 800 阶，
       跟随背景提取的主色，同时保证在浅底上有足够对比 */
    body.bg-is-light, body.theme-light .text-emerald-200,
    body.bg-is-light, body.theme-light .text-emerald-300,
    body.bg-is-light, body.theme-light .text-emerald-300\/80,
    body.bg-is-light, body.theme-light .text-emerald-400 { color: rgb(var(--accent-800)) !important; }
    /* ---- 浅色模式：其余彩色浅字（-200/-300/-400）统一转深 ----
       与上面 emerald 同理。浅色下这些标签/徽章/统计数字原本是 -200~-400 的浅彩，
       压在浅色卡片上对比度只有 1.4~1.8（几乎看不清，尤其页面最底部「热门分类标签」）。
       这里按色相映射到对应的 -700 深色，保证深色底纹上清晰可读。 */
    body.bg-is-light, body.theme-light .text-cyan-200,
    body.bg-is-light, body.theme-light .text-cyan-300,
    body.bg-is-light, body.theme-light .text-cyan-400 { color: #0e7490 !important; }
    body.bg-is-light, body.theme-light .text-sky-200,
    body.bg-is-light, body.theme-light .text-sky-300,
    body.bg-is-light, body.theme-light .text-sky-400 { color: #0369a1 !important; }
    body.bg-is-light, body.theme-light .text-blue-200,
    body.bg-is-light, body.theme-light .text-blue-300,
    body.bg-is-light, body.theme-light .text-blue-400 { color: #1d4ed8 !important; }
    body.bg-is-light, body.theme-light .text-indigo-200,
    body.bg-is-light, body.theme-light .text-indigo-300,
    body.bg-is-light, body.theme-light .text-indigo-400 { color: #4338ca !important; }
    body.bg-is-light, body.theme-light .text-violet-200,
    body.bg-is-light, body.theme-light .text-violet-300,
    body.bg-is-light, body.theme-light .text-violet-400 { color: #6d28d9 !important; }
    body.bg-is-light, body.theme-light .text-purple-200,
    body.bg-is-light, body.theme-light .text-purple-300,
    body.bg-is-light, body.theme-light .text-purple-400 { color: #7e22ce !important; }
    body.bg-is-light, body.theme-light .text-fuchsia-200,
    body.bg-is-light, body.theme-light .text-fuchsia-300,
    body.bg-is-light, body.theme-light .text-fuchsia-400 { color: #a21caf !important; }
    body.bg-is-light, body.theme-light .text-pink-200,
    body.bg-is-light, body.theme-light .text-pink-300,
    body.bg-is-light, body.theme-light .text-pink-400 { color: #be185d !important; }
    body.bg-is-light, body.theme-light .text-rose-200,
    body.bg-is-light, body.theme-light .text-rose-300,
    body.bg-is-light, body.theme-light .text-rose-400 { color: #be123c !important; }
    body.bg-is-light, body.theme-light .text-red-300,
    body.bg-is-light, body.theme-light .text-red-400 { color: #b91c1c !important; }
    body.bg-is-light, body.theme-light .text-orange-300,
    body.bg-is-light, body.theme-light .text-orange-400 { color: #c2410c !important; }
    body.bg-is-light, body.theme-light .text-amber-200,
    body.bg-is-light, body.theme-light .text-amber-300,
    body.bg-is-light, body.theme-light .text-amber-400 { color: #b45309 !important; }
    body.bg-is-light, body.theme-light .text-yellow-300,
    body.bg-is-light, body.theme-light .text-yellow-400 { color: #a16207 !important; }
    body.bg-is-light, body.theme-light .text-lime-300,
    body.bg-is-light, body.theme-light .text-lime-400 { color: #4d7c0f !important; }
    body.bg-is-light, body.theme-light .text-teal-200,
    body.bg-is-light, body.theme-light .text-teal-300,
    body.bg-is-light, body.theme-light .text-teal-400 { color: #0f766e !important; }
    /* 亮背景：页脚文字色**不在这里定**——它已固定为纯白
       （见上方 body footer / body footer * 规则），不随主题或壁纸变化。 */
    /* 亮背景下的导航胶囊：底色转白、文字转深，保留主色图标 */
    body.bg-is-light, body.theme-light .nav-btn { color: #37474a !important; }
    body.bg-is-light, body.theme-light .nav-btn:hover { background: rgba(20, 35, 31, 0.07) !important; color: #14231f !important; }
    body.bg-is-light, body.theme-light .nav-btn.active {
      color: rgb(var(--accent-800)) !important;
      background: rgb(var(--accent-500) / 0.16) !important;
      border-color: rgb(var(--accent-600) / 0.35) !important;
    }
    /* ---- 浅色模式：消除「白底白字」与「深底深字」两类隐形元素 ---- */
    /* 导航站名、登录态用户名：白底上必须转深墨色，否则完全看不见 */
    body.bg-is-light, body.theme-light #brand-name,
    body.bg-is-light, body.theme-light #auth-user-name { color: #16201d !important; }
    /* 注册按钮：原本是"半透明白底 + 白字"，浅色模式下改为主色深底按钮 */
    body.bg-is-light, body.theme-light #auth-guest .bg-white\/15 {
      background-color: rgba(20, 35, 31, 0.84) !important;
      border-color: rgba(20, 35, 31, 0.90) !important;
      color: #ffffff !important;
    }
    /* 输入框 / 表单块 / 移动端菜单面板：原先都是深色底，浅色模式下也统一成
       透明磨砂（白纱 + 高模糊 + 描边），背景图透出、贴壁纸，不再实心白块。
       保留 0.50 白底是为了输入框里光标/文字在花背景上仍清晰。 */
    body.bg-is-light, body.theme-light .bg-black\/30,
    body.bg-is-light, body.theme-light .bg-black\/40,
    body.bg-is-light, body.theme-light .bg-slate-900,
    body.bg-is-light, body.theme-light .bg-slate-900\/80,
    body.bg-is-light, body.theme-light .bg-slate-950\/95 {
      background-color: rgba(255, 255, 255, 0.42) !important;
      backdrop-filter: blur(18px) saturate(150%) brightness(1.05);
      -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1.05);
      border-color: rgba(255, 255, 255, 0.50) !important;
    }
    /* ⚠️ 页脚必须从上面这组「白纱块」里排除——footer 带 bg-black\/40 类，
       否则浅色模式会被刷成白 0.42 的实心块。这里用更高特异性强制归零。 */
    body.bg-is-light footer.bg-black\/40,
    body.theme-light footer.bg-black\/40,
    body.bg-is-light footer,
    body.theme-light footer {
      background: none !important;
      background-color: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: none !important;
      box-shadow: none !important;
    }
    body.bg-is-light, body.theme-light input::placeholder,
    body.bg-is-light, body.theme-light textarea::placeholder {
      color: rgba(20, 35, 31, 0.42) !important;
    }
    /* ---- 浅色模式：白字统一转深墨色（否则白卡片上的标题=白底白字，完全看不见）---- */
    body.bg-is-light, body.theme-light .text-white { color: #16201d !important; }
    /* 浅色模式：彻底去掉「文字背后的光晕」（白晕 / 暗晕）。
       之前为了压住透出的壁纸，给卡片/导航/页脚文字加过白色光晕，结果形成
       阴阳 / 重影感——这里统一清零，文字保持干净锐利。
       可读性改由玻璃自身的不透明度与 brightness 提亮承担，不再靠光晕。
       （Hero 大标题是白字压背景图，仍需自己的深色投影，不在此列。） */
    body.bg-is-light, body.theme-light .glass-card,
    body.bg-is-light, body.theme-light .glass-pill,
    body.bg-is-light, body.theme-light footer,
    body.bg-is-light, body.theme-light .hero-readable,
    body.bg-is-light, body.theme-light .hero-readable * {
      text-shadow: none !important;
    }
    /* 例外 1：Hero 大字压在背景图上，必须保留白字 + 阴影 */
    body.bg-is-light, body.theme-light #hero-section .text-white,
    body.bg-is-light, body.theme-light .hero-title { color: #ffffff !important; }
    /* 例外 2：实色按钮上的白字（主色按钮、头像底等）保持白色 */
    body.bg-is-light, body.theme-light .bg-emerald-600.text-white,
    body.bg-is-light, body.theme-light .bg-emerald-500.text-white,
    body.bg-is-light, body.theme-light .bg-emerald-700.text-white,
    body.bg-is-light, body.theme-light .bg-sky-500.text-white,
    body.bg-is-light, body.theme-light .bg-sky-600.text-white,
    body.bg-is-light, body.theme-light .bg-cyan-500.text-white,
    body.bg-is-light, body.theme-light .bg-rose-500.text-white,
    body.bg-is-light, body.theme-light .bg-rose-600.text-white,
    body.bg-is-light, body.theme-light .bg-indigo-600.text-white,
    body.bg-is-light, body.theme-light .bg-violet-600.text-white,
    body.bg-is-light, body.theme-light .bg-fuchsia-600.text-white,
    body.bg-is-light, body.theme-light .bg-amber-500.text-white { color: #ffffff !important; }
    /* Hero 大标题：浅色模式下背景图更亮，给白字加一圈深色光晕，任何底图都看得清 */
    body.bg-is-light, body.theme-light .hero-title {
      color: #ffffff !important;
      text-shadow: 0 2px 5px rgba(0, 0, 0, .60),
                   0 4px 18px rgba(0, 0, 0, .55),
                   0 0 40px rgba(0, 0, 0, .38);
    }

    /* Hero Background Layer (customizable, sits beneath the transparent rain canvas) */
    #hero-bg-image {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(135deg, #0a0a0a 0%, #050505 55%, #0a0a0a 100%);
      background-size: cover;
      background-position: center;
      z-index: 0;
      opacity: 1;
      transition: opacity 0.6s ease;
    }
    /* 浅色模式：仅作为「无自定义背景图」时的浅色兜底。
       注意：必须用 background-image（而非 background 简写），否则会把 cover/center
       重置成 auto，导致 JS 注入的自定义背景图被压成原始尺寸、还被白渐变盖住，
       看起来「完全变了」。自定义图由 JS 以内联 background-image 注入，这里保留
       cover / center / no-repeat 让其原样铺满显示。 */
    .light #hero-bg-image {
      background-image: linear-gradient(135deg, #f8fafc 0%, #eef2f1 55%, #f8fafc 100%);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    /* 主题对比：背景图之上叠一层随主题切换的纱罩。
       深色模式 → 强压暗（近全黑），浅色模式 → 白纱提亮。
       这层只盖背景图，雨滴画布在更上层不受影响。 */
    #hero-bg-image::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.90);
      transition: background .35s ease;
    }
    /* 浅色模式不再叠白纱遮罩：让自定义背景图原样显示（可读性由浅色卡片与
       Hero 大标题的深色文字阴影承担）。transparent 会覆盖默认的深色 0.90 压暗层。 */
    .light #hero-bg-image::after {
      background: transparent;
    }
    #hero-canvas { z-index: 1; }

    /* Hero background customize trigger button */
    .hero-bg-trigger {
      position: absolute;
      top: 5rem;
      right: 1rem;
      z-index: 20;
    }

    /* Upload / add cards (album, etc.) */
    .upload-card {
      border: 1.5px dashed rgba(110, 231, 183, 0.40);
      background: rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(14px) saturate(120%);
      -webkit-backdrop-filter: blur(14px) saturate(120%);
      transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
    }
    .upload-card:hover {
      border-color: rgba(110, 231, 183, 0.7);
      background: rgba(255, 255, 255, 0.16);
    }

    .bg-preview-box {
      background-size: cover;
      background-position: center;
      background-color: rgba(0,0,0,0.3);
    }

    .pending-badge {
      font-size: 9px;
      padding: 1px 6px;
      border-radius: 999px;
      background: rgba(251, 191, 36, 0.18);
      color: #fbbf24;
      border: 1px solid rgba(251, 191, 36, 0.35);
    }
  


    /* --- 1. 收敛 transition-all：剔除会触发重排/重绘的昂贵属性 --- */
    .transition-all {
      transition-property: transform, opacity, background-color, border-color,
                           color, box-shadow !important;
    }

    /* --- 1.5 iOS 化圆角：全站统一放大一档 ---
       不改 HTML（类名太多易漏），直接用同等或更高特异性覆盖 Tailwind 的圆角类。
       注意 .rounded-full 保持胶囊不变（那是导航/药丸/头像，本来就该是圆的）。 */
    .rounded-xs,  .rounded-sm  { border-radius: var(--r-xs) !important; }
    .rounded,     .rounded-md  { border-radius: var(--r-sm) !important; }
    .rounded-lg                { border-radius: var(--r-md) !important; }
    .rounded-xl                { border-radius: var(--r-lg) !important; }
    .rounded-2xl, .rounded-3xl { border-radius: var(--r-xl) !important; }
    /* 带方向的小圆角也一并放大，避免与整体风格不一致 */
    .rounded-t-lg  { border-radius: var(--r-md) var(--r-md) 0 0 !important; }
    .rounded-t-xl  { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
    .rounded-t-2xl { border-radius: var(--r-xl) var(--r-xl) 0 0 !important; }
    .rounded-b-lg  { border-radius: 0 0 var(--r-md) var(--r-md) !important; }
    .rounded-b-xl  { border-radius: 0 0 var(--r-lg) var(--r-lg) !important; }
    /* 卡片与面板按最大圆角走，观感更接近 iOS */
    .glass-card { border-radius: var(--r-lg) !important; }
    /* 移动端再放大一点：小屏上大圆角更"软"，更接近 iOS 手感 */
    @media (max-width: 640px) {
      .rounded-lg                { border-radius: 18px !important; }
      .rounded-xl                { border-radius: 24px !important; }
      .rounded-2xl, .rounded-3xl { border-radius: 30px !important; }
      .glass-card                { border-radius: 30px !important; }
    }

    /* --- 2. 磨砂玻璃统一质感：小半径 + 高饱和 + 内高光 --- */
    .glass-card,
    .glass-pill {
      -webkit-backdrop-filter: blur(20px) saturate(165%) brightness(1.06);
              backdrop-filter: blur(20px) saturate(165%) brightness(1.06);
      box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .55),
                  inset 0 1px 1px rgba(255, 255, 255, .18),
                  inset 0 -1px 1px rgba(0, 0, 0, .12);
      transition: transform .3s cubic-bezier(.22,.61,.36,1),
                  box-shadow .3s ease, border-color .3s ease,
                  background-color .3s ease;
    }
    body.bg-is-light, body.theme-light .glass-card,
    body.bg-is-light, body.theme-light .glass-pill {
      -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.15);
              backdrop-filter: blur(22px) saturate(180%) brightness(1.15);
      box-shadow: 0 14px 38px -16px rgba(20, 35, 31, .30),
                  inset 0 1px 1px rgba(255, 255, 255, .80),
                  inset 0 -1px 1px rgba(15, 30, 25, .12);
    }
    /* --- 3. 模块悬浮：轻抬升 + 描边提亮（纯合成层动画） --- */
    @media (hover: hover) and (min-width: 641px) {
      .glass-card:hover {
        transform: translateY(-3px);
        border-color: rgb(var(--accent-300) / .34);
        box-shadow: 0 18px 42px -20px rgba(0, 0, 0, .6),
                    inset 0 1px 0 rgba(255, 255, 255, .16);
      }
      body.bg-is-light, body.theme-light .glass-card:hover {
        border-color: rgba(255, 255, 255, .70);
        box-shadow: 0 22px 50px -22px rgba(20, 35, 31, .40),
                    inset 0 1px 1px rgba(255, 255, 255, .90);
      }
    }

    /* --- 3.5 内容让位悬浮导航 ---
       导航是 fixed 悬浮胶囊（top 14px + 高 64px），首屏内容必须留出足够顶部空间，
       否则会被胶囊压住。这里给 main 兜底内边距（不加 !important，避免压掉
       switchTab 里按页面设置的行内 paddingTop）。 */
    #main-content { padding-top: 6.5rem; }

    /* --- 4. 导航胶囊：磨砂观感 + 点按反馈（transform 走合成层，跟手不掉帧）--- */
    .nav-btn {
      transition: transform .2s cubic-bezier(.22,.61,.36,1),
                  background-color .2s ease, color .2s ease, border-color .2s ease;
    }
    .nav-btn:active { transform: scale(.94); }
    /* 激活项 = 白色磨砂「药丸」高亮（对齐参考图：白色块 + 深色字，最醒目） */
    .nav-btn.active {
      background-color: rgba(255, 255, 255, .92) !important;
      border-color: rgba(255, 255, 255, .95) !important;
      color: #16201d !important;
      box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .45),
                  inset 0 1px 0 rgba(255, 255, 255, 1);
    }
    /* 激活项内的图标也转深（参考图里图标是深色） */
    .nav-btn.active i { color: #16201d !important; }
    body.bg-is-light, body.theme-light .nav-btn.active {
      background-color: rgba(255, 255, 255, .96) !important;
      border-color: rgba(255, 255, 255, 1) !important;
      color: #16201d !important;
    }
    body.bg-is-light, body.theme-light .nav-btn.active i { color: #16201d !important; }
    .nav-btn:active { transition-duration: .08s; }

    /* --- 5. 分层隔离：背景层独立合成，画布重绘不再牵连整页 --- */
    #site-bg { contain: layout paint; }
    #hero-canvas, #hero-bg-image { transform: translateZ(0); }

    /* --- 6. 移动端：进一步降 blur 半径与层数，保证滚动顺滑 --- */
    @media (max-width: 640px) {
      .glass-card,
      .glass-pill {
        -webkit-backdrop-filter: blur(13px) saturate(165%) !important;
                backdrop-filter: blur(13px) saturate(165%) !important;
      }
      /* 悬浮胶囊：移动端降模糊半径与饱和度，保证滚动顺滑（桌面为 blur 30px） */
      .site-header > .max-w-7xl:not(#mobile-menu) {
        -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(1.10) !important;
                backdrop-filter: blur(18px) saturate(170%) brightness(1.10) !important;
      }
      /* 抽屉菜单面板：与胶囊同级降载 */
      #mobile-menu {
        -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(1.08) !important;
                backdrop-filter: blur(18px) saturate(170%) brightness(1.08) !important;
      }
      /* 页脚保持「无效果」：移动端也不加模糊（footer 整体不参与玻璃）。 */
      body { scroll-behavior: auto; }     /* 移动端取消全局平滑滚动，避免拖动发飘 */
    }

    /* --- 7. 触屏细节 --- */
    html { -webkit-tap-highlight-color: transparent; }

    /* ============================================================
       7.5 移动端专项动效优化
       ------------------------------------------------------------
       手机上"丝滑"的关键与桌面不同：
       1) 反馈要「跟手」——按下必须在 ~100ms 内看到变化，慢了就觉得卡；
       2) 滚动要「不卡」——禁止 backdrop-filter 随滚动重绘、缩短合成层数量；
       3) 手感要「真」——按下有缩放，而不是只有颜色变化；
       4) 省电——低端机上减少同时运行的动画。
       ============================================================ */
    @media (max-width: 640px), (hover: none) and (pointer: coarse) {
      /* 所有可点元素：按下即刻缩放反馈（缩短时长，避免"按了没反应"的错觉） */
      .nav-btn,
      button:not(.no-ios),
      a.btn-ios,
      .glass-card[onclick],
      .tab-content button,
      #mobile-menu a,
      #mobile-menu button {
        transition: transform .12s cubic-bezier(.34,1.56,.64,1),
                    background-color .16s ease, color .16s ease,
                    border-color .16s ease, box-shadow .2s ease;
        /* 防止 iOS 长按弹出选择/放大镜，提升"原生 App"手感 */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
      }
      .nav-btn:active,
      button:not(.no-ios):active,
      a.btn-ios:active,
      #mobile-menu a:active,
      #mobile-menu button:active {
        transform: scale(.955);
        transition-duration: .06s;   /* 按下走极短时长，抬起再回弹 */
      }
      /* 卡片按下：轻微内缩（手机没有 hover，用 active 表达可点） */
      .glass-card:active {
        transform: scale(.985);
        transition-duration: .1s;
      }
      /* 移动端卡片横向/纵向入场幅度收小，避免小屏上"晃得厉害" */
      .ios-in { animation-duration: .42s; }
      .reveal {
        transform: translateY(16px);
        transition-duration: .5s;
      }
      /* 移动端弹窗：从底部"升起"更符合手机习惯（iOS sheet 观感） */
      @keyframes iosSheetInMobile {
        from { opacity: 0; transform: translateY(36px) scale(.96); }
        to   { opacity: 1; transform: translateY(0)    scale(1); }
      }
      .ios-modal.ios-open .ios-sheet {
        animation: iosSheetInMobile .48s cubic-bezier(.22,1,.36,1) both !important;
      }
      @keyframes iosSheetOutMobile {
        from { opacity: 1; transform: translateY(0)    scale(1); }
        to   { opacity: 0; transform: translateY(24px) scale(.97); }
      }
      .ios-modal.ios-closing .ios-sheet {
        animation: iosSheetOutMobile .2s cubic-bezier(.4,0,.2,1) both !important;
      }
      /* 移动端提示条：从底部滑入（右下角容易被拇指/浏览器栏挡住） */
      @keyframes iosToastInMobile {
        from { opacity: 0; transform: translateY(18px) scale(.96); }
        to   { opacity: 1; transform: translateY(0)    scale(1); }
      }
      @keyframes iosToastOutMobile {
        from { opacity: 1; transform: translateY(0)    scale(1); }
        to   { opacity: 0; transform: translateY(14px) scale(.97); }
      }
    }

    /* 移动端把 Toast 容器挪到屏幕中下区域，避免被浏览器底栏遮住 */
    @media (max-width: 640px) {
      #toast-container {
        left: 12px;
        right: 12px;
        bottom: max(16px, env(safe-area-inset-bottom, 0px) + 12px);
      }
      #toast-container > * { width: 100%; }
    }

    /* 刘海屏/灵动岛机型：悬浮胶囊避开状态栏 */
    @supports (padding: env(safe-area-inset-top)) {
      .site-header { top: calc(.875rem + env(safe-area-inset-top, 0px)); }
    }

    /* 滚动性能：给长列表容器开合成层提示，减少滚动时重绘（仅在有内容时生效） */
    .tab-content { contain: layout style; }

    /* 减少动画总量：低端设备 / 省电模式（电池）下自动降载 */
    @media (prefers-reduced-motion: reduce) {
      .ios-in, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
    }

    /* --- 8. 尊重系统"减弱动态效果"：极低功耗模式 --- */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
      #hero-canvas { display: none; }
    }

    /* ============================================================
       【页脚纯白文字 · 放在样式表最末尾 + 用高特异性硬压】
       背景：footer 内的元素自带 Tailwind 文字类（text-slate-400、text-emerald-300…），
       浅色主题另有一批「body.bg-is-light .text-xxx { color:… !important }」会把它们改色，
       且 footer 内还有若干子元素的色来自其它规则。
       为保证「整行任何位置都是纯白」，这里：
         · 放在最末尾（源顺序最后）；
         · 用 body.bg-is-light footer 后代 = (0,3,1) 级别，稳定高于对手；
         · 同时清掉 --accent 变量污染（footer 内 text-emerald-* 曾取值 --accent-800，
           壁纸主色提取后变成深紫）。
       覆盖：footer 自身 + 所有后代 + 链接各状态。
       ============================================================ */
    body footer,
    body footer *,
    body footer a,
    body footer a:link,
    body footer a:visited,
    body footer a:hover,
    body footer a:active,
    body.bg-is-light footer,
    body.bg-is-light footer *,
    body.bg-is-light footer a,
    body.bg-is-light footer a:link,
    body.bg-is-light footer a:visited,
    body.bg-is-light footer a:hover,
    body.bg-is-light footer a:active,
    body.theme-light footer,
    body.theme-light footer *,
    body.theme-light footer a,
    body.theme-light footer a:hover,
    html body footer,
    html body footer *,
    html body.bg-is-light footer,
    html body.bg-is-light footer *,
    html body.theme-light footer,
    html body.theme-light footer * {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }
  


    /* 设计对齐导航胶囊：同一套毛玻璃配方 + 同一套动效令牌 + iOS 大圆角。
       注意：#music-bar 是 position:fixed，绝不能塞进任何带 backdrop-filter 的
       祖先里 —— 那种祖先会成为 fixed 的包含块，导致定位基准错乱（本站踩过）。 */
    :root { --music-bar-h: 0px; }

    /* 给页面底部留出播放条的空间，避免遮住页脚最后一行内容 */
    body.has-music { padding-bottom: calc(var(--music-bar-h) + 8px); }

    /* ---------- 底部迷你条 ---------- */
    #music-bar {
      position: fixed;
      left: 0;
      right: var(--sbw, 0px);          /* 补偿滚动条宽度，与导航保持左右对称 */
      bottom: 0;
      z-index: 40;                     /* 低于弹窗/toast 的 z-50 */
      padding: 0 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
      pointer-events: none;
    }
    #music-bar-inner {
      pointer-events: auto;
      max-width: 42rem;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 0.875rem;
      border-radius: 9999px;           /* 药丸形，与导航胶囊呼应 */
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgb(var(--accent-950) / 0.55);
      backdrop-filter: blur(30px) saturate(190%) brightness(1.10);
      -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.10);
      box-shadow: 0 12px 40px -14px rgba(0, 0, 0, 0.60),
                  inset 0 1px 1px rgba(255, 255, 255, 0.28),
                  inset 0 -1px 1px rgba(255, 255, 255, 0.08),
                  inset 0 0 0 0.5px rgba(255, 255, 255, 0.10);
      opacity: 0;
      transform: translateY(120%) scale(0.96);
      transition: opacity var(--dur-base) var(--ease-spring),
                  transform var(--dur-slow) var(--ease-spring-bouncy);
    }
    #music-bar.mb-in #music-bar-inner {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    body.bg-is-light #music-bar-inner,
    body.theme-light #music-bar-inner {
      background: rgba(255, 255, 255, 0.62);
      border-color: rgba(255, 255, 255, 0.55);
      box-shadow: 0 12px 40px -14px rgba(0, 0, 0, 0.28),
                  inset 0 1px 1px rgba(255, 255, 255, 0.85),
                  inset 0 0 0 0.5px rgba(255, 255, 255, 0.60);
    }

    /* 封面：播放时旋转（黑胶感），暂停即停 */
    .mb-cover {
      width: 40px; height: 40px;
      border-radius: 9999px;
      flex: none;
      overflow: hidden;
      background: linear-gradient(135deg, rgb(var(--accent-400)), rgb(var(--accent-700)));
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
      position: relative;
    }
    .mb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* 中心小孔，强化唱片观感 */
    .mb-cover::after {
      content: '';
      position: absolute; left: 50%; top: 50%;
      width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
      border-radius: 9999px;
      background: rgb(var(--accent-950) / 0.85);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
      pointer-events: none;
    }
    .mb-cover.spinning { animation: discSpin 8s linear infinite; }

    @keyframes discSpin { to { transform: rotate(360deg); } }

    /* 曲目信息 */
    .mb-meta { min-width: 0; flex: 1 1 auto; }
    .mb-title {
      font-size: 12px; font-weight: 600; color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3;
    }
    .mb-artist {
      font-size: 10px; color: rgba(255, 255, 255, 0.55);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.3;
    }
    body.bg-is-light .mb-title, body.theme-light .mb-title { color: #16201d; }
    body.bg-is-light .mb-artist, body.theme-light .mb-artist { color: rgba(22, 32, 29, 0.60); }

    /* 控制按钮 */
    .mb-btn {
      width: 32px; height: 32px; flex: none;
      border-radius: 9999px;
      display: inline-flex; align-items: center; justify-content: center;
      color: rgba(255, 255, 255, 0.80);
      background: transparent; border: none; cursor: pointer;
      transition: transform .12s var(--ease-spring-bouncy), background-color .18s, color .18s;
    }
    .mb-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
    .mb-btn:active { transform: scale(0.90); }
    .mb-btn:disabled { opacity: 0.35; cursor: default; }
    body.bg-is-light .mb-btn, body.theme-light .mb-btn { color: rgba(22, 32, 29, 0.72); }
    body.bg-is-light .mb-btn:hover, body.theme-light .mb-btn:hover { color: #16201d; background: rgba(0, 0, 0, 0.07); }

    .mb-btn-main {
      width: 36px; height: 36px;
      background: rgba(255, 255, 255, 0.92);
      color: #16201d;
    }
    .mb-btn-main:hover { background: #fff; color: #16201d; }
    body.bg-is-light .mb-btn-main, body.theme-light .mb-btn-main {
      background: rgba(22, 32, 29, 0.88); color: #fff;
    }
    body.bg-is-light .mb-btn-main:hover, body.theme-light .mb-btn-main:hover {
      background: rgb(22, 32, 29); color: #fff;
    }

    /* 进度条 */
    .mb-progress {
      flex: 1 1 7rem;
      min-width: 4rem;
      height: 18px;
      display: flex; align-items: center;
      cursor: pointer;
      position: relative;
    }
    /* 加高可点区域（透明），视觉轨道仍是 3px —— 手机上更好按 */
    .mb-progress::before {
      content: ''; position: absolute; inset: 0;
    }
    .mb-track {
      width: 100%; height: 3px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.22);
      overflow: hidden;
    }
    body.bg-is-light .mb-track, body.theme-light .mb-track { background: rgba(0, 0, 0, 0.14); }
    .mb-fill {
      height: 100%; width: 0%;
      border-radius: 9999px;
      background: linear-gradient(90deg, rgb(var(--accent-400)), rgb(var(--accent-200)));
    }
    .mb-time {
      font-size: 10px; color: rgba(255, 255, 255, 0.55);
      font-variant-numeric: tabular-nums;
      flex: none; white-space: nowrap;
    }
    body.bg-is-light .mb-time, body.theme-light .mb-time { color: rgba(22, 32, 29, 0.55); }

    /* ---------- 展开面板（向上滑出） ---------- */
    #music-panel {
      position: fixed;
      left: 0; right: var(--sbw, 0px);
      bottom: 0;
      z-index: 41;                     /* 压在迷你条之上 */
      padding: 0 1rem calc(4.75rem + env(safe-area-inset-bottom, 0px));
      pointer-events: none;
    }
    #music-panel.mb-open { pointer-events: auto; }
    #music-panel-inner {
      max-width: 42rem;
      margin: 0 auto;
      max-height: min(60vh, 26rem);
      display: flex;
      flex-direction: column;
      overflow: hidden;                /* 滚动下沉到歌单区，头部常驻 */
      overscroll-behavior: contain;
      border-radius: 26px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgb(var(--accent-950) / 0.72);
      backdrop-filter: blur(30px) saturate(190%) brightness(1.08);
      -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.08);
      box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.70),
                  inset 0 1px 1px rgba(255, 255, 255, 0.24),
                  inset 0 0 0 0.5px rgba(255, 255, 255, 0.10);
      padding: 0.75rem;
      opacity: 0;
      visibility: hidden;              /* 收起时移出可聚焦/可命中范围 */
      transform: translateY(16px) scale(0.97);
      transform-origin: bottom center;
      transition: opacity var(--dur-base) var(--ease-soft),
                  transform var(--dur-slow) var(--ease-spring),
                  visibility 0s linear var(--dur-base);
    }
    #music-panel.mb-open #music-panel-inner {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      transition: opacity var(--dur-base) var(--ease-soft),
                  transform var(--dur-slow) var(--ease-spring),
                  visibility 0s;
    }
    body.bg-is-light #music-panel-inner,
    body.theme-light #music-panel-inner {
      background: rgba(255, 255, 255, 0.80);
      border-color: rgba(255, 255, 255, 0.60);
    }

    .mp-head {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.25rem 0.5rem 0.625rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.10);
      margin-bottom: 0.375rem;
      flex: none;
    }
    /* 歌单滚动区：头部常驻，只有列表滚动，长歌单也不会撑破面板 */
    #music-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    #music-list::-webkit-scrollbar { width: 0; height: 0; }
    body.bg-is-light .mp-head, body.theme-light .mp-head { border-bottom-color: rgba(0, 0, 0, 0.08); }
    .mp-head h4 { font-size: 12px; font-weight: 700; color: #fff; flex: 1 1 auto; }
    body.bg-is-light .mp-head h4, body.theme-light .mp-head h4 { color: #16201d; }
    .mp-count { font-size: 10px; color: rgba(255, 255, 255, 0.45); }
    body.bg-is-light .mp-count, body.theme-light .mp-count { color: rgba(22, 32, 29, 0.50); }

    /* 音量滑块 */
    .mp-vol {
      -webkit-appearance: none; appearance: none;
      width: 68px; height: 3px; border-radius: 9999px;
      background: rgba(255, 255, 255, 0.24);
      outline: none; cursor: pointer; flex: none;
    }
    body.bg-is-light .mp-vol, body.theme-light .mp-vol { background: rgba(0, 0, 0, 0.16); }
    .mp-vol::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 11px; height: 11px; border-radius: 9999px;
      background: #fff; cursor: pointer;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }
    .mp-vol::-moz-range-thumb {
      width: 11px; height: 11px; border: none; border-radius: 9999px;
      background: #fff; cursor: pointer;
    }

    /* 歌单行 */
    .mp-item {
      display: flex; align-items: center; gap: 0.625rem;
      width: 100%; text-align: left;
      padding: 0.5rem;
      border-radius: 16px;
      border: none; background: transparent; cursor: pointer;
      transition: background-color .18s, transform .12s var(--ease-spring-bouncy);
    }
    .mp-item:hover { background: rgba(255, 255, 255, 0.08); }
    .mp-item:active { transform: scale(0.985); }
    .mp-item.mp-cur { background: rgba(255, 255, 255, 0.13); }
    body.bg-is-light .mp-item:hover, body.theme-light .mp-item:hover { background: rgba(0, 0, 0, 0.05); }
    body.bg-is-light .mp-item.mp-cur, body.theme-light .mp-item.mp-cur { background: rgba(0, 0, 0, 0.08); }

    .mp-num {
      width: 18px; flex: none; text-align: center;
      font-size: 10px; color: rgba(255, 255, 255, 0.40);
      font-variant-numeric: tabular-nums;
    }
    body.bg-is-light .mp-num, body.theme-light .mp-num { color: rgba(22, 32, 29, 0.42); }
    .mp-name { flex: 1 1 auto; min-width: 0; }
    .mp-name b {
      display: block; font-size: 12px; font-weight: 600; color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mp-name span {
      display: block; font-size: 10px; color: rgba(255, 255, 255, 0.48);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body.bg-is-light .mp-name b, body.theme-light .mp-name b { color: #16201d; }
    body.bg-is-light .mp-name span, body.theme-light .mp-name span { color: rgba(22, 32, 29, 0.55); }

    /* 正在播放的跳动条 */
    .mp-bars { display: none; align-items: flex-end; gap: 2px; height: 12px; width: 14px; flex: none; }
    .mp-item.mp-cur.playing .mp-bars { display: inline-flex; }
    .mp-bars i {
      display: block; width: 2px; border-radius: 2px;
      background: rgb(var(--accent-300));
      animation: mpBar .9s ease-in-out infinite;
    }
    .mp-bars i:nth-child(1) { height: 45%; animation-delay: 0s; }
    .mp-bars i:nth-child(2) { height: 100%; animation-delay: .18s; }
    .mp-bars i:nth-child(3) { height: 65%; animation-delay: .36s; }
    @keyframes mpBar { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }

    /* 空态 */
    .mp-empty {
      padding: 2rem 1rem; text-align: center;
      font-size: 11px; color: rgba(255, 255, 255, 0.45);
    }
    body.bg-is-light .mp-empty, body.theme-light .mp-empty { color: rgba(22, 32, 29, 0.50); }

    /* ---------- 导航栏音乐图标：播放条展开时高亮，让「可再点一次收起」变得可预期 ---------- */
    #nav-music-btn.nav-music-on {
      color: #fff;
      background: rgba(255, 255, 255, 0.16);
    }
    body.bg-is-light #nav-music-btn.nav-music-on,
    body.theme-light #nav-music-btn.nav-music-on {
      color: #0f172a;
      background: rgba(15, 23, 42, 0.10);
    }

    /* ---------- 移动端 ---------- */
    @media (max-width: 640px) {
      #music-bar { padding: 0 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); }
      #music-bar-inner { gap: 0.5rem; padding: 0.4rem 0.625rem; }
      /* 触屏热区放大到 40px，符合可点区域下限 */
      .mb-btn { width: 40px; height: 40px; }
      .mb-btn-main { width: 42px; height: 42px; }
      .mb-cover { width: 38px; height: 38px; border-radius: 9999px; }
      /* 手机上进度条挤出空间，只保留细条 */
      .mb-progress { flex: 0 0 3.5rem; min-width: 2.5rem; }
      .mb-time { display: none; }
      #music-panel { padding: 0 0.5rem calc(5rem + env(safe-area-inset-bottom, 0px)); }
      #music-panel-inner { border-radius: 20px; max-height: 58vh; }
      .mp-vol { width: 52px; }
      /* 面板项热区加大 */
      .mp-item { padding: 0.625rem 0.5rem; }
    }

    /* 汉堡菜单里的音乐入口：凡是「用汉堡菜单代替导航栏」的视口（<1280px，
       含平板触屏）都给足 44px 触控热区 */
    @media (max-width: 1279px) {
      #mobile-music-entry { min-height: 44px; }
    }

    /* toast 上移，避免与播放条叠在一起 */
    body.has-music #toast-container { bottom: calc(var(--music-bar-h) + 1.25rem); }
    @media (max-width: 640px) {
      body.has-music #toast-container {
        bottom: calc(var(--music-bar-h) + max(16px, env(safe-area-inset-bottom, 0px) + 12px));
      }
    }

    /* 尊重系统「减弱动态效果」 */
    @media (prefers-reduced-motion: reduce) {
      .mb-cover.spinning { animation: none; }
      .mp-bars i { animation: none; }
      #music-bar-inner, #music-panel-inner { transition-duration: .01s; }
    }