:root {
    --bg-main: #FFFFFF;
    --bg-secondary: #FFFFFF;
    --bg-alt: #F9FAFB;
    --text-main: #0F172A;
    --text-secondary: #475569;
    --border-color: #E2E8F0;
    --accent-color: #06B6D4;
    /* Cyan */
}

html.dark {
    --bg-main: #0F172A;
    --bg-secondary: #1E293B;
    --bg-alt: #334155;
    --text-main: #F1F5F9;
    --text-secondary: #94A3B8;
    --border-color: #334155;
}

body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
}

.sidebar {
    transition: transform 0.3s ease-in-out;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
}

.text {
    color: var(--text-secondary);
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }
}

.channel-card,
.main-section-card,
.subsection-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.channel-card:hover,
.main-section-card:hover,
.subsection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.07), 0 4px 6px -2px rgba(6, 182, 212, 0.05);
    border-color: var(--accent-color);
}

.modal-overlay {
    transition: opacity 0.3s ease;
}

.modal-content {
    transition: transform 0.3s ease, opacity 0.3s ease;
    background-color: var(--bg-secondary);
}

.nav-link.active {
    background-color: #ECFEFF;
    color: #0891B2;
    font-weight: 700;
}

html.dark .nav-link.active {
    background-color: #164E63;
    color: #A5F3FC;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

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