/* ==================== 全局重置 & 字体 ==================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #e6e9ef;
    font-family: 'Segoe UI', '微软雅黑', system-ui, sans-serif;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 返回首页按钮 */
.back-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid #d4cdc0;
    border-radius: 50px;
    color: #2e3b3b;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
}

.back-home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(154, 171, 154, 0.4);
    border-color: #9aab9a;
    background: rgba(255, 255, 255, 1);
}

/* 主应用容器 — 非打印时居中，打印时占满 */
.app-container {
    max-width: 1400px;
    width: 100%;
}

/* ==================== 控制面板 (卡片式) ==================== */
.control-panel {
    background: white;
    border-radius: 24px;
    padding: 24px 28px;
    margin-bottom: 28px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.panel-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #cbd5e1;
    padding-bottom: 10px;
}

.filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 40px;
    align-items: flex-end;
}

.type-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    background: linear-gradient(135deg, #f9f6f0 0%, #f4f0e9 100%);
    padding: 18px 24px 14px 24px;
    border-radius: 48px;
    border: 2px solid #c9b896;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.8);
    position: relative;
    margin-top: 8px;
}

.type-group::before {
    content: "📝 题型选择";
    position: absolute;
    top: -12px;
    left: 20px;
    background: white;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #5a8f72;
    border: 2px solid #c9b896;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.type-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    user-select: none;
    padding: 6px 12px;
    border-radius: 24px;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
    color: #2c3e35;
}

.type-checkbox:hover {
    background: rgba(127, 163, 146, 0.15);
    transform: translateY(-1px);
    border-color: rgba(127, 163, 146, 0.3);
}

.type-checkbox input {
    width: 22px;
    height: 22px;
    accent-color: #5a8f72;
    cursor: pointer;
    border: 2px solid #7fa392;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.type-checkbox input:checked {
    background-color: #5a8f72;
    border-color: #4a7a62;
    box-shadow: 0 2px 6px rgba(90, 143, 114, 0.4);
    transform: scale(1.1);
}

.type-checkbox input:hover {
    border-color: #5a8f72;
    box-shadow: 0 3px 8px rgba(90, 143, 114, 0.3);
    transform: scale(1.05);
}

.type-checkbox:has(input:checked) {
    background: rgba(90, 143, 114, 0.2);
    border-color: #5a8f72;
    color: #1e3a2f;
}

.num-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.num-control label {
    font-weight: 500;
    color: #2c3e50;
}

.num-control input {
    width: 90px;
    padding: 8px 12px;
    border: 1px solid #b0bec5;
    border-radius: 16px;
    font-size: 1rem;
    text-align: center;
    background: white;
    transition: 0.15s;
}

.num-control input:focus {
    border-color: #1e5f6e;
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 95, 110, 0.15);
}

.grade-select {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #b0bec5;
    background: white;
    font-size: 0.95rem;
    cursor: pointer;
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 22px;
    align-items: center;
}

.toolbar {
    display: flex;
    gap: 16px;
    margin: 20px 0 10px;
}

.btn {
    background: white;
    border: 1px solid #94a3b8;
    padding: 10px 22px;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary {
    background: #1e4a6b;
    border-color: #0e2f44;
    color: white;
    box-shadow: 0 4px 8px rgba(0,20,40,0.1);
}

.btn-primary:hover {
    background: #123a52;
    transform: translateY(-1px);
}

.btn-outline {
    background: #f8fafc;
    border: 1px solid #64748b;
}

.btn-outline:hover {
    background: #e2e8f0;
}

.answer-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    background: linear-gradient(135deg, #f9f6f0 0%, #f4f0e9 100%);
    padding: 10px 20px;
    border-radius: 40px;
    border: 2px solid #c9b896;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.answer-toggle label {
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    color: #2c3e35;
}

.answer-toggle input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: #5a8f72;
    cursor: pointer;
    border: 2px solid #7fa392;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.answer-toggle input[type="checkbox"]:checked {
    background-color: #5a8f72;
    border-color: #4a7a62;
    box-shadow: 0 2px 6px rgba(90, 143, 114, 0.4);
    transform: scale(1.1);
}

.answer-toggle input[type="checkbox"]:hover {
    border-color: #5a8f72;
    box-shadow: 0 3px 8px rgba(90, 143, 114, 0.3);
    transform: scale(1.05);
}

.print-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
}

/* ==================== 试卷区域 (A4风格) ==================== */
/* 内容区：两列布局 */
.content-panels {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 28px;
    margin-top: 10px;
}
@media (max-width: 1000px) {
    .content-panels {
        grid-template-columns: 1fr 380px;
    }
}
@media (max-width: 800px) {
    .content-panels {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.exam-paper {
    background: white;
    padding: 32px 36px 40px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    max-width: 210mm;           /* A4宽度 */
    margin: 0 auto;
    width: 100%;
    transition: all 0.2s;
    border: 1px solid #d0d9e4;
}

.answer-card {
    background: #f6f3eb;
    border-radius: 28px;
    padding: 24px 22px;
    border: 1px solid #ddd2c0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    overflow: hidden;
}
.answer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 2px solid #7e9a8b;
}
.section-title {
    font-size: 1.7rem;
    font-weight: 500;
    color: #476b5c;
    margin-bottom: 20px;
}
.answer-list {
    list-style: none;
    counter-reset: answer-counter;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 18px;
}
@media (max-width: 1000px) {
    .answer-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .answer-list {
        grid-template-columns: 1fr;
    }
}
.answer-item {
    counter-increment: answer-counter;
    padding: 6px 4px;
    border-bottom: 1px dashed #cbbfb0;
    font-size: 1.1rem;
    display: flex;
    align-items: baseline;
    min-width: 0;
    font-family: 'Times New Roman', 'SimSun', serif;
}
.answer-item::before {
    content: counter(answer-counter) ".";
    font-weight: 600;
    color: #2c3e35;
    width: 2em;
    margin-right: 6px;
    text-align: right;
    font-family: 'Times New Roman', serif;
}
.answer-value {
    font-weight: 700;
    color: #1e4a3a;
    background: transparent;
    padding: 2px 6px;
    margin-left: 4px;
    white-space: nowrap;
    font-size: 1.1rem;
}

/* 答案隐藏状态 */
.answer-card.answer-hidden .answer-list,
.answer-card.answer-hidden .answer-header .section-title {
    display: none;
}
.answer-card.answer-hidden .answer-header::after {
    content: "🔒 答案已隐藏";
    font-size: 1.1rem;
    color: #8f9e92;
}

/* 卷首信息 */
.paper-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #2c3e50;
    padding-bottom: 12px;
}

.main-title {
    font-family: '华文楷体', 'KaiTi', '楷体', serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #1e2f3d;
}

.sub-info {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    font-size: 16px;
    font-family: '宋体', SimSun, serif;
    color: #1f2a36;
}

.info-item {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.underline-space {
    border-bottom: 1.5px solid #1e2f3d;
    min-width: 100px;
    display: inline-block;
    margin: 0 4px;
    height: 1.2em;
}

.total-score {
    font-weight: 600;
}

/* 题目列表网格 — 每行三列 (打印友好) */
.words-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 36px;
    margin-top: 24px;
}

/* 单个题目卡片 */
.word-card {
    break-inside: avoid;      /* 打印防截断 */
    page-break-inside: avoid;
    font-family: '宋体', 'SimSun', 'Times New Roman', serif;
}

.word-hanzi {
    font-size: 26px;
    font-weight: 600;
    font-family: '华文楷体', 'KaiTi', '楷体', serif;
    color: #1e3a5f;
    margin-bottom: 8px;
    line-height: 1.4;
}

.pinyin-area {
    margin-top: 4px;
}

/* 拼音答案行 (显示答案时可见) */
.pinyin-answer {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 18px;
    font-weight: 500;
    color: #c44536;            /* 醒目但不刺眼 */
    margin-bottom: 6px;
    min-height: 28px;
    letter-spacing: 1px;
    word-break: break-word;
}

/* 书写横线 (单横线，模拟填空) */
.write-line {
    border-bottom: 2px solid #2c3e50;
    width: 100%;
    margin-top: 2px;
    height: 0;
    position: relative;
}

/* 当答案隐藏时，拼音答案不占位但仍存在（用visibility控制） */
.pinyin-answer.hidden-answer {
    visibility: hidden;
}

/* 无数据提示 */
.empty-message {
    grid-column: span 3;
    text-align: center;
    padding: 48px;
    color: #64748b;
    font-size: 18px;
}

/* 打印样式优化 — 完全隐藏控制面板、按钮等 */
@page {
    size: A4;
    margin: 1.5cm;
}

@media print {
    body {
        background: white;
        padding: 0;
        margin: 0;
        display: block;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .app-container {
        max-width: none;
        width: 100%;
    }

    .control-panel,
    .no-print,
    .action-buttons,
    .btn,
    .answer-toggle,
    .back-home-btn {
        display: none !important;
    }

    .content-panels {
        display: grid !important;
        grid-template-columns: 1fr 450px !important;
        gap: 28px !important;
        margin-top: 0 !important;
    }
    body.print-paper .content-panels {
        grid-template-columns: 1fr !important;
    }
    body.print-answer .content-panels {
        grid-template-columns: 1fr !important;
    }

    .exam-paper,
    .answer-card {
        box-shadow: none;
        border: none;
        padding: 10px 0;
        max-width: 100%;
        border-radius: 0;
        background: white;
        margin: 0 auto;
    }

    body.print-paper .answer-card,
    body.print-paper .answer-section {
        display: none !important;
    }
    body.print-answer .exam-paper,
    body.print-answer .quiz-section {
        display: none !important;
    }

    .paper-header {
        border-bottom: 2px solid black;
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

    .main-title {
        color: black;
        font-size: 18pt;
    }

    .sub-info {
        font-size: 11pt;
    }

    .word-hanzi {
        color: black;
    }

    .write-line {
        border-bottom: 2px solid black;
    }

    .pinyin-answer {
        color: black !important;
        font-weight: 600;
    }

    /* 保证每个题目都不跨页断裂 */
    .word-card {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* 题目打印样式 - 3列布局 */
    .words-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px 15px !important;
        margin-top: 15px;
    }
    body.print-paper .words-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .word-card {
        font-size: 11pt;
        page-break-inside: avoid;
        break-inside: avoid;
        min-height: 35px;
    }

    .word-hanzi {
        font-size: 14pt;
        color: #000;
    }

    .pinyin-answer {
        font-size: 11pt;
        color: #000;
    }

    /* 答案打印样式 - 3列布局 */
    .answer-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px 15px !important;
    }
    body.print-answer .answer-list {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .answer-item {
        font-size: 11pt;
        page-break-inside: avoid;
        padding: 5px 3px;
        border-bottom: 1px dashed #666;
        color: #000;
    }

    .answer-item::before {
        width: 1.8em;
        font-size: 11pt;
        color: #000;
        font-weight: 700;
    }

    .answer-value {
        padding: 2px 5px;
        font-size: 11pt;
        background: transparent;
        color: #000;
        font-weight: 700;
    }

    /* 隐藏所有背景与阴影 */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a, button, input, select {
        display: none !important;
    }
}

/* 响应式基础：移动端单列 */
@media (max-width: 640px) {
    .words-grid {
        grid-template-columns: 1fr;
    }
    .filter-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .answer-toggle {
        margin-left: 0;
    }
    .empty-message {
        grid-column: span 1;
    }
    .type-group {
        padding: 16px 16px 12px 16px;
        gap: 12px;
    }
    .type-group::before {
        font-size: 0.8rem;
        left: 16px;
    }
    .type-checkbox {
        font-size: 0.95rem;
        padding: 5px 10px;
    }
    .type-checkbox input {
        width: 20px;
        height: 20px;
    }
}

.footnote {
    margin-top: 20px;
    color: #5e6f8d;
    text-align: right;
    font-size: 14px;
}

.error-toast {
    color: #b91c1c;
    background: #fee2e2;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
}