.header{padding:20px;position:sticky;top:0;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.header-left{display:flex;align-items:center;gap:20px}.back-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.2);color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:14px}.back-btn:hover{background:rgba(255,255,255,.3);transform:translate(-2px)}.app-title{color:#fff;font-size:24px;font-weight:600;margin:0}.header-right{display:flex;align-items:center}.progress-container{text-align:right}.progress-text{color:#fff;font-size:14px;margin-bottom:8px;font-weight:500}.progress-bar{width:200px;height:6px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#007AFF,#5856D6);border-radius:3px;transition:width .5s ease}.reset-btn{margin-right:20px;font-size:15px;padding:10px 20px;font-weight:500;border-radius:10px;background:rgba(255,255,255,.15);color:#007aff;border:1px solid #007AFF;transition:all .2s}.reset-btn:hover{background:#007AFF;color:#fff;border:1px solid #007AFF}@media (max-width: 768px){.reset-btn{margin-right:0;margin-bottom:10px;width:100%}}@media (max-width: 768px){.header{padding:15px}.header-content{flex-direction:column;gap:15px}.header-left{width:100%;justify-content:space-between}.app-title{font-size:20px}.progress-bar{width:150px}}.lesson-list{width:100%}.lesson-list-header{text-align:center;margin-bottom:40px}.section-title{color:#fff;font-size:32px;font-weight:700;margin-bottom:12px}.section-description{color:#fffc;font-size:18px;max-width:600px;margin:0 auto}.lessons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:20px 0}.lesson-card{cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.lesson-card:hover{transform:translateY(-4px);box-shadow:0 30px 80px #00000026}.lesson-card.completed{border:2px solid #34C759;background:linear-gradient(135deg,rgba(52,199,89,.1) 0%,rgba(255,255,255,.95) 100%)}.lesson-card.locked{opacity:.6;cursor:not-allowed;background:rgba(255,255,255,.7)}.lesson-card.locked:hover{transform:none;box-shadow:0 20px 60px #0000001a}.lesson-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.lesson-number{width:40px;height:40px;background:linear-gradient(135deg,#007AFF,#5856D6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}.completion-badge{color:#34c759;background:rgba(52,199,89,.1);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.lock-badge{color:#8e8e93;background:rgba(142,142,147,.1);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.lesson-title{font-size:20px;font-weight:600;margin-bottom:8px;color:#1d1d1f}.lesson-description{color:#6e6e73;font-size:14px;line-height:1.5;margin-bottom:20px}.lesson-meta{margin-top:auto}.lesson-stats{display:flex;gap:16px}.stat{display:flex;align-items:center;gap:6px;color:#8e8e93;font-size:12px;font-weight:500}@media (max-width: 768px){.lessons-grid{grid-template-columns:1fr;gap:16px}.section-title{font-size:24px}.section-description{font-size:16px}}.code-editor{border-radius:12px;overflow:hidden;background:#1e1e1e;border:1px solid rgba(255,255,255,.1)}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#2d2d30;border-bottom:1px solid rgba(255,255,255,.1)}.language-badge{background:#007ACC;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;text-transform:uppercase}.run-btn{display:flex;align-items:center;gap:6px;background:#34C759;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease}.run-btn:hover:not(:disabled){background:#30D158;transform:translateY(-1px)}.run-btn:disabled{opacity:.6;cursor:not-allowed}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.editor-container{position:relative}.code-input,.code-display{width:100%;min-height:200px;padding:16px;background:#1e1e1e;color:#d4d4d4;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:14px;line-height:1.5;border:none;outline:none;resize:vertical;white-space:pre;overflow-wrap:normal;overflow-x:auto}.code-input{caret-color:#d4d4d4}.code-input::placeholder{color:#6a6a6a}.code-display{white-space:pre-wrap;word-wrap:break-word}.keyword{color:#569cd6;font-weight:600}.literal{color:#4ec9b0}.string{color:#ce9178}.number{color:#b5cea8}.comment{color:#6a9955;font-style:italic}.output-container{border-top:1px solid rgba(255,255,255,.1);background:#252526}.output-header{padding:8px 16px;background:#2d2d30;color:#ccc;font-size:12px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.1)}.output-content{padding:16px;margin:0;color:#d4d4d4;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;max-height:300px;overflow-y:auto}.output-content::-webkit-scrollbar{width:8px}.output-content::-webkit-scrollbar-track{background:#2d2d30}.output-content::-webkit-scrollbar-thumb{background:#5a5a5a;border-radius:4px}.output-content::-webkit-scrollbar-thumb:hover{background:#6a6a6a}@media (max-width: 768px){.editor-header{flex-direction:column;gap:12px;align-items:stretch}.run-btn{justify-content:center}.code-input,.code-display{font-size:13px;padding:12px}}.lesson-view{max-width:1000px;margin:0 auto}.lesson-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:30px;padding:30px;background:rgba(255,255,255,.95);border-radius:20px;box-shadow:0 20px 60px #0000001a}.lesson-info{flex:1}.lesson-title{font-size:28px;font-weight:700;color:#1d1d1f;margin-bottom:12px}.lesson-description{font-size:16px;color:#6e6e73;line-height:1.6}.completion-status{display:flex;align-items:center;gap:8px;color:#34c759;font-weight:600;font-size:14px;padding:8px 16px;background:rgba(52,199,89,.1);border-radius:20px}.lesson-navigation{display:flex;gap:12px;margin-bottom:30px;background:rgba(255,255,255,.1);padding:8px;border-radius:12px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.nav-btn{flex:1;padding:12px 24px;border:none;background:transparent;color:#fff;border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:500}.nav-btn.active{background:rgba(255,255,255,.2);color:#fff}.nav-btn:hover:not(.active){background:rgba(255,255,255,.1)}.lesson-content{min-height:500px}.section-title{color:#fff;font-size:24px;font-weight:600;margin-bottom:24px}.examples-section,.tasks-section{display:flex;flex-direction:column;gap:24px}.example-card,.task-card{transition:all .3s ease}.example-card:hover,.task-card:hover{transform:translateY(-2px);box-shadow:0 25px 70px #00000026}.example-title,.task-title{font-size:18px;font-weight:600;color:#1d1d1f;margin-bottom:16px}.example-explanation,.task-hint{margin-top:20px;padding:16px;background:rgba(0,122,255,.05);border-radius:12px;border-left:4px solid #007AFF}.example-explanation h5,.task-hint h5{color:#007aff;font-weight:600;margin-bottom:8px;font-size:14px}.example-explanation p,.task-hint p{color:#6e6e73;line-height:1.6;margin:0}.task-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.task-completed{display:flex;align-items:center;gap:6px;color:#34c759;font-weight:600;font-size:14px}.task-question{font-size:16px;color:#1d1d1f;line-height:1.6;margin-bottom:20px;padding:16px;background:rgba(255,255,255,.5);border-radius:12px;border-left:4px solid #FF9500}.lesson-complete-card{text-align:center;background:linear-gradient(135deg,rgba(52,199,89,.1) 0%,rgba(255,255,255,.95) 100%);border:2px solid #34C759}.lesson-complete-card h4{color:#34c759;font-size:24px;margin-bottom:12px}.lesson-complete-card p{color:#6e6e73;margin-bottom:24px}@media (max-width: 768px){.lesson-header{flex-direction:column;gap:20px;padding:20px}.lesson-title{font-size:24px}.lesson-navigation{flex-direction:column}.nav-btn{text-align:center}.task-header{flex-direction:column;align-items:flex-start;gap:12px}}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:20px;max-width:1200px;margin:0 auto;width:100%}@media (max-width: 768px){.main-content{padding:10px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;color:#1d1d1f;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:4px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}.glass{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:16px}.btn{background:linear-gradient(135deg,#007AFF 0%,#5856D6 100%);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #007aff4d}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px #007aff66}.btn:active{transform:translateY(0)}.btn-secondary{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3)}.btn-secondary:hover{background:rgba(255,255,255,.3);box-shadow:0 4px 20px #fff3}.card{background:rgba(255,255,255,.95);border-radius:20px;padding:24px;box-shadow:0 20px 60px #0000001a;border:1px solid rgba(255,255,255,.2)}.fade-in{animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}