@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap";.search-bar{display:flex;gap:var(--space-3);width:100%;background:var(--color-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-2xl);padding:var(--space-2);transition:all var(--transition-base)}.search-bar:focus-within{border-color:var(--color-primary);box-shadow:var(--shadow-glow-primary)}.search-input{flex:1;padding:var(--space-4) var(--space-5);font-size:var(--text-base);font-family:var(--font-body);background:transparent;border:none;border-radius:var(--radius-xl);color:var(--color-text-primary);outline:none;transition:all var(--transition-base)}.search-input::placeholder{color:var(--color-text-muted)}.search-input:disabled{opacity:.6;cursor:not-allowed}.search-button{padding:var(--space-4) var(--space-8);font-size:var(--text-base);font-weight:600;font-family:var(--font-body);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;display:flex;align-items:center;gap:var(--space-2)}.search-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px var(--color-primary-glow)}.search-button:active:not(:disabled){transform:translateY(0)}.search-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.search-button.loading:before{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@media (max-width: 640px){.search-bar{flex-direction:column;gap:var(--space-2);padding:var(--space-3)}.search-input{padding:var(--space-4);text-align:center}.search-button{width:100%;justify-content:center;padding:var(--space-4)}}.song-card{position:relative;background:var(--color-surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);overflow:hidden;cursor:pointer;transition:all var(--transition-base);animation:fadeInUp .4s ease-out backwards}.song-card:hover{transform:translateY(-6px);border-color:#6366f14d;box-shadow:0 12px 40px #0006,0 0 20px var(--color-primary-glow)}.song-card:hover .song-card-overlay{opacity:1}.song-card:hover .song-thumbnail img{transform:scale(1.05)}.song-card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,#6366f1e6,#8b5cf6f2);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-base);z-index:10}.sing-button{background:#fff;color:var(--color-primary-dark);border:none;padding:var(--space-4) var(--space-8);border-radius:var(--radius-xl);font-size:var(--text-lg);font-weight:700;font-family:var(--font-display);cursor:pointer;transition:all var(--transition-spring);box-shadow:0 8px 24px #0000004d;display:flex;align-items:center;gap:var(--space-2)}.sing-button:hover{transform:scale(1.08);box-shadow:0 12px 32px #0006}.sing-button:active{transform:scale(1.02)}.song-thumbnail{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:var(--color-bg-tertiary)}.song-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.song-duration{position:absolute;bottom:var(--space-2);right:var(--space-2);background:#000000d9;color:#fff;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;font-variant-numeric:tabular-nums;z-index:5}.song-info{padding:var(--space-4)}.song-title{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--space-2) 0;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.song-channel{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-warning{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);color:var(--color-warning-light);border-radius:var(--radius-md);font-size:var(--text-xs);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--space-1)}.song-badge{position:absolute;top:var(--space-2);left:var(--space-2);background:var(--gradient-primary);color:#fff;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;z-index:5}@media (max-width: 640px){.song-card:hover{transform:none}.song-card-overlay{background:linear-gradient(180deg,transparent 0%,rgba(99,102,241,.95) 60%);opacity:1;align-items:flex-end;padding-bottom:var(--space-4)}.sing-button{padding:var(--space-3) var(--space-6);font-size:var(--text-base)}}.song-suggestions{margin-bottom:var(--space-10)}.category-tabs{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-4);margin-bottom:var(--space-6);scrollbar-width:none;-ms-overflow-style:none;justify-content:center;flex-wrap:wrap}.category-tabs::-webkit-scrollbar{display:none}.category-tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-full);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all .2s;white-space:nowrap}.category-tab:hover{background:#ffffff14;border-color:#ffffff26}.category-tab.active{background:#8b5cf633;border-color:#8b5cf680;color:#a78bfa}.tab-emoji{font-size:1rem}.tab-name{font-weight:500}.songs-suggestion-grid{display:flex;flex-direction:column;gap:0;background:#0003;border-radius:var(--radius-xl);overflow:hidden}.suggestion-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;text-align:left;transition:background .2s ease;width:100%}.suggestion-card:last-child{border-bottom:none}.suggestion-card:hover{background:#8b5cf61a}.suggestion-rank{min-width:40px;font-size:1.5rem;font-weight:800;text-align:center;flex-shrink:0}.suggestion-rank.rank-1{color:#fbbf24;text-shadow:0 0 20px rgba(251,191,36,.5)}.suggestion-rank.rank-2{color:#94a3b8}.suggestion-rank.rank-3{color:#f59e0b}.suggestion-rank.rank-4,.suggestion-rank.rank-5,.suggestion-rank.rank-6,.suggestion-rank.rank-7,.suggestion-rank.rank-8{color:var(--color-text-muted)}.suggestion-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.suggestion-title{color:var(--color-text-primary);font-size:var(--text-base);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-artist{color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-plays{color:var(--color-primary-light);font-size:var(--text-xs);font-weight:600;background:#8b5cf626;padding:4px 10px;border-radius:var(--radius-full);flex-shrink:0}.category-description{display:none}.suggestions-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-10);color:var(--color-text-muted)}.suggestions-loading .mini-spinner{width:28px;height:28px;border:2px solid rgba(139,92,246,.3);border-top-color:#8b5cf6;border-radius:50%;animation:spin .8s linear infinite}.suggestions-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-10);text-align:center}.suggestions-empty .empty-emoji{font-size:3rem;margin-bottom:var(--space-4)}.suggestions-empty p{color:var(--color-text-secondary);font-size:var(--text-base);margin:0 0 var(--space-2) 0}.suggestions-empty .empty-hint{color:var(--color-text-muted);font-size:var(--text-sm)}@media (max-width: 768px){.category-tabs{justify-content:flex-start;flex-wrap:nowrap}.suggestion-card{padding:var(--space-3) var(--space-4);gap:var(--space-3)}.suggestion-rank{min-width:32px;font-size:1.25rem}.suggestion-title{font-size:var(--text-sm)}.suggestion-artist{font-size:var(--text-xs)}}@media (max-width: 480px){.category-tab{padding:6px 12px;font-size:var(--text-xs)}.tab-emoji{font-size:.9rem}.suggestion-rank{min-width:28px;font-size:1.1rem}.suggestion-plays{display:none}}.app-footer{margin-top:auto;padding:var(--space-6) var(--space-4);border-top:1px solid rgba(255,255,255,.06);text-align:center}.footer-legal-links{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-3)}.footer-legal-links a{color:var(--color-text-muted);font-size:var(--text-xs);text-decoration:none;transition:color .2s}.footer-legal-links a:hover{color:var(--color-text-secondary)}.footer-copyright{color:var(--color-text-muted);font-size:var(--text-xs);margin:0;opacity:.7}@media (max-width: 480px){.footer-legal-links{gap:var(--space-3)}.footer-legal-links a{font-size:10px}}.search-page{min-height:100vh;background:var(--color-bg-primary);padding:var(--space-6);padding-top:calc(70px + var(--space-6));position:relative;overflow:hidden}.main-navbar{position:fixed;top:0;left:0;right:0;height:70px;background:#0f0f23f2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);z-index:1000}.navbar-logo{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;transition:transform .2s ease}.navbar-logo:hover{transform:scale(1.02)}.logo-icon{font-size:1.8rem}.logo-text{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar-actions,.auth-buttons{display:flex;align-items:center;gap:var(--space-3)}.auth-btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:600;text-decoration:none;transition:all .2s ease}.auth-btn.login{color:var(--color-text-primary);background:transparent;border:1px solid rgba(255,255,255,.2)}.auth-btn.login:hover{background:#ffffff1a;border-color:#ffffff4d}.auth-btn.register{color:#fff;background:var(--gradient-primary);border:none}.auth-btn.register:hover{transform:translateY(-1px);box-shadow:0 4px 15px #6366f166}.user-menu-container{position:relative}.user-menu-trigger{display:flex;align-items:center;gap:var(--space-2);padding:6px 12px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-full);cursor:pointer;transition:all .2s ease}.user-menu-trigger:hover{background:#ffffff1a;border-color:#fff3}.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-xs);color:#fff;overflow:hidden}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-name{color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-arrow{color:var(--color-text-muted);font-size:.6rem;transition:transform .2s ease}.user-menu-trigger:hover .dropdown-arrow{color:var(--color-text-secondary)}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:#191932fa;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);box-shadow:0 10px 40px #00000080;overflow:hidden;animation:dropdownFadeIn .2s ease-out}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid rgba(255,255,255,.08)}.dropdown-email{color:var(--color-text-muted);font-size:var(--text-xs)}.dropdown-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);color:var(--color-text-secondary);text-decoration:none;font-size:var(--text-sm);transition:all .15s ease;border:none;background:none;width:100%;cursor:pointer;text-align:left}.dropdown-item:hover{background:#ffffff0d;color:var(--color-text-primary)}.dropdown-item .item-icon{font-size:1rem}.dropdown-item.logout{color:var(--color-error-light)}.dropdown-item.logout:hover{background:#ef44441a}.dropdown-divider{height:1px;background:#ffffff14;margin:var(--space-1) 0}.search-page:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:var(--gradient-glow);animation:gradientShift 15s ease infinite;pointer-events:none}.search-header{text-align:center;margin-bottom:var(--space-12);position:relative;z-index:1;animation:fadeInUp .6s ease-out}.search-header h1{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:700;margin:0 0 var(--space-4) 0;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;letter-spacing:-.02em}.search-header p{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:500px;margin:0 auto}.search-container{max-width:700px;margin:0 auto var(--space-12) auto;position:relative;z-index:1;animation:fadeInUp .6s ease-out .1s backwards}.error-message{max-width:600px;margin:var(--space-6) auto;padding:var(--space-4) var(--space-6);background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:var(--color-error-light);border-radius:var(--radius-xl);text-align:center;font-weight:500;position:relative;z-index:1;animation:fadeInScale .3s ease-out}.loading-message{max-width:600px;margin:var(--space-6) auto;padding:var(--space-6);background:var(--color-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);text-align:center;font-size:var(--text-lg);color:var(--color-primary-light);font-weight:500;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.loading-message:before{content:"";width:20px;height:20px;border:2px solid rgba(99,102,241,.3);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.results-container{max-width:1200px;margin:0 auto;position:relative;z-index:1;animation:fadeInUp .5s ease-out}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8);padding-bottom:var(--space-4);border-bottom:1px solid rgba(255,255,255,.1)}.results-header h2{font-family:var(--font-display);color:var(--color-text-primary);margin:0;font-size:var(--text-2xl);font-weight:600}.results-count{color:var(--color-primary-light);font-weight:600;font-size:var(--text-sm);background:#6366f11a;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full)}.songs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-6)}.songs-grid>*:nth-child(1){animation-delay:.05s}.songs-grid>*:nth-child(2){animation-delay:.1s}.songs-grid>*:nth-child(3){animation-delay:.15s}.songs-grid>*:nth-child(4){animation-delay:.2s}.songs-grid>*:nth-child(5){animation-delay:.25s}.songs-grid>*:nth-child(6){animation-delay:.3s}.empty-state{max-width:500px;margin:var(--space-12) auto;padding:var(--space-10);background:var(--color-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-2xl);text-align:center;position:relative;z-index:1;animation:fadeInUp .5s ease-out}.empty-state h3{font-family:var(--font-display);color:var(--color-primary-light);margin-bottom:var(--space-6);font-size:var(--text-xl);font-weight:600}.empty-state p{color:var(--color-text-secondary);font-size:var(--text-base)}.empty-state ol{text-align:left;max-width:350px;margin:0 auto;color:var(--color-text-secondary);line-height:2.2;padding-left:var(--space-6)}.empty-state ol li{margin-bottom:var(--space-2);position:relative}.empty-state ol li::marker{color:var(--color-primary);font-weight:600}@media (max-width: 768px){.search-page{padding:var(--space-4);padding-top:calc(60px + var(--space-4))}.main-navbar{height:60px;padding:0 var(--space-4)}.logo-text{font-size:var(--text-lg)}.user-name,.dropdown-arrow{display:none}.user-menu-trigger{padding:var(--space-1)}.auth-btn{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.search-header{margin-bottom:var(--space-8)}.search-header h1{font-size:var(--text-4xl)}.search-header p{font-size:var(--text-base);padding:0 var(--space-4)}.results-header{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.results-header h2{font-size:var(--text-xl)}.songs-grid{grid-template-columns:1fr;gap:var(--space-4)}.empty-state{padding:var(--space-6);margin:var(--space-8) auto}}.home-content{max-width:1000px;margin:0 auto;padding:0 var(--space-4)}.how-it-works{margin-bottom:var(--space-12)}.how-it-works h3{color:var(--color-text-primary);font-size:var(--text-xl);text-align:center;margin-bottom:var(--space-8)}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}.step-card{background:var(--color-glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:var(--space-6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);transition:transform .2s,border-color .2s}.step-card:hover{transform:translateY(-4px);border-color:#8b5cf64d}.step-number{width:28px;height:28px;border-radius:50%;background:var(--gradient-primary);color:#fff;font-size:var(--text-sm);font-weight:700;display:flex;align-items:center;justify-content:center}.step-icon{font-size:2rem}.step-text{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:1.4}.top-songs-section{margin-bottom:var(--space-12)}.section-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}.section-header h3{color:var(--color-text-primary);font-size:var(--text-xl);margin:0}.section-badge{background:#ef444426;color:#f87171;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;text-transform:uppercase}.top-songs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.top-song-card{display:flex;align-items:center;gap:var(--space-4);background:var(--color-glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);cursor:pointer;transition:all .2s;text-align:left}.top-song-card:hover{background:#ffffff14;border-color:#8b5cf64d;transform:translate(4px)}.song-rank{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:700;color:#fff;flex-shrink:0}.song-rank.rank-1{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.song-rank.rank-2{background:linear-gradient(135deg,#94a3b8,#64748b)}.song-rank.rank-3{background:linear-gradient(135deg,#d97706,#b45309)}.song-rank.rank-4,.song-rank.rank-5,.song-rank.rank-6,.song-rank.rank-7,.song-rank.rank-8,.song-rank.rank-9,.song-rank.rank-10{background:#374151}.top-song-card .song-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.top-song-card .song-title{color:var(--color-text-primary);font-weight:500;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-song-card .song-artist{color:var(--color-text-muted);font-size:var(--text-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-plays{color:var(--color-text-muted);font-size:var(--text-xs);flex-shrink:0}.loading-top-songs{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-8);color:var(--color-text-muted)}.loading-top-songs .mini-spinner{width:20px;height:20px;border:2px solid rgba(139,92,246,.3);border-top-color:#8b5cf6;border-radius:50%;animation:spin .8s linear infinite}@media (max-width: 768px){.steps-grid{grid-template-columns:repeat(2,1fr)}.top-songs-grid{grid-template-columns:1fr}}@media (max-width: 480px){.steps-grid{grid-template-columns:1fr}.step-card{flex-direction:row;text-align:left;padding:var(--space-4)}.step-number{width:24px;height:24px;font-size:var(--text-xs)}.step-icon{font-size:1.5rem}}.youtube-player-container{position:relative;width:100%;padding-bottom:56.25%;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px #0000004d}.youtube-player{position:absolute;top:0;left:0;width:100%;height:100%}.youtube-player-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000c;color:#fff;z-index:10}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.youtube-player-loading p{font-size:1rem;margin:0}.youtube-player-wrapper{display:flex;flex-direction:column}.youtube-disclaimer{color:var(--color-text-muted, #6b7280);font-size:.7rem;text-align:center;margin:.5rem 0 0;opacity:.7}.practice-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172ae6;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .2s ease-out}.practice-modal{background:var(--color-bg-secondary);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-2xl);padding:var(--space-8);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 25px 80px #0009,0 0 40px var(--color-primary-glow);animation:fadeInScale .3s ease-out}.practice-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6)}.practice-modal-header h2{margin:0;color:var(--color-text-primary);font-size:var(--text-xl);font-weight:600;font-family:var(--font-display)}.close-button{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--color-text-muted);width:40px;height:40px;border-radius:var(--radius-lg);font-size:1.5rem;cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center}.close-button:hover{background:#ef44441a;border-color:#ef44444d;color:var(--color-error)}.practice-word-display{text-align:center;margin-bottom:var(--space-3);display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap}.practice-word-text{font-size:var(--text-4xl);font-weight:700;font-family:var(--font-display);color:var(--color-text-primary);text-shadow:0 2px 10px rgba(0,0,0,.3)}.practice-word-ipa{font-size:var(--text-lg);color:var(--color-accent);font-family:Courier New,monospace;background:#06b6d41a;padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg)}.practice-word-translation{text-align:center;color:var(--color-text-secondary);margin-bottom:var(--space-4);font-size:var(--text-base)}.practice-word-translation .translation-label{color:var(--color-text-muted);font-style:normal;font-size:var(--text-sm)}.practice-word-score{text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-4)}.practice-word-score .score-good{color:var(--color-success)}.practice-word-score .score-low{color:var(--color-warning, #f59e0b)}.mastery-progress{margin:var(--space-4) 0 var(--space-6);text-align:center}.mastery-bar{height:10px;background:#ffffff1a;border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-2)}.mastery-fill{height:100%;background:var(--gradient-success);border-radius:var(--radius-full);transition:width .4s ease-out;box-shadow:0 0 12px var(--color-success-glow)}.mastery-text{color:var(--color-text-muted);font-size:var(--text-sm)}.action-buttons-row{display:flex;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-5)}.action-btn-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-3);font-family:var(--font-body);border:none;border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-base);min-height:80px}.action-btn-main .btn-icon{font-size:1.5rem}.action-btn-main .btn-label{font-size:var(--text-sm);font-weight:600}.action-btn-main.listen{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 16px var(--color-primary-glow)}.action-btn-main.listen:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px var(--color-primary-glow)}.action-btn-main.slow{background:var(--color-surface);color:var(--color-text-primary);border:1px solid rgba(255,255,255,.1)}.action-btn-main.slow:hover:not(:disabled){background:var(--color-surface-hover);border-color:#fff3}.action-btn-main.record{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 16px #ef444466;position:relative;overflow:hidden}.action-btn-main.record:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.action-btn-main.record:hover:not(:disabled){transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px #ef444480}.action-btn-main:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.audio-buttons{display:flex;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-5)}.play-button{padding:var(--space-4) var(--space-6);font-size:var(--text-base);font-weight:600;font-family:var(--font-body);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-base);box-shadow:0 4px 16px var(--color-primary-glow);display:flex;align-items:center;gap:var(--space-2)}.play-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px var(--color-primary-glow)}.play-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.play-button.slow{background:var(--color-surface);border:1px solid rgba(255,255,255,.1);box-shadow:none}.play-button.slow:hover:not(:disabled){background:var(--color-surface-hover);box-shadow:var(--shadow-md)}.record-button.large{width:100%;padding:var(--space-5);background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:var(--radius-xl);font-size:var(--text-lg);font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-base);box-shadow:0 4px 20px #ef444466;display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.record-button.large:hover{transform:translateY(-2px);box-shadow:0 8px 30px #ef444480}.practice-instructions{background:#0003;border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-5);text-align:center}.practice-instructions p{margin:var(--space-2) 0;color:var(--color-text-secondary);font-size:var(--text-sm)}.practice-tip-box{background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-5);display:flex;align-items:flex-start;gap:var(--space-3)}.tip-icon{font-size:1.3rem;flex-shrink:0}.practice-tip-box p{margin:0;color:var(--color-primary-light);font-size:var(--text-sm);line-height:1.5}.practice-error-box{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-5);display:flex;align-items:flex-start;gap:var(--space-3)}.error-icon{font-size:1.2rem;flex-shrink:0}.practice-error-box p{margin:0;color:var(--color-error-light);font-size:var(--text-sm);line-height:1.4}.evaluation-buttons{display:flex;gap:var(--space-3);margin-top:var(--space-5)}.eval-button{flex:1;padding:var(--space-4);font-size:var(--text-base);font-weight:600;font-family:var(--font-body);border:none;border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.eval-button.retry{background:var(--color-surface);color:var(--color-text-primary);border:1px solid rgba(255,255,255,.1)}.eval-button.retry:hover{background:var(--color-surface-hover);border-color:#fff3}.eval-button.success{background:var(--gradient-success);color:#fff;box-shadow:0 4px 16px var(--color-success-glow)}.eval-button.success:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--color-success-glow)}.attempts-count{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-4);text-align:center}.mastery-complete{text-align:center;margin-top:var(--space-5);padding:var(--space-5);background:linear-gradient(135deg,#22c55e26,#10b98126);border:1px solid rgba(34,197,94,.4);border-radius:var(--radius-xl);animation:scoreReveal .5s ease-out}.mastery-icon{font-size:3rem;display:block;margin-bottom:var(--space-2);animation:bounce 1s ease-in-out}.mastery-complete p{margin:0;color:var(--color-success);font-size:var(--text-lg);font-weight:600;font-family:var(--font-display)}.practice-recording{text-align:center;padding:var(--space-5) 0}.recording-indicator{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-5)}.recording-dot{width:14px;height:14px;background:var(--color-error);border-radius:50%}.recording-dot.pulse{animation:pulseGlow 1.5s infinite}.recording-text{color:var(--color-error-light);font-weight:600;font-size:var(--text-base)}.recording-time{font-size:var(--text-5xl);font-weight:700;font-family:var(--font-display);color:var(--color-text-primary);margin-bottom:var(--space-4);font-variant-numeric:tabular-nums}.recording-instruction{color:var(--color-text-secondary);margin-bottom:var(--space-6);font-size:var(--text-base)}.recording-instruction strong{color:var(--color-text-primary)}.stop-button{padding:var(--space-4) var(--space-10);background:var(--color-surface);color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);cursor:pointer;font-size:var(--text-base);font-weight:600;font-family:var(--font-body);transition:all var(--transition-base)}.stop-button:hover{background:var(--color-surface-hover)}.practice-analyzing{text-align:center;padding:var(--space-12) var(--space-5)}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--space-5)}.practice-analyzing p{color:var(--color-text-secondary);font-size:var(--text-base)}.practice-result{text-align:center}.result-score-circle{width:140px;height:140px;border:5px solid;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto var(--space-6);background:#0003;animation:scoreReveal .6s ease-out}.result-score-circle .score-number{font-size:var(--text-4xl);font-weight:700;font-family:var(--font-display);color:var(--color-text-primary);line-height:1}.result-score-circle .score-label{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}.result-feedback{background:#0003;border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-5);text-align:left}.feedback-error{color:var(--color-error-light);margin-bottom:var(--space-3);font-size:var(--text-sm);line-height:1.5}.feedback-tip{color:var(--color-primary-light);font-size:var(--text-sm);line-height:1.5;margin:0}.phonemes-detail{margin-bottom:var(--space-6)}.phonemes-detail h4{color:var(--color-text-muted);margin-bottom:var(--space-4);font-weight:500;font-size:var(--text-sm)}.phonemes-grid{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}.phoneme-item{background:#0003;border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);min-width:70px;text-align:center;border:1px solid rgba(255,255,255,.05)}.phoneme-item.correct{border-color:#22c55e66;background:#22c55e1a}.phoneme-item.incorrect{border-color:#ef444466;background:#ef44441a}.phoneme-symbol{display:block;color:var(--color-text-primary);font-size:var(--text-lg);font-weight:600;font-family:Courier New,monospace;margin-bottom:var(--space-1)}.phoneme-score{font-size:var(--text-sm);font-weight:600}.phoneme-item.correct .phoneme-score{color:var(--color-success)}.phoneme-item.incorrect .phoneme-score{color:var(--color-error)}.phoneme-produced{display:block;font-size:var(--text-xs);color:var(--color-error-light);margin-top:var(--space-2)}.result-actions{display:flex;gap:var(--space-3)}.try-again-button{flex:1;padding:var(--space-4);background:var(--color-surface);color:var(--color-text-primary);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);cursor:pointer;font-size:var(--text-base);font-weight:500;font-family:var(--font-body);transition:all var(--transition-base)}.try-again-button:hover{background:var(--color-surface-hover)}.done-button{flex:1;padding:var(--space-4);background:var(--gradient-success);color:#fff;border:none;border-radius:var(--radius-xl);cursor:pointer;font-size:var(--text-base);font-weight:600;font-family:var(--font-body);transition:all var(--transition-base);box-shadow:0 4px 16px var(--color-success-glow)}.done-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--color-success-glow)}.practice-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-lg);padding:var(--space-5);margin-top:var(--space-5);text-align:center}.practice-error p{color:var(--color-error-light);margin:0 0 var(--space-4);font-size:var(--text-sm)}.practice-error button{background:var(--color-error);color:#fff;border:none;padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);cursor:pointer;font-weight:500;font-family:var(--font-body);transition:all var(--transition-base)}.practice-error button:hover{background:#dc2626}@media (max-width: 480px){.practice-modal{padding:var(--space-5);border-radius:var(--radius-xl)}.practice-word-text{font-size:var(--text-3xl)}.action-buttons-row{gap:var(--space-2)}.action-btn-main{padding:var(--space-3) var(--space-2);min-height:70px}.action-btn-main .btn-icon{font-size:1.3rem}.action-btn-main .btn-label{font-size:var(--text-xs)}.audio-buttons{flex-direction:column}.play-button{width:100%;justify-content:center}.evaluation-buttons,.result-actions{flex-direction:column}}.exercises-trigger{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4);background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:var(--radius-xl);cursor:pointer;transition:all .3s ease;text-align:left;box-shadow:0 4px 15px #6366f14d}.exercises-trigger:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.exercises-trigger:active{transform:translateY(0)}.exercises-trigger.loading{cursor:default;opacity:.8}.exercises-trigger.loading:hover{transform:none}.trigger-icon{font-size:2rem;flex-shrink:0}.trigger-content{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.trigger-title{font-size:var(--text-base);font-weight:600;color:#fff}.trigger-count{font-size:var(--text-sm);color:#fffc}.trigger-arrow{font-size:1.5rem;color:#fff;opacity:.8;transition:transform .2s ease}.exercises-trigger:hover .trigger-arrow{transform:translate(4px)}.trigger-loading{display:flex;align-items:center;gap:var(--space-3);color:#fff}.loading-spinner-small{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.exercises-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4);animation:fadeIn .2s ease}.exercises-modal{background:var(--color-bg-primary);border-radius:var(--radius-2xl);width:100%;max-width:500px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s ease;box-shadow:0 20px 60px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);border-bottom:1px solid var(--color-border)}.modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-tertiary);border:none;border-radius:var(--radius-full);color:var(--color-text-secondary);font-size:var(--text-lg);cursor:pointer;transition:all .2s ease;flex-shrink:0}.modal-close:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.modal-progress-bar{flex:1;height:12px;background:var(--color-bg-tertiary);border-radius:var(--radius-full);overflow:hidden}.modal-progress-fill{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:var(--radius-full);transition:width .4s ease}.modal-counter{font-size:var(--text-sm);font-weight:600;color:var(--color-text-secondary);flex-shrink:0;min-width:40px;text-align:right}.exercise-modal-content{flex:1;padding:var(--space-6);overflow-y:auto;display:flex;flex-direction:column;align-items:center;text-align:center}.exercise-instruction{font-size:var(--text-lg);font-weight:500;color:var(--color-text-secondary);margin:0 0 var(--space-6)}.exercise-sentence-display{font-size:var(--text-2xl);font-weight:500;line-height:1.6;color:var(--color-text-primary);margin-bottom:var(--space-4);word-wrap:break-word}.sentence-word{display:inline-block;padding:var(--space-1) var(--space-3);margin:0 var(--space-1);border-radius:var(--radius-md);font-weight:600;transition:all .3s ease;min-width:80px;text-align:center}.word-empty{background:var(--color-bg-tertiary);border:2px dashed var(--color-border);color:var(--color-text-muted)}.word-filled{background:#6366f126;border:2px solid var(--color-primary);color:var(--color-primary)}.word-correct{background:#22c55e26;border:2px solid #22c55e;color:#22c55e}.word-incorrect{background:#ef444426;border:2px solid #ef4444;color:#ef4444;text-decoration:line-through}.exercise-translation-hint{font-size:var(--text-base);color:var(--color-text-secondary);font-style:italic;margin:0 0 var(--space-6);padding:var(--space-3) var(--space-4);background:var(--color-bg-secondary);border-radius:var(--radius-lg);border-left:3px solid var(--color-primary)}.exercise-input-section{width:100%;max-width:300px;margin-bottom:var(--space-4)}.exercise-input{width:100%;padding:var(--space-4);font-size:var(--text-xl);font-family:inherit;text-align:center;color:var(--color-text-primary);background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:var(--radius-xl);outline:none;transition:all .2s ease}.exercise-input::placeholder{color:var(--color-text-muted)}.exercise-input:focus{border-color:var(--color-primary);background:var(--color-bg-primary);box-shadow:0 0 0 4px #6366f11a}.exercise-feedback{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);margin-top:var(--space-4);animation:popIn .3s ease}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.exercise-feedback.correct{background:#22c55e26;border:2px solid #22c55e}.exercise-feedback.incorrect{background:#ef444426;border:2px solid #ef4444}.feedback-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-size:var(--text-xl);font-weight:700;flex-shrink:0}.exercise-feedback.correct .feedback-icon{background:#22c55e;color:#fff}.exercise-feedback.incorrect .feedback-icon{background:#ef4444;color:#fff}.feedback-text{display:flex;flex-direction:column;gap:var(--space-1);text-align:left}.exercise-feedback.correct .feedback-text{color:#22c55e;font-weight:600;font-size:var(--text-lg)}.exercise-feedback.incorrect .feedback-text{color:#ef4444}.exercise-feedback.incorrect .feedback-text span{font-size:var(--text-sm)}.exercise-feedback.incorrect .feedback-text strong{font-size:var(--text-lg);color:#22c55e}.modal-footer{padding:var(--space-4);border-top:1px solid var(--color-border)}.btn-check,.btn-next{width:100%;padding:var(--space-4);font-size:var(--text-lg);font-weight:600;border:none;border-radius:var(--radius-xl);cursor:pointer;transition:all .2s ease}.btn-check{background:var(--color-primary);color:#fff}.btn-check:hover:not(.disabled){background:var(--color-primary-hover);transform:translateY(-2px)}.btn-check.disabled{background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:not-allowed}.btn-next{color:#fff}.btn-next.correct{background:#22c55e}.btn-next.correct:hover{background:#16a34a}.btn-next.incorrect{background:#ef4444}.btn-next.incorrect:hover{background:#dc2626}.exercises-results{padding:var(--space-8);display:flex;flex-direction:column;align-items:center;text-align:center}.results-icon{font-size:4rem;margin-bottom:var(--space-4);animation:bounce .6s ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.results-title{font-size:var(--text-2xl);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--space-4)}.results-score{display:flex;align-items:baseline;gap:var(--space-2);font-size:var(--text-4xl);font-weight:700;margin-bottom:var(--space-4)}.score-correct{color:#22c55e}.score-separator{color:var(--color-text-muted)}.score-total{color:var(--color-text-secondary)}.results-message{font-size:var(--text-base);color:var(--color-text-secondary);margin:0 0 var(--space-6)}.results-actions{display:flex;gap:var(--space-3);width:100%;max-width:350px}.btn-restart,.btn-finish{flex:1;padding:var(--space-3) var(--space-4);font-size:var(--text-base);font-weight:600;border-radius:var(--radius-xl);cursor:pointer;transition:all .2s ease}.btn-restart{background:var(--color-bg-tertiary);border:2px solid var(--color-border);color:var(--color-text-primary)}.btn-restart:hover{background:var(--color-bg-secondary);border-color:var(--color-border-hover)}.btn-finish{background:var(--color-primary);border:none;color:#fff}.btn-finish:hover{background:var(--color-primary-hover)}@media (max-width: 640px){.exercises-modal-overlay{padding:0;align-items:flex-end}.exercises-modal{max-width:100%;max-height:95vh;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0}.exercise-modal-content{padding:var(--space-4)}.exercise-sentence-display{font-size:var(--text-xl)}.sentence-word{padding:var(--space-1) var(--space-2);min-width:60px}.exercise-input{font-size:var(--text-lg);padding:var(--space-3)}.results-score{font-size:var(--text-3xl)}.results-actions{flex-direction:column}.exercises-trigger{padding:var(--space-3)}.trigger-icon{font-size:1.5rem}.trigger-title{font-size:var(--text-sm)}.trigger-count{font-size:var(--text-xs)}}.sing-page{min-height:100vh;background:var(--color-bg-primary);padding:var(--space-6);position:relative}.sing-page:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:var(--gradient-glow);pointer-events:none;z-index:0}.sing-container{max-width:1000px;margin:0 auto;position:relative;z-index:1}.sing-header{margin-bottom:var(--space-6)}.back-button{background:var(--color-surface);color:var(--color-text-secondary);border:1px solid rgba(255,255,255,.1);padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);font-size:var(--text-sm);font-family:var(--font-body);cursor:pointer;transition:all var(--transition-base);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-button:hover{background:var(--color-surface-hover);color:var(--color-text-primary);transform:translate(-4px)}.video-controls-layout{display:flex;gap:var(--space-4);margin-bottom:var(--space-6);align-items:stretch}.player-section{flex:1;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl)}.headphones-tip{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:#6366f11a;border:1px solid rgba(99,102,241,.2);border-radius:0 0 var(--radius-xl) var(--radius-xl);margin-top:-4px}.headphones-tip .tip-icon{font-size:1.1rem}.headphones-tip .tip-text{color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500}.recording-panel{width:80px;background:linear-gradient(180deg,#1a1a2e,#16213e);border:2px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-4);transition:all .3s ease;position:relative;overflow:hidden}.recording-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.recording-panel:hover{width:100px;border-color:#6366f166}.recording-panel.recording-active{width:120px;border-color:#ef444499;background:linear-gradient(180deg,#2d1f1f,#1a1a2e);box-shadow:0 0 30px #ef44444d}.recording-panel.has-recording{border-color:#22c55e80}.panel-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.rec-button{width:60px;height:60px;border-radius:50%;border:3px solid rgba(239,68,68,.6);background:#ef44441a;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .3s ease}.rec-button:hover:not(:disabled){background:#ef444433;border-color:var(--color-error);transform:scale(1.1);box-shadow:0 0 20px #ef444466}.rec-button:disabled{opacity:.4;cursor:not-allowed}.rec-icon{font-size:1.5rem;color:var(--color-error);line-height:1}.rec-label{font-size:.6rem;font-weight:700;color:var(--color-error);letter-spacing:1px;margin-top:2px}.recording-status{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.rec-dot{width:16px;height:16px;background:var(--color-error);border-radius:50%;box-shadow:0 0 10px var(--color-error)}.rec-dot.pulse{animation:pulseGlow 1s ease-in-out infinite}.rec-time{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-error-light);font-variant-numeric:tabular-nums}.stop-btn{width:50px;height:50px;border-radius:var(--radius-lg);border:2px solid rgba(255,255,255,.3);background:#ffffff1a;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s ease}.stop-btn:hover{background:#fff3;border-color:#fff}.stop-icon{font-size:1rem;color:#fff}.stop-label{font-size:.5rem;font-weight:700;color:#fff;letter-spacing:1px}.recording-ready{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.ready-icon{width:40px;height:40px;background:var(--color-success);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff}.ready-time{font-size:var(--text-sm);color:var(--color-success);font-weight:600}.recording-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.panel-actions{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.panel-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all .2s ease;font-family:var(--font-body);width:100%}.panel-btn .btn-icon{font-size:1.1rem}.panel-btn .btn-text{font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.panel-btn.primary{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));color:#fff}.panel-btn.primary:hover{transform:scale(1.05);box-shadow:0 4px 15px #6366f166}.panel-btn.secondary{background:#ffffff1a;color:var(--color-text-secondary);border:1px solid rgba(255,255,255,.15)}.panel-btn.secondary:hover{background:#ffffff26;color:var(--color-text-primary)}.panel-analyzing{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.mini-spinner{width:30px;height:30px;border:3px solid rgba(99,102,241,.2);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}.analyzing-text{font-size:.65rem;color:var(--color-accent);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.recording-panel.has-recording{width:100px;border-color:#22c55e80}.recording-panel.has-recording:hover{width:110px}.controls-section{display:flex;flex-direction:column;align-items:center}.instructions-card,.recording-card,.finished-card,.error-card,.analysis-results-card{background:var(--color-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-2xl);padding:var(--space-8);text-align:center;max-width:700px;width:100%;animation:fadeInScale .4s ease-out}.instructions-card h2{font-family:var(--font-display);color:var(--color-text-primary);margin-bottom:var(--space-4);font-size:var(--text-2xl);font-weight:600}.instructions-card p{color:var(--color-text-secondary);margin-bottom:var(--space-4);font-size:var(--text-base)}.instructions-card ol{text-align:left;max-width:400px;margin:var(--space-6) auto;color:var(--color-text-secondary);line-height:2;padding-left:var(--space-6)}.instructions-card ol li{margin-bottom:var(--space-2)}.instructions-card ol li::marker{color:var(--color-primary);font-weight:600}.instructions-card.compact{padding:var(--space-4) var(--space-6);max-width:100%}.instructions-text{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap;margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}.instructions-text .step{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--gradient-primary);color:#fff;border-radius:50%;font-size:var(--text-xs);font-weight:700;margin-right:var(--space-2)}.instructions-text strong{color:var(--color-primary-light)}.start-button{background:var(--gradient-primary);color:#fff;border:none;padding:var(--space-4) var(--space-10);border-radius:var(--radius-xl);font-size:var(--text-lg);font-weight:600;font-family:var(--font-display);cursor:pointer;transition:all var(--transition-base);box-shadow:0 8px 24px var(--color-primary-glow);margin-top:var(--space-4);display:inline-flex;align-items:center;gap:var(--space-2)}.start-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 32px var(--color-primary-glow)}.start-button:disabled{opacity:.5;cursor:not-allowed}.recording-card{background:linear-gradient(135deg,#ef444433,#dc262633);border-color:#ef444466}.recording-indicator{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-4)}.recording-dot{width:14px;height:14px;background:var(--color-error);border-radius:50%;animation:pulseGlow 1.5s ease-in-out infinite}.recording-text{font-weight:700;font-size:var(--text-base);letter-spacing:3px;color:var(--color-error-light);text-transform:uppercase}.recording-time{font-size:var(--text-5xl);font-weight:700;font-family:var(--font-display);color:var(--color-text-primary);margin:var(--space-6) 0;font-variant-numeric:tabular-nums}.stop-button{background:var(--color-error);color:#fff;border:none;padding:var(--space-4) var(--space-10);border-radius:var(--radius-xl);font-size:var(--text-lg);font-weight:600;font-family:var(--font-display);cursor:pointer;transition:all var(--transition-base);box-shadow:0 8px 24px var(--color-error-glow)}.stop-button:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--color-error-glow)}.finished-card{background:linear-gradient(135deg,#22c55e26,#10b98126);border-color:#22c55e66}.success-icon{width:80px;height:80px;background:var(--gradient-success);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin:0 auto var(--space-6);box-shadow:0 8px 24px var(--color-success-glow);animation:scoreReveal .6s ease-out}.finished-card h2{font-family:var(--font-display);color:var(--color-success);margin-bottom:var(--space-2);font-size:var(--text-2xl)}.finished-card>p{font-size:var(--text-lg);color:var(--color-text-secondary);margin-bottom:var(--space-6)}.audio-preview{background:#0003;padding:var(--space-5);border-radius:var(--radius-xl);margin:var(--space-6) 0}.audio-preview audio{width:100%;max-width:400px}.finished-actions{display:flex;gap:var(--space-4);justify-content:center;margin:var(--space-6) 0;flex-wrap:wrap}.primary-button,.secondary-button{border:none;padding:var(--space-4) var(--space-8);border-radius:var(--radius-xl);font-size:var(--text-base);font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-base)}.primary-button{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 16px var(--color-primary-glow)}.secondary-button{background:var(--color-surface);color:var(--color-text-primary);border:1px solid rgba(255,255,255,.1)}.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled){transform:translateY(-2px)}.primary-button:hover:not(:disabled){box-shadow:0 8px 24px var(--color-primary-glow)}.primary-button:disabled,.secondary-button:disabled{opacity:.6;cursor:not-allowed}.phase-note{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-4);font-style:italic}.video-end-popup{background:var(--color-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-2xl);padding:var(--space-10);text-align:center;max-width:500px;width:100%;animation:fadeInScale .3s ease-out;box-shadow:0 20px 60px #00000080,0 0 40px var(--color-primary-glow)}.popup-icon{font-size:4rem;margin-bottom:var(--space-4);animation:bounce 1s ease-in-out}.video-end-popup h2{font-family:var(--font-display);color:var(--color-text-primary);font-size:var(--text-2xl);margin-bottom:var(--space-2)}.video-end-popup p{color:var(--color-text-secondary);font-size:var(--text-lg);margin-bottom:var(--space-6)}.popup-actions{display:flex;gap:var(--space-4);justify-content:center}.analyzing-card{background:var(--color-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-2xl);padding:var(--space-12);text-align:center;max-width:500px;width:100%;animation:fadeInScale .3s ease-out}.analyzing-spinner{width:60px;height:60px;border:4px solid rgba(99,102,241,.2);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--space-6)}.analyzing-card h2{font-family:var(--font-display);color:var(--color-text-primary);font-size:var(--text-xl);margin-bottom:var(--space-2)}.analyzing-card p{color:var(--color-text-muted);font-size:var(--text-base)}.scores-explanation{background:#6366f11a;border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4)}.scores-explanation p{color:var(--color-text-secondary);font-size:var(--text-sm);margin:0;text-align:center}.section-header{margin-bottom:var(--space-4)}.section-header h3{margin-bottom:var(--space-1)}.section-hint{color:var(--color-text-muted);font-size:var(--text-sm);margin:0;font-style:italic}.error-card{background:#ef44441a;border-color:#ef444466;color:var(--color-error-light)}.error-message-inline{background:#ef444426;padding:var(--space-4);border-radius:var(--radius-lg);margin:var(--space-4) 0;border:1px solid rgba(239,68,68,.3)}.error-message-inline p{margin:0;color:var(--color-error-light);font-weight:500}.analysis-results-card{max-width:900px;background:var(--color-bg-secondary);border:1px solid rgba(255,255,255,.08)}.analysis-results-card h2{font-family:var(--font-display);color:var(--color-text-primary);margin-bottom:var(--space-8);font-size:var(--text-3xl);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.analysis-results-card .success-icon{background:var(--gradient-primary)}.overall-score-section{margin:var(--space-8) 0}.score-circle{width:180px;height:180px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto var(--space-4);position:relative;animation:scoreReveal .8s ease-out}.score-circle:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;padding:4px;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.score-circle.score-excellent{background:linear-gradient(135deg,var(--color-success) 0%,#10B981 100%);box-shadow:0 0 40px var(--color-success-glow),0 0 80px var(--color-success-glow)}.score-circle.score-good{background:linear-gradient(135deg,#4ADE80 0%,var(--color-success) 100%);box-shadow:0 0 40px #4ade8066}.score-circle.score-fair{background:linear-gradient(135deg,var(--color-warning) 0%,#D97706 100%);box-shadow:0 0 40px var(--color-warning-glow)}.score-circle.score-poor{background:linear-gradient(135deg,var(--color-error) 0%,#DC2626 100%);box-shadow:0 0 40px var(--color-error-glow)}.score-number{font-size:4rem;font-weight:800;font-family:var(--font-display);color:#fff;line-height:1;text-shadow:0 2px 4px rgba(0,0,0,.2)}.score-max{font-size:var(--text-lg);font-weight:600;color:#fffc}.score-label{color:var(--color-text-secondary);font-size:var(--text-lg);font-weight:600}.detailed-scores{margin:var(--space-8) 0;display:flex;flex-direction:column;gap:var(--space-4);background:#0003;padding:var(--space-6);border-radius:var(--radius-xl)}.score-item{display:grid;grid-template-columns:140px 1fr 50px;gap:var(--space-4);align-items:center}.score-item-label{font-weight:500;color:var(--color-text-secondary);font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-2)}.score-bar-container{height:12px;background:#ffffff1a;border-radius:var(--radius-full);overflow:hidden}.score-bar{height:100%;border-radius:var(--radius-full);transition:width 1s ease-out;position:relative}.score-bar:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);border-radius:var(--radius-full) var(--radius-full) 0 0}.score-item-value{font-weight:700;color:var(--color-text-primary);font-size:var(--text-base);text-align:right;font-family:var(--font-display)}.ai-feedback-section h3{color:var(--color-primary-light);margin:0 0 var(--space-4) 0;font-size:var(--text-lg);font-family:var(--font-display);display:flex;align-items:center;gap:var(--space-2)}.ai-feedback-text{color:var(--color-text-primary);line-height:1.7;font-size:var(--text-base);margin-bottom:var(--space-4)}.main-issue{background:#6366f126;border-left:3px solid var(--color-primary);padding:var(--space-4);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-text-primary)}.main-issue strong{color:var(--color-primary-light)}.phonemes-section{background:linear-gradient(135deg,#f59e0b1a,#eab3081a);border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-xl);padding:var(--space-6);margin:var(--space-8) 0;text-align:left}.phonemes-section h3{color:var(--color-warning-light);margin:0 0 var(--space-5) 0;font-size:var(--text-lg);font-family:var(--font-display)}.phonemes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}.phoneme-item{background:#0003;border-radius:var(--radius-lg);padding:var(--space-5);border:1px solid rgba(255,255,255,.05);transition:all var(--transition-base)}.phoneme-item:hover{border-color:#f59e0b4d;transform:translateY(-2px)}.phoneme-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}.phoneme-symbol{font-size:var(--text-2xl);font-weight:700;color:var(--color-warning);font-family:Courier New,monospace}.phoneme-frequency{background:#f59e0b33;color:var(--color-warning-light);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600}.phoneme-examples{color:var(--color-accent);font-size:var(--text-sm);margin:var(--space-2) 0;font-weight:500}.phoneme-hint{color:var(--color-text-primary);font-size:var(--text-sm);margin:var(--space-2) 0;font-weight:500}.phoneme-mouth{color:var(--color-text-muted);font-size:var(--text-xs);margin:var(--space-2) 0;font-style:italic}.phoneme-similar{color:var(--color-success);font-size:var(--text-xs);margin:var(--space-2) 0;font-style:italic}.words-to-practice-section{background:linear-gradient(135deg,#ef444414,#ec489914);border:1px solid rgba(239,68,68,.25);border-radius:var(--radius-xl);padding:var(--space-6);margin:var(--space-8) 0;text-align:left}.words-to-practice-section h3{color:var(--color-error-light);margin:0 0 var(--space-5) 0;font-size:var(--text-lg);font-family:var(--font-display)}.words-to-practice-list{display:flex;flex-direction:column;gap:var(--space-4)}.word-practice-item{background:#0003;border-radius:var(--radius-lg);padding:var(--space-5);border:1px solid rgba(255,255,255,.05);transition:all var(--transition-base)}.word-practice-item:hover{border-color:#ef44444d}.word-practice-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3);flex-wrap:wrap}.word-practice-name{font-size:var(--text-xl);font-weight:700;font-family:var(--font-display);color:var(--color-text-primary)}.word-practice-ipa{font-family:Courier New,monospace;color:var(--color-accent);background:#06b6d41a;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm)}.word-practice-score{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-weight:700;font-size:var(--text-sm);margin-left:auto}.word-practice-score.score-excellent{background:#22c55e33;color:var(--color-success)}.word-practice-score.score-good{background:#4ade8033;color:var(--color-success-light)}.word-practice-score.score-fair{background:#f59e0b33;color:var(--color-warning)}.word-practice-score.score-poor{background:#ef444433;color:var(--color-error)}.word-translation{color:var(--color-text-muted);font-size:var(--text-sm);margin:var(--space-2) 0;font-style:italic}.word-error{color:var(--color-error-light);font-size:var(--text-sm);margin:var(--space-2) 0;background:#ef44441a;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border-left:3px solid var(--color-error)}.word-tip{color:var(--color-success);font-size:var(--text-sm);margin:var(--space-2) 0;background:#22c55e1a;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border-left:3px solid var(--color-success)}.practice-word-button{margin-top:var(--space-3);padding:var(--space-3) var(--space-5);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-sm);font-weight:600;font-family:var(--font-body);transition:all var(--transition-base);box-shadow:0 4px 12px var(--color-primary-glow);display:inline-flex;align-items:center;gap:var(--space-2)}.practice-word-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--color-primary-glow)}.analysis-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin:var(--space-8) 0}.analysis-stats .stat{background:#0003;border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-xl);padding:var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);transition:all var(--transition-base)}.analysis-stats .stat:hover{border-color:#6366f14d;transform:translateY(-2px)}.stat-icon{font-size:2rem}.analysis-stats .stat-value{font-size:var(--text-3xl);font-weight:800;font-family:var(--font-display);color:var(--color-primary-light)}.analysis-stats .stat-label{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center}.lyrics-debug-section{background:#f59e0b1a;border:2px dashed rgba(245,158,11,.4);border-radius:var(--radius-xl);padding:var(--space-5);margin:var(--space-6) 0;text-align:left}.lyrics-debug-section h3{color:var(--color-warning);font-size:var(--text-base);margin:0 0 var(--space-3) 0;display:flex;align-items:center;gap:var(--space-2)}.lyrics-debug-text{background:#0000004d;border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-md);padding:var(--space-4);font-family:Courier New,monospace;font-size:var(--text-sm);line-height:1.6;color:var(--color-text-secondary);max-height:200px;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}.lyrics-debug-note{margin:var(--space-3) 0 0 0;font-size:var(--text-xs);color:var(--color-warning);font-style:italic}.report-header{margin-bottom:var(--space-6)}.report-title-section h2{font-family:var(--font-display);font-size:var(--text-3xl);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.song-info{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-base)}.song-title{color:var(--color-text-secondary);font-weight:600}.song-artist{color:var(--color-text-muted)}.score-circle-large{margin:var(--space-6) auto}.score-ring{position:relative;width:180px;height:180px;margin:0 auto}.score-ring svg{transform:rotate(-90deg);width:100%;height:100%}.score-ring-bg{fill:none;stroke:#ffffff1a;stroke-width:8}.score-ring-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dasharray 1s ease-out}.score-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.score-inner .score-number{font-size:3.5rem;font-weight:800;font-family:var(--font-display);color:var(--color-text-primary);line-height:1;display:block}.score-label-small{font-size:var(--text-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:1px}.score-level{text-align:center;margin-top:var(--space-4)}.score-level .level{display:inline-block;padding:var(--space-2) var(--space-6);border-radius:var(--radius-full);font-size:var(--text-lg);font-weight:700;font-family:var(--font-display)}.level.excellent{background:linear-gradient(135deg,#22c55e33,#10b98133);color:var(--color-success);border:1px solid rgba(34,197,94,.4)}.level.good{background:linear-gradient(135deg,#4ade8033,#22c55e33);color:#4ade80;border:1px solid rgba(74,222,128,.4)}.level.fair{background:linear-gradient(135deg,#f59e0b33,#eab30833);color:var(--color-warning);border:1px solid rgba(245,158,11,.4)}.level.needs-work{background:linear-gradient(135deg,#ef444433,#dc262633);color:var(--color-error-light);border:1px solid rgba(239,68,68,.4)}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin:var(--space-8) 0}.metric-card{background:#0003;border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-xl);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);transition:all var(--transition-base)}.metric-card:hover{border-color:#6366f14d;transform:translateY(-2px)}.metric-icon{font-size:1.5rem}.metric-info{display:flex;flex-direction:column;gap:2px}.metric-label{font-weight:600;color:var(--color-text-primary);font-size:var(--text-base)}.metric-desc{font-size:var(--text-xs);color:var(--color-text-muted)}.metric-score-wrapper{display:flex;align-items:center;gap:var(--space-3);margin-top:auto}.metric-bar{flex:1;height:8px;background:#ffffff1a;border-radius:var(--radius-full);overflow:hidden}.metric-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 1s ease-out}.metric-value{font-size:var(--text-xl);font-weight:800;font-family:var(--font-display);min-width:40px;text-align:right}.ai-feedback-section{background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-xl);padding:var(--space-6);margin:var(--space-8) 0;text-align:left}.ai-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}.ai-avatar{width:50px;height:50px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.ai-title h3{margin:0;color:var(--color-text-primary);font-size:var(--text-lg);font-family:var(--font-display)}.ai-powered{font-size:var(--text-xs);color:var(--color-primary-light);text-transform:uppercase;letter-spacing:1px}.ai-message{background:#0003;border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4)}.ai-feedback-text{color:var(--color-text-primary);font-size:var(--text-base);line-height:1.8;margin:0}.focus-area{display:flex;align-items:flex-start;gap:var(--space-4);background:#6366f126;padding:var(--space-4);border-radius:var(--radius-lg);border-left:4px solid var(--color-primary)}.focus-icon{font-size:1.5rem;flex-shrink:0}.focus-content{flex:1}.focus-label{font-size:var(--text-xs);color:var(--color-primary-light);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:var(--space-1)}.focus-text{margin:0;color:var(--color-text-primary);font-weight:500}.session-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin:var(--space-6) 0;padding:var(--space-5);background:#0003;border-radius:var(--radius-xl)}.session-stat{text-align:center;padding:var(--space-3)}.stat-number{display:block;font-size:var(--text-2xl);font-weight:800;font-family:var(--font-display);color:var(--color-primary-light)}.stat-desc{font-size:var(--text-xs);color:var(--color-text-muted)}.section-title{text-align:left;margin-bottom:var(--space-5)}.section-title h3{margin:0 0 var(--space-1) 0;color:var(--color-text-primary);font-family:var(--font-display);font-size:var(--text-xl)}.section-subtitle{margin:0;color:var(--color-text-muted);font-size:var(--text-sm)}.phonemes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4)}.phoneme-card-expanded{background:#0003;border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-xl);padding:var(--space-5);text-align:left;transition:all var(--transition-base)}.phoneme-card-expanded:hover{border-color:#f59e0b66;transform:translateY(-2px)}.phoneme-main{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.phoneme-symbol-large{font-size:2.5rem;font-weight:700;color:var(--color-warning);font-family:Courier New,monospace}.phoneme-badge{background:#f59e0b33;color:var(--color-warning-light);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600}.phoneme-examples-box{background:#6366f11a;padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4)}.examples-label{font-size:var(--text-xs);color:var(--color-text-muted);display:block;margin-bottom:var(--space-1)}.examples-words{color:var(--color-accent);font-weight:600;font-size:var(--text-sm)}.phoneme-details{display:flex;flex-direction:column;gap:var(--space-3)}.detail-item{display:flex;gap:var(--space-3);align-items:flex-start}.detail-icon{font-size:1rem;flex-shrink:0}.detail-item p{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.5}.detail-item.similar p{color:var(--color-success)}.words-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--space-5)}.word-card-full{background:#0003;border:2px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:var(--space-5);text-align:left;transition:all var(--transition-base)}.word-card-full:hover{transform:translateY(-2px)}.score-border-excellent{border-color:#22c55e66}.score-border-good{border-color:#4ade8066}.score-border-fair{border-color:#f59e0b66}.score-border-poor{border-color:#ef444466}.word-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.word-main-info{display:flex;flex-direction:column;gap:var(--space-1)}.word-text{font-size:var(--text-2xl);font-weight:700;font-family:var(--font-display);color:var(--color-text-primary)}.word-ipa{font-family:Courier New,monospace;color:var(--color-accent);font-size:var(--text-sm)}.word-score-badge{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:800;font-family:var(--font-display);color:#fff}.score-bg-excellent{background:linear-gradient(135deg,var(--color-success),#10b981)}.score-bg-good{background:linear-gradient(135deg,#4ade80,var(--color-success))}.score-bg-fair{background:linear-gradient(135deg,var(--color-warning),#d97706)}.score-bg-poor{background:linear-gradient(135deg,var(--color-error),#dc2626)}.word-translation-box{background:#6366f11a;padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-3)}.translation-label{font-size:var(--text-xs);color:var(--color-text-muted);margin-right:var(--space-2)}.translation-text{color:var(--color-primary-light);font-style:italic}.word-error-box{display:flex;gap:var(--space-3);background:#ef44441a;padding:var(--space-3);border-radius:var(--radius-md);border-left:3px solid var(--color-error);margin-bottom:var(--space-3)}.word-error-box .error-icon{flex-shrink:0}.word-error-box p{margin:0;font-size:var(--text-sm);color:var(--color-error-light)}.word-tip-box{display:flex;gap:var(--space-3);background:#22c55e1a;padding:var(--space-3);border-radius:var(--radius-md);border-left:3px solid var(--color-success);margin-bottom:var(--space-3)}.word-tip-box .tip-icon{flex-shrink:0}.word-tip-box p{margin:0;font-size:var(--text-sm);color:var(--color-success)}.word-phonemes-detail{background:#0003;border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-4)}.phonemes-detail-label{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.5px}.phonemes-mini-grid{display:flex;flex-wrap:wrap;gap:var(--space-2)}.phoneme-mini{display:flex;flex-direction:column;align-items:center;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:#ffffff0d;border:1px solid rgba(255,255,255,.1);min-width:50px;transition:all var(--transition-base)}.phoneme-mini:hover{transform:scale(1.05)}.phoneme-mini.good{border-color:#22c55e66;background:#22c55e1a}.phoneme-mini.fair{border-color:#f59e0b66;background:#f59e0b1a}.phoneme-mini.poor{border-color:#ef444466;background:#ef44441a}.phoneme-mini.not-matched{border-style:dashed}.ph-symbol{font-family:Courier New,monospace;font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary)}.ph-score{font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted)}.phoneme-mini.good .ph-score{color:var(--color-success)}.phoneme-mini.fair .ph-score{color:var(--color-warning)}.phoneme-mini.poor .ph-score{color:var(--color-error)}.ph-error{font-size:.6rem;color:var(--color-error-light);margin-top:2px}.practice-word-btn{width:100%;padding:var(--space-4);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-base);font-weight:600;font-family:var(--font-body);transition:all var(--transition-base);box-shadow:0 4px 12px var(--color-primary-glow);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.practice-word-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--color-primary-glow)}.btn-icon{font-size:1.2rem}.disclaimers-section{margin-top:var(--space-8);padding:var(--space-4);background:#ffffff08;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.05)}.disclaimer-text{color:var(--color-text-muted);font-size:var(--text-xs);margin:0;text-align:center;line-height:1.5}.disclaimer-text+.disclaimer-text{margin-top:var(--space-2)}.report-actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-8);flex-wrap:wrap}.action-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);border-radius:var(--radius-xl);font-size:var(--text-base);font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-base);border:none}.action-btn.primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 16px var(--color-primary-glow)}.action-btn.secondary{background:var(--color-surface);color:var(--color-text-primary);border:1px solid rgba(255,255,255,.1)}.action-btn:hover{transform:translateY(-2px)}.action-btn.primary:hover{box-shadow:0 8px 24px var(--color-primary-glow)}@media (max-width: 768px){.video-controls-layout{flex-direction:column}.recording-panel{width:100%;flex-direction:row;padding:var(--space-3)}.recording-panel.recording-active{width:100%}.panel-content{flex-direction:row;width:100%;justify-content:center}.recording-status{flex-direction:row}.metrics-grid{grid-template-columns:1fr}.session-stats{grid-template-columns:repeat(2,1fr)}.phonemes-grid,.words-grid{grid-template-columns:1fr}.report-actions{flex-direction:column}.action-btn{width:100%;justify-content:center}.sing-page{padding:var(--space-4)}.instructions-card,.recording-card,.finished-card,.analysis-results-card{padding:var(--space-6)}.instructions-card h2,.finished-card h2{font-size:var(--text-xl)}.start-button,.stop-button{padding:var(--space-3) var(--space-6);font-size:var(--text-base);width:100%}.recording-time{font-size:var(--text-4xl)}.finished-actions{flex-direction:column}.primary-button,.secondary-button{width:100%}.score-circle{width:150px;height:150px}.score-number{font-size:3rem}.score-item{grid-template-columns:1fr;gap:var(--space-2)}.score-item-label{justify-content:flex-start}.score-item-value{text-align:left;order:3}.analysis-stats,.phonemes-list{grid-template-columns:1fr}.word-practice-header{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.word-practice-score{margin-left:0}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6);position:relative;overflow:hidden}.auth-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none}.bg-gradient{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at top,rgba(99,102,241,.15) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(168,85,247,.1) 0%,transparent 50%)}.bg-pattern{position:absolute;top:0;left:0;right:0;bottom:0;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='%239C92AC' fill-opacity='0.03'%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")}.auth-container{width:100%;max-width:420px;background:var(--color-surface);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-2xl);padding:var(--space-8);box-shadow:var(--shadow-2xl);position:relative;z-index:1}.auth-header{text-align:center;margin-bottom:var(--space-8)}.auth-logo{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;margin-bottom:var(--space-6)}.auth-logo .logo-icon{font-size:2rem}.auth-logo .logo-text{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-header h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--space-2) 0}.auth-subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin:0}.auth-form{display:flex;flex-direction:column;gap:var(--space-5)}.form-group label{font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary)}.form-group input{width:100%;padding:var(--space-4);background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--text-base);font-family:var(--font-body);transition:all var(--transition-base)}.form-group input::placeholder{color:var(--color-text-muted)}.form-group input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.form-options{display:flex;justify-content:flex-end}.forgot-link{font-size:var(--text-sm);color:var(--color-primary-light);text-decoration:none;transition:color var(--transition-base)}.forgot-link:hover{color:var(--color-primary);text-decoration:underline}.auth-submit-btn{width:100%;padding:var(--space-4);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-base);box-shadow:0 4px 16px var(--color-primary-glow);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.auth-submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px var(--color-primary-glow)}.auth-submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.auth-error,.auth-success,.auth-info{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm)}.auth-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:var(--color-error-light)}.auth-success{background:#22c55e1a;border:1px solid rgba(34,197,94,.3);color:var(--color-success)}.auth-info{background:#3b82f61a;border:1px solid rgba(59,130,246,.3);color:#60a5fa}.error-icon,.success-icon,.info-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;flex-shrink:0}.error-icon{background:var(--color-error);color:#fff}.success-icon{background:var(--color-success);color:#fff}.info-icon{background:#3b82f6;color:#fff}.auth-divider{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-6) 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#ffffff1a}.auth-divider span{color:var(--color-text-muted);font-size:var(--text-sm)}.oauth-buttons{display:flex;flex-direction:column;gap:var(--space-3)}.oauth-btn{width:100%;padding:var(--space-4);background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--text-base);font-weight:500;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.oauth-btn:hover:not(:disabled){background:#ffffff1a;border-color:#fff3}.oauth-btn:disabled{opacity:.5;cursor:not-allowed}.oauth-icon{width:20px;height:20px}.auth-switch{text-align:center;margin-top:var(--space-6);color:var(--color-text-muted);font-size:var(--text-sm)}.auth-switch a{color:var(--color-primary-light);text-decoration:none;font-weight:500}.auth-switch a:hover{text-decoration:underline}.auth-terms{text-align:center;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-4);line-height:1.5}.auth-terms a{color:var(--color-text-secondary);text-decoration:none}.auth-terms a:hover{text-decoration:underline}.checkbox-legal{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;margin-top:var(--space-2)}.checkbox-legal input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:var(--color-primary);cursor:pointer;flex-shrink:0}.checkbox-legal span{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.4}.checkbox-legal a{color:var(--color-primary-light);text-decoration:none}.checkbox-legal a:hover{text-decoration:underline}@media (max-width: 480px){.auth-page{padding:var(--space-4);align-items:flex-start;padding-top:var(--space-10)}.auth-container{padding:var(--space-6);border-radius:var(--radius-xl)}.auth-header h1,.auth-logo .logo-text{font-size:var(--text-xl)}}.profile-page{min-height:100vh;background:var(--color-bg-primary);padding:var(--space-6)}.profile-container{max-width:600px;margin:0 auto}.profile-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-8)}.back-link{color:var(--color-text-secondary);text-decoration:none;font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-1);transition:color .2s}.back-link:hover{color:var(--color-text-primary)}.profile-header h1{color:var(--color-text-primary);font-size:var(--text-2xl);font-weight:600;margin:0}.alert{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin-bottom:var(--space-6);font-size:var(--text-sm)}.alert-success{background:#22c55e1a;border:1px solid rgba(34,197,94,.3);color:#4ade80}.alert-icon{font-weight:700}.account-section{background:var(--color-glass);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-4)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5)}.section-header h2{color:var(--color-text-primary);font-size:var(--text-base);font-weight:600;margin:0}.edit-link{background:none;border:none;color:var(--color-primary-light);font-size:var(--text-sm);cursor:pointer;padding:0;transition:color .2s}.edit-link:hover{color:var(--color-primary);text-decoration:underline}.account-info{display:flex;flex-direction:column;gap:var(--space-5)}.info-row{display:flex;align-items:center;gap:var(--space-4)}.info-avatar{width:56px;height:56px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.info-avatar img{width:100%;height:100%;object-fit:cover}.avatar-letter{color:#fff;font-size:var(--text-xl);font-weight:600}.info-details{display:flex;flex-direction:column;gap:2px}.info-name{color:var(--color-text-primary);font-size:var(--text-lg);font-weight:600}.info-email{color:var(--color-text-muted);font-size:var(--text-sm)}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.info-item{display:flex;flex-direction:column;gap:4px}.info-item.full{grid-column:1 / -1}.info-label{color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}.info-value{color:var(--color-text-primary);font-size:var(--text-sm)}.info-note{color:var(--color-text-muted);font-size:var(--text-xs);font-style:italic}.edit-form{display:flex;flex-direction:column;gap:var(--space-5)}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-group label{color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500}.form-group input,.form-group select{padding:var(--space-3) var(--space-4);background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--text-sm);transition:border-color .2s,background .2s}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--color-primary);background:#0000004d}.form-group select{cursor:pointer}.form-hint{color:var(--color-text-muted);font-size:var(--text-xs)}.form-actions{display:flex;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2)}.error-msg{color:var(--color-error-light);font-size:var(--text-sm);margin:0}.btn-primary{padding:var(--space-3) var(--space-6);background:var(--gradient-primary);border:none;border-radius:var(--radius-lg);color:#fff;font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 15px #6366f166}.btn-secondary{padding:var(--space-3) var(--space-6);background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#ffffff0d;border-color:#ffffff4d}.dashboard-link-card{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);background:#6366f11a;border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-lg);transition:all .2s}.dashboard-link-card:hover{background:#6366f126;border-color:#6366f14d}.link-content{display:flex;align-items:center;gap:var(--space-4)}.link-icon{font-size:1.5rem}.link-text{display:flex;flex-direction:column;gap:2px}.link-title{color:var(--color-text-primary);font-size:var(--text-sm);font-weight:600}.link-desc{color:var(--color-text-muted);font-size:var(--text-xs)}.btn-arrow{color:var(--color-primary-light);font-size:var(--text-xl);text-decoration:none;padding:var(--space-2);transition:transform .2s}.btn-arrow:hover{transform:translate(4px)}.legal-links-list{display:flex;flex-direction:column;gap:1px;background:#ffffff0d;border-radius:var(--radius-lg);overflow:hidden}.legal-link-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);text-decoration:none;transition:background .2s}.legal-link-item:hover{background:#ffffff0d}.legal-link-item .link-icon{font-size:1rem}.legal-link-item .link-title{flex:1;color:var(--color-text-secondary);font-size:var(--text-sm)}.legal-link-item .link-arrow{color:var(--color-text-muted);font-size:var(--text-sm)}.danger-zone{border-color:#ef444433}.danger-zone .section-header h2{color:#f87171}.danger-actions{display:flex;flex-direction:column;gap:var(--space-4)}.danger-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);background:#ef44440d;border-radius:var(--radius-lg)}.danger-info{display:flex;flex-direction:column;gap:2px}.danger-title{color:var(--color-text-primary);font-size:var(--text-sm);font-weight:500}.danger-desc{color:var(--color-text-muted);font-size:var(--text-xs)}.btn-danger-outline{padding:var(--space-2) var(--space-4);background:transparent;border:1px solid rgba(239,68,68,.5);border-radius:var(--radius-lg);color:#f87171;font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .2s}.btn-danger-outline:hover{background:#ef44441a}.btn-danger{padding:var(--space-2) var(--space-4);background:#ef4444;border:none;border-radius:var(--radius-lg);color:#fff;font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .2s}.btn-danger:hover{background:#dc2626}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}.modal-content{background:var(--color-bg-secondary);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:var(--space-6);max-width:400px;width:100%}.modal-content h3{color:var(--color-text-primary);font-size:var(--text-lg);margin:0 0 var(--space-4) 0}.modal-content p{color:var(--color-text-secondary);font-size:var(--text-sm);margin:0 0 var(--space-6) 0;line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-3)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:var(--space-4);color:var(--color-text-muted)}.spinner{width:40px;height:40px;border:3px solid rgba(139,92,246,.2);border-top-color:#8b5cf6;border-radius:50%;animation:spin .8s linear infinite}@media (max-width: 640px){.profile-page{padding:var(--space-4)}.info-grid{grid-template-columns:1fr}.danger-item{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.danger-item button{width:100%}.form-actions{flex-direction:column}.form-actions button{width:100%}}.dashboard-page{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f0f23);padding:1.5rem 1rem 3rem;width:100%;box-sizing:border-box}.dashboard-container{max-width:900px;margin:0 auto;padding:0 1rem;width:100%;box-sizing:border-box}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.back-link{color:#888;text-decoration:none;display:flex;align-items:center;gap:.5rem;font-size:.9rem;transition:color .2s}.back-link:hover{color:#fff}.dashboard-header h1{color:#fff;font-size:1.3rem;margin:0}.profile-link{text-decoration:none}.avatar-small{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#06b6d4);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh;color:#888}.spinner{width:40px;height:40px;border:3px solid #333;border-top-color:#8b5cf6;border-radius:50%;animation:spin .8s linear infinite}.hero-card{background:linear-gradient(135deg,#8b5cf64d,#06b6d433);border:1px solid rgba(139,92,246,.3);border-radius:20px;padding:2rem;text-align:center;margin-bottom:1.5rem}.level-badge{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem}.level-number{color:#a78bfa;font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:1px}.level-icon{font-size:1.5rem}.level-title{color:#fff;font-size:1.8rem;margin:0 0 1rem}.level-progress{max-width:300px;margin:0 auto}.progress-bar{height:8px;background:#0000004d;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#06b6d4);border-radius:4px;transition:width .5s ease}.progress-text{color:#888;font-size:.8rem}.stats-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}.stat-box{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-box.main{grid-column:span 3;flex-direction:row;justify-content:space-between;padding:1.25rem 1.5rem;background:linear-gradient(135deg,#22c55e26,#22c55e0d);border-color:#22c55e33}.stat-box.main .stat-content{display:flex;align-items:center;gap:1rem}.stat-box.main .stat-info{display:flex;flex-direction:column}.stat-box.main .stat-number{font-size:2rem}.stat-visual .score-ring{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center}.stat-visual .score-ring span{background:#1a1a2e;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.1rem}.stat-icon{font-size:1.3rem}.stat-number{font-size:1.4rem;font-weight:700;color:#fff}.stat-label{font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.5px}.stat-box.improvement.positive{background:#22c55e1a;border-color:#22c55e33}.stat-box.improvement.positive .stat-number{color:#22c55e}.stat-box.improvement.negative{background:#ef44441a;border-color:#ef444433}.stat-box.improvement.negative .stat-number{color:#ef4444}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;margin-bottom:1.5rem}.dashboard-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.25rem;overflow:hidden;min-width:0}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.card-header h3{color:#fff;font-size:1rem;margin:0}.see-all{color:#8b5cf6;font-size:.8rem;text-decoration:none}.see-all:hover{text-decoration:underline}.card-badge{background:#06b6d433;color:#06b6d4;padding:.2rem .5rem;border-radius:4px;font-size:.7rem;text-transform:uppercase}.loading-inline{display:flex;justify-content:center;padding:2rem}.mini-spinner{width:24px;height:24px;border:2px solid #333;border-top-color:#8b5cf6;border-radius:50%;animation:spin .8s linear infinite}.empty-card{text-align:center;padding:1.5rem;color:#888}.empty-icon{font-size:2rem;display:block;margin-bottom:.5rem}.cta-small{display:inline-block;margin-top:.75rem;color:#8b5cf6;font-size:.85rem;text-decoration:none}.cta-small:hover{text-decoration:underline}.sessions-mini-list{display:flex;flex-direction:column;gap:.5rem}.session-mini{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:#0003;border-radius:8px}.session-mini-info{display:flex;flex-direction:column;gap:.15rem;overflow:hidden;min-width:0;flex:1}.session-mini-title{color:#fff;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-mini-meta{color:#666;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-mini-score{font-size:1.1rem;font-weight:700;padding:.25rem .5rem;border-radius:6px;flex-shrink:0}.session-mini-score.score-excellent{background:#22c55e26;color:#22c55e}.session-mini-score.score-good{background:#4ade8026;color:#4ade80}.session-mini-score.score-fair{background:#f59e0b26;color:#f59e0b}.session-mini-score.score-poor{background:#ef444426;color:#ef4444}.top-songs-list{display:flex;flex-direction:column;gap:.5rem}.top-song-item{display:flex;align-items:center;gap:.75rem;padding:.6rem;background:#0003;border-radius:8px}.rank{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}.rank-1{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.rank-2{background:linear-gradient(135deg,#94a3b8,#64748b)}.rank-3{background:linear-gradient(135deg,#d97706,#b45309)}.rank-4,.rank-5{background:#333}.top-song-info{flex:1;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:.1rem}.top-song-title{color:#fff;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-song-artist{color:#666;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-song-count{color:#888;font-size:.8rem;flex-shrink:0}.dashboard-cta{text-align:center}.cta-button{display:inline-flex;align-items:center;gap:.75rem;background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff;padding:1rem 2.5rem;border-radius:50px;text-decoration:none;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s}.cta-button:hover{transform:translateY(-3px);box-shadow:0 10px 30px #8b5cf666}.cta-icon{font-size:1.3rem}@media (max-width: 700px){.dashboard-grid{grid-template-columns:1fr}.stats-overview{grid-template-columns:repeat(2,1fr)}.stat-box.main{grid-column:span 2}.hero-card{padding:1.5rem}.level-title{font-size:1.5rem}}@media (max-width: 400px){.stats-overview{grid-template-columns:repeat(2,1fr)}.stat-box.main{flex-direction:column;text-align:center;gap:1rem}.stat-box.main .stat-content{flex-direction:column}}.legal-page{min-height:100vh;background:var(--color-bg-primary);display:flex;flex-direction:column}.legal-nav{padding:var(--space-4) var(--space-6);border-bottom:1px solid rgba(255,255,255,.08)}.back-home{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text-secondary);transition:color .2s}.back-home:hover{color:var(--color-text-primary)}.back-arrow{font-size:var(--text-lg)}.back-home .logo-icon{font-size:1.25rem}.back-home .logo-text{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.legal-container{flex:1;max-width:800px;margin:0 auto;padding:var(--space-8) var(--space-6);width:100%}.legal-header{margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid rgba(255,255,255,.08)}.legal-header h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;color:var(--color-text-primary);margin:0 0 var(--space-2) 0}.last-update{color:var(--color-text-muted);font-size:var(--text-sm);font-style:italic;margin:0}.legal-content{color:var(--color-text-secondary);font-size:var(--text-base);line-height:1.7}.legal-content h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--color-text-primary);margin:var(--space-8) 0 var(--space-4) 0;padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.05)}.legal-content h2:first-child{margin-top:0;padding-top:0;border-top:none}.legal-content p{margin:0 0 var(--space-4) 0}.legal-content strong{color:var(--color-text-primary);font-weight:600}.legal-content ul{margin:var(--space-4) 0;padding-left:var(--space-6)}.legal-content li{margin-bottom:var(--space-2)}.legal-content a{color:var(--color-primary-light);text-decoration:none}.legal-content a:hover{text-decoration:underline}.legal-links-nav{margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.08)}.legal-links-nav h3{font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 var(--space-4) 0}.legal-links-grid{display:flex;flex-wrap:wrap;gap:var(--space-3)}.legal-links-grid a{padding:var(--space-2) var(--space-4);background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--color-text-secondary);font-size:var(--text-sm);text-decoration:none;transition:all .2s}.legal-links-grid a:hover{background:#ffffff14;border-color:#ffffff26}.legal-links-grid a.active{background:#8b5cf626;border-color:#8b5cf666;color:var(--color-primary-light)}.legal-footer{padding:var(--space-6);border-top:1px solid rgba(255,255,255,.08);text-align:center}.legal-footer p{color:var(--color-text-muted);font-size:var(--text-sm);margin:0}@media (max-width: 640px){.legal-container{padding:var(--space-6) var(--space-4)}.legal-header h1{font-size:var(--text-2xl)}.legal-content{font-size:var(--text-sm)}.legal-content h2{font-size:var(--text-lg)}.legal-links-grid{flex-direction:column}.legal-links-grid a{text-align:center}}.consent-banner{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid rgba(255,255,255,.1);padding:var(--space-4) var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);z-index:9999;box-shadow:0 -4px 20px #0000004d;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.consent-content{flex:1}.consent-content p{color:var(--color-text-secondary);font-size:var(--text-sm);margin:0;line-height:1.5}.consent-content a{color:var(--color-primary-light);text-decoration:none}.consent-content a:hover{text-decoration:underline}.consent-actions{display:flex;gap:var(--space-3);flex-shrink:0}.consent-btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .2s}.consent-btn.reject{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--color-text-secondary)}.consent-btn.reject:hover{background:#ffffff0d;border-color:#ffffff4d}.consent-btn.accept{background:var(--gradient-primary);border:none;color:#fff}.consent-btn.accept:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--color-primary-glow)}@media (max-width: 640px){.consent-banner{flex-direction:column;text-align:center;padding:var(--space-4)}.consent-content p{font-size:var(--text-xs)}.consent-actions{width:100%}.consent-btn{flex:1;padding:var(--space-3)}}.App{text-align:center;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2)}.App-header{background-color:#fffffff2;padding:3rem;border-radius:20px;box-shadow:0 10px 40px #0003;max-width:600px;margin:2rem}h1{font-size:3rem;color:#667eea;margin:0 0 .5rem;font-weight:700}h3{color:#444;margin:1.5rem 0 1rem;font-size:1.3rem}p{color:#666;font-size:1.1rem;line-height:1.6;margin:.5rem 0}.status-container{background-color:#f5f5f5;padding:1.5rem;border-radius:12px;margin:2rem 0;border:2px solid #e0e0e0}.info-container{background-color:#f9f9f9;padding:1.5rem;border-radius:12px;margin:1rem 0;text-align:left}.info-container p{margin:.8rem 0;font-family:monospace;font-size:1rem}:root{--color-primary: #6366F1;--color-primary-light: #818CF8;--color-primary-dark: #4F46E5;--color-primary-glow: rgba(99, 102, 241, .4);--color-accent: #06B6D4;--color-accent-glow: rgba(6, 182, 212, .4);--color-success: #22C55E;--color-success-light: #4ADE80;--color-success-glow: rgba(34, 197, 94, .4);--color-warning: #F59E0B;--color-warning-light: #FBBF24;--color-warning-glow: rgba(245, 158, 11, .4);--color-error: #EF4444;--color-error-light: #F87171;--color-error-glow: rgba(239, 68, 68, .4);--color-bg-primary: #0F172A;--color-bg-secondary: #1E293B;--color-bg-tertiary: #334155;--color-bg-elevated: #1E293B;--color-surface: rgba(30, 41, 59, .8);--color-surface-hover: rgba(51, 65, 85, .8);--color-glass: rgba(15, 23, 42, .7);--color-text-primary: #F8FAFC;--color-text-secondary: #94A3B8;--color-text-muted: #64748B;--gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A855F7 100%);--gradient-success: linear-gradient(135deg, #22C55E 0%, #10B981 100%);--gradient-warning: linear-gradient(135deg, #F59E0B 0%, #EAB308 100%);--gradient-error: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);--gradient-dark: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);--gradient-glow: radial-gradient(ellipse at center, rgba(99, 102, 241, .15) 0%, transparent 70%);--font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--text-xs: clamp(.75rem, .7rem + .25vw, .875rem);--text-sm: clamp(.875rem, .8rem + .35vw, 1rem);--text-base: clamp(1rem, .9rem + .5vw, 1.125rem);--text-lg: clamp(1.125rem, 1rem + .6vw, 1.25rem);--text-xl: clamp(1.25rem, 1.1rem + .75vw, 1.5rem);--text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);--text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);--text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -2px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -4px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 8px 10px -6px rgba(0, 0, 0, .5);--shadow-glow-primary: 0 0 20px var(--color-primary-glow), 0 0 40px var(--color-primary-glow);--shadow-glow-success: 0 0 20px var(--color-success-glow);--shadow-glow-error: 0 0 20px var(--color-error-glow);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease;--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--color-text-primary);background:var(--color-bg-primary);min-height:100vh;overflow-x:hidden}.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.text-muted{color:var(--color-text-muted)}.score-excellent{color:var(--color-success)}.score-good{color:var(--color-success-light)}.score-fair{color:var(--color-warning)}.score-poor{color:var(--color-error)}.glow-primary{box-shadow:var(--shadow-glow-primary)}.glow-success{box-shadow:var(--shadow-glow-success)}.glass{background:var(--color-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 5px var(--color-error),0 0 10px var(--color-error)}50%{box-shadow:0 0 15px var(--color-error),0 0 30px var(--color-error)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes scoreReveal{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}.animate-fade-in{animation:fadeIn var(--transition-base) ease-out}.animate-fade-in-up{animation:fadeInUp var(--transition-slow) ease-out}.animate-scale-in{animation:fadeInScale var(--transition-spring)}.animate-slide-in{animation:slideInRight var(--transition-slow) ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-bounce{animation:bounce 1s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-float{animation:float 3s ease-in-out infinite}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.stagger-4{animation-delay:.4s}.stagger-5{animation-delay:.5s}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-bg-tertiary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}::selection{background:var(--color-primary);color:#fff}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button{font-family:var(--font-body);cursor:pointer;border:none;background:none}button:disabled{cursor:not-allowed;opacity:.6}input,textarea{font-family:var(--font-body);font-size:var(--text-base)}code{font-family:SF Mono,Fira Code,Consolas,monospace}