/* ===== CodeKids Theme ===== */
:root {
    --cpp-color: #5DADE2;
    --python-color: #FFD43B;
    --scratch-color: #FF8C00;
    --primary: #4A90D9;
    --primary-dark: #357ABD;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --bg-light: #f8f9fa;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: #f5f7fa;
    color: #333;
}

/* Navbar */
.navbar-brand {
    font-size: 1.4rem;
    letter-spacing: 1px;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0 50px;
    text-align: center;
}

.hero-section h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.hero-section p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Category Cards */
.category-card {
    border: none;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.category-card .card-body {
    padding: 30px 20px;
    text-align: center;
}

.category-card .category-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 15px;
}

.category-card.cpp { border-top: 4px solid var(--cpp-color); }
.category-card.python { border-top: 4px solid var(--python-color); }
.category-card.scratch { border-top: 4px solid var(--scratch-color); }

/* Question Cards */
.question-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    background: white;
    transition: box-shadow 0.2s;
}

.question-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Difficulty Badges */
.badge-beginner { background-color: #28a745; color: white; }
.badge-easy { background-color: #17a2b8; color: white; }
.badge-medium { background-color: #ffc107; color: #333; }
.badge-hard { background-color: #dc3545; color: white; }

/* Code Block */
.code-block {
    background: #282c34;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
    overflow-x: auto;
}

.code-block pre {
    margin: 0;
}

.code-block code {
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
}

/* Timer */
.timer-display {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Fira Code', 'Consolas', monospace;
    color: var(--danger);
}

.timer-warning {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Question Navigator */
.question-nav-item {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 3px;
    font-size: 13px;
    cursor: pointer;
    border: 2px solid #dee2e6;
    background: white;
    transition: all 0.2s;
}

.question-nav-item:hover { border-color: var(--primary); }
.question-nav-item.active { background: var(--primary); color: white; border-color: var(--primary); }
.question-nav-item.answered { background: #d4edda; border-color: #28a745; }

/* Option List */
.option-item {
    display: block;
    padding: 12px 16px;
    margin: 8px 0;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.option-item:hover {
    border-color: var(--primary);
    background: #e8f0fe;
}

.option-item.selected {
    border-color: var(--primary);
    background: #d0e3fc;
}

.option-item.correct {
    border-color: #28a745;
    background: #d4edda;
}

.option-item.incorrect {
    border-color: #dc3545;
    background: #f8d7da;
}

/* Result Card */
.result-summary {
    text-align: center;
    padding: 40px 20px;
    border-radius: 16px;
    margin-bottom: 30px;
}

.result-summary.passed {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
}

.result-summary.failed {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
}

.result-score {
    font-size: 4rem;
    font-weight: 700;
}

/* Pagination */
.pagination {
    justify-content: center;
}

/* Filter Sidebar */
.filter-sidebar {
    background: white;
    border-radius: 12px;
    padding: 20px;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group h6 {
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

/* Stats Cards */
.stat-card {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: white;
    border: none;
}

.stat-card .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-card .stat-label {
    color: #888;
    margin-top: 5px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state i {
    font-size: 4rem;
    display: block;
    margin-bottom: 20px;
}

/* Scratch Editor */
.scratch-container {
    display: flex;
    height: calc(100vh - 120px);
    min-height: 600px;
}

.scratch-toolbox {
    width: 220px;
    background: #f0f0f0;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    padding: 10px;
}

.scratch-workspace {
    flex: 1;
    background: #fff;
    overflow: auto;
}

.scratch-preview {
    width: 400px;
    background: #fff;
    border-left: 1px solid #ddd;
    display: flex;
    flex-direction: column;
}

.scratch-stage {
    flex: 1;
    background: white;
    position: relative;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section h1 { font-size: 1.8rem; }
    .hero-section { padding: 40px 0 30px; }
    .scratch-container { flex-direction: column; height: auto; }
    .scratch-toolbox { width: 100%; max-height: 200px; }
    .scratch-preview { width: 100%; }
}

/* Exam Progress Bar */
.exam-progress {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 15px 0;
}

.exam-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s;
}

/* Rank Badge */
.rank-1 { color: #FFD700; font-size: 1.5rem; }
.rank-2 { color: #C0C0C0; font-size: 1.3rem; }
.rank-3 { color: #CD7F32; font-size: 1.2rem; }

/* Teacher Panel */
.teacher-actions {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.teacher-actions .btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}