@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:300;src:url(/assets/inter-latin-300-normal-BVlfKGgI.woff2) format("woff2"),url(/assets/inter-latin-300-normal-i8F0SvXL.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/inter-latin-400-normal-C38fXH4l.woff2) format("woff2"),url(/assets/inter-latin-400-normal-CyCys3Eg.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/inter-latin-500-normal-Cerq10X2.woff2) format("woff2"),url(/assets/inter-latin-500-normal-BL9OpVg8.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/inter-latin-600-normal-LgqL8muc.woff2) format("woff2"),url(/assets/inter-latin-600-normal-CiBQ2DWP.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/inter-latin-700-normal-Yt3aPRUw.woff2) format("woff2"),url(/assets/inter-latin-700-normal-BLAVimhd.woff) format("woff")}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: rgba(255, 255, 255, .04);--bg-glass: rgba(255, 255, 255, .06);--bg-glass-hover: rgba(255, 255, 255, .1);--text-primary: #e8e8ed;--text-secondary: #9ca3af;--text-muted: #6b7280;--accent-primary: #6366f1;--accent-secondary: #8b5cf6;--accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);--accent-glow: rgba(99, 102, 241, .3);--success: #22c55e;--success-bg: rgba(34, 197, 94, .1);--warning: #f59e0b;--warning-bg: rgba(245, 158, 11, .1);--error: #ef4444;--border-color: rgba(255, 255, 255, .08);--decode-es-bg: rgba(99, 102, 241, .12);--decode-es-border: rgba(99, 102, 241, .3);--decode-de-color: #a5b4fc;--decode-highlight: rgba(245, 158, 11, .25);--decode-highlight-border: rgba(245, 158, 11, .6);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-card: 0 4px 24px rgba(0, 0, 0, .3);--shadow-glass: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glow: 0 0 30px var(--accent-glow);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--transition-fast: all .15s ease}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:#0a0a0fcc;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);padding:var(--space-sm) var(--space-lg)}.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;min-height:56px}.nav-logo{font-size:var(--font-size-xl);font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;cursor:pointer}.nav-logo-img{height:100px;width:auto;border-radius:12px;object-fit:contain}.nav-links{display:flex;gap:var(--space-xs)}.nav-link{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);font-size:var(--font-size-sm);font-weight:500;border:none;background:none}.nav-link:hover,.nav-link.active{color:var(--text-primary);background:var(--bg-glass-hover)}.nav-link.active{color:var(--accent-primary)}.main{padding-top:130px;padding-bottom:var(--space-2xl);max-width:900px;margin:0 auto;padding-left:var(--space-lg);padding-right:var(--space-lg)}.card{background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-card);transition:var(--transition)}.card:hover{border-color:#ffffff1f;box-shadow:var(--shadow-glass)}.card-clickable{cursor:pointer}.card-clickable:hover{transform:translateY(-2px)}.decode-container{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-lg);align-items:flex-start}.decode-box{display:flex;flex-direction:column;align-items:center;background:var(--decode-es-bg);border:1px solid var(--decode-es-border);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);transition:var(--transition);min-width:60px}.decode-box.highlighted{background:var(--decode-highlight);border-color:var(--decode-highlight-border);box-shadow:0 0 16px #f59e0b33;transform:scale(1.05)}.decode-box .es{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);white-space:nowrap}.decode-box .de{font-size:var(--font-size-sm);color:var(--decode-de-color);font-weight:400;white-space:nowrap;margin-top:2px;opacity:.85}.decode-box .de.hidden{opacity:0;-webkit-user-select:none;user-select:none}.sentence-row{margin-bottom:var(--space-lg);border-radius:var(--radius-md);background:var(--bg-card);overflow:hidden}.sentence-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent-gradient);color:#fff;font-size:var(--font-size-xs);font-weight:700;margin:var(--space-md) 0 0 var(--space-md)}.audio-player{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--bg-secondary);border-radius:var(--radius-md);margin-top:var(--space-md)}.play-btn{width:48px;height:48px;border-radius:50%;background:var(--accent-gradient);border:none;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}.play-btn:hover{transform:scale(1.08);box-shadow:var(--shadow-glow)}.audio-progress{flex:1;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;cursor:pointer}.audio-progress-bar{height:100%;background:var(--accent-gradient);border-radius:2px;transition:width .1s linear;width:0%}.speed-control{font-size:var(--font-size-xs);color:var(--text-muted);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);background:var(--bg-glass);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:var(--transition-fast);min-width:40px;text-align:center}.speed-control:hover{background:var(--bg-glass-hover);color:var(--text-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-xl);border-radius:var(--radius-sm);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:var(--transition);border:none;text-decoration:none}.btn-primary{background:var(--accent-gradient);color:#fff}.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-secondary{background:var(--bg-glass);color:var(--text-primary);border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:var(--bg-glass-hover)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover{color:var(--text-primary);background:var(--bg-glass)}.btn-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}.input{width:100%;padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-base);transition:var(--transition-fast)}.input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.input::placeholder{color:var(--text-muted)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md)}.stat-card{text-align:center;padding:var(--space-lg)}.stat-value{font-size:var(--font-size-3xl);font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.stat-label{font-size:var(--font-size-sm);color:var(--text-muted);margin-top:var(--space-xs)}.progress-bar-container{width:100%;height:8px;background:#ffffff0f;border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--accent-gradient);border-radius:4px;transition:width .5s ease}.streak-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--warning-bg);border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-xl);color:var(--warning);font-size:var(--font-size-sm);font-weight:600}.lesson-list{display:flex;flex-direction:column;gap:var(--space-md)}.lesson-item{display:flex;align-items:center;gap:var(--space-lg)}.lesson-emoji{font-size:2rem;flex-shrink:0}.lesson-info{flex:1}.lesson-title{font-size:var(--font-size-lg);font-weight:600}.lesson-desc{font-size:var(--font-size-sm);color:var(--text-secondary)}.lesson-difficulty{display:flex;gap:2px}.difficulty-dot{width:8px;height:8px;border-radius:50%;background:#ffffff1a}.difficulty-dot.active{background:var(--accent-primary)}.phase-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-xl);padding:var(--space-xs);background:var(--bg-secondary);border-radius:var(--radius-md)}.phase-tab{flex:1;padding:var(--space-sm);text-align:center;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:500;color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);border:none;background:none}.phase-tab.active{background:var(--accent-gradient);color:#fff}.phase-tab:hover:not(.active){color:var(--text-secondary);background:var(--bg-glass)}.auth-container{max-width:400px;margin:var(--space-2xl) auto}.auth-form{display:flex;flex-direction:column;gap:var(--space-md)}.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}.form-label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:500}h1{font-size:var(--font-size-3xl);font-weight:700;margin-bottom:var(--space-md)}h2{font-size:var(--font-size-2xl);font-weight:600;margin-bottom:var(--space-md)}h3{font-size:var(--font-size-xl);font-weight:600;margin-bottom:var(--space-sm)}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-accent{color:var(--accent-primary)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.w-full{width:100%}.hidden{display:none!important}.music-track-list{display:flex;flex-direction:column;gap:var(--space-md)}.music-track-card{cursor:pointer;padding:var(--space-md) var(--space-lg)}.music-track-card:hover{transform:translateY(-2px);border-color:var(--accent-primary)}.music-track-title{font-size:var(--font-size-lg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-track-artist{font-size:var(--font-size-sm);color:var(--text-muted)}.music-track-status{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-xs);color:var(--text-secondary);white-space:nowrap}.music-status-text{display:inline}.music-track-actions{display:flex;gap:2px}.play-btn-sm{width:36px;height:36px;font-size:.9rem;flex-shrink:0}.music-file-drop{border:2px dashed rgba(255,255,255,.15);border-radius:var(--radius-md);padding:var(--space-xl);text-align:center;cursor:pointer;transition:var(--transition);background:var(--bg-card)}.music-file-drop:hover,.music-file-drop.drag-over{border-color:var(--accent-primary);background:var(--decode-es-bg)}.file-drop-content p{color:var(--text-muted);margin-top:var(--space-sm);font-size:var(--font-size-sm)}.music-lyrics-input{resize:vertical;min-height:150px;font-family:var(--font-family);line-height:1.8}.karaoke-line{transition:all .3s ease}.karaoke-line.karaoke-active{background:var(--decode-highlight);border-left:3px solid var(--warning);box-shadow:0 0 20px #f59e0b26}.karaoke-line.karaoke-active .decode-box{transform:scale(1.02)}.sentence-row.karaoke-active{background:var(--decode-highlight);border-left:3px solid var(--warning);box-shadow:0 0 20px #f59e0b26;border-radius:var(--radius);transition:all .3s ease}.decode-box.word-active{background:var(--accent-primary)!important;border-color:var(--accent-primary)!important;transform:scale(1.08);box-shadow:0 0 12px #7c3aed66}.decode-box.word-active .es{color:#fff}.music-decode-spinner{font-size:3rem;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.music-loop-player{border:1px solid rgba(99,102,241,.2);background:#6366f10d}.loop-toggle{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;font-size:var(--font-size-sm);color:var(--text-secondary)}.loop-toggle input[type=checkbox]{accent-color:var(--accent-primary);width:16px;height:16px}.loop-label{-webkit-user-select:none;user-select:none}@media(max-width:640px){:root{--font-size-3xl: 1.8rem;--font-size-2xl: 1.4rem}.main{padding-left:var(--space-md);padding-right:var(--space-md)}.nav-links{gap:0}.nav-link{padding:var(--space-sm) var(--space-sm);font-size:var(--font-size-xs)}.decode-container{padding:var(--space-md);gap:var(--space-xs)}.decode-box{padding:var(--space-xs) var(--space-sm);min-width:45px}.decode-box .es{font-size:var(--font-size-base)}.decode-box .de{font-size:var(--font-size-xs)}.stats-grid{grid-template-columns:repeat(2,1fr)}.phase-tabs,.music-track-card .flex{flex-wrap:wrap}.music-status-text{display:none}.music-track-actions{flex-wrap:nowrap}}