/* ==================== BUILD INFO ====================
 * 生成时间: 2026-10-17T13:27:14.864Z
 * 类型: CSS（5 个文件合并）
 * 源文件数: 5
 * 源清单哈希: 9160032d2440fc9d
 * 生成命令: 构建脚本 --emit（见项目说明）
 * ⚠️ 不要手改本文件。改源码后必须重新构建。
 * ==================================================== */
/* ===== module: css/main/00-tokens.css  (sha16 da15a559e9c52f93, 7843B) ===== */
/* ===== css/main/00-tokens.css —— 变量与基础：:root 设计令牌 / 页面基础 / 顶部标题区 / 公告入口与标签 =====
   · 2026-10-16 从 index.html 的 <style> 按【原顺序】切出：只切不重构，样式一个字符没改
   · 加载顺序（必须保持）：00-tokens → 10-layout → 20-components → 30-themes → 40-art
   · 本文件是第 1／5 段；删掉头部这 5 行，剩下的就是原文对应片段
   ===== */

    :root {
      /* 小信件图标（管理员改这里即可微调） */
      --mail-icon-size: 32px;    /* 图标尺寸：25px → 32px（+28%，≥20%） */
      --mail-hit-size: 48px;     /* 点击热区尺寸（图标垂直居中的基准） */
      --mail-dot-size: 14px;     /* 红点直径（随图标约 44%），数字字号随动 */
      --mail-offset-x: 0px;      /* 图标距锚点右缘的距离（正值左移） */
      --mail-offset-y: 2px;      /* 图标垂直微调（相对分界线） */
      /* ①公告栏文字标签（本次新增：只调这 4 个变量即可改字/色/间距，图标本体一律不动） */
      --notice-label-font-size: 12px;      /* 标签字号（验收 a：临时改 36px 即 3 倍，见 body.mail-debug） */
      --notice-label-color: #9b8fc0;       /* 标签颜色（与副标题同色系，弱化不抢眼） */
      --notice-label-letter-spacing: 2px;  /* 标签字间距 */
      /* 【本轮调整 2026-10-11】标签与图标热区顶边的间隙：2px → 0px（标签整体下沉 2px）。
         改前：文字底边距分界线 27.5px（0.5*48-2+14/4+2），距信封可见图标顶边约 13.5px；
         改后：文字底边距分界线 25.5px（0.5*48-2+14/4+0），距信封可见图标顶边约 11.5px；
         仍悬于信封上方、不与图标本体重合，且与红点顶面恰好相切不相交（红点出现时也不压字）。 */
      --notice-label-gap: 0px;             /* 标签底边与图标热区顶边的间隙 */
      /* 公告弹窗 */
      --notice-panel-max-height: 78vh;   /* 弹窗总高上限（固定，不随数量增长） */
      --notice-list-max-height: 360px;   /* 内容区可视高度：约容纳最新两条公告（按卡片高度可调） */
      --notice-scrollbar-width: 8px;     /* 窄滚动条宽度 */
      --notice-scrollbar-thumb: #c4b2ee; /* 滑块颜色 */
      --notice-scrollbar-track: rgba(89, 49, 246, 0.06); /* 轨道颜色 */
      /* ③本次新增："（已修改）"角标（只调这 3 个变量） */
      --notice-modified-font-size: 11px;        /* 角标字号：小字号、不抢眼 */
      --notice-modified-color: #000000;         /* 角标颜色：黑色（按验收要求） */
      --notice-modified-gap: 6px;               /* 角标与昵称的水平间距 */
      /* 本轮新增：长文阅读器尺寸（大号"公告栏"样式，右侧可滑动看完全文） */
      --reader-panel-width: 680px;              /* 阅读器宽度：越大越像全屏 */
      --reader-panel-max-height: 86vh;          /* 阅读器总高上限 */
    }

    /* ---------- 页面基础 ---------- */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      min-height: 100%;
    }

    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      background: linear-gradient(160deg, #a18cd1 0%, #fbc2eb 50%, #ffd1ff 100%);
      background-attachment: fixed; /* 渐变铺满全屏，滚动时不跳动 */
      min-height: 100vh;
      color: #333;
      line-height: 1.6;
      overflow-x: hidden; /* 防止意外出现横向滚动条 */
    }

    /* 整体：半透明白毛玻璃大卡片，居中并留足白边 */
    .container {
      max-width: 680px;
      margin: 0 auto;
      padding: 44px 36px 48px;
      background: rgba(255, 255, 255, 0.72);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
    }

    /* ---------- 顶部标题区 ---------- */
    .page-title {
      text-align: center;
      font-size: 34px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #4a3b7c;
      margin-bottom: 6px;
    }

    /* 副标题：时光荏苒，青春有痕 */
    .page-subtitle {
      text-align: center;
      font-size: 14px;
      color: #9b8fc0;
      letter-spacing: 2px;
      margin-bottom: 32px;
    }

    /* 副标题行：标语独立整行居中，图标绝对定位脱离排版流（不再挤偏文字） */
    .subtitle-row {
      position: relative;
      margin-bottom: 32px;
    }

    .subtitle-row .page-subtitle {
      display: block;
      text-align: center;
      margin-bottom: 0;
      /* 本次修正（为满足验收 c）：标语 <p> 默认是"整行宽"块级矩形，会与右上方的
         "公告栏"标签矩形相交。收窄为文字宽度后矩形=文字本身，文字仍整行居中、
         中线与视觉零变化。若要还原，删掉下面 3 行即可。 */
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }

    /* ---------- 公告入口：零高度锚点 + 绝对定位图标 ---------- */
    .mail-anchor {
      position: relative;   /* 图标的包含块：固定在标语与昵称之间 */
      height: 0;
      width: 100%;
    }

    .notice-bell {
      /* 绝对定位在锚点上：图标几何中心压在分界线上（误差仅 offset-y = 2px） */
      position: absolute;
      top: calc(-0.5 * var(--mail-hit-size) + var(--mail-offset-y));
      right: var(--mail-offset-x);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* 点击热区随图标等比放大（约 48px 起） */
      padding: calc((var(--mail-hit-size) - var(--mail-icon-size)) / 2);
      border: none;
      background: none;
      color: #5931F6;
      cursor: pointer;
      vertical-align: middle;
    }

    .notice-bell svg {
      display: block;
      width: var(--mail-icon-size);
      height: var(--mail-icon-size);
    }

    .notice-dot {
      position: absolute;
      /* 贴住图标右上角，部分压在图标上 */
      top: calc(var(--mail-dot-size) / -4);
      right: calc(var(--mail-dot-size) / -3);
      /* 直径随图标尺寸缩放（约图标 42%） */
      min-width: var(--mail-dot-size);
      height: var(--mail-dot-size);
      padding: 0 3px;
      border-radius: 999px;
      background: #e05a5a;
      color: #fff;
      font-size: calc(var(--mail-dot-size) - 1px);
      font-weight: 700;
      line-height: var(--mail-dot-size);
      text-align: center;
      box-sizing: border-box;
    }

    /* ---------- ①公告栏文字标签（本次新增：absolute，绝不占位、绝不挡点击） ---------- */
    .notice-label {
      position: absolute;
      /* 右缘与图标对齐；bottom 由「图标热区顶边 + 红点向上凸出量(dot/4) + 间隙」推导，
         既满足"图标顶边上方留 2~6px"，又保证与红点矩形零相交（验收 b）。
         当前数值：0.5*48 - 2 + 14/4 + 2 = 27.5px（红点顶边 25.5px，安全余量 2px） */
      right: var(--mail-offset-x);
      bottom: calc(
        0.5 * var(--mail-hit-size) - var(--mail-offset-y) +
        var(--mail-dot-size) / 4 + var(--notice-label-gap)
      );
      font-size: var(--notice-label-font-size);
      color: var(--notice-label-color);
      letter-spacing: var(--notice-label-letter-spacing);
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;   /* 绝不挡图标点击（验收 e） */
    }



/* ===== module: css/main/10-layout.css  (sha16 8a47bb4c49fa4388, 10116B) ===== */
/* ===== css/main/10-layout.css —— 页面骨架：表单区域 / 按钮 / 历史留言区 / 错误提示 / 引导卡 / 点赞 / 楼中楼评论 =====
   · 2026-10-16 从 index.html 的 <style> 按【原顺序】切出：只切不重构，样式一个字符没改
   · 加载顺序（必须保持）：00-tokens → 10-layout → 20-components → 30-themes → 40-art
   · 本文件是第 2／5 段；删掉头部这 5 行，剩下的就是原文对应片段
   ===== */
    /* ---------- 表单区域（融进毛玻璃大卡，不再单独背板） ---------- */
    .form-card {
      margin-bottom: 36px;
    }

    .form-card label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #5d5182;
      margin-bottom: 8px;
    }

    .form-card input,
    .form-card textarea {
      width: 100%;
      padding: 11px 16px;
      border: 1px solid #e5e0f0;
      border-radius: 12px;
      background: #fff;
      font-size: 15px;
      font-family: inherit;
      color: #333;
      outline: none;
    }

    .form-card input:focus,
    .form-card textarea:focus {
      border-color: #5931F6;
      box-shadow: 0 0 0 3px rgba(89, 49, 246, 0.15); /* 聚焦柔光描边 */
    }

    .nickname-field {
      max-width: 320px;
      margin-bottom: 18px;
    }

    .content-field {
      margin-bottom: 22px;
    }

    /* 【本轮修复】编辑框不再带原生右下角拖拽把手（原 resize: vertical）：
       手机端手指按到框的右下角小角再向下滑，会把框无限拉长、页面被撑得冗长且无法自动恢复。
       改为 resize: none + 下方 JS 按内容自动增高（长到上限后改为框内滚动）。 */
    .form-card textarea {
      min-height: 120px;
      resize: none;
      line-height: 1.6;
    }

    /* ---------- 按钮：胶囊 + 渐变底（提交 / 加载更多 / 引导按钮共用） ---------- */
    .submit-button,
    .load-more-button,
    .guide-card button {
      padding: 11px 28px;
      border: none;
      border-radius: 999px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 1px;
      cursor: pointer;
    }

    .submit-button {
      display: block;
      width: 100%;
    }

    .submit-button:disabled,
    .load-more-button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ---------- 历史留言区域 ---------- */
    .history-section h2 {
      font-size: 20px;
      font-weight: 700;
      color: #4a3b7c;
      text-align: center;
      padding-bottom: 10px;
      margin-bottom: 18px;
      border-bottom: 1px solid rgba(89, 49, 246, 0.15);
    }

    /* 列表顶部小字：共 N 条留言 */
    .message-count {
      font-size: 13px;
      color: #9b8fc0;
      text-align: center;
      margin-bottom: 14px;
    }

    /* 留言列表容器透明，内部每条留言是一张独立小卡片 */
    .message-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* 每条留言：独立小卡片 */
    .message-item {
      background: #fff;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .message-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .message-nickname {
      font-size: 15px;
      font-weight: 700;
      color: #5931F6;
    }

    .message-time {
      font-size: 12px;
      color: #999;
    }

    .message-content {
      font-size: 15px;
      color: #333;
      line-height: 1.7;
      white-space: pre-wrap;        /* 保留编辑时的换行与缩进（与编辑栏排版一致） */
      word-break: break-word;
      overflow-wrap: break-word;    /* 超长英文/链接/表情连排时不撑破卡片 */
    }

    .empty-tip {
      text-align: center;
      color: #b3a8cc;
      font-size: 15px;
      padding: 18px 0;
    }

    /* ---------- 表单错误提示 ---------- */
    .error-tip {
      margin-top: 14px;
      font-size: 14px;
      color: #e05a5a;
      text-align: center;
    }

    .error-tip.info {
      color: #8b8fa8;
    }

    /* 【2026-10-13 统一口径】字数上限小提示（昵称 30 字 / 留言与评论 2000 字）：
       超过上限显示红字，刚到上限显示灰字，其余情况隐藏、零占位 */
    .len-tip {
      margin-top: 6px;
      font-size: 12px;
      color: #e05a5a;
      line-height: 1.5;
    }

    .len-tip.is-max {
      color: #8b8fa8;
    }

    /* 「加载更多」按钮居中 */
    .load-more-button {
      display: block;
      margin: 20px auto 0;
    }

    [hidden] {
      display: none !important;
    }

    /* ---------- 引导卡片 ---------- */
    .guide-card {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 16px;
      padding: 30px 24px;
      text-align: center;
      box-shadow: 0 4px 16px rgba(31, 38, 135, 0.08);
      margin-bottom: 36px;
    }

    .guide-card h2 {
      font-size: 22px;
      font-weight: 700;
      color: #5931F6;
      margin-bottom: 10px;
    }

    .guide-card p {
      font-size: 14px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 20px;
    }

    /* 【本轮改动 2026-10-07】取消留言区静默防复制：
       原 user-select:none 挡住了"复制自己/别人的留言文字"等正当场景；
       防刷职责本就由后端承担（gate 门禁 + 访客唯一约束 + 内容审查），
       展示层不再禁选。规则整体移除，页面其余部分零影响。 */

    /* 「查看历史留言」按钮：进站默认收起时展示，点击后展开（毛玻璃紫色系，居中醒目） */
    .view-history-button {
      align-self: center;
      margin: 14px 0;
      padding: 13px 36px;
      border: 1px solid rgba(89, 49, 246, 0.3);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.85);
      color: #5931F6;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1);
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .view-history-button:hover {
      transform: translateY(-2px);
    }

    /* ---------- 点赞按钮样式 ---------- */
    .message-footer {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }

    .like-button {
      padding: 5px 16px;
      border: 1px solid rgba(89, 49, 246, 0.25);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      color: #5931F6;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .like-button:hover:not(:disabled) {
      transform: translateY(-1px);
    }

    .like-button.liked {
      background: rgba(255, 238, 240, 0.9);
      border-color: rgba(214, 69, 80, 0.3);
      color: #d64550;
      cursor: pointer; /* 已赞后仍可再次点击取消赞 */
    }

    .like-button:disabled {
      opacity: 0.9;
    }

    /* ---------- 楼中楼评论样式 ---------- */
    .comment-thread {
      margin: 12px 0 2px;
      padding: 10px 12px;
      background: rgba(89, 49, 246, 0.06);
      border-radius: 12px;
      font-size: 13px;
    }

    .comment-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .comment-row {
      border-left: 2px solid rgba(89, 49, 246, 0.22);
      padding: 2px 0 2px 10px;
    }

    .comment-row-head {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 2px;
    }

    .comment-nick {
      font-size: 12px;
      font-weight: 700;
      color: #5931F6;
    }

    .comment-time {
      font-size: 11px;
      color: #b3a8cc;
    }

    .comment-text {
      font-size: 12.5px;
      line-height: 1.6;
      color: #5a5570;
      white-space: pre-wrap;   /* 【本轮优化】保留换行，排版与留言区一致 */
      word-break: break-word;  /* 【本轮优化】超长连续字符不撑破卡片 */
      overflow-wrap: break-word;
    }

    .comment-form {
      margin-top: 12px;
    }

    .comment-nick-input {
      display: block;
      width: 60%;
      max-width: 200px;
      padding: 7px 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e0f0;
      border-radius: 10px;
      font-size: 13px;
      font-family: inherit;
      outline: none;
    }

    .comment-nick-input:focus,
    .comment-content-input:focus {
      border-color: #5931F6;
      box-shadow: 0 0 0 3px rgba(89, 49, 246, 0.12);
    }

    .comment-content-input {
      display: block;
      width: 100%;
      min-height: 56px;
      padding: 8px 12px;
      border: 1px solid #e5e0f0;
      border-radius: 10px;
      font-size: 13px;
      font-family: inherit;
      resize: none; /* 【本轮】同上：关闭原生拖拽把手，改由 JS 按内容自动增高 */
      outline: none;
    }

    .comment-submit {
      margin-top: 10px;
      padding: 7px 20px;
      font-size: 13px;
    }

    /* 「展开更早的评论」按钮 */
    .comment-more-button {
      align-self: flex-start;
      margin-top: 6px;
      padding: 6px 14px;
      font-size: 12px;
      color: #5931F6;
    }

    .comment-load-error,
    .comment-post-error {
      margin: 8px 0 0;
      font-size: 12px;
      color: #e05a5a;
    }

    /* 【本轮改动 2026-10-07】原"防复制豁免块"随上方禁选规则一并取消：
       禁选已不存在，豁免规则成了死代码，一并移除，逻辑保持干净。 */



/* ===== module: css/main/20-components.css  (sha16 2e9c55313b1a6789, 25924B) ===== */
/* ===== css/main/20-components.css —— 组件与弹层：公告日志弹窗 / 长文展开与阅读器 / 调试开关 / 全屏封禁 / 响应式手机端 / 引导页覆盖层 =====
   · 2026-10-16 从 index.html 的 <style> 按【原顺序】切出：只切不重构，样式一个字符没改
   · 加载顺序（必须保持）：00-tokens → 10-layout → 20-components → 30-themes → 40-art
   · 本文件是第 3／5 段；删掉头部这 5 行，剩下的就是原文对应片段
   ===== */
    /* ---------- 公告日志弹窗 ---------- */
    .notice-modal {
      position: fixed;
      inset: 0;
      z-index: 8000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(30, 22, 52, 0.6);
    }

    .notice-modal.open {
      display: flex;
      animation: noticeFade 0.2s ease;
    }

    .notice-panel {
      width: min(360px, calc(100vw - 32px));
      max-height: var(--notice-panel-max-height); /* 弹窗总高固定，不随公告数量撑爆 */
      display: flex;
      flex-direction: column;
      padding: 20px 18px;
      background: rgba(255, 255, 255, 0.96);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.18);
    }

    .notice-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
      flex: none;
    }

    .notice-title {
      font-size: 17px;
      font-weight: 700;
      color: #4a3b7c;
      letter-spacing: 1px;
    }

    .notice-close {
      padding: 2px 10px;
      border: none;
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.12);
      color: #5931F6;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }

    .notice-list {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      /* 内容区初始恰好容纳最新两条；第三条起在下方滚动查看 */
      max-height: var(--notice-list-max-height);
      /* 经典窄滚动条：Firefox */
      scrollbar-width: thin;
      scrollbar-color: var(--notice-scrollbar-thumb) var(--notice-scrollbar-track);
    }

    /* 经典窄滚动条：WebKit（Chrome/Safari/Edge） */
    .notice-list::-webkit-scrollbar {
      width: var(--notice-scrollbar-width);
    }

    .notice-list::-webkit-scrollbar-track {
      background: var(--notice-scrollbar-track);
      border-radius: 4px;
    }

    .notice-list::-webkit-scrollbar-thumb {
      background: var(--notice-scrollbar-thumb);
      border-radius: 4px;
    }

    /* ---------- 长文分段展开："展开查看更多"按钮（位于内容左下角） ---------- */
    .expand-more-button {
      display: block;                      /* 独占一行，自然落在左下角 */
      margin: 10px 0 0;
      padding: 5px 14px;
      border: 1px solid rgba(89, 49, 246, 0.32);
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.10);
      color: #6f5bd6;
      font-size: 13px;
      font-family: inherit;
      letter-spacing: 0.5px;
      cursor: pointer;
    }

    .expand-more-button:hover {
      background: rgba(89, 49, 246, 0.18);
    }

    /* 评论区内的按钮：整体缩小一号，避免抢戏 */
    .expand-more-button.is-compact {
      margin-top: 6px;
      padding: 3px 11px;
      font-size: 11.5px;
    }

    /* "收回全部"按钮：仅在全部展开完出现，按下回到最初 300 字 */
    .collapse-all-button {
      display: block;
      margin: 8px 0 0;
      padding: 5px 14px;
      border: 1px solid rgba(89, 49, 246, 0.22);
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.06);
      color: #8a7ec9;
      font-size: 13px;
      font-family: inherit;
      letter-spacing: 0.5px;
      cursor: pointer;
    }

    .collapse-all-button:hover {
      background: rgba(89, 49, 246, 0.12);
    }

    .collapse-all-button.is-compact {
      margin-top: 5px;
      padding: 3px 11px;
      font-size: 11.5px;
    }

    /* 两个按钮都带 display:block，必须让 [hidden] 仍能生效 */
    .expand-more-button[hidden],
    .collapse-all-button[hidden] {
      display: none !important;
    }

    /* ---------- 长文阅读器（大号"公告栏"：右侧窄滑块，一次性看完全文） ---------- */
    .reader-modal {
      position: fixed;
      inset: 0;
      z-index: 8500;                       /* 高于公告弹窗，低于封禁警告 */
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(30, 22, 52, 0.6);
    }

    .reader-modal.open {
      display: flex;
      animation: noticeFade 0.2s ease;
    }

    .reader-panel {
      width: min(var(--reader-panel-width), calc(100vw - 32px));
      max-height: var(--reader-panel-max-height);
      display: flex;
      flex-direction: column;
      padding: 20px 22px;
      background: rgba(255, 255, 255, 0.97);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
    }

    .reader-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      flex: none;
    }

    .reader-head-text {
      min-width: 0;                        /* 允许内部文字正常换行/截断 */
    }

    .reader-nick {
      font-size: 15px;
      font-weight: 700;
      color: #5931F6;
    }

    .reader-meta {
      margin-left: 10px;
      font-size: 12px;
      color: #b3a8cc;
    }

    .reader-close {
      flex: none;
      padding: 2px 10px;
      border: none;
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.12);
      color: #5931F6;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }

    .reader-body {
      flex: 1 1 auto;
      min-height: 120px;
      overflow-y: auto;                    /* 右侧出现窄滑块，可滑到全文末尾 */
      -webkit-overflow-scrolling: touch;
      padding-right: 8px;
      font-size: 15.5px;
      line-height: 1.85;
      color: #333;
      white-space: pre-wrap;               /* 保留原有换行 */
      word-break: break-word;
      overflow-wrap: break-word;           /* 长串/表情连排不撑破阅读器 */
      /* 经典窄滚动条：Firefox */
      scrollbar-width: thin;
      scrollbar-color: var(--notice-scrollbar-thumb) var(--notice-scrollbar-track);
    }

    /* 经典窄滚动条：WebKit（Chrome/Safari/Edge） */
    .reader-body::-webkit-scrollbar {
      width: var(--notice-scrollbar-width);
    }

    .reader-body::-webkit-scrollbar-track {
      background: var(--notice-scrollbar-track);
      border-radius: 4px;
    }

    .reader-body::-webkit-scrollbar-thumb {
      background: var(--notice-scrollbar-thumb);
      border-radius: 4px;
    }

    /* ---------- 长文提示小弹窗（三个出口：全屏观看 / 取消 / ✕） ---------- */
    .long-tip-modal {
      position: fixed;
      inset: 0;
      z-index: 8600;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(30, 22, 52, 0.45);
    }

    .long-tip-modal.open {
      display: flex;
      animation: noticeFade 0.18s ease;
    }

    .long-tip-panel {
      position: relative;
      width: min(330px, calc(100vw - 40px));
      padding: 22px 20px 18px;
      background: rgba(255, 255, 255, 0.98);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
      text-align: center;
    }

    .long-tip-close {
      position: absolute;
      top: 6px;
      right: 8px;
      padding: 2px 8px;
      border: none;
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.10);
      color: #5931F6;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }

    .long-tip-text {
      margin: 6px 0 16px;
      font-size: 14px;
      line-height: 1.7;
      color: #4a3b7c;
    }

    .long-tip-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }

    .long-tip-btn {
      padding: 8px 18px;
      border: 1px solid rgba(89, 49, 246, 0.35);
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.10);
      color: #6f5bd6;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
    }

    .long-tip-btn-primary {
      border-color: transparent;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
    }

    /* ---------- 临时调试开关（夸张验证用） ----------
       用法：push 后访问 index.html?maildebug=1 或 ?noticedebug=1（可同时）
       验收完成后，删除本注释块即可（不影响正式样式） */
    body.mail-debug {
      --mail-icon-size: 50px;
      --mail-dot-size: 22px;
      --mail-offset-x: 40px;
      --mail-offset-y: 40px;
    }

    body.mail-debug .notice-bell {
      outline: 3px dashed red;
    }

    /* ①验收 a：夸张测试——标签字号调 3 倍（12px → 36px）+ 红描边，
       用于证明 --notice-label-font-size 变量真的生效；验收完成后删掉本规则即回调。 */
    body.mail-debug .notice-label {
      --notice-label-font-size: 36px;
      outline: 2px dashed red;
    }

    body.notice-debug .notice-list {
      max-height: 150px !important;
      outline: 3px dashed red;
      --notice-scrollbar-width: 14px;
      --notice-scrollbar-thumb: red;
      --notice-scrollbar-track: #ffe3e3;
    }

    .notice-item {
      padding: 10px 0;
      border-bottom: 1px dashed rgba(89, 49, 246, 0.18);
    }

    .notice-item:last-child {
      border-bottom: none;
    }

    .notice-item-head {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 3px;
    }

    .notice-nick {
      font-size: 14px;
      font-weight: 700;
      color: #5931F6;
    }

    /* ③"（已修改）"角标：位于管理员昵称右侧、正文上方（就在昵称那一行内） */
    .notice-modified {
      position: relative;    /* 留在正常文档流中，不覆盖任何元素 */
      z-index: 0;            /* 层级最低：绝不遮挡昵称与正文 */
      margin-left: var(--notice-modified-gap);
      font-size: var(--notice-modified-font-size);
      color: var(--notice-modified-color);
      letter-spacing: 0;
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;   /* 不换行 */
      flex: none;            /* 不被压缩，不挤压正文 */
    }

    .notice-time {
      margin-left: auto;
      font-size: 12px;
      color: #999;
    }

    .notice-content {
      font-size: 14px;
      line-height: 1.6;
      color: #333;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .notice-empty {
      padding: 24px 0;
      text-align: center;
      color: #9b8fc0;
      font-size: 14px;
    }

    /* 弹窗打开期间锁定背后页面滚动 */
    .notice-open-body {
      overflow: hidden;
    }

    @keyframes noticeFade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .notice-modal {
        animation: none;
      }
    }

    /* ---------- 全屏封禁警告（行业级严厉风格） ---------- */
    .ban-overlay {
      position: fixed;
      inset: 0;
      z-index: 2147483647;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: linear-gradient(160deg, #1a0508 0%, #3d0a10 55%, #6b0f1d 100%);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }

    .ban-panel {
      width: 100%;
      max-width: 430px;
      padding: 34px 26px;
      text-align: center;
      background: rgba(122, 12, 24, 0.94);
      border: 2px solid #ff5b6e;
      border-radius: 18px;
      box-shadow: 0 0 60px rgba(255, 60, 80, 0.35);
      color: #fff;
    }

    .ban-icon {
      display: block;
      font-size: 46px;
      margin-bottom: 14px;
    }

    .ban-text {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.7;
    }

    .ban-exit {
      display: inline-block;
      margin-top: 26px;
      padding: 12px 36px;
      border: none;
      border-radius: 999px;
      background: #ff5b6e;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
    }

    .ban-exit:disabled {
      background: #7a7a7a;
      cursor: not-allowed;
    }

    /* 弹窗打开期间锁定背景滚动 */
    .ban-body-lock {
      overflow: hidden;
    }

    /* 移动端降级：关闭 backdrop，改纯色深红不透明背景 */
    @media (max-width: 600px) {
      .ban-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: #2a050b;
      }
    }

    /* ---------- 响应式（手机端） ---------- */
    @media (max-width: 600px) {
      .container {
        width: calc(100% - 24px);
        padding: 28px 18px 32px;
        border-radius: 16px;
      }

      .page-title {
        font-size: 28px;
      }

      .subtitle-row {
        margin-bottom: 26px;
      }

      .subtitle-row .page-subtitle {
        margin-bottom: 0;
      }

      .page-subtitle {
        font-size: 13px;
      }

      /* 移动端毛玻璃降级：关闭 backdrop-filter，改用纯色半透明底 */
      .container {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(255, 255, 255, 0.95);
      }

      .intro-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(20, 12, 40, 0.9);
      }

      .message-item {
        padding: 12px 14px;
      }

      .guide-card {
        padding: 24px 16px;
      }

      .form-card input,
      .form-card textarea {
        font-size: 16px; /* 防止 iOS 聚焦时自动放大 */
      }
    }
    /* ============================================================
       动效（Step 6）：只允许动 transform / opacity；
       box-shadow 仅作为聚焦柔光的渐显过渡，不用于连续动画
    ============================================================ */

    /* 1. 页面初次进入：整个主内容容器淡入 */
    .container {
      animation: fadeIn 0.3s ease-out;
    }

    /* 2. 留言卡片入场：淡入 + 轻微上滑（「加载更多」追加的卡片同样生效） */
    .message-item {
      animation: fadeUp 0.4s ease-out;
    }

    /* 8. 门禁引导卡片：显示时同样淡入上滑 */
    .guide-card {
      animation: fadeUp 0.4s ease-out;
    }

    /* 5. 输入框聚焦：柔光描边渐显而非瞬间出现 */
    .form-card input,
    .form-card textarea {
      transition: box-shadow 0.2s ease;
    }

    /* 3/4. 按钮：悬停轻抬、按下微缩，只动 transform */
    .submit-button,
    .load-more-button,
    .guide-card button {
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .submit-button:hover:not(:disabled),
    .load-more-button:hover:not(:disabled),
    .guide-card button:hover {
      transform: translateY(-2px);
    }

    .submit-button:active:not(:disabled),
    .load-more-button:active:not(:disabled),
    .guide-card button:active {
      transform: scale(0.97);
    }

    /* 6. 「加载更多」请求期间：半透明 */
    .load-more-button.is-loading {
      opacity: 0.6;
    }

    /* 7. 背景柔光粒子装饰（纯 CSS：两个径向渐变光晕，缓慢漂浮呼吸） */
    body::before,
    body::after {
      content: '';
      position: fixed;
      z-index: -1;
      pointer-events: none;
      border-radius: 50%;
      filter: blur(60px); /* 静态光晕，不做逐帧动画 */
      will-change: transform, opacity; /* 只加在真正持续动画的元素上 */
    }

    /* 增强态（默认）：光晕更大更亮 + 呼吸式漂浮 */
    body::before {
      top: 8%;
      left: -6%;
      width: 460px;
      height: 460px;
      background: radial-gradient(circle at center, rgba(251, 194, 235, 0.7), rgba(251, 194, 235, 0) 70%);
      animation: float 11s ease-in-out infinite;
    }

    body::after {
      bottom: 5%;
      right: -6%;
      width: 440px;
      height: 440px;
      background: radial-gradient(circle at center, rgba(89, 49, 246, 0.42), rgba(89, 49, 246, 0) 70%);
      animation: float 11s ease-in-out infinite;
      animation-delay: -5.5s; /* 与第一个装饰错开相位 */
    }

    /* 降档态：帧率看门狗命中 body.low-fps 时，一次性回到增强前水平 */
    body.low-fps::before {
      width: 420px;
      height: 420px;
      background: radial-gradient(circle at center, rgba(251, 194, 235, 0.55), rgba(251, 194, 235, 0) 70%);
      animation: floatSoft 12s ease-in-out infinite;
    }

    body.low-fps::after {
      width: 420px;
      height: 420px;
      background: radial-gradient(circle at center, rgba(89, 49, 246, 0.3), rgba(89, 49, 246, 0) 70%);
      animation: floatSoft 12s ease-in-out infinite;
      animation-delay: -6s;
    }

    /* ---------- 创立初衷引导页覆盖层（每次访问展示，覆盖在最上层） ---------- */
    .intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999; /* 高于页面所有现有元素（含 gate 锁层） */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(43, 30, 74, 0.72); /* 暗紫半透明，毛玻璃盖住全屏 */
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      opacity: 1;
      transition: opacity 0.6s ease, transform 0.6s ease; /* 淡出约 600ms */
    }

    .intro-overlay.is-leaving {
      opacity: 0;
      transform: translateY(10px); /* 轻微下沉淡出 */
      pointer-events: none;        /* 淡出过程中不再拦截下方点击 */
    }

    .intro-card {
      width: 100%;
      max-width: 460px;
      padding: 36px 30px;
      text-align: center;
      background: rgba(255, 255, 255, 0.92);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25);
    }

    .intro-title {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #4a3b7c;
      margin-bottom: 18px;
    }

    .intro-text {
      font-size: 16px;
      line-height: 2;
      color: #333;
    }

    .intro-button {
      margin-top: 26px;
      padding: 13px 40px;
      border: none;
      border-radius: 999px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 1px;
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .intro-button:hover {
      transform: translateY(-2px);
    }

    .intro-button:active {
      transform: scale(0.97);
    }

    /* 按钮下方小字提示（约正文 80% 字号，透明度稍降，居中） */
    .intro-hint {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.8;
      color: #9b8fc0;
      opacity: 0.75;
    }

    .intro-hint:first-of-type {
      margin-top: 16px;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 增强漂浮 + 柔和呼吸（幅度 1.3 倍，opacity 0.85 ↔ 1） */
    @keyframes float {
      0%, 100% {
        transform: translateY(0);
        opacity: 0.85;
      }
      50% {
        transform: translateY(-26px);
        opacity: 1;
      }
    }

    /* 降档漂浮（增强前水平：幅度 -20px，无呼吸） */
    @keyframes floatSoft {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    /* 用户系统开启「减弱动效」时，关闭所有动画与过渡（粒子动画降到最低） */
    @media (prefers-reduced-motion: reduce) {
      .container,
      .message-item,
      .guide-card,
      body::before,
      body::after,
      body.low-fps::before,
      body.low-fps::after {
        animation: none;
      }

      .submit-button,
      .load-more-button,
      .guide-card button,
      .intro-overlay,
      .intro-button,
      .form-card input,
      .form-card textarea {
        transition: none;
      }
    }
    /* ============================================================
       调色板（新增）：页面主题配色切换 —— 紫霞（原有配色，默认） / 秋意（金黄落叶） / 盛夏（嫩绿生机）
       稳定性设计：
       1) 本节全部是「新增规则」，一行都没有改动上方既有样式
          → 默认紫霞配色与改造前 100% 一致，不存在回归风险；
       2) 秋意配色只写在 body[data-theme="autumn"] 之下（选择器优先级更高 + 位置更靠后），
          切回紫霞时这些规则一律不匹配，配色瞬间恢复原样；
       3) 调色板按钮与面板全部绝对定位（脱离排版流）
          → 绝不挤动大标题 / 标语 / 公告栏图标 / 昵称的位置；
       4) 所有配色都只写「文字颜色 / 背景色 / 边框色」，不涉及 display、尺寸、
          层级关系等结构属性 → 不可能造成黑屏、白屏或布局错位。
    ============================================================ */
    :root {
      /* 圆形调色板按钮：位置与尺寸全部由下面这几个变量推导，改这里即可整体微调 */
      --palette-fab-size: 36px;      /* 圆盘直径 */
      --palette-fab-inset: 0px;      /* 圆盘左缘距内容区左缘的距离（0 = 与「昵称」标签左对齐） */
      --palette-panel-rise: 56px;    /* 面板上抬高度：恰好盖住大标题，不侵入下方表单（面板变矮后同步下调） */
      --palette-fab-label-color: #9b8fc0; /* “调色板”三个字的颜色（默认与副标题同色） */
      /* 面板与色卡的主题跟随色（默认 = 紫霞） */
      --theme-accent: #5931F6;
      --theme-accent-soft: rgba(89, 49, 246, 0.16);
      --theme-panel-bg: rgba(255, 255, 255, 0.97);
      --theme-panel-border: rgba(89, 49, 246, 0.20);
      --theme-panel-shadow: 0 12px 30px rgba(48, 36, 96, 0.20), 0 2px 6px rgba(48, 36, 96, 0.10);
      --theme-panel-title: #4a3b7c;
      --theme-panel-text: #8b86a3;
      --theme-option-bg: rgba(89, 49, 246, 0.06);
      --theme-option-border: rgba(89, 49, 246, 0.18);
      --theme-option-name: #4a3b7c;
      --theme-option-desc: #8b86a3;
    }

    /* ============================================================
       【2026-10-17 补丁 B】外链脚本加载失败兜底提示条
       触发：index.html 里 3 个 js/main 脚本的 <script> 带了 onerror，
             加载失败时给 <html> 加 js-load-failed-core / js-load-failed-extra 类。
       设计：默认 display:none（正常访问零影响）；层级 10000 高于引导页（9999）、
             低于封禁警告（2147483647）；不依赖任何外链资源，样式丢失也仍有可读文字。
       回滚：删掉本段 + index.html 的提示条结构与 3 个 onerror 属性即可。
    ============================================================ */
    .load-warning {
      display: none;
      position: fixed;
      left: 50%;
      bottom: 20px;
      z-index: 10000;
      width: min(560px, calc(100vw - 24px));
      transform: translateX(-50%);
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid rgba(89, 49, 246, 0.22);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 10px 30px rgba(48, 36, 96, 0.22);
      color: #4a3b7c;
      font-size: 13px;
      line-height: 1.55;
      text-align: left;
    }

    html.js-load-failed-core .load-warning,
    html.js-load-failed-extra .load-warning {
      display: flex;
    }

    .load-warning__text {
      flex: 1 1 auto;
      min-width: 0;
    }

    .load-warning__title {
      display: block;
      margin-bottom: 2px;
      font-weight: 700;
    }

    .load-warning__core,
    .load-warning__extra {
      display: none;
    }

    html.js-load-failed-core .load-warning__core,
    html.js-load-failed-extra:not(.js-load-failed-core) .load-warning__extra {
      display: inline;
    }

    .load-warning__retry {
      flex: none;
      align-self: center;
      padding: 6px 16px;
      border-radius: 999px;
      background: rgba(89, 49, 246, 0.12);
      color: #5931F6;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
    }

    .load-warning__retry:hover {
      background: rgba(89, 49, 246, 0.2);
    }

    @media (max-width: 600px) {
      .load-warning {
        bottom: 10px;
        padding: 10px 12px;
        font-size: 12.5px;
      }
    }



/* ===== module: css/main/30-themes.css  (sha16 7fd1d33b79494569, 32459B) ===== */
/* ===== css/main/30-themes.css —— 主题与配色：圆形调色板 / 三套主题变体 / 盛夏调整 / 窄屏与手机端微调 =====
   · 2026-10-16 从 index.html 的 <style> 按【原顺序】切出：只切不重构，样式一个字符没改
   · 加载顺序（必须保持）：00-tokens → 10-layout → 20-components → 30-themes → 40-art
   · 本文件是第 4／5 段；删掉头部这 5 行，剩下的就是原文对应片段
   ===== */
    /* ---------- 圆形调色板按钮（左对齐内容区左缘 = 「昵称」正上方，零占位） ---------- */
    .palette-fab-wrap {
      position: absolute;
      top: 50%;
      /* 横向改为「左对齐」：left 相对 .subtitle-row 的内容区，
         而「昵称」标签也恰好从内容区左缘起排 → 圆盘正好落在昵称正上方，不再挤着标语。
         仍是绝对定位（脱离排版流）→ 标题/标语/公告栏图标/昵称位置全部不受影响。
         圆盘 36px 与下方 33px 宽的“调色板”二字都远窄于内容区，绝不可能超出网页。 */
      left: var(--palette-fab-inset);
      width: var(--palette-fab-size);
      height: var(--palette-fab-size);
      transform: translateY(-50%);   /* 圆盘竖向中心 = 标语文字中心 */
      z-index: 30;
    }

    .palette-fab {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 2px solid #ffffff;
      border-radius: 50%;
      /* 兜底纯色：个别老浏览器不支持 conic-gradient 时，仍是一枚完整可点的浅紫圆盘 */
      background-color: #ece2fb;
      /* 【本轮调整 2026-10-11】盘面：四格色轮 → 三格颜料色轮，与三套主题一一对应、各占 120° 均匀分布：
         紫霞 #5931F6（= 主题紫色降亮后的新主色，与全站「那一抹紫」严格同源）/
         秋意 #d9772f / 盛夏 #5aa87c（均为现有主题色卡中的代表色）。
         用「重复色标」的老写法，兼容更多内置浏览器内核 */
      background-image: conic-gradient(
        #5931F6 0deg,
        #5931F6 120deg,
        #d9772f 120deg,
        #d9772f 240deg,
        #5aa87c 240deg,
        #5aa87c 360deg
      );
      box-shadow: 0 2px 8px rgba(49, 38, 96, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
      cursor: pointer;
      transition: transform 0.2s ease;
      /* 【本轮调整】圆盘以自身圆心为基准整体缩小到 85%（原地缩小，不挪位、不改布局流，
         命中热区仍是原来的 36px 圆，好按不费劲）；悬停/按下的缩放也以 85% 为基准等比换算，
         保证任何状态下都不会跳回原尺寸 */
      transform: scale(0.85);
    }

    /* 正中央的留白小圆：更像一块真实的调色盘（纯 CSS，零图片依赖） */
    .palette-fab::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 8px;
      height: 8px;
      margin: -4px 0 0 -4px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 0 0 1px rgba(49, 38, 96, 0.10);
    }

    /* 【本轮调整】悬停/按下：以 85% 基准等比换算（0.85×1.07≈0.91，0.85×0.95≈0.81），
       与静止态的 scale(0.85) 衔接连续，绝不会跳变回原尺寸 */
    .palette-fab:hover { transform: scale(0.91); }
    .palette-fab:active { transform: scale(0.81); }

    .palette-fab.is-active {
      box-shadow: 0 0 0 3px var(--theme-accent-soft), 0 2px 8px rgba(49, 38, 96, 0.26);
    }

    .palette-fab:focus-visible {
      outline: 2px solid var(--theme-accent);
      outline-offset: 2px;
    }

    /* “调色板”三个字：绝对居中挂在圆盘正下方，不换行、不越界
       （宽约 33px，比它所在的圆盘区域还窄，因此一定落在网页内） */
    .palette-fab-label {
      position: absolute;
      top: calc(100% + 3px);
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      line-height: 1;
      letter-spacing: 1px;
      white-space: nowrap;
      color: var(--palette-fab-label-color, #9b8fc0);
      pointer-events: none;
    }

    /* ---------- 调色板面板：就地展开（不是独立弹窗），盖住大标题与标语 ---------- */
    .palette-panel {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(-1 * var(--palette-panel-rise));
      z-index: 40;                     /* 高于按钮本体，低于公告弹窗（8000）与引导页（9999） */
      /* 【本轮】面板整体缩小：内边距 12/14 → 8/10，圆角 16 → 14（与下方字体、圆盘、间距同步缩） */
      padding: 8px 10px;
      border: 1px solid var(--theme-panel-border);
      border-radius: 14px;
      background: var(--theme-panel-bg);
      box-shadow: var(--theme-panel-shadow);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      animation: palettePop 0.18s ease-out;
    }

    /* 双保险：面板隐藏态（全局 [hidden] 规则之外再加一层，绝不会露出半个面板） */
    .palette-panel[hidden] { display: none !important; }

    .palette-panel-head {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 5px;
    }

    .palette-panel-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.8px;
      color: var(--theme-panel-title);
    }

    .palette-hint {
      font-size: 9.5px;
      letter-spacing: 0.3px;
      color: var(--theme-panel-text);
    }

    .palette-close {
      margin-left: auto;
      padding: 1px 8px;
      border: none;
      border-radius: 999px;
      background: var(--theme-accent-soft);
      color: var(--theme-accent);
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
    }

    /* 三张色卡：紫霞 / 秋意 / 盛夏（本轮新增第三个颜色） */
    .palette-options {
      display: flex;
      gap: 7px;
    }

    .palette-option {
      position: relative;   /* 【本轮】对勾标记改为绝对定位的基准：勾不再抢走文字宽度 */
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 7px;
      border: 1px solid var(--theme-option-border);
      border-radius: 10px;
      background: var(--theme-option-bg);
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .palette-option:hover { transform: translateY(-1px); }
    .palette-option:active { transform: scale(0.98); }

    .palette-option.is-active {
      border-color: var(--theme-accent);
      box-shadow: 0 0 0 2px var(--theme-accent-soft);
    }

    /* 色卡圆盘：直接预览该主题的渐变感觉 */
    .palette-swatch {
      flex: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 4px rgba(40, 30, 70, 0.22);
    }

    .palette-swatch-purple {
      background-color: #b9a4ea;
      background-image: conic-gradient(
        #a18cd1 0deg, #a18cd1 120deg,
        #fbc2eb 120deg, #fbc2eb 240deg,
        #5931F6 240deg, #5931F6 360deg
      );
    }

    .palette-swatch-autumn {
      background-color: #e9c078;
      background-image: conic-gradient(
        #9fc0dd 0deg, #9fc0dd 110deg,
        #f3c463 110deg, #f3c463 250deg,
        #d9772f 250deg, #d9772f 360deg
      );
    }

    /* 【本轮新增】盛夏嫩绿：嫩芽绿 → 浅黄绿 → 深一点的叶绿（清爽但不刺眼） */
    .palette-swatch-summer {
      background-color: #a9d8a4;
      background-image: conic-gradient(
        #9eceb8 0deg, #9eceb8 110deg,
        #b9e2a4 110deg, #b9e2a4 250deg,
        #5aa87c 250deg, #5aa87c 360deg
      );
    }

    .palette-option-text {
      min-width: 0;
      line-height: 1.25;
    }

    .palette-option-name {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--theme-option-name);
    }

    .palette-option-desc {
      display: block;
      font-size: 9.5px;
      letter-spacing: 0.4px;
      color: var(--theme-option-desc);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .palette-check {
      display: none;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 10px;
      line-height: 1;
      color: var(--theme-accent);
      pointer-events: none;
    }

    .palette-option.is-active .palette-check { display: inline; }

    /* ---------- 窄屏微调（必须写在上面所有色卡基础规则之后，否则会被后者覆盖） ---------- */
    /* 窄屏（≤360px）：三张色卡并排更挤 → 圆盘 / 内边距 / 字距再收一档，
       经无头 Chrome 实测：三张色卡等宽，且“梦幻紫调 / 金黄落秋 / 盛夏嫩绿”四字描述仍完整可见 */
    @media (max-width: 360px) {
      .palette-panel { padding: 7px 7px; }
      .palette-option { gap: 4px; padding: 5px 5px; }
      .palette-swatch { width: 16px; height: 16px; }
      .palette-option-name { font-size: 10.5px; }
      .palette-option-desc { font-size: 9px; letter-spacing: 0; }
    }

    /* 极窄屏（≤300px，实测 280px）：三列并排已放不下描述短语 → 只留「色卡圆盘 + 名称」，
       面板同时更矮；这类宽度在真机上极少见，属纯兜底，不影响常见机型。 */
    @media (max-width: 300px) {
      .palette-option-desc { display: none; }
    }

    @keyframes palettePop {
      from { opacity: 0; transform: translateY(5px) scale(0.99); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ============================================================
       秋意主题（body[data-theme="autumn"]）—— 新增，仅在选择「秋意」时生效
       取自两张参考照片的色温：
         天空蓝 #9fc0dd ｜ 满树金黄 #f2c162 ｜ 暖阳琥珀 #d99524
         枫叶砖橙 #c86a2a ｜ 阳光洒在米白墙面 #fffdf6 ｜ 暖褐文字 #7a4a22
       表现「微微惆怅的秋意」：整体偏暖、明度略降、蓝金互为补色。
       注意：这里的选择器都比上方原规则多一层 body[data-theme="autumn"]
             且书写位置更靠后，因此只覆盖颜色，不动任何结构。
    ============================================================ */
    body[data-theme="autumn"] {
      /* 调色板按钮 / 面板的主题跟随色 */
      --theme-accent: #b26a17;
      --theme-accent-soft: rgba(199, 137, 52, 0.20);
      --theme-panel-bg: rgba(255, 253, 246, 0.97);
      --theme-panel-border: rgba(199, 137, 52, 0.24);
      --theme-panel-shadow: 0 12px 30px rgba(96, 62, 22, 0.20), 0 2px 6px rgba(96, 62, 22, 0.10);
      --theme-panel-title: #7a4a22;
      --theme-panel-text: #9a8464;
      --theme-option-bg: rgba(199, 137, 52, 0.08);
      --theme-option-border: rgba(199, 137, 52, 0.22);
      --theme-option-name: #7a4a22;
      --theme-option-desc: #9a8464;
      --palette-fab-label-color: #ab7f4e;
      /* 原有变量（公告栏文字标签、弹窗滚动条）在秋意下的取值 */
      --notice-label-color: #ab7f4e;
      --notice-scrollbar-thumb: #e0bd88;
      --notice-scrollbar-track: rgba(199, 137, 52, 0.10);

      /* 页面底色：天空蓝 → 浅金 → 金黄 → 暖赭（秋风起、天高云淡） */
      background: linear-gradient(165deg, #9fc0dd 0%, #ddcfa5 26%, #f2c877 58%, #e2a45f 84%, #cf8f5d 100%);
      background-attachment: fixed;   /* 简写会重置该项，必须补回，保证滚动时背景不跳动 */
      color: #4a3f33;
    }

    /* 毛玻璃大卡片：换成暖白 */
    body[data-theme="autumn"] .container {
      background: rgba(255, 252, 243, 0.74);
      box-shadow: 0 8px 32px rgba(96, 66, 26, 0.14);
    }

    /* 标题 / 标语 / 公告栏图标 */
    body[data-theme="autumn"] .page-title { color: #7a4a22; }
    body[data-theme="autumn"] .page-subtitle { color: #ab7f4e; }
    body[data-theme="autumn"] .notice-bell { color: #c07a1e; }

    /* 留言表单 */
    body[data-theme="autumn"] .form-card label { color: #8a6234; }
    body[data-theme="autumn"] .form-card input,
    body[data-theme="autumn"] .form-card textarea {
      border-color: #e9dcc2;
      background: #fffdf8;
      color: #4a3f33;
    }
    body[data-theme="autumn"] .form-card input:focus,
    body[data-theme="autumn"] .form-card textarea:focus {
      border-color: #d9932f;
      box-shadow: 0 0 0 3px rgba(217, 147, 47, 0.18);
    }

    /* 主要按钮：金 → 砖橙渐变（提交 / 加载更多 / 引导卡按钮 / 引导页按钮 / 长文弹窗主按钮） */
    body[data-theme="autumn"] .submit-button,
    body[data-theme="autumn"] .load-more-button,
    body[data-theme="autumn"] .guide-card button,
    body[data-theme="autumn"] .intro-button,
    body[data-theme="autumn"] .long-tip-btn-primary {
      background: linear-gradient(135deg, #cf9022 0%, #a85a17 100%);
    }

    /* 历史留言区 */
    body[data-theme="autumn"] .history-section h2 {
      color: #7a4a22;
      border-bottom-color: rgba(199, 137, 52, 0.22);
    }
    body[data-theme="autumn"] .message-count { color: #ab7f4e; }
    body[data-theme="autumn"] .message-item {
      background: #fffdf8;
      box-shadow: 0 2px 8px rgba(120, 82, 34, 0.10);
    }
    body[data-theme="autumn"] .message-nickname { color: #c07a1e; }
    body[data-theme="autumn"] .message-time { color: #a5977f; }
    body[data-theme="autumn"] .message-content { color: #4a3f33; }
    body[data-theme="autumn"] .empty-tip { color: #bfae94; }

    /* 门禁引导卡片 */
    body[data-theme="autumn"] .guide-card {
      background: rgba(255, 252, 244, 0.92);
      box-shadow: 0 4px 16px rgba(120, 82, 34, 0.10);
    }
    body[data-theme="autumn"] .guide-card h2 { color: #c07a1e; }
    body[data-theme="autumn"] .guide-card p { color: #6b5c49; }

    /* 「查看历史留言」按钮 */
    body[data-theme="autumn"] .view-history-button {
      border-color: rgba(199, 137, 52, 0.36);
      background: rgba(255, 253, 247, 0.88);
      color: #b06a1c;
      box-shadow: 0 4px 16px rgba(120, 82, 34, 0.12);
    }

    /* 点赞按钮（已赞态保留原有暖红：本就在秋意色系内，无需改动） */
    body[data-theme="autumn"] .like-button {
      border-color: rgba(199, 137, 52, 0.30);
      background: rgba(255, 253, 247, 0.90);
      color: #b06a1c;
    }

    /* 楼中楼评论 */
    body[data-theme="autumn"] .comment-thread { background: rgba(205, 143, 52, 0.09); }
    body[data-theme="autumn"] .comment-row { border-left-color: rgba(199, 137, 52, 0.30); }
    body[data-theme="autumn"] .comment-nick { color: #c07a1e; }
    body[data-theme="autumn"] .comment-time { color: #bfae94; }
    body[data-theme="autumn"] .comment-text { color: #5a4c3c; }
    body[data-theme="autumn"] .comment-nick-input,
    body[data-theme="autumn"] .comment-content-input { border-color: #e9dcc2; }
    body[data-theme="autumn"] .comment-nick-input:focus,
    body[data-theme="autumn"] .comment-content-input:focus {
      border-color: #d9932f;
      box-shadow: 0 0 0 3px rgba(217, 147, 47, 0.15);
    }
    body[data-theme="autumn"] .comment-more-button { color: #b06a1c; }

    /* 「展开查看更多」/「收回全部」按钮 */
    body[data-theme="autumn"] .expand-more-button {
      border-color: rgba(199, 137, 52, 0.36);
      background: rgba(199, 137, 52, 0.12);
      color: #a85f16;
    }
    body[data-theme="autumn"] .expand-more-button:hover { background: rgba(199, 137, 52, 0.20); }
    body[data-theme="autumn"] .collapse-all-button {
      border-color: rgba(199, 137, 52, 0.26);
      background: rgba(199, 137, 52, 0.07);
      color: #a9834f;
    }
    body[data-theme="autumn"] .collapse-all-button:hover { background: rgba(199, 137, 52, 0.14); }

    /* 公告日志弹窗 / 长文阅读器 / 长文提示：遮罩与面板统一为暖褐调 */
    body[data-theme="autumn"] .notice-modal,
    body[data-theme="autumn"] .reader-modal { background: rgba(48, 34, 22, 0.62); }
    body[data-theme="autumn"] .long-tip-modal { background: rgba(48, 34, 22, 0.45); }
    body[data-theme="autumn"] .notice-panel,
    body[data-theme="autumn"] .reader-panel,
    body[data-theme="autumn"] .long-tip-panel { background: rgba(255, 253, 246, 0.97); }
    body[data-theme="autumn"] .notice-panel { box-shadow: 0 8px 32px rgba(96, 62, 22, 0.24); }
    body[data-theme="autumn"] .reader-panel { box-shadow: 0 8px 32px rgba(96, 62, 22, 0.26); }
    body[data-theme="autumn"] .long-tip-panel { box-shadow: 0 8px 32px rgba(96, 62, 22, 0.26); }
    body[data-theme="autumn"] .notice-title { color: #7a4a22; }
    body[data-theme="autumn"] .notice-close,
    body[data-theme="autumn"] .reader-close,
    body[data-theme="autumn"] .long-tip-close {
      background: rgba(199, 137, 52, 0.14);
      color: #b06a1c;
    }
    body[data-theme="autumn"] .notice-item { border-bottom-color: rgba(199, 137, 52, 0.20); }
    body[data-theme="autumn"] .notice-nick { color: #c07a1e; }
    body[data-theme="autumn"] .notice-time { color: #a5977f; }
    body[data-theme="autumn"] .notice-content { color: #4a3f33; }
    body[data-theme="autumn"] .notice-empty { color: #ab7f4e; }
    body[data-theme="autumn"] .reader-nick { color: #c07a1e; }
    body[data-theme="autumn"] .reader-meta { color: #bfae94; }
    body[data-theme="autumn"] .reader-body { color: #4a3f33; }
    body[data-theme="autumn"] .long-tip-text { color: #7a4a22; }
    body[data-theme="autumn"] .long-tip-btn {
      border-color: rgba(199, 137, 52, 0.38);
      background: rgba(199, 137, 52, 0.12);
      color: #a85f16;
    }

    /* 创立初衷引导页 */
    body[data-theme="autumn"] .intro-overlay { background: rgba(56, 38, 22, 0.72); }
    body[data-theme="autumn"] .intro-card {
      background: rgba(255, 252, 245, 0.94);
      box-shadow: 0 8px 32px rgba(96, 66, 26, 0.25);
    }
    body[data-theme="autumn"] .intro-title { color: #7a4a22; }
    body[data-theme="autumn"] .intro-text { color: #463a2c; }
    body[data-theme="autumn"] .intro-hint { color: #ab7f4e; }

    /* 背景柔光粒子：暖金 + 砖橙（含低帧率降档态 body.low-fps） */
    body[data-theme="autumn"]::before {
      background: radial-gradient(circle at center, rgba(255, 206, 108, 0.62), rgba(255, 206, 108, 0) 70%);
    }
    body[data-theme="autumn"]::after {
      background: radial-gradient(circle at center, rgba(214, 116, 60, 0.42), rgba(214, 116, 60, 0) 70%);
    }
    body[data-theme="autumn"].low-fps::before {
      background: radial-gradient(circle at center, rgba(255, 206, 108, 0.50), rgba(255, 206, 108, 0) 70%);
    }
    body[data-theme="autumn"].low-fps::after {
      background: radial-gradient(circle at center, rgba(214, 116, 60, 0.32), rgba(214, 116, 60, 0) 70%);
    }

    /* ============================================================
       盛夏主题（body[data-theme="summer"]）—— 本轮新增，仅在选择「盛夏」时生效
       色温取自「盛夏生机勃勃的嫩绿」：
         嫩芽黄绿 #b9e2a4 ｜ 薄荷青绿 #9eceb8 ｜ 叶绿 #5aa87c
         深绿文字 #2f6b4a ｜ 清透绿白底 #fbfffc ｜ 柔和边框 #d5e7db
       刻意压低饱和度（主强调色约 37%），明度保持柔和通透
         → 页面清爽有生机，但不会因为绿色过艳而显得刺眼、发亮。
       注意：与秋意完全同构 —— 选择器只多一层 body[data-theme="summer"]，
             且只覆盖颜色类属性，不涉及 display / 尺寸 / 层级
             → 切回紫霞或秋意时本段一律不匹配，不可能造成白屏、黑屏或布局错位。
    ============================================================ */
    body[data-theme="summer"] {
      /* 调色板按钮 / 面板的主题跟随色 */
      --theme-accent: #4f9d6b;
      --theme-accent-soft: rgba(122, 190, 148, 0.20);
      --theme-panel-bg: rgba(240, 246, 241, 0.97);   /* 【本轮调整 2026-10-13】亮度 −5%（调色板面板底） */
      --theme-panel-border: rgba(110, 175, 132, 0.26);
      --theme-panel-shadow: 0 12px 30px rgba(30, 70, 52, 0.20), 0 2px 6px rgba(30, 70, 52, 0.10);
      --theme-panel-title: #2f6b4a;
      --theme-panel-text: #7f9c8a;
      --theme-option-bg: rgba(110, 175, 132, 0.08);
      --theme-option-border: rgba(110, 175, 132, 0.24);
      --theme-option-name: #2f6b4a;
      --theme-option-desc: #7f9c8a;
      --palette-fab-label-color: #7f9c8a;
      /* 原有变量（公告栏文字标签、弹窗滚动条）在盛夏下的取值 */
      --notice-label-color: #7f9c8a;
      --notice-scrollbar-thumb: #a8cfb6;
      --notice-scrollbar-track: rgba(110, 175, 132, 0.10);

      /* 【本轮调整 2026-10-13】页面底色整体亮度 −10%（只压明度，色相/饱和度一字未动，仍是夏日嫩绿）
         改前：linear-gradient(165deg, #9eceb8 0%, #c6e3b6 26%, #9dd09a 58%, #82c094 84%, #70b492 100%)
         改法：每个色标三通道 ×0.9。要还原就换回上面那一行。 */
      background: linear-gradient(165deg, #8eb9a6 0%, #b2cca4 26%, #8dbb8b 58%, #75ad85 84%, #65a283 100%);
      background-attachment: fixed;   /* 简写会重置该项，必须补回，保证滚动时背景不跳动 */
      color: #33493d;
    }

    /* 毛玻璃大卡片：换成清透的绿白
       【本轮调整 2026-10-13】亮度 −5%：rgba(250,255,251,.74) → rgba(237,243,238,.78) */
    body[data-theme="summer"] .container {
      background: rgba(237, 243, 238, 0.78);
      box-shadow: 0 8px 32px rgba(34, 78, 58, 0.14);
    }

    /* 标题 / 标语 / 公告栏图标 */
    body[data-theme="summer"] .page-title { color: #2f6b4a; }
    body[data-theme="summer"] .page-subtitle { color: #7f9c8a; }
    body[data-theme="summer"] .notice-bell { color: #3f8f63; }

    /* 留言表单 */
    body[data-theme="summer"] .form-card label { color: #3d7458; }
    body[data-theme="summer"] .form-card input,
    body[data-theme="summer"] .form-card textarea {
      border-color: #d5e7db;
      background: #eff5f0;   /* 【本轮调整 2026-10-13】#fbfffc → #eff5f0（约 −5%，降低输入框反光） */
      color: #33493d;
    }
    body[data-theme="summer"] .form-card input:focus,
    body[data-theme="summer"] .form-card textarea:focus {
      border-color: #4f9d6b;
      box-shadow: 0 0 0 3px rgba(79, 157, 107, 0.18);
    }

    /* 主要按钮：嫩绿 → 叶绿渐变（提交 / 加载更多 / 引导卡按钮 / 引导页按钮 / 长文弹窗主按钮） */
    body[data-theme="summer"] .submit-button,
    body[data-theme="summer"] .load-more-button,
    body[data-theme="summer"] .guide-card button,
    body[data-theme="summer"] .intro-button,
    body[data-theme="summer"] .long-tip-btn-primary {
      /* 【本轮调整 2026-10-13】按钮亮度 −10%：#74c48e/#3f8f63 → #68b080/#398159 */
      background: linear-gradient(135deg, #68b080 0%, #398159 100%);
    }

    /* 历史留言区 */
    body[data-theme="summer"] .history-section h2 {
      color: #2f6b4a;
      border-bottom-color: rgba(110, 175, 132, 0.24);
    }
    body[data-theme="summer"] .message-count { color: #7f9c8a; }
    body[data-theme="summer"] .message-item {
      background: #eff5f0;   /* 【本轮调整 2026-10-13】#fbfffc → #eff5f0（约 −5%） */
      box-shadow: 0 2px 8px rgba(40, 90, 66, 0.10);
    }
    body[data-theme="summer"] .message-nickname { color: #3f8f63; }
    body[data-theme="summer"] .message-time { color: #8fae9c; }
    body[data-theme="summer"] .message-content { color: #33493d; }
    body[data-theme="summer"] .empty-tip { color: #a6c2b2; }

    /* 门禁引导卡片 */
    body[data-theme="summer"] .guide-card {
      background: rgba(238, 244, 239, 0.92);   /* 【本轮调整 2026-10-13】亮度 −5% */
      box-shadow: 0 4px 16px rgba(40, 90, 66, 0.10);
    }
    body[data-theme="summer"] .guide-card h2 { color: #3f8f63; }
    body[data-theme="summer"] .guide-card p { color: #4e6b5c; }

    /* 「查看历史留言」按钮 */
    body[data-theme="summer"] .view-history-button {
      border-color: rgba(110, 175, 132, 0.38);
      background: rgba(240, 246, 241, 0.88);   /* 【本轮调整 2026-10-13】亮度 −5% */
      color: #357a55;
      box-shadow: 0 4px 16px rgba(40, 90, 66, 0.12);
    }

    /* 点赞按钮（已赞态的暖红与嫩绿同属清透色系，无需改动） */
    body[data-theme="summer"] .like-button {
      border-color: rgba(110, 175, 132, 0.30);
      background: rgba(240, 246, 241, 0.90);   /* 【本轮调整 2026-10-13】亮度 −5% */
      color: #357a55;
    }

    /* 楼中楼评论 */
    body[data-theme="summer"] .comment-thread { background: rgba(110, 175, 132, 0.10); }
    body[data-theme="summer"] .comment-row { border-left-color: rgba(110, 175, 132, 0.30); }
    body[data-theme="summer"] .comment-nick { color: #3f8f63; }
    body[data-theme="summer"] .comment-time { color: #a6c2b2; }
    body[data-theme="summer"] .comment-text { color: #3f5c4c; }
    body[data-theme="summer"] .comment-nick-input,
    body[data-theme="summer"] .comment-content-input { border-color: #d5e7db; }
    body[data-theme="summer"] .comment-nick-input:focus,
    body[data-theme="summer"] .comment-content-input:focus {
      border-color: #4f9d6b;
      box-shadow: 0 0 0 3px rgba(79, 157, 107, 0.15);
    }
    body[data-theme="summer"] .comment-more-button { color: #357a55; }

    /* 「展开查看更多」/「收回全部」按钮 */
    body[data-theme="summer"] .expand-more-button {
      border-color: rgba(110, 175, 132, 0.38);
      background: rgba(110, 175, 132, 0.12);
      color: #2f7c52;
    }
    body[data-theme="summer"] .expand-more-button:hover { background: rgba(110, 175, 132, 0.20); }
    body[data-theme="summer"] .collapse-all-button {
      border-color: rgba(110, 175, 132, 0.26);
      background: rgba(110, 175, 132, 0.07);
      color: #6d8f7d;
    }
    body[data-theme="summer"] .collapse-all-button:hover { background: rgba(110, 175, 132, 0.14); }

    /* 公告日志弹窗 / 长文阅读器 / 长文提示：遮罩与面板统一为深绿调 */
    body[data-theme="summer"] .notice-modal,
    body[data-theme="summer"] .reader-modal { background: rgba(24, 48, 38, 0.62); }
    body[data-theme="summer"] .long-tip-modal { background: rgba(24, 48, 38, 0.45); }
    body[data-theme="summer"] .notice-panel,
    body[data-theme="summer"] .reader-panel,
    body[data-theme="summer"] .long-tip-panel { background: rgba(240, 246, 241, 0.97); }   /* 【本轮调整 2026-10-13】亮度 −5% */
    body[data-theme="summer"] .notice-panel { box-shadow: 0 8px 32px rgba(30, 70, 52, 0.24); }
    body[data-theme="summer"] .reader-panel { box-shadow: 0 8px 32px rgba(30, 70, 52, 0.26); }
    body[data-theme="summer"] .long-tip-panel { box-shadow: 0 8px 32px rgba(30, 70, 52, 0.26); }
    body[data-theme="summer"] .notice-title { color: #2f6b4a; }
    body[data-theme="summer"] .notice-close,
    body[data-theme="summer"] .reader-close,
    body[data-theme="summer"] .long-tip-close {
      background: rgba(110, 175, 132, 0.14);
      color: #357a55;
    }
    body[data-theme="summer"] .notice-item { border-bottom-color: rgba(110, 175, 132, 0.20); }
    body[data-theme="summer"] .notice-nick { color: #3f8f63; }
    body[data-theme="summer"] .notice-time { color: #8fae9c; }
    body[data-theme="summer"] .notice-content { color: #33493d; }
    body[data-theme="summer"] .notice-empty { color: #7f9c8a; }
    body[data-theme="summer"] .reader-nick { color: #3f8f63; }
    body[data-theme="summer"] .reader-meta { color: #a6c2b2; }
    body[data-theme="summer"] .reader-body { color: #33493d; }
    body[data-theme="summer"] .long-tip-text { color: #2f6b4a; }
    body[data-theme="summer"] .long-tip-btn {
      border-color: rgba(110, 175, 132, 0.38);
      background: rgba(110, 175, 132, 0.12);
      color: #2f7c52;
    }

    /* 创立初衷引导页 */
    body[data-theme="summer"] .intro-overlay { background: rgba(26, 56, 44, 0.72); }
    body[data-theme="summer"] .intro-card {
      background: rgba(238, 244, 239, 0.94);   /* 【本轮调整 2026-10-13】亮度 −5% */
      box-shadow: 0 8px 32px rgba(34, 78, 58, 0.25);
    }
    body[data-theme="summer"] .intro-title { color: #2f6b4a; }
    body[data-theme="summer"] .intro-text { color: #33493d; }
    body[data-theme="summer"] .intro-hint { color: #7f9c8a; }

    /* 背景柔光粒子：嫩芽黄绿 + 叶绿（含低帧率降档态 body.low-fps）
       【本轮调整 2026-10-13】透明度各降一档（0.58/0.38 → 0.50/0.32；降档态 0.46/0.28 → 0.40/0.24）：
       光晕本身就是加亮项，压一点可辅助降低整体刺眼感。 */
    body[data-theme="summer"]::before {
      background: radial-gradient(circle at center, rgba(178, 226, 172, 0.50), rgba(178, 226, 172, 0) 70%);
    }
    body[data-theme="summer"]::after {
      background: radial-gradient(circle at center, rgba(104, 190, 141, 0.32), rgba(104, 190, 141, 0) 70%);
    }
    body[data-theme="summer"].low-fps::before {
      background: radial-gradient(circle at center, rgba(178, 226, 172, 0.40), rgba(178, 226, 172, 0) 70%);
    }
    body[data-theme="summer"].low-fps::after {
      background: radial-gradient(circle at center, rgba(104, 190, 141, 0.24), rgba(104, 190, 141, 0) 70%);
    }

    /* ---------- 手机端（≤600px）微调 ---------- */
    @media (max-width: 600px) {
      /* 手机端圆盘略小、面板上抬高度略降（仍恰好盖住大标题，不侵入下方表单） */
      :root {
        --palette-fab-size: 34px;
        --palette-fab-inset: 0px;
        --palette-panel-rise: 50px;
      }

      /* 移动端本就关闭毛玻璃，这里把秋意主题的纯色底同步过去（优先级高于上方移动端规则） */
      body[data-theme="autumn"] .container { background-color: rgba(255, 252, 245, 0.95); }
      body[data-theme="autumn"] .intro-overlay { background-color: rgba(48, 32, 18, 0.92); }

      /* 盛夏主题同样同步纯色底（清透绿白，避免毛玻璃关闭后失去主题感） */
      body[data-theme="summer"] .container { background-color: rgba(238, 244, 239, 0.95); }   /* 【本轮调整 2026-10-13】亮度 −5% */
      body[data-theme="summer"] .intro-overlay { background-color: rgba(26, 52, 42, 0.92); }
    }

    /* 用户系统开启「减弱动效」时，调色板相关的动画/过渡一并关闭 */
    @media (prefers-reduced-motion: reduce) {
      .palette-panel,
      .palette-fab,
      .palette-option {
        animation: none;
        transition: none;
      }
    }

    /* ============================================================
       【本轮新增 2026-10-07】书写感标题字体（只换"门面文字"，正文不动）
       作用范围：大标题 / 副标题 / 开屏引导页文案 / 引导卡标题。
       留言正文、表单、按钮维持系统字体 → 长文阅读清晰度不受影响。
       字体链：'LXGW WenKai Screen'（CDN 按需切片）→ 楷体（本机）→ 系统字体。
       稳定性：整段只新增、不修改上方任何既有规则；整段删除即可完全还原。
       ============================================================ */
    :root {
      --font-display: 'LXGW WenKai Screen', 'Kaiti SC', 'STKaiti', 'KaiTi', '楷体',
        system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    }

    .page-title,
    .page-subtitle,
    .intro-title,
    .intro-text,
    .intro-hint,
    .guide-card h2 {
      font-family: var(--font-display);
    }



/* ===== module: css/main/40-art.css  (sha16 825201bbecf2847d, 33630B) ===== */
/* ===== css/main/40-art.css —— 艺术层：大标题邮戳 / 留言卡微旋转 / 图钉 / 印章锤动画 / 间距重排 / 字体颜色 =====
   · 2026-10-16 从 index.html 的 <style> 按【原顺序】切出：只切不重构，样式一个字符没改
   · 加载顺序（必须保持）：00-tokens → 10-layout → 20-components → 30-themes → 40-art
   · 本文件是第 5／5 段；删掉头部这 5 行，剩下的就是原文对应片段
   ===== */
    /* ============================================================
       【本轮新增 2026-10-07】第二小步：视觉母题（邮戳 + 便签墙质感）
       三件事，全部只动"皮肤"，零 HTML 结构改动、零 JS 改动、零接口改动：
         A. 大标题邮戳：CSS 伪元素画的圆形邮戳（"已寄出"），呼应公告栏信封母题；
         B. 留言卡微旋转：像便签贴上墙，悬停回正；
         C. 交错浮入：前 8 张卡片依次延迟入场（自带"落定"动画，动画终点 =
            静态倾斜角，结束零跳变；「加载更多」追加的卡片从第 9 张起零延迟）。
       稳定性设计：
         1) 本段全部是追加规则，不修改上方任何既有规则；整段删除即可完全还原；
         2) 只动 transform / opacity / box-shadow，不动 display / 尺寸 / 排版流，
            不会引起横向滚动或布局位移；
         3) 邮戳 pointer-events:none 绝不挡点击；极窄屏(≤340px)自动隐藏；
         4) 配色全部用 currentColor / 主题无关的中性阴影 → 紫霞/秋意/盛夏自动适配；
         5) 段末自带 prefers-reduced-motion 保险：系统"减弱动效"开启时，
            本段新增的动画/旋转/过渡全部关闭（必须排在本段最后才能覆盖生效）。
       ============================================================ */

    /* ---------- A. 大标题邮戳（纯 CSS 伪元素，无新 DOM） ---------- */
    .page-title {
      position: relative; /* 仅作为邮戳的定位基准，不影响文字排版 */
    }

    .page-title::after {
      content: '已寄出';
      position: absolute;
      top: -16px;
      right: 6%;
      width: 62px;
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid currentColor;
      outline: 1px solid currentColor;
      outline-offset: -7px;          /* 内圈细环，做出邮戳的双圈感 */
      border-radius: 50%;
      color: currentColor;
      opacity: 0.45;
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-indent: 2px;              /* 抵消 letter-spacing 的右偏，保证视觉居中 */
      transform: rotate(-14deg);
      pointer-events: none;          /* 纯装饰，绝不挡点击 */
    }

    /* 极窄屏：邮戳可能贴近标题文字，直接收起（纯装饰，无信息损失） */
    @media (max-width: 340px) {
      .page-title::after { display: none; }
    }

    /* ---------- B. 留言卡微旋转（便签贴墙质感）+ 悬停回正 + 红色图钉 ---------- */
    .message-item {
      position: relative;        /* 图钉的定位基准（本轮新增，不影响布局流） */
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    /* 红色图钉：像便签被钉在墙上，钉头压在卡片左上角、上半截露出卡外。
       径向渐变做出高光球面感 + 下方投影做出"钉进去"的立体感。
       纯装饰：pointer-events:none 绝不挡点击；随卡片一起微微旋转。 */
    .message-item::before {
      content: '';
      position: absolute;
      top: -5px;
      left: 14px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #ff9a9a 0%, #e25555 48%, #a83232 100%);
      box-shadow: 0 3px 4px rgba(70, 25, 25, 0.35), 0 1px 1px rgba(0, 0, 0, 0.18);
      pointer-events: none;
    }

    /* 每张卡带一点随机感的小倾斜（3 张一循环，肉眼像随机；本轮按反馈略加大） */
    .message-item:nth-of-type(3n+1) {
      transform: rotate(-0.9deg);
      animation: msgInTiltA 0.5s ease-out backwards; /* backwards：延迟期间保持透明，防闪现 */
    }
    .message-item:nth-of-type(3n+2) {
      transform: rotate(0.75deg);
      animation: msgInTiltB 0.5s ease-out backwards;
    }
    .message-item:nth-of-type(3n) {
      transform: rotate(-0.5deg);
      animation: msgInTiltC 0.5s ease-out backwards;
    }

    /* 悬停：回正 + 轻浮起（有过渡，不突兀；触屏设备点按后无副作用） */
    .message-item:hover {
      transform: rotate(0deg) translateY(-2px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    }

    /* ---------- C. "落定"关键帧：透明度 + 上滑 + 旋转三合一 ---------- */
    /* from 的角度刻意与 to 不同 → 像便签被"啪"地贴上墙再微微摆正
       （本轮随静态倾斜加大同步调整，终点仍 = 静态倾斜角，零跳变） */
    @keyframes msgInTiltA {
      from { opacity: 0; transform: translateY(12px) rotate(0.9deg); }
      to   { opacity: 1; transform: translateY(0) rotate(-0.9deg); }
    }
    @keyframes msgInTiltB {
      from { opacity: 0; transform: translateY(12px) rotate(-1.1deg); }
      to   { opacity: 1; transform: translateY(0) rotate(0.75deg); }
    }
    @keyframes msgInTiltC {
      from { opacity: 0; transform: translateY(12px) rotate(1.2deg); }
      to   { opacity: 1; transform: translateY(0) rotate(-0.5deg); }
    }

    /* 交错节奏：第 2~8 张每张延迟 60ms；第 9 张起（「加载更多」追加的）零延迟 */
    .message-item:nth-of-type(2) { animation-delay: 0.06s; }
    .message-item:nth-of-type(3) { animation-delay: 0.12s; }
    .message-item:nth-of-type(4) { animation-delay: 0.18s; }
    .message-item:nth-of-type(5) { animation-delay: 0.24s; }
    .message-item:nth-of-type(6) { animation-delay: 0.3s; }
    .message-item:nth-of-type(7) { animation-delay: 0.36s; }
    .message-item:nth-of-type(8) { animation-delay: 0.42s; }
    .message-item:nth-of-type(n+9) { animation-delay: 0s; }

    /* ---------- D. 减弱动效保险（排在本段最后，覆盖上面所有新增规则） ---------- */
    @media (prefers-reduced-motion: reduce) {
      .message-item,
      .message-item:nth-of-type(n) {
        animation: none;
        transform: none;
        transition: none;
      }
    }

    /* ---------- E. 图钉立体化 2.0【本轮新增】 ----------
       目标：把上一版"贴片感的扁圆"升级为现实中书店留言墙那种、
       从右下角看上去的真图钉——
         · 光源定在左上（与卡片阴影方向一致）：
           钉头左上是月牙高光 + 一个锐利小反光点，
           右下沉入暗红（inset 阴影做出球面）；
         · 一根金属针从钉头右下侧斜插进纸面（看得见"钉进去"的过程）；
         · 针尖处有纸面被压出的小暗痕；
         · 纸面上有一片投向右下的柔和投影（影子方向 = 背光方向）。
       层级：钉头(z:2)压住针身顶端(z:1)，针像从"头底下"钻出来。
       安全性：尺寸只比旧版大 2~3px 且贴着左上角，不遮挡文字与相邻卡片；
       pointer-events:none 保持，绝不挡点击。
       回滚方式：整段删除即回到上一版圆点图钉（上面的旧块无需动）。 */

    /* 钉头：球体感（覆盖旧版样式，靠后出现即生效） */
    .message-item::before {
      top: -6px;
      left: 13px;
      width: 14px;
      height: 14px;
      z-index: 2;
      background:
        /* 锐利小反光点（玻璃感/塑料感的高光芯） */
        radial-gradient(2.5px 2px at 30% 25%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 100%),
        /* 球面主渐变：左上亮红 → 右下深红 */
        radial-gradient(circle at 32% 26%,
          #ffd9d9 0%, #ff9d9d 20%, #e35555 50%, #b03535 76%, #8a2424 100%);
      box-shadow:
        inset -2.5px -3px 4px rgba(96, 12, 12, 0.5),   /* 球面右下暗部（立体感的钥匙） */
        inset 1.5px 2px 3px rgba(255, 255, 255, 0.5),  /* 左上环境反光 */
        0 4px 5px rgba(70, 25, 25, 0.35),              /* 投在纸上的落影 */
        0 1px 1px rgba(0, 0, 0, 0.15);
      transition: transform 0.25s ease;                /* 配合悬停的轻微"按压"反馈 */
    }

    /* 针身 + 入针暗痕 + 纸面投影：一个伪元素、三层背景一次画完 */
    .message-item::after {
      content: '';
      position: absolute;
      top: -2px;
      left: 18px;
      width: 14px;
      height: 14px;
      z-index: 1;                        /* 压在钉头之下：针从"头底下"钻出来 */
      pointer-events: none;
      background:
        /* 1) 入针暗痕：针尖扎进纸面的小暗点 */
        radial-gradient(closest-side, rgba(80, 30, 30, 0.32), rgba(80, 30, 30, 0) 72%),
        /* 2) 针身：金属细针，从钉头右下斜插向纸面 */
        linear-gradient(45deg,
          rgba(0, 0, 0, 0) 43%, #dcdce2 46%, #a2a2ab 50%, #6f6f78 54%, rgba(0, 0, 0, 0) 57%),
        /* 3) 纸面投影：投向右下的柔和椭圆影 */
        radial-gradient(closest-side, rgba(70, 25, 25, 0.17), rgba(70, 25, 25, 0) 78%);
      background-size: 8px 6px, 12px 12px, 17px 7px;
      background-position: 7px 10px, 2px 3px, -1px 8px;
      background-repeat: no-repeat;
    }

    /* 悬停时钉子轻微放大：像被轻轻按了一下（与卡片回正同时发生，很克制） */
    .message-item:hover::before {
      transform: scale(1.06);
    }

    /* 减弱动效：图钉的悬停过渡也一并关掉（纯装饰，不影响信息） */
    @media (prefers-reduced-motion: reduce) {
      .message-item::before { transition: none; }
      .message-item:hover::before { transform: none; }
    }
    /* ---------- E2. 图钉 2.2：针角 60°、去掉褶皱【本轮新增·覆盖 2.1】 ----------
       反馈：2.1 有两个问题——
         ① 针立到近 96° 后，钉头和针身错位，球看着像"脱臼"往左歪；
         ② 入针褶皱和纯白色留言卡片不搭。
       本轮改动（钉头完全沿用 2.0，一个像素都不挪）：
         · 针身角度定为 60°（比 2.0 的 45° 更立、又不至于竖直）；
           针身起点对准 2.0 钉头中心 (20,1) 的正下方，向右下 60° 插入纸面，
           球、针、入针点重新连成一条直线，不再错位；
         · 入针暗痕仍画在最上层罩住针尖，针身下端止于入针点（沿用 2.1 的修法）；
         · 删除 2.1 的纸张褶皱（conic 折痕 + 鼓包光晕整层拿掉），回归纯净白卡。
       层级、pointer-events、悬停反馈均沿用 2.0。
       回滚方式：删除本段即回到 2.0（上一段 E 不用动）。 */

    /* 针身(60°) + 入针暗痕 + 纸面投影：仍然一个伪元素画完；
       钉头不再有覆盖规则，完全沿用上一段 E 的 2.0 位置（top -6 / left 13） */
    .message-item::after {
      top: -2px;
      left: 18px;
      width: 16px;
      height: 17px;
      background:
        /* 1) 入针暗痕：最上层，半透明暗孔罩住针尖，针像"扎进"纸里（深浅与 2.0 一致） */
        radial-gradient(closest-side, rgba(80, 30, 30, 0.32), rgba(80, 30, 30, 0) 72%),
        /* 2) 针身：60° 斜插，从钉头底下钻出，下端止于入针点 */
        linear-gradient(60deg,
          rgba(0, 0, 0, 0) 43%, #dcdce2 46%, #a2a2ab 50%, #6f6f78 54%, rgba(0, 0, 0, 0) 57%),
        /* 3) 纸面投影：仍投向右下（跟随背光方向），与 2.0 相同 */
        radial-gradient(closest-side, rgba(70, 25, 25, 0.17), rgba(70, 25, 25, 0) 78%);
      background-size: 8px 6px, 12px 12px, 17px 7px;
      background-position: 5px 11px, 0px 3px, -1px 8px;
      background-repeat: no-repeat;
    }

    /* ---------- F. 先看后写：邀请留言小弹窗【本轮新增 2026-10-09】 ----------
       毛玻璃小卡片，出现在屏幕底部居中；z-index 500——
       高于正文（30~40），低于公告弹窗(8000)/长文(8500)/阅读器(8600)/引导页(9999)。
       纯展示：出现/消失全靠 hidden 属性切换，无 JS 动画依赖，弱设备零压力。 */
    .cta-toast {
      position: fixed;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 360px;
      z-index: 500;
      padding: 14px 44px 14px 18px;
      background: rgba(255, 255, 255, 0.92);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
      animation: ctaToastIn 0.4s ease-out;
    }

    .cta-toast-text {
      margin: 0 0 10px;
      font-size: 14px;
      line-height: 1.6;
      color: #4a4a55;
    }

    .cta-toast-button {
      display: inline-block;
      border: none;
      border-radius: 999px;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      background: linear-gradient(135deg, #a18cd1, #c58ad8);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .cta-toast-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(161, 140, 209, 0.4);
    }

    .cta-toast-button:active {
      transform: translateY(0);
    }

    /* 右上角小关闭按钮：绝对定位在卡片角上，不占排版 */
    .cta-toast-close {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 26px;
      height: 26px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #9a9aa5;
      font-size: 13px;
      line-height: 1;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .cta-toast-close:hover {
      background: rgba(0, 0, 0, 0.06);
      color: #55555f;
    }

    @keyframes ctaToastIn {
      from { opacity: 0; transform: translateX(-50%) translateY(14px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* 减弱动效：弹窗直接出现，不做动画（其余元素动效同样沿用既有降级） */
    @media (prefers-reduced-motion: reduce) {
      .cta-toast { animation: none; }
      .cta-toast-button,
      .cta-toast-close { transition: none; }
    }

    /* 主题微调：仅文字颜色跟随主题，底色保持中性毛玻璃白（三主题都和谐） */
    body[data-theme="autumn"] .cta-toast-text { color: #6b5c49; }
    body[data-theme="summer"] .cta-toast-text { color: #4e6b5c; }

    /* ---------- G. 邮戳显隐修复【本轮新增 2026-10-09】 ----------
       原状：邮戳是纯 CSS 伪元素无条件显示——从没寄过留言的全新访客也顶着
       「已寄出」邮戳（bug）。只评论的客户同样不该有（评论从不发放令牌）。
       修法：默认隐藏；body 带上 stamp-posted 类时伪元素才恢复内容。
       该类由 JS 按现有门禁令牌判定（令牌只在主留言发表成功后签发一次）。
       追加式：不改动上方原始 .page-title::after；删除本块 + JS 挂钩即可完全还原。 */
    body:not(.stamp-posted) .page-title::after {
      content: none;
    }

    /* ---------- H. 印章锤入场动画【本轮新增 2026-10-11 初版】 ----------
       预研结论落地：纯 CSS keyframes + 少量 JS 编排，零依赖零图片（锤子为内嵌 SVG 木色哑光）。
       v1 范围（角度/时长/缓动等细节后续按观感再打磨）：
         1) 舞台 .stamp-hammer-stage：绝对定位于 .page-title 内，坐标与邮戳伪元素完全一致
            （top -16px / right 6% / 62×62）——锤子以邮戳位置定位，印下的就是「已寄出」本体；
         2) 锤子：左侧入场 → 悬停蓄力 → 盖下 → 压实停留 → 右后方离场（单条 keyframes，2.4s）；
         3) 盖下瞬间（约 1.05s）邮戳伪元素做「印章落纸」（scale 1.8→1、淡入至 0.45，
            动画终点 = 既有静态样子，结束零跳变）；
         4) 稳定性：舞台 pointer-events:none；z-index 45（仅压过调色板面板 40，远低于弹窗 8000+）；
            动画只用 transform/opacity（GPU 合成层不卡帧）；2.6s 后 JS 移除舞台，零残留；
            prefers-reduced-motion 整体跳过；JS 全程 try/catch，任何异常只是"这次没动画"。
    */
    .stamp-hammer-stage {
      position: absolute;
      top: -16px;
      right: 6%;
      width: 62px;
      height: 62px;
      z-index: 45;
      pointer-events: none;
      /* 【v3】3D 透视：从左后方看印章（rotateY 正角 = 左侧朝向观者，
         与留言卡小红钉的视角刚好互为镜像） */
      perspective: 560px;
    }

    .stamp-hammer {
      position: absolute;
      left: 50%;
      top: -20px;
      width: 54px;
      height: 67px;
      margin-left: -27px;
      transform-origin: 50% 88%;
      transform-style: preserve-3d;
      will-change: transform, opacity;
      animation: stampHammerPlay 2.4s ease-in-out both;
    }

    /* 【v4 编舞】拿笔角度入场：印章像手里握着的笔一样——章体倾斜约 16°（顶向右，
       与照片里持笔的倾角一致），从正上方斜插降下（不再从左边横穿），落到悬停位后
       微抬蓄力、边回正边垂直盖下（rotateZ 归零 = 底面放平压实，角度不错），
       压实停留后照旧抬起右上优雅离场。rotateY(20°) 左后方 3D 视角全程保持。 */
    @keyframes stampHammerPlay {
      0%   { transform: translate(-24px, -120px) rotateY(22deg) rotateZ(16deg); opacity: 0; }
      12%  { opacity: 1; }
      30%  { transform: translate(0, 0) rotateY(20deg) rotateZ(16deg); }       /* 斜角降到悬停位 */
      38%  { transform: translate(0, -6px) rotateY(20deg) rotateZ(10deg); }    /* 微抬,开始回正 */
      46%  { transform: translate(0, 12px) rotateY(20deg) rotateZ(0deg); }     /* 回正+垂直盖下（印下瞬间） */
      60%  { transform: translate(0, 11px) rotateY(20deg) rotateZ(0deg); }     /* 压实停留 */
      78%  { transform: translate(34px, -24px) rotateY(24deg) rotateZ(7deg); opacity: 1; }
      100% { transform: translate(96px, -52px) rotateY(30deg) rotateZ(14deg); opacity: 0; }  /* 离场 */
    }

    /* 【v3】地面投影：光源在右上方 → 影子落在底面左下方。
       悬停时影子大而淡（离纸远），盖下时收拢变实（贴纸），离场随之散去——3D 感的关键。 */
    .stamp-shadow {
      position: absolute;
      left: 50%;
      top: 48px;
      width: 58px;
      height: 13px;
      margin-left: -29px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(40, 26, 12, 0.45), rgba(40, 26, 12, 0) 70%);
      animation: stampShadowPlay 2.4s ease-in-out both;
      will-change: transform, opacity;
    }

    @keyframes stampShadowPlay {
      0%, 18% { opacity: 0;    transform: translateX(-6px) scale(1.25); }
      30%     { opacity: 0.22; transform: translateX(-6px) scale(1.15); }
      38%     { opacity: 0.2;  transform: translateX(-6px) scale(1.2); }
      46%     { opacity: 0.5;  transform: translateX(-3px) scale(1); }
      60%     { opacity: 0.5;  transform: translateX(-3px) scale(1); }
      80%     { opacity: 0.12; transform: translateX(-6px) scale(1.2); }
      100%    { opacity: 0;    transform: translateX(-6px) scale(1.25); }
    }

    /* 盖下瞬间：邮戳本体「印章落纸」 */
    body.stamp-ink .page-title::after {
      animation: stampInkIn 0.45s ease-out 1.02s both;
    }

    @keyframes stampInkIn {
      0%   { opacity: 0;    transform: rotate(-14deg) scale(1.8); }
      55%  { opacity: 0.55; transform: rotate(-14deg) scale(0.96); }
      100% { opacity: 0.45; transform: rotate(-14deg) scale(1); }
    }

    /* 减弱动效：整体跳过（不出现锤子，邮戳直接以静态出现） */
    @media (prefers-reduced-motion: reduce) {
      .stamp-hammer-stage { display: none; }
      body.stamp-ink .page-title::after { animation: none; }
    }

    /* ============================================================
       【本轮新增 2026-10-13】桌面端（≥601px）流畅度优化
       为什么：手机端早有一套「毛玻璃降级」，桌面端反而保留 backdrop-filter；
               而背景还有两个持续漂浮的柔光粒子（每帧都在改变"被模糊的内容"）
               → 浏览器每一帧都要重做大范围背景模糊：滚动、卡片淡入就会掉帧。
       做什么（只换"实现方式"，颜色/排版/层级/文案一律不变）：
         ① .container 毛玻璃 → 稍实的纯色底（与手机端同一套观感，只是把 600px 断点反过来）
         ② 柔光粒子去掉冗余的 blur(60px)（径向渐变本身已经是柔光；漂浮动画保留）
         ③ 引导页 / 封禁页的整屏毛玻璃 → 纯色半透明底（与手机端一致）
       不做什么：不动动画时长、不动 z-index、不动任何 JS；≤600px 手机端一个字不改。
       还原：整段删除即可（删掉本注释块与下面整个 @media 块）。
       ============================================================ */
    @media (min-width: 601px) {
      .container {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(255, 255, 255, 0.95);
      }
      body[data-theme="autumn"] .container { background-color: rgba(255, 252, 245, 0.95); }
      body[data-theme="summer"] .container { background-color: rgba(238, 244, 239, 0.95); }

      .intro-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(20, 12, 40, 0.9);
      }
      body[data-theme="autumn"] .intro-overlay { background-color: rgba(48, 32, 18, 0.92); }
      body[data-theme="summer"] .intro-overlay { background-color: rgba(26, 52, 42, 0.92); }

      .ban-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      /* 柔光粒子：去掉大半径 blur（观感几乎无差，省掉每帧的模糊合成） */
      body::before,
      body::after {
        filter: none;
      }
    }

    /* ============================================================
       【本轮新增 2026-10-13】留言字体选择（工具栏 + 面板 + 留言字体样式）
       为什么三块写在一起：都只服务「留言字体」这一个功能；整段删除即可完全还原。
       位置：工具栏在「留言内容编辑框」与「提交留言大按钮」之间（见 HTML 的 .compose-tools）。
       后续扩展：要加「字体颜色」等按钮，往 .compose-tools 里再放一个同款按钮即可。
       安全性：全部是"只加不改"的新规则，只碰颜色/字体/尺寸，不涉及 display 开关与层级冲突
              （面板 z-index 45，高于正文 30~40，低于公告弹窗 8000 / 引导页 9999）。
       ============================================================ */
    :root {
      /* 可选字体：加新字体 = 这里加一行 + 面板加一个按钮 + JS 白名单加一个值 */
      --compose-font-wenkai: var(--font-display);   /* 与页面大标题同款（霞鹜文楷 → 本机楷体 → 系统字体） */
      --compose-font-songti: 'Songti SC', 'STSong', 'SimSun', '宋体', 'Noto Serif SC', serif;
      /* 按钮文字：纯白 #fff 在浅底上很扎眼 → 换成柔和白（约 90% 亮度），护眼 */
      --compose-btn-text: #e7ece8;
    }

    /* ① 提交按钮文字：纯白 → 柔和白（只改字色，渐变底与尺寸一律不动） */
    .submit-button { color: var(--compose-btn-text); }

    /* ② 工具栏：编辑框与提交按钮之间；position: relative 作为字体面板的定位基准 */
    .compose-tools {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 10px 0;
    }

    /* ③ 小长方形按钮：长度约整行的 1/5；高度比点赞胶囊（13px + 5px 内边距）略小 */
    .compose-tool-button {
      width: 20%;
      min-width: 76px;    /* 极窄屏兜底：「留言字体」四个字仍完整 */
      max-width: 132px;   /* 宽屏兜底：不逼近点赞胶囊的观感体量 */
      padding: 4px 10px;
      border: none;
      border-radius: 9px; /* 小长方形（刻意不用胶囊圆角） */
      background: var(--theme-accent);  /* 跟随调色板所选主题色 */
      color: var(--compose-btn-text);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
      line-height: 1.6;
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .compose-tool-button:hover { transform: translateY(-1px); }
    .compose-tool-button:active { transform: scale(0.98); }
    .compose-tool-button.is-active { box-shadow: 0 0 0 2px var(--theme-accent-soft); }
    .compose-tool-button:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; }

    /* ④ 字体面板：与调色板面板同款变量/圆角/阴影；向下展开，
          盖住下方提交按钮而不是编辑框 → 边选字体边看编辑中的文字 */
    .font-panel {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 6px);
      z-index: 45;
      padding: 8px 10px;
      border: 1px solid var(--theme-panel-border);
      border-radius: 14px;
      background: var(--theme-panel-bg);
      box-shadow: var(--theme-panel-shadow);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      animation: palettePop 0.18s ease-out;
    }
    .font-panel[hidden] { display: none !important; }

    .font-panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
    .font-panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--theme-panel-title); }
    .font-panel-hint { font-size: 9.5px; letter-spacing: 0.3px; color: var(--theme-panel-text); }
    .font-panel-close {
      margin-left: auto;
      padding: 1px 8px;
      border: none;
      border-radius: 999px;
      background: var(--theme-accent-soft);
      color: var(--theme-accent);
      font-size: 11px;
      font-family: inherit;
      cursor: pointer;
    }

    /* 三张字体卡：名字用"自己那套字体"显示 → 一眼看到效果 */
    .font-options { display: flex; gap: 7px; }
    .font-option {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px;
      border: 1px solid var(--theme-option-border);
      border-radius: 10px;
      background: var(--theme-option-bg);
      font-family: inherit;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .font-option:hover { transform: translateY(-1px); }
    .font-option:active { transform: scale(0.98); }
    .font-option.is-active { border-color: var(--theme-accent); box-shadow: 0 0 0 2px var(--theme-accent-soft); }
    .font-option-name { font-size: 13px; font-weight: 700; color: var(--theme-option-name); white-space: nowrap; }
    .font-option-desc { font-size: 9.5px; letter-spacing: 0.2px; color: var(--theme-option-desc); white-space: nowrap; }
    .font-option[data-font-value="wenkai"] .font-option-name { font-family: var(--compose-font-wenkai); }
    .font-option[data-font-value="songti"] .font-option-name { font-family: var(--compose-font-songti); }

    /* ⑤ 编辑区实时预览：选哪套字体，昵称框 + 留言框立刻跟着变 */
    form[data-compose-font="wenkai"] #nickname,
    form[data-compose-font="wenkai"] #message { font-family: var(--compose-font-wenkai); }
    form[data-compose-font="songti"] #nickname,
    form[data-compose-font="songti"] #message { font-family: var(--compose-font-songti); }

    /* ⑥ 已发出去的留言卡片：按留言保存的字体渲染（昵称 + 正文一起变） */
    .message-item.msg-font-wenkai .message-nickname,
    .message-item.msg-font-wenkai .message-content { font-family: var(--compose-font-wenkai); }
    .message-item.msg-font-songti .message-nickname,
    .message-item.msg-font-songti .message-content { font-family: var(--compose-font-songti); }

    /* 窄屏：按钮按比例略放大一点（仍远小于提交按钮），面板照旧铺满整行 */
    @media (max-width: 600px) {
      .compose-tool-button { width: 26%; min-width: 72px; }
    }

    /* ⑦ 【本轮调整 2026-10-13】间距重排：字体按钮「贴住编辑区下部」，与提交大按钮拉开
       改前：编辑框底边距 22px + 工具栏上下各 10px → 按钮离编辑框/红字远、离提交按钮近；
       改后：编辑框底边距 22→8px、工具栏 8px 上 / 18px 下 →
             · 字体按钮紧贴「编辑框（或字数超额红字提示）」，只留 8px 呼吸位；
             · 与提交大按钮之间留 18px，视觉上归到「编辑区」，不再黏着提交按钮；
             · 整体高度比改前少约 8px → 提交按钮自然略上移一点。
       注意：红字提示 .len-tip 是编辑器内部的普通流元素（margin-top 6px，JS 插在输入框后面），
             本段**没有**改它的任何属性，只调它外面的容器底边距 → 既不遮挡也不挤压它。
       要还原：删掉本段三条规则即可。 */
    .content-field { margin-bottom: 8px; }
    .compose-tools { margin: 8px 0 18px; }
    .len-tip { margin: 6px 0 0; }   /* 显式写死，防止日后有人改容器样式时被顺手带偏 */

    /* ⑧ 【本轮新增 2026-10-14】字体颜色（3 个主题色）+ 两个弹窗统一缩小约 10%
       基准：改前「留言字体」弹窗实测 608×87（860px 视口）；现在宽高各收约 10%。
       做法：① 两个面板共用同一套类名与尺寸（保证"两个一致"）；② 内边距/字号/间距各收一档；
             ③ 宽度 100% → 90%（左右各留 5%，居中，观感更秀气）。
       还原：删掉本段（⑧）即可，字体与颜色功能本身不受影响。 */
    .font-panel {
      left: 5%;
      right: auto;
      width: 90%;
      padding: 7px 9px;
      border-radius: 13px;
    }
    .font-panel-head { margin-bottom: 4px; }
    .font-panel-title { font-size: 10px; }
    .font-panel-hint { font-size: 9px; }
    .font-panel-close { padding: 1px 7px; font-size: 10px; }
    .font-options { gap: 6px; }
    .font-option { padding: 5px; min-height: 42px; }
    .font-option-name { font-size: 12px; line-height: 1.25; }
    .font-option-desc { font-size: 9px; line-height: 1.25; }

    /* 颜色卡：圆点 + 两行文字（横向排布；与字体卡等高等宽 → 两个面板总高一致） */
    .color-option {
      flex-direction: row;
      align-items: center;
      gap: 6px;
      text-align: left;
    }
    .color-option-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }
    .color-dot {
      flex: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(40, 30, 70, 0.22);
    }
    /* 三个颜色 = 调色板里的三个主题色，原样照搬 */
    .color-dot-default { background: linear-gradient(135deg, #6b6b6b 0%, #333333 100%); }
    .color-dot-purple  { background: #5931F6; }
    .color-dot-autumn  { background: #b26a17; }
    .color-dot-summer  { background: #4f9d6b; }

    /* 编辑区实时预览：选了颜色，昵称框 + 留言框里的字立刻跟着变色 */
    form[data-compose-color="purple"] #nickname,
    form[data-compose-color="purple"] #message { color: #5931F6; }
    form[data-compose-color="autumn"] #nickname,
    form[data-compose-color="autumn"] #message { color: #b26a17; }
    form[data-compose-color="summer"] #nickname,
    form[data-compose-color="summer"] #message { color: #4f9d6b; }

    /* 已发出去的留言卡片：按留言保存的颜色渲染（昵称 + 正文一起变）；
       本段在主题色规则之后、同优先级时后者胜 → 自定义颜色能盖住主题默认文字色 */
    .message-item.msg-color-purple .message-nickname,
    .message-item.msg-color-purple .message-content { color: #5931F6; }
    .message-item.msg-color-autumn .message-nickname,
    .message-item.msg-color-autumn .message-content { color: #b26a17; }
    .message-item.msg-color-summer .message-nickname,
    .message-item.msg-color-summer .message-content { color: #4f9d6b; }