/* 回忆地图 · 样式 — 组件补丁：卡片、时光轴、滚动条、详情页、图片灯箱（早期版本迭代） */
 /* 1. 滚动条隐藏 */
 ::-webkit-scrollbar {
     display: none !important;
     width: 0 !important;
     height: 0 !important;
 }

 body,
 #memory-panel,
 #detail-content,
 .modal-content-box {
     -ms-overflow-style: none !important;
     scrollbar-width: none !important;
 }

 /* 2. 基础 UI 圆角与黑边 */
 input,
 textarea,
 select {
     border-radius: 16px !important;
     border: 2px solid #1a1a1a !important;
 }

 .modal-content-box,
 #confirm-box {
     border-radius: 32px !important;
     border: 2px solid #1a1a1a !important;
     box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1) !important;
 }

 button,
 .action-btn-round {
     border-radius: 50px !important;
 }

 #toast {
     border-radius: 50px !important;
     border: 1px solid rgba(0, 0, 0, 0.09) !important;
     background: rgba(255, 255, 255, 0.96) !important;
     color: #1c1c1e !important;
 }

 /* 3. 【重点修复】还原城市标题样式 (去掉胶囊黑框) */
 #display-city-name {
     display: block !important;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
     padding: 0 !important;
     font-size: 36px !important;
     /* 字体改大 */
     font-weight: 700 !important;
     line-height: 1.1 !important;
     margin-bottom: 5px !important;
     color: #000 !important;
     pointer-events: auto !important;
     width: 100% !important;
     transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
     will-change: opacity, transform;
 }

 #display-country-name {
     display: inline-block !important;
     background: transparent !important;
     border: none !important;
     padding: 0 !important;
     color: #666 !important;
     font-size: 13px !important;
     font-weight: 700 !important;
     letter-spacing: 1px !important;
     text-transform: uppercase !important;
     transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
     will-change: opacity, transform;
 }

 /* 标题切换：淡出状态 */
 .title-fade-out {
     opacity: 0 !important;
     transform: translateY(-5px) !important;
     pointer-events: none !important;
 }

 /* 标题切换：淡入状态 */
 .title-fade-in {
     opacity: 1 !important;
     transform: translateY(0) !important;
 }

 /* 4. 【重点修复】列表中的卡片 (保持精致小巧) */
 .moment-card {
     border-radius: 20px !important;
     border: 2px solid #1a1a1a !important;
     box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
     overflow: hidden !important;
     padding: 20px !important;
 }

 .moment-card img {
     border-radius: 12px !important;
     border: 1px solid #eee !important;
 }

 /* 强制缩小列表里的标题 */
 .moment-card .card-title-text {
     font-size: 18px !important;
     font-weight: 700 !important;
     margin-bottom: 8px !important;
 }

 /* 强制缩小列表里的标签 */
 .moment-card .tag-capsule {
     font-size: 10px !important;
     padding: 4px 10px !important;
     border-width: 1px !important;
 }

 /* 5. 【重点修复】详情页的样式 (加大标题和标签) */
 #detail-content-title {
     line-height: 1.2 !important;
 }

 #detail-content .tag-capsule {
     font-size: 14px !important;
     /* 详情页标签变大 */
     padding: 8px 16px !important;
     border-width: 1.5px !important;
     margin-right: 8px !important;
     margin-bottom: 8px !important;
 }

 /* 手机端适配 */
 @media (max-width: 768px) {

     /* 手机详情标题 */
     #display-city-name {
         font-size: 28px !important;
     }

     #detail-overlay .modal-content-box {
         width: 92% !important;
         left: 4% !important;
         bottom: 30px !important;
         border-radius: 32px !important;
     }

     /* 修复手机端详情页国家名可能的空格问题 */
     #detail-content span {
         display: inline-flex;
         align-items: center;
     }
 }

 #detail-external-actions {
     bottom: 60px !important;
     gap: 24px !important;
 }

 /* 修复 1: 叉号 (关闭按钮) 动效与位置 */
 .close-modal {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     width: 36px !important;
     height: 36px !important;
     border-radius: 50% !important;
     /* 关键：设置旋转中心点，防止乱跑 */
     transform-origin: center center !important;
     transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s !important;
 }

 .close-modal:hover {
     background: #f5f5f5 !important;
     /* 原地旋转 90度 */
     transform: rotate(90deg) !important;
 }

 /* 修复 2: 标签筛选器 (桌面端 & 手机端) 圆角 */
 /* 桌面端弹出面板 */
 #filter-panel-desktop {
     border-radius: 24px !important;
     border: 2px solid #1a1a1a !important;
     box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1) !important;
 }

 /* 手机端筛选弹窗 (复用通用弹窗样式，确保生效) */
 #tag-filter-overlay .modal-content-box {
     border-radius: 32px !important;
 }

 /* --- 修复叉号旋转偏心问题 (纯CSS重绘方案) --- */

 .close-modal {
     /* 1. 隐藏原本的文字叉号 */
     font-size: 0 !important;

     /* 2. 确保容器是正方形且定位准确 */
     display: flex !important;
     width: 36px !important;
     height: 36px !important;
     position: absolute !important;
     /* 保持原有的定位属性 */
     top: 20px !important;
     right: 20px !important;
     border-radius: 50% !important;
     background: transparent !important;
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

     /* 3. 这一步不旋转，留给 hover */
     transform: rotate(0deg) !important;
 }

 /* 使用伪元素画第一条线 */
 .close-modal::before {
     content: '' !important;
     position: absolute !important;
     top: 50% !important;
     left: 50% !important;
     width: 16px !important;
     /* 线的长度 */
     height: 2px !important;
     /* 线的粗细 */
     background-color: #aaa !important;
     /* 线的颜色 */
     border-radius: 2px !important;
     /* 居中并旋转 45度 */
     transform: translate(-50%, -50%) rotate(45deg) !important;
     transition: background-color 0.2s !important;
 }

 /* 使用伪元素画第二条线 */
 .close-modal::after {
     content: '' !important;
     position: absolute !important;
     top: 50% !important;
     left: 50% !important;
     width: 16px !important;
     height: 2px !important;
     background-color: #aaa !important;
     border-radius: 2px !important;
     /* 居中并旋转 -45度 */
     transform: translate(-50%, -50%) rotate(-45deg) !important;
     transition: background-color 0.2s !important;
 }

 /* 悬停时的交互效果 */
 .close-modal:hover {
     background: #f5f5f5 !important;
     /* 容器整体旋转 90度 */
     transform: rotate(90deg) !important;
 }

 /* 悬停时线条变黑 */
 .close-modal:hover::before,
 .close-modal:hover::after {
     background-color: #000 !important;
 }

 /* --- V7.0 卡片详情优化补丁 --- */

 /* 1. 卡片圆角变小 (原 32px -> 20px) */
 .modal-content-box {
     border-radius: 20px !important;
 }

 /* 2. 详情页图片：去边框 + 可点击状态 */
 #detail-content img {
     border: none !important;
     /* 去掉描边 */
     cursor: zoom-in !important;
     /* 鼠标放上去显示放大镜 */
     transition: transform 0.2s;
 }

 #detail-content img:active {
     transform: scale(0.98);
     /* 点击时微缩反馈 */
 }

 /* ==========================================
高级图片查看器样式
========================================== */
 #lightbox-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.95);
     z-index: 20000;
     display: none;
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(10px);
     touch-action: none;
     /* 关键：防止手机端默认缩放和滑动干扰 */
     overflow: hidden;

 }

 #lightbox-img {
     max-width: 95vw;
     max-height: 95vh;
     object-fit: contain;
     cursor: grab;
     transition: transform 0.2s ease;
     /* 回弹和切换的动画 */
     transform-origin: center center;
     user-select: none;
     -webkit-user-drag: none;
 }

 #lightbox-img:active {
     cursor: grabbing;
 }

 .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: 24px;
     cursor: pointer;
     z-index: 20001;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s;
     backdrop-filter: blur(4px);
 }

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

 #lb-prev {
     left: 20px;
 }

 #lb-next {
     right: 20px;
 }

 #lb-counter {
     position: absolute;
     top: 25px;
     left: 14px;
     transform: none;
     color: rgba(255, 255, 255, 0.92);
     font-size: 13px;
     font-weight: 700;
     font-family: 'Roboto Mono', monospace;
     z-index: 20001;
     background: none;
     padding: 6px 10px;
     border-radius: 0;
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
 }

 #lb-title {
     position: absolute;
     bottom: 30px;
     /* 放在底部，避免和顶部的计数器打架 */
     left: 50%;
     transform: translateX(-50%);
     color: white;
     font-size: 16px;
     font-weight: 700;
     z-index: 20001;
     background: rgba(0, 0, 0, 0.5);
     padding: 8px 24px;
     border-radius: 24px;
     text-align: center;
     max-width: 80vw;
     /* 防止标题太长撑爆屏幕 */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     /* 太长会自动变成省略号 */
     backdrop-filter: blur(4px);
     pointer-events: none;
     /* 关键：让它变成“穿透”状态，不影响你滑动图片 */
 }

 #lb-close {
     position: absolute;
     top: 25px;
     right: 25px;
     background: rgba(255, 255, 255, 0.15);
     color: white;
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     font-size: 20px;
     cursor: pointer;
     z-index: 20001;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.2s;
 }

 #lb-close:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 @media (max-width: 768px) {
     .lb-nav-btn {
         display: none !important;
     }

     /* 手机端依靠滑动，隐藏箭头 */
     #lightbox-img {
         max-width: 100vw;
         max-height: 100vh;
     }
 }




 /* 4. 详情页顶部信息栏：加大字号 */
 .detail-meta-info {
     font-size: 16px !important;
     /* 原 14px -> 16px */
     font-weight: 700 !important;
 }

 /* 5. 删除按钮变为黑色 (覆盖原有的红色样式) */

 /* --- V11.0 列表卡片交互优化 (仅悬停显示阴影) --- */

 /* 1. 默认状态：扁平、无阴影、浅边框 */
 .moment-card {
     box-shadow: none !important;
     border: 2px solid #e0e0e0 !important;
     /* 平时是浅灰色，不抢眼 */
     transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 }

 /* 2. 悬停状态：浮起、出阴影、黑边框 */
 .moment-card:hover {
     border-color: #1a1a1a !important;
     /* 鼠标放上去变黑框 */
     box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1) !important;
     /* 出现阴影 */
     transform: translateY(-4px) !important;
     /* 向上浮动 */
 }



 /* --- V15.0 时光轴颜值升级 (极简杂志风) --- */

 /* 1. 隔断容器：改为底部细线，增加呼吸感 */
 .timeline-section-header {
     border-bottom: 1px solid #e0e0e0 !important;
     /* 细灰线 */
     padding: 40px 0 10px 0 !important;
     /* 上宽下窄 */
     align-items: baseline !important;
     /* 文字底部对齐 */
     margin-bottom: 25px !important;
     gap: 8px !important;
 }

 /* 2. 年份：小号灰色，作为辅助信息 */
 .timeline-year-label {
     font-family: 'Roboto Mono', monospace;
     font-size: 16px;
     font-weight: 700;
     color: #999;
     letter-spacing: -0.5px;
     margin-right: -5px !important;
 }

 /* 3. 日期：超大黑体，视觉重心 */

 /* 4. 城市：纯文字，去掉黑底胶囊 */
 .timeline-city-text {
     font-size: 18px;
     font-weight: 700;
     color: #333;
     letter-spacing: 0.5px;
     /* text-transform: uppercase; 如果想要英文大写可加上这行 */
 }

 /* 5. 隐藏之前的旧样式 (以防万一) */

 /* --- V16.0 日期排版优化 (数字大，汉字小) --- */

 /* 1. 数字样式 */
 .t-num {
     font-family: 'Roboto Mono', sans-serif !important;
     /* 保持数字字体 */
     font-size: 36px !important;
     font-weight: 900 !important;
     color: #1a1a1a !important;
     letter-spacing: -2px !important;
 }

 /* 2. 汉字样式 (月/日) - 关键修改 */
 .t-cn {
     font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
     font-size: 16px !important;
     /* 汉字改小 */
     font-weight: 400 !important;
     /* 字重变细 */
     color: #888 !important;
     /* 颜色变浅 */
     margin: 0 0px 0 0px !important;
     /* 增加一点左右间距 */
     vertical-align: baseline !important;
     /* 底部对齐 */
 }

 /* 3. 修正容器对齐方式 */
 .timeline-section-header {
     align-items: baseline !important;
     /* 确保数字和汉字底部对齐 */
 }

 /* --- UI 样式优化补丁 (V2026) --- */

 /* 1. 输入框去除描边，改为浅灰背景 */
 /* 解释：去掉了边框后，如果背景还是白色，用户会找不到输入框在哪里，所以必须加一个浅灰色背景 */
 input,
 textarea,
 select {
     border: none !important;
     /* 去除描边 */
     background-color: #f5f5f5 !important;
     /* 浅灰底色 */
     box-shadow: none !important;
     /* 去除可能的阴影 */
 }

 /* 输入框聚焦时的状态 */
 input:focus,
 textarea:focus {
     background-color: #ebebeb !important;
     /* 聚焦时背景稍微变深 */
     border: none !important;
     outline: none !important;
 }

 /* 2. 时间删除按钮 (X)：圆角统一 + 风格统一 */
 button[onclick="window.clearTime()"] {
     border-radius: 50% !important;
     border: 1.5px solid #e0e0e0 !important;
     background-color: #f2f2f7 !important;
     transition: all 0.2s;
 }

 button[onclick="window.clearTime()"]:hover {
     background-color: #e0e0e0 !important;
 }

 /* 3. 底部上传按钮组：圆角化 + 风格统一 */
 /* 定位“上传本地图片”按钮 (它是 label 标签) */
 #image-url-list+div label {
     border-radius: 16px !important;
     /* 圆角改为 16px */
     border: none !important;
     /* 去除描边 (建议，为了视觉统一) */
     background-color: #f5f5f5 !important;
     /* 浅灰底色 */
 }

 /* 定位“添加网络链接”按钮 */
 #image-url-list+div button {
     border-radius: 16px !important;
     /* 圆角改为 16px */
     border: none !important;
     /* 去除描边 */
     background-color: #f5f5f5 !important;
     /* 浅灰底色 */
 }

 /* 鼠标悬停时的效果 */
 #image-url-list+div label:hover,
 #image-url-list+div button:hover {
     background-color: #e0e0e0 !important;
     transform: translateY(-2px);
 }

 /* --- V21.0 补丁：时光轴专用黑色粗滚动条 --- */

 /* 1. 默认情况下，让 memory-panel 的滚动条消失 */
 #memory-panel::-webkit-scrollbar {
     display: none;
     width: 0;
 }

 /* 2. 【关键】只有当加上了 timeline-mode 类名时，才显示滚动条 */
 #memory-panel.timeline-mode::-webkit-scrollbar {
     display: block !important;
     width: 8px !important;
     /* 宽度：8px (较粗) */
 }

 /* 3. 滚动条滑块样式：纯黑、圆角 */
 #memory-panel.timeline-mode::-webkit-scrollbar-thumb {
     background-color: #000000 !important;
     border-radius: 4px;
 }

 /* 4. 确保面板本身支持滚动 */
 #memory-panel {
     overflow-y: auto !important;
     /* 必须允许垂直滚动 */
     -webkit-overflow-scrolling: touch;
     /* 手机端顺滑滚动 */
 }

 /* --- V22.0 终极滚动条强制修复 --- */

 /* 1. 针对 Firefox 和现代浏览器，强制恢复滚动条宽度 */
 #memory-panel.timeline-mode {
     scrollbar-width: thin !important;
     /* 恢复细滚动条 */
     -ms-overflow-style: auto !important;
     overflow-y: auto !important;
 }

 /* 2. 针对 Chrome/Safari，强制覆盖之前的隐藏设置 */
 #memory-panel.timeline-mode::-webkit-scrollbar {
     display: block !important;
     /* 必须显示 */
     width: 32px !important;
     /* 设定宽度 */
     height: 100% !important;
     background: transparent !important;
     visibility: visible !important;
 }

 /* 3. 设定滑块颜色 (纯黑) */
 #memory-panel.timeline-mode::-webkit-scrollbar-thumb {
     background-color: #000000 !important;
     border-radius: 4px !important;
     border: none !important;
 }

 /* --- V27.0 紧急修复：解决首页按钮无法点击的问题 --- */

 /* 1. 【核心修复】平时必须隐藏，否则会挡住首页按钮！ */
 #detail-overlay {
     display: none !important;
     /* 默认隐藏 */

     /* 预设居中布局，但暂时不显示 */
     align-items: center !important;
     justify-content: center !important;
 }

 /* 2. 只有当加上 .active 类名时（即点开详情后），才显示并启用 Flex 居中 */
 #detail-overlay.active {
     display: flex !important;
 }

 /* 3. 再次确认卡片样式（保持之前的居中、无影、大顶距设计） */
 #detail-overlay .modal-content-box {
     margin: 0 auto !important;
     box-shadow: none !important;
     border: 2px solid #1a1a1a !important;
     position: relative !important;
     bottom: auto !important;
     transform: none !important;
     width: 90% !important;
     max-width: 380px !important;
 }

 /* 4. 再次确认内容间距 */
 #detail-content {
     padding-top: 60px !important;
 }

 /* --- V28.0 时光轴细节优化：去加号 + 调宽滚动条 --- */

 /* 1. 【隐藏加号】当处于时光轴模式时，隐藏“添加固定城市回忆”的加号按钮 */
 #memory-panel.timeline-mode button[onclick*="openMomentWithFixedCity"] {
     display: none !important;
 }

 /* 2. 【调整滚动条宽度】覆盖之前的设置 */
 #memory-panel.timeline-mode::-webkit-scrollbar {
     /* 👇 修改下面这个数字，数字越大，滚动条越宽 */
     width: 100px !important;

     display: block !important;
     height: 100% !important;
     background: transparent !important;
 }

 /* 3. 【调整滑块圆角】让它看起来更圆润 */
 #memory-panel.timeline-mode::-webkit-scrollbar-thumb {
     background-color: #000000 !important;
     border-radius: 10px !important;
     /* 圆角改大一点 */
     border: 4px solid transparent !important;
     /* 增加透明边框，让滑块变细一点但感应区域大 */
     background-clip: content-box !important;
 }

 /* --- V29.0 滚动条宽度终极强制版 --- */

 /* 1. 强制设定滚动条的整体宽度 */
 #memory-panel.timeline-mode::-webkit-scrollbar {
     /* 👇 您现在改这个数字，改多少就是多少，所见即所得 */
     width: 30px !important;

     display: block !important;
     background: transparent !important;
 }

 /* 2. 强制设定滑块样式 (去掉透明边框，实心显示) */
 #memory-panel.timeline-mode::-webkit-scrollbar-thumb {
     background-color: #000000 !important;
     border-radius: 10px !important;

     /* 👇 关键：把之前的透明边框去掉 */
     border: none !important;

     /* 👇 关键：让颜色填满整个宽度 */
     background-clip: border-box !important;
 }

 /* 3. 再次确保隐藏加号按钮 */
 #memory-panel.timeline-mode button[onclick*="openMomentWithFixedCity"] {
     display: none !important;
 }

 /* --- V30.0 强力修复：隐藏加号 + 显形滚动条 --- */

 /* 1. 【隐藏加号】不靠点击属性，直接靠位置隐藏（头部里第二个按钮就是加号） */
 #memory-panel.timeline-mode .panel-header-container button:nth-of-type(2) {
     display: none !important;
 }

 /* 2. 【显形滚动条】 */
 #memory-panel.timeline-mode::-webkit-scrollbar {
     /* 👇 设置为 25px 巨宽，方便手指按 */
     width: 25px !important;

     display: block !important;
     /* 👇 给轨道加个浅灰色，这样您就能看见它到底占了多宽！ */
     background: #f4f4f4 !important;
 }

 /* 3. 【黑色滑块】 */
 #memory-panel.timeline-mode::-webkit-scrollbar-thumb {
     background-color: #000000 !important;
     border: none !important;
     border-radius: 4px !important;
     /* 轻微圆角 */
 }

 /* --- V31.0 终极修复合集：卡片居中 + 时光轴净化 --- */

 /* === 1. 手机端回忆卡片：强制绝对居中 === */
 @media (max-width: 768px) {
     #detail-overlay .modal-content-box {
         /* 这种写法是 CSS 中最稳的居中方式，不依赖 margin */
         position: absolute !important;
         top: 50% !important;
         left: 50% !important;
         transform: translate(-50%, -50%) !important;

         /* 重置旧的干扰属性 */
         bottom: auto !important;
         margin: 0 !important;

         /* 外观设置 */
         width: 85% !important;
         max-width: 360px !important;
         border-radius: 24px !important;
         box-shadow: none !important;
         /* 无阴影 */
         border: 2px solid #1a1a1a !important;
         background: #fff !important;
     }

     /* 确保内容离顶部有距离 */
     #detail-content {
         padding-top: 70px !important;
     }
 }

 /* === 2. 时光轴模式：隐藏顶部的加号按钮 === */
 /* 只要面板有 timeline-mode，就隐藏那个调用 openMomentWithFixedCity 的按钮 */
 #memory-panel.timeline-mode button[onclick*="openMomentWithFixedCity"] {
     display: none !important;
 }

 /* === 3. 时光轴模式：滚动条调整 === */
 #memory-panel.timeline-mode::-webkit-scrollbar {
     width: 15px !important;
     /* 宽度设置 */
     display: block !important;
     background: transparent !important;
 }

 #memory-panel.timeline-mode::-webkit-scrollbar-thumb {
     background-color: #000000 !important;
     /* 纯黑滑块 */
     border-radius: 8px !important;
     border: none !important;
     /* 实心无边框 */
 }

 /* --- V32.0 紧急修复：恢复电脑端卡片尺寸 --- */

 /* 专门针对电脑/平板 (屏幕宽于 768px 的设备) */
 @media (min-width: 769px) {
     #detail-overlay .modal-content-box {
         /* 👇 把宽度改回 600px (或者您喜欢的 520px) */
         max-width: 600px !important;

         /* 确保在电脑上不要太窄 */
         width: 100% !important;

         /* 保持居中 */
         margin: 0 auto !important;
         position: relative !important;
         left: auto !important;
         top: auto !important;
         transform: none !important;
     }
 }

 /* --- V33.0 时光轴卡片瘦身版 (Compact Mode) --- */

 /* 1. 卡片整体变紧凑 */
 #memory-panel.timeline-mode .moment-card {
     padding: 12px 16px !important;
     /* 内边距大幅减小 (原24px) */
     margin-bottom: 12px !important;
     /* 卡片间距减小 */
     border-radius: 12px !important;
     /* 圆角改小，更显精致 */
     border-width: 1px !important;
     /* 边框变细 */
 }

 /* 2. 标题变小 */
 #memory-panel.timeline-mode .moment-card .card-title-text {
     font-size: 15px !important;
     /* 字体减小 (原18-22px) */
     margin-bottom: 4px !important;
     line-height: 1.4 !important;
 }

 /* 3. 描述文字变小且只显示2行 */
 #memory-panel.timeline-mode .moment-card div[style*="color:#555"] {
     font-size: 12px !important;
     margin-bottom: 0 !important;
     -webkit-line-clamp: 2 !important;
     /* 限制最多显示2行 */
 }

 /* 4. 图片间距调整 */
 #memory-panel.timeline-mode .moment-card img {
     margin-top: 8px !important;
     margin-bottom: 4px !important;
     border-radius: 8px !important;
 }

 /* 5. 标签变迷你 */
 #memory-panel.timeline-mode .moment-card .tag-capsule {
     font-size: 9px !important;
     padding: 2px 6px !important;
     border-width: 1px !important;
     margin-bottom: 4px !important;
 }

 /* --- V36.0 时光轴图片：居中正方形 (Instagram 风格) --- */

 #memory-panel.timeline-mode .moment-card img {
     /* 1. 【核心】设定固定宽高，打造完美正方形 */
     width: 360px !important;
     height: 360px !important;

     /* 2. 【核心】居中裁剪 (只显示最中间的部分，不拉伸) */
     object-fit: cover !important;
     object-position: center center !important;

     /* 3. 让图片在卡片里居中显示 */
     display: block !important;
     margin: 10px auto !important;
     /* 上下10px，左右自动居中 */

     /* 4. 外观修饰 */
     border-radius: 12px !important;
     /*稍微圆润一点*/
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
     /*加一点点立体感*/
 }

 /* --- V37.0 时光轴图片：撑满卡片的大正方形 --- */

 #memory-panel.timeline-mode .moment-card img {
     /* 1. 【核心】宽度撑满卡片内容区 */
     width: 100% !important;

     /* 2. 【核心】强制 1:1 正方形比例 */
     /* 浏览器会自动根据现在的宽度，算出一样的高度 */
     aspect-ratio: 1 / 1 !important;
     height: auto !important;
     /* 重置之前写死的固定高度 */

     /* 3. 【核心】居中裁剪 */
     object-fit: cover !important;
     object-position: center center !important;

     /* 4. 外观修饰 */
     display: block !important;
     margin: 12px 0 !important;
     /* 上下留一点呼吸空间 */
     border-radius: 12px !important;
     box-shadow: none !important;
 }

 /* --- V38.0 时光轴表头重构：左城市 · 右日期 --- */

 .timeline-section-header {
     /* 1. 确保是弹性盒子 */
     display: flex !important;
     align-items: baseline !important;
     /* 底部对齐，让文字看起来更整齐 */
     width: 100% !important;
     gap: 10px !important;
     /* 元素之间的最小间距 */
 }

 /* === 1. 城市名称：移动到最左边 === */
 .timeline-city-text {
     /* 【核心】order: -1 让它在视觉上排到第一个位置 */
     order: -1 !important;

     /* 【核心】margin-right: auto 会占据剩余所有空间，把后面的元素狠狠推到右边 */
     margin-right: auto !important;

     margin-left: 0 !important;
     font-size: 22px !important;
     /* 稍微加大一点，作为左侧标题 */
     font-weight: 900 !important;
 }

 /* === 2. 年份：跟在日期旁边 === */
 .timeline-year-label {
     /* 视觉顺序排第 2 */
     order: 2 !important;
     font-size: 16px !important;
     color: #999 !important;
     margin-right: 0px !important;
     /* 和日期保持一点距离 */
 }

 /* === 3. 日期 (月/日)：排在最右边 === */
 /* 这是一个包含日期的 div 容器 */
 .timeline-section-header>div {
     /* 视觉顺序排第 3 */
     order: 3 !important;
     text-align: right !important;
 }

 /* --- V39.0 微调：缩短年份与日期之间的距离 --- */

 /* 1. 父容器：取消统一间距 */
 .timeline-section-header {
     gap: 0 !important;
     /* 【关键】改为0，这样元素会紧紧贴在一起 */
 }

 /* 2. 年份：只给右边加一点点空隙 */
 .timeline-year-label {
     margin-right: 3px !important;
     /* 【关键】这里控制年份和日期的距离，数字越小越近 */
 }

 /* 3. 再次确保城市在最左边 (防止被 gap=0 影响) */
 .timeline-city-text {
     margin-right: auto !important;
     /* 保持“挤压”效果，把右边的内容推远 */
     padding-right: 10px !important;
     /* 防止城市名太长时和年份撞上 */
 }

 /* --- V2026 最终版：悬浮图标 + 底部自适应居中 --- */

 @media (max-width: 768px) {

     /* 1. 容器定位：完全透明，负责布局 */
     #home-actions {
         position: fixed !important;
         bottom: 30px !important;
         /* 距离底部留出呼吸感 */
         left: 50% !important;
         /* 设为居中基准 */

         /* 【核心布局】 */
         width: 100% !important;
         max-width: 400px !important;
         /* 限制最大宽度，防止在大屏手机上间距过大 */
         padding: 0 20px !important;
         /* 左右两边留出安全距离，防止贴边 */
         box-sizing: border-box !important;

         display: flex !important;
         flex-direction: row !important;
         justify-content: space-between !important;
         /* 关键：两端对齐，中间自动等距 */
         align-items: flex-end !important;
         /* 底部对齐，为了让中间的大按钮向上凸起 */

         /* 去掉背景，回归悬浮感 */
         background: transparent !important;
         box-shadow: none !important;
         backdrop-filter: none !important;
         border: none !important;

         /* 动画与状态 */
         z-index: 900 !important;
         /* 复合 Transform：既要居中(X轴)，又要控制滑入滑出(Y轴) */
         transform: translateX(-50%) translateY(0) !important;
         transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
         opacity: 1 !important;
         pointer-events: none;
         /* 容器穿透，不挡地图操作 */
     }

     /* 2. 隐藏状态 (叠加 Y轴 位移) */
     #home-actions.actions-hidden {
         opacity: 0 !important;
         /* 保持 X 居中，同时 Y 向下滑动 */
         transform: translateX(-50%) translateY(100px) !important;
         pointer-events: none !important;
     }

     /* 3. 恢复实体按钮样式 (白球黑边) */
     #home-actions .action-btn-round {
         /* 开启点击 */
         pointer-events: auto !important;

         width: 46px !important;
         height: 46px !important;
         background: #ffffff !important;
         /* 恢复白底 */
         border: 2px solid #1a1a1a !important;
         /* 恢复黑边 */
         color: #000000 !important;
         /* 黑图标 */
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
         /* 恢复阴影 */

         padding: 0 !important;
         margin: 0 !important;
         transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
     }

     /* 按钮按下效果 */
     #home-actions .action-btn-round:active {
         transform: scale(0.9) !important;
         background: #f0f0f0 !important;
     }

     /* 4. 添加按钮 (黑球白图标) — 放最左边 */
     #home-actions #btn-add-main {
         width: 60px !important;
         height: 60px !important;
         background: #000000 !important;
         color: #ffffff !important;
         border: 2px solid #000000 !important;

         /* 不需要 translateY 了，靠 flex-items-end 自然对齐，
            只需要稍微改一点 margin-bottom 让它视觉上看起来更高 */
         margin-bottom: 5px !important;

         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
         z-index: 1001 !important;

         /* 强制排在最左边 */
         order: -1 !important;
     }

     /* 加号按下效果 */
     #home-actions #btn-add-main:active {
         transform: scale(0.9) !important;
     }

     /* 5. 详情页按钮样式隔离 (确保详情页的按钮也正常) */
     #detail-external-actions .action-btn-round {
         background: #ffffff !important;
         border: 2px solid #1a1a1a !important;
         opacity: 1 !important;
         color: #000 !important;
         width: 52px !important;
         height: 52px !important;
     }

     /* 移除旧的汉堡菜单干扰 */
 }

 /* --- V40.0 紧急修复：时光轴日期防换行 --- */

 /* 1. 父容器设定 */
 .timeline-section-header {
     display: flex !important;
     align-items: baseline !important;
     /* 底部对齐 */
     width: 100% !important;
     gap: 0 !important;
     /* 间距归零，由元素自己控制 */
 }

 /* 2. 右侧：日期容器 (月/日) -> 绝对不许换行 */
 .timeline-section-header>div {
     /* 【核心】强制一行显示 */
     white-space: nowrap !important;

     /* 【核心】禁止缩小！空间不够时，你是大爷，不许挤你 */
     flex-shrink: 0 !important;

     /* 排序：放最右边 */
     order: 3 !important;
     text-align: right !important;
 }

 /* 3. 中间：年份 -> 也不许换行 */
 .timeline-year-label {
     white-space: nowrap !important;
     flex-shrink: 0 !important;
     /* 禁止缩小 */

     order: 2 !important;
     margin-right: 4px !important;
     /* 和日期保持微小距离 */
 }

 /* 4. 左侧：城市名称 -> 只有你能换行 */
 .timeline-city-text {
     /* 排序：放最左边 */
     order: -1 !important;

     /* 占据剩余空间，把右边的推过去 */
     margin-right: auto !important;

     /* 【核心】允许缩小：空间不够时，你负责压缩 */
     flex-shrink: 1 !important;

     /* 【核心】允许缩小到 0，防止被撑开 */
     min-width: 0 !important;

     /* 文字换行设置 */
     white-space: normal !important;
     word-wrap: break-word !important;

     /* 保持一点右间距，别贴着年份 */
     padding-right: 15px !important;
 }

 /* --- V43.0 手机端列表：小标签 + 正方形图 (合并版) --- */
 @media (max-width: 768px) {

     /* 1. 图片：强制 1:1 正方形 (Instagram 风格) */
     #memory-panel .moment-card img {
         width: 100% !important;
         height: auto !important;
         /* 重置高度，交由比例控制 */
         aspect-ratio: 1 / 1 !important;
         /* 【关键】锁定正方形比例 */
         object-fit: cover !important;
         /* 【关键】居中裁剪，防止图片被拉扁 */
         object-position: center center !important;
         margin-top: 8px !important;
         margin-bottom: 8px !important;
         border-radius: 8px !important;
         /* 圆角稍微改小一点点，更精致 */
     }

     /* 2. 标签：缩小尺寸 (同步时光轴样式) */
     #memory-panel .moment-card .tag-capsule {
         font-size: 9px !important;
         /* 字体改回 9px */
         padding: 2px 6px !important;
         /* 极窄边距 */
         border-width: 1px !important;
         /* 细边框 */
         margin-right: 4px !important;
         margin-bottom: 4px !important;
     }

     /* 3. 卡片间距微调 (让列表更紧凑) */
     #memory-panel .moment-card {
         padding: 16px !important;
         /* 内边距稍微减小 */
     }
 }

 /* --- V45.0 电脑端：添加按钮(黑)沉底 - 标准尺寸版 --- */
 @media (min-width: 769px) {

     /* 1. 容器维持垂直排列 */
     #home-actions {
         display: flex !important;
         flex-direction: column !important;
     }

     /* 2. 针对“添加按钮”的样式修正 */
     #home-actions #btn-add-main {
         /* 【位置】置顶（与手机端最左保持一致） */
         order: -1 !important;

         /* 【外观】纯黑背景，白图标 */
         background-color: #000000 !important;
         color: #ffffff !important;
         border-color: #000000 !important;

         /* 【尺寸】强制改回标准大小 (52px) */
         width: 52px !important;
         height: 52px !important;

         /* 【间距】去除额外间距，保持 uniform */
         margin-top: 0 !important;
         margin-bottom: 0 !important;

         /* 【阴影】保持统一 */
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
     }

     /* 悬停微动效 */
     #home-actions #btn-add-main:hover {
         transform: translateY(-4px) !important;
         /* 和其他按钮一样的上浮效果 */
         background-color: #333333 !important;
         /* 悬停时稍微变浅一点的黑 */
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
     }
 }

 /* --- V46.0 手机端国家概览 (双列流 + 右侧滑入) --- */

 /* 1. 概览卡片样式 */
 .city-overview-card {
     break-inside: avoid;
     margin-bottom: 15px;
     background: #fff;
     border: 2px solid #1a1a1a;
     border-radius: 12px;
     padding: 10px;
     cursor: pointer;
     text-align: center;
     transition: transform 0.2s;

     /* 【关键】添加和城市详情一样的上浮动画 */
     opacity: 0;
     animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     contain: layout style;
 }

 .city-overview-card:active {
     transform: scale(0.96);
 }

 /* 2. 图片：强制 1:1 正方形 */
 .city-overview-card img {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: 8px;
     display: block;
     margin-bottom: 8px;
     background-color: #f0f0f0;
 }

 /* 3. 文字样式 */

 /* --- V48.0 城市卡片：完全同步回忆卡片风格 (含动效与交互) --- */

 .city-overview-card {
     /* 1. 容器基础：完全复刻 .moment-card 的参数 */
     background: #fff;
     border: 2px solid #e0e0e0;
     /* 默认浅灰边框 */
     border-radius: 20px;
     /* 统一的大圆角 */
     padding: 10px;
     /* 统一内边距 */
     margin-bottom: 24px;
     /* 卡片间距 */
     break-inside: avoid;
     position: relative;
     cursor: pointer;

     /* 2. 阴影与质感 */
     box-shadow: none;
     /* 默认扁平 */
     transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
     /* 统一的丝滑过渡 */

     /* 3. 进场动画 (同步 fadeInUp) */
     opacity: 0;
     animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }

 /* 4. 交互动效 (鼠标悬停 + 手机点击) */
 .city-overview-card:hover,
 .city-overview-card:active {
     border-color: #1a1a1a;
     /* 激活变黑框 */
     transform: translateY(-4px);
     /* 向上回弹浮动 */
     box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
     /* 出现立体阴影 */
 }

 /* 5. 卡片内部图片：保持 1:1 但增加精致感 */
 .city-overview-card img {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: 12px;
     /* 图片圆角 */
     border: 1px solid #eee;
     /* 图片微弱描边 */
     display: block;
     margin-bottom: 12px;
     /* 图片与文字的间距 */
 }

 /* 6. 卡片内部文字：复用回忆卡片的字体层级 */
 .city-overview-card .card-title-text {
     font-size: 18px;
     /* 标题字号 */
     font-weight: 900;
     color: #1a1a1a;
     line-height: 1.2;
     margin-bottom: 4px;
 }

 .city-overview-card .card-meta-text {
     font-size: 12px;
     color: #888;
     font-weight: 600;
     font-family: 'Roboto Mono', monospace;
     /* 保持数字的机械感 */
 }

 /* --- V49.0 布局修复：瀑布流改用 CSS Grid，左右列同步渲染 --- */
 /* Grid 模式下卡片正常 block 即可，break-inside 属性已不再需要 */
 @media (max-width: 768px) {
     .waterfall-container .moment-card {
         display: block !important;
         width: 100% !important;
         margin-bottom: 0 !important;
         box-sizing: border-box !important;
     }
 }

 /* --- V50.0 紧急修复：手机端卡片重叠问题 (Box-Sizing) --- */

 /* 1. 【核心修复】强制使用“边框盒模型” */
 /* 加上这行后，padding 和 border 就不会把卡片撑爆了 */
 .city-overview-card,
 .moment-card {
     box-sizing: border-box !important;
     width: 100% !important;
     max-width: 100% !important;
 }

 /* 2. 优化手机端 Grid 网格参数 */
 @media (max-width: 768px) {
     .waterfall-container {
         /* 确保网格布局生效 */
         display: grid !important;
         grid-template-columns: repeat(2, 1fr) !important;
         /* 严格等分两列 */
         gap: 6px !important;
         /* 卡片之间的间距 */

         /* 清除瀑布流的残留影响 */
         column-count: auto !important;
         column-gap: 0 !important;
         display: block;
         /* 兼容性兜底 (Grid不支持时) */

         /* 调整容器边缘，防止卡片贴着屏幕边 */
         padding: 15px !important;
         padding-bottom: 120px !important;
     }

     /* 3. 防止长文字撑开布局 */
     .city-overview-card .card-title-text,
     .moment-card .card-title-text {
         word-break: break-word !important;
         /* 允许长单词换行 */
         white-space: normal !important;
         /* 允许换行 */
         font-size: 16px !important;
         /* 如果觉得标题太大挤占空间，稍微调小一点 */
     }
 }

 /* --- V51.0 手机端视觉微调：宽间距 + 大图片 --- */
 @media (max-width: 768px) {

     /* 1. 容器：增加列与列之间的缝隙 */
     .waterfall-container {
         display: grid !important;
         grid-template-columns: repeat(2, 1fr) !important;

         /* 【改动】间距从 12px 加大到 24px，让左右分得更开 */
         gap: 10px !important;

         /* 稍微减小容器边缘的留白，把空间留给中间的缝隙 */
         padding: 15px 20px 120px 20px !important;
     }

     /* 2. 卡片：减小内边距，让图片变大 */
     .city-overview-card {
         /* 【改动】内边距从 20px 减小到 10px */
         /* 这样图片就会向四周扩张，显得更大更饱满 */
         padding: 10px !important;

         /* 保持圆角和边框风格 */
         border-radius: 16px !important;
         border: 2px solid #e0e0e0 !important;
         box-sizing: border-box !important;
         width: 100% !important;
     }

     /* 3. 图片：微调圆角以适应新的内边距 */
     .city-overview-card img {
         width: 100% !important;
         aspect-ratio: 1 / 1 !important;
         object-fit: cover !important;

         /* 图片圆角稍微改小一点，视觉上更协调 */
         border-radius: 8px !important;
         margin-bottom: 8px !important;
     }

     /* 4. 文字：保持适当大小 */
     .city-overview-card .card-title-text {
         font-size: 15px !important;
         /* 稍微精简字号 */
         margin-bottom: 2px !important;
     }

     .city-overview-card .card-meta-text {
         font-size: 11px !important;
     }
 }

 /* --- 国家悬浮胶囊样式 --- */
 #country-floating-capsule {
     position: fixed;
     top: 65px;
     /* 距离顶部的高度 */
     left: 50%;
     transform: translateX(-50%) translateY(-20px);
     /* 初始位置稍微偏上，用于动画 */

     background: #ffffff;
     color: #000000;
     border: 2px solid #000000;
     border-radius: 50px;
     /* 胶囊圆角 */

     padding: 8px 16px;
     font-size: 14px;
     font-weight: 900;
     letter-spacing: 1px;
     text-transform: uppercase;

     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
     z-index: 2000;
     /* 确保在地图之上 */

     white-space: nowrap !important;
     /* 核心：强制文字在一排显示 */

     opacity: 0;
     pointer-events: none;
     /* 不阻挡鼠标点击地图 */
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 /* 激活状态 */
 #country-floating-capsule.active {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
     /* 滑下来 */
 }

 /* --- V52.0 电脑端三列瀑布流 Grid 升级补丁 --- */

 /* 仅针对电脑/平板端 (屏幕宽度大于 768px) */
 @media (min-width: 769px) {

     .waterfall-container {
         /* 1. 【核心】改为 CSS Grid 三列，左右同步出现 */
         display: grid !important;
         grid-template-columns: repeat(3, 1fr) !important;
         grid-auto-flow: row !important;
         align-items: start !important;
         gap: 20px !important;
         column-count: unset !important;
         -webkit-column-count: unset !important;
         column-gap: 0 !important;

         /* 3. 确保左右内边距适中 */
         padding-left: 30px !important;
         padding-right: 30px !important;
     }

     /* 4. 时光轴日期标题横跨全行 */
     .timeline-section-header {
         grid-column: 1 / -1 !important;
         width: 100% !important;
     }

     /* 5. 针对三列布局，稍微调整卡片内的字体大小，防止太挤 */
     .moment-card .card-title-text {
         font-size: 16px !important;
         /* 稍微改小一点点 */
     }
 }

 /* --- V53.0 电脑端字体放大增强补丁 --- */

 /* 仅针对电脑端生效 */
 @media (min-width: 769px) {

     /* 1. 放大标题 (覆盖原本的 15px/18px 设置) */
     .moment-card .card-title-text,
     #memory-panel.timeline-mode .moment-card .card-title-text {
         font-size: 22px !important;
         /* 加大到 22px */
         line-height: 1.3 !important;
         /* 增加行高，防止文字挤在一起 */
         margin-bottom: 10px !important;
         letter-spacing: -0.5px !important;
         /* 稍微收紧字间距，显得更精致 */
     }

     /* 2. 放大标签 (覆盖原本的 9px/10px 设置) */
     .moment-card .tag-capsule,
     #memory-panel.timeline-mode .moment-card .tag-capsule {
         font-size: 15px !important;
         /* 回归标准 12px */
         padding: 5px 12px !important;
         /* 增加标签的内边距，让它不那么局促 */
         border-width: 1.5px !important;
         /* 边框稍微加粗一点点，更有质感 */
     }

     /* 3. (可选) 同步放大正文描述，保持视觉平衡 */
     .moment-card div[style*="color:#555"],
     #memory-panel.timeline-mode .moment-card div[style*="color:#555"] {
         font-size: 14px !important;
         margin-bottom: 10px !important;
         -webkit-line-clamp: 3 !important;
         /* 字体大了，允许显示 3 行，避免被截断太早 */
     }
 }

 /* --- V54.0 电脑端时光轴视觉优化：增加卡片顶部留白 --- */

 /* 仅针对电脑端生效 */
 @media (min-width: 769px) {

     /* 针对时光轴模式下的卡片容器 */
     #memory-panel.timeline-mode .moment-card {
         /* 【核心修改】大幅增加内边距 */
         /* 1. 上下边距：从 12px 增加到 28px -> 让标题离顶部边缘更远 */
         /* 2. 左右边距：从 16px 增加到 24px -> 保持视觉比例协调 */
         padding: 28px 24px !important;
     }
 }

 /* --- V62.0 标签禁用状态样式 --- */
 .tag-capsule.disabled {
     opacity: 0.3 !important;
     /* 变浅 */
     cursor: not-allowed !important;
     /* 鼠标变成禁止符号 */
     pointer-events: none !important;
     /* 彻底禁止点击事件 */
     background-color: #f0f0f0 !important;
     /* 背景变灰 (可选) */
     border-color: #ddd !important;
     /* 边框变灰 (可选) */
     color: #aaa !important;
     /* 文字变灰 */
 }

 /* --- 终极排版修复覆盖包 --- */

 /* 1. 全局盒子模型修复：防止 padding 撑爆屏幕 */
 *,
 *::before,
 *::after {
     box-sizing: border-box !important;
 }

 @media (max-width: 768px) {

     /* 2. 列表容器：使用 2 列 Grid，左右同步出现 */
     .waterfall-container {
         display: grid !important;
         grid-template-columns: repeat(2, 1fr) !important;
         grid-auto-flow: row !important;
         align-items: start !important;
         column-count: unset !important;
         gap: 12px !important;
         padding: 15px 15px 120px 15px !important;
         width: 100% !important;
     }

     /* 3. 卡片宽度修复：确保卡片不超出屏幕 */
     .moment-card,
     .city-overview-card {
         width: 100% !important;
         max-width: 100% !important;
         margin-bottom: 15px !important;
         padding: 15px !important;
         float: none !important;
     }

     /* 4. 详情页/弹窗修复：改为从底部滑出的“抽屉”模式，更符合手机操作 */
     #detail-overlay .modal-content-box {
         position: fixed !important;
         bottom: 0 !important;
         left: 0 !important;
         top: auto !important;
         transform: none !important;
         width: 100% !important;
         max-width: 100% !important;
         height: 85vh !important;
         /* 高度占屏幕85% */
         border-radius: 24px 24px 0 0 !important;
         /* 只有上方圆角 */
         margin: 0 !important;
     }

     /* 5. 底部按钮组修复：防止互相重叠并居中 */
     #home-actions {
         position: fixed !important;
         left: 0 !important;
         bottom: 20px !important;
         width: 100% !important;
         max-width: 100% !important;
         transform: none !important;
         display: flex !important;
         flex-direction: row !important;
         justify-content: space-evenly !important;
         /* 按钮均匀分布 */
         align-items: center !important;
         background: transparent !important;
         padding: 0 10px !important;
     }

     /* 缩小普通按钮，给中间加号留空间 */
     #home-actions .action-btn-round {
         width: 44px !important;
         height: 44px !important;
         position: static !important;
     }

     /* 添加回忆按钮：放在最左边 */
     #home-actions #btn-add-main {
         width: 56px !important;
         height: 56px !important;
         margin-bottom: 10px !important;
         /* 稍微向上突起 */
         order: -1 !important;
         /* 强制排在最左边 */
     }

     /* 隐藏可能干扰的旧版菜单 */
 }

 /* 6. 解决图片比例问题：确保在列表里不拉伸 */
 .moment-card img,
 .city-overview-card img {
     width: 100% !important;
     height: auto !important;
     aspect-ratio: auto !important;
     /* 恢复自然比例，防止被强制正方形拉扁 */
     object-fit: contain !important;
 }

 /* --- 深度优化覆盖包：恢复双列瀑布流与加粗样式 --- */

 /* 1. 全局盒子模型：这是所有排版正确的基础 */
 *,
 *::before,
 *::after {
     box-sizing: border-box !important;
 }

 @media (max-width: 768px) {

     /* 2. 强制恢复双列布局 (针对时光轴和城市预览) */
     .waterfall-container {
         display: grid !important;
         grid-template-columns: repeat(2, 1fr) !important;
         /* 严格双列 */
         gap: 12px !important;
         /* 卡片间距 */
         padding: 10px 12px 120px 12px !important;
         column-count: auto !important;
         /* 禁用旧版瀑布流防止错位 */
     }

     /* 3. 时光轴日期表头：必须横跨两列 */
     .timeline-section-header {
         grid-column: span 2 !important;
         /* 跨越双列显示 */
         display: flex !important;
         flex-direction: row !important;
         align-items: baseline !important;
         padding: 20px 5px 10px 5px !important;
     }

     /* 4. 恢复加粗文字 (重点修复) */
     .card-title-text,
     #display-city-name,
     .t-num,
     .timeline-city-text,
     #detail-content-title {
         font-weight: 900 !important;
         /* 极粗体 */
         -webkit-font-smoothing: antialiased;
     }

     /* 5. 卡片样式微调：确保在双列下不拥挤 */
     .moment-card,
     .city-overview-card {
         width: 100% !important;
         margin: 0 !important;
         padding: 12px !important;
         border-radius: 16px !important;
         display: flex !important;
         flex-direction: column !important;
     }

     /* 6. 图片处理：在双列中保持比例 */
     .moment-card img,
     .city-overview-card img {
         width: 100% !important;
         aspect-ratio: 1 / 1 !important;
         /* 强制正方形显得整齐 */
         object-fit: cover !important;
         border-radius: 8px !important;
         margin-top: 8px !important;
     }

     /* 7. 详情页（弹窗）优化 */
     #detail-overlay .modal-content-box {
         position: fixed !important;
         bottom: 0 !important;
         left: 0 !important;
         width: 100% !important;
         height: 85vh !important;
         border-radius: 24px 24px 0 0 !important;
         transform: none !important;
         margin: 0 !important;
     }

     /* 8. 底部控制条：保持居中不重叠 */
     #home-actions {
         position: fixed !important;
         left: 50% !important;
         transform: translateX(-50%) !important;
         width: 95% !important;
         display: flex !important;
         flex-direction: row !important;
         justify-content: space-between !important;
         align-items: flex-end !important;
         background: transparent !important;
         pointer-events: none !important;
         padding-bottom: 20px !important;
     }

     #home-actions .action-btn-round {
         pointer-events: auto !important;
         width: 46px !important;
         height: 46px !important;
         position: static !important;
     }

     #home-actions #btn-add-main {
         width: 60px !important;
         height: 60px !important;
         margin-bottom: 5px !important;
     }
 }

 /* 修正时光轴模式下被隐藏的按钮间距 */
 #memory-panel.timeline-mode .panel-header-container button:nth-of-type(2) {
     display: none !important;
 }

 /* --- 深度恢复：加粗增强与间距优化包 --- */

 /* 1. 恢复回忆卡片标题加粗 */
 .moment-card .card-title-text,
 .city-overview-card .card-title-text {
     font-weight: 900 !important;
     color: #000 !important;
 }

 /* 2. 恢复时光轴标题（数字与城市名）加粗 */
 .t-num,
 .timeline-city-text {
     font-weight: 900 !important;
 }

 /* 3. 恢复弹窗标题加粗（筛选标签、新回忆、回忆档案等） */
 /* 针对你代码中直接写的 20px/24px 标题 div */
 #tag-filter-overlay .modal-content-box div:first-of-type,
 #modal-overlay .modal-content-box div:first-of-type,
 .archive-tabs .archive-tab,
 #detail-content-title {
     font-weight: 900 !important;
 }

 /* 4. 优化“选择城市导出”上方的空隙 */
 /* 增加按钮区域顶部的外边距 */
 #city-list-actions-view,
 #city-list-actions-export {
     margin-top: 20px !important;
     padding-top: 10px !important;
 }

 /* 额外提醒：确保手机端全局字体平滑，加粗更明显 */
 body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 @media (max-width: 768px) {

     /* 确保在双列模式下，标题依然足够醒目 */
     .moment-card .card-title-text {
         font-size: 16px !important;
         line-height: 1.2 !important;
         margin-bottom: 8px !important;
     }

     /* 时光轴城市名在手机端稍微调大，并确保加粗 */
     .timeline-city-text {
         font-size: 22px !important;
     }
 }

 /* 卡片外层容器 */
 .card-wrapper {
     display: flex;
     flex-direction: column;
     gap: 20px;
     /* 控制卡片之间的垂直间距 */
     padding: 15px;
 }

 /* 单个卡片 */

 /* 卡片内部内容区 */
 .card-body {
     padding: 16px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     /* 文字、标签之间的间距 */
 }

 /* 图片处理 */
 .card-body img {
     width: 100%;
     height: auto;
     border-radius: 8px;
     margin-top: 10px;
 }