* { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --clock-text: var(--text-color);
      --digit-gap: 0em;
      --bg-color: #16130f;
      --text-color: #f0ece4;
      --text-secondary: #9c9484;
      --card-bg: rgba(255, 255, 255, 0.06);
      --card-border: rgba(255, 255, 255, 0.1);
      --digit-bg: rgba(255, 255, 255, 0.07);
      --accent: #7fb69e;
      --accent-strong: #93cdb4;
      --accent-text: #14201a;
      --overlay: rgba(12, 10, 8, 0.42);
      --shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
      /* player 窗内纯色场景的默认颜色（随主题切换） */
      --scene-color: #16130f;
      /* 统一中轴：player / 场景条 / 说明文字共用同一列宽 */
      --col: 1120px;
      --stage-gap: clamp(16px, 2.4vh, 28px);
      /* player 宽度固定 1000px（窄窗口 / 移动端见底部媒体查询回退） */
      --pw: 1000px;
    }
    body.light {
      /* 必须重新声明：--clock-text 在 :root 已按暗色解析并继承，这里要按亮色重新解析 */
      --clock-text: var(--text-color);
      --bg-color: #f6f6f6;
      --text-color: #2c2822;
      --text-secondary: #8a8172;
      --card-bg: rgba(255, 255, 255, 0.66);
      --card-border: rgba(60, 50, 35, 0.08);
      --digit-bg: rgba(255, 255, 255, 0.72);
      --accent: #5a9e7e;
      --accent-strong: #4a8a6c;
      --accent-text: #ffffff;
      --overlay: rgba(246, 246, 246, 0.18);
      --shadow: 0 18px 44px rgba(90, 75, 50, 0.18);
      --scene-color: #f6f6f6;
    }

    html, body { min-height: 100%; }
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
      background: var(--bg-color);
      color: var(--text-color);
      overflow-x: hidden;
      transition: background 0.45s ease, color 0.45s ease;
    }
    body.is-fs { overflow: hidden; }

    .page {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* 顶栏 */
    .header {
      flex: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* 内容对齐统一中轴，下划线保持通栏 */
      padding: 22px max(4%, calc((100% - min(var(--col), 96%)) / 2));
      border-bottom: 1px solid var(--card-border);
      transition: opacity 0.5s, border-color 0.45s ease;
    }
    .brand { display: flex; align-items: center; }
    .brand-logo {
      display: block;
      height: 42px;
      width: auto;
      object-fit: contain;
    }
    /* 随主题切换 logo 图片：暗黑用 nt_bai，明亮用 nt_hei */
    .brand-logo-light { display: none; }
    body.light .brand-logo-dark { display: none; }
    body.light .brand-logo-light { display: block; }

    /* 中央舞台：player 窗 + 场景条 */
    .stage {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(12px, 1.8vh, 22px);
      padding: var(--stage-gap) 0;
    }

    /* ========== player 窗（时钟舞台） ========== */
    .player {
      position: relative;
      flex: none;
      width: var(--pw);
      aspect-ratio: 16 / 8;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--card-border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(6px, 1.4cqh, 14px);
      /* 容器查询单位：时钟字号跟随 player 尺寸自适应 */
      container-type: size;
      transition: border-radius 0.3s ease, border-color 0.45s ease;
    }
    /* player 背景层：默认纯色，选图后覆盖图片 */
    .player-bg, .player-overlay {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    .player-bg {
      background-color: var(--scene-color);
      background-size: cover;
      background-position: center;
      transition: background-color 0.45s ease;
    }
    .player-overlay {
      z-index: 1;
      background: var(--overlay);
      opacity: 0;
      transition: opacity 0.6s ease, background 0.45s ease;
    }
    .player-overlay.active { opacity: 1; }

    /* player 视频背景层：填入视频外链时启用 */
    .player-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      display: none;
    }
    .player-video.active { display: block; }

    /* 全屏按钮：舞台顶部居中 */
    .player-actions {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      gap: 8px;
    }
    /* 设置齿轮：舞台右上角 */
    .player-gear {
      position: absolute;
      top: 14px;
      right: 16px;
      z-index: 5;
    }
    /* 音效播放按钮：舞台右下角，圆形毛玻璃 */
    .player-sound {
      position: absolute;
      right: 16px;
      bottom: 14px;
      z-index: 5;
    }
    .glass-btn.sound-btn {
      width: 46px;
      height: 46px;
      padding: 0;
      border-radius: 50%;
      /* 裸图标：去掉毛玻璃圆圈外轮廓 */
      background: transparent;
      border: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
    }
    .sound-btn .ic-on { display: none; }
    body.sound-on .sound-btn .ic-on { display: block; }
    body.sound-on .sound-btn .ic-off { display: none; }
    body.sound-on .sound-btn { color: var(--accent-strong); }
    /* 提高优先级，避免被 .glass-btn 的 12px 圆角覆盖 */
    .glass-btn.gear-btn { width: 46px; height: 46px; padding: 0; border-radius: 50%; }
    .glass-btn {
      height: 38px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.35);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.25s, transform 0.15s;
    }
    .glass-btn:hover { background: rgba(0, 0, 0, 0.52); transform: translateY(-1px); }

    /* 头部主题切换图标：暗黑显示太阳（点击转明亮），明亮显示月亮 */
    .icon-btn .ic-moon { display: none; }
    body.light .icon-btn .ic-sun { display: none; }
    body.light .icon-btn .ic-moon { display: block; }

    /* 时钟：数字是 flex:none 的 1em 固定块，实际宽度 = 7.44em(24h) / 约 8.17em(12h，含 AM/PM)，
       用容器查询单位按 player 宽度分别设上限，两种模式都填满窗内又不溢出 */
    .clock {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      width: 100%;
      font-size: min(11vw, 120px);
      /* 时钟大小可自定义：--clock-scale 由设置里的滑杆控制；
         基础系数按 1000px × 16/8 舞台校准，100% 时尽量填满舞台且不溢出 */
      font-size: calc(min(13cqw, 70cqh) * var(--clock-scale, 1));
    }
    body.h12 .clock {
      font-size: min(10.5vw, 112px);
      /* 12小时制多一个 AM/PM 徽章，系数比 24h 更小防溢出 */
      font-size: calc(min(12cqw, 70cqh) * var(--clock-scale, 1));
    }
    /* 设置里关闭「显示时钟」后隐藏时钟，日期仍可单独显示 */
    body.hide-clock .clock { display: none; }
    .digit {
      position: relative;
      /* 注意：不要在这里加 overflow:hidden / backdrop-filter —— 它们会把翻片的 3D 变换
         压平渲染，侧立翻片被描出残边（翻页"视觉残留"的根因）；背景本身不透明，毛玻璃无意义 */
      perspective: 2.3em;   /* 随字号缩放，约 1.7 倍卡高，对齐 clockhub 的透视比例 */
      flex: none;
      width: 1em;
      background: var(--digit-bg);
      border: 1px solid var(--card-border);
      color: var(--clock-text);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      aspect-ratio: 0.72;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.14em;
      margin: 0 0.06em;
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
      transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, font-size 0.4s ease;
    }
    /* 折痕：同色卡片底上仅一条 1px 铰链缝线（压过数字，随卡片圆角裁切） */
    /* 折痕色变量：暗黑下混 40% 黑（更深），明亮下只混 10% 黑（很浅），随卡片底色自适应 */
    body { --crease: color-mix(in srgb, var(--digit-bg, #2e2a24) 60%, black); }
    body.light { --crease: color-mix(in srgb, var(--digit-bg, #ffffff) 90%, black); }
    .digit::after {
      content: '';
      position: absolute;
      left: 0; right: 0; top: 50%;
      height: 1px;
      transform: translateY(-100%);   /* 贴中线上方，与翻板铰链同位 */
      background: var(--crease);
      pointer-events: none;
      z-index: 1;
    }
    /* 0 格透明模式没有卡片，不显示分割效果；翻转时钟整卡翻转，也不需要折痕 */
    body.digit-clear .digit::after,
    body.mode-flipcard .digit::after { display: none; }
    /* ===== 机械翻页（对齐 clockhub.app：整块上半板一次翻足 180° + 三层动态阴影带） ===== */
    /* 半层常显（上下两半拼出完整数字，折痕线正好盖住中线拼缝），翻板/阴影带只在翻页时出现；
       不再有"完整层 ↔ 半层"的整层切换 —— 那是翻页起止瞬间数字跳 1px 抖动的根因 */
    .digit .flap, .digit .shade { display: none; }
    .digit.flipping .flap, .digit.flipping .shade { display: block; }
    .digit .half {
      position: absolute;
      left: 0; right: 0;
      height: 50%;
      overflow: hidden;
      box-sizing: border-box;
    }
    /* 半层与翻面共用的数字载体：高 200%（即整卡高），数字居中 —— 与完整数字层渲染位置一致 */
    .digit .half span,
    .digit .face span {
      position: absolute;
      left: 0; right: 0;
      height: 200%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* "大小"下拉只缩放数字字形本身（含半层/翻面各层），卡片尺寸不随之改变 */
    .digit .half span,
    .digit .face span {
      font-size: calc(1em * var(--digit-size, 1));
    }
    .digit .half.top { top: 0; }
    .digit .half.top span { top: 0; }
    .digit .half.bottom { bottom: 0; }
    .digit .half.bottom span { top: -100%; }
    /* 翻板：铰链在中线，正反两面（正面=旧数字上半，背面=新数字下半），一次转足 180° */
    .digit .flap {
      position: absolute;
      left: -1px; right: -1px; top: -1px;
      height: calc(50% + 1px);
      z-index: 2;
      transform-style: preserve-3d;
      transform-origin: 50% 100%;
    }
    .digit .face {
      position: absolute;
      inset: 0;
      overflow: hidden;
      box-sizing: border-box;
      background: var(--digit-bg);
      border: 1px solid var(--card-border);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transition: background 0.45s ease, border-color 0.45s ease;
    }
    .digit .face.front {
      border-radius: 0.14em 0.14em 0 0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
                  inset 0 -1px 0 var(--crease);
    }
    /* 翻板外框为盖住卡片 1px 边框而取 top:-1px / height:calc(50% + 1px)，
       面内可用高度比卡片内半区少 2px，字形会偏 1px；这里对各面做 +1/-1px 反向补偿，
       保证翻板起落瞬间的字形与静止完整层严丝合缝（否则落定时数字会跳 1px，看着像抖一下） */
    .digit .face.front span { top: 1px; }
    .digit .face.back {
      transform: rotateX(180deg);   /* 预镜像：随翻板转过 180° 后正好正向落定在下半 */
      border-radius: 0 0 0.14em 0.14em;
      background: var(--digit-bg);   /* 与卡片同色，落定后无跳变 */
    }
    .digit .face.back span { top: calc(-100% - 1px); }
    /* 三层动态阴影带（关键帧数值照搬 clockhub）：中线带=随翻动起伏的"活折痕"，
       深色带=翻板扫过的投影，底部带=下半掠过暗角；全程盖在翻板之上 */
    .digit .shade {
      position: absolute;
      inset: 0;
      border-radius: 0.14em;
      pointer-events: none;
      opacity: 0;
    }
    .digit .shade.mid {
      z-index: 4;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.12) 60%, transparent);
    }
    .digit .shade.dark {
      z-index: 5;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.35) 55%, transparent);
    }
    .digit .shade.bottom {
      z-index: 3;
      background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1) 30%, transparent);
    }
    /* 一次 0.9s ease-in-out 翻足 180°，三条阴影带同步起伏 */
    .digit.flipping .flap { animation: flip-down 0.9s ease-in-out forwards; }
    /* 重影根治：前半程只显正面（旧数字上半）、后半程只显背面（新数字下半），
       90° 处两面都侧立不可见，切换无感 —— 即使浏览器背面剔除失效，
       任何瞬间也只有一个面可见，不会再出现正反数字叠加的重影 */
    .digit.flipping .face.front,
    .digit.flipping .half.bottom span { animation: half-hide 0.9s ease-in-out forwards; }
    .digit.flipping .face.back,
    .digit.flipping .half.top span { animation: half-show 0.9s ease-in-out forwards; }
    /* 卡片底色默认是半透明毛玻璃（--digit-bg: rgba(...)），翻板也随之半透明，
       若静态数字在翻板底下就会透出重影。解法：数字交接放在翻板侧立点（50%≈90°）——
       前半程上半无数字（翻板带旧数字掀走），转过侧立点新上半才出现；
       旧下半在侧立点消失，由翻板背面带着新下半拍落覆盖。半透明翻板下始终无数字 */
    .digit.flipping .shade.mid { animation: shade-mid 0.9s ease-in-out forwards; }
    .digit.flipping .shade.dark { animation: shade-dark 0.9s ease-in-out forwards; }
    .digit.flipping .shade.bottom { animation: shade-bottom 0.9s ease-in-out forwards; }
    /* 明亮模式下隐藏翻页阴影带：黑纱叠加在浅色卡片上显脏，直接关闭 */
    body.light .digit.flipping .shade { display: none; }
    /* 3 格模式组内面板为方角，翻板圆角跟随：左卡只有左圆角、右卡只有右圆角 */
    body.digit-trio #h1 .face.front, body.digit-trio #m1 .face.front, body.digit-trio #s1 .face.front { border-radius: 0.14em 0 0 0; }
    body.digit-trio #h1 .face.back, body.digit-trio #m1 .face.back, body.digit-trio #s1 .face.back { border-radius: 0 0 0 0.14em; }
    body.digit-trio #h2 .face.front, body.digit-trio #m2 .face.front, body.digit-trio #s2 .face.front { border-radius: 0 0.14em 0 0; }
    body.digit-trio #h2 .face.back, body.digit-trio #m2 .face.back, body.digit-trio #s2 .face.back { border-radius: 0 0 0.14em 0; }
    /* 卡片底色设为透明时，同时去掉毛玻璃、边框与阴影，并收紧数字间距；
       容器宽度跟随字形大小 --digit-size 等比缩放，避免字体缩小时间隙显宽 */
    body.digit-clear .digit {
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      border-color: transparent;
      box-shadow: none;
      width: calc(0.62em * var(--digit-size, 1));
      margin: 0 var(--digit-gap);
    }
    body.digit-clear .colon {
      width: calc(0.33em * var(--digit-size, 1));
      margin: 0;
    }
    /* 3 格（参考翻页时钟样式）：时/分/秒各成一组，组内两位数字是相邻的独立面板——
       中间留发丝级缝隙、内角为方、外角为圆，面板边框与投影保持完整，组间由冒号分隔；
       容器宽度同样跟随 --digit-size 缩放，与 0 格保持一致的视觉比例 */
    body.digit-trio .digit {
      width: calc(0.72em * var(--digit-size, 1));
      aspect-ratio: auto;
      height: calc(1em / 0.72);
    }
    body.digit-trio .colon {
      width: calc(0.50em * var(--digit-size, 1));
      margin: 0 0.02em;
    }
    body.digit-trio #h1, body.digit-trio #m1, body.digit-trio #s1 {
      border-radius: 0.14em 0 0 0.14em;
      margin-right: calc(0.01em + var(--digit-gap));
    }
    body.digit-trio #h2, body.digit-trio #m2, body.digit-trio #s2 {
      border-radius: 0 0.14em 0.14em 0;
      margin-left: calc(0.01em + var(--digit-gap));
    }
    /* 时钟字体切换：只作用于数字、冒号与指针表盘小时数字，日期与每日一言保持默认字体 */
    body.font-dseg .digit, body.font-dseg .colon,
    body.font-dseg .analog-clock .hour-num { font-family: 'DSEG7-Classic', ui-monospace, monospace; }
    /* 数码管字形的 1/4 没有顶部横段，卡片顶部 inset 高光叠加边框会孤立成"亮线残影"，去掉高光让顶边与其余边一致；
       数字模式（0 格透明）本就没有卡片，需排除，否则会盖掉 digit-clear 的 box-shadow: none */
    body.font-dseg:not(.digit-clear) .digit { box-shadow: var(--shadow); }
    body.font-orbitron .digit, body.font-orbitron .colon,
    body.font-orbitron .analog-clock .hour-num { font-family: 'Orbitron', 'Helvetica Neue', sans-serif; }
    body.font-mono .digit, body.font-mono .colon,
    body.font-mono .analog-clock .hour-num { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    body.font-rajdhani .digit, body.font-rajdhani .colon,
    body.font-rajdhani .analog-clock .hour-num { font-family: 'Rajdhani', 'Helvetica Neue', sans-serif; }
    body.font-bebas .digit, body.font-bebas .colon,
    body.font-bebas .analog-clock .hour-num { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; }
    body.font-audiowide .digit, body.font-audiowide .colon,
    body.font-audiowide .analog-clock .hour-num { font-family: 'Audiowide', sans-serif; }
    /* 旧版"翻转时钟"：整张卡片翻一下（0.6s，中间侧立变暗），数字在动画开始时就替换 */
    .digit.card-flip { animation: card-flip 0.6s ease-in-out; }
    @keyframes card-flip {
      0%   { transform: perspective(700px) rotateX(0deg); }
      50%  { transform: perspective(700px) rotateX(-90deg); filter: brightness(0.7); }
      100% { transform: perspective(700px) rotateX(0deg); }
    }
    /* 翻板 180° 翻落（GPU transform）与三层阴影带起伏（关键帧数值照搬 clockhub） */
    @keyframes flip-down {
      from { transform: rotateX(0); }
      to { transform: rotateX(-180deg); }
    }
    /* 分段显示共用关键帧：在侧立点（50%≈90°）切换 —— 正面隐/旧下半隐走 half-hide，
       背面显/新上半显走 half-show，两面数字交接都发生在翻板侧立、视觉最窄的瞬间 */
    @keyframes half-hide {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }
    @keyframes half-show {
      0%, 49% { opacity: 0; }
      50%, 100% { opacity: 1; }
    }
    @keyframes shade-mid {
      0% { opacity: 0; }
      15% { opacity: 0.15; }
      35% { opacity: 0.4; }
      50% { opacity: 0.5; }
      65% { opacity: 0.4; }
      85% { opacity: 0.15; }
      100% { opacity: 0; }
    }
    @keyframes shade-dark {
      0% { opacity: 0; }
      20% { opacity: 0.2; }
      40% { opacity: 0.5; }
      50% { opacity: 0.6; }
      60% { opacity: 0.5; }
      80% { opacity: 0.2; }
      100% { opacity: 0; }
    }
    @keyframes shade-bottom {
      0% { opacity: 0; }
      20% { opacity: 0.1; }
      40% { opacity: 0.2; }
      50% { opacity: 0.3; }
      60% { opacity: 0.2; }
      80% { opacity: 0.1; }
      100% { opacity: 0; }
    }
    .colon {
      flex: none;
      width: 0.32em;
      font-size: calc(1em * var(--digit-size, 1));
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.2em;
      margin: 0 0.02em;
      transition: font-size 0.4s ease;
    }
    .colon::before, .colon::after {
      content: '';
      width: 0.14em;
      height: 0.14em;
      border-radius: 50%;
      background: var(--clock-text);
      transition: background 0.45s ease;
    }
    /* AM/PM：跟随秒数右侧、顶部基线对齐（更靠近时钟上缘），不悬浮在时钟上方 */
    .ampm-badge {
      flex: none;
      align-self: flex-start;
      margin: 0.22em 0 0 0.18em;
      font-size: calc(0.2em * var(--digit-size, 1));
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.06em;
      color: var(--clock-text);
      display: none;
      transition: color 0.45s ease, font-size 0.4s ease;
    }
    body.h12 .ampm-badge { display: block; }

    .date-line {
      position: relative;
      z-index: 2;
      display: none;
      font-size: clamp(14px, 2.4cqw, 22px);
      font-weight: 700;
      color: var(--clock-text);
      letter-spacing: 0.12em;
      /* 日期上移，拉开与下方时钟的距离 */
      margin-bottom: clamp(12px, 2.6cqh, 24px);
      transition: color 0.45s ease;
    }
    body.show-date .date-line { display: block; }

    /* 每日一言：时钟下方，与时钟的距离和日期一致 */
    .quote-line {
      position: relative;
      z-index: 2;
      display: none;
      max-width: 82%;
      text-align: center;
      font-size: clamp(12px, 2cqw, 18px);
      font-weight: 500;
      line-height: 1.7;
      color: var(--clock-text);
      opacity: 0.85;
      letter-spacing: 0.08em;
      margin-top: clamp(12px, 2.6cqh, 24px);
      transition: color 0.45s ease;
    }
    body.show-quote .quote-line { display: block; }

    /* ========== 指针式时钟（悬浮无底盘：数字 + 刻度 + 两段式指针） ========== */
    .analog-clock {
      position: relative;
      z-index: 2;
      display: none;
      /* 宽度定死 + aspect-ratio 保证正圆（只设高度会被块级宽度撑成椭圆）；
         时钟大小滑杆的 --clock-scale 对指针表盘同样生效 */
      width: calc(min(72cqh, 72cqw) * var(--clock-scale, 1));
      aspect-ratio: 1;
      /* 表盘尺寸基准字号：数字、指针粗细都按表盘大小等比缩放 */
      font-size: calc(min(72cqh, 72cqw) * 0.125 * var(--clock-scale, 1));
      color: var(--clock-text);
    }
    body.analog .analog-clock { display: block; }
    body.analog .clock { display: none; }
    /* 「时钟位置=不显示」对数字 / 指针两种样式同时生效 */
    body.hide-clock .analog-clock { display: none; }
    /* 时钟位置四角模式：脱离中央流，绝对定位到舞台对应角
       （z-index:1 低于全屏/齿轮/播放按钮的 3/5，重叠时按钮仍可点击） */
    /* 时钟位置：四角模式脱离中央流；正上/正下把日期让位给时钟
       （z-index:1 低于全屏/齿轮/播放按钮的 3/5，重叠时按钮仍可点击） */
    body.pos-tl .clock, body.pos-tr .clock,
    body.pos-bl .clock, body.pos-br .clock,
    body.pos-top .clock, body.pos-bottom .clock,
    body.pos-tl .analog-clock, body.pos-tr .analog-clock,
    body.pos-bl .analog-clock, body.pos-br .analog-clock,
    body.pos-top .analog-clock, body.pos-bottom .analog-clock {
      position: absolute;
      z-index: 1;
    }
    body.pos-tl .clock, body.pos-tl .analog-clock { top: 5%; left: 3.5%; }
    body.pos-tr .clock, body.pos-tr .analog-clock { top: 5%; right: 3.5%; }
    body.pos-bl .clock, body.pos-bl .analog-clock { bottom: 5%; left: 3.5%; }
    body.pos-br .clock, body.pos-br .analog-clock { bottom: 5%; right: 3.5%; }
    body.pos-top .clock, body.pos-top .analog-clock { top: 4%; left: 50%; transform: translateX(-50%); }
    body.pos-bottom .clock, body.pos-bottom .analog-clock { bottom: 4%; left: 50%; transform: translateX(-50%); }
    body.pos-tl .clock, body.pos-tr .clock,
    body.pos-bl .clock, body.pos-br .clock,
    body.pos-top .clock, body.pos-bottom .clock { width: auto; }
    /* 正上/正下模式下日期让位，避免和时钟重叠 */
    body.pos-top .date-line, body.pos-top .quote-line { display: none; }
    /* 外圈圆环 */
    .analog-clock::after {
      content: '';
      position: absolute;
      inset: 2.5%;
      border: 0.1em solid var(--clock-text);
      border-radius: 50%;
      opacity: 0.5;
      pointer-events: none;
    }
    /* 小时数字 1-12（JS 按三角函数定位） */
    .analog-clock .hour-num {
      position: absolute;
      transform: translate(-50%, -50%);
      font-size: 1em;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    /* 分钟刻度线（小时位置不画线，由小时数字占据） */
    .analog-clock .stick {
      position: absolute;
      left: 50%;
      top: 0;
      width: 0.03em;
      height: 100%;
      transform: translateX(-50%) rotate(var(--r));
      pointer-events: none;
    }
    .analog-clock .stick::before {
      content: '';
      position: absolute;
      top: 5.5%;
      left: 0;
      width: 100%;
      height: 3%;
      border-radius: 1px;
      background: var(--clock-text);
      opacity: 0.34;
    }
    /* 指针锚点在圆心，整根指针随锚点旋转 */
    .analog-clock .hand-anchor {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      transform: rotate(0deg);
      z-index: 1;
    }
    .analog-clock .seg {
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, -100%);
      border-radius: 999px;
      background: var(--clock-text);
    }
    /* 细尾段 + 粗身段，粗段底部留隙，形成两段式层次 */
    .analog-clock .seg.thin { width: 0.11em; height: 1.25em; }
    .analog-clock .seg.fat {
      width: 0.25em;
      height: 1.45em;
      transform: translate(-50%, -100%) translateY(-0.45em);
    }
    .analog-clock .hand-anchor.min-anchor .seg.fat { height: 2.8em; }
    /* 秒针：主调色细针，尾端越过圆心；回弹跳秒动画放在锚点上 */
    .analog-clock .hand-anchor.sec-anchor {
      z-index: 2;
      transition: transform 0.2s cubic-bezier(0.4, 2.1, 0.55, 1);
    }
    .analog-clock .seg.second {
      width: 0.05em;
      height: 4.1em;
      background: var(--accent);
      transform: translate(-50%, -100%) translateY(0.6em);
    }
    /* 中心三层同心圆点 */
    .analog-clock .dot {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      z-index: 3;
    }
    .analog-clock .dot.d1 { width: 0.3em; height: 0.3em; background: var(--clock-text); }
    .analog-clock .dot.d2 { width: 0.2em; height: 0.2em; background: var(--accent); }
    .analog-clock .dot.d3 { width: 0.1em; height: 0.1em; background: var(--clock-text); }

    /* ========== 场景条（横向滚动卡片） ========== */
    .scenes {
      position: relative;
      flex: none;
      width: var(--pw);
    }
    .scenes-track {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      /* 顶部留 4px 内边距：hover 上移时不至于被轨道裁掉卡片上边线 */
      padding-top: 4px;
      scrollbar-width: none;
    }
    .scenes-track::-webkit-scrollbar { display: none; }
    .scene {
      position: relative;
      flex: 0 0 148px;
      height: 112px;
      border-radius: 15px;
      overflow: hidden;
      border: 1px solid transparent;
      background: var(--card-bg);
      cursor: pointer;
      padding: 0;
      font-family: inherit;
      transition: border-color 0.25s, transform 0.15s;
    }
    .scene:hover { transform: translateY(-2px); }
    /* 场景条末尾的上传卡：虚线框，点击打开文件选择 */
    .scene-upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1.5px dashed var(--card-border);
      background: rgba(127, 182, 158, 0.05);
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 600;
      transition: border-color 0.25s, color 0.25s, transform 0.15s;
    }
    .scene-upload:hover { border-color: var(--accent); color: var(--text-color); }
    /* 当前场景：高亮描边 + 左上角打勾标记 */
    .scene.on { border-color: var(--accent); }
    .scene.on::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 2;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: var(--accent);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314201a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }
    body.light .scene.on::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    }
    .scene img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* 卡片底部信息条：渐变压暗 + 场景名 + 播放图标 */
    .scene-info {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding: 22px 10px 9px;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.68));
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      text-align: left;
    }
    .scene-info svg { flex: none; opacity: 0.9; }

    /* 场景条溢出时左右两侧的滚动按钮 */
    .scenes-prev, .scenes-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(0, 0, 0, 0.45);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      color: #fff;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s, visibility 0.25s, background 0.25s;
    }
    .scenes-prev { left: 4px; }
    .scenes-next { right: 4px; }
    .scenes-prev.show, .scenes-next.show { opacity: 1; visibility: visible; }
    .scenes-prev:hover, .scenes-next:hover { background: rgba(0, 0, 0, 0.65); }

    /* 纯色背景卡：与上传卡同款的虚线样式，整卡点击打开取色器 */
    .scene.scene-color {
      border: 1.5px dashed var(--card-border);
      /* 跟随选定的背景颜色，未选过颜色时显示默认底色 */
      background: var(--scene-color, rgba(127, 182, 158, 0.05));
      transition: border-color 0.25s, transform 0.15s, background 0.3s;
    }
    .scene.scene-color:hover { border-color: var(--accent); }
    .scene.scene-color.on { border: 1px solid var(--accent); }
    .color-full {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      transition: color 0.25s;
    }
    .color-full:hover { color: var(--text-color); }
    .color-full input[type="color"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }

    /* 顶栏设置图标 */
    .icon-btn {
      flex: none;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--card-border);
      border-radius: 50%;
      background: rgba(127, 182, 158, 0.05);
      color: var(--text-color);
      cursor: pointer;
      transition: border-color 0.25s, background 0.3s;
    }
    .icon-btn:hover { border-color: var(--accent); background: rgba(127, 182, 158, 0.14); }

    /* 设置弹窗 */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(0, 0, 0, 0.45);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0s 0.3s;
    }
    .modal-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
    .modal {
      width: min(560px, 100%);
      max-height: min(84vh, 720px);
      overflow-y: auto;
      background: var(--card-bg);
      -webkit-backdrop-filter: blur(28px);
      backdrop-filter: blur(28px);
      border: 1px solid var(--card-border);
      border-radius: 24px;
      padding: 22px 26px 24px;
      box-shadow: var(--shadow);
      transform: translateY(14px) scale(0.98);
      transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.3, 1);
    }
    .modal-overlay.open .modal { transform: none; }
    /* 弹窗滚动条：细滑块、透明轨道、hover 高亮（WebKit + Firefox） */
    .modal { scrollbar-width: thin; scrollbar-color: var(--card-border) transparent; }
    .modal::-webkit-scrollbar { width: 8px; }
    .modal::-webkit-scrollbar-track { background: transparent; }
    .modal::-webkit-scrollbar-thumb {
      background-color: var(--card-border);
      border-radius: 8px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    .modal::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .modal-title { font-size: 16px; font-weight: 700; }
    .modal-close {
      flex: none;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--card-border);
      border-radius: 10px;
      background: rgba(127, 182, 158, 0.05);
      color: var(--text-color);
      cursor: pointer;
      transition: border-color 0.25s, background 0.3s;
    }
    .modal-close:hover { border-color: var(--accent); background: rgba(127, 182, 158, 0.14); }
    body.modal-open { overflow: hidden; }

    .section-label {
      font-size: 12px;
      color: var(--text-secondary);
      letter-spacing: 0.2em;
      margin: 12px 0 8px;
    }
    .option {
      background: rgba(127, 182, 158, 0.05);
      border: 1.5px solid var(--card-border);
      border-radius: 14px;
      color: var(--text-color);
      cursor: pointer;
      transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s, background 0.45s ease;
    }
    .option:hover { transform: translateY(-1px); }
    .option.selected {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent);
    }

    /* 颜色选择项：嵌在显示区内，样式与相邻按钮一致 */
    .color-field {
      height: 46px;
      padding: 0 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      white-space: nowrap;
      cursor: pointer;
      overflow: hidden;
    }
    .color-field input[type="color"] {
      width: 20px;
      height: 20px;
      flex: none;
      border: none;
      border-radius: 5px;
      background: none;
      padding: 0;
      cursor: pointer;
    }
    .color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    .color-field input[type="color"]::-webkit-color-swatch {
      border: 1px solid var(--card-border);
      border-radius: 6px;
    }

    .display-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .display-option {
      height: 46px;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
    }

    /* 设置区下拉选择框 */
    .sel {
      margin-left: auto;
      height: 36px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1.5px solid var(--card-border);
      background: transparent;
      color: var(--text-color);
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      outline: none;
      transition: border-color 0.25s;
    }
    .sel:hover, .sel:focus { border-color: var(--accent); }
    .sel option { color: #2c2822; }
    /* 多控件行：卡片 / 字体 / 间隔三个下拉框同行均分 */
    .size-row.multi { gap: 8px; }
    .size-row.multi .sel { flex: 1; min-width: 0; margin-left: 0; }

    /* 自定义背景外链输入 */
    .url-row {
      display: flex;
      gap: 10px;
    }
    .url-row input[type="url"] {
      flex: 1;
      min-width: 0;
      height: 46px;
      padding: 0 14px;
      border-radius: 14px;
      border: 1.5px solid var(--card-border);
      background: rgba(127, 182, 158, 0.05);
      color: var(--text-color);
      font-size: 13.5px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.25s;
    }
    .url-row input[type="url"]:focus { border-color: var(--accent); }
    .url-row input[type="url"]::placeholder { color: var(--text-secondary); }
    .url-apply {
      flex: none;
      height: 46px;
      padding: 0 22px;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
    }
    .url-hint {
      margin-top: 8px;
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    /* 自定义背景：上传本地图片按钮 */
    .upload-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      height: 46px;
      margin-top: 10px;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
    }

    /* 时钟大小滑杆 */
    .size-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 10px;
      padding: 12px 14px;
      background: rgba(127, 182, 158, 0.05);
      border: 1.5px solid var(--card-border);
      border-radius: 14px;
    }
    .size-label { font-size: 13px; font-weight: 600; flex: none; }
    .size-value {
      font-size: 12px;
      color: var(--text-secondary);
      flex: none;
      width: 42px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .size-row input[type="range"] {
      flex: 1;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      border-radius: 999px;
      background: var(--card-border);
      outline: none;
      cursor: pointer;
    }
    .size-row input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--accent);
      border: none;
      cursor: pointer;
    }
    .size-row input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--accent);
      border: none;
      cursor: pointer;
    }

    /* 全屏状态：player 脱离文档流铺满视口，其余元素隐藏 */
    body.is-fs .header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity 0.5s, visibility 0s 0.5s;
    }
    body.is-fs .player {
      position: fixed;
      inset: 0;
      z-index: 30;
      width: 100%;
      aspect-ratio: auto;
      border: none;
      border-radius: 0;
    }
    body.is-fs .player-actions,
    body.is-fs .player-gear,
    body.is-fs .player-sound,
    body.is-fs .scenes,
    body.is-fs .intro { display: none; }
    body.is-fs .date-line { font-size: clamp(18px, 2.4cqw, 28px); }
    .fs-hint {
      position: fixed;
      top: 26px;
      left: 50%;
      transform: translateX(-50%);
      padding: 9px 20px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.5);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      color: #fff;
      font-size: 13px;
      letter-spacing: 0.08em;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.6s;
      z-index: 40;
    }
    .fs-hint.show { opacity: 1; }

    /* 页面底部说明文字：分隔线与顶栏下划线一样通栏 100%，文字仍对齐中轴列宽 */
    .intro {
      flex: none;
      border-top: 1px solid var(--card-border);
      color: var(--text-secondary);
      transition: color 0.45s ease, border-color 0.45s ease;
    }
    .intro p {
      width: min(var(--col), 96%);
      margin: 0 auto;
      padding: 26px 0 42px;
      font-size: 13.5px;
      line-height: 1.9;
      text-align: justify;
    }

    @media (max-width: 560px) {
      .modal { padding: 12px 12px 14px; }
      /* 时钟大小滑杆是 flex 项，默认 min-width:auto 不收缩会把整行撑出面板；
         min-width:0 即可收缩，与位置下拉在一行内保持各占一半，不换行 */
      .size-row.multi input[type="range"] { min-width: 0; }
      .intro p { padding: 20px 0 34px; }
      .scene { flex-basis: 128px; height: 98px; }
      .player-gear { top: 10px; right: 12px; }
    }
    /* 窄窗口 / 移动端恢复按视口百分比自适应 */
    @media (max-width: 1080px) {
      :root { --pw: min(var(--col), 96%); }
    }
    @media (max-height: 720px) {
      .section-label { margin: 8px 0 6px; }
      .color-field { height: 40px; }
      .display-option { height: 40px; }
      .scene { flex-basis: 132px; height: 96px; }
    }