code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}:root{--bg: #0f172a;--bg-elevated: #1e293b;--bg-card: #1e293b;--border: rgba(148, 163, 184, .15);--border-hover: rgba(148, 163, 184, .3);--accent: #CC3D00;--accent-soft: rgba(204, 61, 0, .15);--accent-hover: #E04E1A;--text: #f1f5f9;--text-muted: #94a3b8;--text-soft: #8292a9;--success: #22c55e;--success-soft: rgba(34, 197, 94, .15);--code-bg: #0f172a;--code-text: #e2e8f0;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-pill: 999px;--sidebar-width: 280px;--sidebar-width-expanded: 280px;--sidebar-width-collapsed: 72px;--sidebar-width-mobile: 300px;--sidebar-transition: width .3s cubic-bezier(.4, 0, .2, 1);--content-max-width: 800px}[data-theme=light]{--bg: #f8fafc;--bg-elevated: #ffffff;--bg-card: #ffffff;--border: rgba(71, 85, 105, .15);--border-hover: rgba(71, 85, 105, .3);--accent: #CC3D00;--accent-soft: rgba(204, 61, 0, .1);--accent-hover: #A83400;--text: #0f172a;--text-muted: #475569;--text-soft: #627186;--success: #16a34a;--success-soft: rgba(22, 163, 74, .1);--code-bg: #f1f5f9;--code-text: #334155}*,*:before,*:after{box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}#root{display:flex;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;width:var(--sidebar-width-expanded);background:var(--bg);border-right:1px solid var(--border);padding:var(--space-xl) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);flex-shrink:0;overflow-y:auto;transition:var(--sidebar-transition)}@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-lg);padding:var(--space-sm) var(--space-md);background:var(--bg-elevated);border-radius:var(--radius-md)}.sidebar-header-brand{display:flex;align-items:center;gap:var(--space-sm);flex:1;overflow:hidden;min-width:0}.sidebar-header-divider{width:1px;height:24px;background:var(--border)}.sidebar-header-actions{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0;position:relative;z-index:10}.mobile-header,.menu-close,.sidebar-backdrop{display:none}.sidebar-brand{display:flex;align-items:center;gap:var(--space-sm);padding:0;color:var(--text);text-decoration:none;font-weight:600;font-size:1.1rem;transition:color .15s ease;min-width:0}.sidebar-brand>span{line-height:1.3}.sidebar-brand:hover{color:var(--text);text-decoration:none}.sidebar-brand svg{flex-shrink:0}.theme-toggle,.sidebar-toggle{display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:all .2s ease;opacity:.7;position:relative;z-index:10}.theme-toggle:hover,.sidebar-toggle:hover{color:var(--text);opacity:1;transform:scale(1.1)}.theme-toggle svg,.sidebar-toggle svg{width:24px;height:24px}.sidebar h2{margin:0 0 var(--space-sm);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)}.course-title-section{margin:var(--space-lg) 0 var(--space-md)}.course-title{font-size:.95rem;font-weight:500;color:var(--text);line-height:1.4}.back-link{margin-bottom:var(--space-md)}.sidebar.collapsed .module-link.back-link{margin:0 auto var(--space-sm);background:transparent;border:none;padding:0;width:auto;height:auto;opacity:.7;color:var(--text-muted)}.sidebar.collapsed .module-link.back-link:hover{background:transparent;border:none;color:var(--text);opacity:1;transform:scale(1.1)}.sidebar .modules{display:flex;flex-direction:column;gap:var(--space-xs)}.sidebar .module-link{display:flex;justify-content:flex-start;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:.9rem;font-weight:500;color:var(--text-muted);text-decoration:none;transition:all .15s ease}.sidebar .module-link .module-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-muted);transition:color .3s ease}.sidebar .module-link:hover{background:var(--bg-elevated);color:var(--text);text-decoration:none}.sidebar .module-link.active{background:var(--accent-soft);color:var(--accent)}.sidebar .module-link.active .module-icon{color:var(--accent)}.sidebar .module-link:hover[data-course=react] .module-icon{color:#61dafb}.sidebar .module-link:hover[data-course=nextjs] .module-icon{color:var(--text)}.sidebar .module-link:hover[data-course=angular] .module-icon{color:#dd0031}.sidebar .module-link:hover[data-course=ember] .module-icon{color:#e04e39}.sidebar .module-link:hover[data-course=code] .module-icon,.sidebar .module-link:hover[data-course=book] .module-icon,.sidebar .module-link:hover[data-course=design] .module-icon,.sidebar .module-link:hover[data-course=layers] .module-icon{color:var(--accent)}.sidebar .progress-pill{margin-left:auto;padding:2px 8px;border-radius:var(--radius-pill);font-size:.7rem;font-weight:600;color:var(--text-soft);background:var(--bg-elevated)}.sidebar .module-link.active .progress-pill{background:#38bdf833;color:var(--accent)}.sidebar.collapsed{width:var(--sidebar-width-collapsed);padding:var(--space-md)}.sidebar.collapsed .sidebar-brand>span,.sidebar.collapsed h2,.sidebar.collapsed .progress-pill,.sidebar.collapsed .user-menu-link>span:not(.user-menu-avatar),.sidebar.collapsed .module-link>span:not(.module-icon){display:none}.sidebar.collapsed .menu-close{display:none}.sidebar.collapsed .sidebar-header{margin-bottom:var(--space-sm);flex-direction:column;align-items:center;gap:var(--space-md);padding:0;background:transparent}.sidebar.collapsed .sidebar-header-brand{order:1;justify-content:center}.sidebar.collapsed .sidebar-header-divider{display:none}.sidebar.collapsed .sidebar-brand{position:relative;justify-content:center;padding:0;background:transparent;border:none;transition:all .15s ease}.sidebar.collapsed .sidebar-brand:hover{background:transparent}.sidebar.collapsed .sidebar-brand svg{width:32px;height:32px}.sidebar.collapsed .sidebar-header-actions{width:100%;flex-direction:column;align-items:center;gap:var(--space-sm);order:2}.sidebar.collapsed .modules{gap:var(--space-xs);padding:0}.sidebar.collapsed .sidebar-footer{padding-top:var(--space-md);margin-top:auto}.sidebar.collapsed .user-menu{flex-direction:column;gap:var(--space-md);padding:0;background:transparent}.sidebar.collapsed .user-menu-divider{display:none}.sidebar.collapsed .theme-toggle-wrapper{justify-content:center;margin:0 auto;display:flex;align-items:center}.sidebar.collapsed .module-link{position:relative;justify-content:center;align-items:center;padding:0;font-size:.95rem;font-weight:600;height:39px;width:39px;margin:0 auto;border-radius:var(--radius-md);transition:all .15s ease;background:transparent;border:1px solid transparent}.sidebar.collapsed .module-link:hover{background:var(--bg-elevated);border-color:var(--border)}.sidebar.collapsed .module-link.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.sidebar.collapsed .module-link>span:first-child{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.module-icon{display:inline-flex;align-items:center;justify-content:center}.sidebar.collapsed .user-menu-link{position:relative;justify-content:center;padding:0;margin:0 auto;background:transparent;border:none;transition:all .2s ease;opacity:.7}.sidebar.collapsed .user-menu-link:hover{background:transparent;opacity:1;transform:scale(1.1)}.sidebar.collapsed .user-menu-link.active{background:transparent;opacity:1}.sidebar.collapsed .user-menu-avatar{width:32px;height:32px;font-size:.9rem}.main{flex:1;max-width:var(--content-max-width);width:100%;padding:var(--space-2xl) var(--space-xl);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-lg)}.main h1{margin:0 0 var(--space-sm);font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.main>p:first-of-type{margin:0 0 var(--space-lg);font-size:1.1rem;color:var(--text-muted);max-width:600px}.main h2{margin:0 0 var(--space-sm);font-size:1.25rem;font-weight:600;color:var(--text)}.main h3{margin:var(--space-lg) 0 var(--space-sm);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft)}.main p{margin:var(--space-sm) 0;font-size:.95rem;line-height:1.7;color:var(--text-muted)}.card{background:var(--bg-card);padding:var(--space-xl);border-radius:var(--radius-xl);border:1px solid var(--border);transition:border-color .15s ease}.card:hover{border-color:var(--border-hover)}.card+.card{margin-top:var(--space-md)}.progress-bar-outer{width:100%;height:8px;border-radius:var(--radius-pill);background:var(--bg);overflow:hidden;margin-top:var(--space-sm)}.progress-bar-inner{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:var(--radius-pill);transition:width .3s ease-out}.checklist{list-style:none;padding:0;margin:var(--space-md) 0 0;display:flex;flex-direction:column;gap:var(--space-sm)}.checklist-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) 0;font-size:.95rem;color:var(--text-muted);line-height:1.6}.checklist-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}.checklist-item label{cursor:pointer;flex:1}.features-list{list-style:none;padding:0;margin:var(--space-md) 0;display:grid;grid-template-columns:1fr;gap:var(--space-sm)}@media(min-width:768px){.features-list{grid-template-columns:repeat(2,1fr);gap:var(--space-md)}}.features-list li{display:flex;gap:var(--space-sm);padding:var(--space-xs) 0;font-size:.95rem;color:var(--text);line-height:1.6}.features-list li .icon{flex-shrink:0}.features-list li .text{flex:1}.external-link-btn{display:inline;background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-size:inherit;font-family:inherit;font-weight:500;transition:color .15s ease}.external-link-btn:hover{color:var(--accent-hover);text-decoration:underline}pre{background:var(--bg);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--border);overflow-x:auto;margin:var(--space-md) 0}code{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.6}pre code{color:var(--code-text)}:not(pre)>code{background:var(--bg);color:var(--accent);padding:2px 6px;border-radius:var(--radius-sm);font-size:.85em}a{color:var(--accent);text-decoration:none;transition:color .15s ease}a:hover{color:var(--accent-hover);text-decoration:underline}.lightbox-overlay{position:fixed;inset:0;background:#0f172ae6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-xl)}.lightbox-container{position:relative;width:100%;max-width:1100px;height:85vh;background:var(--bg-card);border-radius:var(--radius-xl);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #00000080}.lightbox-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);background:var(--bg)}.lightbox-title{font-size:.9rem;font-weight:500;color:var(--text-muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:var(--space-lg)}.lightbox-actions{display:flex;gap:var(--space-sm)}.lightbox-btn{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-muted);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease}.lightbox-btn:hover{background:var(--bg-card);color:var(--text);border-color:var(--border-hover)}.lightbox-close{width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.25rem;transition:all .15s ease}.lightbox-close:hover{background:#ef444426;color:#ef4444;border-color:#ef44444d}.lightbox-content{flex:1;overflow:hidden}.lightbox-iframe{width:100%;height:100%;border:none;background:#fff}.lightbox-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);color:var(--text-muted)}.lightbox-blocked{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--space-md);color:var(--text-muted);text-align:center;padding:var(--space-xl)}.lightbox-blocked p{margin:0}.lightbox-open-btn{background:var(--accent);color:var(--bg);border:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:opacity .15s ease}.lightbox-open-btn:hover{opacity:.9}.quiz-section{margin-top:var(--space-lg);padding:var(--space-lg);background:var(--accent-soft);border-radius:var(--radius-lg);border:1px solid rgba(56,189,248,.2)}.quiz-section h3{color:var(--accent);margin:0 0 var(--space-md);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}.quiz-section ul{margin:0;padding-left:var(--space-lg)}.quiz-section li{color:var(--text-muted);font-size:.9rem;margin:var(--space-sm) 0;line-height:1.6}.quiz-section.interactive{background:var(--bg-card);border-color:var(--border)}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.quiz-header h3{margin:0}.quiz-score{font-size:.9rem;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-pill)}.quiz-percentage{color:var(--text-muted);font-weight:500}.quiz-questions{display:flex;flex-direction:column;gap:var(--space-lg)}.quiz-question{padding-bottom:var(--space-lg);border-bottom:1px solid var(--border)}.quiz-question:last-child{border-bottom:none;padding-bottom:0}.quiz-question-text{font-size:1rem;color:var(--text);margin:0 0 var(--space-md);line-height:1.7}.quiz-options{display:flex;flex-direction:column;gap:var(--space-sm)}.quiz-option{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease;text-align:left;font-family:inherit;font-size:.95rem;color:var(--text-muted)}.quiz-option:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}.quiz-option:disabled{cursor:default}.quiz-option.correct{border-color:var(--success);background:var(--success-soft);color:var(--text)}.quiz-option.incorrect{border-color:#ef4444;background:#ef444426;color:var(--text)}.quiz-option-letter{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-elevated);border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;color:var(--text-soft);flex-shrink:0}.quiz-option.correct .quiz-option-letter{background:var(--success);color:#fff}.quiz-option.incorrect .quiz-option-letter{background:#ef4444;color:#fff}.quiz-option-text{flex:1}.quiz-option-icon{font-size:1.1rem;font-weight:700}.quiz-option.correct .quiz-option-icon{color:var(--success)}.quiz-option.incorrect .quiz-option-icon{color:#ef4444}.quiz-blank-input{display:inline-block;width:180px;padding:var(--space-xs) var(--space-sm);margin:0 var(--space-xs);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:inherit;vertical-align:baseline}.quiz-blank-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.quiz-blank-input::placeholder{color:var(--text-soft)}.quiz-blank-answer{display:inline-block;padding:var(--space-xs) var(--space-sm);margin:0 var(--space-xs);border-radius:var(--radius-sm);font-weight:600}.quiz-blank-answer.correct{background:var(--success-soft);color:var(--success)}.quiz-blank-answer.incorrect{background:#ef444426;color:#ef4444;text-decoration:line-through}.quiz-correct-answer{margin-top:var(--space-sm);font-size:.9rem;color:var(--success)}.quiz-textarea{width:100%;padding:var(--space-md);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:inherit;font-size:.95rem;line-height:1.6;resize:vertical;min-height:100px}.quiz-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.quiz-textarea::placeholder{color:var(--text-soft)}.quiz-user-response,.quiz-sample-answer{padding:var(--space-md);background:var(--bg);border-radius:var(--radius-md);margin-top:var(--space-sm)}.quiz-user-response strong,.quiz-sample-answer strong{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft);margin-bottom:var(--space-xs)}.quiz-user-response p,.quiz-sample-answer p{margin:0;color:var(--text-muted)}.quiz-sample-answer{border-left:3px solid var(--accent)}.quiz-submit-btn,.quiz-toggle-sample{margin-top:var(--space-md);padding:var(--space-sm) var(--space-lg);background:var(--accent);color:var(--bg);border:none;border-radius:var(--radius-md);font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s ease}.quiz-submit-btn:hover:not(:disabled),.quiz-toggle-sample:hover{background:var(--accent-hover)}.quiz-submit-btn:disabled{opacity:.5;cursor:not-allowed}.quiz-toggle-sample{background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border)}.quiz-toggle-sample:hover{background:var(--bg);color:var(--text);border-color:var(--border-hover)}.quiz-result{margin-top:var(--space-lg);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);text-align:center}.quiz-result p{margin:0;font-weight:500}.quiz-result.success{background:var(--success-soft);border:1px solid rgba(34,197,94,.3)}.quiz-result.success p{color:var(--success)}.quiz-result.partial{background:#eab30826;border:1px solid rgba(234,179,8,.3)}.quiz-result.partial p{color:#eab308}.quiz-result.retry{background:#ef444426;border:1px solid rgba(239,68,68,.3)}.quiz-result.retry p{color:#ef4444}.home{display:flex;flex-direction:column;gap:var(--space-xl)}.hero-banner{display:flex;align-items:center;gap:var(--space-xl);padding:var(--space-2xl);background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg) 100%);border-radius:var(--radius-xl);border:1px solid var(--border)}.hero-logo{flex-shrink:0}.hero-logo svg{width:80px;height:80px}.hero-content h1{margin:0 0 var(--space-sm);font-size:2.25rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.hero-subtitle{margin:0;font-size:1.1rem;color:var(--text-muted);max-width:500px}.hero-version-info{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-md);align-items:center}.version-badge{display:inline-block;padding:.25rem .6rem;font-size:.75rem;font-weight:600;background:#0070f326;color:var(--accent);border-radius:var(--radius-sm);border:1px solid rgba(0,112,243,.3)}.version-date{font-size:.8rem;color:var(--text-soft);margin-left:var(--space-xs)}.home-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}.stat-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-lg);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);text-align:center}.stat-number{font-size:2rem;font-weight:700;color:var(--accent)}.stat-label{font-size:.85rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.05em}.courses-section{margin-top:var(--space-2xl)}.courses-section h2{margin:0 0 var(--space-xl);font-size:1.5rem;font-weight:700;color:var(--text)}.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-lg)}.course-card{display:flex;flex-direction:column;padding:var(--space-xl);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:var(--text);transition:all .2s ease}.course-card:hover{text-decoration:none;border-color:var(--border-hover);transform:translateY(-4px);box-shadow:0 8px 16px -4px #0000001a}.course-card-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.course-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:var(--text-muted);transition:color .3s ease}.course-card:hover[data-course=react] .course-icon{color:#61dafb}.course-card:hover[data-course=nextjs] .course-icon{color:var(--text)}.course-card:hover[data-course=angular] .course-icon{color:#dd0031}.course-card:hover[data-course=ember] .course-icon{color:#e04e39}.course-card:hover[data-course=code] .course-icon,.course-card:hover[data-course=book] .course-icon,.course-card:hover[data-course=design] .course-icon,.course-card:hover[data-course=layers] .course-icon{color:var(--accent)}.course-card-header .course-title{margin:0;font-size:1rem;font-weight:700;color:var(--text);line-height:1.2}.course-description{margin:0 0 var(--space-lg);font-size:.95rem;line-height:1.6;color:var(--text-muted);flex:1}.course-meta{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md);padding-bottom:var(--space-md);border-bottom:1px solid var(--border)}.course-meta-item{display:flex;align-items:center;gap:var(--space-xs);font-size:.875rem;color:var(--text-soft)}.course-meta-item svg{flex-shrink:0}.course-progress{margin-bottom:var(--space-md)}.course-progress-bar{height:6px;background:var(--bg-elevated);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:var(--space-xs)}.course-progress-fill{height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width .3s ease}.course-progress-text{font-size:.8rem;font-weight:600;color:var(--accent)}.course-card-footer{display:flex;align-items:center;justify-content:space-between}.course-card-cta{font-size:.95rem;font-weight:600;color:var(--accent)}.home-intro h2{margin-bottom:var(--space-md)}.home-intro ul{margin:var(--space-md) 0 0;padding-left:var(--space-lg)}.home-intro li{margin:var(--space-sm) 0;color:var(--text-muted);line-height:1.7}.home-intro li strong{color:var(--text)}.home-cta{display:flex;justify-content:center;padding:var(--space-md) 0}.cta-button{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-2xl);background:var(--accent);color:var(--bg);border-radius:var(--radius-md);font-size:1rem;font-weight:600;text-decoration:none;transition:all .15s ease}.cta-button:hover{background:var(--accent-hover);color:var(--bg);text-decoration:none;transform:translateY(-1px)}@media(max-width:1024px){.main{padding:var(--space-xl)}}@media(min-width:769px){.sidebar-toggle{display:flex}.menu-close{display:none}}@media(max-width:768px){#root{flex-direction:column}.sidebar-toggle{display:none!important}.sidebar.collapsed{width:var(--sidebar-width-mobile);padding:var(--space-xl) var(--space-lg)}.sidebar.collapsed .sidebar-brand>span,.sidebar.collapsed h2,.sidebar.collapsed .progress-pill,.sidebar.collapsed .user-menu-link>span,.sidebar.collapsed .module-link>span:nth-child(2){display:block}.sidebar.collapsed .menu-close{display:flex}.sidebar.collapsed .sidebar-header{flex-direction:row;margin-bottom:var(--space-lg)}.sidebar.collapsed .sidebar-header-actions{flex-direction:row;width:auto}.sidebar.collapsed .sidebar-brand{order:0;margin-bottom:0}.sidebar.collapsed .sidebar-brand svg{width:28px;height:28px}.sidebar.collapsed .user-menu-avatar{width:28px;height:28px;font-size:.75rem}.sidebar .theme-toggle-wrapper,.sidebar.collapsed .theme-toggle-wrapper{width:auto;padding:var(--space-sm) var(--space-md);justify-content:flex-start}.sidebar .theme-toggle-wrapper:hover,.sidebar.collapsed .theme-toggle-wrapper:hover{transform:none}.sidebar .user-menu{gap:var(--space-sm)}.sidebar.collapsed .module-link:after,.sidebar.collapsed .sidebar-brand:after,.sidebar.collapsed .user-menu-link:after{display:none}.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.mobile-header .sidebar-brand{gap:var(--space-sm)}.mobile-header .sidebar-brand span{font-size:1rem}.mobile-header-center{position:absolute;left:50%;transform:translate(-50%)}.mobile-sign-in{padding:var(--space-sm) var(--space-xl);background:var(--accent);color:#fff;font-size:.875rem;font-weight:600;border-radius:999px;text-decoration:none;transition:background .15s ease}.mobile-sign-in:hover{background:var(--accent-hover);text-decoration:none;color:#fff}.mobile-user-pill{display:flex;align-items:center;gap:var(--space-xs);padding:4px 12px 4px 4px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text);transition:all .15s ease}.mobile-user-pill:hover{background:var(--bg-card);border-color:var(--border-hover);text-decoration:none}.mobile-user-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;overflow:hidden;flex-shrink:0}.mobile-user-avatar img{width:100%;height:100%;object-fit:cover}.mobile-user-name{font-size:.8125rem;font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all .15s ease}.menu-toggle:hover{background:var(--bg-card);border-color:var(--border-hover);color:var(--text)}.sidebar-backdrop{display:block;position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:200}.sidebar-backdrop.open{opacity:1;visibility:visible}.sidebar{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:300px;max-width:85vw;padding:var(--space-xl) var(--space-lg);border-right:none;border-left:1px solid var(--border);transform:translate(100%);transition:transform .3s ease;z-index:300;overflow:hidden}.sidebar.open{transform:translate(0)}.sidebar-fixed-top{flex-shrink:0}.sidebar-fixed-top .sidebar-header{margin-bottom:var(--space-lg)}.sidebar-fixed-top h2{margin-top:var(--space-md);margin-bottom:var(--space-sm)}.sidebar .modules{flex:1;overflow-y:auto;margin:0 calc(-1 * var(--space-lg));padding:0 var(--space-lg)}.sidebar .sidebar-footer{flex-shrink:0;margin-top:var(--space-lg);padding-top:var(--space-lg)}.sidebar-header-actions{gap:var(--space-sm)}.menu-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all .15s ease}.menu-close:hover{background:#ef444426;color:#ef4444;border-color:#ef44444d}.sidebar .modules{flex-direction:column;gap:var(--space-xs)}.sidebar .module-link{white-space:normal}.sidebar .module-link span:first-child{display:inline}.sidebar h2{display:block}.main{padding:var(--space-lg)}.main h1{font-size:1.5rem}.card{padding:var(--space-lg)}.lightbox-container{height:95vh;border-radius:var(--radius-lg)}.lightbox-overlay{padding:var(--space-sm)}.hero-banner{flex-direction:column;text-align:center;padding:var(--space-xl)}.hero-logo svg{width:60px;height:60px}.hero-content h1{font-size:1.75rem}.hero-subtitle{font-size:1rem}.home-stats{grid-template-columns:1fr}.stat-card{flex-direction:row;justify-content:space-between;padding:var(--space-md)}.stat-number{font-size:1.5rem}.courses-grid{grid-template-columns:1fr}}@media(max-width:480px){.main{padding:var(--space-md);gap:var(--space-md)}.card{padding:var(--space-md)}}.login-page,.auth-callback{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;padding:var(--space-lg)}.profile-page{display:flex;justify-content:center;align-items:flex-start;padding-top:var(--space-xl)}.login-container,.profile-container{width:100%;max-width:400px}.login-container h1,.profile-container h1{margin:0 0 var(--space-xl);font-size:1.75rem;text-align:center}.form-group{margin-bottom:var(--space-md)}.form-group label{display:block;margin-bottom:var(--space-xs);font-size:.9rem;font-weight:500;color:var(--text-muted)}.form-group input{width:100%;padding:var(--space-md);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:inherit;font-size:1rem;transition:all .15s ease}.form-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.form-group input::placeholder{color:var(--text-soft)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .15s ease;text-decoration:none}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{width:100%;background:var(--accent);color:var(--bg);border:none}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-danger{background:#ef444426;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.btn-danger:hover:not(:disabled){background:#ef444440}.btn-secondary{background:var(--bg-elevated);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-card);border-color:var(--border-hover)}.divider{display:flex;align-items:center;margin:var(--space-xl) 0;color:var(--text-soft);font-size:.85rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.divider span{padding:0 var(--space-md)}.oauth-buttons{display:flex;flex-direction:column;gap:var(--space-sm)}.btn-oauth{width:100%;background:var(--bg-elevated);color:var(--text);border:1px solid var(--border)}.btn-oauth:hover:not(:disabled){background:var(--bg);border-color:var(--border-hover)}.btn-oauth svg{flex-shrink:0}.toggle-mode{margin-top:var(--space-xl);text-align:center;font-size:.9rem;color:var(--text-muted)}.link-button{background:none;border:none;color:var(--accent);font-family:inherit;font-size:inherit;font-weight:500;cursor:pointer;padding:0}.link-button:hover{text-decoration:underline}.error-message{padding:var(--space-md);margin-bottom:var(--space-md);background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#ef4444;font-size:.9rem}.success-message{padding:var(--space-md);margin-bottom:var(--space-md);background:var(--success-soft);border:1px solid rgba(34,197,94,.3);border-radius:var(--radius-md);color:var(--success);font-size:.9rem}.profile-info{display:flex;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl);padding:var(--space-lg);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border)}.avatar{width:60px;height:60px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;flex-shrink:0;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.user-details{flex:1;min-width:0}.user-email{margin:0;font-size:1rem;font-weight:500;color:var(--text);word-break:break-all}.sync-status{margin:var(--space-xs) 0 0;font-size:.85rem;color:var(--accent)}.profile-container hr{margin:var(--space-xl) 0;border:none;border-top:1px solid var(--border)}.danger-zone h2{margin:0 0 var(--space-sm);font-size:1rem;color:#ef4444}.danger-zone p{margin:0 0 var(--space-md);font-size:.9rem;color:var(--text-muted)}.account-section h2{margin:0 0 var(--space-sm);font-size:1rem;color:var(--text)}.account-section p{margin:0 0 var(--space-md);font-size:.9rem;color:var(--text-muted)}.confirm-reset{padding:var(--space-md);background:#ef444414;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md)}.confirm-warning{margin:0 0 var(--space-md);font-size:.9rem;font-weight:500;color:#ef4444}.confirm-actions{display:flex;gap:var(--space-sm)}.confirm-actions .btn{flex:1}.auth-callback{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;background:var(--bg)}.loading-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);padding:var(--space-2xl);text-align:center}.spinner{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-container p{margin:0;font-size:1.1rem;color:var(--text-muted)}.sidebar-footer{margin-top:auto;padding-top:var(--space-lg);border-top:1px solid var(--border)}.user-menu{display:flex;flex-direction:row;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--bg-elevated);border-radius:var(--radius-md)}.user-menu-divider{width:1px;height:24px;background:var(--border);margin-left:auto}.theme-toggle-wrapper{display:flex;align-items:center;justify-content:center;margin-left:auto}.user-menu-link{display:flex;align-items:center;gap:var(--space-sm);padding:0;font-size:.9rem;font-weight:500;color:var(--text);text-decoration:none;transition:all .15s ease;position:relative;z-index:10}.user-menu-link:hover{color:var(--text);text-decoration:none}.user-menu-link.active{color:var(--text)}.user-menu-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;overflow:hidden}.user-menu-avatar img{width:100%;height:100%;object-fit:cover}