<template>
    <view class="wrong-page">
        <view class="bg-blur bg-blur-a"></view>
        <view class="bg-blur bg-blur-b"></view>

        <scroll-view class="page-scroll" scroll-y :show-scrollbar="false">
            <view class="hero">
                <view>
                    <view class="eyebrow">错题练习</view>
                    <view class="hero-title">把失分题变成提分点</view>
                    <view class="hero-desc">按学科、题型和掌握状态整理错题，复习时更聚焦。</view>
                </view>
                <view class="hero-badge">
                    <text class="hero-badge-num">{{ totalWrong }}</text>
                    <text class="hero-badge-text">道错题</text>
                </view>
            </view>

            <view v-if="!pageLoading" class="content">
                <view class="subject-grid">
                    <view
                        v-for="subject in subjectStats"
                        :key="subject.name"
                        class="subject-card"
                        :class="{ active: selectedSubject === subject.name }"
                        @click="selectSubject(subject.name)"
                    >
                        <view class="subject-icon" :class="subject.tone">
                            <text>{{ subject.shortName }}</text>
                        </view>
                        <view class="subject-main">
                            <view class="subject-name">{{ subject.name }}</view>
                            <view class="subject-count">{{ subject.total }} 道待复盘</view>
                        </view>
                        <view class="subject-meta">
                            <view>
                                <text>{{ subject.newCount }}</text>
                                <text>新增</text>
                            </view>
                            <view>
                                <text>{{ subject.reviewCount }}</text>
                                <text>复习本</text>
                            </view>
                            <view>
                                <text>{{ subject.masteredCount }}</text>
                                <text>已掌握</text>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="tabs">
                    <view
                        v-for="tab in tabs"
                        :key="tab.key"
                        class="tab"
                        :class="{ active: activeTab === tab.key }"
                        @click="activeTab = tab.key"
                    >
                        <text>{{ tab.label }}</text>
                        <text class="tab-count">{{ getTabCount(tab.key) }}</text>
                    </view>
                </view>

                <view class="filter-row">
                    <picker class="filter-picker" :range="gradeOptions" :value="gradeIndex" @change="onGradeChange">
                        <view class="filter-pill">
                            <text>{{ gradeOptions[gradeIndex] }}</text>
                            <view class="filter-arrow"></view>
                        </view>
                    </picker>
                    <picker class="filter-picker" :range="typeOptions" :value="typeIndex" @change="onTypeChange">
                        <view class="filter-pill">
                            <text>{{ typeOptions[typeIndex] }}</text>
                            <view class="filter-arrow"></view>
                        </view>
                    </picker>
                    <picker class="filter-picker" :range="examOptions" :value="examIndex" @change="onExamChange">
                        <view class="filter-pill">
                            <text>{{ examOptions[examIndex] }}</text>
                            <view class="filter-arrow"></view>
                        </view>
                    </picker>
                </view>

                <view v-if="filteredQuestions.length" class="question-list">
                    <view v-for="item in filteredQuestions" :key="item.id" class="question-card">
                        <view class="question-head">
                            <view class="question-index">
                                <text>第{{ item.number }}题</text>
                                <text>满分{{ item.score }}分</text>
                            </view>
                            <view class="status-tag" :class="item.status">{{ getStatusText(item.status) }}</view>
                        </view>

                        <view class="exam-name">{{ item.examName }}</view>
                        <view class="question-title">
                            <rich-text :nodes="item.title" />
                        </view>

                        <view v-if="item.options.length" class="option-list">
                            <view v-for="option in item.options" :key="option.key" class="option-item">
                                <text class="option-key">{{ option.key }}</text>
                                <view class="option-value">
                                    <rich-text :nodes="option.value" />
                                </view>
                            </view>
                        </view>

                        <view class="answer-tabs">
                            <view
                                class="answer-tab"
                                :class="{ active: item.openPanel === 'mine' }"
                                @click="item.openPanel = 'mine'"
                            >
                                我的作答
                            </view>
                            <view
                                class="answer-tab"
                                :class="{ active: item.openPanel === 'analysis' }"
                                @click="item.openPanel = 'analysis'"
                            >
                                答案&解析
                            </view>
                            <view class="answer-tab action" @click="toggleReview(item)">
                                {{ item.inReviewBook ? '移出复习本' : '加入复习本' }}
                            </view>
                        </view>

                        <view v-if="item.openPanel === 'mine'" class="info-box mine">
                            <view class="info-title">我的作答</view>
                            <view class="info-content">{{ item.myAnswer || '未作答' }}</view>
                        </view>

                        <template v-else>
                            <view class="info-box correct">
                                <view class="info-title">正确答案</view>
                                <view class="info-content">{{ item.answer || '暂无答案' }}</view>
                            </view>
                            <view v-if="item.analysis" class="info-box analysis">
                                <view class="info-title">试题解析</view>
                                <view class="info-content">
                                    <rich-text :nodes="item.analysis" />
                                </view>
                            </view>
                            <view v-if="item.knowledge" class="info-box knowledge">
                                <view class="info-title">知识点</view>
                                <view class="info-content">{{ item.knowledge }}</view>
                            </view>
                        </template>

                        <view class="card-actions">
                            <view class="mark-btn" @click="markMastered(item)">
                                {{ item.status === 'mastered' ? '标为未掌握' : '标为已掌握' }}
                            </view>
                            <view class="practice-btn" @click="practiceAgain(item)">再练一次</view>
                        </view>
                    </view>
                </view>

                <view v-else class="empty-wrap">
                    <xy-Empty type="learn" content="当前筛选下暂无错题" />
                </view>
            </view>

            <view v-else class="loading-wrap">
                <xy-Empty type="loading" content="正在整理错题..." />
            </view>

            <view class="safe-bottom"></view>
        </scroll-view>

        <view class="home-float" @click="goHome">
            <view class="home-roof"></view>
            <view class="home-body"></view>
        </view>

        <view v-if="!pageLoading && filteredQuestions.length" class="bottom-bar">
            <view class="download-btn" @click="downloadWrongQuestions">一键下载错题</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getListCompleteRecord, getPaperRecordDetail } from '../../api/homework';
import { resource_type_homework } from '@/constants/doWork';

type WrongStatus = 'new' | 'review' | 'mastered';
type TabKey = 'all' | 'new' | 'mastered';

interface WrongOption {
    key: string;
    value: string;
}

interface WrongQuestion {
    id: string;
    recordId: string;
    subject: string;
    grade: string;
    type: string;
    examName: string;
    number: number;
    score: number;
    title: string;
    options: WrongOption[];
    myAnswer: string;
    answer: string;
    analysis: string;
    knowledge: string;
    status: WrongStatus;
    inReviewBook: boolean;
    openPanel: 'mine' | 'analysis';
}

const pageLoading = ref(true);
const wrongQuestions = ref<WrongQuestion[]>([]);
const selectedSubject = ref('全部');
const activeTab = ref<TabKey>('all');
const gradeIndex = ref(0);
const typeIndex = ref(0);
const examIndex = ref(0);

const tabs: { key: TabKey; label: string }[] = [
    { key: 'all', label: '全部错题' },
    { key: 'new', label: '未掌握' },
    { key: 'mastered', label: '已掌握' },
];

const subjectTones = ['blue', 'green', 'orange', 'rose', 'violet'];

const totalWrong = computed(() => wrongQuestions.value.length);

const subjectStats = computed(() => {
    const subjects = ['全部', ...Array.from(new Set(wrongQuestions.value.map((item) => item.subject).filter(Boolean)))];
    return subjects.map((name, index) => {
        const list = name === '全部' ? wrongQuestions.value : wrongQuestions.value.filter((item) => item.subject === name);
        return {
            name,
            shortName: name === '全部' ? '全' : name.slice(0, 1),
            tone: subjectTones[index % subjectTones.length],
            total: list.length,
            newCount: list.filter((item) => item.status === 'new').length,
            reviewCount: list.filter((item) => item.inReviewBook).length,
            masteredCount: list.filter((item) => item.status === 'mastered').length,
        };
    });
});

const scopedQuestions = computed(() => {
    let list = wrongQuestions.value;
    if (selectedSubject.value !== '全部') {
        list = list.filter((item) => item.subject === selectedSubject.value);
    }
    return list;
});

const gradeOptions = computed(() => ['不限年级', ...Array.from(new Set(scopedQuestions.value.map((item) => item.grade).filter(Boolean)))]);
const typeOptions = computed(() => ['不限类型', ...Array.from(new Set(scopedQuestions.value.map((item) => item.type).filter(Boolean)))]);
const examOptions = computed(() => ['选择考试', ...Array.from(new Set(scopedQuestions.value.map((item) => item.examName).filter(Boolean)))]);

const filteredQuestions = computed(() => {
    const grade = gradeOptions.value[gradeIndex.value];
    const type = typeOptions.value[typeIndex.value];
    const exam = examOptions.value[examIndex.value];
    return scopedQuestions.value.filter((item) => {
        const tabMatched = activeTab.value === 'all'
            || (activeTab.value === 'new' && item.status !== 'mastered')
            || (activeTab.value === 'mastered' && item.status === 'mastered');
        const gradeMatched = !grade || grade === '不限年级' || item.grade === grade;
        const typeMatched = !type || type === '不限类型' || item.type === type;
        const examMatched = !exam || exam === '选择考试' || item.examName === exam;
        return tabMatched && gradeMatched && typeMatched && examMatched;
    });
});

const getTabCount = (key: TabKey) => {
    if (key === 'all') return scopedQuestions.value.length;
    if (key === 'new') return scopedQuestions.value.filter((item) => item.status !== 'mastered').length;
    return scopedQuestions.value.filter((item) => item.status === 'mastered').length;
};

const selectSubject = (name: string) => {
    selectedSubject.value = name;
    gradeIndex.value = 0;
    typeIndex.value = 0;
    examIndex.value = 0;
};

const onGradeChange = (e: any) => { gradeIndex.value = Number(e.detail.value); };
const onTypeChange = (e: any) => { typeIndex.value = Number(e.detail.value); };
const onExamChange = (e: any) => { examIndex.value = Number(e.detail.value); };

const normalizeHtml = (html?: string) => {
    if (!html) return '';
    return String(html)
        .replace(/http:\/\//gi, 'https://')
        .replace(/<img(?![^>]*formula-img)[^>]*\/?>/gi, '');
};

const normalizeAnswer = (value: any) => {
    if (Array.isArray(value)) return value.join('、');
    if (value == null) return '';
    return String(value).replace(/^\[|\]$/g, '').replace(/"/g, '').replace(/,/g, '、');
};

const parseOptions = (raw: any): WrongOption[] => {
    let list = raw;
    if (typeof list === 'string') {
        try {
            list = JSON.parse(list);
        } catch {
            list = [];
        }
    }
    if (!Array.isArray(list)) return [];
    return list.map((item, index) => ({
        key: typeof item === 'string' ? String.fromCharCode(65 + index) : (item?.key || item?.optionKey || item?.label || String.fromCharCode(65 + index)),
        value: normalizeHtml(typeof item === 'string' ? item : (item?.value || item?.optionValue || '')),
    })).filter((item) => item.value);
};

const getGradeText = (record: any, item: any) => {
    return item.gradeName || item.grade || record.gradeName || record.grade || '未分年级';
};

const isWrongQuestion = (item: any) => {
    const hasAnswer = Boolean(item.submitAnswer || item.submitAnswerPic);
    const correct = item.correctResult === 1 || item.correctResult === true || item.markFlag === 1 || item.markFlag === true;
    return hasAnswer && !correct;
};

const mapQuestion = (record: any, item: any, index: number): WrongQuestion => ({
    id: String(item.itemId || item.id || `${record.id}-${index}`),
    recordId: String(record.id || record.recordId || ''),
    subject: item.subjectName || record.subjectName || '其他',
    grade: getGradeText(record, item),
    type: item.titleChannelTypeName || item.chanelTypeName || '综合题',
    examName: record.paperName || record.jobName || item.paperName || '未命名考试',
    number: Number(item.titleSort || item.sort || index + 1),
    score: Number(item.titleScore || item.score || 0),
    title: normalizeHtml(item.titleMu || item.title || item.pidTitle || '暂无题干'),
    options: parseOptions(item.optionsMu ?? item.options),
    myAnswer: normalizeAnswer(item.submitAnswer || item.submitAnswerPic),
    answer: normalizeAnswer(item.answerMu || item.answer),
    analysis: normalizeHtml(item.titleAnalyzeMu || item.titleAnalyze || item.aiAnalyze),
    knowledge: item.knowledgeName || item.knowledge || item.knowledgePointName || '待归类',
    status: 'new',
    inReviewBook: false,
    openPanel: 'analysis',
});

const loadWrongQuestions = async () => {
    pageLoading.value = true;
    try {
        const recordsRes: any = await getListCompleteRecord();
        const records = Array.isArray(recordsRes?.data) ? recordsRes.data : Array.isArray(recordsRes) ? recordsRes : [];
        const detailRecords = await Promise.all(
            records.slice(0, 20).map(async (record: any) => {
                try {
                    const detailRes: any = await getPaperRecordDetail({
                        recordId: record.id || record.recordId,
                        reportFlag: 1,
                    });
                    return {
                        record,
                        questions: detailRes?.data?.titleVoList || detailRes?.data?.subjectTitleVoList || [],
                    };
                } catch (err) {
                    console.warn('[wrong] detail err', err);
                    return { record, questions: [] };
                }
            }),
        );
        wrongQuestions.value = detailRecords.reduce<WrongQuestion[]>((list, { record, questions }) => {
            const current = questions
                .filter(isWrongQuestion)
                .map((item: any, index: number) => mapQuestion(record, item, index));
            return list.concat(current);
        }, []);
    } catch (err) {
        console.error('[wrong] load err', err);
        uni.showToast({ title: '错题加载失败', icon: 'none' });
        wrongQuestions.value = [];
    } finally {
        pageLoading.value = false;
    }
};

const getStatusText = (status: WrongStatus) => {
    if (status === 'mastered') return '已掌握';
    if (status === 'review') return '复习中';
    return '未掌握';
};

const toggleReview = (item: WrongQuestion) => {
    item.inReviewBook = !item.inReviewBook;
    if (item.inReviewBook && item.status === 'new') item.status = 'review';
    if (!item.inReviewBook && item.status === 'review') item.status = 'new';
    uni.showToast({ title: item.inReviewBook ? '已加入复习本' : '已移出复习本', icon: 'none' });
};

const markMastered = (item: WrongQuestion) => {
    item.status = item.status === 'mastered' ? 'new' : 'mastered';
    if (item.status === 'mastered') item.inReviewBook = false;
};

const practiceAgain = (item: WrongQuestion) => {
    uni.navigateTo({
        url: `/pages/doWork/index?id=${item.recordId}&recordId=${item.recordId}&reportFlag=1&resourceType=${resource_type_homework}&idx=${Math.max(item.number - 1, 0)}`,
    });
};

const downloadWrongQuestions = () => {
    uni.showToast({ title: '下载功能对接中', icon: 'none' });
};

const goHome = () => {
    uni.reLaunch({ url: '/pages/index/index' });
};

onLoad(() => {
    loadWrongQuestions();
});
</script>

<style lang="scss" scoped>
.wrong-page {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #ecfeff 0%, #f8fafc 42%, #ffffff 100%);
    overflow: hidden;
}

.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(56rpx);
    pointer-events: none;
    z-index: 0;
}

.bg-blur-a {
    top: 40rpx;
    right: -120rpx;
    width: 320rpx;
    height: 320rpx;
    background: rgba(34, 211, 238, 0.3);
}

.bg-blur-b {
    top: 520rpx;
    left: -140rpx;
    width: 300rpx;
    height: 300rpx;
    background: rgba(34, 197, 94, 0.18);
}

.page-scroll {
    position: relative;
    z-index: 1;
    height: 100vh;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24rpx;
    padding: 40rpx 32rpx 24rpx;
}

.eyebrow {
    display: inline-flex;
    padding: 8rpx 18rpx;
    border-radius: 999rpx;
    color: #0e7490;
    background: rgba(207, 250, 254, 0.9);
    font-size: 22rpx;
    font-weight: 800;
}

.hero-title {
    margin-top: 18rpx;
    color: #164e63;
    font-size: 46rpx;
    font-weight: 900;
    line-height: 1.16;
}

.hero-desc {
    max-width: 460rpx;
    margin-top: 10rpx;
    color: #64748b;
    font-size: 24rpx;
    line-height: 1.5;
}

.hero-badge {
    width: 156rpx;
    height: 156rpx;
    border-radius: 48rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: linear-gradient(180deg, #22d3ee 0%, #0891b2 100%);
    box-shadow: 0 18rpx 34rpx rgba(8, 145, 178, 0.22), inset 0 -6rpx 0 rgba(0, 0, 0, 0.08);
}

.hero-badge-num {
    font-size: 46rpx;
    font-weight: 900;
    line-height: 1;
}

.hero-badge-text {
    margin-top: 8rpx;
    font-size: 22rpx;
    font-weight: 700;
}

.content {
    padding: 0 28rpx;
}

.subject-grid {
    display: flex;
    flex-direction: column;
    gap: 18rpx;
}

.subject-card {
    display: grid;
    grid-template-columns: 96rpx 1fr;
    gap: 20rpx;
    padding: 24rpx;
    border: 2rpx solid rgba(226, 232, 240, 0.9);
    border-radius: 32rpx;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14rpx 28rpx rgba(8, 145, 178, 0.08);
    transition: transform 160ms ease, border-color 160ms ease;
}

.subject-card:active {
    transform: scale(0.98);
}

.subject-card.active {
    border-color: #22d3ee;
    box-shadow: 0 18rpx 34rpx rgba(8, 145, 178, 0.14);
}

.subject-icon {
    grid-row: span 2;
    width: 96rpx;
    height: 96rpx;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 34rpx;
    font-weight: 900;
}

.subject-icon.blue { background: linear-gradient(180deg, #38bdf8, #0284c7); }
.subject-icon.green { background: linear-gradient(180deg, #4ade80, #16a34a); }
.subject-icon.orange { background: linear-gradient(180deg, #fbbf24, #f97316); }
.subject-icon.rose { background: linear-gradient(180deg, #fb7185, #e11d48); }
.subject-icon.violet { background: linear-gradient(180deg, #a78bfa, #7c3aed); }

.subject-main {
    min-width: 0;
}

.subject-name {
    color: #164e63;
    font-size: 30rpx;
    font-weight: 900;
}

.subject-count {
    margin-top: 6rpx;
    color: #64748b;
    font-size: 22rpx;
}

.subject-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12rpx;
}

.subject-meta view {
    padding: 12rpx 10rpx;
    border-radius: 18rpx;
    background: #f8fafc;
    text-align: center;
}

.subject-meta text {
    display: block;
}

.subject-meta text:first-child {
    color: #0891b2;
    font-size: 28rpx;
    font-weight: 900;
}

.subject-meta text:last-child {
    margin-top: 2rpx;
    color: #64748b;
    font-size: 20rpx;
}

.tabs {
    display: flex;
    gap: 14rpx;
    margin-top: 28rpx;
    padding: 8rpx;
    border-radius: 999rpx;
    background: rgba(226, 232, 240, 0.55);
}

.tab {
    flex: 1;
    height: 66rpx;
    border-radius: 999rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    color: #64748b;
    font-size: 24rpx;
    font-weight: 800;
}

.tab.active {
    color: #ffffff;
    background: linear-gradient(180deg, #22d3ee 0%, #0891b2 100%);
    box-shadow: 0 10rpx 18rpx rgba(8, 145, 178, 0.18);
}

.tab-count {
    min-width: 32rpx;
    height: 32rpx;
    padding: 0 8rpx;
    border-radius: 999rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: rgba(255, 255, 255, 0.24);
    font-size: 20rpx;
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14rpx;
    margin-top: 22rpx;
}

.filter-picker {
    min-width: 0;
}

.filter-pill {
    height: 70rpx;
    padding: 0 16rpx;
    border: 2rpx solid #e2e8f0;
    border-radius: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    color: #334155;
    background: rgba(255, 255, 255, 0.95);
    font-size: 22rpx;
    font-weight: 700;
}

.filter-pill text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-arrow {
    width: 0;
    height: 0;
    border-left: 7rpx solid transparent;
    border-right: 7rpx solid transparent;
    border-top: 9rpx solid #0891b2;
    flex-shrink: 0;
}

.question-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    margin-top: 26rpx;
}

.question-card {
    padding: 28rpx;
    border-radius: 34rpx;
    background: #ffffff;
    box-shadow: 0 14rpx 34rpx rgba(15, 23, 42, 0.08);
}

.question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18rpx;
}

.question-index {
    display: flex;
    align-items: baseline;
    gap: 10rpx;
}

.question-index text:first-child {
    color: #f97316;
    font-size: 28rpx;
    font-weight: 900;
}

.question-index text:last-child {
    color: #94a3b8;
    font-size: 22rpx;
}

.status-tag {
    padding: 8rpx 18rpx;
    border-radius: 999rpx;
    font-size: 22rpx;
    font-weight: 800;
}

.status-tag.new {
    color: #b45309;
    background: #fef3c7;
}

.status-tag.review {
    color: #0369a1;
    background: #e0f2fe;
}

.status-tag.mastered {
    color: #15803d;
    background: #dcfce7;
}

.exam-name {
    margin-top: 18rpx;
    color: #164e63;
    font-size: 26rpx;
    font-weight: 900;
    line-height: 1.45;
}

.question-title {
    margin-top: 20rpx;
    color: #0f172a;
    font-size: 28rpx;
    font-weight: 700;
    line-height: 1.65;
}

.question-title :deep(image),
.option-value :deep(image),
.info-content :deep(image) {
    max-width: 100%;
    height: auto;
}

.option-list {
    margin-top: 16rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
}

.option-item {
    display: flex;
    align-items: flex-start;
    gap: 12rpx;
    color: #334155;
    font-size: 25rpx;
    line-height: 1.55;
}

.option-key {
    color: #0f172a;
    font-weight: 900;
}

.option-value {
    flex: 1;
    min-width: 0;
}

.answer-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 24rpx;
    border-top: 2rpx solid #f1f5f9;
}

.answer-tab {
    min-height: 76rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 24rpx;
    font-weight: 800;
}

.answer-tab.active {
    color: #0891b2;
}

.answer-tab.action {
    color: #475569;
}

.info-box {
    margin-top: 12rpx;
    padding: 20rpx;
    border: 2rpx solid transparent;
    border-radius: 22rpx;
}

.info-box.mine {
    border-color: #fde68a;
    background: #fffbeb;
}

.info-box.correct {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.info-box.analysis {
    border-color: #bae6fd;
    background: #f0f9ff;
}

.info-box.knowledge {
    border-color: #fde68a;
    background: #fffbeb;
}

.info-title {
    margin-bottom: 10rpx;
    color: #164e63;
    font-size: 23rpx;
    font-weight: 900;
}

.info-content {
    color: #334155;
    font-size: 25rpx;
    line-height: 1.6;
}

.card-actions {
    display: flex;
    gap: 16rpx;
    margin-top: 22rpx;
}

.mark-btn,
.practice-btn {
    flex: 1;
    height: 72rpx;
    border-radius: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    font-weight: 900;
}

.mark-btn {
    color: #0891b2;
    background: #ecfeff;
}

.practice-btn {
    color: #ffffff;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 10rpx 18rpx rgba(22, 163, 74, 0.18);
}

.empty-wrap,
.loading-wrap {
    height: 560rpx;
}

.home-float {
    position: fixed;
    right: 32rpx;
    bottom: 144rpx;
    z-index: 10;
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #38bdf8, #0284c7);
    box-shadow: 0 12rpx 24rpx rgba(2, 132, 199, 0.28);
}

.home-roof {
    position: absolute;
    top: 27rpx;
    width: 32rpx;
    height: 32rpx;
    border-left: 5rpx solid #ffffff;
    border-top: 5rpx solid #ffffff;
    transform: rotate(45deg);
}

.home-body {
    width: 34rpx;
    height: 28rpx;
    margin-top: 20rpx;
    border: 5rpx solid #ffffff;
    border-top: 0;
    border-radius: 0 0 6rpx 6rpx;
}

.bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -10rpx 24rpx rgba(15, 23, 42, 0.08);
}

.download-btn {
    height: 84rpx;
    border-radius: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
    font-size: 28rpx;
    font-weight: 900;
}

.safe-bottom {
    height: 150rpx;
}
</style>
