/* 国象充电站 - 用户端样式（完整响应式适配 v5 - 修复单页高度问题） */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #f5f7fa;
    color: #333;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ==================== 桌面端布局 ==================== */

/* 整体布局 - 桌面端（单页高度） */
.cu-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: visible;
}
.cu-container > .cu-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: visible;
}
.cu-container > .cu-body > nav.cu-sidebar { flex: 0 0 200px; min-width: 200px; max-width: 200px; overflow: visible; }
.cu-container > .cu-body > main.cu-main { flex: 1; min-width: 0; overflow: visible; }

/* 顶部导航 */
.cu-header {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 50px;
}

.cu-header h1 {
    font-size: 16px;
    font-weight: 600;
}

.cu-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cu-user {
    font-size: 13px;
}

.cu-header-link {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.2s;
}

.cu-header-link:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}

.cu-header-link.active {
    background: rgba(255,255,255,0.2);
    color: white;
}

.cu-logout {
    color: white;
    text-decoration: none;
    font-size: 13px;
}

/* 侧边栏 - 桌面端（sticky 自滚动，避免撑高 main 留白） */
.cu-sidebar {
    background: white;
    padding: 8px 0;
    border-right: 1px solid #eee;
    width: 200px;
    position: sticky;
    top: 50px;
    align-self: flex-start;
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
/* 移动端分组 tab 行：桌面端默认隐藏（仅 <769px 显示） */
.cu-group-tabs { display: none; }
/* 桌面端：所有 nav-group 都显示（覆盖移动端的 display:none） */
@media (min-width: 769px) {
    .cu-sidebar .nav-group { display: block !important; }
    .cu-sidebar .nav-group.cu-group-show { display: block !important; }
}

.nav-group {
    margin-bottom: 8px;
}

.nav-group-title {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    padding: 4px 12px 2px;
    border-top: 1px solid #eee;
    margin-top: 4px;
}

.nav-group:first-child .nav-group-title {
    border-top: none;
    margin-top: 0;
}

.cu-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: #666;
    text-decoration: none;
}

.cu-nav-item:hover {
    background: #f8f9fa;
    color: #667eea;
}

.cu-nav-item.active {
    background: linear-gradient(90deg, rgba(102,126,234,0.1) 0%, transparent 100%);
    color: #667eea;
    border-left: 3px solid #667eea;
}

.cu-nav-icon {
    font-size: 14px;
}

.cu-nav-text {
    font-size: 12px;
}

/* 主内容区 - 桌面端 */
.cu-main {
    padding: 8px 12px;
    overflow: visible;
    min-width: 0;
    min-height: 200px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* 模块通用样式 */
.cu-module {
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--shadow);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cu-module-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cu-module-header h2 {
    font-size: 15px;
    margin-bottom: 0;
    color: var(--text-primary);
}

.cu-module-header p {
    font-size: 12px;
    color: var(--text-secondary);
}

.cu-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px var(--shadow);
    width: 100%;
    color: var(--text-primary);
}

/* 按钮 */
.cu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

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

/* 表格 */
.cu-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-primary);
}

.cu-table th,
.cu-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

/* 棋盘区域 */
.cu-board-section {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 10px;
    width: 100%;
}

.cu-board-canvas {
    max-width: 420px;
    max-height: 420px;
    border: 2px solid #8b4513;
    border-radius: 8px;
}

.cu-board-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cu-board-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

/* 统计卡片 */
.cu-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.cu-stat-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 8px 14px;
    text-align: center;
    color: var(--text-primary);
}

.cu-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #667eea;
}

.cu-stat-label {
    font-size: 10px;
    color: #666;
}

/* ==================== 移动端适配 (max-width: 768px) ==================== */

@media (max-width: 768px) {
    /* ===== 全局：移动端 module 字号提升（避免过小难读） ===== */
    .cu-module label,
    .cu-module .label,
    .cu-module .filter-label {
        font-size: 14px !important;
    }
    .cu-module button,
    .cu-module .btn,
    .cu-module .search-btn,
    .cu-module .reset-btn,
    .cu-module .header-btn,
    .cu-module .category-btn,
    .cu-module .ctrl-btn {
        font-size: 14px !important;
    }
    .cu-module input[type=text],
    .cu-module input[type=search],
    .cu-module input[type=number],
    .cu-module select,
    .cu-module textarea {
        font-size: 15px !important;
    }
    .cu-module th,
    .cu-module td,
    .cu-module .game-meta,
    .cu-module .game-info,
    .cu-module .opening-count,
    .cu-module .opening-eco,
    .cu-module .opening-name,
    .cu-module .moves-header,
    .cu-module .moves-list,
    .cu-module .hint-text {
        font-size: 14px !important;
    }
    .cu-module .cu-module-header h2 { font-size: 14px !important; }
    .cu-module .cu-module-header p { font-size: 14px !important; }

    /* 强制单列布局，保持视口高度限制 */
    .cu-container {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    .cu-header {
        width: 100% !important;
        padding: 0 10px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 40px !important;
    }

    .cu-header h1 {
        font-size: 14px !important;
    }

    .cu-header-left {
        gap: 4px !important;
    }

    .cu-user {
        display: none !important;
    }

    /* 移动端隐藏 header 中的 个人中心 链接，避免在窄屏挤压 */
    .cu-header-link {
        display: none !important;
    }

    .cu-logout {
        font-size: 14px !important;
        padding: 4px 10px !important;
    }

    /* ===== 方案 C：分组 tab + 横向滑动条 ===== */
    /* 分组切换胶囊按钮行（位于 header 下方） */
    .cu-group-tabs {
        position: fixed !important;
        top: 40px !important;
        left: 0 !important;
        right: 0 !important;
        height: 44px !important;
        background: white !important;
        border-bottom: 1px solid #eee !important;
        display: flex !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 100 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    /* ===== 第一级 tab：暖色胶囊 =====
       视觉定位：大胶囊 + 暖色渐变，醒目 */
    .cu-group-tab {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 6px 16px !important;
        height: 34px !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        color: #6b7280 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border: 1px solid #e5e7eb !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        font-family: inherit !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }
    .cu-group-tab:hover {
        background: #fff7ed !important;
        border-color: #fed7aa !important;
        color: #ea580c !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 6px rgba(234, 88, 12, 0.15) !important;
    }
    .cu-group-tab-icon { font-size: 15px !important; line-height: 1 !important; }
    .cu-group-tab-text { line-height: 1 !important; }
    .cu-group-tab.active {
        background: linear-gradient(135deg, #f97316 0%, #db2777 50%, #7c3aed 100%) !important;
        color: white !important;
        border-color: transparent !important;
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4), 0 2px 4px rgba(124, 58, 237, 0.2) !important;
        transform: translateY(-1px) !important;
    }
    .cu-group-tab.active .cu-group-tab-icon {
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
        transform: scale(1.1);
    }

    /* ===== 第二级菜单：浅色卡片条 + 主题色左侧条 =====
       视觉定位：与第一级 tab 形成"粗-细"对比 */
    .cu-sidebar {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 6px 10px !important;
        width: 100% !important;
        max-width: 100vw !important;
        background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
        border-right: none !important;
        border-top: 1px solid rgba(102, 126, 234, 0.08) !important;
        border-bottom: 1px solid rgba(102, 126, 234, 0.12) !important;
        position: fixed !important;
        top: 84px !important;
        left: 0 !important;
        z-index: 101 !important;
        scroll-snap-type: x proximity !important;
        height: 48px !important;
        margin-top: 0 !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }
    /* 渐隐左右边缘 */
    .cu-sidebar::before {
        left: 0 !important;
        background: linear-gradient(to right, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }
    .cu-sidebar::after {
        right: 0 !important;
        background: linear-gradient(to left, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }
    /* 左右渐隐提示（提示可滑动） */
    .cu-sidebar::before,
    .cu-sidebar::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 20px !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    .cu-sidebar::before {
        left: 0 !important;
        background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !important;
    }
    .cu-sidebar::after {
        right: 0 !important;
        background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !important;
    }

    /* 关键：默认隐藏所有 nav-group，仅显示 cu-group-show */
    .nav-group {
        display: none !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
    .nav-group.cu-group-show {
        display: flex !important;
    }

    .nav-group-title {
        display: none !important;
    }

    /* ===== 第二级菜单：浅色卡片 + 左侧主题色条 =====
       与第一级胶囊式 tab 形成视觉对比，更轻盈 */
    .cu-nav-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 14px 6px 12px !important;
        gap: 6px !important;
        text-align: center !important;
        border-radius: 10px !important;
        border: none !important;
        border-left: 3px solid transparent !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        height: 36px !important;
        font-size: 13px !important;
        background: rgba(255, 255, 255, 0.7) !important;
        color: #64748b !important;
        position: relative !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    }
    .cu-nav-item:hover {
        background: rgba(255, 255, 255, 1) !important;
        color: #667eea !important;
        border-left-color: rgba(102, 126, 234, 0.4) !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.12) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-item.active {
        background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%) !important;
        color: #4c51bf !important;
        border-left: 3px solid #667eea !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-item.active .cu-nav-icon {
        filter: drop-shadow(0 0 6px rgba(102, 126, 234, 0.5));
        transform: scale(1.1);
    }

    .cu-nav-icon {
        font-size: 14px !important;
        line-height: 1 !important;
        opacity: 0.85 !important;
        transition: all 0.2s ease !important;
    }
    .cu-nav-item.active .cu-nav-icon { opacity: 1 !important; }

    .cu-nav-text {
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
    }
    .cu-nav-item.active .cu-nav-text { font-weight: 600 !important; }

    /* 主内容区 - header(40) + tabs(44) + sidebar_margin(8) + sidebar(52) = 144px */
    .cu-main {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 4px !important;
        padding-top: 144px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        height: calc(100vh - 144px) !important;
    }

    .cu-module {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 6px !important;
        height: auto !important;
        min-height: calc(100% - 8px) !important;
        overflow: visible !important;
        display: block !important;
    }

    .cu-module-header {
        padding: 6px 8px !important;
    }

    .cu-module-header h2 {
        font-size: 14px !important;
    }

    .cu-module-header p {
        font-size: 14px !important;
    }

    .cu-card {
        width: 100% !important;
        padding: 8px !important;
        margin-bottom: 6px !important;
        border-radius: 6px !important;
    }

    /* 棋盘全宽 */
    .cu-board-section {
        width: 100% !important;
        padding: 4px !important;
        border-radius: 6px !important;
    }

    .cu-board-canvas {
        width: calc(100vw - 8px) !important;
        height: calc(100vw - 8px) !important;
        max-width: none !important;
        max-height: none !important;
    }

    .cu-board-controls {
        justify-content: center !important;
    }

    .cu-board-btn {
        padding: 5px 8px !important;
        font-size: 14px !important;
    }

    /* 统计卡片双列 */
    .cu-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .cu-stat-card {
        padding: 6px !important;
    }

    .cu-stat-value {
        font-size: 15px !important;
    }

    .cu-stat-label {
        font-size: 14px !important;
    }

    /* 表格 */
    .cu-table {
        width: 100% !important;
        font-size: 14px !important;
    }

    .cu-table th,
    .cu-table td {
        padding: 5px 3px !important;
    }

    /* 按钮 */
    .cu-btn {
        padding: 6px 10px !important;
        font-size: 14px !important;
    }
}

/* ==================== 超小屏幕 (< 360px) ==================== */

@media (max-width: 360px) {
    /* 360px 小屏：缩小 tab + sidebar 高度 */
    .cu-group-tabs {
        height: 40px !important;
        padding: 5px 8px !important;
        gap: 4px !important;
    }
    .cu-group-tab {
        padding: 5px 10px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
    .cu-group-tab-icon { font-size: 14px !important; }

    .cu-sidebar {
        padding: 3px 6px !important;
        gap: 3px !important;
        height: 44px !important;
        top: 80px !important; /* header(40) + tabs(40) */
    }

    .cu-nav-item {
        padding: 5px 10px !important;
        height: 36px !important;
    }

    .cu-nav-icon {
        font-size: 14px !important;
    }

    .cu-nav-text {
        font-size: 14px !important;
    }

    /* header(40) + tabs(40) + sidebar(44) = 124px */
    .cu-main {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 4px !important;
        padding-top: 124px !important;
        height: calc(100vh - 124px) !important;
    }

    .cu-board-canvas {
        width: calc(100vw - 8px) !important;
        height: calc(100vw - 8px) !important;
    }
}

/* ==================== 高分辨率桌面 (min-width: 1400px) ==================== */

@media (min-width: 1400px) {
    .cu-container {
        grid-template-columns: 260px 1fr;
    }

    .cu-sidebar {
        width: 260px;
    }

    .cu-main {
        padding: 28px;
    }
}

/* ==================== 低分辨率屏幕优化 (桌面端) ==================== */

/* 低高度屏幕 (高度 ≤ 850px) - 桌面端压缩 */
@media (max-height: 850px) and (min-width: 769px) {
    .cu-container {
        grid-template-rows: 44px minmax(0, 1fr);
        grid-template-columns: 180px 1fr;
    }

    .cu-header {
        height: 44px;
        padding: 0 12px;
    }

    .cu-header h1 {
        font-size: 14px;
    }

    .cu-header .cu-user {
        font-size: 10px;
    }

    .cu-header .cu-header-link {
        font-size: 10px;
        padding: 2px 6px;
    }

    .cu-sidebar {
        width: 180px;
        padding: 4px 0;
    }

    .nav-group {
        margin-bottom: 4px;
    }

    .nav-group-title {
        font-size: 9px;
        padding: 3px 10px 2px;
    }

    .cu-nav-item {
        padding: 4px 10px;
        gap: 6px;
    }

    .cu-nav-icon {
        font-size: 12px;
    }

    .cu-nav-text {
        font-size: 11px;
    }

    .cu-main {
        padding: 8px;
    }

    .cu-card {
        padding: 8px;
        margin-bottom: 8px;
    }

    .cu-module-header {
        padding: 8px 10px;
    }

    .cu-module-header h2 {
        font-size: 13px;
    }

    .cu-stats {
        gap: 4px;
    }

    .cu-stat-card {
        padding: 4px 8px;
    }

    .cu-stat-value {
        font-size: 16px;
    }

    .cu-stat-label {
        font-size: 8px;
    }
}

/* 更低高度屏幕 (高度 ≤ 750px) - 桌面端进一步压缩 */
@media (max-height: 750px) and (min-width: 769px) {
    .cu-container {
        grid-template-rows: 40px minmax(0, 1fr);
    }

    .cu-header {
        height: 40px;
        padding: 0 12px;
    }

    .cu-header h1 {
        font-size: 13px;
    }

    .cu-header .cu-user {
        display: none;
    }

    .cu-header .cu-header-link {
        font-size: 10px;
        padding: 2px 6px;
    }

    .cu-sidebar {
        padding: 4px 0;
    }

    .nav-group {
        margin-bottom: 3px;
    }

    .nav-group-title {
        font-size: 8px;
        padding: 3px 10px 2px;
    }

    .cu-nav-item {
        padding: 3px 10px;
        gap: 5px;
    }

    .cu-nav-icon {
        font-size: 11px;
    }

    .cu-nav-text {
        font-size: 10px;
    }

    .cu-main {
        padding: 6px;
    }

    .cu-card {
        padding: 8px;
        margin-bottom: 6px;
    }

    .cu-module-header {
        padding: 6px 8px;
    }

    .cu-module-header h2 {
        font-size: 12px;
    }

    .cu-module-header p {
        font-size: 10px;
    }

    .cu-stats {
        gap: 3px;
    }

    .cu-stat-card {
        padding: 4px 6px;
    }

    .cu-stat-value {
        font-size: 14px;
    }

    .cu-stat-label {
        font-size: 7px;
    }

    .cu-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .cu-table th,
    .cu-table td {
        padding: 6px 4px;
        font-size: 11px;
    }
}

/* 极低高度屏幕 (高度 ≤ 650px) - 桌面端极限压缩 */
@media (max-height: 650px) and (min-width: 769px) {
    .cu-container {
        grid-template-rows: 36px minmax(0, 1fr);
    }

    .cu-header {
        height: 36px;
        padding: 0 10px;
    }

    .cu-header h1 {
        font-size: 12px;
    }

    .cu-header .cu-user {
        display: none;
    }

    .cu-header .cu-header-link {
        font-size: 9px;
        padding: 2px 4px;
    }

    .cu-sidebar {
        padding: 2px 0;
    }

    .nav-group {
        margin-bottom: 2px;
    }

    .nav-group-title {
        font-size: 7px;
        padding: 2px 8px 1px;
    }

    .cu-nav-item {
        padding: 2px 8px;
        gap: 4px;
    }

    .cu-nav-icon {
        font-size: 10px;
    }

    .cu-nav-text {
        font-size: 9px;
    }

    .cu-main {
        padding: 4px;
    }

    .cu-card {
        padding: 6px;
        margin-bottom: 4px;
    }

    .cu-module-header {
        padding: 4px 6px;
    }

    .cu-module-header h2 {
        font-size: 11px;
    }

    .cu-module-header p {
        font-size: 9px;
    }

    .cu-stats {
        gap: 2px;
    }

    .cu-stat-card {
        padding: 3px 4px;
    }

    .cu-stat-value {
        font-size: 13px;
    }

    .cu-stat-label {
        font-size: 6px;
    }

    .cu-btn {
        padding: 4px 8px;
        font-size: 10px;
    }

    .cu-table th,
    .cu-table td {
        padding: 4px 3px;
        font-size: 10px;
    }
}

/* ==================== 移动端 + 低高度屏幕组合 ==================== */

/* 移动端 + 低高度 (max-width: 768px) and (max-height: 850px) */
@media (max-width: 768px) and (max-height: 850px) {
    .cu-header {
        height: 36px !important;
    }

    .cu-group-tabs {
        top: 36px !important;
        height: 32px !important;
        padding: 3px 8px !important;
    }
    .cu-group-tab {
        height: 26px !important;
        padding: 3px 10px !important;
        font-size: 13px !important;
    }

    .cu-sidebar {
        top: 72px !important;
        height: 40px !important;
        padding: 3px 8px !important;
        gap: 6px !important;
        background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
        border-top: 1px solid rgba(102, 126, 234, 0.08) !important;
        border-bottom: 1px solid rgba(102, 126, 234, 0.12) !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }
    .cu-sidebar::before {
        background: linear-gradient(to right, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }
    .cu-sidebar::after {
        background: linear-gradient(to left, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }

    .cu-nav-item {
        padding: 4px 12px 4px 10px !important;
        height: 32px !important;
        gap: 5px !important;
        font-size: 13px !important;
        background: rgba(255, 255, 255, 0.7) !important;
        color: #64748b !important;
        border-radius: 8px !important;
        border-left: 3px solid transparent !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    }
    .cu-nav-item:hover {
        background: rgba(255, 255, 255, 1) !important;
        color: #667eea !important;
        border-left-color: rgba(102, 126, 234, 0.4) !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.12) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-item.active {
        background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%) !important;
        color: #4c51bf !important;
        border-left: 3px solid #667eea !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-icon {
        font-size: 14px !important;
    }

    .cu-nav-text {
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    .cu-main {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 4px !important;
        padding-top: 116px !important;
        height: calc(100vh - 116px) !important;
    }

    .cu-card {
        padding: 6px !important;
        margin-bottom: 4px !important;
    }

    .cu-module-header {
        padding: 6px !important;
    }

    .cu-module-header h2 {
        font-size: 14px !important;
    }

    .cu-module-header p {
        font-size: 14px !important;
    }

    .cu-board-section {
        padding: 3px !important;
    }
}

/* 移动端 + 更低高度 (max-height: 750px) */
@media (max-width: 768px) and (max-height: 750px) {
    .cu-header {
        height: 34px !important;
    }

    .cu-group-tabs {
        top: 34px !important;
        height: 30px !important;
        padding: 3px 8px !important;
    }
    .cu-group-tab {
        height: 24px !important;
        padding: 3px 10px !important;
        font-size: 13px !important;
    }

    .cu-header h1 {
        font-size: 14px !important;
    }

    .cu-sidebar {
        top: 68px !important;
        height: 36px !important;
        padding: 3px 8px !important;
        gap: 6px !important;
        background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
        border-top: 1px solid rgba(102, 126, 234, 0.08) !important;
        border-bottom: 1px solid rgba(102, 126, 234, 0.12) !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }
    .cu-sidebar::before {
        background: linear-gradient(to right, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }
    .cu-sidebar::after {
        background: linear-gradient(to left, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }

    .cu-nav-item {
        padding: 4px 12px 4px 10px !important;
        height: 28px !important;
        gap: 5px !important;
        font-size: 13px !important;
        background: rgba(255, 255, 255, 0.7) !important;
        color: #64748b !important;
        border-radius: 8px !important;
        border-left: 3px solid transparent !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    }
    .cu-nav-item:hover {
        background: rgba(255, 255, 255, 1) !important;
        color: #667eea !important;
        border-left-color: rgba(102, 126, 234, 0.4) !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.12) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-item.active {
        background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%) !important;
        color: #4c51bf !important;
        border-left: 3px solid #667eea !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-icon {
        font-size: 13px !important;
    }

    .cu-nav-text {
        font-size: 13px !important;
    }

    .cu-main {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 4px !important;
        padding-top: 108px !important;
        height: calc(100vh - 108px) !important;
    }

    .cu-card {
        padding: 5px !important;
        margin-bottom: 3px !important;
    }

    .cu-module-header {
        padding: 5px !important;
    }

    .cu-module-header h2 {
        font-size: 14px !important;
    }

    .cu-module-header p {
        font-size: 14px !important;
    }

    .cu-board-section {
        padding: 2px !important;
    }
}

/* 移动端 + 极低高度 (max-height: 650px) - 手机横屏 */
@media (max-width: 768px) and (max-height: 650px) {
    .cu-header {
        height: 30px !important;
    }

    .cu-group-tabs {
        top: 30px !important;
        height: 26px !important;
        padding: 2px 6px !important;
    }
    .cu-group-tab {
        height: 22px !important;
        padding: 2px 8px !important;
        font-size: 13px !important;
    }

    .cu-header h1 {
        font-size: 14px !important;
    }

    .cu-sidebar {
        top: 60px !important;
        height: 30px !important;
        padding: 3px 8px !important;
        gap: 6px !important;
        background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
        border-top: 1px solid rgba(102, 126, 234, 0.08) !important;
        border-bottom: 1px solid rgba(102, 126, 234, 0.12) !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }
    .cu-sidebar::before {
        background: linear-gradient(to right, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }
    .cu-sidebar::after {
        background: linear-gradient(to left, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }

    .cu-nav-item {
        padding: 4px 12px 4px 10px !important;
        height: 26px !important;
        gap: 5px !important;
        font-size: 13px !important;
        background: rgba(255, 255, 255, 0.7) !important;
        color: #64748b !important;
        border-radius: 8px !important;
        border-left: 3px solid transparent !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    }
    .cu-nav-item:hover {
        background: rgba(255, 255, 255, 1) !important;
        color: #667eea !important;
        border-left-color: rgba(102, 126, 234, 0.4) !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.12) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-item.active {
        background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%) !important;
        color: #4c51bf !important;
        border-left: 3px solid #667eea !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-icon {
        font-size: 13px !important;
    }

    .cu-nav-text {
        font-size: 13px !important;
    }

    .cu-main {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 4px !important;
        padding-top: 94px !important;
        height: calc(100vh - 94px) !important;
    }

    .cu-card {
        padding: 4px !important;
        margin-bottom: 3px !important;
    }

    .cu-module-header {
        padding: 4px !important;
    }

    .cu-module-header h2 {
        font-size: 14px !important;
    }

    .cu-module-header p {
        font-size: 14px !important;
    }

    .cu-board-section {
        padding: 2px !important;
    }

    .cu-stats {
        gap: 3px !important;
    }

    .cu-stat-card {
        padding: 3px !important;
    }

    .cu-stat-value {
        font-size: 14px !important;
    }

    .cu-stat-label {
        font-size: 14px !important;
    }

    .cu-btn {
        padding: 3px 6px !important;
        font-size: 14px !important;
    }
}

/* 移动端 + 超极低高度 (max-height: 550px) - 手机横屏最小 */
@media (max-width: 768px) and (max-height: 550px) {
    .cu-header {
        height: 28px !important;
    }

    .cu-group-tabs {
        top: 28px !important;
        height: 24px !important;
        padding: 2px 6px !important;
    }
    .cu-group-tab {
        height: 20px !important;
        padding: 2px 8px !important;
        font-size: 12px !important;
    }

    .cu-header h1 {
        font-size: 14px !important;
    }

    .cu-sidebar {
        top: 56px !important;
        height: 28px !important;
        padding: 3px 8px !important;
        gap: 6px !important;
        background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
        border-top: 1px solid rgba(102, 126, 234, 0.08) !important;
        border-bottom: 1px solid rgba(102, 126, 234, 0.12) !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }
    .cu-sidebar::before {
        background: linear-gradient(to right, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }
    .cu-sidebar::after {
        background: linear-gradient(to left, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }

    .cu-nav-item {
        padding: 4px 12px 4px 10px !important;
        height: 24px !important;
        gap: 5px !important;
        font-size: 12px !important;
        background: rgba(255, 255, 255, 0.7) !important;
        color: #64748b !important;
        border-radius: 8px !important;
        border-left: 3px solid transparent !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    }
    .cu-nav-item:hover {
        background: rgba(255, 255, 255, 1) !important;
        color: #667eea !important;
        border-left-color: rgba(102, 126, 234, 0.4) !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.12) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-item.active {
        background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%) !important;
        color: #4c51bf !important;
        border-left: 3px solid #667eea !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-icon {
        font-size: 12px !important;
    }

    .cu-nav-text {
        font-size: 12px !important;
    }

    .cu-main {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 4px !important;
        padding-top: 88px !important;
        height: calc(100vh - 88px) !important;
    }

    .cu-card {
        padding: 3px !important;
        margin-bottom: 2px !important;
    }

    .cu-module-header {
        padding: 3px !important;
    }

    .cu-module-header h2 {
        font-size: 14px !important;
    }

    .cu-module-header p {
        font-size: 14px !important;
    }

    .cu-board-section {
        padding: 2px !important;
    }

    .cu-stats {
        gap: 2px !important;
    }

    .cu-stat-card {
        padding: 2px !important;
    }

    .cu-stat-value {
        font-size: 14px !important;
    }

    .cu-stat-label {
        font-size: 14px !important;
    }

    .cu-btn {
        padding: 2px 5px !important;
        font-size: 14px !important;
    }
}

/* 移动端 + 极限低高度 (max-height: 450px) */
@media (max-width: 768px) and (max-height: 450px) {
    .cu-header {
        height: 26px !important;
    }

    .cu-group-tabs {
        top: 26px !important;
        height: 22px !important;
        padding: 1px 4px !important;
    }
    .cu-group-tab {
        height: 20px !important;
        padding: 1px 6px !important;
        font-size: 11px !important;
    }

    .cu-header h1 {
        font-size: 14px !important;
    }

    .cu-sidebar {
        top: 52px !important;
        height: 26px !important;
        padding: 3px 8px !important;
        gap: 6px !important;
        background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
        border-top: 1px solid rgba(102, 126, 234, 0.08) !important;
        border-bottom: 1px solid rgba(102, 126, 234, 0.12) !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    }
    .cu-sidebar::before {
        background: linear-gradient(to right, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }
    .cu-sidebar::after {
        background: linear-gradient(to left, rgba(238, 242, 247, 1) 0%, rgba(238, 242, 247, 0) 100%) !important;
    }

    .cu-nav-item {
        padding: 4px 12px 4px 10px !important;
        height: 22px !important;
        gap: 5px !important;
        font-size: 11px !important;
        background: rgba(255, 255, 255, 0.7) !important;
        color: #64748b !important;
        border-radius: 8px !important;
        border-left: 3px solid transparent !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    }
    .cu-nav-item:hover {
        background: rgba(255, 255, 255, 1) !important;
        color: #667eea !important;
        border-left-color: rgba(102, 126, 234, 0.4) !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.12) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-item.active {
        background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%) !important;
        color: #4c51bf !important;
        border-left: 3px solid #667eea !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
        transform: translateY(-1px) !important;
    }
    .cu-nav-icon {
        font-size: 12px !important;
    }

    .cu-nav-text {
        font-size: 11px !important;
    }

    .cu-main {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 4px !important;
        padding-top: 82px !important;
        height: calc(100vh - 82px) !important;
    }

    .cu-card {
        padding: 2px !important;
        margin-bottom: 2px !important;
    }

    .cu-module-header {
        padding: 2px !important;
    }

    .cu-module-header h2 {
        font-size: 14px !important;
    }

    .cu-module-header p {
        font-size: 14px !important;
    }

    .cu-board-section {
        padding: 1px !important;
    }

    .cu-stats {
        gap: 1px !important;
    }

    .cu-stat-card {
        padding: 1px !important;
    }

    .cu-stat-value {
        font-size: 14px !important;
    }

    .cu-stat-label {
        font-size: 14px !important;
    }

    .cu-btn {
        padding: 1px 4px !important;
        font-size: 14px !important;
    }
}