/* 自定义样式 */

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 题目选项样式 */
.option-item {
    transition: all 0.2s ease-in-out;
}

.option-item:hover {
    background-color: #f3f4f6;
}

.option-item input[type="radio"]:checked + label {
    color: #60a5fa;
    font-weight: 500;
}

/* 加载动画 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 卡片划走动画 - 向右 */
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.slide-out {
    animation: slideOut 0.5s ease-out forwards;
}

/* 卡片划走动画 - 向左 */
@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

.slide-out-left {
    animation: slideOutLeft 0.5s ease-out forwards;
}

/* 进度条动画 */
#progress-bar {
    transition: width 0.3s ease;
}

/* 响应式调整 */
@media (max-width: 640px) {
    .container {
        padding: 1rem;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .p-8 {
        padding: 1.5rem;
    }
}

/* 卡片悬停效果 */
main {
    transition: box-shadow 0.3s ease;
}

main:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 按钮动画 */
button {
    transition: all 0.2s ease;
}

button:active {
    transform: translateY(1px);
}

/* 结果图表容器 */
#results-chart {
    max-height: 400px;
}

/* 结果项样式 */
.result-item {
    border-left: 4px solid #60a5fa;
    transition: all 0.2s ease;
}

.result-item:hover {
    border-left-width: 6px;
    background-color: #f9fafb;
}

/* 时间预测样式 */
#time-estimate {
    font-family: monospace;
}

/* 模态框动画 */
#confirm-modal {
    animation: fadeIn 0.2s ease-in-out;
}

/* 题目切换动画 */
#question-card {
    animation: slideUp 0.3s ease-out;
}

/* 结果页面动画 */
#results {
    animation: fadeIn 0.5s ease-in-out;
}

/* 加载状态隐藏 */
#loading {
    display: none;
}

/* 确保选项间距一致 */
#options-container > div {
    margin-bottom: 0.75rem;
}

/* 调整导航按钮间距 */
#prev-btn, #next-btn {
    min-width: 100px;
}

/* 确保图表在小屏幕上正常显示 */
@media (max-width: 480px) {
    #results-chart {
        height: 250px;
    }
}

/* 进度文本响应式调整 */
@media (max-width: 640px) {
    #progress-text, #time-estimate {
        font-size: 0.75rem;
    }
}

/* 确保卡片内容在小屏幕上不溢出 */
main {
    overflow-x: hidden;
}

/* 结果摘要样式 */
#result-summary {
    line-height: 1.6;
}

/* 详细结果样式 */
#detailed-results {
    line-height: 1.5;
}

/* 确保按钮在小屏幕上宽度适当 */
@media (max-width: 480px) {
    #start-test, #restart-test {
        padding: 0.75rem;
    }
}

/* 进度条容器样式 */
#progress-bar-container {
    position: relative;
}

/* 时间估计文本样式 */
#time-estimate {
    white-space: nowrap;
}

/* 确保选项文本换行 */
.option-item label {
    word-wrap: break-word;
}

/* 调整卡片内边距 */
@media (max-width: 640px) {
    main {
        padding: 1.5rem;
    }
}