/* =============================================================
 * common.css —— 前台公共样式（无害合并）
 *
 * 合并来源与顺序（严格保持原加载顺序，层叠行为不变）：
 *   1. lightbox.css      2. icons.css        3. modal.css
 *   4. link-guard.css    5. related-hot.css  6. ad-donate.css
 *   7. template-switch.css   8. moments.css（说说插件）
 *   9. anniversary.css（纪念日插件）
 * （第 1–7 段原文件均已删除；第 8 段来源保留在插件目录；第 9 段随插件维护）
 *
 * 规范：与前台相关的公共 CSS 一律并入本文件，前台只加载这一个公共样式。
 *
 * 未合入：
 *   highlight-github.min.css  第三方代码高亮，按需求保持独立
 *   admin.css / admin-images.css  后台样式
 *   templates/<模板>/css/style.css  各模板私有皮肤（4 套同名 class 定义不同，
 *                                   合并会导致只有最后一套生效、换肤能力失效）
 *   plugins/anniversary/assets/css/anniversary-theme.css  后台可配的横幅配色，
 *                                   保存时动态生成，无法预置进静态文件
 * 生成时间：2026-11-02
 * ============================================================ */

/* ===== [1/9] lightbox.css ===== */
/* ============================================
   通用图片灯箱（与模板无关）—— assets/css/lightbox.css
   配套 JS：assets/js/lightbox.js
   ============================================ */

/* 打开灯箱时锁定页面滚动 */
html.ilb-lock {
    overflow: hidden;
}

/* 正文图片：可点击提示 + 轻量悬停反馈（类名 is-zoomable 由 JS 打在正文图片上） */
img.is-zoomable {
    cursor: zoom-in;
    transition: box-shadow 0.25s ease, filter 0.25s ease;
}
img.is-zoomable:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    filter: brightness(0.97);
}

/* 遮罩层：暗色半透明全屏 */
.img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 14, 13, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    -webkit-tap-highlight-color: transparent;
}
.img-lightbox.open {
    opacity: 1;
    visibility: visible;
}

/* 图片舞台（图 + 图注） */
.ilb-stage {
    margin: 0;
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform: scale(0.94);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}
.img-lightbox.open .ilb-stage {
    transform: scale(1);
}
.ilb-stage .ilb-img,
.ilb-stage .ilb-caption {
    pointer-events: auto;
}

/* 大图本体 */
.ilb-img {
    max-width: 92vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
    user-select: none;
    -webkit-user-drag: none;
}
.ilb-img.is-loaded {
    opacity: 1;
}

/* 图注 */
.ilb-caption {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.6;
    max-width: 80vw;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* 底部计数 n / total */
.ilb-counter {
    position: absolute;
    bottom: max(22px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.12);
    padding: 4px 12px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* 左右切换 / 关闭 按钮 */
.ilb-nav,
.ilb-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    user-select: none;
}
.ilb-nav:hover,
.ilb-close:hover {
    background: rgba(255, 255, 255, 0.28);
}
.ilb-prev {
    left: max(18px, env(safe-area-inset-left));
    top: 50%;
    transform: translateY(-50%);
}
.ilb-next {
    right: max(18px, env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
}
.ilb-close {
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    font-size: 24px;
}
.ilb-prev:hover,
.ilb-next:hover {
    transform: translateY(-50%) scale(1.06);
}
.ilb-close:hover {
    transform: scale(1.06);
}
.ilb-nav:active { transform: translateY(-50%) scale(0.96); }
.ilb-close:active { transform: scale(0.96); }

/* 移动端适配 */
@media (max-width: 640px) {
    .ilb-img {
        max-width: 94vw;
        max-height: 76vh;
    }
    .ilb-nav,
    .ilb-close {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
    .ilb-close {
        font-size: 20px;
    }
    .ilb-caption {
        font-size: 12px;
        max-width: 88vw;
    }
}

/* ===== [2/9] icons.css ===== */
/* ============================================
   前台图标系统（全模板共享，CSS 遮罩方案）
   - 零内联 <svg>：图标几何全部存放在 /assets/svg/*.svg
   - 通过 mask + background-color:currentColor 渲染，
     自动跟随各模板深/浅主题文字色
   - 用法：<i class="icon icon-search" aria-hidden="true"></i>
   ============================================ */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    background-color: currentColor;
    vertical-align: -0.125em;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    line-height: 1;
}

/* 尺寸工具类（匹配原内联 svg 的 width/height 属性） */
.icon-14 { width: 14px; height: 14px; }
.icon-15 { width: 15px; height: 15px; }
.icon-16 { width: 16px; height: 16px; }
.icon-17 { width: 17px; height: 17px; }
.icon-18 { width: 18px; height: 18px; }
.icon-19 { width: 19px; height: 19px; }
.icon-20 { width: 20px; height: 20px; }
.icon-30 { width: 30px; height: 30px; }

/* 各图标遮罩映射 */
.icon-search      { -webkit-mask-image: url("/assets/svg/search.svg");      mask-image: url("/assets/svg/search.svg"); }
.icon-user        { -webkit-mask-image: url("/assets/svg/user.svg");        mask-image: url("/assets/svg/user.svg"); }
.icon-folder      { -webkit-mask-image: url("/assets/svg/folder.svg");      mask-image: url("/assets/svg/folder.svg"); }
.icon-page        { -webkit-mask-image: url("/assets/svg/page.svg");        mask-image: url("/assets/svg/page.svg"); }
.icon-calendar    { -webkit-mask-image: url("/assets/svg/calendar.svg");    mask-image: url("/assets/svg/calendar.svg"); }
.icon-redo        { -webkit-mask-image: url("/assets/svg/redo.svg");        mask-image: url("/assets/svg/redo.svg"); }
.icon-eye         { -webkit-mask-image: url("/assets/svg/eye.svg");         mask-image: url("/assets/svg/eye.svg"); }
.icon-comment     { -webkit-mask-image: url("/assets/svg/comment.svg");     mask-image: url("/assets/svg/comment.svg"); }
.icon-list        { -webkit-mask-image: url("/assets/svg/list.svg");        mask-image: url("/assets/svg/list.svg"); }
.icon-grid        { -webkit-mask-image: url("/assets/svg/grid.svg");        mask-image: url("/assets/svg/grid.svg"); }
.icon-rss         { -webkit-mask-image: url("/assets/svg/rss.svg");         mask-image: url("/assets/svg/rss.svg"); }
.icon-sitemap     { -webkit-mask-image: url("/assets/svg/sitemap.svg");     mask-image: url("/assets/svg/sitemap.svg"); }
.icon-qq          { -webkit-mask-image: url("/assets/svg/qq.svg");          mask-image: url("/assets/svg/qq.svg"); }
.icon-gongan      { -webkit-mask-image: url("/assets/svg/gongan.svg");      mask-image: url("/assets/svg/gongan.svg"); }
.icon-tpl-switch  { -webkit-mask-image: url("/assets/svg/tpl-switch.svg");  mask-image: url("/assets/svg/tpl-switch.svg"); }
.icon-tpl-check   { -webkit-mask-image: url("/assets/svg/tpl-check.svg");   mask-image: url("/assets/svg/tpl-check.svg"); }

/* ===== [3/9] modal.css ===== */
/* ============================================================
 * 全局弹窗组件样式（前台通用）
 * 统一覆盖四套模板的弹窗外观，并**跟随各模板的主题色**：
 *   - 主色（按钮/聚焦环/链接）复用模板的 --color-primary
 *   - 卡片底色复用 --bg-card / --color-bg-card
 *   - 分割线/边框复用 --border-color / --color-border
 *   - 输入框与须知块底色复用 --color-bg-input（无则回退中性灰）
 * 兼容两套 class 命名：.modal-*（Lumen/ww/default）与
 * .modal-mask/.modal/.modal-head/.modal-x/.modal-foot（aurora 历史命名）。
 * 各模板原有重复的 .modal-* / .result-* 样式已删除，统一由本文件负责。
 * 浅色/深色均自动跟随模板；极端情况下回退到下方中性色，保证可用。
 * ============================================================ */

/* 弹窗主题变量：优先取模板现有变量，取不到再用中性兜底色 */
:root {
    --modal-accent: var(--color-primary, #4a7c6e);
    --modal-surface: var(--bg-card, var(--color-bg-card, #ffffff));
    --modal-border: var(--border-color, var(--color-border, #e5e7eb));
    --modal-subtle: var(--color-bg-input, #f3f4f6);
    --modal-text: #111827;
    --modal-muted: #6b7280;
}

.modal-overlay,
.modal-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-overlay.active,
.modal-mask.active {
    display: flex;
}

.modal-content,
.modal {
    background: var(--modal-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalFadeIn 0.2s ease;
    overflow: hidden;
}

.modal-content > form,
.modal > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header,
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--modal-border);
    flex-shrink: 0;
}

.modal-header h3,
.modal-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--modal-text);
}

.modal-close,
.modal-x {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--modal-muted);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 1;
    flex-shrink: 0;
}

.modal-close:hover,
.modal-x:hover {
    color: var(--modal-text);
}

.modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-footer,
.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--modal-border);
    flex-shrink: 0;
}

.modal-sm {
    max-width: 360px;
}

/* 弹窗底部按钮（兜底，确保移除模板重复样式后按钮仍正常显示） */
.modal-footer .btn,
.modal-foot .btn {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s;
}

.modal-footer .btn-primary,
.modal-foot .btn-primary {
    background: var(--modal-accent);
    color: #ffffff;
}

.modal-footer .btn-primary:hover,
.modal-foot .btn-primary:hover {
    opacity: 0.9;
}

.modal-footer .btn-cancel,
.modal-foot .btn-cancel {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.modal-footer .btn-cancel:hover,
.modal-foot .btn-cancel:hover {
    background: #e5e7eb;
}

/* 结果提示弹窗 */
.result-modal {
    max-width: 360px;
}

.result-modal .modal-body {
    text-align: center;
    padding: 32px 24px;
}

.result-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 14px;
    text-align: center;
}

.result-icon.success {
    color: #16a34a;
}

.result-icon.error {
    color: #dc2626;
}

.result-message,
.result-text {
    font-size: 14px;
    color: var(--modal-text);
    line-height: 1.7;
    text-align: center;
}

/* 弹窗内表单字段兜底：确保各模板（.form-item / .form-group）在弹窗内正常显示；
   模板自身的 .form-* 基础样式仍优先，此处仅做安全兜底。 */
.modal-body .form-item,
.modal .form-item,
.modal-body .form-group,
.modal .form-group {
    margin-bottom: 14px;
}

.modal-body .form-item label,
.modal .form-item label,
.modal-body .form-group label,
.modal .form-group label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--modal-text);
    font-weight: 600;
}

/* 标签旁的内联提示（如「网站描述」后的 slogan），同行弱化显示 */
.modal-body .form-item label .label-hint,
.modal .form-item label .label-hint,
.modal-body .form-group label .label-hint,
.modal .form-group label .label-hint {
    font-weight: 400;
    font-size: 12px;
    color: var(--modal-muted);
    margin-left: 8px;
}

.modal-body input[type="text"],
.modal-body input[type="url"],
.modal input[type="text"],
.modal input[type="url"] {
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: var(--modal-subtle);
    border-radius: 8px;
    font-size: 14px;
    color: var(--modal-text);
    box-sizing: border-box;
}

.modal-body input:focus,
.modal input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--modal-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--modal-accent) 45%, transparent);
}

/* 申请须知区块（统一四套模板的灰底圆角外观，跟随模板底色） */
.modal-body .apply-notice,
.modal .apply-notice,
.modal-body .notice-box,
.modal .notice-box {
    background: var(--modal-subtle);
    border: 1px solid var(--modal-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 4px 0 2px;
}

.modal-body .apply-notice strong,
.modal .apply-notice strong,
.modal-body .notice-box h4,
.modal .notice-box h4 {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--modal-text);
}

.modal-body .apply-notice ul,
.modal .apply-notice ul,
.modal-body .notice-box ul,
.modal .notice-box ul {
    margin: 0;
    padding-left: 18px;
}

.modal-body .apply-notice li,
.modal .apply-notice li,
.modal-body .notice-box li,
.modal .notice-box li {
    font-size: 13px;
    line-height: 1.9;
    color: var(--modal-muted);
}

/* 图标地址提示：网址显示为跟随主题色的可点击链接 */
.modal-body .form-hint {
    font-size: 12px;
    color: var(--modal-muted);
    margin: 6px 0 0;
    line-height: 1.6;
}

.modal-body .form-hint code {
    background: none;
    padding: 0;
    color: var(--modal-accent);
    font-size: 12px;
    word-break: break-all;
}

.modal-body .form-hint a {
    color: var(--modal-accent);
    text-decoration: underline;
    word-break: break-all;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .modal-content,
    .modal {
        max-width: 100%;
    }
    .modal-header,
    .modal-head,
    .modal-body,
    .modal-footer,
    .modal-foot {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* 深色模式：覆盖弹窗变量为通用暗色，主色仍跟随模板暗色变量 */
@media (prefers-color-scheme: dark) {
    :root {
        --modal-surface: #1f2937;
        --modal-border: #374151;
        --modal-subtle: #111827;
        --modal-text: #f3f4f6;
        --modal-muted: #9ca3af;
        /* --modal-accent 保持模板暗色主色（继承 :root），按钮/链接仍跟随主题 */
    }
    .modal-overlay,
    .modal-mask {
        background: rgba(0, 0, 0, 0.6);
    }
    /* 深色下图标链接改用高对比浅蓝，保证可读性 */
    .modal-body .form-hint,
    .modal-body .form-hint code,
    .modal-body .form-hint a {
        color: #60a5fa;
    }
}

/* ===== [4/9] link-guard.css ===== */
/* 评论 / 留言外链守卫 —— 前台样式（经 front_head 引入）
   只负责两件事：让被禁用的链接「看起来不像链接」，以及让长网址不撑破布局。 */
.lg-blocked {
    color: #b26a00;
    background: #fff7e6;
    border-bottom: 1px dotted #e0b979;
    padding: 0 2px;
    border-radius: 2px;
    word-break: break-all;
    cursor: help;
}

.lg-blocked-warn {
    margin-left: 2px;
    color: #b26a00;
    font-weight: 700;
}

/* 可疑链接：可点，但用下划虚线提示访客谨慎 */
.lg-suspect {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

@media (prefers-color-scheme: dark) {
    .lg-blocked {
        color: #f0b866;
        background: #3a2d16;
        border-bottom-color: #6b5426;
    }

    .lg-blocked-warn {
        color: #f0b866;
    }
}

/* ===== [5/9] related-hot.css ===== */
/* ============================================================
 * 相关文章 / 热门榜单 插件 —— 前台样式
 * 由 plugins/related-hot 经 front_head 钩子自动引入，模板无需改动。
 * 自带 --rh-* 变量，4 套模板通用；支持系统深色模式。
 * ============================================================ */

.rh-wrap {
    --rh-border: #ececf0;
    --rh-text: #2c3138;
    --rh-muted: #8b939f;
    --rh-bg: #fff;
    --rh-bg-soft: #fafbfc;
    --rh-accent: #ff6b35;
    --rh-radius: 12px;

    margin: 36px 0 8px;
    padding: 0;
    color: var(--rh-text);
    font-size: 15px;
    line-height: 1.6;
}

/* 版式：宽屏左右两栏 */
.rh-wrap[data-rh-layout="side"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* 版式：上下堆叠 */
.rh-wrap[data-rh-layout="stack"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.rh-block {
    min-width: 0;
    padding: 18px 20px 14px;
    border: 1px solid var(--rh-border);
    border-radius: var(--rh-radius);
    background: var(--rh-bg);
}

.rh-title {
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--rh-border);
    font-size: 15px;
    font-weight: 600;
    color: var(--rh-text);
    letter-spacing: .5px;
}

.rh-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rh-rank;
}

.rh-item {
    border-bottom: 1px dashed var(--rh-border);
}

.rh-item:last-child {
    border-bottom: none;
}

.rh-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
    transition: opacity .25s;
}

.rh-link:hover {
    opacity: .75;
}

/* 无封面时少一列（class 由 PHP 输出，不依赖 :has()） */
.rh-link.rh-link-nocover {
    grid-template-columns: minmax(0, 1fr);
}

/* 带序号的行多一列 */
.rh-item-ranked .rh-link {
    grid-template-columns: 22px auto minmax(0, 1fr);
}

.rh-item-ranked .rh-link.rh-link-nocover {
    grid-template-columns: 22px minmax(0, 1fr);
}

/* 名次 */
.rh-rank {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--rh-bg-soft);
    color: var(--rh-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.rh-item-top .rh-rank {
    background: var(--rh-accent);
    color: #fff;
}

/* 封面 */
.rh-cover {
    display: block;
    width: 72px;
    height: 52px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--rh-bg-soft);
}

.rh-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文字区 */
.rh-main {
    min-width: 0;
    display: block;
}

/* 标题 + 阅读数同一行，阅读数靠右 */
.rh-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.rh-item-title {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--rh-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .25s;
}

.rh-link:hover .rh-item-title {
    color: var(--rh-accent);
}

.rh-meta {
    flex: 0 0 auto;
    margin: 0;
    font-size: 12px;
    color: var(--rh-muted);
    white-space: nowrap;
}

.rh-sep {
    margin: 0 6px;
}

/* ---------- 窄屏：两栏自动降为一栏 ---------- */
@media (max-width: 720px) {
    .rh-wrap { margin: 28px 0 6px; }
    .rh-wrap[data-rh-layout="side"] { grid-template-columns: minmax(0, 1fr); }
    .rh-block { padding: 16px 16px 12px; }
    .rh-cover { width: 62px; height: 46px; }
    /* 标题允许换到两行；阅读数仍靠右、与标题首行基线对齐 */
    .rh-head { align-items: flex-start; gap: 8px; }
    .rh-item-title { font-size: 13.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .rh-meta { padding-top: 1px; }
}

/* ---------- 深色模式 ---------- */
@media (prefers-color-scheme: dark) {
    .rh-wrap {
        --rh-border: #333a45;
        --rh-text: #e3e7ee;
        --rh-muted: #9aa3b2;
        --rh-bg: #1e232b;
        --rh-bg-soft: #242a33;
    }
}

/* ===== [6/9] ad-donate.css ===== */
/* ============================================================
 * 广告位 / 打赏 插件 —— 前台样式
 * 由 plugins/ad-donate 经 front_head 钩子自动引入，模板无需改动。
 * 自带 --ad-* 变量，不依赖任何模板变量，4 套模板通用。
 * ============================================================ */

.ad-slot {
    margin: 20px 0;
    clear: both;
}

/* 正文中间广告：上下留白更多，视觉上把正文切成两段 */
.ad-slot-inline {
    margin: 28px 0;
    padding: 12px 0;
    border-top: 1px solid var(--ad-border, #ececf0);
    border-bottom: 1px solid var(--ad-border, #ececf0);
}

/* 全站头部/底部代码容器默认不占位；管理员若放入可见内容再自行加样式 */
.ad-slot-head,
.ad-slot-footer {
    margin: 0;
}

/* ---------- 打赏模块 ---------- */
.ad-donate {
    --ad-border: #ececf0;
    --ad-text: #2c3138;
    --ad-muted: #8b939f;
    --ad-bg: #fff;
    --ad-bg-soft: #fafbfc;
    --ad-accent: #ff6b35;
    --ad-radius: 12px;

    margin: 34px 0 10px;
    padding: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ad-text);
}

.ad-donate-box {
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    background: var(--ad-bg);
    overflow: hidden;
}

/* 折叠条 */
.ad-donate-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    transition: background-color .25s;
}

/* 去掉 Chrome/Safari 默认的三角标记，改成自绘箭头 */
.ad-donate-summary::-webkit-details-marker { display: none; }
.ad-donate-summary::marker { content: ""; }

.ad-donate-summary:hover { background: var(--ad-bg-soft); }

.ad-donate-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ad-text);
}

.ad-donate-cta {
    flex: 0 0 auto;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--ad-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .5px;
    transition: opacity .25s, transform .25s;
}

.ad-donate-summary:hover .ad-donate-cta { opacity: .88; }

/* 展开状态：给按钮一点回弹反馈，并旋转指示箭头 */
.ad-donate-box[open] .ad-donate-cta {
    background: var(--ad-bg-soft);
    color: var(--ad-accent);
    border: 1px solid var(--ad-accent);
    padding: 5px 15px;
}

/* 展开后的内容区 */
.ad-donate-body {
    padding: 4px 18px 20px;
    border-top: 1px solid var(--ad-border);
}

.ad-donate-desc {
    margin: 14px 0 16px;
    font-size: 14px;
    color: var(--ad-muted);
}

/* 收款码 */
.ad-donate-qrs {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

.ad-donate-qr {
    margin: 0;
    width: 150px;
    text-align: center;
}

.ad-donate-img {
    display: block;
    width: 150px;
    height: 150px;
    object-fit: contain;
    border: 1px solid var(--ad-border);
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    box-sizing: border-box;
}

.ad-donate-qr-name {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ad-muted);
}

/* 自定义追加内容 */
.ad-donate-extra {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--ad-border);
    font-size: 14px;
    color: var(--ad-muted);
}

/* ---------- 窄屏 ---------- */
@media (max-width: 640px) {
    .ad-donate { margin: 26px 0 6px; }
    .ad-donate-summary { padding: 12px 14px; }
    .ad-donate-title { font-size: 14px; }
    .ad-donate-body { padding: 4px 14px 18px; }
    .ad-donate-qrs { gap: 16px; }
    .ad-donate-qr,
    .ad-donate-img { width: 128px; }
    .ad-donate-img { height: 128px; }
}

/* ---------- 深色模式（跟随系统偏好） ---------- */
@media (prefers-color-scheme: dark) {
    .ad-donate {
        --ad-border: #333a45;
        --ad-text: #e3e7ee;
        --ad-muted: #9aa3b2;
        --ad-bg: #1e232b;
        --ad-bg-soft: #242a33;
    }
    .ad-donate-img { background: #fff; }
    .ad-donate-box[open] .ad-donate-cta { background: var(--ad-bg-soft); }
}

/* ===== [7/9] template-switch.css ===== */
/* ============================================
   前台模板切换组件（全模板共享）
   通过 var() 回退链适配各模板的变量命名：
   Lumen/aurora/ww 用 --bg-card/--text-primary/--border-color
   default 用 --color-bg-card/--color-text-body/--color-border
   暗色模式由各模板 [data-theme="dark"] 覆盖同名变量后自动生效
   ============================================ */
.tpl-switch-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tpl-switch-btn {
    background: none;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, var(--color-text-body, #475569));
    transition: var(--transition, all 0.25s ease);
    flex-shrink: 0;
}

.tpl-switch-btn:hover {
    background: var(--bg-hover, var(--bg-secondary, var(--color-bg-hover, #f1f5f9)));
    color: var(--color-primary, #2563eb);
}

.tpl-switch-btn .icon {
    width: 17px;
    height: 17px;
}

.tpl-switch-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 176px;
    background: var(--bg-card, var(--color-bg-card, #ffffff));
    border: 1px solid var(--border-color, var(--color-border, #e2e8f0));
    border-radius: var(--radius-md, var(--radius, 10px));
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 10000;
}

.tpl-switch-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tpl-switch-title {
    font-size: 12px;
    color: var(--text-muted, var(--color-text-muted, #94a3b8));
    padding: 6px 10px 4px;
    user-select: none;
}

.tpl-switch-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    font-family: var(--font-sans, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif);
    color: var(--text-primary, var(--color-text-body, #1e293b));
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

.tpl-switch-item:hover {
    background: var(--bg-hover, var(--bg-secondary, var(--color-bg-hover, #f1f5f9)));
}

.tpl-switch-item.active {
    color: var(--color-primary, #2563eb);
    font-weight: 600;
}

.tpl-switch-item.reset {
    color: var(--text-secondary, var(--color-text-muted, #64748b));
    justify-content: flex-start;
}

.tpl-switch-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tpl-switch-divider {
    height: 1px;
    background: var(--border-color, var(--color-border, #e2e8f0));
    margin: 5px 8px;
}

/* 窄屏时面板向左收，避免溢出视口 */
@media (max-width: 480px) {
    .tpl-switch-panel {
        right: auto;
        left: 50%;
        transform: translate(-50%, -6px);
    }

    .tpl-switch-panel.open {
        transform: translate(-50%, 0);
    }
}

/* ===== [8/9] moments.css（说说插件，原 plugins/moments/assets/moments.css）===== */
/* 说说（碎碎念）前台样式 —— 纯 CSS，无内联。
   配色复用 Lumen 模板的 :root 主题变量（--bg-card / --text-primary / --border-color /
   --color-primary 等），故站点开启 [data-theme="dark"] 时说说会自动转入深色，无需单独逻辑。
   凡变量未定义（如切换其它模板）时均有浅色兜底值。 */

/* 说说独立页由插件整体接管渲染（自带页头），隐藏页面模板输出的 <h1> 页面标题，避免重复 */
.article-page-card:has(.mt-wrap) .article-header { display: none; }
.article-page-card:has(.mt-wrap) .article-content { padding-top: 6px; }

/* Lumen 模板对 .article-content p 有「首行缩进 2em」规则，说说容器内全部取消，保证左对齐 */
.mt-wrap p { text-indent: 0; }

.mt-wrap { max-width: 760px; margin: 0 auto; }

/* Hero 页头（左对齐、紧凑间距） */
.mt-hero { text-align: left; margin: 2px 0 14px; }
.mt-kicker { font-size: 12px; letter-spacing: 3px; color: var(--text-muted, #9aa3b2); text-transform: uppercase; margin: 0 0 2px; }
.mt-title {
  font-size: 26px; margin: 0 0 3px; font-weight: 800; line-height: 1.3;
  background: linear-gradient(120deg, var(--color-primary, #4a7c6e), var(--color-accent, #6ba896));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mt-desc { font-size: 13.5px; color: var(--text-secondary, #8b93a3); margin: 0; }

/* 工具栏：绿点 + 共 N 条 · 标语 | 第 X / Y 页 */
.mt-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--border-color, #e6e9ef); background: var(--bg-secondary, #f7f9fc);
  border-radius: 10px; padding: 8px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--text-secondary, #6b7280);
}
.mt-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success, #35c07e); margin-right: 7px; vertical-align: 0;
}
.mt-stat { color: var(--text-primary, #1f2329); font-weight: 500; }
.mt-bar-right { color: var(--text-muted, #9aa3b2); }

/* ===== 时间线 ===== */
.mt-moments.layout-timeline { position: relative; padding-left: 30px; }
.mt-moments.layout-timeline::before {
  content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 2px;
  background: var(--border-color, #eef1f6);
}
.mt-node { position: relative; margin: 0 0 18px; }
.mt-moments.layout-timeline .mt-node::before {
  content: ""; position: absolute; left: -19px; top: 22px; z-index: 1;
  transform: translateX(-50%); /* 以圆心对齐轴线（轴线中心在 .mt-moments 左起 11px） */
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg-card, #fff); border: 3px solid var(--color-primary, #4a7c6e);
  /* 用与卡片容器同色的光环「挖空」轴线，使节点浮在轴上 */
  box-shadow: 0 0 0 4px var(--bg-card, #fff);
}
.mt-moments.layout-timeline .mt-node.is-top::before { border-color: var(--color-warning, #f0a020); }

/* 瀑布流（多列） */
.mt-moments.layout-masonry { column-gap: 14px; }
.mt-moments.mt-cols-1 { column-count: 1; }
.mt-moments.mt-cols-2 { column-count: 2; }
.mt-moments.mt-cols-3 { column-count: 3; }
.mt-moments.layout-masonry .mt-node { break-inside: avoid; margin-bottom: 14px; }
@media (max-width: 760px) { .mt-moments.layout-masonry { column-count: 1 !important; } }

/* ===== 卡片 ===== */
.mt-card {
  background: var(--bg-card, #fff); border: 1px solid var(--border-color, #eef1f6);
  border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(20, 30, 60, .06));
  transition: box-shadow .2s ease, transform .2s ease;
}
.mt-card:hover { box-shadow: var(--shadow-md, 0 6px 18px rgba(20, 30, 60, .10)); transform: translateY(-1px); }

/* 头部行：昵称/时间 + 置顶/公开胶囊 */
.mt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mt-who { display: flex; flex-direction: column; min-width: 0; }
.mt-name { font-weight: 700; font-size: 15px; color: var(--text-primary, #1f2329); line-height: 1.3; }
.mt-time { font-size: 12.5px; color: var(--text-muted, #9aa3b2); }
.mt-flag { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.mt-pill { font-size: 11px; border-radius: 20px; padding: 2px 9px; font-weight: 600; white-space: nowrap; }
.mt-pill.top { background: #fff1dd; color: #c47d10; }
.mt-pill.pub { background: #e8f0ff; color: #3a6fd8; }

/* 正文 */
.mt-body { font-size: 15.5px; line-height: 1.8; color: var(--text-primary, #1f2329); word-break: break-word; }
.mt-body p { margin: 0 0 8px; }
.mt-body p:last-child { margin-bottom: 0; }
.mt-body ul, .mt-body ol { margin: 6px 0; padding-left: 22px; }
.mt-body li { margin: 3px 0; }
.mt-body strong { font-weight: 700; }
.mt-body a { color: var(--color-primary, #4a7c6e); text-decoration: none; word-break: break-all; }
.mt-body a:hover { text-decoration: underline; }
.mt-body del { color: var(--text-muted, #9aa3b2); }
.mt-body code {
  background: var(--code-bg, #f2f4f8); border-radius: 4px; padding: 1px 6px;
  font-family: var(--font-mono, Consolas, "SFMono-Regular", monospace); font-size: 13px;
  color: var(--color-warning, #c2410c);
}
.mt-pre {
  background: #0f1419; border-radius: 8px; padding: 12px 14px; overflow: auto;
  margin: 8px 0; position: relative;
}
.mt-pre code { background: none; color: #c9d4e5; padding: 0; font-size: 13px; line-height: 1.6; }
.mt-pre .mt-copy {
  position: absolute; top: 6px; right: 8px; font-size: 11px; color: #9fb3d1;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 5px; padding: 2px 8px; cursor: pointer;
}

/* 图片网格 */
.mt-imgs { display: grid; gap: 5px; margin: 8px 0 4px; }
/* 单图：不搞正方形占位框，按原始比例缩放（限高 300px），居中、无灰底 */
.mt-imgs-1 { grid-template-columns: 1fr; }
.mt-imgs-1 .mt-img { width: fit-content; max-width: 100%; margin: 0 auto; background: transparent; }
.mt-imgs-1 .mt-img img {
  width: auto; height: auto; max-width: 100%; max-height: 300px;
  aspect-ratio: auto; object-fit: contain; border-radius: 8px;
}
.mt-imgs-2 { grid-template-columns: repeat(2, 1fr); }
.mt-imgs-3, .mt-imgs-n { grid-template-columns: repeat(3, 1fr); }
.mt-img { display: block; overflow: hidden; border-radius: 8px; background: var(--bg-secondary, #f2f4f8); }
.mt-img img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; aspect-ratio: 1 / 1; }

/* 签到条（天气/位置/设备/心情） */
.mt-sign { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.mt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-secondary, #f2f4f8); color: var(--text-secondary, #5b6573);
  border-radius: 20px; padding: 4px 11px; font-size: 12.5px; line-height: 1.4;
}

/* 底部行：互动（❤️💬）与签到（天气/位置/设备/心情）同行，互动项在首位 */
.mt-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border-color, #eef1f6);
}

/* 互动栏（点赞可点击切换，评论图标为折叠开关；作为 .mt-foot 的首个子项） */
.mt-actions {
  display: flex; justify-content: flex-start; gap: 12px;
  color: var(--text-muted, #9aa3b2); font-size: 13px;
}
.mt-actions > * { display: inline-flex; align-items: center; letter-spacing: 0; word-spacing: 0; }
/* 点赞按钮：重置浏览器默认 button 样式，使其与旁边的评论图标一致 */
.mt-act-like {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  transition: color .15s ease, transform .1s ease;
  letter-spacing: 0; word-spacing: 0;
}
.mt-act-like:active { transform: scale(.92); }
.mt-act-like.is-liked { color: #e5484d; }
.mt-act-like.is-liked i { font-weight: 600; }
.mt-actions i { font-style: normal; }
/* 图标与数字之间的精确间距：由图标 span 的 margin-right 控制，不依赖 flex gap
   （gap 会叠加到 ::after 的 ▾ 上造成多余空隙；emoji 自身无尾随空格、也不受字间距影响） */
.mt-act-like .mt-ico, .mt-act-comment .mt-ico {
  margin-right: 4px;
  flex: none;
  line-height: 1;
}

/* 分页 */
.mt-pager {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  font-size: 13px; color: var(--text-secondary, #6b7280); padding-top: 6px;
}
.mt-pager-btn {
  border: 1px solid var(--border-color, #d9dee7); border-radius: 8px; padding: 4px 12px;
  color: var(--color-primary, #4a7c6e); text-decoration: none; cursor: pointer;
}
.mt-pager-btn.disabled { color: var(--text-muted, #c0c6d0); border-color: var(--border-color, #eef1f6); cursor: default; }

.mt-empty { text-align: center; color: var(--text-muted, #9aa3b2); padding: 40px 0; }

/* ===== 深色适配（站点 [data-theme="dark"] 已重定义大部分变量，这里仅补变量覆盖不到的细节） ===== */
[data-theme="dark"] .mt-pill.top { background: #3a2e16; color: #f0b860; }
[data-theme="dark"] .mt-pill.pub { background: #1c2c4d; color: #7fa8ef; }
[data-theme="dark"] .mt-card:hover { box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, .4)); }

/* ===== 响应式 ===== */
@media (max-width: 760px) {
  .mt-moments.layout-timeline { padding-left: 22px; }
  .mt-moments.layout-timeline::before { left: 7px; }
  .mt-moments.layout-timeline .mt-node::before { left: -14px; top: 20px; width: 11px; height: 11px; }
  .mt-foot { gap: 10px; }
  .mt-sign { gap: 6px; }
  .mt-chip { padding: 3px 9px; font-size: 12px; }
  .mt-wrap { padding: 0 2px; }
}

/* ===== 说说评论区（moments v1.2.0：通用渲染 comment_tree_html + 纯 CSS checkbox 折叠） ===== */
/* 隐藏 checkbox 置于评论区前，💬 图标（label，在互动栏与点赞同排）控制 :checked，
   用兄弟选择器展开/收起 .mt-comments-body（零 JS，只有点图标才触发）。 */
.mt-c-toggle {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}
.mt-comments-body { display: none; }
.mt-c-toggle:checked ~ .mt-comments-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}
/* 互动栏评论图标：与原点赞图标同一行，是唯一的折叠开关 */
.mt-act-comment {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted, #9aa3b2);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}
.mt-act-comment::after {
    content: "▾";
    margin-left: 4px;
    font-size: 12px;
    transition: transform .2s ease;
}
.mt-foot:has(~ .mt-c-toggle:checked) .mt-act-comment::after { transform: rotate(180deg); }
.mt-act-comment:hover { color: var(--color-primary, #4a7c6e); }
.mt-act-comment i { font-style: normal; }
/* 互动栏被隐藏时的独立评论开关（保证评论区仍可展开；置于 .mt-foot 内，无需上间距） */
.mt-act-comment-standalone { display: inline-flex; }

/* --- 评论项（与文章评论区同构：头像 + 昵称 + 徽章 + 时间 + 归属地 + 回复） --- */
.mt-comment {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--color-bg-subtle, rgba(0, 0, 0, .03));
}
.mt-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
.mt-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-comment-body { flex: 1; min-width: 0; }
.mt-comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    font-size: 12.5px;
    line-height: 1.4;
}
.mt-comment-name { font-weight: 600; color: var(--color-text, #111827); }
.mt-comment-name-link { color: inherit; text-decoration: none; }
.mt-comment-name-link:hover { color: var(--color-primary, #4a7c6e); text-decoration: underline; }
.mt-comment-badge {
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.6;
    background: var(--color-primary, #4a7c6e);
    color: #fff;
}
.mt-comment-time,
.mt-comment-ip { font-size: 12px; color: var(--color-text-tertiary, #9ca3af); }
.mt-comment-depth {
    padding: 0 5px;
    border-radius: 8px;
    font-size: 11px;
    background: rgba(0, 0, 0, .05);
    color: var(--color-text-secondary, #6b7280);
}
.mt-reply-btn {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-primary, #4a7c6e);
    text-decoration: none;
    white-space: nowrap;
}
.mt-reply-btn:hover { text-decoration: underline; }
.mt-reply-btn.is-active { color: var(--color-danger, #c0392b); font-weight: 600; }
.mt-comment-text {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--color-text, #374151);
    word-break: break-word;
}
.mt-comment-text p { margin: 0 0 6px; }
.mt-comment-text p:last-child { margin-bottom: 0; }

/* 楼中楼：左侧竖线缩进，回复项不再重复卡片底色 */
.mt-reply-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid var(--color-border, #e5e7eb);
}
.mt-comment-reply { padding: 2px 0 0; background: none; }
.mt-comment-reply-nested { padding-left: 8px; }

/* --- 评论表单 --- */
.mt-comment-form-wrap { margin-top: 2px; }
.mt-cf-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mt-cf-group { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-cf-input,
.mt-cf-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 11px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--color-text, #111827);
    background: var(--bg-card, var(--color-bg-card, #fff));
    border: 1px solid var(--color-border, #e3e8e4);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mt-cf-input::placeholder,
.mt-cf-textarea::placeholder { color: var(--color-text-tertiary, #9ca3af); }
.mt-cf-input:hover,
.mt-cf-textarea:hover { border-color: #cfd8d2; }
.mt-cf-input:focus,
.mt-cf-textarea:focus {
    outline: none;
    border-color: var(--color-primary, #4a7c6e);
    box-shadow: 0 0 0 3px rgba(74, 124, 110, .10);
}
.mt-cf-textarea { resize: vertical; min-height: 84px; line-height: 1.7; }
.mt-cf-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border, #eef1ee);
}
/* 验证码输入框在底部行里定宽，避免 .mt-cf-input 的 width:100% 撑满整行 */
.mt-cf-bottom .mt-cf-input { width: 130px; flex: 0 0 130px; }
.mt-cf-captcha {
    height: 36px;
    width: auto;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--color-border, #e3e8e4);
    background: #fff;
}
.mt-act-comment { text-decoration: none; }
.mt-cf-bottom .btn { margin-left: auto; }

@media (max-width: 640px) {
    .mt-cf-row { flex-direction: column; }
    .mt-cf-group { flex: 1 1 auto; }
    .mt-cf-bottom .mt-cf-input { flex: 1 1 100px; width: auto; }
    .mt-comment { padding: 9px 10px; }
    .mt-avatar { flex-basis: 28px; width: 28px; height: 28px; }
}

/* ===== [9/9] anniversary.css（纪念日插件：庄重灰白 / 顶部横幅 / 弹窗）===== */
/* 配套 PHP：plugins/anniversary/anniversary.php   配套 JS：common.js 内 initAnniversary */

/* ---- 庄重日全站灰白 ----
   用 backdrop-filter 覆盖层而非 filter：filter 会让 body 成为定位包含块，
   导致悬浮导航 / 回到顶部等 position:fixed 元素脱离视口。伪元素挂在 <html> 上，
   四套模板零改动即可生效。 */
html.anniv-grey::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    background: transparent;
    -webkit-backdrop-filter: grayscale(1);
    backdrop-filter: grayscale(1);
}
/* 旧浏览器回退：无法用 backdrop-filter 时才退回 filter */
@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
    html.anniv-grey::after { content: none; }
    html.anniv-grey body { filter: grayscale(1); }
}

/* ---- 顶部横幅（sticky，插在 body 首子节点，由 JS 搬运）---- */
.anniv-banner {
    position: sticky;
    top: var(--anniv-offset, 0px);
    z-index: 2147482000;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-height: 40vh;
    overflow-y: auto;
    margin: 0;
    padding: 10px 16px;
    background: #a93226;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}
/* 基调变体：喜庆沿用模板主色，不额外装饰；
   其余基调（庄重/节气/普通）用后台配置的默认色（见 anniversary-theme.css）。
   注意：theme.css 在本文件之后加载，故其规则用 :not(.anniv-banner-festive) 排除喜庆。 */
.anniv-banner-festive {
    background: var(--color-primary, #a93226);
    color: #fff;
}

.anniv-banner .anniv-banner-text {
    display: inline-block;
    max-width: 1200px;
    word-break: break-word;
}
/* 广告位内联替换形态（喜庆日替换 top 广告位） */
.anniv-banner-inline {
    position: static;
    max-height: none;
    margin: 12px 0;
    border-radius: 8px;
}

/* ---- 纪念日弹窗 ---- */
/* 默认 hidden：服务端不写 Cookie，频次由客户端 localStorage 判定后放开 */
.anniv-popup[hidden] { display: none; }
.anniv-popup {
    position: fixed;
    inset: 0;
    z-index: 2147484000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.anniv-popup-mask {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .55);
}
.anniv-popup-box {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: min(92vw, 520px);
    max-height: 88vh;
    overflow-y: auto;
    padding: 16px;
    background: #fff;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.anniv-popup-link { display: block; color: inherit; text-decoration: none; }
.anniv-popup-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.anniv-popup-title {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: #111827;
}
/* 关闭按钮：触摸端 44px 热区 */
.anniv-popup-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.anniv-popup-close:hover { color: #111827; }
/* 弹窗缩放档位 */
.anniv-popup[data-scale="25"] .anniv-popup-box { max-width: 25vw; }
.anniv-popup[data-scale="50"] .anniv-popup-box { max-width: 50vw; }
.anniv-popup[data-scale="75"] .anniv-popup-box { max-width: 75vw; }
.anniv-popup[data-scale="100"] .anniv-popup-box { max-width: 100vw; }

@media (max-width: 640px) {
    .anniv-popup { padding: 16px; }
    .anniv-popup-box { max-width: 92vw; padding: 12px; }
    .anniv-popup[data-scale="25"] .anniv-popup-box,
    .anniv-popup[data-scale="50"] .anniv-popup-box,
    .anniv-popup[data-scale="75"] .anniv-popup-box,
    .anniv-popup[data-scale="100"] .anniv-popup-box { max-width: 92vw; }
    .anniv-banner { padding: 8px 12px; font-size: 13px; }
}

/* 安全区（刘海屏 / 手势条） */
@supports (padding: env(safe-area-inset-bottom)) {
    .anniv-popup { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .anniv-banner { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
    .anniv-popup-box { box-shadow: none; }
}

@media (prefers-color-scheme: dark) {
    .anniv-popup-box { background: #1f2937; }
    .anniv-popup-title { color: #f3f4f6; }
    .anniv-popup-close { color: #9ca3af; }
    .anniv-popup-close:hover { color: #f3f4f6; }
}

/* ---- 节气图文弹窗：左文案 + 右竖版插画 ---- */
.anniv-popup-term .anniv-popup-mask { background: rgba(28, 28, 28, .58); }
.anniv-term-box {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(100%, 640px);
    max-height: 88vh;
    overflow-y: auto;
    padding: 30px 32px 22px;
    background: #fffdf9;
    border-radius: 6px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .3);
}
.anniv-term-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 26px;
    align-items: start;
}
.anniv-term-copy { min-width: 0; }
.anniv-term-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: .08em;
    color: #8a8275;
}
.anniv-term-title {
    margin: 0 0 18px;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    color: #22201d;
    font-family: KaiTi, STKaiti, "Songti SC", SimSun, serif;
}
.anniv-term-poem { margin: 0 0 16px; }
.anniv-term-poem p {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.7;
    color: #a8432f;
    font-family: KaiTi, STKaiti, "Songti SC", SimSun, serif;
}
.anniv-term-body p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.85;
    color: #4b4741;
    text-align: justify;
}
.anniv-term-wish {
    margin: 12px 0 0;
    font-size: 13px;
    color: #6b6257;
}
.anniv-term-date {
    margin: 14px 0 0;
    font-size: 11.5px;
    line-height: 1.6;
    color: #9a9286;
    text-align: right;
}
.anniv-term-art { min-width: 0; }
.anniv-term-art-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
}
/* 圆形关闭键：保留 44px 触摸热区 */
.anniv-popup-close.anniv-term-close {
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #d8d2c6;
    border-radius: 50%;
    background: #fff;
    color: #6b6257;
    font-size: 18px;
    line-height: 1;
}
.anniv-popup-close.anniv-term-close::after {
    content: "";
    position: absolute;
    inset: -7px;
}
.anniv-popup-close.anniv-term-close:hover { color: #22201d; background: #f6f2e9; }
@media (prefers-color-scheme: dark) {
    .anniv-popup-close.anniv-term-close { color: #6b6257; }
    .anniv-popup-close.anniv-term-close:hover { color: #22201d; }
}
@media (max-width: 640px) {
    .anniv-term-box { width: 100%; padding: 24px 20px 18px; }
    .anniv-term-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .anniv-term-title { font-size: 28px; margin-bottom: 12px; }
    .anniv-term-poem p { font-size: 14px; }
    .anniv-term-art { width: 120px; margin: 0 auto; }
    .anniv-term-date { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .anniv-term-box { box-shadow: none; }
}

/* 反垃圾蜜罐字段：移到视口外而不是 display:none，
   既不会被访客看到，也不会因「不可见元素」被部分脚本跳过 */
.cf-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
