/* 自定义样式 */

/* 基础样式 */
body {
    font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

/* 导航栏基础样式 */
#navbar {
    margin-bottom: 20px;
}

/* 导航栏滚动效果 */
#navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 按钮样式 */
.btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors duration-200;
}

.btn-secondary {
    @apply bg-white text-blue-600 border border-blue-600 px-4 py-2 rounded-md hover:bg-blue-50 transition-colors duration-200;
}

/* 卡片样式 */
.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-shadow duration-300 hover:shadow-lg;
}

/* 表单样式 */
.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* 标签样式 */
.tag {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.tag-blue {
    @apply bg-blue-100 text-blue-800;
}

.tag-green {
    @apply bg-green-100 text-green-800;
}

.tag-yellow {
    @apply bg-yellow-100 text-yellow-800;
}

.tag-red {
    @apply bg-red-100 text-red-800;
}

/* 进度条样式 */
.progress-bar {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
}

.progress-value {
    @apply h-full bg-blue-600 rounded-full transition-all duration-500;
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* 延迟动画 */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

/* 知识点详情页样式 */
.knowledge-detail {
    @apply prose max-w-none;
}

.knowledge-detail h2 {
    @apply text-2xl font-bold text-gray-900 mt-6 mb-4;
}

.knowledge-detail p {
    @apply text-gray-700 mb-4;
}

.knowledge-detail ul, .knowledge-detail ol {
    @apply pl-5 mb-4;
}

.knowledge-detail li {
    @apply mb-2;
}

/* 主内容区域与导航栏间距 */
.main-content {
    margin-top: 50px;
}

/* 题目样式 */
.question-card {
    @apply bg-white rounded-lg shadow-md p-6 mb-6 transition-all duration-300 hover:shadow-lg border-l-4 border-blue-500;
}

.option-card {
    @apply p-4 border border-gray-200 rounded-md mb-3 cursor-pointer transition-all duration-200 hover:bg-blue-50;
}

.option-card.selected {
    @apply border-blue-500 bg-blue-50;
}

.option-card.correct {
    @apply border-green-500 bg-green-50;
}

.option-card.incorrect {
    @apply border-red-500 bg-red-50;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .hero-title {
        @apply text-3xl;
    }

    .feature-card {
        @apply flex flex-col items-center text-center;
    }
}

/* 个人中心样式 */
.profile-stat {
    @apply bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center;
}

.stat-number {
    @apply text-3xl font-bold text-blue-600;
}

.stat-label {
    @apply text-gray-600;
}

/* 错题本样式 */
.error-book-filter {
    @apply bg-white rounded-lg shadow p-4 mb-6;
}

/* 试卷样式 */
.exam-header {
    @apply bg-white rounded-lg shadow p-6 mb-6 flex flex-col md:flex-row justify-between items-center;
}

.timer {
    @apply bg-red-100 text-red-600 px-4 py-2 rounded-full font-mono text-lg font-bold;
}