/* ===== 平板 (<= 1024px) ===== */
@media (max-width: 1024px) {
    .page { padding: 16px 20px 80px; }
}

/* ===== 手机 (<= 768px) ===== */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
    }

    #app {
        flex-direction: column;
    }

    /* 隐藏侧边栏，显示底部导航 */
    .sidebar { display: none; }

    /* 显示移动端用户栏 */
    .mobile-user-bar { display: flex; }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--bottom-nav-height);
        background: #fff;
        border-top: 1px solid var(--border);
        z-index: 100;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--text-light);
        transition: color var(--transition);
    }

    .bottom-nav-item.active { color: var(--primary); }

    .bottom-nav-icon { font-size: 20px; }
    .bottom-nav-label { font-size: 10px; }

    .main-content {
        flex: 1;
        padding-bottom: var(--bottom-nav-height);
    }

    .page {
        padding: 14px 16px 80px;
    }

    .page-title { font-size: 20px; }

    /* 天气栏 */
    .weather-bar { padding: 12px 16px; }
    .weather-temp { font-size: 18px; }
    .weather-icon { font-size: 30px; }

    /* 待办 */
    .todo-input-area { gap: 8px; }
    .todo-input { padding: 10px 12px; }

    /* 速记卡 */
    .qc-detail-header { flex-wrap: wrap; gap: 8px; }
    .qc-book-title { font-size: 18px; }

    /* 笔记本 */
    .nb-editor-header { flex-wrap: wrap; gap: 8px; }
    .nb-title-input { font-size: 16px; }
    .nb-toolbar { gap: 4px; padding: 6px 8px; }
    .tool-btn { width: 32px; height: 32px; font-size: 14px; }
    .tool-color { width: 32px; height: 32px; }
    .nb-editor { padding: 14px; min-height: 250px; }

    /* 英语学习 */
    .en-card-word { font-size: 26px; }
    .en-card-meaning { font-size: 16px; }
    .en-flashcard { padding: 30px 16px; }
    .en-card-controls { gap: 6px; }
    .en-book-tab { padding: 7px 14px; font-size: 13px; }

    /* 番茄时钟 */
    .pomo-timer-ring { width: 180px; height: 180px; }
    .pomo-time-display { font-size: 36px; }
    .pomo-controls { gap: 8px; flex-wrap: wrap; justify-content: center; }
    .pomo-stats { gap: 30px; }
    .pomo-stat-num { font-size: 24px; }

    /* 考试倒计时 */
    .exam-card { flex-direction: column; gap: 12px; text-align: center; }
    .exam-card.urgent, .exam-card.warning, .exam-card.normal { border-left: none; border-top: 4px solid; }
    .exam-card.urgent { border-top-color: var(--danger); }
    .exam-card.warning { border-top-color: var(--warning); }
    .exam-card.normal { border-top-color: var(--success); }
    .exam-countdown { margin: 0; }
    .exam-days { font-size: 32px; }
    .exam-actions { flex-direction: row; }

    /* 弹窗 */
    .modal { max-width: 100%; }
    .modal-body { padding: 16px; }

    /* Toast */
    .toast { bottom: 70px; font-size: 13px; padding: 8px 20px; }
}

/* ===== 小手机 (<= 380px) ===== */
@media (max-width: 380px) {
    .page { padding: 12px 12px 80px; }
    .page-title { font-size: 18px; }
    .bottom-nav-label { display: none; }
    .bottom-nav-icon { font-size: 22px; }
    .en-book-tab { padding: 6px 10px; font-size: 12px; }
}