:root{--bg-void:#05070f;--bg-deep:#0a0e1a;--bg-panel:#0c1020b8;--bg-panel-hover:#121830d9;--bg-glass:#ffffff08;--bg-glass-hover:#ffffff0f;--teal:#00ffe0;--teal-dim:#00ccb3;--teal-glow:#00ffe059;--violet:#8b5cf6;--violet-dim:#7046d6;--violet-glow:#8b5cf659;--pink:#ec4899;--amber:#f59e0b;--text-primary:#e8ecf4;--text-secondary:#e8ecf48c;--text-muted:#e8ecf44d;--border-glass:#ffffff12;--border-glow:#00ffe033;--gradient-neon:linear-gradient(135deg, var(--teal), var(--violet));--gradient-bar:linear-gradient(90deg, var(--teal), var(--violet), var(--pink));--shadow-deep:0 8px 32px #0009, 0 2px 8px #0006;--shadow-neon:0 0 20px var(--teal-glow), 0 0 60px #00ffe01a;--shadow-card:0 4px 20px #0006;--font-body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-display:"Orbitron", monospace;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--ease-out:cubic-bezier(.22, 1, .36, 1);--transition-fast:.15s var(--ease-out);--transition-normal:.3s var(--ease-out);--transition-slow:.5s var(--ease-out)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{font-family:var(--font-body);background:var(--bg-void);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}button{cursor:pointer;color:inherit;background:0 0;border:none;outline:none;font-family:inherit}input{color:inherit;background:0 0;border:none;outline:none;font-family:inherit}.starfield{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.starfield canvas{width:100%;height:100%}.starfield:after{content:"";background:radial-gradient(60% 40% at 20% 80%,#00ffe00a,#0000),radial-gradient(50% 50% at 80% 20%,#8b5cf60a,#0000),radial-gradient(70% 60%,#05070f80,#0000);position:absolute;inset:0}.app{z-index:1;flex-direction:column;width:100%;height:100vh;display:flex;position:relative}.app-minimal{justify-content:center;align-items:center;padding:0}.player-panel-full{flex-direction:column;width:100vw;max-width:none;height:100vh;display:flex;position:relative}.app-minimal .video-container{aspect-ratio:auto;border:none;border-radius:0;flex:1}.app-minimal .controls-bar{z-index:20;background:#05070f80;border:none;border-top:1px solid #ffffff0d;border-radius:0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1);position:absolute;bottom:0;left:0;right:0}.top-blur-bar{-webkit-backdrop-filter:blur(24px);z-index:10;pointer-events:none;background:linear-gradient(#05070fb3 0%,#0000 100%);height:200px;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0;right:0;-webkit-mask-image:linear-gradient(#000 30%,#0000 100%);mask-image:linear-gradient(#000 30%,#0000 100%)}.player-panel-full.is-idle{cursor:none}.player-panel-full.is-idle .controls-bar{opacity:0;pointer-events:none;transform:translateY(100%)}.player-panel-full.is-idle .top-blur-bar,.player-panel-full.is-idle .top-header-area{opacity:0;transform:translateY(-100%)}.player-panel-full.is-idle .state-badge,.player-panel-full.is-idle .speed-badge,.player-panel-full.is-idle .quality-badge{opacity:0;transition:opacity .4s}.top-header-area{z-index:20;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1);position:absolute;top:24px;left:24px}.top-back-button{-webkit-backdrop-filter:blur(8px);cursor:pointer;color:#fff;width:44px;height:44px;transition:background .2s ease, transform var(--transition-bounce);background:#ffffff1a;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;display:flex}.top-back-button:hover{background:#fff3;transform:scale(1.05)}.top-back-button:active{transform:scale(.95)}.top-back-button svg{fill:currentColor;width:24px;height:24px}.app-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-glass);background:#05070f99;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 24px;display:flex}.app-logo{align-items:center;gap:12px;display:flex}.app-logo-icon{background:var(--gradient-neon);width:32px;height:32px;box-shadow:0 0 16px var(--teal-glow);border-radius:50%;justify-content:center;align-items:center;animation:3s ease-in-out infinite pulse-glow;display:flex}.app-logo-icon svg{width:14px;height:14px;fill:var(--bg-void)}.app-logo-text{font-family:var(--font-display);letter-spacing:2px;text-transform:uppercase;background:var(--gradient-neon);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:14px;font-weight:600}.url-input-wrapper{background:var(--bg-panel);border:1px solid var(--border-glass);border-radius:var(--radius-lg);width:100%;max-width:460px;transition:border-color var(--transition-normal), box-shadow var(--transition-normal);align-items:center;gap:8px;padding:6px 8px 6px 16px;display:flex}.url-input-wrapper:focus-within{border-color:var(--teal);box-shadow:0 0 20px #00ffe01a}.url-input-wrapper input{letter-spacing:.3px;flex:1;min-width:0;font-size:13px}.url-input-wrapper input::placeholder{color:var(--text-muted)}.url-input-btn{border-radius:var(--radius-sm);background:var(--gradient-neon);color:var(--bg-void);letter-spacing:1px;text-transform:uppercase;transition:opacity var(--transition-fast), transform var(--transition-fast);white-space:nowrap;padding:7px 16px;font-size:12px;font-weight:600}.url-input-btn:hover{opacity:.9;transform:scale(1.03)}.url-input-btn:active{transform:scale(.97)}.app-content{flex:1;gap:16px;padding:16px;display:flex;overflow:hidden}.player-panel{flex-direction:column;flex:1;gap:0;min-width:0;display:flex}.video-container{aspect-ratio:16/9;border-radius:var(--radius-xl);border:1px solid var(--border-glass);width:100%;box-shadow:var(--shadow-deep), var(--shadow-neon);background:#000;flex-shrink:0;position:relative;overflow:hidden}.video-container iframe{border:none;width:100%;height:100%;position:absolute;inset:0}.video-overlay{z-index:5;cursor:pointer;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-overlay-play{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;width:72px;height:72px;transition:opacity var(--transition-normal), transform var(--transition-normal);background:#00000080;border:2px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;display:flex;transform:scale(.8)}.video-overlay:hover .video-overlay-play,.video-container.is-paused .video-overlay-play{opacity:1;transform:scale(1)}.video-overlay-play svg{fill:#fff;width:28px;height:28px;margin-left:3px}.buffering-indicator{z-index:15;-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity var(--transition-normal);background:#00000080;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.buffering-indicator.active{opacity:1}.spinner{border:3px solid #0000;border-top-color:var(--teal);border-left-color:var(--violet);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}.player-mount{z-index:1;pointer-events:none;position:absolute;inset:0}.player-mount div,.player-mount iframe{width:100%!important;height:100%!important}.state-badge{z-index:10;letter-spacing:1.5px;text-transform:uppercase;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:all var(--transition-normal);border:1px solid #ffffff1a;border-radius:20px;padding:4px 12px;font-size:10px;font-weight:600;position:absolute;top:34px;left:88px}.state-badge.playing{color:var(--teal);background:#00ffe026;box-shadow:0 0 12px #00ffe033}.state-badge.paused{color:var(--violet);background:#8b5cf626}.state-badge.buffering{color:var(--amber);background:#f59e0b26}.state-badge.ended{color:var(--pink);background:#ec489926}.speed-badge{z-index:10;letter-spacing:1px;font-size:10px;font-weight:600;font-family:var(--font-display);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--text-secondary);opacity:0;transition:all var(--transition-normal);background:#ffffff0f;border:1px solid #ffffff14;border-radius:20px;padding:4px 10px;position:absolute;top:14px;right:14px;transform:translateY(-4px)}.speed-badge.visible{opacity:1;transform:translateY(0)}.controls-bar{z-index:20;background:var(--bg-panel);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border-glass);border-radius:0 0 var(--radius-xl) var(--radius-xl);border-top:none;flex-direction:column;gap:12px;padding:12px 20px 16px;display:flex;position:relative}.seek-bar-wrapper{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;height:18px;display:flex;position:relative}.seek-bar-track{width:100%;height:4px;transition:height var(--transition-fast);background:#ffffff14;border-radius:2px;position:relative;overflow:visible}.seek-bar-wrapper:hover .seek-bar-track{height:6px}.seek-bar-buffered{background:#ffffff1a;border-radius:2px;height:100%;transition:width .3s linear;position:absolute;top:0;left:0}.seek-bar-progress{background:var(--gradient-bar);height:100%;box-shadow:0 0 8px var(--teal-glow);border-radius:2px;transition:width .1s linear;position:absolute;top:0;left:0}.seek-bar-thumb{width:14px;height:14px;box-shadow:0 0 10px var(--teal-glow), 0 2px 6px #00000080;transition:transform var(--transition-fast);background:#fff;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)scale(0)}.seek-bar-wrapper:hover .seek-bar-thumb{transform:translate(-50%,-50%)scale(1)}.controls-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.controls-left,.controls-center,.controls-right{align-items:center;gap:4px;display:flex}.controls-center{gap:8px}.ctrl-btn{border-radius:var(--radius-sm);width:36px;height:36px;transition:background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);color:var(--text-secondary);justify-content:center;align-items:center;display:flex;position:relative}.ctrl-btn:hover{background:var(--bg-glass-hover);color:var(--text-primary);transform:scale(1.05)}.ctrl-btn:active{transform:scale(.95)}.ctrl-btn svg{fill:currentColor;width:18px;height:18px}.ctrl-btn.active{color:var(--teal)}.ctrl-btn-play{background:var(--gradient-neon);width:44px;height:44px;box-shadow:0 0 16px var(--teal-glow);transition:transform var(--transition-fast), box-shadow var(--transition-fast);border-radius:50%;color:var(--bg-void)!important}.ctrl-btn-play:hover{background:var(--gradient-neon);box-shadow:0 0 24px var(--teal-glow);transform:scale(1.1)}.ctrl-btn-play svg{width:20px;height:20px}.time-display{font-size:12px;font-family:var(--font-display);letter-spacing:1px;color:var(--text-secondary);white-space:nowrap;min-width:fit-content;padding:0 8px}.time-display .current{color:var(--teal)}.time-display .separator{color:var(--text-muted);margin:0 4px}.volume-control{align-items:center;gap:4px;display:flex}.volume-slider-wrapper{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;width:80px;height:24px;display:flex}.volume-slider-track{background:#ffffff1a;border-radius:2px;width:100%;height:3px;position:relative}.volume-slider-fill{background:var(--teal);height:100%;box-shadow:0 0 6px var(--teal-glow);border-radius:2px;position:absolute;top:0;left:0}.speed-menu-wrapper{position:relative}.speed-menu{background:var(--bg-panel);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border-glass);border-radius:var(--radius-md);min-width:90px;box-shadow:var(--shadow-deep);z-index:50;animation:fadeInUp .2s var(--ease-out);flex-direction:column;gap:2px;padding:6px;display:flex;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.speed-option{border-radius:var(--radius-sm);text-align:center;transition:background var(--transition-fast), color var(--transition-fast);color:var(--text-secondary);padding:6px 12px;font-size:12px;font-weight:500}.speed-option:hover{background:var(--bg-glass-hover);color:var(--text-primary)}.speed-option.active{color:var(--teal);background:#00ffe01a}.quality-menu{min-width:120px;max-height:280px;overflow-y:auto}.quality-menu::-webkit-scrollbar{width:3px}.quality-menu::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.quality-badge{z-index:10;letter-spacing:1px;font-size:10px;font-weight:600;font-family:var(--font-display);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--violet);opacity:0;transition:all var(--transition-normal);background:#8b5cf626;border:1px solid #8b5cf633;border-radius:20px;padding:4px 10px;position:absolute;top:14px;right:14px;transform:translateY(-4px)}.quality-badge.visible{opacity:1;transform:translateY(0)}.queue-panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border-glass);border-radius:var(--radius-xl);flex-direction:column;flex-shrink:0;width:340px;display:flex;overflow:hidden}.queue-header{border-bottom:1px solid var(--border-glass);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.queue-header h2{font-family:var(--font-display);letter-spacing:2px;text-transform:uppercase;background:var(--gradient-neon);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:12px;font-weight:600}.queue-count{color:var(--text-muted);letter-spacing:.5px;font-size:11px}.queue-list{flex-direction:column;flex:1;gap:6px;padding:8px;display:flex;overflow-y:auto}.queue-list::-webkit-scrollbar{width:4px}.queue-list::-webkit-scrollbar-track{background:0 0}.queue-list::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:2px}.queue-card{border-radius:var(--radius-md);background:var(--bg-glass);cursor:pointer;transition:all var(--transition-normal);animation:floatIn .5s var(--ease-out) both;border:1px solid #0000;align-items:center;gap:12px;padding:10px 12px;display:flex;position:relative;overflow:hidden}.queue-card:before{content:"";background:var(--gradient-neon);opacity:0;transition:opacity var(--transition-normal);position:absolute;inset:0}.queue-card:hover{background:var(--bg-glass-hover);border-color:var(--border-glow);box-shadow:var(--shadow-card);transform:translate(4px)}.queue-card:hover:before{opacity:.03}.queue-card.active{background:#00ffe00f;border-color:#00ffe033;box-shadow:0 0 20px #00ffe014}.queue-card-index{font-family:var(--font-display);color:var(--text-muted);text-align:center;z-index:1;min-width:20px;font-size:11px}.queue-card.active .queue-card-index{color:var(--teal)}.queue-equalizer{justify-content:center;align-items:flex-end;gap:2px;min-width:20px;height:14px;display:flex}.queue-equalizer span{background:var(--teal);border-radius:1px;width:3px;animation:.6s ease-in-out infinite equalizerBar}.queue-equalizer span:first-child{height:40%;animation-delay:0s}.queue-equalizer span:nth-child(2){height:70%;animation-delay:.15s}.queue-equalizer span:nth-child(3){height:50%;animation-delay:.3s}.queue-equalizer span:nth-child(4){height:80%;animation-delay:.1s}.queue-card-thumb{z-index:1;background:#ffffff0a;border-radius:6px;flex-shrink:0;width:64px;height:36px;position:relative;overflow:hidden}.queue-card-thumb img{object-fit:cover;width:100%;height:100%}.queue-card-info{z-index:1;flex:1;min-width:0}.queue-card-title{white-space:nowrap;text-overflow:ellipsis;color:var(--text-primary);font-size:12px;font-weight:500;line-height:1.4;overflow:hidden}.queue-card-id{color:var(--text-muted);font-size:10px;font-family:var(--font-display);letter-spacing:.5px;margin-top:2px}.queue-card-remove{opacity:0;width:24px;height:24px;transition:opacity var(--transition-fast), background var(--transition-fast);z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.queue-card:hover .queue-card-remove{opacity:1}.queue-card-remove:hover{color:var(--pink);background:#ec489926}.queue-card-remove svg{fill:currentColor;width:12px;height:12px}.queue-empty{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:40px 20px;display:flex}.queue-empty-icon{background:var(--bg-glass);border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;animation:4s ease-in-out infinite float;display:flex}.queue-empty-icon svg{width:20px;height:20px;fill:var(--text-muted)}.queue-empty-text{color:var(--text-muted);font-size:12px;line-height:1.6}.shortcuts-hint{align-items:center;gap:6px;padding:0 8px;display:flex}.kbd{background:var(--bg-glass);border:1px solid var(--border-glass);min-width:22px;height:20px;color:var(--text-muted);font-size:10px;font-weight:500;font-family:var(--font-display);border-radius:4px;justify-content:center;align-items:center;padding:0 5px;display:inline-flex}.no-video{z-index:10;background:var(--bg-deep);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.no-video-icon{border:1px solid var(--border-glass);background:#ffffff08;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;animation:5s ease-in-out infinite float;display:flex}.no-video-icon svg{width:32px;height:32px;fill:var(--text-muted)}.no-video-text{color:var(--text-muted);letter-spacing:1px;font-size:14px}.no-video-subtitle{color:var(--text-muted);opacity:.5;font-size:11px}.no-video-subtitle code{font-family:var(--font-display);color:var(--teal);background:#00ffe014;border:1px solid #00ffe026;border-radius:4px;padding:2px 7px;font-size:10px}.toast{border-radius:var(--radius-lg);background:var(--bg-panel);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border-glow);color:var(--teal);letter-spacing:.5px;box-shadow:0 0 20px var(--teal-glow);z-index:1000;opacity:0;pointer-events:none;transition:opacity var(--transition-normal), transform var(--transition-normal);padding:10px 20px;font-size:12px;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(20px)}.toast.visible{opacity:1;transform:translate(-50%)translateY(0)}@keyframes pulse-glow{0%,to{box-shadow:0 0 16px var(--teal-glow)}50%{box-shadow:0 0 28px var(--teal-glow), 0 0 48px #00ffe026}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes floatIn{0%{opacity:0;transform:translateY(8px)translate(-4px)}to{opacity:1;transform:translateY(0)translate(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes equalizerBar{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@media (width<=960px){.app-content{flex-direction:column;overflow-y:auto}.queue-panel{width:100%;max-height:300px}.video-container{aspect-ratio:16/9}.app-header{flex-wrap:wrap;gap:10px}.url-input-wrapper{order:3;max-width:100%}}@media (width<=640px){.app-content{gap:8px;padding:8px}.app-header{padding:10px 12px}.controls-bar{padding:8px 12px 12px}.controls-row{flex-wrap:wrap;justify-content:center;gap:4px}.controls-left,.controls-right{flex-wrap:wrap;justify-content:center}.time-display{font-size:10px}.volume-slider-wrapper{width:60px}.queue-panel{max-height:250px}.shortcuts-hint{display:none}}.app.is-fullscreen .app-header,.app.is-fullscreen .queue-panel{display:none}.app.is-fullscreen .app-content{padding:0}.app.is-fullscreen .player-panel{height:100%}.app.is-fullscreen .video-container{aspect-ratio:unset;border-radius:0;flex:1}.app.is-fullscreen .controls-bar{z-index:20;opacity:0;transition:opacity var(--transition-normal);border-radius:0;position:absolute;bottom:0;left:0;right:0}.app.is-fullscreen .player-panel{position:relative}.app.is-fullscreen .player-panel:hover .controls-bar{opacity:1}