/* 系统架构设计师 · 智能学习平台 · 样式 */

/* 答题选项按钮 */
.option-btn {
    @apply w-full text-left p-4 border-2 border-gray-200 rounded-xl mb-3 cursor-pointer
           transition-all duration-200 hover:border-blue-400 hover:bg-blue-50;
}
.option-btn.selected {
    @apply border-blue-500 bg-blue-50;
}
.option-btn.correct {
    @apply border-green-500 bg-green-50;
}
.option-btn.wrong {
    @apply border-red-500 bg-red-50;
}

/* 难度星星 */
.difficulty-star {
    @apply inline-block w-4 h-4;
}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* 进度条 */
.progress-bar {
    @apply h-2 rounded-full bg-gray-200 overflow-hidden;
}
.progress-fill {
    @apply h-full rounded-full transition-all duration-500;
}
.progress-fill.low    { @apply bg-red-500; }
.progress-fill.medium { @apply bg-yellow-500; }
.progress-fill.high   { @apply bg-green-500; }

/* Markdown 渲染区 */
.tutorial-content h2 {
    @apply text-xl font-bold mt-6 mb-3 text-gray-800 border-b pb-2;
}
.tutorial-content h3 {
    @apply text-lg font-semibold mt-4 mb-2 text-gray-700;
}
.tutorial-content ul {
    @apply list-disc pl-5 my-2 space-y-1;
}
.tutorial-content p {
    @apply my-2 text-gray-700 leading-relaxed;
}
.tutorial-content strong {
    @apply text-gray-900;
}
.tutorial-content blockquote {
    @apply border-l-4 border-blue-400 bg-blue-50 px-4 py-2 my-3 italic text-gray-600;
}
.tutorial-content code {
    @apply bg-gray-100 px-1.5 py-0.5 rounded text-sm text-pink-600;
}
.tutorial-content pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg my-3 overflow-x-auto;
}