* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #00ff88;
    --primary-dark: #00cc6a;
    --secondary: #ff006e;
    --dark-bg: #0a0e27;
    --card-bg: #1a1f3a;
    --text-primary: #ffffff;
    --text-secondary: #b0b8d4;
    --border: #2d3561;
    --accent: #00d9ff;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--dark-bg) 0%, #0f1535 100%);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Animated background stars */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.stars::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        100px 100px white, 200px 50px white, 300px 150px white,
        400px 80px white, 500px 200px white, 600px 120px white,
        700px 180px white, 800px 100px white, 900px 220px white,
        1000px 150px white, 1100px 90px white, 1200px 170px white,
        1300px 130px white, 1400px 200px white, 1500px 110px white;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Header */
.header {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 217, 255, 0.1) 100%);
    border-bottom: 2px solid var(--primary);
    padding: 60px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.header-content {
    position: relative;
    z-index: 1;
}

.title {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    letter-spacing: 3px;
    text-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
}

.subtitle {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-weight: 300;
    letter-spacing: 1px;
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* Intro section */
.intro {
    text-align: center;
    margin-bottom: 80px;
}

.intro h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--primary);
}

.intro p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto 30px;
}

.disclaimer {
    background: rgba(255, 0, 110, 0.1);
    border-left: 4px solid var(--secondary);
    padding: 20px;
    border-radius: 8px;
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-secondary);
}

/* Lessons Grid */
.lessons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.lesson-tile {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(26, 31, 58, 0.8) 100%);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lesson-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent);
    transition: left 0.5s ease;
}

.lesson-tile:hover {
    border-color: var(--primary);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 255, 136, 0.2);
}

.lesson-tile:hover::before {
    left: 100%;
}

.lesson-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary);
    opacity: 0.3;
    margin-bottom: 10px;
}

.lesson-tile h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.lesson-tile .difficulty {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--primary);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.lesson-tile .time {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.lesson-tile .description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    flex-grow: 1;
    margin-bottom: 20px;
}

.tile-footer {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Footer */
.footer {
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--border);
    padding: 30px 20px;
    text-align: center;
    color: var(--text-secondary);
}

/* Lesson Page Styles */
.lesson-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.lesson-header {
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--border);
}

.lesson-number-large {
    font-size: 5rem;
    font-weight: 900;
    color: var(--primary);
    opacity: 0.2;
    margin-bottom: -20px;
}

.lesson-page h1 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.lesson-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.meta-badge {
    padding: 5px 12px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--primary);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--primary);
}

.lesson-content {
    color: var(--text-secondary);
    line-height: 1.8;
}

.lesson-content h2 {
    color: var(--primary);
    font-size: 1.8rem;
    margin-top: 40px;
    margin-bottom: 20px;
}

.lesson-content h3 {
    color: var(--accent);
    font-size: 1.3rem;
    margin-top: 30px;
    margin-bottom: 15px;
}

.lesson-content p {
    margin-bottom: 15px;
}

.lesson-content pre {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
    margin: 20px 0;
    color: var(--primary);
    font-size: 0.9rem;
}

.lesson-content code {
    background: rgba(0, 255, 136, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--primary);
    font-family: 'Courier New', monospace;
}

.lesson-content ul, .lesson-content ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.lesson-content li {
    margin-bottom: 10px;
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 2px solid var(--border);
}

.nav-btn {
    flex: 1;
    padding: 15px 30px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 217, 255, 0.1) 100%);
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.nav-btn:hover {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 217, 255, 0.2) 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 255, 136, 0.2);
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .title {
        font-size: 2.5rem;
    }
    
    .lessons-grid {
        grid-template-columns: 1fr;
    }
    
    .lesson-page h1 {
        font-size: 1.8rem;
    }
}