:root {
    --dark-primary: #121212;
    --dark-secondary: #1E1E1E;
    --dark-accent: #2C2C2C;
    --text-primary: #E0E0E0;
    --text-secondary: #A0A0A0;
    --highlight-color: #BB86FC;
    --gradient-dark: linear-gradient(135deg, #1A1A1A, #2C2C2C);
}

body {
    background: var(--dark-primary);
    color: var(--text-primary);
}

header {
    background: var(--gradient-dark);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.section-navigation {
    background: rgba(50,50,50,0.2);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 10px;
}

.section-btn {
    background: transparent;
    border: 2px solid rgba(187,134,252,0.3);
    color: var(--text-primary);
}

.video-item {
    background: rgba(30,30,30,0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(187,134,252,0.1);
}

@media (max-width: 768px) {
    .section-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .section-btn {
        margin: 5px 0;
        text-align: center;
    }
}