/**
 * 手机端专用UI样式
 *
 * 设计原则：
 * 1. 触摸目标最小48px（Material Design标准）
 * 2. 单列布局优先
 * 3. 拇指区域优化
 * 4. 减少视觉噪音
 * 5. 清晰的层次结构
 * 6. 即时反馈
 */

/* ==================== 切换按钮样式 ==================== */
.ui-layout-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    white-space: nowrap;
    z-index: 10000 !important;
    position: fixed !important;
    top: 6px;
    right: 12px;
}

/* 手机端适配顶部安全区域 */
body.mobile-ui-mode .ui-layout-toggle-btn {
    top: calc(6px + env(safe-area-inset-top, 0));
}

.ui-layout-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.ui-layout-toggle-btn:active,
.ui-layout-toggle-btn.clicked {
    transform: scale(0.95);
}

.ui-layout-toggle-btn i {
    font-size: 13px;
}

.ui-toggle-label {
    font-size: 11px;
}

/* 手机端隐藏文字标签 */
body.mobile-ui-mode .ui-toggle-label {
    display: none;
}

/* 确保帮助按钮也可见 */
.btn-help {
    z-index: 9999 !important;
    position: relative !important;
    flex-shrink: 0;
}

/* ==================== 布局切换提示 ==================== */
.ui-layout-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ui-layout-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ui-layout-toast i {
    font-size: 18px;
    color: #10b981;
}

/* ==================== 手机端模式基础样式 ==================== */
body.mobile-ui-mode {
    /* 防止文字选择干扰触摸 */
    -webkit-tap-highlight-color: transparent;
}

/* 首页禁止滚动 - 只在index.html生效 */
body.mobile-ui-mode:has(.hero-banner-section) {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* html层面也要限制 */
html:has(body.mobile-ui-mode .hero-banner-section) {
    overflow: hidden !important;
    height: 100vh !important;
}

/* ==================== 顶部导航栏 - 极简紧凑设计 ==================== */
body.mobile-ui-mode .header,
body.mobile-ui-mode .navbar,
body.mobile-ui-mode nav.navbar {
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.98) 0%, rgba(118, 75, 162, 0.98) 100%);
    backdrop-filter: blur(20px);
    height: 44px;
    /* iOS标准导航栏高度 */
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* 手机端安全区域适配 - 需要!important覆盖其他样式 */
    padding-top: 40px !important;
}

/* 滚动时隐藏顶部导航 - 所有导航类型 */
body.mobile-ui-mode.header-hidden .header,
body.mobile-ui-mode.header-hidden .navbar,
body.mobile-ui-mode.header-hidden nav.navbar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

body.mobile-ui-mode .nav-container {
    padding: 0 12px;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: space-between;
    align-items: center;
}

body.mobile-ui-mode .logo,
body.mobile-ui-mode .nav-logo {
    font-size: 1rem;
    gap: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

body.mobile-ui-mode .logo i,
body.mobile-ui-mode .nav-logo i {
    font-size: 1.1rem;
}

body.mobile-ui-mode .logo span,
body.mobile-ui-mode .nav-logo span {
    font-size: 14px;
    font-weight: 600;
}

/* 导航菜单在手机端隐藏（功能移到底部导航） */
body.mobile-ui-mode .nav-menu,
body.mobile-ui-mode ul.nav-menu {
    display: none !important;
}

/* 新版移动UI：彻底隐藏旧版横屏/hero结构 */
body.mobile-new-ui .header,
body.mobile-new-ui .navbar,
body.mobile-new-ui nav.navbar,
body.mobile-new-ui .nav-container,
body.mobile-new-ui .hero-banner-section,
body.mobile-new-ui .hero-banner-wrapper {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* 兜底隐藏旧版首页Hero：小屏一律不显示，防止先渲染旧界面再切换 */
@media (max-width: 820px) {
    .hero-banner-section,
    .hero-banner-wrapper {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* 移除旧版移动首屏/导航，避免加载旧UI */
body.mobile-ui-mode .header,
body.mobile-ui-mode .navbar,
body.mobile-ui-mode nav.navbar,
body.mobile-ui-mode .nav-container,
body.mobile-ui-mode .hero-banner-section {
    display: none !important;
}

/* 手机端完全隐藏顶部user-info（功能移到底部导航栏） */
body.mobile-ui-mode .user-info {
    display: none !important;
}

/* 隐藏所有装饰圆球 - 包括伪元素和div */
body.mobile-ui-mode .decoration-circle,
body.mobile-ui-mode .container .decoration-circle,
body.mobile-ui-mode div.decoration-circle,
html body.mobile-ui-mode .decoration-circle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* 隐藏hero区域的伪元素装饰球 */
body.mobile-ui-mode .hero-banner-section::before,
body.mobile-ui-mode .hero-banner-section::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==================== 底部导航栏 - 现代APP风格 ==================== */
body.mobile-ui-mode .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 9997;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);
}

body.mobile-ui-mode .mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    padding: 6px 0;
    color: #8e8e93;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

body.mobile-ui-mode .mobile-bottom-nav .nav-item:active {
    transform: scale(0.92);
}

body.mobile-ui-mode .mobile-bottom-nav .nav-item.active {
    color: #667eea;
}

body.mobile-ui-mode .mobile-bottom-nav .nav-item i {
    font-size: 20px;
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}

body.mobile-ui-mode .mobile-bottom-nav .nav-item.active i {
    transform: scale(1.1);
}

body.mobile-ui-mode .mobile-bottom-nav .nav-item span {
    font-size: 10px;
    font-weight: 500;
}

/* 桌面端隐藏底部导航 */
body.desktop-ui-mode .mobile-bottom-nav,
body:not(.mobile-ui-mode) .mobile-bottom-nav {
    display: none !important;
}

/* 主页内容区域 - 给底部导航留空间 */
body.mobile-ui-mode {
    padding-top: calc(44px + env(safe-area-inset-top, 0));
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
}

/* ==================== 手机端首页：只显示Hero区域，隐藏其他内容 ==================== */
/* 隐藏hero区域后面的所有内容 */
body.mobile-ui-mode .hero-banner-section~.container,
body.mobile-ui-mode .hero-banner-section~section,
body.mobile-ui-mode .hero-banner-section~div:not(.bottom-nav):not(.mobile-bottom-nav):not([class*="modal"]):not([class*="overlay"]):not([id*="Modal"]):not([id*="Toast"]):not(.ai-assistant-panel):not(.ai-assistant-float-button):not(.ai-assistant-container):not(.mobile-fullscreen-panel):not(#mobileFullscreenPanel) {
    display: none !important;
}

/* 确保全屏面板始终可见（不包括智能助手，它有自己的显示逻辑） */
body.mobile-ui-mode .mobile-fullscreen-panel,
body.mobile-ui-mode #mobileFullscreenPanel {
    display: flex !important;
}

/* ==================== Hero区域手机端优化 - 填满视口 ==================== */
body.mobile-ui-mode .hero-banner-section {
    min-height: auto;
    padding: 0;
    margin-top: 0;
    /* 关键：固定高度填满视口 */
    height: calc(100vh - 44px - 56px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body.mobile-ui-mode .hero-banner-wrapper {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

body.mobile-ui-mode .hero-banner-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    /* 适度提亮背景 */
    filter: brightness(1.15) !important;
}

/* 半透明遮罩 - 清新亮色风格（覆盖enhanced-ui-optimization.css的暗色遮罩） */
body.mobile-ui-mode .hero-banner-overlay,
body.mobile-ui-mode .hero-content-overlay {
    padding: 8px 12px;
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    /* 覆盖暗色遮罩，使用清新的浅色半透明 */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.02) 100%) !important;
}

body.mobile-ui-mode .hero-content {
    flex: 1 1 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
}

/* 恢复原始标题样式 */
body.mobile-ui-mode .hero-content-overlay h1,
body.mobile-ui-mode .hero-title {
    font-size: 1.2rem !important;
    line-height: 1.2;
    margin-bottom: 4px;
    padding-top: 0;
    flex-shrink: 0;
}

body.mobile-ui-mode .hero-content-overlay p,
body.mobile-ui-mode .hero-subtitle {
    font-size: 0.75rem !important;
    line-height: 1.3;
    margin-bottom: 10px;
    opacity: 0.9;
    flex-shrink: 0;
}

/* ==================== Hero按钮组 - 恢复原始尺寸 ==================== */
html body.mobile-ui-mode .hero-buttons,
body.mobile-ui-mode .hero-content .hero-buttons,
body.mobile-ui-mode div.hero-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 10px auto !important;
    padding: 0 !important;
    flex-shrink: 0;
    /* 按钮区域不收缩 */
}

/* 恢复原始按钮尺寸 + 精致边框 */
html body.mobile-ui-mode .hero-buttons .btn,
html body.mobile-ui-mode .hero-buttons .btn-lg,
html body.mobile-ui-mode .hero-buttons .hero-main-btn,
html body.mobile-ui-mode .hero-buttons button,
body.mobile-ui-mode .hero-buttons .btn.btn-outline,
body.mobile-ui-mode .hero-buttons .btn.btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 6px !important;
    font-size: 11px !important;
    min-height: 60px !important;
    height: auto !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px) !important;
    /* 精致边框设计 */
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

html body.mobile-ui-mode .hero-buttons .btn:active {
    transform: scale(0.95) !important;
    background: rgba(255, 255, 255, 0.35) !important;
}

html body.mobile-ui-mode .hero-buttons .btn i,
html body.mobile-ui-mode .hero-buttons .hero-main-btn i {
    font-size: 20px !important;
    margin: 0 !important;
    margin-bottom: 2px !important;
}

/* 默认主题 - 蓝紫渐变色功能按钮 */
body.mobile-ui-mode .hero-buttons .btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* ==================== 甘雨主题 - 纯净冰蓝色系 ==================== */
/* 功能按钮 - 淡蓝到天蓝渐变，保持纯蓝色系 */
html body.mobile-ui-mode.theme-ganyu .hero-buttons .btn,
html body.mobile-ui-mode.theme-ganyu .hero-buttons .btn:first-child,
html body.mobile-ui-mode.theme-ganyu .hero-buttons .btn:nth-child(2),
html body.mobile-ui-mode.theme-ganyu .hero-buttons .btn:nth-child(3),
html body.mobile-ui-mode.theme-ganyu .hero-buttons .btn:nth-child(4),
html body.mobile-ui-mode.theme-ganyu .hero-buttons .btn:nth-child(5),
html body.mobile-ui-mode.theme-ganyu .hero-buttons .btn:last-child {
    background: linear-gradient(135deg, #A8D8EA 0%, #5DADE2 100%) !important;
    box-shadow: 0 4px 16px rgba(93, 173, 226, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* 底部导航栏 - 淡冰蓝背景 */
html body.mobile-ui-mode.theme-ganyu #mobileBottomNav,
html body.mobile-ui-mode.theme-ganyu .mobile-bottom-nav {
    background: linear-gradient(180deg, rgba(235, 248, 255, 0.98) 0%, rgba(248, 253, 255, 0.98) 100%) !important;
    border-top: 1px solid rgba(93, 173, 226, 0.3) !important;
}

html body.mobile-ui-mode.theme-ganyu #mobileBottomNav .nav-item.active,
html body.mobile-ui-mode.theme-ganyu .mobile-bottom-nav .nav-item.active {
    color: #3498DB !important;
}

html body.mobile-ui-mode.theme-ganyu #mobileBottomNav .nav-item:not(.active),
html body.mobile-ui-mode.theme-ganyu .mobile-bottom-nav .nav-item:not(.active) {
    color: #85C1E9 !important;
}

/* ==================== 宵宫主题 - 温暖金橙色系 ==================== */
/* 功能按钮 - 烟花般的金黄橙色渐变 */
html body.mobile-ui-mode.theme-yoimiya .hero-buttons .btn,
html body.mobile-ui-mode.theme-yoimiya .hero-buttons .btn:first-child,
html body.mobile-ui-mode.theme-yoimiya .hero-buttons .btn:nth-child(2),
html body.mobile-ui-mode.theme-yoimiya .hero-buttons .btn:nth-child(3),
html body.mobile-ui-mode.theme-yoimiya .hero-buttons .btn:nth-child(4),
html body.mobile-ui-mode.theme-yoimiya .hero-buttons .btn:nth-child(5),
html body.mobile-ui-mode.theme-yoimiya .hero-buttons .btn:last-child {
    background: linear-gradient(135deg, #FFD93D 0%, #FF9F43 100%) !important;
    box-shadow: 0 4px 16px rgba(255, 217, 61, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* 底部导航栏 - 暖黄背景 */
html body.mobile-ui-mode.theme-yoimiya #mobileBottomNav,
html body.mobile-ui-mode.theme-yoimiya .mobile-bottom-nav {
    background: linear-gradient(180deg, rgba(255, 252, 240, 0.98) 0%, rgba(255, 255, 250, 0.98) 100%) !important;
    border-top: 1px solid rgba(255, 180, 80, 0.35) !important;
}

html body.mobile-ui-mode.theme-yoimiya #mobileBottomNav .nav-item.active,
html body.mobile-ui-mode.theme-yoimiya .mobile-bottom-nav .nav-item.active {
    color: #FF9F43 !important;
}

html body.mobile-ui-mode.theme-yoimiya #mobileBottomNav .nav-item:not(.active),
html body.mobile-ui-mode.theme-yoimiya .mobile-bottom-nav .nav-item:not(.active) {
    color: #FFBA5C !important;
}

/* ==================== 主题装饰特效 ==================== */
.theme-effects-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* 甘雨主题 - 雪花飘落效果 */
.ganyu-effects .snowflake {
    position: absolute;
    top: -20px;
    color: rgba(173, 216, 230, 0.8);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(calc(100vh + 20px)) rotate(360deg);
        opacity: 0;
    }
}

/* 宵宫主题 - 烟火星光效果 */
.yoimiya-effects .firework-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #FFD700 0%, #FF6B35 50%, transparent 70%);
    border-radius: 50%;
    animation: sparkle ease-in-out infinite;
    box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.6);
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ==================== 嵌入式智能助手区域 - 填满所有剩余空间 ==================== */
body.mobile-ui-mode .mobile-embedded-ai-container {
    display: flex !important;
    flex-direction: column !important;
    margin-top: 10px !important;
    background: var(--embed-bg, rgba(255, 255, 255, 0.98)) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    /* 精致边框设计 */
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
    /* 核心：填满所有剩余空间 */
    flex: 1 1 0 !important;
    min-height: 0 !important;
    position: relative !important;
}

body:not(.mobile-ui-mode) .mobile-embedded-ai-container {
    display: none !important;
}

/* 手机端隐藏右下角悬浮按钮 */
body.mobile-ui-mode .ai-assistant-float-button {
    display: none !important;
}

/* 主题样式 */
body.mobile-ui-mode .mobile-embedded-ai-container.default-theme {
    --embed-primary: #667eea;
    --embed-secondary: #764ba2;
    --embed-bg: rgba(255, 255, 255, 0.98);
    --embed-text: #333;
    --embed-text-light: #666;
    --embed-avatar-bg: #f0f0f0;
}

body.mobile-ui-mode .mobile-embedded-ai-container.yoimiya-theme {
    --embed-primary: #FF9966;
    --embed-secondary: #FFD700;
    --embed-bg: rgba(255, 250, 240, 0.98);
    --embed-text: #5D4037;
    --embed-text-light: #795548;
    --embed-avatar-bg: #FFF3E0;
    border: 1px solid rgba(255, 153, 102, 0.3);
}

body.mobile-ui-mode .mobile-embedded-ai-container.ganyu-theme {
    --embed-primary: #4A90E2;
    --embed-secondary: #7EC8E3;
    --embed-bg: rgba(240, 248, 255, 0.98);
    --embed-text: #1565C0;
    --embed-text-light: #1976D2;
    --embed-avatar-bg: #E3F2FD;
    border: 1px solid rgba(74, 144, 226, 0.3);
}

/* 消息区域包装器（含立绘）- 填满剩余空间 */
body.mobile-ui-mode .embedded-ai-messages-wrapper {
    flex: 1 1 0 !important;
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: 0 !important;
}

/* 立绘显示 - 在消息区域右侧显示 */
body.mobile-ui-mode .embedded-ai-character {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 40%;
    height: 95%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
}

body.mobile-ui-mode .embedded-ai-character img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

/* 聚焦模式 - 只虚化hero按钮区域 */
body.mobile-ui-mode .hero-section.chat-focused .hero-buttons {
    filter: blur(3px);
    opacity: 0.4;
    pointer-events: none;
    transition: all 0.3s ease;
}

body.mobile-ui-mode .hero-section.chat-focused .hero-content h1,
body.mobile-ui-mode .hero-section.chat-focused .hero-content p {
    filter: blur(2px);
    opacity: 0.5;
    transition: all 0.3s ease;
}

/* 嵌入式助手头部 */
body.mobile-ui-mode .embedded-ai-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--embed-primary, #667eea) 0%, var(--embed-secondary, #764ba2) 100%);
    color: white;
    cursor: pointer;
    flex-shrink: 0;
}

body.mobile-ui-mode .embedded-ai-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

body.mobile-ui-mode .embedded-ai-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.mobile-ui-mode .embedded-ai-info {
    flex: 1;
    margin-left: 10px;
}

body.mobile-ui-mode .embedded-ai-name {
    font-size: 14px;
    font-weight: 600;
}

body.mobile-ui-mode .embedded-ai-status {
    font-size: 10px;
    opacity: 0.85;
}

body.mobile-ui-mode .embedded-ai-status i {
    font-size: 6px;
    color: #4ade80;
    margin-right: 4px;
}

body.mobile-ui-mode .embedded-ai-expand {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 消息区域 */
body.mobile-ui-mode .embedded-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100px;
    position: relative;
    z-index: 10;
}

/* 消息气泡 - 带头像 */
body.mobile-ui-mode .embedded-message {
    display: flex;
    gap: 8px;
    max-width: 90%;
    align-items: flex-start;
}

body.mobile-ui-mode .embedded-message.assistant {
    align-self: flex-start;
    flex-direction: row;
}

body.mobile-ui-mode .embedded-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* 消息头像 */
body.mobile-ui-mode .embedded-msg-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    overflow: hidden;
}

body.mobile-ui-mode .embedded-message.assistant .embedded-msg-avatar {
    background: var(--embed-avatar-bg, #f0f0f0);
    color: var(--embed-primary, #667eea);
}

body.mobile-ui-mode .embedded-message.user .embedded-msg-avatar {
    background: linear-gradient(135deg, var(--embed-primary) 0%, var(--embed-secondary) 100%);
    color: white;
}

body.mobile-ui-mode .embedded-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 消息内容 */
body.mobile-ui-mode .embedded-msg-content {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.mobile-ui-mode .embedded-message.assistant .embedded-msg-content {
    background: white;
    color: var(--embed-text, #333) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 4px;
}

/* 开场白消息 - 移除外层气泡背景，避免双层效果 */
body.mobile-ui-mode .embedded-message.assistant.greeting-message .embedded-msg-content.greeting-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 宵宫主题 */
body.mobile-ui-mode .yoimiya-theme .embedded-message.assistant .embedded-msg-content {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFF3E0 100%);
    color: #5D4037 !important;
    border-color: rgba(255, 153, 102, 0.15);
}

/* 甘雨主题 */
body.mobile-ui-mode .ganyu-theme .embedded-message.assistant .embedded-msg-content {
    background: linear-gradient(135deg, #F5FAFF 0%, #E8F4FD 100%);
    color: #1565C0 !important;
    border-color: rgba(74, 144, 226, 0.15);
}

/* 用户消息 */
body.mobile-ui-mode .embedded-message.user .embedded-msg-content {
    background: linear-gradient(135deg, var(--embed-primary, #667eea) 0%, var(--embed-secondary, #764ba2) 100%);
    color: white !important;
    border-bottom-right-radius: 4px;
}

/* 快捷功能按钮 - 复用原AI助手风格 */
body.mobile-ui-mode .embedded-ai-quick-actions {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    justify-content: space-around;
    flex-shrink: 0;
}

body.mobile-ui-mode .embedded-quick-btn {
    flex: 1;
    max-width: 60px;
    height: auto;
    padding: 6px 4px;
    /* 精致边框设计 */
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    border-radius: 12px;
    background: white;
    color: var(--embed-text, #666);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 14px;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* 快捷按钮文字标签 */
body.mobile-ui-mode .embedded-quick-btn .quick-btn-label {
    font-size: 9px;
    color: var(--embed-text-light, #888);
    font-weight: 500;
    white-space: nowrap;
}

body.mobile-ui-mode .embedded-quick-btn:active {
    background: var(--embed-primary, #667eea);
    color: white;
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

body.mobile-ui-mode .embedded-quick-btn:active .quick-btn-label {
    color: rgba(255, 255, 255, 0.9);
}

/* 加载动画 */
body.mobile-ui-mode .embedded-ai-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--embed-text-light, #666);
}

body.mobile-ui-mode .embedded-ai-typing span {
    width: 6px;
    height: 6px;
    background: var(--embed-primary, #667eea);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

body.mobile-ui-mode .embedded-ai-typing span:nth-child(1) {
    animation-delay: -0.32s;
}

body.mobile-ui-mode .embedded-ai-typing span:nth-child(2) {
    animation-delay: -0.16s;
}

body.mobile-ui-mode .embedded-ai-typing span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes typingBounce {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 开场白内嵌帮助按钮 */
body.mobile-ui-mode .inline-help-btn {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 4px;
    background: var(--embed-primary, #667eea);
    color: white !important;
    border: none;
    border-radius: 10px;
    font-size: 11px;
    cursor: pointer;
    vertical-align: middle;
}

body.mobile-ui-mode .inline-help-btn:active {
    opacity: 0.8;
}

/* ==================== 开场白卡片样式 ==================== */
body.mobile-ui-mode .greeting-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.mobile-ui-mode .greeting-hello {
    font-size: 14px;
    color: var(--embed-text, #333);
    line-height: 1.5;
}

body.mobile-ui-mode .greeting-hello strong {
    color: var(--embed-primary, #667eea);
}

body.mobile-ui-mode .greeting-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0;
}

body.mobile-ui-mode .greeting-features .feature-tag {
    display: inline-block;
    padding: 3px 8px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 12px;
    font-size: 11px;
    color: var(--embed-primary, #667eea);
    font-weight: 500;
    white-space: nowrap;
}

body.mobile-ui-mode .greeting-tip {
    font-size: 12px;
    color: var(--embed-text-light, #666);
    padding: 4px 0;
}

/* 精简版开场白卡片 */
body.mobile-ui-mode .greeting-card-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 85%;
}

body.mobile-ui-mode .greeting-card-compact .greeting-hello {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

body.mobile-ui-mode .greeting-card-compact .greeting-intro {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

body.mobile-ui-mode .greeting-card-compact .greeting-intro strong {
    color: var(--embed-primary, #667eea);
    font-weight: 600;
}

body.mobile-ui-mode .greeting-card-compact .greeting-tip {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

/* 宵宫主题精简卡片 - 温暖金橙色 */
body.mobile-ui-mode .greeting-card-compact.yoimiya-greeting {
    background: linear-gradient(135deg, rgba(255, 253, 245, 0.98) 0%, rgba(255, 248, 230, 0.95) 100%);
    border-left: 3px solid #FFD93D;
}

body.mobile-ui-mode .greeting-card-compact.yoimiya-greeting .greeting-hello {
    color: #E6A000;
}

body.mobile-ui-mode .greeting-card-compact.yoimiya-greeting .greeting-intro strong {
    color: #FF9F43;
}

/* 甘雨主题精简卡片 - 纯净冰蓝色 */
body.mobile-ui-mode .greeting-card-compact.ganyu-greeting {
    background: linear-gradient(135deg, rgba(235, 245, 251, 0.98) 0%, rgba(214, 234, 248, 0.95) 100%);
    border-left: 3px solid #5DADE2;
}

body.mobile-ui-mode .greeting-card-compact.ganyu-greeting .greeting-hello {
    color: #2E86C1;
}

body.mobile-ui-mode .greeting-card-compact.ganyu-greeting .greeting-intro strong {
    color: #3498DB;
}

body.mobile-ui-mode .greeting-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: linear-gradient(135deg, var(--embed-primary, #667eea) 0%, var(--embed-secondary, #764ba2) 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

/* 宵宫帮助按钮 - 金橙色 */
body.mobile-ui-mode .greeting-help-btn.yoimiya-btn {
    background: linear-gradient(135deg, #FFD93D 0%, #FF9F43 100%);
}

/* 甘雨帮助按钮 - 纯净蓝色 */
body.mobile-ui-mode .greeting-help-btn.ganyu-btn {
    background: linear-gradient(135deg, #A8D8EA 0%, #5DADE2 100%);
}

body.mobile-ui-mode .greeting-help-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

body.mobile-ui-mode .greeting-help-btn i {
    font-size: 10px;
}

/* ==================== 打字机效果样式 ==================== */
body.mobile-ui-mode .typewriter-content {
    min-height: 20px;
}

body.mobile-ui-mode .typewriter-content.typing::after {
    content: '▋';
    display: inline-block;
    animation: cursorBlink 0.8s infinite;
    color: var(--embed-primary, #667eea);
    margin-left: 2px;
}

body.mobile-ui-mode .typewriter-content.typed {
    animation: fadeInComplete 0.3s ease-out;
}

@keyframes cursorBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

@keyframes fadeInComplete {
    from {
        opacity: 0.8;
    }

    to {
        opacity: 1;
    }
}

/* 输入区域 */
body.mobile-ui-mode .embedded-ai-input {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    background: white;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

body.mobile-ui-mode .embedded-ai-input input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
}

body.mobile-ui-mode .embedded-ai-input input:focus {
    border-color: var(--embed-primary, #667eea);
}

body.mobile-ui-mode .embedded-ai-input button {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--embed-primary, #667eea) 0%, var(--embed-secondary, #764ba2) 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== 主内容区域手机端优化 ==================== */
body.mobile-ui-mode .container {
    padding: 16px 12px;
    max-width: 100%;
}

body.mobile-ui-mode .main-content {
    padding: 16px;
}

/* ==================== 卡片样式手机端优化 ==================== */
body.mobile-ui-mode .card,
body.mobile-ui-mode .glass-card {
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

/* ==================== 按钮组手机端优化 ==================== */
body.mobile-ui-mode .btn-group {
    flex-direction: column;
    gap: 12px;
}

body.mobile-ui-mode .btn-group .btn {
    width: 100%;
    min-height: 52px;
    font-size: 15px;
    padding: 14px 20px;
    border-radius: 14px;
}

/* ==================== 表单元素手机端优化 ==================== */
body.mobile-ui-mode input[type="text"],
body.mobile-ui-mode input[type="number"],
body.mobile-ui-mode input[type="password"],
body.mobile-ui-mode input[type="email"],
body.mobile-ui-mode select,
body.mobile-ui-mode textarea {
    min-height: 48px;
    font-size: 16px;
    /* 防止iOS缩放 */
    padding: 12px 16px;
    border-radius: 12px;
}

body.mobile-ui-mode textarea {
    min-height: 120px;
}

/* ==================== 模态框手机端全面优化 ==================== */
body.mobile-ui-mode .modal {
    padding: 0;
    align-items: flex-end;
}

body.mobile-ui-mode .modal-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    animation: slideUpModal 0.3s ease;
}

@keyframes slideUpModal {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

body.mobile-ui-mode .modal-header {
    padding: 20px 16px;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    border-bottom: 1px solid #eee;
}

body.mobile-ui-mode .modal-header h2,
body.mobile-ui-mode .modal-header h3 {
    font-size: 1.3rem;
}

body.mobile-ui-mode .modal-close {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    top: 15px;
    right: 15px;
}

body.mobile-ui-mode .modal-body {
    padding: 16px;
}

body.mobile-ui-mode .modal-actions {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #eee;
}

body.mobile-ui-mode .modal-actions .btn {
    width: 100%;
    min-height: 48px;
}

/* ==================== 立即开始学习模态框手机端优化 ==================== */
body.mobile-ui-mode .learning-modal-futuristic {
    padding: 0 !important;
    width: 92% !important;
    max-width: 500px !important;
    height: auto !important;
    max-height: 85vh !important;
    margin: auto !important;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #F0F8FF 0%, #E6F4FF 100%) !important;
    border-radius: 28px !important;
    border: 1px solid #B8E6F5 !important;
    box-shadow: 0 12px 30px rgba(74, 144, 226, 0.15) !important;
    overflow: hidden !important;
    transform: scale(1) !important;
    transition: none !important;
    animation: none !important;
}

body.mobile-ui-mode .learning-modal-futuristic .modal-main-content {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

body.mobile-ui-mode .learning-modal-futuristic .modal-header-tech {
    padding: 0 16px !important;
    padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    min-height: auto !important;
}

body.mobile-ui-mode .learning-modal-futuristic .modal-header-tech .header-content h2,
body.mobile-ui-mode .modal-title-tech {
    font-size: 1.4rem !important;
    margin-bottom: 6px !important;
    color: #1e293b !important;
    /* 强制深色文字 */
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

body.mobile-ui-mode .learning-modal-futuristic .modal-subtitle-tech {
    font-size: 0.85rem;
    color: #64748b !important;
    /* 强制深色文字 */
}

body.mobile-ui-mode .modal-close-tech {
    color: #1e293b !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.mobile-ui-mode .learning-modal-futuristic .icon-wrapper-large {
    width: 50px;
    height: 50px;
}

body.mobile-ui-mode .learning-modal-futuristic .icon-wrapper-large i {
    font-size: 24px;
}

body.mobile-ui-mode .modal-body-tech {
    padding: 16px;
}

/* 学习选项网格 - 手机端针对性优化: 锁定为2列 */
body.mobile-ui-mode .learning-options-grid-tech {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 10px 20px !important;
}

body.mobile-ui-mode .learning-option-card-tech {
    padding: 20px 10px !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    text-align: center !important;
}

body.mobile-ui-mode .learning-option-card-tech .card-tech-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.mobile-ui-mode .learning-option-card-tech .icon-circle-tech {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    margin-bottom: 5px !important;
}

body.mobile-ui-mode .learning-option-card-tech .icon-circle-tech i {
    font-size: 20px !important;
}

body.mobile-ui-mode .learning-option-card-tech .option-name {
    font-size: 12px;
    margin-top: 6px;
}

body.mobile-ui-mode .learning-option-card-tech .option-desc {
    font-size: 10px;
    line-height: 1.3;
    margin-top: 4px;
    display: none !important;
}

body.mobile-ui-mode .learning-option-card-tech .card-desc-tech {
    font-size: 11px !important;
    /* 加重一点 */
    color: #64748b !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
    display: block !important;
    /* 在图片中是有描述的 */
}

body.mobile-ui-mode .learning-option-card-tech .icon-circle-tech i {
    font-size: 20px;
}

body.mobile-ui-mode .learning-option-card-tech .card-title-tech {
    font-size: 1rem !important;
    margin: 0 !important;
    color: #1e293b !important;
    /* 深色标题 */
}

body.mobile-ui-mode .learning-option-card-tech .option-name,
body.mobile-ui-mode .learning-option-card-tech .option-desc,
body.mobile-ui-mode .learning-option-card-tech .card-desc-tech,
body.mobile-ui-mode .learning-option-card-tech .card-features,
body.mobile-ui-mode .learning-option-card-tech .card-arrow,
body.mobile-ui-mode .learning-option-card-tech .icon-pulse,
body.mobile-ui-mode .learning-modal-futuristic .modal-stats-bar {
    background: #ffffff !important;
    border-radius: 50px !important;
    padding: 6px 16px !important;
    margin: 8px auto 16px !important;
    border: 1px solid #B8E6F5 !important;
}

body.mobile-ui-mode .modal-footer-tech {
    display: none !important;
}

body.mobile-ui-mode .learning-modal-futuristic .stat-pill-item {
    font-size: 0.8rem !important;
}

body.mobile-ui-mode .learning-modal-futuristic .stat-pill-item span {
    font-size: 0.95rem !important;
}

body.mobile-ui-mode .learning-modal-futuristic .stat-divider {
    margin: 0 10px !important;
}

body.mobile-ui-mode .learning-modal-futuristic .icon-wrapper-large,
body.mobile-ui-mode .learning-modal-futuristic .header-glow,
body.mobile-ui-mode .learning-modal-futuristic .icon-orbit,
body.mobile-ui-mode .learning-modal-futuristic .tech-bg-layer {
    display: none !important;
}

body.mobile-ui-mode .modal-footer-tech {
    padding: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.mobile-ui-mode .footer-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    color: #475569 !important;
}

body.mobile-ui-mode .stat-item {
    color: #475569 !important;
    font-size: 0.85rem !important;
}

body.mobile-ui-mode .stat-item i {
    color: #4f46e5 !important;
}

body.mobile-ui-mode .learning-option-card-tech .card-arrow {
    display: none;
}

body.mobile-ui-mode .modal-footer-tech {
    padding: 24px 16px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background: #f8fafc !important;
    /* 淡灰色页脚 */
    border-top: 1px solid #f1f5f9 !important;
    color: #475569 !important;
}

body.mobile-ui-mode .modal-footer-tech .footer-stats {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

body.mobile-ui-mode .modal-footer-tech .stat-item {
    font-size: 11px;
}

/* ==================== 角色选择模态框手机端优化 ==================== */
body.mobile-ui-mode #roleSelectionModal .modal-content {
    max-width: 100%;
}

body.mobile-ui-mode #roleSelectionModal .modal-body>div {
    flex-direction: column !important;
    gap: 16px !important;
}

body.mobile-ui-mode .role-option-modern {
    width: 100% !important;
    padding: 20px !important;
}

/* ==================== 登录/注册模态框手机端优化 ==================== */
body.mobile-ui-mode #loginModal .modal-content,
body.mobile-ui-mode #registerModal .modal-content {
    padding: 24px 20px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
}

body.mobile-ui-mode #loginModal .form-group input,
body.mobile-ui-mode #registerModal .form-group input {
    font-size: 16px;
    padding: 14px;
    min-height: 50px;
}

/* ==================== 升学冲刺区域手机端优化 ==================== */
body.mobile-ui-mode .sprint-nav-tabs {
    /* 改为2列网格布局，提高空间利用率 */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    /* 减少左右留白 */
    padding: 0 4px;
}

body.mobile-ui-mode .sprint-tab-card {
    /* 压缩卡片内边距 */
    padding: 12px 8px;
    min-height: auto;
    /* 减小卡片高度 */
    min-height: 80px;
}

body.mobile-ui-mode .sprint-tab-card .tab-icon {
    /* 缩小图标尺寸 */
    font-size: 20px;
    margin-bottom: 6px;
}

body.mobile-ui-mode .sprint-tab-card .tab-title {
    /* 缩小标题字体 */
    font-size: 13px;
    margin-bottom: 4px;
}

body.mobile-ui-mode .sprint-tab-card .tab-subtitle {
    /* 缩小副标题字体 */
    font-size: 10px;
    line-height: 1.2;
}

/* 优化卡片悬停效果，更适合手机端 */
body.mobile-ui-mode .sprint-tab-card:active {
    transform: scale(0.96) !important;
}

/* ==================== 升学冲刺Hero区域手机端优化 ==================== */
body.mobile-ui-mode .sprint-hero-section {
    min-height: 120px !important;
}

body.mobile-ui-mode .sprint-hero-wrapper {
    min-height: 120px !important;
}

body.mobile-ui-mode .sprint-hero-content {
    padding: 15px 10px !important;
}

body.mobile-ui-mode .sprint-hero-title {
    font-size: 1.4rem !important;
    margin-bottom: 5px !important;
}

body.mobile-ui-mode .sprint-hero-title i {
    font-size: 1.2rem !important;
}

body.mobile-ui-mode .sprint-hero-subtitle {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

/* ==================== 升学冲刺内容区域手机端优化 ==================== */
body.mobile-ui-mode #sprint .card {
    padding: 12px 8px !important;
}

/* 压缩各个模块的Hero横幅 */
body.mobile-ui-mode #sprint .sprint-content > div:first-child {
    padding: 15px 12px !important;
    min-height: 100px !important;
}

body.mobile-ui-mode #sprint .sprint-content > div:first-child h3 {
    font-size: 1.3rem !important;
    margin-bottom: 8px !important;
}

body.mobile-ui-mode #sprint .sprint-content > div:first-child p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}

body.mobile-ui-mode #sprint .sprint-content > div:first-child img {
    width: 80px !important;
    height: 80px !important;
}

/* 优化试卷类型选择区域 */
body.mobile-ui-mode #sprint-exam-plan > div:nth-child(2) {
    padding: 12px !important;
    margin-bottom: 12px !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(2) h4 {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(2) > div {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(2) label {
    padding: 10px !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(2) label strong {
    font-size: 0.95rem !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(2) label div {
    font-size: 0.8rem !important;
}

/* 优化个性化配置区域 */
body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) {
    padding: 15px 12px !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) h4 {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) > div > div {
    margin-bottom: 0 !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) label {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) select,
body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) input {
    padding: 10px 12px !important;
    font-size: 14px !important;
}

/* 优化专项训练配置区域 */
body.mobile-ui-mode #practiceConfigPanel {
    padding: 12px !important;
    margin-top: 12px !important;
}

body.mobile-ui-mode #practiceConfigPanel h4 {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
}

body.mobile-ui-mode #practiceConfigPanel h4 span {
    display: block !important;
    margin-top: 5px !important;
    font-size: 0.75rem !important;
}

body.mobile-ui-mode #practiceConfigPanel > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

body.mobile-ui-mode #practiceConfigPanel > div > div label {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
}

body.mobile-ui-mode #practiceConfigPanel > div > div select {
    padding: 10px 12px !important;
    font-size: 14px !important;
}

/* 优化重点领域多选 */
body.mobile-ui-mode #practiceConfigPanel > div > div:nth-child(2) > div {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

body.mobile-ui-mode #practiceConfigPanel > div > div:nth-child(2) label {
    font-size: 0.8rem !important;
}

body.mobile-ui-mode #practiceConfigPanel > div > div:nth-child(2) label input {
    width: 16px !important;
    height: 16px !important;
}

/* 优化按年级选择知识点 */
body.mobile-ui-mode #practiceConfigPanel details {
    padding: 10px !important;
}

body.mobile-ui-mode #practiceConfigPanel details > summary {
    font-size: 0.9rem !important;
}

body.mobile-ui-mode #practiceConfigPanel details > summary span {
    display: block !important;
    margin-top: 3px !important;
}

body.mobile-ui-mode #practiceConfigPanel details > div {
    gap: 10px !important;
}

body.mobile-ui-mode #practiceConfigPanel details details summary {
    font-size: 0.85rem !important;
}

body.mobile-ui-mode #practiceConfigPanel details details > div {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

body.mobile-ui-mode #practiceConfigPanel details details > div label {
    font-size: 0.75rem !important;
}

/* 优化生成按钮区域 */
body.mobile-ui-mode #sprint-exam-plan > div:nth-child(4) {
    margin-top: 15px !important;
}

body.mobile-ui-mode #generateExamBtn {
    padding: 12px 30px !important;
    font-size: 16px !important;
    width: 100% !important;
}

body.mobile-ui-mode #sprint-exam-plan > div:nth-child(4) > div:last-child {
    font-size: 0.8rem !important;
}

/* ==================== 其他冲刺模块手机端优化 ==================== */
/* 中考风向标、错题歼灭战、提分导航仪的卡片网格 */
body.mobile-ui-mode #sprint-mock-exam > div:nth-child(2),
body.mobile-ui-mode #sprint-error-training > div:nth-child(2),
body.mobile-ui-mode #sprint-knowledge-radar > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

body.mobile-ui-mode #sprint-mock-exam > div:nth-child(2) > div,
body.mobile-ui-mode #sprint-error-training > div:nth-child(2) > div,
body.mobile-ui-mode #sprint-knowledge-radar > div:nth-child(2) > div {
    padding: 20px 15px !important;
}

body.mobile-ui-mode #sprint-mock-exam > div:nth-child(2) > div > div,
body.mobile-ui-mode #sprint-error-training > div:nth-child(2) > div > div,
body.mobile-ui-mode #sprint-knowledge-radar > div:nth-child(2) > div > div {
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto 10px !important;
}

body.mobile-ui-mode #sprint-mock-exam > div:nth-child(2) > div i,
body.mobile-ui-mode #sprint-error-training > div:nth-child(2) > div i,
body.mobile-ui-mode #sprint-knowledge-radar > div:nth-child(2) > div i {
    font-size: 2em !important;
}

body.mobile-ui-mode #sprint-mock-exam > div:nth-child(2) > div h4,
body.mobile-ui-mode #sprint-error-training > div:nth-child(2) > div h4,
body.mobile-ui-mode #sprint-knowledge-radar > div:nth-child(2) > div h4 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
}

body.mobile-ui-mode #sprint-mock-exam > div:nth-child(2) > div p,
body.mobile-ui-mode #sprint-error-training > div:nth-child(2) > div p,
body.mobile-ui-mode #sprint-knowledge-radar > div:nth-child(2) > div p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

/* 优化错题歼灭战的图标样式 */
body.mobile-ui-mode #sprint-error-training > div:nth-child(2) > div i {
    margin-bottom: 10px !important;
}

/* ==================== 结果区域手机端优化 ==================== */
body.mobile-ui-mode .result-header {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    text-align: center;
}

body.mobile-ui-mode .result-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    justify-content: center;
}

body.mobile-ui-mode .result-content {
    padding: 16px;
    font-size: 15px;
    line-height: 1.7;
}

/* ==================== 帮助模态框手机端优化 ==================== */
body.mobile-ui-mode #helpModal {
    align-items: stretch;
}

body.mobile-ui-mode .help-modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    top: 0;
    left: 0;
    transform: none;
    animation: none;
}

/* 通用模态在手机端全屏展示，避免左右溢出 */
body.mobile-ui-mode .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

body.mobile-ui-mode .modal-body,
body.mobile-ui-mode .help-card {
    word-break: break-word;
}

body.mobile-ui-mode .help-modal-header {
    padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top, 0));
}

body.mobile-ui-mode .help-modal-header h2 {
    font-size: 1.2rem;
}

body.mobile-ui-mode .help-modal-close {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
}

body.mobile-ui-mode .help-modal-body {
    flex-direction: column;
}

body.mobile-ui-mode .help-nav {
    width: 100%;
    max-height: 60px;
    min-height: 60px;
    border-right: none;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
}

body.mobile-ui-mode .help-nav::-webkit-scrollbar {
    display: none;
}

body.mobile-ui-mode .help-nav-item {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 20px;
    border-left: none;
    white-space: nowrap;
    font-size: 12px;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.mobile-ui-mode .help-nav-item i {
    font-size: 14px;
}

body.mobile-ui-mode .help-nav-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

body.mobile-ui-mode .help-nav-sub {
    padding-left: 14px;
}

body.mobile-ui-mode .help-content {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    font-size: 14px;
    line-height: 1.6;
}

body.mobile-ui-mode .help-content h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
}

body.mobile-ui-mode .help-content h4 {
    font-size: 1rem;
    margin-top: 16px;
    margin-bottom: 8px;
}

body.mobile-ui-mode .help-content p {
    margin-bottom: 12px;
}

body.mobile-ui-mode .help-content ul,
body.mobile-ui-mode .help-content ol {
    padding-left: 20px;
    margin-bottom: 12px;
}

body.mobile-ui-mode .help-content li {
    margin-bottom: 6px;
}

/* 帮助模块卡片网格 */
body.mobile-ui-mode .help-module-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

body.mobile-ui-mode .help-module-card {
    padding: 14px;
    border-radius: 12px;
}

body.mobile-ui-mode .help-module-card h4 {
    font-size: 13px;
    margin: 8px 0 4px 0;
}

body.mobile-ui-mode .help-module-card p {
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
}

body.mobile-ui-mode .help-module-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* 帮助卡片样式 */
body.mobile-ui-mode .help-card {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 12px;
}

body.mobile-ui-mode .help-card h4 {
    font-size: 14px;
    margin-bottom: 8px;
}

/* 帮助标签样式 */
body.mobile-ui-mode .help-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.mobile-ui-mode .help-tag {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 16px;
}

/* FAQ样式 */
body.mobile-ui-mode .help-faq-item {
    margin-bottom: 10px;
    border-radius: 10px;
}

body.mobile-ui-mode .help-faq-question {
    padding: 12px 14px;
    font-size: 14px;
}

body.mobile-ui-mode .help-faq-answer {
    padding: 12px 14px;
    font-size: 13px;
}

/* ==================== 历史记录和错题本手机端优化 ==================== */
body.mobile-ui-mode .history-item,
body.mobile-ui-mode .errorbook-item {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 14px;
}

body.mobile-ui-mode .item-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

body.mobile-ui-mode .toolbar {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

body.mobile-ui-mode .toolbar-right {
    width: 100%;
}

body.mobile-ui-mode .toolbar-right .btn {
    width: 100%;
}

/* ==================== 学习选项模态框手机端优化 ==================== */
body.mobile-ui-mode .learning-options-modal .modal-content {
    padding: 0;
}

body.mobile-ui-mode .modal-header-tech {
    padding: 20px 16px;
}

body.mobile-ui-mode .modal-header-tech h2 {
    font-size: 1.3rem;
}

body.mobile-ui-mode .learning-options-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 16px;
}

body.mobile-ui-mode .learning-option-card {
    padding: 16px;
    min-height: auto;
}

/* ==================== 角色选择模态框手机端优化 ==================== */
body.mobile-ui-mode .role-cards {
    flex-direction: column;
    gap: 12px;
}

body.mobile-ui-mode .role-card {
    padding: 20px;
    min-height: auto;
}

body.mobile-ui-mode .role-card i {
    font-size: 36px;
}

body.mobile-ui-mode .role-card h4 {
    font-size: 16px;
}

/* ==================== 智能助手按钮手机端优化 ==================== */
body.mobile-ui-mode .ai-assistant-toggle {
    width: 56px;
    height: 56px;
    bottom: 20px;
    right: 16px;
}

body.mobile-ui-mode .ai-assistant-toggle i {
    font-size: 24px;
}

/* ==================== 试卷生成区域手机端优化 ==================== */
body.mobile-ui-mode #exam-plan .form-group {
    margin-bottom: 16px;
}

body.mobile-ui-mode #exam-plan label {
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

body.mobile-ui-mode #generateExamBtn {
    width: 100%;
    padding: 16px 24px !important;
    font-size: 16px !important;
    border-radius: 16px !important;
}

/* ==================== 提分导航仪手机端优化 ==================== */
body.mobile-ui-mode #score-navigator>div:first-child {
    flex-direction: column !important;
    text-align: center;
    gap: 16px;
}

body.mobile-ui-mode #score-navigator img {
    width: 150px !important;
    height: 150px !important;
}

body.mobile-ui-mode #score-navigator>div:last-child {
    grid-template-columns: 1fr !important;
}

/* ==================== 滚动条手机端隐藏 ==================== */
body.mobile-ui-mode::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* ==================== 触摸反馈优化 ==================== */
body.mobile-ui-mode .btn:active,
body.mobile-ui-mode .card:active,
body.mobile-ui-mode .nav-item:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* ==================== 安全区域适配（iPhone刘海屏） ==================== */
@supports (padding: env(safe-area-inset-top)) {
    body.mobile-ui-mode .header {
        padding-top: calc(0.6rem + env(safe-area-inset-top));
    }

    body.mobile-ui-mode .modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ==================== 陪伴学习页面手机端优化 ==================== */
body.mobile-ui-mode .hero-section {
    padding: 20px 16px;
}

body.mobile-ui-mode .hero-title {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

body.mobile-ui-mode .hero-subtitle {
    font-size: 0.9rem;
    margin-bottom: 16px;
}

body.mobile-ui-mode .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

body.mobile-ui-mode .stat-item {
    padding: 12px 8px;
}

body.mobile-ui-mode .stat-value {
    font-size: 1.4rem;
}

body.mobile-ui-mode .stat-label {
    font-size: 0.7rem;
}

/* 学习阶段卡片 */
body.mobile-ui-mode .learning-stages {
    grid-template-columns: 1fr !important;
    gap: 16px;
}

body.mobile-ui-mode .stage-card {
    padding: 20px 16px;
}

body.mobile-ui-mode .stage-card h3 {
    font-size: 1.1rem;
}

body.mobile-ui-mode .stage-card p {
    font-size: 0.9rem;
}

body.mobile-ui-mode .stage-card .btn {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
}

/* ==================== 其他科目页面手机端优化 ==================== */
body.mobile-ui-mode .navbar {
    padding: 12px 16px;
}

body.mobile-ui-mode .nav-container {
    flex-direction: column;
    gap: 12px;
}

body.mobile-ui-mode .nav-logo {
    font-size: 1.2rem;
}

body.mobile-ui-mode .nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

body.mobile-ui-mode .nav-menu li a {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 20px;
}

body.mobile-ui-mode .other-subjects-container {
    padding: 16px;
}

body.mobile-ui-mode .other-subjects-header {
    padding: 20px 16px;
    text-align: center;
}

body.mobile-ui-mode .other-subjects-header h1 {
    font-size: 1.5rem;
}

body.mobile-ui-mode .other-subjects-header p {
    font-size: 0.9rem;
}

body.mobile-ui-mode .info-badge {
    font-size: 0.8rem;
    padding: 8px 16px;
}

/* 科目卡片网格 */
body.mobile-ui-mode .subjects-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
}

body.mobile-ui-mode .subject-card {
    padding: 20px 16px;
}

body.mobile-ui-mode .subject-card-header {
    margin-bottom: 16px;
}

body.mobile-ui-mode .subject-icon {
    font-size: 2.5rem;
}

body.mobile-ui-mode .subject-name {
    font-size: 1.2rem;
}

body.mobile-ui-mode .subject-modules li {
    padding: 10px 0;
    font-size: 14px;
}

body.mobile-ui-mode .module-status {
    font-size: 11px;
    padding: 4px 8px;
}

/* ==================== 页脚手机端优化 ==================== */
body.mobile-ui-mode .footer {
    padding: 20px 16px;
    text-align: center;
}

body.mobile-ui-mode .footer p {
    font-size: 12px;
}

/* ==================== 桌面端模式（确保正常显示） ==================== */
body.desktop-ui-mode .ui-layout-toggle-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body.desktop-ui-mode .ui-layout-toggle-btn:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ==================== 升学冲刺系统手机端优化 ==================== */
body.mobile-ui-mode .system-container {
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
}

body.mobile-ui-mode .system-header {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.mobile-ui-mode .system-header h1 {
    font-size: 1.4rem;
}

body.mobile-ui-mode .system-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

body.mobile-ui-mode .system-nav a {
    padding: 8px 14px;
    font-size: 13px;
}

body.mobile-ui-mode .system-content {
    padding: 16px;
}

body.mobile-ui-mode .plan-grid,
body.mobile-ui-mode .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
}

body.mobile-ui-mode .plan-card,
body.mobile-ui-mode .feature-card {
    padding: 20px 16px;
}

/* ==================== 功能菜单手机端优化 ==================== */
body.mobile-ui-mode .feature-menu {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    padding: 16px;
}

body.mobile-ui-mode .feature-menu-item {
    padding: 16px 12px;
    min-height: 100px;
}

/* ==================== 其他科目首页清爽模式（对齐陪伴学习） ==================== */
body.mobile-ui-mode.other-subjects-home {
    background: #f5f7fa !important;
}

body.mobile-ui-mode.other-subjects-home .other-subjects-hero-bg {
    display: none !important;
}

body.mobile-ui-mode.other-subjects-home .subjects-main {
    padding: 10px 12px 76px !important;
}

body.mobile-ui-mode.other-subjects-home .other-subjects-container-compact {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
}

body.mobile-ui-mode.other-subjects-home .subjects-header-compact {
    padding: 6px 4px 10px !important;
    background: transparent !important;
    margin-bottom: 6px !important;
}

body.mobile-ui-mode.other-subjects-home .subjects-grid-compact {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
}

body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact {
    background: #ffffff !important;
    border: 1px solid #e6e9f0 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
    height: 110px !important;
    border-radius: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    background-image: none !important;
}

body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact::before,
body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact::after {
    display: none !important;
    content: none !important;
}

/* 再次兜底：关闭任何学科背景贴图 */
body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact.chinese,
body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact.english,
body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact.physics,
body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact.chemistry,
body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact.biology,
body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact.history,
body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact.geography,
body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-card-compact.morality-law {
    background-image: none !important;
}

body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-icon-compact {
    margin-bottom: 4px !important;
}

body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-info-compact {
    text-align: center !important;
}

body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-name-compact {
    font-size: 0.95rem !important;
}

body.mobile-ui-mode.other-subjects-home .subjects-grid-compact .subject-desc-compact {
    font-size: 0.78rem !important;
}

body.mobile-ui-mode .feature-menu-item i {
    font-size: 28px;
}

body.mobile-ui-mode .feature-menu-item span {
    font-size: 13px;
}

/* ==================== 功能对话框手机端优化 ==================== */
body.mobile-ui-mode .feature-dialog {
    width: 95%;
    max-width: 100%;
    max-height: 90vh;
    margin: 5vh auto;
    border-radius: 16px;
}

body.mobile-ui-mode .feature-dialog-header {
    padding: 16px;
}

body.mobile-ui-mode .feature-dialog-header h3 {
    font-size: 1.2rem;
}

body.mobile-ui-mode .feature-dialog-body {
    padding: 16px;
}

body.mobile-ui-mode .feature-dialog-footer {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
}

body.mobile-ui-mode .feature-dialog-footer .btn {
    width: 100%;
}

/* ==================== 模块标签页手机端优化 ==================== */
body.mobile-ui-mode .module-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}

body.mobile-ui-mode .module-tabs::-webkit-scrollbar {
    display: none;
}

body.mobile-ui-mode .module-tab {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
}

/* ==================== 输入区域手机端优化 ==================== */
body.mobile-ui-mode .input-area,
body.mobile-ui-mode .essay-input-area {
    padding: 16px;
}

body.mobile-ui-mode .input-area textarea,
body.mobile-ui-mode .essay-input-area textarea {
    min-height: 150px;
    font-size: 16px;
}

body.mobile-ui-mode .input-actions {
    flex-direction: column;
    gap: 12px;
}

body.mobile-ui-mode .input-actions .btn {
    width: 100%;
    min-height: 48px;
}

/* ==================== 结果展示区域手机端优化 ==================== */
body.mobile-ui-mode .result-area,
body.mobile-ui-mode .analysis-result {
    padding: 16px;
    border-radius: 16px;
}

body.mobile-ui-mode .result-area h3,
body.mobile-ui-mode .analysis-result h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
}

body.mobile-ui-mode .result-content {
    font-size: 15px;
    line-height: 1.8;
}

/* ==================== 加载遮罩手机端优化 ==================== */
body.mobile-ui-mode .loading-overlay {
    padding: 12px 10px 0 10px;
    align-items: flex-start;
    justify-content: center;
}

body.mobile-ui-mode .loading-content {
    padding: 14px 12px;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(79, 172, 254, 0.18);
}

body.mobile-ui-mode .loading-content p {
    font-size: 13px;
}

/* 强制陪伴学习页面显示全局底部导航 */
body.mobile-ui-mode.companion-page .mobile-bottom-nav {
    display: flex !important;
}
body.mobile-ui-mode.companion-page .main-content {
    padding-bottom: 90px;
}

/* ==================== 图片上传区域手机端优化 ==================== */
body.mobile-ui-mode .image-upload-area {
    padding: 30px 16px;
}

body.mobile-ui-mode .image-upload-area i {
    font-size: 36px;
}

body.mobile-ui-mode .image-upload-area p {
    font-size: 14px;
}

body.mobile-ui-mode .image-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* ==================== 智能助手Widget手机端优化 ==================== */
body.mobile-ui-mode .ai-assistant-widget {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
}

body.mobile-ui-mode .ai-assistant-header {
    padding: 12px 16px;
    border-radius: 0;
}

body.mobile-ui-mode .ai-assistant-messages {
    padding: 16px;
}

body.mobile-ui-mode .ai-assistant-input-area {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
}

body.mobile-ui-mode .ai-assistant-input-area input {
    min-height: 44px;
    font-size: 16px;
}

body.mobile-ui-mode .ai-assistant-input-area button {
    min-width: 44px;
    min-height: 44px;
}

/* ==================== 提分导航仪手机端优化 ==================== */
body.mobile-ui-mode .navigator-container {
    padding: 16px;
    margin: 0;
}

body.mobile-ui-mode .navigator-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.mobile-ui-mode .navigator-header h1 {
    font-size: 1.4rem;
}

body.mobile-ui-mode .navigator-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

body.mobile-ui-mode .navigator-tab {
    padding: 10px 16px;
    font-size: 13px;
}

body.mobile-ui-mode .navigator-content {
    padding: 16px;
}

body.mobile-ui-mode .chart-container {
    height: 250px !important;
}

/* ==================== 升学冲刺计划手机端优化 ==================== */
body.mobile-ui-mode .exam-container {
    padding: 16px;
    margin: 0;
    border-radius: 0;
}

body.mobile-ui-mode .exam-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.mobile-ui-mode .exam-header h1 {
    font-size: 1.4rem;
}

body.mobile-ui-mode .exam-form {
    padding: 16px;
}

body.mobile-ui-mode .exam-form .form-group {
    margin-bottom: 16px;
}

body.mobile-ui-mode .exam-form label {
    font-size: 14px;
    margin-bottom: 8px;
}

body.mobile-ui-mode .exam-form input,
body.mobile-ui-mode .exam-form select,
body.mobile-ui-mode .exam-form textarea {
    font-size: 16px;
    padding: 12px;
    min-height: 48px;
}

body.mobile-ui-mode .exam-actions {
    flex-direction: column;
    gap: 12px;
}

body.mobile-ui-mode .exam-actions .btn {
    width: 100%;
    min-height: 48px;
}

/* ==================== 亲子关怀手机端优化 ==================== */
body.mobile-ui-mode .parental-container {
    padding: 16px;
}

body.mobile-ui-mode .parental-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.mobile-ui-mode .parental-header h1 {
    font-size: 1.4rem;
}

body.mobile-ui-mode .parental-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

body.mobile-ui-mode .parental-tab {
    padding: 10px 16px;
    font-size: 13px;
}

body.mobile-ui-mode .parental-card {
    padding: 16px;
}

body.mobile-ui-mode .parental-card h3 {
    font-size: 1.1rem;
}

/* ==================== 心理咨询手机端优化 ==================== */
body.mobile-ui-mode .counseling-container {
    padding: 16px;
}

body.mobile-ui-mode .counseling-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.mobile-ui-mode .counseling-header h1 {
    font-size: 1.4rem;
}

body.mobile-ui-mode .chat-container {
    height: calc(100vh - 200px);
}

body.mobile-ui-mode .chat-messages {
    padding: 16px;
}

body.mobile-ui-mode .chat-input-area {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
}

body.mobile-ui-mode .chat-input-area input,
body.mobile-ui-mode .chat-input-area textarea {
    font-size: 16px;
    min-height: 44px;
}

body.mobile-ui-mode .chat-input-area button {
    min-width: 44px;
    min-height: 44px;
}

/* ==================== 专项训练手机端优化 ==================== */
body.mobile-ui-mode .training-container {
    padding: 16px;
    margin: 0;
}

body.mobile-ui-mode .training-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.mobile-ui-mode .training-header h1 {
    font-size: 1.4rem;
}

body.mobile-ui-mode .training-options {
    grid-template-columns: 1fr !important;
    gap: 12px;
}

body.mobile-ui-mode .training-option {
    padding: 16px;
}

body.mobile-ui-mode .training-option i {
    font-size: 28px;
}

body.mobile-ui-mode .training-option h3 {
    font-size: 1rem;
}

body.mobile-ui-mode .training-content {
    padding: 16px;
}

body.mobile-ui-mode .training-actions {
    flex-direction: column;
    gap: 12px;
}

body.mobile-ui-mode .training-actions .btn {
    width: 100%;
    min-height: 48px;
}

/* ==================== 错题歼灭战手机端优化 ==================== */
body.mobile-ui-mode .error-container {
    padding: 16px;
    margin: 0;
}

body.mobile-ui-mode .error-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.mobile-ui-mode .error-header h1 {
    font-size: 1.4rem;
}

body.mobile-ui-mode .error-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

body.mobile-ui-mode .error-tab {
    padding: 10px 16px;
    font-size: 13px;
}

body.mobile-ui-mode .error-list {
    gap: 12px;
}

body.mobile-ui-mode .error-item {
    padding: 16px;
}

body.mobile-ui-mode .error-item h3 {
    font-size: 1rem;
}

body.mobile-ui-mode .error-actions {
    flex-direction: column;
    gap: 12px;
}

body.mobile-ui-mode .error-actions .btn {
    width: 100%;
    min-height: 48px;
}

/* ==================== 每日练习手机端优化 ==================== */
body.mobile-ui-mode .practice-container {
    padding: 16px;
    margin: 0;
}

body.mobile-ui-mode .practice-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.mobile-ui-mode .practice-header h1 {
    font-size: 1.4rem;
}

body.mobile-ui-mode .practice-content {
    padding: 16px;
}

body.mobile-ui-mode .question-card {
    padding: 16px;
}

body.mobile-ui-mode .question-card h3 {
    font-size: 1rem;
}

body.mobile-ui-mode .answer-input {
    font-size: 16px;
    min-height: 100px;
}

body.mobile-ui-mode .practice-actions {
    flex-direction: column;
    gap: 12px;
}

body.mobile-ui-mode .practice-actions .btn {
    width: 100%;
    min-height: 48px;
}

/* ==================== 通用页面容器手机端优化 ==================== */
body.mobile-ui-mode .page-container,
body.mobile-ui-mode .main-container,
body.mobile-ui-mode .content-container {
    padding: 16px;
    margin: 0;
}

body.mobile-ui-mode .page-header,
body.mobile-ui-mode .section-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.mobile-ui-mode .page-header h1,
body.mobile-ui-mode .section-header h1 {
    font-size: 1.4rem;
}

body.mobile-ui-mode .page-header h2,
body.mobile-ui-mode .section-header h2 {
    font-size: 1.2rem;
}

/* ==================== 通用网格布局手机端优化 ==================== */
body.mobile-ui-mode .grid-2,
body.mobile-ui-mode .grid-3,
body.mobile-ui-mode .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 16px;
}

body.mobile-ui-mode .flex-row {
    flex-direction: column;
    gap: 12px;
}

/* ==================== 底部安全区域 ==================== */
body.mobile-ui-mode .bottom-actions,
body.mobile-ui-mode .footer-actions {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
}

/* ==================== 文科学习页面手机端优化 - 现代美学设计 ==================== */

/* 文科学习页面专用样式 */
body.mobile-ui-mode.liberal-subjects-page .liberal-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%) !important;
    padding: calc(12px + env(safe-area-inset-top, 0)) 16px 16px 16px !important;
    position: relative;
    overflow: hidden;
}

body.mobile-ui-mode.liberal-subjects-page .liberal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    animation: float 20s linear infinite;
}

@keyframes float {
    0% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-20px) translateX(10px); }
    100% { transform: translateY(0px) translateX(0px); }
}

/* 隐藏网页端Hero背景 */
body.mobile-ui-mode .other-subjects-hero-bg {
    display: none !important;
}

/* 页面整体背景 - 文科主题渐变色 */
body.mobile-ui-mode.liberal-subjects-page {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.03) 0%, 
        rgba(236, 72, 153, 0.03) 25%,
        rgba(6, 182, 212, 0.03) 50%,
        rgba(248, 113, 113, 0.03) 75%,
        rgba(245, 158, 11, 0.03) 100%) !important;
}

body.mobile-ui-mode .other-subjects-container-compact {
    position: fixed !important;
    top: 44px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 56px !important;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
}

/* 文科学习页面容器优化 */
body.mobile-ui-mode.liberal-subjects-page .liberal-subjects-container {
    padding: 16px !important;
    position: relative !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 甘雨主题 - 冰蓝色渐变背景 */
html body.mobile-ui-mode.theme-ganyu .other-subjects-container-compact {
    background: linear-gradient(180deg, #A8D8EA 0%, #5DADE2 50%, #85C1E9 100%) !important;
}

/* 宵宫主题 - 暖金橙渐变背景 */
html body.mobile-ui-mode.theme-yoimiya .other-subjects-container-compact {
    background: linear-gradient(180deg, #FFD93D 0%, #FF9F43 50%, #FFBA5C 100%) !important;
}

/* 高级模块标题 - 精简版 */
body.mobile-ui-mode .subjects-header-compact {
    text-align: center !important;
    padding: 6px 0 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: transparent !important;
    margin-bottom: 4px !important;
}

body.mobile-ui-mode .subjects-header-compact h1 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
    letter-spacing: 3px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* 隐藏副标签 */
body.mobile-ui-mode .subjects-header-compact .header-tag {
    display: none !important;
}

/* 文科学习页面科目网格布局优化 */
body.mobile-ui-mode.liberal-subjects-page .liberal-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-top: 20px !important;
    padding-bottom: 20px !important;
}

/* 文科学习页面科目卡片现代化设计 */
body.mobile-ui-mode.liberal-subjects-page .subject-card {
    position: relative !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15) !important;
    min-height: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body.mobile-ui-mode.liberal-subjects-page .subject-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        transparent 100%) !important;
    z-index: 1 !important;
}

body.mobile-ui-mode.liberal-subjects-page .card-background {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 科目卡片悬停效果 */
body.mobile-ui-mode.liberal-subjects-page .subject-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 12px 48px rgba(139, 92, 246, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.mobile-ui-mode.liberal-subjects-page .subject-card:active {
    transform: translateY(-4px) scale(1.01) !important;
}

/* 科目专属背景渐变 */
body.mobile-ui-mode.liberal-subjects-page .chinese-card {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    color: white !important;
}

body.mobile-ui-mode.liberal-subjects-page .english-card {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
    color: white !important;
}

body.mobile-ui-mode.liberal-subjects-page .history-card {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: white !important;
}

body.mobile-ui-mode.liberal-subjects-page .geography-card {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    color: white !important;
}

body.mobile-ui-mode.liberal-subjects-page .morality-card {
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%) !important;
    color: white !important;
}

/* 图标设计优化 */
body.mobile-ui-mode.liberal-subjects-page .subject-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.8rem !important;
    margin-bottom: 12px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

body.mobile-ui-mode.liberal-subjects-page .subject-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 70%) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.6s ease !important;
}

body.mobile-ui-mode.liberal-subjects-page .subject-card:hover .subject-icon::before {
    transform: translateX(100%) !important;
}

body.mobile-ui-mode.liberal-subjects-page .subject-card:hover .subject-icon {
    transform: scale(1.1) rotate(5deg) !important;
}

/* 科目标题优化 */
body.mobile-ui-mode.liberal-subjects-page .subject-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}



/* 各科目背景图 - 使用更高优先级 */
body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.chinese {
    background-image: url('../images/subject-backgrounds/语文学习背景.jpg') !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.english {
    background-image: url('../images/subject-backgrounds/英语学习背景.jpg') !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.physics {
    background-image: url('../images/subject-backgrounds/物理学习背景.jpg') !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.chemistry {
    background-image: url('../images/subject-backgrounds/化学学习背景.jpg') !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.biology {
    background-image: url('../images/subject-backgrounds/生物学习背景.jpg') !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.history {
    background-image: url('../images/subject-backgrounds/历史学习背景.jpg') !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.geography {
    background-image: url('../images/subject-backgrounds/地理学习背景.jpg') !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.morality-law {
    background-image: url('../images/subject-backgrounds/道法学习背景.jpg') !important;
}

/* 各科目半透明遮罩 - 使用::after代替::before避免冲突 */
body.mobile-ui-mode .subjects-grid-compact .subject-card-compact::before {
    display: none !important;
    content: none !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.45 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.chinese::after {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%) !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.english::after {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.physics::after {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.chemistry::after {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.biology::after {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%) !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.history::after {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.geography::after {
    background: linear-gradient(135deg, #00b894 0%, #00a882 100%) !important;
}

body.mobile-ui-mode .subjects-grid-compact .subject-card-compact.morality-law::after {
    background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%) !important;
}

/* 卡片点击效果 */
body.mobile-ui-mode .subject-card-compact:active {
    transform: scale(0.97) !important;
}

/* 隐藏副标题和箭头 */
body.mobile-ui-mode .subjects-grid-compact .subject-card-compact .subject-info-compact,
body.mobile-ui-mode .subjects-grid-compact .subject-card-compact .subject-desc-compact,
body.mobile-ui-mode .subjects-grid-compact .subject-card-compact .subject-arrow,
body.mobile-ui-mode .subjects-grid-compact .subject-card-compact i.fas {
    display: none !important;
}

/* 图标样式 - 居中 + 大尺寸 + 动画 */
body.mobile-ui-mode .subjects-grid-compact .subject-icon-compact {
    position: relative !important;
    z-index: 2 !important;
    font-size: 3rem !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: block !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.3)) !important;
    animation: mobileIconFloat 3s ease-in-out infinite !important;
    flex-shrink: 0 !important;
}

@keyframes mobileIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* 科目名称样式 - 居中 + 大字号 + 光晕 */
body.mobile-ui-mode .subjects-grid-compact .subject-name-compact {
    position: relative !important;
    z-index: 2 !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.4) !important;
    letter-spacing: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    animation: mobileTextGlow 2s ease-in-out infinite alternate !important;
}

@keyframes mobileTextGlow {
    0% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    100% {
        text-shadow: 0 0 18px rgba(255, 255, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.3);
    }
}

/* 响应式设计优化 */
@media (max-width: 480px) {
    body.mobile-ui-mode.liberal-subjects-page .liberal-grid {
        gap: 12px !important;
        grid-template-columns: 1fr !important;
    }
    
    body.mobile-ui-mode.liberal-subjects-page .subject-card {
        padding: 16px !important;
        min-height: 120px !important;
    }
    
    body.mobile-ui-mode.liberal-subjects-page .subject-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }
    
    body.mobile-ui-mode.liberal-subjects-page .subject-title {
        font-size: 1.1rem !important;
    }
    
    body.mobile-ui-mode.liberal-subjects-page .tips-list {
        grid-template-columns: 1fr !important;
    }
    
    body.mobile-ui-mode.liberal-subjects-page .page-title {
        font-size: 1.3rem !important;
    }
    
    body.mobile-ui-mode.liberal-subjects-page .page-subtitle {
        font-size: 0.85rem !important;
    }
}

@media (min-width: 768px) {
    body.mobile-ui-mode.liberal-subjects-page .liberal-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    
    body.mobile-ui-mode.liberal-subjects-page .subject-card {
        min-height: 160px !important;
        padding: 24px !important;
    }
    
    body.mobile-ui-mode.liberal-subjects-page .subject-icon {
        width: 70px !important;
        height: 70px !important;
        font-size: 2rem !important;
    }
    
    body.mobile-ui-mode.liberal-subjects-page .subject-title {
        font-size: 1.4rem !important;
    }
}

/* 动画效果优化 */
/* 页面进入动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* 卡片加载动画 */
body.mobile-ui-mode.liberal-subjects-page .subject-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

body.mobile-ui-mode.liberal-subjects-page .subject-card:nth-child(1) { animation-delay: 0.1s !important; }
body.mobile-ui-mode.liberal-subjects-page .subject-card:nth-child(2) { animation-delay: 0.2s !important; }
body.mobile-ui-mode.liberal-subjects-page .subject-card:nth-child(3) { animation-delay: 0.3s !important; }
body.mobile-ui-mode.liberal-subjects-page .subject-card:nth-child(4) { animation-delay: 0.4s !important; }
body.mobile-ui-mode.liberal-subjects-page .subject-card:nth-child(5) { animation-delay: 0.5s !important; }

/* 脉冲动画 */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

body.mobile-ui-mode.liberal-subjects-page .pulse-animation {
    animation: pulse 2s infinite !important;
}

/* 涟漪效果 */
body.mobile-ui-mode.liberal-subjects-page .ripple-effect {
    position: relative !important;
    overflow: hidden !important;
}

body.mobile-ui-mode.liberal-subjects-page .ripple-effect::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
    z-index: 1 !important;
}

body.mobile-ui-mode.liberal-subjects-page .ripple-effect:active::after {
    width: 300px !important;
    height: 300px !important;
}

/* ==================== 个人中心模态框样式 ==================== */
.user-profile-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: 11990;
    justify-content: center;
    align-items: flex-end;
}

.user-profile-content {
    width: 100%;
    max-height: 90vh;
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    animation: slideUpModal 0.3s ease;
    border-top: 2px solid red; /* 标记：个人中心模态框红线 */
}

/* 桌面端显示：居中 & 独立浮层 */
body.desktop-ui-mode .user-profile-modal,
body:not(.mobile-ui-mode) .user-profile-modal {
    align-items: center;
    padding: 24px;
}

body.desktop-ui-mode .user-profile-content,
body:not(.mobile-ui-mode) .user-profile-content {
    max-width: 720px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: scaleIn 0.25s ease;
}

body.desktop-ui-mode .user-profile-header .modal-close,
body:not(.mobile-ui-mode) .user-profile-header .modal-close {
    display: flex;
    background: rgba(255, 255, 255, 0.18);
}

@keyframes slideUpModal {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.user-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.user-profile-header h2 {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-profile-header .modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-profile-body {
    padding: 0;
    max-height: calc(90vh - 60px);
    overflow-y: auto;
}

/* 用户信息区 */
.profile-user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.profile-avatar i {
    font-size: 32px;
    color: white;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-avatar .avatar-edit-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar .avatar-edit-icon i {
    font-size: 10px;
    color: white;
}

.profile-avatar:hover .avatar-edit-icon {
    background: rgba(102, 126, 234, 0.8);
}

.profile-user-details {
    flex: 1;
}

.profile-user-details .user-nickname {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.profile-user-details .user-id {
    font-size: 0.85rem;
    color: #666;
}

.profile-user-details .login-hint {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.profile-user-details .btn-login {
    padding: 8px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* 功能菜单 */
.profile-menu {
    padding: 12px 0;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.profile-menu-item:hover {
    background: rgba(102, 126, 234, 0.05);
}

.profile-menu-item i:first-child {
    width: 24px;
    font-size: 1.1rem;
    color: #667eea;
}

.profile-menu-item span {
    flex: 1;
    margin-left: 12px;
    font-size: 0.95rem;
    color: #333;
}

.profile-menu-item .menu-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    color: white;
    border-radius: 10px;
    margin-right: 8px;
}

.profile-menu-item .menu-badge-soft {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: rgba(102, 126, 234, 0.12);
    color: #556cd6;
    border-radius: 10px;
    margin-right: 8px;
}

.profile-menu-item .menu-badge-soft.state-ok {
    background: rgba(72, 187, 120, 0.15);
    color: #276749;
}

.profile-menu-item .menu-badge-soft.state-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #b7791f;
}

.profile-menu-item i:last-child {
    color: #ccc;
    font-size: 0.9rem;
}

/* 子面板 - 居中显示 */
.profile-subpanel {
    position: fixed;
    top: 8vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 92vw;
    max-width: 480px;
    max-height: 82vh;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 12010;
    overflow: auto;
    animation: fadeInScale 0.2s ease;
    pointer-events: auto;
}

/* 保障“检查更新”子面板在移动端保持居中宽度 */
#profileUpdateCheck.profile-subpanel {
    width: 92vw;
    max-width: 480px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 8vh;
    transform: none;
    bottom: auto;
    max-height: 82vh;
    overflow: auto;
    animation: fadeInScale 0.2s ease;
    z-index: 12010;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.subpanel-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #eee;
}

.subpanel-header .back-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: #667eea;
    cursor: pointer;
}

.subpanel-header h3 {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    margin-right: 36px;
}

.subpanel-body {
    padding: 20px;
    max-height: calc(80vh - 60px);
    overflow-y: auto;
}

/* 子面板背景遮罩 */
.profile-subpanel-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 11999;
    pointer-events: auto;
}

.profile-subpanel-overlay.active {
    display: block;
}

.update-panel .update-status-card {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    word-break: break-word;
}

.update-panel .status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #444;
    padding: 6px 0;
    border-bottom: 1px dashed #ececec;
}

.update-panel .status-row:last-child {
    border-bottom: none;
}

.update-panel .status-row span:last-child {
    color: #667eea;
    font-weight: 600;
}

.update-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px dashed #d6d9ff;
    border-radius: 10px;
    background: #f7f8ff;
    margin: 10px 0;
    word-break: break-word;
}

.update-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #d6d9ff;
    border-top-color: #667eea;
    animation: updateSpin 1s linear infinite;
}

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

.update-actions {
    display: flex;
    gap: 10px;
    margin: 14px 0 6px;
}

.update-btn-primary,
.update-btn-secondary {
    flex: 1;
    padding: 13px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-top: 2px solid red; /* 标记：检查更新按钮红线 */
}

.update-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.update-btn-secondary {
    background: #fff;
    color: #556cd6;
    border: 1px solid #d6d9ff;
}

.update-note {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    background: #f8f9fa;
    border: 1px dashed #e2e8f0;
    padding: 10px 12px;
    border-radius: 10px;
    word-break: break-word;
}

.update-result {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #444;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    padding: 12px;
    border-radius: 10px;
    word-break: break-word;
}

.update-result.success {
    border-color: #48bb78;
    background: #f0fff4;
    color: #22543d;
}

.update-result.error {
    border-color: #f56565;
    background: #fff5f5;
    color: #742a2a;
}

/* 设置项 */
.setting-item {
    margin-bottom: 16px;
}

.setting-item label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

.setting-item input,
.setting-item select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    background: white;
}

.setting-item input:focus,
.setting-item select:focus {
    border-color: #667eea;
    outline: none;
}

.btn-save {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
}

/* VIP面板 */
.vip-panel {
    text-align: center;
}

.vip-banner {
    padding: 30px 20px;
    background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    border-radius: 16px;
    color: white;
    margin-bottom: 20px;
}

.vip-banner i {
    font-size: 40px;
    margin-bottom: 12px;
}

.vip-banner h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.vip-banner p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.vip-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.vip-feature {
    padding: 10px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #333;
}

.vip-feature i {
    color: #667eea;
    margin-right: 6px;
}

.vip-plans {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.vip-plan {
    flex: 1;
    padding: 16px 10px;
    background: white;
    border: 2px solid #eee;
    border-radius: 12px;
    text-align: center;
    position: relative;
}

.vip-plan.featured {
    border-color: #667eea;
}

.vip-plan .plan-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    background: #667eea;
    color: white;
    font-size: 0.7rem;
    border-radius: 10px;
}

/* 屏幕方向选择面板样式 */
.orientation-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.orientation-option {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 72px;
    touch-action: manipulation;
}

.orientation-option:active {
    transform: scale(0.98);
}

.orientation-option.active {
    background: #f0f7ff;
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.option-icon {
    width: 44px;
    height: 44px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    color: #667eea;
    font-size: 20px;
    transition: all 0.3s ease;
}

.orientation-option.active .option-icon {
    background: #667eea;
    color: #fff;
}

.option-info {
    flex: 1;
}

.option-info h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.option-info p {
    margin: 0;
    font-size: 13px;
    color: #666;
}

.option-check {
    width: 24px;
    height: 24px;
    background: #667eea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.orientation-option.active .option-check {
    opacity: 1;
    transform: scale(1);
}

.orientation-note {
    margin-top: 20px;
    font-size: 13px;
    color: #888;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #eee;
}

.section-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 8px;
}

.vip-plan h5 {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 8px;
}

.vip-plan .price {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f12711;
}

.vip-plan .price span {
    font-size: 0.75rem;
    font-weight: normal;
    color: #666;
}

.vip-note,
.bind-note,
.feedback-note {
    font-size: 0.85rem;
    color: #999;
    margin-top: 16px;
    text-align: center;
}

/* 验证码行 */
.verify-code-row {
    display: flex;
    gap: 10px;
}

.verify-code-row input {
    flex: 1;
}

.btn-send-code {
    padding: 12px 16px;
    background: white;
    border: 1px solid #667eea;
    border-radius: 10px;
    color: #667eea;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

/* 学习数据网格 */
.study-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.study-data-card {
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.study-data-card i {
    font-size: 24px;
    color: #667eea;
    margin-bottom: 10px;
}

.study-data-card .data-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.study-data-card .data-label {
    font-size: 0.8rem;
    color: #666;
}

.btn-view-detail {
    width: 100%;
    padding: 14px;
    background: white;
    border: 2px solid #667eea;
    border-radius: 10px;
    color: #667eea;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* 意见反馈 */
#feedbackContent {
    width: 100%;
    height: 150px;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1rem;
    resize: none;
}

/* 关于我们 */
.about-panel {
    text-align: center;
}

.about-logo {
    margin-bottom: 24px;
}

.about-logo i {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 12px;
}

.about-logo h4 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 4px;
}

.about-logo .version {
    font-size: 0.85rem;
    color: #666;
}

.about-info {
    padding: 20px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 12px;
    margin-bottom: 20px;
}

.about-info p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
}

.about-links {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.about-links a {
    font-size: 0.9rem;
    color: #667eea;
    text-decoration: none;
}

/* ==================== 自适应学习页面手机端适配 ==================== */

/* 隐藏手机端不需要的装饰元素 */
body.mobile-ui-mode .decoration-circle {
    display: none !important;
}

/* 页面顶部Hero区域优化 */
body.mobile-ui-mode .page-hero-section {
    margin-bottom: 0 !important;
}

body.mobile-ui-mode .page-hero-wrapper {
    height: 140px !important;
    border-radius: 0 !important;
}

body.mobile-ui-mode .page-hero-content {
    padding: 16px !important;
}

body.mobile-ui-mode .page-hero-title {
    font-size: 1.4rem !important;
    margin-bottom: 6px !important;
}

body.mobile-ui-mode .page-hero-subtitle {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}

/* 隐藏Vue应用内重复的header */
body.mobile-ui-mode #app .header {
    display: none !important;
}

/* 主容器优化 */
body.mobile-ui-mode .app-container {
    padding: 16px;
    padding-bottom: 80px;
    padding-top: 8px !important;
}

/* 功能卡片网格 */
body.mobile-ui-mode .feature-cards {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

body.mobile-ui-mode .feature-card {
    padding: 18px;
    border-radius: 14px;
}

body.mobile-ui-mode .feature-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

body.mobile-ui-mode .feature-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

body.mobile-ui-mode .feature-description {
    font-size: 0.85rem;
    margin-bottom: 14px;
    line-height: 1.5;
}

body.mobile-ui-mode .feature-button {
    height: 42px;
    font-size: 0.95rem;
    border-radius: 21px;
    width: 100%;
}

/* 存档管理区域优化 */
body.mobile-ui-mode .archives-section {
    margin-top: 20px !important;
}

body.mobile-ui-mode .archives-section .el-card {
    border-radius: 14px !important;
    overflow: hidden;
}

body.mobile-ui-mode .archives-section .card-header {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
}

body.mobile-ui-mode .archives-section .card-header span {
    font-size: 1rem !important;
}

body.mobile-ui-mode .archives-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
}

body.mobile-ui-mode .archive-card {
    padding: 16px !important;
    border-radius: 12px !important;
}

body.mobile-ui-mode .archive-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
}

body.mobile-ui-mode .archive-name {
    font-size: 1.05rem !important;
}

body.mobile-ui-mode .archive-description {
    font-size: 0.85rem !important;
    min-height: 32px !important;
}

body.mobile-ui-mode .archive-stats {
    gap: 4px !important;
}

body.mobile-ui-mode .archive-stats .stat-item {
    font-size: 0.8rem !important;
    padding: 0 !important;
    background: none !important;
}

body.mobile-ui-mode .archive-actions {
    margin-top: 12px !important;
    padding-top: 12px !important;
}

body.mobile-ui-mode .archive-actions .el-button {
    height: 36px !important;
    font-size: 0.85rem !important;
}

/* 进度统计区域 */
body.mobile-ui-mode .progress-section {
    padding: 18px;
    border-radius: 14px;
    margin-bottom: 16px;
}

body.mobile-ui-mode .progress-title {
    font-size: 1.2rem;
    margin-bottom: 14px;
}

body.mobile-ui-mode .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

body.mobile-ui-mode .stat-item {
    padding: 14px 10px;
    border-radius: 10px;
}

body.mobile-ui-mode .stat-number {
    font-size: 1.4rem;
}

body.mobile-ui-mode .stat-label {
    font-size: 0.75rem;
}

/* ==================== 学习仪表盘手机端重构 - 现代APP风格 ==================== */

/* 隐藏仪表盘装饰动画 */
body.mobile-ui-mode::before,
body.mobile-ui-mode::after {
    display: none !important;
}

/* 主容器 - 简洁紧凑 */
body.mobile-ui-mode .container {
    padding: 0 !important;
    padding-bottom: 80px !important;
    max-width: 100% !important;
}

/* 隐藏PC端头部和时间显示 */
body.mobile-ui-mode .header,
body.mobile-ui-mode .time-display,
body.mobile-ui-mode [style*="position: absolute"][style*="top: 20px"] {
    display: none !important;
}

/* Hero区域优化 - 紧凑设计 */
body.mobile-ui-mode .page-hero-section {
    margin-bottom: 0 !important;
}

body.mobile-ui-mode .page-hero-wrapper {
    max-height: 140px !important;
    border-radius: 0 !important;
}

body.mobile-ui-mode .page-hero-img {
    max-height: 140px !important;
}

body.mobile-ui-mode .page-hero-title {
    font-size: 1.25rem !important;
    margin-bottom: 4px !important;
}

body.mobile-ui-mode .page-hero-title i {
    font-size: 1.1rem !important;
}

body.mobile-ui-mode .page-hero-subtitle {
    font-size: 0.7rem !important;
    opacity: 0.9;
}

/* ==================== 手机端通用明亮现代风格（默认） ==================== */
/* 卡片重构 - 明亮简洁风格 */
body.mobile-ui-mode .card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    border: 1px solid rgba(102, 126, 234, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 禁用PC端卡片动画边框 */
body.mobile-ui-mode .card::before,
body.mobile-ui-mode .card::after {
    display: none !important;
}

/* 禁用悬停效果 */
body.mobile-ui-mode .card:hover {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* 卡片头部 - 精简设计 */
body.mobile-ui-mode .card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1) !important;
}

body.mobile-ui-mode .card-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
}

body.mobile-ui-mode .card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    margin: 0 !important;
}

/* 卡片内文字 - 确保可读性 */
body.mobile-ui-mode .card h3 {
    color: #2d3748 !important;
}

body.mobile-ui-mode .card p,
body.mobile-ui-mode .card span,
body.mobile-ui-mode .card label {
    color: #4a5568 !important;
}

/* 统计卡片 - 明亮风格 */
body.mobile-ui-mode .stat-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(102, 126, 234, 0.15) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

body.mobile-ui-mode .stat-card:hover {
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

body.mobile-ui-mode .stat-number {
    color: #667eea !important;
    -webkit-text-fill-color: #667eea !important;
}

body.mobile-ui-mode .stat-label {
    color: #4a5568 !important;
    font-size: 0.85rem !important;
}

/* 顶部导航栏 - 明亮风格 */
body.mobile-ui-mode .nav-buttons {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.15) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(10px) !important;
}

body.mobile-ui-mode .nav-btn {
    flex: 1 !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #4a5568 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: auto !important;
    max-width: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

body.mobile-ui-mode .nav-btn:active {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
}

body.mobile-ui-mode .nav-btn i,
body.mobile-ui-mode .nav-btn::before {
    font-size: 1.1rem !important;
    color: #667eea !important;
}

/* 仪表盘内容区 */
body.mobile-ui-mode #dashboard {
    padding: 12px !important;
}

/* 仪表盘网格 - 现代卡片布局 */
body.mobile-ui-mode .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* 统计网格 - 2x2布局 */
body.mobile-ui-mode .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

body.mobile-ui-mode .stat-item {
    background: rgba(102, 126, 234, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    text-align: center !important;
    border: 1px solid rgba(102, 126, 234, 0.12) !important;
}

body.mobile-ui-mode .stat-value {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #667eea !important;
    line-height: 1.2 !important;
}

/* 跨列卡片处理 */
body.mobile-ui-mode .card[style*="grid-column: span"] {
    grid-column: span 1 !important;
}

/* 图表容器优化 */
body.mobile-ui-mode .card canvas {
    max-height: 160px !important;
}

body.mobile-ui-mode [style*="height: 200px"],
body.mobile-ui-mode [style*="height: 250px"] {
    height: 160px !important;
}

/* 最近活动列表 */
body.mobile-ui-mode .recent-activity {
    max-height: 200px !important;
}

body.mobile-ui-mode .activity-item {
    padding: 10px 12px !important;
    margin: 6px 0 !important;
    background: rgba(102, 126, 234, 0.06) !important;
    border-radius: 10px !important;
    border-left: 3px solid #667eea !important;
}

body.mobile-ui-mode .activity-problem {
    font-size: 0.85rem !important;
    color: #2d3748 !important;
}

body.mobile-ui-mode .activity-meta {
    font-size: 0.7rem !important;
    color: #718096 !important;
}

/* 刷新按钮 */
body.mobile-ui-mode .refresh-btn {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
    margin-top: 8px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

/* 错误/加载状态 - 明亮风格 */
body.mobile-ui-mode .loading,
body.mobile-ui-mode .error-message {
    margin: 16px !important;
    padding: 24px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(102, 126, 234, 0.15) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
}

body.mobile-ui-mode .loading h3,
body.mobile-ui-mode .error-message h3 {
    font-size: 1.1rem !important;
    color: #2d3748 !important;
}

body.mobile-ui-mode .loading p,
body.mobile-ui-mode .error-message p {
    font-size: 0.85rem !important;
    color: #4a5568 !important;
}

/* 错题分析特殊处理 */
body.mobile-ui-mode .error-category {
    font-size: 0.8rem !important;
}

body.mobile-ui-mode .error-count {
    font-size: 0.7rem !important;
}

/* 粒子背景隐藏 */
body.mobile-ui-mode #particleCanvas {
    display: none !important;
}

/* ==================== 自适应学习快捷操作栏 ==================== */
body.mobile-ui-mode .quick-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.15);
}

body.mobile-ui-mode .quick-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

body.mobile-ui-mode .quick-action-btn.archives-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

body.mobile-ui-mode .quick-action-btn.archives-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

body.mobile-ui-mode .quick-action-btn i {
    font-size: 1rem;
}

body.mobile-ui-mode .current-archive-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 16px;
    font-size: 0.85rem;
    color: #667eea;
    flex: 1;
    min-width: 0;
}

body.mobile-ui-mode .current-archive-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mobile-ui-mode .current-archive-info i {
    flex-shrink: 0;
}


/* ==================== 手机端全屏功能面板 ==================== */
.mobile-fullscreen-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f8fafc;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.mobile-fullscreen-panel.active {
    transform: translateX(0);
}

/* 面板头部 */
.mfp-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0));
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.mfp-back-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mfp-back-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

.mfp-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.mfp-header-spacer {
    width: 40px;
    flex-shrink: 0;
}

/* 面板内容区 */
.mfp-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
}

/* 面板内的section样式优化 */
.mfp-content .section {
    padding: 0;
    margin: 0;
}

.mfp-content .card {
    margin-bottom: 16px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.mfp-content .toolbar {
    padding: 16px;
}

.mfp-content .toolbar h2 {
    font-size: 1.1rem;
}

/* Sprint标签卡片在面板内的样式 */
.mfp-content .sprint-nav-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.mfp-content .sprint-tab-card {
    padding: 16px 12px;
    border-radius: 12px;
}

.mfp-content .sprint-tab-card .tab-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.mfp-content .sprint-tab-card .tab-title {
    font-size: 14px;
}

.mfp-content .sprint-tab-card .tab-subtitle {
    font-size: 11px;
}

/* Sprint Hero在面板内隐藏 */
.mfp-content .sprint-hero-section {
    display: none;
}

/* 面板内的功能卡片网格 */
.mfp-content [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
}

/* 面板内的大图隐藏或缩小 */
.mfp-content [style*="width: 220px"][style*="height: 220px"] {
    width: 100px !important;
    height: 100px !important;
}

/* 面板内的banner优化 */
.mfp-content [style*="padding: 30px 40px"] {
    padding: 20px !important;
    flex-direction: column !important;
    text-align: center !important;
}

.mfp-content [style*="font-size: 2.2em"] {
    font-size: 1.4em !important;
}

.mfp-content [style*="font-size: 1.2em"] {
    font-size: 0.95em !important;
}

/* ==================== 手机端精致边框统一样式 ==================== */
/* 为所有功能卡片添加高级感边框效果 */
body.mobile-ui-mode .card,
body.mobile-ui-mode .glass-card,
body.mobile-ui-mode .feature-card,
body.mobile-ui-mode .feature-menu-item,
body.mobile-ui-mode .learning-option-card,
body.mobile-ui-mode .learning-option-card-tech,
body.mobile-ui-mode .stat-card,
body.mobile-ui-mode .plan-card,
body.mobile-ui-mode .role-card,
body.mobile-ui-mode .profile-menu-item,
body.mobile-ui-mode .module-tab,
body.mobile-ui-mode .helper-tab {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
}

/* 白色背景卡片使用浅色边框 */
body.mobile-ui-mode .card,
body.mobile-ui-mode .glass-card {
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

/* 功能菜单项特殊样式 - 增强渐变边框效果 */
body.mobile-ui-mode .feature-menu-item {
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 18px !important;
    transition: all 0.3s ease !important;
}

body.mobile-ui-mode .feature-menu-item:active {
    transform: scale(0.97) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

/* 学习选项卡片边框 */
body.mobile-ui-mode .learning-option-card-tech {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    border-radius: 14px !important;
}

/* 统计卡片边框 */
body.mobile-ui-mode .stat-card {
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
    border-radius: 14px !important;
}

/* 角色卡片边框 */
body.mobile-ui-mode .role-card {
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
}

/* 标签页按钮边框 */
body.mobile-ui-mode .module-tab,
body.mobile-ui-mode .helper-tab {
    border: 1.5px solid rgba(102, 126, 234, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
    border-radius: 20px !important;
}

body.mobile-ui-mode .module-tab.active,
body.mobile-ui-mode .helper-tab.active {
    border: 2px solid rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

/* Hero区域按钮精致边框 */
body.mobile-ui-mode .hero-buttons .btn,
body.mobile-ui-mode .hero-main-btn {
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 16px !important;
}

/* 输入框精致边框 */
body.mobile-ui-mode input[type="text"],
body.mobile-ui-mode input[type="number"],
body.mobile-ui-mode textarea,
body.mobile-ui-mode select {
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
}

body.mobile-ui-mode input[type="text"]:focus,
body.mobile-ui-mode input[type="number"]:focus,
body.mobile-ui-mode textarea:focus,
body.mobile-ui-mode select:focus {
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15),
        inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* 智能助手相关卡片边框 */
body.mobile-ui-mode .ai-assistant-container,
body.mobile-ui-mode .feature-grid-item,
body.mobile-ui-mode .suggestion-item,
body.mobile-ui-mode .message-bubble {
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1),
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
}

/* 功能对话框边框 */
body.mobile-ui-mode .feature-dialog,
body.mobile-ui-mode .modal-content {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px !important;
}

/* ==================== 手机端全屏面板安全区域适配 ==================== */
/* 升学冲刺等模块的全屏模态框头部 */
.mobile-fullscreen-panel .mfp-header {
    /* 手机端安全区域适配 - 40px顶部内边距避免被摄像头/刘海遮挡 */
    padding-top: 40px !important;
}
/* ==================== 手机端 智能解题-加载模态 ==================== */
body.mobile-ui-mode .mobile-solve-loading-overlay {
    position: fixed;
    inset: 0;
    display: none; /* 仅在JS控制下显示 */
    align-items: center;
    justify-content: center;
    z-index: 10050; /* 高于mobile-fullscreen-panel(10001) */
    background: radial-gradient(1200px 600px at 50% -10%, rgba(102,126,234,0.15), transparent 60%),
                linear-gradient(180deg, rgba(102,126,234,0.12), rgba(118,75,162,0.12));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));
}

body.mobile-ui-mode .mobile-solve-loading-card {
    width: min(92%, 520px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(102,126,234,0.25);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(102,126,234,0.25);
}

/* 三点加载动画（复刻AI私教风格） */
body.mobile-ui-mode .mobile-solve-loading-dots { display: flex; gap: 6px; }
body.mobile-ui-mode .mobile-solve-loading-dots span {
    width: 10px; height: 10px; border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    animation: mobileLoadingBounce 1.4s ease-in-out infinite both;
}
body.mobile-ui-mode .mobile-solve-loading-dots span:nth-child(1){ animation-delay: 0s; }
body.mobile-ui-mode .mobile-solve-loading-dots span:nth-child(2){ animation-delay: .2s; }
body.mobile-ui-mode .mobile-solve-loading-dots span:nth-child(3){ animation-delay: .4s; }

@keyframes mobileLoadingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* 文案区域 */
body.mobile-ui-mode .mobile-solve-loading-texts { min-width: 0; }
body.mobile-ui-mode .mobile-solve-loading-text-main {
    font-size: 15px; font-weight: 700; color: #1f2937; line-height: 1.35;
    white-space: nowrap; overflow: hidden;
}
body.mobile-ui-mode .mobile-solve-loading-text-sub {
    margin-top: 2px; font-size: 13px; color: #6b7280;
}

/* 中断按钮 */
body.mobile-ui-mode .mobile-solve-cancel-btn {
    background: #ef4444; color:#fff; border:none; border-radius: 10px; padding: 8px 12px; 
    font-weight: 600; box-shadow: 0 4px 12px rgba(239,68,68,.25);
}
body.mobile-ui-mode .mobile-solve-cancel-btn:active { transform: scale(.96); }

/* ==================== 陪伴学习移动端优化·单屏排版与降温 ==================== */
/* 背景动画简化，减少 GPU 占用 */
body.mobile-ui-mode.companion-page {
    /* 顶部安全留白，避免刘海遮挡；额外加基础间距 */
    padding-top: calc(24px + env(safe-area-inset-top, 0));
}

html.mobile-ui-mode.companion-page {
    padding-top: calc(24px + env(safe-area-inset-top, 0));
}

body.mobile-ui-mode.companion-page .header,
body.mobile-ui-mode.companion-page .navbar,
body.mobile-ui-mode.companion-page nav.navbar {
    top: env(safe-area-inset-top, 0);
    padding-top: calc(16px + env(safe-area-inset-top, 0)) !important;
    padding-bottom: 12px !important;
}

body.mobile-ui-mode.companion-page .bg-animation {
    background: linear-gradient(135deg, #e8f3ff 0%, #f7fbff 50%, #eef4ff 100%) !important;
    background-attachment: scroll;
}
body.mobile-ui-mode.companion-page .bg-animation::before,
body.mobile-ui-mode.companion-page .bg-animation::after {
    display: none !important;
    animation: none !important;
}

/* 顶部返回与面包屑（仅移动端显示） */
.mobile-nav-bar { display: none; }
body.mobile-ui-mode.companion-page .mobile-nav-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0) + 20px);
    padding: calc(14px + env(safe-area-inset-top, 0)) 16px 12px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95));
    box-shadow: 0 10px 25px rgba(79, 172, 254, 0.18);
    z-index: 10000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    margin-bottom: 12px;
    opacity: 0.95;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
body.mobile-ui-mode.companion-page .mobile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: #0f172a;
    border: none;
    border-radius: 12px;
    padding: 8px 12px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}
body.mobile-ui-mode.companion-page .mobile-back-btn i { color: #667eea; }
body.mobile-ui-mode.companion-page .mobile-crumb {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
}
body.mobile-ui-mode.companion-page .mobile-crumb .crumb-parent { color: #dbeafe; }
body.mobile-ui-mode.companion-page .mobile-crumb .crumb-current { color: #ffffff; }

/* 单屏紧凑排版 */
body.mobile-ui-mode.companion-page .container { padding: 0 16px; }
body.mobile-ui-mode.companion-page .main-content { padding-top: calc(28px + env(safe-area-inset-top, 0)); }
body.mobile-ui-mode.companion-page .input-section { padding: 10px 0 14px; }
body.mobile-ui-mode.companion-page .input-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 18px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 12px 28px rgba(79, 172, 254, 0.16);
    backdrop-filter: blur(6px);
    overflow: hidden;
}
body.mobile-ui-mode.companion-page .input-title {
    font-size: 1.25rem;
    padding: 14px 14px 4px 14px;
}
body.mobile-ui-mode.companion-page .input-hint {
    padding: 0 14px 10px 14px;
    font-size: 0.92rem;
    line-height: 1.5;
}
body.mobile-ui-mode.companion-page .input-form {
    padding: 12px 14px 14px 14px;
    gap: 10px;
}
body.mobile-ui-mode.companion-page .form-row { flex-direction: column; gap: 12px; }
body.mobile-ui-mode.companion-page .form-group { gap: 4px; margin: 0; }
body.mobile-ui-mode.companion-page .form-select,
body.mobile-ui-mode.companion-page .form-input,
body.mobile-ui-mode.companion-page .form-control {
    min-height: 44px;
    border-radius: 12px;
    padding: 10px 12px;
}
body.mobile-ui-mode.companion-page .form-textarea {
    min-height: 110px;
    border-radius: 12px;
    padding: 10px;
}

/* ==================== 移动端角色/入口选择模态优化 ==================== */
body.mobile-ui-mode .modal .modal-content {
    max-width: 440px;
    width: 92%;
    padding: 16px 14px;
    border-radius: 18px;
}

body.mobile-ui-mode .role-selection-container {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: 1fr;
    gap: 10px;
    height: calc(100vh - 180px);
    max-height: 560px;
}

/* 现代入口卡片（学生/家长）紧凑化并同屏可见 */
body.mobile-ui-mode .role-option-modern {
    min-height: 0 !important;
    height: 100%;
    padding: 14px 12px !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body.mobile-ui-mode .role-option-modern > div:first-child {
    display: grid;
    gap: 8px;
    justify-items: center;
}

body.mobile-ui-mode .role-option-modern h3 {
    font-size: 1.08rem !important;
    margin: 4px 0 !important;
}

body.mobile-ui-mode .role-option-modern p {
    font-size: 0.9rem !important;
    margin: 0 !important;
}

body.mobile-ui-mode .role-option-modern ul {
    display: none !important;
}

body.mobile-ui-mode .role-option-modern .card-icon,
body.mobile-ui-mode .role-option-modern i.fas {
    margin-bottom: 0 !important;
}

/* 输入方式标签压缩为单屏网格 */
body.mobile-ui-mode.companion-page .input-method-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
body.mobile-ui-mode.companion-page .input-tab {
    padding: 9px 6px;
    font-size: 0.88rem;
    min-width: auto;
}

/* 主要行动按钮贴底可见 */
body.mobile-ui-mode.companion-page .btn-large,
body.mobile-ui-mode.companion-page #analyzeBtn {
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(79, 172, 254, 0.25);
    position: sticky;
    bottom: 12px;
}

/* 结果/引导区收紧 */
body.mobile-ui-mode.companion-page .guidance-section,
body.mobile-ui-mode.companion-page .results-section {
    margin-top: 12px;
}
body.mobile-ui-mode.companion-page .guidance-card,
body.mobile-ui-mode.companion-page .result-card,
body.mobile-ui-mode.companion-page .analysis-card {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 22px rgba(79, 172, 254, 0.16);
    backdrop-filter: blur(4px);
}

/* 陪伴学习 - 题目输入区极限压缩，减少首屏滚动 */
body.mobile-ui-mode.companion-page .input-area { margin-top: 4px; }
body.mobile-ui-mode.companion-page .form-group label { margin-bottom: 0; font-size: 0.95rem; }
body.mobile-ui-mode.companion-page .input-card .input-title { margin: 0; }
body.mobile-ui-mode.companion-page .input-card .input-hint { margin: 0; }
body.mobile-ui-mode.companion-page .input-card { margin: 0 0 10px 0; }

/* 数学符号输入助手：轻量化为浅色卡片并收紧高度 */
body.mobile-ui-mode.companion-page .math-symbols-panel {
    background: linear-gradient(135deg, #f3f7ff 0%, #eef4ff 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.25);
    padding: 10px 12px;
    margin: 6px 0 4px 0;
    box-shadow: 0 6px 16px rgba(79, 172, 254, 0.16);
}
body.mobile-ui-mode.companion-page .math-symbols-header { margin-bottom: 4px; color: #0f172a; }
body.mobile-ui-mode.companion-page .math-symbols-title { font-size: 14px; color: #0f172a; }
body.mobile-ui-mode.companion-page .math-symbols-toggle {
    background: #e2e8f0;
    color: #0f172a;
    padding: 6px 10px;
    border-radius: 10px;
}
body.mobile-ui-mode.companion-page .math-symbols-content {
    border-radius: 10px;
    padding: 8px;
    background: #fff;
}
body.mobile-ui-mode.companion-page .symbol-category {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px;
}
body.mobile-ui-mode.companion-page .category-title { color: #0f172a; font-size: 13px; }
body.mobile-ui-mode.companion-page .symbol-btn {
    padding: 8px;
    font-size: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
body.mobile-ui-mode.companion-page .quick-insert-area,
body.mobile-ui-mode.companion-page .usage-tips {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}
body.mobile-ui-mode.companion-page .quick-insert-title,
body.mobile-ui-mode.companion-page .usage-tips-title { color: #0f172a; }

/* 陪伴学习-通用页面头部/统计/图表压缩（课前预习、课后巩固、学习进度共用） */
body.mobile-ui-mode.companion-page .page-header { padding: 8px 0 4px 0; }
body.mobile-ui-mode.companion-page .page-title { font-size: 1.2rem; margin: 0 0 2px 0; }
body.mobile-ui-mode.companion-page .page-subtitle { font-size: 0.9rem; margin: 0; }
body.mobile-ui-mode.companion-page .overview-section {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px 0 6px 0;
}
body.mobile-ui-mode.companion-page .stat-card { padding: 14px; gap: 12px; }
body.mobile-ui-mode.companion-page .stat-icon { width: 48px; height: 48px; font-size: 1.2rem; }
body.mobile-ui-mode.companion-page .stat-value { font-size: 1.4rem; }
body.mobile-ui-mode.companion-page .stat-label { font-size: 0.9rem; }
body.mobile-ui-mode.companion-page .charts-section {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 6px 0 10px 0;
}
body.mobile-ui-mode.companion-page .chart-card { padding: 14px; border-radius: 16px; }
body.mobile-ui-mode.companion-page .chart-body { height: 220px; }
body.mobile-ui-mode.companion-page .chart-card.full-width .chart-body { height: 240px; }
body.mobile-ui-mode.companion-page .activity-section { padding: 8px 0 14px 0; }
body.mobile-ui-mode.companion-page .activity-card { padding: 14px; border-radius: 16px; }
body.mobile-ui-mode.companion-page .timeline { gap: 12px; }
body.mobile-ui-mode.companion-page .timeline-item { padding: 12px; gap: 12px; }
body.mobile-ui-mode.companion-page .timeline-icon { width: 40px; height: 40px; font-size: 1.1rem; }
body.mobile-ui-mode.companion-page .steps-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.mobile-ui-mode.companion-page .action-buttons {
    flex-direction: column;
    gap: 10px;
}

/* ==================== 升学冲刺 - 省市选择器手机端优化 ==================== */
/* 隐藏区县选择器 */
body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) > div > div:has(select[id="district"]) {
    display: none !important;
}

/* 优化省市选择器布局 - 改为2列网格 */
body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) > div {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

/* 省市选择器标签字体优化 */
body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) label {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
}

/* 省市选择器输入框优化 */
body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) select,
body.mobile-ui-mode #sprint-exam-plan > div:nth-child(3) input {
    padding: 10px 12px !important;
    font-size: 14px !important;
    min-height: 44px !important;
}
body.mobile-ui-mode.companion-page .action-buttons button { width: 100%; min-width: auto; }

/* Mini Program safe-area fallback for bottom nav */
body.mini-program-safe .mobile-bottom-nav {
    padding-bottom: var(--mp-safe-bottom, 0px);
    height: calc(56px + var(--mp-safe-bottom, 0px));
}

body.mini-program-safe {
    padding-bottom: calc(56px + var(--mp-safe-bottom, 0px));
}