/**
 * Learn Page Super Higher-Level Styles
 * Enterprise-grade styling improvements
 */

/* ============================================
   QUIZ RESULTS STYLING
   ============================================ */

.quiz-results {
    text-align: center; padding: 2rem; }

.results-header {
    margin-bottom: 2rem; }

.results-header i {
    font-size: 4rem; color: #ffc107; }

.results-header h2 {
    margin: 0; }

.results-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

.stat-card {
    background: var(--code-bg); border-radius: 12px; }

.stat-card .stat-value {
    font-weight: 700; }

.stat-card .stat-label {
    text-transform: uppercase; letter-spacing: 0.5px; }

.results-actions {
    justify-content: center; }

/* ============================================
   SKIP LINKS
   ============================================ */

.skip-link {
    position: absolute; top: -40px; left: 0; text-decoration: none; z-index: 10000; }

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

@keyframes slideIn {
    from {
        transform: translateX(100%); opacity: 0; }
}

@keyframes slideOut {
}

.toast {
    bottom: 20px; right: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); animation: slideIn 0.3s ease; min-width: 250px; }

/* ============================================
   TOOLTIPS
   ============================================ */

.tooltip {
    pointer-events: none; white-space: nowrap; }

.tooltip::after {
    content: ''; border: 5px solid transparent; border-top-color: #333; }

/* ============================================
   LOADING STATES
   ============================================ */

button[data-loading="true"] {
    cursor: not-allowed; }

@keyframes spin {
}

/* ============================================
   ERROR STATES
   ============================================ */

input.error,
textarea.error {
    border-color: #dc3545 !important; }

/* ============================================
   FOCUS IMPROVEMENTS
   ============================================ */

*:focus-visible {
    outline: 3px solid #0d6efd; outline-offset: 2px; }

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

.quiz-card,
.exercise-card,
.tutorial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease; }

/* ============================================
   QUIZ OPTION SELECTION
   ============================================ */

.quiz-option {
    user-select: none; }

/* ============================================
   RESPONSIVE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {

    .results-actions {
        flex-direction: column; }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

.quiz-card,
.exercise-card,
.tutorial-card {
    will-change: transform; }

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
}