:root,[data-theme=light]{--bg: #f8fafc;--card-bg: #ffffff;--header-bg: rgba(255, 255, 255, .9);--text: #1e293b;--text-secondary: #64748b;--border: #e2e8f0;--hover-bg: #f1f5f9;--shadow: rgba(0, 0, 0, .06);--primary: #b5704d;--primary-light: rgba(181, 112, 77, .1);--secondary: #06B6D4;--success: #059669;--success-light: rgba(5, 150, 105, .1);--danger: #DC2626;--danger-light: rgba(220, 38, 38, .1)}[data-theme=dark]{--bg: #0f172a;--card-bg: #1e293b;--header-bg: rgba(15, 23, 42, .95);--text: #f1f5f9;--text-secondary: #94a3b8;--border: #334155;--hover-bg: #1e293b;--shadow: rgba(0, 0, 0, .3);--primary: #c4825f;--primary-light: rgba(196, 130, 95, .15);--secondary: #22D3EE;--success: #34D399;--success-light: rgba(52, 211, 153, .15);--danger: #F87171;--danger-light: rgba(248, 113, 113, .15)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;transition:background-color .3s,color .3s}#root{min-height:100vh}button{font-family:inherit}h1,h2,h3,h4{line-height:1.3}::selection{background:var(--primary);color:#fff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.autoplay-row{display:flex;justify-content:flex-start;margin:.75rem 0}.list-header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}.lesson-header-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}.autoplay-highlight{background:var(--primary-light)!important;outline:2px solid var(--primary);transition:all .3s}.header{background:var(--header-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-top{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;max-width:1200px;margin:0 auto}.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text)}.logo-icon{font-size:1.5rem}.logo-text{font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.lang-selector{display:flex;align-items:center;gap:.4rem}.lang-label{font-size:.8rem;color:var(--text-secondary);white-space:nowrap}.lang-btn{padding:.3rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--card-bg);cursor:pointer;font-size:.85rem;color:var(--text);transition:all .2s}.lang-btn:hover{border-color:var(--primary)}.lang-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.lang-remove{font-size:.6rem;margin-left:.3rem;opacity:.6}.lang-btn.active:hover .lang-remove{opacity:1}.add-lang-wrap{position:relative}.add-lang-btn{font-size:1rem;font-weight:700;padding:.3rem .55rem;color:var(--primary);border-color:var(--primary);background:var(--card-bg)}.add-lang-btn:hover{background:var(--primary);color:#fff}.add-lang-dropdown{position:absolute;top:calc(100% + 4px);right:0;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:200;overflow:hidden;min-width:90px}.add-lang-option{display:flex;align-items:center;gap:.4rem;width:100%;padding:.5rem .8rem;border:none;background:none;cursor:pointer;font-size:.9rem;color:var(--text);transition:background .15s}.add-lang-option:hover{background:var(--primary-light)}.add-lang-option+.add-lang-option{border-top:1px solid var(--border)}.theme-btn{padding:.3rem .5rem;border:1px solid var(--border);border-radius:6px;background:var(--card-bg);cursor:pointer;font-size:1.1rem;transition:all .2s}.theme-btn:hover{border-color:var(--primary)}.nav{display:flex;gap:.25rem;padding:0 1.5rem .5rem;max-width:1200px;margin:0 auto;overflow-x:auto}.nav-link{display:flex;align-items:center;gap:.3rem;padding:.4rem .8rem;border-radius:8px;text-decoration:none;color:var(--text-secondary);font-size:.85rem;white-space:nowrap;transition:all .2s}.nav-link:hover{background:var(--hover-bg);color:var(--text)}.nav-link.active{background:var(--primary-light);color:var(--primary);font-weight:600}.nav-icon{font-size:1rem}@media(max-width:768px){.header-top{flex-direction:column;gap:.5rem;padding:.5rem 1rem}.header-controls{width:100%;justify-content:center}.nav{padding:0 .5rem .5rem;gap:.15rem}.nav-label{display:none}.nav-link{padding:.4rem .6rem}.nav-icon{font-size:1.2rem}}.loading-spinner-container{display:flex;justify-content:center;align-items:center;min-height:40vh}.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app{min-height:100vh;display:flex;flex-direction:column}.main{flex:1}