@import"https://fonts.cdnfonts.com/css/satoshi";:root{--color-white: white;--color-black: black;--bg-glass-dark: rgba(255, 255, 255, .1);--bg-glass-darker: rgba(0, 0, 0, .25);--bg-glass-light: rgba(255, 255, 255, .05);--bg-glass-dark-hover: rgba(255, 255, 255, .2);--bg-light-glass: rgba(0, 0, 0, .05);--bg-light-glass-hover: rgba(0, 0, 0, .1);--bg-light-section: rgba(255, 255, 255, .4);--bg-dark-section: rgba(14, 14, 14, .3);--text-primary-dark: white;--text-primary-light: black;--text-secondary-dark: rgba(255, 255, 255, .6);--text-secondary-light: rgba(0, 0, 0, .6);--text-muted-dark: rgba(255, 255, 255, .5);--text-muted-light: rgba(0, 0, 0, .5);--border-dark: rgba(255, 255, 255, .3);--border-dark-hover: rgba(255, 255, 255, .5);--border-light: rgba(0, 0, 0, .2);--border-light-hover: rgba(0, 0, 0, .3);--border-transparent: rgba(255, 255, 255, .1);--border-light-transparent: rgba(0, 0, 0, .1);--color-success: rgba(76, 175, 80, .95);--color-error: rgba(244, 67, 54, .95);--color-error-hover: rgba(244, 67, 54, .2);--shadow-dark: 0 4px 20px rgba(0, 0, 0, .3);--shadow-modal-dark: 0 8px 32px rgba(0, 0, 0, .4);--shadow-modal-light: 0 8px 32px rgba(0, 0, 0, .2);--shadow-button: 0 2px 8px rgba(0, 0, 0, .3);--shadow-inset-dark: inset 0px 0px 40px 40px rgba(30, 6, 59, .08);--shadow-inset-light: inset 0px 0px 40px 40px rgba(255, 255, 255, .08);--backdrop-blur: blur(10px);--backdrop-blur-strong: blur(20px);--backdrop-saturate: saturate(140%);--backdrop-brightness: brightness(100%);--backdrop-contrast: contrast(100%);--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-xl: 20px;--border-radius-xxl: 40px;--border-radius-round: 50%;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.5rem;--spacing-2xl: 2rem;--spacing-3xl: 3rem;--font-size-xs: .8rem;--font-size-sm: .9rem;--font-size-base: 1rem;--font-size-md: 1.1rem;--font-size-lg: 1.4rem;--font-size-xl: 2rem;--font-size-2xl: 2.5rem;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--transition-fast: .2s ease;--transition-base: .3s ease;--transition-slow: .4s ease;--transition-slider: .5s ease;--z-sidebar: 999;--z-overlay: 998;--z-header: 1000;--z-modal: 10000;--z-delete-btn: 10}:root{--_gradient-blend-mode: normal;--_gradient-blur: 0px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:0;font-family:Satoshi,sans-serif;color:var(--text-primary);font-weight:300}*{font-family:Satoshi,sans-serif}body{background:radial-gradient(at 91% 17%,#5285f3 0px,transparent 50%),radial-gradient(at 86% 44%,#7052f3 0px,transparent 50%),radial-gradient(at 88% 39%,#c052f3 0px,transparent 50%) #030303;mix-blend-mode:var(--_gradient-blend-mode)}body.light-mode{color:var(--text-primary)}body.dark-mode{--text-primary: var(--text-primary-dark);--text-secondary: var(--text-secondary-dark);--text-muted: var(--text-muted-dark)}body.light-mode{--text-primary: var(--text-primary-light);--text-secondary: var(--text-secondary-light);--text-muted: var(--text-muted-light)}.frosted-backdrop{backdrop-filter:blur(var(--_gradient-blur)) contrast(100%) brightness(100%);-webkit-backdrop-filter:blur(var(--_gradient-blur)) contrast(100%) brightness(100%)}.carousel-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px;margin:0 auto;padding:0}.carousel{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:250px;margin-bottom:var(--spacing-sm)}.empty-carousel{text-align:center}.carousel-track{display:flex;align-items:flex-end;justify-content:center;gap:var(--spacing-lg);width:100%;height:100%;perspective:1000px}.album-cover{position:relative;transition:all var(--transition-slider);cursor:pointer;border-radius:var(--border-radius-md);box-shadow:var(--shadow-dark)}.album-cover.center{width:200px;height:200px;z-index:3;transform:scale(1);opacity:1}.album-cover.side{width:120px;height:120px;z-index:1;opacity:.6;transform:scale(.8)}.album-cover.side:nth-child(1),.album-cover.side:nth-child(5){opacity:.3;transform:scale(.6)}.album-delete{position:absolute;top:-10px;right:-10px;background:#ffffffe6;color:#333;border:none;border-radius:var(--border-radius-round);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;font-weight:700;z-index:var(--z-delete-btn);box-shadow:var(--shadow-button);transition:all var(--transition-fast)}.album-delete:hover{background:#fff;transform:scale(1.1)}.placeholder-cover{width:100%;height:100%;background:var(--color-white);display:flex;align-items:center;justify-content:center;color:var(--color-white);font-weight:700;text-align:center;padding:var(--spacing-lg);font-size:var(--font-size-sm)}.placeholder-cover span{word-break:break-word;line-height:1.2}.album-cover img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:var(--border-radius-md)}.carousel-btn{background:none;border:none;color:var(--text-primary);font-size:2rem;width:50px;height:50px;border-radius:var(--border-radius-round);cursor:pointer;transition:all var(--transition-base);z-index:var(--z-delete-btn);padding:0;margin:0;flex-shrink:0;display:flex;justify-content:center}.carousel-btn:hover{background:var(--bg-glass-dark-hover);transform:translateY(-50%) scale(1.1)}.prev-btn{left:20px}.next-btn{right:20px}.current-track-info{text-align:center;color:var(--text-primary);height:80px;display:flex;flex-direction:column;justify-content:center;padding:0 var(--spacing-2xl);width:100%;max-width:600px;margin:0 auto}.placeholder-cover{width:100%;height:100%;background:var(--color-white);display:flex;align-items:center;justify-content:center;color:var(--text-primary);font-weight:700;text-align:center;padding:var(--spacing-lg);font-size:var(--font-size-sm)}.track-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);margin:0 0 var(--spacing-sm) 0;height:2rem;line-height:2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.track-artist{font-size:var(--font-size-base);font-weight:var(--font-weight-light);margin:0;height:1.5rem;line-height:1.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.work-stage{width:100%;max-width:700px;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2xl);margin:var(--spacing-lg) auto 0;height:100px;position:relative}.work-stage .carousel-btn{position:absolute;transform:none;margin:0;flex-shrink:0}.work-stage .prev-btn{left:0}.work-stage .next-btn{right:0}.work-stage .current-track-info{flex:0 0 auto;max-width:500px}@media (max-width: 768px){.carousel{height:200px}.album-cover.center{width:120px;height:120px}.album-cover.side{width:70px}.carousel-btn{width:35px;height:35px;font-size:1.3rem}.prev-btn{left:5px}.next-btn{right:5px}.track-title{font-size:1.1rem}.track-artist{font-size:.9rem}}.player{border-radius:var(--border-radius-xxl);width:40rem;max-width:90%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg);background:none;min-height:100px}@media (max-width: 768px){.player{width:100%;padding:var(--spacing-sm);min-height:80px}.slider{width:180px!important;flex:0 0 180px!important}.player span{font-size:var(--font-size-sm)}.player svg{margin:.3em}}.player>div:not(.slider){display:flex;align-items:center;gap:10px}.player svg{margin:.5em}.player span{color:var(--text-primary);font-family:Satoshi,sans-serif;font-weight:var(--font-weight-light)}.bar{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}.slider{position:relative;width:280px;height:2px;overflow:hidden;cursor:pointer;border:none;margin:.5em;flex:0 0 280px;background-color:var(--text-secondary)}.playlist-manager{max-width:100%;margin:0;padding:0;color:var(--color-white);font-family:Satoshi,sans-serif}.playlist-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-lg)}.playlist-header h1{font-size:var(--font-size-lg);font-weight:var(--font-weight-regular);color:var(--color-white);margin:0;letter-spacing:.5px;cursor:pointer;transition:opacity var(--transition-fast)}.playlist-header h1:hover{opacity:.8}.playlist-title-input{font-size:var(--font-size-lg);font-weight:var(--font-weight-regular);color:var(--color-white);background:transparent;border:none;border-bottom:2px solid var(--text-muted-dark);outline:none;padding:var(--spacing-xs) 0;letter-spacing:.5px;min-width:200px}.playlist-title-input:focus{border-bottom-color:#fffc}.edit-playlist-button{background:var(--bg-glass-dark);border:none;color:var(--color-white);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-xl);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.edit-playlist-button:hover{background:var(--bg-glass-dark-hover)}.player-section{background:var(--bg-glass-darker);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);margin-bottom:var(--spacing-2xl);backdrop-filter:var(--backdrop-blur) var(--backdrop-saturate);-webkit-backdrop-filter:var(--backdrop-blur) var(--backdrop-saturate)}.player-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.player-header h3{margin:0;color:var(--color-white);font-size:var(--font-size-md);font-weight:var(--font-weight-regular)}.playlist-section{background:var(--bg-dark-section);padding:var(--spacing-xl);border-radius:10px;backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur)}.playlist-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}.playlist-section-header h2{margin:0;color:var(--color-white);font-size:var(--font-size-base);font-weight:var(--font-weight-light)}.clear-all-button{padding:var(--spacing-sm) var(--spacing-lg);background:var(--bg-glass-dark);color:var(--color-white);border:none;border-radius:var(--border-radius-xl);font-size:.85rem;font-weight:var(--font-weight-regular);cursor:pointer;transition:all var(--transition-fast)}.clear-all-button:hover{background:var(--bg-glass-dark-hover)}.empty-playlist{text-align:center;padding:var(--spacing-3xl) var(--spacing-lg);color:var(--text-muted-dark)}.empty-playlist p{margin:var(--spacing-sm) 0;font-size:var(--font-size-base);font-weight:var(--font-weight-light)}.playlist-grid{display:grid;gap:var(--spacing-md)}.playlist-item{display:grid;grid-template-columns:20px 100px 1fr auto;gap:var(--spacing-lg);align-items:center;background:var(--bg-glass-light);padding:var(--spacing-md);border-radius:var(--border-radius-md);transition:all var(--transition-fast);cursor:pointer}.playlist-item:hover{background:var(--bg-glass-dark)}.item-number{font-size:var(--font-size-base);font-weight:var(--font-weight-light);color:var(--text-muted-dark);text-align:center}.playlist-item .video-thumbnail{height:56px;border-radius:var(--border-radius-sm);position:relative;overflow:hidden}.playlist-item .video-thumbnail img{width:100%;height:100%;object-fit:cover}.playlist-item .video-info{min-width:0}.video-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);margin-bottom:var(--spacing-xs);color:var(--color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-channel{font-size:var(--font-size-xs);font-weight:var(--font-weight-light);margin:0;color:var(--text-secondary-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-actions{display:flex;gap:var(--spacing-sm)}.play-button,.remove-button,.delete-button{padding:var(--spacing-sm);font-size:var(--font-size-base);min-width:36px;height:36px;background:var(--bg-glass-dark);border:none;border-radius:var(--border-radius-round);color:var(--color-white);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}body.light-mode .playlist-manager,body.light-mode .playlist-header h1{color:var(--color-black)}body.light-mode .playlist-title-input{color:var(--color-black);border-bottom-color:var(--border-light)}body.light-mode .playlist-title-input:focus{border-bottom-color:#0009}body.light-mode .player-section{background:var(--bg-light-section)}body.light-mode .player-header h3{color:var(--color-black)}body.light-mode .close-player{color:var(--color-black);background:transparent}body.light-mode .close-player:hover{background:#7474741a}body.light-mode .player-info h4{color:var(--color-black)}body.light-mode .player-info p{color:#000000b3}body.light-mode .playlist-section{background:var(--bg-light-section)}body.light-mode .playlist-section-header h2{color:var(--color-black)}body.light-mode .clear-all-button{background:var(--bg-light-glass);color:var(--color-black)}body.light-mode .clear-all-button:hover{background:var(--bg-light-glass-hover)}body.light-mode .empty-playlist{color:var(--text-muted-light)}body.light-mode .playlist-item{background:var(--bg-light-glass)}body.light-mode .playlist-item:hover{background:var(--bg-light-glass-hover)}body.light-mode .item-number{color:var(--text-muted-light)}body.light-mode .video-title{color:var(--color-black)}body.light-mode .video-channel{color:var(--text-secondary-light)}body.light-mode .play-button,body.light-mode .remove-button,body.light-mode .delete-button{background:var(--bg-light-glass);color:var(--color-black)}body.light-mode .play-button:hover{background:var(--bg-light-glass-hover)}body.light-mode .remove-button:hover,body.light-mode .delete-button:hover{background:var(--color-error-hover);color:var(--color-black)}body.light-mode .edit-playlist-button{background:var(--bg-light-glass);color:var(--color-black)}body.light-mode .edit-playlist-button:hover{background:var(--bg-light-glass-hover)}.header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:var(--spacing-xl) var(--spacing-2xl);z-index:var(--z-header)}.icon-btn{background:none;border:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.icon-btn:hover{transform:scale(1.1)}.icon-btn img{width:24px;height:24px;filter:brightness(0) invert(1)}body.light-mode .icon-btn img{filter:brightness(0) invert(0)}.sidebar-overlay{position:fixed;inset:0;background:#000000b3;z-index:var(--z-overlay);cursor:pointer}.sidebar{position:fixed;top:0;height:100vh;box-shadow:var(--shadow-inset-dark);z-index:var(--z-sidebar);padding:5rem var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl);transition:transform var(--transition-base),opacity var(--transition-base);background:#1e063bf2}.sidebar.closing{animation:all var(--transition-base) forwards}.sidebar.frosted-backdrop{backdrop-filter:var(--backdrop-blur) var(--backdrop-contrast) var(--backdrop-brightness);-webkit-backdrop-filter:var(--backdrop-blur) var(--backdrop-contrast) var(--backdrop-brightness)}body.light-mode .sidebar.frosted-backdrop{background:#fffffff2;backdrop-filter:var(--backdrop-blur) var(--backdrop-brightness) var(--backdrop-contrast);-webkit-backdrop-filter:var(--backdrop-blur) var(--backdrop-brightness) var(--backdrop-contrast);box-shadow:var(--shadow-inset-light);color:var(--color-black)}.search-sidebar{left:0;width:400px;animation:slideInLeft var(--transition-slow)}.search-sidebar.closing{animation:slideOutLeft var(--transition-slow) forwards}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutLeft{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}.search-container{margin-bottom:var(--spacing-xl)}.search-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border-dark);color:var(--color-white);padding:var(--spacing-sm) 0;font-size:var(--font-size-base);outline:none}.search-input::placeholder{color:var(--text-muted-dark)}.search-results{display:flex;flex-direction:column;gap:var(--spacing-md);overflow-y:auto;max-height:calc(100vh - 150px)}.search-item{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-md);border-radius:var(--border-radius-md);cursor:pointer;transition:background var(--transition-fast)}.search-item:hover{background:var(--bg-glass-dark)}.loading-message,.error-message{text-align:center;padding:var(--spacing-2xl);color:#fffc}.error-message{color:#ff6b6b}.menu-sidebar{right:0;width:400px;overflow-y:auto;animation:slideInRight var(--transition-slow)}.menu-sidebar.closing{animation:slideOutRight var(--transition-slow) forwards}.album-placeholder{width:40px;height:40px;background:#333;border-radius:var(--border-radius-sm);flex-shrink:0;object-fit:cover}.track-info{flex:1;min-width:0}.song-name{color:var(--color-white);font-weight:var(--font-weight-medium);margin-bottom:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.artist-name{color:var(--text-secondary-dark);font-size:var(--font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-buttons{display:flex;gap:var(--spacing-sm);align-items:center}.add-to-playlist-btn,.play-btn{background:var(--bg-glass-dark);border:none;color:var(--color-white);cursor:pointer;padding:var(--spacing-sm);transition:all var(--transition-fast);border-radius:var(--border-radius-round);width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm)}.add-to-playlist-btn{background:#4caf5033}.add-to-playlist-btn:hover{background:#61d96566;transform:scale(1.1)}.play-btn:hover{background:var(--bg-glass-dark-hover);transform:scale(1.1)}.empty-state{text-align:center;color:var(--text-secondary-dark);padding:var(--spacing-2xl)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}body.light-mode .sidebar,body.light-mode .sidebar *{color:#000!important;fill:#000!important}body.light-mode .search-input{background:transparent;border-bottom:1px solid rgba(0,0,0,.2);color:#000;padding:.3rem 0}body.light-mode .search-input::placeholder{color:#0006}body.light-mode .search-item:hover{background:#ffffff0d!important}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed;transition:background-image .4s ease}main{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl) var(--spacing-lg);transition:background var(--transition-base);box-sizing:border-box}h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-light);color:var(--color-white);text-align:center;margin:var(--spacing-lg) 0}@media (max-width: 768px){h1{font-size:2rem;margin:.5rem 0}}.edit-button{position:fixed;bottom:1em;left:1em;background:var(--bg-glass-dark);border:1px solid var(--border-dark);color:var(--color-white);cursor:pointer;font-size:var(--font-size-base);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--border-radius-md);-webkit-backdrop-filter:var(--backdrop-blur);backdrop-filter:var(--backdrop-blur);transition:all var(--transition-fast)}.edit-button:hover{background:var(--bg-glass-dark-hover);border-color:var(--border-dark-hover);transform:translateY(-2px)}body.light-mode .edit-button{background:var(--bg-light-glass);border:1px solid var(--border-light);color:var(--color-black)}body.light-mode .edit-button:hover{background:var(--bg-light-glass-hover);border-color:var(--border-light-hover)}.notification-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;color:var(--color-white);padding:var(--spacing-xl) var(--spacing-3xl);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-modal-dark);backdrop-filter:var(--backdrop-blur-strong);-webkit-backdrop-filter:var(--backdrop-blur-strong);z-index:var(--z-modal);font-size:var(--font-size-md);text-align:center;animation:modalFadeIn var(--transition-base);border:1px solid var(--border-transparent)}.notification-modal.success{background:var(--color-success)}.notification-modal.error{background:var(--color-error)}body.light-mode .notification-modal{background:#fffffff2;color:var(--color-black);border:1px solid var(--border-light-transparent);box-shadow:var(--shadow-modal-light)}body.light-mode .notification-modal.success{background:var(--color-success);color:var(--color-white)}body.light-mode .notification-modal.error{background:var(--color-error);color:var(--color-white)}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}body.dark-mode h1,body.dark-mode span,body.dark-mode p,body.dark-mode button,body.dark-mode .playlist-title{color:var(--color-white)!important}body.dark-mode svg,body.dark-mode img.icon{filter:invert(0)}body.light-mode h1,body.light-mode span,body.light-mode p,body.light-mode button,body.light-mode .playlist-title{color:var(--color-black)!important}body.light-mode svg,body.light-mode img.icon{filter:invert(1)}body.light-mode .progress-bar-track{background:#0000004d!important}body.light-mode .progress-bar-fill{background:var(--color-black)!important}body.light-mode .track-title,body.light-mode .track-artist{color:var(--color-black)!important}body.light-mode .icon-btn svg{stroke:var(--color-black)!important}