/**
 * ======================================================
 * 手机端APP化样式 - 移动端专用
 * 版本：1.1 - 修复底部导航显示问题
 * 说明：配合 style.css 使用，仅在手机端生效
 * ======================================================
 */

/* ======================================================
   CSS变量 - 手机端专属
   ====================================================== */
:root {
    --mobile-header-height: 52px;
    --mobile-bottom-nav-height: 64px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-radius: 12px;
    --mobile-radius-sm: 8px;
    --mobile-radius-lg: 16px;
    --mobile-shadow: 0 2px 16px rgba(0,0,0,0.08);
    --mobile-shadow-heavy: 0 4px 24px rgba(0,0,0,0.12);
    --mobile-font-base: 16px;
    --mobile-font-sm: 14px;
    --mobile-font-xs: 12px;
    --mobile-font-lg: 18px;
    --mobile-font-xl: 22px;
    --mobile-touch-target: 44px;
    --mobile-spacing: 12px;
    --mobile-spacing-lg: 16px;
    --mobile-spacing-xl: 20px;
}

/* ======================================================
   基础重置 - 移动端优化
   ====================================================== */
@media (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        font-size: var(--mobile-font-base);
        line-height: 1.7;
        padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom) + 8px);
        background: #f5f7fa;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* 所有输入框在手机上不小于16px（防iOS缩放） */
    input, select, textarea, button {
        font-size: var(--mobile-font-base) !important;
    }

    /* 容器内边距统一 */
    .container {
        padding-left: var(--mobile-spacing) !important;
        padding-right: var(--mobile-spacing) !important;
        max-width: 100% !important;
    }

    /* ======================================================
       顶部导航 - 手机版
       ====================================================== */
    .navbar {
        padding: 0 var(--mobile-spacing) !important;
        height: var(--mobile-header-height) !important;
        min-height: var(--mobile-header-height) !important;
        background: rgba(255,255,255,0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 品牌Logo */
    .navbar-brand {
        font-size: 18px !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .navbar-brand .brand-icon {
        font-size: 22px !important;
    }
    .navbar-brand .brand-text {
        font-size: 16px !important;
    }

    /* 导航按钮组 - 右侧 */
    .navbar-nav {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .navbar-nav .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        min-height: 32px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .navbar-nav .btn-sm {
        padding: 4px 10px !important;
        font-size: 11px !important;
        min-height: 30px !important;
    }

    /* 汉堡菜单按钮 */
    .navbar-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        padding: 8px 6px;
        background: none;
        border: none;
        cursor: pointer;
        min-height: 44px;
        min-width: 44px;
        align-items: center;
        justify-content: center;
    }
    .navbar-toggle span {
        display: block;
        width: 24px;
        height: 2.5px;
        background: #1f2937;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    .navbar-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 5px);
    }
    .navbar-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .navbar-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -5px);
    }

    /* 桌面端导航按钮在手机上隐藏（除了新建和汉堡） */
    .navbar-nav .btn-desktop-only {
        display: none !important;
    }

    /* 新建按钮 - 手机端突出显示 */
    .navbar-nav .btn-new-mobile {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
        color: white !important;
        border: none !important;
        padding: 6px 14px !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 10px rgba(139,92,246,0.3) !important;
    }
    .navbar-nav .btn-new-mobile:hover {
        transform: scale(1.02) !important;
    }

    /* ======================================================
       抽屉菜单
       ====================================================== */
    .drawer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .drawer-menu {
        position: fixed;
        top: 0;
        right: -280px;
        width: 260px;
        max-width: 80vw;
        height: 100%;
        background: white;
        z-index: 1000;
        padding: var(--mobile-spacing-lg) var(--mobile-spacing);
        box-shadow: -4px 0 30px rgba(0,0,0,0.15);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        display: flex !important;
        flex-direction: column;
        gap: 4px;
    }
    .drawer-menu.active {
        right: 0;
    }

    .drawer-menu .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: var(--mobile-spacing);
        border-bottom: 1px solid #f3f4f6;
        margin-bottom: var(--mobile-spacing);
    }
    .drawer-menu .drawer-header .user-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .drawer-menu .drawer-header .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #8b5cf6, #6d28d9);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 16px;
    }
    .drawer-menu .drawer-header .user-name {
        font-weight: 600;
        font-size: 15px;
        color: #1f2937;
    }
    .drawer-menu .drawer-header .user-email {
        font-size: 12px;
        color: #9ca3af;
    }
    .drawer-menu .drawer-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #6b7280;
        padding: 4px 8px;
        cursor: pointer;
        min-height: 44px;
        min-width: 44px;
    }

    .drawer-menu .drawer-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: var(--mobile-radius-sm);
        color: #374151;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        transition: background 0.2s;
        min-height: 48px;
    }
    .drawer-menu .drawer-item:hover,
    .drawer-menu .drawer-item:active {
        background: #f3f4f6;
    }
    .drawer-menu .drawer-item .icon {
        font-size: 20px;
        width: 28px;
        text-align: center;
        flex-shrink: 0;
    }
    .drawer-menu .drawer-item .badge-dot {
        margin-left: auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ef4444;
    }
    .drawer-menu .drawer-divider {
        height: 1px;
        background: #f3f4f6;
        margin: 6px 0;
    }
    .drawer-menu .drawer-item.danger {
        color: #ef4444;
    }
    .drawer-menu .drawer-item.danger:hover {
        background: #fef2f2;
    }

    /* ======================================================
       ⭐ 底部导航栏 - 手机版（强制显示）
       ====================================================== */
    .bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom));
        padding-bottom: var(--mobile-safe-bottom);
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0,0,0,0.05);
        align-items: stretch;
        justify-content: space-around;
        z-index: 999;
        box-shadow: 0 -2px 16px rgba(0,0,0,0.06);
    }

    .bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        text-decoration: none;
        color: #9ca3af;
        font-size: 10px;
        font-weight: 500;
        transition: color 0.2s;
        padding: 4px 0;
        min-height: 44px;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    .bottom-nav .nav-item .nav-icon {
        font-size: 22px;
        line-height: 1.2;
        transition: transform 0.2s;
    }
    .bottom-nav .nav-item .nav-label {
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: 0.3px;
    }
    .bottom-nav .nav-item:active .nav-icon {
        transform: scale(0.9);
    }

    .bottom-nav .nav-item.active {
        color: #8b5cf6;
    }
    .bottom-nav .nav-item.active .nav-icon {
        transform: scale(1.05);
    }

    /* 中间新建按钮 - 突出 */
    .bottom-nav .nav-item.nav-center {
        position: relative;
        top: -8px;
    }
    .bottom-nav .nav-item.nav-center .nav-icon-wrap {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(139,92,246,0.4);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .bottom-nav .nav-item.nav-center:active .nav-icon-wrap {
        transform: scale(0.92);
        box-shadow: 0 2px 10px rgba(139,92,246,0.3);
    }
    .bottom-nav .nav-item.nav-center .nav-icon {
        font-size: 26px;
        color: white;
    }
    .bottom-nav .nav-item.nav-center .nav-label {
        color: #8b5cf6;
        font-weight: 600;
    }

    /* 底部导航徽章 */
    .bottom-nav .nav-item .badge-count {
        position: absolute;
        top: 2px;
        right: 50%;
        transform: translateX(18px);
        background: #ef4444;
        color: white;
        font-size: 9px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        border: 2px solid white;
        box-sizing: border-box;
    }

    /* ======================================================
       页面内容 - 适配固定导航
       ====================================================== */
    /* 页面顶部留出导航高度 */
    .page-content {
        padding-top: calc(var(--mobile-header-height) + 8px);
        padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom) + 8px);
        min-height: 100vh;
        display: block;
    }

    /* 各页面容器 */
    .dashboard-page,
    .task-center-page,
    .task-detail-page,
    .settings-page,
    .workflow-settings-page,
    .upgrade-page,
    .new-task-page,
    .auth-page,
    .admin-page {
        padding-top: calc(var(--mobile-header-height) + 4px) !important;
        padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom) + 12px) !important;
        min-height: 100vh !important;
    }

    /* 修复任务详情页的特殊高度 */
    .task-detail-page {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: visible !important;
        display: block !important;
    }
    .task-detail-page .container {
        padding-top: 4px !important;
        padding-bottom: 20px !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        display: block !important;
    }
    .task-detail-page .workbench {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        gap: 12px !important;
    }
    .task-detail-page .chat-panel {
        max-height: 55vh !important;
        min-height: 300px !important;
        flex: none !important;
    }
    .task-detail-page .final-panel {
        max-height: 60vh !important;
        min-height: 300px !important;
        flex: none !important;
    }

    /* ======================================================
       按钮 - 移动端优化
       ====================================================== */
    .btn {
        min-height: var(--mobile-touch-target) !important;
        padding: 8px 20px !important;
        font-size: var(--mobile-font-base) !important;
        border-radius: var(--mobile-radius-sm) !important;
    }
    .btn-sm {
        min-height: 36px !important;
        padding: 4px 14px !important;
        font-size: var(--mobile-font-sm) !important;
    }
    .btn-large {
        min-height: 52px !important;
        padding: 12px 28px !important;
        font-size: var(--mobile-font-lg) !important;
    }
    .btn-block {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ======================================================
       表单 - 移动端优化
       ====================================================== */
    .form-control {
        min-height: 48px !important;
        padding: 12px 14px !important;
        font-size: var(--mobile-font-base) !important;
        border-radius: var(--mobile-radius-sm) !important;
        border-width: 1.5px !important;
    }
    textarea.form-control {
        min-height: 120px !important;
        padding: 12px 14px !important;
    }
    select.form-control {
        min-height: 48px !important;
        padding: 10px 14px !important;
        appearance: auto !important;
        -webkit-appearance: auto !important;
    }
    .form-group {
        margin-bottom: var(--mobile-spacing) !important;
    }
    .form-group label {
        font-size: var(--mobile-font-sm) !important;
        margin-bottom: 4px !important;
    }
    .form-hint {
        font-size: var(--mobile-font-xs) !important;
    }

    /* ======================================================
       卡片 - 移动端优化
       ====================================================== */
    .card {
        padding: var(--mobile-spacing) var(--mobile-spacing-lg) !important;
        border-radius: var(--mobile-radius) !important;
        margin-bottom: var(--mobile-spacing) !important;
        box-shadow: var(--mobile-shadow) !important;
    }

    /* ======================================================
       统计卡片 - 移动端
       ====================================================== */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: var(--mobile-spacing) !important;
    }
    .stat-card {
        padding: 14px 12px !important;
        border-radius: var(--mobile-radius) !important;
        gap: 10px !important;
    }
    .stat-card .stat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }
    .stat-card .stat-number {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
    .stat-card .stat-label {
        font-size: 12px !important;
    }

    /* ======================================================
       表格 → 卡片列表（移动端）
       ====================================================== */
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 calc(-1 * var(--mobile-spacing)) !important;
        padding: 0 var(--mobile-spacing) !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .table {
        font-size: var(--mobile-font-sm) !important;
        min-width: 600px !important;
    }
    .table th,
    .table td {
        padding: 8px 10px !important;
        font-size: var(--mobile-font-sm) !important;
    }
    .table th {
        font-size: 12px !important;
    }

    /* 卡片列表模式（用于任务列表等） */
    .card-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    .card-list .card-item {
        background: white !important;
        border-radius: var(--mobile-radius) !important;
        padding: var(--mobile-spacing) !important;
        box-shadow: var(--mobile-shadow) !important;
        border: 1px solid rgba(0,0,0,0.04) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .card-list .card-item .item-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .card-list .card-item .item-title {
        font-weight: 600 !important;
        font-size: var(--mobile-font-base) !important;
        color: #1f2937 !important;
        flex: 1 !important;
        min-width: 0 !important;
        word-break: break-word !important;
    }
    .card-list .card-item .item-meta {
        font-size: var(--mobile-font-xs) !important;
        color: #9ca3af !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }
    .card-list .card-item .item-actions {
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        margin-top: 4px !important;
    }
    .card-list .card-item .item-actions .btn {
        min-height: 32px !important;
        padding: 2px 12px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
    }

    /* ======================================================
       筛选标签 - 移动端横向滚动
       ====================================================== */
    .filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding: 2px 0 !important;
        margin: 0 calc(-1 * var(--mobile-spacing)) !important;
        padding: 0 var(--mobile-spacing) !important;
        scroll-snap-type: x mandatory !important;
        -webkit-scroll-snap-type: x mandatory !important;
    }
    .filter-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .filter-tab {
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        padding: 6px 16px !important;
        font-size: var(--mobile-font-sm) !important;
        border-radius: 20px !important;
        white-space: nowrap !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* ======================================================
       分页 - 移动端
       ====================================================== */
    .pagination {
        gap: 4px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .page-link {
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 10px !important;
        font-size: var(--mobile-font-sm) !important;
        border-radius: var(--mobile-radius-sm) !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ======================================================
       弹窗 - 移动端底部弹出
       ====================================================== */
    .modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    .modal .modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.4) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    .modal .modal-content {
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        border-radius: var(--mobile-radius-lg) var(--mobile-radius-lg) 0 0 !important;
        padding: var(--mobile-spacing-xl) var(--mobile-spacing-lg) calc(var(--mobile-spacing-lg) + var(--mobile-safe-bottom)) !important;
        margin: 0 !important;
        animation: slideUp 0.3s ease !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.15) !important;
        transform: none !important;
        overflow-y: auto !important;
    }
    .modal .modal-content .modal-handle {
        width: 40px !important;
        height: 4px !important;
        background: #e5e7eb !important;
        border-radius: 2px !important;
        margin: -8px auto 16px auto !important;
        display: block !important;
    }
    .modal .modal-content .modal-header {
        padding-bottom: var(--mobile-spacing) !important;
        border-bottom: 1px solid #f3f4f6 !important;
        margin-bottom: var(--mobile-spacing) !important;
    }
    .modal .modal-content .modal-header h3 {
        font-size: var(--mobile-font-lg) !important;
    }
    .modal .modal-content .modal-close {
        font-size: 28px !important;
        padding: 4px 8px !important;
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* ======================================================
       Toast - 移动端优化
       ====================================================== */
    #toastContainer {
        top: calc(var(--mobile-header-height) + 8px) !important;
        right: var(--mobile-spacing) !important;
        left: var(--mobile-spacing) !important;
        max-width: 100% !important;
        width: auto !important;
    }
    #toastContainer .toast-item {
        padding: 12px 16px !important;
        font-size: var(--mobile-font-sm) !important;
        border-radius: var(--mobile-radius-sm) !important;
        min-height: 44px !important;
        box-shadow: var(--mobile-shadow-heavy) !important;
    }

    /* ======================================================
       配额卡片 - 移动端
       ====================================================== */
    .quota-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: var(--mobile-spacing-xl) !important;
        border-radius: var(--mobile-radius) !important;
        gap: 12px !important;
    }
    .quota-card .quota-left {
        text-align: center !important;
        width: 100% !important;
    }
    .quota-card .quota-center {
        padding: 0 !important;
        width: 100% !important;
    }
    .quota-card .quota-number {
        font-size: 38px !important;
    }
    .quota-card .quota-right {
        width: 100% !important;
        text-align: center !important;
    }
    .quota-card .btn-quota-upgrade {
        width: 100% !important;
        text-align: center !important;
        padding: 12px !important;
    }
    .quota-card .quota-plan-name {
        font-size: 20px !important;
    }

    /* ======================================================
       Hero - 首页移动端
       ====================================================== */
    .hero {
        padding: 40px 0 60px !important;
        min-height: auto !important;
    }
    .hero-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    .hero-desc {
        font-size: var(--mobile-font-base) !important;
        line-height: 1.7 !important;
    }
    .hero-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .hero-actions .btn {
        width: 100% !important;
        max-width: 320px !important;
    }
    .hero-stats {
        gap: 24px !important;
        flex-wrap: wrap !important;
        margin-top: 32px !important;
        padding-top: 24px !important;
    }
    .hero-stats .stat-number {
        font-size: 26px !important;
    }

    /* ======================================================
       特性卡片 - 首页移动端
       ====================================================== */
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: var(--mobile-spacing) !important;
    }
    .feature-card {
        padding: var(--mobile-spacing-lg) !important;
        border-radius: var(--mobile-radius) !important;
    }
    .feature-card .feature-icon-wrapper {
        width: 56px !important;
        height: 56px !important;
        font-size: 26px !important;
    }
    .feature-card h3 {
        font-size: var(--mobile-font-lg) !important;
    }
    .feature-card p {
        font-size: var(--mobile-font-sm) !important;
    }

    /* ======================================================
       设置页 - 移动端
       ====================================================== */
    .settings-grid {
        grid-template-columns: 1fr !important;
        gap: var(--mobile-spacing) !important;
    }
    .settings-card {
        padding: var(--mobile-spacing) var(--mobile-spacing-lg) !important;
        border-radius: var(--mobile-radius) !important;
    }
    .settings-card .card-header h3 {
        font-size: var(--mobile-font-lg) !important;
    }

    /* 公众号列表 */
    .wechat-item {
        padding: var(--mobile-spacing) !important;
    }
    .wechat-item .row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .wechat-item .info {
        flex-wrap: wrap !important;
    }
    .wechat-item .actions {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    .wechat-item .actions .btn {
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 4px 12px !important;
    }
    .wechat-item .edit-form .form-row {
        grid-template-columns: 1fr !important;
    }

    .bind-form .form-row {
        grid-template-columns: 1fr !important;
    }

    /* ======================================================
       工作流设置 - 移动端
       ====================================================== */
    .workflow-settings-page .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .workflow-settings-page .settings-grid {
        grid-template-columns: 1fr !important;
        gap: var(--mobile-spacing) !important;
    }

    /* 工作流卡片 */
    .workflow-settings-page .workflow-item {
        padding: var(--mobile-spacing) !important;
    }
    .workflow-settings-page .workflow-item .wf-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .workflow-settings-page .workflow-item .wf-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .workflow-settings-page .adv-panel .adv-grid {
        grid-template-columns: 1fr !important;
    }

    /* ======================================================
       升级套餐 - 移动端
       ====================================================== */
    .plans-grid {
        grid-template-columns: 1fr !important;
        gap: var(--mobile-spacing) !important;
    }
    .plan-card {
        padding: var(--mobile-spacing-lg) !important;
        border-radius: var(--mobile-radius) !important;
    }
    .plan-card .price {
        font-size: 22px !important;
    }
    .plan-card .features {
        font-size: var(--mobile-font-sm) !important;
        min-height: auto !important;
    }

    /* ======================================================
       认证页 - 移动端
       ====================================================== */
    .auth-page {
        padding: 0 !important;
        min-height: 100vh !important;
        align-items: stretch !important;
        background: white !important;
    }
    .auth-box {
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 0 !important;
        background: white !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .auth-box.register-box {
        max-width: 100% !important;
    }
    .auth-header .auth-icon {
        font-size: 40px !important;
    }
    .auth-header h2 {
        font-size: 24px !important;
    }

    /* ======================================================
       管理员后台 - 移动端
       ====================================================== */
    .admin-stats .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .admin-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding: 2px 0 !important;
        margin: 0 calc(-1 * var(--mobile-spacing)) !important;
        padding: 0 var(--mobile-spacing) !important;
    }
    .admin-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .admin-tabs .tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 16px !important;
        font-size: var(--mobile-font-sm) !important;
        border-radius: 20px !important;
    }

    .admin-overview .overview-grid {
        grid-template-columns: 1fr !important;
        gap: var(--mobile-spacing) !important;
    }
    .overview-item {
        padding: var(--mobile-spacing) var(--mobile-spacing-lg) !important;
    }
    .overview-item h4 {
        font-size: var(--mobile-font-base) !important;
    }

    /* ======================================================
       通用工具类 - 移动端
       ====================================================== */
    .text-center-mobile {
        text-align: center !important;
    }
    .hide-mobile {
        display: none !important;
    }
    .show-mobile {
        display: flex !important;
    }
    .full-width-mobile {
        width: 100% !important;
    }
    .gap-mobile {
        gap: var(--mobile-spacing) !important;
    }
    .mt-mobile {
        margin-top: var(--mobile-spacing) !important;
    }
    .mb-mobile {
        margin-bottom: var(--mobile-spacing) !important;
    }

    /* ======================================================
       触摸反馈 - 点击状态
       ====================================================== */
    .btn:active:not(:disabled) {
        transform: scale(0.96) !important;
    }
    .btn-primary:active:not(:disabled) {
        transform: scale(0.96) !important;
    }
    .card-item:active {
        transform: scale(0.99) !important;
        transition: transform 0.1s !important;
    }

    /* ======================================================
       滚动条美化
       ====================================================== */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #9ca3af;
    }
}

/* ======================================================
   平板设备 (769px - 1024px) - 轻量适配
   ====================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .settings-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .plans-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .task-detail-page .workbench {
        flex-direction: row !important;
    }
    .task-detail-page .chat-panel {
        flex: 1.5 !important;
    }
    .task-detail-page .final-panel {
        flex: 1 !important;
    }
}

/* ======================================================
   暗色模式 - 跟随系统（可选）
   ====================================================== */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    body {
        background: #0f0f12 !important;
    }
    .navbar {
        background: rgba(18,18,22,0.95) !important;
        border-bottom-color: rgba(255,255,255,0.05) !important;
    }
    .navbar-brand .brand-text {
        color: #f1f5f9 !important;
    }
    .navbar-toggle span {
        background: #e5e7eb !important;
    }
    .bottom-nav {
        background: rgba(18,18,22,0.95) !important;
        border-top-color: rgba(255,255,255,0.05) !important;
    }
    .bottom-nav .nav-item {
        color: #6b7280 !important;
    }
    .bottom-nav .nav-item.active {
        color: #a78bfa !important;
    }
    .bottom-nav .nav-item.nav-center .nav-label {
        color: #a78bfa !important;
    }
    .card,
    .settings-card,
    .stat-card,
    .task-list-wrapper,
    .chat-panel,
    .final-panel,
    .task-form-wrapper,
    .overview-item {
        background: #1a1a22 !important;
        border-color: rgba(255,255,255,0.06) !important;
        color: #e5e7eb !important;
    }
    .card-list .card-item {
        background: #1a1a22 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    .card-list .card-item .item-title {
        color: #e5e7eb !important;
    }
    .stat-card .stat-number {
        color: #e5e7eb !important;
    }
    .form-control {
        background: #1a1a22 !important;
        border-color: rgba(255,255,255,0.1) !important;
        color: #e5e7eb !important;
    }
    .form-control:focus {
        border-color: #8b5cf6 !important;
        box-shadow: 0 0 0 3px rgba(139,92,246,0.15) !important;
    }
    .form-group label {
        color: #d1d5db !important;
    }
    .auth-box {
        background: #1a1a22 !important;
    }
    .auth-header h2 {
        color: #e5e7eb !important;
    }
    .auth-header p {
        color: #9ca3af !important;
    }
    .drawer-menu {
        background: #1a1a22 !important;
    }
    .drawer-menu .drawer-header .user-name {
        color: #e5e7eb !important;
    }
    .drawer-menu .drawer-item {
        color: #d1d5db !important;
    }
    .drawer-menu .drawer-item:hover,
    .drawer-menu .drawer-item:active {
        background: rgba(255,255,255,0.05) !important;
    }
    .drawer-menu .drawer-divider {
        background: rgba(255,255,255,0.06) !important;
    }
    .modal .modal-content {
        background: #1a1a22 !important;
    }
    .modal .modal-content .modal-header h3 {
        color: #e5e7eb !important;
    }
    .modal .modal-content .modal-close {
        color: #9ca3af !important;
    }
    .wechat-item {
        background: rgba(255,255,255,0.03) !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    .bind-form {
        background: rgba(255,255,255,0.03) !important;
        border-color: rgba(139,92,246,0.3) !important;
    }
    .filter-tabs {
        background: transparent !important;
    }
    .filter-tab {
        color: #9ca3af !important;
    }
    .filter-tab.active {
        background: #8b5cf6 !important;
        color: white !important;
    }
    .quota-card {
        background: linear-gradient(135deg, #4c1d95, #2e1065) !important;
    }
    .badge-pending { background: #78350f !important; color: #fbbf24 !important; }
    .badge-processing { background: #1e3a5f !important; color: #60a5fa !important; }
    .badge-completed { background: #064e3b !important; color: #34d399 !important; }
    .badge-failed { background: #7f1d1d !important; color: #f87171 !important; }
    .badge-cancelled { background: #374151 !important; color: #9ca3af !important; }
    .conv-message.system { background: rgba(251,191,36,0.1) !important; border-left-color: #f59e0b !important; color: #fbbf24 !important; }
    .conv-message.assistant { background: rgba(52,211,153,0.1) !important; border-left-color: #10b981 !important; color: #34d399 !important; }
    .conv-message.user { background: rgba(139,92,246,0.1) !important; border-left-color: #8b5cf6 !important; color: #a78bfa !important; }
    .chat-item .chat-bubble {
        background: #1a1a22 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }
    .chat-item .chat-meta .chat-name {
        color: #e5e7eb !important;
    }
    .chat-item .chat-text {
        color: #d1d5db !important;
    }
    .role-system .chat-bubble { border-left-color: #6b7280 !important; }
    .role-user .chat-bubble { border-left-color: #8b5cf6 !important; }
    .role-assistant .chat-bubble { border-left-color: #10b981 !important; }
    .role-search .chat-bubble { border-left-color: #3b82f6 !important; }
    .role-write .chat-bubble { border-left-color: #10b981 !important; }
    .role-revise .chat-bubble { border-left-color: #f59e0b !important; }
    .role-polish .chat-bubble { border-left-color: #ec4899 !important; }
    .role-critique .chat-bubble { border-left-color: #f59e0b !important; }
    .role-editor .chat-bubble { border-left-color: #ec4899 !important; }
    .role-system .chat-avatar { background: #374151 !important; color: #9ca3af !important; }
    .role-user .chat-avatar { background: #4c1d95 !important; color: #a78bfa !important; }
    .role-assistant .chat-avatar { background: #064e3b !important; color: #34d399 !important; }
    .role-search .chat-avatar { background: #1e3a5f !important; color: #60a5fa !important; }
    .role-write .chat-avatar { background: #064e3b !important; color: #34d399 !important; }
    .role-revise .chat-avatar { background: #78350f !important; color: #fbbf24 !important; }
    .role-polish .chat-avatar { background: #831843 !important; color: #f472b6 !important; }
    .role-critique .chat-avatar { background: #78350f !important; color: #fbbf24 !important; }
    .role-editor .chat-avatar { background: #831843 !important; color: #f472b6 !important; }
    .footer {
        background: #1a1a22 !important;
        border-top-color: rgba(255,255,255,0.05) !important;
    }
    .footer-copy {
        color: #6b7280 !important;
    }
    .footer-links a {
        color: #9ca3af !important;
    }
    .page-link {
        background: #1a1a22 !important;
        border-color: rgba(255,255,255,0.06) !important;
        color: #9ca3af !important;
    }
    .page-link.active {
        background: #8b5cf6 !important;
        border-color: #8b5cf6 !important;
        color: white !important;
    }
    #toastContainer .toast-item {
        background: #1a1a22 !important;
        color: #e5e7eb !important;
        border-left-color: #8b5cf6 !important;
    }
    .prompt-content {
        background: #0f0f12 !important;
        border-color: rgba(255,255,255,0.06) !important;
        color: #d1d5db !important;
    }
    .prompt-details summary {
        color: #a78bfa !important;
    }
    .final-content-scroll {
        color: #d1d5db !important;
    }
    .final-title-text {
        color: #e5e7eb !important;
    }
    .workflow-banner {
        background: rgba(52,211,153,0.1) !important;
        border-color: rgba(52,211,153,0.2) !important;
        color: #34d399 !important;
    }
    .alert-success { background: rgba(52,211,153,0.1) !important; border-color: #10b981 !important; color: #34d399 !important; }
    .alert-error { background: rgba(248,113,113,0.1) !important; border-color: #ef4444 !important; color: #f87171 !important; }
    .alert-warning { background: rgba(251,191,36,0.1) !important; border-color: #f59e0b !important; color: #fbbf24 !important; }
    .alert-info { background: rgba(96,165,250,0.1) !important; border-color: #3b82f6 !important; color: #60a5fa !important; }
}