/*! www/app.css —— 由 index.html 内联 <style> 抽出（2026-10-10）
 *
 * ★级联顺序不可调整（硬约束，改了会静默破版）：
 *     图标字体 @font-face（仍在 index.html 的 <style>）
 *   → 本文件（自定义 CSS → Tailwind 编译产物，保持原序）
 *   → Tailwind 运行时 assets/vendor/tailwind4.1.13.js 注入
 *
 * ★本文件是「样式区」，改样式改这里；index.html 只管结构。
 * ★离线自足：已入 sw.js CORE_ASSETS / security.js HASH_FILES / prev-snapshot.js
 */
        body {
            background-color: #ffffff;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            min-height: 100dvh; /* 2026-08-14 iPhone 适配：dvh=动态视口（Safari 地址栏收起/展开不跳动），低版本回退 100vh */
            /* ★2026-08-27 滚动丝滑：touch 惯性滚动 + 防下拉弹性露白底 */
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            /* ★2026-09-03 iOS 网页适配：横竖屏旋转/缩放时禁止浏览器自动放大文字（排版不变形） */
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            font-size: 16px;
            font-family: 'SimSun', '宋体', 'STSong', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
            font-weight: 900;
            line-height: 1.6;
            letter-spacing: 0.02em;
            position: relative;
            overflow-x: hidden;
            touch-action: manipulation; /* 2026-08-14 iPhone 适配：禁双击缩放/去 300ms 触摸延迟 */
            color: #1e293b;
            /* ★2026-08-30 去网页感：全局禁长按选择/长按菜单（输入框编辑区在 body 层不受影响，另行放行）*/
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none; /* 禁长按图片弹"保存图片"菜单 */
            transition: background-color 0.2s ease; /* 2026-08-10 切换提速+掉帧修复：去掉 color 过渡（全页文字同时过渡→WebView掉帧），文字瞬切；★2026-09-07 此声明曾被 08-30 改造误挤出 body 规则，现归位 */
        }
        /* ★2026-08-30 输入框/文本域/编辑区放行选择（输入文字不受影响，长按选择仅限这些元素）*/
        input, textarea, [contenteditable="true"] {
            -webkit-user-select: text;
            user-select: text;
            -webkit-touch-callout: default;
        }
        
        /* 全局过渡变量 */
        :root {
            --theme-transition: 0.3s ease;
            --glass-shine: 0px;
            /* 液态玻璃透明度（固定默认值，不可调） */
            --glass-alpha: 0.10;
            --glass-alpha-tabbar: 0.10;
        }
        
        /* 白色模式文字覆盖 */
        .text-white { color: #1e293b !important; }
        .text-white\/90 { color: #334155 !important; }
        .text-white\/80 { color: #475569 !important; }
        .text-white\/70 { color: #64748b !important; }
        .text-white\/60 { color: #94a3b8 !important; }
        .text-white\/50 { color: #94a3b8 !important; }
        .text-white\/30 { color: #cbd5e1 !important; }
        
        /* 浅色模式彩色文字加深 */
        .text-blue-300 { color: #1e40af !important; font-weight: 700; text-shadow: 0 1px 2px rgba(255,255,255,0.6); }
        .text-green-300 { color: #15803d !important; font-weight: 700; text-shadow: 0 1px 2px rgba(255,255,255,0.6); }
        .text-orange-300 { color: #c2410c !important; font-weight: 700; text-shadow: 0 1px 2px rgba(255,255,255,0.6); }
        .text-purple-300 { color: #7e22ce !important; font-weight: 700; text-shadow: 0 1px 2px rgba(255,255,255,0.6); }
        /* ★2026-08-26 补 teal/rose（总里程/总用时，原缺定义 → 无颜色无光晕） */
        .text-teal-300 { color: #0f766e !important; font-weight: 700; text-shadow: 0 1px 2px rgba(255,255,255,0.6); }
        .text-rose-300 { color: #be123c !important; font-weight: 700; text-shadow: 0 1px 2px rgba(255,255,255,0.6); }
        /* 照片计数（1/9）深浅自适应：浅色深灰 / 深色浅白（原内联白字浅色模式下不可见） */
        /* ★2026-08-25 照片计数改层叠卡片角标（.photo-stack-count），旧 .photo-count 已删除 */
        /* v1.4.10.11 自检根治：彻底移除"切换期间禁用 backdrop-filter"逻辑！
           它就是所有闪烁的元凶（设置页白块/数据管理小框闪/帧率闪/底栏透明突变）——
           blur 从有到无再从无到有 = 两次突变；而 blur 保持开启时，
           玻璃元素背景色有 background-color 0.4s 过渡，是平滑渐变的，不会白块。 */
        
        /* ★2026-08-26 主题切换过渡：切主题瞬间全页面 0.3s 平滑渐变（背景/文字/边框色）
           ⚠️ 只过渡颜色属性，绝不碰 backdrop-filter（历史教训：禁用 blur 会白块闪烁）；
           ⚠️ !important 覆盖元素自身 transition 简写，400ms 内折叠动画等会暂时直切（概率极低，可接受） */
        .theme-transitioning,
        .theme-transitioning * {
            transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
        }
        
        /* 深色模式样式 */
        body.dark-mode {
            background-color: #0a1220;
            color: #f3f4f6;
        }
        
        /* 深色模式恢复白色文字（v1.4.10.4：提升灰字亮度，解决深色背景可见度低）
           对比度校准：#4b5563→#9ca3af、#6b7280→#a8b0bd，保证在 #0a1220 背景上可读 */
        body.dark-mode .text-white { color: #f3f4f6 !important; }
        body.dark-mode .text-white\/90 { color: #e5e7eb !important; }
        body.dark-mode .text-white\/80 { color: #d1d5db !important; }
        body.dark-mode .text-white\/70 { color: #a3adbc !important; }
        body.dark-mode .text-white\/60 { color: #9ca3af !important; }
        body.dark-mode .text-white\/50 { color: #8b93a1 !important; }
        body.dark-mode .text-white\/30 { color: #6b7280 !important; }
        
        /* 深色模式恢复彩色文字 */
        body.dark-mode .text-blue-300 { color: #93c5fd !important; }
        body.dark-mode .text-green-300 { color: #86efac !important; }
        body.dark-mode .text-orange-300 { color: #fdba74 !important; }
        body.dark-mode .text-purple-300 { color: #c4b5fd !important; }
        /* ★2026-08-26 深色 teal/rose（与上面四色同体系） */
        body.dark-mode .text-teal-300 { color: #5eead4 !important; }
        body.dark-mode .text-rose-300 { color: #fda4af !important; }
        
        .dark-mode .container {
            background: transparent;
        }
        
        /* 白色面板 → 玻璃面板 */
        .dark-mode .bg-white {
            background: rgba(15, 23, 42, 0.35) !important;
        }
        
        .dark-mode .bg-white.bg-opacity-90 {
            background: rgba(15, 23, 42, 0.35) !important;
            border-color: rgba(255, 255, 255, 0.06) !important;
        }
        
        .dark-mode .bg-gradient-to-t {
            background: linear-gradient(0deg, rgba(31, 41, 55, 0.8), rgba(55, 65, 81, 0.8)) !important;
        }
        
        .dark-mode .text-white/90 {
            color: #e5e7eb !important;
        }
        
        .dark-mode .text-gray-700 {
            color: #d1d5db !important;
        }
        
        .dark-mode .text-white/60 {
            color: #9ca3af !important;
        }
        
        .dark-mode .text-white/50 {
            color: #8b93a1 !important;
        }
        
        .dark-mode .text-white/30 {
            color: #6b7280 !important;
        }
        
        .dark-mode .text-blue-600 {
            color: #60a5fa !important;
        }
        
        .dark-mode .text-blue-800 {
            color: #93c5fd !important;
        }
        
        .dark-mode .text-blue-900 {
            color: #dbeafe !important;
        }
        
        .dark-mode .text-green-600 {
            color: #86efac !important;
        }
        
        .dark-mode .text-green-700 {
            color: #bbf7d0 !important;
        }
        
        .dark-mode .text-green-800 {
            color: #d1fae5 !important;
        }
        
        .dark-mode .text-green-900 {
            color: #ecfdf5 !important;
        }
        
        .dark-mode .text-orange-600 {
            color: #fdba74 !important;
        }
        
        .dark-mode .text-orange-700 {
            color: #fed7aa !important;
        }
        
        .dark-mode .text-orange-800 {
            color: #ffedd5 !important;
        }
        
        .dark-mode .text-purple-600 {
            color: #c4b5fd !important;
        }
        
        .dark-mode .text-purple-800 {
            color: #e9d5ff !important;
        }
        
        .dark-mode .text-purple-900 {
            color: #f3e8ff !important;
        }
        
        .dark-mode .text-red-600 {
            color: #fca5a5 !important;
        }
        
        .dark-mode .text-red-700 {
            color: #fecaca !important;
        }
        
        .dark-mode .text-red-800 {
            color: #fee2e2 !important;
        }
        
        .dark-mode .text-yellow-600 {
            color: #fde047 !important;
        }
        
        .dark-mode .text-yellow-700 {
            color: #fef08a !important;
        }
        
        .dark-mode .text-yellow-800 {
            color: #fef3c7 !important;
        }
        
        .dark-mode .text-amber-500 {
            color: #fbbf24 !important;
        }
        
        .dark-mode .text-amber-600 {
            color: #fcd34d !important;
        }
        
        .dark-mode .text-amber-700 {
            color: #fde68a !important;
        }
        
        .dark-mode .text-indigo-600 {
            color: #a5b4fc !important;
        }
        
        .dark-mode .text-indigo-700 {
            color: #c7d2fe !important;
        }
        
        .dark-mode .text-lime-600 {
            color: #bef264 !important;
        }
        
        .dark-mode .text-lime-700 {
            color: #d9f99d !important;
        }
        
        .dark-mode .border-gray-200 {
            border-color: rgba(75, 85, 99, 0.3) !important;
        }
        
        .dark-mode .border-gray-300 {
            border-color: rgba(75, 85, 99, 0.5) !important;
        }
        
        .dark-mode .border-blue-200 {
            border-color: rgba(59, 130, 246, 0.3) !important;
        }
        
        .dark-mode .border-green-200 {
            border-color: rgba(34, 197, 94, 0.3) !important;
        }
        
        .dark-mode .border-orange-200 {
            border-color: rgba(251, 146, 60, 0.3) !important;
        }
        
        .dark-mode .border-purple-200 {
            border-color: rgba(168, 85, 247, 0.3) !important;
        }
        
        .dark-mode .border-gray-100 {
            border-color: rgba(75, 85, 99, 0.2) !important;
        }
        
        .dark-mode .border-fuchsia-200 {
            border-color: rgba(217, 70, 239, 0.3) !important;
        }
        
        .dark-mode .border-white {
            border-color: rgba(75, 85, 99, 0.3) !important;
        }
        
        .dark-mode .hover\:bg-blue-50:hover {
            background-color: rgba(59, 130, 246, 0.1) !important;
        }
        
        .dark-mode .hover\:bg-white/5:hover {
            background-color: rgba(75, 85, 99, 0.2) !important;
        }
        
        .dark-mode .hover\:bg-gray-100:hover {
            background-color: rgba(75, 85, 99, 0.3) !important;
        }
        
        .dark-mode .hover\:bg-green-100:hover {
            background-color: rgba(34, 197, 94, 0.1) !important;
        }
        
        .dark-mode .hover\:bg-blue-100:hover {
            background-color: rgba(59, 130, 246, 0.1) !important;
        }
        
        .dark-mode .bg-white/5 {
            background-color: rgba(55, 65, 81, 0.5) !important;
        }
        
        .dark-mode .bg-gray-100 {
            background-color: rgba(75, 85, 99, 0.3) !important;
        }
        
        .dark-mode .bg-green-50 {
            background-color: rgba(34, 197, 94, 0.1) !important;
        }
        
        .dark-mode .bg-blue-50 {
            background-color: rgba(59, 130, 246, 0.1) !important;
        }
        
        .dark-mode .bg-amber-50 {
            background-color: rgba(251, 191, 36, 0.1) !important;
        }
        
        .dark-mode .bg-orange-50 {
            background-color: rgba(251, 146, 60, 0.1) !important;
        }
        
        .dark-mode .bg-yellow-50 {
            background-color: rgba(254, 240, 138, 0.1) !important;
        }
        
        .dark-mode .bg-lime-50 {
            background-color: rgba(253, 224, 71, 0.1) !important;
        }
        
        .dark-mode .bg-emerald-50 {
            background-color: rgba(52, 211, 153, 0.1) !important;
        }
        
        .dark-mode .bg-indigo-50 {
            background-color: rgba(129, 140, 248, 0.1) !important;
        }
        
        .dark-mode .bg-fuchsia-50 {
            background-color: rgba(245, 158, 11, 0.1) !important;
        }
        
        .dark-mode .bg-blue-100 {
            background-color: rgba(59, 130, 246, 0.2) !important;
        }
        
        .dark-mode .bg-green-100 {
            background-color: rgba(34, 197, 94, 0.2) !important;
        }
        
        .dark-mode .bg-orange-100 {
            background-color: rgba(251, 146, 60, 0.2) !important;
        }
        
        .dark-mode .bg-yellow-100 {
            background-color: rgba(254, 240, 138, 0.2) !important;
        }
        
        .dark-mode .bg-lime-100 {
            background-color: rgba(253, 224, 71, 0.2) !important;
        }
        
        .dark-mode .bg-emerald-100 {
            background-color: rgba(52, 211, 153, 0.2) !important;
        }
        
        .dark-mode .bg-indigo-100 {
            background-color: rgba(129, 140, 248, 0.2) !important;
        }
        
        .dark-mode .bg-fuchsia-100 {
            background-color: rgba(245, 158, 11, 0.2) !important;
        }
        
        .dark-mode .shadow-xl {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
        }
        
        .dark-mode .shadow-md {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
        }
        
        .dark-mode .shadow-sm {
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
        }
        
        .dark-mode .edit-input {
            /* ★2026-09-22 玻璃化：原深灰实底 → 轻白雾 + 玻璃配方（与浅色同语言） */
            background: rgba(255, 255, 255, 0.07) !important;
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            color: #f3f4f6 !important;
            border-color: rgba(255, 255, 255, 0.16) !important;
        }
        
        .dark-mode .edit-input:focus {
            border-color: rgba(59, 130, 246, 0.5) !important;
        }
        /* ★2026-09-06 修复：用时/里程复合框外层白盒在深色弹窗里刺眼 —— 盒子底色随 .edit-input 深灰化（输入框 transparent 被 dark !important 覆盖后同底成一体圆角块） */
        body.dark-mode .edit-merge-box {
            background: rgba(55, 65, 81, 0.9) !important;
            border-color: rgba(75, 85, 99, 0.5) !important;
        }
        .edit-input::placeholder { color: rgba(51, 65, 85, 0.85); opacity: 1; }
        body.dark-mode .edit-input::placeholder { color: #cbd5e1; opacity: 1; }   /* ★2026-09-23 可读性：#94a3b8 在「时/分」复合框（深色底更亮）上仅 3.4:1，提亮到 #cbd5e1 → 5.7:1 */   /* ★2026-09-06 深色占位提亮（时/分/里程空框占位字可见） */
        
        .dark-mode .confirm-modal-content {
            background: rgba(16, 26, 48, 0.32) !important;   /* ★五项优化①：同 glass-modal 深色 */
            backdrop-filter: blur(2px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(2px) saturate(150%) !important;
            border-color: rgba(148, 180, 255, 0.18) !important;
        }
        /* 确认弹窗暗色文字适配（标题/消息原本是深色，暗色背景下不可见） */
        .dark-mode .confirm-modal-title {
            color: #f3f4f6 !important;
        }
        .dark-mode .confirm-modal-message {
            color: #d1d5db !important;
        }
        
        .dark-mode .confirm-btn-cancel {
            background: rgba(16, 26, 48, 0.32) !important;   /* ★五项优化①：深色玻璃配方 */
            backdrop-filter: blur(2px) saturate(150%) !important;
            -webkit-backdrop-filter: blur(2px) saturate(150%) !important;
            color: #e5e7eb !important;
            border-color: rgba(148, 180, 255, 0.35) !important;
        }
        
        .dark-mode .confirm-btn-cancel:hover {
            background: rgba(107, 114, 128, 0.8) !important;
        }
        
        /* ★2026-08-23 热力图弹窗分享按钮：统一玻璃配方（原紫色渐变已弃） */
        .hm-share-btn {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            border: 1px solid rgba(100, 116, 139, 0.45);   /* ★2026-09-23 改为与关闭按钮同款中性边（白边在浅色弹窗上也不可见） */
            /* ★2026-09-23 修：原写死 color:#ffffff（为深色弹窗设计），浅色弹窗上白字看不见；
               此前是 .check-go-btn 的红字 !important 恰好压在后面才显红，换成 .glass-btn 后就露出来了 */
            color: #334155 !important;
            border-radius: 12px;   /* ★v5 尺寸对齐关闭按钮 */
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
            font-weight: 900;
            white-space: nowrap;
            transition: background-color 0.2s, border-color 0.2s;
        }
        body.dark-mode .hm-share-btn {
            background: rgba(16, 26, 48, 0.32);
            border-color: rgba(148, 180, 255, 0.35) !important;   /* ★2026-08-25 暗色统一为关闭按钮边框色（原 rgba(255,255,255,0.5)） */
            color: #e5e7eb !important;   /* ★2026-09-23 与 .dark-mode .confirm-btn-cancel 同值 */
        }
        
        /* ★2026-08-23 热力图弹窗 meta 项（心情/天气/同行）：标签式 + 浅色深字可读 */
        .hm-meta-item {
            font-size: 16px;
            color: #111827;   /* 浅色模式加深（原默认 #374151 看不清） */
            font-weight: 600;
        }
        body.dark-mode .hm-meta-item {
            color: #e5e7eb;   /* 深色模式浅字 */
        }
        /* ★2026-08-25 热力图弹窗 meta 标签/内容：★标签 #1f2937、内容 #374151（浅一档形成区别） */
        .hm-meta-label {
            color: #1f2937;
            font-weight: 600;
        }
        body.dark-mode .hm-meta-label {
            color: #e2e8f0;
        }
        .hm-meta-value {
            color: #374151;
            font-weight: 600;
        }
        body.dark-mode .hm-meta-value {
            color: #cbd5e1;
        }
        /* ★2026-08-25 记录行照片按钮（新版玻璃配方图标按钮，替代旧 glass-btn 26×26） */
        .icon-glass-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.08);
            /* ★2026-08-27 性能优化：去掉 backdrop-filter（图标按钮小而多，blur 无视觉意义） */
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: #374151;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            transition: background-color 0.2s, border-color 0.2s, transform 0.1s ease;
        }
        .icon-glass-btn:hover {
            background: rgba(255, 255, 255, 0.16);
            transform: translateY(-1px);
        }
        body.dark-mode .icon-glass-btn {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.22);
            color: #e5e7eb;
        }
        /* ★2026-09-01 热力图弹窗关闭按钮与全局 confirm-btn-cancel 统一（灰蓝底/深字跟随主题），
           原 v1.1.2.6 白字覆盖已删（当时浅色白玻璃底+白边时代产物） */
        
        /* 深色模式下的输入框聚焦效果 */
        .dark-mode .edit-input:focus {
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
        }
        
        /* 深色模式下的模态框背景优化 */
        .dark-mode .confirm-modal {
            background: rgba(0, 0, 0, 0.7) !important;
        }
        /* ★2026-09-03 深色滚动条已统一到「24. 滚动条玻璃质感」段（body.dark-mode 规则），此处旧灰轨道样式已删 */
        
        /* 深色模式下的选择框样式
           ★2026-08-10 修复 v2：用户反馈夜间模式难度下拉框双箭头 + 箭头不可见。
           ①双箭头根因：background 简写会重置 background-position/size/repeat，
           导致自定义箭头图错位平铺 + 系统箭头叠加。
           修复：改用 background-color 单独设底色（不用简写），并显式写全箭头位置/尺寸/不重复。
           ②箭头不可见根因：夜间要保留暗色主题（深底浅字），箭头必须浅色反转（否则深色箭头在暗底看不见）。 */
        .dark-mode select {
            background-color: rgba(55, 65, 81, 0.95) !important;
            color: #f3f4f6 !important;
            border-color: rgba(75, 85, 99, 0.5) !important;
        }
        
        .dark-mode select.edit-input {
            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='%23f3f4f6' 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") !important;
            background-repeat: no-repeat !important;
            background-position: right 8px center !important;
            background-size: 12px !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
        }
        
        .dark-mode select:focus {
            border-color: rgba(59, 130, 246, 0.5) !important;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
        }
        
        .dark-mode select option {
            background-color: rgba(31, 41, 55, 0.95) !important;
            color: #f3f4f6 !important;
        }
        
        
        /* 难度徽章（★2026-08-25 玻璃质感：半透明背景 + 细边框，内联覆盖 background/border-color） */
        
        
        
        /* ★2026-08-25 检查更新弹窗「检查」按钮：浅红玻璃质感——背景更透更浅、边框红更明显（用户要求）
           ★2026-08-25 !important 防被后定义的 .confirm-btn-delete（实色红）覆盖 */
        .check-go-btn {
            background: rgba(254, 226, 226, 0.08) !important;
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            border: 1px solid rgba(220, 38, 38, 0.9) !important;
            color: #b91c1c !important;
            /* ★2026-09-17 补全基础定义：弹窗内由 .confirm-modal-buttons 限定提供，
               全宽选项按钮（导出/导入弹窗）落在该容器外，需在此补齐（否则圆角 0、无手型） */
            border-radius: 12px;
            cursor: pointer;
        }
        body.dark-mode .check-go-btn {
            background: rgba(70, 15, 20, 0.08) !important;
            border-color: rgba(248, 113, 113, 0.9) !important;
            color: #fecaca !important;
        }

        /* ★2026-09-04 批量多选框：appearance:none 玻璃自绘——选中态=浅红玻璃+红勾（与 .check-go-btn 删除语义同设计语言），
           不再用原生 accent-color 深红块；未选=白玻璃+灰蓝可见边，dark 对应暗玻璃+亮边 */
        .batch-check,
        .planned-batch-check {
            appearance: none;
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 6px;
            cursor: pointer;
            vertical-align: middle;
            margin: 0;
            padding: 0;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(100, 116, 139, 0.35);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
            transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
        }
        .batch-check:checked,
        .planned-batch-check:checked {
            background: rgba(254, 226, 226, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23b91c1c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
            border-color: rgba(220, 38, 38, 0.9);
        }
        body.dark-mode .batch-check,
        body.dark-mode .planned-batch-check {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.28);
            box-shadow: none;
        }
        body.dark-mode .batch-check:checked,
        body.dark-mode .planned-batch-check:checked {
            background: rgba(70, 15, 20, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fecaca' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
            border-color: rgba(248, 113, 113, 0.9);
        }
        /* 图标动画 */
        /* 添加按钮动画（★2026-08-25 记录页+计划页统一：#addPlannedTripBtn 同步 hover 旋转放大） */
        #addBtn, #addPlannedTripBtn {
            transition: transform 0.1s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
        }
        
        #addBtn:hover, #addPlannedTripBtn:hover {
            transform: scale(1.1) rotate(90deg);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }
        
        #addBtn:active, #addPlannedTripBtn:active {
            transform: scale(0.95) rotate(90deg);
        }
        
        /* 帧率显示（顶栏右侧，v1.4.10.2 美化：胶囊形 + 深色适配） */
        .fps-display {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-family: 'JetBrains Mono', 'Consolas', monospace;
            color: #ffffff;
            backdrop-filter: blur(2px) saturate(150%);   /* ★五项优化①：帧率框 blur 8→2 统一玻璃配方 */
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, 0.5);   /* ★五项优化①：亮边统一 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
            white-space: nowrap;
            letter-spacing: 0.3px;
            transition: background-color 0.3s ease;
        }
        .fps-display .material-icons {
            font-size: 14px;
            opacity: 0.9;
        }
        .fps-display .fps-unit {
            opacity: 0.75;
            font-size: 10px;
            letter-spacing: 0.5px;
        }
        #fpsValue {
            min-width: 22px;
            text-align: center;
            font-weight: 700;
        }
        body.dark-mode .fps-display {
            border-color: rgba(255, 255, 255, 0.5);   /* ★五项优化①：深色亮边统一 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        
        /* 标题动画 */
        #appTitle {
            transition: transform 0.3s ease; /* 2026-08-11 3条优化：只过渡 hover 的 transform */
            /* 顶栏标题 = 全 App 最大标题（不受移动端 h1 覆盖） */
            font-size: 27px !important;
            line-height: 1.3;
        }
        .title-mountain-icon {
            font-size: 1.7rem !important;
        }
        
        #appTitle:hover {
            transform: scale(1.02);
        }
        /* v1.4.12.9：顶栏标题可编辑——铅笔图标提示（浅色深灰/暗色浅灰，hover 变主色） */
        /* v1.0.7.7 徒步足迹热力图：红色渐变 + 日历式月视图 */
        /* ★2026-09-03 年月单框（替代两个下拉 select）+ 选择弹窗（年份 chips + 月份 12 格） */
        /* ★2026-09-04 .hm-ym-btn 死 CSS 已删（年月框改 glass-btn 同款） */
        .hm-ym-arr {
            opacity: 0.7;
        }
        .hmyp-yrs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        .hmyp-yr {
            padding: 6px 14px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            color: var(--color-text-primary);
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.4);
            transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
        }
        body.dark-mode .hmyp-yr {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.22);
        }
        /* ★2026-09-03 选中=玻璃配方（同 hcm-item.sel 定稿：半透明靛蓝透底+细描边+blur，禁纯色实底） */
        .hmyp-yr.sel {
            color: #4f46e5;
            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%);
        }
        body.dark-mode .hmyp-yr.sel {
            color: #c7d2fe;
            background: rgba(99, 102, 241, 0.16);
            border-color: rgba(129, 140, 248, 0.7);
        }
        .hmyp-months {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            /* ★2026-09-16 修复：原无下间距 → 月份网格与取消/确定贴在一起 */
            margin-bottom: 12px;
        }
        .hmyp-m {
            text-align: center;
            padding: 8px 0;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            color: var(--color-text-primary);
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.4);
            transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
            box-sizing: border-box;
        }
        body.dark-mode .hmyp-m {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.22);
        }
        .hmyp-m.sel {
            color: #4f46e5;
            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%);
        }
        body.dark-mode .hmyp-m.sel {
            color: #c7d2fe;
            background: rgba(99, 102, 241, 0.16);
            border-color: rgba(129, 140, 248, 0.7);
        }
        .hmyp-m.no {
            opacity: 0.35;
            pointer-events: none;
        }
        .hm-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            font-size: 12px;
            color: rgba(100, 116, 139, 0.7);
            margin-bottom: 4px;
        }
        .hm-calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
        }
        .hm-day {
            aspect-ratio: 1 / 1;
            min-height: 24px; /* 2026-08-21 旧WebView兼容：aspect-ratio 不支持时格子不塌陷 */
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 600;
            color: rgba(51, 65, 85, 0.55);
            background-color: rgba(148, 163, 184, 0.15);
            cursor: pointer;
            transition: transform 0.15s ease, background-color 0.2s ease;
        }
        .hm-day.empty { background: transparent; cursor: default; }
        /* ★v1.1.2.10 红格子玻璃化：半透明红玻璃 + 红细描边 + 深红字 */
        .hm-day.hm-red { background-color: rgba(220, 38, 38, 0.22); color: #b91c1c; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.45); }
        .hm-day.hm-red:active { background-color: rgba(220, 38, 38, 0.35); }
        body.dark-mode .hm-day { color: rgba(243, 244, 246, 0.65); background-color: rgba(148, 163, 184, 0.12); }
        body.dark-mode .hm-day.empty { background: transparent; }
        body.dark-mode .hm-day.hm-red { background-color: rgba(239, 68, 68, 0.16); color: #fecaca; box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.4); }
        body.dark-mode .hm-day.hm-red:active { background-color: rgba(239, 68, 68, 0.28); }
        .container {
            margin-left: 0;
            margin-right: 0;
            padding: 0;
            padding-top: calc(56px + env(safe-area-inset-top, 0px));
            /* 底部留出悬浮底栏的高度；min-height:100vh 含 padding，内容不足一屏时页面恰好一屏不滚动 */
            padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
            /* ★2026-08-27 五项优化：键盘弹出时列表平滑让位（与搜索框 bottom 0.25s 过渡同步，消除瞬跳） */
            transition: padding-bottom 0.25s ease;
            min-height: 100vh;
            min-height: 100dvh; /* 2026-08-14 iPhone 适配：动态视口 */
            position: relative;
            z-index: 1;
        }
        
        /* ========== 底部悬浮液态玻璃导航栏 ========== */
        .tab-page {
            animation: tabPageFadeIn 0.28s ease both;
        }
        @keyframes tabPageFadeIn {
            0% { opacity: 0; transform: translateY(6px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        /* 2026-08-10 设置页逐块动效（机制修复）：不用 CSS 常驻动画——class 切换(主题)会被 WebView 重触发
           → 数据管理框空白1秒。改为：元素默认无动画，切 tab 到设置页时由 JS 临时加 .block-anim 类触发，
           播完自动移除（见 switchTab）。主题切换时元素无动画，绝不会被重触发 */
        #tab-settings .glass-panel > * {
            opacity: 1;
        }
        #tab-settings .glass-panel > *.block-anim {
            animation: settingsBlockIn 0.18s ease both;   /* ★2026-08-25 缩短：原 0.3s+0.56s 延迟=最后块 0.86s 才出现（数据管理框空白1秒元凶） */
        }
        #tab-settings .glass-panel > *.block-anim:nth-child(2) { animation-delay: 0.04s; }
        #tab-settings .glass-panel > *.block-anim:nth-child(3) { animation-delay: 0.08s; }
        #tab-settings .glass-panel > *.block-anim:nth-child(4) { animation-delay: 0.12s; }
        #tab-settings .glass-panel > *.block-anim:nth-child(5) { animation-delay: 0.16s; }
        #tab-settings .glass-panel > *.block-anim:nth-child(6) { animation-delay: 0.20s; }
        #tab-settings .glass-panel > *.block-anim:nth-child(7) { animation-delay: 0.24s; }
        #tab-settings .glass-panel > *.block-anim:nth-child(8) { animation-delay: 0.28s; }
        @keyframes settingsBlockIn {
            0% { opacity: 0; transform: translateY(6px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        /* ★2026-08-25 旧 WebView gap 兜底（Chrome <84 不支持 flex/grid gap）：仅旧内核生效，新内核零影响 */
        @supports not (gap: 1px) {
            .bottom-tabbar .tab-btn + .tab-btn { margin-left: 6px; }
            .confirm-modal-buttons button + button { margin-left: 12px; }
            .grid[class*="grid-cols-3"][class*="gap-2"] > * { margin: 4px; }
            .grid[class*="grid-cols-4"][class*="gap-3"] > * { margin: 6px; }
        }
        /* ★2026-10-08 折叠屏适配（大折叠 / 阔折叠 / 小折叠展开态）
           背景：Tailwind 产物里的 .container 从 40rem(640px) 起就限宽（40rem→640 / 48rem→768），
           但本项目的「居中」规则原先只在 ≥1024px 生效 → 640~1023px 区间变成「限宽但左对齐」，
           屏幕右侧堆出一大片空白（大折叠内屏 673~900px 正好落在这个区间）。
           ⇒ 把居中限宽下探到 600px。手机（<600px）保持全宽，布局零影响。 */
        @media (min-width: 600px) and (max-width: 1023.98px) {
            .container.container {
                max-width: 900px;
                margin-left: auto;
                margin-right: auto;
                /* 内容不贴屏幕边（折叠屏展开后屏幕变宽，贴边会显得局促） */
                padding-left: 20px;
                padding-right: 20px;
            }
        }
        /* ★2026-08-25 iPad/大屏适配（仅 ≥1024px 生效，手机布局零影响）：内容限宽居中 + 底栏不拉伸 */
        /* ★2026-08-29 .container.container 双类提特异性：压过 Tailwind 产物同名 .container（3233 行 64rem=1024px 会覆盖 900px） */
        @media (min-width: 1024px) {
            .container.container { max-width: 900px; margin-left: auto; margin-right: auto; }
            .bottom-tabbar { max-width: 460px; }
            /* ★2026-09-03 iOS/桌面网页适配：搜索条不再贴满全屏宽度，与内容同宽居中 */
            .global-search-bar { left: 50%; right: auto; width: min(100%, 520px); transform: translateX(-50%); }
        }
        .bottom-tabbar {
            /* 悬浮固定：始终位于屏幕下方，不随内容滚动 */
            position: fixed;
            /* 2026-08-14 iPhone 适配：底部安全区（home 指示条）避开 */
            bottom: calc(14px + env(safe-area-inset-bottom, 0px));
            left: 50%;
            transform: translateX(-50%);
            z-index: 40;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 12px 16px; /* 2026-08-10 底栏增高 8px→12px */
            border-radius: 999px;
            /* ★2026-08-23 v10 用户定稿：干净透明玻璃（无弧带/无色散）+ 浮动 + 玻璃边 */
            /* ★2026-08-26 浅色模式可见性微调：白背景上 0.08 几乎不可见 → 0.2（一点点，不厚重） */
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(2px) saturate(150%);   /* ★2026-08-23 v12 更透更轻：blur 4→2px，alpha 0.12→0.08 */
            -webkit-backdrop-filter: blur(2px) saturate(150%);   /* ★五项优化①：-webkit 与标准属性统一 2px */
            border: 1px solid rgba(148, 163, 184, 0.2);
            /* ★2026-08-25 底栏底部阴影删除（用户要求）：去掉外投影，仅留底部内描边 */
            box-shadow:
                inset 0 -1px 0 rgba(0, 0, 0, 0.04);
            -webkit-tap-highlight-color: transparent;
            transition: background-color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* 切换提速 */
            /* v1.4.10.5 修复：提升渲染层 + 原地淡入，避免 WebView 加载期 fixed+translateX 抖动（从左边滑向中间） */
            transform: translateX(-50%) translateZ(0);
            will-change: transform;
            animation: tabbarFadeIn 0.35s ease-out both;
        }
        @keyframes tabbarFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .bottom-tabbar .tab-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 8px 18px;
            border: none;
            border-radius: 999px;
            background: transparent;   /* ★2026-08-23 v13 非激活按钮彻底无框：去掉 blur（边缘不再有框感） */
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .bottom-tabbar .tab-btn .tab-label {
            /* 文字强制横向显示，绝不竖排 */
            writing-mode: horizontal-tb;
            text-orientation: mixed;
            white-space: nowrap;
            line-height: 1.2;
            font-size: 12px;
            font-weight: 700;
        }
        .bottom-tabbar .tab-btn:active {
            transform: scale(0.94);
        }
        .bottom-tabbar .tab-btn .material-icons {
            font-size: 22px;
            line-height: 1;
            display: inline-block;
            transform: translateZ(0);
        }
        /* 底栏图标点击弹跳动画 */
        .tab-icon-bounce {
            animation: tabIconBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            will-change: transform; /* 2026-08-10 帧率优化：提前建合成层 */
        }
        @keyframes tabIconBounce {
            0% { transform: scale(1) translateY(0); }
            40% { transform: scale(1.3) translateY(-3px); }
            70% { transform: scale(0.92) translateY(1px); }
            100% { transform: scale(1) translateY(0); }
        }
        /* ★2026-08-19 v1.1.0.3 底栏拖动果冻质感：拖动中按钮弹性形变 + 相邻粘连拉扯 + 松手确认弹跳 */
        .bottom-tabbar .tab-btn {
            transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
            will-change: transform;
        }
        .bottom-tabbar .tab-btn.drag-target {
            transform: scale(1.18, 0.88); /* 手指下按钮果冻压扁拉伸 */
        }
        .bottom-tabbar .tab-btn.drag-adj-left {
            transform: translateX(-7px) scale(1.04); /* 左侧相邻按钮粘连拉扯 */
        }
        .bottom-tabbar .tab-btn.drag-adj-right {
            transform: translateX(7px) scale(1.04); /* 右侧相邻按钮粘连拉扯 */
        }
        @keyframes tabDragConfirm {
            0% { transform: scale(1.18, 0.86); }
            45% { transform: scale(0.94, 1.1); }
            100% { transform: scale(1, 1); }
        }
        .bottom-tabbar .tab-btn.drag-confirm {
            animation: tabDragConfirm 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .bottom-tabbar .tab-btn.active {
            /* ★2026-08-23 v13 激活按钮：浅色下可见的靛蓝框 + 微亮背景（按到哪框到哪） */
            background: rgba(255, 255, 255, 0.22);
            color: #4f46e5;
            box-shadow:
                inset 0 0 0 1.5px rgba(99, 102, 241, 0.18);
        }
        body.dark-mode .bottom-tabbar {
            /* ★v10 深色干净透明玻璃 */
            background: rgba(18, 28, 50, 0.30);
            border-color: rgba(180, 205, 255, 0.30);
            /* ★2026-08-25 底栏底部阴影删除（与浅色一致） */
            box-shadow:
                inset 0 -1px 0 rgba(0, 0, 0, 0.25);
        }
        body.dark-mode .bottom-tabbar .tab-btn {
            color: #94a3b8;
        }
        body.dark-mode .bottom-tabbar .tab-btn.active {
            background: rgba(255, 255, 255, 0.10);
            color: #c7d2fe;
            box-shadow:
                inset 0 0 0 1.5px rgba(129, 140, 248, 0.22);
        }
        /* ========== 设置页 - 关于卡片 ========== */
        .about-card {
            /* ★2026-08-31 定版：不做"卡片套卡片"——去掉内层卡片外观（背景/边框/毛玻璃），
               内容直接放在外层 settings-group 玻璃卡片里（与其他设置分组完全一致） */
            padding: 6px 0 2px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 8px;
        }
        .about-card .about-logo {
            font-size: 60px;   /* ★2026-09-06 放大（54→60，用户定稿：60px 即可） */
            line-height: 1;
            filter: drop-shadow(0 6px 16px rgba(102, 126, 234, 0.35));
        }
        .about-card .about-name {
            font-size: 21px;
            font-weight: 800;
            color: #1e293b;
            letter-spacing: 0.02em;
        }
        .about-card .about-version {
            font-size: 13px;
            color: #64748b;
            font-weight: 600;
        }
        /* ★2026-09-29 官网 / GitHub 入口行（关于页）：两个入口**一行横排居中**。
           ★统一用 .about-link 一套样式（原来官网是 .about-site 单独一套、GitHub 是裸内联）
           —— 现在两者外观完全一致（同字号/字重/色），只是图标不同。
           后续若要加第三个入口（如 B站/公众号），直接往里加一个 .about-link 即可。
           ★2026-09-29 用户要求：**去掉下划线** + **文字与图标垂直平齐**。
           ★★2026-09-29 二次调整（用户要求）：删除卡片底部的署名行后，本行成为**卡片最后一行**、
             承担底部收尾 → margin-top 由 14px 下收到 10px，并加 padding-bottom 4px 补齐
             原来署名占掉的高度，避免底部塌陷、上下留白不匀。 */
        .about-card .about-links {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 18px;
            margin-top: 10px;
            padding-bottom: 4px;
        }
        .about-card .about-link {
            display: inline-flex;
            align-items: center;      /* ★文字与图标垂直居中平齐（不再靠基线对齐） */
            gap: 6px;
            font-size: 13px;
            line-height: 1;           /* ★行高收紧：文字块高度 = 字号，居中后与图标精确对齐 */
            color: #4f46e5;
            font-weight: 700;
            letter-spacing: 0.04em;
            background: none;
            border: none;
            /* ★触控高度：文字链接体量保持轻，但纵向 padding 给到 6px（实测 24.8 → 32.8px），
               避免手指点不准；不再加大是因为要与旁边 38.8px 的玻璃按钮区分层级。 */
            padding: 6px 4px;
            margin: 0;
            cursor: pointer;
            font-family: inherit;
            text-decoration: none;    /* ★2026-09-29 用户要求：去掉下划线 */
            -webkit-tap-highlight-color: transparent;
        }
        .about-card .about-link:active { opacity: 0.65; }
        /* ★图标：display:block 消除 inline 基线下沉缝隙；vertical-align 兜底防继承别的对齐 */
        .about-card .about-link svg {
            flex: none;
            display: block;
            vertical-align: middle;
        }
        body.dark-mode .about-card .about-link {
            color: #a5b4fc;
        }
        /* ★2026-09-01 徒步年资行 */
        .about-card .about-since {
            font-size: 12px;
            color: #64748b;
            font-weight: 600;
            margin-top: 2px;
            letter-spacing: 0.02em;
        }
        body.dark-mode .about-card .about-since {
            color: rgba(255, 255, 255, 0.55);
        }
        body.dark-mode .about-card .about-since .material-icons { color: #818cf8; }
        .about-card .about-desc {
            font-size: 14px;
            color: #334155;
            line-height: 1.75;
            max-width: 310px;
            font-weight: 500;
        }
        .about-highlight {
            color: #4f46e5;
        }
        /* ========== 设置页 - 分组卡片（v1.4.10.1 设置页优化） ========== */
        .settings-group {
            background-color: rgba(255, 255, 255, 0.10);
            backdrop-filter: blur(2px) saturate(150%);   /* ★2026-09-16 五项优化①：saturate 120→150，与全站玻璃配方统一 */
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            border: 1px solid rgba(100, 116, 139, 0.06);  /* ★2026-08-31 浅色下可见的灰蓝边框（原白边在浅底不可见） */
            border-radius: 20px;
            padding: 16px;
            margin-bottom: 16px;
            /* 2026-08-10 修复数据管理框短暂不可见：背景改 background-color + 过渡（原 background 简写+仅border过渡→dark跳变几乎透明） */
            transition: border-color 0.3s ease, background-color 0.2s ease;
        }
        /* 卡片内开关行间距（v1.4.10.3 优化：避免开关行挤在一起） */
        .settings-group .settings-item + .settings-item {
            margin-top: 10px;
        }
        .settings-group .sync-config-item + .sync-config-item {
            margin-top: 10px;
        }
        .settings-group > .grid + .settings-item {
            margin-top: 12px;
        }
        body.dark-mode .settings-group {
            background-color: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.08);
        }
        .settings-group-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 14px;
            color: #334155;
        }
        body.dark-mode .settings-group-title {
            color: #e2e8f0;
        }
        .settings-group-title .material-icons {
            color: #4f46e5;
            font-size: 20px;
        }
        body.dark-mode .settings-group-title .material-icons {
            color: #a5b4fc;
        }
        /* 2026-08-12 移除 .no-blur 机制：它会在动画期间禁用设置组自身的毛玻璃背景，
           导致"背景跳亮一下再变暗"（用户复现）；去掉后背景恒定，无跳变 */
        /* 2026-08-12 同步状态 i 标识：同步中旋转动画 */
        .sync-spin {
            animation: syncSpin 1s linear infinite;
            display: inline-block;
        }
        @keyframes syncSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        /* 2026-08-12 同步状态弹窗行样式 */
        .sync-status-line {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 13px;   /* ★2026-08-26 进度文字字号调小一档 */
        }
        .sync-status-line:last-child {
            margin-bottom: 0;
        }
        .sync-status-time {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed rgba(100, 116, 139, 0.4);   /* ★2026-09-03 弹窗内虚线加深（原 0.07 看不见） */
            color: inherit;   /* ★v1.1.2.6 跟随主题：原固定 #64748b 浅色偏淡/深色看不清 */
            font-size: 13px;
        }
        body.dark-mode .sync-status-time {
            border-top-color: rgba(148, 163, 184, 0.45);
        }
        /* ========== 设置页 - 杂项开关列表 ========== */
        .settings-item {
            display: flex;
            align-items: center;
            gap: 12px;
            background-color: rgba(255, 255, 255, calc(var(--glass-alpha) * 0.6));
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 16px;
            padding: 14px 16px;
                }
        .settings-item-icon {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
            background: linear-gradient(135deg, rgba(99, 122, 235, 0.18), rgba(128, 84, 199, 0.18));
            color: #4f46e5;
        }
        .settings-item-text {
            flex: 1;
            min-width: 0;
        }
        .settings-item-title {
            font-size: 15px;
            font-weight: 700;
            color: #1e293b;
        }
        .settings-item-desc {
            font-size: 12px;
            color: #64748b;
            margin-top: 2px;
        }
        /* 液态玻璃开关 */
        .settings-switch {
            position: relative;
            width: 48px;
            height: 28px;
            flex-shrink: 0;
            cursor: pointer;
        }
        .settings-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .settings-switch .switch-slider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(148, 163, 184, 0.4);
            border-radius: 999px;
            transition: background 0.3s ease;
            backdrop-filter: blur(2px) saturate(150%);   /* ★2026-09-16 五项优化①：与全站玻璃配方统一（原 blur 4px 无饱和） */
            -webkit-backdrop-filter: blur(2px) saturate(150%);
        }
        .settings-switch .switch-slider::before {
            content: '';
            position: absolute;
            left: 3px;
            top: 3px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .settings-switch input:checked + .switch-slider {
            background: rgba(255, 255, 255, 0.15);   /* ★v1.1.2.10 玻璃化：原紫色实底太深 */
            box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
        }
        body.dark-mode .settings-switch input:checked + .switch-slider {
            background: rgba(148, 180, 255, 0.14);
            box-shadow: inset 0 0 0 1px rgba(148, 180, 255, 0.4);
        }
        .settings-switch input:checked + .switch-slider::before {
            transform: translateX(20px);
        }
        body.dark-mode .settings-item {
            background-color: rgba(255, 255, 255, calc(var(--glass-alpha) * 0.4));
            border-color: rgba(148, 180, 255, 0.14);
        }
        body.dark-mode .settings-item-icon {
            background: linear-gradient(135deg, rgba(99, 122, 235, 0.28), rgba(128, 84, 199, 0.28));
            color: #a5b4fc;
        }
        body.dark-mode .settings-item-title {
            color: #f1f5f9;
        }
        body.dark-mode .settings-item-desc {
            color: #94a3b8;
        }

        body.dark-mode .about-card .about-name {
            color: #ffffff;
        }
        body.dark-mode .about-card .about-version {
            color: rgba(255, 255, 255, 0.55);
        }
        body.dark-mode .about-card .about-desc {
            color: rgba(255, 255, 255, 0.78);
        }
        body.dark-mode .about-highlight {
            color: #a5b4fc;
        }
/* ========== 设置页 - 数据同步（WebDAV） ========== */
        /* ★2026-09-03 P1 同步健康行：玻璃格 + 状态圆点（绿/黄/红/灰），点击弹原状态弹窗 */
        /* ★2026-09-03 数据管理说明弹窗分组条目（i 标识弹窗排版统一：图标+标题+小字，深浅自适应） */
        .dmi-group {
            display: flex;
            gap: 9px;
            padding: 9px 10px;
            border-radius: 10px;
            background: rgba(148, 163, 184, 0.1);
            margin-bottom: 8px;
        }
        .dmi-group:last-child {
            margin-bottom: 0;
        }
        body.dark-mode .dmi-group {
            background: rgba(255, 255, 255, 0.06);
        }
        .dmi-ic {
            font-size: 15px;
            color: #4f46e5;
            flex-shrink: 0;
            margin-top: 1px;
        }
        body.dark-mode .dmi-ic {
            color: #818cf8;
        }
        .dmi-title {
            font-size: 13px;
            font-weight: 600;
            color: #0f172a;   /* 2026-09-18 对比度实测：合成底色≈#B8B8B8，标题加深（原 #334155 仅 5.2:1，现 9.0:1） */
            margin-bottom: 2px;
        }
        body.dark-mode .dmi-title {
            color: #e5e7eb;
        }
        .dmi-body {
            font-size: 12px;
            color: #1e293b;   /* 2026-09-18 对比度实测：合成底色≈#B8B8B8 时 #52606f 仅 3.25:1（不足 4.5）→ #1e293b（7.4:1） */
            line-height: 1.6;
        }
        body.dark-mode .dmi-body {
            color: #a3b1c6;
        }

        /* 2026-09-23 政策正文内联系方式链接（此前无规则 → 浏览器默认蓝，深色下几乎不可读） */
        .dmi-body a { color: #4f46e5; text-decoration: underline; word-break: break-all; }
        body.dark-mode .dmi-body a { color: #a5b4fc; }
        /* ★2026-09-03 P1 同步健康行（融合进「自动同步」卡底部子行）：虚线分隔（加深可见）+ 状态圆点 + 点击引导/详情 */
        .sync-health-inline {
            display: flex;
            align-items: center;
            gap: 9px;
            width: 100%;
            padding: 9px 16px 13px;
            box-sizing: border-box;
            border-top: 1px dashed rgba(100, 116, 139, 0.5);   /* ★2026-09-03 虚线加深（原 0.28 太淡） */
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
            transition: background-color 0.15s ease;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        body.dark-mode .sync-health-inline {
            border-top-color: rgba(148, 163, 184, 0.4);
        }
        .sync-health-inline:active {
            background: rgba(148, 163, 184, 0.1);
        }
        body.dark-mode .sync-health-inline:active {
            background: rgba(255, 255, 255, 0.08);
        }
        .sync-health-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #94a3b8;
            flex-shrink: 0;
        }
        .sync-health-text {
            flex: 1;
            min-width: 0;
            font-size: 12px;
            color: #475569;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.dark-mode .sync-health-text {
            color: #cbd5e1;
        }
        .sync-health-arrow {
            font-size: 15px;
            color: rgba(100, 116, 139, 0.6);
            flex-shrink: 0;
        }
        /* ★2026-09-18 同步状态两行四维（网盘数据/图片 · 徒步计划/徒步记录） */
        .sync-dim {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            font-size: 12px;
            color: #475569;
            line-height: 1.4;
        }
        .sync-dim .sync-dim-ic {
            font-size: 16px;
            flex-shrink: 0;
        }
        .sync-dim .sync-dim-tx {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.dark-mode .sync-dim {
            color: #cbd5e1;
        }
        body.dark-mode .sync-health-arrow {
            color: rgba(148, 163, 184, 0.65);
        }

        /* ★2026-09-17 入口改造：账号卡圆点 + 绑定弹窗内「选网盘」卡片 / 步骤条 / 提示 */
        .sync-acct-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22c55e;
            margin-right: 6px;
            vertical-align: 1px;
        }
        .sync-provider-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 11px 12px;
            margin-bottom: 8px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }
        .sync-provider-card.sel {
            background: rgba(99, 102, 241, 0.10);
            border-color: rgba(99, 102, 241, 0.55);
        }
        body.dark-mode .sync-provider-card {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.09);
        }
        body.dark-mode .sync-provider-card.sel {
            background: rgba(99, 102, 241, 0.18);
            border-color: rgba(129, 140, 248, 0.55);
        }
        .sync-provider-name {
            font-size: 13px;
            font-weight: 700;
            color: #1e293b;
        }
        body.dark-mode .sync-provider-name {
            color: #f1f5f9;
        }
        .sync-provider-sub {
            font-size: 11px;
            color: #334155;
            margin-top: 2px;
        }
        body.dark-mode .sync-provider-sub {
            color: #a3b1c6;
        }
        .sync-provider-tick {
            font-weight: 700;
            color: #4f46e5;
            visibility: hidden;
            flex-shrink: 0;
        }
        body.dark-mode .sync-provider-tick {
            color: #818cf8;
        }
        .sync-provider-card.sel .sync-provider-tick {
            visibility: visible;
        }
        .sync-bind-steps {
            font-size: 11px;
            color: #334155;   /* ★可读性：弹窗玻璃叠深遮罩后底色变中灰，#64748b 只有 2:1 */
            margin-bottom: 10px;
        }
        body.dark-mode .sync-bind-steps {
            color: rgba(255, 255, 255, 0.6);
        }
        .sync-bind-steps b {
            color: #3730a3;   /* 2026-09-18 对比度实测：11px 标签 #4f46e5 在弹窗合成底上仅 3.17:1 → 深靛蓝（4.5:1） */
        }
        body.dark-mode .sync-bind-steps b {
            color: #818cf8;
        }
        .sync-bind-hint {
            font-size: 11px;
            color: #334155;   /* ★同上：弹窗内次要文字用深色，勿用 #64748b */
            margin-top: 6px;
            line-height: 1.6;
        }
        body.dark-mode .sync-bind-hint {
            color: rgba(255, 255, 255, 0.5);
        }

        /* ★2026-09-17 备份含配置：导出弹窗勾选行 + 导入询问弹窗提示条 */
        .export-sync-opt {
            border-radius: 12px;
            padding: 11px 12px;
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(0, 0, 0, 0.08);
        }
        body.dark-mode .export-sync-opt {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.09);
        }
        .chk-row {
            display: flex;
            gap: 9px;
            align-items: flex-start;
            cursor: pointer;
            font-size: 12.5px;
            font-weight: 600;
            color: #1e293b;
            line-height: 1.5;
        }
        body.dark-mode .chk-row {
            color: #f1f5f9;
        }
        /* ★2026-09-18 原生外观收口（设计统一性体检）：以下四类在 Chromium / Edge / iOS 上会残留系统外观，
           与全站玻璃语言不符。此前只有 .edit-input 自己设了 appearance:none，属「逐控件手工覆盖」——
           一旦有新控件忘记跟，就会露原生样式；统一在此收口，形成兜底。 */
        /* ① 数字框右侧的原生上下箭头（桌面 hover / 聚焦时出现） */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            appearance: none;
            margin: 0;
        }
        /* ② 密码框的原生「显示密码」小眼睛（Edge ::-ms-reveal / 旧 IE ::-ms-clear） */
        input::-ms-reveal,
        input::-ms-clear {
            display: none;
        }
        /* ③ 浏览器密码管理器自动填充：系统会强刷浅黄/浅蓝底 + 原生内阴影，玻璃质感全毁。
              用「超长 transition」让系统底色永远过渡不到位（比 inset 阴影更稳：不会盖掉 :focus 的靛蓝光晕） */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        textarea:-webkit-autofill {
            -webkit-text-fill-color: #1e293b;
            transition: background-color 600000s 0s, color 600000s 0s;
        }
        body.dark-mode input:-webkit-autofill,
        body.dark-mode input:-webkit-autofill:hover,
        body.dark-mode input:-webkit-autofill:focus,
        body.dark-mode textarea:-webkit-autofill {
            -webkit-text-fill-color: #f1f5f9;
        }
        /* ★2026-09-18 同意留存弹窗：政策链接与说明行。用类而非内联——内联样式无法响应深色模式，
           且浅色玻璃卡叠深遮罩后合成底色偏中灰，次要文字必须用 #334155 级（#64748b 只有约 2:1 对比度） */
        .legal-link {
            color: #3730a3;   /* 2026-09-18 对比度实测：12px 链接 #4338ca 在弹窗合成底上仅 3.98:1 → 深靛蓝（4.5:1） */
            text-decoration: underline;
            cursor: pointer;
            font-weight: 700;
        }
        body.dark-mode .legal-link {
            color: #a5b4fc;
        }
        .legal-stamp {
            margin-top: 8px;
            font-size: 12px;
            line-height: 1.6;
            color: #334155;
        }
        body.dark-mode .legal-stamp {
            color: #cbd5e1;
        }
        /* ★2026-09-17 自绘勾选框：原用 accent-color（浏览器原生方框，iOS/APK 上外观不统一、与玻璃语言不符）
           —— 改用 appearance:none + SVG 勾，配方对齐 .batch-check（同阴影；圆角按尺寸微调 5/6px），色沿用品牌靛蓝 */
        .chk-row input {
            appearance: none;
            -webkit-appearance: none;
            width: 17px;
            height: 17px;
            margin: 2px 0 0;
            border-radius: 5px;
            flex: 0 0 auto;
            cursor: pointer;
            padding: 0;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(100, 116, 139, 0.35);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
            transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
        }
        .chk-row input:checked {
            background: rgba(224, 231, 255, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%234f46e5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
            border-color: rgba(79, 70, 229, 0.9);
        }
        body.dark-mode .chk-row input {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.28);
            box-shadow: none;
        }
        body.dark-mode .chk-row input:checked {
            background: rgba(30, 27, 75, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23a5b4fc' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
            border-color: rgba(129, 140, 248, 0.9);
        }
        .chk-sub {
            display: block;
            font-size: 11px;
            font-weight: 400;
            color: #334155;   /* ★弹窗内次要文字用深色（玻璃叠遮罩后底色变中灰） */
            margin-top: 2px;
            line-height: 1.55;
        }
        body.dark-mode .chk-sub {
            color: rgba(255, 255, 255, 0.55);
        }
        .sync-restore-warn {
            font-size: 12.5px;
            font-weight: 700;
            color: #b45309;
        }
        body.dark-mode .sync-restore-warn {
            color: #fbbf24;
        }
        .sync-restore-info {
            font-size: 12px;
            color: #1e293b;
            margin-top: 5px;
            line-height: 1.6;
            word-break: break-all;
        }
        body.dark-mode .sync-restore-info {
            color: #e5e7eb;
        }
        .sync-config-item {
            margin-bottom: 12px;
        }
        .sync-config-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #334155;   /* ★2026-09-17 表单移入弹窗：玻璃叠深遮罩底色变中灰，#64748b 对比度仅 2:1 */
            margin-bottom: 6px;
        }
        .sync-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.10);
            /* 2026-08-12 移除 backdrop-filter：display 切换瞬间 blur+saturate 突然生效，
               深色模式下输入框会"亮一下"；输入框有半透明背景已足够，去掉更稳更省性能 */
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 10px; /* 2026-08-11 3条优化：输入框圆角统一(10px) */
            padding: 10px 14px;
            font-size: 14px;
            color: #1e293b;
            outline: none;
            /* ★2026-09-18 原生外观收口：原缺 appearance:none（.edit-input 有）→ iOS/WebKit 上 input 默认
               appearance:textfield，会带原生内阴影，与全站自绘输入框观感不一致 */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            transition: transform 0.1s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        }
        .sync-input::placeholder {
            color: rgba(100, 116, 139, 0.55);
        }
        .sync-input:focus {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(79, 70, 229, 0.45);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
        }
        body.dark-mode .sync-config-label {
            color: rgba(255, 255, 255, 0.55);
        }
        body.dark-mode .sync-input {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.09);
            color: #f1f5f9;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        }
        body.dark-mode .sync-input::placeholder {
            color: rgba(148, 163, 184, 0.5);
        }
        body.dark-mode .sync-input:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(129, 140, 248, 0.55);
            box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
        }
        /* 2026-08-12 清理：.sync-status 状态行样式已删（改为自动同步 i 标识） */

        /* ========== 下载恢复 - 备份文件选择列表 ========== */
        .restore-file-item {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 12px 14px;
            margin-bottom: 8px;
            background: rgba(255, 255, 255, 0.08);   /* ★v18 去掉 blur：弹窗打开多个 blur 层同时渲染导致闪灰 */
            border: 1px solid rgba(255, 255, 255, 0.45);
            border-radius: 12px;
            color: #374151;
            cursor: pointer;
            text-align: left;
            transition: transform 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 2026-08-11 3条优化：去掉 transition:all */
        }
        .restore-file-item:hover {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(99, 122, 235, 0.4);
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }
        .restore-file-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .restore-file-label {
            font-size: 14px;
            font-weight: 700;
            color: #0f172a;   /* ★v1.1.2.8 浅色加深 */
        }
        .restore-file-desc {
            font-size: 12px;
            color: #334155;   /* ★v1.1.2.8 再加深 */
        }
        body.dark-mode .restore-file-item {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.30);   /* ★v1.1.2.7 深色亮边：原 0.09 几乎看不见 */
            color: #e5e7eb;
        }
        body.dark-mode .restore-file-item:hover {
            background: rgba(255, 255, 255, 0.09);
            border-color: rgba(129, 140, 248, 0.5);
        }
        body.dark-mode .restore-file-label {
            color: #f1f5f9;
        }
        body.dark-mode .restore-file-desc {
            color: #94a3b8;
        }
        /* ★v1.1.2.7 列表箭头深浅适配 */
        .hm-chevron {
            color: rgba(100, 116, 139, 0.6);
        }
        body.dark-mode .hm-chevron {
            color: #94a3b8;
        }
        /* 列表滚动条 */
        .restore-file-list::-webkit-scrollbar {
            width: 4px;
        }
        .restore-file-list::-webkit-scrollbar-thumb {
            background: rgba(100, 116, 139, 0.3);
            border-radius: 4px; /* 2026-08-11 3条优化：与全局滚动条圆角统一(4px) */
        }

        /* ========== 液态玻璃面板 ========== */
        .glass-panel {
            /* ★2026-09-02 灵动：玻璃卡片降透明（0.10→0.05）让背景流光透上来；深色模式不变量仍走 var */
            background: rgba(255, 255, 255, 0.05);
                    border: 1px solid rgba(255, 255, 255, calc(var(--glass-alpha) * 1.1));   /* ★2026-08-23 液态玻璃：高光边框+顶部镜面 */
            border-radius: 20px;
            box-shadow: 
                0 4px 24px rgba(0, 0, 0, 0.02);   /* ★v1.1.2.8 清除内光晕（折射效果残留） */
            /* 2026-08-10 清理：删除被覆盖的旧 transition（死代码） */
            transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.2s ease, background 0.2s ease; /* 切换提速 */
        }
        
        /* 导入/导出弹窗 - 液态玻璃样式（亮暗自适应） */
        
        
        /* 弹窗取消按钮 - 跟随 App 主题的液态玻璃 */
        
        /* ★2026-08-20 v1.1.0.3 玻璃弹窗文字深浅自适应（修复浅色模式下白色文字看不见） */
        
        .glass-panel:hover {
            border-color: rgba(0, 0, 0, 0.06);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.03);
        }
        
        /* 深色模式玻璃面板 */
        body.dark-mode .glass-panel {
            background: rgba(15, 23, 42, calc(var(--glass-alpha) * 0.6));
            border-color: rgba(255, 255, 255, 0.04);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.2),
        }
        
        body.dark-mode .glass-panel:hover {
            border-color: rgba(255, 255, 255, 0.06);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.3);
        }
        /* ★2026-09-04 首次引导横幅深色适配（文案用亮灰系，不吃 glass-panel 白字默认） */
        body.dark-mode #welcomeBanner {
            background: rgba(15, 23, 42, calc(var(--glass-alpha) * 0.6));
        }
        body.dark-mode .wb-guide {
            background: rgba(15, 23, 42, calc(var(--glass-alpha) * 0.6)) !important;
        }
        body.dark-mode .wb-guide .wb-title {
            color: #e5e7eb !important;
        }
        body.dark-mode .wb-guide .wb-sub {
            color: #a3b1c6 !important;
        }
        body.dark-mode .wb-guide .wb-guide-close { color: #a3b1c6 !important; }
        body.dark-mode .wb-guide .wb-guide-close .material-icons { color: #a3b1c6; }
        body.dark-mode #welcomeBanner .wb-title {
            color: #e5e7eb !important;   /* ★2026-09-05 优化①：inline #334155 会压过无 important 的覆盖 → dark 下标题实为深色看不清，补 !important */
        }
        body.dark-mode #welcomeBanner .wb-sub {
            color: #a3b1c6 !important;
        }
        body.dark-mode #welcomeBanner #welcomeClose {
            color: #a3b1c6 !important;
        }
        /* ★2026-09-06 引导次按钮（先看看示例/去山册看看）：深色下 indigo 亮化（主=浅红实底、次=描边区分） */
        body.dark-mode .guide-sub-btn {
            background: rgba(99, 102, 241, 0.14) !important;
            border-color: rgba(129, 140, 248, 0.5) !important;
            color: #a5b4fc !important;
        }
        
        /* 2026-08-12 记录/计划页"总计"徽标：样式同柱状图右上角，颜色深浅色自适应（浅色深灰/暗色白） */
        .total-badge {
            color: rgba(30, 41, 59, 0.62);
            font-weight: 600;
            white-space: nowrap;
        }
        body.dark-mode .total-badge {
            color: rgba(255, 255, 255, 0.62);
        }
        /* ========== 玻璃统计卡片 ========== */
        .glass-stat-card {
            /* ★2026-09-02 灵动：统计卡降透明（0.10→0.05）同 glass-panel 让光斑透上来 */
            background: rgba(255, 255, 255, 0.05);
                    border: 1px solid rgba(0, 0, 0, 0.04);
            border-radius: 16px;   /* ★2026-09-14 统一回规范：14→16（子项档；2026-09-03 曾 16→14 与大卡协调，实机对比差异极小，按用户决定统一到规范体系） */
            padding: 13px;         /* ★2026-09-03 收身：16→13（配小一号数字） */
            box-shadow: 
                0 2px 16px rgba(0, 0, 0, 0.02);
            overflow: hidden;
            position: relative;
            transition: transform 0.1s ease, background-color 0.2s ease, background 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* 切换提速 */
        }
        
        /* ★2026-09-02 已删：玻璃卡片点击光划过扫描光效（用户要求移除） */
        .glass-stat-card:hover {
            transform: translateY(-2px);
            border-color: rgba(0, 0, 0, 0.06);
            box-shadow: 
                0 8px 28px rgba(0, 0, 0, 0.04);
        }
        
        /* 玻璃卡片彩色左边框 */
        body.dark-mode .glass-stat-card {
            background: rgba(30, 41, 59, calc(var(--glass-alpha) * 0.6));
            border-color: rgba(255, 255, 255, 0.04);
            box-shadow: 
                0 2px 16px rgba(0, 0, 0, 0.1);
        }
        
        body.dark-mode .glass-stat-card:hover {
            border-color: rgba(255, 255, 255, 0.06);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.15);
        }
        /* ★2026-09-03 A 布局：统计矮副卡（平均海拔/平均难度/平均用时）——主卡同款玻璃 + 左侧色条点缀 */
        .ov-mini-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 10px;
        }
        .ov-mini {
            display: flex;
            align-items: center;
            gap: 9px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.04);
            border-radius: 12px;   /* ★2026-09-14 统一回规范：13→12（按钮档） */
            padding: 11px 12px 11px 12px;   /* ★2026-09-03 放大：8→11 */
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
            min-width: 0;
            box-sizing: border-box;
            transition: background-color 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            /* ★2026-09-03 与大卡同款 fadeInUp 渐入，delay 排在大卡（4 张约 0.2s 完）之后接力，避免三张矮卡"干显示" */
            opacity: 0;
            transform: translateY(14px) translateZ(0);
            animation: fadeInUp 0.5s ease-out forwards;
        }
        .ov-mini-row .ov-mini:nth-child(1) { animation-delay: 0.4s; }
        .ov-mini-row .ov-mini:nth-child(2) { animation-delay: 0.48s; }
        .ov-mini-row .ov-mini:nth-child(3) { animation-delay: 0.56s; }
        /* ★2026-09-15 里程碑入口卡：与矮副卡同款 fadeInUp 渐入，delay 接力排在它们之后 */
        #milestoneEntry {
            opacity: 0;
            transform: translateY(14px) translateZ(0);
            animation: fadeInUp 0.5s ease-out 0.64s forwards;
        }
        body.dark-mode .ov-mini {
            background: rgba(30, 41, 59, calc(var(--glass-alpha) * 0.6));
            border-color: rgba(255, 255, 255, 0.04);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        .ov-ic {
            font-size: 18px;   /* ★2026-09-03 放大：16→18 */
            flex-shrink: 0;
        }
        .ov-txt {
            min-width: 0;
        }
        .ov-lab {
            font-size: 11px;   /* ★2026-09-03 放大：10→11 */
            color: #52606f;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.dark-mode .ov-lab {
            color: #a3b1c6;
        }
        .ov-val {
            font-size: 16px;   /* ★2026-09-03 放大：14→16 */
            font-weight: 700;
            color: #0f172a;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.dark-mode .ov-val {
            color: #f1f5f9;
        }
        /* ★2026-09-06 概览统计单位统一样式（与「次」一致：小号/半透/基线对齐，主卡副卡通用） */
        .stat-unit {
            font-size: 13px;
            font-weight: 600;
            opacity: 0.8;
            margin-left: 1px;
            white-space: nowrap;
        }
        /* 顶栏固定样式 - 液态玻璃，延伸到状态栏顶部 */
        /* 顶栏降低：更紧凑和谐 */
        .header-bar {
            position: relative;
            top: auto;
            left: auto;
            right: auto;
            z-index: 50;
            background: transparent;
            border-radius: 0;
            margin: 0;
            margin-bottom: 8px;
            padding-left: 12px;
            padding-right: 12px;
            padding-top: max(6px, env(safe-area-inset-top, 0px));
            padding-bottom: 4px;
        }
        
        body.dark-mode .header-bar {
            background: transparent;
        }
        
        /* ★2026-08-27 记录/计划搜索（方案A：底部悬浮——底栏上方；滚回顶部显示、往下滚隐藏；有搜索词常显）
           玻璃配方：半透明底 + blur + 细白边 + 轻阴影；禁止光泽带/折射/角部光斑 */
        .global-search-bar {
            position: fixed;
            /* ★2026-08-27 底栏上方（底栏 bottom 14px + 高 ~66px）+ 40px 间距（用户要求再高一点） */
            bottom: calc(120px + env(safe-area-inset-bottom, 0px));
            left: 0;
            right: 0;
            z-index: 45;
            padding: 0 16px;
            display: flex;
            justify-content: center;
            transform: translateY(18px);
            opacity: 0;
            pointer-events: none;
            /* ★2026-08-27 bottom 也过渡：键盘收起后平滑滑回默认位置（而非跳变） */
            transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.28s ease, bottom 0.25s ease;
        }
        .global-search-bar.show {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        .global-search-box {
            display: flex;
            align-items: center;
            gap: 8px;
            /* ★2026-08-27 更窄：320 → 260px */
            width: 100%;
            max-width: 260px;
            /* ★2026-08-27 透明度与全 App 玻璃框统一（--glass-alpha 0.10 + blur 2px + 细白边 + 轻阴影） */
            background: rgba(255, 255, 255, var(--glass-alpha));
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, calc(var(--glass-alpha) * 1.1));
            border-radius: 12px;
            padding: 8px 12px;
            color: #1f2937;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
        }
        .global-search-box input {
            flex: 1;
            min-width: 0;
            background: none;
            border: none;
            outline: none;
            color: inherit;
            font-size: 14px;
            font-family: inherit;
        }
        .global-search-box input::placeholder {
            color: rgba(31, 41, 55, 0.4);
        }
        .global-search-clear {
            background: none;
            border: none;
            cursor: pointer;
            color: inherit;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 2px;
            opacity: 0.75;
            flex-shrink: 0;
        }
        .global-search-clear:hover { opacity: 1; }
        /* 深色模式：与 dark-mode glass-panel 同款（深蓝玻璃） */
        body.dark-mode .global-search-box {
            background: rgba(15, 23, 42, calc(var(--glass-alpha) * 0.6));
            border-color: rgba(255, 255, 255, 0.04);
            color: #e2e8f0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }
        body.dark-mode .global-search-box input::placeholder {
            color: rgba(226, 232, 240, 0.4);
        }
        
        @media (max-width: 640px) {
            .container {
                padding: 6px;
                /* 底部保留悬浮底栏空间，滚动到底不被遮挡 */
                padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
            }
            #appTitle {
                font-size: 22px !important;
            }
            h1 {
                font-size: 1rem !important;
                margin-bottom: 0 !important;
                font-family: 'SimSun', '宋体', 'STSong', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
                font-weight: 900;
                letter-spacing: 0.02em;
            }
            .max-w-4xl {
                max-width: 100% !important;
            }
            .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.5rem !important;
            }
            .p-6 {
                padding: 0.75rem !important;
            }
            .text-2xl {
                font-size: 1.1rem !important;
            }
            .text-4xl {
                font-size: 1.25rem !important;
            }
            .header-bar {
                padding: 12px 16px;
                padding-top: max(12px, env(safe-area-inset-top, 0px));
                padding-bottom: 10px;
                margin-left: 0;
                margin-right: 0;
                border-radius: 0 0 20px 20px;
                margin-bottom: 0.75rem !important;
            }
            .title-mountain-icon {
                font-size: 1.4rem !important;
            }
            .overflow-x-auto {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                contain: layout style;
            }
            table {
                min-width: 600px;
                font-size: 0.875rem;
                font-family: 'SimSun', '宋体', 'STSong', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
                font-weight: 900;
                letter-spacing: 0.01em;
            }
            /* ★2026-09-04 阅读态 v2：豁免上面 600px 老表格 min-width（防手机端被撑开）；宽度走全局 .rd-table{width:100%} 铺满 */
            table.rd-table {
                min-width: 0;
                width: 100%;
            }
            .p-3 {
                padding: 0.25rem !important;
            }
            .material-icons {
                font-size: 18px !important;
            }
            .material-icons.text-6xl {
                font-size: 3.5rem !important;
            }
            .material-icons.text-3xl {
                font-size: 1.5rem !important;
            }
            .material-icons.text-xl {
                font-size: 1.25rem !important;
            }
            th, td {
                white-space: nowrap;
            }
            .text-sm {
                font-size: 0.875rem !important;
            }
            .text-base {
                font-size: 1rem !important;
            }
        }
        
        /* 标题图标比文字稍大 */
        h2 .material-icons:first-child {
            font-size: 1.3em;
        }
        
        /* 表格布局 */
        table {
            border-collapse: collapse;
        }
        /* ★2026-09-04 阅读态 v2：宽屏给个舒适最小宽，避免极窄内容时表太贴边 */
        @media (min-width: 641px) {
            table.rd-table {
                min-width: 320px;
            }
        }
        
        /* 表格单元格垂直对齐 */
        table th,
        table td {
            vertical-align: middle;
            white-space: nowrap;
            padding: 0.5rem;
        }
        
        /* 操作列居中 */
        table th:last-child,
        table td:last-child {
            text-align: center;
        }
        .edit-input {
            /* ★2026-08-27 v1.1.6.1 浅色模式浅边：原白边 0.3 在白底几乎不可见 → 与底栏同款灰蓝 0.2（深色模式 389 行覆盖） */
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 10px; /* 2026-08-11 3条优化：输入框圆角统一(10px) */
            padding: 8px 12px;
            width: 100%;
            /* ★2026-09-22 玻璃化：原 rgba(255,255,255,0.95) 是不透明白块，浮在玻璃弹窗上「不是一家人」
               （用户实测反馈）→ 改半透明白 + 全站玻璃配方 blur(2px) saturate(150%)；文字 #333 在合成底上 6:1 ✓ */
            background: rgba(255, 255, 255, 0.42);
            backdrop-filter: blur(2px) saturate(150%);
            -webkit-backdrop-filter: blur(2px) saturate(150%);
            color: #333;
            font-family: 'SimSun', '宋体', 'STSong', 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif;
            font-weight: 900;
            font-size: 16px;
            transition: transform 0.1s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            -webkit-tap-highlight-color: transparent;
            user-select: text;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            touch-action: manipulation;
            outline: none;
        }
        .edit-input:focus {
            outline: none;
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
            background: rgba(255, 255, 255, 0.62);   /* ★2026-09-22 跟随玻璃化（原全白） */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        .edit-input:hover {
            border-color: rgba(102, 126, 234, 0.5);
            background: rgba(255, 255, 255, 0.52);   /* ★2026-09-22 跟随玻璃化（原全白） */
        }
        /* ★2026-09-04 难度框字色：浅色=档位色(--dfc-light)，深色=同档亮色(--dfc-dark)；!important 压过 .edit-input 深色白字 */
        .difficulty-color {
            color: var(--dfc-light, #0f766e) !important;
        }
        body.dark-mode .difficulty-color {
            color: var(--dfc-dark, #34d399) !important;
        }

        /* ★2026-09-01 编辑行里程/用时单位（组合框内数字 + 框内单位）：灰蓝小字与玻璃输入框搭配
           ★2026-09-05 优化②：.edit-unit-wrap 死 CSS 已删（9-04 布局重构后无引用） */
        .edit-unit {
            font-size: 13px;
            font-weight: 700;
            color: #52606f;                   /* ★2026-09-04 浅色提档（原 #64748b） */
            flex-shrink: 0;
            line-height: 1;
        }
        .dark-mode .edit-unit {
            color: #a3b1c6;                   /* ★2026-09-04 深色提亮（原 #94a3b8） */
        }

        /* ★2026-09-01 自定义日期时间选择弹窗（替换系统原生 picker，统一玻璃设计语言） */
        .dtp-nav {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 2px;
        }
        .dtp-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            margin: 12px 0 6px;
        }
        .dtp-week {
            font-size: 12px;
            font-weight: 700;
            color: #64748b;
            text-align: center;
            padding: 2px 0;
        }
        .dark-mode .dtp-week {
            color: #94a3b8;
        }
        .dtp-cell {
            /* ★2026-09-01 v5 五项优化③：去掉格子 backdrop-filter（42 个 blur 层耗 GPU），玻璃感由弹窗本体提供 */
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
            border-radius: 12px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: #334155;
            user-select: none;
            transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
        }
        .dark-mode .dtp-cell {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.22);
            color: #e5e7eb;
        }
        .dtp-cell.today {
            border-color: rgba(79, 70, 229, 0.7);
        }
        /* ★2026-09-05 优化②：.dtp-cell.other 死 CSS 已删（日期弹窗不再渲染 other 月格） */
        .dtp-cell.selected {
            /* ★2026-09-03 选中改玻璃（用户统一要求；小格沿用无 blur 性能约定）：半透明靛蓝透底+细描边，字转靛蓝 */
            background: rgba(79, 70, 229, 0.16);
            border-color: rgba(79, 70, 229, 0.8);
            color: #4338ca;
        }
        .dark-mode .dtp-cell.selected {
            background: rgba(99, 102, 241, 0.2);
            border-color: rgba(129, 140, 248, 0.8);
            color: #c7d2fe;
        }
        .dtp-time-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            /* ★2026-09-16：与下方取消/确定拉开（4→12） */
            margin: 14px 0 12px;
        }
        /* ★v3 时/分步进器（- 数字 +）：替代 select，避免原生全屏列表 */
        .dtp-stepper {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .dtp-num {
            font-size: 24px;
            font-weight: 900;
            min-width: 52px;
            text-align: center;
            font-variant-numeric: tabular-nums;
            color: #334155;
            line-height: 1;
        }
        .dark-mode .dtp-num {
            color: #e5e7eb;
        }
        .dtp-colon {
            font-size: 24px;
            font-weight: 900;
            color: #64748b;
        }
        .dark-mode .dtp-colon {
            color: #94a3b8;
        }
        /* ★2026-09-01 心情/天气选择弹窗（替换原生 select，统一玻璃设计语言，与日期选择器同款选中态） */
        .mwp-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin: 4px 0 10px;
        }
        .mwp-opt {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 8px;
            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 .mwp-opt {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.22);
            color: #e5e7eb;
        }
        .mwp-opt .mwp-emoji {
            font-size: 18px;
            line-height: 1;
        }
        .mwp-opt.selected {
            /* ★2026-09-03 选中改玻璃（同 dtp-cell）：半透明靛蓝透底+细描边，字转靛蓝 */
            background: rgba(79, 70, 229, 0.16);
            border-color: rgba(79, 70, 229, 0.8);
            color: #4338ca;
        }
        .dark-mode .mwp-opt.selected {
            background: rgba(99, 102, 241, 0.2);
            border-color: rgba(129, 140, 248, 0.8);
            color: #c7d2fe;
        }
        .mwp-clear-wrap {
            text-align: center;
            margin-top: 2px;
            /* ★2026-09-16 修复：下方间距原为 0 →「清空」与「取消/确定」贴在一起（真机上看着像重合） */
            margin-bottom: 12px;
        }
        .mwp-clear-btn {
            background: rgba(100, 116, 139, 0.14);
            border: 1px solid rgba(100, 116, 139, 0.6);
            color: #334155;
            padding: 6px 14px;
            border-radius: 10px;
            font-size: 12px;
            min-width: 56px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .dark-mode .mwp-clear-btn {
            background: rgba(148, 163, 184, 0.14);
            border-color: rgba(148, 163, 184, 0.6);
            color: #e5e7eb;
        }
        
        /* ★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）
           没内联尺寸的那几个（日期选择器「确定」/ 保存二维码 / 同意并继续 / 分享）不再命中本规则，
           与旁边的取消按钮出现「一大一小」 */
        .confirm-modal-buttons .confirm-btn-cancel,
        .confirm-modal-buttons .confirm-btn-delete,
        .confirm-modal-buttons .check-go-btn,
        .confirm-modal-buttons .glass-btn {
            padding: 10px 24px !important;
            border-radius: 12px !important;
            font-size: 14px !important;
            min-width: 96px !important;
            font-weight: 600 !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
        }
        .confirm-modal-content {
            /* ★2026-08-23 五项优化①补漏：统一底栏配方（此前 v15 静默失败，blur 从未生效） */
            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;
            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 {
            font-size: 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;
        }
        .confirm-modal-message {
            color: #1f2937;  /* ★v1.1.2.8 浅色加深（原 #4b5563 偏淡） */
        }
        #photoUsageRow:active { background: rgba(100, 116, 139, 0.10); }
        .confirm-modal-buttons {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }
        .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;
        }
        .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-09-03 抽屉本身已是独立面板：展开后最上边的分隔线删掉（第一块不画 border-top） */
        .mb-drawer > :first-child {
            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;
    }


/*! 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;
  }
}
@layer utilities {
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .-top-6 {
    top: calc(var(--spacing) * -6);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-full {
    width: 100%;
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-12 {
    max-width: calc(var(--spacing) * 12);
  }
  .max-w-\[90vw\] {
    max-width: 90vw;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .overflow-x-auto {
    overflow-x: auto;
    contain: layout style;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-blue-200 {
    border-color: var(--color-blue-200);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .border-green-200 {
    border-color: var(--color-green-200);
  }
  .border-orange-200 {
    border-color: var(--color-orange-200);
  }
  .border-purple-200 {
    border-color: var(--color-purple-200);
  }
  .border-white {
    border-color: var(--color-white);
  }
  .border-t-transparent {
    border-top-color: transparent;
  }
  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }
  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-green-600 {
    background-color: var(--color-green-600);
  }
  .bg-purple-500 {
    background-color: var(--color-purple-500);
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-amber-400 {
    --tw-gradient-from: var(--color-amber-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-50 {
    --tw-gradient-from: var(--color-blue-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-blue-500 {
    --tw-gradient-from: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-emerald-500 {
    --tw-gradient-from: var(--color-emerald-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-gray-50 {
    --tw-gradient-from: var(--color-gray-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-green-50 {
    --tw-gradient-from: var(--color-green-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-green-400 {
    --tw-gradient-from: var(--color-green-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-green-500 {
    --tw-gradient-from: var(--color-green-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-lime-400 {
    --tw-gradient-from: var(--color-lime-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-orange-50 {
    --tw-gradient-from: var(--color-orange-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-orange-400 {
    --tw-gradient-from: var(--color-orange-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-purple-50 {
    --tw-gradient-from: var(--color-purple-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-red-400 {
    --tw-gradient-from: var(--color-red-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-amber-600 {
    --tw-gradient-to: var(--color-amber-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-blue-100 {
    --tw-gradient-to: var(--color-blue-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-gray-100 {
    --tw-gradient-to: var(--color-gray-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-green-100 {
    --tw-gradient-to: var(--color-green-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-green-600 {
    --tw-gradient-to: var(--color-green-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-lime-600 {
    --tw-gradient-to: var(--color-lime-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-orange-100 {
    --tw-gradient-to: var(--color-orange-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-orange-600 {
    --tw-gradient-to: var(--color-orange-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-purple-100 {
    --tw-gradient-to: var(--color-purple-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-purple-600 {
    --tw-gradient-to: var(--color-purple-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-red-600 {
    --tw-gradient-to: var(--color-red-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-teal-600 {
    --tw-gradient-to: var(--color-teal-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-blue-800 {
    color: var(--color-blue-800);
  }
  .text-white/30 {
    color: var(--color-gray-400);
  }
  .text-white/50 {
    color: var(--color-gray-500);
  }
  .text-white/60 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-white/90 {
    color: var(--color-gray-800);
  }
  .text-white {
    color: var(--color-gray-900);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-orange-500 {
    color: var(--color-orange-500);
  }
  .text-orange-600 {
    color: var(--color-orange-600);
  }
  .text-orange-800 {
    color: var(--color-orange-800);
  }
  .text-purple-500 {
    color: var(--color-purple-500);
  }
  .text-purple-600 {
    color: var(--color-purple-600);
  }
  .text-purple-800 {
    color: var(--color-purple-800);
  }
  .text-white {
    color: var(--color-white);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .drop-shadow-lg {
    --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur-lg {
    --tw-backdrop-blur: blur(var(--blur-lg));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:bg-blue-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-50);
      }
    }
  }
  .hover\:bg-blue-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-600);
      }
    }
  }
  .hover\:bg-gray-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-300);
      }
    }
  }
  .hover\:bg-gray-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700);
      }
    }
  }
  .hover\:bg-green-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-50);
      }
    }
  }
  .hover\:bg-green-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-600);
      }
    }
  }
  .hover\:bg-green-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-700);
      }
    }
  }
  .hover\:bg-purple-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-purple-600);
      }
    }
  }
  .hover\:bg-red-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .hover\:bg-white {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-white);
      }
    }
  }
  .hover\:from-blue-600 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-blue-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:from-emerald-600 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-emerald-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:from-green-600 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-green-600);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-purple-700 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-purple-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-teal-700 {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-teal-700);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

        /* ★★本块必须放在样式表【末尾】——它要覆盖的
           .bottom-tabbar / .bottom-tabbar .tab-btn / .ov-mini-row / .sync-health-text
           定义全在文件后段（900~2000 行），同特异性下【后出现者胜】——
           放前面会被反向覆盖（2026-10-09 真实踩到：改了一次发现完全没生效）。 */
        /* ★2026-10-09 折叠屏【外屏】适配（窄屏；小折叠外屏实测约 260~350px）
           实测三处问题（仅 ≤350px 出现，≥360px 全干净）：
             ① 底栏撑破页面：4 个按钮 padding 8px 18px → 底栏总宽 302px，
                视口 260px 时整页横向溢出 35px（页面能左右拖动）
             ② 概览三张矮卡固定 3 列 → 列宽仅 ~70px，而「平均海拔」需 46px
                只分到 15~41px → 被截断显示成「平均…」
             ③ 设置页同步状态文案 nowrap + ellipsis → 「还没连接云端 · 点这里配置」被截成「还没连接云端 · 点…」
           ⇒ 阈值取 350px（常规手机 ≥360px 布局零影响）。 */
        @media (max-width: 350px) {
            /* ① 底栏收窄：按钮内边距 18px→8px、底栏内边距 16px→10px，确保 <302px 也能完整放下 */
            .bottom-tabbar {
                padding: 10px 10px;
                gap: 0;
                max-width: calc(100vw - 12px);
            }
            .bottom-tabbar .tab-btn {
                padding: 8px 8px;
            }
            .bottom-tabbar .tab-btn + .tab-btn {
                margin-left: 2px;
            }
            /* ② 概览矮卡 3 列 → 1 列（列宽不足必然截断标签） */
            .ov-mini-row {
                grid-template-columns: 1fr;
            }
            /* ③ 同步状态文案允许折行，不再截断 */
            .sync-health-text,
            .sync-dim .sync-dim-tx {
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
            }
            /* ④ 顶栏：标题原为 whitespace-nowrap（不可收缩），窄屏下把右侧 FPS 挤出屏幕右边界
                  → 整个页面横向溢出 35px（260px 屏实测）。改为允许折行 + 容器可收缩。 */
            .header-bar > .flex:first-child {
                min-width: 0;
            }
            #appTitleWrap {
                min-width: 0;
            }
            #appTitle {
                white-space: normal;
                line-height: 1.2;
            }
            /* ★⑤ 山册（窄屏）：抽屉里 6 项统计原为 flex 一行均分 —— 窄屏抽屉仅约 200px，
                 每格只剩 ~31px，而「一起走过」的值是「老王/小李/张三」这类长串，
                 溢出的文字会压到相邻格上（用户反馈：展开后数据字重合）。
                 ⇒ 改成 3 列 × 2 行网格，值字号 15→12 且允许折行，彻底消除横向挤压。 */
            .mb-stat {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                row-gap: 8px;
            }
            .mb-stat > div {
                min-width: 0;
                padding: 0 2px;
            }
            .mb-stat .sv {
                font-size: 12px;
                line-height: 1.3;
                white-space: normal;
                overflow-wrap: anywhere;
                word-break: break-word;
            }
            .mb-stat .sl {
                font-size: 9px;
                line-height: 1.25;
            }
        }