/* ============================================================
   mobile.css - 统一移动端响应式样式
   所有页面的移动端适配集中管理
   ============================================================ */

/* ===== 断点系统 ===== */
/* ≥1025px: 桌面端（默认样式） */
/* 861-1024px: 小桌面/大平板 */
/* 641-860px: 平板 */
/* 481-640px: 大屏手机 */
/* ≤480px: 小屏手机 */
/* ≤380px: 极端小屏 */

/* ============================================================
   1. 基础重置与排版
   ============================================================ */

/* 触摸目标最小尺寸 */
@media (max-width: 860px) {
    button, 
    .btn, 
    .btn-primary, 
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning,
    .ghost,
    input[type="submit"],
    input[type="button"],
    select,
    .nav-item,
    .tab-item,
    a.action-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 防止 iOS 缩放 */
    input, textarea, select {
        font-size: 16px !important;
    }
    
    body {
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
    }
    
    /* 禁止长按弹出菜单（针对交互元素） */
    button, a, .clickable {
        -webkit-touch-callout: none;
    }
}

/* ============================================================
   2. 通用布局 - 容器自适应
   ============================================================ */

@media (max-width: 1024px) {
    .dashboard-shell,
    .container,
    .page-container,
    .content-wrapper,
    [class*="container"],
    [class*="wrapper"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 640px) {
    .dashboard-shell,
    .container,
    .page-container,
    .content-wrapper,
    [class*="container"],
    [class*="wrapper"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ============================================================
   3. 卡片布局 - 通用响应式
   ============================================================ */

@media (max-width: 860px) {
    .card,
    [class*="card"],
    .panel,
    .stat-card,
    .metric-card,
    .info-card {
        padding: 16px !important;
    }
    
    /* 卡片网格 - 2列变1列 */
    .card-grid,
    [class*="grid"],
    .stats-grid,
    .metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .card-grid,
    [class*="grid"],
    .stats-grid,
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================================
   4. 表格 → 卡片转换（通用方案）
   ============================================================ */

/* 桌面端保持表格样式，移动端隐藏表头，每行显示为卡片 */
@media (max-width: 860px) {
    /* 隐藏表格表头 */
    table thead {
        display: none !important;
    }
    
    table tbody tr {
        display: block !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
        background: var(--bg-card, rgba(255,255,255,0.78)) !important;
        border-radius: var(--radius, 16px) !important;
        border: 1px solid var(--border, rgba(120,100,85,0.10)) !important;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(120,100,85,0.04)) !important;
    }
    
    table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border: none !important;
        text-align: right !important;
        gap: 8px;
    }
    
    table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted, #a69c90);
        font-size: 12px;
        text-align: left;
        flex: 1;
    }
    
    table tbody td:last-child {
        border-bottom: none !important;
    }
    
    /* 操作按钮列 - 居中对齐 */
    table tbody td:has(button),
    table tbody td:has(.btn),
    table tbody td:has(a) {
        justify-content: center !important;
        gap: 8px;
        padding-top: 12px !important;
        border-top: 1px solid var(--border, rgba(120,100,85,0.10)) !important;
        margin-top: 4px !important;
    }
    
    table tbody td:has(button)::before,
    table tbody td:has(.btn)::before,
    table tbody td:has(a)::before {
        display: none !important;
    }
    
    /* 状态标签适配 */
    .status-badge,
    [class*="status"],
    .badge {
        display: inline-flex !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   5. 表单元素 - 移动端优化
   ============================================================ */

@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
    }
    
    form,
    .form-container,
    .form-group {
        width: 100% !important;
    }
    
    .form-group {
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .form-group label {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }
    
    .form-actions,
    .form-buttons,
    .btn-group {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .form-actions button,
    .form-actions .btn,
    .form-buttons button,
    .form-buttons .btn,
    .btn-group button,
    .btn-group .btn {
        width: 100% !important;
    }
}

/* ============================================================
   6. 弹窗/模态框 - 移动端底部滑入
   ============================================================ */

@media (max-width: 640px) {
    .modal,
    .modal-backdrop,
    [class*="modal"],
    .popup,
    .overlay {
        align-items: flex-end !important;
    }
    
    .modal-card,
    .modal-content,
    .modal-body,
    [class*="modal"] .card,
    .popup-content {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        padding: 20px 16px !important;
        animation: slideUp 0.3s ease-out !important;
    }
    
    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    /* 弹窗内的按钮组 */
    .modal-card .btn-group,
    .modal-content .btn-group {
        flex-direction: row !important;
        gap: 8px !important;
    }
    
    .modal-card .btn-group button,
    .modal-content .btn-group button {
        flex: 1 !important;
        min-height: 44px !important;
    }
}

/* ============================================================
   7. 按钮与交互元素
   ============================================================ */

@media (max-width: 640px) {
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-warning,
    .ghost {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    
    /* 按钮组水平排列改为垂直 */
    .btn-row,
    .button-row,
    .action-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .btn-row button,
    .button-row button,
    .action-row button {
        width: 100% !important;
    }
}

/* ============================================================
   8. 间距与布局微调
   ============================================================ */

@media (max-width: 860px) {
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 17px !important; }
    h4 { font-size: 15px !important; }
    p, li { font-size: 14px !important; }
}

@media (max-width: 640px) {
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    
    .section,
    .section-gap,
    [class*="section"] {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}

/* ============================================================
   9. 开发者后台 - 底部导航栏（已移除）
   ============================================================ */
/* 底部导航栏已全部删除，此节留空 */

/* ============================================================
   10. 开发者后台 - 侧边栏移动端行为（统一方案）
   ============================================================ */

@media (max-width: 860px) {
    /* 侧边栏默认隐藏，滑出显示 */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 999 !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.1) !important;
    }
    
    .sidebar.open {
        left: 0 !important;
    }
    
    /* 侧边栏遮罩 */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        z-index: 998;
        display: none;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    
    .sidebar-overlay.show {
        display: block;
        animation: fadeIn 0.2s ease-out;
    }
    
    /* 移动端侧边栏切换按钮 */
    .mobile-sidebar-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--bg-card, rgba(255,255,255,0.75));
        border: 1px solid var(--border, rgba(120,100,85,0.10));
        cursor: pointer;
        font-size: 20px;
        color: var(--text, #2c2824);
        -webkit-tap-highlight-color: transparent;
    }
}

@media (min-width: 861px) {
    .mobile-sidebar-toggle {
        display: none !important;
    }
    .sidebar-overlay {
        display: none !important;
    }
}

/* ============================================================
   11. 用户控制台 - 移动端顶部导航
   ============================================================ */

@media (max-width: 860px) {
    .dash-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 8px 0 16px !important;
    }
    
    .dash-brand {
        font-size: 18px !important;
    }
    
    .account-avatar {
        height: 40px !important;
        padding: 0 12px 0 10px !important;
        font-size: 12px !important;
    }
    
    .account-dropdown {
        width: min(300px, 90vw) !important;
        right: -10px !important;
    }
    
    /* 标签导航 - 可横向滚动 */
    .tab-nav,
    .tabs,
    [class*="tab"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    
    .tab-nav::-webkit-scrollbar,
    .tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .tab-item,
    .tab-nav a,
    .tabs a,
    [class*="tab"] a {
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   12. 用户控制台 - Bot详情页专用
   ============================================================ */

@media (max-width: 860px) {
    /* Bot详情页的配对信息卡片 */
    .pairing-card,
    .bot-info-card {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .pairing-card .info-row,
    .bot-info-card .info-row {
        flex-direction: column !important;
        gap: 4px !important;
    }
    
    .pairing-card .info-label,
    .bot-info-card .info-label {
        font-size: 12px !important;
    }
    
    .pairing-card .info-value,
    .bot-info-card .info-value {
        font-size: 14px !important;
    }
    
    /* 聊天记录区域 */
    .chat-log-container,
    .message-list {
        max-height: 50vh !important;
    }
    
    .chat-message {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   13. 用户控制台 - 订单审核页专用
   ============================================================ */

@media (max-width: 860px) {
    .order-card {
        padding: 14px !important;
    }
    
    .order-card .order-field {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid rgba(120,100,85,0.06);
    }
    
    .order-card .order-field:last-child {
        border-bottom: none;
    }
    
    .order-card .order-label {
        font-size: 12px;
        color: var(--text-muted, #a69c90);
        font-weight: 500;
    }
    
    .order-card .order-value {
        font-size: 13px;
        text-align: right;
    }
    
    .order-card .order-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid rgba(120,100,85,0.10);
    }
}

/* ============================================================
   14. 开发者后台 - 统一页面头部适配
   ============================================================ */

@media (max-width: 860px) {
    .page-header {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .page-header h1 {
        font-size: 22px !important;
    }
    
    .page-header .btn {
        align-self: flex-start !important;
    }
    
    /* 筛选栏 - 移动端堆叠 */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter-bar input,
    .filter-bar select {
        width: 100% !important;
        min-width: auto !important;
    }
    
    /* 统计行 - 可横向滚动 */
    .stats-row {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
    }
    
    .stats-row::-webkit-scrollbar {
        display: none !important;
    }
    
    .stat-chip {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* 详情网格 - 单列 */
    .detail-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 配置行 - 单列 */
    .config-row {
        grid-template-columns: 1fr !important;
    }
    
    /* 表单行 - 单列 */
    .form-row {
        grid-template-columns: 1fr !important;
    }
    
    /* 搜索框 - 堆叠 */
    .search-box {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .search-box input {
        min-width: auto !important;
    }
    
    /* 分类标签 - 可横向滚动 */
    .category-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .category-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .category-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* 模板网格 - 更紧凑 */
    .template-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }
    
    /* 进度统计 - 换行 */
    .progress-stats {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    /* 表情包网格 - 更紧凑 */
    .emoji-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 10px !important;
    }
    
    /* 内容预览 - 自适应 */
    .content-preview {
        max-width: 100% !important;
    }
    
    /* 消息预览 - 自适应 */
    .message-preview {
        max-width: 100% !important;
    }
    
    /* 操作按钮组 - 换行 */
    .action-group {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    /* 导出按钮 - 小屏适配 */
    #exportButtons {
        flex-wrap: wrap !important;
    }
}

/* ============================================================
   15. 开发者后台 - 主内容区域适配
   ============================================================ */

@media (max-width: 860px) {
    .main-content {
        max-width: 100% !important;
        padding: 20px 16px !important;
    }
    
    .content-card .card-header {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    .content-card .card-header h2 {
        font-size: 15px !important;
    }
    
    .content-card .card-body {
        padding: 14px 16px !important;
    }
    
    /* 数据表格在卡片内 */
    .content-card .card-body[style*="padding:0"] {
        padding: 0 !important;
    }
}

/* ============================================================
   16. 开发者后台 - 弹窗适配
   ============================================================ */

@media (max-width: 640px) {
    .modal-overlay .modal {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        padding: 20px 16px !important;
        animation: slideUp 0.3s ease-out !important;
    }
    
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    
    .modal h2 {
        font-size: 18px !important;
    }
    
    .modal .form-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .modal .form-actions button {
        width: 100% !important;
    }
}

/* ============================================================
   17. 小屏手机（≤480px）额外优化
   ============================================================ */

@media (max-width: 480px) {
    /* 更紧凑的间距 */
    .dashboard-shell,
    .container,
    .page-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .card,
    [class*="card"] {
        padding: 12px !important;
        border-radius: 14px !important;
    }
    
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }
    h3 { font-size: 15px !important; }
    
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .ghost {
        padding: 8px 14px !important;
        font-size: 13px !important;
        min-height: 40px !important;
    }
    
    /* 页面头部更紧凑 */
    .page-header h1 {
        font-size: 20px !important;
    }
    
    /* 内容卡片更紧凑 */
    .content-card .card-header {
        padding: 12px 16px !important;
    }
    
    .content-card .card-body {
        padding: 12px 16px !important;
    }
    
    /* 表格转卡片更紧凑 */
    table tbody tr {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }
    
    table tbody td {
        padding: 6px 0 !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   18. 极端小屏（≤380px）
   ============================================================ */
/* 此节已无内容，保留占位 */

/* ============================================================
   19. 通用工具类
   ============================================================ */

/* 移动端显示/隐藏 */
@media (min-width: 861px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 860px) {
    .desktop-only {
        display: none !important;
    }
}

/* 移动端全宽 */
@media (max-width: 640px) {
    .mobile-full-width {
        width: 100% !important;
    }
}

/* 移动端文本居中 */
@media (max-width: 640px) {
    .mobile-text-center {
        text-align: center !important;
    }
}

/* 移动端滚动容器 */
@media (max-width: 860px) {
    .mobile-scroll-x {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .mobile-scroll-x::-webkit-scrollbar {
        display: none !important;
    }
}

/* 移动端隐藏滚动条（通用） */
@media (max-width: 860px) {
    .hide-scrollbar::-webkit-scrollbar {
        display: none !important;
    }
    .hide-scrollbar {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
}

/* ============================================================
   20. 返回顶部按钮
   ============================================================ */

@media (max-width: 860px) {
    .scroll-to-top {
        position: fixed;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        z-index: 900;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(120, 100, 85, 0.12);
        box-shadow: 0 4px 16px rgba(68, 53, 35, 0.10);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--text-muted, #8a8278);
        cursor: pointer;
        transition: all 0.2s ease;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    .scroll-to-top.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    
    .scroll-to-top:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 1);
    }
}

@media (min-width: 861px) {
    .scroll-to-top {
        display: none !important;
    }
}

/* ============================================================
   21. 触摸反馈与交互优化
   ============================================================ */

@media (max-width: 860px) {
    /* 点击涟漪效果 */
    .ripple {
        position: relative;
        overflow: hidden;
    }
    
    .ripple::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(194, 139, 110, 0.15);
        transform: translate(-50%, -50%);
        transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
        opacity: 0;
        pointer-events: none;
    }
    
    .ripple:active::after {
        width: 200%;
        padding-bottom: 200%;
        opacity: 1;
        transition: 0s;
    }
    
    /* 列表项触摸高亮 */
    .touch-item {
        -webkit-tap-highlight-color: rgba(194, 139, 110, 0.12);
        transition: background 0.15s ease;
        cursor: pointer;
    }
    
    .touch-item:active {
        background: rgba(194, 139, 110, 0.06);
    }
    
    /* 禁用文本选择（交互元素） */
    .no-select {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ============================================================
   22. 空状态与加载状态移动端适配
   ============================================================ */

@media (max-width: 640px) {
    .empty-state {
        padding: 32px 16px !important;
    }
    
    .empty-state .icon {
        font-size: 36px !important;
        margin-bottom: 12px !important;
    }
    
    .empty-state p {
        font-size: 14px !important;
    }
    
    .empty-state .btn {
        margin-top: 12px !important;
    }
    
    /* 加载状态 */
    .loading-state {
        padding: 32px 16px !important;
    }
    
    .loading-state .spinner {
        width: 32px !important;
        height: 32px !important;
    }
    
    .loading-state p {
        font-size: 14px !important;
        margin-top: 12px !important;
    }
}

/* ============================================================
   23. 移动端手势支持 - 侧边栏滑动关闭
   ============================================================ */

@media (max-width: 860px) {
    .sidebar {
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: left;
    }
    
    .sidebar.dragging {
        transition: none !important;
    }
    
    /* 侧边栏内部滚动优化 */
    .sidebar {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
}

/* ============================================================
   24. 表格转卡片 - 补充通用选择器
   ============================================================ */

@media (max-width: 860px) {
    /* 确保所有表格在移动端转卡片 */
    table.responsive-card thead,
    table[class*="table"] thead,
    table.data-table thead {
        display: none !important;
    }
    
    table.responsive-card tbody tr,
    table[class*="table"] tbody tr,
    table.data-table tbody tr {
        display: block !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
        background: var(--bg-card, rgba(255,255,255,0.78)) !important;
        border-radius: var(--radius, 16px) !important;
        border: 1px solid var(--border, rgba(120,100,85,0.10)) !important;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(120,100,85,0.04)) !important;
    }
    
    table.responsive-card tbody td,
    table[class*="table"] tbody td,
    table.data-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border: none !important;
        text-align: right !important;
        gap: 8px;
    }
    
    table.responsive-card tbody td::before,
    table[class*="table"] tbody td::before,
    table.data-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted, #a69c90);
        font-size: 12px;
        text-align: left;
        flex: 1;
    }
    
    table.responsive-card tbody td:last-child,
    table[class*="table"] tbody td:last-child,
    table.data-table tbody td:last-child {
        border-bottom: none !important;
    }
    
    /* 操作按钮列 */
    table.responsive-card tbody td:has(button),
    table.responsive-card tbody td:has(.btn),
    table.responsive-card tbody td:has(a),
    table[class*="table"] tbody td:has(button),
    table[class*="table"] tbody td:has(.btn),
    table[class*="table"] tbody td:has(a),
    table.data-table tbody td:has(button),
    table.data-table tbody td:has(.btn),
    table.data-table tbody td:has(a) {
        justify-content: center !important;
        gap: 8px;
        padding-top: 12px !important;
        border-top: 1px solid var(--border, rgba(120,100,85,0.10)) !important;
        margin-top: 4px !important;
    }
    
    table.responsive-card tbody td:has(button)::before,
    table.responsive-card tbody td:has(.btn)::before,
    table.responsive-card tbody td:has(a)::before,
    table[class*="table"] tbody td:has(button)::before,
    table[class*="table"] tbody td:has(.btn)::before,
    table[class*="table"] tbody td:has(a)::before,
    table.data-table tbody td:has(button)::before,
    table.data-table tbody td:has(.btn)::before,
    table.data-table tbody td:has(a)::before {
        display: none !important;
    }
}

/* ============================================================
   25. 移动端 Toast/通知适配
   ============================================================ */

@media (max-width: 640px) {
    .toast {
        top: auto !important;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
        left: 16px !important;
        width: auto !important;
        border-radius: 12px !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        text-align: center !important;
        transform: translateY(10px) !important;
    }
    
    .toast.show {
        transform: translateY(0) !important;
    }
}

/* ============================================================
   26. 移动端分页适配
   ============================================================ */

@media (max-width: 640px) {
    .pagination {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 10px 0 !important;
    }
    
    .pagination button {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        min-width: 36px !important;
    }
    
    .pagination .page-info,
    .pagination .current {
        font-size: 12px !important;
    }
}

/* ============================================================
   27. 移动端统计卡片适配
   ============================================================ */

@media (max-width: 640px) {
    .stats-mini {
        gap: 8px !important;
    }
    
    .stats-mini .stat-box {
        min-width: calc(50% - 4px) !important;
        padding: 8px !important;
    }
    
    .stats-mini .stat-box .num {
        font-size: 18px !important;
    }
    
    .stats-mini .stat-box .lbl {
        font-size: 10px !important;
    }
}

/* ============================================================
   28. 移动端详情网格适配
   ============================================================ */

@media (max-width: 480px) {
    .profile-grid {
        grid-template-columns: 1fr !important;
    }
    
    .detail-grid {
        grid-template-columns: 1fr !important;
    }
    
    .info-grid {
        grid-template-columns: 1fr !important;
    }
}