/* 回忆地图 · 样式 — 回忆详情页标题吸顶、城市选择器、瀑布流 Grid 终极布局、导航按钮、交互动效 */
    /* --- [回忆详情页] 标题吸顶 V7 — font-size transition + contain 限制 reflow --- */
    #detail-content-title {
        position: sticky !important;
        top: 0px !important;
        z-index: 1001;
        background-color: #ffffff !important;
        margin: -40px -25px 14px -25px !important;
        padding: 40px 25px 12px 25px !important;
        box-shadow: 0 -40px 0 0 #ffffff !important;
        border-bottom: none;
        overflow: visible !important;
        transition: box-shadow 0.15s ease, padding 0.15s ease;
    }

    /* wrap：不参与缩放动画本身，但作为"视觉窗口"裁掉动画过程中 title-inner 短暂溢出的部分（类似蒙版） */
    #detail-title-wrap {
        display: block;
        overflow: hidden;
    }

    /* inner：改用 transform:scale 做收缩动画（GPU合成层，不触发reflow，比font-size更跟手不卡顿） */
    #detail-title-inner {
        display: block;
        font-weight: 900 !important;
        font-size: 28px;
        line-height: 1.3;
        contain: layout style;
        transform-origin: left top;
        transform: scale(1) translateZ(0);
        width: 100%;
        will-change: transform;
        /* 提升合成层，减少重绘影响范围；width 不加入过渡（瞬间切换），
           避免和JS测高度的时机错位；溢出交给外层 wrap 的 overflow:hidden 蒙版裁掉即可 */
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
            margin-bottom 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @media (min-width: 769px) {
        #detail-title-inner {
            font-size: 32px;
        }
    }

    /* 吸顶激活 */
    #detail-content-title.is-sticky {
        padding-top: 18px !important;
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 -40px 0 0 #ffffff, 0 1px 0 rgba(0, 0, 0, 0.07) !important;
    }

    /* 17/28 ≈ 0.6071（手机端默认字号28px时的收缩比例，桌面端32px在下方媒体查询里单独覆盖） */
    /* width 按 1/0.6071 预先撑宽，缩放后视觉宽度刚好还原成容器满宽——短标题会自然变成一行，长标题该换几行还换几行，绝不截断 */
    /* margin-bottom 由 JS 在 is-sticky 切换时实测高度后动态写入（见下方 adjustStickyTitleSpacing），此处不再写死数值 */
    #detail-content-title.is-sticky #detail-title-inner {
        transform: scale(0.6071) translateZ(0) !important;
        width: 164.7% !important;
    }

    /* ===== 电脑端：紧凑标题 + 滚动后城市/时间缩入标题 ===== */
    @media (min-width: 769px) {
        #detail-content {
            padding-top: 56px !important;
            padding-left: 40px !important;
            padding-right: 40px !important;
        }

        #detail-content-title {
            position: sticky !important;
            top: -2px !important;
            z-index: 1001 !important;
            background: #ffffff !important;
            margin: -10px -40px 0 -40px !important;
            padding: 10px 40px 6px 40px !important;
            box-shadow: none !important;
            border-bottom: none !important;
        }

        #detail-content-title::before {
            content: '';
            position: absolute;
            top: -100px;
            left: -2px;
            right: -2px;
            height: 105px;
            background: #ffffff;
            z-index: -1;
        }

        #detail-content-title.is-sticky {
            padding-top: 10px !important;
            padding-bottom: 8px !important;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
            border-bottom: none !important;
        }

        /* 17/32 ≈ 0.53125（桌面端基础字号32px时的收缩比例，覆盖上方通用的手机端比例） */
        /* margin-bottom 抵消多余空白（32px*1.3行高 - 缩放后视觉高度 ≈ 19.5px） */
        /* width 按 1/0.53125 预先撑宽，缩放后视觉宽度还原满宽——短标题自然单行，长标题正常换行，不截断 */
        /* margin-bottom 由 JS 动态测量补偿，此处不写死 */
        #detail-content-title.is-sticky #detail-title-inner {
            transform: scale(0.53125) translateZ(0) !important;
            width: 188.24% !important;
        }

        #detail-content-title.is-sticky #detail-mini-info {
            height: auto !important;
            max-height: 40px !important;
            opacity: 1 !important;
            margin-top: 3px !important;
            margin-bottom: 4px !important;
            font-size: 13px !important;
            color: #888 !important;
            letter-spacing: 0 !important;
            font-weight: 500 !important;
        }

        .detail-meta-info {
            position: static !important;
            margin: 6px -40px 20px -40px !important;
            padding: 8px 40px 12px 40px !important;
            background: #ffffff !important;
            border: none !important;
            max-height: 120px !important;
            overflow: hidden !important;
            opacity: 1 !important;
            transition: max-height 0.15s ease,
                opacity 0.15s ease,
                padding 0.15s ease,
                margin 0.15s ease !important;
        }

        #detail-content-title.is-sticky+.detail-meta-info {
            max-height: 0 !important;
            opacity: 0 !important;
            pointer-events: none !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            border: none !important;
        }
    }

    /* 吸顶小字信息 */
    #detail-mini-info {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
        font-size: 12px;
        color: #888;
        font-weight: 500;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.15s ease, max-height 0.15s ease;
        margin-top: 0;
    }

    #detail-content-title.is-sticky #detail-mini-info {
        opacity: 1;
        max-height: 20px;
        margin-top: 4px;
    }

    /* ==========================================================================
       【小红书风格终极版】手机端详情页标题吸顶、副标题浮现、标签折叠动效
       ========================================================================== */
    @media (max-width: 768px) {

        /* 1. 基础标题样式设定 */
        #detail-content-title {
            margin: -10px -20px 15px -20px !important;
            padding: 10px 20px 8px 20px !important;
            box-shadow: none !important;
            position: sticky !important;
            top: -2px !important;
            /* 吃掉亚像素缝隙 */
            z-index: 1001 !important;
            background-color: #ffffff !important;
            transition: padding 0.15s ease,
                box-shadow 0.15s ease !important;
            will-change: opacity;
        }

        /* 2. 白色挡板，覆盖向上滑动时可能透出的图片或文字 */
        #detail-content-title::before {
            content: '';
            position: absolute;
            top: -100px;
            left: -2px;
            right: -2px;
            height: 105px;
            background-color: #ffffff;
            z-index: -1;
        }

        /* 3. 标题吸顶时的激活状态（字号缩小由 scale 实现，此处只调间距） */
        #detail-content-title.is-sticky {
            padding-top: 16px !important;
            padding-bottom: 8px !important;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
        }

        /* 4. 原有的详情页下方标签区块，添加过渡动画 */
        .detail-meta-info {
            max-height: 200px !important;
            overflow: hidden !important;
            opacity: 1 !important;
            transition: max-height 0.15s ease,
                opacity 0.15s ease,
                padding 0.15s ease,
                margin 0.15s ease !important;
        }

        /* 5. 【核心逻辑】吸顶时，将下方的原生大标签区完全折叠隐藏 */
        #detail-content-title.is-sticky+.detail-meta-info {
            max-height: 0 !important;
            opacity: 0 !important;
            pointer-events: none !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            border: none !important;
        }

        /* 手机端 mini-info 继承全局规则，无需重复定义 */
    }

    /* 给详情页容器加一个基础的过渡属性（如果之前没有的话）*/
    #detail-overlay {
        /* 这里的 0.3s 是动画时长，可以根据你的喜好微调 */
        transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* 新增一个用于退场的类 */

    /* 1. 外层遮罩淡出 */

    /* 2. 内部的白色卡片往下掉并缩小 */

    /* 1. 外层遮罩：只负责原地淡入淡出和毛玻璃 */
    #detail-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10000;
        display: none;
        /* 由 JS 控制显示 */
        opacity: 0;
        /* 关键：去掉这里的 transform，只保留 opacity 和 backdrop-filter */
        transition: opacity 0.4s ease, backdrop-filter 0.4s ease;

        /* 毛玻璃效果 */
        background: rgba(255, 255, 255, 0.25);
        /* 调低透明度，让毛玻璃更明显 */
        backdrop-filter: blur(0px);
        /* 初始无模糊 */
        -webkit-backdrop-filter: blur(0px);

        /* 全屏模式下去掉 overlay-base 继承的 padding，消除四周白边 */
        padding: 0;
    }

    /* 2. 激活状态：外层原地变亮、变模糊 */
    #detail-overlay.active {
        display: flex;
        /* 确保是 flex 布局以居中内部卡片 */
        opacity: 1;
        backdrop-filter: blur(15px);
        /* 激活时的模糊程度 */
        -webkit-backdrop-filter: blur(15px);
    }

    /* 3. 内部卡片：负责位移和缩放动画 */
    /* 假设你的内部卡片类名是 .detail-card，如果不是请替换为实际的类名 */

    /* 4. 当父级激活时，内部卡片回到原位 */

    /* 5. 消失时的状态控制（JS 延时关闭用） */
    .detail-closing {
        opacity: 0 !important;
        backdrop-filter: blur(0px) !important;
        -webkit-backdrop-filter: blur(0px) !important;
    }

    /* ==========================================================================
   【电脑端专属】wx-lightbox 左右导航按钮（仿时光画廊风格）
   ========================================================================== */
    .wx-lb-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.15);
        color: white;
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 22px;
        cursor: pointer;
        z-index: 20002;
        display: none;
        /* 默认隐藏 */
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        backdrop-filter: blur(4px);
        padding-bottom: 130px;
        /* 给底部说明层让出空间 */
        padding-bottom: 0;
        /* 确保不被底部说明遮挡，垂直居中于图片区域 */
        margin-bottom: 65px;
    }

    .wx-lb-nav-btn:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    /* 只在电脑端显示 */
    @media (min-width: 769px) {
        .wx-lb-nav-btn {
            display: flex !important;
        }
    }

    /* 手机端：单张图片时隐藏，多张时靠手势；PC端靠按钮 */
    @media (max-width: 768px) {
        .wx-lb-nav-btn {
            display: none !important;
        }
    }

    /* ==========================================================================
   【手机端】回忆详情中的图片整体上移（与城市详情图片详情位置一致）
   ========================================================================== */
    @media (max-width: 768px) {

        /* 手机端：回忆卡片浮动居中，四周留白，不贴底 */
        #detail-overlay {
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
        }

        #detail-overlay .modal-content-box {
            position: relative !important;
            bottom: auto !important;
            left: auto !important;
            top: auto !important;
            transform: none !important;
            width: 92% !important;
            max-width: 92% !important;
            height: 85vh !important;
            max-height: 85vh !important;
            border-radius: 28px !important;
            margin: auto !important;
        }

        #detail-content {
            padding: 20px 20px 80px 20px !important;
        }
    }

    /* 国家视图切换胶囊 */
    #country-view-toggle {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(26, 26, 26, 0.85);
        /* 深色半透明 */
        backdrop-filter: blur(10px);
        padding: 5px;
        border-radius: 50px;
        z-index: 12000 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0;
        pointer-events: none;
    }

    /* 激活状态：向上浮现 */
    #country-view-toggle.active {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    #toggle-slider {
        position: absolute;
        width: 70px;
        height: 34px;
        background: #fff;
        border-radius: 25px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    .view-toggle-btn {
        position: relative;
        width: 70px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: #888;
        cursor: pointer;
        z-index: 2;
        transition: color 0.3s;
    }

    /* 切换状态逻辑 */
    #country-view-toggle[data-mode="city"] .view-toggle-btn.city {
        color: #1a1a1a;
    }

    #country-view-toggle[data-mode="moment"] .view-toggle-btn.moment {
        color: #1a1a1a;
    }

    #country-view-toggle[data-mode="moment"] #toggle-slider {
        transform: translateX(70px);
    }

    #country-view-toggle[data-mode="gallery"] .view-toggle-btn.gallery {
        color: #1a1a1a;
    }

    #country-view-toggle[data-mode="gallery"] #toggle-slider {
        transform: translateX(140px);
    }

    /* ==========================================================================
【全局弹窗动效升级】筛选、新回忆、那年今日
========================================================================== */
    /* 1. 复用详情页的开场动画，让面板展开时带有高级弹性呼吸感 */
    #tag-filter-overlay.active,
    #modal-overlay.active,
    #otd-overlay.active {
        display: flex !important;
        animation: overlay-fade-in 0.3s ease forwards;
    }

    #tag-filter-overlay.active .modal-content-box,
    #modal-overlay.active .modal-content-box,
    #otd-overlay.active .modal-content-box {
        animation: card-pop-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        transform-origin: center center;
        will-change: transform, opacity;
    }

    /* 2. 通用的关闭退场动画类 */
    .overlay-closing {
        animation: overlay-fade-out 0.3s ease forwards !important;
        pointer-events: none !important;
    }

    .overlay-closing .modal-content-box {
        animation: card-pop-down 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
    }

    /* 补充退场关键帧（如果以前没有的话） */
    @keyframes overlay-fade-out {
        from {
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }

        to {
            background-color: rgba(0, 0, 0, 0);
            backdrop-filter: blur(0px);
        }
    }

    @keyframes card-pop-down {
        from {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        to {
            opacity: 0;
            transform: scale(0.9) translateY(30px);
        }
    }

    /* ==========================================================================
【轻量化滑动动效】筛选、新回忆、那年今日
========================================================================== */

    /* 1. 遮罩层设为透明，不再变黑，但依然保留拦截点击的功能 */
    #tag-filter-overlay,
    #modal-overlay,
    #otd-overlay {
        background-color: rgba(0, 0, 0, 0) !important;
        /* 完全透明 */
        backdrop-filter: none !important;
        /* 移除毛玻璃，减少视觉负担 */
        display: none;
        align-items: flex-end;
        /* 弹窗对齐到屏幕底部，更符合底部弹出习惯 */
        justify-content: center;
    }

    #tag-filter-overlay.active,
    #modal-overlay.active,
    #otd-overlay.active {
        display: flex !important;
    }

    /* 2. 进入动画：从下往上滑动 + 淡入 */
    #tag-filter-overlay.active .modal-content-box,
    #modal-overlay.active .modal-content-box,
    #otd-overlay.active .modal-content-box {
        animation: slide-up 0.5s cubic-bezier(0.32, 0.72, 0, 1) forwards;
        will-change: transform, opacity;
    }

    /* 3. 退出动画：向下滑动 + 淡出 */
    .overlay-closing .modal-content-box {
        animation: slide-down 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards !important;
    }

    @keyframes slide-up {
        from {
            transform: translateY(100%);
            /* 从屏幕下方开始 */
            opacity: 0;
        }

        to {
            transform: translateY(0);
            /* 回到原位 */
            opacity: 1;
        }
    }

    @keyframes slide-down {
        from {
            transform: translateY(0);
            opacity: 1;
        }

        to {
            transform: translateY(100%);
            /* 向下滑出屏幕 */
            opacity: 0;
        }
    }

    /* 🌟 核心强制逻辑：只要面板开启且是国家模式，强制显示选择器 */
    #main-container.panel-open #memory-panel.country-mode~#country-view-toggle {
        display: flex !important;
        opacity: 1 !important;
        transform: translate(-50%, 0) !important;
        /* 确保它在屏幕中间 */
        pointer-events: auto !important;
        visibility: visible !important;
    }

    #city-view-toggle {
        /* ... 其他属性保持不变 ... */
        z-index: 200000 !important;
        /* 确保比所有 Panel 都高 */
        bottom: 30px;
        /* 初始状态设为完全透明并下移 */
        opacity: 0;
        pointer-events: none;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #city-view-toggle.active {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
    }

    /* --- 城市选择器专属样式 --- */
    #city-view-toggle {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(30px);
        background: rgba(26, 26, 26, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 5px;
        border-radius: 50px;
        z-index: 2147483647 !important;
        /* 强制最高层级 */
        display: flex;
        align-items: center;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    #city-view-toggle.active {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
    }

    #city-toggle-slider {
        position: absolute;
        width: 70px;
        height: 34px;
        background: #fff;
        border-radius: 25px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
    }

    .city-view-toggle-btn {
        position: relative;
        width: 70px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: #888;
        cursor: pointer;
        z-index: 2;
        transition: color 0.3s;
    }

    #city-view-toggle[data-mode="moment"] .city-view-toggle-btn.moment {
        color: #1a1a1a;
    }

    #city-view-toggle[data-mode="moment"] #city-toggle-slider {
        transform: translateX(0);
    }

    #city-view-toggle[data-mode="gallery"] .city-view-toggle-btn.gallery {
        color: #1a1a1a;
    }

    #city-view-toggle[data-mode="gallery"] #city-toggle-slider {
        transform: translateX(70px);
    }

    /* ===== 城市详情底部选择器：强制常驻显示逻辑 =====
       因为 #city-view-toggle 和 #memory-panel 不是真正的 CSS 兄弟元素，
       所以放弃依赖 CSS 兄弟选择器，改为完全由 JS 的 .active 类控制。
       默认隐藏，JS 打开城市面板时添加 active 类，关闭时移除。
    */
    #city-view-toggle.active {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    /* 当处于国家模式时，隐藏城市的选择器，防止重叠 */
    #main-container.panel-open #memory-panel.country-mode~#city-view-toggle {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* ==========================================================================
       【终极修复】城市底部选择器：稳定显示补丁
       确保 .active 时完全可见，并修复手机端 z-index 穿透问题
       ========================================================================== */
    #city-view-toggle {
        position: fixed !important;
        bottom: 30px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(30px) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        z-index: 2147483647 !important;
        background: rgba(26, 26, 26, 0.88) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 5px !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0.35s !important;
    }

    #city-view-toggle.active {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    /* 手机端：确保底部安全区不遮挡选择器 */
    @media (max-width: 768px) {
        #city-view-toggle {
            bottom: max(30px, env(safe-area-inset-bottom, 0px) + 20px) !important;
        }
    }

    /* ✅ 安全规则：详情卡片打开时，底部选择器不应浮出 */
    #city-view-toggle:not(.active),
    #country-view-toggle:not(.active) {
        pointer-events: none !important;
    }

    /* ✅ 核心新规则：当任何详情/图片/灯箱打开时，强制隐藏两个选择器 */
    body.detail-open #city-view-toggle,
    body.detail-open #country-view-toggle {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transform: translateX(-50%) translateY(30px) !important;
    }

    @media (min-width: 769px) {

        #country-view-toggle,
        #city-view-toggle {
            left: 66.67vw !important;
        }
    }

    /* ========== 终极布局修复：回忆瀑布流（手机2列，电脑3列）========== */
    /* ========== 终极布局修复 V2：改用 CSS Grid，左右列同步出现 ========== */

    /* 桌面端：非国家模式显示3列 Grid */
    @media (min-width: 769px) {

        #memory-panel:not(.country-mode) #waterfall-list,
        #memory-panel:not(.country-mode) .waterfall-container {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            grid-auto-flow: row !important;
            align-items: start !important;
            row-gap: 10px !important;
            column-gap: 20px !important;
            padding: 10px 30px 80px 30px !important;
            column-count: unset !important;
            -webkit-column-count: unset !important;
        }
    }

    /* 桌面端：国家模式回忆标签也显示3列 Grid */
    @media (min-width: 769px) {

        #memory-panel.country-mode #waterfall-list,
        #memory-panel.country-mode .waterfall-container {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            grid-auto-flow: row !important;
            align-items: start !important;
            row-gap: 10px !important;
            column-gap: 20px !important;
            padding: 10px 30px 80px 30px !important;
            column-count: unset !important;
            -webkit-column-count: unset !important;
        }
    }

    /* 手机端：所有模式显示2列 Grid */
    @media (max-width: 768px) {
        #memory-panel .waterfall-container {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            grid-auto-flow: row !important;
            align-items: start !important;
            row-gap: 6px !important;
            column-gap: 12px !important;
            padding: 10px 12px 130px 12px !important;
            column-count: unset !important;
            -webkit-column-count: unset !important;
        }

        /* 图片自适应原比例 */
        #memory-panel .waterfall-container .moment-card img {
            aspect-ratio: auto !important;
            object-fit: contain !important;
            height: auto !important;
        }
    }

    /* Grid 模式下 moment-card 不需要 inline-block，正常 block 即可 */
    #memory-panel .waterfall-container .moment-card {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        break-inside: unset !important;
        -webkit-column-break-inside: unset !important;
    }

    /* 国家概览城市网格：样式已统一交由 .city-grid-mode 类控制，不在此重复定义 */

    /* ✅ 画册图片保持原始宽高比（不裁剪，不拉伸） */
    .country-card img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        aspect-ratio: unset !important;
    }

    /* 静态写死画廊卡片样式，防止动态注入失败时标题显示为 block 布局 */
    .country-card {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        background: #f8f8f8;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        margin-bottom: 0;
    }

    .country-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12) !important;
    }

    .country-card-info {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        padding: 30px 12px 12px !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%) !important;
        color: #fff !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    .country-card:hover .country-card-info {
        opacity: 1 !important;
    }

    /* wx-lightbox 画廊注释层 - V2 严格按设计图：纯黑底 + 左对齐 + 紧凑层级 */
    #wx-gallery-caption {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 60px 24px 46px 24px;
        /* 顶部 padding 加大以扩展渐变区域，底部注释上移 20px */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.75) 40%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
        color: #fff;
        z-index: 100010;
        cursor: pointer;
        pointer-events: auto;
        box-sizing: border-box;
        text-align: left;
    }

    #wx-gallery-caption-title {
        font-size: 22px;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 6px;
        letter-spacing: -0.3px;
        line-height: 1.25;
    }

    #wx-gallery-caption-meta {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.78);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 8px;
    }

    #wx-gallery-caption-hint {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 500;
        margin-top: 0;
    }

    /* 有注释时：图片上移避免被遮挡 */
    #wx-lightbox.has-gallery-caption .wx-slide-item {
        padding-bottom: 130px !important;
        align-items: center !important;
    }

    /* wx-lightbox 不上下浮动 */
    #wx-lightbox-slider {
        touch-action: pan-x !important;
        overscroll-behavior: none !important;
    }

    .wx-slide-item {
        touch-action: pan-x !important;
        overscroll-behavior-y: none !important;
    }

    /* ============================================================
       【终极修复包】修复城市卡片双列 + 画廊排版混乱
       优先级最高，覆盖所有历史冲突规则
       ============================================================ */

    /* === 修复1：城市网格（国家概览"城市"标签）严禁单列 ===
       grid 布局，先横后竖，手机2列，电脑3列。
       不加 media query 的基础规则，覆盖所有 column 规则 */
    #waterfall-list.city-grid-mode,
    #memory-panel #waterfall-list.city-grid-mode,
    body #memory-panel #waterfall-list.city-grid-mode {
        display: grid !important;
        grid-auto-flow: row !important;
        column-count: unset !important;
        -webkit-column-count: unset !important;
        column-gap: 0 !important;
        -webkit-column-gap: 0 !important;
        box-sizing: border-box !important;
    }

    @media (max-width: 768px) {

        #waterfall-list.city-grid-mode,
        #memory-panel #waterfall-list.city-grid-mode,
        body #memory-panel #waterfall-list.city-grid-mode {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 8px !important;
            /* 🌟 核心修改1：将卡片之间的缝隙从 15px 缩小近 50% 到 8px */
            padding: 15px 10px 130px 10px !important;
            /* 💡 核心修改2：稍微调小了左右两边的外边距（从15px降到10px），这样卡片整体能变得更大、更饱满 */
        }

        #waterfall-list.city-grid-mode .city-overview-card,
        #memory-panel #waterfall-list.city-grid-mode .city-overview-card,
        body #memory-panel #waterfall-list.city-grid-mode .city-overview-card {
            width: 100% !important;
            max-width: 100% !important;
            margin-bottom: 0 !important;
            margin: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            box-sizing: border-box !important;
            break-inside: auto !important;
            -webkit-column-break-inside: auto !important;
            float: none !important;
            min-width: 0 !important;
        }
    }

    @media (min-width: 769px) {

        #waterfall-list.city-grid-mode,
        #memory-panel #waterfall-list.city-grid-mode,
        body #memory-panel #waterfall-list.city-grid-mode {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 6px !important;
            padding: 30px 10px 60px 10px !important;
        }

        #waterfall-list.city-grid-mode .city-overview-card,
        #memory-panel #waterfall-list.city-grid-mode .city-overview-card,
        body #memory-panel #waterfall-list.city-grid-mode .city-overview-card {
            width: 100% !important;
            max-width: 100% !important;
            margin-bottom: 0 !important;
            margin: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            box-sizing: border-box !important;
            break-inside: auto !important;
            -webkit-column-break-inside: auto !important;
            float: none !important;
            min-width: 0 !important;
        }
    }

    /* 即使存在残留 inline style 也强制覆盖 */
    #waterfall-list.city-grid-mode[style*="column-count"],
    #waterfall-list.city-grid-mode[style*="display: block"],
    #waterfall-list.city-grid-mode[style*="display:block"] {
        display: grid !important;
        column-count: unset !important;
    }

    /* === 修复2：画廊容器防止排版混乱 ===
       画廊由 renderCityGallery / renderCountryGallery 动态渲染，
       内部使用 display:flex 的 colContainer，
       必须禁止外层 #waterfall-list 的 column 规则影响内部 flex 子元素 */
    #waterfall-list #country-masonry-root {
        display: block !important;
        width: 100% !important;
        column-count: unset !important;
        -webkit-column-count: unset !important;
    }

    #waterfall-list #country-masonry-root>div {
        /* colContainer: flex row，列之间均分 */
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        /* 清除 column break 干扰 */
        column-span: none !important;
        break-inside: auto !important;
    }

    #waterfall-list #country-masonry-root>div>div {
        /* 单列容器：flex column，图片从上到下排列 */
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        /* 禁止 column break 拆分列 */
        break-inside: auto !important;
    }

    /* 画廊模式下 waterfall-list 自身不应用 column 排版 */
    #waterfall-list[style*="column-count: 1"],
    #waterfall-list[style*="display: block"] {
        /* 使内联 style 的 column:1 不影响内部 flex 子元素 */
        /* 仅限画廊模式；grid 模式由 city-grid-mode 覆盖 */
    }

    /* 确保画廊图片卡片在 flex 列中正常显示 */
    #country-masonry-root .gallery-card,
    #country-masonry-root img {
        break-inside: auto !important;
        column-span: none !important;
        display: block !important;
        width: 100% !important;
    }

    /* ===== 时光轴模式：电脑端3列瀑布流（超高优先级） ===== */
    @media (min-width: 769px) {

        /* 同时针对 #waterfall-list 和 .waterfall-container 确保两个选择器都生效 */
        #memory-panel.timeline-mode #waterfall-list,
        #memory-panel.timeline-mode .waterfall-container {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            grid-auto-flow: row !important;
            align-items: start !important;
            row-gap: 10px !important;
            column-gap: 20px !important;
            padding: 10px 30px 80px 30px !important;
            column-count: unset !important;
            -webkit-column-count: unset !important;
            columns: unset !important;
            -webkit-columns: unset !important;
        }
    }

    /* ===== 时光轴卡片图片：强制 1:1 正方形（最高优先级，压制所有覆盖规则）===== */
    #memory-panel.timeline-mode .moment-card img,
    #memory-panel.timeline-mode .waterfall-container .moment-card img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        border-radius: 12px !important;
        margin: 10px 0 !important;
        box-shadow: none !important;
    }

    /* ==========================================================================
       【回忆详情导航按钮】左右悬浮布局：按钮固定在详情卡片两侧 45px 处
       ========================================================================== */

    /* 包裹层：作为绝对定位的参照系，尺寸与内部 modal-content-box 对齐 */
    #detail-nav-wrapper {
        position: relative;
        width: 88vw;
        max-width: 1100px;
        box-sizing: border-box;
    }

    /* 让 modal-content-box 在 wrapper 内占满宽度 */
    #detail-nav-wrapper .modal-content-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 电脑端：按钮绝对定位，浮于卡片左右两侧 45px 处，垂直居中 */
    @media (min-width: 769px) {
        #nav-prev-detail {
            position: absolute !important;
            left: -97px !important;
            /* 45px 间距 + 52px 按钮宽度 */
            top: 50% !important;
            right: auto !important;
            transform: translateY(-50%) !important;
            margin: 0 !important;
        }

        #nav-next-detail {
            position: absolute !important;
            right: -97px !important;
            /* 45px 间距 + 52px 按钮宽度 */
            top: 50% !important;
            left: auto !important;
            transform: translateY(-50%) !important;
            margin: 0 !important;
        }

        /* 悬停时保留 translateY 以防止跳动 */
        #nav-prev-detail:hover {
            transform: translateY(-50%) scale(1.1) !important;
        }

        #nav-next-detail:hover {
            transform: translateY(-50%) scale(1.1) !important;
        }
    }

    /* 手机端：wrapper 贴合 92% 宽度，并让内部 modal-content-box 撑满 wrapper */
    @media (max-width: 768px) {
        #detail-nav-wrapper {
            width: 92%;
            max-width: 92%;
        }

        #detail-nav-wrapper .modal-content-box {
            width: 100% !important;
            max-width: 100% !important;
            height: 85vh !important;
            max-height: 85vh !important;
            border-radius: 28px !important;
            margin: 0 !important;
        }
    }

    /* ==========================================================================
   【交互动效升级】页面与卡片切换：左右滑动感
   ========================================================================== */

    /* 1. 详情卡片打开时：从右侧平滑滑入 */
    @keyframes card-slide-in-right {
        0% {
            opacity: 0;
            transform: translateX(60px);
            /* 从右侧 60px 处开始 */
        }

        100% {
            opacity: 1;
            transform: translateX(0);
            /* 回到原位 */
        }
    }

    /* 覆盖原有的 card-pop-up 动画 */
    #detail-overlay.active .modal-content-box {
        animation: card-slide-in-right 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        transform-origin: center center;
        will-change: transform, opacity;
    }

    /* 2. 详情卡片退出/切换时：向左平滑滑出 */
    /* 覆盖原有的 detail-fade-out 退场类 */

    /* 卡片本体向左滑出 */

    /* 如果有 detail-closing 状态，也统一改为向左滑出 */
    .detail-closing .modal-content-box {
        transform: translateX(-60px) !important;
        opacity: 0 !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
    }