/**
 * 移动端适配样式
 * 星聚合登录系统
 */

/* ============================================
   1. 全局移动端样式
   ============================================ */

@media (max-width: 767px) {
    /* 基础重置 */
    html {
        font-size: 14px;
    }
    
    body {
        font-size: 14px;
    }
    
    /* 防止iOS自动缩放 */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* 排版优化 */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.875rem; }
    
    /* 间距调整 */
    .container {
        padding: 0 16px;
    }
}

/* ============================================
   2. 布局组件
   ============================================ */

/* 移动端顶部导航栏 */
@media (max-width: 767px) {
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        z-index: 1000;
        box-shadow: var(--shadow-sm);
    }
    
    .mobile-menu-btn,
    .mobile-user-btn {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-main);
        cursor: pointer;
        border-radius: var(--radius-md);
        transition: background-color var(--transition-fast);
    }
    
    .mobile-menu-btn:active,
    .mobile-user-btn:active {
        background-color: var(--bg-surface-hover);
    }
    
    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--text-main);
        text-decoration: none;
    }
    
    .mobile-brand img {
        height: 32px;
        width: auto;
    }
    
    /* 侧边栏遮罩层 */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-normal), visibility var(--transition-normal);
    }
    
    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
        z-index: 1001 !important; /* 确保在侧边栏下方但在其他内容上方 */
    }
    
    /* 侧边栏抽屉 - 覆盖user.css和admin.css的样式 */
    .user-sidebar,
    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -260px !important; /* 使用left而不是transform，与user.css保持一致 */
        bottom: 0;
        width: 260px !important;
        background: var(--bg-surface);
        z-index: 1002 !important; /* 确保在遮罩层上方 */
        transition: left var(--transition-normal) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        transform: none !important; /* 移除transform，避免冲突 */
    }
    
    .user-sidebar.open,
    .admin-sidebar.open {
        left: 0 !important;
    }
    
    /* 内容区域 */
    .user-content,
    .admin-content {
        padding-top: 0 !important; /* 移除padding-top，使用margin-top */
        margin-top: 56px !important; /* 为移动端顶部导航栏预留空间 */
        min-height: calc(100vh - 56px) !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .page-body {
        padding: 16px !important; /* 减少内边距 */
    }
    
    /* 如果有page-header，调整其padding */
    .page-header {
        padding: 12px 16px !important;
        margin: 0 !important;
    }
}

/* ============================================
   3. UI组件
   ============================================ */

/* 按钮 */
@media (max-width: 767px) {
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    .btn-sm {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
    }
    
    .btn-block-mobile {
        width: 100%;
        display: block;
    }
    
    /* 按钮组垂直堆叠 */
    .btn-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .btn-group .btn {
        width: 100%;
    }
}

/* 表单 */
@media (max-width: 767px) {
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .form-control {
        height: 44px;
        font-size: 16px;
        padding: 12px 16px;
        width: 100%;
    }
    
    .form-control-sm {
        height: 36px;
        font-size: 14px;
        padding: 8px 12px;
    }
    
    textarea.form-control {
        min-height: 100px;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        font-size: 14px;
        margin-bottom: 6px;
    }
}

/* 卡片 */
@media (max-width: 767px) {
    .card {
        margin-bottom: 16px;
        border-radius: var(--radius-lg);
    }
    
    .card-body {
        padding: 16px;
    }
    
    .card-header {
        padding: 16px;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: center !important;
    }
    
    /* 卡片头部的筛选器和操作按钮 */
    .card-header > div[style*="display: flex"] {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .card-header select.form-control {
        width: 100% !important;
        max-width: none !important;
    }
    
    /* 页面头部标题区域 - 确保标题和按钮对齐 */
    .page-body > div:first-child {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 1rem !important;
        gap: 1rem !important;
    }
    
    /* 页面标题容器 */
    .page-body > div:first-child > div:first-child {
        flex: 1;
        min-width: 0;
    }
    
    /* 页面标题 */
    .page-body > div:first-child h2,
    .page-body > div:first-child h3 {
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    
    /* 页面副标题 */
    .page-body > div:first-child p {
        margin: 0.25rem 0 0 0 !important;
        font-size: 0.75rem !important;
    }
    
    /* 页面头部按钮 */
    .page-body > div:first-child > button,
    .page-body > div:first-child > a.btn {
        flex-shrink: 0;
    }
    
    .card-footer {
        padding: 16px;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    /* 卡片网格单列 */
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

/* 模态框 */
@media (max-width: 767px) {
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        overflow: hidden;
        display: none !important; /* 默认隐藏，使用!important确保优先级 */
        align-items: center; /* 居中对齐 */
        justify-content: center;
        padding: 16px;
    }
    
    .modal.show {
        display: flex !important; /* 显示时使用flex布局 */
    }
    
    /* 默认模态框 - 居中显示，自适应高度 */
    .modal-content {
        width: 100% !important;
        height: auto !important;
        max-height: 90vh !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: var(--radius-lg) !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* 创建应用模态框 - 全屏显示 */
    #createModal {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }
    
    #createModal .modal-content {
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
    
    .modal-header {
        position: sticky;
        top: 0;
        background: var(--bg-surface);
        z-index: 10;
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    
    .modal-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 16px;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }
    
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--bg-surface);
        border-top: 1px solid var(--border-color);
        padding: 16px;
        flex-shrink: 0;
        display: flex;
        gap: 12px;
    }
    
    .modal-footer .btn {
        flex: 1;
    }
    
    .close-modal {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 模态框层级管理 - 只对显示的模态框应用z-index */
    .modal.show {
        z-index: 10000;
    }
    
    /* 如果有多个模态框同时显示，后显示的在上层 */
    .modal.show ~ .modal.show {
        z-index: 10001;
    }
    
    .modal.show ~ .modal.show ~ .modal.show {
        z-index: 10002;
    }
}

/* 表格 */
@media (max-width: 767px) {
    /* 禁用表格响应式容器的横向滚动 */
    .table-responsive {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* 用户管理表格 - 卡片视图 */
    .user-table {
        display: block;
        border: none;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .user-table thead {
        display: none;
    }
    
    .user-table tbody,
    .user-table tr {
        display: block;
        width: 100%;
    }
    
    .user-table tr {
        margin-bottom: 16px;
        padding: 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
        box-sizing: border-box;
    }
    
    .user-table td {
        display: block;
        padding: 8px 0;
        border: none;
        text-align: left !important;
        width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .user-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.75rem;
        display: block;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    /* 隐藏ID列的标签 */
    .user-table td:first-child::before {
        content: '';
        display: none;
    }
    
    /* 操作按钮容器 */
    .user-table td:last-child {
        padding-top: 12px;
        margin-top: 8px;
        border-top: 1px solid var(--border-color);
    }
    
    .user-table td:last-child::before {
        content: '';
        display: none;
    }
    
    .user-table td:last-child > div {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        width: 100%;
    }
    
    /* 确保按钮不会导致横向滚动 */
    .user-table .btn {
        white-space: normal !important;
        word-wrap: break-word;
    }
    
    /* 通用卡片视图 */
    .table-mobile-card {
        display: block;
        border: none;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .table-mobile-card thead {
        display: none;
    }
    
    .table-mobile-card tbody,
    .table-mobile-card tr {
        display: block;
        width: 100%;
    }
    
    .table-mobile-card tr {
        margin-bottom: 16px;
        padding: 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
        box-sizing: border-box;
    }
    
    .table-mobile-card td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border: none;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .table-mobile-card td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 16px;
        color: var(--text-muted);
        font-size: 13px;
        flex-shrink: 0;
    }
}

/* ============================================
   4. 首页特定样式
   ============================================ */

@media (max-width: 767px) {
    /* Hero区域 */
    .hero-section {
        min-height: auto;
        padding: 80px 20px 60px;
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 1.3;
    }
    
    .hero-description {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 16px;
    }
    
    .hero-stats .stat-divider {
        display: none;
    }
    
    /* 平台图标网格 */
    .providers-section {
        padding: 3rem 1rem;
    }
    
    .providers-grid {
        gap: 16px;
    }
    
    .provider-icon {
        width: 56px;
        height: 56px;
    }
    
    /* 功能卡片 */
    .features-section {
        padding: 3rem 1rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .feature-card {
        padding: 20px;
    }
    
    /* 代码示例 */
    .code-section {
        padding: 3rem 1rem;
    }
    
    .code-card-body pre {
        padding: 16px;
        font-size: 0.75rem;
    }
    
    .code-card-body code {
        white-space: pre;
        word-break: normal;
    }
    
    /* 统计数据 */
    .stats-section {
        padding: 3rem 1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    /* CTA区域 */
    .cta-section {
        padding: 3rem 1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
}

/* 小屏手机特殊优化 */
@media (max-width: 480px) {
    .providers-grid {
        gap: 12px;
    }
    
    .provider-icon {
        width: 48px;
        height: 48px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* 小屏手机平台选择单列显示 */
    .platform-select-item {
        flex: 0 0 100% !important;
    }
}

/* ============================================
   5. 用户中心特定样式
   ============================================ */

@media (max-width: 767px) {
    /* 认证页面表单网格 */
    .page-body > div > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* 用户设置页面 - 基本信息和修改密码 */
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* 账号绑定网格 */
    .card-body > div[style*="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* 应用列表 */
    .apps-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    
    .app-card {
        padding: 16px;
    }
    
    .app-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .app-card-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    
    .app-card-actions .btn {
        width: 100%;
    }
    
    /* 创建应用弹窗 */
    #createModal {
        overflow: hidden;
    }
    
    #createModal .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        overflow: hidden;
    }
    
    #createModal .modal-body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    #createModal .modal-body > div[style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    
    /* 平台选择容器 - 确保flex布局正确应用 */
    .form-group > div[style*="display: flex"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        max-height: 110px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px;
    }
    
    /* 平台选择标签 */
    .platform-select-item {
        flex: 0 0 calc(50% - 0.25rem) !important;
        min-width: 0;
        justify-content: center;
        min-height: 44px;
        box-sizing: border-box;
    }
}

/* ============================================
   6. 管理后台特定样式
   ============================================ */

@media (max-width: 767px) {
    /* 技术支持页面 - 版本信息卡片 */
    .card-body > div[style*="display: flex"][style*="background-color"] {
        padding: 0.75rem !important;
    }
    
    .card-body > div[style*="display: flex"][style*="background-color"] > .iconify {
        font-size: 1.5rem !important;
        margin-right: 0.75rem !important;
    }
    
    /* 移除版本信息标题和内容之间的空白 */
    .card-body > div[style*="display: flex"][style*="background-color"] > div > div:first-child {
        margin-bottom: 0 !important;
        line-height: 1 !important;
    }
    
    /* 版本信息行 - 移除所有间距 */
    .version-info-row {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 0.5rem !important;
    }
    
    /* 版本号和链接 - 移动端也保持同一行 */
    .version-wrong-link {
        font-size: 0.7rem !important;
    }
    
    /* 更新操作按钮组 */
    .card-body > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .card-body > div[style*="grid-template-columns: 1fr 1fr"] > a,
    .card-body > div[style*="grid-template-columns: 1fr 1fr"] > button {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* 平台配置卡片优化 */
    .platform-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .platform-info {
        width: 100% !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .platform-info > img {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .platform-info > div {
        width: 100% !important;
    }
    
    .platform-title-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    .platform-title-row h3 {
        font-size: 1rem !important;
    }
    
    /* 接口模式标签页 */
    .interface-mode-tabs {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
    }
    
    .mode-tab {
        flex: 1 !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
    }
    
    /* 回调地址容器 */
    .callback-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
    }
    
    .callback-label {
        font-size: 0.75rem !important;
    }
    
    .callback-url {
        width: 100% !important;
        word-break: break-all !important;
        font-size: 0.7rem !important;
        padding: 0.5rem !important;
    }
    
    /* 平台开关移到右上角 */
    .platform-header .switch {
        position: absolute !important;
        top: 1.5rem !important;
        right: 1.5rem !important;
    }
    
    /* 平台配置表单 */
    .platformForm {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* 联系方式表单 */
    .contact-item {
        padding: 16px 12px;
    }
    
    .contact-item > div[style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .contact-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .remove-contact {
        width: 100%;
    }
    
    /* 图标选择器 */
    #iconPickerModal > div {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
    }
    
    #iconGrid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px;
    }
    
    .icon-item {
        padding: 12px 8px;
    }
}

/* ============================================
   7. 诊断工具特定样式
   ============================================ */

@media (max-width: 767px) {
    #serverList {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .server-card {
        padding: 16px 12px;
    }
    
    .server-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .server-details {
        font-size: 0.75rem;
    }
}

/* ============================================
   8. 触摸优化
   ============================================ */

@media (max-width: 767px) {
    /* 确保所有可点击元素最小尺寸 */
    a,
    button,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 触摸反馈 */
    button:active,
    .btn:active,
    a:active {
        opacity: 0.7;
    }
    
    /* 禁用双击缩放 */
    * {
        touch-action: manipulation;
    }
    
    /* 滚动优化 */
    .scrollable {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
}

/* ============================================
   9. 性能优化
   ============================================ */

@media (max-width: 767px) {
    /* 硬件加速 */
    .mobile-header,
    .user-sidebar,
    .admin-sidebar,
    .sidebar-overlay {
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* 减少动画 */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ============================================
   10. 辅助类
   ============================================ */

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    .text-mobile-center {
        text-align: center;
    }
    
    .flex-mobile-column {
        flex-direction: column;
    }
    
    .w-mobile-full {
        width: 100%;
    }
}

/* ============================================
   11. 管理员仪表盘特定样式（参考用户仪表盘）
   ============================================ */

@media (max-width: 767px) {
    /* 统计卡片容器 - 强制单列布局 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"],
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* 统计卡片 - 每个卡片占满整行 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] > .card,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] > .card {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    /* 统计卡片内容 - 文字在左，图标在右 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body {
        padding: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
    }
    
    /* 文字部分 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child {
        flex: 1;
        min-width: 0;
        z-index: 1;
    }
    
    /* 标签文字 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child > div:first-child,
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child > p:first-child,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child > div:first-child,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child > p:first-child {
        font-size: 0.875rem !important;
        color: var(--text-muted) !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 数字 - 加大加粗 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child > div:last-child,
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child > p:last-child,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child > div:last-child,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:first-child > p:last-child {
        font-size: 2rem !important;
        font-weight: 700 !important;
        color: var(--text-main) !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    
    /* 图标部分 - 固定位置在右上角 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:last-child,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:last-child {
        position: absolute !important;
        top: 1.25rem !important;
        right: 1.25rem !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
        width: 3rem !important;
        height: 3rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0.5rem !important;
    }
    
    /* 图标大小 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:last-child .iconify,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] .card-body > div:last-child .iconify {
        font-size: 1.5rem !important;
    }
    
    /* 最近用户和最近登录表格容器 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* 表格卡片 - 每个卡片占满整行 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] > .card,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] > .card {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    /* 卡片头部 */
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-header,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-header {
        padding: 1rem 1.25rem !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
    
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-header .card-title,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-header .card-title {
        font-size: 1rem !important;
        margin: 0 !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-header .btn,
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-header .btn {
        font-size: 0.8125rem !important;
        padding: 0.375rem 0.75rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* 注意：仪表盘的表格样式（.recent-users-table 和 .recent-logins-table）
       已经在 dashboard.php 文件中内嵌定义，这里不再重复定义以避免冲突 */
}

/* ============================================
   12. 授权诊断页面特定样式
   ============================================ */

@media (max-width: 767px) {
    /* 诊断页面容器 */
    .container {
        padding: 1rem !important;
    }
    
    /* 诊断页面头部 */
    .header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .logo {
        font-size: 1.25rem !important;
    }
    
    /* 诊断页面顶部状态卡片网格 - 单列布局 */
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* 诊断页面状态卡片 */
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] > .card {
        width: 100% !important;
    }
    
    /* 诊断页面卡片内容 - 图标容器居中对齐 */
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-body {
        display: flex !important;
        align-items: center !important;
        padding: 1.25rem !important;
    }
    
    /* 图标容器 - 确保居中显示 */
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-body > div[style*="width: 3.5rem"] {
        width: 3.5rem !important;
        height: 3.5rem !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 1.25rem !important;
        padding: 0 !important;
    }
    
    /* 图标本身 - 确保居中 */
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-body > div[style*="width: 3.5rem"] .iconify {
        display: block !important;
        margin: auto !important;
    }
    
    /* 文字内容区域 */
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-body > div:not([style*="width: 3.5rem"]) {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* 授权状态卡片的按钮 - 移到下方 */
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-body[style*="position: relative"] {
        flex-wrap: wrap !important;
    }
    
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] .card-body button[style*="position: absolute"] {
        position: static !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-top: 1rem !important;
        width: 100% !important;
        flex-basis: 100% !important;
    }
    
    /* 诊断详情网格 - 单列布局 */
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .page-body > div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))"] > .card {
        width: 100% !important;
    }
    
    /* 顶部提示卡片 */
    body > .container > div[style*="margin-bottom: 3rem"] {
        margin-bottom: 2rem !important;
    }
    
    body > .container > div[style*="margin-bottom: 3rem"] > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    body > .container > div[style*="margin-bottom: 3rem"] h3 {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    body > .container > div[style*="margin-bottom: 3rem"] p {
        font-size: 0.8125rem !important;
    }
    
    /* 卡片头部 */
    .card-header[style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    .card-header button {
        width: 100% !important;
    }
    
    /* 服务器列表网格 */
    .server-list-grid,
    #serverList {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* 服务器卡片 */
    #serverList > div {
        padding: 1rem !important;
    }
    
    #serverList > div > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    #serverList > div > div:first-child > div:first-child {
        width: 100% !important;
    }
    
    #serverList > div > div:first-child > div:first-child > div:first-child {
        font-size: 0.875rem !important;
    }
    
    #serverList > div > div:first-child > div:first-child > div:last-child {
        font-size: 0.7rem !important;
        word-break: break-all !important;
    }
    
    /* 服务器详情 */
    #serverList > div > div[style*="font-size: 0.75rem"] {
        font-size: 0.7rem !important;
    }
    
    #serverList > div > div[style*="font-size: 0.75rem"] > div {
        flex-wrap: wrap !important;
    }
    
    /* 加载状态 */
    #serverCheckLoading {
        padding: 2rem 1rem !important;
    }
    
    #serverCheckLoading > div {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
}

/* ============================================
   13. 系统设置页面特定样式
   ============================================ */

@media (max-width: 767px) {
    /* 设置表单容器 */
    #settingsForm {
        max-width: 100% !important;
    }
    
    /* 表单组 */
    #settingsForm .form-group {
        margin-bottom: 1rem !important;
    }
    
    /* 表单标签 */
    #settingsForm .form-label {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    /* 表单控件 */
    #settingsForm .form-control,
    #settingsForm select.form-control,
    #settingsForm textarea.form-control {
        width: 100% !important;
        font-size: 16px !important;
    }
    
    /* Logo和Favicon上传区域 */
    #settingsForm .form-group > div[style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    #settingsForm .form-group > div[style*="display: flex"] > div:first-child {
        flex-shrink: 0 !important;
    }
    
    #settingsForm .form-group > div[style*="display: flex"] > span {
        flex: 1 !important;
        min-width: 0 !important;
        word-break: break-all !important;
        font-size: 0.75rem !important;
    }
    
    #settingsForm .form-group > div[style*="display: flex"] > button {
        flex-shrink: 0 !important;
    }
    
    /* 帮助文本 */
    #settingsForm p[style*="font-size: 0.75rem"] {
        font-size: 0.7rem !important;
        margin-top: 0.25rem !important;
    }
    
    /* 提交按钮容器 */
    #settingsForm > div[style*="margin-top: 1.5rem"] {
        margin-top: 1rem !important;
    }
    
    #settingsForm > div[style*="margin-top: 1.5rem"] > button {
        width: 100% !important;
    }
    
    /* 设置标签页（如果有） */
    .settings-tabs,
    .nav-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }
    
    .settings-tabs::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .settings-tab,
    .nav-tabs .nav-link {
        padding: 12px 16px !important;
        min-width: 100px !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    /* 设置卡片 */
    .settings-card {
        margin-bottom: 16px !important;
    }
    
    .settings-card .card-body {
        padding: 16px !important;
    }
    
    /* 设置项 */
    .setting-item {
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    .setting-item:last-child {
        border-bottom: none !important;
    }
    
    .setting-item-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 8px !important;
    }
    
    .setting-item-title {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }
    
    .setting-item-description {
        font-size: 0.75rem !important;
        color: var(--text-muted) !important;
    }
    
    /* 开关和选择器 */
    .toggle-switch,
    .form-switch {
        transform: scale(1.2) !important;
    }
    
    .settings-select,
    .form-select {
        width: 100% !important;
        height: 44px !important;
        font-size: 16px !important;
    }
    
    .radio-group,
    .checkbox-group {
        gap: 16px !important;
    }
    
    .radio-item,
    .checkbox-item {
        min-height: 44px !important;
        padding: 12px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* ============================================
   14. 账户设置页面特定样式
   ============================================ */

@media (max-width: 767px) {
    /* 个人资料页面主网格 */
    .page-body > div[style*="grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* 表单组 */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    /* 表单标签 */
    .form-label {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 输入框和按钮组合 */
    .form-group > div[style*="display: flex"] {
        flex-direction: row !important;
        gap: 0.5rem !important;
    }
    
    .form-group > div[style*="display: flex"] > input {
        flex: 1 !important;
    }
    
    .form-group > div[style*="display: flex"] > button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* 账号绑定卡片 */
    .card[style*="margin-top: 1.5rem"] .card-body > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* 绑定项 */
    .card-body > div[style*="grid-template-columns"] > div[style*="display: flex"] {
        flex-direction: row !important;
        align-items: center !important;
        padding: 0.75rem !important;
    }
    
    .card-body > div[style*="grid-template-columns"] > div > div:first-child {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .card-body > div[style*="grid-template-columns"] > div > div:first-child > div:first-child {
        font-size: 0.875rem !important;
    }
    
    .card-body > div[style*="grid-template-columns"] > div > div:first-child > div:last-child {
        font-size: 0.75rem !important;
    }
    
    .card-body > div[style*="grid-template-columns"] > div > div:last-child {
        flex-shrink: 0 !important;
    }
    
    /* 密码表单 */
    #passwordForm .form-group {
        margin-bottom: 1rem !important;
    }
    
    #passwordForm .btn-block {
        width: 100% !important;
        margin-top: 0.5rem !important;
    }
    
    /* 绑定弹窗 */
    #bindModal .modal-content {
        max-width: 100% !important;
        margin: 1rem !important;
    }
    
    #bindModal .form-group > div[style*="display: flex"] {
        flex-direction: row !important;
    }
    
    #bindModal .form-group > div[style*="display: flex"] > input {
        flex: 1 !important;
    }
    
    #bindModal .form-group > div[style*="display: flex"] > button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* ============================================
   15. 通用管理后台组件优化
   ============================================ */

@media (max-width: 767px) {
    /* 后台侧边栏 */
    .admin-sidebar {
        width: 260px !important;
    }
    
    .admin-sidebar .nav-item {
        margin-bottom: 4px !important;
    }
    
    .admin-sidebar .nav-link {
        padding: 12px 16px !important;
        font-size: 0.875rem !important;
    }
    
    .admin-sidebar .nav-link .iconify {
        font-size: 1.25rem !important;
        margin-right: 12px !important;
    }
    
    /* 子菜单 */
    .admin-sidebar .submenu {
        padding-left: 16px !important;
    }
    
    .admin-sidebar .submenu .nav-link {
        padding: 10px 16px !important;
        font-size: 0.8125rem !important;
    }
    
    /* 数据表格 */
    .admin-table {
        display: block !important;
        border: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .admin-table thead {
        display: none !important;
    }
    
    .admin-table tbody,
    .admin-table tr {
        display: block !important;
        width: 100% !important;
    }
    
    .admin-table tr {
        margin-bottom: 16px !important;
        padding: 16px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--radius-lg) !important;
        background: var(--bg-surface) !important;
    }
    
    .admin-table td {
        display: block !important;
        padding: 8px 0 !important;
        border: none !important;
        text-align: left !important;
    }
    
    .admin-table td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        color: var(--text-muted) !important;
        font-size: 0.75rem !important;
        display: block !important;
        margin-bottom: 4px !important;
    }
    
    /* 管理后台表单 */
    .admin-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .admin-form .form-group {
        margin-bottom: 16px !important;
    }
    
    /* 管理后台卡片 */
    .admin-card-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* 筛选器 */
    .admin-filters {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .admin-filters .form-control,
    .admin-filters .form-select {
        width: 100% !important;
    }
    
    /* 批量操作 */
    .bulk-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .bulk-actions .btn {
        width: 100% !important;
    }
}

/* ============================================
   16. 响应式工具类增强
   ============================================ */

@media (max-width: 767px) {
    /* 间距工具类 */
    .p-mobile-0 { padding: 0 !important; }
    .p-mobile-1 { padding: 0.25rem !important; }
    .p-mobile-2 { padding: 0.5rem !important; }
    .p-mobile-3 { padding: 1rem !important; }
    .p-mobile-4 { padding: 1.5rem !important; }
    
    .m-mobile-0 { margin: 0 !important; }
    .m-mobile-1 { margin: 0.25rem !important; }
    .m-mobile-2 { margin: 0.5rem !important; }
    .m-mobile-3 { margin: 1rem !important; }
    .m-mobile-4 { margin: 1.5rem !important; }
    
    /* 文字大小工具类 */
    .text-mobile-xs { font-size: 0.75rem !important; }
    .text-mobile-sm { font-size: 0.875rem !important; }
    .text-mobile-base { font-size: 1rem !important; }
    .text-mobile-lg { font-size: 1.125rem !important; }
    .text-mobile-xl { font-size: 1.25rem !important; }
    
    /* 布局工具类 */
    .flex-mobile-wrap { flex-wrap: wrap !important; }
    .flex-mobile-nowrap { flex-wrap: nowrap !important; }
    .gap-mobile-1 { gap: 0.25rem !important; }
    .gap-mobile-2 { gap: 0.5rem !important; }
    .gap-mobile-3 { gap: 1rem !important; }
    .gap-mobile-4 { gap: 1.5rem !important; }
}


/* ============================================
   17. 仪表盘卡片额外优化
   ============================================ */

@media (max-width: 767px) {
    /* 确保所有仪表盘卡片都有合适的间距 */
    .page-body > .card {
        margin-bottom: 1rem !important;
    }
    
    /* 卡片标题和按钮的容器 */
    .card-header[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .card-header .card-title {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 1rem !important;
        margin: 0 !important;
    }
    
    .card-header .btn-sm {
        flex-shrink: 0 !important;
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
        white-space: nowrap !important;
    }
    
    /* 表格容器 */
    .card-body[style*="padding: 0"] {
        padding: 0 !important;
    }
    
    .card-body .table-responsive {
        overflow-x: visible !important;
    }
    
    /* 最近注册用户和最近登录记录的表格 */
    .mobile-card-table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    /* 确保表格在移动端正确显示 */
    @media (max-width: 768px) {
        .mobile-card-table {
            display: block !important;
        }
        
        .mobile-card-table thead {
            display: none !important;
        }
        
        .mobile-card-table tbody {
            display: block !important;
        }
        
        .mobile-card-table tr {
            display: block !important;
            margin-bottom: 1rem !important;
            padding: 1rem !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 0.5rem !important;
            background: var(--bg-surface) !important;
            position: relative !important;
        }
        
        .mobile-card-table td {
            display: block !important;
            padding: 0.5rem 0 !important;
            border: none !important;
            text-align: left !important;
        }
        
        /* 最近登录记录的特殊布局 */
        .recent-logins-table tr {
            padding-top: 2.5rem !important;
        }
        
        .recent-logins-table .user-col {
            position: absolute !important;
            top: 1rem !important;
            left: 1rem !important;
            padding: 0 !important;
            font-weight: 600 !important;
            font-size: 1rem !important;
        }
        
        .recent-logins-table .platform-col {
            position: absolute !important;
            top: 1rem !important;
            right: 1rem !important;
            padding: 0 !important;
        }
        
        .recent-logins-table .app-col,
        .recent-logins-table .time-col,
        .recent-logins-table .ip-col,
        .recent-logins-table .openid-col {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 0.5rem 0 !important;
        }
        
        .recent-logins-table .app-col::before {
            content: "所属应用" !important;
            font-weight: 600 !important;
            color: var(--text-muted) !important;
            font-size: 0.75rem !important;
        }
        
        .recent-logins-table .time-col::before {
            content: "授权时间" !important;
            font-weight: 600 !important;
            color: var(--text-muted) !important;
            font-size: 0.75rem !important;
        }
        
        .recent-logins-table .ip-col::before {
            content: "IP地址" !important;
            font-weight: 600 !important;
            color: var(--text-muted) !important;
            font-size: 0.75rem !important;
        }
        
        .recent-logins-table .openid-col::before {
            content: "OpenID" !important;
            font-weight: 600 !important;
            color: var(--text-muted) !important;
            font-size: 0.75rem !important;
            display: block !important;
            margin-bottom: 0.25rem !important;
        }
        
        .recent-logins-table .openid-col {
            flex-direction: column !important;
            align-items: flex-start !important;
        }
        
        .recent-logins-table .openid-col code {
            width: 100% !important;
            word-break: break-all !important;
        }
        
        /* 最近注册用户表格 */
        .recent-users-table td:nth-child(1) {
            border-bottom: 1px solid var(--border-color-light) !important;
            margin-bottom: 0.5rem !important;
            padding-bottom: 0.75rem !important;
        }
        
        .recent-users-table td:nth-child(2),
        .recent-users-table td:nth-child(3) {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
        }
        
        .recent-users-table td:nth-child(2)::before {
            content: "邮箱" !important;
            font-weight: 600 !important;
            color: var(--text-muted) !important;
            font-size: 0.75rem !important;
        }
        
        .recent-users-table td:nth-child(3)::before {
            content: "注册时间" !important;
            font-weight: 600 !important;
            color: var(--text-muted) !important;
            font-size: 0.75rem !important;
        }
    }
}