@charset "UTF-8";
/* 方程题专用样式 */

/* 分数显示样式 */
.fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 0.1em;
    line-height: 1;
    position: relative;
}

.fraction .numerator {
    line-height: 0.9;
    margin-bottom: 0.05em;
    text-align: center;
}

.fraction .fraction-line {
    width: auto; /* 将由JavaScript动态设置 */
    height: 0.1em; /* 增加默认粗细，更好的视觉效果 */
    background-color: currentColor;
    margin: 0.02em auto; /* 居中对齐 */
    min-width: 1em; /* 最小宽度保底 */
    border-radius: 0.01em;
}

.fraction .denominator {
    line-height: 0.9;
    margin-top: 0.05em;
    text-align: center;
}

/* 在方程题目中的分数样式优化 */
.equation-question .fraction {
    margin: 0 0.2em;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
}

.equation-question .fraction .numerator,
.equation-question .fraction .denominator {
    /* 字体大小由JavaScript动态设置，不使用固定相对大小 */
    font-weight: bold;
    line-height: 0.9;
    text-align: center;
    min-width: 1em;
}

.equation-question .fraction .fraction-line {
    width: auto; /* 将由JavaScript动态设置 */
    height: 0.15em; /* 增加默认粗细，更好的视觉效果 */
    min-width: 1.5em;
    background-color: currentColor;
    margin: 0.08em auto; /* 居中对齐 */
    border-radius: 0.02em;
}

/* 确保分数在不同字体大小下都能正确显示 */
@media (max-width: 768px) {
    .equation-question .fraction .numerator,
    .equation-question .fraction .denominator {
        /* 字体大小由JavaScript动态设置 */
        line-height: 0.9; /* 保持行高设置 */
    }

    .equation-question .fraction .fraction-line {
        width: auto; /* 将由JavaScript动态设置 */
        height: 0.18em; /* 移动端增加粗细，更好的视觉效果 */
        min-width: 1.8em;
        margin: 0.08em auto; /* 居中对齐 */
    }
}

/* 方程题目显示样式 */
.equation-question {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* 字体大小由JavaScript动态设置 */
    font-weight: bold;
    color: var(--text-color);
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;
    /* 确保内容不会溢出 */
    word-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    line-height: 1.0;
}

/* 方程题目未显示答案时的样式 - 垂直居中 */
.equation-question.no-answer {
    flex-direction: column;
    justify-content: center;
}

/* 方程题目显示答案时的样式 - 使用Grid布局确保等号对齐 */
.equation-question.with-answer {
    display: grid !important; /* 覆盖基础flex布局 */
    grid-template-rows: auto auto; /* 两行：题目行、答案行 */
    justify-content: center; /* 整体居中 */
    align-content: center; /* 垂直居中 */
    gap: 0.3em; /* 使用相对单位，随字体大小自动调整行间距 */
    width: 100%;
    /* 确保内容不会溢出容器 */
    overflow: hidden;
    box-sizing: border-box;
}

/* 方程题目行 */
.equation-line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 显示答案时，使用Grid布局确保等号对齐 */
.equation-question.with-answer .equation-question-row,
.equation-question.with-answer .equation-answer-row {
    display: grid;
    /* 设置默认三列布局，JavaScript会动态调整具体宽度 */
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0;
    /* 确保答案行内容不会溢出 */
    min-height: 0;
    overflow: visible;
}

/* 未显示答案时，题目行居中显示 */
.equation-question.no-answer .equation-question-row,
.equation-question.no-answer .equation-line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 题目行：左侧内容右对齐 */
.equation-question.with-answer .equation-left {
    text-align: right;
    white-space: nowrap;
}

/* 题目行：右侧内容左对齐 */
.equation-question.with-answer .equation-right {
    text-align: left;
    white-space: nowrap;
}

/* 答案行：左侧部分（解:x）右对齐 */
.equation-question.with-answer .equation-answer-left {
    text-align: right;
    white-space: nowrap; /* 解:x 部分保持不换行 */
    flex-shrink: 0; /* 防止压缩 */
    font-weight: bold;
}

/* 答案行：右侧答案值左对齐 */
.equation-question.with-answer .equation-answer-value {
    text-align: left;
    white-space: normal; /* 允许换行，防止答案内容溢出 */
    word-wrap: break-word; /* 长单词可以换行 */
    overflow-wrap: break-word; /* 兼容性更好的换行设置 */
    /* 确保答案值有足够空间显示 */
    min-width: 0;
    max-width: 100%;
}

/* 等号样式 - 居中显示 */
.equation-equals {
    font-weight: bold;
    text-align: center;
}

/* 解字样式 */
.equation-solution-label {
    font-weight: bold;
    white-space: nowrap;
}

.equation-variable {
    font-weight: bold;
    white-space: nowrap;
}

/* 未显示答案时的普通样式 */
.equation-question.no-answer .equation-left,
.equation-question.no-answer .equation-right {
    white-space: nowrap;
}

/* 未知数 */
.equation-variable {
    white-space: nowrap;
    font-weight: bold;
}

/* 统一加粗所有方程题型和答案 */
.equation-question,
.equation-question .equation-left,
.equation-question .equation-right,
.equation-question .equation-equals,
.equation-answer-value,
.equation-answer-label {
    font-weight: bold;
}

/* 分数元素也需要加粗 */
.fraction,
.fraction .numerator,
.fraction .denominator {
    font-weight: bold;
}

/* 答案值 */
.equation-answer-value {
    white-space: normal; /* 允许换行，防止答案内容溢出 */
    word-wrap: break-word; /* 长单词可以换行 */
    overflow-wrap: break-word; /* 兼容性更好的换行设置 */
}

/* 分数样式 - 自适应字体大小 */
.equation-fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 1px; /* 缩小分数左右间距从3px到1px */
    /* 分数字体大小由JavaScript动态设置，不使用固定相对大小 */
    /* 确保分数不会被意外换行 */
    white-space: nowrap;
    flex-shrink: 0;
    /* 防止分数溢出 */
    max-width: 100%;
    overflow: visible; /* 允许分数线正常显示 */
}

.equation-fraction-numerator {
    line-height: 0.9; /* 降低行高以减少垂直空间占用 */
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 1px; /* 减少下边距 */
    margin-bottom: 0px; /* 减少底部间距 */
    /* 分子字体大小继承分数容器 */
    font-size: inherit;
    font-weight: bold; /* 加粗提高可读性 */
}

.equation-fraction-denominator {
    line-height: 0.9; /* 降低行高以减少垂直空间占用 */
    padding-top: 0px; /* 减少顶部间距 */
    /* 分母字体大小继承分数容器 */
    font-size: inherit;
    font-weight: bold; /* 加粗提高可读性 */
}

/* 包含分数的方程题标记 - 已通过自适应字体大小处理 */

/* ================================
   手机版字体大小设置 (移动端 ≤ 768px)
   ================================ */

/* 手机版 - 统一字体设置 (单列排列，卡片大小一致) */
@media (max-width: 768px) {
    /* 移动端字体大小由JavaScript动态设置 */

    /* 移动端布局调整 */
    .equation-question.with-answer .equation-question-row,
    .equation-question.with-answer .equation-answer-row {
        gap: 1px; /* 移动端减小间距 */
    }

    .equation-question.no-answer .equation-question-row {
        gap: 1px;
        letter-spacing: -0.5px;
    }

    .equation-equals {
        margin: 0 1px; /* 移动端减小等号间距 */
    }

    .equation-question.with-answer {
        gap: 2px; /* 移动端进一步缩小行间距 */
    }

    /* 移动端等号间距调整 */
    .equation-equals {
        margin: 0 0px; /* 移动端进一步减小等号间距到0px */
    }

    /* 移动端分数样式调整 */
    .equation-fraction {
        /* 字体大小由JavaScript动态设置 */
        margin: 0 0px; /* 移动端分数间距减小到0px */
    }

    .equation-fraction-numerator,
    .equation-fraction-denominator {
        /* 字体大小由JavaScript动态设置 */
        line-height: 1.0;
    }

    /* 移动端分数边框调整 */
    .equation-fraction-numerator {
        border-bottom-width: 1px;
        padding-bottom: 1px;
        margin-bottom: 1px;
    }
}

/* ================================
   电脑版字体大小设置 (桌面端 > 768px)
   ================================ */

/* 电脑版 - 基于容器查询的自适应字体大小 - 根据布局动态调整 */
@media (min-width: 769px) {
    /* 桌面端字体大小由JavaScript动态设置 */
}

/* 电脑版 - 分数题目的特殊处理 */
@media (min-width: 769px) {
    /* 桌面端分数题字体大小由JavaScript动态设置 */
}

/* 密集布局下分数的特殊样式优化 - 进一步压缩垂直空间 */
.questions-container[data-layout="9"] .equation-fraction,
.questions-container[data-layout="16"] .equation-fraction {
    /* 字体大小由JavaScript动态设置 */
    margin: 0; /* 去除左右间距 */
}

.questions-container[data-layout="9"] .equation-fraction-numerator,
.questions-container[data-layout="16"] .equation-fraction-numerator {
    line-height: 0.8; /* 极度压缩行高 */
    padding-bottom: 0px; /* 去除下边距 */
    margin-bottom: 0px; /* 去除底部间距 */
    border-bottom-width: 0.5px; /* 更细的分数线 */
}

.questions-container[data-layout="9"] .equation-fraction-denominator,
.questions-container[data-layout="16"] .equation-fraction-denominator {
    line-height: 0.8; /* 极度压缩行高 */
    padding-top: 0px; /* 去除顶部间距 */
}

/* 25题布局分数的优化 - 平衡显示完整性与可读性 */
.questions-container[data-layout="25"] .equation-fraction {
    /* 字体大小由JavaScript动态设置 */
    margin: 0; /* 去除所有间距 */
    /* 移除transform缩放，让JavaScript完全控制字体大小 */
}

.questions-container[data-layout="25"] .equation-fraction-numerator {
    line-height: 0.8; /* 适当放松行高 */
    padding-bottom: 0px; /* 去除所有边距 */
    margin-bottom: 0px; /* 去除所有间距 */
    border-bottom-width: 0.4px; /* 稍粗一点的分数线，提升可见性 */
    /* 字体大小由JavaScript动态设置 */
}

.questions-container[data-layout="25"] .equation-fraction-denominator {
    line-height: 0.8; /* 适当放松行高 */
    padding-top: 0px; /* 去除所有间距 */
    /* 字体大小由JavaScript动态设置 */
}

/* 自适应字体策略说明：
 * - 使用clamp()函数确保字体在合理范围内
 * - 使用min(vw, vh)确保字体同时适应宽度和高度
 * - 分数题目使用更小的字体以适应垂直空间需求
 * - 题目数量越多，字体越小，确保内容不溢出
 */

/* 确保内容不会溢出容器 */
.equation-question {
    /* 防止内容溢出 */
    max-width: 100%;
    max-height: 100%;
    /* 允许长内容换行 */
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    /* 确保内容居中 */
    text-align: center;
    /* 优化行高以适应不同字体大小 */
    line-height: 1.0;
}

/* 针对算术表达式的特殊处理 - 使用类名而非:has()选择器 */
.equation-question.arithmetic-expression {
    /* 算术表达式尽量保持在一行 */
    white-space: nowrap;
    /* 如果内容过长，允许缩小字符间距 */
    letter-spacing: -1px; /* 增加负字符间距从-0.5px到-1px */
    word-spacing: -2px; /* 添加负单词间距 */
}

/* 为所有方程题目添加紧凑间距 */
.equation-question {
    letter-spacing: -0.5px; /* 添加轻微的负字符间距 */
    word-spacing: -1px; /* 添加轻微的负单词间距 */
}

/* 为方程题目的各个部分添加紧凑间距 */
.equation-left,
.equation-right,
.equation-variable,
.equation-answer-value,
.equation-solution-label {
    letter-spacing: -0.5px; /* 为各个部分添加负字符间距 */
}

/* 确保所有内联元素紧密排列 */
.equation-left,
.equation-equals,
.equation-right,
.equation-solution-label,
.equation-variable,
.equation-answer-value {
    display: inline-block;
    vertical-align: middle;
}

/* 数学符号样式优化 */
.equation-left,
.equation-right,
.equation-answer-left,
.equation-answer-value {
    font-family: 'Times New Roman', 'STIX Two Math', 'Latin Modern Math', serif;
    /* 确保数学符号显示正确 */
}

/* 当内容过长时的处理 */
@media (max-width: 480px) {
    .equation-question.arithmetic-expression {
        /* 小屏幕上允许算术表达式换行 */
        white-space: normal;
        letter-spacing: normal;
    }
}

/* 方程题页面的初始提示 */
.questions-container:empty::before {
    content: '请选择方程题类型并点击"出题"按钮开始练习';
}

/* 分数比例方程专用样式 - 去掉加粗效果 */
.equation-question.fraction-proportion {
    font-weight: normal; /* 去掉加粗 */
}



/* 分数比例方程的分数线优化 - 加粗分数线并增加间距 */
.equation-question.fraction-proportion .equation-fraction {
    text-align: center; /* 确保分数容器居中对齐 */
}

.equation-question.fraction-proportion .equation-fraction-numerator {
    border-bottom: 3px solid var(--text-color); /* 分数线从1px加粗到2px */
    padding-bottom: 3px; /* 增加分子与分数线的间距 */
    margin-bottom: 1px; /* 增加分数线与分母的间距 */
   /* min-width: 1.2em;  设置分数线最小宽度，确保分数线足够长 */
    text-align: center; /* 确保分子居中 */
    display: block; /* 确保分子独占一行 */
}

.equation-question.fraction-proportion .equation-fraction-denominator {
    padding-top: 2px; /* 增加分母与分数线的间距 */
    min-width: 1.2em; /* 设置最小宽度，与分子保持一致 */
    text-align: center; /* 确保分母居中 */
    display: block; /* 确保分母独占一行 */
}

/* 分数比例方程字体统一放大，确保题目和答案大小一致 */
.equation-question.fraction-proportion {
    /* 在原有字体大小基础上放大 */
    font-size: calc(1em * 1.18); /* 放大15% */
}

/* 分数比例方程未显示答案时使用has-fraction的动态字体大小 */
.equation-question.fraction-proportion.no-answer {
    /* 移动端 */
    font-size: clamp(36px, min(6vw, 8vh), 45px); /* 手机版分数题通用字体大小 */
}

/* 移动端分数比例方程分数线优化 */
@media (max-width: 768px) {
    .equation-question.fraction-proportion .equation-fraction-numerator {
        border-bottom: 2.5px solid var(--text-color); /* 移动端分数线更粗 */
        padding-bottom: 4px; /* 移动端增加更多间距 */
        margin-bottom: 2px; /* 移动端增加分数线与分母的间距 */
        min-width: 1.4em; /* 移动端分数线更长 */
        text-align: center; /* 移动端确保分子居中 */
        display: block; /* 移动端确保分子独占一行 */
    }
    
    .equation-question.fraction-proportion .equation-fraction-denominator {
        padding-top: 3px; /* 移动端增加分母与分数线的间距 */
        min-width: 1.4em; /* 移动端与分子保持一致 */
        text-align: center; /* 移动端确保分母居中 */
        display: block; /* 移动端确保分母独占一行 */
    }
    
    .equation-question.fraction-proportion {
        font-size: calc(1em * 1.2); /* 移动端放大20% */
    }
}

/* 桌面端分数比例方程字体大小由JavaScript动态设置 */
@media (min-width: 769px) {
    /* 所有分数比例方程的字体大小由JavaScript动态控制 */
}

.questions-container:empty::after {
    content: '快捷键：A - 出题 | S - 显示一个答案 | D - 显示所有答案 | G - 点名 | Ctrl+K - 重置点名 | Ctrl+Delete - 清除名单\A随机点名学生名单导入方法：将学生名单放txt文件中，每行一个名字，导入即可。';
    font-size: 16px;
    color: #999;
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    white-space: pre-line;
    z-index: 1;
    padding: 0 20px;
    line-height: 1.4;
}

/* 自定义导出成功提示框样式 */
.export-success-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.export-success-modal.show {
    opacity: 1;
    visibility: visible;
}

.export-success-content {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.export-success-modal.show .export-success-content {
    transform: scale(1);
}

.export-success-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.export-success-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.export-success-message {
    font-size: 14px;
    color: #666;
    line-height: 1.0;
    margin-bottom: 25px;
}

.export-success-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #856404;
}

.export-success-warning::before {
    content: "⚠️ ";
    margin-right: 5px;
}

.export-success-button {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.export-success-button:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.export-success-button:active {
    transform: translateY(0);
}

/* 导出错误提示框样式 */
.export-error-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.export-error-modal.show {
    opacity: 1;
    visibility: visible;
}

.export-error-content {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.export-error-modal.show .export-error-content {
    transform: scale(1);
}

.export-error-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f44336, #d32f2f);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
    animation: errorShake 0.6s ease-out;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.export-error-title {
    font-size: 20px;
    font-weight: bold;
    color: #d32f2f;
    margin-bottom: 15px;
}

.export-error-message {
    font-size: 14px;
    color: #666;
    line-height: 1.0;
    margin-bottom: 25px;
}

.export-error-button {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.export-error-button:hover {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.export-error-button:active {
    transform: translateY(0);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .export-success-content,
    .export-error-content {
        padding: 25px 20px;
        margin: 20px;
    }

    .export-success-title,
    .export-error-title {
        font-size: 18px;
    }

    .export-success-message,
    .export-error-message {
        font-size: 13px;
    }

    .export-success-icon,
    .export-error-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}