:root {
    --bg: #0f0f12;
    --bg-soft: #15151b;
    --bg-elevated: rgba(255,255,255,0.045);
    --bg-elevated-strong: rgba(255,255,255,0.072);
    --line: rgba(255,255,255,0.11);
    --line-strong: rgba(255,255,255,0.2);
    --text: #f4f0e8;
    --text-soft: rgba(244,240,232,0.76);
    --text-faint: rgba(244,240,232,0.5);
    --text-ghost: rgba(244,240,232,0.38);
    --paper: #f5efe3;
    --shadow: 0 24px 80px rgba(0,0,0,0.36);
    --radius-xl: 32px;
    --radius-lg: 24px;

    /* ===== .sr-only ===== */
    --radius-md: 18px;
    --radius-sm: 14px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    /* 日视图专属：页面背景色 + 自适应文字色 */
    --birth: #888888;
    --ink: #ffffff;
    --ink-rgb: 255,255,255;
    /* 毛玻璃 */
    --glass-bg: rgba(16,16,22,0.30);
    --glass-line: rgba(255,255,255,0.16);
    --glass-shadow: 0 10px 30px rgba(0,0,0,0.20);
    /* 按钮玻璃外壳（桌面端统一质感，与移动端 .mp-fbtn / 小程序 footVarsFor 同源）—— 两档：
         · 「跟随底色」档 = var(--foot-*) 由 app_*.js 按按钮背后的底色现算（日视图=当天诞色，月/年=站点深色）；
            规则里的兜底值直接写成「深底档」⇒ JS 未就绪时也不会闪错色。
         · 「固定深底」档 = --gls2-* 给弹窗 / 页脚 / 日期面板 —— 它们永远落在深色底上，不该跟诞生色跑。 */
    --gls2-fill: rgba(166,170,171,0.34);
    --gls2-hi: rgba(255,255,255,0.42);
    --gls2-glow: rgba(255,255,255,0.18);
    --gls2-lo: rgba(255,255,255,0.08);
    --gls2-edge: rgba(255,255,255,0.16);
    --gls2-hover: rgba(166,170,171,0.55);
    /* 玻璃「材质」两层（2026-09-20 新增，来源 = aave.com/design/building-glass-for-the-web
       调参面板里的 Depth / Curvature 与 Specular Angle）——
       ⚠️ 它们只描述「材质的折光方式」，**与颜色无关** ⇒ 叠在任何底色之上都成立：
          ① --glass-depth 竖向厚度渐变：上薄下厚，玻璃下方更密 ⇒ 读出「这块玻璃有厚度」；
          ② --glass-sheer 斜向镜面微光：自左上起、向右淡出 —— 原实现的高光是一条**水平硬线**，
             这里补的是一片「湿光」，两者叠加才是真玻璃的读法。
       ⚠️ 层序 = 先写的在最上 ⇒ sheer 压 depth 压 tint（tint = --foot-glass / --gls2-fill）。
       ⚠️ 改 tint 的混色 / α（--foot-*、--gls2-*）**不需要**动这两行；反之亦然。
       ★ 2026-09-20 第九轮：--glass-depth **已改为按档派生**，由 mobile_*.js 的 glassVarsFor() 运行时
         写到 html 的行内样式上；下面 :root 这一行 = **深底档兜底值**（首帧 / 脚本未跑时用）。
         起因：浅底档玻璃本已比页面深，下半再压 0.055 会让底缘成为画面最深的东西（蘑菇真机「底部的阴影太黑了」）
         ⇒ 浅底档改为 0.028（下半压黑减半），深底档维持 0.055。
         ⚠️ 改这两行要**同时**改 mobile_260909_14.js 的 GLASS_DEPTH_DEEP / GLASS_DEPTH_LIGHT
           和 mobile_260909_9.css 的同名声明（三处同值）。
       ⚠️【角度换算】注释里的「仰角」= 光源相对水平面的夹角；CSS 渐变角度 = 90deg + 仰角。
          45° 仰角 = 135deg（对角斜切）；75° 仰角 = 165deg（**近垂直、仍留 15° 偏斜**）；
          90° 仰角 = 180deg（正垂直，只作参照，产品上不用）。
          改仰角**只动下面这一行**（两份 CSS 的同一行必须同值）。
          · 2026-09-20 第二轮：曾按「仰角 45° → 15°」（135deg → 105deg）改平 —— **基准理解反了**：
            15° 是「更贴水平」而非「更近垂直」。第三轮按蘑菇原意改为 **仰角 75°（165deg）**。
          · ⚠️ 仰角越接近 90°，sheer 方向越贴近 --glass-depth 的竖向过渡（同向叠加 ⇒ 顶更亮、底更暗），
            斜向「镜面感」随之减弱。75° 大致是两者还分得开的上限。 */
    --glass-depth: linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.012) 38%, rgba(0,0,0,0.055) 100%);
    --glass-sheer: linear-gradient(165deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.028) 32%, rgba(255,255,255,0) 56%);
    --page-accent: #7a7f96;
    --page-accent-soft: rgba(140, 150, 178, 0.22);
    --page-accent-deep: rgba(58, 63, 82, 0.28);
    --page-accent-rgb: 122, 127, 150;
    --morph-dur: 820ms;
    --group-dur: 780ms;
    --spread-dur: 820ms;

    /* 页面左右基准留白：顶栏 / 工具栏 / 日主屏「保存图片」按钮**共用同一个值**
       —— 改一处三处同步（≤880px 窄屏档在「响应式」段改写为 20px）。
       ⚠️ 按钮不是直接用它：.day-save 是 absolute 挂在 .day-hero 里，而 .day-hero 自带 24px 内边距，
          所以写成 calc(var(--pad-x) - 24px) —— 结果就是「距视口右边 = 搜索框的右边距」。
       （2026-09-18 蘑菇：桌面端保存图片按钮的右边距要和上面搜索框一样。） */
    --pad-x: 40px;
  }
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}

  /* 自定义属性：驱动「墨水扩散」遮罩半径，使其可被 transition 平滑插值 */
  @property --swatch-spread {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 120%;
  }

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

  /* ===== 可访问性：统一焦点环 ===== */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid rgba(244, 240, 232, 0.75);
    outline-offset: 3px;
    border-radius: 6px;
  }
  @supports not selector(:focus-visible) {
    :focus { outline: 2px solid rgba(244, 240, 232, 0.75); outline-offset: 3px; }
  }

  html, body {
    min-height: 100vh;
    background:
      radial-gradient(circle at 16% 16%, rgba(var(--page-accent-rgb), 0.16), transparent 28%),
      radial-gradient(circle at 82% 18%, rgba(var(--page-accent-rgb), 0.12), transparent 30%),
      radial-gradient(circle at 50% 100%, rgba(var(--page-accent-rgb), 0.14), transparent 42%),
      linear-gradient(180deg, #121217 0%, #0f1014 52%, #0b0c10 100%);
    /* 关键：background 简写只写了渐变图，background-color 会被重置为 transparent；
       iOS 在手势触发布局位移/橡皮筋的瞬间，露出的根区域是透明→显示 iOS 默认纯黑，
       遮罩落定后露出 --bg，于是「先深黑、再变浅」。补一层不透明 --bg 作根底色，
       任何未铺满/橡皮筋露出的区域都显示 --bg 而非纯黑。 */
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  html { overflow-x: hidden; }
  body { overflow-x: visible; }

  /* ===== 氛围光斑（月 / 年视图可见；日视图被色彩背景层覆盖） ===== */
  .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .ambient::before, .ambient::after {
    content: ""; position: absolute; width: 75vw; height: 75vw; border-radius: 50%;
    filter: blur(150px); opacity: 0.18;
    transition: background 1.6s var(--ease);
  }
  .ambient::before { top: -28vw; left: -18vw; background: radial-gradient(circle, var(--ambient-a, rgba(var(--page-accent-rgb), 0.35)), transparent 70%); animation: drift1 26s ease-in-out infinite alternate; }
  .ambient::after  { bottom: -32vw; right: -22vw; background: radial-gradient(circle, var(--ambient-b, rgba(var(--page-accent-rgb), 0.25)), transparent 70%); animation: drift2 30s ease-in-out infinite alternate; }
  @keyframes drift1 { to { transform: translate(8vw, 6vw) scale(1.12); } }
  @keyframes drift2 { to { transform: translate(-7vw, -5vw) scale(1.06); } }

  /* ===== 总布局 ===== */
  .app { position: relative; z-index: 1; min-height: 100vh; }

  /* ---- 拆分页面背景：顶部至 hex 按钮采用当天诞生色，三组配色至页脚转为暗色 ---- */
  body.day-active .app-head { background: var(--birth); transition: background .6s var(--ease); }
  body.day-active.tb-scrolled .app-head { background: transparent; }

  /* ---- 头部容器（顶栏 + 工具栏）：v260811_1_1 起不再吸顶，整页随页面滚动 ---- */
  .app-head { position: relative; z-index: 40; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px var(--pad-x);   /* = --pad-x，与工具栏 / 保存图片按钮同源 */
    border-bottom: 1px solid var(--line);
  }
  .brand-lockup { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
  .brand-name { display: flex; align-items: baseline; gap: 6px; }
  .brand-mark { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px, 3vw, 38px); font-style: italic; letter-spacing: 0.04em; line-height: 1; color: var(--text); }
  .brand-cn { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.06em; line-height: 1; color: var(--text); }
  .brand-note { font-size: 12px; color: var(--text-soft); font-weight: 500; letter-spacing: 0.6em; text-transform: uppercase; }
  /* 英文模式下品牌标注缩小字间距 */
  html[data-lang="en"] .brand-note { letter-spacing: 0.14em; }

  .series-nav { display: flex; align-items: center; cursor: pointer; }
  .series-active {
    font-size: 13px; letter-spacing: 0.14em; color: var(--text);
    cursor: pointer; font-weight: 500;
    transition: opacity .35s var(--ease);
  }
  .series-active:hover { opacity: 0.75; }

  /* ---- 语言切换按钮（已移至页脚） ---- */
  .topbar-right { display: flex; align-items: center; gap: 32px; }
  /* v1.4.0：与移动端 .mp-lang 同款「镂空描边胶囊」——**刻意不参与玻璃**（蘑菇 2026-09-18 指定）。
     移动端判据：background:none + 1px 描边 .35 + 文字 .85，两者都跟随当前墨色。
     ⚠️ 不能无条件写成 var(--ink-rgb)：切到月/年视图时 app 只摘 day-active、**不清 body 上的 --ink-rgb**
        ⇒ 若上一个日视图是浅底（ink=43,43,46），描边/文字会变深色落在深色底上 ⇒ 隐形。
        所以沿用本文件既有写法：深底兜底走奶油色，仅 day-active 时才切到 --ink-rgb。 */
  .lang-switch {
    font-family: 'Noto Serif SC', serif;
    font-size: 11px; letter-spacing: 0.08em;   /* v260826_1：全局统一 11px */
    background: none;
    color: rgba(244,240,232,0.85);
    border: 1px solid rgba(244,240,232,0.35);
    border-radius: 20px;
    padding: 3px 10px;                          /* v260826_1：按钮收窄 */
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
    line-height: 1.4;
    min-width: 26px;
    text-align: center;
  }
  .lang-switch:hover {
    background: none;
    color: #f4f0e8;
    border-color: rgba(244,240,232,0.62);
  }
  body.day-active .lang-switch { color: rgba(var(--ink-rgb), 0.85); border-color: rgba(var(--ink-rgb), 0.35); }
  body.day-active .lang-switch:hover { color: rgb(var(--ink-rgb)); border-color: rgba(var(--ink-rgb), 0.62); }
  /* 顶栏语言选择下拉 */
  .lang-wrap { position: relative; display: inline-flex; }
  .lang-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: #141E21; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-sm);
    padding: 6px; min-width: 90px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    z-index: 100;
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  }
  .lang-dropdown.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .lang-dropdown button {
    display: block; width: 100%;
    font-family: inherit; font-size: 12px; letter-spacing: 0.08em;
    background: transparent; border: none; color: var(--text-soft);
    padding: 8px 16px; border-radius: 8px; cursor: pointer; text-align: left;
    transition: background .2s var(--ease), color .2s var(--ease);
  }
  .lang-dropdown button:hover { background: rgba(255,255,255,0.08); color: var(--text); }
  .lang-dropdown button.is-active { color: var(--text); font-weight: 600; background: rgba(255,255,255,0.05); }
  /* 面板背景固定深色 #141E21,按钮文字须始终为浅色以与玻璃对比 —— 不跟随 --ink-rgb */

  /* ---- 紧凑视图切换按钮（桌面隐藏，移动端左侧显示） ---- */
  .tb-view-btn {
    display: none;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-line);
    color: var(--text-soft);
    font-family: 'Noto Serif SC', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    padding: 9px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  }
  .tb-view-btn:hover {
    border-color: rgba(244,240,232,0.3);
    background: rgba(255,255,255,0.09);
    color: var(--text);
  }
  body.day-active .tb-view-btn {
    background-color: rgba(var(--ink-rgb), 0.08);
    border-color: rgba(var(--ink-rgb), 0.28);
    color: rgba(var(--ink-rgb), 0.82);
  }
  body.day-active .tb-view-btn:hover {
    background-color: rgba(var(--ink-rgb), 0.14);
    border-color: rgba(var(--ink-rgb), 0.42);
    color: rgb(var(--ink-rgb));
  }

  /* =========================================================
     工具栏 v260720_2_3：三栏式布局（左右平衡，内容居中）
     [左] 空占位  |  [中] 日月年 + ‹今天›  |  [右] 搜索按钮
     ========================================================= */
  .toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px var(--pad-x) 15px;   /* = --pad-x，与顶栏 / 保存图片按钮同源 */
    border-radius: 0;
    margin-bottom: 0;
    max-height: 200px;
    overflow: visible;
    transition: max-height .4s var(--ease), opacity .4s var(--ease), padding .4s var(--ease), margin .4s var(--ease);
  }
  .toolbar.tb-hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    border: none;
  }

  /* 三栏：左右 flex:1 使中间自然居中 */
  .toolbar-left { flex: 1 1 0; min-width: 0; }
  .toolbar-center { display: flex; align-items: center; justify-content: center; gap: 12px; flex: 0 1 auto; }
  /* gap 12px = 与 .toolbar-center / .seg-group 同值，供「下载图片」与搜索框之间留白（第十轮） */
  .toolbar-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }

  /* ---- 搜索按钮 ---- */
  .date-pick { position: relative; display: flex; align-items: center; }
  .dp-search-btn {
    display: inline-flex; align-items: center; gap: 6px;
    /* ⚠️ **必须显式写 `border: 0`**，不能只是删掉原来的 `border: 1px solid transparent` ——
       `<button>` 有 UA 默认边框（Chrome = 2px outset），**删掉声明会回落成 2px 可见边框**。
       而那条 1px 透明边框同样不可用：它只对 `background`（background-clip: border-box）等价；
       **`box-shadow` 的 `inset` 层只在 padding box 内绘制、永远不覆盖 border** ⇒
       上缘高光被迫下移 1px、下缘暗带被迫上移 1px（与无 border 的 .tb-nav-group 不齐）。
       2026-09-18 全部改为「border:0 + padding 各 +1px 补尺寸」，外尺寸与内容位置逐像素不变。 */
    border: 0;
    color: var(--foot-ink, #ffffff); font-family: inherit; font-size: 12px;
    padding: 10px 19px; border-radius: 999px; cursor: pointer;
    letter-spacing: 0.1em; font-weight: 700;
    transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  }
  .dp-search-btn:hover {
    background: var(--foot-hover, var(--gls2-hover));
    color: var(--foot-ink, #ffffff);
  }
  .dp-search-btn .dp-icon { width: 16px; height: 16px; opacity: 0.65; transition: opacity .35s var(--ease); }
  .dp-search-btn:hover .dp-icon { opacity: 1; }
  /* 英文模式下搜索框文案缩小 */
  html[data-lang="en"] .dp-search-btn { font-size: 11px; letter-spacing: 0.04em; }

  /* ---- 展开面板 ---- */
  .dp-panel {
    position: fixed;
    width: auto; min-width: 0;
    background: #141E21;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(0.97);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    z-index: 100;
    transform-origin: top right;
  }
  .dp-panel.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .dp-panel-inner { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; border-radius: inherit; overflow: hidden; }
  .dp-panel-row { display: flex; align-items: center; gap: 8px; }
  .dp-label-row { justify-content: center; }
  .dp-label { font-family: 'Cormorant Garamond', serif; font-size: 13.2px; color: var(--text); letter-spacing: 0.12em; white-space: nowrap; }
  .dp-panel-controls { gap: 8px; width: auto; }
  .dp-panel-controls select {
    appearance: none; -webkit-appearance: none;
    border: 0;   /* ⚠️ 必须显式：<select> 的 UA 边框是 1px */
    color: #ffffff;
    font-family: inherit; font-size: 14px; padding: 12px 31px 12px 17px; border-radius: 999px;
    cursor: pointer; letter-spacing: 0.1em; flex: none; width: auto; min-width: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23f4f0e8' stroke-opacity='0.6' stroke-width='1.4' d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat; background-position: right 13px center;   /* padding box 外扩 1px ⇒ 箭头同步 1px */
    transition: border-color .35s var(--ease), background-color .35s var(--ease);
  }
  .dp-panel-controls select:hover { background-color: var(--gls2-hover); }
  .dp-panel-controls select:focus-visible { outline: none; }
  .dp-panel-controls select.is-empty { color: var(--text-faint); }

  /* ---- 分段控件（居中） ---- */
  .seg-group { display: flex; align-items: center; gap: 12px; }
  .segmented {
    /* ⚠️ 显式 `border: 0` + padding 4px → 5px 补偿（外尺寸 210×43 不变）—— 原因见 .dp-search-btn 的注释 */
    display: inline-flex; align-items: center; border-radius: 999px; padding: 5px; position: relative;
    gap: 4px; border: 0;
  }
  .segmented .seg {
    font-family: inherit; background: transparent; border: none; color: var(--foot-ink, #ffffff);
    font-size: 13px; padding: 7px 18px; border-radius: 999px; cursor: pointer;
    letter-spacing: 0.14em; transition: color .35s var(--ease); position: relative; z-index: 2;
    display: flex; align-items: center; gap: 6px; min-width: 64px; justify-content: center;
    font-weight: 700;
  }
  /* 中文模式下日月年去字间距，视觉大小与今天匹配 */
  html[data-lang="zh"] .segmented .seg { letter-spacing: 0.04em; }
  .segmented .seg.active { color: var(--foot-ink, #ffffff); font-weight: 700; }
  .segmented .indicator {
    /* top/bottom 4px → 5px：包含块（padding box）外沿随「去 border」外扩 1px，不改胶囊会整体上移 1px */
    position: absolute; top: 5px; bottom: 5px; border-radius: 999px;
    background: var(--glass-sheer), var(--glass-depth), var(--foot-hover, var(--gls2-hover));
    box-shadow: inset 0 .75px 0 var(--foot-hi, var(--gls2-hi)), 0 1px 4px rgba(0,0,0,0.12);
    transition: left .5s var(--ease), width .5s var(--ease);
    z-index: 1;
  }

  /* ---- 工具栏导航按钮（与日月年同处 center，紧邻右侧） ---- */
  /* ‹ 今天 › 合并成**一整块连续玻璃**（对应移动端底部右组的「无缝连排」）：
     圆角由容器 overflow:hidden 统一裁切，内部三格各自透明、hover 时铺一层「玻璃加深色」。
     ⇒ 与移动端同一个坑的同一条铁律：元素自身不挂圆角，圆角永远归容器。 */
  .tb-nav-group {
    display: flex; align-items: stretch; gap: 0; flex-shrink: 0;
    /* ★ 2026-09-20 第十轮（蘑菇：「左右箭头 hover 区域的形状改成和按钮一致，
       左边或右边是椭圆形的」）：原写法 `padding: 0 4px` 让 hover 高光的**方角矩形**
       左右边落在 padding box 上 ⇒ 胶囊两端各剩一道没被点亮的月牙、高光本身仍是方的。
       改为容器 0 内边距，把这两侧各 4px 挪进首尾按钮的外侧内边距（下面两行）：
       整组外尺寸、三段盒子位置与图标落点**逐像素不变**；而 hover 高光一直铺到胶囊两端，
       再被 overflow:hidden 按圆角裁切 ⇒ 外侧自然成椭圆。 */
    padding: 0;
    border-radius: 999px;
    overflow: hidden;
  }
  .tb-nav-btn {
    background: none; border: none; color: var(--foot-ink, #ffffff);
    /* v1.4.0：左右箭头由文字「‹ ›」换成 SVG（蘑菇指定的 左_left.svg / 右_right.svg）。
       原字形的宽度 = 22px 字号下约 7.3px；给 svg 16px 后横向 padding 由 10px 收到 6px，
       按钮总宽 27.33px → 28px（+0.67px），整组仅宽 1.34px、分段控件左移 0.67px —— 视觉不可察。 */
    padding: 4px 6px; cursor: pointer;
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    transition: color .3s var(--ease), background .3s var(--ease);
  }
  /* 补偿上面「容器去内边距」的 4px：只给首尾按钮补**外侧**（特异性高于下方媒体查询里的 .tb-nav-btn） */
  .tb-nav-btn:first-child { padding-left: 10px; }    /* 6px 自身 + 4px 原容器左内边距 */
  .tb-nav-btn:last-child  { padding-right: 10px; }   /* 6px 自身 + 4px 原容器右内边距 */
  .tb-nav-btn svg { width: 16px; height: 16px; display: block; }
  .tb-nav-btn:hover { color: var(--foot-ink, #ffffff); background: var(--foot-hover, var(--gls2-hover)); }
  .tb-today-btn {
    /* 保留 1px 占位边框（原来是一条实线）—— 去掉会连带整组矮 2px、工具栏整体上移，
       这里只把它变透明，盒子尺寸与改动前逐像素一致。 */
    border: 1px solid transparent; color: var(--foot-ink, #ffffff);
    background: transparent;
    font-family: inherit; font-size: 13px; padding: 9px 16px; border-radius: 0;
    cursor: pointer; letter-spacing: 0.12em;
    font-weight: 700;
    display: flex; align-items: center;
    transition: color .3s var(--ease), background .3s var(--ease);
  }
  .tb-today-btn:hover { color: var(--foot-ink, #ffffff); background: var(--foot-hover, var(--gls2-hover)); }

  /* ---- 工具栏「下载图片」（v1.4.0 第十轮）----
     原先是贴在日主屏右下角的 .day-save，现搬到搜索框左侧、与搜索键同一行同一档玻璃。
     ⚠️ 只存在于日视图：body 上没有 .day-active（月 / 年视图）时整颗隐藏 ——
        与它原来「长在日主屏里」的可见性等价。
     ⚠️ 形状 = 正圆。尺寸**必须写死 37×37**（= 搜索键在 base 档的外高），见下方注释：
        曾试过「不写死、靠 .toolbar-right 行高撑」的写法，实测 flex 主轴按内容算、只得到 18px 细条。
     ⚠️ 图标处理与 .dp-search-btn 一致：图标 0.65 透明、hover 到 1；按钮本身不做整体降透明。 */
  .tb-save {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; padding: 0;
    /* ⚠️ 尺寸写死 37×37 = 搜索键在 base 档的外高（上下内边距各 10px + 17px 行盒）。
       刻意与紧邻的搜索键**严格同高** —— 一圆一胶囊并排，差 1px 都看得出。
       ⚠️ 不要改成 `aspect-ratio + align-self:stretch`：flex 主轴尺寸仍按内容算，
          实测只会得到「宽 = 图标宽 18px」的细条（2026-09-20 第十轮试过，已回退）。
       ⚠️ 搜索键在 ≤1100px 收成纯图标（外高 32px）⇒ 下方同媒体查询里同步下调，改一处不够。 */
    width: 37px; height: 37px;
    color: var(--foot-ink, #ffffff);
    border: 0;                    /* ⚠️ 必须显式：<button> 的 UA 边框是 2px outset */
    border-radius: 999px;
    cursor: pointer;
    transition: background .35s var(--ease), color .35s var(--ease);
  }
  .tb-save svg { width: 18px; height: 18px; display: block; opacity: 0.65; transition: opacity .35s var(--ease); }
  .tb-save:hover { background: var(--foot-hover, var(--gls2-hover)); }
  .tb-save:hover svg { opacity: 1; }
  body:not(.day-active) .tb-save { display: none; }

  /* ===== 舞台 ===== */
  .stage { position: relative; overflow: hidden; }
  .view {
    position: absolute; inset: 0; padding: 20px 40px 60px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    overflow-y: auto; overflow-x: hidden;
  }
  .view.active { position: relative; inset: auto; overflow: visible; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  #viewDay { transform: none; padding: 0; }
  .view::-webkit-scrollbar { width: 8px; }
  .view::-webkit-scrollbar-track { background: transparent; }
  .view::-webkit-scrollbar-thumb { background: rgba(244,240,232,0.12); border-radius: 4px; }
  .view::-webkit-scrollbar-thumb:hover { background: rgba(244,240,232,0.22); }

  /* =========================================================
     Day 视图（260720_2_2）：全页色彩背景 + 居中诞生色信息 + 纵向三组配色
     导航按钮已上移至工具栏右侧，此处不再含 .day-nav
     ========================================================= */
  .day-stage {
    position: relative; z-index: 2; width: 100%;
    color: rgb(var(--ink-rgb));
    transition: color .8s var(--ease);
  }
  .day-hero {
    position: relative;
    display: flex; flex-direction: column;
    padding: 26px 24px 24px; text-align: center;
  }
  body.day-active .day-hero { background: var(--birth); transition: background .6s var(--ease); }

  /* v260811_4_2：日视图切换时旧 hero 内容（日期→hex 按钮）的滚动快照
     （fixed 定位于视口原位置，向左/右滑出；背景色区域固定不动） */
  .day-meta-ghost {
    pointer-events: none;
    will-change: transform;
    box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center;  /* 与 .day-hero--short 下原内容垂直居中一致，快照位置不偏移 */
  }

  /* v260811_4_2：内容左右对滑 + 淡入淡出动画（CSS keyframes，避免 JS transition 时序问题导致位移不生效）
     位移需 ≥100%（等于内容宽度）才能保证新旧内容不重叠；
     位移与透明度拆成两个独立动画：淡入淡出 650ms 比滑动 450ms 更慢，过渡更明显 */
  @keyframes day-meta-in-r { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @keyframes day-meta-in-l { from { transform: translateX(-100%); } to { transform: translateX(0); } }
  @keyframes day-meta-out-l { from { transform: translateX(0); } to { transform: translateX(-100%); } }
  @keyframes day-meta-out-r { from { transform: translateX(0); } to { transform: translateX(100%); } }
  @keyframes day-meta-fade-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes day-meta-fade-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }  /* 最终完全消失（opacity 0 + visibility 双保险） */
  .day-meta-in-r  { animation: day-meta-in-r  450ms cubic-bezier(0.65,0,0.35,1) both, day-meta-fade-in  450ms ease both; }
  .day-meta-in-l  { animation: day-meta-in-l  450ms cubic-bezier(0.65,0,0.35,1) both, day-meta-fade-in  450ms ease both; }
  .day-meta-out-l { animation: day-meta-out-l 350ms cubic-bezier(0.65,0,0.35,1) both, day-meta-fade-out 350ms ease both; }
  .day-meta-out-r { animation: day-meta-out-r 350ms cubic-bezier(0.65,0,0.35,1) both, day-meta-fade-out 350ms ease both; }  /* 同时开始：淡出 350ms、淡入 450ms（不延迟） */

  /* ---- 短内容模式：色块撑满视口（减去菜单栏），内容在 toolbar↔全屏按钮之间居中 ---- */
  .day-hero--short {
    min-height: calc(100vh - var(--head-h, 0px));
    min-height: calc(100dvh - var(--head-h, 0px));
    padding-top: 0;
  }
  .day-hero--short .day-meta {
    flex: 1;
    justify-content: center;
  }
  .day-hero--short .day-fullscreen {
    margin-top: 14px;
    margin-bottom: 0;
  }

  /* 居中诞生色信息 */
  .day-meta {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(10px, 1.6vh, 18px); max-width: 100%;
  }
  .day-date {
    font-family: 'Cormorant Garamond', serif; font-style: normal;
    font-size: clamp(32px, 4.9vw, 49px); opacity: 0.82; letter-spacing: 0.06em;
    white-space: nowrap;
    margin-bottom: clamp(7px, 1.2vh, 14px);
    transition: color .8s var(--ease);
  }
  .day-date .dd-num { font-style: italic; font-size: 2em; }
  .day-date .dd-char { font-style: italic; font-size: 0.64em; margin: 0 0.2em; }
  .day-cn {
    font-size: clamp(46px, 9vw, 104px); font-weight: 500; letter-spacing: 0.08em;
    line-height: 1.25;
    margin-bottom: clamp(10px, 1.6vh, 18px);
    transition: color .8s var(--ease);
  }
  .day-en {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: clamp(20px, 3vw, 30px); opacity: 0.8; transition: color .8s var(--ease);
  }
  .day-jp {
    font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
    font-size: clamp(15px, 2vw, 19px); opacity: 0.8; letter-spacing: 0.14em;
    transition: color .8s var(--ease);
  }
  .day-sep {
    width: clamp(144px, 36vw, 312px); height: 1px; background: rgb(var(--ink-rgb));
    opacity: 0.26; margin: 6px 0; transition: background .8s var(--ease);
  }
  .day-lang {
    font-size: clamp(14px, 1.8vw, 16px); opacity: 0.8; letter-spacing: 0.05em;
    transition: color .8s var(--ease);
  }
  .day-desc {
    font-size: clamp(14px, 1.8vw, 16px); line-height: 1.95; font-weight: 300;
    opacity: 1; letter-spacing: 0.03em; max-width: min(728px, 92vw); margin-top: 1em; text-align: justify; transition: color .8s var(--ease);
  }
  /* 色彩介绍中可点击的色号链接 */
  .day-desc .hex-link {
    color: rgb(var(--ink-rgb)); font-weight: 400; cursor: pointer; text-decoration: none;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.45);
    transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
  }
  .day-desc .hex-link:hover { border-color: rgb(var(--ink-rgb)); }
  .day-desc .hex-link:focus-visible { outline: 2px solid rgb(var(--ink-rgb)); outline-offset: 2px; border-radius: 2px; }
  .day-hex {
    font-family: 'Noto Serif SC', serif; font-size: 13px; letter-spacing: 0.12em;
    margin-top: 37px; padding: 0;
    border: 0; border-bottom: 1px dashed rgba(var(--ink-rgb), 0.45);
    color: rgb(var(--ink-rgb));
    cursor: pointer; user-select: none;
    transition: transform .35s var(--ease), opacity .35s var(--ease), border-color .35s var(--ease), color .8s var(--ease);
  }
  .day-hex:hover { opacity: 0.85; transform: translateY(-1px); }
  .day-fullscreen {
    position: static;
    align-self: center;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 72px;
    margin-bottom: 0;
    padding: 9px;   /* 原 8px + 1px 透明边框 ⇒ border:0 后补 1px（36×36 不变） */
    color: var(--foot-ink, #ffffff);
    border: 0;      /* ⚠️ 必须显式：<button> 的 UA 边框是 2px outset，删声明会回落成可见边框 */
    border-radius: 10px;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
  }
  .day-fullscreen:hover { opacity: 1; background: var(--foot-hover, var(--gls2-hover)); }

  /* ---- 底部按钮行（v1.4.0 第十轮起只剩全屏键）----
     ⚠️ 定位参照特意只包这一层 .day-hero-foot，**不去动 .day-fullscreen 的 margin-top**：
        它有 6 档（基础 72px / --short 14px / 媒体查询 64·56·44px 与 14px），一条都不用改。
     ⚠️ 原先贴右的「保存图片」（.day-save）已搬到工具栏搜索框左侧，规则见上方 .tb-save；
        这里把它连类名一起删干净 —— .day-save 只由 JS 生成，761 个静态页里从来没有过。 */
  .day-hero-foot { position: relative; display: flex; justify-content: center; }

  /* 三组配色：依次自上而下排列在色彩介绍之下 */
  .day-palettes {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(109px, 15.6vh, 203px);
    padding: 120px 40px 120px;
  }
  .palette-block { width: 100%; }
  .palette-head {
    display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap;
    color: var(--text-faint); font-size: clamp(13px, 1.6vw, 15px); letter-spacing: 0.1em;
    margin-bottom: 12px; opacity: 0.92;
  }
  .palette-head .ph-pre { font-weight: 600; }
  .palette-head .ph-sep { opacity: 0.5; }
  .palette-head .ph-name { font-weight: 400; letter-spacing: 0.2em; }
  /* 英文模式下配色名称缩小字间距 */
  html[data-lang="en"] .palette-head .ph-name { letter-spacing: 0.08em; }
  .palette-strip {
    display: flex; width: 100%; height: clamp(338px, 62vh, 518px);
    border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,0.22);
  }
  .pcolor {
    flex: 1 1 0; position: relative; cursor: pointer; min-width: 0; outline: none;
    display: flex; align-items: flex-end; justify-content: center;
  }
  /* 色块悬停保持真实颜色不变，仅 hex 按钮区域有反馈 */
  .pcolor .ph {
    position: relative; z-index: 1; margin-bottom: clamp(21px, 4vh, 37px);
    font-family: 'Noto Serif SC', serif;
    font-size: clamp(9px, 2.2vw, 12px);
    letter-spacing: clamp(0.01em, 0.15vw, 0.08em);
    padding: 0;
    border: 0; border-bottom: 1px dashed rgba(var(--ink-rgb), 0.45);
    color: rgb(var(--ink-rgb));
    cursor: pointer; user-select: none;
    max-width: 80%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    transition: transform .35s var(--ease), opacity .35s var(--ease), border-color .35s var(--ease), color .8s var(--ease);
  }
  /* 键盘聚焦色块仅显示按钮 */
  .pcolor:focus-visible .ph { opacity: 1; }
  /* 仅支持 hover 的设备（鼠标）上，悬停 hex 按钮才生效；触屏 hover:none 不启用，避免点按后粘滞变色 */
  @media (hover: hover) {
    .pcolor .ph:hover {
      opacity: 0.85; transform: translateY(-1px);
    }
  }

  /* Day 过渡专用 */
  .view.entering .mcell { opacity: 0; transform: scale(0.92); }
  .view.entering .ydot { opacity: 0; }

  /* ===== Morph 层 ===== */
  #morph { position: fixed; z-index: 50; pointer-events: none; opacity: 0; will-change: left, top, width, height, border-radius; }

  /* ===== Year dot tooltip ===== */
  #tooltip { position: fixed; z-index: 60; pointer-events: none; opacity: 0; background: rgba(20,20,26,0.94); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translate(-50%, calc(-100% - 14px)); transition: opacity .2s var(--ease); white-space: nowrap; text-align: left; }
  #tooltip .tt-date { font-size: 13px; color: var(--text); letter-spacing: 0.08em; margin-bottom: 6px; }
  #tooltip .tt-name { font-size: 14px; color: var(--text-soft); letter-spacing: 0.06em; margin-bottom: 4px; }
  #tooltip .tt-hex { font-family: 'Noto Serif SC', serif; font-size: 11px; color: var(--text-faint); letter-spacing: 0.12em; text-transform: uppercase; }

  /* ===== Month 视图（导航已上移至工具栏）===== */
  #viewMonth { display: flex; flex-direction: column; }
  .month-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
  .month-head .titles { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .month-head .cn-m { font-size: clamp(32.5px, 4.8vw, 52px); font-weight: 500; letter-spacing: 0.08em; line-height: 1; }
  .month-head .cn-m.en-long { font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: 0.02em; }
  .month-head .en-m { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; color: var(--text-soft); }

  /* ===== 月度概述（260810_1_2）：金句 + 正文，突破 .view padding 全屏宽；去掉分割线，小标题左对齐缩小 1/3 ===== */
  .month-overview {
    position: relative;
    margin: 0 -40px 38px;
    padding: 22px 40px 24px;
  }
  .mo-lead {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.45;
    color: var(--text-soft);
    margin-bottom: 14px;
  }
  /* 英文金句：与正文一致 Noto Serif，非斜体 */
  html[data-lang="en"] .mo-lead {
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
  }
  .mo-body p {
    font-size: 14px;
    line-height: 1.95;
    font-weight: 300;
    letter-spacing: 0.03em;
    color: var(--text-soft);
    margin: 0 0 0.9em;
  }
  .mo-body p:last-child { margin-bottom: 0; }
  /* 英文正文微调 */
  html[data-lang="en"] .mo-body p { letter-spacing: 0.012em; }
  /* 桌面端月概述弹窗沿用全局 .mo-modal-panel 默认宽度（max-width:420px，与移动端一致） */

  .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; container-type: inline-size; }
  .mcell {
    border-radius: clamp(7px, 1.2cqi, 15px); aspect-ratio: 1.2/1;
    overflow: hidden; cursor: pointer; padding: 0; text-align: left; color: inherit; font-family: inherit;
    position: relative; border: 1px solid rgba(255,255,255,0.08);
    transition: transform .45s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease), opacity .45s var(--ease);
  }
  .mcell:hover { transform: scale(1.04); border-color: rgba(244,240,232,0.24); box-shadow: 0 20px 44px rgba(0,0,0,0.26); z-index: 2; }
  .mcell .meta { position: absolute; inset: auto 0 0 0; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
  .mcell .meta .d { font-family: inherit; font-size: 10px; color: rgb(var(--ink-rgb, 255,255,255)); letter-spacing: 0.06em; }
  .mcell .meta .cn { font-size: 13px; color: rgb(var(--ink-rgb, 255,255,255)); letter-spacing: 0.08em; font-weight: 500; line-height: 1.15; }
  /* 英文模式下月视图色块名称缩小字间距 */
  html[data-lang="en"] .mcell .meta .cn { letter-spacing: 0.02em; }
  .mcell.is-today { border-color: rgba(244,240,232,0.5); box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 8px 24px rgba(0,0,0,0.30); }
  /* 「回到今天」脉冲高亮（对齐小程序 todayFlash）：亮起一圈扩散光环，动画结束摘掉 class →
     回到上面 .is-today 的静态 ring，无跳变。z-index 抬高，避免光环被相邻色块盖住。
     光环半径 = 小程序 16rpx / 12rpx 按 1rpx≈0.5px 换算 → 峰值 8px、收尾 6px。 */
  .mcell.is-today.is-flash { z-index: 3; animation: todayFlashCell .6s ease-out 1; }
  @keyframes todayFlashCell {
    0%   { box-shadow: 0 0 0 2px rgba(244,240,232,0.45), 0 8px 24px rgba(0,0,0,0.30), 0 0 0 0 rgba(244,240,232,0.42); }
    35%  { box-shadow: 0 0 0 2px rgba(244,240,232,0.95), 0 8px 24px rgba(0,0,0,0.30), 0 0 0 8px rgba(244,240,232,0.22); }
    100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 8px 24px rgba(0,0,0,0.30), 0 0 0 6px rgba(244,240,232,0); }
  }
  .mcell.is-today::after { content: attr(data-today-text); position: absolute; top: 10px; right: 10px; font-family: 'Noto Serif SC', serif; font-size: 11px; letter-spacing: 0.14em; font-weight: 600; color: rgb(var(--ink-rgb)); opacity: 0.9; z-index: 2; background: rgba(0,0,0,0.25); padding: 2px 7px; border-radius: 8px; backdrop-filter: blur(4px); }

  /* ===== Year 视图 ===== */
  .year-head { margin-bottom: 28px; }
  /* 标题（对齐小程序 .year-title；样式同 .mo-lead） */
  .year-title {
    font-size: clamp(14px, 2.15vw, 22px);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.45;
    color: var(--text);
    margin: 0 0 14px;
  }
  /* 英文标题：衬线斜体，更轻盈 */
  html[data-lang="en"] .year-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(15px, 2.3vw, 25px);
    letter-spacing: 0.01em;
  }
  /* 正文（对齐小程序 .year-sub；样式同 .mo-body p） */
  .year-sub {
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.95;
    font-weight: 300;
    letter-spacing: 0.03em;
    color: var(--text-soft);
    margin: 0;
  }
  html[data-lang="en"] .year-sub { letter-spacing: 0.012em; }
  .year-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .yblock { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 22px; padding: 16px 14px 14px; transition: transform .45s var(--ease), border-color .35s var(--ease), background .35s var(--ease); display: grid; gap: 12px; cursor: pointer; }
  .yblock:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
  .yblock .yl { display: flex; align-items: baseline; gap: 10px; margin-bottom: 0; }
  .yblock .yl .cnm { font-size: 18px; color: var(--text); letter-spacing: 0.12em; display: inline-flex; align-items: baseline; gap: 5px; }
  .yblock .yl .enm { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: var(--text-soft); }
  .yblock .ygrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; container-type: inline-size; }
  .ydot { border-radius: clamp(2px, 1.2cqi, 7px); aspect-ratio: 1.2/1; cursor: pointer; border: 1px solid rgba(255,255,255,0.08); position: relative; transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease), opacity .4s var(--ease); }
  .ydot:hover { transform: scale(1.08); border-color: rgba(255,255,255,0.28); box-shadow: 0 8px 18px rgba(0,0,0,0.18); z-index: 2; }
  .ydot:focus-visible { outline: 2px solid rgba(244, 240, 232, 0.85); outline-offset: 2px; }
  .ydot:active { transform: scale(1.04); }
  .ydot.is-today { box-shadow: 0 0 0 1px rgba(7,7,10,0.8), 0 0 0 2px rgba(255,255,255,0.4); }
  /* 「回到今天」脉冲高亮：与月视图同款节奏，光环半径按色点尺寸收小 */
  .ydot.is-today.is-flash { z-index: 3; animation: todayFlashDot .6s ease-out 1; }
  @keyframes todayFlashDot {
    0%   { box-shadow: 0 0 0 1px rgba(7,7,10,0.8), 0 0 0 2px rgba(244,240,232,0.45), 0 0 0 0 rgba(244,240,232,0.42); }
    35%  { box-shadow: 0 0 0 1px rgba(7,7,10,0.8), 0 0 0 2px rgba(244,240,232,0.95), 0 0 0 8px rgba(244,240,232,0.22); }
    100% { box-shadow: 0 0 0 1px rgba(7,7,10,0.8), 0 0 0 2px rgba(255,255,255,0.4), 0 0 0 6px rgba(244,240,232,0); }
  }

  /* ===== 关于弹窗 ===== */
  .modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; }
  .modal.open { visibility: visible; }
  .modal-overlay { position: absolute; inset: 0; background: rgba(6,6,9,0.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; transition: opacity .4s var(--ease); }
  .modal.open .modal-overlay { opacity: 1; }
  .modal-card {
    position: relative; z-index: 1; width: min(754px, 100%); max-height: min(84vh, 780px); overflow: auto;
    background: rgba(16,16,22,0.20);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-line); border-radius: 22px; padding: 42px 30px 34px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.50);
    transform: translateY(16px) scale(0.985); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease);
  }
  .modal.open .modal-card { transform: none; opacity: 1; }
  .modal-close {
    position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border-radius: 999px;   /* 36×36 为 border-box ⇒ border:0 后外尺寸不变 */
    border: 0;   /* ⚠️ 必须显式：<button> 的 UA 边框是 2px outset */
    color: #ffffff;
    font-size: 22px; line-height: 1; cursor: pointer; transition: color .3s var(--ease), background .3s var(--ease);
  }
  .modal-close:hover { color: #ffffff; background: var(--gls2-hover); }
  /* v260826_1：标题上移与关闭按钮（top:15px + 高36px → 中心33px）同一高度 */
  .modal-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
    font-size: 27px; color: var(--text); margin-bottom: 20px; letter-spacing: 0.02em;
    line-height: 36px; margin-top: -27px;
  }
  .modal-body { font-size: 15px; line-height: 1.98; color: var(--text); font-weight: 300; letter-spacing: 0.02em; }
  .modal-body p { margin: 0 0 15px; }
  .modal-body a { color: var(--text); border-bottom: 1px solid rgba(244,240,232,0.4); text-decoration: none; word-break: break-word; opacity: .7; transition: opacity .3s var(--ease); }
  .modal-body a:hover { opacity: 1; }
  .modal-sign { margin-top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0px; font-size: 13px; color: var(--text-faint); letter-spacing: 0.12em; }
  .modal-sign .sign-name { display: block; }

  /* ===== 社交弹窗（小红书 / 公众号 / 邮箱）260825_1 ===== */
  .modal-card-social {
    width: min(440px, 100%);
    padding: 36px 28px 28px;
    text-align: center;
  }
  .modal-card-mail {
    width: min(420px, 100%);
  }
  .modal-title-social {
    font-size: 22px;
    margin-bottom: 22px;
    letter-spacing: 0.06em;
    line-height: 36px; margin-top: -21px;   /* v260826_1：与关闭按钮同一高度 */
  }
  .modal-body-social {
    display: flex; flex-direction: column; align-items: center;
    font-size: 14px; line-height: 1.7; letter-spacing: 0.04em;
  }
  .social-card {
    width: 78%;
    max-width: 320px;
    margin: 0 auto 22px;
    border-radius: 22px; overflow: hidden;
    border: 1px solid var(--glass-line);
    background: var(--bg-soft);
    box-shadow: 0 16px 40px rgba(0,0,0,0.32);
    transition: transform .4s var(--ease);
  }
  .modal.open .social-card { transform: translateY(0); }
  .social-card-img {
    display: block; width: 100%; height: auto;
  }
  .social-actions {
    display: grid; grid-template-columns: auto; justify-content: center;
    gap: 12px; margin-top: 6px;
    width: 100%;
  }
  .social-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 46px; padding: 0 29px;   /* border:0 后左右各补 1px（高 46px 固定不变） */
    font-family: inherit;
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.14em;
    color: #ffffff;
    border: 0;   /* ⚠️ 必须显式：<button> 的 UA 边框是 2px outset */
    border-radius: 999px;
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  }
  .social-action-btn:hover { background: var(--gls2-hover); }
  .social-action-btn:active { transform: scale(0.97); }
  .social-action-btn:focus-visible {
    outline: 1px dashed var(--text-soft); outline-offset: 3px;
  }
  /* 邮箱专用 */
  .mail-icon {
    font-size: 56px; line-height: 1;
    margin: 6px 0 18px;
    opacity: 0.88;
  }
  .mail-text {
    font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
    font-size: 17px; font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 10px;
  }
  .mail-address {
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    margin-bottom: 22px;
    word-break: break-all;
  }

  /* ===== 全屏四屏轮播 ===== */
  .full-overlay { position: fixed; inset: 0; z-index: 85; display: none; }
  .full-overlay.open { display: block; }
  .po-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; padding: calc(clamp(20px, 3vw, 33px) + 8px) clamp(20px, 4vw, 40px); color: rgb(var(--ink-rgb, 255, 255, 255)); pointer-events: none; }
  .po-name { font-size: 15px; letter-spacing: .06em; color: rgb(var(--ink-rgb, 255, 255, 255)); }
  .po-name .po-pre { opacity: .82; font-weight: 600; }
  .po-name .po-sep { opacity: .55; }
  .po-name .po-nm { font-weight: 400; letter-spacing: .08em; }
  .po-toast { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%) translateY(16px); z-index: 3; padding: 12px 28px; border-radius: 999px; background: rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 14px; letter-spacing: .08em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .po-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .po-strip { position: absolute; inset: 0; display: flex; width: 100%; height: 100%; }
  .po-band { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; min-width: 0; }
  .po-band .po-hex { position: relative; z-index: 1; margin-bottom: clamp(42px, 9vh, 84px); font-family: 'Noto Serif SC', serif; font-size: clamp(10px, 2.2vw, 13px); letter-spacing: clamp(0.04em, 0.2vw, .12em); padding: 0; border: 0; border-bottom: 1px dashed rgba(var(--ink-rgb, 255, 255, 255), 0.45); background: transparent; color: rgb(var(--ink-rgb, 255, 255, 255)); cursor: pointer; user-select: none; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: clip; transition: transform .35s var(--ease), opacity .35s var(--ease), border-color .3s var(--ease); }
  /* 仅支持 hover 的设备（鼠标）上，悬停 hex 按钮才生效：边框变实 + 微微上移 + 填充背景 */
  @media (hover: hover) {
    .po-band .po-hex:hover { opacity: 0.85; transform: translateY(-1px); }
  }
  .full-overlay:fullscreen { width: 100vw; height: 100vh; }
  .fs-carousel {
    position: absolute; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    scroll-snap-type: y mandatory; scroll-behavior: smooth;
    touch-action: none; /* v260811_3_1：禁用原生触摸滚动，由 JS 接管为「一次一屏」 */
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .fs-carousel::-webkit-scrollbar { display: none; }
  .fs-screen { flex: 0 0 100%; width: 100%; height: 100%; position: relative; overflow: hidden; scroll-snap-align: start; }
  .fs-palette { display: flex; background: #000; }
  .fs-palette .po-band { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; min-width: 0; }
  .fs-palette .po-hex { position: relative; z-index: 1; margin-bottom: clamp(42px, 9vh, 84px); font-family: 'Noto Serif SC', serif; font-size: clamp(10px, 2.2vw, 13px); letter-spacing: clamp(0.04em, 0.2vw, .12em); padding: 0; border: 0; border-bottom: 1px dashed rgba(var(--ink-rgb, 255, 255, 255), 0.45); background: transparent; color: rgb(var(--ink-rgb, 255, 255, 255)); cursor: pointer; user-select: none; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: clip; transition: transform .35s var(--ease), opacity .35s var(--ease), border-color .3s var(--ease); }
  /* 仅支持 hover 的设备（鼠标）上，悬停 hex 按钮才生效（触屏 hover:none 不启用） */
  @media (hover: hover) {
    .fs-palette .po-hex:hover { opacity: 0.85; transform: translateY(-1px); }
  }
  .fs-birth { background: var(--swatch, #888); display: flex; align-items: center; justify-content: center; }
  .fs-birth-info { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3.2vh, 32px); text-align: center; color: rgb(var(--ink-rgb, 255, 255, 255)); padding: 0 24px; }
  .fs-birth .fs-date { font-family: 'Cormorant Garamond', serif; font-style: normal; font-size: clamp(32px, 4.9vw, 49px); letter-spacing: .06em; opacity: .82; }
  .fs-birth .fs-date .dd-num { font-style: italic; font-size: 2em; }
  .fs-birth .fs-date .dd-char { font-style: italic; font-size: 0.64em; margin: 0 0.2em; }
  .fs-birth .fs-cn { font-size: clamp(46px, 9vw, 104px); font-weight: 500; letter-spacing: .08em; line-height: 1.05; }
  .fs-birth .hex-code { font-family: 'Noto Serif SC', serif; font-size: 14px; letter-spacing: .14em; padding: 0; border: 0; border-bottom: 1px dashed rgba(var(--ink-rgb, 255, 255, 255), 0.45); color: rgb(var(--ink-rgb, 255, 255, 255)); cursor: pointer; user-select: none; margin-top: clamp(40px, 6vh, 80px); transition: transform .3s var(--ease), opacity .3s var(--ease), border-color .3s var(--ease); }
  .fs-birth .hex-code:hover { opacity: 0.85; transform: translateY(-1px); }
  .fs-up, .fs-down {
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 6;
    width: 34px; height: 34px; border-radius: 999px;   /* 34×34 为 border-box ⇒ border:0 后尺寸不变 */
    border: 0;   /* ⚠️ 必须显式：<button> 的 UA 边框是 2px outset */
    color: #ffffff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s var(--ease);
  }
  .fs-up { bottom: 18px; }
  .fs-up::before { content: ""; width: 9px; height: 9px; opacity: 1; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(2px) rotate(45deg); }
  .fs-up:hover { background: var(--foot-hover, var(--gls2-hover)); }
  .fs-up:active { transform: translateX(-50%) scale(0.94); }
  /* v260811_2_5：横屏/矮视口下第一屏精确布局：
      颜色名固定在页面垂直中心（top:50%）
      hex 顶部 = 名字底部 + 间距 g，使 hex 恰在「名字底部↔箭头顶部」区间的正中
      日期底部 = 名字顶部 - 间距 g，使「日期底部↔名字顶部」间距与「名字底部↔hex 顶部」一致
      间距 g = 25% - 26px - 名字高/4 - hex高/2（由名字/hex 高度 CSS 变量计算，JS 测量赋值） */
  @media (max-height: 560px) {
    .fs-birth-info {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      padding: 0;
      --fs-gap: max(8px, calc(25% - 26px - var(--fs-name-h, 0px)/4 - var(--fs-hex-h, 0px)/2));
    }
    .fs-birth .fs-date {
      position: absolute;
      bottom: calc(50% + var(--fs-name-h, 0px)/2 + var(--fs-gap));
      left: 50%;
      transform: translateX(-50%);
      line-height: 1;
    }
    .fs-birth .fs-cn {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      line-height: 1.05;
    }
    .fs-birth .hex-code {
      position: absolute;
      top: calc(50% + var(--fs-name-h, 0px)/2 + var(--fs-gap));
      left: 50%;
      transform: translateX(-50%);
      margin-top: 0;
    }
  }
  .full-overlay.fs-hide-label .po-name { display: none; }
  .po-close {
    position: absolute; top: clamp(20px, 3vw, 33px); right: clamp(20px, 4vw, 40px); z-index: 6;
    width: 40px; height: 40px; border-radius: 999px;   /* 40×40 为 border-box ⇒ border:0 后外尺寸不变 */
    border: 0;   /* ⚠️ 必须显式：<button> 的 UA 边框是 2px outset */
    color: #ffffff; font-size: 24px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .3s var(--ease), border-color .3s var(--ease);
  }
  .po-close:hover { background: var(--foot-hover, var(--gls2-hover)); }

  /* ===== Toast ===== */
  #toast { position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%) translateY(16px); z-index: 9999; padding: 12px 28px; border-radius: 999px; background: rgba(15,15,18,0.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.32); color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,0.35); font-size: 14px; letter-spacing: 0.08em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ===== 页脚 ===== */
  /* v260811_1_4：两行布局，内容左对齐顺接排列 ——
     第1行：品牌版权 + 社交链接（间隔与社交链接间距一致 26px）
     第2行：版本号 + 备案号（间隔同上）
     每行 flex-wrap: wrap，页面变窄放不下时从中间断开拆成两行 */
  .foot {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    padding: 22px 28px; font-size: 12px; color: var(--text-faint);
    letter-spacing: 0.24em; border-top: 1px solid var(--line);
  }
  .foot-row {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px 26px; flex-wrap: wrap;
  }
  .foot-brand { white-space: nowrap; color: #514F4D; }
  /* v260826_1：第二行三部分（品牌名 / ©年份蘑菇 / 版本号）间距与其他两行一致 26px */
  .foot-brand .fl-lat { margin-left: 26px; }
  .foot-brand .fl-ver { margin-left: 26px; }
  .foot-social {
    display: flex; align-items: center; justify-content: flex-start; gap: 26px; flex-wrap: wrap;
    /* 260910：社交媒体行靠右对齐（与第二、三行的左对齐形成对比）；flex 容器内唯一子元素 → margin-left:auto 吃光剩余空间贴右 */
    margin-left: auto;
  }
  /* v260920_11：页脚社交**回退到线上 1.3.3 版**（纯文字链接 + 下划线从左划出）。
     曾短暂改成玻璃胶囊，蘑菇看过觉得这块不需要玻璃 ⇒ 逐条还原 1.3.3 定义，
     并把 `.foot-link` 从下方「固定深底档」玻璃组里移出（见 @media 前的分组注释）。
     ⚠️ 与 1.3.3 逐字节一致，只有行内注释是新增的。 */
  .foot-link {
    color: var(--text-faint); text-decoration: none; letter-spacing: 0.18em;
    transition: color 0.35s var(--ease); position: relative;
    background: transparent; border: none; padding: 0; font: inherit;
    cursor: pointer; font-family: inherit;
  }
  .foot-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s var(--ease);
  }
  .foot-link:hover { color: var(--text); }
  .foot-link:hover::after { transform: scaleX(1); }
  .foot-link:focus-visible { outline: 1px dashed var(--text-soft); outline-offset: 4px; border-radius: 2px; }
  .fl-en { font-size: 12px; letter-spacing: 0.14em; }
  .fl-cn { font-size: 12px; letter-spacing: 0.1em; }
  /* v260826_1：第二行品牌版权行颜色改为与备案行一致 #514F4D */
  .fl-lat { font-size: 12px; letter-spacing: 0.1em; color: #514F4D; }
  .fl-ghost { color: #514F4D; }
  /* v260811_2_4：版本号/备案号颜色 #514F4D */
  .fl-ver { font-size: 11px; letter-spacing: 0.14em; color: #514F4D; }
  .fl-beian { font-size: 11px; color: #514F4D; letter-spacing: 0.14em; display: inline-flex; flex-wrap: wrap; gap: 0 26px; }
  .foot-meta-group { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 26px; }
  .fl-beian a { color: #514F4D; text-decoration: none; white-space: nowrap; transition: color 0.35s var(--ease); }
  .fl-beian a:hover { color: var(--text); }
  .fl-beian-logo { height: 14px; width: auto; vertical-align: -3px; margin-right: 5px; }

  /* ---- 日视图：顶栏品牌 / 系列名 / 顶栏描边随诞生色明度自适应 ----
     ⚠️ v1.4.0 起**按钮类全部退出这套自适应**：所有玻璃按钮上的文字与 icon 恒白
        （蘑菇 2026-09-18「无论深浅都是白色」，对齐移动端 --foot-ink = #ffffff）。
        这里只保留非按钮的品牌字与系列名——它们是纯文字，仍需浅底转深色。 */
  body.day-active .topbar { border-bottom-color: rgba(var(--ink-rgb), 0.14); }
  body.day-active .brand-mark,
  body.day-active .brand-cn { color: rgb(var(--ink-rgb)); }
  body.day-active .brand-note,
  body.day-active .series-active { color: rgba(var(--ink-rgb), 0.82); }
  body.day-active .series-active { color: rgb(var(--ink-rgb)); }
  body.day-active .series-active:hover { opacity: 0.7; }
  /* 仅存的一条：搜索 icon 的淡化（字形颜色已恒白，这里只调透明度） */
  body.day-active .dp-search-btn .dp-icon { opacity: 0.75; }
  body.day-active .dp-search-btn:hover .dp-icon { opacity: 1; }

  /* =========================================================
     按钮玻璃外壳（v1.4.0：桌面端统一质感）
     与移动端 .mp-fbtn / 小程序 footVarsFor 同一套**四层结构**：
       外描边 → 顶部锐利湿边（硬）→ 柔光晕（润）→ 底部暗带（玻璃地板）
     ⚠️ 层数一层都不能少：少一层 glow 就退回「只有一条硬边」的塑料感。
     ⚠️ 描边统一写成 `1px solid transparent` 而不是 `border:0` —— 保住原有盒子尺寸不位移；
        填充走 background-clip 默认值（border-box）会直接铺到外沿，视觉上与移动端 border:0 等价。
     ⚠️ 字色（v1.4.0 起）＝恒白 var(--foot-ink, #ffffff)，**与移动端一致**（蘑菇 2026-09-18
        「无论深浅都是白色」）。浅底诞色下对比度只有 1.32:1，是已知并接受的缺陷 ——
        不要再改回「浅底自动转深字」的 --ink-rgb 自适应。
     ⚠️ 两档的分工见 :root 里 --gls2-* 的注释：跟不跟诞生色跑，取决于按钮「永远落在什么底色上」。
     ========================================================= */

  /* ① 跟随底色档 —— 背后是当天诞生色（日视图的顶栏 / 工具栏 / 日主屏按钮 / 全屏浮层）或站点深色（月·年）
        ⚠️ .lang-switch 刻意**不在这一档**：它按蘑菇要求还原成移动端 .mp-lang 的镂空描边胶囊（见上方规则）。 */
  .segmented, .tb-nav-group, .dp-search-btn, .tb-save, .day-fullscreen,
  .po-close, .fs-up, .fs-down {
    background: var(--glass-sheer), var(--glass-depth), var(--foot-glass, rgba(166,170,171,0.34));
    box-shadow:
      0 0 0 .5px var(--foot-edge, rgba(255,255,255,0.16)),
      inset 0 .75px 0 var(--foot-hi, rgba(255,255,255,0.42)),
      inset 0 1px 2px var(--foot-glow, rgba(255,255,255,0.18)),
      inset 0 -.75px 0 var(--foot-lo, rgba(255,255,255,0.08));
    -webkit-backdrop-filter: blur(9px) saturate(1.5);
    backdrop-filter: blur(9px) saturate(1.5);
  }

  /* ② 固定深底档 —— 永远落在深色底上（弹窗 / 弹窗内的操作键），不跟诞生色跑
        （v260920_11：`.foot-link` 已移出本档，页脚社交回退成 1.3.3 的纯文字链接） */
  .modal-close, .social-action-btn {
    background: var(--glass-sheer), var(--glass-depth), var(--gls2-fill);
    box-shadow:
      0 0 0 .5px var(--gls2-edge),
      inset 0 .75px 0 var(--gls2-hi),
      inset 0 1px 2px var(--gls2-glow),
      inset 0 -.75px 0 var(--gls2-lo);
    -webkit-backdrop-filter: blur(9px) saturate(1.5);
    backdrop-filter: blur(9px) saturate(1.5);
  }

  /* ③ 同上，但日期面板里的两个下拉单独写：它自带 background-image 画的下拉箭头，
        套不进上面的 `background` 简写（简写会把 background-image 一并重置成 none）。 */
  .dp-panel-controls select {
    background-color: var(--gls2-fill);
    box-shadow:
      0 0 0 .5px var(--gls2-edge),
      inset 0 .75px 0 var(--gls2-hi),
      inset 0 1px 2px var(--gls2-glow),
      inset 0 -.75px 0 var(--gls2-lo);
    -webkit-backdrop-filter: blur(9px) saturate(1.5);
    backdrop-filter: blur(9px) saturate(1.5);
  }

  /* ===== 响应式 ===== */
  @media (max-width: 880px) {
    /* 窄屏基准留白收窄为 20px：--pad-x 同时驱动顶栏 / 工具栏 / 日主屏「保存图片」的右边距
       （原写法是给 .topbar、.toolbar 各写死 padding-left/right:20px，现在归到变量里） */
    :root { --pad-x: 20px; }
    .view { padding: 16px 18px 50px; }
    #viewDay { padding: 0; }
    /* 月度概述随 .view 内边距收窄，保持全屏宽 */
    .month-overview { margin: 0 -18px 28px; padding: 18px 18px 20px; }
    .day-hero { padding: 29px 18px 24px; }
    .day-hero .day-fullscreen { margin-top: 64px; }
    .day-hero--short { padding-top: 0; }
    .day-hero--short .day-fullscreen { margin-top: 14px; }
    .day-cn { font-size: clamp(40px, 13vw, 72px); }
    /* 移动端英文下主名缩小字间距 */
    html[data-lang="en"] .day-cn { letter-spacing: 0.01em; }
    .year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .month-grid { gap: 8px; }
    .toolbar { flex-wrap: wrap; gap: 12px; padding: 14px 20px; }
    .toolbar-left { display: none; }
    .toolbar-center { flex: 1 1 auto; flex-wrap: wrap; gap: 8px; }
    .toolbar-right { flex: 0 0 auto; }
    .dp-panel { right: 20px; left: auto; min-width: 0; width: auto; }
    /* v260811_1_4：页脚为两行左右布局，窄屏仅收窄内边距，放不下时 .foot-row 自动拆行 */
    .foot { padding: 16px 20px; }
  }

  /* ===== 搜索框收为图标按钮：toolbar 一行放不下时 ===== */
  @media (max-width: 1100px) {
    .dp-search-btn { padding: 9px 13px; min-width: 0; }   /* 去 border 后各补 1px */
    .dp-search-btn span { display: none; }
    .dp-search-btn .dp-icon { width: 14px; height: 14px; margin: 0; }
    /* 与同档的搜索键（外高 32px）保持同高 —— 见 .tb-save 的注释 */
    .tb-save { width: 32px; height: 32px; }
    .toolbar { flex-wrap: nowrap; }
  }

  /* ===== 月视图列数随宽度递减 ===== */
  @media (max-width: 880px) {
    .month-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  }
  @media (max-width: 720px) {
    .month-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
  }
  @media (max-width: 560px) {
    .month-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  }
  @media (max-width: 420px) {
    .month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  }

  /* ===== 移动端适配（≤ 600px：手机） ===== */
  @media (max-width: 600px) {
    /* topbar：品牌区两行排列，小字拉大字间距对齐品牌宽度 */
    .topbar { padding: 14px 16px; }
    .topbar-right { gap: 20px; }
    .brand-lockup {
      flex-direction: column;
      gap: 8px;   /* v260826_1：品牌名与 brand-note 之间加大间距 */
    }
    .brand-name { gap: 4px; }
    .brand-mark { font-size: 28px; }
    .brand-cn { font-size: 22px; }
    .brand-note {
      font-size: 11px;
      letter-spacing: 0.6em;
      max-width: 100%;
      white-space: nowrap;
    }
    .series-active { font-size: 12px; }
    /* v260826_1：移动端「中文」按钮与 series-active 视觉一致，字号全局 11px */
    .lang-switch { font-size: 11px; padding: 1px 9px; min-width: 26px; line-height: 1.45; }

    /* ---- 工具栏紧凑布局 ---- */
    .toolbar {
      flex-wrap: nowrap;
      gap: 8px;
      padding: 12px 16px 14px;
    }
    .toolbar-left {
      display: flex;
      flex: 0 0 auto;
      justify-content: flex-start;
    }
    /* 显示紧凑视图切换按钮 */
    .tb-view-btn { display: inline-flex; font-size: 11px; padding: 7px 12px; }

    /* 隐藏分段控件 */
    .toolbar-center .seg-group { display: none; }

    /* 中间：导航组居中 */
    .toolbar-center {
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
      gap: 6px;
    }
    .tb-nav-group { gap: 4px; }
    .tb-nav-btn { padding: 3px 6px; }
    .tb-today-btn { font-size: 11px; padding: 7px 12px; }

    /* 右侧：搜索按钮仅图标 */
    .toolbar-right {
      flex: 0 0 auto;
      display: flex;
      justify-content: flex-end;
    }
    .dp-search-btn {
      padding: 9px 11px;   /* 去 border 后各补 1px */
      min-width: 0;
    }
    .dp-search-btn span { display: none; }
    .dp-search-btn .dp-icon { width: 15px; height: 15px; margin: 0; }
    .dp-panel { right: 0; left: auto; min-width: 0; width: auto; }

    /* 月视图改为 3 列 */
    .month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    /* v260728_2: 色块长宽比固定 1.2/1，圆角用 cqi 随容器宽度自适应，无需在此覆盖 */
    .mcell .meta { padding: 8px 8px 6px; }
    .mcell .meta .d { font-size: 9px; }
    .mcell .meta .cn { font-size: 11px; }
    .mcell.is-today::after { content: attr(data-today-text); font-size: 10px; padding: 1px 6px; top: 6px; right: 6px; }

    /* 年视图一行一个月 */
    .year-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
    .yblock { padding: 14px 12px 12px; gap: 10px; border-radius: 18px; }
    .yblock .yl .cnm { font-size: 17px; }
    .yblock .yl .enm { font-size: 15px; }
    .yblock .ygrid { gap: 6px; }
    /* v260728_2: 色块长宽比固定 1.2/1，圆角用 cqi 随容器宽度自适应，无需在此覆盖 */

    /* 页脚：两行左对齐布局，窄屏收窄间距（与社交链接间距一致 18px），放不下时 .foot-row 拆行 */
    .foot { padding: 14px 18px; gap: 8px; }
    .foot-row { gap: 18px; }
    .foot-social { gap: 18px; }

    /* 日视图 */
    .day-hero { padding: 22px 14px 16px; }
    .day-hero .day-fullscreen { margin-top: 56px; margin-bottom: 0; }
    .day-hero--short { padding-top: 0; }
    .day-hero--short .day-fullscreen { margin-top: 14px; margin-bottom: 0; }
    .day-hex { margin-top: 22px; font-size: 12px; }
    .day-palettes { padding: 60px 14px 60px; gap: 60px; }
    .palette-strip { height: clamp(200px, 40vh, 320px); }

    /* 全屏轮播 */
    .po-bar { padding: 16px; }
    .po-close { top: 14px; right: 14px; width: 34px; height: 34px; font-size: 20px; }
  }

  /* ===== 小屏手机适配（≤ 400px）===== */
  @media (max-width: 400px) {
    .topbar { padding: 12px 12px; }
    .topbar-right { gap: 12px; }
    .brand-lockup { gap: 2px; }
    .brand-mark { font-size: 24px; }
    .brand-cn { font-size: 18px; }
    .brand-note { font-size: 10px; letter-spacing: 0.4em; }
    .series-active { font-size: 11px; letter-spacing: 0.08em; }
    .lang-switch { font-size: 11px; padding: 2px 8px; min-width: 26px; }
    .day-hero { padding: 18px 12px 14px; }
    .day-hero .day-fullscreen { margin-top: 44px; margin-bottom: 0; }
    .day-hero--short { padding-top: 0; }
    .day-hero--short .day-fullscreen { margin-top: 14px; margin-bottom: 0; }
    .day-hex { margin-top: 16px; font-size: 11px; }
    /* 社交弹窗：超窄屏收窄 */
    .modal-card-social { padding: 28px 18px 22px; }
    .modal-title-social { font-size: 19px; margin-bottom: 18px; margin-top: -13px; } /* 28-13+18=33 与关闭按钮对齐 */
    .social-card { width: 86%; margin-bottom: 16px; }
    .social-action-btn { height: 42px; font-size: 12px; padding: 0 23px; }   /* 去 border 后各补 1px */
    .mail-icon { font-size: 44px; }
    .mail-text { font-size: 15px; }
  }

  /* ===== 降低动态效果 ===== */
  @media (prefers-reduced-motion: reduce) {
    .ambient::before, .ambient::after { animation: none !important; }
    .mcell.is-today.is-flash, .ydot.is-today.is-flash { animation: none !important; }
    .mcell, .ydot, .day-stage, .day-hero, .palette-block, .pcolor,
    .view, .segmented .indicator,
    .nav-btn, .dp-search-btn, .dp-panel, .dp-panel-controls select,
    .tb-nav-btn, .tb-today-btn, .tb-save, #tooltip {
      transition-duration: 0.01ms !important;
    }
  }