/* 回忆地图 · 样式 — 手机端修正：双列瀑布流、详情页、关闭按钮、导航按钮 */
 /* ==========================================================================
【最终清洗版】手机端强制同步电脑端逻辑 (City Detail & Timeline)
去除所有 Grid/Instagram 方图/小字体 等手机端特供样式，还原 PC 质感
========================================================================== */

 @media (max-width: 768px) {

     /* 1. 布局逻辑：废除 Grid，回归 CSS Columns (瀑布流/流式布局) */
     /* 之前的代码强行把手机变成了 Grid 双列，现在改回流式 */
     .waterfall-container {
         display: block !important;
         /* 电脑端默认是 block，靠 column-count 控制 */

         /* 电脑端是 2-3 列，手机端屏幕窄，推荐 1 列 (像朋友圈/公众号那样的大卡片流)。
        如果你坚持要手机也双列，把下面改成 2，但卡片会很挤。
     */
         column-count: 1 !important;

         column-gap: 24px !important;
         /* 保持和电脑端类似的间距 */
         padding: 20px 20px 120px 20px !important;
         /* 调整内边距 */
         width: 100% !important;
         box-sizing: border-box !important;
     }

     /* 2. 卡片外观：强制复刻电脑端 (黑框、阴影、大圆角) */
     .moment-card,
     .city-overview-card {
         /* 还原瀑布流卡片属性 */
         break-inside: avoid !important;
         /* 防止卡片断裂 */
         width: 100% !important;
         margin-bottom: 12px !important;
         /* 增加卡片间距 */

         /* 强制使用电脑端的样式参数 */
         border: 2px solid #1a1a1a !important;
         border-radius: 20px !important;
         background: #fff !important;
         box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1) !important;
         /* 恢复电脑端的硬阴影 */
         padding: 10px !important;
         /* 缩小外框内边距 */

         /* 确保交互动效一致 */
         transform: translate(0, 0) !important;
         transition: all 0.2s !important;
     }

     /* 手机端按下卡片时的反馈 */
     .moment-card:active,
     .city-overview-card:active {
         transform: translateY(2px) !important;
         box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
     }

     /* 3. 字体排版：拒绝“小气”，恢复电脑端的大字体 */
     .moment-card .card-title-text,
     .city-overview-card .card-title-text {
         font-size: 22px !important;
         /* 恢复电脑端的 22px */
         font-weight: 900 !important;
         line-height: 1.3 !important;
         margin-bottom: 12px !important;
         letter-spacing: -0.5px !important;
         white-space: normal !important;
         /* 允许换行 */
     }

     .moment-card div[style*="color:#555"] {
         font-size: 15px !important;
         /* 正文也改大 */
         line-height: 1.6 !important;
         -webkit-line-clamp: 4 !important;
         /* 允许显示更多行数 */
     }

     /* 4. 图片逻辑：废除 1:1 正方形裁切，恢复原始比例 */
     /* 之前的代码为了模仿 Instagram 强制把手机图变成了正方形，现在改回自然高度 */
     .moment-card img,
     .city-overview-card img {
         width: 100% !important;
         height: auto !important;
         /* 让高度自适应 */
         aspect-ratio: auto !important;
         /* 取消强制正方形 */
         object-fit: contain !important;
         /* 完整显示图片内容 */

         border-radius: 12px !important;
         border: 1px solid #eee !important;
         margin-top: 12px !important;
         margin-bottom: 0 !important;
     }

     /* 5. 标签样式：恢复大胶囊 */
     .tag-capsule {
         font-size: 12px !important;
         padding: 6px 12px !important;
         border-width: 1.5px !important;
     }

     /* =========================================
    时光轴 (Timeline) 专门修复
    ========================================= */

     /* 恢复时光轴头部的 Flex 布局 (左城市 - 右日期) */
     .timeline-section-header {
         display: flex !important;
         align-items: baseline !important;
         flex-direction: row !important;
         /* 强制横排 */
         justify-content: space-between !important;
         border-bottom: 2px solid #f0f0f0 !important;
         padding-bottom: 15px !important;
         margin-bottom: 25px !important;
         width: 100% !important;
         gap: 10px !important;
     }

     /* 城市名：允许换行但保持大字体 */
     .timeline-city-text {
         font-size: 24px !important;
         font-weight: 900 !important;
         text-align: left !important;
         margin-right: auto !important;
         order: -1 !important;
         /* 也就是放在最左边 */
     }

     /* 日期部分：禁止换行，保持紧凑 */
     .timeline-section-header>div:last-child {
         white-space: nowrap !important;
         flex-shrink: 0 !important;
         text-align: right !important;
     }

     .t-num {
         font-size: 28px !important;
     }

     /* 数字大一点 */
     .t-cn {
         font-size: 14px !important;
     }

     /* 时光轴模式下的卡片微调 */
     #memory-panel.timeline-mode .moment-card {
         padding: 24px !important;
         /* 保持宽敞 */
         margin-bottom: 20px !important;
     }
 }

 /* ==========================================================================
【手机端双列瀑布流补丁】
实现：一排两张、非网格、长短卡片交错排列
========================================================================== */

 @media (max-width: 768px) {

     /* 1. 容器：启用 CSS 原生多列布局 (Masonry) */
     .waterfall-container {
         display: block !important;
         /* 核心：禁用 display:flex 或 grid */
         column-count: 2 !important;
         /* 核心：强制分为 2 列 */
         column-gap: 12px !important;
         /* 列与列中间的缝隙 (可根据喜好调整) */

         padding: 15px !important;
         /* 容器边缘留白 */
         width: 100% !important;
         box-sizing: border-box !important;

         /* 解决 iOS 上可能的滚动截断问题 */
         height: auto !important;
         padding-bottom: 120px !important;
     }

     /* 2. 卡片：防止被切断 */
     .moment-card,
     .city-overview-card {
         /* 核心属性：防止卡片被“撕裂”分摊到两列 */
         break-inside: avoid !important;
         -webkit-column-break-inside: avoid !important;

         width: 100% !important;
         margin-bottom: 12px !important;
         /* 卡片上下之间的距离 */

         /* 保持精致的卡片外观 */
         box-sizing: border-box !important;
         display: inline-block !important;
         /* 辅助修复某些浏览器的渲染 bug */
     }

     /* 3. 时光轴标题：强制横跨两列 */
     /* 如果没有这行，标题会被挤到某一列里去，非常难看 */
     .timeline-section-header {
         column-span: all !important;
         /* 核心：横跨所有列 */
         -webkit-column-span: all !important;

         width: 100% !important;
         display: flex !important;
         margin-bottom: 20px !important;
         padding-top: 20px !important;
         border-bottom: 2px solid #f0f0f0 !important;
     }

     /* 4. (可选) 针对双列优化字体大小，防止拥挤 */
     .moment-card .card-title-text,
     .city-overview-card .card-title-text {
         font-size: 16px !important;
         /* 稍微改小一点标题，适应半屏宽度 */
         line-height: 1.3 !important;
         word-wrap: break-word !important;
         /* 防止长单词撑破布局 */
     }

     .moment-card {
         padding: 15px !important;
         /* 内边距稍微紧凑一点 */
     }
 }

 /* ==========================================================================
【最终修正】手机端双列瀑布流 (仿电脑端逻辑)
复刻电脑端的 column 布局，实现“一排两张 + 无缝隙紧密排列”
========================================================================== */

 @media (max-width: 768px) {

     /* 1. 容器设置：改为双列流式布局 */
     .waterfall-container {
         display: block !important;
         /* 关掉 Grid/Flex */
         column-count: 2 !important;
         /* 【核心】强制分为 2 列 */
         column-gap: 24px !important;
         /* 列中间的间距 */

         padding: 15px !important;
         /* 容器边缘留白 */
         width: 100% !important;
         box-sizing: border-box !important;

         /* 修复 iOS 滚动可能被截断的问题 */
         padding-bottom: 120px !important;
     }

     /* 2. 卡片设置：防止断裂 */
     .moment-card,
     .city-overview-card {
         /* 【关键】防止卡片被从中间切开分给两列 */
         break-inside: avoid !important;
         -webkit-column-break-inside: avoid !important;

         width: 100% !important;
         /* 占满所在的列宽 */
         margin-bottom: 24px !important;
         /* 卡片上下间距 */

         /* 强制统一样式 (大圆角、阴影) */
         border: 2px solid #1a1a1a !important;
         border-radius: 16px !important;
         background: #fff !important;
         padding: 10px !important;
         box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
         box-sizing: border-box !important;

         display: inline-block !important;
         /* 修复某些旧浏览器渲染错位 */
     }

     /* 3. 图片修复：自适应高度 (不要正方形) */
     .moment-card img,
     .city-overview-card img {
         width: 100% !important;
         height: auto !important;
         /* 按照图片原比例显示 */
         aspect-ratio: auto !important;
         /* 取消强制正方形 */
         object-fit: contain !important;
         border-radius: 8px !important;
         margin-top: 8px !important;
         border: 1px solid #eee !important;
     }

     /* 4. 标题文字大小优化 */
     .moment-card .card-title-text,
     .city-overview-card .card-title-text {
         font-size: 16px !important;
         /* 手机双列比较窄，字号微调 */
         line-height: 1.3 !important;
         font-weight: 900 !important;
         margin-bottom: 6px !important;
         white-space: normal !important;
         /* 允许换行 */
     }

     /* 5. 时光轴的日期标题：必须横跨两列 */
     .timeline-section-header {
         column-span: all !important;
         /* 【核心】让标题霸占整行 */
         -webkit-column-span: all !important;

         display: flex !important;
         width: 100% !important;
         margin-bottom: 20px !important;
         padding-top: 10px !important;
         border-bottom: 1px solid #eee !important;
     }
 }

 /* ==========================================================================
【手机端外观修正】扁平化卡片 (去除默认阴影)
逻辑：默认状态下只保留黑边框，去除立体阴影，仅在按下时给予反馈。
========================================================================== */

 @media (max-width: 768px) {

     /* 1. 针对所有模式下的卡片：默认无阴影 */
     .moment-card,
     .city-overview-card,
     #memory-panel.timeline-mode .moment-card {
         box-shadow: none !important;
         /* 【核心】去掉 4px 4px 的硬阴影 */

         /* 保持边框和圆角，维持线框风格 */
         border: 2px solid #1a1a1a !important;
         border-radius: 16px !important;
         background: #fff !important;

         /* 确保排版不受影响 */
         transition: transform 0.1s, background 0.1s !important;
     }

     /* 2. 交互反馈 (按下手指时) */
     /* 既然不交互没阴影，按下时我们给一个轻微的“下沉”或“变灰”效果代替阴影，手感更好 */
     .moment-card:active,
     .city-overview-card:active,
     #memory-panel.timeline-mode .moment-card:active {
         transform: scale(0.98) !important;
         /* 轻微缩小，模拟按压感 */
         background-color: #f5f5f5 !important;
         /* 背景微灰 */
         box-shadow: none !important;
         /* 依然保持无阴影 */
     }
 }

 /* ==========================================================================
【手机端修复】详情页回归“居中卡片”样式
覆盖之前的“底部抽屉”逻辑，让弹窗像电脑端一样悬浮在屏幕中间
========================================================================== */

 @media (max-width: 768px) {

     /* 1. 定位重置：从底部固定 -> 居中绝对定位 */
     #detail-overlay .modal-content-box {
         position: absolute !important;
         top: 50% !important;
         left: 50% !important;
         transform: translate(-50%, -50%) !important;
         /* 核心：物理居中 */

         /* 清除抽屉模式的残留属性 */
         bottom: auto !important;
         margin: 0 !important;

         /* 2. 尺寸调整：看起来更像一张卡片 */
         width: 85% !important;
         /* 宽度适中，不贴边 */
         max-width: 360px !important;
         /* 限制最大宽度 */
         height: auto !important;
         /* 高度随内容自动伸缩 */
         max-height: 75vh !important;
         /* 防止卡片太长超出屏幕 */

         /* 3. 外观优化：全圆角 + 阴影 */
         border-radius: 24px !important;
         /* 恢复四周圆角 */
         border: 2px solid #1a1a1a !important;
         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
         /* 加深阴影提升悬浮感 */
         background: #fff !important;
     }

     /* 4. 内容间距优化：去掉底部为了避让手机Home条留的大白边 */
     #detail-content {
         padding: 30px 25px 40px 25px !important;
         /* 底部只留 40px 即可 */
     }

     /* 5. (可选) 确保底部操作按钮（编辑/删除）依然可见 */
     #detail-external-actions {
         bottom: 30px !important;
         z-index: 100 !important;
     }
 }

 /* ==========================================================================
【UI 微调补丁】叉号圆底背景 + 手机卡片位置上移
1. 给详情页和新增页的关闭按钮统一添加半透明圆底背景，图标改为白色。
2. 将手机端居中的回忆卡片向上提一点，视觉更平衡。
========================================================================== */

 /* ---- 1. 关闭按钮通用样式优化 (圆底+白标) ---- */
 /* 同时作用于“回忆详情页”和“新增回忆页”的叉号按钮 */

 /* 鼠标悬停或手指按下时的反馈 */

 /* 【核心】强制内部的 SVG 叉号变成白色 */


 /* ---- 2. 手机端回忆卡片位置微调 (向上一点) ---- */
 @media (max-width: 768px) {
     #detail-overlay .modal-content-box {
         /* 修改垂直定位基准 */
         /* 之前是 50% (正中)，现在改为 45% (偏上) */
         top: 45% !important;

         /* 保持水平居中和自身的位移抵消不可少 */
         left: 50% !important;
         transform: translate(-50%, -50%) !important;

         /* 确保其他样式（如圆角、阴影等）依然生效，这里不需要重复写 */
     }
 }

 /* ==========================================================================
    【修复】让详情页右上角的叉号背景常驻 (极简 UI 统一风格)
    ========================================================================== */
 #detail-overlay .close-modal {
     background-color: var(--sketch-black, #1a1a1a) !important;
     /* 采用你 UI 里的深色主题色 */
     backdrop-filter: none !important;
     /* 彻底移除磨砂效果 */
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
     /* 干净、利落的阴影 */
     opacity: 0.9 !important;
     /* 极其轻微的透明度，避免太死板 */
 }

 /* 叉号保持纯白，形成极致的黑白对比 */
 #detail-overlay .close-modal::before,
 #detail-overlay .close-modal::after {
     background-color: #ffffff !important;
 }

 /* 鼠标悬停/手指按下时的交互：颜色变实，轻微放大 */
 #detail-overlay .close-modal:hover,
 #detail-overlay .close-modal:active {
     opacity: 1 !important;
     background-color: #aaaaaa !important;
     transform: scale(1.05) !important;
 }

 /* 详情页标签的可点击交互效果 */
 .detail-clickable-tag {
     cursor: pointer;
     transition: transform 0.2s ease, opacity 0.2s ease !important;
 }

 .detail-clickable-tag:hover {
     transform: scale(1.08);
     /* 鼠标悬停时轻轻放大 */
     opacity: 0.8;
 }

 /* ==========================================================================
    【修复】让详情页右上角的叉号背景常驻 (极简灰色底)
    ========================================================================== */
 #detail-overlay .close-modal {
     background-color: var(--sketch-gray, #bbbbbb) !important;
     /* 换成优雅的高级灰 */
     backdrop-filter: none !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
     /* 阴影稍微调柔和一点 */
     opacity: 0.9 !important;
 }

 /* 叉号保持纯白，在灰底上依然清晰干练 */
 #detail-overlay .close-modal::before,
 #detail-overlay .close-modal::after {
     background-color: #ffffff !important;
 }

 /* 鼠标悬停/手指按下时的交互：颜色变成深灰，轻微放大 */
 #detail-overlay .close-modal:hover,
 #detail-overlay .close-modal:active {
     opacity: 1 !important;
     background-color: #666666 !important;
     /* 交互时颜色稍微加深 */
     transform: scale(1.05) !important;
 }

 /* --- 电脑端筛选框宽度专项加宽 --- */
 /* ==========================================================================
【PC端筛选框宽度修复】针对 #filter-panel-desktop 精准加宽
========================================================================== */
 @media (min-width: 769px) {

     /* 1. 调整外层容器宽度 */
     #filter-panel-desktop {
         width: 500px !important;
         /* 宽度从 280px 增加到 500px，你可以按需调大 */
         max-height: 70vh !important;
         /* 稍微增加高度限制 */
         padding: 30px !important;
         /* 增加留白 */
     }

     /* 2. 优化内部标签容器：让标签横向铺开，不再只是两列 */
     #filter-tags-container-desktop {
         display: flex !important;
         flex-wrap: wrap !important;
         gap: 10px !important;
         /* 标签之间的间距 */
     }

     /* 3. 统一调整标签在 PC 端的尺寸 */
     #filter-tags-container-desktop .tag-capsule {
         padding: 8px 16px !important;
         font-size: 13px !important;
     }
 }

 /* ==========================================================================
【全局视觉增强】统一所有瞬间标题为极粗体 (Font Weight 900)
========================================================================== */

 /* 1. 列表卡片标题 (包括城市预览卡片和回忆卡片) */
 .moment-card .card-title-text,
 .city-overview-card .card-title-text {
     font-weight: 900 !important;
     /* 采用极致加粗 */
     -webkit-font-smoothing: antialiased;
     /* 优化字体渲染 */
 }

 /* 2. 时光轴模式下的标题 (日期数字、城市名) */
 .t-num,
 .timeline-city-text {
     font-weight: 900 !important;
     /* 确保时间线逻辑清晰醒目 */
 }

 /* 3. 面板顶部及详情页大标题 */
 #display-city-name,
 #detail-content-title {
     font-weight: 900 !important;
     /* 强化核心信息层级 */
     letter-spacing: -0.5px;
     /* 标题加粗后稍微收紧字间距更有质感 */
 }

 /* 4. 弹窗内的页签或分类标题 */
 .archive-tabs .archive-tab.active {
     font-weight: 900 !important;
     /* 选中态加粗 */
 }

 /* ==========================================================================
【视觉优化】详情页叉号淡化 & 避让标题逻辑
========================================================================== */

 /* 1. 让叉号背景变淡，并切换图标颜色以确保清晰 */
 #detail-overlay .close-modal {
     background-color: rgb(255, 255, 255) !important;
     /* 极淡的灰色背景 */
     box-shadow: none !important;
     /* 去掉阴影，减少厚重感 */
     border: 1px solid rgba(0, 0, 0, 0.05) !important;
 }

 /* 2. 因为背景变淡了，叉号线条需要改回深色，否则看不见 */
 #detail-overlay .close-modal::before,
 #detail-overlay .close-modal::after {
     background-color: #1a1a1a !important;
     width: 14px !important;
     /* 稍微缩小一点线条，显得更精致 */
 }

 /* 3. 核心修复：解决手机端重叠问题 */
 @media (max-width: 768px) {

     /* 增加顶部内边距，给按钮留出绝对安全的“护城河” */
     #detail-content {
         padding-top: 85px !important;
         /* 从 70px 增加到 85px */
     }

     /* 限制标题的宽度，强制它在按钮之前换行 */
     #detail-content-title {
         padding-right: 50px !important;
         /* 右侧留出 50px 的空白区，专门避开按钮 */
         font-size: 24px !important;
         /* 稍微缩小一点点手机端的标题字号，防止由于太粗导致排版过满 */
     }
 }

 /* 4. 电脑端同步优化 */
 @media (min-width: 769px) {
     #detail-content-title {
         padding-right: 60px !important;
         /* 电脑端也留出避让空间 */
     }
 }

 /* ==========================================================================
【视觉优化】详情页叉号样式增强 (不透明背景 + 悬停变白)
========================================================================== */

 /* 1. 默认状态：背景稍微加深，不那么透明 */
 #detail-overlay .close-modal {
     background-color: rgb(255, 255, 255) !important;
     /* 透明度从 0.05 提高到 0.15 */
     transition: all 0.2s ease !important;
     /* 增加过渡动画，让变色更顺滑 */
 }

 /* 2. 默认状态下的叉号线条 (深色) */
 #detail-overlay .close-modal::before,
 #detail-overlay .close-modal::after {
     background-color: #1a1a1a !important;
     transition: background-color 0.2s ease !important;
 }

 /* 3. 悬停状态 (Hover)：背景变深，叉号变纯白 */
 #detail-overlay .close-modal:hover {
     background-color: rgba(0, 0, 0, 0.7) !important;
     /* 悬停时背景变为深色半透明 */
     transform: scale(1.1) rotate(90deg) !important;
     /* 悬停时轻微放大并旋转，增加交互感 */
 }

 #detail-overlay .close-modal:hover::before,
 #detail-overlay .close-modal:hover::after {
     background-color: #ffffff !important;
     /* 【核心修改】悬停时叉号线条变为纯白 */
 }

 /* 4. 手机端适配：由于手机没有鼠标悬停，我们增加一个 :active 反馈 */
 @media (max-width: 768px) {
     #detail-overlay .close-modal:active {
         background-color: rgba(0, 0, 0, 0.8) !important;
     }

     #detail-overlay .close-modal:active::before,
     #detail-overlay .close-modal:active::after {
         background-color: #ffffff !important;
     }
 }

 /* ==========================================================================
【功能增强】详情页导航按钮 PC 版 (大号，纯白，外悬，对齐)
========================================================================== */
 /* ==========================================================================
【PC端导航按钮】复刻首页底部按钮样式 (52px, 2px黑边, 纯白)
========================================================================== */
 .nav-btn-detail {
     position: relative;
     top: auto;
     transform: none;
     width: 52px !important;
     height: 52px !important;
     background-color: #ffffff !important;
     border: 2px solid #1a1a1a !important;
     border-radius: 50% !important;
     cursor: pointer;
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 11000 !important;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
     color: #1a1a1a !important;
     transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
     padding: 0 !important;
     flex-shrink: 0;
 }

 /* 悬停动效：和底部按钮一致，变黑底白字 */
 .nav-btn-detail:hover {
     background-color: #1a1a1a !important;
     color: #ffffff !important;
     transform: scale(1.1);
 }

 /* 电脑端：按钮紧贴卡片两侧，gap 由 overlay flex 控制 */
 @media (min-width: 769px) {
     #nav-prev-detail {
         margin-right: 20px;
     }

     #nav-next-detail {
         margin-left: 20px;
     }
 }

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

     /* 手机端依然隐藏物理按钮，靠滑动 */
 }

 /* --- 1. 详情页标题：增加下边距，拉开与标签/日期的距离 --- */
 #detail-content-title {
     font-size: 32px !important;
     line-height: 1.2 !important;
     font-weight: 900 !important;
     margin-bottom: 25px !important;
     /* ✅ 从 0 增加到 25px，拉开间距 */
     letter-spacing: -0.5px !important;
     word-wrap: break-word !important;
 }

 /* --- 2. 导航按钮：随 flex 流动，自动贴合卡片两侧 --- */
 .nav-btn-detail {
     position: relative !important;
     top: auto !important;
     transform: none !important;
     width: 52px !important;
     height: 52px !important;
     background-color: #ffffff !important;
     border: 2px solid #1a1a1a !important;
     border-radius: 50% !important;
     cursor: pointer;
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 12000 !important;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
     color: #1a1a1a !important;
     transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
     padding: 0 !important;
     flex-shrink: 0 !important;
     left: auto !important;
     right: auto !important;
 }

 .nav-btn-detail:hover {
     background-color: #1a1a1a !important;
     color: #ffffff !important;
     transform: scale(1.15) !important;
 }

 /* 💻 电脑端：margin 将按钮紧贴卡片两侧，随卡片宽度自适应 */
 @media (min-width: 769px) {
     #nav-prev-detail {
         margin-right: 20px !important;
     }

     #nav-next-detail {
         margin-left: 20px !important;
     }
 }

 /* --- 23. 高级图片灯箱 Advanced Photo Lightbox --- */

 .lightbox-img {
     max-width: 90%;
     max-height: 90%;
     object-fit: contain;
     border-radius: 8px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
     user-select: none;
     transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
 }

 /* ✅ 【核心修复】：显著增加偏移量，让按钮从屏幕边缘向中心靠拢 */

 /* 从 30px 增加到 120px */

 /* 从 30px 增加到 120px */