:root{--bg-primary:#1e1e24;--bg-secondary:#25262c;--bg-elevated:#2a2b33;--neu-light:#ffffff0d;--neu-dark:#00000080;--neu-shadow-outer:-6px -6px 14px var(--neu-light), 6px 6px 14px var(--neu-dark);--neu-shadow-inner:inset -6px -6px 14px var(--neu-light), inset 6px 6px 14px var(--neu-dark);--neu-shadow-hover:-4px -4px 10px var(--neu-light), 4px 4px 10px var(--neu-dark);--neu-shadow-sm:-3px -3px 8px var(--neu-light), 3px 3px 8px var(--neu-dark);--glass-bg:var(--bg-primary);--glass-border:transparent;--glass-highlight:transparent;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-tertiary:#64748b;--accent-start:#00f0ff;--accent-end:#0051ff;--accent-gradient:linear-gradient(135deg, var(--accent-start), var(--accent-end));--blur-sm:8px;--blur-md:20px;--blur-lg:40px;--shadow-glass:var(--neu-shadow-outer)}html,body,#root{overscroll-behavior-y:none;width:100%;height:100vh;margin:0;padding:0;position:fixed;top:0;left:0;overflow:hidden;background-color:var(--bg-primary)!important}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}.glass-panel{background:var(--bg-primary);box-shadow:var(--neu-shadow-outer);-webkit-backdrop-filter:none;border:none;border-radius:16px}.glass-interactive{cursor:pointer;transition:all .2s}.glass-interactive:hover{background:var(--bg-primary);box-shadow:var(--neu-shadow-hover);transform:translateY(-2px)}.glass-interactive:active{box-shadow:var(--neu-shadow-inner);transform:translateY(0)}.glass-btn{background:var(--bg-primary);cursor:pointer;color:var(--text-primary);border:none;border-radius:12px;outline:none;justify-content:center;align-items:center;font-family:inherit;font-weight:500;transition:all .2s;display:inline-flex}.glass-btn-primary{background:var(--bg-primary);box-shadow:var(--neu-shadow-outer);color:var(--accent-start);padding:10px 20px}.glass-btn-primary:hover{box-shadow:var(--neu-shadow-hover);color:var(--accent-end)}.glass-btn-primary:active{box-shadow:var(--neu-shadow-inner)}.glass-btn-secondary{background:var(--bg-primary);box-shadow:var(--neu-shadow-sm);color:var(--text-secondary);padding:10px 20px}.glass-btn-secondary:hover{box-shadow:var(--neu-shadow-hover);color:var(--text-primary)}.glass-btn-secondary:active{box-shadow:var(--neu-shadow-inner)}.glass-btn-icon{background:var(--bg-primary);width:40px;height:40px;color:var(--text-secondary);box-shadow:var(--neu-shadow-outer);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.glass-btn-icon:hover,.glass-btn-icon.active{color:var(--accent-start);box-shadow:var(--neu-shadow-hover)}.glass-btn-icon:active{box-shadow:var(--neu-shadow-inner)}.page-transition-enter{opacity:0;transform:translateY(8px)}.page-transition-enter-active{opacity:1;transition:opacity .2s ease-out,transform .2s ease-out;transform:translateY(0)}.page-transition-exit{opacity:1;transform:translateY(0)}.page-transition-exit-active{opacity:0;transition:opacity .2s ease-in,transform .2s ease-in;transform:translateY(-8px)}.app-shell{background:0 0;width:100%;height:100vh;display:flex;position:absolute;inset:0;overflow:hidden}.sidebar{-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);width:240px;height:100%;padding:max(24px, env(safe-area-inset-top)) 24px 24px 24px;z-index:10;background:#11131780;flex-direction:column;display:flex}.sidebar-logo{color:var(--text-primary);align-items:center;gap:12px;margin-bottom:40px;font-size:24px;font-weight:600;display:flex}.sidebar-nav{flex-direction:column;gap:8px;display:flex}.nav-item{color:var(--text-secondary);touch-action:manipulation;border-radius:12px;align-items:center;gap:16px;padding:12px 16px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover{color:var(--text-primary);background:#ffffff0d}.nav-item.active{color:var(--accent-start);background:#4ca6ff1a}.main-content{flex:1;padding-bottom:90px;position:relative;overflow-y:auto}.content-container{padding:max(32px, env(safe-area-inset-top)) 32px 32px 32px;flex-direction:column;max-width:1200px;min-height:100%;margin:0 auto;display:flex}.bottom-nav{display:none}@media (width<=768px){.app-shell{flex-direction:column}.sidebar{display:none}.main-content{padding-bottom:calc(160px + env(safe-area-inset-bottom))}.content-container{padding:max(16px, env(safe-area-inset-top)) 16px 16px 16px}.bottom-nav{background:var(--bg-elevated);-webkit-backdrop-filter:blur(20px);padding-top:0;padding-bottom:min(env(safe-area-inset-bottom,0px), 34px);height:auto;min-height:calc(60px + min(env(safe-area-inset-bottom,0px), 34px));z-index:1000;box-sizing:border-box;border-top:1px solid #ffffff0d;flex-shrink:0;justify-content:space-around;align-items:center;display:flex;box-shadow:0 -4px 20px #0003;width:100%!important;margin:0!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important}.bottom-nav-item{color:var(--text-secondary);touch-action:manipulation;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:44px;min-height:44px;font-size:11px;font-weight:500;text-decoration:none;display:flex}.bottom-nav-item.active{color:var(--accent-start)}}.player-bar-container{background:var(--glass-bg);width:100%;height:90px;-webkit-backdrop-filter:blur(var(--blur-md));border-top:1px solid var(--glass-border);z-index:50;cursor:pointer;flex-direction:column;display:flex;position:fixed;bottom:0;left:0}@media (width<=768px){.player-bar-container{bottom:calc(60px + min(env(safe-area-inset-bottom,0px), 34px));height:70px}}.player-bar-progress{background:#ffffff1a;width:100%;height:2px;position:absolute;top:0;left:0}.player-bar-progress-fill{background:var(--accent-gradient);height:100%;box-shadow:0 0 10px var(--accent-start);transition:width .1s linear}.player-bar-content{align-items:center;gap:16px;height:100%;padding:0 20px;display:flex}.player-bar-artwork{border-radius:8px;flex-shrink:0;width:50px;height:50px;overflow:hidden}.player-bar-artwork img{object-fit:cover;width:100%;height:100%}.artwork-placeholder-small{width:100%;height:100%;color:var(--text-secondary);background:#ffffff0d;justify-content:center;align-items:center;display:flex}.player-bar-info{flex-direction:column;flex:1;justify-content:center;min-width:0;display:flex}.player-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;overflow:hidden}.player-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.player-bar-controls{align-items:center;gap:12px;display:flex}.progress-container{align-items:center;gap:16px;width:100%;padding:10px 0;display:flex}.time-display{color:var(--text-secondary);font-variant-numeric:tabular-nums;width:40px;font-size:12px}.progress-track{cursor:pointer;touch-action:none;background:#ffffff1a;border-radius:3px;flex:1;height:6px;position:relative}.progress-fill{background:var(--text-primary);border-radius:3px;height:100%;position:relative}.progress-thumb{background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .2s;position:absolute;top:50%;right:-6px;transform:translateY(-50%)scale(0);box-shadow:0 0 10px #ffffff80}.progress-track:hover .progress-thumb{transform:translateY(-50%)scale(1)}.volume-control{align-items:center;gap:8px;display:flex}.volume-slider{-webkit-appearance:none;background:0 0;border-radius:2px;flex:1;height:4px}.volume-slider::-webkit-slider-runnable-track{background:0 0;border-radius:2px;width:100%;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px;margin-top:-4px}.fullscreen-player{width:100vw;height:100dvh;z-index:100;background-color:var(--bg-primary);flex-direction:column;height:-webkit-fill-available;display:flex;position:fixed;top:0;left:0}.fs-background{filter:blur(60px)brightness(.4);z-index:0;background-position:50%;background-size:cover;width:110%;height:110%;position:absolute;top:-5%;left:-5%}.fs-content{z-index:1;height:100%;padding-top:max(40px, env(safe-area-inset-top));padding-bottom:max(24px, env(safe-area-inset-bottom));box-sizing:border-box;flex-direction:column;width:100%;max-width:1000px;margin:0 auto;padding-left:40px;padding-right:40px;display:flex;position:relative}.fs-header{justify-content:space-between;align-items:center;margin-bottom:40px;display:flex}.fs-main{flex:1;justify-content:space-between;align-items:center;gap:60px;display:flex}.fs-artwork-container{aspect-ratio:1;border-radius:16px;flex:1;justify-content:center;align-items:center;width:100%;max-width:500px;max-height:500px;margin:0 auto;display:flex;overflow:hidden;box-shadow:0 20px 50px #00000080}.fs-artwork-container img{object-fit:cover;width:100%;height:100%}.artwork-placeholder-large{width:100%;height:100%;color:var(--text-tertiary);background:#ffffff0d;justify-content:center;align-items:center;display:flex}.fs-controls-section{flex-direction:column;flex:1;justify-content:center;display:flex}.fs-info{margin-bottom:30px}.fs-title{text-shadow:0 2px 10px #0000004d;margin-bottom:8px;font-size:32px;font-weight:700}.fs-artist{color:var(--text-secondary);font-size:20px}.fs-playback-controls{justify-content:center;align-items:center;gap:24px;margin:30px 0;display:flex}.btn-play-large{background:var(--text-primary);width:64px;height:64px;color:var(--bg-primary);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;transition:transform .2s;display:flex}.btn-play-large:hover{transform:scale(1.05)}@media (width<=768px){.fs-content{padding-top:max(24px, env(safe-area-inset-top));padding-bottom:max(16px, env(safe-area-inset-bottom));padding-left:max(20px, env(safe-area-inset-left));padding-right:max(20px, env(safe-area-inset-right))}.fs-main{flex-direction:column;justify-content:flex-start;gap:30px}.fs-artwork-container{aspect-ratio:1;width:100%;max-width:100%}.fs-controls-section{flex:none;width:100%}.fs-title{font-size:24px}}.queue-overlay{z-index:101;background:#00000080;width:100vw;height:100vh;position:fixed;top:0;left:0}.queue-drawer{z-index:102;border-bottom-right-radius:0;border-bottom-left-radius:0;flex-direction:column;width:100%;height:70vh;max-height:600px;display:flex;position:fixed;bottom:0;left:0}.queue-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.queue-header h2{margin:0;font-size:18px;font-weight:600}.queue-list{flex:1;padding:16px 24px;overflow-y:auto}.queue-item{background:#ffffff05;border-radius:12px;align-items:center;gap:16px;margin-bottom:8px;padding:12px;transition:background .2s;display:flex}.queue-item:hover{background:#ffffff0d}.queue-item.active{background:#4ca6ff1a;border:1px solid #4ca6ff4d}.queue-item.active .queue-item-title{color:var(--accent-start)}.drag-handle{cursor:grab;color:var(--text-tertiary);justify-content:center;align-items:center;padding:4px;display:flex}.drag-handle:active{cursor:grabbing}.queue-item-info{cursor:pointer;flex:1;min-width:0}.queue-item-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.queue-item-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;margin-top:4px;font-size:12px;overflow:hidden}.import-dropzone{border:2px dashed var(--glass-border);width:100%;-webkit-backdrop-filter:blur(var(--blur-sm));cursor:pointer;background:#2529374d;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;margin-bottom:32px;padding:40px;transition:all .2s;display:flex}.import-dropzone:hover{border-color:var(--accent-start);background:#25293799;box-shadow:0 0 20px #4ca6ff33}.import-dropzone.loading{pointer-events:none;opacity:.7}.import-content{flex-direction:column;align-items:center;gap:12px;display:flex}.import-content h3{color:var(--text-primary);margin:0;font-weight:500}.import-content p{color:var(--text-secondary);margin:0;font-size:14px}.track-list{flex-direction:column;width:100%;display:flex}.track-list-header{border-bottom:1px solid var(--glass-border);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:1px;align-items:center;margin-bottom:8px;padding:8px 16px;font-size:12px;display:flex}.track-item{group:track;border-radius:8px;align-items:center;gap:16px;padding:8px 16px;transition:background .2s;display:flex}.track-item:hover{background:#ffffff0d}.track-item.active{background:#4ca6ff1a}.track-item.active .track-title{color:var(--accent-start)}.track-index{text-align:center;width:32px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;font-size:14px}.playing-indicator{background:var(--accent-start);width:12px;height:12px;box-shadow:0 0 8px var(--accent-start);border-radius:50%;margin:0 auto;animation:1.5s infinite alternate pulse}@keyframes pulse{0%{opacity:.6;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}.track-artwork{cursor:pointer;border-radius:6px;flex-shrink:0;width:40px;height:40px;position:relative;overflow:hidden}.track-artwork img{object-fit:cover;width:100%;height:100%}.track-artwork-placeholder{width:100%;height:100%;color:var(--text-secondary);background:#ffffff1a;justify-content:center;align-items:center;display:flex}.track-play-overlay{opacity:0;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .2s;display:flex;position:absolute;top:0;left:0}.track-item:hover .track-play-overlay{opacity:1}.track-info-header{flex:1;padding-left:56px}.track-info{cursor:pointer;flex:1;min-width:0}.track-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-weight:500;overflow:hidden}.track-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.track-album-header,.track-album{min-width:0;color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:14px;display:block;overflow:hidden}.track-duration-header,.track-duration{text-align:right;width:60px;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:14px}.track-menu-btn{opacity:0}.track-item:hover .track-menu-btn{opacity:1}@media (width<=768px){.track-album-header,.track-album,.track-index{display:none}.track-info-header{padding-left:0}.track-menu-btn{opacity:1}}.spin-animation{animation:1.5s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.text-center{text-align:center}@media (width>=769px){.mobile-only{display:none!important}}@media (width<=768px){.desktop-only{display:none!important}.import-dropzone{background:var(--accent-start);border:none;border-radius:100px;margin-bottom:24px;padding:16px 24px;box-shadow:0 4px 15px #4ca6ff4d}.import-dropzone:hover{background:var(--accent-end);box-shadow:0 6px 20px #4ca6ff66}.import-content{flex-direction:row;gap:12px}.import-content .upload-icon{width:20px;height:20px;color:#fff!important}.import-content h3{color:#fff;margin:0;font-size:16px}}