@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;600;700&family=JetBrains+Sans:wght@400;600;700&family=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap";.landing-page{min-height:100vh;background:var(--gradient-card-hard);color:var(--color-text-primary);scroll-behavior:smooth}.hero-section{position:relative;min-height:100vh;width:100%;overflow:hidden;background:#000}.hero-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}.hero-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:#0009}@media(min-width:768px){.hero-overlay{background:linear-gradient(to bottom,#000c,#0009,#0000004d)}}.top-navbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-xl);height:64px;background:#00000073;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}@media(min-width:768px){.top-navbar{padding:0 var(--spacing-3xl);height:68px}}.navbar-left{display:flex;align-items:center;gap:var(--spacing-md)}.navbar-logo{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}@media(min-width:768px){.navbar-logo{width:40px;height:40px}}.navbar-brand-name{font-family:var(--font-heading);font-size:1.15rem;font-weight:var(--font-weight-extrabold);color:#fe6e00;letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.7);display:none;-webkit-user-select:none;user-select:none}.navbar-brand-accent{color:#ffffffd9}@media(min-width:480px){.navbar-brand-name{display:block}}@media(min-width:768px){.navbar-brand-name{font-size:1.25rem}}.navbar-right{display:flex;align-items:center;gap:var(--spacing-sm)}@media(min-width:640px){.navbar-right{gap:var(--spacing-md)}}.navbar-lang-select{background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:#fff;padding:6px 28px 6px 10px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-normal);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;display:none}@media(min-width:480px){.navbar-lang-select{display:block}}.navbar-lang-select:hover{background-color:#ffffff26;border-color:#ffffff59}.navbar-lang-select:focus{outline:none;border-color:#fff6}.navbar-icon-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);color:#fff}.navbar-icon-btn:hover{background:#ffffff1a}.navbar-icon-btn:active{background:#ffffff26}.navbar-icon{width:22px;height:22px}@media(min-width:768px){.navbar-icon{width:24px;height:24px}}.navbar-register-btn{padding:8px 16px;font-family:var(--font-heading);font-size:var(--font-size-xs);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:#000;background:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);white-space:nowrap;box-shadow:0 0 16px var(--color-glow-strong)}@media(min-width:640px){.navbar-register-btn{padding:10px 20px;font-size:var(--font-size-sm)}}.navbar-register-btn:hover{transform:translateY(-2px);box-shadow:0 0 24px var(--color-glow-strong);filter:brightness(1.15)}.navbar-register-btn:active{transform:translateY(0)}.navbar-login-btn{padding:8px 16px;font-family:var(--font-heading);font-size:var(--font-size-xs);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:#fff;background:#00000059;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.35);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}@media(min-width:640px){.navbar-login-btn{padding:10px 20px;font-size:var(--font-size-sm)}}.navbar-login-btn:hover{transform:translateY(-2px);background:#0000008c;border-color:#ffffff8c;box-shadow:0 0 20px #ffffff1f}.navbar-login-btn:active{transform:translateY(0)}.navbar-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:8px;z-index:25}.navbar-hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}.navbar-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.navbar-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}.navbar-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-menu-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:15;animation:overlayFadeIn .2s ease-out}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.mobile-menu-panel{display:none;position:absolute;top:64px;left:0;right:0;z-index:18;flex-direction:column;gap:12px;padding:20px 24px;background:#0a0a14eb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1);transform:translateY(-100%);opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;pointer-events:none}.mobile-menu-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}.mobile-menu-lang-select{width:100%;padding:12px 16px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);color:#fff;font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}.mobile-menu-register-btn{width:100%;padding:14px 20px;font-family:var(--font-heading);font-size:var(--font-size-sm);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:#000;background:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);box-shadow:0 0 16px var(--color-glow-strong);text-align:center}.mobile-menu-register-btn:active{filter:brightness(.9);transform:scale(.98)}.mobile-menu-login-btn{width:100%;padding:14px 20px;font-family:var(--font-heading);font-size:var(--font-size-sm);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:#fff;background:#ffffff0f;border:2px solid rgba(255,255,255,.3);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);text-align:center}.mobile-menu-login-btn:active{background:#ffffff1f;transform:scale(.98)}@media(max-width:640px){.navbar-right{display:none}.navbar-hamburger{display:flex}.mobile-menu-overlay{display:block}.mobile-menu-panel{display:flex}}.hero-content-wrapper{position:relative;z-index:10;display:flex;flex-direction:column;min-height:100vh;padding-top:64px}@media(min-width:768px){.hero-content-wrapper{padding-top:68px}}.hero-lang-select{background:#00000080!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.hero-lang-select:hover{background:#000000b3!important;border-color:#fff6!important}.hero-center{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);padding-bottom:calc(var(--spacing-4xl) + 80px)}@media(min-width:768px){.hero-center{padding:var(--spacing-3xl);padding-bottom:calc(var(--spacing-4xl) + 100px)}}.hero-text-box{max-width:700px;text-align:center}.hero-headline{font-family:var(--font-heading);font-size:clamp(1.8rem,5vw,3.5rem);font-weight:var(--font-weight-extrabold);color:#fff;margin:0 0 var(--spacing-lg) 0;line-height:1.1;letter-spacing:var(--letter-spacing-normal);text-transform:uppercase;text-shadow:0 4px 24px rgba(0,0,0,.9),0 8px 48px rgba(0,0,0,.7)}.hero-description{font-family:var(--font-body);font-size:clamp(.95rem,2vw,1.15rem);color:#ffffffd9;margin:0 auto var(--spacing-2xl);line-height:1.7;max-width:580px;text-shadow:0 2px 12px rgba(0,0,0,.8)}.hero-cta-group{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}@media(min-width:480px){.hero-cta-group{flex-direction:row;justify-content:center;gap:var(--spacing-lg)}}.hero-btn{padding:var(--spacing-md) var(--spacing-2xl);font-family:var(--font-heading);font-size:var(--font-size-md);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);min-width:180px;box-shadow:0 8px 32px #00000080}@media(min-width:768px){.hero-btn{padding:var(--spacing-lg) var(--spacing-3xl);font-size:var(--font-size-lg);min-width:200px}}.hero-btn-primary{background:var(--color-accent);color:#000;border:2px solid var(--color-accent);box-shadow:0 0 24px var(--color-glow-strong),0 8px 32px #00000080}.hero-btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 36px var(--color-glow-strong),0 12px 44px #0009;filter:brightness(1.15)}.hero-btn-primary:active{transform:translateY(-1px)}.hero-btn-secondary{background:#00000059;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border:2px solid rgba(255,255,255,.35)}.hero-btn-secondary:hover{transform:translateY(-3px);background:#0000008c;border-color:#ffffff8c;box-shadow:0 0 20px #ffffff1f,0 12px 40px #0009}.hero-btn-secondary:active{transform:translateY(-1px)}.hero-bottom-fade{position:absolute;bottom:0;left:0;right:0;height:140px;z-index:5;background:linear-gradient(to bottom,transparent 0%,rgba(10,10,10,.5) 50%,var(--color-bg-secondary) 100%);pointer-events:none}.tabplayer-showcase{background:#0d1315;padding:var(--spacing-4xl) var(--spacing-lg);position:relative;overflow:hidden}.tabplayer-showcase:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--color-accent) 50%,transparent 100%);opacity:.4}.showcase-container{max-width:1400px;margin:0 auto}.showcase-header{text-align:center;margin-bottom:var(--spacing-3xl)}.showcase-eyebrow{display:block;font-family:var(--font-heading);font-size:var(--font-size-sm);font-weight:var(--font-weight-extrabold);color:var(--color-accent);text-transform:uppercase;letter-spacing:var(--letter-spacing-widest);text-shadow:0 0 15px var(--color-glow-strong);margin-bottom:var(--spacing-md)}.showcase-title{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.5rem);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);line-height:var(--line-height-tight);margin:0 0 var(--spacing-lg) 0;text-transform:uppercase;letter-spacing:var(--letter-spacing-normal)}.showcase-description{font-family:var(--font-body);font-size:var(--font-size-lg);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0 auto;max-width:700px}.showcase-content{display:grid;grid-template-columns:55% 40%;gap:5%;align-items:flex-start}@media(max-width:1100px){.showcase-content{grid-template-columns:1fr;gap:var(--spacing-2xl)}}.showcase-video-side{position:relative}.showcase-video-wrapper{position:relative;background:#000}.showcase-video{width:100%;height:auto;display:block;aspect-ratio:16 / 9;object-fit:cover}.showcase-video-glow{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--color-accent) 0%,transparent 40%,transparent 60%,var(--color-accent) 100%);opacity:.15;z-index:-1;filter:blur(20px);animation:glowPulse 4s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.1;transform:scale(1)}50%{opacity:.2;transform:scale(1.02)}}.showcase-features-side{display:flex;flex-direction:column}.showcase-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-md)}.showcase-features li{display:flex;gap:var(--spacing-md);align-items:flex-start;padding:var(--spacing-md);border-radius:var(--radius-lg);background:var(--gradient-card-soft);border:1px solid var(--color-border-muted);transition:all var(--transition-normal)}.showcase-features li:hover{border-color:var(--color-accent);transform:translate(8px);box-shadow:var(--shadow-glow-sm)}.showcase-feature-icon{font-size:var(--font-size-xl);flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-accent-soft);border-radius:var(--radius-md);border:1px solid var(--color-accent);box-shadow:0 0 15px var(--color-glow-subtle)}.showcase-feature-content h4{font-family:var(--font-heading);font-size:var(--font-size-sm);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);margin:0 0 var(--spacing-2xs) 0;text-transform:uppercase;letter-spacing:var(--letter-spacing-normal)}.showcase-feature-content p{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0;line-height:var(--line-height-relaxed)}.showcase-cta{margin-top:var(--spacing-xl);padding:var(--spacing-md) var(--spacing-2xl);font-family:var(--font-heading);font-size:var(--font-size-md);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:#000;background:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);box-shadow:0 0 24px var(--color-glow-strong);width:100%;text-align:center}.showcase-cta:hover{transform:translateY(-3px);box-shadow:0 0 36px var(--color-glow-strong);filter:brightness(1.15)}.showcase-cta:active{transform:translateY(-1px)}@media(max-width:1100px){.tabplayer-showcase{padding:var(--spacing-3xl) var(--spacing-lg)}.showcase-header{margin-bottom:var(--spacing-2xl)}.showcase-features li{text-align:left}.showcase-cta{width:100%;text-align:center}}@media(max-width:640px){.showcase-features li{flex-direction:column;text-align:center;align-items:center}.showcase-feature-content{text-align:center}}.language-selector-container{flex-shrink:0}.language-selector{background:var(--color-bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--color-accent);border:2px solid var(--color-border-default);padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-body);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);transition:all var(--transition-normal);box-shadow:var(--shadow-glow-sm);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232dfe87' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-md) center;padding-right:var(--spacing-2xl)}.language-selector:hover{background-color:var(--color-bg-card-hover);border-color:var(--color-border-hover);box-shadow:var(--shadow-glow-md);transform:translateY(-2px)}.language-selector:focus{outline:none;border-color:var(--color-border-active);box-shadow:0 0 0 3px var(--color-accent-soft)}.landing-features{padding:var(--spacing-4xl) var(--spacing-lg);background:var(--color-bg-secondary)}.features-container{max-width:1200px;margin:0 auto}.features-title{font-family:var(--font-heading);font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);text-align:center;margin:0 0 var(--spacing-lg) 0;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-shadow:0 0 20px var(--color-glow-strong)}.features-subtitle{font-family:var(--font-body);font-size:var(--font-size-lg);color:var(--color-text-primary);text-align:center;margin:0 auto var(--spacing-3xl) auto;max-width:800px;line-height:var(--line-height-relaxed)}.features-grid-landing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl);margin-top:var(--spacing-2xl)}@media(max-width:1024px){.features-grid-landing{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.features-grid-landing{grid-template-columns:1fr}}.feature-card-landing{background:var(--gradient-card-soft);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border-muted);border-top:2px solid var(--color-accent);border-radius:var(--radius-xl);padding:var(--spacing-2xl) var(--spacing-xl);text-align:center;transition:all var(--transition-normal);box-shadow:var(--shadow-card);display:flex;flex-direction:column}.feature-card-landing:hover{transform:translateY(-6px);border-color:var(--color-accent);box-shadow:var(--shadow-card-hover),0 0 30px var(--color-glow-subtle)}.feature-image-container{width:100%;height:200px;margin-bottom:var(--spacing-lg);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-secondary);display:flex;align-items:center;justify-content:center;position:relative}.feature-image{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:var(--radius-md);transition:transform var(--transition-normal)}.feature-card-landing:hover .feature-image{transform:scale(1.05)}.feature-image-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--color-accent-soft) 0%,transparent 100%);opacity:0;transition:opacity var(--transition-normal);border-radius:var(--radius-md);z-index:1;pointer-events:none}.feature-card-landing:hover .feature-image-container:before{opacity:.2}.feature-icon{font-size:var(--font-size-4xl);margin-bottom:var(--spacing-lg)}.feature-card-landing h3{font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0 0 var(--spacing-md) 0;letter-spacing:var(--letter-spacing-normal);text-transform:uppercase}.feature-card-landing p{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-primary);margin:0;line-height:var(--line-height-relaxed)}.pathway-carousel-card{position:relative;min-height:420px;background:linear-gradient(145deg,#1e1e23f2,#141419fa);border:1px solid rgba(255,138,0,.2);overflow:hidden}.pathway-carousel-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent)}.pathway-image-container{position:relative;height:260px;border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--spacing-md)}.pathway-image-container:after{content:"";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(20,20,25,.9),transparent);pointer-events:none;z-index:1}.pathway-media-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease-in-out}.pathway-media-wrapper.active{opacity:1}.pathway-image{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md);transition:transform .4s ease}.pathway-carousel-card:hover .pathway-image{transform:scale(1.03)}.pathway-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md);z-index:2}.pathway-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#000000b3;border:2px solid var(--color-accent);color:var(--color-accent);font-size:24px;font-weight:300;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);opacity:0;padding:0 0 3px;line-height:1;text-align:center;font-family:system-ui,-apple-system,sans-serif}.pathway-carousel-card:hover .pathway-nav-btn{opacity:1}.pathway-nav-btn:hover{background:var(--color-accent);color:var(--color-bg-primary);transform:translateY(-50%) scale(1.1);box-shadow:0 0 15px var(--color-glow-strong)}.pathway-nav-prev{left:8px}.pathway-nav-next{right:8px}.pathway-content{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:80px}.pathway-title{font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0 0 var(--spacing-sm) 0;letter-spacing:var(--letter-spacing-normal);text-transform:uppercase;text-shadow:0 0 10px var(--color-glow-subtle);transition:all .3s ease}.pathway-description{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0;line-height:var(--line-height-relaxed);transition:all .3s ease}.pathway-indicators{display:flex;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.pathway-indicator{width:10px;height:10px;border-radius:50%;border:2px solid var(--color-border-default);background:transparent;cursor:pointer;transition:all var(--transition-fast);padding:0}.pathway-indicator:hover{border-color:var(--color-accent);transform:scale(1.2)}.pathway-indicator.active{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 8px var(--color-glow-strong)}.pathway-carousel-card:hover{box-shadow:var(--shadow-card-hover),0 0 40px var(--color-glow-subtle)}.pathway-carousel-card:hover .pathway-title{text-shadow:0 0 15px var(--color-glow-strong)}.feature-card-visual{width:100%;min-height:180px;margin-bottom:var(--spacing-lg);border-radius:var(--radius-md);padding:var(--spacing-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);background:linear-gradient(145deg,#141419e6,#0f0f14f2);border:1px solid var(--color-border-muted)}.content-card{overflow:hidden}.content-container{position:relative;height:240px;background:linear-gradient(145deg,#0d0d12,#12121a,#0a0a10);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-md)}.content-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 30% 30%,rgba(255,110,0,.1) 0%,transparent 50%),radial-gradient(ellipse at 70% 70%,rgba(45,254,135,.08) 0%,transparent 40%);pointer-events:none}.content-inner{display:flex;flex-direction:column;align-items:center;gap:16px;z-index:1;width:100%}.content-stats{display:flex;gap:20px;justify-content:center}.content-stat{display:flex;flex-direction:column;align-items:center;gap:2px}.content-stat .stat-number{font-size:28px;font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);line-height:1}.content-stat.featured .stat-number{color:var(--color-accent);text-shadow:0 0 15px var(--color-glow-strong)}.content-stat .stat-desc{font-size:10px;font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.technique-icons{display:flex;gap:10px;justify-content:center}.tech-icon{width:36px;height:36px;border-radius:50%;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all var(--transition-fast)}.tech-icon:hover{background:#ff6e0026;border-color:var(--color-accent);transform:scale(1.1)}.update-badge{display:flex;align-items:center;gap:6px;padding:6px 14px;background:#2dfe871a;border:1px solid rgba(45,254,135,.3);border-radius:var(--radius-full)}.update-icon{font-size:14px;animation:rotateUpdate 3s linear infinite}@keyframes rotateUpdate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.update-text{font-size:10px;font-weight:var(--font-weight-medium);color:#2dfe87e6}.tier-system-card{overflow:hidden}.tier-container{position:relative;height:240px;background:linear-gradient(145deg,#0d0d12,#15151c,#0a0a10);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-md)}.tier-bg-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 30%,rgba(205,127,50,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,rgba(192,192,192,.06) 0%,transparent 50%),radial-gradient(ellipse at 20% 70%,rgba(255,215,0,.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(111,179,210,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 100%,rgba(155,89,182,.1) 0%,transparent 40%);pointer-events:none}.tier-tree{display:flex;flex-direction:column;align-items:center;gap:3px;z-index:1}.tier-row{display:flex;align-items:center;gap:6px}.tier-node{position:relative}.tier-node-inner{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 8px;border-radius:var(--radius-md);background:#1e1e28e6;border:2px solid rgba(255,255,255,.1);transition:all var(--transition-fast);min-width:56px}.tier-node:hover .tier-node-inner{transform:scale(1.05);box-shadow:0 0 20px #ffffff1a}.tier-paw{font-size:14px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.tier-name{font-size:8px;font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-primary)}.tier-levels{font-size:6px;color:var(--color-text-muted);opacity:.8}.tier-bronze .tier-node-inner{border-color:#cd7f32;background:linear-gradient(145deg,#cd7f3226,#1e1e28f2)}.tier-bronze .tier-name{color:#cd7f32}.tier-silver .tier-node-inner{border-color:silver;background:linear-gradient(145deg,#c0c0c01f,#1e1e28f2)}.tier-silver .tier-name{color:silver}.tier-gold .tier-node-inner{border-color:gold;background:linear-gradient(145deg,#ffd7001f,#1e1e28f2)}.tier-gold .tier-name{color:gold}.tier-platinum .tier-node-inner{border-color:#6fb3d2;background:linear-gradient(145deg,#6fb3d226,#1e1e28f2)}.tier-platinum .tier-name{color:#6fb3d2}.tier-diamond .tier-node-inner{border-color:#b9f2ff;background:linear-gradient(145deg,#b9f2ff26,#1e1e28f2)}.tier-diamond .tier-name{color:#b9f2ff}.tier-master .tier-node-inner{border-color:#9b59b6;background:linear-gradient(145deg,#9b59b633,#1e1e28f2);box-shadow:0 0 15px #9b59b64d}.tier-master .tier-node-inner.master{border-width:2px;animation:masterGlow 2s ease-in-out infinite alternate}.tier-master .tier-name{color:#9b59b6}.tier-master .tier-paw{font-size:16px}@keyframes masterGlow{0%{box-shadow:0 0 10px #9b59b64d}to{box-shadow:0 0 25px #9b59b699}}.tier-connector{display:flex;align-items:center;justify-content:center;position:relative}.tier-connector.horizontal{width:20px;height:16px}.tier-connector.horizontal .connector-line{width:100%;height:2px;background:linear-gradient(90deg,var(--color-accent),rgba(255,110,0,.3))}.tier-connector.horizontal .connector-arrow{position:absolute;right:0;font-size:12px;color:var(--color-accent);animation:arrowPulse 1.5s ease-in-out infinite}.tier-connector.vertical{height:8px;width:16px}.tier-connector.vertical .connector-line{width:2px;height:100%;background:linear-gradient(180deg,var(--color-accent),rgba(255,110,0,.3))}.tier-connector.vertical .connector-arrow{position:absolute;bottom:-2px;font-size:12px;color:var(--color-accent);animation:arrowPulseDown 1.5s ease-in-out infinite}.tier-connector.final .connector-line{background:linear-gradient(90deg,var(--color-accent),#9b59b6)}.tier-connector.final .connector-arrow{color:#9b59b6}@keyframes arrowPulse{0%,to{opacity:.5;transform:translate(0)}50%{opacity:1;transform:translate(3px)}}@keyframes arrowPulseDown{0%,to{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(2px)}}.tier-bpm-bar{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;max-width:180px;margin-top:6px;z-index:1}.bpm-start,.bpm-end{font-size:9px;font-weight:var(--font-weight-bold);color:var(--color-text-muted);white-space:nowrap}.bpm-progress-line{flex:1;height:4px;background:#ffffff1a;border-radius:var(--radius-full);overflow:hidden}.bpm-fill{height:100%;width:100%;background:linear-gradient(90deg,#cd7f32,silver,gold,#6fb3d2,#b9f2ff,#9b59b6);animation:bpmShimmer 3s ease-in-out infinite}@keyframes bpmShimmer{0%,to{opacity:.7}50%{opacity:1}}.discipline-card{overflow:hidden}.discipline-container{position:relative;height:240px;background:linear-gradient(145deg,#0d0d12,#12121a,#0a0a10);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-md)}.discipline-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,110,0,.1) 0%,transparent 50%),radial-gradient(ellipse at 50% 100%,rgba(45,254,135,.08) 0%,transparent 40%);pointer-events:none}.discipline-content{display:flex;flex-direction:column;align-items:center;gap:10px;z-index:1;width:100%}.streak-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;background:linear-gradient(135deg,#ff640033,#ff3c001a);border:1px solid rgba(255,110,0,.4);border-radius:var(--radius-full);box-shadow:0 0 20px #ff6e0033}.streak-fire{font-size:24px;animation:fireGlow .6s ease-in-out infinite alternate}@keyframes fireGlow{0%{transform:scale(1) rotate(-5deg);filter:brightness(1)}to{transform:scale(1.15) rotate(5deg);filter:brightness(1.3)}}.streak-data{display:flex;flex-direction:column;align-items:flex-start}.streak-count{font-size:22px;font-weight:var(--font-weight-extrabold);color:#ff6e00;line-height:1;text-shadow:0 0 10px rgba(255,110,0,.5)}.streak-label{font-size:8px;font-weight:var(--font-weight-bold);color:#ff6e00cc;text-transform:uppercase;letter-spacing:.5px}.calendar-grid-mini{display:flex;flex-direction:column;gap:3px;width:100%;max-width:220px}.calendar-week-header{display:flex;justify-content:space-between;padding:0 2px}.calendar-week-header span{width:26px;font-size:8px;font-weight:var(--font-weight-bold);color:var(--color-text-muted);text-align:center;text-transform:uppercase}.calendar-week-row{display:flex;gap:4px;justify-content:center}.cal-day{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);transition:all var(--transition-fast)}.cal-day span{font-size:9px;font-weight:var(--font-weight-medium);color:var(--color-text-muted)}.cal-day.low{background:linear-gradient(145deg,#ffc10726,#ffc1070d);border-color:#ffc10740}.cal-day.low span{color:#ffc107cc}.cal-day.med{background:linear-gradient(145deg,#ffc10740,#ffc1071a);border-color:#ffc10766}.cal-day.med span{color:#ffc107}.cal-day.full{background:linear-gradient(145deg,#2dfe8740,#2dfe871a);border-color:#2dfe8759}.cal-day.full span{color:#2dfe87e6}.cal-day.extra{background:linear-gradient(145deg,#2dfe8766,#2dfe8733);border-color:#2dfe8799;box-shadow:0 0 8px #2dfe874d}.cal-day.extra span{color:#2dfe87;font-weight:var(--font-weight-bold)}.cal-day.today{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 12px var(--color-glow-strong)}.cal-day.today span{color:#000;font-weight:var(--font-weight-bold)}.discipline-stats-row{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-top:4px}.d-stat{display:flex;flex-direction:column;align-items:center}.d-stat-value{font-size:16px;font-weight:var(--font-weight-extrabold);color:var(--color-accent);line-height:1}.d-stat-label{font-size:8px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}.d-stat-divider{width:1px;height:24px;background:#ffffff1a}.education-card{overflow:hidden}.education-container{position:relative;height:240px;background:linear-gradient(145deg,#0d0d12,#14141c,#0a0a10);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-md)}.education-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 30%,rgba(139,69,19,.12) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(45,254,135,.08) 0%,transparent 40%);pointer-events:none}.education-content{display:flex;flex-direction:column;align-items:center;gap:10px;z-index:1;width:100%}.quiz-header{display:flex;align-items:center;gap:8px}.quiz-icon{font-size:18px}.quiz-question{font-size:12px;font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.fretboard-visual{position:relative;width:100%;max-width:200px;height:80px;background:linear-gradient(to right,#8b5a2b66,#6543214d);border:1px solid rgba(139,69,19,.5);border-radius:4px;overflow:hidden}.fret-markers{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:0 10%}.fret-marker{width:2px;height:100%;background:#b4967866}.fret-marker.dot:after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:8px;height:8px;background:#ffffff26;border-radius:50%;margin-left:-3px}.guitar-strings{position:absolute;top:8px;bottom:8px;left:0;right:0;display:flex;flex-direction:column;justify-content:space-between}.guitar-string{height:1px;background:linear-gradient(90deg,#c8b4a066,#b4a08ccc,#c8b4a066);position:relative}.guitar-string.e-high,.guitar-string.b{height:1px}.guitar-string.g,.guitar-string.d,.guitar-string.a{height:2px}.guitar-string.e-low{height:3px}.note-marker{position:absolute;left:65%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background:var(--color-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#000;font-weight:700;box-shadow:0 0 12px var(--color-glow-strong);animation:notePulse 2s ease-in-out infinite}@keyframes notePulse{0%,to{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 12px var(--color-glow-strong)}50%{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 20px var(--color-glow-strong)}}.quiz-answers{display:flex;gap:8px}.quiz-btn{width:36px;height:36px;border-radius:var(--radius-md);background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--color-text-primary);font-size:14px;font-weight:var(--font-weight-bold);cursor:pointer;transition:all var(--transition-fast)}.quiz-btn:hover{background:#ffffff1a;border-color:var(--color-accent)}.quiz-btn.correct{background:linear-gradient(145deg,#2dfe874d,#2dfe871a);border-color:#2dfe87;color:#2dfe87;box-shadow:0 0 12px #2dfe8766}.learning-modes{display:flex;gap:10px}.mode-badge{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-full);background:#ffffff0d;border:1px solid rgba(255,255,255,.1)}.mode-badge span:first-child{font-size:12px}.mode-badge span:last-child{font-size:9px;font-weight:var(--font-weight-medium);color:var(--color-text-muted);text-transform:uppercase}.mode-badge.theory{border-color:#6495ed4d}.mode-badge.guitar{border-color:#ff8a004d}.challenge-card{overflow:hidden}.challenge-container{position:relative;height:240px;background:linear-gradient(145deg,#0d0d12,#141418,#0a0a10);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--spacing-md)}.challenge-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,215,0,.08) 0%,transparent 40%),radial-gradient(ellipse at 30% 80%,rgba(192,192,192,.05) 0%,transparent 30%),radial-gradient(ellipse at 70% 80%,rgba(205,127,50,.05) 0%,transparent 30%);pointer-events:none}.challenge-content{display:flex;flex-direction:column;align-items:center;gap:12px;z-index:1;width:100%}.trophy-header{display:flex;align-items:center;gap:8px}.trophy-icon{font-size:28px;animation:trophyShine 2s ease-in-out infinite}@keyframes trophyShine{0%,to{transform:scale(1) rotate(0);filter:brightness(1)}25%{transform:scale(1.05) rotate(-3deg)}50%{transform:scale(1.1) rotate(0);filter:brightness(1.3)}75%{transform:scale(1.05) rotate(3deg)}}.challenge-month{font-size:11px;font-weight:var(--font-weight-extrabold);color:var(--color-accent);text-transform:uppercase;letter-spacing:1px}.challenge-workflow{display:flex;align-items:center;gap:6px}.workflow-step{display:flex;flex-direction:column;align-items:center;gap:3px}.step-circle{width:36px;height:36px;border-radius:50%;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:16px}.step-name{font-size:8px;color:var(--color-text-muted);text-transform:uppercase}.workflow-arrow{font-size:14px;color:var(--color-accent);margin-bottom:12px;animation:arrowPulse 1.5s ease-in-out infinite}.podium{display:flex;align-items:flex-end;gap:6px;height:50px}.podium-place{display:flex;flex-direction:column;align-items:center;gap:2px}.place-medal{font-size:18px}.place-stand{width:36px;border-radius:3px 3px 0 0}.podium-place.first .place-stand{height:28px;background:linear-gradient(180deg,#ffd70066,#ffd70026);border:1px solid rgba(255,215,0,.5);border-bottom:none}.podium-place.second .place-stand{height:20px;background:linear-gradient(180deg,#c0c0c059,#c0c0c01a);border:1px solid rgba(192,192,192,.4);border-bottom:none}.podium-place.third .place-stand{height:14px;background:linear-gradient(180deg,#cd7f3259,#cd7f321a);border:1px solid rgba(205,127,50,.4);border-bottom:none}.participation{display:flex;align-items:center;gap:6px;padding:4px 12px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full)}.participant-count{font-size:12px;font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.participant-label{font-size:9px;color:var(--color-text-muted)}@media(max-width:640px){.tier-progression{gap:2px}.tier-badge{min-width:40px;padding:var(--spacing-xs)}.tier-icon,.tier-arrow{font-size:var(--font-size-md)}.calendar-day-mini{width:24px;height:24px}.fret-cell{width:26px;height:14px}.challenge-step{min-width:60px;padding:var(--spacing-xs)}.step-icon{font-size:var(--font-size-md)}}.landing-pricing{padding:var(--spacing-4xl) var(--spacing-lg);background:var(--gradient-card-hard);position:relative;overflow:hidden}.pricing-container{max-width:1400px;margin:0 auto;text-align:center}.pricing-title{font-family:var(--font-heading);font-size:var(--font-size-4xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);text-align:center;margin:0 0 var(--spacing-lg) 0;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-shadow:0 0 30px var(--color-glow-strong),0 0 60px var(--color-glow)}.pricing-subtitle{font-family:var(--font-body);font-size:var(--font-size-lg);color:var(--color-text-primary);text-align:center;margin:0 0 var(--spacing-4xl) 0;max-width:900px;margin-left:auto;margin-right:auto;line-height:var(--line-height-relaxed)}.pricing-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-xl);margin-top:var(--spacing-3xl);max-width:1600px;margin-left:auto;margin-right:auto;align-items:stretch}@media(min-width:1400px){.pricing-cards{grid-template-columns:repeat(5,1fr)}}@media(min-width:1200px)and (max-width:1399px){.pricing-cards{grid-template-columns:repeat(3,1fr)}}@media(min-width:768px)and (max-width:1199px){.pricing-cards{grid-template-columns:repeat(2,1fr)}}.pricing-card{background:var(--color-bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--spacing-2xl);position:relative;transition:all var(--transition-normal);box-shadow:var(--shadow-card);display:flex;flex-direction:column;text-align:left}.pricing-card:hover{transform:translateY(-8px);border-color:var(--color-border-hover);box-shadow:var(--shadow-card-hover),var(--shadow-glow-md)}.pricing-card-featured{background:linear-gradient(135deg,var(--color-accent-soft) 0%,var(--color-bg-card) 100%);border-color:var(--color-accent);border-width:3px;box-shadow:var(--shadow-lg),0 0 40px var(--color-glow-strong);transform:scale(1.05);z-index:1}.pricing-card-featured:hover{transform:scale(1.08) translateY(-8px);box-shadow:var(--shadow-xl),0 0 60px var(--color-glow-strong)}@media(max-width:1199px){.pricing-card-featured{transform:scale(1)}.pricing-card-featured:hover{transform:translateY(-8px)}}.pricing-badges{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);align-items:center;text-align:center}.pricing-badge-most-popular{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1e293b;font-family:var(--font-heading);font-size:var(--font-size-xs);font-weight:var(--font-weight-extrabold);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);box-shadow:var(--shadow-md);align-self:center;margin-bottom:var(--spacing-md);display:inline-block}.pricing-badge-save{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1e293b;font-family:var(--font-heading);font-size:var(--font-size-xs);font-weight:var(--font-weight-extrabold);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);box-shadow:var(--shadow-sm);align-self:flex-start}.pricing-card-title{font-family:var(--font-heading);font-size:var(--font-size-2xl);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);margin:0 0 var(--spacing-md) 0;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;line-height:var(--line-height-tight)}.pricing-card-description{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0 0 var(--spacing-lg) 0;line-height:var(--line-height-normal);min-height:2.5em}.pricing-card-price-group{display:flex;flex-direction:column;gap:var(--spacing-xs);margin:0 0 var(--spacing-md) 0}.pricing-card-price{font-family:var(--font-heading);font-size:var(--font-size-3xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0 0 var(--spacing-md) 0;text-shadow:0 0 20px var(--color-glow-strong);line-height:var(--line-height-tight)}.pricing-card-price-group .pricing-card-price{margin:0}.pricing-card-price-secondary{font-family:var(--font-body);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);margin:0;line-height:var(--line-height-normal)}.pricing-card-billed{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0 0 var(--spacing-xl) 0;line-height:var(--line-height-normal)}.pricing-card-button{padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-heading);font-size:var(--font-size-md);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);background:transparent;border:2px solid var(--color-border-default);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);margin-bottom:var(--spacing-xl);width:100%;min-height:48px}.pricing-card-button:hover{background:var(--color-bg-card-hover);border-color:var(--color-accent);color:var(--color-accent);box-shadow:var(--shadow-glow-md);transform:translateY(-2px)}.pricing-card-button-featured{background:var(--color-accent);color:var(--color-neutral-0);border-color:var(--color-accent);box-shadow:var(--shadow-glow-md)}.pricing-card-button-featured:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-neutral-0);box-shadow:var(--shadow-glow-lg);transform:translateY(-2px);filter:brightness(1.15)}.pricing-card-features{list-style:none;padding:0;margin:0;text-align:left;flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs)}.pricing-card-features li{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-primary);padding:var(--spacing-xs) 0;padding-left:var(--spacing-lg);position:relative;line-height:var(--line-height-relaxed);display:flex;align-items:flex-start}.pricing-card-features li:not(.pricing-feature-disabled):before{content:"✓";position:absolute;left:0;color:var(--color-accent);font-weight:var(--font-weight-extrabold);font-size:var(--font-size-md);line-height:var(--line-height-relaxed);margin-top:2px}.pricing-feature-disabled{color:var(--color-text-muted);opacity:.85}.pricing-card-features li.pricing-feature-disabled:before{content:"×"!important;color:#ff4d4d!important;font-weight:var(--font-weight-extrabold);font-size:var(--font-size-md);margin-top:2px;line-height:var(--line-height-relaxed);position:absolute;left:0}.pricing-card-features-free li.pricing-feature-disabled:before{content:"×"!important;color:#ff4d4d!important;font-weight:var(--font-weight-extrabold);font-size:var(--font-size-md);margin-top:2px;line-height:var(--line-height-relaxed);position:absolute;left:0}.pricing-card-footer{margin-top:auto;padding-top:var(--spacing-lg);border-top:1px solid var(--color-border-default)}.pricing-card-includes{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-primary);margin:0 0 var(--spacing-xs) 0;font-weight:var(--font-weight-semibold)}.pricing-card-note{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-secondary);margin:0}.pricing-coming-soon-wrapper{position:relative;margin-top:var(--spacing-3xl);min-height:400px}.pricing-cards-blurred{filter:blur(12px);opacity:.35;pointer-events:none;user-select:none;-webkit-user-select:none}.pricing-coming-soon-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10}.pricing-coming-soon-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-3xl) var(--spacing-2xl);background:#0a0a0fd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid var(--color-border-default);border-radius:var(--radius-xl);max-width:520px;width:90%;box-shadow:0 0 60px #0009,var(--shadow-glow-subtle)}.pricing-coming-soon-icon{font-size:48px;animation:rocketFloat 2s ease-in-out infinite}@keyframes rocketFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.pricing-coming-soon-title{font-family:var(--font-heading);font-size:var(--font-size-3xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0;letter-spacing:var(--letter-spacing-wide);text-shadow:0 0 20px var(--color-glow-strong)}.pricing-coming-soon-text{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-secondary);margin:0;text-align:center;line-height:var(--line-height-relaxed)}.pricing-coming-soon-btn{padding:var(--spacing-md) var(--spacing-2xl);font-family:var(--font-heading);font-size:var(--font-size-md);font-weight:var(--font-weight-extrabold);color:var(--color-neutral-0);background:var(--color-accent);border:2px solid var(--color-accent);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);box-shadow:var(--shadow-glow-md)}.pricing-coming-soon-btn:hover{filter:brightness(1.15);box-shadow:var(--shadow-glow-lg);transform:translateY(-2px)}.landing-leaderboard{padding:var(--spacing-4xl) var(--spacing-lg);background:var(--gradient-card-hard)}.leaderboard-container{max-width:800px;margin:0 auto;background:var(--color-bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg),var(--shadow-glow-subtle)}.leaderboard-title{font-family:var(--font-heading);font-size:var(--font-size-3xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);text-align:center;margin:0 0 var(--spacing-md) 0;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-shadow:0 0 15px var(--color-glow-strong)}.leaderboard-subtitle{font-family:var(--font-body);font-size:var(--font-size-lg);color:var(--color-text-primary);text-align:center;margin:0 0 var(--spacing-xl) 0}.leaderboard-period-selector{display:flex;gap:var(--spacing-md);justify-content:center;margin-bottom:var(--spacing-xl)}.period-btn{padding:var(--spacing-md) var(--spacing-lg);background:var(--color-bg-card);border:2px solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-body);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-normal);letter-spacing:var(--letter-spacing-normal)}.period-btn:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-hover);color:var(--color-accent)}.period-btn.active{background:var(--gradient-primary);border-color:var(--color-accent);color:var(--color-neutral-0);box-shadow:var(--shadow-glow-md);font-weight:var(--font-weight-extrabold)}.leaderboard-list{display:flex;flex-direction:column;gap:var(--spacing-md);max-height:420px;overflow-y:auto;padding-right:var(--spacing-sm);mask-image:linear-gradient(to bottom,black 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 85%,transparent 100%);scrollbar-width:thin;scrollbar-color:var(--color-border-hover) transparent}.leaderboard-list::-webkit-scrollbar{width:5px}.leaderboard-list::-webkit-scrollbar-track{background:transparent}.leaderboard-list::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:10px}.leaderboard-list::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}.leaderboard-entry{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-bg-secondary);border:.5px solid var(--color-border-default);border-radius:var(--radius-md);transition:all var(--transition-normal)}.leaderboard-entry:hover{background:var(--color-bg-tertiary);border-color:var(--color-border-hover);box-shadow:var(--shadow-glow-sm);transform:translate(4px)}.leaderboard-rank{font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);min-width:60px;text-align:center}.leaderboard-nickname{flex:1;font-family:var(--font-body);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}.leaderboard-time{font-family:var(--font-body);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-accent);min-width:100px;text-align:right}.leaderboard-loading,.leaderboard-empty{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary);font-family:var(--font-body);font-size:var(--font-size-lg)}.landing-footer-section{background:var(--color-bg-secondary);border-top:1px solid var(--color-border-muted)}.landing-footer-container{max-width:1100px;margin:0 auto;display:flex;gap:var(--spacing-4xl);padding:var(--spacing-3xl) var(--spacing-xl);align-items:flex-start}.landing-footer-brand{flex:1;min-width:0}.landing-footer-logo-row{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.landing-footer-logo{width:36px;height:36px;object-fit:contain}.landing-footer-brand-name{font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}.landing-footer-brand-accent{color:var(--color-accent)}.landing-footer-description{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0;max-width:480px}.landing-footer-links{flex-shrink:0}.landing-footer-links-title{font-family:var(--font-heading);font-size:var(--font-size-sm);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);margin:0 0 var(--spacing-lg) 0}.landing-footer-links-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-sm)}.landing-footer-links-list li a{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-secondary);text-decoration:none;transition:color var(--transition-fast)}.landing-footer-links-list li a:hover{color:var(--color-accent)}.landing-footer-bottom{border-top:1px solid var(--color-border-muted);padding:var(--spacing-lg) var(--spacing-xl);text-align:center}.landing-footer-bottom p{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0}@media(max-width:640px){.landing-footer-container{flex-direction:column;gap:var(--spacing-2xl);padding:var(--spacing-2xl) var(--spacing-lg)}}@media(max-width:768px){.landing-header{padding:var(--spacing-md) var(--spacing-lg)}.landing-content{padding-top:var(--spacing-3xl)}.landing-title{font-size:var(--font-size-4xl)}.landing-subtitle{font-size:var(--font-size-xl)}.landing-description{font-size:var(--font-size-lg)}.features-grid-landing{grid-template-columns:1fr}.landing-cta{flex-direction:column}.landing-cta-button{width:100%}.landing-leaderboard{padding:var(--spacing-2xl) var(--spacing-md)}.leaderboard-container{padding:var(--spacing-xl)}.leaderboard-title{font-size:var(--font-size-2xl)}.leaderboard-subtitle{font-size:var(--font-size-md);margin-bottom:var(--spacing-lg)}.leaderboard-period-selector{gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.period-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.leaderboard-entry{gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md)}.leaderboard-rank{font-size:var(--font-size-lg);min-width:40px}.leaderboard-nickname{font-size:var(--font-size-md)}.leaderboard-time{font-size:var(--font-size-sm);min-width:auto;white-space:nowrap}.leaderboard-list{gap:var(--spacing-sm);max-height:360px}.landing-pricing{padding:var(--spacing-2xl) var(--spacing-md)}.pricing-title{font-size:var(--font-size-3xl)}.pricing-subtitle{font-size:var(--font-size-md)}.pricing-cards{grid-template-columns:1fr;gap:var(--spacing-lg);max-width:100%}.pricing-card-featured{transform:scale(1)}.pricing-card-featured:hover{transform:translateY(-8px)}.pricing-card{padding:var(--spacing-xl)}.pricing-card-title{font-size:var(--font-size-xl)}.pricing-card-price{font-size:var(--font-size-2xl)}.pricing-coming-soon-wrapper{min-height:auto;margin-top:var(--spacing-xl)}.pricing-cards-blurred{display:none}.pricing-coming-soon-overlay{position:relative;inset:auto}.pricing-coming-soon-content{padding:var(--spacing-2xl) var(--spacing-lg);width:100%;max-width:100%}.pricing-coming-soon-icon{font-size:40px}.pricing-coming-soon-title{font-size:var(--font-size-2xl)}.pricing-coming-soon-text{font-size:var(--font-size-sm)}.pricing-coming-soon-btn{font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-xl)}}@media(max-width:480px){.landing-leaderboard,.landing-pricing{padding:var(--spacing-xl) var(--spacing-sm)}.leaderboard-container{padding:var(--spacing-md);border-radius:var(--radius-lg)}.leaderboard-title{font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm)}.leaderboard-subtitle{font-size:var(--font-size-sm);margin-bottom:var(--spacing-md)}.leaderboard-period-selector{gap:var(--spacing-xs);margin-bottom:var(--spacing-md)}.period-btn{padding:8px 14px;font-size:var(--font-size-xs);border-radius:var(--radius-sm)}.leaderboard-list{gap:6px;max-height:320px;padding-right:2px}.leaderboard-entry{gap:var(--spacing-sm);padding:10px 12px;border-radius:var(--radius-sm)}.leaderboard-rank{font-size:var(--font-size-md);min-width:32px}.leaderboard-nickname{font-size:var(--font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-time{font-size:var(--font-size-xs);min-width:auto;white-space:nowrap;flex-shrink:0}.pricing-title{font-size:var(--font-size-2xl)}.pricing-subtitle{font-size:var(--font-size-sm);margin-bottom:var(--spacing-md)}.pricing-coming-soon-wrapper{margin-top:var(--spacing-md)}.pricing-coming-soon-content{padding:var(--spacing-xl) var(--spacing-md);gap:var(--spacing-md)}.pricing-coming-soon-icon{font-size:32px}.pricing-coming-soon-title{font-size:var(--font-size-xl);text-align:center}.pricing-coming-soon-text{font-size:var(--font-size-xs)}.pricing-coming-soon-btn{font-size:var(--font-size-xs);padding:10px var(--spacing-lg);width:100%;text-align:center}.landing-footer-container{flex-direction:column;gap:var(--spacing-xl);padding:var(--spacing-xl) var(--spacing-md)}.landing-footer-description{font-size:var(--font-size-xs)}}.driver-active .driver-overlay,.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in .2s}.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}:not(body):has(>.driver-active-element){overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.driver-popover-arrow-side-center{display:none}.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}.driver-popover-arrow-none{display:none}.driver-popover.guitarbear-tour-popover{background:var(--color-surface, #1a1a2e)!important;color:var(--color-text, #f1f5f9)!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 24px 64px #0000008c,0 0 0 1px #ffffff0a,0 0 40px #f9731614!important;max-width:420px!important;padding:24px 28px 20px!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}[data-theme=light] .driver-popover.guitarbear-tour-popover,[data-theme=retro-light] .driver-popover.guitarbear-tour-popover{background:#fff!important;color:#1e293b!important;border:1px solid rgba(0,0,0,.08)!important;box-shadow:0 24px 64px #0000001f,0 0 0 1px #0000000a,0 0 40px #f973160f!important}.guitarbear-tour-popover .driver-popover-title{font-size:1.15rem!important;font-weight:700!important;color:#f97316!important;margin-bottom:10px!important;padding-right:28px!important;letter-spacing:-.01em!important;line-height:1.3!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-title,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-title{color:#ea580c!important}.guitarbear-tour-popover .driver-popover-description{font-size:.9rem!important;line-height:1.65!important;color:#ffffffb3!important;white-space:pre-line!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-description,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-description{color:#475569!important}.guitarbear-tour-popover .driver-popover-progress-text{font-size:.75rem!important;color:#ffffff59!important;margin-bottom:10px!important;font-weight:500!important;letter-spacing:.05em!important;text-transform:uppercase!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-progress-text,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-progress-text{color:#94a3b8!important}.guitarbear-tour-popover .driver-popover-navigation-btns{gap:10px!important;margin-top:18px!important}.guitarbear-tour-popover .driver-popover-prev-btn,.guitarbear-tour-popover .driver-popover-next-btn{padding:10px 22px!important;border-radius:10px!important;font-weight:600!important;font-size:.85rem!important;border:none!important;text-shadow:none!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important;cursor:pointer!important;letter-spacing:.01em!important}.guitarbear-tour-popover .driver-popover-prev-btn{background:#ffffff0f!important;color:#ffffffb3!important;border:1px solid rgba(255,255,255,.08)!important}.guitarbear-tour-popover .driver-popover-prev-btn:hover{background:#ffffff1a!important;color:#ffffffe6!important}.guitarbear-tour-popover .driver-popover-next-btn{background:linear-gradient(135deg,#f97316,#ea580c)!important;color:#fff!important;box-shadow:0 2px 8px #f973164d!important}.guitarbear-tour-popover .driver-popover-next-btn:hover{background:linear-gradient(135deg,#fb923c,#f97316)!important;transform:translateY(-1px)!important;box-shadow:0 4px 16px #f9731666!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-prev-btn,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-prev-btn{background:#f1f5f9!important;color:#334155!important;border:1px solid #e2e8f0!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-prev-btn:hover,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-prev-btn:hover{background:#e2e8f0!important}.guitarbear-tour-popover .driver-popover-close-btn{color:#ffffff4d!important;width:30px!important;height:30px!important;border-radius:8px!important;transition:all .2s ease!important;top:14px!important;right:14px!important}.guitarbear-tour-popover .driver-popover-close-btn:hover{background:#ffffff14!important;color:#fffc!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-close-btn,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-close-btn{color:#94a3b8!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-close-btn:hover,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-close-btn:hover{background:#f1f5f9!important;color:#334155!important}.guitarbear-tour-popover .driver-popover-arrow{border-color:var(--color-surface, #1a1a2e)!important}.guitarbear-tour-popover .driver-popover-arrow-side-left{border-right-color:var(--color-surface, #1a1a2e)!important}.guitarbear-tour-popover .driver-popover-arrow-side-right{border-left-color:var(--color-surface, #1a1a2e)!important}.guitarbear-tour-popover .driver-popover-arrow-side-top{border-bottom-color:var(--color-surface, #1a1a2e)!important}.guitarbear-tour-popover .driver-popover-arrow-side-bottom{border-top-color:var(--color-surface, #1a1a2e)!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-arrow,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-arrow{border-color:#fff!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-arrow-side-left,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-arrow-side-left{border-right-color:#fff!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-arrow-side-right,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-arrow-side-right{border-left-color:#fff!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-arrow-side-top,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-arrow-side-top{border-bottom-color:#fff!important}[data-theme=light] .guitarbear-tour-popover .driver-popover-arrow-side-bottom,[data-theme=retro-light] .guitarbear-tour-popover .driver-popover-arrow-side-bottom{border-top-color:#fff!important}.driver-active-element{position:relative!important;z-index:100001!important;outline-offset:4px!important;border-radius:8px!important}@media(max-width:768px){.driver-popover.guitarbear-tour-popover{max-width:calc(100vw - 24px)!important;margin:12px!important;padding:20px 22px 16px!important;border-radius:14px!important}.guitarbear-tour-popover .driver-popover-title{font-size:1.05rem!important}.guitarbear-tour-popover .driver-popover-description{font-size:.85rem!important}.guitarbear-tour-popover .driver-popover-prev-btn,.guitarbear-tour-popover .driver-popover-next-btn{padding:9px 18px!important;font-size:.82rem!important}}.skeleton-pulse{background:var(--color-bg-tertiary, #1a1a2e);position:relative;overflow:hidden;flex-shrink:0}.skeleton-pulse:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 40%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 60%,transparent 100%);animation:skeleton-shimmer 1.8s ease-in-out infinite}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.theme-light .skeleton-pulse{background:#e5e7eb}.theme-light .skeleton-pulse:after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 40%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.4) 60%,transparent 100%)}.skeleton-mt-xs{margin-top:4px}.skeleton-mt-sm{margin-top:8px}.skeleton-mt-md{margin-top:16px}.skeleton-mt-lg{margin-top:24px}.skeleton-ml-auto{margin-left:auto}.skeleton-row{display:flex;align-items:center}.skeleton-row-between{display:flex;align-items:center;justify-content:space-between;gap:16px}.skeleton-medals-row{display:flex;gap:20px;align-items:center;padding:8px 0}.skeleton-medal-item{display:flex;flex-direction:column;align-items:center;gap:8px}.skeleton-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}.skeleton-achievements-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}.skeleton-pathways{max-width:1356px;margin:0 auto;padding:32px 28px 80px}.skeleton-pathways-hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}.skeleton-pathways-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}.skeleton-pathway-card{background:var(--color-surface, #111827);border:1px solid var(--color-border-muted, #1f2937);border-radius:16px;overflow:hidden}.skeleton-pathway-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}.skeleton-lesson-card{background:var(--color-surface, #111827);border:1px solid var(--color-border-muted, #1f2937);border-radius:14px;padding:20px}.skeleton-panels-layout{height:100%;align-items:stretch!important}.skeleton-video-card{flex-shrink:0;width:45%;min-width:300px;background:var(--color-alphatab-bg, rgba(10, 14, 22, .85));border-radius:var(--radius-xl, 16px);border:2px solid var(--color-alphatab-border, rgba(148, 163, 184, .12));box-shadow:var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, .3));overflow:hidden;display:flex;align-items:center;justify-content:center}.skeleton-video-ratio{width:100%;padding-bottom:56.25%;position:relative}.skeleton-video-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.7}.skeleton-tab-card{flex:1;min-width:200px;min-height:400px;background:var(--color-alphatab-bg, rgba(10, 14, 22, .85));border-radius:var(--radius-xl, 16px);border:2px solid var(--color-alphatab-border, rgba(148, 163, 184, .12));box-shadow:var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, .3));padding:var(--spacing-lg, 20px);display:flex;flex-direction:column;gap:28px;overflow:hidden}.skeleton-staff-group{display:flex;flex-direction:column;gap:7px}.skeleton-content-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;background:var(--color-bg, #0a0a0f);animation:skeleton-fade-in .15s ease-out}@keyframes skeleton-fade-in{0%{opacity:0}to{opacity:1}}@media(max-width:1200px){.skeleton-pathways-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:1023px){.skeleton-pathways-hero{grid-template-columns:1fr}.skeleton-pathways-grid{grid-template-columns:repeat(2,1fr)}.skeleton-pathways{padding:20px 16px 60px}.skeleton-achievements-row{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.skeleton-pathways-grid{grid-template-columns:1fr}.skeleton-achievements-row{grid-template-columns:repeat(2,1fr)}.skeleton-panels-layout{flex-direction:column}.skeleton-video-card{width:100%;min-width:0}.skeleton-tab-card{min-width:0;min-height:300px}}.lvlgate{padding:0 28px 24px;width:100%}.lvlgate-header{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--color-text-primary);letter-spacing:.02em;padding-top:16px;margin-bottom:14px;border-top:1px solid var(--color-border-muted)}.lvlgate-header svg{color:#ef4444;flex-shrink:0}.lvlgate-reqs{background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:10px;overflow:hidden;max-width:520px}.lvlgate-reqs-head{display:grid;grid-template-columns:100px 1fr 1fr;gap:6px;padding:8px 14px;border-bottom:1px solid var(--color-border-muted)}.lvlgate-reqs-col-level,.lvlgate-reqs-col{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);opacity:.7}.lvlgate-req-row{display:grid;grid-template-columns:100px 1fr 1fr;gap:6px;align-items:center;padding:10px 14px;border-radius:6px;transition:background .2s ease}.lvlgate-req-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.03)}.lvlgate-req-row.clickable{cursor:pointer}.lvlgate-req-row.clickable:hover{background:#ef44440f}.lvlgate-req-row.clickable:active{background:#ef44441a}.lvlgate-req-actions{display:flex;align-items:center;gap:8px}.lvlgate-req-chevron{color:#ef4444;opacity:.5;flex-shrink:0;transition:opacity .2s ease,transform .2s ease}.lvlgate-req-row.clickable:hover .lvlgate-req-chevron{opacity:1;transform:translate(2px)}.lvlgate-req-level{display:flex;align-items:center;gap:6px}.lvlgate-req-dot{display:flex;align-items:center;flex-shrink:0}.lvlgate-req-dot.ok{color:var(--color-success)}.lvlgate-req-dot.fail{color:#ef4444}.lvlgate-req-level-num{font-size:12px;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}.lvlgate-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;width:fit-content}.lvlgate-pill.ok{background:#35c56a1a;color:var(--color-success)}.lvlgate-pill.ok .lvlgate-pill-arrow{color:#35c56a59}.lvlgate-pill.fail{background:#ef444414;color:#ef4444}.lvlgate-pill.fail .lvlgate-pill-arrow{color:#ef444459}.lvlgate-pill-val{font-weight:600}.lvlgate-pill-check{font-size:11px;font-weight:700;opacity:.8}.lvlgate-pill-arrow{flex-shrink:0}.lvlgate-pill-target{font-weight:700}.lvlgate-time{display:flex;flex-direction:column;gap:4px}.lvlgate-time-text{display:flex;align-items:center;gap:2px;font-size:12px;font-weight:600}.lvlgate-time.ok .lvlgate-time-current{color:var(--color-success)}.lvlgate-time.fail .lvlgate-time-current{color:#ef4444;font-weight:700}.lvlgate-time-req{color:var(--color-text-muted);font-weight:500}.lvlgate-time-check{color:var(--color-success);font-weight:700;font-size:11px;margin-left:3px}.lvlgate-time-bar{width:100%;max-width:120px;height:3px;background:#ef44441a;border-radius:2px;overflow:hidden}.lvlgate-time-fill{height:100%;background:linear-gradient(90deg,#ef4444,#f87171);border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1)}.lvlgate-or{display:flex;align-items:center;gap:14px;padding:14px 0;max-width:520px}.lvlgate-or-line{flex:1;height:1px;background:linear-gradient(90deg,transparent 0%,var(--color-border) 30%,var(--color-border) 70%,transparent 100%)}.lvlgate-or-text{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);opacity:.5}.lvlgate-path-label{display:flex;align-items:center;gap:10px;margin-bottom:12px;max-width:520px;font-size:13px;font-weight:600;color:var(--color-text-secondary);letter-spacing:.01em}.lvlgate-path-number{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#ef444414;color:#ef4444;font-size:11px;font-weight:800;flex-shrink:0;border:1.5px solid rgba(239,68,68,.15)}.lvlgate-exam{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px;max-width:520px;position:relative;overflow:hidden;border:1px solid transparent;background:linear-gradient(var(--color-bg-tertiary),var(--color-bg-tertiary)) padding-box,linear-gradient(135deg,var(--color-accent-hover),rgba(255,110,0,.1),var(--color-accent-hover)) border-box;transition:box-shadow .2s ease}.lvlgate-exam:hover{box-shadow:0 0 16px var(--color-glow-subtle)}.lvlgate-exam-icon{width:36px;height:36px;border-radius:8px;background:var(--color-accent-soft);color:var(--color-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.lvlgate-exam-body{flex:1;min-width:0}.lvlgate-exam-title{font-size:14px;font-weight:700;color:var(--color-text-primary);margin-bottom:2px}.lvlgate-exam-desc{font-size:12px;color:var(--color-text-muted);line-height:1.4}.lvlgate-exam-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .2s ease;color:#fff;background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-primary-700) 100%);box-shadow:0 3px 10px var(--color-glow)}.lvlgate-exam-btn:hover{transform:translateY(-1px);box-shadow:0 5px 16px var(--color-glow-strong)}.lvlgate-exam-btn:active{transform:translateY(0)}.lvlgate-exam-btn.wait{background:linear-gradient(135deg,#f6d365,#fda085);box-shadow:0 3px 10px #fda08533;color:#1a1a2e}.lvlgate-exam-btn.upgrade{background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-primary-800) 100%)}.lvlgate-locked{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);color:var(--color-text-muted);font-size:13px}@media(max-width:767px){.lvlgate{padding:0 16px 16px}.lvlgate-reqs,.lvlgate-or,.lvlgate-exam,.lvlgate-path-label{max-width:100%}.lvlgate-reqs-head{grid-template-columns:80px 1fr 1fr;padding:6px 10px}.lvlgate-req-row{grid-template-columns:80px 1fr 1fr;padding:8px 10px;gap:4px}.lvlgate-req-level-num{font-size:11px}.lvlgate-pill{padding:3px 7px;font-size:11px;gap:4px}.lvlgate-time-text{font-size:11px}.lvlgate-exam{flex-direction:column;text-align:center;padding:16px 14px;gap:10px}.lvlgate-exam-btn{width:100%;justify-content:center;padding:11px 16px;font-size:13px}}@media(max-width:420px){.lvlgate-reqs-head,.lvlgate-req-row{grid-template-columns:70px 1fr 1fr}}.lesson-nav-index{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:100;pointer-events:auto;display:flex;flex-direction:column;align-items:center}.lesson-nav-index-inner{display:flex;flex-direction:column;gap:8px;padding:12px 8px;background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 20px #00000026}.lesson-nav-items{display:flex;flex-direction:column;gap:6px}.lesson-nav-item{position:relative;display:flex;align-items:center;min-width:32px;height:32px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.lesson-nav-item-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--color-text-secondary);transition:all .2s ease;flex-shrink:0}.lesson-nav-item:hover .lesson-nav-item-number{background:var(--color-bg-card-hover);border-color:var(--color-border-hover);color:var(--color-text-primary);transform:scale(1.08)}.lesson-nav-item.active .lesson-nav-item-number{background:var(--color-accent);border-color:var(--color-accent);color:#fff;box-shadow:0 0 12px var(--color-glow-subtle)}.lesson-nav-item.current .lesson-nav-item-number{background:var(--color-accent);border-color:var(--color-accent);color:#fff;animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px var(--color-glow-subtle)}50%{box-shadow:0 0 16px var(--color-accent),0 0 24px var(--color-glow-subtle)}}.lesson-nav-item.completed .lesson-nav-item-number{background:var(--color-success);border-color:var(--color-success);color:#fff}.lesson-nav-item.completed:hover .lesson-nav-item-number{background:var(--color-success);transform:scale(1.08)}.lesson-nav-item.locked{cursor:pointer}.lesson-nav-item.locked .lesson-nav-item-number{background:var(--color-bg-tertiary);border-color:var(--color-border-muted);color:var(--color-text-muted);opacity:.5}.lesson-nav-item.locked:hover .lesson-nav-item-number{transform:scale(1.08);background:var(--color-bg-card-hover);opacity:.7}.lesson-nav-item-name{position:absolute;left:40px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:8px 14px;background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:10px;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--color-text-primary);box-shadow:0 4px 16px #00000026;opacity:0;visibility:hidden;transform:translateY(-50%) translate(-8px);transition:all .2s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:101}.lesson-nav-item-name.visible{opacity:1;visibility:visible;transform:translateY(-50%) translate(0)}.lesson-nav-item.locked .lesson-nav-item-name{color:var(--color-text-muted)}.lesson-nav-reminder-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--color-border-muted);background:var(--color-surface);color:var(--color-accent, #f97316);cursor:pointer;transition:all .2s ease;margin-bottom:12px;align-self:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 20px #00000026}.lesson-nav-reminder-btn:hover{background:var(--color-accent, #f97316);color:#fff;border-color:var(--color-accent, #f97316);box-shadow:0 0 20px #f973164d;transform:scale(1.08)}.lesson-nav-reminder-btn:active{transform:scale(.96)}.lesson-nav-reminder-tooltip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translate(-6px);white-space:nowrap;padding:7px 12px;background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:8px;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--color-text-primary);box-shadow:0 4px 16px #0003;opacity:0;visibility:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:101}.lesson-nav-reminder-btn:hover .lesson-nav-reminder-tooltip{opacity:1;visibility:visible;transform:translateY(-50%) translate(0)}@media(max-width:1023px){.lesson-nav-index{display:none}}@media(min-width:1024px)and (max-width:1279px){.lesson-nav-index{left:8px}.lesson-nav-index-inner{padding:8px 6px;gap:6px}.lesson-nav-item-number{width:28px;height:28px;font-size:12px}.lesson-nav-item{min-width:28px;height:28px}}.theme-light .lesson-nav-index-inner{background:#ffffffe6;box-shadow:0 4px 20px #00000014}.theme-light .lesson-nav-item-name{background:#fffffff2;box-shadow:0 4px 16px #0000001a}.lesson-list-container{min-height:100vh;background:var(--color-bg);padding:0;position:relative;color:var(--color-text-primary)}.lesson-list-container:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 0%,var(--color-glow-subtle) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,var(--color-glow-subtle) 0%,transparent 50%);pointer-events:none;z-index:0;opacity:.5}.lessons-list-header{background:var(--color-surface);border-bottom:1px solid var(--color-border-muted);padding:20px 28px;position:relative;z-index:100}.lessons-header-inner{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:32px;max-width:1300px;margin:0 auto}.lessons-header-left{display:flex;align-items:center;gap:16px}.lessons-header-logo{height:44px;width:auto;object-fit:contain;flex-shrink:0;cursor:pointer;transition:all .2s ease;opacity:.9}.lessons-header-logo:hover{opacity:1;transform:scale(1.05)}.lessons-header-center{display:flex}.lessons-header-exit-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s ease-out;flex-shrink:0;margin-left:auto}.lessons-header-exit-btn:hover{border-color:var(--color-border-hover);color:var(--color-text-primary);background:var(--color-bg-card-hover);transform:scale(1.03)}.lessons-header-exit-btn:active{transform:scale(.98)}.lessons-header-title-section{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--color-accent);padding-left:16px}.lessons-header-label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}.lessons-header-title{font-family:var(--font-heading);font-size:16px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent);margin:0;line-height:1.2;text-shadow:0 0 20px var(--color-glow-subtle)}.lessons-header-right{display:flex;align-items:center;justify-content:flex-end;gap:12px}.lessons-container{max-width:1356px;margin:0 auto;padding:48px 28px 80px;position:relative;z-index:2}@media(max-width:1023px){.lessons-container{padding:32px 20px 60px}}.level-group{margin-bottom:80px}.level-group:last-child{margin-bottom:0}.level-summary-strip{display:flex;flex-direction:column;gap:0;padding:0;background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:16px;margin-bottom:40px;box-shadow:0 1px 3px #0000001a;overflow:visible}.exam-tooltip{visibility:hidden;opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(10px);background:#1e293b;color:#f8fafc;padding:12px;border-radius:8px;box-shadow:0 10px 25px -5px #0006,0 4px 10px -2px #0000004d;width:max-content;min-width:220px;max-width:300px;white-space:normal;font-size:13px;font-weight:400;z-index:1000;border:1px solid #334155;transition:all .2s cubic-bezier(.16,1,.3,1);pointer-events:none;margin-bottom:12px}.level-summary-main-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;padding:20px 28px;width:100%}.level-summary-left{display:flex;flex-direction:column;gap:6px}.level-summary-title{font-family:var(--font-heading);font-size:16px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-primary);margin:0;line-height:1.2}.level-summary-subtext{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}.level-summary-center{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:200px}.level-summary-progress-wrapper{width:100%;max-width:300px;display:flex;flex-direction:column;gap:8px;align-items:center}.level-summary-progress-bar{width:100%;height:6px;background:var(--color-bg-tertiary);border-radius:10px;overflow:hidden;position:relative}.level-summary-progress-fill{height:100%;background:linear-gradient(180deg,var(--color-accent) 0%,var(--color-accent) 100%);border-radius:10px;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative;opacity:.9}.level-summary-progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 100%);border-radius:10px 10px 0 0}.level-summary-progress-text{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--color-text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.level-summary-total-time{display:flex;align-items:center;gap:6px;font-family:var(--font-body)}.level-summary-total-time-label{font-size:12px;font-weight:500;color:var(--color-text-muted);letter-spacing:.02em}.level-summary-total-time-value{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;transition:color .3s ease}.level-summary-right{display:flex;align-items:center;justify-content:flex-end}.level-summary-stat-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:20px;border:1px solid;font-family:var(--font-body);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;transition:all .15s ease-out;background:linear-gradient(135deg,var(--color-accent-soft) 0%,var(--color-accent-hover) 100%);border-color:var(--color-border);box-shadow:0 0 12px var(--color-glow-subtle),inset 0 1px #ffffff1a;color:var(--color-text-primary)}.path-container{position:relative;padding:0}.path-segment{position:relative;margin-bottom:56px}.path-segment:last-child{margin-bottom:0}.path-connector{position:absolute;left:28px;top:-32px;width:3px;height:32px;background:linear-gradient(180deg,var(--color-accent) 0%,transparent 100%);border-radius:2px;z-index:1;box-shadow:var(--shadow-glow-sm)}.path-connector.locked{background:linear-gradient(180deg,var(--color-border-muted) 0%,transparent 100%);opacity:.4;box-shadow:none}.level-section{margin-bottom:32px}.section-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;margin-bottom:20px;border-bottom:1px solid var(--color-border-muted);transition:all .15s ease-out}.section-header.unlocked{border-bottom-color:var(--color-border)}.section-header.locked{opacity:.45;border-bottom-color:var(--color-border-muted)}.section-header.current{border-bottom-color:var(--color-accent);border-bottom-width:2px}.section-header-left{display:flex;align-items:center;gap:12px}.section-code-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:20px;border:1px solid;font-family:var(--font-body);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;transition:all .15s ease-out;background:linear-gradient(135deg,var(--color-accent-soft) 0%,var(--color-accent-hover) 100%);border-color:var(--color-border);box-shadow:0 0 12px var(--color-glow-subtle),inset 0 1px #ffffff1a;color:var(--color-text-primary)}.section-name-text{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-text-primary);margin-left:12px;letter-spacing:-.01em}.section-header-right{display:flex;align-items:center;gap:12px}.section-progress-wrapper{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.section-progress-text{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--color-text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.section-progress-text.section-progress-completed{color:var(--color-accent)}.section-progress-bar{width:120px;height:4px;background:var(--color-bg-tertiary);border-radius:10px;overflow:hidden;position:relative}.section-progress-fill{height:100%;background:linear-gradient(180deg,var(--color-accent) 0%,var(--color-accent) 100%);border-radius:10px;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative;opacity:.9}.section-progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 100%);border-radius:10px 10px 0 0}.section-condition-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:16px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--color-text-secondary);white-space:nowrap}.sublevel-unlock-banner{margin:8px 0 20px;padding:12px 16px;border-radius:10px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);transition:all .3s ease}.sublevel-unlock-banner.complete{background:#35c56a14;border-color:#35c56a40}.sublevel-unlock-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:8px}.sublevel-unlock-banner.complete .sublevel-unlock-title{color:var(--color-success);margin-bottom:0}.sublevel-unlock-checks{display:flex;flex-direction:column;gap:8px}.sublevel-unlock-check{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sublevel-unlock-check-icon{font-size:14px;flex-shrink:0}.sublevel-unlock-check-text{font-size:12px;font-weight:600;color:var(--color-text-primary)}.sublevel-unlock-check.met .sublevel-unlock-check-text{color:var(--color-success)}.sublevel-unlock-check.pending .sublevel-unlock-check-text{color:var(--color-accent)}.sublevel-unlock-check-hint{font-size:11px;font-weight:500;color:var(--color-text-muted)}.sublevel-unlock-progress-bar{width:100%;height:4px;background:var(--color-bg-secondary);border-radius:2px;overflow:hidden;margin-top:4px}.sublevel-unlock-progress-fill{height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover));border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1)}.section-lessons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.sub-level-progress-section{margin-top:0;width:100%}.sub-level-progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.sub-level-progress-text{font-family:var(--font-body);font-size:13px;color:var(--color-text-secondary);font-weight:500;letter-spacing:.2px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.next-sub-level-info{font-size:12px;color:var(--color-accent);font-weight:500;opacity:.8}.sub-level-progress-bar{width:100%;height:6px;background:var(--color-bg-tertiary);border:none;border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 3px #0000001a}.sub-level-progress-fill{height:100%;background:var(--gradient-primary);border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-glow-sm)}.sub-level-progress-fill.completed{background:var(--color-success);box-shadow:var(--shadow-glow-md);animation:none}@media(max-width:1023px){.lessons-list-header{padding:12px 16px}.lessons-header-inner{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;grid-template-columns:none}.lessons-header-left{display:flex;flex-direction:row;align-items:center;gap:10px;flex:1;min-width:0}.lessons-header-logo{height:32px;flex-shrink:0}.lessons-header-title-section{flex:1;min-width:0;gap:2px}.lessons-header-label{font-size:9px;letter-spacing:.15em}.lessons-header-title{font-size:13px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lessons-header-center{display:none}.lessons-header-right{flex:0 0 auto;margin-left:auto;width:auto}.lessons-header-exit-btn{width:32px;height:32px;border-radius:8px}.lessons-container{padding:20px 16px 60px}.level-summary-strip{margin-bottom:32px;border-radius:14px}.level-summary-main-row{grid-template-columns:1fr;gap:16px;padding:16px}.level-summary-left{gap:4px}.level-summary-title{font-size:16px}.level-summary-subtext{font-size:11px}.level-summary-center{width:100%;min-width:auto}.level-summary-progress-wrapper{gap:8px}.level-summary-progress-text{font-size:11px}.level-summary-right{width:100%;justify-content:flex-start}.level-summary-stat-pill{font-size:11px;padding:8px 12px}.level-group{margin-bottom:48px}.section-header{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px}.section-header-left{width:100%}.section-code-pill{font-size:12px;padding:6px 12px}.section-header-right{width:100%;justify-content:space-between;gap:12px}.section-progress-wrapper{width:100%;align-items:flex-start;gap:8px}.section-progress-bar{width:100%;max-width:none;height:4px}.section-progress-text{font-size:11px}.section-progress-label{font-size:10px}.section-lessons-grid{grid-template-columns:1fr;gap:14px}.lesson-card-modern{padding:16px;border-radius:14px}.lesson-card-modern-header{gap:10px;margin-bottom:12px}.lesson-card-modern-title-section{gap:4px;flex:1;min-width:0}.lesson-card-modern-code{font-size:14px}.lesson-card-modern-artist{font-size:11px}.lesson-card-modern-rank-pill{font-size:10px;padding:4px 8px;gap:4px}.lesson-card-modern-body{gap:10px}.lesson-card-modern-stats{gap:8px}.lesson-card-modern-stat{font-size:11px;padding:6px 10px}.lesson-card-modern-footer{margin-top:12px;gap:8px}.lesson-card-modern-button,.lesson-card-modern-button-locked{padding:10px 16px;font-size:12px}.loading-container,.error-container{padding:40px 20px;min-height:50vh}.loading-spinner{width:40px;height:40px}.loading-container p,.error-container p{font-size:14px}}@media(max-width:479px){.lessons-list-header{padding:10px 12px}.lessons-header-logo{height:28px}.lessons-header-title{font-size:12px}.lessons-container{padding:16px 12px 60px}.level-summary-strip{padding:14px;gap:12px}.level-summary-title{font-size:14px}.level-summary-subtext,.level-summary-progress-text{font-size:10px}.level-summary-stat-pill{font-size:10px;padding:6px 10px}.level-group{margin-bottom:40px}.section-header{padding:12px 14px}.section-code-pill{font-size:11px;padding:5px 10px}.section-progress-text{font-size:10px}.section-progress-label{font-size:9px}.section-lessons-grid{gap:12px}.lesson-card-modern{padding:12px}.lesson-card-modern-code{font-size:13px}.lesson-card-modern-name{font-size:10px}.lesson-card-progress-row{flex-direction:column;align-items:flex-start;gap:8px}.lesson-card-progress-left{width:100%}.lesson-card-tier-bpm-row{flex-wrap:wrap;gap:6px}.lesson-card-modern-rank-pill{font-size:9px;padding:4px 8px;gap:4px}.lesson-card-bpm-badge{font-size:8px;padding:3px 6px}.lesson-card-modern-stat{font-size:10px;padding:5px 8px}.lesson-card-modern-button,.lesson-card-modern-button-locked{padding:8px 14px;font-size:11px}}.theme-light .lessons-list-header{background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:0 1px 3px #0000000f,0 1px #fff inset}.theme-light .lessons-header-exit-btn{background:#f5f5f5;border-color:#e0e0e0;color:#666}.theme-light .lessons-header-exit-btn:hover{border-color:#ccc;color:#333;background:#ebebeb}.theme-light .level-summary-strip{background:#fff;box-shadow:0 1px 3px #0000000f}.theme-light .level-summary-progress-bar{background:var(--color-bg-tertiary)}.theme-light .level-summary-progress-fill{background:var(--color-accent);opacity:.9}.theme-light .level-summary-stat-pill,.theme-light .section-code-pill{background:var(--color-accent-soft);border-color:var(--color-border);box-shadow:none}.theme-light .section-progress-bar{background:var(--color-bg-tertiary)}.theme-light .section-progress-fill{background:var(--color-accent);opacity:.9}.theme-light .section-progress-text.section-progress-completed{color:var(--color-accent)}.theme-light .lesson-card-modern{background:#fff;box-shadow:0 1px 3px #0000000f}.theme-light .lesson-card-modern-bpm-pill{background:var(--color-accent-soft);border-color:var(--color-border);box-shadow:none}.theme-light .lesson-card-modern-progress-bar{background:var(--color-bg-tertiary)}.theme-light .lesson-card-modern-progress-fill{background:var(--color-accent);opacity:.9}.theme-light .lesson-card-modern-rank-pill:before{background:linear-gradient(135deg,rgba(0,0,0,.05) 0%,transparent 50%)}.lesson-card-modern{background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:14px;padding:16px;cursor:pointer;transition:all .2s ease-out;box-shadow:0 2px 8px #00000014;position:relative;display:flex;flex-direction:column;gap:16px;min-height:auto;overflow:hidden}.lesson-card-modern.has-pathway-bg{background:#121212;border:1px solid rgba(255,255,255,.15);min-height:200px;box-shadow:inset 0 120px 100px -40px #000000e6,inset 0 -100px 100px -20px #000000e6,0 4px 6px #0000004d;overflow:hidden}.lesson-card-modern.has-pathway-bg:hover{border-color:#ffffff4d;box-shadow:inset 0 120px 100px -40px #000000f2,inset 0 -100px 100px -20px #000000f2,0 8px 16px #0006;transform:translateY(-2px);z-index:100}.lesson-card-modern.has-pathway-bg:before,.lesson-card-modern.has-pathway-bg:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:15px;pointer-events:none;z-index:0;transition:opacity .8s ease-in-out}.lesson-card-modern.has-pathway-bg:before{background-image:var(--pathway-bg-image);opacity:.3;filter:saturate(1.1) contrast(1.1)}.lesson-card-modern.has-pathway-bg:after{background-image:var(--pathway-hover-image);opacity:0;filter:saturate(1.2) contrast(1.1)}.lesson-card-modern.has-pathway-bg:hover:before{opacity:0}.lesson-card-modern.has-pathway-bg:hover:after{opacity:1}.lesson-card-modern.has-pathway-bg>*{position:relative;z-index:1}.lesson-card-modern.has-pathway-bg .lesson-card-modern-code{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6);font-weight:800;mix-blend-mode:normal;letter-spacing:.05em}.lesson-card-modern.has-pathway-bg .lesson-card-bpm-badge{color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.8);font-weight:700;mix-blend-mode:normal}.lesson-card-modern.has-pathway-bg .lesson-card-modern-time{color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.8);font-weight:600;mix-blend-mode:normal}.lesson-card-modern.has-pathway-bg .lesson-card-modern-rank-pill{background:#ffffff1a;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.4);box-shadow:0 4px 6px #0003;text-shadow:0 1px 2px rgba(0,0,0,.8)}.lesson-card-modern.has-pathway-bg .lesson-rank-label{color:#fff!important}.lesson-card-modern.has-pathway-bg .lesson-card-modern-progress-bar{background:#fff3;border:1px solid rgba(255,255,255,.1)}.lesson-card-modern.has-pathway-bg .lesson-card-modern-progress-fill{box-shadow:0 0 8px #ffffff4d}.lesson-card-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.lesson-card-title-block{flex:1;min-width:0}.lesson-card-title-block h3,.lesson-card-title-block p{margin:0}.lesson-card-skills-inline{flex-shrink:0;display:flex;gap:3px}.lesson-card-skills-inline .lesson-skill-badges{gap:3px}.lesson-card-skills-inline .skill-badge{width:22px;height:22px;padding:3px;border-radius:5px}.lesson-card-skills-inline .skill-badge-icon{width:12px;height:12px}.lesson-card-skills-corner{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:3px}.lesson-card-skills-corner .lesson-skill-badges{gap:3px}.lesson-card-skills-corner .skill-badge{width:22px;height:22px;padding:3px;border-radius:5px}.lesson-card-skills-corner .skill-badge-icon{width:12px;height:12px}.lesson-card-title-block{width:100%}.lesson-card-title-block h3{margin:0}.lesson-card-title-block p{margin:4px 0 0}.lesson-card-tier-bpm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto}.lesson-card-bpm-badge{display:inline-flex;align-items:center;padding:0;border-radius:0;border:none;background:transparent;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);transition:all .15s ease-out;flex-shrink:0;margin-left:auto}.lesson-card-modern:hover:not(.locked){transform:translateY(-3px);box-shadow:0 6px 20px #0000001f,0 0 0 1px var(--color-border);border-color:var(--color-accent)}.lesson-card-modern.locked{opacity:.7;cursor:not-allowed}.lesson-card-modern-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.lesson-card-modern-title-section{flex:1;min-width:0}.lesson-card-modern-code{font-family:var(--font-heading);font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:none;color:var(--color-text-primary);margin:0 0 6px;line-height:1.3;word-wrap:break-word;min-height:2.6em;max-height:2.6em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lesson-card-modern-name{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);margin:0;display:none}.lesson-card-modern-bpm-pill{display:inline-flex;align-items:center;padding:5px 14px;border-radius:20px;border:1px solid var(--color-accent);background:var(--color-accent-soft);font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent);box-shadow:0 0 12px var(--color-glow-subtle);transition:all .15s ease-out;flex-shrink:0}.lesson-card-modern-middle{display:flex;align-items:center;margin:4px 0}.lesson-card-modern-rank-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:1px solid;font-family:var(--font-body);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;transition:all .15s ease-out;position:relative}.lesson-card-modern-rank-pill:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.4;pointer-events:none}.lesson-card-modern-rank-pill[data-tier=bronze]{background:linear-gradient(135deg,#cd7f321f,#8b5a2b2e);border-color:#cd7f3259;box-shadow:0 0 12px #cd7f3226,inset 0 1px #ffffff1a}.lesson-card-modern-rank-pill[data-tier=silver]{background:linear-gradient(135deg,#a8b4c41f,#8a9aaf2e);border-color:#a8b4c459;box-shadow:0 0 12px #a8b4c426,inset 0 1px #ffffff1a}.lesson-card-modern-rank-pill[data-tier=gold]{background:linear-gradient(135deg,#f5a6231f,#ffa5002e);border-color:#f5a62359;box-shadow:0 0 12px #f5a62333,inset 0 1px #ffffff1a}.lesson-card-modern-rank-pill[data-tier=platinum]{background:linear-gradient(135deg,#25ced11f,#0891b22e);border-color:#25ced159;box-shadow:0 0 12px #25ced133,inset 0 1px #ffffff1a}.lesson-card-modern-rank-pill[data-tier=diamond]{background:linear-gradient(135deg,#7c5cff1f,#4f46e533);border-color:#7c5cff66;box-shadow:0 0 16px #7c5cff40,inset 0 1px #ffffff1a}.lesson-card-modern-rank-pill[data-tier=master]{background:linear-gradient(135deg,#9d4edd24,#7c3aed38);border-color:#9d4edd66;box-shadow:0 0 16px #9d4edd4d,inset 0 1px #ffffff1a}.lesson-card-modern-rank-pill[data-tier=not_trained]{background:#94a3b814;border-color:var(--color-border-muted);box-shadow:inset 0 1px #ffffff0d}.lesson-rank-icon{font-size:14px;line-height:1;display:flex;align-items:center;filter:drop-shadow(0 0 2px rgba(255,255,255,.2))}.lesson-rank-label{line-height:1.1;letter-spacing:.08em}.lesson-card-modern-skills{display:flex;justify-content:center;padding:8px 0;min-height:32px}.lesson-card-modern-footer{margin-top:auto;padding-top:10px;border-top:1px solid var(--color-border-muted)}.lesson-card-progress-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.lesson-card-progress-left{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.lesson-card-modern-time{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--color-text-secondary);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.lesson-card-time-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.lesson-card-total-time{font-family:var(--font-body);font-size:10px;font-weight:600;color:var(--color-text-muted);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;opacity:.85}.lesson-card-total-time.has-tier{padding:3px 8px;border-radius:6px;border:1px solid;font-weight:700;color:#fff;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.3)}.lesson-card-total-time.has-tier[data-tier=bronze]{background:linear-gradient(135deg,#cd7f3259,#8b5a2b73);border-color:#cd7f3299}.lesson-card-total-time.has-tier[data-tier=silver]{background:linear-gradient(135deg,#a8b4c44d,#8a9aaf66);border-color:#a8b4c480}.lesson-card-total-time.has-tier[data-tier=gold]{background:linear-gradient(135deg,#f5a62359,#ffa50073);border-color:#f5a62399}.lesson-card-total-time.has-tier[data-tier=platinum]{background:linear-gradient(135deg,#25ced14d,#0891b266);border-color:#25ced180}.lesson-card-total-time.has-tier[data-tier=diamond]{background:linear-gradient(135deg,#7c5cff4d,#4f46e566);border-color:#7c5cff80}.lesson-card-total-time.has-tier[data-tier=master]{background:linear-gradient(135deg,#9d4edd59,#7c3aed73);border-color:#9d4edd80}.lesson-card-modern-progress-bar{width:100%;height:5px;background:var(--color-bg-tertiary);border-radius:10px;overflow:hidden;position:relative}.lesson-card-modern-progress-fill{height:100%;background:linear-gradient(180deg,var(--color-accent) 0%,var(--color-accent) 100%);border-radius:10px;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative;opacity:.9}.lesson-card-modern-progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 100%);border-radius:10px 10px 0 0}.lesson-card-modern-progress-fill.completed{background:var(--color-success)}.lesson-card-badges-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.lesson-card-tier-badge-compact{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:10px;border:1px solid;font-family:var(--font-body);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;transition:all .15s ease-out;white-space:nowrap}.tier-badge-icon{font-size:10px;line-height:1;display:flex;align-items:center}.tier-badge-label{line-height:1.1;letter-spacing:.05em}.lesson-card-tier-badge-compact[data-tier=bronze]{background:#cd7f321a;border-color:#cd7f324d}.lesson-card-tier-badge-compact[data-tier=silver]{background:#a8b4c41a;border-color:#a8b4c44d}.lesson-card-tier-badge-compact[data-tier=gold]{background:#f5a6231a;border-color:#f5a6234d}.lesson-card-tier-badge-compact[data-tier=platinum]{background:#25ced11a;border-color:#25ced14d}.lesson-card-tier-badge-compact[data-tier=diamond]{background:#7c5cff1a;border-color:#7c5cff59}.lesson-card-tier-badge-compact[data-tier=master]{background:#9d4edd1a;border-color:#9d4edd59}.lesson-card-tier-badge-compact[data-tier=not_trained]{background:#94a3b814;border-color:var(--color-border-muted)}.lesson-card-bpm-badge-compact{display:inline-flex;align-items:center;padding:4px 8px;border-radius:10px;border:1px solid var(--color-accent);background:var(--color-accent-soft);font-family:var(--font-body);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);white-space:nowrap}.challenge-joined-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:#10b98126;border-radius:12px;color:#10b981;font-size:11px;font-weight:600;letter-spacing:.02em}.lesson-card-modern-locked{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px;background:var(--color-bg-tertiary);border-radius:12px;color:var(--color-text-muted);border:1px solid var(--color-border-muted);margin-top:auto}.lesson-card-modern-locked.subscription-locked{background:linear-gradient(135deg,#eab30814,#f59e0b1f);border-color:#eab3084d;box-shadow:0 0 12px #eab3081a;flex-direction:column;gap:8px}.lesson-card-modern-locked.subscription-locked:hover{background:linear-gradient(135deg,#eab3081f,#f59e0b2e);border-color:#eab30880;box-shadow:0 0 20px #eab30833}.lesson-card-modern-locked.subscription-locked .locked-icon{color:#eab308;opacity:1}.subscription-crown{font-size:24px;color:#eab308!important;filter:drop-shadow(0 0 6px rgba(234,179,8,.4))}.subscription-upgrade-box{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px;background:#14120cd9;border:1.5px solid rgba(234,179,8,.5);border-radius:10px;width:100%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.subscription-upgrade-box:hover{background:#14120cf2;border-color:#eab308cc}.subscription-text{color:#ffffffd9!important;font-weight:500}.subscription-upgrade-btn{padding:8px 24px;background:linear-gradient(135deg,#eab308,#f59e0b);border:none;border-radius:20px;color:#000;font-family:var(--font-body);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 12px #eab30866}.subscription-upgrade-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #eab30880;filter:brightness(1.1)}.theme-light .subscription-upgrade-box,.theme-vintage .subscription-upgrade-box{background:#fffffff2;border-color:#eab30880;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.theme-light .subscription-upgrade-box:hover,.theme-vintage .subscription-upgrade-box:hover{background:#fff;border-color:#eab308b3}.theme-light .subscription-text,.theme-vintage .subscription-text{color:#000000d9!important}.theme-light .lesson-card-modern-locked.subscription-locked,.theme-vintage .lesson-card-modern-locked.subscription-locked{background:linear-gradient(135deg,#eab30826,#f59e0b33)}.locked-icon{font-size:18px;opacity:.5;display:flex;align-items:center;justify-content:center}.locked-text{font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:.2px;text-align:center}.lesson-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);opacity:0;transition:opacity .3s ease}.lesson-card:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 0%,var(--color-glow-subtle) 0%,transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}.lesson-card:hover:not(.locked):before{opacity:1}.lesson-card:hover:not(.locked):after{opacity:1}.lesson-card:hover:not(.locked){transform:translateY(-6px) scale(1.015);border-color:var(--color-border-hover);box-shadow:var(--shadow-card-hover)}.lesson-card:active:not(.locked){transform:translateY(-3px) scale(1.01)}.lesson-card.locked{opacity:.4;cursor:not-allowed;border-color:var(--color-border-muted)}.lesson-card.current-sub-level{border-color:var(--color-border-active);box-shadow:var(--shadow-card),0 0 0 2px var(--color-accent-soft)}.lesson-card-content{display:flex;flex-direction:column;height:100%;gap:0;position:relative;z-index:1}.lesson-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:0;flex:1;min-height:0}.lesson-card-title-section{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}.lesson-card-title{font-family:var(--font-heading);font-size:16px;font-weight:700;color:var(--color-text-primary);margin:0 0 4px;letter-spacing:-.3px;text-transform:none;text-shadow:none;line-height:1.3;transition:color .2s ease}.lesson-card-artist-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px;margin-bottom:4px}.lesson-card-artist{flex:1;min-width:0}.lesson-card-bpm-inline{flex-shrink:0}.lesson-card:hover:not(.locked) .lesson-card-title{color:var(--color-accent)}.lesson-card-artist{font-family:var(--font-body);font-size:13px;color:var(--color-text-muted);margin:0;letter-spacing:.2px;font-weight:400}.lesson-card-tier{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border-width:1.5px;border-style:solid;font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.5px;margin-bottom:2px;transition:all .3s cubic-bezier(.4,0,.2,1);max-width:100%;box-sizing:border-box;position:relative;overflow:hidden;text-transform:uppercase}.lesson-card-tier:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.12) 50%,transparent 100%);transition:left .5s ease}.lesson-card:hover .lesson-card-tier:before{left:100%}.lesson-card:hover .lesson-card-tier{transform:scale(1.02);filter:brightness(1.1)}.lesson-card-tier[data-tier=bronze]{background:linear-gradient(135deg,#cd7f3233,#8b5a2b4d);border-color:#cd7f3280;box-shadow:0 2px 8px #cd7f3233,inset 0 1px #ffffff14}.lesson-card:hover .lesson-card-tier[data-tier=bronze]{box-shadow:0 4px 16px #cd7f3266,0 0 20px #cd7f3240}.lesson-card-tier[data-tier=silver]{background:linear-gradient(135deg,#a8b4c433,#8a9aaf4d);border-color:#a8b4c480;box-shadow:0 2px 8px #a8b4c433,inset 0 1px #ffffff1f}.lesson-card:hover .lesson-card-tier[data-tier=silver]{box-shadow:0 4px 16px #a8b4c466,0 0 20px #a8b4c440}.lesson-card-tier[data-tier=gold]{background:linear-gradient(135deg,#f5a62333,#ffa5004d);border-color:#f5a62380;box-shadow:0 2px 8px #f5a62340,inset 0 1px #ffffff1f}.lesson-card:hover .lesson-card-tier[data-tier=gold]{box-shadow:0 4px 16px #f5a62380,0 0 24px #f5a62359}.lesson-card-tier[data-tier=platinum]{background:linear-gradient(135deg,#25ced133,#0891b24d);border-color:#25ced180;box-shadow:0 2px 8px #25ced140,inset 0 1px #ffffff1f}.lesson-card:hover .lesson-card-tier[data-tier=platinum]{box-shadow:0 4px 16px #25ced180,0 0 24px #25ced159}.lesson-card-tier[data-tier=diamond]{background:linear-gradient(135deg,#7c5cff38,#4f46e552);border-color:#7c5cff8c;box-shadow:0 2px 10px #7c5cff4d,inset 0 1px #ffffff1f}.lesson-card:hover .lesson-card-tier[data-tier=diamond]{box-shadow:0 4px 20px #7c5cff8c,0 0 28px #7c5cff66}.lesson-card-tier[data-tier=master]{background:linear-gradient(135deg,#9d4edd40,#7c3aed59);border-color:#9d4edd99;box-shadow:0 2px 12px #9d4edd59,inset 0 1px #ffffff1f}.lesson-card:hover .lesson-card-tier[data-tier=master]{box-shadow:0 4px 24px #9d4edd99,0 0 32px #9d4edd73}.lesson-card-tier[data-tier=not_trained]{background:linear-gradient(135deg,#d2b48c2e,#b4966e40);border-color:#cd7f324d;box-shadow:0 2px 6px #b4966e26}.lesson-card:hover .lesson-card-tier[data-tier=not_trained]{box-shadow:0 4px 12px #cd7f3240,0 0 16px #cd7f3226;border-color:#cd7f3273}.lesson-tier-medal{font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.lesson-tier-label{font-size:11px;line-height:1.2;font-weight:700;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;flex-shrink:1;min-width:0;text-shadow:0 1px 2px rgba(0,0,0,.2)}.lesson-card-progress{display:flex;flex-direction:column;gap:8px;margin-top:0;padding-top:12px;border-top:1px solid var(--color-border-muted);flex-shrink:0}.lesson-card-time{font-family:var(--font-body);font-size:12px;color:var(--color-text-secondary);font-weight:500;letter-spacing:.2px}.lesson-card-progress-bar{width:100%;height:4px;background:var(--color-bg-tertiary);border:none;border-radius:2px;overflow:hidden;box-shadow:inset 0 1px 2px #0000001a}.lesson-card-progress-fill{height:100%;background:var(--gradient-primary);border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-glow-sm)}.lesson-card-progress-fill.completed{background:var(--color-success);box-shadow:var(--shadow-glow-md);animation:none}.lesson-card-locked{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--color-bg);border-radius:12px;color:var(--color-text-muted);border:1px solid var(--color-border-muted);margin-top:auto}.locked-icon-small{font-size:18px;opacity:.5}.locked-text{font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:.2px}.loading-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:var(--color-text-primary);text-align:center;padding:40px}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-border-muted);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:24px;box-shadow:var(--shadow-glow-sm)}.retry-button{background:var(--gradient-primary);color:var(--color-neutral-0);border:none;padding:14px 32px;border-radius:12px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;margin-top:24px;transition:all .25s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:var(--shadow-button)}.retry-button:hover{transform:translateY(-3px);box-shadow:var(--shadow-button-hover)}.lesson-badges{display:flex;gap:8px;flex-wrap:wrap}.difficulty-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:20px;font-family:var(--font-body);font-size:11px;font-weight:600;box-shadow:none;text-transform:uppercase;letter-spacing:.5px}.duration-badge,.bpm-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:18px;font-family:var(--font-body);font-size:10px;font-weight:600;background:var(--color-bg);color:var(--color-text-secondary);border:1px solid var(--color-border-muted);box-shadow:none;letter-spacing:.3px}.lessons-path{position:relative;padding-left:60px;display:flex;flex-direction:column;gap:20px}.path-lesson-wrapper{position:relative}.path-line-to-lesson{position:absolute;left:-32px;top:-16px;width:3px;height:16px;background:linear-gradient(180deg,var(--color-accent) 0%,transparent 100%);border-radius:2px;z-index:1;box-shadow:var(--shadow-glow-subtle)}.path-line-to-lesson.locked{background:var(--color-border-muted);opacity:.3;box-shadow:none}.lesson-node{background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:16px;padding:24px;cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-card);position:relative;z-index:2;overflow:hidden}.lesson-node:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);opacity:0;transition:opacity .3s ease}.lesson-node:hover:not(.locked):before{opacity:1}.lesson-node:hover:not(.locked){transform:translate(8px) translateY(-4px);border-color:var(--color-border-hover);box-shadow:var(--shadow-card-hover)}.lesson-node.locked{opacity:.4;cursor:not-allowed}.lesson-node.current-sub-level{border-color:var(--color-border-active);box-shadow:var(--shadow-card),0 0 0 2px var(--color-accent-soft)}.lesson-node-content{display:flex;flex-direction:column;gap:14px}.lesson-node-header{flex:1}.lesson-header-top{display:flex;justify-content:space-between;align-items:flex-start;width:100%;gap:16px;flex-wrap:wrap}.lesson-node-title{font-family:var(--font-heading);font-size:17px;font-weight:700;color:var(--color-text-primary);margin:0 0 6px;letter-spacing:-.2px;text-transform:none;text-shadow:none;transition:color .2s ease}.lesson-node:hover:not(.locked) .lesson-node-title{color:var(--color-accent)}.lesson-node-artist{font-family:var(--font-body);font-size:13px;color:var(--color-text-muted);margin:0;letter-spacing:.2px}.lesson-node-progress{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--color-border-muted)}.lesson-node-time{font-family:var(--font-body);font-size:13px;color:var(--color-text-secondary);font-weight:500;letter-spacing:.2px}.lesson-node-progress-bar{width:100%;height:5px;background:var(--color-bg-tertiary);border:none;border-radius:3px;overflow:hidden}.lesson-node-progress-fill{height:100%;background:var(--gradient-primary);border-radius:3px;transition:width .5s ease;box-shadow:var(--shadow-glow-sm)}.lesson-node-progress-fill.completed{background:var(--color-success)}.lesson-node-locked{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--color-bg);border-radius:10px;color:var(--color-text-muted);border:1px solid var(--color-border-muted)}@media(max-width:768px){.level-group-header{flex-direction:column;gap:20px;padding:24px;text-align:left;border-left-width:3px}.level-group-title{font-size:22px}.level-header-stats{width:100%;justify-content:flex-start}.lessons-path{padding-left:40px}.path-connector,.path-line-to-lesson{left:20px}.sub-level-header{flex-direction:row;text-align:left;gap:16px;padding:14px 0}.sub-level-info{flex-direction:column;align-items:flex-start;gap:10px}.lesson-card{padding:24px;min-height:200px}.lesson-card-title{font-size:16px}}.lesson-list-header,.lesson-list-top,.lesson-list-header-logo,.pathway-name-header,.lesson-list-subtitle,.level-display-inline{display:none}.lesson-node.interactive-lesson{background:linear-gradient(135deg,var(--color-surface) 0%,rgba(var(--color-primary-rgb),.08) 100%);border:1px solid var(--color-primary);position:relative}.lesson-node.interactive-lesson:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-accent) 100%);border-radius:12px 12px 0 0}.lesson-node.interactive-lesson:hover{border-color:var(--color-primary);box-shadow:0 4px 20px rgba(var(--color-primary-rgb),.2)}.interactive-badge{display:inline-flex;align-items:center;justify-content:center;margin-right:6px;font-size:14px;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.interactive-lesson .lesson-node-artist{color:var(--color-primary);font-weight:500}.interactive-lesson .lesson-node-time{color:var(--color-primary)}.interactive-lesson .lesson-node-progress-fill{background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-accent) 100%)}@media(max-width:767px){.interactive-badge{font-size:12px;margin-right:4px}}.level-requirements-and-exam{display:flex;flex-direction:column;gap:12px;padding:0 28px 20px;width:100%}.exam-entry-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;color:#fff;font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #667eea40;width:fit-content}.exam-entry-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea59}.exam-entry-button:active:not(:disabled){transform:translateY(0)}.exam-entry-button:disabled{opacity:.6;cursor:not-allowed}.exam-entry-button.pending{background:linear-gradient(135deg,#f6d365,#fda085);box-shadow:0 4px 12px #fda08540}.exam-entry-button.pending:hover:not(:disabled){box-shadow:0 6px 20px #fda08559}.exam-entry-button.approved{background:linear-gradient(135deg,#11998e,#38ef7d);box-shadow:0 4px 12px #38ef7d40}.exam-entry-button.subscription-locked{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 12px #f59e0b40}.exam-entry-button.subscription-locked:hover:not(:disabled){box-shadow:0 6px 20px #f59e0b59}@media(min-width:768px){.exam-entry-button{padding:10px 18px;font-size:14px}}.exam-passed-container{display:flex;justify-content:flex-start;padding:0 28px 16px;width:100%}.exam-passed-badge{position:relative;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;background:var(--color-bg-tertiary);color:var(--color-success);border-radius:8px;font-weight:600;font-size:12px;border:1px solid rgba(53,197,106,.2);cursor:help;transition:all .2s ease}.exam-passed-badge:hover{border-color:#35c56a59;background:#35c56a0f}.exam-tooltip{visibility:hidden;opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(8px);background:var(--color-surface-elevated);color:var(--color-text-primary);padding:10px 12px;border-radius:8px;box-shadow:var(--shadow-md);width:max-content;max-width:260px;font-size:12px;font-weight:400;z-index:50;border:1px solid var(--color-border);transition:all .2s cubic-bezier(.16,1,.3,1);pointer-events:none;margin-bottom:10px}.exam-tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--color-surface-elevated) transparent transparent transparent}.exam-passed-badge:hover .exam-tooltip{visibility:visible;opacity:1;transform:translate(-50%) translateY(0)}.exam-tooltip-item{display:flex;align-items:flex-start;gap:7px;margin-bottom:5px;line-height:1.4;text-align:left;color:var(--color-text-secondary)}.exam-tooltip-item:last-child{margin-bottom:0}.exam-tooltip-label{flex-shrink:0}.exam-tooltip-item.comment{border-top:1px solid var(--color-border-muted);margin-top:6px;padding-top:6px;font-style:italic;color:var(--color-text-muted)}.exam-passed-badge svg{color:var(--color-success);opacity:.85}.exam-info-icon{margin-left:2px;opacity:.5;color:var(--color-text-muted)}@media(max-width:767px){.exam-passed-container{padding:0 16px 12px}}.technique-reminder-floating-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-accent, #f97316);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-bottom:24px}.technique-reminder-floating-btn:hover{background:var(--color-accent-soft, rgba(249, 115, 22, .1));border-color:var(--color-accent, #f97316);box-shadow:0 0 16px #f9731626;transform:translateY(-1px)}.technique-reminder-floating-btn:active{transform:translateY(0)}.technique-reminder-floating-btn svg{flex-shrink:0}@media(max-width:767px){.technique-reminder-floating-btn{font-size:12px;padding:8px 14px;margin-bottom:16px}}.lesson-card-modern.scroll-highlight{animation:scrollHighlightPulse 6s ease-out forwards}@keyframes scrollHighlightPulse{0%{box-shadow:0 0 #ef444480,0 2px 8px #00000014;border-color:#ef4444}8%{box-shadow:0 0 20px 4px #ef444459,0 2px 8px #00000014;border-color:#ef4444}80%{box-shadow:0 0 16px 3px #ef44444d,0 2px 8px #00000014;border-color:#ef4444}to{box-shadow:0 0 #ef444400,0 2px 8px #00000014;border-color:var(--color-border-muted)}}.tr-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#000000d1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:tr-overlay-in .25s ease}@keyframes tr-overlay-in{0%{opacity:0}to{opacity:1}}.tr-modal{position:relative;width:90vw;max-width:900px;border-radius:16px;overflow:hidden;background:#111118;box-shadow:0 24px 80px #0009,0 0 0 1px #ffffff0f;animation:tr-modal-in .3s cubic-bezier(.22,1,.36,1)}@keyframes tr-modal-in{0%{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.tr-modal-close{position:absolute;top:12px;right:12px;z-index:20;width:40px;height:40px;border-radius:50%;border:none;background:#0000008c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#ffffffd9;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.tr-modal-close:hover{background:#000000bf;color:#fff;transform:scale(1.08)}.tr-video-area{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;overflow:hidden}.tr-video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}.tr-loading,.tr-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#fff9;font-size:14px}.tr-play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#00000026;transition:background .2s ease}.tr-play-overlay:hover{background:#00000040}.tr-play-overlay:hover .tr-play-circle{transform:scale(1.1);background:#f97316f2}.tr-play-circle{width:68px;height:68px;border-radius:50%;background:#f97316d9;color:#fff;display:flex;align-items:center;justify-content:center;padding-left:4px;transition:all .25s cubic-bezier(.22,1,.36,1);box-shadow:0 4px 24px #f9731659}.tr-controls{background:#111118;padding:0}.tr-progress-row{padding:0 16px;height:18px;display:flex;align-items:center}.tr-progress-bar{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#ffffff1f;border-radius:2px;outline:none;cursor:pointer;transition:height .15s ease}.tr-progress-row:hover .tr-progress-bar{height:6px}.tr-progress-bar::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-orange, #f97316);cursor:pointer;border:2px solid rgba(0,0,0,.2);box-shadow:0 1px 6px #f9731666;transition:transform .15s ease}.tr-progress-bar::-webkit-slider-thumb:hover{transform:scale(1.3)}.tr-progress-bar::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent-orange, #f97316);cursor:pointer;border:2px solid rgba(0,0,0,.2);box-shadow:0 1px 6px #f9731666}.tr-controls-row{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 10px}.tr-controls-left{display:flex;align-items:center;gap:10px}.tr-controls-right{display:flex;align-items:center;gap:4px}.tr-ctrl-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:none;background:transparent;color:#ffffffb3;cursor:pointer;transition:all .15s ease}.tr-ctrl-btn:hover,.tr-ctrl-btn.active{background:#ffffff1a;color:#fff}.tr-ctrl-btn.subtitle-on{color:var(--accent-orange, #f97316)}.tr-speed-label{font-size:13px;font-weight:700;letter-spacing:-.02em}.tr-time{font-size:13px;font-weight:500;color:#fff9;font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-user-select:none;user-select:none}.tr-menu-container{position:relative}.tr-menu-dropdown{position:absolute;bottom:calc(100% + 8px);right:0;min-width:140px;background:#1e1e2a;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:4px;z-index:100;box-shadow:0 12px 40px #0009;animation:tr-dropdown-in .15s ease}@keyframes tr-dropdown-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tr-menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 14px;border:none;background:transparent;color:#ffffffb3;font-size:13px;cursor:pointer;border-radius:8px;transition:all .12s ease}.tr-menu-item:hover{background:#ffffff14;color:#fff}.tr-menu-item.selected{color:var(--accent-orange, #f97316);font-weight:600}.tr-check{font-size:14px}@media(max-width:640px){.tr-modal{width:96vw;border-radius:12px}.tr-play-circle{width:56px;height:56px}.tr-play-circle svg{width:26px;height:26px}.tr-modal-close{top:8px;right:8px;width:34px;height:34px}}.lesson-player-container{min-height:100vh;height:100vh;background:var(--color-bg);display:flex;flex-direction:column;position:relative;color:var(--color-text-primary);overflow:hidden}.lesson-player-container.free-mode{--header-h: 85px;height:calc(100vh - var(--header-h));min-height:calc(100vh - var(--header-h))}@media(max-width:1023px){.lesson-player-container.free-mode{--header-h: 65px}}body:has(.lesson-player-container.free-mode){overflow:hidden}html:has(.lesson-player-container.free-mode){overflow:hidden}.lesson-player-container.free-mode:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 80% 50% at 20% 0%,var(--color-accent-soft) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 100%,var(--color-glow-subtle) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 50% 50%,var(--color-glow) 0%,transparent 40%);pointer-events:none;z-index:0;animation:freeModeBgPulse 15s ease-in-out infinite}@keyframes freeModeBgPulse{0%,to{opacity:.8}50%{opacity:.5}}.lesson-player-container.free-mode .lesson-cockpit{display:none}body:has(.lesson-player-container.free-mode) .chat-container{display:none!important}body:has(.lesson-player-container.free-mode) .gp-toggle,body:has(.lesson-player-container.free-mode) .gp-panel{display:none!important}.lesson-player-container.free-mode .tab-zoom-controls{left:12px;right:auto;bottom:calc(68px + env(safe-area-inset-bottom,0px))}.lesson-player-container.free-mode .lesson-player-main-layout{padding:var(--spacing-md)}.lesson-player-header-section{display:none}.lesson-header-center{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}.lesson-header-center .logo-wrapper{pointer-events:auto}.lesson-header-left{display:flex;align-items:center;gap:var(--spacing-md);flex:1;min-width:0;max-width:40%}.lesson-back-btn-icon{background:var(--color-bg-secondary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--color-accent);border:1px solid var(--color-border-default);padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;box-shadow:var(--shadow-sm),var(--shadow-glow-subtle)}.lesson-back-btn-icon:hover{background:var(--color-bg-tertiary);border-color:var(--color-border-hover);transform:translate(-2px);box-shadow:var(--shadow-md),var(--shadow-glow-sm);color:var(--color-accent)}.theme-dark .lesson-back-btn-icon:hover,.theme-light .lesson-back-btn-icon:hover{color:var(--color-accent)}.theme-light .tempo-popup,.theme-light .volume-popup{background:#fff!important;opacity:1!important}.theme-stealth .lesson-back-btn-icon:hover,.theme-vintage .lesson-back-btn-icon:hover,.theme-hello-kitty .lesson-back-btn-icon:hover,.theme-kuromi .lesson-back-btn-icon:hover{color:var(--color-accent)}.theme-monochrome .lesson-back-btn-icon:hover{color:var(--color-text-primary)}.theme-sunburst .lesson-back-btn-icon:hover,.theme-enhanced-forest .lesson-back-btn-icon:hover{color:var(--color-accent)}.lesson-back-btn-icon:active{transform:translate(-1px)}.lesson-title-section{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.lesson-artist-row{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.lesson-title-main{font-family:var(--font-heading);margin:0;color:var(--color-accent);font-size:var(--font-size-xl);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-normal);text-transform:uppercase;text-shadow:0 0 12px var(--color-glow);line-height:var(--line-height-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-artist-subtle{font-family:var(--font-body);color:var(--color-text-secondary);font-size:var(--font-size-sm);margin:0;font-weight:var(--font-weight-normal);letter-spacing:var(--letter-spacing-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}.lesson-header-right{display:flex;align-items:center;flex-shrink:0;flex:1;justify-content:flex-end;min-width:0;max-width:40%}.status-badge-cluster{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.status-badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight);white-space:nowrap;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.status-badge-icon{font-size:var(--font-size-sm);line-height:1;display:flex;align-items:center}.status-badge-text{line-height:var(--line-height-tight)}.status-badge-level{text-transform:uppercase}.status-badge-bpm{background:var(--color-bg-card);color:var(--color-accent);border:1px solid var(--color-border-default);box-shadow:var(--shadow-glow-subtle)}.back-btn{background:var(--color-bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--color-text-primary);border:2px solid var(--color-border-default);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-body);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);transition:all var(--transition-normal);white-space:nowrap;box-shadow:var(--shadow-glow-sm);letter-spacing:var(--letter-spacing-normal)}.back-btn:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow-md);color:var(--color-accent)}.theme-dark .back-btn:hover,.theme-light .back-btn:hover,.theme-stealth .back-btn:hover,.theme-vintage .back-btn:hover,.theme-hello-kitty .back-btn:hover,.theme-kuromi .back-btn:hover{color:var(--color-accent)}.theme-monochrome .back-btn:hover{color:var(--color-text-primary)}.theme-sunburst .back-btn:hover,.theme-enhanced-forest .back-btn:hover{color:var(--color-accent)}.difficulty-badge{display:inline-block;padding:6px 14px;border-radius:8px;font-family:var(--font-heading);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1px}.difficulty-level-1{background:var(--color-success);color:#000;box-shadow:var(--shadow-glow-sm)}.difficulty-level-2{background:var(--color-warning);color:#000;box-shadow:var(--shadow-glow-sm)}.difficulty-level-3{background:var(--color-error);color:#fff;box-shadow:var(--shadow-glow-sm)}.bpm-range-badge{display:inline-block;padding:6px 14px;border-radius:8px;font-family:var(--font-body);font-size:12px;font-weight:600;background:var(--color-bg-card);color:var(--color-accent);border:2px solid var(--color-border);box-shadow:var(--shadow-glow-subtle);letter-spacing:1px}.progress-section-compact{background:var(--color-bg-secondary);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border-default);padding:var(--spacing-sm) var(--spacing-lg)}.progress-section-top{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.progress-info-group{display:flex;align-items:center;gap:var(--spacing-md);font-family:var(--font-body);flex-wrap:wrap}.progress-label-text{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-tight)}.progress-time-value{color:var(--color-accent);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight)}.tier-badge-modern{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:6px 12px;border-radius:8px;border:1.5px solid;font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);white-space:nowrap;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.5px}.tier-badge-modern:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);transition:left .6s ease}.tier-badge-modern:hover:before{left:100%}.tier-badge-modern:hover{transform:translateY(-1px);filter:brightness(1.1)}.tier-badge-modern[data-tier=bronze]{background:linear-gradient(135deg,#cd7f3233,#8b5a2b4d);border-color:#cd7f3280;box-shadow:0 2px 8px #cd7f3240,inset 0 1px #ffffff1a}.tier-badge-modern[data-tier=bronze]:hover{box-shadow:0 4px 16px #cd7f3266,0 0 20px #cd7f324d}.tier-badge-modern[data-tier=silver]{background:linear-gradient(135deg,#a8b4c433,#8a9aaf4d);border-color:#a8b4c480;box-shadow:0 2px 8px #a8b4c440,inset 0 1px #ffffff26}.tier-badge-modern[data-tier=silver]:hover{box-shadow:0 4px 16px #a8b4c466,0 0 20px #a8b4c44d}.tier-badge-modern[data-tier=gold]{background:linear-gradient(135deg,#f5a62333,#ffa5004d);border-color:#f5a62380;box-shadow:0 2px 8px #f5a62340,inset 0 1px #ffffff26}.tier-badge-modern[data-tier=gold]:hover{box-shadow:0 4px 16px #f5a62380,0 0 24px #f5a62366}.tier-badge-modern[data-tier=platinum]{background:linear-gradient(135deg,#25ced133,#0891b24d);border-color:#25ced180;box-shadow:0 2px 8px #25ced140,inset 0 1px #ffffff26}.tier-badge-modern[data-tier=platinum]:hover{box-shadow:0 4px 16px #25ced180,0 0 24px #25ced166}.tier-badge-modern[data-tier=diamond]{background:linear-gradient(135deg,#7c5cff33,#4f46e54d);border-color:#7c5cff80;box-shadow:0 2px 8px #7c5cff4d,inset 0 1px #ffffff26}.tier-badge-modern[data-tier=diamond]:hover{box-shadow:0 4px 16px #7c5cff80,0 0 28px #7c5cff80}.tier-badge-modern[data-tier=master]{background:linear-gradient(135deg,#9d4edd40,#7c3aed59);border-color:#9d4edd99;box-shadow:0 2px 10px #9d4edd59,inset 0 1px #ffffff26}.tier-badge-modern[data-tier=master]:hover{box-shadow:0 4px 20px #9d4edd99,0 0 32px #9d4edd80}.tier-badge-modern[data-tier=not_trained]{background:linear-gradient(135deg,#d2b48c33,#b4966e47);border-color:#cd7f3259;box-shadow:0 2px 6px #b4966e2e}.tier-badge-icon{font-size:15px;line-height:1;display:flex;align-items:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.tier-badge-label{line-height:var(--line-height-tight);letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.2)}.progress-bar-modern{width:100%;height:5px;background:var(--color-accent-soft);border-radius:var(--radius-sm);overflow:hidden;box-shadow:inset 0 1px 2px var(--shadow-sm)}.progress-bar-fill-modern{height:100%;background:var(--gradient-primary);border-radius:var(--radius-sm);transition:width var(--transition-slow);box-shadow:var(--shadow-glow-md),inset 0 0 4px var(--color-glow);position:relative;overflow:hidden}.progress-bar-fill-modern:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-family:Rajdhani,sans-serif;font-size:14px;font-weight:600;letter-spacing:1px}.progress-label{color:#ccc}.progress-time{color:#0f8}.progress-bar-container{width:100%;height:16px;background:#0009;border:1px solid rgba(0,255,136,.3);border-radius:8px;overflow:hidden;box-shadow:inset 0 2px 4px #00000080}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#0f8,#00cc6a);border-radius:8px;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 15px #0f89,inset 0 0 10px #00ff884d}.lesson-practice-time{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,255,136,.2);display:flex;align-items:center;justify-content:center;gap:8px;font-family:Rajdhani,sans-serif;font-size:14px;font-weight:600;letter-spacing:1px}.lesson-time-label{color:#ccc}.lesson-time-value{color:#0f8;font-weight:700;text-shadow:0 0 10px rgba(0,255,136,.4)}.lesson-target-time{color:#999;font-size:.9em;margin-left:4px}.newly-added-time{color:#d946ef;font-weight:900;text-shadow:0 0 8px rgba(217,70,239,.5);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:1;text-shadow:0 0 8px rgba(217,70,239,.5)}50%{opacity:.8;text-shadow:0 0 12px rgba(217,70,239,.7)}}.lesson-player-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;z-index:1;position:relative}.free-upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:400px;margin:var(--spacing-lg);border-radius:var(--radius-xl);border:2px dashed var(--color-border);background:var(--color-bg-card);cursor:pointer;transition:all .25s ease;padding:48px}.free-upload-area:hover,.free-upload-area.drag-over{border-color:var(--color-accent);background:#ff6a000a;box-shadow:0 0 32px #ff6a0014}.free-upload-icon{color:var(--color-text-secondary);opacity:.5;transition:all .25s ease}.free-upload-area:hover .free-upload-icon,.free-upload-area.drag-over .free-upload-icon{color:var(--color-accent);opacity:1;transform:translateY(-4px)}.free-upload-title{font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--color-text-primary)}.free-upload-subtitle{font-size:14px;color:var(--color-text-secondary)}.free-upload-formats{font-size:12px;color:var(--color-text-muted);letter-spacing:2px;font-weight:600}.free-file-bar{display:flex;align-items:center;gap:12px;padding:8px 16px;margin:0 var(--spacing-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:13px}.free-file-name{font-weight:600;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.free-file-size{color:var(--color-text-muted);font-size:12px;flex-shrink:0}.free-file-change{background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-accent);font-size:12px;font-weight:600;padding:4px 12px;cursor:pointer;transition:all .15s ease;flex-shrink:0}.free-file-change:hover{background:#ff6a001a;border-color:var(--color-accent)}.free-upload-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#00000073;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:freeModalFadeIn .3s ease}@keyframes freeModalFadeIn{0%{opacity:0}to{opacity:1}}.free-upload-modal{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:48px 56px;max-width:480px;width:90%;background:var(--color-bg-card);border:2px dashed var(--color-border);border-radius:var(--radius-xl);box-shadow:0 24px 80px #00000080;transition:all .3s ease;animation:freeModalSlideUp .35s ease}@keyframes freeModalSlideUp{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.free-upload-modal.drag-over{border-color:var(--color-accent);background:#ff6a000f;box-shadow:0 0 48px #ff6a0026,0 24px 80px #00000080;transform:scale(1.02)}.free-upload-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:4px;border-radius:50%;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.free-upload-modal-close:hover{color:var(--color-text-primary);background:#ffffff14}.free-upload-modal-icon{color:var(--color-accent);opacity:.8;animation:freeIconPulse 2s ease-in-out infinite}@keyframes freeIconPulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.free-upload-modal.drag-over .free-upload-modal-icon{opacity:1;transform:translateY(-6px);animation:none}.free-upload-modal-title{font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--color-text-primary);text-align:center}.free-upload-modal-subtitle{font-size:14px;color:var(--color-text-secondary);text-align:center;line-height:1.5}.free-upload-modal-btn{display:flex;align-items:center;gap:10px;padding:12px 32px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-heading);font-size:15px;font-weight:700;cursor:pointer;transition:all .2s ease;letter-spacing:.5px}.free-upload-modal-btn:hover{background:var(--color-accent-hover, #e55e00);transform:translateY(-2px);box-shadow:0 8px 24px #ff6a004d}.free-upload-modal-btn:active{transform:translateY(0)}.free-upload-modal-formats{font-size:11px;color:var(--color-text-muted);letter-spacing:2px;font-weight:600;text-transform:uppercase}.free-upload-modal-btn--ai{background:linear-gradient(135deg,#7c3aed,#a855f7);margin-top:-8px}.free-upload-modal-btn--ai:hover{background:linear-gradient(135deg,#6d28d9,#9333ea);box-shadow:0 8px 24px #7c3aed59}.ai-tab-gen-panel{position:relative;display:flex;flex-direction:column;gap:16px;padding:32px 36px;max-width:560px;width:94%;max-height:90vh;overflow-y:auto;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:0 24px 80px #0000008c;animation:freeModalSlideUp .35s ease}.ai-tab-gen-header{text-align:center;margin-bottom:4px}.ai-tab-gen-icon{font-size:32px;display:block;margin-bottom:8px}.ai-tab-gen-title{font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--color-text-primary);margin:0 0 4px}.ai-tab-gen-desc{font-size:13px;color:var(--color-text-secondary);line-height:1.5;margin:0}.ai-tab-gen-field{display:flex;flex-direction:column;gap:6px}.ai-tab-gen-field label{font-size:12px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.8px}.ai-tab-gen-textarea{width:100%;padding:12px 14px;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:14px;font-family:inherit;resize:vertical;transition:border-color .2s ease;line-height:1.5}.ai-tab-gen-textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px #ff6a0026}.ai-tab-gen-textarea:disabled{opacity:.5;cursor:not-allowed}.ai-tab-gen-constraints{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ai-tab-gen-field--small select,.ai-tab-gen-field--small input{width:100%;padding:8px 10px;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-primary);font-size:13px;font-family:inherit;transition:border-color .2s ease}.ai-tab-gen-field--small select:focus,.ai-tab-gen-field--small input:focus{outline:none;border-color:var(--color-accent)}.ai-tab-gen-field--small select:disabled,.ai-tab-gen-field--small input:disabled{opacity:.5;cursor:not-allowed}.ai-tab-gen-techniques{display:flex;flex-wrap:wrap;gap:8px}.ai-tab-gen-tech-btn{padding:6px 14px;font-size:12px;font-weight:600;border-radius:20px;border:1px solid var(--color-border);background:var(--color-bg-surface);color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.ai-tab-gen-tech-btn:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.ai-tab-gen-tech-btn.active{background:#ff6a0026;border-color:var(--color-accent);color:var(--color-accent)}.ai-tab-gen-tech-btn:disabled{opacity:.5;cursor:not-allowed}.ai-tab-gen-error{padding:10px 14px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#ef4444;font-size:13px}.ai-tab-gen-submit{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 32px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-heading);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s ease;letter-spacing:.5px}.ai-tab-gen-submit:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#9333ea);transform:translateY(-2px);box-shadow:0 8px 28px #7c3aed66}.ai-tab-gen-submit:active:not(:disabled){transform:translateY(0)}.ai-tab-gen-submit:disabled{opacity:.5;cursor:not-allowed}.ai-tab-gen-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:aiTabSpin .7s linear infinite}@keyframes aiTabSpin{to{transform:rotate(360deg)}}.ai-tab-gen-tabs{display:flex;gap:4px;padding:4px;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.ai-tab-gen-tab{flex:1;padding:10px 16px;background:transparent;border:none;border-radius:calc(var(--radius-md) - 2px);font-family:var(--font-heading);font-size:13px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.ai-tab-gen-tab:hover:not(:disabled){color:var(--color-text-primary);background:#7c3aed0f}.ai-tab-gen-tab.active{background:linear-gradient(135deg,#7c3aed26,#a855f71a);color:#a855f7;box-shadow:0 2px 8px #7c3aed26}.ai-tab-gen-tab:disabled{opacity:.5;cursor:not-allowed}.ai-tab-gen-audio-drop{display:flex;align-items:center;justify-content:center;min-height:100px;padding:20px;border:2px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface);cursor:pointer;transition:all .25s ease;text-align:center}.ai-tab-gen-audio-drop:hover{border-color:#7c3aed66;background:#7c3aed0a}.ai-tab-gen-audio-drop.drag-over{border-color:#a855f7;background:#7c3aed14;transform:scale(1.01);box-shadow:0 0 20px #7c3aed26}.ai-tab-gen-audio-drop.has-file{border-style:solid;border-color:#7c3aed4d;background:linear-gradient(135deg,#7c3aed0f,#a855f70a)}.ai-tab-gen-audio-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--color-text-secondary);font-size:13px}.ai-tab-gen-audio-placeholder .ai-tab-gen-audio-icon{font-size:28px;opacity:.7}.ai-tab-gen-audio-formats{font-size:11px;opacity:.6}.ai-tab-gen-audio-info{display:flex;align-items:center;gap:10px}.ai-tab-gen-audio-info .ai-tab-gen-audio-icon{font-size:24px}.ai-tab-gen-audio-name{font-size:14px;font-weight:600;color:var(--color-text-primary);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ai-tab-gen-audio-size{font-size:12px;color:var(--color-text-secondary);opacity:.7}.ai-tab-gen-audio-preview{width:100%;height:36px;border-radius:var(--radius-md);outline:none}.ai-tab-meta-bar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:linear-gradient(135deg,#7c3aed14,#a855f70f);border-bottom:1px solid rgba(124,58,237,.2);overflow-x:auto;flex-shrink:0}.ai-tab-meta-badges{display:flex;align-items:center;gap:8px;flex:1;overflow-x:auto;min-width:0}.ai-tab-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:600;color:var(--color-text-secondary);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:12px;white-space:nowrap;text-transform:capitalize}.ai-tab-badge--ai{background:linear-gradient(135deg,#7c3aed33,#a855f726);border-color:#7c3aed66;color:#a855f7;font-weight:700}.ai-tab-meta-new-btn{padding:6px 14px;font-size:12px;font-weight:700;color:#a855f7;background:transparent;border:1px solid rgba(124,58,237,.3);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.ai-tab-meta-new-btn:hover{background:#7c3aed1a;border-color:#7c3aed80}@media(max-width:600px){.ai-tab-gen-panel{padding:24px 20px;width:96%}.ai-tab-gen-constraints{grid-template-columns:repeat(2,1fr)}}.free-mock-header{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--color-bg-surface);border-bottom:1px solid var(--color-border)}.free-mock-logo{width:32px;height:32px;opacity:.4}.free-mock-title{font-family:var(--font-heading);font-size:14px;font-weight:700;color:var(--color-text-muted);letter-spacing:1px;text-transform:uppercase;flex:1}.free-mock-exit{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:6px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all .15s ease}.free-mock-exit:hover{color:var(--color-text-primary);background:#ffffff14}.free-mock-controls{display:flex;align-items:center;gap:12px;padding:10px 24px;background:var(--color-bg-surface);border-bottom:1px solid var(--color-border);justify-content:center}.free-mock-ctrl-dot{width:28px;height:28px;background:var(--color-bg-card);border-radius:50%;opacity:.3}.free-mock-ctrl-bar{width:100px;height:6px;background:var(--color-bg-card);border-radius:3px;opacity:.3}.free-mock-tab-area{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:60px 40px;opacity:.15}.free-mock-tab-line{height:1px;background:var(--color-text-muted);width:100%}.cockpit-load-tab-btn{font-size:0!important;padding:6px 8px!important;display:flex;align-items:center;gap:6px}.lesson-player-main-layout{display:flex;gap:var(--spacing-lg);padding:var(--spacing-lg);align-items:flex-start;position:relative}.lesson-player-main-layout:has(.exam-upload-panel-layout-noVideo){flex-direction:row}.exam-upload-panel-layout-noVideo{order:-1}@media(max-width:1024px){.exam-upload-panel-layout-noVideo{order:0}}.video-panel{flex-shrink:0;background:var(--color-alphatab-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);border:2px solid var(--color-alphatab-border);box-shadow:var(--shadow-lg),var(--shadow-glow-subtle);display:flex;flex-direction:column;overflow:hidden;position:sticky;top:var(--spacing-lg);align-self:flex-start;min-width:400px}.video-wrapper{position:relative;width:100%;background:#000;overflow:hidden;padding-bottom:56.25%;border-radius:var(--radius-lg)}.video-wrapper:after{content:"guitarbear.com";position:absolute;bottom:16px;right:16px;font-family:Montserrat,Gotham,-apple-system,BlinkMacSystemFont,sans-serif;font-size:30px;font-weight:800;letter-spacing:.5px;background:linear-gradient(90deg,#ff8c3c8c,#ff8c3c8c 40%,#ffffff73 40%,#ffffff73);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));z-index:5;pointer-events:none;-webkit-user-select:none;user-select:none}.video-wrapper:hover:after{background:linear-gradient(90deg,#ff8c3cbf,#ff8c3cbf 40%,#ffffffa6 40%,#ffffffa6);-webkit-background-clip:text;background-clip:text}.video-wrapper video.sync-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:var(--radius-lg);transition:transform .2s ease}.video-wrapper video.sync-video.mirrored{transform:scaleX(-1)}.video-mirror-button{position:absolute;top:8px;left:8px;z-index:10;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:#ffffffe6}.video-mirror-button:hover{background:#000c;border-color:#ffffff4d;color:#fff;transform:scale(1.05)}.video-mirror-button:active{transform:scale(.95)}.video-mirror-button svg{width:18px;height:18px}.video-panel.video-panel-horizontal .video-wrapper{position:relative}.video-panel.video-panel-horizontal .video-mirror-button{position:absolute;top:8px;left:50%;transform:translate(calc(-50% + var(--video-offset, 0px)));margin-left:calc((100% - var(--video-width, 100%)) / -2)}.video-panel.video-panel-horizontal .video-wrapper:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.video-panel.video-panel-horizontal .video-wrapper,.video-panel.video-panel-horizontal .sync-video{position:relative}.video-panel.video-panel-horizontal .video-mirror-button{position:absolute;top:8px;left:calc(50% - var(--video-half-width, 50%) + 8px);transform:translate(0);margin-left:0}.video-resizer{position:fixed;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;transition:background-color .2s ease,width .2s ease;z-index:10;pointer-events:auto;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:none}.video-resizer:hover{width:6px;background:var(--color-bg-card-hover);border-left:1px solid var(--color-border);border-right:1px solid var(--color-border)}.video-resizer:active{width:6px;background:var(--color-bg-card-hover);border-left:1px solid var(--color-accent);border-right:1px solid var(--color-accent)}.resizer-handle{width:3px;height:100%;position:absolute;left:50%;top:0;transform:translate(-50%);background:var(--color-border);border-radius:2px;transition:all .2s ease;opacity:.7;margin:0;padding:0;box-shadow:0 0 4px var(--color-glow-subtle);display:flex;align-items:center;justify-content:center}.resizer-grip-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:32px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);font-size:12px;line-height:1;letter-spacing:-2px;font-weight:700;opacity:.9;box-shadow:0 2px 4px #0003;transition:all .2s ease}.video-resizer:hover .resizer-handle{width:3px;height:100%;background:var(--color-accent);opacity:1;box-shadow:0 0 8px var(--color-glow)}.video-resizer:hover .resizer-grip-icon{background:var(--color-bg-card-hover);border-color:var(--color-accent);color:var(--color-accent);opacity:1;box-shadow:0 2px 8px var(--color-glow)}.video-resizer:active .resizer-handle{background:var(--color-accent);opacity:1;box-shadow:0 0 12px var(--color-glow-strong)}.video-resizer:active .resizer-grip-icon{background:var(--color-bg-card-hover);border-color:var(--color-accent);color:var(--color-accent);opacity:1;transform:translate(-50%,-50%) scale(1.05)}.tab-container-wrapper{flex:1;min-width:300px;width:100%;height:100%;overflow:visible;background:transparent}@media(max-width:1100px){.lesson-player-container:not(.free-mode) .lesson-player-content{overflow:hidden!important}.lesson-player-main-layout{flex-direction:column;display:flex;padding:0;gap:0;height:100%;min-height:0;overflow:hidden}.video-panel{position:relative!important;top:0!important;z-index:10!important;width:100%!important;max-width:100%;min-width:0!important;flex:0 0 auto!important;border-radius:0!important;border-left:none!important;border-right:none!important;border-top:none!important;border-bottom:2px solid var(--color-alphatab-border)!important}.video-panel .video-wrapper{max-height:45vh!important;aspect-ratio:16 / 9;padding-bottom:0!important;height:auto;display:flex;justify-content:center;align-items:center}.video-panel .sync-video{position:relative!important;top:auto!important;left:auto!important;width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}.tab-container-wrapper{flex:1!important;min-height:0!important;width:100%!important;order:2!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.tab-container{border-radius:0!important;border:none!important;padding:var(--spacing-sm)!important;overflow:visible!important;height:auto!important;min-height:auto!important}.vertical-video-exam-column{min-width:0!important;width:100%!important}.video-resizer{display:none!important}.video-wrapper:after{font-size:clamp(12px,4vw,18px);bottom:8px;right:8px;max-width:50%;text-align:right}}.tab-container{width:100%;min-width:300px;max-width:100%;overflow-x:auto;min-height:400px;background:var(--color-alphatab-bg)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);padding:var(--spacing-lg);border:2px solid var(--color-alphatab-border);box-shadow:var(--shadow-lg),var(--shadow-glow-subtle);position:relative}.tab-zoom-controls{position:fixed;bottom:72px;right:16px;display:flex;align-items:center;gap:4px;background:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:6px 10px;box-shadow:0 4px 16px #0006;z-index:1000}.tab-zoom-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:50%;color:#fffc;cursor:pointer;transition:all .15s ease}.tab-zoom-btn:hover:not(:disabled){background:#ffffff26;color:var(--color-accent)}.tab-zoom-btn:active:not(:disabled){transform:scale(.9)}.tab-zoom-btn:disabled{opacity:.3;cursor:not-allowed}.tab-zoom-btn svg{width:16px;height:16px}.tab-zoom-level{font-size:12px;font-weight:600;color:#ffffffe6;min-width:40px;text-align:center;font-variant-numeric:tabular-nums}.tab-download-btn{position:relative;margin-left:6px;text-decoration:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none!important;border-radius:50%!important;color:var(--color-accent, #ff6b35);cursor:pointer;transition:all .15s ease}.tab-download-btn:before{content:"";position:absolute;left:-3px;top:4px;bottom:4px;width:1px;background:#ffffff26}a.tab-download-btn{text-decoration:none;color:var(--color-accent, #ff6b35)}.tab-download-btn:hover:not(:disabled),a.tab-download-btn:hover{background:#ff6b3526;color:var(--color-accent, #ff6b35)}.tab-download-locked{opacity:.45;cursor:not-allowed!important}.tab-download-locked:hover{background:transparent!important;color:#ffffff80!important}.tab-download-crown{position:absolute;top:-4px;right:-6px;font-size:10px;line-height:1;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}@media(max-width:767px){.tab-download-btn{display:none!important}}@media(max-width:1024px){.tab-zoom-controls{bottom:calc(80px + env(safe-area-inset-bottom,0px));right:auto;left:12px;padding:4px 8px;gap:2px}.tab-zoom-btn{width:24px;height:24px}.tab-zoom-btn svg{width:14px;height:14px}.tab-zoom-level{font-size:11px;min-width:36px}}.theme-hello-kitty .tab-container{background:var(--color-alphatab-bg)!important;backdrop-filter:none;-webkit-backdrop-filter:none;border:2.2px solid var(--color-alphatab-border);border-radius:24px;box-shadow:var(--shadow-card)}.theme-hello-kitty .tab-container svg,.theme-hello-kitty .tab-container canvas{border-radius:12px}.theme-hello-kitty .tab-container svg circle[r],.theme-hello-kitty .tab-container svg ellipse{fill:var(--color-alphatab-note)!important;stroke:var(--color-text-primary)!important;stroke-width:2px!important}.theme-hello-kitty .tab-container svg line{stroke:var(--color-alphatab-text)!important;stroke-width:2px!important;opacity:.4}.theme-hello-kitty .at-cursor-bar{background:transparent!important;border:none!important;box-shadow:none!important}.theme-kuromi .tab-container{background:var(--color-alphatab-bg)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid var(--color-alphatab-border);border-radius:18px;box-shadow:var(--shadow-card)}.theme-kuromi .tab-container svg,.theme-kuromi .tab-container canvas{border-radius:10px}.theme-kuromi .tab-container svg circle[r],.theme-kuromi .tab-container svg ellipse{fill:var(--color-alphatab-note)!important;stroke:var(--color-accent)!important;stroke-width:1.5px!important}.theme-kuromi .tab-container svg line{stroke:var(--color-alphatab-text)!important;stroke-width:1.5px!important;opacity:.5}.theme-kuromi .at-cursor-bar{background:transparent!important;border:none!important;box-shadow:none!important}.tab-container>div:not(.loop-range-panel){display:block!important;visibility:visible!important;min-height:400px;width:100%}.tab-container svg,.tab-container canvas{display:block!important;visibility:visible!important;max-width:100%;background-color:var(--color-alphatab-bg)!important;border-radius:var(--radius-sm)}.tab-container>div:not(.loop-range-panel){background-color:var(--color-alphatab-bg)!important}.loop-control{position:relative}.loop-popup{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px;min-width:180px;background:var(--color-bg-card)!important;border:1px solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:9999;padding:10px 12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.loop-popup-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.loop-popup-title{font-size:11px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.loop-toggle-btn{padding:4px 10px;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xs);font-size:10px;font-weight:700;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.loop-toggle-btn:hover{background:var(--color-bg-hover)}.loop-toggle-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.loop-popup-controls{display:flex;flex-direction:column;gap:6px}.loop-range-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.loop-range-label{font-size:11px;font-weight:500;color:var(--color-text-secondary)}.loop-range-buttons{display:flex;align-items:center;gap:2px;background:var(--color-bg-secondary);border-radius:var(--radius-xs);padding:2px}.loop-adjust-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--radius-xs);color:var(--color-text-secondary);cursor:pointer;transition:all .12s ease}.loop-adjust-btn:hover:not(:disabled){background:var(--color-bg-hover);color:var(--color-accent)}.loop-adjust-btn:active:not(:disabled){background:var(--color-accent-soft);transform:scale(.95)}.loop-adjust-btn:disabled{opacity:.3;cursor:not-allowed}.loop-bar-display{font-size:13px;font-weight:700;color:var(--color-accent);min-width:50px;text-align:center;font-variant-numeric:tabular-nums}.loop-bar-number{font-size:14px;font-weight:700;color:var(--color-accent);min-width:28px;text-align:center;font-variant-numeric:tabular-nums}.loop-bar-info{display:flex;align-items:center;justify-content:center;gap:2px;padding-top:4px;border-top:1px solid var(--color-border)}.loop-bar-count-value{font-size:12px;font-weight:700;color:var(--color-accent);font-variant-numeric:tabular-nums}.loop-bar-count-label{font-size:11px;font-weight:500;color:var(--color-text-muted)}.loop-popup-hint{font-size:10px;color:var(--color-text-muted);text-align:center}.loop-popup-mobile{position:fixed!important;left:50%!important;bottom:calc(env(safe-area-inset-bottom,0px) + 80px)!important;top:auto!important;transform:translate(-50%)!important;min-width:200px;max-width:280px}.video-container{margin-bottom:20px;background:#0009;border:1px solid rgba(217,70,239,.3);border-radius:12px;padding:16px;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.video-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(217,70,239,.3)}.video-title{font-family:Orbitron,sans-serif;font-size:16px;font-weight:700;color:#d946ef;margin:0;text-shadow:0 0 6px rgba(217,70,239,.3);text-transform:uppercase;letter-spacing:1px}.video-toggle-btn{background:#d946ef26;border:1px solid rgba(217,70,239,.4);color:#d946ef;padding:6px 12px;border-radius:6px;cursor:pointer;font-family:Orbitron,sans-serif;font-size:12px;font-weight:700;transition:all .2s;text-transform:uppercase;letter-spacing:1px;box-shadow:0 2px 8px #0000004d}.video-toggle-btn:hover{background:#d946ef40;box-shadow:0 0 12px #d946ef66;transform:translateY(-1px)}.video-wrapper{position:relative;width:100%;overflow:hidden;border-radius:8px;background:#00000080;transition:all .3s ease}.video-container.collapsed .video-wrapper{padding-bottom:25%;height:0}.video-container.expanded .video-wrapper{padding-bottom:56.25%;height:0}.youtube-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:8px}.sync-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;border-radius:8px}.lesson-player-controls-bottom{flex-shrink:0;height:56px;min-height:56px;background:var(--color-bg-primary);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--color-border-default);z-index:100;box-shadow:0 -4px 12px var(--shadow-md),var(--shadow-glow-subtle);display:flex;align-items:center;padding:0 var(--spacing-lg);overflow:visible}.lesson-player-controls-bottom.controls-top{border-top:none;border-bottom:1px solid var(--color-border-default);box-shadow:0 4px 12px var(--shadow-md),var(--shadow-glow-subtle)}.controls-top .tempo-popup,.controls-top .volume-popup,.controls-top .loop-popup{bottom:auto;top:100%;margin-bottom:0;margin-top:8px}.control-btn-position-toggle{margin-right:var(--spacing-sm)}.controls-bottom-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%;flex-wrap:nowrap;justify-content:center;position:relative;overflow:visible;min-height:40px}@media(max-width:1100px){.lesson-player-controls-bottom{height:56px;padding:0 4px;min-height:56px}.controls-bottom-content{flex-wrap:nowrap!important;gap:2px;width:100%;overflow:visible!important}.controls-bottom-content::-webkit-scrollbar{display:none}.lesson-player-container.free-mode .controls-bottom-content{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.bar-nav-buttons,.control-btn-nav-lesson{display:none!important}.control-group-transport,.control-group-tempo,.control-group-track{padding:0 2px;gap:2px;flex-shrink:1;min-width:0}.control-divider{margin:0 2px;flex-shrink:0}}@media(max-width:767px){.lesson-player-container.mobile-layout .controls-bottom-content{justify-content:flex-start;padding-left:0;padding-right:0;gap:var(--spacing-sm)}}@media(min-width:768px){.lesson-player-container.mobile-layout .controls-bottom-content{justify-content:center!important;padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}}.lesson-player-container.mobile-layout .control-btn-nav-lesson{flex-shrink:0}.control-group-transport,.control-group-tempo,.control-group-track{display:flex;align-items:center;gap:var(--spacing-sm);flex-shrink:0;padding:0 var(--spacing-md);border-radius:var(--radius-md);height:40px;min-height:40px;position:relative;overflow:visible}.bar-nav-buttons{display:flex;flex-direction:row;align-items:center;gap:2px;flex-shrink:0}.lesson-player-container.mobile-layout .control-group-tempo,.lesson-player-container.mobile-layout .control-group-volume,.lesson-player-container.mobile-layout .layout-mode-selector{position:static!important;overflow:visible!important;transform:none!important;isolation:auto!important;z-index:auto!important}.lesson-player-container.mobile-layout .control-group-tempo .tempo-popup,.lesson-player-container.mobile-layout .control-group-volume .volume-popup,.lesson-player-container.mobile-layout .layout-mode-selector .layout-popup{position:fixed!important}.control-divider{width:1px;height:32px;min-height:32px;background:var(--color-border-default);flex-shrink:0;align-self:center}.control-btn-play{width:40px;height:40px;min-width:40px;min-height:40px;background:var(--color-accent-soft);border:1.5px solid var(--color-border-default);color:var(--color-accent);border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}.control-btn-play:hover{background:var(--color-accent-hover);border-color:var(--color-border-hover);transform:scale(1.05);box-shadow:var(--shadow-glow-sm)}.control-btn-play:active{transform:scale(.98)}.control-btn-play.counting-in{background:var(--color-warning);border-color:var(--color-warning);animation:count-in-pulse .5s ease-in-out infinite}.control-btn-play.counting-in:hover{background:var(--color-warning);border-color:var(--color-warning)}.count-in-number{font-size:18px;font-weight:700;color:var(--color-bg);line-height:1}@keyframes count-in-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.control-btn-play.saving{background:var(--color-bg-secondary);border-color:var(--color-border-muted);cursor:wait;pointer-events:none}.control-btn-play.saving:hover{transform:none}.saving-spinner{animation:saving-spin .8s linear infinite;opacity:.7}@keyframes saving-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.control-btn-icon{width:36px;height:36px;min-width:36px;min-height:36px;background:transparent;border:1px solid var(--color-border-muted);color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}.control-btn-icon:hover{background:var(--color-accent-soft);border-color:var(--color-border-hover);color:var(--color-text-primary);transform:translateY(-1px)}.control-btn-icon.active{background:var(--color-accent-soft);border-color:var(--color-border-active);color:var(--color-accent);box-shadow:var(--shadow-glow-sm)}.control-btn-icon.active:hover{background:var(--color-accent-hover);border-color:var(--color-border-hover)}.control-btn-range-adjust{width:30px;height:30px;border-color:var(--color-border-active);color:var(--color-accent)}.control-btn-range-adjust:hover{background:var(--color-accent-soft);color:var(--color-accent);box-shadow:var(--shadow-glow-sm)}.control-group-seek{display:flex;align-items:center;gap:8px;min-width:180px;max-width:300px;flex:1}.seek-time{font-size:11px;font-weight:500;color:var(--color-text-secondary);font-family:JetBrains Mono,monospace;min-width:36px;text-align:center}.seek-time-current{color:var(--color-accent)}.seek-bar{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:3px;cursor:pointer;outline:none;transition:height .15s ease}.seek-bar:hover{height:8px}.seek-bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--color-accent);border-radius:50%;cursor:pointer;box-shadow:0 1px 4px #0000004d;transition:transform .15s ease,box-shadow .15s ease}.seek-bar:hover::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 2px 8px #0006}.seek-bar::-moz-range-thumb{width:14px;height:14px;background:var(--color-accent);border:none;border-radius:50%;cursor:pointer;box-shadow:0 1px 4px #0000004d}.seek-bar:disabled{opacity:.5;cursor:not-allowed}.seek-bar:disabled::-webkit-slider-thumb{cursor:not-allowed}.control-group-tempo{position:relative;z-index:1000}.tempo-display{display:flex;align-items:center;gap:4px;background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:var(--radius-sm);padding:4px;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;min-height:36px}.tempo-display:hover{border-color:var(--color-border-hover);background:var(--color-bg-card-hover)}.tempo-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:var(--radius-xs);color:var(--color-text-primary);font-size:16px;font-weight:var(--font-weight-bold);cursor:pointer;transition:all var(--transition-fast)}.tempo-btn:hover{background:var(--color-bg-hover)}.tempo-btn:active{background:var(--color-bg-active)}.tempo-info{display:flex;align-items:baseline;gap:4px;min-width:50px;padding:0 4px;justify-content:center}.tempo-bpm{font-family:var(--font-mono);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-accent-primary);line-height:1}.tempo-unit{font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:uppercase}.tempo-popup{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px;background:var( --color-bg-card )!important;opacity:1!important;border:1px solid var(--color-border-default);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);min-width:220px;box-shadow:var(--shadow-lg);z-index:9999;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.tempo-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border-muted)}.tempo-popup-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.tempo-popup-value{font-family:var(--font-mono);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-accent-primary)}.tempo-popup-slider{padding:var(--spacing-sm) 0}.tempo-slider-track{position:relative;height:6px;margin-bottom:var(--spacing-md)}.tempo-slider-fill{position:absolute;top:0;left:0;height:100%;background:var(--color-accent-primary);border-radius:3px;pointer-events:none}.tempo-slider-labels{display:flex;justify-content:space-between;position:relative;font-size:11px;color:var(--color-text-muted);padding-top:var(--spacing-xs)}.tempo-original-marker{position:absolute;transform:translate(-50%);color:var(--color-accent-primary);font-weight:var(--font-weight-bold);font-size:11px}.tempo-popup-hint{margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--color-border-muted);font-size:10px;color:var(--color-text-muted);text-align:center;font-family:var(--font-mono);letter-spacing:.02em}.control-group-volume{position:relative;z-index:1000;display:flex;align-items:center;flex-shrink:0}.volume-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;min-height:36px;background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:var(--radius-sm);color:var(--color-text-primary);cursor:pointer;flex-shrink:0;transition:all var(--transition-fast)}.volume-btn:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-hover)}.volume-btn.muted{color:var(--color-text-muted)}.volume-popup{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px;background:var( --color-bg-card )!important;opacity:1!important;border:1px solid var(--color-border-default);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);min-width:180px;box-shadow:var(--shadow-lg);z-index:9999;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:auto}.volume-popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border-muted)}.volume-popup-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.volume-popup-value{font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-accent-primary)}.volume-slider-container{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) 0}.volume-slider{flex:1;height:6px;background:var(--color-border-muted);border-radius:3px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.volume-slider::-webkit-slider-runnable-track{height:6px;background:var(--color-border-muted);border-radius:3px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-border-active)!important;border:none!important;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #00000040;margin-top:-6px}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.15);background:var(--color-accent)!important;box-shadow:0 3px 8px #00000059}.volume-slider::-moz-range-track{height:6px;background:var(--color-border-muted);border-radius:3px}.volume-slider::-moz-range-thumb{width:18px;height:18px;background:var(--color-border-active)!important;border:none!important;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #00000040}.volume-slider::-moz-range-thumb:hover{transform:scale(1.15);background:var(--color-accent)!important}.volume-mute-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:1px solid var(--color-border-muted);border-radius:var(--radius-xs);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.volume-mute-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.volume-mute-btn.muted{background:var(--color-bg-muted);color:var(--color-text-muted)}.tempo-slider-wrapper{position:relative;width:100%;display:flex;align-items:center}.tempo-slider{width:100%;height:6px;background:var(--color-border-muted);border-radius:3px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:background var(--transition-fast);position:relative;z-index:1}.tempo-slider:hover{background:var(--color-border-default)}.tempo-slider::-webkit-slider-runnable-track{height:6px;background:var(--color-border-muted);border-radius:3px}.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-border-active)!important;border:none!important;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #00000040;margin-top:-6px;transition:all var(--transition-fast)}.tempo-slider::-webkit-slider-thumb:hover{transform:scale(1.15);background:var(--color-accent)!important;box-shadow:0 3px 8px #00000059}.tempo-slider::-moz-range-track{height:6px;background:var(--color-border-muted);border-radius:3px}.tempo-slider::-moz-range-thumb{width:18px;height:18px;background:var(--color-border-active)!important;border:none!important;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #00000040;transition:all var(--transition-fast)}.tempo-slider::-moz-range-thumb:hover{transform:scale(1.15);background:var(--color-accent)!important}.tempo-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:var(--shadow-glow-lg),var(--shadow-md)}.control-select-track{background:var(--color-bg-card);border:1px solid var(--color-border-muted);color:var(--color-text-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;min-width:140px;transition:all var(--transition-fast)}.control-select-track:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-hover)}.control-select-track:focus{outline:none;border-color:var(--color-border-active);box-shadow:var(--shadow-glow-sm)}.control-group-transpose{display:flex;align-items:center;gap:var(--spacing-sm);flex-shrink:0;padding:0 var(--spacing-md);border-radius:var(--radius-md);height:40px;min-height:40px;position:relative;overflow:visible}.transpose-control{display:flex;align-items:center;gap:4px;background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:var(--radius-sm);padding:2px 6px 2px 8px;flex-shrink:0}.transpose-icon{color:var(--color-text-secondary);flex-shrink:0;margin-right:2px}.transpose-control:not(.disabled) .transpose-icon{color:var(--color-text-primary)}.transpose-control.disabled .transpose-icon{color:var(--color-text-muted)}.transpose-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;min-height:28px;background:transparent;border:none;border-radius:var(--radius-xs);color:var(--color-text-primary);font-size:16px;font-weight:var(--font-weight-bold);flex-shrink:0;cursor:pointer;transition:all var(--transition-fast)}.transpose-btn:hover:not(:disabled){background:var(--color-bg-hover)}.transpose-btn:active:not(:disabled){background:var(--color-bg-active)}.transpose-btn:disabled{opacity:.3;cursor:not-allowed}.transpose-reset{margin-left:4px;border-left:1px solid var(--color-border-muted);padding-left:6px}.transpose-value{min-width:32px;text-align:center;font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold)}.transpose-zero{color:var(--color-text-secondary)}.transpose-positive,.transpose-negative{color:var(--color-accent-primary)}.transpose-disabled{color:var(--color-text-muted)}.transpose-control.disabled{opacity:.5;cursor:not-allowed;background:var(--color-bg-muted)}.transpose-control.disabled .transpose-btn{cursor:not-allowed;pointer-events:none}.sidebar-toggle,.controls-sidebar{display:none}@media(max-width:767px){.lesson-player-header-section{min-height:90px;max-height:100px}.lesson-player-controls-bottom{height:64px;padding:0 12px}.controls-bottom-content{gap:8px;justify-content:flex-start;overflow:visible}.control-group-transport,.control-group-tempo,.control-group-track{padding:0 8px;height:44px;gap:6px}.control-btn-play{width:44px;height:44px}.control-btn-icon{width:40px;height:40px}.tempo-display{padding:3px}.tempo-btn{width:24px;height:24px;font-size:14px}.tempo-info{min-width:50px}.tempo-bpm{font-size:14px}.tempo-percentage{font-size:10px}.tempo-popup{min-width:240px;padding:var(--spacing-sm)}.control-select-track{min-width:120px;font-size:12px;padding:6px 10px}.control-group-transpose{padding:0 6px;height:44px}.transpose-btn{width:26px;height:26px;font-size:14px}.transpose-value{min-width:28px;font-size:12px}.control-divider{height:28px}.lesson-player-header{padding:10px 12px}.lesson-header-content{gap:12px}.lesson-header-left{gap:8px;min-width:0;max-width:35%}.lesson-header-right{max-width:35%}.lesson-header-center{display:none}.lesson-back-btn-icon{width:32px;height:32px;padding:6px}.lesson-title-main{font-size:18px;letter-spacing:.5px}.lesson-artist-subtle{font-size:12px}.status-badge-cluster{gap:6px}.status-badge{padding:5px 10px;font-size:11px;gap:4px}.status-badge-icon{font-size:12px}.progress-section-compact{padding:8px 12px}.progress-section-top{gap:8px;margin-bottom:6px}.progress-label-text{font-size:12px}.progress-time-value{font-size:13px}.tier-badge-modern{padding:3px 8px;font-size:11px;gap:4px}.tier-badge-icon{font-size:12px}.progress-bar-modern{height:4px}}.sidebar-toggle{display:none;background:#0009;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#0f8;border:2px solid rgba(0,255,136,.3);border-right:none;border-radius:8px 0 0 8px;cursor:pointer;font-size:20px;font-weight:700;z-index:1000;display:flex;align-items:center;justify-content:center;box-shadow:-2px 0 15px #00000080,0 0 10px #0f83;transition:all .3s cubic-bezier(.4,0,.2,1)}.sidebar-toggle:hover{background:#000c;border-color:#0f89;box-shadow:-2px 0 20px #000000b3,0 0 20px #0f86;transform:translateY(-50%) scale(1.05)}.sidebar-toggle.open{right:280px}.controls-sidebar{position:fixed;right:-280px;top:80px;width:280px;height:calc(100vh - 80px);background:#000c;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-left:2px solid rgba(0,255,136,.2);overflow-y:auto;box-shadow:-2px 0 20px #000000b3,0 0 30px #00ff881a;transition:right .3s ease;z-index:999}.controls-sidebar.open{right:0}.controls-panel-compact{padding:16px;display:flex;flex-direction:column;gap:16px}.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:12px;border-bottom:1px solid rgba(0,255,136,.2)}.sidebar-header h3{font-family:Orbitron,sans-serif;margin:0;font-size:20px;font-weight:900;color:#0f8;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 10px rgba(0,255,136,.5)}.sidebar-close-btn{background:#0009;border:1px solid rgba(0,255,136,.3);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:24px;color:#0f8;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);line-height:1;font-weight:600;box-shadow:0 0 10px #0f83}.sidebar-close-btn:hover{background:#000c;border-color:#0f89;box-shadow:0 0 20px #0f86;transform:rotate(90deg)}.control-section{padding:16px;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;border:2px solid rgba(0,255,136,.2);box-shadow:0 2px 8px #00000080,0 0 15px #00ff881a}.control-section-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:600;font-size:16px;color:#0f8;font-family:Rajdhani,sans-serif;letter-spacing:1px;text-transform:uppercase}.control-icon{font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.control-title{font-size:16px}.play-pause-btn-compact{width:100%;background:linear-gradient(135deg,#0f8,#00cc6a);color:#000;border:2px solid #00ff88;padding:16px;font-family:Orbitron,sans-serif;font-size:16px;font-weight:900;border-radius:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 20px #00ff8880,0 4px 15px #0000004d;text-transform:uppercase;letter-spacing:2px}.play-pause-btn-compact:hover{transform:translateY(-2px);box-shadow:0 0 30px #0f8c,0 6px 20px #0006;background:linear-gradient(135deg,#0fa,#0f8)}.play-pause-btn-compact:active{transform:translateY(0);box-shadow:0 0 15px #0f86,0 2px 10px #0000004d}.control-compact-item{margin-bottom:12px}.control-compact-item:last-child{margin-bottom:0}.toggle-label-compact{display:flex;align-items:center;gap:8px;cursor:pointer}.toggle-checkbox{width:20px;height:20px;cursor:pointer;accent-color:#58cc02}.toggle-text-compact{font-size:14px;-webkit-user-select:none;user-select:none;color:#ccc;font-weight:600;font-family:Rajdhani,sans-serif;letter-spacing:.5px}.control-label-compact{display:flex;flex-direction:column;gap:6px}.control-label-text{font-family:Rajdhani,sans-serif;font-size:14px;color:#ccc;font-weight:600;letter-spacing:.5px}.control-range-info{font-family:Rajdhani,sans-serif;font-size:12px;color:#999;font-weight:400;letter-spacing:.5px}.tempo-control-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.tempo-input-compact{width:70px;padding:6px 10px;border:2px solid rgba(0,255,136,.3);border-radius:8px;font-size:14px;font-weight:600;text-align:center;background:#0009;color:#fff;font-family:Rajdhani,sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px #0f83;letter-spacing:1px}.tempo-input-compact:focus{outline:none;border-color:#0f8;box-shadow:0 0 0 3px #00ff884d,0 0 15px #0f83;background:#000c}.tempo-input-compact::-webkit-inner-spin-button,.tempo-input-compact::-webkit-outer-spin-button{opacity:1;height:20px}select.tempo-input-compact,.control-section select{width:100%;padding:8px 40px 8px 8px;font-size:14px;background:#0009;border:2px solid rgba(0,255,136,.3);border-radius:8px;color:#fff;font-family:Rajdhani,sans-serif;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px #0f83;letter-spacing:.5px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300ff88' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}select.tempo-input-compact:focus,.control-section select:focus{outline:none;border-color:#0f8;box-shadow:0 0 0 3px #00ff884d,0 0 15px #0f83;background-color:#000c}select.tempo-input-compact option,.control-section select option{background:#1a1a1a;color:#fff;padding:8px;font-family:Rajdhani,sans-serif}.volume-slider-compact,.tempo-slider-compact{width:100%;height:8px;border-radius:8px;background:#0009;border:1px solid rgba(0,255,136,.3);outline:none;-webkit-appearance:none;cursor:pointer;box-shadow:inset 0 2px 4px #00000080}.volume-slider-compact::-webkit-slider-thumb,.tempo-slider-compact::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#0f8;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px #00ff8880;border:2px solid #000}.volume-slider-compact::-webkit-slider-thumb:hover,.tempo-slider-compact::-webkit-slider-thumb:hover{box-shadow:0 0 20px #0f8c;transform:scale(1.1)}.volume-slider-compact::-moz-range-thumb,.tempo-slider-compact::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0f8;cursor:pointer;border:2px solid #000;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px #00ff8880}.volume-slider-compact::-moz-range-thumb:hover,.tempo-slider-compact::-moz-range-thumb:hover{box-shadow:0 0 20px #0f8c;transform:scale(1.1)}.volume-slider-compact:disabled{opacity:.3;cursor:not-allowed}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:#fff;text-align:center}.loading-container p{font-family:Rajdhani,sans-serif;font-size:18px;color:#ccc;margin-top:20px;letter-spacing:1px}.loading-spinner{width:50px;height:50px;border:4px solid rgba(0,0,0,.6);border-top-color:#0f8;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px;box-shadow:0 0 20px #00ff8880}.layout-transition-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#0003,#00140a40,#0003);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:10000;animation:shimmerFade .4s ease-out}@keyframes shimmerFade{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}50%{opacity:1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}to{opacity:1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}@media(max-width:767px){.lesson-player-container.mobile-layout{padding-top:60px;display:flex;flex-direction:column;height:100vh;overflow:hidden}.lesson-player-container.mobile-layout.free-mode{padding-top:0}.lesson-player-container.mobile-layout.free-mode .lesson-player-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.lesson-player-container.mobile-layout.free-mode .lesson-player-main-layout{flex:1;display:flex;flex-direction:column;padding:0;gap:0;min-height:0;overflow:hidden}.lesson-player-container.mobile-layout.free-mode .tab-container-wrapper{flex:1;min-height:0;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch}.lesson-player-container.mobile-layout.header-hidden{padding-top:3px}.lesson-player-container.mobile-layout.has-video .lesson-player-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.lesson-player-container.mobile-layout.has-video .lesson-player-main-layout{flex:1;display:flex;flex-direction:column;padding:0;gap:0;min-height:0;overflow:hidden}.lesson-player-container.mobile-layout.has-video .video-panel{position:sticky!important;top:0!important;z-index:10;width:100%!important;max-width:100%!important;min-width:unset!important;flex-shrink:0;border-radius:0;border-left:none;border-right:none;border-top:none;background:var(--color-bg)}.lesson-player-container.mobile-layout.has-video .video-wrapper{padding-bottom:45%;border-radius:0}.lesson-player-container.mobile-layout.has-video .tab-container-wrapper{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:var(--spacing-sm);padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}.lesson-player-container.mobile-layout.has-video .tab-container{width:100%;padding:var(--spacing-sm);border-radius:var(--radius-lg);min-height:auto;overflow:visible}.lesson-player-container.mobile-layout:not(.has-video) .lesson-player-main-layout{flex-direction:column;padding:var(--spacing-md);gap:var(--spacing-md)}.lesson-player-container.mobile-layout:not(.has-video) .tab-container-wrapper{order:2;width:100%;flex:1;min-height:300px;padding:0}.lesson-player-container.mobile-layout:not(.has-video) .tab-container{width:100%;padding:var(--spacing-sm);border-radius:var(--radius-lg);min-height:400px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.lesson-player-container.mobile-layout:not(.has-video) .lesson-player-content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.lesson-player-container.mobile-layout .video-resizer{display:none!important}.lesson-player-container.mobile-layout .tab-container>div{max-width:100%;overflow-x:hidden}}@media(max-width:767px){.lesson-player-container.mobile-layout .lesson-player-controls-bottom{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);left:0;right:0;z-index:100;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:var(--color-bg-secondary);border-top:1px solid var(--color-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 -4px 20px #0000004d}.lesson-player-container.mobile-layout .lesson-player-controls-bottom.controls-top{position:fixed;top:60px;bottom:auto;border-top:none;border-bottom:1px solid var(--color-border);box-shadow:0 4px 20px #0000004d}.lesson-player-container.mobile-layout.header-hidden .lesson-player-controls-bottom.controls-top{top:3px}.lesson-player-container.mobile-layout .controls-bottom-content{display:flex;align-items:center;gap:8px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0;position:relative;justify-content:space-between}.lesson-player-container.mobile-layout .controls-bottom-content::-webkit-scrollbar{display:none}.lesson-player-container.mobile-layout .control-btn-icon{min-width:44px;min-height:44px;width:44px;height:44px;border-radius:12px;flex-shrink:0}.lesson-player-container.mobile-layout .control-btn-play{min-width:52px;min-height:52px;width:52px;height:52px;border-radius:26px;flex-shrink:0}.lesson-player-container.mobile-layout .control-btn-play svg{width:20px;height:20px}.lesson-player-container.mobile-layout .tempo-display{padding:6px 10px;min-height:44px;flex-shrink:0}.lesson-player-container.mobile-layout .tempo-btn{width:32px;height:32px;font-size:18px}.lesson-player-container.mobile-layout .tempo-bpm{font-size:15px}.lesson-player-container.mobile-layout .tempo-unit{font-size:9px}.lesson-player-container.mobile-layout .tempo-popup,.tempo-popup{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;transform:translate(-50%)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 80px)!important;width:calc(100% - 32px)!important;max-width:400px!important;min-width:280px!important;max-height:calc(100vh - env(safe-area-inset-bottom,0px) - 160px)!important;background:var( --color-bg-card )!important;opacity:1!important;visibility:visible!important;display:block!important;border-radius:var(--radius-lg)!important;z-index:10001!important;box-shadow:0 8px 32px #0006!important;margin:0!important;pointer-events:auto!important;will-change:transform,opacity!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;contain:none!important}.lesson-player-container.mobile-layout .volume-btn{min-width:44px;min-height:44px;flex-shrink:0}.lesson-player-container.mobile-layout .volume-popup,.volume-popup{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;transform:translate(-50%)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 80px)!important;width:calc(100% - 32px)!important;max-width:300px!important;min-width:240px!important;max-height:calc(100vh - env(safe-area-inset-bottom,0px) - 160px)!important;background:var( --color-bg-card )!important;opacity:1!important;visibility:visible!important;display:block!important;border-radius:var(--radius-lg)!important;z-index:10001!important;box-shadow:0 8px 32px #0006!important;margin:0!important;pointer-events:auto!important;will-change:transform,opacity!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;contain:none!important}.lesson-player-container.mobile-layout .control-select-track{min-width:100px;max-width:140px;padding:8px 28px 8px 10px;font-size:12px;min-height:44px;flex-shrink:0}.lesson-player-container.mobile-layout .transpose-control{flex-shrink:0;padding:4px 8px;min-height:44px}.lesson-player-container.mobile-layout .transpose-btn{width:28px;height:28px}.lesson-player-container.mobile-layout .control-divider{margin:0 4px;height:28px;flex-shrink:0}.lesson-player-container.mobile-layout .bar-nav-buttons{display:flex;gap:2px;flex-shrink:0}.lesson-player-container.mobile-layout .control-btn-range-adjust{min-width:36px;min-height:36px;width:36px;height:36px}.lesson-player-container.mobile-layout .control-btn-position-toggle{min-width:40px;min-height:40px;flex-shrink:0}.lesson-player-container.mobile-layout .lesson-player-content{padding-bottom:80px}.lesson-player-container.mobile-layout .controls-top~.lesson-player-content{padding-top:60px;padding-bottom:var(--spacing-lg)}}@media(max-width:479px){.lesson-player-container.mobile-layout .lesson-player-main-layout{padding:var(--spacing-sm);gap:var(--spacing-sm)}.lesson-player-container.mobile-layout .tab-container{padding:var(--spacing-xs);min-height:350px}.lesson-player-container.mobile-layout .lesson-player-controls-bottom{padding:8px 10px}.lesson-player-container.mobile-layout .control-btn-icon{min-width:40px;min-height:40px;width:40px;height:40px}.lesson-player-container.mobile-layout .control-btn-play{min-width:48px;min-height:48px;width:48px;height:48px}.lesson-player-container.mobile-layout .tempo-display{padding:4px 8px;min-height:40px}.lesson-player-container.mobile-layout .tempo-btn{width:28px;height:28px}.lesson-player-container.mobile-layout .tempo-bpm{font-size:14px}}.tempo-display.tempo-display-mobile{padding:6px 12px;min-width:auto;cursor:pointer}.tempo-display.tempo-display-mobile .tempo-info{display:flex;align-items:baseline;gap:2px}.tempo-display.tempo-display-mobile .tempo-bpm{font-size:15px;font-weight:600}.tempo-display.tempo-display-mobile .tempo-unit{font-size:10px;opacity:.7}.control-btn-more-settings{flex-shrink:0}.mobile-more-settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;z-index:10001;animation:mobileOverlayFadeIn .2s ease-out}@keyframes mobileOverlayFadeIn{0%{opacity:0}to{opacity:1}}.mobile-more-settings-popup{position:fixed;left:50%;transform:translate(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 84px);width:calc(100% - 24px);max-width:340px;background:var(--color-bg-secondary);border-radius:16px;box-shadow:0 12px 40px #0009;z-index:10002;padding:0;animation:mobilePopupSlideUp .25s cubic-bezier(.34,1.56,.64,1);overflow:hidden;opacity:1;backdrop-filter:none;-webkit-backdrop-filter:none}@keyframes mobilePopupSlideUp{0%{opacity:0;transform:translate(-50%) translateY(30px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.mobile-more-settings-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary)}.mobile-more-settings-title{font-size:15px;font-weight:600;color:var(--color-text);letter-spacing:-.2px}.mobile-more-settings-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:var(--color-bg-tertiary);border-radius:8px;color:var(--color-text-muted);cursor:pointer;transition:all .15s ease}.mobile-more-settings-close:hover,.mobile-more-settings-close:active{background:var(--color-bg-hover);color:var(--color-text)}.mobile-more-settings-content{display:flex;flex-direction:column;gap:1px;padding:4px;max-height:60vh;overflow-y:auto}.mobile-more-settings-divider{height:1px;background:var(--color-border);margin:8px 0}.mobile-more-settings-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border:none;background:transparent;border-radius:10px;color:var(--color-text);font-size:14px;font-weight:500;cursor:pointer;transition:all .12s ease;text-align:left;width:100%}.mobile-more-settings-item:hover,.mobile-more-settings-item:active{background:var(--color-bg-tertiary)}.mobile-more-settings-item.active{background:var(--color-accent-soft)}.mobile-more-settings-item.active svg{color:var(--color-accent)}.mobile-more-settings-item svg{flex-shrink:0;width:18px;height:18px;opacity:.7}.mobile-settings-icon-wrapper{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--color-bg-tertiary);border-radius:8px;flex-shrink:0}.mobile-settings-icon-wrapper svg{width:18px;height:18px;opacity:.7}.mobile-more-settings-item.active .mobile-settings-icon-wrapper{background:var(--color-accent)}.mobile-more-settings-item.active .mobile-settings-icon-wrapper svg{opacity:1;color:#fff}.mobile-more-settings-item span:first-of-type{flex:1}.mobile-toggle-indicator{font-size:10px;font-weight:700;padding:4px 10px;border-radius:10px;text-transform:uppercase;letter-spacing:.3px}.mobile-toggle-indicator.on{background:var(--color-accent);color:#fff}.mobile-toggle-indicator.off{background:var(--color-bg-tertiary);color:var(--color-text-muted)}.mobile-more-settings-item.video-toggle{background:#ff6e001a;border:1px solid rgba(255,110,0,.2);margin-top:8px;border-radius:12px}.mobile-more-settings-item.video-toggle.active{background:#392415;border-color:#5a361c}.mobile-more-settings-item.video-toggle .mobile-settings-icon-wrapper{background:transparent}.mobile-more-settings-item.video-toggle.active .mobile-settings-icon-wrapper{background:var(--color-accent);border-radius:8px}.mobile-inline-control{display:flex;align-items:center;padding:10px 14px;border-radius:10px;background:transparent;gap:12px}.mobile-inline-control:hover{background:var(--color-bg-tertiary)}.mobile-inline-control-icon{display:flex;align-items:center;justify-content:center;width:20px;opacity:.7}.mobile-inline-control-label{font-size:14px;font-weight:500;color:var(--color-text);min-width:70px}.mobile-more-settings-transpose{display:flex;align-items:center;padding:10px 14px;border-radius:10px;background:transparent;gap:10px}.mobile-more-settings-transpose:hover{background:var(--color-bg-tertiary)}.mobile-transpose-label{font-size:14px;font-weight:500;color:var(--color-text);flex:1}.mobile-transpose-controls{display:flex;align-items:center;gap:4px;margin-left:auto}.mobile-transpose-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:var(--color-bg-tertiary);border-radius:8px;color:var(--color-text);font-size:18px;font-weight:500;cursor:pointer;transition:all .12s ease}.mobile-transpose-btn:hover:not(:disabled),.mobile-transpose-btn:active:not(:disabled){background:var(--color-bg-hover)}.mobile-transpose-btn:disabled{opacity:.35;cursor:not-allowed}.mobile-transpose-value{min-width:36px;text-align:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;padding:0 4px}.mobile-transpose-value.zero{color:var(--color-text-muted)}.mobile-transpose-value.positive{color:var(--color-success)}.mobile-transpose-value.negative{color:var(--color-warning)}.mobile-transpose-reset{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;color:var(--color-text-muted);cursor:pointer;transition:all .12s ease;margin-left:2px}.mobile-transpose-reset:hover:not(:disabled),.mobile-transpose-reset:active:not(:disabled){background:var(--color-bg-tertiary);color:var(--color-text)}.mobile-transpose-reset:disabled{opacity:.25;cursor:not-allowed}.mobile-more-settings-volume{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:transparent}.mobile-more-settings-volume:hover{background:var(--color-bg-tertiary)}.mobile-volume-mute-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:var(--color-bg-tertiary);border-radius:8px;color:var(--color-text);cursor:pointer;transition:all .12s ease;flex-shrink:0}.mobile-volume-mute-btn:hover,.mobile-volume-mute-btn:active{background:var(--color-bg-hover)}.mobile-volume-mute-btn.muted{color:var(--color-text-muted);background:var(--color-bg-secondary)}.mobile-volume-slider{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-bg-tertiary);border-radius:3px;outline:none;cursor:pointer}.mobile-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-accent);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003}.mobile-volume-slider::-moz-range-thumb{width:18px;height:18px;background:var(--color-accent);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.mobile-volume-value{font-size:12px;font-weight:600;color:var(--color-accent);min-width:32px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}.mobile-more-settings-seek{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:transparent}.mobile-more-settings-seek:hover{background:var(--color-bg-tertiary)}.mobile-seek-icon-wrapper{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--color-bg-tertiary);border-radius:8px;flex-shrink:0}.mobile-seek-icon-wrapper svg{width:18px;height:18px;opacity:.7}.mobile-seek-slider{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-bg-tertiary);border-radius:3px;outline:none;cursor:pointer}.mobile-seek-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-accent);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003}.mobile-seek-slider::-moz-range-thumb{width:18px;height:18px;background:var(--color-accent);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.mobile-seek-time{font-size:12px;font-weight:600;color:var(--color-accent);min-width:32px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}.mobile-more-settings-loop-range{display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:var(--color-accent-soft);border-radius:10px;margin-top:4px}.mobile-loop-range-header{display:flex;align-items:center;gap:12px;color:var(--color-accent);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}.mobile-loop-range-header svg{width:18px;height:18px;opacity:.9}.mobile-loop-range-controls{display:flex;gap:8px}.mobile-loop-range-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border:none;background:var(--color-bg-card);border-radius:8px;color:var(--color-text);font-size:12px;font-weight:600;cursor:pointer;transition:all .12s ease}.mobile-loop-range-btn:hover,.mobile-loop-range-btn:active{background:var(--color-bg-hover)}.mobile-loop-range-btn svg{flex-shrink:0;width:16px;height:16px;opacity:.8}@media(max-width:767px){.tab-container{padding:var(--spacing-md)}.control-section{padding:10px}.video-container{padding:12px}.video-container.collapsed .video-wrapper{padding-bottom:30%}.video-container.expanded .video-wrapper{padding-bottom:56.25%}.video-title{font-size:14px}.video-toggle-btn{font-size:11px;padding:5px 10px}}.alphaTab{background-color:var(--color-alphatab-bg)!important;border-radius:var(--radius-sm);min-width:1px;width:100%}.at-cursor-bar{background:transparent!important;border:none!important;box-shadow:none!important}.at-selection div{background:var(--color-accent-soft)!important;border:1px solid var(--color-border-default)!important}.at-cursor-beat{background:var(--color-alphatab-cursor)!important;box-shadow:0 0 6px var(--color-glow-strong)!important}.at-highlight *{fill:var(--color-accent)!important;stroke:var(--color-accent)!important;filter:drop-shadow(0 0 6px var(--color-glow-strong))!important}.tab-container canvas{background-color:var(--color-alphatab-bg)!important;border-radius:var(--radius-sm)}.tab-container a[href*=alphatab],.tab-container a[href*=alphaTab],.tab-container a[href*=coderline]{display:none!important}.tab-container svg text[y="0"][text-anchor=middle],.tab-container svg text[y="0"][style*="text-anchor: middle"],.tab-container svg text[text-anchor=middle][dominant-baseline=hanging],.tab-container svg text[style*="text-anchor: middle"][style*="dominant-baseline: hanging"]{fill:var(--color-alphatab-bg)!important}.tab-container svg text[style*="font:bold 12px"],.tab-container svg text[style*="font: bold 12px"]{fill:var(--color-alphatab-bg)!important}.lesson-player-main-layout.layout-horizontal{flex-direction:column;gap:0;flex:1;min-height:0;height:100%;padding:0}.video-panel.video-panel-horizontal{position:relative;top:0;width:100%;max-width:none!important;flex:1 1 0;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--color-bg-secondary);border-radius:0;border:none;order:1}.video-panel.video-panel-horizontal .video-wrapper{position:relative!important;width:100%!important;height:100%!important;padding-bottom:0!important;display:flex;justify-content:center;align-items:center;background:transparent;overflow:visible}.video-panel.video-panel-horizontal .sync-video{position:relative!important;top:auto!important;left:auto!important;height:100%!important;width:auto!important;max-width:100%!important;object-fit:contain!important;display:block!important;border-radius:0}.tab-container-wrapper.tab-container-wrapper-horizontal{flex:0 0 200px;height:200px;overflow:hidden;width:100%;background:var(--color-bg-primary);border-bottom:1px solid var(--color-border-subtle);order:-1}.tab-container-wrapper-horizontal .tab-container{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--color-border-subtle) transparent;padding:var(--spacing-xs) 0}.tab-container-wrapper-horizontal .tab-container::-webkit-scrollbar{height:6px}.tab-container-wrapper-horizontal .tab-container::-webkit-scrollbar-track{background:transparent}.tab-container-wrapper-horizontal .tab-container::-webkit-scrollbar-thumb{background:var(--color-border-subtle);border-radius:3px}.tab-container-wrapper-horizontal .tab-container::-webkit-scrollbar-thumb:hover{background:var(--color-border-default)}.lesson-player-container:has(.layout-horizontal) .lesson-player-content{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:0}.horizontal-video-exam-row{display:flex;flex-direction:row;gap:16px;padding:16px;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--color-bg-secondary)}.horizontal-video-exam-row .video-panel{flex:1 1 auto;min-width:400px;position:relative!important;top:0!important}.horizontal-video-exam-row .exam-upload-panel{flex:0 0 auto;align-self:flex-start}.vertical-video-exam-column{display:flex;flex-direction:column;gap:16px;position:sticky;top:var(--spacing-lg);align-self:flex-start;min-width:400px}.vertical-video-exam-column .video-panel{position:relative!important;top:0!important;width:100%;min-width:0}.vertical-video-exam-column .exam-upload-panel{width:100%}.layout-mode-selector{position:relative;display:flex;align-items:center}.control-btn-layout{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.control-btn-layout:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.control-btn-layout.active{color:var(--color-accent)}.layout-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var( --color-bg-card )!important;opacity:1!important;border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-sm);min-width:160px;max-width:300px;box-shadow:var(--shadow-lg);z-index:1000;animation:popup-fade-in .15s ease-out}.controls-top .layout-popup{bottom:auto;top:100%;margin-bottom:0;margin-top:8px}@keyframes popup-fade-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.layout-popup-title{font-size:11px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;padding:var(--spacing-xs) var(--spacing-sm);margin-bottom:var(--spacing-xs)}.layout-option{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:13px;cursor:pointer;transition:all .15s ease;text-align:left}.layout-option:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.layout-option.active{background:var(--color-accent-soft);color:var(--color-accent)}.layout-option svg{flex-shrink:0}.layout-option span{white-space:nowrap}@media(max-width:767px){.lesson-player-container.mobile-layout .layout-popup,.layout-popup{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;transform:translate(-50%)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 80px)!important;width:calc(100% - 32px)!important;max-width:300px!important;min-width:200px!important;max-height:calc(100vh - env(safe-area-inset-bottom,0px) - 160px)!important;background:var( --color-bg-card )!important;opacity:1!important;visibility:visible!important;display:block!important;border-radius:var(--radius-lg)!important;z-index:10001!important;box-shadow:0 8px 32px #0006!important;margin:0!important;pointer-events:auto!important;will-change:transform,opacity!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;contain:none!important}.lesson-player-container.mobile-layout.controls-top .layout-popup,.lesson-player-container.controls-top .layout-popup{bottom:auto!important;top:72px!important;margin-top:8px!important;margin-bottom:0!important}.lesson-player-container.mobile-layout .control-btn-layout{min-width:44px;min-height:44px;flex-shrink:0}.lesson-player-container.mobile-layout .layout-option{min-height:44px;padding:var(--spacing-md) var(--spacing-lg);font-size:14px}}@media(orientation:landscape)and (max-height:600px){.video-resizer{display:none!important}.lesson-player-container,.lesson-player-container.mobile-layout{height:100vh!important;height:100dvh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.lesson-player-container .lesson-player-content,.lesson-player-container.mobile-layout .lesson-player-content,.lesson-player-container.mobile-layout.has-video .lesson-player-content{flex:1!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;display:block!important}.lesson-player-container .lesson-player-main-layout,.lesson-player-container.mobile-layout.has-video .lesson-player-main-layout{flex-direction:column!important;padding:0!important;gap:0!important;overflow:visible!important}.lesson-player-container .video-panel,.lesson-player-container.mobile-layout.has-video .video-panel{position:relative!important;top:auto!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:calc(100vh - 96px)!important;min-height:calc(100dvh - 96px)!important;flex-shrink:0!important;border-radius:0!important;border:none!important}.lesson-player-container .video-panel .video-wrapper,.lesson-player-container.mobile-layout.has-video .video-wrapper{padding-bottom:0!important;height:calc(100vh - 96px)!important;height:calc(100dvh - 96px)!important;border-radius:0!important}.lesson-player-container .tab-container-wrapper,.lesson-player-container.mobile-layout.has-video .tab-container-wrapper{height:calc(100vh - 96px)!important;height:calc(100dvh - 96px)!important;min-height:0!important;max-height:calc(100vh - 96px)!important;max-height:calc(100dvh - 96px)!important;flex-shrink:0!important;flex-grow:0!important;padding:4px!important;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch}.lesson-player-container .tab-container,.lesson-player-container.mobile-layout.has-video .tab-container{min-height:auto!important;height:auto!important;overflow:visible!important;border-radius:8px!important}}.idle-warning-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:gb-overlay-in var(--gb-dur-fast) var(--gb-ease-out)}.idle-warning-modal{background:var(--color-bg-card);border:2px solid var(--color-accent);border-radius:var(--radius-xl);padding:var(--spacing-2xl);max-width:480px;width:90%;text-align:center;box-shadow:var(--shadow-xl),var(--shadow-glow-lg);animation:gb-modal-in var(--gb-dur-normal) var(--gb-ease-spring)}.idle-warning-modal__icon{font-size:64px;margin-bottom:var(--spacing-lg);filter:drop-shadow(0 0 10px var(--color-glow-strong))}.idle-warning-modal__title{font-family:var(--font-heading);font-size:var(--font-size-2xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0 0 var(--spacing-md) 0;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase}.idle-warning-modal__body{font-family:var(--font-body);font-size:var(--font-size-base);color:var(--color-text-primary);margin:0 0 var(--spacing-lg) 0;line-height:var(--line-height-relaxed)}.idle-warning-modal__countdown{font-family:var(--font-heading);font-size:var(--font-size-3xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0 0 var(--spacing-xl) 0;text-shadow:0 0 20px var(--color-glow-strong);letter-spacing:var(--letter-spacing-wide)}.idle-warning-modal__button{width:100%;padding:var(--spacing-md) var(--spacing-xl);background:var(--gradient-primary);color:var(--color-neutral-0);border:none;border-radius:var(--radius-lg);font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:var(--font-weight-extrabold);cursor:pointer;transition:all var(--transition-normal);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;box-shadow:var(--shadow-glow-md),var(--shadow-md)}.idle-warning-modal__button:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow-lg),var(--shadow-lg)}.idle-warning-modal__button:active{transform:translateY(0)}.idle-warning-modal__button:focus{outline:2px solid var(--color-accent);outline-offset:2px}.lesson-cockpit{--metal-bg-header: radial-gradient( ellipse at top center, #111827 0%, #02040a 70% );--metal-surface-glass: rgba(10, 14, 22, .95);--metal-border-soft: rgba(148, 163, 184, .18);--metal-divider-soft: rgba(148, 163, 184, .08);--metal-accent-green: #5cff72;--metal-accent-cyan: #46e5ff;--metal-accent-orange: #ff5c39;--metal-text-primary: #f9fafb;--metal-text-muted: rgba(148, 163, 184, .85);--metal-glow-green: 0 0 20px rgba(92, 255, 114, .25);--metal-glow-strong: 0 0 30px rgba(92, 255, 114, .4)}.lesson-cockpit{position:relative;background:var(--metal-bg-header);border-bottom:1px solid var(--metal-border-soft);box-shadow:0 8px 32px #00000080,0 1px #ffffff08 inset;padding:12px 28px;z-index:200}.cockpit-saving-indicator{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;padding:4px 14px;background:#5cff721a;border:1px solid rgba(92,255,114,.3);border-radius:20px;font-size:11px;font-weight:600;color:var(--metal-accent-green);letter-spacing:.5px;text-transform:uppercase;animation:slideDown .25s ease-out;z-index:10}.cockpit-saving-spinner{animation:spin .8s linear infinite;color:var(--metal-accent-green)}@keyframes slideDown{0%{transform:translate(-50%) translateY(-100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.cockpit-inner{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:32px}.cockpit-left{display:flex;align-items:center;gap:16px}.cockpit-logo{height:44px;width:auto;object-fit:contain;flex-shrink:0;cursor:pointer;transition:all .2s ease;opacity:.9}.cockpit-logo:hover{opacity:1;transform:scale(1.05)}.cockpit-exit-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border-muted, var(--metal-border-soft));background:var(--color-bg-tertiary, rgba(0, 0, 0, .1));color:var(--color-text-muted, var(--metal-text-muted));cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s ease-out;flex-shrink:0}.cockpit-exit-btn:hover{border-color:var(--color-border-hover, var(--color-border));color:var(--color-text-primary);background:var(--color-bg-card-hover, rgba(0, 0, 0, .15));transform:scale(1.03)}.cockpit-exit-btn:active{transform:scale(.98)}.cockpit-help-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border-muted, var(--metal-border-soft));background:var(--color-bg-tertiary, rgba(0, 0, 0, .1));color:var(--color-accent, #ff6e00);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s ease-out;flex-shrink:0;font-size:18px;font-weight:700;font-family:var(--font-body, "Inter", sans-serif);line-height:1}.cockpit-help-btn:hover{border-color:var(--color-accent, #ff6e00);color:var(--color-accent, #ff6e00);background:#ff6e001f;transform:scale(1.05);box-shadow:0 0 12px #ff6e0033}.cockpit-help-btn:active{transform:scale(.96)}.cockpit-identity{display:flex;flex-direction:column;gap:2px;min-width:0}.cockpit-title-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.cockpit-lesson-code{font-size:16px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--metal-text-primary);white-space:nowrap}.cockpit-technique{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--metal-text-muted);white-space:nowrap}.cockpit-nav-group{display:flex;align-items:center;gap:2px;padding-right:12px;margin-right:4px;border-right:1px solid var(--color-border-muted, var(--metal-border-soft));flex-shrink:0}.cockpit-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:1px solid transparent;background:transparent;color:var(--color-text-secondary, var(--metal-text-muted));cursor:pointer;transition:all .14s ease-out;flex-shrink:0;padding:0}.cockpit-nav-btn:hover:not(.disabled){color:var(--color-text-primary, var(--metal-text-primary));background:var(--color-bg-card-hover, rgba(255, 255, 255, .08));border-color:var(--color-border-muted, var(--metal-border-soft))}.cockpit-nav-btn:active:not(.disabled){transform:scale(.92)}.cockpit-nav-btn.disabled{opacity:.2;cursor:default;pointer-events:none}.cockpit-skills{display:flex;align-items:center;gap:4px;margin-top:2px}.cockpit-bpm-pill{display:inline-flex;align-items:center;padding:5px 14px;border-radius:20px;border:1px solid var(--metal-accent-green);background:#5cff7214;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--metal-accent-green);box-shadow:0 0 12px #5cff7226;transition:all .16s ease-out;width:fit-content}.cockpit-bpm-pill:hover{box-shadow:var(--metal-glow-green);transform:scale(1.02)}.cockpit-center{display:flex;flex-direction:column;align-items:center;justify-content:center}.cockpit-progress-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;margin-top:8px;gap:16px}.cockpit-progress-stats{justify-self:start;width:100%;display:flex;align-items:center}.cockpit-bpm-text{justify-self:end;width:100%;display:flex;align-items:center;justify-content:flex-end}.cockpit-progress-wrapper{width:100%;max-width:360px;display:flex;flex-direction:column;gap:2px;align-items:center;position:relative;transition:transform .35s ease}.cockpit-progress-wrapper--playing{transform:translateY(-7px)}.cockpit-progress-bar{width:100%;height:6px;background:#ffffff1f;border-radius:10px;overflow:hidden;position:relative}.cockpit-progress-fill{height:100%;background:linear-gradient(180deg,var(--metal-accent-green) 0%,rgba(61,219,100,.85) 100%);border-radius:10px;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative}.cockpit-progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 100%);border-radius:10px 10px 0 0}.cockpit-progress-active{box-shadow:0 0 10px var(--metal-accent-green),0 0 20px #5cff724d;animation:progressGlow 2s ease-in-out infinite}@keyframes progressGlow{0%,to{box-shadow:0 0 8px var(--metal-accent-green)}50%{box-shadow:0 0 16px var(--metal-accent-green),0 0 24px #5cff7266}}.cockpit-progress-saving{opacity:.6}.cockpit-progress-stats{display:flex;align-items:center;justify-content:flex-start;gap:6px;font-family:var(--font-body, "Inter", sans-serif);flex-shrink:0}.cockpit-live-dot{width:7px;height:7px;border-radius:50%;background:var(--metal-accent-green);box-shadow:0 0 8px var(--metal-accent-green);animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.cockpit-time{font-size:var(--font-size-sm, 13px);font-weight:700;color:var(--metal-text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2}.cockpit-time-active{color:var(--metal-accent-green)!important}.cockpit-time-separator{font-size:var(--font-size-sm, 13px);color:var(--metal-text-muted);font-weight:400;opacity:.7;margin:0 1px}.cockpit-time-target{font-size:var(--font-size-sm, 13px);font-weight:600;color:var(--metal-text-muted);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2;opacity:.9}.cockpit-bpm-text{display:flex;align-items:center;justify-content:flex-end;font-family:var(--font-body, "Inter", sans-serif)}.cockpit-bpm-value{font-size:var(--font-size-sm, 13px);font-weight:700;color:var(--metal-text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2}.cockpit-bpm-label{font-size:var(--font-size-sm, 13px);font-weight:600;color:var(--metal-text-primary);letter-spacing:-.01em;line-height:1.2;margin-left:2px}.cockpit-progress-percent{font-size:11px;font-weight:700;color:var(--color-accent, var(--metal-accent-cyan));background:var(--color-accent-soft, rgba(70, 229, 255, .1));padding:2px 8px;border-radius:10px;letter-spacing:.05em;border:1px solid var(--color-border-muted, rgba(70, 229, 255, .2))}.cockpit-right{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-left:auto;flex-shrink:0}.cockpit-rank-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;border-radius:20px;border:1px solid;font-family:var(--font-body, "Inter", sans-serif);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;transition:all .15s cubic-bezier(.4,0,.2,1);cursor:default;position:relative;justify-self:center}.cockpit-rank-badge:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.4;pointer-events:none}.cockpit-rank-badge:hover{transform:scale(1.02)}.cockpit-rank-badge[data-tier=bronze]{background:linear-gradient(135deg,#cd7f321f,#8b5a2b2e);border-color:#cd7f3259;box-shadow:0 0 12px #cd7f3226,inset 0 1px #ffffff1a}.cockpit-rank-badge[data-tier=silver]{background:linear-gradient(135deg,#a8b4c41f,#8a9aaf2e);border-color:#a8b4c459;box-shadow:0 0 12px #a8b4c426,inset 0 1px #ffffff1a}.cockpit-rank-badge[data-tier=gold]{background:linear-gradient(135deg,#f5a6231f,#ffa5002e);border-color:#f5a62359;box-shadow:0 0 12px #f5a62333,inset 0 1px #ffffff1a}.cockpit-rank-badge[data-tier=platinum]{background:linear-gradient(135deg,#25ced11f,#0891b22e);border-color:#25ced159;box-shadow:0 0 12px #25ced133,inset 0 1px #ffffff1a}.cockpit-rank-badge[data-tier=diamond]{background:linear-gradient(135deg,#7c5cff1f,#4f46e533);border-color:#7c5cff66;box-shadow:0 0 16px #7c5cff40,inset 0 1px #ffffff1a}.cockpit-rank-badge[data-tier=master]{background:linear-gradient(135deg,#9d4edd24,#7c3aed38);border-color:#9d4edd66;box-shadow:0 0 16px #9d4edd4d,inset 0 1px #ffffff1a}.cockpit-rank-badge[data-tier=not_trained]{background:#94a3b814;border-color:var(--metal-border-soft);box-shadow:inset 0 1px #ffffff0d}.cockpit-rank-icon{font-size:14px;line-height:1;display:flex;align-items:center;filter:drop-shadow(0 0 2px rgba(255,255,255,.2))}.cockpit-rank-label{line-height:1.1;letter-spacing:.08em}.cockpit-rank-label-mobile{display:none;line-height:1.1;letter-spacing:.08em;font-size:12px}@media(max-width:1100px){.cockpit-rank-label-desktop{display:none!important}.cockpit-rank-label-mobile{display:inline!important}}.cockpit-exam-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:linear-gradient(135deg,#667eea26,#764ba233);border:1px solid rgba(102,126,234,.4);font-size:11px;font-weight:700;letter-spacing:.05em;color:#a78bfa;box-shadow:0 0 12px #667eea33}.cockpit-rank-badge--promoted{animation:promotedBadgeGlow 10s ease-out forwards}@keyframes promotedBadgeGlow{0%{transform:scale(1.12);filter:brightness(1.4);box-shadow:0 0 24px currentColor,0 0 48px currentColor,inset 0 1px #ffffff26}8%{transform:scale(1.06)}15%{transform:scale(1.1);filter:brightness(1.3);box-shadow:0 0 20px currentColor,0 0 40px currentColor,inset 0 1px #ffffff1f}30%{transform:scale(1.04);filter:brightness(1.2);box-shadow:0 0 16px currentColor,0 0 28px currentColor,inset 0 1px #ffffff1a}50%{transform:scale(1.02);filter:brightness(1.1);box-shadow:0 0 10px currentColor,0 0 18px currentColor}75%{transform:scale(1.01);filter:brightness(1.05)}to{transform:scale(1);filter:brightness(1);box-shadow:none}}.cockpit-rank-badge--live-promoted{animation:liveTierGlow 1.5s ease-in-out 3}@keyframes liveTierGlow{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.25);box-shadow:0 0 18px currentColor,0 0 36px currentColor}}.cockpit-rank-promotion-arrow{display:inline-flex;align-items:center;margin-left:2px;animation:promotionArrowBounce 1.4s ease-in-out infinite;line-height:1;pointer-events:none;opacity:.75;filter:drop-shadow(0 0 3px currentColor)}@keyframes promotionArrowBounce{0%,to{transform:translateY(0);opacity:.65}50%{transform:translateY(-1.5px);opacity:.9}}.cockpit-autosave-hint{position:absolute;top:calc(100% + 3px);left:0;right:0;font-size:9px;font-weight:500;color:var(--metal-text-muted, rgba(148, 163, 184, .7));letter-spacing:.04em;text-align:center;white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.cockpit-autosave-hint--visible{opacity:1;transform:translateY(2px)}.theme-light .lesson-cockpit{--metal-bg-header: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);--metal-surface-glass: rgba(255, 255, 255, .98);--metal-border-soft: rgba(0, 0, 0, .08);--metal-text-primary: #1e293b;--metal-text-muted: rgba(71, 85, 105, .85);--metal-accent-green: #ff6e00;--metal-accent-cyan: #cc5800;--metal-glow-green: 0 0 12px rgba(255, 110, 0, .2);box-shadow:0 1px 3px #0000000f,0 1px #fff inset}.theme-light .cockpit-exit-btn{background:#f5f5f5;border-color:#e0e0e0;color:#666}.theme-light .cockpit-exit-btn:hover{border-color:#ccc;color:#333;background:#ebebeb}.theme-light .cockpit-help-btn{background:#f5f5f5;border-color:#e0e0e0;color:#ff6e00}.theme-light .cockpit-help-btn:hover{border-color:#ff6e00;background:#ff6e0014}.theme-light .cockpit-progress-bar{background:#00000014}.theme-light .cockpit-rank-badge:before{background:linear-gradient(135deg,rgba(0,0,0,.05) 0%,transparent 50%)}.theme-light .cockpit-bpm-pill{background:#ff6e0014;border-color:#ff6e004d;box-shadow:none}.theme-light .cockpit-progress-bar{background:#0000000f}.theme-light .cockpit-progress-fill{background:linear-gradient(90deg,#ff6e00,#cc5800)}.theme-light .cockpit-progress-percent{background:var(--color-accent-soft, rgba(255, 110, 0, .1));color:var(--color-accent, #cc5800);border-color:var(--color-border-muted, rgba(255, 110, 0, .2))}.theme-light .cockpit-saving-indicator{background:#ff6e0014;border-color:#ff6e0033;color:#cc5800}.theme-light .cockpit-live-dot{background:#ff6e00;box-shadow:0 0 8px #ff6e00}.theme-light .cockpit-time-active{color:#ff6e00!important}.theme-gold .lesson-cockpit{--metal-accent-green: #d4af37;--metal-accent-cyan: #c9a227;--metal-glow-green: 0 0 15px rgba(212, 175, 55, .25)}.theme-gold .cockpit-bpm-pill{border-color:#d4af37;background:#d4af371a;color:#d4af37}.theme-gold .cockpit-progress-fill{background:linear-gradient(90deg,#d4af37,#c9a227)}.theme-gold .cockpit-live-dot{background:#d4af37;box-shadow:0 0 8px #d4af37}.theme-gold .cockpit-time-active{color:#d4af37!important}.theme-gold .cockpit-progress-percent{background:#d4af371f;color:#d4af37;border-color:#d4af3740}.theme-gold .cockpit-exit-btn{background:#d4af3714;border-color:#d4af3733;color:#d4af3799}.theme-gold .cockpit-exit-btn:hover{border-color:#d4af3766;color:#d4af37;background:#d4af3726}.theme-hello-kitty .lesson-cockpit{--metal-bg-header: linear-gradient(180deg, #fff0f5 0%, #ffe4ec 100%);--metal-surface-glass: rgba(255, 240, 245, .98);--metal-border-soft: rgba(255, 105, 180, .2);--metal-text-primary: #1a1a1a;--metal-text-muted: rgba(80, 60, 70, .85);--metal-accent-green: #ff69b4;--metal-accent-cyan: #ff91af;--metal-glow-green: 0 0 12px rgba(255, 105, 180, .2);box-shadow:0 1px 3px #ff69b41a,0 1px #fff inset}.theme-hello-kitty .cockpit-exit-btn{background:#fffc;border-color:#ff69b433;color:#999}.theme-hello-kitty .cockpit-exit-btn:hover{border-color:#ff69b466;color:#ff69b4;background:#ffffffe6}.theme-hello-kitty .cockpit-lesson-code,.theme-hello-kitty .cockpit-time{color:#1a1a1a}.theme-hello-kitty .cockpit-bpm-pill{border-color:#ff69b4;background:#ff69b41a;color:#ff69b4}.theme-hello-kitty .cockpit-progress-bar{background:#ff69b426}.theme-hello-kitty .cockpit-progress-fill{background:linear-gradient(90deg,#ff91af,#ff69b4)}.theme-hello-kitty .cockpit-live-dot{background:#ff69b4;box-shadow:0 0 8px #ff69b4}.theme-hello-kitty .cockpit-time-active{color:#ff69b4!important}.theme-hello-kitty .cockpit-time-target,.theme-hello-kitty .cockpit-time-separator{color:#503c46b3}.theme-hello-kitty .cockpit-progress-percent{background:#ff69b41f;color:#ff69b4;border-color:#ff69b440}.theme-kuromi .lesson-cockpit{--metal-accent-green: #9370db;--metal-accent-cyan: #ba55d3;--metal-glow-green: 0 0 15px rgba(147, 112, 219, .3)}.theme-kuromi .cockpit-bpm-pill{border-color:#9370db;background:#9370db1f;color:#9370db}.theme-kuromi .cockpit-progress-fill{background:linear-gradient(90deg,#9370db,#ba55d3)}.theme-kuromi .cockpit-live-dot{background:#9370db;box-shadow:0 0 8px #9370db}.theme-kuromi .cockpit-time-active{color:#9370db!important}.theme-kuromi .cockpit-progress-percent{background:#9370db1f;color:#9370db;border-color:#9370db40}.theme-kuromi .cockpit-exit-btn{background:#9370db14;border-color:#9370db33;color:#9370db99}.theme-kuromi .cockpit-exit-btn:hover{border-color:#9370db66;color:#9370db;background:#9370db26}.theme-monochrome .lesson-cockpit{--metal-accent-green: var(--color-text-primary, #ffffff);--metal-accent-cyan: var(--color-text-secondary, #888888);--metal-glow-green: none}.theme-monochrome .cockpit-bpm-pill{border-color:var(--color-border, #333);background:#ffffff0d;color:var(--color-text-primary, #fff);box-shadow:none}.theme-monochrome .cockpit-progress-fill{background:var(--color-text-primary, #fff)}.theme-monochrome .cockpit-progress-active{box-shadow:none}.theme-monochrome .cockpit-rank-badge{background:#ffffff0d!important;border-color:var(--color-border, #333)!important;box-shadow:none!important}.theme-monochrome .cockpit-rank-label{color:var(--color-text-primary, #fff)!important}.theme-monochrome .cockpit-progress-percent{background:#ffffff14;color:var(--color-text-primary, #fff);border-color:var(--color-border, rgba(255, 255, 255, .15))}.theme-monochrome .cockpit-exit-btn{background:#ffffff0d;border-color:#ffffff26;color:#ffffff80}.theme-monochrome .cockpit-exit-btn:hover{border-color:#ffffff4d;color:#fff;background:#ffffff1a}.theme-sunburst .lesson-cockpit{--metal-accent-green: #ff8c00;--metal-accent-cyan: #ffa500;--metal-glow-green: 0 0 15px rgba(255, 140, 0, .3)}.theme-sunburst .cockpit-bpm-pill{border-color:#ff8c00;background:#ff8c001a;color:#ff8c00}.theme-sunburst .cockpit-progress-fill{background:linear-gradient(90deg,#ff8c00,orange)}.theme-sunburst .cockpit-live-dot{background:#ff8c00;box-shadow:0 0 8px #ff8c00}.theme-sunburst .cockpit-time-active{color:#ff8c00!important}.theme-sunburst .cockpit-progress-percent{background:#ff8c001f;color:#ff8c00;border-color:#ff8c0040}.theme-sunburst .cockpit-exit-btn{background:#ff8c0014;border-color:#ff8c0033;color:#ff8c0099}.theme-sunburst .cockpit-exit-btn:hover{border-color:#ff8c0066;color:#ff8c00;background:#ff8c0026}.theme-enhanced-forest .lesson-cockpit{--metal-accent-green: #22c55e;--metal-accent-cyan: #10b981;--metal-glow-green: 0 0 15px rgba(34, 197, 94, .3)}.theme-enhanced-forest .cockpit-bpm-pill{border-color:#22c55e;background:#22c55e1a;color:#22c55e}.theme-enhanced-forest .cockpit-progress-fill{background:linear-gradient(90deg,#22c55e,#10b981)}.theme-enhanced-forest .cockpit-progress-percent{background:#22c55e1f;color:#22c55e;border-color:#22c55e40}.theme-enhanced-forest .cockpit-exit-btn{background:#22c55e14;border-color:#22c55e33;color:#22c55e99}.theme-enhanced-forest .cockpit-exit-btn:hover{border-color:#22c55e66;color:#22c55e;background:#22c55e26}.theme-vintage .lesson-cockpit{--metal-bg-header: linear-gradient(180deg, #f5f0e6 0%, #ebe4d4 100%);--metal-surface-glass: rgba(245, 240, 230, .98);--metal-border-soft: rgba(139, 90, 43, .2);--metal-text-primary: #3d2914;--metal-text-muted: rgba(90, 70, 50, .8);--metal-accent-green: #8b5a2b;--metal-accent-cyan: #a0522d;--metal-glow-green: 0 0 10px rgba(139, 90, 43, .15);box-shadow:0 1px 3px #8b5a2b1a,0 1px #fffc inset}.theme-vintage .cockpit-exit-btn{background:#fff9;border-color:#8b5a2b33;color:#9a7b5a}.theme-vintage .cockpit-exit-btn:hover{border-color:#8b5a2b59;color:#6b4a2a;background:#fffc}.theme-vintage .cockpit-lesson-code,.theme-vintage .cockpit-time{color:#3d2914}.theme-vintage .cockpit-technique{color:#5a4632bf}.theme-vintage .cockpit-bpm-pill{border-color:#8b5a2b;background:#8b5a2b1a;color:#8b5a2b;box-shadow:none}.theme-vintage .cockpit-progress-bar{background:#8b5a2b1f}.theme-vintage .cockpit-progress-fill{background:linear-gradient(90deg,sienna,#8b5a2b)}.theme-vintage .cockpit-live-dot{background:#8b5a2b;box-shadow:0 0 6px #8b5a2b80}.theme-vintage .cockpit-time-active{color:#8b5a2b!important}.theme-vintage .cockpit-time-target,.theme-vintage .cockpit-time-separator{color:#5a4632a6}.theme-vintage .cockpit-progress-percent{background:#8b5a2b1a;color:#8b5a2b;border-color:#8b5a2b33}.theme-vintage .cockpit-rank-badge{background:#8b5a2b14!important;border-color:#8b5a2b40!important}.theme-bear-pick .lesson-cockpit{--metal-bg-header: linear-gradient(180deg, #FAF8F6 0%, #F5F2EF 100%);--metal-surface-glass: rgba(255, 255, 255, .98);--metal-border-soft: rgba(107, 63, 42, .15);--metal-text-primary: #2B1811;--metal-text-muted: rgba(91, 74, 66, .85);--metal-accent-green: #6B3F2A;--metal-accent-cyan: #C8A24A;--metal-glow-green: 0 0 10px rgba(107, 63, 42, .15);box-shadow:0 1px 3px #6b3f2a14,0 1px #ffffffe6 inset}.theme-bear-pick .cockpit-exit-btn{background:#ffffffb3;border-color:#6b3f2a26;color:#8b7a72}.theme-bear-pick .cockpit-exit-btn:hover{border-color:#6b3f2a4d;color:#6b3f2a;background:#ffffffd9}.theme-bear-pick .cockpit-lesson-code,.theme-bear-pick .cockpit-time{color:#2b1811}.theme-bear-pick .cockpit-technique{color:#5b4a42bf}.theme-bear-pick .cockpit-bpm-value,.theme-bear-pick .cockpit-bpm-label{color:#2b1811}.theme-bear-pick .cockpit-bpm-pill{border-color:#c8a24a;background:#c8a24a1f;color:#c8a24a;box-shadow:none}.theme-bear-pick .cockpit-progress-bar{background:#6b3f2a1a}.theme-bear-pick .cockpit-progress-fill{background:linear-gradient(90deg,#6b3f2a,#5b3523)}.theme-bear-pick .cockpit-live-dot{background:#6b3f2a;box-shadow:0 0 6px #6b3f2a80}.theme-bear-pick .cockpit-time-active{color:#6b3f2a!important}.theme-bear-pick .cockpit-time-target,.theme-bear-pick .cockpit-time-separator{color:#5b4a42a6}.theme-bear-pick .cockpit-progress-percent{background:#6b3f2a1a;color:#6b3f2a;border-color:#6b3f2a2e}.theme-bear-pick .cockpit-rank-badge{background:#6b3f2a14!important;border-color:#6b3f2a33!important}.theme-bear-pick .mobile-progress-bar{background:#6b3f2a14}.theme-bear-pick .mobile-progress-fill{background:linear-gradient(90deg,#6b3f2a,#5b3523);box-shadow:0 0 6px #6b3f2a66}.theme-bear-pick-dark .lesson-cockpit{--metal-bg-header: radial-gradient(ellipse at top center, #1A1614 0%, #121010 70%);--metal-surface-glass: rgba(26, 22, 20, .95);--metal-border-soft: rgba(200, 162, 74, .18);--metal-text-primary: #F5F0EB;--metal-text-muted: rgba(189, 179, 168, .85);--metal-accent-green: #C8A24A;--metal-accent-cyan: #E1B85D;--metal-glow-green: 0 0 15px rgba(200, 162, 74, .25);box-shadow:0 8px 32px #00000080,0 1px #ffffff08 inset}.theme-bear-pick-dark .cockpit-exit-btn{background:#c8a24a14;border-color:#c8a24a2e;color:#c8a24a99}.theme-bear-pick-dark .cockpit-exit-btn:hover{border-color:#c8a24a59;color:#c8a24a;background:#c8a24a26}.theme-bear-pick-dark .cockpit-bpm-pill{border-color:#c8a24a;background:#c8a24a1f;color:#c8a24a}.theme-bear-pick-dark .cockpit-progress-bar{background:#ffffff1a}.theme-bear-pick-dark .cockpit-progress-fill{background:linear-gradient(90deg,#c8a24a,#b18d3f)}.theme-bear-pick-dark .cockpit-live-dot{background:#c8a24a;box-shadow:0 0 8px #c8a24a}.theme-bear-pick-dark .cockpit-time-active{color:#c8a24a!important}.theme-bear-pick-dark .cockpit-progress-percent{background:#c8a24a1f;color:#c8a24a;border-color:#c8a24a40}.theme-bear-pick-dark .cockpit-rank-badge{background:#c8a24a1a!important;border-color:#c8a24a40!important}.theme-bear-pick-dark .mobile-progress-bar{background:#c8a24a1a}.theme-bear-pick-dark .mobile-progress-fill{background:linear-gradient(90deg,#c8a24a,#b18d3f);box-shadow:0 0 8px #c8a24a80}.theme-dark .lesson-cockpit{--metal-bg-header: radial-gradient(ellipse at top center, #1c1410 0%, #0f0a08 70%);--metal-surface-glass: rgba(28, 20, 16, .95);--metal-border-soft: rgba(255, 110, 0, .18);--metal-text-primary: #F5F0EB;--metal-text-muted: rgba(189, 170, 150, .85);--metal-accent-green: #ff6e00;--metal-accent-cyan: #ff8c33;--metal-glow-green: 0 0 15px rgba(255, 110, 0, .25);box-shadow:0 8px 32px #00000080,0 1px #ffffff08 inset}.theme-dark .cockpit-exit-btn{background:#ff6e0014;border-color:#ff6e002e;color:#ff6e0099}.theme-dark .cockpit-exit-btn:hover{border-color:#ff6e0059;color:#ff6e00;background:#ff6e0026}.theme-dark .cockpit-bpm-pill{border-color:#ff6e00;background:#ff6e001f;color:#ff6e00}.theme-dark .cockpit-progress-bar{background:#ffffff1a}.theme-dark .cockpit-progress-fill{background:linear-gradient(90deg,#ff6e00,#cc5800)}.theme-dark .cockpit-live-dot{background:#ff6e00;box-shadow:0 0 8px #ff6e00}.theme-dark .cockpit-time-active{color:#ff6e00!important}.theme-dark .cockpit-progress-percent{background:#ff6e001f;color:#ff6e00;border-color:#ff6e0040}.theme-dark .cockpit-saving-indicator{background:#ff6e001a;border-color:#ff6e0040;color:#ff6e00}.theme-dark .mobile-progress-bar{background:#ff6e001a}.theme-dark .mobile-progress-fill{background:linear-gradient(90deg,#ff6e00,#cc5800);box-shadow:0 0 8px #ff6e0080}.mobile-progress-bar{position:fixed;top:0;left:0;right:0;height:3px;background:#ffffff1a;z-index:9999;overflow:hidden;display:none}@media(max-width:767px){.mobile-progress-bar{display:block}}@media(orientation:landscape)and (max-height:600px){.mobile-progress-bar{display:block}}.mobile-progress-fill{height:100%;background:linear-gradient(90deg,var(--metal-accent-green, #5cff72) 0%,rgba(61,219,100,.9) 100%);transition:width .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px var(--metal-accent-green, #5cff72)}.mobile-progress-fill.playing{animation:progressPulse 1.5s ease-in-out infinite}@keyframes progressPulse{0%,to{box-shadow:0 0 8px var(--metal-accent-green, #5cff72)}50%{box-shadow:0 0 16px var(--metal-accent-green, #5cff72),0 0 24px #5cff7266}}.theme-light .mobile-progress-bar{background:#00000014}.theme-light .mobile-progress-fill{background:linear-gradient(90deg,#10b981,#059669);box-shadow:0 0 6px #10b98180}@media(max-width:767px){.lesson-cockpit.mobile-header{position:fixed;top:3px;left:0;right:0;z-index:99}.lesson-cockpit.mobile-header.header-hidden{transform:none;opacity:1;pointer-events:auto}.lesson-cockpit.mobile-header.header-visible{transform:none;opacity:1}}@media(max-width:1100px){.cockpit-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.cockpit-left{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0}.cockpit-logo{height:32px}.cockpit-lesson-code{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.cockpit-technique,.cockpit-bpm-pill,.cockpit-skills{display:none}.cockpit-center{order:2;flex:0 0 auto;display:flex;align-items:center;justify-content:center}.cockpit-right{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;order:3;gap:8px}.cockpit-progress-wrapper{width:280px}.cockpit-progress-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;margin-top:6px}.cockpit-progress-stats{justify-content:flex-start}.cockpit-bpm-text{justify-self:end}.cockpit-time,.cockpit-time-target,.cockpit-time-separator,.cockpit-bpm-value,.cockpit-bpm-label{font-size:11px;letter-spacing:.2px}.cockpit-rank-label{display:none}}@media(max-width:767px){.lesson-cockpit{padding:6px 10px}.cockpit-inner{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:4px;flex-wrap:nowrap;position:relative;min-height:40px}.cockpit-left{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;order:1;z-index:1;max-width:40%}.cockpit-logo{height:24px;flex-shrink:0}.cockpit-identity{flex:1;min-width:0;gap:1px}.cockpit-title-row{flex-wrap:nowrap;gap:4px;overflow:hidden}.cockpit-lesson-code{font-size:11px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}.cockpit-technique,.cockpit-bpm-pill,.cockpit-skills{display:none}.cockpit-nav-group{display:none!important}.cockpit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);order:2;flex:0 0 auto;z-index:2;width:auto;display:flex;align-items:center;justify-content:center}.cockpit-progress-wrapper{max-width:none;width:auto;gap:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:0}.cockpit-progress-bar{display:none}.cockpit-progress-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:220px;margin:0;gap:0}.cockpit-progress-stats{width:100%;justify-content:flex-end;display:flex;align-items:center;gap:2px;margin:0;padding:0 6px 0 0}.cockpit-live-dot{width:4px;height:4px}.cockpit-time{font-size:10px;font-weight:600;line-height:1;margin:0;padding:0}.cockpit-time-separator,.cockpit-time-target{font-size:10px;line-height:1;margin:0;padding:0}.cockpit-bpm-text{display:flex;width:100%;justify-content:flex-start;align-items:center;padding:0 0 0 6px}.cockpit-bpm-value,.cockpit-bpm-label{font-size:10px;font-weight:600;line-height:1}.cockpit-rank-badge{padding:3px 6px;font-size:8px;gap:3px;display:flex;align-items:center;justify-content:center;margin:0;line-height:1}.cockpit-rank-icon{font-size:10px;display:flex;align-items:center;justify-content:center}.cockpit-right{order:3;width:auto;flex:0 0 auto;display:flex;justify-content:flex-end;z-index:1}.cockpit-help-btn{display:none!important}.cockpit-exit-btn{width:28px;height:28px;border-radius:6px}.cockpit-exit-btn svg{width:14px;height:14px}.cockpit-saving-indicator{top:2px;padding:2px 8px;font-size:9px}}@media(max-width:479px){.lesson-cockpit{padding:5px 8px}.cockpit-inner{gap:3px}.cockpit-left{gap:4px;max-width:35%}.cockpit-logo{height:20px}.cockpit-lesson-code{font-size:10px;max-width:70px;letter-spacing:.03em}.cockpit-time,.cockpit-time-separator,.cockpit-time-target{font-size:9px}.cockpit-progress-row{gap:4px}.cockpit-live-dot{width:3px;height:3px}.cockpit-rank-badge{padding:2px 5px;font-size:7px;display:flex;align-items:center;justify-content:center}.cockpit-rank-icon{font-size:9px;display:flex;align-items:center;justify-content:center}.cockpit-exit-btn{width:26px;height:26px;border-radius:5px}.cockpit-exit-btn svg{width:12px;height:12px}}@media(orientation:landscape)and (max-height:600px){.lesson-cockpit{padding:4px 14px!important}.cockpit-inner{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:nowrap!important;grid-template-columns:unset!important;position:relative;min-height:32px}.cockpit-left{display:flex!important;align-items:center!important;gap:8px;flex:0 1 auto;min-width:0;order:1;z-index:1;max-width:45%}.cockpit-logo{height:26px!important;flex-shrink:0}.cockpit-identity{gap:0!important;flex:1;min-width:0}.cockpit-title-row{flex-wrap:nowrap;gap:6px;overflow:hidden}.cockpit-lesson-code{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cockpit-technique,.cockpit-bpm-pill,.cockpit-skills{display:none!important}.cockpit-nav-group{padding-right:6px;margin-right:2px;border-right:none;gap:1px}.cockpit-nav-btn{width:22px;height:22px}.cockpit-center{display:flex!important;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);order:2;flex:0 0 auto;z-index:2;width:auto;align-items:center;justify-content:center}.cockpit-progress-wrapper{max-width:none;width:auto;gap:2px;display:flex;flex-direction:column;align-items:center;margin:0;padding:0}.cockpit-progress-bar{display:none!important}.cockpit-progress-wrapper--playing{transform:none!important}.cockpit-autosave-hint{display:none!important}.cockpit-progress-row{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:6px;grid-template-columns:unset!important;margin:0}.cockpit-progress-stats{width:auto;justify-content:center;display:flex;align-items:center;gap:2px;margin:0;padding:0}.cockpit-live-dot{width:5px;height:5px}.cockpit-time,.cockpit-time-separator,.cockpit-time-target{font-size:11px;line-height:1}.cockpit-bpm-text{display:none!important}.cockpit-progress-percent{font-size:9px;padding:1px 6px}.cockpit-rank-badge{padding:3px 8px!important;font-size:9px!important;gap:4px}.cockpit-rank-icon{font-size:11px!important}.cockpit-rank-label{display:none!important}.cockpit-right{order:3;width:auto!important;flex:0 0 auto;display:flex!important;justify-content:flex-end;z-index:1;gap:6px;margin-left:0!important}.cockpit-help-btn{width:30px!important;height:30px!important;font-size:15px!important}.cockpit-exit-btn{width:30px!important;height:30px!important}.cockpit-exit-btn svg{width:14px;height:14px}.cockpit-saving-indicator{top:2px;padding:2px 8px;font-size:9px}}@media(orientation:landscape)and (max-height:450px){.lesson-cockpit{padding:2px 10px!important}.cockpit-inner{gap:6px!important;min-height:28px}.cockpit-logo{height:20px!important}.cockpit-lesson-code{font-size:10px!important;max-width:100px}.cockpit-rank-badge{padding:2px 4px!important;font-size:7px!important}.cockpit-rank-icon,.cockpit-time,.cockpit-time-separator,.cockpit-time-target{font-size:9px!important}.cockpit-live-dot{width:3px;height:3px}.cockpit-help-btn{width:26px!important;height:26px!important;font-size:13px!important}.cockpit-exit-btn{width:26px!important;height:26px!important}.cockpit-exit-btn svg{width:12px;height:12px}}.challenge-tabs{display:flex;align-items:center;gap:4px;background:#00000040;padding:4px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.challenge-tab{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;border:none;background:transparent;color:var(--metal-text-muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .15s ease;white-space:nowrap}.challenge-tab svg{opacity:.7;transition:opacity .15s ease}.challenge-tab:hover{color:var(--metal-text-primary);background:#ffffff14}.challenge-tab:hover svg{opacity:1}.challenge-tab.active{background:linear-gradient(135deg,#8b5cf64d,#7c3aed66);color:#fff;border:1px solid rgba(139,92,246,.5);box-shadow:0 0 12px #8b5cf64d}.challenge-tab.active svg{opacity:1;color:#a78bfa}.theme-light .challenge-tabs{background:#0000000a;border-color:#00000014}.theme-light .challenge-tab{color:#64748b}.theme-light .challenge-tab:hover{color:#1e293b;background:#0000000f}.theme-light .challenge-tab.active{background:linear-gradient(135deg,#8b5cf626,#7c3aed33);color:#7c3aed;border-color:#8b5cf64d;box-shadow:0 0 8px #8b5cf626}.theme-light .challenge-tab.active svg{color:#7c3aed}@media(max-width:767px){.challenge-tabs{padding:3px}.challenge-tab{padding:6px 10px;font-size:10px;gap:4px}.challenge-tab svg{width:14px;height:14px}}.challenge-tab.disabled,.challenge-tab:disabled{opacity:.4;cursor:not-allowed;pointer-events:auto}.challenge-tab.disabled:hover,.challenge-tab:disabled:hover{background:#ffffff08;color:var(--metal-text-tertiary)}.theme-light .challenge-tab.disabled,.theme-light .challenge-tab:disabled{opacity:.5}.theme-light .challenge-tab.disabled:hover,.theme-light .challenge-tab:disabled:hover{background:#00000008;color:#94a3b8}.challenge-tab{position:relative}.challenge-tab-tooltip{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);background:linear-gradient(135deg,#1e1b4b,#312e81);color:#e0e7ff;padding:10px 16px;border-radius:10px;font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:none;white-space:nowrap;box-shadow:0 4px 20px #0000004d,0 0 0 1px #8b5cf64d;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease,transform .2s ease}.challenge-tab-tooltip:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-bottom-color:#1e1b4b}.challenge-tab:hover .challenge-tab-tooltip{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.theme-light .challenge-tab-tooltip{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;box-shadow:0 4px 20px #7c3aed4d,0 0 0 1px #8b5cf666}.theme-light .challenge-tab-tooltip:before{border-bottom-color:#7c3aed}@media(max-width:767px){.challenge-tab-tooltip{font-size:11px;padding:8px 12px;white-space:normal;max-width:200px;text-align:center}}.solo-practice-display{display:flex;align-items:center;gap:20px;padding:8px 16px;background:linear-gradient(135deg,#8b5cf61a,#a855f714);border:1px solid rgba(139,92,246,.25);border-radius:12px}.solo-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,#8b5cf633,#a855f726);border:1px solid rgba(139,92,246,.4);border-radius:20px;color:#a855f7}.solo-badge svg{stroke:currentColor}.solo-badge span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.solo-time-stats{display:flex;align-items:center;gap:16px}.solo-total-time{display:flex;align-items:baseline;gap:6px}.solo-time-label{font-size:11px;font-weight:500;color:var(--metal-text-muted);text-transform:uppercase;letter-spacing:.05em}.solo-time-value{font-size:16px;font-weight:700;color:var(--metal-text-primary);font-variant-numeric:tabular-nums}.solo-session-time{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#5cff721a;border:1px solid rgba(92,255,114,.25);border-radius:16px}.solo-session-time .solo-time-value{font-size:13px;color:var(--metal-accent-green)}.solo-live-dot{width:6px;height:6px;border-radius:50%;background:var(--metal-accent-green);box-shadow:0 0 8px var(--metal-accent-green);animation:pulse 1.5s ease-in-out infinite}.theme-light .solo-practice-display{background:linear-gradient(135deg,#8b5cf614,#a855f70d);border-color:#8b5cf633}.theme-light .solo-badge{background:#8b5cf61f;border-color:#8b5cf64d}.theme-light .solo-session-time{background:#ff6e0014;border-color:#ff6e0033}.theme-light .solo-session-time .solo-time-value{color:#ff6e00}.theme-light .solo-live-dot{background:#ff6e00;box-shadow:0 0 8px #ff6e00}@media(max-width:767px){.solo-practice-display{padding:6px 12px;gap:8px}.solo-practice-display.solo-practice-simple{flex-direction:row;padding:4px 10px}.solo-practice-simple .solo-time-stats{flex-direction:row;gap:8px;align-items:center}.solo-practice-simple .solo-time-value{font-size:14px}.solo-practice-simple .solo-session-time{padding:2px 8px}.solo-practice-simple .solo-session-time .solo-time-value{font-size:12px}}.solo-practice-display.solo-practice-simple{padding:6px 14px;gap:10px}.solo-practice-simple .solo-time-stats{gap:8px}.solo-practice-simple .solo-time-value{font-size:18px}.solo-time-icon{color:var(--metal-text-muted);opacity:.7}.community-like-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;border:1px solid rgba(239,68,68,.25);background:transparent;color:#fff9;cursor:pointer;font-family:var(--font-body, "Inter", sans-serif);font-size:12px;font-weight:700;transition:all .2s ease-out;white-space:nowrap;margin-left:12px}.community-like-btn:hover{border-color:#ef444480;color:#ef4444;background:#ef444414;transform:scale(1.05)}.community-like-btn.liked{border-color:#ef444473;color:#ef4444;background:#ef44441a;box-shadow:0 0 10px #ef44441f}.community-like-btn.liked:hover{background:#ef444426}.community-like-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.community-like-btn svg{flex-shrink:0;transition:transform .2s ease}.community-like-btn:hover svg{transform:scale(1.1)}.community-like-btn.liked svg{animation:likeHeartPop .4s ease-out}@keyframes likeHeartPop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.community-like-count{font-variant-numeric:tabular-nums;letter-spacing:-.01em}.theme-light .community-like-btn{border-color:#ef444433;color:#94a3b8}.theme-light .community-like-btn:hover{color:#dc2626;border-color:#dc262666;background:#ef44440d}.theme-light .community-like-btn.liked{color:#dc2626;border-color:#dc26264d;background:#ef44440f}@media(max-width:768px){.community-like-btn{padding:4px 10px;font-size:11px;margin-left:8px}}.tooltip-wrapper{position:relative;display:inline-block}.tooltip-text{background-color:var(--color-bg-overlay);color:var(--color-text-primary);text-align:center;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);position:fixed;z-index:var(--z-tooltip);font-family:var(--font-body);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);white-space:nowrap;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast);border:1px solid var(--color-border-default);box-shadow:var(--shadow-md),var(--shadow-glow-sm);opacity:1;animation:gb-tooltip-in var(--gb-dur-tooltip) var(--gb-ease-spring)}.tooltip-bottom.tooltip-text:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--color-bg-overlay) transparent transparent transparent}.tooltip-top.tooltip-text:after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent var(--color-bg-overlay) transparent}.tooltip-left.tooltip-text:after{content:"";position:absolute;left:100%;top:50%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent transparent transparent var(--color-bg-overlay)}.tooltip-right.tooltip-text:after{content:"";position:absolute;right:100%;top:50%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent var(--color-bg-overlay) transparent transparent}.tooltip-text.tooltip-bottom:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--color-bg-overlay) transparent transparent transparent}.tooltip-text.tooltip-top:after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent var(--color-bg-overlay) transparent}.tooltip-text.tooltip-left:after{content:"";position:absolute;left:100%;top:50%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent transparent transparent var(--color-bg-overlay)}.tooltip-text.tooltip-right:after{content:"";position:absolute;right:100%;top:50%;margin-top:-5px;border-width:5px;border-style:solid;border-color:transparent var(--color-bg-overlay) transparent transparent}.mobile-features-row{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:12px;padding:0 4px}.mobile-feature-btn{flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;background-color:var(--color-bg-tertiary, #f3f4f6);border:none;border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-width:0;box-shadow:0 2px 5px #00000008}.mobile-feature-btn:active{background-color:var(--color-bg-tertiary-active, #e5e7eb);transform:scale(.96)}.mobile-feature-btn .mobile-settings-icon-wrapper{width:32px;height:32px;background-color:var(--color-bg-primary, #ffffff);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);box-shadow:0 2px 8px #0000000d}.mobile-feature-btn .mobile-settings-icon-wrapper svg{width:20px;height:20px;opacity:.9}.mobile-feature-btn span{font-size:11px;font-weight:600;color:var(--color-text-primary);letter-spacing:.3px;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(prefers-color-scheme:dark){.mobile-feature-btn{box-shadow:none;background-color:var(--color-bg-tertiary)}.mobile-feature-btn .mobile-settings-icon-wrapper{background-color:#ffffff14;box-shadow:none}}.control-btn-load-tab{color:#22c55e!important;background:#22c55e1f!important;border:1px solid rgba(34,197,94,.3)!important;border-radius:8px!important;transition:all .18s ease-out}.control-btn-load-tab:hover{color:#4ade80!important;background:#22c55e38!important;border-color:#22c55e80!important;box-shadow:0 0 10px #22c55e33}.control-btn-load-tab svg{color:inherit!important}.lesson-player-playlist-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);animation:fadeIn .2s ease-out}.lesson-player-playlist{background:var(--color-bg-primary);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0006;width:100%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease-out}.lesson-player-playlist.mobile{max-width:100%;max-height:90vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-top:auto;animation:slideUpMobile .3s ease-out}@keyframes slideUpMobile{0%{transform:translateY(100%)}to{transform:translateY(0)}}.playlist-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border-default);flex-shrink:0}.playlist-title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.playlist-close-btn{background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-xs);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.playlist-close-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.playlist-content{flex:1;overflow-y:auto;padding:var(--spacing-md)}.playlist-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);gap:var(--spacing-md)}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border-default);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}.playlist-section{margin-bottom:var(--spacing-lg)}.playlist-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.playlist-section-title{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-text-primary);text-transform:uppercase;letter-spacing:.05em}.playlist-lessons{display:flex;flex-direction:column;gap:var(--spacing-xs)}.playlist-lesson-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);background:var(--color-bg-secondary);border:1px solid var(--color-border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);gap:var(--spacing-md)}.playlist-lesson-item:hover{background:var(--color-bg-hover);border-color:var(--color-border-hover);transform:translate(4px)}.playlist-lesson-item.current{background:var(--color-accent-soft);border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-soft)}.playlist-lesson-item.locked{opacity:.6;cursor:not-allowed}.playlist-lesson-item.locked:hover{transform:none}.playlist-lesson-info{flex:1;min-width:0}.playlist-lesson-title{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-lesson-artist{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-lesson-time{font-size:var(--font-size-xs);color:var(--color-text-muted)}.playlist-lesson-status{flex-shrink:0;display:flex;align-items:center;font-size:20px}.playlist-lesson-locked{font-size:18px}.playlist-sublevel-group{margin-bottom:var(--spacing-lg)}.playlist-sublevel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-tertiary);border-radius:var(--radius-sm)}.playlist-sublevel-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.playlist-sublevel-locked{font-size:var(--font-size-xs);color:var(--color-text-muted)}.playlist-sublevel-locked-message{padding:var(--spacing-md);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm);background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px dashed var(--color-border-default)}@media(max-width:767px){.lesson-player-playlist-overlay{padding:0;align-items:flex-end}.playlist-header{padding:var(--spacing-md)}.playlist-title{font-size:var(--font-size-lg)}.playlist-content{padding:var(--spacing-sm)}.playlist-lesson-item{padding:var(--spacing-sm) var(--spacing-md)}.playlist-lesson-title{font-size:var(--font-size-sm)}.playlist-lesson-artist{font-size:var(--font-size-xs)}}.track-mixer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fadeIn .2s ease}.track-mixer-popup{background-color:var(--gb-dark-bg, #1a1a24);border-radius:16px;width:90%;max-width:480px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px #0006,0 0 0 1px #ffffff1a;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}.track-mixer-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);background:#ffffff08}.track-mixer-title{font-size:18px;font-weight:600;color:#fff;margin:0;display:flex;align-items:center;gap:8px}.track-mixer-close{background:none;border:none;color:#999;cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}.track-mixer-close:hover{background:#ffffff1a;color:#fff}.track-mixer-content{padding:12px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.track-item{display:flex;flex-direction:column;gap:8px;padding:10px 14px;background-color:#ffffff0a;border-radius:12px;border:1.5px solid rgba(255,255,255,.06);transition:all .2s;cursor:pointer}.track-item:hover{background-color:#ffffff14;border-color:#ffffff1f}.track-item.is-selected{background:#ff6e0014;border-color:var(--color-accent, #ff6e00);box-shadow:0 0 12px #ff6e0026}.track-item.is-selected:hover{background:#ff6e001f}.track-item.metronome-item{cursor:default}.track-row-top{display:flex;align-items:center;gap:10px;min-width:0}.track-icon{width:28px;height:28px;min-width:28px;background:#ffffff1a;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.track-icon svg{width:15px;height:15px}.track-item.is-selected .track-icon{background:var(--color-accent, #ff6e00);color:#fff}.track-item.is-soloed .track-icon{background:var(--gb-primary, #ffb347);color:#000}.track-item.is-muted .track-icon{background:#ffffff0d;color:#555}.track-name{font-size:13px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.track-item.is-selected .track-name{color:var(--color-accent, #ff6e00);font-weight:600}.track-item.is-muted .track-name{color:#777}.track-selected-badge{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--color-accent, #ff6e00);background:#ff6e0026;padding:2px 8px;border-radius:10px;flex-shrink:0;letter-spacing:.5px;text-transform:uppercase}.track-row-bottom{display:flex;align-items:center;gap:10px;padding-left:38px}.track-buttons{display:flex;gap:4px;flex-shrink:0}.mixer-btn{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#aaa;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.mixer-btn:hover{background:#ffffff26;color:#fff}.mixer-btn.m-btn.active{background:#ff4757;color:#fff;border-color:#ff4757}.mixer-btn.s-btn.active{background:var(--gb-primary, #ffb347);color:#1a1a24;border-color:var(--gb-primary, #ffb347)}.track-volume{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.volume-icon{color:#aaa;flex-shrink:0}.track-item.is-muted .volume-icon{color:#555}.track-volume-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;height:4px;border-radius:2px;outline:none;min-width:0}.track-volume-slider::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:#fff3;border-radius:2px}.track-volume-slider::-webkit-slider-thumb{height:14px;width:14px;border-radius:50%;background:#fff;cursor:pointer;-webkit-appearance:none;margin-top:-5px}.track-item.is-muted .track-volume-slider::-webkit-slider-runnable-track{background:#ffffff0d}.track-item.is-muted .track-volume-slider::-webkit-slider-thumb{background:#555}.track-volume-slider::-moz-range-track{height:4px;background:#fff3;border-radius:2px;border:none}.track-volume-slider::-moz-range-thumb{height:14px;width:14px;border-radius:50%;background:#fff;cursor:pointer;border:none}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.track-mixer-popup{width:100%;max-width:none;height:100%;max-height:100%;border-radius:0;animation:slideUpMobile .3s cubic-bezier(.16,1,.3,1)}.track-mixer-content{padding:12px}.track-row-bottom{padding-left:38px}@keyframes slideUpMobile{0%{transform:translateY(100%)}to{transform:translateY(0)}}}.mobile-tuner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:gb-overlay-in var(--gb-dur-fast) var(--gb-ease-out)}@media(min-width:869px){.mobile-tuner-overlay{display:none!important}}.mobile-tuner-content{background:var(--color-bg-card, #1a1a2e);border:1px solid var(--color-border-default, rgba(255, 255, 255, .1));border-radius:20px;width:100%;max-width:340px;padding:24px;box-shadow:0 20px 50px #00000080;animation:gb-modal-in var(--gb-dur-normal) var(--gb-ease-spring)}.mobile-tuner-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.mobile-tuner-header h3{font-size:20px;font-weight:700;color:var(--color-text-primary, #ffffff);margin:0;display:flex;align-items:center;gap:8px}.mobile-tuner-close{background:transparent;border:none;color:var(--color-text-secondary, #a0a0b0);padding:8px;cursor:pointer;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center}.mobile-tuner-close:active{background:#ffffff1a;color:var(--color-text-primary, #ffffff)}.mobile-tuner-error{background:#ef44441a;border:1px solid rgba(239,68,68,.2);color:var(--color-error, #ef4444);padding:12px;border-radius:8px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px}.mobile-tuner-display-section{display:flex;flex-direction:column;align-items:center;margin-bottom:24px;min-height:120px;justify-content:center}.mobile-tuner-note{font-size:64px;font-weight:800;font-family:var(--font-display, inherit);line-height:1;transition:color .1s ease}.mobile-tuner-note.inactive{color:var(--color-text-muted, #444);font-size:48px}.mobile-tuner-hint{font-size:14px;color:var(--color-text-secondary, #a0a0b0);margin-top:12px;animation:pulse 1.5s infinite}.mobile-tuner-string-info{font-size:14px;font-weight:500;color:var(--color-text-secondary, #a0a0b0);margin-top:8px;padding:4px 12px;background:#ffffff0d;border-radius:12px}.mobile-tuner-frequency{font-family:var(--font-mono, monospace);font-size:16px;color:var(--color-text-muted, #666);margin-top:16px}.mobile-tuner-cents-section{margin-bottom:24px}.mobile-cents-bar{position:relative;height:12px;background:var(--color-bg-tertiary, #0a0a14);border-radius:6px;margin-bottom:12px;overflow:hidden}.mobile-cents-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#ffffff1a;transform:translate(-50%);z-index:1}.mobile-cents-indicator{position:absolute;top:50%;width:16px;height:16px;background:var(--color-accent, #6366f1);border-radius:50%;transform:translate(-50%,-50%);transition:left .1s ease-out,background .1s ease;box-shadow:0 0 10px currentColor;z-index:2}.mobile-cents-labels{display:flex;justify-content:space-between;font-size:14px;color:var(--color-text-secondary, #666);font-weight:600}.tuning-perfect{color:var(--color-success, #10b981)!important}.tuning-good{color:#4ade80!important}.tuning-fair{color:var(--color-warning, #f59e0b)!important}.tuning-poor{color:var(--color-error, #ef4444)!important}.mobile-tuner-strings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mobile-string-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;background:#ffffff08;border-radius:8px;border:1px solid transparent;transition:all .2s}.mobile-string-item.active{background:var(--color-accent-soft, rgba(99, 102, 241, .15));border-color:var(--color-accent, #6366f1)}.mobile-string-name{font-size:16px;font-weight:700;color:var(--color-text-primary, #ffffff);margin-bottom:4px}.mobile-string-item.active .mobile-string-name{color:var(--color-accent, #6366f1)}.mobile-string-hz{font-size:12px;font-family:var(--font-mono, monospace);color:var(--color-text-muted, #666)}.stat-gain-popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:10000;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s ease}.stat-gain-popup-overlay.stat-gain-visible{opacity:1;pointer-events:all}.stat-gain-popup-card{position:relative;background:var(--color-surface, #1e1e2e);border:1px solid var(--color-border, rgba(255, 255, 255, .12));border-radius:16px;padding:24px 28px;min-width:260px;max-width:340px;box-shadow:0 20px 60px #00000080;transform:scale(.9) translateY(20px);transition:transform var(--gb-dur-slow, .3s) var(--gb-ease-bounce, cubic-bezier(.34, 1.56, .64, 1))}.stat-gain-visible .stat-gain-popup-card{transform:scale(1) translateY(0)}.stat-gain-popup-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--color-border, rgba(255, 255, 255, .08))}.stat-gain-popup-icon{font-size:24px}.stat-gain-popup-title{font-size:18px;font-weight:700;color:var(--color-text, #fff);letter-spacing:-.02em}.stat-gain-popup-list{display:flex;flex-direction:column;gap:8px}.stat-gain-popup-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:var(--color-bg, rgba(255, 255, 255, .04));border-left:3px solid transparent;opacity:0;transform:translate(-8px);animation:gb-stagger-in var(--gb-dur-slow) var(--gb-ease-spring) calc(var(--stagger-i, 0) * 60ms) forwards}.stat-gain-popup-emoji{font-size:18px;min-width:24px;text-align:center}.stat-gain-popup-name{flex:1;font-size:14px;font-weight:500;color:var(--color-text-secondary, rgba(255, 255, 255, .8))}.stat-gain-popup-delta{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;min-width:36px;text-align:right}.stat-gain-popup-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border:none;border-radius:50%;background:var(--color-bg, rgba(255, 255, 255, .06));color:var(--color-text-secondary, rgba(255, 255, 255, .5));cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background var(--gb-dur-fast) ease,color var(--gb-dur-fast) ease,transform var(--gb-dur-fast) var(--gb-ease-spring)}.stat-gain-popup-close:hover{background:#ffffff1a;color:var(--color-text, #fff);transform:rotate(90deg)}.tp-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0000;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);cursor:pointer;overflow:hidden;opacity:0;transition:background .5s ease,backdrop-filter .5s ease,-webkit-backdrop-filter .5s ease,opacity .5s ease}.tp-overlay.tp-visible{opacity:1;background:#0000008c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.tp-overlay.tp-exiting{opacity:0;background:#0000;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);pointer-events:none}.tp-bg-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,var(--tp-glow) 0%,transparent 70%);opacity:0;transform:scale(.5);transition:opacity .8s ease .1s,transform .8s ease .1s;pointer-events:none}.tp-visible .tp-bg-glow{opacity:.35;transform:scale(1)}.tp-exiting .tp-bg-glow{opacity:0;transform:scale(.3);transition:all .4s ease}.tp-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;transform:scale(.9) translateY(20px);opacity:0;transition:transform .6s cubic-bezier(.22,1,.36,1) .1s,opacity .5s ease .1s}.tp-visible .tp-card{transform:scale(1) translateY(0);opacity:1}.tp-exiting .tp-card{transform:scale(.95) translateY(-15px);opacity:0;transition:all .4s ease}.tp-from{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.6}.tp-from-label{font-size:10px;text-transform:uppercase;letter-spacing:3px;color:#ffffff59;font-weight:700}.tp-from-badge{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.5px}.tp-arrow{opacity:.5;animation:tpArrowBob 1.5s ease-in-out infinite}@keyframes tpArrowBob{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}.tp-icon-area{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center;margin:4px 0}.tp-rays{position:absolute;width:280px;height:280px;border-radius:50%;opacity:0;background:conic-gradient(from 0deg,transparent 0deg,var(--tp-color) 10deg,transparent 20deg,transparent 60deg,var(--tp-color) 70deg,transparent 80deg,transparent 120deg,var(--tp-color) 130deg,transparent 140deg,transparent 180deg,var(--tp-color) 190deg,transparent 200deg,transparent 240deg,var(--tp-color) 250deg,transparent 260deg,transparent 300deg,var(--tp-color) 310deg,transparent 320deg,transparent 360deg);mask-image:radial-gradient(circle,transparent 25%,white 50%,transparent 72%);-webkit-mask-image:radial-gradient(circle,transparent 25%,white 50%,transparent 72%);transition:opacity .8s ease .3s;pointer-events:none}.tp-visible .tp-rays{opacity:.35;animation:tpRaysPulse 2.5s ease-in-out infinite}@keyframes tpRaysPulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.25);opacity:.5}}.tp-exiting .tp-rays{opacity:0;transition:opacity .3s ease}.tp-shimmer-glow{position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,var(--tp-glow) 0%,transparent 70%);opacity:0;transition:opacity .6s ease .2s;pointer-events:none}.tp-visible .tp-shimmer-glow{opacity:.4;animation:tpShimmerPulse 2.5s ease-in-out infinite}@keyframes tpShimmerPulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.25;transform:scale(1.1)}}.tp-exiting .tp-shimmer-glow{opacity:0;transition:opacity .3s ease}.tp-ring{position:absolute;width:140px;height:140px;border-radius:50%;border:2px solid var(--tp-color);box-shadow:0 0 25px var(--tp-glow),0 0 50px var(--tp-glow),inset 0 0 20px var(--tp-glow);opacity:0;transform:scale(.5);transition:opacity .6s ease .2s,transform .6s cubic-bezier(.22,1,.36,1) .2s}.tp-visible .tp-ring{opacity:.5;transform:scale(1);animation:tpRingPulse 2.5s ease-in-out 1s infinite}@keyframes tpRingPulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.06);opacity:.35}}.tp-exiting .tp-ring{opacity:0;transform:scale(.3);transition:all .3s ease}.tp-icon{position:relative;z-index:2;transform:scale(.4);opacity:0;transition:transform .7s cubic-bezier(.22,1,.36,1) .15s,opacity .5s ease .15s}.tp-visible .tp-icon{transform:scale(1);opacity:1}.tp-visible .tp-icon{animation:tpIconFloat 3.5s ease-in-out 1s infinite}@keyframes tpIconFloat{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1) translateY(-5px)}}.tp-exiting .tp-icon{transform:scale(1.2);opacity:0;transition:all .4s ease}.tp-icon-img{filter:drop-shadow(0 0 16px var(--tp-glow)) drop-shadow(0 0 35px var(--tp-glow))}.tp-particles{position:absolute;width:100%;height:100%;pointer-events:none}.tp-particle{position:absolute;top:50%;left:50%;width:var(--p-size);height:var(--p-size);border-radius:50%;background:var(--tp-color);box-shadow:0 0 6px var(--tp-color);opacity:0;transform:translate(-50%,-50%)}.tp-visible .tp-particle{animation:tpBurst .8s ease-out var(--p-delay) forwards}@keyframes tpBurst{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--p-angle)) translateY(0)}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--p-angle)) translateY(calc(-1 * var(--p-dist)))}}.tp-name{font-size:32px;font-weight:900;letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 25px var(--tp-glow),0 0 50px var(--tp-glow),0 2px 6px rgba(0,0,0,.5);text-align:center;line-height:1.2}.tp-sub{font-size:15px;font-weight:600;color:#ffffffb3;text-align:center}.tp-hint{position:absolute;bottom:40px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#fff3;opacity:0;transition:opacity .5s ease 1.5s}.tp-visible .tp-hint{opacity:1}.tp-exiting .tp-hint{opacity:0;transition:opacity .2s ease}@media(max-width:768px){.tp-icon-area{width:160px;height:160px}.tp-ring{width:120px;height:120px}.tp-name{font-size:26px;letter-spacing:2px}.tp-sub{font-size:14px}.tp-bg-glow{width:350px;height:350px}.tp-hint{bottom:28px}}@media(max-width:480px){.tp-name{font-size:22px;letter-spacing:1px}.tp-icon-area{width:140px;height:140px}.tp-ring{width:105px;height:105px}.tp-icon-img{width:80px!important;height:80px!important}}.video-sync-admin-panel{position:fixed;bottom:70px;left:16px;width:260px;background:#101018eb;border:1px solid rgba(76,175,80,.35);border-radius:8px;box-shadow:0 4px 20px #00000080;z-index:50;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:default;-webkit-user-select:none;user-select:none;transition:box-shadow .15s ease}.video-sync-admin-panel--dragging{box-shadow:0 8px 32px #4caf5040;opacity:.95}.video-sync-admin-panel__header{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#4caf501f;border-bottom:1px solid rgba(76,175,80,.15);border-radius:8px 8px 0 0;cursor:grab}.video-sync-admin-panel__header:active{cursor:grabbing}.video-sync-admin-panel__icon{font-size:12px}.video-sync-admin-panel__title{font-size:11px;font-weight:600;color:#4caf50;flex:1}.video-sync-admin-panel__toggle-btn,.video-sync-admin-panel__close-btn{width:20px;height:20px;border:none;border-radius:4px;background:transparent;color:#888;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s ease;padding:0;line-height:1}.video-sync-admin-panel__toggle-btn:hover,.video-sync-admin-panel__close-btn:hover{background:#ffffff1a;color:#fff}.video-sync-admin-panel__content{padding:8px 10px;display:flex;flex-direction:column;gap:6px}.video-sync-admin-panel__bpm-selector{display:flex;align-items:center;gap:6px;padding:0 10px 6px;border-bottom:1px solid rgba(255,255,255,.06)}.video-sync-admin-panel__select{flex:1;height:24px;padding:0 4px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#0000004d;color:#fff;font-size:11px}.video-sync-admin-panel__row{display:flex;align-items:center;justify-content:space-between;gap:4px}.video-sync-admin-panel__label{font-size:10px;color:#aaa;white-space:nowrap;min-width:55px}.video-sync-admin-panel__controls{display:flex;align-items:center;gap:4px}.video-sync-admin-panel__btn{width:24px;height:24px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#ffffff14;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .12s ease;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.video-sync-admin-panel__btn:hover{background:#4caf5040;border-color:#4caf5066}.video-sync-admin-panel__btn:active{transform:scale(.92)}.video-sync-admin-panel__input{width:56px;height:24px;padding:0 4px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#0000004d;color:#fff;font-size:12px;text-align:center}.video-sync-admin-panel__input:focus{outline:none;border-color:#4caf5080;background:#00000080}.video-sync-admin-panel__input::-webkit-outer-spin-button,.video-sync-admin-panel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.video-sync-admin-panel__input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.video-sync-admin-panel__unit{font-size:10px;color:#666;min-width:14px}.video-sync-admin-panel__durations{padding:6px 8px;background:#2196f314;border-radius:4px;font-size:10px;font-family:monospace}.video-sync-admin-panel__duration-header{font-size:9px;color:#64b5f6;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.video-sync-admin-panel__duration-row{display:flex;justify-content:space-between;align-items:center;padding:1px 0;color:#90caf9}.video-sync-admin-panel__duration-value{color:#fff;font-weight:500}.video-sync-admin-panel__duration-value--highlight{color:#4caf50;font-weight:600}.video-sync-admin-panel__sync-status{margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px}.video-sync-admin-panel__auto-btn{padding:2px 8px;border:1px solid rgba(76,175,80,.3);border-radius:4px;background:#4caf501f;color:#4caf50;font-size:10px;font-weight:600;cursor:pointer;transition:all .12s ease;white-space:nowrap}.video-sync-admin-panel__auto-btn:hover{background:#4caf5040;border-color:#4caf5080}.video-sync-admin-panel__sync-ok{color:#4caf50;font-weight:600}.video-sync-admin-panel__sync-diff{color:#ff9800;font-weight:500}.video-sync-admin-panel__debug{padding:4px 8px;background:#ffffff0a;border-radius:4px;font-size:10px;font-family:monospace;color:#777;display:flex;flex-direction:column;gap:1px}.video-sync-admin-panel__actions{display:flex;gap:6px;margin-top:2px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08)}.video-sync-admin-panel__action-btn{flex:1;padding:5px 8px;border:none;border-radius:4px;font-size:11px;font-weight:500;cursor:pointer;transition:all .12s ease}.video-sync-admin-panel__action-btn--reset{background:#f4433626;color:#f44336}.video-sync-admin-panel__action-btn--reset:hover{background:#f443364d}.video-sync-admin-panel__action-btn--save{background:#4caf5026;color:#4caf50}.video-sync-admin-panel__action-btn--save:hover:not(:disabled){background:#4caf504d}.video-sync-admin-panel__action-btn--save:disabled{opacity:.6;cursor:not-allowed}.video-sync-admin-panel__action-btn--success{background:#4caf5066!important;color:#fff!important}.video-sync-admin-panel__action-btn--error{background:#f4433640!important;color:#f44336!important}@media(max-width:768px){.video-sync-admin-panel{bottom:60px;left:4px;right:4px;width:auto;position:fixed}}.achievement-popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease-out}.achievement-popup-overlay--exiting{animation:fadeOut .3s ease-out forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.achievement-confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.confetti-particle{position:absolute;width:10px;height:10px;background:linear-gradient(135deg,gold,#ff6b35);animation:confettiFall 3s ease-out forwards infinite;opacity:0}.confetti-particle--0{left:10%;background:gold;animation-delay:0s;border-radius:50%}.confetti-particle--1{left:25%;background:#ff6b35;animation-delay:.1s;border-radius:2px}.confetti-particle--2{left:40%;background:#a855f7;animation-delay:.2s;border-radius:50%}.confetti-particle--3{left:60%;background:#3b82f6;animation-delay:.15s;border-radius:2px}.confetti-particle--4{left:80%;background:#22c55e;animation-delay:.25s;border-radius:50%}@keyframes confettiFall{0%{transform:translateY(-100px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.achievement-popup{position:relative;background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:24px;padding:32px;max-width:400px;width:90%;text-align:center;box-shadow:0 25px 50px -12px #00000080;animation:popupEnter .4s ease-out;border:2px solid rgba(255,255,255,.1)}@keyframes popupEnter{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.achievement-popup--common{border-color:#9ca3af66}.achievement-popup--rare{border-color:#3b82f680;box-shadow:0 0 40px #3b82f633}.achievement-popup--epic{border-color:#a855f780;box-shadow:0 0 40px #a855f74d}.achievement-popup--legendary{border-color:#fbbf2499;box-shadow:0 0 60px #fbbf2466}.achievement-popup__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.achievement-popup__label{font-size:14px;font-weight:600;color:#fbbf24;text-transform:uppercase;letter-spacing:1px}.achievement-popup__counter{font-size:12px;color:#ffffff80;background:#ffffff1a;padding:4px 8px;border-radius:12px}.achievement-popup__icon-container{position:relative;width:120px;height:120px;margin:0 auto 24px}.achievement-popup__glow{position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;background:radial-gradient(circle,rgba(251,191,36,.3) 0%,transparent 70%);animation:glowPulse 2s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.achievement-popup__icon{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border-radius:50%;border:3px solid rgba(255,255,255,.2);animation:iconBounce .6s ease-out}@keyframes iconBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}70%{transform:scale(.9)}to{transform:scale(1)}}.achievement-popup__content{margin-bottom:24px}.achievement-popup__name{font-size:24px;font-weight:700;color:#fff;margin:0 0 8px}.achievement-popup__description{font-size:16px;color:#ffffffb3;margin:0 0 16px;line-height:1.5}.achievement-popup__meta{display:flex;justify-content:center;gap:12px}.achievement-popup__rarity{font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}.achievement-popup__rarity--common{background:#9ca3af33;color:#9ca3af}.achievement-popup__rarity--rare{background:#3b82f633;color:#60a5fa}.achievement-popup__rarity--epic{background:#a855f733;color:#c084fc}.achievement-popup__rarity--legendary{background:#fbbf2433;color:#fbbf24}.achievement-popup__xp{font-size:14px;font-weight:700;color:#22c55e;background:#22c55e26;padding:4px 12px;border-radius:20px}.achievement-popup__close{width:100%;padding:14px 24px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:16px;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .2s ease}.achievement-popup__close:hover{background:linear-gradient(135deg,#60a5fa,#3b82f6);transform:translateY(-2px)}.achievement-popup__close:active{transform:translateY(0)}@media(max-width:480px){.achievement-popup{padding:24px 20px;margin:16px}.achievement-popup__icon-container{width:100px;height:100px}.achievement-popup__icon{font-size:48px}.achievement-popup__name{font-size:20px}.achievement-popup__description{font-size:14px}}.video-recorder-overlay{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:#000000f2!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:2147483647!important;padding:20px;animation:gb-overlay-in var(--gb-dur-fast) var(--gb-ease-out)}.video-recorder-modal{background:var(--color-surface);border-radius:16px;width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #00000080;position:relative;z-index:2147483647!important;animation:gb-modal-in var(--gb-dur-normal) var(--gb-ease-spring)}.recorder-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--color-border-muted)}.recorder-header h3{margin:0;font-size:1.1rem;display:flex;align-items:center;gap:8px;color:var(--color-text-primary)}.recorder-header .close-button{background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s}.recorder-header .close-button:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.recorder-content{flex:1;display:flex;align-items:center;justify-content:center;background:#000;min-height:360px;max-height:50vh;position:relative;overflow:hidden}.recorder-error{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px;color:#ef4444}.recorder-error p{margin:16px 0 24px;color:var(--color-text-secondary);max-width:300px;line-height:1.5}.retry-button{display:flex;align-items:center;gap:6px;padding:10px 20px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:8px;color:var(--color-text-primary);cursor:pointer;font-size:.9rem;transition:all .2s}.retry-button:hover{background:var(--color-bg-card-hover)}.recorder-loading{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--color-text-secondary)}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border-muted);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.recorder-preview,.recorder-playback{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.preview-video,.playback-video{display:block!important;width:100%!important;height:auto!important;min-height:280px;max-height:50vh;object-fit:cover;background:#000}.playback-video{object-fit:contain}.recording-indicator{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#000000b3;border-radius:6px;font-size:.85rem;font-weight:600}.rec-dot{width:10px;height:10px;background:#ef4444;border-radius:50%;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.rec-text{color:#ef4444}.rec-time{color:#fff;margin-left:4px}.time-warning{position:absolute;top:16px;right:16px;padding:8px 12px;background:#ef4444e6;border-radius:6px;color:#fff;font-size:.85rem;font-weight:600;animation:pulse 1s ease-in-out infinite}.duration-info{position:absolute;bottom:12px;left:50%;transform:translate(-50%);padding:6px 12px;background:#000000b3;border-radius:4px;color:#fff;font-size:.85rem}.recorder-controls{padding:20px;display:flex;justify-content:center;border-top:1px solid var(--color-border-muted)}.control-button{display:flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.control-button.record-start{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.control-button.record-start:hover{transform:scale(1.02);box-shadow:0 4px 16px #ef444466}.control-button.record-stop{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:2px solid var(--color-border-muted)}.control-button.record-stop:hover{background:var(--color-bg-card-hover)}.preview-actions{display:flex;gap:12px}.control-button.retry{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border-muted)}.control-button.retry:hover{background:var(--color-bg-card-hover)}.control-button.save{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.control-button.save:hover{transform:scale(1.02);box-shadow:0 4px 16px #10b98166}.recorder-info{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;background:var(--color-bg-tertiary);color:var(--color-text-muted);font-size:.8rem}@media(max-width:767px){.video-recorder-overlay{padding:0}.video-recorder-modal{max-width:100%;max-height:100%;height:100%;border-radius:0}.recorder-content{min-height:50vh}.control-button{padding:14px 20px}.preview-actions{flex-direction:column;width:100%;padding:0 16px;gap:10px}.preview-actions .control-button{width:100%;justify-content:center}}.exam-upload-panel{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:12px}.exam-upload-panel-layout-vertical{min-width:280px;width:100%}.exam-upload-panel-layout-horizontal{max-width:400px;min-width:320px;flex-shrink:0}.exam-upload-panel-layout-noVideo{max-width:320px;min-width:280px}.exam-upload-panel-mobile{max-width:100%;margin:16px 0 0;padding:12px;gap:10px}.collapse-toggle{display:none;align-items:center;justify-content:space-between;cursor:pointer;padding:12px;background:var(--color-bg-tertiary);border-radius:8px;transition:all .2s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.exam-upload-panel-mobile .collapse-toggle{display:flex}.collapse-toggle:hover{background:var(--color-bg-card-hover)}.collapse-toggle:active{transform:scale(.98)}.collapse-toggle-content{display:flex;align-items:center;gap:8px}.collapse-toggle-icon{font-size:1.2rem}.collapse-toggle-text{font-weight:600;font-size:.9rem;color:var(--color-text-primary)}.exam-upload-panel-mobile.collapsed{max-height:none;overflow:visible}.exam-upload-panel-mobile .exam-badge{display:none}.exam-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;font-weight:600;font-size:.85rem;color:#fff;align-self:flex-start}.exam-instructions-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.exam-instructions-header h4{margin:0;font-size:.9rem;color:var(--color-text-primary)}.exam-bpm-pill{display:inline-flex;align-items:center;padding:4px 12px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:14px;font-size:.8rem;font-weight:700;color:#fff;letter-spacing:.3px;white-space:nowrap;flex-shrink:0}.exam-instructions .instructions-text{display:flex;flex-direction:column;gap:5px}.exam-instructions .instructions-text p{margin:0;font-size:.8rem;color:var(--color-text-secondary);line-height:1.4}.exam-instructions .instructions-text.default p{padding-left:4px}.exam-upload-panel-mobile .exam-instructions .instructions-text p{font-size:.75rem}.exam-status{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:10px;border:1px solid}.exam-status strong{display:block;margin-bottom:2px}.exam-status p{margin:0;font-size:.8rem;opacity:.9}.exam-status .admin-comment{margin-top:6px;font-style:italic}.exam-status .retry-hint{margin-top:10px;padding:8px 12px;background:linear-gradient(135deg,#10b9811a,#10b9810d);border:1px dashed rgba(16,185,129,.4);border-radius:8px;color:#10b981!important;font-weight:500;font-size:.85rem}.exam-status.status-pending{background:#ffc1071a;border-color:#ffc1074d;color:#fbbf24}.exam-status.status-approved{background:#10b9811a;border-color:#10b9814d;color:#10b981}.exam-status.status-rejected{background:#ef44441a;border-color:#ef44444d;color:#ef4444}.exam-upload-form h4{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:.9rem;color:var(--color-text-primary)}.file-input-wrapper{position:relative}.file-input-wrapper input[type=file]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.video-source-options{display:flex;flex-direction:row;align-items:center;gap:8px}.video-source-options .file-input-wrapper{flex:1}.video-or-badge{font-size:.7rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.record-button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 10px;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:10px;color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.record-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #ef444466}.record-button:disabled{opacity:.5;cursor:not-allowed}.file-input-label{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 10px;background:var(--color-bg-tertiary);border:2px dashed var(--color-border-muted);border-radius:10px;cursor:pointer;transition:all .2s;font-size:.85rem;font-weight:500;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-input-label:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-hover)}.exam-upload-form textarea{width:100%;margin-top:8px;padding:8px 10px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:8px;color:var(--color-text-primary);font-family:inherit;font-size:.8rem;resize:vertical}.exam-upload-form textarea::placeholder{color:var(--color-text-muted)}.exam-upload-panel .upload-progress{display:flex;align-items:center;gap:8px;margin-top:8px}.exam-upload-panel .progress-bar{flex:1;height:6px;background:var(--color-bg-tertiary);border-radius:3px;overflow:hidden}.exam-upload-panel .progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s}.exam-upload-panel .upload-error{display:flex;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#ef4444;font-size:.8rem}.exam-upload-panel .upload-button{width:100%;margin-top:10px;padding:10px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.exam-upload-panel .upload-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.exam-upload-panel .upload-button:disabled{opacity:.5;cursor:not-allowed}.exam-upload-panel .upload-success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px;color:#10b981}.exam-upload-panel .upload-success p{margin:8px 0 0;color:var(--color-text-secondary)}.submission-date{font-size:.75rem;color:#888;margin-top:4px}@media(max-width:767px){.exam-upload-panel{padding:10px;gap:8px}.exam-badge{font-size:.8rem;padding:6px 10px}.exam-instructions h4{font-size:.85rem}.exam-status{padding:10px;gap:8px}.file-input-label{padding:12px;font-size:.8rem}.exam-upload-panel .upload-button{padding:10px;font-size:.85rem}}.challenge-period-notice{display:flex;align-items:flex-start;gap:16px;padding:20px;border-radius:16px;margin-bottom:16px;border:1px solid;position:relative;overflow:hidden}.challenge-period-notice:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.4;pointer-events:none}.challenge-period-notice .notice-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;flex-shrink:0;position:relative;z-index:1}.challenge-period-notice .notice-content{flex:1;min-width:0;position:relative;z-index:1}.challenge-period-notice .notice-content h4{margin:0 0 6px;font-size:1.1rem;font-weight:700;letter-spacing:-.01em}.challenge-period-notice .notice-content p{margin:0;font-size:.9rem;line-height:1.5;opacity:.85}.challenge-period-notice .notice-action-btn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 18px;border:none;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;color:#fff}.challenge-period-notice .notice-action-btn:hover{transform:translateY(-2px)}.challenge-period-notice.voting{background:linear-gradient(135deg,#8b5cf614,#7c3aed1f);border-color:#8b5cf640}.challenge-period-notice.voting .notice-icon{background:linear-gradient(135deg,#8b5cf626,#7c3aed33);color:#a78bfa;box-shadow:0 4px 12px #8b5cf626}.challenge-period-notice.voting .notice-content h4{color:#a78bfa}.challenge-period-notice.voting .notice-content p{color:var(--color-text-secondary)}.challenge-period-notice.voting .notice-action-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 4px 12px #8b5cf64d}.challenge-period-notice.voting .notice-action-btn:hover{box-shadow:0 6px 20px #8b5cf666}.challenge-period-notice.completed{background:linear-gradient(135deg,#10b98114,#0596691f);border-color:#10b98140}.challenge-period-notice.completed .notice-icon{background:linear-gradient(135deg,#10b98126,#05966933);color:#10b981;box-shadow:0 4px 12px #10b98126}.challenge-period-notice.completed .notice-content h4{color:#10b981}.challenge-period-notice.completed .notice-content p{color:var(--color-text-secondary)}.challenge-period-notice.completed .notice-action-btn{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px #10b9814d}.challenge-period-notice.completed .notice-action-btn:hover{box-shadow:0 6px 20px #10b98166}@media(max-width:767px){.challenge-period-notice{padding:16px;gap:12px;flex-direction:column;align-items:center;text-align:center}.challenge-period-notice .notice-icon{width:48px;height:48px}.challenge-period-notice .notice-content h4{font-size:1rem}.challenge-period-notice .notice-content p{font-size:.85rem}.challenge-period-notice .notice-action-btn{width:100%;justify-content:center}}.video-overlay-controls{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .2s ease;pointer-events:auto;z-index:15;cursor:pointer}.video-overlay-controls.visible{opacity:1}@media(hover:hover)and (pointer:fine){.video-wrapper:hover .video-overlay-controls{opacity:1}}.video-overlay-controls .video-overlay-left-controls,.video-overlay-controls .video-overlay-right-controls,.video-overlay-controls .video-overlay-seek-container{pointer-events:auto}.video-overlay-controls.zoomed{cursor:grab;pointer-events:auto}.video-overlay-controls.zoomed.dragging{cursor:grabbing}.video-overlay-left-controls{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}.video-overlay-right-controls{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}.video-overlay-zoom-controls{display:flex;flex-direction:column;gap:4px}.video-overlay-btn{background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:#ffffffe6}.video-overlay-btn:hover:not(:disabled){background:#000c;border-color:#ffffff4d;color:#fff;transform:scale(1.05)}.video-overlay-btn:active:not(:disabled){transform:scale(.95)}.video-overlay-btn:disabled{opacity:.4;cursor:not-allowed}.video-overlay-btn.active{background:var(--color-accent, #ff8c3c);border-color:var(--color-accent, #ff8c3c);color:#fff}.video-overlay-btn svg{width:16px;height:16px}.video-overlay-play-btn{width:32px;height:32px;min-width:32px;min-height:32px;background:var(--color-accent-soft);border:1.5px solid var(--color-border-default);color:var(--color-accent);border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0}.video-overlay-play-btn:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-border-hover);transform:scale(1.05);box-shadow:var(--shadow-glow-sm)}.video-overlay-play-btn:active:not(:disabled){transform:scale(.98)}.video-overlay-play-btn:disabled{opacity:.5;cursor:not-allowed}.video-overlay-zoom-indicator{position:absolute;bottom:8px;right:8px;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;pointer-events:none}@media(max-width:1100px){.video-overlay-right-controls{top:6px;right:6px;gap:6px}.video-overlay-btn{width:28px;height:28px}.video-overlay-btn svg{width:14px;height:14px}.video-overlay-play-btn{width:36px;height:36px;min-width:36px;min-height:36px}.video-overlay-zoom-indicator{bottom:6px;right:6px;font-size:11px;padding:3px 6px}}.video-overlay-seek-container{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:20px 12px 10px;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.15) 85%,transparent 100%);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.video-overlay-seek-container.has-selection{border-left:2px solid var(--color-accent, #ff8c3c)}.video-overlay-seek-time{color:var(--color-accent, #ff8c3c);font-size:13px;font-weight:500;font-family:var(--font-mono, monospace);min-width:40px;text-shadow:0 1px 2px rgba(0,0,0,.5)}.video-overlay-seek-time-current{text-align:right}.video-overlay-seek-time-end{text-align:left}.video-overlay-seek-bar{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border, #333);border-radius:2px;cursor:pointer;transition:height .15s ease}.video-overlay-seek-bar:hover{height:6px}.video-overlay-seek-bar::-webkit-slider-runnable-track{height:100%;border-radius:2px}.video-overlay-seek-bar::-moz-range-track{height:100%;border-radius:2px;background:var(--color-border, #333)}.video-overlay-seek-bar::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent, #ff8c3c);border:2px solid white;box-shadow:0 2px 4px #0000004d;cursor:pointer;margin-top:-5px;transition:transform .15s ease,box-shadow .15s ease}.video-overlay-seek-bar:hover::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 2px 8px #ff8c3c66}.video-overlay-seek-bar::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-accent, #ff8c3c);border:2px solid white;box-shadow:0 2px 4px #0000004d;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.video-overlay-seek-bar:hover::-moz-range-thumb{transform:scale(1.2);box-shadow:0 2px 8px #ff8c3c66}.video-overlay-seek-bar:disabled{opacity:.5;cursor:not-allowed}@media(max-width:1100px){.video-overlay-controls{pointer-events:auto}.video-overlay-left-controls{top:6px;left:6px;gap:4px}.video-overlay-right-controls{top:6px;right:6px;gap:6px}.video-overlay-btn{width:28px;height:28px}.video-overlay-btn svg{width:14px;height:14px}.video-overlay-play-btn{width:28px;height:28px;min-width:28px;min-height:28px}.video-overlay-zoom-indicator{bottom:50px;right:6px;font-size:11px;padding:3px 6px}.video-overlay-seek-container{padding:10px 10px 8px;gap:8px}.video-overlay-seek-time{font-size:11px;min-width:36px}.video-overlay-seek-bar{height:5px}.video-overlay-seek-bar::-webkit-slider-thumb{width:16px;height:16px;margin-top:-5.5px}.video-overlay-seek-bar::-moz-range-thumb{width:16px;height:16px}}.video-overlay-quality-btn{display:flex;align-items:center;gap:3px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:4px;padding:3px 7px 3px 5px;cursor:pointer;transition:all .2s ease;flex-shrink:0;color:#ffffffb3;line-height:1}.video-overlay-quality-btn:hover{background:#ffffff29;border-color:#ffffff4d;color:#fff;transform:scale(1.05)}.video-overlay-quality-btn:active{transform:scale(.95)}.video-overlay-quality-btn.quality-high{background:rgba(var(--color-accent-rgb, 255, 140, 60),.2);border-color:rgba(var(--color-accent-rgb, 255, 140, 60),.4);color:var(--color-accent, #ff8c3c)}.video-overlay-quality-btn.quality-high:hover{background:rgba(var(--color-accent-rgb, 255, 140, 60),.3);border-color:rgba(var(--color-accent-rgb, 255, 140, 60),.6)}.video-overlay-quality-btn .quality-label{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}@media(max-width:1100px){.video-overlay-quality-btn{padding:2px 5px 2px 4px;gap:2px}.video-overlay-quality-btn svg{width:12px;height:12px}.video-overlay-quality-btn .quality-label{font-size:10px}}.video-wrapper.video-zoomed{overflow:hidden}.video-wrapper.video-zoomed video.sync-video{transform-origin:center center;transition:none}.video-click-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:20;animation:videoClickIconFade .6s ease-out forwards}.video-click-icon__circle{width:64px;height:64px;border-radius:50%;background:#0000008c;display:flex;align-items:center;justify-content:center;animation:videoClickIconScale .6s ease-out forwards}@keyframes videoClickIconScale{0%{transform:scale(.8);opacity:1}50%{transform:scale(1.15);opacity:.9}to{transform:scale(1.3);opacity:0}}@keyframes videoClickIconFade{0%{opacity:1}70%{opacity:.8}to{opacity:0}}.performer-credit{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px;margin-top:12px}.performer-link{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-weight:500;font-size:15px;padding:6px 12px;border-radius:8px;background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);background-size:200% 200%;transition:all .3s ease}.performer-link:hover{transform:translateY(-2px);box-shadow:0 4px 15px #8b5cf666;background-position:100% 0}.performer-social-icon{width:18px;height:18px;flex-shrink:0}.performer-name{white-space:nowrap}@media(max-width:768px){.performer-credit{padding:10px 12px;margin-top:10px;flex-wrap:wrap;gap:6px}.performer-label{font-size:13px}.performer-link{font-size:14px;padding:5px 10px}.performer-social-icon{width:16px;height:16px}}.chrome-recommend-banner{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#1e1e1ed9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer;transition:opacity .3s ease,transform .3s ease;position:fixed;top:70px;left:50%;transform:translate(-50%);z-index:9999;max-width:420px;animation:chromeRecommendSlideDown .4s ease forwards;box-shadow:0 4px 20px #0006}.chrome-recommend-banner:hover{background:#282828e6}.chrome-recommend-icon{font-size:16px;flex-shrink:0}.chrome-recommend-text{font-size:13px;color:#ffffffbf;line-height:1.4;-webkit-user-select:none;user-select:none}.chrome-recommend-close{background:none;border:none;color:#fff6;font-size:14px;cursor:pointer;padding:2px 6px;flex-shrink:0;transition:color .2s;line-height:1}.chrome-recommend-close:hover{color:#fffc}@keyframes chromeRecommendSlideDown{0%{opacity:0;transform:translate(-50%) translateY(-12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(max-width:767px){.chrome-recommend-banner{left:12px;right:12px;transform:none;max-width:none}@keyframes chromeRecommendSlideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}}.app-layout{min-height:100vh;position:relative;display:flex;flex-direction:column;color:var(--color-neutral-900)}.app-background{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 50%,var(--color-bg-tertiary) 100%);z-index:-1}.app-background:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,var(--color-glow-subtle) 0%,transparent 50%),radial-gradient(circle at 80% 80%,var(--color-glow-subtle) 0%,transparent 50%);pointer-events:none}.app-header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:2px solid var(--color-border-default);box-shadow:var(--shadow-md)}.app-content{flex:1;position:relative;z-index:var(--z-base);padding:0}@media(min-width:768px){.app-content{padding:0}}.tuner-page-content{max-width:640px;margin:0 auto;padding:40px 24px 80px;display:flex;flex-direction:column;gap:24px}.tuner-card{background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:20px;padding:32px;box-shadow:0 2px 8px #00000026,0 0 20px var(--color-glow-subtle);display:flex;flex-direction:column;gap:28px;min-height:360px}.tuner-alert{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-radius:12px}.tuner-alert-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.tuner-alert-error p{margin:0;font-size:14px;color:#ef4444;font-weight:500}.alert-icon{font-size:18px;flex-shrink:0}.tuner-top{text-align:center;display:flex;flex-direction:column;gap:6px}.tuner-label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--color-text-muted)}.tuner-note{font-family:var(--font-heading);font-size:96px;font-weight:900;color:var(--color-accent);line-height:1;letter-spacing:-2px;text-shadow:0 0 30px var(--color-glow-strong)}.tuner-note-perfect{color:#22c55e;text-shadow:0 0 40px rgba(34,197,94,.6)}.tuner-frequency{font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--color-text-secondary)}.tuner-center{display:flex;flex-direction:column;gap:18px}.tuner-values{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.tuner-value-block{background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:14px;padding:14px;text-align:center}.tuner-value-label{display:block;font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:6px}.tuner-value{font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--color-text-primary)}.tuner-perfect{color:#22c55e}.tuner-good{color:#84cc16}.tuner-fair{color:#eab308}.tuner-poor{color:#ef4444}.tuner-none{color:var(--color-text-muted)}.tuner-bar{position:relative;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:12px;padding:18px 12px 28px;overflow:hidden}.tuner-bar-center{position:absolute;left:50%;top:10px;bottom:36px;width:2px;background:var(--color-border-muted);transform:translate(-50%)}.tuner-bar-scale{display:flex;justify-content:space-between;font-family:var(--font-body);font-size:11px;color:var(--color-text-muted);margin-bottom:8px}.tuner-bar-indicator{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px var(--color-glow);transition:left .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out;background:var(--color-accent)}.tuner-bar-indicator.tuner-perfect{background:#22c55e;box-shadow:0 0 16px #22c55e99}.tuner-bar-indicator.tuner-good{background:#84cc16;box-shadow:0 0 14px #84cc1680}.tuner-bar-indicator.tuner-fair{background:#eab308;box-shadow:0 0 14px #eab30873}.tuner-bar-indicator.tuner-poor{background:#ef4444;box-shadow:0 0 14px #ef444473}.tuner-actions{margin-top:8px}.tuner-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 28px;font-family:var(--font-heading);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border:none;border-radius:12px;cursor:pointer;transition:all .2s ease-out}.tuner-btn-primary{background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-600) 100%);color:var(--color-neutral-0);box-shadow:0 4px 16px var(--color-glow),0 0 20px var(--color-glow-subtle)}.tuner-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--color-glow-strong),0 0 30px var(--color-glow)}.tuner-btn-secondary{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border-muted)}.tuner-btn-secondary:hover{background:var(--color-surface-alt);border-color:var(--color-border-hover)}.tuner-header-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;max-width:1200px;margin:0 auto;padding:16px 20px}.tuner-header-left{display:flex;align-items:center;gap:16px}.tuner-header-logo{height:40px;width:auto;object-fit:contain;flex-shrink:0;cursor:pointer;transition:all .2s ease;opacity:.9}.tuner-header-logo:hover{opacity:1;transform:scale(1.05)}.tuner-header-title-section{display:flex;flex-direction:column;gap:4px}.tuner-header-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}.tuner-header-title{font-family:var(--font-heading);font-size:16px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-primary);margin:0;line-height:1.2}.tuner-header-right{display:flex;justify-content:flex-end}.tuner-header-exit-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s ease-out;flex-shrink:0}.tuner-header-exit-btn:hover{border-color:var(--color-border-hover);color:var(--color-text-primary);background:var(--color-bg-card-hover);transform:scale(1.03)}.tuner-header-exit-btn:active{transform:scale(.98)}@media(max-width:768px){.tuner-page-content{padding:24px 16px 80px}.tuner-card{padding:24px 20px}.tuner-note{font-size:72px}.tuner-values{grid-template-columns:1fr}.tuner-header-inner{grid-template-columns:1fr;gap:12px;padding:14px 16px}.tuner-header-right{justify-content:flex-start}}@media(max-width:480px){.tuner-page-content{padding:20px 12px 80px}.tuner-card{padding:20px 16px;min-height:320px}.tuner-note{font-size:60px}.tuner-value{font-size:20px}.tuner-btn{padding:14px 22px;font-size:14px}.tuner-bar-indicator{width:16px;height:16px}.tuner-header-inner{padding:12px 14px}.tuner-header-logo{height:32px}}.theme-light .tuner-card{background:#fff;box-shadow:0 1px 3px #0000000f}.theme-light .tuner-value-block,.theme-light .tuner-bar,.theme-light .tuner-btn-secondary{background:#f8f9fa}.theme-light .tuner-btn-secondary:hover{background:#f1f3f5}.practice-page-content{max-width:1100px;margin:0 auto;padding:40px 24px 80px;display:flex;flex-direction:column;gap:20px}.practice-grid{display:grid;grid-template-columns:2fr 1.2fr;gap:20px}.practice-card{background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:20px;padding:24px;box-shadow:0 2px 8px #00000026,0 0 20px var(--color-glow-subtle);display:flex;flex-direction:column;gap:16px}.card-header{display:flex;justify-content:space-between;align-items:center}.card-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);display:block}.card-title{font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--color-text-primary);margin:4px 0 0;letter-spacing:.05em}.metronome-status{display:flex;align-items:center;gap:8px}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--color-text-muted);box-shadow:0 0 8px var(--color-glow-subtle)}.status-dot[data-active=true]{background:var(--color-accent);box-shadow:0 0 12px var(--color-glow)}.status-label{font-size:13px;color:var(--color-text-secondary);font-weight:600}.metronome-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.control-block{display:flex;flex-direction:column;gap:8px}.control-label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}.bpm-row{display:flex;gap:10px;align-items:center}.bpm-row input[type=range]{flex:1}.bpm-row input[type=number]{width:80px}input[type=number],input[type=range]{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-primary);font-family:var(--font-body);font-size:14px;transition:all .15s ease-out}input[type=number]:focus,input[type=range]:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}.practice-select{width:100%;padding:10px 40px 10px 12px;border-radius:12px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-primary);font-family:var(--font-body);font-size:14px;font-weight:500;transition:all .15s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239ba3b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}.practice-select:hover:not(:disabled){border-color:var(--color-border-hover);background-color:var(--color-surface-alt)}.practice-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}.practice-select:disabled{opacity:.6;cursor:not-allowed}.practice-select option{background:var(--color-bg-tertiary);color:var(--color-text-primary);padding:8px}input[type=range]{padding:0;accent-color:var(--color-accent)}.toggle-row{align-items:center;flex-direction:row;justify-content:space-between}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);transition:.2s;border-radius:34px}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:3px;background-color:var(--color-text-primary);transition:.2s;border-radius:50%}.switch input:checked+.slider{background-color:var(--color-accent-soft);border-color:var(--color-accent)}.switch input:checked+.slider:before{transform:translate(16px);background:var(--color-accent);box-shadow:0 0 10px var(--color-glow)}.beat-indicator{display:grid;grid-auto-flow:column;gap:12px;justify-content:center;margin:10px 0}.beat-dot{width:22px;height:22px;border-radius:50%;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);box-shadow:inset 0 0 6px #0003;transition:all .12s ease-out}.beat-dot.beat-accent{border-color:var(--color-accent)}.beat-dot.beat-active{background:var(--color-accent);box-shadow:0 0 14px var(--color-glow);transform:scale(1.05)}.metronome-actions{display:flex;justify-content:center}.btn{padding:14px 20px;border-radius:12px;border:1px solid transparent;font-family:var(--font-heading);font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .18s ease-out;width:100%;max-width:260px}.btn-primary{background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-600) 100%);color:var(--color-neutral-0);box-shadow:0 4px 16px var(--color-glow),0 0 20px var(--color-glow-subtle)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px var(--color-glow-strong)}.btn-secondary{background:var(--color-bg-tertiary);color:var(--color-text-primary);border-color:var(--color-border-muted)}.btn-secondary:hover{background:var(--color-surface-alt);border-color:var(--color-border-hover)}.btn-ghost{background:transparent;color:var(--color-text-primary);border:1px solid var(--color-border-muted)}.mode-selector{display:flex;gap:10px;flex-wrap:wrap}.mode-pill{padding:10px 14px;border-radius:12px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-primary);cursor:pointer;transition:all .15s ease-out;font-weight:700;letter-spacing:.04em}.mode-pill.mode-active{border-color:var(--color-accent);color:var(--color-accent);box-shadow:0 0 12px var(--color-glow-subtle)}.mode-panel{display:flex;flex-direction:column;gap:12px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;font-weight:600;color:var(--color-text-secondary)}.workout-steps{display:flex;flex-direction:column;gap:8px}.workout-step{padding:10px 12px;border:1px solid var(--color-border-muted);border-radius:12px;background:var(--color-bg-tertiary)}.workout-step.workout-active{border-color:var(--color-accent);box-shadow:0 0 12px var(--color-glow-subtle)}.workout-step-label{font-weight:700;color:var(--color-text-primary)}.workout-step-meta{font-size:12px;color:var(--color-text-secondary)}.mode-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.mode-status{display:flex;flex-direction:column;gap:4px}.mode-status-label{font-size:11px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.2em;font-weight:600}.mode-status-value{font-size:14px;font-weight:700;color:var(--color-text-primary)}.practice-footer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:14px;padding:14px 18px;box-shadow:0 1px 3px #0000001a}.footer-item{display:flex;flex-direction:column;gap:4px;align-items:center}.footer-label{font-size:11px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.2em;font-weight:600}.footer-value{font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--color-text-primary)}.practice-header-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;max-width:1200px;margin:0 auto;padding:16px 20px}.practice-header-left{display:flex;align-items:center;gap:16px}.practice-header-logo{height:40px;width:auto;object-fit:contain;flex-shrink:0;cursor:pointer;transition:all .2s ease;opacity:.9}.practice-header-logo:hover{opacity:1;transform:scale(1.05)}.practice-header-title-section{display:flex;flex-direction:column;gap:4px}.practice-header-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}.practice-header-title{font-family:var(--font-heading);font-size:16px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-primary);margin:0;line-height:1.2}.practice-header-right{display:flex;justify-content:flex-end}.practice-header-exit-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s ease-out;flex-shrink:0}.practice-header-exit-btn:hover{border-color:var(--color-border-hover);color:var(--color-text-primary);background:var(--color-bg-card-hover);transform:scale(1.03)}.practice-header-exit-btn:active{transform:scale(.98)}@media(max-width:1024px){.practice-grid{grid-template-columns:1fr}}@media(max-width:768px){.practice-page-content{padding:24px 16px 80px}.practice-card{padding:20px}.metronome-controls{grid-template-columns:1fr}.practice-header-inner{grid-template-columns:1fr;padding:14px 16px;gap:12px}.practice-header-right{justify-content:flex-start}.practice-footer{grid-template-columns:1fr;text-align:center}}@media(max-width:480px){.practice-page-content{padding:20px 12px 80px}.practice-card{padding:16px}.card-title{font-size:18px}.btn{width:100%}.practice-header-logo{height:32px}.practice-header-title{font-size:14px}}.theme-light .practice-card,.theme-light .practice-footer{background:#fff;box-shadow:0 1px 3px #0000000f}.theme-light input[type=number]{background:var(--color-bg-tertiary)}.theme-light .practice-select{background:var(--color-bg-tertiary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235a5f7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}.theme-light .practice-select:hover:not(:disabled){background-color:var(--color-surface-alt)}.theme-light .practice-select option{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.theme-light .practice-header-exit-btn{background:#f5f5f5;border-color:#e0e0e0}.theme-light .practice-header-exit-btn:hover{background:#ebebeb}.logo-wrapper{display:flex;align-items:center;gap:14px;justify-content:center}.logo-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.logo-image{display:block;height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}.logo-large .logo-icon{width:60px;height:72px}.logo-medium .logo-icon{width:45px;height:54px}.logo-small .logo-icon{width:30px;height:36px}.logo-text{font-family:var(--font-heading);font-weight:900;color:var(--color-accent);letter-spacing:3px;font-size:32px;line-height:1;text-shadow:0 0 15px var(--color-glow-strong),0 0 30px var(--color-glow);text-transform:uppercase}.logo-large .logo-text{font-size:32px;letter-spacing:.5px}.logo-medium .logo-text{font-size:24px;letter-spacing:.3px}.logo-small .logo-text{font-size:18px;letter-spacing:.2px}@media(max-width:768px){.logo-large .logo-icon{width:45px;height:54px}.logo-large .logo-text{font-size:24px}.logo-wrapper{gap:12px}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 50%,var(--color-bg-tertiary) 100%);padding:20px}.auth-container{background:var(--color-bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid var(--color-border);border-radius:var(--radius-xl);padding:40px;width:100%;max-width:450px;box-shadow:var(--shadow-card)}.auth-header{text-align:center;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;gap:16px}.auth-header .logo-wrapper{max-width:100%;width:100%;display:flex;justify-content:center}.auth-header .logo-icon{max-width:100%;width:auto;height:auto}.auth-header .logo-medium .logo-icon{width:80px;height:96px;max-width:100%}.auth-header p{color:var(--color-text-secondary);font-size:1.1rem;margin:0;font-weight:500;font-family:var(--font-primary);letter-spacing:var(--letter-spacing-normal)}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group label{color:var(--color-accent);font-size:.9rem;font-weight:600;font-family:var(--font-primary);letter-spacing:var(--letter-spacing-normal);text-transform:uppercase}.form-group input{padding:14px 16px;background:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:1rem;transition:var(--transition-normal);font-family:var(--font-primary)}.form-group input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft),0 0 15px var(--color-glow);background:var(--color-bg-card-hover)}.form-group input::placeholder{color:var(--color-text-muted)}.form-group input:disabled{opacity:.5;cursor:not-allowed}.nickname-input-wrapper{display:flex;gap:8px;align-items:stretch}.nickname-input-wrapper input{flex:1}.random-nickname-button{padding:14px 20px;background:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition-normal);font-family:var(--font-primary);text-transform:uppercase;letter-spacing:var(--letter-spacing-normal);white-space:nowrap;flex-shrink:0}.random-nickname-button:hover:not(:disabled){background:var(--color-bg-card-hover);border-color:var(--color-accent);color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}.random-nickname-button:active:not(:disabled){transform:scale(.98)}.random-nickname-button:disabled{opacity:.5;cursor:not-allowed}.form-hint{color:var(--color-text-muted);font-size:.75rem;font-family:var(--font-primary);margin-top:-4px;font-style:italic}.auth-button{padding:16px 24px;background:var(--gradient-primary);border:2px solid var(--color-accent);border-radius:var(--radius-md);color:var(--color-bg);font-size:1rem;font-weight:900;cursor:pointer;transition:var(--transition-normal);margin-top:10px;font-family:var(--font-heading);box-shadow:var(--shadow-button);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.auth-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button-hover);background:var(--gradient-primary)}.auth-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-md)}.auth-button:disabled{opacity:.6;cursor:not-allowed}.auth-footer{margin-top:24px;text-align:center;color:var(--color-text-secondary);font-family:var(--font-primary);letter-spacing:var(--letter-spacing-tight)}.link-button{background:none;border:none;color:var(--color-accent);cursor:pointer;font-weight:600;text-decoration:underline;font-family:var(--font-primary);transition:var(--transition-normal);letter-spacing:var(--letter-spacing-normal)}.link-button:hover{color:var(--color-accent);text-shadow:0 0 10px var(--color-glow-strong)}.error-message{background:#ff006e26;background:color-mix(in srgb,var(--color-error) 15%,var(--color-bg-card));border:2px solid var(--color-error);border-radius:var(--radius-md);padding:12px 16px;color:var(--color-text-primary);font-size:.9rem;margin-bottom:20px;font-weight:500;font-family:var(--font-primary);box-shadow:0 0 10px #ff006e4d;box-shadow:0 0 10px color-mix(in srgb,var(--color-error) 30%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 2px rgba(0,0,0,.3)}.waitlist-message{background:var(--color-bg-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;margin-bottom:20px;text-align:center;font-family:var(--font-primary);box-shadow:var(--shadow-card)}.waitlist-message h3{color:var(--color-accent);font-size:1.2rem;font-weight:700;margin:0 0 12px;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.waitlist-message p{color:var(--color-text-secondary);font-size:.95rem;margin:8px 0;line-height:1.6;letter-spacing:var(--letter-spacing-tight)}.waitlist-message.success{border-color:var(--color-border-active);background:var(--color-accent-soft)}.redirect-message{color:var(--color-accent)!important;font-weight:600;margin-top:12px!important;text-shadow:0 0 10px var(--color-glow-strong)}@media(max-width:768px){.auth-container{padding:30px 20px;max-width:100%}.auth-header .logo-medium .logo-icon{width:60px;height:72px}.auth-header{margin-bottom:20px;gap:12px}}@media(max-width:480px){.auth-container{padding:20px 15px}.auth-header .logo-medium .logo-icon{width:50px;height:60px}}.beta-invitation-card{background:linear-gradient(135deg,#ff6e0014,#ffa5000d,#ff6e0014);border:2px solid rgba(255,110,0,.3);border-radius:var(--radius-xl);padding:20px;position:relative;overflow:hidden;animation:betaCardGlow 3s ease-in-out infinite}.beta-invitation-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent 0%,rgba(255,110,0,.03) 50%,transparent 100%);pointer-events:none}@keyframes betaCardGlow{0%,to{border-color:#ff6e004d;box-shadow:0 0 15px #ff6e0014}50%{border-color:#ff6e0080;box-shadow:0 0 25px #ff6e0026}}.beta-card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.beta-card-icon{color:var(--color-accent);flex-shrink:0}.beta-card-title{color:var(--color-accent);font-size:.95rem;font-weight:700;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.beta-card-description{color:var(--color-text-secondary);font-size:.85rem;line-height:1.5;margin:0 0 14px;font-family:var(--font-primary)}.beta-code-input{width:100%;padding:14px 16px;background:var(--color-bg-card);border:2px solid rgba(255,110,0,.25);border-radius:var(--radius-md);color:var(--color-accent);font-size:1.15rem;font-family:Courier New,Fira Code,monospace;font-weight:700;letter-spacing:.2em;text-align:center;text-transform:uppercase;transition:var(--transition-normal);box-sizing:border-box}.beta-code-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft),0 0 20px #ff6e0033;background:var(--color-bg-card-hover)}.beta-code-input::placeholder{color:var(--color-text-muted);font-weight:500;letter-spacing:.15em;font-size:.95rem}.beta-code-input:disabled{opacity:.5;cursor:not-allowed}@media(max-width:480px){.beta-invitation-card{padding:16px}.beta-code-input{font-size:1rem;letter-spacing:.15em}}.stat-radar-chart{position:relative;width:100%;display:flex;justify-content:center;align-items:center}.stat-radar-svg{width:100%;height:auto;overflow:visible}.stat-radar-ring{fill:none;stroke:#ffffff12;stroke-width:1}.stat-radar-ring-outer{stroke:#ffffff21;stroke-width:1.5}.stat-radar-axis{stroke:#ffffff0f;stroke-width:.8}.stat-radar-value-polygon{stroke:#7c5cff8c;stroke-width:2;stroke-linejoin:round;transition:all .5s ease}.stat-radar-animated .stat-radar-value-polygon{animation:radarGrow .7s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}@keyframes radarGrow{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}.stat-radar-dot{transition:r .15s ease,stroke-width .15s ease}.stat-radar-dot-glow{transition:r .15s ease}.stat-radar-label{font-size:10px;font-weight:700;fill:var(--color-text, rgba(255, 255, 255, .82));letter-spacing:.01em;transition:fill .15s ease;-webkit-user-select:none;user-select:none;stroke:#000000d9;stroke-width:3px;paint-order:stroke fill}.stat-radar-label-hovered{fill:#fff}.stat-radar-value-text{font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:font-size .15s ease;-webkit-user-select:none;user-select:none;stroke:#000000d9;stroke-width:3px;paint-order:stroke fill}.stat-radar-value-hovered{font-size:15px}.stat-radar-tooltip{background:#101222f5;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 14px;min-width:180px;max-width:260px;z-index:100;pointer-events:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 20px #00000080;animation:ttFade .15s ease-out}.stat-radar-tooltip-header{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:4px}.stat-radar-tooltip-value{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}.stat-radar-tooltip-desc{font-size:11px;line-height:1.5;color:#ffffff80}@keyframes ttFade{0%{opacity:0;transform:translate(var(--tt-tx, -50%),var(--tt-ty, 0)) scale(.95)}to{opacity:1}}@media(max-width:480px){.stat-radar-label{font-size:9px}.stat-radar-value-text{font-size:11px}.stat-radar-tooltip{min-width:150px}}.theme-light .stat-radar-ring,.theme-vintage .stat-radar-ring,.theme-hello-kitty .stat-radar-ring,.theme-monochrome .stat-radar-ring,.theme-bear-pick .stat-radar-ring{stroke:#0000000a}.theme-light .stat-radar-ring-outer,.theme-vintage .stat-radar-ring-outer,.theme-hello-kitty .stat-radar-ring-outer,.theme-monochrome .stat-radar-ring-outer,.theme-bear-pick .stat-radar-ring-outer{stroke:#0000001a}.theme-light .stat-radar-axis,.theme-vintage .stat-radar-axis,.theme-hello-kitty .stat-radar-axis,.theme-monochrome .stat-radar-axis,.theme-bear-pick .stat-radar-axis{stroke:#0f172a0f}.theme-light .stat-radar-label,.theme-vintage .stat-radar-label,.theme-hello-kitty .stat-radar-label,.theme-monochrome .stat-radar-label,.theme-bear-pick .stat-radar-label,.theme-light .stat-radar-label-hovered,.theme-vintage .stat-radar-label-hovered,.theme-hello-kitty .stat-radar-label-hovered,.theme-monochrome .stat-radar-label-hovered,.theme-bear-pick .stat-radar-label-hovered{fill:var(--color-text-primary, #1a1d29)}.theme-light .stat-radar-tooltip,.theme-vintage .stat-radar-tooltip,.theme-hello-kitty .stat-radar-tooltip,.theme-monochrome .stat-radar-tooltip,.theme-bear-pick .stat-radar-tooltip{background:#fffffffa;border:1px solid rgba(15,23,42,.08);box-shadow:0 10px 30px #0f172a1f}.theme-light .stat-radar-tooltip-header,.theme-vintage .stat-radar-tooltip-header,.theme-hello-kitty .stat-radar-tooltip-header,.theme-monochrome .stat-radar-tooltip-header,.theme-bear-pick .stat-radar-tooltip-header{color:var(--color-text-primary, #1a1d29)}.theme-light .stat-radar-tooltip-desc,.theme-vintage .stat-radar-tooltip-desc,.theme-hello-kitty .stat-radar-tooltip-desc,.theme-monochrome .stat-radar-tooltip-desc,.theme-bear-pick .stat-radar-tooltip-desc{color:var(--color-text-secondary, #5a5f7a)}.fifa-card{width:100%;background:var(--color-surface, #1a1b2e);border:1px solid var(--color-border, rgba(255, 255, 255, .1));border-radius:16px;overflow:hidden;box-shadow:0 4px 20px #0000004d}.fifa-card-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,#7c5cff12,#ff6b350a);border-bottom:1px solid var(--color-border, rgba(255, 255, 255, .06))}.fifa-card-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.12);flex-shrink:0}.fifa-card-avatar img{width:100%;height:100%;object-fit:cover}.fifa-card-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c5cff,#ff6b35);color:#fff;font-size:17px;font-weight:800}.fifa-card-identity{flex:1;min-width:0}.fifa-card-name{font-size:14px;font-weight:700;color:var(--color-text, rgba(255, 255, 255, .9));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fifa-card-subtitle{font-size:10px;font-weight:500;color:var(--color-text-secondary, rgba(255, 255, 255, .4));text-transform:uppercase;letter-spacing:.08em;margin-top:1px}.fifa-card-overall-badge{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.fifa-card-overall-label{font-size:9px;font-weight:600;color:var(--color-text-secondary, rgba(255, 255, 255, .35));text-transform:uppercase;letter-spacing:.1em}.fifa-card-overall-value{font-size:32px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.25);letter-spacing:-.03em}.fifa-card-hero{padding:4px 0 0;margin-top:-50px;border-bottom:1px solid var(--color-border, rgba(255, 255, 255, .06))}.fifa-card-hero-layout{display:flex;align-items:stretch;min-height:0}.fifa-card-chart-area{flex:1;min-width:0;padding:0;margin-left:-20px;z-index:2;position:relative}.fifa-card-bear-area{width:180px;flex-shrink:0;position:relative;overflow:visible;display:flex;align-items:flex-end;z-index:1}.fifa-card-bear-img{width:200%;height:85%;object-fit:cover;object-position:top center;display:block;-webkit-user-select:none;user-select:none;margin-right:-40%;-webkit-user-drag:none}.fifa-card-bear-nav-external{display:flex;justify-content:center;gap:8px;margin-top:10px;margin-bottom:4px}.fifa-bear-nav-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#00000080;color:#fff;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .15s ease}.fifa-bear-nav-btn:hover{background:#000000b3;border-color:#fff6;transform:scale(1.08)}.fifa-card-section-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 6px}.fifa-card-section-title{font-size:10px;font-weight:700;color:var(--color-text-secondary, rgba(255, 255, 255, .4));letter-spacing:.14em;text-transform:uppercase}.fifa-card-info-btn{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:var(--color-text-secondary, rgba(255, 255, 255, .45));font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.fifa-card-info-btn:hover{background:#ffffff1a;color:var(--color-text, rgba(255, 255, 255, .8));border-color:#ffffff40}.fifa-card-technique-section{padding-bottom:12px}.fifa-card-technique-grid{display:flex;flex-direction:column;gap:1px;padding:0 16px}.fifa-tech-row{display:flex;align-items:center;gap:8px;height:32px;padding:0 6px;border-radius:6px;cursor:pointer;transition:background .18s ease;position:relative;outline:none}.fifa-tech-row:hover{background:#ffffff0a}.fifa-tech-row:focus-visible{box-shadow:0 0 0 2px #7c5cff80}.fifa-tech-value{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;min-width:24px;text-align:right}.fifa-tech-bar-container{flex:1;height:4px;background:#ffffff0f;border-radius:2px;overflow:hidden;transition:height .18s ease}.fifa-tech-row:hover .fifa-tech-bar-container{height:6px}.fifa-tech-bar-fill{height:100%;border-radius:2px;transition:width .5s cubic-bezier(.34,1.56,.64,1)}.fifa-tech-label{font-size:11px;font-weight:500;color:var(--color-text-secondary, rgba(255, 255, 255, .65));min-width:120px;transition:color .18s ease}.fifa-tech-row:hover .fifa-tech-label{color:var(--color-text, rgba(255, 255, 255, .9))}.fifa-tech-arrow{font-size:16px;font-weight:600;color:#fff3;opacity:0;transform:translate(-4px);transition:all .18s ease;flex-shrink:0}.fifa-tech-row:hover .fifa-tech-arrow{opacity:1;transform:translate(0);color:#ffffff80}.fifa-info-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;animation:modalOverlayFade .2s ease-out}.fifa-info-modal{width:100%;max-width:480px;max-height:80vh;background:var(--color-surface, #1a1b2e);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;box-shadow:0 16px 48px #00000080;animation:modalSlideUp .25s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column}.fifa-info-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08)}.fifa-info-modal-header h3{font-size:15px;font-weight:700;color:var(--color-text, rgba(255, 255, 255, .9));margin:0}.fifa-info-modal-close{width:28px;height:28px;border-radius:50%;border:none;background:#ffffff0f;color:#fff9;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.fifa-info-modal-close:hover{background:#ffffff1f;color:#fff}.fifa-info-modal-body{padding:16px 20px 24px;overflow-y:auto}.fifa-info-modal-body p{font-size:13px;line-height:1.65;color:var(--color-text-secondary, rgba(255, 255, 255, .6));margin:0 0 12px}.fifa-info-modal-body h4{font-size:13px;font-weight:700;color:var(--color-text, rgba(255, 255, 255, .85));margin:18px 0 6px}.fifa-info-modal-body h4:first-of-type{margin-top:4px}.fifa-info-modal-body ul{margin:0 0 12px;padding-left:18px}.fifa-info-modal-body li{font-size:12px;line-height:1.65;color:var(--color-text-secondary, rgba(255, 255, 255, .55));margin-bottom:3px}.fifa-info-modal-body li strong{color:var(--color-text, rgba(255, 255, 255, .8))}@keyframes modalOverlayFade{0%{opacity:0}to{opacity:1}}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:480px){.fifa-card-header{padding:12px}.fifa-card-avatar{width:34px;height:34px}.fifa-card-overall-value{font-size:26px}.fifa-card-technique-grid{padding:0 12px}.fifa-tech-label{min-width:90px;font-size:10px}.fifa-info-modal{max-width:100%;margin:0 8px}.fifa-card-bear-area{width:90px}}.practice-calendar{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--color-bg-tertiary);border-radius:12px;padding:12px}.practice-calendar-loading{display:flex;align-items:center;justify-content:center;min-height:280px}.calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.calendar-nav-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:var(--color-bg-card-hover);color:var(--color-text-secondary);border-radius:8px;cursor:pointer;transition:all .15s ease-out}.calendar-nav-btn:hover:not(:disabled){background:var(--color-accent-soft);color:var(--color-accent)}.calendar-nav-btn:disabled{opacity:.3;cursor:not-allowed}.calendar-month-title{display:flex;align-items:center;gap:12px;margin-left:10px}.month-name{font-size:16px;font-weight:700;color:var(--color-text-primary);text-transform:capitalize}.calendar-today-btn{font-size:11px;font-weight:600;padding:4px 10px;border:none;background:var(--color-accent);color:#fff;border-radius:6px;cursor:pointer;transition:all .15s ease-out}.calendar-today-btn:hover{background:var(--color-accent-hover, #0d9668);transform:translateY(-1px)}.calendar-month-stats{display:flex;align-items:center;gap:12px;margin-left:auto;margin-right:10px}.month-stat{display:flex;align-items:center;gap:4px;padding:4px 10px;background:var(--color-bg-card);border-radius:8px;border:1px solid var(--color-border-muted)}.month-stat svg{color:var(--color-accent)}.month-stat .stat-label{font-size:10px;font-weight:500;color:var(--color-text-muted);text-transform:uppercase}.month-stat .stat-value{font-size:13px;font-weight:700;color:var(--color-accent)}.month-stat.avg{background:var(--color-bg-secondary)}.month-stat.avg .stat-value{color:var(--color-text-primary)}.calendar-header{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.calendar-day-label{text-align:center;font-size:10px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em;padding:4px 0}.calendar-day-label.weekend{color:var(--color-text-muted);opacity:.7}.calendar-grid{display:flex;flex-direction:column;gap:4px}.calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-day{aspect-ratio:1;min-height:32px;border:1px solid var(--color-border-muted);border-radius:6px;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all .15s ease-out;font-family:var(--font-body);padding:2px;background:var(--color-bg-card)}.calendar-day:disabled{cursor:default}.calendar-day:not(:disabled):hover{transform:scale(1.05);z-index:10;box-shadow:0 4px 16px #00000026;border-color:var(--color-accent)}.calendar-day:not(:disabled):active{transform:scale(1.02)}.day-number{font-size:12px;font-weight:600;color:var(--color-text-primary);line-height:1}.day-minutes{display:flex;align-items:center;gap:2px;font-size:9px;font-weight:700;opacity:1;font-size:11px}.day-minutes svg{opacity:.8}.day-minutes.status-zero{color:var(--color-error, #ef4444)}.day-minutes.status-low{color:var(--color-warning, #f97316)}.day-minutes.status-partial{color:#eab308}.day-minutes.status-goal{color:var(--color-success, #22c55e)}.day-minutes.status-exceeded{color:var(--color-accent, #10b981)}.calendar-day.other-month{background:var(--color-bg-secondary);opacity:.6}.calendar-day.other-month .day-number{color:var(--color-text-muted)}.calendar-day.is-future{opacity:.4;cursor:default}.calendar-day.is-future .day-number{color:var(--color-text-muted)}.calendar-day.is-today{border-color:var(--color-accent);border-width:2px;box-shadow:0 0 0 2px var(--color-accent-soft)}.calendar-day.is-today .day-number{color:var(--color-accent);font-weight:700}.day-status-dot{width:8px;height:8px;border-radius:50%;transition:all .15s ease-out}.day-status-dot.status-zero{background:var(--color-error, #ef4444);box-shadow:0 0 4px var(--color-error, #ef4444)}.day-status-dot.status-low{background:var(--color-warning, #f97316);box-shadow:0 0 4px var(--color-warning, #f97316)}.day-status-dot.status-partial{background:#eab308;box-shadow:0 0 4px #eab308}.day-status-dot.status-goal{background:var(--color-success, #22c55e);box-shadow:0 0 4px var(--color-success, #22c55e)}.day-status-dot.status-exceeded{background:var(--color-accent, #10b981);box-shadow:0 0 8px var(--color-accent, #10b981),0 0 12px var(--color-accent, #10b981);animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}.calendar-legend{display:flex;justify-content:center;gap:16px;padding-top:12px;border-top:1px solid var(--color-border-muted);margin-top:8px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px}.legend-dot{width:10px;height:10px;border-radius:50%}.legend-dot.status-zero{background:var(--color-error, #ef4444)}.legend-dot.status-low{background:var(--color-warning, #f97316)}.legend-dot.status-partial{background:#eab308}.legend-dot.status-goal{background:var(--color-success, #22c55e)}.legend-dot.status-exceeded{background:var(--color-accent, #10b981)}.legend-label{font-size:11px;color:var(--color-text-muted);font-weight:500}.calendar-popup{position:fixed;z-index:9999;background:var(--color-bg-tertiary);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 20px 60px #0006,0 4px 16px #0003,inset 0 1px #ffffff0d;width:320px;max-width:calc(100vw - 20px);animation:popup-appear .2s cubic-bezier(.16,1,.3,1);overflow:hidden;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}@keyframes popup-appear{0%{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.popup-accent-bar{height:3px;background:linear-gradient(90deg,var(--color-accent),#f59e0b,var(--color-accent));background-size:200% 100%;animation:accent-slide 3s linear infinite}@keyframes accent-slide{0%{background-position:100% 0}to{background-position:-100% 0}}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 10px}.popup-date{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--color-text-primary)}.popup-date-icon{font-size:16px}.popup-close{width:28px;height:28px;border:none;background:#ffffff0f;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .15s ease-out}.popup-close:hover{background:#ffffff1f;color:var(--color-text-primary);transform:scale(1.1)}.popup-total{display:flex;align-items:center;gap:8px;padding:10px 16px 12px;margin:0 12px;font-size:13px;color:var(--color-text-secondary);border-bottom:1px solid rgba(255,255,255,.06)}.popup-total svg{color:var(--color-accent)}.popup-total strong{color:var(--color-accent);font-weight:700;font-size:14px}.popup-lessons{display:flex;flex-direction:column;max-height:260px;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.popup-lessons::-webkit-scrollbar{width:4px}.popup-lessons::-webkit-scrollbar-track{background:transparent}.popup-lessons::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:4px}.popup-lesson-item{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;margin:0 6px;border:none;background:transparent;width:calc(100% - 12px);transition:all .15s ease-out;border-radius:10px;text-align:left;animation:lesson-slide-in .2s ease-out both}@keyframes lesson-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.popup-lesson-item:hover{background:#ffffff0f}.popup-lesson-info{display:flex;align-items:flex-start;gap:10px;color:var(--color-text-muted);flex:1;min-width:0}.popup-lesson-info svg{flex-shrink:0;color:var(--color-accent);opacity:.7;margin-top:2px}.popup-lesson-details{display:flex;flex-direction:column;gap:2px;min-width:0}.popup-pathway-name{font-size:11px;font-weight:600;color:var(--color-accent);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s ease-out;opacity:.85}.popup-pathway-name:hover{opacity:1;text-decoration:underline}.popup-lesson-name{font-size:13px;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:all .15s ease-out}.popup-lesson-name:hover{color:var(--color-accent);text-decoration:underline}.popup-lesson-time{font-size:12px;font-weight:700;color:var(--color-accent);white-space:nowrap;margin-left:12px;padding:3px 8px;background:var(--color-accent-soft, rgba(16, 185, 129, .12));border-radius:6px}.popup-empty{padding:24px 16px;text-align:center;font-size:13px;color:var(--color-text-muted);line-height:1.5}@media(max-width:600px){.practice-calendar{padding:10px}.calendar-nav{flex-wrap:wrap;gap:8px}.calendar-day{min-height:32px;border-radius:6px;padding:2px}.calendar-day-label{font-size:9px;padding:3px 0}.day-number{font-size:11px}.day-status-dot{width:5px;height:5px}.calendar-legend{gap:8px;padding-top:8px}.legend-dot{width:7px;height:7px}.legend-label{font-size:9px}.calendar-popup{width:calc(100vw - 20px);max-width:320px}.month-name{font-size:13px}.calendar-month-stats{gap:6px}.month-stat{padding:3px 6px}.month-stat .stat-value{font-size:10px}.month-stat .stat-label{font-size:8px}.day-minutes{font-size:7px}.day-minutes svg{width:8px;height:8px}}@media(max-width:400px){.calendar-day{min-height:32px;border-radius:6px;padding:2px}.day-number{font-size:11px}.day-status-dot{width:5px;height:5px}.day-minutes{display:none}.calendar-month-stats{gap:6px}.month-stat{padding:2px 6px}.month-stat .stat-value{font-size:10px}.month-stat.avg .stat-label{display:none}}.achievement-badge{display:flex;gap:1rem;padding:1rem;background:var(--badge-bg);border:1px solid var(--badge-border);border-radius:12px;cursor:pointer;transition:all .3s ease;position:relative}.achievement-badge:hover{box-shadow:0 8px 25px var(--badge-glow)}.achievement-badge--earned{position:relative}.achievement-badge--earned:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:13px;padding:1px;background:linear-gradient(135deg,var(--badge-border),transparent);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:xor}.achievement-badge--locked{opacity:.75;background:var(--color-bg-tertiary, #1a1a1a);border-color:var(--color-border-muted, #333);filter:grayscale(1)}.achievement-badge--common{--glow-color: var(--color-text-secondary)}.achievement-badge--rare{--glow-color: var(--color-primary)}.achievement-badge--epic{--glow-color: var(--color-purple-500)}.achievement-badge--legendary{--glow-color: var(--color-accent)}.achievement-badge:not(.achievement-badge--locked):hover{box-shadow:0 4px 12px #0003,0 0 0 1px var(--glow-color, var(--color-primary))}.achievement-badge--legendary.achievement-badge--earned{animation:legendary-glow 3s ease infinite}@keyframes legendary-glow{0%,to{box-shadow:0 0 15px #fbbf2433}50%{box-shadow:0 0 25px #fbbf2466}}.achievement-badge__icon{font-size:2rem;margin-bottom:.5rem;position:relative;transition:transform .2s ease;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border-radius:12px;flex-shrink:0}.achievement-badge__icon--locked{opacity:.5}.achievement-badge__emoji{font-size:2rem}.achievement-badge__lock{position:absolute;bottom:-4px;right:-4px;font-size:.9rem}.achievement-badge__content{flex:1;min-width:0}.achievement-badge__header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.25rem}.achievement-badge__name{margin:0;font-size:.95rem;font-weight:600;color:var(--color-text-primary, #fff)}.achievement-badge--locked .achievement-badge__name{color:var(--color-text-secondary, #a0a0a0)}.achievement-badge__rarity{font-size:.65rem;padding:.15rem .4rem;border-radius:4px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.achievement-badge__rarity--common{background:#9ca3af33;color:#9ca3af}.achievement-badge__rarity--rare{background:#3b82f633;color:#60a5fa}.achievement-badge__rarity--epic{background:#a855f733;color:#a78bfa}.achievement-badge__rarity--legendary{background:#fbbf2433;color:#fbbf24}.achievement-badge__description{margin:0 0 .5rem;font-size:.8rem;color:#8b8b8b;line-height:1.4}.achievement-badge__progress{display:flex;align-items:center;gap:.5rem}.achievement-badge__progress-bar{flex:1;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.achievement-badge__progress-fill{height:100%;background:linear-gradient(90deg,var(--badge-border),var(--badge-glow));border-radius:2px;transition:width .3s ease}.achievement-badge__progress-text{font-size:.7rem;color:#6b6b6b;min-width:32px;text-align:right}.achievement-badge__earned-info{font-size:.75rem;color:#22c55e}.achievement-badge__reward{display:inline-block;margin-top:.25rem;font-size:.7rem;padding:.15rem .4rem;background:#a855f726;color:#a78bfa;border-radius:4px;font-weight:600}.achievement-badge--small{padding:.5rem;gap:.5rem;flex-direction:column;align-items:center;text-align:center}.achievement-badge--small:hover{transform:none}.achievement-badge--small .achievement-badge__icon{width:32px;height:32px;border-radius:8px}.achievement-badge--small .achievement-badge__emoji{font-size:1.25rem}.achievement-badge--small .achievement-badge__name{font-size:.7rem;line-height:1.2}.achievement-badge--small .achievement-badge__description,.achievement-badge--small .achievement-badge__progress{display:none}.achievement-badge--small .achievement-badge__header{flex-direction:column;gap:.25rem;align-items:center}.achievement-badge--small .achievement-badge__rarity{font-size:.55rem;padding:.1rem .25rem}.achievement-badge--small .achievement-badge__earned-info{font-size:.6rem}.achievement-badge--small .achievement-badge__reward{font-size:.6rem;padding:.1rem .3rem;margin-top:.15rem}.achievement-badge__tooltip{z-index:10000;pointer-events:none;opacity:0;transition:opacity .2s ease}.achievement-badge__tooltip--visible{opacity:1}.achievement-badge__tooltip-inner{background:var(--color-bg-secondary, #0f172a);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;box-shadow:0 20px 50px #0009,0 0 1px #ffffff1a;position:relative}.achievement-badge__tooltip-arrow--bottom:after{content:"";position:absolute;bottom:-7px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background:var(--color-bg-secondary, #0f172a);border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}.achievement-badge__tooltip-arrow--top:after{content:"";position:absolute;top:-7px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background:var(--color-bg-secondary, #0f172a);border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12)}.achievement-badge__tooltip-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.achievement-badge__tooltip-icon{font-size:1.6rem;filter:none;flex-shrink:0}.achievement-badge__tooltip-name{font-size:.88rem;font-weight:700;color:var(--color-text-primary, #fff);line-height:1.3;margin-bottom:3px}.achievement-badge__tooltip-rarity{font-size:.6rem;padding:.1rem .35rem;border-radius:4px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.achievement-badge__tooltip-desc{margin:0 0 12px;font-size:.78rem;color:var(--color-text-secondary, #94a3b8);line-height:1.5}.achievement-badge__tooltip-progress{display:flex;align-items:center;gap:10px;margin-bottom:8px}.achievement-badge__tooltip-progress-bar{flex:1;height:6px;background:#ffffff14;border-radius:3px;overflow:hidden}.achievement-badge__tooltip-progress-fill{height:100%;border-radius:3px;transition:width .3s ease}.achievement-badge__tooltip-progress-text{font-size:.72rem;color:var(--color-text-secondary, #94a3b8);font-weight:600;min-width:44px;text-align:right;white-space:nowrap}.achievement-badge__tooltip-earned{font-size:.78rem;color:#22c55e;font-weight:500;margin-bottom:4px}.achievement-badge__tooltip-xp{font-size:.72rem;color:#a78bfa;font-weight:600}.achievement-badge--large{padding:1.5rem;gap:1.25rem}.achievement-badge--large .achievement-badge__icon{width:72px;height:72px}.achievement-badge--large .achievement-badge__emoji{font-size:2.5rem}.achievement-badge--large .achievement-badge__name{font-size:1.1rem}.mini-radar-chart{position:relative;width:100%;max-width:360px;margin:0 auto;display:flex;justify-content:center;align-items:center}.mini-radar-svg{width:100%;height:auto}.mini-radar-ring{fill:none;stroke:#ffffff12;stroke-width:1}.mini-radar-ring-outer{stroke:#ffffff21;stroke-width:1.5}.mini-radar-axis{stroke:#ffffff0f;stroke-width:.8}.mini-radar-value-polygon{stroke:#7c5cff8c;stroke-width:1.5;stroke-linejoin:round}.mini-radar-label{font-size:9px;font-weight:700;fill:var(--color-text, rgba(255, 255, 255, .82));letter-spacing:.01em;-webkit-user-select:none;user-select:none;stroke:#000000d9;stroke-width:3px;paint-order:stroke fill}.mini-radar-value-text{font-size:11px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;-webkit-user-select:none;user-select:none;stroke:#000000d9;stroke-width:3px;paint-order:stroke fill}.theme-light .mini-radar-ring,.theme-vintage .mini-radar-ring,.theme-hello-kitty .mini-radar-ring,.theme-monochrome .mini-radar-ring,.theme-bear-pick .mini-radar-ring{stroke:#0000000a}.theme-light .mini-radar-ring-outer,.theme-vintage .mini-radar-ring-outer,.theme-hello-kitty .mini-radar-ring-outer,.theme-monochrome .mini-radar-ring-outer,.theme-bear-pick .mini-radar-ring-outer{stroke:#0000001a}.theme-light .mini-radar-axis,.theme-vintage .mini-radar-axis,.theme-hello-kitty .mini-radar-axis,.theme-monochrome .mini-radar-axis,.theme-bear-pick .mini-radar-axis{stroke:#0f172a0f}.theme-light .mini-radar-label,.theme-vintage .mini-radar-label,.theme-hello-kitty .mini-radar-label,.theme-monochrome .mini-radar-label,.theme-bear-pick .mini-radar-label{fill:var(--color-text-primary, #1a1d29)}.user-stats-popup{position:fixed;z-index:10000;width:380px;background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:gb-popup-in .2s var(--gb-ease-spring);font-family:var(--font-primary)}.user-stats-popup-header{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;background:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border-muted)}.user-stats-popup-avatar{width:36px;height:36px;min-width:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;text-transform:uppercase;box-shadow:0 2px 6px #00000040;overflow:hidden}.user-stats-popup-avatar-img{width:100%;height:100%;object-fit:cover;display:block}.user-stats-popup-name{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.user-stats-popup-nickname{font-size:14px;font-weight:700;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-stats-popup-overall{display:flex;align-items:center;gap:6px}.user-stats-popup-overall-label{font-size:11px;font-weight:500;color:var(--color-text-muted);letter-spacing:.3px}.user-stats-popup-overall-value{font-size:14px;font-weight:800;letter-spacing:-.5px}.user-stats-popup-close{background:none;border:none;color:var(--color-text-muted);font-size:14px;cursor:pointer;padding:4px;border-radius:4px;transition:color .15s,background .15s}.user-stats-popup-close:hover{color:var(--color-text-primary);background:var(--color-accent-soft)}.user-stats-popup-social{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--color-border-muted, rgba(255,255,255,.06));flex-wrap:wrap}.user-stats-popup-social-link{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:14px;font-size:11px;font-weight:500;text-decoration:none;transition:all .15s;border:1px solid transparent}.user-stats-popup-social-link.instagram{background:#e1306c1a;color:#e1306c;border-color:#e1306c26}.user-stats-popup-social-link.instagram:hover{background:#e1306c33}.user-stats-popup-social-link.youtube{background:#ff000014;color:#f44;border-color:#ff000026}.user-stats-popup-social-link.youtube:hover{background:#ff00002e}.user-stats-popup-social-link span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-stats-popup-streaks{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--color-border-muted, rgba(255,255,255,.06))}.user-stats-popup-streak-item{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px}.user-stats-popup-streak-item:first-child{border-right:1px solid var(--color-border-muted, rgba(255,255,255,.06))}.user-stats-popup-streak-item .streak-icon{font-size:16px;line-height:1}.user-stats-popup-streak-item .streak-value{font-size:18px;font-weight:800;color:var(--color-text-primary);font-family:Inter,system-ui,sans-serif;line-height:1}.user-stats-popup-streak-item .streak-label{font-size:10px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}.user-stats-popup-body{padding:0 4px 4px}.user-stats-popup-loading{display:flex;align-items:center;justify-content:center;padding:60px 0}.user-stats-popup-spinner{width:24px;height:24px;border:2px solid var(--color-border-muted);border-top-color:var(--color-accent);border-radius:50%;animation:stats-popup-spin .6s linear infinite}@keyframes stats-popup-spin{to{transform:rotate(360deg)}}.user-stats-popup-error{text-align:center;padding:40px 0;font-size:12px;color:var(--color-text-muted)}.user-stats-popup-radar{width:100%;padding:8px 0}@media(max-width:480px){.user-stats-popup{width:320px}}.user-stats-popup-profile-link{display:block;width:100%;padding:10px 0;text-align:center;font-size:13px;font-weight:600;color:var(--brand-orange, #FF6B00);background:none;border:none;border-top:1px solid var(--color-border-muted, rgba(255,255,255,.06));cursor:pointer;transition:background .15s,color .15s}.user-stats-popup-profile-link:hover{background:#ff6b0014;color:#ff8533}.profile-leaderboard{border-radius:1rem}.lb-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem}.lb-title-row{display:flex;align-items:center;gap:.4rem}.lb-trophy-icon{color:#f97316}.lb-toggle{display:flex;background:#ffffff0a;border-radius:.5rem;padding:2px;border:1px solid rgba(255,255,255,.06)}.lb-toggle-btn{padding:.32rem .75rem;border:none;border-radius:.4rem;font-size:.72rem;font-weight:600;background:transparent;color:#ffffff59;cursor:pointer;transition:all .2s ease;font-family:inherit}.lb-toggle-btn.active{background:#f9731626;color:#f97316}.lb-toggle-btn:hover:not(.active){color:#ffffff8c}.lb-list{display:flex;flex-direction:column;gap:1px}.lb-row{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:.6rem;transition:background .15s ease;-webkit-user-select:none;user-select:none}.lb-row:hover:not(.lb-you):not(.lb-skeleton){background:#ffffff0a}.lb-row.lb-top1{background:linear-gradient(90deg,rgba(255,215,0,.07) 0%,transparent 70%)}.lb-row.lb-top2{background:linear-gradient(90deg,rgba(192,192,192,.05) 0%,transparent 70%)}.lb-row.lb-top3{background:linear-gradient(90deg,rgba(205,127,50,.05) 0%,transparent 70%)}.lb-row.lb-you{background:#f9731614;border:1px solid rgba(249,115,22,.18)}.lb-row.lb-you:hover{background:#f973161f}.lb-row.lb-you-bottom{margin-top:0}.lb-rank-cell{min-width:28px;display:flex;align-items:center;justify-content:center}.lb-medal{font-size:1.1rem;line-height:1}.lb-rank-num{font-size:.8rem;font-weight:700;color:#ffffff59;font-variant-numeric:tabular-nums}.lb-row.lb-you .lb-rank-num{color:#f97316}.lb-nickname{flex:1;font-size:.85rem;font-weight:500;color:#ffffffb3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.4rem}.lb-row.lb-top1 .lb-nickname{color:#fffffff2;font-weight:700}.lb-row.lb-top2 .lb-nickname{color:#ffffffe0;font-weight:600}.lb-row.lb-top3 .lb-nickname{color:#ffffffd9;font-weight:600}.lb-row.lb-you .lb-nickname{color:#fff;font-weight:700}.lb-you-badge{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.12rem .4rem;border-radius:100px;background:#f9731633;color:#f97316;flex-shrink:0;line-height:1.3}.lb-time-cell{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:#ffffff59;font-weight:500;flex-shrink:0;font-variant-numeric:tabular-nums}.lb-row.lb-top1 .lb-time-cell{color:#ffd700b3}.lb-row.lb-you .lb-time-cell{color:#fb923c;font-weight:600}.lb-separator{display:flex;align-items:center;justify-content:center;padding:.25rem 0;color:#ffffff26;font-size:1rem;letter-spacing:.3em;-webkit-user-select:none;user-select:none}.lb-empty{text-align:center;padding:2rem 0;font-size:.82rem;color:#fff3}.lb-skeleton{pointer-events:none}.lb-skel-rank{width:24px;height:16px;background:#ffffff0f;border-radius:4px;animation:lb-pulse 1.5s ease-in-out infinite}.lb-skel-name{flex:1;height:14px;background:#ffffff0f;border-radius:4px;animation:lb-pulse 1.5s ease-in-out infinite;animation-delay:.1s}.lb-skel-time{width:52px;height:14px;background:#ffffff0f;border-radius:4px;animation:lb-pulse 1.5s ease-in-out infinite;animation-delay:.2s}@keyframes lb-pulse{0%,to{opacity:.4}50%{opacity:.8}}@media(max-width:500px){.lb-row{padding:.5rem .55rem;gap:.45rem}.lb-nickname{font-size:.8rem}.lb-time-cell{font-size:.72rem}}.profile-page-container{min-height:100vh;background:var(--color-bg);padding:0;position:relative;color:var(--color-text-primary);overflow-x:hidden}.profile-mobile-techniques-btn{display:none}@media(max-width:768px){.profile-mobile-techniques-btn{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 4px;padding:14px 16px;border:1px solid rgba(var(--color-accent-rgb, 255, 165, 0),.25);border-radius:12px;background:rgba(var(--color-accent-rgb, 255, 165, 0),.08);color:var(--color-accent);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;position:relative;z-index:1}.profile-mobile-techniques-btn span{flex:1;text-align:left}.profile-mobile-techniques-btn:active{background:rgba(var(--color-accent-rgb, 255, 165, 0),.16);transform:scale(.98)}}.profile-page-container:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 80% 50% at 20% 0%,var(--color-accent-soft) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 100%,var(--color-glow-subtle) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 50% 50%,var(--color-glow) 0%,transparent 40%);pointer-events:none;z-index:0;animation:profileBgPulse 15s ease-in-out infinite}@keyframes profileBgPulse{0%,to{opacity:.8}50%{opacity:.5}}.profile-header{background:var(--app-header-bg, rgba(0, 0, 0, .45));border-bottom:1px solid var(--color-border-muted);padding:20px 28px;position:sticky;top:0;z-index:1000;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.profile-header-inner{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:32px;max-width:1300px;margin:0 auto}.profile-header-inner.minimal{grid-template-columns:1fr auto}.profile-header-left{display:flex;align-items:center;gap:16px}.profile-header-logo{height:44px;width:auto;object-fit:contain;flex-shrink:0;cursor:pointer;transition:all .2s ease;opacity:.9}.profile-header-logo:hover{opacity:1;transform:scale(1.05)}.profile-header-title-section{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--color-accent);padding-left:16px}.profile-header-eyebrow{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--color-text-muted)}.profile-header-title{font-family:var(--font-heading);font-size:16px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent);margin:0;line-height:1.2;text-shadow:0 0 20px var(--color-glow-subtle)}.profile-header-brand{font-family:var(--font-heading);font-size:15px;font-weight:800;letter-spacing:.06em;line-height:1;margin-top:2px}.brand-guitar{color:var(--color-accent)}.brand-bear{color:var(--color-text-muted)}.header-back-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--color-text-muted);cursor:pointer;transition:all .18s ease-out;flex-shrink:0}.header-back-btn:hover{background:#ffffff14;border-color:var(--color-accent);color:var(--color-accent);transform:translate(-2px)}.header-back-btn:active{transform:translate(-4px) scale(.95)}.profile-header-eyebrow--prominent{font-size:16px;font-weight:700;letter-spacing:.12em;color:var(--color-accent);text-shadow:0 0 20px var(--color-glow-subtle)}.profile-header-title-section.has-back{flex-direction:row;align-items:center;gap:10px;border-left-color:rgba(var(--color-accent-rgb, 255, 165, 0),.35)}.profile-header-center{display:flex}.profile-header-right{display:flex;align-items:center;justify-content:flex-end;gap:4px;position:relative}.profile-header-exit-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;cursor:pointer;color:var(--color-text-muted, rgba(255,255,255,.45));transition:background .15s,color .15s;padding:0}.profile-header-exit-btn:hover{background:#ffffff14;color:var(--color-text-primary, #fff)}.header-profile-wrapper{position:relative}.header-profile-trigger{display:flex;align-items:center;gap:12px;padding:6px 12px 6px 6px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:12px;cursor:pointer;transition:all .16s ease-out;color:var(--color-text-primary);font-family:var(--font-body);font-size:14px;font-weight:600}.header-profile-trigger:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-hover);transform:translateY(-1px)}.header-profile-trigger:active{transform:translateY(0)}.header-profile-avatar{width:32px;height:32px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--color-surface);border:2px solid var(--color-border-muted)}.header-profile-avatar img{width:100%;height:100%;object-fit:cover}.header-profile-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:#fff;font-size:14px;font-weight:700;font-family:var(--font-heading)}.header-profile-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-profile-chevron{flex-shrink:0;transition:transform .16s ease-out;color:var(--color-text-muted)}.header-profile-trigger:hover .header-profile-chevron{color:var(--color-text-primary)}.header-profile-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:12px;box-shadow:0 4px 12px #00000026;padding:8px;z-index:1000;animation:dropdown-appear .15s ease-out}@keyframes dropdown-appear{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.header-profile-dropdown-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:8px;color:var(--color-text-primary);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:all .12s ease-out;text-align:left}.header-profile-dropdown-item:hover:not(:disabled){background:var(--color-bg-tertiary);color:var(--color-accent)}.header-profile-dropdown-item:disabled{opacity:.5;cursor:not-allowed}.header-profile-dropdown-item.logout{color:var(--color-error, #ef4444)}.header-profile-dropdown-item.logout:hover{background:#ef44441a;color:var(--color-error, #ef4444)}.header-profile-dropdown-item svg{flex-shrink:0}.header-profile-dropdown-divider{height:1px;background:var(--color-border-muted);margin:4px 8px}.header-profile-dropdown-theme{display:flex;flex-direction:column}.header-theme-chevron{margin-left:auto;opacity:.5;transition:transform .2s ease}.header-theme-chevron.open{transform:rotate(180deg)}.header-theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px 8px 8px}.header-theme-option{padding:6px 10px;background:transparent;border:1px solid transparent;border-radius:6px;font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--color-text-muted);cursor:pointer;transition:all .12s ease-out;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-theme-option:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.header-theme-option.active{background:rgba(var(--color-accent-rgb, 255, 165, 0),.12);color:var(--color-accent);border-color:var(--color-accent);font-weight:600}.header-lang-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px}.header-lang-icon{color:var(--color-text-muted);flex-shrink:0}.header-lang-btn{flex:1;padding:5px 8px;background:transparent;border:1px solid var(--color-border-muted);border-radius:6px;font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--color-text-muted);cursor:pointer;transition:all .12s ease-out;text-align:center}.header-lang-btn:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.header-lang-btn.active{background:rgba(var(--color-accent-rgb, 255, 165, 0),.12);color:var(--color-accent);border-color:var(--color-accent);font-weight:600}.header-tuner-wrapper{position:relative}.header-tuner-popup{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%);width:220px;padding:12px 14px;background:var(--color-bg-card);border:1px solid var(--color-border-default);border-radius:var(--radius-lg, 12px);box-shadow:0 12px 40px #0000004d,0 0 0 1px #ffffff0a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden;z-index:1001;animation:tunerPopupIn .18s ease-out}@keyframes tunerPopupIn{0%{opacity:0;transform:translate(-50%) translateY(-6px) scale(.96)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.header-tuner-close{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;color:var(--color-text-muted);cursor:pointer;transition:all .12s ease-out}.header-tuner-close:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.header-tuner-error{text-align:center;font-size:12px;color:var(--color-error, #ef4444);padding-bottom:8px}.header-tuner-note-area{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60px;padding-bottom:4px}.header-tuner-note{font-size:40px;font-weight:700;font-family:var(--font-display, var(--font-body));line-height:1;transition:color .15s ease}.header-tuner-note--inactive{color:var(--color-text-muted);font-size:30px}.header-tuner-hint{font-size:12px;color:var(--color-text-muted);margin-top:4px;animation:headerTunerPulse 1.5s ease-in-out infinite}@keyframes headerTunerPulse{0%,to{opacity:.5}50%{opacity:1}}.header-tuner-string-label{font-size:11px;color:var(--color-text-muted);margin-top:2px}.header-tuner-freq{text-align:center;font-size:12px;color:var(--color-text-muted);font-family:var(--font-mono, monospace);padding-bottom:8px}.header-tuner-cents{padding:0 8px 8px}.header-tuner-cents-bar{position:relative;height:6px;background:var(--color-bg-tertiary);border-radius:3px;margin-bottom:4px;overflow:visible}.header-tuner-cents-center{position:absolute;left:50%;top:-1px;width:2px;height:8px;background:var(--color-success, #22c55e);transform:translate(-50%);border-radius:1px}.header-tuner-cents-indicator{position:absolute;top:50%;width:10px;height:10px;background:var(--color-accent);border-radius:50%;transform:translate(-50%,-50%);transition:left .1s ease-out,background .2s ease;box-shadow:0 0 6px var(--color-accent)}.header-tuner-cents-indicator.tuning-perfect{background:var(--color-success, #22c55e);box-shadow:0 0 10px var(--color-success, #22c55e)}.header-tuner-cents-indicator.tuning-good{background:var(--color-success-light, #4ade80);box-shadow:0 0 8px var(--color-success-light, #4ade80)}.header-tuner-cents-indicator.tuning-fair{background:var(--color-warning, #f59e0b);box-shadow:0 0 6px var(--color-warning, #f59e0b)}.header-tuner-cents-indicator.tuning-poor{background:var(--color-error, #ef4444);box-shadow:0 0 6px var(--color-error, #ef4444)}.header-tuner-cents-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--color-text-muted);font-family:var(--font-mono, monospace)}.header-tuner-note.tuning-perfect{color:var(--color-success, #22c55e)!important}.header-tuner-note.tuning-good{color:var(--color-success-light, #4ade80)!important}.header-tuner-note.tuning-fair{color:var(--color-warning, #f59e0b)!important}.header-tuner-note.tuning-poor{color:var(--color-error, #ef4444)!important}.header-tuner-strings{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:8px 4px 0;border-top:1px solid var(--color-border-muted)}.header-tuner-string-item{display:flex;flex-direction:column;align-items:center;padding:4px 0;border-radius:4px;transition:all .12s ease}.header-tuner-string-item.active{background:rgba(var(--color-accent-rgb, 255, 165, 0),.12)}.header-tuner-string-name{font-size:11px;font-weight:600;color:var(--color-text-primary)}.header-tuner-string-item.active .header-tuner-string-name{color:var(--color-accent)}.header-tuner-string-hz{font-size:8px;color:var(--color-text-muted);font-family:var(--font-mono, monospace)}.header-nav{display:flex;align-items:center;justify-content:center;gap:2px}.header-nav-item{display:flex;align-items:center;gap:7px;padding:9px 18px;background:transparent;border:none;border-radius:10px;color:var(--color-text-muted);font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:all .18s ease-out;white-space:nowrap;position:relative}.header-nav-item svg{opacity:.55;transition:opacity .18s ease-out}.header-nav-item:hover{color:var(--color-text-primary);background:var(--color-bg-tertiary)}.header-nav-item:hover svg{opacity:1}.header-nav-item.active{color:var(--color-accent);background:rgba(var(--color-accent-rgb, 255, 165, 0),.07)}.header-nav-item.active svg{opacity:1;color:var(--color-accent)}.header-nav-item.active:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:55%;height:2px;background:var(--color-accent);border-radius:1px;box-shadow:0 0 8px var(--color-glow-strong, rgba(255, 165, 0, .35))}.header-tools-group{display:flex;align-items:center;gap:2px;margin-right:8px;padding-right:12px;border-right:1px solid var(--color-border, rgba(255, 255, 255, .08))}.header-tool-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;border-radius:8px;background:transparent;color:var(--color-text-muted);cursor:pointer;transition:all .18s ease-out;position:relative}.header-tool-btn svg{opacity:.55;transition:all .18s ease-out}.header-tool-btn:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.header-tool-btn:hover svg{opacity:1}.header-tool-btn.active{background:rgba(var(--color-accent-rgb, 255, 165, 0),.1);color:var(--color-accent)}.header-tool-btn.active svg{opacity:1;color:var(--color-accent)}.header-nav-chevron{flex-shrink:0;transition:transform .25s cubic-bezier(.4,0,.2,1);opacity:.45}.header-nav-dropdown-wrapper{position:relative}.header-nav-dropdown-wrapper:hover .header-nav-chevron{transform:rotate(180deg);opacity:1}.header-nav-mega{position:absolute;top:100%;left:50%;transform:translate(-50%) translateY(4px);padding-top:4px;z-index:1000;opacity:0;visibility:hidden;transition:opacity .22s ease-out,transform .22s ease-out,visibility .22s;pointer-events:none}.header-nav-mega:before{content:"";position:absolute;top:-8px;left:-20px;right:-20px;height:16px}.header-nav-dropdown-wrapper:hover .header-nav-mega{opacity:1;visibility:visible;transform:translate(-50%) translateY(0);pointer-events:auto}.header-nav-mega-inner{width:380px;background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:14px;box-shadow:0 16px 48px #00000047,0 4px 14px #0000001f,inset 0 0 0 1px #ffffff0a;overflow:hidden}.mega-section{padding:10px 8px 8px}.mega-section-label{font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);padding:0 6px 8px;opacity:.6}.mega-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}.mega-card{display:flex;flex-direction:row;align-items:center;gap:8px;padding:6px 8px;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .14s ease-out;text-align:left}.mega-card:hover{background:var(--color-bg-tertiary)}.mega-card.active{background:rgba(var(--color-accent-rgb, 255, 165, 0),.1)}.mega-card.active .mega-card-thumb{border-color:var(--color-accent)}.mega-card.active .mega-card-name{color:var(--color-accent)}.mega-card-thumb{width:34px;height:34px;border-radius:7px;object-fit:cover;flex-shrink:0;border:1.5px solid var(--color-border-muted);transition:border-color .14s ease-out}.mega-card:hover .mega-card-thumb{border-color:var(--color-accent)}.mega-card-name{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--color-text-primary);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mega-card:hover .mega-card-name{color:var(--color-accent)}.mega-divider{height:1px;background:var(--color-border-muted);margin:4px 14px}.mega-featured{padding:6px 8px 10px;display:flex;gap:4px}.mega-featured-card{flex:1;display:flex;align-items:center;gap:10px;padding:10px;background:transparent;border:1px solid var(--color-border-muted);border-radius:10px;cursor:pointer;transition:all .16s ease-out}.mega-featured-card:hover{background:var(--color-bg-tertiary);border-color:var(--color-accent);transform:translateY(-1px)}.mega-featured-thumb{width:40px;height:40px;border-radius:8px;overflow:hidden;flex-shrink:0}.mega-featured-thumb img{width:100%;height:100%;object-fit:cover}.mega-featured-info{display:flex;flex-direction:column;gap:2px;text-align:left}.mega-featured-name{font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--color-text-primary)}.mega-featured-card:hover .mega-featured-name{color:var(--color-accent)}.mega-featured-desc{font-family:var(--font-body);font-size:10px;color:var(--color-text-muted);font-weight:500}.mega-featured-disabled{cursor:default;opacity:.5}.mega-featured-disabled:hover{background:transparent;border-color:var(--color-border-muted);transform:none}.mega-featured-disabled:hover .mega-featured-name{color:var(--color-text-primary)}.mobile-drawer-item-disabled{opacity:.5;cursor:default}.mobile-drawer-item-disabled:active{background:transparent}.mega-coming-soon-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#f59e0b2e;color:#f59e0b;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle}.header-mobile-menu-btn{display:none;align-items:center;justify-content:center;width:38px;height:38px;background:transparent;border:1px solid var(--color-border-muted);border-radius:10px;color:var(--color-text-primary);cursor:pointer;transition:all .15s ease-out;margin-right:8px}.header-mobile-menu-btn:hover{background:var(--color-bg-tertiary)}.header-mobile-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000008c;z-index:999;animation:fadeIn .2s ease-out}.header-mobile-drawer{position:fixed;top:0;right:0;width:300px;max-width:85vw;height:100vh;background:var(--color-surface);border-left:1px solid var(--color-border-muted);z-index:1000;transform:translate(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column;padding:20px 16px;gap:4px}.header-mobile-drawer.open{transform:translate(0)}.mobile-drawer-profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;cursor:pointer;transition:background .15s ease-out}.mobile-drawer-profile:hover{background:var(--color-bg-tertiary)}.mobile-drawer-avatar{width:44px;height:44px;border-radius:12px;overflow:hidden;flex-shrink:0;border:2px solid var(--color-border-muted)}.mobile-drawer-avatar img{width:100%;height:100%;object-fit:cover}.mobile-drawer-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:#fff;font-size:18px;font-weight:700}.mobile-drawer-user-info{display:flex;flex-direction:column;gap:2px}.mobile-drawer-username{font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--color-text-primary)}.mobile-drawer-label{font-family:var(--font-body);font-size:11px;color:var(--color-accent);font-weight:600}.mobile-drawer-divider{height:1px;background:var(--color-border-muted);margin:8px 4px}.mobile-drawer-section-label{font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);padding:8px 12px 6px;opacity:.65}.mobile-drawer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 4px}.mobile-drawer-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 10px;background:transparent;border:1px solid var(--color-border-muted);border-radius:10px;cursor:pointer;transition:all .15s ease-out}.mobile-drawer-card:active{background:var(--color-bg-tertiary);transform:scale(.96)}.mobile-drawer-card img{width:40px;height:40px;border-radius:8px;object-fit:cover}.mobile-drawer-card span{font-family:var(--font-body);font-size:10px;font-weight:600;color:var(--color-text-primary);text-align:center;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mobile-drawer-item{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;background:transparent;border:none;border-radius:10px;color:var(--color-text-primary);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease-out;text-align:left}.mobile-drawer-item:active{background:var(--color-bg-tertiary)}.mobile-drawer-item.logout{color:var(--color-error, #ef4444);margin-top:auto}.mobile-drawer-spacer{flex:1;min-height:20px}.header-auth-buttons{display:flex;align-items:center;gap:10px}.header-auth-btn{padding:8px 18px;border:none;border-radius:10px;font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:all .18s ease-out;white-space:nowrap}.header-auth-register{background:var(--color-accent);color:#000;box-shadow:0 2px 8px rgba(var(--color-accent-rgb, 255, 165, 0),.25)}.header-auth-register:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(var(--color-accent-rgb, 255, 165, 0),.4);filter:brightness(1.08)}.header-auth-login{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border-muted)}.header-auth-login:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-hover);transform:translateY(-1px)}.mobile-drawer-auth{display:flex;flex-direction:column;gap:10px;padding:20px 16px}.mobile-drawer-auth .header-auth-btn{width:100%;padding:14px 18px;font-size:15px;text-align:center;border-radius:12px}@media(max-width:900px){.header-auth-buttons{display:none}}.header-auth-skeleton{display:flex;align-items:center;gap:10px;padding:4px 0}.header-auth-skeleton-avatar{width:32px;height:32px;border-radius:10px;background:var(--color-bg-tertiary, rgba(255,255,255,.06));animation:auth-skeleton-pulse 1.4s ease-in-out infinite;flex-shrink:0}.header-auth-skeleton-text{width:80px;height:14px;border-radius:6px;background:var(--color-bg-tertiary, rgba(255,255,255,.06));animation:auth-skeleton-pulse 1.4s ease-in-out .15s infinite}@keyframes auth-skeleton-pulse{0%,to{opacity:.35}50%{opacity:.7}}@media(max-width:900px){.header-auth-skeleton{display:none}}.mobile-drawer-theme-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:4px 16px 12px}.mobile-drawer-theme-btn{padding:6px 8px;background:transparent;border:1px solid var(--color-border-muted);border-radius:6px;font-family:var(--font-body);font-size:11px;font-weight:500;color:var(--color-text-muted);cursor:pointer;transition:all .12s ease-out;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-drawer-theme-btn:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.mobile-drawer-theme-btn.active{background:rgba(var(--color-accent-rgb, 255, 165, 0),.15);color:var(--color-accent);border-color:var(--color-accent);font-weight:600}.mobile-drawer-lang-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px 16px 12px}@media(max-width:868px){.header-nav,.header-tools-group{display:none}.header-mobile-menu-btn{display:flex}}@media(min-width:869px){.header-mobile-drawer,.header-mobile-overlay{display:none!important}}.profile-page-content{max-width:1356px;margin:0 auto;padding:48px 28px 80px;position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--spacing-xl)}.profile-upload-error-banner{padding:14px 18px;border-radius:12px;font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:.1px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:var(--color-error, #ef4444);animation:slide-down .2s ease-out}@keyframes slide-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.profile-pathways-section{background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:16px;padding:24px;box-shadow:0 1px 3px #0000001a}.profile-pathways-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.profile-pathways-title{font-family:var(--font-heading);font-size:18px;font-weight:700;color:var(--color-text-primary);margin:0;letter-spacing:.05em;text-transform:uppercase}.profile-pathways-view-all{display:flex;align-items:center;gap:6px;padding:8px 16px;background:transparent;border:1px solid var(--color-border-muted);border-radius:8px;color:var(--color-text-primary);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease-out}.profile-pathways-view-all:hover{background:var(--color-bg-tertiary);border-color:var(--color-border-hover);color:var(--color-accent)}.profile-pathways-view-all svg{transition:transform .15s ease-out}.profile-pathways-view-all:hover svg{transform:translate(2px)}.profile-pathways-scroll{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--color-border-muted) transparent}.profile-pathways-scroll::-webkit-scrollbar{height:6px}.profile-pathways-scroll::-webkit-scrollbar-track{background:transparent;border-radius:3px}.profile-pathways-scroll::-webkit-scrollbar-thumb{background:var(--color-border-muted);border-radius:3px}.profile-pathways-scroll::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}.profile-pathways-loading{display:flex;justify-content:center;align-items:center;padding:60px 20px}@media(max-width:768px){.profile-pathways-section{padding:16px}.profile-pathways-title{font-size:16px}.profile-pathways-view-all{padding:6px 12px;font-size:12px}}.profile-identity-block{display:flex;align-items:center;justify-content:space-between;background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:16px;padding:24px 32px;box-shadow:0 1px 3px #0000001a;gap:24px;flex-wrap:wrap}.profile-identity-section{display:flex;align-items:center;gap:20px;min-width:200px}.profile-avatar-wrapper{width:72px;height:72px;position:relative;flex-shrink:0}.profile-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--color-surface);box-shadow:0 2px 8px #00000026}.profile-avatar.placeholder{background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;width:100%;height:100%;border-radius:50%}.profile-avatar-edit-btn{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:var(--color-accent);border:2px solid var(--color-surface);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease-out;z-index:10;box-shadow:0 2px 6px #0003}.profile-avatar-edit-btn:hover:not(:disabled){background:var(--color-accent-dark, #00d974);transform:scale(1.1)}.profile-avatar-edit-btn:active:not(:disabled){transform:scale(.95)}.profile-avatar-edit-btn:disabled{cursor:wait;opacity:.8}.profile-avatar-edit-btn.uploading{background:var(--color-text-muted);animation:pulse-avatar 1.5s ease-in-out infinite}@keyframes pulse-avatar{0%,to{opacity:.8}50%{opacity:1}}.avatar-upload-progress{font-size:9px;font-weight:700;font-family:var(--font-mono, monospace)}.profile-avatar-error{position:absolute;bottom:-24px;left:50%;transform:translate(-50%);font-size:10px;color:var(--color-error, #ef4444);white-space:nowrap;background:var(--color-surface);padding:2px 8px;border-radius:4px;box-shadow:0 1px 4px #0000001a}.profile-identity-info{display:flex;flex-direction:column;justify-content:center}.profile-username{font-family:var(--font-heading);font-size:24px;font-weight:800;color:var(--color-text-primary);margin:0;line-height:1.2}.profile-actions-section{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:160px;margin-left:auto}.profile-action-btn{transition:all .15s ease-out;flex:1;justify-content:center}@media(max-width:600px){.profile-identity-block{flex-direction:column;align-items:flex-start;padding:20px}.profile-actions-section{width:100%;margin-top:12px}.profile-action-btn{flex:1}}.calendar-stats-compact{display:flex;align-items:center;gap:0;padding:0;background:var(--streak-tint, var(--color-bg-tertiary));border-radius:12px;margin-bottom:20px;border:1px solid var(--streak-border, var(--color-border-muted));overflow:hidden;position:relative;animation:streakBarPulse 4s ease-in-out infinite}@keyframes streakBarPulse{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 12px color-mix(in srgb,var(--streak-color, transparent) 15%,transparent)}to{box-shadow:0 0 0 transparent}}.calendar-stat-item{flex:.65;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px;border-right:1px solid var(--streak-border, var(--color-border-muted))}.calendar-stat-item:last-of-type{border-right:none}.calendar-stat-icon{font-size:26px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));flex-shrink:0;line-height:1}.calendar-stat-info{display:flex;flex-direction:column;gap:1px}.calendar-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);font-weight:700;line-height:1.2;white-space:nowrap}.calendar-stat-value{font-size:22px;font-family:var(--font-heading);font-weight:800;color:var(--streak-color, var(--color-text-primary));line-height:1}.calendar-stat-progress{flex:1.7;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px}.calendar-stat-progress .calendar-progress-bar{max-width:280px}.calendar-stat-value .progress-separator{color:var(--color-text-muted);font-weight:500;margin:0 2px;font-size:14px}.calendar-stat-value .progress-goal{color:var(--color-text-muted);font-weight:600;font-size:14px}.calendar-stat-value .progress-unit{color:var(--color-text-muted);font-weight:500;font-size:11px;margin-left:3px}.calendar-progress-bar{flex:1;height:8px;background:#ffffff0f;border-radius:4px;overflow:hidden}.calendar-progress-fill{height:100%;background:var(--streak-color, var(--color-accent));border-radius:4px;transition:width .5s ease-out;box-shadow:0 0 8px color-mix(in srgb,var(--streak-color, var(--color-accent)) 40%,transparent)}@media(max-width:900px){.calendar-stats-compact{flex-wrap:wrap}.calendar-stat-item{flex:1;min-width:0;padding:12px 10px;gap:8px;border-right:1px solid var(--streak-border, var(--color-border-muted));border-bottom:none}.calendar-stat-item:last-of-type{border-right:none}.calendar-stat-icon{font-size:22px}.calendar-stat-value{font-size:18px}.calendar-stat-label{font-size:8px;letter-spacing:.08em}.calendar-stat-progress{flex-basis:100%;padding:10px 16px;gap:8px;border-top:1px solid var(--streak-border, var(--color-border-muted));justify-content:flex-start}.calendar-stat-progress .calendar-progress-bar{max-width:none}.calendar-stat-progress .calendar-stat-value{font-size:16px}.calendar-stat-progress .calendar-stat-value .progress-separator,.calendar-stat-progress .calendar-stat-value .progress-goal{font-size:12px}.calendar-stat-progress .calendar-stat-value .progress-unit{font-size:10px}}.streak-discount-inline{text-align:center;padding:8px 16px;margin-bottom:16px}.streak-discount-inline__text{font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.4}.streak-discount-inline__text--earned{color:#a78bfa}.streak-discount-inline__text--motivate{color:orange}@media(max-width:440px){.streak-discount-inline__text{font-size:11px}}.profile-section{background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:18px;padding:24px;box-shadow:0 1px 3px #0000001a;margin-bottom:32px}.profile-section-header{margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--color-border-muted)}.profile-section-label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}.profile-settings-section{margin-bottom:32px}.profile-form{display:flex;flex-direction:column;gap:24px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}.form-input{padding:12px 16px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:12px;color:var(--color-text-primary);font-size:14px;font-family:var(--font-body);transition:all .15s ease-out}.form-input:focus{outline:none;border-color:var(--color-border);background:var(--color-surface);box-shadow:0 0 0 3px var(--color-accent-soft)}.form-input.disabled{opacity:.5;cursor:not-allowed;background:var(--color-bg-secondary)}.form-hint{font-family:var(--font-body);font-size:12px;color:var(--color-text-secondary);font-style:italic;letter-spacing:.1px}.profile-picture-preview{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.profile-picture-preview img{width:120px;height:120px;border-radius:var(--radius-full);object-fit:cover;border:3px solid var(--color-border-active);box-shadow:var(--shadow-glow-md)}.profile-picture-placeholder{width:120px;height:120px;border-radius:var(--radius-full);background:var(--color-bg-card);border:3px solid var(--color-border-default);display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);font-family:var(--font-body);font-size:var(--font-size-sm);margin:0 auto var(--spacing-md)}.form-actions{display:flex;gap:12px;margin-top:8px}.alert{padding:14px 18px;border-radius:12px;font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:.1px;margin-bottom:20px}.alert-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:var(--color-error)}.alert-success{background:var(--color-accent-soft);border:1px solid var(--color-border);color:var(--color-accent)}.practice-logs-container{display:flex;flex-direction:column;gap:var(--spacing-lg)}.practice-day-card{padding:var(--spacing-lg)}.practice-day-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;padding:var(--spacing-sm) 0}.practice-day-info{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1}.practice-day-title{font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-shadow:0 0 10px var(--color-glow-strong)}.practice-day-time{font-family:var(--font-body);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-accent);letter-spacing:var(--letter-spacing-normal);text-shadow:0 0 8px var(--color-glow)}.practice-day-toggle{font-size:var(--font-size-lg);color:var(--color-accent);transition:transform var(--transition-normal);margin-left:var(--spacing-md)}.practice-day-details{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border-default);display:flex;flex-direction:column;gap:var(--spacing-md)}.practice-log-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border-default);transition:all var(--transition-normal)}.practice-log-item:hover{background:var(--color-bg-card);border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow-sm)}.log-info{flex:1}.log-lesson-name{font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0 0 var(--spacing-xs) 0;letter-spacing:var(--letter-spacing-normal);text-transform:uppercase;text-shadow:0 0 8px var(--color-glow)}.log-artist{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0;letter-spacing:var(--letter-spacing-tight)}.log-time{display:flex;align-items:center;gap:var(--spacing-sm)}.log-time-icon{font-size:var(--font-size-lg)}.log-time-value{font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:var(--font-weight-extrabold);color:var(--color-accent);text-shadow:0 0 10px var(--color-glow)}.profile-empty-state{text-align:center;padding:60px 40px}.profile-empty-state-icon{font-size:64px;margin-bottom:24px;filter:drop-shadow(0 0 20px var(--color-glow-subtle))}.profile-empty-state h3{font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--color-text-primary);margin:0 0 12px;letter-spacing:.05em;text-transform:uppercase}.profile-empty-state p{font-family:var(--font-body);font-size:14px;color:var(--color-text-secondary);margin:0 0 24px;line-height:1.6}.profile-loading-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 20px}.profile-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:24px;padding:40px}.profile-loading-spinner{width:48px;height:48px;border:3px solid var(--color-border-muted);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 12px var(--color-glow-subtle)}.profile-loading-container p{font-family:var(--font-body);font-size:16px;color:var(--color-text-secondary);margin:0}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);padding:20px}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border-muted);border-top-color:var(--color-accent);border-radius:var(--radius-full);animation:spin .8s linear infinite;box-shadow:0 0 12px var(--color-glow-subtle)}.loading-container p{font-family:var(--font-body);font-size:var(--font-size-base);color:var(--color-text-secondary);letter-spacing:var(--letter-spacing-normal)}.profile-panels{background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:18px;padding:24px;box-shadow:0 1px 3px #0000001a;margin-bottom:32px}.profile-panels-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:0;max-height:400px;overflow:hidden}.panel{display:flex;flex-direction:column;height:100%;overflow:hidden}.panel-left{padding-right:20px}.panel-right{padding-left:0}.panel-header{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--color-border-muted)}.panel-eyebrow{font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--color-text-muted);display:block;margin-bottom:4px}.panel-header-compact{margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}.achievements-count-compact{font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--color-text-secondary);background:var(--color-bg-tertiary);padding:2px 8px;border-radius:12px}.panel-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px 20px;height:100%}.panel-loading p{font-family:var(--font-body);font-size:12px;color:var(--color-text-secondary)}.panel-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;width:1px;margin:0 20px;position:relative;flex-shrink:0}.divider-cap{width:6px;height:6px;border-radius:50%;background:var(--color-accent);opacity:.3;flex-shrink:0}.divider-cap-top{margin-bottom:8px}.divider-cap-bottom{margin-top:8px}.divider-line{flex:1;width:1px;background:linear-gradient(to bottom,transparent 0%,var(--color-accent) 20%,var(--color-accent) 80%,transparent 100%);opacity:.4;min-height:200px}.medal-compact-item{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:10px;padding:0;gap:4px;transition:all .15s ease-out;cursor:default}.medal-compact-item:hover{transform:translateY(-2px);border-color:var(--color-border);background:var(--color-surface-alt)}.medal-compact-icon{font-size:24px;filter:drop-shadow(0 0 5px rgba(255,255,255,.1))}.medal-compact-count{font-family:var(--font-heading);font-size:14px;font-weight:700}.achievements-wrapper.achievements-scrollable{max-height:400px;overflow-y:auto;overflow-x:hidden;padding-right:8px}.achievements-grid-full{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}@media(max-width:640px){.achievements-grid-full{grid-template-columns:repeat(3,1fr);gap:6px}.profile-card-achievements{overflow:hidden}}.profile-card-history{height:100%;display:flex;flex-direction:column}.profile-card-history .panel-activity-scroll{flex:1;overflow-y:auto;padding-right:4px}.achievements-wrapper.achievements-scrollable::-webkit-scrollbar,.profile-card-history .panel-activity-scroll::-webkit-scrollbar{width:6px}.achievements-wrapper.achievements-scrollable::-webkit-scrollbar-track,.profile-card-history .panel-activity-scroll::-webkit-scrollbar-track{background:transparent}.achievements-wrapper.achievements-scrollable::-webkit-scrollbar-thumb,.profile-card-history .panel-activity-scroll::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:3px}.panel-activity-scroll{overflow-y:auto;overflow-x:hidden;flex:1;padding-right:4px;margin-right:-4px}.panel-activity-list{display:flex;flex-direction:column;gap:0;padding-bottom:8px}.activity-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0;border:none;background:transparent;border-bottom:1px solid var(--color-border-muted);cursor:pointer;transition:all .15s ease-out;gap:12px;text-align:left;font-family:inherit}.activity-row:last-child{border-bottom:none}.activity-row:hover{transform:translateY(-1px);background:var(--color-bg-tertiary);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px;box-shadow:0 1px 4px #0000000f}.activity-main{display:flex;flex-direction:column;gap:4px;flex:1}.activity-date-label{font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--color-text-secondary);letter-spacing:.1px}.activity-duration{font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--color-text-primary);letter-spacing:-.01em}.activity-chevron{font-size:11px;color:var(--color-text-muted);transition:transform .15s ease-out;flex-shrink:0;line-height:1}.activity-row:hover .activity-chevron{transform:translate(2px);color:var(--color-text-primary)}.activity-details{margin-top:8px;padding-top:12px;border-top:1px solid var(--color-border-muted);display:flex;flex-direction:column;gap:8px}.activity-detail-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:10px;gap:12px;transition:all .15s ease-out;cursor:pointer;width:100%;text-align:left;font-family:inherit;font-size:inherit;color:inherit}.activity-detail-item:hover{background:var(--color-surface-alt);border-color:var(--color-border);transform:translateY(-1px);box-shadow:0 2px 6px #0000001a}.activity-detail-item:active{transform:translateY(0)}.activity-detail-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.activity-detail-name{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--color-text-primary);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-detail-artist{font-family:var(--font-body);font-size:11px;font-weight:400;color:var(--color-text-secondary);letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-detail-time{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--color-text-primary);letter-spacing:-.01em;flex-shrink:0}.panel-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;height:100%}.panel-empty-icon{font-size:48px;margin-bottom:16px;filter:drop-shadow(0 0 10px var(--color-glow-subtle))}.panel-empty-state h4{font-family:var(--font-heading);font-size:14px;font-weight:700;color:var(--color-text-primary);margin:0 0 8px;letter-spacing:.05em;text-transform:uppercase}.panel-empty-state p{font-family:var(--font-body);font-size:12px;color:var(--color-text-secondary);margin:0 0 16px;line-height:1.5}.panel-right::-webkit-scrollbar{width:6px}.panel-right::-webkit-scrollbar-track{background:transparent}.panel-right::-webkit-scrollbar-thumb{background:var(--color-border-muted);border-radius:3px}.panel-right::-webkit-scrollbar-thumb:hover{background:var(--color-border)}@media(max-width:1023px){.profile-header{padding:12px 16px}.profile-header-inner{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;grid-template-columns:none}.profile-header-left{display:flex;flex-direction:row;align-items:center;gap:10px;flex:1;min-width:0}.profile-header-logo{height:32px;flex-shrink:0}.profile-header-title-section{flex:1;min-width:0;gap:2px}.profile-header-eyebrow{font-size:9px;letter-spacing:.15em}.profile-header-eyebrow--prominent{font-size:13px;letter-spacing:.08em}.header-back-btn{width:30px;height:30px;border-radius:8px}.header-back-btn svg{width:16px;height:16px}.profile-header-title{font-size:13px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-header-center{display:none}.profile-header-right{flex:0 0 auto;margin-left:auto;width:auto}.profile-header-exit-btn{width:32px;height:32px;border-radius:8px}.profile-page-content{padding:20px 16px 60px;gap:var(--spacing-md)}.profile-identity-block{flex-direction:column;align-items:flex-start;gap:20px;padding:20px}.profile-identity-left{width:100%;gap:16px}.profile-avatar,.profile-avatar.placeholder{width:72px;height:72px;font-size:28px}.profile-username{font-size:20px}.profile-email{font-size:13px}.profile-identity-right{width:100%;flex-direction:column;gap:10px}.profile-action-btn{width:100%;justify-content:center}.profile-stats-grid{grid-template-columns:1fr;gap:16px;margin-bottom:24px}.profile-stat-card{padding:20px;min-height:120px}.profile-stat-icon{font-size:32px;margin-bottom:10px}.profile-stat-value{font-size:28px}.profile-stat-label{font-size:10px}.profile-progress-card{padding:20px}.profile-progress-label{font-size:10px}.profile-progress-text{font-size:12px}.profile-progress-message{font-size:11px}.profile-section{padding:20px;margin-bottom:24px;border-radius:16px}.profile-section-header{margin-bottom:16px;padding-bottom:10px}.profile-section-label{font-size:10px}.profile-form{gap:20px}.form-group{gap:6px}.form-group label{font-size:10px}.form-input{padding:10px 14px;font-size:14px;border-radius:10px}.form-actions{margin-top:8px}.form-actions .btn{width:100%}.profile-picture-preview{gap:12px;margin-bottom:16px}.profile-picture-preview img{width:100px;height:100px}.profile-picture-placeholder{width:100px;height:100px;font-size:14px;margin:0 auto 16px}.alert{padding:12px 14px;font-size:13px;margin-bottom:16px;border-radius:10px}.profile-loading-container{padding:40px 20px}.profile-loading-spinner{width:40px;height:40px}.profile-loading-container p{font-size:14px;margin-top:16px}.panel-loading{padding:30px 20px}.panel-loading p{font-size:13px}.practice-day-card{padding:16px}.practice-day-title{font-size:18px}.practice-day-time{font-size:16px}.practice-log-item{padding:12px;flex-direction:column;align-items:flex-start;gap:8px}.log-lesson-name{font-size:16px}.log-artist{font-size:13px}.log-time{width:100%;justify-content:flex-start}.log-time-value{font-size:14px}.profile-panels{padding:16px}.profile-panels-inner{grid-template-columns:1fr;max-height:none;gap:0}.panel-left{padding-right:0;padding-bottom:20px;border-bottom:1px solid var(--color-border-muted);margin-bottom:20px;border-right:none}.panel-right{padding-left:0;overflow-y:visible;max-height:none}.panel-divider{display:none}.panel-header{margin-bottom:16px}.panel-title{font-size:18px}.medal-row{padding:12px 0}.medal-icon{font-size:20px}.medal-name{font-size:13px}.medal-count{font-size:12px}.activity-row{padding:12px 0}.activity-date{font-size:12px}.activity-time{font-size:11px}.practice-log-row{padding:10px 12px}.practice-log-date{font-size:12px}.practice-log-time{font-size:11px}.card-title{font-size:18px;margin-bottom:16px}.card-title-compact{font-size:16px}}@media(max-width:479px){.profile-header{padding:10px 12px}.profile-header-logo{height:28px}.profile-header-title{font-size:12px}.profile-header-exit-btn{width:28px;height:28px}.profile-page-content{padding:16px 12px 60px;gap:var(--spacing-sm)}.profile-identity-block{padding:16px;gap:16px}.profile-avatar,.profile-avatar.placeholder{width:64px;height:64px;font-size:24px}.profile-username{font-size:18px}.profile-email{font-size:12px}.profile-stat-card{padding:16px;min-height:100px}.profile-stat-icon{font-size:28px}.profile-stat-value{font-size:24px}.profile-section{padding:16px}.profile-panels{padding:12px}.panel-title{font-size:16px}.profile-picture-preview img{width:80px;height:80px}.profile-picture-placeholder{width:80px;height:80px;font-size:12px}.alert{padding:10px 12px;font-size:12px}.practice-day-title{font-size:16px}.practice-day-time,.log-lesson-name{font-size:14px}}.theme-light .profile-header{background:var(--app-header-bg, #ffffff);box-shadow:0 1px 3px #0000000f}.theme-light .profile-header-exit-btn{background:var(--color-bg-tertiary);border-color:var(--color-border-muted);color:var(--color-text-secondary)}.theme-light .profile-header-exit-btn:hover{border-color:var(--color-border-hover);color:var(--color-text-primary);background:var(--color-bg-card-hover)}.theme-light .profile-identity-block,.theme-light .profile-stat-card,.theme-light .profile-progress-card,.theme-light .profile-section{background:var(--color-surface);box-shadow:0 1px 3px #0000000f}.theme-light .profile-progress-bar{background:var(--color-bg-tertiary)}.theme-light .profile-progress-fill{background:var(--color-accent);opacity:.9}.theme-light .profile-medal-row:hover,.theme-light .profile-activity-row:hover,.theme-light .profile-activity-detail-item{background:var(--color-bg-tertiary)}.theme-light .profile-activity-detail-item:hover{background:var(--color-bg-card-hover)}.theme-light .profile-panels{background:var(--color-surface);box-shadow:0 1px 3px #0000000f}.theme-light .divider-line{background:linear-gradient(to bottom,transparent 0%,var(--color-accent) 20%,var(--color-accent) 80%,transparent 100%);opacity:.3}.theme-light .divider-cap{background:var(--color-accent);opacity:.25}.theme-light .medal-row:hover,.theme-light .activity-row:hover,.theme-light .activity-detail-item{background:var(--color-bg-tertiary)}.theme-light .activity-detail-item:hover{background:var(--color-bg-card-hover)}.theme-light .panel-right::-webkit-scrollbar-thumb{background:var(--color-border-muted)}.theme-light .panel-right::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}.profile-content-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-bottom:24px}.profile-top-left,.profile-top-right{display:flex;flex-direction:column;gap:20px;min-width:0;overflow:hidden}.profile-content-bottom,.profile-card-skills-full{width:100%}.skills-graph-full{min-height:400px}@media(max-width:960px){.profile-content-top{grid-template-columns:1fr}.profile-top-left,.profile-top-right{display:contents}.profile-order-calendar{order:1}.profile-order-stats{order:2}.profile-order-leaderboard{order:3}.profile-order-medals{order:4}.profile-order-achievements{order:5}}.profile-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media(max-width:960px){.profile-content-grid{grid-template-columns:1fr}}.profile-column-left{display:flex;flex-direction:column;gap:24px}.profile-column-right{min-width:0;display:flex;flex-direction:column;gap:20px}.profile-card-calendar{display:flex;flex-direction:column}.calendar-goal-hint{font-family:var(--font-body);font-size:10px;font-weight:500;color:var(--color-text-secondary);background:var(--color-bg-tertiary);padding:4px 10px;border-radius:12px}.profile-card{background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:16px;padding:24px;box-shadow:0 1px 3px #0000001a}.card-header-simple{margin-bottom:20px}.card-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}.profile-card-achievements{display:flex;flex-direction:column;max-height:500px}.profile-card-achievements .achievements-wrapper.achievements-scrollable{max-height:400px;overflow-y:auto;flex:1;min-height:0}.profile-achievements-section{background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:16px;padding:24px;margin-top:24px}.profile-achievements-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.profile-achievements-header h3{font-family:var(--font-heading);font-size:18px;font-weight:700;color:var(--color-text-primary);margin:0}.achievements-count{font-size:14px;font-weight:600;color:var(--color-text-muted);background:var(--color-bg-tertiary);padding:4px 12px;border-radius:20px}.profile-achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}.profile-achievements-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;padding:40px 20px;color:var(--color-text-muted)}.profile-achievements-empty span{font-size:48px;margin-bottom:12px}.profile-achievements-empty p{font-size:14px;margin:0}.profile-achievements-loading{display:flex;justify-content:center;padding:40px}.profile-achievements-btn{width:100%;margin-top:8px}@media(max-width:640px){.profile-achievements-grid{grid-template-columns:1fr 1fr}.profile-achievements-section{padding:16px}}@media(max-width:480px){.profile-achievements-grid{grid-template-columns:1fr}}.profile-achievements-group{margin-bottom:20px}.profile-achievements-group:last-child{margin-bottom:0}.profile-achievements-group-title{font-family:var(--font-heading);font-size:14px;font-weight:600;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--color-border-muted)}.profile-achievements-group-title--earned{color:var(--color-accent)}.profile-achievements-group-title--locked{color:var(--color-text-muted)}.profile-card-skills{overflow:hidden}.skills-graph-wrapper .skill-tree-graph-container{background:transparent!important;box-shadow:none!important;border-radius:0!important;max-width:100%!important}.skills-graph-wrapper .skill-tree-graph-loading{color:var(--color-text-muted)}.medals-grid-compact{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.medals-grid-horizontal{grid-template-columns:repeat(6,1fr);gap:10px}.medal-compact-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--color-bg-tertiary);border-radius:12px;border:1px solid transparent;transition:all .2s ease;min-width:0}.medal-compact-item.earned{border-color:var(--color-border-accent);background:var(--color-surface-alt)}.medal-compact-item:not(.earned){opacity:1}.medal-compact-icon{font-size:24px;margin-bottom:4px;line-height:1}.medal-compact-count{font-family:var(--font-heading);font-size:14px;font-weight:700;line-height:1}.profile-column-right{display:flex!important;flex-direction:column!important;gap:24px!important}.profile-card-exams{background:var(--color-surface);border:1px solid var(--color-border-muted);border-radius:16px;padding:20px}.panel-empty-state-compact{padding:20px;text-align:center;color:var(--color-text-muted);font-size:13px}.panel-empty-state-compact p{margin:0}.exam-submissions-list{display:flex;flex-direction:column;gap:8px}.exam-submission-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--color-bg-tertiary);border-radius:10px;border:1px solid transparent;cursor:pointer;transition:all .2s ease}.exam-submission-item:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-hover)}.exam-submission-info{display:flex;flex-direction:column;gap:2px;min-width:0}.exam-lesson-name{font-weight:600;font-size:13px;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.exam-target-level{font-size:11px;color:var(--color-text-muted)}.exam-submission-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}.exam-submission-item.status-pending .exam-submission-status{color:var(--color-warning, #f59e0b)}.exam-submission-item.status-approved .exam-submission-status{color:var(--color-success, #10b981)}.exam-submission-item.status-rejected .exam-submission-status{color:var(--color-error, #ef4444)}@media(max-width:768px){.profile-card-exams{padding:16px}.exam-submission-item{padding:10px 12px}.exam-lesson-name{font-size:12px}.profile-header-inner{grid-template-columns:auto 1fr auto;gap:16px}.header-profile-name{display:none}.header-profile-trigger{padding:6px}.header-profile-avatar{width:36px;height:36px}}.profile-community-goal-mini{cursor:pointer;transition:all .25s ease;border-color:#ff6e001f!important;background:linear-gradient(180deg,rgba(255,110,0,.03) 0%,var(--color-bg-card, #11171c) 60%)!important}.profile-community-goal-mini:hover{border-color:#ff6e004d!important;transform:translateY(-2px);box-shadow:0 4px 16px #ff6e0014}.pcg-mini-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.pcg-mini-title-row{display:flex;align-items:center;gap:6px}.pcg-mini-fire{color:var(--color-accent, #ff6e00)}.pcg-mini-title{font-family:var(--font-heading, "Montserrat", sans-serif);font-size:12px;font-weight:700;color:var(--color-text-primary, #eef3f4);letter-spacing:.04em;text-transform:uppercase}.pcg-mini-counter{display:flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums}.pcg-mini-current{font-size:15px;font-weight:800;color:var(--color-accent, #ff6e00)}.pcg-mini-sep{font-size:11px;color:var(--color-text-muted, #7f9095);margin:0 1px}.pcg-mini-target{font-size:11px;font-weight:600;color:var(--color-text-secondary, #b9c6c9)}.pcg-mini-unit{font-size:9px;color:var(--color-text-muted, #7f9095);margin-left:2px}.pcg-mini-bar-track{width:100%;height:6px;background:#ffffff0a;border-radius:3px;overflow:hidden;margin-bottom:10px;position:relative}.pcg-mini-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--color-accent, #ff6e00) 0%,#d9761e 100%);transition:width 1s ease}.pcg-mini-bar-pct{position:absolute;right:0;top:-16px;font-size:10px;font-weight:700;color:var(--color-accent, #ff6e00);font-variant-numeric:tabular-nums}.pcg-mini-tip-trigger{position:relative;display:flex;align-items:center;cursor:help;color:var(--color-text-muted, #7f9095);opacity:.45;transition:opacity .2s}.pcg-mini-tip-trigger:hover{opacity:1;color:var(--color-accent, #ff6e00)}.pcg-mini-tip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);width:240px;padding:10px 12px;font-size:11px;font-weight:500;line-height:1.55;color:var(--color-text-secondary, #b9c6c9);background:var(--color-bg-card, #11171c);border:1px solid rgba(255,110,0,.15);border-radius:10px;box-shadow:0 8px 24px #00000080;z-index:20;cursor:default}.pcg-mini-tip:before{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%) rotate(45deg);width:10px;height:10px;background:var(--color-bg-card, #11171c);border-top:1px solid rgba(255,110,0,.15);border-left:1px solid rgba(255,110,0,.15)}.pcg-mini-tip-trigger:hover .pcg-mini-tip{display:block}.pcg-mini-footer{display:flex;align-items:center;justify-content:space-between}.pcg-mini-cta{font-size:11px;font-weight:600;color:var(--color-accent, #ff6e00);opacity:.8}.profile-community-goal-mini:hover .pcg-mini-cta{opacity:1}.pcg-mini-arrow{color:var(--color-accent, #ff6e00);opacity:.6;transition:transform .2s,opacity .2s}.profile-community-goal-mini:hover .pcg-mini-arrow{transform:translate(3px);opacity:1}.public-profile-page{min-height:100vh;padding:20px 20px 64px;max-width:720px;margin:0 auto}.public-profile-hero{display:flex;align-items:center;gap:22px;padding:28px 32px;border-radius:18px;background:var(--color-surface, rgba(255,255,255,.04));border:1px solid var(--color-border-muted, rgba(255,255,255,.06));margin-bottom:16px}.public-profile-avatar-wrapper{width:80px;height:80px;border-radius:50%;overflow:hidden;flex-shrink:0;box-shadow:0 4px 20px #0000004d}.public-profile-avatar-img{width:100%;height:100%;object-fit:cover;display:block}.public-profile-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;text-transform:uppercase;flex-shrink:0}.public-profile-info{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.public-profile-nickname{font-size:22px;font-weight:700;color:var(--color-text-primary, #fff);letter-spacing:-.3px;line-height:1.2}.public-profile-overall{display:flex;align-items:center;gap:8px}.public-profile-overall-label{color:var(--color-text-muted, rgba(255,255,255,.5));font-size:13px;font-weight:500}.public-profile-overall-value{font-size:22px;font-weight:800;font-family:var(--font-heading, "Inter", system-ui, sans-serif);line-height:1}.public-profile-social{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}.public-profile-social-link{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:16px;font-size:12px;font-weight:500;text-decoration:none;transition:all .2s;border:1px solid transparent}.public-profile-social-link.instagram{background:#e1306c1a;color:#e1306c;border-color:#e1306c2e}.public-profile-social-link.instagram:hover{background:#e1306c33;transform:translateY(-1px);box-shadow:0 4px 12px #e1306c26}.public-profile-social-link.youtube{background:#ff000014;color:#f44;border-color:#ff00002e}.public-profile-social-link.youtube:hover{background:#ff00002e;transform:translateY(-1px);box-shadow:0 4px 12px #ff00001f}.public-profile-social-link svg{flex-shrink:0}.public-profile-social-link span{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.public-profile-streaks{display:flex;align-items:center;gap:0;padding:0;border-radius:12px;background:var(--pp-streak-tint, var(--color-bg-tertiary));border:1px solid var(--pp-streak-border, var(--color-border-muted));overflow:hidden;margin-bottom:16px}.public-profile-streak-item{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px}.public-profile-streak-item:first-child{border-right:1px solid var(--pp-streak-border, var(--color-border-muted))}.pp-streak-icon{font-size:24px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));flex-shrink:0;line-height:1}.pp-streak-info{display:flex;flex-direction:column;gap:1px}.pp-streak-label{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted, rgba(255,255,255,.5));font-weight:700;line-height:1.2;white-space:nowrap}.pp-streak-value{font-size:20px;font-family:var(--font-heading, "Inter", system-ui, sans-serif);font-weight:800;color:var(--pp-streak-color, var(--color-text-primary));line-height:1}.public-profile-loading{display:flex;justify-content:center;align-items:center;min-height:250px}.public-profile-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--brand-orange, #FF6B00);border-radius:50%;animation:pp-spin .7s linear infinite}@keyframes pp-spin{to{transform:rotate(360deg)}}@media(max-width:600px){.public-profile-page{padding:16px 12px 48px}.public-profile-hero{flex-direction:column;align-items:center;text-align:center;padding:24px 20px;gap:14px}.public-profile-info{align-items:center}.public-profile-overall,.public-profile-social{justify-content:center}.public-profile-avatar-wrapper{width:68px;height:68px}.public-profile-avatar{width:68px;height:68px;font-size:26px}.public-profile-nickname{font-size:19px}.public-profile-overall-value{font-size:20px}.public-profile-streak-item{padding:12px 14px;gap:8px}.pp-streak-icon{font-size:20px}.pp-streak-value{font-size:18px}.pp-streak-label{font-size:8px}}.billing-form-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem 2rem;color:#fff9}.billing-form{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.billing-form-header{display:flex;align-items:flex-start;gap:.75rem}.billing-header-icon{color:#f97316;flex-shrink:0;margin-top:.15rem}.billing-form-title{font-size:1.25rem;font-weight:700;color:#fff;margin:0}.billing-form-subtitle{font-size:.85rem;color:#ffffff80;margin:.25rem 0 0}.billing-plan-summary{display:flex;align-items:center;gap:.5rem;background:#f973161a;border:1px solid rgba(249,115,22,.25);border-radius:.75rem;padding:.75rem 1rem;font-size:.9rem;color:#f97316;font-weight:500}.billing-plan-price{margin-left:auto;font-weight:700;font-size:1rem}.billing-error{display:flex;align-items:center;gap:.5rem;background:#ef44441f;border:1px solid rgba(239,68,68,.3);border-radius:.75rem;padding:.75rem 1rem;color:#f87171;font-size:.85rem}.billing-fields{display:flex;flex-direction:column;gap:1rem}.billing-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.billing-field{display:flex;flex-direction:column;gap:.35rem}.billing-field label{display:flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;color:#ffffffb3}.billing-field label .required{color:#f87171}.billing-field input{width:100%;padding:.7rem .85rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:.6rem;color:#fff;font-size:.95rem;font-family:inherit;transition:border-color .2s,box-shadow .2s;outline:none;box-sizing:border-box}.billing-field input::placeholder{color:#ffffff40}.billing-field input:focus{border-color:#f97316;box-shadow:0 0 0 3px #f973161f}.billing-field.has-error input{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441f}.field-error{font-size:.75rem;color:#f87171;margin-top:.1rem}.phone-input-wrapper{display:flex;align-items:stretch}.phone-prefix{display:flex;align-items:center;padding:0 .75rem;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-right:none;border-radius:.6rem 0 0 .6rem;color:#ffffff80;font-size:.9rem;font-weight:600;white-space:nowrap}.phone-input-wrapper input{border-radius:0 .6rem .6rem 0!important}.billing-info-note{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;background:#22c55e0f;border:1px solid rgba(34,197,94,.15);border-radius:.6rem;font-size:.75rem;color:#ffffff73}.billing-info-note svg{color:#22c55e;flex-shrink:0}.billing-actions{display:flex;gap:.75rem;padding-top:.25rem}.billing-btn-cancel{flex:0 0 auto;padding:.75rem 1.25rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;color:#fff9;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.billing-btn-cancel:hover{background:#ffffff1a;color:#fff}.billing-btn-submit{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#f97316,#ea580c);border:none;border-radius:.75rem;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 15px #f9731640}.billing-btn-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #f9731659}.billing-btn-submit:disabled{opacity:.6;cursor:not-allowed}@media(max-width:500px){.billing-form{padding:1.25rem}.billing-field-row{grid-template-columns:1fr}}.billing-terms{padding:.75rem 0 0}.billing-terms-label{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-size:.82rem;color:#ffffff8c}.billing-terms-checkbox{margin-top:2px;accent-color:#f97316;width:16px;height:16px;flex-shrink:0;cursor:pointer}.billing-terms-text{line-height:1.5}.billing-terms-link{background:none;border:none;padding:0;color:#f97316;text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:inherit;font-family:inherit;transition:color .2s}.billing-terms-link:hover{color:#fb923c}.billing-terms.has-error .billing-terms-checkbox{outline:2px solid #ef4444;outline-offset:1px;border-radius:2px}.legal-popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10010;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:1rem}.legal-popup-modal{background:#1a1a2e;border:1px solid rgba(255,255,255,.1);border-radius:1rem;width:100%;max-width:620px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080}.legal-popup-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}.legal-popup-title{font-size:1.1rem;font-weight:700;color:#fff;margin:0}.legal-popup-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:.5rem;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#fff9;cursor:pointer;transition:all .2s;flex-shrink:0}.legal-popup-close:hover{background:#ffffff1f;color:#fff}.legal-popup-body{padding:1.25rem;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:1.25rem}.legal-popup-section h4{font-size:.9rem;font-weight:700;color:#f97316;margin:0 0 .5rem}.legal-popup-section>div{font-size:.82rem;color:#fff9;line-height:1.75}.legal-popup-section>div strong{color:#ffffffd9}@media(max-width:500px){.legal-popup-overlay{padding:0}.legal-popup-modal{max-width:100%;max-height:100%;height:100%;border-radius:0}}.subscription-page{min-height:100vh;background:#07090a;color:#fff;position:relative;overflow-x:hidden}.subscription-page:before{content:"";position:fixed;top:-30%;left:50%;transform:translate(-50%);width:900px;height:600px;background:radial-gradient(ellipse,rgba(249,115,22,.08) 0%,rgba(139,92,246,.04) 40%,transparent 70%);pointer-events:none;z-index:0}.subscription-header{background:#07090ad9;border-bottom:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}.subscription-header-inner{max-width:1100px;margin:0 auto;padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.subscription-back-btn{display:flex;align-items:center;gap:.4rem;background:none;border:none;color:#ffffff73;font-size:.85rem;cursor:pointer;transition:color .2s}.subscription-back-btn:hover{color:#fff}.subscription-header-title{font-size:1.1rem;font-weight:600;color:#ffffffb3}.subscription-content{max-width:1100px;margin:0 auto;padding:0 1.5rem 4rem;position:relative;z-index:1}.subscription-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:6rem 2rem;color:#fff6}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin .8s linear infinite}.subscription-hero{text-align:center;padding:1.5rem 1rem 2.5rem}.subscription-hero-title{font-size:2.75rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0;background:linear-gradient(135deg,#fff 30%,#ffffffa6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subscription-hero-subtitle{font-size:1.05rem;color:#fff6;margin:.75rem 0 0;font-weight:400}.subscription-current-banner{display:inline-flex;align-items:center;gap:.75rem;margin-top:1.25rem;padding:.6rem 1.25rem;background:#f9731614;border:1px solid rgba(249,115,22,.2);border-radius:100px;font-size:.85rem}.current-banner-icon{color:#f97316}.current-banner-text{color:#ffffffb3}.current-banner-plan{color:#f97316;font-weight:700}.current-banner-divider{width:1px;height:16px;background:#ffffff1f}.current-banner-days{color:#ffffff73;font-weight:500}.subscription-plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start;margin-bottom:3rem}.subscription-plan-card{position:relative;background:#ffffff08;border:1px solid rgba(255,255,255,.07);border-radius:1.25rem;padding:2rem 1.75rem;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.subscription-plan-card:hover{transform:translateY(-4px);border-color:#ffffff1f;box-shadow:0 16px 48px #0000004d}.subscription-plan-card.recommended{background:linear-gradient(180deg,#8b5cf60f,#f973160a);border-color:#8b5cf64d;box-shadow:0 0 30px #8b5cf614,0 0 80px #f973160a}.subscription-plan-card.recommended:hover{border-color:#8b5cf680;box-shadow:0 0 40px #8b5cf61f,0 20px 60px #00000059}.subscription-plan-card.current{border-color:#f9731640}.subscription-plan-card.plus{background:linear-gradient(180deg,#eab3080d,#fb923c08);border-color:#eab30833}.subscription-plan-card.plus:hover{border-color:#eab30866;box-shadow:0 0 40px #eab30814,0 20px 60px #00000059}.plan-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.35rem;padding:.3rem 1rem;border-radius:100px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.plan-badge.popular{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;box-shadow:0 4px 12px #8b5cf659}.plan-badge.active{background:#f9731626;border:1px solid rgba(249,115,22,.3);color:#f97316}.plan-badge.premium{background:linear-gradient(135deg,#eab308,#f59e0b);color:#000;box-shadow:0 4px 12px #eab30859}.plan-card-header{margin-bottom:1.5rem}.plan-icon{font-size:2rem;margin-bottom:.75rem;display:block}.plan-name{font-size:1.3rem;font-weight:700;color:#fff;margin:0;letter-spacing:-.01em}.plan-description{font-size:.82rem;color:#fff6;margin:.35rem 0 0;line-height:1.5}.plan-pricing{margin-bottom:1.75rem}.plan-price-row{display:flex;align-items:baseline;gap:.15rem}.plan-price-amount{font-size:2.5rem;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1}.plan-price-period{font-size:.9rem;color:#ffffff59;font-weight:400}.plan-price-subtext{font-size:.78rem;color:#ffffff4d;margin:.4rem 0 0}.plan-savings-badge{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;padding:.25rem .65rem;background:#22c55e1a;border:1px solid rgba(34,197,94,.2);border-radius:100px;font-size:.72rem;font-weight:600;color:#22c55e}.plan-features{list-style:none;padding:0;margin:0 0 2rem;flex:1}.plan-features li{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;font-size:.85rem;color:#ffffffb3}.plan-features li.included .feature-check{color:#22c55e;flex-shrink:0}.plan-features li.plus-feature{color:#ffffffe6}.feature-star{font-size:.85rem;flex-shrink:0}.plan-cta{margin-top:auto}.plan-cta-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.5rem;border:none;border-radius:.75rem;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .25s ease;font-family:inherit}.plan-cta-btn.primary{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;box-shadow:0 4px 16px #f9731640}.plan-cta-btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #f9731659}.plan-cta-btn.featured{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;box-shadow:0 4px 16px #8b5cf64d}.plan-cta-btn.featured:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #8b5cf666}.plan-cta-btn.premium-btn{background:linear-gradient(135deg,#eab308,#f59e0b);color:#000;font-weight:700;box-shadow:0 4px 16px #eab3084d}.plan-cta-btn.premium-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #eab30866}.plan-cta-btn.extend{background:#f973161a;border:1px solid rgba(249,115,22,.3);color:#f97316}.plan-cta-btn.extend:hover:not(:disabled){background:#f9731626;transform:translateY(-1px)}.plan-divider{height:1px;background:#ffffff0f;margin:0 -.5rem 1.25rem}.plan-price-contact{font-size:1.1rem!important;color:#ffffff80!important}.plan-cta-btn:disabled{opacity:.5;cursor:not-allowed}.subscription-trust-section{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.05)}.trust-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#ffffff4d}.trust-item svg{color:#fff3;flex-shrink:0}.subscription-terms-section{text-align:center;padding:1rem 0 .5rem}.subscription-terms-label{display:inline-flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-size:.82rem;color:#ffffff80;text-align:left;max-width:500px}.subscription-terms-checkbox{margin-top:2px;accent-color:#f97316;width:16px;height:16px;flex-shrink:0;cursor:pointer}.subscription-terms-text a{color:#f97316;text-decoration:underline;text-underline-offset:2px;transition:color .2s}.subscription-terms-text a:hover{color:#fb923c}.subscription-payment-logos{display:flex;align-items:center;justify-content:center;gap:1.75rem;padding:1rem 0 .5rem;opacity:.45;transition:opacity .3s}.subscription-payment-logos:hover{opacity:.7}.payment-logo{height:auto;object-fit:contain;filter:brightness(.9)}.payment-logo.iyzico-logo{width:120px}.payment-logo.paytr-logo{width:100px}.payment-logo.visa-logo{width:55px}.payment-logo.mc-logo{width:42px}.subscription-plan-card.coming-soon{opacity:.7}.subscription-plan-card.coming-soon:hover{transform:none}.plan-badge.coming-soon-badge{background:#ffffff1a;border:1px solid rgba(255,255,255,.15);color:#fff9}.plan-price-coming-soon{font-size:1.2rem!important;color:#ffffff59!important;font-weight:600!important;font-style:italic}.plan-cta-btn.coming-soon-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#ffffff59;cursor:not-allowed}.subscription-solos-section{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.05)}.solos-section-title{font-size:1.4rem;font-weight:700;color:#fff;margin:0 0 .35rem;text-align:center}.solos-section-subtitle{font-size:.88rem;color:#ffffff59;margin:0 0 1.5rem;text-align:center}.solos-scroll-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;max-height:360px;overflow-y:auto;padding:.25rem}.solo-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:.65rem;transition:border-color .2s}.solo-item:hover{border-color:#f9731640}.solo-item-thumb{width:40px;height:40px;border-radius:.4rem;object-fit:cover;flex-shrink:0}.solo-item-info{display:flex;flex-direction:column;min-width:0}.solo-item-title{font-size:.82rem;font-weight:600;color:#ffffffd9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.solo-item-artist{font-size:.72rem;color:#ffffff59;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:600px){.solos-scroll-list{grid-template-columns:1fr}}.subscription-message{padding:.85rem 1.25rem;border-radius:.75rem;font-size:.87rem;margin-bottom:1.5rem;text-align:center}.subscription-message-error{background:#ef44441a;border:1px solid rgba(239,68,68,.2);color:#f87171}.subscription-message-success{background:#22c55e1a;border:1px solid rgba(34,197,94,.2);color:#22c55e}.payment-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem}.payment-overlay-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.payment-overlay-content{position:relative;z-index:1;width:100%;max-width:620px;max-height:92vh;overflow-y:auto;background:#fff;border-radius:1rem;padding:0;box-shadow:0 20px 60px #00000080}.payment-overlay-content.billing-mode{background:#1a1a2e;border:1px solid rgba(255,255,255,.08)}.payment-overlay-content.iframe-mode{height:95vh;max-height:95vh;display:flex;flex-direction:column;overflow:hidden}.payment-overlay-close{position:fixed;top:1.5rem;right:1.5rem;z-index:10001;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);color:#fff;cursor:pointer;transition:all .2s}.payment-overlay-close:hover{background:#fff3}.payment-topbar{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem .6rem 1rem;background:#1a1a2e;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;border-radius:1rem 1rem 0 0}.payment-topbar-brand{display:flex;align-items:center;gap:.6rem}.payment-topbar-logo{width:28px;height:28px;border-radius:6px;object-fit:contain}.payment-topbar-title{font-size:.9rem;font-weight:600;color:#ffffffb3}.payment-topbar-close{display:flex;align-items:center;gap:.35rem;padding:.5rem .85rem;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:.5rem;color:#fff;font-size:.82rem;font-weight:500;cursor:pointer;transition:background .2s;font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.payment-topbar-close:hover{background:#ffffff26}.payment-iframe{width:100%;flex:1;min-height:0;border:none;border-radius:0 0 1rem 1rem;background:#fff}.payment-form-container{min-height:300px}.payment-form-container iframe{width:100%!important;min-height:400px;border:none}.payment-form-container #iyzipay-checkout-form{width:100%!important;min-height:400px}@media(max-width:900px){.subscription-plans-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}.subscription-hero-title{font-size:2rem}.subscription-trust-section{gap:1.25rem}}@media(max-width:768px){.payment-overlay{padding:0;align-items:stretch;justify-content:stretch}.payment-overlay-content{max-width:100%;max-height:100%;height:100%;border-radius:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}.payment-overlay-content.billing-mode{max-width:100%}.payment-overlay-content.iframe-mode{height:100%;max-height:100%}.payment-iframe{flex:1;height:100%;min-height:0;border-radius:0}.payment-topbar{border-radius:0}.payment-overlay.has-iframe .payment-overlay-close{display:none}.payment-overlay.has-iframe .payment-overlay-content.iframe-mode{background:#1a1a2e}.payment-overlay-close{top:.75rem;right:.75rem;background:#00000080;border-color:#fff3}.payment-form-container{flex:1;min-height:0;display:flex;flex-direction:column}.payment-form-container iframe{flex:1;min-height:500px!important;height:100%!important}.payment-form-container #iyzipay-checkout-form{flex:1;display:flex;flex-direction:column;min-height:500px}}@media(max-width:500px){.subscription-hero{padding:2.5rem .5rem 1.5rem}.subscription-hero-title{font-size:1.6rem}.subscription-hero-subtitle{font-size:.9rem}.subscription-plan-card{padding:1.5rem 1.25rem}.plan-price-amount{font-size:2rem}.subscription-trust-section{flex-direction:column;align-items:center;gap:.75rem}.subscription-content{padding:0 1rem 3rem}}.btn{font-family:var(--font-body);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-normal);border:var(--stroke-width, 1.5px) solid;border-radius:var(--radius-md, 16px);cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);white-space:nowrap;background:transparent}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:8px 16px;font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-tight)}.btn-md{padding:12px 24px;font-size:var(--font-size-base)}.btn-lg{padding:16px 32px;font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-wide)}.btn-primary{background:var(--gradient-primary);border-color:var(--color-accent);color:var(--color-bg);box-shadow:var(--shadow-button)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button-hover);background:var(--gradient-primary)}.btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--color-bg-card);border-color:var(--color-border-default);color:var(--color-accent);box-shadow:var(--shadow-glow-sm)}.btn-secondary:hover:not(:disabled){background:var(--color-bg-card-hover);border-color:var(--color-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow-md)}.btn-secondary:active:not(:disabled){transform:translateY(0)}.btn-ghost{background:transparent;border-color:var(--color-border-muted);color:var(--color-text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--color-bg-card);border-color:var(--color-border-default);color:var(--color-accent)}.btn-ghost:active:not(:disabled){background:var(--color-bg-card-hover)}.theme-hello-kitty .btn{border-width:2.2px;border-radius:20px;border-color:var(--color-border-default);background:var(--color-bg-card);font-family:var(--font-body);box-shadow:var(--shadow-button)}.theme-hello-kitty .btn-primary{background:var(--gradient-primary);border-color:var(--color-accent);color:#fff;box-shadow:var(--shadow-button)}.theme-hello-kitty .btn-primary:hover:not(:disabled){background:var(--gradient-primary);border-width:2.5px;box-shadow:var(--shadow-button-hover);transform:translateY(-2px)}.theme-hello-kitty .btn-secondary{background:var(--color-bg-card);border-color:var(--color-border-default);color:var(--color-accent);box-shadow:var(--shadow-sm)}.theme-hello-kitty .btn-secondary:hover:not(:disabled){background:var(--color-bg-card-hover);border-color:var(--color-border-hover);border-width:2.5px;box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.theme-hello-kitty .btn-ghost{border-width:2px;background:transparent}.theme-hello-kitty .btn-ghost:hover:not(:disabled){background:var(--color-accent-soft);border-width:2.2px;box-shadow:var(--shadow-sm)}.theme-kuromi .btn{border-width:2px;border-radius:14px;border-color:var(--color-border-default);background:var(--color-surface-alt);color:var(--color-text-primary);font-family:var(--font-body);box-shadow:var(--shadow-button)}.theme-kuromi .btn-primary{background:var(--gradient-primary);border-color:var(--color-accent);color:var(--color-text-primary);box-shadow:var(--shadow-button)}.theme-kuromi .btn-primary:hover:not(:disabled){background:var(--gradient-primary);border-color:var(--color-border-hover);box-shadow:var(--shadow-button-hover);transform:translateY(-2px)}.theme-kuromi .btn-secondary{background:var(--color-surface-alt);border-color:var(--color-border-default);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.theme-kuromi .btn-secondary:hover:not(:disabled){background:var(--color-bg-card-hover);border-color:var(--color-border-hover);box-shadow:var(--shadow-glow-sm);transform:translateY(-2px)}.theme-kuromi .btn-ghost{border-width:2px;background:transparent;border-color:var(--color-border-muted)}.theme-kuromi .btn-ghost:hover:not(:disabled){background:var(--color-accent-soft);border-color:var(--color-border-hover);box-shadow:var(--shadow-glow-subtle)}.pathway-selection-v2{min-height:100vh;background:var(--color-bg);position:relative;color:var(--color-text-primary);overflow-x:hidden}.pathway-bg-effects{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.pathway-bg-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 50% at 20% 0%,var(--color-accent-soft) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 100%,var(--color-glow-subtle) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 50% 50%,var(--color-glow) 0%,transparent 40%);animation:bgPulse 15s ease-in-out infinite}@keyframes bgPulse{0%,to{opacity:1}50%{opacity:.7}}.pathway-bg-particles{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 0%,var(--color-glow-subtle) 50%,transparent 100%);opacity:.5}.pathway-header{background:var(--color-surface);border-bottom:1px solid var(--color-border-muted);padding:20px 28px;position:relative;z-index:100}.pathway-header-inner{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:32px;max-width:1300px;margin:0 auto}.pathway-header-left{display:flex;align-items:center;gap:16px}.pathway-header-logo{height:44px;width:auto;object-fit:contain;flex-shrink:0;cursor:pointer;transition:all .2s ease;opacity:.9}.pathway-header-logo:hover{opacity:1;transform:scale(1.05)}.pathway-header-center{display:flex}.pathway-header-title-section{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--color-accent);padding-left:16px}.pathway-header-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}.pathway-header-title{font-family:var(--font-heading);font-size:16px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent);margin:0;line-height:1.2;text-shadow:0 0 20px var(--color-glow-subtle)}.pathway-header-right{display:flex;align-items:center;justify-content:flex-end;gap:12px}.pathway-header-exit-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s ease-out;flex-shrink:0;margin-left:auto}.pathway-header-exit-btn:hover{border-color:var(--color-border-hover);color:var(--color-text-primary);background:var(--color-bg-card-hover);transform:scale(1.03)}.pathway-header-exit-btn:active{transform:scale(.98)}.pathway-hero{position:relative;z-index:1;padding:32px 28px;max-width:1356px;margin:0 auto}.pathway-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.pathway-hero-card{position:relative;border-radius:20px;overflow:hidden;cursor:pointer;display:flex;align-items:center;min-height:180px;background:#fbbf240d;border:2px solid rgba(251,191,36,.3);transition:all .3s ease}.pathway-hero-card:hover{border-color:#fbbf2499;box-shadow:0 0 40px #fbbf2433,0 20px 60px #0006;transform:translateY(-2px)}.pathway-hero-solos{background:#8b5cf60d;border-color:#8b5cf64d}.pathway-hero-solos:hover{border-color:#8b5cf699;box-shadow:0 0 40px #8b5cf633,0 20px 60px #0006}.pathway-hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}.pathway-hero-bg img{width:100%;height:300%;object-fit:cover;object-position:center top;opacity:.35;animation:scrollDown 30s linear infinite}@keyframes scrollDown{0%{transform:translateY(0)}50%{transform:translateY(-30%)}1000%{transform:translateY(0)}}.pathway-hero-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,var(--color-bg-overlay) 0%,rgba(var(--color-neutral-0),.7) 50%,rgba(var(--color-neutral-0),.3) 100%)}.pathway-hero-overlay-solos{background:linear-gradient(90deg,var(--color-bg-overlay) 0%,rgba(var(--color-neutral-0),.6) 40%,rgba(var(--color-neutral-0),.2) 100%)}.pathway-hero-content{position:relative;z-index:1;padding:32px 40px;flex:1}.pathway-hero-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fbbf24;margin-bottom:10px}.pathway-hero-eyebrow-solos{color:#a78bfa}.pathway-hero-title{font-family:var(--font-heading, "Inter", sans-serif);font-size:28px;font-weight:800;letter-spacing:.02em;color:var(--color-text-primary);margin:0 0 8px;text-shadow:var(--shadow-sm)}.pathway-hero-title-solos{background:linear-gradient(135deg,#a78bfa,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.pathway-hero-subtitle{font-size:14px;color:var(--color-text-secondary);margin:0 0 20px;max-width:400px}.pathway-hero-cta{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:10px;border:none;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#0a0a0f;font-family:var(--font-body, "Inter", sans-serif);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .2s ease}.pathway-hero-cta:hover{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 0 30px #fbbf2466;transform:translateY(-2px)}.pathway-hero-cta-solos{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.pathway-hero-cta-solos:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:0 0 30px #8b5cf666}.pathway-hero-cta-arrow{font-size:16px;transition:transform .2s ease}.pathway-hero-cta:hover .pathway-hero-cta-arrow{transform:translate(4px)}.pathway-hero-progress{position:relative;z-index:1;padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:8px}.pathway-hero-progress-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}.pathway-main-grid{position:relative;z-index:1;max-width:1356px;margin:0 auto;padding:0 28px 80px}.pathway-grid-v2{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.pathway-card-v2{position:relative;border-radius:16px;overflow:hidden;background:var(--color-bg-card);border:1px solid var(--color-border-muted);cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;contain:content}.pathway-card-v2:hover{background:var(--color-bg-card-hover);border-color:#ffffff26;box-shadow:0 20px 50px -12px #00000080,0 0 0 1px #ffffff14;transform:translateY(-8px) scale(1.01)}.pathway-card-v2-media{position:relative;height:160px;overflow:hidden}.pathway-card-v2-image{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;transition:transform .5s ease}.pathway-card-v2:hover .pathway-card-v2-image{transform:scale(1.1)}.pathway-card-v2-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}.pathway-card-v2-video.visible{opacity:1}.pathway-card-v2-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 0%,rgba(var(--color-neutral-0),.4) 50%,var(--color-bg-overlay) 100%)}.pathway-card-v2-title-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2}.pathway-card-v2-title{font-family:var(--font-heading, "Inter", sans-serif);font-size:18px;font-weight:800;letter-spacing:.02em;color:#fff;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.5);text-transform:uppercase}.pathway-card-v2-progress-ring{position:absolute;top:12px;right:12px;z-index:3;background:#00000080;border-radius:50%;padding:4px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pathway-card-v2-content{padding:18px 20px 20px;display:flex;flex-direction:column;gap:16px;flex:1;border-top:1px solid var(--color-border-muted)}.pathway-card-v2-description{font-size:13px;color:var(--color-text-muted);margin:0;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;letter-spacing:-.01em}.pathway-card-v2-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:16px}.pathway-card-v2-stats{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.pathway-card-v2-stats-text{font-size:13px;font-weight:600;color:var(--color-text-secondary);letter-spacing:-.01em}.pathway-card-v2-stats-bar{height:4px;background:var(--color-border-muted);border-radius:2px;overflow:hidden;width:100%}.pathway-card-v2-stats-bar-fill{height:100%;background:var(--color-accent);border-radius:2px;transition:width .4s ease}.pathway-card-v2-button{padding:10px 20px;border-radius:8px;border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);font-family:var(--font-body, "Inter", sans-serif);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .25s ease;white-space:nowrap;flex-shrink:0}.pathway-card-v2:hover .pathway-card-v2-button{background:var(--color-accent);border-color:var(--color-accent);color:#fff;box-shadow:0 4px 12px #0003}.circular-progress{flex-shrink:0}.circular-progress-value{transition:stroke-dashoffset .6s ease}.circular-progress-text{font-family:var(--font-mono, monospace)}.pathway-card-v2-edu-tag{position:absolute;top:12px;right:12px;z-index:3;padding:4px 10px;border-radius:6px;background:#6366f1cc;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.4}.pathway-card-v2-edu-info{display:flex;align-items:center;gap:6px}.pathway-card-v2-edu-info-icon{font-size:14px;line-height:1}.pathway-card-v2-edu-info-text{font-size:13px;font-weight:600;color:var(--color-text-secondary);letter-spacing:-.01em}.pathway-loading-container,.pathway-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:24px;padding:40px}.pathway-loading-spinner{width:48px;height:48px;border:3px solid var(--color-border-muted);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}.pathway-loading-container p,.pathway-error-container p{font-size:16px;color:var(--color-text-secondary);margin:0}@media(min-width:1600px){.pathway-grid-v2{grid-template-columns:repeat(5,1fr)}}@media(max-width:1200px){.pathway-grid-v2{grid-template-columns:repeat(3,1fr);gap:20px}}@media(max-width:1023px){.pathway-grid-v2{grid-template-columns:repeat(2,1fr);gap:16px}.pathway-header{padding:12px 16px}.pathway-header-inner{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;grid-template-columns:none}.pathway-header-left{display:flex;flex-direction:row;align-items:center;gap:10px;flex:1;min-width:0}.pathway-header-logo{height:32px;flex-shrink:0}.pathway-header-title-section{flex:1;min-width:0;gap:2px}.pathway-header-eyebrow{font-size:9px;letter-spacing:.15em}.pathway-header-title{font-size:13px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pathway-header-center{display:none}.pathway-header-right{flex:0 0 auto;margin-left:auto;width:auto}.pathway-header-exit-btn{width:32px;height:32px;border-radius:8px}.pathway-hero{padding:20px}.pathway-hero-grid{grid-template-columns:1fr;gap:16px}.pathway-hero-title{font-size:22px}.pathway-main-grid{padding:0 20px 60px}}@media(max-width:768px){.pathway-header-logo{height:28px}.pathway-hero-card{flex-direction:column;min-height:auto}.pathway-hero-content{padding:24px;text-align:center}.pathway-hero-title{font-size:20px}.pathway-hero-subtitle{max-width:100%}.pathway-hero-progress{padding:0 24px 24px}.pathway-card-v2-media{height:220px}.pathway-card-v2-title{font-size:16px}.pathway-card-v2-content{padding:14px 16px 16px}}@media(max-width:480px){.pathway-grid-v2{grid-template-columns:1fr;gap:14px}.pathway-hero-content{padding:20px}.pathway-hero-title{font-size:18px}.pathway-hero-cta{padding:10px 18px;font-size:11px}.pathway-card-v2-media{height:200px}.pathway-card-v2-button{padding:8px 14px;font-size:11px}}.theme-light .pathway-header{background:linear-gradient(180deg,#fff,#f8fafc);box-shadow:0 1px 3px #0000000f,0 1px #fff inset}.theme-light .pathway-header-exit-btn{background:#f5f5f5;border-color:#e0e0e0;color:#666}.theme-light .pathway-header-exit-btn:hover{border-color:#ccc;color:#333;background:#ebebeb}.theme-light .pathway-hero-card{border-color:#00000026}.theme-light .pathway-hero-bg img{opacity:.85;filter:brightness(.4) saturate(1.1)}.theme-light .pathway-hero-overlay{background:linear-gradient(90deg,#000000b3,#00000080,#0000004d)}.theme-light .pathway-hero-eyebrow{color:#fbbf24;text-shadow:0 1px 3px rgba(0,0,0,.5)}.theme-light .pathway-hero-title{color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.6)}.theme-light .pathway-hero-subtitle{color:#ffffffd9;text-shadow:0 1px 3px rgba(0,0,0,.5)}.theme-light .pathway-hero-cta{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#0a0a0f;box-shadow:0 4px 12px #0000004d}.theme-light .pathway-hero-cta:hover{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 6px 20px #0006}.theme-light .pathway-card-v2{background:#fff;border-color:#0000001a}.theme-light .pathway-card-v2:hover{background:#fff;border-color:#0003;box-shadow:0 20px 50px -12px #0003}.theme-light .pathway-card-v2-content{border-top-color:#00000014}.theme-light .pathway-card-v2-description{color:#4b5563}.theme-light .pathway-card-v2-stats-text{color:#1f2937;font-weight:700}.theme-light .pathway-card-v2-stats-bar{background:#0000001a}.theme-light .pathway-card-v2-button{border-color:#0003;color:#374151}.theme-light .pathway-card-v2:hover .pathway-card-v2-button{background:#ff6e00;border-color:#ff6e00;color:#fff}.theme-light .pathway-card-v2-progress-ring{background:#0009}.pathway-hero-disabled{cursor:default!important;pointer-events:auto}.pathway-hero-disabled:hover{transform:none;border-color:#fbbf2426;box-shadow:none}.pathway-hero-disabled-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:#00000073;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:none}.pathway-hero-coming-soon{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:10px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:var(--color-text-muted);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.fretboard{--fret-wood: #1a1613;--fret-wood-light: #2d2520;--fret-wire: #c0c0c0;--fret-wire-shine: #e8e8e8;--string-color: #c9a960;--string-shadow: rgba(0, 0, 0, .5);--nut-color: #f0ebe0;--marker-color: rgba(255, 255, 255, .12);--correct-color: #4CAF50;--wrong-color: #F44336;--target-color: #2196F3;--selected-color: #9C27B0;--hint-color: #FF9800;--highlighted-color: #00BCD4;--fret-count: 24;--string-height: 32px;--note-size: 24px;--fret-number-height: 18px;--string-name-width: 28px;position:relative;width:100%;overflow:hidden;user-select:none;-webkit-user-select:none;font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,sans-serif}.fretboard--compact{--string-height: 26px;--note-size: 20px}.fretboard__fret-numbers{display:flex;padding-left:var(--string-name-width);margin-bottom:2px;height:var(--fret-number-height)}.fretboard__fret-number{flex:1;min-width:0;text-align:center;font-size:10px;font-weight:600;color:var(--color-text-secondary, #888);opacity:.8}.fretboard__fret-number:first-child{flex:.5}.fretboard__board{position:relative;background:linear-gradient(180deg,var(--fret-wood) 0%,var(--fret-wood-light) 50%,var(--fret-wood) 100%);border-radius:4px;padding:6px 0;box-shadow:inset 0 2px 4px #0006,0 4px 8px #0000004d}.fretboard__markers{position:absolute;top:0;left:var(--string-name-width);right:0;bottom:0;display:flex;pointer-events:none;z-index:1}.fretboard__marker-slot{flex:1;min-width:0;display:flex;align-items:center;justify-content:center}.fretboard__marker-slot:first-child{flex:.5}.fretboard__marker{display:flex;gap:6px}.fretboard__marker--double{flex-direction:column;gap:35px}.fretboard__marker-dot{width:10px;height:10px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),var(--marker-color));border-radius:50%;box-shadow:inset 0 1px 2px #0000004d}.fretboard__strings{position:relative;z-index:3}.fretboard__string-row{display:flex;align-items:center;height:var(--string-height);position:relative}.fretboard__string-name{width:var(--string-name-width);flex-shrink:0;text-align:center;font-size:11px;font-weight:700;color:#ffffffbf;text-shadow:0 1px 2px rgba(0,0,0,.6)}.fretboard__frets{display:flex;flex:1;position:relative;min-width:0}.fretboard__note{flex:1;min-width:0;height:var(--string-height);display:flex;align-items:center;justify-content:center;position:relative;cursor:default;box-sizing:border-box}.fretboard__note:first-child{flex:.5}.fretboard__note--selectable{cursor:pointer}.fretboard__note--active{z-index:5}.fretboard__note--highlighted:before,.fretboard__note--selected:before,.fretboard__note--target:before,.fretboard__note--correct:before,.fretboard__note--wrong:before,.fretboard__note--hint:before,.fretboard__note--selectable:hover:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--note-size);height:var(--note-size);border-radius:50%;transition:all .15s ease}.fretboard__note--highlighted:before{background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--note-color) 100%,white 30%),var(--note-color));box-shadow:0 2px 4px #0000004d,0 0 8px color-mix(in srgb,var(--note-color) 50%,transparent);border:2px solid rgba(255,193,7,.6);opacity:.8}.fretboard__note--selected:before{background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--selected-color) 100%,white 40%),var(--selected-color));box-shadow:0 2px 6px #0006,0 0 12px color-mix(in srgb,var(--selected-color) 60%,transparent);transform:translate(-50%,-50%) scale(1.1);transform-origin:center center}.fretboard__note--target:before{background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--target-color) 100%,white 40%),var(--target-color));box-shadow:0 2px 6px #0006,0 0 16px color-mix(in srgb,var(--target-color) 70%,transparent);animation:target-pulse 1.5s ease-in-out infinite;transform-origin:center center}.fretboard__note--correct:before{background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--correct-color) 100%,white 40%),var(--correct-color));box-shadow:0 2px 6px #0006,0 0 12px color-mix(in srgb,var(--correct-color) 60%,transparent);animation:correct-pop .3s ease-out}.fretboard__note--wrong:before{background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--wrong-color) 100%,white 40%),var(--wrong-color));box-shadow:0 2px 6px #0006,0 0 12px color-mix(in srgb,var(--wrong-color) 60%,transparent);animation:wrong-shake .4s ease-out}.fretboard__note--hint:before{background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--hint-color) 100%,white 40%),var(--hint-color));box-shadow:0 2px 6px #0006,0 0 12px color-mix(in srgb,var(--hint-color) 60%,transparent);animation:hint-pulse 1s ease-in-out infinite}.fretboard__note--selectable:not(.fretboard__note--selected):not(.fretboard__note--correct):not(.fretboard__note--wrong):hover:before{background:#ffffff26;border:2px dashed rgba(255,255,255,.4)}.fretboard__note-name{position:relative;z-index:6;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none;display:inline-block;line-height:1;text-align:center}.fretboard__note-name sub{font-size:8px;opacity:.7}.fretboard__string-lines{position:absolute;top:8px;left:var(--string-name-width);right:0;bottom:8px;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none;z-index:2}.fretboard__string-line{height:var(--string-thickness, 1px);background:linear-gradient(90deg,var(--nut-color) 0%,var(--nut-color) calc(var(--fret-width) * .3),var(--string-color) calc(var(--fret-width) * .6),var(--string-color) 100%);box-shadow:0 1px 1px var(--string-shadow),0 0 3px #d4af374d}.fretboard__fret-wires{position:absolute;top:0;left:var(--string-name-width);right:0;bottom:0;display:flex;pointer-events:none;z-index:4}.fretboard__fret-wire{flex:1;min-width:0;position:relative}.fretboard__fret-wire:first-child{flex:.5}.fretboard__fret-wire:after{content:"";position:absolute;right:0;top:3px;bottom:3px;width:2px;background:linear-gradient(90deg,var(--fret-wire) 0%,var(--fret-wire-shine) 50%,var(--fret-wire) 100%);border-radius:1px;box-shadow:1px 0 2px #0006,-1px 0 1px #ffffff1a}.fretboard__fret-wire--nut:after{width:5px;background:linear-gradient(90deg,#ddd 0%,var(--nut-color) 30%,var(--nut-color) 70%,#ddd 100%);box-shadow:2px 0 3px #00000080,-1px 0 2px #fff3}@keyframes target-pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.15);opacity:.85}}@keyframes correct-pop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes wrong-shake{0%,to{transform:translate(-50%,-50%) translate(0)}20%{transform:translate(-50%,-50%) translate(-4px)}40%{transform:translate(-50%,-50%) translate(4px)}60%{transform:translate(-50%,-50%) translate(-4px)}80%{transform:translate(-50%,-50%) translate(4px)}}@keyframes hint-pulse{0%,to{opacity:.6}50%{opacity:1}}@media(max-width:768px){.fretboard{--string-height: 28px;--note-size: 20px;--fret-number-height: 16px;--string-name-width: 24px}.fretboard__fret-number{font-size:9px}.fretboard__string-name{font-size:10px}.fretboard__marker-dot{width:8px;height:8px}.fretboard__marker--double{gap:28px}.fretboard__note-name{font-size:9px}.fretboard__fret-wire:after{width:1.5px}}@media(max-width:480px){.fretboard{--string-height: 24px;--note-size: 16px;--fret-number-height: 14px;--string-name-width: 20px}.fretboard__fret-number{font-size:8px}.fretboard__string-name{font-size:9px}.fretboard__board{padding:4px 0}.fretboard__marker-dot{width:6px;height:6px}.fretboard__marker--double{gap:22px}.fretboard__note-name{font-size:8px}.fretboard__fret-wire:after{width:1px}}.theme-light .fretboard,.theme-vintage .fretboard{--fret-wood: #3a2a20;--fret-wood-light: #4d3d30}.theme-light .fretboard__fret-number,.theme-vintage .fretboard__fret-number{color:#555}@media(max-height:500px)and (orientation:landscape){.fretboard{--string-height: 22px;--note-size: 16px;--fret-number-height: 14px;--string-name-width: 20px}.fretboard__fret-number{font-size:8px}.fretboard__string-name{font-size:9px}.fretboard__board{padding:3px 0}.fretboard__marker-dot{width:6px;height:6px}.fretboard__marker--double{gap:20px}.fretboard__note-name{font-size:8px}.fretboard__fret-wire:after{width:1px}}@media(max-height:400px)and (orientation:landscape){.fretboard{--string-height: 18px;--note-size: 14px;--fret-number-height: 12px;--string-name-width: 16px}.fretboard__fret-number{font-size:7px}.fretboard__string-name{font-size:8px}.fretboard__board{padding:2px 0}.fretboard__marker-dot{width:5px;height:5px}.fretboard__marker--double{gap:16px}.fretboard__note-name{font-size:7px}}.piano-keyboard{--key-width: 48px;--key-height: 180px;--black-key-width: 28px;--black-key-height: 110px;--border-radius: 0 0 6px 6px;--white-key-bg: linear-gradient(180deg, #f8f8f8 0%, #e8e8e8 100%);--white-key-border: #b0b0b0;--black-key-bg: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);--black-key-border: #000;--root-color: #22c55e;--root-bg: linear-gradient(180deg, rgba(34, 197, 94, .4) 0%, rgba(34, 197, 94, .2) 100%);--scale-color: #3b82f6;--scale-bg: linear-gradient(180deg, rgba(59, 130, 246, .35) 0%, rgba(59, 130, 246, .15) 100%);--selected-color: #a855f7;--selected-bg: linear-gradient(180deg, rgba(168, 85, 247, .4) 0%, rgba(168, 85, 247, .2) 100%);--target-color: #f59e0b;--target-bg: linear-gradient(180deg, rgba(245, 158, 11, .4) 0%, rgba(245, 158, 11, .2) 100%);--correct-color: #22c55e;--correct-bg: linear-gradient(180deg, rgba(34, 197, 94, .5) 0%, rgba(34, 197, 94, .3) 100%);--wrong-color: #ef4444;--wrong-bg: linear-gradient(180deg, rgba(239, 68, 68, .4) 0%, rgba(239, 68, 68, .2) 100%);--highlighted-color: #06b6d4;--highlighted-bg: linear-gradient(180deg, rgba(6, 182, 212, .35) 0%, rgba(6, 182, 212, .15) 100%);display:inline-block;-webkit-user-select:none;user-select:none;padding:12px;background:linear-gradient(145deg,#1e1e2e,#151521);border-radius:16px;box-shadow:0 4px 24px #0006,inset 0 1px #ffffff0d}.piano-keyboard--compact{--key-width: 32px;--key-height: 120px;--black-key-width: 20px;--black-key-height: 75px;padding:8px}.piano-keyboard--large{--key-width: 60px;--key-height: 220px;--black-key-width: 36px;--black-key-height: 140px;padding:16px}.piano-keyboard__keys{position:relative;display:flex;background:#2a2a2a;border-radius:8px;padding:4px 4px 0;box-shadow:inset 0 2px 8px #0000004d}.piano-keyboard__white-keys{display:flex;position:relative;z-index:1}.piano-key--white{width:var(--key-width);height:var(--key-height);background:var(--white-key-bg);border:1px solid var(--white-key-border);border-top:none;border-radius:var(--border-radius);margin-right:2px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:12px;cursor:default;transition:all .15s ease;box-shadow:0 2px 4px #0000001a,inset 0 -2px 4px #0000000d}.piano-key--white:last-child{margin-right:0}.piano-key--white:hover{background:linear-gradient(180deg,#fff,#f0f0f0)}.piano-key--white.piano-key--clickable{cursor:pointer}.piano-key--white.piano-key--clickable:hover{transform:translateY(1px);box-shadow:0 1px 2px #0000001a,inset 0 -1px 2px #0000000d}.piano-key--white.piano-key--clickable:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #0000001a}.piano-keyboard__black-keys{position:absolute;top:4px;left:4px;right:4px;height:var(--black-key-height);z-index:2;pointer-events:none}.piano-key--black{position:absolute;width:var(--black-key-width);height:var(--black-key-height);background:var(--black-key-bg);border:1px solid var(--black-key-border);border-top:none;border-radius:var(--border-radius);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;cursor:default;transition:all .15s ease;pointer-events:auto;box-shadow:0 4px 8px #0006,inset 0 -4px 8px #0003}.piano-key--black:hover{background:linear-gradient(180deg,#3a3a3a,#2a2a2a)}.piano-key--black.piano-key--clickable{cursor:pointer}.piano-key--black.piano-key--clickable:hover{transform:translateY(1px)}.piano-key--black.piano-key--clickable:active{transform:translateY(2px);box-shadow:0 2px 4px #0006,inset 0 2px 4px #0000004d}.piano-key__label{font-size:12px;font-weight:600;color:#666;text-align:center;transition:color .15s ease}.piano-key--black .piano-key__label{color:#888;font-size:10px}.piano-keyboard--compact .piano-key__label{font-size:10px}.piano-keyboard--compact .piano-key--black .piano-key__label{font-size:8px}.piano-keyboard--large .piano-key__label{font-size:14px}.piano-key--white.piano-key--root{background:var(--root-bg);border-color:var(--root-color)}.piano-key--white.piano-key--root .piano-key__label{color:var(--root-color);font-weight:700}.piano-key--white.piano-key--scale{background:var(--scale-bg);border-color:var(--scale-color)}.piano-key--white.piano-key--scale .piano-key__label{color:var(--scale-color)}.piano-key--white.piano-key--selected{background:var(--selected-bg);border-color:var(--selected-color);box-shadow:0 0 12px #a855f766,inset 0 0 8px #a855f733}.piano-key--white.piano-key--selected .piano-key__label{color:var(--selected-color)}.piano-key--white.piano-key--target{background:var(--target-bg);border-color:var(--target-color);animation:target-pulse 1.5s ease-in-out infinite}.piano-key--white.piano-key--target .piano-key__label{color:var(--target-color)}.piano-key--white.piano-key--highlighted{background:var(--highlighted-bg);border-color:var(--highlighted-color)}.piano-key--white.piano-key--highlighted .piano-key__label{color:var(--highlighted-color)}.piano-key--white.piano-key--correct{background:var(--correct-bg);border-color:var(--correct-color);animation:correct-pulse .5s ease}.piano-key--white.piano-key--correct .piano-key__label{color:var(--correct-color)}.piano-key--white.piano-key--wrong{background:var(--wrong-bg);border-color:var(--wrong-color);animation:wrong-shake .5s ease}.piano-key--white.piano-key--wrong .piano-key__label{color:var(--wrong-color)}.piano-key--black.piano-key--root{background:linear-gradient(180deg,var(--root-color) 0%,rgba(34,197,94,.7) 100%)}.piano-key--black.piano-key--root .piano-key__label{color:#fff}.piano-key--black.piano-key--scale{background:linear-gradient(180deg,var(--scale-color) 0%,rgba(59,130,246,.7) 100%)}.piano-key--black.piano-key--scale .piano-key__label{color:#fff}.piano-key--black.piano-key--selected{background:linear-gradient(180deg,var(--selected-color) 0%,rgba(168,85,247,.7) 100%);box-shadow:0 0 12px #a855f780,0 4px 8px #0006}.piano-key--black.piano-key--selected .piano-key__label{color:#fff}.piano-key--black.piano-key--target{background:linear-gradient(180deg,var(--target-color) 0%,rgba(245,158,11,.7) 100%);animation:target-pulse 1.5s ease-in-out infinite}.piano-key--black.piano-key--target .piano-key__label{color:#fff}.piano-key--black.piano-key--highlighted{background:linear-gradient(180deg,var(--highlighted-color) 0%,rgba(6,182,212,.7) 100%)}.piano-key--black.piano-key--highlighted .piano-key__label{color:#fff}.piano-key--black.piano-key--correct{background:linear-gradient(180deg,var(--correct-color) 0%,rgba(34,197,94,.7) 100%);animation:correct-pulse .5s ease}.piano-key--black.piano-key--correct .piano-key__label{color:#fff}.piano-key--black.piano-key--wrong{background:linear-gradient(180deg,var(--wrong-color) 0%,rgba(239,68,68,.7) 100%);animation:wrong-shake .5s ease}.piano-key--black.piano-key--wrong .piano-key__label{color:#fff}@keyframes target-pulse{0%,to{opacity:1;box-shadow:0 0 #f59e0b00}50%{opacity:.85;box-shadow:0 0 20px #f59e0b66}}@keyframes correct-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes wrong-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@media(max-width:768px){.piano-keyboard{--key-width: 36px;--key-height: 140px;--black-key-width: 22px;--black-key-height: 90px;padding:8px;overflow-x:auto;max-width:100%}.piano-keyboard__keys{min-width:max-content}.piano-key__label{font-size:10px}.piano-key--black .piano-key__label{font-size:8px}}@media(max-width:480px){.piano-keyboard{--key-width: 28px;--key-height: 110px;--black-key-width: 18px;--black-key-height: 70px;padding:6px}.piano-key__label{font-size:8px}.piano-key--black .piano-key__label{font-size:7px}}.piano-key:focus{outline:2px solid var(--selected-color);outline-offset:2px}.piano-key:focus:not(:focus-visible){outline:none}.piano-key:focus-visible{outline:2px solid var(--selected-color);outline-offset:2px}@media(prefers-contrast:high){.piano-key--white,.piano-key--black{border-width:2px}.piano-key__label{font-weight:700}}@media(prefers-reduced-motion:reduce){.piano-key--target,.piano-key--correct,.piano-key--wrong{animation:none}.piano-key{transition:none}}.compact-game-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:var(--color-surface-elevated);border-radius:12px;border:1px solid var(--color-border-muted);box-shadow:0 2px 8px #0000000d;width:auto;min-width:70px;height:100%;box-sizing:border-box;color:var(--color-text-primary)}.compact-stat{display:flex;align-items:center;gap:6px}.compact-timer{color:var(--color-text-primary);font-weight:700;font-family:inherit;min-width:50px;justify-content:center}.compact-timer.warning{color:var(--color-error);animation:pulse-warning 1s infinite}@keyframes pulse-warning{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.compact-icon{font-size:1.1em}.compact-value{font-size:1em;line-height:1}.compact-lives{display:flex;align-items:center}.compact-hearts-row{display:flex;gap:2px}.compact-heart-icon{font-size:1.1em;transition:opacity .3s}.compact-heart-icon.lost{opacity:.3;filter:grayscale(100%)}.compact-progress{color:var(--color-success);font-weight:700;border:none;padding:0;margin:0;font-size:.9em}@media(max-width:600px){.compact-game-status{gap:4px;padding:2px}.compact-stat{gap:4px}}.note-select-exercise{display:flex;flex-direction:column;gap:12px;padding:12px 8px 8px;background:var(--color-bg);flex:1;min-height:0;width:100%;justify-content:flex-start}.note-select-exercise__header{display:flex;flex-direction:column;gap:10px}.note-select-exercise__question{font-size:1.1rem;font-weight:600;color:var(--color-text-primary);margin:0;text-align:center;line-height:1.4}.note-select-exercise__meta{display:flex;align-items:center;justify-content:center;gap:16px}.note-select-exercise__progress{display:flex;align-items:center;gap:8px}.note-select-exercise__progress-text{font-size:.8rem;font-weight:600;color:var(--color-text-muted);min-width:42px}.note-select-exercise__progress-bar{width:100px;height:6px;background:var(--color-border-muted);border-radius:3px;overflow:hidden}.note-select-exercise__progress-fill{height:100%;background:var(--gradient-primary, linear-gradient(90deg, #4CAF50, #8BC34A));border-radius:3px;transition:width .3s ease}.note-select-exercise__timer{font-size:1rem;font-weight:700;color:var(--color-text-primary);padding:4px 10px;background:var(--color-bg-tertiary);border-radius:var(--radius-full, 9999px);min-width:44px;text-align:center;border:1px solid var(--color-border-muted)}.note-select-exercise__timer--warning{color:var(--color-error, #FF5722);animation:timer-pulse .5s ease-in-out infinite}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.6}}.note-select-exercise__fretboard{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;width:100%;overflow-x:auto;padding:8px 0;-webkit-overflow-scrolling:touch;position:relative;min-height:0}.note-select-exercise__fretboard .fretboard{min-width:fit-content}.note-select-exercise__feedback{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:1000;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-radius:var(--radius-md, 8px);animation:feedback-slide-down .3s ease-out;box-shadow:0 4px 16px #0003;pointer-events:none}@keyframes feedback-slide-down{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.note-select-exercise__feedback--success{background:var(--color-surface-elevated);border:1px solid rgba(76,175,80,.4);box-shadow:0 0 12px #4caf5033}.note-select-exercise__feedback--error{background:var(--color-surface-elevated);border:1px solid rgba(244,67,54,.4);box-shadow:0 0 12px #f4433633}.note-select-exercise__feedback-icon{font-size:1.3rem;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:#4caf5033;border-radius:50%;color:#4caf50}.note-select-exercise__feedback--error .note-select-exercise__feedback-icon{background:#f4433633;color:#f44336}.note-select-exercise__feedback-text{font-size:1rem;font-weight:600;color:var(--color-text-primary)}.note-select-exercise__feedback-attempts{font-size:.8rem;color:var(--color-text-muted)}.note-select-exercise__hint-btn{align-self:center;padding:8px 18px;font-size:.8rem;font-weight:500;color:var(--color-warning, #FF9800);background:#ff98001a;border:1px solid rgba(255,152,0,.25);border-radius:var(--radius-full, 9999px);cursor:pointer;transition:all .2s ease}.note-select-exercise__hint-btn:hover{background:#ff98002e;border-color:#ff980066}@media(max-width:768px){.note-select-exercise{padding:12px;gap:12px;border-radius:0}.note-select-exercise__header{gap:8px}.note-select-exercise__question{font-size:1rem}.note-select-exercise__meta{flex-wrap:wrap;gap:10px}.note-select-exercise__progress-bar{width:85px}.note-select-exercise__fretboard{padding:4px 0}.note-select-exercise__feedback{padding:12px 14px;gap:8px;top:16px}.note-select-exercise__feedback-icon{width:26px;height:26px;font-size:1.1rem}.note-select-exercise__feedback-text{font-size:.95rem}.note-select-exercise__feedback-attempts{font-size:.75rem}}@media(max-height:500px)and (orientation:landscape){.note-select-exercise{padding:8px 10px;gap:8px}.note-select-exercise__header{gap:6px}.note-select-exercise__question{font-size:.9rem}.note-select-exercise__meta{gap:8px}.note-select-exercise__progress-text{font-size:.75rem;min-width:38px}.note-select-exercise__progress-bar{width:70px;height:5px}.note-select-exercise__timer{font-size:.9rem;padding:3px 8px;min-width:38px}.note-select-exercise__fretboard{padding:2px 0}.note-select-exercise__feedback{padding:8px 12px;gap:6px;top:12px}.note-select-exercise__feedback-icon{width:22px;height:22px;font-size:.9rem}.note-select-exercise__feedback-text{font-size:.85rem}.note-select-exercise__feedback-attempts{font-size:.7rem;display:none}.note-select-exercise__hint-btn{padding:6px 14px;font-size:.75rem}}@media(max-width:380px){.note-select-exercise{padding:10px;gap:10px}.note-select-exercise__question{font-size:.95rem}.note-select-exercise__progress-bar{width:75px}}.note-play-exercise{display:flex;flex-direction:column;gap:1rem;padding:1rem;flex:1;min-height:0;max-height:100%;overflow:hidden;color:var(--color-text-primary)}.note-play-exercise__header-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding:1rem 2rem;background:var(--color-bg-card);border-radius:var(--radius-xl);border:1px solid var(--color-border-muted);box-shadow:var(--shadow-sm);width:100%;box-sizing:border-box;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.note-play-exercise__context-info{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;background:var(--color-surface-elevated);padding:12px 20px;border-radius:12px;border:1px solid var(--color-border-muted);box-shadow:var(--shadow-sm);min-width:100px}.note-play-exercise__title{font-size:1.25rem;font-weight:700;color:var(--color-text-primary);letter-spacing:-.5px}.note-play-exercise__sub-title{font-size:.85rem;color:var(--color-text-secondary);font-weight:500}.note-play-exercise__stats{display:flex;justify-content:flex-start;align-items:center}.note-play-exercise__dashboard{display:flex;justify-content:center;align-items:center;gap:3rem;width:auto;min-width:340px;margin:0 auto;padding:0;background:transparent;border:none;border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none}.note-play-exercise__note-display{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:60px;position:relative}.note-play-exercise__label{font-size:.6rem;color:var(--color-text-muted);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:2px;text-align:center;display:block}.note-play-exercise__note{font-size:2rem;font-weight:700;line-height:1;color:var(--color-text-primary);font-family:var(--font-heading)}.note-play-exercise__note sub{font-size:1.5rem;color:var(--color-text-secondary);margin-left:2px;font-weight:600;vertical-align:baseline}.note-play-exercise__note-display--detected .note-play-exercise__note{color:var(--color-text-secondary);transition:color .2s,transform .2s}.note-play-exercise__note-display--detected.correct .note-play-exercise__note{color:var(--color-success);text-shadow:0 0 20px var(--color-glow-strong);transform:scale(1.1)}.note-play-exercise__note-display--detected.wrong .note-play-exercise__note{color:var(--color-error)}.note-play-exercise__note-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}.note-play-exercise__mini-meter{width:60px;height:6px;background:var(--color-bg-tertiary);border-radius:3px;margin-top:12px;overflow:hidden;border:1px solid var(--color-border-muted)}.note-play-exercise__mini-meter-bar{height:100%;border-radius:3px;will-change:width,background-color;transition:width .1s linear,background-color .2s}.note-play-exercise__fretboard{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;max-width:1200px;margin:0 auto;position:relative;min-height:0;overflow:hidden}.note-play-exercise__fretboard .fretboard{max-width:100%;border-radius:8px}.note-play-exercise__octave-info{margin-bottom:1rem;padding:.75rem 1rem;background:var(--color-bg-tertiary);border-left:4px solid var(--color-info);border-radius:0 var(--radius-md) var(--radius-md) 0;max-width:600px}.note-play-exercise__octave-label{font-weight:700;color:var(--color-text-primary);margin-bottom:.25rem}.note-play-exercise__octave-description{font-size:.9rem;color:var(--color-text-secondary)}.note-play-exercise__start{width:100%;display:flex;justify-content:center;padding:1rem}.note-play-exercise__start-btn{padding:1rem 3rem;font-size:1.25rem;font-weight:700;color:#fff;background:var(--gradient-primary);border:none;border-radius:var(--radius-full);cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow-button)}.note-play-exercise__start-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.note-play-exercise__error{color:var(--color-error);font-weight:600;text-align:center;padding:1rem;background:var(--color-bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--color-error)}@media(max-width:768px){.note-play-exercise{padding:.25rem;gap:.5rem}.note-play-exercise__header-bar{display:flex;flex-wrap:wrap;justify-content:space-between;padding:.5rem 1rem;border-radius:var(--radius-lg);background:transparent;border:none;box-shadow:none;margin-bottom:0;gap:.5rem}.note-play-exercise__stats{order:1}.note-play-exercise__context-info{order:2}.note-play-exercise__dashboard{order:3;width:100%;justify-content:space-evenly;padding:.25rem .5rem;gap:1rem}.note-play-exercise__note{font-size:1.75rem}.note-play-exercise__note sub{font-size:.9rem}.note-play-exercise__label{font-size:.6rem}.note-play-exercise__mini-meter{margin-top:4px;width:40px;height:4px}.note-play-exercise__fretboard{justify-content:flex-start;padding-top:0;align-items:flex-start}}@media(max-height:500px)and (orientation:landscape){.note-play-exercise{flex-direction:column;padding:.25rem;gap:.25rem}.note-play-exercise__header-bar{display:flex;padding:0 .5rem}.note-play-exercise__dashboard{flex-direction:row;width:100%;padding:0;gap:2rem;justify-content:center;align-items:center}.note-play-exercise__note{font-size:1.5rem}.note-play-exercise__fretboard{flex:1;overflow:hidden;align-items:flex-start}}.mc-exercise{display:flex;flex-direction:column;gap:1.5rem;padding:2rem;background:var(--color-surface);border-radius:var(--radius-lg, 16px);box-shadow:var(--shadow-card);border:1px solid var(--color-border-muted);width:100%;max-width:800px;margin:0 auto}.mc-exercise__question{font-size:1.25rem;font-weight:700;color:var(--color-text-primary);text-align:center;line-height:1.4;margin:0 0 .5rem}.mc-exercise__options{display:flex;flex-direction:column;gap:12px}.mc-exercise__option{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-align:left;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.mc-exercise__option:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-primary);background:var(--color-bg-card-hover)}.mc-exercise__option:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.mc-exercise__option:disabled{cursor:default;opacity:.8}.mc-exercise__option-letter{display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:1rem;font-weight:700;color:var(--color-primary);background:var(--color-accent-soft);border-radius:10px;flex-shrink:0;transition:all .2s ease}.mc-exercise__option:hover:not(:disabled) .mc-exercise__option-letter{background:var(--color-primary);color:#fff}.mc-exercise__option-text{flex:1;font-size:1.05rem;font-weight:500;color:var(--color-text-primary);line-height:1.4}.mc-exercise__option-icon{font-size:1.25rem;flex-shrink:0}.mc-exercise__option--correct{border-color:#4caf50;background:#4caf501f;box-shadow:0 0 0 1px #4caf50,0 4px 12px #4caf5033;animation:correct-reveal .35s ease-out}.mc-exercise__option--correct .mc-exercise__option-letter{background:#4caf50;color:#fff}.mc-exercise__option--correct .mc-exercise__option-icon{color:#4caf50}@keyframes correct-reveal{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.mc-exercise__option--wrong{border-color:#f44336;background:#f443361f;box-shadow:0 0 0 1px #f44336;animation:wrong-shake .35s ease-out}.mc-exercise__option--wrong .mc-exercise__option-letter{background:#f44336;color:#fff}.mc-exercise__option--wrong .mc-exercise__option-icon{color:#f44336}@keyframes wrong-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.mc-exercise__option--disabled{opacity:.5;background:var(--color-bg-tertiary);box-shadow:none;border-color:transparent}.mc-exercise__explanation{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-md, 8px);animation:explanation-slide .3s ease-out}@keyframes explanation-slide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.mc-exercise__explanation--correct{background:#4caf501a;border:1px solid rgba(76,175,80,.25)}.mc-exercise__explanation--wrong{background:#ff98001a;border:1px solid rgba(255,152,0,.25)}.mc-exercise__explanation-icon{font-size:1.1rem;flex-shrink:0}.mc-exercise__explanation-text{font-size:.85rem;color:var(--color-text-secondary);line-height:1.5}@media(max-width:768px){.mc-exercise{padding:14px;gap:14px;border-radius:var(--radius-md, 8px)}.mc-exercise__question{font-size:1rem}.mc-exercise__options{gap:8px}.mc-exercise__option{padding:12px 14px;gap:12px}.mc-exercise__option-letter{width:28px;height:28px;font-size:.85rem}.mc-exercise__option-text{font-size:.9rem}.mc-exercise__option-icon{font-size:1rem}.mc-exercise__explanation{padding:10px 12px;gap:8px}.mc-exercise__explanation-icon{font-size:1rem}.mc-exercise__explanation-text{font-size:.8rem}}@media(max-height:500px)and (orientation:landscape){.mc-exercise{height:100%;min-height:calc(100vh - 80px);padding:1rem 2rem;gap:1.5rem;display:flex;flex-direction:column;justify-content:center}.mc-exercise__question{font-size:1.1rem;margin-bottom:.5rem}.mc-exercise__options{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%}.mc-exercise__option{padding:1rem 1.25rem;gap:1rem;height:100%;display:flex;align-items:center;font-size:.9rem}.mc-exercise__option-letter{width:28px;height:28px;font-size:.85rem}.mc-exercise__option-text{font-size:.9rem}.mc-exercise__explanation{grid-column:1 / -1;padding:.5rem 1rem;font-size:.8rem}}@media(max-width:380px){.mc-exercise{padding:12px;gap:12px}.mc-exercise__question{font-size:.95rem}.mc-exercise__option{padding:11px 12px;gap:10px}.mc-exercise__option-letter{width:26px;height:26px;font-size:.8rem}.mc-exercise__option-text{font-size:.85rem}}.fretboard-identify-exercise{display:flex;flex-direction:column;gap:1.5rem;padding:2rem;width:100%;max-width:900px;margin:0 auto;background:var(--color-surface);border-radius:var(--radius-lg, 16px);box-shadow:var(--shadow-card);border:1px solid var(--color-border-muted)}.fretboard-identify-exercise .exercise-question{text-align:center;margin-bottom:.5rem}.fretboard-identify-exercise .exercise-question h3{font-size:1.35rem;font-weight:700;color:var(--color-text-primary);margin:0;line-height:1.4}.fretboard-identify-exercise .fretboard-container{width:100%;max-width:100%;margin:0 auto;background:var(--color-bg-card);border-radius:12px;padding:1rem;border:1px solid var(--color-border);display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow-sm);overflow:hidden}.fretboard-identify-exercise .answer-options{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%}.fretboard-identify-exercise .answer-option{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:1.1rem;font-weight:600;color:var(--color-text-primary);width:100%;text-align:left;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}.fretboard-identify-exercise .answer-option:hover:not(:disabled){background:var(--color-bg-card-hover);border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.fretboard-identify-exercise .answer-option:disabled{cursor:default;opacity:.7}.fretboard-identify-exercise .answer-option.selected{border-color:var(--color-primary);background:var(--color-accent-soft);box-shadow:0 0 0 2px var(--color-accent-soft)}.fretboard-identify-exercise .answer-option.correct{border-color:var(--color-success);background:#22c55e1a;box-shadow:0 0 0 1px var(--color-success);animation:correctPulse .4s ease-out}.fretboard-identify-exercise .answer-option.correct .option-letter{background:var(--color-success);color:#fff;border-color:var(--color-success);box-shadow:none}.fretboard-identify-exercise .answer-option.wrong{border-color:var(--color-error);background:#ef44441a;box-shadow:0 0 0 1px var(--color-error);animation:wrongShake .4s ease-in-out}.fretboard-identify-exercise .answer-option.wrong .option-letter{background:var(--color-error);color:#fff;border-color:var(--color-error);box-shadow:none}.fretboard-identify-exercise .option-letter{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--color-accent-soft);color:var(--color-primary);border:1px solid var(--color-border-muted);border-radius:10px;font-weight:700;font-size:1rem;flex-shrink:0;transition:all .2s ease}.fretboard-identify-exercise .answer-option:hover:not(:disabled) .option-letter,.fretboard-identify-exercise .answer-option.selected .option-letter{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-glow-sm)}.fretboard-identify-exercise .option-text{flex:1}.fretboard-identify-exercise .check-icon{color:var(--color-success);font-size:1.4rem}.fretboard-identify-exercise .cross-icon{color:var(--color-error);font-size:1.4rem}.fretboard-identify-exercise .explanation{padding:1rem;background:var(--color-bg-surface-1);border:1px solid var(--color-border-subtle);border-radius:8px;width:100%;margin-top:.5rem}.fretboard-identify-exercise .explanation p{margin:0;color:var(--color-text-secondary);font-size:.95rem;line-height:1.6}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@media(max-width:600px){.fretboard-identify-exercise{padding:1.25rem;gap:1.25rem}.fretboard-identify-exercise .answer-options{grid-template-columns:1fr}.fretboard-identify-exercise .answer-option{padding:1rem;font-size:1rem}}@media(max-height:500px)and (orientation:landscape){.fretboard-identify-exercise{height:100%;min-height:calc(100vh - 80px);width:100%;max-width:100%;margin:0 auto;padding:.5rem 1rem;gap:.5rem;display:flex;flex-direction:column;justify-content:center;border:none;box-shadow:none;background:transparent}.fretboard-identify-exercise .exercise-question{display:block;margin-bottom:.25rem;flex-shrink:0}.fretboard-identify-exercise .exercise-question h3{font-size:1rem;margin:0}.fretboard-identify-exercise .fretboard-container{padding:0;margin:0;width:100%;border-radius:8px;background:transparent;border:none;box-shadow:none;flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:auto;max-height:150px;overflow:visible}.fretboard-identify-exercise .fretboard-container>div,.fretboard-identify-exercise .fretboard-container svg{width:100%!important;height:auto!important;max-height:150px}.fretboard-identify-exercise .answer-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:0;flex-shrink:0}.fretboard-identify-exercise .answer-option{padding:.75rem 1rem;font-size:.95rem;gap:.75rem;background:var(--color-bg-card);border:1px solid var(--color-border-subtle)}.fretboard-identify-exercise .option-letter{width:28px;height:28px;font-size:.85rem}}@media(max-height:380px)and (orientation:landscape){.fretboard-identify-exercise{padding:.25rem 1rem}.fretboard-identify-exercise .exercise-question h3{font-size:.9rem}.fretboard-identify-exercise .answer-option{padding:.5rem .75rem;font-size:.85rem}}.exercise-container.chord-recognition{display:flex;flex-direction:column;height:100%;gap:1rem;padding:1rem;box-sizing:border-box}.chord-recognition .exercise-question{text-align:center}.chord-recognition .exercise-question h3{margin:0;font-size:1.2rem;color:var(--color-text-primary)}.chord-recognition .exercise-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;flex:1;min-height:0}.chord-recognition__detection{display:flex;justify-content:center;align-items:stretch;gap:8px;margin-top:1rem;flex-wrap:wrap}.chord-recognition__target-box,.chord-recognition__detected-box{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem 2rem;min-width:120px}.chord-recognition__target-box{background:#ff6b6b1a;border:2px solid #FF6B6B;border-radius:12px}.chord-recognition__detected-box{background:var(--color-bg-tertiary);border:2px solid var(--color-border);border-radius:12px}.chord-recognition__label{font-size:.7rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;display:flex;align-items:center;gap:.5rem}.chord-recognition__target-box .chord-recognition__label{color:#ff8e8e}.chord-recognition__note{font-size:2.5rem;font-weight:800;transition:all .2s ease;color:var(--color-text-primary)}.chord-recognition__target-box .chord-recognition__note{color:#ff6b6b;text-shadow:0 0 15px rgba(255,107,107,.3)}.chord-recognition__note.match{color:#6bcb77;transform:scale(1.1);text-shadow:0 0 15px rgba(107,203,119,.5)}.chord-recognition__meter{width:100%;height:6px;background:var(--color-border-muted);border-radius:3px;overflow:hidden;margin-top:.5rem}.chord-recognition__meter-track{width:100%;height:100%}.chord-recognition__meter-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77);border-radius:3px;transition:width .15s ease-out}.listening-pulse{animation:pulse 1.5s infinite;font-size:.8rem}.loading-text{font-size:.7rem;color:var(--color-text-muted);font-style:italic}@keyframes pulse{0%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}to{opacity:.5;transform:scale(.95)}}.fretboard-wrapper{flex:1;width:100%;display:flex;justify-content:center;overflow:hidden;min-height:200px}.error-text{color:#ff6b6b;background:#ff6b6b1a;padding:.5rem 1rem;border-radius:6px;font-size:.9rem}@media(max-width:600px){.exercise-container.chord-recognition{padding:.5rem;gap:.5rem}.chord-recognition__target-box,.chord-recognition__detected-box{padding:.5rem 1rem;min-width:90px}.chord-recognition__note{font-size:2rem}.chord-recognition__label{font-size:.6rem}.fretboard-wrapper{min-height:160px}}@media(max-height:600px){.chord-recognition__detection{margin-top:.5rem}.chord-recognition__note{font-size:1.8rem}}.scale-play-exercise{display:flex;flex-direction:column;gap:1rem;padding:1rem;flex:1;min-height:0;max-height:100%;overflow:hidden;color:var(--color-text-primary)}.scale-play-exercise__header-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding:1rem 2rem;background:var(--color-bg-card);border-radius:var(--radius-xl);border:1px solid var(--color-border-muted);box-shadow:var(--shadow-sm);width:100%;box-sizing:border-box}.scale-play-exercise__context-info{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;background:var(--color-surface-elevated);padding:12px 20px;border-radius:12px;border:1px solid var(--color-border-muted);box-shadow:var(--shadow-sm);min-width:100px}.scale-play-exercise__scale-name{font-size:1.5rem;font-weight:700;color:var(--color-primary);letter-spacing:-.5px;text-transform:capitalize}.scale-play-exercise__target-degree{padding:.25rem .75rem;border-radius:20px;color:#fff;font-weight:600;font-size:.9rem;box-shadow:var(--shadow-sm)}.scale-play-exercise__stats{display:flex;align-items:center;justify-content:flex-start}.scale-play-exercise__dashboard{display:flex;justify-content:center;align-items:center;gap:3rem;width:auto;min-width:300px;margin:0 auto;padding:1.5rem 3rem;background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-card)}.scale-play-exercise__note-display{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:60px;position:relative}.scale-play-exercise__label{font-size:.75rem;color:var(--color-text-muted);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.scale-play-exercise__note{font-size:3rem;font-weight:800;line-height:1;color:var(--color-text-primary)}.scale-play-exercise__note sub{font-size:1.5rem;color:var(--color-text-secondary);margin-left:2px;font-weight:600}.scale-play-exercise__note-display--detected .scale-play-exercise__note{color:var(--color-text-secondary);transition:color .2s,transform .2s}.scale-play-exercise__note-display--detected.correct .scale-play-exercise__note{color:var(--color-success);text-shadow:0 0 20px var(--color-glow-strong);transform:scale(1.1)}.scale-play-exercise__note-display--detected.wrong .scale-play-exercise__note{color:var(--color-error)}.scale-play-exercise__note-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}.scale-play-exercise__mini-meter{width:60px;height:6px;background:var(--color-bg-tertiary);border-radius:3px;margin-top:12px;overflow:hidden;border:1px solid var(--color-border-muted)}.scale-play-exercise__mini-meter-bar{height:100%;border-radius:3px;will-change:width,background-color;transition:width .1s linear,background-color .2s}.scale-play-exercise__fretboard{flex:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:1200px;margin:0 auto;position:relative;min-height:0;overflow:hidden}.scale-play-exercise__legend{display:flex;justify-content:center;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap}.scale-play-exercise__legend-item{padding:.25rem .75rem;border-radius:6px;color:#fff;font-size:.8rem;font-weight:600;opacity:1;box-shadow:0 1px 2px #0003}.scale-play-exercise__legend-item--hidden{opacity:.4;background:var(--color-bg-tertiary)!important;color:var(--color-text-muted)}@media(max-width:768px){.scale-play-exercise{padding:.25rem;gap:.5rem}.scale-play-exercise__header-bar{padding:.25rem .5rem;background:transparent;border:none;box-shadow:none;margin-bottom:0}.scale-play-exercise__scale-name{font-size:1rem}.scale-play-exercise__target-degree{font-size:.75rem;padding:.15rem .5rem}.scale-play-exercise__header-bar{display:flex;flex-wrap:wrap;justify-content:space-between;padding:.5rem 1rem;border-radius:var(--radius-lg);background:transparent;border:none;box-shadow:none;margin-bottom:0;gap:.5rem}.scale-play-exercise__stats{order:1}.scale-play-exercise__context-info{order:2}.scale-play-exercise__dashboard{order:3;padding:.25rem .5rem;gap:1rem;margin-top:0;min-width:0;width:100%;justify-content:space-evenly}.scale-play-exercise__note{font-size:1.75rem}.scale-play-exercise__note sub{font-size:.9rem}.scale-play-exercise__label{font-size:.6rem}.scale-play-exercise__legend{gap:.25rem;margin-bottom:.25rem}.scale-play-exercise__legend-item{font-size:.65rem;padding:.1rem .4rem}.scale-play-exercise__fretboard{justify-content:flex-start;padding-top:0;align-items:flex-start}}@media(max-height:500px)and (orientation:landscape){.scale-play-exercise{flex-direction:column;padding:.25rem;gap:.25rem}.scale-play-exercise__header-bar{display:flex;padding:0 .5rem}.scale-play-exercise__dashboard{flex-direction:row;width:100%;padding:0;gap:2rem;justify-content:center;align-items:center}.scale-play-exercise__note{font-size:1.5rem}.scale-play-exercise__legend{margin-bottom:0}.scale-play-exercise__fretboard{flex:1;overflow:hidden;align-items:flex-start}}.chord-tone-play-exercise{display:flex;flex-direction:column;gap:1rem;padding:1rem;flex:1;min-height:0;max-height:100%;overflow:hidden;color:var(--color-text-primary)}.chord-tone-play-exercise__header-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding:1rem 2rem;background:var(--color-bg-card);border-radius:var(--radius-xl);border:1px solid var(--color-border-muted);box-shadow:var(--shadow-sm);width:100%;box-sizing:border-box;max-width:1000px;margin:0 auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.chord-tone-play-exercise__context-info{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;background:var(--color-surface-elevated);padding:12px 20px;border-radius:12px;border:1px solid var(--color-border-muted);box-shadow:var(--shadow-sm);min-width:100px}.chord-tone-play-exercise__chord-name{font-size:1.5rem;font-weight:700;color:var(--color-primary);letter-spacing:-.5px}.chord-tone-play-exercise__target-degree{padding:.25rem .75rem;border-radius:20px;color:#fff;font-weight:600;font-size:.9rem;box-shadow:var(--shadow-sm)}.chord-tone-play-exercise__stats{display:flex;align-items:center;justify-content:flex-start}.chord-tone-play-exercise__dashboard{display:flex;justify-content:center;align-items:center;gap:3rem;width:auto;min-width:300px;margin:0 auto;padding:0;background:transparent;border:none;border-radius:var(--radius-xl);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;height:100%}.chord-tone-play-exercise__note-display{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:60px;position:relative}.chord-tone-play-exercise__label{font-size:.75rem;color:var(--color-text-muted);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.chord-tone-play-exercise__note{font-size:3rem;font-weight:800;line-height:1;color:var(--color-text-primary)}.chord-tone-play-exercise__note sub{font-size:1.5rem;color:var(--color-text-secondary);margin-left:2px;font-weight:600}.chord-tone-play-exercise__note-display--detected .chord-tone-play-exercise__note{color:var(--color-text-secondary);transition:color .2s,transform .2s}.chord-tone-play-exercise__note-display--detected.correct .chord-tone-play-exercise__note{color:var(--color-success);text-shadow:0 0 20px var(--color-glow-strong);transform:scale(1.1)}.chord-tone-play-exercise__note-display--detected.wrong .chord-tone-play-exercise__note{color:var(--color-error)}.chord-tone-play-exercise__note-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}.chord-tone-play-exercise__mini-meter{width:60px;height:6px;background:var(--color-bg-tertiary);border-radius:3px;margin-top:12px;overflow:hidden;border:1px solid var(--color-border-muted)}.chord-tone-play-exercise__mini-meter-bar{height:100%;border-radius:3px;will-change:width,background-color;transition:width .1s linear,background-color .2s}.chord-tone-play-exercise__fretboard{flex:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:1200px;margin:0 auto;min-height:0;overflow:hidden}.chord-tone-play-exercise__legend{display:flex;justify-content:center;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap}.chord-tone-play-exercise__legend-item{padding:.25rem .75rem;border-radius:6px;color:#fff;font-size:.8rem;font-weight:600;opacity:1;box-shadow:0 1px 2px #0003}.chord-tone-play-exercise__legend-item--hidden{opacity:.4;background:var(--color-bg-tertiary)!important;color:var(--color-text-muted)}@media(max-width:768px){.chord-tone-play-exercise{padding:.25rem;gap:.5rem}.chord-tone-play-exercise__header-bar{display:flex;flex-wrap:wrap;justify-content:space-between;padding:.5rem 1rem;border-radius:var(--radius-lg);background:transparent;border:none;box-shadow:none;margin-bottom:0;gap:.5rem}.chord-tone-play-exercise__chord-name{font-size:1rem}.chord-tone-play-exercise__target-degree{font-size:.75rem;padding:.15rem .5rem}.chord-tone-play-exercise__stats{order:1}.chord-tone-play-exercise__context-info{order:2}.chord-tone-play-exercise__dashboard{order:3;padding:.25rem .5rem;gap:1rem;margin-top:0;min-width:0;width:100%;justify-content:space-evenly}.chord-tone-play-exercise__note{font-size:1.75rem}.chord-tone-play-exercise__note sub{font-size:.9rem}.chord-tone-play-exercise__label{font-size:.6rem;margin-bottom:0}.chord-tone-play-exercise__legend{gap:.25rem;margin-bottom:.25rem}.chord-tone-play-exercise__legend-item{font-size:.65rem;padding:.1rem .4rem}.chord-tone-play-exercise__fretboard{justify-content:flex-start;padding-top:0;align-items:flex-start}}@media(max-height:500px)and (orientation:landscape){.chord-tone-play-exercise{flex-direction:column;padding:.25rem;gap:.25rem}.chord-tone-play-exercise__header-bar{display:flex;padding:0 .5rem}.chord-tone-play-exercise__dashboard{flex-direction:row;width:100%;padding:0;gap:2rem;justify-content:center;align-items:center}.chord-tone-play-exercise__note{font-size:1.5rem}.chord-tone-play-exercise__legend{margin-bottom:0}.chord-tone-play-exercise__fretboard{flex:1;overflow:hidden;align-items:flex-start}}.interval-exercise{display:flex;flex-direction:column;align-items:center;padding:2rem;background:var(--color-surface);border-radius:var(--radius-lg, 16px);box-shadow:var(--shadow-card);border:1px solid var(--color-border-muted);width:100%;max-width:650px;margin:0 auto}.interval-exercise__question{font-size:1.3rem;font-weight:700;text-align:center;margin-bottom:2rem;color:var(--color-text-primary);text-shadow:none}.interval-exercise__player{display:flex;flex-direction:column;align-items:center;margin-bottom:2.5rem;gap:1rem}.interval-exercise__play-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;border:none;border-radius:50px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-button);min-width:200px}.interval-exercise__play-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button-hover);filter:brightness(1.1)}.interval-exercise__play-btn:active:not(:disabled){transform:translateY(0)}.interval-exercise__play-btn:disabled{opacity:.7;cursor:not-allowed;background:var(--color-bg-surface-3);color:var(--color-text-muted);box-shadow:none}.interval-exercise__play-btn.playing{animation:pulse-playing 1.5s ease-in-out infinite;background:var(--color-success);box-shadow:0 4px 12px #22c55e66}@keyframes pulse-playing{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.interval-exercise__play-icon{font-size:1.5rem}.interval-exercise__loading{font-size:.9rem;color:var(--color-text-muted);font-style:italic}.interval-exercise__options{display:flex;flex-direction:column;gap:1rem;width:100%}.interval-exercise__option{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:12px;color:var(--color-text-primary);font-size:1.05rem;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-align:left;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.interval-exercise__option:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-primary);background:var(--color-bg-card-hover)}.interval-exercise__option--selected{border-color:var(--color-primary);background:var(--color-accent-soft);box-shadow:0 0 0 2px var(--color-accent-soft)}.interval-exercise__option--correct{border-color:var(--color-success)!important;background:#22c55e1a!important;box-shadow:0 0 0 1px var(--color-success)!important}.interval-exercise__option--wrong{border-color:var(--color-error)!important;background:#ef44441a!important;box-shadow:0 0 0 1px var(--color-error)!important}.interval-exercise__option--disabled{opacity:.6;pointer-events:none;background:var(--color-bg-surface-1)}.interval-exercise__option-letter{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--color-accent-soft);color:var(--color-primary);font-weight:700;font-size:1rem;flex-shrink:0;transition:all .2s ease}.interval-exercise__option:hover:not(:disabled) .interval-exercise__option-letter,.interval-exercise__option--selected .interval-exercise__option-letter{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-glow-sm)}.interval-exercise__option--correct .interval-exercise__option-letter{background:var(--color-success)!important;color:#fff!important;box-shadow:none}.interval-exercise__option--wrong .interval-exercise__option-letter{background:var(--color-error)!important;color:#fff!important;box-shadow:none}.interval-exercise__option-text{flex:1}.interval-exercise__option-icon{font-size:1.4rem}.interval-exercise__option--correct .interval-exercise__option-icon{color:var(--color-success)}.interval-exercise__option--wrong .interval-exercise__option-icon{color:var(--color-error)}@media(max-height:500px)and (orientation:landscape){.interval-exercise{height:100%;min-height:calc(100vh - 80px);width:100%;max-width:90%;margin:0 auto;padding:1rem 2rem;gap:1.5rem;display:flex;flex-direction:column;justify-content:center;border:none;box-shadow:none;background:transparent}.interval-exercise__question{font-size:1.1rem;margin-bottom:0;flex-shrink:0}.interval-exercise__player{flex-shrink:0;margin-bottom:.5rem}.interval-exercise__play-btn{padding:.75rem 2rem;font-size:1rem;min-width:180px}.interval-exercise__options{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:100%}.interval-exercise__option{padding:.875rem 1rem;gap:.75rem;font-size:.95rem;height:100%;align-items:center}.interval-exercise__option-letter{width:32px;height:32px;font-size:.9rem}}@media(max-width:480px){.interval-exercise{padding:1.25rem}.interval-exercise__question{font-size:1.2rem}.interval-exercise__play-btn{padding:.875rem 2rem;min-width:160px}.interval-exercise__option{padding:1rem}}.chord-builder-exercise{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem;background:var(--color-surface);border-radius:var(--radius-lg, 12px);box-shadow:var(--shadow-card);min-height:400px;position:relative;color:var(--color-text-primary);border:1px solid var(--color-border-muted)}.exercise-hud{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 .5rem}.hud-lives{display:flex;gap:.25rem}.hud-lives .heart{font-size:1.2rem;transition:transform .2s ease}.hud-lives .heart.lost{opacity:.4;filter:grayscale(100%)}.hud-progress{font-size:.9rem;color:var(--color-text-secondary);font-weight:600}.exercise-question{text-align:center}.exercise-question h2{font-size:1.1rem;font-weight:600;color:var(--color-text-primary);margin:0 0 .75rem}.chord-name{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0}.chord-root{font-size:2rem;font-weight:800;color:var(--color-primary)}.chord-type{font-size:1.2rem;font-weight:600;color:var(--color-text-secondary)}.chord-slots{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;padding:1.5rem;background:var(--color-bg-tertiary);border-radius:16px;border:1px solid var(--color-border-muted)}.chord-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;height:90px;border-radius:12px;background:var(--color-bg-card);border:2px dashed var(--color-border-muted);cursor:pointer;transition:all .2s ease;position:relative;box-shadow:0 2px 4px #0000000d}.chord-slot.filled{background:#4d96ff14;border:2px solid var(--color-primary);box-shadow:0 4px 8px #4d96ff26}.chord-slot.drag-over{background:#4d96ff26;border:2px solid var(--color-primary);transform:scale(1.05)}.chord-slot.wrong{background:#ef44441a;border:2px solid var(--color-error);animation:shake .4s ease}.chord-slot.correct{background:#22c55e1a;border:2px solid var(--color-success)}.slot-label{font-size:.7rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.slot-note{font-size:1.5rem;font-weight:700;color:var(--color-text-secondary);transition:all .2s ease}.slot-note.has-note{color:var(--color-text-primary)}.slot-remove-hint{position:absolute;top:4px;right:6px;font-size:.8rem;color:var(--color-text-muted);opacity:0;transition:opacity .2s ease}.chord-slot.filled:hover .slot-remove-hint{opacity:1}.available-notes{width:100%;text-align:center}.notes-label{font-size:.85rem;font-weight:500;color:var(--color-text-secondary);margin:0 0 .75rem}.notes-grid{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;max-width:450px;margin:0 auto}.note-button{width:50px;height:50px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-primary);font-size:1.15rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm);user-select:none;-webkit-user-select:none;touch-action:none}.note-button:hover:not(:disabled){background:var(--color-bg-surface-2);transform:translateY(-2px);border-color:var(--color-primary);color:var(--color-primary)}.note-button:active:not(:disabled){transform:translateY(0)}.note-button.placed{opacity:.5;cursor:not-allowed;transform:scale(.95);background:var(--color-bg-surface-1);box-shadow:none}.note-button.dragging{opacity:.8;transform:scale(1.1);background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.note-button:disabled{cursor:not-allowed;opacity:.5}.check-button{padding:.875rem 2.5rem;font-size:1rem;font-weight:600;border:none;border-radius:12px;background:var(--color-bg-surface-3, #ccc);color:var(--color-text-muted);cursor:not-allowed;transition:all .3s ease}.check-button.ready{background:var(--color-primary);color:#fff;cursor:pointer;box-shadow:0 4px 15px #4d96ff4d}.check-button.ready:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4d96ff66}.check-button.ready:active{transform:translateY(0)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-8px)}80%{transform:translate(8px)}}@media(max-width:480px){.chord-builder-exercise{padding:1rem;gap:1rem}.exercise-question h2{font-size:1rem}.chord-root{font-size:1.6rem}.chord-slot{width:60px;height:80px}.slot-note{font-size:1.3rem}.note-button{width:44px;height:44px;font-size:1rem}.check-button{padding:.75rem 2rem;font-size:.9rem}}@media(max-width:360px){.chord-slots{gap:.5rem}.chord-slot{width:55px;height:75px}.note-button{width:40px;height:40px;font-size:.9rem}}@media(max-height:500px)and (orientation:landscape){.chord-builder-exercise{height:calc(100vh - 80px);min-height:auto;width:100%;max-width:100%;margin:0;padding:.5rem 2rem;gap:.5rem;justify-content:center;border-radius:0;box-shadow:none;background:transparent;border:none}.exercise-hud{display:none}.exercise-question{margin-bottom:.25rem;flex-shrink:0}.exercise-question h2{font-size:1rem;margin:0}.chord-name{gap:.5rem;margin-bottom:.25rem;flex-shrink:0}.chord-root{font-size:1.4rem}.chord-type{font-size:1rem}.chord-slots{padding:.5rem;gap:.75rem;margin-bottom:.5rem;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);flex-shrink:0}.chord-slot{width:55px;height:70px;border-radius:8px}.slot-label{font-size:.6rem;margin-bottom:.1rem}.slot-note{font-size:1.2rem}.available-notes{margin:.25rem 0;width:100%;flex-shrink:0}.notes-label{font-size:.75rem;margin:0 0 .25rem}.notes-grid{gap:.5rem;max-width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;justify-content:center}.note-button{width:42px;height:42px;font-size:.95rem;border-radius:8px;flex-shrink:0;background:var(--color-bg-card);border:1px solid var(--color-border-subtle);box-shadow:0 2px 4px #0000001a}.check-button{padding:.6rem 2.5rem;font-size:.95rem;border-radius:10px;margin-top:.25rem;width:auto;min-width:180px;flex-shrink:0}}@media(max-height:380px)and (orientation:landscape){.chord-builder-exercise{padding:.25rem 1rem;gap:.25rem}.chord-slot{width:45px;height:60px}.note-button{width:36px;height:36px;font-size:.85rem}.check-button{padding:.4rem 2rem}}.exercise-status-combined{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 12px;height:80px;min-height:80px;max-height:80px;background:var(--color-bg-tertiary);border:2px solid var(--color-border);border-radius:16px;min-width:90px;flex:0 0 auto}.exercise-status-timer{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--color-primary)}.exercise-status-timer.warning{color:var(--color-error);animation:timer-pulse .5s infinite}.exercise-status-lives{display:flex;gap:4px;align-items:center}.heart-icon{font-size:.9rem;transition:all .2s ease}.heart-icon.lost{opacity:.3;filter:grayscale(1);transform:scale(.9)}@keyframes timer-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media(max-width:768px){.exercise-status-combined{min-height:80px;max-height:80px;padding:3px 6px;min-width:50px}}@media(max-height:500px)and (orientation:landscape){.exercise-status-combined{min-height:65px;max-height:65px;padding:3px 6px}.exercise-status-timer,.heart-icon{font-size:.8rem}}.unified-interactive-container{min-height:100vh;background:var(--color-bg);display:flex;flex-direction:column}.unified-interactive-container.loading,.unified-interactive-container.error{justify-content:center;align-items:center;gap:16px}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-border-muted);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.error-content{text-align:center;padding:40px}.error-content h2{color:var(--color-error);margin-bottom:16px}.back-button{margin-top:24px;padding:12px 24px;background:var(--color-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px}.unified-interactive-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:var(--color-surface);border-bottom:1px solid var(--color-border-muted)}.header-left{display:flex;align-items:center;gap:16px}.header-title h1{font-size:18px;font-weight:600;color:var(--color-text-primary);margin:0}.header-title p{font-size:14px;color:var(--color-text-muted);margin:0}.header-right{display:flex;align-items:center;gap:16px}.progress-indicator{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.question-counter{font-size:14px;font-weight:600;color:var(--color-text-primary)}.progress-bar{width:120px;height:6px;background:var(--color-border-muted);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transition:width .3s ease}.exit-button{width:36px;height:36px;border-radius:8px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s}.exit-button:hover{background:var(--color-error);color:#fff;border-color:var(--color-error)}.interactive-help-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-accent, #ff6e00);cursor:pointer;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:var(--font-body, "Inter", sans-serif)}.interactive-help-btn:hover{border-color:var(--color-accent, #ff6e00);background:#ff6e001f;transform:scale(1.05);box-shadow:0 0 12px #ff6e0026}.unified-interactive-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:24px;overflow-y:auto}@media(min-height:700px){.unified-interactive-content{justify-content:flex-start;padding-top:40px}}.theory-phase{max-width:800px;width:100%;animation:fadeIn .3s ease;display:flex;flex-direction:column;max-height:calc(100vh - 150px)}.theory-phase .theory-content{flex:1;overflow-y:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.theory-content{background:var(--color-surface);border-radius:16px;padding:32px;margin-bottom:24px}.theory-content h2{font-size:24px;color:var(--color-text-primary);margin-bottom:20px}.theory-text{font-size:16px;line-height:1.7;color:var(--color-text-secondary);white-space:pre-wrap}.theory-tips{margin-top:24px;padding-top:24px;border-top:1px solid var(--color-border-muted)}.theory-tips h3{font-size:18px;color:var(--color-text-primary);margin-bottom:12px}.theory-tips ul{list-style:none;padding:0;margin:0}.theory-tips li{padding:8px 0 8px 24px;position:relative;color:var(--color-text-secondary)}.theory-tips li:before{content:"→";position:absolute;left:0;color:var(--color-primary)}.continue-button{width:100%;padding:16px 32px;font-size:18px;font-weight:600;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;border:none;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.theme-light .continue-button{color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-accent))}.continue-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--color-glow-strong)}.mode-select-phase{text-align:center;max-width:600px;animation:fadeIn .3s ease}.mode-select-phase h2{font-size:28px;color:var(--color-text-primary);margin-bottom:12px}.mode-description{font-size:16px;color:var(--color-text-muted);margin-bottom:32px}.mode-buttons{display:flex;gap:24px;margin-bottom:32px}.mode-button{flex:1;padding:32px 24px;background:var(--color-surface);border:2px solid var(--color-border-muted);border-radius:16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:12px}.mode-button:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.mode-button.theory-mode:hover{border-color:#3b82f6;background:linear-gradient(135deg,rgba(59,130,246,.1),transparent)}.mode-button.guitar-mode:hover{border-color:#f59e0b;background:linear-gradient(135deg,rgba(245,158,11,.1),transparent)}.mode-icon{font-size:48px}.mode-title{font-size:20px;font-weight:600;color:var(--color-text-primary)}.mode-subtitle{font-size:14px;color:var(--color-text-muted)}.current-tier-info{display:flex;align-items:center;justify-content:center;gap:12px}.tier-label{color:var(--color-text-muted)}.tier-badge{padding:8px 16px;border-radius:20px;color:#fff;font-weight:600;font-size:14px}.tier-badge.large{padding:16px 32px;font-size:24px;border-radius:16px}.countdown-phase{text-align:center;animation:fadeIn .3s ease}.countdown-number{font-size:120px;font-weight:700;color:var(--color-primary);line-height:1;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.countdown-mode{font-size:24px;color:var(--color-text-primary);margin-top:24px}.countdown-questions{font-size:16px;color:var(--color-text-muted);margin-top:8px}.exercise-phase{width:100%;max-width:900px;animation:fadeIn .3s ease;position:relative;flex:1;display:flex;flex-direction:column}.unknown-question-type{text-align:center;padding:40px;background:var(--color-surface);border-radius:16px}.unknown-question-type button{margin-top:16px;padding:12px 24px;background:var(--color-primary);color:#fff;border:none;border-radius:8px;cursor:pointer}.feedback-overlay{position:fixed;top:80px;right:24px;min-width:200px;max-width:300px;padding:20px 24px;border-radius:12px;z-index:1000;animation:slideInRight .3s ease;box-shadow:0 8px 24px #0000004d}@keyframes slideInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}.feedback-overlay.correct{background:linear-gradient(135deg,#22c55e,#16a34a);border:2px solid #4ade80}.feedback-overlay.incorrect{background:linear-gradient(135deg,#ef4444,#dc2626);border:2px solid #f87171}.feedback-content{display:flex;align-items:center;gap:12px;color:#fff}.feedback-icon{font-size:32px;font-weight:700;line-height:1;animation:feedbackPop .4s ease}@keyframes feedbackPop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.feedback-text{font-size:18px;font-weight:600;text-transform:capitalize}.feedback-countdown{display:none}.complete-phase{text-align:center;animation:fadeIn .3s ease}.complete-content{background:var(--color-surface);border-radius:24px;padding:48px;max-width:500px}.complete-content h2{font-size:32px;color:var(--color-text-primary);margin-bottom:32px}.results-summary{display:flex;justify-content:center;gap:32px;margin-bottom:32px}.result-stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:36px;font-weight:700;color:var(--color-primary)}.stat-label{font-size:14px;color:var(--color-text-muted)}.earned-tier{margin-bottom:32px}.complete-actions{display:flex;gap:16px;justify-content:center}.action-button{padding:14px 28px;font-size:16px;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .2s}.action-button.primary{background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff}.theme-light .action-button.primary{color:#fff}.action-button.primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--color-glow-strong)}.action-button.secondary{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border-muted)}.action-button.secondary:hover{background:var(--color-border-muted)}@media(max-width:767px){.unified-interactive-header{padding:12px 16px}.header-title h1{font-size:16px}.header-title p{font-size:12px}.progress-bar{width:80px}.unified-interactive-content{padding:16px}.theory-content{padding:20px}.theory-content h2{font-size:20px}.theory-text{font-size:15px}.mode-buttons{flex-direction:column}.mode-button{padding:24px 16px}.mode-icon{font-size:36px}.countdown-number{font-size:80px}.complete-content{padding:32px 20px}.complete-content h2{font-size:24px}.results-summary{gap:16px}.stat-value{font-size:28px}.complete-actions{flex-direction:column}.action-button{width:100%}}@media(max-height:500px)and (orientation:landscape){.unified-interactive-container{min-height:100vh;max-height:100vh;overflow:hidden}.unified-interactive-header{padding:8px 16px}.header-title h1{font-size:14px}.header-title p{font-size:11px}.exit-button{width:28px;height:28px;font-size:12px}.unified-interactive-content{padding:12px 16px;justify-content:flex-start;overflow:hidden}.mode-select-phase{max-width:100%;width:100%;margin-top:0}.mode-select-phase h2{font-size:18px;margin-bottom:4px}.mode-description{font-size:12px;margin-bottom:12px}.mode-buttons{flex-direction:row;gap:12px;margin-bottom:12px}.mode-button{padding:12px 16px;gap:6px;border-radius:10px}.mode-icon{font-size:28px}.mode-title{font-size:14px}.mode-subtitle{font-size:11px}.current-tier-info{gap:8px}.tier-label{font-size:12px}.tier-badge{padding:4px 10px;font-size:12px}.countdown-number{font-size:60px}.countdown-mode{font-size:16px;margin-top:12px}.countdown-questions{font-size:12px;margin-top:4px}.exercise-phase{max-height:calc(100vh - 60px);overflow:hidden}.theory-phase{max-height:calc(100vh - 60px)}.theory-content{padding:12px 16px;margin-bottom:8px}.theory-content h2{font-size:16px;margin-bottom:8px}.theory-text{font-size:13px;line-height:1.4}.theory-tips{margin-top:8px;padding-top:8px}.theory-tips h3{font-size:14px;margin-bottom:6px}.continue-button{padding:10px 24px;font-size:14px}.complete-phase{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.complete-content{padding:24px 32px;border-radius:16px;width:80%;max-width:600px;display:flex;flex-direction:column;align-items:center;justify-content:center}.complete-content h2{font-size:24px;margin-bottom:20px;display:flex;align-items:center;gap:12px}.results-summary{gap:32px;margin-bottom:24px}.stat-value{font-size:28px}.stat-label{font-size:14px}.earned-tier{margin-bottom:24px}.tier-badge.large{padding:10px 24px;font-size:18px}.complete-actions{gap:16px;width:100%;justify-content:center}.action-button{padding:12px 32px;font-size:16px;min-width:140px}.feedback-overlay{top:60px;right:16px;padding:12px 16px}.feedback-icon{font-size:24px}.feedback-text{font-size:14px}}@media(max-height:400px)and (orientation:landscape){.unified-interactive-header{padding:4px 12px}.header-title h1{font-size:12px}.unified-interactive-content{padding:4px 12px}.mode-select-phase h2{font-size:16px}.mode-buttons{gap:8px;margin-bottom:8px}.mode-button{padding:8px 12px}.mode-icon{font-size:22px}.mode-title{font-size:12px}.mode-subtitle{font-size:10px}.countdown-number{font-size:48px}}.unified-interactive-header{position:relative;justify-content:space-between}.header-stats{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:16px;background:#ffffff0d;padding:6px 16px;border-radius:12px;border:1px solid var(--color-border-muted)}@media(max-width:600px){.unified-interactive-header{justify-content:space-between}.header-stats{position:static;transform:none;margin-left:auto;margin-right:12px}}.stat-group{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--color-text-primary)}.stat-group.lives{gap:2px}.heart-icon{font-size:1.1rem}.heart-icon.lost{opacity:.2;filter:grayscale(1)}.stat-group.timer{font-variant-numeric:tabular-nums;min-width:48px}.stat-group.timer.warning{color:var(--color-error);animation:pulse 1s infinite}.stat-group.progress{color:var(--color-text-secondary);font-size:.95rem}.progress-separator{color:var(--color-text-muted);margin:0 2px}@media(max-height:500px)and (orientation:landscape){.header-left .header-title p{display:none}.header-stats{padding:2px 10px;gap:10px;height:32px}.stat-group,.heart-icon{font-size:.9rem}.header-title h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}}.video-text-player.lesson-player-container:has(.cinema-mode) .lesson-player-content{padding:0!important}.video-text-player.lesson-player-container:has(.cinema-mode) .lesson-player-main-layout{padding:0!important;gap:0!important}.video-text-loading,.video-text-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem}.video-text-player .video-wrapper:after{bottom:auto!important;top:16px;right:16px}@media(max-width:1024px){.video-text-player .video-wrapper:after{top:8px;bottom:auto!important;right:8px}}.video-text-chapter-info{display:flex;align-items:center;gap:.5rem}.chapter-label{font-size:var(--font-size-sm);color:var(--color-accent);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.5px}.cockpit-intro-cta{display:flex;align-items:center;gap:12px;cursor:pointer;padding:4px 6px 4px 12px;border-radius:100px;background:#ff6e0014;border:1px solid rgba(255,110,0,.2);transition:all .25s ease}.cockpit-intro-cta:hover{background:#ff6e0024;border-color:#ff6e0066;transform:translateY(-1px);box-shadow:0 2px 12px #ff6e0033}.cockpit-intro-technique{font-size:12px;font-weight:700;color:var(--color-text-primary);letter-spacing:.3px;white-space:nowrap}.cockpit-intro-start-btn{display:flex;align-items:center;gap:5px;padding:4px 12px;background:var(--color-accent);color:#fff;font-size:11px;font-weight:700;border-radius:100px;letter-spacing:.3px;white-space:nowrap;animation:intro-cta-pulse 3s ease-in-out infinite}@keyframes intro-cta-pulse{0%,to{box-shadow:0 0 #ff6e004d}50%{box-shadow:0 0 0 6px #ff6e0000}}.cockpit-layout-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;margin-right:8px}.cockpit-layout-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary);border-color:var(--color-accent)}.video-text-controls{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--color-bg-secondary);border-top:1px solid var(--color-border)}.vt-play-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--color-accent);border:none;color:#fff;cursor:pointer;transition:all .2s ease;flex-shrink:0}.vt-play-btn:hover{transform:scale(1.05);background:var(--color-accent-hover)}.vt-progress-container{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.vt-time{font-size:12px;color:var(--color-text-secondary);min-width:40px;text-align:center;font-family:var(--font-mono)}.vt-progress-bar{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-bg-tertiary);border-radius:2px;cursor:pointer}.vt-progress-bar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--color-accent);border-radius:50%;cursor:pointer;transition:transform .1s ease}.vt-progress-bar::-webkit-slider-thumb:hover{transform:scale(1.2)}.vt-speed-controls{display:flex;gap:4px}.vt-speed-btn{padding:4px 8px;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-xs);color:var(--color-text-secondary);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease}.vt-speed-btn:hover{border-color:var(--color-text-primary);color:var(--color-text-primary)}.vt-speed-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.vt-fullscreen-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--color-bg-tertiary);border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;flex-shrink:0}.vt-fullscreen-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.video-text-content-wrapper{display:flex;flex-direction:column;overflow-y:auto}.video-text-content-panel{padding:var(--spacing-xl)!important;overflow-y:auto;max-height:calc(100vh - 120px)}.video-text-content-inner{max-width:800px;margin:0 auto}.vt-content-section{margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--color-border)}.vt-content-section:last-child{border-bottom:none;margin-bottom:0}.vt-section-title{font-size:1.5rem;font-weight:700;color:var(--color-accent);margin:0 0 1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--color-accent);display:inline-block}.vt-section-content{font-size:1rem;line-height:1.8;color:var(--color-text-primary)}.vt-section-content strong{color:var(--color-accent);font-weight:700}.vt-content-image{max-width:100%;border-radius:var(--radius-md);margin:1.5rem 0;box-shadow:var(--shadow-md)}.video-text-no-content{display:flex;align-items:center;justify-content:center;min-height:300px;color:var(--color-text-secondary)}.video-panel.intro-fixed{flex:1 1 auto!important;min-width:0!important}.intro-cta-wrapper{flex:0 0 300px!important;max-width:300px!important;min-width:300px!important;align-self:stretch!important}.intro-cta-panel-container{padding:.75rem!important;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl, 16px)}.vt-cta-panel{display:flex;flex-direction:column;gap:1.25rem;width:100%;padding:1rem}.vt-cta-card{border-radius:var(--radius-lg, 12px);overflow:hidden;cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1);background:var(--color-bg-secondary);border:1px solid var(--color-border);width:100%}.vt-cta-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px #00000040,0 0 0 1px var(--color-accent);border-color:var(--color-accent)}.vt-cta-card:active{transform:translateY(-1px) scale(1.01)}.vt-cta-card-media{position:relative;width:100%;padding-bottom:56.25%;overflow:hidden}.vt-cta-card-image{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;transition:transform .5s cubic-bezier(.4,0,.2,1)}.vt-cta-card:hover .vt-cta-card-image{transform:scale(1.08)}.vt-cta-card-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}.vt-cta-card-video.visible{opacity:1}.vt-cta-card-gradient{position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%);pointer-events:none}.vt-cta-card-title-overlay{position:absolute;bottom:0;left:0;right:0;padding:.75rem 1rem;z-index:2}.vt-cta-card-technique{font-size:1.1rem;font-weight:700;color:#fff;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.5);line-height:1.3}.vt-cta-card-footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--color-bg-secondary)}.vt-cta-card-label{font-size:.72rem;color:var(--color-accent);font-weight:700;text-transform:uppercase;letter-spacing:.6px}.vt-cta-card-arrow{flex-shrink:0;color:var(--color-accent);opacity:.5;transition:all .3s ease}.vt-cta-card:hover .vt-cta-card-arrow{opacity:1;transform:translate(4px)}@media(max-width:1024px){.intro-cta-wrapper{flex:0 0 auto!important;max-width:100%!important;min-width:100%!important;align-self:auto!important}.intro-cta-panel-container{border-radius:var(--radius-lg, 12px);padding:.5rem!important}.vt-cta-panel{gap:.75rem;padding:0}.vt-fullscreen-btn{display:none!important}}@media(max-width:480px){.intro-cta-panel-container{padding:.25rem!important}.vt-cta-card-technique{font-size:1rem}}.lesson-player-main-layout.horizontal-layout{flex-direction:column}.lesson-player-main-layout.horizontal-layout .video-panel{width:100%!important;max-width:100%;position:relative;top:0}.lesson-player-main-layout.horizontal-layout .video-text-content-panel{max-height:calc(100vh - 400px)}.video-text-resizer{position:relative!important;left:auto!important;flex-shrink:0;width:12px!important;height:auto;align-self:stretch;cursor:col-resize;background:var(--color-bg-base);display:flex!important;align-items:center;justify-content:center;z-index:10;border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);transition:none!important}.video-text-resizer:hover{width:12px!important;background:var(--color-bg-base)!important;border-left:1px solid var(--color-border);border-right:1px solid var(--color-border)}.video-text-resizer .resizer-handle{width:100%;height:100%;background:transparent;transition:background-color .2s ease}.video-text-resizer:hover .resizer-handle{background:var(--color-accent-transparent, rgba(59, 130, 246, .3))}.video-text-resizer:active .resizer-handle{background:var(--color-accent)}.video-text-resizer .resizer-grip-icon{display:none}@media(max-width:1024px){.video-text-controls{flex-wrap:wrap;gap:8px;padding:10px 12px}.vt-speed-controls{order:10;width:100%;justify-content:center;margin-top:4px}.vt-progress-container{flex:1;min-width:150px}.video-text-content-panel{max-height:none;padding:var(--spacing-lg)!important}.vt-section-title{font-size:1.25rem}.vt-section-content{font-size:.95rem}.cockpit-layout-btn{display:none}.cockpit-intro-cta{gap:0;padding:2px;background:transparent;border-color:transparent}.cockpit-intro-technique{display:none}.cockpit-intro-start-btn{font-size:10px;padding:4px 10px}}@media(max-width:480px){.vt-speed-btn{padding:3px 6px;font-size:10px}.video-text-content-inner{padding:0}.vt-section-title{font-size:1.1rem}}.vt-controls-right{display:flex;align-items:center;gap:12px}.vt-menu-container{position:relative}.vt-menu-btn{background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;padding:6px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all .2s}.vt-menu-btn:hover,.vt-menu-btn.active{color:var(--color-text-primary);background:var(--color-bg-hover)}.vt-menu-dropdown{position:absolute;bottom:100%;right:0;margin-bottom:8px;background:var(--color-bg-elevated, var(--color-bg-secondary));border:1px solid var(--color-border);border-radius:var(--radius-md);padding:4px;min-width:120px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:2px;z-index:20}.vt-menu-item{background:transparent;border:none;color:var(--color-text-secondary);padding:8px 12px;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border-radius:var(--radius-sm);font-size:13px;transition:all .2s;white-space:nowrap;font-weight:500}.vt-menu-item:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.vt-menu-item.selected{color:var(--color-accent);background:var(--color-bg-active, rgba(59, 130, 246, .1))}.vt-icon-sm{width:20px;height:20px}.video-panel:fullscreen{background:#000;display:flex!important;flex-direction:column;width:100vw;height:100vh;border-radius:0;border:none}.video-panel:fullscreen .video-wrapper{flex:1;min-height:0;padding-bottom:0!important;background:#000}.video-panel:fullscreen video.sync-video{width:100%;height:100%;object-fit:contain;position:absolute;top:0;left:0}.video-panel:fullscreen .video-text-controls{flex-shrink:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.1);padding:10px 16px}.video-panel:fullscreen .vt-time{color:#ffffffb3}.video-panel:fullscreen .vt-play-btn{background:#ffffff26;color:#fff}.video-panel:fullscreen .vt-play-btn:hover{background:#ffffff40}.video-panel:fullscreen .vt-menu-btn{color:#ffffffb3}.video-panel:fullscreen .vt-menu-btn:hover,.video-panel:fullscreen .vt-menu-btn.active{color:#fff}.video-panel:fullscreen .vt-fullscreen-btn{color:#ffffffb3;background:#ffffff1a;border-color:#ffffff26}.video-panel:fullscreen .vt-fullscreen-btn:hover{color:#fff;background:#fff3}.video-panel:fullscreen .vt-progress-bar{background:#fff3}.video-panel.cinema-mode{height:calc(100vh - 70px);max-height:calc(100vh - 70px);margin:0 auto;display:flex!important;flex-direction:column}.video-panel.cinema-mode .video-wrapper{flex:1;width:100%;height:100%;padding-bottom:0!important;background:#000}.video-panel.cinema-mode video.sync-video{width:100%;height:100%;object-fit:contain;position:relative}@media(orientation:landscape)and (max-height:600px){.video-panel.cinema-mode{height:calc(100vh - 50px)!important;max-height:calc(100vh - 50px)!important;border-radius:0!important;border:none!important}.video-panel.cinema-mode .video-wrapper{border-radius:0!important}.video-panel.cinema-mode .video-text-controls{padding:4px 8px!important}}@media(orientation:landscape)and (max-height:500px)and (pointer:coarse){.video-text-player.lesson-player-container{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;height:100vh!important;height:100dvh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}.video-text-player .lesson-cockpit{padding:2px 8px!important;flex-shrink:0!important;min-height:32px!important;max-height:32px!important}.video-text-player .cockpit-inner{gap:4px!important;display:flex!important;align-items:center!important}.video-text-player .cockpit-logo{height:20px!important;width:auto!important}.video-text-player .cockpit-identity{flex:1!important;min-width:0!important}.video-text-player .cockpit-lesson-code{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.video-text-player .cockpit-technique,.video-text-player .cockpit-bpm-pill,.video-text-player .cockpit-center,.video-text-player .cockpit-rank-badge,.video-text-player .cockpit-skills,.video-text-player .cockpit-left{display:none!important}.video-text-player .cockpit-right{margin-left:auto!important}.video-text-player .cockpit-exit-btn{width:24px!important;height:24px!important;padding:2px!important}.video-text-player .cockpit-exit-btn svg{width:12px!important;height:12px!important}.video-text-player .lesson-player-content{flex:1!important;min-height:0!important;padding:0!important;overflow-y:auto!important;overflow-x:hidden!important}.video-text-player .lesson-player-main-layout{min-height:100%!important;padding:0!important;gap:8px!important;flex-direction:column!important}.video-text-player .video-panel{flex-shrink:0!important;height:calc(100vh - 80px)!important;height:calc(100dvh - 80px)!important;width:100%!important;max-width:100%!important;min-width:unset!important;border-radius:0!important;border:none!important;margin:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.video-text-player .video-panel .video-wrapper{flex:1!important;min-height:0!important;padding-bottom:0!important;height:100%!important;position:relative!important;background:#000!important}.video-text-player .video-panel video.sync-video{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:contain!important}.video-text-player .video-text-controls{flex-shrink:0!important;padding:6px 10px!important;gap:6px!important;min-height:40px!important;max-height:40px!important}.video-text-player .vt-play-btn{width:30px!important;height:30px!important;flex-shrink:0!important}.video-text-player .vt-progress-container{flex:1!important;gap:6px!important}.video-text-player .vt-time{font-size:9px!important;min-width:24px!important}.video-text-player .vt-speed-controls{display:none!important}.video-text-player .vt-controls-right{gap:2px!important;flex-shrink:0!important}.video-text-player .vt-menu-btn{padding:2px!important}.video-text-player .vt-icon-sm{width:16px!important;height:16px!important}.video-text-player .video-text-content-panel{display:block!important;width:100%!important;padding:16px!important}.video-text-player .video-resizer{display:none!important}}@media(orientation:landscape)and (max-height:500px)and (pointer:coarse){.video-text-player .video-panel.cinema-mode{height:calc(100vh - 70px)!important;height:calc(100dvh - 70px)!important}}.streak-widget{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;border:1px solid rgba(255,165,0,.2);cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.streak-widget:hover{transform:translateY(-2px);box-shadow:0 8px 25px #ffa50033;border-color:#ffa50066}.streak-widget--at-risk{border-color:#ff64644d;animation:pulse-warning 2s ease infinite}.streak-widget--complete{border-color:#64ff964d}@keyframes pulse-warning{0%,to{box-shadow:0 0 #ff646400}50%{box-shadow:0 0 15px 3px #ff646433}}.streak-widget__icon-container{position:relative;display:flex;align-items:center;justify-content:center}.streak-widget__icon{font-size:2.5rem;filter:grayscale(.8);transition:all .3s ease}.streak-widget__icon--active{filter:none;animation:flame .5s ease infinite alternate}.streak-widget__glow{position:absolute;width:60px;height:60px;background:radial-gradient(circle,rgba(255,165,0,.4) 0%,transparent 70%);border-radius:50%;animation:glow-pulse 1.5s ease infinite}@keyframes glow-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.streak-widget__content{flex:1}.streak-widget__count{display:flex;align-items:baseline;gap:.5rem}.streak-widget__number{font-size:2rem;font-weight:800;color:orange;text-shadow:0 0 10px rgba(255,165,0,.5)}.streak-widget__label{font-size:.9rem;color:#a0a0a0}.streak-widget__record{font-size:.8rem;color:gold;margin-top:.25rem;animation:bounce .5s ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.streak-widget__warning{font-size:.8rem;color:#ff6b6b;margin-top:.25rem}.streak-widget__complete{font-size:.8rem;color:#6bff8e;margin-top:.25rem}.streak-widget__freeze{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;padding:.25rem .5rem;background:#6496ff33;border-radius:8px;color:#64b5f6}.streak-widget--compact{padding:.5rem .75rem;gap:.5rem;border-radius:12px}.streak-widget--compact .streak-icon{font-size:1.2rem;filter:grayscale(.8)}.streak-widget--compact .streak-icon--active{filter:none}.streak-widget--compact .streak-count{font-size:1rem;font-weight:700;color:orange}.xp-progress{padding:1rem 1.5rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;border:1px solid rgba(138,43,226,.2)}.xp-progress__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.xp-progress__level{display:flex;align-items:center;gap:.75rem}.xp-progress__level-icon{font-size:1.75rem}.xp-progress__level-info{display:flex;flex-direction:column}.xp-progress__level-number{font-size:1.1rem;font-weight:700;color:#fff}.xp-progress__level-title{font-size:.8rem;color:#a78bfa}.xp-progress__total{display:flex;align-items:baseline;gap:.25rem}.xp-progress__total-number{font-size:1.25rem;font-weight:700;color:#a78bfa}.xp-progress__total-label{font-size:.8rem;color:#8b8b8b}.xp-progress__bar-wrapper{margin-bottom:.5rem}.xp-progress__bar-container{height:12px;background:#8a2be226;border-radius:6px;overflow:hidden;position:relative}.xp-progress__bar-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#a78bfa,#c4b5fd);border-radius:6px;position:relative;display:flex;align-items:center;justify-content:flex-end;padding-right:.5rem;transition:width .5s ease}.xp-progress__bar-fill--animated{animation:shimmer 2s ease infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.xp-progress__bar-fill--animated{background-size:200% 100%;background-image:linear-gradient(90deg,#8b5cf6,#a78bfa,#c4b5fd,#a78bfa,#8b5cf6)}.xp-progress__bar-text{font-size:.7rem;font-weight:600;color:#1a1a2e;text-shadow:0 1px 2px rgba(255,255,255,.3)}.xp-progress__xp-numbers{text-align:right;font-size:.75rem;color:#8b8b8b;margin-top:.25rem}.xp-progress__next-level{font-size:.8rem;color:#6b6b6b;text-align:center}.xp-progress--compact{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#8a2be21a;border-radius:12px;border:none}.xp-progress--compact .xp-progress__level-badge{display:flex;align-items:center;gap:.25rem;background:#8a2be233;padding:.25rem .5rem;border-radius:8px}.xp-progress--compact .xp-progress__level-icon{font-size:1rem}.xp-progress--compact .xp-progress__level-number{font-size:.9rem;font-weight:700;color:#a78bfa}.xp-progress--compact .xp-progress__bar-container{flex:1;height:8px;min-width:60px}.daily-goal{padding:1.25rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;border:1px solid rgba(34,197,94,.2);text-align:center}.daily-goal--complete{border-color:#22c55e66;background:linear-gradient(135deg,#1a2e1f,#162e1e)}.daily-goal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.daily-goal__header h3{margin:0;font-size:1rem;color:#fff;font-weight:600}.daily-goal__badge{font-size:.75rem;padding:.25rem .5rem;background:#22c55e26;color:#22c55e;border-radius:6px;font-weight:600}.daily-goal__progress-area{position:relative;width:120px;height:120px;margin:0 auto 1rem}.daily-goal__circle-svg{width:100%;height:100%;transform:rotate(-90deg)}.daily-goal__circle-bg{fill:none;stroke:#22c55e26}.daily-goal__circle-progress{fill:none;stroke:#22c55e;stroke-linecap:round;transition:stroke-dashoffset .5s ease}.daily-goal--complete .daily-goal__circle-progress{stroke:#4ade80;filter:drop-shadow(0 0 6px rgba(34,197,94,.5))}.daily-goal__center-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem}.daily-goal__xp-current{font-size:1.75rem;font-weight:800;color:#22c55e;line-height:1}.daily-goal__xp-separator{font-size:.9rem;color:#6b6b6b}.daily-goal__xp-goal{font-size:.9rem;color:#8b8b8b}.daily-goal__xp-label{font-size:.7rem;color:#6b6b6b;text-transform:uppercase;letter-spacing:.1em}.daily-goal__complete-icon{font-size:2rem;animation:bounce-celebrate .6s ease}.daily-goal__complete-text{font-size:.9rem;font-weight:600;color:#4ade80}@keyframes bounce-celebrate{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.daily-goal__footer{font-size:.85rem;color:#8b8b8b}.daily-goal__footer--complete{color:#4ade80}.daily-goal__remaining{color:#22c55e}.daily-goal--compact{position:relative;width:56px;height:56px;padding:0;background:none;border:none}.daily-goal--compact .daily-goal__circle-svg{position:absolute;top:0;left:0}.daily-goal--compact .daily-goal__circle-bg{stroke:#22c55e26}.daily-goal--compact .daily-goal__circle-progress{stroke:#22c55e}.daily-goal--compact.daily-goal--complete .daily-goal__circle-progress{stroke:#4ade80}.daily-goal--compact .daily-goal__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.daily-goal--compact .daily-goal__percent{font-size:.75rem;font-weight:700;color:#22c55e}.daily-goal--compact .daily-goal__check{font-size:1.25rem;color:#4ade80}.weekly-activity{padding:1.25rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;border:1px solid rgba(96,165,250,.2)}.weekly-activity__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.weekly-activity__header h3{margin:0;font-size:1rem;color:#fff;font-weight:600}.weekly-activity__summary{display:flex;gap:1rem}.weekly-activity__total-xp{font-size:.9rem;font-weight:600;color:#60a5fa}.weekly-activity__streak{font-size:.9rem;color:orange}.weekly-activity__chart{display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem;height:120px;margin-bottom:.5rem}.weekly-activity__day{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem}.weekly-activity__day--today{position:relative}.weekly-activity__day--today:before{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:4px;height:4px;background:#60a5fa;border-radius:50%}.weekly-activity__bar-container{position:relative;width:100%;height:80px;display:flex;align-items:flex-end;justify-content:center}.weekly-activity__goal-line{position:absolute;left:-4px;right:-4px;height:1px;background:#fff3;border-style:dashed}.weekly-activity__bar{width:20px;min-height:4px;background:linear-gradient(180deg,#3b82f6,#1d4ed8);border-radius:4px 4px 0 0;transition:height .5s ease,background .3s ease;position:relative;display:flex;align-items:flex-start;justify-content:center}.weekly-activity__bar:hover{filter:brightness(1.2)}.weekly-activity__bar--complete{background:linear-gradient(180deg,#22c55e,#16a34a)}.weekly-activity__check{position:absolute;top:-18px;font-size:.7rem;color:#22c55e;font-weight:700}.weekly-activity__day-label{font-size:.7rem;color:#8b8b8b;text-transform:uppercase;letter-spacing:.05em}.weekly-activity__day-label--today{color:#60a5fa;font-weight:600}.weekly-activity__xp-label{font-size:.65rem;color:#6b6b6b}.weekly-activity__legend{display:flex;justify-content:center;margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.05)}.weekly-activity__legend-item{display:flex;align-items:center;gap:.5rem;font-size:.7rem;color:#6b6b6b}.weekly-activity__legend-line{width:16px;height:1px;background:#fff3;border-style:dashed}@media(max-width:400px){.weekly-activity__bar{width:16px}.weekly-activity__day-label{font-size:.6rem}}.leaderboard-widget{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;border:1px solid rgba(251,191,36,.2);overflow:hidden}.leaderboard-widget__header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.05)}.leaderboard-widget__header h3{margin:0;font-size:1rem;color:#fff;font-weight:600}.leaderboard-widget__tabs{display:flex;gap:.5rem}.leaderboard-widget__tab{font-size:.7rem;padding:.25rem .5rem;border-radius:6px;color:#6b6b6b;cursor:pointer;transition:all .2s ease}.leaderboard-widget__tab.active{background:#fbbf2426;color:#fbbf24}.leaderboard-widget__list{padding:.5rem}.leaderboard-widget__entry{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:10px;transition:all .2s ease}.leaderboard-widget__entry:hover{background:#ffffff08}.leaderboard-widget__entry--current{background:#fbbf241a;border:1px solid rgba(251,191,36,.2)}.leaderboard-widget__rank{width:28px;display:flex;justify-content:center;font-size:1.25rem}.leaderboard-widget__rank-number{font-size:.9rem;font-weight:600;color:#6b6b6b}.leaderboard-widget__avatar{width:36px;height:36px;border-radius:50%;overflow:hidden}.leaderboard-widget__avatar img{width:100%;height:100%;object-fit:cover}.leaderboard-widget__avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-weight:600;font-size:.9rem}.leaderboard-widget__info{flex:1;min-width:0}.leaderboard-widget__name{display:block;font-size:.9rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-widget__you{margin-left:.25rem;font-size:.75rem;color:#fbbf24;font-weight:400}.leaderboard-widget__stats{display:flex;gap:.75rem;margin-top:.15rem}.leaderboard-widget__level{font-size:.7rem;color:#a78bfa}.leaderboard-widget__streak{font-size:.7rem;color:orange}.leaderboard-widget__xp{display:flex;flex-direction:column;align-items:flex-end}.leaderboard-widget__xp-value{font-size:.95rem;font-weight:700;color:#fbbf24}.leaderboard-widget__xp-label{font-size:.6rem;color:#6b6b6b;text-transform:uppercase;letter-spacing:.05em}.leaderboard-widget__current-rank{display:flex;flex-direction:column;align-items:center;padding:.75rem;color:#8b8b8b;font-size:.85rem}.leaderboard-widget__rank-dots{color:#4b4b4b;margin-bottom:.25rem}.leaderboard-widget__current-rank strong{color:#fbbf24}.leaderboard-widget__view-all{width:100%;padding:.75rem;background:#fbbf241a;border:none;border-top:1px solid rgba(255,255,255,.05);color:#fbbf24;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.leaderboard-widget__view-all:hover{background:#fbbf2426}@media(max-width:400px){.leaderboard-widget__entry{gap:.5rem;padding:.5rem}.leaderboard-widget__avatar{width:32px;height:32px}.leaderboard-widget__name{font-size:.85rem}}.xp-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:gb-overlay-in var(--gb-dur-fast) var(--gb-ease-out)}.xp-modal{position:relative;width:100%;max-width:400px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:24px;border:1px solid rgba(168,85,247,.3);padding:2rem;text-align:center;animation:gb-modal-pop var(--gb-dur-slow) var(--gb-ease-bounce);overflow:hidden}.xp-modal__confetti{position:absolute;top:0;left:0;right:0;height:150px;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;top:-20px;left:var(--x);width:10px;height:10px;background:linear-gradient(135deg,#fbbf24,#a855f7,#22c55e,#60a5fa);border-radius:2px;animation:confetti-fall 2s ease-out var(--delay) forwards}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(300px) rotate(720deg);opacity:0}}.xp-modal__header{margin-bottom:1.5rem}.xp-modal__star{display:inline-block;font-size:3rem;margin-bottom:.5rem;animation:star-bounce .6s ease}@keyframes star-bounce{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.3) rotate(10deg)}}.xp-modal__header h2{margin:0;font-size:1.5rem;color:#fff}.xp-modal__xp-display{display:flex;align-items:baseline;justify-content:center;gap:.25rem;margin-bottom:1.5rem}.xp-modal__xp-plus{font-size:2rem;font-weight:300;color:#a78bfa}.xp-modal__xp-value{font-size:4rem;font-weight:900;color:#a78bfa;text-shadow:0 0 30px rgba(168,85,247,.6);animation:xp-glow 1.5s ease infinite alternate}@keyframes xp-glow{0%{text-shadow:0 0 20px rgba(168,85,247,.4)}to{text-shadow:0 0 40px rgba(168,85,247,.8)}}.xp-modal__xp-label{font-size:1.5rem;font-weight:600;color:#8b8b8b;margin-left:.25rem}.xp-modal__breakdown{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem;animation:slide-up .3s ease}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.xp-modal__breakdown-item{display:flex;justify-content:space-between;padding:.5rem 1rem;background:#ffffff0d;border-radius:8px}.xp-modal__breakdown-item--bonus{background:#a855f71a;border:1px solid rgba(168,85,247,.2)}.xp-modal__breakdown-label{font-size:.9rem;color:#b0b0b0}.xp-modal__breakdown-value{font-size:.9rem;font-weight:600;color:#22c55e}.xp-modal__progress{margin-bottom:1rem;animation:slide-up .3s ease .1s both}.xp-modal__progress-bar{height:8px;background:#a855f726;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.xp-modal__progress-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#a78bfa);border-radius:4px;transition:width .5s ease}.xp-modal__progress-label{font-size:.8rem;color:#8b8b8b}.xp-modal__streak{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:#ffa5001a;border:1px solid rgba(255,165,0,.2);border-radius:12px;margin-bottom:1rem;animation:slide-up .3s ease .2s both}.xp-modal__streak-icon{font-size:1.5rem;animation:flame .5s ease infinite alternate}@keyframes flame{0%{transform:scale(1) rotate(-2deg)}to{transform:scale(1.05) rotate(2deg)}}.xp-modal__streak-value{font-size:1rem;font-weight:600;color:orange}.xp-modal__streak-bonus{font-size:.8rem;color:#fbbf24;padding:.25rem .5rem;background:#fbbf2433;border-radius:4px}.xp-modal__daily-goal{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:#22c55e1a;border:1px solid rgba(34,197,94,.2);border-radius:12px;margin-bottom:1rem;font-size:.9rem;color:#22c55e;animation:slide-up .3s ease .3s both}.xp-modal__daily-goal--complete{background:#22c55e33;border-color:#22c55e66;animation:pulse-glow 1s ease infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 #22c55e00}50%{box-shadow:0 0 15px 3px #22c55e4d}}.xp-modal__daily-goal-icon{font-size:1.25rem}.xp-modal__achievements{margin-bottom:1rem;padding:1rem;background:#fbbf241a;border:1px solid rgba(251,191,36,.2);border-radius:12px;animation:achievement-pop .5s cubic-bezier(.175,.885,.32,1.275)}@keyframes achievement-pop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.xp-modal__achievements h3{margin:0 0 .75rem;font-size:1rem;color:#fbbf24}.xp-modal__achievements-list{display:flex;flex-direction:column;gap:.5rem}.xp-modal__achievement{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#0003;border-radius:8px}.xp-modal__achievement-icon{font-size:1.5rem}.xp-modal__achievement-info{display:flex;flex-direction:column;align-items:flex-start}.xp-modal__achievement-name{font-size:.9rem;font-weight:600;color:#fff}.xp-modal__achievement-xp{font-size:.75rem;color:#22c55e}.xp-modal__level-up{padding:1.5rem;background:linear-gradient(135deg,#a855f74d,#6366f14d);border:2px solid rgba(168,85,247,.5);border-radius:16px;margin-bottom:1rem;animation:level-up-pop .6s cubic-bezier(.175,.885,.32,1.275)}@keyframes level-up-pop{0%{opacity:0;transform:scale(.5) rotate(-5deg)}50%{transform:scale(1.1) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0)}}.xp-modal__level-up-icon{font-size:4rem;margin-bottom:.5rem;animation:bounce .5s ease infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-8px)}}.xp-modal__level-up h3{margin:0 0 .25rem;font-size:1.25rem;color:#fff}.xp-modal__level-up-level{font-size:1.5rem;font-weight:800;color:#a78bfa}.xp-modal__actions{margin-top:1.5rem}.xp-modal__continue{width:100%;padding:1rem 2rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #6366f166}.xp-modal__continue:hover{transform:translateY(-2px);box-shadow:0 6px 30px #6366f180}@media(max-width:400px){.xp-modal{padding:1.5rem}.xp-modal__xp-value,.xp-modal__level-up-icon{font-size:3rem}}.gamification-dashboard{min-height:100vh;background:linear-gradient(180deg,#0a0a1a,#1a1a2e);color:#fff;padding-bottom:100px}.gamification-dashboard--loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#a78bfa;border-radius:50%;animation:spin 1s linear infinite}.gd-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;position:sticky;top:0;background:#0a0a1af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;border-bottom:1px solid rgba(255,255,255,.05)}.gd-header__back{padding:.5rem 1rem;background:#ffffff1a;border:none;border-radius:8px;color:#fff;font-size:.9rem;cursor:pointer;transition:background .2s ease}.gd-header__back:hover{background:#ffffff26}.gd-header__spacer{width:80px}.gd-hero{display:flex;justify-content:space-between;align-items:center;padding:2rem 1.5rem;background:linear-gradient(135deg,#8b5cf626,#a855f71a);border-bottom:1px solid rgba(168,85,247,.2)}.gd-hero__level{display:flex;align-items:center;gap:1rem}.gd-hero__level-icon{font-size:3rem;filter:drop-shadow(0 4px 10px rgba(168,85,247,.5))}.gd-hero__level-info{display:flex;flex-direction:column}.gd-hero__level-number{font-size:1.5rem;font-weight:800;color:#fff}.gd-hero__level-title{font-size:1rem;color:#a78bfa}.gd-hero__xp{display:flex;flex-direction:column;align-items:flex-end}.gd-hero__xp-value{font-size:2rem;font-weight:800;color:#a78bfa;text-shadow:0 0 20px rgba(168,85,247,.5)}.gd-hero__xp-label{font-size:.8rem;color:#8b8b8b;text-transform:uppercase;letter-spacing:.1em}.gd-quick-stats{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1rem;overflow-x:auto}.gd-tabs{display:flex;gap:.5rem;padding:.5rem 1rem;overflow-x:auto;border-bottom:1px solid rgba(255,255,255,.05);background:#0003}.gd-tab{flex-shrink:0;padding:.75rem 1rem;background:transparent;border:none;border-radius:8px;color:#8b8b8b;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.gd-tab:hover{color:#fff;background:#ffffff0d}.gd-tab--active{color:#fff;background:#a855f733}.gd-content{padding:1rem}.gd-overview{display:flex;flex-direction:column;gap:1rem}.gd-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.gd-section{margin-top:1rem}.gd-section__title{display:flex;justify-content:space-between;align-items:center;margin:0 0 1rem;font-size:1rem;font-weight:600;color:#fff}.gd-section__link{font-size:.8rem;font-weight:500;color:#a78bfa;background:none;border:none;cursor:pointer}.gd-section__link:hover{text-decoration:underline}.gd-section__hint{color:#6b6b6b;font-size:.9rem;margin:0}.gd-achievements-preview,.gd-achievements-list{display:flex;flex-direction:column;gap:.75rem}.gd-leaderboard{max-width:500px;margin:0 auto}.gd-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.gd-stat-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem 1rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;border:1px solid rgba(96,165,250,.15);text-align:center}.gd-stat-card--guitar{border-color:#22c55e26}.gd-stat-card__icon{font-size:1.5rem}.gd-stat-card__value{font-size:1.5rem;font-weight:800;color:#60a5fa}.gd-stat-card--guitar .gd-stat-card__value{color:#22c55e}.gd-stat-card__label{font-size:.75rem;color:#8b8b8b;line-height:1.3}.gd-footer{position:fixed;bottom:0;left:0;right:0;padding:1rem;background:linear-gradient(180deg,transparent 0%,rgba(10,10,26,.98) 30%);z-index:100}.gd-footer__cta{width:100%;max-width:400px;margin:0 auto;display:block;padding:1rem 2rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #6366f166}.gd-footer__cta:hover{transform:translateY(-2px);box-shadow:0 6px 30px #6366f180}@media(max-width:600px){.gd-hero{flex-direction:column;gap:1.5rem;text-align:center}.gd-hero__level{flex-direction:column;gap:.5rem}.gd-hero__xp{align-items:center}.gd-quick-stats{justify-content:flex-start;padding:1rem .5rem}.gd-tabs{padding:.5rem}.gd-tab{padding:.6rem .75rem;font-size:.8rem}.gd-row{grid-template-columns:1fr}.gd-stats-grid{grid-template-columns:repeat(2,1fr)}}.solos-page{min-height:100vh;background:var(--color-bg);color:var(--color-text-primary)}.solos-header{background:var(--color-surface);border-bottom:1px solid var(--color-border-muted);padding:20px 28px;position:sticky;top:0;z-index:100}.solos-header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1300px;margin:0 auto}.solos-header-left{display:flex;align-items:center;gap:16px}.solos-logo{height:44px;width:auto;cursor:pointer;transition:all .2s ease;opacity:.9;flex-shrink:0}.solos-logo:hover{opacity:1;transform:scale(1.05)}.solos-header-content{display:flex;flex-direction:column;gap:4px;border-left:2px solid var(--color-accent);padding-left:16px}.solos-header-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}.solos-header-title{font-family:var(--font-heading);font-size:16px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent);margin:0;line-height:1.2;text-shadow:0 0 20px var(--color-glow-subtle)}.solos-header-right{display:flex;align-items:center}.solos-exit-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s ease-out}.solos-exit-btn:hover{border-color:var(--color-border-hover);color:var(--color-text-primary);background:var(--color-bg-card-hover);transform:scale(1.03)}.solos-main{max-width:1200px;margin:0 auto;padding:32px}.solos-loading,.solos-error,.solos-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:40vh;gap:16px;text-align:center}.solos-spinner{width:40px;height:40px;border:3px solid var(--color-border-muted);border-top-color:#ff9800;border-radius:50%;animation:spin .8s linear infinite}.solos-empty{color:var(--color-text-muted)}.solos-empty svg{color:#ff9800;opacity:.5}.solos-empty h2{margin:0;font-size:20px;color:var(--color-text-secondary)}.solos-empty p{margin:0;font-size:14px}.solos-grid-container{width:100%;padding:0 0 40px}.solos-flat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px}@media(max-width:900px){.solos-flat-grid{gap:24px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}@media(max-width:600px){.solos-flat-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}}.solos-poster-card{display:flex;flex-direction:column;background:transparent;cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1),filter .35s ease;position:relative}.solos-poster-card:hover{transform:translateY(-6px) scale(1.02)}.solos-poster-image{width:100%;aspect-ratio:4 / 5;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 4px 16px #00000040;transition:box-shadow .35s ease}.solos-poster-card:hover .solos-poster-image{box-shadow:0 8px 32px #00000059,0 0 0 2px #ff980059}.solos-poster-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}.solos-poster-card:hover .solos-poster-image img{transform:scale(1.04)}.solos-poster-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:14px;opacity:0;transition:opacity .4s ease;z-index:1;pointer-events:none}.solos-poster-video.visible{opacity:1}.solos-poster-image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#00000073,#0000 40%);pointer-events:none;border-radius:14px;z-index:2}.solos-poster-bpm-badge{position:absolute;top:10px;right:10px;background:#000000a6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fffffff2;font-family:var(--font-body);font-size:10px;font-weight:700;padding:5px 10px;border-radius:16px;letter-spacing:.06em;z-index:2}.solos-poster-content{padding:14px 2px 4px;display:flex;flex-direction:column;gap:4px}.solos-poster-title{margin:0;font-family:var(--font-heading);font-size:15px;font-weight:700;color:var(--color-text-primary);line-height:1.3;transition:color .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.solos-poster-card:hover .solos-poster-title{color:#ff9800}.solos-poster-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--color-text-muted)}.solos-poster-artist{font-weight:500;color:var(--color-text-secondary);opacity:.8}.solos-poster-meta-dot{font-size:8px;opacity:.4}.solos-poster-date{font-family:var(--font-body);opacity:.7}@media(max-width:768px){.solos-header{padding:16px 20px;gap:16px}.solos-logo{height:40px}.solos-header-title{font-size:18px}.solos-header-subtitle{display:none}.solos-main{padding:20px}}.cg-wrapper{max-width:1200px;margin:0 auto;padding:0 28px 8px}.cg-card{border-radius:16px;overflow:hidden;border:1px solid var(--color-border-muted, rgba(255, 255, 255, .06));background:var(--color-bg-card, #11171c);position:relative}.cg-card.cg-active{border-color:#ff6e0026;background:linear-gradient(180deg,rgba(255,110,0,.04) 0%,var(--color-bg-card, #11171c) 40%)}.cg-progress-section{padding:20px 24px 16px}.cg-progress-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px;gap:12px}.cg-progress-title-row{display:flex;align-items:center;gap:8px}.cg-fire-icon{color:var(--color-accent, #ff6e00);flex-shrink:0}.cg-progress-title{font-family:var(--font-heading, "Montserrat", sans-serif);font-size:15px;font-weight:800;color:var(--color-text-primary, #eef3f4);margin:0;letter-spacing:.04em;text-transform:uppercase}.cg-help-btn{background:none;border:none;color:var(--color-text-muted, #7f9095);cursor:pointer;padding:2px;opacity:.6;transition:opacity .2s}.cg-help-btn:hover{opacity:1;color:var(--color-accent, #ff6e00)}.cg-progress-counter{display:flex;align-items:baseline;gap:3px;font-variant-numeric:tabular-nums;flex-shrink:0}.cg-counter-current{font-size:20px;font-weight:800;color:var(--color-accent, #ff6e00)}.cg-counter-separator{font-size:14px;color:var(--color-text-muted, #7f9095);margin:0 1px}.cg-counter-target{font-size:14px;font-weight:600;color:var(--color-text-secondary, #b9c6c9)}.cg-counter-unit{font-size:11px;color:var(--color-text-muted, #7f9095);margin-left:3px;text-transform:lowercase}.cg-motivational{font-size:13px;color:var(--color-text-muted, #7f9095);margin:0 0 14px;line-height:1.45}.cg-bar-track{width:100%;height:8px;background:#ffffff0a;border-radius:4px;overflow:hidden;position:relative;margin-bottom:8px}.cg-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--color-accent, #ff6e00) 0%,#d9761e 100%);position:relative;transition:width 1.2s cubic-bezier(.22,1,.36,1)}.cg-bar-fill:after{content:"";position:absolute;right:0;top:0;width:24px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3));border-radius:0 4px 4px 0;animation:cg-shimmer 2.5s ease-in-out infinite}@keyframes cg-shimmer{0%,to{opacity:.2}50%{opacity:.7}}.cg-bar-percent{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:#fff9;letter-spacing:.02em;pointer-events:none}.cg-contributors-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--color-text-muted, #7f9095);opacity:.7}.cg-info-tip-trigger{position:relative;display:flex;align-items:center;cursor:help;color:var(--color-text-muted, #7f9095);opacity:.5;transition:opacity .2s}.cg-info-tip-trigger:hover{opacity:1;color:var(--color-accent, #ff6e00)}.cg-info-tip{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);width:260px;padding:12px 14px;font-size:12px;font-weight:500;line-height:1.55;color:var(--color-text-secondary, #b9c6c9);background:var(--color-bg-card, #11171c);border:1px solid rgba(255,110,0,.15);border-radius:10px;box-shadow:0 8px 24px #00000080;z-index:20}.cg-info-tip:before{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%) rotate(45deg);width:10px;height:10px;background:var(--color-bg-card, #11171c);border-top:1px solid rgba(255,110,0,.15);border-left:1px solid rgba(255,110,0,.15)}.cg-info-tip-trigger:hover .cg-info-tip{display:block}.cg-divider{height:1px;background:var(--color-border-muted, rgba(255, 255, 255, .06));margin:4px 24px 0}.cg-vote-section{padding:16px 24px 20px}.cg-vote-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}.cg-vote-title-row{display:flex;align-items:center;gap:6px}.cg-vote-icon{color:var(--color-accent, #ff6e00);opacity:.8}.cg-vote-title{font-family:var(--font-heading, "Montserrat", sans-serif);font-size:13px;font-weight:700;color:var(--color-text-primary, #eef3f4);margin:0;letter-spacing:.03em;text-transform:uppercase}.cg-vote-balance-wrapper{display:flex;align-items:center;gap:6px}.cg-vote-balance{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--color-text-muted, #7f9095);padding:4px 10px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06)}.cg-vote-balance.has-votes{color:var(--color-accent, #ff6e00);background:#ff6e0014;border-color:#ff6e0026}.cg-vote-tip-trigger{position:relative;display:flex;align-items:center;cursor:help;color:var(--color-text-muted, #7f9095);opacity:.5;transition:opacity .2s}.cg-vote-tip-trigger:hover{opacity:1;color:var(--color-accent, #ff6e00)}.cg-vote-tip{display:none;position:absolute;bottom:calc(100% + 8px);right:0;width:220px;padding:10px 12px;font-size:11px;font-weight:500;line-height:1.5;color:var(--color-text-secondary, #b9c6c9);background:var(--color-bg-card, #11171c);border:1px solid rgba(255,110,0,.15);border-radius:10px;box-shadow:0 8px 24px #0006;z-index:10;animation:cg-slide-down .2s ease}.cg-vote-tip:after{content:"";position:absolute;bottom:-5px;right:12px;width:10px;height:10px;background:var(--color-bg-card, #11171c);border-right:1px solid rgba(255,110,0,.15);border-bottom:1px solid rgba(255,110,0,.15);transform:rotate(45deg)}.cg-vote-tip-trigger:hover .cg-vote-tip{display:block}.cg-options{display:flex;flex-direction:column;gap:8px}.cg-option{display:flex;align-items:center;gap:10px}.cg-option-vote-btn{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:var(--color-text-secondary, #b9c6c9);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s ease;flex-shrink:0;font-family:inherit}.cg-option-vote-btn:hover:not(:disabled){background:#ff6e001f;border-color:#ff6e004d;color:var(--color-accent, #ff6e00);transform:scale(1.05)}.cg-option-vote-btn:active:not(:disabled){transform:scale(.95)}.cg-option-vote-btn:disabled{opacity:.3;cursor:not-allowed}.cg-option-content{flex:1;min-width:0}.cg-option-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:8px}.cg-option-label{font-size:13px;font-weight:600;color:var(--color-text-primary, #eef3f4)}.cg-option-votes{font-size:11px;font-weight:500;color:var(--color-text-muted, #7f9095);font-variant-numeric:tabular-nums;flex-shrink:0}.cg-option-mine{color:var(--color-accent, #ff6e00);margin-left:4px;font-weight:600}.cg-option-bar-track{height:4px;background:#ffffff0a;border-radius:2px;overflow:hidden}.cg-option-bar-fill{height:100%;border-radius:2px;background:#ff6e0040;transition:width .6s ease}.cg-option.leading .cg-option-bar-fill{background:linear-gradient(90deg,var(--color-accent, #ff6e00),rgba(255,110,0,.5))}.cg-option.leading .cg-option-label{color:var(--color-accent, #ff6e00)}.cg-login-hint{font-size:11px;color:var(--color-text-muted, #7f9095);margin:10px 0 0;text-align:center;font-style:italic}.cg-card.cg-completed{border-color:#ff6e0033;background:linear-gradient(180deg,rgba(255,110,0,.06) 0%,var(--color-bg-card, #11171c) 60%);padding:24px}.cg-completed-header{text-align:center;margin-bottom:20px}.cg-completed-icon-group{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:10px}.cg-completed-trophy{color:var(--color-accent, #ff6e00);animation:cg-trophy-pulse 2s ease-in-out infinite}@keyframes cg-trophy-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.cg-completed-sparkle{color:#ffb90099;animation:cg-sparkle-float 2.5s ease-in-out infinite}.cg-sparkle-left{animation-delay:0s}.cg-sparkle-right{animation-delay:.4s}@keyframes cg-sparkle-float{0%,to{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.cg-completed-title{font-family:var(--font-heading, "Montserrat", sans-serif);font-size:18px;font-weight:800;color:var(--color-text-primary, #eef3f4);margin:0 0 4px;letter-spacing:.04em;text-transform:uppercase}.cg-completed-subtitle{font-size:13px;color:var(--color-text-muted, #7f9095);margin:0}.cg-completed-winner{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:#ff6e000f;border:1px solid rgba(255,110,0,.12);border-radius:10px;margin-bottom:14px}.cg-completed-winner-label{font-size:12px;color:var(--color-text-muted, #7f9095);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.cg-completed-winner-name{font-family:var(--font-heading, "Montserrat", sans-serif);font-size:16px;font-weight:800;color:var(--color-accent, #ff6e00)}.cg-completed-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--color-text-secondary, #b9c6c9);margin-bottom:10px}.cg-completed-status-dot{width:8px;height:8px;border-radius:50%;background:#4caf50;animation:cg-dot-pulse 1.5s ease-in-out infinite;flex-shrink:0}@keyframes cg-dot-pulse{0%,to{opacity:1;box-shadow:0 0 #4caf5066}50%{opacity:.7;box-shadow:0 0 0 4px #4caf5000}}.cg-completed-next{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--color-text-muted, #7f9095);padding-top:10px;border-top:1px solid var(--color-border-muted, rgba(255, 255, 255, .06))}.cg-completed-next svg{color:var(--color-accent, #ff6e00);opacity:.6}.cg-card.cg-waiting{padding:20px 24px}.cg-waiting-inner{display:flex;align-items:center;gap:14px}.cg-waiting-icon{color:var(--color-accent, #ff6e00);opacity:.6;flex-shrink:0}.cg-waiting-content{flex:1}.cg-waiting-title{font-family:var(--font-heading, "Montserrat", sans-serif);font-size:13px;font-weight:700;color:var(--color-text-primary, #eef3f4);margin:0 0 3px;letter-spacing:.03em;text-transform:uppercase}.cg-waiting-text{font-size:12px;color:var(--color-text-muted, #7f9095);margin:0;line-height:1.45}@media(max-width:767px){.cg-wrapper{padding:0 16px 4px}.cg-progress-section{padding:16px 16px 12px}.cg-progress-header{flex-direction:column;gap:6px}.cg-progress-title{font-size:13px}.cg-counter-current{font-size:18px}.cg-vote-section{padding:12px 16px 16px}.cg-vote-header{flex-direction:column;align-items:flex-start;gap:6px}.cg-divider{margin:4px 16px 0}.cg-help-panel{margin:0 16px}.cg-card.cg-completed{padding:20px 16px}.cg-completed-title{font-size:16px}.cg-card.cg-waiting{padding:16px}}.solos-hub-page{min-height:100vh;background:var(--color-bg);color:var(--color-text-primary)}.solos-hub-header{text-align:center;padding:48px 24px 12px;max-width:800px;margin:0 auto}.solos-hub-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--color-accent);margin-bottom:8px}.solos-hub-title{font-family:var(--font-heading);font-size:28px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-primary);margin:0 0 8px;line-height:1.2}.solos-hub-subtitle{font-size:14px;color:var(--color-text-muted);margin:0}.solos-hub-main-row{display:grid;grid-template-columns:auto 220px 220px;gap:22px;max-width:1200px;margin:0 auto;padding:32px 28px 0;align-items:stretch}.solos-hub-connected-pair{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;border:1px solid rgba(255,110,0,.12);background:linear-gradient(160deg,rgba(255,110,0,.03) 0%,var(--color-bg-card, #11171c) 30%,var(--color-bg-card, #11171c) 70%,rgba(255,110,0,.02) 100%);box-shadow:0 2px 20px #00000026}.solos-hub-pair-banner{display:flex;align-items:center;gap:8px;padding:9px 20px;background:linear-gradient(90deg,#ff6e001a,#ff6e0005);border-bottom:1px solid rgba(255,110,0,.08)}.pair-banner-icon{font-size:13px}.pair-banner-text{font-family:var(--font-heading, "Montserrat", sans-serif);font-size:11px;font-weight:700;color:var(--color-accent, #ff6e00);letter-spacing:.06em;text-transform:uppercase}.solos-hub-pair-body{display:grid;grid-template-columns:220px auto 1fr;align-items:stretch}.solos-hub-connected-pair .solos-hub-card{border:none;border-radius:0;background:transparent}.solos-hub-pair-connector{display:flex;flex-direction:column;align-items:center;justify-content:center;width:24px;position:relative;gap:6px}.pair-connector-line{width:1px;height:100%;background:linear-gradient(180deg,transparent 0%,rgba(255,110,0,.15) 20%,rgba(255,110,0,.15) 80%,transparent 100%)}.pair-connector-pulse{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--color-accent, #ff6e00);box-shadow:0 0 10px #ff6e0059;animation:connectorPulse 3s ease-in-out infinite}@keyframes connectorPulse{0%,to{opacity:.25;transform:scale(.7)}50%{opacity:.7;transform:scale(1)}}.solos-hub-quest-slot{display:flex;flex-direction:column}.solos-hub-quest-slot .cg-wrapper{max-width:none;padding:0;height:100%}.solos-hub-quest-slot .cg-card{height:100%;display:flex;flex-direction:column;border:none;border-radius:0;background:transparent}.solos-hub-pair-storyline{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 20px;border-top:1px solid rgba(255,110,0,.06);background:#ff6e0004}.pair-step{display:flex;align-items:center;gap:5px}.pair-step-num{width:17px;height:17px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--color-accent, #ff6e00);background:#ff6e001a;border-radius:50%}.pair-step-label{font-size:11px;font-weight:500;color:var(--color-text-muted, #7f9095)}.pair-step-arrow{font-size:11px;color:var(--color-accent, #ff6e00);opacity:.3}.solos-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;max-width:1200px;margin:0 auto;padding:22px 28px 24px}.solos-hub-card{position:relative;background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .35s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column}.solos-hub-card:hover{border-color:#ff980080;transform:translateY(-6px) scale(1.01);box-shadow:0 0 40px #ff980014,0 20px 50px #0000004d}.solos-hub-card-cover{position:relative;width:100%;aspect-ratio:3 / 4;overflow:hidden}.solos-hub-card-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.solos-hub-card:hover .solos-hub-card-img{transform:scale(1.05)}.solos-hub-card-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease;z-index:1}.solos-hub-card-video.visible{opacity:1}.solos-hub-card-gradient{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.solos-hub-card-gradient.guitarbear{background:linear-gradient(145deg,#1a1a2e,#16213e 40%,#0f3460)}.solos-hub-card-gradient.community{background:linear-gradient(145deg,#1a1a1a,#2d1b4e,#1a1a2e)}.solos-hub-card-gradient.guests{background:linear-gradient(145deg,#1a2e1a,#0f3460,#1a1a2e)}.solos-hub-card-gradient.placeholder-grad{background:linear-gradient(145deg,#0f0f0f,#1a1a1a,#0f0f0f)}.solos-hub-card-cover-icon{font-size:56px;opacity:.6;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));transition:transform .3s ease,opacity .3s}.solos-hub-card:hover .solos-hub-card-cover-icon{transform:scale(1.1);opacity:.8}.solos-hub-card-coming-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center}.solos-hub-card-coming-badge{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:#ff9800b3;padding:6px 18px;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.solos-hub-card-info{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}.solos-hub-card-title{font-family:var(--font-heading);font-size:15px;font-weight:700;color:var(--color-text-primary);margin:0;line-height:1.3}.solos-hub-card-desc{font-size:12px;color:var(--color-text-muted);line-height:1.5;margin:0;flex:1}.solos-hub-card-cta{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--color-accent);letter-spacing:.08em;text-transform:uppercase;margin-top:6px;transition:gap .2s}.solos-hub-card:hover .solos-hub-card-cta{gap:9px}.solos-hub-card.coming-soon{cursor:default;opacity:.75}.solos-hub-card.coming-soon:hover{transform:none;box-shadow:none;border-color:var(--color-border-muted)}.solos-hub-card.placeholder{cursor:default;opacity:.25;pointer-events:none}.solos-hub-card.placeholder:hover{transform:none;box-shadow:none;border-color:var(--color-border-muted)}.solos-hub-placeholder-lock-icon{color:#fff3}.solos-hub-placeholder-lines{display:flex;flex-direction:column;gap:8px;padding:4px 0}.solos-hub-placeholder-line{height:10px;border-radius:5px;background:var(--color-border-muted)}.solos-hub-placeholder-line.short{height:8px}.solos-hub-more{text-align:center;font-size:13px;color:var(--color-text-muted);opacity:.5;padding:0 24px 48px;letter-spacing:.05em}@media(max-width:1024px){.solos-hub-main-row{grid-template-columns:1fr 1fr;gap:16px}.solos-hub-connected-pair{grid-column:1 / -1}}@media(max-width:767px){.solos-hub-header{padding:28px 20px 8px}.solos-hub-title{font-size:22px}.solos-hub-main-row{grid-template-columns:1fr 1fr;padding:20px 16px 0;gap:14px}.solos-hub-connected-pair{grid-column:1 / -1}.solos-hub-pair-body{grid-template-columns:1fr}.solos-hub-connected-pair .solos-hub-card{border-bottom:1px solid rgba(255,255,255,.06)}.solos-hub-connected-pair .solos-hub-card-cover{aspect-ratio:16 / 9}.solos-hub-connected-pair .solos-hub-card-img{object-position:center 15%}.solos-hub-pair-connector{display:none}.solos-hub-connected-pair .solos-hub-quest-slot .cg-card{padding:0}.solos-hub-pair-storyline{gap:8px;padding:8px 14px}.pair-step-label{font-size:10px}.solos-hub-grid{padding:14px 16px 16px;gap:14px;grid-template-columns:repeat(2,1fr)}.solos-hub-card-cover{aspect-ratio:3 / 4}.solos-hub-card-info{padding:12px 14px 14px}.solos-hub-card-title{font-size:13px}.solos-hub-card-desc{font-size:11px}}@media(max-width:400px){.solos-hub-grid{grid-template-columns:repeat(2,1fr);gap:12px}}.ugc-page{min-height:100vh;background:var(--color-bg);color:var(--color-text-primary);padding-bottom:48px}.ugc-sort-bar{display:flex;align-items:center;gap:8px;justify-content:center;padding:28px 24px 20px;flex-wrap:wrap}.ugc-sort-label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--color-text-muted);font-weight:500}.ugc-sort-btn{display:flex;align-items:center;gap:5px;padding:7px 14px;border:1px solid var(--color-border-muted);border-radius:20px;background:transparent;color:var(--color-text-muted);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.ugc-sort-btn:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.ugc-sort-btn.active{background:#ff6e0014;border-color:var(--color-accent);color:var(--color-accent)}.ugc-cta-card{position:relative;background:linear-gradient(145deg,#1a1040,#0c0a1a);border:1px solid rgba(139,92,246,.25);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .3s cubic-bezier(.23,1,.32,1);min-height:280px;display:flex;align-items:flex-end}.ugc-cta-card:hover{border-color:#8b5cf680;transform:translateY(-2px);box-shadow:0 8px 32px #8b5cf626}.ugc-cta-glow{position:absolute;top:-40%;left:50%;transform:translate(-50%);width:120%;height:60%;background:radial-gradient(ellipse,rgba(139,92,246,.15) 0%,transparent 70%);pointer-events:none}.ugc-cta-content{padding:24px 20px;position:relative;z-index:1}.ugc-cta-icon-wrap{width:44px;height:44px;border-radius:12px;background:#8b5cf626;display:flex;align-items:center;justify-content:center;color:#a78bfa;margin-bottom:14px}.ugc-cta-title{font-family:var(--font-heading);font-size:18px;font-weight:800;color:#fff;margin:0 0 8px}.ugc-cta-desc{font-size:12px;color:#ffffff8c;line-height:1.5;margin:0 0 16px}.ugc-cta-button{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:linear-gradient(135deg,#7c3aed,#6d28d9);border-radius:10px;color:#fff;font-size:13px;font-weight:700;transition:all .2s}.ugc-cta-card:hover .ugc-cta-button{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.ugc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:1200px;margin:0 auto;padding:0 24px}.ugc-card{background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:16px;overflow:hidden;transition:all .25s cubic-bezier(.23,1,.32,1)}.ugc-card:hover{border-color:#ff98004d;box-shadow:0 8px 32px #0003}.ugc-card-clickable{cursor:pointer}.ugc-card-clickable:hover{transform:translateY(-2px)}.ugc-card-video-area{position:relative;width:100%;aspect-ratio:16 / 9;background:#0a0e14;overflow:hidden}.ugc-card-video{width:100%;height:100%;object-fit:cover}.ugc-card-no-video{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#ffffff26;background:linear-gradient(135deg,#0a0e14,#141a24)}.ugc-card-bpm-badge{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;color:#fffc;background:#0000008c;padding:3px 10px;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ugc-card-new-badge{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:#fff;background:linear-gradient(135deg,#10b981,#059669);padding:3px 10px;border-radius:20px;letter-spacing:.3px;animation:newBadgePulse 2s ease-in-out infinite}@keyframes newBadgePulse{0%,to{box-shadow:0 0 #10b9814d}50%{box-shadow:0 0 8px 2px #10b98133}}.ugc-card-body{padding:14px 16px 16px}.ugc-card-title{font-family:var(--font-heading);font-size:14px;font-weight:700;color:var(--color-text-primary);margin:0 0 4px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ugc-card-user{font-size:11px;color:var(--color-text-muted);margin:0 0 10px}.ugc-card-stats{display:flex;align-items:center;justify-content:space-between}.ugc-card-stat{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--color-text-muted);font-weight:500}.ugc-like-stat{color:var(--color-text-secondary)}.ugc-heart-icon{color:#ef4444}.ugc-card-date{font-size:11px;color:var(--color-text-muted);opacity:.7}.ugc-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:80px 24px;text-align:center;color:var(--color-text-muted);opacity:.5}.ugc-empty p{font-size:14px;margin:0}.ugc-skeleton .ugc-card-video-area{background:var(--color-bg-card)}.skeleton-pulse{background:linear-gradient(90deg,#ffffff08 25%,#ffffff0f,#ffffff08 75%);background-size:200% 100%;animation:skeletonPulse 1.5s ease-in-out infinite}@keyframes skeletonPulse{0%{background-position:200% 0}to{background-position:-200% 0}}@media(max-width:767px){.ugc-sort-bar{padding:20px 16px 14px}.ugc-sort-btn{padding:6px 12px;font-size:11px}.ugc-grid{grid-template-columns:1fr;padding:0 16px;gap:14px}}.upload-page{min-height:100vh;background:var(--color-bg);color:var(--color-text-primary);padding-bottom:64px}.upload-header{display:flex;align-items:center;gap:16px;padding:24px 28px 0;max-width:900px;margin:0 auto}.upload-back{display:flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid var(--color-border-muted);border-radius:10px;background:transparent;color:var(--color-text-muted);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.upload-back:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.upload-title{font-family:var(--font-heading);font-size:22px;font-weight:800;margin:0}.upload-steps{display:flex;justify-content:center;gap:24px;padding:24px 24px 16px;max-width:600px;margin:0 auto}.upload-step{display:flex;align-items:center;gap:6px;opacity:.4;transition:all .2s}.upload-step.active{opacity:1}.upload-step.done{opacity:.7}.upload-step-num{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:11px;font-weight:700;border:1.5px solid var(--color-border-muted);color:var(--color-text-muted)}.upload-step.active .upload-step-num{border-color:var(--color-accent);background:var(--color-accent);color:#fff}.upload-step.done .upload-step-num{border-color:#22c55e;background:#22c55e;color:#fff}.upload-step-label{font-size:12px;font-weight:600;color:var(--color-text-muted)}.upload-step.active .upload-step-label{color:var(--color-text-primary)}.upload-content{max-width:700px;margin:0 auto;padding:0 24px}.upload-section{display:flex;flex-direction:column;gap:20px}.upload-dropzone{border:2px dashed var(--color-border-muted);border-radius:20px;padding:60px 40px;text-align:center;cursor:pointer;transition:all .25s;background:#ffffff03}.upload-dropzone:hover{border-color:var(--color-accent);background:#ff6e0005}.upload-dropzone-icon{color:var(--color-accent);opacity:.5;margin-bottom:12px}.upload-dropzone h3{font-family:var(--font-heading);font-size:18px;font-weight:700;margin:0 0 6px}.upload-dropzone p{font-size:13px;color:var(--color-text-muted);margin:0}.upload-alphatab-preview{width:100%;max-height:300px;overflow-y:auto;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0003;margin:12px 0}.upload-manual-fields{display:flex;flex-direction:column;gap:14px;padding:18px 22px;background:#f59e0b0a;border:1px solid rgba(245,158,11,.15);border-radius:14px}.upload-manual-row{display:flex;gap:16px}.upload-manual-row .upload-form-group{flex:1}.upload-manual-row .upload-input{width:100%}.upload-loading{display:flex;flex-direction:column;align-items:center;gap:12px}.upload-spinner{width:32px;height:32px;border:3px solid var(--color-border-muted);border-top-color:var(--color-accent);border-radius:50%;animation:uploadSpin .8s linear infinite}.upload-spinner.small{width:16px;height:16px;border-width:2px}@keyframes uploadSpin{to{transform:rotate(360deg)}}.upload-error{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;background:#ef444414;border:1px solid rgba(239,68,68,.2);color:#ef4444;font-size:12px;font-weight:500}.upload-tips{background:#ffffff05;border:1px solid var(--color-border-muted);border-radius:14px;padding:18px 22px}.upload-tips h4{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--color-text-primary);margin:0 0 10px}.upload-tips ul{margin:0;padding-left:18px}.upload-tips li{font-size:12px;color:var(--color-text-muted);line-height:1.8}.upload-analysis-card{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#22c55e0d;border:1px solid rgba(34,197,94,.15);border-radius:12px}.upload-check{color:#22c55e;flex-shrink:0}.upload-analysis-card strong{display:block;font-size:13px;color:var(--color-text-primary)}.upload-analysis-meta{display:block;font-size:11px;color:var(--color-text-muted);margin-top:2px}.upload-trim-info{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#f59e0b0d;border:1px solid rgba(245,158,11,.15);border-radius:12px;color:#f59e0b;font-size:12px}.upload-trim-player{border-radius:12px;overflow:hidden}.upload-trim-video{width:100%;display:block}.upload-trim-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.upload-trim-input-group{display:flex;flex-direction:column;gap:4px}.upload-trim-input-group label{font-size:10px;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.upload-trim-input-group input{width:80px;padding:6px 10px;background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:8px;color:var(--color-text-primary);font-size:13px}.upload-trim-duration{font-size:12px;color:var(--color-text-muted);margin-left:auto}.upload-preview-card{background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:16px;padding:24px}.upload-preview-card h3{font-size:16px;font-weight:700;margin:0 0 16px}.upload-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.upload-preview-item{display:flex;flex-direction:column;gap:3px}.upload-preview-label{font-size:10px;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.upload-preview-value{font-size:14px;font-weight:600;color:var(--color-text-primary)}.upload-preview-video-wrap{border-radius:12px;overflow:hidden;margin-top:4px}.upload-preview-video{width:100%;display:block}.upload-form{display:flex;flex-direction:column;gap:18px}.upload-form-group{display:flex;flex-direction:column;gap:6px}.upload-form-group label{font-size:12px;font-weight:600;color:var(--color-text-muted)}.upload-input,.upload-textarea{padding:10px 14px;background:var(--color-bg-card);border:1px solid var(--color-border-muted);border-radius:10px;color:var(--color-text-primary);font-size:14px;font-family:var(--font-body);transition:border-color .15s}.upload-input:focus,.upload-textarea:focus{outline:none;border-color:var(--color-accent)}.upload-textarea{resize:vertical}.upload-terms{padding:16px 18px;background:#ffffff05;border:1px solid var(--color-border-muted);border-radius:12px}.upload-terms-check{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--color-text-muted);line-height:1.6;cursor:pointer}.upload-terms-check input[type=checkbox]{margin-top:3px;accent-color:var(--color-accent)}.upload-btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;background:var(--color-accent);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;width:fit-content}.upload-btn-primary:hover{opacity:.9;transform:translateY(-1px)}.upload-btn-submit{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;width:100%}.upload-btn-submit:disabled{opacity:.5;cursor:not-allowed}.upload-btn-submit:not(:disabled):hover{opacity:.9;transform:translateY(-1px)}.upload-btn-secondary{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border-muted);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}.upload-btn-secondary:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.upload-success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:100px 24px;gap:16px;max-width:500px;margin:0 auto}.upload-success-icon{color:#22c55e}.upload-success h2{font-family:var(--font-heading);font-size:28px;font-weight:800;margin:0}.upload-success p{font-size:14px;color:var(--color-text-muted);line-height:1.6;margin:0}.upload-success-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;justify-content:center}@media(max-width:767px){.upload-header{padding:16px 16px 0}.upload-title{font-size:18px}.upload-steps{gap:12px;padding:18px 16px 12px}.upload-step-label{display:none}.upload-content{padding:0 16px}.upload-dropzone{padding:40px 24px}.upload-preview-grid{grid-template-columns:1fr}}.community-page-container{min-height:100vh;background-color:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-primary)}.community-page-container .filters-bar,.community-page-container .videos-grid{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.community-page-container .filters-bar{margin-top:var(--spacing-md)}.community-cockpit .header-stats{display:flex;gap:8px}.community-cockpit .stat-badge{display:flex;align-items:center;gap:6px;background:var(--color-surface, rgba(255,255,255,.05));padding:6px 12px;border-radius:20px;border:1px solid var(--color-border-default, rgba(255,255,255,.1));color:var(--color-text-secondary, #94a3b8);font-size:12px;font-weight:600}.community-cockpit .stat-badge.votes-left{border-color:var(--color-warning, #f59e0b);color:var(--color-warning, #f59e0b);background:#fbbf241a}.filters-bar{margin-bottom:var(--spacing-xl);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.filter-stats{display:flex;align-items:center;gap:16px}.filter-stat{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--color-text-secondary);font-weight:500}.filter-stat.votes{color:var(--color-warning, #f59e0b)}.sort-toggles{display:flex;background:var(--color-surface-alt);padding:4px;border-radius:var(--radius-lg);border:1px solid var(--color-border-muted)}.sort-btn{display:flex;align-items:center;gap:var(--spacing-sm);background:transparent;border:none;color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;font-weight:var(--font-weight-medium);transition:all var(--transition-fast);font-size:var(--font-size-sm)}.sort-btn:hover{color:var(--color-text-primary);background:#ffffff08}.sort-btn.active{background:var(--color-bg-secondary);color:var(--color-text-primary);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-default)}.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--spacing-lg)}.video-card{background:var(--color-surface);border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--color-border-default);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-card)}.video-card:hover{transform:translateY(-4px);border-color:var(--color-border-hover);box-shadow:var(--shadow-card-hover)}.video-thumbnail-wrapper{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}.video-preview{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .3s ease}.video-card:hover .video-preview{opacity:1;transform:scale(1.02)}.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0006;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.3);transition:all .2s ease;box-shadow:0 4px 12px #0000004d}.video-card:hover .play-overlay{background:var(--color-accent);border-color:var(--color-accent);color:#000!important;transform:translate(-50%,-50%) scale(1.1)}.video-card:hover .play-overlay svg{fill:#000;stroke:#000}.voted-badge{position:absolute;top:12px;right:12px;background:var(--color-success);color:#000;padding:4px 10px;border-radius:20px;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);display:flex;align-items:center;gap:4px;box-shadow:var(--shadow-sm);z-index:10}.video-card-info{padding:var(--spacing-lg);background:var(--color-surface)}.user-info{margin-bottom:var(--spacing-sm)}.nickname{font-weight:var(--font-weight-bold);color:var(--color-text-primary);font-size:var(--font-size-md);margin-bottom:2px;display:block}.stats-row{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-sm)}.stat{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary);font-size:var(--font-size-sm)}.text-yellow{color:var(--color-warning)}.text-accent{color:var(--color-accent)}.empty-state{grid-column:1 / -1;text-align:center;padding:4rem;color:var(--color-text-secondary);background:var(--color-surface-alt);border-radius:var(--radius-xl);border:1px dashed var(--color-border-default)}.video-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--color-bg-overlay);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.video-modal{width:100%;max-width:1000px;background:var(--color-surface);border-radius:var(--radius-2xl);overflow:hidden;border:1px solid var(--color-border-default);box-shadow:var(--shadow-xl);animation:slideUp .3s ease-out;display:flex;flex-direction:column}.modal-header{padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-border-muted);background:var(--color-surface-alt)}.modal-header h3{margin:0;font-size:var(--font-size-lg);display:flex;align-items:center;gap:var(--spacing-sm);color:var(--color-text-primary);font-family:var(--font-heading)}.me-badge{font-size:10px;background:var(--color-bg-secondary);padding:2px 6px;border-radius:4px;color:var(--color-text-secondary);text-transform:uppercase;border:1px solid var(--color-border-muted)}.close-btn{background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;padding:4px;border-radius:50%;transition:all .2s}.close-btn:hover{color:var(--color-text-primary);background:#ffffff1a}.modal-video-wrapper{background:#000;width:100%;position:relative;aspect-ratio:16/9}.modal-video{width:100%;height:100%;display:block}.modal-footer{padding:var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;background:var(--color-surface);border-top:1px solid var(--color-border-muted)}.vote-controls{display:flex;flex-direction:column;gap:var(--spacing-sm)}.stars-row{display:flex;gap:6px}.star-btn{background:var(--color-bg-secondary);border:1px solid var(--color-border-muted);color:var(--color-text-muted);width:42px;height:52px;border-radius:var(--radius-md);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:all .15s ease}.star-btn:hover:not(:disabled){background:var(--color-surface-elevated);border-color:var(--color-accent);transform:translateY(-2px);color:var(--color-accent)}.star-btn.selected{background:#f5a6231a;border-color:#f5a623;color:#f5a623;box-shadow:0 0 10px #f5a62333}.star-btn .filled{fill:currentColor;color:currentColor}.score-num{font-size:.75rem;font-weight:700}.star-btn:disabled{opacity:.5;cursor:not-allowed}.current-stats{display:flex;gap:var(--spacing-md)}.stat-box{background:var(--color-bg-secondary);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-lg);text-align:center;border:1px solid var(--color-border-muted);min-width:80px}.stat-box .label{display:block;font-size:.7rem;color:var(--color-text-secondary);text-transform:uppercase;margin-bottom:2px}.stat-box .value{display:block;font-size:1.25rem;font-weight:700;color:var(--color-text-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:768px){.community-page-container{padding:var(--spacing-md);padding-bottom:6rem}.community-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.header-stats{width:100%;justify-content:space-between;flex-wrap:wrap}.filters-bar{overflow-x:auto;padding-bottom:.5rem;scrollbar-width:none;-ms-overflow-style:none}.filters-bar::-webkit-scrollbar{display:none}.modal-footer{flex-direction:column;gap:var(--spacing-lg);align-items:stretch}.current-stats{justify-content:space-around;width:100%}.stat-box{flex:1}.stars-row{justify-content:space-between}.star-btn{width:100%;height:48px;flex:1}}.chord-test-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;background-color:#09090b;color:#e4e4e7;font-family:Inter,sans-serif;padding:2rem;transition:background-color .5s ease;overflow-x:hidden}.chord-test-container.success{background:radial-gradient(circle at center,#064e3b,#09090b 70%)}.header-bar{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:600px;margin-bottom:2rem;padding:1rem;background:#18181b;border-radius:1rem;border:1px solid #27272a}.chord-test-container h1{font-family:Orbitron,Inter,sans-serif;font-size:1.2rem;margin:0;background:linear-gradient(to right,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:900;letter-spacing:1px}.score-badge{background:#27272a;padding:.5rem 1.2rem;border-radius:99px;font-weight:800;font-family:Orbitron,monospace;color:#fbbf24;border:1px solid #fbbf24;box-shadow:0 0 10px #fbbf2433}.game-area{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:400px;flex:1;justify-content:center}.target-card{background:#181926;border:2px solid #6366f1;border-radius:1.5rem;padding:2rem;text-align:center;width:100%;position:relative;box-shadow:0 0 30px #6366f126}.target-card .label{text-transform:uppercase;font-size:.8rem;letter-spacing:3px;color:#818cf8;font-weight:700}.target-chord-text{font-family:Orbitron,sans-serif;font-size:5rem;font-weight:900;margin:.5rem 0;color:#fff;text-shadow:0 0 20px rgba(99,102,241,.6)}.controls{display:flex;gap:1rem;width:100%;justify-content:center}.start-button,.stop-button,.skip-button{padding:1rem 2rem;font-size:1rem;border-radius:12px;border:none;cursor:pointer;font-weight:700;transition:all .2s;text-transform:uppercase;font-family:Orbitron,sans-serif;letter-spacing:1px}.start-button{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 4px #15803d}.start-button:active{box-shadow:0 0 #15803d;transform:translateY(4px)}.stop-button{background:#3f3f46;color:#e4e4e7;border:1px solid #52525b}.skip-button{background:transparent;color:#a1a1aa;border:1px dashed #52525b}.skip-button:hover{color:#fff;border-color:#d4d4d8}.feedback-section{width:100%}.detection-card{background:#000;border:1px solid #27272a;border-radius:1rem;padding:1.5rem;text-align:center;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.detection-card .label{text-transform:uppercase;font-size:.7rem;letter-spacing:2px;color:#52525b;font-weight:600}.detected-text{font-family:Orbitron,sans-serif;font-size:3rem;font-weight:700;color:#71717a;min-height:4rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.confidence-bar{height:4px;background:#27272a;border-radius:2px;margin-top:1rem;overflow:hidden;position:relative}.fill{height:100%;border-radius:2px;transition:width .1s linear,background-color .2s;box-shadow:0 0 8px currentColor}.detection-card.match{border-color:#22c55e;background:#22c55e0d}.detection-card.match .label{color:#22c55e}.detection-card.match .detected-text{color:#22c55e;text-shadow:0 0 15px rgba(34,197,94,.5);transform:scale(1.1)}.error-message{background:#450a0a;color:#fca5a5;padding:1rem;border-radius:8px;margin-bottom:2rem;border:1px solid #991b1b;text-align:center}.debug-footer{margin-top:3rem;font-size:.7rem;color:#52525b;text-align:center;font-family:monospace;width:100%;max-width:400px}.threshold-control{margin-bottom:2rem;display:flex;flex-direction:column;gap:.5rem;align-items:center;background:#18181b;padding:1rem;border-radius:8px;border:1px solid #27272a}.threshold-control label{font-family:Orbitron,monospace;color:#a1a1aa;font-size:.9rem}input[type=range]{width:100%;accent-color:#6366f1;cursor:pointer}.help-text{font-size:.7rem;color:#71717a;font-style:italic}.admin-dm-page{display:flex;height:100vh;background:var(--color-bg);color:var(--color-text-primary);font-family:var(--font-primary)}.admin-dm-sidebar{width:320px;min-width:280px;display:flex;flex-direction:column;background:var(--color-surface);border-right:1px solid var(--color-border-muted)}.admin-dm-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--color-border-muted)}.admin-dm-sidebar-header h2{margin:0;font-size:18px;font-weight:700;color:var(--color-accent)}.admin-dm-total-badge{background:var(--color-error);color:#fff;font-size:11px;font-weight:700;min-width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;padding:0 6px}.admin-dm-threads{flex:1;overflow-y:auto}.admin-dm-thread{padding:12px 16px;border-bottom:1px solid var(--color-border-muted);cursor:pointer;transition:background .15s}.admin-dm-thread:hover{background:#ffffff08}.admin-dm-thread.active{background:var(--color-accent-soft);border-left:3px solid var(--color-accent)}.admin-dm-thread.has-unread{background:#ff6e000d}.admin-dm-thread-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.admin-dm-thread-nick{font-size:14px;font-weight:600;color:var(--color-text-primary)}.admin-dm-thread.has-unread .admin-dm-thread-nick{color:var(--color-accent)}.admin-dm-thread-time{font-size:11px;color:var(--color-text-muted)}.admin-dm-thread-preview{display:flex;align-items:center;justify-content:space-between;gap:8px}.admin-dm-thread-msg{font-size:12px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.admin-dm-unread-badge{background:var(--color-accent);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0}.admin-dm-no-threads{display:flex;align-items:center;justify-content:center;padding:40px 20px;color:var(--color-text-muted);font-size:14px}.admin-dm-refresh{padding:10px 16px;background:var(--color-surface-elevated);border:1px solid var(--color-border-muted);border-radius:0;color:var(--color-text-secondary);font-size:13px;font-family:var(--font-primary);cursor:pointer;transition:background .15s}.admin-dm-refresh:hover{background:var(--color-accent-soft);color:var(--color-accent)}.admin-dm-main{flex:1;display:flex;flex-direction:column;min-width:0}.admin-dm-empty-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--color-text-muted);font-size:16px}.admin-dm-empty-icon{font-size:48px;opacity:.5}.admin-dm-main-header{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--color-surface);border-bottom:1px solid var(--color-border-muted)}.admin-dm-back{background:none;border:none;color:var(--color-text-secondary);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .15s}.admin-dm-back:hover{background:#ffffff0f}.admin-dm-main-nick{font-size:16px;font-weight:700;color:var(--color-text-primary)}.admin-dm-main-count{font-size:12px;color:var(--color-text-muted);margin-left:auto}.admin-dm-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px}.admin-dm-loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--color-text-muted)}.admin-dm-msg{padding:10px 14px;border-radius:10px;max-width:70%}.admin-dm-msg-user{align-self:flex-start;background:var(--color-surface-elevated);border:1px solid var(--color-border-muted)}.admin-dm-msg-instructor{align-self:flex-end;background:var(--color-accent-soft);border:1px solid rgba(255,110,0,.2)}.admin-dm-msg-system{align-self:center;background:transparent;text-align:center;max-width:80%;opacity:.6;font-style:italic;border:none}.admin-dm-msg-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.admin-dm-msg-sender{font-size:11px;font-weight:700}.admin-dm-sender-user{color:var(--color-text-secondary)}.admin-dm-sender-instructor{color:var(--color-accent)}.admin-dm-sender-system{color:var(--color-text-muted)}.admin-dm-msg-time{font-size:10px;color:var(--color-text-muted)}.admin-dm-msg-content{font-size:14px;color:var(--color-text-primary);line-height:1.6;white-space:pre-wrap;word-break:break-word}.admin-dm-msg-system .admin-dm-msg-content{font-size:12px;color:var(--color-text-muted)}.admin-dm-msg-media{margin-top:8px}.admin-dm-msg-media img{border-radius:8px;max-width:100%}.admin-dm-reply-area{display:flex;align-items:flex-end;gap:10px;padding:12px 20px;background:var(--color-surface);border-top:1px solid var(--color-border-muted)}.admin-dm-reply-input{flex:1;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:8px;padding:10px 14px;color:var(--color-text-primary);font-size:14px;font-family:var(--font-primary);resize:none;outline:none;transition:border-color .2s}.admin-dm-reply-input:focus{border-color:var(--color-accent)}.admin-dm-reply-input::placeholder{color:var(--color-text-muted)}.admin-dm-reply-btn{padding:10px 20px;background:var(--color-accent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;font-family:var(--font-primary);cursor:pointer;transition:all .15s;white-space:nowrap}.admin-dm-reply-btn:hover:not(:disabled){background:var(--color-accent-hover);transform:translateY(-1px)}.admin-dm-reply-btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.admin-dm-sidebar{width:100%}.admin-dm-page{flex-direction:column}}.about-page{min-height:100vh;background:var(--color-bg-primary);color:var(--color-text-primary);overflow-x:hidden}.about-page .top-navbar{position:fixed;background:#0a0a0fe6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.about-page .mobile-menu-overlay,.about-page .mobile-menu-panel{position:fixed}.about-hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;padding:140px var(--spacing-xl) var(--spacing-4xl);text-align:center;overflow:hidden}.about-hero-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(var(--color-accent-rgb, 255, 165, 0),.08) 0%,transparent 70%);pointer-events:none}.about-hero-content{position:relative;z-index:1;max-width:720px;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.about-hero-logo{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(var(--color-accent-rgb, 255, 165, 0),.3));animation:aboutLogoFloat 3s ease-in-out infinite}@keyframes aboutLogoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.about-hero-title{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.5rem);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);margin:0;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase}.about-hero-subtitle{font-family:var(--font-body);font-size:var(--font-size-lg);color:var(--color-text-secondary);margin:0;line-height:var(--line-height-relaxed);max-width:600px}.about-content-section{padding:var(--spacing-4xl) var(--spacing-xl);background:var(--gradient-card-hard)}.about-content-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-3xl)}.about-text-block{display:flex;flex-direction:column;gap:var(--spacing-xl)}.about-text-block p{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:1.85;margin:0}.about-vision-block{background:var(--color-bg-card);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--spacing-2xl);text-align:center;position:relative;overflow:hidden}.about-vision-block:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary)}.about-vision-icon{font-size:40px;margin-bottom:var(--spacing-md)}.about-vision-title{font-family:var(--font-heading);font-size:var(--font-size-2xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0 0 var(--spacing-lg) 0;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-shadow:0 0 15px var(--color-glow-strong)}.about-vision-block p{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:1.85;margin:0;text-align:left}.about-experience-section{padding:var(--spacing-4xl) var(--spacing-xl)}.about-experience-container{max-width:1000px;margin:0 auto}.about-section-title{font-family:var(--font-heading);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);text-align:center;margin:0 0 var(--spacing-3xl) 0;letter-spacing:var(--letter-spacing-wide)}.about-experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl)}.about-experience-card{background:var(--color-bg-card);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--spacing-2xl);text-align:center;transition:all var(--transition-normal);position:relative;overflow:hidden}.about-experience-card:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-normal)}.about-experience-card:hover{border-color:var(--color-border-hover);transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--shadow-glow-subtle)}.about-experience-card:hover:after{opacity:1}.about-exp-icon{font-size:36px;margin-bottom:var(--spacing-md)}.about-experience-card h3{font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-extrabold);color:var(--color-accent);margin:0 0 var(--spacing-md) 0;letter-spacing:var(--letter-spacing-normal);text-transform:uppercase}.about-experience-card p{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.about-why-section{padding:var(--spacing-4xl) var(--spacing-xl);background:var(--gradient-card-hard)}.about-why-container{max-width:800px;margin:0 auto;text-align:center}.about-why-text{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:1.85;margin:0;text-align:left}.about-contact-section{padding:var(--spacing-4xl) var(--spacing-xl)}.about-contact-container{max-width:600px;margin:0 auto;text-align:center}.about-contact-intro{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-secondary);margin:0 0 var(--spacing-2xl) 0;line-height:var(--line-height-relaxed)}.about-contact-card{background:var(--color-bg-card);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--spacing-2xl);text-align:left}.about-contact-company{font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--spacing-xl) 0;padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border-muted)}.about-contact-info{display:flex;flex-direction:column;gap:var(--spacing-xl)}.about-contact-item{display:flex;align-items:flex-start;gap:var(--spacing-md)}.about-contact-icon{font-size:24px;flex-shrink:0;margin-top:2px}.about-contact-label{display:block;font-family:var(--font-heading);font-size:var(--font-size-xs);font-weight:var(--font-weight-extrabold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);margin-bottom:4px}.about-contact-value{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-primary);line-height:var(--line-height-relaxed);text-decoration:none;transition:color var(--transition-fast)}a.about-contact-value:hover{color:var(--color-accent)}.about-footer{background:var(--color-bg-secondary);border-top:1px solid var(--color-border-muted);padding:var(--spacing-xl) var(--spacing-xl)}.about-footer-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.about-footer-brand{display:flex;align-items:center;gap:var(--spacing-sm)}.about-footer-logo{width:28px;height:28px;object-fit:contain}.about-footer-brand-name{font-family:var(--font-heading);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}.about-footer-brand-accent{color:var(--color-accent)}.about-footer-copy{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0}.about-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-md) var(--spacing-xl)}.about-footer-links a{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-fast)}.about-footer-links a:hover{color:var(--color-accent)}.about-footer-inner{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}@media(max-width:768px){.about-hero{min-height:340px;padding:120px var(--spacing-lg) var(--spacing-3xl)}.about-hero-logo{width:56px;height:56px}.about-hero-subtitle{font-size:var(--font-size-md)}.about-content-section,.about-experience-section,.about-why-section,.about-contact-section{padding:var(--spacing-3xl) var(--spacing-lg)}.about-experience-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}.about-vision-block{padding:var(--spacing-xl)}.about-footer-inner{flex-direction:column;gap:var(--spacing-md);text-align:center}}@media(max-width:480px){.about-hero{min-height:280px;padding:100px var(--spacing-md) var(--spacing-2xl)}.about-hero-logo{width:48px;height:48px}.about-hero-title{font-size:var(--font-size-2xl)}.about-hero-subtitle{font-size:var(--font-size-sm)}.about-content-section,.about-experience-section,.about-why-section,.about-contact-section{padding:var(--spacing-2xl) var(--spacing-md)}.about-text-block p,.about-vision-block p,.about-why-text{font-size:var(--font-size-sm)}.about-section-title{font-size:var(--font-size-xl);margin-bottom:var(--spacing-xl)}.about-experience-card,.about-contact-card{padding:var(--spacing-xl)}.about-contact-company{font-size:var(--font-size-md)}.about-contact-value{font-size:var(--font-size-sm)}}.legal-page{min-height:100vh;background:var(--color-bg-primary);color:var(--color-text-primary);overflow-x:hidden}.legal-page .top-navbar{position:fixed;background:#0a0a0fe6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.legal-page .mobile-menu-overlay,.legal-page .mobile-menu-panel{position:fixed}.legal-content{max-width:780px;margin:0 auto;padding:120px var(--spacing-xl) var(--spacing-4xl)}.legal-header{text-align:center;margin-bottom:var(--spacing-3xl);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--color-border-muted)}.legal-title{font-family:var(--font-heading);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:var(--font-weight-extrabold);color:var(--color-text-primary);margin:0 0 var(--spacing-md) 0;letter-spacing:var(--letter-spacing-wide)}.legal-meta{font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0}.legal-body{display:flex;flex-direction:column;gap:var(--spacing-2xl)}.legal-section{position:relative}.legal-section-title{font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-accent);margin:0 0 var(--spacing-md) 0;letter-spacing:var(--letter-spacing-normal)}.legal-section-content{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:1.85}.legal-section-content strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.legal-bullet{color:var(--color-accent);margin-right:4px}.legal-footer{background:var(--color-bg-secondary);border-top:1px solid var(--color-border-muted);padding:var(--spacing-2xl) var(--spacing-xl)}.legal-footer-inner{max-width:780px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.legal-footer-brand{display:flex;align-items:center;gap:var(--spacing-sm)}.legal-footer-logo{width:24px;height:24px;object-fit:contain}.legal-footer-brand-name{font-family:var(--font-heading);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}.legal-footer-brand-accent{color:var(--color-accent)}.legal-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-md) var(--spacing-xl)}.legal-footer-links a{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-fast)}.legal-footer-links a:hover{color:var(--color-accent)}.legal-footer-copy{font-family:var(--font-body);font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0}@media(max-width:768px){.legal-content{padding:100px var(--spacing-lg) var(--spacing-3xl)}.legal-section-content{font-size:var(--font-size-sm)}}@media(max-width:480px){.legal-content{padding:90px var(--spacing-md) var(--spacing-2xl)}.legal-title{font-size:var(--font-size-2xl)}.legal-section-title{font-size:var(--font-size-md)}.legal-section-content{font-size:var(--font-size-sm);line-height:1.75}.legal-footer-links{flex-direction:column;gap:var(--spacing-sm)}}.premium-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:premiumFadeIn .2s ease;padding:16px}@keyframes premiumFadeIn{0%{opacity:0}to{opacity:1}}@keyframes premiumSlideUp{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.premium-modal{position:relative;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;background:linear-gradient(145deg,#1a1a2e,#16213e,#0f3460);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:36px 28px 28px;box-shadow:0 24px 80px #00000080,0 0 0 1px #ffffff0a,inset 0 1px #ffffff0f;animation:premiumSlideUp .3s ease;text-align:center}.premium-modal-close{position:absolute;top:14px;right:14px;background:#ffffff0f;border:none;border-radius:8px;padding:6px;cursor:pointer;color:#ffffff80;transition:all .2s}.premium-modal-close:hover{background:#ffffff1f;color:#ffffffe6}.premium-modal-crown{font-size:44px;margin-bottom:12px;filter:drop-shadow(0 4px 12px rgba(255,165,0,.3))}.premium-modal-title{font-size:22px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-.3px}.premium-modal-subtitle{font-size:14px;color:#ffffff8c;line-height:1.5;max-width:420px;margin:0 auto 24px}.premium-modal-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;text-align:left}.premium-feature-item{display:flex;align-items:flex-start;gap:10px;padding:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.05);border-radius:12px;transition:background .2s}.premium-feature-item:hover{background:#ffffff12}.premium-feature-icon{font-size:20px;flex-shrink:0;margin-top:1px}.premium-feature-text{display:flex;flex-direction:column;gap:2px}.premium-feature-text strong{font-size:12.5px;font-weight:600;color:#ffffffe6}.premium-feature-text span{font-size:11px;color:#fff6;line-height:1.35}.premium-modal-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:320px;padding:14px 28px;background:linear-gradient(135deg,#ff6e00,#ff9a00);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:all .25s;box-shadow:0 4px 20px #ff6e0059;letter-spacing:.2px}.premium-modal-cta:hover{transform:translateY(-1px);box-shadow:0 6px 28px #ff6e0073}.premium-modal-cta:active{transform:translateY(0)}.premium-modal-trust{font-size:11.5px;color:#ffffff4d;margin:14px 0 0}@media(max-width:560px){.premium-modal{padding:28px 20px 20px}.premium-modal-features{grid-template-columns:1fr;gap:8px}.premium-modal-title{font-size:20px}.premium-modal-crown{font-size:36px}}.save-tab-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#ff6e001f;border:1px solid rgba(255,110,0,.2);border-radius:8px;color:#ff6e00;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.save-tab-btn:hover{background:#ff6e0033;border-color:#ff6e0059}.save-tab-btn.saving{opacity:.6;pointer-events:none}.saved-tab-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:#10b9811a;border:1px solid rgba(16,185,129,.18);border-radius:8px;color:#10b981;cursor:default}.my-tabs-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffbf;font-size:12.5px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.my-tabs-btn:hover{background:#ffffff1a;color:#ffffffe6}.save-tab-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#000000a6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:premiumFadeIn .2s ease;padding:16px}.save-tab-modal{width:100%;max-width:420px;background:linear-gradient(145deg,#1a1a2e,#16213e);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px 24px 24px;animation:premiumSlideUp .25s ease}.save-tab-modal h3{font-size:18px;font-weight:700;color:#fff;margin:0 0 6px;display:flex;align-items:center;gap:8px}.save-tab-modal-subtitle{font-size:13px;color:#fff6;margin:0 0 20px}.save-tab-input-group{margin-bottom:16px}.save-tab-input-group label{display:block;font-size:12px;font-weight:600;color:#fff9;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.save-tab-input-group input{width:100%;padding:12px 14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;font-size:14px;outline:none;transition:border-color .2s;box-sizing:border-box}.save-tab-input-group input:focus{border-color:#ff6e0080}.save-tab-input-group input::placeholder{color:#ffffff40}.save-tab-file-info{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#ffffff08;border-radius:8px;margin-bottom:20px}.save-tab-file-ext{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;background:#8b5cf626;border:1px solid rgba(139,92,246,.2);border-radius:6px;font-size:10px;font-weight:700;color:#a78bfa;text-transform:uppercase;letter-spacing:.5px}.save-tab-file-name{font-size:12.5px;color:#ffffff80;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.save-tab-file-size{font-size:11px;color:#ffffff4d;flex-shrink:0}.save-tab-actions{display:flex;gap:10px;justify-content:flex-end}.save-tab-cancel-btn{padding:10px 20px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff9;font-size:13.5px;font-weight:500;cursor:pointer;transition:all .2s}.save-tab-cancel-btn:hover{background:#ffffff1a;color:#fffc}.save-tab-confirm-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;background:linear-gradient(135deg,#ff6e00,#ff9a00);border:none;border-radius:10px;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 2px 12px #ff6e004d}.save-tab-confirm-btn:hover{box-shadow:0 4px 18px #ff6e0066;transform:translateY(-1px)}.save-tab-confirm-btn:disabled{opacity:.5;pointer-events:none}.my-tabs-drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#0000008c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:premiumFadeIn .15s ease}.my-tabs-drawer{position:fixed;top:0;right:0;bottom:0;z-index:10000;width:380px;max-width:90vw;background:linear-gradient(180deg,#1a1a2e,#16213e);border-left:1px solid rgba(255,255,255,.06);box-shadow:-12px 0 40px #0006;display:flex;flex-direction:column;animation:drawerSlideIn .25s ease}@keyframes drawerSlideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.my-tabs-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.06)}.my-tabs-drawer-header h3{font-size:17px;font-weight:700;color:#fff;margin:0;display:flex;align-items:center;gap:8px}.my-tabs-drawer-count{font-size:11px;color:#ffffff59;font-weight:500}.my-tabs-drawer-close{background:#ffffff0f;border:none;border-radius:8px;padding:6px;cursor:pointer;color:#ffffff80;transition:all .2s}.my-tabs-drawer-close:hover{background:#ffffff1f;color:#ffffffe6}.my-tabs-drawer-list{flex:1;overflow-y:auto;padding:12px}.my-tab-card{display:flex;flex-direction:column;gap:8px;padding:14px;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:12px;margin-bottom:8px;transition:all .2s}.my-tab-card:hover{background:#ffffff0f;border-color:#ffffff14}.my-tab-card-top{display:flex;align-items:center;gap:10px}.my-tab-card-ext{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf61a;border:1px solid rgba(139,92,246,.15);border-radius:10px;font-size:9px;font-weight:800;color:#a78bfa;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.my-tab-card-info{flex:1;min-width:0}.my-tab-card-name{font-size:13.5px;font-weight:600;color:#ffffffe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 2px}.my-tab-card-meta{font-size:11px;color:#ffffff4d;display:flex;gap:8px}.my-tab-card-actions{display:flex;gap:6px}.my-tab-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:6px 10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:7px;color:#ffffff8c;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s}.my-tab-action-btn:hover{background:#ffffff1a;color:#fffc}.my-tab-action-btn.load{background:#ff6e001a;border-color:#ff6e0026;color:#ff6e00}.my-tab-action-btn.load:hover{background:#ff6e0033}.my-tab-action-btn.delete:hover{background:#ef44441f;border-color:#ef444433;color:#ef4444}.my-tab-action-btn.share{color:#ffffff59}.my-tab-action-btn.coming-soon{opacity:.45;cursor:default;pointer-events:auto}.my-tab-action-btn.coming-soon:hover{background:#ffffff0d;color:#fff6}.my-tab-rename-input{padding:6px 10px;background:#ffffff0f;border:1px solid rgba(255,110,0,.4);border-radius:7px;color:#fff;font-size:13px;outline:none;width:100%;box-sizing:border-box}.my-tabs-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}.my-tabs-empty-icon{font-size:40px;margin-bottom:12px;opacity:.5}.my-tabs-empty-title{font-size:15px;font-weight:600;color:#fff9;margin:0 0 6px}.my-tabs-empty-desc{font-size:12.5px;color:#ffffff4d;line-height:1.5;max-width:260px}.my-tabs-loading{display:flex;align-items:center;justify-content:center;padding:40px;color:#fff6;font-size:13px}.save-tab-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:10001;display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#059669,#10b981);border-radius:12px;color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 8px 24px #0596694d;animation:toastIn .3s ease,toastOut .3s ease 2.7s forwards;pointer-events:none}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(8px)}}.my-tab-delete-confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10001;display:flex;align-items:center;justify-content:center;background:#0009;padding:16px}.my-tab-delete-confirm{width:100%;max-width:340px;background:#1a1a2e;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:24px;text-align:center}.my-tab-delete-confirm p{font-size:14px;color:#ffffffb3;margin:0 0 20px;line-height:1.5}.my-tab-delete-confirm-actions{display:flex;gap:10px;justify-content:center}.my-tab-delete-confirm-actions button{padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.my-tab-delete-cancel{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#fff9}.my-tab-delete-confirm-btn{background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#ef4444}.my-tab-delete-confirm-btn:hover{background:#ef444440}@media(max-width:480px){.my-tabs-drawer{width:100%;max-width:100vw}}.jam-tool{display:flex;flex-direction:column;gap:10px;font-family:var(--font-body)}.jam-controls{display:flex;align-items:center;gap:6px}.jam-key-sel{padding:6px 8px;border:1px solid var(--color-border-muted);border-radius:6px;background:var(--color-bg-tertiary);color:var(--color-text-primary);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;outline:none;transition:border-color .12s;flex-shrink:0}.jam-key-sel:hover,.jam-key-sel:focus{border-color:var(--color-accent)}.jam-scale-tog{display:flex;border-radius:6px;overflow:hidden;border:1px solid var(--color-border-muted);flex-shrink:0}.jam-scale-btn{padding:6px 11px;border:none;background:var(--color-bg-tertiary);color:var(--color-text-muted);font-family:var(--font-body);font-size:11px;font-weight:700;cursor:pointer;transition:all .1s}.jam-scale-btn:first-child{border-right:1px solid var(--color-border-muted)}.jam-scale-btn.on{background:var(--color-accent);color:#000}.jam-shuffle{width:32px;height:32px;border-radius:6px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;padding:0}.jam-shuffle:hover{border-color:var(--color-accent);color:var(--color-accent)}.jam-spacer{flex:1;text-align:center}.jam-bpm{display:flex;align-items:center;gap:3px;flex-shrink:0}.jam-bpm-btn{width:24px;height:24px;border-radius:50%;border:1px solid var(--color-border-muted);background:transparent;color:var(--color-text-muted);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;line-height:1;padding:0}.jam-bpm-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.jam-bpm-btn:active{transform:scale(.9)}.jam-bpm-val{font-family:var(--font-heading, var(--font-body));font-size:16px;font-weight:800;color:var(--color-text-primary);min-width:30px;text-align:center;letter-spacing:-.02em}.jam-bpm-label{font-size:8px;font-weight:700;color:var(--color-text-muted);opacity:.45;text-transform:uppercase;letter-spacing:.08em;margin-right:4px}.jam-play{width:36px;height:32px;border:none;border-radius:8px;background:var(--color-accent);color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0}.jam-play:hover{filter:brightness(1.12);transform:scale(1.05)}.jam-play:active{transform:scale(.96)}.jam-play.playing{background:#ffffff14;color:var(--color-text-primary);border:1px solid var(--color-border-muted)}.jam-chord-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.jam-chord{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px 8px;border:1.5px solid var(--color-border-muted);border-radius:10px;background:var(--color-bg-tertiary);transition:all .18s ease;cursor:pointer;position:relative}.jam-chord:hover{border-color:rgba(var(--color-accent-rgb, 255, 165, 0),.35);background:rgba(var(--color-accent-rgb, 255, 165, 0),.03)}.jam-chord.selected{border-color:var(--color-accent);background:rgba(var(--color-accent-rgb, 255, 165, 0),.07);box-shadow:0 0 16px rgba(var(--color-accent-rgb, 255, 165, 0),.12),inset 0 0 24px rgba(var(--color-accent-rgb, 255, 165, 0),.03)}.jam-chord.selected .jam-chord-name{color:var(--color-accent)}.jam-chord.active{border-color:var(--color-accent);background:rgba(var(--color-accent-rgb, 255, 165, 0),.07);box-shadow:0 0 16px rgba(var(--color-accent-rgb, 255, 165, 0),.12),inset 0 0 24px rgba(var(--color-accent-rgb, 255, 165, 0),.03)}.jam-chord-name{font-family:var(--font-heading, var(--font-body));font-size:22px;font-weight:800;color:var(--color-text-primary);line-height:1.1;transition:color .15s}.jam-chord.active .jam-chord-name{color:var(--color-accent)}.jam-chord-deg{font-size:9px;font-weight:600;color:var(--color-text-muted);opacity:.45;margin-top:1px}.jam-chord-dots{display:flex;gap:3px;margin-top:5px}.jam-dot{width:4px;height:4px;border-radius:50%;background:var(--color-border-muted);transition:all .1s}.jam-dot.on{background:var(--color-accent);box-shadow:0 0 5px rgba(var(--color-accent-rgb, 255, 165, 0),.6);transform:scale(1.4)}.jam-chord-swap{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:5px;border:none;background:#ffffff0f;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s;padding:0;z-index:5}.jam-chord:hover .jam-chord-swap,.jam-chord.selected .jam-chord-swap{opacity:.6}.jam-chord-swap:hover{opacity:1!important;background:rgba(var(--color-accent-rgb, 255, 165, 0),.15);color:var(--color-accent)}.jam-chord-swap-menu{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:4px;min-width:120px;background:var(--color-bg-card);border:1px solid var(--color-border-default);border-radius:10px;box-shadow:0 12px 40px #00000080,0 4px 12px #00000040;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:100;padding:4px;display:flex;flex-direction:column;gap:1px;animation:jamSwapIn .15s ease-out}@keyframes jamSwapIn{0%{opacity:0;transform:translate(-50%) translateY(-4px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.jam-swap-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border:none;border-radius:7px;background:transparent;color:var(--color-text-primary);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all .1s;white-space:nowrap}.jam-swap-option:hover{background:rgba(var(--color-accent-rgb, 255, 165, 0),.1);color:var(--color-accent)}.jam-swap-option.current{background:rgba(var(--color-accent-rgb, 255, 165, 0),.08);color:var(--color-accent)}.jam-swap-name{font-weight:700}.jam-swap-roman{font-size:10px;font-weight:600;color:var(--color-text-muted);opacity:.5}.jam-swap-option:hover .jam-swap-roman{color:var(--color-accent);opacity:.7}.jam-chord-tones{font-size:9px;font-weight:600;color:var(--color-text-muted);opacity:.5;letter-spacing:.08em;margin-top:3px}.jam-chord-diagram{width:70px;height:80px;margin-top:4px;flex-shrink:0}.jam-fb-section{display:flex;flex-direction:column;gap:5px}.jam-fb-head{display:flex;align-items:center;justify-content:space-between}.jam-fb-title{font-size:10px;font-weight:700;color:var(--color-text-muted);opacity:.55;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px}.jam-fb-badge{display:inline-flex;padding:1px 7px;border-radius:4px;background:rgba(var(--color-accent-rgb, 255, 165, 0),.1);color:var(--color-accent);font-size:9px;font-weight:800;letter-spacing:0;text-transform:none}.jam-fb-legend{display:flex;gap:8px}.jam-leg{display:flex;align-items:center;gap:3px;font-size:8px;font-weight:600;color:var(--color-text-muted);opacity:.55}.jam-leg-d{width:6px;height:6px;border-radius:50%;flex-shrink:0}.jam-leg-d.root{background:var(--color-accent)}.jam-leg-d.tone{background:#5bc0de}.jam-leg-d.scale{background:#ffffff1f;border:1px solid rgba(255,255,255,.18)}.jam-fb-wrap{border-radius:10px;background:#0000004d;border:1px solid var(--color-border-muted);padding:8px 6px 6px;overflow:hidden}.jam-fb{display:flex;flex-direction:column}.jam-fb-markers{display:flex;align-items:center;height:14px}.jam-fb-spacer{width:16px;flex-shrink:0}.jam-fb-marker{flex:1;text-align:center;font-size:8px;font-weight:700;color:transparent;line-height:12px}.jam-fb-marker.show{color:var(--color-text-muted);opacity:.35}.jam-fb-string{display:flex;align-items:center;height:34px;position:relative}.jam-fb-str-name{width:18px;flex-shrink:0;font-size:10px;font-weight:700;color:var(--color-text-muted);text-align:center;opacity:.35}.jam-fb-fret{flex:1;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.jam-fb-line{position:absolute;top:50%;left:0;right:0;height:1px;background:#ffffff0f}.jam-fb-wire{position:absolute;left:0;top:2px;bottom:2px;width:1px;background:#ffffff1a}.jam-fb-fret.nut:before{content:"";position:absolute;right:-1px;top:1px;bottom:1px;width:2px;background:#fff3;border-radius:1px}.jam-fb-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;position:relative;z-index:2;transition:all .18s;line-height:1}.jam-fb-dot.scale{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff6;font-size:8px}.jam-fb-dot.tone{background:#5bc0de2e;border:1.5px solid rgba(91,192,222,.45);color:#5bc0de}.jam-fb-dot.root{background:var(--color-accent);border:none;color:#000;font-weight:800;font-size:9.5px;box-shadow:0 0 8px rgba(var(--color-accent-rgb, 255, 165, 0),.35);transform:scale(1.1)}.header-jam-popup{position:absolute;top:calc(100% + 10px);right:-60px;width:560px;max-width:95vw;padding:14px;background:var(--color-bg-card);border:1px solid var(--color-border-default);border-radius:var(--radius-lg, 12px);box-shadow:0 20px 60px #00000073,0 4px 16px #0003,0 0 0 1px #ffffff08;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden;z-index:1001;animation:jamIn .18s ease-out}@keyframes jamIn{0%{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.header-jam-popup{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;max-width:100%;max-height:90vh;border-radius:16px 16px 0 0;padding:14px 12px 20px;overflow-y:auto;animation:jamSlideUp .22s ease-out}@keyframes jamSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.jam-controls{flex-wrap:wrap;gap:5px}.jam-spacer{display:none}.jam-chord-name{font-size:18px}.jam-fb-wrap{margin:0 -4px}}.jam-expand{width:32px;height:32px;border-radius:6px;border:1px solid var(--color-border-muted);background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;padding:0;margin-left:2px}.jam-expand:hover{border-color:var(--color-accent);color:var(--color-accent)}.jam-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:jamFadeIn .2s ease-out}@keyframes jamFadeIn{0%{opacity:0}to{opacity:1}}.jam-modal{width:95vw;max-width:1100px;max-height:92vh;padding:28px 32px;background:var(--color-bg-card);border:1px solid var(--color-border-default);border-radius:16px;box-shadow:0 30px 80px #0009,0 8px 24px #0000004d;overflow-y:auto;animation:jamModalIn .25s ease-out}@keyframes jamModalIn{0%{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}.jam-brand-text{font-family:Montserrat,Gotham,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;font-weight:800;letter-spacing:.3px;text-align:center;background:linear-gradient(90deg,#ff8c3c,#ff8c3c 40%,#fff 40%,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none}.jam-tool.expanded{gap:20px}.jam-tool.expanded .jam-controls{gap:10px}.jam-tool.expanded .jam-key-sel{padding:10px 14px;font-size:16px}.jam-tool.expanded .jam-scale-btn{padding:10px 20px;font-size:14px}.jam-tool.expanded .jam-bpm-val{font-size:26px;min-width:44px}.jam-tool.expanded .jam-bpm-btn{width:32px;height:32px;font-size:18px}.jam-tool.expanded .jam-bpm-label{font-size:10px}.jam-tool.expanded .jam-play{width:52px;height:44px;border-radius:12px}.jam-tool.expanded .jam-play svg{width:22px;height:22px}.jam-tool.expanded .jam-chord-strip{gap:10px}.jam-tool.expanded .jam-chord{padding:22px 14px 14px;border-radius:14px;min-height:120px}.jam-tool.expanded .jam-chord-name{font-size:34px}.jam-tool.expanded .jam-chord-deg{font-size:12px;margin-top:2px}.jam-tool.expanded .jam-chord-tones{font-size:12px;margin-top:5px;letter-spacing:.1em}.jam-tool.expanded .jam-chord-diagram{width:110px;height:120px;margin-top:8px}.jam-tool.expanded .jam-chord-swap{top:6px;right:6px;width:26px;height:26px;border-radius:7px}.jam-tool.expanded .jam-chord-swap svg{width:13px;height:13px}.jam-tool.expanded .jam-chord-swap-menu{min-width:140px}.jam-tool.expanded .jam-swap-option{padding:9px 14px;font-size:14px}.jam-tool.expanded .jam-chord-dots{gap:5px;margin-top:8px}.jam-tool.expanded .jam-dot{width:7px;height:7px}.jam-tool.expanded .jam-fb-title{font-size:12px}.jam-tool.expanded .jam-fb-badge{font-size:11px;padding:2px 8px}.jam-tool.expanded .jam-leg{font-size:10px;gap:4px}.jam-tool.expanded .jam-leg-d{width:8px;height:8px}.jam-tool.expanded .jam-fb-wrap{padding:12px 10px 10px;border-radius:12px}.jam-tool.expanded .jam-fb-string{height:48px}.jam-tool.expanded .jam-fb-str-name{width:26px;font-size:14px}.jam-tool.expanded .jam-fb-marker{font-size:10px}.jam-tool.expanded .jam-fb-dot{width:36px;height:36px;font-size:13px}.jam-tool.expanded .jam-fb-dot.scale{font-size:12px}.jam-tool.expanded .jam-fb-dot.root{font-size:14px;box-shadow:0 0 14px rgba(var(--color-accent-rgb, 255, 165, 0),.5)}@media(max-width:768px){.jam-overlay{align-items:flex-end}.jam-modal{width:100%;max-width:100%;max-height:94vh;padding:16px 14px 24px;border-radius:20px 20px 0 0;animation:jamSlideUpModal .28s ease-out}@keyframes jamSlideUpModal{0%{opacity:0;transform:translateY(60%)}to{opacity:1;transform:translateY(0)}}.jam-modal:before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:#ffffff26;margin:0 auto 12px;flex-shrink:0}.jam-tool.expanded{gap:14px}.jam-tool.expanded .jam-controls{flex-wrap:wrap;gap:8px;justify-content:center}.jam-tool.expanded .jam-key-sel{padding:8px 12px;font-size:14px}.jam-tool.expanded .jam-scale-btn{padding:8px 16px;font-size:13px}.jam-tool.expanded .jam-bpm-val{font-size:20px;min-width:36px}.jam-tool.expanded .jam-bpm-btn{width:28px;height:28px;font-size:16px}.jam-tool.expanded .jam-play{width:44px;height:38px;border-radius:10px}.jam-tool.expanded .jam-play svg{width:18px;height:18px}.jam-spacer{display:none}.jam-tool.expanded .jam-chord-strip{grid-template-columns:repeat(2,1fr);gap:8px}.jam-tool.expanded .jam-chord{padding:16px 10px 10px;border-radius:12px;min-height:auto}.jam-tool.expanded .jam-chord-name{font-size:24px}.jam-tool.expanded .jam-chord-deg{font-size:10px}.jam-tool.expanded .jam-chord-tones{font-size:10px;margin-top:3px}.jam-tool.expanded .jam-chord-diagram{width:80px;height:90px;margin-top:4px}.jam-tool.expanded .jam-chord-swap{top:5px;right:5px;width:24px;height:24px;opacity:.5}.jam-tool.expanded .jam-chord-dots{gap:4px;margin-top:6px}.jam-tool.expanded .jam-dot{width:5px;height:5px}.jam-tool.expanded .jam-chord-swap-menu{min-width:130px}.jam-tool.expanded .jam-fb-wrap{padding:8px 6px 6px;border-radius:10px;margin:0 -4px}.jam-tool.expanded .jam-fb-string{height:34px}.jam-tool.expanded .jam-fb-str-name{width:18px;font-size:10px}.jam-tool.expanded .jam-fb-marker{font-size:8px}.jam-tool.expanded .jam-fb-dot{width:24px;height:24px;font-size:9px}.jam-tool.expanded .jam-fb-dot.scale{font-size:8px}.jam-tool.expanded .jam-fb-dot.root{font-size:10px;box-shadow:0 0 8px rgba(var(--color-accent-rgb, 255, 165, 0),.4)}.jam-tool.expanded .jam-fb-head{flex-wrap:wrap;gap:4px}.jam-tool.expanded .jam-fb-title{font-size:10px}.jam-tool.expanded .jam-fb-badge{font-size:9px;padding:1px 6px}.jam-tool.expanded .jam-leg{font-size:8px;gap:3px}.jam-tool.expanded .jam-leg-d{width:6px;height:6px}}@media(max-width:480px){.jam-modal{max-height:96vh;padding:12px 10px 20px}.jam-tool.expanded{gap:10px}.jam-tool.expanded .jam-controls{gap:6px}.jam-tool.expanded .jam-key-sel{padding:7px 10px;font-size:13px}.jam-tool.expanded .jam-scale-btn{padding:7px 12px;font-size:12px}.jam-tool.expanded .jam-bpm-val{font-size:18px;min-width:32px}.jam-tool.expanded .jam-bpm-btn{width:26px;height:26px;font-size:15px}.jam-tool.expanded .jam-play{width:40px;height:36px}.jam-tool.expanded .jam-chord-strip{gap:6px}.jam-tool.expanded .jam-chord{padding:14px 8px 8px;border-radius:10px}.jam-tool.expanded .jam-chord-name{font-size:20px}.jam-tool.expanded .jam-chord-diagram{width:68px;height:78px}.jam-tool.expanded .jam-fb-string{height:28px}.jam-tool.expanded .jam-fb-dot{width:20px;height:20px;font-size:8px}.jam-tool.expanded .jam-fb-dot.scale{font-size:7px}.jam-tool.expanded .jam-fb-dot.root{font-size:8px;box-shadow:0 0 6px rgba(var(--color-accent-rgb, 255, 165, 0),.35)}.jam-tool.expanded .jam-fb-str-name{width:14px;font-size:8px}.jam-tool.expanded .jam-fb-spacer{width:14px}}.jam-page{position:relative;background:var(--color-bg)}.jam-page:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 80% 50% at 20% 0%,var(--color-accent-soft) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 100%,var(--color-glow-subtle) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 50% 50%,var(--color-glow) 0%,transparent 40%);pointer-events:none;z-index:0;animation:jamBgPulse 15s ease-in-out infinite}@keyframes jamBgPulse{0%,to{opacity:.8}50%{opacity:.5}}.jam-page-container{--header-h: 85px;position:relative;z-index:1;width:100%;max-width:1400px;margin:0 auto;padding:24px 48px;height:calc(100vh - var(--header-h));max-height:calc(100vh - var(--header-h));overflow-y:auto;overflow-x:hidden;box-sizing:border-box}@media(max-width:1023px){.jam-page-container{--header-h: 65px}}body:has(.jam-page-container){overflow:hidden}html:has(.jam-page-container){overflow:hidden}.jam-page-container .jam-brand-text{display:none}.jam-page-container .jam-controls{gap:14px;padding:16px 24px;background:#ffffff05;border:1px solid var(--color-border-muted);border-radius:14px}.jam-page-container .jam-key-sel{padding:12px 18px;font-size:17px;border-radius:10px}.jam-page-container .jam-scale-btn{padding:12px 24px;font-size:15px}.jam-page-container .jam-shuffle{width:44px;height:44px;border-radius:10px}.jam-page-container .jam-shuffle svg{width:18px;height:18px}.jam-page-container .jam-bpm-val{font-size:32px;min-width:52px}.jam-page-container .jam-bpm-btn{width:36px;height:36px;font-size:20px}.jam-page-container .jam-bpm-label{font-size:11px}.jam-page-container .jam-play{width:60px;height:48px;border-radius:12px}.jam-page-container .jam-play svg{width:24px;height:24px}.jam-page-container .jam-chord-strip{gap:16px}.jam-page-container .jam-chord{padding:28px 18px 18px;border-radius:16px;min-height:140px;background:#ffffff04}.jam-page-container .jam-chord-name{font-size:40px}.jam-page-container .jam-chord-deg{font-size:13px;margin-top:4px}.jam-page-container .jam-chord-tones{font-size:13px;margin-top:6px;letter-spacing:.12em}.jam-page-container .jam-chord-diagram{width:120px;height:130px;margin-top:10px}.jam-page-container .jam-chord-swap{top:8px;right:8px;width:30px;height:30px;border-radius:8px;opacity:.5}.jam-page-container .jam-chord-swap svg{width:14px;height:14px}.jam-page-container .jam-chord-dots{gap:6px;margin-top:10px}.jam-page-container .jam-dot{width:8px;height:8px}.jam-page-container .jam-fb-section{gap:8px}.jam-page-container .jam-fb-title{font-size:13px}.jam-page-container .jam-fb-badge{font-size:12px;padding:3px 10px;border-radius:6px}.jam-page-container .jam-leg{font-size:11px;gap:5px}.jam-page-container .jam-leg-d{width:9px;height:9px}.jam-page-container .jam-fb-wrap{padding:16px 14px 12px;border-radius:16px}.jam-page-container .jam-fb-string{height:52px}.jam-page-container .jam-fb-str-name{width:28px;font-size:15px}.jam-page-container .jam-fb-spacer{width:28px}.jam-page-container .jam-fb-marker{font-size:11px}.jam-page-container .jam-fb-dot{width:40px;height:40px;font-size:14px}.jam-page-container .jam-fb-dot.scale{font-size:13px}.jam-page-container .jam-fb-dot.root{font-size:15px;box-shadow:0 0 16px rgba(var(--color-accent-rgb, 255, 165, 0),.5)}@media(max-width:768px){.jam-page-container{padding:12px 12px 16px}.jam-page-container .jam-controls{padding:12px 14px;flex-wrap:wrap;gap:8px}.jam-page-container .jam-spacer{display:none}.jam-page-container .jam-chord-strip{grid-template-columns:repeat(2,1fr);gap:10px}.jam-page-container .jam-chord{padding:18px 10px 12px;min-height:auto}.jam-page-container .jam-chord-name{font-size:26px}.jam-page-container .jam-chord-diagram{width:85px;height:95px}.jam-page-container .jam-fb-string{height:38px}.jam-page-container .jam-fb-dot{width:28px;height:28px;font-size:10px}.jam-page-container .jam-fb-dot.root{font-size:11px;box-shadow:0 0 8px rgba(var(--color-accent-rgb, 255, 165, 0),.4)}.jam-page-container .jam-fb-str-name{width:18px;font-size:10px}.jam-page-container .jam-fb-spacer{width:18px}}:root{--ft-accent: #FF6E00;--ft-accent-hover: #ff8522;--ft-accent-dim: rgba(255, 110, 0, .1);--ft-accent-glow: rgba(255, 110, 0, .25);--ft-bg: #090B0F;--ft-glass-bg: rgba(255, 255, 255, .02);--ft-glass-bg-hover: rgba(255, 255, 255, .04);--ft-glass-border: rgba(255, 255, 255, .06);--ft-glass-border-hi: rgba(255, 255, 255, .12);--ft-text: #F3F4F6;--ft-text-sub: rgba(243, 244, 246, .6);--ft-text-faint: rgba(243, 244, 246, .3);--ft-green: #10B981;--ft-red: #EF4444;--ft-radius-sm: 12px;--ft-radius-md: 20px;--ft-radius-lg: 32px;--ft-radius-pill: 999px;--ft-ease-spring: cubic-bezier(.175, .885, .32, 1.1);--ft-ease-smooth: cubic-bezier(.16, 1, .3, 1)}@keyframes ft-fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes ft-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ft-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes ft-shimmer{0%{transform:translate(-150%) skew(-15deg)}to{transform:translate(250%) skew(-15deg)}}@keyframes ft-pop{0%{transform:scale(1)}40%{transform:scale(1.15);color:var(--ft-green);text-shadow:0 0 20px rgba(16,185,129,.4)}to{transform:scale(1)}}@keyframes ft-shake{0%,to{transform:translate(0)}25%{transform:translate(-6px);color:var(--ft-red);text-shadow:0 0 20px rgba(239,68,68,.4)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}@keyframes ft-flash-green{0%{background:radial-gradient(circle at center,rgba(16,185,129,.15) 0%,transparent 70%);opacity:0}15%{opacity:1}to{opacity:0}}@keyframes ft-flash-red{0%{background:radial-gradient(circle at center,rgba(239,68,68,.15) 0%,transparent 70%);opacity:0}15%{opacity:1}to{opacity:0}}@keyframes ft-pulse-warning{0%,to{opacity:1;color:var(--ft-red);text-shadow:0 0 15px rgba(239,68,68,.3)}50%{opacity:.6;color:var(--ft-red)}}@keyframes ft-orb-drift-1{0%,to{transform:translate(0) scale(1);opacity:.4}50%{transform:translate(-30px,40px) scale(1.05);opacity:.6}}@keyframes ft-orb-drift-2{0%,to{transform:translate(0) scale(1);opacity:.3}50%{transform:translate(40px,-20px) scale(1.1);opacity:.4}}@keyframes ft-conic-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ft-text-shine{0%{background-position:200% center}to{background-position:-200% center}}.fretboard-trainer-page{position:fixed;top:0;right:0;bottom:0;left:0;padding-top:100px;background:var(--ft-bg);display:flex;flex-direction:column;overflow-y:auto;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;z-index:1}.trainer-atmosphere{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.trainer-atmosphere:before{content:"";position:absolute;top:-10%;left:20%;width:600px;height:600px;background:radial-gradient(circle,rgba(255,110,0,.04) 0%,transparent 60%);border-radius:50%;filter:blur(60px);animation:ft-orb-drift-1 14s ease-in-out infinite}.trainer-atmosphere:after{content:"";position:absolute;bottom:-20%;right:15%;width:700px;height:700px;background:radial-gradient(circle,rgba(16,185,129,.02) 0%,transparent 60%);border-radius:50%;filter:blur(80px);animation:ft-orb-drift-2 18s ease-in-out infinite 2s}.trainer-phase{display:flex;flex-direction:column;position:relative;z-index:1;animation:ft-fade-in-up .6s var(--ft-ease-smooth) both;width:100%}.trainer-page-header{text-align:center;padding:10px 24px 0;max-width:680px;margin:0 auto;width:100%;position:relative;z-index:2;animation:ft-fade-in-up .6s var(--ft-ease-smooth) .05s both}.trainer-page-eyebrow{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--ft-accent);margin-bottom:12px;padding:6px 14px;border-radius:var(--ft-radius-pill);background:#ff6e0014;border:1px solid rgba(255,110,0,.2);box-shadow:0 4px 12px #ff6e000d}.trainer-page-title{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;color:var(--ft-text);margin-bottom:8px;line-height:1.1}.trainer-page-title span{background:linear-gradient(90deg,#fff,#ff6e0066,#fff 50%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ft-text-shine 8s linear infinite}.trainer-page-subtitle{font-size:.9rem;color:var(--ft-text-sub);line-height:1.5;max-width:440px;margin:0 auto}.trainer-setup{position:relative;z-index:2;max-width:640px;width:100%;margin:0 auto;padding:12px 20px 24px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}.trainer-setup::-webkit-scrollbar{display:none}.trainer-section{background:var(--ft-glass-bg);border:1px solid var(--ft-glass-border);border-radius:var(--ft-radius-md);padding:16px 20px;box-shadow:0 4px 24px #0003;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:border-color .3s var(--ft-ease-smooth),background .3s var(--ft-ease-smooth),box-shadow .3s var(--ft-ease-smooth);animation:ft-fade-in-up .6s var(--ft-ease-smooth) both}.trainer-section:nth-child(1){animation-delay:.1s}.trainer-section:nth-child(2){animation-delay:.15s}.trainer-section:nth-child(3){animation-delay:.2s}.trainer-section:hover{border-color:var(--ft-glass-border-hi);background:var(--ft-glass-bg-hover)}.trainer-section-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;color:var(--ft-text-sub);margin-bottom:12px;display:flex;align-items:center;gap:8px;text-transform:uppercase}.trainer-section-label:before{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--ft-text-faint)}.trainer-mode-toggle{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.trainer-mode-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;background:#ffffff04;border:1px solid var(--ft-glass-border);border-radius:var(--ft-radius-sm);cursor:pointer;transition:all .3s var(--ft-ease-smooth);color:var(--ft-text-sub)}.trainer-mode-card:hover{border-color:#ffffff26;color:var(--ft-text);transform:translateY(-4px);box-shadow:0 12px 24px #0000004d,inset 0 1px 1px #ffffff0d;background:#ffffff08}.trainer-mode-card.active{border-color:var(--ft-accent);background:linear-gradient(180deg,var(--ft-accent-dim) 0%,rgba(255,110,0,.02) 100%);color:var(--ft-text);box-shadow:0 0 0 1px var(--ft-accent),0 12px 32px #ff6e0026,inset 0 1px #ff6e0066;transform:translateY(-2px)}.trainer-mode-icon{font-size:1.6rem;transition:transform .3s var(--ft-ease-smooth)}.trainer-mode-card:hover .trainer-mode-icon,.trainer-mode-card.active .trainer-mode-icon{transform:scale(1.1)}.trainer-mode-label{font-size:.85rem;font-weight:600}.trainer-mode-desc{font-size:.7rem;color:var(--ft-text-faint);text-align:center;line-height:1.3}.trainer-mode-card.active .trainer-mode-desc{color:#fff9}.trainer-root-pills{display:flex;flex-wrap:wrap;gap:8px}.trainer-root-pill{flex:1 1 calc(16.666% - 8px);min-width:40px;padding:10px 0;border-radius:10px;border:1px solid var(--ft-glass-border);background:#ffffff05;color:var(--ft-text-sub);font-size:.85rem;font-weight:600;cursor:pointer;text-align:center;transition:all .2s var(--ft-ease-smooth)}.trainer-root-pill:hover:not(.locked){border-color:#ffffff40;color:var(--ft-text);background:#ffffff14;transform:translateY(-3px);box-shadow:0 6px 16px #0003}.trainer-root-pill.active{background:linear-gradient(135deg,var(--ft-accent) 0%,#D95D00 100%);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 6px 20px #ff6e0066,inset 0 1px 1px #fff6;transform:translateY(-2px)}.trainer-root-pill.locked{opacity:.25;cursor:not-allowed;background:transparent}.trainer-scale-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.trainer-scale-card{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;border:1px solid var(--ft-glass-border);background:#ffffff04;color:var(--ft-text-sub);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s var(--ft-ease-smooth)}.trainer-scale-card:hover:not(.locked){border-color:#ffffff40;background:#ffffff0f;color:var(--ft-text);transform:translate(4px);box-shadow:-4px 4px 12px #0000001a}.trainer-scale-card.active{background:linear-gradient(90deg,var(--ft-accent-dim) 0%,transparent 100%);border-color:#ff6e0080;color:var(--ft-text);font-weight:600;box-shadow:inset 3px 0 0 var(--ft-accent),0 4px 16px #ff6e001a;transform:translate(4px)}.trainer-scale-card.locked .trainer-scale-name{opacity:.5}.trainer-scale-lock{font-size:.75rem;opacity:.5}.trainer-scale-info-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;background:#ffffff08;border-radius:var(--ft-radius-sm);border:1px solid var(--ft-glass-border);animation:ft-fade-in-up .6s var(--ft-ease-smooth) .25s both}.trainer-scale-info-name{font-size:.9rem;font-weight:600;color:var(--ft-text);margin-bottom:4px}.trainer-scale-info-notes{font-size:.75rem;font-weight:500;color:var(--ft-accent);letter-spacing:.5px}.trainer-duration-pills{display:flex;gap:8px}.trainer-duration-pill{flex:1;padding:10px 0;border-radius:10px;border:1px solid var(--ft-glass-border);background:#ffffff05;color:var(--ft-text-sub);font-size:.85rem;font-weight:600;cursor:pointer;text-align:center;transition:all .2s var(--ft-ease-smooth)}.trainer-duration-pill:hover{border-color:#ffffff40;color:var(--ft-text);background:#ffffff14;transform:translateY(-3px);box-shadow:0 6px 16px #0003}.trainer-duration-pill.active{background:linear-gradient(135deg,var(--ft-accent) 0%,#D95D00 100%);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 6px 20px #ff6e0066,inset 0 1px 1px #fff6;transform:translateY(-2px)}.trainer-constraint-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 20px;border-radius:var(--ft-radius-pill);background:#ff6e001a;border:1px solid rgba(255,110,0,.3);color:var(--ft-accent);font-size:.85rem;font-weight:600;letter-spacing:.02em;animation:ft-fade-in-up .3s var(--ft-ease-smooth)}.trainer-difficulty-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.trainer-start-btn{width:100%;padding:18px;border-radius:var(--ft-radius-pill);border:none;background:linear-gradient(135deg,var(--ft-accent) 0%,#D95D00 100%);color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer;position:relative;overflow:hidden;transition:all .3s var(--ft-ease-spring);box-shadow:0 4px 14px #ff6e0033,inset 0 1px 1px #ffffff4d;animation:ft-fade-in-up .6s var(--ft-ease-smooth) .3s both}.trainer-start-btn:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:ft-shimmer 3s infinite}.trainer-start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ff6e0059,inset 0 1px 1px #fff6}.trainer-start-btn:active{transform:translateY(1px)}.trainer-lock-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:ft-fade-in .2s ease}.trainer-lock-card{background:#0f1219f2;border:1px solid rgba(255,255,255,.1);border-radius:var(--ft-radius-lg);padding:40px 32px;max-width:360px;width:calc(100% - 32px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 24px 64px #00000080;animation:ft-fade-in-up .3s var(--ft-ease-spring)}.trainer-lock-icon{font-size:2.5rem;margin-bottom:-4px}.trainer-lock-title{font-size:1.25rem;font-weight:700;color:var(--ft-text)}.trainer-lock-desc{font-size:.85rem;color:var(--ft-text-sub);line-height:1.5}.trainer-lock-btn{width:100%;padding:14px;border-radius:var(--ft-radius-pill);border:none;background:var(--ft-accent);color:#fff;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s}.trainer-lock-btn:hover{background:var(--ft-accent-hover)}.trainer-lock-dismiss{width:100%;padding:12px;border-radius:var(--ft-radius-pill);border:1px solid var(--ft-glass-border);background:transparent;color:var(--ft-text-sub);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.trainer-lock-dismiss:hover{background:#ffffff0d;color:var(--ft-text)}.trainer-game{max-width:760px;width:100%;margin:0 auto;padding:16px 20px 48px;display:flex;flex-direction:column;gap:16px;z-index:1}.trainer-flash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.trainer-flash-overlay.flash-correct{animation:ft-flash-green .5s ease-out forwards}.trainer-flash-overlay.flash-wrong{animation:ft-flash-red .5s ease-out forwards}.trainer-hud{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--ft-glass-bg);border:1px solid var(--ft-glass-border);border-radius:var(--ft-radius-md);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:2}.trainer-hud-left{display:flex;align-items:center;gap:16px}.trainer-timer{font-size:1.35rem;font-weight:700;color:var(--ft-text);font-variant-numeric:tabular-nums;letter-spacing:-.5px;min-width:52px}.trainer-timer.warning{animation:ft-pulse-warning 1s infinite}.trainer-scale-badge{font-size:.75rem;font-weight:500;color:var(--ft-text-sub);display:flex;align-items:center;gap:6px}.trainer-scale-badge:before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--ft-accent)}.trainer-hint-toggle{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;transition:all .2s ease}.trainer-hint-toggle:hover{background:#ffffff1a;border-color:#fff3}.trainer-hint-toggle.active{background:#ff980026;border-color:#ff9800;box-shadow:0 0 10px #ff98004d}.trainer-quit-btn{padding:6px 14px;border-radius:var(--ft-radius-pill);border:1px solid var(--ft-glass-border);background:transparent;color:var(--ft-text-faint);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}.trainer-quit-btn:hover{border-color:#ef444466;color:var(--ft-red);background:#ef44440d}.trainer-streak-section{display:flex;justify-content:center;align-items:center;gap:40px;z-index:2}.trainer-streak-item{text-align:center;min-width:60px}.trainer-streak-value{font-size:3rem;font-weight:800;line-height:1;color:var(--ft-text);font-variant-numeric:tabular-nums;display:inline-block;transition:color .15s}.trainer-streak-value.correct{animation:ft-pop .4s var(--ft-ease-spring)}.trainer-streak-value.wrong{animation:ft-shake .4s ease}.trainer-streak-label{font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--ft-text-faint);text-transform:uppercase;margin-top:6px}.trainer-streak-divider{width:1px;height:40px;background:var(--ft-glass-border-hi)}.trainer-target{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2;margin:20px 0}.trainer-target-instruction{font-size:.8rem;color:var(--ft-text-sub);margin-bottom:8px;font-weight:500}.trainer-target-note-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.trainer-target-note-wrapper:before{content:"";position:absolute;width:200px;height:200px;background:conic-gradient(from 0deg,transparent,rgba(255,110,0,.15),rgba(0,242,255,.1),transparent 60%);border-radius:50%;filter:blur(20px);z-index:-1;animation:ft-conic-spin 8s linear infinite;opacity:.8}.trainer-target-note{font-size:5rem;font-weight:800;line-height:1;color:var(--ft-text);letter-spacing:-.05em;text-shadow:0 4px 20px rgba(0,0,0,.5)}.trainer-listening{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;background:var(--ft-glass-bg);border:1px solid var(--ft-glass-border);border-radius:var(--ft-radius-md);margin:0 20px;z-index:2}.trainer-listening-text{font-size:.85rem;color:var(--ft-text-sub);font-weight:500}.trainer-detected-note{font-size:2.2rem;font-weight:700;color:var(--ft-accent);min-height:2.6rem}.trainer-fretboard-container{width:100%;display:flex;align-items:center;justify-content:center;z-index:2;padding:0 10px}.trainer-fretboard{max-width:100%;border-radius:var(--ft-radius-sm);overflow:hidden}.trainer-game--full-range{max-width:95vw;max-width:min(95vw,1200px)}@media(max-width:640px){.trainer-game--full-range .trainer-fretboard-container{overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;scrollbar-width:none}.trainer-game--full-range .trainer-fretboard-container::-webkit-scrollbar{display:none}.trainer-game--full-range .trainer-fretboard{min-width:700px}}.trainer-stats-bar{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--ft-glass-bg);border:1px solid var(--ft-glass-border);border-radius:var(--ft-radius-md);padding:12px;margin-top:16px;z-index:2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.trainer-stat-block{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}.trainer-stat-block:not(:last-child):after{content:"";position:absolute;right:0;top:10%;height:80%;width:1px;background:var(--ft-glass-border-hi)}.trainer-stat-v{font-size:1.1rem;font-weight:700;color:var(--ft-text);font-variant-numeric:tabular-nums}.trainer-stat-l{font-size:.55rem;font-weight:600;letter-spacing:.05em;color:var(--ft-text-faint);text-transform:uppercase}.trainer-results{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#000000b3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:20px;animation:ft-fade-in .3s ease}.trainer-results-card{background:#0e1015d9;border:1px solid rgba(255,255,255,.08);border-radius:var(--ft-radius-lg);padding:32px;max-width:400px;width:100%;text-align:center;box-shadow:0 24px 80px #0009,inset 0 1px #ffffff0d;display:flex;flex-direction:column;align-items:center;gap:24px}.trainer-results-emoji{font-size:3.5rem;animation:ft-fade-in-up .5s var(--ft-ease-spring) .1s both}.trainer-results-title{font-size:1.6rem;font-weight:800;color:var(--ft-text);animation:ft-fade-in-up .5s var(--ft-ease-spring) .2s both}.trainer-accuracy-gauge{width:100px;height:100px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;animation:ft-fade-in-up .5s var(--ft-ease-spring) .3s both}.trainer-accuracy-gauge-bg{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(var(--ft-accent) var(--gauge-angle),var(--ft-glass-bg) 0deg);mask:radial-gradient(circle,transparent 55%,black 56%);-webkit-mask:radial-gradient(circle,transparent 55%,black 56%);transition:--gauge-angle 1s var(--ft-ease-smooth)}.trainer-accuracy-gauge-content{display:flex;flex-direction:column;align-items:center}.trainer-accuracy-gauge-v{font-size:1.4rem;font-weight:800;color:var(--ft-text);line-height:1}.trainer-accuracy-gauge-l{font-size:.5rem;font-weight:600;color:var(--ft-text-faint);margin-top:4px}.trainer-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;animation:ft-fade-in-up .5s var(--ft-ease-spring) .4s both}.trainer-results-cell{background:var(--ft-glass-bg);border:1px solid var(--ft-glass-border);border-radius:var(--ft-radius-sm);padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:4px}.trainer-results-cell.highlight{background:#ff6e000d;border-color:#ff6e0033}.trainer-results-cell.highlight .trainer-results-cell-v{color:var(--ft-accent)}.trainer-results-cell-v{font-size:1.1rem;font-weight:700;color:var(--ft-text)}.trainer-results-cell-l{font-size:.55rem;color:var(--ft-text-faint);text-transform:uppercase}.trainer-results-actions{width:100%;display:flex;flex-direction:column;gap:10px;animation:ft-fade-in-up .5s var(--ft-ease-spring) .5s both}.trainer-play-again-btn{width:100%;padding:14px;border-radius:var(--ft-radius-pill);background:var(--ft-accent);color:#fff;font-weight:600;font-size:.95rem;border:none;cursor:pointer;transition:all .2s}.trainer-play-again-btn:hover{background:var(--ft-accent-hover);transform:translateY(-1px)}.trainer-exit-btn{width:100%;padding:12px;border-radius:var(--ft-radius-pill);background:transparent;color:var(--ft-text-sub);font-weight:500;font-size:.85rem;border:1px solid var(--ft-glass-border);cursor:pointer;transition:all .2s}.trainer-exit-btn:hover{color:var(--ft-text);border-color:var(--ft-glass-border-hi)}.trainer-fretboard .fretboard__note--hint:before{background:#ffffff0d!important;border:1px solid rgba(255,255,255,.2)!important;box-shadow:none!important;animation:none!important}.trainer-fretboard .fretboard__note--hint .fretboard__note-name{color:#ffffff80!important;font-weight:500!important}.trainer-fretboard .fretboard__note--highlighted:before{background:#ff6e0026!important;border:1px solid var(--ft-accent)!important;box-shadow:0 0 12px #ff6e004d!important;animation:none!important;transform:translate(-50%,-50%) scale(1.05)!important}.trainer-fretboard .fretboard__note--highlighted .fretboard__note-name{color:#fff!important;font-weight:700!important}.trainer-fretboard .fretboard__note--target:before{box-shadow:0 0 16px #00f2ff66!important}@media(max-width:640px){.fretboard-trainer-page{padding-top:80px}.trainer-page-header{padding:10px 16px 0}.trainer-page-title{font-size:1.8rem}.trainer-setup{padding:12px 16px}.trainer-root-pill{flex:1 1 calc(25% - 8px)}.trainer-scale-grid{grid-template-columns:1fr}.trainer-game{padding:12px 16px;gap:12px;margin:0 auto}.trainer-target{margin:12px 0}.trainer-target-note{font-size:3.5rem}.trainer-streak-value{font-size:2.2rem}.trainer-streak-section{gap:24px}.trainer-results-card{padding:24px 20px}.trainer-results-grid{gap:8px}.trainer-results-cell{padding:10px 0}.trainer-results-cell-v{font-size:1rem}}@media(max-width:900px)and (orientation:landscape){.fretboard-trainer-page{padding-top:10px;overflow-y:auto}.trainer-atmosphere{display:none}.trainer-game{margin:0 auto;gap:8px;padding-bottom:24px;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}.trainer-hud{width:100%;order:-1;padding:8px 12px}.trainer-streak-section{order:1;flex:1;min-width:200px}.trainer-target{order:2;flex:1;margin:0;min-height:80px;min-width:150px}.trainer-fretboard-container{order:3;width:100%}.trainer-stats-bar{order:4;width:100%;margin-top:8px;padding:8px}.trainer-target-note{font-size:3rem}.trainer-streak-value{font-size:2rem}.trainer-target-note-wrapper:before{width:80px;height:80px}}.trainer-seo-section{display:none}@keyframes ear-pulse-glow{0%,to{box-shadow:0 0 20px #ff6e001a}50%{box-shadow:0 0 30px #ff6e004d}}@keyframes ear-sound-wave{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}.ear-trainer-page{position:fixed;top:0;right:0;bottom:0;left:0;padding-top:100px;background:var(--ft-bg, #090B0F);display:flex;flex-direction:column;overflow-y:auto;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;z-index:1}.ear-phase{display:flex;flex-direction:column;position:relative;z-index:1;animation:ft-fade-in-up .6s var(--ft-ease-smooth, cubic-bezier(.16, 1, .3, 1)) both;width:100%}.ear-page-header{text-align:center;padding:10px 24px 0;max-width:680px;margin:0 auto;width:100%;position:relative;z-index:2;animation:ft-fade-in-up .6s var(--ft-ease-smooth) .05s both}.ear-page-eyebrow{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--ft-accent, #FF6E00);margin-bottom:12px;padding:6px 14px;border-radius:999px;background:#ff6e0014;border:1px solid rgba(255,110,0,.2);box-shadow:0 4px 12px #ff6e000d}.ear-page-title{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;color:var(--ft-text, #F3F4F6);margin-bottom:8px;line-height:1.1}.ear-page-title span{background:linear-gradient(90deg,#fff,#ff6e0066,#fff 50%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ft-text-shine 8s linear infinite}.ear-page-subtitle{font-size:.9rem;color:var(--ft-text-sub, rgba(243, 244, 246, .6));line-height:1.5;max-width:440px;margin:0 auto}.ear-setup{position:relative;z-index:2;max-width:640px;width:100%;margin:0 auto;padding:12px 20px 24px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}.ear-setup::-webkit-scrollbar{display:none}.ear-section{background:var(--ft-glass-bg, rgba(255, 255, 255, .02));border:1px solid var(--ft-glass-border, rgba(255, 255, 255, .06));border-radius:20px;padding:16px 20px;box-shadow:0 4px 24px #0003;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:border-color .3s,background .3s,box-shadow .3s;animation:ft-fade-in-up .6s var(--ft-ease-smooth) both}.ear-section:nth-child(1){animation-delay:.1s}.ear-section:nth-child(2){animation-delay:.15s}.ear-section:nth-child(3){animation-delay:.2s}.ear-section:nth-child(4){animation-delay:.25s}.ear-section:nth-child(5){animation-delay:.3s}.ear-section:hover{border-color:#ffffff1f;background:#ffffff0a}.ear-section-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;color:var(--ft-text-sub);margin-bottom:12px;display:flex;align-items:center;gap:8px;text-transform:uppercase}.ear-section-label:before{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--ft-text-faint, rgba(243, 244, 246, .3))}.ear-mode-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ear-mode-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;background:#ffffff04;border:1px solid var(--ft-glass-border);border-radius:12px;cursor:pointer;transition:all .3s;color:var(--ft-text-sub)}.ear-mode-card:hover{border-color:#ffffff26;color:var(--ft-text);transform:translateY(-4px);box-shadow:0 12px 24px #0000004d,inset 0 1px 1px #ffffff0d;background:#ffffff08}.ear-mode-card.active{border-color:var(--ft-accent);background:linear-gradient(180deg,#ff6e001a,#ff6e0005);color:var(--ft-text);box-shadow:0 0 0 1px var(--ft-accent),0 12px 32px #ff6e0026,inset 0 1px #ff6e0066;transform:translateY(-2px)}.ear-mode-icon{font-size:1.6rem;transition:transform .3s}.ear-mode-card:hover .ear-mode-icon,.ear-mode-card.active .ear-mode-icon{transform:scale(1.1)}.ear-mode-label{font-size:.85rem;font-weight:600}.ear-mode-desc{font-size:.7rem;color:var(--ft-text-faint);text-align:center;line-height:1.3}.ear-mode-card.active .ear-mode-desc{color:#fff9}.ear-root-pills{display:flex;flex-wrap:wrap;gap:8px}.ear-root-pill{flex:1 1 calc(16.666% - 8px);min-width:40px;padding:10px 0;border-radius:10px;border:1px solid var(--ft-glass-border);background:#ffffff05;color:var(--ft-text-sub);font-size:.85rem;font-weight:600;cursor:pointer;text-align:center;transition:all .2s}.ear-root-pill:hover:not(.locked){border-color:#ffffff40;color:var(--ft-text);background:#ffffff14;transform:translateY(-3px);box-shadow:0 6px 16px #0003}.ear-root-pill.active{background:linear-gradient(135deg,var(--ft-accent) 0%,#D95D00 100%);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 6px 20px #ff6e0066,inset 0 1px 1px #fff6;transform:translateY(-2px)}.ear-root-pill.locked{opacity:.25;cursor:not-allowed;background:transparent}.ear-difficulty-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ear-duration-pills{display:flex;gap:8px}.ear-duration-pill{flex:1;padding:10px 0;border-radius:10px;border:1px solid var(--ft-glass-border);background:#ffffff05;color:var(--ft-text-sub);font-size:.85rem;font-weight:600;cursor:pointer;text-align:center;transition:all .2s}.ear-duration-pill:hover{border-color:#ffffff40;color:var(--ft-text);background:#ffffff14;transform:translateY(-3px);box-shadow:0 6px 16px #0003}.ear-duration-pill.active{background:linear-gradient(135deg,var(--ft-accent) 0%,#D95D00 100%);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 6px 20px #ff6e0066,inset 0 1px 1px #fff6;transform:translateY(-2px)}.ear-start-btn{width:100%;padding:18px;border-radius:999px;border:none;background:linear-gradient(135deg,var(--ft-accent) 0%,#D95D00 100%);color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer;position:relative;overflow:hidden;transition:all .3s;box-shadow:0 4px 14px #ff6e0033,inset 0 1px 1px #ffffff4d;animation:ft-fade-in-up .6s var(--ft-ease-smooth) .35s both}.ear-start-btn:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:ft-shimmer 3s infinite}.ear-start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ff6e0059}.ear-lock-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:ft-fade-in .2s ease}.ear-lock-card{background:#0f1219f2;border:1px solid rgba(255,255,255,.1);border-radius:32px;padding:40px 32px;max-width:360px;width:calc(100% - 32px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 24px 64px #00000080;animation:ft-fade-in-up .3s var(--ft-ease-spring)}.ear-lock-icon{font-size:2.5rem;margin-bottom:-4px}.ear-lock-title{font-size:1.25rem;font-weight:700;color:var(--ft-text)}.ear-lock-desc{font-size:.85rem;color:var(--ft-text-sub);line-height:1.5}.ear-lock-btn{width:100%;padding:14px;border-radius:999px;border:none;background:var(--ft-accent);color:#fff;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s}.ear-lock-btn:hover{background:var(--ft-accent-hover, #ff8522)}.ear-lock-dismiss{width:100%;padding:12px;border-radius:999px;border:1px solid var(--ft-glass-border);background:transparent;color:var(--ft-text-sub);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.ear-lock-dismiss:hover{background:#ffffff0d;color:var(--ft-text)}.ear-game{max-width:760px;width:100%;margin:0 auto;padding:16px 20px 48px;display:flex;flex-direction:column;gap:16px;z-index:1}.ear-flash-overlay{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.ear-flash-overlay.flash-correct{animation:ft-flash-green .5s ease-out forwards}.ear-flash-overlay.flash-wrong{animation:ft-flash-red .5s ease-out forwards}.ear-hud{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--ft-glass-bg);border:1px solid var(--ft-glass-border);border-radius:20px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:2}.ear-hud-left{display:flex;align-items:center;gap:12px}.ear-timer{font-size:1.35rem;font-weight:700;color:var(--ft-text);font-variant-numeric:tabular-nums;letter-spacing:-.5px;min-width:52px}.ear-timer.warning{animation:ft-pulse-warning 1s infinite}.ear-badge{font-size:.75rem;font-weight:500;color:var(--ft-text-sub);display:flex;align-items:center;gap:6px}.ear-badge:before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--ft-accent)}.ear-replay-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;transition:all .2s ease}.ear-replay-btn:hover{background:#ffffff1a;border-color:#fff3}.ear-quit-btn{padding:6px 14px;border-radius:999px;border:1px solid var(--ft-glass-border);background:transparent;color:var(--ft-text-faint);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}.ear-quit-btn:hover{border-color:#ef444466;color:var(--ft-red, #EF4444);background:#ef44440d}.ear-streak-section{display:flex;justify-content:center;align-items:center;gap:40px;z-index:2}.ear-streak-item{text-align:center;min-width:60px}.ear-streak-value{font-size:3rem;font-weight:800;line-height:1;color:var(--ft-text);font-variant-numeric:tabular-nums;display:inline-block;transition:color .15s}.ear-streak-value.correct{animation:ft-pop .4s var(--ft-ease-spring)}.ear-streak-value.wrong{animation:ft-shake .4s ease}.ear-streak-label{font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--ft-text-faint);text-transform:uppercase;margin-top:6px}.ear-streak-divider{width:1px;height:40px;background:var(--ft-glass-border-hi, rgba(255, 255, 255, .12))}.ear-question-display{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 20px;position:relative;z-index:2}.ear-question-icon{font-size:3.5rem;animation:ear-sound-wave 2s ease-in-out infinite}.ear-question-text{font-size:1.1rem;font-weight:600;color:var(--ft-text);text-align:center}.ear-replay-big{padding:10px 24px;border-radius:999px;border:1px solid rgba(255,110,0,.3);background:#ff6e0014;color:var(--ft-accent);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;animation:ear-pulse-glow 2s ease-in-out infinite}.ear-replay-big:hover{background:#ff6e0026;border-color:#ff6e0080;transform:translateY(-2px)}.ear-answer-grid{display:grid;gap:10px;z-index:2}.ear-answer-btn{padding:14px 12px;border-radius:12px;border:1px solid var(--ft-glass-border);background:#ffffff05;color:var(--ft-text-sub);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center}.ear-answer-btn:hover:not(:disabled){border-color:#fff3;background:#ffffff0f;color:var(--ft-text);transform:translateY(-2px);box-shadow:0 6px 16px #00000026}.ear-answer-btn:disabled{cursor:default}.ear-answer-btn.correct{border-color:var(--ft-green, #10B981);background:#10b98126;color:var(--ft-green);box-shadow:0 0 20px #10b98133,inset 0 0 0 1px var(--ft-green);transform:scale(1.03)}.ear-answer-btn.wrong{border-color:var(--ft-red, #EF4444);background:#ef444426;color:var(--ft-red);box-shadow:0 0 15px #ef444426;animation:ft-shake .4s ease}.ear-answer-btn.reveal{border-color:var(--ft-green);background:#10b9811a;color:var(--ft-green);box-shadow:0 0 15px #10b98126}.ear-stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ft-glass-border);border-radius:16px;overflow:hidden;z-index:2}.ear-stat-block{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;background:#ffffff04}.ear-stat-v{font-size:1.1rem;font-weight:700;color:var(--ft-text);font-variant-numeric:tabular-nums}.ear-stat-l{font-size:.6rem;font-weight:600;letter-spacing:.08em;color:var(--ft-text-faint);text-transform:uppercase}.ear-results{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#090b0feb;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);animation:ft-fade-in .3s ease;padding:20px}.ear-results-card{max-width:380px;width:100%;padding:36px 28px;border-radius:32px;background:#ffffff08;border:1px solid var(--ft-glass-border-hi);box-shadow:0 40px 80px #00000080;display:flex;flex-direction:column;align-items:center;gap:20px;animation:ft-fade-in-up .5s var(--ft-ease-spring)}.ear-results-emoji{font-size:3.5rem;animation:ft-float 3s ease-in-out infinite}.ear-results-title{font-size:1.5rem;font-weight:800;color:var(--ft-text);text-align:center}.ear-accuracy-gauge{position:relative;width:120px;height:120px;border-radius:50%;background:#ffffff08;display:flex;align-items:center;justify-content:center}.ear-accuracy-gauge-bg{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(var(--ft-accent) 0deg,var(--ft-accent) var(--gauge-angle),transparent var(--gauge-angle));mask:radial-gradient(transparent 42px,#000 43px);-webkit-mask:radial-gradient(transparent 42px,#000 43px)}.ear-accuracy-gauge-content{display:flex;flex-direction:column;align-items:center;z-index:1}.ear-accuracy-gauge-v{font-size:1.6rem;font-weight:800;color:var(--ft-text)}.ear-accuracy-gauge-l{font-size:.55rem;font-weight:600;color:var(--ft-text-faint);letter-spacing:.08em}.ear-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;width:100%;background:var(--ft-glass-border);border-radius:16px;overflow:hidden}.ear-results-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;background:#ffffff04}.ear-results-cell.highlight{background:#ff6e000d}.ear-results-cell-v{font-size:1.4rem;font-weight:700;color:var(--ft-text);font-variant-numeric:tabular-nums}.ear-results-cell.highlight .ear-results-cell-v{color:var(--ft-accent)}.ear-results-cell-l{font-size:.55rem;font-weight:600;color:var(--ft-text-faint);letter-spacing:.08em;text-transform:uppercase}.ear-results-actions{display:flex;flex-direction:column;gap:10px;width:100%}.ear-play-again-btn{width:100%;padding:16px;border-radius:999px;border:none;background:linear-gradient(135deg,var(--ft-accent) 0%,#D95D00 100%);color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px #ff6e0040}.ear-play-again-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ff6e0059}.ear-exit-btn{width:100%;padding:14px;border-radius:999px;border:1px solid var(--ft-glass-border);background:transparent;color:var(--ft-text-sub);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.ear-exit-btn:hover{background:#ffffff0d;color:var(--ft-text)}.ear-seo-section{text-align:center;padding:40px 24px;max-width:640px;margin:0 auto}.ear-seo-section h1,.ear-seo-section p{font-size:0;opacity:0;position:absolute}@media(max-width:600px){.ear-trainer-page{padding-top:80px}.ear-page-title{font-size:1.6rem}.ear-mode-toggle{grid-template-columns:1fr;gap:8px}.ear-difficulty-toggle{grid-template-columns:repeat(3,1fr)}.ear-mode-card{padding:14px 10px}.ear-mode-desc{display:none}.ear-answer-grid{gap:8px}.ear-answer-btn{padding:12px 8px;font-size:.8rem}.ear-question-icon{font-size:2.5rem}.ear-streak-value{font-size:2.2rem}}.payment-result-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--color-bg, #0a0a0f)}.payment-result-card{max-width:520px;width:100%;background:var(--color-surface, #12121a);border:1px solid var(--color-border, rgba(255, 255, 255, .06));border-radius:1.5rem;padding:3rem 2.5rem;text-align:center;box-shadow:0 20px 60px #0006}.payment-result-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--color-text-secondary, #888)}.payment-result-icon{margin-bottom:1.5rem}.payment-result-icon.success{color:#22c55e;animation:scaleIn .4s ease-out}.payment-result-icon.failed{color:#ef4444;animation:scaleIn .4s ease-out}.payment-result-icon.error{color:#f59e0b;animation:scaleIn .4s ease-out}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.payment-result-title{font-size:1.75rem;font-weight:700;margin-bottom:1rem;font-family:var(--font-heading, "Outfit", sans-serif)}.payment-result-title.success{color:#22c55e}.payment-result-title.failed{color:#ef4444}.payment-result-title.error{color:#f59e0b}.payment-result-message{color:var(--color-text-secondary, #94a3b8);font-size:1rem;line-height:1.6;margin-bottom:1.5rem}.payment-result-details{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:1rem 1.5rem;margin-bottom:2rem}.detail-row{display:flex;justify-content:space-between;padding:.5rem 0}.detail-row+.detail-row{border-top:1px solid rgba(255,255,255,.04)}.detail-label{color:var(--color-text-secondary, #888);font-size:.875rem}.detail-value{color:var(--color-text, #fff);font-weight:600;font-size:.875rem;text-transform:capitalize}.payment-result-actions{display:flex;flex-direction:column;gap:.75rem}.payment-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;border:none;font-family:inherit}.payment-btn.primary{background:var(--color-accent, #f97316);color:#fff}.payment-btn.primary:hover{background:var(--color-accent-hover, #ea580c);transform:translateY(-1px);box-shadow:0 4px 20px #f973164d}.payment-btn.secondary{background:#ffffff0f;color:var(--color-text-secondary, #94a3b8);border:1px solid rgba(255,255,255,.08)}.payment-btn.secondary:hover{background:#ffffff1a;color:var(--color-text, #fff)}@media(max-width:640px){.payment-result-card{padding:2rem 1.5rem;border-radius:1rem}.payment-result-title{font-size:1.4rem}}.feedback-form{display:flex;flex-direction:column;gap:12px;padding:16px;height:100%;overflow-y:auto}.feedback-form--sent{align-items:center;justify-content:center;text-align:center}.feedback-form__check{font-size:48px;margin-bottom:8px}.feedback-form__sent-text{font-size:16px;font-weight:600;color:var(--text-primary, #e0e0e0);margin:0}.feedback-form__again-btn{margin-top:12px;background:transparent;border:1px solid var(--border-color, #444);color:var(--text-secondary, #aaa);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;transition:all .2s}.feedback-form__again-btn:hover{border-color:var(--accent-color, #f97316);color:var(--accent-color, #f97316)}.feedback-form__title{margin:0;font-size:14px;font-weight:600;color:var(--text-primary, #e0e0e0)}.feedback-form__categories{display:flex;gap:8px}.feedback-form__cat-btn{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--border-color, #444);background:var(--bg-secondary, #1a1a1a);color:var(--text-secondary, #aaa);cursor:pointer;font-size:13px;font-weight:500;transition:all .2s}.feedback-form__cat-btn:hover{border-color:var(--text-primary, #ccc)}.feedback-form__cat-btn.active{border-color:var(--accent-color, #f97316);color:var(--accent-color, #f97316);background:#f9731614}.feedback-form__textarea{width:100%;flex:1 1 60px;min-height:60px;resize:none;border-radius:8px;border:1px solid var(--border-color, #444);background:var(--bg-secondary, #1a1a1a);color:var(--text-primary, #e0e0e0);padding:10px 12px;font-size:14px;font-family:inherit;line-height:1.5;transition:border-color .2s;box-sizing:border-box}.feedback-form__textarea:focus{outline:none;border-color:var(--accent-color, #f97316)}.feedback-form__textarea::placeholder{color:var(--text-muted, #666)}.feedback-form__meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-muted, #666)}.feedback-form__counter{color:var(--text-muted, #666)}.feedback-form__page-hint{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feedback-form__error{color:#ef4444;font-size:13px}.feedback-form__submit{width:100%;padding:10px 0;border-radius:8px;border:none;background:var(--accent-color, #f97316);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}.feedback-form__submit:hover:not(:disabled){opacity:.9}.feedback-form__submit:disabled{opacity:.5;cursor:not-allowed}.chat-container{position:fixed;bottom:0;right:12px;z-index:1000;display:flex;flex-direction:column;font-family:var(--font-primary);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;box-shadow:var(--shadow-lg);transition:box-shadow .2s;border:1px solid var(--color-border);border-bottom:none}.chat-container.collapsed{height:auto;width:auto;bottom:24px;right:20px;border:none;border-radius:100px;background:transparent;box-shadow:none;overflow:visible}body:has(.video-text-player .video-panel.cinema-mode) .chat-container.collapsed{bottom:80px}.chat-collapsed-btn{display:flex;align-items:center;gap:8px;padding:10px 20px 10px 16px;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover));border-radius:100px;cursor:pointer;color:#fff;font-family:var(--font-primary);box-shadow:0 4px 20px #ff6e0059,0 2px 8px #00000040;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;-webkit-user-select:none;user-select:none}.chat-collapsed-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 6px 28px #ff6e0073,0 3px 12px #0000004d}.chat-collapsed-btn:active{transform:translateY(-1px) scale(.98);transition-duration:.08s}.chat-collapsed-btn.chat-hidden{opacity:0;pointer-events:none;transform:translateY(8px)}body:has(.vt-menu-dropdown) .chat-container.collapsed{opacity:0;pointer-events:none}.chat-collapsed-icon{font-size:18px;line-height:1;animation:chat-icon-bob 3s ease-in-out infinite}@keyframes chat-icon-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.chat-collapsed-label{font-size:13px;font-weight:700;letter-spacing:.3px;white-space:nowrap}.chat-collapsed-online{display:flex;align-items:center;gap:4px;font-size:11px;color:#ffffffd9;margin-left:2px}.chat-collapsed-online .chat-online-dot{background:#4ade80;box-shadow:0 0 6px #4ade8080}.chat-collapsed-unread{display:flex;align-items:center;gap:5px;font-size:13px;color:#fffffff2;margin-left:4px;padding-left:8px;border-left:1px solid rgba(255,255,255,.3);animation:badge-pop .3s cubic-bezier(.34,1.56,.64,1);font-weight:700}.chat-collapsed-unread svg{flex-shrink:0;opacity:.9}.chat-resize-handle{position:absolute;top:0;left:0;width:18px;height:18px;cursor:nwse-resize;z-index:10;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);opacity:.4;transition:opacity .15s;padding:3px}.chat-resize-handle:hover{opacity:.8}.chat-resize-edge-top{position:absolute;top:0;left:20px;right:0;height:5px;cursor:ns-resize;z-index:9}.chat-resize-edge-left{position:absolute;top:20px;left:0;bottom:0;width:5px;cursor:ew-resize;z-index:9}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--color-surface);min-height:36px;border-bottom:1px solid var(--color-border-muted)}.chat-container.collapsed .chat-header{border-bottom:none;cursor:pointer}.chat-header:hover{background:var(--color-surface-elevated)}.chat-header-main{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1}.chat-toggle-icon{font-size:14px}.chat-toggle-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:.3px}.chat-online-badge{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--color-text-muted)}.chat-online-dot{width:6px;height:6px;border-radius:50%;background:var(--color-success);box-shadow:0 0 6px color-mix(in srgb,var(--color-success) 40%,transparent);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.chat-header-right{display:flex;align-items:center;gap:8px}.chat-toggle-chevron{font-size:8px;color:var(--color-text-muted);cursor:pointer;padding:4px}.chat-unread-badge{background:var(--color-error);color:#fff;font-size:10px;font-weight:var(--font-weight-bold);min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;animation:badge-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.chat-close-btn{background:none;border:none;color:var(--color-text-muted);font-size:16px;cursor:pointer;padding:2px 6px;line-height:1;transition:color .15s,background .15s;border-radius:4px}.chat-close-btn:hover{color:var(--color-text-primary);background:var(--color-accent-soft)}.chat-filter-bar{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border-muted);flex-wrap:wrap}.chat-search-inline{display:flex;align-items:center;gap:4px;flex:1;min-width:80px;max-width:160px}.chat-search-icon{font-size:11px;opacity:.5;flex-shrink:0}.chat-search-input{flex:1;background:var(--color-surface-elevated);border:1px solid var(--color-border-muted);border-radius:var(--radius-md);padding:4px 8px;color:var(--color-text-primary);font-size:11px;font-family:var(--font-primary);outline:none;transition:border-color .15s;min-width:0}.chat-search-input:focus{border-color:var(--color-accent)}.chat-search-input::placeholder{color:var(--color-text-muted)}.chat-search-clear{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:11px;padding:1px 3px;border-radius:3px;transition:color .15s;flex-shrink:0}.chat-search-clear:hover{color:var(--color-text-primary)}.chat-filter-divider{width:1px;height:16px;background:var(--color-border-muted);flex-shrink:0}.chat-filter-label{font-size:10px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;opacity:.7}.chat-filter-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid var(--color-border-muted);border-radius:14px;background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;font-size:11px;font-family:var(--font-primary);font-weight:500;white-space:nowrap;transition:all .2s;flex-shrink:0}.chat-filter-chip:hover{border-color:var(--color-accent);color:var(--color-text-secondary);background:var(--color-surface-elevated)}.chat-filter-chip.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff;box-shadow:0 0 8px color-mix(in srgb,var(--color-accent) 40%,transparent)}.chat-filter-chip-icon{font-size:11px;line-height:1}.chat-filter-chip-text{font-weight:600;letter-spacing:.02em;max-width:130px;overflow:hidden;text-overflow:ellipsis}.chat-filter-chip-x{font-size:10px;margin-left:2px;opacity:.8}.chat-lesson-tag{display:inline-block;background:var(--color-accent-soft);color:var(--color-accent);font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;cursor:pointer;transition:all .15s;text-decoration:none;border:1px solid rgba(255,110,0,.12);vertical-align:middle}.chat-lesson-tag:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.chat-tabs{display:flex;background:var(--color-surface);border-bottom:1px solid var(--color-border-muted);padding:0 8px;gap:2px}.chat-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--color-text-muted);font-size:11px;font-weight:var(--font-weight-semibold);cursor:pointer;transition:all .15s;white-space:nowrap;overflow:hidden;font-family:inherit}.chat-tab:hover{color:var(--color-text-secondary);background:var(--color-accent-soft)}.chat-tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.chat-tab-label{overflow:hidden;text-overflow:ellipsis}.chat-tab-badge{background:var(--color-error);color:#fff;font-size:9px;font-weight:var(--font-weight-bold);min-width:14px;height:14px;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0 3px;flex-shrink:0}.chat-tab-starred.active{color:var(--color-medal-gold)!important;border-bottom-color:var(--color-medal-gold)!important}.chat-tab-starred:hover:not(.active){color:var(--color-medal-gold)}.chat-starred-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px;gap:8px}.chat-starred-icon{font-size:40px;opacity:.7;animation:star-pulse 2s ease-in-out infinite}@keyframes star-pulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.1);opacity:1}}.chat-starred-title{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-medal-gold);letter-spacing:.5px}.chat-starred-sub{font-size:var(--font-size-xs);color:var(--color-text-muted);max-width:220px;line-height:1.5}.dm-chat-container{flex:1;display:flex;flex-direction:column;min-height:0}.dm-header-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--color-surface-elevated);border-bottom:1px solid var(--color-border-muted);flex-shrink:0}.dm-monthly-counter{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-secondary)}.dm-monthly-icon{font-size:14px}.dm-monthly-counter strong{color:var(--color-accent)}.dm-guide-btn{background:none;border:1px solid var(--color-border-muted);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .15s}.dm-guide-btn:hover{background:var(--color-accent-soft);border-color:var(--color-accent)}.dm-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px}.dm-loading,.dm-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--color-text-muted);font-size:var(--font-size-xs)}.dm-empty-icon{font-size:36px;opacity:.6}.dm-empty-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-secondary)}.dm-empty-sub{font-size:var(--font-size-xs);color:var(--color-text-muted);max-width:200px;text-align:center;line-height:1.5}.dm-message{padding:6px 14px;border-radius:8px;transition:background .1s}.dm-message:not(.dm-message-system):hover{background:#ffffff08}.dm-message-pending{border-left:3px solid var(--color-accent);background:#ff6e000a}.dm-message-row{display:flex;align-items:flex-start;gap:10px}.dm-avatar{width:32px;height:32px;min-width:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;text-transform:uppercase;margin-top:1px;box-shadow:0 1px 3px #00000040}.dm-message-body{flex:1;min-width:0}.dm-message-user,.dm-message-instructor{align-self:flex-start;background:transparent;border:none}.dm-message-system{align-self:stretch;text-align:center;padding:6px 20px;margin:4px 0}.dm-message-system .dm-message-content{display:inline;font-size:11px;color:var(--color-text-muted);opacity:.7;font-style:italic;line-height:1.5}.dm-message-header{display:flex;align-items:baseline;gap:8px;margin-bottom:1px}.dm-message-sender{font-size:13px;font-weight:600;line-height:1}.dm-sender-user{color:var(--color-accent)}.dm-sender-instructor{color:#f0c040}.dm-message-time{font-size:10px;color:var(--color-text-muted);opacity:.6}.dm-edited-badge{color:var(--color-text-muted);font-style:italic;font-size:10px}.dm-message-content{font-size:13px;color:var(--color-text-primary);line-height:1.5;white-space:pre-wrap;word-break:break-word}.dm-edit-btn{background:none;border:1px solid var(--color-border-muted);color:var(--color-text-secondary);font-size:11px;padding:3px 10px;border-radius:12px;cursor:pointer;transition:all .15s;margin-top:4px}.dm-edit-btn:hover{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-accent)}.dm-edit-area{margin-top:4px}.dm-edit-textarea{width:100%;padding:8px 12px;background:var(--color-surface-elevated);border:1px solid var(--color-accent);border-radius:8px;color:var(--color-text-primary);font-size:13px;font-family:var(--font-primary);resize:none;outline:none;min-height:40px;max-height:120px;box-sizing:border-box}.dm-edit-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}.dm-edit-cancel,.dm-edit-save{padding:4px 14px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;border:none}.dm-edit-cancel{background:var(--color-surface-elevated);color:var(--color-text-secondary)}.dm-edit-cancel:hover{background:var(--color-accent-soft)}.dm-edit-save{background:var(--color-accent);color:#fff}.dm-edit-save:hover:not(:disabled){filter:brightness(1.1)}.dm-edit-save:disabled{opacity:.4;cursor:not-allowed}.dm-awaiting-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;text-align:center;font-size:12px;color:var(--color-accent);background:#ff6e000f;border-top:1px solid rgba(255,110,0,.15);flex-shrink:0}.dm-awaiting-icon{animation:awaiting-pulse 2s ease-in-out infinite}@keyframes awaiting-pulse{0%,to{opacity:1}50%{opacity:.4}}.dm-limit-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;text-align:center;font-size:12px;color:#fbbf24;background:#fbbf240f;border-top:1px solid rgba(251,191,36,.15);flex-shrink:0}.dm-error{padding:4px 12px;background:#ef44441a;color:var(--color-error);font-size:11px;text-align:center}.dm-input-area{display:flex;align-items:flex-end;gap:6px;padding:8px 10px;background:var(--color-surface);border-top:1px solid var(--color-border-muted)}.dm-input-area .chat-input{resize:none;min-height:32px;max-height:120px}.dm-guide-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;animation:fade-in .15s ease;padding:20px}.dm-guide-modal{background:var(--color-surface-elevated);border:1px solid var(--color-border-muted);border-radius:16px;width:100%;max-width:340px;overflow:hidden;box-shadow:0 16px 48px #0006;animation:msg-slide .2s ease-out}.dm-guide-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--color-border-muted)}.dm-guide-header h3{margin:0;font-size:15px;font-weight:700;color:var(--color-text-primary)}.dm-guide-close{background:none;border:none;color:var(--color-text-muted);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:6px;transition:all .15s}.dm-guide-close:hover{background:var(--color-accent-soft);color:var(--color-text-primary)}.dm-guide-body{padding:16px;display:flex;flex-direction:column;gap:14px}.dm-guide-rule{display:flex;gap:12px;align-items:flex-start}.dm-guide-rule .dm-guide-icon{font-size:20px;flex-shrink:0;margin-top:2px}.dm-guide-rule strong{display:block;font-size:13px;font-weight:700;color:var(--color-text-primary);margin-bottom:2px}.dm-guide-rule p{margin:0;font-size:11px;color:var(--color-text-secondary);line-height:1.5}.dm-attach-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:4px;opacity:.7;transition:opacity .15s;flex-shrink:0}.dm-attach-btn:hover:not(:disabled){opacity:1}.dm-attach-btn:disabled{opacity:.3;cursor:not-allowed}.dm-upload-bar,.dm-upload-ready{display:flex;flex-direction:column;gap:4px;padding:8px 12px;background:var(--color-surface-elevated);border-top:1px solid var(--color-border-muted);flex-shrink:0}.dm-upload-ready{flex-direction:row;align-items:center;justify-content:space-between}.dm-upload-info{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--color-text-secondary)}.dm-upload-preview{width:36px;height:36px;border-radius:6px;object-fit:cover}.dm-upload-icon{font-size:20px}.dm-upload-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dm-upload-percent{font-weight:600;color:var(--color-accent);min-width:36px;text-align:right}.dm-upload-badge{color:#22c55e;font-weight:600;font-size:11px}.dm-upload-remove{background:none;border:none;color:var(--color-text-muted);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .15s}.dm-upload-remove:hover{background:#ef444426;color:var(--color-error)}.dm-upload-progress{height:3px;background:var(--color-border-muted);border-radius:2px;overflow:hidden}.dm-upload-progress-fill{height:100%;background:var(--color-accent);border-radius:2px;transition:width .3s ease}.dm-upload-error{padding:6px 12px;font-size:11px;color:var(--color-error);background:#ef444414;text-align:center;flex-shrink:0}.dm-media-video{max-width:260px;max-height:200px;border-radius:8px;margin-top:4px}.chat-body{flex:1;display:flex;flex-direction:column;background:var(--color-bg-secondary);overflow:hidden;position:relative}.chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;display:flex;flex-direction:column}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:var(--color-bg-tertiary);border-radius:3px}.chat-messages::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}.chat-load-more{text-align:center;padding:6px 0;animation:fade-in .3s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.chat-load-more button{background:var(--color-accent-soft);border:none;color:var(--color-text-secondary);font-size:11px;cursor:pointer;padding:4px 14px;border-radius:4px;transition:all .15s}.chat-load-more button:hover{color:var(--color-text-primary);background:var(--color-accent-hover)}.chat-date-divider{display:flex;align-items:center;gap:12px;margin:16px 16px 8px;-webkit-user-select:none;user-select:none}.chat-date-divider:before,.chat-date-divider:after{content:"";flex:1;height:1px;background:var(--color-border-muted);opacity:.4}.chat-date-divider span{font-size:11px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.chat-message{position:relative;padding:3px 16px;border-left:2px solid transparent;transition:background .12s,border-color .12s;animation:msg-slide .15s ease-out}.chat-message:not(.system):hover{background:#ffffff06;border-left-color:#ffffff0f}@keyframes msg-slide{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.chat-message.grouped{padding-top:1px;padding-bottom:1px}.chat-message:not(.grouped):not(.system){margin-top:10px}.chat-message.chat-msg-highlight{animation:reply-highlight 1.5s ease-out}@keyframes reply-highlight{0%{background:var(--color-accent-hover)}70%{background:var(--color-accent-soft)}to{background:transparent}}.chat-msg-row{display:flex;align-items:flex-start;gap:12px}.chat-avatar{box-shadow:0 1px 3px #00000040}.chat-msg-avatar-spacer{width:34px;min-width:34px;position:relative}.chat-message.grouped:hover .chat-msg-avatar-spacer:after{content:attr(data-time);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9px;color:var(--color-text-muted);opacity:.6;white-space:nowrap}.chat-msg-body{flex:1;min-width:0}.chat-msg-header{display:flex;align-items:baseline;gap:6px;margin-bottom:2px;line-height:1.3}.chat-msg-nickname{font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;letter-spacing:-.01em}.chat-msg-nickname:hover{text-decoration:underline}.chat-msg-time{font-size:10px;color:var(--color-text-muted);opacity:.4;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto;transition:opacity .15s}.chat-message:hover .chat-msg-time{opacity:.7}.chat-msg-content{color:var(--color-text-primary);font-size:14px;line-height:1.5;word-break:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.chat-reply-preview{display:flex;align-items:center;gap:6px;margin-bottom:2px;padding:2px 0;font-size:11px;cursor:pointer}.chat-reply-preview:hover .chat-reply-text{color:var(--color-text-primary)}.chat-reply-bar{width:2px;height:14px;background:var(--color-accent);border-radius:1px;flex-shrink:0}.chat-reply-nick{color:var(--color-text-secondary);font-weight:var(--font-weight-semibold);font-size:11px;flex-shrink:0}.chat-reply-text{color:var(--color-text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}.chat-msg-actions{position:absolute;top:-8px;right:10px;display:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden}.chat-message:hover .chat-msg-actions,.chat-message.picker-open .chat-msg-actions{display:flex}.chat-action-btn{background:none;border:none;color:var(--color-text-secondary);padding:4px 8px;cursor:pointer;font-size:14px;line-height:1;transition:all .1s}.chat-action-btn:hover{background:var(--color-accent-soft);color:var(--color-accent)}.chat-action-btn.chat-action-delete:hover{background:#ed424526;color:var(--color-error)}.chat-message.system{text-align:center;padding:4px 16px;margin:4px 0;border-left:none}.chat-message.system:hover{background:transparent;border-left-color:transparent}.chat-msg-system-content{font-size:11px;font-weight:500;padding:3px 12px;border-radius:12px;display:inline-block;color:var(--color-text-muted);background:var(--color-accent-soft)}.chat-message.system.tier-up{padding:8px 16px;margin:10px 0}.tier-up-card{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 12px;border-radius:10px;border:1px solid;animation:tier-up-pop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes tier-up-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.tier-up-emoji{font-size:22px;line-height:1}.tier-up-info{display:flex;flex-direction:column;gap:1px;text-align:left}.tier-up-nick{font-size:13px;font-weight:600;color:var(--color-text-primary);line-height:1.2}.tier-up-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1.2}.chat-message.ai .chat-msg-content{color:#c4b5fd}.chat-msg-nickname.user-ai{color:#a78bfa}.chat-new-msg-badge{position:absolute;bottom:8px;left:50%;transform:translate(-50%);background:var(--color-accent);color:#fff;font-size:12px;font-weight:var(--font-weight-semibold);padding:6px 18px;border-radius:20px;cursor:pointer;box-shadow:var(--shadow-glow-md);z-index:5;animation:slide-up .2s ease-out;transition:transform .15s,box-shadow .15s;white-space:nowrap}.chat-new-msg-badge:hover{transform:translate(-50%) scale(1.03);box-shadow:var(--shadow-glow-lg)}@keyframes slide-up{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.chat-input-wrapper{background:var(--color-surface-elevated);border-top:1px solid var(--color-border-muted)}.chat-reply-input-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--color-surface);border-bottom:1px solid var(--color-border-muted);animation:fade-in .15s ease}.chat-reply-input-content{display:flex;align-items:center;gap:6px;min-width:0;flex:1}.chat-reply-input-icon{color:var(--color-accent);font-size:13px;font-weight:var(--font-weight-semibold);flex-shrink:0}.chat-reply-input-nick{color:var(--color-text-secondary);font-size:11px;font-weight:var(--font-weight-semibold);flex-shrink:0}.chat-reply-input-text{color:var(--color-text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-reply-cancel{background:none;border:none;color:var(--color-text-muted);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;flex-shrink:0;transition:all .15s}.chat-reply-cancel:hover{color:var(--color-text-primary);background:var(--color-accent-soft)}.chat-input-area{display:flex;align-items:center;gap:8px;padding:8px 12px}.chat-input{flex:1;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:var(--radius-md);padding:8px 12px;color:var(--color-text-primary);font-size:var(--font-size-sm);outline:none;font-family:inherit;transition:background .15s,border-color .15s;resize:none;overflow-y:auto;max-height:120px;min-height:32px;line-height:1.4}.chat-input:focus{background:var(--color-surface-elevated);border-color:var(--color-accent)}.chat-input::placeholder{color:var(--color-text-muted);font-size:var(--font-size-sm)}.chat-input:disabled{opacity:.4;cursor:not-allowed}.chat-send-btn{background:var(--color-accent);border:none;border-radius:var(--radius-md);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all .15s;flex-shrink:0}.chat-send-btn:hover{filter:brightness(1.15);box-shadow:var(--shadow-glow-sm)}.chat-send-btn:active{transform:scale(.92)}.chat-send-btn:disabled{background:var(--color-bg-tertiary);color:var(--color-text-muted);cursor:not-allowed;transform:none;filter:none;box-shadow:none}.chat-link{color:var(--color-accent);text-decoration:none;word-break:break-all;cursor:pointer;transition:color .1s}.chat-link:hover{text-decoration:underline;filter:brightness(1.2)}.chat-emoji-wrapper{position:relative;flex-shrink:0}.chat-emoji-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:2px 4px;border-radius:4px;transition:all .15s;line-height:1;opacity:.5}.chat-emoji-btn:hover,.chat-emoji-btn.active{opacity:1;background:var(--color-accent-soft)}.chat-emoji-picker{position:absolute;bottom:40px;left:0;width:280px;max-height:260px;overflow-y:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:8px;z-index:20;animation:emoji-pop .15s ease-out}@keyframes emoji-pop{0%{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.chat-emoji-picker::-webkit-scrollbar{width:5px}.chat-emoji-picker::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.chat-emoji-section{margin-bottom:6px}.chat-emoji-section-label{font-size:10px;font-weight:var(--font-weight-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;padding:4px 4px 2px}.chat-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.chat-emoji-item{background:none;border:none;font-size:20px;cursor:pointer;padding:4px;border-radius:4px;transition:all .1s;line-height:1}.chat-emoji-item:hover{background:var(--color-accent-soft);transform:scale(1.15)}.chat-reactions-bar{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;margin-left:46px;padding:2px 0}.chat-reaction-chip{display:inline-flex;align-items:center;gap:4px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:2px 8px 2px 6px;cursor:pointer;font-size:12px;transition:all .15s;position:relative}.chat-reaction-chip:hover{background:#ffffff14;border-color:#ffffff24}.chat-reaction-chip.self{background:#ff6e001a;border-color:#ff6e004d}.chat-reaction-chip.self:hover{background:#ff6e0029}.chat-reaction-emoji{font-size:15px;line-height:1}.chat-reaction-count{font-size:11px;font-weight:500;color:var(--color-text-muted);line-height:1}.chat-reaction-chip.self .chat-reaction-count{color:var(--color-accent)}.chat-reactor-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--color-surface-elevated);color:var(--color-text-primary);font-size:11px;padding:4px 10px;border-radius:var(--radius-sm);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--shadow-md);margin-bottom:4px;z-index:15;pointer-events:none;animation:fade-in .1s ease}.chat-reaction-picker{position:absolute;top:-6px;right:10px;transform:translateY(-100%);display:flex;gap:2px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:4px;box-shadow:var(--shadow-lg);z-index:25;animation:emoji-pop .12s ease-out}.chat-reaction-pick-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 5px;border-radius:4px;line-height:1;transition:all .1s}.chat-reaction-pick-btn:hover{background:var(--color-accent-soft);transform:scale(1.2)}.chat-mobile-actions-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:9999;display:flex;align-items:flex-end;justify-content:center;animation:fade-in .12s ease-out;-webkit-tap-highlight-color:transparent}.chat-mobile-actions-menu{width:100%;max-width:400px;background:var(--color-surface-elevated, #1e1e2e);border-top-left-radius:16px;border-top-right-radius:16px;padding:16px 12px max(16px,env(safe-area-inset-bottom));animation:mobile-actions-slide-up .2s cubic-bezier(.34,1.56,.64,1)}@keyframes mobile-actions-slide-up{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.chat-mobile-emoji-row{display:flex;justify-content:center;gap:4px;padding:4px 0 12px;border-bottom:1px solid var(--color-border-muted, rgba(255,255,255,.08));margin-bottom:8px}.chat-mobile-emoji-btn{background:none;border:none;font-size:26px;cursor:pointer;padding:8px;border-radius:10px;line-height:1;transition:background .1s,transform .1s;-webkit-tap-highlight-color:transparent}.chat-mobile-emoji-btn:active{background:var(--color-accent-soft, rgba(255,110,0,.15));transform:scale(1.15)}.chat-mobile-action-buttons{display:flex;flex-direction:column;gap:2px}.chat-mobile-action-item{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:none;color:var(--color-text-primary, #e0e0e0);font-size:15px;font-family:inherit;cursor:pointer;border-radius:10px;transition:background .1s;-webkit-tap-highlight-color:transparent}.chat-mobile-action-item:active{background:var(--color-accent-soft, rgba(255,110,0,.1))}.chat-mobile-action-item span:first-child{font-size:18px;width:24px;text-align:center}.chat-mobile-action-delete{color:var(--color-error, #ed4245)}.chat-attach-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:2px 4px;border-radius:4px;transition:all .15s;line-height:1;opacity:.5;flex-shrink:0}.chat-attach-btn:hover{opacity:1;background:var(--color-accent-soft)}.chat-attach-btn:disabled{opacity:.2;cursor:not-allowed}.chat-upload-bar{padding:8px 12px;border-top:1px solid var(--color-border-muted);background:var(--color-accent-soft)}.chat-upload-info{display:flex;align-items:center;gap:8px;margin-bottom:6px}.chat-upload-preview{width:32px;height:32px;object-fit:cover;border-radius:4px;flex-shrink:0}.chat-upload-name{font-size:11px;color:var(--color-text-secondary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-upload-percent{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--color-accent);flex-shrink:0}.chat-upload-cancel{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:3px;flex-shrink:0}.chat-upload-cancel:hover{color:var(--color-text-primary);background:var(--color-accent-soft)}.chat-upload-progress{height:3px;background:var(--color-border-muted);border-radius:2px;overflow:hidden}.chat-upload-progress-fill{height:100%;background:var(--gradient-primary);border-radius:2px;transition:width .2s ease}.chat-upload-error{padding:6px 12px;font-size:11px;color:var(--color-error);background:#ed42450f;border-top:1px solid rgba(237,66,69,.12);text-align:center}.chat-media-shimmer{width:200px;height:140px;border-radius:var(--radius-md);margin:4px 0;background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-surface-elevated) 50%,var(--color-bg-tertiary) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.chat-media-error{font-size:11px;color:var(--color-text-muted);padding:8px;background:var(--color-accent-soft);border-radius:var(--radius-sm);margin:4px 0}.chat-media-image-wrap{max-width:300px;margin:4px 0;cursor:pointer;border-radius:var(--radius-md);overflow:hidden;transition:transform .1s}.chat-media-image-wrap:hover{transform:scale(1.01)}.chat-media-image{width:100%;display:block;border-radius:var(--radius-md);max-height:300px;object-fit:contain;background:#0003}.chat-media-video-wrap{max-width:300px;margin:4px 0;border-radius:var(--radius-md);overflow:hidden}.chat-media-video{width:100%;display:block;border-radius:var(--radius-md);max-height:300px;background:#000}.chat-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#000000eb;display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:fade-in .15s ease}.chat-lightbox-img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:4px;box-shadow:0 8px 32px #00000080}.chat-lightbox-close{position:absolute;top:16px;right:20px;background:#ffffff1a;border:none;color:#fff;font-size:22px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.chat-lightbox-close:hover{background:#fff3}.chat-upgrade-prompt-compact{padding:8px 12px;border-top:1px solid var(--color-border-muted);background:var(--color-bg-secondary, var(--color-surface))}.chat-upgrade-input-fake{display:flex;align-items:center;gap:8px;background:var(--color-bg-tertiary, rgba(255, 255, 255, .04));border:1px solid var(--color-border-muted, rgba(255, 255, 255, .08));border-radius:var(--radius-md, 8px);padding:8px 12px;cursor:default}.chat-upgrade-lock{font-size:13px;opacity:.5;flex-shrink:0;line-height:1}.chat-upgrade-placeholder{flex:1;font-size:12px;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.chat-upgrade-link{background:none;border:none;color:#eab308;font-size:11px;font-weight:700;font-family:var(--font-primary, inherit);cursor:pointer;padding:2px 8px;border-radius:4px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em;transition:all .15s ease;white-space:nowrap}.chat-upgrade-link:hover{background:#eab3081f;color:#f59e0b}.chat-upgrade-prompt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 24px;gap:6px;animation:upgrade-fade-in .3s ease-out}@keyframes upgrade-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.chat-upgrade-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid rgba(234,179,8,.5);box-shadow:0 4px 20px #eab30833;margin-bottom:2px}.chat-upgrade-icon-circle{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#eab3081f,#f59e0b2e);border:2px solid rgba(234,179,8,.35);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:2px}.chat-upgrade-crown{font-size:24px;margin:-4px 0 4px;animation:crown-float 2s ease-in-out infinite}@keyframes crown-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.chat-upgrade-title{font-size:15px;font-weight:700;color:var(--color-text-primary);margin:0;letter-spacing:-.01em}.chat-upgrade-desc{font-size:12px;color:var(--color-text-secondary);line-height:1.6;max-width:280px;margin:4px 0 12px}.chat-upgrade-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#eab308,#f59e0b);border:none;border-radius:24px;padding:10px 28px;color:#000;font-size:13px;font-weight:700;font-family:var(--font-primary);cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 4px 16px #eab30859}.chat-upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px #eab30880;filter:brightness(1.08)}.chat-upgrade-btn:active{transform:translateY(0)}.chat-tab-plus-badge{font-size:10px;margin-left:2px;opacity:.8}.chat-tab-feedback-icon{margin-right:4px}.chat-tab-feedback-text{font-size:11px}@media(max-width:480px){.chat-tab-feedback-text{display:none}.chat-tab-feedback-icon{margin-right:0;font-size:14px}}.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-text-muted);text-align:center;padding:24px;gap:4px}.chat-empty-icon{font-size:32px;margin-bottom:4px;opacity:.5}.chat-empty-title{font-size:14px;font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.chat-empty-sub{font-size:12px;color:var(--color-text-muted)}.chat-connecting{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:12px;gap:10px}.chat-connecting-spinner{width:14px;height:14px;border:2px solid var(--color-accent-soft);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}.chat-reconnecting{background:linear-gradient(135deg,#f59e0b14,#f59e0b08);border-bottom:1px solid rgba(245,158,11,.15);color:var(--color-text-secondary);padding:12px 16px;flex:none;min-height:auto;justify-content:center}.chat-reconnecting-dot{width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 8px #f59e0b80;animation:reconnect-pulse 1.5s ease-in-out infinite;flex-shrink:0}@keyframes reconnect-pulse{0%,to{opacity:1;transform:scale(1);box-shadow:0 0 8px #f59e0b80}50%{opacity:.4;transform:scale(.85);box-shadow:0 0 4px #f59e0b40}}.chat-collapsed-btn.reconnecting{opacity:.85}.chat-online-dot.reconnecting{background:#f59e0b;box-shadow:0 0 6px #f59e0b80;animation:reconnect-pulse 1.5s ease-in-out infinite}@media(max-width:767px){.chat-container{right:0;left:0;bottom:0;border-radius:0}.chat-container.collapsed{left:auto;right:12px;bottom:16px;width:auto;border-radius:100px}.chat-container.collapsed.has-bottom-controls{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}.chat-collapsed-btn{padding:12px;gap:0;border-radius:50%;width:46px;height:46px;justify-content:center}.chat-collapsed-label,.chat-collapsed-online,.chat-collapsed-unread{display:none}.chat-collapsed-btn:has(.chat-collapsed-unread):after{content:"";position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:#fbbf24;border:2px solid var(--color-bg-primary);animation:pulse-dot 2s ease-in-out infinite}.chat-collapsed-icon{font-size:20px}.chat-container.expanded{position:fixed;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important;z-index:9999;border-radius:0;box-shadow:none}.chat-resize-handle{display:none}.chat-header{padding:12px 16px;min-height:44px}.chat-toggle-label{font-size:14px}.chat-close-btn{font-size:20px;padding:4px 8px}.chat-size-presets{display:none}.chat-tabs{padding:0 12px}.chat-tab{padding:8px 10px;font-size:12px}.chat-message{padding:4px 16px}.chat-msg-nickname,.chat-msg-content{font-size:14px}.chat-msg-time{font-size:10px}.chat-input{font-size:15px;padding:10px 14px;border-radius:var(--radius-lg)}.chat-send-btn{width:38px;height:38px;border-radius:var(--radius-lg)}.chat-input-area{padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.chat-upgrade-prompt-compact{padding-bottom:max(8px,env(safe-area-inset-bottom))}.chat-new-msg-badge{font-size:13px;padding:8px 22px;bottom:12px}.chat-reply-preview,.chat-reply-nick,.chat-reply-text{font-size:12px}.chat-msg-actions{display:none!important}.chat-message:active{background:var(--color-accent-soft)}.chat-mobile-quick-menu-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-text-muted);padding:4px;opacity:.6;cursor:pointer;align-self:center}}@media(min-width:768px){.chat-mobile-quick-menu-btn{display:none}}@media(max-width:380px){.chat-msg-nickname,.chat-msg-content{font-size:13px}}@media(min-width:768px)and (max-width:1100px){.chat-container.expanded{position:fixed!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;width:100%!important;height:75vh!important;max-height:1200px!important;z-index:9999!important;border-radius:var(--radius-xl) var(--radius-xl) 0 0!important;box-shadow:0 -8px 32px #0006!important;transform:none!important}.chat-resize-handle,.chat-resize-edge-top,.chat-resize-edge-left{display:none!important}}@media(max-height:500px)and (max-width:1024px){.chat-container.expanded{position:fixed;top:0;left:0;right:0;bottom:0;width:100%!important;height:100%!important;z-index:9999;border-radius:0;box-shadow:none}.chat-header{padding:6px 12px;min-height:32px}.chat-toggle-label{font-size:12px}.chat-size-presets,.chat-resize-handle,.chat-resize-edge-top,.chat-resize-edge-left{display:none}.chat-tabs{padding:0 8px}.chat-tab{padding:5px 8px;font-size:11px}.chat-filter-bar{padding:3px 8px}.chat-input-area{padding:6px 10px;padding-bottom:max(6px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}}.chat-msg-nickname.clickable{cursor:pointer;transition:text-decoration .15s,filter .15s}.chat-msg-nickname.clickable:hover{text-decoration:underline;filter:brightness(1.2)}.chat-tab-ai-coach.active{color:var(--color-accent)!important;border-bottom-color:var(--color-accent)!important}.chat-tab-ai-coach:hover:not(.active){color:var(--color-accent)}.ai-coach-tab{display:flex;flex-direction:column;height:100%;min-height:0}.ai-coach-messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px;display:flex;flex-direction:column;gap:8px}.ai-coach-messages::-webkit-scrollbar{width:6px}.ai-coach-messages::-webkit-scrollbar-track{background:var(--color-bg-tertiary);border-radius:3px}.ai-coach-messages::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.ai-coach-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 16px 16px;gap:8px}.ai-coach-welcome-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--color-accent);box-shadow:0 4px 16px #ff6e0040;margin-bottom:4px}.ai-coach-welcome-title{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0}.ai-coach-welcome-desc{font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:1.6;max-width:280px;margin:0}.ai-coach-suggestions{display:flex;flex-direction:column;gap:6px;width:100%;max-width:300px;margin-top:8px}.ai-coach-suggestion{background:transparent;border:1px solid var(--color-accent);color:var(--color-accent);font-size:12px;font-family:var(--font-primary);padding:8px 14px;border-radius:20px;cursor:pointer;transition:all .2s}.ai-coach-suggestion:hover{background:var(--color-accent);color:#fff;box-shadow:0 2px 8px #ff6e004d}.ai-coach-msg{animation:msg-slide .15s ease-out}.ai-coach-msg.user{align-self:flex-end;max-width:85%}.ai-coach-msg-content{background:var(--color-accent);color:#fff;padding:8px 14px;border-radius:16px 16px 4px;font-size:13px;line-height:1.5;word-break:break-word}.ai-coach-msg.assistant{align-self:flex-start;max-width:92%}.ai-coach-msg-avatar-row{display:flex;align-items:flex-start;gap:8px}.ai-coach-msg-avatar{width:28px;height:28px;min-width:28px;border-radius:50%;object-fit:cover;margin-top:2px;box-shadow:0 1px 4px #0003}.ai-coach-markdown{background:var(--color-surface-elevated);border:1px solid var(--color-border-muted);padding:10px 14px;border-radius:4px 16px 16px;font-size:13px;line-height:1.6;color:var(--color-text-primary);word-break:break-word;overflow-wrap:break-word}.ai-coach-markdown p{margin:0 0 8px}.ai-coach-markdown p:last-child{margin-bottom:0}.ai-coach-markdown code{background:var(--color-bg-tertiary);padding:1px 5px;border-radius:3px;font-size:12px}.ai-coach-markdown pre{background:var(--color-bg-tertiary);padding:10px;border-radius:6px;overflow-x:auto;margin:6px 0}.ai-coach-markdown ul,.ai-coach-markdown ol{margin:4px 0;padding-left:18px}.ai-coach-markdown li{margin-bottom:2px}.ai-coach-markdown strong{color:var(--color-accent)}.ai-coach-markdown h1,.ai-coach-markdown h2,.ai-coach-markdown h3,.ai-coach-markdown h4{margin:8px 0 4px;color:var(--color-text-primary)}.ai-coach-markdown h3{font-size:14px}.ai-coach-markdown h4{font-size:13px}.ai-coach-cursor{display:inline-block;color:var(--color-accent);animation:coach-blink .7s step-end infinite;margin-left:1px;font-size:14px;line-height:1;vertical-align:text-bottom}@keyframes coach-blink{0%,to{opacity:1}50%{opacity:0}}.ai-coach-loading{display:flex;align-items:center;gap:8px;padding:4px 0}.ai-coach-loading-dots{display:flex;align-items:center;gap:4px;background:var(--color-surface-elevated);border:1px solid var(--color-border-muted);padding:10px 16px;border-radius:4px 16px 16px}.ai-coach-loading-dots span{width:6px;height:6px;border-radius:50%;background:var(--color-text-muted);animation:coach-dot-bounce 1.4s ease-in-out infinite}.ai-coach-loading-dots span:nth-child(2){animation-delay:.2s}.ai-coach-loading-dots span:nth-child(3){animation-delay:.4s}@keyframes coach-dot-bounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.ai-coach-error{background:#ef44441a;color:var(--color-error);font-size:12px;padding:8px 12px;border-radius:8px;text-align:center}.ai-coach-input-area{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--color-surface);border-top:1px solid var(--color-border-muted)}.ai-coach-input{flex:1;background:var(--color-surface-elevated);border:1px solid var(--color-border-muted);border-radius:20px;padding:8px 14px;color:var(--color-text-primary);font-size:13px;font-family:var(--font-primary);outline:none;transition:border-color .15s}.ai-coach-input:focus{border-color:var(--color-accent)}.ai-coach-input::placeholder{color:var(--color-text-muted)}.ai-coach-input:disabled{opacity:.6}.ai-coach-send-btn{width:36px;height:36px;min-width:36px;border-radius:50%;background:var(--color-accent);color:#fff;border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:0 2px 8px #ff6e004d}.ai-coach-send-btn:hover:not(:disabled){background:var(--color-accent-hover);transform:scale(1.05)}.ai-coach-send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.ai-coach-clear-btn{background:none;border:none;font-size:14px;cursor:pointer;padding:4px 6px;border-radius:6px;transition:background .15s;color:var(--color-text-muted)}.ai-coach-clear-btn:hover{background:var(--color-accent-soft)}.metro-popup{display:flex;flex-direction:column;gap:10px}.metro-bpm-section{display:flex;flex-direction:column;align-items:center;gap:4px}.metro-bpm-display{display:flex;align-items:center;gap:4px}.metro-bpm-nudge{width:28px;height:28px;border-radius:50%;border:1px solid var(--color-border-muted);background:transparent;color:var(--color-text-muted);font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s ease;flex-shrink:0}.metro-bpm-nudge:hover{background:var(--color-bg-tertiary);color:var(--color-text-primary);border-color:var(--color-border-default)}.metro-bpm-nudge:active{transform:scale(.9)}.metro-bpm-input{width:60px;text-align:center;font-size:28px;font-weight:800;font-family:var(--font-body);color:var(--color-text-primary);background:transparent;border:none;outline:none;padding:0;line-height:1;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.metro-bpm-input:focus{color:var(--color-accent)}.metro-bpm-input::-webkit-inner-spin-button,.metro-bpm-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.metro-bpm-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted)}.metro-bpm-slider{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border-muted);border-radius:2px;outline:none;cursor:pointer;margin-top:2px}.metro-bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent);border:2px solid var(--color-bg-card);box-shadow:0 1px 4px #0000004d;cursor:pointer;transition:transform .1s ease}.metro-bpm-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.metro-bpm-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-accent);border:2px solid var(--color-bg-card);box-shadow:0 1px 4px #0000004d;cursor:pointer}.metro-beats{display:flex;justify-content:center;gap:8px;padding:4px 0}.metro-beat-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-border-muted);background:transparent;cursor:pointer;transition:all .12s ease;padding:0}.metro-beat-dot:hover{border-color:var(--color-text-muted)}.metro-beat-dot.accent{background:var(--color-accent);border-color:var(--color-accent)}.metro-beat-dot.active{transform:scale(1.25);box-shadow:0 0 8px rgba(var(--color-accent-rgb, 255, 165, 0),.5)}.metro-beat-dot.accent.active{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 12px rgba(var(--color-accent-rgb, 255, 165, 0),.7)}.metro-beat-dot:not(.accent).active{background:var(--color-text-muted);border-color:var(--color-text-muted)}.metro-mode-row{display:flex;gap:2px;background:var(--color-bg-tertiary);border-radius:8px;padding:2px}.metro-mode-pill{flex:1;padding:5px 0;border:none;background:transparent;border-radius:6px;font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--color-text-muted);cursor:pointer;transition:all .12s ease}.metro-mode-pill:hover{color:var(--color-text-primary)}.metro-mode-pill.active{background:var(--color-bg-card);color:var(--color-accent);box-shadow:0 1px 3px #00000026}.metro-auto-settings{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;animation:gb-popup-in var(--gb-dur-tooltip) var(--gb-ease-spring)}.metro-auto-field{display:flex;flex-direction:column;gap:2px}.metro-auto-field label{font-size:9px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.metro-auto-input-wrap{display:flex;align-items:center;gap:2px;background:var(--color-bg-tertiary);border:1px solid var(--color-border-muted);border-radius:6px;padding:3px 5px}.metro-auto-input-wrap input{width:100%;background:transparent;border:none;outline:none;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--color-text-primary);text-align:center;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.metro-auto-input-wrap input::-webkit-inner-spin-button,.metro-auto-input-wrap input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.metro-auto-unit{font-size:9px;color:var(--color-text-muted);flex-shrink:0;font-weight:500}.metro-actions{display:flex;gap:6px}.metro-play-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;border:none;border-radius:8px;font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer;transition:all .12s ease;background:var(--color-accent);color:#000}.metro-play-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.metro-play-btn:active{transform:translateY(0)}.metro-play-btn.playing{background:var(--color-text-muted);color:var(--color-bg-primary)}.metro-tap-btn{padding:8px 12px;border:1px solid var(--color-border-muted);border-radius:8px;background:transparent;font-family:var(--font-body);font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--color-text-muted);cursor:pointer;transition:all .1s ease}.metro-tap-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.metro-tap-btn:active{transform:scale(.95);background:rgba(var(--color-accent-rgb, 255, 165, 0),.1)}.social-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:gb-overlay-in var(--gb-dur-fast) var(--gb-ease-out);padding:20px}.social-modal{width:100%;max-width:440px;background:linear-gradient(145deg,#1e1e23fa,#141419fc);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 24px 64px #00000080;animation:gb-modal-in var(--gb-dur-normal) var(--gb-ease-spring);overflow:hidden}.social-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}.social-modal-title{font-size:17px;font-weight:700;color:#fff;margin:0;letter-spacing:-.2px}.social-modal-close{background:none;border:none;color:#fff6;cursor:pointer;padding:4px;border-radius:6px;transition:all .2s}.social-modal-close:hover{color:#fff;background:#ffffff14}.profile-avatar-section{display:flex;align-items:center;gap:16px;margin-bottom:16px}.profile-avatar-preview{position:relative;width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0;cursor:pointer;background:#ffffff0f;border:2px solid rgba(255,255,255,.1);transition:border-color .2s}.profile-avatar-preview:hover{border-color:#f9731680}.profile-avatar-preview img{width:100%;height:100%;object-fit:cover}.profile-avatar-initial{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:28px;font-weight:700;color:#fff;background:linear-gradient(135deg,#f97316,#ea580c)}.profile-avatar-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .2s}.profile-avatar-preview:hover .profile-avatar-overlay,.profile-avatar-preview.uploading .profile-avatar-overlay{opacity:1}@keyframes avatar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.avatar-spin{animation:avatar-spin .8s linear infinite}.profile-avatar-info{display:flex;flex-direction:column;gap:6px}.profile-avatar-change-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.profile-avatar-change-btn:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff2e}.profile-avatar-change-btn:disabled{opacity:.6;cursor:not-allowed}.profile-avatar-hint{font-size:11px;color:#ffffff59}.profile-settings-divider{height:1px;background:#ffffff12;margin:4px 0 16px}.social-modal-body{padding:20px 24px}.social-modal-desc{font-size:13px;color:#ffffff80;margin:0 0 20px;line-height:1.5}.social-modal-field{display:flex;align-items:center;gap:0;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden;transition:border-color .2s;margin-bottom:12px}.social-modal-field:focus-within{border-color:#fff3}.social-modal-field.error{border-color:#ef444480}.social-modal-field-icon{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;flex-shrink:0}.social-modal-field-icon.instagram{color:#e1306c}.social-modal-field-icon.youtube{color:red}.social-modal-input{flex:1;background:none;border:none;outline:none;color:#fff;font-size:13px;padding:12px 14px 12px 0;line-height:1;font-family:Inter,system-ui,sans-serif}.social-modal-input::placeholder{color:#ffffff40}.social-modal-field-err{display:flex;align-items:center;gap:4px;font-size:11px;color:#ef4444;margin-top:-6px;margin-bottom:10px;padding-left:4px}.social-modal-msg{display:flex;align-items:center;gap:6px;font-size:13px;padding:10px 14px;border-radius:8px;margin-top:8px}.social-modal-msg.error{background:#ef44441a;color:#f87171;border:1px solid rgba(239,68,68,.2)}.social-modal-msg.success{background:#22c55e1a;color:#4ade80;border:1px solid rgba(34,197,94,.2)}.social-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 24px 20px}.social-modal-btn{padding:9px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.social-modal-btn.cancel{background:#ffffff0f;color:#fff9}.social-modal-btn.cancel:hover{background:#ffffff1a;color:#fff}.social-modal-btn.save{background:linear-gradient(135deg,#ff6b00,#ff8533);color:#fff}.social-modal-btn.save:hover{filter:brightness(1.1);transform:translateY(-1px)}.social-modal-btn.save:disabled{opacity:.6;cursor:not-allowed;transform:none}@media(max-width:480px){.social-modal{max-width:100%}.social-modal-header{padding:16px 18px 0}.social-modal-body{padding:16px 18px}.social-modal-footer{padding:0 18px 16px}}.mobile-metronome-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:gb-overlay-in var(--gb-dur-fast) var(--gb-ease-out)}@media(min-width:869px){.mobile-metronome-overlay{display:none!important}}.mobile-metronome-content{background:var(--color-bg-card, #1a1a2e);border:1px solid var(--color-border-default, rgba(255, 255, 255, .1));border-radius:20px;width:100%;max-width:380px;padding:24px;box-shadow:0 20px 50px #00000080;animation:gb-modal-in var(--gb-dur-normal) var(--gb-ease-spring);max-height:90vh;overflow-y:auto}.mobile-metronome-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.mobile-metronome-header h3{font-size:20px;font-weight:700;color:var(--color-text-primary, #ffffff);margin:0;display:flex;align-items:center;gap:8px}.mobile-metronome-close{background:transparent;border:none;color:var(--color-text-secondary, #a0a0b0);padding:8px;cursor:pointer;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center}.mobile-metronome-close:active{background:#ffffff1a;color:var(--color-text-primary, #ffffff)}.mobile-metronome-content .metro-popup{background:transparent;border:none;box-shadow:none;padding:0;width:100%}@media(max-height:500px){.mobile-metronome-content{max-height:85vh;padding:16px}.mobile-metronome-header{margin-bottom:8px}.mobile-metronome-header h3{font-size:16px}}.maintenance-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#0a0a0ff7;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transition:opacity .5s ease;pointer-events:none}.maintenance-overlay--visible{opacity:1;pointer-events:all}.maintenance-overlay__content{text-align:center;max-width:480px;padding:2rem;position:relative}.maintenance-overlay__icon{margin-bottom:1.5rem;position:relative;z-index:2}.maintenance-overlay__pick{animation:pickFloat 3s ease-in-out infinite;transform-origin:center}@keyframes pickFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}.maintenance-overlay__rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-70%);z-index:1}.maintenance-overlay__ring{position:absolute;border-radius:50%;border:2px solid rgba(255,140,0,.2);transform:translate(-50%,-50%)}.maintenance-overlay__ring--1{width:120px;height:120px;animation:ringPulse 2s ease-in-out infinite}.maintenance-overlay__ring--2{width:180px;height:180px;animation:ringPulse 2s ease-in-out infinite .3s}.maintenance-overlay__ring--3{width:240px;height:240px;animation:ringPulse 2s ease-in-out infinite .6s}@keyframes ringPulse{0%,to{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.05)}}.maintenance-overlay__title{font-size:1.75rem;font-weight:700;color:#fff;margin:0 0 .75rem;letter-spacing:-.02em}.maintenance-overlay__message{font-size:1rem;color:#ffffffb3;line-height:1.6;margin:0 0 1.5rem}.maintenance-overlay__estimate{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ff8c0026;border:1px solid rgba(255,140,0,.3);border-radius:999px;color:#ff8c00;font-size:.875rem;font-weight:500;margin-bottom:2rem}.maintenance-overlay__estimate-icon{font-size:1rem}.maintenance-overlay__wave{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:2rem}.maintenance-overlay__wave-bar{width:4px;height:20px;background:linear-gradient(to top,#ff6b00,#ff8c00);border-radius:2px;animation:waveAnim 1.2s ease-in-out infinite}@keyframes waveAnim{0%,to{height:8px;opacity:.4}50%{height:28px;opacity:1}}.update-banner{position:fixed;top:0;left:0;right:0;z-index:99998;animation:bannerSlideIn .4s ease-out}@keyframes bannerSlideIn{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.update-banner__content{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.625rem 1rem;background:linear-gradient(135deg,#1a1a2e,#16213e);border-bottom:1px solid rgba(255,140,0,.3)}.update-banner__icon{font-size:1rem}.update-banner__text{color:#ffffffe6;font-size:.85rem;font-weight:500}.update-banner__btn{padding:.3rem .85rem;background:#ff8c00;color:#fff;border:none;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s,transform .15s}.update-banner__btn:hover{background:#ff6b00;transform:scale(1.05)}.update-banner__dismiss{background:none;border:none;color:#ffffff80;font-size:1rem;cursor:pointer;padding:.25rem;line-height:1;transition:color .2s}.update-banner__dismiss:hover{color:#ffffffe6}.gp-toggle{position:fixed;right:200px;bottom:24px;z-index:1000;border:none;border-radius:100px;background:linear-gradient(135deg,#c8922a,#e0a832);color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 20px 10px 16px;font-family:var(--font-primary, inherit);box-shadow:0 4px 20px #c8922a59,0 2px 8px #00000040;transition:all .25s cubic-bezier(.34,1.56,.64,1);-webkit-user-select:none;user-select:none}.gp-toggle:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 6px 28px #c8922a73,0 3px 12px #0000004d}.gp-toggle:active{transform:translateY(-1px) scale(.98);transition-duration:.08s}.gp-toggle.gp-hidden{opacity:0;pointer-events:none;transform:translateY(8px)}.gp-toggle-icon{font-size:18px;line-height:1;animation:gp-icon-bob 3s ease-in-out infinite}@keyframes gp-icon-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.gp-toggle-label{font-size:13px;font-weight:700;letter-spacing:.3px;white-space:nowrap}.gp-pulse{animation:gpPulse 2.5s ease-in-out infinite}@keyframes gpPulse{0%,to{box-shadow:0 4px 20px #c8922a59,0 2px 8px #00000040}50%{box-shadow:0 4px 24px #c8922a8c,0 0 8px #c8922a4d}}.gp-panel{position:fixed;right:12px;bottom:0;z-index:1100;width:360px;max-height:70vh;display:flex;flex-direction:column;background:var(--color-bg-primary, #0d0d18);border:1px solid rgba(255,255,255,.06);border-bottom:none;border-radius:16px 16px 0 0;box-shadow:0 -4px 48px #00000080,0 0 0 1px #ffffff08 inset;animation:gpSlideUp .25s cubic-bezier(.16,1,.3,1);overflow:hidden;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}@keyframes gpSlideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.gp-header{display:flex;align-items:center;gap:6px;padding:12px 14px 11px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05);background:#ffffff04}.gp-back{width:26px;height:26px;border:none;border-radius:7px;background:transparent;color:var(--color-text-secondary, #888);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0}.gp-back:hover{background:#ffffff0f;color:var(--color-text-primary, #e0e0e0)}.gp-header-title{font-size:13px;font-weight:700;color:var(--color-text-primary, #f0f0f0);letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gp-header-progress{font-size:11px;font-weight:600;color:var(--color-text-secondary, #888);background:#ffffff0a;padding:2px 8px;border-radius:10px;flex-shrink:0}.gp-close{width:28px;height:28px;border:none;border-radius:8px;background:transparent;color:var(--color-text-secondary, #888);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:background .15s,color .15s}.gp-close:hover{background:#ffffff0f;color:var(--color-text-primary, #e0e0e0)}.gp-section-title{padding:8px 14px 6px;font-size:11px;font-weight:600;color:var(--color-text-secondary, #888);letter-spacing:.02em;border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0}.gp-list{flex:1;overflow-y:auto;padding:6px 0 8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent;position:relative}.gp-list::-webkit-scrollbar{width:3px}.gp-list::-webkit-scrollbar-track{background:transparent}.gp-list::-webkit-scrollbar-thumb{background:#ffffff0f;border-radius:2px}.gp-sticky-indicator{position:sticky;z-index:10;display:flex;align-items:center;gap:8px;padding:7px 10px;margin:0 4px;border-radius:8px;cursor:pointer;background:#ff6e001a;border:1px solid rgba(255,110,0,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 12px #0006;transition:background .15s}.gp-sticky-indicator:hover{background:#ff6e0029}.gp-sticky-top{top:0;border-top:none;border-radius:0 0 8px 8px;margin-top:0}.gp-sticky-bottom{bottom:0;border-bottom:none;border-radius:8px 8px 0 0;margin-bottom:0}.gp-sticky-num{width:20px;flex-shrink:0;font-size:11px;font-weight:700;color:var(--color-accent, #ff6e00);text-align:center}.gp-sticky-thumb{width:28px;height:28px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#ffffff08;display:flex;align-items:center;justify-content:center;font-size:12px}.gp-sticky-thumb img{width:100%;height:100%;object-fit:cover}.gp-sticky-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.gp-sticky-pathway{font-size:9px;font-weight:700;color:var(--color-accent, #ff6e00);text-transform:uppercase;letter-spacing:.03em}.gp-sticky-name{font-size:11px;font-weight:600;color:var(--color-text-primary, #e0e0e0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gp-sticky-arrow{flex-shrink:0;font-size:14px;color:var(--color-accent, #ff6e00);opacity:.7;animation:gp-arrow-bounce 1.5s ease-in-out infinite}@keyframes gp-arrow-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.gp-status{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 12px}.gp-status-text{font-size:12px;color:var(--color-text-tertiary, #555)}.gp-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.06);border-top-color:var(--color-accent, #ff6e00);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.gp-retry{border:none;background:transparent;color:var(--color-accent, #ff6e00);cursor:pointer;font-size:16px;padding:2px 6px}.gp-item{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 8px;margin:1px 6px;border-radius:10px;cursor:pointer;transition:background .12s,opacity .15s;border-left:2.5px solid transparent}.gp-item:hover{background:#ffffff08}.gp-done{opacity:.5;cursor:pointer}.gp-done:hover{opacity:.72}.gp-done .gp-num{color:#22c55e}.gp-next{background:var(--color-accent-soft, rgba(255, 110, 0, .06));border-left-color:var(--color-accent, #ff6e00)}.gp-next:hover{background:#ff6e001a}.gp-next .gp-num{color:var(--color-accent, #ff6e00);font-weight:700}.gp-active{background:#22c55e0f;border-left-color:#22c55e}.gp-active:hover{background:#22c55e1a}.gp-active .gp-num{color:#22c55e}.gp-locked{opacity:.3;cursor:default;pointer-events:none}.gp-locked .gp-num{color:var(--color-text-tertiary, #3a3a3a)}.gp-video .gp-pathway{color:var(--color-accent, #ff6e00)!important}.gp-video .gp-thumb-video{background:linear-gradient(135deg,#ff6e0024,#ff6e000a);color:var(--color-accent, #ff6e00)}.gp-num{width:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:var(--color-text-tertiary, #4a4a4a)}.gp-thumb{width:40px;height:40px;border-radius:8px;overflow:hidden;flex-shrink:0;background:#ffffff06}.gp-thumb img{width:100%;height:100%;object-fit:cover}.gp-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:15px}.gp-thumb-video{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}.gp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.gp-row1{display:flex;align-items:center;gap:5px}.gp-pathway{font-size:10px;font-weight:700;color:var(--color-accent, #ff6e00);text-transform:uppercase;letter-spacing:.03em}.gp-sl{font-size:9px;color:var(--color-text-tertiary, #555);background:#ffffff0a;padding:1px 5px;border-radius:4px;line-height:1.5;font-weight:500}.gp-name{font-size:12px;font-weight:500;color:var(--color-text-primary, #e0e0e0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}.gp-tiers{display:flex;align-items:center;gap:4px;font-size:10px}.gp-tier-sep{font-size:9px;color:var(--color-text-tertiary, #444);opacity:.6}.gp-watched{font-size:10px;color:#22c55e;font-weight:500}.gp-remaining{text-align:center;padding:14px 12px;font-size:11px;font-weight:600;color:var(--color-text-tertiary, #555);letter-spacing:.02em}.gp-pinned-videos{flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.05)}.gp-pinned-video{display:flex;align-items:center;gap:8px;padding:8px 14px;margin:0;border:none;border-top:1px solid rgba(255,255,255,.03);background:linear-gradient(90deg,rgba(255,110,0,.06),transparent);cursor:pointer;transition:background .15s;flex-shrink:0;width:100%;font-family:inherit;color:inherit}.gp-pinned-video:hover{background:linear-gradient(90deg,#ff6e001a,#ff6e0005)}.gp-pinned-icon{font-size:14px;flex-shrink:0}.gp-pinned-label{flex:1;font-size:11px;font-weight:600;color:var(--color-text-secondary, #aaa);text-align:left}.gp-pinned-cta{font-size:11px;color:var(--color-accent, #ff6e00);opacity:.7;flex-shrink:0}.gp-selector{padding:12px 14px 16px;overflow-y:auto;flex:1}.gp-selector-subtitle{font-size:12px;color:var(--color-text-secondary, #888);margin:0 0 14px;line-height:1.5}.gp-card-featured{aspect-ratio:2.5 / 1!important;width:100%;margin-bottom:10px;border-color:#ff6e0040}.gp-card-featured .gp-card-name{font-size:14px}.gp-card-featured .gp-card-count{font-size:11px}.gp-card-featured:hover{border-color:#ff6e0073}.gp-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);z-index:2;width:36px;height:36px;border-radius:50%;background:#00000073;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;padding-left:2px;opacity:.8;transition:all .2s ease;pointer-events:none}.gp-technique-card:hover .gp-card-play{opacity:1;transform:translate(-50%,-55%) scale(1.1);background:#ff6e008c;border-color:#ff6e0066}.gp-selector-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gp-technique-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#ffffff05;cursor:pointer;transition:all .18s ease;color:inherit;font-family:inherit;overflow:hidden;aspect-ratio:1 / 1}.gp-technique-card:hover{border-color:#ff6e0059;transform:translateY(-2px);box-shadow:0 6px 20px #00000059}.gp-technique-card:hover .gp-card-bear{transform:scale(1.05)}.gp-technique-card:active{transform:translateY(0)}.gp-card-bear{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:0;object-fit:cover;object-position:center 25%;flex-shrink:0;transition:transform .35s ease}.gp-card-overlay{position:relative;z-index:1;width:100%;padding:28px 8px 10px;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.65) 50%,transparent 100%);display:flex;flex-direction:column;align-items:center;gap:2px}.gp-card-name{font-size:11.5px;font-weight:700;color:#fff;text-align:center;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.6)}.gp-card-count{font-size:10px;color:#fff9;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.5)}@media(max-width:767px){.gp-panel{right:0;left:0;width:auto;max-height:80vh;bottom:0;border-radius:16px 16px 0 0}@keyframes gpSlideUp{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}.gp-toggle{right:68px;bottom:16px;padding:12px;gap:0;border-radius:50%;width:46px;height:46px;justify-content:center}.gp-toggle-label{display:none}.gp-toggle-icon{font-size:20px}.gp-selector-grid{grid-template-columns:1fr 1fr;gap:6px}.gp-card-name{font-size:10px}.gp-card-featured .gp-card-bear{width:60px;height:60px}}body:has(.chat-container.expanded) .gp-toggle,body:has(.chat-container.expanded) .gp-panel{display:none!important}body:has(.video-text-player .video-panel.cinema-mode) .gp-toggle{bottom:80px}body:has(.vt-menu-dropdown) .gp-toggle{opacity:0;pointer-events:none}:root,.theme-dark{--color-bg: #0b0f10;--color-bg-secondary: #0f1416;--color-bg-tertiary: #131a1d;--color-surface: #141a1f;--color-surface-alt: #0f1518;--color-surface-elevated: #1a2428;--app-header-bg: rgba(0, 0, 0, .45);--color-text-primary: #eef3f4;--color-text-secondary: #b9c6c9;--color-text-muted: #7f9095;--color-accent: #ff6e00;--color-accent-soft: rgba(255, 110, 0, .15);--color-accent-hover: rgba(255, 110, 0, .25);--color-border: rgba(255, 255, 255, .1);--color-border-hover: rgba(255, 255, 255, .18);--color-border-active: rgba(255, 110, 0, .45);--color-border-muted: rgba(255, 255, 255, .06);--color-glow: rgba(255, 110, 0, .15);--color-glow-strong: rgba(255, 110, 0, .3);--color-glow-subtle: rgba(255, 110, 0, .08);--color-alphatab-bg: #0f1416;--color-alphatab-border: rgba(255, 255, 255, .12);--color-alphatab-text: #eef3f4;--color-alphatab-note: #ff6e00;--color-alphatab-cursor: rgba(255, 110, 0, .6);--color-icon: #eef3f4;--color-icon-muted: rgba(185, 198, 201, .6);--color-medal-bronze: #CD7F32;--color-medal-silver: #C0C0C0;--color-medal-gold: #FFD700;--color-medal-platinum: #25CED1;--color-medal-diamond: #7C5CFF;--color-medal-master: #9D4EDD;--color-not-trained-bg: rgba(44, 54, 56, .2);--color-not-trained-border: rgba(44, 54, 56, .38);--color-not-trained-text: rgba(238, 243, 244, .85);--color-not-trained-text-dark: rgba(185, 198, 201, .6);--font-primary: "Roboto", sans-serif;--color-primary: #ff6e00;--color-primary-50: #fff2e6;--color-primary-100: #ffe2c7;--color-primary-200: #ffcb97;--color-primary-300: #ffb163;--color-primary-400: #f79f45;--color-primary-500: #ff6e00;--color-primary-600: #d9761e;--color-primary-700: #b75f17;--color-primary-800: #8f4913;--color-primary-900: #67350f;--color-accent-500: #ff6e00;--color-accent-600: #d9761e;--color-neutral-0: #0b0f10;--color-neutral-50: #0f1416;--color-neutral-100: #131a1d;--color-neutral-200: #1a2428;--color-neutral-500: #7f9095;--color-neutral-700: #b9c6c9;--color-neutral-800: #d7e0e2;--color-neutral-900: #eef3f4;--color-success: #35c56a;--color-warning: #ff6e00;--color-error: #ff4d4d;--color-info: #ff6e00;--color-bg-primary: #0b0f10;--color-bg-card: #11171c;--color-bg-card-hover: #161e24;--color-bg-overlay: rgba(11, 15, 16, .95);--color-border-default: rgba(255, 255, 255, .12);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .5);--shadow-md: 0 4px 16px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .7);--shadow-xl: 0 12px 48px rgba(0, 0, 0, .8);--shadow-glow-subtle: 0 0 8px rgba(255, 110, 0, .15);--shadow-glow-sm: 0 0 12px rgba(255, 110, 0, .25);--shadow-glow-md: 0 0 20px rgba(255, 110, 0, .35);--shadow-glow-lg: 0 0 30px rgba(255, 110, 0, .5);--shadow-card: 0 4px 16px rgba(0, 0, 0, .6), 0 0 12px rgba(255, 110, 0, .08);--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .8), 0 0 24px rgba(255, 110, 0, .2);--shadow-button: 0 4px 12px rgba(0, 0, 0, .4), 0 0 16px rgba(255, 110, 0, .3);--shadow-button-hover: 0 6px 20px rgba(0, 0, 0, .5), 0 0 24px rgba(255, 110, 0, .5);--gradient-card-soft: linear-gradient(135deg, rgba(22, 30, 36, .95) 0%, rgba(17, 23, 28, .95) 100%);--gradient-card-hard: linear-gradient(135deg, rgba(26, 34, 40, .98) 0%, rgba(19, 25, 30, .98) 100%);--gradient-primary: linear-gradient(135deg, #ff6e00 0%, #d9761e 100%);--gradient-header: linear-gradient(180deg, rgba(255, 110, 0, .08) 0%, transparent 100%);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg)}.theme-light{--color-bg: #f8f9fa;--color-surface: #ffffff;--color-surface-alt: #fafbfc;--color-surface-elevated: #ffffff;--app-header-bg: #ffffff;--color-text-primary: #1a1d29;--color-text-secondary: #5a5f7a;--color-text-muted: #8b92b2;--color-accent: #ff6e00;--color-accent-soft: rgba(255, 110, 0, .12);--color-accent-hover: rgba(255, 110, 0, .2);--color-border: rgba(0, 0, 0, .08);--color-glow: rgba(255, 110, 0, .12);--color-glow-strong: rgba(255, 110, 0, .2);--color-glow-subtle: rgba(255, 110, 0, .06);--color-alphatab-bg: #ffffff;--color-alphatab-border: rgba(0, 0, 0, .1);--color-alphatab-text: #1a1d29;--color-alphatab-note: #000000;--color-alphatab-cursor: rgba(255, 110, 0, .5);--color-icon: #ff6e00;--color-icon-muted: #8b92b2;--color-medal-bronze: #cd7f32;--color-medal-silver: #a8a8a8;--color-medal-gold: #d4af37;--color-medal-diamond: #4fd1c5;--color-not-trained-bg: rgba(139, 146, 178, .1);--color-not-trained-border: rgba(139, 146, 178, .3);--color-not-trained-text: rgba(180, 140, 90, .8);--color-not-trained-text-dark: rgba(160, 120, 70, .55);--font-primary: "Roboto", sans-serif;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--color-primary-50: #fff5eb;--color-primary-100: #ffe0c2;--color-primary-200: #ffcc99;--color-primary-300: #ffb870;--color-primary-400: #ffa347;--color-primary: #ff6e00;--color-primary-500: #ff6e00;--color-primary-600: #cc5800;--color-primary-700: #994200;--color-primary-800: #662c00;--color-primary-900: #331600;--color-accent-500: #ff6e00;--color-accent-600: #cc5800;--color-neutral-0: #ffffff;--color-neutral-50: #f8f9fa;--color-neutral-100: #f1f3f5;--color-neutral-200: #e9ecef;--color-neutral-500: #868e96;--color-neutral-700: #5a5f7a;--color-neutral-800: #1a1d29;--color-neutral-900: #000000;--color-success: #28a745;--color-warning: #ff8c42;--color-error: #ff3366;--color-info: #ff6e00;--color-bg-primary: #f8f9fa;--color-bg-secondary: #ffffff;--color-bg-tertiary: #f1f3f5;--color-bg-card: rgba(255, 255, 255, .9);--color-bg-card-hover: rgba(255, 255, 255, 1);--color-bg-overlay: rgba(248, 249, 250, .95);--color-border-default: rgba(0, 0, 0, .08);--color-border-hover: rgba(255, 110, 0, .25);--color-border-active: rgba(255, 110, 0, .4);--color-border-muted: rgba(0, 0, 0, .04);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--shadow-xl: 0 12px 48px rgba(0, 0, 0, .15);--shadow-glow-subtle: 0 0 8px rgba(255, 110, 0, .1);--shadow-glow-sm: 0 0 12px rgba(255, 110, 0, .15);--shadow-glow-md: 0 0 20px rgba(255, 110, 0, .2);--shadow-glow-lg: 0 0 30px rgba(255, 110, 0, .3);--shadow-card: 0 4px 16px rgba(0, 0, 0, .1), 0 0 12px rgba(255, 110, 0, .05);--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .15), 0 0 24px rgba(255, 110, 0, .1);--shadow-button: 0 4px 12px rgba(0, 0, 0, .1), 0 0 16px rgba(255, 110, 0, .2);--shadow-button-hover: 0 6px 20px rgba(0, 0, 0, .12), 0 0 24px rgba(255, 110, 0, .3);--gradient-card-soft: linear-gradient( 135deg, rgba(255, 255, 255, .95) 0%, rgba(248, 249, 250, .95) 100% );--gradient-card-hard: linear-gradient( 135deg, rgba(255, 255, 255, .98) 0%, rgba(241, 243, 245, .98) 100% );--gradient-primary: linear-gradient(135deg, #ff6e00 0%, #cc5800 100%);--gradient-header: linear-gradient( 180deg, rgba(255, 110, 0, .05) 0%, transparent 100% )}.theme-stealth{--color-bg: #050816;--color-surface: #101528;--color-surface-alt: #141a33;--color-surface-elevated: #1a2140;--app-header-bg: rgba(0, 0, 0, .45);--color-text-primary: #e4e8ff;--color-text-secondary: #9aa2c3;--color-text-muted: #6b7398;--color-accent: #2dd4bf;--color-accent-soft: rgba(45, 212, 191, .12);--color-accent-hover: rgba(45, 212, 191, .25);--color-border: rgba(45, 212, 191, .15);--color-glow: rgba(45, 212, 191, .12);--color-glow-strong: rgba(45, 212, 191, .25);--color-glow-subtle: rgba(45, 212, 191, .06);--color-alphatab-bg: rgba(20, 25, 40, .95);--color-alphatab-border: rgba(45, 212, 191, .2);--color-alphatab-text: #e4e8ff;--color-alphatab-note: #e4e8ff;--color-alphatab-cursor: rgba(45, 212, 191, .5);--color-icon: #2dd4bf;--color-icon-muted: rgba(154, 162, 195, .6);--color-medal-bronze: #cd7f32;--color-medal-silver: #c0c0c0;--color-medal-gold: #ffd700;--color-medal-diamond: #4fd1c5;--color-not-trained-bg: rgba(107, 115, 152, .12);--color-not-trained-border: rgba(107, 115, 152, .35);--color-not-trained-text: rgba(170, 130, 80, .8);--color-not-trained-text-dark: rgba(150, 110, 60, .55);--font-primary: "Roboto", sans-serif;--color-primary-50: #e6f7f5;--color-primary-100: #b3e8e0;--color-primary-200: #80d9cb;--color-primary-300: #4dcab6;--color-primary-400: #1abb9f;--color-primary-500: #2dd4bf;--color-primary-600: #24a99a;--color-primary-700: #1b7e75;--color-primary-800: #125350;--color-primary-900: #09282b;--color-accent-500: #2dd4bf;--color-accent-600: #24a99a;--color-neutral-0: #000000;--color-neutral-50: #050816;--color-neutral-100: #0b1020;--color-neutral-200: #151a2e;--color-neutral-500: #6b7398;--color-neutral-700: #9aa2c3;--color-neutral-800: #c4c9e0;--color-neutral-900: #e4e8ff;--color-success: #2dd4bf;--color-warning: #ff8c42;--color-error: #ff4d6d;--color-info: #2dd4bf;--color-bg-primary: #050816;--color-bg-secondary: #0b1020;--color-bg-tertiary: #080c18;--color-bg-card: rgba(10, 15, 32, .7);--color-bg-card-hover: rgba(10, 15, 32, .85);--color-bg-overlay: rgba(5, 8, 22, .95);--color-border-default: rgba(45, 212, 191, .15);--color-border-hover: rgba(45, 212, 191, .3);--color-border-active: rgba(45, 212, 191, .45);--color-border-muted: rgba(154, 162, 195, .15);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--shadow-sm: 0 2px 8px rgba(5, 8, 22, .6);--shadow-md: 0 4px 16px rgba(5, 8, 22, .7);--shadow-lg: 0 8px 32px rgba(5, 8, 22, .8);--shadow-xl: 0 12px 48px rgba(5, 8, 22, .9);--shadow-glow-subtle: 0 0 8px rgba(45, 212, 191, .1);--shadow-glow-sm: 0 0 12px rgba(45, 212, 191, .15);--shadow-glow-md: 0 0 20px rgba(45, 212, 191, .2);--shadow-glow-lg: 0 0 30px rgba(45, 212, 191, .3);--shadow-card: 0 4px 16px rgba(5, 8, 22, .7), 0 0 12px rgba(45, 212, 191, .06);--shadow-card-hover: 0 8px 32px rgba(5, 8, 22, .85), 0 0 24px rgba(45, 212, 191, .15);--shadow-button: 0 4px 12px rgba(5, 8, 22, .5), 0 0 16px rgba(45, 212, 191, .2);--shadow-button-hover: 0 6px 20px rgba(5, 8, 22, .6), 0 0 24px rgba(45, 212, 191, .35);--gradient-card-soft: linear-gradient( 135deg, rgba(20, 26, 51, .95) 0%, rgba(11, 16, 32, .95) 100% );--gradient-card-hard: linear-gradient( 135deg, rgba(5, 8, 22, .98) 0%, rgba(16, 21, 40, .98) 100% );--gradient-primary: linear-gradient(135deg, #2dd4bf 0%, #24a99a 100%);--gradient-header: linear-gradient( 180deg, rgba(45, 212, 191, .06) 0%, transparent 100% );--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg)}.theme-vintage{--color-bg: #f5eedf;--color-surface: #fffdf7;--color-surface-alt: #f7f1e3;--color-surface-elevated: #ffffff;--app-header-bg: #ffffff;--color-text-primary: #2e2a25;--color-text-secondary: #5b5248;--color-text-muted: #8c8176;--color-accent: #c96f31;--color-accent-soft: rgba(201, 111, 49, .15);--color-accent-hover: rgba(201, 111, 49, .25);--color-border: rgba(120, 95, 66, .25);--color-glow: rgba(201, 111, 49, .12);--color-glow-strong: rgba(201, 111, 49, .18);--color-glow-subtle: rgba(201, 111, 49, .06);--color-alphatab-bg: #fffdf7;--color-alphatab-border: rgba(120, 95, 66, .2);--color-alphatab-text: #2e2a25;--color-alphatab-note: #000000;--color-alphatab-cursor: rgba(201, 111, 49, .55);--color-icon: #c96f31;--color-icon-muted: rgba(100, 80, 60, .6);--color-medal-bronze: #cd7f32;--color-medal-silver: #c0c0c0;--color-medal-gold: #ffd700;--color-medal-diamond: #4fd1c5;--color-not-trained-bg: rgba(120, 95, 66, .1);--color-not-trained-border: rgba(120, 95, 66, .25);--color-not-trained-text: rgba(120, 95, 66, .7);--color-not-trained-text-dark: rgba(120, 95, 66, .5);--font-primary: "Roboto", sans-serif;--color-primary-50: #fef5ed;--color-primary-100: #fce4d1;--color-primary-200: #f9d3b5;--color-primary-300: #f6c299;--color-primary-400: #f3b17d;--color-primary-500: #c96f31;--color-primary-600: #a15a28;--color-primary-700: #79451f;--color-primary-800: #513016;--color-primary-900: #291b0d;--color-accent-500: #c96f31;--color-accent-600: #a15a28;--color-neutral-0: #ffffff;--color-neutral-50: #fffdf7;--color-neutral-100: #fbf7ed;--color-neutral-200: #f5eedf;--color-neutral-500: #8c8176;--color-neutral-700: #5b5248;--color-neutral-800: #3d362f;--color-neutral-900: #2e2a25;--color-success: #8b6f47;--color-warning: #c96f31;--color-error: #7a2e2e;--color-info: #c96f31;--color-bg-primary: #f5eedf;--color-bg-secondary: #fbf7ed;--color-bg-tertiary: #efe7d7;--color-bg-card: rgba(255, 253, 247, .9);--color-bg-card-hover: rgba(255, 255, 255, .95);--color-bg-overlay: rgba(245, 238, 223, .95);--color-border-default: rgba(120, 95, 66, .25);--color-border-hover: rgba(201, 111, 49, .35);--color-border-active: rgba(201, 111, 49, .5);--color-border-muted: rgba(60, 45, 25, .08);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--shadow-sm: 0 2px 8px rgba(120, 95, 66, .15);--shadow-md: 0 4px 16px rgba(120, 95, 66, .2);--shadow-lg: 0 8px 32px rgba(120, 95, 66, .25);--shadow-xl: 0 12px 48px rgba(120, 95, 66, .3);--shadow-glow-subtle: 0 0 8px rgba(201, 111, 49, .08);--shadow-glow-sm: 0 0 12px rgba(201, 111, 49, .12);--shadow-glow-md: 0 0 20px rgba(201, 111, 49, .15);--shadow-glow-lg: 0 0 30px rgba(201, 111, 49, .2);--shadow-card: 0 4px 16px rgba(120, 95, 66, .15), 0 0 12px rgba(201, 111, 49, .05);--shadow-card-hover: 0 8px 32px rgba(120, 95, 66, .2), 0 0 24px rgba(201, 111, 49, .1);--shadow-button: 0 4px 12px rgba(120, 95, 66, .2), 0 0 16px rgba(201, 111, 49, .15);--shadow-button-hover: 0 6px 20px rgba(120, 95, 66, .25), 0 0 24px rgba(201, 111, 49, .2);--gradient-card-soft: linear-gradient( 135deg, rgba(255, 253, 247, .95) 0%, rgba(251, 247, 237, .95) 100% );--gradient-card-hard: linear-gradient( 135deg, rgba(255, 255, 255, .98) 0%, rgba(245, 238, 223, .98) 100% );--gradient-primary: linear-gradient(135deg, #c96f31 0%, #a15a28 100%);--gradient-header: linear-gradient( 180deg, rgba(201, 111, 49, .05) 0%, transparent 100% );--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg)}.title-xl{font-family:var(--font-heading);font-size:var(--font-size-5xl);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-tight);text-transform:uppercase}.title-l{font-family:var(--font-heading);font-size:var(--font-size-3xl);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-tight);text-transform:uppercase}.title-m{font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-tight);text-transform:uppercase}.body-m{font-family:var(--font-body);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-normal)}.body-s{font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-normal)}.theme-hello-kitty{--color-bg: #fff5f7;--color-surface: #ffffff;--color-surface-alt: #ffe6ef;--color-surface-elevated: #fff5f7;--app-header-bg: #ffffff;--color-text-primary: #1a1a1a;--color-text-secondary: #5a5a5a;--color-text-muted: #a8a8a8;--color-accent: #ff2d55;--color-accent-soft: rgba(255, 45, 85, .15);--color-accent-hover: rgba(255, 45, 85, .25);--color-border: rgba(0, 0, 0, .08);--color-glow: rgba(255, 183, 213, .35);--color-glow-strong: rgba(255, 45, 85, .4);--color-glow-subtle: rgba(255, 183, 213, .2);--color-alphatab-bg: #fff5f7;--color-alphatab-border: rgba(255, 45, 85, .35);--color-alphatab-text: #1a1a1a;--color-alphatab-note: #ff2d55;--color-alphatab-cursor: rgba(255, 45, 85, .5);--color-icon: #ff2d55;--color-icon-muted: rgba(168, 168, 168, .6);--color-medal-bronze: #d59a72;--color-medal-silver: #e5e5e5;--color-medal-gold: #ffcc4d;--color-medal-diamond: #b5e4ff;--color-not-trained-bg: rgba(168, 168, 168, .1);--color-not-trained-border: rgba(168, 168, 168, .25);--color-not-trained-text: rgba(160, 120, 70, .75);--color-not-trained-text-dark: rgba(140, 100, 50, .5);--font-primary: "Roboto", sans-serif;--color-primary-50: #fff5f7;--color-primary-100: #ffdde3;--color-primary-200: #ffb7d5;--color-primary-300: #ff91c7;--color-primary-400: #ff6bb9;--color-primary-500: #ff2d55;--color-primary-600: #e0244a;--color-primary-700: #c01b3f;--color-primary-800: #a01234;--color-primary-900: #800929;--color-accent-500: #ff2d55;--color-accent-600: #e0244a;--color-neutral-0: #ffffff;--color-neutral-50: #f8f8f8;--color-neutral-100: #f0f0f0;--color-neutral-200: #e0e0e0;--color-neutral-500: #a8a8a8;--color-neutral-700: #5a5a5a;--color-neutral-800: #3a3a3a;--color-neutral-900: #1a1a1a;--color-success: #b5e4ff;--color-warning: #ffcc4d;--color-error: #ff2d55;--color-info: #e7c6ff;--color-bg-primary: #fff5f7;--color-bg-secondary: #ffdde3;--color-bg-tertiary: #ffb7d5;--color-bg-card: #ffffff;--color-bg-card-hover: #ffe5ee;--color-bg-overlay: rgba(255, 183, 213, .35);--color-border-default: rgba(0, 0, 0, .08);--color-border-hover: rgba(255, 45, 85, .35);--color-border-active: rgba(255, 45, 85, .5);--color-border-muted: rgba(0, 0, 0, .04);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 12px;--radius-md: 16px;--radius-lg: 20px;--radius-xl: 24px;--radius-2xl: 28px;--radius-full: 9999px;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: .5px;--letter-spacing-wide: 1px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--shadow-sm: 0 2px 8px rgba(255, 45, 85, .1);--shadow-md: 0 4px 16px rgba(255, 45, 85, .15);--shadow-lg: 0 8px 24px rgba(255, 45, 85, .2);--shadow-xl: 0 12px 32px rgba(255, 45, 85, .25);--shadow-glow-subtle: 0 0 12px rgba(255, 183, 213, .35);--shadow-glow-sm: 0 0 16px rgba(255, 183, 213, .4);--shadow-glow-md: 0 0 24px rgba(255, 45, 85, .3);--shadow-glow-lg: 0 0 32px rgba(255, 45, 85, .4);--shadow-card: 0 4px 16px rgba(255, 45, 85, .1), 0 0 12px rgba(255, 183, 213, .2);--shadow-card-hover: 0 8px 24px rgba(255, 45, 85, .15), 0 0 20px rgba(255, 183, 213, .3);--shadow-button: 0 4px 12px rgba(255, 45, 85, .2), 0 0 16px rgba(255, 183, 213, .3);--shadow-button-hover: 0 6px 20px rgba(255, 45, 85, .25), 0 0 24px rgba(255, 183, 213, .4);--gradient-card-soft: linear-gradient(135deg, #ffffff 0%, #fff5f7 100%);--gradient-card-hard: linear-gradient(135deg, #ffffff 0%, #ffe6ef 100%);--gradient-primary: linear-gradient(135deg, #ff2d55 0%, #ff6bb9 100%);--gradient-header: linear-gradient( 180deg, rgba(255, 183, 213, .2) 0%, transparent 100% );--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg);--stroke-width: 2.2px;--stroke-width-icon: 2px;--cute-border-radius: 20px}.theme-kuromi{--color-bg: #050308;--color-surface: #151320;--color-surface-alt: #1f1c2b;--color-surface-elevated: #2b2738;--app-header-bg: rgba(0, 0, 0, .45);--color-text-primary: #f5f3fa;--color-text-secondary: #c9c2e3;--color-text-muted: #9188b2;--color-accent: #7e4cca;--color-accent-soft: rgba(126, 76, 202, .18);--color-accent-hover: rgba(126, 76, 202, .3);--color-border: rgba(126, 76, 202, .35);--color-glow: rgba(126, 76, 202, .25);--color-glow-strong: rgba(255, 79, 154, .35);--color-glow-subtle: rgba(126, 76, 202, .14);--color-alphatab-bg: #151320;--color-alphatab-border: rgba(126, 76, 202, .35);--color-alphatab-text: #f5f3fa;--color-alphatab-note: #ffffff;--color-alphatab-cursor: rgba(255, 79, 154, .65);--color-icon: #ff4f9a;--color-icon-muted: #9188b2;--color-medal-bronze: #b2794b;--color-medal-silver: #d8d8e8;--color-medal-gold: #f5d26b;--color-medal-diamond: #b8e4ff;--color-not-trained-bg: rgba(145, 136, 178, .1);--color-not-trained-border: rgba(145, 136, 178, .35);--color-not-trained-text: rgba(190, 150, 100, .8);--color-not-trained-text-dark: rgba(170, 130, 80, .6);--font-primary: "Roboto", sans-serif;--color-primary-50: #f5f3fa;--color-primary-100: #e7dff5;--color-primary-200: #d4c5eb;--color-primary-300: #bca5dd;--color-primary-400: #9f7fca;--color-primary-500: #7e4cca;--color-primary-600: #6a3fb0;--color-primary-700: #563496;--color-primary-800: #3a264f;--color-primary-900: #1f1c2b;--color-accent-500: #ff4f9a;--color-accent-600: #e03d7a;--color-neutral-0: #050308;--color-neutral-50: #151320;--color-neutral-100: #1f1c2b;--color-neutral-200: #2b2738;--color-neutral-500: #9188b2;--color-neutral-700: #c9c2e3;--color-neutral-800: #e7dff5;--color-neutral-900: #f5f3fa;--color-success: #7ede9e;--color-warning: #ffb24a;--color-error: #ff4f9a;--color-info: #7e4cca;--color-bg-primary: #151320;--color-bg-secondary: #151320;--color-bg-tertiary: #1f1c2b;--color-bg-card: rgba(21, 19, 32, .96);--color-bg-card-hover: rgba(31, 28, 43, .98);--color-bg-overlay: rgba(5, 3, 8, .9);--color-border-default: rgba(126, 76, 202, .35);--color-border-hover: rgba(255, 79, 154, .45);--color-border-active: rgba(255, 79, 154, .65);--color-border-muted: rgba(245, 243, 250, .08);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--radius-xl: 22px;--radius-2xl: 26px;--radius-full: 9999px;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .6);--shadow-md: 0 4px 16px rgba(0, 0, 0, .7);--shadow-lg: 0 8px 28px rgba(0, 0, 0, .85);--shadow-xl: 0 12px 40px rgba(0, 0, 0, .9);--shadow-glow-subtle: 0 0 10px rgba(126, 76, 202, .35);--shadow-glow-sm: 0 0 16px rgba(126, 76, 202, .45);--shadow-glow-md: 0 0 22px rgba(255, 79, 154, .45);--shadow-glow-lg: 0 0 32px rgba(255, 79, 154, .55);--shadow-card: 0 4px 16px rgba(0, 0, 0, .7), 0 0 12px rgba(126, 76, 202, .25);--shadow-card-hover: 0 8px 28px rgba(0, 0, 0, .85), 0 0 20px rgba(255, 79, 154, .35);--shadow-button: 0 4px 12px rgba(0, 0, 0, .6), 0 0 16px rgba(126, 76, 202, .35);--shadow-button-hover: 0 6px 20px rgba(0, 0, 0, .7), 0 0 24px rgba(255, 79, 154, .45);--gradient-card-soft: linear-gradient( 135deg, rgba(21, 19, 32, .96) 0%, rgba(31, 28, 43, .96) 100% );--gradient-card-hard: linear-gradient( 135deg, rgba(5, 3, 8, .98) 0%, rgba(21, 19, 32, .98) 100% );--gradient-primary: linear-gradient(135deg, #7e4cca 0%, #ff4f9a 100%);--gradient-header: linear-gradient( 180deg, rgba(126, 76, 202, .15) 0%, transparent 100% );--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg);--stroke-width: 2px;--stroke-width-icon: 2px;--stroke-width-fine: 1.5px}.theme-monochrome{--color-bg: #ffffff;--color-surface: #ffffff;--color-surface-alt: #f2f2f2;--color-surface-elevated: #e5e5e5;--app-header-bg: #ffffff;--color-text-primary: #000000;--color-text-secondary: #555555;--color-text-muted: #aaaaaa;--color-accent: #000000;--color-accent-soft: rgba(0, 0, 0, .1);--color-accent-hover: rgba(0, 0, 0, .2);--color-border: rgba(0, 0, 0, .15);--color-glow: rgba(0, 0, 0, .08);--color-glow-strong: rgba(0, 0, 0, .15);--color-glow-subtle: rgba(0, 0, 0, .05);--color-alphatab-bg: #ffffff;--color-alphatab-border: rgba(0, 0, 0, .15);--color-alphatab-text: #000000;--color-alphatab-note: #000000;--color-alphatab-cursor: rgba(0, 0, 0, .4);--color-icon: #000000;--color-icon-muted: #555555;--color-medal-bronze: #cd7f32;--color-medal-silver: #c0c0c0;--color-medal-gold: #ffd700;--color-medal-diamond: #4fd1c5;--color-not-trained-bg: rgba(0, 0, 0, .05);--color-not-trained-border: rgba(0, 0, 0, .15);--color-not-trained-text: rgba(140, 100, 50, .7);--color-not-trained-text-dark: rgba(120, 80, 40, .5);--font-primary: "Roboto", sans-serif;--color-primary-50: #f2f2f2;--color-primary-100: #e5e5e5;--color-primary-200: #d9d9d9;--color-primary-300: #cccccc;--color-primary-400: #aaaaaa;--color-primary-500: #555555;--color-primary-600: #333333;--color-primary-700: #1a1a1a;--color-primary-800: #0d0d0d;--color-primary-900: #000000;--color-accent-500: #000000;--color-accent-600: #000000;--color-neutral-0: #000000;--color-neutral-50: #0d0d0d;--color-neutral-100: #1a1a1a;--color-neutral-200: #333333;--color-neutral-500: #555555;--color-neutral-700: #aaaaaa;--color-neutral-800: #d9d9d9;--color-neutral-900: #ffffff;--color-success: #555555;--color-warning: #8c8c8c;--color-error: #000000;--color-info: #555555;--color-bg-primary: #ffffff;--color-bg-secondary: #f2f2f2;--color-bg-tertiary: #e5e5e5;--color-bg-card: #ffffff;--color-bg-card-hover: #f2f2f2;--color-bg-overlay: rgba(255, 255, 255, .95);--color-border-default: rgba(0, 0, 0, .15);--color-border-hover: rgba(0, 0, 0, .25);--color-border-active: rgba(0, 0, 0, .4);--color-border-muted: rgba(0, 0, 0, .08);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .2);--shadow-xl: 0 12px 48px rgba(0, 0, 0, .25);--shadow-glow-subtle: 0 0 8px rgba(0, 0, 0, .08);--shadow-glow-sm: 0 0 12px rgba(0, 0, 0, .12);--shadow-glow-md: 0 0 20px rgba(0, 0, 0, .18);--shadow-glow-lg: 0 0 30px rgba(0, 0, 0, .25);--shadow-card: 0 4px 16px rgba(0, 0, 0, .1), 0 0 8px rgba(0, 0, 0, .05);--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .15), 0 0 16px rgba(0, 0, 0, .1);--shadow-button: 0 4px 12px rgba(0, 0, 0, .15), 0 0 8px rgba(0, 0, 0, .1);--shadow-button-hover: 0 6px 20px rgba(0, 0, 0, .2), 0 0 12px rgba(0, 0, 0, .15);--gradient-card-soft: linear-gradient(135deg, #ffffff 0%, #f2f2f2 100%);--gradient-card-hard: linear-gradient(135deg, #ffffff 0%, #e5e5e5 100%);--gradient-primary: linear-gradient(135deg, #000000 0%, #555555 100%);--gradient-header: linear-gradient( 180deg, rgba(0, 0, 0, .05) 0%, transparent 100% );--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg)}.theme-sunburst{--color-bg: #120a05;--color-surface: #2f1807;--color-surface-alt: #3b1c08;--color-surface-elevated: #4a220b;--app-header-bg: rgba(0, 0, 0, .45);--color-text-primary: #f9eedc;--color-text-secondary: #d1bfa5;--color-text-muted: #a38662;--color-accent: #f08a24;--color-accent-soft: rgba(240, 138, 36, .18);--color-accent-hover: rgba(240, 138, 36, .28);--color-border: rgba(240, 138, 36, .35);--color-glow: rgba(240, 138, 36, .15);--color-glow-strong: rgba(240, 138, 36, .25);--color-glow-subtle: rgba(240, 138, 36, .08);--color-alphatab-bg: #f5e4c3;--color-alphatab-border: rgba(64, 38, 16, .35);--color-alphatab-text: #2b190c;--color-alphatab-note: #1a0e06;--color-alphatab-cursor: rgba(240, 138, 36, .7);--color-icon: #f08a24;--color-icon-muted: #b89264;--color-medal-bronze: #c27a3a;--color-medal-silver: #d8d8d8;--color-medal-gold: #f2c94c;--color-medal-diamond: #f9f4e5;--color-not-trained-bg: rgba(178, 140, 96, .16);--color-not-trained-border: rgba(178, 140, 96, .35);--color-not-trained-text: rgba(230, 206, 177, .8);--color-not-trained-text-dark: rgba(178, 140, 96, .6);--font-primary: "Roboto", sans-serif;--color-primary-50: #fff5e6;--color-primary-100: #ffe0b3;--color-primary-200: #ffcc80;--color-primary-300: #ffb84d;--color-primary-400: #ffa41a;--color-primary-500: #f08a24;--color-primary-600: #cc6f1e;--color-primary-700: #995418;--color-primary-800: #663912;--color-primary-900: #331d0c;--color-accent-500: #f08a24;--color-accent-600: #cc6f1e;--color-neutral-0: #000000;--color-neutral-50: #120a05;--color-neutral-100: #1e1107;--color-neutral-200: #2a1507;--color-neutral-500: #a38662;--color-neutral-700: #d1bfa5;--color-neutral-800: #e5d4c0;--color-neutral-900: #f9eedc;--color-success: #8b9a5b;--color-warning: #f08a24;--color-error: #c27a3a;--color-info: #f08a24;--color-bg-primary: #120a05;--color-bg-secondary: #1e1107;--color-bg-tertiary: #2a1507;--color-bg-card: rgba(31, 24, 7, .96);--color-bg-card-hover: rgba(47, 24, 7, .98);--color-bg-overlay: rgba(18, 10, 5, .95);--color-border-default: rgba(240, 138, 36, .35);--color-border-hover: rgba(240, 138, 36, .5);--color-border-active: rgba(240, 138, 36, .7);--color-border-muted: rgba(249, 238, 220, .12);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .5);--shadow-md: 0 4px 16px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .7);--shadow-xl: 0 12px 48px rgba(0, 0, 0, .8);--shadow-glow-subtle: 0 0 8px rgba(240, 138, 36, .15);--shadow-glow-sm: 0 0 12px rgba(240, 138, 36, .2);--shadow-glow-md: 0 0 20px rgba(240, 138, 36, .25);--shadow-glow-lg: 0 0 30px rgba(240, 138, 36, .3);--shadow-card: 0 4px 16px rgba(0, 0, 0, .6), 0 0 12px rgba(240, 138, 36, .1);--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .8), 0 0 24px rgba(240, 138, 36, .2);--shadow-button: 0 4px 12px rgba(0, 0, 0, .4), 0 0 16px rgba(240, 138, 36, .25);--shadow-button-hover: 0 6px 20px rgba(0, 0, 0, .5), 0 0 24px rgba(240, 138, 36, .35);--gradient-card-soft: linear-gradient( 135deg, rgba(47, 24, 7, .95) 0%, rgba(30, 17, 7, .95) 100% );--gradient-card-hard: linear-gradient( 135deg, rgba(18, 10, 5, .98) 0%, rgba(42, 21, 7, .98) 100% );--gradient-primary: linear-gradient(135deg, #f08a24 0%, #cc6f1e 100%);--gradient-header: linear-gradient( 180deg, rgba(240, 138, 36, .1) 0%, transparent 100% );--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg)}.theme-enhanced-forest{--color-bg: #071010;--color-surface: #0f2627;--color-surface-alt: #133033;--color-surface-elevated: #16393d;--app-header-bg: rgba(0, 0, 0, .45);--color-text-primary: #e8fdfc;--color-text-secondary: #a8cfcb;--color-text-muted: #6b8e8b;--color-accent: #2cc7a5;--color-accent-soft: rgba(44, 199, 165, .15);--color-accent-hover: rgba(44, 199, 165, .28);--color-border: rgba(44, 199, 165, .25);--color-glow: rgba(44, 199, 165, .15);--color-glow-strong: rgba(44, 199, 165, .25);--color-glow-subtle: rgba(44, 199, 165, .07);--color-alphatab-bg: #f2fffc;--color-alphatab-border: rgba(15, 40, 38, .25);--color-alphatab-text: #0b1716;--color-alphatab-note: #000000;--color-alphatab-cursor: rgba(44, 199, 165, .55);--color-icon: #2cc7a5;--color-icon-muted: #6b8e8b;--color-medal-bronze: #8a6a4a;--color-medal-silver: #dde3e4;--color-medal-gold: #f1d38b;--color-medal-diamond: #c8fff4;--color-not-trained-bg: rgba(107, 142, 139, .15);--color-not-trained-border: rgba(107, 142, 139, .35);--color-not-trained-text: rgba(210, 170, 120, .85);--color-not-trained-text-dark: rgba(180, 140, 90, .6);--font-primary: "Roboto", sans-serif;--color-primary-50: #e8fdfc;--color-primary-100: #c8fff4;--color-primary-200: #a8f5e8;--color-primary-300: #88ebdc;--color-primary-400: #68e1d0;--color-primary-500: #2cc7a5;--color-primary-600: #24a084;--color-primary-700: #1c7963;--color-primary-800: #145242;--color-primary-900: #0c2b21;--color-accent-500: #2cc7a5;--color-accent-600: #24a084;--color-neutral-0: #000000;--color-neutral-50: #071010;--color-neutral-100: #0b1a1a;--color-neutral-200: #0f2223;--color-neutral-500: #6b8e8b;--color-neutral-700: #a8cfcb;--color-neutral-800: #c8e5e2;--color-neutral-900: #e8fdfc;--color-success: #2cc7a5;--color-warning: #f1d38b;--color-error: #c27a3a;--color-info: #2cc7a5;--color-bg-primary: #071010;--color-bg-secondary: #0b1a1a;--color-bg-tertiary: #0f2223;--color-bg-card: rgba(15, 38, 39, .96);--color-bg-card-hover: rgba(19, 48, 51, .98);--color-bg-overlay: rgba(7, 16, 16, .95);--color-border-default: rgba(44, 199, 165, .25);--color-border-hover: rgba(44, 199, 165, .4);--color-border-active: rgba(44, 199, 165, .6);--color-border-muted: rgba(255, 255, 255, .08);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .5);--shadow-md: 0 4px 16px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .7);--shadow-xl: 0 12px 48px rgba(0, 0, 0, .8);--shadow-glow-subtle: 0 0 8px rgba(44, 199, 165, .15);--shadow-glow-sm: 0 0 12px rgba(44, 199, 165, .2);--shadow-glow-md: 0 0 20px rgba(44, 199, 165, .25);--shadow-glow-lg: 0 0 30px rgba(44, 199, 165, .3);--shadow-card: 0 4px 16px rgba(0, 0, 0, .6), 0 0 12px rgba(44, 199, 165, .1);--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .8), 0 0 24px rgba(44, 199, 165, .2);--shadow-button: 0 4px 12px rgba(0, 0, 0, .4), 0 0 16px rgba(44, 199, 165, .25);--shadow-button-hover: 0 6px 20px rgba(0, 0, 0, .5), 0 0 24px rgba(44, 199, 165, .35);--gradient-card-soft: linear-gradient( 135deg, rgba(26, 26, 26, .95) 0%, rgba(15, 15, 15, .95) 100% );--gradient-card-hard: linear-gradient( 135deg, rgba(10, 10, 10, .98) 0%, rgba(20, 20, 20, .98) 100% );--gradient-primary: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);--gradient-header: linear-gradient( 180deg, rgba(0, 255, 136, .08) 0%, transparent 100% );--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg)}.theme-gold{--color-bg: #0a0a0a;--color-bg-secondary: #111111;--color-bg-tertiary: #181818;--color-surface: #1a1a1a;--color-surface-alt: #202020;--color-surface-elevated: #262626;--app-header-bg: rgba(0, 0, 0, .45);--color-text-primary: #f5f5f5;--color-text-secondary: #cfcfcf;--color-text-muted: #9a9a9a;--color-accent: #d4af37;--color-accent-soft: rgba(212, 175, 55, .15);--color-accent-hover: rgba(212, 175, 55, .25);--color-border: rgba(212, 175, 55, .2);--color-border-hover: rgba(212, 175, 55, .35);--color-border-active: rgba(212, 175, 55, .5);--color-border-muted: rgba(255, 255, 255, .08);--color-glow: rgba(212, 175, 55, .2);--color-glow-strong: rgba(212, 175, 55, .45);--color-glow-subtle: rgba(212, 175, 55, .1);--color-alphatab-bg: #0f0f0f;--color-alphatab-border: rgba(212, 175, 55, .2);--color-alphatab-text: #e8e8e8;--color-alphatab-note: #ffffff;--color-alphatab-cursor: rgba(230, 199, 102, .6);--color-icon: #d4af37;--color-icon-muted: #777777;--color-medal-bronze: #cd7f32;--color-medal-silver: #c0c0c0;--color-medal-gold: #ffd700;--color-medal-diamond: #7df9ff;--color-not-trained-bg: rgba(154, 154, 154, .1);--color-not-trained-border: rgba(154, 154, 154, .25);--color-not-trained-text: rgba(160, 120, 70, .75);--color-not-trained-text-dark: rgba(140, 100, 50, .5);--font-primary: "Roboto", sans-serif;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--color-primary-50: #fff8db;--color-primary-100: #f8eab3;--color-primary-200: #f1dc8a;--color-primary-300: #eac062;--color-primary-400: #e0b34d;--color-primary-500: #d4af37;--color-primary-600: #c0992d;--color-primary-700: #a88924;--color-primary-800: #6f5c15;--color-primary-900: #3a3008;--color-accent-500: #d4af37;--color-accent-600: #b8922d;--color-neutral-0: #000000;--color-neutral-50: #0a0a0a;--color-neutral-100: #111111;--color-neutral-200: #1a1a1a;--color-neutral-500: #777777;--color-neutral-700: #cfcfcf;--color-neutral-800: #e8e8e8;--color-neutral-900: #ffffff;--color-success: #4caf50;--color-warning: #ffb300;--color-error: #e53935;--color-info: #29b6f6;--color-bg-primary: #0a0a0a;--color-bg-card: rgba(26, 26, 26, .9);--color-bg-card-hover: rgba(32, 32, 32, .95);--color-bg-overlay: rgba(0, 0, 0, .85);--color-border-default: rgba(212, 175, 55, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .5);--shadow-md: 0 4px 16px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .7);--shadow-xl: 0 12px 48px rgba(0, 0, 0, .8);--shadow-glow-subtle: 0 0 8px rgba(212, 175, 55, .15);--shadow-glow-sm: 0 0 12px rgba(212, 175, 55, .2);--shadow-glow-md: 0 0 20px rgba(212, 175, 55, .25);--shadow-glow-lg: 0 0 30px rgba(212, 175, 55, .3);--shadow-card: 0 4px 16px rgba(0, 0, 0, .6), 0 0 12px rgba(212, 175, 55, .1);--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .8), 0 0 24px rgba(212, 175, 55, .2);--shadow-button: 0 4px 12px rgba(0, 0, 0, .4), 0 0 16px rgba(212, 175, 55, .25);--shadow-button-hover: 0 6px 20px rgba(0, 0, 0, .5), 0 0 24px rgba(212, 175, 55, .35);--gradient-card-soft: linear-gradient(135deg, rgba(26, 26, 26, .95) 0%, rgba(17, 17, 17, .95) 100%);--gradient-card-hard: linear-gradient(135deg, rgba(10, 10, 10, .98) 0%, rgba(26, 26, 26, .98) 100%);--gradient-primary: linear-gradient(135deg, #e6c766 0%, #d4af37 100%);--gradient-header: linear-gradient(180deg, rgba(212, 175, 55, .08) 0%, transparent 100%);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg)}.theme-bear-pick{--color-bg: #FAF8F6;--color-bg-secondary: #FFFFFF;--color-bg-tertiary: #F5F2EF;--color-surface: #FFFFFF;--color-surface-alt: #FAF8F6;--color-surface-elevated: #FFFFFF;--app-header-bg: #ffffff;--color-text-primary: #2B1811;--color-text-secondary: #5B4A42;--color-text-muted: #8B7A72;--color-accent: #6B3F2A;--color-accent-soft: rgba(107, 63, 42, .12);--color-accent-hover: rgba(107, 63, 42, .2);--color-border: rgba(107, 63, 42, .15);--color-border-hover: rgba(107, 63, 42, .28);--color-border-active: rgba(107, 63, 42, .4);--color-border-muted: rgba(107, 63, 42, .08);--color-glow: rgba(107, 63, 42, .1);--color-glow-strong: rgba(107, 63, 42, .18);--color-glow-subtle: rgba(107, 63, 42, .05);--color-alphatab-bg: #FFFFFF;--color-alphatab-border: rgba(107, 63, 42, .15);--color-alphatab-text: #2B1811;--color-alphatab-note: #000000;--color-alphatab-cursor: rgba(200, 162, 74, .5);--color-icon: #6B3F2A;--color-icon-muted: #8B7A72;--color-medal-bronze: #CD7F32;--color-medal-silver: #8A9AAA;--color-medal-gold: #C8A24A;--color-medal-platinum: #20B2AA;--color-medal-diamond: #6A4EC0;--color-medal-master: #8B3DC0;--color-not-trained-bg: rgba(107, 63, 42, .06);--color-not-trained-border: rgba(107, 63, 42, .18);--color-not-trained-text: rgba(107, 63, 42, .65);--color-not-trained-text-dark: rgba(107, 63, 42, .45);--font-primary: "Roboto", sans-serif;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--color-primary: #6B3F2A;--color-primary-50: #FAF4F1;--color-primary-100: #F2E6E0;--color-primary-200: #E5CEC4;--color-primary-300: #D4AF9E;--color-primary-400: #B98572;--color-primary-500: #6B3F2A;--color-primary-600: #5B3523;--color-primary-700: #4A2B1D;--color-primary-800: #3A2217;--color-primary-900: #2B1811;--color-accent-500: #C8A24A;--color-accent-600: #B18D3F;--color-neutral-0: #FFFFFF;--color-neutral-50: #FAF8F6;--color-neutral-100: #F5F2EF;--color-neutral-200: #E8E4E0;--color-neutral-500: #8B7A72;--color-neutral-700: #5B4A42;--color-neutral-800: #3A2E28;--color-neutral-900: #2B1811;--color-success: #2E7D57;--color-warning: #C28A2C;--color-error: #B23B3B;--color-info: #3E63A8;--color-bg-primary: #FAF8F6;--color-bg-card: rgba(255, 255, 255, .9);--color-bg-card-hover: rgba(255, 255, 255, 1);--color-bg-overlay: rgba(250, 248, 246, .95);--color-border-default: rgba(107, 63, 42, .12);--shadow-sm: 0 2px 8px rgba(107, 63, 42, .08);--shadow-md: 0 4px 16px rgba(107, 63, 42, .1);--shadow-lg: 0 8px 32px rgba(107, 63, 42, .12);--shadow-xl: 0 12px 48px rgba(107, 63, 42, .15);--shadow-glow-subtle: 0 0 8px rgba(107, 63, 42, .08);--shadow-glow-sm: 0 0 12px rgba(107, 63, 42, .12);--shadow-glow-md: 0 0 20px rgba(107, 63, 42, .15);--shadow-glow-lg: 0 0 30px rgba(107, 63, 42, .2);--shadow-card: 0 4px 16px rgba(107, 63, 42, .1), 0 0 12px rgba(107, 63, 42, .05);--shadow-card-hover: 0 8px 32px rgba(107, 63, 42, .15), 0 0 24px rgba(107, 63, 42, .1);--shadow-button: 0 4px 12px rgba(107, 63, 42, .12), 0 0 16px rgba(200, 162, 74, .15);--shadow-button-hover: 0 6px 20px rgba(107, 63, 42, .18), 0 0 24px rgba(200, 162, 74, .22);--gradient-card-soft: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(250, 248, 246, .95) 100%);--gradient-card-hard: linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(245, 242, 239, .98) 100%);--gradient-primary: linear-gradient(135deg, #6B3F2A 0%, #5B3523 100%);--gradient-header: linear-gradient(180deg, rgba(107, 63, 42, .03) 0%, transparent 100%);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg)}.theme-bear-pick-dark{--color-bg: #121010;--color-bg-secondary: #1A1614;--color-bg-tertiary: #0F0D0C;--color-surface: #1A1614;--color-surface-alt: #211D1A;--color-surface-elevated: #262220;--app-header-bg: rgba(0, 0, 0, .45);--color-text-primary: #F5F0EB;--color-text-secondary: #BDB3A8;--color-text-muted: #8A8078;--color-accent: #C8A24A;--color-accent-soft: rgba(200, 162, 74, .15);--color-accent-hover: rgba(200, 162, 74, .25);--color-border: rgba(200, 162, 74, .2);--color-border-hover: rgba(200, 162, 74, .35);--color-border-active: rgba(200, 162, 74, .5);--color-border-muted: rgba(200, 162, 74, .1);--color-glow: rgba(200, 162, 74, .15);--color-glow-strong: rgba(200, 162, 74, .3);--color-glow-subtle: rgba(200, 162, 74, .08);--color-alphatab-bg: #1A1614;--color-alphatab-border: rgba(200, 162, 74, .2);--color-alphatab-text: #F5F0EB;--color-alphatab-note: #FFFFFF;--color-alphatab-cursor: rgba(200, 162, 74, .55);--color-icon: #C8A24A;--color-icon-muted: #8A8078;--color-medal-bronze: #CD7F32;--color-medal-silver: #A8B4C4;--color-medal-gold: #C8A24A;--color-medal-platinum: #25CED1;--color-medal-diamond: #7C5CFF;--color-medal-master: #9D4EDD;--color-not-trained-bg: rgba(200, 162, 74, .08);--color-not-trained-border: rgba(200, 162, 74, .2);--color-not-trained-text: rgba(200, 162, 74, .65);--color-not-trained-text-dark: rgba(200, 162, 74, .45);--font-primary: "Roboto", sans-serif;--font-heading: "Roboto", sans-serif;--font-body: "Roboto", sans-serif;--color-primary: #C8A24A;--color-primary-50: #FFFBF0;--color-primary-100: #FFF3D6;--color-primary-200: #FBE5AA;--color-primary-300: #F2D27E;--color-primary-400: #E1B85D;--color-primary-500: #C8A24A;--color-primary-600: #B18D3F;--color-primary-700: #917236;--color-primary-800: #725A2C;--color-primary-900: #544221;--color-accent-500: #C8A24A;--color-accent-600: #B18D3F;--color-neutral-0: #000000;--color-neutral-50: #0F0D0C;--color-neutral-100: #1A1614;--color-neutral-200: #262220;--color-neutral-500: #8A8078;--color-neutral-700: #BDB3A8;--color-neutral-800: #DDD5CC;--color-neutral-900: #F5F0EB;--color-success: #4ADE80;--color-warning: #F59E0B;--color-error: #EF4444;--color-info: #60A5FA;--color-bg-primary: #121010;--color-bg-card: rgba(26, 22, 20, .85);--color-bg-card-hover: rgba(33, 29, 26, .9);--color-bg-overlay: rgba(18, 16, 16, .95);--color-border-default: rgba(200, 162, 74, .18);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .5);--shadow-md: 0 4px 16px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .7);--shadow-xl: 0 12px 48px rgba(0, 0, 0, .8);--shadow-glow-subtle: 0 0 8px rgba(200, 162, 74, .12);--shadow-glow-sm: 0 0 12px rgba(200, 162, 74, .18);--shadow-glow-md: 0 0 20px rgba(200, 162, 74, .25);--shadow-glow-lg: 0 0 30px rgba(200, 162, 74, .35);--shadow-card: 0 4px 16px rgba(0, 0, 0, .6), 0 0 12px rgba(200, 162, 74, .08);--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .75), 0 0 24px rgba(200, 162, 74, .15);--shadow-button: 0 4px 12px rgba(0, 0, 0, .4), 0 0 16px rgba(200, 162, 74, .2);--shadow-button-hover: 0 6px 20px rgba(0, 0, 0, .5), 0 0 24px rgba(200, 162, 74, .3);--gradient-card-soft: linear-gradient(135deg, rgba(26, 22, 20, .95) 0%, rgba(15, 13, 12, .95) 100%);--gradient-card-hard: linear-gradient(135deg, rgba(18, 16, 16, .98) 0%, rgba(26, 22, 20, .98) 100%);--gradient-primary: linear-gradient(135deg, #C8A24A 0%, #B18D3F 100%);--gradient-header: linear-gradient(180deg, rgba(200, 162, 74, .06) 0%, transparent 100%);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 48px;--spacing-4xl: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--font-size-4xl: 32px;--font-size-5xl: 48px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 900;--letter-spacing-tight: .5px;--letter-spacing-normal: 1px;--letter-spacing-wide: 2px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.8;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--z-base: 1;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-tooltip: 500;--page-max-width: 1400px;--page-padding: var(--spacing-lg)}.profile-header-title,.lesson-player-header-title,.lesson-list-header-title,.lessons-header-title,.pathway-header-v2-title,.path-hero__title,.page-header-title,.challenges-header-title,.community-header-title{color:#ff6e00!important;text-shadow:0 0 20px rgba(255,110,0,.25)!important}.profile-header-title-section,.lesson-player-header-title-section,.lessons-header-title-section,.pathway-header-v2-title-section{border-left-color:#ff6e00!important}.profile-header,.lesson-player-header,.lesson-list-header,.lessons-list-header,.pathway-header-v2,.page-header{--color-accent: #ff6e00;--color-glow: rgba(255, 110, 0, .15);--color-glow-subtle: rgba(255, 110, 0, .08)}*{margin:0;padding:0;box-sizing:border-box}input,textarea,select{font-size:16px}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-bg);color:var(--color-text-primary);overflow-x:hidden;transition:background-color .3s ease,color .3s ease}#root{min-height:100vh}.hidden-placeholder{display:none!important}.grecaptcha-badge{visibility:hidden!important;opacity:0!important;pointer-events:none!important}body.show-recaptcha-badge .grecaptcha-badge{visibility:visible!important;opacity:1!important;pointer-events:auto!important}:root{--gb-ease-spring: cubic-bezier(.16, 1, .3, 1);--gb-ease-out: cubic-bezier(.33, 1, .68, 1);--gb-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--gb-dur-tooltip: .15s;--gb-dur-fast: .18s;--gb-dur-normal: .22s;--gb-dur-slow: .3s}@keyframes gb-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes gb-overlay-out{0%{opacity:1}to{opacity:0}}@keyframes gb-modal-in{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gb-modal-pop{0%{opacity:0;transform:scale(.85) translateY(16px)}60%{opacity:1;transform:scale(1.02) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes gb-popup-in{0%{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gb-popup-up{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes gb-sheet-up{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes gb-tooltip-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes gb-stagger-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes gb-stagger-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes gb-press{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}@keyframes gb-fade-in{0%{opacity:0}to{opacity:1}}.gb-hover-lift{transition:transform var(--gb-dur-fast) var(--gb-ease-spring),box-shadow var(--gb-dur-fast) var(--gb-ease-out)}.gb-hover-lift:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000026,0 2px 8px #0000001a}.gb-hover-lift:active{transform:translateY(0)}.gb-hover-glow{transition:box-shadow var(--gb-dur-fast) var(--gb-ease-out)}.gb-hover-glow:hover{box-shadow:0 0 0 3px var(--color-accent-soft, rgba(16, 185, 129, .15))}.gb-press-effect{transition:transform .1s var(--gb-ease-spring)}.gb-press-effect:active{transform:scale(.97)}.gb-close-spin{transition:transform var(--gb-dur-fast) var(--gb-ease-spring),background var(--gb-dur-fast) ease,color var(--gb-dur-fast) ease}.gb-close-spin:hover{transform:rotate(90deg)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}