/* 回忆地图 · 样式 — 添加/编辑回忆等弹窗的 Apple 黑白灰风格 */
     /* ══════════════════════════════════════════════════════════════
添加新回忆弹窗 — Apple 黑白灰风格 精修版
• 遮罩层：完全不透明白色（#f2f2f7）
• 布局不变，仅 UI 风格改为 Apple 黑白灰
• 选中标签 & 新建标签：显示对应颜色描边
══════════════════════════════════════════════════════════════ */

     /* ── 1. 遮罩层：完全不透明，去掉 backdrop-filter ── */
     #modal-overlay {
         background: #f2f2f7 !important;
         backdrop-filter: none !important;
         -webkit-backdrop-filter: none !important;
     }
     html.dark-mode #modal-overlay {
         background: #111113 !important;
     }

     /* ── 2. 弹窗卡片：flex 列布局，内容滚动，按钮吸底 ── */
     #modal-overlay .modal-content-box {
         background: #ffffff !important;
         border: none !important;
         border-radius: 20px !important;
         box-shadow:
             0 2px 0 rgba(0, 0, 0, 0.04),
             0 8px 32px rgba(0, 0, 0, 0.10),
             0 2px 8px rgba(0, 0, 0, 0.06) !important;
         padding: 0 !important;
         display: flex !important;
         flex-direction: column !important;
         overflow: hidden !important;
     }
     html.dark-mode #modal-overlay .modal-content-box {
         background: #1c1c1e !important;
     }

     /* 用一个内层滚动容器包住所有字段 */
     #modal-overlay .modal-scroll-body {
         flex: 1 1 auto !important;
         overflow-y: auto !important;
         padding: 32px 28px 14px 28px !important;
         -webkit-overflow-scrolling: touch !important;
         min-height: 0 !important;
     }

     /* 保存按钮栏：始终在底部，不参与滚动 */
     #modal-overlay .ios-bottom-bar {
         flex-shrink: 0 !important;
         position: static !important;
         width: 100% !important;
         margin: 0 !important;
         padding: 0 28px calc(14px + env(safe-area-inset-bottom, 0px)) 28px !important;
         box-sizing: border-box !important;
         background: rgba(255, 255, 255, 0.97) !important;
         backdrop-filter: blur(12px) !important;
         -webkit-backdrop-filter: blur(12px) !important;
         border-top: none !important;
     }
     html.dark-mode #modal-overlay .ios-bottom-bar {
         background: rgba(28,28,30,0.97) !important;
         border-top: 0.5px solid rgba(255,255,255,0.08) !important;
     }

     /* ── 3. 弹窗标题 "新回忆" ── */
     #modal-overlay .modal-content-box>div:first-of-type {
         font-size: 22px !important;
         font-weight: 700 !important;
         letter-spacing: -0.5px !important;
         color: #1c1c1e !important;
         border-bottom: 1px solid #e5e5ea !important;
         padding-bottom: 16px !important;
         margin-bottom: 24px !important;
     }
     html.dark-mode #modal-overlay .modal-content-box>div:first-of-type {
         color: #f2f2f7 !important;
         border-bottom-color: rgba(255,255,255,0.08) !important;
     }

     /* ── 4. label 字样：Apple 灰色小标题风格 ── */
     #modal-overlay label {
         font-size: 12px !important;
         font-weight: 600 !important;
         color: #8e8e93 !important;
         text-transform: uppercase !important;
         letter-spacing: 0.6px !important;
     }

     /* ── 5. 输入框：苹果风格，圆角，浅灰底 ── */
     #modal-overlay input[type="text"],
     #modal-overlay input[type="date"],
     #modal-overlay textarea {
         background: #f2f2f7 !important;
         border: 1.5px solid transparent !important;
         border-radius: 12px !important;
         color: #1c1c1e !important;
         font-size: 15px !important;
         font-weight: 500 !important;
         transition: border-color 0.18s ease, background 0.18s ease !important;
         padding: 13px 15px !important;
     }
     html.dark-mode #modal-overlay input[type="text"],
     html.dark-mode #modal-overlay input[type="date"],
     html.dark-mode #modal-overlay textarea {
         background: #2c2c2e !important;
         color: #f2f2f7 !important;
         border-color: rgba(255,255,255,0.08) !important;
     }

     #modal-overlay input[type="text"]:focus,
     #modal-overlay input[type="date"]:focus,
     #modal-overlay textarea:focus {
         background: #ffffff !important;
         border-color: #1c1c1e !important;
         box-shadow: 0 0 0 3px rgba(28, 28, 30, 0.08) !important;
     }
     html.dark-mode #modal-overlay input[type="text"]:focus,
     html.dark-mode #modal-overlay input[type="date"]:focus,
     html.dark-mode #modal-overlay textarea:focus {
         background: #3a3a3c !important;
         border-color: rgba(255,255,255,0.3) !important;
         box-shadow: 0 0 0 3px rgba(255,255,255,0.06) !important;
     }

     #modal-overlay input::placeholder,
     #modal-overlay textarea::placeholder {
         color: #c7c7cc !important;
     }
     html.dark-mode #modal-overlay input::placeholder,
     html.dark-mode #modal-overlay textarea::placeholder {
         color: #636366 !important;
     }

     /* ── 6. 图库区域上传按钮 ── */
     #modal-overlay label[style*="border:var(--border-width)"],
     #modal-overlay button[onclick*="addImageField"],
     #modal-overlay button[onclick*="pickLocalPhotos"] {
         border-radius: 50px !important;
         border: 1.5px solid #e0e0e0 !important;
         background: #f2f2f7 !important;
         color: #1c1c43 !important;
         font-weight: 600 !important;
         font-size: 13px !important;
         transition: background 0.15s !important;
     }
     html.dark-mode #modal-overlay button[onclick*="addImageField"],
     html.dark-mode #modal-overlay button[onclick*="pickLocalPhotos"] {
         background: #2c2c2e !important;
         border-color: rgba(255,255,255,0.12) !important;
         color: #f2f2f7 !important;
     }

     #modal-overlay label[style*="border:var(--border-width)"]:hover,
     #modal-overlay button[onclick*="addImageField"]:hover {
         background: #e5e5ea !important;
     }

     /* ── 7. 时间清除按钮 ── */
     #modal-overlay button[onclick*="clearTime"] {
         border-radius: 50% !important;
         border: 1.5px solid #e0e0e0 !important;
         background: #f2f2f7 !important;
         color: #8e8e93 !important;
         width: 44px !important;
         height: 44px !important;
         font-size: 14px !important;
         transition: background 0.15s !important;
     }
     html.dark-mode #modal-overlay button[onclick*="clearTime"] {
         background: #2c2c2e !important;
         border-color: rgba(255,255,255,0.12) !important;
         color: #8e8e93 !important;
     }

     #modal-overlay button[onclick*="clearTime"]:hover {
         background: #e5e5ea !important;
         color: #1c1c1e !important;
     }

     /* ── 8. 标签区容器：Apple 灰色底板 ── */
     #modal-overlay div[style*="background:#fcfcfc"] {
         background: #f2f2f7 !important;
         border: none !important;
         border-radius: 14px !important;
         padding: 14px !important;
     }
     html.dark-mode #modal-overlay div[style*="background:#fcfcfc"] {
         background: #2c2c2e !important;
     }

     /* ── 9. 标签名称输入框（在灰底上用白色） ── */
     #in-tag-name {
         background: #ffffff !important;
         border: 1.5px solid #e5e5ea !important;
         border-radius: 10px !important;
     }
     html.dark-mode #in-tag-name {
         background: #3a3a3c !important;
         border-color: rgba(255,255,255,0.1) !important;
         color: #f2f2f7 !important;
     }

     #in-tag-name:focus {
         border-color: #1c1c1e !important;
         box-shadow: 0 0 0 2px rgba(28, 28, 30, 0.08) !important;
     }

     /* ── 10. 添加标签"+"按钮 ── */
     #modal-overlay button[onclick*="addNewTag"] {
         background: #1c1c1e !important;
         color: #ffffff !important;
         border: none !important;
         border-radius: 10px !important;
         font-size: 20px !important;
         font-weight: 500 !important;
         width: 44px !important;
         height: 44px !important;
         flex-shrink: 0 !important;
         transition: background 0.15s, transform 0.12s !important;
         padding: 0 !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
     }

     #modal-overlay button[onclick*="addNewTag"]:active {
         transform: scale(0.90) !important;
         background: #3c3c3e !important;
     }

     /* ── 11. 历史标签分隔线 ── */
     #modal-overlay div[style*="border-top:1px dashed"] {
         border-top: 1px solid #d1d1d6 !important;
     }

     /* ── 12. 已选中标签（当前草稿区）：
      有对应色描边 + 浅色色调背景
      已通过 renderTags JS 设置 border，这里增强样式 ── */
     #current-tags-area .tag-capsule {
         /* 背景由标签色以极低透明度填充（由JS通过 boxShadow 设置） */
         font-size: 13px !important;
         font-weight: 600 !important;
         padding: 7px 14px !important;
         border-radius: 100px !important;
         color: #1c1c1e !important;
         background: #ffffff !important;
         /* border 和 box-shadow 由 renderTags JS 动态设置，保留对应色描边 */
         transition: transform 0.12s, box-shadow 0.12s !important;
     }
     html.dark-mode #current-tags-area .tag-capsule {
         background: #2c2c2e !important;
         color: #f2f2f7 !important;
     }

     #current-tags-area .tag-capsule:hover {
         transform: translateY(-1px) !important;
     }

     /* ── 13. 历史标签（选择区）：Apple 灰色胶囊，无描边 ── */
     #history-tags-list .tag-capsule {
         font-size: 12px !important;
         font-weight: 600 !important;
         padding: 6px 12px !important;
         border-radius: 100px !important;
         background: #e5e5ea !important;
         color: #3c3c43 !important;
         border: 1.5px solid transparent !important;
         transition: background 0.15s, transform 0.12s !important;
     }

     #history-tags-list .tag-capsule:hover {
         background: #d1d1d6 !important;
         transform: translateY(-1px) !important;
     }

     /* ── 14. 历史标签小标题 ── */
     #history-tags-area>div:first-child {
         font-size: 11px !important;
         font-weight: 600 !important;
         color: #8e8e93 !important;
         letter-spacing: 0.5px !important;
     }

     /* ── 15. 颜色选择点：选中状态 — 同色外圈 + 内嵌白色边框，无黑色 ── */
     #modal-overlay .color-dot.selected {
         outline: none !important;
         border: 2.5px solid #ffffff !important;
         transform: scale(1.22) !important;
         /* box-shadow 由 JS selectColor() 动态注入对应颜色 */
     }

     /* ── 16. 颜色点"+"按钮 ── */
     #color-picker-row .color-dot:last-child {
         background: #e5e5ea !important;
         border: none !important;
     }

     /* ── 17. 保存按钮：饱满的黑色 Apple 风格 ── */
     #modal-overlay #btn-save-main {
         background: #1c1c1e !important;
         color: #ffffff !important;
         border: none !important;
         border-radius: 14px !important;
         font-size: 15px !important;
         font-weight: 600 !important;
         letter-spacing: 0.2px !important;
         padding: 16px 0 !important;
         width: 100% !important;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
         text-transform: none !important;
         transition: background 0.15s, transform 0.12s, box-shadow 0.15s !important;
     }
     html.dark-mode #modal-overlay #btn-save-main {
         background: #d1d1d6 !important;
         color: #1c1c1e !important;
     }

     #modal-overlay #btn-save-main:hover {
         background: #2c2c2e !important;
         transform: translateY(-1px) !important;
         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
     }

     #modal-overlay #btn-save-main:active {
         transform: scale(0.97) !important;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14) !important;
     }

     /* ── 18. ios-bottom-bar 由 flex 布局控制，见 modal-content-box 定义 ── */

     /* ── 19. 城市搜索下拉 ── */
     #city-search-results {
         border-radius: 12px !important;
         border: 1px solid #e5e5ea !important;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
         overflow: hidden !important;
     }

     /* ── 20. 图片上传条目 ── */
     #modal-overlay .img-input-container {
         background: #f2f2f7 !important;
         border: 1px solid #e5e5ea !important;
         border-radius: 12px !important;
         border-style: solid !important;
     }
     html.dark-mode #modal-overlay .img-input-container {
         background: #2c2c2e !important;
         border-color: rgba(255,255,255,0.1) !important;
     }

     /* ── 21. 存储信息角标 ── */
     #storage-info {
         background: #e5e5ea !important;
         color: #8e8e93 !important;
         border-radius: 8px !important;
         font-weight: 600 !important;
     }
     html.dark-mode #storage-info {
         background: #3a3a3c !important;
         color: #8e8e93 !important;
     }

     /* ── 22. 关闭按钮：Apple 风格圆形灰底 ── */
     #modal-overlay .close-modal {
         background: rgba(118, 118, 128, 0.12) !important;
         top: 16px !important;
         right: 16px !important;
     }

     #modal-overlay .close-modal::before,
     #modal-overlay .close-modal::after {
         background-color: #8e8e93 !important;
         width: 14px !important;
     }
     html.dark-mode #modal-overlay .close-modal::before,
     html.dark-mode #modal-overlay .close-modal::after {
         background-color: #f2f2f7 !important;
     }

     #modal-overlay .close-modal:hover {
         background: rgba(118, 118, 128, 0.22) !important;
     }

     #modal-overlay .close-modal:hover::before,
     #modal-overlay .close-modal:hover::after {
         background-color: #1c1c1e !important;
     }
     html.dark-mode #modal-overlay .close-modal:hover::before,
     html.dark-mode #modal-overlay .close-modal:hover::after {
         background-color: #ffffff !important;
     }

     /* ── 23. 手机端：底部抽屉顶部圆角保留 ── */
     @media (max-width: 768px) {
         #modal-overlay {
             background: rgba(0, 0, 0, 0.35) !important;
             backdrop-filter: blur(2px) !important;
             -webkit-backdrop-filter: blur(2px) !important;
         }

         #modal-overlay .modal-content-box {
             border-radius: 24px 24px 0 0 !important;
             box-shadow:
                 0 -4px 30px rgba(0, 0, 0, 0.14),
                 0 -1px 0 rgba(0, 0, 0, 0.06) !important;
         }
     }

     /* ==========================================================================
【Apple 风格全面升级】回忆档案弹窗 — 黑白灰极简系统
========================================================================== */

     /* 1. 弹窗容器：圆角 + 柔和阴影，去掉硬边框 */
     #city-list-overlay .modal-content-box {
         border-radius: 20px !important;
         border: none !important;
         background: rgba(255, 255, 255, 0.97) !important;
         backdrop-filter: blur(20px) !important;
         -webkit-backdrop-filter: blur(20px) !important;
         box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.07) !important;
         overflow: hidden !important;
     }
     html.dark-mode #city-list-overlay .modal-content-box {
         background: #1c1c1e !important;
         box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
     }

     /* 2. 弹窗头部：轻分割线替代粗黑线，增加内间距，圆角顶部 */
     #city-list-overlay .modal-content-box>div:first-child {
         border-bottom: 1px solid #e5e5ea !important;
         padding: 22px 24px 16px 24px !important;
         background: rgba(255, 255, 255, 0.97) !important;
         backdrop-filter: blur(20px) !important;
         -webkit-backdrop-filter: blur(20px) !important;
     }
     html.dark-mode #city-list-overlay .modal-content-box>div:first-child {
         background: #1c1c1e !important;
         border-bottom-color: rgba(255,255,255,0.08) !important;
     }

     /* 3. Tab 页签整体容器 */
     #city-list-overlay .archive-tabs {
         gap: 20px !important;
     }

     /* 4. Tab 页签 — 未激活：Apple 二级灰 */
     #city-list-overlay .archive-tab {
         font-size: 15px !important;
         font-weight: 600 !important;
         color: #8e8e93 !important;
         letter-spacing: -0.1px !important;
         transition: color 0.2s !important;
     }

     #city-list-overlay .archive-tab:hover {
         color: #3c3c43 !important;
     }

     /* 5. Tab 页签 — 激活态：深黑 + 细线指示器 */
     #city-list-overlay .archive-tab.active {
         font-size: 17px !important;
         font-weight: 700 !important;
         color: #1c1c1e !important;
     }
     html.dark-mode #city-list-overlay .archive-tab.active {
         color: #f2f2f7 !important;
     }

     #city-list-overlay .archive-tab.active::after {
         height: 2.5px !important;
         background: #1c1c1e !important;
         border-radius: 2px !important;
         bottom: -8px !important;
         left: 0 !important;
         width: 100% !important;
     }
     html.dark-mode #city-list-overlay .archive-tab.active::after {
         background: #f2f2f7 !important;
     }

     /* 6. 关闭按钮：Apple 灰圆形 */
     #city-list-overlay .close-modal {
         background: rgba(118, 118, 128, 0.12) !important;
         width: 30px !important;
         height: 30px !important;
     }

     #city-list-overlay .close-modal::before,
     #city-list-overlay .close-modal::after {
         background-color: #8e8e93 !important;
         width: 13px !important;
     }
     html.dark-mode #city-list-overlay .close-modal::before,
     html.dark-mode #city-list-overlay .close-modal::after {
         background-color: #f2f2f7 !important;
     }

     #city-list-overlay .close-modal:hover {
         background: rgba(118, 118, 128, 0.22) !important;
     }

     #city-list-overlay .close-modal:hover::before,
     #city-list-overlay .close-modal:hover::after {
         background-color: #1c1c1e !important;
     }
     html.dark-mode #city-list-overlay .close-modal:hover::before,
     html.dark-mode #city-list-overlay .close-modal:hover::after {
         background-color: #ffffff !important;
     }

     /* 7. 选择导出按钮：Apple 浅灰胶囊 */
     #btn-enter-export {
         background: #f2f2f7 !important;
         color: #1c1c1e !important;
         border: none !important;
         border-radius: 12px !important;
         font-size: 12px !important;
         font-weight: 600 !important;
         letter-spacing: 0.1px !important;
         padding: 9px 16px !important;
         transition: background 0.15s !important;
         box-shadow: none !important;
         transform: none !important;
     }
     html.dark-mode #btn-enter-export {
         background: #2c2c2e !important;
         color: #f2f2f7 !important;
     }

     #btn-enter-export:hover {
         background: #e5e5ea !important;
         transform: none !important;
         box-shadow: none !important;
     }

     #btn-enter-export:active {
         background: #d1d1d6 !important;
         transform: none !important;
     }

     /* ══════════════════════════════════════════════════════════════════
【终极修复】电脑端详情页：左图右文布局（最高优先级，放在最后）
══════════════════════════════════════════════════════════════════ */
     @media (min-width: 769px) {

         /* 弹窗容器：横向 row 布局，固定整体尺寸 */
         #detail-overlay .modal-content-box,
         #detail-nav-wrapper .modal-content-box {
             display: flex !important;
             flex-direction: row !important;
             width: min(1200px, 96vw) !important;
             max-width: 96vw !important;
             height: min(88vh, 920px) !important;
             max-height: 920px !important;
             padding: 0 !important;
             overflow: hidden !important;
             align-items: stretch !important;
         }

         /* 左侧图片轮播：自动伸缩填满弹窗剩余空间（总宽 − 480px 文字列） */
         #detail-img-carousel {
             flex: 1 1 auto !important;
             /* 自动填满剩余宽度 */
             min-width: 0 !important;
             height: 100% !important;
             background: #ffffff !important;
             position: relative !important;
             display: flex !important;
             align-items: center !important;
             justify-content: center !important;
             overflow: hidden !important;
             border-left: none !important;
             border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
             order: 1 !important;
             /* 图片区左侧两个圆角跟随弹窗 */
             border-radius: 20px 0 0 20px !important;
         }
         html.dark-mode #detail-img-carousel {
             background: #111113 !important;
             border-right-color: rgba(255,255,255,0.1) !important;
         }

         /* 右侧文字区：固定 480px */
         #detail-content {
             flex: 0 0 480px !important;
             width: 480px !important;
             min-width: 480px !important;
             max-width: 480px !important;
             height: 100% !important;
             overflow-y: auto !important;
             padding: 48px 36px 100px 36px !important;
             box-sizing: border-box !important;
             background: #ffffff !important;
             border-left: none !important;
             border-right: none !important;
             order: 2 !important;
         }

         /* 轮播图片：铺满图片区，contain 保持比例不裁切 */
         #detail-carousel-img {
             position: absolute !important;
             top: 0 !important;
             left: 0 !important;
             width: 100% !important;
             height: 100% !important;
             object-fit: contain !important;
             display: block !important;
             z-index: 1 !important;
         }

         /* 禁用状态的切换按钮：完全隐藏 */
         .carousel-nav-btn:disabled {
             opacity: 0 !important;
             cursor: not-allowed !important;
             pointer-events: none !important;
         }

         /* 关闭按钮在右侧文字区右上角 */
         #detail-overlay .close-modal {
             position: absolute !important;
             top: 14px !important;
             right: 14px !important;
             z-index: 200 !important;
         }

         /* 编辑/删除按钮：手机端绝对定位在底部居中 */
         #detail-external-actions {
             position: absolute !important;
             bottom: 28px !important;
             left: 50% !important;
             right: auto !important;
             width: auto !important;
             transform: translateX(-50%) !important;
             top: auto !important;
             z-index: 10020 !important;
             display: flex !important;
             justify-content: center !important;
             gap: 16px !important;
         }
     }

     /* ══════════════════════════════════════════════════════════════════
【终极修复】结束
══════════════════════════════════════════════════════════════════ */

     /* 8. 导出模式操作按钮组：全部统一 Apple 浅灰 */
     #city-list-actions-export button {
         background: #f2f2f7 !important;
         color: #3c3c43 !important;
         border: none !important;
         border-radius: 12px !important;
         font-size: 12px !important;
         font-weight: 600 !important;
         transition: background 0.15s !important;
         box-shadow: none !important;
     }

     #city-list-actions-export button:hover {
         background: #e5e5ea !important;
     }

     #city-list-actions-export button:active {
         background: #d1d1d6 !important;
     }

     /* 取消按钮：加细描边作区分 */
     #city-list-actions-export button:first-child {
         color: #1c1c1e !important;
         border: 1px solid #e5e5ea !important;
     }

     /* ══════════════════════════════════════════════════════════════
【图片区模糊背景】消除 contain 留白，用同图片模糊填充空隙
══════════════════════════════════════════════════════════════ */
     #carousel-blur-bg {
         position: absolute !important;
         inset: 0 !important;
         background-size: cover !important;
         background-position: center !important;
         background-repeat: no-repeat !important;
         filter: blur(28px) brightness(0.82) !important;
         transform: scale(1.08) !important;
         /* 消除 blur 导致的边缘淡出 */
         z-index: 0 !important;
         transition: background-image 0.3s ease !important;
         border-radius: inherit !important;
     }

     左按钮向左展开，右按钮向右展开 ══════════════════════════════════════════════════════════════ */

     /* 标签文字：默认完全不可见且不占宽度 */
     .nav-btn-label {
         font-size: 13px;
         font-weight: 700;
         letter-spacing: 0.1px;
         white-space: nowrap;
         overflow: hidden;
         max-width: 0;
         width: 0;
         opacity: 0;
         visibility: hidden;
         /* 比 opacity:0 更彻底，防止字符边缘露出 */
         display: inline-block;
         vertical-align: middle;
         transition:
             max-width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
             width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
             opacity 0.18s ease 0.14s,
             visibility 0s linear 0.38s;
         /* hover 结束后延迟到展开动画完成再隐藏 */
     }

     @media (min-width: 769px) {

         /* 基础形态：圆形，覆盖所有先前规则 */
         .nav-btn-detail {
             width: 52px !important;
             height: 52px !important;
             border-radius: 26px !important;
             overflow: hidden !important;
             clip-path: inset(0 round 26px) !important;
             padding: 0 14px !important;
             box-sizing: border-box !important;
             gap: 8px !important;
             white-space: nowrap !important;
             transition:
                 width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                 clip-path 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                 background-color 0.22s ease,
                 color 0.22s ease,
                 box-shadow 0.22s ease !important;
         }

         .nav-btn-detail:hover {
             width: 52px !important;
             clip-path: inset(0 round 26px) !important;
             background-color: #1a1a1a !important;
             color: #ffffff !important;
             transform: translateY(-50%) !important;
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
         }

         /* 文字标签彻底隐藏，hover 也不展开 */
         .nav-btn-detail .nav-btn-label,
         .nav-btn-detail:hover .nav-btn-label {
             display: none !important;
         }

         /* 悬停时文字展开 */
         .nav-btn-detail:hover .nav-btn-label {
             max-width: 100px;
             width: auto;
             opacity: 1;
             visibility: visible;
             transition:
                 max-width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                 width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                 opacity 0.18s ease 0.14s,
                 visibility 0s linear 0s;
             /* hover 时立即可见 */
         }

         /* ── 上一个回忆：向左展开 ──
    图标在右 (flex-end)，文字在左，按钮以右边缘为锚点向左延伸 */
         #nav-prev-detail {
             position: absolute !important;
             top: 50% !important;
             /* 右边缘固定在卡片左侧 45px 处 → 展开向左 */
             right: calc(100% + 45px) !important;
             left: auto !important;
             transform: translateY(-50%) !important;
             margin: 0 !important;
             /* 图标靠右，文字在左 */
             justify-content: flex-end !important;
             flex-direction: row !important;
         }

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

         /* ── 下一个回忆：向右展开 ──
    图标在左 (flex-start)，文字在右，按钮以左边缘为锚点向右延伸 */
         #nav-next-detail {
             position: absolute !important;
             top: 50% !important;
             /* 左边缘固定在卡片右侧 45px 处 → 展开向右 */
             left: calc(100% + 45px) !important;
             right: auto !important;
             transform: translateY(-50%) !important;
             margin: 0 !important;
             /* 图标靠左，文字在右 */
             justify-content: flex-start !important;
             flex-direction: row !important;
         }

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

     /* 9. 内容区域背景 */
     #city-list-content {
         background: rgba(255, 255, 255, 0.97) !important;
     }
     html.dark-mode #city-list-content {
         background: #1c1c1e !important;
     }

     /* 10. 国家 / 城市分组标题：Apple 灰色系小标签 */
     .city-list-header {
         font-size: 11px !important;
         font-weight: 600 !important;
         color: #8e8e93 !important;
         text-transform: uppercase !important;
         letter-spacing: 0.7px !important;
         border-bottom: none !important;
         background: #f2f2f7 !important;
         padding: 7px 12px !important;
         border-radius: 10px !important;
         margin-bottom: 2px !important;
     }
     html.dark-mode .city-list-header {
         background: #2c2c2e !important;
         color: #8e8e93 !important;
     }

     /* 11. 城市列表行：更大点击区 + 苹果分割线 */
     .city-list-item {
         padding: 13px 14px !important;
         border-bottom: 1px solid #f2f2f7 !important;
         font-size: 15px !important;
         font-weight: 500 !important;
         color: #1c1c1e !important;
         border-radius: 0 !important;
         transition: background 0.15s !important;
     }
     html.dark-mode .city-list-item {
         color: #f2f2f7 !important;
         border-bottom-color: rgba(255,255,255,0.06) !important;
     }

     .city-list-item:hover {
         background: #f7f7f7 !important;
     }
     html.dark-mode .city-list-item:hover {
         background: #2c2c2e !important;
     }

     .city-list-item:last-child {
         border-bottom: none !important;
     }

     /* 12. 标签胶囊在档案列表中 */
     #city-list-content .tag-capsule {
         background: #f2f2f7 !important;
         color: #1c1c1e !important;
         box-shadow: none !important;
         font-size: 13px !important;
         font-weight: 600 !important;
         padding: 8px 16px !important;
         border-radius: 100px !important;
         border: 1.5px solid transparent !important;
         transition: background 0.15s, transform 0.12s !important;
     }
     html.dark-mode #city-list-content .tag-capsule {
         background: #2c2c2e !important;
         color: #f2f2f7 !important;
     }

     #city-list-content .tag-capsule:hover {
         background: #e5e5ea !important;
         transform: translateY(-1px) !important;
     }
     html.dark-mode #city-list-content .tag-capsule:hover {
         background: #3a3a3c !important;
     }

     /* 13. 搜索结果卡片 */
     #global-search-results>div {
         border-radius: 14px !important;
         border: 1.5px solid #f0f0f0 !important;
         background: #fff !important;
         transition: border-color 0.18s, box-shadow 0.18s !important;
     }
     html.dark-mode #global-search-results>div {
         background: #2c2c2e !important;
         border-color: rgba(255,255,255,0.08) !important;
         color: #f2f2f7 !important;
     }

     #global-search-results>div:hover {
         border-color: #1c1c1e !important;
         box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important;
     }
     html.dark-mode #global-search-results>div:hover {
         border-color: rgba(255,255,255,0.3) !important;
     }

     /* 14. 搜索结果图片占位符：Apple 灰 */
     #global-search-results div[style*="background:#f5f5f5"] {
         background: #f2f2f7 !important;
         color: #8e8e93 !important;
         border: 1px solid #e5e5ea !important;
     }
     html.dark-mode #global-search-results div[style*="background:#f5f5f5"] {
         background: #3a3a3c !important;
         border-color: rgba(255,255,255,0.08) !important;
     }

     /* 15. 全局搜索输入框 */
     html.dark-mode #global-search-input {
         background: #2c2c2e !important;
         color: #f2f2f7 !important;
     }

     html.dark-mode #global-search-input::placeholder {
         color: #636366 !important;
     }

     /* 15. 手机端弹窗顶部圆角 */
     @media (max-width: 768px) {
         #city-list-overlay .modal-content-box {
             border-radius: 24px 24px 0 0 !important;
         }

         #city-list-overlay .modal-content-box>div:first-child {
             border-radius: 24px 24px 0 0 !important;
         }
     }

     /* ==========================================================================
【电脑端专属优化】
========================================================================== */
     @media (min-width: 769px) {

         /* ── A. 首页底部导航：隐藏手机版随机按钮（电脑端由 btn-random 承担） ── */
         #home-actions #btn-random-2 {
             display: none !important;
         }

         /* ── B. 筛选弹窗：移到屏幕正中间 ── */
         #filter-panel-desktop {
             position: fixed !important;
             top: 50% !important;
             left: 50% !important;
             bottom: auto !important;
             transform: translate(-50%, -50%) !important;
             width: 500px !important;
             max-height: 70vh !important;
             z-index: 5000 !important;
         }

         /* ── C. 时光画廊：更大 ── */
         #gallery-overlay .modal-content-box {
             width: 98% !important;
             max-width: 1600px !important;
             height: 95vh !important;
             max-height: 95vh !important;
         }

         #gallery-content {
             padding: 30px 50px !important;
         }

         /* ── D. 回忆详情页：左图右文，固定整体尺寸，图片区自适应 ── */
         #detail-overlay .modal-content-box,
         #detail-nav-wrapper .modal-content-box {
             width: min(1200px, 96vw) !important;
             max-width: 96vw !important;
             height: min(88vh, 920px) !important;
             max-height: 920px !important;
             padding: 0 !important;
             flex-shrink: 0 !important;
         }

         #detail-nav-wrapper {
             width: min(1200px, 96vw) !important;
             max-width: 96vw !important;
         }

         /* 图片区：填满弹窗剩余空间（总宽 − 480px 文字列） */
         #detail-img-carousel {
             flex: 1 1 0 !important;
             min-width: 0 !important;
             width: auto !important;
             height: 100% !important;
             align-self: stretch !important;
         }

         /* 图片 contain 适应，任何比例都不裁切 */
         #detail-carousel-img {
             width: 100% !important;
             height: 100% !important;
             object-fit: contain !important;
             object-position: center !important;
         }

         /* ── E. 编辑/删除按钮：在弹窗下方，自然流居中 ── */
         #detail-overlay #detail-external-actions {
             position: static !important;
             transform: none !important;
             display: flex !important;
             justify-content: center !important;
             align-items: center !important;
             gap: 16px !important;
             z-index: 10020 !important;
             pointer-events: auto !important;
             flex-shrink: 0 !important;
         }

         /* ── F. 回忆卡片标题：加大加粗 ── */
         #memory-panel .waterfall-container .moment-card .card-title-text,
         #memory-panel .waterfall-container>div>.moment-card .card-title-text {
             font-size: 20px !important;
             font-weight: 700 !important;
             line-height: 1.25 !important;
             letter-spacing: -0.3px !important;
             margin-bottom: 8px !important;
         }

         /* ── G. 详情页地点/时间：分两行，与标题/标签左边对齐 ── */
         /* detail-content padding-left 是 40px，标题/标签都从这里开始
    meta-info 原本用 margin:-40px padding:40px 撑满全宽；
    改为 margin/padding 归零，让它回到内容流正常左边缘，与标题对齐 */
         .detail-meta-info {
             flex-direction: column !important;
             align-items: flex-start !important;
             gap: 8px !important;
             margin-left: 0 !important;
             margin-right: 0 !important;
             padding-left: 0 !important;
             padding-right: 0 !important;
         }

         /* 标题下方留出足够间距，不遮挡地点/时间 */
         #detail-content-title {
             margin-bottom: 16px !important;
             padding-bottom: 0 !important;
         }

         /* ── H. 详情页标题：更大更醒目 ── */
         #detail-content-title {
             font-size: 32px !important;
             font-weight: 900 !important;
             letter-spacing: -0.8px !important;
             line-height: 1.2 !important;
         }

         #detail-content-title.is-sticky {
             font-size: 22px !important;
         }

         /* ── I. 全屏 Lightbox 横版照片铺满屏幕 ── */
         #lightbox-img {
             max-width: 100vw !important;
             max-height: 100vh !important;
             width: auto !important;
             height: auto !important;
             object-fit: contain !important;
         }

         /* ── J. 添加回忆弹窗：居中显示 + 增大宽度 ── */
         #modal-overlay {
             align-items: center !important;
             justify-content: center !important;
         }

         #modal-overlay .modal-content-box {
             width: 680px !important;
             max-width: 680px !important;
             max-height: 85vh !important;
             border-radius: 24px !important;
             animation: card-pop-up 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
         }
     }

     /* ══ 幻灯片自定义下拉菜单 ══ */
     .ss-custom-menu {
         position: fixed !important;
         background: rgba(28, 28, 30, 0.97);
         backdrop-filter: blur(24px);
         -webkit-backdrop-filter: blur(24px);
         border: 1px solid rgba(255, 255, 255, 0.18);
         border-radius: 14px;
         overflow-y: auto;
         overflow-x: hidden;
         z-index: 99999;
         min-width: 120px;
         max-width: 220px;
         max-height: min(360px, 60vh);
         /* 最多占屏幕60%，超出可滚动 */
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
         animation: ssMenuIn 0.14s ease;
         -webkit-overflow-scrolling: touch;
         overscroll-behavior: contain;
     }

     @keyframes ssMenuIn {
         from {
             opacity: 0;
             transform: translateY(-5px) scale(0.96);
         }

         to {
             opacity: 1;
             transform: translateY(0) scale(1);
         }
     }

     .ss-custom-menu-item {
         padding: 12px 18px;
         color: rgba(255, 255, 255, 0.88);
         font-size: 14px;
         font-weight: 600;
         cursor: pointer;
         white-space: nowrap;
         transition: background 0.1s;
     }

     .ss-custom-menu-item+.ss-custom-menu-item {
         border-top: 1px solid rgba(255, 255, 255, 0.07);
     }

     .ss-custom-menu-item:active,
     .ss-custom-menu-item:hover {
         background: rgba(255, 255, 255, 0.12);
         color: #fff;
     }

     .ss-custom-menu-item.ss-active {
         font-weight: 800;
         color: #fff;
     }

     /* 新回忆退出按钮 fixed 定位 */
     #modal-close-btn {
         position: fixed !important;
         top: 16px !important;
         right: 16px !important;
         z-index: 99999 !important;
         background: rgba(255, 255, 255, 0.92) !important;
         backdrop-filter: blur(8px) !important;
         -webkit-backdrop-filter: blur(8px) !important;
         box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10) !important;
         width: 34px !important;
         height: 34px !important;
     }

     /* ══ 新回忆退出按钮：absolute 相对于 modal-content-box ══ */
     #modal-overlay .close-modal {
         position: absolute !important;
         top: 16px !important;
         right: 16px !important;
         float: none !important;
         z-index: 9999 !important;
         pointer-events: auto !important;
     }

     /* modal-content-box 确保 relative，让叉号 absolute 定位正确 */
     #modal-overlay .modal-content-box {
         position: relative !important;
     }

     /* ══ 手机端新回忆弹窗：左右底部撑满，无留白 ══ */
     @media (max-width: 768px) {
         #modal-overlay .modal-content-box {
             position: fixed !important;
             bottom: 0 !important;
             left: 0 !important;
             right: 0 !important;
             top: auto !important;
             width: 100% !important;
             max-width: 100% !important;
             border-radius: 20px 20px 0 0 !important;
             margin: 0 !important;
             transform: none !important;
         }
     }

     /* 手机端隐藏多余的随机按钮 */
     #home-actions #btn-random-2 {
         display: none !important;
     }

     /* 手机端筛选标签 font-weight 统一为正常粗细 */
     #filter-tags-container-mobile .tag-capsule,
     #tag-filter-overlay .tag-capsule {
         font-weight: 400 !important;
     }

     #filter-tags-container-mobile .tag-capsule.active,
     #tag-filter-overlay .tag-capsule.active {
         font-weight: 600 !important;
     }

     /* ════════════════════════════════════════════════
    性能优化补丁
    ════════════════════════════════════════════════ */

     /* 1. 手机端全量禁用 backdrop-filter（最大单项收益）
       所有毛玻璃效果改为纯色半透明，省去 GPU 实时模糊计算 */
     @media (max-width: 768px) {
         * {
             backdrop-filter: none !important;
             -webkit-backdrop-filter: none !important;
         }

         /* 受影响的关键元素补充背景色，保持视觉 */
         .modal-content-box,
         #modal-overlay .modal-content-box {
             background: rgba(255, 255, 255, 0.98) !important;
         }

         .overlay-base,
         #tag-filter-overlay,
         #city-list-overlay,
         #detail-overlay {
             background: rgba(0, 0, 0, 0.5) !important;
         }

         #home-actions,
         .home-actions {
             background: rgba(255, 255, 255, 0.95) !important;
         }

         .ss-selector-pill {
             background: rgba(40, 40, 40, 0.92) !important;
         }

         #slideshow-pause-btn,
         #slideshow-exit {
             background: rgba(40, 40, 40, 0.88) !important;
         }
     }

     /* 2. 手机端全量移除 will-change（省显存，减少合成层）*/
     @media (max-width: 768px) {
         * {
             will-change: auto !important;
         }
     }

     /* 骨架屏动画由 img-skeleton-done class 控制停止，无需全局 paused 规则 */

     /* 4. 手机端减少 transition 时长，降低重绘频率 */
     @media (max-width: 768px) {

         .overlay-base,
         .modal-content-box {
             transition-duration: 0.2s !important;
         }

         /* 卡片动画在手机端简化 */
         .moment-card {
             transition: opacity 0.15s ease !important;
         }
     }

     /* content-visibility: auto 不适用于 img 元素，已移除 */

     /* 6. 手机端关闭卡片 hover 的 transform（手机没有hover，
       但 :hover 状态有时被触摸触发，导致不必要的合成层） */
     @media (max-width: 768px) {

         .moment-card:hover,
         .tag-capsule:hover,
         .action-btn-round:hover {
             transform: none !important;
         }
     }

     /* 7. 手机端那年今日浮动动画关闭（纯装饰，常驻后台消耗CPU）*/
     @media (max-width: 768px) {

         /* 状态点脉冲动画手机端关闭 */
         .status-dot,
         [style*="pulse-green"],
         [style*="pulse-yellow"],
         [style*="status-pulse"] {
             animation: none !important;
         }
     }

     /* ════ 时光轴性能优化 ════ */

     /* 1. 手机端 moment-card 禁用 will-change 和复杂动画 */
     @media (max-width: 768px) {
         .moment-card {
             will-change: auto !important;
             animation: tl-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
         }

         @keyframes tl-fade-in {
             from {
                 opacity: 0;
                 transform: translateY(16px);
             }

             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }

         /* 2. 时光轴 header 也简化 */
         .timeline-section-header {
             will-change: auto !important;
         }

         /* translateZ(0) 在时光轴上是负优化（内存暴增），已移除 */

         /* 4. 图片容器高度预留，防止图片加载时触发大量 reflow */
         .moment-img-wrap {
             min-height: 80px;
             background: transparent;
         }

         /* 5. 轴点手机端简化（去掉可能的动画） */
     }

     /* 6. 时光轴卡片：手机端用丝滑 fade-in */
     @media (max-width: 768px) {
         #memory-panel.timeline-mode .moment-card {
             animation: tl-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
         }
     }

     /* ★ 页面不可见时暂停所有 infinite 动画，页面切回来时恢复 */
     body.page-hidden * {
         animation-play-state: paused !important;
     }

     /* ==========================================================================
【画廊筛选器】自定义菜单：文字变白 + 高级白底黑勾复选框
========================================================================== */

     /* 1. 强制下拉菜单内的所有小字和标签变成纯白色 */
     .ss-custom-menu,
     .ss-custom-menu * {
         color: #ffffff !important;
     }

     /* 2. 重置并美化复选框（干掉原生蓝色，改为精美的黑底白边） */
     .ss-custom-menu input[type="checkbox"] {
         appearance: none !important;
         -webkit-appearance: none !important;
         /* 兼容 Safari */
         width: 15px !important;
         height: 15px !important;
         border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
         /* 未勾选时是淡淡的白边 */
         border-radius: 3px !important;
         background-color: transparent !important;
         display: inline-block !important;
         vertical-align: middle !important;
         position: relative !important;
         cursor: pointer !important;
         outline: none !important;
         margin-right: 8px !important;
         transition: all 0.2s ease !important;
     }

     /* 3. 当复选框被勾选时：变成白底 */
     .ss-custom-menu input[type="checkbox"]:checked {
         background-color: #ffffff !important;
         border-color: #ffffff !important;
     }

     /* 4. 使用伪元素在白底上绘制一个精致的“黑色的对勾” */
     .ss-custom-menu input[type="checkbox"]:checked::after {
         content: '' !important;
         position: absolute !important;
         left: 4px !important;
         top: 1px !important;
         width: 4px !important;
         height: 8px !important;
         border: solid #000000 !important;
         /* 黑色勾 */
         border-width: 0 2px 2px 0 !important;
         /* 勾的粗细 */
         transform: rotate(45deg) !important;
         /* 旋转成对勾角度 */
     }

     /* ==========================================================================
    【首页】手机端全屏按钮已由设置面板替代
    ========================================================================== */

     /* ==========================================================================
    【画廊自动播放】仅为单选下拉菜单（速度、尺寸、主题）开启手机端原生选择器
    ========================================================================== */
     @media (max-width: 768px) {

         /* 精准定位这三个胶囊，开启透明的原生 Select 遮罩 */
         #pill-speed select,
         #pill-orient select,
         #pill-filter select {
             display: block !important;
             position: absolute !important;
             top: 0 !important;
             left: 0 !important;
             width: 100% !important;
             height: 100% !important;
             opacity: 0 !important;
             pointer-events: auto !important;
             z-index: 100 !important;
             appearance: auto !important;
             -webkit-appearance: auto !important;
         }

         /* 手机端隐藏这三个胶囊自己画的下拉框，防止和原生滚轮冲突 */
         #pill-speed .ss-custom-menu,
         #pill-orient .ss-custom-menu,
         #pill-filter .ss-custom-menu {
             display: none !important;
         }
     }

     /* ==========================================================================
    【复选框菜单】强制所有文字纯白、无透明度（解决手机端发灰问题）
    ========================================================================== */
 .ss-custom-menu,
 .ss-custom-menu label,
 .ss-custom-menu span,
 .ss-custom-menu div {
     color: #ffffff !important;
     opacity: 1 !important; /* 打破系统默认的半透明干扰 */
     -webkit-text-fill-color: #ffffff !important; /* 强制 iOS 渲染为纯白 */
     text-shadow: none !important;
 }

 /* ==========================================================================
    【复选框菜单】强制所有文字纯白、无透明度（终极暴力穿透）
    ========================================================================== */
 .ss-custom-menu,
 .ss-custom-menu *,
 .ss-selector-pill .ss-custom-menu label {
     color: #ffffff !important;
     opacity: 1 !important; 
     -webkit-text-fill-color: #ffffff !important; 
     text-shadow: none !important;
     font-weight: normal !important; /* 压制某些浏览器给 label 加的默认粗灰样式 */
 }

 /* ==========================================================================
    【复选框菜单】限制最大高度，开启内部滚动，留出关闭空白区
    ========================================================================== */
 .ss-selector-pill .ss-custom-menu {
     max-height: 50vh !important; /* 限制最高只占屏幕高度的 50% */
     overflow-y: auto !important; /* 内容超出时开启内部滑动 */
     overscroll-behavior: contain !important; /* 防止滑动时底层的页面跟着滑 */
 }

 /* 顺便美化一下滚动条，匹配高级的暗色质感 */
 .ss-selector-pill .ss-custom-menu::-webkit-scrollbar {
     width: 4px !important;
 }
 .ss-selector-pill .ss-custom-menu::-webkit-scrollbar-track {
     background: transparent !important;
 }
 .ss-selector-pill .ss-custom-menu::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.3) !important;
     border-radius: 4px !important;
 }