/* 回忆地图 · 样式 — 时光画廊与幻灯片：瀑布流、播放界面、标注、放大镜、层级修复 */
 /* ==========================================================================
【画廊专供】PC 端入口及瀑布流样式
========================================================================== */
 @media (min-width: 769px) {

     /* PC 端显示图标 */
 }

 @media (max-width: 768px) {

     /* 手机端隐藏图标，维持 2+1+2 */
 }

 /* 画廊内部图片的悬浮效果 */

 /* ==========================================================================
【时光画廊】3列瀑布流 + 智能交互悬浮层
========================================================================== */
 /* --- 画廊布局终极拨乱反正 --- */
 #gallery-waterfall {
     display: block !important;
     column-count: 3 !important;
     /* 电脑端3列 */
     column-gap: 20px !important;
     width: 100% !important;
     /* 核心锁定：按顺序填充，防止图片在列之间反复横跳 */
 }

 @media (max-width: 768px) {
     #gallery-waterfall {
         column-count: 2 !important;
         /* 手机端2列 */
         column-gap: 10px !important;
     }
 }

 /* 核心：移除固定高度，改用自然包裹 */
 .gallery-card {
     break-inside: avoid !important;
     -webkit-column-break-inside: avoid !important;
     width: 100% !important;
     display: inline-block !important;
     /* 必须是 inline-block 才能正常瀑布流 */
     margin-bottom: 15px !important;
     background-color: #f2f2f2;
     /* 加载前的底色 */
     border-radius: 12px;
     overflow: hidden;
     position: relative;
     transition: transform 0.3s ease;
 }

 /* 默认状态下隐藏地点文字 */
 .gallery-card-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 20px 15px 12px;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
     color: #fff;
     font-size: 14px;
     font-weight: 900;
     letter-spacing: 0.5px;

     /* 核心动画：初始透明并下移 */
     opacity: 0;
     transform: translateY(15px);
     transition: all 0.3s ease;
     pointer-events: none;
 }

 /* 鼠标悬停时：卡片上浮，文字出现 */


 .gallery-card:hover .gallery-card-overlay {
     opacity: 1;
     transform: translateY(0);
 }

 /* 手机端适配：改为双列 */
 @media (max-width: 768px) {
     #gallery-waterfall {
         column-count: 2 !important;
         column-gap: 15px !important;
     }
 }

 /* ==========================================================================
【画廊 & 幻灯片】样式升级版：无边框 + 沉浸式设置
========================================================================== */



 /* 🎬 幻灯片控制面板 */

 .ss-control-item {
     color: #fff;
     font-size: 12px;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .ss-control-item select,
 .ss-control-item input {
     background: rgba(0, 0, 0, 0.3);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 4px;
     font-size: 11px;
     padding: 2px 5px;
     outline: none;
 }

 /* ==========================================================================
【幻灯片 UI】右上角独立选择器胶囊
========================================================================== */
 .ss-selector-pill {
     display: flex;
     align-items: center;
     gap: 8px;
     background: rgba(0, 0, 0, 0.4);
     backdrop-filter: blur(15px);
     padding: 8px 16px;
     border-radius: 50px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     color: rgba(255, 255, 255, 0.9);
     font-size: 12px;
     font-weight: 600;
     transition: all 0.2s ease;
 }

 .ss-selector-pill:hover {
     background: rgba(255, 255, 255, 0.1);
     border-color: rgba(255, 255, 255, 0.4);
 }

 .ss-selector-pill select {
     background: transparent;
     border: none;
     color: #fff;
     font-weight: 700;
     font-size: 12px;
     outline: none;
     cursor: pointer;
     padding-right: 4px;
 }


 /* ==========================================================================
【幻灯片 UI】极致黑底白字选择器
========================================================================== */
 .ss-selector-pill {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, 0.14) !important;
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     padding: 10px 18px;
     border-radius: 50px;
     border: 1px solid rgba(255, 255, 255, 0.28) !important;
     color: rgba(255, 255, 255, 0.92) !important;
     font-size: 13px;
     font-weight: 600;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
     position: relative;
 }

 .ss-selector-pill:hover {
     background: rgba(255, 255, 255, 0.22) !important;
     border-color: rgba(255, 255, 255, 0.5) !important;
     transform: translateX(-3px);
 }

 .ss-selector-pill svg {
     stroke: rgba(255, 255, 255, 0.85) !important;
 }

 .ss-selector-pill select {
     display: none;
 }

 /* 退出/暂停按钮磨砂白 */
 #slideshow-exit {
     background: rgba(255, 255, 255, 0.14) !important;
     color: rgba(255, 255, 255, 0.92) !important;
     border: 1px solid rgba(255, 255, 255, 0.28) !important;
     font-weight: 700 !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
 }

 #slideshow-exit:hover {
     background: rgba(255, 255, 255, 0.24) !important;
     border-color: rgba(255, 255, 255, 0.5) !important;
 }

 /* ==========================================================================
【云端状态说明】弹窗内图例样式
========================================================================== */
 .sync-status-legend {
     margin: 25px 0;
     padding: 20px;
     background: #f9f9f9;
     border-radius: 12px;
     display: flex;
     flex-direction: column;
     gap: 18px;
     border: 1px solid #eee;
 }

 .legend-item {
     display: flex;
     align-items: flex-start;
     gap: 15px;
 }

 .legend-item .status-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     margin-top: 5px;
     flex-shrink: 0;
 }

 .legend-text {
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .legend-text strong {
     font-size: 14px;
     color: #1a1a1a;
     font-weight: 800;
 }

 .legend-text span {
     font-size: 12px;
     color: #666;
     line-height: 1.5;
 }

 /* 保持黄色呼吸动画一致性 */
 .status-loading {
     animation: status-pulse 1.5s infinite ease-in-out;
 }

 @keyframes status-pulse {
     0% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.4;
         transform: scale(1.1);
     }

     100% {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* ==========================================================================
【幻灯片 UI 强化】极致清晰度 + 满屏缩放
========================================================================== */
 #slideshow-img {
     width: 100vw !important;
     height: 100vh !important;
     object-fit: contain !important;
     border: none !important;
     background: #000;
     margin-top: -25px;
 }

 .ss-selector-pill {
     display: flex;
     align-items: center;
     gap: 12px;
     background: #000000 !important;
     /* 纯黑底，最高对比度 */
     padding: 12px 20px;
     /* 增加点击区域 */
     border-radius: 50px;
     border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
     /* 强化描边 */
     color: #ffffff !important;
     /* ✅ 核心修改：字号加大到 15px */
     font-size: 15px !important;
     font-weight: 800;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
 }

 .ss-selector-pill select {
     background: transparent;
     border: none;
     color: #ffffff !important;
     font-weight: 900;
     font-size: 15px !important;
     outline: none;
     cursor: pointer;
     /* ✅ 增加内边距，为自定义箭头留出空间 */
     padding-right: 20px;
     appearance: none;
     -webkit-appearance: none;
     /* ✅ 注入自定义白色箭头图标，增加识别度 */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right center;
 }

 .gallery-card {
     break-inside: avoid;
     margin-bottom: 20px;
     position: relative;
     cursor: pointer;
     border-radius: 12px;
     overflow: hidden;
     background: #fff;
     /* ✅ 恢复细描边，使用极浅的灰色 */
     border: 1px solid #eeeeee !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
     transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .gallery-card:hover {
     transform: translateY(-5px);
     border-color: #1a1a1a !important;
     /* 悬停时描边加深，增加交互感 */
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
 }

 /* ==========================================================================
【画廊 & 幻灯片】最终修复版：细描边 + 高清晰度 UI
========================================================================== */
 .gallery-card {
     break-inside: avoid;
     margin-bottom: 20px;
     position: relative;
     cursor: pointer;
     border-radius: 12px;
     overflow: hidden;
     background: #fff;
     /* ✅ 细描边修复：使用精致的浅灰色描边 */
     border: 1.5px solid #eeeeee !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
 }

 .gallery-card:hover {
     transform: translateY(-5px);
     /* 悬停时边框加深，增加反馈感 */
     border-color: #1a1a1a !important;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
 }

 /* 确保图片填充且不显示黑边 */
 .gallery-card img {
     border: none !important;
     display: block;
     width: 100%;
 }

 /* 🎬 幻灯片控制胶囊：黑底白字 + 加大字号 */
 .ss-selector-pill {
     display: flex;
     align-items: center;
     gap: 12px;
     background: #000000 !important;
     padding: 14px 24px !important;
     border-radius: 50px;
     border: 2px solid rgba(255, 255, 255, 0.5) !important;
     color: #ffffff !important;
     font-size: 15px !important;
     font-weight: 800;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
     min-height: 52px;
     -webkit-tap-highlight-color: transparent;
 }

 .ss-selector-pill select {
     background: transparent;
     border: none;
     color: #ffffff !important;
     font-weight: 900;
     font-size: 15px !important;
     outline: none;
     cursor: pointer;
 }

 /* 幻灯片图片等比缩放，确保占满一边 */
 #slideshow-img {
     width: 100vw !important;
     height: 100vh !important;
     object-fit: contain !important;
     margin-top: -25px !important;
 }

 /* ==========================================================================
【幻灯片 UI 最终修复】筛选器由白底转为黑底白字
========================================================================== */
 .ss-selector-pill {
     /* 1. 胶囊外框改为深黑色 */
     background: #000000 !important;
     /* 2. 强化白色边框，确保在纯黑背景下能看清轮廓 */
     border: 2px solid rgba(255, 255, 255, 0.6) !important;
     /* 3. 文字设为纯白 */
     color: #ffffff !important;
     padding: 12px 22px !important;
     border-radius: 50px;
     font-size: 15px !important;
     font-weight: 800;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
 }

 /* 确保内部图标同步变白 */
 .ss-selector-pill svg {
     stroke: #ffffff !important;
 }

 /* 4. 关键：将内部白色选择区域改为黑色 */
 .ss-selector-pill select {
     background: #000000 !important;
     /* 彻底背景变黑 */
     color: #ffffff !important;
     /* 文字彻底变白 */
     font-weight: 900 !important;
     font-size: 15px !important;
     border: none;
     outline: none;
     cursor: pointer;
     padding-right: 20px;
     appearance: none;
     -webkit-appearance: none;
     /* ✅ 注入纯白色下箭头图标 */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
     background-repeat: no-repeat;
     background-position: right center;
 }

 /* 兼容性修复：确保下拉出来的选项在电脑端也是黑色 */
 .ss-selector-pill select option {
     background-color: #1a1a1a !important;
     color: #ffffff !important;
 }

 /* “退出播放”按钮同步维持沉浸式风格 */
 #slideshow-exit {
     background: #1a1a1a !important;
     color: #ffffff !important;
     border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
     font-weight: 700 !important;
 }

 /* ==========================================================================
【幻灯片 UI 终极净化】彻底消除多余符号、v 字和点点
========================================================================== */
 .ss-selector-pill select {
     /* 1. 彻底禁用浏览器自带的一切外观 (防止出现双箭头) */
     appearance: none !important;
     -webkit-appearance: none !important;
     -moz-appearance: none !important;

     /* 2. 修正背景图属性：确保箭头只有一个且大小固定 */
     background-repeat: no-repeat !important;
     /* 核心修改：限定箭头大小为 12px，并将其靠右对齐 */
     background-size: 12px !important;
     background-position: right 10px center !important;

     /* 3. 清除奇怪的下划线和点击虚线框 */
     text-decoration: none !important;
     outline: none !important;
     box-shadow: none !important;

     /* 4. 强制文字和背景配色 */
     background-color: transparent !important;
     /* 交给父级 pill 处理背景 */
     color: #ffffff !important;
     font-weight: 900 !important;
     border: none !important;
     cursor: pointer;

     /* 增加右边距，防止文字和箭头撞车 */
     padding-right: 28px !important;
 }

 /* 兼容性补丁：针对 Firefox 清除虚线 */
 .ss-selector-pill select:-moz-focusring {
     color: transparent;
     text-shadow: 0 0 0 #fff;
 }

 /* 重新强化父级 Pill 的黑底白字效果 */
 .ss-selector-pill {
     background: #000000 !important;
     border: 2px solid rgba(255, 255, 255, 0.6) !important;
     display: inline-flex !important;
     align-items: center !important;
     padding: 10px 18px !important;
     border-radius: 50px !important;
     overflow: visible !important;
     /* 修复：改为 visible 确保下拉菜单不被裁剪，并增加相对定位 */
     position: relative !important;
 }

 /* ==========================================================================
    【画廊自动播放】手机端原生下拉菜单完美交互补丁
    ========================================================================== */
 @media (max-width: 768px) {
     .ss-selector-pill select {
         /* 强制覆盖 HTML 行内写的 display:none 和 pointer-events:none */
         display: block !important;
         position: absolute !important;
         top: 0 !important;
         left: 0 !important;
         width: 100% !important;
         height: 100% !important;

         /* 保持完全透明，视觉上仍然是你原本精美的胶囊样式 */
         opacity: 0 !important;

         /* 开启点击，手指点上去直接唤起 iOS/Android 底部原生滚轮菜单 */
         pointer-events: auto !important;
         z-index: 100 !important;

         /* 恢复原生的外观事件感知 */
         appearance: auto !important;
         -webkit-appearance: auto !important;
     }

     /* 手机端屏蔽自定义的 DIV 菜单，防止与原生选择器冲突 */
     .ss-custom-menu {
         display: none !important;
     }
 }

 /* ==========================================================================
【幻灯片 UI 净化版】自适应长度 + 修复奇怪字符
========================================================================== */
 .ss-selector-pill {
     display: inline-flex !important;
     /* 核心：允许宽度根据内容收缩 */
     align-items: center !important;
     white-space: nowrap !important;
     width: auto !important;
     /* 确保不被父容器强制拉长 */
 }

 .ss-selector-pill select {
     /* 1. 彻底解决“奇怪字符/重复箭头” */
     appearance: none !important;
     -webkit-appearance: none !important;
     background-repeat: no-repeat !important;
     /* ❌ 防止出现多个 v */
     background-position: right 5px center !important;
     background-size: 12px !important;
     /* ❌ 固定箭头大小，防止变形 */

     /* 2. 移除背景色，交给父级 Pill 处理 */
     background-color: transparent !important;
     border: none !important;
     outline: none !important;
     box-shadow: none !important;

     /* 3. 动态宽度准备 */
     min-width: 40px !important;
     transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
     padding-right: 25px !important;
     /* 为右侧单箭头留位 */
     margin-left: 5px !important;
     color: #ffffff !important;
 }

 /* 强制让文字在同一行，不许折行 */
 .ss-selector-pill span {
     flex-shrink: 0 !important;
 }

 /* ==========================================================================
【手机端画廊专项优化】全屏占满 + 大图紧凑排版
========================================================================== */
 @media (max-width: 768px) {

     /* 1. 让画廊容器横向占满屏幕，取消边距与圆角 */
     #gallery-overlay .modal-content-box {
         width: 100% !important;
         max-width: 100% !important;
         height: 100vh !important;
         max-height: 100vh !important;
         margin: 0 !important;
         border: none !important;
         border-radius: 0 !important;
         /* 取消圆角，紧贴屏幕边缘 */
     }

     /* 2. 压缩头部空间，让更多图片露出来 */
     #gallery-overlay .modal-content-box>div:first-child {
         padding: 20px 15px !important;
         /* 缩小头部内边距 */
     }

     /* 3. 增大图片区域：减小内容区的左右留白 */
     #gallery-content {
         padding: 8px !important;
         /* 极简边距，让图片占满横向 */
     }

     /* 4. 优化瀑布流：缩窄间距，让图片面积最大化 */
     #gallery-waterfall {
         column-count: 2 !important;
         /* 维持双列，但通过缩减间距让单张图看起来更大 */
         column-gap: 8px !important;
         /* 左右间距从 15px 缩减到 8px */
     }

     /* 5. 缩减图片卡片间距 */
     .gallery-card {
         margin-bottom: 8px !important;
         /* 上下间距从 20px 缩减到 8px */
         border-radius: 8px !important;
         /* 配合紧凑布局，稍微缩小图片圆角 */
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
         /* 减弱阴影，避免画面太脏 */
     }

     /* 6. 调整地点文字蒙层大小，不遮挡大图 */
     .gallery-card-overlay {
         padding: 15px 10px 8px !important;
         font-size: 11px !important;
     }
 }

 /* ==========================================================================
【手机端画廊精简】去除副标题 + 播放按钮纯图标化
========================================================================== */
 @media (max-width: 768px) {

     /* 1. 隐藏副标题 (随机漫游...) */
     .gallery-subtitle {
         display: none !important;
     }

     /* 3. 微调间距，避开手机顶部状态栏 */
     #gallery-overlay .modal-content-box>div:first-child {
         /* 上20px，右20px，下15px，左20px */
         padding: 20px 20px 15px 20px !important;
         gap: 10px !important;
     }
 }

 /* ==========================================================================
【手机端适配】仅在手机端首页隐藏“随机”按钮
========================================================================== */
 @media (max-width: 768px) {

     /* 手机端首页底部栏按钮太多，隐藏随机按钮（电脑端仍显示；摇一摇等其他随机入口不受影响） */
     #home-actions #btn-random,
     #home-actions #btn-random-2 {
         display: none !important;
     }

     /* 调整剩余图标的间距，确保在手机端依然居中且分布均匀 */
     #home-actions {
         gap: 20px !important;
     }
 }

 /* 确保详情层的层级高于画廊层 */

 #gallery-overlay {
     z-index: 10000 !important;
     /* 画廊层次之 */
 }

 /* 即使打开了详情，只要画廊还在，就保持背景锁定 */
 body.mode-focus #gallery-overlay.active {
     display: flex !important;
 }

 /* ====== 时光画廊：流畅开关动画 ====== */
 /* 覆盖 overlay-base 的 display:none 方案，改用 visibility+opacity */
 #gallery-overlay {
     display: flex !important;
     visibility: hidden;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
         visibility 0s linear 0.4s;
 }

 #gallery-overlay.active {
     visibility: visible;
     opacity: 1;
     pointer-events: auto;
     transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
         visibility 0s linear 0s;
 }

 /* 桌面端：内容框从下方轻微滑入 */
 #gallery-overlay .modal-content-box {
     transform: translateY(32px) scale(0.98);
     transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
         opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
     opacity: 0;
 }

 #gallery-overlay.active .modal-content-box {
     transform: translateY(0) scale(1) !important;
     opacity: 1;
 }

 #gallery-overlay.gallery-closing .modal-content-box {
     transform: translateY(40px) scale(0.97) !important;
     opacity: 0;
 }

 /* 手机端：从底部整页滑入 */
 @media (max-width: 768px) {
     #gallery-overlay .modal-content-box {
         transform: translateY(100%) !important;
         opacity: 1 !important;
         transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;
     }

     #gallery-overlay.active .modal-content-box {
         transform: translateY(0) !important;
     }

     #gallery-overlay.gallery-closing .modal-content-box {
         transform: translateY(100%) !important;
     }
 }

 /* ==========================================================================
【层级修复】确保详情页在画廊之上，且画廊不遮挡详情页
========================================================================== */
 #gallery-overlay {
     z-index: 10000 !important;
     /* 画廊设为 10000 */
 }

 #detail-overlay {
     z-index: 11000 !important;
     /* 详情页设为 11000，确保在画廊之上 */
 }

 /* 详情页导航按钮也需要相应提升层级 */
 .nav-btn-detail {
     z-index: 12000 !important;
 }

 /* ==========================================================================
【幻灯片标注优化】半透明背景 + 禁止换行 + 位置修正
========================================================================== */
 #ss-info-layer {
     position: absolute;
     /* 调整到底部 60px 处，避开可能的底部控制栏 */
     bottom: 60px;
     left: 50%;
     transform: translateX(-50%);

     /* 增加半透明毛玻璃背景 */
     background: rgba(0, 0, 0, 0.5) !important;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);

     padding: 12px 25px !important;
     border-radius: 15px;
     border: 1px solid rgba(255, 255, 255, 0.1);

     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     z-index: 10005 !important;

     /* 限制最大宽度，防止溢出屏幕 */
     max-width: 85vw;
     pointer-events: none;
 }

 #ss-display-title {
     font-size: 18px !important;
     /* 缩小标题字号 */
     font-weight: 800 !important;
     color: #ffffff;
     /* ✅ 强制不换行 */
     white-space: nowrap !important;
     overflow: hidden;
     text-overflow: ellipsis;
     width: 100%;
     text-align: center;
 }

 #ss-display-city {
     font-size: 12px !important;
     font-weight: 600 !important;
     color: rgba(255, 255, 255, 0.8);
     /* ✅ 强制不换行 */
     white-space: nowrap !important;
 }

 /* ==========================================================================
【幻灯片标注终极版】防重叠 + 半透明背景 + 强制不换行
========================================================================== */
 #ss-info-layer {
     position: absolute;
     /* 固定在底部居中，距离底部 40px */
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);

     /* ✅ 黑底半透明磨砂背景 */
     background: rgba(0, 0, 0, 0.65) !important;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);

     /* 精致的内边距和圆角 */
     padding: 10px 24px !important;
     border-radius: 50px !important;
     /* 胶囊状圆角 */
     border: 1px solid rgba(255, 255, 255, 0.15);

     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     z-index: 10005 !important;

     /* ✅ 限制最大宽度为屏幕宽度的 60%，防止撞到右侧的按钮 */
     max-width: 60vw;
     pointer-events: none;
 }

 #ss-display-title {
     /* ✅ 缩小字号 */
     font-size: 15px !important;
     font-weight: 800 !important;
     color: #ffffff;

     /* ✅ 强制不换行，超长则显示省略号 */
     white-space: nowrap !important;
     overflow: hidden;
     text-overflow: ellipsis;
     width: 100%;
     text-align: center;
     letter-spacing: 0.5px;
 }

 #ss-display-city {
     font-size: 11px !important;
     font-weight: 600 !important;
     color: rgba(255, 255, 255, 0.7);

     /* ✅ 强制不换行 */
     white-space: nowrap !important;
     overflow: hidden;
     text-overflow: ellipsis;
     width: 100%;
     text-align: center;
 }

 /* ==========================================================================
【幻灯片标注终极修复】强制覆盖内联样式 + 半透明黑底 + 强制不换行
========================================================================== */
 #ss-info-layer {
     /* ✅ 强制覆盖原本的 bottom: 140px，把它拉到底部 */
     bottom: 40px !important;

     /* ✅ 强制添加黑底半透明磨砂背景 */
     background: rgba(0, 0, 0, 0.65) !important;
     backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important;

     padding: 10px 24px !important;
     border-radius: 50px !important;
     border: 1px solid rgba(255, 255, 255, 0.15) !important;

     /* ✅ 限制最大宽度，防止和右边的筛选器重叠 */
     max-width: 60vw !important;
 }

 #ss-display-title {
     /* ✅ 缩小字号 */
     font-size: 15px !important;
     font-weight: 800 !important;

     /* ✅ 强制不换行，超长显示省略号 */
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     width: 100% !important;
     text-shadow: none !important;
     /* 去掉以前的黑影，因为现在有黑底了 */
 }

 #ss-display-city {
     font-size: 11px !important;
     font-weight: 600 !important;
     color: rgba(255, 255, 255, 0.7) !important;

     /* ✅ 强制不换行 */
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     width: 100% !important;
     text-shadow: none !important;
 }

 /* ==========================================================================
【幻灯片标注终极修复】强制屏幕底部居中 + 独立于沉浸模式
========================================================================== */
 #ss-info-layer {
     /* ✅ 1. 核心修复：改用 fixed，强制相对于整个设备屏幕定位，无视任何父级束缚 */
     position: fixed !important;

     /* ✅ 2. 物理位置：永远距离屏幕底部 50px，水平绝对居中 */
     bottom: 50px !important;
     left: 50% !important;
     transform: translateX(-50%) !important;

     /* ✅ 3. 视觉外观：半透明黑底 + 磨砂 + 胶囊圆角 */
     background: rgba(0, 0, 0, 0.65) !important;
     backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important;
     padding: 10px 24px !important;
     border-radius: 50px !important;
     border: 1px solid rgba(255, 255, 255, 0.15) !important;

     /* 限制最大宽度，防止被超长文字撑爆手机屏幕 */
     max-width: 85vw !important;

     /* ✅ 4. 层级保护：设置极高的 z-index，且设置 pointer-events: none 
    这样点击它时，点击事件会“穿透”下去，正常触发沉浸模式切换 */
     z-index: 10010 !important;
     pointer-events: none !important;

     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
     gap: 4px !important;
 }

 /* ==========================================================================
【幻灯片标注】彻底解决左右不居中的问题
========================================================================== */
 #ss-display-title {
     font-size: 16px !important;
     font-weight: 800 !important;
     color: #ffffff !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     text-shadow: none !important;

     /* ✅ 居中核心修正：让容器紧贴文字，并在黑框内绝对居中 */
     width: auto !important;
     max-width: 100% !important;
     text-align: center !important;
     margin: 0 auto !important;
 }

 #ss-display-city {
     font-size: 12px !important;
     font-weight: 600 !important;
     color: rgba(255, 255, 255, 0.7) !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     text-shadow: none !important;

     /* ✅ 居中核心修正：让容器紧贴文字，并在黑框内绝对居中 */
     width: auto !important;
     max-width: 100% !important;
     text-align: center !important;
     margin: 0 auto !important;
 }

 /* ==========================================================================
【全局 Z-index 层级规范】确保幻灯片永远在最顶层
========================================================================== */
 /* 1. 画廊层 */
 #gallery-overlay {
     z-index: 10000 !important;
 }

 /* 2. 详情层 (盖在画廊上) */
 #detail-overlay {
     z-index: 11000 !important;
 }

 /* 3. 幻灯片播放层 (必须最高，盖住画廊和所有东西) */
 #slideshow-overlay {
     z-index: 13000 !important;
 }

 /* 幻灯片右上角控制按钮组 */
 #ss-ui-group {
     z-index: 13001 !important;
 }

 /* 幻灯片底部的电影感字幕 */
 #ss-info-layer {
     z-index: 13002 !important;
 }

 /* ==========================================================================
【画廊卡片悬浮优化】标题与地点双行显示
========================================================================== */
 /* 调整遮罩层，为其增加一点渐变黑底，确保白色文字在亮色照片上也能看清 */
 .gallery-card-overlay {
     display: flex !important;
     flex-direction: column !important;
     justify-content: flex-end !important;
     gap: 4px !important;

     /* 增加从下到上的黑色渐变，增强文字可读性 */
     background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%) !important;
     padding: 30px 15px 12px 15px !important;
     /* 顶部多留点 padding 让渐变更自然 */

     /* 默认状态下文字的过渡动画 */
     opacity: 0;
     transition: opacity 0.3s ease !important;
 }

 /* 鼠标悬停时显示遮罩 */
 .gallery-card:hover .gallery-card-overlay {
     opacity: 1;
 }

 /* 标题样式：稍微大一点，粗体 */

 /* 地点样式：稍微小一点，半透明 */

 /* ==========================================================================
【时光轴增强】专属图标控制与那年今日双列网格
========================================================================== */

 /* 1. 彻底隐藏旧版的悬浮“那年今日”按钮 */
 #on-this-day-btn {
     display: none !important;
 }

 /* 2. 时光轴模式下：显示日历和信封，隐藏添加按钮 */
 #memory-panel.timeline-mode .timeline-only-btn {
     display: flex !important;
 }

 #memory-panel.timeline-mode .default-only-btn {
     display: none !important;
 }

 /* 3. 正常模式下：隐藏日历和信封，显示添加按钮 */
 #memory-panel:not(.timeline-mode) .timeline-only-btn {
     display: none !important;
 }

 #memory-panel:not(.timeline-mode) .default-only-btn {
     display: flex !important;
 }



 /* ==========================================================================
【画廊放大镜】独立防冲突样式
========================================================================== */
 #gallery-lightbox-overlay.active {
     display: flex !important;
 }

 #gl-caption {
     background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%) !important;
 }

 #gl-caption:hover {
     background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, transparent 100%) !important;
 }

 /* ✅ 幻灯片悬停动效 */
 #ss-caption-title:hover {
     transform: scale(1.05) !important;
     opacity: 0.8 !important;
 }

 #slideshow-pause-btn:hover {
     background: #000000 !important;
     border-color: rgba(255, 255, 255, 0.6) !important;
     transform: translateX(-5px);
 }

 /* ==========================================================================
    【终极修复】强制提升回忆详情页层级，绝不被幻灯片或画廊遮挡
    ========================================================================== */
 #detail-overlay {
     z-index: 99999 !important;
 }

 /* ==========================================================================
    【体验优化】幻灯片与画廊模式下，强制隐藏详情页的左右切换按钮
    ========================================================================== */
 body.ss-mode-active #nav-prev-detail,
 body.ss-mode-active #nav-next-detail,
 body.gallery-mode-active #nav-prev-detail,
 body.gallery-mode-active #nav-next-detail {
     display: none !important;
 }

 /* ==========================================================================
    【移动端优化】手机屏幕适配：隐藏左右按钮 + 抬高底部字幕防遮挡
    ========================================================================== */
 @media (max-width: 768px) {

     /* 手机端隐藏画廊放大镜的左右按钮（靠手势滑动） */
     #gl-prev,
     #gl-next {
         display: none !important;
     }

     /* 将画廊(gl)和自动播放(ss)的底部字幕文字往上抬高 15px (原30px -> 新45px) */
     #gl-caption,
     #ss-caption {
         padding-bottom: 65px !important;
     }
 }

 /* ==========================================================================
    【时光画廊】wx-lightbox 风格水平滑动翻页
    ========================================================================== */
 #gl-slider {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     display: flex;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
 }

 #gl-slider::-webkit-scrollbar {
     display: none;
 }

 .gl-slide-item {
     flex: 0 0 100vw;
     width: 100vw;
     height: 100%;
     scroll-snap-align: center;
     scroll-snap-stop: always;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .gl-slide-item img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     pointer-events: none;
     user-select: none;
     margin-bottom: 80px;
     margin-top: 0px;
 }

 /* 从此图播放按钮（左上角） */
 #gl-counter {
     display: flex !important;
 }

 /* PC 端：显示左右箭头按钮（与 wx-lb-nav-btn 保持一致） */
 @media (min-width: 769px) {

     #gl-prev,
     #gl-next {
         display: flex !important;
     }
 }

 /* ==========================================================================
    【层级修复】让图片放大镜的层级超越详情页 (达到最高级 100005)
    ========================================================================== */
 #lightbox-overlay {
     z-index: 100005 !important;
 }

 /* 1. 恢复瀑布流布局，保持交错美感 */
 #gallery-waterfall {
     column-count: 3;
     /* 电脑端3列 */
     column-gap: 15px;
     width: 100%;
 }

 @media (max-width: 768px) {
     #gallery-waterfall {
         column-count: 2;
         /* 手机端2列 */
         column-gap: 10px;
     }
 }

 /* 2. 核心：防止跳动的占位设置 */
 .gallery-card {
     break-inside: avoid;
     /* 防止卡片被截断 */
     margin-bottom: 15px;
     background: #f0f0f0;
     /* 图片加载前显示浅灰色底色 */
     border-radius: 12px;
     overflow: hidden;
     /* 给个最小高度，防止图片没加载时高度为0导致重排跳动 */
     min-height: 150px;
 }

 .gallery-card img {
     width: 100% !important;
     height: auto !important;
     /* 恢复自动高度，保持原始比例 */
     display: block;
     transition: opacity 0.3s;
 }

 /* --- 移植自 3.8.7 的平滑加载机制 --- */

 .gallery-card {
     background-color: #f2f2f2;
     /* 骨架屏灰色底色 */
     border-radius: 12px;
     overflow: hidden;
     position: relative;
 }

 /* 图片加载完成后清除骨架屏背景 */
 .gallery-card img.loaded,
 .gallery-card img[style*="opacity: 1"],
 .gallery-card img[style*="opacity:1"] {
     /* 图片可见后父容器背景应透明 */
 }

 .gallery-card:has(img.loaded),
 .gallery-card:has(img[style*="opacity: 1"]),
 .gallery-card:has(img[style*="opacity:1"]) {
     background-color: transparent !important;
 }

 /* 隐藏左上角的云端同步按钮 */

 /* ==========================================================================
    【问题大修复包】隐藏云端按钮 + 修复画廊白边 + 确认框置顶
    ========================================================================== */

 /* 1. 彻底隐藏左上角的云端状态按钮 */
 #home-sync-btn {
     display: none !important;
 }

 /* 2. 彻底消灭手机端画廊横图下方的白边（消除 HTML 幽灵基准线间距） */
 .gallery-card {
     font-size: 0 !important;
     line-height: 0 !important;
     display: flex !important;
     flex-direction: column !important;
 }

 .gallery-card img {
     display: block !important;
     width: 100% !important;
     height: auto !important;
     vertical-align: bottom !important;
     margin: 0 !important;
     padding: 0 !important;
 }

 .gallery-card-overlay {
     line-height: 1.4 !important;
     /* 恢复遮罩层文字的正常行高 */
 }

 /* 3. 强行提升删除确认框的层级，确保它永远在最上面，不被详情卡片盖住 */
 #confirm-overlay {
     z-index: 25000 !important;
 }

 /* ==========================================================================
【确认弹窗强行置顶包】赋予最高层级 999999
========================================================================== */

 /* 涵盖了常见的所有自定义提示框 ID 和 Class */
 #confirm-overlay,
 [id*="confirm"],
 [class*="confirm"] {
     z-index: 999999 !important;
     transform: translateZ(9999px) !important;
     /* 硬件加速级别的最顶层 */
 }

 /* ==========================================================================
【终极画廊白边抹杀包】
========================================================================== */
 .gallery-card {
     display: flex !important;
     flex-direction: column !important;
     background-color: transparent !important;
     /* 核心1：把漏出来的底色直接变成透明，彻底隐形！ */
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
     /* 用淡淡的阴影代替边框感 */
     padding: 0 !important;
     margin-bottom: 12px !important;
     border: none !important;
 }

 .gallery-card img {
     flex-grow: 1 !important;
     width: 100% !important;
     height: 100% !important;
     /* 核心2：强行拉伸填满那一丝丝缝隙 */
     object-fit: cover !important;
     display: block !important;
     margin: 0 !important;
     padding: 0 !important;
 }

 .gallery-card-overlay {
     position: absolute !important;
     /* 核心3：强制文字蒙层浮在上面，绝对不许它把图片往下挤 */
     bottom: 0 !important;
     left: 0 !important;
     width: 100% !important;
     box-sizing: border-box !important;
 }

 /* ==========================================================================
    【UI 优化】缩减手机端侧边栏（城市列表/时光轴）顶部留白
    ========================================================================== */
 @media (max-width: 768px) {

     /* 核心修改：将头部顶端边距从 70px 大幅缩减到 35px */
     .panel-header-container {
         padding: 35px 20px 15px 20px !important;
     }

     /* 微调标题大小与间距，让排版更紧凑精干 */
     #display-city-name {
         font-size: 22px !important;
         /* 稍微缩小一点防止顶到边缘 */
         margin-top: 5px !important;
         line-height: 1.1 !important;
     }

     /* 减小关闭按钮(叉号)的位置误差，保持对齐 */
     .panel-close-btn {
         margin-top: 5px !important;
     }
 }

 /* ==========================================================================
    【隐藏容量提示】
    ========================================================================== */
 #storage-info {
     display: none !important;
 }

 /* ==========================================================================
    【体验优化】让添加/编辑回忆弹窗的叉号始终悬浮在右上角
    ========================================================================== */
 #modal-overlay .close-modal {
     position: sticky !important;
     top: 1px !important;
     /* 距离顶部的安全距离 */
     float: right !important;
     /* 强制靠右 */
     z-index: 9999 !important;
     /* 确保不被下面的图片或地图盖住 */

     /* 下面这三行是美化项：给叉号加个半透明毛玻璃背景，防止它滑到文字上时看不清 */
     background: rgba(255, 255, 255, 0.85) !important;
     backdrop-filter: blur(4px) !important;
     border-radius: 50% !important;
     padding: 5px !important;
     margin-bottom: -30px !important;
     /* 防止它挤占下方标题输入框的空间 */
 }

 /* ==========================================================================
    【体验优化】高级骨架屏呼吸灯加载动画
    ========================================================================== */
 @keyframes shimmer {
     0% {
         background-position: -200% 0;
     }

     100% {
         background-position: 200% 0;
     }
 }

 /* 将这个类加到所有图片的父容器上，或者直接覆盖原有的背景色 */
 .gallery-card {
     /* 那年今日的容器 */
     background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
     background-size: 200% 100% !important;
     animation: shimmer 1.5s infinite linear !important;
 }




 /* ==========================================================================
【全局提示层】强制放在最最最上面（视觉顶部 + 图层顶端）
========================================================================== */
 #toast {
     position: fixed !important;
     top: 20px !important;
     left: 50% !important;
     transform: translateX(-50%) translateY(-20px);
     z-index: 9999999 !important;
     background: rgba(255, 255, 255, 0.96) !important;
     color: #1c1c1e !important;
     padding: 12px 28px !important;
     font-size: 13px !important;
     font-weight: 600 !important;
     border-radius: 50px !important;
     border: 1px solid rgba(0, 0, 0, 0.09) !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
     pointer-events: none !important;
     white-space: nowrap !important;
     width: max-content !important;
 }

 #toast.show {
     transform: translateX(-50%) translateY(0) !important;
     opacity: 1 !important;
 }

/* 国家 / 城市 / 标签画册图片浏览器顶部的「自动播放」按钮（回忆详情的图片浏览器没有） */
#wx-lb-play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 50px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}
#wx-lb-play:hover { background: rgba(255, 255, 255, 0.3); }
#wx-lb-play:active { transform: scale(0.96); }