html { height: 100%; }
body { background-color: #f8f9fa; min-height: 100vh; display: flex; flex-direction: column; }
.container-fluid { flex: 1 0 auto; }
.footer { flex-shrink: 0; }

.card { border: none; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-radius: 10px; }

.course-card { transition: transform .15s, box-shadow .15s; }
.course-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }

.badge-status { font-size: .8rem; padding: .35em .65em; }

.progress { height: 8px; border-radius: 4px; }

.stat-card { border-radius: 12px; padding: 1.25rem 1.5rem; color: #fff; }
.stat-card .stat-num { font-size: 2rem; font-weight: 700; }
.stat-card .stat-label { font-size: .85rem; opacity: .85; }

.table th { background-color: #f1f3f5; font-weight: 600; font-size: .875rem; }
.table td { vertical-align: middle; font-size: .875rem; }

.test-question { background: #fff; border-radius: 10px; padding: 1.5rem; margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.test-question .form-check-label { cursor: pointer; }
.test-question .form-check-input:checked + .form-check-label { font-weight: 600; color: #0d6efd; }

.result-circle { width: 120px; height: 120px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 2rem; font-weight: 700;
    margin: 0 auto; }
.result-pass { background: #d1f0e0; color: #198754; }
.result-fail { background: #fde8e8; color: #dc3545; }

.nav-link.active { font-weight: 600; }

@media (max-width: 576px) {
    .stat-card .stat-num { font-size: 1.5rem; }
}