/* 回忆地图 · 样式 — 基础样式：Google 字体、全局变量、首页、地图、面板、弹窗等核心样式 */
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;600;800;900&display=swap');

 :root {
     --sketch-black: #1c1c1e;
     --sketch-gray: #8e8e93;
     --sketch-bg: #f7f7f7;
     --sketch-red: #ff4444;
     --border-width: 1px;
     /* Apple system colors */
     --apple-label: #1c1c1e;
     --apple-secondary: #3c3c43;
     --apple-tertiary: #8e8e93;
     --apple-separator: #d1d1d6;
     --apple-fill: #e5e5ea;
     --apple-bg: #f7f7f7;
     --apple-white: #ffffff;
 }

 /* --- V20.0 最终版：时光轴专用原生强力滚动条 --- */

 /* 1. 全局默认：隐藏所有滚动条 (保持界面干净) */
 ::-webkit-scrollbar {
     width: 0px !important;
     height: 0px !important;
     display: none !important;
     background: transparent;
 }

 /* 2. 【关键】只在 timeline-mode 下强制显示滚动条 */
 #memory-panel.timeline-mode::-webkit-scrollbar {
     display: block !important;
     width: 8px !important;
     /* 稍微粗一点，方便手指按住 */
 }

 /* 滚动条轨道 (透明) */
 #memory-panel.timeline-mode::-webkit-scrollbar-track {
     background: transparent !important;
 }

 /* 滚动条滑块 (纯黑、圆角) */
 #memory-panel.timeline-mode::-webkit-scrollbar-thumb {
     background-color: #1a1a1a !important;
     /* 深黑色 */
     border-radius: 10px !important;
     border: 2px solid transparent;
     /* 增加一点透明边距，让它不贴边 */
     background-clip: content-box;
 }

 /* 滑块按住/悬停状态 */
 #memory-panel.timeline-mode::-webkit-scrollbar-thumb:hover,
 #memory-panel.timeline-mode::-webkit-scrollbar-thumb:active {
     background-color: #000000 !important;
     /* 按住变纯黑 */
     border-width: 1px !important;
     /* 变大一点 */
 }

 /* 3. 确保面板本身的滚动属性正确 */
 #memory-panel {
     overflow-y: auto !important;
     -webkit-overflow-scrolling: touch;
     /* iOS 惯性滚动 */
     /* 避免 iOS 默认覆盖原生滚动条样式 */
     scrollbar-color: #1a1a1a transparent;
     scrollbar-width: thin;
 }

 /* 非时光轴模式下，隐藏 Firefox 滚动条 */
 #memory-panel:not(.timeline-mode) {
     scrollbar-width: none !important;
 }

 body {
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: var(--sketch-bg);
     font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
     color: var(--sketch-black);
     -webkit-tap-highlight-color: transparent;
     -webkit-font-smoothing: antialiased;
 }

 /* 专注模式：隐藏同步状态条 */

 #main-container {
     display: flex;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     position: relative;
 }

 /* 地图容器 */
 #chartdiv {
     width: 100%;
     height: 100%;
     transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     background: #e9e9ec;
     flex-shrink: 0;
     position: relative;
     touch-action: none;
     will-change: width;
 }

 /* 详情面板 */
 #memory-panel {
     width: 0;
     height: 100%;
     background: rgba(255, 255, 255, 0.98);
     border-left: 0px solid var(--sketch-black);
     overflow-y: auto;
     transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     visibility: hidden;
     backdrop-filter: blur(10px);
     position: relative;
     z-index: 10;
     will-change: width;
 }

 /* 面板头部样式提取 */
 .panel-header-container {
     padding: 72px 40px 20px 40px;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;

     /* === 【新增核心代码】让头部固定在顶部 === */
     position: sticky;
     top: 0;
     z-index: 100;
     /* 确保它在回忆卡片之上 */
     background: rgba(255, 255, 255, 0.98);
     /* 给头部加个背景色，防止内容重叠 */
     backdrop-filter: blur(10px);
     /* 增加磨砂效果，更有质感 */
     box-sizing: border-box;
 }

 .waterfall-container {
     padding: 10px 40px 60px 40px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-auto-flow: row;
     align-items: start;
     gap: 12px;
 }

 /* 电脑端布局 (大于768px) */
 @media (min-width: 769px) {
     #main-container.panel-open #chartdiv {
         width: 33.33vw;
     }

     #main-container.panel-open #memory-panel {
         width: 66.67vw;
         border-left: var(--border-width) solid var(--sketch-black);
         visibility: visible;
     }

     .waterfall-container {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 #loader {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #f7f7f7;
     z-index: 5000;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     font-family: 'Roboto Mono', monospace;
     font-size: 12px;
     letter-spacing: 2px;
     transition: opacity 0.5s ease;
 }
 html.dark-mode #loader {
     background: #0a0a0a !important;
     color: #f2f2f7 !important;
 }

 .loader-text::after {
     content: "_";
     animation: blink 1s infinite;
 }

 @keyframes blink {
     50% {
         opacity: 0;
     }
 }

 /* ═══ 手机端欢迎屏 ═══ */


 #toast {
     position: fixed;
     top: 30px;
     left: 50%;
     transform: translateX(-50%) translateY(-20px);
     background: rgba(255, 255, 255, 0.96);
     color: #1c1c1e;
     padding: 12px 28px;
     font-size: 13px;
     font-weight: 600;
     z-index: 10000;
     display: none;
     border-radius: 50px;
     border: 1px solid rgba(0, 0, 0, 0.09);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.05);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     opacity: 0;
     transition: opacity 0.3s, transform 0.3s;
 }

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

 .status-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #ccc;
     display: inline-block;
     flex-shrink: 0;
 }

 @keyframes pulse-green {
     0% {
         transform: scale(0.95);
         box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
     }

     70% {
         transform: scale(1);
         box-shadow: 0 0 0 6px rgba(46, 204, 113, 0);
     }

     100% {
         transform: scale(0.95);
         box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
     }
 }

 #home-actions {
     position: absolute;
     bottom: 40px;
     left: 30px;
     z-index: 100;
     display: flex;
     flex-direction: column;
     gap: 15px;
     pointer-events: none;
     transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }

 #home-actions>* {
     pointer-events: auto;
 }

 #home-actions.actions-hidden {
     opacity: 0;
     transform: translateY(20px);
     pointer-events: none !important;
 }

 #home-actions.actions-hidden>* {
     pointer-events: none !important;
 }

 .action-btn-round {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.88);
     border: 1px solid rgba(0, 0, 0, 0.10);
     color: var(--sketch-black);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     padding: 0;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .action-btn-round:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 0.97);
 }

 .action-btn-round.active {
     background: var(--sketch-black);
     color: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
     border-color: transparent;
 }

 @keyframes spinDice {
     0% {
         transform: rotate(0deg) scale(1);
     }

     50% {
         transform: rotate(180deg) scale(1.15);
     }

     100% {
         transform: rotate(360deg) scale(1);
     }
 }

 .btn-spinning svg {
     animation: spinDice 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .panel-close-btn {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     cursor: pointer;
     border-radius: 50%;
     background: transparent;
     transition: all 0.2s;
     color: #999;
     font-weight: 700;
     border: var(--border-width) solid transparent;
 }

 .panel-close-btn:hover {
     background: #f0f0f0;
     color: #000;
     transform: rotate(90deg);
 }

 input,
 textarea {
     width: 100%;
     padding: 16px;
     border: var(--border-width) solid #e0e0e0 !important;
     font-family: inherit;
     font-size: 16px;
     background: #fcfcfc !important;
     border-radius: 16px !important;
     outline: none;
     margin-top: 5px;
     box-sizing: border-box;
     transition: all 0.3s;
     color: var(--sketch-black);
 }

 input:focus,
 textarea:focus {
     border-color: var(--sketch-black) !important;
     background: #fff !important;
 }

 input::placeholder,
 textarea::placeholder {
     color: #ccc;
 }

 input[type="date"] {
     font-family: 'Roboto Mono', monospace;
     text-transform: uppercase;
 }

 .overlay-base {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.6);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     z-index: 3000;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 20px;
     box-sizing: border-box;
     flex-direction: column;
     gap: 20px;
     opacity: 0;
     transition: opacity 0.3s;
 }

 .modal-content-box {
     width: 100%;
     max-width: 520px;
     max-height: 85vh;
     background: rgba(255, 255, 255, 0.96);
     border: 1px solid rgba(0, 0, 0, 0.08);
     padding: 45px;
     box-sizing: border-box;
     position: relative;
     overflow-y: auto;
     box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
     transform: translateY(20px);
     transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
 }

 .overlay-base.active {
     opacity: 1;
     display: flex;
 }

 .overlay-base.active .modal-content-box {
     transform: translateY(0);
 }

 @keyframes detailFadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

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

 #detail-external-actions {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 3010;
     pointer-events: auto;
 }

 .close-modal {
     position: absolute;
     top: 20px;
     right: 20px;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     border-radius: 50%;
     transition: background 0.2s;
     font-size: 18px;
     color: #aaa;
 }

 .close-modal:hover {
     background: #f0f0f0;
     color: #000;
 }

 .moment-card {
     break-inside: avoid;
     border: var(--border-width) solid #eee;
     padding: 24px;
     margin-bottom: 12px;
     background: #fff;
     border-radius: 20px;
     overflow: hidden;
     cursor: pointer;
     opacity: 0;
     animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
     position: relative;
     /* 精确指定过渡属性，避免 all 导致每次变化都触发全量过渡计算 */
     transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     /* 隔离卡片的布局和样式，减少互相影响 */
     contain: layout style;
 }

 .moment-card:hover {
     border-color: var(--sketch-black);
     transform: translateY(-4px);
     box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.08);
 }

 /* 手机端禁用 hover 动画，节省GPU合成层 */
 @media (hover: none) {
     .moment-card:hover {
         transform: none;
         box-shadow: none;
     }
 }

 /* 新回忆定位高亮：优雅的边框光晕，不闪烁 */
 @keyframes newMomentHighlight {
     0% {
         box-shadow: 0 0 0 0 rgba(26, 26, 26, 0);
         border-color: #eee;
     }

     15% {
         box-shadow: 0 0 0 6px rgba(26, 26, 26, 0.18);
         border-color: var(--sketch-black);
     }

     60% {
         box-shadow: 0 0 0 6px rgba(26, 26, 26, 0.10);
         border-color: var(--sketch-black);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(26, 26, 26, 0);
         border-color: #eee;
     }
 }

 .moment-card img {
     width: 100%;
     margin-top: 16px;
     border: 1px solid #eee;
     display: block;
 }

 /* 渐进展开容器内的图片不需要额外 margin 和 border */
 .moment-card .moment-img-wrap-inner img {
     margin-top: 0 !important;
     border: none !important;
 }

 #city-search-results {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     max-height: 200px;
     overflow-y: auto;
     background: #fff;
     border: var(--border-width) solid var(--sketch-black);
     border-top: none;
     z-index: 3100;
     display: none;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .search-item {
     padding: 16px 20px;
     cursor: pointer;
     font-size: 16px;
     border-bottom: 1px solid #f5f5f5;
     transition: background 0.2s;
 }

 .search-item:hover {
     background: #f9f9f9;
     padding-left: 24px;
 }

 .panel-func-btn {
     width: 36px;
     height: 36px;
     border: var(--border-width) solid #eee;
     background: transparent;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     color: #999;
     border-radius: 50%;
 }

 .panel-func-btn:hover {
     border-color: #000;
     color: #000;
     background: #fff;
 }

 .img-input-container {
     display: flex;
     gap: 12px;
     align-items: center;
     margin-bottom: 12px;
     background: #f9f9f9;
     padding: 8px;
     border: 1px dashed #ddd;
     border-radius: 6px;
 }

 .img-preview-mini {
     width: 48px;
     height: 48px;
     border-radius: 4px;
     object-fit: cover;
     flex-shrink: 0;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 /* 增大标签尺寸以便选择 */
 .tag-capsule {
     display: inline-flex;
     align-items: center;
     padding: 10px 18px;
     border-radius: 100px;
     font-size: 14px;
     font-weight: 700;
     color: #000;
     background: #fff;
     margin-right: 8px;
     margin-bottom: 8px;
     white-space: nowrap;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
     border: 1.5px solid transparent;
     transition: all 0.2s;
     cursor: pointer;
 }

 .tag-capsule.deletable {
     cursor: pointer;
 }

 .tag-capsule.deletable:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
 }

 .tag-capsule.active {
     color: inherit !important;
     background-color: transparent !important;
 }

 #current-tags-area:empty {
     display: none !important;
 }

 .color-dot {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     cursor: pointer;
     border: 2.5px solid transparent;
     outline: none;
     transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
     position: relative;
     overflow: visible;
     flex-shrink: 0;
     box-shadow: none;
 }

 .color-dot:hover {
     transform: scale(1.12);
 }

 /* 选中：放大 + 内嵌白色边框（iOS 选色器效果），无黑色描边 */
 .color-dot.selected {
     transform: scale(1.22);
     border: 2.5px solid #ffffff;
     box-shadow: 0 0 0 2.5px var(--dot-color, #888), 0 2px 8px rgba(0, 0, 0, 0.18);
     outline: none;
 }

 /* 桌面端筛选面板样式 (Popover) */
 #filter-panel-desktop {
     position: absolute;
     bottom: 40px;
     left: 100px;
     background: #fff;
     border: var(--border-width) solid var(--sketch-black);
     padding: 25px;
     z-index: 200;
     width: 280px;
     display: none;
     max-height: 60vh;
     overflow-y: auto;
     box-shadow: 8px 8px 0 rgba(0, 0, 0, 1);
     animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 @keyframes popIn {
     from {
         opacity: 0;
         transform: scale(0.9) translateY(10px);
     }

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

 .filter-header {
     font-size: 12px;
     font-weight: 900;
     letter-spacing: 1px;
     color: #999;
     margin-bottom: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-transform: uppercase;
 }

 @keyframes dice-spin {
     0% {
         transform: rotate(0deg) scale(1);
     }

     30% {
         transform: rotate(180deg) scale(1.15);
     }

     70% {
         transform: rotate(540deg) scale(1.1);
     }

     100% {
         transform: rotate(720deg) scale(1);
     }
 }

 .dice-spinning svg {
     animation: dice-spin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 label {
     font-size: 11px;
     font-weight: 700;
     color: #666;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     display: block;
     margin-bottom: 6px;
 }

 button#btn-save-main,
 button#confirm-execute-btn {
     letter-spacing: 1px;
     text-transform: uppercase;
     border-radius: 0;
     transition: all 0.2s;
 }

 button#btn-save-main:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .city-list-group {
     margin-bottom: 20px;
 }

 .city-list-header {
     font-size: 14px;
     font-weight: 900;
     margin-bottom: 10px;
     border-bottom: 2px solid #000;
     padding-bottom: 5px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .city-list-item {
     display: flex;
     align-items: center;
     padding: 12px;
     border-bottom: 1px solid #eee;
     cursor: pointer;
     transition: background 0.2s;
 }

 .city-list-item:hover {
     background: #f9f9f9;
 }

 .checkbox-wrapper {
     display: none;
     margin-right: 12px;
 }

 .export-mode .checkbox-wrapper {
     display: flex;
     align-items: center;
 }

 .city-check {
     width: 18px;
     height: 18px;
     cursor: pointer;
     accent-color: #000;
 }

 /* 回忆档案 Tab 样式 */
 .archive-tabs {
     display: flex;
     gap: 20px;
     align-items: baseline;
 }

 .archive-tab {
     font-size: 16px;
     font-weight: 700;
     color: #999;
     cursor: pointer;
     transition: all 0.2s;
     position: relative;
 }

 .archive-tab.active {
     font-size: 20px;
     font-weight: 900;
     color: #000;
 }

 .archive-tab.active::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 100%;
     height: 3px;
     background: #000;
 }

 /* 手机端样式重构 */
 @media (max-width: 768px) {
     #main-container {
         display: block;
     }

     #chartdiv {
         width: 100% !important;
         height: 100% !important;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 1;
     }

     #memory-panel {
         width: 100% !important;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 10;
         border-left: none;
         transform: translateX(100%);
         visibility: hidden;
         transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     }

     #main-container.panel-open #memory-panel {
         transform: translateX(0);
         visibility: visible;
     }

     @media (max-width: 768px) {

         /* ... 其他样式 ... */
         .panel-header-container {
             padding: 70px 25px 15px 25px !important;
             /* 手机端顶部稍微留白，避开状态栏 */
         }
     }

     .waterfall-container {
         padding: 10px 20px 120px 20px !important;
         column-gap: 15px !important;
     }

     /* 手机端弹窗 - 底部抽屉模式 */
     .modal-content-box {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         max-width: 100%;
         max-height: 90vh;
         border-radius: 24px 24px 0 0;
         border-bottom: none;
         padding: 30px 25px 80px 25px;
         transform: translateY(100%);
         border-radius: 24px;
     }

     .overlay-base.active .modal-content-box {
         transform: translateY(0);
     }

     #detail-content {
         padding: 30px 25px 120px 25px !important;
     }

     /* 按钮组底部安全区适配 */
     #home-actions {
         bottom: 30px;
         left: 20px;
         gap: 12px;
         padding-bottom: env(safe-area-inset-bottom);
     }

     @keyframes mobileMenuPop {
         0% {
             opacity: 0;
             transform: translateY(15px) scale(0.5);
         }

         60% {
             opacity: 1;
             transform: translateY(-5px) scale(1.05);
         }

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

 /* --- V8.0 最终修复：稳固叉号 (无旋转) --- */
 .close-modal {
     position: absolute !important;
     top: 20px !important;
     right: 20px !important;
     width: 32px !important;
     height: 32px !important;
     border-radius: 50% !important;
     cursor: pointer !important;
     background: transparent !important;
     transition: background 0.2s !important;

     /* 强制居中布局 */
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;

     /* 隐藏之前的文字符号，防止干扰 */
     font-size: 0 !important;

     /* 【关键】取消任何旋转，保持静止 */
     transform: none !important;
 }

 /* 使用伪元素画第一条线 */
 .close-modal::before {
     content: '' !important;
     position: absolute !important;
     width: 16px !important;
     height: 2px !important;
     background-color: #aaa !important;
     transform: rotate(45deg) !important;
     /* 固定45度 */
     border-radius: 2px !important;
 }

 /* 使用伪元素画第二条线 */
 .close-modal::after {
     content: '' !important;
     position: absolute !important;
     width: 16px !important;
     height: 2px !important;
     background-color: #aaa !important;
     transform: rotate(-45deg) !important;
     /* 固定-45度 */
     border-radius: 2px !important;
 }

 /* 悬停效果：仅背景变灰，线条变黑，不旋转 */
 .close-modal:hover {
     background: #f5f5f5 !important;
 }

 .close-modal:hover::before,
 .close-modal:hover::after {
     background-color: #000 !important;
 }

 /* --- V9.0 体验升级补丁 --- */

 /* 1. 城市详情页卡片样式升级 (字体变大) */
 .moment-card .card-title-text {
     font-size: 22px !important;
     /* 标题加大 */
     margin-bottom: 10px !important;
     letter-spacing: -0.5px;
 }

 .moment-card .tag-capsule {
     font-size: 12px !important;
     /* 标签加大 */
     padding: 6px 12px !important;
 }

 .moment-card-date {
     font-size: 14px !important;
     /* 日期加大 */
     font-weight: 700 !important;
     color: #888 !important;
     margin-bottom: 8px !important;
 }

 /* 2. 时光轴：日期隔断 (Section Header) */
 .timeline-section-header {
     column-span: all;
     /* 让它横跨两列 */
     width: 100%;
     padding: 40px 0 20px 0;
     margin-bottom: 20px;
     border-bottom: 2px solid #f0f0f0;
     display: flex;
     align-items: baseline;
     gap: 12px;
     break-inside: avoid;
     animation: fadeInUp 0.5s ease;
 }

 /* 年份点特别样式 */

 /* --- V10.0 终极修复：禁止所有叉号旋转 + 统一样式 --- */

 /* 1. 同时选中“弹窗关闭钮”和“侧边栏关闭钮” */
 .close-modal,
 .panel-close-btn {
     /* 强制停止旋转 */
     transform: none !important;
     transition: background 0.2s !important;
     /* 移除 transform 动画 */

     /* 统一样式：绝对居中 */
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;

     /* 隐藏原来的文字符号 */
     font-size: 0 !important;
     color: transparent !important;

     /* 确保大小一致 */
     width: 36px !important;
     height: 36px !important;
     border-radius: 50% !important;
     background: transparent !important;
     cursor: pointer !important;
     position: absolute !important;
     /* 保持原有定位 */
 }

 /* 侧边栏按钮的特殊定位修正（防止跑偏） */
 .panel-close-btn {
     position: relative !important;
     /* 侧边栏里它是相对定位 */
     border: 2px solid transparent !important;
     /* 保持占位 */
 }

 /* 2. 用伪元素画出绝对居中的“十字线” */
 .close-modal::before,
 .close-modal::after,
 .panel-close-btn::before,
 .panel-close-btn::after {
     content: '' !important;
     position: absolute !important;
     top: 50% !important;
     left: 50% !important;
     width: 16px !important;
     height: 2px !important;
     background-color: #aaa !important;
     border-radius: 2px !important;
 }

 /* 第一根线：顺时针 45 度 */
 .close-modal::before,
 .panel-close-btn::before {
     transform: translate(-50%, -50%) rotate(45deg) !important;
 }

 /* 第二根线：逆时针 45 度 */
 .close-modal::after,
 .panel-close-btn::after {
     transform: translate(-50%, -50%) rotate(-45deg) !important;
 }

 /* 3. 悬停效果：只变色，不旋转 */
 .close-modal:hover,
 .panel-close-btn:hover {
     background-color: #f5f5f5 !important;
     transform: none !important;
 }

 .close-modal:hover::before,
 .close-modal:hover::after,
 .panel-close-btn:hover::before,
 .panel-close-btn:hover::after {
     background-color: #000 !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;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
     pointer-events: none !important;
     white-space: nowrap !important;
     width: max-content !important;
 }

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