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

/* Top nav */
.topbar{background:#0f1117;border-bottom:1px solid #1e2130;padding:12px 20px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:100}
.topbar a{color:#f5a623;text-decoration:none;font-size:14px;font-weight:600}
.topbar .back{display:flex;align-items:center;gap:6px}
.topbar .back:hover{color:#f7b84b}
.topbar .sep{color:#2a2d3a}
.topbar .module{color:#8b8fa8;font-size:13px}
.topbar .lesson-title{color:#e8eaed;font-size:14px;font-weight:600;margin-left:auto}

/* Hero */
.lesson-hero{background:linear-gradient(135deg,#1a1700 0%,#0f0e00 50%,#08090c 100%);border-bottom:2px solid #f5a623;color:#fff;padding:60px 20px 50px;text-align:center;position:relative;overflow:hidden}
.lesson-hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(245,166,35,0.08) 0%,transparent 60%);pointer-events:none}
.lesson-hero .tag{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#f5a623;border:1px solid rgba(245,166,35,0.4);padding:4px 14px;border-radius:20px;margin-bottom:16px;background:rgba(245,166,35,0.08)}
.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:#fff}
.lesson-hero .meta{font-size:14px;color:#8b8fa8;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.lesson-hero .meta span{display:flex;align-items:center;gap:6px}
.lesson-hero .meta .accent{color:#f5a623}

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

/* Section cards */
.section{background:#0f1117;border-radius:12px;padding:32px;margin-bottom:24px;border:1px solid #1e2130;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.section h2{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #f5a623}
.section h3{font-size:17px;font-weight:600;color:#f5a623;margin:20px 0 10px}
.section p{margin-bottom:14px;color:#c4c7d6;font-size:15px}
.section ul,.section ol{margin:12px 0 16px 24px}
.section li{margin-bottom:8px;color:#c4c7d6;font-size:15px}
.section li strong{color:#fff}

/* Code blocks */
pre{background:#070810;border-radius:10px;padding:20px;margin:16px 0;overflow-x:auto;border:1px solid #1e2130;border-left:3px solid #f5a623}
pre code{font-family:'DM Mono','Fira Code',monospace;font-size:13px;color:#e8eaed;line-height:1.7}
code{font-family:'DM Mono','Fira Code',monospace;background:#1a1d2e;padding:2px 6px;border-radius:4px;font-size:13px;color:#f5a623}
pre code{background:none;padding:0;color:#e8eaed}

/* Syntax highlight helpers */
.kw{color:#f5a623}
.str{color:#a3e635}
.num{color:#60a5fa}
.cmt{color:#4b5563;font-style:italic}
.fn{color:#c084fc}
.cls{color:#34d399}

/* Info boxes */
.info-box{background:#0f1117;border-radius:10px;padding:20px 24px;margin:20px 0;border-left:4px solid #f5a623;border:1px solid #1e2130;border-left:4px solid #f5a623}
.info-box.tip{border-left-color:#22c55e;background:#071510}
.info-box.warn{border-left-color:#ef4444;background:#150707}
.info-box.note{border-left-color:#3b82f6;background:#070d15}
.info-box .label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#f5a623;margin-bottom:6px}
.info-box.tip .label{color:#22c55e}
.info-box.warn .label{color:#ef4444}
.info-box.note .label{color:#3b82f6}
.info-box p{margin:0;font-size:14px;color:#c4c7d6}

/* Comparison/feature cards */
.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:20px 0}
.compare-card{background:#070810;border-radius:10px;padding:20px;border:1px solid #1e2130;border-top:3px solid #f5a623}
.compare-card.green{border-top-color:#22c55e}
.compare-card.blue{border-top-color:#3b82f6}
.compare-card.red{border-top-color:#ef4444}
.compare-card h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:8px}
.compare-card p{font-size:13px;color:#8b8fa8;margin:0}

/* Visual table */
.vis-table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid #1e2130}
.vis-table th{background:#f5a623;color:#08090c;padding:12px 16px;text-align:left;font-size:13px;font-weight:700}
.vis-table td{padding:10px 16px;font-size:14px;color:#c4c7d6;border-bottom:1px solid #1e2130;background:#0f1117}
.vis-table tr:last-child td{border-bottom:none}
.vis-table tr:nth-child(even) td{background:#070810}
.vis-table .check{color:#22c55e;font-weight:700}
.vis-table .cross{color:#ef4444}

/* Key takeaway */
.takeaway{background:linear-gradient(135deg,#1a1500,#0f0d00);border-radius:12px;padding:28px;margin:24px 0;border:2px solid #f5a623;position:relative;overflow:hidden}
.takeaway::before{content:'⚡';position:absolute;top:16px;right:20px;font-size:40px;opacity:0.15}
.takeaway h3{font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:12px;color:#f5a623}
.takeaway ul{margin:0 0 0 20px}
.takeaway li{color:#c4c7d6;margin-bottom:6px;font-size:15px}

/* Exercise box */
.exercise{background:#070d15;border-radius:12px;padding:28px;margin:24px 0;border:1px solid #1e3a5f;border-left:4px solid #3b82f6}
.exercise h3{font-family:'Space Grotesk',sans-serif;font-size:18px;color:#60a5fa;margin-bottom:12px}
.exercise .exercise-item{background:#0f1117;border-radius:8px;padding:16px;margin:12px 0;border:1px solid #1e2130}
.exercise .exercise-item p{margin:0;color:#c4c7d6;font-size:14px}
.exercise .challenge{color:#f5a623;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}

/* Bottom nav */
.lesson-nav{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:1px solid #1e2130;margin-top:40px;gap:12px}
.lesson-nav a{display:flex;align-items:center;gap:8px;color:#f5a623;text-decoration:none;font-weight:600;font-size:14px;padding:10px 20px;border-radius:8px;border:1px solid #f5a623;transition:all 0.2s;background:transparent}
.lesson-nav a:hover{background:rgba(245,166,35,0.1)}
.lesson-nav .next{background:#f5a623;color:#08090c;border-color:#f5a623}
.lesson-nav .next:hover{background:#f7b84b;border-color:#f7b84b}
.lesson-nav .disabled{opacity:0.3;pointer-events:none}

/* Progress bar */
.progress-bar{height:3px;background:#1e2130;position:fixed;top:0;left:0;right:0;z-index:200}
.progress-fill{height:100%;background:#f5a623;width:0;transition:width 0.2s}

/* 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}
}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#08090c}
::-webkit-scrollbar-thumb{background:#f5a623;border-radius:3px}

/* Selection */
::selection{background:rgba(245,166,35,0.3);color:#fff}