/* ========== 基础变量 - Love陪伴风格 ========== */
        :root {
            --primary: #007AFF;
            --primary-dark: #0066D6;
            --primary-light: rgba(0, 122, 255, 0.09);
            --secondary: #576B95;
            --success: #52C41A;
            --danger: #FF4D4F;
            --warning: #FAAD14;
            --wechat-green: #07C160;
            --wechat-green-dark: #06AD56;
            --wechat-green-soft: #E9F8F0;
            --text: #2D3436;
            --text-light: #636E72;
            --text-muted: #B2BEC3;
            --border: rgba(0, 0, 0, 0.08);
            --bg: #EDEDED;
            --card-bg: rgba(255, 255, 255, 0.95);
            --card-bg-hover: rgba(255, 255, 255, 1);
            --white: #ffffff;
            --radius: 20px;
            --radius-lg: 28px;
            --radius-xl: 36px;
            --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            
            --gradient-primary: linear-gradient(145deg, rgba(104,115,130,.86), rgba(82,92,106,.84));
            --gradient-orange: #007AFF;
        }

        /* ========== 基础重置 ========== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; 
            background: var(--gradient-hero); 
            height: 100%; 
            color: var(--text); 
            line-height: 1.5;
            background-attachment: fixed;
            overflow: hidden;
        }
        
        ::-webkit-scrollbar {
            display: none;
        }
        
        * {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* ========== 主容器 - 响应式 ========== */
        .container { 
            max-width: 420px; 
            margin: 0 auto; 
            height: 100%; 
            background: rgba(255, 255, 255, 0.85); 
            backdrop-filter: blur(20px);
            position: relative; 
            box-shadow: none;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 100px;
            box-sizing: border-box;
        }
        
        @media (min-width: 768px) {
            .container {
                max-width: 720px;
                margin: 20px auto;
                min-height: calc(100vh - 40px);
                border-radius: var(--radius-xl);
                box-shadow: var(--shadow);
                background: rgba(255, 255, 255, 0.9);
            }
        }
        
        @media (min-width: 1024px) {
            .container {
                max-width: 960px;
            }
        }
        
        @media (min-width: 1280px) {
            .container {
                max-width: 1100px;
            }
        }

        /* ========== 顶部导航 ========== */
        .header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 16px 20px; 
            border-bottom: 1px solid var(--border); 
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .header-title { font-size: 17px; font-weight: 600; color: var(--text); }
        .header-btn { font-size: 14px; color: var(--primary); font-weight: 500; cursor: pointer; }
        .header-btn:hover { opacity: 0.8; }
        .icon-back { transition: all 0.2s; }
        .icon-back:hover { transform: translateX(-2px); }
        
        @media (min-width: 768px) {
            .header { padding: 20px 30px; }
            .header-title { font-size: 20px; }
        }

        /* ========== 页面容器 ========== */
        .page { display: none; padding-bottom: 110px; box-sizing: border-box; }
        .page.active { display: block; }
        
        @media (min-width: 768px) {
            .page { padding-bottom: 120px; }
        }

        /* ========== 按钮 ========== */
        .btn { 
            width: 100%; padding: 15px; 
            border: none; border-radius: var(--radius); 
            font-size: 15px; font-weight: 600; 
            cursor: pointer; transition: all 0.2s; 
        }
        .btn-primary { 
            background: var(--gradient-primary); 
            color: white; 
        }
        .btn-primary:hover { transform: translateY(-2px); }
        .btn-secondary { background: rgba(102, 126, 234, 0.08); color: var(--text-light); border: 1px solid rgba(102, 126, 234, 0.15); }
        .btn-secondary:hover { background: rgba(102, 126, 234, 0.12); border-color: rgba(102, 126, 234, 0.25); }
        .btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); border-radius: 8px; padding: 8px 16px; font-weight: 500; transition: all 0.2s; }
        .btn-outline:hover { background: var(--primary-light); transform: translateY(-1px); }
        .btn-outline:active { background: var(--primary-light); transform: translateY(0); }
        .btn-success { background: rgba(82,92,106,.84); color: white; }
        .btn-success:hover { background: rgba(72,82,96,.91); }
        .btn-disabled { background: #d1d5db; color: white; cursor: not-allowed; }
        .btn-danger { background: var(--danger); color: white; }
        .btn-sm { padding: 8px 16px; font-size: 14px; width: auto; }
        
        .switch {
            width: 48px;
            height: 26px;
            background: #e0e0e0;
            border-radius: 13px;
            cursor: pointer;
            position: relative;
            transition: background 0.3s ease;
        }
        .switch.active {
            background: var(--gradient-primary);
        }
        .switch-slider {
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 2px;
            transition: transform 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }
        .switch.active .switch-slider {
            transform: translateX(22px);
        }
        
        @media (min-width: 768px) {
            .btn { padding: 18px; font-size: 17px; }
        }

        /* ========== 概览页面 - Love陪伴风格 ========== */
        .overview-page { padding: 0; }
        
        /* 顶部问候栏 */
        .overview-header {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            background: transparent;
        }
        .greeting-section {
            flex: 1;
        }
        .greeting-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .greeting-subtitle {
            font-size: 14px;
            color: var(--text-muted);
        }
        .header-icons {
            display: flex;
            gap: 16px;
        }
        .header-icon {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.2s;
        }
        .header-icon:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .header-icon.notification {
            position: relative;
        }
        .header-icon.notification::after {
            content: '';
            position: absolute;
            top: 8px;
            right: 8px;
            width: 8px;
            height: 8px;
            background: var(--danger);
            border-radius: 50%;
        }

        /* Hero卡片 - Love陪伴 */
        .love-hero-card {
            margin: 0 20px 24px;
            background: #F5F5F5;
            border-radius: var(--radius-xl);
            padding: 28px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        }
        .love-hero-card::before {
            content: '💫';
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 20px;
            opacity: 0.6;
        }
        .love-hero-card::after {
            content: '💕';
            position: absolute;
            top: 60px;
            right: 100px;
            font-size: 16px;
            opacity: 0.5;
        }
        .love-hero-title {
            font-size: 32px;
            font-weight: 800;
            background: #07C160;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .love-hero-title span {
            font-size: 28px;
        }
        .love-hero-subtitle {
            font-size: 14px;
            color: var(--text-light);
            margin-bottom: 8px;
        }
        .love-hero-desc {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 20px;
        }
        .love-hero-btn {
            background: #07C160;
            color: white;
            border: none;
            padding: 12px 28px;
            border-radius: 25px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(255, 159, 67, 0.3);
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .love-hero-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(255, 159, 67, 0.4);
        }

        .love-hero-robot {
            position: absolute;
            bottom: 3px;
            right: 2px;
            width: 130px;
            height: 130px;
            opacity: 0.9;
            pointer-events: none;
            z-index: 2;
        }

        @media (max-width: 767px) {
            .love-hero-card {
                padding: 20px;
            }
            
            .love-hero-card::before {
                top: 15px;
                right: 20px;
                font-size: 16px;
            }
            
            .love-hero-card::after {
                top: 45px;
                right: 60px;
                font-size: 12px;
            }
            
            .love-hero-title {
                font-size: 24px;
            }
            
            .love-hero-title span {
                font-size: 20px;
            }
            
            .love-hero-subtitle {
                font-size: 13px;
            }
            
            .love-hero-desc {
                font-size: 12px;
                margin-bottom: 16px;
            }
            
            .love-hero-btn {
                padding: 10px 20px;
                font-size: 14px;
            }
            
            .love-hero-robot {
                width: 130px;
                height: 120px;
                bottom: 8px;
                right: 8px;
            }
        }
        
        .love-hero-robot img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 我的陪伴 - 列表样式 */
        .my-companion-section {
            padding: 0 20px;
            margin-bottom: 20px;
        }
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .section-title::before {
            content: '💕';
            font-size: 14px;
        }
        .companion-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .companion-item {
            background: white;
            border-radius: var(--radius);
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: all 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.6);
        }
        .companion-item:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }
        .companion-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
        }
        .companion-icon.chat {
            background: linear-gradient(135deg, #81D4FA 0%, #4FC3F7 100%);
        }
        .companion-icon.role {
            background: linear-gradient(135deg, #FFCDD2 0%, #EF9A9A 100%);
        }
        .companion-icon.create {
            background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%);
        }
        .companion-icon.invite {
            background: linear-gradient(135deg, #B3E5FC 0%, #81D4FA 100%);
        }
        .companion-info {
            flex: 1;
            min-width: 0;
        }
        .companion-name {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 4px;
        }
        .companion-desc {
            font-size: 13px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .companion-badge {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            background: rgba(7, 193, 96, 0.1);
            color: var(--primary);
            margin-right: 8px;
        }
        .companion-badge.orange {
            background: rgba(255, 159, 67, 0.1);
            color: var(--secondary);
        }
        .companion-arrow {
            font-size: 18px;
            color: var(--text-muted);
            flex-shrink: 0;
        }

        /* Love会员卡片 */
        .love-vip-card {
            margin: 0 20px 24px;
            background: linear-gradient(135deg, #FFF5F7 0%, #FFFBF0 100%);
            border-radius: var(--radius-xl);
            padding: 24px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
        }
        .love-vip-card::before {
            content: '';
            position: absolute;
            right: -20px;
            top: -20px;
            width: 160px;
            height: 160px;
            background: radial-gradient(circle, rgba(7,193,96,0.07) 0%, transparent 70%);
            border-radius: 50%;
        }
        .love-vip-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
        }
        .vip-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }
        .vip-icon {
            font-size: 18px;
            line-height: 1;
        }
        .vip-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
            line-height: 1;
        }
        .vip-info {
            display: flex;
            justify-content: space-around;
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }
        .vip-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .vip-item-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--text);
        }
        .vip-item-label {
            font-size: 12px;
            color: var(--text-muted);
        }
        .vip-divider {
            width: 1px;
            height: 40px;
            background: rgba(0,0,0,0.06);
        }
        .vip-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        
        .vip-desc {
            font-size: 13px;
            color: var(--text-muted);
        }
        
        .vip-btn-row {
            display: flex;
            justify-content: flex-end;
            position: relative;
            z-index: 1;
        }
        .vip-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .vip-btn:hover {
            opacity: 0.9;
        }

        @media (max-width: 767px) {
            .love-vip-card {
                padding: 20px;
            }
            
            .vip-icon {
                font-size: 20px;
            }
            
            .vip-title {
                font-size: 18px;
            }
            
            .vip-info {
                gap: 16px;
            }
            
            .vip-item-value {
                font-size: 14px;
            }
            
            .vip-btn {
                padding: 8px 20px;
                font-size: 12px;
            }
            
            .vip-card-decoration {
                font-size: 60px;
                bottom: -20px;
                right: -20px;
            }
        }

        /* ========== 角色列表 ========== */
        .role-list-page {
            min-height: 100%;
            padding: 0 20px 110px;
            background: #F7F8FA;
        }
        .role-list-page > .header {
            margin: 0 -20px;
            padding: 16px 20px;
            border-bottom-color: #ECEEF2;
            background: rgba(255, 255, 255, 0.96);
        }
        .role-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .role-list-header h2 { font-size: 18px; font-weight: 600; }
        .role-list-header .btn { width: auto; padding: 10px 20px; }
        .wechat-connection-card {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 16px 0 2px;
            padding: 13px 14px;
            background: #fff;
            border: 1px solid #ECEEF2;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.035);
        }
        .wechat-connection-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: var(--wechat-green-dark);
            background: var(--wechat-green-soft);
        }
        .wechat-connection-card.bound .wechat-connection-icon {
            color: var(--wechat-green-dark);
            background: var(--wechat-green-soft);
        }
        .wechat-connection-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .wechat-connection-info { min-width: 0; flex: 1; }
        .wechat-connection-title {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 14px;
            font-weight: 700;
            color: #30343A;
        }
        .wechat-connection-card.bound .wechat-connection-title::after {
            content: '';
            width: 7px;
            height: 7px;
            flex-shrink: 0;
            border-radius: 50%;
            background: var(--wechat-green);
            box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.12);
        }
        .wechat-connection-desc { margin-top: 2px; font-size: 12px; color: #9297A0; }
        .wechat-connection-btn {
            flex-shrink: 0;
            min-height: 34px;
            padding: 7px 12px;
            border: 0;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 600;
            color: #fff;
            background: var(--wechat-green);
            cursor: pointer;
            box-shadow: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        .wechat-connection-btn svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .wechat-connection-card.bound .wechat-connection-btn {
            min-height: 32px;
            padding: 6px 11px;
            color: #555C66;
            background: #FFFFFF;
            border: 1px solid #CCD1D8;
            border-radius: 9px;
            box-shadow: 0 1px 2px rgba(31, 35, 41, 0.06), inset 0 0 0 0.5px rgba(255, 255, 255, 0.8);
        }
        .wechat-connection-btn:disabled { opacity: 0.55; cursor: not-allowed; }
        .disconnect-warning {
            padding: 14px;
            border-radius: 12px;
            color: #7C541E;
            background: #FFF7E9;
            font-size: 13px;
            line-height: 1.7;
        }
        
        @media (min-width: 768px) {
            .role-list-page { padding: 0 30px 120px; }
            .role-list-page > .header { margin: 0 -30px; padding: 20px 30px; }
            .role-list-header h2 { font-size: 24px; }
        }
        
        .role-item { 
            background: #fff; 
            border-radius: 16px; 
            padding: 16px; 
            margin-bottom: 12px; 
            border: 1px solid #ECEEF2; 
            display: flex;
            align-items: flex-start;
            gap: 14px;
            box-shadow: 0 3px 12px rgba(31, 35, 41, 0.045);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .role-item .role-avatar {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            overflow: hidden;
            flex-shrink: 0;
            background: rgba(255, 255, 255, 0.72);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
        }
        .role-item .role-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .role-item .role-avatar.no-avatar {
            background: #F2F3F5;
        }
        .role-item .role-avatar-placeholder {
            font-size: 21px;
            color: #8F949C;
            font-weight: 700;
        }
        .role-item .role-info {
            flex: 1;
            min-width: 0;
        }
        .role-item .role-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 1px 0 6px; }
        .role-item .role-name { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 700; color: #1F2329; text-overflow: ellipsis; white-space: nowrap; }
        .role-item .role-desc { display: -webkit-box; min-height: 39px; overflow: hidden; font-size: 13px; color: #7A8089; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
        .role-item .role-status { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; line-height: 1; }
        .role-item .role-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
        .role-item .role-status.active { color: #20A66A; }
        .role-item .role-status.inactive { color: #9AA0A9; }
        .role-item .role-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
        .role-item .role-btn {
            min-width: 84px;
            min-height: 36px;
            padding: 7px 14px;
            border-radius: 9px;
            font-size: 12px;
            font-weight: 600;
            border: 1px solid transparent;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
        }
        .role-item .role-btn svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .role-item .role-btn .role-chat-icon { width:18px; height:18px; }
        .role-chat-icon .chat-icon-back { fill:#E0EFE5; stroke:#7EAA8B; stroke-width:1.3; }
        .role-chat-icon .chat-icon-front { fill:#239B68; stroke:#238759; stroke-width:1.3; }
        .role-chat-icon .chat-icon-dots { stroke:#FFFFFF; stroke-width:2; }
        .role-item .role-actions { flex-wrap:wrap; }
        .role-item .role-btn:active { transform: scale(0.975); }
        .role-item .role-setting-btn {
            color: #4F5660;
            background: #FAFBFC;
            border-color: #CDD2D9;
            box-shadow: 0 1px 2px rgba(31, 35, 41, 0.045);
        }
        .role-item .role-toggle-btn.is-activate {
            color: #16884B;
            background: #E8F6EE;
            border-color: #C6E8D4;
            box-shadow: none;
        }
        .role-item .role-toggle-btn.is-deactivate {
            color: #555C66;
            background: #FAFBFC;
            border-color: #CDD2D9;
            box-shadow: 0 1px 2px rgba(31, 35, 41, 0.045);
        }
        @media (hover: hover) {
            .role-item .role-setting-btn:hover { color: #343940; background: #F3F5F7; border-color: #BFC5CD; }
            .role-item .role-toggle-btn.is-activate:hover { color:#126F3E; background:#DCF1E5; border-color:#B8DDC7; box-shadow:none; }
            .role-item .role-toggle-btn.is-deactivate:hover { color: #343940; background: #F3F5F7; border-color: #BFC5CD; }
            .wechat-connection-card.bound .wechat-connection-btn:hover { background: #F6F7F9; border-color: #BFC5CD; }
            .wechat-connection-card:not(.bound) .wechat-connection-btn:hover { background: var(--wechat-green-dark); }
        }

        @media (max-width: 390px) {
            .role-item { gap: 12px; padding: 14px; }
            .role-item .role-avatar { width: 56px; height: 56px; }
            .role-item .role-actions { gap: 8px; }
            .role-item .role-btn { min-width: 82px; padding-right: 12px; padding-left: 12px; }
        }
        
        @media (min-width: 768px) {
            .role-item { padding: 20px; align-items: flex-start; }
            .role-item .role-info { flex: 1; }
            .role-item .role-desc { max-width: 400px; }
        }

        /* ========== 弹窗 ========== */
        .modal-overlay { 
            position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
            background: rgba(0,0,0,0.4); 
            backdrop-filter: blur(8px);
            z-index: 1000; 
            display: none; 
            align-items: center; justify-content: center; 
            padding: 20px;
        }
        .modal-overlay.show { display: flex; }
        .modal { 
            background: rgba(255, 255, 255, 0.95); 
            backdrop-filter: blur(20px);
            border-radius: var(--radius-xl); 
            width: 100%; 
            max-width: 360px;
            max-height: 85vh;
            overflow: hidden; 
            animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
            position: relative; 
            box-shadow: var(--shadow-hover);
            border: 1px solid rgba(255, 255, 255, 0.5);
            display: flex;
            flex-direction: column;
        }
        @keyframes modalIn { from { transform: scale(0.92) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
        .modal-header { padding: 20px 20px; text-align: center; border-bottom: 1px solid var(--border); background: rgba(102, 126, 234, 0.03); flex-shrink: 0; }
        .modal-header h3 { font-size: 17px; font-weight: 700; color: var(--text); }
        .modal-header p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
        .modal-body { padding: 20px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
        .modal-close { position: absolute; right: 16px; top: 16px; font-size: 20px; color: #bbb; cursor: pointer; z-index: 10; }
        .modal-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 12px; flex-shrink: 0; }
        .modal-footer .btn { width: auto; flex: 1; }
        
        .faq-item {
            padding: 16px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        .faq-item:last-child {
            border-bottom: none;
        }
        .faq-question {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 8px;
        }
        .faq-answer {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.6;
        }

        .checkbox-group {
            margin-top: 16px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .checkbox-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-muted);
            user-select: none;
            gap: 4px;
        }
        .checkbox-label input[type="checkbox"] {
            display: none;
        }
        .checkbox-custom {
            width: 16px;
            height: 16px;
            border: 1.5px solid #ccc;
            border-radius: 4px;
            margin-right: 6px;
            position: relative;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        .checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
            background: var(--gradient-primary);
            border-color: transparent;
        }
        .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 6px;
            height: 9px;
            margin-left: -3px;
            margin-top: -6px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        .terms-link {
            font-size: 13px;
            color: #333;
            font-weight: normal;
            text-decoration: none;
            cursor: pointer;
        }
        .terms-link:hover {
            text-decoration: underline;
        }
        .forgot-password-link {
            font-size: 13px;
            color: var(--primary);
            text-decoration: none;
        }
        .forgot-password-link:hover {
            text-decoration: underline;
        }
        
        @media (min-width: 768px) {
            .modal { max-width: 420px; max-height: 80vh; }
            .modal-header { padding: 24px; }
            .modal-header h3 { font-size: 18px; }
            .modal-body { padding: 24px; }
        }

        /* ========== 连接完成弹窗样式 ========== */
        .modal-celebrate { text-align: center; }
        .celebrate-body { padding: 0 20px 28px; display: flex; flex-direction: column; align-items: center; }
        #halo-canvas { width: 220px; height: 150px; }
        .celebrate-title { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 8px; }
        .celebrate-sub { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

        /* ========== 激活成功弹窗样式 ========== */
        .modal-success { text-align: center; }
        .success-body { padding: 8px 20px 28px; display: flex; flex-direction: column; align-items: center; }
        .success-checkmark { width: 48px; height: 48px; margin-bottom: 12px; }
        .success-checkmark svg { width: 100%; height: 100%; }
        .checkmark-circle { stroke: #52C41A; stroke-width: 3; stroke-dasharray: 166; stroke-dashoffset: 166; stroke-linecap: round; }
        .checkmark-check { stroke: #52C41A; stroke-width: 3; stroke-dasharray: 48; stroke-dashoffset: 48; stroke-linecap: round; stroke-linejoin: round; }
        .success-checkmark.animate .checkmark-circle { animation: strokeCircle 0.6s cubic-bezier(0.65,0,0.45,1) forwards; }
        .success-checkmark.animate .checkmark-check { animation: strokeCheck 0.3s cubic-bezier(0.65,0,0.45,1) 0.4s forwards; }
        @keyframes strokeCircle { to { stroke-dashoffset: 0; } }
        @keyframes strokeCheck { to { stroke-dashoffset: 0; } }
        .success-title { font-size: 20px; font-weight: 700; color: var(--text); }
        .success-desc { font-size: 13px; color: var(--text-light); margin-top: 10px; line-height: 1.6; }

        .payment-option {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 12px;
            border: 2px solid var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg);
        }
        .payment-option.active {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        @media (min-width: 768px) {
            #halo-canvas { width: 260px; height: 180px; }
            .celebrate-title { font-size: 18px; }
            .success-checkmark { width: 56px; height: 56px; }
            .success-title { font-size: 22px; }
            .success-desc { font-size: 14px; }
            .chat-history-modal { max-width: 500px; max-height: 80vh; }
        }

        /* ========== 提示框 ========== */
        #message-alert { 
            position: fixed; 
            bottom: 80px; 
            left: 50%; 
            transform: translateX(-50%) translateY(120%); 
            z-index: 9999; 
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 24px;
            border-radius: 12px;
            font-size: 14px;
            color: #fff;
            background: rgba(0, 0, 0, 0.85);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
            opacity: 0;
            pointer-events: none;
            max-width: 85%;
            text-align: center;
        }
        #message-alert.show { 
            transform: translateX(-50%) translateY(0); 
            opacity: 1;
            pointer-events: auto;
        }
        .alert-close { 
            margin-left: 12px; 
            cursor: pointer; 
            font-size: 18px; 
            line-height: 1; 
            opacity: 0.7;
        }

        /* ========== 二维码 ========== */
        .qr-container { text-align: center; padding: 20px; }
        .qr-container canvas, .qr-container img { max-width: 240px; width: 240px; height: 240px; border-radius: 8px; margin: 0 auto; display: block; }
        .qr-container p { margin-top: 16px; color: var(--text-light); font-size: 16px; }

        /* ========== 个人中心页面样式 ========== */
       
        .profile-card { 
            background: rgba(255,255,255,0.95); 
            border-radius: 24px; 
            padding: 24px; 
            margin-bottom: 16px; 
            display: flex; 
            align-items: center; 
            gap: 16px; 
            box-shadow: 0 2px 12px rgba(0,0,0,0.03);
        }
        .profile-avatar { 
            width: 72px; height: 72px; 
            border-radius: 50%; 
            overflow: hidden;
            position: relative;
            border: 2px solid rgba(0, 0, 0, 0.08);
        }
        .profile-avatar img {
            width: 100%; height: 100%;
            object-fit: cover;
        }
        .profile-badge {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 18px; height: 18px;
            background: var(--primary);
            border-radius: 50%;
            border: 3px solid white;
        }
        .profile-info { flex: 1; }
        .profile-name { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
        .profile-id { font-size: 13px; color: var(--text-muted); }
        
        .vip-card {
            background: #ffffff;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 16px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid rgba(233, 233, 233, 0.81);
            box-shadow: 0 2px 12px rgba(0,0,0,0.03);
        }
        .vip-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
        .vip-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
        .vip-icon { width: 20px; height: 20px; fill: #555; }
        .vip-title { font-size: 16px; font-weight: 600; color: #333; }
        .vip-info {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px 0;
            border-top: 1px solid rgba(233, 233, 233, 0.81);
            border-bottom: 1px solid rgba(233, 233, 233, 0.81);
        }
        .vip-info-item { text-align: center; flex: 1; }
        .vip-info-value { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 2px; }
        .vip-info-label { font-size: 12px; color: var(--text-muted); }
        .vip-info-divider { width: 1px; height: 30px; background: rgba(233, 233, 233, 0.81); }
        .vip-footer { display: flex; justify-content: space-between; align-items: center; }
        .vip-desc { font-size: 12px; color: var(--text-muted); }
        .vip-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 8px 24px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .vip-btn:hover { background: var(--primary-dark); }
        .settings-list {
            background: rgba(255,255,255,0.95); 
            border-radius: 24px; 
            overflow: hidden; 
            box-shadow: 0 2px 12px rgba(0,0,0,0.03);
            margin-bottom: 16px;
        }
        .settings-item { 
            padding: 16px 20px; 
            display: flex; align-items: center; 
            gap: 14px; 
            cursor: pointer; 
            transition: all 0.2s; 
            border-bottom: 1px solid rgba(0,0,0,0.05); 
        }
        .settings-item:last-child { border-bottom: none; }
        .settings-item:active { background: rgba(0,0,0,0.02); }
        .settings-icon-wrapper {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            color: #3a3a3c;
            background: rgba(118, 118, 128, 0.09);
        }
        .settings-icon-wrapper svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .settings-label { font-size: 16px; font-weight: 500; flex: 1; color: var(--text); }
        .settings-arrow { 
            width: 14px; height: 14px; 
            fill: var(--text-muted); 
        }
        .settings-badge {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
            background: rgba(7, 193, 96, 0.1);
            color: var(--primary);
            font-weight: 500;
        }
        .logout-btn {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            background: rgba(0,0,0,0.04);
            color: var(--text-light);
            transition: all 0.2s;
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .logout-btn:hover { background: rgba(0,0,0,0.08); color: var(--primary); }
        .logout-btn svg { width: 16px; height: 16px; fill: currentColor; }
        .header-right { display: flex; gap: 20px; }
        .header-icon { 
            width: 24px; height: 24px; 
            fill: var(--text-light); 
            cursor: pointer; 
            transition: all 0.2s; 
        }
        .header-icon:hover { fill: var(--primary); }

        .suggest-modal { max-width: 360px; }
        .suggest-textarea {
            width: 100%;
            height: 120px;
            padding: 12px;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 16px;
            font-size: 14px;
            resize: none;
            background: rgba(255,255,255,0.95);
            color: var(--text);
        }
        .suggest-textarea:focus {
            outline: none;
            border-color: var(--primary);
        }
        .suggest-submit-btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            background: var(--primary);
            color: white;
            margin-top: 16px;
            transition: all 0.2s;
        }
        .suggest-submit-btn:hover { background: var(--primary-dark); }

        /* ========== 个人中心弹窗 - 简约系统风格 ========== */
        .profile-modal-overlay {
            padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
            background: rgba(0, 0, 0, 0.34);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .profile-modal {
            max-width: 380px;
            border-radius: 22px;
            background: rgba(248, 248, 250, 0.96);
            border: 0.5px solid rgba(255, 255, 255, 0.75);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
        }
        .profile-modal .modal-header {
            padding: 22px 52px 17px;
            background: transparent;
            border-bottom: 0.5px solid rgba(60, 60, 67, 0.12);
        }
        .profile-modal .modal-header h3 { font-size: 19px; color: #1d1d1f; letter-spacing: -0.2px; }
        .profile-modal .modal-header p { margin-top: 5px; color: #8e8e93; }
        .profile-modal .modal-close {
            top: 14px; right: 14px; width: 36px; height: 36px;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 22px; line-height: 1; color: #6e6e73;
            background: rgba(118, 118, 128, 0.12);
        }
        .profile-modal .modal-close:active { background: rgba(118, 118, 128, 0.22); }
        .profile-modal .modal-body { padding: 20px 22px 22px; }
        .service-card {
            padding: 14px; border-radius: 18px;
            background: #fff;
            border: 0.5px solid rgba(60, 60, 67, 0.12);
        }
        .service-card img {
            display: block; width: min(100%, 260px); height: auto;
            margin: 0 auto; border-radius: 12px;
        }
        .service-tip { margin-top: 13px; font-size: 13px; color: #6e6e73; }
        .about-mark {
            width: 64px; height: 64px; margin: 2px auto 14px; border-radius: 17px;
            display: flex; align-items: center; justify-content: center;
            font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -1px;
            background: linear-gradient(145deg, #3a3a3c, #111);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
        }
        .about-name { font-size: 18px; font-weight: 650; color: #1d1d1f; }
        .about-version { margin-top: 4px; font-size: 12px; color: #8e8e93; }
        .about-desc { margin-top: 16px; font-size: 14px; line-height: 1.75; color: #6e6e73; }
        .about-copyright { margin-top: 18px; padding-top: 16px; border-top: 0.5px solid rgba(60,60,67,.12); font-size: 12px; color: #8e8e93; }
        .profile-modal .suggest-textarea {
            border-color: rgba(60, 60, 67, 0.15);
            border-radius: 14px;
            background: #fff;
        }
        .profile-modal .suggest-textarea:focus { border-color: #007aff; box-shadow: 0 0 0 3px rgba(0,122,255,.1); }
        #suggest-modal .suggest-submit-btn {
            border-radius: 14px;
            background: #007AFF !important;
            background-image: none !important;
            color: #fff !important;
            box-shadow: 0 6px 16px rgba(0, 122, 255, 0.16);
            -webkit-appearance: none;
            appearance: none;
        }
        #suggest-modal .suggest-submit-btn:hover { background: #0066D6 !important; }
        #suggest-modal .suggest-submit-btn:active {
            background: #0066D6 !important;
            transform: scale(0.985);
            box-shadow: 0 3px 8px rgba(0, 122, 255, 0.13);
        }
        .profile-card-edit { flex: 0 0 auto; padding: 7px 2px 7px 10px; border: 0; background: transparent; color: #576B95; font-size: 13px; font-weight: 500; }
        .profile-card-edit::after { content: '›'; margin-left: 4px; color: #B2B2B2; font-size: 20px; line-height: 12px; vertical-align: -2px; }
        .agent-profile-entry { width: 100%; margin: 0 0 14px; padding: 15px 17px; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; background: #FFF; color: #262626; text-align: left; align-items: center; justify-content: space-between; box-shadow: none; }
        .agent-profile-entry span { display: flex; flex-direction: column; gap: 3px; }
        .agent-profile-entry b { color: #007AFF; font-size: 15px; }
        .agent-profile-entry small { color: #999; font-size: 11px; font-weight: 400; }
        #profile-edit-modal .profile-modal { overflow: hidden; border-radius: 20px; background: #F7F7F7; }
        #profile-edit-modal .modal-header { padding-bottom: 14px; background: #fff; border-bottom: 0; }
        .profile-edit-body { padding-top: 22px !important; text-align: center; }
        .profile-edit-avatar { width: 92px; height: 92px; margin: 0 auto; position: relative; display: block; border: 3px solid #fff; border-radius: 50%; background: #e9e9eb; cursor: pointer; box-shadow: 0 5px 18px rgba(0,0,0,.12); }
        .profile-edit-avatar img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
        .profile-edit-avatar .profile-avatar-placeholder { border: 0; background-size: 36px 36px; }
        .profile-edit-avatar span { position: absolute; right: -2px; bottom: 1px; width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #007AFF; font-size: 20px; font-weight: 400; line-height: 1; }
        .profile-edit-avatar-tip { margin: 9px 0 22px; color: #8e8e93; font-size: 12px; }
        .profile-edit-field { height: 50px; padding: 0 14px; display: flex; align-items: center; gap: 14px; border-radius: 13px; background: #fff; text-align: left; }
        .profile-edit-field > span { flex: 0 0 auto; color: #333; font-size: 15px; }
        .profile-edit-input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; background: transparent; color: #1d1d1f; font-size: 16px; text-align: right; outline: none; }
        .profile-edit-input:focus { border-color: #007AFF; box-shadow: 0 0 0 3px rgba(0,122,255,.09); }
        .profile-edit-tip { margin-top: 9px; color: #9a9a9a; font-size: 11px; text-align: left; }
        .profile-edit-submit { width: 100%; height: 46px; margin-top: 18px; border: 0; border-radius: 13px; background: #007AFF; color: #fff; font-size: 16px; font-weight: 600; }
        .profile-edit-submit:disabled { opacity: .55; }

        @media (max-width: 360px) {
            .profile-modal-overlay { padding-left: 14px; padding-right: 14px; }
            .profile-modal .modal-body { padding-left: 18px; padding-right: 18px; }
            .service-card img { width: min(100%, 230px); }
        }

        /* ========== 底部导航 - Love陪伴风格 ========== */
        .bottom-nav { 
            position: fixed; bottom: 0; left: 0; right: 0; 
            background: rgba(255, 255, 255, 0.95); 
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            display: flex; justify-content: space-around; 
            align-items: center;
            padding: 8px 0 16px; 
            z-index: 100; 
            box-shadow: none;
        }
        .nav-item { 
            text-align: center; 
            cursor: pointer; 
            flex: 1; 
            padding: 6px 0; 
            transition: all 0.2s;
        }
        .nav-item:hover {
            transform: translateY(-2px);
        }
        .nav-item .icon { 
            font-size: 24px; 
            margin-bottom: 4px; 
            transition: all 0.2s;
            display: block;
        }
        .nav-item svg.icon { 
            width: 24px; 
            height: 24px; 
            margin: 0 auto 4px; 
            transition: all 0.2s;
            display: block;
            object-fit: contain;
            fill: none;
            stroke: var(--text-muted);
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .nav-item.active svg.icon { 
            stroke: var(--primary);
            transform: scale(1.1);
        }
        .nav-item .label { 
            font-size: 11px; 
            color: var(--text-muted); 
            transition: all 0.2s;
            font-weight: 500;
        }
        .nav-item.active .icon { 
            color: var(--primary); 
            transform: scale(1.1);
        }
        .nav-item.active .label { 
            color: var(--primary); 
            font-weight: 600; 
        }
        
        @media (min-width: 768px) {
            .bottom-nav { 
                max-width: 720px; 
                left: 50%; 
                transform: translateX(-50%); 
                border-radius: var(--radius-xl) var(--radius-xl) 0 0; 
                box-shadow: none;
                padding: 10px 0 20px;
            }
            .nav-item .icon { font-size: 28px; }
            .nav-item .label { font-size: 12px; }
        }
        
        @media (min-width: 1024px) {
            .bottom-nav { max-width: 960px; }
        }

        /* 微信式主应用导航与活动页 */
        .bottom-nav { height: calc(58px + env(safe-area-inset-bottom)); padding: 5px 0 env(safe-area-inset-bottom); border-top: 1px solid rgba(0,0,0,.12); background: rgba(247,247,247,.96); box-shadow: none; }
        .nav-item { min-width: 0; padding: 3px 0 2px; }
        .nav-item:hover { transform: none; }
        .nav-item svg.icon { width: 25px; height: 25px; margin-bottom: 1px; stroke: #575757; stroke-width: 1.75; }
        .nav-item.active svg.icon { stroke: #07C160; transform: none; }
        .nav-item .label { color: #777; font-size: 10px; font-weight: 400; }
        .nav-item.active .label { color: #07C160; font-weight: 500; }
        .page.activity-page { min-height: 100%; padding: 0 0 92px; background: #ededed; }
        .activity-page > .header { background: rgba(247,247,247,.96); border-color: rgba(0,0,0,.08); }
        .activity-content { width: min(100%,680px); margin: 0 auto; padding: 14px 12px 28px; }
        .activity-banner { position: relative; min-height: 152px; padding: 25px 24px; overflow: hidden; border:1px solid #e1e6ed; border-radius: 12px; color: #191919; background: #f8f9fb; }
        .activity-banner::after { content:''; position:absolute; width:170px; height:170px; right:-52px; top:-46px; border:34px solid rgba(0,122,255,.055); border-radius:50%; }
        .activity-banner h2 { position:relative; z-index:1; margin:0 0 8px; font-size:24px; font-weight:650; letter-spacing:-.5px; }
        .activity-banner p { position:relative; z-index:1; width:72%; margin:0; color:#777; font-size:13px; line-height:1.65; }
        .activity-group-title { margin:22px 4px 8px; color:#888; font-size:13px; font-weight:400; }
        .activity-list { overflow:hidden; border-radius:10px; background:#fff; }
        .activity-row { position:relative; min-height:76px; padding:12px 14px; display:flex; align-items:center; gap:13px; color:#191919; text-decoration:none; }
        .activity-row::after { content:''; position:absolute; right:0; bottom:0; left:66px; height:1px; background:#e5e5e5; transform:scaleY(.5); }
        .activity-row:last-child::after { display:none; }.activity-row:active { background:#ececec; }
        .activity-row-icon { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:9px; color:#555; background:#f0f0f0; }
        .activity-row-icon.orange,.activity-row-icon.blue { color:#555; background:#f0f0f0; }
        .activity-row-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
        .activity-row-copy { min-width:0; flex:1; }.activity-row-copy b { display:block; margin-bottom:4px; font-size:16px; font-weight:500; }.activity-row-copy span { display:block; overflow:hidden; color:#999; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
        .activity-row-reward { flex:0 0 auto; color:#e58a24; font-size:12px; }.activity-row-arrow { margin-left:2px; color:#b2b2b2; font-size:22px; font-weight:300; }
        @media (min-width:768px) { .bottom-nav { max-width:720px; height:64px; padding:6px 0; border-radius:0; }.nav-item .label { font-size:11px; }.activity-content { padding-top:24px; }.activity-banner { min-height:174px; padding:32px; }.activity-banner h2 { font-size:29px; } }

        /* 角色页：中性灰白 + 单一陪伴绿。 */
        .role-list-page { background:#ededed; }
        .role-list-page > .header { border-color:#e5e5e5; }
        #role-list-container { max-width:680px; margin-right:auto; margin-left:auto; }
        .role-item { border-color:#e5e5e5; border-radius:11px; box-shadow:none; }
        .role-item .role-avatar { border-radius:12px; }
        .role-item .role-avatar.no-avatar { color:#666; background:#f0f0f0; }
        .role-item .role-avatar-placeholder { color:inherit; }
        .role-item .role-toggle-btn.is-activate { color:#16884b; background:#e8f6ee; border-color:#c6e8d4; box-shadow:none; }
        @media (hover:hover) { .role-item .role-toggle-btn.is-activate:hover { color:#126f3e; background:#dcf1e5; border-color:#b8ddc7; box-shadow:none; } }

        /* 我的：不使用整片绿色，功能图标采用克制的多色小方块。 */
        .page.profile-page { padding:0 0 92px; background:#ededed; }
        .profile-page > .header { background:rgba(247,247,247,.96); border-color:rgba(0,0,0,.08); }
        .profile-page-content { width:min(100%,680px); margin:0 auto; padding:14px 12px 28px; }
        .profile-page .profile-card,.profile-page .vip-card,.profile-page .settings-list { border:0; border-radius:11px; background:#fff; box-shadow:none; backdrop-filter:none; }
        .profile-page .profile-card { margin-bottom:12px; padding:19px 16px; }
        #profile-avatar-placeholder::after { background:#007AFF; }
        .profile-page .vip-card { margin-bottom:12px; padding:18px 16px; border:1px solid #e5e5e5; }
        .profile-page .vip-icon { fill:#555; }.profile-page .vip-title { color:#333; }
        .profile-page .vip-btn { border-radius:7px; color:#007AFF; background:#EEF5FF; }.profile-page .vip-btn:hover { background:#E3EFFF; }
        .profile-page .settings-list { margin-bottom:12px; }
        .profile-page .settings-item { min-height:58px; padding:10px 16px; gap:13px; border-color:#ededed; }
        .profile-page .agent-settings-item { width:100%; border-width:0 0 1px; border-style:solid; border-color:#ededed; color:inherit; background:#fff; font-family:inherit; text-align:left; }
        .profile-page .settings-icon-wrapper { width:34px; height:34px; border-radius:9px; }
        .profile-page .settings-item .settings-icon-wrapper { color:#555; background:#f0f0f0; }
        .profile-page .settings-badge { color:#007AFF; background:#EEF5FF; }
        .profile-page .logout-btn { border-radius:10px; color:#d84b4b; background:#fff; box-shadow:none; }
        @media (min-width:768px) { .page.profile-page { padding-right:30px; padding-left:30px; }.profile-page-content { padding-top:24px; } }

        /* ========== 聊天记录 ========== */
        .chat-history-modal { max-width: 360px; max-height: 85vh; display: flex; flex-direction: column; }
        .chat-history-list { flex: 1; overflow-y: auto; padding: 10px 0; }
        .chat-history-item { margin-bottom: 16px; }
        .chat-history-item .msg-time { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
        .chat-history-item .msg-content { 
            padding: 12px 16px; 
            border-radius: var(--radius); 
            font-size: 14px; line-height: 1.6; 
            word-break: break-word; 
            display: inline-block;
            max-width: 85%;
        }
        .chat-history-item.user { text-align: right; }
        .chat-history-item.user .msg-content { background: var(--gradient-dark); color: rgb(0, 0, 0); border-bottom-right-radius: 6px; box-shadow: 0 2px 8px rgba(26, 26, 46, 0.15); }
        .chat-history-item.ai { text-align: left; display: flex; align-items: flex-start; gap: 10px; }
        .chat-history-item.ai .msg-content { background: rgba(255, 255, 255, 0.8); color: var(--text); border-bottom-left-radius: 6px; border: 1px solid rgba(102, 126, 234, 0.1); }
        .chat-history-item .msg-sender { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
        .msg-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; margin-top: 18px; }
        .msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        .chat-empty { text-align: center; padding: 40px; color: var(--text-muted); }
        .load-more-btn { text-align: center; padding: 16px; color: var(--primary); cursor: pointer; font-size: 14px; transition: opacity 0.2s; }
        .load-more-btn:hover { opacity: 0.7; }
        .chat-role-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; }
        .chat-role-tab { 
            padding: 6px 14px; 
            border-radius: 16px; font-size: 13px; 
            cursor: pointer; white-space: nowrap; 
            background: rgba(102, 126, 234, 0.08); color: var(--text-light); 
            border: 1px solid rgba(102, 126, 234, 0.1); transition: all 0.2s;
        }
        .chat-role-tab.active { background: var(--gradient-primary); color: white; border: none; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); }

        /* ========== 个人中心 ========== */
        .profile-page { padding: 20px; }
        
        @media (min-width: 768px) {
            .profile-page { padding: 30px; }
        }
        
        .profile-card { 
            background: rgba(255, 255, 255, 0.8); 
            backdrop-filter: blur(10px);
            border-radius: var(--radius-xl); 
            padding: 24px; 
            margin-bottom: 24px; 
            display: flex; 
            align-items: center; 
            gap: 16px; 
            border: 1px solid rgba(102, 126, 234, 0.1); 
        }
        .profile-avatar { 
            width: 64px; height: 64px; 
            background: var(--gradient-primary); 
            border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; 
            font-size: 28px; 
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
            overflow: hidden;
        }
        .profile-avatar img, .chat-avatar-img {
            width: 100%; height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        .profile-avatar-placeholder { width: 100%; height: 100%; border-radius: 50%; background: #F5F5F7; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: 29px 29px; border: 0; }
        .profile-card .profile-avatar { padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
        .profile-card .profile-avatar img { border: 0; }
        #profile-avatar-placeholder { position: relative; }
        #profile-avatar-placeholder::after { content: '+'; position: absolute; right: -4px; bottom: -3px; width: 21px; height: 21px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #07C160; color: #fff; font-size: 16px; font-weight: 500; line-height: 1; }
        .profile-info { flex: 1; }
        .profile-name { font-size: 18px; font-weight: 700; color: var(--text); }
        .profile-id { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
        
        @media (min-width: 768px) {
            .profile-card { padding: 24px; }
            .profile-avatar { width: 80px; height: 80px; font-size: 36px; }
            .profile-name { font-size: 22px; }
        }

        /* 用户信息作为一个整体：昵称与代理入口同排，Love ID 位于下方 */
        .profile-card {
            display: grid;
            grid-template-columns: 64px minmax(0, 1fr);
            grid-template-rows: auto;
            align-items: center;
            column-gap: 16px;
        }
        .profile-card .profile-avatar {
            grid-column: 1;
            grid-row: 1;
            flex: none;
        }
        .profile-card .profile-info {
            grid-column: 2;
            grid-row: 1;
            min-width: 0;
        }
        .profile-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-width: 0;
        }
        .profile-title-row .profile-name {
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #agent-entry-btn {
            flex: none;
        }
        @media (max-width: 380px) {
            .profile-card {
                grid-template-columns: 56px minmax(0, 1fr);
                column-gap: 10px;
                padding: 18px 16px;
            }
            .profile-card .profile-avatar {
                width: 56px;
                height: 56px;
            }
            #agent-entry-btn {
                padding: 8px 10px !important;
                font-size: 12px;
            }
        }
        @media (min-width: 768px) {
            .profile-card { grid-template-columns: 80px minmax(0, 1fr); }
        }
        
        .settings-list { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid rgba(102, 126, 234, 0.1); }
        .settings-item { 
            padding: 16px 20px; 
            display: flex; align-items: center; 
            gap: 12px; 
            cursor: pointer; 
            transition: all 0.2s; 
            border-bottom: 1px solid rgba(102, 126, 234, 0.05); 
        }
        .settings-item:last-child { border-bottom: none; }
        .settings-item:hover { background: rgba(102, 126, 234, 0.03); }
        .settings-icon { font-size: 20px; }
        .settings-label { font-size: 15px; font-weight: 500; flex: 1; color: var(--text); }
        .settings-arrow { color: var(--text-muted); }
        
        @media (min-width: 768px) {
            .settings-item { padding: 18px 24px; }
            .settings-label { font-size: 16px; }
        }

        /* ========== 聊天页面 ========== */
        .chat-page { padding: 20px; }
        .chat-list-container { padding: 0; }
        
        .chat-list-item {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            background: white;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .chat-list-item:last-child {
            border-bottom: none;
        }
        
        .chat-list-item:active {
            background: #f8f8f8;
        }
        
        .chat-list-item .chat-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            margin-right: 14px;
            background: #E5E7EB;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .chat-list-item .chat-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .chat-list-item .chat-avatar-placeholder {
            font-size: 20px;
            color: #6B7280;
            font-weight: 600;
        }
        
        .chat-list-item .chat-info {
            flex: 1;
            overflow: hidden;
        }
        
        .chat-list-item .chat-name {
            font-size: 16px;
            font-weight: 600;
            color: #1F2937;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .chat-list-item .chat-preview {
            font-size: 14px;
            color: #9CA3AF;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .chat-list-item .chat-meta {
            text-align: right;
            flex-shrink: 0;
            margin-left: 12px;
        }
        
        .chat-list-item .chat-time {
            font-size: 12px;
            color: #9CA3AF;
            margin-bottom: 4px;
        }
        
        .chat-list-item .chat-count {
            background: #EF4444;
            color: white;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            min-width: 18px;
            text-align: center;
        }
        
        @media (min-width: 768px) {
            .chat-page { padding: 30px; }
            .chat-list-container { padding: 30px; }
        }

        /* 消息页：微信式层级与更克制的商业视觉 */
        .page.chat-page { padding: 0 0 120px; background: #F5F5F5; min-height: 100%; }
        .chat-page > .header { background: rgba(255,255,255,.96); border-color: #E8E8E8; }
        .chat-page .chat-list-container { margin: 12px 12px 0; padding: 0 14px; overflow: hidden; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.035); }
        .chat-page > .wechat-connection-card { margin: 12px 12px 0; padding: 13px 14px; border: 0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.035); }
        .chat-page > .wechat-connection-card .wechat-connection-icon { flex-basis: 40px; }
        .chat-page > .wechat-connection-card .wechat-connection-title { font-weight: 600; }
        .chat-page > .wechat-connection-card .wechat-connection-btn { min-height: 32px; }
        .chat-page > .wechat-connection-card.bound .wechat-connection-btn { color: #57606A; border: 1px solid #D5D8DC; background: #fff; }
        .chat-page > .wechat-connection-card + .chat-list-container { margin-top: 10px; }
        .chat-page .chat-list-item { min-height: 78px; padding: 13px 0; gap: 12px; border-bottom: 1px solid #EEEEEE; background: transparent; }
        .chat-page .chat-list-item:last-child { border-bottom: 0; }
        .chat-page .chat-list-item:active { background: #F7F7F7; transform: none; }
        .chat-page .chat-list-item .chat-avatar { width: 50px; height: 50px; margin: 0; border-radius: 9px; background: #EEF0F2; }
        .chat-page .chat-list-item .chat-avatar img { border-radius: 9px; }
        .chat-page .chat-list-item .chat-avatar-placeholder { color: #66717D; background: #EEF0F2; }
        .chat-page .chat-list-item .chat-info { min-width: 0; }
        .chat-page .chat-list-item .chat-name { margin-bottom: 5px; color: #191919; font-size: 16px; font-weight: 500; }
        .chat-page .chat-list-item .chat-preview { color: #999; font-size: 14px; }
        .chat-page .chat-list-item .chat-meta { align-self: flex-start; margin: 3px 0 0 10px; }
        .chat-page .chat-list-item .chat-time { color: #B2B2B2; font-size: 12px; }
        .chat-page .empty-state { margin: 0 -14px; padding: 86px 20px; background: #F5F5F5; }
        .chat-page .empty-icon { position: relative; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 16px; display: block; background: #E9EAEC; font-size: 0; opacity: 1; }
        .chat-page .empty-icon::before { content: ''; position: absolute; left: 15px; top: 17px; width: 26px; height: 20px; border: 2px solid #9EA4AA; border-radius: 8px; }
        .chat-page .empty-icon::after { content: ''; position: absolute; left: 19px; top: 36px; width: 7px; height: 7px; border-left: 2px solid #9EA4AA; border-bottom: 2px solid #9EA4AA; transform: skew(-28deg); background: #E9EAEC; }
        .chat-page .empty-title { color: #666; font-size: 16px; font-weight: 500; }
        .chat-page .empty-desc { color: #A5A5A5; }

        @media (min-width: 768px) {
            .page.chat-page { padding: 0 30px 130px; }
            .chat-page > .header { margin: 0 -30px; }
            .chat-page > .wechat-connection-card { max-width: 680px; margin: 24px auto 0; }
            .chat-page .chat-list-container { max-width: 680px; margin: 24px auto 0; padding: 0 20px; }
            .chat-page > .wechat-connection-card + .chat-list-container { margin-top: 12px; }
            .chat-page .chat-list-item { min-height: 82px; }
        }

        /* 微信式通栏会话列表：移动端取消卡片感，只保留文字区分割线。 */
        @media (max-width: 767px) {
            .page.chat-page { background:#fff; }
            .chat-page .chat-list-container { margin:0; padding:0 12px; border-radius:0; box-shadow:none; }
            .chat-page .chat-list-item { position:relative; min-height:74px; padding:12px 0; gap:12px; border:0; }
            .chat-page .chat-list-item::after { content:''; position:absolute; right:0; bottom:0; left:60px; height:1px; background:#D9D9D9; transform:scaleY(.5); transform-origin:bottom; }
            .chat-page .chat-list-item:last-child::after { display:none; }
            .chat-page .chat-list-item:active { margin:0 -12px; padding-right:12px; padding-left:12px; background:#E5E5E5; }
            .chat-page .chat-list-item .chat-avatar { width:48px; height:48px; border-radius:6px; }
            .chat-page .chat-list-item .chat-avatar img { border-radius:6px; }
            .chat-page .chat-list-item .chat-preview { display:flex; align-items:center; gap:7px; min-width:0; }
            .chat-page .chat-list-item .chat-preview-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
            .chat-page .chat-list-item .chat-status-badge { flex:0 0 auto; padding:1px 5px; border-radius:3px; color:#999; background:#F1F1F1; font-size:10px; line-height:17px; }
        }
        
        .empty-state { text-align: center; padding: 60px 20px; }
        .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
        .empty-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
        .empty-desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

        /* ========== 工具类 ========== */
        .loading { opacity: 0.6; pointer-events: none; }
        .text-center { text-align: center; }
        .mt-4 { margin-top: 16px; }
        .mb-4 { margin-bottom: 16px; }
        .hidden { display: none !important; }
        
        /* ========== Hero 首页 ========== */
        .hero-page {
            height: 100%;
            min-height: 100vh;
            padding: 30px 20px;
            display: none;
            background-color: #fffbfc;
            position: relative;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .hero-page::before {
            content: '';
            position: absolute;
            top: -200px;
            right: -100px;
            width: 500px;
            height: 500px;
            border-radius: 50%;
        }
        
        .hero-page::after {
            content: '';
            position: absolute;
            bottom: -150px;
            left: -100px;
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }
        
        .hero-bg-circle {
            position: absolute;
            top: 20%;
            right: 10%;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            z-index: 1;
        }
        
        .hero-bg-dots {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .hero-bg-dot {
            position: absolute;
            border-radius: 50%;
            background: rgba(7, 193, 96, 0.2);
            animation: float 6s ease-in-out infinite;
        }
        
        .hero-bg-dot:nth-child(1) {
            width: 16px;
            height: 16px;
            top: 35%;
            right: 30%;
            animation-delay: 0s;
        }
        
        .hero-bg-dot:nth-child(2) {
            width: 12px;
            height: 12px;
            top: 45%;
            right: 25%;
            animation-delay: 1s;
        }
        
        .hero-bg-dot:nth-child(3) {
            width: 20px;
            height: 20px;
            top: 55%;
            right: 35%;
            animation-delay: 2s;
        }
        
        .hero-bg-dot:nth-child(4) {
            width: 14px;
            height: 14px;
            top: 65%;
            right: 28%;
            animation-delay: 3s;
        }
        
        .hero-bg-dot:nth-child(5) {
            width: 10px;
            height: 10px;
            top: 75%;
            right: 32%;
            animation-delay: 4s;
        }
        
        .hero-bg-dot:nth-child(6) {
            width: 8px;
            height: 8px;
            top: 40%;
            right: 20%;
            animation-delay: 0.5s;
            background: rgba(200, 162, 255, 0.3);
        }
        
        .hero-bg-dot:nth-child(7) {
            width: 18px;
            height: 18px;
            top: 50%;
            right: 18%;
            animation-delay: 2.5s;
            background: rgba(200, 162, 255, 0.25);
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); opacity: 0.3; }
            50% { transform: translateY(-20px); opacity: 0.6; }
        }
        
        .hero-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 10;
        }
        
        .hero-logo {
            font-size: 24px;
            font-weight: 700;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .hero-logo svg {
            width: 24px;
            height: 24px;
        }
        
        .hero-logo span {
            font-size: 12px;
            font-weight: 400;
            color: #999;
            background: #f0f0f0;
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: 4px;
        }
        
        .hero-cta-top {
            background: white;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            border: 1px solid #e0e0e0;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .hero-cta-top:hover {
            border-color: #07C160;
            color: #07C160;
        }
        
        .hero-cta-top svg {
            width: 14px;
            height: 14px;
        }
        
        .hero-banner {
            background: linear-gradient(135deg, #fff5f5 0%, #fffaf0 100%);
            border-radius: 16px;
            padding: 16px 20px;
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 10;
        }
        
        .hero-banner-text {
            font-size: 13px;
            color: #f97316;
            font-weight: 500;
        }
        
        .hero-banner-btn {
            background: #f97316;
            color: white;
            padding: 6px 16px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
        }
        
        .hero-tags {
            display: flex;
            gap: 16px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .hero-tag {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #666;
        }
        
        .hero-tag svg {
            width: 14px;
            height: 14px;
        }
        
        .hero-tag-icon-green {
            color: #09BB07;
        }
        
        .hero-tag-icon-blue {
            color: #3B82F6;
        }
        
        .hero-tag-icon-purple {
            color: #9B59B6;
        }
        
        .hero-main {
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin-top: 30px;
            position: relative;
            z-index: 10;
        }
        
        .hero-content {
            flex: 1;
        }
        
        .hero-content h1 {
            font-size: 36px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 16px;
            color: #333;
        }
        
        .hero-content h1 .pink-text {
            color: #07C160;
        }
        
        .hero-content p {
            font-size: 15px;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 24px;
            max-width: 400px;
        }
        
        .hero-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        
        .hero-btn-primary {
            background: #1a1a1a;
            color: white;
            padding: 14px 28px;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .hero-btn-primary:hover {
            background: #333;
        }
        
        .hero-btn-primary svg {
            width: 16px;
            height: 16px;
        }
        
        .hero-btn-secondary {
            background: white;
            color: #666;
            padding: 14px 28px;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            border: 1px solid #e0e0e0;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .hero-btn-secondary:hover {
            border-color: #07C160;
            color: #07C160;
        }
        
        .hero-btn-secondary svg {
            width: 14px;
            height: 14px;
        }
        
        .hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-phone-image {
            max-width: 280px;
            width: 100%;
            border-radius: 32px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            transform: rotate(-5deg);
        }
        
        .hero-phone {
            background: white;
            border-radius: 32px;
            padding: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            transform: rotate(-5deg);
            max-width: 280px;
            width: 100%;
        }
        
        .hero-phone-screen {
            background: #f5f5f5;
            border-radius: 24px;
            padding: 12px;
            aspect-ratio: 9/16;
            overflow: hidden;
        }
        
        .hero-phone-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 16px;
            background: white;
            border-radius: 16px;
            margin-bottom: 12px;
        }
        
        .hero-phone-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        
        .hero-phone-dots {
            display: flex;
            gap: 4px;
        }
        
        .hero-phone-dot {
            width: 8px;
            height: 8px;
            background: #ccc;
            border-radius: 50%;
        }
        
        .hero-phone-chat {
            background: white;
            border-radius: 16px;
            padding: 16px;
            height: calc(100% - 70px);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .hero-chat-item {
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.5;
        }
        
        .hero-chat-item.user {
            background: var(--primary);
            color: white;
            align-self: flex-end;
            margin-left: 30%;
            border-bottom-right-radius: 4px;
        }
        
        .hero-chat-item.ai {
            background: #f0f0f0;
            color: #333;
            align-self: flex-start;
            margin-right: 30%;
            border-bottom-left-radius: 4px;
        }
        
        .hero-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-top: 40px;
            position: relative;
            z-index: 10;
        }
        
        .hero-feature {

    background: #ffffff00;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgb(233 233 233 / 81%);
    transition: all 0.2s;
}
        
        .hero-feature:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        
        .hero-feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            background: #FFF0F3;
        }
        
        .hero-feature-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #333;
        }
        
        .hero-feature-desc {
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.5;
        }
        
        @media (max-width: 767px) {
            .hero-page::before {
                top: -100px;
                right: -60px;
                width: 300px;
                height: 300px;
            }
            
            .hero-page::after {
                bottom: -80px;
                left: -60px;
                width: 250px;
                height: 250px;
            }
            
            .hero-bg-circle {
                top: -5%;
                right: -15%;
                width: 250px;
                height: 250px;
            }
            
            .hero-bg-dot:nth-child(1) { top: 20%; right: 20%; width: 12px; height: 12px; }
            .hero-bg-dot:nth-child(2) { top: 30%; right: 15%; width: 10px; height: 10px; }
            .hero-bg-dot:nth-child(3) { top: 40%; right: 25%; width: 16px; height: 16px; }
            .hero-bg-dot:nth-child(4) { top: 50%; right: 18%; width: 10px; height: 10px; }
            .hero-bg-dot:nth-child(5) { top: 60%; right: 22%; width: 8px; height: 8px; }
            .hero-bg-dot:nth-child(6) { top: 25%; right: 10%; width: 6px; height: 6px; }
            .hero-bg-dot:nth-child(7) { top: 35%; right: 8%; width: 14px; height: 14px; }
        }

        @media (min-width: 768px) {
            .hero-page {
                padding: 40px 60px;
            }
            
            .hero-logo {
                font-size: 28px;
            }
            
            .hero-main {
                flex-direction: row;
                align-items: center;
                margin-top: 60px;
            }
            
            .hero-content h1 {
                font-size: 48px;
            }
            
            .hero-content p {
                font-size: 16px;
            }
            
            .hero-btn-primary,
            .hero-btn-secondary {
                padding: 16px 36px;
                font-size: 16px;
            }
            
            .hero-phone {
                max-width: 320px;
            }
            
            .hero-features {
                grid-template-columns: repeat(4, 1fr);
                gap: 20px;
                margin-top: 60px;
            }
            
            .hero-feature {
                padding: 24px;
            }
            
            .hero-feature-title {
                font-size: 17px;
            }
            
            .hero-feature-desc {
                font-size: 14px;
            }
        }
        
        @media (min-width: 1024px) {
            .hero-page {
                padding: 40px 120px;
            }
            
            .hero-content h1 {
                font-size: 56px;
            }
            
            .hero-phone {
                max-width: 360px;
            }
        }

        /* ========== 右下角悬浮操作 - 微信式轻量按钮 ========== */
        .floating-action-group {
            position: fixed;
            right: 14px;
            bottom: 94px;
            z-index: 90;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        @media (min-width: 768px) {
            .floating-action-group {
                right: calc(50% - 344px);
                bottom: 120px;
            }
        }
        
        @media (min-width: 1024px) {
            .floating-action-group {
                right: calc(50% - 464px);
            }
        }
        
        @media (min-width: 1280px) {
            .floating-action-group {
                right: calc(50% - 534px);
            }
        }
        
        .fab-btn {
            width: 66px;
            height: 40px;
            padding: 0 12px;
            border-radius: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            color: #57606A;
            background: rgba(255, 255, 255, 0.96);
            border: 0.5px solid rgba(0, 0, 0, 0.10);
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09);
            transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
            position: relative;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        
        .fab-btn:hover {
            background: #F7F8F9;
            box-shadow: 0 5px 16px rgba(0, 0, 0, 0.11);
        }
        
        .fab-btn:active {
            transform: scale(0.96);
            background: #F0F1F2;
        }
        
        .fab-btn.service {
            color: #07A957;
        }
        
        .fab-btn.refund {
            color: #606872;
        }
        
        .fab-btn-icon {
            width: 17px;
            height: 17px;
            display: block;
            flex: 0 0 auto;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        
        .fab-btn-label {
            font-size: 12px;
            font-weight: 500;
            color: currentColor;
            line-height: 1;
            white-space: nowrap;
        }
        
        /* 退款申请表单样式 - 复用项目CSS变量，与整体UI统一 */
        #refund-modal .modal {
            max-width: 360px;
            max-height: min(90vh, calc(100dvh - 40px));
        }
        
        #refund-modal .modal-body {
            padding: 16px 18px;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        
        .refund-form-group {
            margin-bottom: 14px;
        }
        
        .refund-form-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 6px;
            display: block;
        }
        
        .refund-form-label .required {
            color: var(--primary);
            margin-right: 2px;
        }
        
        .refund-form-input,
        .refund-form-select,
        .refund-form-textarea {
            width: 100%;
            padding: 11px 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 14px;
            color: var(--text);
            background: rgba(255, 255, 255, 0.8);
            transition: all 0.2s;
            box-sizing: border-box;
            font-family: inherit;
            -webkit-appearance: none;
            appearance: none;
        }
        
        .refund-form-select {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B2BEC3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 16px;
            padding-right: 38px;
        }
        
        .refund-form-input:focus,
        .refund-form-select:focus,
        .refund-form-textarea:focus {
            outline: none;
            border-color: var(--primary);
            background: #FFFFFF;
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        
        .refund-form-input::placeholder,
        .refund-form-textarea::placeholder {
            color: var(--text-muted);
        }
        
        .refund-form-textarea {
            height: 84px;
            resize: none;
            line-height: 1.5;
        }
        
        .refund-form-tips {
            font-size: 12px;
            color: var(--text-light);
            line-height: 1.6;
            padding: 10px 14px;
            background: var(--primary-light);
            border-radius: var(--radius);
            margin-bottom: 14px;
        }
        
        .refund-submit-btn {
            width: 100%;
            padding: 13px;
            border: none;
            border-radius: var(--radius);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
            transition: all 0.2s;
            margin-top: 4px;
        }
        
        .refund-submit-btn:hover {
            transform: translateY(-2px);
            background: var(--primary-dark);
        }
        
        .refund-submit-btn:active {
            transform: translateY(0);
        }
        
        .refund-submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        /* 小屏幕自适应优化 */
        @media (max-width: 360px) {
            #refund-modal .modal-body {
                padding: 14px 14px;
            }
            .refund-form-group {
                margin-bottom: 12px;
            }
            .refund-form-input,
            .refund-form-select,
            .refund-form-textarea {
                padding: 10px 12px;
                font-size: 13px;
            }
            .refund-form-textarea {
                height: 72px;
            }
            .refund-submit-btn {
                padding: 12px;
                font-size: 14px;
            }
        }
        
        /* 横屏/短屏自适应 */
        @media (max-height: 600px) and (orientation: landscape) {
            #refund-modal .modal {
                max-height: 95vh;
                max-width: 480px;
            }
            #refund-modal .modal-header {
                padding: 12px 18px;
            }
            #refund-modal .modal-header h3 {
                font-size: 15px;
            }
            #refund-modal .modal-header p {
                font-size: 12px;
                margin-top: 2px;
            }
            .refund-form-group {
                margin-bottom: 10px;
            }
            .refund-form-textarea {
                height: 60px;
            }
        }

        /* 欢迎页旧设计覆盖已停用
        #hero-page.hero-page {
            position: relative;
            width: 100%;
            height: auto;
            min-height: 100vh;
            min-height: 100dvh;
            overflow: visible;
            min-height: 100vh;
            padding: 24px 22px 32px;
            overflow: hidden;
            background:
                radial-gradient(circle at 88% 12%, rgba(7, 193, 96, .10), transparent 32%),
                radial-gradient(circle at 4% 88%, rgba(255, 132, 166, .10), transparent 34%),
                #f7f8f7;
            color: #191919;
        }
        #hero-page.hero-page::before,
        #hero-page.hero-page::after,
        #hero-page .hero-bg-circle,
        #hero-page .hero-bg-dots { display: none; }
        html.welcome-mode,
        body.welcome-mode { width:100%; height:100%; overflow:hidden; background-attachment:scroll; }
        body.welcome-mode #hero-page { width:100%; height:100%; min-height:0; overflow-x:hidden; overflow-y:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch; overscroll-behavior-y:auto; }
        body.welcome-mode .hero-image { touch-action:pan-y; }
        body.welcome-mode .hero-phone-image { pointer-events:none; touch-action:pan-y; -webkit-user-drag:none; -webkit-touch-callout:none; user-select:none; }
        #hero-page .hero-header { max-width: 1080px; width: 100%; margin: 0 auto; }
        #hero-page .hero-logo { gap: 10px; color: #1f2321; font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
        #hero-page .hero-logo-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #07c160; box-shadow: 0 6px 18px rgba(7, 193, 96, .20); }
        #hero-page .hero-logo-mark svg { width: 21px; height: 21px; }
        #hero-page .hero-logo span { margin-left: 2px; padding: 3px 7px; border-radius: 999px; color: #7b817e; background: #eaeeeb; font-size: 10px; font-weight: 600; letter-spacing: .4px; }
        #hero-page .hero-main { width: 100%; max-width: 1080px; margin: 54px auto 0; gap: 48px; align-items: center; }
        #hero-page .hero-content { min-width: 0; }
        #hero-page .hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; padding: 7px 11px; border: 1px solid rgba(7, 193, 96, .16); border-radius: 999px; background: rgba(255,255,255,.76); color: #43815f; font-size: 12px; font-weight: 600; }
        #hero-page .hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #07c160; box-shadow: 0 0 0 4px rgba(7,193,96,.10); }
        #hero-page .hero-content h1 { margin: 0 0 18px; color: #171a18; font-size: clamp(38px, 7vw, 62px); line-height: 1.13; font-weight: 760; letter-spacing: -2.1px; }
        #hero-page .hero-content h1 .pink-text { color: #07c160; }
        #hero-page .hero-content p { max-width: 470px; margin-bottom: 30px; color: #6e7571; font-size: 16px; line-height: 1.8; }
        #hero-page .hero-buttons { align-items: center; gap: 19px; }
        #hero-page .hero-btn-primary { min-height: 52px; padding: 0 25px; border: 0; border-radius: 13px; justify-content: center; background: #07c160; box-shadow: 0 10px 25px rgba(7,193,96,.22); color: #fff; font-size: 15px; font-weight: 650; }
        #hero-page .hero-btn-primary:hover { background: #06ad56; transform: translateY(-1px); }
        #hero-page .hero-btn-primary svg { width: 18px; height: 18px; }
        #hero-page .hero-btn-secondary { min-height: auto; padding: 10px 2px; border: 0; border-radius: 0; background: transparent; color: #737a76; font-size: 14px; font-weight: 500; }
        #hero-page .hero-btn-secondary:hover { color: #1f2823; }
        #hero-page .hero-btn-secondary svg { width: 15px; height: 15px; }
        #hero-page .hero-tags { display: none; }
        #hero-page .hero-tag { gap: 6px; color: #8a918d; font-size: 12px; }
        #hero-page .hero-tag svg { width: 13px; height: 13px; color: #07c160; }
        #hero-page .hero-image { width: 100%; display: flex; justify-content: center; align-items: center; }
        #hero-page .companion-preview { position: relative; width: min(100%, 390px); min-height: 420px; padding: 28px 22px; border: 1px solid rgba(30,45,37,.07); border-radius: 32px; background: rgba(255,255,255,.82); box-shadow: 0 28px 70px rgba(40,57,48,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
        #hero-page .preview-head { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid #edf0ee; }
        #hero-page .preview-avatar { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg,#ffe4eb,#ffd2df); color: #d95f83; font-size: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
        #hero-page .preview-name { color: #202522; font-size: 16px; font-weight: 680; }
        #hero-page .preview-status { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #89908c; font-size: 12px; }
        #hero-page .preview-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #07c160; }
        #hero-page .preview-time { margin-left: auto; color: #a5aaa7; font-size: 11px; }
        #hero-page .preview-chat { display: flex; flex-direction: column; gap: 15px; padding-top: 27px; }
        #hero-page .preview-chat-gif { display: block; padding: 18px 0 70px; }
        #hero-page .preview-chat-gif img { display: block; width: 100%; height: auto; border-radius: 18px; }
        #hero-page .preview-bubble { max-width: 84%; padding: 13px 15px; border-radius: 16px; color: #434a46; background: #f0f2f1; font-size: 14px; line-height: 1.55; }
        #hero-page .preview-bubble.ai { border-top-left-radius: 5px; }
        #hero-page .preview-bubble.user { align-self: flex-end; border-top-right-radius: 5px; background: #95ec69; color: #1f2a22; }
        #hero-page .preview-memory { position: absolute; right: 18px; bottom: 20px; left: 18px; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 14px; background: #f8faf9; color: #747c77; font-size: 12px; }
        #hero-page .preview-memory-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #e8f7ee; color: #07a951; font-size: 14px; }
        #hero-page .hero-features { max-width: 1080px; margin: 54px auto 0; padding: 17px 20px; display: block; border: 1px solid rgba(32,48,40,.06); border-radius: 16px; background: rgba(255,255,255,.58); color: #737b76; font-size: 13px; text-align: center; }
        #hero-page .hero-features .hero-feature { display: none; }
        #hero-page .hero-features::before { content: '在线聊天  ·  长期记忆  ·  隐私保护  ·  自定义角色'; }
        #hero-page .hero-trust-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
        #hero-page .hero-trust-item::before { content: '✓'; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #e5f7ec; color: #07a951; font-size: 11px; font-weight: 700; }
        @media (max-width: 767px) {
            #hero-page.hero-page { padding: 20px 18px 28px; }
            #hero-page .hero-main { margin-top: 22px; gap: 38px; }
            #hero-page .hero-logo span { padding: 2px 6px; font-size: 9px; }
            #hero-page .hero-content h1 { font-size: 39px; letter-spacing: -1.5px; }
            #hero-page .hero-content p { font-size: 15px; }
            #hero-page .hero-buttons { gap: 14px; }
            #hero-page .hero-btn-primary { width: 100%; }
            #hero-page .hero-btn-secondary { margin: 0 auto; }
            #hero-page .companion-preview { min-height: 392px; border-radius: 26px; }
            #hero-page .hero-features { margin-top: 32px; flex-wrap: wrap; gap: 10px 18px; }
        }
        @media (max-width: 380px) {
            #hero-page.hero-page { padding: 16px 14px 24px; }
            #hero-page .hero-logo { font-size: 17px; }
            #hero-page .hero-main { margin-top: 34px; gap: 30px; }
            #hero-page .hero-content h1 { font-size: 34px; letter-spacing: -1.2px; }
            #hero-page .hero-content p { font-size: 14px; line-height: 1.7; }
            #hero-page .companion-preview { min-height: 360px; padding: 20px 16px; }
            #hero-page .preview-avatar { width: 44px; height: 44px; border-radius: 14px; }
            #hero-page .preview-memory { right: 14px; bottom: 14px; left: 14px; }
            #hero-page .hero-features { padding: 14px 10px; font-size: 11px; }
        }
        @media (min-width: 768px) {
            #hero-page.hero-page { padding: 32px 48px 38px; }
            #hero-page .hero-main { flex-direction: row; margin-top: 72px; }
            #hero-page .hero-content, #hero-page .hero-image { flex: 1; }
        }
        @media (min-width: 1200px) {
            #hero-page.hero-page { padding-right: 72px; padding-left: 72px; }
            #hero-page .hero-main { margin-top: 86px; }
        }
        */
        html.welcome-mode,
        body.welcome-mode { width:100%; height:100%; overflow:hidden; background-attachment:scroll; }
        body.welcome-mode #hero-page { width:100%; height:100%; min-height:0; overflow-x:hidden; overflow-y:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch; overscroll-behavior-y:auto; }
        body.welcome-mode .hero-image { touch-action:pan-y; }
        body.welcome-mode .hero-phone-image { pointer-events:none; touch-action:pan-y; -webkit-user-drag:none; -webkit-touch-callout:none; user-select:none; }
        .welcome-login-mask { position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(24,22,23,.38); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
        .welcome-login-mask.show { display:flex; }
        .welcome-login-panel { width:min(100%,420px); max-height:min(88dvh,680px); overflow-y:auto; padding:24px; border:1px solid #ece7e9; border-radius:20px; background:#fff; box-shadow:0 22px 60px rgba(34,28,31,.18); }
        .welcome-login-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
        .welcome-login-head h3 { margin:0 0 6px; color:#333; font-size:20px; font-weight:700; }
        .welcome-login-head h3::before { content:'●'; margin-right:7px; color:#07c160; font-size:13px; }
        .welcome-login-head p { margin:0; color:#999; font-size:13px; }
        .welcome-login-close { width:32px; height:32px; flex:0 0 auto; border:1px solid #ece8e9; border-radius:50%; background:#fff; color:#888; font-size:20px; cursor:pointer; }
        .welcome-login-methods { display:grid; gap:12px; }
        .welcome-login-btn { width:100%; min-height:50px; border:0; border-radius:20px; font-size:15px; font-weight:600; cursor:pointer; transition:transform .15s ease,background .15s ease,border-color .15s ease; }
        .welcome-login-btn:active { transform:scale(.985); }
        .welcome-login-wechat { background:#1a1a1a; color:#fff; }
        #welcomeWechatBtn { background:#07c160; }
        .welcome-login-phone { border:1px solid #e5e5e5; background:#fff; color:#666; }
        .welcome-login-phone:hover { border-color:#07c160; color:#16884b; }
        .welcome-login-divider { display:flex; align-items:center; gap:10px; color:#aaa; font-size:12px; }
        .welcome-login-divider::before,.welcome-login-divider::after { content:''; height:1px; flex:1; background:#eee; }
        .welcome-phone-form { display:none; }
        .welcome-phone-form.show { display:block; }
        .welcome-field { margin-bottom:15px; }
        .welcome-field label { display:block; margin-bottom:7px; color:#666; font-size:13px; font-weight:600; }
        .welcome-field input { width:100%; height:48px; border:1px solid #e2e2e2; border-radius:14px; padding:0 14px; outline:0; background:#fff; font-size:16px; }
        .welcome-field input:focus { border-color:#07c160; box-shadow:0 0 0 3px rgba(7,193,96,.08); }
        .welcome-code-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
        .welcome-code-btn { min-width:105px; border:1px solid #c6e8d4; border-radius:14px; background:#fff; color:#16884b; font-weight:600; }
        .welcome-login-back { display:block; margin:13px auto 0; border:0; background:transparent; color:#888; }
        .welcome-login-agreement { display:flex; align-items:flex-start; gap:7px; margin-top:18px; color:#999; font-size:11px; line-height:1.6; }
        .welcome-login-agreement input { accent-color:#07c160; }
        .welcome-login-agreement a { color:#16884b; }
        .welcome-login-tip { min-height:20px; margin-top:10px; color:#e04f5f; font-size:12px; text-align:center; }
        @media (max-width:380px) { .welcome-login-mask { padding:12px; } .welcome-login-panel { padding:21px 18px; border-radius:18px; } }

        /* 新欢迎页：Apple 式轻盈、克制、单一蓝紫氛围。 */
        #hero-page > :not(.modern-welcome) { display:none !important; }
        .modern-welcome { position:relative; min-height:100dvh; overflow:hidden; color:#1D1D1F; background:linear-gradient(180deg,#FBFCFF 0%,#F5F7FC 58%,#FFFFFF 100%); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",sans-serif; }
        .modern-welcome::before { content:''; position:absolute; width:720px; height:720px; left:50%; top:-440px; border-radius:50%; background:radial-gradient(circle,rgba(109,119,255,.22) 0%,rgba(167,139,250,.10) 42%,transparent 70%); transform:translateX(-50%); filter:blur(8px); animation:welcomeGlow 8s ease-in-out infinite alternate; pointer-events:none; }
        .modern-welcome-nav { position:relative; z-index:4; width:min(1120px,calc(100% - 40px)); height:72px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
        .modern-brand { display:flex; align-items:center; gap:10px; color:#1D1D1F; font-size:17px; font-weight:650; letter-spacing:-.02em; }
        .modern-brand-mark { position:relative; width:30px; height:30px; border-radius:10px; background:linear-gradient(145deg,#6875F5,#9A7CF6); box-shadow:0 7px 18px rgba(104,117,245,.22); }
        .modern-brand-mark::before,.modern-brand-mark::after { content:''; position:absolute; top:9px; width:9px; height:12px; border-radius:8px 8px 5px 5px; background:#fff; transform:rotate(38deg); }
        .modern-brand-mark::before { left:7px; }.modern-brand-mark::after { right:7px; transform:rotate(-38deg); }
        .modern-nav-login { height:38px; padding:0 18px; border:1px solid rgba(29,29,31,.10); border-radius:999px; color:#1D1D1F; background:rgba(255,255,255,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); font-size:14px; font-weight:550; cursor:pointer; transition:.25s ease; }
        .modern-nav-login:hover { background:#fff; box-shadow:0 8px 24px rgba(30,40,80,.08); transform:translateY(-1px); }
        .modern-welcome-main { position:relative; z-index:2; width:min(1120px,calc(100% - 40px)); min-height:calc(100dvh - 72px); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.86fr); align-items:center; gap:74px; padding:48px 0 92px; }
        .modern-copy { padding-left:4px; }
        .modern-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:22px; padding:7px 11px; border:1px solid rgba(105,116,242,.13); border-radius:999px; color:#6670D8; background:rgba(255,255,255,.68); font-size:12px; font-weight:600; backdrop-filter:blur(12px); }
        .modern-eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#7580F2; box-shadow:0 0 0 5px rgba(117,128,242,.10); animation:welcomePulse 2.6s ease-in-out infinite; }
        .modern-copy h1 { max-width:650px; margin:0; color:#1D1D1F; font-size:clamp(50px,6vw,82px); font-weight:720; line-height:1.04; letter-spacing:-.055em; }
        .modern-copy h1 span { display:block; color:transparent; background:linear-gradient(100deg,#5865DF 5%,#8A70E8 66%,#6F7CEB 100%); -webkit-background-clip:text; background-clip:text; }
        .modern-copy > p { max-width:520px; margin:26px 0 32px; color:#6E6E73; font-size:18px; line-height:1.75; letter-spacing:-.012em; }
        .modern-actions { display:flex; align-items:center; gap:12px; }
        .modern-primary { height:52px; padding:0 25px; border:1px solid rgba(255,255,255,.34); border-radius:999px; color:#fff; background:rgba(82,92,106,.84); box-shadow:0 10px 28px rgba(61,70,82,.18); font-size:16px; font-weight:600; cursor:pointer; transition:.25s ease; -webkit-backdrop-filter:blur(18px) saturate(145%); backdrop-filter:blur(18px) saturate(145%); }
        .modern-primary:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(29,29,31,.21); }
        .modern-secondary { color:#6670D8; font-size:14px; font-weight:550; }
        .modern-proof { display:flex; gap:22px; margin-top:34px; color:#8A8A90; font-size:12px; }
        .modern-proof span { display:flex; align-items:center; gap:6px; }.modern-proof i { width:5px; height:5px; border-radius:50%; background:#9299EF; }
        .modern-visual { position:relative; min-height:590px; display:grid; place-items:center; perspective:1200px; }
        .modern-orbit { position:absolute; width:460px; height:460px; border:1px solid rgba(112,122,225,.10); border-radius:50%; animation:welcomeOrbit 22s linear infinite; }
        .modern-orbit::after { content:''; position:absolute; width:12px; height:12px; left:53px; top:60px; border-radius:50%; background:#8790F5; box-shadow:0 0 24px rgba(110,122,244,.55); }
        .modern-phone { position:relative; z-index:2; width:330px; height:570px; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:42px; background:rgba(255,255,255,.82); box-shadow:0 42px 90px rgba(73,82,151,.17),inset 0 0 0 1px rgba(90,100,170,.05); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); transform:rotateY(-5deg) rotateX(2deg); animation:welcomeFloat 6s ease-in-out infinite; }
        .modern-phone-top { height:76px; display:flex; align-items:center; gap:12px; padding:19px 20px 12px; border-bottom:1px solid rgba(29,29,31,.06); }
        .modern-avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#7C86F5,#A18AF4); font-size:15px; font-weight:650; box-shadow:0 8px 18px rgba(113,124,240,.22); }
        .modern-person strong { display:block; color:#29292C; font-size:15px; }.modern-person small { display:block; margin-top:3px; color:#949499; font-size:11px; }
        .modern-chat-demo { padding:28px 17px; display:flex; flex-direction:column; gap:15px; }
        .modern-bubble { max-width:82%; padding:12px 14px; border-radius:17px; font-size:14px; line-height:1.55; opacity:0; transform:translateY(9px); animation:welcomeMessage .55s ease forwards; }
        .modern-bubble.ai { align-self:flex-start; color:#3B3B40; background:#F0F1F5; border-bottom-left-radius:5px; }
        .modern-bubble.user { align-self:flex-end; color:#fff; background:linear-gradient(135deg,#6A75E8,#8676E8); border-bottom-right-radius:5px; animation-delay:.75s; }
        .modern-bubble.third { animation-delay:1.5s; }
        .modern-memory { position:absolute; right:-32px; bottom:72px; z-index:3; width:205px; padding:15px 16px; border:1px solid rgba(255,255,255,.8); border-radius:18px; color:#55565D; background:rgba(255,255,255,.72); box-shadow:0 20px 45px rgba(77,85,145,.13); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); animation:welcomeFloatSmall 5s ease-in-out infinite; }
        .modern-memory b { display:flex; align-items:center; gap:7px; margin-bottom:6px; color:#555FD1; font-size:12px; }.modern-memory p { margin:0; color:#7B7B82; font-size:12px; line-height:1.55; }
        .modern-memory-icon { width:18px; height:18px; display:grid; place-items:center; border-radius:6px; color:#fff; background:#7B84ED; font-size:10px; }
        @keyframes welcomeGlow { to { transform:translateX(-50%) scale(1.08); opacity:.74; } }
        @keyframes welcomePulse { 50% { transform:scale(.75); opacity:.6; } }
        @keyframes welcomeOrbit { to { transform:rotate(360deg); } }
        @keyframes welcomeFloat { 50% { transform:rotateY(-3deg) rotateX(1deg) translateY(-12px); } }
        @keyframes welcomeFloatSmall { 50% { transform:translateY(-10px) rotate(1deg); } }
        @keyframes welcomeMessage { to { opacity:1; transform:translateY(0); } }
        @media (max-width:820px) { .modern-welcome-main { grid-template-columns:1fr; gap:36px; padding-top:54px; text-align:center; }.modern-copy { padding:0; }.modern-copy h1,.modern-copy>p { margin-right:auto; margin-left:auto; }.modern-actions,.modern-proof { justify-content:center; }.modern-visual { min-height:500px; }.modern-phone { width:300px; height:510px; }.modern-orbit { width:390px; height:390px; } }
        @media (max-width:520px) { .modern-welcome-nav { width:calc(100% - 30px); height:64px; }.modern-welcome-main { width:calc(100% - 34px); min-height:auto; padding:44px 0 72px; }.modern-copy h1 { font-size:46px; }.modern-copy>p { margin:21px auto 27px; font-size:16px; }.modern-actions { flex-direction:column; }.modern-primary { width:100%; }.modern-proof { gap:12px; flex-wrap:wrap; }.modern-visual { min-height:450px; }.modern-phone { width:276px; height:470px; border-radius:34px; }.modern-memory { right:-4px; bottom:30px; width:184px; }.modern-orbit { width:340px; height:340px; } }
        @media (prefers-reduced-motion:reduce) { .modern-welcome * { animation:none !important; transition:none !important; }.modern-bubble { opacity:1; transform:none; } }
        /* 2026 welcome: 黑白产品排版 + 微信式对话动效，无紫色与装饰渐变。 */
        body.welcome-mode #hero-page.hero-page { padding:0; }
        .modern-welcome.welcome-live { --ink:#202422; --muted:#717773; --line:#e3e9e5; --green:#07c160; --bubble:#95ec69; min-height:100svh; color:var(--ink); background:#f8fbf9; }
        .modern-welcome.welcome-live::before { display:block; width:680px; height:680px; left:auto; right:-250px; top:-310px; border-radius:50%; background:radial-gradient(circle,rgba(149,236,105,.22) 0%,rgba(149,236,105,.07) 44%,transparent 70%); filter:none; transform:none; animation:liveAmbient 7s ease-in-out infinite alternate; }
        .welcome-live .modern-welcome-nav { width:min(1180px,calc(100% - 48px)); height:74px; border-bottom:1px solid var(--line); }
        .welcome-live .modern-brand { color:var(--ink); font-weight:680; }
        .welcome-live .modern-brand-mark { width:31px; height:31px; border-radius:9px; background:var(--green); box-shadow:0 8px 20px rgba(7,193,96,.2); }
        .welcome-live .modern-brand-mark::before { left:6px; top:7px; width:13px; height:10px; border:2px solid #fff; border-radius:7px; background:transparent; transform:none; }
        .welcome-live .modern-brand-mark::after { left:auto; right:5px; top:auto; bottom:6px; width:8px; height:7px; border:2px solid #fff; border-radius:6px; background:transparent; transform:none; }
        .welcome-live .modern-nav-login { border-color:rgba(7,193,96,.2); color:#079b4e; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); }
        .welcome-live .modern-welcome-main { width:min(1180px,calc(100% - 48px)); min-height:calc(100svh - 74px); grid-template-columns:minmax(0,.94fr) minmax(440px,1.06fr); gap:72px; padding:54px 0 74px; }
        .welcome-live .modern-copy { animation:liveCopyIn .8s cubic-bezier(.2,.75,.2,1) both; }
        .welcome-live .modern-eyebrow { margin-bottom:23px; padding:0; border:0; color:#505055; background:transparent; backdrop-filter:none; font-size:13px; }
        .welcome-live .modern-eyebrow-dot { width:8px; height:8px; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.1); }
        .welcome-live .modern-copy h1 { max-width:620px; color:var(--ink); font-size:clamp(48px,5.35vw,76px); line-height:1.08; }
        .welcome-live .modern-copy h1 span { color:#08a953; background:none; -webkit-text-fill-color:currentColor; }
        .welcome-live .modern-copy>p { max-width:500px; color:#626267; font-size:17px; }
        .welcome-live .modern-primary { border-radius:13px; background:var(--green); box-shadow:0 12px 28px rgba(7,193,96,.24); }
        .welcome-live .modern-primary:hover { background:#06ad56; box-shadow:0 16px 32px rgba(7,193,96,.29); }
        .welcome-live .modern-secondary { color:#717176; }
        .welcome-live .modern-proof i { background:#22c55e; }
        .welcome-live .modern-visual { min-height:560px; display:flex; align-items:center; justify-content:flex-end; perspective:none; }
        .live-chat { position:relative; width:min(100%,560px); min-height:510px; padding:32px 32px 28px; border:1px solid #dde5e0; border-radius:27px; background:#ededed; box-shadow:0 30px 75px rgba(45,75,58,.14); overflow:hidden; animation:liveFloat 5.5s ease-in-out infinite; }
        .live-chat::before { content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.32) 48%,transparent 70%); transform:translateX(-110%); animation:liveSheen 7s ease-in-out infinite; pointer-events:none; }
        .live-chat-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
        .live-person { display:flex; align-items:center; gap:11px; }
        .live-avatar,.live-mini-avatar { display:grid; place-items:center; color:#fff; background:#48a86f; box-shadow:0 5px 14px rgba(46,139,87,.16); }
        .live-avatar { width:42px; height:42px; border-radius:10px; font-size:15px; font-weight:650; }
        .live-person-copy strong { display:block; font-size:15px; }.live-person-copy small { display:flex; align-items:center; gap:5px; margin-top:3px; color:#85858a; font-size:11px; }
        .live-person-copy small::before { content:''; width:6px; height:6px; border-radius:50%; background:#22c55e; }
        .live-chat-time { color:#a2a2a7; font-size:11px; }
        .live-messages { display:flex; flex-direction:column; gap:17px; }
        .live-message { display:flex; align-items:flex-start; gap:9px; opacity:0; transform:translateY(14px) scale(.97); animation:liveMessage .62s cubic-bezier(.18,.8,.25,1.15) forwards; }
        .live-message.user { justify-content:flex-end; animation-delay:1.05s; }.live-message.reply { animation-delay:2.25s; }.live-message.typing-row { animation-delay:3.2s; }
        .live-mini-avatar { flex:none; width:30px; height:30px; border-radius:7px; font-size:11px; }
        .live-bubble { position:relative; max-width:76%; padding:11px 14px; border-radius:6px; color:#222; background:#fff; font-size:14px; line-height:1.58; box-shadow:0 1px 1px rgba(0,0,0,.04); }
        .live-message.user .live-bubble { background:var(--bubble); }
        .live-bubble::before { content:''; position:absolute; left:-6px; top:12px; border-width:5px 7px 5px 0; border-style:solid; border-color:transparent #fff transparent transparent; }
        .live-message.user .live-bubble::before { left:auto; right:-6px; border-width:5px 0 5px 7px; border-color:transparent transparent transparent var(--bubble); }
        .live-typing { display:inline-flex; align-items:center; gap:4px; min-width:47px; height:37px; padding:0 13px; border-radius:6px; background:#fff; }
        .live-typing i { width:5px; height:5px; border-radius:50%; background:#999; animation:liveTyping 1.1s ease-in-out infinite; }.live-typing i:nth-child(2){animation-delay:.14s}.live-typing i:nth-child(3){animation-delay:.28s}
        .live-memory { position:absolute; right:22px; bottom:19px; display:flex; align-items:center; gap:8px; color:#76767b; font-size:11px; opacity:0; animation:liveMemory .5s ease 3.7s forwards; }
        .live-memory i { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#22c55e; font-style:normal; font-size:10px; }
        @keyframes liveCopyIn { from { opacity:0; transform:translateY(18px); } }
        @keyframes liveAmbient { to { transform:translate(-30px,28px) scale(1.08); opacity:.72; } }
        @keyframes liveFloat { 50% { transform:translateY(-9px); box-shadow:0 38px 82px rgba(45,75,58,.17); } }
        @keyframes liveSheen { 0%,55% { transform:translateX(-110%); } 78%,100% { transform:translateX(110%); } }
        @keyframes liveMessage { to { opacity:1; transform:translateY(0) scale(1); } }
        @keyframes liveTyping { 0%,60%,100% { transform:translateY(0); opacity:.42; } 30% { transform:translateY(-3px); opacity:1; } }
        @keyframes liveMemory { to { opacity:1; transform:translateY(-4px); } }
        @media (max-width:900px) { .welcome-live .modern-welcome-main { grid-template-columns:1fr; gap:40px; padding-top:50px; }.welcome-live .modern-copy { text-align:center; }.welcome-live .modern-copy h1,.welcome-live .modern-copy>p { margin-right:auto; margin-left:auto; }.welcome-live .modern-actions,.welcome-live .modern-proof { justify-content:center; }.welcome-live .modern-visual { min-height:490px; justify-content:center; } }
        @media (max-width:520px) { body.welcome-mode #hero-page.hero-page { width:100%; padding:0; }.modern-welcome.welcome-live { width:100%; overflow-x:hidden; }.modern-welcome.welcome-live::before { width:420px; height:420px; right:-250px; top:40px; }.welcome-live .modern-welcome-nav { width:calc(100% - 32px); height:60px; }.welcome-live .modern-brand { font-size:15px; }.welcome-live .modern-brand-mark { width:28px; height:28px; }.welcome-live .modern-nav-login { height:34px; padding:0 15px; }.welcome-live .modern-welcome-main { width:calc(100% - 32px); min-height:auto; gap:27px; padding:30px 0 38px; }.welcome-live .modern-eyebrow { margin-bottom:14px; font-size:12px; }.welcome-live .modern-copy h1 { max-width:330px; font-size:36px; line-height:1.13; letter-spacing:-.045em; }.welcome-live .modern-copy>p { max-width:335px; margin:17px auto 21px; font-size:14px; line-height:1.65; }.welcome-live .modern-actions { flex-direction:column; gap:10px; }.welcome-live .modern-primary { width:100%; height:48px; }.welcome-live .modern-secondary { font-size:12px; }.welcome-live .modern-proof { display:none; }.welcome-live .modern-visual { width:100%; min-height:342px; }.live-chat { width:100%; min-height:342px; padding:19px 14px 16px; border-radius:20px; }.live-chat-head { margin-bottom:19px; }.live-avatar { width:36px; height:36px; border-radius:9px; }.live-chat-time { display:none; }.live-messages { gap:12px; }.live-mini-avatar { width:27px; height:27px; }.live-bubble { max-width:82%; padding:9px 11px; font-size:12px; line-height:1.52; }.live-typing { height:32px; }.live-memory { right:14px; bottom:10px; } }
        @media (max-width:360px) { .welcome-live .modern-copy h1 { font-size:32px; }.welcome-live .modern-welcome-main { width:calc(100% - 24px); }.welcome-live .modern-welcome-nav { width:calc(100% - 24px); }.live-chat { min-height:330px; }.live-bubble { font-size:11.5px; } }
        @media (prefers-reduced-motion:reduce) { .welcome-live * { animation:none !important; transition:none !important; }.live-message,.live-memory { opacity:1; transform:none; } }
        .welcome-login-mask { background:rgba(238,240,247,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
        .welcome-login-panel { border:1px solid rgba(255,255,255,.86); border-radius:26px; box-shadow:0 30px 80px rgba(70,78,130,.18); }
        .welcome-login-head h3::before { content:'●'; color:#22c55e; }
        .welcome-login-wechat { background:#07c160; }
        .welcome-login-phone:hover { border-color:#07c160; color:#079b4e; }
        .welcome-login-agreement input { accent-color:#07c160; }
        .welcome-login-agreement a { color:#079b4e; }
        .welcome-login-mask.auth-entry { position:fixed; inset:0; display:flex; align-items:center; padding:24px 18px; background:#F5F5F5; backdrop-filter:none; -webkit-backdrop-filter:none; }
        .welcome-login-mask.auth-entry .welcome-login-panel { width:min(100%,390px); max-height:none; padding:34px 26px 28px; border:0; border-radius:18px; box-shadow:0 8px 30px rgba(0,0,0,.055); }
        .welcome-login-mask.auth-entry .welcome-login-head { display:block; margin-bottom:28px; text-align:center; }
        .welcome-login-mask.auth-entry .welcome-login-head h3 { margin-bottom:8px; font-size:24px; }
        .welcome-login-mask.auth-entry .welcome-login-head h3::before { display:block; margin:0 0 10px; font-size:28px; }
        .welcome-login-mask.auth-entry .welcome-login-head p { font-size:14px; }
        .welcome-login-mask.auth-entry .welcome-login-close { display:none; }
        .welcome-login-mask.auth-entry .welcome-login-btn { min-height:48px; border-radius:9px; }
        .welcome-login-mask.auth-entry .welcome-login-wechat { background:#07C160; }
        .welcome-login-mask.auth-entry .welcome-field input { border-radius:8px; background:#F7F7F7; }
        .welcome-login-mask.auth-entry .welcome-code-btn { border-radius:8px; color:#576B95; }

        /* 2026 commercial H5 visual system: preserve structure, restyle only */
        :root {
            --app-bg: #F2F4F7;
            --app-surface: rgba(255,255,255,.82);
            --app-surface-solid: #FFFFFF;
            --app-text: #17181A;
            --app-muted: #858A92;
            --app-hairline: rgba(30,35,42,.08);
            --app-blue: #1677FF;
            --app-blue-soft: rgba(22,119,255,.09);
            --app-green: #16B364;
            --app-green-soft: rgba(22,179,100,.10);
            --app-shadow: 0 12px 34px rgba(28,39,55,.07);
            --app-radius: 20px;
        }
        body:not(.welcome-mode) { color:var(--app-text); background:var(--app-bg); }
        body:not(.welcome-mode) .page { background:var(--app-bg); }
        body:not(.welcome-mode) .header {
            height:64px; padding:calc(env(safe-area-inset-top) + 8px) 22px 8px;
            border-bottom:1px solid var(--app-hairline); background:rgba(248,249,251,.78);
            -webkit-backdrop-filter:saturate(165%) blur(22px); backdrop-filter:saturate(165%) blur(22px);
        }
        body:not(.welcome-mode) .header-title { color:#202226; font-size:17px; font-weight:650; letter-spacing:-.2px; }
        body:not(.welcome-mode) .header-btn { color:#202226!important; transition:transform .18s ease,opacity .18s ease; }
        body:not(.welcome-mode) .header-btn:active { opacity:.5; transform:scale(.86); }

        .chat-page { padding-bottom:92px; }
        .chat-page .chat-list-container { margin:12px 12px 0; padding:0 16px; border:1px solid rgba(255,255,255,.72); border-radius:var(--app-radius); background:var(--app-surface); box-shadow:var(--app-shadow); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
        .chat-page .chat-list-item { min-height:78px; padding:13px 0; transition:background .18s ease,transform .16s ease; }
        .chat-page .chat-list-item::after { left:64px; background:var(--app-hairline); }
        .chat-page .chat-list-item:active { background:rgba(120,128,140,.07); transform:scale(.992); }
        .chat-page .chat-list-item .chat-avatar { width:50px; height:50px; border-radius:15px; background:#E9EDF2; box-shadow:0 5px 15px rgba(29,39,52,.08); }
        .chat-page .chat-list-item .chat-avatar img { border-radius:15px; }
        .chat-page .chat-list-item .chat-name { margin-bottom:5px; color:var(--app-text); font-size:16px; font-weight:620; letter-spacing:-.1px; }
        .chat-page .chat-list-item .chat-preview { color:var(--app-muted); font-size:13px; }
        .chat-page .chat-list-item .chat-time { color:#A5A9AF; font-size:11px; }
        .chat-status-badge { color:var(--app-blue)!important; background:var(--app-blue-soft)!important; }
        .chat-page > .wechat-connection-card,.role-list-page > .wechat-connection-card { border:1px solid rgba(255,255,255,.72); border-radius:18px; background:var(--app-surface); box-shadow:var(--app-shadow); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
        .wechat-connection-icon { color:var(--app-green); background:var(--app-green-soft); }

        .page.activity-page { background:var(--app-bg); }
        .activity-content { padding:16px 14px 34px; }
        .activity-banner { min-height:142px; padding:26px 24px; border:1px solid rgba(255,255,255,.82); border-radius:22px; color:var(--app-text); background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,248,252,.82)); box-shadow:var(--app-shadow); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
        .activity-banner::after { width:154px; height:154px; right:-58px; top:-52px; border:26px solid rgba(22,119,255,.07); }
        .activity-banner h2 { margin-bottom:10px; font-size:23px; font-weight:700; letter-spacing:-.7px; }
        .activity-banner p { color:#737880; font-size:13px; line-height:1.7; }
        .activity-group-title { margin:24px 5px 9px; color:#8B9098; font-size:12px; }
        .activity-list { border:1px solid rgba(255,255,255,.75); border-radius:18px; background:var(--app-surface); box-shadow:0 8px 26px rgba(28,39,55,.045); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
        .activity-row { min-height:78px; padding:13px 15px; }
        .activity-row:active { background:rgba(120,128,140,.07); }
        .activity-row::after { left:68px; background:var(--app-hairline); }
        .activity-row-icon,.activity-row-icon.orange,.activity-row-icon.blue { width:40px; height:40px; color:#4F5660; background:rgba(105,115,128,.08); border-radius:13px; }
        .activity-row-copy b { color:var(--app-text); font-size:15px; font-weight:620; }
        .activity-row-copy span { color:var(--app-muted); }
        .activity-row-reward { color:var(--app-blue); font-weight:600; }

        .role-list-page { padding-bottom:100px; background:var(--app-bg); }
        #role-list-container { padding:0 12px; }
        .role-item { gap:13px; padding:16px; border:1px solid rgba(255,255,255,.76); border-radius:20px; background:var(--app-surface); box-shadow:0 9px 28px rgba(28,39,55,.055); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); transition:transform .18s ease,box-shadow .18s ease; }
        .role-item:active { transform:scale(.993); box-shadow:0 5px 18px rgba(28,39,55,.05); }
        .role-item .role-avatar,.role-item .role-avatar img { border-radius:16px; }
        .role-item .role-avatar { box-shadow:0 5px 16px rgba(28,39,55,.09); }
        .role-item .role-name { color:var(--app-text); font-weight:650; }
        .role-item .role-desc { color:var(--app-muted); }
        .role-item .role-status.active { color:var(--app-green); }
        .role-item .role-btn { min-height:39px; border-radius:12px; font-weight:600; }
        .role-item .role-setting-btn { color:#4F5864; border-color:rgba(79,88,100,.18); background:rgba(255,255,255,.65); }
        .role-item .role-toggle-btn.is-activate { color:#087A40; border-color:rgba(22,179,100,.20); background:var(--app-green-soft); }

        .page.profile-page { background:var(--app-bg); }
        .profile-page-content { padding:16px 14px 34px; }
        .profile-page .profile-card,.profile-page .vip-card,.profile-page .settings-list { border:1px solid rgba(255,255,255,.76); border-radius:20px; background:var(--app-surface); box-shadow:var(--app-shadow); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
        .profile-page .profile-card { min-height:112px; margin-bottom:14px; padding:20px 18px; }
        .profile-page .profile-avatar { width:68px; height:68px; }
        .profile-page .profile-name { color:var(--app-text); font-size:19px; font-weight:700; letter-spacing:-.3px; }
        .profile-page .profile-id { color:var(--app-muted); font-size:12px; }
        .profile-card-edit { color:var(--app-blue); }
        #profile-avatar-placeholder::after { background:var(--app-blue); }
        .profile-page .vip-card { margin-bottom:14px; padding:18px; }
        .profile-page .vip-icon { fill:#4F5660; }
        .profile-page .vip-btn { min-height:38px; padding:0 16px; border-radius:12px; color:var(--app-blue); background:var(--app-blue-soft); }
        .profile-page .settings-list { overflow:hidden; }
        .profile-page .settings-item { min-height:62px; padding:11px 17px; border-color:var(--app-hairline); transition:background .18s ease; }
        .profile-page .settings-item:active { background:rgba(120,128,140,.07); }
        .profile-page .settings-item .settings-icon-wrapper { color:#555D67; background:rgba(105,115,128,.08); border-radius:12px; }
        .profile-page .settings-badge { color:var(--app-blue); background:var(--app-blue-soft); }
        .profile-page .logout-btn { border:1px solid rgba(255,255,255,.76); border-radius:16px; background:rgba(255,255,255,.70); }

        .bottom-nav { left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); width:auto; height:64px; padding:7px 8px; border:1px solid rgba(255,255,255,.82); border-radius:22px; background:rgba(250,251,252,.78); box-shadow:0 12px 36px rgba(25,35,50,.12); -webkit-backdrop-filter:saturate(170%) blur(24px); backdrop-filter:saturate(170%) blur(24px); }
        .nav-item { border-radius:15px; transition:background .2s ease,transform .16s ease; }
        .nav-item:active { transform:scale(.94); }
        .nav-item.active { background:rgba(22,119,255,.08); }
        .nav-item svg.icon { width:23px; height:23px; stroke:#686D74; }
        .nav-item.active svg.icon { stroke:var(--app-blue); }
        .nav-item .label { color:#7D8289; font-size:10px; }
        .nav-item.active .label { color:var(--app-blue); font-weight:600; }
        .floating-action-group { right:12px!important; bottom:92px!important; gap:9px!important; }
        .fab-btn { min-width:76px; height:44px; border:1px solid rgba(255,255,255,.84)!important; border-radius:15px!important; background:rgba(255,255,255,.80)!important; box-shadow:0 10px 28px rgba(28,39,55,.10)!important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
        .fab-btn.service { color:var(--app-green)!important; }
        .fab-btn.refund { color:#68707A!important; }

        .page.active .chat-list-item,.page.active .activity-row,.page.active .role-item,.page.active .profile-card,.page.active .vip-card,.page.active .settings-list { animation:companionIn .36s cubic-bezier(.22,.8,.32,1) both; }
        .page.active .activity-list:nth-of-type(2),.page.active .vip-card { animation-delay:.04s; }
        .page.active .settings-list,.page.active .role-item:nth-child(2),.page.active .chat-list-item:nth-child(2) { animation-delay:.07s; }
        @keyframes companionIn { from { opacity:0; transform:translateY(8px) scale(.992); } to { opacity:1; transform:none; } }
        @media (max-width:520px) {
            body:not(.welcome-mode) .header { height:60px; padding-right:18px; padding-left:18px; }
            .chat-page .chat-list-container { margin-right:10px; margin-left:10px; }
            .activity-content,.profile-page-content { padding-right:12px; padding-left:12px; }
            #role-list-container { padding-right:10px; padding-left:10px; }
            .bottom-nav { left:8px; right:8px; bottom:calc(6px + env(safe-area-inset-bottom)); }
        }
        @media (min-width:768px) {
            .bottom-nav { left:50%; right:auto; width:min(680px,calc(100% - 40px)); transform:translateX(-50%); }
            .chat-page .chat-list-container,.activity-content,#role-list-container,.profile-page-content { max-width:720px; }
            .role-item { padding:20px; }
        }
        @media (prefers-reduced-motion:reduce) { .page.active * { animation:none!important; transition:none!important; } }

        /* V2: iOS native rhythm — glass belongs to chrome, not every content block */
        body:not(.welcome-mode),body:not(.welcome-mode) .page { background:#F2F2F7; }
        body:not(.welcome-mode) .header { height:58px; border-bottom:0; background:rgba(249,249,251,.78); }
        body:not(.welcome-mode) .header-title { font-size:17px; font-weight:650; }
        .chat-page .chat-list-container { margin:0; padding:0 16px; border:0; border-radius:0; background:#fff; box-shadow:none; backdrop-filter:none; }
        .chat-page .chat-list-item { min-height:76px; }
        .chat-page .chat-list-item .chat-avatar { border-radius:14px; box-shadow:none; }
        .chat-page .chat-list-item .chat-avatar img { border-radius:14px; }
        .chat-page > #chat-wechat-connection-card { display:none!important; }
        .chat-page .empty-state { min-height:calc(100svh - 150px); background:#fff; }
        .chat-page .empty-icon { font-size:0; }
        .chat-page .empty-icon::before { content:''; display:block; width:62px; height:62px; margin:auto; border:1.5px solid #C8CCD2; border-radius:22px; background:linear-gradient(#fff,#F7F8FA); }

        .activity-content { padding:18px 16px 32px; }
        .activity-banner { min-height:132px; padding:24px 22px; border:0; border-radius:18px; background:#fff; box-shadow:none; backdrop-filter:none; }
        .activity-banner::after { width:130px; height:130px; border-width:22px; border-color:rgba(0,122,255,.055); }
        .activity-banner h2 { font-size:22px; }
        .activity-list { border:0; border-radius:14px; background:#fff; box-shadow:none; backdrop-filter:none; }
        .activity-row-icon,.activity-row-icon.orange,.activity-row-icon.blue { color:#4D535C; background:#F2F2F7; border-radius:11px; }

        .role-list-page > #wechat-connection-card { margin:18px 16px 0; }
        #role-list-container { margin-top:14px!important; padding:0 16px; }
        .role-item { margin-bottom:10px; padding:14px; border:0; border-radius:16px; background:#fff; box-shadow:none; backdrop-filter:none; }
        .role-item .role-actions { margin-top:10px; }

        .profile-page-content { padding:18px 16px 32px; }
        .profile-page .profile-card,.profile-page .vip-card,.profile-page .settings-list { border:0; border-radius:16px; background:#fff; box-shadow:none; backdrop-filter:none; }
        .profile-page .profile-card { min-height:106px; }
        .profile-page .vip-card { padding:17px; }
        .profile-page .settings-item .settings-icon-wrapper { background:#F2F2F7; }
        .profile-page .logout-btn { border:0; background:#fff; }
        .profile-wechat-card { margin:0 0 14px!important; border:0!important; border-radius:16px!important; background:#fff!important; box-shadow:none!important; backdrop-filter:none!important; }
        .floating-action-group { display:none!important; }

        .bottom-nav { left:0; right:0; bottom:0; height:calc(62px + env(safe-area-inset-bottom)); padding:6px 8px env(safe-area-inset-bottom); border:0; border-top:1px solid rgba(60,60,67,.10); border-radius:0; background:rgba(249,249,251,.82); box-shadow:none; }
        .nav-item.active { background:transparent; }
        .nav-item.active svg.icon { stroke:#07C160; }
        .nav-item.active .label { color:#07C160; }
        @media (min-width:768px) { .bottom-nav { left:50%; right:auto; bottom:14px; width:min(680px,calc(100% - 40px)); height:64px; padding:7px 10px; border:1px solid rgba(255,255,255,.82); border-radius:21px; box-shadow:0 12px 34px rgba(25,35,50,.11); transform:translateX(-50%); } }

        .modern-welcome.welcome-live { --green:#07C160; min-height:100svh; background:#fff; }
        .modern-welcome.welcome-live::before { width:560px; height:560px; right:-300px; top:70px; background:radial-gradient(circle,rgba(0,122,255,.055),transparent 68%); }
        .welcome-live .modern-welcome-nav { height:72px; }
        .welcome-live .modern-brand-mark { background:#111; box-shadow:none; }
        .welcome-live .modern-nav-login { color:#111; border-color:#D9D9DE; background:rgba(255,255,255,.78); }
        .welcome-live .modern-welcome-main { max-width:1120px; gap:72px; }
        .welcome-live .modern-eyebrow { color:#777; }
        .welcome-live .modern-eyebrow-dot { background:#07C160; }
        .welcome-live .modern-copy h1 { max-width:540px; color:#111; font-size:clamp(48px,6vw,78px); line-height:1.02; letter-spacing:-.06em; }
        .welcome-live .modern-copy h1 span { color:#111; }
        .welcome-live .modern-copy>p { max-width:500px; color:#6E6E73; font-size:17px; line-height:1.7; }
        .welcome-live .modern-primary { min-width:168px; height:50px; border-radius:980px; background:#007AFF; box-shadow:none; }
        .welcome-live .modern-primary:hover { background:#006EDF; box-shadow:none; }
        .welcome-live .modern-proof { color:#777; }
        .welcome-live .modern-proof i { background:#007AFF; }
        .live-chat { border:1px solid rgba(0,0,0,.06); border-radius:30px; background:rgba(247,247,249,.88); box-shadow:0 28px 70px rgba(30,40,55,.10); }
        .live-avatar,.live-mini-avatar { background:#111; }
        .live-bubble { border:0; background:#fff; box-shadow:0 3px 12px rgba(30,40,55,.055); }
        .live-message.user .live-bubble { color:#111; background:#95EC69; }
        .live-memory { color:#6E6E73; background:rgba(255,255,255,.78); }
        .live-memory i { color:#fff; background:#07C160; }
        @media(max-width:520px) {
            .welcome-live .modern-welcome-nav { height:64px; }
            .welcome-live .modern-welcome-main { gap:30px; padding-top:36px; }
            .welcome-live .modern-copy h1 { max-width:350px; font-size:42px; line-height:1.06; }
            .welcome-live .modern-copy>p { font-size:15px; }
            .welcome-live .modern-primary { border-radius:14px; }
            .live-chat { border-radius:24px; box-shadow:0 20px 48px rgba(30,40,55,.09); }
        }

        /* 全局 iOS 中性色：绿色仅作为导航、在线、成功等语义状态。 */
        :root { --moon-bg:#F2F2F7; --moon-surface:#FFFFFF; --moon-ink:#1D1D1F; --moon-muted:#8E8E93; --moon-jade:#07C160; --moon-jade-deep:#2C2C2E; --moon-jade-soft:#EDF8F2; --moon-line:rgba(60,60,67,.11); --moon-amber:#A66F28; --moon-amber-soft:#F7EEDC; }
        body:not(.welcome-mode),body:not(.welcome-mode) .page { color:var(--moon-ink); background:var(--moon-bg); }
        body:not(.welcome-mode) .header { border-bottom:1px solid rgba(60,60,67,.08); background:rgba(248,248,250,.82); }
        body:not(.welcome-mode) .header-title { color:var(--moon-ink); }
        .chat-page .chat-list-container,.chat-page .empty-state,.activity-banner,.activity-list,.role-item,.profile-page .profile-card,.profile-page .vip-card,.profile-page .settings-list,.profile-page .logout-btn,.profile-wechat-card { background:var(--moon-surface)!important; }
        .chat-page .chat-list-item::after,.activity-row::after,.profile-page .settings-item { border-color:var(--moon-line); }
        .chat-page .chat-list-item .chat-name,.activity-row-copy b,.role-item .role-name,.profile-page .profile-name { color:var(--moon-ink); }
        .chat-page .chat-list-item .chat-preview,.activity-row-copy span,.role-item .role-desc,.profile-page .profile-id { color:var(--moon-muted); }
        .chat-page .chat-list-item .chat-avatar { background:#ECECF0; }
        .activity-banner { position:relative; overflow:hidden; }
        .activity-banner::before { content:''; position:absolute; width:92px; height:92px; right:34px; bottom:-48px; border-radius:50%; background:rgba(120,120,128,.06); }
        .activity-banner::after { border-color:rgba(120,120,128,.07); }
        .activity-row-icon,.activity-row-icon.orange,.activity-row-icon.blue,.profile-page .settings-item .settings-icon-wrapper { color:#626267; background:#EFEFF2; }
        .activity-row-reward,.profile-page .settings-badge { color:var(--moon-amber); background:var(--moon-amber-soft); }
        .role-item .role-toggle-btn.is-activate { color:#146C46; border-color:rgba(32,166,106,.18); background:var(--moon-jade-soft); }
        .profile-page .vip-card { position:relative; overflow:hidden; border:1px solid rgba(60,60,67,.08); }
        .profile-page .vip-card::after { content:''; position:absolute; width:108px; height:108px; right:-52px; top:-52px; border:20px solid rgba(120,120,128,.045); border-radius:50%; pointer-events:none; }
        .profile-page .vip-btn { color:#fff; background:var(--moon-jade-deep); }
        .profile-page .vip-btn:hover { background:#48484A; }
        .profile-card-edit { color:#6E6E73; }
        #profile-avatar-placeholder::after { background:#48484A; }
        .bottom-nav { border-top-color:rgba(60,60,67,.11); background:rgba(248,248,250,.86); }
        .nav-item.active svg.icon { stroke:var(--moon-jade); }
        .nav-item.active .label { color:var(--moon-jade); }
        .modern-welcome.welcome-live { background:#F8FCFA; }
        .modern-welcome.welcome-live::before { background:radial-gradient(circle,rgba(32,166,106,.09),transparent 68%); }
        .welcome-live .modern-brand-mark,.live-avatar,.live-mini-avatar { background:var(--moon-jade-deep); }
        .welcome-live .modern-copy h1,.welcome-live .modern-copy h1 span { color:var(--moon-ink); }
        .welcome-live .modern-copy>p,.welcome-live .modern-eyebrow,.welcome-live .modern-proof { color:var(--moon-muted); }
        .welcome-live .modern-primary { background:var(--moon-jade-deep); }
        .welcome-live .modern-primary:hover { background:#102F26; }
        .welcome-live .modern-proof i { background:var(--moon-jade); }
        .live-chat { border-color:rgba(36,67,54,.08); background:rgba(241,246,244,.92); box-shadow:0 28px 70px rgba(24,62,50,.11); }
        .live-bubble { background:var(--moon-surface); }
        .live-message.user .live-bubble { background:#A7E9BD; }

        /* 未登录消息页：保留应用结构，用轻量引导替代独立欢迎页。 */
        .guest-chat-entry { --guest-accent:#078744; --guest-soft:#eaf6ee; --guest-text:#202622; --guest-muted:#69746d; display:none; min-height:calc(100dvh - 136px - env(safe-area-inset-bottom)); padding:28px 18px; place-items:center; }
        body.guest-mode .guest-chat-entry { display:grid; }
        body.guest-mode,
        body.guest-mode .page.chat-page { background:#f6f7f8!important; }
        body.guest-mode .chat-page > .header { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; border-bottom:1px solid #eef0f2; background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
        body.guest-mode .chat-page > .header .header-title { grid-column:2; text-align:center; }
        body.guest-mode .bottom-nav { border-top-color:#e6e9e7; background:#fafbfa; -webkit-backdrop-filter:none; backdrop-filter:none; }
        body.guest-mode .nav-item.active svg.icon { stroke:#07C160; }
        body.guest-mode .nav-item.active .label { color:#078744; }
        body.guest-mode #chat-list-container,
        body.guest-mode #chat-wechat-connection-card,
        body.guest-mode .chat-page .header-btn { display:none!important; }
        .guest-chat-card { position:relative; width:min(100%,420px); min-width:0; overflow:hidden; padding:26px 24px 22px; border:1px solid #e8ede9; border-radius:20px; background:#fff; box-shadow:0 4px 18px rgba(26,54,38,.035); text-align:center; }
        .guest-chat-card::before { content:none; }
        .guest-brand-icon { position:relative; width:56px; height:56px; margin:0 auto 18px; display:grid; place-items:center; border:1px solid #d9eddf; border-radius:16px; color:var(--guest-accent); background:var(--guest-soft); }
        .guest-brand-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
        .guest-chat-card h2 { position:relative; max-width:300px; margin:0 auto 10px; color:var(--guest-text); font-size:21px; line-height:1.5; letter-spacing:0; text-wrap:balance; }
        .guest-chat-card > p { position:relative; max-width:310px; margin:0 auto 20px; color:var(--guest-muted); font-size:14px; line-height:1.75; }
        .guest-conversation { position:relative; display:grid; gap:10px; margin:0 0 20px; padding:14px; border:1px solid #edf1ee; border-radius:14px; background:#f7f9f8; text-align:left; }
        .guest-bubble { width:fit-content; max-width:90%; padding:9px 12px; border-radius:12px 12px 12px 4px; color:#4f5d54; background:#fff; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
        .guest-bubble.user { justify-self:end; border-radius:12px 12px 4px 12px; color:#28603e; background:#e0f2e6; }
        .guest-login-btn { position:relative; width:100%; min-height:48px; padding:12px; border:0; border-radius:12px; color:#fff; background:var(--guest-accent); box-shadow:none; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; }
        .guest-login-btn:active { background:#066d37; }
        html body .guest-login-btn:focus-visible { outline:2px solid var(--guest-accent); outline-offset:3px; }
        .guest-login-note { margin:12px auto 0!important; color:var(--guest-muted)!important; font-size:12px!important; line-height:1.6!important; }
        @media (max-width:520px) { .guest-chat-entry { min-height:calc(100dvh - 124px - env(safe-area-inset-bottom)); padding:20px 14px; }.guest-chat-card { padding:24px 18px 20px; }.guest-chat-card h2 { font-size:20px; } }

        /* 消息首页以微信会话页为基准：中性灰顶栏、纯白内容、绿色仅作状态色。 */
        body:not(.guest-mode):has(.chat-page.active),
        body:not(.guest-mode):has(.chat-page.active) #app-container { background:#FFFFFF!important; }
        body:not(.guest-mode) .page.chat-page { min-height:100dvh; padding-bottom:calc(68px + env(safe-area-inset-bottom)); background:#FFFFFF!important; }
        body:not(.guest-mode) .chat-page > .header { border-bottom:1px solid rgba(0,0,0,.055); background:#EDEDED!important; -webkit-backdrop-filter:none; backdrop-filter:none; }
        body:not(.guest-mode) .chat-page .chat-list-container,
        body:not(.guest-mode) .chat-page .empty-state { background:#FFFFFF!important; }
        body:not(.guest-mode) .chat-page .chat-list-container { margin:0; padding:0 16px; border:0; border-radius:0; box-shadow:none; }
        body:not(.guest-mode) .chat-page .chat-list-item { min-height:76px; background:#FFFFFF; }
        body:not(.guest-mode) .chat-page .chat-list-item::after { left:62px; background:rgba(0,0,0,.10); }
        body:not(.guest-mode) .chat-page .chat-list-item:active { background:#F2F2F2; }
        body:not(.guest-mode):has(.chat-page.active) .bottom-nav { border-top:1px solid rgba(0,0,0,.10); background:rgba(248,248,248,.96)!important; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
        body:not(.guest-mode):has(.chat-page.active) .nav-item.active svg.icon { stroke:#07C160; }
        body:not(.guest-mode):has(.chat-page.active) .nav-item.active .label { color:#07C160; }

        /* 我的页：iOS 中性毛玻璃，绿色仅保留导航和微信状态。 */
        body:has(.profile-page.active),
        body:has(.profile-page.active) #app-container { background:#F2F2F7!important; }
        .page.profile-page { min-height:100dvh; padding-bottom:calc(82px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 92% 3%,rgba(210,203,207,.20),transparent 30%),#F2F2F7!important; }
        .profile-page > .header { border-bottom:1px solid rgba(54,51,53,.07); background:rgba(248,248,250,.72)!important; -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%); }
        .profile-page-content { padding:16px 14px 32px; }
        .profile-page .profile-card,
        .profile-page .vip-card,
        .profile-page .settings-list,
        .profile-page .profile-wechat-card,
        .profile-page .logout-btn { border:1px solid rgba(255,255,255,.82)!important; background:rgba(255,255,255,.72)!important; box-shadow:0 10px 34px rgba(42,39,41,.065)!important; -webkit-backdrop-filter:blur(24px) saturate(125%)!important; backdrop-filter:blur(24px) saturate(125%)!important; }
        .profile-page .profile-card { min-height:108px; margin-bottom:13px; padding:19px 17px; border-radius:22px!important; }
        .profile-page .profile-avatar { width:64px; height:64px; }
        .profile-page .profile-avatar-placeholder { background-color:rgba(245,245,247,.88); }
        .profile-page #profile-avatar-placeholder::after { color:#FFFFFF; background:#4A4A4F; }
        .profile-page .profile-name { color:#1D1D1F!important; font-size:18px; font-weight:680; }
        .profile-page .profile-id { margin-top:8px; color:#8A8A90!important; }
        .profile-page .profile-card-edit { color:#6E6E73!important; font-weight:520; }
        .profile-page .vip-card { margin-bottom:13px; padding:18px 17px; overflow:hidden; border-radius:22px!important; }
        .profile-page .vip-card::after { display:none!important; }
        .profile-page .vip-icon { fill:#48484A!important; }
        .profile-page .vip-title,
        .profile-page .vip-item-value,
        .profile-page .vip-info-value { color:#2C2C2E!important; }
        .profile-page .vip-info-label,
        .profile-page .vip-desc { color:#98989D!important; }
        .profile-page .vip-info-divider,
        .profile-page .vip-footer { border-color:rgba(60,60,67,.10)!important; }
        .profile-page .vip-btn { min-height:38px; padding:0 17px; border:0; border-radius:12px; color:#FFFFFF!important; background:#2C2C2E!important; box-shadow:0 6px 15px rgba(28,28,30,.14); }
        .profile-page .vip-btn:active { background:#48484A!important; transform:scale(.97); }
        .profile-page .settings-list { margin-bottom:13px; overflow:hidden; border-radius:22px!important; }
        .profile-page .settings-item,
        .profile-page .agent-settings-item { min-height:60px; padding:10px 16px; border-color:rgba(60,60,67,.10)!important; background:transparent!important; }
        .profile-page .settings-item:active { background:rgba(120,120,128,.08)!important; }
        .profile-page .settings-label { color:#2C2C2E; font-weight:530; }
        .profile-page .settings-arrow { color:#C4C4C8; }
        .profile-page .settings-item .settings-icon-wrapper { width:35px; height:35px; border-radius:11px; color:#55565A; background:#F0F0F3!important; }
        .profile-page .settings-item:nth-child(1) .settings-icon-wrapper { color:#6E6570; background:#F2EDF2!important; }
        .profile-page .settings-item:nth-child(2) .settings-icon-wrapper { color:#8A6B3D; background:#F5F0E7!important; }
        .profile-page .settings-item:nth-child(3) .settings-icon-wrapper { color:#59677A; background:#EDF1F6!important; }
        .profile-page .settings-item:nth-child(4) .settings-icon-wrapper { color:#67706C; background:#EEF2F0!important; }
        .profile-page .settings-item:nth-child(5) .settings-icon-wrapper { color:#795F63; background:#F3ECEE!important; }
        .profile-page .settings-item:nth-child(6) .settings-icon-wrapper { color:#5E6570; background:#EFF0F3!important; }
        .profile-page .settings-item:nth-child(7) .settings-icon-wrapper { color:#756A59; background:#F3F0EA!important; }
        .profile-page .settings-badge { color:#A66F28!important; background:#F7EEDC!important; }
        .profile-page .logout-btn { min-height:52px; border-radius:18px!important; color:#D84B4B; }
        body:has(.profile-page.active) .bottom-nav { border-top:1px solid rgba(60,60,67,.11); background:rgba(248,248,250,.82)!important; -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%); }
        body:has(.profile-page.active) .nav-item:not(.active) svg.icon { stroke:#69696F; }
        body:has(.profile-page.active) .nav-item:not(.active) .label { color:#85858A; }
        body:has(.profile-page.active) .nav-item.active svg.icon { stroke:#07C160; }
        body:has(.profile-page.active) .nav-item.active .label { color:#07C160; }
        @media (min-width:768px) { .profile-page-content { padding-top:24px; } }

        /* 我的页精修：更明确的主次关系、光感与玻璃深度。 */
        .profile-page-content { position:relative; max-width:560px; }
        .profile-page-content::before { content:''; position:absolute; z-index:0; width:240px; height:240px; top:-70px; right:-95px; border-radius:50%; background:radial-gradient(circle,rgba(196,182,164,.18),rgba(196,182,164,0) 70%); pointer-events:none; }
        .profile-page-content > * { position:relative; z-index:1; }
        .profile-page .profile-card { isolation:isolate; overflow:hidden; min-height:124px; padding:23px 20px; border-radius:26px!important; background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.62))!important; box-shadow:0 18px 44px rgba(37,34,35,.085),inset 0 1px 0 rgba(255,255,255,.9)!important; }
        .profile-page .profile-card::before { content:''; position:absolute; z-index:-1; width:150px; height:150px; right:-55px; top:-72px; border-radius:50%; background:radial-gradient(circle,rgba(201,188,171,.22),transparent 68%); }
        .profile-page .profile-card::after { content:''; position:absolute; z-index:-1; width:94px; height:94px; left:36px; bottom:-70px; border-radius:50%; background:rgba(232,227,222,.32); filter:blur(10px); }
        .profile-page .profile-avatar { width:70px; height:70px; border-radius:24px; box-shadow:0 10px 24px rgba(36,33,34,.09); }
        .profile-page .profile-avatar-placeholder { border-radius:24px; background-color:rgba(247,247,249,.92); background-size:31px 31px; }
        .profile-page #profile-avatar-placeholder::after { right:-5px; bottom:-4px; width:23px; height:23px; border-width:3px; background:#333336; box-shadow:0 3px 9px rgba(28,28,30,.22); }
        .profile-page .profile-info { min-width:0; }
        .profile-page .profile-title-row { gap:12px; }
        .profile-page .profile-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px!important; letter-spacing:-.025em; }
        .profile-page .profile-card-edit { min-height:34px; padding:0 2px 0 10px; color:#6E6E73!important; font-size:12px; }
        .profile-page .profile-id { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; font-size:11px; letter-spacing:.01em; }
        .profile-page .vip-card { padding:20px; border-radius:26px!important; background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(248,246,243,.68))!important; box-shadow:0 16px 40px rgba(46,40,35,.07),inset 0 1px 0 rgba(255,255,255,.92)!important; }
        .profile-page .vip-header { margin-bottom:16px; }
        .profile-page .vip-icon { width:22px; height:22px; padding:4px; overflow:visible; color:#8B7658; fill:#8B7658!important; filter:drop-shadow(0 3px 8px rgba(139,118,88,.16)); }
        .profile-page .vip-title { font-size:16px; font-weight:680; letter-spacing:-.01em; }
        .profile-page .vip-info { padding:15px 0; border-top:1px solid rgba(60,60,67,.08); border-bottom:1px solid rgba(60,60,67,.08); }
        .profile-page .vip-item-value,
        .profile-page .vip-info-value { font-size:17px; font-weight:720; }
        .profile-page .vip-footer { padding-top:15px; }
        .profile-page .vip-btn { min-height:40px; border-radius:13px; background:linear-gradient(180deg,#363638,#242426)!important; box-shadow:0 8px 20px rgba(28,28,30,.19),inset 0 1px 0 rgba(255,255,255,.13); }
        .profile-page .settings-group-title { margin:19px 7px 8px; color:#8E8E93; font-size:11px; font-weight:600; letter-spacing:.08em; }
        .profile-page .settings-list { border-radius:24px!important; background:rgba(255,255,255,.70)!important; box-shadow:0 14px 38px rgba(42,39,41,.06),inset 0 1px 0 rgba(255,255,255,.9)!important; }
        .profile-page .settings-list-benefits { margin-bottom:0; }
        .profile-page .settings-list-support { margin-bottom:15px; }
        .profile-page .settings-item,
        .profile-page .agent-settings-item { min-height:61px; padding:11px 17px; }
        .profile-page .settings-item .settings-icon-wrapper { width:36px; height:36px; border:1px solid rgba(255,255,255,.82); border-radius:12px; box-shadow:0 4px 12px rgba(42,39,41,.045),inset 0 1px 0 rgba(255,255,255,.88); }
        .profile-page .settings-list-benefits .settings-item:nth-child(1) .settings-icon-wrapper { color:#776A59; background:#F1EDE7!important; }
        .profile-page .settings-list-benefits .settings-item:nth-child(2) .settings-icon-wrapper { color:#8B6B37; background:#F6EFE1!important; }
        .profile-page .settings-list-benefits .settings-item:nth-child(3) .settings-icon-wrapper { color:#5D626B; background:#EEF0F3!important; }
        .profile-page .settings-list-support .settings-icon-wrapper { color:#616267!important; background:#F1F1F3!important; }
        .profile-page .settings-label { font-size:14px; letter-spacing:-.005em; }
        .profile-page .settings-badge { padding:3px 9px; border-radius:999px; font-size:10px; }
        .profile-page .logout-btn { margin-top:4px; border-radius:20px!important; background:rgba(255,255,255,.66)!important; box-shadow:0 12px 34px rgba(42,39,41,.05),inset 0 1px 0 rgba(255,255,255,.86)!important; font-weight:580; }
        @media (max-width:390px) { .profile-page-content { padding-right:11px; padding-left:11px; }.profile-page .profile-card { padding:20px 17px; }.profile-page .profile-avatar { width:64px; height:64px; }.profile-page .profile-name { font-size:18px!important; } }

        /* 消息页无角色状态：微信式留白 + iOS 玻璃图标。 */
        .chat-page .role-empty-state { min-height:calc(100dvh - 130px); margin:0 -16px; padding:clamp(82px,17vh,154px) 28px 100px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:#FFFFFF!important; }
        .role-empty-visual { position:relative; width:74px; height:74px; margin-bottom:22px; }
        .role-empty-visual::before { content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,.94); border-radius:24px; background:linear-gradient(145deg,rgba(250,250,252,.98),rgba(231,231,236,.82)); box-shadow:0 13px 30px rgba(40,40,43,.09),inset 0 1px 0 #fff; }
        .role-empty-visual::after { content:''; position:absolute; z-index:3; width:18px; height:18px; right:-3px; bottom:5px; border:3px solid #fff; border-radius:50%; background:#2C2C2E; box-shadow:0 5px 12px rgba(28,28,30,.18); }
        .role-empty-visual svg { position:absolute; z-index:2; width:32px; height:32px; left:21px; top:21px; fill:none; stroke:#55555A; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
        .role-empty-state .empty-title { margin:0; color:#2C2C2E; font-size:19px; font-weight:680; letter-spacing:-.02em; }
        .role-empty-state .empty-desc { max-width:280px; margin:9px auto 0; color:#929298; font-size:13px; line-height:1.65; }
        .role-empty-action { width:min(100%,220px); min-height:48px; margin-top:25px; border:0; border-radius:15px; color:#FFFFFF; background:linear-gradient(180deg,#3A3A3C,#272729); box-shadow:0 10px 24px rgba(28,28,30,.17),inset 0 1px 0 rgba(255,255,255,.13); font-size:14px; font-weight:650; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease; }
        .role-empty-action:active { transform:scale(.98); box-shadow:0 5px 15px rgba(28,28,30,.14); }
        .role-empty-note { margin-top:13px; color:#B0B0B5; font-size:11px; }
        @media (max-height:680px) { .chat-page .role-empty-state { padding-top:64px; }.role-empty-visual { transform:scale(.9); margin-bottom:15px; } }

        /* 角色页：角色收藏卡，移动端单列、桌面端双列。 */
        body:has(.roles-page.active),
        body:has(.roles-page.active) #app-container { background:#F2F2F7!important; }
        .page.role-list-page { min-height:100dvh; padding:0 14px calc(88px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 88% 2%,rgba(208,201,195,.17),transparent 28%),#F2F2F7!important; }
        .role-list-page > .header { margin:0 -14px; padding:0 18px; border-bottom:1px solid rgba(60,60,67,.08); background:rgba(248,248,250,.78)!important; -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%); }
        .role-list-page > .header .header-btn { color:#2C2C2E!important; }
        .role-list-container { width:min(100%,760px); margin:16px auto 0; display:grid; grid-template-columns:minmax(0,1fr); gap:13px; }
        .role-item { position:relative; isolation:isolate; min-width:0; margin:0!important; padding:17px!important; gap:15px!important; overflow:hidden; border:1px solid rgba(255,255,255,.86)!important; border-radius:24px!important; background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.68))!important; box-shadow:0 14px 36px rgba(42,39,41,.07),inset 0 1px 0 rgba(255,255,255,.92)!important; -webkit-backdrop-filter:blur(22px) saturate(125%)!important; backdrop-filter:blur(22px) saturate(125%)!important; }
        .role-item::before { content:''; position:absolute; z-index:-1; width:116px; height:116px; top:-72px; right:-48px; border-radius:50%; background:radial-gradient(circle,rgba(205,195,183,.16),transparent 70%); pointer-events:none; }
        .role-item:active { transform:scale(.99); box-shadow:0 8px 24px rgba(42,39,41,.06)!important; }
        .role-item .role-avatar { width:66px!important; height:66px!important; border:1px solid rgba(255,255,255,.9); border-radius:21px!important; background:linear-gradient(145deg,#F6F6F8,#E8E8EC)!important; box-shadow:0 10px 24px rgba(38,36,37,.09),inset 0 1px 0 #fff!important; }
        .role-item .role-avatar img { border-radius:20px!important; }
        .role-item .role-avatar-placeholder { width:100%; height:100%; display:grid; place-items:center; color:#66666B; font-size:21px; font-weight:680; }
        .role-item .role-info { display:flex; flex-direction:column; min-height:96px; }
        .role-item .role-top { margin:1px 0 7px; gap:8px; }
        .role-item .role-name { color:#1D1D1F!important; font-size:17px; font-weight:700; letter-spacing:-.02em; }
        .role-item .role-status { padding:4px 8px; border-radius:999px; font-size:10px; font-weight:620; }
        .role-item .role-status::before { width:5px; height:5px; }
        .role-item .role-status.active { color:#078A47; background:#EAF7F0; }
        .role-item .role-status.inactive { color:#8E8E93; background:#EFEFF2; }
        .role-item .role-desc { min-height:38px; color:#89898F!important; font-size:12px; line-height:1.58; -webkit-line-clamp:2; }
        .role-item .role-actions { justify-content:flex-start; gap:9px; margin-top:13px; }
        .role-item .role-btn { min-width:0; min-height:36px; padding:7px 13px; border-radius:11px; font-size:11px; font-weight:620; }
        .role-item .role-setting-btn { color:#5A6574; border-color:rgba(126,142,162,.18); background:rgba(255,255,255,.50); box-shadow:0 5px 16px rgba(77,91,108,.07),inset 0 1px 0 rgba(255,255,255,.98); -webkit-backdrop-filter:blur(16px) saturate(145%); backdrop-filter:blur(16px) saturate(145%); }
        .role-item .role-toggle-btn.is-chat { color:#FFFFFF; border-color:#1677E8; background:#1677E8; box-shadow:0 6px 15px rgba(22,119,232,.16); -webkit-backdrop-filter:none; backdrop-filter:none; }
        .role-item .role-toggle-btn.is-chat:active { background:#0F6DD8; transform:scale(.97); }
        .role-item .role-toggle-btn.is-deactivate { color:#7C5C60; border-color:rgba(124,92,96,.12); background:#F5EEEE; box-shadow:none; }
        body:has(.roles-page.active) .bottom-nav { border-top:1px solid rgba(60,60,67,.11); background:rgba(248,248,250,.84)!important; -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%); }
        body:has(.roles-page.active) .nav-item.active svg.icon { stroke:#07C160; }
        body:has(.roles-page.active) .nav-item.active .label { color:#07C160; }
        @media (min-width:760px) { .page.role-list-page { padding-right:24px; padding-left:24px; }.role-list-page > .header { margin-right:-24px; margin-left:-24px; }.role-list-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:24px; }.role-item { padding:19px!important; } }
        @media (max-width:390px) { .page.role-list-page { padding-right:10px; padding-left:10px; }.role-list-page > .header { margin-right:-10px; margin-left:-10px; }.role-item { padding:15px!important; gap:12px!important; }.role-item .role-avatar { width:60px!important; height:60px!important; }.role-item .role-actions { gap:7px; }.role-item .role-btn { padding-right:11px; padding-left:11px; } }

        /* 主应用外壳：手机端占满视口，消除 420px 容器造成的两侧白边。 */
        @media (max-width:767px) {
            #app-container.container { width:100%; max-width:none; margin:0; border:0; border-radius:0; }
        }

        /* 统一悬浮毛玻璃 Dock，覆盖旧版贴底通栏导航。 */
        #bottom-nav.bottom-nav { left:12px; right:12px; bottom:calc(9px + env(safe-area-inset-bottom)); width:auto; height:64px; padding:7px 8px; border:1px solid rgba(255,255,255,.78); border-radius:22px; background:rgba(248,248,250,.68)!important; box-shadow:0 12px 34px rgba(28,28,30,.13),inset 0 1px 0 rgba(255,255,255,.88); -webkit-backdrop-filter:blur(28px) saturate(165%); backdrop-filter:blur(28px) saturate(165%); }
        #bottom-nav .nav-item { min-height:48px; padding:4px 0 3px; border-radius:15px; }
        #bottom-nav .nav-item:active { background:rgba(120,120,128,.08); }
        #bottom-nav .nav-item svg.icon { width:23px; height:23px; margin-bottom:1px; }
        #bottom-nav .nav-item .label { font-size:10px; }
        @media (min-width:768px) { #bottom-nav.bottom-nav { left:50%; right:auto; bottom:16px; width:min(680px,calc(100% - 48px)); transform:translateX(-50%); } }

        /* 我的页最终布局：微信式通栏信息分组，不使用小卡片面板。 */
        .page.profile-page { padding:0 0 calc(94px + env(safe-area-inset-bottom)); background:#F2F2F7!important; }
        .profile-page > .header { display:none; }
        .profile-page-content { width:100%; max-width:none; margin:0; padding:0; }
        .profile-page-content::before { display:none; }
        .profile-page .profile-card { width:100%; min-height:186px; margin:0 0 10px; padding:46px 24px 28px; display:grid; grid-template-columns:78px minmax(0,1fr); align-items:center; gap:20px; overflow:visible; border:0!important; border-radius:0!important; background:rgba(255,255,255,.94)!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; cursor:pointer; }
        .profile-page .profile-card::before,
        .profile-page .profile-card::after { display:none; }
        .profile-page .profile-avatar { width:78px; height:78px; border-radius:10px; box-shadow:none; }
        .profile-page .profile-avatar img,
        .profile-page .profile-avatar-placeholder { border-radius:10px; }
        .profile-page #profile-avatar-placeholder::after { right:-6px; bottom:-6px; width:22px; height:22px; border-width:2px; background:#07C160; box-shadow:none; }
        .profile-page .profile-info { align-self:center; }
        .profile-page .profile-title-row { position:relative; display:flex; align-items:center; min-height:36px; }
        .profile-page .profile-name { padding-right:90px; color:#191919!important; font-size:23px!important; font-weight:650; letter-spacing:-.025em; }
        .profile-page .profile-id { margin-top:4px; color:#8A8A8E!important; font-size:13px; }
        .profile-page .profile-card-edit { position:absolute; right:0; top:2px; min-height:32px; padding:0; color:#737378!important; font-size:12px; }
        .profile-page .profile-card-edit::after { color:#B5B5B9; }

        .profile-page .vip-card { width:100%; margin:0 0 10px; padding:0 22px; border:0!important; border-radius:0!important; background:rgba(255,255,255,.96)!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
        .profile-page .vip-card::before,
        .profile-page .vip-card::after { display:none!important; }
        .profile-page .vip-header { min-height:58px; margin:0; display:flex; align-items:center; border-bottom:1px solid rgba(60,60,67,.10); }
        .profile-page .vip-icon { width:25px; height:25px; margin-right:14px; padding:0; color:#C28B31; fill:#C28B31!important; filter:none; }
        .profile-page .vip-title { color:#191919!important; font-size:16px; font-weight:550; }
        .profile-page .vip-info { min-height:78px; padding:14px 0; border-top:0; border-bottom:1px solid rgba(60,60,67,.10); }
        .profile-page .vip-info-divider { height:36px; }
        .profile-page .vip-item-value,
        .profile-page .vip-info-value { font-size:16px; }
        .profile-page .vip-footer { min-height:62px; padding:10px 0; }
        .profile-page .vip-btn { min-height:36px; padding:0 15px; border-radius:8px; background:#2C2C2E!important; box-shadow:none; }

        .profile-page .settings-group-title { display:none; }
        .profile-page .settings-list { width:100%; margin:0 0 10px; overflow:hidden; border:0!important; border-radius:0!important; background:rgba(255,255,255,.96)!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
        .profile-page .settings-item,
        .profile-page .agent-settings-item { min-height:60px; padding:10px 22px; gap:15px; border-color:rgba(60,60,67,.10)!important; }
        .profile-page .settings-item .settings-icon-wrapper { width:27px; height:27px; border:0; border-radius:0; color:#5E5E63!important; background:transparent!important; box-shadow:none; }
        .profile-page .settings-item .settings-icon-wrapper svg { width:25px; height:25px; stroke-width:1.75; }
        .profile-page .settings-list-benefits .settings-item:nth-child(1) .settings-icon-wrapper { color:#C28B31!important; background:transparent!important; }
        .profile-page .settings-list-benefits .settings-item:nth-child(2) .settings-icon-wrapper { color:#E29B28!important; background:transparent!important; }
        .profile-page .settings-list-benefits .settings-item:nth-child(3) .settings-icon-wrapper { color:#5E7DA5!important; background:transparent!important; }
        .profile-page .settings-list-support .settings-item:nth-child(1) .settings-icon-wrapper { color:#07A95B!important; background:transparent!important; }
        .profile-page .settings-list-support .settings-item:nth-child(2) .settings-icon-wrapper { color:#E06D62!important; background:transparent!important; }
        .profile-page .settings-list-support .settings-item:nth-child(3) .settings-icon-wrapper { color:#5B91C9!important; background:transparent!important; }
        .profile-page .settings-list-support .settings-item:nth-child(4) .settings-icon-wrapper { color:#8B72B1!important; background:transparent!important; }
        .chat-page .chat-meta { min-width:42px; display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
        .chat-page .chat-unread-dot { display:block; width:10px; height:10px; border:2px solid #fff; border-radius:50%; background:#FA5151; box-shadow:0 2px 7px rgba(250,81,81,.28); }

        /* Primary actions: one calm solid color, without split gradients. */
        :root { --glass-action:#1677E8; --glass-action-hover:#0F6DD8; --glass-action-line:#1677E8; }
        .btn-primary,.btn-success,.role-empty-action,.modern-primary,
        .profile-page .vip-btn {
            color:#FFFFFF!important;
            border:1px solid var(--glass-action-line)!important;
            background:var(--glass-action)!important;
            box-shadow:0 7px 18px rgba(22,119,232,.18)!important;
            -webkit-backdrop-filter:none;
            backdrop-filter:none;
        }
        .btn-primary:hover,.btn-success:hover,.role-empty-action:hover,.modern-primary:hover,
        .profile-page .vip-btn:hover { background:var(--glass-action-hover)!important; }
        .btn-primary:active,.btn-success:active,.role-empty-action:active,.modern-primary:active,
        .profile-page .vip-btn:active { transform:scale(.98); box-shadow:0 4px 11px rgba(22,119,232,.16)!important; }
        .profile-page .settings-label { color:#191919; font-size:16px; font-weight:450; }
        .profile-page .settings-arrow { color:#B8B8BC; }
        .profile-page .settings-badge { color:#A66F28!important; background:#FFF3DE!important; }
        .profile-page .profile-wechat-card { margin:0 0 10px!important; padding:12px 22px; border:0!important; border-radius:0!important; background:rgba(255,255,255,.96)!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
        .profile-page .logout-btn { width:100%; min-height:58px; margin:0; border:0!important; border-radius:0!important; color:#D94B4B; background:rgba(255,255,255,.96)!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
        @media (min-width:768px) { .profile-page-content { width:min(100%,680px); margin:20px auto 0; overflow:hidden; border-radius:22px; }.profile-page .profile-card { padding-top:38px; }.profile-page .settings-list,.profile-page .vip-card,.profile-page .profile-card,.profile-page .logout-btn { border-right:1px solid rgba(60,60,67,.08)!important; border-left:1px solid rgba(60,60,67,.08)!important; } }
        @media (max-width:380px) { .profile-page .profile-card { grid-template-columns:68px minmax(0,1fr); min-height:170px; padding:38px 18px 24px; gap:16px; }.profile-page .profile-avatar { width:68px; height:68px; }.profile-page .profile-name { padding-right:70px; font-size:20px!important; }.profile-page .settings-item,.profile-page .agent-settings-item { padding-right:18px; padding-left:18px; } }

        /* 发现页：微信式通栏分组，去除独立活动卡片。 */
        .page.activity-page { min-height:100dvh; padding:0 0 calc(94px + env(safe-area-inset-bottom)); background:#F2F2F7!important; }
        .activity-page > .header { border-bottom:1px solid rgba(60,60,67,.08); background:rgba(248,248,250,.78)!important; -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%); }
        .activity-content { width:100%; max-width:none; margin:0; padding:0; }
        .activity-banner { width:100%; min-height:148px; margin:0 0 10px; padding:30px 24px; border:0!important; border-radius:0!important; background:rgba(255,255,255,.96)!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
        .activity-banner::before { right:34px; bottom:-54px; background:rgba(120,120,128,.055); }
        .activity-banner::after { border-color:rgba(120,120,128,.065); }
        .activity-banner h2 { color:#191919; font-size:23px; font-weight:650; }
        .activity-banner p { color:#85858A; }
        .activity-group-title { min-height:34px; margin:0; padding:10px 18px 7px; color:#8E8E93; font-size:11px; letter-spacing:.04em; }
        .activity-list { width:100%; margin:0 0 10px; border:0!important; border-radius:0!important; background:rgba(255,255,255,.96)!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
        .activity-row { min-height:68px; padding:10px 18px; gap:14px; }
        .activity-row::after { left:58px; background:rgba(60,60,67,.10); }
        .activity-row-icon,
        .activity-row-icon.orange,
        .activity-row-icon.blue { width:27px; height:27px; flex-basis:27px; border-radius:0; background:transparent!important; }
        .activity-row-icon svg { width:25px; height:25px; }
        .activity-row:nth-child(1) .activity-row-icon { color:#07A95B; }
        .activity-row:nth-child(2) .activity-row-icon { color:#E29B28; }
        .activity-list:last-child .activity-row-icon { color:#C28B31; }
        .activity-row-copy b { margin-bottom:2px; color:#191919!important; font-size:15px; font-weight:520; }
        .activity-row-copy span { color:#929297!important; }
        .activity-row-reward { color:#A66F28!important; background:#FFF3DE!important; }

        /* 角色页：一个白色角色列表组，每个角色是一行。 */
        .page.role-list-page { padding:0 0 calc(94px + env(safe-area-inset-bottom)); background:#F2F2F7!important; }
        .role-list-page > .header { margin:0; padding:0 18px; }
        .role-list-container { width:100%; max-width:none; margin:10px 0 0; display:grid; grid-template-columns:minmax(0,1fr)!important; gap:0; background:rgba(255,255,255,.96); }
        .role-item { min-height:132px; margin:0!important; padding:16px 18px!important; gap:15px!important; overflow:visible; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
        .role-item::before { display:none; }
        .role-item::after { content:''; position:absolute; right:0; bottom:0; left:99px; height:1px; background:rgba(60,60,67,.10); transform:scaleY(.5); transform-origin:bottom; }
        .role-item:last-child::after { display:none; }
        .role-item:active { background:#F2F2F2!important; transform:none; }
        .role-item .role-avatar { width:64px!important; height:64px!important; border:0; border-radius:10px!important; box-shadow:none!important; }
        .role-item .role-avatar img { border-radius:10px!important; }
        .role-item .role-info { min-height:98px; }
        .role-item .role-actions { margin-top:11px; }
        .role-item .role-setting-btn { background:rgba(255,255,255,.50); }
        @media (min-width:768px) { .activity-content,.role-list-container { width:min(100%,680px); margin-right:auto; margin-left:auto; }.activity-content { margin-top:20px; overflow:hidden; border-radius:18px; }.role-list-container { margin-top:20px; overflow:hidden; border:1px solid rgba(60,60,67,.08); border-radius:18px; }.role-item { padding:18px 20px!important; } }
        @media (max-width:390px) { .role-item { padding:15px 14px!important; gap:12px!important; }.role-item::after { left:90px; }.role-item .role-avatar { width:60px!important; height:60px!important; } }

        /* 四个一级页面统一顶部导航。 */
        #app-container .chat-page > .header,
        #app-container .activity-page > .header,
        #app-container .role-list-page > .header,
        #app-container .profile-page > .header { width:100%; height:60px; min-height:60px; margin:0; padding:0 18px; display:flex; align-items:center; border:0; border-bottom:1px solid rgba(60,60,67,.09); background:rgba(248,248,250,.82)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.72); -webkit-backdrop-filter:blur(24px) saturate(145%); backdrop-filter:blur(24px) saturate(145%); }
        .chat-page > .header .header-title,
        .activity-page > .header .header-title,
        .role-list-page > .header .header-title,
        .profile-page > .header .header-title { color:#1D1D1F; font-size:18px; font-weight:650; letter-spacing:-.02em; }
        .chat-page > .header .header-btn,
        .role-list-page > .header .header-btn { color:#2C2C2E!important; }
        .profile-page .profile-card { min-height:158px; padding-top:28px; padding-bottom:24px; }
        @media (min-width:768px) { #app-container .chat-page > .header,#app-container .activity-page > .header,#app-container .role-list-page > .header,#app-container .profile-page > .header { height:64px; min-height:64px; padding-right:24px; padding-left:24px; }.profile-page .profile-card { padding-top:30px; } }

        /* 微信式贴底导航：保留毛玻璃，但取消悬浮卡片形态。 */
        #bottom-nav.bottom-nav { left:0; right:0; bottom:0; width:100%; height:calc(62px + env(safe-area-inset-bottom)); padding:6px 8px env(safe-area-inset-bottom); border:0; border-top:1px solid rgba(60,60,67,.11); border-radius:0; background:rgba(248,248,250,.86)!important; box-shadow:none; transform:none; -webkit-backdrop-filter:blur(24px) saturate(145%); backdrop-filter:blur(24px) saturate(145%); }
        @media (min-width:768px) { #bottom-nav.bottom-nav { left:50%; right:auto; bottom:0; width:min(720px,100%); height:64px; border-right:1px solid rgba(60,60,67,.08); border-left:1px solid rgba(60,60,67,.08); transform:translateX(-50%); } }

        /* 消息空状态：彩色玻璃对话标识，避免灰色占位图。 */
        .chat-page .role-empty-state { background:radial-gradient(circle at 50% 16%,rgba(76,148,255,.075),transparent 27%),#FFFFFF!important; }
        .role-empty-visual::before { border-color:rgba(255,255,255,.96); background:linear-gradient(145deg,rgba(235,245,255,.98),rgba(255,242,235,.90)); box-shadow:0 15px 34px rgba(49,105,170,.13),inset 0 1px 0 #fff; }
        .role-empty-visual::after { background:#2E86F7; box-shadow:0 5px 14px rgba(46,134,247,.28); }
        .role-empty-visual svg { stroke:#3979C9; }
        .role-empty-state .empty-title { color:#252A32; }
        .role-empty-state .empty-desc { color:#7F8997; }
        .role-empty-action { border:1px solid rgba(255,255,255,.42); color:#FFFFFF; background:linear-gradient(145deg,rgba(43,137,251,.90),rgba(24,108,224,.84)); box-shadow:0 10px 28px rgba(25,105,220,.22),inset 0 1px 0 rgba(255,255,255,.34); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); }
        .role-empty-action:active { box-shadow:0 5px 16px rgba(25,105,220,.18),inset 0 1px 0 rgba(255,255,255,.25); }

        /* 空状态精修：双气泡、柔光轨迹与轻量陪伴动效。 */
        .chat-page .role-empty-state { padding-top:clamp(92px,18vh,164px); }
        .role-empty-visual { width:108px; height:92px; margin-bottom:24px; isolation:isolate; }
        .role-empty-visual::before,.role-empty-visual::after { content:none; }
        .empty-orbit { position:absolute; z-index:-1; border-radius:50%; filter:blur(.2px); animation:emptyOrbit 5.8s ease-in-out infinite; }
        .empty-orbit-one { width:78px; height:78px; left:3px; top:0; background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(219,237,255,.72) 55%,rgba(229,223,255,.30)); box-shadow:0 18px 44px rgba(61,130,211,.13); }
        .empty-orbit-two { width:48px; height:48px; right:2px; bottom:0; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.96),rgba(255,226,211,.62)); animation-delay:-2.1s; }
        .empty-bubble { position:absolute; display:grid; place-items:center; border:1px solid rgba(255,255,255,.90); background:rgba(255,255,255,.68); box-shadow:0 13px 30px rgba(46,105,173,.12),inset 0 1px 0 rgba(255,255,255,.96); -webkit-backdrop-filter:blur(18px) saturate(155%); backdrop-filter:blur(18px) saturate(155%); }
        .empty-bubble svg { position:static; width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
        .empty-bubble-back { left:8px; top:9px; width:62px; height:62px; border-radius:22px; color:#6F8FC2; transform:rotate(-6deg); animation:emptyBubbleBack 4.6s ease-in-out infinite; }
        .empty-bubble-front { right:4px; bottom:1px; width:68px; height:66px; border-radius:24px; color:#287FE6; background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(235,245,255,.72)); animation:emptyBubbleFront 4.6s .35s ease-in-out infinite; }
        .empty-sparkle { position:absolute; z-index:4; right:3px; top:5px; width:9px; height:9px; border-radius:50%; background:#FF9C74; box-shadow:0 0 0 5px rgba(255,156,116,.11),0 5px 16px rgba(255,133,91,.25); animation:emptySparkle 2.8s ease-in-out infinite; }
        .role-empty-state .empty-title { font-size:20px; font-weight:720; letter-spacing:-.035em; }
        .role-empty-state .empty-desc { margin-top:10px; color:#828A97; font-size:13px; line-height:1.75; }
        .role-empty-action { width:min(100%,238px); min-height:52px; margin-top:27px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border-radius:17px; font-size:14px; font-weight:680; letter-spacing:.01em; }
        .role-empty-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
        .role-empty-action:active svg { transform:translateX(2px); }
        .role-empty-note { margin-top:14px; display:inline-flex; align-items:center; gap:6px; color:#9EA5AF; font-size:11px; }
        .role-empty-note>span { width:5px; height:5px; border-radius:50%; background:#5E9DEB; box-shadow:0 0 0 3px rgba(94,157,235,.10); }
        @keyframes emptyOrbit { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(2px,-4px,0) scale(1.035); } }
        @keyframes emptyBubbleBack { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-4px) rotate(-4deg); } }
        @keyframes emptyBubbleFront { 0%,100% { transform:translateY(0); } 50% { transform:translateY(3px); } }
        @keyframes emptySparkle { 0%,100% { opacity:.62; transform:scale(.82); } 50% { opacity:1; transform:scale(1.08); } }
        @media (prefers-reduced-motion:reduce) { .empty-orbit,.empty-bubble,.empty-sparkle { animation:none!important; } }

        /* 消息空状态最终稿：扁平对话图形 + 淡鼠尾草绿毛玻璃操作按钮。 */
        .chat-page .role-empty-state { padding:clamp(90px,17vh,154px) 28px 96px; background:#fff!important; }
        .role-empty-kicker,.role-empty-steps,.empty-message,.empty-portrait { display:none!important; }
        .role-empty-visual { position:relative; width:136px; height:116px; margin:0 0 27px; isolation:isolate; transform:none; }
        .role-empty-visual::before,.role-empty-visual::after { content:none!important; }
        .empty-sage-shape { position:absolute; z-index:0; left:11px; top:3px; width:94px; height:88px; border-radius:47% 53% 58% 42% / 45% 42% 58% 55%; background:rgba(221,238,225,.72); transform:rotate(-8deg); animation:emptySageBreath 5.5s ease-in-out infinite; }
        .role-empty-visual .empty-chat-bubbles { position:absolute; z-index:2; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:none; }
        .empty-chat-bubbles .bubble { fill:rgba(255,255,255,.96); stroke:#272B29; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round; }
        .empty-chat-bubbles .bubble-back { fill:rgba(255,255,255,.74); }
        .empty-chat-bubbles .bubble-front { filter:drop-shadow(0 5px 8px rgba(35,46,39,.06)); }
        .empty-chat-bubbles .bubble-dot { fill:#87948C; stroke:none; }
        .empty-chat-bubbles .bubble-ground { fill:none; stroke:#272B29; stroke-width:2.15; stroke-linecap:round; }
        .empty-ai-sparkle { position:absolute; z-index:3; right:4px; top:12px; width:22px; height:22px; background:#72B985; clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%); filter:drop-shadow(0 4px 8px rgba(79,157,101,.18)); animation:emptyAiSparkle 3.2s ease-in-out infinite; }
        .role-empty-state .empty-title { color:#242825; font-size:19px; font-weight:700; line-height:1.35; letter-spacing:-.035em; }
        .role-empty-state .empty-desc { margin-top:10px; color:#8A928D; font-size:13px; line-height:1.8; letter-spacing:.005em; }
        .role-empty-action { width:min(100%,216px); min-height:48px; margin-top:27px; padding:0 11px 0 21px; display:inline-flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid rgba(0,0,0,.38)!important; border-radius:15px; color:#2E4A38!important; background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.80))!important; box-shadow:0 12px 28px rgba(64,116,78,.10),inset 0 1px 0 rgba(255,255,255,.94)!important; -webkit-backdrop-filter:blur(18px) saturate(125%); backdrop-filter:blur(18px) saturate(125%); font-size:14px; font-weight:680; letter-spacing:.01em; }
        .role-empty-action:hover { border-color:rgba(0,0,0,.48)!important; color:#294333!important; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.88))!important; box-shadow:0 14px 31px rgba(64,116,78,.13),inset 0 1px 0 #fff!important; }
        .role-empty-action:active { transform:scale(.985); box-shadow:0 6px 16px rgba(64,116,78,.09),inset 0 1px 0 rgba(255,255,255,.82); }
        .role-empty-action svg { width:27px; height:27px; padding:6px; flex:0 0 auto; border:1px solid rgba(73,167,102,.58); border-radius:50%; color:#3DA866; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
        .role-empty-note { margin-top:14px; display:inline-flex; align-items:center; gap:6px; color:#929A95; font-size:11px; }
        .role-empty-note svg { width:15px; height:15px; fill:none; stroke:#78827C; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
        @keyframes emptySageBreath { 0%,100% { transform:rotate(-8deg) scale(1); opacity:.72; } 50% { transform:rotate(-6deg) scale(1.035); opacity:.9; } }
        @keyframes emptyAiSparkle { 0%,100% { transform:scale(.88) rotate(0); opacity:.72; } 50% { transform:scale(1.06) rotate(8deg); opacity:1; } }
        @media (max-height:680px) { .chat-page .role-empty-state { padding-top:62px; }.role-empty-visual { width:132px; height:112px; margin-bottom:18px; } }
        @media (prefers-reduced-motion:reduce) { .empty-sage-shape,.empty-ai-sparkle { animation:none!important; } }

        /* 应用内一级页面使用即时切换，取消列表逐项入场和按压缩放动画。 */
        body:not(.welcome-mode) .page.active .chat-list-item,
        body:not(.welcome-mode) .page.active .activity-row,
        body:not(.welcome-mode) .page.active .role-item,
        body:not(.welcome-mode) .page.active .profile-card,
        body:not(.welcome-mode) .page.active .vip-card,
        body:not(.welcome-mode) .page.active .settings-list {
            animation:none!important;
            animation-delay:0s!important;
        }
        body:not(.welcome-mode) .chat-list-item,
        body:not(.welcome-mode) .activity-row,
        body:not(.welcome-mode) .role-item,
        body:not(.welcome-mode) .profile-card,
        body:not(.welcome-mode) .vip-card,
        body:not(.welcome-mode) .settings-list {
            transition:none!important;
        }
        body:not(.welcome-mode) .role-item:active,
        body:not(.welcome-mode) .activity-row:active,
        body:not(.welcome-mode) .chat-list-item:active {
            transform:none!important;
        }