/* 基础样式 */
/* iOS安全区域支持 */
html {
    height: 100%;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    /* 兼容旧版本iOS */
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}

:root {
    /* 主色调 - 更加现代化的配色方案 */
    --primary-color: #ff3e79; /* 明亮的粉红色 */
    --secondary-color: #9c27b0; /* 紫色 */
    --light-color: #f8f9fa;
    --dark-color: #2d3436;
    --accent-color: #6c5ce7; /* 紫蓝色 */
    
    /* Profile Header 透明度变量（方案A：透明→主题色渐进） */
    --header-bg-opacity: 0.15;
    --header-scrim-opacity: 0.08;
    --success-color: #00cec9; /* 蓝绿色 */
    --warning-color: #fdcb6e; /* 淡黄色 */
    --danger-color: #e17055; /* 橙红色 */
    
    /* 文本颜色 */
    --text-color: #1f2937;
    --text-secondary: #475569;
    --text-light: #94a3b8;
    
    /* 背景色 */
    --bg-primary: #f1f5f9;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #e2e8f0;
    
    /* 渐变色 */
    --gradient-primary: linear-gradient(135deg, #ff3e79 0%, #9c27b0 100%);
    --gradient-secondary: linear-gradient(135deg, #6c5ce7 0%, #9c27b0 100%);
    /* 主题品牌色（RGB，便于统一 alpha） */
    --brand-pink-rgb: 255, 62, 121;
    --brand-purple-rgb: 156, 39, 176;
    --brand-gradient-05: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.05) 0%, rgba(var(--brand-purple-rgb), 0.05) 100%);
    --brand-gradient-10: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.10) 0%, rgba(var(--brand-purple-rgb), 0.10) 100%);
    --brand-gradient-16: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.16) 0%, rgba(var(--brand-purple-rgb), 0.16) 100%);
    --brand-gradient-90: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.90) 0%, rgba(var(--brand-purple-rgb), 0.90) 100%);
    
    /* 通用颜色变量（RGB格式，便于调整透明度） */
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --light-gray-rgb: 2, 6, 23;
    --dark-gray-rgb: 80, 80, 80;
    --modal-bg-rgb: 30, 30, 30;
    
    /* 边框和阴影 */
    --border-color: #e6edf5;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --border-radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(var(--light-gray-rgb), 0.06);
    --shadow: 0 2px 8px rgba(var(--light-gray-rgb), 0.08);
    --shadow-lg: 0 12px 28px rgba(var(--light-gray-rgb), 0.10);
    
    /* 动画 */
    --transition-fast: all 0.2s ease;
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    
    /* 布局常量 */
    --app-header-height: 56px;
    --bottom-nav-height: 60px;
    --max-content-width: 480px;
    
    /* 字体 */
    --font-sans: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}

/* 增强动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* 暗黑模式变量 */
body.dark-mode {
    /* 文本颜色 */
    --text-color: #f1f1f1;
    --text-secondary: #d1d1d1;
    --text-light: #a0a0a0;
    
    /* 背景色 */
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2c2c2c;
    
    /* 边框和阴影 */
    --border-color: #383838;
    --shadow-sm: 0 2px 4px rgba(var(--black-rgb), 0.2);
    --shadow: 0 4px 12px rgba(var(--black-rgb), 0.25);
    --shadow-lg: 0 8px 24px rgba(var(--black-rgb), 0.3);
}

/* 浅色模式特定覆盖 */
body:not(.dark-mode) .page-header {
    background: var(--brand-gradient-16);
    color: var(--text-color);
}

/* 浅色模式下，降低其他主页面深粉/紫色元素的饱和度 */
body:not(.dark-mode) .hero-carousel .hero-background {
    background: var(--brand-gradient-16);
}

body:not(.dark-mode) .scenario-card .scenario-background {
    background: var(--brand-gradient-16);
}

/* 浅色模式下的个人中心头部 - 使用更柔和的背景 */
body:not(.dark-mode) .profile-header {
    background: transparent;
    color: var(--text-color);
}

/* 浅色模式收起状态 */
body:not(.dark-mode) .profile-header.collapsed {
    background: transparent;
    box-shadow: none;
    border-bottom: none;
}

/* 浅色模式下头像样式 */
body:not(.dark-mode) .profile-avatar .single-avatar {
    background: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(var(--brand-pink-rgb), 0.2);
    backdrop-filter: blur(8px);
}



/* 浅色模式下文字阴影调整 */
body:not(.dark-mode) .profile-header:not(.collapsed) {
    text-shadow: 0 1px 2px rgba(var(--black-rgb), 0.1);
}

body:not(.dark-mode) .chat-header-container {
    background: var(--brand-gradient-90);
    color: white;
    border-bottom: 1px solid rgba(var(--white-rgb), 0.2);
}

body:not(.dark-mode) .try-now-btn,
body:not(.dark-mode) .hero-cta-btn:hover,
body:not(.dark-mode) .scenario-btn:hover,
body:not(.dark-mode) .vip-select-btn {
    box-shadow: 0 4px 12px rgba(var(--brand-pink-rgb), 0.18);
}

body:not(.dark-mode) .social-link {
    background-color: rgba(var(--brand-pink-rgb), 0.80);
    box-shadow: 0 4px 8px rgba(var(--brand-pink-rgb), 0.12);
}

body:not(.dark-mode) .contact-btn {
    background-color: rgba(var(--brand-pink-rgb), 0.80);
    box-shadow: 0 4px 8px rgba(var(--brand-pink-rgb), 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    color: var(--text-color);
    line-height: 1.6;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none; /* 防止iOS橡皮筋效果 */
}

/* 暗黑模式背景 */
body.dark-mode {
    background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
}

/* 更新横幅样式 */
.update-banner {
    position: fixed;
    bottom: 80px; /* 在底部导航栏上方 */
    left: 20px;
    background: var(--gradient-primary);
    color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    animation: fadeInUp 0.3s ease;
    max-width: 280px;
}

.update-content {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.update-content span {
    flex: 1;
    font-weight: 500;
}

.update-content button {
    background: rgba(var(--white-rgb), 0.2);
    color: white;
    border: 1px solid rgba(var(--white-rgb), 0.3);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    transition: var(--transition-fast);
    cursor: pointer;
}

.update-content button:hover {
    background: rgba(var(--white-rgb), 0.3);
    transform: translateY(-1px);
}

.update-content button:active {
    transform: translateY(0);
}

/* 页面头部样式 */
.page-header {
    position: sticky;
    top: 0;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    z-index: 150;
    box-shadow: var(--shadow);
    width: 100%;
    left: 0;
    right: 0;
}

/* 浅色模式下的二级页面头部样式 */
body:not(.dark-mode) #edit-profile-page .page-header,
body:not(.dark-mode) #settings-page .page-header,
body:not(.dark-mode) #statistics-page .page-header,
body:not(.dark-mode) #vip-page .page-header,
body:not(.dark-mode) #help-page .page-header,
body:not(.dark-mode) #about-page .page-header {
    background: var(--brand-gradient-16);
    color: var(--text-color);
    border-bottom: 1px solid rgba(2, 6, 23, 0.06);
    box-shadow: 0 2px 10px rgba(2, 6, 23, 0.08);
    border-radius: 0 0 15px 15px;
    margin-bottom: 10px;
}

/* 暗黑模式下的二级页面头部样式 */
body.dark-mode #edit-profile-page .page-header,
body.dark-mode #settings-page .page-header,
body.dark-mode #statistics-page .page-header,
body.dark-mode #vip-page .page-header,
body.dark-mode #help-page .page-header,
body.dark-mode #about-page .page-header {
    background: var(--brand-gradient-90);
    border-bottom: 1px solid rgba(80, 80, 80, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    border-radius: 0 0 15px 15px;
    margin-bottom: 10px;
}

/* 暗黑模式页面头部 */
body.dark-mode .page-header {
    box-shadow: var(--shadow-lg);
}

.back-btn, .header-back-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.back-btn:hover, .header-back-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 浅色模式下的返回按钮样式优化 */
body:not(.dark-mode) #edit-profile-page .back-btn,
body:not(.dark-mode) #settings-page .back-btn,
body:not(.dark-mode) #statistics-page .back-btn,
body:not(.dark-mode) #vip-page .back-btn,
body:not(.dark-mode) #help-page .back-btn,
body:not(.dark-mode) #about-page .back-btn,
body:not(.dark-mode) .header-back-btn {
    background-color: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--text-color);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.2);
    backdrop-filter: blur(8px);
}

body:not(.dark-mode) #edit-profile-page .back-btn:hover,
body:not(.dark-mode) #settings-page .back-btn:hover,
body:not(.dark-mode) #statistics-page .back-btn:hover,
body:not(.dark-mode) #vip-page .back-btn:hover,
body:not(.dark-mode) #help-page .back-btn:hover,
body:not(.dark-mode) #about-page .back-btn:hover,
body:not(.dark-mode) .header-back-btn:hover {
    background-color: rgba(var(--brand-pink-rgb), 0.18);
    border-color: rgba(var(--brand-pink-rgb), 0.3);
    box-shadow: 0 2px 8px rgba(var(--brand-pink-rgb), 0.15);
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    flex: 1; /* 确保标题占据中间所有空间 */
}

.save-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.save-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.save-btn:active {
    transform: translateY(0);
}

/* 浅色模式下的保存按钮样式优化 */
body:not(.dark-mode) #edit-profile-page .save-btn,
body:not(.dark-mode) #settings-page .save-btn,
body:not(.dark-mode) #statistics-page .save-btn,
body:not(.dark-mode) #vip-page .save-btn,
body:not(.dark-mode) #help-page .save-btn,
body:not(.dark-mode) #about-page .save-btn {
    background: var(--brand-gradient-90);
    color: white;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.3);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 6px rgba(var(--brand-pink-rgb), 0.2);
}

body:not(.dark-mode) #edit-profile-page .save-btn:hover,
body:not(.dark-mode) #settings-page .save-btn:hover,
body:not(.dark-mode) #statistics-page .save-btn:hover,
body:not(.dark-mode) #vip-page .save-btn:hover,
body:not(.dark-mode) #help-page .save-btn:hover,
body:not(.dark-mode) #about-page .save-btn:hover {
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.95) 0%, rgba(var(--brand-purple-rgb), 0.95) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--brand-pink-rgb), 0.25);
}

.page-content {
    padding: 16px;
    overflow-y: auto;
}

/* 帮助中心FAQ样式 */
.faq-item {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.05);
}

body.dark-mode .faq-item {
    background-color: #2c2c2c;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

.faq-question {
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .faq-question {
    background-color: #2c2c2c;
    border-color: rgba(255,255,255,0.1);
}

.faq-answer {
    padding: 15px;
    background-color: rgba(0,0,0,0.03);
    font-size: 14px;
    line-height: 1.6;
    display: none;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

body.dark-mode .faq-answer {
    background-color: rgba(255,255,255,0.05);
}

/* 顶部导航 */
.header {
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 暗黑模式顶部导航 */
body.dark-mode .header {
    background-color: var(--bg-secondary);
}

/* 聊天会话样式 */
.chat-sessions {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 255, 0.9) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    position: fixed;
    top: 0;
    left: -100%;
    bottom: var(--bottom-nav-height);
    z-index: 90;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    touch-action: pan-x;
}

/* 暗黑模式聊天会话 */
body.dark-mode .chat-sessions {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.9) 100%);
    border-right: 1px solid rgba(50, 50, 50, 0.3);
}

.sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
    background: var(--brand-gradient-05);
}

/* 暗黑模式会话头部 */
body.dark-mode .sessions-header {
    border-bottom: 1px solid #333;
    background: var(--brand-gradient-10);
}

.sessions-header h3 {
    margin: 0;
    font-size: 16px;
}

.sessions-back-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.sessions-back-btn:hover {
    background-color: rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/* 暗黑模式返回按钮 */
body.dark-mode .sessions-back-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

body.dark-mode .sessions-back-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.new-session-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.new-session-btn:hover {
    background-color: #e03b76;
    transform: scale(1.05);
}

.sessions-search {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    position: relative;
}

/* 暗黑模式搜索框边框 */
body.dark-mode .sessions-search {
    border-bottom: 1px solid #333;
}

.session-search-input {
    width: 100%;
    padding: 8px 12px 8px 30px;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 14px;
}

/* 暗黑模式搜索输入框 */
body.dark-mode .session-search-input {
    background-color: #2c2c2c;
    color: #f1f1f1;
    border: 1px solid #444;
}

.session-search-icon {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 14px;
}

.sessions-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible; /* 确保下拉菜单水平方向可见 */
    padding: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.sessions-list::-webkit-scrollbar {
    display: none; /* WebKit */
}

.session-item {
    display: flex;
    align-items: center;
    padding: 16px 15px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    border-bottom: 1px solid var(--border-color);
    overflow: visible; /* 确保下拉菜单可见 */
    gap: 12px; /* 增加子元素间距，改善中英文布局效果 */
}

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

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

.session-item.active {
    background-color: rgba(255, 62, 121, 0.05);
    border-right: 3px solid var(--primary-color);
}

/* 暗黑模式会话项 */
body.dark-mode .session-item.active {
    background-color: rgba(255, 62, 121, 0.1);
}

body.dark-mode .session-item:hover {
    background-color: #252525;
}

/* 浅色模式下的会话项 */
.session-item.active {
    background-color: rgba(255, 62, 121, 0.05);
    border-right: 3px solid var(--primary-color);
}

.session-item:hover {
    background-color: #f5f5f5;
}

.session-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    flex-shrink: 0; /* 防止头像被压缩 */
}

.session-item:hover .session-avatar {
    transform: scale(1.05);
}

.session-avatar i {
    font-size: 22px;
    color: #aaa;
}

.session-avatar.category-friend i {
    color: var(--primary-color);
}

.session-avatar.category-date i {
    color: var(--success-color);
}

.session-avatar.category-crush i {
    color: var(--secondary-color);
}

.session-avatar.category-other i {
    color: var(--accent-color);
}

.session-avatar .category-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-info {
    flex: 1;
    min-width: 0;
    /* 移除margin-right，使用gap来处理间距 */
    /* 确保info区域能充分利用可用空间，避免过度拉伸 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.session-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 确保文本不会过度拉伸 */
    line-height: 1.2;
}

.session-preview {
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-time {
    font-size: 11px;
    color: var(--text-light);
    min-width: 35px; /* 减少最小宽度，适配中文 */
    max-width: 65px; /* 设置最大宽度，防止过度扩展 */
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0; /* 防止时间被压缩 */
    /* 使用弹性宽度，根据内容自适应 */
    width: fit-content;
}

.session-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 15px;
    border-top: 1px solid #eee;
}

/* 暗黑模式会话操作区域 */
body.dark-mode .session-actions {
    border-top: 1px solid #333;
}

.session-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--text-light);
}

.session-action-btn:hover {
    background-color: #f0f0f0;
    color: var(--primary-color);
}

/* 暗黑模式操作按钮悬停 */
body.dark-mode .session-action-btn:hover {
    background-color: #333;
}

/* 会话列表空状态 */
.sessions-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    gap: 8px;
    padding: 40px 20px;
}

.sessions-empty-state i {
    font-size: 40px;
    opacity: 0.3;
    margin-bottom: 8px;
}

.sessions-empty-state p {
    margin: 0;
    font-size: 15px;
    opacity: 0.6;
}

.sessions-empty-hint {
    font-size: 13px !important;
    opacity: 0.4 !important;
}

/* 内容区域样式 */
.app-content {
    flex: 1;
    overflow-y: auto;
    position: relative;
    margin-top: 0;
}

.app-page {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - var(--bottom-nav-height));
    height: calc(100dvh - var(--bottom-nav-height));
    height: calc(var(--vh, 1vh) * 100 - var(--bottom-nav-height));
    overflow-y: auto;
    background: linear-gradient(135deg, #f9f9ff 0%, #f0f2fa 100%);
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255, 62, 121, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(var(--brand-purple-rgb), 0.03) 0%, transparent 50%);
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    z-index: 5;
}

/* Profile页面专用浅色模式背景优化 */
body:not(.dark-mode) #profile-page {
    background: linear-gradient(135deg, #f8faff 0%, #f2f5fb 100%);
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 62, 121, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(var(--brand-purple-rgb), 0.06) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(var(--brand-accent-rgb), 0.04) 0%, transparent 60%);
}

/* 深色模式下的Profile页面背景 */
body.dark-mode #profile-page {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 62, 121, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(var(--brand-purple-rgb), 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(var(--brand-accent-rgb), 0.05) 0%, transparent 60%);
}

/* 特殊样式：当子页面激活时隐藏底部导航 */
#edit-profile-page.active,
#settings-page.active,
#statistics-page.active,
#vip-page.active,
#help-page.active,
#about-page.active {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    padding-top: 0;
}

.app-page[data-hide-nav="true"].active {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    padding-top: 0;
}

/* 登录和注册页面：用 fixed 定位直接覆盖视口，避免 absolute+父容器偏移导致黑屏 */
#login-page.active,
#register-page.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    padding-top: 0;
    z-index: 100;
}

/* 登录/注册页面：内容从顶部开始自然流，padding 保证间距 */
#login-page .page-content,
#register-page .page-content {
    display: block;
    min-height: 100%;
    padding: 16px;
    box-sizing: border-box;
}

.login-container,
.register-container {
    max-width: 420px;
    margin: 0 auto;
    /* 用 padding-top 模拟垂直居中（约等于 (视口高 - 卡片高) / 2），最小 24px */
    padding-top: max(24px, env(safe-area-inset-top, 0px));
}

/* 当登录或注册页面激活时隐藏底部导航栏 */
#login-page.active ~ .bottom-nav,
#register-page.active ~ .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 确保登录和注册页面占据全屏高度 */
#login-page.active,
#register-page.active {
    height: 100vh !important;
    height: 100dvh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    padding-bottom: 0 !important;
}

/* 强制隐藏底部导航栏 - 当登录或注册页面存在时 */
body:has(#login-page.active) .bottom-nav,
body:has(#register-page.active) .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 备用方案 - 直接针对底部导航栏 */
.bottom-nav.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 更强的隐藏规则 - 兼容性更好 */
.bottom-nav[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
    transform: translateY(100%) !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 登录页面特定隐藏 */
#login-page.active ~ .bottom-nav,
#register-page.active ~ .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
    transform: translateY(100%) !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 强制移除底部导航栏的所有阴影效果 */
.bottom-nav {
    box-shadow: none !important;
}

/* 彻底隐藏底部导航栏 - 最强制的规则 */
.bottom-nav.hidden,
.bottom-nav[data-hidden="true"],
.bottom-nav[style*="display: none"],
body[data-current-page="login"] .bottom-nav,
body[data-current-page="register"] .bottom-nav,
#login-page.active ~ .bottom-nav,
#register-page.active ~ .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
    transform: translateY(100%) !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -9999 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 确保登录和注册页面时body完全没有底部间距 */
body:has(#login-page.active),
body:has(#register-page.active),
body[data-current-page="login"],
body[data-current-page="register"] {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 登录和注册页面强制全屏 — position 和 z-index 已由上方 fixed 规则设置，不在此覆盖 */
#login-page.active,
#register-page.active {
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow-y: auto !important;
}

/* 当登录页面激活时，确保页面占据全屏 */
#login-page.active {
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow-y: auto !important;
}

#register-page.active {
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow-y: auto !important;
}

/* 确保登录和注册页面时body没有底部间距 */
body:has(#login-page.active),
body:has(#register-page.active) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 备用方案 - 直接通过属性选择器 */
body[data-current-page="login"] .bottom-nav,
body[data-current-page="register"] .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
    transform: translateY(100%) !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
}

/* 确保页面头部固定且页面内容不会超过头部 */
#edit-profile-page .page-header,
#settings-page .page-header,
#statistics-page .page-header,
#vip-page .page-header,
#help-page .page-header,
#about-page .page-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

#edit-profile-page .page-content,
#settings-page .page-content,
#statistics-page .page-content,
#vip-page .page-content,
#help-page .page-content,
#about-page .page-content {
    margin-top: 10px;
    padding-top: 15px;
    padding-bottom: calc(var(--bottom-nav-height) + 20px);
    overflow-y: auto;
    min-height: calc(100vh - var(--bottom-nav-height) - 60px);
    min-height: calc(100dvh - var(--bottom-nav-height) - 60px);
}

/* 二级页面浅色模式背景样式 - 更丰富的颜色 */
body:not(.dark-mode) #edit-profile-page {
    background: linear-gradient(135deg, #f8faff 0%, #f1f3fa 100%);
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(255, 62, 121, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 85% 85%, rgba(var(--brand-purple-rgb), 0.10) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(var(--brand-accent-rgb), 0.05) 0%, transparent 50%);
}

body:not(.dark-mode) #settings-page {
    background: linear-gradient(135deg, #f7f9ff 0%, #f0f4fb 100%);
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(var(--brand-accent-rgb), 0.12) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(var(--brand-purple-rgb), 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 62, 121, 0.05) 0%, transparent 55%);
}

body:not(.dark-mode) #statistics-page {
    background: linear-gradient(135deg, #f8fbff 0%, #f2f5fa 100%);
    background-image: 
        radial-gradient(circle at 75% 25%, rgba(0, 206, 201, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 25% 75%, rgba(255, 62, 121, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(var(--brand-purple-rgb), 0.05) 0%, transparent 55%);
}

body:not(.dark-mode) #vip-page {
    background: linear-gradient(135deg, #f9f8ff 0%, #f3f2fa 100%);
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(255, 186, 8, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(var(--brand-purple-rgb), 0.10) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 62, 121, 0.06) 0%, transparent 55%);
}

body:not(.dark-mode) #help-page {
    background: linear-gradient(135deg, #f7f9ff 0%, #f1f5fc 100%);
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(var(--brand-accent-rgb), 0.12) 0%, transparent 40%),
        radial-gradient(circle at 75% 75%, rgba(255, 62, 121, 0.10) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(0, 206, 201, 0.05) 0%, transparent 55%);
}

body:not(.dark-mode) #about-page {
    background: linear-gradient(135deg, #f8faff 0%, #f2f4fa 100%);
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 62, 121, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(var(--brand-accent-rgb), 0.10) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(156, 39, 176, 0.05) 0%, transparent 55%);
}

/* 二级页面的内容区域样式 */
body:not(.dark-mode) #edit-profile-page .page-content,
body:not(.dark-mode) #settings-page .page-content,
body:not(.dark-mode) #statistics-page .page-content,
body:not(.dark-mode) #vip-page .page-content {
    position: relative;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 20px 20px calc(var(--bottom-nav-height) + 20px) 20px;
    color: var(--text-color);
}

/* 帮助中心和关于我们页面内容区域样式 - 浅色模式特殊处理 */
body:not(.dark-mode) #help-page .page-content,
body:not(.dark-mode) #about-page .page-content {
    position: relative;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 20px 20px calc(var(--bottom-nav-height) + 20px) 20px;
    color: var(--text-color);
}

/* 关于我们页面特定样式 - 浅色模式 */
body:not(.dark-mode) #about-page .app-info {
    text-align: center;
    margin-bottom: 30px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    padding: 25px 15px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body:not(.dark-mode) #about-page .app-logo i {
    font-size: 50px;
    color: var(--primary-color);
    display: block;
    margin-bottom: 10px;
}

body:not(.dark-mode) #about-page .app-logo h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body:not(.dark-mode) #about-page .app-description {
    color: var(--text-color); /* 使用常规文本颜色，更易读 */
    font-weight: 500;
}

body:not(.dark-mode) #about-page .app-version {
    display: inline-block;
    padding: 4px 12px;
    margin: 15px 0;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

body:not(.dark-mode) #about-page .team-section,
body:not(.dark-mode) #about-page .mission-section {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body:not(.dark-mode) #about-page .team-section h4,
body:not(.dark-mode) #about-page .mission-section h4 {
    color: var(--text-color); /* 与正文保持一致，避免过度强调 */
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    font-weight: 600;
}

body:not(.dark-mode) #about-page .team-section p,
body:not(.dark-mode) #about-page .mission-section p {
    color: var(--text-color); /* 使用标准文本颜色，提高可读性 */
    font-weight: 500;
}

body:not(.dark-mode) #about-page .team-section h4:after,
body:not(.dark-mode) #about-page .mission-section h4:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

body:not(.dark-mode) #about-page .social-section {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body:not(.dark-mode) #about-page .social-section h4 {
    color: var(--primary-color);
    font-weight: 600;
}

body:not(.dark-mode) #about-page .social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

body:not(.dark-mode) #about-page .social-link {
    width: 45px;
    height: 45px;
    background-color: rgba(255, 62, 121, 0.80);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(255, 62, 121, 0.12);
}

body:not(.dark-mode) #about-page .social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(255, 62, 121, 0.16);
}

body:not(.dark-mode) #about-page .terms-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 62, 121, 0.3);
    border-bottom: 1px solid rgba(255, 62, 121, 0.3);
}

body:not(.dark-mode) #about-page .terms-section a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 15px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

body:not(.dark-mode) #about-page .terms-section a:hover {
    background-color: rgba(255, 62, 121, 0.1);
}

body:not(.dark-mode) #about-page .copyright {
    text-align: center;
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 500;
    margin-top: 20px;
}

/* 帮助中心页面特定样式 - 浅色模式 */
body:not(.dark-mode) #help-page .search-box {
    position: relative;
    margin-bottom: 25px;
    background-color: transparent;
}

body:not(.dark-mode) #help-page .search-box input {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    color: var(--text-color);
    font-size: 14px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body:not(.dark-mode) #help-page .search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 16px;
}

body:not(.dark-mode) #help-page .faq-item {
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body:not(.dark-mode) #help-page .faq-question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

body:not(.dark-mode) #help-page .faq-answer {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
}

body:not(.dark-mode) #help-page .contact-section {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-top: 25px;
    box-shadow: var(--shadow);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body:not(.dark-mode) #help-page .contact-section h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

body:not(.dark-mode) #help-page .contact-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

body:not(.dark-mode) #help-page .contact-btn {
    background-color: rgba(255, 62, 121, 0.80);
    color: white;
    padding: 12px;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(255, 62, 121, 0.12);
    transition: all 0.3s ease;
    width: 100px;
}

body:not(.dark-mode) #help-page .contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 62, 121, 0.16);
}

/* About页面联系区域样式 - 高优先级 */
body:not(.dark-mode) #about-page .contact-section {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--border-radius) !important;
    padding: 20px !important;
    margin-top: 25px !important;
    box-shadow: var(--shadow) !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

body:not(.dark-mode) #about-page .contact-section h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

body:not(.dark-mode) #about-page .contact-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

body:not(.dark-mode) #about-page .contact-btn {
    background-color: rgba(255, 62, 121, 0.80);
    color: white;
    padding: 12px;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(255, 62, 121, 0.12);
    transition: all 0.3s ease;
    width: 100px;
}

body:not(.dark-mode) #about-page .contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 62, 121, 0.2);
}

/* 表单元素在浅色模式下的样式 */
body:not(.dark-mode) .form-input,
body:not(.dark-mode) .form-textarea,
body:not(.dark-mode) .form-select,
body:not(.dark-mode) .search-box input {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body:not(.dark-mode) .form-input:focus,
body:not(.dark-mode) .form-textarea:focus,
body:not(.dark-mode) .form-select:focus,
body:not(.dark-mode) .search-box input:focus {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: rgba(var(--brand-pink-rgb), 0.4);
    box-shadow: 0 4px 20px rgba(var(--brand-pink-rgb), 0.1);
}

/* 暗黑模式下的表单元素样式 */
body.dark-mode .form-input,
body.dark-mode .form-textarea,
body.dark-mode .form-select,
body.dark-mode .search-box input {
    background-color: rgba(40, 40, 40, 0.5);
    border: 1px solid rgba(60, 60, 60, 0.8);
    color: #f1f1f1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.dark-mode .form-input:focus,
body.dark-mode .form-textarea:focus,
body.dark-mode .form-select:focus,
body.dark-mode .search-box input:focus {
    background-color: rgba(50, 50, 50, 0.8);
    border-color: rgba(255, 62, 121, 0.4);
    box-shadow: 0 4px 12px rgba(255, 62, 121, 0.15);
}

/* 暗黑模式页面背景 */
body.dark-mode .app-page {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255, 62, 121, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(var(--brand-purple-rgb), 0.05) 0%, transparent 50%);
}

/* 暗黑模式下的二级页面样式 */
body.dark-mode #edit-profile-page,
body.dark-mode #settings-page,
body.dark-mode #statistics-page,
body.dark-mode #vip-page,
body.dark-mode #help-page,
body.dark-mode #about-page {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(255, 62, 121, 0.1) 0%, transparent 35%),
        radial-gradient(circle at 85% 85%, rgba(var(--brand-purple-rgb), 0.1) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(var(--brand-accent-rgb), 0.05) 0%, transparent 50%);
}

/* 统计页面功能列表图标颜色适配 */
body:not(.dark-mode) #statistics-page .stats-list-item .stats-feature i,
body:not(.dark-mode) #statistics-page .stats-feature i {
    color: var(--primary-color);
}

/* 暗黑模式下的二级页面内容区域 */
body.dark-mode #edit-profile-page .page-content,
body.dark-mode #settings-page .page-content,
body.dark-mode #statistics-page .page-content,
body.dark-mode #vip-page .page-content,
body.dark-mode #help-page .page-content,
body.dark-mode #about-page .page-content {
    background-image: 
        linear-gradient(135deg, rgba(40, 40, 40, 0.7) 0%, rgba(30, 30, 30, 0.5) 100%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: var(--border-radius-lg);
    border-top: 1px solid rgba(60, 60, 60, 0.8);
    border-left: 1px solid rgba(60, 60, 60, 0.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    margin: 5px;
    padding: 20px 20px calc(var(--bottom-nav-height) + 20px) 20px;
}

.app-page::-webkit-scrollbar {
    width: 4px;
}

.app-page::-webkit-scrollbar-track {
    background: transparent;
}

.app-page::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

#home-page {
    padding-bottom: 40px;
}

.app-page.active {
    display: block;
}

/* 首页样式 */
/* 首页轮播卡片 */
.hero-carousel {
    position: relative;
    margin: 15px;
    height: 360px;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); /* 确保即使内容未加载也有背景色 */
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 改为hidden防止滚动 */
    -webkit-overflow-scrolling: touch;
}

.hero-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: flex-start;
    padding: 0 20px;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.hero-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 1;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    z-index: 0; /* 修改z-index，确保背景显示在内容下面 */
    overflow: hidden;
}

.hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    z-index: 1; /* 确保模式在背景之上 */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.pattern-2 {
    background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.pattern-3 {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.pattern-4 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-content {
    position: relative;
    z-index: 2; /* 提高z-index确保内容在最顶层 */
    color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hero-badge {
    display: inline-block;
    padding: 5px 12px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-self: flex-start;
    height: 22px;
    min-height: 22px;
    max-height: 22px;
    line-height: 12px;
    flex-shrink: 0;
}

.hero-content h2 {
    font-size: 28px;
    margin: 0 0 10px 0;
    font-weight: 700;
    background-color: transparent;
    align-self: flex-start;
    line-height: 1.2;
    display: -webkit-box;
    /* 设置行数限制,实现跨浏览器兼容 */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 67px;
    min-height: 67px;
    max-height: 67px;
}

.hero-content p {
    font-size: 16px;
    margin: 0 0 20px 0;
    opacity: 0.9;
    line-height: 1.5;
    background-color: transparent;
    align-self: flex-start;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    overflow: hidden;
}

.hero-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-self: flex-start;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    align-items: flex-start;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 24px;
    font-weight: 700;
}

.stat-label {
    font-size: 12px;
    opacity: 0.8;
}

.hero-cta-btn {
    background-color: var(--bg-secondary);
    color: var(--primary-color);
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: auto;
    margin-bottom: 50px;
    align-self: flex-start;
    height: 44px;
    min-height: 44px;
    flex-shrink: 0;
}

.hero-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.carousel-pagination {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; /* 显示指示器 */
    gap: 8px;
    z-index: 3;
    transition: opacity 0.3s ease;
    padding: 5px 12px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 15px;
}

/* 当页面滚动时隐藏指示器 */
.carousel-pagination.hidden {
    opacity: 0;
}

.pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-dot.active {
    width: 24px;
    border-radius: 4px;
    background-color: var(--bg-secondary);
}

.carousel-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: none; /* 隐藏导航按钮 */
    justify-content: space-between;
    padding: 0 10px;
    z-index: 3;
    pointer-events: none;
}

.nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: auto;
}

.nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* 场景卡片滑动区域 */
.scenario-slider {
    margin: 0 0 40px 0; /* 移除左右margin */
    position: relative;
    overflow: visible;
    padding: 30px 0; /* 增加更多上下padding */
}

/* 产品特性展示区域 */
.product-features {
    margin: 0 0 40px 0;
    position: relative;
    overflow: visible;
    padding: 30px 0;
}

.features-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 15px;
    margin: 0 15px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    will-change: scroll-position;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.features-grid::-webkit-scrollbar {
    display: none;
}

.feature-card {
    flex: 0 0 85%;
    min-width: 260px;
    max-width: 300px;
    height: 260px;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    transform: scale(0.90) translateZ(0);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease;
    cursor: pointer;
    animation: fadeInUp 0.6s ease-out;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.feature-card:nth-child(2) { animation-delay: 0.1s; }
.feature-card:nth-child(3) { animation-delay: 0.2s; }
.feature-card:nth-child(4) { animation-delay: 0.3s; }
.feature-card:nth-child(5) { animation-delay: 0.4s; }
.feature-card:nth-child(6) { animation-delay: 0.5s; }

.feature-card:hover {
    transform: scale(0.92) translateY(-4px) translateZ(0);
    box-shadow: 0 12px 32px rgba(var(--brand-accent-rgb), 0.2);
}

.feature-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    z-index: 0;
    transition: transform 0.2s ease-out;
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.feature-card:hover .feature-background {
    transform: scale(1.05) translateZ(0);
}

.feature-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.feature-content {
    position: relative;
    z-index: 1;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-icon i {
    font-size: 24px;
    color: white;
}

.feature-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.feature-description {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.4;
    margin-bottom: 16px;
    flex-grow: 1;
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    align-self: flex-start;
}

.scenarios-container {
    display: flex;
    overflow-x: auto;
    overflow-y: visible; /* 允许垂直方向溢出 */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 15px;
    margin: 0 15px; /* 将margin移到这里 */
    scrollbar-width: none; /* 隐藏Firefox滚动条 */
    -ms-overflow-style: none; /* 隐藏IE滚动条 */
    /* 性能优化 */
    will-change: scroll-position;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scenarios-container::-webkit-scrollbar {
    display: none; /* 隐藏WebKit滚动条 */
}

.scenario-card {
    flex: 0 0 85%;
    min-width: 260px;
    max-width: 300px;
    height: 260px;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    transform: scale(0.90) translateZ(0); /* 适中的初始缩放 */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease;
    cursor: pointer;
    animation: fadeInUp 0.6s ease-out;
    /* 性能优化 */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scenario-card:nth-child(2) { animation-delay: 0.1s; }
.scenario-card:nth-child(3) { animation-delay: 0.2s; }
.scenario-card:nth-child(4) { animation-delay: 0.3s; }

.scenario-card:hover {
    transform: scale(0.92) translateY(-4px) translateZ(0);
    box-shadow: 0 12px 32px rgba(255, 62, 121, 0.2);
}

.scenario-card.active-scenario {
    transform: scale(1.0) translateZ(0); /* 标准大小 */
    box-shadow: 0 16px 40px rgba(255, 62, 121, 0.25);
}

.scenario-card.active-scenario:hover {
    transform: scale(1.02) translateY(-2px) translateZ(0);
    box-shadow: 0 20px 48px rgba(255, 62, 121, 0.3);
}

.scenario-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    z-index: 0;
    transition: transform 0.2s ease-out;
    /* 性能优化 */
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scenario-card:hover .scenario-background {
    transform: scale(1.05) translateZ(0);
}

.scenario-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.pattern-chat {
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.pattern-reply {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath fill-rule='evenodd' d='M41 37.59V25h-2v12.59l-8.9-8.9-1.41 1.41 11.3 11.3 11.3-11.3-1.41-1.41-8.88 8.9zM67 5.41V18h-2V5.41l-8.9 8.9-1.41-1.41L65.99 1.59l11.3 11.31-1.41 1.41-8.88-8.9zM16 37.59V25h-2v12.59l-8.9-8.9-1.41 1.41 11.3 11.3 11.3-11.3-1.41-1.41-8.88 8.9z'/%3E%3C/g%3E%3C/svg%3E");
}

.pattern-mood {
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.pattern-date {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.15' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.pattern-conflict {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.172L6.172 0h5.656L0 11.828V6.172zm40 5.656L28.172 0h5.656L40 6.172v5.656zM6.172 12l12-12h3.656l12 12h-5.656L20 3.828 11.828 12H6.172zm12 0L20 10.172 21.828 12h-3.656z' fill='%23ffffff' fill-opacity='0.15' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.pattern-distance {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.scenario-content {
    position: relative;
    z-index: 1;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 15px;
    height: 100%;
    box-sizing: border-box;
    justify-content: space-between; /* 恢复space-between布局 */
    /* 确保内容不会因为卡片缩放而变形 */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scenario-badge {
    display: inline-block;
    padding: 4px 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-self: flex-start;
    flex-shrink: 0; /* 防止标签被压缩 */
}

.scenario-content h4 {
    font-size: 16px;
    margin: 0 0 6px 0;
    font-weight: 700;
    flex-shrink: 0; /* 防止标题被压缩 */
}

.scenario-content p {
    font-size: 12px;
    margin: 0;
    opacity: 0.9;
    line-height: 1.3; /* 稍微减少行高以节省空间 */
    margin-bottom: 8px;
    white-space: pre-line; /* 支持换行符显示 */
    flex: 1; /* 允许描述文本占用剩余空间但不超出 */
    overflow: hidden; /* 防止溢出 */
}

.scenario-stats {
    display: flex;
    gap: 15px;
    margin: 8px 0;
    flex-shrink: 0; /* 防止统计信息被压缩 */
}

.mini-stat {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 14px;
    font-weight: 700;
}

.stat-text {
    font-size: 10px;
    opacity: 0.8;
}

.scenario-btn {
    background-color: var(--bg-secondary);
    color: var(--primary-color);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: block;
    align-self: flex-start;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.scenario-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.scenario-btn:hover::before {
    left: 100%;
}

.scenario-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.scenario-indicators {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    transition: opacity 0.3s ease;
    padding: 5px 12px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* 当页面滚动时隐藏指示器 */
.scenario-indicators.hidden {
    opacity: 0;
}

.indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ddd;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 暗黑模式下指示器 */
body.dark-mode .indicator-dot {
    background-color: #555;
}

.indicator-dot.active {
    background-color: var(--primary-color);
    width: 18px;
    border-radius: 3px;
}

/* 移除场景导航按钮样式 */

/* 即时体验区域 */
.quick-experience {
    margin: 20px 15px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.quick-experience.enhanced {
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.03) 0%, rgba(255, 119, 179, 0.06) 50%, rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.15);
    box-shadow: 0 8px 32px rgba(var(--brand-pink-rgb), 0.12), 0 2px 8px rgba(var(--brand-pink-rgb), 0.08);
    animation: fadeInUp 0.8s ease-out;
    position: relative;
    overflow: hidden;
}

.quick-experience.enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 62, 121, 0.8), var(--primary-color), rgba(255, 119, 179, 0.8), transparent);
    animation: shimmer 2s infinite;
}

/* 深色模式适配 - 快速体验区域 */
body.dark-mode .quick-experience {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.98) 0%, rgba(30, 30, 35, 0.98) 100%);
    border: 1px solid rgba(255, 62, 121, 0.1);
}

body.dark-mode .quick-experience.enhanced {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.98) 0%, rgba(35, 35, 45, 0.98) 100%);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.2);
    box-shadow: 0 8px 32px rgba(var(--brand-pink-rgb), 0.2);
}

body.dark-mode .experience-title {
    color: #fff;
}

body.dark-mode .experience-subtitle {
    color: #ccc;
}

body.dark-mode .demo-chat {
    background: linear-gradient(135deg, rgba(45, 45, 45, 0.95) 0%, rgba(35, 35, 40, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .demo-chat.enhanced-chat {
    background: linear-gradient(135deg, rgba(45, 45, 45, 0.95) 0%, rgba(35, 35, 40, 0.95) 100%);
    border: 1px solid rgba(255, 62, 121, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .message-content {
    background: rgba(50, 50, 55, 0.8);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .demo-message p {
    color: #fff;
}

body.dark-mode .chat-input-area {
    background: rgba(40, 40, 45, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .chat-input {
    background: rgba(50, 50, 55, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.dark-mode .chat-input::placeholder {
    color: #999;
}

body.dark-mode .ai-suggestions {
    background: rgba(40, 40, 45, 0.95);
    border: 1px solid rgba(255, 62, 121, 0.1);
}

body.dark-mode .suggestion-item {
    background: rgba(50, 50, 55, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
}

body.dark-mode .suggestion-item:hover {
    background: rgba(var(--brand-pink-rgb), 0.1);
    border-color: rgba(var(--brand-pink-rgb), 0.2);
}

body.dark-mode .ai-thinking {
    color: #ccc;
}

body.dark-mode .thinking-dots span {
    background: #999;
}

body.dark-mode .demo-input.enhanced-input {
    background: rgba(40, 40, 45, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .input-container input {
    background: rgba(50, 50, 55, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.dark-mode .input-container input:focus {
    border-color: var(--primary-color);
}

body.dark-mode .input-container input::placeholder {
    color: #999;
}

body.dark-mode .feature-tag {
    background: rgba(255, 62, 121, 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.3);
}

body.dark-mode .try-now-btn.enhanced-btn {
    background: linear-gradient(135deg, #ff3e79, #9c27b0);
    color: white;
    border: none;
}

body.dark-mode .try-now-btn.enhanced-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 62, 121, 0.3);
}

body.dark-mode .message-time {
    color: #999;
}

.experience-header {
    text-align: center;
    margin-bottom: 20px;
}

.experience-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 6px 0;
    background: linear-gradient(135deg, #ff3e79, #9c27b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: float 3s ease-in-out infinite;
}

.experience-subtitle {
    font-size: 14px;
    color: var(--text-light);
    margin: 0;
    opacity: 0.8;
}

.demo-chat {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.demo-chat.enhanced-chat {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 248, 252, 0.98) 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(255, 62, 121, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 62, 121, 0.08);
}

.chat-messages {
    padding: 16px;
}

.demo-message.animated {
    animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.demo-message.partner {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff3e79, #9c27b0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-icon {
    font-size: 16px;
}

.message-content {
    flex: 1;
    background: #f8f9fa;
    padding: 12px 16px;
    border-radius: 16px 16px 16px 4px;
    position: relative;
}

.message-content p {
    margin: 0;
    font-size: 15px;
    color: #333;
    line-height: 1.4;
}

.message-time {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    display: block;
}

.ai-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-left: 16px;
    background: rgba(var(--brand-pink-rgb), 0.05);
    border-radius: 12px;
    margin-bottom: 16px;
    position: relative;
}

/* 浅色模式下AI思考动画样式优化 */
body:not(.dark-mode) .ai-thinking {
    background: rgba(var(--brand-pink-rgb), 0.08);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.1);
    position: relative;
    left: 0;
    top: 0;
    transform: none;
}

.thinking-dots {
    display: flex;
    gap: 4px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: thinking 1.4s infinite ease-in-out;
}

.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes thinking {
    0%, 80%, 100% { 
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% { 
        transform: scale(1);
        opacity: 1;
    }
}

.thinking-text {
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 500;
}

/* 暗黑模式演示聊天 */
body.dark-mode .demo-chat {
    background-color: var(--bg-secondary);
}

.demo-message {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

/* 暗黑模式消息边框 */
body.dark-mode .demo-message {
    border-bottom: 1px solid #333;
}

.demo-message.partner {
    background-color: #f9f9f9;
}

/* 暗黑模式合作伙伴消息背景 */
body.dark-mode .demo-message.partner {
    background-color: #252525;
}

/* 聊天消息中的伙伴消息样式 */
.message.partner-message {
    justify-content: flex-start;
}

.message.partner-message .message-content {
    background-color: #f0f0f0;
    color: #333;
    margin-left: 10px;
}

body.dark-mode .message.partner-message .message-content {
    background-color: #3a3a3a;
    color: #fff;
}

.message-avatar.partner {
    background-color: #ffe4e6;
    border: 2px solid #ff6b9d;
}

body.dark-mode .message-avatar.partner {
    background-color: #4a2c3a;
    border: 2px solid #ff6b9d;
}

.demo-message p {
    margin: 0;
    font-size: 15px;
}

.demo-input {
    display: flex;
    padding: 10px 15px;
    gap: 10px;
}

.demo-input.enhanced-input {
    background: #fafbfc;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.input-container {
    position: relative;
}

.input-container input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s ease;
    background: var(--bg-secondary);
    box-sizing: border-box;
}

.input-container input:focus {
    border-color: var(--primary-color);
}

.input-features {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.feature-tag {
    font-size: 11px;
    padding: 4px 8px;
    background: rgba(255, 62, 121, 0.1);
    color: var(--primary-color);
    border-radius: 12px;
    font-weight: 500;
}

.demo-input input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
}

/* 暗黑模式输入框 */
body.dark-mode .demo-input input {
    border: 1px solid #444;
    background-color: #333;
    color: #f1f1f1;
}

.try-now-btn {
    padding: 8px 16px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.try-now-btn.enhanced-btn {
    background: linear-gradient(135deg, #ff3e79, #9c27b0);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(255, 62, 121, 0.3);
}

.try-now-btn.enhanced-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 62, 121, 0.4);
}

.btn-icon {
    font-size: 16px;
}

.experience-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 62, 121, 0.1);
}

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

.stat-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2px;
    animation: pulse 2s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(255, 62, 121, 0.1);
}

.stat-label {
    font-size: 12px;
    color: var(--text-light);
}

.try-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.relationship-hub {
    margin: 24px 15px;
    padding: 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 126, 95, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 244, 238, 0.94));
    box-shadow: 0 20px 50px rgba(226, 124, 77, 0.12);
}

.relationship-hub-header {
    margin-bottom: 20px;
}

.relationship-hub-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(228, 107, 61, 0.12);
    color: #b84c24;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.relationship-hub-header h3 {
    margin: 12px 0 8px;
    font-size: 28px;
    line-height: 1.2;
    color: #1f2130;
}

.relationship-hub-header p {
    margin: 0;
    color: #5e6175;
    line-height: 1.6;
}

.relationship-hub-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 18px;
}

.relationship-quick-card,
.relationship-status-card {
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(232, 161, 131, 0.2);
}

.relationship-card-topline,
.relationship-status-actions,
.relationship-inline-fields,
.relationship-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.relationship-card-topline {
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.relationship-card-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 126, 95, 0.14);
    color: #c0552c;
    font-size: 12px;
    font-weight: 700;
}

.relationship-card-pill.muted {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
}

.relationship-card-hint {
    color: #6f7285;
    font-size: 13px;
}

.relationship-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.relationship-field span {
    font-size: 13px;
    font-weight: 600;
    color: #3c4057;
}

.relationship-textarea,
.relationship-input {
    width: 100%;
    border: 1px solid rgba(198, 147, 125, 0.25);
    background: rgba(255, 255, 255, 0.94);
    color: #1f2130;
    border-radius: 16px;
    padding: 13px 14px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.relationship-textarea {
    resize: vertical;
    min-height: 110px;
}

.relationship-textarea:focus,
.relationship-input:focus {
    outline: none;
    border-color: rgba(228, 107, 61, 0.5);
    box-shadow: 0 0 0 4px rgba(228, 107, 61, 0.12);
}

.relationship-card-actions,
.relationship-status-actions,
.relationship-inline-fields {
    flex-wrap: wrap;
}

.relationship-primary-btn,
.relationship-secondary-btn,
.relationship-text-btn {
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.relationship-primary-btn:hover,
.relationship-secondary-btn:hover,
.relationship-text-btn:hover {
    transform: translateY(-1px);
}

.relationship-primary-btn {
    padding: 12px 18px;
    background: linear-gradient(135deg, #ff7e5f, #ff5e62);
    color: #fff;
    box-shadow: 0 12px 28px rgba(255, 94, 98, 0.22);
}

.relationship-secondary-btn {
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.92);
    color: #c0552c;
    border: 1px solid rgba(228, 107, 61, 0.22);
}

.relationship-text-btn {
    padding: 10px 0;
    background: transparent;
    color: #5a5f7d;
}

.relationship-text-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.relationship-status-body h4 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #1f2130;
}

.relationship-status-body p {
    margin: 0;
    color: #5e6175;
    line-height: 1.6;
}

.relationship-status-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.relationship-status-tags span {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 126, 95, 0.12);
    color: #8e4728;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .relationship-hub {
        padding: 20px;
    }

    .relationship-hub-header h3 {
        font-size: 24px;
    }

    .relationship-hub-grid {
        grid-template-columns: 1fr;
    }

    .relationship-inline-fields,
    .relationship-status-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* 卡片容器 */
.app-card-container {
    margin: 15px 15px 20px 15px;
}

/* 功能区域样式 */
.features-section {
    margin: 15px 15px 20px 15px;
    display: block;
}

.section-title {
    margin: 0 0 24px 0;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: var(--text-color);
    position: relative;
    padding-bottom: 12px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.features-section .feature-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.95) 100%);
    border: 1px solid rgba(255, 62, 121, 0.08);
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: fadeInUp 0.6s ease-out;
}

.features-section .feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(255, 62, 121, 0.15);
    border-color: rgba(255, 62, 121, 0.15);
}

.features-section .feature-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ff3e79, #9c27b0);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    font-size: 18px;
    box-shadow: 0 3px 12px rgba(255, 62, 121, 0.3);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    align-self: center !important;
}

.features-section .feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.features-section .feature-content {
    flex: 1;
    padding: 4px 0;
    align-self: center !important;
}

.features-section .feature-content h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 3px 0;
    color: #333;
    line-height: 1.3;
}

.features-section .feature-content p {
    font-size: 12px;
    color: #666;
    margin: 0;
    opacity: 0.9;
    line-height: 1.3;
}

.features-section .feature-arrow {
    color: var(--primary-color);
    opacity: 0.7;
    margin-left: auto;
    font-size: 14px;
    align-self: center !important;
    transition: transform 0.3s ease;
}

.features-section .feature-item:hover .feature-arrow {
    transform: translateX(4px);
    opacity: 1;
}

/* 深色模式适配 */
body.dark-mode .features-section .feature-item {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95) 0%, rgba(30, 30, 35, 0.95) 100%);
    border: 1px solid rgba(255, 62, 121, 0.08);
}

body.dark-mode .features-section .feature-content h3 {
    color: #fff;
}

body.dark-mode .features-section .feature-content p {
    color: #ccc;
}

body.dark-mode .features-section .feature-arrow {
    color: var(--primary-color);
}

body.dark-mode .features-section .feature-item:hover {
    border-color: rgba(255, 62, 121, 0.15);
    box-shadow: 0 12px 32px rgba(255, 62, 121, 0.2);
}

.app-section-title {
    margin: 0 0 24px 0;
    font-size: 22px;
    font-weight: 700;
    position: relative;
    display: block;
    text-align: center;
    color: var(--text-color);
    padding-bottom: 12px;
}

.app-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.app-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 暗黑模式卡片 */
body.dark-mode .app-card {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.9) 0%, rgba(30, 30, 30, 0.8) 100%);
    border: 1px solid rgba(60, 60, 60, 0.2);
}

/* 增强功能区域 */
.enhanced-features {
    padding: 0;
}



/* 功能列表 */
.feature-item {
    display: flex;
    align-items: center;
    padding: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: var(--border-radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.feature-item.enhanced-feature {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.95) 100%);
    border: 1px solid rgba(255, 62, 121, 0.08);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    animation: fadeInUp 0.6s ease-out;
    display: flex !important;
    align-items: center;
}

.feature-item.enhanced-feature:nth-child(1) { animation-delay: 0s; }
.feature-item.enhanced-feature:nth-child(2) { animation-delay: 0.1s; }
.feature-item.enhanced-feature:nth-child(3) { animation-delay: 0.2s; }
.feature-item.enhanced-feature:nth-child(4) { animation-delay: 0.3s; }
.feature-item.enhanced-feature:nth-child(5) { animation-delay: 0.4s; }

.feature-item.enhanced-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 62, 121, 0.05), transparent);
    transition: left 0.6s;
}

.feature-item.enhanced-feature:hover::before {
    left: 100%;
}

.feature-icon-wrapper {
    position: relative;
    margin-right: 16px;
}

.feature-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255, 62, 121, 0.2), transparent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-item.enhanced-feature:hover .feature-glow {
    opacity: 1;
}

/* 暗黑模式功能项 */
body.dark-mode .feature-item {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.9) 0%, rgba(30, 30, 30, 0.8) 100%);
    border: 1px solid rgba(60, 60, 60, 0.2);
}

body.dark-mode .feature-item.enhanced-feature {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95) 0%, rgba(30, 30, 35, 0.95) 100%);
    border: 1px solid rgba(255, 62, 121, 0.08);
}

.feature-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 62, 121, 0.1);
}

.feature-item.enhanced-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(255, 62, 121, 0.15);
    border-color: rgba(255, 62, 121, 0.15);
}

.feature-item:active {
    transform: translateY(0);
}

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: var(--brand-gradient-10);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    transition: var(--transition);
    position: relative;
    z-index: 2;
    align-self: center;
}

.feature-item.enhanced-feature .feature-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #ff3e79, #9c27b0);
    color: white;
    box-shadow: 0 4px 16px rgba(255, 62, 121, 0.3);
    margin-right: 0;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1);
}

.feature-item.enhanced-feature:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-icon i {
    font-size: 22px;
}

.feature-content {
    flex: 1;
    align-self: center;
}

.feature-content h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
}

.feature-item.enhanced-feature .feature-content h3 {
    font-size: 17px;
    font-weight: 700;
    background: linear-gradient(135deg, #333, #666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.dark-mode .feature-item.enhanced-feature .feature-content h3 {
    background: linear-gradient(135deg, #fff, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feature-content p {
    margin: 0;
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.4;
}

.feature-item.enhanced-feature .feature-content p {
    font-size: 13px;
    color: #666;
    opacity: 0.9;
}

.feature-arrow {
    color: #ccc;
    margin-left: auto;
    font-size: 14px;
    transition: transform 0.3s ease;
    align-self: center;
}

.feature-item.enhanced-feature .feature-arrow {
    color: var(--primary-color);
    opacity: 0.7;
}

.feature-item.enhanced-feature:hover .feature-arrow {
    transform: translateX(4px);
    opacity: 1;
}

/* 暗黑模式特性箭头 */
body.dark-mode .feature-arrow {
    color: var(--primary-color);
}

/* Discover页面样式统一 - 现代化设计 */
#discover-page .app-card-container:first-of-type {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px;
    margin-bottom: 20px;
}

#discover-page .feature-item {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.96) 0%, 
        rgba(250, 252, 255, 0.98) 50%,
        rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(255, 62, 121, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    min-height: 72px;
    justify-content: flex-start;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(var(--brand-pink-rgb), 0.1), 
                 0 1px 4px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(8px);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

#discover-page .feature-item::before {
    display: none;
}

#discover-page .feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(255, 62, 121, 0.15), 
                0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 62, 121, 0.2);
}

#discover-page .feature-item:hover::before {
    opacity: 1;
}

#discover-page .feature-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff3e79 0%, #9c27b0 100%);
    color: white;
    border-radius: 10px;
    margin: 0 2px 0 2px;
    font-size: 18px;
    box-shadow: 0 3px 10px rgba(255, 62, 121, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    position: relative;
}

#discover-page .feature-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
    pointer-events: none;
}

#discover-page .feature-item:hover .feature-icon {
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(255, 62, 121, 0.35);
}

#discover-page .feature-content h3 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    margin: 0 0 1px 0;
    color: #222;
    line-height: 1.25;
}

#discover-page .feature-content p {
    font-size: 12.5px;
    color: #5f6b7a;
    margin: 0;
    opacity: 0.95;
    line-height: 1.4;
}

#discover-page .feature-arrow {
    display: none;
}

/* 深色模式下Discover页面样式 - 增强优先级 */
body.dark-mode #discover-page .feature-item {
    background: linear-gradient(145deg, rgba(32, 32, 36, 0.92) 0%, rgba(24, 24, 28, 0.94) 100%) !important;
    border: 1px solid rgba(255, 62, 121, 0.12) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.18) !important;
    min-height: 72px;
    padding: 10px 12px;
}

body.dark-mode #discover-page .feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 62, 121, 0.2) !important;
}

body.dark-mode #discover-page .feature-icon {
    background: linear-gradient(135deg, #ff3e79, #9c27b0) !important;
    color: white !important;
}

body.dark-mode #discover-page .feature-content h3 {
    color: #fff !important;
}

body.dark-mode #discover-page .feature-content p {
    color: #c2c8d0 !important;
}

body.dark-mode #discover-page .feature-arrow {
    display: none !important;
}

/* 额外的深色模式强制样式 */
.dark-mode #discover-page .feature-icon {
    background: linear-gradient(135deg, #ff3e79, #9c27b0) !important;
    color: white !important;
}

.dark-mode #discover-page .feature-item {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95) 0%, rgba(30, 30, 35, 0.95) 100%) !important;
    border: 1px solid rgba(255, 62, 121, 0.08) !important;
}

/* Hot Topics 区域与学习中心对齐 */
#discover-page .app-card-container:nth-of-type(2) {
    padding: 0 12px;
    margin-bottom: 20px;
}

/* 响应式布局：学习中心改为纵向列表，保持两侧留白和间距在不同屏幕一致 */
@media (max-width: 360px) {
  #discover-page .app-card-container:first-of-type {
    padding: 0 12px;
    gap: 10px;
  }
  
  #discover-page .app-card-container:nth-of-type(2) {
    padding: 0 12px;
    margin-bottom: 20px;
  }
}
@media (min-width: 768px) {
  #discover-page .app-card-container:first-of-type {
    padding: 0 20px;
    gap: 14px;
  }
  
  #discover-page .app-card-container:nth-of-type(2) {
    padding: 0 20px;
    margin-bottom: 20px;
  }
}

/* Discover Page Styles - News Style H5 */
.discover-header {
    padding: 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.discover-search {
    position: relative;
    margin-bottom: 16px;
}

.discover-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

.discover-search input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-color);
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.discover-search input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.1);
}

.discover-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.category-tab {
    padding: 8px 16px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.category-tab:hover:not(.active) {
    background: var(--primary-color);
    color: white;
    opacity: 0.8;
}

/* Featured Carousel */
.discover-featured {
    padding: 16px;
    background: var(--card-bg);
}

.featured-carousel {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.featured-item {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, var(--primary-color), #ff1493);
    display: none;
    cursor: pointer;
}

.featured-item.active {
    display: block;
}

.featured-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

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

.featured-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
}

.featured-badge {
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    align-self: flex-start;
}

.featured-content {
    color: white;
}

.featured-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.featured-content p {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 12px;
}

.featured-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
}

.featured-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.featured-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: var(--primary-color);
}

/* Content List */
.discover-content {
    padding: 0 16px 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.content-item {
    display: flex;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.content-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.content-thumbnail {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 12px;
    flex-shrink: 0;
}

.content-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-type-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--primary-color);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.content-type-badge.video {
    background: #ff6b35;
}

.content-type-badge.test {
    background: #4ecdc4;
}

.video-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.content-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content-info h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
    line-height: 1.3;
}

.content-info p {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.content-category {
    background: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.content-time {
    font-size: 12px;
    color: var(--text-light);
}

.content-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-light);
}

.content-stats span {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Content Detail Page */
#content-detail-page {
    display: none;
    background: var(--bg-primary);
    min-height: 100vh;
}

.content-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.back-btn:hover {
    background: var(--border-color);
}

.header-actions {
    display: flex;
    gap: 8px;
}

.header-actions button {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.header-actions button:hover {
    background: var(--border-color);
}

.content-detail-body {
    padding: 16px;
}

.content-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
    line-height: 1.3;
}

.content-meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

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

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.author-details {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.publish-time {
    font-size: 12px;
    color: var(--text-light);
}

.content-stats-detail {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: var(--text-light);
}

.content-stats-detail span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.content-body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 32px;
}

/* Rating System */
.content-rating {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.rating-section {
    text-align: center;
    margin-bottom: 20px;
}

.rating-section h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.star-rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.star-rating i {
    font-size: 24px;
    color: var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.star-rating i:hover,
.star-rating i.active {
    color: #ffd700;
}

.rating-text {
    font-size: 14px;
    color: var(--text-light);
}

.action-buttons {
    display: flex;
    justify-content: space-around;
    gap: 12px;
}

.action-buttons button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: var(--text-primary);
}

.action-buttons button:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.action-buttons button.liked {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Comments Section */
.comments-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.comments-section h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.comment-input-section {
    margin-bottom: 20px;
}

.comment-input-wrapper {
    background: var(--bg-color);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid var(--border-color);
}

.comment-input-wrapper textarea {
    width: 100%;
    min-height: 80px;
    border: none;
    background: none;
    resize: vertical;
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
}

.comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.comment-actions button {
    padding: 6px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.cancel-btn {
    background: var(--border-color);
    color: var(--text-primary);
}

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

.cancel-btn:hover {
    background: var(--text-light);
}

.submit-btn:hover {
    background: #ff1493;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comment-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
}

.comment-author {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.comment-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 8px;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-light);
}

.comment-time {
    color: var(--text-light);
}

.comment-like {
    cursor: pointer;
    transition: all 0.3s ease;
}

.comment-like:hover {
    color: var(--primary-color);
}

/* Discover Page Refresh */
#discover-page,
#content-detail-page {
    background:
        radial-gradient(circle at top left, rgba(var(--brand-pink-rgb), 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
}

body.dark-mode #discover-page,
body.dark-mode #content-detail-page {
    background:
        radial-gradient(circle at top left, rgba(var(--brand-pink-rgb), 0.12), transparent 28%),
        linear-gradient(180deg, #111318 0%, #181b22 100%);
}

.discover-shell,
.discover-detail-page {
    padding: 18px 16px calc(var(--bottom-nav-height) + 28px);
}

.discover-header {
    position: static;
    padding: 0;
    margin-bottom: 18px;
    background: transparent;
    border-bottom: 0;
}

.discover-heading {
    margin-bottom: 14px;
}

.discover-eyebrow,
.discover-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.discover-heading h2,
.discover-section-head h3 {
    margin: 0;
    color: var(--text-color);
}

.discover-heading h2 {
    font-size: 28px;
    line-height: 1.1;
    margin-bottom: 8px;
}

.discover-heading p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.discover-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding: 0 14px;
    min-height: 52px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.12);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .discover-search {
    background: rgba(24, 28, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

.discover-search i {
    position: static;
    transform: none;
}

.discover-search input {
    padding: 0;
    height: 52px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-color);
}

.discover-search input:focus {
    box-shadow: none;
}

.discover-categories {
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

.category-tab {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--text-secondary);
    font-weight: 600;
}

body.dark-mode .category-tab {
    background: rgba(24, 28, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

.discover-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 14px;
}

.discover-results-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
}

.discover-featured,
.discover-content,
.discover-practice {
    padding: 0;
    margin-bottom: 22px;
    background: transparent;
}

.discover-featured-list,
.discover-list {
    display: grid;
    gap: 12px;
}

.discover-featured-card,
.discover-list-card,
.discover-prompt-card {
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.discover-featured-card,
.discover-list-card {
    border-radius: 22px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.1);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.dark-mode .discover-featured-card,
body.dark-mode .discover-list-card {
    background: rgba(24, 28, 35, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}

.discover-featured-card:hover,
.discover-list-card:hover,
.discover-featured-card:focus-visible,
.discover-list-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.1);
    border-color: rgba(var(--brand-pink-rgb), 0.22);
    outline: none;
}

body.dark-mode .discover-featured-card:hover,
body.dark-mode .discover-list-card:hover,
body.dark-mode .discover-featured-card:focus-visible,
body.dark-mode .discover-list-card:focus-visible {
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.34);
}

.discover-featured-topline,
.discover-list-topline,
.discover-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.discover-featured-topline,
.discover-list-topline {
    margin-bottom: 12px;
}

.discover-featured-body {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.discover-featured-copy,
.discover-list-copy {
    flex: 1;
    min-width: 0;
}

.discover-featured-copy h4,
.discover-list-copy h4 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
    color: var(--text-color);
}

.discover-featured-copy p,
.discover-list-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.discover-copy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-light);
}

.discover-list-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.discover-card-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.1);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
}

.discover-card-pill.muted {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-secondary);
}

body.dark-mode .discover-card-pill.muted {
    background: rgba(255, 255, 255, 0.08);
    color: #d7dce5;
}

.discover-featured-time,
.discover-list-time,
.discover-card-meta {
    font-size: 12px;
    color: var(--text-light);
}

.discover-card-meta {
    margin-top: 12px;
}

.discover-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.discover-thumb {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.accent-rose .discover-thumb,
.discover-detail-hero.accent-rose {
    background: linear-gradient(135deg, #ff5c8a 0%, #ff8f70 100%);
}

.accent-violet .discover-thumb,
.discover-detail-hero.accent-violet {
    background: linear-gradient(135deg, #7c4dff 0%, #c471ed 100%);
}

.accent-amber .discover-thumb,
.discover-detail-hero.accent-amber {
    background: linear-gradient(135deg, #ff9f43 0%, #ff6b6b 100%);
}

.accent-coral .discover-thumb,
.discover-detail-hero.accent-coral {
    background: linear-gradient(135deg, #ff7a59 0%, #ffb347 100%);
}

.accent-mint .discover-thumb,
.discover-detail-hero.accent-mint {
    background: linear-gradient(135deg, #23c483 0%, #5ad1e6 100%);
}

.accent-sky .discover-thumb,
.discover-detail-hero.accent-sky {
    background: linear-gradient(135deg, #4f8cff 0%, #56ccf2 100%);
}

.discover-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px dashed rgba(var(--brand-pink-rgb), 0.18);
    color: var(--text-secondary);
    text-align: center;
}

body.dark-mode .discover-empty-state {
    background: rgba(24, 28, 35, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

.discover-empty-state i {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.discover-empty-state h4 {
    margin: 0 0 8px;
    color: var(--text-color);
}

.discover-empty-state p {
    margin: 0;
    max-width: 220px;
    line-height: 1.5;
}

.discover-detail-page {
    padding-top: 14px;
}

.discover-detail-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.discover-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.discover-detail-header .back-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.12);
    box-shadow: var(--shadow-sm);
}

body.dark-mode .discover-detail-header .back-btn {
    background: rgba(24, 28, 35, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

.discover-detail-chat-btn,
.discover-primary-btn,
.discover-secondary-btn {
    min-height: 44px;
    border-radius: 999px;
    padding: 0 18px;
    border: 0;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
}

.discover-detail-chat-btn,
.discover-primary-btn {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 14px 24px rgba(var(--brand-pink-rgb), 0.22);
}

.discover-secondary-btn {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-color);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.12);
}

body.dark-mode .discover-secondary-btn {
    background: rgba(24, 28, 35, 0.92);
    color: #f5f7fb;
    border-color: rgba(255, 255, 255, 0.08);
}

.discover-detail-hero {
    border-radius: 28px;
    padding: 22px;
    color: #fff;
    margin-bottom: 18px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
}

.discover-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.discover-detail-type,
.discover-detail-category {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 700;
}

.discover-detail-hero h1 {
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.15;
}

.discover-detail-summary {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.discover-detail-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
}

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

.discover-detail-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.18);
}

.discover-detail-author-name,
.discover-detail-publish-time {
    display: block;
}

.discover-detail-author-name {
    font-weight: 700;
}

.discover-detail-publish-time,
.discover-detail-stats {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
}

.discover-detail-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.discover-detail-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.discover-article {
    padding: 24px 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.08);
    box-shadow: var(--shadow);
    color: var(--text-color);
}

body.dark-mode .discover-article,
body.dark-mode .discover-practice {
    background: rgba(24, 28, 35, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

.discover-article h3 {
    margin: 20px 0 10px;
    font-size: 18px;
}

.discover-article p,
.discover-article li {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.discover-article ul,
.discover-article ol {
    margin: 0 0 0 18px;
    padding: 0;
}

.discover-practice {
    margin-top: 18px;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.08);
    box-shadow: var(--shadow);
}

.discover-prompt-list {
    display: grid;
    gap: 10px;
}

.discover-prompt-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(var(--brand-pink-rgb), 0.06);
    color: var(--text-color);
}

body.dark-mode .discover-prompt-card {
    background: rgba(255, 255, 255, 0.06);
    color: #f5f7fb;
}

.discover-prompt-card i {
    color: var(--primary-color);
    margin-top: 2px;
}

.discover-prompt-card span {
    line-height: 1.55;
}

.discover-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.discover-detail-actions > button {
    flex: 1;
}

@media (min-width: 768px) {
    .discover-shell,
    .discover-detail-page {
        padding-left: 22px;
        padding-right: 22px;
    }

    .discover-featured-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discover-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .discover-heading h2,
    .discover-detail-hero h1 {
        font-size: 24px;
    }

    .discover-detail-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .discover-detail-stats {
        align-items: flex-start;
    }

    .discover-detail-actions {
        flex-direction: column;
    }
}

/* 用户故事 */
.user-stories {
    margin: 25px 15px;
}

.story-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 暗黑模式故事卡片 */
body.dark-mode .story-card {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.9) 0%, rgba(30, 30, 30, 0.8) 100%);
    border: 1px solid rgba(60, 60, 60, 0.2);
}

.story-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.story-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

.story-user h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.success-tag {
    font-size: 12px;
    background-color: var(--success-color);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: normal;
}

.story-user p {
    margin: 0;
    font-size: 14px;
    color: var(--text-light);
}

.story-content {
    margin-bottom: 15px;
}

.story-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.story-stats {
    display: flex;
    justify-content: space-between;
    text-align: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

/* 暗黑模式故事统计边框 */
body.dark-mode .story-stats {
    border-top: 1px solid #333;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.stat-label {
    font-size: 12px;
    color: var(--text-light);
}

/* 数据统计 */
.stats-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: var(--border-radius);
    padding: 15px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 暗黑模式统计卡片 */
body.dark-mode .stats-card {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.9) 0%, rgba(30, 30, 30, 0.8) 100%);
    border: 1px solid rgba(60, 60, 60, 0.2);
}

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

.big-stat {
    margin-bottom: 15px;
}

.big-stat-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-color);
}

.big-stat-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.big-stat-desc {
    font-size: 12px;
    color: var(--text-light);
}

.stat-row {
    display: flex;
    justify-content: center;
    gap: 25px;
}

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

.small-stat-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--secondary-color);
}

.small-stat-label {
    font-size: 12px;
    color: var(--text-light);
}

/* 常见问题卡片 */
.problem-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.problem-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 暗黑模式问题卡片 */
body.dark-mode .problem-card {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.9) 0%, rgba(30, 30, 30, 0.8) 100%);
    border: 1px solid rgba(60, 60, 60, 0.2);
}

.problem-image {
    height: 100px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px;
}

.problem-image img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/* 深色模式下的图片容器 - 移除背景保持透明 */
body.dark-mode .problem-image {
    background: transparent;
    border: none;
}

/* 确保SVG在深色模式下可见 */
body.dark-mode .problem-image img {
    filter: brightness(1.2) contrast(1.1);
}

.problem-text {
    padding: 12px 15px 15px 15px;
}

.problem-text h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
}

.problem-text p {
    margin: 0;
    font-size: 14px;
    color: var(--text-light);
}

/* 聊天页面样式 */
.chat-page {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 底部导航 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* 暗黑模式底部导航 */
body.dark-mode .bottom-nav {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(25, 25, 25, 0.9) 100%);
    border-top: 1px solid rgba(50, 50, 50, 0.3);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    flex: 1;
    max-width: 80px;
}

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

.tab-item:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.tab-icon {
    font-size: 18px;
    margin-bottom: 3px;
    transition: var(--transition);
    opacity: 0.7;
}

.tab-item.active .tab-icon {
    transform: scale(1.1);
    opacity: 1;
}

.tab-label {
    font-size: 10px;
    font-weight: 500;
}

/* App容器样式 */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
}

/* 聊天页面完整样式 */
.chat-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--bottom-nav-height));
    height: calc(100dvh - var(--bottom-nav-height));
    height: calc(var(--vh, 1vh) * 100 - var(--bottom-nav-height));
    background: linear-gradient(135deg, #f9f9ff 0%, #f0f2fa 100%);
}

/* 暗黑模式聊天内容 */
body.dark-mode .chat-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
}

body.dark-mode .chat-page {
    background: rgba(18, 18, 22, 0.95);
    color: #fff;
}

.chat-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    background: var(--gradient-primary);
    color: white;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: sticky;
    top: 0;
    z-index: 10;
}

.chat-return-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.chat-return-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.chat-return-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.chat-return-copy strong {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.4;
}

.chat-return-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

/* 暗黑模式聊天头部 - 不需要修改，现在使用统一的渐变背景 */

.chat-back-btn, .chat-option-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

/* 暗黑模式聊天按钮 */
body.dark-mode .chat-back-btn, 
body.dark-mode .chat-option-btn {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .chat-return-banner {
    background: rgba(24, 28, 35, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .chat-return-copy strong,
body.dark-mode .chat-return-btn {
    color: rgba(255, 255, 255, 0.92);
}

body.dark-mode .chat-return-btn {
    background: rgba(17, 19, 24, 0.72);
    border-color: rgba(255, 255, 255, 0.08);
}

.chat-back-btn:hover, .chat-option-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* 暗黑模式聊天按钮悬停 */
body.dark-mode .chat-back-btn:hover, 
body.dark-mode .chat-option-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.chat-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    color: white;
}

.chat-title-main {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.chat-title-sub {
    max-width: 100%;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-chip-btn {
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.14);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-color);
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.chat-welcome-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-welcome-label {
    display: inline-flex;
    align-self: flex-start;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chat-welcome-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    color: var(--text-color);
}

.chat-welcome-card p {
    margin: 0;
    color: var(--text-light);
    line-height: 1.6;
}

.chat-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chat-options-menu {
    position: absolute;
    top: 50px;
    right: 10px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 150px;
    z-index: 20;
    display: none;
    overflow: hidden;
    animation: fadeInDown 0.3s ease-out;
}

/* 暗黑模式选项菜单 */
body.dark-mode .chat-options-menu {
    background: #2c2c2c;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.menu-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid #f0f0f0;
}

/* 暗黑模式菜单选项 */
body.dark-mode .menu-option {
    border-bottom: 1px solid #444;
}

/* 暗黑模式菜单选项 */
body.dark-mode .menu-option {
    border-bottom: 1px solid #444;
}

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

.menu-option:hover {
    background-color: #f8f9fa;
}

/* 暗黑模式菜单选项悬停 */
body.dark-mode .menu-option:hover {
    background-color: #333;
}

/* 暗黑模式菜单选项悬停 */
body.dark-mode .menu-option:hover {
    background-color: #333;
}

.menu-icon {
    width: 20px;
    margin-right: 12px;
    text-align: center;
    color: var(--text-light);
}

.menu-text {
    font-size: 14px;
    color: var(--text-color);
}

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    padding-bottom: 20px; /* 减少底部空间，修复右半边布局问题 */
    display: flex;
    flex-direction: column;
    background-color: rgba(249, 249, 255, 0.7);
    /* 移除平滑滚动，避免打字效果完成后的跳变 */
}

#chat-messages {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 15px;
    /* 移除平滑滚动和overflow，让父容器处理滚动 */
    flex: 1;
}

/* 暗黑模式聊天容器 */
body.dark-mode .chat-container {
    background-color: rgba(20, 20, 20, 0.7);
}

body.dark-mode #chat-messages {
    color: #fff;
}

body.dark-mode .chat-messages {
    background: rgba(25, 25, 30, 0.8);
}

body.dark-mode .message {
    color: #fff;
}

body.dark-mode .user-message .message-content {
    background: var(--gradient-primary);
    color: white;
}

body.dark-mode .message.user-message .message-content p {
    color: white;
}

/* 消息基础布局 */
.message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 85%;
    margin-bottom: 4px;
    animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* AI消息布局 */
.ai-message {
    align-self: flex-start;
}

/* 用户消息布局 */
.message.user-message {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 75%;
    margin-right: 0;
}

.user-message .message-avatar {
    background: var(--gradient-primary);
    box-shadow: 0 2px 8px rgba(255, 62, 121, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

body.dark-mode .user-message .message-avatar {
    border: 2px solid rgba(45, 45, 48, 0.9);
    box-shadow: 0 2px 8px rgba(255, 62, 121, 0.3);
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 暗黑模式头像 */
body.dark-mode .message-avatar {
    background-color: #333;
}

/* AI头像样式 - 恢复原来的粉红色主题 */
.message-avatar.ai {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 62, 121, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.message-avatar.ai i {
    font-size: 16px;
}

/* 暗黑模式AI头像 */
body.dark-mode .message-avatar.ai {
    background: var(--gradient-primary);
    border: 2px solid rgba(45, 45, 48, 0.9);
    box-shadow: 0 2px 8px rgba(255, 62, 121, 0.3);
}

/* 基础消息内容样式 */
.message-content {
    flex: 1;
    background: var(--bg-secondary);
    padding: 14px 18px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

/* AI消息特殊样式 - 类似ChatGPT */
.ai-message .message-content {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px 20px 20px 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 0.2s ease;
}

.ai-message .message-content:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.ai-message .message-content::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    border-radius: 2px 0 0 2px;
    transition: width 0.2s ease;
}

.ai-message .message-content:hover::before {
    width: 4px;
}

/* 用户消息样式 */
.user-message .message-content {
    background: var(--gradient-primary);
    color: white;
    border-radius: 20px 20px 20px 20px;
    border: none;
    box-shadow: 0 2px 12px rgba(255, 62, 121, 0.15);
    margin-right: 0;
}

/* 暗黑模式消息内容 */
body.dark-mode .message-content {
    background: #2d2d30;
    color: #e1e1e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .ai-message .message-content {
    background: linear-gradient(135deg, #2d2d30 0%, #343437 100%);
    color: #e1e1e1;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.dark-mode .ai-message .message-content::before {
    background: var(--gradient-primary);
}

/* 消息文本样式 */
.message-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

body.dark-mode .message-content p {
    color: #e1e1e1;
}

.message-quick-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.message-quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(108, 92, 231, 0.16);
    background: rgba(108, 92, 231, 0.08);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.user-message .message-quick-action-btn {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

body.dark-mode .message-quick-action-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.chat-selection-action {
    position: fixed;
    left: 50%;
    bottom: 104px;
    transform: translate(-50%, 18px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7b54 0%, #ff477e 100%);
    color: #fff;
    box-shadow: 0 16px 30px rgba(255, 71, 126, 0.28);
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1200;
}

.chat-selection-action.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

body.dark-mode .chat-selection-action {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

/* AI消息中的格式化文本 */
.ai-message .message-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* 代码块样式 */
.message-content pre {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    overflow-x: auto;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.4;
}

body.dark-mode .message-content pre {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e1e1e1;
}

/* 行内代码样式 */
.message-content code {
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 14px;
    color: #d73a49;
}

body.dark-mode .message-content code {
    background: rgba(255, 255, 255, 0.1);
    color: #79c0ff;
}

/* 强调文本样式 */
.message-content strong {
    font-weight: 600;
    color: #1a1a1a;
}

body.dark-mode .message-content strong {
    color: #ffffff;
}

/* 列表样式 */
.message-content ul,
.message-content ol {
    margin: 8px 0;
    padding-left: 20px;
}

.message-content li {
    margin: 4px 0;
    line-height: 1.5;
}

/* 引用块样式 */
.message-content blockquote {
    border-left: 3px solid #10a37f;
    margin: 8px 0;
    padding: 8px 0 8px 16px;
    background: rgba(16, 163, 127, 0.05);
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

body.dark-mode .message-content blockquote {
    background: rgba(16, 163, 127, 0.1);
    color: #e1e1e1;
}

/* 分隔线样式 */
.message-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 16px 0;
}

body.dark-mode .message-content hr {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* AI消息标识 - 移除闪烁动画 */
.ai-message::after {
    content: 'AI';
    position: absolute;
    top: -8px;
    left: 48px;
    background: linear-gradient(135deg, #10a37f 0%, #1a7f64 100%);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    opacity: 0.8;
    z-index: 1;
    letter-spacing: 0.5px;
    /* 完全静态显示，无任何动画或过渡效果 */
    transition: none;
    animation: none;
}

/* 消息时间戳 */
.message-timestamp {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 4px;
    text-align: right;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message:hover .message-timestamp {
    opacity: 1;
}

body.dark-mode .message-timestamp {
    color: rgba(255, 255, 255, 0.5);
}

.ai-message .message-timestamp {
    text-align: left;
}

/* 消息状态指示器 */
.message-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.message:hover .message-status {
    opacity: 1;
}

body.dark-mode .message-status {
    color: rgba(255, 255, 255, 0.5);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10a37f;
}

/* 响应式优化 */
@media (max-width: 768px) {
    #chat-messages {
        padding: 16px 12px;
        gap: 16px;
    }
    
    .message {
        max-width: 90%;
    }
    
    .message.user-message {
        max-width: 85%;
    }
    
    .message-content {
        padding: 12px 16px;
    }
    
    .ai-message::after {
        left: 40px;
    }
}

.message-image img {
    max-width: 200px;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.message-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

/* 暗黑模式文件消息 */
body.dark-mode .message-file {
    background-color: rgba(255, 255, 255, 0.05);
}

.file-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-info {
    flex: 1;
}

.file-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.file-size {
    font-size: 12px;
    color: var(--text-light);
}

.typing-indicator .message-content {
    background: var(--bg-secondary);
    /* 移除脉冲动画，减少视觉干扰 */
}

/* 暗黑模式打字指示器 */
body.dark-mode .typing-indicator .message-content {
    background: #2c2c2c;
}

.typing-dot {
    animation: typingDot 1.4s infinite;
    font-size: 18px;
    margin: 0 2px;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* 打字光标样式 */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: #10a37f;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursorBlink 1s infinite;
}

.typing-cursor.preparing {
    animation: none;
    opacity: 0.8;
}

.typing-cursor.typing {
    animation: cursorBlink 1s infinite;
}

body.dark-mode .typing-cursor {
    background-color: #10a37f;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 消息完成后的平滑过渡 - 移除过渡效果减少闪烁 */

.ai-message.preparing .message-content {
    opacity: 1;
}

.ai-message:not(.preparing) .message-content {
    opacity: 1;
    opacity: 1;
}

.chat-input-wrapper {
    padding: 15px;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0;
}

/* 暗黑模式输入包装器 */
body.dark-mode .chat-input-wrapper {
    background: transparent;
    border-top: 1px solid rgba(50, 50, 50, 0.1);
}

.chat-input-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-secondary);
    border-radius: 25px;
    padding: 8px;
    box-shadow: var(--shadow);
}

/* 暗黑模式输入框 */
body.dark-mode .chat-input-box {
    background: #2c2c2c;
    box-shadow: var(--shadow);
}

.chat-attach-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

/* 暗黑模式附件按钮 */
body.dark-mode .chat-attach-btn {
    background-color: #444;
    color: #f1f1f1;
}

.chat-attach-btn:hover {
    background-color: var(--primary-color);
    color: white;
    transform: rotate(45deg);
}

.chat-input-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-input-field {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 8px 12px;
    background: transparent;
    border-radius: 20px;
}

/* 暗黑模式输入字段 */
body.dark-mode .chat-input-field {
    color: #f1f1f1;
    background: transparent;
    border-radius: 20px;
}

body.dark-mode .chat-input-field::placeholder {
    color: #999;
}

body.dark-mode .chat-title {
    color: #fff;
}

body.dark-mode .chat-title-sub {
    color: rgba(255, 255, 255, 0.72);
}

body.dark-mode .welcome-message {
    color: #fff;
}

body.dark-mode .welcome-message p {
    color: #fff;
}

/* ─── 现场指挥台空状态 ─── */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 24px;
    gap: 24px;
}

.chat-empty-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.chat-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.15), rgba(var(--brand-purple-rgb), 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.chat-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.chat-empty-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.chat-shortcut-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 380px;
}

.chat-shortcut-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.12);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-color);
    font-weight: 500;
}

.chat-shortcut-btn i {
    font-size: 15px;
    color: var(--primary-color);
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.chat-shortcut-btn:hover,
.chat-shortcut-btn:active {
    background: rgba(var(--brand-pink-rgb), 0.07);
    border-color: rgba(var(--brand-pink-rgb), 0.28);
    transform: translateY(-1px);
}

.chat-shortcut-image i {
    color: var(--brand-purple, #6c5ce7);
}

body.dark-mode .chat-shortcut-btn {
    background: rgba(30, 34, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .chat-empty-icon {
    background: rgba(255, 62, 121, 0.12);
}

body.dark-mode .chat-shortcut-btn:hover {
    background: rgba(255, 62, 121, 0.1);
    border-color: rgba(255, 62, 121, 0.25);
}

body.dark-mode .chat-chip-btn {
    background: rgba(29, 29, 29, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f5f5f5;
    box-shadow: none;
}

body.dark-mode .chat-welcome-card h3 {
    color: #ffffff;
}

body.dark-mode .chat-welcome-card p {
    color: rgba(255, 255, 255, 0.76);
}

body.dark-mode .chat-welcome-label {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

body.dark-mode .relationship-hub {
    background:
        radial-gradient(circle at top right, rgba(255, 126, 95, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(31, 41, 55, 0.94), rgba(17, 24, 39, 0.96));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

body.dark-mode .relationship-hub-header h3,
body.dark-mode .relationship-status-body h4,
body.dark-mode .relationship-field span {
    color: #f3f4f6;
}

body.dark-mode .relationship-hub-header p,
body.dark-mode .relationship-card-hint,
body.dark-mode .relationship-status-body p,
body.dark-mode .relationship-text-btn {
    color: rgba(226, 232, 240, 0.74);
}

body.dark-mode .relationship-quick-card,
body.dark-mode .relationship-status-card {
    background: rgba(15, 23, 42, 0.76);
    border-color: rgba(148, 163, 184, 0.14);
}

body.dark-mode .relationship-card-pill.muted,
body.dark-mode .relationship-secondary-btn {
    background: rgba(30, 41, 59, 0.9);
    color: #fda085;
}

body.dark-mode .relationship-textarea,
body.dark-mode .relationship-input {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.18);
    color: #f8fafc;
}

body.dark-mode .relationship-status-tags span {
    background: rgba(255, 126, 95, 0.14);
    color: #ffd3c4;
}



.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.chat-send-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow);
}

/* 发送按钮停止状态 */
.chat-send-btn[data-state="stop"] {
    background: linear-gradient(135deg, var(--primary-color) 0%, #e6356b 100%);
    animation: stopButtonPulse 1.5s ease-in-out infinite;
}

.chat-send-btn[data-state="stop"]:hover {
    background: linear-gradient(135deg, #e6356b 0%, #cc2e5d 100%);
    transform: scale(1.05);
}

@keyframes stopButtonPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 62, 121, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 62, 121, 0);
    }
}

.chat-attachments-panel {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.chat-attachments-panel.active {
    opacity: 1;
    max-height: 80px;
}

.attachment-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: var(--transition);
    padding: 8px;
    border-radius: 12px;
}

.attachment-option:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* 暗黑模式附件选项悬停 */
body.dark-mode .attachment-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.attachment-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.attachment-option span {
    font-size: 11px;
    color: var(--text-color);
    font-weight: 500;
}

/* 个人中心重构 */
#relationship-analysis-page,
#relationship-analysis-result-page {
    background:
        radial-gradient(circle at top left, rgba(var(--brand-pink-rgb), 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
}

body.dark-mode #relationship-analysis-page,
body.dark-mode #relationship-analysis-result-page {
    background:
        radial-gradient(circle at top left, rgba(var(--brand-pink-rgb), 0.12), transparent 28%),
        linear-gradient(180deg, #111318 0%, #181b22 100%);
}

.relationship-entry-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(var(--brand-accent-rgb), 0.16), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(249, 245, 255, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.1);
}

.relationship-entry-card h3,
.relationship-hero-card h3,
.relationship-stage-card h3,
.relationship-next-action-card h4,
.relationship-decision-card h4,
.relationship-summary-card h4 {
    margin: 0;
    color: var(--text-color);
}

.relationship-entry-card p,
.relationship-hero-card p,
.relationship-summary-card p,
.relationship-decision-card p,
.relationship-next-action-card p,
.relationship-submit-note,
.relationship-replies-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.relationship-entry-copy {
    display: grid;
    gap: 10px;
}

/* ─── Funnel Awareness Card ─── */
.funnel-card {
    margin: 22px 20px 0;
    padding: 22px 20px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,245,255,0.9));
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
body.dark-mode .funnel-card {
    background: linear-gradient(135deg, rgba(30,30,30,0.95), rgba(24,24,32,0.9));
}
.home-phase-map {
    display: grid;
    gap: 16px;
    margin: 22px 20px 0;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,248,255,0.94));
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.home-phase-map-head {
    display: grid;
    gap: 8px;
}
.home-phase-map-head h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
}
.home-phase-map-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.home-phase-grid {
    display: grid;
    gap: 12px;
}
.home-phase-card {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
}
.home-phase-card.active {
    background: linear-gradient(180deg, rgba(var(--brand-accent-rgb), 0.14), rgba(255, 255, 255, 0.96));
    border-color: rgba(var(--brand-accent-rgb), 0.22);
    box-shadow: 0 14px 28px rgba(108, 92, 231, 0.12);
}
.home-phase-card-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.home-phase-number {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-light);
}
.home-phase-status {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-light);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.home-phase-status.active {
    background: rgba(var(--brand-accent-rgb), 0.16);
    color: var(--primary-color);
}
.home-phase-card h4 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.3;
}
.home-phase-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.home-phase-cta {
    margin-top: 14px;
}
.funnel-card-copy { margin-bottom: 16px; }
.funnel-card-copy h3 { font-size: 16px; line-height: 1.45; margin: 6px 0 8px; }
.funnel-card-copy p { font-size: 13px; line-height: 1.55; color: var(--text-light); margin: 0; }

.funnel-bar-chart { display: grid; gap: 8px; }
.funnel-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 10px;
    position: relative;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0,0,0,0.03);
    overflow: hidden;
}
body.dark-mode .funnel-bar { background: rgba(255,255,255,0.04); }
.funnel-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--brand-gradient-10);
    border-radius: 10px;
    opacity: 0.15;
    transition: width 0.6s ease;
}
.funnel-bar.active .funnel-bar-fill { opacity: 0.35; }
.funnel-bar-label {
    font-size: 13px; font-weight: 600;
    position: relative; z-index: 1;
}
.funnel-bar-pct {
    font-size: 12px; color: var(--text-light);
    position: relative; z-index: 1;
}
.funnel-bar.active { border: 1.5px solid var(--primary-color); }
.funnel-bar.active .funnel-bar-label { color: var(--primary-color); }
.funnel-bar-badge {
    grid-column: 1 / -1;
    font-size: 11px; font-weight: 600;
    color: var(--primary-color);
    position: relative; z-index: 1;
    margin-top: -2px;
}

.home-journey-card {
    display: grid;
    gap: 18px;
    margin: 22px 20px 0;
    padding: 22px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(var(--brand-accent-rgb), 0.14), transparent 28%),
        rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.home-journey-head {
    display: grid;
    gap: 8px;
}

.home-journey-head h3 {
    margin: 0;
    color: var(--text-color);
    font-size: 24px;
    line-height: 1.15;
}

.home-journey-steps {
    display: grid;
    gap: 12px;
}

.home-journey-step {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.home-journey-number {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.home-journey-step h4 {
    margin: 0 0 8px;
    color: var(--text-color);
    font-size: 16px;
}

.home-journey-step p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14px;
}

.discover-phase-pill {
    color: var(--primary-color);
    font-weight: 700;
}

.relationship-guide-card {
    gap: 16px;
}

.relationship-checkpoint-list {
    display: grid;
    gap: 10px;
}

.relationship-checkpoint-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.relationship-checkpoint-list span::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primary-color);
    box-shadow: 0 0 0 5px rgba(var(--brand-pink-rgb), 0.12);
}

.home-secondary-section {
    opacity: 0.92;
}

.home-secondary-copy {
    margin: -4px 0 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14px;
}

.relationship-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.relationship-entry-actions.compact .relationship-secondary-btn {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
}

.relationship-primary-btn,
.relationship-secondary-btn {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.relationship-primary-btn:hover,
.relationship-secondary-btn:hover {
    transform: translateY(-1px);
}

.relationship-primary-btn {
    background: var(--brand-gradient-90);
    color: #fff;
    box-shadow: 0 18px 30px rgba(255, 62, 121, 0.22);
}

.relationship-secondary-btn {
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-color);
    border-color: rgba(15, 23, 42, 0.08);
}

.relationship-page-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

.relationship-analysis-shell,
.relationship-result-shell {
    display: grid;
    gap: 16px;
    padding: 18px 16px calc(32px + env(safe-area-inset-bottom, 0px));
}

.relationship-analysis-form {
    display: grid;
    gap: 16px;
}

.relationship-hero-card,
.relationship-form-card,
.relationship-summary-card,
.relationship-stage-card,
.relationship-signal-card,
.relationship-decision-card,
.relationship-next-action-card,
.relationship-avoid-card,
.relationship-replies-card {
    padding: 20px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ─── 判断依据折叠区 ─── */
.relationship-reasoning-section {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.12);
    overflow: hidden;
}

.relationship-reasoning-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
}

.relationship-reasoning-toggle::-webkit-details-marker { display: none; }

.relationship-reasoning-toggle-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    flex: 1;
}

.relationship-reasoning-toggle-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.relationship-reasoning-chevron {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.relationship-reasoning-section[open] .relationship-reasoning-chevron {
    transform: rotate(180deg);
}

.relationship-reasoning-body {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.relationship-reasoning-body .relationship-avoid-card,
.relationship-reasoning-body .relationship-confidence-card,
.relationship-reasoning-body .relationship-signal-grid {
    box-shadow: none;
    border-radius: 16px;
}

body.dark-mode .relationship-reasoning-section {
    background: rgba(24, 28, 35, 0.72);
    border-color: rgba(255, 255, 255, 0.08);
}

.relationship-form-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.relationship-form-head h4 {
    margin: 0 0 6px;
    color: var(--text-color);
}

.relationship-form-head p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.relationship-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
}

.relationship-form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
}

.relationship-form-textarea,
.relationship-form-select,
.relationship-form-input {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-color);
    font: inherit;
}

.relationship-form-textarea,
.relationship-form-input {
    padding: 14px 16px;
}

.relationship-form-select {
    min-height: 48px;
    padding: 0 16px;
}

.relationship-form-textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.6;
}

.relationship-form-textarea.compact {
    min-height: 110px;
}

.relationship-grid {
    display: grid;
    gap: 12px;
}

.relationship-field {
    display: block;
}

.relationship-checkbox-row {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.relationship-checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.relationship-checkbox input {
    margin-top: 3px;
}

.relationship-submit-card .full-width {
    width: 100%;
}

.relationship-submit-note {
    margin-top: 12px;
    font-size: 13px;
}

.relationship-primary-btn:disabled,
.relationship-secondary-btn:disabled,
.relationship-reply-btn:disabled {
    cursor: not-allowed;
    opacity: 0.66;
    transform: none;
}

.relationship-stage-card {
    background:
        radial-gradient(circle at top right, rgba(var(--brand-accent-rgb), 0.18), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(249, 245, 255, 0.9));
}

.relationship-stage-card h3 {
    margin: 6px 0 10px;
    font-size: 30px;
    line-height: 1.05;
}

/* Funnel context hint in analysis results */
.funnel-context-hint {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(var(--brand-accent-rgb), 0.08);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-light);
}
.funnel-context-hint i {
    color: var(--primary-color);
    flex-shrink: 0;
}
.relationship-funnel-phase-topline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.funnel-context-hint strong {
    font-size: 15px;
    line-height: 1.35;
    color: var(--text-color);
}
.funnel-context-hint p {
    margin: 0;
}

.relationship-signal-grid,
.relationship-decision-grid {
    display: grid;
    gap: 16px;
}

.relationship-card-topline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.relationship-card-label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.1);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.relationship-card-label.positive {
    background: rgba(56, 161, 105, 0.14);
    color: #1f7a4c;
}

.relationship-card-label.warning {
    background: rgba(255, 184, 0, 0.14);
    color: #9a6b00;
}

.relationship-card-label.muted {
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-secondary);
}

.relationship-signal-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: var(--text-color);
}

.relationship-signal-list li {
    line-height: 1.55;
}

.relationship-evidence {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-style: italic;
    color: var(--text-light, #888);
    line-height: 1.5;
    opacity: 0.85;
}

[data-theme="dark"] .relationship-evidence {
    color: rgba(255, 255, 255, 0.45);
}

.relationship-signal-list.compact {
    gap: 8px;
}

.relationship-tip-text {
    margin-top: 10px !important;
    font-size: 13px;
}

.relationship-context-card {
    gap: 14px;
}

.relationship-context-question {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.relationship-context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.relationship-context-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 700;
}

.relationship-context-snippet {
    margin: 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--text-color);
    line-height: 1.6;
}

.relationship-confidence-card {
    gap: 10px;
}

.relationship-confidence-label {
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.4;
}

.relationship-improve-card {
    gap: 12px;
}

.relationship-action-card .relationship-card-topline {
    margin-bottom: 16px;
}

.relationship-replies-list {
    display: grid;
    gap: 12px;
    margin: 16px 0 18px;
}

.relationship-reply-card {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.relationship-reply-card strong {
    display: block;
    margin: 0 0 8px;
    color: var(--text-color);
}

.relationship-reply-card p {
    margin: 0 0 10px;
    color: var(--text-color);
    line-height: 1.6;
}

.relationship-reply-card small {
    display: block;
    margin-bottom: 12px;
    color: var(--text-light);
    line-height: 1.5;
}

.relationship-reply-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Relationship History */
.relationship-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}
.relationship-history-empty {
    text-align: center;
    color: var(--text-light);
    padding: 40px 16px;
    font-size: 14px;
}
.relationship-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    transition: background 0.15s;
}
.relationship-history-item:hover {
    background: rgba(255, 255, 255, 0.95);
}
.relationship-history-item strong {
    color: var(--text-color);
    font-weight: 600;
}
.relationship-history-item span {
    color: var(--text-light);
    font-size: 12px;
    white-space: nowrap;
}
[data-theme="dark"] .relationship-history-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .relationship-history-item:hover {
    background: rgba(255, 255, 255, 0.08);
}
.relationship-history-btn {
    margin-top: 12px;
}

.relationship-reply-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.relationship-copy-btn {
    min-width: 72px;
}

.relationship-carried-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    background: rgba(15, 23, 42, 0.05);
    border-radius: 6px;
}

body.dark-mode .relationship-carried-badge {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.relationship-contact-field {
    margin-bottom: 12px;
}

.relationship-contact-field input {
    width: 100%;
}

.relationship-history-group-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-light);
    padding: 12px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.dark-mode .relationship-entry-card,
body.dark-mode .relationship-hero-card,
body.dark-mode .relationship-form-card,
body.dark-mode .relationship-summary-card,
body.dark-mode .relationship-stage-card,
body.dark-mode .relationship-signal-card,
body.dark-mode .relationship-decision-card,
body.dark-mode .relationship-next-action-card,
body.dark-mode .relationship-avoid-card,
body.dark-mode .relationship-replies-card,
body.dark-mode .relationship-reply-card,
body.dark-mode .home-journey-card,
body.dark-mode .home-journey-step {
    background: rgba(28, 31, 39, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

body.dark-mode .home-phase-map,
body.dark-mode .home-phase-card {
    background: rgba(28, 31, 39, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

body.dark-mode .home-phase-card.active {
    background: linear-gradient(180deg, rgba(108, 92, 231, 0.2), rgba(28, 31, 39, 0.96));
}

body.dark-mode .home-phase-status {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .relationship-secondary-btn,
body.dark-mode .relationship-reply-btn,
body.dark-mode .relationship-form-textarea,
body.dark-mode .relationship-form-select,
body.dark-mode .relationship-form-input,
body.dark-mode .relationship-context-snippet,
body.dark-mode .relationship-checkpoint-list span {
    background: rgba(17, 19, 24, 0.72);
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .relationship-card-label.muted {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
}

body.dark-mode .relationship-card-label.warning {
    color: #f2c86f;
}

body.dark-mode .relationship-card-label.positive {
    color: #84d5a2;
}

@media (min-width: 768px) {
    .home-phase-map {
        margin-left: 24px;
        margin-right: 24px;
    }

    .home-phase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-journey-card {
        margin-left: 24px;
        margin-right: 24px;
    }

    .home-journey-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .relationship-analysis-shell,
    .relationship-result-shell {
        padding-left: 22px;
        padding-right: 22px;
    }

    .relationship-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .relationship-signal-grid,
    .relationship-decision-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .relationship-checkpoint-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .chat-return-banner,
    .relationship-entry-actions,
    .relationship-reply-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .relationship-primary-btn,
    .relationship-secondary-btn,
    .relationship-reply-btn,
    .chat-return-btn {
        width: 100%;
    }

    .relationship-stage-card h3 {
        font-size: 26px;
    }
}

/* ========== Screenshot Upload ========== */

.relationship-upload-area {
    margin-bottom: 10px;
}

.relationship-upload-area .relationship-secondary-btn i {
    margin-right: 6px;
}

/* Horizontal scrolling thumbnail strip */
.relationship-screenshots-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 4px;
    scrollbar-width: none;
}
.relationship-screenshots-strip:empty { padding: 0; }
.relationship-screenshots-strip::-webkit-scrollbar { display: none; }

/* Individual thumbnail card */
.relationship-screenshot-preview {
    position: relative;
    flex: 0 0 auto;
    width: 120px;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.6);
}

.relationship-screenshot-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.relationship-remove-screenshot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.relationship-remove-screenshot:hover {
    background: rgba(15, 23, 42, 0.8);
}

.relationship-ocr-status {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(6px);
}

.relationship-ocr-status.success {
    background: rgba(16, 185, 129, 0.85);
}

.relationship-ocr-status.error {
    background: rgba(239, 68, 68, 0.85);
}

.ocr-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ocr-spin 0.7s linear infinite;
}

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

/* ========== Loading Animation ========== */

.relationship-loading-card {
    padding: 32px 20px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.relationship-loading-card h4 {
    margin: 0;
    color: var(--text-color);
    font-size: 17px;
}

.relationship-loading-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14px;
    max-width: 320px;
}

.relationship-loading-animation {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-pulse {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-gradient-90, linear-gradient(135deg, #ff3e79, #a855f7));
    animation: loading-pulse-anim 1.6s ease-in-out infinite;
}

@keyframes loading-pulse-anim {
    0%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

.relationship-loading-steps {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.loading-step {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-secondary);
    transition: background 0.4s ease, color 0.4s ease;
}

.loading-step.active {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

/* ========== Dark mode overrides ========== */

body.dark-mode .relationship-loading-card {
    background: rgba(30, 41, 59, 0.84);
    border-color: rgba(51, 65, 85, 0.5);
}

body.dark-mode .relationship-screenshot-preview {
    border-color: rgba(51, 65, 85, 0.5);
    background: rgba(30, 41, 59, 0.5);
}

body.dark-mode .relationship-screenshots-strip {
    scrollbar-color: rgba(51, 65, 85, 0.5) transparent;
}

body.dark-mode .loading-step {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .loading-step.active {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

#profile-page {
    overflow-y: auto;
}

.profile-shell {
    padding: 18px 16px calc(var(--bottom-nav-height) + 28px);
    width: 100%;
}

.profile-page-intro {
    margin-bottom: 18px;
}

.profile-heading h2 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.1;
    color: var(--text-color);
}

.profile-heading p {
    margin: 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.profile-overview-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.profile-identity-card {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 22px 20px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(var(--brand-accent-rgb), 0.18), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(249, 245, 255, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.profile-content-grid {
    display: grid;
    gap: 18px;
}

.profile-panel {
    padding: 18px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.profile-card-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.profile-card-topline .profile-eyebrow {
    margin-bottom: 0;
}

.profile-avatar {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.single-avatar {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 16px 30px rgba(255, 62, 121, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.single-avatar .profile-default-icon {
    font-size: 52px;
    color: rgba(255, 255, 255, 0.88);
    pointer-events: none;
}
.single-avatar.has-avatar .profile-default-icon {
    display: none;
}

.profile-identity-copy {
    min-width: 0;
    flex: 1;
}

.profile-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.profile-membership-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.profile-name {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0;
    color: var(--text-color);
}

.profile-bio {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.profile-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.profile-summary-tile {
    padding: 12px 12px 11px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.profile-summary-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-summary-tile strong {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-color);
}

.profile-quick-grid {
    display: grid;
    gap: 12px;
}

.profile-quick-card {
    width: 100%;
    align-items: flex-start;
}

.profile-quick-copy {
    min-width: 0;
    flex: 1;
    text-align: left;
}

.profile-quick-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 4px;
}

.profile-quick-desc {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-light);
}

.profile-menu-group {
    margin-bottom: 18px;
}

.profile-group-heading {
    margin-bottom: 12px;
}

.profile-group-label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.1);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.profile-group-heading p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.profile-menu {
    margin: 0;
    display: grid;
    gap: 10px;
}

#profile-page .menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    margin-bottom: 0;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#profile-page button.menu-item {
    font: inherit;
    color: inherit;
    border-width: 1px;
    text-align: left;
}

body.dark-mode #profile-page .menu-item {
    background: rgba(28, 31, 39, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

#profile-page .menu-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
}

#profile-page .menu-item:focus-visible {
    outline: 3px solid rgba(var(--brand-accent-rgb), 0.26);
    outline-offset: 2px;
}

.menu-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: var(--brand-gradient-10);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    font-size: 18px;
    flex-shrink: 0;
}

.menu-copy {
    flex: 1;
    min-width: 0;
}

.menu-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.menu-subtitle {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-light);
}

.menu-arrow {
    color: #bcc2ce;
    margin-left: 12px;
}

.menu-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 700;
    margin-left: 10px;
    white-space: nowrap;
}

.menu-behavior-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.menu-behavior-pill.page {
    background: rgba(79, 140, 255, 0.12);
    color: #2f6fe4;
}

.menu-behavior-pill.action {
    background: rgba(35, 196, 131, 0.14);
    color: #1b8a5a;
}

.menu-behavior-pill.tab {
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
}

.profile-exit-card {
    margin-top: 18px;
}

#profile-page .menu-item-action .menu-arrow {
    display: none;
}

#profile-page .logout-item {
    border-color: rgba(255, 99, 132, 0.18);
    background:
        radial-gradient(circle at top right, rgba(255, 99, 132, 0.12), transparent 32%),
        rgba(255, 255, 255, 0.9);
}

#profile-page .logout-item .menu-icon {
    background: rgba(255, 99, 132, 0.12);
    color: #de466a;
}

body.dark-mode .profile-identity-card {
    background:
        radial-gradient(circle at top right, rgba(110, 168, 255, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(27, 31, 39, 0.96), rgba(20, 24, 31, 0.94));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
}

body.dark-mode .profile-panel {
    background: rgba(28, 31, 39, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

body.dark-mode .profile-avatar .single-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.18);
}

body.dark-mode .profile-badge-chip {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
}

body.dark-mode .profile-membership-pill {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.82);
}

body.dark-mode .profile-summary-tile {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.dark-mode .profile-summary-label {
    color: rgba(255, 255, 255, 0.56);
}

body.dark-mode .profile-summary-tile strong {
    color: rgba(255, 255, 255, 0.92);
}

body.dark-mode .menu-arrow {
    color: #667085;
}

body.dark-mode .menu-behavior-pill.page {
    background: rgba(79, 140, 255, 0.18);
    color: #9fc2ff;
}

body.dark-mode .menu-behavior-pill.action {
    background: rgba(35, 196, 131, 0.18);
    color: #8de0b7;
}

body.dark-mode .menu-behavior-pill.tab {
    background: rgba(var(--brand-pink-rgb), 0.2);
    color: #ff9dbd;
}

body.dark-mode #profile-page .logout-item {
    background:
        radial-gradient(circle at top right, rgba(255, 99, 132, 0.16), transparent 36%),
        rgba(28, 31, 39, 0.94);
}

@media (min-width: 768px) {
    .profile-shell {
        padding-left: 22px;
        padding-right: 22px;
    }

    .profile-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-content-grid > .profile-panel:first-child {
        grid-column: 1 / -1;
    }

    .profile-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-exit-card {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .profile-overview-grid {
        grid-template-columns: minmax(0, 1.1fr);
    }

    .profile-content-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
}

@media (max-width: 520px) {
    .profile-identity-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-avatar {
        width: 78px;
        height: 78px;
    }

    .profile-name {
        font-size: 24px;
    }

    .profile-summary-strip {
        grid-template-columns: 1fr;
    }

    .profile-quick-grid {
        grid-template-columns: 1fr;
    }

    .profile-panel {
        padding: 16px;
        border-radius: 24px;
    }

    #profile-page .menu-item {
        padding: 15px;
    }
}

/* 子页面样式 */
.avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%), url('../images/profile-user-icon.svg');
    background-size: cover, 60px 60px;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 暗黑模式头像预览 */
body.dark-mode .avatar-preview {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%), url('../images/profile-user-icon.svg');
    background-size: cover, 60px 60px;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.avatar-preview i {
    font-size: 50px;
    color: #ccc;
}

/* 暗黑模式头像图标 */
body.dark-mode .avatar-preview i {
    color: #bbb;
}

.avatar-change-btn {
    background-color: var(--accent-color);
    color: white;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-input, .form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 16px;
    background-color: var(--bg-secondary);
}

/* 暗黑模式表单输入 */
body.dark-mode .form-input, 
body.dark-mode .form-textarea {
    background-color: #2c2c2c;
    border-color: #444;
    color: #f1f1f1;
}

.form-textarea {
    min-height: 100px;
    resize: none;
}

.radio-group {
    display: flex;
    gap: 20px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    accent-color: var(--primary-color);
}

/* 地区选择器 */
.location-selector {
    display: flex;
    gap: 10px;
}

.form-select {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 16px;
    background-color: var(--bg-secondary);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* 暗黑模式下拉选择 */
body.dark-mode .form-select {
    background-color: #2c2c2c;
    border-color: #444;
    color: #f1f1f1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4 6 8.825z'/%3E%3C/svg%3E");
}

/* 兴趣标签 */
.interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.interest-tag {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.06);
    color: #555;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* 暗黑模式标签 */
body.dark-mode .interest-tag {
    background-color: #333;
}

.interest-tag.active {
    background-color: var(--primary-color);
    color: white;
}

.interest-tag.add-tag {
    background-color: rgba(var(--brand-accent-rgb), 0.08);
    color: var(--accent-color);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.15);
}

/* 暗黑模式添加标签 */
body.dark-mode .interest-tag.add-tag {
    background-color: rgba(var(--brand-accent-rgb), 0.2);
}

.interest-tag i {
    font-size: 12px;
}

.form-helper {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-light);
}

/* 设置页面样式 */
.settings-section {
    margin-bottom: 30px;
}

.settings-section h4 {
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

/* 暗黑模式设置项 */
body.dark-mode .settings-item {
    background-color: #2c2c2c;
}

.settings-item-info {
    flex: 1;
}

.settings-item-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
}

.settings-item-desc {
    font-size: 14px;
    color: var(--text-light);
}

.settings-language-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-tertiary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    color: var(--text-color);
    cursor: pointer;
    min-width: 100px;
}
body.dark-mode .settings-language-select {
    background-color: #3a3a3a;
    border-color: #555;
    color: #e0e0e0;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 24px;
}

.toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: var(--transition);
    border-radius: 24px;
}

/* 暗黑模式开关标签 */
body.dark-mode .toggle-label {
    background-color: #555;
}

.toggle-label:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: var(--bg-secondary);
    transition: var(--transition);
    border-radius: 50%;
}

.toggle-input:checked + .toggle-label {
    background-color: var(--primary-color);
}

.toggle-input:checked + .toggle-label:before {
    transform: translateX(26px);
}

.color-options {
    display: flex;
    gap: 10px;
}

.color-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
}

.color-option.active {
    transform: scale(1.2);
    border-color: white;
    box-shadow: 0 0 0 2px var(--primary-color);
}

/* 暗黑模式颜色选项 */
body.dark-mode .color-option.active {
    border-color: #333;
}

/* 数据统计页面样式 */
.stats-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.stats-card {
    flex: 1;
    text-align: center;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    margin: 0 6px;
}

/* 暗黑模式统计卡片 */
body.dark-mode .stats-card {
    background-color: #2c2c2c;
}

.stats-card-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.stats-card-label {
    font-size: 12px;
    color: var(--text-light);
}

.stats-section {
    margin-bottom: 30px;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

/* 暗黑模式统计部分 */
body.dark-mode .stats-section {
    background-color: #2c2c2c;
}

.stats-chart-container {
    position: relative;
    height: 200px;
    margin-top: 16px;
}

.placeholder-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 160px;
    width: 100%;
    padding: 0 10px;
}

.stats-bar {
    width: 30px;
    background: linear-gradient(to top, var(--primary-color), var(--secondary-color));
    border-radius: 4px 4px 0 0;
    position: relative;
    display: flex;
    justify-content: center;
}

.stats-bar span {
    position: absolute;
    top: -20px;
    font-size: 12px;
    font-weight: 500;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 10px;
}

.chart-labels span {
    font-size: 12px;
    color: var(--text-light);
    width: 30px;
    text-align: center;
}

.stats-list {
    margin-top: 16px;
}

.stats-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.stats-list-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.stats-rank {
    width: 24px;
    height: 24px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    margin-right: 12px;
}

.stats-feature {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 暗黑模式菜单选项组件 */
#chat-options-menu {
    display: none;
}

/* 暗黑模式特定组件优化 */
body.dark-mode {
    color-scheme: dark;
}

/* 会员计划样式优化 */
.vip-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
    margin-top: 10px;
    padding: 0 10px;
}

.vip-badge {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
}

body.dark-mode .vip-badge {
    background-color: #2c2c2c;
}

.vip-badge i {
    font-size: 24px;
    color: var(--text-secondary);
}

.vip-badge.premium i {
    color: var(--primary-color);
}

.vip-badge span {
    font-size: 14px;
    font-weight: 500;
}

.vip-badge-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.vip-badge-arrow i {
    font-size: 18px;
}
.vip-plans {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .vip-plans {
        flex-direction: row;
        justify-content: center;
    }
}

.vip-plan-card {
    flex: 1;
    min-width: 250px;
    max-width: 100%;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 20px;
    position: relative;
    margin-bottom: 15px;
    border: 1px solid rgba(0,0,0,0.05);
}

body.dark-mode .vip-plan-card {
    background-color: #2c2c2c;
    border-color: rgba(255,255,255,0.1);
}

.vip-plan-card.recommended {
    border: 2px solid var(--primary-color);
    box-shadow: 0 8px 24px rgba(255, 62, 121, 0.2);
}

.recommend-tag {
    position: absolute;
    top: -10px;
    right: 20px;
    background-color: var(--primary-color);
    color: white;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(255, 62, 121, 0.3);
}

.vip-plan-header {
    margin-bottom: 15px;
    text-align: center;
}

.vip-plan-header h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.vip-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
}

.price-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}

.price-period {
    font-size: 14px;
    color: var(--text-light);
    margin-left: 4px;
}

.price-discount {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--primary-color);
    margin-top: 5px;
}

.vip-plan-features {
    margin-bottom: 20px;
}

.vip-feature {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}

.vip-feature i {
    color: var(--success-color);
}

.vip-select-btn {
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    background: var(--gradient-primary);
    color: white;
    font-weight: 500;
    text-align: center;
}

.vip-benefits {
    margin-top: 30px;
    padding: 0 10px;
}

.vip-benefits h4 {
    margin-bottom: 15px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.benefit-item {
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    padding: 15px;
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
}

body.dark-mode .benefit-item {
    background-color: #2c2c2c;
    border-color: rgba(255,255,255,0.1);
}

.benefit-item i {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.benefit-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.benefit-desc {
    font-size: 12px;
    color: var(--text-light);
}

/* 联系方式按钮优化 */
.contact-options {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.contact-btn {
    flex: 1;
    min-width: 120px;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    padding: 12px;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.contact-btn i {
    font-size: 22px;
}

/* 通用联系区域样式 - 降低优先级 */
.contact-section {
    border-radius: var(--border-radius);
    padding: 20px;
    margin-top: 25px;
    box-shadow: var(--shadow);
    text-align: center;
}

/* 默认浅色模式样式 */
body:not(.dark-mode) .contact-section {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.dark-mode .contact-section {
    background-color: #2c2c2c;
}

/* 社交链接优化 */
.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 15px 0;
}

.social-link {
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: var(--transition);
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* 关于我们页面样式优化 */
.app-info {
    text-align: center;
    margin-bottom: 30px;
}

.terms-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.settings-link-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-nav-link {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-color);
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: inherit;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 12px 30px rgba(255, 62, 121, 0.08);
}

.settings-nav-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(255, 62, 121, 0.12);
}

.contact-btn.contact-btn-secondary {
    border: none;
    cursor: pointer;
    font: inherit;
}

.legal-page .page-content {
    padding-bottom: 120px;
}

.legal-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.legal-summary-card,
.legal-section-card {
    border-radius: 24px;
    padding: 22px 20px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.08);
}

.legal-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 62, 121, 0.12);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.legal-summary-card h3,
.legal-section-card h4 {
    margin: 14px 0 10px;
}

.legal-summary-card p,
.legal-section-card p {
    margin: 0;
    line-height: 1.7;
    color: var(--text-light);
}

.legal-section-card a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.legal-section-card a:hover {
    text-decoration: underline;
}

.page-header-spacer {
    width: 40px;
    flex-shrink: 0;
}

.article-back-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.article-back-btn:hover {
    transform: translateY(-1px);
}

.article-body-card {
    padding: 24px 20px;
    border-radius: 24px;
    line-height: 1.75;
    font-size: 15px;
}

.article-body-card h4 {
    margin: 18px 0 10px;
    font-size: 18px;
}

.article-body-card p,
.article-body-card li {
    color: var(--text-secondary);
}

.article-note {
    color: var(--text-light);
}

.notice-feed {
    padding-top: 20px;
}

.notice-feed-header {
    margin-bottom: 18px;
}

.notice-feed-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.notice-feed-header p {
    margin: 8px 0 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.notice-list {
    display: grid;
    gap: 14px;
}

.notice-card {
    border-radius: 24px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.1);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.notice-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.notice-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
}

.notice-badge.subtle {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-secondary);
}

.notice-time {
    font-size: 12px;
    color: var(--text-light);
}

.notice-title {
    margin: 0 0 10px;
    font-size: 18px;
    color: var(--text-color);
}

.notice-description {
    margin: 0 0 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.notice-link {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.1);
    color: var(--primary-color);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
}

.notice-link:hover {
    background: rgba(var(--brand-pink-rgb), 0.16);
}

body.dark-mode .settings-nav-link,
body.dark-mode .legal-summary-card,
body.dark-mode .legal-section-card {
    background: rgba(34, 34, 34, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f5f5f5;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

/* Account Security — Password Form */
.settings-action-btn {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 8px;
    font-size: 14px;
    transition: var(--transition);
}

.settings-action-btn i {
    transition: transform 0.2s ease;
}

.settings-action-btn.expanded i {
    transform: rotate(180deg);
}

.password-form-wrapper {
    padding: 0 16px 16px;
}

.settings-password-form .form-group {
    margin-bottom: 14px;
}

.settings-password-form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 6px;
}

.settings-password-form input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-color);
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.settings-password-form input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.password-form-actions {
    margin-top: 16px;
}

.password-save-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.password-save-btn:hover {
    opacity: 0.9;
}

.password-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.password-form-error,
.password-form-success {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--border-radius);
    font-size: 14px;
    text-align: center;
}

.password-form-error {
    background: #fee2e2;
    color: #dc2626;
}

.password-form-success {
    background: #d1fae5;
    color: #059669;
}

body.dark-mode .password-form-error {
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
}

body.dark-mode .password-form-success {
    background: rgba(5, 150, 105, 0.15);
    color: #6ee7b7;
}

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

.login-method-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-color);
}

.login-method-tag i {
    font-size: 12px;
}

.login-method-tag.method-google {
    background: rgba(66, 133, 244, 0.1);
    color: #4285f4;
}

.login-method-tag.method-apple {
    background: rgba(0, 0, 0, 0.08);
    color: #000;
}

body.dark-mode .login-method-tag.method-apple {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.login-method-tag.method-email {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

body.dark-mode .legal-summary-card p,
body.dark-mode .legal-section-card p {
    color: rgba(255, 255, 255, 0.78);
}

body.dark-mode .notice-card {
    background: rgba(34, 34, 34, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

body.dark-mode .notice-description,
body.dark-mode .notice-time {
    color: rgba(255, 255, 255, 0.72);
}

body.dark-mode .notice-badge.subtle {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
}

body.dark-mode .notice-link,
body.dark-mode .article-back-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.08);
}

body:not(.dark-mode) .app-page[data-hide-nav="true"]:not(#content-detail-page) {
    background:
        radial-gradient(circle at top left, rgba(var(--brand-pink-rgb), 0.09), transparent 32%),
        linear-gradient(180deg, rgba(250, 251, 255, 0.98) 0%, rgba(243, 246, 252, 0.98) 100%);
}

body.dark-mode .app-page[data-hide-nav="true"]:not(#content-detail-page) {
    background:
        radial-gradient(circle at top left, rgba(var(--brand-pink-rgb), 0.12), transparent 32%),
        linear-gradient(180deg, #12161d 0%, #171c24 100%);
}

body:not(.dark-mode) #help-page .faq-item,
body:not(.dark-mode) #help-page .contact-section,
body:not(.dark-mode) #about-page .app-info,
body:not(.dark-mode) #about-page .team-section,
body:not(.dark-mode) #about-page .mission-section,
body:not(.dark-mode) #about-page .contact-section,
body:not(.dark-mode) .legal-summary-card,
body:not(.dark-mode) .legal-section-card,
body:not(.dark-mode) .article-body-card {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* 防止暗黑模式下 placeholder 颜色过深 */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #888;
}

/* Toast 通知 */
.app-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    box-shadow: var(--shadow);
    z-index: 1000;
    font-size: 14px;
    font-weight: 500;
}

.app-toast.success-toast {
    background-color: var(--success-color);
}

.app-toast.error-toast {
    background-color: var(--danger-color);
}

.app-toast.warning-toast {
    background-color: var(--warning-color);
}/* 快速回复面板 */
.quick-replies-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    max-height: 70vh;
    overflow-y: auto;
}

body.dark-mode .quick-replies-panel {
    background-color: #1c1c1c;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.quick-replies-panel.active {
    transform: translateY(0);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.close-panel-btn {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
}

.quick-replies-container {
    padding: 15px 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reply-category-card {
    background-color: var(--bg-secondary);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body.dark-mode .reply-category-card {
    background-color: #2c2c2c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.reply-category-card h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: var(--primary-color);
}

.template-item {
    padding: 12px 15px;
    background-color: var(--bg-primary);
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.dark-mode .template-item {
    background-color: #252525;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.template-item:last-child {
    margin-bottom: 0;
}

.template-item:hover {
    background-color: rgba(255, 62, 121, 0.1);
    transform: translateY(-2px);
}

body.dark-mode .template-item:hover {
    background-color: rgba(255, 62, 121, 0.2);
}

/* 聊天助手对话框 */
.chat-assistant-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.assistant-dialog-content {
    background-color: var(--bg-primary);
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

body.dark-mode .assistant-dialog-content {
    background-color: #1c1c1c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.assistant-dialog-content-wide {
    max-width: 560px;
}

.assistant-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.assistant-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.close-dialog-btn {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
}

.assistant-dialog-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.assistant-tip {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-radius: 15px;
    background-color: var(--bg-secondary);
    transition: all 0.2s ease;
}

body.dark-mode .assistant-tip {
    background-color: #2c2c2c;
}

.assistant-tip:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

body.dark-mode .assistant-tip:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.assistant-tip i {
    font-size: 24px;
    color: var(--primary-color);
    margin-top: 3px;
}

.tip-content h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: var(--text-color);
}

.tip-content p {
    margin: 0;
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.4;
}

.assistant-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.assistant-tool-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-color);
    padding: 14px 16px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assistant-tool-card i {
    color: var(--primary-color);
}

.assistant-tool-card.active,
.assistant-tool-card:hover {
    transform: translateY(-1px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.assistant-tool-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background: var(--bg-secondary);
}

body.dark-mode .assistant-tool-card,
body.dark-mode .assistant-tool-panel {
    background: #2a2a2a;
}

.assistant-tool-panel-header h4,
.assistant-tool-panel-header p {
    margin: 0;
}

.assistant-tool-panel-header h4 {
    color: var(--text-color);
    font-size: 16px;
}

.assistant-tool-panel-header p {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 4px;
}

.assistant-tool-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assistant-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.assistant-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-color);
    font-size: 13px;
}

.assistant-input,
.assistant-textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-color);
    padding: 12px 14px;
    font: inherit;
    box-sizing: border-box;
}

body.dark-mode .assistant-input,
body.dark-mode .assistant-textarea {
    background: #1d1d1d;
}

.assistant-textarea {
    resize: vertical;
    min-height: 96px;
}

.assistant-form-actions {
    display: flex;
    justify-content: flex-end;
}

.assistant-submit-btn,
.assistant-inline-btn {
    border: none;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 600;
}

.assistant-inline-btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid rgba(108, 92, 231, 0.25);
}

.assistant-submit-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.assistant-tool-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assistant-result-card {
    background: var(--bg-primary);
    border-radius: 14px;
    padding: 14px;
    border: 1px solid var(--border-color);
}

body.dark-mode .assistant-result-card {
    background: #1d1d1d;
}

.assistant-result-card h4,
.assistant-result-card p,
.assistant-result-card small {
    margin: 0;
}

.assistant-result-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.assistant-result-card h4 {
    color: var(--text-color);
    margin-bottom: 8px;
}

.assistant-result-section-label {
    margin-top: 12px;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.assistant-result-card p,
.assistant-result-card small {
    color: var(--text-light);
    line-height: 1.5;
}

.assistant-result-meta,
.assistant-result-actions,
.assistant-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.assistant-result-meta span,
.assistant-tags span {
    border-radius: 999px;
    background: rgba(108, 92, 231, 0.12);
    color: var(--primary-color);
    padding: 6px 10px;
    font-size: 12px;
}

.assistant-highlight {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary-color);
    background: rgba(108, 92, 231, 0.08);
    border-radius: 10px;
    color: var(--text-color);
}

.assistant-schedule-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}

.assistant-suggestion-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.assistant-suggestion-item {
    padding: 12px;
    border-radius: 12px;
    background: rgba(108, 92, 231, 0.05);
    border: 1px solid rgba(108, 92, 231, 0.12);
}

body.dark-mode .assistant-suggestion-item {
    background: rgba(108, 92, 231, 0.12);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .assistant-context-summary {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(148, 163, 184, 0.12);
}

body.dark-mode .assistant-context-header,
body.dark-mode .assistant-context-block p {
    color: #e5e7eb;
}

body.dark-mode .assistant-context-block small {
    color: rgba(226, 232, 240, 0.62);
}

.assistant-suggestion-copy strong {
    display: block;
    color: var(--text-color);
    margin-bottom: 6px;
    font-size: 13px;
}

.assistant-suggestion-copy p {
    margin: 0;
}

.assistant-snapshot-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.assistant-snapshot-list .assistant-schedule-item {
    margin-top: 0;
}

.assistant-summary-card {
    border-color: rgba(var(--brand-pink-rgb), 0.2);
    background: var(--brand-gradient-05);
}

body.dark-mode .assistant-summary-card {
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.12) 0%, rgba(var(--brand-purple-rgb), 0.12) 100%);
}

.assistant-category-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.assistant-result-section {
    margin-top: 12px;
}

.assistant-result-section h5 {
    margin: 0 0 8px;
    color: var(--text-color);
    font-size: 13px;
}

.assistant-bullet-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    display: grid;
    gap: 6px;
}

.assistant-bullet-list li {
    line-height: 1.5;
}

.assistant-loading,
.assistant-empty-state {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 0;
}

.assistant-context-summary {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 126, 95, 0.08);
    border: 1px solid rgba(255, 126, 95, 0.14);
}

.assistant-context-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 10px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
}

.assistant-context-header strong {
    color: var(--primary-color);
}

.assistant-context-block + .assistant-context-block {
    margin-top: 10px;
}

.assistant-context-block small {
    display: block;
    margin-bottom: 4px;
    color: var(--text-light);
}

.assistant-context-block p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color);
    white-space: pre-wrap;
}

@media (max-width: 640px) {
    .assistant-tools-grid,
    .assistant-form-grid {
        grid-template-columns: 1fr;
    }

    .assistant-dialog-content-wide {
        width: calc(100% - 24px);
        max-width: none;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}/* 会话操作菜单 */
.session-actions-menu {
    position: absolute;
    right: 15px;
    bottom: 50px;
    width: 160px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 20;
    overflow: hidden;
    animation: fadeInUp 0.3s ease-out;
}

body.dark-mode .session-actions-menu {
    background: #2c2c2c;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.session-menu-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.session-menu-option:hover {
    background-color: rgba(255, 62, 121, 0.1);
}

body.dark-mode .session-menu-option:hover {
    background-color: rgba(255, 62, 121, 0.2);
}

.session-menu-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.session-menu-option.disabled:hover {
    background-color: transparent;
}

.session-menu-option .menu-icon {
    width: 20px;
    margin-right: 12px;
    text-align: center;
    color: var(--text-light);
}

.session-menu-option .menu-text {
    font-size: 14px;
    color: var(--text-color);
}

@keyframes fadeInUp {
    from { 
        transform: translateY(10px); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

/* 会话右键菜单 */
.session-context-menu {
    background: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 120px;
    animation: fadeIn 0.2s ease-out;
}

body.dark-mode .session-context-menu {
    background: #2c2c2c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.context-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

.context-menu-item:hover {
    background-color: rgba(255, 62, 121, 0.1);
}

body.dark-mode .context-menu-item:hover {
    background-color: rgba(255, 62, 121, 0.2);
}

.context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background-color: transparent;
}

.context-menu-item i {
    width: 20px;
    margin-right: 10px;
    color: var(--text-light);
}

.context-menu-item span {
    color: var(--text-color);
}.session-menu-trigger {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0; /* 防止被压缩 */
    position: relative;
    z-index: 100; /* 确保菜单触发器在最上层 */
    pointer-events: all; /* 确保总是捕获点击事件 */
}

.session-menu-trigger:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--primary-color);
}

body.dark-mode .session-menu-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.session-dropdown-menu {
    position: absolute;
    right: 10px;
    top: 35px; /* 调整位置，确保在菜单按钮下方 */
    background: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 1001; /* 提高层级，确保在最上层 */
    width: 120px;
    animation: fadeIn 0.2s ease-out;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* 确保菜单在所有情况下都可见 */
    min-height: 80px;
}

body.dark-mode .session-dropdown-menu {
    background: #2c2c2c;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 确保在所有情况下菜单都可见 */
.session-dropdown-menu {
    display: block !important;
    visibility: visible !important;
}

.session-menu-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    cursor: pointer;
    font-size: 13px;
}

.session-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.session-menu-item:hover {
    background-color: rgba(255, 62, 121, 0.1);
}

body.dark-mode .session-menu-item:hover {
    background-color: rgba(255, 62, 121, 0.2);
}

.session-menu-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}/* 新会话创建菜单 */
.new-session-menu {
    position: absolute;
    top: 45px;
    right: 0;
    background: var(--bg-secondary);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 1002; /* 确保在所有其他菜单之上 */
    width: 160px;
    animation: fadeInDown 0.3s ease-out;
    /* 确保菜单默认隐藏，只在需要时显示 */
    display: block;
}

body.dark-mode .new-session-menu {
    background: #2c2c2c;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 浅色模式下的菜单 */
.new-session-menu {
    background: var(--bg-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.new-session-menu-item {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    cursor: pointer;
    font-size: 14px;
}

.new-session-menu-item:hover {
    background-color: rgba(255, 62, 121, 0.1);
}

body.dark-mode .new-session-menu-item:hover {
    background-color: rgba(255, 62, 121, 0.2);
}

.new-session-menu-item i {
    margin-right: 10px;
    width: 18px;
    text-align: center;
    color: var(--primary-color);
}

.new-session-menu-item span {
    color: var(--text-color);
}

@keyframes fadeInDown {
    from { 
        transform: translateY(-10px); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

/* AI过渡页面样式 */
.ai-transition-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ai-transition-page.show {
    opacity: 1;
    visibility: visible;
}

.ai-transition-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    max-width: 320px;
    width: 90%;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.ai-transition-page.show .ai-transition-content {
    transform: translateY(0);
}

.ai-transition-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.ai-transition-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

/* 加载动画容器 */
.ai-loading-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* 脉冲圆点动画 */
.pulse-dots {
    display: flex;
    gap: 8px;
}

.pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: pulseDot 1.4s infinite ease-in-out;
}

.pulse-dot:nth-child(1) { animation-delay: -0.32s; }
.pulse-dot:nth-child(2) { animation-delay: -0.16s; }
.pulse-dot:nth-child(3) { animation-delay: 0s; }

@keyframes pulseDot {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* 流动光条动画 */
.flowing-bar {
    width: 200px;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.flowing-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    animation: flowingLight 2s infinite;
}

@keyframes flowingLight {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* 打字效果样式 */
.typing-text {
    position: relative;
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: var(--primary-color) !important;
    margin-left: 2px;
    animation: blinkCursor 1s infinite;
    vertical-align: text-top;
    color: var(--primary-color) !important;
}

@keyframes blinkCursor {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* AI消息打字效果 */
.message.ai-message[data-typing="true"] {
    opacity: 0;
    animation: fadeInMessage 0.3s ease forwards;
}

@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 消息容器准备状态 */
.message.ai-message.preparing {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.2s ease;
}

/* 光标准备状态 - 更明显的闪烁 */
.typing-cursor.preparing {
    animation: blinkCursorFast 0.8s infinite;
}

@keyframes blinkCursorFast {
    0%, 40% {
        opacity: 1;
        transform: scale(1);
    }
    41%, 100% {
        opacity: 0.3;
        transform: scale(0.9);
    }
}

/* 打字过程中的光标 */
.typing-cursor.typing {
    animation: blinkCursor 1s infinite;
}

/* 消息内容平滑过渡 */
.message-content {
    transition: all 0.1s ease;
}

/* 打字文本容器 */
.typing-text {
    min-height: 1.2em;
    transition: all 0.1s ease;
}

/* 响应式适配 */
@media (max-width: 480px) {
    .ai-transition-content {
        padding: 30px 20px;
        max-width: 280px;
    }
    
    .ai-transition-title {
        font-size: 16px;
    }
    
    .ai-transition-subtitle {
        font-size: 13px;
    }
    
    .flowing-bar {
        width: 160px;
    }
}

/* 暗黑模式适配 */
body.dark-mode .ai-transition-page {
    background: rgba(0, 0, 0, 0.9);
}

body.dark-mode .pulse-dot {
    background: var(--primary-color);
}

body.dark-mode .flowing-bar::before {
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

body.dark-mode .typing-cursor {
    background: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

body:not(.dark-mode) .typing-cursor {
    background: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* 认证页面样式 */
.auth-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.login-container,
.register-container {
    padding: 32px 24px 24px;
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.app-logo {
    margin-bottom: 24px;
}

.app-logo i {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block;
}

.app-logo h2 {
    color: var(--text-color);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.welcome-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
    font-weight: 400;
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
    gap: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #e2e8f0);
}

.auth-divider span {
    font-size: 13px;
    color: var(--text-light, #94a3b8);
    white-space: nowrap;
}

/* Social Login Section */
.social-login-section {
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.social-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid #dadce0;
    border-radius: 50px;
    background: #fff;
    color: #3c4043;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    height: 48px;
    box-sizing: border-box;
}

.social-login-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.social-login-btn i {
    font-size: 18px;
}

.google-btn {
    background: #fff;
    color: #3c4043;
    border-color: #dadce0;
}

.google-btn .fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 18px;
}

.google-btn:hover {
    background: #f8f9fa;
    border-color: #c5c8cc;
    color: #3c4043;
}

body.dark-mode .google-btn {
    background: #fff;
    color: #3c4043;
    border-color: #dadce0;
}

body.dark-mode .google-btn:hover {
    background: #f8f9fa;
    border-color: #c5c8cc;
}

.apple-btn {
    background: #000;
    color: #fff;
    border-color: #000;
    border-radius: 50px;
}

.apple-btn:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

body.dark-mode .apple-btn {
    background: #fff;
    color: #000;
    border-color: #fff;
}

body.dark-mode .apple-btn:hover {
    background: #e8e8e8;
    border-color: #e8e8e8;
    color: #000;
}

/* Divider */
.divider {
    position: relative;
    margin: 24px 0;
    text-align: center;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.divider span {
    background: var(--bg-primary);
    padding: 0 16px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-color);
    font-weight: 600;
    font-size: 14px;
}

/* Input Wrapper */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 16px;
    color: var(--text-secondary);
    font-size: 16px;
    z-index: 2;
}

.form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 16px;
    transition: var(--transition);
    box-sizing: border-box;
    background: var(--bg-primary);
    color: var(--text-color);
}

.input-wrapper input {
    padding-left: 48px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 62, 121, 0.1);
}

.form-group input:focus + .input-icon {
    color: var(--primary-color);
}

/* Password Toggle */
.password-wrapper {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: var(--transition);
    z-index: 2;
}

.password-toggle:hover {
    color: var(--primary-color);
    background: rgba(255, 62, 121, 0.1);
}

/* Password Strength */
.password-strength {
    margin-top: 8px;
}

.strength-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.strength-fill {
    height: 100%;
    width: 0%;
    transition: var(--transition);
    border-radius: 2px;
}

.strength-fill.weak {
    width: 25%;
    background: var(--danger-color);
}

.strength-fill.fair {
    width: 50%;
    background: var(--warning-color);
}

.strength-fill.good {
    width: 75%;
    background: var(--success-color);
}

.strength-fill.strong {
    width: 100%;
    background: var(--success-color);
}

.strength-text {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Form Options */
.form-options {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 8px 0 16px;
}

/* Custom Checkbox */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
    transition: var(--transition);
    flex-shrink: 0;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.forgot-password {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.forgot-password:hover {
    text-decoration: underline;
}

/* Auth Button */
.auth-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 10px;
}

.auth-btn.primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.auth-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 62, 121, 0.4);
}

.auth-btn.primary:active {
    transform: translateY(0);
}

/* Auth Links */
.auth-links {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}

.auth-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}

.auth-links a:hover {
    text-decoration: underline;
}

.terms-link,
.privacy-link {
    color: var(--primary-color);
    text-decoration: none;
}

.terms-link:hover,
.privacy-link:hover {
    text-decoration: underline;
}

/* Auth Error */
.auth-error {
    background-color: rgba(225, 112, 85, 0.1);
    color: var(--danger-color);
    padding: 12px 16px;
    border-radius: var(--border-radius);
    margin-top: 16px;
    font-size: 14px;
    text-align: center;
    border: 1px solid rgba(225, 112, 85, 0.2);
    border-left: 4px solid var(--danger-color);
}

.auth-error[hidden] {
    display: none !important;
}

.test-account-hint {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(33, 150, 243, 0.16);
    background:
        radial-gradient(circle at top right, rgba(33, 150, 243, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 249, 255, 0.98));
    box-shadow: 0 16px 32px rgba(33, 150, 243, 0.1);
    text-align: left;
    color: #155b9a;
}

.test-account-hint-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.test-account-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(33, 150, 243, 0.14);
    color: #1565c0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.test-account-caption {
    font-size: 12px;
    color: rgba(21, 101, 192, 0.82);
}

.test-account-credentials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.test-account-credentials i {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(33, 150, 243, 0.12);
    color: #1565c0;
    font-size: 16px;
}

.test-account-credentials strong,
.test-account-credentials span {
    display: block;
}

.test-account-credentials strong {
    font-size: 14px;
    color: #0f4477;
    margin-bottom: 3px;
}

.test-account-credentials span {
    font-size: 13px;
    color: rgba(15, 68, 119, 0.82);
    word-break: break-all;
}

.test-account-action {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(33, 150, 243, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.test-account-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 26px rgba(33, 150, 243, 0.24);
}

/* 暗黑模式下的认证页面样式 */
body.dark-mode .auth-error {
    background-color: rgba(225, 112, 85, 0.2);
    border-color: rgba(225, 112, 85, 0.3);
}

body.dark-mode .test-account-hint {
    border-color: rgba(86, 156, 214, 0.2);
    background:
        radial-gradient(circle at top right, rgba(86, 156, 214, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(27, 35, 46, 0.96), rgba(19, 26, 36, 0.98));
    color: #cce6ff;
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
}

body.dark-mode .test-account-badge,
body.dark-mode .test-account-credentials i {
    background: rgba(86, 156, 214, 0.16);
    color: #8dc8ff;
}

body.dark-mode .test-account-caption,
body.dark-mode .test-account-credentials span {
    color: rgba(204, 230, 255, 0.78);
}

body.dark-mode .test-account-credentials strong {
    color: #f4f9ff;
}

body.dark-mode .social-login-btn {
    border-color: var(--border-color);
    background: var(--bg-secondary);
}

body.dark-mode .divider::before {
    background: var(--border-color);
}

body.dark-mode .divider span {
    background: var(--bg-primary);
}

/* 响应式设计 */
@media (max-width: 480px) {
    .login-container,
    .register-container {
        padding: 16px;
    }
    
    .auth-form {
        padding: 16px;
    }
    
    .form-options {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .social-login-btn {
        padding: 12px 16px;
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    #login-page .page-content,
    #register-page .page-content {
        min-height: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px 24px;
        box-sizing: border-box;
    }

    #login-page .login-container,
    #register-page .register-container {
        width: min(100%, 460px);
        min-height: auto;
        max-height: calc(100dvh - 56px);
        overflow-y: auto;
        padding: 28px 30px 24px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 28px 60px rgba(15, 23, 42, 0.14);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    body.dark-mode #login-page .login-container,
    body.dark-mode #register-page .register-container {
        background: rgba(24, 28, 35, 0.88);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32);
    }

    #login-page .auth-form,
    #register-page .auth-form {
        max-width: none;
        padding: 12px 0 0;
    }

    #login-page .app-logo,
    #register-page .app-logo {
        margin-bottom: 22px;
    }

    #login-page .app-logo i,
    #register-page .app-logo i {
        font-size: 40px;
        margin-bottom: 8px;
    }

    #login-page .app-logo h2,
    #register-page .app-logo h2 {
        font-size: 24px;
        margin-bottom: 6px;
    }

    #login-page .welcome-text,
    #register-page .welcome-text {
        font-size: 15px;
    }

    #login-page .test-account-hint,
    #register-page .test-account-hint {
        margin-bottom: 16px;
        padding: 14px 16px;
    }

    #login-page .form-group,
    #register-page .form-group {
        margin-bottom: 16px;
    }

    #login-page .form-options,
    #register-page .form-options {
        margin: 16px 0;
    }

    #login-page .auth-btn,
    #register-page .auth-btn {
        padding: 14px 16px;
    }

    #login-page .auth-links,
    #register-page .auth-links {
        margin-top: 18px;
    }
}

/* ========== 多模态交互功能样式 ========== */






.message-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}



/* 文件上传和预览 */
.message-image img {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--border-radius);
    object-fit: cover;
    cursor: pointer;
    transition: var(--transition);
}

.message-image img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow);
}

.message-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    max-width: 250px;
}

.file-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-sm);
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

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

.file-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.file-size {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 上传进度指示器 */
.upload-progress {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + 20px);
    left: 20px;
    right: 20px;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.upload-progress.visible {
    transform: translateY(0);
}

.upload-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.upload-item:last-child {
    margin-bottom: 0;
}

.upload-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.upload-details {
    flex: 1;
    min-width: 0;
}

.upload-filename {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.upload-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2px;
}

.upload-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

.upload-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.upload-cancel {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--danger-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: var(--transition);
    flex-shrink: 0;
}

.upload-cancel:hover {
    transform: scale(1.1);
}

/* 拖拽上传区域 */
.drag-upload-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 62, 121, 0.1);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    border: 3px dashed var(--primary-color);
    animation: fadeInUp 0.3s ease;
}

.drag-upload-content {
    text-align: center;
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
}

.drag-upload-content i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    animation: float 2s ease-in-out infinite;
}

/* 设置页面样式 */
.settings-section {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.settings-section h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
    display: inline-block;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.setting-info {
    flex: 1;
}

.setting-title {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 4px;
    font-size: 15px;
}

.setting-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.setting-control {
    margin-left: 20px;
}

.setting-btn {
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.setting-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 62, 121, 0.3);
}

/* 开关样式 */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: var(--transition);
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-secondary);
    transition: var(--transition);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* 暗黑模式适配 */
body.dark-mode .message-file {
    background: #2c2c2c;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .settings-section {
    background: #2c2c2c;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .upload-progress {
    background: #2c2c2c;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .slider {
    background-color: #404040;
}

body.dark-mode .slider:before {
    background-color: #f1f1f1;
}

body.dark-mode input:checked + .slider {
    background-color: var(--primary-color);
}

/* 响应式设计适配 */
@media (max-width: 480px) {
    .indicator-content {
        padding: 10px 15px;
    }
    
    .indicator-text {
        font-size: 13px;
    }
    
    .upload-progress {
        left: 10px;
        right: 10px;
        bottom: calc(var(--bottom-nav-height) + 10px);
    }
}



/* ========== 增强的多模态交互功能样式 ========== */

/* 拖拽上传覆盖层 */
.drag-upload-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 62, 121, 0.1);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: dragOverlayFadeIn 0.3s ease;
}

.drag-upload-content {
    text-align: center;
    color: var(--primary-color);
    padding: 3rem;
    border: 3px dashed var(--primary-color);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 35px rgba(255, 62, 121, 0.2);
    animation: dragContentBounce 0.6s ease infinite alternate;
}

.drag-upload-content i {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

.drag-upload-content div {
    font-size: 1.4rem;
    font-weight: 600;
}

@keyframes dragOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dragContentBounce {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

/* 增强的上传进度指示器 */
.upload-progress.visible {
    opacity: 1;
    transform: translateX(0);
    animation: uploadProgressSlideIn 0.3s ease;
}

@keyframes uploadProgressSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.upload-icon {
    animation: uploadIconRotate 2s linear infinite;
}

@keyframes uploadIconRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



/* 智能回复建议 */


/* 设置页面语音相关样式 */
.range-slider {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.slider {
    flex: 1;
    height: 6px;
    background: var(--border-color, #e2e8f0);
    border-radius: 3px;
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 62, 121, 0.3);
    transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 62, 121, 0.4);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(255, 62, 121, 0.3);
}

.slider:hover {
    background: var(--primary-color);
    opacity: 0.3;
}

.slider-value {
    min-width: 60px;
    text-align: center;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(255, 62, 121, 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.settings-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 0.8rem;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    min-width: 100px;
    justify-content: center;
}

.settings-btn:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 62, 121, 0.3);
}

.settings-btn:active {
    transform: translateY(0);
}

.settings-btn:disabled {
    background: var(--text-secondary, #666);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 文件消息增强样式 */
.message-file {
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--border-radius, 12px);
    padding: 1rem;
    max-width: 300px;
    transition: all 0.2s ease;
}

.message-file:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.file-info {
    margin-left: 1rem;
}

.file-name {
    font-weight: 600;
    color: var(--text-color, #333);
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.file-size {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}

/* 暗黑模式适配 */
.dark-mode .drag-upload-content {
    background: rgba(30, 30, 30, 0.95);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.dark-mode .upload-progress {
    background: var(--dark-card-bg, #2d3436);
    border-color: var(--dark-border-color, #4a5568);
}

.dark-mode .upload-item {
    background: var(--dark-bg-color, #1a1a1a);
    border-color: var(--dark-border-color, #4a5568);
}





.dark-mode .slider {
    background: var(--dark-border-color, #4a5568);
}

.dark-mode .slider-value {
    background: rgba(255, 62, 121, 0.2);
    color: var(--primary-color);
}

.dark-mode .message-file {
    background: var(--dark-card-bg, #2d3436);
    border-color: var(--dark-border-color, #4a5568);
}

.dark-mode .file-name {
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .file-size {
    color: var(--dark-text-secondary, #a0aec0);
}

/* 隐藏语言切换选项 */
#language-switch-btn {
    display: none !important;
}

/* 强制日期输入框显示英文格式 */
input[type="date"] {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-locale: "en-US" !important;
    writing-mode: horizontal-tb !important;
}

input[type="date"]::-webkit-datetime-edit {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-locale: "en-US" !important;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-locale: "en-US" !important;
}

input[type="date"]::-webkit-datetime-edit-text {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-locale: "en-US" !important;
}

input[type="date"]::-webkit-datetime-edit-month-field {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-locale: "en-US" !important;
}

input[type="date"]::-webkit-datetime-edit-day-field {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-locale: "en-US" !important;
}

input[type="date"]::-webkit-datetime-edit-year-field {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-locale: "en-US" !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    -webkit-locale: "en-US" !important;
}

/* 强制英文日期格式 */
#user-birth {
    direction: ltr !important;
    unicode-bidi: embed !important;
    -webkit-locale: "en-US" !important;
    writing-mode: horizontal-tb !important;
}

/* 英文日期选择器样式 */
.date-input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.date-select {
    flex: 1;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 0.5rem;
    background: var(--bg-color, #fff);
    color: var(--text-color, #333);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.date-select:focus {
    outline: none;
    border-color: var(--primary-color, #ff3e79);
    box-shadow: 0 0 0 3px rgba(255, 62, 121, 0.1);
}

.dark-mode .date-select {
    background: var(--dark-card-bg, #2d3436);
    border-color: var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
}

.dark-mode .date-select:focus {
    border-color: var(--primary-color, #ff3e79);
    box-shadow: 0 0 0 3px rgba(255, 62, 121, 0.2);
}

@media (max-width: 768px) {
    .date-input-wrapper {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .date-select {
        width: 100%;
    }
}

/* 现代化日期选择器弹窗样式 */
.date-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.date-display {
    flex: 1;
    cursor: pointer;
    background: var(--bg-color, #fff);
    border: 2px solid var(--border-color, #e1e5e9);
    border-radius: 12px;
    padding: 14px 50px 14px 16px;
    font-size: 16px;
    color: var(--text-color, #2c3e50);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.date-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color, #ff3e79), var(--secondary-color, #9c27b0));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.date-display:hover {
    border-color: var(--primary-color, #ff3e79);
    box-shadow: 0 4px 20px rgba(255, 62, 121, 0.15);
    transform: translateY(-1px);
}

.date-display:hover::before {
    transform: scaleX(1);
}

.date-picker-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--primary-color, #ff3e79), var(--secondary-color, #9c27b0));
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(255, 62, 121, 0.3);
    font-size: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-picker-btn:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 16px rgba(255, 62, 121, 0.4);
}

.date-picker-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.date-picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.date-picker-content {
    background: var(--bg-color, #fff);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.date-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--primary-color, #ff3e79), var(--secondary-color, #9c27b0));
    color: white;
    position: relative;
    overflow: hidden;
}

.date-picker-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.15"/><circle cx="20" cy="80" r="0.5" fill="white" opacity="0.15"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    pointer-events: none;
}

.date-picker-header h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.date-picker-body {
    padding: 24px;
    background: var(--bg-color, #fff);
}

.date-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: end;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.date-input-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-input-group select {
    padding: 12px 16px;
    border: 2px solid var(--border-color, #e1e5e9);
    border-radius: 12px;
    background: var(--bg-color, #fff);
    font-size: 16px;
    color: var(--text-color, #2c3e50);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.date-input-group select:focus {
    outline: none;
    border-color: var(--primary-color, #ff3e79);
    box-shadow: 0 0 0 3px rgba(255, 62, 121, 0.15), 0 4px 16px rgba(255, 62, 121, 0.1);
    transform: translateY(-2px);
}

.date-input-group select:hover {
    border-color: var(--primary-color, #ff3e79);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.date-picker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    background: var(--card-bg, #f8fafc);
    border-top: 1px solid var(--border-color, #e1e5e9);
}

.btn-secondary {
    padding: 12px 24px;
    background: var(--bg-color, #fff);
    color: var(--text-secondary, #64748b);
    border: 2px solid var(--border-color, #e1e5e9);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 80px;
}

.btn-secondary:hover {
    background: var(--text-secondary, #64748b);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

.btn-primary {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary-color, #ff3e79), var(--secondary-color, #9c27b0));
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(255, 62, 121, 0.3);
    min-width: 80px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 62, 121, 0.4);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:active {
    transform: translateY(0);
}

/* 暗模式适配 */
.dark-mode .date-display {
    background: var(--dark-card-bg, #2d3436);
    color: var(--dark-text-color, #e2e8f0);
    border-color: var(--dark-border-color, #4a5568);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark-mode .date-display:hover {
    border-color: var(--primary-color, #ff3e79);
    box-shadow: 0 4px 20px rgba(255, 62, 121, 0.25);
}

.dark-mode .date-picker-content {
    background: var(--dark-card-bg, #2d3436);
    border-color: var(--dark-border-color, #4a5568);
}

.dark-mode .date-picker-body {
    background: var(--dark-card-bg, #2d3436);
}

.dark-mode .date-input-group label {
    color: var(--dark-text-secondary, #94a3b8);
}

.dark-mode .date-input-group select {
    background: var(--dark-bg, #1a1a1a);
    border-color: var(--dark-border-color, #4a5568);
    color: var(--dark-text-color, #e2e8f0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"></polyline></svg>');
}

.dark-mode .date-input-group select:focus {
    border-color: var(--primary-color, #ff3e79);
    box-shadow: 0 0 0 3px rgba(255, 62, 121, 0.25), 0 4px 16px rgba(255, 62, 121, 0.15);
}

.dark-mode .date-input-group select:hover {
    border-color: var(--primary-color, #ff3e79);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .date-picker-footer {
    background: var(--dark-bg, #1a1a1a);
    border-top-color: var(--dark-border-color, #4a5568);
}

.dark-mode .btn-secondary {
    background: var(--dark-card-bg, #2d3436);
    color: var(--dark-text-secondary, #94a3b8);
    border-color: var(--dark-border-color, #4a5568);
}

.dark-mode .btn-secondary:hover {
    background: var(--dark-text-secondary, #94a3b8);
    color: var(--dark-bg, #1a1a1a);
    box-shadow: 0 4px 12px rgba(148, 163, 184, 0.3);
}

/* 响应式设计优化 */
@media (max-width: 768px) {
    .date-picker-modal {
        padding: 16px;
        align-items: flex-end;
    }
    
    .date-picker-content {
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 20px 20px 0 0;
        max-height: 80vh;
        animation: slideUpMobile 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    @keyframes slideUpMobile {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    .date-picker-header {
        padding: 16px 20px;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .date-picker-header h4 {
        font-size: 18px;
    }
    
    .date-picker-body {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }
    
    .date-input-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .date-input-group {
        width: 100%;
    }
    
    .date-input-group label {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .date-input-group select {
        padding: 16px 20px;
        font-size: 18px;
        border-radius: 16px;
        padding-right: 50px;
        background-size: 20px;
        background-position: right 16px center;
    }
    
    .date-picker-footer {
        padding: 16px 20px 20px;
        gap: 12px;
        position: sticky;
        bottom: 0;
        background: var(--card-bg, #f8fafc);
        border-top: 1px solid var(--border-color, #e1e5e9);
        flex-direction: row;
    }
    
    .btn-secondary,
    .btn-primary {
        flex: 1;
        padding: 16px 20px;
        font-size: 16px;
        border-radius: 16px;
        font-weight: 600;
    }
    
    .date-display {
        padding: 16px 50px 16px 20px;
        font-size: 18px;
        border-radius: 16px;
    }
    
    .date-picker-btn {
        width: 36px;
        height: 36px;
        right: 16px;
        font-size: 18px;
    }
    
    /* 暗模式移动端适配 */
    .dark-mode .date-picker-footer {
        background: var(--dark-bg, #1a1a1a);
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .date-picker-content {
        max-height: 85vh;
    }
    
    .date-picker-header {
        padding: 12px 16px;
    }
    
    .date-picker-body {
        padding: 16px;
    }
    
    .date-picker-footer {
        padding: 12px 16px 16px;
    }
    
    .date-input-group select {
        padding: 14px 16px;
        padding-right: 46px;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .upload-progress {
        top: 4rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
    }
    

    
    .drag-upload-content {
        padding: 2rem;
        margin: 1rem;
    }
    
    .drag-upload-content i {
        font-size: 3rem;
    }
    
    .drag-upload-content div {
        font-size: 1.2rem;
    }
    

    
    .range-slider {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    
    .slider-value {
        align-self: center;
        min-width: auto;
    }
    
    .settings-btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .upload-item {
        padding: 0.8rem;
    }
    
    .upload-filename {
        font-size: 0.9rem;
    }
    
    .message-file {
        max-width: 100%;
        padding: 0.8rem;
    }
}

@media (max-width: 480px) {

    
    .drag-upload-content {
        padding: 1.5rem;
    }
    
    .upload-progress {
        top: 3rem;
    }
}

/* 增强的拖拽状态 */
body.dragging {
    overflow: hidden;
}

body.dragging .drag-upload-overlay {
    display: flex !important;
}

/* 粘贴上传反馈 */
.paste-upload-indicator {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--success-color);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 2rem;
    font-weight: 600;
    z-index: 10000;
    animation: pasteIndicatorSlide 3s ease;
    pointer-events: none;
}

@keyframes pasteIndicatorSlide {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    10%, 90% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* 🎉 恋语AI多模态交互功能样式增强完成 🎉 */

/* ===== 移动端虚拟键盘适配样式 ===== */

/* 输入框聚焦时的增强样式 */
.keyboard-focused {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(255, 62, 121, 0.2) !important;
    transition: all 0.3s ease;
}

/* 键盘显示时的布局调整 */
body.keyboard-visible {
    --keyboard-compensation: var(--keyboard-height, 0px);
}

/* 键盘显示时聊天容器调整 */
body.keyboard-visible .chat-messages-container {
    padding-bottom: calc(var(--keyboard-height, 0px) + 20px);
    transition: padding-bottom 0.3s ease;
}

/* 键盘显示时输入框容器调整 */
body.keyboard-visible .chat-input-wrapper {
    position: relative;
    z-index: 1000;
}

/* 移动端输入框增强样式 */
@media (max-width: 768px) {
    .chat-input-field:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="text"]:focus,
    textarea:focus {
        transform: scale(1.02);
        transition: transform 0.2s ease;
    }
    
    /* 防止输入框被键盘遮挡的最小间距 */
    .auth-form .form-group:last-child {
        margin-bottom: 100px;
    }
    
    /* 聊天页面键盘适配 */
    #chat-page.keyboard-visible {
        padding-bottom: var(--keyboard-height, 0px);
    }
    
    /* 登录注册页面键盘适配 */
    #login-page.keyboard-visible,
    #register-page.keyboard-visible {
        padding-bottom: calc(var(--keyboard-height, 0px) + 50px);
    }
}

/* 现代视口单位支持检测 */
@supports (height: 100dvh) {
    .app-page {
        height: 100dvh;
    }
    
    .app-page.active {
        height: 100dvh;
    }
}

@supports (height: 100svh) {
    /* 小视口高度，适用于键盘弹出时 */
    body.keyboard-visible .app-page {
        height: 100svh;
    }
}

/* Visual Viewport API 支持的额外样式 */
@supports (height: 100dvh) and (height: 100svh) {
    .chat-messages-container {
        /* 使用动态视口高度，自动适应键盘 */
        max-height: calc(100dvh - 200px);
    }
    
    body.keyboard-visible .chat-messages-container {
        max-height: calc(100svh - 100px);
    }
}

/* 🎯 移动端虚拟键盘适配样式完成 🎯 */

/* --- Relationship Timeline --- */
.relationship-timeline-group {
    margin-bottom: 24px;
}
.relationship-timeline-contact {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1a1a2e);
    margin: 0 0 12px 0;
    padding: 0 4px;
}
.relationship-timeline {
    position: relative;
    padding-left: 24px;
}
.relationship-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border-color, #e2e8f0);
    border-radius: 1px;
}
.relationship-timeline-node {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.15s;
}
.relationship-timeline-node:hover,
.relationship-timeline-node:focus-visible {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}
.relationship-timeline-dot {
    position: absolute;
    left: -24px;
    top: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--node-color, #94a3b8);
    border: 2px solid var(--bg-primary, #fff);
    box-shadow: 0 0 0 2px var(--node-color, #94a3b8);
    flex-shrink: 0;
    z-index: 1;
}
.relationship-timeline-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.relationship-timeline-stage {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #1a1a2e);
}
.relationship-timeline-date {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}
.relationship-timeline-node--latest .relationship-timeline-stage {
    font-weight: 700;
}
.relationship-timeline-node--latest .relationship-timeline-dot {
    box-shadow: 0 0 0 2px var(--bg-primary, #fff), 0 0 0 4px var(--node-color, #94a3b8);
}
.relationship-timeline-change-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(251, 191, 36, 0.15);
    color: #b45309;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Dark mode timeline */
body.dark-mode .relationship-timeline-contact,
[data-theme="dark"] .relationship-timeline-contact {
    color: #e2e8f0;
}
body.dark-mode .relationship-timeline::before,
[data-theme="dark"] .relationship-timeline::before {
    background: #334155;
}
body.dark-mode .relationship-timeline-dot,
[data-theme="dark"] .relationship-timeline-dot {
    border-color: #1e293b;
}
body.dark-mode .relationship-timeline-node--latest .relationship-timeline-dot,
[data-theme="dark"] .relationship-timeline-node--latest .relationship-timeline-dot {
    box-shadow: 0 0 0 2px #1e293b, 0 0 0 4px var(--node-color, #94a3b8);
}
body.dark-mode .relationship-timeline-node:hover,
[data-theme="dark"] .relationship-timeline-node:hover {
    background: rgba(255,255,255,0.06);
}
body.dark-mode .relationship-timeline-stage,
[data-theme="dark"] .relationship-timeline-stage {
    color: #f1f5f9;
}
body.dark-mode .relationship-timeline-date,
[data-theme="dark"] .relationship-timeline-date {
    color: #94a3b8;
}
body.dark-mode .relationship-timeline-change-badge,
[data-theme="dark"] .relationship-timeline-change-badge {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* 隐藏日期选择器 */
/* --- Hotfix: unify avatar display in dark mode (keep in sync with production) --- */
body.dark-mode .profile-avatar .single-avatar { display: block !important; }
body.dark-mode .profile-avatar .multi-avatars { display: none !important; }
#birth-date-container {
    display: none !important;
}

/* ═══════════════════════════════════════════════════
   LOGIN PAGE — Hinge-inspired redesign
   暖奶油背景 · 衬线标题 · 克制配色 · 无渐变
   ═══════════════════════════════════════════════════ */

#login-page,
#register-page {
    background: #F5F0EB !important;
}

#login-page .page-content,
#register-page .page-content {
    background: transparent !important;
    display: flex;
    align-items: center;
    min-height: 100vh;
}

#login-page .login-container,
#register-page .register-container {
    background: transparent !important;
    padding: 48px 28px 32px;
    box-shadow: none !important;
    border: none !important;
}

/* Logo — 衬线字体，去掉图标 */
#login-page .app-logo i,
#register-page .app-logo i {
    display: none !important;
}

#login-page .app-logo h2,
#register-page .app-logo h2 {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    letter-spacing: -0.5px;
    margin-bottom: 6px !important;
}

#login-page .welcome-text,
#register-page .welcome-text {
    font-size: 15px !important;
    color: #6B6B6B !important;
    margin-bottom: 0 !important;
}

#login-page .app-logo,
#register-page .app-logo {
    margin-bottom: 36px !important;
}

/* Social buttons — 全黑 / 全白 outline 风格 */
#login-page .social-login-section,
#register-page .social-login-section {
    gap: 10px !important;
    margin-bottom: 4px !important;
}

#login-page .social-login-btn,
#register-page .social-login-btn {
    height: 52px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border: 1.5px solid #1A1A1A !important;
    background: transparent !important;
    color: #1A1A1A !important;
    box-shadow: none !important;
}

#login-page .social-login-btn:hover,
#register-page .social-login-btn:hover {
    background: #1A1A1A !important;
    color: #fff !important;
}

#login-page .apple-btn,
#register-page .apple-btn {
    background: #1A1A1A !important;
    color: #fff !important;
    border-color: #1A1A1A !important;
}

#login-page .apple-btn:hover,
#register-page .apple-btn:hover {
    background: #333 !important;
    border-color: #333 !important;
}

/* Divider */
#login-page .auth-divider,
#register-page .auth-divider {
    margin: 20px 0 !important;
}

#login-page .auth-divider::before,
#login-page .auth-divider::after,
#register-page .auth-divider::before,
#register-page .auth-divider::after {
    background: #D0C8C0 !important;
}

#login-page .auth-divider span,
#register-page .auth-divider span {
    color: #9A9087 !important;
    background: #F5F0EB !important;
    padding: 0 12px;
}

/* Input fields — 极简 bottom-border 风格 */
#login-page .form-group,
#register-page .form-group {
    margin-bottom: 16px !important;
}

#login-page .input-wrapper,
#register-page .input-wrapper {
    border: none !important;
    border-bottom: 1.5px solid #C8BFB5 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#login-page .form-group input,
#register-page .form-group input {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 0 12px 0 !important;
    font-size: 16px !important;
    color: #1A1A1A !important;
    box-shadow: none !important;
}

#login-page .input-wrapper input,
#register-page .input-wrapper input {
    padding-left: 0 !important;
}

#login-page .input-icon,
#register-page .input-icon {
    display: none !important;
}

#login-page .form-group input:focus,
#register-page .form-group input:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

#login-page .input-wrapper:focus-within,
#register-page .input-wrapper:focus-within {
    border-bottom-color: #1A1A1A !important;
}

/* 主登录按钮 — 深色实底 */
#login-page .auth-btn.primary,
#register-page .auth-btn.primary {
    background: #1A1A1A !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    box-shadow: none !important;
    background-image: none !important;
    margin-top: 8px !important;
}

#login-page .auth-btn.primary:hover,
#register-page .auth-btn.primary:hover {
    background: #333 !important;
}

/* 忘记密码 */
#login-page .forgot-password,
#register-page .forgot-password {
    color: #6B6B6B !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

#login-page .forgot-password:hover,
#register-page .forgot-password:hover {
    color: #1A1A1A !important;
}

/* 注册链接 */
#login-page .auth-links,
#register-page .auth-links {
    margin-top: 24px !important;
    font-size: 14px !important;
    color: #6B6B6B !important;
}

#login-page .auth-links a,
#register-page .auth-links a {
    color: #1A1A1A !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* demo card */
#demo-account-hint {
    margin-top: 20px;
    padding: 12px 16px;
    border: 1px solid #D0C8C0;
    border-radius: 10px;
    background: rgba(255,255,255,0.6);
    font-size: 13px;
    color: #6B6B6B;
    text-align: left;
}

/* dark mode override — 保持深色背景时也好看 */
body.dark-mode #login-page,
body.dark-mode #register-page {
    background: #1A1A1A !important;
}

body.dark-mode #login-page .app-logo h2,
body.dark-mode #register-page .app-logo h2 {
    color: #F5F0EB !important;
}

body.dark-mode #login-page .social-login-btn,
body.dark-mode #register-page .social-login-btn {
    border-color: #F5F0EB !important;
    color: #F5F0EB !important;
}

body.dark-mode #login-page .apple-btn,
body.dark-mode #register-page .apple-btn {
    background: #F5F0EB !important;
    color: #1A1A1A !important;
}

body.dark-mode #login-page .input-wrapper,
body.dark-mode #register-page .input-wrapper {
    border-bottom-color: #444 !important;
}

body.dark-mode #login-page .form-group input,
body.dark-mode #register-page .form-group input {
    color: #F5F0EB !important;
}

body.dark-mode #login-page .auth-btn.primary,
body.dark-mode #register-page .auth-btn.primary {
    background: #F5F0EB !important;
    color: #1A1A1A !important;
}

body.dark-mode #login-page .auth-divider span,
body.dark-mode #register-page .auth-divider span {
    background: #1A1A1A !important;
    color: #666 !important;
}

body.dark-mode #login-page .welcome-text,
body.dark-mode #register-page .welcome-text,
body.dark-mode #login-page .auth-links,
body.dark-mode #register-page .auth-links {
    color: #999 !important;
}

body.dark-mode #login-page .auth-links a,
body.dark-mode #register-page .auth-links a {
    color: #F5F0EB !important;
}