@media (max-width: 768px) {
    .side-nav {
        width: 60px;
    }
    
    .side-nav:hover {
        width: 180px;
    }
    
    .main-container {
        margin-left: 60px;
    }
    
    .content {
        padding: 20px;
    }
    
    .list-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-stats {
        grid-template-columns: 1fr;
    }
    
    .page-title {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    .page-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .create-section {
        padding: 15px;
        height: auto;
        min-height: 100%;
    }

    .input-field {
        padding: 15px;
        min-height: 150px;
    }
    
    /* 增强触控区域 */
    .nav-item, 
    .action-btn,
    .filter-btn,
    .page-btn {
        padding: 12px; /* 增大触控区域 */
        min-height: 44px; /* 苹果推荐的最小触控高度 */
    }
    
    /* 改善触控反馈 */
    .nav-item:active, 
    .button:active, 
    .action-btn:active {
        transform: scale(0.95);
    }
    
    .nav-toggle {
        display: none; /* 768px时仍然不显示汉堡菜单 */
    }
    
    /* 表格适配 */
    .records-table-container,
    .scores-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .side-nav {
        width: 50px;
        z-index: 1001; /* 确保在所有内容上方 */
    }
    
    .side-nav:hover {
        width: 160px;
    }
    
    .main-container {
        margin-left: 50px;
    }
    
    .content {
        padding: 15px 10px;
    }
    
    .create-btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-avatar {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .create-section {
        padding: 10px;
    }

    .page-title {
        font-size: 1.5rem;
    }

    .input-container {
        margin-bottom: 20px;
    }

    .input-field {
        font-size: 0.9rem;
    }
    
    /* 导航样式调整 */
    .tooltip {
        display: none; /* 在超小屏幕上隐藏工具提示 */
    }
    
    /* 优化表格，隐藏非关键列 */
    .records-table th:nth-child(1),
    .records-table td:nth-child(1),
    .scores-table th:nth-child(5),
    .scores-table td:nth-child(5) {
        display: none;
    }
}

@media (max-height: 600px) {
    .create-section {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        height: auto;
        min-height: 100vh;
        padding: 20px;
    }
    
    /* 减少垂直间距 */
    .input-container,
    .storyboard-header,
    .section-header {
        margin-bottom: 10px;
    }
    
    .nav-items {
        gap: 5px;
    }
}

@media (max-width: 992px) {
    .list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .content {
        padding: 15px 10px;
    }
    
    .modal-content {
        width: 95%;
        max-width: 450px;
    }
    
    /* 表单控件增强 */
    input, 
    button, 
    select, 
    textarea {
        font-size: 16px; /* 防止iOS自动缩放 */
    }
    
    /* 卡片和容器样式调整 */
    .recharge-container,
    .profile-section,
    .video-container {
        padding: 15px;
    }
    
    /* 显示汉堡菜单 */
    .nav-toggle {
        display: flex;
    }
    
    /* 侧边导航默认隐藏 */
    .side-nav {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: 200px; /* 展开状态宽度固定 */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }
    
    /* 当添加了active类时显示侧边栏 */
    .side-nav.active {
        transform: translateX(0);
    }
    
    /* 修复hover逻辑，在移动端不应该依赖hover显示标签 */
    .side-nav .nav-item-label {
        opacity: 1;
        display: block;
    }
    
    /* 主内容区域占满宽度 */
    .main-container {
        margin-left: 0;
    }
    
    /* 遮罩层 - 用于点击关闭导航 */
    .nav-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
    
    .nav-backdrop.active {
        opacity: 1;
        visibility: visible;
    }
}

/* 超小屏幕适配 - 针对320px宽的设备 */
@media (max-width: 375px) {
    .side-nav {
        width: 44px; /* 进一步减小侧边栏宽度 */
    }
    
    .main-container {
        margin-left: 44px;
    }
    
    /* 侧边栏图标调整 */
    .nav-item svg {
        width: 20px;
        height: 20px;
    }
    
    /* 可折叠样式：添加汉堡菜单支持 */
    .nav-toggle {
        display: block; /* 在JS中需要添加这个元素 */
    }
    
    .nav-items {
        gap: 8px; /* 减小导航项间距 */
    }
    
    .nav-item {
        padding: 10px; /* 减小内边距 */
    }
    
    /* 表格样式调整 */
    .records-table th:nth-child(2),
    .records-table td:nth-child(2),
    .scores-table th:nth-child(2),
    .scores-table td:nth-child(2) {
        display: none; /* 隐藏更多表格列 */
    }
    
    /* 对话框和模态框样式调整 */
    .modal-content,
    .custom-dialog {
        width: 98%;
    }
}

/* 针对折叠屏/翻盖手机的折叠状态 */
@media (max-width: 320px) {
    .side-nav {
        width: 40px;
    }
    
    .main-container {
        margin-left: 40px;
    }
    
    .content {
        padding: 10px 5px;
    }
    
    .list-grid {
        gap: 10px;
    }
    
    /* 压缩表单元素 */
    .form-group {
        margin-bottom: 10px;
    }
    
    .form-input,
    .input-field {
        padding: 8px 12px;
    }
    
    /* 确保触控区域足够大 */
    .button, 
    .btn, 
    .action-btn {
        min-height: 44px;
    }
}