/* ============================================
   claw-work 移动端样式表
   使用 @media (max-width: 768px) 区分移动端
   ============================================ */

@media (max-width: 768px) {
    /* 通用移动端重置 */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    body {
        font-size: 14px;
        line-height: 1.5;
    }

    .container {
        padding: 10px;
        margin: 0;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    /* Header 标题调整 */
    header {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .header-title {
        text-align: center;
        margin-bottom: 10px;
    }

    h1 {
        font-size: 1.5em !important;
        text-align: center;
    }

    .user-menu {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    /* 首页按钮垂直排列 */
    .tool-selector {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .tool-btn {
        width: 100% !important;
        max-width: 300px !important;
        min-width: unset !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
    }

    .tool-description {
        font-size: 12px !important;
        margin-top: 5px !important;
    }

    /* 内容区域自适应 */
    .content-area {
        max-height: calc(100vh - 280px) !important;
        min-height: auto !important;
        border-radius: 10px;
    }

    .iframe-container {
        height: calc(100vh - 280px) !important;
        min-height: 400px !important;
    }

    .welcome-screen {
        min-height: auto !important;
        padding: 20px 15px !important;
    }

    .welcome-title {
        font-size: 1.3em !important;
    }

    .welcome-text {
        font-size: 14px !important;
        padding: 0 10px;
    }

    .feature-list {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .feature-item {
        padding: 15px !important;
    }

    .feature-title {
        font-size: 1em !important;
    }

    .feature-desc {
        font-size: 13px !important;
    }

    /* 表格横向滚动支持 */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    table {
        font-size: 12px !important;
        min-width: 600px;
    }

    th, td {
        padding: 6px 8px !important;
        white-space: nowrap;
    }

    /* 输入框适合触摸操作 */
    input, select, textarea {
        padding: 12px 10px !important;
        font-size: 16px !important;
        min-height: 44px;
        border-radius: 6px;
    }

    textarea {
        min-height: 80px;
    }

    label {
        font-size: 14px;
        margin-bottom: 8px;
    }

    /* 配置区域 */
    .config-section {
        padding: 15px !important;
    }

    .config-title {
        font-size: 16px !important;
    }

    .config-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .config-item {
        width: 100% !important;
        min-width: unset !important;
    }

    /* 上传区域 */
    .upload-section {
        padding: 15px !important;
    }

    .upload-btn {
        padding: 14px 20px !important;
        font-size: 15px !important;
        margin: 8px !important;
    }

    /* 导出按钮 */
    .export-section {
        padding: 12px !important;
    }

    .export-btn {
        padding: 14px 20px !important;
        font-size: 15px !important;
        margin: 5px !important;
        width: 100%;
        max-width: 300px;
    }

    /* 学生卡片 */
    .student-list {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .student-card {
        padding: 12px !important;
    }

    .chart-container {
        height: 250px !important;
    }

    /* 温馨提示 */
    .tips-section {
        padding: 15px !important;
    }

    .tips-title {
        font-size: 16px !important;
    }

    .tips-content {
        flex-direction: column !important;
    }

    .tips-icon {
        margin-bottom: 8px;
    }

    /* 加载和消息 */
    .loading {
        padding: 15px !important;
        font-size: 14px;
    }

    .success, .error {
        padding: 12px !important;
        font-size: 14px;
    }

    /* 下拉菜单 */
    .user-dropdown {
        min-width: 120px;
        right: -10px;
    }

    .user-dropdown-item {
        padding: 10px 15px !important;
        font-size: 13px !important;
    }

    /* 单节整合页面 */
    .student-card-wrap {
        padding-right: 0 !important;
    }

    .card-actions {
        position: relative !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin-top: 10px;
        text-align: center;
    }

    .delete-card-btn {
        padding: 10px 15px !important;
        font-size: 13px !important;
    }

    /* 图表和表格布局 */
    .chart-container {
        flex-direction: column !important;
        height: auto !important;
    }

    .chart-wrapper {
        width: 100% !important;
        height: 250px !important;
    }

    .lesson-table {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 15px !important;
        font-size: 14px !important;
    }

    .lesson-table th, .lesson-table td {
        padding: 6px 4px !important;
        font-size: 14px !important;
    }

    .lesson-table th:first-child {
        width: auto;
    }

    /* 控制按钮 */
    .controls {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .controls button {
        width: 100% !important;
        margin-bottom: 8px;
    }

    /* 进度条 */
    .progress-bar {
        width: 90% !important;
    }

    /* 笔记区域 */
    .note {
        font-size: 14px !important;
        padding: 10px !important;
    }

    /* 高级分析页面 */
    .config-panel {
        padding: 12px !important;
    }

    .config-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .config-row label {
        width: 100% !important;
        margin-bottom: 5px;
    }

    .config-row input, 
    .config-row textarea {
        width: 100% !important;
    }

    /* 表格容器 */
    .table-scroll-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 10px 0;
    }

    /* 隐藏非必要元素 */
    .description {
        font-size: 13px !important;
        padding: 0 10px;
    }
}

/* 更小屏幕的额外调整 */
@media (max-width: 480px) {
    h1 {
        font-size: 1.3em !important;
    }

    .welcome-icon {
        font-size: 3em !important;
    }

    .welcome-title {
        font-size: 1.2em !important;
    }

    .tool-btn {
        font-size: 13px !important;
    }

    .feature-icon {
        font-size: 1.5em !important;
    }

    .chart-wrapper {
        height: 200px !important;
    }

    .lesson-table {
        font-size: 12px !important;
    }

    .upload-btn, .export-btn {
        width: 100% !important;
        max-width: unset !important;
    }
}