*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 20px}.course-layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh;background:white;box-shadow:0 0 50px #0000001a}.sidebar{background:linear-gradient(180deg,#2c3e50 0%,#34495e 100%);color:#fff;padding:20px;overflow-y:auto}.main-content{padding:40px;overflow-y:auto;background:#fafafa}.nav-item{display:block;padding:12px 16px;margin:8px 0;color:#ecf0f1;text-decoration:none;border-radius:8px;transition:all .3s ease;cursor:pointer}.nav-item:hover{background:rgba(52,152,219,.2);transform:translate(4px)}.nav-item.active{background:#3498db;color:#fff}.nav-section{margin:30px 0}.nav-section h3{color:#bdc3c7;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.module-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:40px;border-radius:12px;margin-bottom:30px;text-align:center}.module-header h1{font-size:2.5em;margin-bottom:10px}.module-header p{font-size:1.2em;opacity:.9}.lesson-card{background:white;border-radius:12px;padding:30px;margin:20px 0;box-shadow:0 4px 20px #0000001a;transition:transform .3s ease}.lesson-card:hover{transform:translateY(-4px)}.lesson-card h2{color:#2c3e50;margin-bottom:20px;font-size:1.8em}.lesson-card h3{color:#34495e;margin:25px 0 15px;font-size:1.4em}.interactive-component{background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;padding:25px;margin:25px 0}.interactive-component h4{color:#495057;margin-bottom:15px;display:flex;align-items:center;gap:10px}.component-controls{display:flex;gap:15px;margin:20px 0;flex-wrap:wrap}.control-button{padding:10px 20px;border:none;border-radius:8px;background:#3498db;color:#fff;cursor:pointer;font-weight:500;transition:all .3s ease}.control-button:hover{background:#2980b9;transform:translateY(-2px)}.control-button.secondary{background:#95a5a6}.control-button.secondary:hover{background:#7f8c8d}.control-button.danger{background:#e74c3c}.control-button.danger:hover{background:#c0392b}.code-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.code-block{background:#2c3e50;color:#ecf0f1;padding:20px;border-radius:8px;font-family:Monaco,Menlo,monospace;font-size:14px;line-height:1.5;overflow-x:auto}.code-block.correct{border-left:4px solid #27ae60}.code-block.incorrect{border-left:4px solid #e74c3c}.code-label{display:inline-block;padding:4px 12px;border-radius:4px;font-size:12px;font-weight:700;margin-bottom:10px}.code-label.correct{background:#27ae60;color:#fff}.code-label.incorrect{background:#e74c3c;color:#fff}.progress-bar{width:100%;height:8px;background:#ecf0f1;border-radius:4px;overflow:hidden;margin:10px 0}.progress-fill{height:100%;background:linear-gradient(90deg,#27ae60,#2ecc71);transition:width .5s ease}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:30px 0}.stat-card{background:white;padding:25px;border-radius:12px;text-align:center;box-shadow:0 4px 15px #0000001a}.stat-number{font-size:2.5em;font-weight:700;color:#3498db;display:block}.stat-label{color:#7f8c8d;font-size:.9em;margin-top:5px}.quiz-question{background:white;border-radius:12px;padding:30px;margin:20px 0;box-shadow:0 4px 20px #0000001a}.quiz-options{margin:20px 0}.quiz-option{display:block;width:100%;text-align:left;padding:15px 20px;margin:10px 0;border:2px solid #e9ecef;border-radius:8px;background:white;cursor:pointer;transition:all .3s ease}.quiz-option:hover{border-color:#3498db;background:#f8f9fa}.quiz-option.selected{border-color:#3498db;background:#e3f2fd}.quiz-option.correct{border-color:#27ae60;background:#d4edda}.quiz-option.incorrect{border-color:#e74c3c;background:#f8d7da}@media (max-width: 768px){.course-layout{grid-template-columns:1fr}.sidebar{order:2;padding:20px}.main-content{order:1;padding:20px}.code-comparison{grid-template-columns:1fr}.module-header h1{font-size:2em}.stats-grid{grid-template-columns:1fr}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .6s ease-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pulse{animation:pulse 2s infinite}
