/* 基础样式 */
html {
    height: 100%;
    background: var(--bg-primary);
}

/* Legal consent, AI disclosure, and reporting */
.legal-consent-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(6px);
}

body[data-current-page="terms"] .legal-consent-backdrop,
body[data-current-page="privacy"] .legal-consent-backdrop,
body[data-current-page="third-parties"] .legal-consent-backdrop {
    display: none;
}

.legal-consent-dialog {
    width: min(100%, 520px);
    max-height: min(720px, calc(100dvh - 40px));
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 20px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #111827);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.legal-consent-dialog h2 {
    margin: 0 0 10px;
    font-size: 22px;
}

.legal-consent-dialog p {
    margin: 0 0 14px;
    color: var(--text-secondary, #64748b);
    line-height: 1.55;
}

.legal-consent-links {
    margin: 0 0 16px;
    font-size: 14px;
}

.legal-consent-links a {
    color: var(--primary-color, #6c5ce7);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-consent-check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    margin: 12px 0;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-secondary, #f8fafc);
    font-size: 14px;
    line-height: 1.5;
}

.legal-consent-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary-color, #6c5ce7);
}

.legal-consent-error {
    color: #b42318 !important;
    font-size: 13px;
}

.legal-consent-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    margin-top: 20px;
}

.legal-consent-actions button,
.settings-inline-action {
    min-height: 44px;
    border-radius: 12px;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.legal-consent-cancel {
    border: 1px solid var(--border-color, #dbe1ea);
    background: transparent;
    color: inherit;
}

.legal-consent-confirm {
    border: 0;
    background: var(--primary-color, #6c5ce7);
    color: #fff;
}

.legal-consent-confirm:disabled {
    opacity: 0.6;
    cursor: wait;
}

.ai-report-dialog label {
    display: grid;
    gap: 7px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 650;
}

.ai-report-dialog select,
.ai-report-dialog textarea {
    width: 100%;
    border: 1px solid var(--border-color, #dbe1ea);
    border-radius: 11px;
    padding: 11px 12px;
    background: var(--bg-secondary, #fff);
    color: inherit;
    font: inherit;
    font-weight: 400;
}

.ai-generated-badge,
.ai-generated-notice {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    line-height: 1.35;
}

.ai-generated-badge {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.ai-generated-notice {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--primary-color, #6c5ce7) 18%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color, #6c5ce7) 7%, transparent);
}

.message-report-btn,
.relationship-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.relationship-report-btn {
    width: auto !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 12px;
}

.settings-item-stacked {
    align-items: center;
    gap: 14px;
}

.settings-inline-action {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--border-color, #dbe1ea);
    background: transparent;
    color: var(--primary-color, #6c5ce7);
    font-size: 13px;
}

@media (max-width: 480px) {
    .legal-consent-backdrop {
        align-items: end;
        padding: 12px;
    }

    .legal-consent-dialog {
        max-height: calc(100dvh - 24px);
        padding: 20px;
        border-radius: 20px;
    }
}

html:not([data-platform="capacitor"]) {
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
}

:root {
    /* 主色调 — Warm Trust × Brand Soft 2.0 */
    --primary-color: #ff6f8f;
    --secondary-color: #b879df;
    --light-color: #f8f9fa;
    --dark-color: #2d3436;
    --accent-color: #7f6ae5;
    --primary-hover: #ff5f84;

    /* Profile Header 透明度变量 */
    --header-bg-opacity: 0.15;
    --header-scrim-opacity: 0.08;

    --success-color: #00cec9;
    --warning-color: #fdcb6e;
    --danger-color: #e17055;

    --text-color: #3b2b63;
    --text-secondary: #897d98;
    --text-light: #a99caf;

    --bg-primary: #fff9f7;
    --bg-secondary: #fffafd;
    --bg-tertiary: #fff5fb;
    --card-bg: #ffffff;
    --card-bg-elevated: #ffffff;

    --gradient-primary: linear-gradient(135deg, #ff6f8f 0%, #b879df 100%);
    --gradient-secondary: linear-gradient(135deg, #7f6ae5 0%, #b879df 100%);
    --gradient-ink: linear-gradient(135deg, #2d3436 0%, #636e72 100%);

    --brand-pink-rgb: 255, 111, 143;
    --brand-purple-rgb: 184, 121, 223;
    --brand-accent-rgb: 127, 106, 229;
    --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%);
    --hero-glow-opacity: 0.16;
    --hero-wave-opacity: 0.09;
    --hero-ribbon-opacity: 0.07;
    --hero-orbit-opacity: 0.05;
    
    /* 通用颜色变量（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-soft: rgba(184, 121, 223, 0.14);
    --border-color: rgba(184, 121, 223, 0.14);
    --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 16px 36px rgba(59, 43, 99, 0.08);
    --shadow-soft: 0 16px 36px rgba(59, 43, 99, 0.08);
    
    /* 动画 */
    --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 {
    --primary-color: #ff7b9b;
    --secondary-color: #c995ea;
    --accent-color: #937cff;
    --primary-hover: #ff8aaa;

    --text-color: #f6edf2;
    --text-secondary: #cdbfc9;
    --text-light: #9f929d;

    --bg-primary: #151316;
    --bg-secondary: #1c1820;
    --bg-tertiary: #241f29;
    --card-bg: #241f29;
    --card-bg-elevated: #2b2531;

    --border-soft: rgba(255, 255, 255, 0.08);
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
    --shadow: 0 4px 12px rgba(0,0,0,0.25);
    --shadow-lg: 0 18px 40px rgba(0,0,0,0.28);
    --shadow-soft: 0 18px 40px rgba(0,0,0,0.28);

    --gradient-primary: linear-gradient(135deg, #ff7b9b 0%, #c995ea 100%);
    --gradient-secondary: linear-gradient(135deg, #937cff 0%, #c995ea 100%);
}

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

/* 浅色模式下的个人中心头部 - 使用更柔和的背景 */
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, var(--secondary-color) 0%, var(--primary-color) 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: var(--bg-primary);  /* 暖米白 #F6F4F1 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none; /* 防止iOS橡皮筋效果 */
}

/* 暗黑模式背景 */
body.dark-mode {
    background: linear-gradient(135deg, #151316 0%, #1c1820 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) #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 #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) #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) #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) #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) #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(var(--brand-pink-rgb), 0.05);
    border-right: 3px solid var(--primary-color);
}

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

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

/* 浅色模式下的会话项 */
.session-item.active {
    background-color: rgba(var(--brand-pink-rgb), 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;
}

.sessions-loading-state {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-light);
}

.sessions-loading-state i {
    font-size: 28px;
    color: var(--primary-color);
    animation: sessionsLoadingSpin 0.9s linear infinite;
}

.sessions-loading-state p {
    margin: 0;
    font-size: 14px;
}

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

/* 内容区域样式 */
.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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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,
#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,
#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,
#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(var(--brand-pink-rgb), 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(var(--brand-pink-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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(91, 108, 143, 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) #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-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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.12);
}

body:not(.dark-mode) #about-page .social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.3);
    border-bottom: 1px solid rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.4);
    box-shadow: 0 4px 12px rgba(var(--brand-pink-rgb), 0.15);
}

/* 暗黑模式页面背景 */
body.dark-mode .app-page {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(var(--brand-pink-rgb), 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 #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(var(--brand-pink-rgb), 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.dark-mode #edit-profile-page .page-content,
body.dark-mode #settings-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;
}

.app-page.page-entering {
    display: block;
    z-index: 8;
    animation: appPageEnter 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.app-page.page-leaving {
    display: block;
    z-index: 7;
    pointer-events: none;
    animation: appPageExit 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

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

@keyframes appPageExit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-page.page-entering,
    .app-page.page-leaving {
        animation: none;
    }
}

/* 首页样式 */
/* 首页轮播卡片 */
.hero-carousel {
    position: relative;
    margin: 15px;
    height: 360px;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    background: var(--hero-gradient);
}

.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: var(--hero-gradient);
    z-index: 0; /* 修改z-index，确保背景显示在内容下面 */
    overflow: hidden;
}

.hero-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.32), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(var(--brand-pink-rgb), 0.18), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 54%);
    z-index: 0;
}

.hero-glow,
.hero-ribbon,
.hero-wave,
.hero-orbit,
.hero-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-glow {
    z-index: 1;
    opacity: var(--hero-glow-opacity);
    mix-blend-mode: screen;
}

.hero-ribbon,
.hero-wave,
.hero-orbit {
    z-index: 2;
}

.hero-pattern {
    opacity: 0.22;
    z-index: 3;
    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%3Cg fill='none'%3E%3Ccircle cx='14' cy='16' r='5' fill='%23E56B7F' fill-opacity='0.08'/%3E%3Ccircle cx='59' cy='31' r='4' fill='%23E56B7F' fill-opacity='0.06'/%3E%3Ccircle cx='82' cy='15' r='2.5' fill='%23E56B7F' fill-opacity='0.06'/%3E%3Ccircle cx='28' cy='74' r='3.5' fill='%23E56B7F' fill-opacity='0.06'/%3E%3Ccircle cx='70' cy='78' r='5.5' fill='none' stroke='%23E56B7F' stroke-opacity='0.06' stroke-width='1.6'/%3E%3Cpath d='M8 56c12-8 24-12 38-12 13 0 24 3 35 10' stroke='%23E56B7F' stroke-opacity='0.05' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M20 88c10-6 19-9 30-9 10 0 19 2 28 7' stroke='%23E56B7F' stroke-opacity='0.05' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-glow {
    background:
        radial-gradient(circle at 20% 26%, rgba(255, 255, 255, 0.34), transparent 32%),
        radial-gradient(circle at 84% 18%, rgba(255, 220, 232, 0.22), transparent 24%),
        radial-gradient(circle at 78% 78%, rgba(255, 255, 255, 0.12), transparent 30%);
}

.hero-ribbon {
    opacity: var(--hero-ribbon-opacity);
    background-repeat: no-repeat;
    background-position: right -8px top -10px, left -18px bottom -18px;
    background-size: 170px 88px, 128px 72px;
}

.hero-wave {
    opacity: var(--hero-wave-opacity);
    background-repeat: no-repeat;
    background-position: left -12px bottom -2px, right 18px 34px;
    background-size: 188px 54px, 138px 42px;
}

.hero-orbit {
    opacity: var(--hero-orbit-opacity);
    background-repeat: no-repeat;
    background-position: right 26px center, left 22px top 52px;
    background-size: 118px 118px, 92px 92px;
}

.glow-reply {
    background:
        radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.38), transparent 30%),
        radial-gradient(circle at 82% 22%, rgba(255, 214, 228, 0.24), transparent 24%),
        radial-gradient(circle at 72% 76%, rgba(255, 255, 255, 0.12), transparent 30%);
}

.glow-mood {
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.34), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(221, 228, 255, 0.22), transparent 26%),
        radial-gradient(circle at 74% 74%, rgba(255, 255, 255, 0.10), transparent 28%);
}

.glow-date {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.36), transparent 32%),
        radial-gradient(circle at 80% 20%, rgba(255, 228, 220, 0.22), transparent 24%),
        radial-gradient(circle at 78% 80%, rgba(255, 255, 255, 0.10), transparent 30%);
}

.ribbon-reply {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='88' viewBox='0 0 170 88'%3E%3Cpath d='M8 60c22-20 45-29 67-29 23 0 45 10 87 36' fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M98 22c11 2 21 8 30 18' fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='123' cy='44' r='4' fill='%23ffffff' fill-opacity='0.18'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='72' viewBox='0 0 128 72'%3E%3Cpath d='M10 52c15-14 31-22 48-22 18 0 33 7 60 26' fill='none' stroke='%23ffffff' stroke-opacity='0.15' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='82' cy='32' r='3' fill='%23ffffff' fill-opacity='0.14'/%3E%3C/svg%3E");
}

.ribbon-mood {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='88' viewBox='0 0 170 88'%3E%3Cpath d='M14 52c19-13 39-19 60-19 24 0 45 8 82 30' fill='none' stroke='%23ffffff' stroke-opacity='0.20' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M96 25c10 0 21 3 32 10' fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='118' cy='40' r='5' fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='1.5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='72' viewBox='0 0 128 72'%3E%3Cpath d='M10 50c13-10 28-15 45-15 19 0 34 6 63 22' fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='86' cy='32' r='3' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E");
}

.ribbon-date {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='88' viewBox='0 0 170 88'%3E%3Cpath d='M18 58c17-16 36-25 57-25 25 0 45 10 77 31' fill='none' stroke='%23ffffff' stroke-opacity='0.20' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M102 23c9 4 18 10 26 20' fill='none' stroke='%23ffffff' stroke-opacity='0.15' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='129' cy='46' r='4' fill='%23ffffff' fill-opacity='0.16'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='72' viewBox='0 0 128 72'%3E%3Cpath d='M12 54c13-12 28-19 46-19 18 0 34 7 58 24' fill='none' stroke='%23ffffff' stroke-opacity='0.13' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='83' cy='31' r='3' fill='%23ffffff' fill-opacity='0.11'/%3E%3C/svg%3E");
}

.wave-reply {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='188' height='54' viewBox='0 0 188 54'%3E%3Cpath d='M2 30c18-10 34-10 50 0s32 10 48 0 32-10 48 0 24 10 38 0' fill='none' stroke='%23ffffff' stroke-opacity='0.20' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2 42c18-10 34-10 50 0s32 10 48 0 32-10 48 0 24 10 38 0' fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='42' viewBox='0 0 138 42'%3E%3Cpath d='M2 22c12-8 24-8 36 0s24 8 36 0 24-8 36 0 18 8 26 0' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wave-mood {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='188' height='54' viewBox='0 0 188 54'%3E%3Cpath d='M2 28c16-7 32-5 46 4 15 10 31 12 48 4 17-9 34-11 51-4 16 7 27 6 39-3' fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2 40c18-8 35-6 50 3 15 10 30 11 46 4 17-8 34-10 50-4 17 7 29 7 40 1' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='42' viewBox='0 0 138 42'%3E%3Cpath d='M2 22c10-7 21-6 32 1 13 8 25 9 38 2 12-7 24-8 36-2 11 6 20 5 28-1' fill='none' stroke='%23ffffff' stroke-opacity='0.11' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wave-date {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='188' height='54' viewBox='0 0 188 54'%3E%3Cpath d='M4 33c14-14 29-17 45-8 16 9 31 8 47-3 18-12 35-13 52-4 16 9 29 10 40 2' fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 45c16-12 31-15 46-7 16 8 31 7 46-2 18-11 35-12 51-4 16 9 29 9 41 2' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='42' viewBox='0 0 138 42'%3E%3Cpath d='M2 24c11-9 22-11 33-5 12 6 24 6 37-1 14-8 27-9 39-2 11 6 20 7 27 3' fill='none' stroke='%23ffffff' stroke-opacity='0.11' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.orbit-reply {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='118' viewBox='0 0 118 118'%3E%3Ccircle cx='59' cy='59' r='34' fill='none' stroke='%23ffffff' stroke-opacity='0.11' stroke-width='1.6' stroke-dasharray='3 8'/%3E%3Ccircle cx='59' cy='59' r='48' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.2'/%3E%3Cpath d='M24 70c9-10 21-15 35-15 11 0 21 3 32 10' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='94' cy='33' r='4' fill='%23ffffff' fill-opacity='0.16'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Ccircle cx='46' cy='46' r='24' fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='58' r='3' fill='%23ffffff' fill-opacity='0.14'/%3E%3C/svg%3E");
}

.orbit-mood {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='118' viewBox='0 0 118 118'%3E%3Ccircle cx='59' cy='59' r='36' fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.6'/%3E%3Ccircle cx='59' cy='59' r='50' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.2' stroke-dasharray='4 9'/%3E%3Cpath d='M24 63c10-10 22-15 36-15 11 0 22 3 33 9' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='89' cy='37' r='3.5' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Ccircle cx='46' cy='46' r='25' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.4'/%3E%3Ccircle cx='65' cy='28' r='3' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E");
}

.orbit-date {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='118' viewBox='0 0 118 118'%3E%3Ccircle cx='59' cy='59' r='34' fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.6'/%3E%3Ccircle cx='59' cy='59' r='48' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.2' stroke-dasharray='5 8'/%3E%3Cpath d='M26 70c10-10 21-15 34-15 13 0 24 4 34 13' fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='88' cy='38' r='4' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92' viewBox='0 0 92 92'%3E%3Ccircle cx='46' cy='46' r='24' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.4'/%3E%3Ccircle cx='33' cy='28' r='3' fill='%23ffffff' fill-opacity='0.12'/%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='%23E56B7F' fill-opacity='0.15' 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='%23E56B7F' fill-opacity='0.12'%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='%23E56B7F' fill-opacity='0.12'%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;
    color: var(--primary-color);  /* 深墨蓝 #243447 */
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hero-badge {
    display: inline-block;
    padding: 5px 12px;
    background-color: rgba(var(--brand-accent-rgb), 0.12);
    color: var(--accent-color);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 12px;
    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;
    color: #5F6B7A;  /* 中性灰蓝 */
    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(--accent-color);
    color: #fff;
    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, background-color 0.2s ease;
    box-shadow: 0 4px 12px rgba(var(--brand-accent-rgb), 0.3);
    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);
    background-color: var(--primary-hover);
    box-shadow: 0 6px 20px rgba(var(--brand-accent-rgb), 0.4);
}

.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: var(--card-bg);
    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 {
    background: var(--card-bg-hover);
    transform: scale(1.05) translateZ(0);
}

.feature-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    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='%23E56B7F' fill-opacity='0.12' 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: var(--primary-color);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(var(--brand-accent-rgb), 0.10);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid rgba(var(--brand-accent-rgb), 0.08);
}

.feature-icon i {
    font-size: 24px;
    color: var(--accent-color);
}

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

.feature-description {
    font-size: 14px;
    color: #5F6B7A;
    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(var(--brand-pink-rgb), 0.2);
}

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

.scenario-card.active-scenario:hover {
    transform: scale(1.02) translateY(-2px) translateZ(0);
    box-shadow: 0 20px 48px rgba(var(--brand-pink-rgb), 0.3);
}

.scenario-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-bg);
    z-index: 0;
    transition: transform 0.2s ease-out, background 0.2s ease;
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

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

.scenario-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.3;
    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='%23E56B7F' fill-opacity='0.12' 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='%23E56B7F' fill-opacity='0.10'%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='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none'%3E%3Ccircle cx='14' cy='16' r='5' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='55' cy='23' r='3' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='30' cy='53' r='4' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='68' cy='60' r='6' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.6'/%3E%3Cpath d='M10 66c8-6 17-9 27-9 9 0 18 2 27 8' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

.pattern-mood {
    background-image: url("data:image/svg+xml,%3Csvg width='64' height='40' viewBox='0 0 64 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpath d='M7 25c6-5 12-7 19-7 7 0 13 2 20 7' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='17' cy='12' r='3' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='46' cy='10' r='5' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.4'/%3E%3Ccircle cx='55' cy='28' r='2.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");
}

.pattern-date {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='28' cy='14' r='5' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.4'/%3E%3Ccircle cx='15' cy='28' r='4' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.2'/%3E%3Ccircle cx='31' cy='30' r='2.5' fill='%23ffffff' fill-opacity='0.06'/%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='%23E56B7F' fill-opacity='0.10' 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='%23E56B7F' fill-opacity='0.10'%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: var(--primary-color);
    display: flex;
    flex-direction: column;
    padding: 15px;
    height: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scenario-badge {
    display: inline-block;
    padding: 4px 10px;
    background-color: rgba(var(--brand-accent-rgb), 0.12);
    color: var(--accent-color);
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
    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;
    color: #5F6B7A;
    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(--accent-color);
    color: #fff;
    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 12px rgba(var(--brand-accent-rgb), 0.25);
    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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.8), var(--primary-color), rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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: var(--gradient-primary);
    color: white;
    border: none;
}

body.dark-mode .try-now-btn.enhanced-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--brand-pink-rgb), 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: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: experienceTitleFloat 2.4s ease-in-out infinite;
}

@keyframes experienceTitleFloat {
    0%, 100% {
        transform: translateY(0);
        filter: brightness(1);
    }
    50% {
        transform: translateY(-8px);
        filter: brightness(1.18);
    }
}

.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(var(--brand-pink-rgb), 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(var(--brand-pink-rgb), 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: var(--gradient-primary);
    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: 16px;
    color: #333;
    line-height: 1.55;
}

.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: 8px;
    height: 8px;
    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: translateY(0) scale(0.72);
        opacity: 0.38;
    }
    40% { 
        transform: translateY(-5px) scale(1.18);
        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: transparent;
}

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

/* 聊天消息中的伙伴消息样式 */
.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: rgba(var(--brand-pink-rgb), 0.14);
    border: 2px solid rgba(var(--brand-pink-rgb), 0.58);
}

body.dark-mode .message-avatar.partner {
    background-color: rgba(var(--brand-pink-rgb), 0.18);
    border: 2px solid rgba(var(--brand-pink-rgb), 0.6);
}

.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(var(--brand-pink-rgb), 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: var(--gradient-primary);
    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(var(--brand-pink-rgb), 0.3);
}

.try-now-btn.enhanced-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.15);
    border-color: rgba(var(--brand-pink-rgb), 0.15);
}

.features-section .feature-icon {
    width: 44px;
    height: 44px;
    background: var(--gradient-primary);
    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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.15);
    box-shadow: 0 12px 32px rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.08);
}

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

.feature-item.enhanced-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(var(--brand-pink-rgb), 0.15);
    border-color: rgba(var(--brand-pink-rgb), 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: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 16px rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.15), 
                0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--brand-pink-rgb), 0.2);
}

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

#discover-page .feature-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 10px;
    margin: 0 2px 0 2px;
    font-size: 18px;
    box-shadow: 0 3px 10px rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.2) !important;
}

body.dark-mode #discover-page .feature-icon {
    background: var(--gradient-primary) !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: var(--gradient-primary) !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(var(--brand-pink-rgb), 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: var(--gradient-primary);
    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: var(--primary-hover);
}

.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-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 {
    display: block;
}

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

.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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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: 16px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}

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

/* 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 message bubbles already have an avatar; do not add a floating label. */
.ai-message::after {
    content: none;
    display: 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;
    }
    
}

.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 {
    position: relative;
    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-history-status {
    width: 100%;
    min-height: 220px;
    margin: auto 0;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: var(--text-secondary);
}

.chat-history-status > i {
    font-size: 24px;
    color: var(--primary-color);
}

.chat-history-status.is-error > i {
    color: var(--danger-color, #e45f68);
}

.chat-history-status-title,
.chat-history-status-hint {
    margin: 0;
}

.chat-history-status-title {
    color: var(--text-color);
    font-size: 15px;
    font-weight: 700;
}

.chat-history-status-hint {
    max-width: 300px;
    font-size: 13px;
    line-height: 1.55;
}

.chat-history-retry-btn {
    min-width: 104px;
    min-height: 40px;
    margin-top: 4px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.chat-history-retry-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

.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(--secondary-color);
}

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(var(--brand-pink-rgb), 0.12);
}

body.dark-mode .chat-shortcut-btn:hover {
    background: rgba(var(--brand-pink-rgb), 0.1);
    border-color: rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(var(--brand-pink-rgb), 0);
    }
}

.chat-attachments-panel {
    position: absolute;
    left: 8px;
    bottom: calc(100% + 8px);
    z-index: 30;
    display: grid;
    gap: 2px;
    width: min(220px, calc(100% - 16px));
    margin: 0;
    padding: 6px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px) scale(0.98);
    transform-origin: left bottom;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.chat-attachments-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.chat-attachments-panel[hidden] {
    display: none !important;
}

.attachment-option {
    display: flex;
    width: 100%;
    min-height: 44px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: var(--transition);
    padding: 6px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    text-align: left;
}

.attachment-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.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: 34px;
    height: 34px;
    flex: 0 0 34px;
    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: 14px;
    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(var(--brand-pink-rgb), 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;
    border-radius: 14px;
}

.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-result-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    color: var(--text-light);
    font-size: 14px;
}

.relationship-result-feedback-actions {
    display: flex;
    gap: 8px;
}

.relationship-result-feedback-actions button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 72, 130, 0.18);
    border-radius: 50%;
    background: rgba(255, 72, 130, 0.08);
    color: var(--primary-color);
    cursor: pointer;
}

.relationship-result-feedback-actions button.selected {
    background: var(--primary-color);
    color: #fff;
}

.relationship-result-feedback-actions button:disabled {
    cursor: default;
    opacity: 0.62;
}

body.dark-mode .relationship-result-feedback-actions button {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
}

body.dark-mode .relationship-result-feedback-actions button.selected {
    background: var(--primary-color);
}

.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;
    }

    .relationship-result-feedback {
        align-items: flex-start;
    }
}

/* ========== 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; }

.relationship-speaker-confirmation {
    margin: 8px 0 12px;
    padding: 12px;
    border: 1px solid rgba(255, 62, 121, 0.18);
    border-radius: 10px;
    background: rgba(255, 62, 121, 0.06);
}

.relationship-speaker-confirmation.is-passive {
    border-color: rgba(34, 197, 94, 0.18);
    background: rgba(34, 197, 94, 0.06);
}

.relationship-speaker-confirmation.needs-confirmation {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.08);
}

.relationship-speaker-confirmation-text {
    color: #374151;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.relationship-speaker-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.relationship-speaker-confirmation-actions .relationship-secondary-btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
}

.relationship-speaker-confirmation-actions .relationship-secondary-btn.is-selected {
    border-color: rgba(22, 163, 74, 0.48);
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12);
}

.relationship-observer-target {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(89, 72, 113, 0.14);
    color: var(--text-secondary);
    font-size: 13px;
}

.relationship-observer-target[hidden] {
    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: -8px;
    right: -8px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    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);
    justify-content: space-between;
    gap: 4px;
}

.relationship-ocr-error-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relationship-retry-screenshot {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 24px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.24);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.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, rgb(255, 107, 153), rgb(184, 121, 223)));
    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 .relationship-speaker-confirmation {
    border-color: rgba(255, 133, 179, 0.26);
    background: rgba(255, 133, 179, 0.1);
}

body.dark-mode .relationship-speaker-confirmation.is-passive {
    border-color: rgba(74, 222, 128, 0.24);
    background: rgba(74, 222, 128, 0.09);
}

body.dark-mode .relationship-speaker-confirmation.needs-confirmation {
    border-color: rgba(251, 191, 36, 0.32);
    background: rgba(251, 191, 36, 0.1);
}

body.dark-mode .relationship-speaker-confirmation-text {
    color: #d8dee9;
}

body.dark-mode .relationship-speaker-confirmation-actions .relationship-secondary-btn.is-selected {
    border-color: rgba(74, 222, 128, 0.5);
    background: rgba(74, 222, 128, 0.16);
    color: #bbf7d0;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.12);
}

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;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.funnel-bar.active {
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.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(var(--brand-pink-rgb), 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;
}

#profile-page .delete-account-item {
    margin-top: 10px;
    border-color: rgba(225, 112, 85, 0.28);
    background:
        radial-gradient(circle at top right, rgba(225, 112, 85, 0.14), transparent 34%),
        rgba(255, 255, 255, 0.92);
}

#profile-page .delete-account-item .menu-icon {
    background: rgba(225, 112, 85, 0.14);
    color: var(--danger-color);
}

#profile-page .delete-account-item .menu-title,
#profile-page .delete-account-item .menu-value {
    color: var(--danger-color);
}

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);
}

body.dark-mode #profile-page .delete-account-item {
    background:
        radial-gradient(circle at top right, rgba(225, 112, 85, 0.18), 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: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: calc(var(--app-shell-width, 430px) - 32px);
    max-width: calc(var(--app-shell-width, 430px) - 32px);
    min-width: 0;
}

.location-selector > .form-select,
.location-selector > .android-select-trigger {
    width: 100%;
    min-width: 0;
}

.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;
}

#profile-interest-editor[hidden] {
    display: none !important;
}

#profile-interest-add[hidden] {
    display: none !important;
}

.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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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;
}

.mainland-filing-card {
    margin: 20px 0;
    text-align: center;
}

.mainland-filing-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
}

.mainland-filing-links a,
.mainland-icp-footer a {
    color: var(--primary-color);
    font-weight: 600;
    text-underline-offset: 3px;
}

.mainland-icp-footer {
    display: none !important;
    margin: 24px 20px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 18px);
    padding: 16px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

html[data-platform="web"] .mainland-icp-footer[data-web-only]:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.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(var(--brand-pink-rgb), 0.08);
}

.settings-nav-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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-management {
    display: grid;
    gap: 10px;
}

.login-method-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.login-method-manage-btn {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(var(--brand-purple-rgb), 0.18);
    border-radius: 12px;
    background: rgba(var(--brand-purple-rgb), 0.07);
    color: var(--primary-color);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.login-method-manage-btn.unlink {
    background: transparent;
    color: var(--text-light);
}

.login-method-manage-btn:disabled {
    cursor: wait;
    opacity: 0.55;
}

body.dark-mode .login-method-manage-btn {
    border-color: rgba(201, 149, 234, 0.24);
    background: rgba(147, 124, 255, 0.12);
    color: #d9c0ff;
}

body.dark-mode .login-method-manage-btn.unlink {
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
}

.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: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 12px);
    left: 12px;
    right: 12px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(59, 43, 99, 0.14);
    z-index: 1000;
    transform: translateY(calc(100% + var(--bottom-nav-height) + 32px));
    transition: transform 0.3s ease-in-out;
    max-height: min(58vh, 520px);
    overflow-y: auto;
}

body.dark-mode .quick-replies-panel {
    background-color: var(--card-bg);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
}

.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);
}

button.template-item {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
}

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(var(--brand-pink-rgb), 0.1);
    transform: translateY(-2px);
}

body.dark-mode .template-item:hover {
    background-color: rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.1);
}

body.dark-mode .session-menu-option:hover {
    background-color: rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.1);
}

body.dark-mode .context-menu-item:hover {
    background-color: rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.1);
}

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

.session-menu-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { 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;
}

.social-login-btn .auth-provider-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.social-login-btn .google-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    line-height: 0;
}

.social-login-btn .google-mark svg {
    display: block;
    width: 20px;
    height: 20px;
}

.google-btn {
    background: #fff;
    color: #3c4043;
    border-color: #dadce0;
}

.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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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;
}

.auth-consent-row {
    width: 100%;
    margin: 6px 0 16px;
    text-align: left;
}

.auth-consent-label {
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    font-size: 13px;
    line-height: 1.45;
}

.auth-consent-label .checkmark {
    margin: 2px 0 0;
}

.auth-consent-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.auth-legal-link {
    font-weight: 700;
}

.auth-consent-row.is-invalid .checkmark {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 4px rgba(225, 112, 85, 0.12);
}

.auth-consent-row.is-invalid .auth-consent-copy {
    color: var(--danger-color);
}

.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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 0.3);
    transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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-all;
}

.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(var(--brand-pink-rgb), 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, rgb(255, 107, 153));
    box-shadow: 0 0 0 3px rgba(var(--brand-pink-rgb), 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, rgb(255, 107, 153));
    box-shadow: 0 0 0 3px rgba(var(--brand-pink-rgb), 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, rgb(255, 107, 153)), var(--secondary-color, rgb(184, 121, 223)));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.date-display:hover {
    border-color: var(--primary-color, rgb(255, 107, 153));
    box-shadow: 0 4px 20px rgba(var(--brand-pink-rgb), 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, rgb(255, 107, 153)), var(--secondary-color, rgb(184, 121, 223)));
    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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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);
}

.test-account-hint,
.test-account-credentials {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .test-account-hint,
body.dark-mode .test-account-credentials {
    background: var(--card-bg-elevated) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-secondary) !important;
}

.date-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--primary-color, rgb(255, 107, 153)), var(--secondary-color, rgb(184, 121, 223)));
    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;
}

.home-phase-card::before {
    content: none !important;
    display: none !important;
}

.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, rgb(255, 107, 153));
    box-shadow: 0 0 0 3px rgba(var(--brand-pink-rgb), 0.15), 0 4px 16px rgba(var(--brand-pink-rgb), 0.1);
    transform: translateY(-2px);
}

.date-input-group select:hover {
    border-color: var(--primary-color, rgb(255, 107, 153));
    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, rgb(255, 107, 153)), var(--secondary-color, rgb(184, 121, 223)));
    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(var(--brand-pink-rgb), 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(var(--brand-pink-rgb), 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, rgb(255, 107, 153));
    box-shadow: 0 4px 20px rgba(var(--brand-pink-rgb), 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, rgb(255, 107, 153));
    box-shadow: 0 0 0 3px rgba(var(--brand-pink-rgb), 0.25), 0 4px 16px rgba(var(--brand-pink-rgb), 0.15);
}

.dark-mode .date-input-group select:hover {
    border-color: var(--primary-color, rgb(255, 107, 153));
    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);
    }
}

/* Rapport AI multimodal interaction styles */

/* ===== 移动端虚拟键盘适配样式 ===== */

/* 输入框聚焦时的增强样式 */
.keyboard-focused {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(var(--brand-pink-rgb), 0.2) !important;
    transition: all 0.3s ease;
}

/* 键盘显示时的布局调整 */
body.keyboard-visible {
    --keyboard-compensation: var(--keyboard-height, 0px);
}

/* 键盘显示时聊天容器调整 */
body.keyboard-visible #chat-page #chat-messages {
    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) {
    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;
    }
    
    /* 聊天页面键盘适配 */
    body.keyboard-visible #chat-page {
        padding-bottom: var(--keyboard-height, 0px);
    }
    
    /* 登录注册页面键盘适配 */
    body.keyboard-visible #login-page,
    body.keyboard-visible #register-page {
        padding-bottom: calc(var(--keyboard-height, 0px) + 24px);
        scroll-padding-bottom: calc(var(--keyboard-height, 0px) + 24px);
    }
}

/* 现代视口单位支持检测 */
@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-page #chat-messages {
        /* 使用动态视口高度，自动适应键盘 */
        max-height: calc(100dvh - 200px);
    }
    
    body.keyboard-visible #chat-page #chat-messages {
        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: linear-gradient(160deg, #F8F4F6 0%, #F5F2F6 50%, #EEF0F5 100%) !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 .login-app-name,
#register-page .login-app-name {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #1A2840 !important;
    letter-spacing: -0.5px;
    margin: 0 0 16px 0 !important;
    line-height: 1.1;
}

/* 定心话 tagline */
#login-page .login-tagline,
#register-page .login-tagline {
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: var(--primary-color) !important;
    font-weight: 400 !important;
    margin: 0 !important;
    letter-spacing: 0.2px;
}

#login-page .welcome-text,
#register-page .welcome-text {
    font-size: 14px !important;
    color: #6B6B6B !important;
    margin: 8px 0 0 0 !important;
}

#login-page .app-logo,
#register-page .app-logo {
    margin-bottom: 40px !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 var(--text-color) !important;
    background: transparent !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

#login-page .social-login-btn:hover,
#register-page .social-login-btn:hover {
    background: var(--text-color) !important;
    color: var(--bg-primary) !important;
}

#login-page .apple-btn,
#register-page .apple-btn {
    background: var(--text-color) !important;
    color: var(--bg-primary) !important;
    border-color: var(--text-color) !important;
}

#login-page .apple-btn:hover,
#register-page .apple-btn:hover {
    background: var(--text-secondary) !important;
    border-color: var(--text-secondary) !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 .auth-form,
#register-page .auth-form {
    width: 100% !important;
}

#login-page .form-group,
#register-page .form-group {
    margin-bottom: 16px !important;
    width: 100% !important;
    text-align: left !important;
}

#login-page .input-wrapper,
#register-page .input-wrapper {
    border: none !important;
    border-bottom: 1.5px solid rgba(var(--brand-purple-rgb), 0.28) !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: 100% !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: var(--text-color) !important;
    box-shadow: none !important;
    text-align: left !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: var(--primary-color) !important;
}

/* 主登录按钮 — 深酒红，传达情感温度 */
#login-page .auth-btn.primary,
#register-page .auth-btn.primary {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    height: 52px !important;
    width: 100% !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 16px rgba(var(--brand-pink-rgb), 0.25) !important;
    margin-top: 8px !important;
}

#login-page .auth-btn.primary:hover,
#register-page .auth-btn.primary:hover {
    background: var(--gradient-secondary) !important;
    box-shadow: 0 6px 20px rgba(var(--brand-pink-rgb), 0.35) !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: var(--primary-color) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#login-page .forgot-password,
#register-page .forgot-password {
    color: var(--primary-color) !important;
    font-size: 13px !important;
}

/* demo card */
#demo-account-hint {
    margin-top: 20px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--brand-purple-rgb), 0.16);
    border-radius: 10px;
    background: rgba(255,255,255,0.6);
    font-size: 13px;
    color: var(--text-secondary);
    text-align: left;
}

/* dark mode override — 保持深色背景时也好看 */
body.dark-mode #login-page,
body.dark-mode #register-page {
    background: linear-gradient(160deg, #241625 0%, #1f1428 52%, #18111f 100%) !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: var(--gradient-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(var(--brand-pink-rgb), 0.26) !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: var(--primary-color) !important;
}

/* Warm Trust × Brand Soft 2.0 main app refresh */
#home-page,
#discover-page,
#chat-page,
#profile-page,
#relationship-analysis-page,
#relationship-analysis-result-page {
    background:
        radial-gradient(circle at 92% 4%, rgba(var(--brand-accent-rgb), 0.10), transparent 28%),
        linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

body.dark-mode #home-page,
body.dark-mode #discover-page,
body.dark-mode #chat-page,
body.dark-mode #profile-page,
body.dark-mode #relationship-analysis-page,
body.dark-mode #relationship-analysis-result-page {
    background:
        radial-gradient(circle at 88% 4%, rgba(147, 124, 255, 0.14), transparent 28%),
        radial-gradient(circle at 0% 0%, rgba(255, 123, 155, 0.08), transparent 30%),
        linear-gradient(180deg, #151316 0%, #1c1820 100%);
}

.home-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 20px 0;
}

.home-brand-wordmark {
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.06em;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-history-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(59, 43, 99, 0.06);
}

body.dark-mode .home-history-pill {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border-color: var(--border-soft);
    box-shadow: none;
}

.hero-carousel {
    margin: 14px 16px 0;
    height: 318px;
    border-radius: 28px;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
    background:
        radial-gradient(circle at 84% 35%, rgba(var(--brand-pink-rgb), 0.32), transparent 32%),
        linear-gradient(135deg, #fff1f5 0%, #ffffff 46%, #f4efff 100%);
}

body.dark-mode .hero-carousel {
    background:
        radial-gradient(circle at 84% 34%, rgba(255, 123, 155, 0.32), transparent 30%),
        linear-gradient(135deg, #241f29 0%, #1c1820 58%, #2b2531 100%);
}

body.dark-mode .hero-cta-btn {
    color: #fffafd;
}

.hero-background {
    background:
        radial-gradient(circle at 84% 35%, rgba(var(--brand-pink-rgb), 0.24), transparent 30%),
        linear-gradient(135deg, rgba(255, 241, 245, 0.92) 0%, rgba(255, 255, 255, 0.74) 52%, rgba(244, 239, 255, 0.92) 100%);
}

body.dark-mode .hero-background {
    background:
        radial-gradient(circle at 84% 35%, rgba(255, 123, 155, 0.20), transparent 30%),
        linear-gradient(135deg, rgba(36, 31, 41, 0.96) 0%, rgba(28, 24, 32, 0.96) 58%, rgba(43, 37, 49, 0.96) 100%);
}

.hero-background::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 34px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background:
        linear-gradient(42deg, transparent 48%, rgba(255, 255, 255, 0.88) 50%, transparent 58%),
        repeating-radial-gradient(circle, transparent 0 17px, rgba(var(--brand-accent-rgb), 0.22) 18px 19px),
        radial-gradient(circle, rgba(var(--brand-pink-rgb), 0.70) 0 7px, rgba(var(--brand-pink-rgb), 0.22) 8px 22px, transparent 60px);
    opacity: 0.88;
}

body.dark-mode .hero-background::after {
    background:
        linear-gradient(42deg, transparent 48%, rgba(255, 123, 155, 0.96) 50%, transparent 58%),
        repeating-radial-gradient(circle, transparent 0 17px, rgba(201, 149, 234, 0.30) 18px 19px),
        radial-gradient(circle, rgba(255, 123, 155, 0.80) 0 7px, rgba(147, 124, 255, 0.22) 8px 22px, transparent 60px);
}

.hero-content {
    max-width: 62%;
}

.hero-content h2 {
    color: var(--text-color);
    font-size: 22px;
    line-height: 1.28;
    letter-spacing: 0;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.hero-content p {
    color: var(--text-secondary);
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

body.dark-mode .hero-content h2 {
    color: var(--text-color);
}

.hero-badge,
.discover-eyebrow,
.relationship-card-label,
.profile-group-label,
.profile-eyebrow {
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
}

.hero-cta-btn,
.relationship-primary-btn,
.relationship-primary-btn.full-width {
    background: var(--primary-color);
    color: #fffafd;
    box-shadow: 0 16px 28px rgba(var(--brand-pink-rgb), 0.22);
}

body.dark-mode .hero-cta-btn,
body.dark-mode .relationship-primary-btn,
body.dark-mode .relationship-primary-btn.full-width {
    color: #151316;
}

.relationship-entry-card,
.funnel-card,
.home-phase-map,
.relationship-hero-card,
.relationship-form-card,
.relationship-stage-card,
.relationship-decision-card,
.relationship-next-action-card,
.relationship-summary-card,
.relationship-replies-card,
.relationship-signal-card,
.relationship-avoid-card,
.profile-identity-card,
.profile-panel,
#profile-page .menu-item {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
}

body.dark-mode .relationship-entry-card,
body.dark-mode .funnel-card,
body.dark-mode .home-phase-map,
body.dark-mode .home-phase-card,
body.dark-mode .relationship-hero-card,
body.dark-mode .relationship-form-card,
body.dark-mode .relationship-stage-card,
body.dark-mode .relationship-decision-card,
body.dark-mode .relationship-next-action-card,
body.dark-mode .relationship-summary-card,
body.dark-mode .relationship-replies-card,
body.dark-mode .relationship-reply-card,
body.dark-mode .relationship-signal-card,
body.dark-mode .relationship-avoid-card,
body.dark-mode .profile-identity-card,
body.dark-mode .profile-panel,
body.dark-mode #profile-page .menu-item {
    background: var(--card-bg);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-soft);
}

.relationship-entry-card {
    margin: 18px 16px 0;
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 18px;
    padding: 20px 18px;
    position: relative;
}

.relationship-entry-card::before {
    content: "";
    grid-row: 1 / 3;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background:
        linear-gradient(42deg, transparent 47%, rgba(var(--brand-accent-rgb), 0.74) 49%, transparent 57%),
        repeating-radial-gradient(circle, transparent 0 15px, rgba(var(--brand-accent-rgb), 0.22) 16px 17px),
        radial-gradient(circle, rgba(var(--brand-accent-rgb), 0.58) 0 5px, rgba(var(--brand-purple-rgb), 0.14) 6px 27px, transparent 45px);
    box-shadow: 0 14px 26px rgba(var(--brand-accent-rgb), 0.12);
}

body.dark-mode .relationship-entry-card::before {
    background:
        linear-gradient(42deg, transparent 47%, rgba(201, 149, 234, 0.82) 49%, transparent 57%),
        repeating-radial-gradient(circle, transparent 0 15px, rgba(201, 149, 234, 0.28) 16px 17px),
        radial-gradient(circle, rgba(147, 124, 255, 0.68) 0 5px, rgba(255, 123, 155, 0.16) 6px 27px, transparent 45px);
}

.relationship-entry-card .relationship-entry-copy,
.relationship-entry-card .relationship-entry-actions {
    grid-column: 2;
}

.relationship-entry-card .relationship-primary-btn {
    min-height: 46px;
}

.funnel-card,
.home-phase-map {
    margin: 14px 16px 0;
}

.funnel-bar {
    background: rgba(var(--brand-pink-rgb), 0.07);
}

.funnel-bar-fill {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.home-phase-card {
    background: var(--card-bg-elevated);
    border-color: var(--border-soft);
}

.home-phase-card.active {
    background:
        radial-gradient(circle at bottom right, rgba(var(--brand-pink-rgb), 0.14), transparent 38%),
        var(--card-bg-elevated);
    border-color: rgba(var(--brand-pink-rgb), 0.45);
}

.relationship-analysis-shell,
.relationship-result-shell {
    padding-bottom: calc(var(--bottom-nav-height) + 26px);
}

.relationship-page-header {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--text-color);
}

body.dark-mode .relationship-page-header {
    background: rgba(18, 18, 26, 0.88) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.relationship-hero-card,
.relationship-stage-card {
    position: relative;
    overflow: hidden;
}

.relationship-hero-card::after,
.relationship-stage-card::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 18px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    pointer-events: none;
    background:
        linear-gradient(42deg, transparent 48%, rgba(var(--brand-accent-rgb), 0.58) 50%, transparent 58%),
        repeating-radial-gradient(circle, transparent 0 15px, rgba(var(--brand-accent-rgb), 0.18) 16px 17px),
        radial-gradient(circle, rgba(var(--brand-accent-rgb), 0.40) 0 6px, rgba(var(--brand-pink-rgb), 0.12) 7px 24px, transparent 58px);
    opacity: 0.55;
}

body.dark-mode .relationship-hero-card::after,
body.dark-mode .relationship-stage-card::after {
    background:
        linear-gradient(42deg, transparent 48%, rgba(147, 124, 255, 0.82) 50%, transparent 58%),
        repeating-radial-gradient(circle, transparent 0 15px, rgba(201, 149, 234, 0.28) 16px 17px),
        radial-gradient(circle, rgba(147, 124, 255, 0.58) 0 6px, rgba(255, 123, 155, 0.14) 7px 24px, transparent 58px);
}

.relationship-form-textarea,
.relationship-form-select,
.relationship-form-input,
.relationship-secondary-btn,
.relationship-reply-card,
.relationship-context-snippet,
.relationship-checkpoint-list span {
    background: var(--bg-secondary);
    color: var(--text-color);
    border-color: var(--border-soft);
}

body.dark-mode .relationship-form-textarea,
body.dark-mode .relationship-form-select,
body.dark-mode .relationship-form-input,
body.dark-mode .relationship-secondary-btn,
body.dark-mode .relationship-reply-card,
body.dark-mode .relationship-context-snippet,
body.dark-mode .relationship-checkpoint-list span {
    background: var(--card-bg-elevated);
    color: var(--text-color);
}

.profile-avatar .single-avatar,
body.dark-mode .profile-avatar .single-avatar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-color: var(--border-soft);
}

.profile-quick-card:first-child {
    border-color: rgba(var(--brand-pink-rgb), 0.46) !important;
}

.bottom-nav {
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    height: 68px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--border-soft);
    box-shadow: 0 -10px 34px rgba(59, 43, 99, 0.10);
}

body.dark-mode .bottom-nav {
    background: rgba(36, 31, 41, 0.88);
    border-color: var(--border-soft);
    box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.34);
}

.tab-item.active .tab-icon {
    color: var(--primary-color);
    transform: translateY(-1px) scale(1.12);
}

.tab-item.active .tab-label {
    color: var(--primary-color);
    font-weight: 800;
}

/* Desktop preview shell: keep the SPA rendered as a phone app, not a wide web page. */
body {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 18% 10%, rgba(var(--brand-pink-rgb), 0.10), transparent 30%),
        radial-gradient(circle at 82% 4%, rgba(var(--brand-purple-rgb), 0.12), transparent 28%),
        var(--bg-secondary);
}

body.dark-mode {
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 123, 155, 0.12), transparent 28%),
        radial-gradient(circle at 82% 4%, rgba(147, 124, 255, 0.14), transparent 30%),
        #0f0e11;
}

.app-container {
    width: min(100%, 430px);
    max-width: 430px;
    margin: 0 auto;
    background: var(--bg-primary);
    box-shadow: 0 0 0 1px var(--border-soft), 0 24px 80px rgba(59, 43, 99, 0.12);
    overflow: hidden;
}

body.dark-mode .app-container {
    background: var(--bg-primary);
    box-shadow: 0 0 0 1px var(--border-soft), 0 24px 80px rgba(0, 0, 0, 0.38);
}

.app-content {
    width: 100%;
}

.app-page {
    background:
        radial-gradient(circle at 80% 0%, rgba(var(--brand-purple-rgb), 0.10), transparent 32%),
        linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
}

body.dark-mode .app-page {
    background:
        radial-gradient(circle at 80% 0%, rgba(147, 124, 255, 0.14), transparent 30%),
        linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
}

.home-topbar {
    padding-top: 28px;
}

.hero-carousel {
    height: 318px;
    margin: 12px 16px 0;
    border-radius: 24px;
    background:
        radial-gradient(circle at 84% 34%, rgba(var(--brand-pink-rgb), 0.28), transparent 29%),
        linear-gradient(135deg, #fff0f4 0%, #ffffff 48%, #f4efff 100%);
}

body.dark-mode .hero-carousel {
    background:
        radial-gradient(circle at 84% 34%, rgba(255, 123, 155, 0.30), transparent 29%),
        linear-gradient(135deg, #241f29 0%, #1c1820 56%, #2b2531 100%);
}

.hero-background::before {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.36), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(var(--brand-pink-rgb), 0.18), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 54%);
}

.hero-background::after {
    box-shadow:
        0 0 0 1px rgba(var(--brand-accent-rgb), 0.08),
        0 18px 44px rgba(var(--brand-pink-rgb), 0.16);
    animation: radarSweep 5.8s linear infinite;
    transform-origin: center;
}

@keyframes radarSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-background::after {
        animation: none;
    }
}

.hero-wave {
    opacity: 0.34;
    background:
        radial-gradient(ellipse at 80% 82%, rgba(var(--brand-purple-rgb), 0.22), transparent 34%),
        repeating-linear-gradient(164deg, transparent 0 11px, rgba(var(--brand-purple-rgb), 0.12) 12px 13px);
    mask-image: linear-gradient(160deg, transparent 0%, #000 48%, #000 80%, transparent 100%);
}

body.dark-mode .hero-wave {
    opacity: 0.46;
}

.hero-stats {
    gap: 14px;
    align-items: center;
}

.hero-stats .stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    align-items: center;
    min-width: 86px;
}

.hero-stats .stat::before {
    content: "\f0e7";
    grid-row: 1 / 3;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--primary-color);
    font-size: 22px;
}

.hero-stats .stat:nth-child(2)::before {
    content: "\f2f1";
}

.stat-number {
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.15;
}

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

.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    min-width: 164px;
    justify-content: center;
}

.hero-cta-btn::after {
    content: "\f105";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background: rgba(255, 255, 255, 0.72);
    color: var(--primary-color);
}

.carousel-pagination {
    background: transparent;
    bottom: 13px;
}

.pagination-dot {
    background: rgba(137, 125, 152, 0.34);
}

.pagination-dot.active {
    width: 8px;
    background: var(--primary-color);
}

.quick-experience.enhanced,
.features-section,
.home-journey-card {
    margin: 14px 16px 0;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
}

body.dark-mode .quick-experience.enhanced,
body.dark-mode .features-section,
body.dark-mode .home-journey-card {
    background: var(--card-bg);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-soft);
}

.discover-shell,
.profile-shell {
    padding: 24px 16px calc(var(--bottom-nav-height) + 38px);
}

.discover-heading,
.profile-heading {
    padding: 4px 4px 2px;
}

.discover-search,
.category-tab,
.discover-featured-card,
.discover-list-card,
.discover-prompt-card {
    border-color: var(--border-soft);
}

.discover-search,
.discover-featured-card,
.discover-list-card {
    background: var(--card-bg);
    box-shadow: var(--shadow-soft);
}

body.dark-mode .discover-search,
body.dark-mode .discover-featured-card,
body.dark-mode .discover-list-card {
    background: var(--card-bg);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-soft);
}

.category-tab.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(var(--brand-pink-rgb), 0.18);
}

.discover-featured-card:first-child {
    background:
        radial-gradient(circle at 92% 20%, rgba(var(--brand-pink-rgb), 0.14), transparent 34%),
        var(--card-bg);
}

.chat-content {
    gap: 12px;
    padding: 22px 16px calc(var(--bottom-nav-height) + 16px);
    background: transparent !important;
}

.chat-header-container {
    display: none;
}

.chat-workspace-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.chat-workspace-head h2 {
    margin: 0 0 7px;
    color: var(--text-color);
    font-size: 27px;
    line-height: 1.08;
    letter-spacing: 0;
}

.chat-workspace-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.chat-session-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(59, 43, 99, 0.06);
}

.chat-return-banner,
.chat-radar-suggestion-card,
.chat-container,
.chat-input-box {
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    box-shadow: var(--shadow-soft);
}

.chat-return-banner {
    border-radius: 22px;
    padding: 14px 15px;
}

.chat-radar-suggestion-card {
    border-radius: 24px;
    padding: 16px;
}

.chat-suggestion-topline {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.chat-suggestion-topline span,
.chat-suggestion-topline strong {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.chat-suggestion-topline span {
    background: rgba(var(--brand-pink-rgb), 0.12);
    color: var(--primary-color);
}

.chat-suggestion-topline strong {
    background: rgba(var(--brand-accent-rgb), 0.12);
    color: var(--accent-color);
}

.chat-radar-suggestion-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.chat-suggestion-actions {
    display: flex;
    gap: 9px;
    margin-top: 14px;
}

.chat-suggestion-actions button {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-soft);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 800;
}

.chat-suggestion-actions button:first-child {
    background: var(--primary-color);
    border-color: transparent;
    color: #fff;
}

.chat-container {
    min-height: 0;
    border-radius: 26px;
    padding: 0;
    background: rgba(255, 255, 255, 0.58);
}

#chat-messages {
    padding: 18px 14px;
}

.message.ai-message .message-content {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-color);
    box-shadow: 0 10px 24px rgba(59, 43, 99, 0.06);
}

.chat-input-wrapper {
    padding: 0;
    border-top: 0;
}

.chat-input-box {
    border-radius: 999px;
    padding: 9px;
}

body.dark-mode .chat-session-pill,
body.dark-mode .chat-return-banner,
body.dark-mode .chat-radar-suggestion-card,
body.dark-mode .chat-container,
body.dark-mode .chat-input-box,
body.dark-mode .message.ai-message .message-content {
    background: var(--card-bg);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-soft);
}

body.dark-mode .chat-suggestion-actions button {
    background: var(--card-bg-elevated);
    border-color: var(--border-soft);
    color: var(--text-color);
}

body.dark-mode .chat-suggestion-actions button:first-child {
    background: var(--primary-color);
    color: #151316;
}

.profile-identity-card {
    align-items: flex-start;
}

.profile-quick-card:first-child {
    background:
        radial-gradient(circle at 94% 20%, rgba(var(--brand-pink-rgb), 0.16), transparent 36%),
        var(--card-bg) !important;
}

#profile-page .menu-icon,
.attachment-icon {
    background: var(--gradient-secondary);
}

@media (max-width: 380px) {
    .hero-content {
        max-width: 66%;
    }

    .hero-content h2 {
        font-size: 20px;
    }

    .hero-background::after {
        right: 8px;
        width: 112px;
        height: 112px;
    }

    .relationship-entry-card {
        grid-template-columns: 72px 1fr;
        gap: 14px;
    }

    .relationship-entry-card::before {
        width: 72px;
        height: 72px;
    }
}

/* Home keeps the accepted Brand Soft Wi-Fi signal. */
#home-page .brand-signal-mark {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: 0;
    margin-top: -7px;
    transform: rotate(42deg) scale(0.76);
    transform-origin: left bottom;
    color: #9a5cff;
    -webkit-text-fill-color: #9a5cff;
    opacity: 0.58;
    filter: none;
}

#home-page .brand-signal-mark::before {
    content: "\f1eb";
    position: static;
    display: block;
    font-family: "Font Awesome 6 Free";
    font-size: 7px;
    font-weight: 900;
    line-height: 1;
    color: currentColor;
    -webkit-text-fill-color: currentColor;
}

/* Final B1.1 About wordmark. */
.rapport-brand-wordmark {
    --rapport-brand-signal-width: 29px;
    --rapport-brand-signal-height: 31px;
    --rapport-brand-signal-top: -29px;
    --rapport-brand-signal-right: -22px;
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    max-width: none;
    overflow: visible;
    background: none !important;
    color: inherit !important;
    -webkit-text-fill-color: initial !important;
}

.rapport-brand-wordmark .rapport-brand-name {
    display: block;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-family: var(--font-sans) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.8px !important;
    background: linear-gradient(104deg, #ff5f82 0%, #d84daa 56%, #8d63e6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.rapport-brand-wordmark .rapport-brand-signal {
    position: absolute;
    top: var(--rapport-brand-signal-top);
    right: var(--rapport-brand-signal-right);
    width: var(--rapport-brand-signal-width);
    height: var(--rapport-brand-signal-height);
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(141, 99, 230, 0.14));
}

#about-page .rapport-about-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 0 16px !important;
    padding-top: 34px;
}

#about-page .rapport-brand-wordmark {
    --rapport-brand-signal-width: 36px;
    --rapport-brand-signal-height: 39px;
    --rapport-brand-signal-top: -32px;
    --rapport-brand-signal-right: -29px;
}

#about-page .rapport-brand-name {
    font-size: 34px !important;
    letter-spacing: -1.2px !important;
}

#about-page .rapport-about-descriptor {
    margin: 14px 0 0 !important;
    color: #6f6275 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02px !important;
}

body.dark-mode #about-page .rapport-about-descriptor {
    color: #eee4ed !important;
}

@media (max-width: 380px) {
    #about-page .rapport-brand-name {
        font-size: 32px !important;
    }
}

.hero-slide {
    padding: 22px 18px 18px;
}

.hero-background::after {
    right: 18px;
    top: 30px;
    width: 118px;
    height: 118px;
}

.hero-content {
    width: 62%;
    max-width: 238px;
    min-width: 0;
    justify-content: flex-start;
}

.hero-badge {
    margin-top: 0;
    margin-bottom: 10px;
}

.hero-content h2 {
    font-size: 20px;
    line-height: 1.30;
    margin-bottom: 8px;
    word-break: normal;
    overflow-wrap: anywhere;
}

.hero-content p {
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 10px;
}

.hero-stats {
    gap: 16px;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    margin: 0 0 12px;
    align-items: center;
}

.stat-number {
    font-size: 19px;
    line-height: 1.05;
}

.stat-label {
    font-size: 12px;
    line-height: 1.25;
}

.hero-cta-btn {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 22px;
}

.carousel-indicators {
    bottom: 16px;
}

.relationship-entry-card,
.funnel-card,
.home-phase-map {
    border-radius: 22px;
}

.discover-eyebrow,
.relationship-card-label,
.profile-group-label,
.profile-eyebrow {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
}

.relationship-entry-card .discover-eyebrow,
.funnel-card .discover-eyebrow,
.home-phase-map .discover-eyebrow {
    margin-bottom: 14px;
}

.relationship-entry-copy h2,
.funnel-card h3 {
    line-height: 1.32;
}

.relationship-entry-copy p,
.funnel-card p {
    line-height: 1.58;
}

.bottom-nav {
    left: 50%;
    right: auto;
    width: min(406px, calc(100% - 24px));
    transform: translateX(-50%);
}

.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 {
    transform: translate(-50%, 100%) !important;
}

@media (max-width: 480px) {
    body {
        background: var(--bg-primary);
    }

    body.dark-mode {
        background: var(--bg-primary);
    }

    .app-container {
        width: 100%;
        max-width: none;
        box-shadow: none;
    }

    .bottom-nav {
        width: calc(100% - 24px);
    }

    .relationship-entry-card {
        grid-template-columns: 84px 1fr;
        gap: 14px;
    }

    .relationship-entry-card::before {
        width: 78px;
        height: 78px;
    }
}

/* Warm Trust x Brand Soft 2.0 restoration pass: match the generated mobile mockups more closely. */
.hero-carousel {
    height: 326px;
    margin: 12px 16px 0;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.20);
    background:
        radial-gradient(circle at 78% 35%, rgba(var(--brand-pink-rgb), 0.26), transparent 32%),
        radial-gradient(circle at 96% 84%, rgba(var(--brand-purple-rgb), 0.22), transparent 34%),
        linear-gradient(135deg, #fff1f4 0%, #fffdfd 46%, #f4edff 100%);
}

body.dark-mode .hero-carousel {
    border-color: rgba(255, 123, 155, 0.34);
    background:
        radial-gradient(circle at 80% 35%, rgba(255, 123, 155, 0.26), transparent 32%),
        radial-gradient(circle at 92% 84%, rgba(147, 124, 255, 0.25), transparent 34%),
        linear-gradient(135deg, #261820 0%, #19151d 55%, #241b31 100%);
}

.hero-slide {
    padding: 20px 16px 18px;
    align-items: stretch;
}

.hero-background {
    background:
        radial-gradient(circle at 78% 35%, rgba(var(--brand-pink-rgb), 0.20), transparent 30%),
        linear-gradient(135deg, rgba(255, 245, 247, 0.96) 0%, rgba(255, 255, 255, 0.78) 52%, rgba(245, 238, 255, 0.95) 100%);
}

body.dark-mode .hero-background {
    background:
        radial-gradient(circle at 76% 35%, rgba(255, 123, 155, 0.18), transparent 30%),
        linear-gradient(135deg, rgba(38, 24, 32, 0.98) 0%, rgba(25, 21, 29, 0.98) 56%, rgba(36, 27, 49, 0.98) 100%);
}

.hero-background::before {
    background:
        radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.48), transparent 16%),
        radial-gradient(circle at 96% 10%, rgba(255, 255, 255, 0.30), transparent 18%),
        radial-gradient(circle at 82% 34%, rgba(var(--brand-pink-rgb), 0.24), transparent 28%),
        repeating-linear-gradient(164deg, transparent 0 13px, rgba(var(--brand-accent-rgb), 0.08) 14px 15px);
    opacity: 0.9;
}

body.dark-mode .hero-background::before {
    background:
        radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.05), transparent 16%),
        radial-gradient(circle at 96% 10%, rgba(255, 123, 155, 0.20), transparent 18%),
        radial-gradient(circle at 82% 34%, rgba(255, 123, 155, 0.16), transparent 28%),
        repeating-linear-gradient(164deg, transparent 0 13px, rgba(201, 149, 234, 0.09) 14px 15px);
}

.hero-background::after {
    right: 14px;
    top: 36px;
    width: 148px;
    height: 148px;
    background:
        linear-gradient(34deg, transparent 45%, rgba(255, 255, 255, 0.94) 49%, rgba(255, 111, 143, 0.46) 52%, transparent 60%),
        repeating-radial-gradient(circle, transparent 0 17px, rgba(var(--brand-accent-rgb), 0.22) 18px 19px),
        radial-gradient(circle, rgba(var(--brand-pink-rgb), 0.78) 0 7px, rgba(var(--brand-pink-rgb), 0.22) 8px 24px, transparent 66px);
    filter: drop-shadow(0 12px 24px rgba(var(--brand-pink-rgb), 0.18));
    opacity: 0.96;
}

body.dark-mode .hero-background::after {
    background:
        linear-gradient(34deg, transparent 45%, rgba(255, 123, 155, 0.98) 49%, rgba(201, 149, 234, 0.34) 52%, transparent 60%),
        repeating-radial-gradient(circle, transparent 0 17px, rgba(201, 149, 234, 0.34) 18px 19px),
        radial-gradient(circle, rgba(255, 123, 155, 0.86) 0 7px, rgba(147, 124, 255, 0.25) 8px 24px, transparent 66px);
    filter: drop-shadow(0 14px 30px rgba(255, 123, 155, 0.24));
}

.hero-wave {
    opacity: 0.44;
    background:
        radial-gradient(ellipse at 76% 76%, rgba(var(--brand-purple-rgb), 0.34), transparent 32%),
        repeating-linear-gradient(164deg, transparent 0 8px, rgba(var(--brand-purple-rgb), 0.17) 9px 10px);
    transform: translate(8%, 20%) rotate(-4deg);
}

body.dark-mode .hero-wave {
    opacity: 0.55;
}

.hero-content {
    width: calc(100% - 138px);
    max-width: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hero-badge {
    min-height: 26px;
    height: auto;
    max-height: none;
    padding: 5px 11px;
    margin: 0 0 10px;
    line-height: 1.15;
    font-size: 12px;
    font-weight: 800;
}

.hero-content h2 {
    margin: 0 0 7px;
    font-size: 19px;
    line-height: 1.22;
    font-weight: 900;
    color: var(--text-color);
    overflow: visible !important;
    overflow-wrap: normal;
    word-break: normal;
}

.hero-content p {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.42;
    color: var(--text-secondary);
    overflow: visible !important;
}

.hero-stats {
    min-height: 38px;
    height: 38px;
    max-height: 38px;
    gap: 12px;
    margin: 0 0 12px;
}

.hero-stats .stat {
    min-width: 76px;
    gap: 1px 7px;
}

.hero-stats .stat::before {
    font-size: 22px;
}

.stat-number {
    font-size: 17px;
}

.stat-label {
    font-size: 11.5px;
}

.hero-cta-btn {
    min-width: 164px;
    min-height: 46px;
    height: 46px;
    margin: 0;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 900;
    padding: 0 15px 0 18px;
}

.carousel-pagination {
    bottom: 14px;
}

.home-phase-map {
    padding: 14px 14px 16px;
    border-radius: 22px;
    overflow: hidden;
}

.home-phase-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.home-phase-map-head .discover-eyebrow {
    margin: 0;
}

.home-phase-map-head h3,
.home-phase-map-head p {
    display: none;
}

.home-phase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    position: relative;
}

.home-phase-grid::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 50%;
    border-top: 2px dotted rgba(var(--brand-accent-rgb), 0.28);
    transform: translateY(-50%);
    pointer-events: none;
}

.home-phase-card {
    min-height: 126px;
    padding: 10px 7px;
    border-radius: 14px;
    text-align: center;
    display: grid;
    align-content: space-between;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.home-phase-card::before {
    content: "\f007";
    width: 30px;
    height: 30px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color);
    background: rgba(var(--brand-accent-rgb), 0.12);
}

.home-phase-card[data-phase="2"]::before { content: "\f086"; color: var(--primary-color); background: rgba(var(--brand-pink-rgb), 0.14); }
.home-phase-card[data-phase="3"]::before { content: "\f073"; }
.home-phase-card[data-phase="4"]::before { content: "\f0c0"; }

.home-phase-card-topline {
    display: block;
    margin: 0;
}

.home-phase-number {
    display: block;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
}

.home-phase-status {
    display: none;
}

.home-phase-card h4 {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.2;
}

.home-phase-card p {
    display: none;
}

.home-phase-card.active {
    border-color: rgba(var(--brand-pink-rgb), 0.70);
    box-shadow: 0 12px 24px rgba(var(--brand-pink-rgb), 0.13);
}

.home-phase-card.active .home-phase-status.active {
    display: inline-flex;
    justify-content: center;
    min-height: 22px;
    max-width: 78px;
    padding: 0 6px;
    margin: 0 auto;
    font-size: 9px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.home-phase-cta {
    width: min(70px, 100%);
    min-height: 24px;
    padding: 0 7px;
    margin: 0;
    border-radius: 999px;
    font-size: 0;
    white-space: nowrap;
    justify-self: center;
    overflow: hidden;
}

.home-phase-cta::before {
    content: "雷达";
    font-size: 9px;
    line-height: 1;
}

html[lang^="en"] .home-phase-cta::before {
    content: "Radar";
}

body.dark-mode .hero-carousel .hero-cta-btn {
    color: #fffafd;
}

body.dark-mode #home-page .relationship-primary-btn {
    color: #fffafd;
}

/* App preview correction: desktop browser should still read as a native mobile app. */
body {
    background: #f7f3f6;
}

body.dark-mode {
    background: #0f0e11;
}

:root {
    --app-shell-width: min(100vw, 430px);
    --app-fixed-left: calc((100vw - var(--app-shell-width)) / 2);
}

.app-container {
    width: var(--app-shell-width);
    max-width: 430px;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    overflow: hidden;
    background: var(--bg-primary);
    box-shadow: 0 0 0 1px rgba(59, 43, 99, 0.08);
}

body.dark-mode .app-container {
    background: var(--bg-primary);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.app-page {
    scrollbar-width: none;
}

.app-page::-webkit-scrollbar {
    display: none;
}

.bottom-nav {
    left: 50%;
    right: auto;
    bottom: 0;
    width: var(--app-shell-width);
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(-50%);
    border-radius: 24px 24px 0 0;
    border: 0;
    border-top: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -8px 24px rgba(59, 43, 99, 0.08);
}

.chat-sessions {
    width: var(--app-shell-width);
    left: var(--app-fixed-left);
    transform: translateX(-110%);
    pointer-events: none;
}

.chat-sessions.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

body.dark-mode .bottom-nav {
    background: rgba(36, 31, 41, 0.96);
    border-top-color: var(--border-soft);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.30);
}

.tab-item {
    height: var(--bottom-nav-height);
    justify-content: center;
    max-width: none;
    padding: 7px 0 6px;
}

.tab-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.tab-label {
    font-size: 11px;
    line-height: 1.1;
    font-weight: 700;
}

.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 {
    transform: translate(-50%, 100%) !important;
}

@media (max-width: 480px) {
    body {
        background: var(--bg-primary);
    }

    body.dark-mode {
        background: var(--bg-primary);
    }

    .app-container,
    .bottom-nav {
        width: 100vw;
        max-width: none;
    }

    .app-container {
        box-shadow: none;
    }
}

/* Chat/Profile restoration: remove explanatory clutter and make each tab feel like a native app screen. */
#chat-page .chat-page {
    height: 100%;
    min-height: 0;
}

#chat-page {
    height: calc(100vh - var(--bottom-nav-height));
    height: calc(100dvh - var(--bottom-nav-height));
}

#chat-page .chat-content {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px 10px;
}

#chat-page .chat-workspace-head {
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    flex-shrink: 0;
}

#chat-page .chat-session-pill {
    min-height: 38px;
    padding: 0 14px;
}

#chat-page .chat-help-pill {
    color: var(--primary-color);
}

#chat-page .chat-return-banner {
    flex-shrink: 0;
}

#chat-page .chat-radar-suggestion-card {
    display: none;
}

#chat-page .chat-container {
    flex: 1 1 auto;
    min-height: 0;
}

#chat-page .chat-input-wrapper {
    flex-shrink: 0;
    padding: 0 0 2px;
}

#profile-page .profile-shell {
    position: relative;
    padding: 16px 16px calc(var(--bottom-nav-height) + 18px);
    background: transparent;
    border: 0;
    box-shadow: none;
}

#profile-page .profile-shell::before {
    content: none;
    display: none;
}

body.dark-mode #profile-page .profile-shell::before {
    content: none;
    display: none;
}

#profile-page .profile-page-intro,
#profile-page .profile-overview-grid,
#profile-page .profile-content-grid,
#profile-page .profile-exit-card {
    position: relative;
    z-index: 1;
}

#profile-page .profile-page-intro {
    padding: 18px 18px 14px;
    margin-bottom: 14px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
}

body.dark-mode #profile-page .profile-page-intro {
    background: var(--card-bg);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-soft);
}

#profile-page .profile-heading {
    padding: 0;
}

/* Theme-aware icon surfaces. */
.feature-icon,
.features-section .feature-icon,
#profile-page .menu-icon,
.attachment-icon,
.message-avatar.ai,
.chat-prompt-card i,
.discover-list-card i,
.discover-prompt-card i,
.relationship-card-label i,
.relationship-step,
.home-journey-number {
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.18), rgba(var(--brand-purple-rgb), 0.18));
    color: var(--primary-color);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.16);
}

.feature-icon i,
.features-section .feature-icon i,
#profile-page .menu-icon i,
.attachment-icon i,
.message-avatar.ai i {
    color: inherit;
}

body.dark-mode .feature-icon,
body.dark-mode .features-section .feature-icon,
body.dark-mode #profile-page .menu-icon,
body.dark-mode .attachment-icon,
body.dark-mode .message-avatar.ai,
body.dark-mode .chat-prompt-card i,
body.dark-mode .discover-list-card i,
body.dark-mode .discover-prompt-card i,
body.dark-mode .relationship-card-label i,
body.dark-mode .relationship-step,
body.dark-mode .home-journey-number {
    background: linear-gradient(135deg, rgba(255, 123, 155, 0.22), rgba(147, 124, 255, 0.22));
    color: #ff8fac;
    border-color: rgba(255, 123, 155, 0.22);
}

body.dark-mode .feature-arrow,
body.dark-mode .menu-arrow {
    color: rgba(246, 237, 242, 0.54);
}

body.dark-mode .home-phase-grid::before {
    border-top-color: rgba(201, 149, 234, 0.35);
}

#profile-page {
    display: none;
}

#profile-page.active {
    display: block;
}

#profile-page .profile-shell {
    width: min(100%, 430px);
    max-width: 430px;
    margin: 0 auto;
    padding: 18px 16px calc(var(--bottom-nav-height) + 36px);
}

#profile-page .profile-page-intro {
    margin-bottom: 14px;
}

#profile-page .profile-heading h2 {
    font-size: 24px;
    line-height: 1.16;
}

#profile-page .profile-heading p {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.5;
}

#profile-page .profile-overview-grid,
#profile-page .profile-content-grid,
#profile-page .profile-quick-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
}

#profile-page .profile-identity-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 12%, rgba(var(--brand-pink-rgb), 0.10), transparent 34%),
        var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);
}

#profile-page .profile-avatar {
    width: 62px;
    height: 62px;
}

#profile-page .single-avatar {
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.22), rgba(var(--brand-purple-rgb), 0.24)),
        var(--bg-secondary);
    border: 1px solid rgba(var(--brand-pink-rgb), 0.20);
    box-shadow: 0 12px 24px rgba(var(--brand-pink-rgb), 0.12);
}

#profile-page .single-avatar .profile-default-icon {
    font-size: 24px;
    color: var(--primary-color);
}

#profile-page .profile-name {
    font-size: 19px;
}

#profile-page .profile-bio {
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 0;
}

#profile-page .profile-name-row {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

#profile-page .profile-edit-pill {
    flex-shrink: 0;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.18);
    background: rgba(var(--brand-pink-rgb), 0.10);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

#profile-page .profile-edit-pill:active {
    transform: scale(0.98);
}

body.dark-mode #profile-page .profile-identity-card {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 123, 155, 0.14), transparent 34%),
        var(--card-bg);
    border-color: var(--border-soft);
}

body.dark-mode #profile-page .single-avatar {
    background:
        linear-gradient(135deg, rgba(255, 123, 155, 0.20), rgba(147, 124, 255, 0.24)),
        var(--card-bg-elevated);
    border-color: rgba(255, 123, 155, 0.20);
}

body.dark-mode #profile-page .single-avatar .profile-default-icon {
    color: #ff8fac;
}

body.dark-mode #profile-page .profile-edit-pill {
    background: rgba(255, 123, 155, 0.14);
    border-color: rgba(255, 123, 155, 0.22);
    color: #ff8fac;
}

#profile-page .profile-panel {
    padding: 16px;
    border-radius: 22px;
}

#profile-page .profile-group-heading p {
    font-size: 13px;
    line-height: 1.45;
}

#profile-page .menu-item {
    min-height: 74px;
    padding: 13px 14px;
    border-radius: 18px;
}

#profile-page .menu-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
}

#profile-page .menu-title,
#profile-page .profile-quick-title {
    font-size: 15px;
}

#profile-page .menu-subtitle,
#profile-page .profile-quick-desc {
    font-size: 12.5px;
    line-height: 1.38;
}

#profile-page .menu-behavior-pill {
    min-height: 22px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.02em;
}

@media (max-width: 380px) {
    .hero-carousel {
        height: 336px;
    }

    .hero-background::after {
        right: 8px;
        width: 126px;
        height: 126px;
    }

    .hero-content {
        width: calc(100% - 116px);
    }

    .hero-content h2 {
        font-size: 18px;
    }

    .home-phase-grid {
        gap: 6px;
    }

    .home-phase-card {
        min-height: 122px;
        padding-inline: 6px;
    }

    .home-phase-card h4 {
        font-size: 12px;
    }
}

/* Secondary pages theme unification — Warm Trust x Brand Soft 2.0 */
#edit-profile-page,
#settings-page,
#vip-page,
#help-page,
#about-page,
#relationship-history-page,
#content-detail-page,
#article-page,
#terms-page,
#privacy-page,
#ai-disclaimer-page,
#support-page,
#feedback-page,
#login-page,
#register-page {
    background:
        radial-gradient(circle at 78% 4%, rgba(var(--brand-purple-rgb), 0.12), transparent 30%),
        radial-gradient(circle at 12% 18%, rgba(var(--brand-pink-rgb), 0.10), transparent 34%),
        linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
    color: var(--text-color);
}

body.dark-mode #edit-profile-page,
body.dark-mode #settings-page,
body.dark-mode #vip-page,
body.dark-mode #help-page,
body.dark-mode #about-page,
body.dark-mode #relationship-history-page,
body.dark-mode #content-detail-page,
body.dark-mode #article-page,
body.dark-mode #terms-page,
body.dark-mode #privacy-page,
body.dark-mode #ai-disclaimer-page,
body.dark-mode #support-page,
body.dark-mode #feedback-page,
body.dark-mode #login-page,
body.dark-mode #register-page {
    background:
        radial-gradient(circle at 78% 4%, rgba(147, 124, 255, 0.16), transparent 30%),
        radial-gradient(circle at 12% 18%, rgba(255, 123, 155, 0.12), transparent 34%),
        linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
    color: var(--text-color);
}

#edit-profile-page .page-header,
#settings-page .page-header,
#vip-page .page-header,
#help-page .page-header,
#about-page .page-header,
#relationship-history-page .page-header,
#content-detail-page .page-header,
#article-page .page-header,
#terms-page .page-header,
#privacy-page .page-header,
#ai-disclaimer-page .page-header,
#support-page .page-header,
#feedback-page .page-header,
#register-page .page-header {
    background: rgba(255, 250, 253, 0.78) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    color: var(--text-color) !important;
    box-shadow: 0 12px 30px rgba(59, 43, 99, 0.06) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.dark-mode #edit-profile-page .page-header,
body.dark-mode #settings-page .page-header,
body.dark-mode #vip-page .page-header,
body.dark-mode #help-page .page-header,
body.dark-mode #about-page .page-header,
body.dark-mode #relationship-history-page .page-header,
body.dark-mode #content-detail-page .page-header,
body.dark-mode #article-page .page-header,
body.dark-mode #terms-page .page-header,
body.dark-mode #privacy-page .page-header,
body.dark-mode #ai-disclaimer-page .page-header,
body.dark-mode #support-page .page-header,
body.dark-mode #feedback-page .page-header,
body.dark-mode #register-page .page-header {
    background: rgba(28, 24, 32, 0.82) !important;
    border-bottom-color: var(--border-soft) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

#edit-profile-page .page-content,
#settings-page .page-content,
#vip-page .page-content,
#help-page .page-content,
#about-page .page-content,
#relationship-history-page .page-content,
#content-detail-page .page-content,
#article-page .page-content,
#terms-page .page-content,
#privacy-page .page-content,
#ai-disclaimer-page .page-content,
#support-page .page-content,
#feedback-page .page-content,
#login-page .page-content,
#register-page .page-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.settings-section,
.stats-section,
.vip-plan-card,
.vip-badge,
.benefit-item,
.app-info,
.team-section,
.mission-section,
.social-section,
.contact-section,
.faq-item,
.legal-summary-card,
.legal-section-card,
.article-body-card,
.relationship-history-item,
.auth-card,
.auth-container,
.login-container,
.register-container,
.discover-detail-hero,
.discover-detail-body,
.date-picker-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
    color: var(--text-color) !important;
}

body.dark-mode .settings-section,
body.dark-mode .stats-section,
body.dark-mode .vip-plan-card,
body.dark-mode .vip-badge,
body.dark-mode .benefit-item,
body.dark-mode .app-info,
body.dark-mode .team-section,
body.dark-mode .mission-section,
body.dark-mode .social-section,
body.dark-mode .contact-section,
body.dark-mode .faq-item,
body.dark-mode .legal-summary-card,
body.dark-mode .legal-section-card,
body.dark-mode .article-body-card,
body.dark-mode .relationship-history-item,
body.dark-mode .auth-card,
body.dark-mode .auth-container,
body.dark-mode .login-container,
body.dark-mode .register-container,
body.dark-mode .discover-detail-hero,
body.dark-mode .discover-detail-body,
body.dark-mode .date-picker-content {
    background: var(--card-bg) !important;
    border-color: var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
}

.settings-section,
.stats-section,
.legal-summary-card,
.legal-section-card,
.article-body-card,
.discover-detail-hero,
.discover-detail-body {
    border-radius: 24px !important;
}

.settings-item,
.settings-nav-link,
.stats-card,
.stats-list-item,
.form-input,
.form-textarea,
.form-select,
.settings-language-select,
.relationship-form-input,
.relationship-form-select,
.relationship-form-textarea,
.search-box input,
.faq-question,
.faq-answer,
.auth-input,
.input-wrapper,
.social-login-btn,
#settings-password-form input {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

body.dark-mode .settings-item,
body.dark-mode .settings-nav-link,
body.dark-mode .stats-card,
body.dark-mode .stats-list-item,
body.dark-mode .form-input,
body.dark-mode .form-textarea,
body.dark-mode .form-select,
body.dark-mode .settings-language-select,
body.dark-mode .relationship-form-input,
body.dark-mode .relationship-form-select,
body.dark-mode .relationship-form-textarea,
body.dark-mode .search-box input,
body.dark-mode .faq-question,
body.dark-mode .faq-answer,
body.dark-mode .auth-input,
body.dark-mode .input-wrapper,
body.dark-mode .social-login-btn,
body.dark-mode #settings-password-form input {
    background: var(--card-bg-elevated) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-color) !important;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.settings-language-select:focus,
.relationship-form-input:focus,
.relationship-form-select:focus,
.relationship-form-textarea:focus,
.search-box input:focus,
.auth-input:focus,
.input-wrapper:focus-within,
#settings-password-form input:focus {
    border-color: rgba(var(--brand-pink-rgb), 0.46) !important;
    box-shadow: 0 0 0 4px rgba(var(--brand-pink-rgb), 0.10) !important;
    outline: none;
}

.back-btn,
.article-back-btn,
.save-btn,
.settings-action-btn,
.auth-btn.primary,
.vip-select-btn,
.contact-btn,
.discover-detail-chat-btn,
.relationship-history-btn {
    border: 0 !important;
    background: var(--primary-color) !important;
    color: #fffafd !important;
    box-shadow: 0 14px 26px rgba(var(--brand-pink-rgb), 0.22) !important;
}

.back-btn,
.article-back-btn {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: 0 10px 22px rgba(59, 43, 99, 0.08) !important;
}

.page-header .back-btn,
.discover-detail-header .back-btn,
.article-back-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

body.dark-mode .back-btn,
body.dark-mode .article-back-btn {
    background: var(--card-bg-elevated) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

.legal-eyebrow,
.notice-feed-eyebrow,
.recommend-tag,
.vip-plan-card.recommended::before,
.profile-group-label,
.relationship-card-label {
    background: rgba(var(--brand-pink-rgb), 0.12) !important;
    color: var(--primary-color) !important;
}

.settings-section h3,
.settings-section h4,
.stats-section h4,
.vip-benefits h4,
.legal-summary-card h3,
.legal-section-card h4,
.article-body-card h4,
.faq-question,
.settings-item-title,
.stats-card-value,
.price-value,
.benefit-title {
    color: var(--text-color) !important;
}

.settings-item-desc,
.stats-card-label,
.chart-labels span,
.benefit-desc,
.legal-summary-card p,
.legal-section-card p,
.article-body-card p,
.article-body-card li,
.article-note,
.faq-answer,
.discover-detail-summary,
.discover-detail-meta,
.relationship-history-empty,
.relationship-history-item span {
    color: var(--text-secondary) !important;
}

.toggle-label {
    background: rgba(137, 125, 152, 0.30) !important;
}

.toggle-label::before {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(59, 43, 99, 0.18);
}

body.dark-mode .toggle-label::before {
    background: #f6edf2 !important;
}

.toggle-input:checked + .toggle-label {
    background: var(--gradient-primary) !important;
}

.stats-bar {
    background: linear-gradient(to top, var(--primary-color), var(--secondary-color)) !important;
}

.stats-rank,
.social-link,
.interest-tag.active {
    background: var(--gradient-primary) !important;
    color: #fffafd !important;
}

.vip-plan-card.recommended {
    border-color: rgba(var(--brand-pink-rgb), 0.48) !important;
    background:
        radial-gradient(circle at 90% 0%, rgba(var(--brand-pink-rgb), 0.12), transparent 34%),
        var(--card-bg) !important;
}

body.dark-mode .vip-plan-card.recommended {
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 123, 155, 0.12), transparent 34%),
        var(--card-bg) !important;
}

.legal-section-card a,
.terms-section a,
.auth-link,
.auth-links a,
.settings-nav-link i,
.vip-feature i,
.benefit-item i,
.contact-section h4,
.app-logo i {
    color: var(--primary-color) !important;
}

.discover-detail-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(var(--brand-pink-rgb), 0.16), transparent 34%),
        linear-gradient(135deg, #fff0f4 0%, #ffffff 48%, #f4efff 100%) !important;
}

body.dark-mode .discover-detail-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 123, 155, 0.18), transparent 34%),
        linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 54%, var(--card-bg-elevated) 100%) !important;
}

#login-page .auth-container,
#register-page .auth-container,
#login-page .login-container,
#register-page .register-container {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
    border-radius: 28px !important;
    padding: 24px 20px !important;
}

body.dark-mode #login-page .login-container,
body.dark-mode #register-page .register-container {
    background: var(--card-bg) !important;
    border-color: var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
}

#login-page .input-wrapper,
#register-page .input-wrapper,
#login-page .social-login-btn,
#register-page .social-login-btn {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-color) !important;
}

body.dark-mode #login-page .input-wrapper,
body.dark-mode #register-page .input-wrapper,
body.dark-mode #login-page .social-login-btn,
body.dark-mode #register-page .social-login-btn {
    background: var(--card-bg-elevated) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-color) !important;
}

#login-page .auth-logo,
#register-page .auth-logo,
#login-page .login-app-name,
#register-page .app-logo h2,
.app-logo h2 {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

@media (min-width: 1180px) {
    .discover-featured-list,
    .discover-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .discover-featured-list,
    .discover-list {
        grid-template-columns: 1fr !important;
    }

    .discover-list-card {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
    }
}

/* Desktop web layout: use the browser canvas instead of forcing every tab into a phone-width shell. */
@media (min-width: 768px) {
    :root {
        --app-shell-width: 100vw;
        --app-fixed-left: 0px;
        --web-page-gutter: 32px;
        --web-content-width: min(1280px, calc(100vw - (var(--web-page-gutter) * 2)));
    }

    body,
    body.dark-mode {
        overflow: hidden;
    }

    .app-container {
        width: 100vw !important;
        max-width: none !important;
        height: 100vh;
        height: 100dvh;
        margin: 0 !important;
        box-shadow: none !important;
        overflow: hidden;
    }

    .app-content,
    .app-page {
        width: 100vw;
    }

    .app-page {
        height: calc(100vh - var(--bottom-nav-height));
        height: calc(100dvh - var(--bottom-nav-height));
        overflow-y: auto;
    }

    .bottom-nav {
        width: min(760px, calc(100vw - 64px)) !important;
        left: 50% !important;
        right: auto !important;
        bottom: 18px;
        height: 64px;
        padding-bottom: 0;
        border: 1px solid var(--border-soft);
        border-radius: 28px;
        transform: translateX(-50%);
    }

    .home-topbar,
    .hero-carousel,
    .relationship-entry-card,
    .funnel-card,
    .home-phase-map,
    .quick-experience.enhanced,
    .features-section,
    .home-journey-card,
    .demo-showcase,
    .discover-shell,
    .profile-shell,
    #profile-page .profile-shell,
    .relationship-analysis-shell,
    .relationship-result-shell,
    #chat-page .chat-content,
    #edit-profile-page .page-content,
    #settings-page .page-content,
    #vip-page .page-content,
    #help-page .page-content,
    #about-page .page-content,
    #relationship-history-page .page-content,
    #content-detail-page .page-content,
    #article-page .page-content,
    #terms-page .page-content,
    #privacy-page .page-content,
    #ai-disclaimer-page .page-content,
    #support-page .page-content,
    #feedback-page .page-content {
        width: var(--web-content-width) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #edit-profile-page .page-header,
    #settings-page .page-header,
    #vip-page .page-header,
    #help-page .page-header,
    #about-page .page-header,
    #relationship-history-page .page-header,
    #content-detail-page .page-header,
    #article-page .page-header,
    #terms-page .page-header,
    #privacy-page .page-header,
    #ai-disclaimer-page .page-header,
    #support-page .page-header,
    #feedback-page .page-header,
    #register-page .page-header {
        width: 100vw !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 0 24px 24px !important;
    }

    .home-topbar,
    .discover-shell,
    .profile-shell,
    #profile-page .profile-shell,
    #chat-page .chat-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-carousel {
        height: 360px;
        border-radius: 30px;
    }

    .hero-slide {
        padding: 34px 46px 28px;
    }

    .hero-content {
        width: 50%;
        max-width: 560px;
    }

    .hero-content h2 {
        max-width: 560px;
        font-size: 36px;
        line-height: 1.16;
    }

    .hero-content p {
        max-width: 470px;
        font-size: 16px;
    }

    .relationship-entry-card {
        grid-template-columns: 140px minmax(0, 1fr) auto;
        padding: 28px 34px;
    }

    .relationship-entry-card .relationship-entry-actions {
        grid-column: 3;
    }

    .funnel-card {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1fr);
        align-items: center;
        gap: 32px;
        padding: 28px 34px;
    }

    .home-phase-map {
        padding: 28px 34px;
    }

    .home-phase-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #discover-page .discover-shell {
        padding-top: 44px;
    }

    .discover-header {
        display: grid;
        grid-template-columns: minmax(320px, 0.8fr) minmax(420px, 1fr);
        gap: 32px;
        align-items: end;
    }

    .discover-search {
        margin-bottom: 0;
    }

    .discover-categories {
        overflow-x: visible;
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .discover-featured-list,
    .discover-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px;
    }

    .discover-list-card {
        min-height: 220px;
    }

    #chat-page {
        height: calc(100vh - 96px);
        height: calc(100dvh - 96px);
    }

    #chat-page .chat-content {
        height: 100%;
        padding-top: 30px;
        padding-bottom: 18px;
    }

    #chat-page .chat-container {
        min-height: 0;
        max-height: none;
    }

    #chat-page .chat-sessions {
        width: min(420px, calc(100vw - 64px)) !important;
        max-width: 420px !important;
        height: auto !important;
        top: 24px !important;
        bottom: 104px !important;
        left: 32px !important;
        transform: translateX(calc(-100% - 48px)) !important;
        pointer-events: none;
        border: 1px solid var(--border-soft);
        border-radius: 26px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
        z-index: 120;
    }

    #chat-page .chat-sessions.is-open {
        transform: translateX(0) !important;
        pointer-events: auto;
    }

    #chat-page .sessions-back-btn {
        display: inline-flex;
    }

    .quick-replies-panel {
        top: 96px;
        right: 32px;
        bottom: 104px;
        left: auto;
        width: min(520px, calc(100vw - 64px));
        max-height: none;
        border-radius: 28px;
        border: 1px solid var(--border-soft);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
        transform: translateX(calc(100% + 48px));
    }

    .quick-replies-panel.active {
        transform: translateX(0);
    }

    #profile-page .profile-shell {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #profile-page .profile-shell::before {
        content: none !important;
        display: none !important;
    }

    #profile-page .profile-overview-grid,
    #profile-page .profile-content-grid,
    #profile-page .profile-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #profile-page .profile-identity-card {
        grid-column: span 2;
    }
}

@media (min-width: 1180px) {
    .discover-featured-list,
    .discover-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Web adaptive polish: keep desktop pages consistent without returning to a phone-only shell. */
@media (min-width: 768px) {
    :root {
        --web-content-width: min(1280px, calc(100vw - 64px));
        --web-form-width: min(980px, calc(100vw - 96px));
        --web-bottom-safe: 132px;
    }

    #home-page,
    #discover-page,
    #profile-page {
        padding-bottom: var(--web-bottom-safe);
        box-sizing: border-box;
    }

    #home-page .features-section {
        margin-bottom: 0;
    }

    .hero-carousel {
        height: auto;
        min-height: 392px;
    }

    .hero-slide {
        min-height: 392px;
        box-sizing: border-box;
    }

    .hero-content {
        height: auto !important;
        min-height: 318px;
        justify-content: center;
    }

    .hero-content h2,
    html[lang^="en"] .hero-content h2 {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 16px;
        line-height: 1.12;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: initial !important;
    }

    .hero-content p,
    html[lang^="en"] .hero-content p {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 18px;
        line-height: 1.45;
        overflow: visible !important;
    }

    html[lang^="en"] .hero-content {
        width: min(58%, 620px);
        max-width: 620px;
    }

    html[lang^="en"] .hero-content h2 {
        font-size: clamp(30px, 4.1vw, 42px);
    }

    html[lang^="en"] .hero-background::after {
        right: 8%;
    }

    .discover-empty-state {
        min-height: 190px;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .discover-empty-state p {
        display: none !important;
    }

    #profile-page .profile-identity-card {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 22px;
        padding: 22px 26px;
        min-height: 112px;
    }

    #profile-page .profile-avatar {
        grid-row: 1 / span 2;
        width: 78px;
        height: 78px;
    }

    #profile-page .profile-identity-copy,
    #profile-page .profile-name-row {
        display: contents;
    }

    #profile-page .profile-name {
        grid-column: 2;
        align-self: end;
        font-size: 22px;
    }

    #profile-page .profile-bio {
        grid-column: 2;
        align-self: start;
        font-size: 14px;
    }

    #profile-page .profile-edit-pill {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        min-height: 42px;
        padding: 0 22px;
        font-size: 14px;
    }

    #profile-page .single-avatar:not(.has-avatar) {
        position: relative;
        border-radius: 50%;
        background:
            linear-gradient(36deg, transparent 44%, rgba(255, 255, 255, 0.72) 48%, rgba(255, 123, 155, 0.30) 53%, transparent 61%),
            repeating-radial-gradient(circle, transparent 0 13px, rgba(var(--brand-purple-rgb), 0.30) 14px 15px),
            radial-gradient(circle at 50% 50%, rgba(var(--brand-pink-rgb), 0.72) 0 7px, rgba(var(--brand-pink-rgb), 0.18) 8px 24px, transparent 40px),
            linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.16), rgba(var(--brand-purple-rgb), 0.22));
        border: 1px solid rgba(var(--brand-pink-rgb), 0.24);
        box-shadow: 0 16px 32px rgba(var(--brand-pink-rgb), 0.16);
    }

    #profile-page .single-avatar:not(.has-avatar)::before,
    #profile-page .single-avatar:not(.has-avatar)::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }

    #profile-page .single-avatar:not(.has-avatar)::before {
        inset: 13px;
        border-radius: 50%;
        border: 1px solid rgba(var(--brand-accent-rgb), 0.34);
        box-shadow: inset 0 0 18px rgba(var(--brand-purple-rgb), 0.18);
    }

    #profile-page .single-avatar:not(.has-avatar)::after {
        width: 9px;
        height: 9px;
        right: 16px;
        top: 18px;
        border-radius: 50%;
        background: var(--primary-color);
        box-shadow: -34px 28px 0 rgba(var(--brand-purple-rgb), 0.70), -10px 40px 0 rgba(var(--brand-pink-rgb), 0.58);
    }

    #profile-page .single-avatar:not(.has-avatar) .profile-default-icon {
        position: relative;
        z-index: 1;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.18);
        color: #fffafd;
        font-size: 18px;
        box-shadow: 0 10px 24px rgba(var(--brand-pink-rgb), 0.18);
    }

    body.dark-mode #profile-page .single-avatar:not(.has-avatar) {
        background:
            linear-gradient(36deg, transparent 44%, rgba(255, 123, 155, 0.90) 48%, rgba(201, 149, 234, 0.34) 53%, transparent 61%),
            repeating-radial-gradient(circle, transparent 0 13px, rgba(201, 149, 234, 0.36) 14px 15px),
            radial-gradient(circle at 50% 50%, rgba(255, 123, 155, 0.78) 0 7px, rgba(147, 124, 255, 0.22) 8px 24px, transparent 40px),
            linear-gradient(135deg, rgba(255, 123, 155, 0.18), rgba(147, 124, 255, 0.24));
    }

    #edit-profile-page .page-header,
    #settings-page .page-header,
    #vip-page .page-header,
    #help-page .page-header,
    #about-page .page-header,
    #relationship-history-page .page-header,
    #content-detail-page .page-header,
    #article-page .page-header,
    #terms-page .page-header,
    #privacy-page .page-header,
    #ai-disclaimer-page .page-header,
    #support-page .page-header,
    #feedback-page .page-header,
    #register-page .page-header {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        align-items: center;
        min-height: 76px;
        padding-left: max(28px, calc((100vw - var(--web-form-width)) / 2)) !important;
        padding-right: max(28px, calc((100vw - var(--web-form-width)) / 2)) !important;
        box-sizing: border-box;
    }

    .page-header .page-title {
        justify-self: center;
    }

    .page-header .back-btn {
        justify-self: start;
    }

    .page-header .save-btn,
    .page-header .page-header-spacer {
        justify-self: end;
    }

    #edit-profile-page .page-content,
    #settings-page .page-content,
    #vip-page .page-content,
    #help-page .page-content,
    #about-page .page-content,
    #relationship-history-page .page-content,
    #content-detail-page .page-content,
    #article-page .page-content,
    #terms-page .page-content,
    #privacy-page .page-content,
    #ai-disclaimer-page .page-content,
    #support-page .page-content,
    #feedback-page .page-content {
        width: var(--web-form-width) !important;
        max-width: var(--web-form-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 32px 0 calc(var(--web-bottom-safe) + 20px) !important;
        box-sizing: border-box;
        min-height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 1040px) {
    html[lang^="en"] .hero-content {
        width: min(62%, 520px);
    }

    html[lang^="en"] .hero-content h2 {
        font-size: clamp(30px, 3.8vw, 34px);
    }

    html[lang^="en"] .hero-background::after {
        right: 6%;
        opacity: 0.68;
    }
}

@media (max-width: 767px) {
    #profile-page .single-avatar:not(.has-avatar) {
        position: relative;
        border-radius: 50%;
        background:
            linear-gradient(36deg, transparent 44%, rgba(255, 255, 255, 0.72) 48%, rgba(255, 123, 155, 0.30) 53%, transparent 61%),
            repeating-radial-gradient(circle, transparent 0 11px, rgba(var(--brand-purple-rgb), 0.28) 12px 13px),
            radial-gradient(circle at 50% 50%, rgba(var(--brand-pink-rgb), 0.70) 0 6px, rgba(var(--brand-pink-rgb), 0.18) 7px 20px, transparent 34px),
            linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.16), rgba(var(--brand-purple-rgb), 0.22));
    }

    #profile-page .single-avatar:not(.has-avatar) .profile-default-icon {
        color: #fffafd;
        font-size: 16px;
    }
}

/* Brand Soft reference pass: keep desktop preview as the mobile app and match the pink/purple light+dark mockup. */
:root {
    --primary-color: #ff4f86;
    --secondary-color: #c16cff;
    --accent-color: #7b61ff;
    --primary-hover: #ff3f78;
    --text-color: #19133f;
    --text-secondary: #6f6590;
    --text-light: #938aa7;
    --bg-primary: #fffefe;
    --bg-secondary: #fff8fb;
    --bg-tertiary: #f8f2ff;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-bg-elevated: #fbf8ff;
    --border-soft: rgba(72, 51, 112, 0.12);
    --shadow-soft: 0 16px 38px rgba(49, 36, 87, 0.08);
    --gradient-primary: linear-gradient(135deg, #ff4f86 0%, #c16cff 100%);
    --gradient-secondary: linear-gradient(135deg, #7b61ff 0%, #c16cff 100%);
    --brand-pink-rgb: 255, 79, 134;
    --brand-purple-rgb: 193, 108, 255;
    --brand-accent-rgb: 123, 97, 255;
    --app-wallpaper:
        radial-gradient(circle at 80% 0%, rgba(var(--brand-purple-rgb), 0.09), transparent 32%),
        linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    --app-shell-width: min(100vw, 430px);
    --app-fixed-left: calc((100vw - var(--app-shell-width)) / 2);
}

body.dark-mode {
    --primary-color: #ff4f86;
    --secondary-color: #cf66ff;
    --accent-color: #9a78ff;
    --primary-hover: #ff6a9a;
    --text-color: #f8f4fb;
    --text-secondary: #d3cadc;
    --text-light: #aaa0b8;
    --bg-primary: #090a0f;
    --bg-secondary: #0f1018;
    --bg-tertiary: #171722;
    --card-bg: rgba(18, 19, 28, 0.94);
    --card-bg-elevated: #1c1c28;
    --border-soft: rgba(255, 255, 255, 0.13);
    --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.32);
    --gradient-primary: linear-gradient(135deg, #ff4f86 0%, #c16cff 100%);
    --gradient-secondary: linear-gradient(135deg, #8b6dff 0%, #cf66ff 100%);
    --app-wallpaper:
        radial-gradient(circle at 80% 0%, rgba(193, 108, 255, 0.12), transparent 34%),
        linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

@media (min-width: 768px) {
    :root {
        --app-shell-width: min(100vw, 430px);
        --app-fixed-left: calc((100vw - var(--app-shell-width)) / 2);
    }

    body,
    body.dark-mode {
        overflow: auto !important;
    }

    .app-container {
        width: var(--app-shell-width) !important;
        max-width: 430px !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        box-shadow: 0 0 0 1px var(--border-soft), 0 24px 80px rgba(18, 14, 36, 0.18) !important;
    }

    .app-content,
    .app-page {
        width: 100% !important;
    }

    .app-page {
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        padding-bottom: 0 !important;
    }

    .bottom-nav {
        width: var(--app-shell-width) !important;
        max-width: 430px !important;
        left: 50% !important;
        right: auto !important;
        bottom: 0 !important;
        height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        border-radius: 24px 24px 0 0 !important;
        transform: translateX(-50%) !important;
    }

    .home-topbar,
    .hero-carousel,
    .relationship-entry-card,
    .funnel-card,
    .home-phase-map,
    .quick-experience.enhanced,
    .features-section,
    .demo-showcase,
    .discover-shell,
    .profile-shell,
    #profile-page .profile-shell,
    #chat-page .chat-content {
        width: auto !important;
        max-width: none !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .home-topbar {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #chat-page .chat-sessions {
        width: var(--app-shell-width) !important;
        max-width: 430px !important;
        left: var(--app-fixed-left) !important;
        top: 0 !important;
        bottom: var(--bottom-nav-height) !important;
        height: auto !important;
        border-radius: 0 !important;
        transform: translateX(-100%);
    }
}

body {
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 79, 134, 0.08), transparent 30%),
        radial-gradient(circle at 86% 6%, rgba(193, 108, 255, 0.10), transparent 28%),
        #fffafc;
}

body.dark-mode {
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 79, 134, 0.12), transparent 30%),
        radial-gradient(circle at 86% 4%, rgba(154, 120, 255, 0.14), transparent 34%),
        #06070b;
}

.app-container,
body.dark-mode .app-container {
    background: var(--app-wallpaper);
}

.app-page,
body.dark-mode .app-page {
    background: transparent !important;
}

.home-topbar {
    align-items: center;
    padding-top: 26px;
}

.home-brand-wordmark {
    display: inline-flex;
    align-items: flex-start;
    gap: 3px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 31px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    background: linear-gradient(90deg, #ff4f86 0%, #ff4f86 48%, #9a5cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-history-pill {
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-color);
    border: 1px solid rgba(35, 27, 67, 0.12);
    box-shadow: 0 8px 20px rgba(35, 27, 67, 0.06);
}

body.dark-mode .home-history-pill {
    background: rgba(18, 19, 28, 0.76);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--text-color);
}

.hero-carousel {
    height: 282px !important;
    min-height: 282px !important;
    margin: 12px 16px 0 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 79, 134, 0.24);
    background:
        radial-gradient(circle at 80% 34%, rgba(255, 79, 134, 0.28), transparent 30%),
        radial-gradient(circle at 95% 86%, rgba(193, 108, 255, 0.24), transparent 34%),
        linear-gradient(135deg, #fff1f6 0%, #ffffff 48%, #f4edff 100%) !important;
    box-shadow: none;
}

body.dark-mode .hero-carousel {
    border-color: rgba(255, 79, 134, 0.42);
    background:
        radial-gradient(circle at 80% 34%, rgba(255, 79, 134, 0.20), transparent 30%),
        radial-gradient(circle at 92% 84%, rgba(123, 97, 255, 0.28), transparent 34%),
        linear-gradient(135deg, #18111b 0%, #101118 54%, #19132a 100%) !important;
}

.hero-slide {
    min-height: 282px !important;
    padding: 20px 16px 18px !important;
}

.hero-background {
    background: transparent !important;
}

.hero-background::before {
    background:
        radial-gradient(circle at 13% 14%, rgba(255, 255, 255, 0.45), transparent 16%),
        radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.35), transparent 18%),
        repeating-linear-gradient(164deg, transparent 0 12px, rgba(123, 97, 255, 0.08) 13px 14px) !important;
    opacity: 0.9;
}

body.dark-mode .hero-background::before {
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 79, 134, 0.20), transparent 18%),
        repeating-linear-gradient(164deg, transparent 0 12px, rgba(193, 108, 255, 0.10) 13px 14px) !important;
}

.hero-background::after {
    right: 12px !important;
    top: 28px !important;
    width: 132px !important;
    height: 132px !important;
    background:
        linear-gradient(34deg, transparent 45%, rgba(255, 255, 255, 0.96) 49%, rgba(255, 79, 134, 0.48) 53%, transparent 61%),
        repeating-radial-gradient(circle, transparent 0 15px, rgba(123, 97, 255, 0.20) 16px 17px),
        radial-gradient(circle, rgba(255, 79, 134, 0.76) 0 7px, rgba(255, 79, 134, 0.20) 8px 23px, transparent 62px) !important;
    filter: drop-shadow(0 12px 24px rgba(255, 79, 134, 0.18));
    opacity: 0.96;
}

body.dark-mode .hero-background::after {
    background:
        linear-gradient(34deg, transparent 45%, rgba(255, 79, 134, 0.98) 49%, rgba(193, 108, 255, 0.34) 53%, transparent 61%),
        repeating-radial-gradient(circle, transparent 0 15px, rgba(193, 108, 255, 0.34) 16px 17px),
        radial-gradient(circle, rgba(255, 79, 134, 0.86) 0 7px, rgba(123, 97, 255, 0.25) 8px 23px, transparent 62px) !important;
    filter: drop-shadow(0 16px 34px rgba(255, 79, 134, 0.26));
}

.hero-wave {
    opacity: 0.42 !important;
}

body.dark-mode .hero-wave {
    opacity: 0.58 !important;
}

.hero-content {
    width: calc(100% - 124px) !important;
    max-width: none !important;
}

.hero-badge {
    min-height: 23px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--primary-color);
    background: rgba(255, 79, 134, 0.12);
}

.hero-content h2,
html[lang^="en"] .hero-content h2 {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    font-size: 18px !important;
    line-height: 1.14 !important;
    margin: 8px 0 14px !important;
    color: var(--text-color);
}

.hero-content p,
html[lang^="en"] .hero-content p {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 12px !important;
    line-height: 1.38 !important;
    margin-bottom: 10px !important;
}

.hero-stats {
    height: 38px;
    margin-bottom: 10px;
}

.hero-cta-btn {
    min-height: 38px !important;
    min-width: 158px;
    border-radius: 20px;
    font-size: 13px;
    background: #ff4f86 !important;
    color: #fff !important;
    box-shadow: 0 12px 22px rgba(255, 79, 134, 0.24);
}

body.dark-mode .hero-cta-btn {
    color: #fff !important;
}

.relationship-entry-card {
    min-height: 128px;
    border-radius: 16px;
}

.funnel-card,
.home-phase-map {
    margin: 8px 16px 0 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(35, 27, 67, 0.12) !important;
    box-shadow: none !important;
}

body.dark-mode .funnel-card,
body.dark-mode .home-phase-map {
    background:
        radial-gradient(circle at 95% 12%, rgba(123, 97, 255, 0.08), transparent 34%),
        rgba(17, 18, 27, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important;
}

.funnel-card {
    padding: 12px 12px 10px !important;
}

.funnel-card-copy {
    margin: 0 0 8px !important;
}

.funnel-card-copy h3,
.home-phase-map-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
}

.funnel-card-copy h3 i {
    color: var(--text-light);
    font-size: 13px;
}

.funnel-card-copy > .discover-eyebrow,
.funnel-card-copy > p,
.funnel-card-copy > h3[data-i18n],
.home-phase-map-head > .discover-eyebrow,
.home-phase-map-head > p {
    display: none !important;
}

.funnel-bar-chart {
    display: grid;
    gap: 7px;
}

.funnel-bar {
    display: grid;
    grid-template-columns: 28px 86px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding: 0 !important;
    background: transparent !important;
    position: relative;
}

.funnel-bar:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 24px;
    height: 7px;
    border-left: 2px dotted rgba(123, 97, 255, 0.32);
}

.funnel-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c16cff;
    font-size: 16px;
}

.funnel-bar[data-phase="1"] .funnel-icon {
    color: #ff4f86;
}

.funnel-bar.active .funnel-icon {
    border-radius: 50%;
    background: linear-gradient(135deg, #7b61ff, #c16cff);
    color: #fff;
}

.funnel-bar-label {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 750;
}

.funnel-bar-badge {
    position: absolute;
    left: 82px;
    top: 2px;
    margin: 0;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(123, 97, 255, 0.16);
    color: var(--accent-color);
    font-size: 10px;
    line-height: 20px;
    font-weight: 800;
    z-index: 2;
    white-space: nowrap;
}

.funnel-track {
    grid-column: 3;
    grid-row: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(42, 38, 58, 0.12);
    position: relative;
    overflow: visible;
}

body.dark-mode .funnel-track {
    background: rgba(255, 255, 255, 0.13);
}

.funnel-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 79, 134, 0.72), rgba(193, 108, 255, 0.92)) !important;
}

.funnel-bar:not(.active) .funnel-bar-fill {
    background: linear-gradient(90deg, rgba(255, 79, 134, 0.70), rgba(255, 79, 134, 0.48)) !important;
}

.funnel-knob {
    position: absolute;
    left: calc(82% - 7px);
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 3px solid #c16cff;
    box-shadow: 0 0 12px rgba(193, 108, 255, 0.72);
}

.home-phase-map {
    padding: 10px 10px 9px !important;
}

.home-phase-map-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px !important;
}

.home-phase-map-head h3 i {
    color: var(--accent-color);
}

.phase-method-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    padding: 0;
}

.home-phase-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    position: relative;
}

.home-phase-grid::before {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    top: 50%;
    border-top: 2px dotted rgba(123, 97, 255, 0.32);
    pointer-events: none;
}

.home-phase-card {
    min-height: 108px !important;
    padding: 9px 7px 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 240, 251, 0.84)) !important;
    border: 1px solid rgba(35, 27, 67, 0.12) !important;
    text-align: center;
    overflow: hidden;
    position: relative;
    box-shadow: none !important;
    z-index: 1;
}

body.dark-mode .home-phase-card {
    background: linear-gradient(180deg, rgba(20, 21, 31, 0.92), rgba(30, 30, 42, 0.94)) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.home-phase-card.active {
    border-color: rgba(255, 79, 134, 0.82) !important;
    background:
        radial-gradient(circle at 50% 62%, rgba(255, 79, 134, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 246, 250, 0.92), rgba(250, 241, 255, 0.92)) !important;
    box-shadow: 0 0 0 1px rgba(255, 79, 134, 0.16) !important;
}

body.dark-mode .home-phase-card.active {
    background:
        radial-gradient(circle at 50% 62%, rgba(255, 79, 134, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(35, 21, 32, 0.95), rgba(27, 24, 36, 0.95)) !important;
}

.home-phase-card-topline {
    justify-content: center !important;
    margin-bottom: 4px !important;
}

.home-phase-number {
    font-size: 10px !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
    padding: 0 !important;
}

.home-phase-card h4 {
    margin: 0 0 8px !important;
    color: var(--text-color) !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

.phase-card-icon {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c16cff;
    font-size: 28px;
    position: relative;
}

.phase-card-icon span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    margin-top: 15px;
    background: #c16cff;
    color: #fff;
    font-size: 8px;
}

.phase-card-icon.chat {
    color: #ff4f86;
}

.phase-card-icon.chat i:last-child {
    margin-left: -10px;
    color: #c16cff;
    transform: translateY(3px);
}

.home-phase-card p {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 !important;
    min-height: 26px;
    padding: 6px 4px 0;
    background: rgba(35, 27, 67, 0.07);
    color: var(--text-secondary) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
}

body.dark-mode .home-phase-card p {
    background: rgba(255, 255, 255, 0.07);
}

.home-phase-cta {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 5px;
    min-height: 25px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #ff4f86 !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    white-space: nowrap;
    box-shadow: 0 8px 16px rgba(255, 79, 134, 0.22) !important;
}

.home-phase-cta::before {
    content: none !important;
    display: none !important;
}

html[lang^="zh"] .home-phase-cta {
    font-size: 10px !important;
}

html[lang^="en"] .home-phase-cta {
    font-size: 9px !important;
}

/* Secondary-page polish: keep Brand Soft accents, but stop dark pages from reading as all-pink. */
.app-page[data-hide-nav="true"] .app-info h2,
.app-page[data-hide-nav="true"] .team-section h4,
.app-page[data-hide-nav="true"] .mission-section h4,
.app-page[data-hide-nav="true"] .contact-section h4,
.app-page[data-hide-nav="true"] .legal-section-card h4,
.app-page[data-hide-nav="true"] .legal-summary-card h3,
.app-page[data-hide-nav="true"] .settings-section h3,
.app-page[data-hide-nav="true"] .settings-section h4,
.app-page[data-hide-nav="true"] .faq-question {
    color: var(--text-color) !important;
}

.app-page[data-hide-nav="true"] .app-description,
.app-page[data-hide-nav="true"] .team-section p,
.app-page[data-hide-nav="true"] .mission-section p,
.app-page[data-hide-nav="true"] .contact-section p,
.app-page[data-hide-nav="true"] .legal-section-card p,
.app-page[data-hide-nav="true"] .legal-summary-card p,
.app-page[data-hide-nav="true"] .faq-answer,
.app-page[data-hide-nav="true"] .copyright {
    color: var(--text-secondary) !important;
}

.app-page[data-hide-nav="true"] .app-logo i {
    color: #c16cff !important;
    filter: drop-shadow(0 10px 22px rgba(193, 108, 255, 0.16));
}

body.dark-mode .app-page[data-hide-nav="true"] .app-logo i {
    color: #cf66ff !important;
    filter: drop-shadow(0 10px 24px rgba(207, 102, 255, 0.24));
}

.app-page[data-hide-nav="true"] .team-section h4::after,
.app-page[data-hide-nav="true"] .mission-section h4::after {
    background: linear-gradient(90deg, #ff4f86 0%, #c16cff 100%) !important;
    opacity: 0.74;
}

body.dark-mode .app-page[data-hide-nav="true"] .team-section h4::after,
body.dark-mode .app-page[data-hide-nav="true"] .mission-section h4::after {
    opacity: 0.62;
}

.app-page[data-hide-nav="true"] .terms-section a,
.app-page[data-hide-nav="true"] .legal-section-card a,
.app-page[data-hide-nav="true"] .auth-link,
.app-page[data-hide-nav="true"] .auth-links a {
    color: #7b61ff !important;
}

body.dark-mode .app-page[data-hide-nav="true"] .terms-section a,
body.dark-mode .app-page[data-hide-nav="true"] .legal-section-card a,
body.dark-mode .app-page[data-hide-nav="true"] .auth-link,
body.dark-mode .app-page[data-hide-nav="true"] .auth-links a {
    color: #cda7ff !important;
}

.contact-btn,
.contact-btn.contact-btn-secondary {
    background:
        linear-gradient(135deg, rgba(255, 79, 134, 0.10), rgba(193, 108, 255, 0.12)) !important;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.18) !important;
    color: var(--text-color) !important;
    box-shadow: 0 12px 24px rgba(59, 43, 99, 0.08) !important;
}

.contact-btn i,
.contact-btn.contact-btn-secondary i {
    color: #ff4f86 !important;
}

body.dark-mode .contact-btn,
body.dark-mode .contact-btn.contact-btn-secondary {
    background:
        linear-gradient(135deg, rgba(255, 79, 134, 0.10), rgba(207, 102, 255, 0.10)) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

body.dark-mode .contact-btn i,
body.dark-mode .contact-btn.contact-btn-secondary i {
    color: #f07fb0 !important;
}

.contact-btn:hover,
.contact-btn.contact-btn-secondary:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--brand-pink-rgb), 0.34) !important;
    background:
        linear-gradient(135deg, rgba(255, 79, 134, 0.16), rgba(193, 108, 255, 0.18)) !important;
}

body.dark-mode .contact-btn:hover,
body.dark-mode .contact-btn.contact-btn-secondary:hover {
    background:
        linear-gradient(135deg, rgba(255, 79, 134, 0.15), rgba(207, 102, 255, 0.14)) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
}

.home-history-pill i,
.relationship-history-btn i,
.chat-session-pill i,
.settings-nav-link i,
.menu-arrow,
.phase-method-link i,
.feature-arrow {
    font-size: 1em;
}

#relationship-analysis-page,
#relationship-analysis-result-page,
#relationship-history-page,
#chat-page,
#discover-page,
#profile-page,
#message-page,
#content-detail-page,
#article-page,
#edit-profile-page,
#settings-page,
#vip-page,
#help-page,
#about-page,
#terms-page,
#privacy-page,
#ai-disclaimer-page,
#support-page,
#feedback-page,
#login-page,
#register-page {
    color: var(--text-color);
}

.relationship-analysis-shell,
.relationship-result-shell,
.discover-shell,
#chat-page .chat-content,
#profile-page .profile-shell,
#message-page .app-card-container,
#content-detail-page .discover-detail-page,
#article-page .page-content,
#edit-profile-page .page-content,
#settings-page .page-content,
#vip-page .page-content,
#help-page .page-content,
#about-page .page-content,
#terms-page .page-content,
#privacy-page .page-content,
#ai-disclaimer-page .page-content,
#support-page .page-content,
#feedback-page .page-content,
#login-page .page-content,
#register-page .page-content {
    color: var(--text-color);
}

.relationship-hero-card,
.relationship-guide-card,
.relationship-form-card,
.relationship-loading-card,
.relationship-stage-card,
.relationship-decision-card,
.relationship-next-action-card,
.relationship-summary-card,
.relationship-signal-card,
.relationship-avoid-card,
.relationship-replies-card,
.relationship-reply-card,
.relationship-history-item,
.discover-featured-card,
.discover-list-card,
.discover-detail-body,
.discover-practice,
.discover-prompt-card,
.notice-card,
#chat-page .chat-container,
#chat-page .chat-input-box,
.chat-sessions,
.session-item,
.sessions-empty-state,
.quick-replies-panel,
.quick-reply-item,
#profile-page .profile-identity-card,
#profile-page .profile-panel,
#profile-page .menu-item,
.settings-section,
.settings-item,
.settings-nav-link,
.stats-card,
.stats-section,
.stats-list-item,
.vip-badge,
.vip-plan-card,
.benefit-item,
.faq-item,
.contact-section,
.app-info,
.team-section,
.mission-section,
.social-section,
.legal-summary-card,
.legal-section-card,
.article-body-card,
.auth-card,
.auth-container,
.login-container,
.register-container,
.date-picker-content {
    background:
        radial-gradient(circle at 96% 0%, rgba(var(--brand-purple-rgb), 0.06), transparent 32%),
        var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-color) !important;
    box-shadow: var(--shadow-soft) !important;
}

body.dark-mode .relationship-hero-card,
body.dark-mode .relationship-guide-card,
body.dark-mode .relationship-form-card,
body.dark-mode .relationship-loading-card,
body.dark-mode .relationship-stage-card,
body.dark-mode .relationship-decision-card,
body.dark-mode .relationship-next-action-card,
body.dark-mode .relationship-summary-card,
body.dark-mode .relationship-signal-card,
body.dark-mode .relationship-avoid-card,
body.dark-mode .relationship-replies-card,
body.dark-mode .relationship-reply-card,
body.dark-mode .relationship-history-item,
body.dark-mode .discover-featured-card,
body.dark-mode .discover-list-card,
body.dark-mode .discover-detail-body,
body.dark-mode .discover-practice,
body.dark-mode .discover-prompt-card,
body.dark-mode .notice-card,
body.dark-mode #chat-page .chat-container,
body.dark-mode #chat-page .chat-input-box,
body.dark-mode .chat-sessions,
body.dark-mode .session-item,
body.dark-mode .sessions-empty-state,
body.dark-mode .quick-replies-panel,
body.dark-mode .quick-reply-item,
body.dark-mode #profile-page .profile-identity-card,
body.dark-mode #profile-page .profile-panel,
body.dark-mode #profile-page .menu-item,
body.dark-mode .settings-section,
body.dark-mode .settings-item,
body.dark-mode .settings-nav-link,
body.dark-mode .stats-card,
body.dark-mode .stats-section,
body.dark-mode .stats-list-item,
body.dark-mode .vip-badge,
body.dark-mode .vip-plan-card,
body.dark-mode .benefit-item,
body.dark-mode .faq-item,
body.dark-mode .contact-section,
body.dark-mode .app-info,
body.dark-mode .team-section,
body.dark-mode .mission-section,
body.dark-mode .social-section,
body.dark-mode .legal-summary-card,
body.dark-mode .legal-section-card,
body.dark-mode .article-body-card,
body.dark-mode .auth-card,
body.dark-mode .auth-container,
body.dark-mode .login-container,
body.dark-mode .register-container,
body.dark-mode .date-picker-content {
    background:
        radial-gradient(circle at 96% 0%, rgba(207, 102, 255, 0.07), transparent 32%),
        var(--card-bg) !important;
    border-color: var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
}

.relationship-hero-card,
.relationship-guide-card,
.relationship-form-card,
.relationship-loading-card,
.relationship-stage-card,
.relationship-decision-card,
.relationship-next-action-card,
.relationship-summary-card,
.relationship-signal-card,
.relationship-avoid-card,
.relationship-replies-card,
.discover-featured-card,
.discover-list-card,
.discover-detail-body,
.discover-practice,
#chat-page .chat-container,
.chat-sessions,
.quick-replies-panel,
#profile-page .profile-identity-card,
#profile-page .profile-panel,
.settings-section,
.stats-section,
.vip-plan-card,
.faq-item,
.contact-section,
.legal-summary-card,
.legal-section-card,
.article-body-card,
.auth-card,
.auth-container,
.login-container,
.register-container {
    border-radius: 22px !important;
}

.relationship-card-label,
.discover-eyebrow,
.discover-section-label,
.notice-feed-eyebrow,
.notice-badge,
.profile-group-label,
.menu-behavior-pill,
.legal-eyebrow,
.recommend-tag,
.vip-plan-card.recommended::before {
    background: rgba(var(--brand-pink-rgb), 0.12) !important;
    color: var(--primary-color) !important;
    border-color: rgba(var(--brand-pink-rgb), 0.14) !important;
}

body.dark-mode .relationship-card-label,
body.dark-mode .discover-eyebrow,
body.dark-mode .discover-section-label,
body.dark-mode .notice-feed-eyebrow,
body.dark-mode .notice-badge,
body.dark-mode .profile-group-label,
body.dark-mode .menu-behavior-pill,
body.dark-mode .legal-eyebrow,
body.dark-mode .recommend-tag,
body.dark-mode .vip-plan-card.recommended::before {
    background: rgba(255, 79, 134, 0.16) !important;
    color: #ff8fac !important;
}

.relationship-form-textarea,
.relationship-form-select,
.relationship-form-input,
.form-input,
.form-textarea,
.form-select,
.settings-language-select,
.search-box input,
.discover-search,
.chat-input-field,
.session-search-input,
.auth-input,
.input-wrapper,
#settings-password-form input,
.date-picker-content select {
    background: rgba(255, 250, 253, 0.82) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

body.dark-mode .relationship-form-textarea,
body.dark-mode .relationship-form-select,
body.dark-mode .relationship-form-input,
body.dark-mode .form-input,
body.dark-mode .form-textarea,
body.dark-mode .form-select,
body.dark-mode .settings-language-select,
body.dark-mode .search-box input,
body.dark-mode .discover-search,
body.dark-mode .chat-input-field,
body.dark-mode .session-search-input,
body.dark-mode .auth-input,
body.dark-mode .input-wrapper,
body.dark-mode #settings-password-form input,
body.dark-mode .date-picker-content select {
    background: var(--card-bg-elevated) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-color) !important;
}

.relationship-primary-btn,
.relationship-secondary-btn,
.discover-primary-btn,
.discover-detail-chat-btn,
.chat-send-btn,
.new-session-btn,
.save-btn,
.settings-action-btn,
.auth-btn.primary,
.vip-select-btn,
.btn-primary,
.profile-edit-pill,
.home-phase-cta {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 14px 28px rgba(var(--brand-pink-rgb), 0.24) !important;
}

.discover-secondary-btn,
.btn-secondary,
.chat-session-pill,
.chat-help-pill,
.relationship-history-btn,
.contact-btn,
.social-login-btn {
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: 0 10px 22px rgba(59, 43, 99, 0.07) !important;
}

body.dark-mode .discover-secondary-btn,
body.dark-mode .btn-secondary,
body.dark-mode .chat-session-pill,
body.dark-mode .chat-help-pill,
body.dark-mode .relationship-history-btn,
body.dark-mode .contact-btn,
body.dark-mode .social-login-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

.discover-featured-card,
.discover-list-card,
.notice-card,
#profile-page .menu-item,
.settings-nav-link,
.relationship-history-item,
.quick-reply-item,
.session-item {
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.discover-featured-card:hover,
.discover-list-card:hover,
.notice-card:hover,
#profile-page .menu-item:hover,
.settings-nav-link:hover,
.relationship-history-item:hover,
.quick-reply-item:hover,
.session-item:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--brand-pink-rgb), 0.28) !important;
}

#chat-page .chat-workspace-head {
    gap: 12px;
}

#chat-page .chat-help-pill {
    margin-left: auto;
    color: var(--primary-color) !important;
}

#chat-page .chat-container {
    overflow: hidden;
}

#chat-page #chat-messages {
    padding-bottom: 12px;
}

.chat-sessions:not(.is-open) {
    visibility: hidden;
}

.chat-sessions.is-open {
    visibility: visible;
}

.quick-replies-panel:not(.active) {
    visibility: hidden;
}

.quick-replies-panel.active {
    visibility: visible;
}

.discover-empty-state {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.discover-empty-state p {
    display: none !important;
}

#profile-page .profile-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#profile-page .profile-identity-card {
    background:
        radial-gradient(circle at 92% 18%, rgba(var(--brand-pink-rgb), 0.12), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(249, 243, 255, 0.88)) !important;
}

body.dark-mode #profile-page .profile-identity-card {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 79, 134, 0.14), transparent 36%),
        linear-gradient(135deg, rgba(20, 21, 31, 0.96), rgba(30, 25, 42, 0.94)) !important;
}

#profile-page .single-avatar:not(.has-avatar) {
    background:
        linear-gradient(36deg, transparent 44%, rgba(255, 255, 255, 0.70) 48%, rgba(255, 79, 134, 0.34) 53%, transparent 61%),
        repeating-radial-gradient(circle, transparent 0 12px, rgba(var(--brand-purple-rgb), 0.24) 13px 14px),
        radial-gradient(circle at 50% 50%, rgba(var(--brand-pink-rgb), 0.72) 0 7px, rgba(var(--brand-pink-rgb), 0.20) 8px 24px, transparent 40px),
        linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.18), rgba(var(--brand-purple-rgb), 0.22)) !important;
    border-radius: 50%;
}

#profile-page .single-avatar:not(.has-avatar) .profile-default-icon {
    color: #fffafd !important;
    filter: drop-shadow(0 6px 12px rgba(var(--brand-pink-rgb), 0.22));
}

body.dark-mode #profile-page .single-avatar:not(.has-avatar) {
    background:
        linear-gradient(36deg, transparent 44%, rgba(255, 79, 134, 0.90) 48%, rgba(207, 102, 255, 0.34) 53%, transparent 61%),
        repeating-radial-gradient(circle, transparent 0 12px, rgba(207, 102, 255, 0.30) 13px 14px),
        radial-gradient(circle at 50% 50%, rgba(255, 79, 134, 0.78) 0 7px, rgba(154, 120, 255, 0.22) 8px 24px, transparent 40px),
        linear-gradient(135deg, rgba(255, 79, 134, 0.18), rgba(154, 120, 255, 0.24)) !important;
}

.page-header {
    color: var(--text-color);
}

.page-title,
.relationship-form-head h4,
.relationship-stage-card h3,
.relationship-next-action-card h4,
.relationship-summary-card h4,
.relationship-replies-card h4,
.discover-heading h2,
.discover-section-head h3,
.profile-name,
.profile-group-heading,
.menu-title,
.settings-item-title,
.settings-section h3,
.settings-section h4,
.stats-card-value,
.legal-summary-card h3,
.legal-section-card h4,
.article-body-card h4,
.faq-question,
.vip-plan-header h4,
.benefit-title {
    color: var(--text-color) !important;
}

.relationship-form-head p,
.relationship-stage-card p,
.relationship-next-action-card p,
.relationship-summary-card p,
.relationship-replies-card p,
.discover-heading p,
.discover-card-summary,
.discover-detail-summary,
.profile-bio,
.profile-group-heading p,
.menu-subtitle,
.settings-item-desc,
.stats-card-label,
.legal-summary-card p,
.legal-section-card p,
.article-body-card p,
.article-body-card li,
.faq-answer,
.benefit-desc {
    color: var(--text-secondary) !important;
}

@media (min-width: 768px) {
    #edit-profile-page .page-content,
    #settings-page .page-content,
    #vip-page .page-content,
    #help-page .page-content,
    #about-page .page-content,
    #relationship-history-page .page-content,
    #content-detail-page .page-content,
    #article-page .page-content,
    #terms-page .page-content,
    #privacy-page .page-content,
    #ai-disclaimer-page .page-content,
    #support-page .page-content,
    #feedback-page .page-content,
    #login-page .page-content,
    #register-page .page-content {
        padding-top: 26px !important;
        padding-bottom: calc(var(--bottom-nav-height) + 34px) !important;
    }

    #chat-page .chat-content,
    #discover-page .discover-shell,
    #profile-page .profile-shell,
    .relationship-analysis-shell,
    .relationship-result-shell {
        padding-bottom: calc(var(--bottom-nav-height) + 22px) !important;
    }
}

/* Brand Soft hero wave refinement
   Keeps the accepted radar hero structure while replacing the old striped wave
   layer with a softer blue-purple/pink light surface. */
.hero-wave {
    position: absolute !important;
    inset: auto -18px 4px auto !important;
    width: 350px !important;
    height: 138px !important;
    opacity: 0.72 !important;
    transform: rotate(-1.2deg) translateY(-2px) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 140' preserveAspectRatio='none'><defs><linearGradient id='s' x1='28' y1='98' x2='335' y2='78' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,215,238)' stop-opacity='0'/><stop offset='.36' stop-color='rgb(255,215,238)' stop-opacity='.14'/><stop offset='.64' stop-color='rgb(184,121,223)' stop-opacity='.38'/><stop offset='1' stop-color='rgb(101,120,255)' stop-opacity='.34'/></linearGradient><linearGradient id='g' x1='34' y1='104' x2='340' y2='68' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,238,249)' stop-opacity='0'/><stop offset='.42' stop-color='rgb(255,238,249)' stop-opacity='.18'/><stop offset='.64' stop-color='rgb(184,121,223)' stop-opacity='.62'/><stop offset='1' stop-color='rgb(101,120,255)' stop-opacity='.82'/></linearGradient><linearGradient id='f' x1='18' y1='72' x2='330' y2='130' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,215,238)' stop-opacity='0'/><stop offset='.42' stop-color='rgb(255,215,238)' stop-opacity='.08'/><stop offset='.70' stop-color='rgb(184,121,223)' stop-opacity='.25'/><stop offset='1' stop-color='rgb(101,120,255)' stop-opacity='.42'/></linearGradient><filter id='b' x='-10%' y='-30%' width='120%' height='160%'><feGaussianBlur stdDeviation='2.2'/></filter></defs><path d='M22 116C70 98 112 84 154 92C204 101 231 128 283 122C314 119 337 100 350 84L350 139C315 151 277 145 236 128C192 109 157 108 116 122C80 134 49 134 22 128Z' fill='url(%23f)' opacity='.72' filter='url(%23b)'/><path d='M24 101C68 88 112 65 158 72C206 80 239 110 291 102C318 98 337 82 350 66L350 113C321 130 286 128 247 112C202 94 161 88 116 103C79 115 51 121 24 118Z' fill='url(%23f)' opacity='.82'/><path d='M50 121C96 109 134 97 178 103C225 110 256 132 304 123C327 119 342 106 350 95L350 136C320 145 286 140 246 126C205 112 170 110 128 122C92 132 68 132 50 129Z' fill='url(%23f)' opacity='.58'/><path d='M30 101C78 86 113 64 158 71C209 79 239 111 292 102C318 98 337 82 350 67' fill='none' stroke='url(%23g)' stroke-width='5.2' stroke-linecap='round' opacity='.12' filter='url(%23b)'/><path d='M30 101C78 86 113 64 158 71C209 79 239 111 292 102C318 98 337 82 350 67' fill='none' stroke='url(%23g)' stroke-width='.92' stroke-linecap='round' opacity='.54'/><path d='M36 112C86 97 127 80 169 89C214 98 246 120 297 111C322 106 339 91 350 78' fill='none' stroke='url(%23s)' stroke-width='.46' stroke-linecap='round' opacity='.10'/><path d='M47 106C94 95 130 86 172 93C216 101 246 118 295 109C320 104 338 90 350 76' fill='none' stroke='url(%23s)' stroke-width='.32' stroke-linecap='round' opacity='.12'/><path d='M28 116C76 104 119 92 162 98C207 105 239 124 290 116C316 112 336 96 350 84' fill='none' stroke='url(%23s)' stroke-width='.24' stroke-linecap='round' opacity='.10'/><path d='M40 128C89 114 132 104 178 111C225 119 255 139 304 130C329 126 343 113 350 102' fill='none' stroke='url(%23g)' stroke-width='.66' stroke-linecap='round' opacity='.42'/><path d='M62 123C108 112 148 105 190 111C234 118 265 133 308 126C330 122 342 111 350 100' fill='none' stroke='url(%23s)' stroke-width='.28' stroke-linecap='round' opacity='.14'/><path d='M73 131C116 121 153 117 194 122C237 127 268 138 311 132C331 129 343 119 350 111' fill='none' stroke='url(%23s)' stroke-width='.24' stroke-linecap='round' opacity='.10'/></svg>") !important;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.01) 16%, rgba(0, 0, 0, 0.20) 30%, rgba(0, 0, 0, 0.78) 45%, #000 68%, rgba(0, 0, 0, 0.76) 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.01) 16%, rgba(0, 0, 0, 0.20) 30%, rgba(0, 0, 0, 0.78) 45%, #000 68%, rgba(0, 0, 0, 0.76) 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
    filter: saturate(1.22);
    mix-blend-mode: normal;
}

body.dark-mode .hero-wave {
    opacity: 0.90 !important;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 140' preserveAspectRatio='none'><defs><linearGradient id='s' x1='28' y1='98' x2='335' y2='78' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='0'/><stop offset='.36' stop-color='rgb(255,95,143)' stop-opacity='.24'/><stop offset='.64' stop-color='rgb(194,91,255)' stop-opacity='.58'/><stop offset='1' stop-color='rgb(76,92,255)' stop-opacity='.52'/></linearGradient><linearGradient id='g' x1='34' y1='104' x2='340' y2='68' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,121,166)' stop-opacity='0'/><stop offset='.42' stop-color='rgb(255,121,166)' stop-opacity='.24'/><stop offset='.64' stop-color='rgb(194,91,255)' stop-opacity='.86'/><stop offset='1' stop-color='rgb(76,92,255)' stop-opacity='.90'/></linearGradient><linearGradient id='f' x1='18' y1='72' x2='330' y2='130' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='0'/><stop offset='.42' stop-color='rgb(255,95,143)' stop-opacity='.12'/><stop offset='.70' stop-color='rgb(194,91,255)' stop-opacity='.34'/><stop offset='1' stop-color='rgb(76,92,255)' stop-opacity='.58'/></linearGradient><filter id='b' x='-10%' y='-30%' width='120%' height='160%'><feGaussianBlur stdDeviation='2.2'/></filter></defs><path d='M22 116C70 98 112 84 154 92C204 101 231 128 283 122C314 119 337 100 350 84L350 139C315 151 277 145 236 128C192 109 157 108 116 122C80 134 49 134 22 128Z' fill='url(%23f)' opacity='.72' filter='url(%23b)'/><path d='M24 101C68 88 112 65 158 72C206 80 239 110 291 102C318 98 337 82 350 66L350 113C321 130 286 128 247 112C202 94 161 88 116 103C79 115 51 121 24 118Z' fill='url(%23f)' opacity='.82'/><path d='M50 121C96 109 134 97 178 103C225 110 256 132 304 123C327 119 342 106 350 95L350 136C320 145 286 140 246 126C205 112 170 110 128 122C92 132 68 132 50 129Z' fill='url(%23f)' opacity='.58'/><path d='M30 101C78 86 113 64 158 71C209 79 239 111 292 102C318 98 337 82 350 67' fill='none' stroke='url(%23g)' stroke-width='5.2' stroke-linecap='round' opacity='.18' filter='url(%23b)'/><path d='M30 101C78 86 113 64 158 71C209 79 239 111 292 102C318 98 337 82 350 67' fill='none' stroke='url(%23g)' stroke-width='.92' stroke-linecap='round' opacity='.74'/><path d='M36 112C86 97 127 80 169 89C214 98 246 120 297 111C322 106 339 91 350 78' fill='none' stroke='url(%23s)' stroke-width='.46' stroke-linecap='round' opacity='.18'/><path d='M47 106C94 95 130 86 172 93C216 101 246 118 295 109C320 104 338 90 350 76' fill='none' stroke='url(%23s)' stroke-width='.32' stroke-linecap='round' opacity='.20'/><path d='M28 116C76 104 119 92 162 98C207 105 239 124 290 116C316 112 336 96 350 84' fill='none' stroke='url(%23s)' stroke-width='.24' stroke-linecap='round' opacity='.18'/><path d='M40 128C89 114 132 104 178 111C225 119 255 139 304 130C329 126 343 113 350 102' fill='none' stroke='url(%23g)' stroke-width='.66' stroke-linecap='round' opacity='.68'/><path d='M62 123C108 112 148 105 190 111C234 118 265 133 308 126C330 122 342 111 350 100' fill='none' stroke='url(%23s)' stroke-width='.28' stroke-linecap='round' opacity='.22'/><path d='M73 131C116 121 153 117 194 122C237 127 268 138 311 132C331 129 343 119 350 111' fill='none' stroke='url(%23s)' stroke-width='.24' stroke-linecap='round' opacity='.18'/></svg>") !important;
}

.home-history-pill i {
    font-size: 14px !important;
}

.hero-carousel {
    height: 292px !important;
    min-height: 292px !important;
    border-radius: 16px !important;
}

.hero-slide {
    min-height: 292px !important;
    padding: 16px 16px 14px !important;
}

.hero-background::after {
    right: -4px !important;
    top: 8px !important;
    width: 190px !important;
    height: 190px !important;
    border-radius: 50% !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><defs><linearGradient id='fan' x1='80' y1='80' x2='136' y2='44' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='.54'/><stop offset='.38' stop-color='rgb(255,132,174)' stop-opacity='.34'/><stop offset='.74' stop-color='rgb(255,255,255)' stop-opacity='.74'/><stop offset='1' stop-color='rgb(166,109,242)' stop-opacity='0'/></linearGradient><linearGradient id='core' x1='80' y1='80' x2='136' y2='44' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)'/><stop offset='.45' stop-color='rgb(255,132,174)'/><stop offset='1' stop-color='rgb(255,255,255)'/></linearGradient><radialGradient id='center' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.95'/><stop offset='.42' stop-color='rgb(255,95,143)' stop-opacity='.86'/><stop offset='1' stop-color='rgb(255,95,143)' stop-opacity='0'/></radialGradient><filter id='soft'><feGaussianBlur stdDeviation='1.1'/></filter></defs><circle cx='80' cy='80' r='72' fill='none' stroke='rgb(255,255,255)' stroke-opacity='.38' stroke-width='.65'/><circle cx='80' cy='80' r='60' fill='none' stroke='rgb(255,255,255)' stroke-opacity='.94' stroke-width='1.1'/><circle cx='80' cy='80' r='45' fill='none' stroke='rgb(255,255,255)' stroke-opacity='.48' stroke-width='.85'/><circle cx='80' cy='80' r='31' fill='none' stroke='rgb(255,255,255)' stroke-opacity='.48' stroke-width='.85'/><circle cx='80' cy='80' r='18' fill='none' stroke='rgb(255,255,255)' stroke-opacity='.48' stroke-width='.85'/><line x1='20' y1='80' x2='140' y2='80' stroke='rgb(255,255,255)' stroke-opacity='.42' stroke-width='.75'/><line x1='80' y1='18' x2='80' y2='142' stroke='rgb(255,255,255)' stroke-opacity='.42' stroke-width='.75'/><path d='M80 80 L132 39 A66 66 0 0 1 145 52 Z' fill='url(%23fan)' opacity='.92' filter='url(%23soft)'/><line x1='80' y1='80' x2='136' y2='44' stroke='url(%23core)' stroke-width='7.2' stroke-linecap='round' opacity='.50' filter='url(%23soft)'/><line x1='80' y1='80' x2='136' y2='44' stroke='url(%23core)' stroke-width='2' stroke-linecap='round'/><line x1='80' y1='80' x2='130' y2='38' stroke='rgb(255,255,255)' stroke-opacity='.88' stroke-width='.78' stroke-linecap='round'/><circle cx='136' cy='44' r='2.25' fill='rgb(255,255,255)'/><circle cx='80' cy='80' r='13' fill='url(%23center)'/><circle cx='80' cy='80' r='5.5' fill='rgb(255,95,143)'/><circle cx='51' cy='66' r='2.1' fill='rgb(255,255,255)' fill-opacity='.90'/><circle cx='132' cy='30' r='2.8' fill='rgb(255,122,160)'/><circle cx='113' cy='121' r='3' fill='rgb(255,122,160)'/><circle cx='62' cy='111' r='2.3' fill='rgb(255,122,160)'/></svg>") !important;
    opacity: 0.98 !important;
    filter: drop-shadow(0 16px 28px rgba(255, 95, 143, 0.15)) !important;
    animation: none !important;
}

body.dark-mode .hero-background::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><defs><linearGradient id='fan' x1='80' y1='80' x2='136' y2='44' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='.58'/><stop offset='.38' stop-color='rgb(255,95,143)' stop-opacity='.36'/><stop offset='.74' stop-color='rgb(255,255,255)' stop-opacity='.70'/><stop offset='1' stop-color='rgb(147,124,255)' stop-opacity='0'/></linearGradient><linearGradient id='core' x1='80' y1='80' x2='136' y2='44' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)'/><stop offset='.58' stop-color='rgb(255,95,143)'/><stop offset='1' stop-color='rgb(255,255,255)' stop-opacity='.72'/></linearGradient><radialGradient id='center' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.95'/><stop offset='.42' stop-color='rgb(255,95,143)' stop-opacity='.86'/><stop offset='1' stop-color='rgb(255,95,143)' stop-opacity='0'/></radialGradient><filter id='soft'><feGaussianBlur stdDeviation='1.1'/></filter></defs><circle cx='80' cy='80' r='72' fill='none' stroke='rgb(255,95,143)' stroke-opacity='.16' stroke-width='.65'/><circle cx='80' cy='80' r='60' fill='none' stroke='rgb(255,95,143)' stroke-opacity='.72' stroke-width='1.1'/><circle cx='80' cy='80' r='45' fill='none' stroke='rgb(255,95,143)' stroke-opacity='.24' stroke-width='.85'/><circle cx='80' cy='80' r='31' fill='none' stroke='rgb(255,95,143)' stroke-opacity='.24' stroke-width='.85'/><circle cx='80' cy='80' r='18' fill='none' stroke='rgb(255,95,143)' stroke-opacity='.24' stroke-width='.85'/><line x1='20' y1='80' x2='140' y2='80' stroke='rgb(255,95,143)' stroke-opacity='.20' stroke-width='.75'/><line x1='80' y1='18' x2='80' y2='142' stroke='rgb(255,95,143)' stroke-opacity='.20' stroke-width='.75'/><path d='M80 80 L132 39 A66 66 0 0 1 145 52 Z' fill='url(%23fan)' opacity='.92' filter='url(%23soft)'/><line x1='80' y1='80' x2='136' y2='44' stroke='url(%23core)' stroke-width='7.2' stroke-linecap='round' opacity='.56' filter='url(%23soft)'/><line x1='80' y1='80' x2='136' y2='44' stroke='url(%23core)' stroke-width='2' stroke-linecap='round'/><line x1='80' y1='80' x2='130' y2='38' stroke='rgb(255,255,255)' stroke-opacity='.86' stroke-width='.78' stroke-linecap='round'/><circle cx='136' cy='44' r='2.25' fill='rgb(255,255,255)'/><circle cx='80' cy='80' r='13' fill='url(%23center)'/><circle cx='80' cy='80' r='5.5' fill='rgb(255,95,143)'/><circle cx='51' cy='66' r='2.1' fill='rgb(255,255,255)' fill-opacity='.86'/><circle cx='132' cy='30' r='2.8' fill='rgb(255,121,160)'/><circle cx='113' cy='121' r='3' fill='rgb(255,121,160)'/><circle cx='62' cy='111' r='2.3' fill='rgb(255,121,160)'/></svg>") !important;
    filter: drop-shadow(0 18px 32px rgba(255, 95, 143, 0.26)) !important;
}

.hero-content {
    width: 58% !important;
    max-width: 240px !important;
}

.hero-content h2,
html[lang^="en"] .hero-content h2 {
    font-size: 18.5px !important;
    line-height: 1.17 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 7px !important;
}

.hero-content p,
html[lang^="en"] .hero-content p {
    max-width: 230px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
}

.hero-stats {
    gap: 28px !important;
    margin-bottom: 14px !important;
}

.hero-cta-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px 0 20px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
}

.hero-cta-btn::after {
    width: 28px !important;
    height: 28px !important;
}

.relationship-entry-card {
    min-height: 150px !important;
    grid-template-columns: 98px minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: center !important;
    padding: 10px 12px !important;
    margin-top: 7px !important;
}

.relationship-entry-card::before {
    width: 84px !important;
    height: 84px !important;
    margin-left: 0 !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 3px, rgba(143, 120, 255, 0.72) 4px 8px, rgba(143, 120, 255, 0.18) 9px 22px, transparent 23px),
        linear-gradient(135deg, transparent 49%, rgba(127, 106, 229, 0.70) 50%, transparent 54%),
        linear-gradient(90deg, transparent 0 20%, rgba(127, 106, 229, 0.58) 20% 21%, transparent 21% 79%, rgba(127, 106, 229, 0.58) 79% 80%, transparent 80%),
        linear-gradient(0deg, transparent 0 20%, rgba(127, 106, 229, 0.58) 20% 21%, transparent 21% 79%, rgba(127, 106, 229, 0.58) 79% 80%, transparent 80%),
        repeating-radial-gradient(circle, transparent 0 14px, rgba(127, 106, 229, 0.36) 15px 16px) !important;
    box-shadow: 0 10px 24px rgba(127, 106, 229, 0.06) !important;
    opacity: 0.96 !important;
}

body.dark-mode .relationship-entry-card::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.80) 0 3px, rgba(201, 149, 234, 0.82) 4px 8px, rgba(147, 124, 255, 0.20) 9px 22px, transparent 23px),
        linear-gradient(135deg, transparent 49%, rgba(201, 149, 234, 0.76) 50%, transparent 54%),
        linear-gradient(90deg, transparent 0 20%, rgba(201, 149, 234, 0.70) 20% 21%, transparent 21% 79%, rgba(201, 149, 234, 0.70) 79% 80%, transparent 80%),
        linear-gradient(0deg, transparent 0 20%, rgba(201, 149, 234, 0.70) 20% 21%, transparent 21% 79%, rgba(201, 149, 234, 0.70) 79% 80%, transparent 80%),
        repeating-radial-gradient(circle, transparent 0 14px, rgba(201, 149, 234, 0.44) 15px 16px) !important;
}

.relationship-entry-copy .discover-eyebrow {
    margin: 0 0 3px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--accent-color) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.relationship-entry-copy h3 {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
}

.relationship-entry-copy p {
    margin: 0 0 8px !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
}

.relationship-entry-card .relationship-primary-btn {
    min-height: 27px !important;
    padding: 0 6px 0 18px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    background: linear-gradient(135deg, #8f78ff 0%, #7e5aea 100%) !important;
    box-shadow: 0 10px 20px rgba(127, 106, 229, 0.18) !important;
}

.relationship-entry-card .relationship-primary-btn::after {
    content: "\f105";
    width: 21px;
    height: 21px;
    margin-left: 9px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    color: #7e5aea;
    background: rgba(255, 255, 255, 0.92);
}

.home-phase-map {
    padding: 10px 12px 9px !important;
}

.home-phase-card::before {
    content: none !important;
    display: none !important;
}

.home-phase-card {
    min-height: 108px !important;
    display: block !important;
    padding: 9px 7px 0 !important;
}

.home-phase-card h4 {
    min-height: 28px !important;
    margin-bottom: 4px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.home-phase-card[data-phase="4"] h4 {
    font-size: 11.4px !important;
}

.phase-card-icon {
    height: 34px !important;
    margin: 0 auto !important;
}

.home-phase-card[data-phase="1"] .phase-card-icon {
    font-size: 27px !important;
}

.home-phase-card[data-phase="1"] .phase-card-icon span {
    position: absolute !important;
    right: calc(50% - 22px) !important;
    bottom: 0 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border: 2px solid var(--card-bg);
}

.home-phase-card[data-phase="3"] .phase-card-icon i {
    display: none !important;
}

.home-phase-card[data-phase="3"] .phase-card-icon::before {
    content: "\f133";
    font-family: "Font Awesome 6 Free";
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    color: #a66df2;
}

.home-phase-card[data-phase="3"] .phase-card-icon::after {
    content: "\f004";
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 6 Free";
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    color: currentColor;
}

.home-phase-card[data-phase="4"] .phase-card-icon {
    font-size: 26px !important;
}

.home-phase-cta {
    left: 6px !important;
    right: 6px !important;
    bottom: 5px !important;
    min-height: 24px !important;
    padding: 0 6px !important;
    font-size: 8.5px !important;
    letter-spacing: -0.01em !important;
}

html[lang^="zh"] .home-phase-cta {
    font-size: 9.5px !important;
}

/* Brand Soft surface expansion: Discover, Chat, Profile and secondary pages
   inherit the accepted home card grammar without touching business flow. */
#discover-page .discover-shell,
#chat-page .chat-content,
#profile-page .profile-shell {
    padding-top: 18px !important;
}

#discover-page .discover-shell {
    display: grid !important;
    gap: 18px !important;
    padding-bottom: calc(var(--bottom-nav-height) + 22px) !important;
}

.discover-header {
    display: grid !important;
    gap: 16px !important;
}

.discover-heading {
    display: grid !important;
    gap: 7px !important;
}

.discover-heading h2 {
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
}

.discover-heading p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.discover-search {
    min-height: 52px !important;
    border-radius: 18px !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: 0 12px 26px rgba(59, 43, 99, 0.05) !important;
}

body.dark-mode .discover-search {
    background: rgba(255, 255, 255, 0.055) !important;
}

.discover-categories {
    display: flex !important;
    gap: 10px !important;
    margin: 0 -16px !important;
    padding: 0 16px 2px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.discover-categories::-webkit-scrollbar {
    display: none !important;
}

.category-tab {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border-soft) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    color: var(--text-color) !important;
    box-shadow: 0 8px 18px rgba(59, 43, 99, 0.05) !important;
}

.category-tab.active {
    border: 0 !important;
    background: var(--gradient-primary) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(var(--brand-pink-rgb), 0.22) !important;
}

body.dark-mode .category-tab {
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: none !important;
}

.discover-section-head {
    align-items: center !important;
    margin-bottom: 12px !important;
}

.discover-section-head h3 {
    margin: 6px 0 0 !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
}

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

.discover-featured-list,
.discover-list {
    display: grid !important;
    gap: 14px !important;
}

.discover-featured-card,
.discover-list-card {
    border-radius: 18px !important;
    padding: 15px !important;
    overflow: hidden !important;
}

.discover-list-card {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 13px !important;
}

.discover-thumb {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 14px 24px rgba(var(--brand-pink-rgb), 0.12) !important;
}

.discover-featured-card .discover-thumb {
    width: 62px !important;
    height: 62px !important;
}

.discover-thumb span {
    font-size: 22px !important;
    line-height: 1 !important;
}

.discover-thumb.accent-rose,
.accent-rose .discover-thumb {
    background: linear-gradient(135deg, #ff5c8a 0%, #b879df 100%) !important;
}

.discover-thumb.accent-blue,
.accent-blue .discover-thumb,
.discover-detail-hero.accent-blue {
    background: linear-gradient(135deg, #ff6f8f 0%, #7f6ae5 100%) !important;
}

.discover-thumb.accent-violet,
.accent-violet .discover-thumb {
    background: linear-gradient(135deg, #8b6dff 0%, #c995ea 100%) !important;
}

.discover-thumb.accent-amber,
.accent-amber .discover-thumb {
    background: linear-gradient(135deg, #ff7b9b 0%, #ffb56f 100%) !important;
}

.discover-thumb.accent-coral,
.accent-coral .discover-thumb {
    background: linear-gradient(135deg, #ff6f8f 0%, #ff8d76 100%) !important;
}

.discover-thumb.accent-mint,
.accent-mint .discover-thumb {
    background: linear-gradient(135deg, #7f6ae5 0%, #55d6c2 100%) !important;
}

.discover-thumb.accent-sky,
.accent-sky .discover-thumb {
    background: linear-gradient(135deg, #7f6ae5 0%, #7dc7ff 100%) !important;
}

.discover-featured-copy h4,
.discover-list-copy h4 {
    margin-bottom: 7px !important;
    font-size: 17px !important;
    line-height: 1.28 !important;
    letter-spacing: -0.01em !important;
}

.discover-list-copy h4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.discover-featured-copy p,
.discover-list-copy p {
    font-size: 13px !important;
    line-height: 1.48 !important;
}

.discover-list-copy p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.discover-copy-meta,
.discover-card-meta {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

.discover-card-meta {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px 14px !important;
}

#chat-page .chat-workspace-head {
    margin-bottom: 2px !important;
}

#chat-page .chat-session-pill {
    min-height: 38px !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    font-weight: 750 !important;
}

#chat-page .chat-session-pill i {
    font-size: 13px !important;
}

#chat-page .chat-container {
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--brand-pink-rgb), 0.06), transparent 34%),
        var(--card-bg) !important;
}

body.dark-mode #chat-page .chat-container {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 79, 134, 0.10), transparent 34%),
        var(--card-bg) !important;
}

#chat-page .chat-input-box {
    min-height: 58px !important;
    border-radius: 999px !important;
    padding: 7px 8px !important;
}

.chat-attach-btn,
.chat-send-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
}

.chat-input-field {
    min-height: 38px !important;
    padding-inline: 8px !important;
    background: transparent !important;
    border: 0 !important;
}

#chat-page .chat-input-box {
    align-items: center !important;
}

#chat-page .chat-input-container {
    align-items: flex-end !important;
}

#chat-page textarea.chat-input-field {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 38px;
    min-height: 38px !important;
    max-height: 82px !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 18px !important;
    outline: none !important;
    background: transparent !important;
    color: var(--text-color) !important;
    font: inherit;
    font-size: 16px !important;
    line-height: 22px !important;
    resize: none !important;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    #chat-page textarea.chat-input-field:focus {
        transform: none !important;
    }
}

.quick-replies-panel {
    z-index: 150 !important;
}

.quick-replies-panel:not(.active),
.chat-sessions:not(.is-open) {
    pointer-events: none !important;
}

#profile-page .profile-shell {
    display: grid !important;
    gap: 18px !important;
}

#profile-page .profile-content-grid {
    gap: 18px !important;
}

#profile-page .profile-identity-card,
#profile-page .profile-panel {
    border-radius: 22px !important;
}

#profile-page .profile-panel {
    padding: 16px !important;
}

#profile-page .profile-quick-grid,
#profile-page .profile-menu {
    gap: 12px !important;
}

#profile-page .menu-item {
    min-height: 78px !important;
    border-radius: 18px !important;
    padding: 13px 14px !important;
}

#profile-page .menu-icon {
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.18), rgba(var(--brand-purple-rgb), 0.18)) !important;
    color: var(--primary-color) !important;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.14) !important;
}

#profile-page .profile-edit-pill {
    min-height: 36px !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
}

#edit-profile-page .page-content {
    display: grid !important;
    gap: 14px !important;
}

#edit-profile-page .avatar-upload,
#edit-profile-page .form-group {
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 96% 0%, rgba(var(--brand-purple-rgb), 0.06), transparent 32%),
        var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
}

#edit-profile-page .avatar-upload {
    justify-items: center !important;
    padding-top: 26px !important;
    padding-bottom: 22px !important;
}

#edit-profile-page .avatar-preview {
    width: 88px !important;
    height: 88px !important;
    border-radius: 50% !important;
    background:
        linear-gradient(36deg, transparent 44%, rgba(255, 255, 255, 0.72) 48%, rgba(255, 123, 155, 0.30) 53%, transparent 61%),
        repeating-radial-gradient(circle, transparent 0 13px, rgba(var(--brand-purple-rgb), 0.28) 14px 15px),
        radial-gradient(circle at 50% 50%, rgba(var(--brand-pink-rgb), 0.70) 0 7px, rgba(var(--brand-pink-rgb), 0.18) 8px 24px, transparent 40px),
        linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.16), rgba(var(--brand-purple-rgb), 0.22)) !important;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.24) !important;
    box-shadow: 0 16px 32px rgba(var(--brand-pink-rgb), 0.13) !important;
}

body.dark-mode #edit-profile-page .avatar-preview {
    background:
        linear-gradient(36deg, transparent 44%, rgba(255, 123, 155, 0.90) 48%, rgba(201, 149, 234, 0.34) 53%, transparent 61%),
        repeating-radial-gradient(circle, transparent 0 13px, rgba(201, 149, 234, 0.36) 14px 15px),
        radial-gradient(circle at 50% 50%, rgba(255, 123, 155, 0.78) 0 7px, rgba(147, 124, 255, 0.22) 8px 24px, transparent 40px),
        linear-gradient(135deg, rgba(255, 123, 155, 0.18), rgba(147, 124, 255, 0.24)) !important;
}

#edit-profile-page .avatar-change-btn {
    margin-top: 12px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    background: var(--gradient-secondary) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(var(--brand-accent-rgb), 0.18) !important;
}

#edit-profile-page .form-group label,
.settings-section h4 {
    color: var(--text-color) !important;
}

#edit-profile-page .form-group input,
#edit-profile-page .form-group textarea,
#edit-profile-page .form-group select {
    margin-top: 9px !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-color) !important;
}

#edit-profile-page .radio-group {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin-top: 12px !important;
    min-height: 50px !important;
}

#edit-profile-page .radio-option {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    min-width: 58px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

#edit-profile-page .radio-option input[type="radio"] {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    accent-color: var(--primary-color);
}

#edit-profile-page .radio-option input[type="radio"]:focus {
    outline: none !important;
}

#edit-profile-page .radio-option input[type="radio"]:focus-visible {
    outline: 2px solid rgba(var(--brand-pink-rgb), 0.24) !important;
    outline-offset: 3px !important;
}

#edit-profile-page .radio-option span {
    display: block !important;
    min-height: 20px !important;
    color: var(--text-color) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.settings-action-btn,
.password-save-btn {
    border-radius: 999px !important;
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 12px 24px rgba(var(--brand-pink-rgb), 0.20) !important;
}

.settings-action-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
}

.toggle-label {
    background: rgba(169, 156, 175, 0.34) !important;
}

.toggle-input:checked + .toggle-label {
    background: var(--gradient-primary) !important;
}

@media (min-width: 768px) {
    #discover-page .discover-shell,
    #chat-page .chat-content,
    #profile-page .profile-shell {
        padding-top: 18px !important;
    }
}

/* Brand Soft deep-surface expansion: membership, help, legal, article, and
   statistics pages keep the same app-width product shell while feeling less
   like legacy settings screens. */
#content-detail-page.app-page.active {
    display: block !important;
}

body:not(.dark-mode) .discover-detail-hero {
    color: var(--text-color) !important;
}

body:not(.dark-mode) .discover-detail-type,
body:not(.dark-mode) .discover-detail-category {
    background: rgba(var(--brand-pink-rgb), 0.12) !important;
    color: var(--text-color) !important;
}

body:not(.dark-mode) .discover-detail-stats {
    color: var(--text-secondary) !important;
}

body:not(.dark-mode) .discover-detail-stats i {
    color: var(--primary-color) !important;
}

#vip-page .page-content,
#help-page .page-content,
#about-page .page-content,
#terms-page .page-content,
#privacy-page .page-content,
#ai-disclaimer-page .page-content,
#support-page .page-content,
#feedback-page .page-content,
.legal-page .page-content,
#article-page .page-content {
    display: grid !important;
    align-content: start !important;
    gap: 16px !important;
    padding-top: 12px !important;
}

.stats-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
}

.stats-card,
.stats-section,
.vip-plan-card,
.vip-badge,
.benefit-item,
.faq-item,
.contact-section,
.app-info,
.team-section,
.mission-section,
.legal-summary-card,
.legal-section-card,
.article-body-card {
    border-radius: 22px !important;
}

.stats-card {
    min-height: 94px !important;
    padding: 15px 10px !important;
    display: grid !important;
    align-content: center !important;
    gap: 6px !important;
    text-align: center !important;
}

.stats-card-value,
.price-value {
    color: var(--text-color) !important;
    font-weight: 850 !important;
    letter-spacing: -0.02em !important;
}

.stats-card-label,
.price-period,
.benefit-desc,
.faq-answer,
.app-description,
.legal-summary-card p,
.legal-section-card p,
.article-body-card p,
.article-body-card li {
    color: var(--text-secondary) !important;
}

.stats-section {
    padding: 18px 16px !important;
}

.placeholder-chart {
    align-items: end !important;
    gap: 13px !important;
    min-height: 164px !important;
}

.stats-bar {
    border-radius: 10px 10px 5px 5px !important;
    background: linear-gradient(180deg, #c95df0 0%, var(--primary-color) 100%) !important;
    box-shadow: 0 10px 20px rgba(var(--brand-pink-rgb), 0.20) !important;
}

.stats-list-item {
    min-height: 48px !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
}

.stats-rank {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: var(--gradient-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(var(--brand-pink-rgb), 0.20) !important;
}

.stats-feature i,
.vip-feature i,
.benefit-item i,
.contact-btn i,
.faq-question i {
    color: var(--primary-color) !important;
}

.vip-badges {
    gap: 18px !important;
    margin: 0 0 10px !important;
}

.vip-badge {
    width: 88px !important;
    min-height: 88px !important;
    padding: 12px 9px !important;
    background:
        radial-gradient(circle at 70% 20%, rgba(var(--brand-pink-rgb), 0.14), transparent 36%),
        var(--card-bg) !important;
}

.vip-badge i {
    width: 34px !important;
    height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.18), rgba(var(--brand-purple-rgb), 0.18)) !important;
    color: var(--primary-color) !important;
}

.vip-badge.premium i {
    color: #fff !important;
    background: var(--gradient-primary) !important;
}

.vip-badge-arrow {
    color: var(--text-light) !important;
}

.vip-plan-card {
    padding: 22px 20px !important;
    gap: 18px !important;
}

.vip-plan-card.recommended {
    border-color: rgba(var(--brand-pink-rgb), 0.52) !important;
    box-shadow: 0 20px 42px rgba(var(--brand-pink-rgb), 0.14) !important;
}

.recommend-tag,
.legal-eyebrow {
    border-radius: 999px !important;
    background: rgba(var(--brand-pink-rgb), 0.13) !important;
    color: var(--primary-color) !important;
    font-weight: 780 !important;
}

.vip-plan-header {
    text-align: center !important;
}

.vip-plan-features {
    display: grid !important;
    gap: 14px !important;
}

.vip-select-btn,
.contact-btn {
    min-height: 42px !important;
    border-radius: 18px !important;
    font-weight: 780 !important;
}

.vip-select-btn {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 14px 28px rgba(var(--brand-pink-rgb), 0.20) !important;
}

.vip-benefits {
    display: grid !important;
    gap: 12px !important;
    margin-top: 0 !important;
}

.benefits-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.benefit-item {
    min-height: 118px !important;
    padding: 16px 12px !important;
}

#help-page .search-box {
    min-height: 48px !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
}

#help-page .search-box input {
    background: transparent !important;
    color: var(--text-color) !important;
}

.faq-section {
    display: grid !important;
    gap: 12px !important;
}

.faq-item {
    padding: 0 !important;
    overflow: hidden !important;
}

.faq-question {
    min-height: 58px !important;
    padding: 0 16px !important;
    color: var(--text-color) !important;
}

.faq-answer {
    padding: 0 16px 16px !important;
    line-height: 1.6 !important;
}

.contact-section {
    padding: 20px !important;
}

.contact-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.contact-btn {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 8px !important;
    min-height: 82px !important;
    padding: 14px 10px !important;
    border: 1px solid var(--border-soft) !important;
    background:
        radial-gradient(circle at 80% 0%, rgba(var(--brand-pink-rgb), 0.08), transparent 40%),
        var(--card-bg) !important;
    color: var(--text-color) !important;
}

.contact-btn.contact-btn-secondary:last-child {
    grid-column: 1 / -1 !important;
}

#help-page .contact-options .contact-btn:nth-child(3) {
    grid-column: 1 / -1 !important;
}

#about-page .contact-options {
    grid-template-columns: 1fr !important;
}

.contact-options .contact-btn {
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
}

#help-page .contact-options,
#about-page .contact-options {
    align-items: stretch !important;
}

#help-page .contact-options .contact-btn:nth-child(3),
#help-page .contact-options .contact-btn.contact-btn-secondary:last-child {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
}

.vip-select-btn {
    border-radius: 999px !important;
}

.app-info {
    padding: 26px 20px !important;
}

.app-version {
    border-radius: 999px !important;
    background: rgba(var(--brand-purple-rgb), 0.10) !important;
    color: var(--text-secondary) !important;
}

.team-section,
.mission-section {
    padding: 20px !important;
}

#about-page .terms-section {
    border-radius: 18px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid var(--border-soft) !important;
}

body.dark-mode #about-page .terms-section {
    background: rgba(255, 255, 255, 0.045) !important;
}

.legal-shell {
    display: grid !important;
    gap: 14px !important;
}

.legal-summary-card,
.legal-section-card,
.article-body-card {
    padding: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

.legal-summary-card::before,
.legal-section-card::before,
.article-body-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color)) !important;
    opacity: 0.46 !important;
}

.legal-summary-card h3,
.legal-section-card h4,
.article-body-card h4 {
    line-height: 1.35 !important;
}

.legal-section-card a {
    color: var(--secondary-color) !important;
    font-weight: 780 !important;
}

.article-body-card {
    line-height: 1.65 !important;
}

.article-body-card ol,
.article-body-card ul {
    margin: 12px 0 0 !important;
    padding-left: 20px !important;
}

.article-body-card li + li {
    margin-top: 8px !important;
}

.article-note {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(var(--brand-pink-rgb), 0.10) !important;
    color: var(--text-color) !important;
}

body.dark-mode .contact-btn,
body.dark-mode #help-page .search-box,
body.dark-mode #about-page .terms-section {
    background:
        radial-gradient(circle at 80% 0%, rgba(255, 123, 155, 0.08), transparent 40%),
        rgba(255, 255, 255, 0.045) !important;
}

body.dark-mode .stats-bar {
    box-shadow: 0 12px 26px rgba(255, 123, 155, 0.16) !important;
}

@media (max-width: 380px) {
    .benefits-grid,
    .contact-options {
        grid-template-columns: 1fr !important;
    }

    .contact-btn.contact-btn-secondary:last-child {
        grid-column: auto !important;
    }
}

/* Brand Soft visual QA polish. */
.funnel-bar {
    grid-template-columns: 28px 70px 76px minmax(0, 1fr) !important;
    column-gap: 8px !important;
}

.funnel-bar-badge {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    min-height: 18px !important;
    padding: 0 7px !important;
    font-size: 9.5px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

.funnel-track {
    grid-column: 4 !important;
    grid-row: 1 !important;
}

.relationship-entry-card:not(.relationship-guide-card)::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 3px, rgba(143, 120, 255, 0.72) 4px 8px, rgba(143, 120, 255, 0.18) 9px 23px, transparent 24px),
        conic-gradient(from 310deg at 50% 50%, transparent 0deg, transparent 338deg, rgba(127, 106, 229, 0.10) 342deg, rgba(127, 106, 229, 0.58) 348deg, rgba(255, 255, 255, 0.60) 353deg, transparent 360deg),
        linear-gradient(90deg, transparent calc(50% - 0.55px), rgba(127, 106, 229, 0.46) calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)),
        linear-gradient(0deg, transparent calc(50% - 0.55px), rgba(127, 106, 229, 0.46) calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)),
        repeating-radial-gradient(circle, transparent 0 14px, rgba(127, 106, 229, 0.34) 15px 16px) !important;
}

body.dark-mode .relationship-entry-card:not(.relationship-guide-card)::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.84) 0 3px, rgba(201, 149, 234, 0.82) 4px 8px, rgba(147, 124, 255, 0.22) 9px 23px, transparent 24px),
        conic-gradient(from 310deg at 50% 50%, transparent 0deg, transparent 338deg, rgba(201, 149, 234, 0.12) 342deg, rgba(201, 149, 234, 0.68) 348deg, rgba(255, 255, 255, 0.56) 353deg, transparent 360deg),
        linear-gradient(90deg, transparent calc(50% - 0.55px), rgba(201, 149, 234, 0.54) calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)),
        linear-gradient(0deg, transparent calc(50% - 0.55px), rgba(201, 149, 234, 0.54) calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)),
        repeating-radial-gradient(circle, transparent 0 14px, rgba(201, 149, 234, 0.42) 15px 16px) !important;
}

.hero-background::after {
    animation: brandSoftRadarSweep 8s linear infinite !important;
    transform-origin: center center !important;
}

@keyframes brandSoftRadarSweep {
    0% {
        opacity: 0.88;
        transform: rotate(0deg) scale(0.99);
    }

    50% {
        opacity: 1;
        transform: rotate(180deg) scale(1.01);
    }

    100% {
        opacity: 0.88;
        transform: rotate(360deg) scale(0.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-background::after {
        animation: none !important;
    }
}

.home-phase-card.active {
    padding-bottom: 31px !important;
}

.home-phase-card.active h4 {
    min-height: 18px !important;
    margin-bottom: 2px !important;
}

.home-phase-card.active .phase-card-icon.chat {
    position: relative !important;
    z-index: 1 !important;
    height: 28px !important;
    margin-top: -1px !important;
    margin-bottom: 4px !important;
}

.home-phase-card.active .phase-card-icon.chat i {
    font-size: 23px !important;
}

.home-phase-card.active .phase-card-icon.chat i:last-child {
    transform: translateY(2px) !important;
}

.home-phase-card.active .home-phase-cta {
    z-index: 3 !important;
    bottom: 7px !important;
    min-height: 23px !important;
}

.relationship-guide-card {
    min-height: auto !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 18px 18px 20px !important;
    margin: 0 !important;
    width: auto !important;
}

.relationship-guide-card::before {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 76px !important;
    height: 76px !important;
    margin: 0 !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0 3px, rgba(143, 120, 255, 0.72) 4px 8px, rgba(143, 120, 255, 0.18) 9px 23px, transparent 24px),
        conic-gradient(from 310deg at 50% 50%, transparent 0deg, transparent 338deg, rgba(127, 106, 229, 0.10) 342deg, rgba(127, 106, 229, 0.58) 348deg, rgba(255, 255, 255, 0.60) 353deg, transparent 360deg),
        linear-gradient(90deg, transparent calc(50% - 0.55px), rgba(127, 106, 229, 0.42) calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)),
        linear-gradient(0deg, transparent calc(50% - 0.55px), rgba(127, 106, 229, 0.42) calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)),
        repeating-radial-gradient(circle, transparent 0 13px, rgba(127, 106, 229, 0.30) 14px 15px) !important;
    box-shadow: 0 14px 26px rgba(127, 106, 229, 0.08) !important;
}

body.dark-mode .relationship-guide-card::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.84) 0 3px, rgba(201, 149, 234, 0.82) 4px 8px, rgba(147, 124, 255, 0.22) 9px 23px, transparent 24px),
        conic-gradient(from 310deg at 50% 50%, transparent 0deg, transparent 338deg, rgba(201, 149, 234, 0.12) 342deg, rgba(201, 149, 234, 0.68) 348deg, rgba(255, 255, 255, 0.56) 353deg, transparent 360deg),
        linear-gradient(90deg, transparent calc(50% - 0.55px), rgba(201, 149, 234, 0.48) calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)),
        linear-gradient(0deg, transparent calc(50% - 0.55px), rgba(201, 149, 234, 0.48) calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)),
        repeating-radial-gradient(circle, transparent 0 13px, rgba(201, 149, 234, 0.40) 14px 15px) !important;
}

.relationship-guide-card .relationship-entry-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.relationship-guide-card .relationship-checkpoint-list {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.relationship-guide-card .relationship-entry-copy h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

.relationship-guide-card .relationship-entry-copy p {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.relationship-guide-card .relationship-checkpoint-list {
    display: grid !important;
    gap: 9px !important;
}

.relationship-guide-card .relationship-checkpoint-list span {
    min-height: 40px !important;
    padding: 10px 12px 10px 34px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.66) !important;
    border: 1px solid rgba(var(--brand-purple-rgb), 0.10) !important;
}

body.dark-mode .relationship-guide-card .relationship-checkpoint-list span {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#chat-page .chat-sessions {
    width: min(360px, calc(var(--app-shell-width) - 28px)) !important;
    max-width: 360px !important;
    left: calc(var(--app-fixed-left) + 14px) !important;
    right: auto !important;
    top: calc(var(--native-safe-top, 0px) + 18px) !important;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 18px) !important;
    height: auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    transform: translateX(calc(-100% - 18px)) !important;
}

#chat-page .chat-sessions.is-open {
    transform: translateX(0) !important;
}

#sessions-list {
    padding: 4px 0 12px !important;
}

#sessions-list .session-item {
    gap: 12px !important;
    padding: 14px !important;
}

.quick-replies-panel {
    left: calc(var(--app-fixed-left) + 14px) !important;
    right: calc(var(--app-fixed-left) + 14px) !important;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 18px) !important;
    top: auto !important;
    width: auto !important;
    max-width: calc(var(--app-shell-width) - 28px) !important;
    max-height: min(52vh, 430px) !important;
    border-radius: 22px 22px 18px 18px !important;
    transform: translateY(calc(100% + var(--bottom-nav-height) + 34px)) !important;
}

.quick-replies-panel.active {
    transform: translateY(0) !important;
}

.quick-replies-container {
    padding: 14px 14px 22px !important;
    gap: 14px !important;
}

.reply-category-card {
    padding: 13px !important;
    border-radius: 18px !important;
}

.template-item {
    padding: 11px 12px !important;
    border-radius: 14px !important;
}

@media (max-width: 767px) {
    #profile-page .profile-identity-card {
        align-items: center !important;
        position: relative !important;
        min-height: 104px !important;
        padding-right: 126px !important;
    }

    #profile-page .profile-name-row {
        display: block !important;
    }

    #profile-page .profile-edit-pill {
        position: absolute !important;
        top: 50% !important;
        right: 16px !important;
        align-self: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 430px) {
    #chat-page .chat-sessions {
        width: calc(100vw - 28px) !important;
        max-width: none !important;
        left: 14px !important;
    }

    .quick-replies-panel {
        left: 14px !important;
        right: 14px !important;
        max-width: none !important;
    }
}

@media (max-width: 380px) {
    .funnel-bar {
        grid-template-columns: 26px 60px 64px minmax(0, 1fr) !important;
        column-gap: 7px !important;
    }

    .funnel-bar-badge {
        padding: 0 6px !important;
        font-size: 9px !important;
    }

    .relationship-guide-card {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 16px 14px !important;
    }

    .relationship-guide-card::before {
        width: 66px !important;
        height: 66px !important;
    }

    #profile-page .profile-identity-card {
        padding-right: 108px !important;
    }

    #profile-page .profile-edit-pill {
        right: 12px !important;
    }
}

/* Brand Soft home density convergence. */
#home-page {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 12px) !important;
}

#home-page .home-topbar {
    padding-top: 20px !important;
    margin-bottom: 9px !important;
}

#home-page .home-brand-wordmark {
    font-size: 29px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

#home-page .home-history-pill {
    min-height: 31px !important;
    padding: 0 12px !important;
    gap: 6px !important;
    font-size: 12.5px !important;
}

#home-page .home-history-pill i {
    font-size: 12.5px !important;
}

#home-page .hero-carousel {
    height: 264px !important;
    min-height: 264px !important;
    margin-top: 0 !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 82% 30%, rgba(255, 111, 143, 0.16), transparent 33%),
        radial-gradient(circle at 96% 80%, rgba(127, 106, 229, 0.18), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 253, 0.96) 52%, rgba(249, 244, 255, 0.98) 100%) !important;
}

body.dark-mode #home-page .hero-carousel {
    background:
        radial-gradient(circle at 80% 30%, rgba(255, 111, 143, 0.15), transparent 34%),
        radial-gradient(circle at 100% 86%, rgba(147, 124, 255, 0.20), transparent 38%),
        linear-gradient(135deg, rgba(20, 19, 25, 0.98) 0%, rgba(27, 22, 31, 0.98) 58%, rgba(23, 21, 35, 0.98) 100%) !important;
}

#home-page .hero-slide {
    min-height: 264px !important;
    padding: 14px 16px 12px !important;
}

#home-page .hero-background::after {
    right: -12px !important;
    top: 9px !important;
    width: 174px !important;
    height: 174px !important;
}

#home-page .hero-wave {
    right: -26px !important;
    bottom: -8px !important;
    width: 334px !important;
    height: 112px !important;
    opacity: 0.62 !important;
}

body.dark-mode #home-page .hero-wave {
    opacity: 0.82 !important;
}

#home-page .hero-content {
    width: 57% !important;
    max-width: 222px !important;
}

#home-page .hero-badge {
    min-height: 20px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
    line-height: 20px !important;
}

#home-page .hero-content h2,
html[lang^="en"] #home-page .hero-content h2 {
    font-size: 17.5px !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    margin: 7px 0 6px !important;
}

#home-page .hero-content p,
html[lang^="en"] #home-page .hero-content p {
    max-width: 210px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
}

#home-page .hero-stats {
    gap: 22px !important;
    min-height: 32px !important;
    margin-bottom: 11px !important;
}

#home-page .hero-stats .stat {
    min-height: 30px !important;
    gap: 5px !important;
}

#home-page .hero-stats .stat::before {
    font-size: 22px !important;
}

#home-page .hero-stats .stat-number {
    font-size: 14px !important;
    line-height: 1.05 !important;
}

#home-page .hero-stats .stat-label {
    font-size: 10.2px !important;
    line-height: 1.05 !important;
}

#home-page .hero-cta-btn {
    min-height: 35px !important;
    height: 35px !important;
    padding: 0 7px 0 18px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
}

#home-page .hero-cta-btn::after {
    width: 25px !important;
    height: 25px !important;
    font-size: 11px !important;
}

#home-page .carousel-pagination {
    bottom: 8px !important;
}

#home-page .pagination-dot {
    width: 6px !important;
    height: 6px !important;
}

#home-page .relationship-entry-card:not(.relationship-guide-card) {
    min-height: 122px !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    margin-top: 7px !important;
}

#home-page .relationship-entry-card:not(.relationship-guide-card)::before {
    width: 70px !important;
    height: 70px !important;
}

#home-page .relationship-entry-copy .discover-eyebrow {
    margin-bottom: 2px !important;
    font-size: 11px !important;
}

#home-page .relationship-entry-copy h3 {
    font-size: 15px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    margin-bottom: 4px !important;
}

#home-page .relationship-entry-copy p {
    font-size: 10.8px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
}

#home-page .relationship-entry-actions {
    justify-content: flex-start !important;
}

#home-page .relationship-entry-card .relationship-primary-btn {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 230px !important;
    min-height: 26px !important;
    padding: 0 5px 0 15px !important;
    font-size: 11.2px !important;
    letter-spacing: 0 !important;
    justify-content: flex-start !important;
}

#home-page .relationship-entry-card .relationship-primary-btn::after {
    width: 20px !important;
    height: 20px !important;
    margin-left: 8px !important;
    font-size: 10px !important;
}

#home-page .funnel-card {
    padding: 9px 12px 9px !important;
    margin-top: 7px !important;
}

#home-page .funnel-card-copy {
    margin-bottom: 5px !important;
}

#home-page .funnel-card-copy h3 {
    font-size: 15px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}

#home-page .funnel-card-copy h3 i {
    font-size: 12px !important;
}

#home-page .funnel-bar-chart {
    gap: 3px !important;
}

#home-page .funnel-bar {
    grid-template-columns: 23px 64px 62px minmax(0, 1fr) !important;
    min-height: 21px !important;
    column-gap: 7px !important;
}

html[lang^="en"] #home-page .funnel-bar {
    grid-template-columns: 23px 58px 84px minmax(0, 1fr) !important;
}

#home-page .funnel-bar:not(:last-child)::after {
    left: 11px !important;
    top: 22px !important;
    height: 3px !important;
}

#home-page .funnel-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 13px !important;
}

#home-page .funnel-bar-label {
    font-size: 11px !important;
    line-height: 1.05 !important;
}

#home-page .funnel-bar-badge {
    min-height: 16px !important;
    padding: 0 6px !important;
    font-size: 8.5px !important;
    line-height: 16px !important;
}

#home-page .funnel-track {
    height: 7px !important;
}

#home-page .funnel-knob {
    width: 12px !important;
    height: 12px !important;
    border-width: 2.5px !important;
}

#home-page .home-phase-map {
    padding: 9px 10px 8px !important;
    margin-top: 7px !important;
}

#home-page .home-phase-map-head {
    margin-bottom: 7px !important;
}

#home-page .home-phase-map-head h3 {
    font-size: 15.5px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

#home-page .home-phase-map-head h3 i {
    font-size: 15px !important;
}

#home-page .phase-method-link {
    font-size: 9.5px !important;
    gap: 4px !important;
}

#home-page .home-phase-grid {
    gap: 7px !important;
}

#home-page .home-phase-card {
    min-height: 94px !important;
    padding: 7px 5px 0 !important;
    border-radius: 10px !important;
}

#home-page .home-phase-card-topline {
    margin-bottom: 2px !important;
}

#home-page .home-phase-number {
    font-size: 9px !important;
}

#home-page .home-phase-card h4 {
    min-height: 22px !important;
    margin-bottom: 2px !important;
    font-size: 10.8px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

#home-page .home-phase-card[data-phase="4"] h4 {
    font-size: 10px !important;
}

#home-page .phase-card-icon {
    height: 24px !important;
    font-size: 21px !important;
    margin-bottom: 2px !important;
}

#home-page .home-phase-card[data-phase="1"] .phase-card-icon {
    font-size: 23px !important;
}

#home-page .home-phase-card[data-phase="1"] .phase-card-icon span {
    right: calc(50% - 18px) !important;
    bottom: -2px !important;
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
}

#home-page .home-phase-card[data-phase="3"] .phase-card-icon::before {
    font-size: 24px !important;
}

#home-page .home-phase-card[data-phase="3"] .phase-card-icon::after {
    top: 50% !important;
    left: 50% !important;
    font-size: 7.2px !important;
}

#home-page .home-phase-card[data-phase="4"] .phase-card-icon {
    font-size: 22px !important;
}

#home-page .home-phase-card p {
    min-height: 20px !important;
    padding: 4px 3px 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

#home-page .home-phase-card.active {
    padding-bottom: 24px !important;
}

#home-page .home-phase-card.active h4 {
    min-height: 18px !important;
    margin-bottom: 1px !important;
}

#home-page .home-phase-card.active .phase-card-icon.chat {
    height: 22px !important;
    margin-top: 0 !important;
    margin-bottom: 3px !important;
}

#home-page .home-phase-card.active .phase-card-icon.chat i {
    font-size: 19px !important;
}

#home-page .home-phase-card.active .phase-card-icon.chat i:last-child {
    transform: translateY(1px) !important;
}

#home-page .home-phase-card.active .home-phase-cta {
    left: 5px !important;
    right: 5px !important;
    bottom: 4px !important;
    min-height: 20px !important;
    padding: 0 4px !important;
    font-size: 7.8px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

html[lang^="zh"] #home-page .home-phase-card.active .home-phase-cta {
    font-size: 8.5px !important;
}

@media (max-width: 380px) {
    #home-page .hero-carousel {
        height: 258px !important;
        min-height: 258px !important;
    }

    #home-page .hero-slide {
        min-height: 258px !important;
        padding: 13px 14px 11px !important;
    }

    #home-page .hero-content h2,
    html[lang^="en"] #home-page .hero-content h2 {
        font-size: 16.6px !important;
    }

    #home-page .funnel-bar {
        grid-template-columns: 22px 58px 58px minmax(0, 1fr) !important;
        column-gap: 6px !important;
    }

    #home-page .home-phase-grid {
        gap: 5px !important;
    }

    #home-page .home-phase-card h4 {
        font-size: 10px !important;
    }
}

/* Brand Soft QA cleanup: remove stray radar artifacts called out in preview. */
#home-page .relationship-entry-card:not(.relationship-guide-card)::before {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><radialGradient id='core' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.92'/><stop offset='.34' stop-color='rgb(143,120,255)' stop-opacity='.72'/><stop offset='1' stop-color='rgb(143,120,255)' stop-opacity='0'/></radialGradient><linearGradient id='beam' x1='40' y1='40' x2='61' y2='19' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(143,120,255)'/><stop offset='.62' stop-color='rgb(188,167,255)' stop-opacity='.62'/><stop offset='1' stop-color='rgb(255,255,255)' stop-opacity='.28'/></linearGradient><filter id='blur'><feGaussianBlur stdDeviation='1.2'/></filter></defs><circle cx='40' cy='40' r='34' fill='none' stroke='rgb(143,120,255)' stroke-opacity='.16' stroke-width='1.2'/><circle cx='40' cy='40' r='26' fill='none' stroke='rgb(143,120,255)' stroke-opacity='.46' stroke-width='1.25'/><circle cx='40' cy='40' r='18' fill='none' stroke='rgb(143,120,255)' stroke-opacity='.34' stroke-width='1'/><circle cx='40' cy='40' r='10' fill='none' stroke='rgb(143,120,255)' stroke-opacity='.24' stroke-width='1'/><path d='M40 40 L60 18 A30 30 0 0 1 64 24 Z' fill='rgb(143,120,255)' fill-opacity='.13' filter='url(%23blur)'/><line x1='40' y1='40' x2='61' y2='19' stroke='url(%23beam)' stroke-width='2.2' stroke-linecap='round'/><circle cx='40' cy='40' r='12' fill='url(%23core)'/><circle cx='40' cy='40' r='4.2' fill='rgb(143,120,255)'/><circle cx='25' cy='35' r='1.7' fill='rgb(255,123,155)' fill-opacity='.58'/><circle cx='54' cy='52' r='1.9' fill='rgb(143,120,255)' fill-opacity='.48'/></svg>") !important;
}

body.dark-mode #home-page .relationship-entry-card:not(.relationship-guide-card)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><radialGradient id='core' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.86'/><stop offset='.34' stop-color='rgb(201,149,234)' stop-opacity='.76'/><stop offset='1' stop-color='rgb(147,124,255)' stop-opacity='0'/></radialGradient><linearGradient id='beam' x1='40' y1='40' x2='61' y2='19' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(201,149,234)'/><stop offset='.62' stop-color='rgb(177,139,255)' stop-opacity='.70'/><stop offset='1' stop-color='rgb(255,255,255)' stop-opacity='.34'/></linearGradient><filter id='blur'><feGaussianBlur stdDeviation='1.2'/></filter></defs><circle cx='40' cy='40' r='34' fill='none' stroke='rgb(201,149,234)' stroke-opacity='.20' stroke-width='1.2'/><circle cx='40' cy='40' r='26' fill='none' stroke='rgb(201,149,234)' stroke-opacity='.54' stroke-width='1.25'/><circle cx='40' cy='40' r='18' fill='none' stroke='rgb(201,149,234)' stroke-opacity='.36' stroke-width='1'/><circle cx='40' cy='40' r='10' fill='none' stroke='rgb(201,149,234)' stroke-opacity='.26' stroke-width='1'/><path d='M40 40 L60 18 A30 30 0 0 1 64 24 Z' fill='rgb(201,149,234)' fill-opacity='.18' filter='url(%23blur)'/><line x1='40' y1='40' x2='61' y2='19' stroke='url(%23beam)' stroke-width='2.2' stroke-linecap='round'/><circle cx='40' cy='40' r='12' fill='url(%23core)'/><circle cx='40' cy='40' r='4.2' fill='rgb(201,149,234)'/><circle cx='25' cy='35' r='1.7' fill='rgb(255,123,155)' fill-opacity='.62'/><circle cx='54' cy='52' r='1.9' fill='rgb(147,124,255)' fill-opacity='.54'/></svg>") !important;
}

#profile-page .single-avatar:not(.has-avatar) {
    background:
        linear-gradient(36deg, transparent 44%, rgba(var(--brand-pink-rgb), 0.46) 49%, rgba(var(--brand-purple-rgb), 0.20) 54%, transparent 62%),
        repeating-radial-gradient(circle, transparent 0 12px, rgba(var(--brand-purple-rgb), 0.24) 13px 14px),
        radial-gradient(circle at 50% 50%, rgba(var(--brand-pink-rgb), 0.72) 0 7px, rgba(var(--brand-pink-rgb), 0.20) 8px 24px, transparent 40px),
        linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.18), rgba(var(--brand-purple-rgb), 0.22)) !important;
}

body.dark-mode #profile-page .single-avatar:not(.has-avatar) {
    background:
        linear-gradient(36deg, transparent 44%, rgba(255, 79, 134, 0.70) 49%, rgba(207, 102, 255, 0.28) 54%, transparent 62%),
        repeating-radial-gradient(circle, transparent 0 12px, rgba(207, 102, 255, 0.30) 13px 14px),
        radial-gradient(circle at 50% 50%, rgba(255, 79, 134, 0.78) 0 7px, rgba(154, 120, 255, 0.22) 8px 24px, transparent 40px),
        linear-gradient(135deg, rgba(255, 79, 134, 0.18), rgba(154, 120, 255, 0.24)) !important;
}

#profile-page .single-avatar:not(.has-avatar) .profile-default-icon {
    display: none !important;
}

/* Brand Soft QA cleanup: auxiliary home modules and assistant dialog. */
#home-page .hero-wave {
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: -22px !important;
    bottom: -5px !important;
    width: 318px !important;
    height: 102px !important;
    opacity: 0.58 !important;
    background:
        radial-gradient(ellipse at 82% 72%, rgba(var(--brand-accent-rgb), 0.18), transparent 42%),
        linear-gradient(115deg, transparent 0 16%, rgba(255, 255, 255, 0.22) 30%, rgba(var(--brand-purple-rgb), 0.24) 55%, rgba(var(--brand-accent-rgb), 0.34) 82%, transparent 100%),
        repeating-linear-gradient(166deg, transparent 0 8px, rgba(var(--brand-purple-rgb), 0.11) 9px 10px) !important;
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, 0.06) 16%, #000 48%, #000 88%, transparent 100%) !important;
    mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, 0.06) 16%, #000 48%, #000 88%, transparent 100%) !important;
    mix-blend-mode: multiply;
}

body.dark-mode #home-page .hero-wave {
    opacity: 0.76 !important;
    background:
        radial-gradient(ellipse at 86% 70%, rgba(147, 124, 255, 0.24), transparent 42%),
        linear-gradient(115deg, transparent 0 14%, rgba(255, 123, 155, 0.16) 30%, rgba(201, 149, 234, 0.24) 54%, rgba(147, 124, 255, 0.38) 84%, transparent 100%),
        repeating-linear-gradient(166deg, transparent 0 8px, rgba(201, 149, 234, 0.13) 9px 10px) !important;
    mix-blend-mode: screen;
}

#home-page .hero-pattern {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

#home-page .hero-background::before {
    background:
        radial-gradient(circle at 92% 10%, rgba(var(--brand-pink-rgb), 0.16), transparent 18%),
        radial-gradient(circle at 82% 74%, rgba(var(--brand-accent-rgb), 0.12), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 56%) !important;
}

body.dark-mode #home-page .hero-background::before {
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 79, 134, 0.16), transparent 18%),
        radial-gradient(circle at 82% 74%, rgba(147, 124, 255, 0.14), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 56%) !important;
}

#home-page .quick-experience.enhanced {
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--brand-pink-rgb), 0.10), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 253, 0.98)) !important;
    border-color: rgba(var(--brand-purple-rgb), 0.15) !important;
    box-shadow: var(--shadow-soft) !important;
}

body.dark-mode #home-page .quick-experience.enhanced {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 123, 155, 0.16), transparent 44%),
        linear-gradient(180deg, rgba(28, 24, 32, 0.98), rgba(20, 19, 25, 0.98)) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30) !important;
}

#home-page .quick-experience.enhanced::before {
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--secondary-color), transparent) !important;
    opacity: 0.88 !important;
}

#home-page .quick-experience.enhanced .demo-chat.enhanced-chat {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 250, 253, 0.82)) !important;
    border-color: rgba(var(--brand-purple-rgb), 0.14) !important;
}

body.dark-mode #home-page .quick-experience.enhanced .demo-chat.enhanced-chat {
    background:
        linear-gradient(180deg, rgba(36, 31, 41, 0.94), rgba(30, 26, 36, 0.96)) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

#home-page .quick-experience.enhanced .message-content,
#home-page .quick-experience.enhanced .chat-input,
#home-page .quick-experience.enhanced .input-container input {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(var(--brand-purple-rgb), 0.13) !important;
}

body.dark-mode #home-page .quick-experience.enhanced .message-content,
body.dark-mode #home-page .quick-experience.enhanced .chat-input,
body.dark-mode #home-page .quick-experience.enhanced .input-container input {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#home-page .features-section .feature-icon,
#home-page .feature-item.enhanced-feature .feature-icon {
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.20), rgba(var(--brand-purple-rgb), 0.20)) !important;
    color: var(--primary-color) !important;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.18) !important;
    box-shadow: 0 10px 22px rgba(var(--brand-pink-rgb), 0.12) !important;
}

body.dark-mode #home-page .features-section .feature-icon,
body.dark-mode #home-page .feature-item.enhanced-feature .feature-icon {
    background: linear-gradient(135deg, rgba(255, 123, 155, 0.20), rgba(201, 149, 234, 0.18)) !important;
    color: #ff8fac !important;
    border-color: rgba(255, 123, 155, 0.22) !important;
    box-shadow: 0 10px 24px rgba(255, 79, 134, 0.14) !important;
}

#home-page .features-section .feature-icon i,
#home-page .feature-item.enhanced-feature .feature-icon i {
    color: inherit !important;
}

.chat-assistant-dialog {
    padding: 16px 12px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 16px) !important;
    align-items: center !important;
}

.assistant-dialog-content.assistant-dialog-content-wide {
    width: min(calc(100vw - 24px), calc(var(--app-shell-width, 430px) - 20px), 560px) !important;
    max-width: min(calc(100vw - 24px), calc(var(--app-shell-width, 430px) - 20px), 560px) !important;
    max-height: calc(100dvh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 38px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
}

.assistant-dialog-content.assistant-dialog-content-wide .assistant-dialog-header {
    flex: 0 0 auto !important;
}

.assistant-dialog-content.assistant-dialog-content-wide .assistant-dialog-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px !important;
    gap: 12px !important;
    overscroll-behavior: contain;
}

.assistant-dialog-content.assistant-dialog-content-wide .assistant-tip,
.assistant-dialog-content.assistant-dialog-content-wide .assistant-tool-card,
.assistant-dialog-content.assistant-dialog-content-wide .assistant-tool-panel,
.assistant-dialog-content.assistant-dialog-content-wide .assistant-input,
.assistant-dialog-content.assistant-dialog-content-wide .assistant-textarea {
    border-color: var(--border-soft) !important;
}

body.dark-mode .assistant-dialog-content.assistant-dialog-content-wide .assistant-tip,
body.dark-mode .assistant-dialog-content.assistant-dialog-content-wide .assistant-tool-card,
body.dark-mode .assistant-dialog-content.assistant-dialog-content-wide .assistant-tool-panel {
    background: rgba(255, 255, 255, 0.055) !important;
}

@media (max-width: 430px) {
    .assistant-dialog-content.assistant-dialog-content-wide {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* Brand Soft hero cleanup: keep radar rings still, rotate only the scan beam. */
#home-page .hero-wave {
    right: -28px !important;
    bottom: -12px !important;
    width: 338px !important;
    height: 116px !important;
    opacity: 0.50 !important;
    background: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 122' preserveAspectRatio='none'><defs><linearGradient id='surface' x1='26' y1='92' x2='338' y2='62' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,218,239)' stop-opacity='0'/><stop offset='.34' stop-color='rgb(255,218,239)' stop-opacity='.06'/><stop offset='.58' stop-color='rgb(184,121,223)' stop-opacity='.20'/><stop offset='.80' stop-color='rgb(127,106,229)' stop-opacity='.36'/><stop offset='1' stop-color='rgb(98,113,255)' stop-opacity='.46'/></linearGradient><linearGradient id='edge' x1='12' y1='86' x2='340' y2='58' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,255,255)' stop-opacity='0'/><stop offset='.36' stop-color='rgb(255,255,255)' stop-opacity='.10'/><stop offset='.60' stop-color='rgb(255,230,248)' stop-opacity='.30'/><stop offset='.78' stop-color='rgb(190,120,255)' stop-opacity='.56'/><stop offset='1' stop-color='rgb(112,128,255)' stop-opacity='.72'/></linearGradient><filter id='soft' x='-8%' y='-30%' width='116%' height='160%'><feGaussianBlur stdDeviation='2.4'/></filter></defs><path d='M16 96C60 82 99 73 141 79C187 86 216 109 263 105C296 102 322 85 348 65L348 126L16 126Z' fill='url(%23surface)' opacity='.82' filter='url(%23soft)'/><path d='M42 101C86 88 126 80 168 87C211 94 238 111 282 106C307 103 328 90 348 74L348 122L42 122Z' fill='url(%23surface)' opacity='.56'/><path d='M12 88C60 74 102 55 148 64C196 73 229 101 279 93C305 89 327 76 348 58' fill='none' stroke='url(%23edge)' stroke-width='5.8' stroke-linecap='round' opacity='.11' filter='url(%23soft)'/><path d='M12 88C60 74 102 55 148 64C196 73 229 101 279 93C305 89 327 76 348 58' fill='none' stroke='url(%23edge)' stroke-width='.95' stroke-linecap='round' opacity='.50'/><path d='M34 101C80 89 121 76 164 83C208 91 240 109 286 101C311 97 331 83 348 70' fill='none' stroke='url(%23edge)' stroke-width='.42' stroke-linecap='round' opacity='.30'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.02) 18%, rgba(0, 0, 0, 0.36) 40%, #000 70%, rgba(0, 0, 0, 0.72) 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important;
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.02) 18%, rgba(0, 0, 0, 0.36) 40%, #000 70%, rgba(0, 0, 0, 0.72) 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important;
    filter: saturate(1.08) blur(0.05px);
    mix-blend-mode: normal;
}

body.dark-mode #home-page .hero-wave {
    opacity: 0.60 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 122' preserveAspectRatio='none'><defs><linearGradient id='surface' x1='26' y1='92' x2='338' y2='62' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='0'/><stop offset='.34' stop-color='rgb(255,95,143)' stop-opacity='.08'/><stop offset='.58' stop-color='rgb(199,93,240)' stop-opacity='.26'/><stop offset='.80' stop-color='rgb(127,94,255)' stop-opacity='.42'/><stop offset='1' stop-color='rgb(76,92,255)' stop-opacity='.52'/></linearGradient><linearGradient id='edge' x1='12' y1='86' x2='340' y2='58' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='0'/><stop offset='.36' stop-color='rgb(255,95,143)' stop-opacity='.16'/><stop offset='.60' stop-color='rgb(255,130,190)' stop-opacity='.38'/><stop offset='.78' stop-color='rgb(199,93,255)' stop-opacity='.66'/><stop offset='1' stop-color='rgb(84,92,255)' stop-opacity='.82'/></linearGradient><filter id='soft' x='-8%' y='-30%' width='116%' height='160%'><feGaussianBlur stdDeviation='2.4'/></filter></defs><path d='M16 96C60 82 99 73 141 79C187 86 216 109 263 105C296 102 322 85 348 65L348 126L16 126Z' fill='url(%23surface)' opacity='.90' filter='url(%23soft)'/><path d='M42 101C86 88 126 80 168 87C211 94 238 111 282 106C307 103 328 90 348 74L348 122L42 122Z' fill='url(%23surface)' opacity='.66'/><path d='M12 88C60 74 102 55 148 64C196 73 229 101 279 93C305 89 327 76 348 58' fill='none' stroke='url(%23edge)' stroke-width='5.8' stroke-linecap='round' opacity='.18' filter='url(%23soft)'/><path d='M12 88C60 74 102 55 148 64C196 73 229 101 279 93C305 89 327 76 348 58' fill='none' stroke='url(%23edge)' stroke-width='.95' stroke-linecap='round' opacity='.70'/><path d='M34 101C80 89 121 76 164 83C208 91 240 109 286 101C311 97 331 83 348 70' fill='none' stroke='url(%23edge)' stroke-width='.42' stroke-linecap='round' opacity='.42'/></svg>") !important;
    mix-blend-mode: screen;
}

#home-page .hero-background::after {
    right: -12px !important;
    top: 9px !important;
    width: 174px !important;
    height: 174px !important;
    border-radius: 50% !important;
    opacity: 0.95 !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.94) 0 4px, rgba(255, 95, 143, 0.64) 5px 11px, rgba(255, 95, 143, 0.16) 12px 22px, transparent 23px),
        radial-gradient(circle at 24% 42%, rgba(255, 255, 255, 0.82) 0 2.3px, transparent 2.6px),
        radial-gradient(circle at 82% 25%, rgba(255, 122, 160, 0.86) 0 3.1px, transparent 3.4px),
        radial-gradient(circle at 68% 79%, rgba(255, 122, 160, 0.82) 0 3px, transparent 3.4px),
        radial-gradient(circle at 35% 72%, rgba(255, 122, 160, 0.70) 0 2.2px, transparent 2.5px),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.38) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.38) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 15px, rgba(255, 255, 255, 0.42) 15.5px 16.5px, transparent 17px 100px),
        radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(255, 255, 255, 0.88) 59px 60px, transparent 61px) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    filter: drop-shadow(0 14px 28px rgba(255, 95, 143, 0.13)) !important;
    transform: none !important;
    animation: none !important;
}

body.dark-mode #home-page .hero-background::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.88) 0 4px, rgba(255, 95, 143, 0.76) 5px 11px, rgba(255, 95, 143, 0.20) 12px 22px, transparent 23px),
        radial-gradient(circle at 24% 42%, rgba(255, 255, 255, 0.76) 0 2.3px, transparent 2.6px),
        radial-gradient(circle at 82% 25%, rgba(255, 122, 160, 0.86) 0 3.1px, transparent 3.4px),
        radial-gradient(circle at 68% 79%, rgba(255, 122, 160, 0.82) 0 3px, transparent 3.4px),
        radial-gradient(circle at 35% 72%, rgba(255, 122, 160, 0.70) 0 2.2px, transparent 2.5px),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 95, 143, 0.22) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(255, 95, 143, 0.22) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 15px, rgba(255, 95, 143, 0.30) 15.5px 16.5px, transparent 17px 100px),
        radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(255, 95, 143, 0.74) 59px 60px, transparent 61px) !important;
    filter: drop-shadow(0 18px 32px rgba(255, 95, 143, 0.24)) !important;
}

#home-page .hero-background .hero-orbit {
    inset: auto !important;
    right: -12px !important;
    top: 9px !important;
    width: 174px !important;
    height: 174px !important;
    z-index: 4 !important;
    opacity: 0.96 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><defs><linearGradient id='fan' x1='80' y1='80' x2='135' y2='45' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='.56'/><stop offset='.36' stop-color='rgb(255,118,168)' stop-opacity='.34'/><stop offset='.74' stop-color='rgb(255,255,255)' stop-opacity='.66'/><stop offset='1' stop-color='rgb(147,124,255)' stop-opacity='0'/></linearGradient><linearGradient id='core' x1='80' y1='80' x2='135' y2='45' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)'/><stop offset='.58' stop-color='rgb(255,118,168)'/><stop offset='1' stop-color='rgb(255,255,255)'/></linearGradient><filter id='soft'><feGaussianBlur stdDeviation='1.05'/></filter></defs><path d='M80 80 L130 42 A64 64 0 0 1 142 55 Z' fill='url(%23fan)' opacity='.88' filter='url(%23soft)'/><line x1='80' y1='80' x2='135' y2='45' stroke='url(%23core)' stroke-width='7' stroke-linecap='round' opacity='.45' filter='url(%23soft)'/><line x1='80' y1='80' x2='135' y2='45' stroke='url(%23core)' stroke-width='1.8' stroke-linecap='round'/><line x1='80' y1='80' x2='130' y2='42' stroke='rgb(255,255,255)' stroke-opacity='.86' stroke-width='.72' stroke-linecap='round'/><circle cx='135' cy='45' r='2.1' fill='rgb(255,255,255)'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 12px rgba(255, 95, 143, 0.42));
    transform-origin: 50% 50% !important;
    animation: brandSoftRadarNeedle 5.8s linear infinite !important;
}

body.dark-mode #home-page .hero-background .hero-orbit {
    filter: drop-shadow(0 0 16px rgba(255, 95, 143, 0.58));
}

@keyframes brandSoftRadarNeedle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #home-page .hero-background .hero-orbit {
        animation: none !important;
    }
}

/* Brand Soft secondary-page cleanup. */
#about-page .contact-section {
    background:
        radial-gradient(circle at 78% 18%, rgba(var(--brand-purple-rgb), 0.12), transparent 34%),
        radial-gradient(circle at 18% 92%, rgba(var(--brand-pink-rgb), 0.08), transparent 36%),
        var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
}

body.dark-mode #about-page .contact-section {
    background:
        radial-gradient(circle at 76% 16%, rgba(201, 149, 234, 0.12), transparent 35%),
        radial-gradient(circle at 18% 88%, rgba(255, 123, 155, 0.08), transparent 36%),
        var(--card-bg) !important;
    border-color: var(--border-soft) !important;
    box-shadow: var(--shadow-dark) !important;
}

#about-page .contact-section .contact-btn {
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--brand-pink-rgb), 0.10), transparent 46%),
        rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(var(--brand-purple-rgb), 0.14) !important;
}

body.dark-mode #about-page .contact-section .contact-btn {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 123, 155, 0.10), transparent 46%),
        rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

.relationship-hero-card > * {
    position: relative;
    z-index: 1;
}

.relationship-hero-card h3,
.relationship-hero-card p {
    max-width: calc(100% - 128px) !important;
}

.relationship-hero-card::after {
    right: 10px !important;
    top: 30px !important;
    width: 112px !important;
    height: 112px !important;
    opacity: 0.36 !important;
    z-index: 0 !important;
}

body.dark-mode .relationship-hero-card::after {
    opacity: 0.42 !important;
}

.relationship-guide-card::before,
body.dark-mode .relationship-guide-card::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.86) 0 2.5px, rgba(147, 124, 255, 0.70) 3px 7px, rgba(147, 124, 255, 0.18) 8px 21px, transparent 22px),
        conic-gradient(from 308deg at 50% 50%, transparent 0deg, transparent 336deg, rgba(147, 124, 255, 0.08) 340deg, rgba(201, 149, 234, 0.58) 350deg, rgba(255, 255, 255, 0.52) 354deg, transparent 360deg),
        repeating-radial-gradient(circle at 50% 50%, transparent 0 12px, rgba(201, 149, 234, 0.34) 13px 14px, transparent 15px 80px) !important;
    opacity: 0.92 !important;
}

.relationship-guide-card .relationship-checkpoint-list span {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
}

.relationship-guide-card .relationship-checkpoint-list span::before {
    position: static !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    transform: none !important;
}

/* Brand Soft secondary QA pass: remove legacy blue-gray / crosshair artifacts. */
#home-page .hero-ribbon {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

.relationship-entry-card:not(.relationship-guide-card)::before,
body.dark-mode .relationship-entry-card:not(.relationship-guide-card)::before,
.relationship-guide-card::before,
body.dark-mode .relationship-guide-card::before {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'><defs><radialGradient id='core' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.92'/><stop offset='.28' stop-color='rgb(201,149,234)' stop-opacity='.78'/><stop offset='1' stop-color='rgb(147,124,255)' stop-opacity='0'/></radialGradient><linearGradient id='beam' x1='44' y1='44' x2='67' y2='20' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(147,124,255)' stop-opacity='.82'/><stop offset='.62' stop-color='rgb(201,149,234)' stop-opacity='.54'/><stop offset='1' stop-color='rgb(255,255,255)' stop-opacity='.36'/></linearGradient><filter id='soft'><feGaussianBlur stdDeviation='1.4'/></filter></defs><circle cx='44' cy='44' r='36' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.14' stroke-width='1.2'/><circle cx='44' cy='44' r='27' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.42' stroke-width='1.25'/><circle cx='44' cy='44' r='18' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.30' stroke-width='1'/><circle cx='44' cy='44' r='9.5' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.18' stroke-width='1'/><path d='M44 44 L65 20 A32 32 0 0 1 70 26 Z' fill='rgb(147,124,255)' fill-opacity='.12' filter='url(%23soft)'/><line x1='44' y1='44' x2='67' y2='20' stroke='url(%23beam)' stroke-width='2.1' stroke-linecap='round'/><circle cx='44' cy='44' r='11' fill='url(%23core)'/><circle cx='44' cy='44' r='3.8' fill='rgb(147,124,255)'/><circle cx='29' cy='38' r='1.7' fill='rgb(255,123,155)' fill-opacity='.52'/><circle cx='57' cy='56' r='1.9' fill='rgb(147,124,255)' fill-opacity='.42'/></svg>") !important;
    box-shadow: 0 12px 26px rgba(147, 124, 255, 0.08) !important;
}

body.dark-mode .relationship-entry-card:not(.relationship-guide-card)::before,
body.dark-mode .relationship-guide-card::before {
    filter: drop-shadow(0 0 14px rgba(147, 124, 255, 0.18)) !important;
}

.relationship-hero-card h3,
.relationship-hero-card p {
    max-width: calc(100% - 150px) !important;
}

.relationship-hero-card::after {
    right: -14px !important;
    top: 36px !important;
    width: 118px !important;
    height: 118px !important;
    opacity: 0.28 !important;
}

body.dark-mode .relationship-hero-card::after {
    opacity: 0.34 !important;
}

.relationship-guide-card .relationship-checkpoint-list {
    gap: 10px !important;
}

.relationship-guide-card .relationship-checkpoint-list span {
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    text-align: left !important;
}

.relationship-guide-card .relationship-checkpoint-list span::before {
    flex: 0 0 7px !important;
    width: 7px !important;
    height: 7px !important;
}

#profile-page .single-avatar:not(.has-avatar),
body.dark-mode #profile-page .single-avatar:not(.has-avatar) {
    background:
        repeating-radial-gradient(circle, transparent 0 12px, rgba(var(--brand-purple-rgb), 0.24) 13px 14px),
        radial-gradient(circle at 50% 50%, rgba(var(--brand-pink-rgb), 0.68) 0 6px, rgba(var(--brand-pink-rgb), 0.20) 7px 23px, transparent 40px),
        linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.18), rgba(var(--brand-purple-rgb), 0.22)) !important;
}

body.dark-mode #profile-page .single-avatar:not(.has-avatar) {
    background:
        repeating-radial-gradient(circle, transparent 0 12px, rgba(207, 102, 255, 0.30) 13px 14px),
        radial-gradient(circle at 50% 50%, rgba(255, 79, 134, 0.70) 0 6px, rgba(154, 120, 255, 0.22) 7px 23px, transparent 40px),
        linear-gradient(135deg, rgba(255, 79, 134, 0.18), rgba(154, 120, 255, 0.24)) !important;
}

.chat-assistant-dialog {
    z-index: 4000 !important;
    align-items: flex-start !important;
    padding: 14px 10px !important;
}

.assistant-dialog-content.assistant-dialog-content-wide {
    max-height: calc(100dvh - 28px) !important;
}

.assistant-dialog-content.assistant-dialog-content-wide .assistant-dialog-body {
    padding-bottom: 18px !important;
}

/* Brand Soft final QA fixes: legacy stripe cleanup, localized secondary surfaces. */
#home-page .hero-pattern,
#home-page .hero-ribbon {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

#home-page .hero-background::before {
    background:
        radial-gradient(circle at 86% 22%, rgba(var(--brand-pink-rgb), 0.13), transparent 22%),
        radial-gradient(circle at 79% 74%, rgba(var(--brand-accent-rgb), 0.14), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 62%) !important;
    opacity: 1 !important;
}

body.dark-mode #home-page .hero-background::before {
    background:
        radial-gradient(circle at 86% 22%, rgba(255, 79, 134, 0.10), transparent 22%),
        radial-gradient(circle at 78% 74%, rgba(154, 120, 255, 0.13), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 64%) !important;
}

#home-page .hero-background::after {
    animation: none !important;
    transform: none !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.94) 0 4px, rgba(255, 95, 143, 0.64) 5px 11px, rgba(255, 95, 143, 0.16) 12px 22px, transparent 23px),
        radial-gradient(circle at 24% 42%, rgba(255, 255, 255, 0.82) 0 2.3px, transparent 2.6px),
        radial-gradient(circle at 82% 25%, rgba(255, 122, 160, 0.86) 0 3.1px, transparent 3.4px),
        radial-gradient(circle at 68% 79%, rgba(255, 122, 160, 0.82) 0 3px, transparent 3.4px),
        radial-gradient(circle at 35% 72%, rgba(255, 122, 160, 0.70) 0 2.2px, transparent 2.5px),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.32) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.32) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        radial-gradient(circle at 50% 50%, transparent 0 38px, rgba(255, 255, 255, 0.32) 38.5px 39.5px, transparent 40px),
        radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(255, 95, 143, 0.48) 58.5px 60px, transparent 60.5px),
        radial-gradient(circle at 50% 50%, transparent 0 76px, rgba(255, 255, 255, 0.20) 76.5px 77.5px, transparent 78px) !important;
}

body.dark-mode #home-page .hero-background::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.88) 0 4px, rgba(255, 95, 143, 0.76) 5px 11px, rgba(255, 95, 143, 0.20) 12px 22px, transparent 23px),
        radial-gradient(circle at 24% 42%, rgba(255, 255, 255, 0.76) 0 2.3px, transparent 2.6px),
        radial-gradient(circle at 82% 25%, rgba(255, 122, 160, 0.86) 0 3.1px, transparent 3.4px),
        radial-gradient(circle at 68% 79%, rgba(255, 122, 160, 0.82) 0 3px, transparent 3.4px),
        radial-gradient(circle at 35% 72%, rgba(255, 122, 160, 0.70) 0 2.2px, transparent 2.5px),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 95, 143, 0.24) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(255, 95, 143, 0.24) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        radial-gradient(circle at 50% 50%, transparent 0 38px, rgba(255, 160, 196, 0.26) 38.5px 39.5px, transparent 40px),
        radial-gradient(circle at 50% 50%, transparent 0 58px, rgba(255, 95, 143, 0.66) 58.5px 60px, transparent 60.5px),
        radial-gradient(circle at 50% 50%, transparent 0 76px, rgba(255, 160, 196, 0.24) 76.5px 77.5px, transparent 78px) !important;
}

#home-page .hero-background .hero-orbit {
    animation: brandSoftRadarNeedle 5.8s linear infinite !important;
    transform-origin: 50% 50% !important;
}

#home-page .hero-wave {
    opacity: 0.40 !important;
    filter: blur(0.2px) saturate(1.1) !important;
}

body.dark-mode #home-page .hero-wave {
    opacity: 0.46 !important;
}

#about-page .contact-section,
#help-page .contact-section {
    background:
        radial-gradient(circle at 78% 18%, rgba(var(--brand-purple-rgb), 0.12), transparent 34%),
        radial-gradient(circle at 18% 92%, rgba(var(--brand-pink-rgb), 0.08), transparent 36%),
        var(--card-bg) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 28px !important;
    box-shadow: var(--shadow-soft) !important;
}

body.dark-mode #about-page .contact-section,
body.dark-mode #help-page .contact-section {
    background:
        radial-gradient(circle at 76% 16%, rgba(201, 149, 234, 0.12), transparent 35%),
        radial-gradient(circle at 18% 88%, rgba(255, 123, 155, 0.08), transparent 36%),
        var(--card-bg) !important;
    border-color: var(--border-soft) !important;
    box-shadow: var(--shadow-dark) !important;
}

#about-page .contact-section .contact-btn,
#help-page .contact-section .contact-btn {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 18px !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

body.dark-mode #about-page .contact-section .contact-btn,
body.dark-mode #help-page .contact-section .contact-btn {
    background: rgba(255, 255, 255, 0.055) !important;
}

.relationship-entry-card:not(.relationship-guide-card)::before,
body.dark-mode .relationship-entry-card:not(.relationship-guide-card)::before,
.relationship-guide-card::before,
body.dark-mode .relationship-guide-card::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'><defs><radialGradient id='core' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.88'/><stop offset='.26' stop-color='rgb(201,149,234)' stop-opacity='.72'/><stop offset='.72' stop-color='rgb(147,124,255)' stop-opacity='.16'/><stop offset='1' stop-color='rgb(147,124,255)' stop-opacity='0'/></radialGradient><linearGradient id='beam' x1='44' y1='44' x2='66' y2='21' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(147,124,255)' stop-opacity='.72'/><stop offset='.68' stop-color='rgb(201,149,234)' stop-opacity='.46'/><stop offset='1' stop-color='rgb(255,255,255)' stop-opacity='.30'/></linearGradient><filter id='soft'><feGaussianBlur stdDeviation='1.2'/></filter></defs><circle cx='44' cy='44' r='37' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.10' stroke-width='1.1'/><circle cx='44' cy='44' r='29' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.30' stroke-width='1.15'/><circle cx='44' cy='44' r='20' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.24' stroke-width='1'/><circle cx='44' cy='44' r='10' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.14' stroke-width='1'/><path d='M44 44 L64 22 A31 31 0 0 1 69 28 Z' fill='rgb(147,124,255)' fill-opacity='.10' filter='url(%23soft)'/><line x1='44' y1='44' x2='66' y2='21' stroke='url(%23beam)' stroke-width='1.8' stroke-linecap='round'/><circle cx='44' cy='44' r='11' fill='url(%23core)'/><circle cx='44' cy='44' r='3.2' fill='rgb(147,124,255)'/><circle cx='30' cy='39' r='1.7' fill='rgb(255,123,155)' fill-opacity='.48'/><circle cx='57' cy='56' r='1.8' fill='rgb(147,124,255)' fill-opacity='.36'/></svg>") !important;
}

.relationship-hero-card {
    overflow: hidden !important;
}

.relationship-hero-card h3,
.relationship-hero-card p {
    max-width: calc(100% - 158px) !important;
}

.relationship-hero-card::after {
    right: -28px !important;
    top: 28px !important;
    width: 124px !important;
    height: 124px !important;
    opacity: 0.20 !important;
    pointer-events: none !important;
}

body.dark-mode .relationship-hero-card::after {
    opacity: 0.28 !important;
}

.relationship-guide-card .relationship-checkpoint-list {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.relationship-guide-card .relationship-checkpoint-list span {
    padding: 10px 12px !important;
    gap: 8px !important;
}

.relationship-guide-card .relationship-checkpoint-list span::before {
    position: static !important;
    flex: 0 0 7px !important;
}

#profile-page .single-avatar:not(.has-avatar)::before,
#profile-page .single-avatar:not(.has-avatar)::after,
body.dark-mode #profile-page .single-avatar:not(.has-avatar)::before,
body.dark-mode #profile-page .single-avatar:not(.has-avatar)::after {
    display: none !important;
    content: none !important;
}

.assistant-dialog-content.assistant-dialog-content-wide {
    width: min(560px, calc(var(--app-shell-width, 430px) - 20px), calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
}

@media (max-width: 430px) {
    .relationship-hero-card h3,
    .relationship-hero-card p {
        max-width: calc(100% - 124px) !important;
    }

    .relationship-hero-card::after {
        right: -36px !important;
        top: 40px !important;
        width: 112px !important;
        height: 112px !important;
    }
}

/* Brand Soft review polish: remove remaining stripe/blue-gray artifacts. */
#home-page .hero-pattern,
#home-page .hero-ribbon {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

#home-page .hero-background::before {
    background:
        radial-gradient(circle at 86% 20%, rgba(var(--brand-pink-rgb), 0.14), transparent 24%),
        radial-gradient(circle at 83% 76%, rgba(var(--brand-accent-rgb), 0.12), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 62%) !important;
}

body.dark-mode #home-page .hero-background::before {
    background:
        radial-gradient(circle at 86% 20%, rgba(255, 79, 134, 0.12), transparent 24%),
        radial-gradient(circle at 82% 76%, rgba(147, 124, 255, 0.14), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 64%) !important;
}

#home-page .hero-wave {
    right: -30px !important;
    bottom: -9px !important;
    width: 340px !important;
    height: 112px !important;
    opacity: 0.46 !important;
    background: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 120' preserveAspectRatio='none'><defs><linearGradient id='surface' x1='18' y1='94' x2='338' y2='62' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,228,240)' stop-opacity='0'/><stop offset='.38' stop-color='rgb(255,210,238)' stop-opacity='.05'/><stop offset='.58' stop-color='rgb(184,121,223)' stop-opacity='.18'/><stop offset='.78' stop-color='rgb(127,106,229)' stop-opacity='.30'/><stop offset='1' stop-color='rgb(96,114,255)' stop-opacity='.42'/></linearGradient><linearGradient id='edge' x1='10' y1='84' x2='340' y2='56' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,255,255)' stop-opacity='0'/><stop offset='.40' stop-color='rgb(255,255,255)' stop-opacity='.06'/><stop offset='.60' stop-color='rgb(255,234,250)' stop-opacity='.24'/><stop offset='.78' stop-color='rgb(196,126,255)' stop-opacity='.48'/><stop offset='1' stop-color='rgb(108,126,255)' stop-opacity='.68'/></linearGradient><filter id='soft' x='-8%' y='-34%' width='116%' height='168%'><feGaussianBlur stdDeviation='2.2'/></filter></defs><path d='M6 96C54 83 92 72 136 77C181 82 215 109 265 105C298 102 322 84 348 64L348 122L6 122Z' fill='url(%23surface)' opacity='.86' filter='url(%23soft)'/><path d='M30 103C82 91 122 80 167 86C211 92 240 112 287 104C313 100 331 84 348 70L348 122L30 122Z' fill='url(%23surface)' opacity='.50'/><path d='M4 87C54 73 98 54 146 63C194 72 227 101 279 92C306 87 328 73 348 56' fill='none' stroke='url(%23edge)' stroke-width='5.4' stroke-linecap='round' opacity='.10' filter='url(%23soft)'/><path d='M4 87C54 73 98 54 146 63C194 72 227 101 279 92C306 87 328 73 348 56' fill='none' stroke='url(%23edge)' stroke-width='.82' stroke-linecap='round' opacity='.44'/><path d='M28 101C78 88 121 75 166 82C209 89 239 108 287 100C313 96 331 82 348 68' fill='none' stroke='url(%23edge)' stroke-width='.36' stroke-linecap='round' opacity='.22'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.03) 20%, rgba(0, 0, 0, 0.42) 43%, #000 73%, rgba(0, 0, 0, 0.70) 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.03) 20%, rgba(0, 0, 0, 0.42) 43%, #000 73%, rgba(0, 0, 0, 0.70) 88%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%) !important;
    filter: saturate(1.08) blur(0.05px) !important;
    mix-blend-mode: normal !important;
}

body.dark-mode #home-page .hero-wave {
    opacity: 0.56 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 120' preserveAspectRatio='none'><defs><linearGradient id='surface' x1='18' y1='94' x2='338' y2='62' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='0'/><stop offset='.38' stop-color='rgb(255,95,143)' stop-opacity='.06'/><stop offset='.58' stop-color='rgb(199,93,240)' stop-opacity='.22'/><stop offset='.78' stop-color='rgb(127,94,255)' stop-opacity='.36'/><stop offset='1' stop-color='rgb(76,92,255)' stop-opacity='.48'/></linearGradient><linearGradient id='edge' x1='10' y1='84' x2='340' y2='56' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='0'/><stop offset='.40' stop-color='rgb(255,95,143)' stop-opacity='.10'/><stop offset='.60' stop-color='rgb(255,130,190)' stop-opacity='.32'/><stop offset='.78' stop-color='rgb(199,93,255)' stop-opacity='.60'/><stop offset='1' stop-color='rgb(84,92,255)' stop-opacity='.78'/></linearGradient><filter id='soft' x='-8%' y='-34%' width='116%' height='168%'><feGaussianBlur stdDeviation='2.2'/></filter></defs><path d='M6 96C54 83 92 72 136 77C181 82 215 109 265 105C298 102 322 84 348 64L348 122L6 122Z' fill='url(%23surface)' opacity='.90' filter='url(%23soft)'/><path d='M30 103C82 91 122 80 167 86C211 92 240 112 287 104C313 100 331 84 348 70L348 122L30 122Z' fill='url(%23surface)' opacity='.58'/><path d='M4 87C54 73 98 54 146 63C194 72 227 101 279 92C306 87 328 73 348 56' fill='none' stroke='url(%23edge)' stroke-width='5.4' stroke-linecap='round' opacity='.16' filter='url(%23soft)'/><path d='M4 87C54 73 98 54 146 63C194 72 227 101 279 92C306 87 328 73 348 56' fill='none' stroke='url(%23edge)' stroke-width='.82' stroke-linecap='round' opacity='.62'/><path d='M28 101C78 88 121 75 166 82C209 89 239 108 287 100C313 96 331 82 348 68' fill='none' stroke='url(%23edge)' stroke-width='.36' stroke-linecap='round' opacity='.34'/></svg>") !important;
    mix-blend-mode: screen !important;
}

#home-page .hero-background::after {
    animation: none !important;
    transform: none !important;
}

#home-page .hero-background .hero-orbit {
    animation: brandSoftRadarNeedle 5.8s linear infinite !important;
    transform-origin: 50% 50% !important;
}

body.dark-mode #about-page .contact-section,
body.dark-mode #help-page .contact-section {
    background:
        radial-gradient(circle at 76% 16%, rgba(201, 149, 234, 0.13), transparent 35%),
        radial-gradient(circle at 18% 88%, rgba(255, 123, 155, 0.09), transparent 36%),
        #241f29 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Brand Soft acceptance fixes: keep the final app preview close to the approved prototype. */
#home-page .hero-ribbon,
#home-page .hero-pattern {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

#home-page .hero-background::before {
    background:
        radial-gradient(circle at 84% 24%, rgba(var(--brand-pink-rgb), 0.14), transparent 25%),
        radial-gradient(circle at 82% 78%, rgba(var(--brand-accent-rgb), 0.13), transparent 43%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.048), transparent 64%) !important;
    opacity: 1 !important;
}

body.dark-mode #home-page .hero-background::before {
    background:
        radial-gradient(circle at 84% 24%, rgba(255, 79, 134, 0.12), transparent 25%),
        radial-gradient(circle at 82% 78%, rgba(147, 124, 255, 0.14), transparent 43%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.024), transparent 64%) !important;
}

#home-page .hero-wave {
    right: -26px !important;
    bottom: -16px !important;
    width: 328px !important;
    height: 92px !important;
    opacity: 0.34 !important;
    filter: saturate(1.05) blur(0.08px) !important;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.02) 24%, rgba(0, 0, 0, 0.36) 48%, #000 78%, rgba(0, 0, 0, 0.54) 91%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 20%, #000 82%, transparent 100%) !important;
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.02) 24%, rgba(0, 0, 0, 0.36) 48%, #000 78%, rgba(0, 0, 0, 0.54) 91%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 20%, #000 82%, transparent 100%) !important;
}

body.dark-mode #home-page .hero-wave {
    opacity: 0.48 !important;
}

#home-page .hero-background::after {
    animation: none !important;
    transform: none !important;
}

#home-page .hero-background .hero-orbit {
    animation: brandSoftRadarNeedle 5.8s linear infinite !important;
    transform-origin: 50% 50% !important;
}

#home-page .relationship-entry-card:not(.relationship-guide-card)::before,
body.dark-mode #home-page .relationship-entry-card:not(.relationship-guide-card)::before,
.relationship-entry-card:not(.relationship-guide-card)::before,
body.dark-mode .relationship-entry-card:not(.relationship-guide-card)::before,
.relationship-guide-card::before,
body.dark-mode .relationship-guide-card::before {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'><defs><radialGradient id='core' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='rgb(255,255,255)' stop-opacity='.86'/><stop offset='.28' stop-color='rgb(201,149,234)' stop-opacity='.72'/><stop offset='.72' stop-color='rgb(147,124,255)' stop-opacity='.16'/><stop offset='1' stop-color='rgb(147,124,255)' stop-opacity='0'/></radialGradient><linearGradient id='beam' x1='44' y1='44' x2='66' y2='21' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(147,124,255)' stop-opacity='.70'/><stop offset='.68' stop-color='rgb(201,149,234)' stop-opacity='.44'/><stop offset='1' stop-color='rgb(255,255,255)' stop-opacity='.28'/></linearGradient><filter id='soft'><feGaussianBlur stdDeviation='1.2'/></filter></defs><circle cx='44' cy='44' r='37' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.10' stroke-width='1.1'/><circle cx='44' cy='44' r='29' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.28' stroke-width='1.15'/><circle cx='44' cy='44' r='20' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.22' stroke-width='1'/><circle cx='44' cy='44' r='10' fill='none' stroke='rgb(147,124,255)' stroke-opacity='.12' stroke-width='1'/><path d='M44 44 L64 22 A31 31 0 0 1 69 28 Z' fill='rgb(147,124,255)' fill-opacity='.10' filter='url(%23soft)'/><line x1='44' y1='44' x2='66' y2='21' stroke='url(%23beam)' stroke-width='1.8' stroke-linecap='round'/><circle cx='44' cy='44' r='11' fill='url(%23core)'/><circle cx='44' cy='44' r='3.1' fill='rgb(147,124,255)'/><circle cx='30' cy='39' r='1.7' fill='rgb(255,123,155)' fill-opacity='.46'/><circle cx='57' cy='56' r='1.8' fill='rgb(147,124,255)' fill-opacity='.34'/></svg>") !important;
    box-shadow: none !important;
}

.relationship-hero-card {
    overflow: hidden !important;
    padding-right: 148px !important;
}

.relationship-hero-card > * {
    position: relative !important;
    z-index: 1 !important;
}

.relationship-hero-card h3,
.relationship-hero-card p {
    max-width: 100% !important;
}

.relationship-hero-card::after {
    right: 18px !important;
    top: 44px !important;
    width: 118px !important;
    height: 118px !important;
    opacity: 0.20 !important;
    pointer-events: none !important;
}

body.dark-mode .relationship-hero-card::after {
    opacity: 0.24 !important;
}

.relationship-guide-card::before {
    left: 22px !important;
    top: 52% !important;
    transform: translateY(-50%) !important;
}

.relationship-guide-card .relationship-checkpoint-list {
    margin-left: 0 !important;
    padding-left: 0 !important;
    gap: 10px !important;
}

.relationship-guide-card .relationship-checkpoint-list span {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    text-align: left !important;
}

.relationship-guide-card .relationship-checkpoint-list span::before {
    position: static !important;
    flex: 0 0 7px !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    transform: none !important;
}

#about-page .contact-section,
#help-page .contact-section {
    background:
        radial-gradient(circle at 78% 18%, rgba(var(--brand-purple-rgb), 0.12), transparent 34%),
        radial-gradient(circle at 18% 92%, rgba(var(--brand-pink-rgb), 0.08), transparent 36%),
        #ffffff !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 28px !important;
    box-shadow: var(--shadow-soft) !important;
}

body.dark-mode #about-page .contact-section,
body.dark-mode #help-page .contact-section {
    background:
        radial-gradient(circle at 76% 16%, rgba(201, 149, 234, 0.13), transparent 35%),
        radial-gradient(circle at 18% 88%, rgba(255, 123, 155, 0.09), transparent 36%),
        #241f29 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#profile-page .single-avatar:not(.has-avatar)::before,
#profile-page .single-avatar:not(.has-avatar)::after,
#profile-page .single-avatar:not(.has-avatar) .profile-default-icon {
    display: none !important;
    content: none !important;
}

.chat-assistant-dialog {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 12px max(12px, env(safe-area-inset-left)) calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 14px) !important;
}

.assistant-dialog-content.assistant-dialog-content-wide {
    width: min(560px, calc(var(--app-shell-width, 430px) - 22px), calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 32px) !important;
    overflow: hidden !important;
}

.assistant-dialog-content.assistant-dialog-content-wide .assistant-dialog-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px !important;
    overscroll-behavior: contain !important;
}

.assistant-dialog-content.assistant-dialog-content-wide .assistant-tools-grid {
    grid-template-columns: 1fr !important;
}

.assistant-dialog-content.assistant-dialog-content-wide .assistant-tool-card,
.assistant-dialog-content.assistant-dialog-content-wide .assistant-tool-panel,
.assistant-dialog-content.assistant-dialog-content-wide .assistant-input,
.assistant-dialog-content.assistant-dialog-content-wide .assistant-textarea {
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 430px) {
    .relationship-hero-card {
        padding-right: 116px !important;
    }

    .relationship-hero-card::after {
        right: 12px !important;
        top: 48px !important;
        width: 98px !important;
        height: 98px !important;
    }

    .relationship-guide-card::before {
        left: 18px !important;
        width: 82px !important;
        height: 82px !important;
    }
}

/* Relationship radar alignment: center decorative radar assets inside their
   reserved visual lanes instead of pinning them to an edge. */
.relationship-hero-card::after {
    right: 30px !important;
    top: 50% !important;
    width: 104px !important;
    height: 104px !important;
    transform: translateY(-50%) !important;
    opacity: 0.22 !important;
}

body.dark-mode .relationship-hero-card::after {
    opacity: 0.28 !important;
}

.relationship-guide-card::before {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 76px !important;
    height: 76px !important;
    transform: none !important;
}

@media (max-width: 430px) {
    .relationship-hero-card::after {
        right: 22px !important;
        top: 50% !important;
        width: 88px !important;
        height: 88px !important;
    }

    .relationship-guide-card::before {
        position: static !important;
        justify-self: center !important;
        align-self: center !important;
        width: 70px !important;
        height: 70px !important;
        transform: none !important;
    }
}

/* Home shell layout guard: the web viewport can be desktop-wide while the app
   itself remains a 430px mobile shell. Keep dense home modules inside that shell. */
#home-page {
    overflow-x: hidden !important;
}

#home-page .hero-carousel {
    height: 286px !important;
    min-height: 286px !important;
    overflow: hidden !important;
}

#home-page .hero-slide {
    min-height: 286px !important;
    padding: 15px 16px 16px !important;
}

#home-page .hero-content {
    width: min(58%, 230px) !important;
    max-width: 230px !important;
}

#home-page .hero-content h2,
html[lang^="en"] #home-page .hero-content h2 {
    font-size: 17px !important;
    line-height: 1.14 !important;
    margin: 7px 0 6px !important;
}

#home-page .hero-content p,
html[lang^="en"] #home-page .hero-content p {
    margin-bottom: 8px !important;
}

#home-page .hero-stats {
    gap: 18px !important;
    margin-bottom: 9px !important;
}

#home-page .hero-cta-btn {
    position: relative !important;
    z-index: 6 !important;
}

#home-page .carousel-pagination {
    bottom: 9px !important;
}

#home-page .funnel-card {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 11px 12px 12px !important;
}

#home-page .funnel-card-copy {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 8px !important;
}

#home-page .funnel-card-copy h3 {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

#home-page .funnel-card-copy h3 span {
    display: inline !important;
    min-width: 0 !important;
}

#home-page .funnel-card-copy h3 i {
    flex: 0 0 auto !important;
}

#home-page .funnel-bar-chart {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#home-page .funnel-bar {
    grid-template-columns: 24px minmax(64px, 78px) minmax(0, 72px) minmax(86px, 1fr) !important;
    column-gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
}

#home-page .funnel-bar-label,
#home-page .funnel-bar-badge,
#home-page .funnel-track {
    min-width: 0 !important;
}

#home-page .funnel-track {
    width: 100% !important;
}

#home-page .home-phase-grid {
    width: 100% !important;
    min-width: 0 !important;
}

/* Chat media upload guard: uploaded screenshots are rich content, not text inside
   a paragraph. Keep the preview inside the 430px app shell and above the input. */
#chat-page #chat-messages {
    overflow-x: hidden !important;
    padding-bottom: 18px !important;
}

#chat-page .message {
    min-width: 0 !important;
}

#chat-page .message-content {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

#chat-page .message.media-message {
    max-width: calc(100% - 48px) !important;
}

#chat-page .message.media-message .message-content {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: min(260px, calc(100vw - 112px)) !important;
    padding: 10px !important;
    overflow: hidden !important;
}

#chat-page .chat-attachment-progress .message-content,
#chat-page .chat-reply-progress .message-content {
    color: var(--text-secondary) !important;
    font-size: 13px !important;
}

#chat-page .chat-attachment-progress .message-content::before,
#chat-page .chat-reply-progress .message-content::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--gradient-primary);
    animation: pulse 1.2s ease-in-out infinite;
}

#chat-page .message-content,
#chat-page .message-content p,
#chat-page .message-content .ai-formatted-text,
#chat-page .message-content .message-body,
#chat-page .message-content .chat-sent-attachment-text,
#chat-page .message-content pre,
#chat-page .message-content code,
#chat-page .message-content blockquote,
#chat-page .message-content li {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

#chat-page .message.has-message-actions {
    display: grid !important;
    gap: 2px !important;
}

#chat-page .message.user-message.has-message-actions {
    justify-items: end;
}

#chat-page .message.ai-message.has-message-actions {
    justify-items: start;
}

#chat-page .message.has-message-actions .message-content {
    max-width: 100%;
}

#chat-page .message-actions {
    display: flex;
    align-items: center;
    margin-top: 0;
}

#chat-page .message-copy-btn {
    min-width: 40px;
    min-height: 36px;
    padding: 6px 9px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.72;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

#chat-page .message-report-btn {
    min-width: 40px;
    min-height: 36px;
    padding: 6px 9px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.72;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

#chat-page .message-copy-btn:active,
#chat-page .message-copy-btn.is-copied,
#chat-page .message-report-btn:active {
    color: var(--primary-color);
    background: rgba(var(--brand-pink-rgb), 0.1);
    opacity: 1;
}

#chat-page .message-copy-btn:focus-visible,
#chat-page .message-report-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    opacity: 1;
}

#chat-page .message-copy-btn:disabled,
#chat-page .message-report-btn:disabled {
    cursor: default;
}

@media (hover: hover) {
    #chat-page .message-copy-btn:hover,
    #chat-page .message-report-btn:hover {
        color: var(--primary-color);
        background: rgba(var(--brand-pink-rgb), 0.08);
        opacity: 1;
    }
}

#chat-page .message.media-message .message-body {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

#chat-page .message-image {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

#chat-page .message-image img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: min(360px, 44vh) !important;
    object-fit: contain !important;
    border-radius: 16px !important;
}

#chat-page .message.media-message.chat-attachment-turn-message .message-content {
    display: grid !important;
    gap: 10px !important;
    width: min(286px, calc(100vw - 104px)) !important;
    max-width: min(286px, calc(100vw - 104px)) !important;
}

#chat-page .chat-sent-attachment-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    min-width: 0;
}

#chat-page .chat-sent-attachment-gallery.count-1 {
    grid-template-columns: minmax(0, 1fr);
}

#chat-page .chat-sent-attachment-gallery.count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#chat-page .chat-sent-attachment-preview {
    display: block;
    min-width: 0;
    height: 112px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    background: rgba(8, 9, 12, 0.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#chat-page .chat-sent-attachment-gallery.count-3 .chat-sent-attachment-preview {
    height: 104px;
}

#chat-page .chat-sent-attachment-preview .message-image,
#chat-page .chat-sent-attachment-preview .message-image img {
    width: 100% !important;
    height: 100% !important;
}

#chat-page .chat-sent-attachment-preview .message-image img {
    max-height: none !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

#chat-page .chat-sent-attachment-preview:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 2px;
}

#chat-page .chat-sent-attachment-placeholder {
    grid-column: 1 / -1;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(8, 9, 12, 0.18);
    color: inherit;
    font-size: 13px;
    font-weight: 700;
}

#chat-page .chat-sent-attachment-placeholder i {
    font-size: 17px;
}

#chat-page .chat-sent-attachment-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.chat-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: rgba(8, 9, 12, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.chat-image-lightbox.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.chat-image-lightbox img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100dvh - max(96px, env(safe-area-inset-top)) - env(safe-area-inset-bottom));
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
    transform: scale(0.97);
    transition: transform 180ms ease;
}

.chat-image-lightbox.is-visible img {
    transform: scale(1);
}

.chat-image-lightbox-close {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 28px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chat-image-lightbox-close:active {
    transform: scale(0.96);
}

body.chat-image-lightbox-open {
    overflow: hidden !important;
}

#chat-page .chat-input-wrapper {
    position: relative !important;
    z-index: 5 !important;
    background: transparent !important;
}

/* Structured AI reply rendering: keep streamed model text readable after the
   typing animation completes. */
#chat-page .ai-formatted-text {
    display: block !important;
    width: 100% !important;
}

#chat-page .ai-formatted-reply {
    display: grid !important;
    gap: 10px !important;
    line-height: 1.62 !important;
}

#chat-page .ai-formatted-reply h4 {
    margin: 8px 0 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #211941 !important;
}

#chat-page .ai-formatted-reply h4:first-child {
    margin-top: 0 !important;
}

#chat-page .ai-formatted-reply p {
    margin: 0 !important;
    color: #332d4f !important;
}

#chat-page .ai-reply-list {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    padding-left: 22px !important;
}

#chat-page .ai-reply-list li {
    padding-left: 2px !important;
    color: #2d2748 !important;
}

body.dark-mode #chat-page .ai-formatted-reply h4,
body.dark-mode #chat-page .ai-formatted-reply p,
body.dark-mode #chat-page .ai-reply-list li {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* UI polish pass: chat utilities and discover article reading surface. */
#chat-page .chat-sessions {
    display: flex !important;
    flex-direction: column !important;
    background:
        radial-gradient(circle at 85% 0%, rgba(var(--brand-purple-rgb), 0.08), transparent 34%),
        rgba(255, 255, 255, 0.96) !important;
}

#chat-page .sessions-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

#chat-page .chat-sessions.is-empty .sessions-list {
    display: none !important;
}

#chat-page .sessions-empty-state {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 24px 20px 34px !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#chat-page .sessions-loading-state {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 24px 20px 34px !important;
    background: transparent !important;
}

#chat-page .sessions-empty-state i {
    font-size: 36px !important;
    color: rgba(var(--brand-purple-rgb), 0.42) !important;
    opacity: 1 !important;
}

#chat-page .sessions-empty-state p {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}

.quick-replies-panel {
    background:
        radial-gradient(circle at 86% 0%, rgba(var(--brand-purple-rgb), 0.08), transparent 32%),
        rgba(255, 255, 255, 0.98) !important;
}

.quick-replies-panel .panel-header {
    padding: 16px 18px 12px !important;
    border-bottom-color: rgba(var(--brand-purple-rgb), 0.10) !important;
}

.quick-replies-panel .panel-header h3 {
    font-size: 18px !important;
    letter-spacing: 0 !important;
}

.reply-category-card {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(var(--brand-purple-rgb), 0.10) !important;
    box-shadow: none !important;
}

.reply-category-card h4 {
    margin-bottom: 10px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
}

.template-item {
    background: rgba(250, 248, 255, 0.92) !important;
    border: 1px solid rgba(var(--brand-purple-rgb), 0.08) !important;
    box-shadow: none !important;
    line-height: 1.52 !important;
}

body.dark-mode .quick-replies-panel,
body.dark-mode #chat-page .chat-sessions {
    background:
        radial-gradient(circle at 86% 0%, rgba(147, 124, 255, 0.10), transparent 32%),
        var(--card-bg) !important;
}

body.dark-mode .reply-category-card,
body.dark-mode .template-item {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body:not(.dark-mode) #content-detail-page,
body:not(.dark-mode) #content-detail-page .discover-detail-page {
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--brand-pink-rgb), 0.08), transparent 30%),
        linear-gradient(180deg, #fff8fb 0%, #fff 42%, #fbf8ff 100%) !important;
}

body:not(.dark-mode) .discover-detail-hero,
body:not(.dark-mode) .discover-detail-hero.accent-rose,
body:not(.dark-mode) .discover-detail-hero.accent-violet,
body:not(.dark-mode) .discover-detail-hero.accent-amber,
body:not(.dark-mode) .discover-detail-hero.accent-coral,
body:not(.dark-mode) .discover-detail-hero.accent-mint,
body:not(.dark-mode) .discover-detail-hero.accent-sky,
body:not(.dark-mode) .discover-detail-hero.accent-blue {
    background:
        radial-gradient(circle at 92% 12%, rgba(var(--brand-purple-rgb), 0.12), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 244, 249, 0.96) 50%, rgba(247, 243, 255, 0.96) 100%) !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(var(--brand-purple-rgb), 0.12) !important;
    box-shadow: 0 18px 34px rgba(59, 43, 99, 0.09) !important;
}

body:not(.dark-mode) .discover-detail-hero h1 {
    color: #211941 !important;
}

body:not(.dark-mode) .discover-detail-summary {
    color: #766b92 !important;
}

body:not(.dark-mode) .discover-detail-avatar {
    background: rgba(var(--brand-pink-rgb), 0.12) !important;
    color: var(--primary-color) !important;
}

.discover-article {
    padding: 28px 24px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(var(--brand-purple-rgb), 0.10) !important;
    box-shadow: 0 18px 34px rgba(59, 43, 99, 0.075) !important;
}

.discover-article p,
.discover-article li {
    margin: 0 0 13px !important;
    font-size: 15.5px !important;
    line-height: 1.86 !important;
    color: #5d5578 !important;
}

.discover-article h3 {
    margin: 28px 0 12px !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    color: #211941 !important;
}

.discover-article h3:first-child {
    margin-top: 0 !important;
}

.discover-article strong {
    color: #33294f !important;
    font-weight: 800 !important;
}

.discover-article ul,
.discover-article ol {
    display: grid !important;
    gap: 8px !important;
    margin: 0 0 16px 1.1em !important;
}

.discover-prompt-card i {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--primary-color) !important;
}

body.dark-mode .discover-article {
    background: var(--card-bg) !important;
}

body.dark-mode .discover-article p,
body.dark-mode .discover-article li,
body.dark-mode .discover-article strong,
body.dark-mode .discover-article h3 {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Home hero radar fit: keep the radar fully inside the card and reduce the
   empty lower area on compact mobile previews. */
#home-page .hero-carousel {
    height: 268px !important;
    min-height: 268px !important;
}

#home-page .hero-slide {
    min-height: 268px !important;
    padding: 15px 16px 13px !important;
}

#home-page .hero-content {
    width: min(56%, 220px) !important;
    max-width: 220px !important;
}

#home-page .hero-background::after {
    right: 4px !important;
    top: 20px !important;
    width: 158px !important;
    height: 158px !important;
}

#home-page .hero-background .hero-orbit {
    right: 4px !important;
    top: 20px !important;
    width: 158px !important;
    height: 158px !important;
}

#home-page .hero-wave {
    right: -18px !important;
    bottom: -20px !important;
    width: 292px !important;
    height: 92px !important;
}

#home-page .hero-stats {
    margin-bottom: 8px !important;
}

#home-page .carousel-pagination {
    bottom: 7px !important;
}

@media (max-width: 380px) {
    #home-page .hero-carousel {
        height: 262px !important;
        min-height: 262px !important;
    }

    #home-page .hero-slide {
        min-height: 262px !important;
    }

    #home-page .hero-background::after,
    #home-page .hero-background .hero-orbit {
        right: 2px !important;
        top: 22px !important;
        width: 148px !important;
        height: 148px !important;
    }
}

/* App Store preview parity: login/register should occupy the same mobile shell
   as the signed-in app, instead of appearing as a smaller card inside it. */
#login-page .page-content,
#register-page .page-content {
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
}

#login-page .login-container,
#register-page .register-container {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: max(48px, calc(env(safe-area-inset-top) + 36px)) 28px 32px !important;
}

#login-page .social-login-section,
#login-page .auth-form,
#login-page .auth-divider,
#login-page .auth-links,
#login-page .test-account-hint,
#register-page .auth-form,
#register-page .auth-divider,
#register-page .social-login-section,
#register-page .auth-links {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#login-page .auth-form,
#register-page .auth-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#login-page .form-group,
#register-page .form-group {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#login-page .input-wrapper,
#register-page .input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 50px !important;
    border: 1px solid rgba(var(--brand-purple-rgb), 0.16) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#login-page .input-wrapper:focus-within,
#register-page .input-wrapper:focus-within {
    border-color: rgba(var(--brand-pink-rgb), 0.44) !important;
    box-shadow: 0 0 0 4px rgba(var(--brand-pink-rgb), 0.10) !important;
}

#login-page .form-group input,
#register-page .form-group input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    padding: 14px 44px 14px 16px !important;
    box-sizing: border-box !important;
}

#login-page .password-wrapper input,
#register-page .password-wrapper input {
    padding-right: 58px !important;
}

#login-page .password-toggle,
#register-page .password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    z-index: 4 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

#login-page .auth-local-eye,
#register-page .auth-local-eye {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

#login-page .auth-local-eye::before,
#register-page .auth-local-eye::before {
    content: none !important;
}

#login-page .auth-local-eye svg,
#register-page .auth-local-eye svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#login-page .auth-local-eye .auth-eye-slash,
#register-page .auth-local-eye .auth-eye-slash {
    opacity: 0;
}

#login-page .auth-local-eye.fa-eye-slash .auth-eye-slash,
#register-page .auth-local-eye.fa-eye-slash .auth-eye-slash {
    opacity: 1;
}

#login-page .password-toggle:hover,
#register-page .password-toggle:hover,
#login-page .password-toggle:focus-visible,
#register-page .password-toggle:focus-visible {
    background: rgba(var(--brand-pink-rgb), 0.10) !important;
    color: var(--primary-color) !important;
    outline: none !important;
}

body.dark-mode #login-page .input-wrapper,
body.dark-mode #register-page .input-wrapper {
    background: rgba(28, 31, 39, 0.86) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

#register-page .page-header {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr) !important;
    align-items: center !important;
}

#register-page .page-header .page-title {
    justify-self: center !important;
}

.auth-header-login-btn {
    justify-self: start;
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

body.dark-mode .auth-header-login-btn {
    background: rgba(28, 31, 39, 0.86);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-color);
}

/* In-app account action dialog for logout/delete flows. */
.app-action-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px 14px calc(env(safe-area-inset-bottom) + 18px);
    background: rgba(25, 19, 63, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.app-action-dialog-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.app-action-dialog {
    width: min(calc(100vw - 28px), calc(var(--app-shell-width, 430px) - 28px));
    max-width: 402px;
    padding: 20px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 0%, rgba(var(--brand-purple-rgb), 0.10), transparent 32%),
        var(--card-bg);
    border: 1px solid var(--border-soft);
    box-shadow: 0 24px 70px rgba(25, 19, 63, 0.24);
    color: var(--text-color);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.16s ease;
}

.app-action-dialog-backdrop.visible .app-action-dialog {
    transform: translateY(0) scale(1);
}

.app-action-dialog-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    color: var(--text-color);
}

.app-action-dialog-message {
    margin: 8px 0 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.app-action-dialog-backdrop.has-input {
    align-items: center;
}

.app-action-dialog.has-input .app-action-dialog-message {
    margin-bottom: 14px;
}

.app-action-dialog-field {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.app-action-dialog-label {
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
}

.app-action-dialog-input {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    outline: none;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    font-size: 16px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.app-action-dialog-input:focus {
    border-color: rgba(var(--brand-pink-rgb), 0.58);
    box-shadow: 0 0 0 3px rgba(var(--brand-pink-rgb), 0.13);
}

.app-action-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.app-action-dialog-btn {
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.app-action-dialog-btn:disabled {
    opacity: 0.42;
    cursor: default;
    box-shadow: none !important;
}

.app-action-dialog-btn.cancel {
    background: var(--bg-secondary);
    color: var(--text-color);
}

.app-action-dialog-btn.confirm {
    border: 0;
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(var(--brand-pink-rgb), 0.20);
}

.app-action-dialog.danger .app-action-dialog-btn.confirm {
    background: linear-gradient(135deg, #ef4444 0%, #ff4f86 100%);
}

body.dark-mode .app-action-dialog-backdrop {
    background: rgba(0, 0, 0, 0.50);
}

body.dark-mode .app-action-dialog-btn.cancel {
    background: var(--card-bg-elevated);
}

body.dark-mode .app-action-dialog-input {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.11);
}

/* Capacitor iOS shell: keep the native viewport inside the safe area and stop
   the WKWebView background from showing during rubber-band scroll. */
html[data-platform="capacitor"] {
    --app-shell-width: 100vw;
    --app-fixed-left: 0px;
    --native-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --native-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    --native-tab-height: calc(var(--bottom-nav-height) + var(--native-safe-bottom));
    --keyboard-height: 0px;
    --app-viewport-height: calc(var(--vh, 1vh) * 100);
    height: 100%;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    background: var(--app-wallpaper) !important;
}

html[data-platform="capacitor"]:has(body.dark-mode) {
    --app-wallpaper:
        radial-gradient(circle at 80% 0%, rgba(193, 108, 255, 0.12), transparent 34%),
        linear-gradient(180deg, #0f1018 0%, #090a0f 100%);
    background: var(--app-wallpaper) !important;
}

html[data-platform="capacitor"] body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: var(--app-viewport-height);
    min-height: var(--app-viewport-height);
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: manipulation;
    background: var(--app-wallpaper) !important;
}

html[data-platform="capacitor"] .app-container {
    width: 100vw !important;
    max-width: none !important;
    height: var(--app-viewport-height) !important;
    min-height: var(--app-viewport-height) !important;
    max-height: var(--app-viewport-height) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--app-wallpaper) !important;
}

html[data-platform="capacitor"] .app-content {
    position: fixed !important;
    inset: var(--native-safe-top) 0 0 !important;
    width: 100vw !important;
    height: auto !important;
    overflow: hidden !important;
}

html[data-platform="capacitor"] .app-page {
    position: absolute !important;
    top: 0 !important;
    bottom: var(--native-tab-height) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    padding-bottom: 16px !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

html[data-platform="capacitor"] .app-page[data-hide-nav="true"],
html[data-platform="capacitor"] #login-page,
html[data-platform="capacitor"] #register-page {
    bottom: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
}

html[data-platform="capacitor"] #home-page .home-topbar {
    padding-top: 16px !important;
}

html[data-platform="capacitor"] #home-page {
    padding-bottom: 12px !important;
}

html[data-platform="capacitor"] #discover-page .discover-shell {
    padding-bottom: 22px !important;
}

html[data-platform="capacitor"] #profile-page .profile-shell {
    padding-bottom: 18px !important;
}

html[data-platform="capacitor"] .app-page[data-hide-nav="true"] > .page-header,
html[data-platform="capacitor"] #register-page > .page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 150 !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

html[data-platform="capacitor"] #content-detail-page .discover-detail-page {
    padding-top: 0 !important;
    padding-bottom: calc(var(--native-safe-bottom) + 20px) !important;
}

html[data-platform="capacitor"] #content-detail-page .discover-detail-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 150 !important;
    min-height: 56px !important;
    margin: 0 0 14px !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
}

html[data-platform="capacitor"] #relationship-analysis-page .relationship-analysis-shell,
html[data-platform="capacitor"] #relationship-analysis-result-page .relationship-result-shell {
    padding-bottom: calc(var(--native-safe-bottom) + 24px) !important;
}

html[data-platform="capacitor"] .app-page[data-hide-nav="true"] > .page-content {
    padding-bottom: calc(var(--native-safe-bottom) + 20px) !important;
}

html[data-platform="capacitor"] .page-header .back-btn,
html[data-platform="capacitor"] .discover-detail-header .back-btn,
html[data-platform="capacitor"] .article-back-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html[data-platform="capacitor"] .bottom-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: var(--native-tab-height) !important;
    padding-bottom: var(--native-safe-bottom) !important;
    transform: none !important;
    transition: transform 180ms ease, opacity 180ms ease !important;
    border-radius: 24px 24px 0 0 !important;
}

html[data-platform="capacitor"][data-native-platform="android"] .bottom-nav {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html[data-platform="capacitor"] body.keyboard-visible .bottom-nav {
    transform: translateY(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html[data-platform="capacitor"] #chat-page {
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html[data-platform="capacitor"] body.keyboard-visible #chat-page {
    bottom: var(--keyboard-height, 0px) !important;
}

html[data-platform="capacitor"] #chat-page .chat-page {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html[data-platform="capacitor"] #chat-page .chat-content {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
    transition: padding-bottom 180ms ease !important;
}

html[data-platform="capacitor"] body.keyboard-visible #chat-page .chat-content {
    padding-bottom: 10px !important;
}

html[data-platform="capacitor"] #chat-page .chat-workspace-head,
html[data-platform="capacitor"] #chat-page .chat-input-wrapper {
    flex: 0 0 auto !important;
}

html[data-platform="capacitor"] #chat-page .chat-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html[data-platform="capacitor"] #chat-page #chat-messages {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

html[data-platform="capacitor"] body.keyboard-visible #chat-page #chat-messages {
    max-height: none !important;
    padding-bottom: 12px !important;
}

html[data-platform="capacitor"] #chat-page .chat-input-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    z-index: 6 !important;
}

html[data-platform="capacitor"] #profile-page .profile-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

/* Profile QA refinements for the app-shell preview. */
#profile-page .profile-exit-card {
    display: grid !important;
    gap: 12px !important;
    margin-top: 0 !important;
}

#profile-page .profile-account-actions-heading {
    margin-bottom: 0 !important;
}

#profile-page .profile-account-actions-list {
    display: grid !important;
    gap: 10px !important;
}

#profile-page .profile-exit-card .delete-account-item {
    margin-top: 0 !important;
    border-color: rgba(var(--brand-pink-rgb), 0.22) !important;
    background:
        radial-gradient(circle at top right, rgba(var(--brand-pink-rgb), 0.12), transparent 34%),
        rgba(255, 255, 255, 0.92) !important;
}

#profile-page .profile-exit-card .delete-account-item .menu-icon {
    background: rgba(var(--brand-pink-rgb), 0.13) !important;
    color: var(--primary-color) !important;
}

#profile-page .profile-exit-card .delete-account-item .menu-title,
#profile-page .profile-exit-card .delete-account-item .menu-value {
    color: var(--text-color) !important;
}

#profile-page .profile-exit-card .delete-account-item .menu-behavior-pill {
    background: rgba(var(--brand-pink-rgb), 0.12) !important;
    color: var(--primary-color) !important;
}

body.dark-mode #profile-page .profile-exit-card .delete-account-item {
    background:
        radial-gradient(circle at top right, rgba(255, 123, 155, 0.14), transparent 36%),
        rgba(28, 31, 39, 0.94) !important;
}

#edit-profile-page .profile-radio-field {
    min-height: 118px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

#edit-profile-page .profile-radio-field .radio-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    min-height: 58px !important;
    margin-top: 12px !important;
}

#edit-profile-page .profile-radio-field .radio-option {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

#edit-profile-page .profile-radio-field .radio-option input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(var(--brand-purple-rgb), 0.44) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

#edit-profile-page .profile-radio-field .radio-option input[type="radio"]:checked {
    border-color: var(--primary-color) !important;
    background:
        radial-gradient(circle at 50% 50%, var(--primary-color) 0 4px, transparent 4.8px),
        rgba(var(--brand-pink-rgb), 0.10) !important;
}

#edit-profile-page .profile-radio-field .radio-option input[type="radio"]:focus,
#edit-profile-page .profile-radio-field .radio-option input[type="radio"]:active {
    outline: none !important;
    box-shadow: none !important;
}

#edit-profile-page .profile-radio-field .radio-option span {
    display: block !important;
    width: 100% !important;
    min-height: 34px !important;
    color: var(--text-color) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 17px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance !important;
}

/* Relationship analysis: keep the guide card content-first on mobile. */
.relationship-analysis-shell .relationship-guide-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.relationship-analysis-shell .relationship-guide-card::before,
body.dark-mode .relationship-analysis-shell .relationship-guide-card::before {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

.relationship-analysis-shell .relationship-guide-card .relationship-entry-copy,
.relationship-analysis-shell .relationship-guide-card .relationship-checkpoint-list {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: none !important;
}

.relationship-analysis-shell .relationship-guide-card .relationship-checkpoint-list span {
    width: 100% !important;
}

.app-toast {
    background:
        radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.22), transparent 38%),
        var(--gradient-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    box-shadow: 0 14px 34px rgba(var(--brand-pink-rgb), 0.24) !important;
}

.app-toast.error-toast {
    background:
        radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.20), transparent 38%),
        linear-gradient(135deg, #ff4f86 0%, #b879df 100%) !important;
}

.app-action-dialog.danger .app-action-dialog-btn.confirm {
    background: linear-gradient(135deg, #ef4444 0%, #ff4f86 100%) !important;
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.24) !important;
}

.relationship-hero-card::after {
    right: 30px !important;
    top: 50% !important;
    width: 118px !important;
    height: 118px !important;
    transform: translateY(-50%) !important;
    opacity: 0.94 !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.94) 0 4px, rgba(255, 95, 143, 0.64) 5px 11px, rgba(255, 95, 143, 0.16) 12px 22px, transparent 23px),
        radial-gradient(circle at 24% 42%, rgba(255, 255, 255, 0.82) 0 2.3px, transparent 2.6px),
        radial-gradient(circle at 82% 25%, rgba(255, 122, 160, 0.86) 0 3.1px, transparent 3.4px),
        radial-gradient(circle at 68% 79%, rgba(255, 122, 160, 0.82) 0 3px, transparent 3.4px),
        radial-gradient(circle at 35% 72%, rgba(255, 122, 160, 0.70) 0 2.2px, transparent 2.5px),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.32) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.32) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        radial-gradient(circle at 50% 50%, transparent 0 29px, rgba(255, 255, 255, 0.32) 29.5px 30.5px, transparent 31px),
        radial-gradient(circle at 50% 50%, transparent 0 43px, rgba(255, 95, 143, 0.48) 43.5px 45px, transparent 45.5px),
        radial-gradient(circle at 50% 50%, transparent 0 57px, rgba(255, 255, 255, 0.20) 57.5px 58.5px, transparent 59px) !important;
    filter: drop-shadow(0 14px 28px rgba(255, 95, 143, 0.13)) !important;
}

.relationship-hero-card::before {
    content: "" !important;
    position: absolute !important;
    right: 30px !important;
    top: calc(50% - 59px) !important;
    z-index: 0 !important;
    width: 118px !important;
    height: 118px !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><defs><linearGradient id='fan' x1='80' y1='80' x2='135' y2='45' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)' stop-opacity='.56'/><stop offset='.36' stop-color='rgb(255,118,168)' stop-opacity='.34'/><stop offset='.74' stop-color='rgb(255,255,255)' stop-opacity='.66'/><stop offset='1' stop-color='rgb(147,124,255)' stop-opacity='0'/></linearGradient><linearGradient id='core' x1='80' y1='80' x2='135' y2='45' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='rgb(255,95,143)'/><stop offset='.58' stop-color='rgb(255,118,168)'/><stop offset='1' stop-color='rgb(255,255,255)'/></linearGradient><filter id='soft'><feGaussianBlur stdDeviation='1.05'/></filter></defs><path d='M80 80 L130 42 A64 64 0 0 1 142 55 Z' fill='url(%23fan)' opacity='.88' filter='url(%23soft)'/><line x1='80' y1='80' x2='135' y2='45' stroke='url(%23core)' stroke-width='7' stroke-linecap='round' opacity='.45' filter='url(%23soft)'/><line x1='80' y1='80' x2='135' y2='45' stroke='url(%23core)' stroke-width='1.8' stroke-linecap='round'/><line x1='80' y1='80' x2='130' y2='42' stroke='rgb(255,255,255)' stroke-opacity='.86' stroke-width='.72' stroke-linecap='round'/><circle cx='135' cy='45' r='2.1' fill='rgb(255,255,255)'/></svg>") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    filter: drop-shadow(0 0 12px rgba(255, 95, 143, 0.34)) !important;
    transform-origin: 50% 50% !important;
    animation: brandSoftRadarNeedle 5.8s linear infinite !important;
}

body.dark-mode .relationship-hero-card::after {
    opacity: 0.82 !important;
}

body.dark-mode .relationship-hero-card::before {
    filter: drop-shadow(0 0 16px rgba(255, 95, 143, 0.48)) !important;
}

@media (max-width: 430px) {
    .relationship-hero-card {
        padding: 24px 116px 24px 20px !important;
        min-height: 224px !important;
    }

    .relationship-hero-card::after,
    .relationship-hero-card::before {
        right: 16px !important;
        width: 92px !important;
        height: 92px !important;
    }

    .relationship-hero-card::before {
        top: calc(50% - 46px) !important;
    }

    .relationship-hero-card h3,
    .relationship-hero-card p {
        max-width: 100% !important;
    }
}

/* Profile tab: keep the surface closer to the pink-purple app theme. */
#profile-page .profile-identity-card,
#profile-page .profile-panel {
    background:
        radial-gradient(circle at 88% 0%, rgba(var(--brand-purple-rgb), 0.11), transparent 38%),
        radial-gradient(circle at 8% 14%, rgba(var(--brand-pink-rgb), 0.10), transparent 34%),
        linear-gradient(180deg, rgba(255, 250, 253, 0.96), rgba(255, 255, 255, 0.98)) !important;
    border-color: rgba(var(--brand-pink-rgb), 0.16) !important;
    box-shadow: 0 16px 38px rgba(var(--brand-pink-rgb), 0.10) !important;
}

#profile-page .menu-item {
    background:
        radial-gradient(circle at 96% 18%, rgba(var(--brand-purple-rgb), 0.08), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(var(--brand-pink-rgb), 0.035)) !important;
    border-color: rgba(var(--brand-pink-rgb), 0.14) !important;
}

#profile-page .menu-icon {
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.25), rgba(var(--brand-purple-rgb), 0.24)) !important;
    color: #ff4f86 !important;
    border-color: rgba(var(--brand-pink-rgb), 0.24) !important;
    box-shadow: 0 10px 22px rgba(var(--brand-pink-rgb), 0.13) !important;
}

#profile-page .profile-group-heading span,
#profile-page .profile-group-heading .profile-group-kicker,
#profile-page .menu-behavior-pill {
    background: linear-gradient(135deg, rgba(var(--brand-pink-rgb), 0.14), rgba(var(--brand-purple-rgb), 0.12)) !important;
    color: #ff4f86 !important;
}

#profile-page .profile-group-heading p,
#profile-page .menu-subtitle,
#profile-page .profile-bio {
    color: rgba(68, 57, 112, 0.78) !important;
}

body.dark-mode #profile-page .profile-identity-card,
body.dark-mode #profile-page .profile-panel,
body.dark-mode #profile-page .menu-item {
    background:
        radial-gradient(circle at 88% 0%, rgba(147, 124, 255, 0.18), transparent 38%),
        radial-gradient(circle at 8% 14%, rgba(255, 123, 155, 0.14), transparent 34%),
        var(--card-bg) !important;
    border-color: rgba(255, 123, 155, 0.18) !important;
}

/* Mobile QA polish: keep container chrome and inner controls from double-rendering. */
#help-page .search-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(var(--brand-purple-rgb), 0.07), transparent 38%),
        rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.14) !important;
    box-shadow: 0 12px 28px rgba(var(--brand-pink-rgb), 0.08) !important;
}

#help-page .search-box input,
#help-page .search-box input:focus {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#help-page .search-box i {
    position: static !important;
    flex: 0 0 auto !important;
    transform: none !important;
    color: rgba(var(--brand-purple-rgb), 0.62) !important;
}

body.dark-mode #help-page .search-box {
    background:
        radial-gradient(circle at 92% 0%, rgba(147, 124, 255, 0.16), transparent 38%),
        rgba(31, 29, 38, 0.86) !important;
    border-color: rgba(201, 149, 234, 0.20) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

#toggle-password-form-btn.settings-action-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(var(--brand-purple-rgb), 0.08) !important;
    border: 1px solid rgba(var(--brand-purple-rgb), 0.16) !important;
    color: var(--primary-color) !important;
    box-shadow: none !important;
}

#toggle-password-form-btn.settings-action-btn i {
    font-size: 13px !important;
    line-height: 1 !important;
}

body.dark-mode #toggle-password-form-btn.settings-action-btn {
    background: rgba(147, 124, 255, 0.12) !important;
    border-color: rgba(201, 149, 234, 0.22) !important;
    color: #c9a5ff !important;
}

.relationship-form-select {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 56px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e5aa8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 22px) 50% !important;
    background-size: 14px 14px !important;
}

body.dark-mode .relationship-form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d8c7ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 22px) 50% !important;
    background-size: 14px 14px !important;
}

body:not(.dark-mode) .relationship-form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e5aa8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 22px) 50% !important;
    background-size: 14px 14px !important;
}

#home-page .features-section .feature-icon,
#home-page .feature-item.enhanced-feature .feature-icon {
    background:
        radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.30), transparent 34%),
        linear-gradient(135deg, rgba(var(--brand-purple-rgb), 0.26), rgba(124, 104, 255, 0.16)) !important;
    color: #8f73ff !important;
    border-color: rgba(var(--brand-purple-rgb), 0.24) !important;
    box-shadow: 0 10px 22px rgba(var(--brand-purple-rgb), 0.14) !important;
}

body.dark-mode #home-page .features-section .feature-icon,
body.dark-mode #home-page .feature-item.enhanced-feature .feature-icon {
    background:
        radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(147, 124, 255, 0.26), rgba(110, 96, 210, 0.18)) !important;
    color: #d8c7ff !important;
    border-color: rgba(201, 149, 234, 0.24) !important;
    box-shadow: 0 10px 24px rgba(147, 124, 255, 0.16) !important;
}

/* UI priority optimization: task-first flow, readable dark copy, and iOS-sized controls. */
.tab-item {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    border-radius: 14px !important;
}

.tab-item:focus-visible,
.back-btn:focus-visible,
.article-back-btn:focus-visible,
.chat-attach-btn:focus-visible,
.chat-send-btn:focus-visible,
.settings-action-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.tab-item:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--primary-color) !important;
}

body.dark-mode #profile-page .profile-group-heading p,
body.dark-mode #profile-page .menu-subtitle,
body.dark-mode #profile-page .profile-bio {
    color: rgba(248, 244, 251, 0.72) !important;
}

#home-page .relationship-entry-copy p {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

#home-page .relationship-entry-card .relationship-primary-btn {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 0 8px 0 18px !important;
}

#home-page .home-history-pill,
#home-page .hero-cta-btn,
#home-page .phase-method-link,
#chat-page .chat-session-pill,
#profile-page .profile-edit-pill,
.page-header .save-btn,
.settings-language-select {
    min-height: 44px !important;
}

#home-page .hero-cta-btn {
    padding-block: 0 !important;
}

#home-page .phase-method-link {
    padding: 0 8px !important;
}

.home-phase-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(var(--brand-pink-rgb), 0.14);
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.discover-categories {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
    gap: 8px !important;
    padding-bottom: 0 !important;
}

.category-tab {
    width: 100% !important;
    min-height: 44px !important;
    padding-inline: 10px !important;
}

#toggle-password-form-btn.settings-action-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
}

#relationship-analysis-page .relationship-hero-card {
    min-height: 0 !important;
    padding: 20px !important;
}

#relationship-analysis-page .relationship-hero-card h3 {
    max-width: 235px !important;
    margin-bottom: 8px !important;
}

#relationship-analysis-page .relationship-hero-card p {
    max-width: 235px !important;
    margin-bottom: 16px !important;
}

.relationship-history-error-state {
    width: min(100%, 340px);
    margin: 28px auto 0;
    padding: 28px 22px;
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 0%, rgba(var(--brand-purple-rgb), 0.12), transparent 42%),
        var(--card-bg);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.relationship-history-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: rgba(var(--brand-pink-rgb), 0.14);
    color: var(--primary-color);
    font-size: 18px;
}

.relationship-history-error-state h3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.25;
}

.relationship-history-error-state p {
    margin: 0;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.55;
}

.relationship-history-error-actions {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.relationship-history-error-actions .relationship-primary-btn,
.relationship-history-error-actions .relationship-secondary-btn {
    width: 100%;
    min-height: 44px;
}

.relationship-history-error-actions .relationship-secondary-btn {
    background: transparent !important;
    border: 1px solid rgba(var(--brand-purple-rgb), 0.28) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}

/* Overseas release focus: compact Home demo and gate deferred product entries. */
#home-page .quick-experience.enhanced .demo-input.enhanced-input {
    padding: 12px 16px 16px !important;
    gap: 0 !important;
}

#home-page .quick-experience.enhanced .try-now-btn.enhanced-btn {
    width: 100%;
    min-height: 44px;
}

[data-feature-gate][hidden] {
    display: none !important;
    pointer-events: none !important;
}

/* Profile scroll stability: keep the phone-shell layout invariant across host viewport sizes. */
#profile-page {
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    scrollbar-width: none !important;
}

#profile-page::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#profile-page .profile-overview-grid,
#profile-page .profile-content-grid,
#profile-page .profile-quick-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

#profile-page .profile-identity-card {
    display: flex !important;
    grid-column: auto !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 104px !important;
    padding: 16px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#profile-page .profile-identity-copy {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#profile-page .profile-name-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 5px !important;
}

#profile-page .profile-avatar {
    grid-row: auto !important;
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
}

#profile-page .profile-name,
#profile-page .profile-bio,
#profile-page .profile-edit-pill {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
}

#profile-page .profile-edit-pill {
    position: static !important;
    transform: none !important;
    min-height: 36px !important;
    padding: 0 16px !important;
}

#profile-page .profile-panel,
#profile-page .menu-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* End Profile scroll stability */

/* App shell scroll stability: auth and every scroll surface stay inside one phone canvas. */
body {
    overflow: hidden !important;
}

.app-container,
.app-container * {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}

.app-container::-webkit-scrollbar,
.app-container *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.quick-replies-panel {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}

.quick-replies-panel::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.app-content {
    overflow: hidden !important;
}

.app-page {
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}

.app-page > .page-content {
    overflow: visible !important;
}

.app-container #discover-page .discover-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

.app-container #discover-page .discover-header {
    grid-template-columns: minmax(0, 1fr) !important;
}

.app-container #discover-page .discover-featured-list,
.app-container #discover-page .discover-list {
    grid-template-columns: minmax(0, 1fr) !important;
}

#chat-page {
    overflow: hidden !important;
}

#login-page.app-page.active,
#register-page.app-page.active {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
}
/* End app shell scroll stability */

/* Session action popover stability: portal the actions outside the scrolling
   rows and stack the two actions in a compact vertical menu. */
.session-dropdown-menu.session-dropdown-menu-floating {
    position: fixed !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: auto !important;
    top: var(--session-menu-top, 0px) !important;
    left: var(--session-menu-left, 0px) !important;
    right: auto !important;
    width: 156px !important;
    min-width: 156px !important;
    max-width: calc(var(--app-shell-width, 430px) - 24px) !important;
    transform: none !important;
    z-index: 2400 !important;
}

.session-dropdown-menu-floating .session-menu-item {
    box-sizing: border-box !important;
    height: 44px !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 12px !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.session-dropdown-menu-floating .session-menu-item + .session-menu-item {
    border-top: 1px solid rgba(var(--brand-purple-rgb), 0.14);
}

body.dark-mode .session-dropdown-menu-floating .session-menu-item + .session-menu-item {
    border-top-color: rgba(255, 255, 255, 0.10);
}
/* End session action popover stability */

/* Phone-shell radar alignment: center Home artwork within the 268px card and
   use the Relationship hero's available right lane instead of touching copy. */
#home-page .hero-background::after,
#home-page .hero-background .hero-orbit {
    top: calc(50% - 79px) !important;
}

#relationship-analysis-page .relationship-hero-card::after,
#relationship-analysis-page .relationship-hero-card::before {
    right: 14px !important;
}

#relationship-analysis-page .relationship-hero-card h3,
#relationship-analysis-page .relationship-hero-card p {
    max-width: calc(100% - 124px) !important;
}

@media (max-width: 380px) {
    #home-page .hero-background::after,
    #home-page .hero-background .hero-orbit {
        top: calc(50% - 74px) !important;
    }
}
/* End phone-shell radar alignment */

/* Compact Discover phase tabs: keep all four stages visible inside the fixed
   phone shell, and give the Home CTA arrow a small optical nudge right. */
.discover-categories {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.category-tab {
    min-width: 0 !important;
    padding-inline: 4px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

#home-page .hero-cta-btn::after {
    margin-left: auto !important;
    transform: translateX(4px) !important;
}
/* End compact Discover phase tabs */

/* Task 3 Home disclosures and Situation drawer. */
#home-page .home-funnel-details {
    margin: 0 !important;
}

#home-page .home-funnel-details > summary {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    cursor: pointer;
    list-style: none !important;
    color: var(--text-color) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

#home-page .home-funnel-details > summary::-webkit-details-marker {
    display: none;
}

#home-page .home-funnel-details > summary:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 8px;
}

#home-page .home-funnel-details > summary i {
    flex: 0 0 auto;
    color: var(--text-light);
    font-size: 12px;
}

#home-page .home-funnel-details > p {
    margin: 0 0 8px !important;
    color: var(--text-light) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.quick-replies-panel {
    display: flex !important;
    flex-direction: column !important;
    top: calc(var(--native-safe-top, 0px) + 18px) !important;
    right: calc(var(--app-fixed-left) + 14px) !important;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 18px) !important;
    left: auto !important;
    width: min(360px, calc(var(--app-shell-width) - 28px)) !important;
    max-width: 360px !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    transform: translateX(calc(100% + 18px)) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.quick-replies-panel.active {
    transform: translateX(0) !important;
}

.quick-replies-panel.is-closing {
    visibility: visible !important;
    pointer-events: none !important;
    transform: translateX(calc(100% + 18px)) !important;
}

.quick-replies-panel .panel-header {
    flex: 0 0 auto;
    min-height: 58px;
    padding: 8px 12px 8px 16px !important;
}

.quick-replies-panel .panel-header h3 {
    font-size: 17px !important;
}

.quick-replies-panel .close-panel-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.quick-replies-panel .close-panel-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.quick-replies-panel .quick-replies-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    gap: 10px !important;
    padding: 10px 12px 14px !important;
}

.quick-replies-panel .reply-category-card {
    padding: 11px !important;
    border-radius: 16px !important;
}

.quick-replies-panel .reply-category-card h4 {
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

.quick-replies-panel .template-item {
    margin-bottom: 7px;
    padding: 9px 11px !important;
    border-radius: 12px !important;
    font-size: 13px;
    line-height: 1.48 !important;
}

@media (max-width: 430px) {
    .quick-replies-panel {
        width: calc(100vw - 28px) !important;
        max-width: none !important;
    }
}
/* End Task 3 Home disclosures and Situation drawer. */

/* B1.1 auth branding. */
#login-page .rapport-auth-logo,
#register-page .rapport-auth-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 42px !important;
}

body.dark-mode #login-page,
body.dark-mode #register-page {
    background: linear-gradient(180deg, #151316 0%, #151316 44%, #1c1820 100%) !important;
}

/* Auth brand lockup is rendered as text so name and descriptor switch together. */
#login-page .rapport-auth-wordmark,
#register-page .rapport-auth-wordmark {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    max-width: calc(100% - 42px);
}

#login-page .rapport-auth-wordmark .rapport-auth-name,
#register-page .rapport-auth-wordmark .rapport-auth-name {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-family: var(--font-sans) !important;
    font-size: clamp(41px, 11vw, 48px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -1.7px !important;
    background: linear-gradient(104deg, #ff5f82 0%, #d84daa 56%, #8d63e6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

#login-page .rapport-auth-signal,
#register-page .rapport-auth-signal {
    position: absolute;
    top: -39px;
    right: -34px;
    width: 43px;
    height: 47px;
    overflow: visible;
    pointer-events: none;
}

#login-page .rapport-auth-descriptor,
#register-page .rapport-auth-descriptor {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    border: 0 !important;
    color: #6f6275 !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.05px !important;
}

body.dark-mode #login-page .rapport-auth-descriptor,
body.dark-mode #register-page .rapport-auth-descriptor {
    color: #eee4ed !important;
}

[data-service-realms][hidden] {
    display: none !important;
}

/* Auth entry layout and keyboard avoidance. */
#login-page .login-container {
    justify-content: flex-start !important;
}

#register-page {
    --register-auth-surface: #fff9f7;
    background: var(--register-auth-surface) !important;
}

body.dark-mode #register-page {
    --register-auth-surface: #151316;
    background: var(--register-auth-surface) !important;
}

#register-page > .page-header,
#register-page .register-container,
body.dark-mode #register-page > .page-header,
body.dark-mode #register-page .register-container {
    background: var(--register-auth-surface) !important;
    border: 0 !important;
    box-shadow: none !important;
}

#register-page > .page-header,
body.dark-mode #register-page > .page-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#register-page .rapport-auth-logo {
    margin-bottom: 20px !important;
}

#register-page .auth-form {
    padding-top: 0 !important;
}

html[data-platform="capacitor"] body.keyboard-visible #login-page,
html[data-platform="capacitor"] body.keyboard-visible #register-page {
    padding-bottom: calc(var(--keyboard-height, 0px) + 24px) !important;
    scroll-padding-bottom: calc(var(--keyboard-height, 0px) + 24px);
}

@media (max-width: 380px) {
    #login-page .rapport-auth-logo {
        margin-bottom: 38px !important;
    }

    #register-page .rapport-auth-logo {
        margin-bottom: 20px !important;
    }

    #login-page .rapport-auth-wordmark .rapport-auth-name,
    #register-page .rapport-auth-wordmark .rapport-auth-name {
        font-size: 40px !important;
    }
}

/* Native status-bar continuity: auth pages use the same outer wallpaper too.
   Their cards and form controls keep their own surfaces below the safe area. */
html[data-platform="capacitor"] body #login-page,
html[data-platform="capacitor"] body #login-page > .page-content,
html[data-platform="capacitor"] body #login-page .login-container,
html[data-platform="capacitor"] body #register-page,
html[data-platform="capacitor"] body #register-page > .page-content,
html[data-platform="capacitor"] body #register-page > .page-header,
html[data-platform="capacitor"] body #register-page .register-container {
    background: transparent !important;
}

/* Auth pages already begin below .app-content's native safe-area inset. Keep
   their visual spacing page-specific so Register does not consume it twice. */
html[data-platform="capacitor"] body #login-page .login-container {
    padding-top: 68px !important;
}

html[data-platform="capacitor"] body #register-page .register-container {
    padding-top: 64px !important;
}

/* Android's taller WebView viewport leaves a large amount of free space in
   the full-height Register container. Do not vertically center that space:
   keep the existing top clearance for the heart mark and leave iOS unchanged. */
html[data-native-insets="android"] body #register-page .register-container {
    justify-content: flex-start !important;
}

/* iOS Home Screen Web App shell. WebKit already resizes the visual viewport
   for the software keyboard, so this mode must consume that resize exactly
   once instead of stacking the generic keyboard-height padding on top. */
html[data-platform="web"][data-display-mode="standalone"] {
    --standalone-safe-top: env(safe-area-inset-top, 0px);
    --standalone-safe-bottom: env(safe-area-inset-bottom, 0px);
    --standalone-canvas: #fffefe;
    --standalone-wallpaper:
        radial-gradient(circle at 80% 0%, rgba(193, 108, 255, 0.09), transparent 32%),
        linear-gradient(180deg, #fff8fb 0%, #fffefe 100%);
    padding-bottom: 0 !important;
    background-color: var(--standalone-canvas) !important;
    background-image: var(--standalone-wallpaper) !important;
    color-scheme: light;
    overflow: hidden !important;
}

html[data-platform="web"][data-display-mode="standalone"][data-app-theme="dark"] {
    --standalone-canvas: #090a0f;
    --standalone-wallpaper:
        radial-gradient(circle at 80% 0%, rgba(193, 108, 255, 0.12), transparent 34%),
        linear-gradient(180deg, #0f1018 0%, #090a0f 100%);
    color-scheme: dark;
}

/* The standalone safe area and Chat must reveal one viewport-level wallpaper.
   Chat's legacy dark surface otherwise starts a second, visibly black layer. */
html[data-platform="web"][data-display-mode="standalone"] body,
html[data-platform="web"][data-display-mode="standalone"] .app-container,
html[data-platform="web"][data-display-mode="standalone"] body #chat-page,
html[data-platform="web"][data-display-mode="standalone"] body #chat-page .chat-page,
html[data-platform="web"][data-display-mode="standalone"] body #chat-page .chat-content,
html[data-platform="web"][data-display-mode="standalone"] body #chat-page .chat-container {
    background: transparent !important;
}

/* html owns the top iOS safe-area padding. The bottom inset belongs to the
   fixed tab bar so the app surface reaches the physical screen edge. */
html[data-platform="web"][data-display-mode="standalone"] body,
html[data-platform="web"][data-display-mode="standalone"] .app-container,
html[data-platform="web"][data-display-mode="standalone"] .app-content {
    height: calc(100dvh - var(--standalone-safe-top)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--standalone-safe-top)) !important;
}

html[data-platform="web"][data-display-mode="standalone"] .app-page {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

html[data-platform="web"][data-display-mode="standalone"] .app-page:not([data-hide-nav="true"]) {
    bottom: calc(var(--bottom-nav-height) + var(--standalone-safe-bottom)) !important;
}

html[data-platform="web"][data-display-mode="standalone"] .app-page[data-hide-nav="true"] {
    bottom: 0 !important;
}

html[data-platform="web"][data-display-mode="standalone"] .bottom-nav {
    transition: transform 180ms ease, opacity 180ms ease !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible {
    --keyboard-compensation: 0px;
    overflow: hidden !important;
    overscroll-behavior: none;
}

html[data-platform="web"][data-display-mode="standalone"].keyboard-visible {
    height: var(--visual-viewport-height, 100svh) !important;
    min-height: 0 !important;
    max-height: var(--visual-viewport-height, 100svh) !important;
    overflow: hidden !important;
    overscroll-behavior: none;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible,
html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible .app-container {
    height: calc(var(--visual-viewport-height, 100svh) - var(--standalone-safe-top)) !important;
    min-height: 0 !important;
    max-height: calc(var(--visual-viewport-height, 100svh) - var(--standalone-safe-top)) !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible .app-content,
html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible .app-page {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible .app-page {
    bottom: 0 !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible .bottom-nav {
    transform: translateX(-50%) translateY(calc(100% + var(--standalone-safe-bottom))) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible #chat-page {
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible #chat-page .chat-page,
html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible #chat-page .chat-content {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible #chat-page .chat-content {
    padding-bottom: 10px !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible #chat-page .chat-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible #chat-page #chat-messages {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 12px !important;
    overflow-y: auto !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible #chat-page .chat-input-wrapper {
    position: relative !important;
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
}

html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible #login-page,
html[data-platform="web"][data-display-mode="standalone"] body.keyboard-visible #register-page {
    padding-bottom: 24px !important;
    scroll-padding-bottom: 24px !important;
}

/* Native keyboard avoidance for consent and AI-report sheets. Capacitor keeps
   the WebView at full height, so the sheet must consume the keyboard inset. */
html[data-platform="capacitor"] body.keyboard-visible .legal-consent-backdrop {
    top: var(--native-safe-top, 0px);
    bottom: var(--keyboard-height, 0px);
    overflow: hidden;
}

html[data-platform="capacitor"] body.keyboard-visible .legal-consent-dialog {
    max-height: 100% !important;
    scroll-padding-bottom: 20px;
}

/* Browser annotation polish: compact Chat sessions, keep dark surfaces flat,
   improve mobile card readability, and align Discover prompt icons with text. */
.session-item {
    padding: 14px 10px !important;
    gap: 8px !important;
}

.session-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
}

.session-avatar i {
    font-size: 19px !important;
}

.session-time {
    min-width: 26px !important;
    max-width: 50px !important;
}

body.dark-mode .reply-category-card,
body.dark-mode .reply-category-card .template-item,
body.dark-mode #about-page .contact-section .contact-btn,
body.dark-mode #help-page .contact-section .contact-btn,
body.dark-mode #about-page .contact-section .contact-btn:hover,
body.dark-mode #help-page .contact-section .contact-btn:hover {
    background: transparent !important;
}

body:not(.dark-mode) .quick-replies-panel {
    background: linear-gradient(180deg, #fffafd 0%, #fbf8ff 100%) !important;
}

body.dark-mode .quick-replies-panel {
    background:
        radial-gradient(circle at 86% 0%, rgba(147, 124, 255, 0.10), transparent 32%),
        #12131c !important;
}

body.dark-mode .interest-tag:not(.active):not(.add-tag) {
    background-color: #2a2933 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #ded9e7 !important;
}

.discover-prompt-card {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    text-align: left !important;
}

.discover-prompt-card i {
    align-self: start !important;
    justify-self: center !important;
    margin-top: 0.28em !important;
    line-height: 1 !important;
}

.discover-prompt-card span {
    min-width: 0;
    text-align: left !important;
}
/* End browser annotation polish. */

/* Edge swipe back for secondary pages. Keep vertical scrolling native while
   reserving a narrow left-edge horizontal gesture for the shared page stack. */
.app-page[data-hide-nav="true"].active {
    touch-action: pan-y;
}

body.edge-swipe-back-in-progress {
    -webkit-user-select: none;
    user-select: none;
}

.bottom-nav.edge-swipe-back-tab-underlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 8 !important;
    transition: none !important;
}

.app-page.edge-swipe-back-underlay {
    display: block !important;
    z-index: 6 !important;
    pointer-events: none !important;
    animation: none !important;
    transition: none !important;
    transform: translate3d(var(--edge-swipe-back-underlay-offset, -18px), 0, 0) !important;
    opacity: 1 !important;
    will-change: transform;
}

.app-page.edge-swipe-back-active {
    display: block !important;
    z-index: 20 !important;
    overflow-x: hidden !important;
    animation: none !important;
    transition: none !important;
    transform: translate3d(var(--edge-swipe-back-offset, 0px), 0, 0) !important;
    box-shadow: -14px 0 30px rgba(31, 23, 46, 0.16);
    will-change: transform;
}

.app-page.edge-swipe-back-active.edge-swipe-back-settling,
.app-page.edge-swipe-back-underlay.edge-swipe-back-settling {
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html.edge-swipe-back-navigation .app-page.page-entering,
html.edge-swipe-back-navigation .app-page.page-leaving {
    animation: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .app-page.edge-swipe-back-active.edge-swipe-back-settling,
    .app-page.edge-swipe-back-underlay.edge-swipe-back-settling {
        transition-duration: 1ms !important;
    }
}
/* End edge swipe back. */

/* Mainland filing polish: keep the shared About page compact and neutral. */
#about-page .mainland-filing-card {
    margin: 0 0 8px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    text-align: center !important;
}

#about-page .mainland-filing-card::before {
    content: none !important;
    display: none !important;
}

#about-page .mainland-filing-card h4 {
    margin: 0 0 6px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
}

#about-page .mainland-filing-card p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

#about-page .mainland-filing-card .mainland-filing-links {
    gap: 4px 12px !important;
    margin-top: 4px !important;
}

#about-page .mainland-filing-card a {
    font-size: 13px !important;
}
/* End Mainland filing polish. */

/* In-app feedback: compact, app-width flow with private image previews. */
.feedback-image-add:focus-visible,
.feedback-submit:focus-visible,
.feedback-image-remove:focus-visible {
    outline: 3px solid rgba(var(--brand-pink-rgb), 0.3);
    outline-offset: 2px;
}

.feedback-page-content {
    padding-bottom: calc(32px + var(--safe-area-bottom, 0px));
}

body:not(.dark-mode) #feedback-page .page-header {
    background: rgba(255, 250, 253, 0.98) !important;
}

body.dark-mode #feedback-page .page-header {
    background: rgba(28, 24, 32, 0.97) !important;
}

.feedback-shell {
    width: min(100%, 620px);
    margin: 0 auto;
}

.feedback-summary-card {
    margin-bottom: 16px;
}

.feedback-form {
    display: grid;
    gap: 14px;
}

.feedback-form-card,
.feedback-success-card {
    border: 1px solid rgba(var(--brand-pink-rgb), 0.16);
    border-radius: 20px;
    background: var(--card-background, #fff);
    box-shadow: 0 9px 24px rgba(var(--brand-pink-rgb), 0.07);
}

.feedback-form-card {
    padding: 18px;
    display: grid;
    gap: 18px;
}

.feedback-field {
    min-width: 0;
    display: grid;
    gap: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 650;
}

.feedback-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.feedback-field-heading > :last-child {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.feedback-field select,
.feedback-field textarea,
.feedback-field input {
    width: 100%;
    border: 1px solid rgba(91, 76, 110, 0.18);
    border-radius: 14px;
    background: var(--input-background, #fff);
    color: var(--text-primary);
    font: inherit;
    font-weight: 450;
}

.feedback-field select,
.feedback-field input {
    min-height: 48px;
    padding: 0 13px;
}

.feedback-type-control {
    position: relative;
}

.feedback-field .feedback-type-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.feedback-field .feedback-type-native.feedback-type-native-ios {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    border: 1px solid rgba(91, 76, 110, 0.18) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    appearance: auto;
    -webkit-appearance: menulist;
}

.feedback-type-trigger {
    width: 100%;
    min-height: 50px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(91, 76, 110, 0.18);
    border-radius: 14px;
    background: var(--input-background, #fff);
    color: var(--text-primary);
    font: inherit;
    font-weight: 450;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.feedback-type-trigger[hidden] {
    display: none !important;
}

.feedback-type-trigger > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.feedback-type-trigger > i {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 13px;
    transition: transform 180ms ease;
}

.feedback-type-trigger[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

.feedback-type-trigger:focus-visible {
    border-color: rgba(var(--brand-pink-rgb), 0.68);
    outline: 3px solid rgba(var(--brand-pink-rgb), 0.14);
}

.feedback-type-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px 10px calc(10px + var(--native-safe-bottom, env(safe-area-inset-bottom, 0px)));
    box-sizing: border-box;
    background: rgba(18, 13, 26, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.feedback-type-sheet-backdrop[hidden] {
    display: none !important;
}

.feedback-type-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.feedback-type-sheet {
    width: min(100%, 520px);
    max-height: min(620px, calc(100% - 24px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(var(--brand-pink-rgb), 0.13);
    border-radius: 25px;
    background:
        radial-gradient(circle at 92% 0%, rgba(var(--brand-purple-rgb), 0.09), transparent 32%),
        rgba(255, 252, 254, 0.99);
    box-shadow: 0 24px 70px rgba(30, 20, 45, 0.28);
    color: var(--text-primary);
    transform: translateY(calc(100% + 24px));
    transition: transform 210ms cubic-bezier(0.22, 1, 0.36, 1);
}

.feedback-type-sheet-backdrop.active .feedback-type-sheet {
    transform: translateY(0);
}

.feedback-type-sheet-handle {
    width: 38px;
    height: 5px;
    flex: 0 0 auto;
    margin: 9px auto 3px;
    border-radius: 999px;
    background: rgba(91, 76, 110, 0.22);
}

.feedback-type-sheet-header {
    min-height: 50px;
    padding: 0 18px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.feedback-type-sheet-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 760;
}

.feedback-type-sheet-cancel {
    min-width: 44px;
    min-height: 44px;
    margin-right: -10px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--primary-color);
    font: inherit;
    font-size: 15px;
    font-weight: 680;
    cursor: pointer;
}

.feedback-type-options {
    margin: 0 10px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(91, 76, 110, 0.10);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
}

.feedback-type-option {
    width: 100%;
    min-height: 58px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    border-bottom: 1px solid rgba(91, 76, 110, 0.10);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 16px;
    font-weight: 520;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.feedback-type-option:last-child {
    border-bottom: 0;
}

.feedback-type-option > span {
    min-width: 0;
}

.feedback-type-option > i {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 150ms ease, transform 150ms ease;
}

.feedback-type-option.selected {
    background: rgba(var(--brand-pink-rgb), 0.075);
    color: var(--primary-color);
    font-weight: 680;
}

.feedback-type-option.selected > i {
    opacity: 1;
    transform: scale(1);
}

.feedback-type-option:focus-visible,
.feedback-type-sheet-cancel:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid rgba(var(--brand-pink-rgb), 0.24);
    outline-offset: -3px;
}

body.feedback-type-sheet-open #feedback-page {
    overflow: hidden !important;
}

/* Android's default WebView select dialog is visually disconnected from the
   product. Keep the real select as the form value and expose a branded trigger
   plus one reusable bottom sheet only inside the native Android shell. */
.android-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.android-select-trigger {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border-soft, rgba(91, 76, 110, 0.16));
    border-radius: 14px;
    background: rgba(255, 250, 253, 0.82);
    color: var(--text-color);
    box-shadow: none;
    font: inherit;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.android-select-trigger-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.android-select-trigger > i {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 12px;
    transition: transform 180ms ease;
}

.android-select-trigger[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

.android-select-trigger:focus-visible {
    border-color: rgba(var(--brand-pink-rgb), 0.52);
    outline: 3px solid rgba(var(--brand-pink-rgb), 0.14);
    outline-offset: 0;
}

.android-select-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.settings-item > .android-select-trigger {
    width: auto;
    max-width: 48%;
    min-width: 112px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
}

.location-selector > .android-select-trigger {
    flex: 1 1 0;
}

.date-input-group > .android-select-trigger,
.assistant-field > .android-select-trigger,
.ai-report-dialog label > .android-select-trigger {
    min-height: 48px;
}

.android-select-option:disabled {
    color: var(--text-light);
    cursor: not-allowed;
    opacity: 0.55;
}

.android-select-sheet-options {
    scroll-padding-block: 10px;
}

body.android-select-sheet-open {
    overflow: hidden !important;
}

body.dark-mode .android-select-trigger {
    border-color: var(--border-soft, rgba(255, 255, 255, 0.14));
    background: var(--card-bg-elevated, #151620);
    color: var(--text-color);
}

.feedback-field textarea {
    min-height: 132px;
    padding: 13px;
    line-height: 1.55;
    resize: vertical;
}

.feedback-field select:focus,
.feedback-field textarea:focus,
.feedback-field input:focus {
    border-color: rgba(var(--brand-pink-rgb), 0.68);
    outline: 3px solid rgba(var(--brand-pink-rgb), 0.14);
}

.feedback-image-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.feedback-image-preview {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(var(--brand-pink-rgb), 0.08);
}

.feedback-image-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.feedback-image-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(27, 23, 34, 0.76);
    color: #fff;
    cursor: pointer;
}

.feedback-image-add {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed rgba(var(--brand-pink-rgb), 0.42);
    border-radius: 14px;
    background: var(--brand-gradient-05);
    color: var(--primary-color);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.feedback-error {
    margin: 0;
    color: #c83e62;
    font-size: 13px;
    line-height: 1.45;
}

.feedback-submit {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 16px;
    background: var(--gradient-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(var(--brand-pink-rgb), 0.24);
}

.feedback-submit:disabled {
    opacity: 0.58;
    cursor: wait;
}

.feedback-success-card {
    padding: 28px 20px;
    text-align: center;
}

.feedback-success-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(62, 176, 124, 0.14);
    color: #32966b;
    font-size: 21px;
}

.feedback-success-card h3 {
    margin: 0 0 7px;
    color: var(--text-primary);
}

.feedback-success-card > p {
    margin: 0 0 18px;
    color: var(--text-secondary);
}

.feedback-code-row {
    margin: 0 0 18px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 13px;
    background: var(--brand-gradient-10);
    color: var(--text-secondary);
    font-size: 13px;
}

.feedback-code-row strong {
    color: var(--text-primary);
    letter-spacing: 0.025em;
}

body.dark-mode .feedback-image-add {
    background: rgba(var(--brand-pink-rgb), 0.13);
    color: var(--primary-color);
}

body.dark-mode .feedback-form-card,
body.dark-mode .feedback-success-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: #1d1e28;
}

body.dark-mode .feedback-field select,
body.dark-mode .feedback-field textarea,
body.dark-mode .feedback-field input {
    border-color: rgba(255, 255, 255, 0.14);
    background: #151620;
}

body.dark-mode .feedback-type-trigger {
    border-color: rgba(255, 255, 255, 0.14);
    background: #151620;
}

body.dark-mode .feedback-type-sheet-backdrop {
    background: rgba(0, 0, 0, 0.56);
}

body.dark-mode .feedback-type-sheet {
    border-color: rgba(255, 255, 255, 0.10);
    background:
        radial-gradient(circle at 92% 0%, rgba(var(--brand-purple-rgb), 0.12), transparent 32%),
        rgba(27, 28, 38, 0.99);
    box-shadow: 0 24px 76px rgba(0, 0, 0, 0.52);
}

body.dark-mode .feedback-type-sheet-handle {
    background: rgba(255, 255, 255, 0.20);
}

body.dark-mode .feedback-type-options {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(9, 10, 16, 0.34);
}

body.dark-mode .feedback-type-option {
    border-bottom-color: rgba(255, 255, 255, 0.085);
}

body.dark-mode .feedback-type-option.selected {
    background: rgba(var(--brand-pink-rgb), 0.13);
}

@media (prefers-reduced-motion: reduce) {
    .feedback-type-sheet-backdrop,
    .feedback-type-sheet,
    .feedback-type-trigger > i,
    .feedback-type-option > i,
    .android-select-trigger > i {
        transition: none !important;
    }
}

@media (min-width: 768px) {
    #support-page > .page-header,
    #feedback-page > .page-header {
        width: 100% !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #support-page > .page-content,
    #feedback-page > .page-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 12px 16px calc(32px + var(--safe-area-bottom, 0px)) !important;
    }

    #feedback-page .feedback-shell {
        width: 100%;
        max-width: 620px;
    }
}

@media (max-width: 420px) {
    .feedback-form-card {
        padding: 16px;
    }
}
/* End in-app feedback. */