@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#12121acc;--text-primary:#fff;--text-secondary:#a0a0b0;--text-muted:#6b6b7b;--accent:#6366f1;--accent-light:#818cf8;--accent-glow:#6366f14d;--highlight:#fbbf24;--highlight-glow:#fbbf244d;--success:#22c55e;--border:#ffffff14;--glass:#ffffff0d}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow-x:hidden}.app-container{flex-direction:column;min-height:100vh;display:flex;position:relative}.background-layer{z-index:0;position:fixed;inset:0;overflow:hidden}.background-gradient{background:radial-gradient(ellipse 80% 50% at 50% -20%, #6366f126 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 100%, #8b5cf61a 0%, transparent 50%), linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);width:100%;height:100%;position:absolute}.background-pattern{opacity:.03;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");width:100%;height:100%;position:absolute}.floating-orb{filter:blur(60px);border-radius:50%;animation:20s ease-in-out infinite float;position:absolute}.floating-orb-1{background:#6366f11a;width:400px;height:400px;animation-delay:0s;top:-100px;right:-100px}.floating-orb-2{background:#8b5cf614;width:300px;height:300px;animation-delay:-5s;bottom:-50px;left:-50px}@keyframes float{0%,to{transform:translate(0)scale(1)}25%{transform:translate(30px,-30px)scale(1.05)}50%{transform:translate(-20px,20px)scale(.95)}75%{transform:translate(20px,10px)scale(1.02)}}.main-content{z-index:1;flex-direction:column;flex:1;display:flex;position:relative}.top-nav{z-index:100;background:linear-gradient(180deg, var(--bg-primary) 0%, transparent 100%);justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:sticky;top:0}.nav-brand{align-items:center;gap:12px;display:flex}.nav-logo{background:linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;display:flex}.nav-title{background:linear-gradient(90deg, var(--text-primary) 0%, var(--text-secondary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:18px;font-weight:600}.episode-title-nav{color:var(--text-muted);border-left:1px solid var(--border);margin-left:12px;padding-left:12px;font-size:14px}.nav-actions{align-items:center;gap:12px;display:flex}.nav-btn{background:var(--glass);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;transition:all .2s;display:flex}.nav-btn:hover,.nav-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.difficulty-bar{background:var(--bg-card);border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 24px;display:flex}.difficulty-info{align-items:center;gap:20px;display:flex}.difficulty-badge{background:#6366f126;border-radius:20px;align-items:center;gap:8px;padding:6px 14px;font-size:13px;font-weight:500;display:flex}.difficulty-badge .level{color:var(--accent-light)}.word-count{color:var(--text-secondary);align-items:center;gap:6px;font-size:13px;display:flex}.font-controls{align-items:center;gap:8px;display:flex}.font-btn{background:var(--glass);border:1px solid var(--border);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;border-radius:8px;font-size:16px;transition:all .2s}.font-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.video-section{padding:24px;position:relative}.video-wrapper{background:var(--bg-card);border:1px solid var(--border);max-width:1000px;box-shadow:0 0 0 1px var(--border), 0 20px 50px #00000080;border-radius:16px;margin:0 auto;position:relative;overflow:hidden}.video-container{aspect-ratio:16/9;background:#000;width:100%;position:relative}.video-placeholder{background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-placeholder-icon{opacity:.5;margin-bottom:16px;font-size:64px}.video-placeholder-text{color:var(--text-muted);font-size:16px}.video-player{-o-object-fit:contain;object-fit:contain;width:100%;height:100%}.video-controls{opacity:0;background:linear-gradient(#0000,#000000e6);padding:16px;transition:opacity .3s;position:absolute;bottom:0;left:0;right:0}.video-wrapper:hover .video-controls{opacity:1}.progress-bar-wrapper{margin-bottom:12px}.progress-bar{cursor:pointer;background:#fff3;border-radius:2px;height:4px;transition:height .2s}.progress-bar:hover{height:6px}.progress-fill{background:linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);border-radius:2px;height:100%;position:relative}.progress-fill:after{content:"";width:12px;height:12px;box-shadow:0 0 10px var(--accent-glow);background:#fff;border-radius:50%;position:absolute;top:50%;right:-6px;transform:translateY(-50%)}.control-buttons{justify-content:space-between;align-items:center;display:flex}.control-left,.control-center,.control-right{align-items:center;gap:12px;display:flex}.ctrl-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;transition:all .2s;display:flex}.ctrl-btn:hover{background:var(--accent);transform:scale(1.1)}.ctrl-btn.play-btn{background:var(--accent);width:56px;height:56px;font-size:24px}.time-display{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:13px}.speed-selector{background:#ffffff1a;border-radius:8px;align-items:center;gap:4px;padding:4px;display:flex}.speed-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 10px;font-size:12px;transition:all .2s}.speed-btn:hover{color:#fff}.speed-btn.active{background:var(--accent);color:#fff}.subtitle-section{flex:1;width:100%;max-width:1000px;margin:0 auto;padding:24px}.current-subtitle{background:var(--bg-card);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;margin-bottom:24px;padding:32px;position:relative;overflow:hidden}.current-subtitle:before{content:"";background:linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);height:3px;position:absolute;top:0;left:0;right:0}.subtitle-english{text-align:center;min-height:60px;margin-bottom:16px;font-size:24px;line-height:1.8}.subtitle-word{cursor:pointer;border-radius:4px;padding:2px 4px;transition:all .3s;display:inline}.subtitle-word:hover{background:#6366f133}.subtitle-word.active{background:linear-gradient(135deg, var(--highlight) 0%, #f59e0b 100%);color:var(--bg-primary);box-shadow:0 0 20px var(--highlight-glow);font-weight:600}.subtitle-word.spoken{color:var(--accent-light)}.subtitle-chinese{text-align:center;color:var(--text-secondary);border-top:1px solid var(--border);padding-top:16px;font-size:18px;line-height:1.6}.subtitle-actions{justify-content:center;gap:12px;margin-top:20px;display:flex}.subtitle-action-btn{background:var(--glass);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:10px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;transition:all .2s;display:flex}.subtitle-action-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.subtitle-list{background:var(--bg-card);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;overflow:hidden}.subtitle-list-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.subtitle-list-title{font-size:16px;font-weight:600}.subtitle-list-toggle{background:var(--glass);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:12px}.subtitle-list-content{max-height:400px;overflow-y:auto}.subtitle-list-item{border-bottom:1px solid var(--border);cursor:pointer;padding:16px 20px;transition:all .2s}.subtitle-list-item:last-child{border-bottom:none}.subtitle-list-item:hover{background:#6366f10d}.subtitle-list-item.active{border-left:3px solid var(--accent);background:#6366f11a}.subtitle-item-time{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-bottom:6px;font-size:12px}.subtitle-item-en{margin-bottom:4px;font-size:14px;line-height:1.5}.subtitle-item-zh{color:var(--text-secondary);font-size:13px}.subtitle-item-header{align-items:center;gap:12px;margin-bottom:8px;display:flex}.subtitle-item-number{color:var(--accent-light);text-align:center;background:#6366f126;border-radius:4px;min-width:36px;padding:2px 8px;font-size:12px;font-weight:600}.subtitle-item-time{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:12px}.dictation-btn{color:var(--highlight);cursor:pointer;background:#fbbf2426;border:1px solid #fbbf244d;border-radius:6px;margin-left:auto;padding:4px 10px;font-size:12px;transition:all .2s}.dictation-btn:hover{background:var(--highlight);color:var(--bg-primary);border-color:var(--highlight)}.subtitle-list-item.dictation-mode{border-left:3px solid var(--accent);background:#6366f11a}.dictation-content{padding-top:8px}.dictation-words{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.dictation-word-wrapper{flex-direction:column;align-items:center;gap:2px;display:inline-flex}.dictation-input{background:var(--glass);border:1px solid var(--border);border-bottom:2px solid var(--accent);color:var(--text-primary);text-align:center;border-radius:4px 4px 0 0;outline:none;padding:6px 8px;font-size:14px;transition:all .2s}.dictation-input:focus{border-color:var(--accent-light);background:#6366f11a}.dictation-input.correct{border-color:var(--success);color:var(--success);background:#22c55e1a}.dictation-input.wrong{color:#ef4444;background:#ef44441a;border-color:#ef4444;text-decoration:line-through}.dictation-correct-word{color:var(--success);font-size:12px;font-weight:500}.dictation-actions{justify-content:center;gap:8px;margin-bottom:12px;display:flex}.dictation-action-btn{background:var(--glass);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:8px;padding:8px 16px;font-size:13px;transition:all .2s}.dictation-action-btn:hover,.dictation-action-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.dictation-action-btn.primary:hover{background:var(--accent-light)}.dictation-result{text-align:center;color:var(--accent-light);background:#6366f11a;border-radius:8px;padding:8px 12px;font-size:14px;font-weight:500}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000c;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-secondary);border:1px solid var(--border);border-radius:20px;width:90%;max-width:450px;max-height:80vh;padding:28px;animation:.3s slideUp;position:relative;overflow-y:auto}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-close{background:var(--glass);border:1px solid var(--border);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;border-radius:8px;font-size:20px;transition:all .2s;position:absolute;top:16px;right:16px}.modal-close:hover{color:#fff;background:#ef4444;border-color:#ef4444}.modal-word{background:linear-gradient(90deg, var(--highlight) 0%, #f59e0b 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:28px;font-weight:700}.modal-phonetic{color:var(--accent-light);margin-bottom:16px;font-size:16px;font-style:italic}.modal-translation{color:var(--text-primary);border-left:3px solid var(--accent);background:#6366f11a;border-radius:10px;margin-bottom:20px;padding:12px 16px;font-size:18px}.modal-section{margin-bottom:20px}.modal-section-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font-size:12px;font-weight:600}.modal-section-content{list-style:none}.modal-section-content li{background:var(--glass);border-radius:8px;margin-bottom:6px;padding:10px 14px;font-size:14px;line-height:1.5}.modal-btn{background:linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px;font-size:15px;font-weight:600;transition:all .2s;display:flex}.modal-btn:hover{box-shadow:0 10px 30px var(--accent-glow);transform:translateY(-2px)}.floating-video{z-index:1000;background:#000;border:2px solid #6366f14d;border-radius:12px;position:fixed;overflow:hidden;box-shadow:0 25px 50px #0009}.floating-video.dragging{cursor:grabbing;border-color:var(--accent)}.floating-drag-bar{cursor:grab;z-index:30;opacity:0;background:linear-gradient(#000000e6,#00000080);justify-content:space-between;align-items:center;height:36px;padding:0 10px;transition:opacity .3s;display:flex;position:absolute;top:0;left:0;right:0}.floating-video:hover .floating-drag-bar,.floating-video.paused .floating-drag-bar{opacity:1}.floating-video.dragging .floating-drag-bar{cursor:grabbing;background:linear-gradient(#6366f14d,#00000080)}.floating-drag-area{cursor:grab;flex:1;align-items:center;gap:8px;height:100%;display:flex}.floating-drag-area span{color:#ffffffb3;-webkit-user-select:none;user-select:none;font-size:12px}.floating-controls-right{z-index:35;gap:4px;display:flex}.floating-btn{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;font-size:13px;transition:all .2s;display:flex}.floating-btn:hover{background:var(--accent)}.floating-btn.close:hover{background:#ef4444}.floating-video video{cursor:pointer;background:#000;width:100%;height:100%;display:block}.floating-subtitle{text-align:center;z-index:20;pointer-events:none;background:#000000e6;border-radius:8px;padding:8px 12px;position:absolute;bottom:55px;left:8px;right:8px}.floating-subtitle-text{color:#fff;font-size:13px;line-height:1.5}.floating-subtitle-text .highlight{color:var(--highlight);font-weight:700}.floating-subtitle-translation{color:#ffffffb3;margin-top:4px;font-size:11px}.resize-handle{cursor:nwse-resize;z-index:35;background:linear-gradient(135deg,#0000 50%,#ffffff80 50%);border-radius:0 0 10px;width:24px;height:24px;position:absolute;bottom:0;right:0}.resize-handle:hover{background:linear-gradient(135deg, transparent 50%, var(--accent) 50%)}.floating-bottom-bar{z-index:30;opacity:0;background:linear-gradient(#0009,#000000f2);justify-content:space-between;align-items:center;height:40px;padding:0 12px;transition:opacity .3s;display:flex;position:absolute;bottom:0;left:0;right:0}.floating-video:hover .floating-bottom-bar,.floating-video.paused .floating-bottom-bar{opacity:1}.floating-time{color:#fffc;font-variant-numeric:tabular-nums;min-width:80px;font-size:11px}.floating-play-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;transition:all .2s;display:flex}.floating-play-btn:hover{box-shadow:0 0 15px var(--accent-glow);transform:scale(1.1)}.vocabulary-page{max-width:1200px;margin:0 auto;padding:24px}.vocabulary-header{margin-bottom:24px}.vocabulary-title{margin-bottom:8px;font-size:28px;font-weight:700}.vocabulary-subtitle{color:var(--text-secondary)}.vocabulary-stats{gap:24px;margin-top:16px;display:flex}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px 24px}.stat-value{color:var(--accent-light);font-size:28px;font-weight:700}.stat-label{color:var(--text-muted);margin-top:4px;font-size:13px}.vocabulary-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.vocab-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;transition:all .2s}.vocab-card:hover{border-color:var(--accent);transform:translateY(-2px)}.vocab-word{margin-bottom:4px;font-size:20px;font-weight:600}.vocab-phonetic{color:var(--accent-light);margin-bottom:8px;font-size:14px;font-style:italic}.vocab-translation{color:var(--text-primary);margin-bottom:12px;font-size:15px}.vocab-progress{color:var(--text-muted);align-items:center;gap:8px;font-size:12px;display:flex}.vocab-actions{gap:8px;margin-top:12px;display:flex}.vocab-action-btn{background:var(--glass);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:6px;flex:1;padding:8px;font-size:12px;transition:all .2s}.vocab-action-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}@media (width<=768px){.top-nav{padding:12px 16px}.difficulty-bar{flex-direction:column;gap:10px;padding:10px 16px}.video-section,.subtitle-section{padding:16px}.current-subtitle{padding:20px}.subtitle-english{font-size:18px}.subtitle-chinese{font-size:15px}.subtitle-actions{flex-direction:column}.subtitle-action-btn{justify-content:center;width:100%}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.course-list-page,.episode-page,.admin-page,.login-page{background:var(--bg-primary);min-height:100vh;color:var(--text-primary)}.course-page-loading{background:var(--bg-primary);min-height:100vh;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.loading-spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.course-nav{z-index:100;background:linear-gradient(180deg, var(--bg-primary) 0%, transparent 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:sticky;top:0}.back-link{color:var(--text-secondary);margin-right:16px;font-size:14px;text-decoration:none;transition:color .2s}.back-link:hover{color:var(--accent-light)}.user-info{align-items:center;gap:12px;display:flex}.user-name{color:var(--text-secondary);font-size:14px}.admin-badge{color:var(--highlight);background:#fbbf2433;border-radius:4px;padding:4px 8px;font-size:12px}.course-content{z-index:1;max-width:1200px;margin:0 auto;padding:24px;position:relative}.course-header{text-align:center;margin-bottom:40px}.course-main-title{background:linear-gradient(90deg, var(--text-primary) 0%, var(--accent-light) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:32px;font-weight:700}.course-subtitle{color:var(--text-secondary);font-size:16px}.admin-actions{text-align:right;margin-bottom:24px}.admin-btn{background:linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);color:#fff;border-radius:10px;align-items:center;gap:8px;padding:12px 24px;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.admin-btn:hover{box-shadow:0 10px 30px var(--accent-glow);transform:translateY(-2px)}.courses-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;display:grid}.course-card{z-index:1;border:1px solid var(--border);color:inherit;background:#12121af2;border-radius:16px;text-decoration:none;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000004d}.course-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 20px 40px #0000004d}.course-cover{aspect-ratio:16/9;background:var(--bg-secondary);position:relative;overflow:hidden}.course-cover img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.course-cover-placeholder{background:linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.course-cover-placeholder span{color:#fff;opacity:.5;font-size:64px;font-weight:700}.course-cover-placeholder.large span{font-size:96px}.difficulty-tag{color:#fff;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600;position:absolute;top:12px;right:12px}.course-info{padding:20px}.course-title{margin-bottom:8px;font-size:18px;font-weight:600}.course-description{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:12px;font-size:14px;line-height:1.5;display:-webkit-box;overflow:hidden}.course-meta{color:var(--text-muted);gap:16px;margin-bottom:12px;font-size:13px;display:flex}.course-progress{border-top:1px solid var(--border);padding-top:12px}.progress-bar{background:var(--glass);border-radius:3px;height:6px;margin-bottom:6px;overflow:hidden}.progress-bar.large{height:8px}.progress-fill{background:linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);border-radius:3px;height:100%;transition:width .3s}.progress-text{color:var(--text-muted);font-size:12px}.progress-text.not-started{color:var(--text-muted)}.empty-courses,.empty-episodes{text-align:center;color:var(--text-muted);padding:60px 20px}.empty-icon{margin-bottom:16px;font-size:64px}.upload-link{background:var(--accent);color:#fff;border-radius:8px;margin-top:16px;padding:10px 20px;text-decoration:none;transition:all .2s;display:inline-block}.upload-link:hover{background:var(--accent-light)}.course-hero{z-index:1;border:1px solid var(--border);background:#12121af2;border-radius:20px;gap:32px;max-width:1200px;margin:0 auto 40px;padding:24px;display:flex;position:relative;box-shadow:0 20px 50px #00000080}.course-hero-cover{border-radius:12px;flex-shrink:0;width:240px;overflow:hidden}.course-hero-cover img{width:100%;height:auto}.course-hero-info{flex:1}.course-hero-title{margin-bottom:12px;font-size:28px;font-weight:700}.course-hero-description{color:var(--text-secondary);margin-bottom:20px;line-height:1.6}.course-hero-meta{gap:32px;margin-bottom:20px;display:flex}.meta-item{flex-direction:column;gap:4px;display:flex}.meta-label{color:var(--text-muted);font-size:12px}.meta-value{font-size:18px;font-weight:600}.meta-value.difficulty{color:var(--accent-light)}.course-hero-progress{background:var(--glass);border-radius:10px;align-items:center;gap:16px;padding:16px;display:flex}.episode-list-section{z-index:1;max-width:1200px;margin:0 auto;padding:0 24px 60px;position:relative}.section-title{border-left:3px solid var(--accent);margin-bottom:20px;padding-left:12px;font-size:20px;font-weight:600}.episode-list{flex-direction:column;gap:12px;display:flex}.episode-item{border:1px solid var(--border);background:#12121af2;border-radius:12px;align-items:center;gap:20px;padding:20px 24px;transition:all .2s;display:flex;box-shadow:0 10px 30px #0000004d}.episode-item:hover{border-color:var(--accent)}.episode-item.completed{border-left:3px solid var(--success)}.episode-number{color:var(--accent-light);text-align:center;background:#6366f126;border-radius:8px;min-width:70px;padding:8px 12px;font-size:14px;font-weight:600}.episode-info{flex:1}.episode-title{margin-bottom:4px;font-size:16px;font-weight:600}.episode-subtitle{color:var(--text-secondary);margin-bottom:8px;font-size:13px}.episode-meta{color:var(--text-muted);gap:16px;font-size:12px;display:flex}.episode-status{text-align:center;min-width:80px}.status-completed{color:var(--success);font-weight:500}.status-progress{color:var(--highlight)}.status-new{color:var(--text-muted)}.episode-start-btn{background:linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:10px 24px;font-weight:500;transition:all .2s}.episode-start-btn:hover{box-shadow:0 8px 20px var(--accent-glow);transform:translateY(-2px)}.login-container{z-index:1;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex;position:relative}.login-card{z-index:10;border:1px solid var(--border);background:#12121af2;border-radius:20px;width:100%;max-width:400px;padding:32px;position:relative;box-shadow:0 20px 50px #00000080}.login-header{text-align:center;margin-bottom:32px}.login-logo{margin-bottom:16px;font-size:48px}.login-title{margin-bottom:8px;font-size:24px;font-weight:700}.login-subtitle{color:var(--text-secondary);font-size:14px}.login-form{flex-direction:column;gap:20px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:var(--text-secondary);font-size:14px;font-weight:500}.form-group input,.form-group select,.form-group textarea{background:var(--glass);border:1px solid var(--border);color:var(--text-primary);border-radius:10px;padding:12px 16px;font-size:15px;transition:all .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);background:#6366f11a;outline:none}.form-hint{color:var(--text-muted);margin-top:4px;font-size:12px}.login-error{color:#ef4444;background:#ef44441a;border:1px solid #ef44444d;border-radius:8px;padding:12px 16px;font-size:14px}.login-btn,.submit-btn{background:linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:14px;font-size:16px;font-weight:600;transition:all .2s}.login-btn:hover,.submit-btn:hover{box-shadow:0 10px 30px var(--accent-glow);transform:translateY(-2px)}.login-btn:disabled,.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-footer{text-align:center;color:var(--text-secondary);margin-top:24px;font-size:14px}.switch-btn{color:var(--accent-light);cursor:pointer;background:0 0;border:none;font-size:14px}.switch-btn:hover{text-decoration:underline}.login-hint{background:var(--glass);color:var(--text-muted);text-align:center;border-radius:10px;margin-top:24px;padding:16px;font-size:12px}.login-hint p{margin:4px 0}.back-home{text-align:center;color:var(--text-secondary);margin-top:24px;font-size:14px;text-decoration:none;display:block}.admin-content{z-index:1;max-width:600px;margin:0 auto;padding:24px;position:relative}.admin-card{z-index:10;border:1px solid var(--border);background:#12121af2;border-radius:20px;padding:32px;position:relative;box-shadow:0 20px 50px #00000080}.admin-title{text-align:center;margin-bottom:32px;font-size:24px;font-weight:700}.admin-form{flex-direction:column;gap:24px;display:flex}.upload-progress{border:1px solid var(--accent);text-align:center;color:var(--accent-light);background:#6366f11a;border-radius:10px;margin-top:24px;padding:16px}@media (width<=768px){.course-hero{text-align:center;flex-direction:column;align-items:center}.course-hero-cover{width:100%;max-width:300px}.course-hero-meta{justify-content:center}.episode-item{text-align:center;flex-direction:column;gap:12px}.episode-status{min-width:auto}.courses-grid{grid-template-columns:1fr}}.statistics-page{background:var(--bg-primary);min-height:100vh;color:var(--text-primary)}.stats-content{z-index:1;max-width:1200px;margin:0 auto;padding:24px;position:relative}.stats-overview{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px;display:grid}.stat-card-large{z-index:10;border:1px solid var(--border);background:#12121af2;border-radius:16px;align-items:center;gap:16px;padding:24px;display:flex;position:relative;box-shadow:0 10px 30px #0000004d}.stat-icon{font-size:40px}.stat-value-large{color:var(--accent-light);font-size:28px;font-weight:700}.stat-label-large{color:var(--text-secondary);margin-top:4px;font-size:14px}.stats-card{z-index:10;border:1px solid var(--border);background:#12121af2;border-radius:16px;margin-bottom:24px;padding:24px;position:relative;box-shadow:0 10px 30px #0000004d}.stats-card.half{flex:1}.stats-card-title{border-bottom:1px solid var(--border);margin-bottom:20px;padding-bottom:12px;font-size:18px;font-weight:600}.stats-row{gap:24px;display:flex}.empty-chart{text-align:center;color:var(--text-muted);padding:40px 20px}.empty-chart .hint{margin-top:8px;font-size:12px}.vocab-stats-detail{border-top:1px solid var(--border);justify-content:space-around;padding-top:16px;display:flex}.vocab-stat-item{text-align:center}.vocab-stat-label{color:var(--text-muted);font-size:12px}.vocab-stat-value{color:var(--text-primary);font-size:24px;font-weight:600}.vocab-stat-value.mastered{color:var(--success)}.dictation-stats{justify-content:space-around;padding:20px 0;display:flex}.dictation-stat{text-align:center}.dictation-value{color:var(--accent-light);font-size:36px;font-weight:700}.dictation-label{color:var(--text-secondary);margin-top:8px;font-size:14px}.course-progress-list{flex-direction:column;gap:16px;display:flex}.course-progress-item{background:var(--glass);border-radius:12px;align-items:center;gap:16px;padding:16px;display:flex}.course-progress-info{flex:1;justify-content:space-between;align-items:center;display:flex}.course-progress-title{font-weight:500}.course-progress-episodes{color:var(--text-muted);font-size:13px}.course-progress-bar{background:var(--border);border-radius:4px;width:150px;height:8px;overflow:hidden}.course-progress-fill{background:linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);border-radius:4px;height:100%;transition:width .3s}.course-progress-percent{color:var(--accent-light);text-align:right;min-width:50px;font-size:14px;font-weight:600}.learning-tips{flex-direction:column;gap:12px;display:flex}.tip-item{background:var(--glass);border-left:3px solid var(--accent);border-radius:10px;align-items:center;gap:12px;padding:16px;display:flex}.tip-icon{font-size:20px}@media (width<=768px){.stats-overview{grid-template-columns:repeat(2,1fr)}.stats-row{flex-direction:column}.course-progress-item{text-align:center;flex-direction:column}.course-progress-bar{width:100%}}