/* 回忆地图 · 样式 — 手机端各页面顶部间距修正 */
/* ── Fix: 手机端各页面顶部间距修正 ── */
@media (max-width: 768px) {

    /* 画廊页面标题行：减半 */
    #gallery-overlay .modal-content-box > div:first-child {
        padding-top: max(18px, calc(env(safe-area-inset-top, 10px) + 8px)) !important;
    }

    /* 回忆图片详情页：不额外留白，还原原值 */
    #detail-content {
        padding-top: 30px !important;
    }

    /* 手机端图片查看器（回忆详情 / 画册 两种）：图片在屏幕上下居中。
       之前为了给底部注释留位置，轨道有 130px 底部内边距（行内样式 / has-gallery-caption），
       图片整体偏上或偏下；另外 100vh 在手机浏览器里包含地址栏，实际可见区域更矮，也会让图偏下。
       现在：灯箱用可见高度（dvh）、去掉底部内边距，图片放在整屏正中；
       高图上下各留约 125px，不会压到顶部按钮栏和底部注释。 */
    #wx-lightbox {
        height: 100vh;
        height: 100dvh;
    }

    #wx-lightbox #wx-lightbox-slider {
        padding-bottom: 0 !important;
        height: 100% !important;
    }

    #wx-lightbox .wx-slide-item,
    #wx-lightbox.has-gallery-caption .wx-slide-item {
        height: 100% !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #wx-lightbox .wx-slide-item img,
    #wx-lightbox:not(.has-gallery-caption) .wx-slide-item img {
        margin: 0 auto !important;
        max-width: 100% !important;
        max-height: calc(100vh - 250px) !important;
        max-height: calc(100dvh - 250px) !important;
    }

    /* 图册/画廊图片详情顶部按钮栏：向下移一点适配状态栏 */
    .wx-lightbox-header {
        padding-top: calc(env(safe-area-inset-top, 7px) + 3px) !important;
    }

    #gallery-lightbox-overlay > div:first-child {
        padding-top: calc(env(safe-area-inset-top, 7px) + 3px) !important;
    }

    /* 手机端：设置按钮保持显示，桌面端由JS控制 */
}

/* ══════════════════════════════════════════
   夜间模式变量与样式
══════════════════════════════════════════ */
html.dark-mode {
    --sketch-bg: #0a0a0a;
    --sketch-black: #f0f0f0;
    --sketch-gray: #6e6e73;
    --apple-bg: #1c1c1e;
    --apple-bg2: #2c2c2e;
    --apple-surface: rgba(44,44,46,0.92);
    --apple-label: #f2f2f7;
    --apple-secondary: #ebebf5;
    --apple-tertiary: #8e8e93;
    --apple-separator: rgba(84,84,88,0.6);
    --apple-fill: #3a3a3c;
    --apple-white: #1c1c1e;
    --settings-bg: rgba(30,30,32,0.97);
    --settings-text: #f2f2f7;
    --settings-label: #8e8e93;
    --settings-icon-bg: #3a3a3c;
    --settings-sep: rgba(255,255,255,0.08);
    color-scheme: dark;
}

html.dark-mode body {
    background-color: #0a0a0a !important;
    color: #f0f0f0 !important;
}

html.dark-mode #chartdiv {
    background: #111113 !important;
}

html.dark-mode #memory-panel {
    background: rgba(18,18,20,0.98) !important;
}

html.dark-mode .panel-header-container {
    background: rgba(18,18,20,0.98) !important;
}

html.dark-mode .modal-content-box,
html.dark-mode #gallery-overlay .modal-content-box,
html.dark-mode .overlay-base {
    background: #1c1c1e !important;
    color: #f2f2f7 !important;
}

html.dark-mode #gallery-overlay .modal-content-box > div:first-child {
    background: #1c1c1e !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

html.dark-mode .moment-card,
html.dark-mode .city-overview-card {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: #f2f2f7 !important;
}

html.dark-mode input,
html.dark-mode textarea {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f2f2f7 !important;
}

html.dark-mode #home-actions {
    background: rgba(28,28,30,0.85) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html.dark-mode .action-btn-round {
    color: #f2f2f7 !important;
}

html.dark-mode #btn-add-main {
    background: #f2f2f7 !important;
    color: #1c1c1e !important;
    border-color: transparent !important;
}

html.dark-mode #loader {
    background: #0a0a0a !important;
}

html.dark-mode #filter-panel-desktop {
    background: #1c1c1e !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f2f2f7 !important;
    box-shadow: 8px 8px 0 rgba(255,255,255,0.05) !important;
}

/* 筛选标签 四个字 - 内联 color:#000 / color: #000 都覆盖 */
html.dark-mode #filter-panel-desktop .filter-header span:first-child,
html.dark-mode #filter-panel-desktop .filter-header > span:first-of-type {
    color: #f2f2f7 !important;
}

/* 底部分隔线（内联 border-top: 1px solid #f0f0f0）*/
html.dark-mode #filter-panel-desktop div[style*="border-top"] {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* 重置按钮 */
html.dark-mode #filter-panel-desktop div[style*="border-top"] button:first-child,
html.dark-mode #filter-panel-desktop button[onclick*="resetFilter"] {
    background: #2c2c2e !important;
    color: #f2f2f7 !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* 完成按钮 */
html.dark-mode #filter-panel-desktop div[style*="border-top"] button:last-child,
html.dark-mode #filter-panel-desktop button[onclick*="display"] {
    background: #f2f2f7 !important;
    color: #1c1c1e !important;
    border: none !important;
}

/* 手机端筛选面板 */
html.dark-mode #tag-filter-overlay .modal-content-box {
    background: #1c1c1e !important;
    color: #f2f2f7 !important;
}

html.dark-mode #tag-filter-overlay .modal-content-box > div[style*="border-bottom"] {
    color: #f2f2f7 !important;
    border-bottom: 2px solid rgba(255,255,255,0.08) !important;
}

html.dark-mode #tag-filter-overlay button[onclick*="resetFilter"] {
    background: #2c2c2e !important;
    color: #f2f2f7 !important;
    border-color: rgba(255,255,255,0.15) !important;
}

html.dark-mode #tag-filter-overlay button[onclick*="closeTagFilter"] {
    background: #f2f2f7 !important;
    color: #1c1c1e !important;
    border: none !important;
}

/* ── 夜间：导航栏胶囊深色 + 图标变白 + 去掉白色内阴影 ── */
html.dark-mode #home-actions {
    background: rgba(36,36,38,0.92) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.2) !important;
}

html.dark-mode #home-actions .action-btn-round {
    color: rgba(242,242,247,0.9) !important;
}

html.dark-mode #home-actions .action-btn-round svg {
    stroke: rgba(242,242,247,0.9);
}

/* ── 夜间：底部栏“已选中”按钮——原来沿用白天的 #e5e5ea，太亮；改成柔和的深灰底，图标保持浅色 ── */
html.dark-mode #home-actions .action-btn-round.active {
    background: #48484a !important;
    color: rgba(242,242,247,0.95) !important;
    box-shadow: none !important;
}

html.dark-mode #home-actions .action-btn-round.active:hover {
    background: #545458 !important;
}

html.dark-mode #home-actions .action-btn-round.active:active {
    background: #3a3a3c !important;
}

/* ── 夜间：面板顶部标题 & 卡片标题文字变白 ── */
html.dark-mode #display-city-name {
    color: #f2f2f7 !important;
}

html.dark-mode #display-country-name {
    color: #8e8e93 !important;
}

html.dark-mode .card-title-text {
    color: #f2f2f7 !important;
}

html.dark-mode .moment-card,
html.dark-mode .city-overview-card {
    color: #f2f2f7 !important;
}

/* 内联写死的次要灰色文字 */
html.dark-mode #memory-panel span[style*="color:#888"],
html.dark-mode #memory-panel span[style*="color: #888"],
html.dark-mode #memory-panel span[style*="color:#999"],
html.dark-mode #memory-panel div[style*="color:#888"],
html.dark-mode #memory-panel div[style*="color:#6"] {
    color: #8e8e93 !important;
}

html.dark-mode #home-sync-btn svg {
    stroke: #f2f2f7 !important;
}
html.dark-mode #home-sync-btn {
    background: rgba(44,44,46,0.85) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* ── 夜间：回忆详情标题吸顶条（含伪元素覆盖） ── */
html.dark-mode #detail-content-title {
    background-color: #1c1c1e !important;
    background: #1c1c1e !important;
    box-shadow: 0 -200px 0 0 #1c1c1e !important;
}

html.dark-mode #detail-content-title.is-sticky {
    box-shadow: 0 -200px 0 0 #1c1c1e, 0 1px 0 rgba(255,255,255,0.08) !important;
}

html.dark-mode #detail-content-title::before {
    background: #1c1c1e !important;
    background-color: #1c1c1e !important;
}

/* ── 夜间：左右切换回忆按钮 ── */
html.dark-mode .nav-btn-detail {
    background-color: rgba(44,44,46,0.92) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #f2f2f7 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}

html.dark-mode .nav-btn-detail:hover {
    background-color: rgba(72,72,74,0.98) !important;
    color: #ffffff !important;
}

html.dark-mode .gallery-play-btn,
html.dark-mode #ss-play-btn {
    background: #2c2c2e !important;
    color: #f2f2f7 !important;
    border-color: rgba(255,255,255,0.15) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
html.dark-mode .carousel-nav-btn {
    background: rgba(44,44,46,0.88) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #f2f2f7 !important;
}

html.dark-mode .carousel-nav-btn:hover {
    background: rgba(72,72,74,0.98) !important;
}

/* ── 夜间：关闭按钮叉号变白 ── */
html.dark-mode #detail-overlay .close-modal {
    background: rgba(255,255,255,0.08) !important;
    color: #f2f2f7 !important;
}

html.dark-mode #detail-overlay .close-modal::before,
html.dark-mode #detail-overlay .close-modal::after {
    background-color: #f2f2f7 !important;
}

html.dark-mode #detail-overlay .close-modal:hover {
    background: rgba(255,255,255,0.16) !important;
}

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

/* ── 夜间：回忆详情页 ── */
html.dark-mode #detail-overlay .modal-content-box,
html.dark-mode #detail-nav-wrapper .modal-content-box,
html.dark-mode #detail-overlay .modal-content-box.active {
    background: #1c1c1e !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
}

html.dark-mode #detail-img-carousel {
    background: #111113 !important;
    border-right-color: rgba(255,255,255,0.08) !important;
}

html.dark-mode #detail-content {
    background: #1c1c1e !important;
    color: #f2f2f7 !important;
}

html.dark-mode #detail-content-title,
html.dark-mode #detail-title-inner,
html.dark-mode #detail-content span,
html.dark-mode #detail-content p,
html.dark-mode #detail-content div:not(.tag-capsule) {
    color: #f2f2f7 !important;
}

html.dark-mode #detail-content .tag-capsule {
    background: #3a3a3c !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #f2f2f7 !important;
}

html.dark-mode #detail-overlay #detail-external-actions .action-btn-round,
html.dark-mode #detail-external-actions .action-btn-round {
    background: rgba(44,44,46,0.95) !important;
    border-color: rgba(255,255,255,0.15) !important;
    border: 1.5px solid rgba(255,255,255,0.15) !important;
    color: #f2f2f7 !important;
}

html.dark-mode #detail-overlay .close-modal {
    color: #f2f2f7 !important;
    stroke: #f2f2f7 !important;
}

html.dark-mode #detail-overlay .close-modal::before,
html.dark-mode #detail-overlay .close-modal::after {
    background: #f2f2f7 !important;
}

/* ── 夜间：时光轴 header 文字变白 ── */
html.dark-mode .timeline-section-header {
    color: #f2f2f7 !important;
}

html.dark-mode .timeline-city-text {
    color: #f2f2f7 !important;
}

html.dark-mode .timeline-year-label {
    color: #8e8e93 !important;
}

html.dark-mode .timeline-section-header .t-num,
html.dark-mode .timeline-section-header .t-cn {
    color: #f2f2f7 !important;
}

/* ── 夜间：时光轴回忆卡片 ── */
html.dark-mode #memory-panel.timeline-mode .moment-card {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html.dark-mode #memory-panel.timeline-mode .moment-card:hover {
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3) !important;
}

html.dark-mode #memory-panel.timeline-mode .moment-card .card-title-text {
    color: #f2f2f7 !important;
}

html.dark-mode #memory-panel.timeline-mode .moment-card .moment-card-date {
    color: #8e8e93 !important;
}

/* ── 夜间：时光轴右上角图标按钮变白 ── */
html.dark-mode #btn-timeline-calendar,
html.dark-mode #btn-timeline-otd {
    color: #f2f2f7 !important;
    border-color: rgba(255,255,255,0.2) !important;
}

html.dark-mode #btn-timeline-calendar svg,
html.dark-mode #btn-timeline-otd svg {
    stroke: #f2f2f7 !important;
}

/* ══════════════════════════════════════════
   夜间：新增/编辑回忆弹窗 (#modal-overlay)
══════════════════════════════════════════ */
html.dark-mode #modal-overlay {
    background: #111113 !important;
}

html.dark-mode #modal-overlay .modal-content-box {
    background: #1c1c1e !important;
    box-shadow: 0 2px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.5) !important;
}

html.dark-mode #modal-overlay .modal-scroll-body {
    background: #1c1c1e !important;
}

/* 顶部标题 "新回忆" / "编辑回忆" */
html.dark-mode #modal-overlay .modal-scroll-body > div:first-child {
    color: #f2f2f7 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* label 文字 */
html.dark-mode #modal-overlay label {
    color: #8e8e93 !important;
}

html.dark-mode #modal-overlay label span {
    color: #636366 !important;
}

/* input / textarea */
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;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f2f2f7 !important;
}

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

html.dark-mode #modal-overlay input: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;
}

/* 图库上传按钮 */
html.dark-mode #modal-overlay button[onclick*="pickLocalPhotos"],
html.dark-mode #modal-overlay button[onclick*="addImageField"] {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #f2f2f7 !important;
}

/* 清除时间按钮 */
html.dark-mode #modal-overlay button[onclick*="clearTime"] {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #f2f2f7 !important;
}

/* 图片输入行 */
html.dark-mode #modal-overlay .img-input-container {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* 标签区域背景 */
html.dark-mode #modal-overlay div[style*="background:#fcfcfc"],
html.dark-mode #modal-overlay div[style*="background: #fcfcfc"] {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* 历史标签区域 */
html.dark-mode #modal-overlay #history-tags-area {
    border-top-color: rgba(255,255,255,0.08) !important;
}

html.dark-mode #modal-overlay #history-tags-area > div {
    color: #636366 !important;
}

/* 新标签输入框 */
html.dark-mode #modal-overlay #in-tag-name {
    background: #3a3a3c !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f2f2f7 !important;
}

/* 加号按钮 */
html.dark-mode #modal-overlay button[onclick*="addNewTag"] {
    background: #f2f2f7 !important;
    color: #1c1c1e !important;
}

/* 城市搜索结果下拉 */
html.dark-mode #modal-overlay #city-search-results {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f2f2f7 !important;
}

html.dark-mode #modal-overlay #city-search-results > div {
    color: #f2f2f7 !important;
}

html.dark-mode #modal-overlay #city-search-results > div:hover {
    background: #3a3a3c !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;
}

html.dark-mode #modal-overlay .ios-bottom-bar #btn-save-main {
    background: #d1d1d6 !important;
    color: #1c1c1e !important;
}

/* storage-info 角标 */
html.dark-mode #modal-overlay #storage-info {
    background: #3a3a3c !important;
    color: #8e8e93 !important;
}

/* ── 夜间：那年今日弹窗 ── */
html.dark-mode #otd-overlay .modal-content-box {
    background: #1c1c1e !important;
    border-color: rgba(255,255,255,0.1) !important;
}

html.dark-mode #otd-overlay .modal-content-box > div:first-child {
    background: #1c1c1e !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

html.dark-mode #otd-overlay .modal-content-box > div:first-child div,
html.dark-mode #otd-overlay .modal-content-box > div:first-child span {
    color: #f2f2f7 !important;
}

html.dark-mode #otd-subtitle {
    color: #8e8e93 !important;
}

html.dark-mode #chartdiv canvas {
    filter: brightness(0.7) saturate(0.5);
}
html.dark-mode #chartdiv {
    background: #111113 !important;
}