body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 改为 flex-start 以便内容多时可以滚动 */
    min-height: 100vh;
    margin: 0;
    background-color: #f4f7f6;
    color: #333;
    padding-top: 20px; /* 增加顶部内边距 */
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 800px;
    text-align: center;
}

header {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

header h1 {
    color: #007bff;
    margin-bottom: 15px;
}

.timer-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 元素间距 */
}

.timer-container label {
    font-size: 1em;
}

.timer-container input[type="number"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 60px;
    text-align: center;
}

#timer {
    font-size: 1.2em;
    font-weight: bold;
    color: #d9534f;
    margin-left: 15px; /* 与开始按钮的间距 */
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#quiz-area, #result-area, #wrong-questions-area {
    margin-top: 20px;
}

.hidden {
    display: none;
}

#questions-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 增加卡片最小宽度以容纳不换行题目 */
    gap: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.question-item {
    background-color: #fff; /* 卡片背景改为白色，以便头部背景色更突出 */
    border: 1px solid #ddd; /* 添加边框 */
    border-radius: 8px;
    display: flex;
    flex-direction: column; /* 头部和身体垂直排列 */
    min-height: 100px; /* 给卡片一个最小高度 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    overflow: hidden; /* 防止内容溢出卡片圆角 */
}

.question-header {
    background-color: #007bff; /* 头部填充颜色 */
    color: white; /* 头部文字颜色 */
    padding: 8px 12px;
    text-align: center;
    flex-basis: 25%; /* 大约占据1/4高度，具体效果可能需微调 */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 将题号在头部区域左对齐 */
    font-weight: bold;
    font-size: 1.1em;
}

.question-number-alt {
    /* 样式已在 .question-header 中定义，这里可以留空或添加特定于数字的微调 */
}

.question-body {
    padding: 12px;
    display: flex; /* 题目和输入框水平排列 */
    align-items: center; /* 垂直居中对齐 */
    flex-grow: 1; /* 占据剩余空间 (3/4) */
    gap: 10px; /* 题目和输入框之间的间距 */
}

.question-text-alt {
    flex-grow: 1; /* 占据可用空间，以便显示完整题目 */
    font-size: 1.1em;
    white-space: nowrap; /* 强制题目不换行 */
    overflow: hidden; /* 隐藏溢出部分 */
    text-overflow: ellipsis; /* 对于实在太长的题目，用省略号表示 */
    line-height: 1.5; /* 调整行高 */
    margin-right: 5px; /* 与输入框或反馈指示器间距 */
}

.feedback-indicator {
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 5px;
    width: 20px; /* 固定宽度以避免布局跳动 */
    display: inline-block;
    text-align: center;
}

.answer-input {
    width: 70px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    font-size: 1em;
    flex-shrink: 0; /* 防止输入框被压缩 */
}

.answer-input.correct-input {
    border: 2px solid green;
    background-color: #e6ffe6;
}

.answer-input.incorrect-input {
    border: 2px solid red;
    background-color: #ffe6e6;
}

.question-footer {
    padding: 5px 12px 10px; /* 上左右内边距 */
    display: flex;
    flex-direction: column; /* 按钮和答案详情垂直排列 */
    align-items: flex-start; /* 左对齐 */
    gap: 8px;
    border-top: 1px solid #eee; /* 页脚与身体部分分隔线 */
    margin-top: auto; /* 尝试将页脚推到底部，如果卡片内容不足 */
}

.show-answer-btn {
    padding: 5px 10px;
    font-size: 0.9em;
    background-color: #6c757d; /* 次要按钮颜色 */
    cursor: pointer;
}
.show-answer-btn:hover {
    background-color: #5a6268;
}

.correct-answer-details {
    font-size: 0.9em;
    color: #333;
    background-color: #f8f9fa;
    padding: 5px;
    border-radius: 3px;
    width: 100%; /* 占据整个页脚宽度 */
    box-sizing: border-box;
}

/* 移除数字输入框的上下箭头 (适用于 WebKit 和 Blink 浏览器) */
.answer-input::-webkit-outer-spin-button,
.answer-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* 移除数字输入框的上下箭头 (适用于 Firefox) */
.answer-input {
    -moz-appearance: textfield;
}

.pagination {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination button {
    margin: 0 10px;
}

#page-info {
    font-size: 1em;
    font-weight: bold;
}

#submit-button {
    background-color: #28a745;
}

#submit-button:hover {
    background-color: #1e7e34;
}

#result-area h2, #wrong-questions-area h2 {
    color: #007bff;
    margin-bottom: 15px;
}

#result-area p {
    font-size: 1.1em;
    margin: 10px 0;
}

#wrong-questions-summary button {
    margin: 5px;
    background-color: #ffc107;
    color: #333;
}

#wrong-questions-summary button:hover {
    background-color: #e0a800;
}

#wrong-questions-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 错题区也保持一致的卡片宽度 */
    gap: 15px;
    margin-bottom: 20px;
    text-align: left;
}

#submit-wrong-button, #back-to-main-button {
    margin-top: 10px;
    margin-right: 10px;
}

#submit-wrong-button {
    background-color: #17a2b8;
}
#submit-wrong-button:hover {
    background-color: #117a8b;
}