/* ============================================================================
 * app-modal.css —— 弹窗与浮层（confirm 弹窗 / 遮罩 / 数据管理说明 / toast 等）
 * ★第 2/3 段（原 2401~4980 行）。本段是全站弹窗规则最密集的区域。
 *   ⚠ 引入顺序在 app.css 之后、app-form.css 之前，不可调换（见 app.css 头部说明）。
 * ============================================================================ */
        
        /* ★2026-09-04 难度选择弹窗（替换原生 select）：色点 + 档名卡，选中靛蓝玻璃同心情/天气 */
        .df-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            /* ★2026-09-16 五项优化：与下方取消/确定拉开（6→12，同心情/天气弹窗） */
            margin: 4px 0 12px;
        }
        .df-opt {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            border-radius: 12px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: #334155;
            font-size: 15px;
            font-weight: 600;
            user-select: none;
            transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
        }
        .dark-mode .df-opt {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.22);
            color: #e5e7eb;
        }
        .df-opt .df-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--df-color, #10b981);
            flex-shrink: 0;
        }
        .df-opt .df-name {
            margin-left: auto;
            font-size: 12px;
            color: #64748b;
            font-weight: 400;
        }
        .dark-mode .df-opt .df-name {
            color: #a3b1c6;
        }
        .df-opt.selected {
            background: rgba(79, 70, 229, 0.16);
            border-color: rgba(79, 70, 229, 0.8);
            color: #4338ca;
        }
        .dark-mode .df-opt.selected {
            background: rgba(99, 102, 241, 0.2);
            border-color: rgba(129, 140, 248, 0.8);
            color: #c7d2fe;
        }
        .df-opt:active {
            transform: scale(0.94);
        }
        
        select.edit-input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 8px center;
            background-size: 12px;
            padding: 8px 28px 8px 12px;
            font-size: 16px;
            line-height: 1.2;
            cursor: pointer;
            width: 100%;
            max-width: 160px; /* v1.0.7.9 难度框加宽：文字显示不全 */
        }
        
        select.edit-input:focus {
            outline: none;
            border-color: #4f46e5;
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
        }
        /* v1.0.8.3 编辑模式难度框：原生 width:auto 按内容自适应 + min-width 兜底（不依赖 JS 测量） */
        select.edit-input[id^="edit-difficulty-"],
        select.edit-input[id^="edit-planned-difficulty-"] {
            width: auto !important;
            max-width: none !important;
            min-width: 96px;
        }
        
        /* 移动端输入框优化 */
        @media (max-width: 768px) {
            .edit-input {
                font-size: 16px !important;
                -webkit-transform: none;
                transform: none;
                -webkit-backface-visibility: visible;
                backface-visibility: visible;
                will-change: auto;
                touch-action: manipulation;
                -webkit-touch-callout: default;
                pointer-events: auto;
                -webkit-user-select: text;
                user-select: text;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                -webkit-tap-highlight-color: transparent;
                outline: none;
                position: relative;
                z-index: 100;
            }
            
            .edit-input:focus {
                -webkit-transform: none;
                transform: none;
                touch-action: manipulation;
                outline: none;
                position: relative;
                z-index: 101;
            }
            
            /* 确保输入框在iframe中也能正常工作（.input-with-search 已随行内编辑废弃删除） */
            .edit-input {
                position: relative;
                z-index: 11;
                touch-action: manipulation;
            }
            
            /* ★2026-08-27 五项优化：placeholder 与全 App 输入框统一（原 #999 + 4 个旧前缀冗余块） */
            .edit-input::placeholder {
                color: rgba(51, 65, 85, 0.85);   /* ★2026-09-04 可读性：placeholder 提档（原 0.55 太淡看不清） */
            }
            body.dark-mode .edit-input::placeholder {
                color: rgba(203, 213, 225, 0.9);   /* #cbd5e1 72%：深底 placeholder 可读 */
            }
        }
        
        /* ★2026-08-25 编辑行紧凑字段（.edit-mini）已废弃：恢复原 edit-input 尺寸（用户要求），相关 CSS 移除 */
        
        
        
        
        .sort-header {
            cursor: pointer;
            user-select: none;
            transition: transform 0.1s ease, background-color 0.2s ease, color 0.2s ease;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .sort-header:hover {
            color: rgba(255, 255, 255, 0.9);
        }
        .sort-icon {
            font-size: 16px;
            opacity: 0.6;
            transition: transform 0.1s ease, color 0.3s ease, opacity 0.3s ease;
        }
        
        .sort-icon:hover {
            transform: scale(1.2);
        }
        
        .sort-icon.active {
            opacity: 1;
            color: #4f46e5;
            animation: sortPulse 0.3s ease;
        }
        
        @keyframes sortPulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.3);
            }
            100% {
                transform: scale(1);
            }
        }
        
        /* ========== 图标美化 ========== */
        .material-icons {
            font-size: 20px;
            vertical-align: middle;
        }
        
        /* 标题山峰图标动画 */
        .title-mountain-icon {
            display: inline-block;
            animation: mountainFloat 3s ease-in-out infinite;
        }
        
        @keyframes mountainFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-5px) rotate(2deg);
            }
        }
        .spin {
            animation: spin 1s linear infinite;
        }
        .confirm-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);   /* ★v1.1.2.8 浅色遮罩调淡（深色 0.7 不受影响） */
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            padding: 20px;
            padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));   /* ★2026-09-03 iOS 网页：避开 home 指示条 */
        }
        /* ★2026-09-04 记录详情/编辑弹窗（阅读态 v2）：独立遮罩层，z-index 90 低于 confirm-modal(100)，
           保证编辑态里再弹难度/日期/心情子选择器时子窗盖在上层；closeOpenModals 只清 .confirm-modal 不误删它 */
        .record-detail-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 90;
            padding: 20px;
            padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        }
        body.dark-mode .record-detail-modal {
            background: rgba(0, 0, 0, 0.72);
        }
        /* 详情弹窗阅读态深色适配（内容用内联色，此处按 class 覆盖） */
        body.dark-mode .record-detail-modal .rd-name { color: #f1f5f9 !important; }   /* ★2026-09-04 +important 压内联 #1e293b（深色山名黑字看不见） */
        body.dark-mode .record-detail-modal .rd-no { color: #a3b1c6 !important; }   /* ★2026-09-04 提亮+important 压内联（原无 important 被内联灰压住=深色看不清根因） */
        body.dark-mode .record-detail-modal .rd-tt { color: #e5e7eb !important; }   /* ★2026-09-04 +important 压内联 #334155（深色弹窗标题黑字） */
        body.dark-mode .record-detail-modal .rd-chip { color: #cbd5e1 !important; border-color: rgba(148,163,184,0.5) !important; background: rgba(148,163,184,0.12) !important; }
        body.dark-mode .record-detail-modal .rd-met { background: rgba(148,163,184,0.12); }
        body.dark-mode .record-detail-modal .rd-met div:first-child { color: #a3b1c6 !important; }
        body.dark-mode .record-detail-modal .rd-met div:last-child { color: #f1f5f9 !important; }   /* ★2026-09-04 +important 压内联 #1e293b（深色指标值黑字看不见） */
        body.dark-mode .record-detail-modal .rd-ph-lab { color: #a3b1c6 !important; }
        /* ★2026-09-06 小日记（记录弹窗 view 卡）：浅色加深一档、深色模式提亮（图标/标签/正文全套） */
        .record-detail-modal .jd-lab { color: #52606f; }
        .record-detail-modal .jd-body { color: #1e293b; }
        body.dark-mode .record-detail-modal .jd-ic, body.dark-mode .record-detail-modal .jd-lab { color: #a3b1c6 !important; }
        body.dark-mode .record-detail-modal .jd-body { color: #e5e7eb !important; }
        /* ★2026-09-04 照片标签下注「最多 24 张」小字（浅色深一档可读，dark 提亮同 lab） */
        .record-detail-modal .rd-ph-hint {
            font-size: 10px;
            color: #64748b;
            line-height: 1.3;
            letter-spacing: 0.2px;
        }
        body.dark-mode .record-detail-modal .rd-ph-hint { color: #a3b1c6; }
        /* ★2026-09-05 P1-⑦ 计划过期红标（列表行名称旁） */
        .pl-overdue {
            display: inline-block;
            margin-left: 6px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            color: #dc2626;
            background: rgba(220, 38, 38, 0.1);
            border: 1px solid rgba(220, 38, 38, 0.35);
            border-radius: 99px;
            padding: 3px 7px;
            vertical-align: middle;
            flex-shrink: 0;
        }
        body.dark-mode .pl-overdue {
            color: #fca5a5;
            background: rgba(220, 38, 38, 0.16);
            border-color: rgba(248, 113, 113, 0.45);
        }
        /* ★2026-09-07 计划状态徽章扩展：今天（靛蓝，与日历今天强调同系）/ 明天（天蓝）——与过期红标同配方 */
        .pl-today {
            display: inline-block;
            margin-left: 6px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            color: #4f46e5;
            background: rgba(99, 102, 241, 0.12);
            border: 1px solid rgba(99, 102, 241, 0.4);
            border-radius: 99px;
            padding: 3px 7px;
            vertical-align: middle;
            flex-shrink: 0;
        }
        body.dark-mode .pl-today {
            color: #a5b4fc;
            background: rgba(99, 102, 241, 0.2);
            border-color: rgba(129, 140, 248, 0.55);
        }
        .pl-tomorrow {
            display: inline-block;
            margin-left: 6px;
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            color: #0369a1;
            background: rgba(2, 132, 199, 0.1);
            border: 1px solid rgba(2, 132, 199, 0.35);
            border-radius: 99px;
            padding: 3px 7px;
            vertical-align: middle;
            flex-shrink: 0;
        }
        body.dark-mode .pl-tomorrow {
            color: #7dd3fc;
            background: rgba(14, 165, 233, 0.16);
            border-color: rgba(56, 189, 248, 0.45);
        }
        body.dark-mode .record-detail-modal #rd-close,
        body.dark-mode .record-detail-modal #pd-close { color: #a3b1c6 !important; }
        /* ★2026-09-01 五项优化①：弹窗底部按钮统一尺寸（老弹窗默认 8px16px vs 日期/心情选择器 10px24px 不一致）
           只作用于 .confirm-modal-buttons 内的按钮，行内按钮（内联硬锁定）不受影响
           ★2026-09-23 补：把 .glass-btn 一并纳入 —— 中性按钮改造后（check-go-btn → glass-btn）
           没内联尺寸的那几个（日期选择器「确定」/ 保存二维码 / 同意并继续 / 分享）不再命中本规则，
           与旁边的取消按钮出现「一大一小」 */
        /* ★★2026-10-17 用户定调「按钮字号统一」
           ★这里是弹窗按钮的**真正生效层**：下面 4 个 class 的尺寸全被 !important 锁死，
             所以 JS 里各弹窗写的 13 / 13.5 / 14px 内联字号**本来就被这条覆盖**（等于白写）。
             把内联全删干净后，改这里才是真的改到外观 —— 统一为 16px（与 .confirm-btn-cancel 的声明一致）。 */
        .confirm-modal-buttons .confirm-btn-cancel,
        .confirm-modal-buttons .confirm-btn-delete,
        .confirm-modal-buttons .check-go-btn,
        .confirm-modal-buttons .glass-btn {
            /* ★2026-10-20 用户「有些按钮的字不在正中间，而且太大」：
               16px + 继承 line-height 1.6(25.6px) ⇒ 按钮被撑到 48px；收到 15px + 行高 1.2 ⇒ 40px。
               ★★内边距必须上下对称：上一版误加「上 11 / 下 9」当补偿，但实测宋体「取消」墨迹
                 asc13 / desc1，本来就该居中 —— 那 1px 反而把字压到偏下 1px（墨迹中心 21 vs 按钮 20），
                 用户就是在按钮内看出「飘」。改回 10/10 后墨迹偏差实测 = 0。 */
            padding: 10px 24px 10px !important;
            border-radius: 12px !important;
            font-size: 15px !important;
            line-height: 1.2 !important;
            min-width: 96px !important;
            font-weight: 600 !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }
        /* ★★2026-10-20 弹窗内按钮字号统一 15px（后代选择器 —— 覆盖嵌套容器里的，
           如导出弹窗 .space-y-3 内的三个全宽按钮；实测它们继承 16px 比容器内 15px 大）。 */
        .confirm-modal-content .confirm-btn-cancel,
        .confirm-modal-content .confirm-btn-delete,
        .confirm-modal-content .check-go-btn,
        .confirm-modal-content .glass-btn {
            font-size: 15px !important;
            line-height: 1.2 !important;
        }
        /* ★★2026-10-20 弹窗内「独立按钮」（不在 .confirm-modal-buttons 容器里 ——
           导出 / 导入 / 管理备份 / 选择备份文件 / 编辑标题 等全宽按钮）补 flex 垂直居中：
           实测取消键原为 inline-block、文字垂直偏上 0.6px（用户「有些按钮的字不在正中间」）。
           ★只给直接子：容器内的按钮已由 2714 规则 inline-flex 居中，不能再覆盖 display。 */
        .confirm-modal-content > .confirm-btn-cancel,
        .confirm-modal-content > .confirm-btn-delete,
        .confirm-modal-content > .check-go-btn,
        .confirm-modal-content > .glass-btn {
            display: flex !important;
            align-items: center;
            justify-content: center;
        }
        /* ★★2026-10-20 极窄屏（≤360px）弹窗按钮左右内边距收窄 —— 针对 Z Fold6 外屏（344×882）实测：
           16px 字号 + padding 24×2 + min-width 96 ⇒「暂不同意」(119) +「同意并继续」(137) + gap 12 = 268px，
           而 344 宽屏弹窗内容区仅 258px ⇒ 两键被迫换行成上下两行（按钮行高 48 → 107px，且宽度参差）。
           收到 padding 18 ⇒ 总宽 100 + 116 + 12 = 228px < 258px ⇒ 一行放下（320 宽屏 234px 也放得下）。
           ★min-width:96 保留（按钮宽度仍在 100/116 附近、视觉接近，不会一宽一窄过于突兀）。
           ★2026-10-20 补测 320 宽屏：padding 18 时两键 107+125+12 = 244px > 可用 234px 仍差 10px ⇒ 再收到 **15px**
             （两键 96+110+12 = 218px）：320 / 344 / 360 全部一行，且 16px 字号下左右 15px 仍不贴边。 */
        @media (max-width: 360px) {
            .confirm-modal-buttons .confirm-btn-cancel,
            .confirm-modal-buttons .confirm-btn-delete,
            .confirm-modal-buttons .check-go-btn,
            .confirm-modal-buttons .glass-btn {
                padding-left: 15px !important;
                padding-right: 15px !important;
            }
        }
        .confirm-modal-content {
            /* ★2026-10-22 用户定：弹窗底色 0.08 → 0.15（浅色下弹窗更实一点，内容与背景不再糊）
               注：深色模式另有 .dark-mode .confirm-modal-content（32% 深蓝）不受影响 */
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            padding: 20px;  /* 2026-08-11 用户要求：弹窗排版紧凑，减少留白（原 24px） */
            max-width: 400px;
            width: 100%;
            box-shadow:
                0 14px 40px rgba(0, 0, 0, 0.15),
                0 2px 10px rgba(0, 0, 0, 0.05),
                inset 0 -1px 0 rgba(0, 0, 0, 0.03);
        }
        .confirm-modal-title {
            /* ★2026-10-17 窄屏自动缩字号：≤320px 时「发现新版本 vX.Y.Z」这类含版本号的
               长标题在 20px 下会折成两行 ⇒ clamp 让 320px 降到 18px（仍单行），
               ≥375px 恢复 20px，中间连续过渡、不新增断点。 */
            font-size: clamp(18px, 5.2vw, 20px);
            font-weight: 900;
            color: #0f172a;   /* ★v1.1.2.8 浅色加深（原 #111827 偏淡） */
            margin-bottom: 6px;  /* 2026-08-11 紧凑：原 8px */
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'SimSun', '宋体', 'STSong', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
            letter-spacing: 0.02em;
        }
        /* ★★2026-10-16 弹窗内部间距统一 —— 改前这里**没有任何间距声明**，
           全靠各弹窗 message 内部 <p> 的默认 margin 偶然撑开 ⇒ 实测「正文 → 按钮」出现
           0px(14 个) / 2px / 14px / 16px(5 个) **五种**，常用确认弹窗正文紧贴按钮、长文弹窗却有空隙。 */
        .confirm-modal-message {
            color: #1f2937;  /* ★v1.1.2.8 浅色加深（原 #4b5563 偏淡） */
            margin: 0;       /* ★清掉外部下距，改由按钮组的 margin-top 统一提供 */
        }
        /* 清掉 message 内部最后一段的下距，避免与按钮组上距叠加成 32px */
        .confirm-modal-message > :last-child {
            margin-bottom: 0;
        }
        #photoUsageRow:active { background: rgba(100, 116, 139, 0.10); }
        .confirm-modal-buttons {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            margin-top: 16px;   /* ★★统一「正文/标题 → 按钮」间距（改前 0/2/14/16 五种） */
        }
        .confirm-btn-cancel {
            /* ★2026-09-01 浅色统一可见灰蓝（根治白玻璃底在白底不可见）：与行内删除/取消按钮同配方，
               深色模式由 .dark-mode .confirm-btn-cancel !important 覆盖回深色玻璃 */
            background: rgba(100, 116, 139, 0.14);
            border: 1px solid rgba(100, 116, 139, 0.6);
            color: #334155;
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            padding: 8px 16px;
            border-radius: 12px;  /* 与全局玻璃按钮圆角统一 */
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
            font-family: 'SimSun', '宋体', 'STSong', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
            font-weight: 900;
        }
        .confirm-btn-cancel:hover {
            background: rgba(100, 116, 139, 0.24);
            border-color: rgba(100, 116, 139, 0.8);
        }
        .confirm-btn-delete {
            background: rgba(239, 68, 68, 0.85);
            color: white;
            border: 1px solid rgba(239, 68, 68, 0.95);
            padding: 8px 16px;
            border-radius: 12px;  /* 与全局玻璃按钮圆角统一 */
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
            font-family: 'SimSun', '宋体', 'STSong', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
            font-weight: 900;
        }
        /* 空状态动画 */
        .empty-state-icon {
            animation: bounce 2s ease-in-out infinite;
        }
        
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        /* 模态框按钮动画 */
        .confirm-btn-cancel,
        .confirm-btn-delete {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .confirm-btn-cancel:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .confirm-btn-delete:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
        }
        
        
        /* 统计卡片动画 */
        .stat-card {
            opacity: 0;
            transform: translateY(20px) translateZ(0);
            animation: fadeInUp 0.5s ease-out forwards;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .stat-card:nth-child(1),
        .stat-card:nth-child(2) {
            animation-delay: 0.05s;
        }
        
        .stat-card:nth-child(3),
        .stat-card:nth-child(4) {
            animation-delay: 0.2s;
        }
        
        .stat-card:nth-child(5),
        .stat-card:nth-child(6) {
            animation-delay: 0.35s;
        }
        
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 表格行动画 */
        .table-row-animate {
            opacity: 0;
            transform: translateX(-20px) translateZ(0);
            animation: slideInLeft 0.4s ease-out forwards;
        }
        
        /* ★2026-09-01 记录列表按年份分组标题行 v2（图标+年份+次数+分隔线，深浅色自适应） */
        .year-group-row td {
            padding: 14px 4px 8px;
            border: none;
            border-bottom: 1px solid rgba(100, 116, 139, 0.2);  /* ★2026-09-01 年份标题与下面记录的分割线 */
        }
        .dark-mode .year-group-row td {
            border-bottom-color: rgba(255, 255, 255, 0.12);
        }
        .year-group-head {
            display: flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
        }
        .year-group-head .year-group-icon {
            font-size: 16px;
            color: #667eea;
            flex-shrink: 0;
        }
        .year-group-head .year-group-text {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.04em;
            color: #667eea;
            flex-shrink: 0;
        }
        .year-group-head .year-group-count {
            font-size: 11px;
            font-weight: 600;
            color: rgba(100, 116, 139, 0.85);
            flex-shrink: 0;
        }
        .dark-mode .year-group-head .year-group-icon { color: #818cf8; }
        .dark-mode .year-group-head .year-group-text { color: #818cf8; }
        .dark-mode .year-group-head .year-group-count { color: rgba(255, 255, 255, 0.5); }
        /* ★2026-09-05 优化②：year-group-head .year-group-line 死 CSS 已删（元素不存在） */
        
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes rowExit {
            to {
                opacity: 0;
                transform: translateX(30px) scaleY(0.9);
            }
        }
        
        .row-exit {
            animation: rowExit 0.35s ease-out forwards;
            overflow: hidden;
            transform-origin: top;
        }
        
        /* 按钮点击动画 */
        .btn-click-effect {
            position: relative;
            overflow: hidden;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        
        
        .btn-click-effect::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 120px;
            background: rgba(255, 255, 255, 0.35);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            transition: transform 0.4s ease, opacity 0.3s ease;
            pointer-events: none;
        }
        
        .btn-click-effect:active::after {
            transform: translate(-50%, -50%) scale(2.5);
            opacity: 1;
            transition: transform 0s, opacity 0s;
        }
        
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* ========== 全局动效设计 ========== */
        
        /* 1. 按钮涟漪效果 */
        .ripple-effect {
            position: relative;
            overflow: hidden;
            transition: transform 0.15s ease;
            cursor: pointer;   /* ★2026-09-17 补：波纹按钮原缺手型（支持作者的微信/支付宝按钮实测为 default） */
        }
        
        .ripple-effect:active {
            /* 点击效果已移除：无缩放、无波纹，保持静态 */
        }
        
        .ripple-effect::before {
            display: none;
        }
        
        .ripple-effect:active::before {
            display: none;
        }
        
        /* 2. 图标脉动动画增强（周期放慢降低 GPU 占用） */
        .icon-pulse {
            animation: iconPulse 4s ease-in-out infinite;
        }
        
        @keyframes iconPulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.9;
            }
            50% {
                transform: scale(1.08);
                opacity: 1;
            }
        }
        
        @keyframes iconFloat {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-3px) rotate(3deg);
            }
            75% {
                transform: translateY(-3px) rotate(-3deg);
            }
        }
        
        @keyframes iconSpin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        
        /* 4. 表格行高级动画 */
        .table-row-advanced {
            transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .table-row-advanced:hover {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.08), transparent);
        }
        
        /* 5. 模态框高级动画 */
        .modal-fade-scale {
            animation: modalFadeScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes modalFadeScale {
            0% {
                opacity: 0;
                transform: scale(0.8) translateY(20px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        /* 弹窗遮罩：grid 居中（最可靠，不受 backdrop-filter/transform 影响）。打开无动画（避免先暗后亮+偏移） */
        .modal-backdrop-animate {
            display: grid;
            place-items: center;
            place-content: center;
        }
        
        /* ★2026-08-27 弹窗淡出关闭已取消（用户要求直接关），modal-closing CSS 一并删除 */
        
        /* 提示类弹窗（保存路径/成功/失败）淡入淡出动画 */
        .toast-pop {
            animation: toastFadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes toastFadeIn {
            /* transform 始终只含 translateX(-50%)，与内联定位一致，杜绝二次偏移 */
            0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.92); }
            100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
        }
        /* toast 玻璃浅色（不透明度过高，液态玻璃质感） */
        .toast-glass {
            backdrop-filter: blur(2px) saturate(150%);   /* ★v16 严格统一底栏配方 */
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            border-radius: 12px;
            font-weight: 600;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
            /* ★2026-08-26 限宽收窄到原 75%（min(69vw,360px)）：长文案两行，更紧凑好看 */
            width: max-content;
            max-width: min(69vw, 360px) !important;
        }
        /* ★2026-08-26 长内容（导出文件名等）在 max-width 内折行不溢出：flex 内文本 span 允许收缩 + 任意断行 */
        .toast-glass span {
            min-width: 0;
            word-break: break-all;
            overflow-wrap: anywhere;
        }
        /* ★2026-08-23 v16 toast 严格统一：纯透明玻璃 + 彩色细边 + 主题字色 */
        .toast-glass.success {
            background: rgba(220, 252, 231, 0.40);   /* ★v18 深浅统一透明度 0.4 */
            border: 1px solid rgba(34, 197, 94, 0.55);
            color: #166534;
        }
        .toast-glass.error {
            background: rgba(254, 226, 226, 0.40);   /* ★v18 深浅统一透明度 0.4 */
            border: 1px solid rgba(220, 38, 38, 0.55);
            color: #b91c1c;
        }
        body.dark-mode .toast-glass.success {
            background: rgba(10, 60, 40, 0.40);
            border-color: rgba(74, 222, 128, 0.55);
            color: #bbf7d0;
        }
        /* ★2026-09-07 修复：info 原只设 border-color（无 style/width 不显示边框）也无底色 → 补齐成与 success/error/loading 同款配方（0.40 玻璃底 + 1px 灰蓝边 + 元素级字色） */
        .toast-glass.info {
            background: rgba(226, 232, 240, 0.40);
            border: 1px solid rgba(100, 116, 139, 0.55);
            color: #334155;
        }
        .toast-glass.info .material-icons { color: #64748b; }
        body.dark-mode .toast-glass.info {
            background: rgba(40, 50, 68, 0.40);
            border-color: rgba(148, 163, 184, 0.45);
            color: #e2e8f0;
        }
        body.dark-mode .toast-glass.info .material-icons { color: #94a3b8; }
        body.dark-mode .toast-glass.error {
            background: rgba(70, 15, 20, 0.40);
            border-color: rgba(248, 113, 113, 0.6);
            color: #fecaca;
        }
        /* loading 提示（★2026-09-10 与 info 拉成同一配方：两者同属中性灰蓝语义，靠转圈图标区分；改一个务必同步另一个） */
        .toast-glass.loading {
            background: rgba(226, 232, 240, 0.40);
            border: 1px solid rgba(100, 116, 139, 0.55);
            color: #334155;
        }
        body.dark-mode .toast-glass.loading {
            background: rgba(40, 50, 68, 0.40);
            border-color: rgba(148, 163, 184, 0.45);
            color: #e2e8f0;
        }
        .toast-fade-out {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        /* 6. 输入框聚焦动画 */
        .input-glow {
            transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 2026-08-11 3条优化：去掉 transition:all */
            box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
        }
        
        .input-glow:focus {
            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15), 0 4px 12px rgba(79, 70, 229, 0.2);
            transform: translateY(-1px);
        }
        
        @keyframes loadingDot {
            0%, 80%, 100% {
                transform: scale(0);
                opacity: 0.5;
            }
            40% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        @keyframes loadingPulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.5;
                transform: scale(0.95);
            }
        }
        
        @keyframes successBounce {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        @keyframes successCheck {
            0% {
                stroke-dashoffset: 100;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }
        
        @keyframes errorShake {
            0%, 100% {
                transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: translateX(-8px);
            }
            20%, 40%, 60%, 80% {
                transform: translateX(8px);
            }
        }
        
        @keyframes errorFade {
            0% {
                opacity: 0;
                transform: translateY(-10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 10. 微交互动画 */
        
        /* ========== ★2026-09-04 视图说明小标题 + 切换按钮文字 ========== */
        .view-caption {
            display: flex;
            align-items: center;
            justify-content: center;   /* ★2026-09-04 灰字小标题居中 */
            gap: 6px;
            font-size: 12px;
            line-height: 1.4;
            color: #52606f;            /* ★2026-09-04 对齐体系小字提档色（与 rd-met 标签同档） */
            margin: -0.5rem 0 0.875rem;
            padding: 0 2px;
            letter-spacing: 0.2px;
            text-align: center;
            cursor: pointer;           /* ★2026-09-05 提示灵活化：点一下收起本条说明（切换视图自动回来） */
            user-select: none;
            -webkit-user-select: none;
            transition: opacity 0.15s ease;
        }
        .view-caption:active { opacity: 0.55; }
        body.dark-mode .view-caption {
            color: #a3b1c6;            /* ★2026-09-04 dark 同 rd-met 标签提亮色 */
        }

        /* ★2026-09-18 山册彩边色条：服务山册顶部常驻图例（.mb-legend）；色值与卡片书脊 .mb-ridge-* 保持一致 */
        .ridge-legend-bar { width: 4px; height: 11px; border-radius: 2px; flex-shrink: 0; }
        .rl-1 { background: #0d9488; }
        .rl-2 { background: #0284c7; }
        .rl-3 { background: #2563eb; }
        .rl-4 { background: #4338ca; }
        .rl-5 { background: #9333ea; }
        body.dark-mode .rl-1 { background: #2dd4bf; }
        body.dark-mode .rl-2 { background: #0ea5e9; }
        body.dark-mode .rl-3 { background: #3b82f6; }
        body.dark-mode .rl-4 { background: #818cf8; }
        body.dark-mode .rl-5 { background: #c084fc; }

        /* ★2026-09-18 山册顶部常驻色带图例：轻量小字，窄屏自动折行（复用 .ridge-legend-bar + .rl-N，深浅色自动跟随） */
        .mb-legend {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 5px 8px;
            margin: 0 0 10px;
            padding: 0 2px;
            font-size: 11px;
            line-height: 1.3;
            color: #64748b;
            letter-spacing: 0.2px;
        }
        body.dark-mode .mb-legend { color: #94a3b8; }
        .mb-legend-label { font-weight: 600; margin-right: 2px; }
        .mb-legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
        .view-toggle-label {
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 0.5px;
        }
        /* ========== 玻璃按钮 ========== */
        /* ★2026-09-22 标题防挤压：右侧按钮多时（批量/＋/山册）标题被压窄，窄屏折成竖排两行
           —— 标题文字不换行 + 标题块不参与收缩（右侧按钮组自适应） */
        .title-text { white-space: nowrap; }
#statsTitle, #heatmapTitle, #recordsTitle, #plannedTitle, #settingsTitle { flex-shrink: 0; }
        /* ★2026-09-22 页面标题行防挤压（承上：.title-text 不折行 + 标题不收缩）
           ① 空间不足时控件组自动换到第二行并右对齐 —— 宁可换行，绝不把标题挤成竖排
           ② 窄屏收紧内边距 / 间距，尽量在常见手机宽度保持单行 */
        .panel-hdr { flex-wrap: wrap; row-gap: 8px; }
        .panel-hdr > div:last-child { margin-left: auto; }
        @media (max-width: 430px) {
            .panel-hdr > h1, .panel-hdr > h2 { padding-left: 4px; padding-right: 4px; gap: 6px; }
            .panel-hdr > div:last-child { gap: 4px; }
            .panel-hdr .total-badge { font-size: 11px; margin-right: 0; }
            .panel-hdr .glass-btn { padding-left: 8px; padding-right: 8px; }
        }

        .glass-btn {
            background: rgba(255, 255, 255, var(--glass-alpha));   /* ★2026-10-10 删「顶部微反光渐变」（光泽带）—— 遵守「禁光泽带/角反光/内光晕」铁律；原为 2026-08-23 液态玻璃方案 */
                    border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            color: #374151;
            cursor: pointer;   /* ★2026-09-17 补（原缺失 → computed 为 default，不像按钮） */
            box-shadow: 
                0 2px 8px rgba(0, 0, 0, 0.04);
            transition: transform 0.1s ease, background-color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
        }
        
        .glass-btn:hover {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(0, 0, 0, 0.12);
            box-shadow: 
                0 4px 16px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
        }

        /* ★2026-09-17 弹窗内的中性按钮（导出/导入/选择器弹窗的选项）：
           弹窗本身是白玻璃，.glass-btn 默认描边 rgba(0,0,0,0.08) 在白玻璃上几乎看不见 →
           按钮会"糊"进背景（用户 2026-09-17 连续两次指出）。这里换成可见的灰蓝描边（仍是中性色，不抢红/蓝的行动按钮语义）。
           只作用于弹窗内，不影响全站其它 37 处 .glass-btn 用法。 */
        .confirm-modal-content .glass-btn {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(100, 116, 139, 0.45);
        }
        .confirm-modal-content .glass-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(100, 116, 139, 0.7);
        }
        body.dark-mode .confirm-modal-content .glass-btn {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(148, 163, 184, 0.45);
        }
        body.dark-mode .confirm-modal-content .glass-btn:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(148, 163, 184, 0.7);
        }
        /* ★2026-09-20 深色下弹窗标题的靛蓝图标加深（实测）：内联 #4f46e5 在深色弹窗合成底（≈rgb(20,30,52)）
           上对比度仅 2.64:1，不足「图形元素 ≥ 3:1」；改用浅靛 #a5b4fc（8.33:1）。
           用属性选择器精准命中这一个内联色，避免影响已经达标的绿/琥珀/红标题图标（7.29 / 7.73 / 4.41:1）。 */
        body.dark-mode .confirm-modal-title .material-icons[style*="#4f46e5"] { color: #a5b4fc !important; }
        
        .glass-btn:active {
            transform: translateY(0) scale(0.97);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) inset;
        }
        
        /* 四角微光（柔和，不刺眼）：高亮均匀分布在按钮四角 */
        .corner-glow {
            position: relative;
            overflow: visible;
        }

        
        body.dark-mode .glass-btn {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.07);
            color: #e5e7eb;
            box-shadow: 
                0 2px 12px rgba(0, 0, 0, 0.2);
        }
        
        body.dark-mode .glass-btn:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 
                0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        /* 11. 数字滚动动画 */
        .number-scroll {
            animation: numberScroll 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
            will-change: transform, opacity; /* 2026-08-10 帧率优化 */
        }
        
        @keyframes numberScroll {
            0% {
                transform: translateY(20px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        /* 12. 难度徽章动画 */
        
        
        /* 16. 空状态动画增强 */
        .empty-state-animate {
            animation: emptyStateFloat 3s ease-in-out infinite;
            will-change: transform;
        }
        
        @keyframes emptyStateFloat {
            0%, 100% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-15px) scale(1.05);
            }
        }
        
        /* ★2026-09-05 优化②：.tooltip-animate + @keyframes tooltipFade 死 CSS 已删（零引用） */
        @keyframes dropdownSlide {
            0% {
                opacity: 0;
                transform: scaleY(0) translateY(-10px);
            }
            100% {
                opacity: 1;
                transform: scaleY(1) translateY(0);
            }
        }
        
        /* 21. 进度条动画 */
        
        
        @keyframes progressShine {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
        
        @keyframes notificationSlide {
            0% {
                opacity: 0;
                transform: translateX(100%);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes checkboxBounce {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }
        
        /* 24. 滚动条玻璃质感（★2026-09-03：透明轨道 + 半透明灰蓝滑块，同 restore-file-list 玻璃语言，深浅自适应） */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(100, 116, 139, 0.35);
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 116, 139, 0.55);
        }
        
        ::-webkit-scrollbar-thumb:active {
            background: rgba(100, 116, 139, 0.7);
        }
        body.dark-mode ::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.28);
        }
        body.dark-mode ::-webkit-scrollbar-thumb:hover {
            background: rgba(148, 163, 184, 0.45);
        }
        /* Firefox：同款细玻璃滚动条 */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
        }
        body.dark-mode * {
            scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
        }
        /* ★2026-09-03 小弹窗内滚动容器：同玻璃滑块色，收窄 6px 更精致（thumb/track 继承全局玻璃） */
        .confirm-modal-content::-webkit-scrollbar,
        .ms-scroll::-webkit-scrollbar,
        .confirm-modal-message::-webkit-scrollbar,
        .hcm-list::-webkit-scrollbar,
        .yr-body::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        /* 25. 页面过渡动画 */
        .page-transition {
            animation: pageTransition 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes pageTransition {
            0% {
                opacity: 0;
                transform: translateY(20px) scale(0.98);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        @keyframes refreshPop {
            0% { opacity: 0.55; transform: scale(0.98); }
            100% { opacity: 1; transform: scale(1); }
        }
        
        @keyframes countUp {
            0% {
                transform: translateY(20px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        /* 30. 脉冲波纹动画 */
        
        
        
        
        @keyframes pulseRing {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.8;
            }
            100% {
                transform: translate(-50%, -50%) scale(2);
                opacity: 0;            }
        }

        /* ★2026-08-31 计划完成庆祝：彩屑下落（轻量，播放完自动移除）；卡片复用 confirm-modal-content（热力图弹窗同款玻璃参数） */
        @keyframes confetti-fall {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(105vh) rotate(540deg); opacity: 0; }
        }
        /* ★2026-08-31 庆祝卡片：复用 confirm-modal-content（热力图弹窗同款玻璃参数），仅覆盖宽度与居中 */
        .celebration-card {
            width: min(78vw, 320px) !important;
            text-align: center;
        }
        
        /* 统计卡片彩色左边框恢复（在统一边框之上） */
        .glass-stat-card.blue-accent { border-left: 3px solid rgba(99, 102, 241, 0.32) !important; padding-left: 13px; }
        .glass-stat-card.orange-accent { border-left: 3px solid rgba(251, 146, 60, 0.32) !important; padding-left: 13px; }
        /* ★2026-08-25 总里程/总用时卡片 accent（与上面四色同体系） */
        .glass-stat-card.teal-accent { border-left: 3px solid rgba(20, 184, 166, 0.32) !important; padding-left: 13px; }
        .glass-stat-card.rose-accent { border-left: 3px solid rgba(244, 63, 94, 0.32) !important; padding-left: 13px; }
        /* ========== 徒步/计划表格（阅读态 v2） ========== */
        /* ★2026-09-04 v6 终版：三列表格 —— table-layout:auto + width:100%。
           ★修复：v5 曾用 table-layout:fixed 想"名称吃剩余+操作贴右缘"，但 fixed 布局下未显式设宽的
           名称列被浏览器压成 0 宽 → 名称列整体消失（真机 Edge headless 截图实证，jsdom 测不出 CSS 布局）。
           auto 布局按内容分配，名称/时间/操作三列自然排布且无列丢失。 */
        .rd-table { table-layout: auto; width: 100%; }
        .rd-table th, .rd-table td {
            vertical-align: middle;
            padding: 10px 8px !important;
            line-height: 1.5;
        }
        .rd-table th:last-child, .rd-table td:last-child {
            white-space: nowrap;
            text-align: center;
            overflow: visible;
        }
        .rd-time-th { width: 106px; }
        .rd-table td.rd-time-cell {
            font-size: 14px;         /* ★2026-09-04 用户定稿：时间字号 14px（原 12 太小、16 过大） */
            color: #52606f;          /* ★2026-09-04 16px 灰字同尺寸提档（原 #94a3b8 浅色过淡） */
            white-space: nowrap;
            text-align: center;
        }
        body.dark-mode .rd-table td.rd-time-cell {
            color: #cbd5e1;   /* 16px 深底再提亮一档（原 a3b1c6） */
        }
        .rd-name-main {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            word-break: break-all;
            line-height: 1.35;
            min-width: 0;
            width: 100%;
        }
        /* ========== 全局字重微调（稍微粗一点点） ========== */
        #recordsTable td, #plannedTripsTable td,
        #recordsTable th, #plannedTripsTable th {
            font-weight: 600 !important;
        }
        .glass-btn, .btn-click-effect, .edit-input, .sort-header {
            font-weight: 600;
        }
        /* ★2026-09-02 灵动液态玻璃 B：全 App 玻璃可点件统一"轻沉回弹"按压（0.96 液态手感，替代此前 0.88~0.97 不一的力度）
           放在所有 :active 定义之后生效；#addBtn 旋转、hm-red 背景加深等特殊反馈不在此列，各自保留 */
        .bottom-tabbar .tab-btn:active,
        .icon-glass-btn:active,
        .glass-btn:active,
        .btn-click-effect:active,
        .check-go-btn:active,
        .confirm-btn-cancel:active,
        .confirm-btn-delete:active,
        .dtp-cell:active,
        .mwp-opt:active,
        .hm-day:active {
            transform: scale(0.96);
        }
        /* ★2026-09-02 灵动液态玻璃 C：页面级背景流光（body 最底层 fixed 光斑，所有页面/背景共享，透过玻璃卡片可见；
           弹窗遮罩 rgba(0,0,0,0.3) 会自然压暗它，弹窗无需单独处理；prefers-reduced-motion 由下方全局规则自动停） */
        .aurora-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
            contain: layout style paint;
        }
        .aurora-bg i {
            position: absolute;
            display: block;
            border-radius: 50%;
            will-change: transform;
        }
        .aurora-bg i:nth-child(1) {
            /* ★2026-09-02 v3 明显+广+流动：52→70vw，透明度 0.20→0.30 */
            width: 70vw; height: 70vw; min-width: 340px; min-height: 340px;
            left: -14vw; top: -16vh;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.30) 0%, rgba(96, 165, 250, 0) 68%);
            animation: auroraA 5.5s ease-in-out infinite alternate;
        }
        .aurora-bg i:nth-child(2) {
            /* ★2026-09-02 v3 右下淡粉继续加大：58→76vw，透明度 0.16→0.26 */
            width: 76vw; height: 76vw; min-width: 360px; min-height: 360px;
            right: -16vw; bottom: -14vh;
            background: radial-gradient(circle, rgba(244, 114, 182, 0.26) 0%, rgba(244, 114, 182, 0) 68%);
            animation: auroraB 6s ease-in-out infinite alternate;
        }
        .aurora-bg i:nth-child(3) {
            /* ★2026-09-02 v3 中上青：38→54vw，透明度 0.13→0.22 */
            width: 54vw; height: 54vw; min-width: 280px; min-height: 280px;
            left: 32vw; top: -20vh;
            background: radial-gradient(circle, rgba(45, 212, 191, 0.22) 0%, rgba(45, 212, 191, 0) 68%);
            animation: auroraC 4.5s ease-in-out infinite alternate;
        }
        body.dark-mode .aurora-bg i:nth-child(1) {
            background: radial-gradient(circle, rgba(99, 102, 241, 0.26) 0%, rgba(99, 102, 241, 0) 68%);
        }
        body.dark-mode .aurora-bg i:nth-child(2) {
            background: radial-gradient(circle, rgba(190, 24, 93, 0.24) 0%, rgba(190, 24, 93, 0) 68%);
        }
        body.dark-mode .aurora-bg i:nth-child(3) {
            background: radial-gradient(circle, rgba(15, 118, 110, 0.22) 0%, rgba(15, 118, 110, 0) 68%);
        }
        /* ★2026-09-02 v3 三点折返轨迹（0/50/100% 不同方位+缩放起伏）+ 速度加快，走起来是蜿蜒流动 */
        @keyframes auroraA {
            0% { transform: translate3d(0, 0, 0) scale(1); }
            50% { transform: translate3d(12vw, -8vh, 0) scale(1.25); }
            100% { transform: translate3d(-9vw, 10vh, 0) scale(1.08); }
        }
        @keyframes auroraB {
            0% { transform: translate3d(0, 0, 0) scale(1.12); }
            50% { transform: translate3d(-11vw, 6vh, 0) scale(0.88); }
            100% { transform: translate3d(8vw, -10vh, 0) scale(1.28); }
        }
        @keyframes auroraC {
            0% { transform: translate3d(0, 0, 0) scale(0.95); }
            50% { transform: translate3d(-10vw, -9vh, 0) scale(1.22); }
            100% { transform: translate3d(12vw, 6vh, 0) scale(1.05); }
        }
        /* ★2026-09-02 年度回顾全屏页（玻璃质感，独立页面 feel） */
        .yr-panel {
            position: fixed;
            inset: 0;
            z-index: 260;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px;
            padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));   /* ★2026-09-03 iOS 网页：避开 home 指示条 */
        }
        .yr-mask {
            position: absolute;
            inset: 0;
            /* ★2026-09-03 与全 App 遮罩统一（confirm-modal 配方）：浅 0.3 / 深 0.7、无 blur */
            background: rgba(0, 0, 0, 0.3);
        }
        body.dark-mode .yr-mask {
            background: rgba(0, 0, 0, 0.7);
        }
        .yr-card {
            position: relative;
            width: 100%;
            max-width: 560px;
            height: auto;              /* ★2026-09-03 内容自适应高度（无月度柱状后内容变矮，撑满 92% 显上下空） */
            max-height: 92%;
            /* ★2026-09-03 玻璃质感与全 App 弹窗统一（confirm-modal-content 配方）：0.08 透 + blur(2px)，
               卡片近乎通透，视觉靠细白描边/阴影/内部玻璃子面板成形——与日期/心情选择器同一语言 */
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            box-shadow:
                0 14px 40px rgba(0, 0, 0, 0.15),
                0 2px 10px rgba(0, 0, 0, 0.05),
                inset 0 -1px 0 rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        body.dark-mode .yr-card {
            background: rgba(16, 26, 48, 0.32);
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            border-color: rgba(148, 180, 255, 0.18);
        }
        .yr-head {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(148, 163, 184, 0.2);
            flex-shrink: 0;
        }
        .yr-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 15px;
            font-weight: 600;
        }
        .yr-year-nav {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .yr-year {
            font-size: 15px;
            font-weight: 600;
            min-width: 52px;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        /* ★2026-09-03 深色弹窗下头部文字转浅（卡片换深玻璃 0.32 后深字不可见） */
        body.dark-mode .yr-title,
        body.dark-mode .yr-year {
            color: #e5e7eb;
        }
        .yr-body {
            flex: 1;
            overflow-y: auto;
            padding: 8px 14px 2px;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;   /* ★2026-09-03 iOS 适配：弹窗内滚动到边界不带动页面 */
        }
        /* ★2026-09-03 P3 定稿（用户示例版）：6 指标 3 列网格 + 文本面板（无月度柱状） */
        .yr-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 9px;
            margin-bottom: 12px;
        }
        .yr-metric {
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 12px;
            padding: 8px 11px;
            min-width: 0;
        }
        body.dark-mode .yr-metric {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.22);
        }
        .yr-metric .lab {
            font-size: 11px;
            color: #52606f;   /* ★2026-09-03 浅色提一档（原 #64748b） */
        }
        body.dark-mode .yr-metric .lab {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮 */
        }
        .yr-metric .uv {
            font-size: 18px;
            font-weight: 700;
            color: #334155;
        }
        .yr-metric .us {
            font-size: 12px;
            color: #64748b;
            font-weight: 400;
        }
        body.dark-mode .yr-metric .uv {
            color: #f3f4f6;
        }
        body.dark-mode .yr-metric .us {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮 */
        }
        /* 对比版：去年划线值 + 今年值 + 增幅 同一行（示例版式） */
        .yvo {
            display: flex;
            align-items: baseline;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 4px;
            min-width: 0;
        }
        .yold {
            font-size: 12px;
            color: #52606f;   /* ★2026-09-03 可读性：浅色 #94a3b8→#52606f（去年划线值可辨） */
            text-decoration: line-through;
            flex-shrink: 0;
        }
        body.dark-mode .yold {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮（原 #64748b 偏暗） */
        }
        .ychg {
            font-size: 11px;
            font-weight: 700;
            color: #15803d;
            flex-shrink: 0;
        }
        .ychg.down {
            color: #b91c1c;
        }
        .ychg.flat {
            color: #64748b;
        }
        body.dark-mode .ychg {
            color: #4ade80;
        }
        body.dark-mode .ychg.down {
            color: #f87171;
        }
        body.dark-mode .ychg.flat {
            color: #94a3b8;
        }
        /* 文本面板（今年=年度之最 / 对比=一年小结） */
        .yr-tab {
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 14px;
            padding: 10px 14px;
            font-size: 12px;
            line-height: 1.85;
            color: #475569;
        }
        body.dark-mode .yr-tab {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.22);
            color: #cbd5e1;
        }
        .yr-tab .tt {
            display: block;
            font-weight: 700;
            font-size: 12px;
            color: #334155;
            margin-bottom: 3px;
        }
        body.dark-mode .yr-tab .tt {
            color: #e5e7eb;
        }
        .yr-empty {
            text-align: center;
            padding: 60px 20px;
            color: #64748b;   /* ★2026-09-03 可读性：#94a3b8→#64748b */
            font-size: 14px;
        }
        /* ★2026-09-03 P3 底部操作区（统一版）：开关=方角玻璃按钮（同 App 按钮体系 r12，非胶囊）；
           点亮=靛蓝实心白字（同单选选中态）；关闭=confirm-btn-cancel 灰蓝玻璃 */
        .yr-foot {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid rgba(148, 163, 184, 0.2);
            flex-shrink: 0;
        }
        .yr-compare {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 24px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            min-width: 96px;
            cursor: pointer;
            color: #334155;
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-sizing: border-box;
            user-select: none;
            transition: background-color 0.15s, border-color 0.15s, color 0.15s;
        }
        body.dark-mode .yr-compare {
            color: #e5e7eb;
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.22);
        }
        .yr-compare:active {
            background: rgba(148, 163, 184, 0.2);
        }
        /* ★2026-09-03 P3 点亮态改玻璃质感（同 check-go-btn 配方：透底+实描边+主色字，非纯色实底） */
        .yr-compare.on {
            color: #4f46e5;
            background: rgba(79, 70, 229, 0.12);
            border: 1px solid rgba(79, 70, 229, 0.75);
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
        }
        body.dark-mode .yr-compare.on {
            color: #c7d2fe;
            background: rgba(99, 102, 241, 0.14);
            border-color: rgba(129, 140, 248, 0.7);
        }
        .yr-compare.on:active {
            background: rgba(79, 70, 229, 0.22);
        }
        /* ★2026-09-03 P0 定稿：行内复制条已移除（复制改走「＋添加」弹窗）；仅保留填充高亮 */
        /* 复制填充后：编辑行输入框常驻靛蓝描边 + 浅底（保存/取消/翻页重渲染后自然消失） */
        .copy-filled {
            border-color: rgba(79, 70, 229, 0.65) !important;
            background: rgba(79, 70, 229, 0.07) !important;
        }
        body.dark-mode .copy-filled {
            border-color: rgba(129, 140, 248, 0.7) !important;
            background: rgba(99, 102, 241, 0.14) !important;
        }
        /* ★2026-09-03 P0 复制选择弹窗（统一版）：复用 confirm-modal 玻璃体系；行卡同 dtp/mwp 玻璃格，
           选中整格靛蓝实心白字（与日期/心情选择器同款选中态） */
        /* ★2026-09-03 「＋添加」下拉条内嵌展开形态：收起只一条栏，点开展开（直接新建置顶 + 最近记录），选即执行 */
        .ap-field {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            text-align: left;
            padding: 10px 13px;
            border-radius: 12px;
            cursor: pointer;
            box-sizing: border-box;
            background: rgba(79, 70, 229, 0.08);
            border: 1px solid rgba(79, 70, 229, 0.4);
            transition: background-color 0.15s ease, border-color 0.15s ease;
            -webkit-user-select: none;
            user-select: none;
        }
        body.dark-mode .ap-field {
            background: rgba(99, 102, 241, 0.1);
            border-color: rgba(129, 140, 248, 0.45);
        }
        .ap-field:active {
            background: rgba(79, 70, 229, 0.16);
        }
        .ap-ic {
            color: #4f46e5;
            font-size: 18px;
            flex-shrink: 0;
        }
        body.dark-mode .ap-ic {
            color: #a5b4fc;
        }
        .ap-t {
            flex: 1;
            min-width: 0;
        }
        .ap-main {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #4338ca;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.dark-mode .ap-main {
            color: #c7d2fe;
        }
        .ap-sub {
            display: block;
            font-size: 11px;
            color: #64748b;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.dark-mode .ap-sub {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮（原 #94a3b8） */
        }
        .ap-arr {
            color: #64748b;
            font-size: 16px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }
        body.dark-mode .ap-arr {
            color: #94a3b8;
        }
        .ap-field.open .ap-arr {
            transform: rotate(180deg);
        }
        .ap-fold {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.22s ease;
        }
        .ap-fold.open {
            grid-template-rows: 1fr;
        }
        .ap-fold-inner {
            overflow: hidden;
            min-height: 0;
        }
        .ap-recent-tip {
            font-size: 10px;
            color: #64748b;
            margin: 0 4px 6px;
        }
        body.dark-mode .ap-recent-tip {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮 */
        }
        /* ★2026-09-03 v3：「直接新建」独立整行（靛蓝玻璃行卡，不藏进下拉） */
        .ap-new {
            display: flex;
            align-items: center;
            gap: 11px;
            width: 100%;
            text-align: left;
            padding: 12px 14px;
            border-radius: 12px;
            cursor: pointer;
            box-sizing: border-box;
            background: rgba(99, 102, 241, 0.07);
            border: 1px solid rgba(99, 102, 241, 0.35);
            transition: background-color 0.15s ease, border-color 0.15s ease;
            -webkit-user-select: none;
            user-select: none;
        }
        body.dark-mode .ap-new {
            background: rgba(99, 102, 241, 0.1);
            border-color: rgba(129, 140, 248, 0.4);
        }
        .ap-new:active {
            background: rgba(79, 70, 229, 0.16);
        }
        .ap-new .ic {
            color: #4f46e5;
            font-size: 19px;
            flex-shrink: 0;
        }
        body.dark-mode .ap-new .ic {
            color: #a5b4fc;
        }
        .ap-new .m1 {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #334155;
            line-height: 1.35;
        }
        body.dark-mode .ap-new .m1 {
            color: #e2e8f0;
        }
        .ap-new .s1 {
            display: block;
            font-size: 11px;
            color: #64748b;
            line-height: 1.35;
        }
        body.dark-mode .ap-new .s1 {
            color: #94a3b8;
        }
        .ap-seg {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 8px 0 10px;
            color: #64748b;
            font-size: 11px;
            font-weight: 500;
        }
        body.dark-mode .ap-seg {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮 */
        }
        .ap-seg::before,
        .ap-seg::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(100, 116, 139, 0.4);
        }
        body.dark-mode .ap-seg::before,
        body.dark-mode .ap-seg::after {
            background: rgba(148, 163, 184, 0.3);
        }
        .ap-field.chosen {
            border-color: rgba(79, 70, 229, 0.6);
            background: rgba(79, 70, 229, 0.06);
        }
        body.dark-mode .ap-field.chosen {
            border-color: rgba(129, 140, 248, 0.65);
            background: rgba(99, 102, 241, 0.1);
        }
        .ap-field.chosen .ap-ic,
        .ap-field.chosen .ap-main {
            color: #4338ca;
        }
        body.dark-mode .ap-field.chosen .ap-ic,
        body.dark-mode .ap-field.chosen .ap-main {
            color: #c7d2fe;
        }
        .ap-field.chosen .ap-sub {
            color: #64748b;
        }
        body.dark-mode .ap-field.chosen .ap-sub {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮 */
        }
        .hcm-list {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 52vh;
            padding: 2px 1px 2px;
            /* ★2026-09-03 防弹窗宽度抖动：滚动槽常驻，滚动条出现/消失不影响弹窗宽度 */
            scrollbar-gutter: stable;
            /* ★2026-09-03 iOS 适配：弹窗内滚动到边界不连带页面滚动 */
            overscroll-behavior: contain;
        }
        .hcm-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 12px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: #334155;
            flex-shrink: 0;
            transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
        }
        body.dark-mode .hcm-item {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.22);
        }
        .hcm-item:active {
            background: rgba(148, 163, 184, 0.22);
        }
        /* ★2026-09-03 选中改玻璃质感（同「和去年比」点亮配方：靛蓝透底+实描边+主色字，非纯色实底） */
        .hcm-item.sel {
            background: rgba(79, 70, 229, 0.12);
            border-color: rgba(79, 70, 229, 0.75);
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
        }
        /* ★2026-09-03 v3：单选指示圆点（未选空心灰圈 / 选中靛蓝实心+内白环，非按钮形态） */
        .hcm-dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 1.5px solid rgba(148, 163, 184, 0.7);
            flex-shrink: 0;
            box-sizing: border-box;
            display: inline-block;
            transition: border-color 0.12s ease, background 0.12s ease;
        }
        body.dark-mode .hcm-dot {
            border-color: rgba(148, 163, 184, 0.5);
        }
        .hcm-item.sel .hcm-dot {
            border-color: #4f46e5;
            background: #4f46e5;
            box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.85);
        }
        body.dark-mode .hcm-item.sel .hcm-dot {
            border-color: #818cf8;
            background: #818cf8;
        }
        body.dark-mode .hcm-item.sel {
            background: rgba(99, 102, 241, 0.16);
            border-color: rgba(129, 140, 248, 0.7);
        }
        .hcm-main {
            flex: 1;
            min-width: 0;
        }
        .hcm-row1 {
            display: flex;
            align-items: baseline;
            gap: 8px;
            min-width: 0;
        }
        .hcm-name {
            font-size: 15px;
            font-weight: 600;
            color: #334155;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.dark-mode .hcm-name {
            color: #e5e7eb;
        }
        .hcm-item.sel .hcm-name {
            color: #4f46e5;
        }
        body.dark-mode .hcm-item.sel .hcm-name {
            color: #c7d2fe;
        }
        .hcm-date {
            font-size: 12px;
            color: #64748b;
            flex-shrink: 0;
            font-variant-numeric: tabular-nums;
        }
        body.dark-mode .hcm-date {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮 */
        }
        .hcm-meta {
            font-size: 12px;
            color: #475569;
            margin-top: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.dark-mode .hcm-meta {
            color: #a3b1c6;
        }
        .hcm-item.sel .hcm-date {
            color: rgba(79, 70, 229, 0.72);
        }
        body.dark-mode .hcm-item.sel .hcm-date {
            color: rgba(199, 210, 254, 0.7);
        }
        .hcm-item.sel .hcm-meta {
            color: rgba(79, 70, 229, 0.85);
        }
        body.dark-mode .hcm-item.sel .hcm-meta {
            color: rgba(199, 210, 254, 0.85);
        }
        /* 「用这条填充」按钮禁用态（同 dtp/mwp 主按钮视觉体系） */
        .confirm-modal-buttons .check-go-btn:disabled,
        .confirm-modal-buttons .glass-btn:disabled {
            opacity: 0.45;
            box-shadow: none;
            cursor: default;
        }
        /* ★2026-09-02 山册视图（记录页 列表/山册 切换）：按山聚合卡片
           ★2026-09-03 双列名册 + 整行抽屉：每两座山一组 .mb-row；
           卡头占两列并排，点开某山 → 组内 .mb-drawer（grid-column 跨整行）在卡头行
           下方以整行宽度下拉照片/统计；卡头本身留在原列不动（用户需求 v2） */
        #mountainBookView {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .mb-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            align-items: start;
        }
        .mb-drawer {
            display: none;
            grid-column: 1 / -1;   /* 跨整行：卡头行下方整行拉开 */
            background: rgba(255, 255, 255, 0.32);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 14px;
            padding: 4px 12px 10px;
            margin-top: 2px;
        }
        body.dark-mode .mb-drawer {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.12);
        }
        .mb-drawer.open {
            display: block;
        }
        /* ★2026-10-20 抽屉山名标题：仅「同时展开 ≥2 个」时由 JS 显示（最上面那个不显示）。
           序号沿用卡头集章样式的小号版，山名小字加粗，低调不抢统计。 */
        .mb-drawer-title {
            display: none;   /* 默认隐藏，JS 按展开数量切换为 flex */
            align-items: center;
            gap: 6px;
            padding: 8px 2px 0;
            font-size: 12px;
            font-weight: 700;
            color: #475569;
        }
        body.dark-mode .mb-drawer-title { color: #cbd5e1; }
        .mb-drawer-title .mb-drawer-seal {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 4px;
            box-sizing: border-box;
            border-radius: 9px;
            background: rgba(100, 116, 139, 0.14);
            border: 1px solid rgba(100, 116, 139, 0.35);
            font-size: 10px;
            font-weight: 700;
            color: #64748b;
        }
        body.dark-mode .mb-drawer-title .mb-drawer-seal {
            background: rgba(148, 163, 184, 0.16);
            border-color: rgba(148, 163, 184, 0.4);
            color: #cbd5e1;
        }
        /* ★2026-09-03 抽屉本身已是独立面板：展开后最上边的分隔线删掉（第一块不画 border-top）
           ★2026-10-20 抽屉顶部新增山名标题 ⇒ 「第一个内容块」变成标题的下一个兄弟，也一并免掉 border-top */
        .mb-drawer > :first-child,
        .mb-drawer > .mb-drawer-title + * {
            border-top: none;
        }
        .mb-card {
            background: rgba(255, 255, 255, 0.32);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 16px;
            overflow: hidden;
            transition: background-color 0.2s ease, border-color 0.3s ease;
            min-width: 0;
        }
        body.dark-mode .mb-card {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.12);
        }
        /* ★2026-09-03 .mb-card.open 只做高亮态，布局由 .mb-drawer 承担（卡头留在原列） */
        /* ★2026-09-03 海拔书脊色带：右缘 + 下缘各 4px（右下包角成"书脊+底托"），
           按最高海拔分档（低山青绿 → 高山靛紫）；无海拔数据的山不带 */
        .mb-card.mb-ridge-1 {
            border-right: 4px solid #0d9488;
            border-bottom: 4px solid #0d9488;
        }
        .mb-card.mb-ridge-2 {
            border-right: 4px solid #0284c7;
            border-bottom: 4px solid #0284c7;
        }
        .mb-card.mb-ridge-3 {
            border-right: 4px solid #2563eb;
            border-bottom: 4px solid #2563eb;
        }
        .mb-card.mb-ridge-4 {
            border-right: 4px solid #4338ca;
            border-bottom: 4px solid #4338ca;
        }
        .mb-card.mb-ridge-5 {
            border-right: 4px solid #9333ea;
            border-bottom: 4px solid #9333ea;
        }
        body.dark-mode .mb-card.mb-ridge-1 {
            border-right-color: #2dd4bf;
            border-bottom-color: #2dd4bf;
        }
        body.dark-mode .mb-card.mb-ridge-2 {
            border-right-color: #0ea5e9;
            border-bottom-color: #0ea5e9;
        }
        body.dark-mode .mb-card.mb-ridge-3 {
            border-right-color: #3b82f6;
            border-bottom-color: #3b82f6;
        }
        body.dark-mode .mb-card.mb-ridge-4 {
            border-right-color: #818cf8;
            border-bottom-color: #818cf8;
        }
        body.dark-mode .mb-card.mb-ridge-5 {
            border-right-color: #c084fc;
            border-bottom-color: #c084fc;
        }
        .mb-head {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            cursor: pointer;
            transition: background-color 0.15s ease;
        }
        .mb-head:active {
            background: rgba(148, 163, 184, 0.1);
        }
        /* ★2026-09-03 集章序号圆章（C+B 方案）：按首登先后 01/02/03…，像册子盖满章 */
        .mb-seal {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            color: #534ab7;
            background: rgba(79, 70, 229, 0.07);
            border: 1.5px solid rgba(79, 70, 229, 0.4);
            letter-spacing: 0.5px;
        }
        body.dark-mode .mb-seal {
            color: #a5b4fc;
            background: rgba(129, 140, 248, 0.13);
            border-color: rgba(129, 140, 248, 0.55);
        }
        .mb-body {
            flex: 1;
            min-width: 0;
        }
        .mb-name {
            font-size: 13px;   /* ★2026-09-03 15→13：长山名（祥峪森林公园）能多显示几字 */
            font-weight: 600;
            color: #334155;
            display: -webkit-box;
            -webkit-line-clamp: 2;   /* ★2026-09-03 长名最多两行，不再一行截断成「祥峪森…」 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            word-break: break-all;
            line-height: 1.35;
        }
        body.dark-mode .mb-name {
            color: #e5e7eb;
        }
        /* ★2026-09-03 次数点阵已按用户要求删除：卡上只留 圆章 + 山名 */
        /* ★2026-09-03 抽屉整行宽：统计 6 格一行横排（不再 2 列 wrap；显隐由 .mb-drawer.open 整体控制） */
        .mb-stat {
            display: flex;
            gap: 0;
            border-top: 1px solid rgba(148, 163, 184, 0.16);
            padding: 10px 6px;
        }
        .mb-stat > div {
            flex: 1;
            text-align: center;
            min-width: 0;
        }
        .mb-stat .sv {
            font-size: 15px;
            font-weight: 700;
            color: #334155;
        }
        body.dark-mode .mb-stat .sv {
            color: #e5e7eb;
        }
        .mb-stat .sl {
            font-size: 10px;
            color: #52606f;   /* ★2026-09-03 浅色提档（原 #94a3b8 过淡） */
            margin-top: 1px;
        }
        /* ★2026-09-03 P0 山册照片回忆：抽屉里横排滑动这座山的全部照片，点照片进灯箱 */
        .mb-photos {
            border-top: 1px solid rgba(148, 163, 184, 0.16);
            padding: 10px 14px 2px;
        }
        .mb-photos-head {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 6px;
        }
        .mb-photos-tt {
            font-size: 12px;
            font-weight: 600;
            color: #475569;
            flex-shrink: 0;
        }
        body.dark-mode .mb-photos-tt {
            color: #cbd5e1;
        }
        .mb-photos-cnt {
            font-size: 11px;
            color: #52606f;   /* ★2026-09-03 浅色提档（日期串可读） */
            white-space: nowrap;   /* ★2026-09-03 日期含年份后防换行 */
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }
        body.dark-mode .mb-photos-cnt {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮（原 #64748b） */
        }
        .mb-photos-strip {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 6px;
            scrollbar-width: thin;
        }
        /* ★2026-09-03 照片横排带横向滚动条：收 4px 超细玻璃条（滑块继承全局玻璃灰蓝 + 透明轨道） */
        .mb-photos-strip::-webkit-scrollbar {
            height: 4px;
        }
        .mb-photos-strip::-webkit-scrollbar-track {
            background: transparent;
        }
        .mb-photos-strip::-webkit-scrollbar-thumb {
            background: rgba(100, 116, 139, 0.32);
            border-radius: 4px;
        }
        body.dark-mode .mb-photos-strip::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.24);
        }
        .mbp-item {
            position: relative;
            flex: 0 0 60px;   /* ★2026-09-03 小卡原地展开适配（原 76 跨整行用） */
            width: 60px;
            height: 60px;
            border-radius: 9px;
            overflow: hidden;
            cursor: pointer;
            background: rgba(148, 163, 184, 0.16);
            border: 1px solid rgba(148, 163, 184, 0.28);
            flex-shrink: 0;
        }
        .mbp-item:active {
            opacity: 0.8;
        }
        body.dark-mode .mbp-item {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.18);
        }
        .mbp-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            background: #e2e8f0;
        }
        body.dark-mode .mbp-item img {
            background: #1e293b;
        }
        /* ★2026-09-03 记录行（时间+↗）与照片角标已按用户要求删除：日期只在照片带标题「N 张 · MM-DD」汇总 */
        .mb-open-arrow {
            margin-left: auto;
            color: #94a3b8;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }
        body.dark-mode .mb-open-arrow {
            color: #a3b1c6;   /* ★2026-09-03 深色提亮（原 #64748b） */
        }
        .mb-card.open .mb-open-arrow {
            transform: rotate(180deg);
        }
        /* ★2026-08-28 五项优化③：系统开启"减少动态效果"时瞬间完成动画/过渡（可及性+省电；默认用户完全无感，动效全保留） */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ★2026-09-16 五项优化③：App 切到后台时暂停常驻动画（省电 / 省 GPU；
           页面不可见所以视觉零影响，回前台自动从原位继续；动效一个不删，仅暂停） */
        body.app-bg-paused * {
            animation-play-state: paused !important;
        }

        /* ========== 添加按钮 ========== */
        /* ★2026-08-25 添加按钮统一新版玻璃配方：删除旧灰调渐变覆盖层，回落 .glass-btn（与导入/导出/上传下载一致） */
        /* ★2026-09-10 补 border-red-500：原 Tailwind 类从未编译 → 标题为空时输入框无红边反馈 */
    .border-red-500 {
        border-color: #ef4444 !important;
    }


        /* ========== 山册「连接器」弹窗（2026-10-10 深色适配 + 选择框更明显） ========== */
        .mtn-merge-list {
            max-height: 180px;
            overflow-y: auto;
            border: 1.5px solid rgba(99, 102, 241, 0.45);
            border-radius: 10px;
            margin-bottom: 12px;
            background: rgba(148, 163, 184, 0.06);
            box-sizing: border-box;
        }
        .mtn-merge-opt {
            padding: 10px 12px;
            font-size: 13px;
            color: #1e293b;
            border-bottom: 1px solid rgba(148, 163, 184, 0.16);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        .mtn-merge-opt:last-child { border-bottom: none; }
        .mtn-merge-opt.on {
            color: #4f46e5;
            background: rgba(99, 102, 241, 0.10);
        }
        .mtn-merge-opt .mtn-merge-opt-check {
            font-size: 16px;
            color: #4f46e5;
        }
        .mtn-merge-empty {
            padding: 12px;
            font-size: 12px;
            color: #334155;
        }
        .mtn-merge-note {
            font-size: 11px;
            color: #334155;
        }
        .mtn-merge-note-strong {
            font-size: 12px;
            color: #334155;
        }
        .mtn-merge-input {
            width: 100%;
            padding: 9px 10px;
            border-radius: 10px;
            font-size: 13px;
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: rgba(255, 255, 255, 0.6);
            color: #1e293b;
            box-sizing: border-box;
            -webkit-appearance: none;
            appearance: none;
        }
        .mtn-merge-input::placeholder { color: rgba(51, 65, 85, 0.7); opacity: 1; }
        /* 深色模式：连接器弹窗文字/列表/输入框提亮 */
        body.dark-mode .mtn-merge-list {
            border-color: rgba(148, 180, 255, 0.42);
            background: rgba(148, 163, 184, 0.08);
        }
        body.dark-mode .mtn-merge-opt {
            color: #e5e7eb;
            border-bottom-color: rgba(148, 163, 184, 0.22);
        }
        body.dark-mode .mtn-merge-opt.on {
            color: #c7d2fe;
            background: rgba(129, 140, 248, 0.22);
        }
        body.dark-mode .mtn-merge-opt .mtn-merge-opt-check { color: #c7d2fe; }
        body.dark-mode .mtn-merge-empty { color: #cbd5e1; }
        body.dark-mode .mtn-merge-note,
        body.dark-mode .mtn-merge-note-strong { color: #cbd5e1; }
        body.dark-mode .mtn-merge-input {
            border-color: rgba(148, 180, 255, 0.42);
            background: rgba(255, 255, 255, 0.07);
            color: #f3f4f6;
        }
        body.dark-mode .mtn-merge-input::placeholder { color: #cbd5e1; }
        /* 山册抽屉「连接到另一座山」按钮深色提亮 */
        body.dark-mode .mtn-merge-btn { color: #cbd5e1 !important; }
        /* 三按钮（取消/断开/保存）窄屏换行 */
        .confirm-modal-buttons { flex-wrap: wrap; }
/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-orange-50: oklch(98% 0.016 73.684);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-600: oklch(64.6% 0.222 41.116);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-lime-400: oklch(84.1% 0.238 128.85);
    --color-lime-600: oklch(64.8% 0.2 131.684);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-teal-600: oklch(60% 0.118 184.704);
    --color-teal-700: oklch(51.1% 0.096 186.391);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
    --animate-spin: spin 1s linear infinite;
    --blur-lg: 16px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}