/* Page-specific styles only - everything else from dashboard.css */

        /* Mode Toggle - Premium Interactive Design with Animated Text */
        .mode-toggle {
            display: flex;
            position: relative;
            width: auto;
            height: 40px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            border-radius: 50px;
            padding: 4px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            gap: 4px;
        }

        .mode-btn {
            position: relative;
            z-index: 2;
            flex: 0 0 32px;
            height: 100%;
            /* Fill parent height */
            padding: 0;
            font-size: 0.85rem;
            font-family: var(--font-family-ui);
            font-weight: 500;
            letter-spacing: 0.02em;
            color: var(--color-text-muted);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 50px;
            white-space: nowrap;
            overflow: hidden;
        }

        /* Active button expands to fill remaining space */
        .mode-btn.active {
            flex: 1 1 auto;
        }

        [data-lang="ar"] .mode-btn {
            font-family: var(--font-family-ui);
        }

        /* Text hidden by default on mode buttons */
        .mode-btn .text-ar,
        .mode-btn .text-en {
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* Show text only on active button - respects language toggle */
        .mode-btn.active .text-ar,
        .mode-btn.active .text-en {
            max-width: 80px;
            opacity: 1;
        }

        @keyframes text-fade-in {
            0% {
                opacity: 0;
                transform: translateX(-8px);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        [dir="rtl"] .mode-btn.active .text-ar,
        [dir="rtl"] .mode-btn.active .text-en {
            animation: text-fade-in-rtl 0.3s ease forwards;
        }

        @keyframes text-fade-in-rtl {
            0% {
                opacity: 0;
                transform: translateX(8px);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .mode-btn:hover:not(.active) {
            color: var(--color-text);
            background: rgba(255, 255, 255, 0.08);
            transform: scale(1.05);
        }

        .mode-btn.active {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
            color: white;
            font-weight: 600;
            box-shadow:
                0 4px 20px var(--color-primary-glow),
                0 0 30px rgba(0, 224, 150, 0.2);
            animation: mode-glow 2s ease-in-out infinite alternate;
        }

        @keyframes mode-glow {
            0% {
                box-shadow: 0 4px 20px var(--color-primary-glow), 0 0 20px rgba(0, 224, 150, 0.15);
            }

            100% {
                box-shadow: 0 6px 25px var(--color-primary-glow), 0 0 35px rgba(0, 224, 150, 0.25);
            }
        }

        .mode-btn i {
            font-size: 1.25rem;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .mode-btn:hover:not(.active) i {
            transform: scale(1.15);
        }

        .mode-btn.active i {
            animation: icon-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        @keyframes icon-pop {
            0% {
                transform: scale(1);
            }

            40% {
                transform: scale(1.3) rotate(-10deg);
            }

            70% {
                transform: scale(0.9) rotate(5deg);
            }

            100% {
                transform: scale(1) rotate(0deg);
            }
        }

        /* Light mode adjustments */
        [data-theme="light"] .mode-toggle {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        [data-theme="light"] .mode-btn:hover:not(.active) {
            background: rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .mode-btn.active {
            box-shadow:
                0 4px 16px rgba(0, 224, 150, 0.35),
                0 0 20px rgba(0, 224, 150, 0.15);
        }

        /* ===== UNIFIED TOP NAV COMPONENTS ===== */
        /* All controls match mode toggle premium style */

        /* Streak Badge - Premium Pill Style */
        .top-actions .streak-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 16px;
            height: 44px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            font-family: var(--font-family-ui);
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--color-accent-gold);
            transition: all 0.3s ease;
        }

        .top-actions .streak-badge:hover {
            transform: scale(1.05);
            box-shadow:
                0 6px 28px rgba(0, 0, 0, 0.2),
                0 0 20px rgba(255, 171, 0, 0.15);
        }

        .top-actions .streak-badge i {
            font-size: 1.1rem;
            animation: fire-flicker 1s ease-in-out infinite alternate;
        }

        @keyframes fire-flicker {
            0% {
                transform: scale(1);
                opacity: 0.9;
            }

            100% {
                transform: scale(1.1);
                opacity: 1;
            }
        }

        /* Control Button (Theme Toggle) - Premium Circle Style */
        .top-actions .control-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            color: var(--color-text-muted);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .top-actions .control-btn:hover {
            color: var(--color-text);
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.1);
        }

        .top-actions .control-btn i {
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }

        .top-actions .control-btn:hover i {
            transform: rotate(15deg);
        }

        /* Language Toggle - Premium Pill Style */
        .top-actions .lang-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 16px;
            height: 44px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            font-family: var(--font-family-ui);
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--color-text-muted);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .top-actions .lang-toggle:hover {
            color: var(--color-text);
            transform: scale(1.05);
            background: rgba(255, 255, 255, 0.1);
        }

        .top-actions .lang-toggle i {
            font-size: 1.1rem;
        }

        .top-actions .lang-toggle span {
            letter-spacing: 0.05em;
        }

        /* Light Mode - All Controls */
        [data-theme="light"] .top-actions .streak-badge,
        [data-theme="light"] .top-actions .control-btn,
        [data-theme="light"] .top-actions .lang-toggle {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        [data-theme="light"] .top-actions .control-btn:hover,
        [data-theme="light"] .top-actions .lang-toggle:hover {
            background: rgba(0, 0, 0, 0.04);
        }

        /* Visual Divider */
        .top-actions-divider {
            width: 1px;
            height: 24px;
            background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
            margin: 0 8px;
        }

        [data-theme="light"] .top-actions-divider {
            background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent);
        }

        /* Settings Group - Combined Controls */
        .settings-group {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px;
            height: 40px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        .settings-group .control-btn {
            width: 32px;
            height: 32px;
            background: transparent;
            border: none;
            box-shadow: none;
        }

        .settings-group .control-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        [data-theme="light"] .settings-group {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        [data-theme="light"] .settings-group .control-btn:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        /* Search Box - Premium Style */
        .search-box {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 20px;
            height: 44px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            width: 280px;
            transition: all 0.3s ease;
        }

        .search-box:focus-within {
            border-color: var(--color-primary);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.15),
                0 0 0 2px rgba(0, 224, 150, 0.2);
        }

        .search-box input {
            flex: 1;
            background: transparent;
            border: none;
            color: var(--color-text);
            font-size: 0.85rem;
            font-family: var(--font-family-primary);
        }

        .search-box input::placeholder {
            color: var(--color-text-muted);
        }

        .search-box input:focus {
            outline: none;
        }

        .search-box i {
            color: var(--color-text-muted);
            font-size: 1.1rem;
        }

        /* Notification Button - Premium Circle */
        .notification-btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .notification-btn:hover {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.1);
        }

        .notification-btn i {
            font-size: 1.2rem;
            color: var(--color-text-muted);
            transition: all 0.3s ease;
        }

        .notification-btn:hover i {
            color: var(--color-text);
        }

        .notification-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 8px;
            height: 8px;
            background: var(--color-error);
            border-radius: 50%;
            border: 2px solid var(--color-bg);
        }

        /* Light Mode - Search & Notifications */
        [data-theme="light"] .search-box,
        [data-theme="light"] .notification-btn {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        [data-theme="light"] .notification-btn:hover {
            background: rgba(0, 0, 0, 0.04);
        }

        /* Focus Mode Visibility */
        .focus-view {
            display: none;
        }

        .browse-view {
            display: block;
        }

        body.focus-mode .focus-view {
            display: block;
        }

        body.focus-mode .browse-view {
            display: none;
        }

        /* Focus Mode - Course Grid (same card style as Browse) */
        .focus-courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 22vw, 280px), 1fr));
            gap: clamp(10px, 1.5vw, 18px);
            margin-bottom: clamp(20px, 3vw, 32px);
        }

        /* Focus Section Header */
        .focus-section-header {
            display: flex;
            align-items: center;
            gap: clamp(8px, 1.2vw, 12px);
            margin-bottom: clamp(12px, 2vw, 18px);
        }

        .focus-section-header h3 {
            font-size: clamp(0.9rem, 1.5vw, 1.1rem);
            font-weight: 600;
            color: var(--color-text);
        }

        /* MIA Icon (consistent image) */
        .mia-icon-img {
            width: clamp(24px, 4vw, 36px);
            height: clamp(24px, 4vw, 36px);
            border-radius: 50%;
            object-fit: cover;
        }

        /* MIA Tip - compact */
        .mia-tip {
            display: flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, rgba(45, 184, 76, 0.1), rgba(255, 215, 0, 0.1));
            border: 1px solid rgba(45, 184, 76, 0.3);
            border-radius: var(--radius-md);
            padding: clamp(8px, 1.2vw, 12px) clamp(10px, 1.5vw, 16px);
            margin-top: 10px;
        }

        .mia-tip-avatar {
            width: clamp(28px, 4vw, 36px);
            height: clamp(28px, 4vw, 36px);
            border-radius: 50%;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent-gold));
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .mia-tip-text {
            font-size: clamp(0.75rem, 1.2vw, 0.85rem);
            color: var(--color-text-muted);
        }

        /* ===== COURSES GRID - Compact Responsive ===== */
        .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 22vw, 280px), 1fr));
            gap: clamp(10px, 1.5vw, 18px);
        }

        /* ===== COURSE CARD - Overlay Design ===== */
        .course-card {
            position: relative;
            border-radius: clamp(8px, 1.5vw, 14px);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            aspect-ratio: 3 / 2;
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform: translateZ(0);
        }

        .course-card:hover {
            transform: translateY(-4px) translateZ(0);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
        }

        /* Image fills entire card */
        .card-thumbnail {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }

        .card-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .course-card:hover .card-thumbnail img {
            transform: scale(1.05);
        }

        /* Dark gradient overlay for content readability */
        .card-thumbnail::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.2) 70%, transparent 100%);
            pointer-events: none;
        }

        /* Content overlays on bottom of image */
        .card-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: clamp(12px, 2vw, 20px);
            z-index: 1;
        }

        .card-badges {
            position: absolute;
            top: clamp(6px, 1.5vw, 12px);
            right: clamp(6px, 1.5vw, 12px);
            left: clamp(6px, 1.5vw, 12px);
            display: flex;
            justify-content: space-between;
            z-index: 2;
        }

        .badge {
            padding: clamp(3px, 0.5vw, 5px) clamp(8px, 1vw, 12px);
            border-radius: 4px;
            font-size: clamp(0.65rem, 1.2vw, 0.75rem);
            font-weight: 600;
            backdrop-filter: blur(8px);
        }

        .badge-live {
            background: rgba(239, 68, 68, 0.9);
            color: white;
        }

        .badge-new {
            background: rgba(45, 184, 76, 0.9);
            color: white;
        }

        .badge-progress {
            background: rgba(0, 0, 0, 0.6);
            color: white;
        }

        .badge-complete {
            background: var(--color-accent-gold);
            color: var(--color-bg);
        }

        .play-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 48px;
            height: 48px;
            background: var(--color-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s;
            z-index: 3;
        }

        .play-overlay i {
            font-size: 1.3rem;
            color: white;
        }

        .course-card:hover .play-overlay {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }



        .card-category {
            font-size: clamp(0.6rem, 1vw, 0.72rem);
            color: var(--color-primary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .card-title {
            font-size: clamp(0.9rem, 1.8vw, 1.1rem);
            font-weight: 600;
            color: var(--color-text);
            margin: clamp(4px, 0.8vw, 8px) 0 clamp(8px, 1.5vw, 12px);
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-instructor {
            display: flex;
            align-items: center;
            gap: clamp(6px, 1vw, 10px);
            margin-bottom: clamp(10px, 1.5vw, 14px);
        }

        .instructor-avatar {
            width: clamp(24px, 4vw, 30px);
            height: clamp(24px, 4vw, 30px);
            border-radius: 50%;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent-gold));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(0.65rem, 1vw, 0.8rem);
            font-weight: 600;
            color: white;
            flex-shrink: 0;
        }

        .instructor-name {
            font-size: clamp(0.72rem, 1.2vw, 0.85rem);
            color: var(--color-text-muted);
        }

        /* ===== PROGRESS BAR - Simple & Modern (No Curves) ===== */
        .card-progress {
            margin-bottom: clamp(10px, 1.5vw, 14px);
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: clamp(4px, 0.8vw, 8px);
            font-size: clamp(0.7rem, 1.2vw, 0.8rem);
        }

        .progress-label {
            color: var(--color-text-muted);
        }

        .progress-value {
            color: var(--color-primary);
            font-weight: 600;
        }

        /* Simple straight-edge progress bar */
        .progress-bar {
            height: clamp(3px, 0.6vw, 5px);
            background: rgba(255, 255, 255, 0.08);
            border-radius: 0;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: var(--color-primary);
            border-radius: 0;
            transition: width 0.4s ease;
        }

        /* Focus view slightly taller */
        .focus-progress .progress-bar {
            height: clamp(5px, 0.8vw, 8px);
        }

        .card-meta {
            display: flex;
            justify-content: space-between;
            padding-top: clamp(10px, 1.5vw, 14px);
            border-top: 1px solid var(--color-glass-border);
            font-size: clamp(0.68rem, 1.1vw, 0.78rem);
            color: var(--color-text-muted);
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: clamp(3px, 0.5vw, 5px);
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .focus-card {
                grid-template-columns: 1fr;
            }

            .focus-card .focus-thumbnail {
                width: 100%;
            }

            .courses-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
        }

        @media (max-width: 480px) {
            .courses-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ===== BROWSE MODE - INTERACTIVE CATEGORY GRID ===== */
        .browse-categories {
            margin-bottom: clamp(20px, 3vw, 32px);
        }

        .category-section {
            margin-bottom: clamp(16px, 2.5vw, 24px);
        }

        .category-label {
            font-size: clamp(0.75rem, 1.2vw, 0.85rem);
            color: var(--color-text-muted);
            font-weight: 500;
            margin-bottom: clamp(8px, 1.2vw, 12px);
            display: block;
        }

        .category-grid {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(6px, 1vw, 10px);
        }

        .category-card {
            background: var(--color-glass);
            border: 1px solid var(--color-glass-border);
            border-radius: var(--radius-md);
            padding: clamp(8px, 1.2vw, 12px) clamp(12px, 1.8vw, 18px);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: clamp(6px, 1vw, 8px);
            font-size: clamp(0.75rem, 1.2vw, 0.85rem);
            color: var(--color-text);
        }

        .category-card:hover {
            border-color: var(--color-primary);
            background: rgba(45, 184, 76, 0.1);
        }

        .category-card.active {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: white;
        }

        .category-card i {
            font-size: clamp(1rem, 1.5vw, 1.2rem);
        }

        .category-card.active i {
            color: white;
        }

        /* Year cards with grade icons */
        .year-card .grade-num {
            font-weight: 700;
            font-size: clamp(0.85rem, 1.4vw, 1rem);
        }

        /* Subject cards with subject-specific colors */
        .subject-card[data-subject="physics"] i {
            color: #60A5FA;
        }

        .subject-card[data-subject="chemistry"] i {
            color: #F472B6;
        }

        .subject-card[data-subject="math"] i {
            color: #A78BFA;
        }

        .subject-card[data-subject="biology"] i {
            color: #4ADE80;
        }

        .subject-card[data-subject="arabic"] i {
            color: #FBBF24;
        }

        .subject-card[data-subject="english"] i {
            color: #38BDF8;
        }

        .subject-card[data-subject="history"] i {
            color: #FB923C;
        }

        .subject-card[data-subject="science"] i {
            color: #34D399;
        }

        .subject-card[data-subject="islamics"] i {
            color: #10B981;
        }

        .subject-card[data-subject="geography"] i {
            color: #F59E0B;
        }

        .subject-card[data-subject="social"] i {
            color: #EC4899;
        }

        /* University specialty colors */
        .specialty-card[data-specialty="engineering"] i {
            color: #3B82F6;
        }

        .specialty-card[data-specialty="medicine"] i {
            color: #EF4444;
        }

        .specialty-card[data-specialty="business"] i {
            color: #8B5CF6;
        }

        .specialty-card[data-specialty="arts"] i {
            color: #F97316;
        }

        .specialty-card[data-specialty="law"] i {
            color: #14B8A6;
        }

        .specialty-card[data-specialty="it"] i {
            color: #06B6D4;
        }

        .category-card.active[data-subject] i,
        .category-card.active[data-specialty] i {
            color: white;
        }

        /* Dynamic sections - hidden by default */
        .dynamic-section {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .dynamic-section.visible {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Level cards with larger icons */
        .level-card i {
            font-size: clamp(1.2rem, 2vw, 1.5rem);
        }

        /* ===== MIA RECOMMENDATIONS SECTION ===== */
        .mia-recommendations {
            margin-top: clamp(20px, 3vw, 32px);
        }

        .mia-section-header {
            display: flex;
            align-items: center;
            gap: clamp(8px, 1.2vw, 12px);
            margin-bottom: clamp(12px, 2vw, 20px);
        }

        .mia-section-header .mia-avatar {
            width: clamp(32px, 5vw, 44px);
            height: clamp(32px, 5vw, 44px);
            border-radius: 50%;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent-gold));
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .mia-section-header i {
            color: white;
            font-size: clamp(1rem, 1.8vw, 1.3rem);
        }

        .mia-section-title {
            font-size: clamp(0.9rem, 1.6vw, 1.1rem);
            font-weight: 600;
            color: var(--color-text);
        }

        .mia-rec-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 20vw, 240px), 1fr));
            gap: clamp(8px, 1.5vw, 14px);
        }

        .mia-rec-card {
            background: linear-gradient(135deg, rgba(45, 184, 76, 0.08), rgba(255, 215, 0, 0.08));
            border: 1px solid rgba(45, 184, 76, 0.2);
            border-radius: var(--radius-md);
            padding: clamp(10px, 1.5vw, 16px);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .mia-rec-card:hover {
            border-color: var(--color-primary);
            transform: translateY(-2px);
        }

        .mia-rec-icon {
            font-size: clamp(1.2rem, 2vw, 1.5rem);
            color: var(--color-primary);
            margin-bottom: 6px;
        }

        .mia-rec-title {
            font-size: clamp(0.8rem, 1.3vw, 0.9rem);
            font-weight: 600;
            color: var(--color-text);
            margin-bottom: 4px;
        }

        .mia-rec-desc {
            font-size: clamp(0.7rem, 1.1vw, 0.78rem);
            color: var(--color-text-muted);
            line-height: 1.4;
        }

        /* ===== LIGHT MODE - COURSE CARD FIX =====
           Cards always have a dark gradient overlay over thumbnails,
           so text inside must ALWAYS be white regardless of theme. */
        [data-theme="light"] .card-content .card-title,
        [data-theme="light"] .card-content .card-category {
            color: #ffffff;
        }

        [data-theme="light"] .card-content .instructor-name,
        [data-theme="light"] .card-content .progress-label,
        [data-theme="light"] .card-content .meta-item,
        [data-theme="light"] .card-content .card-meta {
            color: rgba(255, 255, 255, 0.7);
        }

        [data-theme="light"] .card-content .progress-value {
            color: var(--color-primary);
        }

        [data-theme="light"] .card-content .progress-bar {
            background: rgba(255, 255, 255, 0.15);
        }

        [data-theme="light"] .card-content .card-meta {
            border-top-color: rgba(255, 255, 255, 0.15);
        }