/* 回忆地图 · 样式 — Apple 风格主题：全局变量、字体与组件覆盖（含夜间模式） */
 @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap');

 /* ─── 全局变量重置 ─── */
 :root {
     --apple-bg: #f2f2f7;
     --apple-bg2: #ffffff;
     --apple-surface: rgba(255, 255, 255, 0.72);
     --apple-surface-thick: rgba(255, 255, 255, 0.88);
     --apple-border: rgba(0, 0, 0, 0.08);
     --apple-border-med: rgba(0, 0, 0, 0.12);
     --apple-text: #1c1c1e;
     --apple-text2: #3a3a3c;
     --apple-text3: #636366;
     --apple-text4: #aeaeb2;
     --apple-blue: #007aff;
     --apple-blue-light: rgba(0, 122, 255, 0.12);
     --apple-red: #ff3b30;
     --apple-green: #34c759;
     --apple-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
     --apple-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10), 0 12px 40px rgba(0, 0, 0, 0.08);
     --apple-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12), 0 24px 64px rgba(0, 0, 0, 0.10);
     --apple-radius-sm: 10px;
     --apple-radius: 16px;
     --apple-radius-lg: 22px;
     --apple-radius-xl: 28px;
     --apple-blur: blur(24px) saturate(180%);
     --apple-blur-sm: blur(12px) saturate(160%);
     --sketch-black: #1c1c1e;
     --border-width: 1px;
 }

 /* ─── 全局字体 & 背景 ─── */
 body {
     font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Nunito Sans", "PingFang SC", "Helvetica Neue", sans-serif !important;
     background: var(--apple-bg) !important;
     color: var(--apple-text) !important;
     -webkit-font-smoothing: antialiased !important;
 }

 /* 地图背景 */
 #chartdiv {
     background: var(--apple-bg) !important;
 }

 /* ─── 加载页 ─── */
 #loader {
     background: var(--apple-bg) !important;
     font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
     color: var(--apple-text3) !important;
     letter-spacing: 0.5px !important;
 }

 .loader-text {
     font-weight: 500 !important;
 }

 /* ─── 同步状态条 ─── */

 /* ─── 详情面板 ─── */
 #memory-panel {
     background: rgba(242, 242, 247, 0.92) !important;
     backdrop-filter: var(--apple-blur) !important;
     -webkit-backdrop-filter: var(--apple-blur) !important;
     border-left: 1px solid var(--apple-border) !important;
 }

 /* 面板头部 */
 .panel-header-container {
     background: rgba(242, 242, 247, 0.85) !important;
     backdrop-filter: var(--apple-blur) !important;
     -webkit-backdrop-filter: var(--apple-blur) !important;
     border-bottom: 1px solid var(--apple-border) !important;
     padding: 20px 32px 14px 32px !important;
 }

 /* ─── 城市标题 ─── */
 #display-city-name {
     font-size: 22px !important;
     font-weight: 900 !important;
     letter-spacing: -0.3px !important;
     color: var(--apple-text) !important;
     line-height: 1.2 !important;
 }

 #display-country-name {
     color: var(--apple-text3) !important;
     font-size: 11px !important;
     font-weight: 600 !important;
     letter-spacing: 0.5px !important;
     text-transform: uppercase !important;
 }

 /* ─── 回忆卡片 ─── */
 .moment-card {
     background: var(--apple-surface-thick) !important;
     border: 1px solid var(--apple-border) !important;
     border-radius: var(--apple-radius-lg) !important;
     box-shadow: var(--apple-shadow-sm) !important;
     padding: 18px !important;
     backdrop-filter: blur(8px) !important;
     -webkit-backdrop-filter: blur(8px) !important;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 }

 .moment-card:hover {
     border-color: rgba(0, 122, 255, 0.2) !important;
     box-shadow: var(--apple-shadow-md) !important;
     transform: translateY(-3px) scale(1.01) !important;
 }

 .moment-card img {
     border-radius: 12px !important;
     border: none !important;
 }

 .moment-card .card-title-text {
     font-size: 16px !important;
     font-weight: 700 !important;
     color: var(--apple-text) !important;
     letter-spacing: -0.2px !important;
 }

 .moment-card-date {
     color: var(--apple-text3) !important;
     font-weight: 600 !important;
     font-size: 12px !important;
 }

 .moment-card .tag-capsule {
     background: rgba(0, 0, 0, 0.06) !important;
     border: none !important;
     color: var(--apple-text3) !important;
     font-weight: 600 !important;
     border-radius: 50px !important;
     font-size: 11px !important;
     padding: 4px 10px !important;
 }

 /* ─── 标签胶囊（全局）─── */
 .tag-capsule {
     background: rgba(0, 0, 0, 0.06) !important;
     border: none !important;
     color: var(--apple-text3) !important;
     border-radius: 50px !important;
     font-weight: 600 !important;
 }
 html.dark-mode .tag-capsule {
     background: #232325 !important;
     color: #aeaeb2 !important;
 }

 html.dark-mode #history-tags-list .tag-capsule,
 html.dark-mode #modal-overlay .tag-capsule.deletable {
     background: #232325 !important;
     color: #aeaeb2 !important;
 }

 html.dark-mode .tag-capsule.disabled {
     background: #1c1c1e !important;
     color: #636366 !important;
 }

 /* ─── Toast 提示 ─── */
 #toast {
     background: rgba(255, 255, 255, 0.96) !important;
     color: #1c1c1e !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
     border: 1px solid rgba(0, 0, 0, 0.09) !important;
     border-radius: 50px !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
     font-size: 13px !important;
     font-weight: 600 !important;
     padding: 12px 28px !important;
     letter-spacing: 0.1px !important;
 }

 /* ─── 浮动操作按钮 ─── */
 .action-btn-round {
     background: var(--apple-surface) !important;
     backdrop-filter: var(--apple-blur-sm) !important;
     -webkit-backdrop-filter: var(--apple-blur-sm) !important;
     border: 1px solid var(--apple-border) !important;
     box-shadow: var(--apple-shadow-md) !important;
     color: var(--apple-text2) !important;
     border-radius: 50% !important;
     transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
 }

 .action-btn-round:hover {
     background: rgba(0, 122, 255, 0.12) !important;
     border-color: rgba(0, 122, 255, 0.3) !important;
     color: var(--apple-blue) !important;
     box-shadow: 0 8px 24px rgba(0, 122, 255, 0.18) !important;
     transform: translateY(-3px) scale(1.05) !important;
 }

 .action-btn-round.active {
     background: #e5e5ea !important;
     color: #1c1c1e !important;
     border-color: transparent !important;
     box-shadow: none !important;
 }

 /* ─── 弹窗覆盖层 ─── */
 .overlay-base {
     background: rgba(0, 0, 0, 0.25) !important;
     backdrop-filter: blur(16px) saturate(180%) !important;
     -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
 }

 /* 图片lightbox：纯黑背景，不要毛玻璃 */
 #gallery-lightbox-overlay,
 #wx-lightbox {
     background: #000 !important;
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
 }

 /* ─── 弹窗内容盒 ─── */
 .modal-content-box {
     background: #ffffff !important;
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
     border: 1px solid rgba(255, 255, 255, 0.6) !important;
     border-radius: var(--apple-radius-xl) !important;
     box-shadow: var(--apple-shadow-lg) !important;
 }

 /* ─── 输入框 ─── */
 input,
 textarea,
 select {
     background: rgba(255, 255, 255, 0.75) !important;
     border: 1px solid var(--apple-border-med) !important;
     border-radius: var(--apple-radius-sm) !important;
     color: var(--apple-text) !important;
     font-family: inherit !important;
     backdrop-filter: blur(4px) !important;
     transition: all 0.2s !important;
 }

 input:focus,
 textarea:focus,
 select:focus {
     background: rgba(255, 255, 255, 0.96) !important;
     border-color: var(--apple-blue) !important;
     box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12) !important;
     outline: none !important;
 }

 input::placeholder,
 textarea::placeholder {
     color: var(--apple-text4) !important;
 }

 /* ─── 通用按钮 ─── */
 button:not(.action-btn-round):not(.lb-nav-btn):not(#lb-close):not(.wx-lb-nav-btn) {
     border-radius: 50px !important;
     font-family: inherit !important;
     font-weight: 600 !important;
     transition: all 0.2s !important;
 }

 /* 主要按钮 */
 button[class*="primary"] {
     background: var(--apple-blue) !important;
     color: #fff !important;
     border: none !important;
     box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3) !important;
 }

 button[class*="primary"]:hover {
     box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4) !important;
     transform: translateY(-1px) !important;
 }

 /* 次要按钮 */
 button[class*="secondary"] {
     background: rgba(0, 0, 0, 0.05) !important;
     color: var(--apple-text) !important;
     border: 1px solid var(--apple-border) !important;
 }

 /* 危险按钮 */
 button[class*="danger"],
 button[class*="delete"] {
     background: rgba(255, 59, 48, 0.1) !important;
     color: var(--apple-red) !important;
     border: 1px solid rgba(255, 59, 48, 0.2) !important;
 }

 /* ─── 关闭按钮 ─── */
 .close-modal,
 .panel-close-btn {
     background: rgba(0, 0, 0, 0.05) !important;
     border: none !important;
 }

 .close-modal:hover,
 .panel-close-btn:hover {
     background: rgba(0, 0, 0, 0.1) !important;
 }

 .close-modal::before,
 .close-modal::after,
 .panel-close-btn::before,
 .panel-close-btn::after {
     background-color: var(--apple-text3) !important;
 }

 .close-modal:hover::before,
 .close-modal:hover::after,
 .panel-close-btn:hover::before,
 .panel-close-btn:hover::after {
     background-color: var(--apple-text) !important;
 }

 /* ─── 时光轴区间头 ─── */
 .timeline-section-header {
     border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
     padding: 32px 0 12px 0 !important;
     margin-bottom: 20px !important;
 }

 .t-num {
     color: var(--apple-text) !important;
     font-size: 22px !important;
     font-weight: 800 !important;
     letter-spacing: -1px !important;
 }

 .t-cn {
     color: var(--apple-text3) !important;
     font-size: 14px !important;
     font-weight: 400 !important;
 }

 .timeline-year-label {
     color: var(--apple-text4) !important;
     font-size: 12px !important;
     font-weight: 600 !important;
 }

 .timeline-city-text {
     color: #1a1a1a !important;
     font-size: 22px !important;
     font-weight: 900 !important;
 }

 /* ─── 详情内容页 ─── */
 #detail-content-title {
     font-weight: 900 !important;
     letter-spacing: -0.5px !important;
     color: var(--apple-text) !important;
 }

 #detail-content .tag-capsule {
     background: rgba(0, 0, 0, 0.06) !important;
     color: var(--apple-text2) !important;
     border: none !important;
     font-weight: 600 !important;
 }

 .detail-meta-info {
     color: var(--apple-text3) !important;
     font-size: 14px !important;
     font-weight: 500 !important;
 }

 /* ─── 国家/城市视图切换 pill ─── */
 #country-view-toggle,
 #city-view-toggle {
     background: var(--apple-surface) !important;
     backdrop-filter: var(--apple-blur-sm) !important;
     -webkit-backdrop-filter: var(--apple-blur-sm) !important;
     border: 1px solid var(--apple-border) !important;
     border-radius: 50px !important;
     box-shadow: var(--apple-shadow-sm) !important;
     padding: 3px !important;
 }

 #toggle-slider,
 #city-toggle-slider {
     background: #fff !important;
     border-radius: 50px !important;
     box-shadow: var(--apple-shadow-sm) !important;
 }

 .view-toggle-btn,
 .city-view-toggle-btn {
     color: var(--apple-text3) !important;
     font-weight: 600 !important;
     font-size: 13px !important;
     border-radius: 50px !important;
     transition: color 0.2s !important;
 }

 .view-toggle-btn.active,
 .city-view-toggle-btn.active {
     color: var(--apple-text) !important;
     font-weight: 700 !important;
 }

 /* ─── 筛选面板 ─── */
 #filter-panel-desktop {
     background: #ffffff !important;
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
     border: 1px solid var(--apple-border) !important;
     border-radius: var(--apple-radius-xl) !important;
     box-shadow: var(--apple-shadow-lg) !important;
 }

 #tag-filter-overlay .modal-content-box {
     background: #ffffff !important;
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
 }

 /* ─── 存档 tab ─── */
 .archive-tab {
     color: var(--apple-text3) !important;
     font-weight: 600 !important;
     font-size: 13px !important;
     border-radius: 0 !important;
     transition: color 0.2s !important;
 }

 .archive-tab.active {
     color: var(--apple-blue) !important;
 }

 .archive-tab.active::after {
     background: var(--apple-blue) !important;
     height: 2px !important;
     border-radius: 2px !important;
 }

 /* ─── 时间轴定位点 ─── */

 /* ─── 灯箱导航 ─── */
 .lb-nav-btn,
 .wx-lb-nav-btn {
     background: rgba(255, 255, 255, 0.15) !important;
     backdrop-filter: blur(8px) !important;
     border: 1px solid rgba(255, 255, 255, 0.25) !important;
     border-radius: 50% !important;
 }

 .lb-nav-btn:hover,
 .wx-lb-nav-btn:hover {
     background: rgba(255, 255, 255, 0.3) !important;
 }

 #lb-counter,
 #wx-lightbox-index {
     background: none !important;
     backdrop-filter: none !important;
     border-radius: 0 !important;
     font-weight: 700 !important;
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
     left: 14px !important;
     transform: none !important;
 }

 #lb-title {
     background: rgba(0, 0, 0, 0.45) !important;
     backdrop-filter: blur(8px) !important;
     font-weight: 600 !important;
 }

 /* ─── 画册样式 ─── */

 /* ─── 确认框 ─── */
 #confirm-box {
     background: rgba(255, 255, 255, 0.92) !important;
     backdrop-filter: var(--apple-blur) !important;
     -webkit-backdrop-filter: var(--apple-blur) !important;
     border: 1px solid var(--apple-border) !important;
     border-radius: var(--apple-radius-xl) !important;
     box-shadow: var(--apple-shadow-lg) !important;
 }

 /* ─── 特殊：Mobile menu ─── */

 /* ─── 选中高亮颜色 ─── */
 ::selection {
     background: rgba(0, 122, 255, 0.18);
 }

 /* ─── 微动效优化 ─── */
 .moment-card,
 .action-btn-round,
 .modal-content-box {
     will-change: transform;
 }

 /* ─── 详情页按钮组 ─── */
 #detail-external-actions .action-btn-round {
     background: rgba(255, 255, 255, 0.85) !important;
     backdrop-filter: var(--apple-blur-sm) !important;
     -webkit-backdrop-filter: var(--apple-blur-sm) !important;
 }

 /* ─── 上传照片区域 ─── */

 /* ─── 弹窗标题样式 ─── */
 h2,
 h3 {
     color: var(--apple-text) !important;
     font-weight: 800 !important;
     letter-spacing: -0.3px !important;
 }

 /* ─── label 文本 ─── */
 label {
     color: var(--apple-text2) !important;
     font-size: 13px !important;
     font-weight: 600 !important;
     letter-spacing: 0.1px !important;
 }

 /* ─── 回忆详情卡片：Apple UI 风格（去黑边框，磨砂毛玻璃） ─── */
 #detail-overlay {
     background: rgba(0, 0, 0, 0.35) !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
 }

 #detail-overlay .modal-content-box {
     background: rgba(255, 255, 255, 0.92) !important;
     backdrop-filter: blur(30px) !important;
     -webkit-backdrop-filter: blur(30px) !important;
     border: 1px solid rgba(255, 255, 255, 0.6) !important;
     border-radius: 28px !important;
     box-shadow:
         0 2px 6px rgba(0, 0, 0, 0.04),
         0 8px 24px rgba(0, 0, 0, 0.10),
         0 24px 60px rgba(0, 0, 0, 0.14) !important;
     max-width: 560px !important;
     width: 92% !important;
     padding: 40px !important;
     position: relative !important;
     bottom: auto !important;
     transform: none !important;
     margin: 0 auto !important;
 }

 @media (max-width: 768px) {
     #detail-overlay .modal-content-box {
         border-radius: 28px 28px 20px 20px !important;
         width: 100% !important;
         max-width: 100% !important;
         padding: 30px 24px 40px 24px !important;
     }
 }

 #detail-overlay .close-modal {
     background: rgba(120, 120, 128, 0.18) !important;
     border-radius: 50% !important;
     width: 30px !important;
     height: 30px !important;
     top: 16px !important;
     right: 16px !important;
     transform: none !important;
 }

 #detail-overlay .close-modal::before,
 #detail-overlay .close-modal::after {
     background-color: #666 !important;
     width: 13px !important;
 }

 #detail-overlay .close-modal:hover {
     background: rgba(120, 120, 128, 0.28) !important;
     transform: none !important;
 }

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

 /* ─── 时光轴城市名：去蓝改黑（与回忆卡片标题同色） ─── */
 .timeline-city-text {
     color: #1a1a1a !important;
     font-size: 22px !important;
     font-weight: 900 !important;
 }

 /* ─── 国家详情城市卡片：完全复刻回忆卡片样式 ─── */
 .city-overview-card {
     background: #fff !important;
     border: 2px solid #1a1a1a !important;
     border-radius: 20px !important;
     padding: 20px !important;
     box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
     overflow: hidden !important;
     transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 }

 .city-overview-card:hover {
     border-color: #1a1a1a !important;
     transform: translateY(-4px) !important;
     box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.08) !important;
 }

 /* ─── 那年今日 (OTD) 卡片：复刻回忆卡片样式 ─── */
 .otd-card-hover,
 #otd-content .moment-card {
     background: #fff !important;
     border: 2px solid #1a1a1a !important;
     border-radius: 20px !important;
     box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
     transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 }

 .otd-card-hover:hover,
 #otd-content .moment-card:hover {
     border-color: #1a1a1a !important;
     box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.08) !important;
     transform: translateY(-4px) !important;
 }

 /* ─── 时光轴中的卡片：Apple UI 风格 ─── */
 #memory-panel.timeline-mode .moment-card {
     background: rgba(255, 255, 255, 0.85) !important;
     border: 1px solid rgba(0, 0, 0, 0.07) !important;
     border-radius: 20px !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08) !important;
     transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 }

 #memory-panel.timeline-mode .moment-card:hover {
     border-color: rgba(0, 0, 0, 0.12) !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.12) !important;
     transform: translateY(-4px) !important;
 }

 /* ══════════════════════════════════════════════════════
【终极 Apple UI 覆盖层】去除全局黑边，统一柔和卡片风格
══════════════════════════════════════════════════════ */

 /* ─── 回忆卡片（瀑布流列表）─── */
 .moment-card {
     background: #fff !important;
     border: 1px solid rgba(0, 0, 0, 0.08) !important;
     border-radius: 20px !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.07) !important;
     overflow: hidden !important;
     padding: 20px !important;
 }

 .moment-card:hover {
     border-color: rgba(0, 0, 0, 0.14) !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.12) !important;
     transform: translateY(-4px) !important;
 }

 /* ─── 城市卡片（国家详情）─── */
 .city-overview-card {
     background: #fff !important;
     border: 1px solid rgba(0, 0, 0, 0.08) !important;
     border-radius: 20px !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.07) !important;
     overflow: hidden !important;
     transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
 }

 .city-overview-card:hover {
     border-color: rgba(0, 0, 0, 0.14) !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.12) !important;
     transform: translateY(-4px) !important;
 }

 /* ─── OTD / 那年今日卡片 ─── */
 .otd-card-hover,
 #otd-content .moment-card {
     background: #fff !important;
     border: 1px solid rgba(0, 0, 0, 0.08) !important;
     border-radius: 20px !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.07) !important;
 }

 .otd-card-hover:hover,
 #otd-content .moment-card:hover {
     border-color: rgba(0, 0, 0, 0.14) !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.12) !important;
     transform: translateY(-4px) !important;
 }

 /* ─── 弹窗 / 模态框 ─── */
 .modal-content-box {
     background: rgba(255, 255, 255, 0.95) !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
     border: 1px solid rgba(0, 0, 0, 0.08) !important;
     border-radius: 24px !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 20px 60px rgba(0, 0, 0, 0.16) !important;
 }

 /* ─── 确认对话框 ─── */
 #confirm-box {
     background: rgba(255, 255, 255, 0.95) !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
     border: 1px solid rgba(0, 0, 0, 0.08) !important;
     border-radius: 24px !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 20px 60px rgba(0, 0, 0, 0.18) !important;
 }

 /* ─── 桌面筛选面板 ─── */
 #filter-panel-desktop {
     background: rgba(255, 255, 255, 0.96) !important;
     backdrop-filter: blur(16px) !important;
     -webkit-backdrop-filter: blur(16px) !important;
     border: 1px solid rgba(0, 0, 0, 0.08) !important;
     border-radius: 20px !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 16px 48px rgba(0, 0, 0, 0.14) !important;
 }

 /* ─── Toast 提示条 ─── */
 #toast {
     background: rgba(255, 255, 255, 0.96) !important;
     color: #1c1c1e !important;
     border: 1px solid rgba(0, 0, 0, 0.09) !important;
     border-radius: 50px !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;
     font-weight: 600 !important;
 }

 /* ─── 底部圆形操作按钮 ─── */
 .action-btn-round {
     background: rgba(255, 255, 255, 0.92) !important;
     border: 1px solid rgba(0, 0, 0, 0.10) !important;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10), 0 6px 20px rgba(0, 0, 0, 0.08) !important;
     backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important;
     color: #1a1a1a !important;
 }

 .action-btn-round:hover {
     background: #1a1a1a !important;
     border-color: #1a1a1a !important;
     color: #fff !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20) !important;
 }

 .action-btn-round.active {
     background: #1a1a1a !important;
     border-color: #1a1a1a !important;
     color: #fff !important;
 }

 /* ─── 大加号按钮（手机端）保持黑色 ─── */
 #home-actions #btn-add-main {
     background: #1a1a1a !important;
     border: none !important;
     color: #fff !important;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30) !important;
 }

 /* ─── 面板功能小按钮 ─── */
 .panel-func-btn {
     border: 1px solid rgba(0, 0, 0, 0.10) !important;
     border-radius: 50% !important;
     background: transparent !important;
 }

 .panel-func-btn:hover {
     background: rgba(0, 0, 0, 0.06) !important;
     border-color: rgba(0, 0, 0, 0.18) !important;
 }

 /* ─── 输入框 ─── */
 input,
 textarea,
 select {
     border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
     border-radius: 14px !important;
     background: rgba(255, 255, 255, 0.8) !important;
 }

 input:focus,
 textarea:focus,
 select:focus {
     border-color: rgba(0, 122, 255, 0.5) !important;
     box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12) !important;
     background: #fff !important;
 }

 /* ─── 城市搜索结果框 ─── */
 #city-search-results {
     border: 1px solid rgba(0, 0, 0, 0.10) !important;
     border-radius: 14px !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
     overflow: hidden !important;
 }

 /* ─── 面板左侧边框（电脑端）─── */
 @media (min-width: 769px) {
     #main-container.panel-open #memory-panel {
         border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
     }
 }

 /* ─── 手机端图片自然比例（去掉强制正方形）─── */
 @media (max-width: 768px) {

     .moment-card img,
     .city-overview-card img {
         border: none !important;
         border-radius: 12px !important;
     }
 }

 /* ══════════════════════════════════════════════════════
1. 国家名称 & 回忆卡片标题 加粗
══════════════════════════════════════════════════════ */

 /* 国家详情 — 国家名称 */
 #display-country-name {
     font-weight: 900 !important;
     letter-spacing: -0.5px !important;
 }

 /* 所有卡片标题（瀑布流、城市卡、时光轴） */
 .moment-card .card-title-text,
 .city-overview-card .card-title-text,
 #memory-panel.timeline-mode .moment-card .card-title-text {
     font-weight: 900 !important;
 }

 /* ── 国家标题加粗：Inter 仅加载 300/400/600/900，强制 900 ── */
 #display-city-name {
     font-weight: 900 !important;
     font-size: 22px !important;
     -webkit-font-smoothing: antialiased !important;
     letter-spacing: -0.5px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
 }

 /* ── 城市卡片：内边距缩小 → 图片更大；阴影更轻 ── */
 .city-overview-card {
     padding: 10px !important;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
 }

 .city-overview-card:hover {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.08) !important;
 }

 .city-overview-card img {
     margin-top: 0 !important;
     margin-bottom: 9px !important;
     border-radius: 14px !important;
 }

 /* 骨架屏容器内的 img 不需要额外 margin，由容器控制 */
 .city-overview-card .img-skeleton-wrap img {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     border-radius: 14px !important;
 }

 /* ══════════════════════════════════════════════════════
2. 回忆详情页 Apple UI 重设计
══════════════════════════════════════════════════════ */

 /* ── 统一背景色变量（白色，全局一致）── */
 #detail-overlay {
     background: rgba(0, 0, 0, 0.42) !important;
     backdrop-filter: blur(20px) !important;
     -webkit-backdrop-filter: blur(20px) !important;
 }

 /* ── 主卡片容器 ── */
 #detail-overlay .modal-content-box,
 #detail-nav-wrapper .modal-content-box {
     background: #fff !important;
     border: 1px solid rgba(0, 0, 0, 0.09) !important;
     border-radius: 24px !important;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 32px 80px rgba(0, 0, 0, 0.18) !important;
     overflow: hidden !important;
     padding: 0 !important;
 }

 /* ── 内容区：手机端让卡片变 flex 列，内容区撑满并滚动 ── */
 @media (max-width: 768px) {
     #detail-nav-wrapper .modal-content-box {
         display: flex !important;
         flex-direction: column !important;
         position: relative !important;
     }

     /* 关闭按钮绝对定位，完全脱离 flex 流，不占行列 */
     #detail-overlay .close-modal {
         position: absolute !important;
         top: 14px !important;
         right: 14px !important;
         z-index: 30 !important;
         flex: none !important;
         width: 28px !important;
         height: 28px !important;
     }

     #detail-content {
         flex: 1 !important;
         min-height: 0 !important;
         height: 0 !important;
         overflow-y: auto !important;
         -webkit-overflow-scrolling: touch !important;
         max-height: none !important;
         background: #ffffff !important;
         padding: 30px 20px 60px 20px !important;
     }

     .detail-img-box {
         width: 100% !important;
         margin-left: 0 !important;
         margin-right: 0 !important;
     }
 }

 @media (min-width: 769px) {
     #detail-content {
         background: #ffffff !important;
         /* 桌面端：左右 32px 统一，顶部留白给叉号和标题，底部留白 */
         padding: 36px 32px 80px 32px !important;
     }
 }

 /* ── mini 副标题 ── */
 #detail-mini-info {
     font-size: 12px !important;
     font-weight: 500 !important;
     color: rgba(60, 60, 67, 0.55) !important;
     letter-spacing: 0 !important;
 }

 /* ── 城市 & 日期 meta 胶囊 ── */
 .detail-meta-info {
     background: transparent !important;
     border: none !important;
     padding: 0 !important;
     /* 左右由父容器 #detail-content 统一控制 */
     gap: 8px !important;
     margin-bottom: 14px !important;
     margin-top: 0 !important;
 }

 .detail-meta-info span {
     font-size: 13px !important;
     font-weight: 600 !important;
     color: rgba(60, 60, 67, 0.85) !important;
     background: rgba(118, 118, 128, 0.11) !important;
     border-radius: 10px !important;
     padding: 6px 12px !important;
     border: none !important;
     cursor: pointer !important;
     transition: background 0.18s !important;
 }

 .detail-meta-info span:hover {
     background: rgba(118, 118, 128, 0.20) !important;
     color: #111 !important;
 }

 /* ── 标签区和正文：去掉额外左右 padding，由父容器统一控制 ── */
 #detail-content .detail-content-wrapper>div[style*="display:flex"][style*="flex-wrap:wrap"],
 #detail-content .detail-content-wrapper>div[style*="display: flex"][style*="flex-wrap: wrap"] {
     padding-left: 0 !important;
     padding-right: 0 !important;
 }

 #detail-content .detail-content-wrapper>div[style*="font-size:17px"],
 #detail-content .detail-content-wrapper>div[style*="font-size: 17px"] {
     padding-left: 0 !important;
     padding-right: 0 !important;
 }

 /* ── 手机端图片区：对齐父容器，无需额外 margin ── */
 .detail-img-box {
     margin: 12px 0 0 0 !important;
 }

 /* ── 标签 ── */
 #detail-content .tag-capsule,
 .detail-clickable-tag {
     font-size: 12px !important;
     font-weight: 600 !important;
     border-radius: 20px !important;
     padding: 5px 12px !important;
     background: transparent !important;
     transition: background 0.18s !important;
 }

 #detail-content .tag-capsule:hover,
 .detail-clickable-tag:hover {
     background: rgba(0, 0, 0, 0.05) !important;
 }

 /* ── 正文 ── */
 #detail-content .detail-content-wrapper>div[style*="font-size:17px"],
 #detail-content .detail-content-wrapper>div[style*="font-size: 17px"] {
     font-size: 15.5px !important;
     line-height: 1.85 !important;
     color: rgba(0, 0, 0, 0.72) !important;
     letter-spacing: 0.01em !important;
 }

 /* ── 手机端图片 ── */
 .detail-img-box {
     border-radius: 14px !important;
     overflow: hidden !important;
     margin-top: 12px !important;
 }

 .detail-img-box img {
     border-radius: 14px !important;
     border: none !important;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
 }

 /* ── PC 端左侧图片区 ── */
 #detail-img-carousel {
     background: #ffffff !important;
     border-left: none !important;
     border-right: 1px solid rgba(0, 0, 0, 0.09) !important;
 }

 #detail-carousel-img {
     border-radius: 0 !important;
     border: none !important;
     box-shadow: none !important;
     background: #f5f5f5 !important;
 }
 html.dark-mode #detail-carousel-img {
     background: #111113 !important;
 }

 .carousel-nav-btn {
     background: rgba(255, 255, 255, 0.75) !important;
     border: 1px solid rgba(0, 0, 0, 0.10) !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
     backdrop-filter: blur(8px) !important;
     border-radius: 50% !important;
     color: #1a1a1a !important;
     transition: background 0.18s, opacity 0.25s !important;
     opacity: 0 !important;
     pointer-events: none !important;
     z-index: 2 !important;
 }

 #detail-img-carousel:hover .carousel-nav-btn {
     opacity: 1 !important;
     pointer-events: auto !important;
 }

 /* 禁用状态的按钮：hover 时也保持完全隐藏 */
 #detail-img-carousel:hover .carousel-nav-btn:disabled {
     opacity: 0 !important;
     pointer-events: none !important;
 }

 .carousel-nav-btn:hover {
     background: rgba(255, 255, 255, 0.95) !important;
 }

 #carousel-counter {
     background: rgba(0, 0, 0, 0.26) !important;
     color: rgba(255, 255, 255, 0.90) !important;
     border: none !important;
     border-radius: 20px !important;
     font-size: 12px !important;
     font-weight: 600 !important;
     padding: 4px 10px !important;
     opacity: 0 !important;
     z-index: 2 !important;
     transition: opacity 0.25s !important;
 }

 #detail-img-carousel:hover #carousel-counter {
     opacity: 1 !important;
 }

 #carousel-thumbs .carousel-thumb {
     border-radius: 8px !important;
     border: 2px solid transparent !important;
     opacity: 0.55;
     transition: all 0.18s !important;
 }

 #carousel-thumbs .carousel-thumb.active {
     border-color: rgba(0, 122, 255, 0.70) !important;
     opacity: 1 !important;
 }

 /* ── 关闭按钮 ── */
 #detail-overlay .close-modal {
     background: rgba(118, 118, 128, 0.14) !important;
     color: rgba(60, 60, 67, 0.75) !important;
     border-radius: 50% !important;
     width: 28px !important;
     height: 28px !important;
     font-size: 13px !important;
     border: none !important;
     box-shadow: none !important;
     top: 12px !important;
     right: 12px !important;
     transition: background 0.18s !important;
 }

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

 /* ── 左右翻页按钮 ── */
 .nav-btn-detail {
     background: rgba(255, 255, 255, 0.88) !important;
     border: 1px solid rgba(0, 0, 0, 0.10) !important;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
     backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important;
     border-radius: 50% !important;
     color: #1a1a1a !important;
     transition: all 0.18s !important;
 }

 .nav-btn-detail:hover {
     background: #fff !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20) !important;
 }