/**
 * 学生端移动端 UI 优化样式
 * 仅对 ≤768px / ≤480px 生效，不影响 PC 端及其他端。
 * 使用 body 前缀提升特异性 (0,0,2,1) 以覆盖 student.js 内联 <style>。
 */

/* ============================================================
   分组 1：顶部 page-header & user-bar 通用
   ============================================================ */
@media (max-width: 768px) {
    body .student-page .page-header {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }
    body .student-page .page-header h1 {
        font-size: 20px;
        margin-bottom: 0;
        flex: 1 1 auto;
        min-width: 0;
    }
    body .student-page .page-header h1 img {
        width: 28px;
        height: 28px;
    }
    body .student-page .user-bar {
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
        height: auto;
    }
    body .student-page .user-bar > span:first-of-type {
        display: none;
    }
    body .student-page .user-bar > span:nth-of-type(2) {
        display: none;
    }
    body .student-page .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    body .student-page .user-avatar-img {
        width: 32px;
        height: 32px;
    }
    body .student-page .user-bar .btn-text {
        padding: 4px 8px;
        font-size: 12px;
        min-height: 28px;
    }
}

/* ============================================================
   分组 2：student-nav 移动端美化
   ============================================================ */
@media (max-width: 768px) {
    body .student-page .student-nav {
        gap: 4px;
        margin-bottom: 16px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    body .student-page .student-nav a {
        padding: 8px 14px;
        font-size: 13px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        scroll-snap-align: start;
        position: relative;
    }
    body .student-page .student-nav a.active {
        color: var(--accent-secondary);
        font-weight: 600;
        background: var(--accent-secondary-soft);
    }
    body .student-page .student-nav a.active::after {
        content: '';
        position: absolute;
        bottom: -9px;
        left: 12px;
        right: 12px;
        height: 2px;
        background: var(--accent-secondary);
        border-radius: 1px;
    }
}

/* ============================================================
   分组 3：试卷库（exam-grid + grade-section）
   ============================================================ */
@media (max-width: 768px) {
    body .student-page {
        padding: 16px 14px;
    }
    body .student-page .subject-filter-row {
        gap: 6px;
        margin-bottom: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    body .student-page .subject-filter-tab {
        padding: 6px 14px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    body .student-page .grade-section {
        margin-bottom: 20px;
    }
    body .student-page .grade-header {
        padding: 10px 12px;
        margin-bottom: 12px;
        gap: 8px;
    }
    body .student-page .grade-header-title {
        font-size: 15px;
    }
    body .student-page .exam-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    body .student-page .exam-card {
        padding: 16px;
    }
    body .student-page .exam-title {
        font-size: 16px;
        margin-bottom: 10px;
    }
    body .student-page .exam-meta {
        gap: 6px;
        font-size: 12px;
        margin-bottom: 12px;
    }
    body .student-page .exam-meta span {
        padding: 2px 8px;
        font-size: 11px;
    }
    body .student-page .exam-score {
        font-size: 22px;
    }
}

/* ============================================================
   分组 4：答题中（增强已有 safe-area & sticky 提交栏）
   ============================================================ */
@media (max-width: 768px) {
    body .exam-page {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
    body .exam-header-wrap {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

@media (max-width: 480px) {
    body .exam-page {
        padding-left: 10px;
        padding-right: 10px;
    }
    body .question-card {
        padding: 12px;
    }
    body .outline-fab {
        bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   分组 5：答题结果（result-page）
   ============================================================ */
@media (max-width: 768px) {
    body .result-page {
        padding: 32px 16px;
    }
    body .result-score-ring {
        width: 160px;
        height: 160px;
    }
    body .result-score-inner {
        inset: 10px;
    }
    body .result-score {
        font-size: 52px;
    }
    body .result-stars {
        font-size: 28px;
    }
    body .result-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }
    body .result-actions {
        flex-direction: column;
        align-items: stretch;
    }
    body .result-actions .btn-primary,
    body .result-actions .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    body .result-page {
        padding: 24px 12px;
    }
    body .result-score-ring {
        width: 140px;
        height: 140px;
    }
    body .result-score {
        font-size: 44px;
    }
    body .result-stat-value {
        font-size: 24px;
    }
    body .result-stat {
        padding: 16px 12px;
    }
}

/* ============================================================
   分组 6：错题本
   ============================================================ */
@media (max-width: 768px) {
    body .student-page .wrongbook-list {
        overflow: visible;
    }
    body .student-page .wrong-item {
        padding: 14px 14px;
    }
    body .student-page .wrong-question {
        font-size: 14px;
        margin-bottom: 10px;
    }
    body .student-page .wrong-answer {
        flex-direction: column;
        gap: 6px;
    }
    body .student-page .wrong-meta {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 11px;
        margin-bottom: 8px;
    }
    body .student-page .wrong-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    body .student-page .wrong-actions .btn-text,
    body .student-page .wrong-actions .btn-secondary {
        flex: 1 1 auto;
        min-width: 80px;
        text-align: center;
        justify-content: center;
        font-size: 12px;
        padding: 8px 10px;
    }
    body .student-page .wrong-history-toggle {
        padding: 8px 0;
        min-height: 36px;
        align-items: center;
    }
    body .student-page .wrong-history {
        padding: 10px 12px;
    }
    body .student-page .empty-state {
        padding: 60px 16px;
    }
}

/* ============================================================
   分组 7：成绩中心（增强已有）
   ============================================================ */
@media (max-width: 480px) {
    body .lc-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    body .lc-stat {
        padding: 10px 12px;
        gap: 8px;
    }
    body .lc-stat .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    body .lc-stat .stat-val {
        font-size: 16px;
    }
    body .lc-stat .stat-lbl {
        font-size: 10px;
    }
    body .lc-chart-section {
        padding: 12px 12px 6px;
    }
    body #lc-score-chart {
        height: 160px;
    }
}

/* ============================================================
   分组 8：历史详情（增强已有）
   ============================================================ */
@media (max-width: 768px) {
    body .hd-page {
        padding: 12px 10px;
    }
    body .hd-question-card {
        padding: 12px;
        margin-bottom: 10px;
    }
    body .hd-q-header {
        gap: 6px;
    }
    body .hd-q-number {
        font-size: 12px;
    }
    body .hd-q-content {
        font-size: 13px;
    }
    body .hd-q-explanation {
        font-size: 12px;
        padding: 8px 10px;
    }
}

/* ============================================================
   分组 9：奖励中心
   ============================================================ */
@media (max-width: 768px) {
    body .reward-hero {
        padding: 20px 14px;
        gap: 6px;
    }
    body .reward-hero .flower-icon {
        font-size: 32px;
    }
    body .reward-hero .flower-count {
        font-size: 36px;
    }
    body .reward-hero .flower-stats {
        gap: 12px;
    }
    body .goal-card {
        padding: 12px;
        gap: 8px;
        flex-direction: column;
    }
    body .goal-info {
        width: 100%;
    }
    body .goal-status {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    body .item-grid {
        grid-template-columns: 1fr;
    }
    body .reward-hero .flower-stats {
        gap: 10px;
    }
    body .reward-hero .flower-stat .val {
        font-size: 18px;
    }
    body .reward-hero .flower-stat .lbl {
        font-size: 11px;
    }
}

/* ============================================================
   分组 10：AI 老师
   ============================================================ */
@media (max-width: 768px) {
    body .ai-chat-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    body .ai-chat-box {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - 260px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body .ai-message-content {
        max-width: 86%;
        word-break: break-word;
    }
    body .ai-chat-input-area {
        position: sticky;
        bottom: env(safe-area-inset-bottom, 0px);
        z-index: 10;
        padding: 10px 12px;
        background: var(--bg-paper);
        border-top: 1px solid var(--border-light);
        flex-shrink: 0;
    }
    body .ai-welcome .icon {
        font-size: 32px;
    }
    body .ai-welcome h3 {
        font-size: 14px;
    }
    body .ai-welcome p {
        font-size: 12px;
    }
    body .ai-suggestions {
        gap: 6px;
    }
    body .ai-suggestion-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* ============================================================
   分组 11：设置
   ============================================================ */
@media (max-width: 768px) {
    body .settings-grid {
        gap: 12px;
    }
    body .settings-card {
        padding: 16px;
    }
    body .settings-card-title {
        font-size: 15px;
        margin-bottom: 12px;
    }
    body .settings-card-desc {
        font-size: 12px;
        margin-bottom: 12px;
    }

    /* Profile 上下布局 */
    body .profile-edit {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    body .profile-avatar,
    body .profile-avatar-placeholder {
        width: 64px;
        height: 64px;
        font-size: 24px;
    }
    body .profile-fields {
        width: 100%;
    }
    body .profile-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    body .profile-actions .btn-setting {
        flex: 1 1 auto;
        min-width: 100px;
        text-align: center;
    }

    /* Stat row 满宽 grid 2 列 */
    body .stat-row {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }
    body .stat-badge {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
        padding: 8px 10px;
        font-size: 12px;
    }
    body .stat-badge strong {
        font-size: 14px;
    }

    /* Info list 双行 */
    body .info-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 8px 0;
    }
    body .info-list li .label {
        font-size: 11px;
    }
    body .info-list li .value {
        font-size: 13px;
    }

    /* 按钮组满宽 */
    body .btn-setting {
        width: 100%;
        justify-content: center;
    }

    /* Psychology history */
    body .psych-history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 12px;
    }
}