:root{--primary: #6366f1;--primary-hover: #4f46e5;--bg: #0f172a;--fg: #f8fafc;--glass: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-hover: rgba(255, 255, 255, .1);--font: "Inter", system-ui, -apple-system, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}.glass{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:16px}button{cursor:pointer;border:none;font-family:inherit;transition:all .2s ease}input{background:transparent;border:none;color:inherit;font-family:inherit;outline:none;width:100%}.container{max-width:1200px;margin:0 auto;padding:2rem;padding-top:calc(2rem + var(--safe-top));padding-left:calc(2rem + var(--safe-left));padding-right:calc(2rem + var(--safe-right));display:flex;flex-direction:column;gap:2rem;min-height:100vh}.header{text-align:center;position:relative;z-index:10}.header h1{font-size:3rem;font-weight:800;background:linear-gradient(to right,#818cf8,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.header p{color:#94a3b8;font-size:1.1rem}.main{display:flex;flex-direction:column;gap:2rem}.input-group{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.input-row{display:flex;align-items:center;gap:1rem;background:#0003;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--glass-border)}.icon{color:#64748b}.btn-primary{background:var(--primary);color:#fff;padding:.75rem 1.5rem;border-radius:12px;font-weight:600;display:flex;align-items:center;gap:.5rem;box-shadow:0 4px 12px #6366f14d}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.divider{display:flex;align-items:center;color:#64748b;font-size:.8rem;font-weight:700;text-transform:uppercase}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--glass-border);margin:0 1rem}.btn-secondary{padding:1rem;color:#e2e8f0;display:flex;align-items:center;justify-content:center;gap:.75rem;font-weight:500}.btn-secondary:hover{background:var(--glass-hover)}.player-container{aspect-ratio:16 / 9;overflow:hidden;position:relative;box-shadow:0 25px 50px -12px #00000080}.placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#64748b}.faded-icon{opacity:.1}.video-wrapper{width:100%;height:100%;background:#000}@media(max-width:768px){.header h1{font-size:2rem}.container{padding:1rem;padding-top:calc(1rem + var(--safe-top));padding-left:calc(1rem + var(--safe-left));padding-right:calc(1rem + var(--safe-right))}.input-row{flex-direction:column;align-items:stretch}.btn-primary{justify-content:center}}.header-left{display:flex;align-items:center;gap:1rem}.hamburger{padding:.5rem;border-radius:50%;transition:background .2s;background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:20}.hamburger:hover{background:#ffffff1a}.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.sidebar{position:fixed;top:0;left:-320px;width:300px;height:100vh;z-index:1001;transition:left .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:1.5rem;padding-top:calc(1.5rem + var(--safe-top));padding-left:calc(1.5rem + var(--safe-left));background:#0f172a;border-right:1px solid var(--glass-border);backdrop-filter:none;-webkit-backdrop-filter:none}.sidebar.open{left:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.sidebar-header h3{margin:0;font-size:1.25rem;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.save-url-zone{display:flex;gap:.5rem;margin-bottom:2rem}.save-url-zone input{flex:1;background:#ffffff0d;border:1px solid var(--glass-border);border-radius:8px;padding:.6rem .8rem;color:#fff;font-size:.9rem}.btn-add{background:#6366f1;border:none;color:#fff;width:40px;height:40px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-add:hover{background:#4f46e5}.sidebar-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem;padding-right:.5rem}.sidebar-content::-webkit-scrollbar{width:5px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:#fff3}.url-list{display:flex;flex-direction:column;gap:.75rem}.url-item{display:flex;align-items:center;gap:.5rem;background:#ffffff08;border:1px solid var(--glass-border);border-radius:10px;padding:.75rem;transition:all .2s;position:relative;-webkit-user-select:none;user-select:none;touch-action:none}.url-item.dragging{cursor:grabbing;box-shadow:0 10px 15px -3px #0006}.url-item:hover{background:#ffffff14;transform:translateY(-1px)}.url-link-area{flex:1;display:flex;align-items:center;gap:.75rem;cursor:pointer;overflow:hidden;min-width:0}.url-text{font-size:.85rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.url-icon{color:#6366f1;flex-shrink:0}.kebab-container{position:relative;flex-shrink:0;z-index:5}.btn-kebab{background:none;border:none;color:#64748b;cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center}.btn-kebab:hover{background:#ffffff1a;color:#fff}.kebab-menu{position:absolute;right:0;top:100%;margin-top:4px;min-width:140px;z-index:1002;padding:4px;background:#1e293b;border:1px solid var(--glass-border);border-radius:12px;box-shadow:0 10px 25px -5px #00000080;backdrop-filter:none;-webkit-backdrop-filter:none}.kebab-item{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border:none;background:none;color:#94a3b8;font-size:.85rem;cursor:pointer;border-radius:6px;text-align:left}.kebab-item:hover{background:#ffffff0d;color:#fff}.kebab-item.delete{color:#f87171}.kebab-item.delete:hover{background:#f871711a;color:#ef4444}.empty-msg{text-align:center;color:#475569;font-size:.85rem;margin-top:2rem}.active-controls{padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.source-info{display:flex;align-items:center;gap:.75rem;color:#94a3b8;font-size:.9rem}.btn-close{background:#ef44441a;color:#ef4444;padding:.5rem;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center}.btn-close:hover{background:#ef444433}.feature-badges{display:flex;gap:.5rem;margin-top:1rem}.badge{background:var(--glass);padding:.3rem .8rem;border-radius:20px;font-size:.7rem;font-weight:600;color:#6366f1;border:1px solid var(--glass-border)}.btn-icon{background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:50%;transition:background .2s}.centered-input{align-items:center;justify-content:center;padding:3rem 2rem;text-align:center}.hint-text{color:#64748b;font-size:.9rem;margin-top:1rem}.hero-icon{color:#6366f1;margin-bottom:.5rem}.btn-secondary.glass span{font-size:1.1rem;font-weight:600}.sidebar-actions{margin-bottom:2rem;display:flex;flex-direction:column}.sidebar-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.8rem!important;font-size:.95rem!important;border:1px solid var(--glass-border)!important;background:#ffffff0d!important}.sidebar-btn:hover{background:#ffffff1a!important;transform:translateY(-2px)}.url-info{flex:1;display:flex;flex-direction:column;overflow:hidden;gap:2px;min-width:0}.url-title{font-size:.85rem;font-weight:500;color:#f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.url-text-small{font-size:.7rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.container.full-screen-mode{padding:0;max-width:none;gap:0;overflow:hidden;background:#000}.full-screen-mode .main{height:100vh;gap:0}.full-screen-mode .player-container{height:100vh;border-radius:0;aspect-ratio:auto;border:none;background:#000}.floating-hamburger{position:fixed;top:calc(1.5rem + var(--safe-top));left:calc(1.5rem + var(--safe-left));z-index:1002;background:none;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:.5rem;transition:all .2s ease;opacity:.6}.floating-hamburger:hover{background:#ffffff1a;border-radius:50%;opacity:1;transform:scale(1.1)}.floating-hamburger svg{color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.playlists-section{display:flex;flex-direction:column;gap:1rem;padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid var(--glass-border)}.section-header{display:flex;justify-content:space-between;align-items:center;padding:0 .5rem}.section-header h3{font-size:.95rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin:0}.playlist-list{display:flex;flex-direction:column;gap:.75rem}.playlist-group{border:1px solid var(--glass-border);border-radius:12px;background:#ffffff05;transition:all .2s ease;position:relative}.playlist-group:hover{background:#ffffff0a}.playlist-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#ffffff0d;position:relative;gap:.5rem;border-top-left-radius:11px;border-top-right-radius:11px}.playlist-info{flex:1;display:flex;align-items:center;gap:.75rem;cursor:pointer;min-width:0}.playlist-name{font-size:.9rem;font-weight:600;color:#f1f5f9}.count-badge{font-size:.7rem;background:#6366f133;color:#818cf8;padding:2px 8px;border-radius:10px;font-weight:700}.playlist-items{background:#0003;padding:.5rem;display:flex;flex-direction:column;gap:.4rem;border-top:1px solid var(--glass-border)}.playlist-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:#ffffff08;border-radius:8px;transition:background .2s;-webkit-user-select:none;user-select:none;touch-action:none}.playlist-item.dragging{cursor:grabbing;box-shadow:0 10px 15px -3px #0006}.playlist-item:hover{background:#ffffff0f}.playlist-item.playing{background:#6366f126;border:1px solid rgba(99,102,241,.3)}.playlist-item.playing .url-title-small{color:#818cf8;font-weight:600}.url-title-small{font-size:.8rem;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--glass-border);margin-bottom:4px;font-size:.75rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.playlist-picker{max-height:250px;overflow-y:auto;min-width:180px!important}.kebab-item.create-new{border-top:1px solid var(--glass-border);color:#818cf8;margin-top:4px;padding-top:12px}.btn-icon-small{background:none;border:none;color:#64748b;cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;transition:all .2s}.btn-icon-small:hover{background:#ffffff1a;color:#f1f5f9}.btn-icon-tiny{background:none;border:none;color:#475569;cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;transition:all .2s}.btn-icon-tiny:hover{background:#ef44441a;color:#ef4444}.delete-icon{color:#f87171;opacity:.6;transition:opacity .2s}.delete-icon:hover{opacity:1}.empty-msg-small{font-size:.75rem;color:#475569;text-align:center;padding:1rem .5rem;font-style:italic}