/* NIXUS Python Course Lesson - Dark theme with green accent */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#08090c;color:#8b95a5;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.7;min-height:100vh}

/* Top nav */
.topbar{background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.06);padding:12px 20px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.topbar a{color:#00e58a;text-decoration:none;font-size:14px;font-weight:600}
.topbar .back{display:flex;align-items:center;gap:6px}
.topbar .back:hover{color:#00ff9d}
.topbar .sep{color:rgba(255,255,255,0.1)}
.topbar .module{color:#5a6480;font-size:13px}
.topbar .lesson-title{color:#c8d0e0;font-size:14px;font-weight:600;margin-left:auto;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Hero */
.lesson-hero{background:linear-gradient(135deg,#0d1f15 0%,#081a10 100%);color:#fff;padding:60px 20px 50px;text-align:center;border-bottom:1px solid rgba(0,229,138,0.1)}
.lesson-hero .tag{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#00e58a;border:1px solid rgba(0,229,138,0.25);padding:4px 14px;border-radius:20px;margin-bottom:16px;font-family:'DM Mono',monospace}
.lesson-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,5vw,42px);font-weight:700;margin-bottom:12px;line-height:1.2;color:#f0f2f5}
.lesson-hero .meta{font-size:14px;color:#5a6480;display:flex;justify-content:center;gap:20px;flex-wrap:wrap;font-family:'DM Mono',monospace}
.lesson-hero .meta span{display:flex;align-items:center;gap:6px}
.lesson-hero .meta .green{color:#00e58a}

/* Content container */
.content{max-width:780px;margin:0 auto;padding:40px 20px 80px}

/* Section cards */
.section{background:rgba(255,255,255,0.025);border-radius:12px;padding:32px;margin-bottom:24px;border:1px solid rgba(255,255,255,0.06)}
.section h2{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:#f0f2f5;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid rgba(0,229,138,0.15)}
.section h3{font-size:17px;font-weight:600;color:#00e58a;margin:20px 0 10px}
.section p{margin-bottom:14px;color:#8b95a5;font-size:15px;line-height:1.75}
.section ul,.section ol{margin:12px 0 16px 24px}
.section li{margin-bottom:8px;color:#8b95a5;font-size:15px}
.section li strong{color:#c8d0e0}
.section a{color:#00e58a;text-decoration:none}
.section a:hover{text-decoration:underline}

/* Info boxes */
.info-box{background:rgba(0,229,138,0.05);border-radius:10px;padding:20px 24px;margin:20px 0;border-left:4px solid rgba(0,229,138,0.4)}
.info-box.tip{background:rgba(0,229,138,0.04);border-left-color:#00e58a}
.info-box.warn{background:rgba(249,115,22,0.05);border-left-color:#f97316}
.info-box.note{background:rgba(99,102,241,0.05);border-left-color:#6366f1}
.info-box .label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#00e58a;margin-bottom:6px;font-family:'DM Mono',monospace}
.info-box.tip .label{color:#00e58a}
.info-box.warn .label{color:#f97316}
.info-box.note .label{color:#6366f1}
.info-box p{margin:0;font-size:14px;color:#8b95a5}

/* Visual table */
.vis-table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
.vis-table th{background:rgba(0,229,138,0.08);color:#00e58a;padding:12px 16px;text-align:left;font-size:13px;font-weight:600;font-family:'DM Mono',monospace}
.vis-table td{padding:10px 16px;font-size:14px;color:#8b95a5;border-bottom:1px solid rgba(255,255,255,0.04)}
.vis-table tr:last-child td{border-bottom:none}
.vis-table tr:nth-child(even) td{background:rgba(255,255,255,0.015)}
.vis-table .check{color:#00e58a;font-weight:700}
.vis-table .cross{color:#f97316}
.vis-table code{font-family:'DM Mono',monospace;font-size:12px;color:#00e58a;background:rgba(0,229,138,0.08);padding:2px 6px;border-radius:4px}

/* Code blocks */
.code-block{background:#0d1117;border-radius:10px;padding:20px;margin:16px 0;overflow-x:auto;border:1px solid rgba(255,255,255,0.06);position:relative}
.code-block::before{content:'python';position:absolute;top:10px;right:14px;font-family:'DM Mono',monospace;font-size:10px;color:rgba(0,229,138,0.4);letter-spacing:1px}
.code-block code{font-family:'DM Mono',monospace;font-size:13px;color:#c8d0e0;line-height:1.7;display:block}
.code-block .comment{color:#3d4f5c}
.code-block .keyword{color:#6366f1}
.code-block .string{color:#00e58a}
.code-block .number{color:#f97316}
.code-block .func{color:#7dd3fc}

/* Inline code */
code:not(.language-python){font-family:'DM Mono',monospace;font-size:13px;color:#00e58a;background:rgba(0,229,138,0.08);padding:2px 7px;border-radius:4px;border:1px solid rgba(0,229,138,0.1)}

/* Key takeaway */
.takeaway{background:linear-gradient(135deg,rgba(0,229,138,0.06),rgba(0,229,138,0.02));border:1px solid rgba(0,229,138,0.15);border-radius:12px;padding:28px;margin:24px 0}
.takeaway h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin-bottom:12px;color:#00e58a}
.takeaway ul{margin:0 0 0 20px}
.takeaway li{color:#8b95a5;margin-bottom:6px;font-size:15px}
.takeaway li strong{color:#c8d0e0}

/* Exercises */
.exercises{background:rgba(99,102,241,0.04);border:1px solid rgba(99,102,241,0.12);border-radius:12px;padding:28px;margin:24px 0}
.exercises h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin-bottom:16px;color:#6366f1}
.exercises ol{margin:0 0 0 20px}
.exercises li{color:#8b95a5;margin-bottom:12px;font-size:15px;line-height:1.6}
.exercises li strong{color:#c8d0e0}
.exercises li code{font-family:'DM Mono',monospace;font-size:13px;color:#00e58a;background:rgba(0,229,138,0.08);padding:2px 6px;border-radius:4px}

/* Bottom nav */
.lesson-nav{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:1px solid rgba(255,255,255,0.06);margin-top:40px;gap:12px}
.lesson-nav a{display:flex;align-items:center;gap:8px;color:#8b95a5;text-decoration:none;font-weight:600;font-size:14px;padding:10px 20px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);transition:all 0.2s}
.lesson-nav a:hover{background:rgba(255,255,255,0.04);border-color:rgba(0,229,138,0.3);color:#00e58a}
.lesson-nav .next{background:rgba(0,229,138,0.08);color:#00e58a;border-color:rgba(0,229,138,0.2)}
.lesson-nav .next:hover{background:rgba(0,229,138,0.15)}
.lesson-nav .placeholder{flex:1}

/* Compare grid */
.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:20px 0}
.compare-card{background:rgba(255,255,255,0.02);border-radius:10px;padding:20px;border-left:4px solid rgba(0,229,138,0.4);border:1px solid rgba(255,255,255,0.06);border-left:4px solid #00e58a}
.compare-card h4{font-size:15px;font-weight:700;color:#f0f2f5;margin-bottom:8px;font-family:'Space Grotesk',sans-serif}
.compare-card p{font-size:13px;color:#6b7590;margin:0}

/* Breadcrumb */
.breadcrumb{font-family:'DM Mono',monospace;font-size:11px;color:#3a4260;margin-bottom:8px;letter-spacing:0.5px}
.breadcrumb a{color:#4a5265;text-decoration:none}
.breadcrumb a:hover{color:#00e58a}

/* Responsive */
@media(max-width:600px){
    .section{padding:20px 16px}
    .compare-grid{grid-template-columns:1fr}
    .lesson-hero{padding:40px 16px 30px}
    .lesson-nav{flex-direction:column}
    .lesson-nav a{width:100%;justify-content:center}
}

/* Print */
@media print{
    .topbar,.lesson-nav{display:none!important}
    body{background:#fff;color:#000}
    .section{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid}
}