/* 浅色模式：仅当未手动开启深色模式时生效；放开 color-scheme 以兼容系统深色模式原生控件 */
        html:not([data-theme="dark"]) {
            color-scheme: light dark;
            forced-color-adjust: none !important;
            background: #FFF4F0;
            color: #1A1A1A !important;
        }
        html:not([data-theme="dark"]) body {
            background: #FFFFFF !important;
            color: #1A1A1A !important;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent;
        }
        input, textarea, [contenteditable] {
            -webkit-user-select: text;
            -moz-user-select: text;
            user-select: text;
            -webkit-touch-callout: default;
        }

        :root {
            /* 品牌色（统一为互家橙 #FF6D3B，三端一致） */
            --primary: #FF6D3B;
            --primary-light: #FFF4F0;
            --primary-dark: #E55A2B;
            --success: #4CAF50;
            --success-light: #E8F9ED;
            --success-dark: #00A046;
            --warning: #FF9800;
            --warning-light: #FFF3E0;
            --danger: #F44336;
            --danger-light: #FFEFED;
            --danger-dark: #C62828;
            --info: #2196F3;
            --info-light: #E8F2FF;

            /* 文本色（对比度修正：tertiary 2.8:1→5.4:1, disabled 1.6:1→3.0:1） */
            --text-primary: #1A1A1A;
            --text-secondary: #5F6368;
            --text-tertiary: #6B7280;
            --text-disabled: #9CA3AF;
            --text-white: #FFFFFF;

            /* 背景色 */
            --bg-primary: #FFFFFF;
            --bg-secondary: #F5F7FA;
            --bg-tertiary: #F0F2F5;
            --bg-elevated: #FFFFFF;

            /* 边框色 */
            --border: #E8E8ED;
            --border-light: #F2F3F5;
            --border-color: #E8E8ED;

            /* 阴影 */
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow: 0 2px 12px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

            /* 圆角（鸿蒙体系：略增大，更柔和） */
            --radius-xs: 6px;
            --radius-sm: 10px;
            --radius: 14px;
            --radius-md: 12px;
            --radius-lg: 18px;
            --radius-xl: 24px;
            --radius-full: 9999px;

            /* 字体大小 - 标准版（中等大小） */
            --font-size-xs: 13px;   /* 原 14px 与 sm 同级，现下调 1px 形成 12/13/14 小字阶梯（P1-1） */
            --font-size-sm: 14px;
            --font-size-base: 16px;
            --font-size-lg: 18px;
            --font-size-xl: 20px;
            --font-size-xxl: 24px;

            /* 字体 */
            --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

            /* 图标大小 */
            --icon-size-sm: 16px;
            --icon-size-base: 24px;
            --icon-size-lg: 32px;

            /* 间距 */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 12px;
            --spacing-lg: 16px;
            --spacing-xl: 20px;
            --spacing-xxl: 24px;
            --spacing-xxxl: 32px;

            /* 行高 */
            --line-height-tight: 1.25;
            --line-height-base: 1.5;
            --line-height-relaxed: 1.75;

            /* 过渡 */
            --transition-fast: 0.15s ease;
            --transition-base: 0.25s ease;
            --transition-slow: 0.35s ease;

            /* z-index 层级 */
            --z-base: 1;
            --z-sticky: 10;
            --z-dropdown: 50;
            --z-nav: 100;
            --z-fab: 110;
            --z-popover: 500;
            --z-modal: 1000;
            --z-toast: 1100;

            /* 补充令牌（P0-1 修复）：曾被引用却未定义，补齐后样式不再静默失效 */
            --statusbar-h: 24px;                               /* 状态栏高度占位 */
            --text-quaternary: #A6AEB9;                        /* 更弱的四级辅助文字 */
            --accent-gold: #F7B500;                            /* 金色表彰 / 勋章 / 收藏强调 */
            --brand-wechat: #07C160;                           /* 微信第三方品牌色 */
            --state-fav: #FFD600;                              /* 收藏已激活态金色 */
            --accent-link: #FF6B6B;                            /* 复制链接 / 链接强调色 */
            --primary-alpha: rgba(255,109,59,0.12);            /* 主色透明度变体（浅底） */
            --bg-input: #F4F5F7;                               /* 输入框底色 */
            --swipe-x: 30px;                                   /* 横向滑动判定阈值 */

            /* 强调色令牌（P1-2 修复）：JS 模板/配置对象中的硬编码颜色收敛到语义令牌 */
            --accent-purple: #5856D6;                          /* 用药提醒 · 紫 */
            --accent-purple-light: #7B7BFF;                    /* 用药提醒渐变浅紫 */
            --accent-pink: #FF2D55;                            /* 热门话题 · 点赞红 */
            --accent-pink-light: #FF6B8B;                      /* 热门话题渐变浅粉 */
            --accent-rose: #FF6B6B;                            /* 健康档案 · 玫瑰红 */
            --accent-peach: #FF9A6C;                           /* SOS / 商家入驻 · 桃橙 */
            --accent-mint: #30D158;                            /* 儿童打卡 · 薄荷绿 */
            --accent-teal: #0CA678;                            /* 物业服务 / 确认操作 · 深青绿 */
            --accent-teal-light: #12D9A0;                      /* 物业服务渐变浅青绿 */
            --accent-orange: #E8820C;                          /* 催单 / 报价强调橙 */
            --pink-soft: #FFE8F0;                              /* 点赞 / 待审 · 柔和红底 */
            --info-soft: #D6ECFF;                              /* 评论 · 柔和蓝底 */
            --danger-soft: #FFEBEE;                            /* 未通过 · 柔和红底 */
            --warning-soft: #FFF8F0;                           /* 报价 / 评价 · 柔和橙底 */
            --teal-soft: #F0FBF6;                              /* 确认完工 · 柔和绿底 */
            --neutral-soft: #ECECEC;                           /* 已兑换 · 中性底色 */

            /* 语义化补充令牌（P3-4 修复）：品牌改色 / 键盘可达 / 层级投影一次修改、全局生效 */
            --focus-ring: #4D6BFE;                             /* 键盘焦点环（全局 :focus-visible 描边） */
            --shadow-1: 0 1px 2px rgba(0,0,0,0.04);            /* 一级投影 = 卡片 */
            --shadow-2: 0 2px 8px rgba(0,0,0,0.08);            /* 二级投影 = 弹层 / 下拉 */
            --shadow-3: 0 8px 24px rgba(0,0,0,0.14);           /* 三级投影 = 浮层 / 弹窗 */
            --radius-fab: 50%;                                 /* FAB / 悬浮圆钮圆角 */
            --text-inverse: #1E2430;                           /* 反色文字（浅底 / 彩色面深字） */
            --primary-rgb: 255,109,59;                         /* 主色 RGB 分量，供 rgba(var(--primary-rgb),a) 生成透明度变体 */

            /* 涉农业务域色（2026-10-12 UI 优化）：分类宫格四色收敛方案
               原 18 个分类图标用了 15 种饱和色，视觉噪音大。
               现按业务域收敛为 4 色，颜色本身即传递业务线信息：
                 政务治理线 --primary 橙 / 社区服务线 --info 蓝 /
                 商业运营线 --success 绿 / 涉农 --accent-rural 棕 */
            --accent-rural: #8D6E63;                           /* 涉农 · 统一土色系 */
            --accent-rural-light: #EFEBE9;                     /* 涉农 · 浅底（标签/徽章用） */
            --accent-rural-rgb: 141,110,99;                    /* 供暗色 rgba 透明度变体使用 */

            /* 小字与中间态令牌（2026-10-13 UI 优化）：替代 calc() 派生字号
               原代码用 var(--font-size-2xs) 等 63 处，
               产生 12.8/13.6/14.4/15.2/11.52px 等非整数字号，中文笔画密、
               非 Retina 屏上明显发虚。现补整数令牌并整体替换。
               注意：elder-mode 必须同步覆盖，否则适老化失效（calc 原本
               会随 base 变大而自动放大）。 */
            --font-size-2xs: 12px;                            /* 辅助元信息：时间/地址/状态/提示 */
            --font-size-md: 15px;                             /* 中间态：评论正文等 */
            --icon-size-xs: 14px;                             /* 小图标（原 calc 14.4px）*/

            /* 外来色值收敛令牌（2026-10-13 UI 优化）
               原代码散落使用 Tailwind / Material 色值，与既有令牌并存，
               同屏出现多套红/绿/橙。现补令牌统一引用，取值与原散落值
               完全一致（零视觉变化，仅建立单一事实来源）。
               注意：这些色是为特定语义刻意选的非令牌值，不宜强行并入
               --danger / --success，否则会破坏原有视觉层级。 */
            --warning-dark: #F57C00;                          /* 警告深色：渐变终点 / 警示文字 */
            --sos-red: #EF4444;                               /* SOS 专用红：比 danger 更饱和，紧急场景强调 */
            --sos-red-dark: #DC2626;                          /* SOS 专用红 · 渐变终点 */
            --success-text: #2E7D32;                          /* 浅绿底上的深绿文字。
                                                                   验算：#4CAF50 在 #E8F9ED 上仅 2.54:1
                                                                   不达 WCAG AA；var(--success-text) 为 4.69:1 达标 */
        }

        /* P3-5: 长信息流卡片启用离屏渲染，仅绘制视口内内容提升首屏性能 */
        #homeFeed .post-card, #hotTopicsContent .feed-card {
            content-visibility: auto;
            contain-intrinsic-size: auto 140px;
        }

        /* P3-1: 首次启动引导（onboarding）开屏浮层 */
        .onboarding-mask {
            position: fixed;
            inset: 0;
            z-index: 100001;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
        }
        .onboarding-mask.show {
            opacity: 1;
            visibility: visible;
        }
        .onboarding-track {
            flex: 1;
            display: flex;
            width: 300%;
            transform: translateX(0);
            transition: transform .4s cubic-bezier(.4,0,.2,1);
        }
        .onboarding-slide {
            width: calc(100% / 3);
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 34px;
            box-sizing: border-box;
        }
        .onboarding-figure {
            width: 168px;
            height: 168px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 34px;
            animation: onboardingFloat 3s ease-in-out infinite;
        }
        @keyframes onboardingFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-12px); }
        }
        .onboarding-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 16px;
            letter-spacing: .5px;
        }
        .onboarding-desc {
            font-size: 15px;
            line-height: 1.75;
            color: var(--text-secondary);
            max-width: 300px;
        }
        .onboarding-dots {
            display: flex;
            gap: 8px;
            margin-bottom: 26px;
        }
        .onboarding-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--border);
            transition: width .3s ease, background .3s ease;
        }
        .onboarding-dot.active {
            width: 22px;
            border-radius: 4px;
            background: var(--primary);
        }
        .onboarding-footer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px calc(28px + env(safe-area-inset-bottom, 0px));
            box-sizing: border-box;
        }
        .onboarding-skip {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 15px;
            padding: 12px 6px;
            cursor: pointer;
        }
        .onboarding-next {
            min-width: 120px;
            padding: 13px 28px;
            border: none;
            border-radius: 28px;
            background: var(--primary);
            color: var(--text-white);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(var(--primary-rgb), .3);
        }
        .onboarding-next:active {
            transform: scale(.96);
        }

        /* S42: 安全区适配（刘海屏/底部指示条不遮挡内容） */
        .page, .page-header, #globalBottomNav {
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px);
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }
        /* S42: 点击态反馈——所有可点击元素按压时缩放+去默认高亮 */
        button:active, a:active, .nav-item:active, .clickable:active,
        .auth-type-card:active, .service-grid-item:active, .feed-card:active,
        .conv-item:active, .settings-item:active, .merchant-card:active,
        .swap-card:active, .checkin-card:active, .post-card:active,
        .history-item:active, .draft-item:active, .visitor-card:active,
        .coupon-card:active, .order-card:active {
            transform: scale(0.97);
            transition: transform 0.1s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .elder-mode {
            /* 字体大小 - 关怀版（全面放大，与标准版形成明显区分） */
            --font-size-xs: 17px;
            --font-size-sm: 19px;
            --font-size-base: 23px;
            --font-size-lg: 27px;
            --font-size-xl: 31px;
            --font-size-xxl: 37px;
            /* 2026-10-13：新令牌的适老化覆盖。
               取值依据原 calc 在 elder(base=23) 下的实际结果取整：
                 2xs 原 calc(23*0.8)=18.4 → 18px
                 md  原 calc(23*0.95)=21.85 → 22px
                 icon-xs 原 calc(36*0.6)=21.6 → 21px */
            --font-size-2xs: 18px;
            --font-size-md: 22px;
            --icon-size-xs: 21px;
            --icon-size-sm: 24px;
            --icon-size-base: 36px;
            --icon-size-lg: 48px;
            --radius-sm: 12px;
            --radius: 16px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            --shadow: 0 2px 12px rgba(0,0,0,0.10);
            --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
        }
        /* 长辈模式：按钮高度增加、点击区域更大、简化部分装饰 */
        .elder-mode .btn-primary,
        .elder-mode .cart-checkout-btn,
        .elder-mode .checkout-submit-btn,
        .elder-mode .coupon-use-btn {
            min-height: 52px; font-size: var(--font-size-base) !important; padding: 14px 24px;
        }
        .elder-mode .nav-item,
        .elder-mode .tab-item { padding-top: 10px; padding-bottom: 10px; }
        .elder-mode .cart-qty-btn { width: 34px; height: 34px; }
        .elder-mode .review-star { font-size: 34px; }
        .elder-mode .page-header h1 { font-size: var(--font-size-lg); }
        /* 简化部分 UI：弱化阴影/边框，提升对比度 */
        .elder-mode .card,
        .elder-mode .merchant-card { box-shadow: var(--shadow-md); border: 1px solid var(--border); }

        /* ====== 儿童模式：圆润、活泼、字体放大、点击区域更大 ====== */
        .child-mode {
            /* 字体大小 - 儿童版（适中放大，便于阅读） */
            --font-size-xs: 15px;
            --font-size-sm: 17px;
            --font-size-base: 19px;
            --font-size-lg: 22px;
            --font-size-xl: 26px;
            --font-size-xxl: 30px;
            --icon-size-sm: 22px;
            --icon-size-base: 30px;
            --icon-size-lg: 42px;
            --radius-sm: 14px;
            --radius: 20px;
            --radius-md: 12px;
            --radius-lg: 26px;
            --radius-xl: 32px;
            --shadow: 0 6px 18px rgba(255, 138, 76, 0.12);
            --shadow-md: 0 10px 24px rgba(255, 138, 76, 0.18);
        }
        /* 儿童模式：按钮更圆润、更高、更易点击 */
        .child-mode .btn-primary,
        .child-mode .cart-checkout-btn,
        .child-mode .checkout-submit-btn,
        .child-mode .coupon-use-btn {
            min-height: 48px; font-size: var(--font-size-base) !important; padding: 12px 22px; border-radius: var(--radius-lg) !important;
        }
        .child-mode .nav-item,
        .child-mode .tab-item { padding-top: 8px; padding-bottom: 8px; }
        .child-mode .cart-qty-btn { width: 32px; height: 32px; }
        .child-mode .review-star { font-size: 30px; }
        .child-mode .page-header h1 { font-size: var(--font-size-lg); }
        /* 儿童模式：卡片更圆润、阴影更柔和活泼 */
        .child-mode .card,
        .child-mode .merchant-card { box-shadow: var(--shadow-md); border: 1px solid rgba(255, 138, 76, 0.15); border-radius: var(--radius-lg); }
        /* 图标圆角放大 */
        .child-mode .settings-item-icon { border-radius: var(--radius); }
        .child-mode .category-icon-wrap { border-radius: var(--radius-lg); }
        /* 输入框圆角 */
        .child-mode .search-bar { border-radius: var(--radius-lg); }
        .child-mode .login-input { border-radius: var(--radius); font-size: var(--font-size-base); }
        /* 儿童模式独占：与长辈模式互斥 */
        body.child-mode.elder-mode { /* 互斥由 JS 保证，此处仅为防御 */ }

        /* ====== 儿童模式激活态（全屏锁定到孩子端） ====== */
        /* 激活时隐藏主底部导航与首页多余内容（由 JS 控制 display），这里补充样式 */
        body.child-mode-active .bottom-nav { display: none !important; }
        /* 激活时仅显示孩子端页面，隐藏其他 page */
        body.child-mode-active .page { display: none !important; }
        body.child-mode-active .page.pk-child-page { display: flex !important; }
        body.child-mode-active .page.pk-child-page.active { display: flex !important; }

        /* 儿童模式专用底部导航 #childModeNav */
        #childModeNav {
            position: fixed;
            left: 0; right: 0; bottom: 0;
            width: 100%;
            height: 60px;
            background: #fff;
            border-top: 1px solid var(--border);
            display: none; /* 默认隐藏，由 JS 控制显隐 */
            align-items: stretch;
            justify-content: space-around;
            z-index: 900;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        #childModeNav .child-nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            color: var(--text-secondary);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s;
        }
        #childModeNav .child-nav-item i { font-size: 18px; }
        #childModeNav .child-nav-item span { font-size: 12px; line-height: 1; }
        #childModeNav .child-nav-item.active { color: var(--primary); }

        /* 儿童模式顶部退出按钮（显示在孩子端页面头部右侧） */
        body.child-mode-active .child-exit-btn { display: inline-flex !important; }
        .child-exit-btn {
            display: none;
            align-items: center;
            gap: 4px;
            background: rgba(255,109,59,0.12);
            color: var(--primary);
            border: none;
            border-radius: 16px;
            padding: 4px 10px;
            font-size: var(--font-size-xs);
            font-weight: 600;
            cursor: pointer;
        }

        /* ====== 儿童模式密码弹窗 #childModePwdModal ====== */
        #childModePwdModal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: var(--z-toast);
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        #childModePwdModal .cmpm-card {
            width: 100%;
            max-width: 360px;
            background: #fff;
            border-radius: 20px;
            padding: 24px 20px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.2);
            max-height: 90vh;
            overflow-y: auto;
        }
        #childModePwdModal .cmpm-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            text-align: center;
            margin-bottom: 6px;
        }
        #childModePwdModal .cmpm-subtitle {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            text-align: center;
            margin-bottom: 18px;
        }
        #childModePwdModal .cmpm-field {
            margin-bottom: 14px;
        }
        #childModePwdModal .cmpm-field label {
            display: block;
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            margin-bottom: 6px;
        }
        #childModePwdModal .cmpm-input {
            width: 100%;
            height: 46px;
            border: 1.5px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0 14px;
            font-size: 16px;
            letter-spacing: 4px;
            text-align: center;
            background: var(--bg-primary);
            box-sizing: border-box;
            outline: none;
            transition: border-color 0.2s;
        }
        #childModePwdModal .cmpm-input:focus { border-color: var(--primary); }
        #childModePwdModal .cmpm-input:not([type="tel"]):not([type="text"]) {
            -webkit-text-security: disc;
        }
        #childModePwdModal .cmpm-code-row {
            display: flex;
            gap: 8px;
        }
        #childModePwdModal .cmpm-code-row .cmpm-input { flex: 1; letter-spacing: 2px; }
        #childModePwdModal .cmpm-code-btn {
            flex-shrink: 0;
            height: 46px;
            padding: 0 14px;
            border: none;
            border-radius: var(--radius-md);
            background: #FFF0E8;
            color: var(--primary);
            font-size: var(--font-size-xs);
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }
        #childModePwdModal .cmpm-primary-btn {
            width: 100%;
            height: 48px;
            border: none;
            border-radius: var(--radius);
            background: linear-gradient(135deg, #FF8A4C 0%, var(--primary) 100%);
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 6px;
            box-shadow: 0 6px 14px rgba(255,109,59,0.25);
        }
        #childModePwdModal .cmpm-cancel-btn {
            width: 100%;
            height: 44px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: transparent;
            color: var(--text-secondary);
            font-size: 15px;
            cursor: pointer;
            margin-top: 10px;
        }
        #childModePwdModal .cmpm-forgot-link {
            display: none;
            margin-top: 12px;
            text-align: center;
            color: var(--info);
            font-size: var(--font-size-xs);
            text-decoration: none;
            cursor: pointer;
        }
        #childModePwdModal .cmpm-hint {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            text-align: center;
            margin-top: 8px;
        }

        /* ====== 全局无障碍：键盘焦点样式 [5.2] ====== */
        *:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        *:focus:not(:focus-visible) {
            outline: none;
        }
        *:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
        /* 触摸优先：移动设备不显示焦点环 */
        @media (hover: none) and (pointer: coarse) {
            *:focus-visible { outline: none; }
        }

        /* ====== 触摸目标最小尺寸 [5.3] ====== */
        .nav-item {
            min-height: 48px;
        }
        .icon-btn, .back-btn, .quick-action-btn {
            min-height: 44px;
        }

        /* ====== 品牌色阴影变量 [2.7] ====== */
        :root {
            --shadow-primary: 0 2px 8px rgba(255,109,59,0.15);
            --shadow-primary-md: 0 4px 16px rgba(255,109,59,0.20);
            --shadow-nav: 0 -1px 8px rgba(0,0,0,0.04);
        }

        /* ====== 首屏加载动画 [4.1] ====== */
        #appLoader {
            position: fixed;
            top: 0; left: 50%; transform: translateX(-50%);
            width: 100%; max-width: 430px; height: 100vh;
            background: var(--bg-primary);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            z-index: var(--z-toast);
            transition: opacity 0.4s ease;
        }
        #appLoader.hide { opacity: 0; pointer-events: none; }
        .loader-spinner {
            width: 40px; height: 40px;
            border: 3px solid var(--bg-tertiary);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: loaderSpin 0.8s linear infinite;
        }
        .loader-text {
            margin-top: 16px;
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }
        @keyframes loaderSpin {
            to { transform: rotate(360deg); }
        }

        /* ====== 最小字号强制 12px [2.4] ====== */
        * { font-size: inherit; }
        /* 通过 CSS 变量确保最小字号不低于 --font-size-xs */
        :root { --font-size-min: 12px; }

        html { background: var(--bg-primary); }
        body {
            font-family: var(--font-family);
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: var(--font-size-base);
            line-height: var(--line-height-base);
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        ::-webkit-scrollbar { width: 0; height: 0; }

        #appFrame {
            max-width: 420px;
            margin: 0 auto;
            background: var(--bg-primary);
            min-height: 100vh;
            position: relative;
        }

        .page {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            min-height: 100vh;
            padding-bottom: 100px;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
            z-index: var(--z-base);
            background: #F0F3F8;
            touch-action: pan-y;
            overscroll-behavior-x: contain;
        }

        .page.active {
            display: block;
            opacity: 1;
            pointer-events: auto;
            z-index: calc(var(--z-base) + 1);
        }

        /* 团购详情页：强制脱离 .page 体系，独立全屏渲染，避免父容器塌缩/裁剪导致空白 */
        #page-group-buy-detail {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            display: none !important;
            z-index: var(--z-toast) !important;
            background: var(--bg-primary, #F0F3F8) !important;
            opacity: 1 !important;
            transform: none !important;
            pointer-events: auto !important;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        #page-group-buy-detail.active {
            display: flex !important;
            flex-direction: column !important;
        }

        .header {
            background: transparent;
            padding: 8px 8px 4px;
            position: relative;
            z-index: var(--z-nav);
            border-bottom: none;
        }

        /* 头部渐变背景区域 — 可后台替换背景图
           渐变样式与登录页背景一致：#FFF4F0 极浅橙 → 透明，180deg 垂直过渡
           白色改为透明，以显示首页默认灰色背景 */
        .home-hero-section {
            background: transparent;
            padding-top: 0;
            padding-bottom: 0;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }
        /* 沉浸式头部：浮在 banner 之上 */
        #page-home .header {
            position: absolute;
            top: 0; left: 0; right: 0;
            z-index: 10;
            padding-top: var(--statusbar-h, 44px);
            padding-left: 8px;
            padding-right: 8px;
            padding-bottom: 4px;
        }
        /* 反白：白色文字/图标 */
        #page-home .header .community-switch-btn,
        #page-home .header .community-switch-btn .community-name,
        #page-home .header .community-switch-btn .switch-arrow,
        #page-home .header .community-switch-btn .community-location-icon { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
        /* 搜索栏：半透明白底 */
        #page-home .header .search-bar {
            background: rgba(255,255,255,0.25);
            border: none;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        #page-home .header .search-bar i { color: #fff; }
        #page-home .header .search-bar input { color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
        #page-home .header .search-bar input::placeholder { color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

        .header-title {
            font-size: var(--font-size-lg);
            font-weight: 600;
            text-align: center;
        }

        .header-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .icon-btn {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--icon-size-base);
            color: var(--text-primary);
            background: transparent;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .icon-btn:hover {
            background: var(--bg-secondary);
        }

        .elder-mode .icon-btn {
            width: 60px;
            height: 60px;
        }

        .header-search-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .header-search-box {
            display: flex;
            align-items: center;
            flex: 1;
            background: var(--bg-secondary);
            border-radius: var(--radius-xl);
            padding: 8px 12px;
            margin-left: 8px;
        }

        .header-search-box i {
            color: var(--text-tertiary);
            font-size: var(--font-size-sm);
            margin-right: 8px;
        }

        .header-search-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
        }

        .header-search-input::placeholder {
            color: var(--text-tertiary);
        }

        .community-switch-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 0;
            background: transparent;
            border-radius: var(--radius);
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            border: none;
            color: var(--primary);
            font-size: var(--font-size-base);
            font-weight: 700;
            transition: opacity 0.2s;
            max-width: 50%;
            min-width: 0;
        }

        .community-switch-btn:hover {
            opacity: 0.85;
        }

        .community-switch-btn i {
            font-size: var(--icon-size-xs);
        }

        .community-switch-btn .switch-arrow {
            color: var(--primary);
            opacity: 0.8;
        }

        /* 定位小图标 — 橙色主色调 */
        .community-switch-btn .community-location-icon {
            color: var(--primary);
            font-size: var(--font-size-sm);
            margin-right: 2px;
            flex-shrink: 0;
        }

        .community-switch-btn .community-name {
            max-width: 8em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .community-switch-btn .switch-arrow {
            font-size: 12px;
            margin-left: 2px;
        }

        .search-bar {
            display: flex;
            align-items: center;
            background: transparent;
            border: 1px solid rgba(255, 109, 59, 0.3);
            border-radius: var(--radius-xl);
            padding: 5px 14px;
            gap: var(--spacing-sm);
            flex: 1;
            min-width: 0;
        }

        .search-bar i {
            color: var(--primary);
            font-size: var(--icon-size-sm);
        }

        .search-bar input {
            flex: 1;
            border: none;
            background: transparent;
            color: #fff;
            font-size: var(--font-size-sm);
            outline: none;
            box-shadow: none;
            min-width: 0;
            -webkit-text-fill-color: #fff;
        }
        .search-bar input:focus,
        .search-bar input:active {
            border: none;
            outline: none;
            box-shadow: none;
        }
        .search-bar input:focus-visible {
            outline: none;
        }

        .search-bar input::placeholder {
            color: var(--primary);
            opacity: 0.6;
            -webkit-text-fill-color: var(--primary);
        }

        /* 表单验证错误样式 */
        .form-field-error {
            border-color: var(--danger) !important;
            background: var(--danger-light) !important;
        }
        .form-error-msg {
            color: var(--danger); font-size: var(--font-size-xs); margin-top: 4px; display: none;
        }
        .form-error-msg.show { display: block; animation: shake 0.3s ease; }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-4px); }
            75% { transform: translateX(4px); }
        }
        input:focus, textarea:focus, select:focus {
            border-color: var(--primary);
            outline: none;
        }
        /* 搜索框 focus 时不强制主色边框 */
        .search-bar input:focus { border-color: transparent !important; }
        input[type="text"], input[type="tel"], input[type="password"], textarea, select {
            transition: border-color 0.2s ease;
        }

        /* 搜索页搜索框样式 */
        #page-search .search-page { padding: 0 12px; }
        #page-search .search-bar {
            background: var(--bg-tertiary);
            backdrop-filter: none;
            border: 1px solid var(--border);
            border-radius: var(--radius-full);
            padding: 10px 16px;
            margin-top: 16px;
        }
        #page-search .search-bar i {
            color: var(--text-tertiary);
        }
        #page-search .search-bar input {
            color: var(--text-primary);
            background: transparent;
        }
        #page-search .search-bar input::placeholder {
            color: var(--text-tertiary);
        }

        .elder-mode .community-switch-btn {
            padding: 12px 0;
            font-size: var(--font-size-xl);
            color: #fff;
            font-weight: 700;
        }

        .elder-mode .community-switch-btn .community-name {
            max-width: 160px;
        }

        .elder-mode .search-bar input {
            font-size: var(--font-size-lg);
        }

        .elder-mode .search-bar {
            padding: 12px 16px;
        }

        /* 适老模式：新页面字体放大 */

        /* 通知详情动态页样式 */
        .nd-detail-hero { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 56px; color: #fff; }
        .nd-detail-hero.success { background: linear-gradient(135deg, #00C853, #69F0AE); }
        .nd-detail-hero.warning { background: linear-gradient(135deg, #FF9800, #FFB74D); }
        .nd-detail-hero.info { background: linear-gradient(135deg, #2196F3, #64B5F6); }
        .nd-detail-hero.like { background: linear-gradient(135deg, #E91E63, #F48FB1); }
        .nd-detail-card { margin: -20px 12px 0; background: var(--bg-primary); border-radius: var(--radius-lg); padding: 20px 16px; position: relative; z-index: 1; box-shadow: var(--shadow-sm); }
        .nd-detail-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); line-height: 1.5; }
        .nd-detail-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 8px; }
        .nd-detail-body { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.8; margin-top: 12px; }
        .nd-detail-actions { display: flex; flex-direction: column; gap: 10px; padding: 24px 12px; }
        .nd-detail-btn { width: 100%; padding: 14px; border: none; border-radius: var(--radius-full); background: var(--primary); color: #fff; font-size: var(--font-size-base); font-weight: 600; cursor: pointer; }
        .nd-detail-btn.secondary { background: var(--bg-secondary); color: var(--text-primary); }
        .nd-detail-btn:active { opacity: 0.85; }

        /* 通知批量操作 */
        .notif-toolbar { display: flex; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border-light); background: var(--bg-primary); }
        .notif-tool-btn {
            display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full);
            border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary);
            font-size: 12px; cursor: pointer; transition: all 0.15s;
        }
        .notif-tool-btn:active { border-color: var(--primary); color: var(--primary); }

        /* 群二维码弹层 */
        .qr-overlay {
            position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 480;
            background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
            animation: vrFadeIn 0.2s ease-out;
        }
        .qr-panel {
            width: 86%; max-width: 340px; background: var(--bg-primary); border-radius: 20px;
            overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,0.25); animation: vrSlideUp 0.26s cubic-bezier(0.2,0.8,0.2,1);
        }
        .qr-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
        .qr-header span { font-size: 15px; font-weight: 600; color: var(--text-primary); }
        .qr-close { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--bg-secondary); color: var(--text-secondary); font-size: 14px; cursor: pointer; }
        .qr-body { display: flex; flex-direction: column; align-items: center; padding: 10px 20px 24px; }
        .qr-code {
            width: 210px; height: 210px; border-radius: var(--radius); background: #fff; padding: 12px;
            display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }
        .qr-code svg { width: 100%; height: 100%; display: block; }
        .qr-name { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-top: 14px; }
        .qr-tip { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
        [data-theme="dark"] .qr-panel { background: var(--bg-elevated); }

        .elder-mode .login-title { font-size: var(--font-size-xxl); }
        .elder-mode .login-input { font-size: var(--font-size-lg); }
        .elder-mode .login-btn { font-size: var(--font-size-lg); padding: 16px; }
        .elder-mode .activity-card-title { font-size: var(--font-size-lg); }
        .elder-mode .activity-card-info { font-size: var(--font-size-base); }
        .elder-mode .pf-fee-item-name { font-size: var(--font-size-lg); }
        .elder-mode .pf-account-info-val { font-size: var(--font-size-base); }
        .elder-mode .coupon-name { font-size: var(--font-size-lg); }
        .elder-mode .settings-item-label { font-size: var(--font-size-lg); }
        .elder-mode .nd-detail-title { font-size: var(--font-size-xl); }
        .elder-mode .hc-faq-question { font-size: var(--font-size-base); }
        .elder-mode .fb-type-label { font-size: var(--font-size-base); }
        .elder-mode .bl-user-name { font-size: var(--font-size-base); }
        .elder-mode .visitor-info-val { font-size: var(--font-size-lg); }

        .announcement-carousel {
            padding: 0;
            background: transparent;
        }

        .carousel-container {
            position: relative;
            overflow: hidden;
            border-radius: 0;
            touch-action: pan-x pan-y;
            box-shadow: none;
            width: 100%;
        }

        .carousel-slide {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            aspect-ratio: 1034 / 568;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .carousel-slide.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* 首页轮播容器高度 */
        .announcement-carousel .carousel-container {
            aspect-ratio: 1034 / 568;
        }

        /* 独立背景层：不受 carousel-container 的 overflow:hidden 裁剪
           宽度100%，高度按图片原始比例自适应，可自然向下溢出到分类区域 */
        .announcement-carousel {
            position: relative;
            overflow: visible;
        }
        .carousel-static-bg {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: auto;
            z-index: 0;
            display: block;
            pointer-events: none;
        }
        /* 轮播容器透明，让独立背景层透出 */
        .announcement-carousel .carousel-container {
            background: transparent;
            position: relative;
            z-index: 1;
        }
        /* hero区域内所有内容在背景图之上，hero外的内容也在背景图之上 */
        .home-hero-section { position: relative; z-index: 1; }
        .home-content { position: relative; z-index: 2; }
        #appFrame > .home-card-section,
        #page-home > .home-card-section,
        .home-card-section { position: relative; z-index: 2; }

        /* 背景层：img标签，宽度100%，高度按图片原始比例自适应，可向下溢出 */
        .carousel-bg {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: auto;
            z-index: 1;
            display: block;
            pointer-events: none;
        }

        /* 插画文案层：透明背景，下移避开 header */
        .carousel-illust {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            width: 100%;
            height: auto;
            z-index: 2;
            pointer-events: none;
        }

        /* 兼容旧版 carousel-image（商家页等） */
        .carousel-image {
            width: 100%;
            height: auto;
            aspect-ratio: 1034 / 568;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: var(--font-size-xl);
            font-weight: 600;
        }

        #page-home .carousel-image {
            height: auto;
        }

        /* 商家页轮播图 */
        .merchant-carousel .carousel-image {
            height: 120px;
        }
        .merchant-carousel {
            padding: 12px 16px 0 16px;
        }

        /* ── 家政/服务分类网格 ── */
        .service-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            row-gap: 2px;
            column-gap: 6px;
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: 6px 4px 4px;
            margin: 8px 8px 8px;
        }
        #serviceGrid .service-grid-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: calc((100% - 24px) / 5);
            min-width: 0;
            box-sizing: border-box;
            flex: none;
            padding: 6px 2px;
            cursor: pointer;
            transition: transform var(--transition-fast), opacity var(--transition-fast);
            position: relative;
            background: transparent;
            border-radius: var(--radius-sm);
            -webkit-tap-highlight-color: transparent;
        }
        #serviceGrid .service-grid-item:active {
            transform: scale(0.92);
            opacity: 0.85;
        }
        #serviceGrid .service-grid-item .service-icon {
            width: 36px;
            height: 36px;
            border-radius: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            color: #fff;
            transition: transform var(--transition-fast);
            }
        #serviceGrid .service-grid-item .service-label {
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            font-weight: 500;
            line-height: 1.4;
        }
        #serviceGrid .service-grid-item .service-sub {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-top: 2px;
            line-height: 1.3;
        }
        .service-grid-section-title {
            font-size: var(--font-size-base);
            font-weight: 700;
            color: var(--text-primary);
            margin: 10px 16px 2px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .service-grid-section-title i { color: #FF6F00; }

        /* ── 服务列表卡片样式 ── */
        .service-list-card {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px;
            margin: 0 16px 14px;
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            transition: transform 0.15s;
            cursor: pointer;
            position: relative;
        }
        .service-list-card:active {
            transform: scale(0.98);
            }
        .service-list-card .sl-icon-wrap {
            width: 60px;
            height: 60px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xxl);
            color: #fff;
            flex-shrink: 0;
            }
        .service-list-card .sl-info {
            flex: 1;
            min-width: 0;
        }
        .service-list-card .sl-name {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.4;
        }
        .service-list-card .sl-desc {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            margin-top: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }
        .service-list-card .sl-meta {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 6px;
        }
        .service-list-card .sl-sales {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }
        .service-list-card .sl-price {
            text-align: right;
            flex-shrink: 0;
            font-variant-numeric: tabular-nums;
        }
        .service-list-card .sl-price-value {
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--danger);
            line-height: 1.2;
        }
        .service-list-card .sl-price-unit {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        .service-list-search {
            background: var(--bg-tertiary);
            border-radius: var(--radius-xl);
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 12px 16px 8px;
        }
        .service-list-search i {
            color: #C0C4CC;
            font-size: var(--font-size-base);
        }
        .service-list-search input {
            border: none;
            background: transparent;
            outline: none;
            flex: 1;
            font-size: var(--font-size-sm);
            color: var(--text-primary);
        }
        .service-list-search input::placeholder {
            color: #C0C4CC;
        }

        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 6px;
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
        }

        .carousel-indicator {
            width: 6px;
            height: 6px;
            border-radius: var(--radius-full);
            background: rgba(255,255,255,0.5);
            transition: width var(--transition-base), background var(--transition-base);
            cursor: pointer;
        }

        .carousel-indicator:hover {
            background: rgba(255,255,255,0.7);
        }

        .carousel-indicator.active {
            width: 18px;
            border-radius: var(--radius-xs);
            background: var(--text-white);
        }

        .see-more {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px;
            color: var(--primary);
            font-size: var(--font-size-xs);
            font-weight: 500;
            cursor: pointer;
        }

        /* ========== 通用组件样式类 - 替代内联样式 ========== */

        /* 渐变背景色 */
        .bg-orange-warm { background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%); }
        .bg-blue-light { background: linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%); }
        .bg-pink-soft { background: linear-gradient(135deg, #FDCBF1 0%, #E6DEE9 100%); }
        .bg-green-fresh { background: linear-gradient(135deg, #D4FC79 0%, #96E6A1 100%); }
        .bg-gray-cool { background: linear-gradient(135deg, #F5F7FA 0%, #C3CFE2 100%); }
        .bg-purple-soft { background: linear-gradient(135deg, #E0C3FC 0%, #8EC5FC 100%); }
        .bg-green-bright { background: linear-gradient(135deg, #43E97B 0%, #38F9D7 100%); }
        .bg-orange-light { background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%); }

        /* Banner渐变 */
        .banner-life { background: linear-gradient(135deg, #FF6D3B 0%, #FF8F65 100%); }
        .banner-community { background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%); }
        .banner-shop { background: linear-gradient(135deg, #11998E 0%, #38EF7D 100%); }

        /* 订单类型渐变 */
        .shop-bg { background: linear-gradient(135deg, var(--primary) 0%, var(--accent-peach) 100%); }
        .hk-bg { background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%); }
        .ec-bg { background: linear-gradient(135deg, #9C27B0 0%, #CE93D8 100%); }

        /* 服务图标背景色 */
        .icon-orange { background: #FFF8F5; color: #FF6D3B; border-color: #FF6D3B; }
        .icon-blue { background: #F0F9FF; color: #4FACFE; border-color: #4FACFE; }
        .icon-green { background: #F0FFF9; color: #43E97B; border-color: #43E97B; }
        .icon-pink { background: #FFF5FB; color: #F093FB; border-color: #F093FB; }
        .icon-purple { background: #F5F3FF; color: #667EEA; border-color: #667EEA; }

        /* 网格图标容器 */
        .grid-icon-box {
            width: 52px; height: 52px;
            border-radius: var(--radius-lg);
            display: flex; align-items: center; justify-content: center;
            border: 2px solid;
            font-size: var(--font-size-xxl);
        }

        /* 卡片图片容器 */
        .card-img {
            width: 100%; aspect-ratio: 1 / 1;
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; border-radius: var(--radius);
        }

        /* 轮播文字定位 */
        .carousel-text-up { margin-top: -60px; text-align: left; color: white; }
        .carousel-text-title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 6px; }
        .carousel-text-desc { font-size: var(--font-size-sm); opacity: 0.9; }

        /* ========== 大规模内联样式重构 - 新增语义化类 ========== */

        /* 分类卡片语义化背景色 */
        .post-card-gradient-1 { background: var(--primary-light); } /* 互助-橙色系 */
        .post-card-gradient-2 { background: #FFF0F5; } /* 互助-粉色系 */
        .post-card-gradient-4 { background: #F0F4FF; } /* 失物-蓝色系 */
        .post-card-gradient-5 { background: #FFF4F8; } /* 宠物-粉色系 */
        .post-card-gradient-6 { background: #F4F0FF; } /* 家政-紫色系 */
        .post-card-gradient-7 { background: #FFF8F0; } /* 美食-橙色系 */
        .post-card-gradient-8 { background: #F0F8FF; } /* 亲子-蓝色系 */
        .post-card-gradient-9 { background: #F4FFF4; } /* 健身-绿色系 */
        .post-card-gradient-10 { background: var(--danger-light); } /* 装修-红色系 */

        /* 评论头像渐变背景 (3种颜色) */
        .comment-avatar-pink { background: linear-gradient(135deg, #F093FB 0%, #F5576C 100%); }
        .comment-avatar-blue { background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%); }
        .comment-avatar-green { background: linear-gradient(135deg, #43E97B 0%, #38F9D7 100%); }

        /* 轮播图渐变背景 (复用已有banner类) */
        .carousel-gradient-purple { background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%); }
        .carousel-gradient-green { background: linear-gradient(135deg, #11998E 0%, #38EF7D 100%); }

        /* 商品图片渐变背景 (复用轮播图渐变) */

        /* 搜索页面样式 */
        .search-container { padding: 16px; border-bottom: 1px solid var(--border); }
        .search-history-container { padding: 16px; }
        .search-history-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
        .search-history-title { font-weight: 600; }
        .search-history-clear { color: var(--text-tertiary); cursor: pointer; }
        .history-tags-container { display: flex; flex-wrap: wrap; gap: 8px; }
        .history-tag { padding: 6px 12px; background: var(--bg-secondary); border-radius: var(--radius-xl); font-size: var(--font-size-sm); cursor: pointer; }
        .search-results-container { padding: 0 16px 16px; }
        .discover-title { font-weight: 600; margin-bottom: 12px; }
        .discover-item { padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
        .discover-item-title { font-size: var(--font-size-sm); }
        .discover-item-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; }

        /* ── 安全课堂页面 ── */
        .safety-carousel {
            position: relative;
            margin: 0 16px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            height: 170px;
        }
        .safety-carousel-track {
            display: flex;
            transition: transform 0.4s ease;
            height: 100%;
        }
        .safety-carousel-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
        }
        .safety-carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .safety-carousel-slide .slide-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px 16px;
            background: linear-gradient(transparent, rgba(0,0,0,0.55));
            color: #fff;
            font-size: var(--font-size-sm);
            font-weight: 600;
        }
        .safety-carousel-dots {
            position: absolute;
            bottom: 8px;
            right: 12px;
            display: flex;
            gap: 6px;
        }
        .safety-carousel-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            transition: opacity, transform 0.3s;
        }
        .safety-carousel-dot.active {
            background: var(--bg-primary);
            width: 18px;
            border-radius: 3px;
        }

        .safety-category-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 10px;
            padding: 14px 16px;
        }
        .safety-cat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 8px 4px;
            cursor: pointer;
            transition: color 0.15s;
        }
        .safety-cat-item:active { opacity: 0.6; }
        .safety-cat-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xxl);
            width: auto;
            height: auto;
        }
        .safety-cat-item.old-fraud { color: #8B6914; }
        .safety-cat-item.old-fraud:hover { color: #A8822A; }
        .safety-cat-item.fire { color: #D32F2F; }
        .safety-cat-item.fire:hover { color: #E85A5A; }
        .safety-cat-item.fraud { color: var(--primary); }
        .safety-cat-item.fraud:hover { color: #FF7300; }
        .safety-cat-item.home-safe { color: var(--success-text); }
        .safety-cat-item.home-safe:hover { color: #3E9E44; }
        .safety-cat-label {
            font-size: var(--font-size-xs);
            font-weight: 600;
        }

        .safety-section-title {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 16px 10px;
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
        }
        .safety-section-title i { color: var(--primary); }

        .safety-article-list {
            padding: 0 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .safety-article-item {
            display: flex;
            gap: 12px;
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 12px;
            cursor: pointer;
            transition: background 0.15s;
            border: 1px solid var(--border-light);
        }
        .safety-article-item:hover { background: #F8F9FB; }
        .safety-article-cover {
            width: 100px;
            height: 70px;
            border-radius: var(--radius-sm);
            flex-shrink: 0;
            overflow: hidden;
            background: var(--bg-tertiary);
        }
        .safety-article-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .safety-article-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-width: 0;
        }
        .safety-article-title {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .safety-article-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }
        .safety-article-meta .cat-tag {
            padding: 2px 8px;
            border-radius: var(--radius-xs);
            font-size: var(--font-size-xs);
            font-weight: 500;
        }
        .cat-tag.old-fraud { background: #FFF8F0; color: #8B6914; }
        .cat-tag.fire { background: #FFF5F5; color: #D32F2F; }
        .cat-tag.fraud { background: #FFF8E1; color: var(--primary); }
        .cat-tag.home-safe { background: var(--success-light); color: var(--success-text); }

        /* ── 安全课堂详情页 ── */
        .safety-detail-content {
            padding: 0 16px 100px;
        }
        .safety-detail-cover {
            width: 100%;
            height: 200px;
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 16px;
        }
        .safety-detail-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .safety-detail-title {
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.4;
            margin-bottom: 10px;
        }
        .safety-detail-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-bottom: 16px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border-light);
        }
        .safety-detail-body {
            font-size: var(--font-size-base);
            line-height: 1.8;
            color: var(--text-secondary);
        }
        .safety-detail-body p {
            margin-bottom: 12px;
        }
        .safety-detail-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-primary);
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            padding: 8px 16px;
            padding-bottom: max(8px, env(safe-area-inset-bottom));
            gap: 4px;
            z-index: 100;
        }
        .safety-detail-bar .bar-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 6px 12px;
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            cursor: pointer;
            border: none;
            background: none;
            transition: color 0.15s;
        }
        .safety-detail-bar .bar-btn i { font-size: var(--font-size-lg); }
        .safety-detail-bar .bar-btn.liked { color: var(--danger); }
        .safety-detail-bar .bar-btn.favorited { color: var(--warning); }
        .safety-detail-bar .bar-btn.comment-count { color: var(--text-secondary); }

        /* 发布页面样式 — 卡片化优化 */
        .publish-container { padding: 12px 12px 16px; background: var(--bg-secondary); min-height: auto; }
        .publish-to-community-label { font-weight: 600; margin-bottom: 8px; }
        .publish-community-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--bg-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
        .publish-community-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
        .publish-community-right { display: flex; align-items: center; gap: 8px; }
        .publish-community-icon { color: var(--primary); }
        .publish-community-name { font-size: var(--font-size-sm); color: var(--primary); font-weight: 600; }

        /* 发布卡片 — 分组容器 */
        .publish-card { background: var(--bg-primary); border-radius: var(--radius-lg); padding: 14px 16px 6px; margin-bottom: 0; }
        .publish-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
        .publish-card-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .publish-card-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .publish-card-tip { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-left: auto; }

        /* 草稿自动保存提示 */
        .publish-draft-tip { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-left: auto; display: flex; align-items: center; gap: 4px; }

        .publish-auth-badge { font-size: var(--font-size-2xs); color: var(--success); display: flex; align-items: center; gap: 4px; }
        .category-select-container { margin-bottom: 0; }
        .category-select-label { font-weight: 600; margin-bottom: 8px; }
        .publish-categories-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0; }
        .category-tag { padding: 4px 8px; background: var(--bg-secondary); border-radius: var(--radius-xl); font-size: var(--font-size-sm); cursor: pointer; transition: none; text-align: center; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .category-tag:hover { background: var(--bg-tertiary); }
        .category-tag.active { background: var(--primary); color: #fff; border-color: var(--primary); }
        .category-tag.publish-category-disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
        .category-tag.publish-category-disabled::after { content: ' 管理'; font-size: 12px; color: var(--warning); }
        .house-type-selector { margin-bottom: 0; }
        .house-type-tags { display: flex; gap: 10px; flex-wrap: wrap; }
        .house-type-tag { padding: 8px 16px; background: var(--bg-secondary); border-radius: var(--radius-xl); font-size: var(--font-size-sm); cursor: pointer; transition: none; text-align: center; border: 1px solid transparent; }
        .house-type-tag:hover { background: var(--bg-tertiary); }
        .house-type-tag.active { background: var(--primary); color: #fff; }

        /* 表单字段标签 + 字数提示 */
        .form-field-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
        .form-field-label-text { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
        .form-field-label-required { color: var(--danger); }
        .form-field-count { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .form-field-count.warn { color: var(--warning); }
        .form-field-count.danger { color: var(--danger); }

        .title-input-container { margin-bottom: 12px; transition: opacity 0.3s, transform 0.3s; }
        .title-input-field { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--font-size-base); font-weight: 400; font-family: inherit; color: var(--text-primary); outline: none; transition: none; }
        .title-input-field:focus, .title-input-field:active { border-color: var(--border); box-shadow: none; outline: none; }
        .title-input-field::placeholder { color: var(--text-tertiary); font-weight: 400; }
        .content-input-container { margin-top: 0; margin-bottom: 0; transition: opacity 0.3s, transform 0.3s; }
        .content-input-wrap { position: relative; }
        .content-input-field { width: 100%; padding: 10px 12px 34px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--font-size-base); font-weight: 400; font-family: inherit; color: var(--text-primary); outline: none; resize: none; transition: none; box-sizing: border-box; line-height: 1.5; overflow-wrap: break-word; white-space: pre-wrap; }
        .content-input-field:focus, .content-input-field:active { border-color: var(--border); box-shadow: none; outline: none; }
        .content-input-field::placeholder { color: var(--text-tertiary); font-weight: 400; }
        .image-upload-container { display: flex; gap: 10px; flex-wrap: wrap; }
        .image-upload-box { width: 100px; height: 100px; background: var(--bg-secondary); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; transition: background 0.2s; }
        .image-upload-box:hover { background: var(--bg-tertiary); }
        .image-upload-icon { font-size: var(--font-size-xxl); color: var(--text-tertiary); }
        .image-upload-text { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; }

        /* 发布范围选择 */
        .publish-scope-selector { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
        .scope-option { padding: 6px 14px; background: var(--bg-secondary); border-radius: var(--radius-xl); font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; }
        .scope-option:hover { background: var(--bg-tertiary); }
        .scope-option.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

        /* 位置标注 */
        .publish-location-tag { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--bg-secondary); border-radius: var(--radius-xl); font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
        .publish-location-tag:hover { background: var(--primary-light); color: var(--primary); }
        .publish-location-tag.active { background: var(--primary-light); color: var(--primary); }

        /* 模板快捷入口 */
        .publish-template-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
        .publish-template-chip { padding: 6px 12px; background: linear-gradient(135deg, #FFF4F0, #FFF); border: 1px solid rgba(255,109,59,0.2); border-radius: var(--radius-xl); font-size: var(--font-size-xs); color: var(--primary); cursor: pointer; transition: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
        .publish-template-chip:hover { background: var(--primary); color: #fff; }
        .publish-topic-section { margin: 8px 0 4px; }
        .publish-topic-title { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
        .publish-topic-subtitle { font-weight: 400; color: var(--text-tertiary); }
        .publish-topic-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
        .publish-topic-chip { padding: 5px 10px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--font-size-xs); white-space: nowrap; cursor: pointer; flex-shrink: 0; }
        .publish-topic-chip.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 600; }
        .publish-template-action { display: none; margin-top: 8px; }
        .publish-template-action.show { display: block; }

        .publish-category-fields { margin-top: 0; margin-bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .publish-category-fields:not(:empty) { margin-top: 12px; margin-bottom: 14px; }
        .publish-field { display: flex; flex-direction: column; gap: 6px; }
        .publish-field.full { grid-column: 1 / -1; }
        .publish-field label { font-size: var(--font-size-xs); color: var(--text-secondary); font-weight: 600; }
        .publish-field input, .publish-field select {
            width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
            font-size: var(--font-size-sm); color: var(--text-primary); background: var(--bg-primary); font-family: inherit; outline: none;
        }
        .publish-field input:focus, .publish-field select:focus { border-color: var(--primary); }
        .publish-field-toggle { flex-direction: row; align-items: center; justify-content: space-between; }
        .publish-field-toggle > span { font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 600; }
        .publish-toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
        .publish-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
        .publish-toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: var(--radius-md); cursor: pointer; transition: none; }
        .publish-toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; background: white; border-radius: 50%; transition: none; }
        .publish-toggle-switch input:checked + .publish-toggle-slider { background: var(--primary); }
        .publish-toggle-switch input:checked + .publish-toggle-slider::before { transform: translateX(20px); }
        .publish-category-tip { grid-column: 1 / -1; padding: 10px 12px; border-radius: var(--radius); background: var(--primary-light); color: var(--primary); font-size: var(--font-size-xs); line-height: 1.5; }
        .publish-media-title { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }

        /* 发布按钮浮动优化 */
        .publish-submit-container { position: fixed; bottom: 0; left: 0; right: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bg-secondary); z-index: 100; }
        .publish-submit-btn { width: 100%; background: linear-gradient(135deg, var(--primary), var(--accent-peach)); color: white; border: none; padding: 14px; border-radius: var(--radius); font-size: var(--font-size-lg); font-weight: 600; cursor: pointer; transition: none; box-shadow: none; }
        .publish-submit-btn:hover { transform: none; }
        .publish-submit-btn:active { transform: translateY(0); }
        .publish-inline-error { animation: publishErrorSlide 0.25s ease-out; }
        .publish-inline-error i { margin-right: 4px; }
        @keyframes publishErrorSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
        .publish-field-error { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15); }

        /* 发布预览按钮 */
        .publish-preview-btn { width: 100%; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); padding: 10px; border-radius: var(--radius); font-size: var(--font-size-sm); font-weight: 500; cursor: pointer; margin-bottom: 8px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
        .publish-preview-btn:hover { border-color: var(--primary); color: var(--primary); }

        /* 闲置表单步骤进度条 */
        .swap-steps { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; padding: 12px; background: var(--bg-secondary); border-radius: var(--radius); }
        .swap-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .swap-step-circle { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
        .swap-step.active .swap-step-circle { background: var(--primary); color: #fff; }
        .swap-step.completed .swap-step-circle { background: var(--success); color: #fff; }
        .swap-step-label { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .swap-step.active .swap-step-label { color: var(--primary); font-weight: 600; }
        .swap-step-line { flex: 0 0 20px; height: 2px; background: var(--bg-tertiary); }
        .swap-step-line.completed { background: var(--success); }

        /* 闲置表单平滑过渡 */
        #publishGeneralFields, #publishSwapFields { transition: opacity 0.3s, transform 0.3s; }

        /* 预览弹窗 */
        .publish-preview-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: var(--z-toast); display: none; align-items: flex-end; justify-content: center; }
        .publish-preview-modal.show { display: flex; }
        .publish-preview-content { background: var(--bg-primary); border-radius: 16px 16px 0 0; width: 100%; max-width: 500px; max-height: 80vh; overflow-y: auto; padding: 16px; animation: slideUp 0.3s ease; }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .publish-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
        .publish-preview-title { font-size: var(--font-size-lg); font-weight: 600; }
        .publish-preview-close { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-secondary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .preview-post-card { background: var(--bg-primary); border-radius: var(--radius); padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
        .preview-post-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
        .preview-post-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; color: var(--primary); }
        .preview-post-author { font-weight: 600; font-size: var(--font-size-sm); }
        .preview-post-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .preview-post-title { font-size: var(--font-size-base); font-weight: 600; margin-bottom: 8px; }
        .preview-post-body { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; }
        .preview-post-footer { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: var(--font-size-xs); }
        .publish-title-badge,
        .post-card-title-label {
            display: inline-flex;
            align-items: center;
            max-width: 7em;
            padding: 2px 7px;
            margin-right: 6px;
            border-radius: var(--radius-xl);
            background: var(--primary-light);
            color: var(--primary);
            font-size: 0.78em;
            font-weight: 700;
            line-height: 1.5;
            vertical-align: 1px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ========== AI 发布助手样式 ========== */
        .ai-gen-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 14px; background: linear-gradient(135deg, var(--primary), var(--accent-peach)); color: #fff; border: none; border-radius: var(--radius-xl); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
        .ai-gen-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,109,59,0.28); }
        .ai-gen-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
        .ai-title-bar { margin-top: 8px; padding: 10px 12px; background: linear-gradient(135deg, #FFF4F0, #FFF); border-radius: var(--radius); border: 1px solid rgba(255,109,59,0.15); }
        .ai-title-label { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--primary); font-weight: 600; margin-bottom: 8px; }
        .ai-title-options { display: flex; flex-direction: column; gap: 6px; }
        .ai-title-option { padding: 8px 12px; background: var(--bg-primary); border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--text-primary); cursor: pointer; transition: background 0.2s; border-left: 3px solid var(--primary); }
        .ai-title-option:hover { background: var(--primary-light); }
        .content-input-toolbar { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; z-index: 2; }
        .ai-toolbar-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: rgba(255,255,255,0.85); border: 1px solid var(--border); border-radius: var(--radius-xl); font-size: var(--font-size-xs); color: var(--text-secondary); cursor: pointer; transition: none; backdrop-filter: blur(4px); }
        .ai-toolbar-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
        .ai-toolbar-btn.recording { background: var(--danger-light); color: var(--danger); border-color: var(--danger); animation: pulse 1.5s infinite; }
        .ai-toolbar-tip { font-size: var(--font-size-xs); color: var(--primary); font-weight: 600; }
        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
        .ai-review-box { margin-top: 10px; padding: 12px; background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--border); }
        .ai-review-header { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
        .ai-review-body { font-size: var(--font-size-xs); color: var(--text-secondary); line-height: 1.6; }
        .ai-review-pass { color: var(--success); }
        .ai-review-warn { color: var(--warning); }
        .ai-review-risk { color: var(--danger); }

        /* 发布页 - 闲置专属表单样式 */
        #publishSwapFields, #editSwapFields { padding-top: 8px; }
        .publish-swap-mode-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
        .publish-swap-mode-card { padding: 16px 8px; border-radius: var(--radius); border: 2px solid var(--border); text-align: center; cursor: pointer; transition: none; background: var(--bg-primary); }
        .publish-swap-mode-card.active { border-color: var(--primary); background: var(--primary-light); }
        .publish-swap-mode-icon { font-size: 28px; margin-bottom: 6px; color: var(--primary); }
        .publish-swap-mode-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
        .publish-swap-mode-desc { font-size: var(--font-size-xs); color: var(--text-secondary); }
        #publishSwapFields .swap-form-group,
        #publishSwapFields .swap-category-list,
        #publishSwapFields .swap-condition-tags,
        #publishSwapFields .swap-image-upload,
        #publishSwapFields .swap-disclaimer,
        #editSwapFields .swap-form-group,
        #editSwapFields .swap-category-list,
        #editSwapFields .swap-condition-tags,
        #editSwapFields .swap-image-upload,
        #editSwapFields .swap-disclaimer { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

        /* 公告列表样式 */
        .announcement-list-container { padding: 16px; }
        .filter-tabs-container { display: flex; gap: 16px; margin-bottom: 16px; }
        .filter-tab { padding-bottom: 4px; cursor: pointer; }
        .filter-tab.active { color: var(--primary); font-weight: 600; border-bottom: 2px solid var(--primary); }
        .filter-tab:not(.active) { color: var(--text-secondary); }
        .announcement-card { background: var(--bg-primary); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; cursor: pointer; }
        .announcement-title { font-weight: 600; margin-bottom: 8px; }
        .announcement-summary { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 8px; }
        .announcement-meta { display: flex; justify-content: space-between; align-items: center; }
        .announcement-time { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .announcement-views { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        /* 公告两级发布：级别标签（平台红 / 物业蓝） */
        .ann-level-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 600; line-height: 1.4; vertical-align: middle; }
        .ann-level-tag.platform { background: var(--danger-light); color: var(--danger); }
        .ann-level-tag.property { background: var(--info-light); color: var(--info); }
        .ann-level-tag i { font-size: calc(var(--font-size-xs) - 1px); }
        .announcement-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
        .announcement-title-row .announcement-title { flex: 1; margin-bottom: 0; }
        [data-theme="dark"] .ann-level-tag.platform { background: rgba(255,59,48,0.16); }
        [data-theme="dark"] .ann-level-tag.property { background: rgba(0,122,255,0.16); }
        .announcement-empty { padding: 48px 20px; text-align: center; color: var(--text-tertiary); }
        .announcement-empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: 0.5; }

        /* Toast 提示样式 */
        .toast-overlay {
            position: fixed;
            left: 50%;
            top: 30%;
            transform: translate(-50%, -50%);
            z-index: 1100;
            padding: 14px 28px;
            background: rgba(0, 0, 0, 0.78);
            border-radius: var(--radius);
            color: #fff;
            font-size: var(--font-size-base);
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .toast-overlay.show {
            opacity: 1;
        }
        /* toast 统一半透明灰色背景 */
        .toast-overlay.warning {
            background: rgba(255, 149, 0, 0.92);
            color: #fff;
        }
        .toast-overlay.error {
            background: rgba(255, 59, 48, 0.92);
            color: #fff;
        }
        .toast-overlay.success {
            background: rgba(52, 199, 89, 0.92);
            color: #fff;
        }
        .toast-overlay.info {
            background: rgba(0, 122, 255, 0.92);
            color: #fff;
        }
        @media (min-width: 769px) {
            .toast-overlay {
                max-width: 430px;
            }
        }

        /* ========== 家庭管理样式 ========== */
        /* 家庭管理页面 */
        .family-manage-container { padding: 16px; }
        .family-community-card {
            background: var(--primary-light);
            border-radius: var(--radius);
            padding: 14px 16px;
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 20px;
        }
        .family-community-icon { color: var(--primary); font-size: var(--font-size-xl); }
        .family-community-info { display: flex; flex-direction: column; }
        .family-community-name { font-weight: 600; color: var(--primary); }
        .family-community-auth { font-size: var(--font-size-xs); color: var(--success); }

        .family-section-title {
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary);
            margin-bottom: 12px;
        }

        .family-member-card {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-bottom: 10px;
            display: flex; align-items: center; gap: 12px;
        }
        .family-member-avatar {
            width: 44px; height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, #A78BFA, #7C3AED);
            display: flex; align-items: center; justify-content: center;
            color: #fff;
            font-size: var(--font-size-lg);
            font-weight: 600;
            flex-shrink: 0;
        }
        .family-member-info { flex: 1; min-width: 0; }
        .family-member-name { font-size: var(--font-size-base); font-weight: 500; color: var(--text-primary); }
        .family-member-meta {
            font-size: var(--font-size-xs); color: var(--text-secondary);
            margin-top: 2px;
        }
        .family-member-relation {
            display: inline-block;
            padding: 2px 8px;
            border-radius: var(--radius);
            font-size: var(--font-size-xs);
            font-weight: 500;
            background: #F0F2FF;
            color: #6C5CE7;
            margin-left: 6px;
        }
        .family-member-remove {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: var(--danger-light);
            border: none;
            color: #FF6B6B;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-sm);
        }

        .family-invite-btn {
            width: 100%;
            padding: 16px;
            border: 2px dashed var(--border);
            border-radius: var(--radius);
            background: transparent;
            color: var(--primary);
            font-size: var(--font-size-base);
            font-weight: 500;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            gap: 8px;
            margin-top: 8px;
            transition: opacity, transform var(--transition-fast);
        }
        .family-invite-btn:hover { border-color: var(--primary); background: var(--primary-light); }

        /* 邀请弹窗 */
        .family-modal-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: var(--z-modal);
            display: none;
            align-items: flex-end;
            justify-content: center;
        }
        .family-modal-overlay.show { display: flex; }
        .family-modal {
            width: 100%; max-width: 430px;
            background: var(--bg-primary);
            border-radius: var(--radius-lg) 16px 0 0;
            padding: 24px 20px 32px;
            animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        @keyframes fadeScale {
            from { opacity: 0; transform: scale(0.92); }
            to { opacity: 1; transform: scale(1); }
        }
        .family-modal-title {
            font-size: var(--font-size-lg); font-weight: 600; text-align: center; margin-bottom: 20px;
        }
        .family-modal-field { margin-bottom: 16px; }
        .family-modal-label {
            font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: 6px;
        }
        .family-modal-input {
            width: 100%; padding: 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: var(--font-size-base);
            outline: none;
            font-family: inherit;
        }
        .family-modal-actions { display: flex; gap: 12px; margin-top: 8px; }
        /* 孩子头像选择器 */
        .family-child-avatar-picker {
            display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
        }
        .family-child-avatar-opt {
            width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
            border: 2.5px solid transparent; cursor: pointer;
            transition: opacity, transform 0.15s ease; -webkit-tap-highlight-color: transparent;
        }
        .family-child-avatar-opt img {
            width: 100%; height: 100%; object-fit: cover;
        }
        .family-child-avatar-opt.selected {
            border-color: var(--primary); transform: scale(1.08);
            box-shadow: 0 2px 8px rgba(255,109,59,0.25);
        }
        .family-modal-btn {
            flex: 1; padding: 14px;
            border-radius: var(--radius);
            font-size: var(--font-size-base); font-weight: 600;
            border: none; cursor: pointer;
        }
        .family-modal-btn.cancel {
            background: var(--bg-secondary); color: var(--text-secondary);
        }
        .family-modal-btn.confirm {
            background: var(--primary); color: #fff;
        }

        /* ===== 家庭管理 · 家长管理（多家长层级） ===== */
        .family-parent-card {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-bottom: 10px;
            display: flex; align-items: center; gap: 12px;
            border: 1px solid var(--border);
        }
        .family-parent-avatar {
            width: 44px; height: 44px; border-radius: 50%;
            background: linear-gradient(135deg, #4FACFE, #00C2FF);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: var(--font-size-lg); font-weight: 600; flex-shrink: 0;
        }
        .family-parent-info { flex: 1; min-width: 0; }
        .family-parent-name { font-size: var(--font-size-base); font-weight: 500; color: var(--text-primary); }
        .family-parent-meta { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 2px; }
        .family-parent-tag {
            display: inline-block; padding: 2px 8px; border-radius: var(--radius);
            font-size: var(--font-size-xs); font-weight: 500;
            background: #E6F4FF; color: var(--info); margin-left: 6px;
        }
        .family-parent-remove {
            width: 32px; height: 32px; border-radius: 50%;
            background: var(--danger-light); border: none; color: #FF6B6B;
            cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm);
        }
        /* 待确认 / 待注册 邀请状态 */
        .family-parent-pending { opacity: 0.92; border: 1px dashed var(--border); }
        .family-parent-avatar-pend { background: var(--bg-secondary); color: var(--text-tertiary); }
        .family-parent-pend-tag { font-size: var(--font-size-xs); font-weight: 500; padding: 1px 7px; border-radius: var(--radius); margin-left: 6px; vertical-align: middle; }
        .family-parent-pend-tag.pending-wait { background: #FFF7E6; color: #D48806; }
        .family-parent-pend-tag.pending-unreg { background: #F0F0F0; color: #8C8C8C; }

        /* ===== 家庭管理 · 任务/心愿/积分/设备 区块通用 ===== */
        .family-block {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 14px;
            border: 1px solid var(--border);
        }
        .family-block-head {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 12px;
        }
        .family-block-title {
            display: flex; align-items: center; gap: 8px;
            font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary);
        }
        .family-block-title .fbt-icon {
            width: 28px; height: 28px; border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            background: var(--primary-light); color: var(--primary); font-size: var(--font-size-sm);
        }
        .family-block-action {
            font-size: var(--font-size-xs); color: var(--primary); cursor: pointer; font-weight: 500;
        }
        .family-block-desc {
            font-size: var(--font-size-xs); color: var(--text-tertiary); line-height: 1.6;
            margin-top: 8px;
        }

        /* 任务/心愿 行 */
        .family-task-row {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 0; border-bottom: 1px solid var(--bg-secondary);
        }
        .family-task-row:last-child { border-bottom: none; }
        .family-task-check {
            width: 22px; height: 22px; border-radius: 50%;
            border: 2px solid var(--border); flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 12px; transition: all 0.15s;
        }
        .family-task-check.done { background: var(--success); border-color: var(--success); }
        .family-task-main { flex: 1; min-width: 0; }
        .family-task-name { font-size: var(--font-size-sm); color: var(--text-primary); }
        .family-task-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .family-task-points {
            font-size: var(--font-size-xs); font-weight: 600; color: var(--primary);
            background: var(--primary-light); padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap;
        }
        .family-task-empty { font-size: var(--font-size-xs); color: var(--text-tertiary); padding: 12px 0; text-align: center; }

        /* 积分规则设置 */
        .family-rule-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 0; border-bottom: 1px solid var(--bg-secondary);
        }
        .family-rule-row:last-child { border-bottom: none; }
        .family-rule-label { font-size: var(--font-size-sm); color: var(--text-primary); }
        .family-rule-input {
            width: 84px; padding: 6px 8px; text-align: center;
            border: 1px solid var(--border); border-radius: var(--radius);
            font-size: var(--font-size-sm); outline: none; font-family: inherit;
        }
        .family-rule-input:focus { border-color: var(--primary); }
        .family-rule-unit { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-left: 6px; }

        /* 设备绑定 */
        .family-device-row {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 0; border-bottom: 1px solid var(--bg-secondary);
        }
        .family-device-row:last-child { border-bottom: none; }
        .family-device-icon {
            width: 34px; height: 34px; border-radius: var(--radius);
            background: var(--info-light, #E6F4FF); color: var(--info);
            display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); flex-shrink: 0;
        }
        .family-device-main { flex: 1; min-width: 0; }
        .family-device-name { font-size: var(--font-size-sm); color: var(--text-primary); }
        .family-device-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .family-device-status {
            font-size: var(--font-size-xs); font-weight: 500; padding: 2px 8px; border-radius: var(--radius-sm);
            background: #E8F8EF; color: var(--success); white-space: nowrap;
        }
        .family-device-status.off { background: var(--bg-secondary); color: var(--text-tertiary); }

        /* 家长管理 · 添加家长弹窗 */
        .family-parent-hint {
            font-size: var(--font-size-xs); color: var(--text-tertiary); line-height: 1.6;
            background: var(--bg-secondary); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px;
        }

        /* 长辈模式适配 */
        .elder-mode .family-member-name { font-size: var(--font-size-lg); }
        .elder-mode .family-member-meta { font-size: var(--font-size-sm); }
        .elder-mode .family-entry-title { font-size: var(--font-size-lg); }
        .elder-mode .family-entry-count { font-size: var(--font-size-sm); }

        /* 团购功能已移除（一期） */

        /* 认证提示样式 (保留display:none用于JS控制) */
        .auth-tip-hidden { display: none; margin-top: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background: var(--warning-light); border-radius: var(--radius-sm); font-size: var(--font-size-base); color: var(--warning); align-items: center; gap: var(--spacing-sm); }
        .auth-tip-visible { display: flex; margin-top: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background: var(--warning-light); border-radius: var(--radius-sm); font-size: var(--font-size-base); color: var(--warning); align-items: center; gap: var(--spacing-sm); }

        /* 轮播文字样式 */
        .carousel-label { font-size: var(--font-size-sm); margin-bottom: 8px; }
        .carousel-headline { font-size: var(--font-size-lg); font-weight: 600; }

        /* 发布成功页面样式 */
        .success-container { padding: 40px 20px; text-align: center; }
        .success-title { font-size: var(--font-size-xl); font-weight: 600; margin-bottom: 12px; }
        .success-message { color: var(--text-secondary); margin-bottom: 32px; line-height: 1.6; }
        .success-btn { width: 100%; background: var(--primary); color: white; border: none; padding: 14px; border-radius: var(--radius); font-size: var(--font-size-base); font-weight: 600; cursor: pointer; }

        /* 列表项布局工具类 */
        .list-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

        /* 表单输入框样式 */
        .auth-form-input { flex: 1; border: none; background: transparent; font-size: var(--font-size-base); color: var(--text-primary); outline: none; text-align: right; }

        /* 收藏页面头像（复用评论头像渐变） */

        .category-tabs {
            padding: 8px 8px 0;
            margin-bottom: 8px;
            background: transparent;
        }

        .category-list {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            row-gap: 6px;
            column-gap: 2px;
            background: transparent;
            border-radius: var(--radius-lg);
            padding: 6px 4px 4px;
            position: relative;
            z-index: 2;
        }
        .category-list::-webkit-scrollbar {
            display: none;
        }

        /* 每行5个，自动换行展示全部菜单 */
        .category-item {
            width: 100%;
            min-width: 0;
            height: 74px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 6px 2px;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: transform 0.2s ease, opacity 0.2s ease;
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            position: relative;
        }
        .category-item.dragging {
            opacity: 1;
            transform: scale(1.1);
        }
        .category-item.drag-over {
            transform: scale(1.1);
        }
        .category-item.draggable-mode {
            animation: shake 0.5s ease infinite;
        }
        @keyframes shake {
            0%, 100% { transform: rotate(-1deg); }
            50% { transform: rotate(1deg); }
        }

        /* 面型图标圆形背景 — 支付宝风格 */
        .category-icon-wrap {
            width: 36px;
            height: 36px;
            border-radius: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: transform var(--transition-fast);
            flex-shrink: 0;
        }
        .category-icon-wrap i {
            font-size: 17px;
        }

        .load-more-indicator {
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
            color: var(--text-tertiary);
            font-size: var(--font-size-sm);
            gap: 8px;
            text-align: center;
        }

        .load-more-indicator.visible {
            display: flex;
        }

        .load-more-indicator .loading-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .category-item span {
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            max-width: 100%;
            line-height: 1.3;
        }

        .category-item:active {
            transform: scale(0.92);
            opacity: 0.85;
        }

        .elder-mode .category-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            row-gap: 2px;
            padding: 6px 4px 4px;
            column-gap: 6px;
        }

        .elder-mode .category-item {
            flex: 0 0 calc((100% - 24px) / 5);
            padding: 8px 2px;
            min-width: 0;
        }

        .elder-mode .category-icon-wrap {
            width: 44px;
            height: 44px;
            border-radius: 30%;
        }

        .elder-mode .category-icon-wrap i {
            font-size: 22px;
        }

        .elder-mode .category-item span {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        /* ── 报个平安 / 健康提醒 快捷入口 ── */

        /* 卡片拖拽排序样式 */
        .home-card-section.card-dragging {
            opacity: 1;
            transform: scale(1.02);
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }
        .home-card-section.card-drag-over {
            transform: scale(1.02);
        }

        /* 首页卡片区块容器 — 支付宝风格 */
        .home-card-section {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            margin: 0 8px 8px;
            padding: 10px 10px 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            }
        .home-card-section.hidden { display: none; }

        /* === 服务卡片模块 === */
        .service-grid-wrap {
            overflow: hidden;
            margin-top: 10px;
        }
        #homeCardSection_service .service-grid-wrap {
            margin-left: -10px;
            margin-right: -10px;
        }
        .service-grid-track {
            display: flex;
            transition: transform 0.3s ease;
        }
        .service-grid-page {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            row-gap: 2px;
            min-width: 100%;
            padding: 6px 4px 4px;
            column-gap: 6px;
            box-sizing: border-box;
        }
        .service-grid-item {
            flex: 0 0 calc((100% - 24px) / 5);
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 6px 2px;
            cursor: pointer;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        .service-grid-item:active { transform: scale(0.95); }
        #homeCardSection_service .service-grid-icon {
            width: 36px;
            height: 36px;
            border-radius: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            color: #fff;
            flex-shrink: 0;
        }
        #homeCardSection_service .service-grid-label {
            font-size: var(--font-size-xs);
            color: var(--text-primary);
            text-align: center;
            line-height: 1.2;
        }
        /* 分页指示器 */
        .service-grid-dots {
            display: flex;
            justify-content: center;
            gap: 4px;
            margin-top: 8px;
        }
        .service-grid-dot {
            width: 16px;
            height: 3px;
            border-radius: 2px;
            background: var(--border);
            transition: all 0.3s;
        }
        .service-grid-dot.active {
            background: var(--primary);
            width: 20px;
        }
        /* 卡片标题行：标题按内容自适应宽度，为右侧按钮预留空间，互不挤压 */
        .home-card-section .home-card-title,
        .home-card-section .service-card-title-badge {
            align-self: flex-start;
            width: -webkit-fit-content;
            width: fit-content;
            max-width: calc(100% - 60px);
            font-size: 15px;
            font-weight: 700;
            line-height: 28px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 服务卡片标题 */
        .service-card-title-badge {
            display: inline-block;
            color: var(--text-primary);
            margin: 0 0 0 4px;
            padding: 0;
            background: transparent;
        }
        /* 全部按钮：绝对定位于卡片右上角，与标题同行不占位 */
        .service-card-all-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            margin: 0;
            height: 28px;
            display: flex;
            align-items: center;
            gap: 2px;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            font-size: var(--font-size-xs);
            cursor: pointer;
            padding: 4px 4px 4px 0;
        }

        /* 用药提醒 */
        .medication-home-list { display:flex; flex-direction:column; gap:8px; }
        .medication-home-item {
            display:flex; align-items:center; gap:10px; padding:8px 10px;
            background:var(--bg-secondary); border-radius:var(--radius); cursor:pointer;
        }
        .medication-home-item.taken { opacity:0.6; }
        .medication-home-icon {
            width:32px; height:32px; border-radius:50%; display:flex;
            align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
        }
        .medication-home-info { flex:1; }
        .medication-home-name { font-size:var(--font-size-sm); font-weight:600; color:var(--text-primary); }
        .medication-home-meta { font-size:var(--font-size-xs); color:var(--text-secondary); margin-top:2px; }
        .medication-home-status {
            padding:4px 12px; border-radius:var(--radius); font-size:var(--font-size-xs); font-weight:600; flex-shrink:0;
        }
        .medication-home-status.pending { background:#FFF5E6; color:#F58500; }
        .medication-home-status.taken { background:#E6FAF5; color:var(--success); }
        .medication-home-status.missed { background:#FFE5E5; color:var(--danger); }

        .med-time-tag.selected { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }

        .med-item {
            display:flex; align-items:center; gap:12px; padding:14px 16px;
            background:var(--bg-primary); border-radius:var(--radius); margin-bottom:8px;
        }
        .med-item-icon {
            width:40px; height:40px; border-radius:50%; display:flex;
            align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
        }
        .med-item-info { flex:1; }
        .med-item-name { font-size:var(--font-size-base); font-weight:600; }
        .med-item-meta { font-size:var(--font-size-sm); color:var(--text-secondary); margin-top:2px; }
        .med-item-actions { display:flex; gap:8px; }
        .med-btn-take {
            padding:6px 16px; border-radius:20px; border:none; font-size:var(--font-size-sm);
            font-weight:600; cursor:pointer; white-space:nowrap;
        }
        .med-btn-take.active { background:linear-gradient(135deg,var(--primary),var(--accent-peach)); color:#fff; }
        .med-btn-take.done { background:var(--bg-tertiary); color:var(--text-tertiary); cursor:default; }

        .med-record-item {
            display:flex; align-items:center; gap:12px; padding:12px 16px;
            background:var(--bg-primary); border-radius:var(--radius); margin-bottom:8px;
        }
        .med-record-date {
            text-align:center; flex-shrink:0; width:48px;
        }
        .med-record-day { font-size:var(--font-size-lg); font-weight:700; color:var(--text-primary); }
        .med-record-month { font-size:var(--font-size-xs); color:var(--text-secondary); }
        .med-record-info { flex:1; }
        .med-record-stats { font-size:var(--font-size-sm); color:var(--text-secondary); }
        .med-record-rate {
            font-size:var(--font-size-base); font-weight:600; margin-top:2px;
        }

        .home-card-section > .home-card-more-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            margin: 0;
        }
        .home-card-title {
            color: var(--text-primary);
            padding: 0;
            margin: 0 0 0 4px;
        }
        .home-card-more-btn {
            width: 28px;
            height: 28px;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            font-size: var(--font-size-lg);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background var(--transition-fast);
        }
        .home-card-more-btn:active { background: var(--bg-secondary); }

        /* 卡片body与标题保持间距，底部与卡片边缘间距一致 */
        .home-card-body,
        .home-card-section > .quick-action-row,
        .home-card-section > .medication-home-list,
        .home-card-section > .home-quick-checkin-list,
        .home-card-section > .fav-merchant-scroll {
            margin-top: 10px;
        }
        .home-card-section > .quick-action-row.layout-new {
            margin-top: 10px;
        }

        /* 服务卡片列表项 — 左右布局 */
        .home-card-body {
            display: flex;
            flex-direction: row;
            gap: 10px;
        }
        .service-card-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 8px;
            cursor: pointer;
            border-radius: var(--radius);
            transition: background var(--transition-fast);
            position: relative;
        }
        .service-card-item:active { background: var(--bg-secondary); }
        .service-card-item:hover { background: rgba(0,0,0,0.03); }
        .service-card-icon {
            width: 36px;
            height: 36px;
            border-radius: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            flex-shrink: 0;
        }
        .service-card-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .service-card-name {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
        }
        .service-card-desc {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }
        .service-card-arrow {
            display: none;
        }
        .service-card-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 12px;
            font-weight: 700;
            color: var(--danger);
            background: rgba(255,59,48,0.1);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
        }

        /* 卡片反馈弹窗 — 支付宝风格 */
        .card-feedback-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 9998;
            display: none;
            opacity: 0;
            transition: opacity 0.25s;
        }
        .card-feedback-overlay.show { display: block; opacity: 1; }
        .card-feedback-sheet {
            position: fixed;
            overscroll-behavior: contain;
            bottom: 0;
            left: 0;
            right: 0;
            transform: translateY(100%);
            width: 100%;
            background: var(--bg-primary);
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            z-index: var(--z-toast);
            transition: transform 0.3s ease;
            padding: 20px 16px env(safe-area-inset-bottom, 0px);
        }
        .card-feedback-overlay.show .card-feedback-sheet {
            transform: translateY(0);
        }
        .card-feedback-sheet-title {
            font-size: var(--font-size-lg);
            font-weight: 700;
            text-align: center;
            margin-bottom: 16px;
            color: var(--text-primary);
        }
        .card-feedback-close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 28px;
            height: 28px;
            border: none;
            background: var(--bg-secondary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-base);
            color: var(--text-tertiary);
            cursor: pointer;
        }
        .card-feedback-close-btn:active { background: var(--bg-tertiary); }
        .card-feedback-section-label {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            margin-bottom: 8px;
            padding-left: 4px;
        }
        .card-feedback-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 16px;
        }
        .card-feedback-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 14px 12px;
            border-radius: var(--radius);
            background: var(--bg-secondary);
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            cursor: pointer;
            border: none;
            transition: background var(--transition-fast);
        }
        .card-feedback-option:active { background: var(--bg-tertiary); }
        .card-feedback-option i { font-size: var(--font-size-lg); color: var(--text-tertiary); }
        .card-feedback-pref {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
        }
        .card-feedback-pref-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 14px;
            border-radius: var(--radius);
            font-size: var(--font-size-sm);
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: background var(--transition-fast);
        }
        .card-feedback-pref-btn.like { background: var(--success-light); color: var(--success-text); }
        .card-feedback-pref-btn.like:active { background: #D4EAD7; }
        .card-feedback-pref-btn.close-card { background: #FFEFED; color: var(--danger); }
        .card-feedback-pref-btn.close-card:active { background: #FFE0DC; }
        .card-feedback-divider {
            height: 1px;
            background: var(--border-light);
            margin: 4px 0 12px;
        }
        .card-feedback-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 4px;
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            cursor: pointer;
        }
        .card-feedback-link i { color: var(--text-tertiary); }

        .quick-action-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 0;
        }
        .quick-action-row.layout-new {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
        }
        .quick-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 18px 16px;
            border-radius: var(--radius);
            font-size: var(--font-size-base);
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
            user-select: none;
        }
        .quick-action-btn:active { transform: scale(0.97); }
        .quick-action-btn.left-big {
            grid-row: 1 / 3;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            padding: 14px 16px;
            position: relative;
        }
        .quick-action-btn.left-big i {
            font-size: 20px;
            margin-bottom: 2px;
        }
        .quick-action-btn.left-big .quick-action-title {
            font-size: var(--font-size-sm);
            font-weight: 600;
        }
        .quick-action-btn.left-big .quick-action-sub {
            font-size: var(--font-size-xs);
            font-weight: 400;
            opacity: 0.7;
            margin-bottom: 8px;
        }
        .quick-action-btn.left-big .quick-action-more {
            display: inline-block;
            padding: 5px 16px;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-xs);
            font-weight: 600;
            margin-top: 4px;
        }
        .quick-action-btn.right-item {
            justify-content: space-between;
            padding: 14px 16px;
        }
        .quick-action-btn.right-item i:first-child {
            font-size: var(--font-size-lg) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            height: var(--font-size-lg);
            line-height: 1;
        }
        .quick-action-btn.right-item .right-item-text {
            flex: 1;
            text-align: left;
            font-size: var(--font-size-sm);
        }
        .quick-action-btn.checkin-btn {
            background: #FFF5F3;
            color: #FF4D26;
        }
        .quick-action-btn.checkin-btn:hover {
            background: #FFEDE9;
        }
        .quick-action-btn.health-btn {
            background: #F0FAFF;
            color: #0077CC;
        }
        .quick-action-btn.health-btn:hover {
            background: #E0F2FF;
        }
        .quick-action-btn.help-sos-btn {
            background: #FFF0EF;
            color: var(--danger);
        }
        .quick-action-btn.help-sos-btn:hover {
            background: #FFE5E3;
        }
        .quick-action-btn.help-phone-btn {
            background: #FFF3ED;
            color: var(--primary);
        }
        .quick-action-btn.help-phone-btn:hover {
            background: #FFE8DD;
        }

        /* ── 签到页面 ── */
        .checkin-header-card {
            background: linear-gradient(135deg, var(--success), var(--success-dark));
            border-radius: 0;
            padding: 24px 20px;
            margin-bottom: 16px;
            color: #fff;
            text-align: center;
        }
        .checkin-day-text { font-size: var(--font-size-sm); opacity: 0.85; margin-bottom: 4px; }
        .checkin-streak-count { font-size: 48px; font-weight: 700; line-height: 1.1; }
        .checkin-streak-label { font-size: var(--font-size-sm); opacity: 0.8; margin-top: 2px; }
        .checkin-main-btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: var(--radius);
            background: var(--bg-primary);
            color: #00B355;
            font-size: var(--font-size-base);
            font-weight: 700;
            cursor: pointer;
            margin-top: 14px;
            box-shadow: 0 2px 12px rgba(0,179,85,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: transform 0.15s;
        }
        .checkin-main-btn:active { transform: scale(0.96); }
        .checkin-main-btn.checked {
            background: rgba(255,255,255,0.2);
            color: #fff;
            cursor: default;
        }
        .checkin-section-title {
            font-size: var(--font-size-base);
            font-weight: 700;
            color: var(--text-primary);
            padding: 14px 12px 8px;
        }
        .checkin-neighbor-list { padding: 0 8px 80px; }
        .checkin-neighbor-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            background: var(--bg-primary);
            border-radius: var(--radius);
            margin-bottom: 8px;
        }
        .checkin-neighbor-avatar {
            width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
            object-fit: cover;
        }
        .checkin-neighbor-info { flex: 1; min-width: 0; }
        .checkin-neighbor-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .checkin-neighbor-status { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 2px; }
        .checkin-neighbor-status.checked-in { color: var(--success); font-weight: 500; }
        .checkin-neighbor-status.missed-warning { color: var(--danger); font-weight: 600; }
        .checkin-neighbor-action { flex-shrink: 0; }
        /* 优化2：独居老人未报平安告警样式 */
        .checkin-neighbor-item.checkin-neighbor-elderly-alert {
            border-color: #FFC9C2 !important;
            background: #FFEFED !important;
            animation: elderlyPulse 2s ease-in-out infinite;
        }
        @keyframes elderlyPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.2); }
            50% { box-shadow: 0 0 0 4px rgba(255,59,48,0.08); }
        }
        [data-theme="dark"] .checkin-neighbor-item.checkin-neighbor-elderly-alert {
            background: rgba(255,59,48,0.12) !important;
            border-color: rgba(255,59,48,0.4) !important;
        }
        .checkin-remind-btn {
            padding: 6px 14px;
            border: none;
            border-radius: var(--radius-xl);
            background: #E8F8EE;
            color: #00B355;
            font-size: var(--font-size-xs);
            font-weight: 600;
            cursor: pointer;
        }
        .checkin-follow-btn {
            padding: 6px 14px;
            border: none;
            border-radius: var(--radius-xl);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: var(--font-size-xs);
            font-weight: 600;
            cursor: pointer;
        }
        .checkin-follow-btn.following {
            background: var(--success-light);
            color: var(--success);
        }
        .checkin-tab-bar {
            display: flex;
            background: transparent;
            border-bottom: 1px solid var(--border);
            margin-top: 8px;
            margin-bottom: 12px;
        }
        .checkin-tab-item {
            flex: 1;
            text-align: center;
            padding: 13px 8px;
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            cursor: pointer;
            position: relative;
            font-weight: 500;
            transition: color var(--transition-fast);
            background: transparent;
            border: none;
            outline: none;
            font-family: inherit;
        }
        .checkin-tab-item.active {
            color: var(--primary);
            font-weight: 600;
        }
        .checkin-tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20%;
            right: 20%;
            height: 3px;
            background: var(--primary);
            border-radius: 2px;
        }
        .checkin-tab-panel {
            display: none;
        }
        .checkin-tab-panel.active {
            display: block;
        }
        .checkin-history-modal {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: var(--z-modal);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .checkin-history-modal.show {
            display: flex;
        }
        .checkin-history-content {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            width: 100%;
            max-width: 360px;
            padding: 24px;
            text-align: center;
        }
        .checkin-history-header {
            margin-bottom: 20px;
        }
        .checkin-history-avatar {
            width: 64px; height: 64px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 8px;
        }
        .checkin-history-name {
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
        }
        .checkin-history-streak {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .checkin-history-calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            margin-bottom: 20px;
        }
        .checkin-history-day {
            aspect-ratio: 1;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xs);
            font-weight: 500;
        }
        .checkin-history-day.checked {
            background: var(--success);
            color: #fff;
        }
        .checkin-history-day.unchecked {
            background: var(--bg-secondary);
            color: var(--text-tertiary);
        }
        .checkin-history-day.today {
            border: 2px solid #00B355;
        }
        .checkin-history-close {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: var(--radius);
            background: var(--primary);
            color: #fff;
            font-size: var(--font-size-base);
            font-weight: 600;
            cursor: pointer;
        }

        /* ── 健康提醒页面 ── */
        .health-tab-bar {
            display: flex;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border);
        }
        .health-tab-item {
            flex: 1;
            text-align: center;
            padding: 13px 8px;
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
            user-select: none;
        }
        .health-tab-item.active { color: var(--primary); font-weight: 600; }
        .health-tab-item.active::after {
            content: ''; position: absolute; bottom: -1px; left: 50%;
            transform: translateX(-50%); width: 24px; height: 3px;
            background: var(--primary); border-radius: 2px;
        }
        .health-panel { display: none; }
        .health-panel.active { display: block; }
        .health-form-group {
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
        }
        .health-form-label {
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: 8px;
        }
        .health-form-input, .health-form-select {
            width: 100%; padding: 12px 14px; border: 1px solid var(--border);
            border-radius: var(--radius-sm); font-size: var(--font-size-base); outline: none;
            box-sizing: border-box; min-height: 44px;
        }
        .health-save-btn {
            margin: 20px 16px 24px; width: calc(100% - 32px); padding: 13px;
            border: none; border-radius: var(--radius); background: var(--primary); color: #fff;
            font-size: var(--font-size-base); font-weight: 600; cursor: pointer;
            position: sticky; bottom: 0; z-index: 10;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
        }
        /* P0修复：健康档案查看模式样式 */
        .health-view-group { background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; margin-top: 12px; }
        .health-view-group-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--primary); margin-bottom: 10px; }
        .health-view-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
        .health-view-row:last-child { border-bottom: none; }
        .health-view-label { font-size: var(--font-size-sm); color: var(--text-secondary); flex-shrink: 0; }
        .health-view-value { font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 600; text-align: right; }
        .medication-empty {
            text-align: center; padding: 48px 16px; color: var(--text-tertiary);
        }
        .medication-empty i { font-size: 40px; margin-bottom: 10px; opacity: 0.35; }
        .medication-add-btn {
            margin: 16px; padding: 12px; border: 2px dashed var(--border); border-radius: var(--radius);
            background: none; color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: 500;
            cursor: pointer; text-align: center; border-style: dashed;
        }
        .medication-item {
            display: flex; align-items: center; gap: 12px; padding: 14px 16px;
            background: var(--bg-primary); margin: 0 16px 10px; border-radius: var(--radius);
        }
        .medication-icon {
            width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,var(--success-light),#C8E6C9);
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
            color: var(--success); font-size: var(--font-size-lg);
        }
        .medication-info { flex: 1; min-width: 0; }
        .medication-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .medication-schedule { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 2px; }
        .medication-toggle {
            padding: 6px 14px; border: none; border-radius: var(--radius-lg);
            background: var(--warning-light); color: var(--warning); font-size: var(--font-size-xs); font-weight: 600;
            cursor: pointer; flex-shrink: 0;
        }

        .content-feed {
            padding: 12px 8px 8px;
            column-count: 2;
            column-gap: 6px;
        }
        /* 首页瀑布流顶部间距单独缩小 */
        #page-home .content-feed { padding-top: 4px; }

        /* ── 响应式多列信息流 ── */
        @media (min-width: 768px)  { .content-feed { column-count: 3; column-gap: 8px; padding: 12px 8px 8px; } }
        @media (min-width: 1080px) { .content-feed { column-count: 4; column-gap: 10px; padding: 12px 8px 8px; } }
        @media (min-width: 1440px) { .content-feed { column-count: 5; column-gap: 12px; padding: 12px 8px 8px; } }
        @media (min-width: 1920px) { .content-feed { column-count: 6; column-gap: 14px; padding: 12px 8px 8px; } }

        /* ── 顶部区域（定位搜索/轮播/分类）与内容区宽度对齐 ── */
        @media (min-width: 768px) {
            #page-home .header,
            #page-home .announcement-carousel,
            #page-home .category-tabs { padding-left: 8px; padding-right: 8px; }
        }

        .announcement-section {
            grid-column: 1 / -1;
            background: var(--bg-primary);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .announcement-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
        }

        .announcement-section-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            font-size: var(--font-size-base);
        }

        .announcement-section-title i {
            color: var(--primary);
        }

        .announcement-section-more {
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .announcement-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .announcement-list-item:not(:last-child) {
            border-bottom: 1px solid var(--border);
        }

        .announcement-list-item:hover {
            background: var(--bg-secondary);
        }

        .announcement-list-item-title {
            flex: 1;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .announcement-list-item-title::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--primary);
            flex-shrink: 0;
        }

        .announcement-list-item-time {
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            flex-shrink: 0;
            margin-left: 12px;
        }

        .elder-mode .announcement-section-title {
            font-size: var(--font-size-lg);
        }

        .elder-mode .announcement-list-item {
            padding: 16px;
        }

        .elder-mode .announcement-list-item-title {
            font-size: var(--font-size-lg);
        }

        .elder-mode .announcement-list-item-title::before {
            width: 8px;
            height: 8px;
        }

        .elder-mode .announcement-list-item-time {
            font-size: var(--font-size-sm);
        }

        /* 关怀模式：窄屏(<1200px)强制单列 — 保证大字体可读性 */
        @media (max-width: 1199px) {
            .elder-mode .content-feed,
            .elder-mode #pkCheckinList,
            .elder-mode #pkWishList,
            .elder-mode #pkActiveList,
            .elder-mode #pkDiscoverTemplates,
            .elder-mode #pkDiscoverMoments {
                column-count: 1 !important;
                display: block !important;
            }
        }

        /* 关怀模式：宽屏(>=1200px)至少2列 — 利用宽屏空间 */
        @media (min-width: 1200px) {
            .elder-mode .content-feed {
                column-count: 2;
                column-gap: 20px;
                padding: 24px;
            }
            .elder-mode #pkCheckinList {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                padding: 16px;
            }
            .elder-mode #pkWishList {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                padding: 16px;
            }
            .elder-mode .post-card,
            .elder-mode .swap-card,
            .elder-mode .pk-checkin-unified-item,
            .elder-mode .pk-wish-card {
                break-inside: avoid;
                margin-bottom: 0;
            }
        }

        .post-card {
            background: var(--bg-primary);
            border-radius: var(--radius);
            overflow: hidden;
            cursor: pointer;
            transition: transform var(--transition-fast);
            break-inside: avoid;
            margin-bottom: 12px;
        }

        .post-card:active {
            transform: scale(0.98);
            opacity: 0.9;
        }

        .post-card:hover {
            opacity: 0.92;
        }

        .post-card.pinned {
            column-span: all;
            display: flex;
            flex-direction: row;
        }

        .elder-mode .post-card.pinned {
            column-span: all;
            flex-direction: column;
        }

        .post-card-image {
            width: 100%;
            aspect-ratio: 4 / 3;
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: var(--radius) var(--radius) 0 0;
        }

        .post-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .post-card.pinned .post-card-image {
            width: 140px;
            height: auto;
            min-height: 140px;
        }

        .elder-mode .post-card.pinned .post-card-image {
            width: 100%;
            height: 180px;
        }

        .post-card-content {
            padding: 10px 12px;
        }

        /* 图片/视频卡片标题样式 */
        .post-card-image + .post-card-title,
        .post-card-video + .post-card-title {
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-primary);
            padding: 8px 12px 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }

        .post-card.pinned .post-card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .post-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .post-card-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: var(--font-size-sm);
            font-weight: 600;
            overflow: hidden;
            flex-shrink: 0;
        }
        .post-card-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .post-card-author {
            font-size: var(--font-size-xs);
            color: var(--text-primary);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .post-card-verified {
            color: var(--info);
            font-size: var(--font-size-2xs);
        }

        .post-card-title {
            font-size: var(--font-size-xs);
            font-weight: 600;
            margin-bottom: var(--spacing-sm);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }

        .post-card-pinned-tag {
            display: inline-block;
            background: var(--danger);
            color: white;
            font-size: var(--font-size-xs);
            font-weight: 600;
            padding: 2px 6px;
            border-radius: var(--radius-xs);
            margin-bottom: 6px;
        }

        .elder-mode .post-card-pinned-tag {
            font-size: var(--font-size-sm);
            padding: 4px 10px;
        }

        .post-card-meta {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            flex-shrink: 0;
        }

        .post-card-meta span {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .post-card-meta i, .swap-card-want i {
            font-size: var(--icon-size-sm);
        }
        @keyframes likePop {
            0% { transform: scale(1); }
            40% { transform: scale(1.4); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); }
        }
        .like-pop { animation: likePop 0.4s ease; }

        /* 纯文字信息样式 - 统一为有缩略图的形式 */
        .post-card-text-only {
            width: 100%;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 16px;
            border-radius: var(--radius) var(--radius) 0 0;
            position: relative;
        }
        .post-card-text-only .post-card-title {
            /* 2026-10-13：原 calc(var(--font-size-base) * 1.0625) 标准版为 17px（整数），
               但 elder-mode 下 23*1.0625=24.4375px 非整数、文字发虚。
               改为 + 1px：标准 17px / elder 24px，两种模式均为整数，设计意图不变 */
            font-size: calc(var(--font-size-base) + 1px);
            font-weight: 600;
            line-height: var(--line-height-relaxed);
            text-align: left;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            width: 100%;
        }
        .post-card-text-only .post-card-content {
            display: none;
        }
        /* 随机浅色背景 */
        /* 纯文字卡片背景色 - 语义化色彩系统 */
        /* 粉色系：邻里分享、生活记录 */
        .bg-text-1 { background: linear-gradient(135deg, #FFE8EC 0%, #FFF2F4 100%); color: #D4646E; }
        /* 蓝色系：求助问答、咨询 */
        .bg-text-2 { background: linear-gradient(135deg, #E8F4FF 0%, #F2F8FF 100%); color: #4A7BA7; }
        /* 绿色系：活动通知、运动健身 */
        .bg-text-3 { background: linear-gradient(135deg, var(--success-light) 0%, #F2F9F3 100%); color: var(--success-text); }
        /* 橙色系：温馨提示、通知公告 */
        .bg-text-4 { background: linear-gradient(135deg, #FFF3E8 0%, #FFF8F2 100%); color: #C4845A; }
        /* 紫色系：闲置转让、推荐分享 */
        .bg-text-5 { background: linear-gradient(135deg, #F3E8FF 0%, #F8F2FF 100%); color: #8A5AA7; }
        /* 青色系：其他、杂项 */
        .bg-text-6 { background: linear-gradient(135deg, #E8FFFF 0%, #F2FFFF 100%); color: #5A9B9B; }

        /* 多图信息样式 - 统一显示为首图 */
        .post-card-multi-images {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: var(--radius) var(--radius) 0 0;
            overflow: hidden;
            position: relative;
        }
        .post-card-multi-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .post-card-multi-images::after {
            content: attr(data-count);
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 2px 8px;
            border-radius: var(--radius);
            font-size: var(--font-size-xs);
            font-weight: 500;
        }

        /* 视频信息样式 */
        .post-card-video {
            position: relative;
            border-radius: var(--radius) var(--radius) 0 0;
            overflow: hidden;
            width: 100%;
            aspect-ratio: 1 / 1;
        }
        .post-card-video video,
        .post-card-video .video-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .video-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 44px;
            height: 44px;
            background: rgba(0,0,0,0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: var(--font-size-base);
        }
        .video-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 2px 6px;
            border-radius: var(--radius-xs);
            font-size: var(--font-size-xs);
        }

        /* 视频帖补充样式（发布视频 / 信息流视频卡片） */
        .post-card-video { position: relative; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; }
        .post-card-video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
        .post-card-video .video-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .post-card-video .video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
        /* 发布页媒体上传预览交互 */
        .publish-media-upload-btn:active { border-color: var(--primary); color: var(--primary); }

        .app-fab {
            position: fixed;
            bottom: 100px;
            right: 24px;
            width: 56px;
            height: 56px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: var(--font-size-xxl);
            box-shadow: 0 2px 8px rgba(255,107,53,0.25);
            cursor: pointer;
            transition: transform var(--transition-fast);
            z-index: var(--z-fab);
            animation: fab-breathe 3s ease-in-out infinite;
        }

        @keyframes fab-breathe {
            0%, 100% { box-shadow: 0 2px 8px rgba(255,107,53,0.25); }
            50% { box-shadow: 0 4px 12px rgba(255,107,53,0.35); }
        }

        .fab:hover {
            transform: scale(1.08);
            box-shadow: 0 4px 16px rgba(255,107,53,0.4);
            animation: none;
        }

        .fab:active {
            transform: scale(0.95);
        }

        .elder-mode .app-fab {
            width: 72px;
            height: 72px;
            font-size: 32px;
            bottom: 120px;
            right: 32px;
        }

        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            background: var(--bg-primary);
            border-top: 0.5px solid var(--border);
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 6px 0 env(safe-area-inset-bottom, 0px);
            z-index: var(--z-nav);
            min-height: 56px;
        }


        .nav-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2px 12px;
            color: #6B6B6B;
            text-decoration: none;
            cursor: pointer;
            transition: color var(--transition-fast);
            flex: 1;
            min-width: 44px;
            height: 40px;
            box-sizing: border-box;
        }

        .nav-item.active {
            color: var(--primary);
        }

        .nav-item span {
            font-size: 16px;
            font-weight: 400;
            white-space: nowrap;
            line-height: 1;
        }

        .nav-item.active span {
            font-weight: 600;
        }

        .nav-badge { }

        /* 首页刷新icon转圈动画 */
        .nav-item .nav-refresh-icon {
            display: none;
            font-size: 16px;
            color: var(--primary);
            animation: navRefreshSpin 0.8s linear infinite;
        }
        .nav-item.refreshing span { display: none; }
        .nav-item.refreshing .nav-refresh-icon { display: block; }
        @keyframes navRefreshSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 中间「发布」按钮 — 抖音风格icon-only圆角矩形 */
        .nav-item.publish {
            position: relative;
        }
        .nav-item.publish .nav-publish-icon {
            width: 36px;
            height: 24px;
            border-radius: var(--radius-xl);
            background: linear-gradient(135deg, var(--primary), var(--accent-peach));
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
            position: relative;
            z-index: 1;
        }
        .nav-item.publish .nav-publish-icon::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: var(--radius-xl);
            background: linear-gradient(120deg, var(--primary), #FFD700, var(--accent-peach), var(--primary));
            background-size: 300% 300%;
            z-index: -1;
            animation: navPublishGradient 3s ease infinite;
        }
        @keyframes navPublishGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .nav-item.publish .nav-publish-icon i {
            font-size: 16px;
            color: #fff;
        }
        .nav-item.publish:active .nav-publish-icon {
            transform: scale(0.93);
        }

        .elder-mode .bottom-nav { min-height: 52px; }
        .elder-mode .nav-item {
            padding: 4px 0;
            flex: 1;
            height: 52px;
            min-width: 0;
        }
        .elder-mode .nav-item > span:not(.nav-badge) {
            font-size: 20px;
        }
        .elder-mode .nav-badge {
            font-size: 13px !important;
            min-width: 22px !important;
            height: 22px !important;
        }
        .elder-mode .nav-item.publish {
            flex: 1;
        }
        .elder-mode .nav-item.publish .nav-publish-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
        .elder-mode .nav-item.publish .nav-publish-icon::before {
            border-radius: 50%;
        }
        .elder-mode .nav-item.publish .nav-publish-icon i {
            font-size: 24px;
        }

        /* 发布中心卡片：移除 hover 抖动 */
        .publish-card { transition: none; }
        /* 发布入口三选一切换 */
        .publish-swap-active { border-color: var(--primary) !important; }
        .publish-swap-card { transition: none; }
        /* ========== 消息页 - 微信风格会话列表 ========== */
        .conv-page { background: var(--bg-primary); min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain; }
        #page-messages.active { padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; height: 100vh !important; max-height: 100vh !important; min-height: 0 !important; overscroll-behavior: contain; }
        #page-messages .conv-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
        .conv-list { background: var(--bg-primary); }
        /* 演示身份切换（SOS 角色分流预览） */
        .demo-role-switch { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
        .demo-role-label { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; }
        .demo-role-seg { display: flex; background: var(--bg-tertiary); border-radius: var(--radius-sm); padding: 2px; flex: 1; }
        .demo-role-opt { flex: 1; border: none; background: none; font-size: 12px; padding: 5px 0; border-radius: var(--radius-xs); color: var(--text-secondary); cursor: pointer; transition: all .15s; }
        .demo-role-opt.active { background: var(--bg-primary); color: var(--primary); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
        .conv-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            cursor: pointer;
            position: relative;
            background: var(--bg-primary);
            transition: background 0.15s;
            touch-action: pan-y;
        }
        .conv-item:active { background: var(--bg-secondary); }
        @media (hover: hover) and (pointer: fine) {
            .conv-item:hover { background: var(--bg-secondary); }
        }
        .conv-item::after {
            content: '';
            position: absolute;
            left: 76px;
            right: 0;
            bottom: 0;
            height: 1px;
            background: rgba(0,0,0,0.06);
        }
        [data-theme="dark"] .conv-item::after {
            background: rgba(255,255,255,0.06);
        }
        .conv-item-last::after {
            display: none;
        }
        /* 长按上下文菜单 */
        .conv-context-menu-overlay {
            position: fixed; inset: 0; z-index: var(--z-toast);
            background: rgba(0,0,0,0.3);
            display: none; align-items: flex-end; justify-content: center;
        }
        .conv-context-menu-overlay.show { display: flex; }
        .conv-context-menu {
            width: 100%; max-width: 500px;
            background: var(--bg-primary);
            border-radius: 16px 16px 0 0;
            padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
            animation: slideUp 0.2s ease;
        }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .conv-context-menu-item {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 20px; font-size: var(--font-size-base);
            color: var(--text-primary); cursor: pointer;
            transition: background 0.15s;
        }
        .conv-context-menu-item:active { background: var(--bg-secondary); }
        .conv-context-menu-item.danger { color: var(--danger, var(--danger)); }
        .conv-context-menu-cancel {
            display: flex; align-items: center; justify-content: center;
            padding: 14px 20px; margin: 8px 16px 0;
            background: var(--bg-secondary); border-radius: var(--radius-md);
            font-size: var(--font-size-base); font-weight: 600;
            color: var(--text-secondary); cursor: pointer;
        }
        .conv-avatar-wrap {
            position: relative;
            flex-shrink: 0;
            width: 48px;
            height: 48px;
        }
        .conv-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            overflow: hidden;
        }
        .conv-avatar > i { font-size: 22px; }
        .conv-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .conv-online-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--success);
            border: 2px solid var(--bg-primary);
        }
        .conv-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            min-width: 18px;
            height: 18px;
            border-radius: 9px;
            background: var(--danger);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
            border: 2px solid var(--bg-primary);
            line-height: 1;
        }
        .conv-badge.dot {
            width: 10px;
            height: 10px;
            min-width: 10px;
            border-radius: 50%;
            padding: 0;
        }
        .conv-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .conv-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }
        .conv-name {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .conv-time {
            font-size: 12px;
            color: var(--text-tertiary);
            flex-shrink: 0;
        }
        .conv-bottom {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .conv-preview {
            font-size: 13px;
            color: var(--text-tertiary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }
        .conv-draft-tag {
            color: var(--danger);
            font-weight: 600;
        }
        .conv-emoji {
            display: inline-flex;
            vertical-align: middle;
            margin: 0 1px;
        }
        .conv-emoji svg {
            width: 16px;
            height: 16px;
        }
        .conv-mute-icon {
            font-size: 12px;
            color: var(--text-quaternary);
            flex-shrink: 0;
        }

        .conv-toolbar {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding: 10px 16px; background: var(--bg-primary); border-bottom: 1px solid var(--border);
            display: none;
        }
        .conv-toolbar-title { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .conv-toolbar-actions { display: flex; align-items: center; gap: 8px; }
        .conv-toolbar-btn {
            border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary);
            border-radius: var(--radius-full); padding: 6px 10px; font-size: var(--font-size-xs); cursor: pointer;
        }
        .conv-toolbar-btn.primary { border-color: rgba(255,109,59,0.2); background: var(--primary-light); color: var(--primary); font-weight: 600; }

        /* 消息页右上角 + 号按钮 */
        .msg-plus-btn {
            width: 24px; height: 24px; border-radius: 50%; border: none;
            background: transparent;
            color: #222; font-size: 20px; line-height: 1;
            cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
        }
        .msg-plus-btn:active { opacity: 0.6; }

        /* 微信风格弹出菜单 */
        .msg-plus-menu { display: none; position: fixed; inset: 0; z-index: var(--z-toast); }
        .msg-plus-menu.show { display: block; }
        .msg-plus-menu-mask {
            position: absolute; inset: 0; background: rgba(0,0,0,0.15);
            animation: msgMenuFadeIn 0.2s ease-out;
        }
        @keyframes msgMenuFadeIn { from{opacity:0;} to{opacity:1;} }
        .msg-plus-menu-body {
            position: absolute; top: 56px; right: 14px; width: 140px;
            background: #fff; border-radius: var(--radius); overflow: hidden;
            box-shadow: 0 6px 30px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06);
            animation: msgMenuSlideIn 0.22s cubic-bezier(.2,.7,.2,1);
        }
        @keyframes msgMenuSlideIn {
            from { opacity: 0; transform: translateY(-8px) scale(0.96); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .msg-plus-menu-item {
            display: flex; align-items: center; gap: 8px; padding: 8px 14px;
            cursor: pointer; transition: background 0.15s; border-bottom: 1px solid #f5f5f5;
        }
        .msg-plus-menu-item:last-child { border-bottom: none; }
        .msg-plus-menu-item:hover, .msg-plus-menu-item:active { background: #f8f8fa; }
        .msg-plus-ico {
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; flex-shrink: 0; width: 18px; text-align: center;
        }
        .msg-plus-menu-item:nth-child(1) .msg-plus-ico { color: #07c160; } /* 扫一扫 */
        .msg-plus-menu-item:nth-child(2) .msg-plus-ico { color: #8B5CF6; } /* 家庭群 */
        .msg-plus-menu-item:nth-child(3) .msg-plus-ico { color: #3B82F6; } /* 普通群 */
        .msg-plus-menu-item:nth-child(4) .msg-plus-ico { color: #F59E0B; } /* 加好友 */
        .msg-plus-menu-item strong { font-size: 13px; color: #222; }

        /* 消息通用弹窗：扫一扫 / 添加好友 / 创建群 */
        .msg-modal-overlay {
            position: fixed; inset: 0; z-index: var(--z-toast);
            background: rgba(0,0,0,0.4);
            display: none; align-items: flex-end; justify-content: center;
        }
        .msg-modal-overlay.show { display: flex; }
        .msg-modal-panel {
            width: 100%; max-width: 500px; max-height: 85vh; overflow-y: auto;
            background: var(--bg-primary);
            border-radius: 16px 16px 0 0;
            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
            animation: slideUp 0.22s ease;
        }
        .msg-modal-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 16px; border-bottom: 1px solid var(--border);
        }
        .msg-modal-body { padding: 16px; }
        .msg-input-row {
            display: flex; align-items: center; gap: 10px;
            background: var(--bg-secondary); border-radius: var(--radius-sm);
            padding: 8px 12px;
        }
        .msg-input-row i { color: var(--text-tertiary); font-size: 14px; }
        .msg-input-row input {
            flex: 1; border: none; background: transparent; font-size: 14px;
            color: var(--text-primary); outline: none;
        }
        .msg-input-row input::placeholder { color: var(--text-quaternary); }

        /* 扫一扫模拟视图 */
        .scan-viewport {
            position: relative; width: 220px; height: 220px; margin: 0 auto;
            background: #000; border-radius: var(--radius-md); overflow: hidden;
        }
        .scan-frame {
            position: absolute; inset: 16px; border: 2px solid rgba(255,255,255,0.6);
            border-radius: var(--radius-sm);
        }
        .scan-frame::before, .scan-frame::after {
            content: ''; position: absolute; width: 20px; height: 20px;
            border-color: var(--primary); border-style: solid;
        }
        .scan-frame::before { top: -2px; left: -2px; border-width: 4px 0 0 4px; border-radius: var(--radius-sm) 0 0 0; }
.scan-frame::after { bottom: -2px; right: -2px; border-width: 0 4px 4px 0; border-radius: 0 0 var(--radius-sm) 0; }
        .scan-line {
            position: absolute; left: 20px; right: 20px; top: 20px; height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
            animation: scanMove 2s linear infinite;
        }
        @keyframes scanMove { 0% { top: 20px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 196px; opacity: 0; } }
        .scan-hint {
            position: absolute; bottom: 12px; left: 0; right: 0;
            text-align: center; font-size: 12px; color: rgba(255,255,255,0.8);
        }

        /* 创建普通群成员选择 */
        .cg-member-select {
            max-height: 260px; overflow-y: auto;
            border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px;
        }
        .cg-member-item {
            display: flex; align-items: center; gap: 10px; padding: 8px;
            border-radius: var(--radius-sm); cursor: pointer;
        }
        .cg-member-item:active { background: var(--bg-secondary); }
        .cg-member-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
        .cg-member-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
        .cg-member-name { font-size: 14px; color: var(--text-primary); }
        .cg-member-building { font-size: 12px; color: var(--text-tertiary); }

        /* 消息会话列表 */
        .message-conv-section { padding: 0; }
        /* 陌生人消息折叠区（防诈）提示条 */
        .conv-stranger-tip {
            display: flex; align-items: flex-start; gap: 8px;
            margin: 10px 12px 4px; padding: 10px 12px;
            background: rgba(220,38,38,0.07); border: 1px solid rgba(220,38,38,0.18);
            border-radius: var(--radius-sm); font-size: 12px; line-height: 1.5; color: #B91C1C;
        }
        .conv-stranger-tip i { margin-top: 2px; color: var(--sos-red-dark); }
        .message-conv-section-title {
            padding: 8px 16px 6px; font-size: var(--font-size-xs); color: var(--text-tertiary);
            background: var(--bg-secondary); font-weight: 600; letter-spacing: .02em;
        }
        .conv-item {
            width: 100%; border: 0; appearance: none; -webkit-appearance: none; text-align: left;
            font: inherit; color: inherit;
        }
        .conv-item:focus-visible {
            outline: 2px solid var(--primary); outline-offset: -2px; background: var(--bg-secondary);
        }
        .conv-item.pinned::before {
            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary);
        }
        .conv-actions { display: flex; align-items: center; gap: 6px; margin-left: 8px; flex-shrink: 0; }
        .conv-action-btn {
            width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent;
            color: var(--text-tertiary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
        }
        .conv-action-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
        .conv-action-btn.active { color: var(--primary); background: var(--primary-light); }
        .conv-muted .conv-preview, .conv-muted .conv-time { color: var(--text-quaternary); }
        .message-login-guide {
            margin: 24px 16px; padding: 28px 20px; border-radius: var(--radius-lg);
            background: var(--bg-primary); text-align: center; border: 1px solid var(--border);
        }
        .message-login-icon {
            width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--primary-light); color: var(--primary); font-size: 26px;
        }
        .message-login-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
        .message-login-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.7; margin-bottom: 18px; }
        .message-login-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
        .message-login-btn {
            border: none; border-radius: var(--radius-full); padding: 10px 22px;
            font-size: var(--font-size-sm); font-weight: 600; cursor: pointer;
        }
        .message-login-btn.primary { background: var(--primary); color: #fff; }
        .message-login-btn.secondary { background: var(--bg-secondary); color: var(--text-secondary); }
        .merchant-chip-btn {
            flex-shrink: 0; padding: 8px 16px; background: var(--bg-secondary); border-radius: 20px;
            font-size: var(--font-size-sm); cursor: pointer; white-space: nowrap; border: 0; color: var(--text-primary);
        }
        .merchant-chip-btn:focus-visible, .merchant-card[role="button"]:focus-visible {
            outline: 2px solid var(--primary); outline-offset: 2px;
        }
        .merchant-category-strip {
            padding: 10px 0 4px;
            background: var(--bg-primary);
            margin-bottom: 2px;
        }
        .merchant-category-scroller {
            display: flex;
            gap: 0;
            overflow-x: auto;
            padding: 0 0 4px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .merchant-category-scroller::-webkit-scrollbar { display: none; }
        .merchant-category-dots {
            display: flex;
            justify-content: center;
            gap: 4px;
            margin-top: 4px;
        }
        .merchant-category-dot {
            width: 16px;
            height: 3px;
            border-radius: 2px;
            background: var(--border);
            transition: all 0.25s ease;
        }
        .merchant-category-dot.active {
            width: 20px;
            background: var(--primary);
        }
        .merchant-category-item {
            flex: 0 0 calc(100% / 5.5);
            border: 0;
            background: transparent;
            padding: 0 0 2px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 6px;
            cursor: pointer;
            color: var(--text-primary);
        }
        .merchant-category-icon {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }
        .merchant-category-icon.convenience { color: var(--primary); }
        .merchant-category-icon.food { color: #FF7A4F; }
        .merchant-category-icon.repair { color: #3478F6; }
        .merchant-category-icon.beauty { color: #FF4D8D; }
        .merchant-category-icon.education { color: #5A8BFF; }
        .merchant-category-icon.health { color: #1AAE6F; }
        .merchant-category-label {
            max-width: 100%;
            font-size: 13px;
            line-height: 1.2;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .merchant-contribution-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
        .merchant-contribution-tag {
            display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: var(--radius-sm);
            background: rgba(0,122,255,0.08); color: var(--info); font-size: 12px; font-weight: 600;
        }
        /* 关怀版适配 */
        .elder-mode .conv-avatar { width: 56px; height: 56px; border-radius: var(--radius-sm); font-size: 22px; }
        .elder-mode .conv-avatar-wrap { width: 56px; height: 56px; }
        .elder-mode .conv-name { font-size: 18px; }
        .elder-mode .conv-preview { font-size: 15px; }

        /* 关怀版额外样式 */
        .elder-mode .carousel-image {
            font-size: var(--font-size-xxl);
            height: 350px;
        }

        .elder-mode #page-home .carousel-image {
            height: 175px;
        }

        .elder-mode .see-more {
            font-size: var(--font-size-lg);
        }

        .elder-mode .post-card-title {
            line-height: 1.6;
        }

        .elder-mode .app-fab {
            width: 80px;
            height: 80px;
            font-size: 36px;
        }

        .elder-mode .detail-title {
            font-size: 32px;
        }

        .elder-mode .detail-body {
            font-size: var(--font-size-xl);
            line-height: 1.8;
        }

        .elder-mode .interaction-btn {
            font-size: var(--font-size-lg);
            padding: 14px 28px;
        }

        .elder-mode .comment-author {
            font-size: var(--font-size-lg);
        }

        .elder-mode .comment-text {
            font-size: var(--font-size-lg);
        }

        .elder-mode .profile-stat-value {
            font-size: 28px;
        }

        .elder-mode .profile-stat-label {
            font-size: var(--font-size-base);
        }

        /* 关怀版 - 全面字体放大 */
        .elder-mode .home-card-section { padding: 16px 12px; margin: 0 8px 8px; }
        .elder-mode .home-card-title,
        .elder-mode .service-card-title-badge { font-size: var(--font-size-lg) !important; }
        .elder-mode .home-card-section > .home-card-more-btn { margin-bottom: 10px; }
        .elder-mode .profile-header-new { padding: 56px 24px 36px; margin: 0; }
        .elder-mode .profile-avatar { width: 96px; height: 96px; font-size: 36px; }
        .elder-mode .profile-name-row { font-size: var(--font-size-xxl); }
        .elder-mode .profile-name-row i { font-size: var(--font-size-xl); }
        .elder-mode .profile-auth-inline { font-size: var(--font-size-lg); }
        .elder-mode .order-center { padding: 24px; border-radius: var(--radius-xl); margin-bottom: 24px; }
        .elder-mode .order-center-title { font-size: var(--font-size-xxl); }
        .elder-mode .order-center-more { font-size: var(--font-size-lg); }
        .elder-mode .order-type-image { width: 64px; height: 64px; font-size: var(--font-size-xxl); border-radius: var(--radius-lg); }
        .elder-mode .order-type-label { font-size: var(--font-size-lg); }
        .elder-mode .service-grid-new { padding: 24px; gap: 20px; border-radius: var(--radius-xl); }
        .elder-mode .service-icon-new { width: 68px; height: 68px; border-radius: var(--radius-xl); font-size: 28px; }
        .elder-mode .service-label-new { font-size: var(--font-size-xl); }
        .elder-mode .mode-switch-compact { padding: 22px 24px; border-radius: var(--radius-xl); margin-bottom: 0; }
        .elder-mode .mode-compact-label { font-size: var(--font-size-xl); }
        .elder-mode .mode-compact-btn { font-size: var(--font-size-lg); padding: 8px 20px; }

        .elder-mode .menu-item-text {
            font-size: var(--font-size-xxl);
        }

        .elder-mode .mode-option-label {
            font-size: var(--font-size-xxl);
        }

        .elder-mode .mode-option-desc {
            font-size: var(--font-size-lg);
        }

        .elder-mode .notification-title {
            font-size: var(--font-size-lg);
        }

        .elder-mode .notification-text {
            font-size: var(--font-size-base);
        }

        .elder-mode .history-tag {
            padding: 10px 20px;
            font-size: var(--font-size-lg);
        }

        .elder-mode .publish-categories span {
            padding: 12px 20px;
            font-size: var(--font-size-lg);
        }

        .elder-mode .title-input input,
        .elder-mode .content-input textarea {
            font-size: var(--font-size-lg);
        }

        .elder-mode .announcement-item div:first-child {
            font-size: var(--font-size-lg);
        }

        .elder-mode .announcement-item div:nth-child(2) {
            font-size: var(--font-size-base);
        }

        /* ========== 关怀版 - 紧急求助 ========== */
        .elder-mode .sos-main-btn { width: 260px; height: 260px; font-size: 48px; }
        .elder-mode .sos-countdown-num { font-size: 96px; }
        .elder-mode .sos-card { padding: 18px; }
        .elder-mode .sos-card-title { font-size: var(--font-size-xl); }
        .elder-mode .sos-card-sub { font-size: var(--font-size-base); }
        .elder-mode .sos-sent-card { padding: 20px; }
        .elder-mode .sos-timeline-content { font-size: var(--font-size-lg); }
        .elder-mode .sos-history-card { padding: 18px; }
        .elder-mode .sos-worker-card { padding: 18px; }
        .elder-mode .sos-notify-item { padding: 14px; }
        .elder-mode .sos-notify-name { font-size: var(--font-size-lg); }

        /* ========== 关怀版 - 硬件设备管理 ========== */
        .elder-mode .device-card { padding: 18px; }
        .elder-mode .device-card-name { font-size: var(--font-size-lg); }
        .elder-mode .device-card-imei { font-size: var(--font-size-sm); }
        .elder-mode .device-stat-value { font-size: var(--font-size-base); }
        .elder-mode .device-stat-label { font-size: var(--font-size-sm); }
        .elder-mode .device-action-btn { padding: 10px 0; font-size: var(--font-size-base); }
        .elder-mode .device-bind-hero-title { font-size: var(--font-size-xxl); }
        .elder-mode .device-bind-hero-desc { font-size: var(--font-size-base); }
        .elder-mode .device-bind-label { font-size: var(--font-size-base); }
        .elder-mode .device-bind-input { padding: 14px 16px; font-size: var(--font-size-lg); }
        .elder-mode .device-bind-submit { padding: 16px; font-size: var(--font-size-lg); }
        .elder-mode .device-detail-name { font-size: var(--font-size-xxl); }
        .elder-mode .device-detail-section-title { font-size: var(--font-size-base); }
        .elder-mode .device-detail-row-label { font-size: var(--font-size-base); }
        .elder-mode .device-detail-row-value { font-size: var(--font-size-base); }
        .elder-mode .device-event-title { font-size: var(--font-size-base); }
        .elder-mode .device-sim-btn { padding: 12px; font-size: var(--font-size-base); }
        .elder-mode .sos-device-section { padding: 16px; }
        .elder-mode .sos-device-section-title { font-size: var(--font-size-base); }
        .elder-mode .sos-device-name { font-size: var(--font-size-base); }

        /* ========== 关怀版 - 安全课堂 ========== */
        .elder-mode .safety-card { padding: 20px; }
        .elder-mode .safety-card-title { font-size: var(--font-size-xl); }
        .elder-mode .safety-card-desc { font-size: var(--font-size-lg); }
        .elder-mode .safety-card-category { font-size: var(--font-size-base); padding: 6px 14px; }
        .elder-mode .safety-detail-title { font-size: 28px; }
        .elder-mode .safety-detail-body { font-size: var(--font-size-xl); line-height: 1.8; }
        .elder-mode .safety-detail-meta { font-size: var(--font-size-base); }

        /* ========== 关怀版 - 亲子打卡 ========== */
        .elder-mode .pk-tab-item { padding: 12px 20px; font-size: var(--font-size-base); }
        .elder-mode .pk-agreement-card { padding: 20px; }
        .elder-mode .pk-agreement-name { font-size: var(--font-size-xl); }
        .elder-mode .pk-agreement-progress { padding: 10px; font-size: var(--font-size-base); }
        .elder-mode .pk-create-field label { font-size: var(--font-size-lg); }
        .elder-mode .pk-checkin-btn { padding: 16px 32px; font-size: var(--font-size-lg); }
        .elder-mode .pk-wish-card { padding: 20px; }
        .elder-mode .pk-wish-card-title { font-size: var(--font-size-lg); }
        .elder-mode .pk-wish-card-points { font-size: var(--font-size-xxl); }
        .elder-mode .pk-discover-item { padding: 18px; }
        .elder-mode .pk-stat-value { font-size: 28px; }
        .elder-mode .pk-stat-label { font-size: var(--font-size-base); }
        .elder-mode .home-quick-checkin-header { padding: 14px; }
        .elder-mode .home-quick-checkin-title { font-size: var(--font-size-lg); }

        /* ========== 关怀版 - 闲置交换 ========== */
        .elder-mode .swap-card { padding: 20px; }
        .elder-mode .swap-card-title { font-size: var(--font-size-xl); }
        .elder-mode .swap-card-price { font-size: var(--font-size-xxl); }
        .elder-mode .swap-card-desc { font-size: var(--font-size-base); }
        .elder-mode .swap-detail-title { font-size: var(--font-size-xxl); }
        .elder-mode .swap-detail-price { font-size: var(--font-size-xxl); }
        .elder-mode .swap-detail-desc { font-size: var(--font-size-lg); }
        .elder-mode .swap-apply-form { font-size: var(--font-size-lg); }
        .elder-mode .swap-confirm-card { padding: 20px; }
        .elder-mode .swap-mode-card { padding: 20px; }
        .elder-mode .swap-mode-card-title { font-size: var(--font-size-lg); }
        .elder-mode .swap-form-input { font-size: var(--font-size-lg); }
        .elder-mode .swap-form-textarea { font-size: var(--font-size-lg); }
        .elder-mode .swap-category-tag { padding: 8px 18px; font-size: var(--font-size-base); }

        /* ========== 关怀版 - 商家服务 ========== */
        .elder-mode .service-filter-tab { padding: 12px 20px; font-size: var(--font-size-base); }
        .elder-mode .service-list-card { padding: 20px; }
        .elder-mode .service-list-card .sl-name { font-size: var(--font-size-lg); }
        .elder-mode .service-list-card .sl-price-value { font-size: var(--font-size-xxl); }
        .elder-mode .service-detail-title { font-size: var(--font-size-xxl); }
        .elder-mode .service-detail-desc { font-size: var(--font-size-lg); }
        .elder-mode .service-grid-item { padding: 16px; }
        .elder-mode .service-grid-icon { width: 60px; height: 60px; font-size: var(--font-size-xxl); }
        .elder-mode .merchant-card { padding: 20px; }
        .elder-mode .merchant-card-name { font-size: var(--font-size-lg); }
        .elder-mode .merchant-info-row { font-size: var(--font-size-base); padding: 14px; }
        .elder-mode .order-card { padding: 20px; }
        .elder-mode .order-card-title { font-size: var(--font-size-lg); }

        /* ========== 关怀版 - 消息系统 ========== */
        .elder-mode .message-item { padding: 20px; }
        .elder-mode .message-title { font-size: var(--font-size-lg); }
        .elder-mode .message-preview { font-size: var(--font-size-base); }
        .elder-mode .message-time { font-size: var(--font-size-sm); }
        .elder-mode .notification-section-title { font-size: var(--font-size-lg); padding: 14px; }
        .elder-mode .notification-item { padding: 16px; }
        .elder-mode .notification-text { font-size: var(--font-size-base); }

        /* ========== 关怀版 - 公共服务/帮助 ========== */
        .elder-mode .help-apply-card { padding: 18px; }
        .elder-mode .help-apply-card-name { font-size: var(--font-size-lg); }
        .elder-mode .help-apply-card-desc { font-size: var(--font-size-base); }
        .elder-mode .help-apply-card-tel { padding: 12px 20px; font-size: var(--font-size-base); }
        .elder-mode .help-apply-category-title { font-size: var(--font-size-lg); padding: 14px; }

        /* ========== 关怀版 - 分类页面 ========== */
        .elder-mode .category-page-card { padding: 18px; }
        .elder-mode .category-page-card-title { font-size: var(--font-size-lg); }
        .elder-mode .category-page-card-desc { font-size: var(--font-size-base); }

        .community-list-page {
            padding: 16px;
        }

        /* IP/GPS 定位卡片 */
        .location-info-card {
            background: var(--bg-secondary);
            border-radius: var(--radius);
            padding: 12px 14px;
            margin-bottom: 12px;
            border-left: 3px solid var(--primary);
        }

        .relocate-btn {
            background: var(--primary-light);
            color: var(--primary);
            border: none;
            border-radius: var(--radius-lg);
            padding: 5px 12px;
            font-size: var(--font-size-xs);
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: background 0.2s;
        }

        .relocate-btn:active {
            transform: scale(0.96);
        }

        .location-detail-line {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px;
        }

        .location-tag {
            background: var(--primary-light);
            color: var(--primary);
            font-size: var(--font-size-xs);
            padding: 2px 8px;
            border-radius: var(--radius);
            font-weight: 600;
            flex-shrink: 0;
        }

        .location-tag.gps {
            background: var(--success-light);
            color: var(--success);
        }

        .location-tag.ip {
            background: var(--warning-light);
            color: var(--warning);
        }

        .location-tag.fallback {
            background: #EEEEEE;
            color: var(--text-secondary);
        }

        .community-current {
            background: var(--primary-light);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 20px;
        }

        .community-current-label {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .community-current-name {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--primary);
        }

        .community-current-name i {
            font-size: var(--font-size-xl);
        }

        .community-current-auth {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 8px;
            padding: 4px 10px;
            background: var(--success-light);
            border-radius: var(--radius-xl);
            font-size: var(--font-size-2xs);
            color: var(--success);
        }

        .community-section-title {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .community-section-title i {
            color: var(--primary);
        }

        /* === 位置切换器：搜索框 === */
        .community-search-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--bg-primary);
            border: 1px solid var(--border-color, #e5e7eb);
            border-radius: var(--radius);
            padding: 0 14px;
            margin-bottom: 16px;
            height: 44px;
        }
        .community-search-bar i.fa-search {
            color: var(--text-secondary);
            font-size: var(--font-size-base);
        }
        .community-search-bar input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            font-family: inherit;
        }
        .community-search-bar input::placeholder {
            color: var(--text-tertiary);
        }
        .community-search-clear {
            border: none;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        /* === 我的小区 / 常用小区 === */
        .my-communities-section {
            margin-bottom: 16px;
        }
        .my-communities-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .my-comm-item {
            display: flex;
            align-items: center;
            gap: 6px;
            background: var(--primary-light);
            border: 1px solid var(--primary);
            border-radius: 20px;
            padding: 7px 12px;
            cursor: pointer;
            font-size: var(--font-size-xs);
            color: var(--primary);
            transition: transform var(--transition-fast);
        }
        .my-comm-item:hover {
            transform: translateY(-1px);
        }
        .my-comm-icon {
            font-size: var(--font-size-sm);
        }
        .my-comm-name {
            font-weight: 600;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .my-comm-badge {
            font-size: 10px;
            background: var(--primary);
            color: #fff;
            border-radius: var(--radius-sm);
            padding: 1px 6px;
            white-space: nowrap;
        }
        .my-comm-badge.recent {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }

        /* === 未开通小区 === */
        .community-item.unopened {
            cursor: not-allowed;
            opacity: 0.6;
        }
        .community-item-status.unopened {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }

        /* === 身份标签（发帖 / 回复 / 聊天场景） === */
        .identity-tag {
            display: inline-block;
            font-size: 10px;
            line-height: 1;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            margin-left: 5px;
            vertical-align: middle;
            white-space: nowrap;
            font-weight: 600;
        }
        .identity-tag.volunteer { background: #e7f7ee; color: #1a7f4e; }
        .identity-tag.grid { background: #e8f1ff; color: #2563eb; }
        .identity-tag.community { background: #fff1e8; color: #b45309; }
        .identity-tag.merchant { background: #f3e8ff; color: #7c3aed; }
        .identity-tag.building { background: #e0f2f1; color: #0f766e; }

        .community-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            background: var(--bg-primary);
            border-radius: var(--radius);
            margin-bottom: 10px;
            cursor: pointer;
            transition: transform var(--transition-fast);
        }

        .community-item:hover {
            transform: translateY(-1px);
            }

        .community-item.active {
            border: 2px solid var(--primary);
            background: var(--primary-light);
        }

        .community-item-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .community-item-icon {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-sm);
            background: var(--bg-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xl);
            color: var(--primary);
        }

        .community-item-detail {
            display: flex;
            flex-direction: column;
        }

        .community-item-name {
            font-weight: 600;
            font-size: var(--font-size-base);
            margin-bottom: 2px;
        }

        .community-item-address {
            font-size: var(--font-size-2xs);
            color: var(--text-secondary);
        }

        .community-item-distance {
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
        }

        .community-item-status {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: var(--font-size-2xs);
            color: var(--success);
        }

        .community-item-status.not-auth {
            color: var(--text-tertiary);
        }

        .community-item-switch {
            padding: 6px 14px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-xs);
            cursor: pointer;
            font-weight: 500;
        }

        .community-item-switch.current {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            cursor: default;
        }

        /* 右上角城市切换按钮 */
        .city-switch-btn {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            background: var(--primary-light);
            border: none;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--primary);
            cursor: pointer;
        }

        .city-switch-btn:active {
            transform: translateY(-50%) scale(0.96);
        }

        /* 城市选择面板 */
        .city-select-panel {
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border-color);
            padding: 16px;
        }

        .city-section-title {
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 10px;
            margin-top: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .city-section-title:first-child {
            margin-top: 0;
        }

        .city-section-title i {
            color: var(--primary);
        }

        .city-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            background: var(--bg-secondary);
            border-radius: var(--radius);
            margin-bottom: 8px;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .city-item.active {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        .city-item-name {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
        }

        .city-item-desc {
            font-size: var(--font-size-2xs);
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .city-check {
            color: var(--primary);
            font-size: var(--font-size-base);
        }

        /* 区筛选标签行 */
        .district-filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
        }

        .district-filter-chip {
            padding: 6px 14px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-xl);
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
        }

        .district-filter-chip.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }

        .district-filter-chip .district-chip-count {
            opacity: 0.7;
            margin-left: 4px;
        }

        /* 区列表视图 */
        .district-list {
            margin-top: 8px;
        }

        .district-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            background: var(--bg-secondary);
            border-radius: var(--radius);
            margin-bottom: 8px;
            cursor: pointer;
        }

        .district-list-item:active {
            background: var(--bg-tertiary);
        }

        .district-list-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .district-list-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-base);
        }

        .district-list-name {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
        }

        .district-list-meta {
            font-size: var(--font-size-2xs);
            color: var(--text-secondary);
            margin-top: 2px;
        }

        /* 顶部区 tab 切换栏（粘性） */
        .district-tab-row {
            display: flex;
            gap: 6px;
            padding: 4px 2px 12px 2px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .district-tab-row::-webkit-scrollbar {
            display: none;
        }

        .district-tab {
            padding: 6px 14px;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .district-tab.active {
            background: var(--primary);
            color: #fff;
            font-weight: 600;
        }

        /* 小区数量提示 */
        .community-count {
            font-size: var(--font-size-2xs);
            font-weight: 500;
            color: var(--text-tertiary);
        }

        /* 小区卡片的附加信息（建筑年代、绿化率） */
        .community-item-meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 6px;
        }

        .community-meta-tag {
            font-size: var(--font-size-2xs);
            padding: 2px 8px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border-radius: var(--radius);
        }

        .list-item-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        /* 无限滚动加载提示 */
        .infinite-scroll-loading {
            padding: 20px;
            text-align: center;
            color: var(--text-secondary);
            font-size: var(--font-size-xs);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .infinite-scroll-loading i {
            color: var(--primary);
        }

        .infinite-scroll-end {
            padding: 20px 16px 32px 16px;
            text-align: center;
            color: var(--text-tertiary);
            font-size: var(--font-size-2xs);
        }

        .auth-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: var(--z-modal);
            justify-content: center;
            align-items: center;
        }

        .auth-modal-overlay.show {
            display: flex;
        }

        .auth-modal {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: 28px 24px;
            width: 85%;
            max-width: 340px;
            text-align: center;
        }

        .auth-modal-title {
            font-size: var(--font-size-lg);
            font-weight: 600;
            margin-bottom: 10px;
        }

        .auth-modal-desc {
            font-size: var(--font-size-base);
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 24px;
        }

        .auth-modal-desc strong {
            color: var(--primary);
        }

        .auth-modal-btns {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .auth-modal-btn-primary {
            width: 100%;
            padding: 14px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--radius);
            font-size: var(--font-size-base);
            font-weight: 600;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }

        .auth-modal-btn-secondary {
            width: 100%;
            padding: 14px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: none;
            border-radius: var(--radius);
            font-size: var(--font-size-base);
            cursor: pointer;
        }

        .elder-mode .community-item {
            padding: 20px;
        }

        .elder-mode .community-item-icon {
            width: 56px;
            height: 56px;
            font-size: var(--font-size-xxl);
        }

        .elder-mode .community-item-name {
            font-size: var(--font-size-lg);
        }

        .elder-mode .community-item-address {
            font-size: var(--font-size-sm);
        }

        .elder-mode .auth-modal {
            padding: 36px 28px;
        }

        .elder-mode .auth-modal-title {
            font-size: var(--font-size-xxl);
        }

        .elder-mode .auth-modal-desc {
            font-size: var(--font-size-lg);
        }

        .elder-mode .auth-modal-btn-primary,
        .elder-mode .auth-modal-btn-secondary {
            padding: 18px;
            font-size: var(--font-size-lg);
        }

        /* 通用确认弹窗 */
        .confirm-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; }
        .confirm-modal-overlay.show { display: flex; }
        .confirm-modal { background: var(--bg-primary); border-radius: var(--radius-lg); padding: 32px 24px 24px; width: 280px; text-align: center; }
        .confirm-modal-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
        .confirm-modal-desc { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 24px; line-height: 1.5; }
        .confirm-modal-btns { display: flex; gap: 12px; }
        .confirm-modal-btn { flex: 1; padding: 12px; border-radius: var(--radius); font-size: var(--font-size-base); font-weight: 500; cursor: pointer; border: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
        .confirm-modal-btn-cancel { background: var(--bg-tertiary); color: var(--text-primary); }
        .confirm-modal-btn-cancel:hover { background: var(--border); }
        .confirm-modal-btn-danger { background: var(--danger); color: #fff; }
        .confirm-modal-btn-danger:hover { background: #E0332B; }

        .auth-page {
            padding: 16px;
        }

        .auth-page-header {
            text-align: center;
            padding: 24px 0 20px;
        }

        .auth-page-icon {
            width: 72px;
            height: 72px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-size: 32px;
            color: var(--primary);
        }

        .auth-page-title {
            font-size: var(--font-size-xl);
            font-weight: 700;
            margin-bottom: 6px;
        }

        .auth-page-subtitle {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
        }

        .auth-page-subtitle strong {
            color: var(--primary);
        }

        .auth-form-section {
            background: var(--bg-primary);
            border-radius: var(--radius);
            margin-bottom: 16px;
            overflow: hidden;
        }

        .auth-form-section-title {
            padding: 14px 16px;
            font-weight: 600;
            font-size: var(--font-size-base);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .auth-form-section-title i {
            color: var(--primary);
            font-size: var(--font-size-base);
        }

        .auth-form-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border);
        }

        .auth-form-item:last-child {
            border-bottom: none;
        }

        .auth-form-label {
            width: 80px;
            flex-shrink: 0;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            font-weight: 500;
        }

        .auth-form-label .required {
            color: var(--danger);
            margin-left: 2px;
        }

        .auth-form-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
            text-align: right;
            transition: border-color 0.2s;
        }

        .auth-form-input::placeholder {
            color: var(--text-tertiary);
        }

        .auth-form-input-select {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            color: var(--text-tertiary);
            font-size: var(--font-size-base);
            cursor: pointer;
        }

        .auth-form-input-select.selected {
            color: var(--text-primary);
        }

        .auth-form-input-select i {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .auth-form-code-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .auth-form-code-row input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
            text-align: right;
        }

        .auth-form-code-row input::placeholder {
            color: var(--text-tertiary);
        }

        .auth-form-code-btn {
            padding: 6px 14px;
            background: var(--primary-light);
            color: var(--primary);
            border: none;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-xs);
            cursor: pointer;
            white-space: nowrap;
            font-weight: 500;
        }

        .auth-form-code-btn.disabled {
            background: var(--bg-tertiary);
            color: var(--text-tertiary);
            cursor: default;
        }

        .auth-upload-area {
            padding: 16px;
        }

        .auth-upload-tips {
            font-size: var(--font-size-2xs);
            color: var(--text-secondary);
            margin-bottom: 12px;
            line-height: 1.5;
        }

        .auth-upload-grid {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .auth-upload-item {
            width: 100px;
            height: 100px;
            border: 2px dashed var(--border);
            border-radius: var(--radius-sm);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: border-color 0.2s;
            position: relative;
        }

        .auth-upload-item:hover {
            border-color: var(--primary);
        }

        .auth-upload-item i {
            font-size: var(--font-size-xxl);
            color: var(--text-tertiary);
            margin-bottom: 4px;
        }

        .auth-upload-item span {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .auth-upload-item.uploaded {
            border-style: solid;
            border-color: var(--success);
            background: var(--success-light);
        }

        .auth-upload-item.uploaded i {
            color: var(--success);
        }

        .auth-upload-item.uploaded span {
            color: var(--success);
        }

        .auth-upload-item .upload-check {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 20px;
            height: 20px;
            background: var(--success);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: var(--font-size-xs);
        }

        .auth-agreement {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 0 0 16px;
        }

        .auth-agreement input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-top: 2px;
            accent-color: var(--primary);
            flex-shrink: 0;
        }

        .auth-agreement-text {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .auth-agreement-text a {
            color: var(--primary);
            text-decoration: none;
        }

        .auth-submit-btn {
            width: 100%;
            padding: 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--radius);
            font-size: var(--font-size-lg);
            font-weight: 600;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }

        .auth-submit-btn:hover {
            opacity: 0.9;
        }

        .auth-submit-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-tertiary);
            cursor: default;
        }

        .auth-result-page {
            padding: 40px 20px;
            text-align: center;
        }

        .auth-result-title {
            font-size: var(--font-size-xl);
            font-weight: 700;
            margin-bottom: 10px;
        }

        .auth-result-desc {
            font-size: var(--font-size-base);
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 32px;
        }

        .auth-result-btns {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .auth-result-btn-primary {
            width: 100%;
            padding: 14px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--radius);
            font-size: var(--font-size-base);
            font-weight: 600;
            cursor: pointer;
        }

        .auth-result-btn-secondary {
            width: 100%;
            padding: 14px;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: none;
            border-radius: var(--radius);
            font-size: var(--font-size-base);
            cursor: pointer;
        }

        .elder-mode .auth-page-icon {
            width: 96px;
            height: 96px;
            font-size: 42px;
        }

        .elder-mode .auth-page-title {
            font-size: var(--font-size-xxl);
        }

        .elder-mode .auth-form-label {
            width: 100px;
            font-size: var(--font-size-lg);
        }

        .elder-mode .auth-form-input,
        .elder-mode .auth-form-input-select {
            font-size: var(--font-size-lg);
        }

        .elder-mode .auth-form-item {
            padding: 18px 16px;
        }

        .elder-mode .auth-upload-item {
            width: 120px;
            height: 120px;
        }

        .elder-mode .auth-upload-item i {
            font-size: 32px;
        }

        .elder-mode .auth-submit-btn {
            padding: 20px;
            font-size: var(--font-size-xxl);
        }

        .elder-mode .auth-result-title {
            font-size: var(--font-size-xxl);
        }

        .elder-mode .auth-result-desc {
            font-size: var(--font-size-lg);
        }

        .sub-page-tabs {
            display: flex;
            padding: 0 16px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-primary);
        }

        .sub-page-tab {
            flex: 1;
            padding: 14px 0;
            font-size: var(--font-size-base);
            color: var(--text-secondary);
            cursor: pointer;
            position: relative;
            font-weight: 500;
            text-align: center;
            transition: color 0.2s;
        }

        .sub-page-tab.active {
            color: var(--primary);
            font-weight: 600;
        }

        .sub-page-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background: var(--primary);
            border-radius: 2px;
        }

        .sub-page-content {
            padding: 16px;
        }
        #page-my-posts { background: var(--bg-secondary); }
        #page-my-posts .page-header { background: var(--bg-primary); }
        #page-my-posts .sub-page-tabs { background: var(--bg-primary); }
        #page-my-posts .mypost-card { background: var(--bg-primary); }

        .my-post-item {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .my-post-item:hover {
            transform: translateY(-1px);
        }

        .my-post-item-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .my-post-item-category {
            padding: 3px 10px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: var(--radius-xl);
            font-size: var(--font-size-2xs);
            font-weight: 500;
        }

        .my-post-item-status {
            font-size: var(--font-size-2xs);
            font-weight: 500;
        }

        .my-post-item-status.approved {
            color: var(--success);
        }

        .my-post-item-status.pending {
            color: var(--warning);
        }

        .my-post-item-status.rejected {
            color: var(--danger);
        }

        .my-post-item-title {
            font-weight: 600;
            font-size: var(--font-size-base);
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .my-post-item-preview {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .my-post-item-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .my-post-item-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
        }

        .my-post-item-meta span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .my-post-item-actions {
            display: flex;
            gap: 8px;
        }

        .my-post-action-btn {
            padding: 4px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            font-size: var(--font-size-2xs);
            color: var(--text-secondary);
            background: transparent;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }

        .my-post-action-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .my-post-action-btn.delete {
            color: var(--danger);
            border-color: var(--danger);
        }

        .mypost-card { background: var(--bg-primary); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px; cursor: pointer; border-left: 4px solid transparent; }
        .mypost-card.approved { border-left-color: var(--success); }
        .mypost-card.pending { border-left-color: var(--warning); }
        .mypost-card.rejected { border-left-color: var(--danger); }
        .mypost-card-body { padding: 14px 16px; display: flex; gap: 12px; }
        .mypost-thumb { width: 80px; height: 80px; border-radius: var(--radius); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; }
        .mypost-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
        .mypost-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
        .mypost-category-tag { padding: 3px 10px; border-radius: var(--radius-xl); font-size: var(--font-size-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border); }
        .tag-help { background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border); }
        .tag-idle { background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border); }
        .tag-food { background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border); }
        .tag-neighbor { background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border); }
        .tag-pet { background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border); }
        .tag-lost { background: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border); }
        .tag-dating { background: #FFF0F5; color: #D6336C; border: 1px solid #F8D4E0; }
        .mypost-status-badge { padding: 3px 10px; border-radius: var(--radius-xl); font-size: var(--font-size-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
        .status-approved { background: var(--success-light); color: var(--success-text); }
        .status-pending { background: var(--warning-light); color: var(--primary); }
        .status-rejected { background: var(--danger-light); color: var(--danger); }
        .mypost-title-text { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); line-height: 1.6; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 48px; }
        .mypost-preview-text { font-size: var(--font-size-sm); color: var(--text-tertiary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
        .mypost-footer-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-light); margin-left: -92px; padding-left: 0; }
        .mypost-stats { display: flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }
        .mypost-stat { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); color: #bbb; }
        .mypost-stat i { font-size: var(--font-size-sm); }
        .mypost-time { font-size: var(--font-size-xs); color: #ccc; }
        .mypost-actions { display: flex; gap: 8px; }
        .mypost-action-btn { padding: 5px 14px; border-radius: var(--radius-xl); font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; border: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
        .mypost-edit-btn { background: var(--bg-secondary); color: var(--text-primary); }
        .mypost-edit-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
        .mypost-del-btn { background: var(--bg-secondary); color: var(--text-primary); }
        .mypost-del-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }

        .my-fav-item {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .my-fav-item:hover {
            transform: translateY(-1px);
        }

        .my-fav-item-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .my-fav-item-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: var(--font-size-sm);
            font-weight: 600;
            flex-shrink: 0;
        }

        .my-fav-item-author {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
        }

        .my-fav-item-author i {
            color: var(--info);
            font-size: var(--font-size-xs);
        }

        .my-fav-item-community {
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
        }

        .my-fav-item-title {
            font-weight: 600;
            font-size: var(--font-size-base);
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .my-fav-item-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .my-fav-item-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
        }

        .my-fav-unfav-btn {
            padding: 4px 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            font-size: var(--font-size-2xs);
            color: var(--text-secondary);
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .my-fav-unfav-btn:hover {
            border-color: var(--warning);
            color: var(--warning);
        }

        .auth-manage-list {
            padding: 16px;
        }

        .auth-manage-item {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
            }

        .auth-manage-item-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .auth-manage-item-community {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .auth-manage-item-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-sm);
            background: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: var(--font-size-lg);
        }

        .auth-manage-item-name {
            font-weight: 600;
            font-size: var(--font-size-base);
        }

        .auth-manage-item-addr {
            font-size: var(--font-size-2xs);
            color: var(--text-secondary);
        }

        .auth-manage-badge {
            padding: 4px 12px;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-2xs);
            font-weight: 500;
        }

        .auth-manage-badge.approved {
            background: var(--success-light);
            color: var(--success);
        }

        .auth-manage-badge.pending {
            background: var(--warning-light);
            color: var(--warning);
        }

        .auth-manage-badge.rejected {
            background: var(--danger-light);
            color: var(--danger);
        }

        .auth-manage-item-detail {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 20px;
            padding: 12px 0;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            margin-bottom: 12px;
        }

        .auth-manage-detail-row {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: var(--font-size-xs);
        }

        .auth-manage-detail-label {
            color: var(--text-tertiary);
        }

        .auth-manage-detail-value {
            color: var(--text-primary);
        }

        .auth-manage-item-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .auth-manage-btn {
            padding: 6px 16px;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-xs);
            cursor: pointer;
            font-weight: 500;
            border: none;
        }

        .auth-manage-btn.primary {
            background: var(--primary);
            color: white;
        }

        .auth-manage-btn.secondary {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }

        .auth-manage-btn.danger {
            background: var(--danger-light);
            color: var(--danger);
        }


        /* empty-state 定义在下方统一位置 */

        .elder-mode .sub-page-tab {
            padding: 18px 20px;
            font-size: var(--font-size-lg);
        }

        .elder-mode .my-post-item-title,
        .elder-mode .my-fav-item-title {
            font-size: var(--font-size-lg);
        }

        .elder-mode .my-post-item-preview {
            font-size: var(--font-size-base);
        }

        .elder-mode .auth-manage-item-name {
            font-size: var(--font-size-lg);
        }

        .elder-mode .auth-manage-detail-row {
            font-size: var(--font-size-base);
        }

        .elder-mode .auth-manage-btn {
            padding: 10px 20px;
            font-size: var(--font-size-base);
        }

        /* ========== 认证中心 ========== */
        .auth-center-page {
            padding: 16px;
            background: var(--bg-secondary);
            min-height: 100vh;
            padding-bottom: 100px;
        }

        .auth-center-section {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 16px;
        }

        .auth-center-section-title {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .auth-center-section-title i {
            color: var(--primary);
        }

        .auth-type-card {
            display: flex;
            align-items: center;
            padding: 14px;
            border-radius: var(--radius);
            background: var(--bg-secondary);
            margin-bottom: 10px;
            cursor: pointer;
            transition: opacity, transform 0.2s;
        }

        .auth-type-card:active {
            transform: scale(0.98);
            opacity: 0.8;
        }

        .auth-type-card:last-child {
            margin-bottom: 0;
        }

        .auth-type-icon {
            width: 44px;
            height: 44px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xl);
            margin-right: 12px;
            flex-shrink: 0;
        }

        .auth-type-icon.owner { background: var(--info-light); color: var(--info); }
        .auth-type-icon.volunteer { background: #FFF4E5; color: var(--warning); }
        .auth-type-icon.worker { background: var(--success-light); color: var(--success); }
        .auth-type-icon.merchant { background: var(--danger-light); color: var(--danger); }

        .auth-type-info {
            flex: 1;
            min-width: 0;
        }

        .auth-type-name {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .auth-type-desc {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .auth-type-status {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: var(--font-size-xs);
            padding: 4px 8px;
            border-radius: var(--radius);
            flex-shrink: 0;
        }

        .auth-type-status.approved {
            background: var(--success-light);
            color: var(--success);
        }

        .auth-type-status.pending {
            background: #FFF4E5;
            color: var(--warning);
        }

        .auth-type-status.rejected {
            background: var(--danger-light);
            color: var(--danger);
        }

        .auth-type-status.unauth {
            background: var(--bg-primary);
            color: var(--text-tertiary);
            border: 1px solid var(--border);
        }

        .auth-type-arrow {
            color: #C7C7CC;
            margin-left: 8px;
            font-size: var(--font-size-xs);
        }

        .auth-benefits-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: var(--radius);
            padding: 16px;
            color: white;
            margin-bottom: 16px;
        }

        .auth-benefits-title {
            font-size: var(--font-size-base);
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .auth-benefits-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .auth-benefits-tag {
            font-size: var(--font-size-xs);
            padding: 4px 10px;
            background: rgba(255,255,255,0.2);
            border-radius: var(--radius);
        }

        .auth-record-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
        }

        .auth-record-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .auth-record-type {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-base);
            margin-right: 10px;
            flex-shrink: 0;
        }

        .auth-record-info {
            flex: 1;
            min-width: 0;
        }

        .auth-record-name {
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .auth-record-time {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .auth-record-badge {
            font-size: var(--font-size-xs);
            padding: 3px 8px;
            border-radius: var(--radius);
            flex-shrink: 0;
        }

        /* 认证子页面通用 */
        .auth-sub-page {
            padding: 16px;
            background: var(--bg-secondary);
            min-height: 100vh;
            padding-bottom: 100px;
        }

        .auth-sub-header {
            text-align: center;
            padding: 20px 0 24px;
        }

        .auth-sub-icon {
            width: 64px;
            height: 64px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin: 0 auto 12px;
        }

        .auth-sub-title {
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .auth-sub-subtitle {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }

        .auth-type-select-card {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: opacity, transform 0.2s;
        }

        .auth-type-select-card.selected {
            border-color: var(--primary);
            background: #F0F7FF;
        }

        .auth-type-select-card:active {
            transform: scale(0.98);
        }

        .auth-type-select-top {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
        }

        .auth-type-select-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-base);
            margin-right: 10px;
            background: var(--bg-secondary);
            color: var(--primary);
        }

        .auth-type-select-name {
            flex: 1;
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
        }

        .auth-type-select-check {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid #D1D1D6;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .auth-type-select-card.selected .auth-type-select-check {
            background: var(--primary);
            border-color: var(--primary);
        }

        .auth-type-select-check i {
            font-size: var(--font-size-xs);
            color: white;
            display: none;
        }

        .auth-type-select-card.selected .auth-type-select-check i {
            display: block;
        }

        .auth-type-select-desc {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            padding-left: 42px;
        }

        .auth-skills-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 4px;
        }

        .auth-skill-tag {
            font-size: var(--font-size-xs);
            padding: 5px 12px;
            border-radius: var(--radius-lg);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            cursor: pointer;
            border: 1px solid transparent;
            transition: opacity, transform 0.2s;
        }

        .auth-skill-tag.selected {
            background: var(--info-light);
            color: var(--primary);
            border-color: var(--primary);
        }

        .auth-cert-upload-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .auth-cert-upload-item {
            aspect-ratio: 1;
            border-radius: var(--radius-sm);
            background: var(--bg-secondary);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px dashed #D1D1D6;
            transition: opacity, transform 0.2s;
        }

        .auth-cert-upload-item:active {
            opacity: 0.7;
        }

        .auth-cert-upload-item i {
            font-size: var(--font-size-xl);
            color: #C7C7CC;
            margin-bottom: 4px;
        }

        .auth-cert-upload-item span {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }

        .auth-cert-upload-item.uploaded {
            border: none;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .auth-cert-upload-item.uploaded .upload-delete {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--danger);
            color: white;
            font-size: var(--font-size-xs);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .auth-submit-btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: var(--radius);
            font-size: var(--font-size-base);
            font-weight: 600;
            background: var(--primary);
            color: white;
            margin-top: 24px;
            cursor: pointer;
            transition: opacity, transform 0.2s;
        }

        .auth-submit-btn:disabled {
            background: #C7C7CC;
            cursor: not-allowed;
        }

        .auth-submit-btn:active:not(:disabled) {
            transform: scale(0.98);
            opacity: 0.9;
        }

        /* 认证徽章 */
        .auth-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: var(--font-size-xs);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            font-weight: 500;
            vertical-align: middle;
        }

        .auth-badge.owner {
            background: var(--info-light);
            color: var(--info);
        }

        .auth-badge.volunteer {
            background: #FFF4E5;
            color: var(--warning);
        }

        .auth-badge.worker {
            background: var(--success-light);
            color: var(--success);
        }

        .auth-badge.merchant {
            background: var(--danger-light);
            color: var(--danger);
        }

        .auth-badge.official {
            background: linear-gradient(135deg, var(--success), #30B0C0);
            color: white;
        }

        .elder-mode .auth-type-card {
            padding: 16px;
        }

        .elder-mode .auth-type-name {
            font-size: var(--font-size-lg);
        }

        .elder-mode .auth-type-desc {
            font-size: var(--font-size-sm);
        }

        .elder-mode .auth-sub-title {
            font-size: var(--font-size-xl);
        }

        .elder-mode .auth-sub-subtitle {
            font-size: var(--font-size-base);
        }

        .elder-mode .auth-submit-btn {
            padding: 16px;
            font-size: var(--font-size-lg);
        }

        .page-header {
            background: var(--bg-primary);
            padding: var(--statusbar-h, 44px) 16px 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
            min-height: calc(var(--statusbar-h, 44px) + 54px);
        }

        /* 页头右侧操作按钮（分类页"我要发布"等） */
        .page-header-action-btn {
            margin-left: auto;
            flex-shrink: 0;
            padding: 8px 16px;
            border: none;
            border-radius: var(--radius-lg);
            background: var(--primary);
            color: #fff;
            font-size: var(--font-size-sm);
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .page-header-action-btn:active { opacity: 0.85; }

        .page-header .back-btn {
            width: 44px;
            height: 44px;
            min-height: 44px;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-lg);
            color: var(--text-primary);
            background: transparent;
            border: none;
            outline: none;
            box-shadow: none;
            cursor: pointer;
            flex-shrink: 0;
            transition: opacity 0.2s;
        }

        .page-header .back-btn:active { opacity: 0.6; }

        /* 页面头部操作按钮（+、更多等） */
        .header-action {
            width: 44px; height: 44px;
            min-height: 44px;
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-base); color: var(--text-primary);
            background: transparent; border: none; outline: none;
            border-radius: var(--radius-sm); cursor: pointer;
            flex-shrink: 0;
            transition: background-color 0.15s ease;
            touch-action: manipulation;
        }
        .header-action:active { background-color: rgba(0,0,0,0.06); }

        /* P0修复：全局触摸目标最小44px */
        .pk-tab-item, .checkin-tab-item, .al-tab, .leaderboard-tab, .med-tab,
        .pk-section-more, .pk-create-tpl-more, .pk-create-tpl-tab {
            min-height: 44px;
        }
        .leaderboard-btn, .help-apply-card-tel, .help-apply-card-fav,
        .med-btn-take, .al-btn-signup, .checkin-remind-btn, .checkin-follow-btn {
            min-height: 44px;
            min-width: 44px;
        }

        .page-header h1 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: var(--statusbar-h, 44px);
            height: 44px;
            display: flex;
            align-items: center;
            font-size: var(--font-size-base);
            font-weight: 600;
            white-space: nowrap;
        }
        /* 消息页头部：参考商家页头部布局（状态栏留白 + 48px 内容区） */
        .msg-header {
            position: relative !important;
            flex-shrink: 0;
            width: 100%;
            z-index: 100;
            justify-content: center;
            background: var(--bg-primary);
            padding: var(--statusbar-h, 44px) 0 0;
            height: calc(var(--statusbar-h, 44px) + 48px);
            box-sizing: border-box;
            min-height: 0;
        }
        .conv-page .conv-list { padding-top: 0; }
        .msg-header h1 {
            top: calc(var(--statusbar-h, 44px) + 24px);
            transform: translate(-50%, -50%);
            height: auto;
        }
        .msg-header-actions {
            position: absolute;
            right: 12px;
            top: calc(var(--statusbar-h, 44px) + 24px);
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 4px;
            z-index: 1;
        }
        .msg-contacts-btn {
            position: absolute;
            left: 12px;
            top: calc(var(--statusbar-h, 44px) + 24px);
            transform: translateY(-50%);
            width: 34px;
            height: 34px;
            border: none;
            background: none;
            color: var(--text-primary);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .msg-contacts-btn:active { opacity: 1; transform: translateY(-50%); }
        .header-search-icon {
            width: 20px;
            height: 20px;
        }
        /* 通讯录页面 */
        .contacts-page {
            padding: 12px 16px;
            height: 100%;
            overflow-y: auto;
        }
        .contacts-search {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: 12px;
        }
        .contacts-search i {
            color: var(--text-tertiary);
            font-size: 14px;
        }
        .contacts-search input {
            flex: 1;
            border: none;
            outline: none;
            background: none;
            font-size: var(--font-size-sm);
            color: var(--text-primary);
        }
        .contacts-group { margin-bottom: 8px; }
        .contacts-group-title {
            font-size: 12px;
            color: var(--text-tertiary);
            padding: 8px 4px;
            font-weight: 600;
        }
        .contacts-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 4px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
        }
        .contacts-item:active { opacity: 0.7; }
        .contacts-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            color: #fff;
            font-weight: 600;
        }
        .contacts-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .contacts-info {
            flex: 1;
            min-width: 0;
        }
        .contacts-name {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .contacts-name .auth-ico {
            color: var(--primary);
            font-size: 13px;
        }
        .contacts-building {
            font-size: 12px;
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        .contacts-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-tertiary);
            font-size: var(--font-size-sm);
        }
        /* 无返回按钮的page-header：标题居中 */
        .conv-page .page-header,
        .page-header:not(:has(.back-btn)) {
            justify-content: center;
        }

        .elder-mode .page-header .back-btn {
            width: 42px;
            height: 42px;
            min-height: auto;
            font-size: var(--font-size-xl);
        }

        .elder-mode .page-header h1 {
            font-size: var(--font-size-xxl);
        }

        .detail-comment-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            background: var(--bg-primary);
            border-top: 1px solid var(--border);
            z-index: 100;
        }

        /* 详情页顶部用户栏 */
        .detail-page-header {
            justify-content: flex-start;
        }
        .detail-header-user {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            min-width: 0;
        }
        .detail-header-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        .detail-header-name {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .detail-header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .detail-follow-btn {
            padding: 4px 14px;
            border: 1px solid var(--primary);
            border-radius: var(--radius-xl);
            background: transparent;
            color: var(--primary);
            font-size: var(--font-size-xs);
            font-weight: 500;
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast);
        }
        .detail-follow-btn.following {
            background: var(--bg-secondary);
            border-color: var(--border);
            color: var(--text-secondary);
        }
        .detail-follow-btn:active {
            opacity: 0.7;
        }
        .detail-search-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            color: var(--text-primary);
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* 详情页正文区域 */
        .detail-content {
            padding: 16px;
            padding-bottom: 60px;
        }

        .detail-body {
            font-size: var(--font-size-base);
            line-height: 1.8;
            color: var(--text-primary);
            margin-bottom: 12px;
        }

        .detail-body p {
            margin-bottom: 12px;
        }

        /* 发布时间 */
        .detail-publish-time {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            padding: 0 0 16px;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 16px;
        }

        /* 详情页更多操作按钮 */
        .detail-more-btn:hover { background: var(--bg-tertiary); }
        .detail-more-btn:active { background: var(--border); }

        /* 底部操作按钮 */
        .detail-action-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 4px;
            background: transparent;
            border: none;
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            cursor: pointer;
            flex-shrink: 0;
        }
        .detail-action-btn i {
            font-size: 18px;
        }
        .detail-action-btn:active {
            opacity: 0.6;
        }
        .detail-action-btn.liked {
            color: var(--danger);
        }
        .detail-action-btn.liked i {
            font-weight: 900;
        }
        .detail-action-btn.collected {
            color: var(--warning);
        }
        .detail-action-btn.collected i {
            font-weight: 900;
        }

        .detail-comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
        }

        .detail-comment-input-wrapper {
            flex: 1;
            background: var(--bg-secondary);
            border-radius: var(--radius-xl);
            padding: 10px 16px;
        }

        .detail-comment-input {
            width: 100%;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
        }

        .detail-comment-input::placeholder {
            color: var(--text-tertiary);
        }

        .detail-comment-send {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }

        .detail-comment-send:active {
            opacity: 0.8;
        }

        .detail-title {
            font-size: var(--font-size-xxl);
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 16px;
        }

        .elder-mode .detail-title {
            font-size: 28px;
        }

        .detail-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
        }

        .detail-author {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .detail-author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .detail-author-info {
            display: flex;
            flex-direction: column;
        }

        .detail-author-name {
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .detail-author-name i {
            color: var(--info);
            font-size: var(--font-size-sm);
        }

        .detail-author-tag {
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
        }

        .detail-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 20px;
        }

        .detail-image {
            aspect-ratio: 1;
            background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
        }

        .detail-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }

        .detail-tag {
            padding: 6px 12px;
            background: var(--bg-secondary);
            border-radius: var(--radius);
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
        }

        .elder-mode .detail-tag {
            padding: 10px 16px;
            font-size: var(--font-size-base);
        }

        .product-showcase {
            background: var(--bg-secondary);
            padding: 16px;
            margin: 20px 0;
            border-radius: var(--radius);
        }
        .product-showcase-title {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .product-showcase-title i {
            color: var(--warning);
        }

        .product-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            width: 100%;
            box-sizing: border-box;
        }

        @media (min-width: 1080px) {
            .product-list { grid-template-columns: repeat(4, 1fr); gap: 12px; }
        }
        @media (min-width: 1440px) {
            .product-list { grid-template-columns: repeat(9, 1fr); gap: 14px; }
        }
        @media (min-width: 1920px) {
            .product-list { grid-template-columns: repeat(12, 1fr); gap: 16px; }
        }

        .product-item {
            width: 100%;
            height: auto;
            background: var(--bg-primary);
            border-radius: var(--radius);
            overflow: hidden;
            cursor: pointer;
            display: flex;
            flex-direction: column;
        }

        .product-item-image {
            width: 100%;
            aspect-ratio: 1 / 1;
            background: linear-gradient(135deg, #F093FB 0%, #F5576C 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 36px;
            flex-shrink: 0;
            position: relative;
        }

        .product-item-info {
            padding: 8px 10px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            min-height: 0;
        }

        .product-item-name {
            font-size: var(--font-size-sm);
            font-weight: 500;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.3;
            word-break: break-all;
        }

        .product-item-price {
            color: var(--primary);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            font-size: var(--font-size-md);
            margin-top: auto;
        }

        .elder-mode .product-item {
            /* grid 自动分配宽度，移除固定宽度 */
        }

        .elder-mode .product-item-image {
            /* aspect-ratio 自动控制高度 */
        }

        .interaction-bar {
            display: flex;
            justify-content: space-around;
            padding: 16px;
            background: var(--bg-primary);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            margin: 20px -16px;
        }

        .interaction-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 20px;
            background: transparent;
            border: none;
            border-radius: var(--radius);
            font-size: var(--font-size-base);
            color: var(--text-secondary);
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }

        .interaction-btn:hover {
            background: var(--bg-secondary);
        }

        .interaction-btn.liked {
            color: var(--danger);
            background: #FFF5F5;
        }

        /* 点赞按钮动画 - 逐步放大闪烁 */
        @keyframes likePulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            25% {
                transform: scale(1.3);
                opacity: 0.8;
            }
            50% {
                transform: scale(1.5);
                opacity: 0.6;
            }
            75% {
                transform: scale(1.3);
                opacity: 0.8;
            }
        }

        .interaction-btn.liked i {
            animation: likePulse 1.2s ease-in-out infinite;
        }

        .interaction-btn.collected {
            color: var(--warning);
            background: #FFFBF5;
        }

        .elder-mode .interaction-btn {
            padding: 14px 28px;
            font-size: var(--font-size-lg);
        }

        .comments-section {
            padding: 16px;
        }

        .comments-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .comments-title {
            font-size: var(--font-size-base);
            font-weight: 600;
        }

        .comments-count {
            color: var(--text-tertiary);
            font-weight: normal;
        }

        .comment-input {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        .comment-input-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, #FF8F65 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            flex-shrink: 0;
        }

        .comment-input-field {
            flex: 1;
            display: flex;
            align-items: center;
            background: var(--bg-secondary);
            border-radius: var(--radius);
            padding: 10px 14px;
        }

        .comment-input-field input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            outline: none;
        }

        .comment-input-field input::placeholder {
            color: var(--text-tertiary);
        }

        .comment-item {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }

        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: var(--font-size-sm);
            font-weight: 600;
            flex-shrink: 0;
        }

        .comment-content {
            flex: 1;
        }

        .comment-author {
            font-weight: 600;
            font-size: var(--font-size-xs);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .comment-author i {
            color: var(--info);
            font-size: var(--font-size-xs);
        }

        .comment-text {
            font-size: var(--font-size-md);
            line-height: 1.6;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        .comment-meta {
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            display: flex;
            gap: 16px;
        }

        .profile-header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent-peach) 100%);
            padding: 40px 20px;
            text-align: center;
            color: white;
        }

        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: white;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 700;
            color: var(--primary);
            border: 3px solid white;
        }

        .profile-name {
            font-size: var(--font-size-xl);
            font-weight: 600;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: white;
        }

        .profile-name i {
            font-size: var(--font-size-lg);
        }

        .profile-stats {
            display: flex;
            justify-content: center;
            gap: 32px;
            margin-top: 20px;
        }

        .profile-stat {
            text-align: center;
        }

        .profile-stat-value {
            font-size: var(--font-size-xl);
            font-weight: 700;
        }

        .profile-stat-label {
            font-size: var(--font-size-xs);
            opacity: 0.9;
            margin-top: 4px;
        }

        .profile-auth {
            background: var(--bg-primary);
            padding: 16px;
            margin: -20px 16px 16px;
            border-radius: var(--radius);
            }

        .auth-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px;
            background: var(--success-light);
            border-radius: var(--radius-sm);
            margin-bottom: 12px;
        }

        .auth-badge i {
            color: var(--success);
            font-size: var(--font-size-xl);
        }

        .auth-badge-text {
            flex: 1;
        }

        .auth-badge-title {
            font-weight: 600;
            font-size: var(--font-size-md);
            color: var(--success);
        }

        .auth-badge-sub {
            font-size: var(--font-size-2xs);
            color: var(--text-secondary);
        }

        .profile-menu {
            padding: 8px;
        }

        .menu-section {
            background: var(--bg-primary);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 16px;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: background 0.15s;
        }

        .menu-item:last-child {
            border-bottom: none;
        }

        .menu-item:hover {
            background: var(--bg-secondary);
        }

        .menu-item-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
            font-size: var(--font-size-xl);
        }

        .menu-item-icon.blue { background: #E3F2FD; color: var(--info); }
        .menu-item-icon.orange { background: var(--warning-light); color: var(--warning); }
        .menu-item-icon.red { background: var(--danger-light); color: var(--danger); }
        .menu-item-icon.green { background: var(--success-light); color: var(--success); }
        .menu-item-icon.purple { background: #F3E5F5; color: #9C27B0; }
        .menu-item-icon.gray { background: var(--bg-secondary); color: var(--text-secondary); }

        .menu-item-text {
            flex: 1;
            font-size: var(--font-size-base);
            font-weight: 500;
        }

        .menu-item-arrow {
            color: var(--text-tertiary);
            font-size: var(--font-size-sm);
        }

        .menu-item-badge {
            background: var(--danger);
            color: white;
            font-size: var(--font-size-xs);
            font-weight: 600;
            padding: 2px 8px;
            border-radius: var(--radius);
            margin-right: 8px;
        }

        .order-card {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
        }
        .order-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        .order-card-title {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
        }
        .order-card-more {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 2px;
        }
        .order-card-more:hover { color: #FF6D3B; }

        /* 订单中心样式 */
        .order-center {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 16px;
        }
        .order-center-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .order-center-title {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
        }
        .order-center-more {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
            cursor: pointer;
        }
        .order-center-more:hover { color: #FF6D3B; }
        .order-type-grid {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-top: 4px;
        }
        .order-type-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .order-type-card:hover {
            transform: translateY(-2px);
        }
        .order-type-image {
            width: 100%;
            aspect-ratio: 4/3;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: white;
        }
        .shop-bg {
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent-peach) 100%);
        }
        .hk-bg {
            background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
        }
        .ec-bg {
            background: linear-gradient(135deg, #9C27B0 0%, #CE93D8 100%);
        }
        .order-type-label {
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-primary);
        }
        .service-grid {
            display: flex;
            justify-content: space-between;
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 20px 12px;
            margin-bottom: 16px;
        }
        .service-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .service-item:hover {
            transform: translateY(-2px);
        }
        .service-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xxl);
            color: white;
        }
        .orange-bg { background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%); }
        .pink-bg { background: linear-gradient(135deg, #E91E63 0%, #F06292 100%); }
        .green-bg { background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%); }
        .purple-bg { background: linear-gradient(135deg, #9C27B0 0%, #CE93D8 100%); }
        .blue-bg { background: linear-gradient(135deg, #2196F3 0%, #64B5F6 100%); }
        .service-label {
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-primary);
        }

        .profile-header-new {
            position: relative;
            padding: 48px 20px 32px;
            display: flex;
            align-items: center;
            border-radius: 0;
            margin: 0;
            overflow: hidden;
        }
        .profile-header-new::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url('images/avatar-male-2.jpg') center top / cover no-repeat;
            filter: blur(24px);
            transform: scale(1.4);
            z-index: 0;
        }
        .profile-header-new::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.25);
            z-index: 1;
        }
        .profile-header-new > * { position: relative; z-index: 2; }
        .profile-edit-btn {
            border: none;
            background: var(--bg-secondary);
            border-radius: var(--radius-xl);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            cursor: pointer;
            flex-shrink: 0;
            padding: 8px 16px;
            font-weight: 500;
            white-space: nowrap;
        }
        .profile-edit-btn:active { background: var(--bg-tertiary); }
        .profile-left {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-peach) 0%, var(--primary) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xxl);
            font-weight: 700;
            color: white;
            flex-shrink: 0;
            overflow: hidden;
            border: 3px solid #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .profile-avatar img {
            border-radius: 50%;
        }
        .profile-info {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .profile-name-row {
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .profile-name-row i {
            font-size: var(--font-size-sm);
            color: #fff;
        }
        .profile-auth-inline {
            font-size: var(--font-size-xs);
            color: rgba(255,255,255,0.85);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .profile-auth-inline i {
            font-size: var(--font-size-xs);
        }
        .profile-right {
            align-self: flex-start;
        }
        /* ========== 我的页面 - 新卡片布局 ========== */
        #page-profile {
            background: var(--bg-secondary);
            padding-bottom: 100px;
        }
        /* 数据统计卡片 */
        .profile-stats-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            margin: -16px 0 0;
            padding: 24px 24px 20px;
            position: relative;
            z-index: 3;
        }
        .profile-stat-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            cursor: pointer;
        }
        .profile-stat-col .profile-stat-value {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            font-variant-numeric: tabular-nums;
            line-height: 1.2;
        }
        .profile-stat-col .profile-stat-label {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-top: 0;
        }
        .profile-stat-divider {
            display: none;
        }
        /* 功能服务卡片 - 网格布局 */
        .service-grid-card {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            margin: 0 8px 8px;
            padding: 20px;
        }
        .service-grid-card .service-grid-title {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 16px;
        }
        .service-grid-card .service-grid-row {
            display: flex;
            gap: 0;
            margin-bottom: 4px;
        }
        .service-grid-card .service-grid-row:last-child {
            margin-bottom: 0;
        }
        .service-grid-card .service-grid-item {
            flex: 1;
            min-width: 20%;
            max-width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 12px 4px;
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: background 0.15s;
        }
        .service-grid-card .service-grid-item:active {
            background: var(--bg-secondary);
        }
        .service-grid-card .service-grid-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xl);
        }
        .service-grid-card .service-grid-label {
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--text-primary);
            text-align: center;
            white-space: nowrap;
        }
        /* 模式切换卡片 */
        .mode-switch-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            margin: 0 8px 8px;
            padding: 16px 20px;
        }
        .mode-switch-label {
            font-size: var(--font-size-sm);
            color: var(--text-primary);
        }
        .mode-switch-toggle {
            display: flex;
            background: var(--border-light);
            border-radius: var(--radius-xl);
            padding: 4px;
            gap: 0;
        }
        .mode-switch-btn {
            font-size: var(--font-size-xs);
            padding: 5px 16px;
            border-radius: var(--radius-lg);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }
        .mode-switch-btn.active {
            background: var(--primary);
            color: #fff;
            font-weight: 600;
        }
        /* 关怀模式适配 */
        .elder-mode .profile-stats-card { padding: 24px; }
        .elder-mode .profile-stat-col .profile-stat-value { font-size: 30px; }
        .elder-mode .profile-stat-col .profile-stat-label { font-size: var(--font-size-base); }
        .elder-mode .service-grid-card { padding: 24px; border-radius: var(--radius-xl); }
        .elder-mode .service-grid-card .service-grid-title { font-size: var(--font-size-xl); margin-bottom: 20px; }
        .elder-mode .service-grid-card .service-grid-row { margin-bottom: 20px; }
        .elder-mode .service-grid-card .service-grid-item { padding: 16px 4px; gap: 12px; }
        .elder-mode .service-grid-card .service-grid-icon { width: 56px; height: 56px; font-size: 24px; border-radius: var(--radius-lg); }
        .elder-mode .service-grid-card .service-grid-label { font-size: var(--font-size-sm); white-space: normal; }
        .elder-mode .mode-switch-card { padding: 20px 24px; border-radius: var(--radius-xl); }
        .elder-mode .mode-switch-label { font-size: var(--font-size-lg); }
        .elder-mode .mode-switch-btn { font-size: var(--font-size-base); padding: 8px 20px; }

        /* ========== 用户个人主页 ========== */
        .user-profile-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 24px 20px 20px;
            text-align: center;
        }
        .user-profile-avatar {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.5);
            margin: 0 auto 10px;
            overflow: hidden;
        }
        .user-profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .user-profile-name {
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-bottom: 6px;
        }
        .user-profile-name i { font-size: var(--font-size-sm); }
        .user-profile-auth {
            font-size: var(--font-size-xs);
            color: rgba(255,255,255,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        .user-profile-auth i { font-size: var(--font-size-xs); }
        .user-profile-auth.not-auth { color: rgba(255,255,255,0.6); }
        .user-profile-stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }
        .user-profile-stat {
            text-align: center;
            color: white;
        }
        .user-profile-stat-num {
            font-size: var(--font-size-xl);
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }
        .user-profile-stat-label {
            font-size: var(--font-size-xs);
            color: rgba(255,255,255,0.8);
            margin-top: 2px;
        }
        .user-profile-tabs {
            display: flex;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 44px;
            z-index: 10;
        }
        .user-profile-tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: var(--font-size-base);
            font-weight: 500;
            color: var(--text-secondary);
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
        }
        .user-profile-tab.active {
            color: var(--primary);
            font-weight: 600;
        }
        .user-profile-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background: var(--primary);
            border-radius: 2px;
        }
        .user-profile-content {
            padding: 12px;
        }
        /* 用户主页 - 信息列表使用邻居页面样式（双列瀑布流） */
        #userProfilePostsList {
            column-count: 2;
            column-gap: 6px;
        }
        #userProfilePostsList .mypost-card {
            background: var(--bg-primary);
            border-radius: var(--radius);
            overflow: hidden;
            cursor: pointer;
            transition: transform var(--transition-fast);
            border: none;
            break-inside: avoid;
            margin-bottom: 12px;
        }
        #userProfilePostsList .mypost-card:hover {
            transform: translateY(-2px);
            }
        #userProfilePostsList .mypost-card:active {
            transform: scale(0.98);
            opacity: 0.9;
        }
        #userProfilePostsList .mypost-card-body {
            flex-direction: column;
        }
        #userProfilePostsList .mypost-thumb {
            width: 100%;
            height: 120px;
            border-radius: 0;
        }
        #userProfilePostsList .mypost-info {
            padding: 12px;
        }
        #userProfilePostsList .mypost-title-text {
            font-size: var(--font-size-sm);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 8px;
        }
        #userProfilePostsList .mypost-preview-text {
            display: none;
        }
        #userProfilePostsList .mypost-footer-row {
            margin-top: 0;
        }
        #userProfilePostsList .mypost-stats {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }
        /* 用户主页 - 物品列表使用闲置页面样式（双列瀑布流） */
        #userProfileSwapsList {
            column-count: 2;
            column-gap: 6px;
            padding: 0;
        }
        #userProfileSwapsList .swap-card {
            break-inside: avoid;
            margin-bottom: 10px;
        }

        /* ========== 个人资料页 ========== */
        .personal-profile-body { padding-bottom: 40px; }
        .pp-avatar-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 30px 20px 20px;
            text-align: center;
        }
        .pp-avatar {
            width: 80px; height: 80px;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.6);
            margin: 0 auto 12px;
            overflow: hidden;
        }
        .pp-name {
            font-size: 18px; font-weight: 600;
            color: #fff;
            margin-bottom: 6px;
        }
        .pp-auth {
            font-size: 12px; color: rgba(255,255,255,0.85);
            display: flex; align-items: center; justify-content: center; gap: 4px;
        }
        .pp-auth.not-auth { color: rgba(255,255,255,0.6); }
        .pp-info-section {
            background: var(--bg-primary);
            margin: 12px;
            border-radius: var(--radius);
            padding: 0 16px;
        }
        .pp-section-title {
            font-size: 14px; font-weight: 600;
            color: var(--text-primary);
            padding: 14px 0 10px;
        }
        .pp-info-row {
            display: flex; align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
        }
        .pp-info-row:last-child { border-bottom: none; }
        .pp-info-label {
            font-size: 14px; color: var(--text-secondary);
            width: 72px; flex-shrink: 0;
        }
        .pp-info-value {
            font-size: 14px; color: var(--text-primary);
        }
        .pp-actions {
            display: flex; gap: 12px;
            padding: 20px 16px;
        }
        .pp-btn {
            flex: 1; height: 44px; border-radius: 22px;
            font-size: 15px; font-weight: 500;
            cursor: pointer; border: none;
            transition: opacity 0.2s;
        }
        .pp-btn:active { opacity: 0.8; }
        .pp-btn-outline {
            background: var(--bg-primary);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }
        .pp-btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #fff;
        }

        /* ========== 我的页面 - 新卡片布局 ========== */

        .service-grid-new {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 0 8px;
            margin-bottom: 12px;
        }
        .service-item-new {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            padding: 14px 0;
            border-bottom: 1px solid var(--border-light);
            position: relative;
        }
        .service-item-new:last-child {
            border-bottom: none;
        }
        .service-item-new::after {
            content: '>';
            position: absolute;
            right: 0;
            color: #ccc;
            font-size: var(--font-size-sm);
        }
        .service-icon-new {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xl);
            background: transparent;
            flex-shrink: 0;
        }
        .service-icon-new.blue-bg { color: #FF9800; }
        .service-icon-new.orange-bg { color: #2196F3; }
        .service-icon-new.pink-bg { color: #E91E63; }
        .service-icon-new.green-bg { color: #4CAF50; }
        .service-icon-new.purple-bg { color: #9C27B0; }
        .service-icon-new.blue-light-bg { color: #FF6B6B; }
        .service-icon-new.gray-bg { color: #78909C; }
        .service-label-new {
            font-size: var(--font-size-base);
            font-weight: 400;
            color: var(--text-primary);
            flex: 1;
        }
        .service-tags {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .tag-success {
            font-size: var(--font-size-xs);
            padding: 1px 6px;
            background: var(--success-light);
            color: var(--success);
            border-radius: var(--radius-sm);
            font-weight: 600;
        }
        .tag-warning {
            font-size: var(--font-size-xs);
            padding: 1px 6px;
            background: var(--warning-light);
            color: var(--warning);
            border-radius: var(--radius-sm);
            font-weight: 600;
        }

        /* ===== 我的发布 / 我的置换：强化入口样式 ===== */
        /* 把前两个 service-item-new（我的发布、我的置换）设为独立卡片区，其他入口保留原列表样式 */
        .service-grid-new .service-item-new.highlight-entry {
            padding: 16px 0 12px;
        }
        .service-item-new .service-entry-body {
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: 6px;
        }
        .service-entry-title {
            font-size: var(--font-size-base);
            font-weight: 500;
            color: var(--text-primary);
        }
        /* 子分类 tag 行 */
        .service-entry-subtags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .service-entry-subtag {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: var(--font-size-xs);
            padding: 2px 8px;
            border-radius: var(--radius-xl);
            font-weight: 500;
            white-space: nowrap;
        }
        /* 我的发布：子分类状态颜色 */
        .subtag-approved  { background: var(--success-light); color: #43A047; }
        .subtag-pending   { background: #FFF8E1; color: #F59500; }
        .subtag-rejected  { background: var(--danger-light); color: var(--danger); }
        /* 我的置换：子分类状态颜色 */
        .subtag-swap-pub  { background: #E3F2FD; color: #1E88E5; }
        .subtag-swap-apply{ background: #F3E5F5; color: #8E24AA; }
        .subtag-swap-done { background: var(--success-light); color: #43A047; }
        /* 图标区域加上颜色底板 */
        .service-icon-new.icon-bg-blue {
            width: 40px; height: 40px;
            border-radius: var(--radius);
            background: #EFF6FF;
            color: #2563EB;
            font-size: var(--font-size-lg);
        }
        .service-icon-new.icon-bg-orange {
            width: 40px; height: 40px;
            border-radius: var(--radius);
            background: #FFF7ED;
            color: #EA6C00;
            font-size: var(--font-size-lg);
        }
        /* 关怀模式适配 */
        .elder-mode .service-entry-subtag { font-size: var(--font-size-sm); padding: 3px 10px; }
        .elder-mode .service-entry-title  { font-size: var(--font-size-lg); }

        .mode-switch-compact {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 12px 16px;
            margin-bottom: 16px;
        }
        .mode-compact-label {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .mode-compact-label i {
            font-size: var(--font-size-sm);
            color: var(--text-tertiary);
        }
        .mode-compact-options {
            display: flex;
            gap: 6px;
            background: #F5F6F7;
            padding: 3px;
            border-radius: var(--radius-sm);
        }
        .mode-compact-btn {
            font-size: var(--font-size-xs);
            padding: 5px 12px;
            border-radius: var(--radius-xs);
            color: var(--text-secondary);
            cursor: pointer;
            transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }
        .mode-compact-btn.active {
            background: var(--bg-primary);
            color: #FF6D3B;
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .settings-group { background: var(--bg-primary); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }

        .settings-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-bottom: none; cursor: pointer; transition: background 0.2s; position: relative; }
        .settings-item::after { content: ''; position: absolute; left: 48px; right: 12px; bottom: 0; height: 1px; background: var(--border-light); }
        .settings-item:last-child::after { display: none; }
        .settings-item:hover { background: rgba(0,0,0,0.03); }
        .feed-tab:hover { opacity: 0.7; }
        .notif-tab:hover { opacity: 0.7; }
        /* 消息通知分类 Tab */
        .notif-tabs { display: flex; background: var(--bg-primary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
        .notif-tab { flex: 0 0 auto; padding: 13px 16px 11px; font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; position: relative; }
        .notif-tab.active { color: var(--primary); font-weight: 600; }
        .notif-tab.active::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--primary); border-radius: 2px; }
        .med-tab:hover { opacity: 0.7; }
        .settings-item:active { background: var(--bg-secondary); }
        .settings-item-left { display: flex; align-items: center; gap: 8px; }
        .settings-item-icon { width: 32px; height: 32px; min-width: 32px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 16px; }
        .settings-item-label { font-size: var(--font-size-sm); color: var(--text-primary); text-align: left; }
        .settings-item-right { display: flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-size: var(--font-size-sm); }

        .about-page { padding: 0 16px 100px; }
        .about-logo-section { text-align: center; padding: 40px 0 30px; }
        .about-logo { width: 80px; height: 80px; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--primary), var(--accent-peach)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 4px 20px rgba(255,109,59,0.3); }
        .about-logo i { font-size: 36px; color: white; }
        .about-app-name { font-size: var(--font-size-xxl); font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
        .about-version { font-size: var(--font-size-sm); color: var(--text-tertiary); }
        .about-card { background: var(--bg-primary); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
        .about-card-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
        .about-card-title i { color: var(--primary); font-size: var(--font-size-base); }
        .about-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.7; text-align: justify; }
        .about-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
        .about-feature-item { background: var(--bg-secondary); border-radius: var(--radius); padding: 16px 12px; text-align: center; }
        .about-feature-icon { width: 44px; height: 44px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: var(--font-size-lg); color: white; }
        .about-feature-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .about-contact-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
        .about-contact-row:last-child { border-bottom: none; }
        .about-contact-label { font-size: var(--font-size-sm); color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
        .about-contact-label i { color: var(--primary); width: 18px; text-align: center; }
        .about-contact-value { font-size: var(--font-size-sm); color: var(--text-primary); }
        /* P3-2: 「关于我们」意见反馈入口 */
        .about-feedback-entry { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: var(--radius); background: var(--bg-secondary); cursor: pointer; transition: background .2s ease, transform .1s ease; }
        .about-feedback-entry:hover { background: var(--border-light); }
        .about-feedback-entry:active { transform: scale(.98); }
        .about-feedback-left { display: flex; align-items: center; gap: 12px; }
        .about-feedback-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--warning)); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); color: #fff; flex-shrink: 0; }
        .about-feedback-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
        .about-feedback-tip { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 3px; }
        .about-feedback-arrow { color: var(--text-tertiary); font-size: var(--font-size-sm); }
        .about-feedback-foot { margin-top: 12px; text-align: center; font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .about-feedback-foot i { color: var(--success, #3FA46A); margin-right: 4px; }
        .about-banner-img { width: 100%; height: 140px; border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
        .about-stats-row { display: flex; justify-content: space-around; padding: 20px 0; }
        .about-stat-item { text-align: center; }
        .about-stat-num { font-size: var(--font-size-xxl); font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
        .about-stat-label { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; }

        /* 空状态占位 */
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 14px 24px;
            border: none;
            border-radius: var(--radius-xl);
            background: var(--primary);
            color: #fff;
            font-size: var(--font-size-base);
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s, transform 0.15s;
            box-shadow: 0 4px 12px rgba(255,109,59,0.25);
        }
        .btn-primary:active {
            transform: scale(0.97);
            opacity: 0.9;
        }
        .btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px var(--spacing-xl);
            text-align: center;
        }
        .empty-state-icon {
            width: 120px;
            height: 120px;
            margin-bottom: var(--spacing-xl);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: var(--text-disabled);
            background: var(--bg-secondary);
            border-radius: 50%;
        }
        .empty-state-title {
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-sm);
        }
        .empty-state-desc {
            font-size: var(--font-size-base);
            color: var(--text-tertiary);
            line-height: var(--line-height-base);
        }
        .empty-state-btn {
            margin-top: var(--spacing-xxl);
            padding: var(--spacing-md) var(--spacing-xxl);
            background: var(--primary);
            color: var(--text-white);
            border: none;
            border-radius: var(--radius-full);
            font-size: var(--font-size-base);
            font-weight: 500;
            cursor: pointer;
            transition: opacity var(--transition-fast);
        }
        .empty-state-btn:hover { opacity: 0.9; }

        /* 动效关键帧 */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* 卡片入场动画 */
        .content-feed .post-card {
            animation: fadeInUp 0.3s ease both;
        }
        .content-feed .post-card:nth-child(1) { animation-delay: 0.02s; }
        .content-feed .post-card:nth-child(2) { animation-delay: 0.05s; }
        .content-feed .post-card:nth-child(3) { animation-delay: 0.08s; }
        .content-feed .post-card:nth-child(n+4) { animation-delay: 0.1s; }
        /* 置换卡片在信息流中的适配 */
        .content-feed .swap-card {
            cursor: pointer;
            transition: transform var(--transition-fast);
            break-inside: avoid;
        }

        .content-feed .swap-card { animation: fadeInUp 0.4s ease both; }

        /* 邻居/用户动态卡片（关注、附近、热门话题信息流）：完整卡片样式，防止瀑布流分列时断裂 */
        .feed-card {
            background: var(--bg-primary);
            border-radius: 16px;
            margin-bottom: 10px;
            overflow: hidden;
            break-inside: avoid;
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
        }
        .feed-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 12px 14px 8px;
        }
        .feed-card-body { padding: 0 14px 12px; }
        .feed-card-body > p { margin: 0; line-height: 1.5; }
        .feed-card-body .feed-images { margin-top: 8px; }

        /* 置换卡片入场 */
        .swap-card-list .swap-card {
            animation: fadeInUp 0.4s ease both;
        }
        .swap-card-list .swap-card:nth-child(1) { animation-delay: 0.02s; }
        .swap-card-list .swap-card:nth-child(2) { animation-delay: 0.06s; }
        .swap-card-list .swap-card:nth-child(3) { animation-delay: 0.10s; }
        .swap-card-list .swap-card:nth-child(n+4) { animation-delay: 0.14s; }

        /* 分类按钮 hover/active 反馈 */
        .category-item {
            transition: transform var(--transition-fast);
        }
        .category-item:active {
            transform: scale(0.95);
        }
        .category-item:hover {
            opacity: 0.85;
        }
        /* 激活状态样式已移除 */

        /* 菜单项 hover 反馈 */
        .menu-item {
            transition: background var(--transition-fast);
        }
        .menu-item:active {
            background: var(--bg-tertiary);
        }

        /* 加载骨架屏 */
        .skeleton { background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--radius-sm); }
        @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        .skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
        .skeleton-line { width: 100%; height: 14px; margin-bottom: 10px; }
        .skeleton-line-short { width: 60%; }
        .skeleton-title { width: 70%; height: 18px; margin-bottom: 12px; }
        .skeleton-card { width: 100%; height: 180px; border-radius: var(--radius); margin-bottom: 16px; }
        .skeleton-img { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius); margin-bottom: 10px; }

        .elder-mode .empty-state-icon { width: 150px; height: 150px; font-size: 60px; }
        .elder-mode .empty-state-title { font-size: var(--font-size-xl); }
        .elder-mode .empty-state-desc { font-size: var(--font-size-lg); }
        .elder-mode .empty-state-btn { padding: 14px 40px; font-size: var(--font-size-lg); }
        .elder-mode .skeleton-avatar { width: 56px; height: 56px; }
        .elder-mode .skeleton-line { height: 18px; }

        /* P2修复：通用工具类 - 减少内联样式 */
        .empty-text { text-align: center; padding: 40px 16px; color: var(--text-tertiary); font-size: var(--font-size-sm); line-height: 1.6; }
        .empty-text-icon { font-size: 32px; margin-bottom: 12px; display: block; opacity: 0.3; }
        .btn-pill { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-primary); font-size: var(--font-size-sm); cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
        .btn-pill:active { opacity: 0.7; }
        .btn-pill--primary { color: var(--primary); }
        .btn-pill--secondary { color: var(--text-secondary); }
        .flex-row { display: flex; gap: 8px; }
        .flex-wrap { flex-wrap: wrap; }
        .flex-center { align-items: center; }
        .flex-scroll-x { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
        .filter-bar { display: flex; gap: 8px; padding: 12px 16px; background: var(--bg-primary); border-bottom: 1px solid var(--border); }

        /* 分类专属字段卡片 */
        .detail-fields-card {
            background: var(--bg-secondary);
            border-radius: var(--radius);
            padding: 14px 16px;
            margin-bottom: 16px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px 16px;
        }
        .detail-field-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 80px;
            flex: 1 1 calc(50% - 16px);
        }
        .detail-field-label {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
        }
        .detail-field-value {
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            font-weight: 600;
        }
        .detail-supplement-body {
            color: var(--text-secondary);
            line-height: 1.8;
        }
        [data-theme="dark"] .detail-fields-card { background: var(--bg-tertiary); }
        .elder-mode .detail-fields-card { padding: 18px 20px; gap: 14px 20px; }
        .elder-mode .detail-field-label { font-size: var(--font-size-sm); }
        .elder-mode .detail-field-value { font-size: var(--font-size-base); }

        /* P2修复：Dark mode 骨架屏适配 */
        [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #2C2C2E 25%, #3A3A3C 50%, #2C2C2E 75%); background-size: 200% 100%; }
        .elder-mode .skeleton-title { height: 22px; }
        .elder-mode .skeleton-card { height: 220px; }

        .order-status-grid {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
        }
        .order-status-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            min-width: 56px;
        }
        .order-status-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #FF6D3B 0%, #FF8F65 100%);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: var(--font-size-xl);
            transition: transform 0.2s, opacity 0.2s;
        }
        .order-status-icon.round { border-radius: 50%; }
        .order-status-item:hover .order-status-icon {
            opacity: 0.85;
            transform: scale(1.05);
        }
        .order-status-label {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            white-space: nowrap;
        }

        .settings-section {
            padding: 16px;
        }

        .mode-switch {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 20px;
            margin-bottom: 16px;
        }

        .mode-switch-title {
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mode-switch-title i {
            color: var(--primary);
        }

        .mode-options {
            display: flex;
            gap: 12px;
        }

        .mode-option {
            flex: 1;
            padding: 16px;
            border: 2px solid var(--border);
            border-radius: var(--radius);
            text-align: center;
            cursor: pointer;
            transition: transform var(--transition-fast);
        }

        .mode-option.active {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        .mode-option i {
            font-size: 32px;
            margin-bottom: 8px;
            color: var(--text-secondary);
        }

        .mode-option.active i {
            color: var(--primary);
        }

        .mode-option-label {
            font-weight: 600;
            font-size: var(--font-size-base);
        }

        .mode-option-desc {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            margin-top: 4px;
        }

        .notification-list {
            padding: 16px;
        }

        .notification-item {
            display: flex;
            gap: 12px;
            padding: 16px;
            background: var(--bg-primary);
            border-radius: var(--radius);
            margin-bottom: 12px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .notification-item:hover {
            transform: translateX(4px);
        }

        .notification-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-xl);
            flex-shrink: 0;
        }

        .notification-icon.success { background: var(--success-light); color: var(--success); }
        .notification-icon.warning { background: var(--warning-light); color: var(--warning); }
        .notification-icon.info { background: #E3F2FD; color: var(--info); }
        .notification-icon.danger { background: var(--danger-light); color: var(--danger); }

        .notification-content {
            flex: 1;
        }

        .notification-title {
            font-weight: 600;
            font-size: var(--font-size-md);
            margin-bottom: 4px;
        }

        .notification-text {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .notification-time {
            font-size: var(--font-size-2xs);
            color: var(--text-tertiary);
            margin-top: 6px;
        }

        .notification-unread {
            width: 10px;
            height: 10px;
            background: var(--info);
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 6px;
        }

        /* ========================================
           触摸与交互优化（跨端）
           ======================================== */
        /* 移动端触控目标最小 44px，防止误触 */
        .nav-item, .icon-btn, .service-grid-item, .profile-stat-col,
        .mode-switch-btn, button, [onclick] {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        /* PC 端鼠标悬停反馈 */
        @media (hover: hover) and (pointer: fine) {
            .service-grid-item:hover { background: var(--bg-secondary); transform: translateY(-1px); transition: transform 0.15s, background 0.15s; }
            .profile-stat-col:hover { opacity: 0.75; transition: opacity 0.15s; }
            .nav-item:hover { color: var(--primary); }
            .mode-switch-btn:hover:not(.active) { background: rgba(0,0,0,0.06); border-radius: var(--radius-lg); }
            .admin-quick-action:hover { transform: translateY(-3px); }
        }
        /* 防止文本在长按时被选中（移动端） */
        .nav-item, .service-grid-item, .profile-stat-col { user-select: none; }

        /* ========================================
           响应式适配 — 多端布局
           ======================================== */

        /* PC 大屏（> 768px）：全宽显示 */
        @media (min-width: 769px) {
            body {
                background: var(--bg-primary);
                min-height: 100vh;
            }

            #appFrame {
                max-width: 100%;
                margin: 0 auto;
                min-height: 100vh;
                position: relative;
            }

            .page {
                border-radius: 0;
            }

            .bottom-nav {
                border-radius: 0;
                border-bottom: none;
            }

            .app-fab {
                right: 24px;
            }
        }

        /* 移动端（≤ 768px）：全屏显示，去除圆角 */
        @media (max-width: 768px) {
            body {
                background: var(--bg-primary);
            }
            #appFrame {
                margin: 0;
                border-radius: 0;
                max-width: 100%;
                min-height: 100vh;
                box-shadow: none;
            }
            .bottom-nav {
                border-radius: 0;
            }
            .page {
                border-radius: 0;
            }
            .detail-comment-bar {
                max-width: 100%;
            }
        }

        /* 超小屏（< 360px）：字体缩小防止溢出，FAB 复位 */
        @media (max-width: 359px) {
            .app-fab { right: 16px; }
            .elder-mode .app-fab { right: 20px; }
            :root {
                --font-size-xs: 11px;
                --font-size-sm: 13px;
                --font-size-base: 15px;
                --font-size-lg: 17px;
                --font-size-xl: 19px;
                --font-size-xxl: 22px;
            }
            .profile-stats-card { padding: 14px 10px; }
            .profile-header-new { margin: 0; padding: 32px 16px 24px; }
            .service-grid-card { margin: 8px 8px 0; padding: 16px; }
            .service-grid-icon { width: 42px; height: 42px; font-size: var(--font-size-lg); border-radius: var(--radius); }
            .service-grid-label { font-size: var(--font-size-xs); }
        }

        /* ========== 管理后台样式已迁移至社区工作者端(community.html)，原 admin-* 样式移除 ========== */
.main-home-grid-text { font-size: var(--font-size-xs); color: var(--text-primary); font-weight: 500; }
.main-home-scroll-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.main-home-scroll-row::-webkit-scrollbar { display: none; }

        /* ========== 置换模块样式 ========== */
        .swap-card { background: var(--bg-primary); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
        .swap-card-image { position: relative; width: 100%; padding-top: 100%; overflow: hidden; }
        .swap-card-image-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; color: rgba(255,255,255,0.9); }
        .swap-card-gradient-1 { background: linear-gradient(135deg, #FF6D3B 0%, #FF8F65 100%); }
        .swap-card-gradient-2 { background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%); }
        .swap-card-gradient-3 { background: linear-gradient(135deg, #43E97B 0%, #38F9D7 100%); }
        .swap-card-gradient-4 { background: linear-gradient(135deg, #FA709A 0%, #FEE140 100%); }
        .swap-card-gradient-5 { background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%); }
        .swap-card-gradient-6 { background: linear-gradient(135deg, #A18CD1 0%, #FBC2EB 100%); }
        .swap-card-gradient-7 { background: linear-gradient(135deg, #FDCB6E 0%, #F0932B 100%); }
        .swap-card-gradient-8 { background: linear-gradient(135deg, #6DD5FA 0%, #2980B9 100%); }
        .swap-mode-tag { display: inline-flex; align-items: center; justify-content: center; height: 17px; padding: 0 5px; border-radius: var(--radius-xs); font-size: var(--font-size-xs); font-weight: 600; color: #fff; margin-right: 2px; vertical-align: baseline; position: relative; top: -1px; }
        .swap-mode-tag.swap { background: #3B82F6; }
        .swap-mode-tag.gift { background: var(--success); }
        .swap-mode-tag.sale { background: var(--warning); }
        /* 已完成状态遮罩和徽标 */
        .swap-card.completed { position: relative; }
        .swap-card.completed .swap-card-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            border-radius: var(--radius-sm);
        }
        .swap-status-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.95);
            color: var(--text-primary);
            padding: 6px 14px;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-sm);
            font-weight: 600;
            z-index: 10;
            white-space: nowrap;
        }
        .swap-condition-tag { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: var(--radius-xs); font-size: var(--font-size-xs); font-weight: 500; color: #fff; }
        .swap-condition-tag.new { background: var(--success); }
        .swap-condition-tag.excellent { background: var(--info); }
        .swap-condition-tag.good { background: var(--warning); }
        .swap-condition-tag.fair { background: var(--text-tertiary); }
        .swap-condition-text { display: inline-flex; align-items: center; justify-content: center; height: 17px; padding: 0 4px; border: 1px solid var(--text-primary); border-radius: var(--radius-xs); font-size: var(--font-size-xs); color: var(--text-primary); vertical-align: baseline; position: relative; top: -1px; margin-right: 4px; }
        .swap-card-info { padding: 10px 12px; }
        .swap-card-title { font-size: var(--font-size-xs); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; line-height: calc(1.5em + 2px); min-height: calc(calc(1.5em + 2px) * 2); max-height: calc(calc(1.5em + 2px) * 2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .swap-card-publisher { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; justify-content: space-between; }
        .swap-card-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); color: #fff; flex-shrink: 0; overflow: hidden; }
        .swap-card-nickname { font-size: var(--font-size-xs); color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .swap-card-publisher .swap-card-want { margin-left: auto; font-size: var(--font-size-sm); color: var(--text-secondary); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
        .swap-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .swap-card-distance { display: flex; align-items: center; gap: 3px; }
        .swap-card-want { display: flex; align-items: center; gap: 3px; color: var(--primary); font-weight: 500; }
        .swap-card-list { column-count: 2; column-gap: 6px; padding: 0 8px; }
        .swap-card-list .swap-card { break-inside: avoid; }

        /* ── 闲置列表响应式多列 ── */
        @media (min-width: 768px)  { .swap-card-list { column-count: 3; column-gap: 6px; padding-left: 8px; padding-right: 8px; } }
        @media (min-width: 1080px) { .swap-card-list { column-count: 4; column-gap: 6px; padding-left: 8px; padding-right: 8px; } }
        @media (min-width: 1440px) { .swap-card-list { column-count: 5; column-gap: 6px; padding-left: 8px; padding-right: 8px; } }
        @media (min-width: 1920px) { .swap-card-list { column-count: 6; column-gap: 6px; padding-left: 8px; padding-right: 8px; } }

        /* 置换筛选Tab */
        .swap-filter-tabs { display: flex; justify-content: space-between; padding: 10px 8px; gap: 0; background: var(--bg-primary); border-bottom: 1px solid var(--border); }
        .swap-filter-tab { flex: 0 1 auto; padding: 5px 0; font-size: var(--font-size-base); color: var(--text-secondary); background: transparent; border: none; cursor: pointer; position: relative; text-align: center; }
        .swap-filter-tab.active { color: var(--primary); font-weight: 600; }
        .swap-filter-tab.active::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--primary); border-radius: 2px; }

        /* 宽屏下筛选Tab均匀铺开 */
        @media (min-width: 768px)  { .swap-filter-tabs { padding: 10px 20px; justify-content: space-evenly; } }
        @media (min-width: 1080px) { .swap-filter-tabs { padding: 10px 24px; } }
        @media (min-width: 1440px) { .swap-filter-tabs { padding: 10px 28px; } }
        @media (min-width: 1920px) { .swap-filter-tabs { padding: 10px 32px; } }

        /* 排序栏 */
        .swap-sort-bar { display: flex; padding: 8px 12px; gap: 16px; background: var(--bg-primary); border-bottom: 1px solid var(--border); }
        .swap-sort-item { font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; position: relative; padding-bottom: 4px; }
        .swap-sort-item.active { color: var(--primary); font-weight: 600; }
        .swap-sort-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 16px; height: 2px; background: var(--primary); border-radius: 1px; }

        /* 发布表单 */
        .swap-publish-form { padding: 16px; }
        .swap-mode-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px 16px; }
        .swap-mode-card { padding: 16px 8px; border-radius: var(--radius); border: 2px solid var(--border); text-align: center; cursor: pointer; transition: transform var(--transition-fast); background: var(--bg-primary); }
        .swap-mode-card.active { border-color: var(--primary); background: var(--primary-light); }
        .swap-mode-card-icon { font-size: 28px; margin-bottom: 6px; }
        .swap-mode-card-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
        .swap-mode-card-desc { font-size: var(--font-size-xs); color: var(--text-secondary); }
        .swap-form-group { margin-bottom: 16px; }
        .swap-form-label { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; display: block; }
        .swap-form-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-size-base); color: var(--text-primary); background: var(--bg-primary); outline: none; }
        /* 物品分类按钮样式 */
        .swap-category-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; }
        .swap-category-tag { padding: 8px 16px; background: var(--bg-secondary); border-radius: var(--radius-xl); font-size: var(--font-size-sm); cursor: pointer; transition: none; text-align: center; border: none; }
        .swap-category-tag.active { background: var(--primary-light); color: var(--primary); }
        .swap-form-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-size-base); color: var(--text-primary); background: var(--bg-primary); outline: none; resize: vertical; min-height: 80px; }
        /* 出售价格输入框样式 */
        .swap-price-input-wrapper { position: relative; }
        .swap-price-symbol { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
        /* 购物凭证样式 */
        .swap-receipt-tip { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 8px; }
        .swap-form-select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-size-base); color: var(--text-primary); background: var(--bg-primary); outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239AA0A6' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
        .swap-condition-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .swap-condition-tag-select { padding: 6px 16px; border-radius: var(--radius-xl); font-size: var(--font-size-sm); border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-primary); cursor: pointer; }
        .swap-condition-tag-select.active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
        .swap-image-upload { display: flex; flex-wrap: wrap; gap: 10px; }
        .swap-image-upload-item { width: 80px; height: 80px; border-radius: var(--radius-sm); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: var(--font-size-xxl); cursor: pointer; background: var(--bg-secondary); }
        .swap-disclaimer { padding: 12px 16px; background: var(--bg-secondary); border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--text-secondary); line-height: 1.6; }
        .swap-disclaimer-checkbox { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
        .swap-disclaimer-checkbox input { margin-top: 3px; }
        .swap-disclaimer-checkbox label { font-size: var(--font-size-sm); color: var(--text-secondary); }
        .swap-publish-btn { width: 100%; padding: 14px; border: none; border-radius: var(--radius); background: var(--primary); color: #fff; font-size: var(--font-size-lg); font-weight: 600; cursor: pointer; margin-top: 16px; }

        /* 详情页 */
        .swap-detail { padding-bottom: 70px; }
        .swap-detail-swiper { width: 100%; height: 300px; position: relative; overflow: hidden; }
        .swap-detail-swiper-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 80px; color: rgba(255,255,255,0.9); }
        .swap-detail-swiper-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
        .swap-detail-swiper-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.5); }
        .swap-detail-swiper-dot.active { width: 18px; background: var(--bg-primary); }
        .swap-detail-info { padding: 16px; }
        .swap-detail-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
        .swap-detail-tags { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
        .swap-detail-location { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 4px; }
        .swap-detail-time { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-bottom: 16px; }
        .swap-detail-section { padding: 0 16px 16px; }
        .swap-detail-section-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 10px; padding-left: 8px; border-left: 3px solid var(--primary); }
        .swap-detail-desc { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.7; }
        .swap-detail-expect { padding: 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); font-size: var(--font-size-base); color: var(--text-primary); }
        .swap-detail-price { font-size: var(--font-size-sm); color: var(--text-secondary); }
        .swap-detail-price span { color: var(--primary); font-weight: 600; font-size: var(--font-size-lg); }
        .swap-detail-publisher { padding: 16px; margin: 0 16px 16px; background: var(--bg-primary); border-radius: var(--radius); }
        .swap-detail-publisher-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .swap-detail-publisher-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); color: #fff; flex-shrink: 0; }
        .swap-detail-publisher-info { flex: 1; }
        .swap-detail-publisher-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
        .swap-detail-publisher-auth { font-size: var(--font-size-xs); color: var(--info); }
        .swap-detail-publisher-addr { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 2px; }
        .swap-detail-publisher-credit { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); color: var(--warning); }

        /* 风险提示 */
        .swap-risk-tip { margin: 0 16px 16px; padding: 12px 16px; background: #FFF8E1; border-radius: var(--radius-sm); display: flex; align-items: flex-start; gap: 8px; font-size: var(--font-size-xs); color: var(--primary); line-height: 1.6; }
        .swap-risk-tip i { color: var(--warning); margin-top: 2px; flex-shrink: 0; }

        /* 底部操作栏 */
        .swap-bottom-bar { position: fixed; bottom: 56px; left: 0; right: 0; width: 100%; padding: 10px 16px; background: var(--bg-primary); box-shadow: 0 -2px 10px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 12px; z-index: calc(var(--z-nav) - 1); }
        .swap-bottom-bar-contact { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); color: var(--text-secondary); cursor: pointer; background: var(--bg-primary); }
        .swap-bottom-bar-btn { flex: 1; height: 44px; border: none; border-radius: var(--radius); background: var(--primary); color: #fff; font-size: var(--font-size-lg); font-weight: 600; cursor: pointer; }
        .swap-bottom-bar-btn.gray { background: var(--text-tertiary); }
        .swap-bottom-bar-btn.outline { background: var(--bg-primary); color: var(--primary); border: 1px solid var(--primary); }

        /* 管理Tab */
        .swap-manage-tab { display: flex; background: var(--bg-primary); border-bottom: 1px solid var(--border); }
        .swap-manage-tab-item { flex: 1; text-align: center; padding: 14px 0; font-size: var(--font-size-base); color: var(--text-secondary); cursor: pointer; position: relative; }
        .swap-manage-tab-item.active { color: var(--primary); font-weight: 600; }
        .swap-manage-tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--primary); border-radius: 1px; }

        /* 申请卡片 */
        .swap-apply-card { margin: 12px 16px; padding: 16px; background: var(--bg-primary); border-radius: var(--radius); }
        .swap-apply-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .swap-apply-card-user { display: flex; align-items: center; gap: 10px; }
        .swap-apply-card-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-base); color: #fff; }
        .swap-apply-card-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
        .swap-apply-card-status { font-size: var(--font-size-xs); padding: 2px 10px; border-radius: var(--radius); font-weight: 500; }
        .swap-apply-card-status.reviewing { background: var(--warning-light); color: var(--warning); }
        .swap-apply-card-status.agreed { background: var(--success-light); color: var(--success); }
        .swap-apply-card-status.rejected { background: var(--danger-light); color: var(--danger); }
        .swap-apply-card-items { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); }
        .swap-apply-card-item { flex: 1; text-align: center; }
        .swap-apply-card-item-icon { width: 50px; height: 50px; border-radius: var(--radius-sm); margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xxl); color: rgba(255,255,255,0.9); }
        .swap-apply-card-item-name { font-size: var(--font-size-xs); color: var(--text-secondary); }
        .swap-apply-card-arrow { font-size: var(--font-size-lg); color: var(--text-tertiary); }
        .swap-apply-card-note { margin-top: 10px; font-size: var(--font-size-sm); color: var(--text-secondary); padding: 8px 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); }

        /* 交换记录卡片 */
        .swap-record-card { margin: 12px 16px; padding: 16px; background: var(--bg-primary); border-radius: var(--radius); }
        .swap-record-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .swap-record-card-status { font-size: var(--font-size-xs); padding: 2px 10px; border-radius: var(--radius); font-weight: 500; }
        .swap-record-card-status.completed { background: var(--success-light); color: var(--success); }
        .swap-record-card-status.cancelled { background: var(--danger-light); color: var(--danger); }
        .swap-record-card-status.disputed { background: var(--warning-light); color: var(--warning); }

        /* 确认页 */
        .swap-confirm-section { margin: 12px 16px; padding: 16px; background: var(--bg-primary); border-radius: var(--radius); }
        .swap-confirm-section-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
        .swap-confirm-exchange { display: flex; align-items: center; gap: 12px; }
        .swap-confirm-exchange-item { flex: 1; text-align: center; }
        .swap-confirm-exchange-icon { width: 64px; height: 64px; border-radius: var(--radius); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(255,255,255,0.9); }
        .swap-confirm-exchange-name { font-size: var(--font-size-base); font-weight: 500; color: var(--text-primary); }
        .swap-confirm-exchange-arrow { font-size: var(--font-size-xl); color: var(--primary); }
        .swap-confirm-place-list { display: flex; flex-direction: column; gap: 10px; }
        .swap-confirm-place-item { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
        .swap-confirm-place-item.active { border-color: var(--primary); background: var(--primary-light); }
        .swap-confirm-place-item i { color: var(--primary); font-size: var(--font-size-lg); }
        .swap-confirm-place-item span { font-size: var(--font-size-base); color: var(--text-primary); }
        .swap-confirm-time-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-size-base); color: var(--text-primary); background: var(--bg-primary); outline: none; }

        /* 时间线 */
        .swap-timeline { padding: 0 16px 16px; }
        .swap-timeline-item { display: flex; gap: 12px; padding-bottom: 20px; position: relative; }
        .swap-timeline-item:last-child { padding-bottom: 0; }
        .swap-timeline-item::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 1px; background: var(--border); }
        .swap-timeline-item:last-child::before { display: none; }
        .swap-timeline-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); color: #fff; flex-shrink: 0; z-index: 1; }
        .swap-timeline-dot.orange { background: var(--primary); }
        .swap-timeline-dot.blue { background: var(--info); }
        .swap-timeline-dot.green { background: var(--success); }
        .swap-timeline-dot.gray { background: var(--text-tertiary); }
        .swap-timeline-content { flex: 1; }
        .swap-timeline-title { font-size: var(--font-size-base); font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
        .swap-timeline-time { font-size: var(--font-size-xs); color: var(--text-tertiary); }

        /* 关怀模式适配 */
        .elder-mode .swap-card-title { line-height: 1.6; }
        .elder-mode .swap-card-info { padding: 14px; }
        .elder-mode .swap-card-avatar { width: 40px; height: 40px; font-size: var(--font-size-lg); }
        .elder-mode .swap-card-nickname { font-size: var(--font-size-base); }
        .elder-mode .swap-card-want { font-size: var(--font-size-base); }
        .elder-mode .swap-mode-card { padding: 24px 20px; }
        .elder-mode .swap-mode-card-icon { font-size: 40px; }
        .elder-mode .publish-swap-mode-card { padding: 24px 20px; }
        .elder-mode .publish-swap-mode-card .publish-swap-mode-icon { font-size: 40px; }
        .elder-mode .swap-form-input, .elder-mode .swap-form-textarea, .elder-mode .swap-form-select { font-size: var(--font-size-lg); padding: 14px; }
        .elder-mode .swap-detail-title { font-size: var(--font-size-xl); }
        .elder-mode .swap-bottom-bar-btn { height: 50px; font-size: var(--font-size-xl); }

        /* 物品选择列表 */
        .swap-select-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-primary); border-radius: var(--radius); margin-bottom: 12px; border: 2px solid transparent; cursor: pointer; transition: transform var(--transition-fast); }
        .swap-select-item:hover { background: var(--bg-secondary); }
        .swap-select-item.selected { border-color: var(--primary); background: var(--primary-light); }
        .swap-select-checkbox { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; transition: opacity var(--transition-fast), transform var(--transition-fast); }
        .swap-select-item.selected .swap-select-checkbox { background: var(--primary); border-color: var(--primary); color: #fff; }
        .elder-mode .swap-select-item { padding: 16px; }
        .elder-mode .swap-select-checkbox { width: 28px; height: 28px; }

        .elder-mode .swap-manage-tab-item { font-size: var(--font-size-lg); padding: 18px 0; }
        .elder-mode .swap-filter-tab { font-size: var(--font-size-base); padding: 8px 18px; }
        .elder-mode .swap-card-list { column-count: 1 !important; }

        .elder-mode .swap-condition-tag-select { font-size: var(--font-size-base); padding: 8px 20px; }

        /* ==================== 商家模块 ==================== */
        /* 商家列表筛选栏 */
        .merchant-filter-tabs {
            display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch;
            scrollbar-width: none; background: var(--bg-primary); position: sticky; top: 58px; z-index: 90;
        }
        .merchant-filter-tabs::-webkit-scrollbar { display: none; }
        .merchant-filter-tab {
            flex: 0 0 auto; padding: 7px 16px; border-radius: var(--radius-xl); font-size: var(--font-size-sm); font-weight: 500;
            background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
            transition: opacity, transform 0.2s; user-select: none;
        }
        .merchant-filter-tab.active { background: var(--primary); color: #fff; }
        .merchant-filter-tab:active { transform: scale(0.95); }

        /* 商家区域标题 */
        .merchant-section-title {
            display: flex; align-items: center; gap: 8px; padding: 6px 0 4px;
            font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary);
        }
        .merchant-section-title::before {
            content: ''; width: 3px; height: 16px; background: var(--primary); border-radius: 2px;
        }
        /* 详情页覆盖：无左侧条，标题右对齐图标 */
        #tab-info .merchant-section-title::before,
        .merchant-tab-panel .merchant-section-title::before { display: none; }
        .merchant-section-badge {
            font-size: var(--font-size-xs); font-weight: 400; color: var(--text-tertiary); margin-left: 4px;
        }

        /* 商家卡片 */
        /* U3: 商家排序筛选栏 */
        .merchant-sort-bar {
            display: flex; gap: 8px; padding: 8px 8px 0;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .merchant-sort-btn {
            flex-shrink: 0; padding: 6px 14px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--bg-primary);
            color: var(--text-secondary);
            font-size: var(--font-size-sm);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
        }
        .merchant-sort-btn.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            font-weight: 600;
        }
        /* U3: 评分/距离行内信息 */
        .merchant-card-meta-row {
            display: flex; gap: 10px; margin-top: 4px;
            font-size: var(--font-size-xs); color: var(--text-tertiary);
            align-items: center;
        }
        .merchant-card-rating {
            color: var(--warning); display: flex; align-items: center; gap: 2px;
        }
        .merchant-card-rating i { font-size: 12px; }
        .merchant-card-distance {
            color: var(--info); display: flex; align-items: center; gap: 2px;
        }
        .merchant-card-hours { display: flex; align-items: center; gap: 3px; }
        .merchant-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .merchant-dot.open { background: var(--success); }
        .merchant-dot.closed { background: var(--text-tertiary); }

        .merchant-card-list {
            display: flex; flex-direction: column; gap: 10px;
            padding: 8px 8px 16px;
        }
        .merchant-card {
            display: flex; gap: 12px; padding: 14px;
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            cursor: pointer;
            align-items: center;
        }
        .merchant-card:focus { outline: none; }
        .merchant-card:focus-visible { outline: none; }
        .merchant-card-image {
            width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-xxl); color: #fff;
            position: relative;
        }
        .merchant-card-image img {
            width: 100%; height: 100%; object-fit: cover;
        }
        /* 首页常买商家横向滚动卡片 */
        .fav-merchant-section { padding: 0 0 4px; margin-bottom: 4px; }
        .fav-merchant-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 8px; scrollbar-width: none; }
        .fav-merchant-scroll::-webkit-scrollbar { display: none; }
        .fav-merchant-card { flex-shrink: 0; width: 96px; cursor: pointer; }
        .fav-merchant-img { width: 96px; height: 96px; border-radius: var(--radius); overflow: hidden; margin-bottom: 6px; }
        .fav-merchant-img img { width: 100%; height: 100%; object-fit: cover; }
        .fav-merchant-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .fav-merchant-cat { font-size: var(--font-size-xs); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .merchant-card-body { flex: 1; min-width: 0; }
        .merchant-card-header {
            display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
            justify-content: space-between;
        }
        .merchant-card-name { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); }
        .merchant-card-tag {
            font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius); font-weight: 500; flex-shrink: 0;
        }
        .merchant-card-tag.local { background: var(--warning-light); color: var(--primary); }
        .merchant-card-tag.nearby { background: var(--info-light); color: var(--info); }
        .merchant-card-tag.open { background: #E8F8E8; color: var(--success); }
        .merchant-card-tag.closed { background: var(--bg-secondary); color: var(--text-tertiary); }
        .merchant-card-tag.certified { background: #E6F0FF; color: var(--info); }
        .merchant-card-tag.license { background: var(--bg-secondary); color: var(--text-secondary); }

        .merchant-card-addr {
            font-size: var(--font-size-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .merchant-card-addr i { font-size: var(--font-size-xs); flex-shrink: 0; }

        /* 商家详情页 */
        .merchant-detail-cover {
            width: 100%; height: 180px; position: relative; overflow: hidden;
            background: #F0EFF5;
        }
        .merchant-detail-cover img {
            width: 100%; height: 100%; object-fit: cover;
        }
        .merchant-detail-cover .back-btn {
            position: absolute; top: calc(var(--statusbar-h, 44px) + 8px); left: 12px; z-index: 10;
            width: 32px; height: 32px; min-height: auto; padding: 0; border-radius: 50%;
            background: rgba(0,0,0,0.4); color: #fff; border: none; outline: none; box-shadow: none;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            box-sizing: border-box; aspect-ratio: 1 / 1; flex-shrink: 0;
        }
        .merchant-detail-cover .back-btn i { font-size: 16px; }
        .merchant-detail-cover-scroll {
            display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch; scrollbar-width: none; height: 100%;
        }
        .merchant-detail-cover-scroll::-webkit-scrollbar { display: none; }
        .merchant-detail-cover-scroll img {
            scroll-snap-align: start; flex: 0 0 100%; height: 100%; object-fit: cover;
        }

        .merchant-cover-counter {
            position: absolute; top: 12px; right: 12px;
            background: rgba(0,0,0,0.45); color: #fff; font-size: var(--font-size-xs); font-weight: 600;
            padding: 2px 10px; border-radius: var(--radius); pointer-events: none;
        }

        /* 商家详情信息区 */
        .merchant-detail-header {
            padding: 12px 16px; background: var(--bg-primary);
            border-radius: 16px; margin: -30px 8px 0; position: relative; z-index: 5;
        }
        .merchant-detail-name {
            font-size: var(--font-size-lg); font-weight: 800; color: var(--text-primary);
        }
        .merchant-detail-tags {
            display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px;
        }

        /* 选项卡导航 */
        .merchant-tab-item {
            flex: 1; text-align: center; padding: 14px 0 12px;
            font-size: var(--font-size-base); font-weight: 500; color: var(--text-secondary);
            cursor: pointer; position: relative; transition: color 0.2s;
            user-select: none; -webkit-tap-highlight-color: transparent;
        }
        .merchant-tab-item.active {
            color: var(--text-primary); font-weight: 700;
        }
        .merchant-tab-item.active::after {
            content: ''; position: absolute; bottom: -1px; left: 50%;
            transform: translateX(-50%); width: 24px; height: 3px;
            border-radius: 2px; background: var(--primary);
        }
        .merchant-tab-item .tab-badge {
            display: inline-block; background: var(--danger); color: #fff; font-size: var(--font-size-xs);
            padding: 1px 6px; border-radius: var(--radius-sm); margin-left: 4px; vertical-align: 2px;
        }

        /* 选项卡面板 */
        .merchant-tab-panel { display: none; }
        .merchant-tab-panel.active { display: block; }

        /* 店铺信息区块 */
        .merchant-section {
            margin: 0 8px 16px;
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            overflow: hidden;
            padding: 4px 12px;
        }
        .merchant-section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .merchant-section-title span {
            font-size: var(--font-size-base);
            font-weight: 700;
            color: var(--text-primary);
            margin-left: 4px;
            margin-top: 4px;
        }
        .merchant-section-title i {
            color: var(--primary);
            font-size: 14px;
        }

        /* 相册 */
        .merchant-album-row {
            display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
            -webkit-overflow-scrolling: touch;
        }
        .merchant-album-row img {
            width: 120px; height: 90px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0;
            transition: transform 0.2s;
        }
        .merchant-album-row img:active { transform: scale(0.96); }

        /* 信息行 */
        .merchant-info-card {
            margin: 0;
        }
        .merchant-info-row {
            display: flex; align-items: center; gap: 12px; padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
        }
        .merchant-info-row:last-child { margin-bottom: 0; border-bottom: none; }
        .merchant-info-row.clickable { cursor: pointer; text-decoration: none; }
        .merchant-info-row.clickable:active { background: var(--bg-secondary); }
        .merchant-info-icon {
            width: 36px; height: 36px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .merchant-info-icon i { font-size: 15px; }
        .merchant-info-content { flex: 1; min-width: 0; }
        .merchant-info-label { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-bottom: 2px; }
        .merchant-info-value { font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 600; }
        .merchant-info-value.phone { color: var(--info); font-weight: 700; }
        .merchant-info-arrow { color: var(--text-tertiary); font-size: 12px; flex-shrink: 0; }

        /* 简介 */
        .merchant-detail-desc {
            margin: 8px 0 16px;
            padding: 12px;
            background: var(--bg-secondary); border-radius: var(--radius);
            font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.7;
        }

        /* 资质信息行 */
        .merchant-cert-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 0; border-bottom: 1px solid var(--border-light);
            font-size: var(--font-size-sm);
        }
        .merchant-cert-row:last-child { margin-bottom: 0; border-bottom: none; }
        .merchant-cert-label { color: var(--text-tertiary); }
        .merchant-cert-value { color: var(--text-primary); font-weight: 600; }

        /* ===== 商家网店 ===== */
        .merchant-shop-link-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 0; border-bottom: 1px solid var(--border-light);
        }
        .merchant-shop-link-item:last-child { margin-bottom: 0; border-bottom: none; }
        .merchant-shop-link-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
        .merchant-shop-link-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
        .merchant-shop-link-platform { font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary); }
        .merchant-shop-link-name { font-size: var(--font-size-xs); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .merchant-shop-link-copy {
            background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-secondary);
            border-radius: var(--radius); padding: 6px 12px; font-size: var(--font-size-xs); font-weight: 600;
            cursor: pointer; white-space: nowrap; flex-shrink: 0;
        }
        .merchant-shop-link-copy:active { opacity: 0.7; }

        /* ===== 商家页：门店/动态切换 ===== */
        .merchant-tab-shell {
            position: relative; z-index: 100; flex-shrink: 0;
            padding: var(--statusbar-h, 44px) 0 0;
            background: #FFFFFF;
            border-bottom: 0.5px solid var(--border);
        }
        .merchant-tab-row {
            display: flex;
            align-items: center;
            position: relative;
            height: 48px;
            padding: 0 8px 0 12px;
        }
        .merchant-tab-menu {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            color: var(--text-primary); flex-shrink: 0; cursor: pointer;
        }
        .merchant-tab-menu i { font-size: 18px; }
        .merchant-tab-bar {
            position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
            display: flex; align-items: center; justify-content: center; gap: 22px;
            min-width: 0; overflow-x: auto;
            padding: 0 8px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .merchant-tab-bar::-webkit-scrollbar { display: none; }
        .merchant-tab-btn {
            border: none; background: transparent;
            color: var(--text-tertiary);
            font-size: 16px; font-weight: 500;
            letter-spacing: 2px;
            cursor: pointer; padding: 0 2px;
            position: relative; white-space: nowrap;
            line-height: 1;
        }
        .merchant-tab-btn.active {
            color: var(--text-primary); font-weight: 700;
        }
        /* 激活态底部深灰色圆角短线，宽度匹配文字 */
        .merchant-tab-btn.active::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -8px;
            transform: translateX(-50%);
            width: calc(100% - 4px - 2px);
            height: 2px;
            border-radius: 2px;
            background: #333;
        }
        .merchant-tab-search {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            color: var(--text-primary); flex-shrink: 0; cursor: pointer;
        }
        .merchant-tab-search i { font-size: 18px; }
        .merchant-swipe-viewport { overflow: hidden; touch-action: pan-y; flex: 1; min-height: 0; }
        .merchant-swipe-track { display: flex; width: 300%; height: 100%; transition: transform 0.28s ease; align-items: stretch; }
        .merchant-section-panel { width: 33.3333%; flex-shrink: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px)); }
        #page-merchant-list.active { padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; height: 100vh !important; }
        .merchant-product-panel { padding: 10px 8px calc(49px + env(safe-area-inset-bottom, 0px)); }
        .merchant-product-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .merchant-product-flow-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); overflow: hidden;
            box-shadow: 0 2px 10px rgba(15,23,42,0.05); cursor: pointer;
            width: 100%; min-width: 0;
        }
        .merchant-product-flow-card .merchant-product-cover { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--bg-tertiary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
        .merchant-product-info { padding: 9px 10px 10px; }
        .merchant-product-title {
            font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary); line-height: 1.35;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px;
        }
        .merchant-product-shop { font-size: 12px; color: var(--text-tertiary); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .merchant-product-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: 7px; }
        .merchant-product-price-main { color: var(--primary); font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
        .merchant-product-price-main small { font-size: 12px; font-weight: 600; }
        .merchant-product-sales { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
        .merchant-product-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
        .merchant-product-tag { font-size: 12px; padding: 2px 6px; border-radius: var(--radius-full); background: rgba(46,204,113,0.1); color: #1A8C5A; }
        .merchant-feed-panel { padding: 0 0 calc(49px + env(safe-area-inset-bottom, 0px)) 0; background: var(--bg-primary); }
        .merchant-feed-waterfall { padding: 0 12px; background: var(--bg-primary); }
        .feed-end-tip { background: var(--bg-secondary); }
        .merchant-feed-card {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin: 0;
            padding: 14px 0;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            position: relative;
        }
        .merchant-feed-card::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 0.5px;
            background: var(--border);
        }
        .merchant-feed-cover {
            width: 100%;
            border-radius: 4px;
            display: block;
            object-fit: cover;
            background: var(--bg-tertiary);
            order: 3;
            margin-top: 8px;
        }
        .merchant-feed-gallery {
            order: 3;
            display: grid;
            gap: 4px;
            width: 100%;
            max-width: 100%;
            margin-top: 8px;
        }
        .merchant-feed-gallery.count-1 { grid-template-columns: 1fr; max-width: 240px; }
        .merchant-feed-gallery.count-2,
        .merchant-feed-gallery.count-4 { grid-template-columns: repeat(2, 1fr); }
        .merchant-feed-gallery.count-3,
        .merchant-feed-gallery.count-5,
        .merchant-feed-gallery.count-6,
        .merchant-feed-gallery.count-7,
        .merchant-feed-gallery.count-8,
        .merchant-feed-gallery.count-9 { grid-template-columns: repeat(3, 1fr); }
        .merchant-feed-gallery-img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: var(--radius-sm);
            display: block;
            background: var(--bg-tertiary);
        }
        .merchant-feed-video {
            order: 3;
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;
            margin-top: 8px;
            border-radius: var(--radius-sm);
            overflow: hidden;
            background: var(--bg-tertiary);
            cursor: pointer;
        }
        .merchant-feed-video-poster {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .merchant-feed-video-play {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(4px);
            box-shadow: 0 4px 14px rgba(0,0,0,0.2);
        }
        .merchant-feed-video-progress {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 3px;
            background: rgba(255,255,255,0.28);
        }
        .merchant-feed-video-progress-bar {
            width: 0%;
            height: 100%;
            background: #fff;
            transition: width 0.2s linear;
        }
        .merchant-feed-body { display: contents; padding: 0; }
        .merchant-feed-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            order: 1;
            margin-bottom: 6px;
        }
        .merchant-feed-avatar {
            width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
            background: var(--bg-secondary); cursor: pointer;
        }
        .merchant-feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .merchant-feed-shop { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
        .merchant-feed-time { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; }
        .merchant-feed-text { font-size: 15px; color: var(--text-primary); line-height: 1.5; margin-bottom: 0; order: 2; }
        .merchant-feed-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 0; order: 4; margin-top: 8px; }
        .merchant-feed-tag { font-size: 12px; padding: 2px 6px; border-radius: var(--radius-full); background: #FFF0E8; color: var(--primary); }
        .merchant-feed-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 18px;
            color: var(--text-tertiary);
            font-size: 14px;
            order: 5;
            width: 100%;
            margin-top: 10px;
            padding-top: 8px;
        }
        .merchant-feed-action-btn {
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 0;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
        }
        .merchant-feed-action-btn i { font-size: 16px; }
        .merchant-feed-action-btn.liked { color: var(--danger); font-weight: 700; }

        /* ===== 商家卡片服务承诺标签 ===== */
        .merchant-card-promises {
            display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
        }
        .merchant-promise-tag {
            display: inline-flex; align-items: center; gap: 2px;
            font-size: 12px; padding: 1px 6px; border-radius: var(--radius-sm);
            background: rgba(46,204,113,0.1); color: #1A8C5A; font-weight: 500;
        }
        .merchant-promise-tag.gold { background: rgba(230,126,34,0.1); color: #B5660E; }
        .merchant-promise-tag.blue { background: rgba(0,122,255,0.1); color: var(--info); }

        /* ===== 透明定价 — 商品价目区块 ===== */
        .merchant-price-list { margin: 0; }
        .merchant-price-item {
            display: flex; align-items: center; gap: 12px;
            padding: 12px; background: var(--bg-secondary); border-radius: var(--radius);
            margin-bottom: 8px;
        }
        .merchant-price-item:last-child { margin-bottom: 0; }
        .merchant-price-item-img {
            width: 56px; height: 56px; border-radius: var(--radius); flex-shrink: 0;
            background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center;
        }
        .merchant-price-item-img i { font-size: 24px; color: var(--text-tertiary); }
        .merchant-price-item-info { flex: 1; min-width: 0; }
        .merchant-price-item-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
        .merchant-price-item-cost {
            font-size: var(--font-size-xs); color: var(--text-tertiary); display: flex; gap: 6px; align-items: center;
        }
        .merchant-price-item-cost .cost-bar { width: 1px; height: 10px; background: var(--border); }
        .merchant-price-item-price {
            font-size: var(--font-size-base); font-weight: 800; color: var(--primary);
            flex-shrink: 0; font-variant-numeric: tabular-nums;
        }
        .merchant-price-item-price small { font-size: var(--font-size-xs); font-weight: 400; }
        .merchant-price-tags { display: flex; gap: 4px; margin-top: 4px; }

        /* ===== 服务承诺区块 ===== */
        .merchant-promise-grid {
            display: grid; grid-template-columns: 1fr; gap: 8px;
        }
        .merchant-promise-card {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 12px 14px; background: var(--bg-primary); border: 1px solid #F0F0F5; border-radius: var(--radius);
            text-align: left;
        }
        .merchant-promise-card > i {
            font-size: 20px; color: var(--success);
            width: 36px; height: 36px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(46,204,113,0.12); border-radius: var(--radius-sm);
        }
        .merchant-promise-name { font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 600; margin-bottom: 2px; }
        .merchant-promise-desc { font-size: var(--font-size-xs); color: var(--text-secondary); line-height: 1.5; }
        .merchant-promise-content { flex: 1; min-width: 0; }
        .merchant-promise-empty {
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            padding: 20px; color: var(--text-tertiary); text-align: center;
            background: var(--bg-secondary); border-radius: var(--radius);
        }
        .merchant-promise-empty i { font-size: 28px; color: var(--border); }
        .merchant-promise-empty span { font-size: var(--font-size-sm); }
        @media (min-width: 480px) {
            .merchant-promise-grid { grid-template-columns: repeat(2, 1fr); }
        }

        /* ===== 邻里口碑区块 ===== */
        .merchant-reputation-summary {
            display: flex; align-items: center; gap: 16px; margin-bottom: 12px;
            padding: 12px; background: var(--bg-secondary); border-radius: var(--radius);
        }
        .merchant-rep-score {
            font-size: 28px; font-weight: 800; color: var(--primary); line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        .merchant-rep-score small { font-size: var(--font-size-xs); font-weight: 400; color: var(--text-tertiary); }
        .merchant-rep-count { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; }
        .merchant-rep-tags { display: flex; gap: 6px; flex-wrap: wrap; }
        .merchant-rep-tag {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 4px 10px; border-radius: 16px;
            background: rgba(255,109,59,0.08); color: var(--primary);
            font-size: var(--font-size-xs); font-weight: 500;
        }
        .merchant-rep-tag .rep-count { color: var(--text-tertiary); font-weight: 400; }

        /* ===== 社区专属优惠区块（老人关爱价） ===== */
        .merchant-offer-card {
            padding: 12px; background: linear-gradient(135deg, rgba(230,126,34,0.06), rgba(255,154,108,0.04));
            border: 1px solid rgba(230,126,34,0.18); border-radius: var(--radius); margin-bottom: 8px;
        }
        .merchant-offer-card:last-child { margin-bottom: 0; }
        .merchant-offer-title {
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 6px;
            display: flex; align-items: center; gap: 6px;
        }
        .merchant-offer-title .offer-badge {
            font-size: 12px; padding: 1px 6px; border-radius: var(--radius-sm); font-weight: 600;
        }
        .merchant-offer-title .offer-badge.elder { background: rgba(230,126,34,0.15); color: #B5660E; }
        .merchant-offer-price { display: flex; align-items: baseline; gap: 8px; }
        .merchant-offer-price .price-now { font-size: var(--font-size-lg); font-weight: 800; color: #B5660E; font-variant-numeric: tabular-nums; }
        .merchant-offer-price .price-market { font-size: var(--font-size-xs); color: var(--text-tertiary); text-decoration: line-through; }
        .merchant-offer-desc { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; }

        /* ===== 社区贡献榜区块 ===== */
        .merchant-contribution-board {
            margin: 12px 8px 0; background: var(--bg-primary); border-radius: var(--radius-lg);
            padding: 12px;
        }
        .merchant-contribution-title {
            font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
            margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
        }
        .merchant-contribution-title i { color: var(--accent-gold, #F58500); font-size: 16px; }
        .merchant-contribution-item {
            display: flex; align-items: center; gap: 10px; padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }
        .merchant-contribution-item:last-child { border-bottom: none; }
        .merchant-contribution-rank {
            width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-xs); font-weight: 700; color: #fff;
        }
        .merchant-contribution-rank.r1 { background: #FFD700; color: #8B6914; }
        .merchant-contribution-rank.r2 { background: #C0C0C0; color: #555; }
        .merchant-contribution-rank.r3 { background: #CD7F32; color: #fff; }
        .merchant-contribution-rank.r4 { background: var(--bg-tertiary); color: var(--text-tertiary); }
        .merchant-contribution-info { flex: 1; min-width: 0; }
        .merchant-contribution-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .merchant-contribution-detail { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }

        /* ===== 诚信公约区块 ===== */
        .merchant-convention-section {
            margin: 0 16px 16px; padding: 16px;
            background: linear-gradient(135deg, rgba(255,109,59,0.04), rgba(255,154,108,0.02));
            border: 1px solid rgba(255,109,59,0.15); border-radius: var(--radius-lg);
        }
        .merchant-convention-title {
            font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
            margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
        }
        .merchant-convention-title i { color: var(--primary); }
        .merchant-convention-list { list-style: none; padding: 0; margin: 0 0 12px; }
        .merchant-convention-list li {
            padding: 6px 0 6px 24px; position: relative;
            font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6;
        }
        .merchant-convention-list li::before {
            content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; left: 0; top: 6px; color: var(--success); font-size: 14px;
        }
        .merchant-convention-check {
            display: flex; align-items: center; gap: 8px; padding: 10px;
            background: var(--bg-primary); border-radius: var(--radius); cursor: pointer;
        }
        .merchant-convention-check input { width: 18px; height: 18px; accent-color: var(--primary); }
        .merchant-convention-check label { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); cursor: pointer; }

        /* ===== 佣金对比表 ===== */
        .merchant-commission-table {
            width: 100%; border-collapse: collapse; margin: 8px 0;
            font-size: var(--font-size-xs);
        }
        .merchant-commission-table th {
            background: var(--bg-tertiary); padding: 8px; text-align: left; font-weight: 600; color: var(--text-secondary);
        }
        .merchant-commission-table td { padding: 8px; border-bottom: 1px solid var(--border); }
        .merchant-commission-table .our-row { background: rgba(46,204,113,0.06); }
        .merchant-commission-table .our-row td { font-weight: 700; color: var(--success); }

        /* ===== 自愿公示卡片 ===== */
        .merchant-disclosure-section { margin: 0 16px 16px; }
        .merchant-disclosure-card {
            padding: 0;
        }
        .dc-title {
            font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
            margin-bottom: 12px;
        }
        .merchant-disclosure-grid {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
        }
        .merchant-dc-item {
            padding: 12px; background: rgba(46,204,113,0.06); border-radius: var(--radius);
            display: flex; flex-direction: column; gap: 4px;
        }
        .merchant-dc-item .dc-value {
            font-size: var(--font-size-lg); font-weight: 800; color: var(--text-primary);
            font-variant-numeric: tabular-nums; line-height: 1.2;
        }
        .merchant-dc-item .dc-value small {
            font-size: var(--font-size-xs); font-weight: 400; color: var(--text-tertiary);
        }
        .merchant-dc-item .dc-label {
            font-size: var(--font-size-xs); color: var(--text-tertiary);
        }
        .merchant-dc-item .dc-icon { font-size: 14px; color: var(--success); margin-bottom: 2px; }
        .merchant-disclosure-benefits {
            margin-top: 10px; padding: 10px 12px; background: var(--bg-primary); border-radius: var(--radius);
        }
        .merchant-disclosure-benefits .dc-benefit-title {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-bottom: 6px;
        }
        .merchant-dc-benefit-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; margin-bottom: 12px; }
        .merchant-dc-benefit-tag {
            display: inline-flex; align-items: center; gap: 3px;
            padding: 3px 8px; border-radius: var(--radius-sm);
            background: rgba(46,204,113,0.08); color: var(--accent-teal);
            font-size: 12px; font-weight: 500;
        }
        .merchant-disclosure-note {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 10px; line-height: 1.5;
            display: flex; align-items: flex-start; gap: 4px;
        }
        .merchant-disclosure-note i { font-size: 12px; margin-top: 2px; flex-shrink: 0; }

        /* ===== 纳税公示卡片 ===== */
        .merchant-tax-card {
            padding: 0;
        }
        .tax-title {
            font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
            margin-bottom: 12px;
        }
        .merchant-tax-summary {
            display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
            padding: 12px; background: var(--bg-primary); border-radius: var(--radius);
        }
        .merchant-tax-summary .tax-total {
            font-size: 1.8rem; font-weight: 800; color: #1B3A5C;
            font-variant-numeric: tabular-nums; line-height: 1;
        }
        .merchant-tax-summary .tax-total small { font-size: var(--font-size-sm); font-weight: 400; }
        .merchant-tax-summary .tax-year {
            font-size: var(--font-size-xs); color: var(--text-tertiary);
        }
        .merchant-tax-breakdown {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px;
        }
        .merchant-tax-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 12px; background: var(--bg-primary); border-radius: var(--radius);
        }
        .merchant-tax-row .tax-row-label {
            font-size: var(--font-size-xs); color: var(--text-tertiary);
            display: flex; align-items: center; gap: 5px;
        }
        .merchant-tax-row .tax-row-label i { font-size: 12px; }
        .merchant-tax-row .tax-row-value {
            font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary);
            font-variant-numeric: tabular-nums;
        }
        .merchant-tax-note {
            font-size: var(--font-size-xs); color: var(--text-tertiary); line-height: 1.5;
            display: flex; align-items: flex-start; gap: 4px;
        }
        .merchant-tax-note i { font-size: 12px; margin-top: 2px; flex-shrink: 0; }
        .merchant-tax-empty {
            text-align: center; padding: 16px; color: var(--text-tertiary);
            font-size: var(--font-size-sm); background: var(--bg-primary); border-radius: var(--radius);
        }
        .merchant-tax-empty i { font-size: 24px; display: block; margin-bottom: 6px; opacity: 0.3; }

        /* ===== 顾客心声 ===== */
        .merchant-voice-list { display: flex; flex-direction: column; gap: 12px; }
        .merchant-voice-item {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding: 14px;
        }
        .merchant-voice-header {
            display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
        }
        .merchant-voice-avatar {
            width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-sm); font-weight: 700; color: #fff;
        }
        .merchant-voice-name {
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary);
        }
        .merchant-voice-date {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-left: auto;
        }
        .merchant-voice-rating { display: flex; gap: 2px; margin-bottom: 6px; }
        .merchant-voice-rating i { font-size: 12px; color: #FF9F0A; }
        .merchant-voice-rating i.dim { color: var(--text-quaternary); }
        .merchant-voice-text {
            font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6;
        }
        .merchant-voice-reply {
            margin-top: 10px; padding: 10px 12px; background: var(--bg-secondary);
            border-radius: var(--radius); font-size: var(--font-size-xs); color: var(--text-tertiary);
            line-height: 1.5;
        }
        .merchant-voice-reply strong { color: var(--text-secondary); }
        .merchant-voice-empty {
            text-align: center; padding: 40px 0; color: var(--text-tertiary);
            font-size: var(--font-size-sm); background: var(--bg-primary); border-radius: var(--radius);
        }

        /* ===== 供应商公示卡片 ===== */
        .merchant-supplier-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); overflow: hidden;
        }
        .merchant-supplier-header {
            display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
            border-bottom: 1px solid var(--border);
        }
        .merchant-supplier-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); }
        .merchant-supplier-badge {
            font-size: var(--font-size-xs); color: var(--success); font-weight: 600;
            background: #E8F8F0; padding: 2px 8px; border-radius: var(--radius);
        }
        .merchant-supplier-list { padding: 4px 0; }
        .merchant-supplier-item {
            display: flex; align-items: center; gap: 10px; padding: 10px 14px;
            border-bottom: 1px solid var(--border-light);
        }
        .merchant-supplier-item:last-child { border-bottom: none; }
        .merchant-supplier-name {
            flex: 1; min-width: 0; font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 500;
        }
        .merchant-supplier-tag {
            font-size: var(--font-size-xs); color: var(--text-tertiary);
            background: var(--bg-secondary); padding: 2px 8px; border-radius: var(--radius); white-space: nowrap;
        }
        .merchant-supplier-note {
            font-size: var(--font-size-xs); color: var(--text-tertiary); line-height: 1.5;
            display: flex; align-items: flex-start; gap: 4px; padding: 10px 14px;
            background: var(--bg-secondary);
        }
        .merchant-supplier-note i { font-size: 12px; margin-top: 2px; flex-shrink: 0; }

        /* ===== 商家详情页选项卡（顶部 sticky） ===== */
        .merchant-detail-nav {
            position: sticky; top: 0; z-index: 50;
            background: transparent; border-bottom: none;
            display: flex; align-items: center; gap: 6px;
            padding: 6px 4px 8px; box-sizing: border-box;
            transition: background 0.25s, border-color 0.25s;
        }
        .merchant-detail-nav.nav-stuck {
            background: var(--bg-primary); border-bottom: 1px solid var(--border);
        }
        .merchant-nav-item {
            flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
            padding: 12px 0; background: transparent; border: none; cursor: pointer;
            color: var(--text-tertiary); transition: color 0.2s;
            font-size: var(--font-size-base); font-weight: 500;
            position: relative;
        }
        .merchant-nav-item.active { color: var(--text-primary); font-weight: 700; font-size: var(--font-size-lg); }
        .merchant-nav-item.active::after {
            content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 48px; height: 3px; border-radius: 2px; background: var(--primary);
        }
        .merchant-nav-item:active { color: var(--text-primary); }

        /* 商家详情页面板切换 */
        .merchant-tab-panel { display: none; }
        .merchant-tab-panel.active { display: block; }

        /* ===== 商品服务列表 ===== */
        #page-merchant-detail { padding-bottom: 0; }
        .merchant-product-wrap { display: flex; height: calc(100vh - 216px); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
        .merchant-product-sidebar {
            width: 80px; flex-shrink: 0; background: var(--bg-primary); overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            border-right: 1px solid var(--border);
        }
        .merchant-cat-item {
            padding: 14px 8px; text-align: center; font-size: var(--font-size-sm); color: var(--text-secondary);
            border-left: none; cursor: pointer; position: relative; border-radius: 0;
        }
        .merchant-cat-item.active {
            background: #FFF5EF; color: var(--primary); font-weight: 700;
            border-radius: 0;
        }
        .merchant-cat-item.active.first-active {
            border-top-left-radius: var(--radius);
            border-bottom-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .merchant-cat-item:active { background: rgba(0,0,0,0.04); }
        .merchant-product-list { flex: 1; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px; background: var(--bg-primary); }
        .merchant-product-card {
            display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border);
            align-items: stretch;
        }
        .merchant-product-card:last-child { border-bottom: none; }
        .merchant-product-cover {
            width: 90px; height: 90px; border-radius: var(--radius); flex-shrink: 0;
            object-fit: cover; background: var(--bg-secondary);
        }
        .merchant-product-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
        .merchant-product-name {
            font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .merchant-product-spec {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 3px;
        }
        .merchant-product-bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 6px; }
        .merchant-product-price { color: var(--primary); font-weight: 700; font-size: var(--font-size-lg); font-variant-numeric: tabular-nums; }
        .merchant-product-price small { font-size: var(--font-size-xs); font-weight: 400; }
        /* 进货价 / 透明定价 展示（用户端） */
        .merchant-product-costprice { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 4px; line-height: 1.4; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
        .merchant-product-costprice .cp-label { color: var(--text-tertiary); }
        .merchant-product-costprice .cp-value { color: var(--text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }
        .merchant-product-costprice .cp-divider { color: var(--text-disabled); margin: 0 2px; }
        .merchant-product-costprice .cp-sale { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; }
        .transparent-pricing-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--success); background: var(--success-light); padding: 1px 6px; border-radius: var(--radius-full); margin-left: 4px; line-height: 1.5; }
        .transparent-pricing-tag i { font-size: 12px; }
        [data-theme="dark"] .transparent-pricing-tag { background: rgba(16,166,120,0.18); }
        .merchant-product-addcart {
            background: var(--primary); color: #fff; border: none; border-radius: var(--radius-xl);
            padding: 6px 18px; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer;
            display: flex; align-items: center; gap: 4px; white-space: nowrap;
        }
        .merchant-product-addcart:active { opacity: 0.8; }
        /* 数量选择器 */
        .merchant-product-qty {
            display: flex; align-items: center; gap: 10px; user-select: none;
        }
        .merchant-product-qty .qty-btn {
            width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--primary);
            background: transparent; color: var(--primary); font-size: 16px; font-weight: 700;
            display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
            line-height: 1; transition: background 0.15s, color 0.15s;
        }
        .merchant-product-qty .qty-btn.plus {
            background: var(--primary); color: #fff;
        }
        .merchant-product-qty .qty-btn:active { transform: scale(0.9); }
        .merchant-product-qty .qty-num {
            min-width: 18px; text-align: center; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary);
        }
        [data-theme="dark"] .merchant-product-qty .qty-btn { border-color: var(--primary); }
        [data-theme="dark"] .merchant-product-qty .qty-btn.plus { background: var(--primary); color: #fff; }
        .merchant-product-empty { text-align: center; color: var(--text-tertiary); padding: 40px 0; font-size: var(--font-size-sm); }

        /* ===== 购物车结算栏 ===== */
        .merchant-cart-bar {
            position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
            display: flex; align-items: center; gap: 12px;
            padding: 8px 16px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
            background: var(--bg-primary); border-top: 1px solid var(--border);
        }
        .merchant-cart-icon {
            position: relative; width: 44px; height: 44px; border-radius: 50%;
            background: var(--bg-secondary); display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; color: var(--text-tertiary);
        }
        .merchant-cart-bar.has-items .merchant-cart-icon {
            background: var(--primary); color: #fff;
        }
        .merchant-cart-icon i { font-size: 20px; }
        .merchant-cart-badge {
            position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
            background: var(--danger); color: #fff; font-size: 12px; font-weight: 700;
            border-radius: 9px; display: flex; align-items: center; justify-content: center;
            padding: 0 4px; border: 2px solid var(--bg-primary);
        }
        .merchant-cart-info { flex: 1; min-width: 0; }
        .merchant-cart-total {
            font-size: var(--font-size-lg); font-weight: 800; color: var(--text-primary);
            font-variant-numeric: tabular-nums; line-height: 1.2;
        }
        .merchant-cart-bar.has-items .merchant-cart-total { color: var(--primary); }
        .merchant-cart-total small { font-size: var(--font-size-xs); font-weight: 400; }
        .merchant-cart-sub {
            font-size: var(--font-size-xs); color: var(--text-tertiary);
        }
        .merchant-cart-checkout {
            background: var(--bg-secondary); color: var(--text-tertiary); border: none;
            border-radius: var(--radius-xl); padding: 10px 24px; font-size: var(--font-size-base);
            font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0;
        }
        .merchant-cart-bar.has-items .merchant-cart-checkout {
            background: var(--primary); color: #fff;
        }
        .merchant-cart-checkout:active { opacity: 0.8; }

        /* ===== 确认订单页 ===== */
        .checkout-content { padding: 12px 16px 80px; background: var(--bg-secondary); min-height: calc(100vh - 50px); }
        #page-checkout { transform: none !important; padding-bottom: 0; }
        #page-orders { transform: none !important; padding-bottom: 0; }
        .checkout-section { background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; }
        .checkout-merchant { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); }
        .checkout-section-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
        .checkout-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
        .checkout-item:last-child { border-bottom: none; }
        .checkout-item-name { font-size: var(--font-size-base); color: var(--text-primary); }
        .checkout-item-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .checkout-item-price { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
        .checkout-total-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--font-size-base); font-weight: 700; }
        .checkout-total-row span:last-child { color: var(--primary); font-size: var(--font-size-lg); }
        .checkout-delivery-options { display: flex; gap: 12px; margin-bottom: 12px; }
        .checkout-delivery-option { flex: 1; display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--bg-primary); }
        .checkout-delivery-option input { width: 18px; height: 18px; accent-color: var(--primary); }
        .checkout-delivery-option span { font-size: var(--font-size-base); }
        .checkout-delivery-option:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
        .checkout-field { margin-bottom: 10px; }
        .checkout-field label { display: block; font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 6px; }
        .checkout-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-size-base); background: var(--bg-primary); }
        .checkout-self-address { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-secondary); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--font-size-sm); }
        .checkout-address-card { border: 1px dashed var(--border); border-radius: var(--radius); padding: 14px; margin-top: 10px; cursor: pointer; background: var(--bg-secondary); transition: border-color 0.2s; }
        .checkout-address-card:active { border-color: var(--primary); }
        .checkout-address-empty { display: flex; align-items: center; gap: 10px; }
        .checkout-address-info { display: flex; align-items: center; gap: 12px; }
        .checkout-address-change { flex-shrink: 0; padding: 6px 14px; border: 1px solid var(--primary); background: var(--bg-primary); color: var(--primary); border-radius: var(--radius-xl); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; }
        .checkout-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-size-base); background: var(--bg-primary); resize: vertical; min-height: 80px; }
        .checkout-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; background: var(--bg-primary); border-top: 1px solid var(--border); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; }
        .checkout-bottom-total span:first-child { font-size: var(--font-size-sm); color: var(--text-secondary); }
        .checkout-bottom-total span:last-child { font-size: var(--font-size-xl); font-weight: 800; color: var(--primary); }
        .checkout-submit-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius-xl); padding: 12px 32px; font-size: var(--font-size-base); font-weight: 700; cursor: pointer; }
        .checkout-submit-btn:active { opacity: 0.85; }

        /* ===== 我的订单页 ===== */
        .orders-tabs { display: flex; background: var(--bg-primary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
        .orders-tab { flex: 1; text-align: center; padding: 12px 0; font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; }
        .orders-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
        .orders-list { padding: 12px 16px 24px; background: var(--bg-secondary); min-height: calc(100vh - 100px); }
        .order-card { background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
        .order-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .order-card-no { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .order-card-status { font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; }
        .order-status-pending { background: var(--warning-light); color: var(--warning); }
        .order-status-completed { background: var(--success-light); color: var(--success); }
        .order-card-merchant { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
        .order-card-items { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 8px; }
        .order-card-bottom { display: flex; justify-content: space-between; align-items: center; }
        .order-card-total { font-size: var(--font-size-sm); color: var(--text-secondary); }
        .order-card-total strong { color: var(--primary); font-size: var(--font-size-lg); }
        .order-card-code { font-size: var(--font-size-xs); color: var(--text-tertiary); background: var(--bg-secondary); padding: 4px 8px; border-radius: var(--radius-sm); }

        /* 订单详情弹窗 */
        .order-detail-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-end; justify-content: center; }
        .order-detail-modal.active { display: flex; }
        .order-detail-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
        .order-detail-body { position: relative; width: 100%; max-height: 85vh; background: var(--bg-primary); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; animation: mcartSlideUp 0.25s ease; }
        .order-detail-header { padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; }
        .order-detail-header h2 { font-size: var(--font-size-lg); font-weight: 600; }
        .order-detail-content { flex: 1; overflow-y: auto; padding: 16px; }
        .order-detail-code-box { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; border-radius: var(--radius-lg); padding: 20px; text-align: center; margin-bottom: 16px; }
        .order-detail-code-box .label { font-size: var(--font-size-sm); opacity: 0.9; margin-bottom: 8px; }
        .order-detail-code-box .code { font-size: 28px; font-weight: 800; letter-spacing: 4px; }
        .order-detail-section { background: var(--bg-secondary); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
        .order-detail-section-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
        .order-detail-row { display: flex; justify-content: space-between; font-size: var(--font-size-sm); padding: 4px 0; }
        .order-detail-row .label { color: var(--text-tertiary); }
        .order-detail-row .value { color: var(--text-primary); font-weight: 500; }

        /* 订单状态栏 */
        .order-detail-status-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 12px; }
        .order-detail-status-icon { font-size: 18px; }
        .order-detail-status-text { font-size: var(--font-size-base); font-weight: 700; }

        /* 自提核销码突出样式 */
        .order-detail-code-box.self-pickup { background: linear-gradient(135deg, var(--info), #0051D5); }
        .order-detail-code-box .code-hint { font-size: var(--font-size-xs); opacity: 0.8; margin-top: 8px; }

        /* 二维码展示样式（核销码改为二维码） */
        .order-qrcode-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .order-qrcode-box { width: 180px; height: 180px; background: #fff; border-radius: var(--radius); padding: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
        .order-qrcode-box svg { width: 100%; height: 100%; display: block; }
        .order-qrcode-box .qrcode-fallback { font-size: 12px; color: var(--text-tertiary); text-align: center; }
        .order-qrcode-label { font-size: var(--font-size-xs); opacity: 0.85; }
        .order-qrcode-label .code-text { font-family: monospace; font-weight: 700; letter-spacing: 1px; opacity: 0.9; margin-left: 4px; }
        /* dark mode 适配：二维码区域始终保持白底，确保可识别 */
        [data-theme="dark"] .order-qrcode-box { background: #fff; }

        /* 订单卡片操作按钮 */
        .order-card-action { background: var(--primary); color: #fff; border: none; border-radius: var(--radius-full); padding: 6px 16px; font-size: var(--font-size-xs); font-weight: 600; cursor: pointer; white-space: nowrap; }
        .order-card-action:active { opacity: 0.8; }
        .order-card-meta { display: flex; align-items: center; gap: 8px; }
        .order-card-total { font-size: var(--font-size-lg); font-weight: 800; color: var(--primary); }

        /* 订单时间线 */
        .order-timeline { padding-left: 4px; }
        .order-timeline-item { display: flex; gap: 10px; padding-bottom: 16px; position: relative; }
        .order-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--border); }
        .order-timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border); flex-shrink: 0; margin-top: 2px; }
        .order-timeline-dot.active { background: var(--primary); }
        .order-timeline-text { font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 500; }
        .order-timeline-time { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .order-timeline-item.active .order-timeline-text { color: var(--primary); }

        /* ===== 购物车弹窗 ===== */
        .mcart-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-end; justify-content: center; }
        .mcart-modal.active { display: flex; }
        .mcart-modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
        .mcart-modal-body { position: relative; width: 100%; max-height: 70vh; background: var(--bg-primary); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; animation: mcartSlideUp 0.25s ease; }
        @keyframes mcartSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .mcart-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); }
        .mcart-modal-title { font-size: var(--font-size-lg); font-weight: 700; }
        .mcart-modal-clear { background: none; border: none; color: var(--text-tertiary); font-size: var(--font-size-sm); cursor: pointer; }
        .mcart-modal-list { flex: 1; overflow-y: auto; padding: 8px 16px; }
        .mcart-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
        .mcart-item:last-child { border-bottom: none; }
        .mcart-item-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .mcart-item-price { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .mcart-item-ctrl { display: flex; align-items: center; gap: 8px; }
        .mcart-item-ctrl button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-primary); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .mcart-item-ctrl span { font-size: var(--font-size-sm); font-weight: 600; min-width: 20px; text-align: center; }
        .mcart-modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
        .mcart-modal-total { font-size: var(--font-size-base); font-weight: 600; }
        .mcart-modal-total span { font-size: var(--font-size-lg); font-weight: 800; color: var(--primary); }
        .mcart-modal-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius-xl); padding: 10px 28px; font-size: var(--font-size-base); font-weight: 700; cursor: pointer; }

        /* 商家详情页 - 美团风格商品区域 */
        .merchant-products-section {
            margin: 12px 16px 0; background: var(--bg-primary); border-radius: var(--radius-lg);
            overflow: hidden; }
        .merchant-products-section-title {
            display: flex; align-items: center; gap: 8px;
            padding: 16px 16px 8px; font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
        }
        .merchant-products-section-title::before {
            content: ''; width: 3px; height: 16px; border-radius: 2px;
            background: var(--primary); flex-shrink: 0;
        }
        .merchant-products-section-title .count {
            font-size: var(--font-size-xs); font-weight: 400; color: var(--text-tertiary); margin-left: auto;
        }

        /* 美团风格商品卡片 */
        .mp-item {
            display: flex; align-items: stretch; gap: 12px; padding: 14px 16px;
            border-bottom: 1px solid var(--border-light); cursor: pointer;
            transition: background 0.15s;
        }
        .mp-item:last-child { border-bottom: none; }
        .mp-item:active { background: #FAFAFA; }
        .mp-item-img {
            width: 90px; height: 90px; border-radius: var(--radius); flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            position: relative; overflow: hidden;
            background: #F5F5F7;
        }
        .mp-item-img img {
            width: 100%; height: 100%; object-fit: cover;
        }
        .mp-item-img i {
            font-size: 36px; color: #fff; position: relative; z-index: 1;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
        }
        .mp-item-img .mp-img-label {
            position: absolute; bottom: 0; left: 0; right: 0;
            padding: 4px 8px; background: rgba(0,0,0,0.35);
            color: #fff; font-size: var(--font-size-xs); text-align: center;
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        }
        .mp-item-body {
            flex: 1; min-width: 0; display: flex; flex-direction: column;
            justify-content: space-between; padding: 2px 0;
        }
        .mp-item-name {
            font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary);
            line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        .mp-item-desc {
            font-size: var(--font-size-xs); color: var(--text-tertiary);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            margin-top: 2px;
        }
        .mp-item-bottom {
            display: flex; align-items: center; justify-content: space-between;
        }
        .mp-item-price {
            font-size: var(--font-size-lg); font-weight: 800; color: var(--primary);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        .mp-item-price .unit {
            font-size: var(--font-size-xs); font-weight: 400; color: var(--text-tertiary);
        }
        /* 美团风格加号按钮（圆形） */
        .mp-item-add-btn {
            width: 22px; height: 22px; border-radius: 50%; border: none;
            background: var(--primary); color: #fff; font-size: var(--font-size-base); font-weight: 700;
            cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 1px 4px rgba(255,109,59,0.35); flex-shrink: 0;
            line-height: 1; padding: 0; position: relative;
        }
        .mp-item-add-btn:active { transform: scale(0.85); box-shadow: 0 1px 3px rgba(255,109,59,0.25); }
        .mp-item-add-btn i { font-size: var(--font-size-xs); position: relative; top: -0.5px; }
        /* 加号计数 */
        .mp-item-qty-wrap {
            display: flex; align-items: center; gap: 6px; flex-shrink: 0;
        }
        .mp-item-qty-btn {
            width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--primary);
            background: var(--bg-primary); color: var(--primary); font-size: var(--font-size-sm); font-weight: 700;
            cursor: pointer; transition: transform 0.12s; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            line-height: 1; padding: 0;
        }
        .mp-item-qty-btn:active { transform: scale(0.85); }
        .mp-item-qty-num {
            font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary);
            min-width: 16px; text-align: center; user-select: none;
        }
        /* 旧购买按钮保留兼容（商品详情页等） */

        /* 空商品提示 */
        .mp-empty {
            text-align: center; padding: 32px 16px; color: var(--text-tertiary); font-size: var(--font-size-sm);
        }
        .mp-empty i { font-size: 36px; display: block; margin-bottom: 8px; color: #DDD; }

        /* 购物车栏已移除（一期） */

        /* 关怀模式适配 */
        .elder-mode .merchant-filter-tab { font-size: var(--font-size-base); padding: 9px 18px; }
        .elder-mode .merchant-card-name { font-size: var(--font-size-lg); }
        .elder-mode .merchant-card-image { width: 88px; height: 88px; }
        .elder-mode .merchant-detail-name { font-size: var(--font-size-xxl); }
        .elder-mode .merchant-info-value { font-size: var(--font-size-base); }
        .elder-mode .merchant-detail-cover { height: 240px; }
        .elder-mode .mp-item-img { width: 110px; height: 110px; }
        .elder-mode .mp-item-name { font-size: var(--font-size-lg); }
        .elder-mode .mp-item-price { font-size: var(--font-size-xxl); }
        .elder-mode .mp-item-add-btn { width: 28px; height: 28px; font-size: var(--font-size-lg); }
        .elder-mode .mp-item-qty-btn { width: 28px; height: 28px; font-size: var(--font-size-base); }
        .elder-mode .mp-item-qty-num { font-size: var(--font-size-base); }
        .elder-mode .merchant-tab-item { font-size: var(--font-size-lg); padding: 16px 0 14px; }
        .elder-mode .merchant-tab-item.active::after { width: 32px; height: 4px; }

        /* ==================== 商品模块 ==================== */
        .merchant-products-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            margin: 0 16px 12px; padding: 14px; background: var(--bg-secondary); border-radius: var(--radius-lg);
            border: 1px dashed rgba(255,109,59,0.3); color: var(--primary); font-size: var(--font-size-sm); font-weight: 600;
            cursor: pointer; transition: background 0.15s;
        }
        .merchant-products-btn:active { background: var(--warning-light); }

        /* 商品卡片 */
        .product-card {
            display: flex; gap: 12px; padding: 14px 16px; background: var(--bg-primary);
            border-bottom: 1px solid var(--bg-secondary); cursor: pointer;
            transition: background 0.15s; align-items: center;
        }
        .product-card:active { background: var(--bg-secondary); }
        .product-card-image {
            width: 64px; height: 64px; border-radius: var(--radius); flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; color: #fff;
            overflow: hidden; background: #F5F5F7;
        }
        .product-card-image img {
            width: 100%; height: 100%; object-fit: cover;
        }
        .product-card-body { flex: 1; min-width: 0; }
        .product-card-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
        .product-card-desc { font-size: var(--font-size-xs); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .product-card-price { font-size: var(--font-size-lg); font-weight: 800; color: var(--primary); margin-top: 4px; }
        .product-card-price .unit { font-size: var(--font-size-xs); font-weight: 400; color: var(--text-tertiary); margin-left: 2px; }

        /* 商品详情 */
        .product-detail-image {
            width: 100%; height: 240px; display: flex; align-items: center; justify-content: center;
            font-size: 64px; color: #fff;
            overflow: hidden; background: #F5F5F7;
        }
        .product-detail-image img {
            width: 100%; height: 100%; object-fit: cover;
        }
        .product-detail-info {
            padding: 20px 16px 0; background: var(--bg-primary);
        }
        .product-detail-name {
            font-size: var(--font-size-xl); font-weight: 800; color: var(--text-primary); margin-bottom: 4px;
        }
        .product-detail-desc {
            font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 12px;
        }
        .product-detail-price {
            font-size: 28px; font-weight: 800; color: var(--primary);
        }
        .product-detail-price .unit {
            font-size: var(--font-size-sm); font-weight: 400; color: var(--text-tertiary); margin-left: 4px;
        }
        .product-detail-merchant {
            margin: 16px; padding: 14px; background: var(--bg-secondary); border-radius: var(--radius-lg);
            display: flex; align-items: center; gap: 10px; font-size: var(--font-size-sm); color: var(--text-secondary);
        }
        .product-detail-merchant i { color: var(--primary); }

        /* 购买底部栏 */
        .product-buy-bar {
            position: sticky; bottom: 68px; padding: 12px 16px 16px;
            background: linear-gradient(0deg, var(--bg-primary) 85%, transparent);
            z-index: 85; display: flex; gap: 10px;
        }
        .product-buy-btn {
            flex: 1; padding: 14px; border: none; border-radius: var(--radius-lg); font-size: var(--font-size-base); font-weight: 700;
            cursor: pointer; transition: transform 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .product-buy-btn:active { transform: scale(0.97); }
        .product-buy-btn.primary { background: var(--primary); color: #fff; box-shadow: 0 4px 16px rgba(255,109,59,0.3); }

        /* ===== 商品详情页 ===== */
        #page-product-detail.active { display: flex; flex-direction: column; }
        .product-detail-hero {
            width: 100%; height: 260px; background: linear-gradient(135deg, #FFF5F0, #FFEEE5);
            display: flex; align-items: center; justify-content: center;
            font-size: 80px; color: var(--primary); position: relative; overflow: hidden;
        }
        .product-detail-hero::after {
            content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
            background: linear-gradient(to top, rgba(0,0,0,0.06), transparent);
        }
        .product-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
        .product-detail-info-card {
            margin: -16px 16px 0; background: var(--bg-primary); border-radius: var(--radius-lg);
            padding: 16px; position: relative; z-index: 1;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid #F0F0F5;
        }
        .product-detail-name { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); line-height: 1.4; }
        .product-detail-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
        .product-detail-price { font-size: 28px; font-weight: 800; color: var(--primary); }
        .product-detail-price small { font-size: var(--font-size-sm); font-weight: 500; }
        .product-detail-original { font-size: var(--font-size-sm); color: var(--text-tertiary); text-decoration: line-through; }
        .product-detail-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
        .product-detail-section {
            margin: 12px 16px 0; background: var(--bg-primary); border-radius: var(--radius-lg);
            padding: 16px; border: 1px solid var(--border-light);
        }
        .product-detail-section-title {
            font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
            margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
        }
        .product-detail-section-title::before { content: ''; width: 3px; height: 16px; background: var(--primary); border-radius: 2px; }
        .product-detail-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.8; }
        .product-detail-cost-list { display: flex; flex-direction: column; gap: 8px; }
        .product-detail-cost-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 12px; background: var(--bg-secondary); border-radius: var(--radius); font-size: var(--font-size-sm);
        }
        .product-detail-cost-item .label { color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
        .product-detail-cost-item .label i { font-size: 12px; color: var(--primary); }
        .product-detail-cost-item .value { color: var(--text-primary); font-weight: 600; }
        .product-detail-cost-item.total { background: var(--primary-light); }
        .product-detail-cost-item.total .label { color: var(--primary); font-weight: 600; }
        .product-detail-cost-item.total .value { color: var(--primary); font-weight: 700; }
        .product-detail-specs { display: flex; flex-direction: column; }
        .product-detail-spec-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 0; border-bottom: 1px solid var(--border-light); font-size: var(--font-size-sm);
        }
        .product-detail-spec-row:last-child { border-bottom: none; }
        .product-detail-spec-label { color: var(--text-tertiary); }
        .product-detail-spec-val { color: var(--text-primary); font-weight: 500; }
        .product-detail-promises { display: flex; flex-wrap: wrap; gap: 8px; }
        .product-detail-promise-tag {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: var(--font-size-xs); padding: 4px 10px; border-radius: var(--radius-full);
            background: rgba(46,204,113,0.08); color: var(--accent-teal); font-weight: 500;
        }
        .product-detail-promise-tag i { font-size: 12px; }
        .product-detail-bottom-bar {
            position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin: 0 auto;
            background: var(--bg-primary); border-top: 1px solid var(--border-light);
            padding: 10px 16px; display: flex; align-items: center; gap: 12px; z-index: 100;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
        }
        .product-detail-buy-btn {
            padding: 12px 28px; border: none; border-radius: var(--radius-full);
            background: linear-gradient(135deg, var(--primary), #FF9A56); color: #fff;
            font-size: var(--font-size-base); font-weight: 700; cursor: pointer;
            box-shadow: 0 4px 12px rgba(255,109,59,0.3); transition: transform 0.15s;
            display: flex; align-items: center; gap: 6px; white-space: nowrap;
        }
        .product-detail-buy-btn:active { transform: scale(0.97); }

        /* 订单确认页 */
        .delivery-mode-selector {
            margin: 16px; background: var(--bg-secondary); border-radius: var(--radius-lg); overflow: hidden;
        }
        .delivery-option {
            display: flex; align-items: center; gap: 12px; padding: 16px;
            border-bottom: 1px solid rgba(0,0,0,0.04); cursor: pointer; transition: background 0.15s;
        }
        .delivery-option:last-child { border-bottom: none; }
        .delivery-option:active { background: rgba(0,0,0,0.02); }
        .delivery-option.selected { background: var(--warning-light); }
        .delivery-radio {
            width: 20px; height: 20px; border-radius: 50%; border: 2px solid #D0D0D5;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s;
        }
        .delivery-option.selected .delivery-radio { border-color: var(--primary); }
        .delivery-radio-inner {
            width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: background 0.2s;
        }
        .delivery-option.selected .delivery-radio-inner { background: var(--primary); }
        .delivery-info { flex: 1; min-width: 0; }
        .delivery-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
        .delivery-hint { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .delivery-icon-wrap {
            width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .delivery-icon-wrap i { font-size: var(--font-size-lg); }

        /* 地址选择 */
        .address-card {
            margin: 16px; padding: 16px; background: var(--bg-secondary); border-radius: var(--radius-lg);
            cursor: pointer; transition: background 0.15s;
        }
        .address-card:active { background: var(--border); }
        .address-card-header {
            display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
        }
        .address-card-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
        .address-card-tag {
            font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius); background: var(--warning-light); color: var(--primary); font-weight: 500;
        }
        .address-card-detail { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 4px; }
        .address-card-phone { font-size: var(--font-size-xs); color: var(--text-tertiary); }

        /* 订单摘要 */
        .order-summary {
            margin: 16px; padding: 16px; background: var(--bg-secondary); border-radius: var(--radius-lg);
        }
        .order-summary-row {
            display: flex; justify-content: space-between; align-items: center; padding: 8px 0;
            font-size: var(--font-size-sm); color: var(--text-secondary);
        }
        .order-summary-row.total {
            padding-top: 12px; margin-top: 8px; border-top: 1px solid rgba(0,0,0,0.06);
            font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
        }
        .order-summary-row.total .price { color: var(--primary); font-size: var(--font-size-xl); font-variant-numeric: tabular-nums; }

        /* 提交按钮 */
        .submit-btn-bar {
            position: sticky; bottom: 68px; padding: 12px 16px 16px;
            background: linear-gradient(0deg, var(--bg-primary) 85%, transparent); z-index: 85;
        }
        .submit-btn {
            width: 100%; padding: 14px; border: none; border-radius: var(--radius-lg);
            background: var(--primary); color: #fff; font-size: var(--font-size-base); font-weight: 700;
            cursor: pointer; box-shadow: 0 4px 16px rgba(255,109,59,0.3); transition: transform 0.15s;
        }
        .submit-btn:active { transform: scale(0.97); }

        /* 支付页面 */
        .payment-amount {
            text-align: center; padding: 32px 16px 20px;
        }
        .payment-amount-label { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-bottom: 8px; }
        .payment-amount-value { font-size: 40px; font-weight: 800; color: var(--text-primary); }
        .payment-methods {
            margin: 0 16px; background: var(--bg-secondary); border-radius: var(--radius-lg); overflow: hidden;
        }
        .payment-method {
            display: flex; align-items: center; gap: 12px; padding: 16px;
            border-bottom: 1px solid rgba(0,0,0,0.04); cursor: pointer; transition: background 0.15s;
        }
        .payment-method:last-child { border-bottom: none; }
        .payment-method:active { background: rgba(0,0,0,0.02); }
        .payment-method.selected { background: var(--warning-light); }
        .payment-method-icon {
            width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .payment-method-icon i { font-size: var(--font-size-xxl); }
        .payment-method-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); flex: 1; }
        .payment-method .delivery-radio { margin-left: auto; }

        /* 支付成功 */
        .success-title { font-size: var(--font-size-xl); font-weight: 800; color: var(--text-primary); text-align: center; margin: 48px 0 4px; }
        .success-subtitle { font-size: var(--font-size-sm); color: var(--text-tertiary); text-align: center; margin-bottom: 24px; }
        .success-order-card {
            margin: 0 16px 16px; padding: 16px; background: var(--bg-secondary); border-radius: var(--radius-lg);
        }
        .success-order-row {
            display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--font-size-sm);
        }
        .success-order-row .label { color: var(--text-tertiary); }
        .success-order-row .value { color: var(--text-primary); font-weight: 500; }
        .success-actions {
            display: flex; gap: 10px; padding: 0 16px 32px;
        }
        .success-action-btn {
            flex: 1; padding: 12px; border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-weight: 600;
            cursor: pointer; text-align: center; border: none; transition: transform 0.15s;
        }
        .success-action-btn:active { transform: scale(0.97); }
        .success-action-btn.outline {
            background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);
        }
        .success-action-btn.primary {
            background: var(--primary); color: #fff;
        }

        /* 我的店铺 */
        .merchant-manage-shop {
            margin: 16px; padding: 16px; background: var(--bg-secondary); border-radius: var(--radius-lg);
            display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.15s;
        }
        .merchant-manage-shop:active { background: var(--border); }
        .merchant-manage-shop-icon {
            width: 44px; height: 44px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; font-size: var(--font-size-xl); color: #fff;
        }
        .merchant-manage-shop-name { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); }
        .merchant-manage-shop-status { font-size: var(--font-size-xs); color: var(--success); }

        /* 订单列表 */
        .order-status-tabs {
            display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch;
            scrollbar-width: none; background: var(--bg-primary); position: sticky; top: 58px; z-index: 90;
        }
        .order-status-tabs::-webkit-scrollbar { display: none; }
        .order-status-tab {
            flex: 0 0 auto; padding: 7px 16px; border-radius: var(--radius-xl); font-size: var(--font-size-sm); font-weight: 500;
            background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
        }
        .order-status-tab.active { background: var(--primary); color: #fff; }
        .order-card {
            margin: 0 16px 12px; padding: 14px; background: var(--bg-primary); border-radius: var(--radius-lg);
            }
        .order-card-header {
            display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
        }
        .order-card-id { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .order-card-status { font-size: var(--font-size-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--radius); }
        .order-card-status.pending { background: var(--warning-light); color: var(--warning); }
        .order-card-status.paid { background: var(--info-light); color: var(--info); }
        .order-card-status.verified { background: #E8F8E8; color: var(--success); }
        .order-card-status.cancelled { background: var(--bg-secondary); color: var(--text-tertiary); }
        .order-card-product {
            display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
        }
        .order-card-product-icon {
            width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; font-size: var(--font-size-base); color: #fff;
        }
        .order-card-product-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .order-card-product-price { font-size: var(--font-size-xs); color: var(--text-secondary); }
        .order-card-info {
            display: flex; gap: 16px; font-size: var(--font-size-xs); color: var(--text-tertiary); margin-bottom: 10px;
        }
        .order-card-actions {
            display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--bg-secondary);
        }
        .order-action-btn {
            flex: 1; padding: 8px; border-radius: var(--radius); border: none; font-size: var(--font-size-sm); font-weight: 600;
            cursor: pointer; transition: transform 0.15s;
        }
        .order-action-btn:active { transform: scale(0.96); }
        .order-action-btn.verify { background: #E8F8E8; color: var(--success); }
        .order-action-btn.contact { background: var(--info-light); color: var(--info); }
        .order-action-btn.cancel { background: var(--danger-light); color: var(--danger); }

        /* 关怀模式适配 */
        .elder-mode .product-card-name { font-size: var(--font-size-lg); }
        .elder-mode .product-card-price { font-size: var(--font-size-xl); }
        .elder-mode .product-detail-name { font-size: var(--font-size-xxl); }
        .elder-mode .product-detail-price { font-size: 32px; }
        .elder-mode .delivery-name { font-size: var(--font-size-lg); }
        .elder-mode .submit-btn { font-size: var(--font-size-lg); padding: 16px; }
        .elder-mode .payment-amount-value { font-size: 48px; }

        /* Focus visible - 无障碍焦点样式 */
        :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
        :focus:not(:focus-visible) { outline: none; }
        button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

        /* 减少动画偏好 */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
            .carousel-slide { transition-duration: 0.6s !important; }
        }

        /* ========== 亲子打卡：全局样式 ========== */
        .parent-kid-home { padding: 0 0 24px; }

        /* 减弱动画偏好适配 */
        @media (prefers-reduced-motion: reduce) {
            .pk-agreement-card,
            .pk-checkin-btn,
            .pk-btn-primary,
            .pk-checkin-big-btn,
            .pk-mood-btn,
            .pk-type-option,
            .pk-role-option,
            .pk-day-chip,
            .pk-toggle-slider,
            .pk-toggle-slider::before,
            .pk-agreement-progress-fill,
            .pk-medals-progress-bar,
            .pk-tab-item i,
            .pk-checkin-feed-card,
            .home-quick-checkin-item {
                transition: none !important;
                animation: none !important;
            }
        }

        /* 首页今日待打卡快捷小组件（P0优化） */
        .home-quick-checkin {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        .home-quick-checkin > .home-card-more-btn { margin-bottom: 6px; }
        .home-quick-checkin-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 16px 10px;
            cursor: pointer;
            touch-action: manipulation;
        }
        .home-quick-checkin-title {
            font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
            display: flex; align-items: center; gap: 6px;
        }
        .home-quick-checkin-title i { color: var(--primary); }
        .home-quick-checkin-more {
            font-size: var(--font-size-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: 2px;
        }
        .home-quick-checkin-list { padding: 0 4px 8px; }
        .home-quick-checkin-item {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 12px; margin-bottom: 4px;
            background: var(--bg-secondary); border-radius: var(--radius);
            touch-action: manipulation;
            transition: transform 0.15s ease;
        }
        .home-quick-checkin-item:last-child { margin-bottom: 0; }
        .home-quick-checkin-item:active { transform: scale(0.98); }
        .home-quick-checkin-icon {
            width: 36px; height: 36px; border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-base); flex-shrink: 0;
        }
        .home-quick-checkin-info { flex: 1; min-width: 0; }
        .home-quick-checkin-name {
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .home-quick-checkin-progress { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .home-quick-checkin-btn {
            padding: 5px 14px; border-radius: var(--radius); border: none;
            font-size: var(--font-size-sm); font-weight: 600; color: #fff;
            background: var(--primary); cursor: pointer; flex-shrink: 0;
            transition: background-color 0.15s ease, transform 0.15s ease;
            touch-action: manipulation;
        }
        .home-quick-checkin-btn:active { transform: scale(0.95); }
        .home-quick-checkin-btn.checked { background: var(--bg-tertiary); color: var(--text-tertiary); cursor: default; border: 1px solid #999; }
        .pk-stats-bar {
            display: flex; justify-content: space-around; padding: 16px; margin: 12px 16px 0;
            background: var(--bg-primary); border-radius: var(--radius-lg);
            }

        /* 孩子切换器 */
        .pk-child-avatar-chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 14px; border-radius: 20px;
            border: 2px solid var(--border); background: var(--bg-primary);
            cursor: pointer; transition: all .2s; white-space: nowrap;
            font-size: 13px; font-weight: 500;
        }
        .pk-child-avatar-chip.active { border-color: var(--primary); background: rgba(255,109,59,0.08); }
        .pk-child-avatar-chip .chip-avatar { width: 28px; height: 28px; border-radius: 50%;
            background: #FFF0E8; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
        .pk-child-avatar-chip .chip-name { color: var(--text-primary); }
        .pk-child-avatar-chip .chip-badge {
            font-size: 12px; padding: 2px 6px; border-radius: var(--radius-sm);
            background: var(--primary); color: #fff; font-weight: 600; display: none;
        }
        .pk-child-avatar-chip.active .chip-badge { display: inline-block; }

        /* 鼓励轮播图 */
        .pk-banner-carousel {
            position: relative; width:calc(100% - 32px); height:140px; overflow:hidden;
            border-radius: var(--radius-lg); margin:12px 16px 0; box-sizing:border-box;
        }
        .pk-banner-track {
            display:flex; width:100%; height:100%; transition:transform 0.5s ease;
        }
        .pk-banner-slide {
            flex-shrink:0; width:100%; height:100%; position:relative;
            overflow:hidden; border-radius: var(--radius-lg);
        }
        .pk-banner-slide img {
            width:100%; height:100%; object-fit:cover;
        }
        .pk-banner-overlay {
            position:absolute; bottom:0; left:0; right:0; padding:20px 16px 14px;
            background:linear-gradient(transparent, rgba(0,0,0,0.55));
            display:flex; flex-direction:column; justify-content:flex-end;
        }
        .pk-banner-slogan {
            font-size: var(--font-size-lg); font-weight:800; color:#fff; line-height:1.3;
            text-shadow:0 1px 3px rgba(0,0,0,0.3);
        }
        .pk-banner-sub {
            font-size: var(--font-size-xs); color:rgba(255,255,255,0.85); margin-top:4px;
        }
        .pk-banner-dots {
            position:absolute; bottom:8px; right:14px; display:flex; gap:5px;
        }
        .pk-banner-dot {
            width:6px; height:6px; border-radius:50%;
            background:rgba(255,255,255,0.45); transition: opacity, transform 0.25s;
        }
        .pk-banner-dot.active {
            background: var(--bg-primary); width:18px; border-radius:3px;
        }
        .pk-stat-item { text-align: center; cursor: pointer; background: none; border: none; outline: none; }
        .pk-stat-num { font-size: var(--font-size-xxl); font-weight: 800; color: var(--primary); line-height: 1; }
        .pk-stat-label { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; }

        .pk-section { margin-top: 16px; padding: 0 16px; }
        #pkTabAgreement > .pk-section:last-child { padding-bottom: 0; }
        #pkTabAgreement { padding-bottom: 0 !important; }
        #pkContent { padding-bottom: 0 !important; }
        .pk-section-header {
            display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
        }
        .pk-section-header h3 { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); }
        .pk-section-more { font-size: var(--font-size-xs); color: var(--text-tertiary); cursor: pointer; }
        .pk-section-date { font-size: var(--font-size-xs); color: var(--text-tertiary); }

        /* 打卡卡片 */
        .pk-agreement-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px;
            cursor: pointer; transition: transform 0.15s ease;
            touch-action: manipulation;
        }
        .pk-agreement-card:active { transform: scale(0.98); }
        .pk-agreement-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .pk-agreement-icon {
            width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-lg); flex-shrink: 0;
        }
        .pk-agreement-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); flex: 1; }
        .pk-agreement-status {
            font-size: var(--font-size-xs); padding: 3px 10px; border-radius: var(--radius); font-weight: 600;
        }
        .pk-agreement-status.active { background: #E8F8E8; color: var(--success); }
        .pk-agreement-status.completed { background: var(--info-light); color: var(--info); }
        .pk-agreement-status.pending { background: var(--warning-light); color: var(--warning); }
        .pk-agreement-progress { margin-bottom: 8px; }
        .pk-agreement-progress-bar {
            height: 6px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden;
        }
        .pk-agreement-progress-fill {
            height: 100%; border-radius: 3px; transition: width 0.3s;
            background: rgba(255,109,59,0.5);
        }
        .pk-agreement-meta {
            display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--text-tertiary);
        }
        .pk-agreement-checkin-btn {
            display: inline-flex; align-items: center; gap: 4px;
            background: var(--primary); color: #fff; padding: 4px 12px; border-radius: var(--radius);
            font-size: var(--font-size-xs); font-weight: 600; cursor: pointer; border: none;
        }
        .pk-agreement-checkin-btn.checked { background: var(--success); }

        /* 打卡项 */
        .pk-checkin-item {
            display: flex; align-items: center; gap: 12px; padding: 12px 16px;
            background: var(--bg-primary); border-radius: var(--radius-lg); margin-bottom: 8px;
            box-shadow: 0 1px 6px rgba(0,0,0,0.04);
        }
        .pk-checkin-icon {
            width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-lg); flex-shrink: 0;
        }
        .pk-checkin-info { flex: 1; }
        .pk-checkin-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .pk-checkin-sub { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .pk-checkin-btn {
            padding: 6px 16px; border-radius: var(--radius); border: none; font-size: var(--font-size-sm); font-weight: 600;
            background: var(--primary); color: #fff; cursor: pointer; transition: transform 0.15s;
        }
        .pk-checkin-btn:active { transform: scale(0.95); }
        .pk-checkin-btn.checked { background: var(--bg-tertiary); color: var(--text-tertiary); }

        /* 今日打卡统一列表卡片 */
        .pk-checkin-unified-item {
            display: flex; flex-direction: column;
            background: var(--bg-primary); border-radius: var(--radius-lg); margin-bottom: 10px;
            box-shadow: 0 1px 6px rgba(0,0,0,0.04);
            padding: 14px 0 10px; cursor: pointer;
            touch-action: manipulation; transition: transform 0.15s ease;
        }
        .pk-checkin-unified-item:active { transform: scale(0.98); }
        .pk-checkin-unified-header {
            display: flex; align-items: center; gap: 12px; padding: 0 16px;
        }
        /* 新建打卡入口卡片 */
        .pk-checkin-add-card {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            padding: 16px; border-radius: var(--radius-lg);
            border: 2px solid var(--primary); color: var(--primary);
            font-size: var(--font-size-base); font-weight: 600; cursor: pointer;
            background: var(--bg-primary); transition: opacity, transform 0.2s ease;
            touch-action: manipulation;
            width: calc(100% - 32px); box-sizing: border-box;
            margin: 12px 16px 0;
        }
        .pk-checkin-add-card:active { background: rgba(255,109,59,0.06); }
        .pk-checkin-add-card i { font-size: var(--font-size-sm); }

        /* 空状态 */
        .pk-create-form { padding: 16px; }
        .pk-form-group { margin-bottom: 20px; }
        .pk-form-label {
            display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 8px;
        }
        .pk-form-label.flex-between { display: flex; justify-content: space-between; align-items: center; }
        .pk-form-input, .pk-form-textarea {
            width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--bg-secondary);
            background: var(--bg-secondary); font-size: var(--font-size-sm); color: var(--text-primary);
            outline: none; transition: border-color 0.2s ease; box-sizing: border-box;
        }
        .pk-form-input:focus-visible, .pk-form-textarea:focus-visible {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(255,109,59,0.15);
        }
        .pk-form-textarea { resize: vertical; min-height: 80px; }
        .pk-form-hint { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; }
        .pk-form-actions { padding-top: 8px; }

        /* 新建打卡 - 模板快捷选择 */
        .pk-create-tpl-section {
            margin-bottom: 4px;
        }
        .pk-create-tpl-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 4px 8px;
        }
        .pk-create-tpl-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary); }
        .pk-create-tpl-more { font-size: var(--font-size-xs); color: var(--primary); cursor: pointer; font-weight: 600; }
        .pk-create-tpl-tabs {
            display: flex; gap: 0; margin-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }
        .pk-create-tpl-tab {
            flex: 1; text-align: center; padding: 8px 0; font-size: var(--font-size-sm); font-weight: 600;
            color: var(--text-tertiary); cursor: pointer; position: relative;
            transition: color 0.2s;
        }
        .pk-create-tpl-tab.active {
            color: var(--primary);
        }
        .pk-create-tpl-tab.active::after {
            content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%;
            height: 2px; background: var(--primary); border-radius: 1px;
        }
        .pk-create-tpl-list {
            display: flex; flex-direction: column; gap: 6px; max-height: 220px;
            overflow-y: auto; padding-right: 4px;
        }
        .pk-create-tpl-item {
            display: flex; align-items: center; gap: 10px; padding: 10px 12px;
            border-radius: var(--radius); background: var(--bg-secondary); cursor: pointer;
            transition: opacity, transform 0.15s; border: 2px solid transparent;
        }
        .pk-create-tpl-item:hover { background: var(--bg-primary); border-color: var(--border); }
        .pk-create-tpl-item.selected {
            border-color: var(--primary); background: var(--primary-alpha);
        }
        .pk-create-tpl-icon {
            width: 36px; height: 36px; border-radius: var(--radius); display: flex;
            align-items: center; justify-content: center; font-size: var(--font-size-lg); flex-shrink: 0;
        }
        .pk-create-tpl-info { flex: 1; min-width: 0; }
        .pk-create-tpl-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pk-create-tpl-desc { font-size: var(--font-size-xs); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
        .pk-create-tpl-days { font-size: var(--font-size-xs); color: var(--primary); font-weight: 700; white-space: nowrap; }
        .pk-create-divider {
            text-align: center; margin: 16px 0 12px; position: relative;
        }
        .pk-create-divider::before {
            content: ''; position: absolute; top: 50%; left: 0; right: 0;
            height: 1px; background: var(--border);
        }
        .pk-create-divider span {
            position: relative; background: var(--bg-primary); padding: 0 12px;
            font-size: var(--font-size-xs); color: var(--text-tertiary);
        }
        .pk-btn-primary {
            width: 100%; padding: 14px; border: none; border-radius: var(--radius-lg);
            background: var(--primary); color: #fff; font-size: var(--font-size-base); font-weight: 700;
            cursor: pointer; box-shadow: 0 4px 16px rgba(255,109,59,0.3); transition: transform 0.15s;
        }
        .pk-btn-primary:active { transform: scale(0.97); }

        /* 类型选择器 */
        .pk-type-selector, .pk-role-selector, .pk-days-selector {
            display: flex; flex-wrap: wrap; gap: 8px;
        }
        .pk-type-option, .pk-role-option, .pk-day-chip {
            display: flex; align-items: center; gap: 6px; padding: 10px 14px;
            background: var(--bg-secondary); border-radius: var(--radius); font-size: var(--font-size-sm);
            color: var(--text-secondary); cursor: pointer; border: 2px solid transparent;
            transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
            touch-action: manipulation;
        }
        .pk-type-option.active, .pk-role-option.active, .pk-day-chip.active {
            border-color: var(--primary); background: var(--warning-light); color: var(--primary); font-weight: 600;
        }
        .pk-role-avatar {
            width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-sm);
        }

        /* 奖励设置 */
        .pk-reward-section {
            background: var(--bg-secondary); border-radius: var(--radius); padding: 14px;
        }
        .pk-reward-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 8px 0;
        }
        .pk-reward-row + .pk-reward-row {
            border-top: 1px solid var(--bg-primary);
        }
        .pk-reward-label {
            font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary);
        }
        .pk-reward-select {
            padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--bg-tertiary);
            background: var(--bg-primary); font-size: var(--font-size-sm); color: var(--text-secondary);
            min-width: 140px; cursor: pointer; outline: none;
        }
        .pk-reward-select:focus { border-color: var(--primary); }

        /* Toggle 开关 */
        .pk-toggle {
            position: relative; display: inline-block; width: 48px; height: 28px;
        }
        .pk-toggle input { opacity: 0; width: 0; height: 0; }
        .pk-toggle-slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background: #E0E0E0; border-radius: 28px;
            transition: background-color 0.3s ease;
        }
        .pk-toggle-slider::before {
            content: ''; position: absolute; height: 22px; width: 22px; left: 3px; bottom: 3px;
            background: var(--bg-primary); border-radius: 50%;
            transition: transform 0.3s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .pk-toggle input:checked + .pk-toggle-slider { background: var(--primary); }
        .pk-toggle input:checked + .pk-toggle-slider::before { transform: translateX(20px); }

        /* 打卡详情页 */
        .pk-detail-header {
            padding: 20px 16px; text-align: center; background: var(--bg-primary);
        }
        .pk-detail-icon {
            width: 64px; height: 64px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center;
            font-size: 28px; margin: 0 auto 12px;
        }
        .pk-detail-title { font-size: var(--font-size-xl); font-weight: 800; color: var(--text-primary); }
        .pk-detail-meta { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-top: 6px; }
        .pk-detail-stats {
            display: flex; justify-content: space-around; padding: 16px; margin: 0 16px 16px;
            background: var(--bg-secondary); border-radius: var(--radius-lg);
        }
        .pk-detail-stat { text-align: center; }
        .pk-detail-stat-num { font-size: var(--font-size-xxl); font-weight: 800; color: var(--text-primary); }
        .pk-detail-stat-label { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .pk-detail-section { padding: 0 16px; margin-bottom: 16px; }
        .pk-detail-section-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
        .pk-calendar-grid {
            display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
        }
        .pk-calendar-day {
            aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
            border-radius: var(--radius); font-size: var(--font-size-sm); font-weight: 600; background: var(--bg-secondary);
            color: var(--text-secondary);
        }
        .pk-calendar-day.checked { background: var(--success); color: #fff; }
        .pk-calendar-day.missed { background: var(--danger); color: #fff; }
        .pk-calendar-day.future { background: var(--bg-secondary); color: var(--text-tertiary); opacity: 0.5; }
        .pk-calendar-day.today { border: 2px solid var(--primary); }
        .pk-calendar-weekday {
            text-align: center; font-size: var(--font-size-xs); color: var(--text-tertiary); padding: 4px 0;
        }

        /* 打卡页面 */
        .pk-checkin-page { padding: 16px; }
        .pk-checkin-card {
            background: var(--bg-primary); border-radius: var(--radius-xl); padding: 24px; text-align: center;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 20px;
        }
        .pk-checkin-emoji { font-size: 48px; margin-bottom: 8px; }
        .pk-checkin-status { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); }
        .pk-checkin-streak { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-top: 4px; }
        .pk-checkin-big-btn {
            width: 100%; padding: 16px; border: none; border-radius: var(--radius-lg); font-size: var(--font-size-lg); font-weight: 700;
            background: var(--primary); color: #fff; cursor: pointer; margin-top: 16px;
            box-shadow: 0 4px 16px rgba(255,109,59,0.3); transition: transform 0.15s;
        }
        .pk-checkin-big-btn:active { transform: scale(0.97); }
        .pk-checkin-big-btn.checked { background: var(--success); box-shadow: 0 4px 16px rgba(52,199,89,0.3); }
        .pk-mood-selector {
            display: flex; justify-content: center; gap: 12px; margin: 16px 0;
        }
        .pk-mood-btn {
            width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--bg-secondary);
            background: var(--bg-secondary); font-size: var(--font-size-xxl); cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
            touch-action: manipulation;
        }
        .pk-mood-btn.active { border-color: var(--primary); background: var(--warning-light); transform: scale(1.1); }
        .pk-checkin-note {
            width: 100%; padding: 12px; border-radius: var(--radius); border: 1px solid var(--bg-secondary);
            background: var(--bg-secondary); font-size: var(--font-size-sm); min-height: 80px; resize: vertical;
            outline: none; box-sizing: border-box;
            transition: border-color 0.2s ease;
        }
        .pk-checkin-note:focus-visible {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(255,109,59,0.15);
        }
        /* 心愿 */
        .pk-wish-page { padding-bottom: 80px; }
        .pk-wish-bottom-bar {
            position: fixed; bottom: 60px; left: 0; right: 0;
            padding: 4px 16px; background: var(--bg-primary);
            box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
            z-index: 10;
            display: flex; justify-content: center;
        }
        .pk-wish-add-btn {
            width: 100%;
        }
        .pk-wish-tabs {
            display: flex; justify-content: center; gap: 32px; padding: 0 16px; border-bottom: 1px solid var(--bg-secondary);
        }
        .pk-wish-tab {
            padding: 12px 16px; border-radius: 0; font-size: var(--font-size-base); font-weight: 600;
            background: transparent; color: var(--text-tertiary); cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: color 0.15s ease, border-color 0.15s ease;
        }
        .pk-wish-tab.active {
            background: transparent; color: var(--primary);
            border-bottom-color: var(--primary);
        }
        .pk-ranking-tab {
            padding: 6px 16px; border-radius: var(--radius-xl); font-size: var(--font-size-sm); font-weight: 500;
            background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer;
        }
        .pk-ranking-tab.active {
            background: var(--primary); color: #fff;
        }
        .pk-wish-card {
            display: flex; align-items: center; gap: 12px; padding: 14px 16px;
            background: var(--bg-primary); margin: 0 16px 8px; border-radius: var(--radius-lg);
            box-shadow: 0 1px 6px rgba(0,0,0,0.04);
        }
        .pk-wish-icon { font-size: var(--font-size-xxl); }
        .pk-wish-info { flex: 1; }
        .pk-wish-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .pk-wish-points { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .pk-wish-btn {
            padding: 6px 14px; border-radius: var(--radius); border: none; font-size: var(--font-size-xs); font-weight: 600;
            background: var(--primary); color: #fff; cursor: pointer;
        }
        .pk-wish-btn.completed { background: var(--success); }

        /* 心愿类型选择器 */
        .pk-wish-type-selector {
            display: flex; gap: 8px;
        }
        .pk-wish-type-chip {
            flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
            padding: 12px 8px; border-radius: var(--radius); border: 2px solid var(--border);
            background: var(--bg-primary); cursor: pointer; transition: opacity, transform 0.2s;
        }
        .pk-wish-type-chip.active {
            border-color: var(--primary); background: var(--primary-alpha);
        }
        .pk-wish-type-icon { font-size: var(--font-size-xxl); }
        .pk-wish-type-name { font-size: var(--font-size-xs); color: var(--text-secondary); font-weight: 600; }
        .pk-wish-type-chip.active .pk-wish-type-name { color: var(--primary); }

        /* 关联打卡选择列表 */
        .pk-agreement-option {
            display: flex; align-items: center; gap: 10px; padding: 12px 14px;
            margin-bottom: 8px; border-radius: var(--radius); border: 2px solid var(--border);
            background: var(--bg-primary); cursor: pointer; transition: opacity, transform 0.2s;
        }
        .pk-agreement-option.active { border-color: var(--primary); background: var(--primary-alpha); }
        .pk-agreement-option-icon { width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-base); }
        .pk-agreement-option-info { flex: 1; }
        .pk-agreement-option-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .pk-agreement-option-desc { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }

        /* 心愿卡片 - 关联打卡型副标题 */
        .pk-wish-linked-info { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
        .pk-wish-linked-progress { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .pk-wish-status-tag {
            font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-sm); font-weight: 600;
        }
        .pk-wish-status-pending { background: var(--bg-tertiary); color: #888; }
        .pk-wish-status-active { background: #E3F2FD; color: #1976D2; }

        /* 发现页 — 推荐模板卡片 */
        .pk-template-card {
            background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
            cursor: pointer; transition: transform 0.15s ease;
            border-radius: var(--radius-lg); padding: 16px; margin-bottom: 10px;
            display: flex; align-items: center; gap: 12px;
            border: 1px solid var(--border);
        }
        .pk-template-card:active { transform: scale(0.98); }
        .pk-template-icon {
            width: 48px; height: 48px; border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-xxl); flex-shrink: 0;
        }
        .pk-template-info { flex: 1; min-width: 0; }
        .pk-template-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
        .pk-template-desc { font-size: var(--font-size-xs); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .pk-template-use {
            padding: 6px 14px; border-radius: var(--radius-lg); border: none;
            background: var(--primary); color: #fff; font-size: var(--font-size-xs); font-weight: 600;
            cursor: pointer; flex-shrink: 0; white-space: nowrap;
        }

        /* 发现页 — 邻居动态 */
        .pk-moment-card {
            background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 14px;
            margin-bottom: 10px; border: 1px solid var(--border);
        }
        .pk-moment-header {
            display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
        }
        .pk-moment-avatar {
            width: 32px; height: 32px; border-radius: 50%;
            background: var(--primary-light, #e8f4fd); color: var(--primary);
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-sm); font-weight: 700;
        }
        .pk-moment-user { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .pk-moment-time { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-left: auto; }
        .pk-moment-body { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
        .pk-moment-tag {
            display: inline-block; padding: 3px 10px; border-radius: var(--radius);
            background: rgba(255,149,0,0.1); color: var(--warning); font-size: var(--font-size-xs); font-weight: 600;
        }

        /* 模板库页面 */
        .pk-templates-page { padding: 16px; padding-bottom: 80px; }
        .pk-templates-tabs {
            display: flex; gap: 0; margin-bottom: 16px;
            border-bottom: 1px solid var(--bg-secondary);
        }
        .pk-template-tab {
            flex: 1; padding: 12px 0; border-radius: 0;
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-tertiary);
            background: none; cursor: pointer;
            transition: opacity, transform 0.2s ease; white-space: nowrap;
            text-align: center; position: relative;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }
        .pk-template-tab.active {
            color: var(--primary); font-weight: 700;
            border-bottom-color: var(--primary);
        }
        .pk-template-tab:not(.active):active { color: var(--text-secondary); }

        /* 模板列表项 */
        .pk-tpl-item {
            background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 16px;
            margin-bottom: 12px; border: 1px solid var(--border);
            transition: transform 0.15s ease;
        }
        .pk-tpl-item:active { transform: scale(0.98); }
        .pk-tpl-header {
            display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
        }
        .pk-tpl-icon {
            width: 44px; height: 44px; border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-xxl); flex-shrink: 0;
        }
        .pk-tpl-title-area { flex: 1; min-width: 0; }
        .pk-tpl-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
        .pk-tpl-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; }
        .pk-tpl-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
        .pk-tpl-footer {
            display: flex; align-items: center; justify-content: space-between;
            padding-top: 10px; border-top: 1px solid var(--border);
        }
        .pk-tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
        .pk-tpl-tag {
            font-size: var(--font-size-xs); padding: 3px 10px; border-radius: var(--radius);
            background: rgba(0,0,0,0.04); color: var(--text-tertiary); font-weight: 500;
        }
        .pk-tpl-use-btn {
            padding: 8px 20px; border-radius: var(--radius-lg); border: none;
            background: var(--primary); color: #fff; font-size: var(--font-size-sm); font-weight: 600;
            cursor: pointer; white-space: nowrap; transition: opacity 0.15s ease;
        }
        .pk-tpl-use-btn:active { opacity: 0.8; }

/* 全部打卡页面 */
        .pk-allcheckin-tabs {
            display: flex; gap: 0; margin: 18px 16px 12px;
            background: var(--bg-secondary); border-radius: var(--radius); padding: 3px;
        }
        .pk-allcheckin-tab {
            flex: 1; text-align: center; padding: 8px 0; font-size: var(--font-size-sm);
            font-weight: 500; color: var(--text-tertiary); border-radius: var(--radius-sm);
            cursor: pointer; transition: opacity, transform 0.2s;
        }
        .pk-allcheckin-tab.active {
            background: var(--bg-primary); color: var(--primary); font-weight: 600;
            }
        .pk-history-item {
            display: flex; align-items: center; gap: 12px; padding: 14px 16px;
            margin: 0 16px 8px; background: var(--bg-primary); border-radius: var(--radius-lg);
            box-shadow: 0 1px 3px rgba(0,0,0,0.06); cursor: pointer;
        }
        .pk-history-icon {
            width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-lg); flex-shrink: 0;
        }
        .pk-history-info { flex: 1; }
        .pk-history-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .pk-history-date { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .pk-history-status {
            font-size: var(--font-size-xs); padding: 3px 10px; border-radius: var(--radius); font-weight: 600;
        }
        .pk-history-status.active { background: #E8F8E8; color: var(--success); }
        .pk-history-status.completed { background: var(--bg-tertiary); color: #888; }
        .pk-history-status.deleted { background: var(--danger-light); color: var(--text-tertiary); }
        #page-parent-kid-history { background: var(--bg-tertiary); }

        /* ========== 公开打卡打卡卡片（亲子信息流） ========== */
        .pk-checkin-feed-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); margin-bottom: 12px;
            overflow: hidden; cursor: pointer;
            transition: transform 0.15s ease;
            touch-action: manipulation;
        }
        .pk-checkin-feed-card:active { transform: scale(0.98); }
        /* 打卡卡片头部：打卡标签（右上角） */
        .pk-checkin-feed-header {
            display: flex; align-items: center; justify-content: flex-end; padding: 10px 14px 6px;
        }
        .pk-checkin-feed-badge {
            font-size: var(--font-size-xs); padding: 3px 10px; border-radius: var(--radius); background: var(--warning-light); color: var(--warning); font-weight: 600;
        }
        .pk-checkin-feed-body { padding: 0 14px 10px; }
        .pk-checkin-feed-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
        .pk-checkin-feed-agreement-title {
            display: inline-block; font-size: var(--font-size-xs); padding: 3px 10px; border-radius: var(--radius);
            background: var(--warning-light); color: var(--warning); font-weight: 600; margin-bottom: 8px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
        }
        .pk-checkin-feed-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
        /* 底部：左侧头像昵称，右侧点赞评论 */
        .pk-checkin-feed-footer {
            display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
            border-top: 1px solid var(--bg-secondary);
        }
        .pk-checkin-feed-userinfo {
            display: flex; align-items: center; gap: 8px;
        }
        .pk-checkin-feed-avatar {
            width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
        }
        .pk-checkin-feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .pk-checkin-feed-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .pk-checkin-feed-actions {
            display: flex; align-items: center; gap: 14px;
        }
        .pk-checkin-feed-action {
            display: flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); color: var(--text-tertiary);
            cursor: pointer; user-select: none;
        }
        .pk-checkin-feed-action.active { color: var(--danger); }
        .pk-checkin-feed-action i { font-size: var(--font-size-base); }

        /* ========== 亲子打卡底部Tab栏（与全局底部导航融合） ========== */
        .page-with-pk-tab { padding-bottom: 70px !important; }
        .page-with-pk-tab.active { display: flex !important; flex-direction: column; }
        .page-with-pk-tab .page-header { flex-shrink: 0; }
        .pk-content { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg-tertiary); }
        .pk-tab-content { display: none; }
        .pk-tab-content.active { display: block; }
        .pk-tab-pad { padding: 12px 16px 24px; }
        .pk-tab-bar {
            display: flex; align-items: center; justify-content: space-around;
            padding: 6px 0 calc(6px + env(safe-area-inset-bottom,0));
            background: var(--bg-primary);
            border-top: 1px solid var(--border-light);
            flex-shrink: 0;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: auto;
            z-index: var(--z-nav);
        }
        .pk-tab-item {
            display: flex; flex-direction: column; align-items: center; gap: 2px;
            padding: 4px 0; cursor: pointer; min-width: 64px; user-select: none;
            color: var(--text-tertiary); opacity: 0.55;
            font-size: var(--font-size-xs); transition: color 0.2s ease, opacity 0.2s ease; position: relative;
            background: none; border: none; outline: none;
        }
        .pk-tab-item i { font-size: var(--font-size-xl); transition: transform 0.2s ease; }
        .pk-tab-item.active { color: var(--primary); opacity: 1; }
        .pk-tab-item.active i { transform: scale(1.05); }

        /* 打卡详情页 */
        .pk-checkin-detail-page { padding-bottom: 24px; }
        .pk-checkin-detail-header {
            padding: 20px 16px; text-align: center; background: var(--bg-primary);
        }
        .pk-checkin-detail-avatar {
            width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin: 0 auto 10px;
        }
        .pk-checkin-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .pk-checkin-detail-name { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); }
        .pk-checkin-detail-agreement { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-top: 4px; }
        .pk-checkin-detail-card {
            margin: 0 16px 16px; padding: 16px; background: var(--bg-primary); border-radius: var(--radius-lg);
            }
        .pk-checkin-detail-mood { font-size: 48px; text-align: center; margin-bottom: 8px; }
        .pk-checkin-detail-note {
            font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; text-align: center;
            padding: 8px 0;
        }
        .pk-checkin-detail-stats {
            display: flex; justify-content: space-around; padding: 12px 0; margin-top: 12px;
            border-top: 1px solid var(--bg-secondary);
        }
        .pk-checkin-detail-stat { text-align: center; }
        .pk-checkin-detail-stat-num { font-size: var(--font-size-xl); font-weight: 800; color: var(--primary); }
        .pk-checkin-detail-stat-label { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        /* 打卡详情 - 大心形点赞区 */
        .pk-detail-like-area {
            display: flex; flex-direction: column; align-items: center;
            padding: 24px 0 16px; margin-top: 8px;
            border-top: 1px solid var(--bg-secondary);
        }
        .pk-detail-like-btn {
            display: flex; flex-direction: column; align-items: center;
            cursor: pointer; padding: 8px 32px; border-radius: var(--radius-xl);
            transition: opacity, transform 0.2s ease; user-select: none; -webkit-tap-highlight-color: transparent;
        }
        .pk-detail-like-btn:active { transform: scale(0.92); }
        .pk-detail-like-icon {
            font-size: 40px; transition: opacity, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            color: var(--danger); line-height: 1;
        }
        .pk-detail-like-btn.liked .pk-detail-like-icon {
            font-size: 48px; color: var(--danger);
            animation: pkLikePop 0.4s ease;
        }
        @keyframes pkLikePop {
            0% { transform: scale(1); }
            30% { transform: scale(1.35); }
            60% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }
        @keyframes pkLikeFloatUp {
            0% { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(-40px) scale(1.5); }
        }
        .pk-detail-like-count {
            font-size: var(--font-size-xxl); font-weight: 800; color: var(--text-secondary);
            margin-top: 4px; line-height: 1.2; transition: color 0.2s;
        }
        .pk-detail-like-btn.liked .pk-detail-like-count { color: var(--danger); }
        .pk-detail-like-hint {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px;
        }

        /* 快捷评语胶囊 */
        .pk-quick-replies {
            display: flex; flex-wrap: wrap; justify-content: center;
            gap: 8px; padding: 16px 20px 8px;
        }
        .pk-quick-reply-pill {
            padding: 7px 16px; border-radius: var(--radius-xl); font-size: var(--font-size-sm); font-weight: 500;
            background: var(--bg-secondary); color: var(--text-secondary);
            cursor: pointer; border: none; transition: opacity, transform 0.15s ease;
            user-select: none; -webkit-tap-highlight-color: transparent;
        }
        .pk-quick-reply-pill:active { transform: scale(0.93); }
        .pk-quick-reply-pill.sent {
            background: var(--primary); color: #fff;
        }

        /* 点赞用户列表 - 循环滚动 */
        .pk-detail-likers {
            display: flex; align-items: center;
            gap: 8px; padding: 8px 0 12px; overflow: hidden;
            width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
        }
        .pk-detail-likers-inner {
            display: flex; align-items: center; gap: 8px;
            animation: pkLikersScroll 12s linear infinite;
            will-change: transform;
        }
        .pk-detail-likers:hover .pk-detail-likers-inner {
            animation-play-state: paused;
        }
        @keyframes pkLikersScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .pk-detail-liker {
            display: flex; align-items: center; gap: 5px;
            padding: 4px 12px 4px 4px; border-radius: var(--radius-lg);
            background: var(--bg-secondary); font-size: var(--font-size-xs); color: var(--text-secondary);
            white-space: nowrap; flex-shrink: 0;
        }
        .pk-detail-liker-avatar {
            width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
            border: 1.5px solid #fff; flex-shrink: 0;
        }
        .pk-detail-liker-avatar img { width: 100%; height: 100%; object-fit: cover; }

        /* ==================== 抖音风格分类详情页 ==================== */
        .dy-detail-page { flex-direction: column; height: 100vh; height: 100dvh; background: var(--bg-primary); overflow: hidden; padding-bottom: 0 !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; min-height: 0; }
        .page.active.dy-detail-page { display: flex !important; }

        /* 顶部栏：返回 + 用户信息 + 关注 + 搜索 */
        .dy-detail-topbar {
            display: flex; align-items: center; gap: 10px;
            padding: var(--statusbar-h, 44px) 12px 10px; background: var(--bg-primary);
            flex-shrink: 0; z-index: 10;
            border-bottom: 1px solid var(--border);
        }
        .dy-detail-topbar .back-btn {
            flex-shrink: 0; width: 32px; height: 32px; min-height: auto; padding: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; color: var(--text-primary);
            background: transparent; border: none; outline: none; box-shadow: none; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .dy-detail-topbar .back-btn:active { opacity: 0.6; }
        .dy-topbar-user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
        .dy-topbar-avatar {
            width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
            border: 1.5px solid var(--border); flex-shrink: 0;
        }
        .dy-topbar-name {
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .dy-topbar-name i { font-size: 12px; color: var(--primary); margin-left: 2px; }
        .dy-follow-btn {
            flex-shrink: 0; padding: 5px 14px; border-radius: var(--radius-xl);
            background: var(--primary); color: #fff; border: none;
            font-size: var(--font-size-xs); font-weight: 600; cursor: pointer;
            transition: opacity 0.2s; -webkit-tap-highlight-color: transparent;
        }
        .dy-follow-btn:active { opacity: 0.8; }
        .dy-follow-btn.followed { background: var(--bg-secondary); color: var(--text-secondary); }

        /* 可滚动内容区 */
        .dy-detail-scroll {
            flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
        }
        .dy-detail-scroll::-webkit-scrollbar { width: 0; }
        .dy-detail-inner { padding: 16px 16px calc(60px + env(safe-area-inset-bottom, 0px)); }

        /* 正文内容 */
        .dy-detail-body {
            font-size: var(--font-size-base); line-height: 1.8; color: var(--text-primary);
            margin-bottom: 12px; white-space: pre-wrap; word-break: break-word;
        }
        .dy-detail-body p { margin: 0; padding: 0; }

        /* 时间戳 */
        .dy-detail-time {
            font-size: var(--font-size-xs); color: var(--text-tertiary);
            margin-bottom: 12px;
        }

        /* 更多操作按钮 */
        .dy-detail-more {
            display: flex; justify-content: flex-end; margin-bottom: 12px;
        }
        .dy-detail-more button {
            width: 32px; height: 32px; border-radius: 50%;
            border: 1px solid var(--border); background: var(--bg-secondary);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; color: var(--text-secondary); transition: background-color 0.2s;
            -webkit-tap-highlight-color: transparent;
        }
        .dy-detail-more button:hover { background: var(--border); }
        .dy-detail-more button:active { background: var(--text-tertiary); }

        /* 点赞用户列表（嵌入内容流中） */
        .dy-detail-likers {
            display: flex; align-items: center; gap: 8px; padding: 4px 0 12px;
            overflow: hidden; width: 100%;
            -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
        }

        /* 快捷评语 */
        .dy-detail-quick-replies {
            display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px;
        }

        /* 评论区 */
        .dy-detail-comments { border-top: 8px solid var(--bg-secondary); padding: 16px 16px 8px; margin: 0 -16px; }
        .dy-comments-header {
            font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary);
            padding: 0 0 12px;
        }
        .dy-comments-header span { color: var(--text-tertiary); font-weight: 400; }

        /* 固定底部操作栏 */
        .dy-detail-bottombar {
            position: fixed; bottom: 0; left: 0; right: 0;
            display: flex; align-items: center; gap: 6px;
            padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
            background: var(--bg-primary); border-top: 1px solid var(--border);
            z-index: 100;
        }
        .dy-comment-input-wrap { flex: 1; min-width: 0; }
        .dy-comment-input {
            width: 100%; padding: 8px 14px; border-radius: var(--radius-xl);
            background: var(--bg-secondary); border: none;
            font-size: var(--font-size-sm); color: var(--text-primary);
            outline: none; -webkit-tap-highlight-color: transparent;
        }
        .dy-comment-input::placeholder { color: var(--text-tertiary); }
        .dy-action-btn {
            display: flex; flex-direction: column; align-items: center; gap: 1px;
            background: none; border: none; cursor: pointer;
            padding: 4px 6px; min-width: 44px;
            -webkit-tap-highlight-color: transparent;
        }
        .dy-action-btn i { font-size: 22px; color: var(--text-secondary); transition: color 0.2s; }
        .dy-action-btn span {
            font-size: 12px; color: var(--text-tertiary); font-weight: 500;
            line-height: 1; min-width: 20px; text-align: center;
        }
        .dy-action-btn:active i { transform: scale(0.88); }
        .dy-like-btn.liked i { color: var(--danger); animation: dyLikePop 0.4s ease; }
        .dy-like-btn.liked span { color: var(--danger); }
        .dy-fav-btn.faved i { color: var(--warning, var(--warning)); }
        .dy-fav-btn.faved span { color: var(--warning, var(--warning)); }
        @keyframes dyLikePop {
            0% { transform: scale(1); }
            30% { transform: scale(1.35); }
            60% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }
        [data-theme="dark"] .dy-detail-bottombar { border-top: 1px solid var(--border); }
        [data-theme="dark"] .dy-detail-body { color: var(--text-primary); }
        [data-theme="dark"] .dy-comment-input { background: var(--bg-secondary); color: var(--text-primary); }

        /* 打卡计划详情 - 邻居互动区 */
        .pk-detail-interactions { padding: 16px 18px 24px; border-top: 8px solid var(--bg-secondary); }
        .pk-interaction-header {
            display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
        }
        .pk-interaction-title { font-size: var(--font-size-base); font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:5px; }
        .pk-interaction-summary { font-size: var(--font-size-xs); color:var(--text-tertiary); font-weight:500; }
        .pk-interaction-summary span { color:var(--danger); font-weight:700; }
        /* 互动列表项 */
        .pk-interaction-item {
            display:flex; gap:10px; padding:11px 0;
            border-bottom:1px solid var(--bg-secondary);
        }
        .pk-interaction-item:last-child { border-bottom:none; }
        .pk-interaction-avatar {
            width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0;
        }
        .pk-interaction-avatar img { width:100%; height:100%; object-fit:cover; }
        .pk-interaction-body { flex:1; min-width:0; }
        .pk-interaction-name { font-size: var(--font-size-sm); font-weight:600; color:var(--text-primary); }
        .pk-interaction-text { font-size: var(--font-size-sm); color:var(--text-secondary); line-height:1.4; margin-top:2px; word-break:break-all; }
        .pk-interaction-time { font-size: var(--font-size-xs); color:var(--text-tertiary); margin-top:3px; }
        /* 点赞类型 */
        .pk-interaction-item.like-type { align-items:center; }
        .pk-interaction-like-badge {
            font-size: var(--font-size-xs); color:var(--danger); font-weight:600; margin-left:auto;
            flex-shrink:0; white-space:nowrap; background:#FFF0E8; padding:2px 8px; border-radius: var(--radius);
        }
        /* 空状态 */
        .pk-interaction-empty {
            text-align:center; padding:20px 0; color:var(--text-tertiary); font-size: var(--font-size-sm);
        }

        /* ===== 我获得的点赞页面 ===== */
        .pk-mylikes-page { padding: 16px; }
        .pk-mylikes-summary {
            text-align: center; padding: 24px 0 20px;
        }
        .pk-mylikes-total {
            display: inline-flex; align-items: baseline; gap: 6px;
        }
        .pk-mylikes-total-icon {
            font-size: 28px; color: var(--danger);
        }
        .pk-mylikes-total-num {
            font-size: 36px; font-weight: 700; color: var(--danger); line-height: 1;
        }
        .pk-mylikes-total-label {
            font-size: var(--font-size-base); color: var(--text-secondary); font-weight: 500;
        }
        .pk-mylikes-hint {
            margin-top: 8px; font-size: var(--font-size-sm); color: var(--text-tertiary);
        }
        .pk-mylikes-list { margin-top: 8px; }
        .pk-mylikes-item-row {
            display: flex; align-items: center; gap: 12px;
            background: var(--bg-primary); border-radius: var(--radius); padding: 12px 14px;
            margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }
        .pk-mylikes-item-avatar {
            width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
        }
        .pk-mylikes-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .pk-mylikes-item-body { flex: 1; min-width: 0; }
        .pk-mylikes-item-name {
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary);
        }
        .pk-mylikes-item-desc {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .pk-mylikes-item-right {
            text-align: right; flex-shrink: 0;
        }
        .pk-mylikes-item-count {
            font-size: var(--font-size-sm); color: var(--danger); font-weight: 600;
        }
        .pk-mylikes-item-time {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px;
        }
        .pk-mylikes-empty {
            text-align: center; padding: 40px 0; color: var(--text-tertiary);
        }
        .pk-mylikes-empty i { font-size: 40px; color: var(--bg-tertiary); margin-bottom: 10px; display: block; }

        /* 评论区 */
        .pk-comment-section { padding: 0 16px; }
        .pk-comment-section-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
        .pk-comment-item {
            display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bg-secondary);
        }
        .pk-comment-avatar {
            width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
        }
        .pk-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .pk-comment-body { flex: 1; }
        .pk-comment-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .pk-comment-text { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; margin-top: 2px; }
        .pk-comment-time { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; }
        .pk-comment-input-bar {
            display: flex; gap: 8px; padding: 10px 16px; background: var(--bg-primary);
            position: sticky; bottom: 0; border-top: 1px solid var(--bg-secondary);
        }
        .pk-comment-input {
            flex: 1; padding: 10px 14px; border-radius: var(--radius-xl); border: 1px solid var(--bg-secondary);
            background: var(--bg-secondary); font-size: var(--font-size-sm); outline: none;
        }
        .pk-comment-send {
            padding: 10px 18px; border-radius: var(--radius-xl); border: none;
            background: var(--primary); color: #fff; font-size: var(--font-size-sm); font-weight: 600;
            cursor: pointer;
        }
        .pk-comment-send:active { transform: scale(0.95); }

        /* ========== 亲子打卡：自定义确认弹窗 ========== */
        .pk-confirm-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4); z-index: var(--z-toast);
            display: flex; align-items: center; justify-content: center;
            animation: pkConfirmFadeIn 0.2s ease;
        }
        @keyframes pkConfirmFadeIn { from { opacity: 0; } to { opacity: 1; } }
        .pk-confirm-box {
            width: 280px; background: var(--bg-primary); border-radius: var(--radius-lg);
            overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.18);
            animation: pkConfirmSlideUp 0.25s ease;
        }
        @keyframes pkConfirmSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .pk-confirm-title {
            font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary);
            text-align: center; padding: 20px 20px 8px;
        }
        .pk-confirm-body {
            font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6;
            text-align: left; padding: 4px 20px 20px; white-space: pre-line;
        }
        .pk-confirm-actions {
            display: flex; border-top: 1px solid var(--bg-secondary);
        }
        .pk-confirm-btn {
            flex: 1; padding: 13px 0; border: none; background: none;
            font-size: var(--font-size-base); font-weight: 500; cursor: pointer;
            transition: background-color 0.15s ease;
            touch-action: manipulation;
        }
        .pk-confirm-cancel { color: var(--text-secondary); border-right: 1px solid var(--bg-secondary); }
        .pk-confirm-cancel:active { background-color: rgba(0,0,0,0.04); }
        .pk-confirm-ok { color: var(--primary); font-weight: 600; }
        .pk-confirm-ok:active { background-color: rgba(255,109,59,0.06); }

        /* 积分页面 */
        .pk-points-page { padding-bottom: 80px; }
        .pk-points-balance {
            text-align: center; padding: 20px 0 16px;
            background: linear-gradient(135deg, var(--primary)15, var(--warning)15);
            margin: 12px 16px 0; border-radius: var(--radius-lg);
        }
        .pk-points-balance-icon { font-size: 28px; }
        .pk-points-balance-num {
            font-size: 40px; font-weight: 800; color: var(--primary);
            line-height: 1.2; margin: 4px 0;
        }
        .pk-points-balance-label {
            font-size: var(--font-size-sm); color: var(--text-tertiary);
        }
        .pk-points-summary {
            display: flex; justify-content: space-around;
            padding: 18px 16px 4px;
        }
        .pk-points-summary-item { text-align: center; }
        .pk-points-summary-num {
            font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary);
            line-height: 1.2;
        }
        .pk-points-summary-num.pk-points-income { color: var(--success); }
        .pk-points-summary-num.pk-points-expense { color: var(--danger); }
        .pk-points-summary-label {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px;
        }
        .pk-points-section-title {
            font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary);
            padding: 14px 16px 8px;
        }
        .pk-points-records {
            padding: 0 16px;
        }
        .pk-points-record-item {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 0; border-bottom: 1px solid var(--bg-secondary);
        }
        .pk-points-record-item:last-child { border-bottom: none; }
        .pk-points-record-icon {
            width: 32px; height: 32px; border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-base); flex-shrink: 0;
        }
        .pk-points-record-icon.income { background: var(--success)15; }
        .pk-points-record-icon.expense { background: var(--danger)15; }
        .pk-points-record-info { flex: 1; min-width: 0; }
        .pk-points-record-desc {
            font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .pk-points-record-source {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 1px;
        }
        .pk-points-record-change {
            font-size: var(--font-size-base); font-weight: 700; flex-shrink: 0;
        }
        .pk-points-record-change.income { color: var(--success); }
        .pk-points-record-change.expense { color: var(--danger); }
        .pk-points-rules {
            margin-top: 4px;
        }
        .pk-points-rule-list {
            padding: 0 16px 12px;
        }
        .pk-points-rule-item {
            display: flex; align-items: center; gap: 8px;
            padding: 7px 0; font-size: var(--font-size-sm); color: var(--text-secondary);
        }
        .pk-points-rule-icon { font-size: var(--font-size-base); width: 22px; text-align: center; }
        .pk-points-rule-item strong { color: var(--primary); }

        /* 心愿页积分气泡 */
        .pk-wish-points-bubble {
            display: flex; align-items: center; gap: 6px;
            padding: 8px 16px; cursor: pointer;
            transition: opacity 0.15s ease;
        }
        .pk-wish-points-bubble:active { opacity: 0.7; }
        .pk-wish-points-bubble-icon { font-size: var(--font-size-lg); }
        .pk-wish-points-bubble-text {
            font-size: var(--font-size-sm); color: var(--text-secondary);
        }
        .pk-wish-points-bubble-num {
            font-size: var(--font-size-lg); font-weight: 800; color: var(--primary);
        }

        /* ====== 亲子打卡·孩子端样式（活泼多彩） ====== */
        .pk-child-page { background: linear-gradient(180deg, #FFF6F9 0%, #F0F7FF 100%); }
        .pk-child-header { background: linear-gradient(135deg, #FF6D9C, var(--accent-peach)) !important; }
        .pk-child-header h1, .pk-child-header .back-btn, .pk-child-header .header-action { color: #fff !important; }
        .pk-child-body { padding: 0 16px 90px; }
        .pk-child-profile {
            text-align: center; padding: 24px 16px; margin-top: 16px;
            background: linear-gradient(135deg, #FFC2D9, #FFD9A6); border-radius: 28px;
            box-shadow: 0 6px 20px rgba(255, 109, 156, 0.25);
        }
        .pk-child-avatar { font-size: 56px; line-height: 1; }
        .pk-child-name { font-size: 22px; font-weight: 800; color: #5A2D3A; margin-top: 6px; }
        .pk-child-points-box { margin-top: 12px; }
        .pk-child-points-num { font-size: 48px; font-weight: 900; color: #FF3B6B; line-height: 1; }
        .pk-child-points-label { font-size: 14px; color: #8A4A5A; margin-top: 4px; }
        .pk-child-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
        .pk-child-entry { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
        .pk-child-entry-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 22px; }
        .pk-child-entry-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
        .pk-child-section { background: var(--bg-primary); border-radius: 20px; padding: 16px; margin-bottom: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .pk-child-section-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
        .pk-child-task-item {
            display: flex; align-items: center; gap: 12px; padding: 14px; background: #FAFBFF;
            border-radius: 16px; margin-bottom: 10px; border: 2px solid transparent;
        }
        .pk-child-task-item.done { background: #EAF7EE; border-color: var(--success); }
        .pk-child-task-check { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; color: #fff; background: var(--bg-primary); cursor: pointer; }
        .pk-child-task-item.done .pk-child-task-check { background: var(--success); border-color: var(--success); }
        .pk-child-task-info { flex: 1; }
        .pk-child-task-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
        .pk-child-task-points { font-size: 13px; color: var(--warning); font-weight: 600; margin-top: 2px; }
        .pk-child-task-public { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
        .pk-child-big-btn {
            width: 100%; padding: 16px; border: none; border-radius: 20px;
            background: linear-gradient(135deg, var(--success), #30D158); color: #fff;
            font-size: 18px; font-weight: 800; cursor: pointer; margin-top: 10px;
            box-shadow: 0 6px 16px rgba(52, 199, 89, 0.35);
        }
        .pk-child-big-btn:active { transform: scale(0.98); }
        .pk-child-big-btn:disabled { background: #C8C9D9; box-shadow: none; }
        .pk-child-wish-progress { text-align: center; font-size: 14px; color: var(--text-secondary); padding: 14px; background: var(--bg-primary); border-radius: 16px; margin-bottom: 14px; }
        .pk-child-wish-progress strong { color: #FF3B6B; font-size: 18px; }
        .pk-child-wish-card { display: flex; align-items: center; gap: 14px; background: var(--bg-primary); border-radius: 20px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .pk-child-wish-img { width: 56px; height: 56px; border-radius: 16px; background: #FFF3E0; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
        .pk-child-wish-info { flex: 1; }
        .pk-child-wish-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
        .pk-child-wish-cost { font-size: 13px; color: var(--warning); font-weight: 600; margin-top: 2px; }
        .pk-child-wish-desc { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
        .pk-child-wish-status { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: var(--radius-sm); margin-top: 6px; font-weight: 600; }
        .pk-child-wish-btn { padding: 8px 16px; border: none; border-radius: var(--radius); background: linear-gradient(135deg, #FF6D9C, var(--accent-peach)); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
        .pk-child-wish-btn:disabled { background: #C8C9D9; }
        .pk-child-msg-item { display: flex; gap: 12px; background: var(--bg-primary); border-radius: var(--radius-lg); padding: 14px; margin-bottom: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
        .pk-child-msg-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
        .pk-child-msg-content { flex: 1; }
        .pk-child-msg-from { font-size: 14px; font-weight: 700; color: var(--text-primary); }
        .pk-child-msg-text { font-size: 13px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }
        .pk-child-msg-time { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
        .pk-child-empty { text-align: center; padding: 40px 16px; color: var(--text-tertiary); font-size: 14px; }
        .pk-toggle-slider { position: absolute; inset: 0; background: #C8C9D9; border-radius: 26px; transition: background 0.2s; }
        .pk-toggle-slider:before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: var(--bg-primary); border-radius: 50%; transition: transform 0.2s; }
        #pkCreatePublic:checked + .pk-toggle-slider { background: var(--success); }
        #pkCreatePublic:checked + .pk-toggle-slider:before { transform: translateX(20px); }
    /* ── 申请帮助页面 ── */
        .help-apply-page { padding-bottom: 24px; }

        /* ── 热心市民/商家荣誉徽章系统 ── */
        .badge-comment-tag { display: inline-flex; align-items: center; gap: 2px; font-size: var(--font-size-xs); padding: 1px 6px; border-radius: var(--radius-sm); background: var(--warning-light); color: var(--primary); font-weight: 500; margin-left: 4px; vertical-align: middle; }
        .badge-hot-heart { color: var(--danger); font-size: var(--font-size-xs); }

        /* ── 我的订单页面 ── */
        .order-tab {
            flex-shrink:0; padding:8px 16px; border-radius: var(--radius-xl); font-size: var(--font-size-sm); font-weight:500;
            color:var(--text-secondary); background:var(--bg-secondary); cursor:pointer; transition: opacity, transform 0.2s;
        }
        .order-tab.active { color:#fff; background:var(--primary); font-weight:600; }
        .order-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding:16px; margin-bottom:14px;
            box-shadow:0 2px 12px rgba(0,0,0,0.05); cursor:pointer; transition:transform 0.15s;
        }
        .order-card:active { transform:scale(0.98); }
        .order-card-header {
            display:flex; align-items:center; gap:10px; padding-bottom:12px;
            border-bottom:1px solid var(--border-color); margin-bottom:12px;
        }
        .order-card-shop {
            flex:1; font-size: var(--font-size-sm); font-weight:600; color:var(--text-primary);
        }
        .order-card-shop i { font-size: var(--font-size-sm); color:var(--primary); margin-right:4px; }
        .order-card-status {
            font-size: var(--font-size-xs); font-weight:600; padding:3px 10px; border-radius: var(--radius);
        }
        .order-card-status.pending { background:var(--warning-light); color: var(--primary); }
        .order-card-status.shipped { background:#E3F2FD; color:#1565C0; }
        .order-card-status.completed { background:var(--success-light); color:var(--success-text); }
        .order-card-status.cancelled { background:var(--border-light); color:var(--text-disabled); }
        .order-card-body { display:flex; align-items:center; gap:12px; }
        .order-card-icon {
            width:52px; height:52px; border-radius: var(--radius); display:flex; align-items:center; justify-content:center;
            font-size: var(--font-size-xxl); color:#fff; flex-shrink:0; box-shadow:0 3px 10px rgba(0,0,0,0.1);
        }
        .order-card-info { flex:1; min-width:0; }
        .order-card-name { font-size: var(--font-size-sm); font-weight:600; color:var(--text-primary); }
        .order-card-desc { font-size: var(--font-size-xs); color:var(--text-tertiary); margin-top:2px; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
        .order-card-qty { font-size: var(--font-size-xs); color:var(--text-tertiary); }
        .order-card-footer {
            display:flex; align-items:center; justify-content:space-between; margin-top:12px;
            padding-top:12px; border-top:1px solid var(--border-color);
        }
        .order-card-total { font-size: var(--font-size-sm); color:var(--text-primary); }
        .order-card-total strong { font-size: var(--font-size-lg); font-weight:700; color:#FF4D26; }
        .order-card-actions { display:flex; gap:8px; }
        .order-card-btn {
            padding:6px 14px; border-radius: var(--radius-xl); border:none; font-size: var(--font-size-xs); font-weight:600;
            cursor:pointer; transition:transform 0.1s;
        }
        .order-card-btn:active { transform:scale(0.95); }
        .order-card-btn.primary { background:var(--primary); color:#fff; }
        .order-card-btn.outline { background:transparent; color:var(--primary); border:1px solid var(--primary); }
        .order-card-btn.grey { background:var(--border-light); color: var(--text-secondary); }
        .order-empty {
            text-align:center; padding:60px 16px; color:var(--text-tertiary);
        }
        .order-empty i { font-size:48px; display:block; margin-bottom:12px; opacity:0.4; }
        .detail-info-row {
            display:flex; justify-content:space-between; align-items:center;
            padding:8px 0; font-size: var(--font-size-sm); line-height:1.5;
        }
        .detail-info-label { color:var(--text-tertiary); }
        .detail-info-value { color:var(--text-primary); text-align:right; max-width:60%; }

        /* ── 预约表单 ── */
        .form-group { margin-bottom:14px; }
        .form-label {
            display:block; font-size: var(--font-size-sm); font-weight:600; color:var(--text-primary);
            margin-bottom:6px;
        }
        .form-input {
            width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border-color);
            border-radius: var(--radius); font-size: var(--font-size-sm); color:var(--text-primary); outline:none;
            background:var(--bg-secondary); transition:border-color 0.2s;
        }
        .form-input:focus { border-color:var(--primary); background: var(--bg-primary); }
        /* 通用多行文本框样式（与 .form-input 保持一致） */
        .form-textarea {
            width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--border);
            border-radius: var(--radius); font-size: var(--font-size-base); color:var(--text-primary);
            background:var(--bg-primary); outline:none; resize:vertical; min-height:96px;
            font-family: inherit; line-height:1.6; transition:border-color 0.2s;
        }
        .form-textarea:focus { border-color: var(--primary); }
        .form-textarea::placeholder { color: var(--text-tertiary); }
        /* 通用上传区域样式 */
        .upload-area {
            border:2px dashed var(--border); border-radius: var(--radius);
            padding:24px 16px; text-align:center; cursor:pointer;
            background: var(--bg-primary); transition: border-color 0.2s, background 0.2s;
        }
        .upload-area:hover { border-color: var(--primary); }
        .upload-area.uploaded { border-color: var(--success); background: var(--success-light); }
        .upload-area .upload-icon { font-size:28px; color:var(--text-tertiary); margin-bottom:8px; display:block; }
        .upload-area.uploaded .upload-icon { color: var(--success); }
        .upload-area .upload-title { font-size: var(--font-size-sm); color: var(--text-tertiary); }
        .upload-area.uploaded .upload-title { color: var(--success); font-weight:600; }
        .upload-area .upload-hint { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top:4px; }
        /* 多选标签组 */
        .multi-check-group { display:flex; flex-wrap:wrap; gap:8px; }
        .multi-check-item {
            padding:8px 14px; border:1px solid var(--border); border-radius: var(--radius-full);
            font-size: var(--font-size-sm); color: var(--text-secondary); background: var(--bg-primary);
            cursor:pointer; user-select:none; transition: all 0.2s;
        }
        .multi-check-item.checked { background: var(--primary); color:#fff; border-color: var(--primary); }
        [data-theme="dark"] .upload-area { background: var(--bg-secondary); }
        [data-theme="dark"] .upload-area.uploaded { background: rgba(52,199,89,0.12); }
        [data-theme="dark"] .multi-check-item { background: var(--bg-secondary); }

        /* 首页邻长榜入口卡片 */
        .leaderboard-card {
            margin: 12px 16px; padding: 14px 16px; background: linear-gradient(135deg, var(--primary-light), #FFE0B2);
            border-radius: var(--radius-lg); display: flex; align-items: center; gap: 12px;
            cursor: pointer; box-shadow: 0 2px 8px rgba(255,111,0,0.1); transition: transform 0.15s;
        }
        .leaderboard-card:hover { transform: scale(1.02); }
        .leaderboard-card:active { transform: scale(0.98); }
        .leaderboard-card-icon {
            width: 44px; height: 44px; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
            font-size: var(--font-size-xxl); flex-shrink: 0;
        }
        .leaderboard-card-info { flex: 1; min-width: 0; }
        .leaderboard-card-title { font-size: var(--font-size-base); font-weight: 700; color: var(--primary); }
        .leaderboard-card-desc { font-size: var(--font-size-xs); color: var(--primary-dark); margin-top: 2px; }
        .leaderboard-card-arrow { color: var(--primary); font-size: var(--font-size-base); flex-shrink: 0; }

        /* 邻长榜独立页Tab */
        .leaderboard-tabs { display: flex; gap: 0; margin: 0 16px; background: var(--bg-secondary); border-radius: var(--radius); padding: 3px; }
        .leaderboard-tab {
            flex: 1; text-align: center; padding: 8px 0; font-size: var(--font-size-sm); font-weight: 600;
            color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-sm); transition: 0.2s;
            border: none; background: transparent; font-family: inherit; min-height: 44px;
        }
        .leaderboard-tab.active { background: var(--bg-primary); color: var(--primary); }
        .leaderboard-page-content { padding: 12px 0 24px; }

        .leaderboard-section { margin: 16px; padding: 16px; background: var(--bg-primary); border-radius: var(--radius-lg); }
        .leaderboard-section.no-margin { margin: 0; box-shadow: none; }
        .leaderboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
        .leaderboard-title { font-size: var(--font-size-base); font-weight: 700; display: flex; align-items: center; gap: 6px; }
        .leaderboard-title i { color: var(--primary); }
        .leaderboard-more { font-size: var(--font-size-xs); color: var(--text-tertiary); cursor: pointer; }
        .leaderboard-list { display: flex; flex-direction: column; gap: 16px; }
        .leaderboard-item { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
        .leaderboard-rank { width: 22px; text-align: center; font-size: var(--font-size-sm); font-weight: 700; color: var(--text-tertiary); flex-shrink: 0; font-variant-numeric: tabular-nums; }
        .leaderboard-rank.top1 { color: #FF6F00; }
        .leaderboard-rank.top2 { color: #78909C; }
        .leaderboard-rank.top3 { color: #A1887F; }
        .leaderboard-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg-secondary); }
        .leaderboard-info { flex: 1; min-width: 0; }
        .leaderboard-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 4px; }
        .leaderboard-score { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 1px; }
        .leaderboard-actions { display: flex; gap: 6px; flex-shrink: 0; }
        .leaderboard-btn {
            font-size: var(--font-size-xs); padding: 5px 10px; border-radius: var(--radius-sm); border: none; cursor: pointer;
            font-weight: 600; white-space: nowrap; transition: transform 0.15s;
        }
        .leaderboard-btn:active { transform: scale(0.95); }
        .leaderboard-btn-profile { background: var(--bg-secondary); color: var(--text-primary); }
        .leaderboard-btn-shop { background: var(--warning-light); color: var(--primary); }
        .leaderboard-btn-profile:hover { background: #e0e0e0; }
        .leaderboard-btn-shop:hover { background: #FFE0B2; }

        /* ── 热门话题榜 ── */
        .hot-topics-page { padding: 8px 0 80px; }
        .hot-topics-card {
            margin: 0 8px 8px; background: var(--bg-primary);
            border-radius: var(--radius-lg); overflow: hidden;
        }
        .hot-topics-banner {
            background: linear-gradient(135deg, var(--danger), var(--primary));
            padding: 20px 16px; color: #fff;
            display: flex; align-items: center; gap: 10px;
        }
        .hot-topics-banner i { font-size: 24px; }
        .hot-topics-banner-text { flex: 1; }
        .hot-topics-banner-title { font-size: var(--font-size-lg); font-weight: 700; }
        .hot-topics-banner-sub { font-size: var(--font-size-xs); opacity: 0.85; margin-top: 2px; }
        .hot-topics-item {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 16px; cursor: pointer;
            transition: background 0.15s;
            border-bottom: 1px solid var(--border);
            outline: none;
        }
        .hot-topics-item:last-child { border-bottom: none; }
        .hot-topics-item:active, .hot-topics-item:focus { background: var(--bg-secondary); }
        .hot-topics-rank {
            width: 24px; text-align: center; flex-shrink: 0;
            font-size: var(--font-size-lg); font-weight: 800;
            color: var(--warning);
            font-variant-numeric: tabular-nums;
        }
        .hot-topics-rank.top1 { color: var(--danger); }
        .hot-topics-rank.top2 { color: var(--primary); }
        .hot-topics-rank.top3 { color: var(--warning); }
        .hot-topics-info { flex: 1; min-width: 0; }
        .hot-topics-title {
            font-size: var(--font-size-base); font-weight: 600;
            color: var(--text-primary); line-height: 1.4;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .hot-topics-meta {
            display: flex; align-items: center; gap: 8px; margin-top: 4px;
        }
        .hot-topics-cat {
            font-size: var(--font-size-xs); padding: 1px 8px;
            border-radius: var(--radius-sm); background: var(--bg-tertiary);
            color: var(--text-tertiary);
        }
        .hot-topics-heat { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .hot-topics-tag {
            font-size: var(--font-size-xs); font-weight: 700;
            padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
        }
        .hot-topics-tag.boil { background: var(--danger); color: #fff; }
        .hot-topics-tag.hot { background: var(--warning); color: #fff; }
        .hot-topics-tag.new { background: #FF2D55; color: #fff; }

        .help-apply-header {
            background: linear-gradient(135deg, var(--danger), var(--danger-dark));
            color: #fff; padding: 28px 20px 20px; text-align: center;
        }
        .help-apply-header h2 { font-size: var(--font-size-xl); font-weight: 700; margin: 0 0 6px; }
        .help-apply-header p { font-size: var(--font-size-sm); opacity: 0.85; margin: 0; line-height: 1.5; }
        .help-apply-tips {
            display: flex; align-items: flex-start; gap: 8px;
            margin: 8px 8px 8px; padding: 12px 14px;
            background: var(--warning-light); border-radius: var(--radius-lg); font-size: var(--font-size-xs); color: var(--primary); line-height: 1.5;
        }
        .help-apply-tips i { font-size: var(--font-size-sm); margin-top: 1px; flex-shrink: 0; }
        .help-apply-category {
            margin: 0 8px 8px;
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: 0 16px;
            overflow: hidden;
        }
        .help-apply-category-title {
            display: flex; align-items: center; gap: 8px;
            font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
            padding: 14px 0 10px;
        }
        .help-apply-category-title i { font-size: var(--font-size-base); width: 20px; }
        .help-apply-card {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 0; border-top: 1px solid var(--border);
        }
        .help-apply-card:first-of-type { border-top: none; }
        .help-apply-card-info { flex: 1; min-width: 0; }
        .help-apply-card-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
        .help-apply-card-desc { font-size: var(--font-size-sm); color: var(--text-tertiary); line-height: 1.5; }
        .help-apply-card-tel {
            display: flex; align-items: center; justify-content: center;
            width: 44px; height: 44px;
            background: var(--danger); color: #fff; border: none; border-radius: 50%;
            font-size: var(--font-size-lg); cursor: pointer;
            flex-shrink: 0; transition: transform 0.15s;
        }
        .help-apply-card-tel:hover { transform: scale(1.05); }
        .help-apply-card-tel:active { transform: scale(0.95); }

        /* 拨号确认弹窗 */
        .dial-confirm-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5); z-index: 10000;
            display: none; align-items: center; justify-content: center;
        }
        .dial-confirm-overlay.show { display: flex; }
        .dial-confirm-sheet {
            background: var(--bg-primary); border-radius: var(--radius-xl);
            width: 80%; max-width: 320px; padding: 28px 24px 20px; text-align: center;
            animation: dialPop 0.25s ease;
        }
        @keyframes dialPop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .dial-confirm-text {
            font-size: var(--font-size-base); color: var(--text-primary);
            line-height: 1.6; margin-bottom: 24px;
        }
        .dial-confirm-actions { display: flex; gap: 12px; }
        .dial-confirm-cancel, .dial-confirm-ok {
            flex: 1; padding: 12px 0; border: none; border-radius: var(--radius);
            font-size: var(--font-size-base); font-weight: 600; cursor: pointer; min-height: 44px;
        }
        .dial-confirm-cancel { background: var(--bg-secondary); color: var(--text-secondary); }
        .dial-confirm-ok { background: var(--danger); color: #fff; }
        .help-apply-card-tel i { font-size: var(--font-size-sm); }
        .help-apply-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 8px; }
        .help-apply-card-fav {
            display: flex; align-items: center; justify-content: center;
            width: 44px; height: 44px;
            background: var(--bg-secondary); color: var(--text-tertiary);
            border: none; border-radius: 50%; font-size: var(--font-size-sm);
            cursor: pointer; transition: transform 0.15s, color 0.15s;
        }
        .help-apply-card-fav:hover { transform: scale(1.05); }
        .help-apply-card-fav:active { transform: scale(0.95); }
        .help-apply-card-fav.active { color: var(--warning); }
        .help-apply-empty { text-align: center; padding: 48px 16px; color: var(--text-tertiary); font-size: var(--font-size-sm); }
        .help-apply-search-bar {
            margin: 12px 16px; position: relative;
        }
        .help-apply-search-bar input {
            width: 100%; padding: 10px 14px 10px 36px; border: 1px solid var(--border);
            border-radius: var(--radius); font-size: var(--font-size-sm); background: var(--bg-input);
            outline: none; box-sizing: border-box;
        }
        .help-apply-search-bar i {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            color: var(--text-tertiary); font-size: var(--font-size-sm);
        }
        /* ── 申请帮助小铃铛强调样式 ── */
        .quick-action-btn.help-btn {
            background: var(--primary-light); color: var(--primary);
        }
        .quick-action-btn.help-btn:hover { background: #FFE8E0; }
        .quick-action-btn.help-btn i { color: var(--primary); }

        /* 需求详情固定接单按钮 */
        .task-detail-fixed-btn {
            position: fixed;
            left: 16px;
            right: 16px;
            bottom: 16px;
            padding: 14px;
            border: none;
            border-radius: var(--radius-lg);
            font-size: var(--font-size-base);
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: var(--primary);
            color: #fff;
            box-shadow: 0 4px 16px rgba(255,109,59,0.3);
        }
        .task-detail-fixed-btn:active { transform: scale(0.97); }

        /* ── 紧急求助 SOS ── */
        .sos-card {
            margin: 2px 8px 6px; border-radius: var(--radius-lg); overflow: hidden;
            background: linear-gradient(135deg, var(--danger), #D32F2F);
            cursor: pointer; transition: transform 0.15s;
            display: flex; align-items: center; gap: 10px; padding: 14px 16px;
            box-shadow: 0 2px 12px rgba(255,59,48,0.25);
        }
        .sos-card:active { transform: scale(0.97); }
        .sos-card-icon {
            width: 42px; height: 42px; border-radius: var(--radius);
            background: rgba(255,255,255,0.2);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem; flex-shrink: 0;
        }
        .sos-card-info { flex: 1; min-width: 0; color: #fff; }
        .sos-card-title { font-size: var(--font-size-base); font-weight: 700; }
        .sos-card-sub { font-size: var(--font-size-xs); opacity: 0.85; margin-top: 1px; }
        .sos-card-badge {
            background: rgba(255,255,255,0.2); color: #fff;
            padding: 3px 12px; border-radius: var(--radius);
            font-size: var(--font-size-xs); font-weight: 700; flex-shrink: 0;
        }

        .sos-page { padding: 0 0 80px; }
        .sos-scenario-section { padding: 20px 16px 4px; }
        .sos-scenario-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 12px; text-align: center; }
        .sos-scenario-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .sos-scenario-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; background: var(--bg-primary); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all 0.15s; outline: none; min-height: 44px; }
        .sos-scenario-card:focus { border-color: var(--primary); }
        .sos-scenario-card i { font-size: 24px; color: var(--text-tertiary); }
        .sos-scenario-card span { font-size: var(--font-size-xs); color: var(--text-secondary); }
        .sos-scenario-card.active { border-color: var(--danger); background: #FFF1F0; }
        .sos-scenario-card.active i { color: var(--danger); }
        .sos-scenario-card.active span { color: var(--danger); font-weight: 600; }
        .sos-silent-toggle { margin-top: 14px; padding: 10px 14px; background: #FFF8E1; border: 1px solid #FFE082; border-radius: var(--radius); text-align: center; }
        .sos-main-btn-wrap {
            display: flex; justify-content: center; align-items: center;
            min-height: 50vh; padding: 40px 20px;
        }
        .sos-main-btn {
            width: 160px; height: 160px; border-radius: 50%;
            border: none; background: linear-gradient(135deg, var(--danger), #D32F2F);
            color: #fff; font-size: 24px; font-weight: 800; cursor: pointer;
            box-shadow: 0 8px 40px rgba(255,59,48,0.4);
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 8px; transition: transform 0.15s;
            touch-action: manipulation;
        }
        .sos-main-btn:active { transform: scale(0.95); }
        .sos-main-btn i { font-size: 40px; }
        .sos-main-btn-sub { font-size: var(--font-size-sm); font-weight: 600; opacity: 0.9; }

        .sos-countdown-wrap {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; min-height: 60vh; padding: 40px 20px;
            text-align: center;
        }
        .sos-countdown-num {
            font-size: 72px; font-weight: 800; color: var(--danger);
            line-height: 1; margin-bottom: 12px;
        }
        .sos-countdown-label { font-size: var(--font-size-base); color: var(--text-primary); font-weight: 600; margin-bottom: 24px; }
        .sos-countdown-info {
            font-size: var(--font-size-sm); color: var(--text-tertiary); margin-bottom: 32px;
            line-height: 1.6; max-width: 300px;
        }
        .sos-countdown-cancel {
            padding: 14px 48px; border-radius: var(--radius-lg); border: 2px solid var(--border);
            background: var(--bg-primary); font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary);
            cursor: pointer; transition: opacity, transform 0.15s;
        }
        .sos-countdown-cancel:active { background: #f5f5f7; }

        .sos-sent-wrap {
            padding: 40px 20px; text-align: center;
        }
        .sos-sent-icon { font-size: 64px; margin-bottom: 16px; }
        .sos-sent-title { font-size: var(--font-size-xxl); font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
        .sos-sent-desc { font-size: var(--font-size-sm); color: var(--text-tertiary); margin-bottom: 24px; line-height: 1.6; }
        .sos-sent-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding: 20px;
            margin-bottom: 16px;
            text-align: left;
        }
        .sos-sent-card-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
        .sos-notify-item {
            display: flex; align-items: center; gap: 10px; padding: 8px 0;
            border-bottom: 1px solid var(--border-light); font-size: var(--font-size-sm);
        }
        .sos-notify-item:last-child { border-bottom: none; }
        .sos-notify-item .status-dot {
            width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
        }
        .sos-notify-item .status-dot.sent { background: var(--success); }
        .sos-notify-item .status-dot.pending { background: var(--warning); }
        .sos-notify-name { flex: 1; color: var(--text-primary); }
        .sos-notify-type { font-size: var(--font-size-xs); color: var(--text-tertiary); }

        .sos-action-row { display: flex; gap: 8px; margin: 16px; }
        .sos-action-btn {
            flex: 1; padding: 12px; border: none; border-radius: var(--radius);
            font-size: var(--font-size-sm); font-weight: 600; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            transition: transform 0.15s;
        }
        .sos-action-btn:active { transform: scale(0.97); }
        .sos-action-btn.primary { background: var(--primary); color: #fff; }
        .sos-action-btn.outline { background: var(--bg-primary); color: #2C2416; border: 1px solid var(--border); }

        .sos-status-bar {
            display: flex; align-items: center; gap: 12px;
            background: #FFF8F5; border-radius: var(--radius); padding: 14px 16px;
            margin-bottom: 16px; border: 1px solid rgba(255,59,48,0.1);
        }
        .sos-status-icon { font-size: 28px; }
        .sos-status-info { flex: 1; }
        .sos-status-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .sos-status-time { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }

        .sos-timeline { padding: 0; }
        .sos-timeline-item {
            display: flex; gap: 12px; padding: 10px 0;
            border-bottom: 1px solid #f0f0f0; font-size: var(--font-size-sm);
        }
        .sos-timeline-item:last-child { border-bottom: none; }
        .sos-timeline-time { font-size: var(--font-size-xs); color: var(--text-tertiary); width: 60px; flex-shrink: 0; }
        .sos-timeline-dot {
            width: 10px; height: 10px; border-radius: 50%;
            margin-top: 3px; flex-shrink: 0;
        }
        .sos-timeline-dot.done { background: var(--success); }
        .sos-timeline-dot.active { background: var(--warning); animation: pulse 1.5s infinite; }
        .sos-timeline-dot.wait { background: var(--text-disabled); }
        .sos-timeline-text { flex: 1; color: #515154; }
        .sos-timeline-text strong { color: var(--text-primary); }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.2); }
        }

        .sos-history-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px;
            margin-bottom: 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.04);
            border: 1px solid var(--border); cursor: pointer; transition: transform 0.15s;
        }
        .sos-history-card:active { transform: scale(0.98); }
        .sos-history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
        .sos-history-id { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .sos-history-status {
            font-size: var(--font-size-xs); font-weight: 600; padding: 2px 10px;
            border-radius: var(--radius);
        }
        .sos-history-status.pending { background: #FFF0E0; color: var(--warning); }
        .sos-history-status.accepted { background: #E5F0FF; color: var(--info); }
        .sos-history-status.arrived { background: #E5FFE8; color: var(--success); }
        .sos-history-status.completed { background: var(--border-light); color: var(--text-tertiary); }
        .sos-history-time { font-size: var(--font-size-xs); color: var(--text-secondary); }
        .sos-history-desc { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; }

        .sos-empty {
            text-align: center; padding: 60px 20px; color: var(--text-tertiary);
        }
        .sos-empty-icon { font-size: 48px; margin-bottom: 12px; }
        .sos-empty p { font-size: var(--font-size-sm); }

        .sos-cancel-reason {
            font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 8px;
            padding: 8px 12px; background: #f5f5f7; border-radius: var(--radius-sm);
        }

        /* 聊天页面 */
        .chat-page { position: relative; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0 !important; background: var(--bg-secondary); padding-bottom: 0 !important; overflow: hidden; }
        .chat-page.active { display: flex !important; }

        #page-chat.active { padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; height: 100vh !important; max-height: 100vh !important; min-height: 0 !important; overscroll-behavior: contain; }
        body:has(#page-chat.active) { overflow: hidden !important; height: 100vh !important; }
        .chat-header { display: flex; align-items: center; padding: var(--statusbar-h, 44px) 16px 10px; background: var(--bg-primary); border-bottom: 1px solid var(--border-light); position: relative; z-index: 100; flex-shrink: 0; }
        .chat-header .back-btn { width: 32px; height: 32px; min-height: auto; border: none; outline: none; box-shadow: none; background: none; font-size: var(--font-size-lg); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .chat-header .chat-user-name { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
        .chat-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px; position: relative; display: flex; flex-direction: column; }
        .chat-messages > * + * { margin-top: 12px; }
        .chat-bubble { max-width: 75%; padding: 8px 14px; border-radius: calc(var(--radius-lg) - 6px); font-size: calc(var(--font-size-sm) + 1px); line-height: 22px; word-break: break-word; white-space: pre-wrap; box-sizing: border-box; }
        .chat-bubble.received { align-self: flex-start; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); box-shadow: none; }
        .chat-bubble.sent { align-self: flex-end; background: #FFF0E5; color: var(--primary); border: 1px solid rgba(255,107,53,0.35); }
        /* 群聊消息内的发送者名字（灰色小字，参考微信） */
        .chat-bubble-sender {
            display: block; font-size: 12px; color: var(--text-tertiary);
            margin-bottom: 3px; font-weight: 500; line-height: 1.4;
        }
        .chat-bubble-sender.sender-self { text-align: right; }
        /* 关系称呼小字：跟在名字后的「· 爸爸 / · 儿子」等，灰色、不抢眼 */
        .fg-rel-tag { color: var(--text-tertiary); font-weight: 400; margin-left: 2px; }
        .chat-time-label { text-align: center; font-size: var(--font-size-xs); color: var(--text-tertiary); }

        /* 聊天页 紧急求助卡片：作为对方消息行内的卡片气泡 */
        .chat-sos-card {
            margin: 0;
            max-width: 100%;
            border-radius: calc(var(--radius-lg) - 6px);
            overflow: hidden;
            border: 1px solid var(--border);
            background: var(--bg-primary);
        }
        /* SOS 卡片消息行：右边缘与我方对话框（气泡）右边缘对齐（缩进头像+间距 46px） */
        .fg-bubble-row.sos-msg-row { max-width: calc(100% - 46px); align-self: flex-start; }
        .fg-bubble-row.sos-msg-row .chat-sos-card { flex: 1; max-width: 100%; }
        .chat-sos-card-header {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 14px;
            background: linear-gradient(135deg,var(--sos-red),var(--sos-red-dark));
            color: #fff;
        }
        .chat-sos-card-header i { font-size: 16px; animation: sosPulse 1.5s ease-in-out infinite; }
        .sos-fab { animation: sosPulse 2s infinite; }
        @keyframes sosPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
        @keyframes sosPulse { 0%,100% { box-shadow:0 4px 16px rgba(255,59,48,.4); } 50% { box-shadow:0 4px 24px rgba(255,59,48,.7); } }
        .chat-sos-card-header .sos-title { font-size: 14px; font-weight: 600; }
        .chat-sos-card-header .sos-time { margin-left: auto; font-size: 12px; opacity: 0.9; }
        .chat-sos-card-body { padding: 8px 14px; }
        .chat-sos-row { display: flex; gap: 8px; }
        .chat-sos-row .chat-sos-field { flex: 1; }
        .chat-sos-row .sos-label { width: auto; margin-right: 0; }
        .chat-sos-field {
            display: flex; align-items: flex-start; padding: 5px 0; font-size: 13px;
            gap: 6px;
        }
        .chat-sos-field .sos-label {
            color: var(--text-tertiary); flex-shrink: 0;
        }
        .chat-sos-field .sos-value {
            color: var(--text-primary); font-weight: 500; flex: 1;
        }
        /* 位置字段：单行省略 + 可点击跳转查看位置 */
        .sos-value.sos-addr {
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: bottom;
            cursor: pointer;
            color: #3B82F6;
        }
        .chat-sos-card-note {
            margin-top: 8px; padding: 8px 10px; font-size: 12px;
            background: var(--bg-secondary); border-radius: var(--radius-sm);
            color: var(--text-secondary); line-height: 1.5;
        }
        .chat-sos-card-actions {
            display: flex; gap: 8px; padding: 10px 14px;
            border-top: 1px solid var(--border-light);
        }
        .chat-sos-card-actions + .chat-sos-card-actions {
            padding-top: 0; border-top: none;
        }
        .chat-sos-card-actions button {
            flex: 1; border: none; border-radius: var(--radius-sm);
            padding: 8px 0; font-size: 13px; font-weight: 600; cursor: pointer;
        }
        .btn-sos-ack { background: linear-gradient(135deg,var(--sos-red),var(--sos-red-dark)); color: #fff; }
        .btn-sos-call { background: var(--bg-secondary); color: var(--text-primary); }
        .chat-sos-card.acknowledged .chat-sos-card-header {
            background: var(--bg-secondary); color: var(--text-tertiary);
        }
        .chat-sos-card.acknowledged .chat-sos-card-header i { animation: none; }
        .chat-sos-card.acknowledged .chat-sos-card-actions { display: none; }
        .chat-sos-card-ack-tag {
            padding: 4px 10px; font-size: 12px; color: #16a34a; font-weight: 600;
        }

        /* 查看位置页：地图全屏 + 底部操作栏 */
        .vl-info {
            position: absolute; left: 12px; right: 12px; bottom: 12px;
            background: rgba(255,255,255,0.95);
            border-radius: calc(var(--radius-lg) - 6px);
            padding: 10px 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            backdrop-filter: blur(4px);
        }
        .vl-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
        .vl-addr { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
        .vl-footer {
            background: var(--bg-primary);
            border-top: 1px solid var(--border-light);
            padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        }
        .vl-open-btn { width: 100%; padding: 12px; font-size: 14px; margin-top: 0; }

        /* 家庭群：紧急求助消息气泡（红色告警样式） */
        .chat-bubble.fg-sos-msg {
            align-self: flex-start;
            background: linear-gradient(135deg,var(--sos-red),var(--sos-red-dark));
            color: #fff;
            border: none;
            box-shadow: 0 2px 10px rgba(239,68,68,0.35);
        }
        .chat-bubble.fg-sos-msg .chat-bubble-sender { color: rgba(255,255,255,0.85); }
        
        /* 紧急求助卡片：增强红色醒目效果 */
        .chat-sos-card {
            border: 2px solid var(--sos-red);
            box-shadow: 0 4px 16px rgba(239,68,68,0.25);
            animation: sosCardPulse 2s ease-in-out infinite;
        }
        @keyframes sosCardPulse {
            0%, 100% { box-shadow: 0 4px 16px rgba(239,68,68,0.25); }
            50% { box-shadow: 0 4px 24px rgba(239,68,68,0.45); }
        }
        .chat-sos-card-header {
            background: linear-gradient(135deg,var(--sos-red),var(--sos-red-dark)) !important;
            color: #fff !important;
        }
        .chat-sos-card-header .sos-title {
            color: #fff !important;
            font-weight: 700 !important;
        }
        .chat-sos-card-header .sos-time {
            color: rgba(255,255,255,0.9) !important;
        }
        
        /* 紧急求助全屏提醒 */
        .sos-fullscreen-alert {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(0, 0, 0, 0.75);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: sosAlertFadeIn 0.3s ease-out;
        }
        @keyframes sosAlertFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .sos-alert-card {
            background: #fff;
            border-radius: 16px;
            width: 100%;
            max-width: 380px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: sosAlertCardIn 0.4s ease-out;
        }
        @keyframes sosAlertCardIn {
            from { transform: scale(0.8) translateY(20px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }
        .sos-alert-header {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            color: #fff;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .sos-alert-header-title {
            font-size: 18px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .sos-alert-header-title i {
            animation: sosAlertPulse 1s ease-in-out infinite;
        }
        @keyframes sosAlertPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        .sos-alert-header-time {
            font-size: 13px;
            opacity: 0.9;
        }
        .sos-alert-body {
            padding: 16px;
        }
        .sos-alert-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;
        }
        .sos-alert-info-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .sos-alert-info-full {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 12px;
        }
        .sos-alert-info-label {
            font-size: 12px;
            color: #6b7280;
            font-weight: 500;
        }
        .sos-alert-info-value {
            font-size: 15px;
            color: #111827;
            font-weight: 600;
        }
        .sos-alert-location {
            color: #2563eb;
        }
        .sos-alert-status {
            color: #f59e0b;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .sos-alert-status::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #f59e0b;
            animation: sosAlertStatusBlink 1s ease-in-out infinite;
        }
        @keyframes sosAlertStatusBlink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        .sos-alert-actions {
            padding: 0 16px 16px;
        }
        .sos-alert-btn-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 10px;
        }
        .sos-alert-btn-row:last-child {
            margin-bottom: 0;
        }
        .sos-alert-btn {
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: var(--radius-md);
            background: #fff;
            color: #374151;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s ease;
        }
        .sos-alert-btn:hover {
            background: #f9fafb;
            border-color: #d1d5db;
            transform: translateY(-1px);
        }
        .sos-alert-btn:active {
            transform: translateY(0);
        }
        .sos-alert-btn i {
            font-size: 14px;
        }
        .sos-alert-btn.primary {
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            color: #fff;
            border-color: #4f46e5;
        }
        .sos-alert-btn.primary:hover {
            background: linear-gradient(135deg, #4f46e5, #4338ca);
        }
        .sos-alert-btn.danger {
            background: #fff;
            color: #dc2626;
            border-color: #fca5a5;
        }
        .sos-alert-btn.danger:hover {
            background: #fef2f2;
            border-color: #f87171;
        }
        .sos-alert-btn.secondary {
            background: #fff;
            color: #374151;
            border-color: #e5e7eb;
        }

    .chat-input-area { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg-primary); border-top: 1px solid var(--border-light); flex-shrink: 0; margin-top: auto; }

        /* ===== @提及成员选择器 ===== */
        .chat-mention-panel {
            position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px);
            background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius);
            box-shadow: 0 8px 28px rgba(0,0,0,0.14); z-index: 260; overflow: hidden;
            max-height: 260px; display: flex; flex-direction: column;
            animation: cmpIn 0.18s ease-out;
        }
        @keyframes cmpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        .cmp-title { padding: 10px 14px 6px; font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; }
        .cmp-list { overflow-y: auto; padding-bottom: 6px; }
        .cmp-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background 0.12s; }
        .cmp-item:active { background: var(--bg-secondary); }
        .cmp-avatar {
            width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #8B5CF6, #6D28D9);
            color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .cmp-item span { font-size: 14px; color: var(--text-primary); }
        .chat-mention { color: var(--primary); font-weight: 600; }
        .chat-mention-all { color: var(--sos-red-dark); font-weight: 700; background: rgba(220,38,38,0.10); padding: 0 4px; border-radius: 4px; }
        .chat-mention-me { color: #2563EB; font-weight: 700; background: rgba(37,99,235,0.10); padding: 0 4px; border-radius: 4px; }
        .cmp-item.cmp-all { background: rgba(220,38,38,0.06); }
        [data-theme="dark"] .chat-mention-panel { background: var(--bg-elevated); }
        [data-theme="dark"] .cmp-item:active { background: var(--bg-secondary); }

        #chatInput { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: calc(var(--font-size-sm) + 1px); outline: none; background: var(--bg-secondary); min-height: 20px; max-height: 80px; overflow-y: auto; line-height: 1.4; word-break: break-word; }
        #chatInput:focus { border-color: var(--primary); }
        #chatInput:empty::before { content: attr(data-placeholder); color: var(--text-tertiary); pointer-events: none; }
        .inline-emoji { display: inline-flex; vertical-align: middle; margin: 0 1px; }
        .inline-emoji svg { width: 20px; height: 20px; }
        .chat-bubble .inline-emoji svg { width: 22px; height: 22px; }
        .chat-send-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg-secondary); color: var(--text-secondary); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; position: relative; }
        .chat-send-btn .send-icon, .chat-send-btn .plus-icon { position: absolute; transition: opacity 0.2s, transform 0.2s; }
        .chat-send-btn .send-icon { opacity: 0; transform: scale(0.7); }
        .chat-send-btn .plus-icon { opacity: 1; transform: scale(1); }
        .chat-send-btn.active { background: var(--primary); color: #fff; }
        .chat-send-btn.active .send-icon { opacity: 1; transform: scale(1); }
        .chat-send-btn.active .plus-icon { opacity: 0; transform: scale(0.7); }
        .chat-send-btn:active { opacity: 0.75; }
        .basic-sticker { background: transparent !important; box-shadow: none !important; padding: 0 !important; }

        /* ===== 语音消息气泡 ===== */
        .voice-bubble { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; min-width: 92px; transition: transform 0.1s; }
        .voice-bubble:active { transform: scale(0.96); }
        .voice-bubble .vr-play-icon { font-size: 12px; transition: opacity 0.15s; }
        .voice-bubble .vr-bars { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
        .voice-bubble .vr-bars i { display: block; width: 3px; border-radius: 2px; background: currentColor; height: 5px; opacity: 0.55; }
        .voice-bubble .vr-duration { font-size: 13px; font-weight: 600; }
        .voice-bubble.playing .vr-bars i { animation: vrbar 0.9s ease-in-out infinite; opacity: 1; }
        .voice-bubble.playing .vr-bars i:nth-child(2) { animation-delay: 0.15s; }
        .voice-bubble.playing .vr-bars i:nth-child(3) { animation-delay: 0.3s; }
        .voice-bubble.playing .vr-bars i:nth-child(4) { animation-delay: 0.45s; }
        .voice-bubble.playing .vr-play-icon { opacity: 0; }
        .voice-bubble.sent .vr-bars i { background: var(--primary); }
        @keyframes vrbar { 0%, 100% { height: 4px; } 50% { height: 14px; } }

        /* ===== 语音录制弹层 ===== */
        .voice-record-overlay {
            position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 400;
            background: rgba(0,0,0,0.45); display: none; align-items: flex-end; justify-content: center;
            animation: vrFadeIn 0.22s ease-out;
        }
        .voice-record-panel {
            width: 100%; max-width: 520px; background: var(--bg-primary);
            border-radius: 20px 20px 0 0; padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
            display: flex; flex-direction: column; align-items: center; gap: 14px;
            box-shadow: 0 -6px 30px rgba(0,0,0,0.18); animation: vrSlideUp 0.28s cubic-bezier(0.2,0.8,0.2,1);
        }
        .vr-header { width: 100%; display: flex; align-items: center; justify-content: space-between; }
        .vr-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
        .vr-close { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--bg-secondary); color: var(--text-secondary); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .vr-timer { font-size: 34px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }
        .vr-state { font-size: 13px; color: var(--text-secondary); min-height: 18px; }
        .vr-hold-btn {
            width: 92px; height: 92px; border-radius: 50%; border: none; cursor: pointer;
            background: linear-gradient(135deg, var(--primary), #FF8A4C); color: #fff;
            font-size: 34px; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 8px 24px rgba(255,107,53,0.35); transition: transform 0.15s, box-shadow 0.15s;
            touch-action: none; -webkit-user-select: none; user-select: none;
        }
        .vr-hold-btn:active, .vr-hold-btn.recording { transform: scale(0.92); box-shadow: 0 4px 14px rgba(255,107,53,0.45); }
        .vr-hold-btn.cancel { background: linear-gradient(135deg, var(--sos-red), var(--sos-red-dark)); box-shadow: 0 8px 24px rgba(239,68,68,0.35); }
        .vr-tips { display: flex; gap: 18px; font-size: 12px; color: var(--text-tertiary); }
        .vr-tips span { display: inline-flex; align-items: center; gap: 4px; }
        .vr-tips span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); display: inline-block; }
        @keyframes vrFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes vrSlideUp { from { transform: translateY(60px); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } }
        [data-theme="dark"] .voice-record-panel { background: var(--bg-elevated); }

        /* ===== 消息状态（发送中/已发送/已送达/已读） ===== */
        .msg-status-wrap { align-self: flex-end; display: inline-flex; align-items: center; margin-bottom: 2px; margin-left: 4px; flex-shrink: 0; }
        .msg-status { font-size: 11px; color: var(--text-tertiary); display: inline-flex; }
        .msg-status.sending i { color: var(--text-tertiary); animation: msgSpin 0.9s linear infinite; }
        .msg-status.delivered i { color: var(--text-secondary); }
        .msg-status.read i { color: #4C8DFF; }
        @keyframes msgSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* ===== 正在输入指示 ===== */
        .chat-typing { padding: 4px 0; animation: typingIn 0.2s ease-out; }
        @keyframes typingIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        .typing-bubble { display: inline-flex; align-items: center; gap: 5px; padding: 12px 16px !important; }
        .typing-bubble i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); opacity: 0.6; animation: typingDot 1.2s ease-in-out infinite; }
        .typing-bubble i:nth-child(2) { animation-delay: 0.2s; }
        .typing-bubble i:nth-child(3) { animation-delay: 0.4s; }
        @keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }


        /* ===== 聊天 header 通话按钮 ===== */
        .chat-call-btns { display: flex; align-items: center; gap: 4px; margin-left: auto; }
        .chat-search-btn {
            width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
            background: transparent; color: var(--text-secondary); font-size: 15px;
            display: flex; align-items: center; justify-content: center; transition: background 0.15s;
        }
        .chat-search-btn:active { background: var(--bg-secondary); }

        /* ===== 引用回复 ===== */
        .chat-quote-bar-wrap {
            display: flex; align-items: center; gap: 8px; background: var(--bg-secondary);
            border-radius: var(--radius-md); padding: 8px 12px; margin: 0 12px 6px; flex-shrink: 0;
            border-left: 3px solid var(--primary);
        }
        .cqb-body { flex: 1; min-width: 0; }
        .cqb-label { font-size: 12px; color: var(--primary); font-weight: 600; margin-bottom: 2px; }
        .cqb-text { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cqb-close { border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 14px; padding: 4px; flex-shrink: 0; }
        .chat-quote-bar {
            font-size: 12px; color: var(--text-secondary); border-left: 3px solid var(--primary);
            padding: 3px 8px; margin-bottom: 6px; background: rgba(0,0,0,0.04); border-radius: 4px;
            max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
        }
        [data-theme="dark"] .chat-quote-bar { background: rgba(255,255,255,0.07); }

        /* ===== 聊天记录搜索 ===== */
        .chat-search-overlay {
            position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 470;
            background: rgba(0,0,0,0.45); display: flex; align-items: flex-start; justify-content: center;
            animation: vrFadeIn 0.2s ease-out;
        }
        .chat-search-panel {
            margin-top: 56px; width: 92%; max-width: 480px; background: var(--bg-primary);
            border-radius: 16px; overflow: hidden; max-height: 70vh; display: flex; flex-direction: column;
            box-shadow: 0 12px 40px rgba(0,0,0,0.2); animation: vrSlideUp 0.26s cubic-bezier(0.2,0.8,0.2,1);
        }
        .cs-header { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border-light); }
        .cs-header input {
            flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
            font-size: 14px; outline: none; background: var(--bg-secondary); color: var(--text-primary);
        }
        .cs-header input:focus { border-color: var(--primary); }
        .cs-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg-secondary); color: var(--text-secondary); font-size: 14px; cursor: pointer; flex-shrink: 0; }
        .cs-list { overflow-y: auto; }
        .cs-item { padding: 12px 14px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 0.12s; }
        .cs-item:active { background: var(--bg-secondary); }
        .cs-preview { font-size: 14px; color: var(--text-primary); line-height: 1.5; }
        .cs-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
        .cs-empty { padding: 34px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
        .msg-highlight { animation: msgFlash 1.8s ease-out; }
        @keyframes msgFlash { 0%, 55% { background: rgba(255, 213, 102, 0.4); box-shadow: 0 0 0 2px rgba(255,213,102,0.35); } 100% { background: transparent; box-shadow: none; } }
        [data-theme="dark"] .chat-search-panel { background: var(--bg-elevated); }

        .chat-call-btn {
            width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
            background: var(--bg-secondary); color: var(--text-secondary); font-size: 15px;
            display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s;
        }
        .chat-call-btn:active { background: var(--primary); color: #fff; }

        /* ===== 音视频通话覆盖层 ===== */
        .call-overlay {
            position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 500;
            background: radial-gradient(circle at 50% 30%, #2B2F4A 0%, #14162A 60%, #0B0C18 100%);
            display: flex; align-items: center; justify-content: center;
            animation: callFadeIn 0.3s ease-out;
        }
        @keyframes callFadeIn { from { opacity: 0; } to { opacity: 1; } }
        .call-video-bg {
            position: absolute; left: 0; right: 0; top: 0; bottom: 0;
            background: linear-gradient(160deg, #3D4B8C 0%, #26305E 45%, #14162A 100%);
            display: none; align-items: center; justify-content: center;
        }
        .call-overlay.video .call-video-bg { display: flex; }
        .call-video-hint {
            display: flex; flex-direction: column; align-items: center; gap: 10px;
            color: rgba(255,255,255,0.55); font-size: 15px;
        }
        .call-video-hint i { font-size: 40px; opacity: 0.5; animation: callPulse 1.6s ease-in-out infinite; }
        @keyframes callPulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.06); } }
        .call-stage {
            position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px;
            padding: 0 24px 40px; width: 100%; max-width: 520px;
        }
        .call-avatar {
            width: 110px; height: 110px; border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-peach), var(--primary)); color: #fff;
            font-size: 48px; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 12px 40px rgba(255,107,53,0.4), inset 0 -4px 12px rgba(0,0,0,0.15);
            border: 4px solid rgba(255,255,255,0.18);
            animation: callAvatarIn 0.45s cubic-bezier(0.2,0.8,0.2,1);
        }
        @keyframes callAvatarIn { from { transform: scale(0.6) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
        .call-name { font-size: 22px; font-weight: 600; color: #fff; }
        .call-status { font-size: 14px; color: rgba(255,255,255,0.65); min-height: 18px; }
        .call-status.ringing::after {
            content: ''; display: inline-block; width: 4px; height: 16px; margin-left: 2px;
            background: rgba(255,255,255,0.75); vertical-align: -2px;
            animation: callCaret 1s steps(1) infinite;
        }
        @keyframes callCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        .call-timer {
            display: none; font-size: 32px; font-weight: 600; color: #fff;
            font-variant-numeric: tabular-nums; letter-spacing: 2px;
        }
        .call-actions { display: flex; gap: 26px; margin-top: 18px; }
        .call-action-btn {
            width: 64px; display: flex; flex-direction: column; align-items: center; gap: 8px;
            background: transparent; border: none; cursor: pointer; color: rgba(255,255,255,0.9);
        }
        .call-action-btn i {
            width: 56px; height: 56px; border-radius: 50%; font-size: 20px;
            background: rgba(255,255,255,0.14); color: #fff;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s, transform 0.1s;
        }
        .call-action-btn span { font-size: 12px; }
        .call-action-btn:active i { transform: scale(0.92); }
        .call-action-btn.active i { background: #4C8DFF; }
        .call-action-btn.hangup i { background: var(--sos-red); }
        .call-action-btn.hangup:active i { background: var(--sos-red-dark); }
        [data-theme="dark"] .chat-call-btn { background: var(--bg-secondary); }

        /* ===== 撤回提示 / 转发标记 ===== */
        .chat-revoked-tip {
            align-self: center; text-align: center; font-size: 12px; color: var(--text-tertiary);
            padding: 6px 0; max-width: 80%;
        }
        .msg-forward-tag {
            display: inline-block; font-size: 11px; color: var(--text-tertiary);
            background: rgba(0,0,0,0.06); border-radius: 4px; padding: 1px 6px;
            margin-right: 6px; vertical-align: 1px;
        }
        [data-theme="dark"] .msg-forward-tag { background: rgba(255,255,255,0.1); }

        /* ===== 消息转发选择器 ===== */
        .forward-overlay {
            position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 460;
            background: rgba(0,0,0,0.45); display: flex; align-items: flex-end; justify-content: center;
            animation: vrFadeIn 0.2s ease-out;
        }
        .forward-panel {
            width: 100%; max-width: 520px; background: var(--bg-primary);
            border-radius: 20px 20px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
            display: flex; flex-direction: column; max-height: 64vh;
            box-shadow: 0 -6px 30px rgba(0,0,0,0.18); animation: vrSlideUp 0.26s cubic-bezier(0.2,0.8,0.2,1);
        }
        .fp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .fp-header span { font-size: 15px; font-weight: 600; color: var(--text-primary); }
        .fp-close {
            width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--bg-secondary);
            color: var(--text-secondary); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
        }
        .fp-list { overflow-y: auto; display: flex; flex-direction: column; }
        .fp-item { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: var(--radius-md); cursor: pointer; transition: background 0.12s; }
        .fp-item:active { background: var(--bg-secondary); }
        .fp-avatar {
            width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 17px;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .fp-item span { font-size: 15px; color: var(--text-primary); }
        .fp-empty { text-align: center; color: var(--text-tertiary); font-size: 13px; padding: 30px 0; }
        [data-theme="dark"] .forward-panel { background: var(--bg-elevated); }
        [data-theme="dark"] .fp-item:active { background: var(--bg-secondary); }
        /* P2：转发多选选中态 + 底部发送按钮 + 标题提示 */
        .fp-tip { font-size: 12px; color: var(--text-tertiary); font-weight: 400; margin-left: 4px; }
        .fp-item .fp-check { display: none; margin-left: auto; color: #fff; background: var(--primary); border-radius: 50%; width: 18px; height: 18px; font-size: 11px; align-items: center; justify-content: center; }
        .fp-item.selected { background: var(--primary-light, #EFF4FF); }
        .fp-item.selected .fp-check { display: flex; }
        .fp-footer { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border-light, #EFEFEF); }
        .fp-send-btn { width: 100%; border: none; border-radius: var(--radius-md); background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; padding: 12px 0; cursor: pointer; }
        .fp-send-btn:active { opacity: 0.85; }
        /* P2：单条消息置顶条 + 置顶气泡高亮 */
        #chatPinnedBar { display: none; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-light, #EFEFEF); font-size: 13px; color: var(--text-secondary); }
        #chatPinnedBar .fa-thumbtack { color: var(--primary); }
        #chatPinnedBar .cpb-text { display: flex; flex-direction: column; line-height: 1.3; overflow: hidden; flex: 1; }
        #chatPinnedBar .cpb-head { font-weight: 600; color: var(--text-primary); font-size: 12px; }
        #chatPinnedBar .cpb-body { color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #chatPinnedBar .cpb-close { margin-left: auto; color: var(--text-tertiary); padding: 4px; }
        .chat-bubble.pinned-bubble { box-shadow: inset 3px 0 0 var(--primary); }
        /* P2：长按菜单禁用态（如撤回超时） */
        .longpress-menu-item.disabled { color: var(--text-disabled); pointer-events: none; opacity: 0.6; }
        .longpress-menu-item.disabled i { color: var(--text-disabled); }
        /* P2：关怀模式覆盖聊天页（放大字号与行距） */
        .elder-font .chat-bubble { font-size: 18px; line-height: 1.7; }
        .elder-font .chat-time-label, .elder-font .chat-revoked-tip { font-size: 14px; }
        .elder-font .vr-duration { font-size: 16px; }


        /* ===== 聊天+号功能面板 ===== */
        .chat-plus-panel, .chat-album-panel {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
            background: var(--bg-primary); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            box-shadow: 0 -4px 24px rgba(0,0,0,0.12); transform: translateY(100%);
            transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
            padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
            max-height: 72vh; display: flex; flex-direction: column;
        }
        .chat-plus-panel.open, .chat-album-panel.open { transform: translateY(0); }
        .chat-plus-panel .cpp-header, .chat-album-panel .cap-header {
            display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
        }
        .chat-plus-panel .cpp-title, .chat-album-panel .cap-title {
            font-size: 15px; font-weight: 600; color: var(--text-primary);
        }
        .chat-plus-panel .cpp-close, .chat-album-panel .cap-close {
            width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--bg-secondary);
            color: var(--text-secondary); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
        }
        .cpp-grid {
            display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; overflow-y: auto;
        }
        .cpp-item {
            display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: var(--radius);
            cursor: pointer; transition: background 0.15s; user-select: none;
        }
        .cpp-item:active { background: var(--bg-secondary); }
        .cpp-icon {
            width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
            font-size: 26px; color: var(--text-secondary);
            background: var(--bg-secondary); border: 1px solid var(--border-light);
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .cpp-item:active .cpp-icon { background: var(--border-light); color: var(--text-primary); }
        .cpp-label { font-size: 12px; color: var(--text-secondary); text-align: center; }

        /* 相册选择全屏页 */
        .chat-album-page { flex-direction: column; min-height: 100vh; background: var(--bg-secondary); }
        .cap-toolbar {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 16px; background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light); flex-shrink: 0;
        }
        .cap-count { font-size: 14px; color: var(--text-primary); font-weight: 600; }
        .cap-hint { font-size: 12px; color: var(--text-tertiary); }
        .cap-scroll {
            flex: 1; overflow-y: auto; padding: 12px 14px;
            -webkit-overflow-scrolling: touch;
        }
        .cap-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
        }
        .cap-item {
            position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden;
            cursor: pointer; background: var(--bg-secondary);
            transition: transform 0.12s ease;
        }
        .cap-item:active { transform: scale(0.97); }
        .cap-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .cap-item.video::after {
            content: '▶'; position: absolute; inset: 0; display: flex;
            align-items: center; justify-content: center; color: #fff;
            font-size: 22px; text-shadow: 0 1px 4px rgba(0,0,0,0.4);
        }
        .cap-item.selected::before {
            content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.18); z-index: 1;
            border-radius: 4px;
        }
        .cap-check {
            position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.9); background: rgba(0,0,0,0.18); color: #fff;
            font-size: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700;
            z-index: 2; transition: all 0.15s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .cap-item.selected .cap-check { background: var(--primary); border-color: var(--primary); transform: scale(1.05); }
        .cap-sendbar {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
            background: var(--bg-primary); border-top: 1px solid var(--border-light); flex-shrink: 0;
        }
        .cap-preview-btn {
            font-size: 14px; color: var(--text-secondary); background: none; border: none;
            cursor: pointer; padding: 8px 6px; transition: color 0.15s;
        }
        .cap-preview-btn:disabled { color: var(--text-quaternary); cursor: not-allowed; }
        .cap-send-btn {
            padding: 9px 24px; border-radius: 22px; border: none; background: var(--primary); color: #fff;
            font-size: 14px; font-weight: 600; cursor: pointer; min-width: 80px; transition: background 0.15s;
        }
        .cap-send-btn:disabled { background: var(--bg-secondary); color: var(--text-quaternary); cursor: not-allowed; }
        .cap-send-btn:not(:disabled):active { opacity: 0.85; }

        /* 聊天消息：图片/视频/位置/店铺/发布卡片 */
        .chat-media-grid { display: grid; gap: 4px; max-width: 68vw; }
        .chat-media-grid.single { grid-template-columns: 1fr; }
        .chat-media-grid.multi-2 { grid-template-columns: repeat(2, 1fr); }
        .chat-media-grid.multi-3 { grid-template-columns: repeat(3, 1fr); }
        .chat-media-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-secondary); aspect-ratio: 1; cursor: pointer; }
        .chat-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .chat-media-item.video::after { content: '▶'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
        .chat-location-card {
            width: 220px; background: var(--bg-primary); border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
            border: 1px solid var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .chat-location-map {
            height: 110px; background: linear-gradient(135deg,#BBF7D0,#86EFAC); display: flex; align-items: center; justify-content: center; color: #166534; font-size: 13px; position: relative;
        }
        .chat-location-map i { font-size: 28px; position: absolute; color: var(--sos-red); text-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        .chat-location-info { padding: 10px 12px; }
        .chat-location-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
        .chat-location-addr { font-size: 12px; color: var(--text-tertiary); line-height: 1.4; }
        .chat-shop-card, .chat-post-card {
            width: 230px; background: var(--bg-primary); border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
            border: 1px solid var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .chat-shop-thumb, .chat-post-thumb {
            height: 110px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 13px; overflow: hidden;
        }
        .chat-shop-thumb img, .chat-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .chat-shop-info, .chat-post-info { padding: 10px 12px; }
        .chat-shop-name, .chat-post-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; line-height: 1.35; }
        .chat-shop-meta { font-size: 12px; color: var(--text-tertiary); }
        .chat-post-meta { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
        .chat-post-tag { padding: 1px 6px; border-radius: 4px; font-size: 11px; color: #fff; background: var(--primary); }
        .chat-bubble.sent .chat-location-card, .chat-bubble.sent .chat-shop-card, .chat-bubble.sent .chat-post-card { border-color: rgba(255,255,255,0.25); }

        /* 选择器通用样式 */
        .picker-search-row {
            display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-primary); border-bottom: 1px solid var(--border-light);
        }
        .picker-search-row input {
            flex: 1; border: none; background: var(--bg-secondary); border-radius: 20px; padding: 9px 14px; font-size: 14px; color: var(--text-primary); outline: none;
        }
        .picker-select-list { padding: 12px 16px; }
        .picker-select-item {
            display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-primary); border-radius: var(--radius-md); margin-bottom: 10px; cursor: pointer;
            border: 2px solid transparent; transition: border-color 0.15s;
        }
        .picker-select-item.selected { border-color: var(--primary); }
        .picker-select-item .psi-check {
            width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; flex-shrink: 0;
        }
        .picker-select-item.selected .psi-check { background: var(--primary); border-color: var(--primary); }
        .picker-select-item .psi-body { flex: 1; min-width: 0; }
        .picker-select-item .psi-title { font-size: 14px; color: var(--text-primary); font-weight: 500; }
        .picker-select-item .psi-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
        .picker-select-thumb {
            width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 22px; flex-shrink: 0; overflow: hidden;
        }
        .picker-select-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .picker-footer {
            position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background: var(--bg-primary); border-top: 1px solid var(--border-light); display: flex; gap: 10px; z-index: 10;
        }
        .picker-footer .btn-primary { flex: 1; }
        .picker-footer .btn-secondary { flex: 1; }
        .picker-empty { padding: 48px 20px; text-align: center; color: var(--text-tertiary); font-size: 14px; }
        .camera-page-body { display: flex; flex-direction: column; height: calc(100vh - 56px); background: #000; }
        .camera-viewport { flex: 1; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 14px; position: relative; overflow: hidden; }
        .camera-viewport img { width: 100%; height: 100%; object-fit: cover; }
        .camera-focus-frame { position: absolute; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius-md); }
        .camera-controls { padding: 20px 24px calc(24px + env(safe-area-inset-bottom,0px)); display: flex; align-items: center; justify-content: space-around; background: #000; }
        .camera-switch-btn, .camera-gallery-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 18px; cursor: pointer; }
        .camera-shutter-btn { width: 66px; height: 66px; border-radius: 50%; border: 4px solid #fff; background: #fff; cursor: pointer; position: relative; }
        .camera-shutter-btn::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
        .camera-shutter-btn.recording::after { background: var(--sos-red); border-radius: var(--radius-xs); }
        .camera-mode-switch { display: flex; justify-content: center; gap: 20px; margin-bottom: 14px; background: #000; padding-top: 10px; }
        .camera-mode-switch span { color: rgba(255,255,255,0.6); font-size: 14px; cursor: pointer; }
        .camera-mode-switch span.active { color: #fff; font-weight: 600; }
        .basic-sticker .basic-emoji-wrap { width: 72px; height: 72px; }
        .chat-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-tertiary); font-size: var(--font-size-sm); gap:8px; }

        /* ===== 社区表情包 ===== */
        .chat-emoji-btn { width: 36px; height: 36px; border: none; background: none; color: var(--text-secondary); font-size: 26px; cursor: pointer; flex-shrink: 0; border-radius: 50%; transition: background 0.15s, color 0.15s; }
        .chat-emoji-btn:hover { color: var(--text-primary); }
        .chat-emoji-btn:active { background: var(--bg-secondary); }
        .sticker-panel { max-height: 0; overflow: hidden; background: var(--bg-primary); border-top: 1px solid var(--border-light); transition: max-height .28s cubic-bezier(.2,.8,.2,1); flex-shrink: 0; }
        .sticker-panel.open { max-height: 272px; }
        .sticker-panel-tabs { display: flex; gap: 6px; padding: 8px 12px 6px; overflow-x: auto; }
        .sticker-panel-tabs::-webkit-scrollbar { display: none; }
        .sticker-tab { flex-shrink: 0; padding: 5px 13px; border-radius: var(--radius-full); font-size: var(--font-size-xs); background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-light); cursor: pointer; white-space: nowrap; transition: all .15s; }
        .sticker-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
        .sticker-panel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px 12px 14px; overflow-y: auto; max-height: 214px; }
        .sticker-item { display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: var(--radius); cursor: pointer; min-height: 52px; transition: background .15s; }
        .sticker-item:active { background: var(--bg-secondary); }
        .sticker-item .stk-sticker { width: 60px; height: 60px; }
        /* 贴纸消息气泡（透明底，像图片消息） */
        .chat-bubble.sticker-bubble { background: none; box-shadow: none; padding: 2px; max-width: 60%; }
        .stk-bubble-wrap { display: flex; }
        .stk-sticker { width: 104px; height: 104px; display: block; }
        .elder-mode .stk-sticker { width: 150px; height: 150px; }
        .elder-mode .sticker-item .stk-sticker { width: 76px; height: 76px; }
        /* 表情面板增强 */
        .emoji-basic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px 12px 14px; overflow-y: auto; max-height: 230px; }
        .emoji-basic-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 2px; border-radius: var(--radius); cursor: pointer; transition: background .15s; gap: 4px; }
        .emoji-basic-item:active { background: var(--bg-secondary); }
        .emoji-basic-item svg { width: 44px; height: 44px; }
        .emoji-basic-item span { font-size: 10px; color: var(--text-secondary); white-space: nowrap; }
        .emoji-dynamic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 8px 14px; overflow-y: auto; max-height: 230px; }
        .emoji-dynamic-item { display: flex; flex-direction: column; border-radius: var(--radius-lg); cursor: pointer; transition: transform .15s, box-shadow .15s; overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border-light); }
        .emoji-dynamic-item:active { transform: scale(0.96); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .emoji-dynamic-item svg { width: 100%; aspect-ratio: 1; display: block; }
        .emoji-dynamic-item .stk-label { font-size: 10px; color: var(--text-secondary); text-align: center; padding: 4px 2px; line-height: 1.3; background: var(--bg-primary); border-top: 1px solid var(--border-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .chat-bubble.sticker-bubble { background: none !important; box-shadow: none !important; padding: 2px !important; }
        .chat-bubble.sticker-bubble.basic-emoji-sticker svg { width: 72px; height: 72px; }
        .chat-bubble.sticker-bubble.dynamic-sticker svg { width: 140px; height: 140px; border-radius: var(--radius-lg); }
        .elder-mode .chat-bubble.sticker-bubble.dynamic-sticker svg { width: 180px; height: 180px; }

        /* ===== 家庭群增强样式 ===== */
        .chat-group-settings-btn {
            width: 34px; height: 34px; border: none; background: none;
            color: var(--text-secondary); font-size: 16px; cursor: pointer;
            display: flex; align-items: center; justify-content: center; border-radius: 50%;
            transition: background 0.15s, color 0.15s;
        }
        .chat-group-settings-btn:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
        /* 好友设置按钮（私聊头部，紧邻群设置） */
        .chat-friend-settings-btn {
            width: 34px; height: 34px; border: none; background: none;
            color: var(--text-secondary); font-size: 17px; cursor: pointer;
            display: flex; align-items: center; justify-content: center; border-radius: 50%;
            transition: background 0.15s, color 0.15s; margin-left: 4px;
        }
        .chat-friend-settings-btn:hover { background: rgba(0,0,0,0.05); color: var(--primary); }
        /* 群设置按钮：推至聊天头部最右侧 */
        #chatGroupSettingsBtn { margin-left: auto; }
        .chat-sub-info { font-size: 12px !important; }

        /* 家庭群快捷语栏 */
        .fg-quick-bar {
            display: flex; gap: 6px; padding: 6px 14px 8px;
            background: var(--bg-primary); border-top: 1px solid var(--border-light);
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            flex-shrink: 0;
        }
        .fg-quick-bar::-webkit-scrollbar { display: none; }
        .fg-quick-tag {
            flex-shrink: 0; padding: 5px 12px; border: 1px solid rgba(139,92,246,0.2);
            border-radius: 20px; background: rgba(139,92,246,0.06);
            color: #7C3AED; font-size: 12px; white-space: nowrap; cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .fg-quick-tag:hover, .fg-quick-tag:active { background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.35); }

        /* 家庭群空状态 */
        .fg-empty-state { text-align: center; padding: 32px 20px; }
        .fg-empty-avatars { display: flex; justify-content: center; gap: -8px; margin-bottom: 16px; }
        .fg-empty-avatar {
            width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 15px; font-weight: 600; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1);
        }
        .fg-empty-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
        .fg-empty-desc { font-size: 13px; color: var(--text-tertiary); line-height: 1.6; margin-bottom: 18px; }
        .fg-empty-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
        .fg-empty-action-btn {
            padding: 7px 16px; border: 1px solid var(--border); border-radius: 20px;
            background: var(--bg-secondary); color: var(--text-secondary);
            font-size: 12px; cursor: pointer; transition: all 0.15s;
        }
        .fg-empty-action-btn:hover, .fg-empty-action-btn:active { border-color: #8B5CF6; color: #7C3AED; background: rgba(139,92,246,0.05); }

        /* 系统消息气泡 */
        .chat-system-tip {
            align-self: center; max-width: 85%; text-align: center;
            padding: 6px 14px; border-radius: var(--radius-md); font-size: 12px;
            background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(109,40,217,0.08));
            color: #7C3AED; line-height: 1.5; border: 1px solid rgba(139,92,246,0.12);
        }

        /* 成员角色标签 */
        .fg-role-tag {
            display: inline-block; font-size: 12px; padding: 1px 5px; border-radius: 4px;
            vertical-align: middle; margin-left: 4px; font-weight: 500; line-height: 1.4;
        }
        .fg-role-owner { background: #FEF3C7; color: #D97706; }    /* 主家长 */
        .fg-role-parent { background: #DBEAFE; color: #2563EB; }   /* 家长 */
        .fg-role-child { background: #FCE7F3; color: #DB2777; }    /* 儿童 */

        /* 消息发送者头像（群聊） */
        .fg-msg-avatar {
            width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
            justify-content: center; color: #fff; font-size: 14px; font-weight: 600; flex-shrink: 0;
        }
        .fg-bubble-row { display: flex; align-items: flex-start; gap: 6px; max-width: 80%; }
        .fg-bubble-row.mine-row { flex-direction: row-reverse; align-self: flex-end; }
        .fg-bubble-row .chat-bubble { max-width: 100%; }
        /* 名字 + 气泡 的外层列：名字脱离气泡、独立显示在气泡上方 */
        .fg-bubble-col { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }

        /* ===== 家庭群设置弹窗 ===== */
        .fg-settings-overlay {
            position: fixed; inset: 0; z-index: var(--z-toast); display: none;
            background: rgba(0,0,0,0.25); animation: fgOverlayIn 0.2s ease-out;
        }
        .fg-settings-overlay.show { display: block; }
        @keyframes fgOverlayIn { from{opacity:0;} to{opacity:1;} }
        .fg-settings-panel {
            position: absolute; bottom: 0; left: 0; right: 0;
            max-height: 82vh; background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            animation: fgPanelUp 0.28s cubic-bezier(.2,.8,.2,1);
            display: flex; flex-direction: column; overflow: hidden;
        }
        @keyframes fgPanelUp { from{transform:translateY(100%);} to{transform:translateY(0);} }
        .fg-settings-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 18px; border-bottom: 1px solid #f0f0f0; position: sticky; top: 0; background: #fff; z-index: 1;
        }
        .fg-settings-header strong { font-size: 16px; color: #222; }
        .fg-settings-body { flex: 1; overflow-y: auto; padding: 4px 0; }
        .fg-setting-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 13px 18px; font-size: 13px; color: var(--text-secondary);
        }
        .fg-section-title {
            padding: 14px 18px 8px; font-size: 13px; font-weight: 600; color: var(--text-primary);
        }
        .fg-member-list { padding: 4px 18px 12px; }
        .fg-member-item {
            display: flex; align-items: center; gap: 10px; padding: 8px 0;
            border-bottom: 1px solid #f7f7f7;
        }
        .fg-member-item:last-child { border-bottom: none; }
        .fg-member-avatar {
            width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center;
            justify-content: center; color: #fff; font-size: 13px; font-weight: 600; flex-shrink: 0;
        }
        .fg-member-name { font-size: 14px; color: #333; font-weight: 500; }
        .fg-member-meta { font-size: 12px; color: #999; margin-top: 1px; }
        .fg-member-body { flex: 1; min-width: 0; }
        /* 关系称呼设置按钮（群管理成员列表右侧） */
        .fg-rel-set-btn {
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px;
            padding: 4px 10px; border-radius: var(--radius); border: 0.5px solid var(--border);
            background: var(--bg-primary); color: var(--text-tertiary); font-size: 12px; cursor: pointer;
        }
        .fg-rel-set-btn.has-value { color: var(--primary); border-color: rgba(255,107,53,0.35); background: #FFF0E5; }
        .fg-rel-set-btn i { font-size: 10px; }
        /* 关系选择器内的称谓 chip 与建议项 */
        .fg-rel-chip {
            padding: 7px 14px; border-radius: 16px; border: 0.5px solid var(--border);
            background: var(--bg-primary); color: var(--text-primary); font-size: 13px; cursor: pointer;
        }
        .fg-rel-chip:active { background: var(--bg-secondary); }
        .fg-rel-suggest-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 14px; border-radius: 16px; border: 0.5px dashed var(--primary);
            background: #FFF0E5; color: var(--primary); font-size: 13px; cursor: pointer; margin-bottom: 8px;
        }
        /* 家庭家谱（P2） */
        .ft-tier { margin-bottom: 18px; }
        .ft-tier-label { font-size: 12px; color: var(--text-tertiary); text-align: center; margin-bottom: 8px; }
        .ft-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
        .ft-node { display: flex; flex-direction: column; align-items: center; width: 72px; }
        .ft-avatar {
            width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center;
            justify-content: center; color: #fff; font-size: 15px; font-weight: 600; overflow: hidden;
        }
        .ft-name { font-size: 13px; color: var(--text-primary); margin-top: 6px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ft-rel { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
        .ft-empty { font-size: 12px; color: var(--text-tertiary); text-align: center; }
        /* 多家长共同管理面板 */
        .co-item { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-light); }
        .co-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; flex-shrink: 0; }
        .co-name { flex: 1; min-width: 0; font-size: 14px; color: var(--text-primary); }
        .co-rel { font-size: 12px; color: var(--text-tertiary); }
        .fg-switch-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 18px; border-bottom: 1px solid #f7f7f7;
        }
        .fg-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
        .fg-switch input { opacity: 0; width: 0; height: 0; }
        .fg-slider {
            position: absolute; inset: 0; cursor: pointer; border-radius: var(--radius-md);
            transition: 0.2s; background: #d1d5db;
        }
        .fg-slider:before {
            content:''; position: absolute; height: 20px; width: 20px; left: 2px; bottom: 2px;
            border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: 0.2s;
        }
        .fg-switch input:checked + .fg-slider { background: linear-gradient(135deg,#8B5CF6,#7C3AED); }
        .fg-switch input:checked + .fg-slider:before { transform: translateX(20px); }
        .fg-settings-footer {
            padding: 14px 18px 22px; border-top: 1px solid #f0f0f0;
        }
        .fg-btn-danger {
            width: 100%; padding: 11px; border: 1px solid #FEE2E2; border-radius: var(--radius-md);
            background: #FEF2F2; color: var(--sos-red-dark); font-size: 13px; font-weight: 500;
            cursor: pointer; transition: all 0.15s;
        }
        .fg-btn-danger:hover, .fg-btn-danger:active { background: #FEE2E2; }
        /* 好友设置：链接行（查找聊天记录）与 警告/举报 按钮 */
        .fg-link-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 13px 4px; cursor: pointer; color: var(--text-primary); font-size: 13px;
        }
        .fg-link-row:active { background: var(--bg-secondary); }
        .fg-btn-warn {
            width: 100%; padding: 11px; border: 1px solid #FEF3C7; border-radius: var(--radius-md);
            background: #FFFBEB; color: #B45309; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s;
        }
        .fg-btn-warn:hover, .fg-btn-warn:active { background: #FEF3C7; }
        .fg-btn-report {
            width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-md);
            background: var(--bg-primary); color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all 0.15s;
        }
        .fg-btn-report:hover, .fg-btn-report:active { background: var(--bg-secondary); }

        /* ===== 聊天链接卡片（商家/商品） ===== */
        .chat-link-card {
            display: flex; align-items: center; gap: 10px;
            padding: 10px; background: var(--bg-primary); border-radius: var(--radius);
            border: 1px solid var(--border); cursor: pointer;
            transition: background 0.15s;
            max-width: 260px;
        }
        .chat-bubble.sent .chat-link-card { background: rgba(255,106,51,0.08); border-color: rgba(255,106,51,0.15); }
        .chat-bubble.sent .chat-link-card .chat-link-card__title { color: var(--primary); }
        .chat-bubble.sent .chat-link-card .chat-link-card__subtitle { color: rgba(255,106,51,0.6); }
        .chat-bubble.sent .chat-link-card .chat-link-card__price { color: var(--primary); font-weight: 600; }
        .chat-bubble.sent .chat-link-card .chat-link-card__tag { background: rgba(255,106,51,0.12); color: var(--primary); }
        .chat-bubble.sent .chat-link-card .chat-link-card__arrow { color: rgba(255,106,51,0.4); }
        .chat-link-card:active { background: var(--bg-secondary); }
        .chat-bubble.sent .chat-link-card:active { background: rgba(255,106,51,0.15); }
        .chat-link-card__thumb {
            width: 48px; height: 48px; border-radius: var(--radius-sm);
            background: var(--bg-secondary); flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden; font-size: 20px; color: var(--primary);
        }
        .chat-link-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
        .chat-link-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        .chat-link-card__title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .chat-link-card__subtitle { font-size: var(--font-size-xs); color: var(--text-tertiary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .chat-link-card__meta { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
        .chat-link-card__price { font-size: var(--font-size-xs); font-weight: 700; color: var(--primary); }
        .chat-link-card__tag {
            display: inline-flex; align-items: center; gap: 2px;
            font-size: 12px; padding: 1px 5px; border-radius: var(--radius-xs);
            background: var(--primary-light); color: var(--primary); font-weight: 500; flex-shrink: 0;
        }
        .chat-link-card__arrow { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; margin-left: 2px; }

        /* 搜索结果 */
        .search-results-list { padding: 0; }
        .search-result-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--bg-primary); border-radius: var(--radius); margin-bottom: 10px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
        .search-result-item:active { background: var(--bg-secondary); }
        .search-result-cat { font-size: var(--font-size-xs); color: var(--primary); background: var(--primary-light); padding: 2px 8px; border-radius: var(--radius-xs); font-weight: 500; flex-shrink:0; }
        .search-result-title { font-size: var(--font-size-sm); color: var(--text-primary); line-height: 1.4; flex:1; }
        .search-result-empty { text-align: center; padding: 48px 16px; color: var(--text-tertiary); }
        .search-result-empty i { font-size: 40px; opacity: 0.3; margin-bottom: 10px; display:block; }
        .search-filter-bar { display: flex; gap: 8px; padding: 10px 0; overflow-x: auto; }
        .search-filter-tag { padding: 6px 14px; border-radius: var(--radius-lg); font-size: var(--font-size-xs); background: var(--border-light); color: var(--text-secondary); white-space: nowrap; cursor: pointer; border: none; flex-shrink:0; }
        .search-filter-tag.active { background: var(--primary); color: #fff; }
        .search-result-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 4px; display:flex; gap:8px; align-items:center; }

        /* 设置子页面 */
        .settings-sub-page { padding: 16px; padding-bottom: 80px; }
        .settings-sub-page .settings-group { margin-bottom: 16px; }
        .settings-sub-title { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
        .settings-sub-desc { font-size: var(--font-size-sm); color: var(--text-tertiary); line-height: 1.5; margin-bottom: 20px; }
        .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
        .settings-toggle-label { font-size: var(--font-size-sm); color: var(--text-primary); }
        .settings-toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--border); cursor: pointer; position: relative; transition: background 0.2s; border: none; padding: 0; }
        .settings-toggle.on { background: var(--primary); }
        .settings-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-primary); transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
        .settings-toggle.on::after { transform: translateX(18px); }
        .settings-font-row { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-light); }
        .settings-font-sample { flex: 1; text-align: center; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; border: 2px solid transparent; }
        .settings-font-sample.active { border-color: var(--primary); background: var(--primary-light); }
        .settings-font-sample.small { font-size: var(--font-size-sm); }
        .settings-font-sample.medium { font-size: var(--font-size-base); }
        .settings-font-sample.large { font-size: var(--font-size-xl); }
        .settings-info-card { background: var(--bg-primary); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
        .settings-info-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: var(--font-size-sm); border-bottom: 1px solid var(--border-light); }
        .settings-info-row:last-child { border-bottom: none; }
        .settings-info-label { color: var(--text-tertiary); }
        .settings-info-value { color: var(--text-primary); text-align: right; }

        /* 认证进度页面 */
        .auth-progress-page { padding: 16px; }
        .auth-progress-steps { position: relative; margin: 24px 0; }
        .auth-progress-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; position: relative; }
        .auth-progress-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: 600; flex-shrink: 0; z-index: 1; }
        .auth-progress-dot.done { background: var(--success); color: #fff; }
        .auth-progress-dot.current { background: var(--primary); color: #fff; animation: pulse 1.5s infinite; }
        .auth-progress-dot.pending { background: var(--border); color: var(--text-tertiary); }
        .auth-progress-info { flex: 1; }
        .auth-progress-title { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary); }
        .auth-progress-time { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .auth-fail-card { background: var(--danger-light); border: 1px solid #FFD0D0; border-radius: var(--radius); padding: 16px; margin: 16px 0; }
        .auth-fail-title { font-size: var(--font-size-sm); font-weight: 600; color: #D32F2F; margin-bottom: 6px; }
        .auth-fail-reason { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; }
        .auth-renew-card { background: var(--bg-primary); border-radius: var(--radius); padding: 16px; margin: 12px 0; border: 1px solid var(--border); }
        .auth-renew-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
        .auth-renew-info { font-size: var(--font-size-sm); color: var(--text-tertiary); line-height: 1.5; }
        .auth-renew-btn { width: 100%; padding: 12px; border: none; border-radius: var(--radius); background: var(--primary); color: #fff; font-size: var(--font-size-base); font-weight: 600; cursor: pointer; margin-top: 12px; }
        .auth-renew-btn:active { opacity: 0.8; }
        @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,109,59,0.4); } 50% { box-shadow: 0 0 0 8px rgba(255,109,59,0); } }

        /* ========== 深色模式 ========== */
        [data-theme="dark"] {
            color-scheme: dark;
            --text-primary: #D1D1D6;
            --text-secondary: #8E8E93;
            --text-tertiary: #636366;
            --text-disabled: #48484A;
            --bg-primary: #1C1C1E;
            --bg-secondary: #2C2C2E;
            --bg-tertiary: #3A3A3C;
            --bg-elevated: #2C2C2E;
            --border: #3A3A3C;
            --border-light: #333336;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
            --shadow: 0 1px 4px rgba(0,0,0,0.3);
            --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
            --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
            /* P1-5 修复：浅色「柔底」令牌在暗色主题下改为半透明浅色，不再露出亮块 */
            --warning-light: rgba(255,152,0,0.16);
            --success-light: rgba(76,175,80,0.16);
            --danger-light: rgba(244,67,54,0.16);
            --info-light: rgba(33,150,243,0.16);
            --warning-soft: rgba(255,152,0,0.12);
            --pink-soft: rgba(255,45,85,0.15);
            --danger-soft: rgba(244,67,54,0.15);
            --teal-soft: rgba(12,166,120,0.15);
            --neutral-soft: rgba(142,142,147,0.16);
            --bg-input: #2C2C2E;
            --primary-alpha: rgba(255,109,59,0.20);
            /* P3-4 补充：暗色下投影层级加深，保证贴图感一致 */
            --shadow-1: 0 1px 2px rgba(0,0,0,0.3);
            --shadow-2: 0 2px 8px rgba(0,0,0,0.45);
            --shadow-3: 0 8px 24px rgba(0,0,0,0.6);
            --focus-ring: #7B8CFF;
        }
        [data-theme="dark"] body,
        [data-theme="dark"] .page { background: var(--bg-secondary); }
        [data-theme="dark"] .page-header,
        [data-theme="dark"] .header,
        [data-theme="dark"] .header-search-row,
        [data-theme="dark"] .category-tab-bar,
        [data-theme="dark"] #globalBottomNav,
        [data-theme="dark"] .search-history-item,
        [data-theme="dark"] .settings-info-card,
        [data-theme="dark"] .search-result-item,
        [data-theme="dark"] .home-section-title,
        [data-theme="dark"] .chat-header,
        [data-theme="dark"] .chat-input-area { background: var(--bg-primary); }
        [data-theme="dark"] .nav-item { color: var(--text-tertiary); }
        [data-theme="dark"] .nav-item.active { color: var(--primary); }
        [data-theme="dark"] .category-item { background: transparent; }
        [data-theme="dark"] .feed-tab { background: var(--bg-primary) !important; }
        [data-theme="dark"] .chat-bubble.received { background: var(--bg-elevated); color: var(--text-primary); }
        [data-theme="dark"] .chat-bubble.sent { background: rgba(255,106,51,0.15); color: var(--accent-peach); }
        [data-theme="dark"] #chatInput { background: var(--bg-secondary); border-color: var(--border); color: var(--text-primary); }
        [data-theme="dark"] .category-tab-bar::-webkit-scrollbar,
        [data-theme="dark"] .search-filter-bar::-webkit-scrollbar { height: 0; }

        /* ===== 深色模式补充 ===== */
        /* 1. 我的页面 - 背景 */
        [data-theme="dark"] .profile-header-new::after { background: rgba(0,0,0,0.4); }
        [data-theme="dark"] .profile-header-new,
        [data-theme="dark"] .settings-group,
        [data-theme="dark"] .settings-info-card,
        [data-theme="dark"] .post-card,
        [data-theme="dark"] .swap-card,
        [data-theme="dark"] .merchant-card,
        [data-theme="dark"] .checkin-card,
        [data-theme="dark"] .sub-page-tabs,
        [data-theme="  "]
<parameter name="new_string">        [data-theme="dark"] .tab-bar,
        [data-theme="dark"] .modal-content,
        [data-theme="dark"] .bottom-sheet,
        [data-theme="dark"] .conv-item { background: var(--bg-primary); }

        /* 基础组件深色覆盖：确保主按钮/导航/卡片在暗色下可读、不糊 */
        [data-theme="dark"] .btn-primary { background: var(--primary-dark); color: var(--text-white); box-shadow: 0 4px 12px rgba(255,109,59,0.35); }
        [data-theme="dark"] .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border); }
        [data-theme="dark"] .bottom-nav { background: var(--bg-elevated); border-top-color: var(--border); }
        [data-theme="dark"] .card { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border); }

        /* 2. 消息页面 - 背景 */
        [data-theme="dark"] .conv-page { background: var(--bg-secondary); }

        /* 3. 分割线和边框 */
        [data-theme="dark"] .settings-item::after { background: var(--border-light); }
        [data-theme="dark"] .profile-stat-divider { background: var(--border); }
        /* 4. 访客/粉丝/关注列表条目 - 去除背景 */
        [data-theme="dark"] .visitor-item { background: transparent !important; }

        /* 4. 主文本颜色 */
        [data-theme="dark"] .settings-item-label,
        [data-theme="dark"] .profile-name-row,
        [data-theme="dark"] .profile-stat-value,
        [data-theme="dark"] .post-card-title,
        [data-theme="dark"] .conv-name,
        [data-theme="dark"] .sub-page-tab.active { color: var(--text-primary); }

        /* 5. 次要文本颜色 */
        [data-theme="dark"] .profile-auth-inline,
        [data-theme="dark"] .profile-stat-label,
        [data-theme="dark"] .settings-item-right,
        [data-theme="dark"] .post-card-desc,
        [data-theme="dark"] .conv-time,
        [data-theme="dark"] .conv-preview,
        [data-theme="dark"] .post-card-meta,
        [data-theme="dark"] .feed-tab,
        [data-theme="dark"] .swap-filter-tab,
        [data-theme="dark"] .sub-page-tab { color: var(--text-secondary); }

        /* 6. 三级文本颜色 */
        [data-theme="dark"] .post-card-meta { color: var(--text-tertiary); }

        /* 7. 子页面标签 active 状态 */
        [data-theme="dark"] .sub-page-tab.active { color: var(--primary); }

        /* 8. 输入框和表单 */
        [data-theme="dark"] input,
        [data-theme="dark"] textarea,
        [data-theme="dark"] .search-bar { background: transparent; border-color: rgba(255, 109, 59, 0.3); }
        [data-theme="dark"] .search-bar input { background: transparent; color: var(--text-primary); border-color: var(--border); -webkit-text-fill-color: var(--text-primary); }
        [data-theme="dark"] .search-bar input::placeholder { color: var(--text-tertiary); -webkit-text-fill-color: var(--text-tertiary); }
        [data-theme="dark"] #page-search .search-bar { background: var(--bg-elevated); border-color: var(--border); }
        [data-theme="dark"] #page-search .search-bar input { background: transparent; }

        /* 9. 发布页透明背景 */
        [data-theme="dark"] .publish-community-info { background: transparent; }

        /* 10. 首页及通用卡片 */
        [data-theme="dark"] .home-card,
        [data-theme="dark"] .info-card,
        [data-theme="dark"] .quick-action-card,
        [data-theme="dark"] .service-grid-card { background: var(--bg-primary); }

        /* ===== 深色模式补充2 ===== */
        [data-theme="dark"] .home-hero-section { background: transparent; }
        [data-theme="dark"] .about-card,
        [data-theme="dark"] .publish-card,
        [data-theme="dark"] .sos-sent-card { background: var(--bg-primary) !important; }

        [data-theme="dark"] .mypost-category-tag { background: var(--bg-tertiary); color: var(--text-primary); }
        [data-theme="dark"] .health-form-select { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border); }

        /* 深色模式：覆盖硬编码白色/浅色背景 */
        [data-theme="dark"] .service-list-card,
        [data-theme="dark"] .tag-help,
        [data-theme="dark"] .tag-idle,
        [data-theme="dark"] .tag-food,
        [data-theme="dark"] .tag-neighbor,
        [data-theme="dark"] .tag-pet,
        [data-theme="dark"] .tag-lost,
        [data-theme="dark"] .post-card-gradient-2,
        [data-theme="dark"] .post-card-gradient-5,
        [data-theme="dark"] .post-card-gradient-7,
        [data-theme="dark"] .post-card-gradient-10 { background: var(--bg-primary) !important; }

        /* 深色模式：覆盖卡片白色背景 */
        [data-theme="dark"] .history-item,
        [data-theme="dark"] .draft-item,
        [data-theme="dark"] .visitor-card,
        [data-theme="dark"] .coupon-card,
        [data-theme="dark"] .version-log-item,
        [data-theme="dark"] .bl-user-item,
        [data-theme="dark"] .fb-type-card,
        [data-theme="dark"] .hc-faq-item,
        [data-theme="dark"] .pf-fee-card,
        [data-theme="dark"] .pf-account-card,
        [data-theme="dark"] .nd-detail-card,
        [data-theme="dark"] .al-card,

        [data-theme="dark"] .history-thumb { background: linear-gradient(135deg, #3A3A3C, #2C2C2E) !important; }

        /* 深色模式：移除卡片阴影 */
        [data-theme="dark"] .history-item,
        [data-theme="dark"] .draft-item,
        [data-theme="dark"] .visitor-card,
        [data-theme="dark"] .coupon-card,
        [data-theme="dark"] .version-log-item,
        [data-theme="dark"] .bl-user-item,
        [data-theme="dark"] .fb-type-card,
        [data-theme="dark"] .hc-faq-item,
        [data-theme="dark"] .pf-fee-card,
        [data-theme="dark"] .pf-account-card,
        [data-theme="dark"] .nd-detail-card,
        [data-theme="dark"] .al-card,
        [data-theme="dark"] .post-card,
        [data-theme="dark"] .swap-card,
        [data-theme="dark"] .merchant-card,
        [data-theme="dark"] .info-card,
        [data-theme="dark"] .quick-action-card,
        [data-theme="dark"] .service-list-card,
        [data-theme="dark"] .service-grid-card,
        [data-theme="dark"] .home-card,
        [data-theme="dark"] .home-card-section,
        [data-theme="dark"] .settings-group,
        [data-theme="dark"] .settings-info-card,
        [data-theme="dark"] .post-card-gradient-2,
        [data-theme="dark"] .post-card-gradient-5,
        [data-theme="dark"] .post-card-gradient-7,
        [data-theme="dark"] .post-card-gradient-10,
        [data-theme="dark"] .msg-group,
        [data-theme="dark"] .about-card,
        [data-theme="dark"] .publish-card,
        [data-theme="dark"] .sos-sent-card,
        [data-theme="dark"] .search-result-item,
        [data-theme="dark"] .checkin-card,
        [data-theme="dark"] .sub-page-tabs,
        [data-theme="dark"] .tab-bar,
        [data-theme="dark"] .modal-content,
        [data-theme="dark"] .bottom-sheet,

        /* 暗色模式下详情框内 AI 按钮背景 */
        [data-theme="dark"] .ai-toolbar-btn { background: rgba(50,50,52,0.85); color: var(--text-secondary); border-color: var(--border); }
        [data-theme="dark"] .ai-toolbar-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

        [data-theme="dark"] .merchant-contribution-board,
        [data-theme="dark"] .merchant-promise-card,
        [data-theme="dark"] .merchant-price-item,
        [data-theme="dark"] .merchant-reputation-summary,
        [data-theme="dark"] .merchant-convention-check { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merchant-promise-card > i { background: rgba(46,204,113,0.18) !important; color: #3DDC84 !important; }
        [data-theme="dark"] .merchant-promise-empty { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merchant-promise-empty i { color: var(--text-tertiary) !important; }

        [data-theme="dark"] .merchant-convention-section {
            background: linear-gradient(135deg, rgba(255,109,59,0.06), rgba(255,154,108,0.03)) !important;
            border-color: rgba(255,109,59,0.2) !important;
        }

        [data-theme="dark"] .merchant-offer-card {
            background: linear-gradient(135deg, rgba(230,126,34,0.10), rgba(255,154,108,0.05)) !important;
            border-color: rgba(230,126,34,0.25) !important;
        }

        [data-theme="dark"] .merchant-commission-table th { background: var(--bg-tertiary) !important; }
        [data-theme="dark"] .merchant-promise-tag { background: rgba(46,204,113,0.15) !important; color: #3DDC84 !important; }
        [data-theme="dark"] .merchant-promise-tag.gold { background: rgba(230,126,34,0.15) !important; color: #F0A040 !important; }
        [data-theme="dark"] .merchant-promise-tag.blue { background: rgba(0,122,255,0.15) !important; color: #5AAFFA !important; }
        [data-theme="dark"] .merchant-rep-tag { background: rgba(255,109,59,0.12) !important; color: var(--primary) !important; }
        [data-theme="dark"] .merchant-contribution-item { border-color: var(--border-light) !important; }
        [data-theme="dark"] .merchant-commission-table td { border-color: var(--border-light) !important; }

        [data-theme="dark"] .merchant-dc-item,
        [data-theme="dark"] .merchant-disclosure-benefits { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merchant-dc-benefit-tag { background: rgba(46,204,113,0.15) !important; color: #3DDC84 !important; }

        [data-theme="dark"] .merchant-tax-summary,
        [data-theme="dark"] .merchant-tax-row { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merchant-tax-summary .tax-total { color: #7AB8E8 !important; }
        [data-theme="dark"] .merchant-tax-empty { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merchant-supplier-card { background: var(--bg-primary) !important; }
        [data-theme="dark"] .merchant-supplier-header { border-bottom-color: var(--border-light) !important; }
        [data-theme="dark"] .merchant-supplier-item { border-bottom-color: var(--border-light) !important; }
        [data-theme="dark"] .merchant-supplier-note { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merchant-supplier-badge { background: rgba(16,166,120,0.15) !important; }
        [data-theme="dark"] .merchant-supplier-tag { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merchant-voice-item { background: var(--bg-primary) !important; }
        [data-theme="dark"] .merchant-voice-reply { background: var(--bg-secondary) !important; }
        [data-theme="dark"] .merchant-voice-empty { background: var(--bg-primary) !important; }

        [data-theme="dark"] .merchant-detail-nav.nav-stuck { background: var(--bg-primary) !important; border-bottom: 1px solid var(--border-light) !important; }
        [data-theme="dark"] .merchant-product-card { border-bottom-color: var(--border-light) !important; }
        [data-theme="dark"] .merchant-cart-badge { border-color: var(--bg-primary) !important; }
        [data-theme="dark"] .merchant-cart-bar { background: var(--bg-primary) !important; border-top: 1px solid var(--border-light) !important; }
        [data-theme="dark"] .merchant-product-sidebar { background: var(--bg-secondary) !important; border-right-color: var(--border-light) !important; }
        [data-theme="dark"] .merchant-product-list { background: var(--bg-primary) !important; }
        [data-theme="dark"] .merchant-cat-item.active { background: rgba(255,109,59,0.12) !important; }


        [data-theme="dark"] .mypost-action-btn,
        [data-theme="dark"] .about-card-title,
        [data-theme="dark"] .about-feature-name,
        [data-theme="dark"] .swap-condition-text,
        [data-theme="dark"] .about-feature-desc,
        [data-theme="dark"] .about-version { color: var(--text-primary); }

        [data-theme="dark"] .about-card-text,
        [data-theme="dark"] .about-feature-desc { color: var(--text-secondary); }

        [data-theme="dark"] .sos-countdown-cancel { background: var(--bg-elevated); color: var(--text-primary); }

        [data-theme="dark"] .checkin-main-btn { background: var(--bg-elevated); color: #2ED573; }
        [data-theme="dark"] .checkin-main-btn i,
        [data-theme="dark"] .checkin-main-btn span { color: #2ED573; }

        [data-theme="dark"] #page-medication > div[style*="background"] { background: var(--bg-primary) !important; }

        /* ===== 深色模式补充3：分割线统一 ===== */
        [data-theme="dark"] .mypost-footer-row,
        [data-theme="dark"] .about-contact-row,
        [data-theme="dark"] .settings-toggle-row,
        [data-theme="dark"] .settings-font-row,
        [data-theme="dark"] .settings-info-row { border-color: var(--border-light) !important; }

        [data-theme="dark"] .detail-comment-bar,
        [data-theme="dark"] .chat-header,
        [data-theme="dark"] .chat-input-area { border-color: var(--border) !important; }

        /* 深色模式：覆盖所有硬编码的浅色边框线 */
        [data-theme="dark"] .page-header,
        [data-theme="dark"] .chat-header,
        [data-theme="dark"] .about-contact-row,
        [data-theme="dark"] .settings-toggle-row,
        [data-theme="dark"] .settings-font-row,
        [data-theme="dark"] .settings-info-row,
        [data-theme="dark"] .detail-comment-bar,
        [data-theme="dark"] .home-card-section,
        [data-theme="dark"] .feed-tabs,
        [data-theme="dark"] .sub-page-tabs,
        [data-theme="dark"] .tab-bar,
        [data-theme="dark"] .modal-content,
        [data-theme="dark"] .bottom-sheet,
        [data-theme="dark"] .search-filter-bar,
        [data-theme="dark"] .al-card,
        [data-theme="dark"] .history-item,
        [data-theme="dark"] .draft-item,
        [data-theme="dark"] .visitor-card,
        [data-theme="dark"] .coupon-card,
        [data-theme="dark"] .pf-fee-card,
        [data-theme="dark"] .pf-account-card,
        [data-theme="dark"] .nd-detail-card,
        [data-theme="dark"] .hc-faq-item,
        [data-theme="dark"] .fb-type-card,
        [data-theme="dark"] .iv-record-item,
        [data-theme="dark"] .bl-user-item,
        [data-theme="dark"] .version-log-item { border-color: var(--border-light) !important; }

        [data-theme="dark"] .auth-renew-card { border-color: var(--border) !important; }

        [data-theme="dark"] [style*="border-bottom:1px solid #F5F5F5"],
        [data-theme="dark"] [style*="border-bottom:1px solid #f5f5f5"],
        [data-theme="dark"] [style*="border-bottom: 1px solid var(--border-light)"],
        [data-theme="dark"] [style*="border-bottom:1px solid #f0f0f0"],
        [data-theme="dark"] [style*="border-bottom:1px solid #F0F0F5"],
        [data-theme="dark"] [style*="border-bottom: 1px solid var(--border)"],
        [data-theme="dark"] [style*="border-bottom:1px solid #e8e8ed"],
        [data-theme="dark"] [style*="border-top:1px solid #f0f0f0"],
        [data-theme="dark"] [style*="border-top: 1px solid var(--border-light)"],
        [data-theme="dark"] [style*="border-top:1px solid #F5F5F5"],
        [data-theme="dark"] [style*="border-top:1px solid #f5f5f5"],
        [data-theme="dark"] [style*="border: 1px solid var(--border)"],
        [data-theme="dark"] [style*="border:1px solid #e8e8ed"],
        [data-theme="dark"] [style*="border: 1px solid var(--border-light)"],
        [data-theme="dark"] [style*="border:1px solid #f0f0f0"] { border-color: var(--border-light) !important; }

        /* 深色模式：覆盖硬编码白色文字为柔和浅灰 */
        [data-theme="dark"] .community-switch-btn,
        [data-theme="dark"] .home-section-title,
        [data-theme="dark"] .feed-title,
        [data-theme="dark"] .post-card-title,
        [data-theme="dark"] .swap-item-name,
        [data-theme="dark"] .merchant-name,
        [data-theme="dark"] .detail-title,
        [data-theme="dark"] .detail-author-name,
        [data-theme="dark"] .service-card-name,
        [data-theme="dark"] .quick-action-label,
        [data-theme="dark"] .category-name,
        [data-theme="dark"] .sos-title,
        [data-theme="dark"] .sos-info-label,
        [data-theme="dark"] .sos-info-value,
        [data-theme="dark"] .health-section-title,
        [data-theme="dark"] .med-card-title,
        [data-theme="dark"] .med-info-title,
        [data-theme="dark"] .checkin-task-name,
        [data-theme="dark"] .pk-wish-title,
        [data-theme="dark"] .coupon-name,
        [data-theme="dark"] .activity-card-title,
        [data-theme="dark"] .ad-detail-title,
        [data-theme="dark"] .al-card-title,
        [data-theme="dark"] .pf-fee-item-name,
        [data-theme="dark"] .pf-account-info-val,
        [data-theme="dark"] .nd-detail-title,
        [data-theme="dark"] .hc-faq-question,
        [data-theme="dark"] .iv-invite-code-text,
        [data-theme="dark"] .iv-step-desc,
        [data-theme="dark"] .visitor-info-val,
        [data-theme="dark"] .version-current-num,
        [data-theme="dark"] .version-log-version,
        [data-theme="dark"] .cs-quick-question,
        [data-theme="dark"] .fb-type-label,
        [data-theme="dark"] .bl-user-name,
        [data-theme="dark"] .history-item-title,
        [data-theme="dark"] .draft-item-title,
        [data-theme="dark"] .login-title,
        [data-theme="dark"] .forgot-step-title,
        [data-theme="dark"] .order-confirm-product-name,
        [data-theme="dark"] .address-item-name,
        [data-theme="dark"] .review-product-name { color: var(--text-primary) !important; }

        [data-theme="dark"] .home-section-desc,
        [data-theme="dark"] .feed-desc,
        [data-theme="dark"] .post-card-desc,
        [data-theme="dark"] .swap-item-desc,
        [data-theme="dark"] .service-card-desc,
        [data-theme="dark"] .quick-action-desc,
        [data-theme="dark"] .category-desc,
        [data-theme="dark"] .coupon-desc,
        [data-theme="dark"] .activity-card-info,
        [data-theme="dark"] .pf-fee-item-desc,
        [data-theme="dark"] .pf-account-info-label,
        [data-theme="dark"] .nd-detail-meta,
        [data-theme="dark"] .hc-faq-answer,
        [data-theme="dark"] .iv-step-title,
        [data-theme="dark"] .visitor-info-label,
        [data-theme="dark"] .version-log-date,
        [data-theme="dark"] .cs-quick-desc,
        [data-theme="dark"] .fb-type-desc,
        [data-theme="dark"] .bl-user-time,
        [data-theme="dark"] .history-item-meta,
        [data-theme="dark"] .draft-item-meta,
        [data-theme="dark"] .login-subtitle,
        [data-theme="dark"] .forgot-step-desc,
        [data-theme="dark"] .order-confirm-product-desc,
        [data-theme="dark"] .address-item-detail,
        [data-theme="dark"] .review-product-desc { color: var(--text-secondary) !important; }

        /* 深色模式：覆盖内联样式中的白色文字 */
        [data-theme="dark"] [style*="color:#fff"]:not(button):not(.btn-primary):not(.nav-item):not([class*="btn"]),
        [data-theme="dark"] [style*="color: #fff"]:not(button):not(.btn-primary):not(.nav-item):not([class*="btn"]),
        [data-theme="dark"] [style*="color:#FFFFFF"]:not(button):not(.btn-primary):not(.nav-item):not([class*="btn"]),
        [data-theme="dark"] [style*="color: #FFFFFF"]:not(button):not(.btn-primary):not(.nav-item):not([class*="btn"]),
        [data-theme="dark"] [style*="color:white"]:not(button):not(.btn-primary):not(.nav-item):not([class*="btn"]),
        [data-theme="dark"] [style*="color: white"]:not(button):not(.btn-primary):not(.nav-item):not([class*="btn"]) { color: var(--text-primary) !important; }

        /* P2修复：Dark mode 补全 - 硬编码白底/浅色背景覆盖 */
        [data-theme="dark"] [style*="background:#fff"],
        [data-theme="dark"] [style*="background: #fff"],
        [data-theme="dark"] [style*="background:#FFFFFF"],
        [data-theme="dark"] [style*="background: #FFFFFF"],
        [data-theme="dark"] [style*="background:white"],
        [data-theme="dark"] [style*="background: white"] { background: var(--bg-primary) !important; }

        /* P2修复：Dark mode - 硬编码深色文字覆盖 */
        [data-theme="dark"] [style*="color:#333"],
        [data-theme="dark"] [style*="color: #333"],
        [data-theme="dark"] [style*="color:#222"],
        [data-theme="dark"] [style*="color: #222"],
        [data-theme="dark"] [style*="color:#000"],
        [data-theme="dark"] [style*="color: #000"] { color: var(--text-primary) !important; }

        /* P2修复：Dark mode - 硬编码浅色边框覆盖 */
        [data-theme="dark"] [style*="border:1px solid #eee"],
        [data-theme="dark"] [style*="border: 1px solid #eee"],
        [data-theme="dark"] [style*="border:1px solid #E8E8ED"],
        [data-theme="dark"] [style*="border: 1px solid #E8E8ED"],
        [data-theme="dark"] [style*="border:1px solid #F5F5F5"],
        [data-theme="dark"] [style*="border: 1px solid #F5F5F5"],
        [data-theme="dark"] [style*="border:1px solid #F0F0F5"],
        [data-theme="dark"] [style*="border: 1px solid #F0F0F5"],
        [data-theme="dark"] [style*="border:1px solid #D1D1D6"],
        [data-theme="dark"] [style*="border: 1px solid #D1D1D6"],
        [data-theme="dark"] [style*="border-bottom:1px solid #F5F5F5"],
        [data-theme="dark"] [style*="border-bottom: 1px solid #F5F5F5"],
        [data-theme="dark"] [style*="border-bottom:1px solid #f0f0f0"],
        [data-theme="dark"] [style*="border-bottom: 1px solid #f0f0f0"],
        [data-theme="dark"] [style*="border-top:1px solid #eee"],
        [data-theme="dark"] [style*="border-top: 1px solid #eee"],
        [data-theme="dark"] [style*="border:1px solid #d2d2d7"],
        [data-theme="dark"] [style*="border:1px dashed #E8E8ED"] { border-color: var(--border) !important; }

        /* P2修复：Dark mode - 类选择器中的浅色背景/边框覆盖 */
        [data-theme="dark"] .mypost-edit-btn,
        [data-theme="dark"] .mypost-del-btn { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; }
        [data-theme="dark"] .mypost-title-text { color: var(--text-primary) !important; }
        [data-theme="dark"] .order-center-title { color: var(--text-primary) !important; }
        [data-theme="dark"] .about-app-name { color: var(--text-primary) !important; }
        [data-theme="dark"] .about-contact-value { color: var(--text-primary) !important; }
        [data-theme="dark"] .swap-condition-text { border-color: var(--text-tertiary) !important; }

        /* P2修复：Dark mode - box-shadow 降级 */
        [data-theme="dark"] [style*="box-shadow:0"][style*="rgba(0,0,0"] { box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }

        /* P2修复：Dark mode - 骨架屏适配（已在上方添加） */

        /* ========== P0: 登录/注册页 (login-) ========== */
        .login-page {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0 24px 40px;
            padding-top: var(--statusbar-h, 44px);
            background: linear-gradient(180deg, #FFF4F0 0%, #FFFFFF 35%);
            box-sizing: border-box;
        }
        /* 登录页去掉 .page 的默认底部留白与灰色背景 */
        #page-login {
            padding-bottom: 0 !important;
            background: transparent !important;
        }
        /* 登录页左上角返回按钮 */
        .login-back-btn {
            position: fixed;
            top: calc(var(--statusbar-h, 44px) + 8px);
            left: 16px;
            width: 36px;
            height: 36px;
            padding: 0;
            box-sizing: border-box;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.7);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            z-index: 20;
            transition: background 0.2s, transform 0.15s;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
        /* 仅在登录页激活时显示返回按钮 */
        body:has(#page-login.active) .login-back-btn,
        #page-login.active .login-back-btn {
            display: flex;
        }
        .login-back-btn:active {
            background: rgba(255, 255, 255, 0.9);
            transform: scale(0.92);
        }
        /* 长辈模式：按钮放大 */
        .elder-mode .login-back-btn {
            width: 48px;
            height: 48px;
            font-size: 22px;
            top: 20px;
            left: 20px;
        }
        /* 登录页隐藏底部导航，整屏沉浸式 */
        #page-login ~ .bottom-nav,
        body:has(#page-login.active) .bottom-nav { display: none !important; }
        /* 发布页隐藏底部导航，整屏沉浸式 */
        body:has(#page-publish.active) .bottom-nav { display: none !important; }
        /* 健康档案页隐藏底部导航 */
        body:has(#page-health.active) .bottom-nav { display: none !important; }
        /* 用药提醒页隐藏底部导航 */
        body:has(#page-medication.active) .bottom-nav { display: none !important; }
        /* 报个平安页隐藏底部导航 */
        body:has(#page-checkin.active) .bottom-nav { display: none !important; }
        /* 物业服务页隐藏底部导航 */
        body:has(#page-property.active) .bottom-nav { display: none !important; }
        /* 物业入驻 / 社区入驻页隐藏底部导航 */
        body:has(#page-property-join.active) .bottom-nav,
        body:has(#page-community-apply.active) .bottom-nav { display: none !important; }
        /* 我的发布页隐藏底部导航 */
        body:has(#page-my-posts.active) .bottom-nav { display: none !important; }
        /* 发布页顶部栏 */
        .publish-topbar {
            position: sticky;
            top: 0;
            z-index: 30;
            min-height: calc(48px + var(--statusbar-h, 44px));
            padding-top: var(--statusbar-h, 44px);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border);
        }
        .publish-back-btn {
            position: absolute;
            left: 8px;
            top: calc(var(--statusbar-h, 44px) + 8px);
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 50%;
            background: transparent;
            color: var(--text-primary);
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .publish-back-btn:hover { background: var(--bg-secondary); }
        .publish-topbar-title { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); }
        .publish-community-info { margin-top: 8px; }
        /* 登录页激活时强制隐藏"登录后解锁更多功能"悬浮提示条 */
        body:has(#page-login.active) #homeWelcomeBar { display: none !important; }
        /* 消息页激活时锁定body滚动，防止scroll chaining导致头部偏移 */
        body:has(#page-messages.active) { overflow: hidden !important; height: 100vh !important; }
        .login-logo {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 56px 0 32px;
        }
        .login-logo-icon {
            width: 72px;
            height: 72px;
            border-radius: 20px;
            background: linear-gradient(135deg, var(--primary), var(--accent-peach));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: #fff;
            box-shadow: 0 8px 24px rgba(255,109,59,0.3);
            margin-bottom: 14px;
        }
        .login-logo-name {
            font-size: var(--font-size-xxl);
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 1px;
        }
        .login-logo-slogan {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            margin-top: 6px;
        }
        .login-tabs {
            display: flex;
            gap: 32px;
            margin-bottom: 28px;
        }
        .login-tab {
            font-size: var(--font-size-lg);
            font-weight: 500;
            color: var(--text-tertiary);
            cursor: pointer;
            padding-bottom: 8px;
            position: relative;
            transition: color 0.2s;
        }
        .login-tab.active {
            color: var(--text-primary);
            font-weight: 700;
        }
        .login-tab.active::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            width: 24px;
            height: 3px;
            background: var(--primary);
            border-radius: 2px;
        }
        .login-form { display: none; }
        .login-form.active { display: block; }
        .login-input-group {
            margin-bottom: 12px;
            background: var(--bg-secondary);
            border: none;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            padding: 0 14px;
            height: 48px;
        }
        .login-input-group:focus-within { border-color: transparent; box-shadow: none; }
        /* 登录/注册页输入框聚焦时移除全局橙色 outline */
        #page-login .login-input:focus-visible,
        #page-register .login-input:focus-visible,
        #page-login input:focus-visible,
        #page-register input:focus-visible { outline: none !important; outline-offset: 0 !important; }
        /* 登录/注册页输入框聚焦时移除全局橙色描边与光圈 */
        #page-login .login-input:focus,
        #page-register .login-input:focus {
            border-color: transparent !important;
            box-shadow: none !important;
        }
        /* 登录输入框本体保持透明无边框，避免补丁规则给它加白底描边形成左右色块 */
        #page-login .login-input,
        #page-register .login-input {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            font-size: var(--font-size-base) !important;
        }
        .login-input-group i.login-input-icon {
            color: var(--text-tertiary);
            font-size: var(--font-size-lg);
            margin-right: 10px;
            flex-shrink: 0;
        }
        .login-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
            height: 100%;
        }
        .login-input::placeholder { color: var(--text-tertiary); }
        .login-code-btn {
            padding: 6px 10px;
            background: var(--primary-light);
            color: var(--primary);
            border: none;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-xs);
            cursor: pointer;
            white-space: nowrap;
            font-weight: 500;
            flex-shrink: 0;
        }
        .login-code-btn.disabled {
            background: var(--bg-tertiary);
            color: var(--text-tertiary);
            cursor: default;
        }
        .login-pwd-toggle {
            background: none;
            border: none;
            color: var(--text-tertiary);
            font-size: var(--font-size-lg);
            cursor: pointer;
            padding: 4px;
            flex-shrink: 0;
        }
        .login-forgot-row {
            display: flex;
            justify-content: flex-end;
            margin: 4px 0 20px;
        }
        .login-forgot-link {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            text-decoration: none;
            cursor: pointer;
        }
        .login-forgot-link:active { color: var(--primary); }
        .login-agreement {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 16px 0 8px;
        }
        .login-agreement input[type="checkbox"] {
            width: 16px;
            height: 16px;
            margin-top: 2px;
            flex-shrink: 0;
            appearance: none;
            -webkit-appearance: none;
            border: 1.5px solid var(--border);
            border-radius: 4px;
            background: var(--bg-primary);
            cursor: pointer;
            position: relative;
            transition: background 0.2s, border-color 0.2s;
        }
        .login-agreement input[type="checkbox"]:checked {
            background: var(--primary);
            border-color: var(--primary);
        }
        .login-agreement input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        .login-agreement-text {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            line-height: 1.5;
        }
        .login-agreement-text a {
            color: var(--primary);
            text-decoration: none;
        }
        .login-submit {
            width: 100%;
            height: 50px;
            margin-top: 12px;
            border: none;
            border-radius: var(--radius-xl);
            background: var(--primary);
            color: #fff;
            font-size: var(--font-size-lg);
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 6px 16px rgba(255,109,59,0.28);
            transition: opacity 0.2s, transform 0.15s;
        }
        .login-submit:active { transform: scale(0.98); opacity: 0.9; }
        .login-submit:disabled { opacity: 0.5; cursor: not-allowed; }
        .login-register-row {
            text-align: center;
            margin-top: 18px;
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }
        .login-register-row a {
            color: var(--primary);
            font-weight: 600;
            text-decoration: none;
            margin-left: 4px;
        }
        .login-divider {
            margin-top: auto;
            padding-top: 28px;
            margin-bottom: 18px;
            color: var(--text-tertiary);
            font-size: var(--font-size-xs);
            text-align: center;
        }
        .login-divider::before,
        .login-divider::after {
            content: none;
        }
        .login-third {
            display: flex;
            justify-content: center;
            gap: 28px;
            margin-bottom: 24px;
        }
        .login-third-item {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #fff;
            cursor: pointer;
            transition: transform 0.15s;
            border: none;
        }
        .login-third-item:active { transform: scale(0.92); }
        .login-third-item.wechat { background: #07C160; }

        /* 智能提示条 */
        .auth-hint {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: var(--radius);
            font-size: var(--font-size-sm);
            line-height: 1.4;
            margin-bottom: 16px;
            background: var(--primary-light);
            color: var(--primary);
            animation: authHintIn 0.3s ease;
        }
        .auth-hint i { flex-shrink: 0; }
        .auth-hint.hint-warn {
            background: #FFF6E5;
            color: #B7791F;
        }
        @keyframes authHintIn {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 密码展开区动画 */
        .auth-pwd-section {
            overflow: hidden;
            animation: authPwdExpand 0.35s ease;
        }
        @keyframes authPwdExpand {
            from { opacity: 0; max-height: 0; }
            to { opacity: 1; max-height: 200px; }
        }

        /* 注册页：全屏背景自适应 */
        .register-page {
            padding: 24px 16px 40px;
            min-height: calc(100vh - 56px);
            background: linear-gradient(180deg, #FFF4F0 0%, #FFFFFF 35%);
            box-sizing: border-box;
        }
        #page-register {
            padding-bottom: 0 !important;
            background: transparent !important;
        }
        /* 注册页复选框：白色对勾 */
        .reg-checkbox {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            appearance: none;
            -webkit-appearance: none;
            border: 1.5px solid var(--border);
            border-radius: 4px;
            background: var(--bg-primary);
            cursor: pointer;
            position: relative;
            transition: background 0.2s, border-color 0.2s;
        }
        .reg-checkbox:checked {
            background: var(--primary);
            border-color: var(--primary);
        }
        .reg-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        /* ========== P0: 忘记密码页 (forgot-) ========== */
        .forgot-page { padding: 0; }
        .forgot-steps {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 24px 12px;
            gap: 6px;
        }
        .forgot-step {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .forgot-step-num {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-sm);
            font-weight: 700;
            flex-shrink: 0;
            transition: all 0.3s;
        }
        .forgot-step.active .forgot-step-num {
            background: var(--primary);
            color: #fff;
        }
        .forgot-step.done .forgot-step-num {
            background: var(--primary);
            color: #fff;
        }
        .forgot-step.done .forgot-step-num::before {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
        }
        .forgot-step.done .forgot-step-num span { display: none; }
        .forgot-step-label {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            white-space: nowrap;
        }
        .forgot-step.active .forgot-step-label { color: var(--primary); font-weight: 600; }
        .forgot-step-line {
            width: 28px;
            height: 2px;
            background: var(--border);
        }
        .forgot-step-line.done { background: var(--primary); }
        .forgot-content { padding: 8px 16px 24px; }
        .forgot-form { display: none; }
        .forgot-form.active { display: block; }
        .forgot-tip {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            margin-bottom: 16px;
            line-height: 1.5;
        }
        .forgot-actions {
            display: flex;
            gap: 12px;
            margin-top: 24px;
        }
        .forgot-actions .btn-primary { flex: 1; }
        .forgot-btn-secondary {
            flex: 1;
            height: 50px;
            border: 1px solid var(--border);
            background: var(--bg-primary);
            color: var(--text-secondary);
            border-radius: var(--radius-xl);
            font-size: var(--font-size-base);
            font-weight: 600;
            cursor: pointer;
        }

        /* ========== P0: 订单确认页 (order-) ========== */
        .order-page { padding-bottom: 80px; background: var(--bg-secondary); min-height: 100%; }
        .order-section {
            background: var(--bg-primary);
            margin: 12px;
            border-radius: var(--radius);
            overflow: hidden;
        }
        .order-address-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: var(--bg-primary);
            margin: 12px;
            border-radius: var(--radius);
            cursor: pointer;
        }
        .order-address-row:active { background: #FAFAFA; }
        .order-address-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-lg);
            flex-shrink: 0;
        }
        .order-address-info { flex: 1; min-width: 0; }
        .order-address-name {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .order-address-name span { font-weight: 400; color: var(--text-secondary); margin-left: 8px; }
        .order-address-detail {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            line-height: 1.4;
        }
        .order-address-row > i.fa-chevron-right {
            color: var(--text-tertiary);
            font-size: var(--font-size-sm);
            flex-shrink: 0;
        }
        .order-product-item {
            display: flex;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border-light);
        }
        .order-product-item:last-child { border-bottom: none; }
        .order-product-img {
            width: 72px;
            height: 72px;
            border-radius: var(--radius-sm);
            background: var(--bg-tertiary);
            object-fit: cover;
            flex-shrink: 0;
        }
        .order-product-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
        .order-product-name {
            font-size: var(--font-size-base);
            color: var(--text-primary);
            font-weight: 500;
            line-height: 1.4;
        }
        .order-product-spec {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        .order-product-bottom {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }
        .order-product-price {
            font-size: var(--font-size-base);
            color: var(--primary);
            font-weight: 700;
        }
        .order-product-qty {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }
        .order-price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 16px;
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }
        .order-price-row.total {
            border-top: 1px solid var(--border-light);
            margin-top: 4px;
            padding-top: 12px;
        }
        .order-price-row.total .order-price-label { font-weight: 600; color: var(--text-primary); font-size: var(--font-size-base); }
        .order-price-row.total .order-price-value { color: var(--primary); font-weight: 700; font-size: var(--font-size-lg); }
        .order-pay-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
        }
        .order-pay-item:last-child { border-bottom: none; }
        .order-pay-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
            flex-shrink: 0;
        }
        .order-pay-icon.wechat { background: #07C160; }
        .order-pay-icon.alipay { background: #1677FF; }
        .order-pay-name { flex: 1; font-size: var(--font-size-base); color: var(--text-primary); }
        .order-pay-radio {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        .order-pay-radio.checked { border-color: var(--primary); }
        .order-pay-radio.checked::after {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--primary);
        }
        .order-bottom-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 64px;
            background: var(--bg-primary);
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
            z-index: 10;
        }
        .order-bottom-amount { display: flex; flex-direction: column; }
        .order-bottom-amount-label { font-size: var(--font-size-xs); color: var(--text-secondary); }
        .order-bottom-amount-value { font-size: var(--font-size-xl); color: var(--primary); font-weight: 700; }
        .order-bottom-bar .btn-primary { padding: 12px 32px; }

        /* ========== P0: 收货地址列表 (address-) ========== */
        .address-list-page { padding: 12px 12px 80px; background: var(--bg-secondary); min-height: 100%; }
        .address-card {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 12px;
            position: relative;
        }
        .address-card-top { display: flex; align-items: flex-start; gap: 8px; padding-right: 36px; }
        .address-card-name {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
        }
        .address-card-phone {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            margin-left: 10px;
        }
        .address-card-default-tag {
            display: inline-block;
            font-size: 12px;
            color: var(--primary);
            background: var(--primary-light);
            padding: 1px 6px;
            border-radius: 4px;
            margin-left: 8px;
            vertical-align: middle;
        }
        .address-card-detail {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            line-height: 1.5;
            margin-top: 6px;
            padding-right: 36px;
        }
        .address-card-edit {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 28px;
            height: 28px;
            border: none;
            background: transparent;
            color: var(--text-tertiary);
            font-size: var(--font-size-base);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .address-card-edit:active { color: var(--primary); }
        .address-add-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
            background: var(--bg-primary);
            border-top: 1px solid var(--border);
            z-index: 10;
        }
        .address-add-bar .btn-primary { width: 100%; }
        .address-empty {
            text-align: center;
            padding: 80px 20px;
            color: var(--text-tertiary);
        }
        .address-empty i { font-size: 48px; margin-bottom: 12px; display: block; }
        .address-empty p { font-size: var(--font-size-sm); }

        /* ========== P0: 新增/编辑地址 (address-edit-) ========== */
        .address-edit-page { background: var(--bg-secondary); min-height: 100%; }
        .address-edit-group {
            background: var(--bg-primary);
            margin: 12px;
            border-radius: var(--radius);
            overflow: hidden;
        }
        .address-edit-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border-light);
            min-height: 52px;
        }
        .address-edit-item:last-child { border-bottom: none; }
        .address-edit-label {
            width: 84px;
            flex-shrink: 0;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            font-weight: 500;
        }
        .address-edit-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
        }
        .address-edit-input::placeholder { color: var(--text-tertiary); }
        .address-edit-select {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 6px;
            color: var(--text-tertiary);
            font-size: var(--font-size-base);
            cursor: pointer;
        }
        .address-edit-select.selected { color: var(--text-primary); }
        .address-edit-select i { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .address-edit-textarea {
            width: 100%;
            border: none;
            background: transparent;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            outline: none;
            resize: none;
            min-height: 72px;
            line-height: 1.5;
            font-family: var(--font-family);
        }
        .address-edit-textarea::placeholder { color: var(--text-tertiary); }
        .address-edit-switch-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
        }
        .address-edit-switch-row span { font-size: var(--font-size-base); color: var(--text-primary); }
        .address-switch {
            width: 44px;
            height: 24px;
            background: var(--border);
            border-radius: var(--radius-md);
            position: relative;
            transition: background 0.3s;
            cursor: pointer;
            flex-shrink: 0;
            border: none;
        }
        .address-switch.on { background: var(--primary); }
        .address-switch-knob {
            width: 20px;
            height: 20px;
            background: var(--bg-primary);
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 2px;
            transition: left 0.3s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .address-switch.on .address-switch-knob { left: 22px; }
        .address-edit-save {
            margin: 24px 16px;
            width: calc(100% - 32px);
        }
        .address-delete-btn {
            display: block;
            margin: 0 auto 24px;
            background: none;
            border: none;
            color: var(--danger);
            font-size: var(--font-size-sm);
            cursor: pointer;
            padding: 8px;
        }

        /* ========== P0: 评价/评分页 (review-) ========== */
        .review-page { background: var(--bg-secondary); min-height: 100%; padding-bottom: 24px; }
        .review-product {
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 14px 16px;
            background: var(--bg-primary);
            margin-bottom: 12px;
        }
        .review-product-img {
            width: 56px;
            height: 56px;
            border-radius: var(--radius-sm);
            background: var(--bg-tertiary);
            object-fit: cover;
            flex-shrink: 0;
        }
        .review-product-name {
            flex: 1;
            font-size: var(--font-size-base);
            color: var(--text-primary);
            font-weight: 500;
            line-height: 1.4;
        }
        .review-section {
            background: var(--bg-primary);
            margin: 0 12px 12px;
            border-radius: var(--radius);
            padding: 16px;
        }
        .review-section-title {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
        }
        .review-overall {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 0 4px;
        }
        .review-stars {
            display: flex;
            gap: 8px;
            margin-bottom: 6px;
        }
        .review-star {
            font-size: 32px;
            color: #E0E0E0;
            cursor: pointer;
            transition: color 0.15s, transform 0.15s;
            line-height: 1;
        }
        .review-star:active { transform: scale(1.15); }
        .review-star.active { color: #FFB400; }
        .review-overall-text {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }
        .review-category {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
        }
        .review-category-label {
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            flex-shrink: 0;
        }
        .review-category .review-stars { gap: 4px; margin-bottom: 0; }
        .review-category .review-star { font-size: 22px; }
        .review-textarea {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 12px;
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            outline: none;
            resize: none;
            min-height: 100px;
            line-height: 1.5;
            font-family: var(--font-family);
            transition: border-color 0.2s;
        }
        .review-textarea:focus { border-color: var(--primary); }
        .review-textarea::placeholder { color: var(--text-tertiary); }
        .review-upload-tip {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-bottom: 10px;
        }
        .review-upload-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .review-upload-item {
            aspect-ratio: 1;
            border-radius: var(--radius-sm);
            overflow: hidden;
            position: relative;
            background: var(--bg-tertiary);
        }
        .review-upload-item img { width: 100%; height: 100%; object-fit: cover; }
        .review-upload-del {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(0,0,0,0.5);
            color: #fff;
            border: none;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .review-upload-add {
            aspect-ratio: 1;
            border: 1px dashed var(--border);
            border-radius: var(--radius-sm);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: var(--text-tertiary);
            cursor: pointer;
            background: var(--bg-secondary);
            transition: border-color 0.2s;
        }
        .review-upload-add:active { border-color: var(--primary); color: var(--primary); }
        .review-upload-add i { font-size: 22px; }
        .review-upload-add span { font-size: 12px; }
        .review-anonymous-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 0;
        }
        .review-anonymous-row span { font-size: var(--font-size-base); color: var(--text-primary); }
        .review-submit {
            margin: 24px 16px 0;
            width: calc(100% - 32px);
        }

        /* ==================== 社区活动列表页 ==================== */
        .al-page { padding-bottom: 24px; }
        .al-tabs { display: flex; background: var(--bg-primary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
        .al-tab { flex: 1; text-align: center; padding: 12px 0; font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; position: relative; font-weight: 500; border: none; background: transparent; font-family: inherit; min-height: 44px; }
        .al-tab.active { color: var(--primary); font-weight: 600; }
        .al-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--primary); border-radius: 2px; }
        .al-list { padding: 12px 8px; display: flex; flex-direction: column; gap: 12px; }
        .al-card { background: var(--bg-primary); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.15s; }
        .al-card:active { transform: scale(0.98); }
        .al-card-cover { height: 140px; display: flex; align-items: flex-end; padding: 16px; position: relative; }
        .al-card-cover-title { font-size: var(--font-size-lg); font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
        .al-card-status { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; }
        .al-card-status.ongoing { background: rgba(52,199,89,0.9); color: #fff; }
        .al-card-status.ended { background: rgba(0,0,0,0.5); color: #fff; }
        .al-card-status.upcoming { background: rgba(255,149,0,0.9); color: #fff; }
        .al-card-status.pending { background: rgba(255,149,0,0.9); color: #fff; }

        /* P1修复：用药提醒Tab统一样式 */
        .med-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
        .med-tab { flex: 1; text-align: center; padding: 12px 0; font-size: var(--font-size-base); color: var(--text-secondary); cursor: pointer; border: none; background: transparent; font-family: inherit; min-height: 44px; font-weight: 400; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
        .med-tab.active { color: var(--primary); font-weight: 600; border-bottom: 2px solid var(--primary); }
        .al-card-body { padding: 14px 16px; }
        .al-card-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
        .al-card-info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
        .al-card-info-row { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-base); color: var(--text-secondary); }
        .al-card-info-row i { width: 16px; text-align: center; color: var(--text-tertiary); flex-shrink: 0; }
        .al-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-light); }
        .al-card-count { font-size: var(--font-size-base); color: var(--text-secondary); }
        .al-card-count strong { color: var(--primary); }
        .al-btn-signup { padding: 6px 18px; border-radius: var(--radius-full); border: none; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; background: var(--primary); color: #fff; }
        .al-btn-signup:active { opacity: 0.85; }
        .al-btn-signup.disabled { background: var(--bg-tertiary); color: var(--text-tertiary); cursor: not-allowed; }
        .al-btn-signup.signed { background: var(--success-light); color: var(--success); }

        /* ==================== 活动详情页 ==================== */
        .ad-page { padding-bottom: 80px; }
        .ad-cover { height: 200px; display: flex; align-items: flex-end; padding: 24px 20px; position: relative; }
        .ad-cover-title { font-size: var(--font-size-xxl); font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
        .ad-cover-badge { position: absolute; top: 16px; right: 16px; padding: 6px 14px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; }
        .ad-info-card { margin: 12px 8px; background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
        .ad-info-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
        .ad-info-row i { width: 20px; text-align: center; color: var(--primary); font-size: var(--font-size-base); flex-shrink: 0; margin-top: 2px; }
        .ad-info-label { font-size: var(--font-size-base); color: var(--text-tertiary); width: 80px; flex-shrink: 0; }
        .ad-info-value { font-size: var(--font-size-base); color: var(--text-primary); flex: 1; }
        .ad-section { margin: 12px 8px; background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
        .ad-section-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
        .ad-section-title::before { content: ''; width: 4px; height: 16px; background: var(--primary); border-radius: 2px; }
        .ad-intro-text { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.8; }
        .ad-req-list { display: flex; flex-direction: column; gap: 10px; }
        .ad-req-item { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-base); color: var(--text-secondary); }
        .ad-req-item i { color: var(--success); }
        .ad-joined-area { display: flex; align-items: center; gap: 12px; }
        .ad-avatars { display: flex; }
        .ad-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: 600; color: #fff; }
        .ad-avatar:first-child { margin-left: 0; }
        .ad-joined-text { font-size: var(--font-size-base); color: var(--text-secondary); }
        .ad-joined-text strong { color: var(--primary); }
        .ad-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-primary); border-top: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 12px; z-index: 100; }
        .ad-bottom-info { flex: 1; }
        .ad-bottom-price { font-size: var(--font-size-lg); font-weight: 700; color: var(--primary); }
        .ad-bottom-hint { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .ad-signup-btn { flex: 1; max-width: 200px; }

        /* ==================== 我的报名记录页 ==================== */
        .ar-page { padding-bottom: 24px; }
        .ar-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
        .ar-card { background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); cursor: pointer; }
        .ar-card:active { background: var(--bg-secondary); }
        .ar-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .ar-card-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); flex: 1; }
        .ar-card-status { padding: 4px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; flex-shrink: 0; margin-left: 8px; }
        .ar-card-status.pending { background: var(--warning-light); color: var(--warning); }
        .ar-card-status.ongoing { background: var(--success-light); color: var(--success); }
        .ar-card-status.ended { background: var(--bg-tertiary); color: var(--text-tertiary); }
        .ar-card-info { display: flex; flex-direction: column; gap: 6px; }
        .ar-card-info-row { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-secondary); }
        .ar-card-info-row i { width: 16px; text-align: center; color: var(--text-tertiary); flex-shrink: 0; }

        /* ==================== 物业缴费页 ==================== */
        .pf-page { padding-bottom: 24px; }
        .pf-info-card { margin: 12px 16px; background: linear-gradient(135deg, var(--primary), var(--accent-peach)); border-radius: var(--radius-lg); padding: 20px; color: #fff; }
        .pf-info-company { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: 6px; }
        .pf-info-community { font-size: var(--font-size-sm); opacity: 0.9; display: flex; align-items: center; gap: 6px; }
        .pf-section { margin: 12px 16px; background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
        .pf-section-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
        .pf-section-title::before { content: ''; width: 4px; height: 16px; background: var(--primary); border-radius: 2px; }
        .pf-fee-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
        .pf-fee-item:last-child { border-bottom: none; }
        .pf-fee-left { display: flex; align-items: center; gap: 10px; }
        .pf-fee-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
        .pf-fee-name { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary); }
        .pf-fee-desc { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .pf-fee-amount { font-size: var(--font-size-base); font-weight: 700; color: var(--primary); }
        .pf-account-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
        .pf-account-row:last-child { border-bottom: none; }
        .pf-account-label { font-size: var(--font-size-sm); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
        .pf-account-label i { color: var(--primary); width: 16px; text-align: center; }
        .pf-account-value { font-size: var(--font-size-sm); color: var(--text-primary); font-weight: 500; }
        .pf-copy-btn { padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--primary); background: var(--primary-light); color: var(--primary); font-size: var(--font-size-xs); cursor: pointer; font-weight: 600; }
        .pf-copy-btn:active { opacity: 0.7; }
        .pf-qr-area { display: flex; gap: 16px; justify-content: center; margin-top: 16px; }
        .pf-qr-item { text-align: center; }
        .pf-qr-img { width: 100px; height: 100px; border-radius: var(--radius); background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 40px; }
        .pf-qr-label { font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: 6px; }
        .pf-tip { margin: 12px 16px; padding: 14px 16px; background: var(--warning-light); border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.7; }
        .pf-tip-title { font-weight: 600; color: var(--warning); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }

        /* ==================== 消息通知详情页 ==================== */
        .nd-page { padding: 0 16px 24px; }
        .nd-title { font-size: var(--font-size-xxl); font-weight: 700; color: var(--text-primary); margin: 20px 0 12px; line-height: 1.4; }
        .nd-meta { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
        .nd-meta-item { font-size: var(--font-size-sm); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
        .nd-body { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.8; }
        .nd-body p { margin-bottom: 14px; }
        .nd-action-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; padding: 12px 24px; border-radius: var(--radius-xl); background: var(--primary); color: #fff; font-size: var(--font-size-base); font-weight: 600; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(255,109,59,0.25); }
        .nd-action-btn:active { transform: scale(0.97); }

        /* ==================== 帮助中心页 ==================== */
        .hc-page { padding-bottom: 80px; }
        .hc-search { padding: 12px 16px; background: var(--bg-primary); }
        .hc-search-box { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-secondary); border-radius: var(--radius-full); }
        .hc-search-box i { color: var(--text-tertiary); font-size: var(--font-size-sm); }
        .hc-search-box input { flex: 1; border: none; background: transparent; font-size: var(--font-size-sm); outline: none; color: var(--text-primary); }
        .hc-section { margin: 12px 16px; background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
        .hc-section-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
        .hc-faq-item { border-bottom: 1px solid var(--border-light); }
        .hc-faq-item:last-child { border-bottom: none; }
        .hc-faq-q { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; cursor: pointer; font-size: var(--font-size-sm); color: var(--text-primary); }
        .hc-faq-q i { color: var(--text-tertiary); transition: transform 0.3s; flex-shrink: 0; }
        .hc-faq-item.open .hc-faq-q i { transform: rotate(180deg); }
        .hc-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.7; }
        .hc-faq-item.open .hc-faq-a { max-height: 200px; padding-bottom: 14px; }
        .hc-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .hc-category-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: var(--bg-secondary); border-radius: var(--radius); cursor: pointer; transition: background 0.2s; }
        .hc-category-item:active { background: var(--primary-light); }
        .hc-category-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .hc-category-name { font-size: var(--font-size-xs); color: var(--text-secondary); text-align: center; }
        .hc-contact-btn { position: fixed; bottom: 16px; left: 16px; right: 16px; padding: 14px; border-radius: var(--radius-xl); background: var(--primary); color: #fff; font-size: var(--font-size-base); font-weight: 600; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(255,109,59,0.25); z-index: 50; }
        .hc-contact-btn:active { transform: scale(0.97); }

        /* ==================== 意见反馈页 ==================== */
        .fb-page { padding: 16px; padding-bottom: 24px; }
        .fb-section { margin-bottom: 20px; }
        .fb-label { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: 10px; font-weight: 500; }
        .fb-type-row { display: flex; flex-wrap: wrap; gap: 10px; }
        .fb-type-tag { padding: 8px 18px; border-radius: var(--radius-full); border: 2px solid var(--border); background: var(--bg-primary); font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
        .fb-type-tag.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 600; }
        .fb-textarea { width: 100%; min-height: 120px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--text-primary); resize: none; outline: none; font-family: var(--font-family); line-height: 1.6; box-sizing: border-box; }
        .fb-textarea:focus { border-color: var(--primary); }
        .fb-char-count { text-align: right; font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 6px; }
        .fb-upload-grid { display: flex; flex-wrap: wrap; gap: 10px; }
        .fb-upload-add { width: 80px; height: 80px; border: 2px dashed var(--border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--text-tertiary); }
        .fb-upload-add i { font-size: 24px; }
        .fb-upload-add span { font-size: var(--font-size-xs); }
        .fb-upload-add:active { border-color: var(--primary); color: var(--primary); }
        .fb-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--text-primary); outline: none; box-sizing: border-box; }
        .fb-input:focus { border-color: var(--primary); }
        .fb-submit { width: 100%; margin-top: 8px; }

        /* ==================== 在线客服页 ==================== */
        .cs-page { display: flex; flex-direction: column; height: 100vh; background: var(--bg-secondary); }
        .cs-messages { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
        .cs-quick-area { padding: 10px 16px; background: var(--bg-primary); border-top: 1px solid var(--border-light); display: flex; gap: 8px; flex-wrap: wrap; }
        .cs-quick-btn { padding: 6px 14px; border-radius: var(--radius-full); background: var(--bg-secondary); border: 1px solid var(--border); font-size: var(--font-size-xs); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
        .cs-quick-btn:active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

        /* ==================== 邀请好友页 ==================== */
        .iv-page { padding-bottom: 80px; }
        .iv-poster { margin: 12px 16px; border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; color: #fff; position: relative; overflow: hidden; }
        .iv-poster-title { font-size: var(--font-size-xxl); font-weight: 700; margin-bottom: 8px; }
        .iv-poster-desc { font-size: var(--font-size-sm); opacity: 0.9; line-height: 1.6; margin-bottom: 20px; }
        .iv-code-box { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(255,255,255,0.2); border-radius: var(--radius); padding: 16px 32px; backdrop-filter: blur(4px); }
        .iv-code-label { font-size: var(--font-size-xs); opacity: 0.9; }
        .iv-code { font-size: var(--font-size-xxl); font-weight: 700; letter-spacing: 4px; }
        .iv-copy-btn { margin-top: 12px; padding: 6px 20px; border-radius: var(--radius-full); background: var(--bg-primary); color: var(--primary); font-size: var(--font-size-sm); font-weight: 600; border: none; cursor: pointer; }
        .iv-copy-btn:active { opacity: 0.85; }
        .iv-section { margin: 12px 16px; background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
        .iv-section-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
        .iv-section-title::before { content: ''; width: 4px; height: 16px; background: var(--primary); border-radius: 2px; }
        .iv-steps { display: flex; flex-direction: column; gap: 16px; }
        .iv-step { display: flex; align-items: flex-start; gap: 12px; }
        .iv-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: 700; flex-shrink: 0; }
        .iv-step-text { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; padding-top: 4px; }
        .iv-record-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
        .iv-record-item:last-child { border-bottom: none; }
        .iv-record-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: 600; color: #fff; flex-shrink: 0; }
        .iv-record-info { flex: 1; }
        .iv-record-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .iv-record-time { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .iv-record-status { padding: 4px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; }
        .iv-record-status.done { background: var(--success-light); color: var(--success); }
        .iv-record-status.pending { background: var(--warning-light); color: var(--warning); }
        .iv-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-primary); border-top: 1px solid var(--border); padding: 12px 16px; display: flex; gap: 12px; z-index: 100; }
        .iv-share-btn { flex: 1; padding: 12px; border-radius: var(--radius-xl); border: none; font-size: var(--font-size-base); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
        .iv-share-btn.wechat { background: #07C160; color: #fff; }
        .iv-share-btn.link { background: var(--bg-secondary); color: var(--text-primary); }
        .iv-share-btn:active { opacity: 0.85; }

        /* ==================== 黑名单管理页 ==================== */
        .bl-page { padding: 12px 16px 24px; }
        .bl-tip { padding: 12px 14px; background: var(--info-light); border-radius: var(--radius); font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px; }
        .bl-tip i { color: var(--info); margin-top: 2px; flex-shrink: 0; }
        .bl-list { display: flex; flex-direction: column; gap: 10px; }
        .bl-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
        .bl-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-base); font-weight: 600; color: #fff; flex-shrink: 0; }
        .bl-info { flex: 1; }
        .bl-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
        .bl-time { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .bl-remove-btn { padding: 6px 16px; border-radius: var(--radius-full); border: 1px solid var(--danger); background: var(--danger-light); color: var(--danger); font-size: var(--font-size-xs); font-weight: 600; cursor: pointer; }
        .bl-remove-btn:active { opacity: 0.7; }

        /* ==================== 我的优惠券 (coupon-) ==================== */
        .coupon-page { padding-bottom: 40px; }
        .coupon-tabs {
            display: flex; background: var(--bg-primary); padding: 0 12px; border-bottom: 1px solid var(--border);
        }
        .coupon-tab {
            flex: 1; text-align: center; padding: 14px 0; font-size: var(--font-size-sm);
            color: var(--text-secondary); cursor: pointer; position: relative; font-weight: 500;
        }
        .coupon-tab.active { color: var(--primary); font-weight: 600; }
        .coupon-tab.active::after {
            content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 28px; height: 3px; background: var(--primary); border-radius: 2px;
        }
        .coupon-list { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
        .coupon-card {
            display: flex; background: var(--bg-primary); border-radius: var(--radius-lg); overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        .coupon-card.disabled { opacity: 0.55; filter: grayscale(0.3); }
        .coupon-card-left {
            width: 96px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary), var(--accent-peach));
            color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 14px 6px; position: relative;
        }
        .coupon-card.disabled .coupon-card-left { background: linear-gradient(135deg, #B0B0B0, #C8C8C8); }
        .coupon-value { font-size: 26px; font-weight: 700; line-height: 1; }
        .coupon-value small { font-size: var(--font-size-sm); font-weight: 600; }
        .coupon-unit { font-size: var(--font-size-xs); margin-top: 4px; opacity: 0.95; }
        .coupon-card-left::after {
            content: ''; position: absolute; right: -6px; top: 0; bottom: 0; width: 12px;
            background: radial-gradient(circle at left, transparent 5px, #fff 5px);
            background-size: 12px 12px; background-repeat: repeat-y;
        }
        .coupon-card-right {
            flex: 1; padding: 14px 14px 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
        }
        .coupon-name { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
        .coupon-scope { font-size: var(--font-size-xs); color: var(--text-secondary); }
        .coupon-validity { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .coupon-use-btn {
            align-self: flex-start; margin-top: 6px; padding: 5px 16px; border: none;
            border-radius: var(--radius-full); background: var(--primary); color: #fff;
            font-size: var(--font-size-xs); font-weight: 600; cursor: pointer;
        }
        .coupon-use-btn:active { opacity: 0.85; }
        .coupon-use-btn.disabled { background: var(--bg-tertiary); color: var(--text-disabled); cursor: not-allowed; }
        /* 商家详情页-领取优惠券卡片 */
        .mc-coupon-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
        .mc-coupon-card { display: flex; background: #FFF5EF; border-radius: var(--radius-lg); overflow: hidden; }
        .mc-coupon-left { width: 86px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary), var(--accent-peach)); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 6px; }
        .mc-coupon-value { font-size: 24px; font-weight: 700; line-height: 1; }
        .mc-coupon-value small { font-size: var(--font-size-sm); font-weight: 600; }
        .mc-coupon-cond { font-size: var(--font-size-xs); margin-top: 4px; opacity: 0.95; }
        .mc-coupon-right { flex: 1; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .mc-coupon-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        .mc-coupon-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); }
        .mc-coupon-scope { font-size: var(--font-size-xs); color: var(--text-secondary); }
        .mc-coupon-expiry { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .mc-coupon-btn { padding: 5px 14px; border: none; border-radius: var(--radius-full); background: var(--primary); color: #fff; font-size: var(--font-size-xs); font-weight: 600; cursor: pointer; flex-shrink: 0; }
        .mc-coupon-btn.claimed { background: var(--bg-tertiary); color: var(--text-disabled); cursor: not-allowed; }
        [data-theme="dark"] .mc-coupon-card { background: rgba(255,109,59,0.08); }
        /* 结账页-优惠券选择 */
        .checkout-coupon-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--bg-secondary); border-radius: var(--radius); margin-top: 10px; cursor: pointer; }
        .checkout-coupon-label { font-size: var(--font-size-sm); color: var(--text-secondary); }
        .checkout-coupon-value { font-size: var(--font-size-sm); color: var(--danger); font-weight: 600; }

        /* ==================== 浏览历史 (history-) ==================== */
        .history-page { padding-bottom: 40px; }
        .history-clear-btn {
            position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
            background: none; border: none; font-size: var(--font-size-sm); color: var(--primary);
            font-weight: 600; cursor: pointer;
        }
        .history-group { padding: 0 12px; }
        .history-group-title {
            font-size: var(--font-size-sm); color: var(--text-tertiary); font-weight: 600;
            padding: 14px 4px 8px;
        }
        .history-item {
            display: flex; gap: 12px; background: var(--bg-primary); border-radius: var(--radius);
            padding: 12px; margin-bottom: 8px; cursor: pointer; transition: background 0.2s;
        }
        .history-item:active { background: var(--bg-secondary); }
        .history-thumb {
            width: 72px; height: 72px; border-radius: var(--radius-sm); flex-shrink: 0;
            background: linear-gradient(135deg, #FFF4F0, #FFE3D6); display: flex;
            align-items: center; justify-content: center; font-size: 26px; color: var(--primary);
        }
        .history-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
        .history-title {
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary);
            line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .history-meta { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .history-source { color: var(--primary); }

        /* ==================== 草稿箱 (draft-) ==================== */
        .draft-page { padding-bottom: 40px; }
        .draft-list { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
        .draft-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding: 14px 16px;
            box-shadow: var(--shadow-sm);
        }
        .draft-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
        .draft-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); flex: 1; }
        .draft-delete-btn {
            background: none; border: none; color: var(--text-tertiary); font-size: 16px;
            cursor: pointer; padding: 2px; flex-shrink: 0;
        }
        .draft-delete-btn:active { color: var(--danger); }
        .draft-summary {
            font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; margin-top: 6px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .draft-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
        .draft-time { font-size: var(--font-size-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
        .draft-edit-btn {
            padding: 6px 16px; border: none; border-radius: var(--radius-full); background: var(--primary-light);
            color: var(--primary); font-size: var(--font-size-xs); font-weight: 600; cursor: pointer;
            display: inline-flex; align-items: center; gap: 4px;
        }
        .draft-edit-btn:active { opacity: 0.85; }

        /* ==================== 版本说明 (version-) ==================== */
        .version-page { padding-bottom: 40px; }
        .version-current {
            margin: 12px; padding: 22px 18px; border-radius: var(--radius-lg);
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent-peach) 100%); color: #fff;
            text-align: center; box-shadow: 0 6px 18px rgba(255,109,59,0.28);
        }
        .version-current-label { font-size: var(--font-size-xs); opacity: 0.9; }
        .version-current-num { font-size: 28px; font-weight: 700; margin-top: 6px; }
        .version-current-date { font-size: var(--font-size-xs); opacity: 0.85; margin-top: 6px; }
        .version-list { padding: 0 12px; }
        .version-item {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px;
            box-shadow: var(--shadow-sm);
        }
        .version-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .version-item-num {
            font-size: var(--font-size-base); font-weight: 700; color: var(--primary);
            display: inline-flex; align-items: center; gap: 6px;
        }
        .version-item-tag {
            font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-full);
            background: var(--primary-light); color: var(--primary); font-weight: 600;
        }
        .version-item-tag.old { background: var(--bg-secondary); color: var(--text-tertiary); }
        .version-item-date { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .version-item-list { list-style: none; padding: 0; margin: 0; }
        .version-item-list li {
            font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6;
            padding-left: 16px; position: relative;
        }
        .version-item-list li::before {
            content: ''; position: absolute; left: 4px; top: 10px; width: 4px; height: 4px;
            border-radius: 50%; background: var(--primary);
        }

        /* ==================== 空状态通用 ==================== */

        /* ==================== 退出登录确认弹窗 ==================== */
        .logout-modal {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-toast);
            display: none; align-items: center; justify-content: center; padding: 40px;
        }
        .logout-modal.show { display: flex; }
        .logout-modal-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); width: 100%; max-width: 300px;
            padding: 28px 24px 20px; text-align: center; animation: logoutPop 0.2s ease;
        }
        @keyframes logoutPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .logout-modal-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
        .logout-modal-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: 22px; }
        .logout-modal-actions { display: flex; gap: 12px; }
        .logout-modal-btn {
            flex: 1; padding: 11px 0; border: none; border-radius: var(--radius);
            font-size: var(--font-size-base); font-weight: 600; cursor: pointer;
        }
        .logout-modal-btn.cancel { background: var(--bg-secondary); color: var(--text-primary); }
        .logout-modal-btn.confirm { background: var(--danger); color: #fff; }
        .logout-modal-btn:active { opacity: 0.85; }

        /* ========== 硬件设备管理 ========== */
        .device-page { padding: 0 0 80px; }
        .device-list { padding: 12px 16px; }
        .device-card {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: 16px;
            margin-bottom: 12px;
        }
        .device-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 0;
        }
        .device-card-icon {
            width: 44px; height: 44px;
            border-radius: var(--radius);
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .device-card-info { flex: 1; min-width: 0; }
        .device-card-name {
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
        }
        .device-card-imei {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-top: 2px;
            font-variant-numeric: tabular-nums;
        }
        .device-status-badge {
            font-size: var(--font-size-xs);
            padding: 3px 10px;
            border-radius: var(--radius-full);
            font-weight: 500;
            flex-shrink: 0;
        }
        .device-status-badge.online { background: var(--success-light); color: var(--success); }
        .device-status-badge.offline { background: var(--bg-tertiary); color: var(--text-tertiary); }
        .device-status-badge.alarm { background: var(--danger-light); color: var(--danger); }
        .device-card-body {
            display: flex;
            gap: 16px;
            padding-top: 12px;
            margin-top: 12px;
            border-top: 1px solid var(--border-light);
        }
        .device-stat { flex: 1; text-align: center; }
        .device-stat-icon { font-size: 16px; margin-bottom: 4px; }
        .device-stat-value {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
            font-variant-numeric: tabular-nums;
        }
        .device-stat-label {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        .device-card-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        .device-action-btn {
            flex: 1;
            padding: 8px 0;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            background: var(--bg-primary);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        .device-action-btn:active { transform: scale(0.97); }
        .device-action-btn:hover { background: var(--bg-secondary); }
        .device-action-btn.danger { color: var(--danger); border-color: var(--danger-light); }

        /* 设备绑定页 */
        .device-bind-page { padding: 0 0 80px; }
        .device-bind-hero {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            padding: 40px 24px 32px;
            text-align: center;
            color: #fff;
        }
        .device-bind-hero-icon { font-size: 56px; margin-bottom: 16px; }
        .device-bind-hero-title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 8px; }
        .device-bind-hero-desc { font-size: var(--font-size-sm); opacity: 0.85; line-height: 1.6; }
        .device-bind-form { padding: 20px 16px; }
        .device-bind-field { margin-bottom: 16px; }
        .device-bind-label {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
            display: block;
        }
        .device-bind-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--border-light);
            border-radius: var(--radius);
            font-size: var(--font-size-base);
            background: var(--bg-primary);
            color: var(--text-primary);
            box-sizing: border-box;
            min-width: 0;
            box-shadow: none;
        }
        .device-bind-input:focus,
        .device-bind-input:active {
            outline: none;
            border-color: var(--primary);
            box-shadow: none;
        }
        .device-bind-scan-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 12px;
            border: 2px dashed var(--border-light);
            border-radius: var(--radius);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-size: var(--font-size-sm);
            cursor: pointer;
            margin-bottom: 16px;
        }
        .device-bind-scan-btn:active { transform: scale(0.98); }
        .device-bind-submit {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: var(--radius-xl);
            background: var(--primary);
            color: #fff;
            font-size: var(--font-size-base);
            font-weight: 600;
            cursor: pointer;
        }
        .device-bind-submit:active { transform: scale(0.98); }
        .device-bind-submit:disabled { opacity: 0.5; cursor: not-allowed; }
        .device-bind-tip {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            line-height: 1.6;
            margin-top: 16px;
            padding: 12px;
            background: var(--bg-secondary);
            border-radius: var(--radius);
        }

        /* 设备详情页 */
        .device-detail-page { padding: 0 0 80px; }
        .device-detail-header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            padding: 24px 20px;
            color: #fff;
            text-align: center;
        }
        .device-detail-icon {
            width: 64px; height: 64px;
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.15);
            display: flex; align-items: center; justify-content: center;
            font-size: 28px;
            margin: 0 auto 12px;
        }
        .device-detail-name {
            font-size: var(--font-size-xl);
            font-weight: 700;
            margin-bottom: 4px;
        }
        .device-detail-status {
            font-size: var(--font-size-sm);
            opacity: 0.85;
        }
        .device-detail-section {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            margin: 12px 16px;
            padding: 16px;
        }
        .device-detail-section-title {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
        }
        .device-detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-light);
        }
        .device-detail-row:last-child { border-bottom: none; }
        .device-detail-row-label {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }
        .device-detail-row-value {
            font-size: var(--font-size-sm);
            color: var(--text-primary);
            font-weight: 500;
            font-variant-numeric: tabular-nums;
        }

        /* 报警事件记录 */
        .device-event-card {
            background: var(--bg-primary);
            border-radius: var(--radius);
            padding: 12px 16px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .device-event-icon {
            width: 36px; height: 36px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        .device-event-icon.sos { background: var(--danger-light); color: var(--danger); }
        .device-event-icon.checkin { background: var(--success-light); color: var(--success); }
        .device-event-icon.low-battery { background: var(--warning-light); color: var(--warning); }
        .device-event-icon.offline { background: var(--bg-tertiary); color: var(--text-tertiary); }
        .device-event-info { flex: 1; min-width: 0; }
        .device-event-title {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
        }
        .device-event-desc {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            margin-top: 2px;
            line-height: 1.5;
        }
        .device-event-time {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            margin-top: 2px;
            font-variant-numeric: tabular-nums;
        }

        /* 硬件模拟控制面板 */
        .device-sim-panel {
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            margin: 12px 16px;
            padding: 16px;
        }
        .device-sim-title {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .device-sim-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: var(--radius);
            font-size: var(--font-size-sm);
            font-weight: 500;
            cursor: pointer;
            margin-bottom: 8px;
        }
        .device-sim-btn:last-child { margin-bottom: 0; }
        .device-sim-btn:active { transform: scale(0.98); }
        .device-sim-btn.sos { background: var(--danger); color: #fff; }
        .device-sim-btn.checkin { background: var(--success); color: #fff; }
        .device-sim-btn.low-battery { background: var(--warning); color: #fff; }
        .device-sim-btn.offline { background: var(--text-tertiary); color: #fff; }

        /* 设备空状态 */
        .device-empty {
            text-align: center;
            padding: 60px 20px;
        }
        .device-empty-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.3; }
        .device-empty-title { font-size: var(--font-size-base); color: var(--text-secondary); margin-bottom: 8px; }
        .device-empty-desc { font-size: var(--font-size-sm); color: var(--text-tertiary); line-height: 1.6; margin-bottom: 24px; }
        .device-empty-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 24px;
            border: none;
            border-radius: var(--radius-xl);
            background: var(--primary);
            color: #fff;
            font-size: var(--font-size-sm);
            font-weight: 600;
            cursor: pointer;
        }
        .device-empty-btn:active { transform: scale(0.97); }

        /* SOS主页面设备状态区 */
        .sos-device-section {
            margin: 0 16px 16px;
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: 14px 16px;
        }
        .sos-device-section-title {
            font-size: var(--font-size-sm);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sos-device-section-more {
            margin-left: auto;
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            font-weight: 400;
        }
        .sos-device-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-light);
        }
        .sos-device-item:last-child { border-bottom: none; }
        .sos-device-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .sos-device-dot.online { background: var(--success); }
        .sos-device-dot.offline { background: var(--text-disabled); }
        .sos-device-name {
            flex: 1;
            font-size: var(--font-size-sm);
            color: var(--text-primary);
        }
        .sos-device-battery {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            font-variant-numeric: tabular-nums;
        }
        .sos-device-empty {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            text-align: center;
            padding: 12px 0;
        }
        .sos-device-bind-link {
            color: var(--primary);
            font-weight: 500;
            cursor: pointer;
        }

        /* 硬件报警标识 */
        .hw-trigger-tag {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: var(--font-size-xs);
            padding: 2px 6px;
            border-radius: var(--radius-xs);
            background: var(--info-light);
            color: var(--info);
            font-weight: 500;
            margin-left: 6px;
        }

        /* Dark mode */
        [data-theme="dark"] .device-card,
        [data-theme="dark"] .device-detail-section,
        [data-theme="dark"] .device-event-card { background: var(--bg-primary) !important; }
        [data-theme="dark"] .device-sim-panel { background: var(--bg-secondary); }
        [data-theme="dark"] .device-bind-input { background: var(--bg-tertiary); border-color: var(--border-light); color: var(--text-primary); }
        [data-theme="dark"] .device-bind-scan-btn { background: var(--bg-tertiary); border-color: var(--border-light); color: var(--text-secondary); }
        [data-theme="dark"] .device-action-btn { background: var(--bg-primary); border-color: var(--border-light); color: var(--text-secondary); }
        [data-theme="dark"] .device-status-badge.offline { background: var(--bg-tertiary); }
        [data-theme="dark"] .device-event-icon.offline { background: var(--bg-tertiary); }
        [data-theme="dark"] .sos-device-section { background: var(--bg-primary); }

        /* ==================== 通用表单 select（补齐 .form-select） ==================== */
        .form-select {
            width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border);
            border-radius: var(--radius); font-size: var(--font-size-sm); color:var(--text-primary);
            background:var(--bg-primary); outline:none; cursor:pointer; transition:border-color 0.2s;
            appearance:none; -webkit-appearance:none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%236B7280' d='M6 8L2 4h8z'/></svg>");
            background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
        }
        .form-select:focus { border-color: var(--primary); }
        .elder-mode .form-select,
        .elder-mode .form-input,
        .elder-mode .form-textarea { font-size: var(--font-size-lg); padding: 14px; }

        /* ==================== 购物车页 (cart-) ==================== */
        .cart-page { padding: 12px 0 120px; min-height: 70vh; }
        .cart-item {
            display: flex; align-items: center; gap: 10px; background: var(--bg-primary);
            border-radius: var(--radius-lg); padding: 12px; margin: 0 12px 10px; box-shadow: var(--shadow-sm);
        }
        .cart-checkbox {
            width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--border);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all 0.2s; background: var(--bg-primary);
        }
        .cart-checkbox.checked { background: var(--primary); border-color: var(--primary); }
        .cart-checkbox.checked::after {
            content: ''; width: 6px; height: 10px; border: solid #fff;
            border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px);
        }
        .cart-item-img {
            width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-sm);
            object-fit: cover; background: var(--bg-secondary);
        }
        .cart-item-info { flex: 1; min-width: 0; }
        .cart-item-name {
            font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary);
            margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .cart-item-price { font-size: var(--font-size-sm); color: var(--primary); font-weight: 700; }
        .cart-item-subtotal { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-top: 2px; }
        .cart-qty-ctrl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .cart-qty-btn {
            width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
            background: var(--bg-primary); color: var(--text-primary); font-size: 16px;
            cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
        }
        .cart-qty-btn:active { background: var(--bg-secondary); }
        .cart-qty-num { min-width: 24px; text-align: center; font-size: var(--font-size-sm); font-weight: 600; }
        .cart-bottom-bar {
            position: fixed; bottom: 0; left: 0; right: 0; max-width: 430px; margin: 0 auto;
            background: var(--bg-primary); border-top: 1px solid var(--border);
            padding: 12px 16px; display: flex; align-items: center; gap: 12px; z-index: 50;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
        }
        .cart-bottom-bar .cart-select-all { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--font-size-sm); color: var(--text-secondary); }
        .cart-bottom-bar .cart-total-wrap { flex: 1; text-align: right; }
        .cart-bottom-bar .cart-total-label { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .cart-bottom-bar .cart-total-val { font-size: var(--font-size-lg); color: var(--primary); font-weight: 800; }
        .cart-checkout-btn {
            padding: 10px 24px; border: none; border-radius: var(--radius-full);
            background: var(--primary); color: #fff; font-size: var(--font-size-sm);
            font-weight: 600; cursor: pointer;
        }
        .cart-checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .elder-mode .cart-item-img { width: 80px; height: 80px; }
        .elder-mode .cart-item-name { font-size: var(--font-size-lg); }
        .elder-mode .cart-qty-btn { width: 34px; height: 34px; font-size: 20px; }

        /* ==================== 订单评价页 (review-) ==================== */
        .review-page { padding: 12px 0 40px; }
        .review-section {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding: 16px;
            margin: 0 12px 12px; box-shadow: var(--shadow-sm);
        }
        .review-section-title { font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary); margin-bottom: 14px; }
        .review-stars-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
        .review-stars-label { font-size: var(--font-size-sm); color: var(--text-secondary); min-width: 84px; }
        .review-stars { display: flex; gap: 6px; }
        .review-star {
            font-size: 26px; color: #D9D9D9; cursor: pointer; transition: color 0.15s, transform 0.15s; line-height: 1;
        }
        .review-star.active { color: #FFB400; }
        .review-star:active { transform: scale(1.2); }
        .review-star-text { font-size: var(--font-size-xs); color: var(--text-tertiary); margin-left: 4px; }
        .review-photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }
        .review-photo-add {
            width: 76px; height: 76px; border: 2px dashed var(--border); border-radius: var(--radius-sm);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            color: var(--text-tertiary); cursor: pointer; background: var(--bg-primary); font-size: var(--font-size-xs);
        }
        .review-photo-add i { font-size: 22px; margin-bottom: 4px; }
        .review-photo-item { width: 76px; height: 76px; border-radius: var(--radius-sm); position: relative; overflow: hidden; }
        .review-photo-item img { width: 100%; height: 100%; object-fit: cover; }
        .review-photo-del {
            position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
            background: rgba(0,0,0,0.55); color: #fff; border: none; font-size: 12px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .review-anon-row { display: flex; align-items: center; justify-content: space-between; }
        .review-anon-row .review-anon-label { font-size: var(--font-size-sm); color: var(--text-primary); }

        /* ==================== 售后管理页 (aftersale-) ==================== */
        .aftersale-page { padding: 12px 0 40px; }
        .aftersale-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding: 14px;
            margin: 0 12px 12px; box-shadow: var(--shadow-sm);
        }
        .aftersale-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .aftersale-card-no { font-size: var(--font-size-xs); color: var(--text-tertiary); }
        .aftersale-status-tag { font-size: var(--font-size-xs); padding: 2px 10px; border-radius: var(--radius-full); font-weight: 600; }
        .aftersale-status-tag.pending { background: #FFF5E6; color: #F58500; }
        .aftersale-status-tag.processing { background: #E8F2FF; color: var(--info); }
        .aftersale-status-tag.done { background: #E6FAF5; color: var(--success); }
        .aftersale-status-tag.rejected { background: #FFEBEE; color: var(--danger); }
        .aftersale-type-tag { font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-secondary); margin-right: 6px; }

        /* ==================== 物业报修记录 (repair-) ==================== */
        .repair-record-card {
            background: var(--bg-primary); border-radius: var(--radius-lg); padding: 14px;
            margin: 0 12px 10px; box-shadow: var(--shadow-sm);
        }
        .repair-record-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .repair-record-type { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
        .repair-record-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
        .repair-record-meta { font-size: var(--font-size-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; }

        /* ==================== 优惠券领取页 (coupon-claim-) ==================== */
        .coupon-claim-page { padding: 12px 0 40px; }
        .coupon-claim-section-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); padding: 0 16px 8px; margin-top: 8px; }

        /* dark mode 补充 */
        [data-theme="dark"] .cart-item,
        [data-theme="dark"] .review-section,
        [data-theme="dark"] .aftersale-card,
        [data-theme="dark"] .repair-record-card { background: var(--bg-primary); }
        [data-theme="dark"] .cart-bottom-bar { background: var(--bg-primary); border-top-color: var(--border); }
        [data-theme="dark"] .aftersale-status-tag.pending { background: rgba(245,133,0,0.18); }
        [data-theme="dark"] .aftersale-status-tag.processing { background: rgba(0,122,255,0.18); }
        [data-theme="dark"] .aftersale-status-tag.done { background: rgba(12,166,120,0.18); }
        [data-theme="dark"] .aftersale-status-tag.rejected { background: rgba(255,77,79,0.18); }
        [data-theme="dark"] .review-photo-add { background: var(--bg-secondary); border-color: var(--border); }

        /* ==================== 手势交互系统 ==================== */

        /* 全屏滑动返回支持：页面只允许浏览器处理垂直滚动，横向手势交给JS */
        /* 横向滚动容器需要恢复 touch-action 以保留原生横向滑动 */
        .page .publish-template-list,
        .page .search-filter-bar,
        .page .fav-merchant-scroll,
        .page [style*="overflow-x: auto"],
        .page [style*="overflow-x:scroll"],
        .page [style*="overflow-x:auto"] {
            touch-action: pan-x pan-y;
        }

        /* P0-1: 边缘滑动返回 */
        .page.edge-swiping {
            transition: none !important;
            transform: translateX(var(--swipe-x, 0)) !important;
            box-shadow: -4px 0 20px rgba(0,0,0,0.15);
            will-change: transform;
        }
        .edge-swipe-shadow {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0); z-index: 9998;
            pointer-events: none; transition: background-color 0.2s;
        }
        .edge-swipe-shadow.active { background: rgba(0,0,0,0.3); }

        /* P0-2: 底部弹窗下滑关闭 */
        .swipeable-sheet {
            transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
            will-change: transform;
        }
        .swipeable-sheet.dragging {
            transition: none;
        }
        .swipeable-sheet.closing {
            transform: translateY(100%) !important;
            transition: transform 0.25s ease-in;
        }

        /* P1-4: 页面转场（已关闭点击切换的滑动，仅边缘手势通过内联样式控制） */
        .page {
            transition: none;
            transform: none;
        }
        .page.active {
            transform: none;
        }
        .page.slide-leaving {
            opacity: 0.7;
        }
        .page.no-transition {
            transition: none !important;
        }
        /* dy-detail-page 保持原有 fixed 布局 */
        .dy-detail-page {
            transform: translateX(100%);
        }
        .dy-detail-page.active {
            transform: translateX(0);
        }
        .dy-detail-page.edge-swiping {
            transform: translateX(var(--swipe-x, 0)) !important;
        }

        /* P1-5: 图片查看器 */
        .img-viewer-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.95); z-index: var(--z-toast);
            display: none; align-items: center; justify-content: center;
            overflow: hidden; touch-action: none;
        }
        .img-viewer-overlay.show { display: flex; }
        .img-viewer-container {
            position: relative; width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        .img-viewer-img {
            max-width: 100%; max-height: 100%; object-fit: contain;
            transform-origin: center center;
            transition: transform 0.2s ease-out;
            will-change: transform;
            -webkit-user-drag: none; user-select: none;
        }
        .img-viewer-img.no-transition { transition: none; }
        .img-viewer-close {
            position: absolute; top: 12px; right: 12px; z-index: 2;
            width: 36px; height: 36px; border-radius: 50%;
            background: rgba(255,255,255,0.15); border: none;
            color: #fff; font-size: 18px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            -webkit-tap-highlight-color: transparent;
        }
        .img-viewer-counter {
            position: absolute; bottom: 20px; left: 50%;
            transform: translateX(-50%); z-index: 2;
            color: rgba(255,255,255,0.8); font-size: 14px;
            background: rgba(0,0,0,0.4); padding: 4px 14px;
            border-radius: 20px; pointer-events: none;
        }
        .img-viewer-hint {
            position: absolute; bottom: 60px; left: 50%;
            transform: translateX(-50%); z-index: 2;
            color: rgba(255,255,255,0.5); font-size: 12px;
            pointer-events: none; transition: opacity 0.5s;
        }

        /* P2-6: 长按上下文菜单 */
        .longpress-menu {
            position: fixed; z-index: 99998;
            background: var(--bg-primary); border-radius: var(--radius-md);
            box-shadow: 0 8px 32px rgba(0,0,0,0.18);
            padding: 4px 0; min-width: 160px;
            overflow: hidden;
            transform: scale(0.8); opacity: 0;
            transition: transform 0.15s ease-out, opacity 0.15s ease-out;
            transform-origin: center top;
        }
        .longpress-menu.show { transform: scale(1); opacity: 1; }
        .longpress-menu-item {
            display: flex; align-items: center; gap: 10px;
            padding: 12px 16px; cursor: pointer;
            font-size: var(--font-size-sm); color: var(--text-primary);
            -webkit-tap-highlight-color: transparent;
        }
        .longpress-menu-item:active { background: var(--bg-secondary); }
        .longpress-menu-item i { width: 18px; text-align: center; color: var(--text-tertiary); }
        .longpress-menu-item.danger { color: var(--danger); }
        .longpress-menu-item.danger i { color: var(--danger); }
        .longpress-backdrop {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            z-index: 99997; background: transparent;
        }

        /* P2-7: 首页Tab横滑 */
        .feed-tabs {
            background: transparent;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        .feed-tabs.tabs-sticky {
            background: #ffffff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        [data-theme="dark"] .feed-tabs.tabs-sticky {
            background: var(--bg-primary);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        .feed-tabs-swipe-wrapper {
            overflow-x: auto; scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch; scrollbar-width: none;
            display: flex; scroll-behavior: smooth;
            touch-action: pan-x pan-y;
        }
        .feed-tabs-swipe-wrapper::-webkit-scrollbar { display: none; }
        .feed-tabs-swipe-section {
            scroll-snap-align: start; flex: 0 0 100%;
            width: 100%; min-height: 100px;
        }

        /* 通用下拉刷新指示器 */
        .pull-refresh-indicator {
            text-align: center; padding: 12px;
            font-size: var(--font-size-sm); color: var(--text-tertiary);
            column-span: all; transition: opacity 0.2s;
        }

        /* ==================== 全部服务页 样式 ==================== */
        #page-all-services {
            background: var(--bg-secondary);
            min-height: 100vh;
            box-sizing: border-box;
            padding-bottom: 32px;
        }
        /* 顶部导航栏（sticky） */
        .all-services-header {
            position: sticky; top: 0; z-index: 50;
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px;
            background: var(--bg-primary);
            box-shadow: 0 1px 6px rgba(0,0,0,0.05);
        }
        .all-services-header .back-btn {
            background: none; border: none; font-size: 18px;
            color: var(--text-primary); cursor: pointer; padding: 6px 8px;
            -webkit-tap-highlight-color: transparent;
        }
        .all-services-header .header-title {
            font-size: 17px; font-weight: 600; color: var(--text-primary);
        }
        .all-services-header .manage-btn {
            background: none; border: none; font-size: var(--font-size-sm);
            color: var(--primary); cursor: pointer; padding: 6px 10px;
            font-weight: 600;
            -webkit-tap-highlight-color: transparent;
        }
        /* 搜索框 */
        .all-services-search {
            display: flex; align-items: center; gap: 8px;
            margin: 12px 16px; padding: 10px 14px;
            background: var(--bg-primary); border-radius: var(--radius-md);
            box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        }
        .all-services-search i { color: var(--text-tertiary); font-size: 14px; }
        .all-services-search input {
            flex: 1; border: none; outline: none; background: transparent;
            font-size: var(--font-size-sm); color: var(--text-primary);
        }
        /* 分类区块 */
        .all-services-section {
            margin: 0 16px 16px;
        }
        .all-services-section .section-title {
            display: flex; align-items: baseline; gap: 8px;
            font-size: var(--font-size-base); font-weight: 600;
            color: var(--text-primary); margin-bottom: 12px;
        }
        .all-services-section .section-hint {
            font-size: 12px; font-weight: 400; color: var(--text-tertiary);
        }
        /* 我的服务网格 */
        .my-services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .my-service-item {
            position: relative;
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            padding: 12px 4px; border-radius: var(--radius-md);
            background: var(--bg-primary); cursor: pointer;
            transition: transform 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .my-service-item:active { transform: scale(0.94); }
        .my-service-item.manage-mode { animation: svcShake 0.4s ease-in-out infinite alternate; }
        .my-service-icon {
            width: 44px; height: 44px; border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 18px;
        }
        .my-service-label {
            font-size: 12px; color: var(--text-primary); text-align: center;
            max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .svc-remove-badge {
            position: absolute; top: -4px; right: -4px;
            width: 18px; height: 18px; border-radius: 50%;
            background: var(--danger, var(--danger)); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; z-index: 2;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .my-services-empty, .all-services-empty {
            grid-column: 1 / -1;
            text-align: center; padding: 24px 12px;
            font-size: var(--font-size-sm); color: var(--text-tertiary);
        }
        @keyframes svcShake {
            from { transform: rotate(-1.2deg); }
            to { transform: rotate(1.2deg); }
        }
        /* 全部服务列表 */
        .all-services-list { margin: 0 16px; }
        .service-category-group {
            background: var(--bg-primary); border-radius: var(--radius-md);
            margin-bottom: 12px; overflow: hidden;
        }
        .service-category-title {
            padding: 12px 16px 6px; font-size: var(--font-size-sm);
            font-weight: 600; color: var(--text-tertiary);
        }
        .service-category-item {
            position: relative;
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; cursor: pointer;
            border-top: 1px solid var(--border-color, rgba(0,0,0,0.06));
            transition: background 0.15s ease, transform 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .service-category-item:first-of-type { border-top: none; }
        .service-category-item:active { background: var(--bg-secondary); transform: scale(0.99); }
        .service-category-icon {
            width: 38px; height: 38px; border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 16px; flex-shrink: 0;
        }
        .service-category-info {
            flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;
        }
        .service-category-name {
            font-size: var(--font-size-base); color: var(--text-primary); font-weight: 500;
        }
        .service-category-desc {
            font-size: 12px; color: var(--text-tertiary);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .svc-added-tag {
            font-size: 12px; color: var(--primary, var(--info));
            background: rgba(0,122,255,0.1); padding: 2px 8px; border-radius: var(--radius-sm);
            flex-shrink: 0;
        }
        .service-category-arrow {
            color: var(--text-tertiary); font-size: 12px; opacity: 0.6; flex-shrink: 0;
        }
        /* 长按激活态：缩放+震动动画 */
        .service-grid-item.longpress-active,
        .service-category-item.longpress-active,
        .my-service-item.longpress-active,
        .service-card-item.longpress-active,
        .quick-action-btn.longpress-active {
            transform: scale(0.9);
            animation: longpressShake 0.3s ease-in-out;
            filter: brightness(0.95);
        }
        @keyframes longpressShake {
            0%, 100% { transform: scale(0.9) rotate(0); }
            25% { transform: scale(0.9) rotate(-1deg); }
            75% { transform: scale(0.9) rotate(1deg); }
        }
        /* ==================== 添加到首页/桌面 弹窗样式 ==================== */
        .add-to-home-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            z-index: var(--z-toast); background: rgba(0,0,0,0.45);
            display: flex; align-items: flex-end; justify-content: center;
        }
        .add-to-home-sheet {
            width: 100%; max-width: 480px;
            background: var(--bg-primary, #fff);
            border-radius: 16px 16px 0 0;
            padding: 8px 0 16px;
            transform: translateY(100%);
            transition: transform 0.25s ease-out;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
        }
        .add-to-home-sheet.show { transform: translateY(0); }
        .add-to-home-sheet .sheet-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 20px 12px;
            border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
        }
        .add-to-home-sheet .sheet-header span {
            font-size: var(--font-size-base); font-weight: 600; color: var(--text-primary);
        }
        .add-to-home-sheet .sheet-header button {
            background: none; border: none; font-size: 16px;
            color: var(--text-tertiary); cursor: pointer; padding: 4px 8px;
            -webkit-tap-highlight-color: transparent;
        }
        .add-to-home-sheet .sheet-option {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 20px; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s ease;
        }
        .add-to-home-sheet .sheet-option:active { background: var(--bg-secondary); }
        .add-to-home-sheet .sheet-option > i {
            width: 36px; height: 36px; border-radius: var(--radius-sm);
            background: rgba(0,122,255,0.1); color: var(--primary, var(--info));
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; flex-shrink: 0;
        }
        .add-to-home-sheet .sheet-option > div {
            display: flex; flex-direction: column; gap: 2px;
        }
        .add-to-home-sheet .sheet-option span {
            font-size: var(--font-size-base); color: var(--text-primary); font-weight: 500;
        }
        .add-to-home-sheet .sheet-option small {
            font-size: 12px; color: var(--text-tertiary);
        }
        .add-to-home-sheet .sheet-cancel {
            margin: 8px 16px 0; padding: 14px; text-align: center;
            font-size: var(--font-size-base); color: var(--text-secondary);
            background: var(--bg-secondary); border-radius: var(--radius-md); cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .add-to-home-sheet .sheet-cancel:active { background: var(--border-color, rgba(0,0,0,0.08)); }
        /* 暗色模式适配 */
        [data-theme="dark"] .all-services-search,
        [data-theme="dark"] .my-service-item,
        [data-theme="dark"] .service-category-group { box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* ===== 分类图标色板（替代内联硬编码颜色，统一深浅主题） ===== */
.cat-ic {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); font-size: 18px;
}
.cat-ic.sm { width: 38px; height: 38px; font-size: 16px; border-radius: 11px; }
.cat-ic.lg { width: 40px; height: 40px; border-radius: var(--radius-md); }
.cat-ic.xl { width: 72px; height: 72px; border-radius: var(--radius-xl); }
.cat-indigo   { background: #F1F0FF; color: #5856D6; }
.cat-blue     { background: #E8F2FF; color: #007AFF; }
.cat-green    { background: #E8F9ED; color: #1e8e3e; }
.cat-green2   { background: #E5F7ED; color: var(--accent-teal); }
.cat-purple   { background: #F3E8FF; color: #9C27B0; }
.cat-purple2  { background: #F5F0FF; color: #7C3AED; }
.cat-violet   { background: #EDE7F6; color: #667EEA; }
.cat-orange   { background: #FFF5E6; color: #F58500; }
.cat-orange2  { background: #FFF8E1; color: #F58500; }
.cat-teal     { background: #E6FAF5; color: #00B8A9; }
.cat-cyan     { background: #E6F0FF; color: #30B0C7; }
.cat-red      { background: #FFEBEE; color: #FF5252; }
.cat-pink     { background: #FFD9E7; color: #FF2D55; }
/* 白字场景：仅背景色，图标继承 category-icon-wrap 的白色 */
/* ===== 分类宫格四色收敛（2026-10-12 UI 优化）=====
   原 catbg-* 七色（粉/青/蓝绿/红/粉红/紫/蓝）导致 18 个图标 15 种饱和色并存。
   现按业务域收敛为 4 色，颜色即业务线：
     catbg-gov       政务治理线（橙 --primary）   安全/乡村政策/招工
     catbg-community 社区服务线（蓝 --info）      互助/工作/房屋/亲子/美食
     catbg-commerce  商业运营线（绿 --success）   闲置/宠物/运动/婚恋
     catbg-rural     涉农（棕 --accent-rural）    种植/养殖/农资/农机/农产品/土地流转
   保留旧 catbg-* 定义以兼容非分类宫格场景（团员头像/黑名单头像等）。 */
.catbg-gov       { background: var(--primary); }
.catbg-community { background: var(--info); }
.catbg-commerce  { background: var(--success); }
.catbg-rural     { background: var(--accent-rural); }
/* 旧七色（兼容保留，新代码请用上面 4 个业务线类） */
.catbg-pink    { background: #FF4D8F; }
.catbg-teal    { background: #00B8A9; }
.catbg-cyan    { background: #30B0C7; }
.catbg-red     { background: #FF5252; }
.catbg-pinkred { background: #FF2D55; }
.catbg-indigo  { background: #5856D6; }
.catbg-blue2   { background: #5B8DEF; }
.catbg-orange  { background: #FF9500; }
[data-theme="dark"] .cat-indigo   { background: rgba(88,86,214,0.22); color: #A5A1FF; }
[data-theme="dark"] .cat-blue     { background: rgba(0,122,255,0.22); color: #6BB1FF; }
[data-theme="dark"] .cat-green    { background: rgba(30,142,62,0.22); color: #5BD07E; }
[data-theme="dark"] .cat-green2   { background: rgba(12,166,120,0.22); color: #4FD9A6; }
[data-theme="dark"] .cat-purple   { background: rgba(156,39,176,0.22); color: #D08BE8; }
[data-theme="dark"] .cat-purple2  { background: rgba(124,58,237,0.22); color: #B497FF; }
[data-theme="dark"] .cat-violet   { background: rgba(102,118,234,0.22); color: #A5A9FF; }
[data-theme="dark"] .cat-orange   { background: rgba(245,133,0,0.22); color: #FFB24D; }
[data-theme="dark"] .cat-orange2  { background: rgba(245,133,0,0.22); color: #FFB24D; }
[data-theme="dark"] .cat-teal     { background: rgba(0,184,169,0.22); color: #4FD9CC; }
[data-theme="dark"] .cat-cyan     { background: rgba(48,176,199,0.22); color: #5FD2E5; }
[data-theme="dark"] .cat-red      { background: rgba(255,82,82,0.22); color: #FF8A8A; }
[data-theme="dark"] .cat-pink     { background: rgba(255,45,85,0.22); color: #FF7D9C; }
[data-theme="dark"] .catbg-pink    { background: rgba(255,77,143,0.4); }
[data-theme="dark"] .catbg-teal    { background: rgba(0,184,169,0.4); }
[data-theme="dark"] .catbg-cyan    { background: rgba(48,176,199,0.4); }
[data-theme="dark"] .catbg-red     { background: rgba(255,82,82,0.4); }
[data-theme="dark"] .catbg-pinkred { background: rgba(255,45,85,0.4); }
[data-theme="dark"] .catbg-indigo  { background: rgba(88,86,214,0.45); }
[data-theme="dark"] .catbg-blue2   { background: rgba(91,141,239,0.45); }
[data-theme="dark"] .catbg-orange  { background: rgba(255,149,0,0.45); }
/* 业务线四色 · 暗色适配（2026-10-12）*/
[data-theme="dark"] .catbg-gov       { background: rgba(var(--primary-rgb),0.42); }
[data-theme="dark"] .catbg-community { background: rgba(33,150,243,0.42); }
[data-theme="dark"] .catbg-commerce  { background: rgba(76,175,80,0.42); }
[data-theme="dark"] .catbg-rural     { background: rgba(var(--accent-rural-rgb),0.48); }
/* 浅底标签/徽章（背景浅色 + 语义色图标，暗色下用低透叠加保持可读） */
.catl-green   { background: var(--success-light); }
.catl-blue    { background: #E8F2FF; }
.catl-primary { background: #FFF0E8; }
.catl-warning { background: #FFF4E5; }
.catl-danger  { background: #FFF5F5; }
.catl-purple  { background: #F1F0FF; }
[data-theme="dark"] .catl-green   { background: rgba(30,142,62,0.18); }
[data-theme="dark"] .catl-blue    { background: rgba(0,122,255,0.18); }
[data-theme="dark"] .catl-primary { background: rgba(255,109,59,0.18); }
[data-theme="dark"] .catl-warning { background: rgba(245,133,0,0.18); }
[data-theme="dark"] .catl-danger  { background: rgba(255,82,82,0.18); }
[data-theme="dark"] .catl-purple  { background: rgba(124,58,237,0.18); }

    
/* ===== 工具类（原型重构：内联样式抽类，语义不变） ===== */
.u-cover{width:100%;height:100%;object-fit:cover;}
.u-cover-round{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.u-bg-none{background:none;}
.u-flex1{flex:1;}
.u-pointer{cursor:pointer;}

/* ===== 工具类·第二批（组合样式抽类，语义不变） ===== */
.u-flex1-min0{flex:1;min-width:0;}
.u-tag-pill{padding:8px 14px;background:var(--bg-secondary);border-radius:20px;font-size:var(--font-size-sm);cursor:pointer;border:2px solid transparent;}
.u-btn-pill{padding:6px 16px;border-radius:var(--radius-xl);border:none;background:var(--bg-secondary);color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;flex-shrink:0;}

.u-none{display:none;}
.u-block{display:block;}
.u-ib{display:inline-block;}
.u-tac{text-align:center;}
.u-tal{text-align:left;}
.u-tar{text-align:right;}
.u-fw7{font-weight:700;}
.u-fw6{font-weight:600;}
.u-fw4{font-weight:400;}
.u-aic{align-items:center;}
.u-jcc{justify-content:center;}
.u-jcsb{justify-content:space-between;}
.u-fdc{flex-direction:column;}
.u-fww{flex-wrap:wrap;}
.u-oh{overflow:hidden;}
.u-rel{position:relative;}
.u-abs{position:absolute;}
.u-w100{width:100%;}
.u-h100{height:100%;}
.u-bb{box-sizing:border-box;}
.u-usn{user-select:none;}
.u-wnw{white-space:nowrap;}
.u-toe{text-overflow:ellipsis;}
.u-oxh{overflow-x:hidden;}
.u-oya{overflow-y:auto;}
/* ===== 加入小区/村庄 - 定位推荐 ===== */
.join-location-recommend{margin:12px 16px;padding:14px;background:var(--bg-secondary);border-radius:var(--radius-md);}
.join-loc-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.join-loc-header i{color:var(--primary);font-size:14px;}
.join-loc-header span{font-size:14px;font-weight:600;color:var(--text-primary);flex:1;}
.join-loc-refresh{font-size:12px;color:var(--primary);background:none;border:none;cursor:pointer;}
.join-nearby-list{display:flex;flex-direction:column;gap:8px;}
.join-nearby-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--bg-primary);border-radius:var(--radius-sm);cursor:pointer;transition:background .2s;}
.join-nearby-item:hover{background:var(--primary-light);}
.join-nearby-name{font-size:14px;font-weight:600;color:var(--text-primary);}
.join-nearby-dist{font-size:12px;color:var(--text-tertiary);}
.join-search-hint{margin-top:10px;font-size:12px;color:var(--text-tertiary);text-align:center;}
.join-multi-hint{display:flex;gap:8px;margin:0 16px 12px;padding:10px 12px;background:var(--primary-light);border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary);line-height:1.6;}
.join-multi-hint i{color:var(--primary);flex-shrink:0;margin-top:2px;}

/* ===== 范围切换栏（附近tab） ===== */
.scope-switch-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border);}
.scope-switch-label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);}
.scope-switch-label i{color:var(--primary);font-size:12px;}
.scope-switch-buttons{display:flex;gap:4px;}
.scope-btn{padding:5px 12px;font-size:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:all .2s;}
.scope-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.scope-btn:hover:not(.active){background:var(--primary-light);}
.scope-low-tip{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#FFF8E1;border-bottom:1px solid var(--border);font-size:12px;color:var(--warning-dark);}
.scope-low-tip i{flex-shrink:0;}
.scope-low-tip a{color:var(--primary);text-decoration:underline;cursor:pointer;font-weight:600;}

/* ===== 区域逐级切换 ===== */
.region-type-tab{padding:6px 16px;font-size:13px;border:1px solid var(--border);border-radius:16px;background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:all .2s;}
.region-type-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.region-list-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--bg-primary);border-radius:var(--radius-sm);cursor:pointer;transition:background .2s;font-size:14px;color:var(--text-primary);}
.region-list-item:hover{background:var(--primary-light);}
/* 区域标签（横向排列） */
.region-tag{display:inline-block;padding:5px 12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);font-size:var(--font-size-xs);color:var(--text-primary);cursor:pointer;transition:all 0.2s ease;}
.region-tag:hover{border-color:var(--primary);color:var(--primary);}

/* ===== 首页分类 - 网格布局 + 拖拽编辑（每行5个） ===== */
.category-tabs{position:relative;}
.category-item.dragging{opacity:.5;transform:scale(1.1);z-index:100;}
.category-item.drag-over{border-top:2px solid var(--primary);}
.category-item .rural-badge{position:absolute;top:0;right:4px;width:6px;height:6px;border-radius:50%;background:#4CAF50;}
.category-edit-hint{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#FFF8E1;border-top:1px solid var(--border);}
.category-edit-hint span{font-size:12px;color:var(--warning-dark);}
.category-edit-done{padding:4px 14px;font-size:12px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;}


/* ============================================================
 * 房屋管理模块样式
 * ============================================================ */

/* 我的房屋容器 */
.my-houses-container { padding: 12px 16px 100px; }

/* 当前居所提示 */
.house-current-tip {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px;
  font-size: 13px; color: #1565C0;
}
.house-current-tip i { font-size: 16px; flex-shrink: 0; }
.house-current-tip strong { font-weight: 600; }
.house-tip-desc { font-size: 11px; color: #1976D2; opacity: 0.8; margin-left: auto; }

/* 房屋卡片 */
.house-card {
  background: #fff; border-radius: var(--radius); padding: 16px;
  margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer; transition: transform 0.15s;
}
.house-card:active { transform: scale(0.98); }

.house-card-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.house-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #E3F2FD, #90CAF9);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #1565C0; flex-shrink: 0;
}
.house-card-info { flex: 1; min-width: 0; }
.house-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.house-card-addr { font-size: 12px; color: var(--text-secondary); }

.house-current-badge {
  background: var(--primary); color: #fff; font-size: 11px;
  padding: 3px 8px; border-radius: var(--radius-sm); flex-shrink: 0; font-weight: 500;
}

.house-card-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--border-light);
}
.house-type-tag { font-size: 12px; font-weight: 500; }
.house-meta-item { font-size: 12px; color: var(--text-tertiary); }
.house-certified { color: var(--success); }
.house-certified i { margin-right: 2px; }

.house-card-actions {
  display: flex; gap: 8px; margin-top: 12px;
}
.house-action-btn {
  flex: 1; padding: 8px 0; border: 1px solid var(--border);
  background: #fff; border-radius: var(--radius-sm); font-size: 13px;
  color: var(--text-primary); cursor: pointer; transition: all 0.15s;
}
.house-action-btn:active { background: var(--bg-secondary); }
.house-action-danger { color: var(--danger); border-color: #FFCDD2; }

/* 添加房屋表单 */
.add-house-container { padding: 12px 16px 100px; }
.form-section {
  background: #fff; border-radius: var(--radius); padding: 16px;
  margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.form-section-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 14px; padding-left: 8px; border-left: 3px solid var(--primary);
}
.form-item { margin-bottom: 14px; }
.form-item:last-child { margin-bottom: 0; }
.form-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text-primary); margin-bottom: 6px;
}
.required { color: var(--danger); margin-left: 2px; }
.form-input, .form-select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 14px; color: var(--text-primary);
  background: var(--bg-primary); box-sizing: border-box;
}
.form-input:focus, .form-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(76,175,80,0.1);
}
.form-radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.form-radio {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.form-radio input { accent-color: var(--primary); }
.form-checkbox {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.form-checkbox input { accent-color: var(--primary); width: 16px; height: 16px; }
.form-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.form-actions {
  display: flex; gap: 12px; margin-top: 20px;
}
.form-actions .btn-primary, .form-actions .btn-outline { flex: 1; }

/* 房屋详情 */
.house-detail-container { padding: 12px 16px 100px; }
.house-detail-card {
  background: #fff; border-radius: var(--radius); padding: 20px;
  margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.house-detail-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-light);
}
.house-detail-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, #E3F2FD, #64B5F6);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #1565C0; flex-shrink: 0;
}
.house-detail-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.house-detail-addr { font-size: 13px; color: var(--text-secondary); }

.house-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.house-detail-item {
  display: flex; flex-direction: column; gap: 4px;
}
.house-detail-label { font-size: 12px; color: var(--text-tertiary); }
.house-detail-value { font-size: 14px; font-weight: 500; color: var(--text-primary); }

.house-detail-actions { display: flex; gap: 12px; }
.house-detail-actions .btn-primary, .house-detail-actions .btn-outline { flex: 1; }

/* 家庭房屋列表 */
.family-house-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: var(--bg-secondary); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: pointer;
}
.family-house-icon { font-size: 18px; color: var(--info); flex-shrink: 0; }
.family-house-info { flex: 1; min-width: 0; }
.family-house-name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.family-house-meta { font-size: 11px; color: var(--text-tertiary); }
.family-house-arrow { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; }

/* 设置项角标 */
.settings-item-badge {
  background: var(--primary); color: #fff; font-size: 11px;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; margin-right: 4px;
}


/* ===== 增强版商家卡片样式 ===== */
.merchant-card-enhanced {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.merchant-card-enhanced:active {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.merchant-card-enhanced .merchant-card-image {
    width: 116px;
    height: 116px;
    min-height: 0;
    flex-shrink: 0;
    align-self: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.merchant-card-enhanced .merchant-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-card-enhanced .merchant-card-body {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
}

.merchant-card-enhanced .merchant-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.merchant-card-enhanced .merchant-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-card-enhanced .merchant-card-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    margin-left: 8px;
}

.merchant-card-enhanced .merchant-card-tag.open {
    background: var(--success-light);
    color: #4CAF50;
}

.merchant-card-enhanced .merchant-card-tag.closed {
    background: #F5F5F5;
    color: #9E9E9E;
}

.merchant-card-enhanced .merchant-card-tag.certified {
    background: #E3F2FD;
    color: #2196F3;
}

.merchant-card-enhanced .merchant-card-tag.promo {
    background: #FFF3E0;
    color: #FF9800;
}

.merchant-card-enhanced .merchant-card-meta {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.merchant-card-enhanced .merchant-card-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.merchant-card-enhanced .merchant-card-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.merchant-card-enhanced .merchant-card-info-item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.merchant-card-enhanced .merchant-card-info-item.free-delivery {
    color: #4CAF50;
    font-weight: 600;
}

.merchant-card-enhanced .merchant-card-addr {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merchant-card-enhanced .merchant-card-addr i {
    margin-right: 4px;
}

.merchant-card-enhanced .merchant-card-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* 商家分类图标样式 */
.merchant-category-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    color: #FF9800;
}

.merchant-category-item.active .merchant-category-icon {
    background: linear-gradient(135deg, #FF9800, var(--warning-dark));
    color: #fff;
}


/* ===== 商家详情页增强样式 ===== */
.merchant-detail-header-enhanced {
    padding: 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
}

.merchant-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.merchant-detail-top .merchant-detail-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    margin-right: 12px;
}

.merchant-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.merchant-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.merchant-action-btn:active {
    transform: scale(0.95);
    background: var(--bg-secondary);
}

.merchant-action-btn.favorited {
    color: #FF4081;
    border-color: #FF4081;
    background: #FFF0F5;
}

.merchant-action-btn.favorited i {
    font-weight: 900;
}

.merchant-detail-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.merchant-detail-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.merchant-rating-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    font-size: 14px;
}

.merchant-rating-score {
    font-size: 16px;
    font-weight: 700;
    color: #FF9800;
}

.merchant-rating-count {
    font-size: 12px;
    color: var(--text-tertiary);
}

.merchant-detail-avg-price {
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-md);
}

.merchant-detail-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* 封面图指示器 */
.merchant-cover-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

.merchant-cover-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    transition: all 0.3s ease;
}

.merchant-cover-dot.active {
    width: 18px;
    border-radius: 3px;
    background: #fff;
}

/* 营业信息卡片增强 */
/* 注意：本卡片是「多行信息」容器，须恢复块级布局；
   display:flex 的 .merchant-info-card 规则只适用于交易记录的单行商家条目 */
.merchant-info-card-enhanced {
    display: block;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: 4px 16px;
    cursor: default;
}

.merchant-info-card-enhanced .merchant-info-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.merchant-info-nav-btn {
    padding: 6px 12px;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: var(--radius);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.merchant-info-nav-btn:active {
    background: var(--primary);
    color: #fff;
}


/* ===== 商品详情页增强样式 ===== */
.product-detail-bottom-bar-enhanced {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    gap: 12px;
}

.product-bottom-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-bottom-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    position: relative;
    padding: 4px 8px;
}

.product-bottom-action-btn i {
    font-size: 20px;
}

.product-bottom-action-btn.favorited {
    color: #FF4081;
}

.product-cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    background: #FF4081;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.product-bottom-buttons {
    display: flex;
    flex: 1;
    gap: 8px;
}

.product-btn-add-cart,
.product-btn-contact {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.product-btn-add-cart {
    background: linear-gradient(135deg, #FF9800, var(--warning-dark));
    color: #fff;
}

.product-btn-contact {
    background: linear-gradient(135deg, var(--primary), #FF8F5E);
    color: #fff;
}

.product-btn-add-cart:active,
.product-btn-contact:active {
    transform: scale(0.98);
}

/* ===== 商品清单页面样式 ===== */
.product-cart-empty {
    text-align: center;
    padding: 80px 20px;
}

.cart-merchant-group {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
}

.cart-merchant-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    color: var(--text-primary);
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    position: relative;
}

.cart-item-image {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-item-spec {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-item-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:active {
    background: var(--bg-secondary);
}

.qty-value {
    font-size: 14px;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

.cart-item-delete {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-item-delete:active {
    color: var(--danger);
}


/* ===== 交易记录页面样式 ===== */
.transaction-tabs {
    display: flex;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    padding: 0 8px;
}

.transaction-tab {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.transaction-tab.active {
    color: var(--primary);
    font-weight: 600;
}

.transaction-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.transaction-empty {
    text-align: center;
    padding: 60px 20px;
}

.transaction-card {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.transaction-card:active {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.transaction-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.transaction-merchant {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.transaction-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.transaction-status.pending {
    background: #FFF3E0;
    color: #FF9800;
}

.transaction-status.processing {
    background: #E3F2FD;
    color: #2196F3;
}

.transaction-status.completed {
    background: var(--success-light);
    color: #4CAF50;
}

.transaction-status.cancelled {
    background: #F5F5F5;
    color: #9E9E9E;
}

.transaction-items {
    padding: 8px 16px;
}

.transaction-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 12px;
}

.transaction-item-image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.transaction-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.transaction-item-info {
    flex: 1;
    min-width: 0;
}

.transaction-item-name {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-item-spec {
    font-size: 12px;
    color: var(--text-tertiary);
}

.transaction-item-price {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.transaction-card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.transaction-total {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.transaction-actions {
    display: flex;
    gap: 8px;
}

.transaction-btn {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.transaction-btn.contact {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.transaction-btn.cancel {
    color: var(--danger);
    border-color: var(--danger);
}

.transaction-btn.complete {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

.transaction-btn.review {
    color: var(--primary);
    border-color: var(--primary);
}

.transaction-btn.rebuy {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.transaction-btn:active {
    transform: scale(0.95);
}

/* 交易详情页面 */
.transaction-detail-status {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--primary), #FF8F5E);
    color: #fff;
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.status-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.status-info {
    flex: 1;
}

.status-text {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.status-desc {
    font-size: 13px;
    opacity: 0.9;
}

.transaction-detail-section {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

/* 交易详情里的单行商家条目（头像+名称）才需要横向 flex；
   注意不能作用于商家详情页的「营业信息」卡片（同名 class、多行结构） */
.transaction-detail-section .merchant-info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.merchant-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.merchant-info {
    flex: 1;
}

.merchant-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.merchant-desc {
    font-size: 12px;
    color: var(--text-tertiary);
}

.order-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.order-info-label {
    color: var(--text-tertiary);
}

.order-info-value {
    color: var(--text-primary);
    font-weight: 500;
}

.order-info-row.total {
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.order-info-value.price {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.transaction-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    background: #E3F2FD;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: #1565C0;
    line-height: 1.6;
}


/* ===== 商家评价页面样式 ===== */
.review-merchant-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-primary);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.review-merchant-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary), #FF8F5E);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.review-merchant-info {
    flex: 1;
}

.review-merchant-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.review-merchant-desc {
    font-size: 13px;
    color: var(--text-tertiary);
}

.review-section {
    background: var(--bg-primary);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 12px;
}

.review-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.review-rating-stars {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.review-rating-stars i {
    font-size: 32px;
    color: #E0E0E0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-rating-stars i:active {
    transform: scale(1.2);
}

.review-rating-text {
    font-size: 14px;
    color: var(--text-tertiary);
}

.review-sub-ratings {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-sub-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub-rating-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.sub-rating-stars {
    display: flex;
    gap: 4px;
}

.sub-rating-stars i {
    font-size: 20px;
    color: #E0E0E0;
    cursor: pointer;
}

.review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-tag {
    padding: 6px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-tag.active {
    background: #FFF3E0;
    border-color: var(--primary);
    color: var(--primary);
}

.review-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
}

.review-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.review-char-count {
    text-align: right;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 6px;
}

.review-image-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-image-item {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    background: var(--bg-secondary);
}

.review-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-image-item.add-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    color: var(--text-tertiary);
    font-size: 11px;
    cursor: pointer;
}

.review-image-item.add-btn i {
    font-size: 24px;
    margin-bottom: 4px;
}

.review-image-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-anonymous {
    background: var(--bg-primary);
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 80px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-label input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.review-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
}

.review-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary), #FF8F5E);
    color: #fff;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,109,59,0.3);
}

.review-submit-btn:active {
    transform: scale(0.98);
}

/* ===== 团购活动页面样式 ===== */
.group-buy-banner {
    background: linear-gradient(135deg, #FF6B3B, #FF8F5E);
    color: #fff;
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    text-align: center;
}

.banner-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.banner-desc {
    font-size: 13px;
    opacity: 0.9;
}

.group-buy-card {
    display: flex;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.group-buy-card:active {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.group-buy-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.group-buy-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-buy-info {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.group-buy-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-buy-merchant {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.group-buy-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.group-buy-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.group-buy-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-symbol {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
}

.price-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.price-original {
    font-size: 12px;
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.price-discount {
    font-size: 11px;
    background: #FFEBEE;
    color: #F44336;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.group-buy-sold {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* 团购详情页面 */
.group-buy-detail-image {
    width: 100%;
    height: 240px;
}

.group-buy-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-buy-detail-price-section {
    background: var(--bg-primary);
    padding: 16px;
    margin-bottom: 12px;
}

.detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}

.detail-price-symbol {
    font-size: 16px;
    color: var(--primary);
    font-weight: 600;
}

.detail-price-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
}

.detail-price-original {
    font-size: 14px;
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.detail-price-discount {
    font-size: 12px;
    background: #FFEBEE;
    color: #F44336;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    font-weight: 600;
}

.detail-sold-count {
    font-size: 13px;
    color: var(--text-tertiary);
}

.group-buy-detail-section {
    background: var(--bg-primary);
    padding: 16px;
    margin-bottom: 12px;
}

.detail-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.detail-merchant {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.detail-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.detail-rules {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rule-item {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-usage {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.usage-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.step-number {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.group-buy-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.group-buy-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.group-buy-price .price-label {
    font-size: 12px;
    color: var(--text-tertiary);
}

.group-buy-price .price-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.group-buy-price .price-original {
    font-size: 13px;
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.group-buy-btn {
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--primary), #FF8F5E);
    color: #fff;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,109,59,0.3);
}

.group-buy-btn:active {
    transform: scale(0.98);
}

/* ===== 优惠券页面样式 ===== */
.coupon-tabs {
    display: flex;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    padding: 0 8px;
}

.coupon-tab {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.coupon-tab.active {
    color: var(--primary);
    font-weight: 600;
}

.coupon-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.coupon-empty {
    text-align: center;
    padding: 60px 20px;
}

.coupon-card {
    display: flex;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.coupon-card:active {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.coupon-card.used,
.coupon-card.expired {
    opacity: 0.6;
}

.coupon-left {
    width: 100px;
    background: linear-gradient(135deg, #FF6B3B, #FF8F5E);
    color: #fff;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.coupon-card.used .coupon-left,
.coupon-card.expired .coupon-left {
    background: #BDBDBD;
}

.coupon-price {
    display: flex;
    align-items: baseline;
}

.coupon-symbol {
    font-size: 14px;
    font-weight: 600;
}

.coupon-value {
    font-size: 28px;
    font-weight: 800;
}

.coupon-original {
    font-size: 11px;
    opacity: 0.9;
    margin-top: 4px;
}

.coupon-right {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.coupon-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupon-merchant {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.coupon-expire {
    font-size: 11px;
    color: var(--text-tertiary);
}

.coupon-status {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.coupon-card.available .coupon-status {
    background: var(--success-light);
    color: #4CAF50;
}

.coupon-card.used .coupon-status {
    background: #F5F5F5;
    color: #9E9E9E;
}

.coupon-card.expired .coupon-status {
    background: #FFEBEE;
    color: #F44336;
}


/* ===== 商家搜索页面样式 ===== */
.search-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 14px;
    color: var(--text-primary);
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-primary);
}

.search-clear-btn {
    position: absolute;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-tertiary);
    color: #fff;
    border: none;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-cancel-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.search-content {
    padding: 16px;
}

.search-section {
    margin-bottom: 24px;
}

.search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.search-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.search-clear-history {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-history-tags,
.search-hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-history-tag,
.search-hot-tag {
    padding: 6px 14px;
    background: var(--bg-secondary);
    border-radius: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-history-tag:active,
.search-hot-tag:active {
    background: var(--primary);
    color: #fff;
}

.search-hot-merchants {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-hot-merchant {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s ease;
}

.search-hot-merchant:active {
    background: var(--bg-secondary);
}

.hot-merchant-rank {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-xs);
    background: linear-gradient(135deg, #FF6B3B, #FF8F5E);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-hot-merchant:nth-child(2) .hot-merchant-rank {
    background: linear-gradient(135deg, #FF9800, #FFB74D);
}

.search-hot-merchant:nth-child(3) .hot-merchant-rank {
    background: linear-gradient(135deg, #FFC107, #FFD54F);
}

.hot-merchant-image {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.hot-merchant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hot-merchant-info {
    flex: 1;
    min-width: 0;
}

.hot-merchant-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-merchant-meta {
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 搜索结果 */
.search-results {
    padding: 0;
}

.search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
}

.search-results-header > span {
    font-size: 13px;
    color: var(--text-secondary);
}

.search-results-sort {
    display: flex;
    gap: 16px;
}

.sort-option {
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 0;
    position: relative;
}

.sort-option.active {
    color: var(--primary);
    font-weight: 600;
}

.sort-option.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--primary);
    border-radius: 1px;
}

.search-results-list {
    padding: 12px 16px;
}

.search-result-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.search-result-item:active {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.search-result-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.search-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.search-result-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-rating {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.search-result-meta {
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.search-result-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.search-result-tag {
    font-size: 10px;
    padding: 2px 6px;
    background: #FFF3E0;
    color: #FF9800;
    border-radius: 4px;
}

.search-results-empty {
    text-align: center;
    padding: 60px 20px;
}

/* ===== 商家筛选页面样式 ===== */
.filter-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
}

.filter-header h1 {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.filter-back-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-reset-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
}

.filter-content {
    padding: 16px;
    padding-bottom: 100px;
}

.filter-section {
    margin-bottom: 24px;
}

.filter-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-option {
    padding: 8px 16px;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-option.active {
    background: #FFF3E0;
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.filter-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
    display: flex;
    gap: 12px;
}

.filter-btn {
    flex: 1;
    padding: 14px;
    border-radius: var(--radius-xl);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.filter-btn.reset {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.filter-btn.confirm {
    background: linear-gradient(135deg, var(--primary), #FF8F5E);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255,109,59,0.3);
}

.filter-btn:active {
    transform: scale(0.98);
}


/* 聊天相册页面 */
.chat-album-page.active { display: flex; flex-direction: column; }

/* 鸿蒙风格：分类图标统一蓝色系 */
.category-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-md) !important;
    color: #3B82F6 !important;
    background: #E8F0FE !important;
}
.category-icon-wrap i {
    font-size: 18px !important;
}
.catbg-pink, .catbg-teal, .catbg-cyan, .catbg-red, .catbg-pinkred, .catbg-indigo, .catbg-blue2 {
    background: #E8F0FE !important;
}
/* ============================================
   鸿蒙风格第二阶段升级：组件规范化 + 字体 + 导航 + 动效
   ============================================ */

/* 1. 字体优化 - 鸿蒙字体栈 */
body, .page, input, textarea, select, button {
    font-family: 'HarmonyOS Sans', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. 字阶系统 - 统一字体大小 */
:root {
    --font-h1: 22px;
    --font-h2: 18px;
    --font-h3: 16px;
    --font-body: 15px;
    --font-caption: 13px;
    --font-small: 11px;
    --line-height-tight: 1.3;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;
}

/* 3. 按钮优化 - 更柔和的鸿蒙风格 */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    box-shadow: 0 4px 14px rgba(250,122,60,0.3) !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(250,122,60,0.4) !important;
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 8px rgba(250,122,60,0.25) !important;
}

/* 4. 输入框优化 - 鸿蒙风格 */
.form-input, .form-textarea, input[type="text"], input[type="number"], input[type="tel"], textarea {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border) !important;
    background: var(--bg-primary) !important;
    padding: 12px 16px !important;
    font-size: var(--font-body) !important;
    transition: all 0.2s ease !important;
}
.form-input:focus, .form-textarea:focus, input:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(250,122,60,0.1) !important;
    outline: none !important;
}
/* 帖子评论输入框聚焦时保持朴素边框，不做橙色高亮 */
#postDetailCommentInput:focus,
[id^="feedCommentInput_"]:focus {
    border-color: var(--border) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 5. 下拉选择优化 */
.form-select, select {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border) !important;
    background: var(--bg-primary) !important;
    padding: 12px 16px !important;
    font-size: var(--font-body) !important;
    transition: all 0.2s ease !important;
}
.form-select:focus, select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(250,122,60,0.1) !important;
}

/* 6. 标签优化 - 统一圆角和间距 */
.tag, .badge, [class*="tag-"] {
    border-radius: var(--radius-xs) !important;
    padding: 3px 8px !important;
    font-size: var(--font-caption) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* 7. 卡片优化 - 更柔和的鸿蒙风格 */
.card, [class*="card"] {
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
    transition: box-shadow 0.3s ease !important;
}
/* 首页/服务/帖子/置换/商家卡片及其内部子元素不需要阴影（透明子元素阴影叠加会形成伪边框） */
.home-card-section,
.home-card-section [class*="card"],
#homeCardSection_service [class*="card"],
.post-card,
.post-card [class*="card"],
.swap-card,
.swap-card [class*="card"],
.merchant-card,
.merchant-card [class*="card"] {
    box-shadow: none !important;
}

/* 8. 底部导航优化 - 增高 + 安全区 */
.bottom-nav, .tab-bar, [class*="bottom-nav"], [class*="tab-bar"] {
    height: 60px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04) !important;
}
/* 商家页顶部 tab-bar 不是底部导航，排除底部导航样式 */
.merchant-tab-bar {
    height: auto !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: none !important;
    box-shadow: none !important;
}
.bottom-nav .nav-item, .tab-bar .tab-item {
    padding: 6px 0 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.bottom-nav .nav-item.active, .tab-bar .tab-item.active {
    transform: none !important;
}
.bottom-nav .nav-item.active i, .tab-bar .tab-item.active i {
    transform: scale(1.1) !important;
}

/* 9. 页面转场动效（已关闭滑动切换） */
.page {
    /* transition removed to avoid conflict with animation */
}
.page.active {
    animation: none !important;
    opacity: 1 !important;
}
@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 10. 点击反馈 - 通用可点击元素 */
[onclick], .clickable, button, a, .nav-item, .tab-item, .category-item, .list-item {
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}
[onclick]:active, .clickable:active, button:active, a:active, .nav-item:active, .tab-item:active, .category-item:active, .list-item:active {
    transform: scale(0.97) !important;
    opacity: 0.85 !important;
}

/* 11. 列表项优化 - 统一分隔线和内边距 */
.list-item, [class*="list-item"] {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
    transition: background 0.2s ease !important;
}
.list-item:active, [class*="list-item"]:active {
    background: var(--bg-secondary) !important;
}

/* 12. 页面标题优化 */
.page-title, h1, h2, h3 {
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
}

/* 13. 图标统一 - 更柔和的渲染 */
i, .fas, .far, .fab {
    -webkit-font-smoothing: antialiased !important;
}

/* 14. 弹窗优化 - 鸿蒙风格大圆角 */
.modal, .modal-content, [class*="modal"] {
    border-radius: 20px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
}
/* 弹窗内纯文字元素不应有卡片式圆角和阴影（[class*="modal"] 误伤） */
.logout-modal-title, .logout-modal-desc {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 15. 头像优化 - 统一圆角和边框 */
.avatar, [class*="avatar"] {
    border-radius: 50% !important;
    border: 2px solid var(--bg-primary) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* 16. 滚动条优化 - 鸿蒙风格细滚动条 */
::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}
::-webkit-scrollbar-track {
    background: transparent !important;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15) !important;
    border-radius: 2px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25) !important;
}

/* 17. 图片优化 - 统一圆角 */
img {
    border-radius: var(--radius-md) !important;
}

/* 18. 分割线优化 */
hr, .divider, [class*="divider"]:not(.login-divider) {
    border: none !important;
    height: 1px !important;
    background: var(--border-light) !important;
    margin: 16px 0 !important;
}

/* 19. 空状态优化 */
.empty-state {
    padding: 60px 20px !important;
}
.empty-state-icon {
    width: 100px !important;
    height: 100px !important;
    font-size: 40px !important;
    background: var(--bg-secondary) !important;
}

/* 20. 加载动画优化 */
.loading, [class*="loading"] {
    animation: pulse 1.5s ease-in-out infinite !important;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   鸿蒙风格第三阶段升级：图标线性化 + 骨架屏 + 无障碍 + 手势
   ============================================ */

/* 1. 服务卡片图标统一蓝色系 - 与首页分类图标保持一致 */
.service-card-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-md) !important;
    background: #E8F0FE !important;
    color: #3B82F6 !important;
    font-size: 18px !important;
}

/* 2. 我的页面菜单图标优化 - 统一柔和色彩 */
.profile-menu-icon, .menu-icon, [class*="menu-icon"] {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
}

/* 3. 骨架屏样式 - 加载时显示 */
.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-loading 1.5s ease-in-out infinite !important;
    border-radius: var(--radius-sm) !important;
}
.skeleton-text {
    height: 14px !important;
    margin-bottom: 8px !important;
}
.skeleton-title {
    height: 18px !important;
    width: 60% !important;
    margin-bottom: 12px !important;
}
.skeleton-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
}
.skeleton-card {
    height: 120px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 4. 无障碍优化 - 提高对比度 */
/* 确保文字对比度达标 */
.text-primary, [class*="text-primary"] {
    color: #1A1A1A !important;
}
.text-secondary, [class*="text-secondary"] {
    color: #5F6368 !important;
}
.text-tertiary, [class*="text-tertiary"] {
    color: #6B7280 !important;
}

/* 5. 可访问性 - 焦点状态更明显 */
button:focus-visible, a:focus-visible, [onclick]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* 6. 手势交互 - 左滑删除样式 */
.swipe-item {
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.3s ease !important;
}
.swipe-item .swipe-actions {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    display: flex !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
}
.swipe-item.swiped {
    transform: translateX(-80px) !important;
}
.swipe-item.swiped .swipe-actions {
    transform: translateX(0) !important;
}
.swipe-action-btn {
    width: 80px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 14px !important;
    border: none !important;
    cursor: pointer !important;
}
.swipe-action-delete {
    background: #F44336 !important;
}
.swipe-action-more {
    background: #FF9800 !important;
}

/* 7. 下拉刷新样式 */
.pull-refresh {
    position: relative !important;
    overflow: hidden !important;
}
.pull-refresh-indicator {
    position: absolute !important;
    top: -50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
    transition: transform 0.3s ease !important;
}
.pull-refresh.refreshing .pull-refresh-indicator {
    animation: spin 1s linear infinite !important;
}
@keyframes spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

/* 8. 大字体模式支持 - 无障碍 */
@media (min-width: 768px) {
    .large-text-mode {
        --font-h1: 26px !important;
        --font-h2: 22px !important;
        --font-h3: 20px !important;
        --font-body: 18px !important;
        --font-caption: 16px !important;
    }
}

/* 9. 减少动画模式 - 无障碍 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 10. 高对比度模式支持 */
@media (prefers-contrast: high) {
    .card, [class*="card"] {
        border: 2px solid var(--text-primary) !important;
    }
    .btn-primary {
        border: 2px solid var(--text-primary) !important;
    }
}

/* 11. 图标统一优化 - 保持Font Awesome图标正常显示（不修改font-weight） */
.service-card-icon i, .category-icon-wrap i, .menu-icon i {
    /* font-weight保持默认，避免影响Font Awesome solid图标 */
}

/* 12. 触摸目标最小尺寸 - 无障碍（2026-10-13 收敛）
   原 button,a,[onclick] 全量强制 44px，把行内小按钮（如首页"全部>"28px）
   撑高造成标题错位、文字链接行距紊乱 —— 现仅约束块级操作元素 */
button:not(.service-card-all-btn), .nav-item, .tab-item, .category-item, .list-item {
    min-height: 44px !important;
    min-width: 44px !important;
}
/* 文字链接与行内可点击元素：只保留点击反馈，不强制尺寸 */
a, [onclick], .service-card-all-btn {
    min-height: 0 !important;
    min-width: 0 !important;
}

/* 13. 语音反馈优化 - 屏幕阅读器 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 14. 错误状态优化 - 更明显的视觉反馈 */
.input-error, .form-input.error {
    border-color: #F44336 !important;
    background: #FFEFED !important;
}
.input-error:focus, .form-input.error:focus {
    box-shadow: 0 0 0 3px rgba(244,67,54,0.15) !important;
}
.error-text {
    color: #F44336 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 15. 成功状态优化 */
.input-success, .form-input.success {
    border-color: #4CAF50 !important;
}
.success-text {
    color: #4CAF50 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 16. 加载状态优化 - 按钮加载 */
.btn-loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
}
.btn-loading::after {
    content: '' !important;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    top: 50% !important;
    left: 50% !important;
    margin: -10px 0 0 -10px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-top-color: white !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
}

/* 17. 空状态优化 - 更友好的视觉 */
.empty-state-icon {
    background: linear-gradient(135deg, #E8F0FE 0%, #F0F4FF 100%) !important;
}

/* 18. 通知徽章优化 - 更柔和 */
.badge, [class*="badge"] {
    background: var(--primary) !important;
    color: white !important;
    border-radius: var(--radius-sm) !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 19. 分割线优化 - 更柔和 */
.list-item:last-child {
    border-bottom: none !important;
}

/* 20. 图片加载优化 - 懒加载占位 */
img.lazy {
    background: var(--bg-secondary) !important;
    min-height: 100px !important;
}

/* ============================================
   鸿蒙风格第四阶段升级：深色模式 + 性能优化 + JS功能 + 图标线性化
   ============================================ */

/* ========== 1. 性能优化 ========== */

/* 动画性能优化 - 使用GPU加速 */
.page.active,
.btn-primary,
.bottom-nav .nav-item,
.swipe-item,
[onclick] {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 减少重排 - 避免使用影响布局的属性动画 */
@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 骨架屏动画优化 - 使用transform代替background-position */
@keyframes skeleton-loading {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.skeleton {
    position: relative;
    overflow: hidden;
}
.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ========== 2. 深色模式完整适配 ========== */

/* 深色模式CSS变量 */
:root[data-theme="dark"],
html[data-theme="dark"] {
    /* 品牌色 - 深色模式下更柔和 */
    --primary: #FF8A50;
    --primary-light: rgba(255,138,80,0.15);
    --primary-dark: #E07030;
    
    /* 文本色 */
    --text-primary: #F5F5F5;
    --text-secondary: #B0B0B0;
    --text-tertiary: #808080;
    --text-disabled: #505050;
    --text-white: #1A1A1A;
    
    /* 背景色 */
    --bg-primary: #1A1A1A;
    --bg-secondary: #252525;
    --bg-tertiary: #2D2D2D;
    --bg-elevated: #333333;
    
    /* 边框色 */
    --border: #404040;
    --border-light: #333333;
    --border-color: #404040;
    
    /* 阴影 - 深色模式下更柔和 */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow: 0 2px 12px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.45);
    
    /* 分类图标 - 深色模式 */
    --category-bg: rgba(59,130,246,0.2);
    --category-color: #60A5FA;
}

/* 深色模式 - 页面背景 */
html[data-theme="dark"] body {
    background: #121212 !important;
    color: #F5F5F5 !important;
}

html[data-theme="dark"] .page {
    background: #121212 !important;
}

/* 深色模式 - 信息流纯文本帖子彩色背景：改为深色同色系渐变，保证白字可读 */
html[data-theme="dark"] .bg-text-1 { background: linear-gradient(135deg, #3D2428 0%, #2A1C20 100%) !important; }
html[data-theme="dark"] .bg-text-2 { background: linear-gradient(135deg, #1F2D3D 0%, #18222F 100%) !important; }
html[data-theme="dark"] .bg-text-3 { background: linear-gradient(135deg, #1F3324 0%, #18271D 100%) !important; }
html[data-theme="dark"] .bg-text-4 { background: linear-gradient(135deg, #3D2C1F 0%, #2A2018 100%) !important; }
html[data-theme="dark"] .bg-text-5 { background: linear-gradient(135deg, #2D2438 0%, #211C2B 100%) !important; }
html[data-theme="dark"] .bg-text-6 { background: linear-gradient(135deg, #1F3333 0%, #182727 100%) !important; }

/* 深色模式 - 卡片（只作用于卡片容器，不影响子元素） */
html[data-theme="dark"] .card,
html[data-theme="dark"] .home-card-section,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .merchant-card,
html[data-theme="dark"] .merchant-card-enhanced,
html[data-theme="dark"] .announcement-card,
html[data-theme="dark"] .swap-card,
html[data-theme="dark"] .checkin-card,
html[data-theme="dark"] .fav-merchant-card {
    background: #1E1E1E !important;
    border: none !important;
    box-shadow: none !important;
}

/* 深色模式 - 提示框与菜单 */
html[data-theme="dark"] .category-edit-hint,
html[data-theme="dark"] .scope-low-tip,
html[data-theme="dark"] #publishHouseTip,
html[data-theme="dark"] .notif-house-filter,
html[data-theme="dark"] .msg-plus-menu-body {
    background: #2A2A2A !important;
    border-color: #3A3A3A !important;
}
html[data-theme="dark"] .category-edit-hint span,
html[data-theme="dark"] .scope-low-tip {
    color: #FFB74D !important;
}

/* 深色模式 - 输入框 */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #252525 !important;
    border-color: #404040 !important;
    color: #F5F5F5 !important;
}
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: #FF8A50 !important;
    box-shadow: 0 0 0 3px rgba(255,138,80,0.2) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #606060 !important;
}

/* 深色模式 - 分类图标 */
html[data-theme="dark"] .category-icon-wrap,
html[data-theme="dark"] .service-card-icon {
    background: rgba(59,130,246,0.2) !important;
    color: #60A5FA !important;
}

/* 深色模式 - 底部导航 */
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .tab-bar {
    background: rgba(30,30,30,0.95) !important;
    border-top-color: #333333 !important;
}

/* 深色模式 - 列表项 */
html[data-theme="dark"] .list-item,
html[data-theme="dark"] [class*="list-item"] {
    background: #1E1E1E !important;
    border-bottom-color: #333333 !important;
}
html[data-theme="dark"] .list-item:active {
    background: #2A2A2A !important;
}

/* 深色模式 - 弹窗（只作用于弹窗容器） */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-dialog,
html[data-theme="dark"] .modal-panel {
    background: #1E1E1E !important;
    border: none !important;
}

/* 深色模式 - 标签（只作用于标签元素本身） */
html[data-theme="dark"] .tag,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .merchant-card-tag,
html[data-theme="dark"] .promise-tag {
    background: #2D2D2D !important;
    color: #B0B0B0 !important;
    border-color: #404040 !important;
}

/* "服务卡片"是区块标题而非通知徽章，还原为与"合作入驻"一致的普通标题样式 */
.service-card-title-badge,
html[data-theme="dark"] .service-card-title-badge {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 28px !important;
    display: inline-block !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* 深色模式 - 空状态 */
html[data-theme="dark"] .empty-state-icon {
    background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0.1) 100%) !important;
}

/* 深色模式 - 图片 */
html[data-theme="dark"] img {
    opacity: 0.9;
    filter: brightness(0.9);
}

/* 深色模式 - 分割线 */
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider {
    background: #333333 !important;
}

/* 深色模式 - 滚动条 */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2) !important;
}

/* 深色模式 - 搜索框 */
html[data-theme="dark"] .search-input,
html[data-theme="dark"] [class*="search"] input {
    background: #252525 !important;
    color: #F5F5F5 !important;
}

/* 深色模式切换按钮样式 */
.theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
}
.theme-toggle:active {
    transform: scale(0.9);
}

/* ========== 3. 图标完全线性化 ========== */
/* 将Font Awesome solid图标改为regular（仅对支持的图标） */
/* 注意：部分图标没有regular版本，保持solid */

/* 首页分类图标 - 保持solid但统一蓝色系（已完成） */

/* 服务卡片图标 - 保持solid但统一蓝色系（已完成） */

/* 我的页面菜单图标 - 统一柔和色彩 */
html:not([data-theme="dark"]) .profile-menu-icon,
html:not([data-theme="dark"]) .menu-icon {
    background: var(--bg-secondary) !important;
}

/* ========== 4. JS功能样式支持 ========== */

/* 左滑删除 - 实际使用样式 */
.swipe-container {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}
.swipe-content {
    position: relative;
    z-index: 1;
    background: var(--bg-primary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.swipe-actions-container {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    z-index: 0;
}
.swipe-action {
    width: 72px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: white;
    font-size: 12px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.swipe-action:active {
    opacity: 0.8;
}
.swipe-action.delete { background: #F44336; }
.swipe-action.archive { background: #FF9800; }
.swipe-action.more { background: #2196F3; }
.swipe-action i {
    font-size: 18px;
}

/* 下拉刷新 - 实际使用样式 */
.pull-refresh-container {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}
.pull-refresh-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-tertiary);
    font-size: 14px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}
.pull-refresh-container.refreshing .pull-refresh-header {
    transform: translateY(0);
}
.pull-refresh-container.refreshing .pull-refresh-spinner {
    animation: spin 0.8s linear infinite;
}
.pull-refresh-content {
    position: relative;
    z-index: 1;
    background: var(--bg-primary);
    transition: transform 0.3s ease;
    will-change: transform;
}

/* 骨架屏实际使用 - 页面加载状态 */
.page-loading .page-content {
    display: none;
}
.page-loading .page-skeleton {
    display: block;
}
.page-skeleton {
    display: none;
    padding: 16px;
}

/* 深色模式切换过渡 */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ========== 深色模式补充优化 ========== */
/* 设置项 */
html[data-theme="dark"] .settings-item,
html[data-theme="dark"] .settings-group {
    background: #1E1E1E !important;
    border-color: #333333 !important;
}
html[data-theme="dark"] .settings-item:active {
    background: #2A2A2A !important;
}
html[data-theme="dark"] .settings-item-label {
    color: #F5F5F5 !important;
}
html[data-theme="dark"] .settings-item-icon {
    background: #2D2D2D !important;
}

/* 搜索框 */
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] [class*="search"] {
    background: #252525 !important;
    border-color: #404040 !important;
}

/* 首页顶部搜索框：保持彩色头部上的毛玻璃半透明风格，不要深灰实底和边框 */
html[data-theme="dark"] #page-home .header .search-bar {
    background: rgba(255,255,255,0.25) !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html[data-theme="dark"] #page-home .header .search-bar input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html[data-theme="dark"] #page-home .header .search-bar input::placeholder {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* "我的"页设置搜索框：内嵌在容器中，input 本身不要边框和实底 */
html[data-theme="dark"] #profileSettingSearch {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 个人信息头部 */
html[data-theme="dark"] .profile-header,
html[data-theme="dark"] .user-info {
    background: linear-gradient(135deg, #2D2D2D 0%, #1E1E1E 100%) !important;
}

/* 统计数据 */
html[data-theme="dark"] .stat-item,
html[data-theme="dark"] .stats-bar {
    background: #1E1E1E !important;
}
html[data-theme="dark"] .stat-number {
    color: #F5F5F5 !important;
}
html[data-theme="dark"] .stat-label {
    color: #808080 !important;
}

/* 信息流卡片 */
html[data-theme="dark"] .feed-card,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .info-card {
    background: #1E1E1E !important;
    border: 1px solid #333333 !important;
}
html[data-theme="dark"] .feed-title,
html[data-theme="dark"] .post-title {
    color: #F5F5F5 !important;
}
html[data-theme="dark"] .feed-content,
html[data-theme="dark"] .post-content {
    color: #B0B0B0 !important;
}
html[data-theme="dark"] .feed-meta,
html[data-theme="dark"] .post-meta {
    color: #606060 !important;
}

/* 商家卡片 */
html[data-theme="dark"] .merchant-card,
html[data-theme="dark"] .shop-card {
    background: #1E1E1E !important;
    border: 1px solid #333333 !important;
}
html[data-theme="dark"] .merchant-name,
html[data-theme="dark"] .shop-name {
    color: #F5F5F5 !important;
}

/* 分类标签 */
html[data-theme="dark"] .category-tab,
html[data-theme="dark"] .filter-tab {
    background: #252525 !important;
    color: #B0B0B0 !important;
}
html[data-theme="dark"] .category-tab.active,
html[data-theme="dark"] .filter-tab.active {
    background: rgba(255,138,80,0.15) !important;
    color: #FF8A50 !important;
}

/* 按钮 */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline {
    background: #252525 !important;
    border-color: #404040 !important;
    color: #B0B0B0 !important;
}

/* 页面头部 */
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .header-bar {
    background: #1A1A1A !important;
    border-bottom-color: #333333 !important;
}
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .header-title {
    color: #F5F5F5 !important;
}

/* 表单 */
html[data-theme="dark"] .form-group label {
    color: #B0B0B0 !important;
}
html[data-theme="dark"] .form-section-title {
    color: #F5F5F5 !important;
}

/* 空状态 */
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .empty-text {
    color: #606060 !important;
}

/* 弹窗背景遮罩 */
html[data-theme="dark"] .modal-mask,
html[data-theme="dark"] .modal-overlay {
    background: rgba(0,0,0,0.7) !important;
}

/* ============================================================
   业务线标识（2026-10-12 新增）
   三条业务线：政务治理线 / 社区服务线 / 商业运营线
   汇报时用于说明「谁做、谁买单」
   ============================================================ */
.service-line-legend{
    display:flex;align-items:center;flex-wrap:wrap;gap:6px;
    margin:8px 0 4px;padding:9px 12px;
    background:var(--bg-secondary);border-radius:var(--radius);
}
.service-line-legend-title{
    font-size:11px;color:var(--text-tertiary);font-weight:500;margin-right:2px;
}
.service-line-tag{
    display:inline-flex;align-items:center;gap:3px;
    font-size:10px;font-weight:500;line-height:1.6;
    padding:2px 8px;border-radius:var(--radius-full);
    white-space:nowrap;
}
/* 政务治理线：主色橙 */
.sl-gov{background:var(--primary-light);color:var(--primary-dark,var(--primary));}
/* 社区服务线：青色 */
.sl-community{background:var(--accent-teal-light,#E0F7F5);color:var(--accent-teal);}
/* 商业运营线：紫色 */
.sl-commerce{background:var(--accent-purple-light,#F3E8FF);color:#7B4BC4;}
/* 分类标题内嵌标识：去掉左侧内边距，视觉上更轻 */
.service-category-title .service-line-tag{
    margin-left:8px;vertical-align:middle;font-weight:400;
}
/* 暗色主题适配 */
[data-theme="dark"] .sl-community{background:rgba(12,166,120,.18);color:#3DDCA8;}
[data-theme="dark"] .sl-commerce{background:rgba(123,75,196,.2);color:#C4A2F0;}
[data-theme="dark"] .service-line-legend{background:var(--bg-secondary);}

/* ============================================================
   涉农分类：平铺展示（2026-10-12 决策回退）
   ------------------------------------------------------------
   原「乡村服务二级入口」折叠样式已移除。
   依据《智慧社区平台完整技术方案》§25.3「区划模型：城市/农村双树」：
   平台同时覆盖农村与城市，首页分类须与城市分类并列平铺，
   并支持「农村优先」智能排序（农村定位用户优先展示农村向分类）。

   农村向分类共 8 个：种植/养殖/农资/农机/农产品/土地流转/
   乡村政策/招工，均带 .rural-priority 标记（供后台配置排序用）。
   ============================================================ */

/* ============================================================
   UI 严谨性修复（2026-10-13）
   背景：上文"全局升级补丁"的两条 !important 规则误伤行内元素：
   ① 输入框规范化给所有 input[type=text] 强加白底+12px 内边距，
      搜索类输入框变成 47px 白胶囊，白字白底不可见；
   ② 44px 触摸目标把行内小按钮撑高（已在规则12处收敛）。
   本段恢复搜索类输入框由容器自控，并重设计首页头部搜索框。
   ============================================================ */

/* A. 搜索类输入框豁免：透明融入搜索容器（置于文件末尾保证覆盖） */
.search-bar input, .header-search-input, .search-input,
[class*="search-bar"] input, [class*="search-box"] input, [class*="search-input"] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.search-bar input:focus, .header-search-input:focus, .search-input:focus,
[class*="search-bar"] input:focus, [class*="search-box"] input:focus, [class*="search-input"] focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* B. 首页头部搜索框：白底胶囊（支付宝风格），任何背景图上都清晰 */
#page-home .header .search-bar {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 9px 14px;
}
#page-home .header .search-bar i {
    color: var(--text-tertiary);
}
#page-home .header .search-bar input {
    color: var(--text-primary);
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    font-size: var(--font-size-sm);
}
#page-home .header .search-bar input::placeholder {
    color: var(--text-tertiary);
    -webkit-text-fill-color: var(--text-tertiary);
    text-shadow: none;
    opacity: 1;
}