.sidebar{position:fixed;left:0;top:0;width:240px;height:100vh;background-color:var(--spotify-sidebar-bg);padding:24px 8px 90px;overflow-y:auto;overflow-x:hidden;z-index:100;transition:transform .3s ease-in-out}.sidebar-overlay{display:none}@media (max-width:768px){.sidebar{transform:translateX(-100%)}.sidebar.sidebar-open{transform:translateX(0);z-index:200}.sidebar-overlay{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:150}}.sidebar-content{display:flex;flex-direction:column;gap:24px;min-height:100%}.sidebar-logo{display:flex;align-items:center;gap:12px;padding:0 12px;margin-bottom:8px}.logo-icon{width:32px;height:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21l8.5-18 8.5 18'/%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M7 21V7l5-4 5 4v14'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:32px 32px;display:inline-block;flex-shrink:0}.logo-text{font-size:24px;font-weight:700;color:var(--spotify-white)}.sidebar-nav{display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:16px;padding:8px 12px;color:var(--spotify-light-gray);text-decoration:none;border-radius:4px;transition:color .2s,background-color .2s;font-weight:500;font-size:14px}.nav-item.active,.nav-item:hover{color:var(--spotify-white);background-color:var(--spotify-gray)}.nav-icon{font-size:20px;width:24px;text-align:center}.nav-icon.search-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")}.nav-icon.library-icon,.nav-icon.search-icon{font-size:0;width:16px;height:16px;background-repeat:no-repeat;background-position:50%;background-size:16px 16px;display:inline-block}.nav-icon.library-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E")}.nav-icon.heart-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E")}.nav-icon.admin-icon,.nav-icon.heart-icon{font-size:0;width:16px;height:16px;background-repeat:no-repeat;background-position:50%;background-size:16px 16px;display:inline-block}.nav-icon.admin-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.78 1.35a2 2 0 0 0 .73 2.73l.15.08a2 2 0 0 1 1 1.73v.44a2 2 0 0 1-1 1.73l-.15.08a2 2 0 0 0-.73 2.73l.78 1.35a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.78-1.35a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.73v-.44a2 2 0 0 1 1-1.73l.15-.08a2 2 0 0 0 .73-2.73l-.78-1.35a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E")}.nav-icon.songwriting-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E")}.nav-icon.premium-icon,.nav-icon.songwriting-icon{font-size:0;width:16px;height:16px;background-repeat:no-repeat;background-position:50%;background-size:16px 16px;display:inline-block}.nav-icon.premium-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E")}.nav-text{flex:1 1}.sidebar-section{margin-top:8px;padding-top:16px;border-top:1px solid var(--spotify-gray)}.sidebar-section-header{padding:0 12px 8px}.section-title{font-size:11px;font-weight:700;color:var(--spotify-light-gray);text-transform:uppercase;letter-spacing:1.5px}.create-playlist-btn{display:flex;align-items:center;gap:16px;padding:8px 12px;background:var(--spotify-white);border:none;color:var(--spotify-black);cursor:pointer;border-radius:20px;transition:transform .2s,background-color .2s;font-weight:700;font-size:14px;width:100%;text-align:left;text-decoration:none}.create-playlist-btn:hover{background-color:rgba(255,255,255,.9);transform:scale(1.02)}.profile-dropdown{position:relative;display:inline-block}.profile-trigger{display:flex;align-items:center;gap:.5rem;background:none;border:none;cursor:pointer;padding:.25rem;border-radius:50px;transition:background .2s}.profile-trigger:hover{background:rgba(255,255,255,.1)}.profile-avatar{object-fit:cover}.profile-avatar,.profile-avatar-placeholder{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}.profile-avatar-placeholder{background:linear-gradient(135deg,#450af5,#c44569);display:flex;align-items:center;justify-content:center;color:var(--spotify-white);font-weight:700;font-size:16px}.dropdown-arrow{font-size:.7rem;color:rgba(255,255,255,.8);transition:transform .2s}.profile-trigger:hover .dropdown-arrow{transform:translateY(2px)}.dropdown-menu{position:absolute;top:calc(100% + .5rem);right:0;background:var(--spotify-sidebar-bg);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:240px;z-index:1000;overflow:hidden;animation:slideDown .2s ease-out;border:1px solid rgba(255,255,255,.1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:1rem;background:rgba(255,255,255,.05);color:var(--spotify-white);border-bottom:1px solid rgba(255,255,255,.1)}.dropdown-user-info{display:flex;align-items:center;gap:.75rem}.dropdown-avatar{object-fit:cover}.dropdown-avatar,.dropdown-avatar-placeholder{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.3)}.dropdown-avatar-placeholder{background:linear-gradient(135deg,#450af5,#c44569);display:flex;align-items:center;justify-content:center;color:var(--spotify-white);font-weight:700;font-size:20px}.dropdown-user-details{flex:1 1;min-width:0}.dropdown-user-name{font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.5rem}.premium-badge-small{display:inline-block;padding:.2rem .5rem;background:linear-gradient(135deg,#1db954,#1ed760);color:white;border-radius:12px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.dropdown-user-email{font-size:.85rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-divider{height:1px;background:rgba(255,255,255,.1);margin:.25rem 0}.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;color:var(--spotify-white);text-decoration:none;background:none;border:none;width:100%;text-align:left;cursor:pointer;font-size:.95rem;transition:background .2s;font-weight:500}.dropdown-item:hover{background:var(--spotify-gray)}.dropdown-item.logout-item{color:var(--spotify-white)}.dropdown-item.logout-item:hover{background:rgba(220,53,69,.2);color:#ff6b6b}.dropdown-icon{font-size:0;width:16px;height:16px;display:inline-block;flex-shrink:0}.dropdown-icon.profile-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}.dropdown-icon.library-icon,.dropdown-icon.profile-icon{background-repeat:no-repeat;background-position:50%;background-size:16px 16px}.dropdown-icon.library-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E")}.dropdown-icon.heart-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E")}.dropdown-icon.heart-icon,.dropdown-icon.settings-icon{background-repeat:no-repeat;background-position:50%;background-size:16px 16px}.dropdown-icon.settings-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24'/%3E%3C/svg%3E")}.dropdown-icon.logout-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:16px 16px}.dropdown-icon.admin-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.78 1.35a2 2 0 0 0 .73 2.73l.15.08a2 2 0 0 1 1 1.73v.44a2 2 0 0 1-1 1.73l-.15.08a2 2 0 0 0-.73 2.73l.78 1.35a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.78-1.35a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.73v-.44a2 2 0 0 1 1-1.73l.15-.08a2 2 0 0 0 .73-2.73l-.78-1.35a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:20px 20px}.dropdown-icon.premium-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:16px 16px}.dropdown-item.logout-item:hover .dropdown-icon.logout-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E")}.top-bar{position:-webkit-sticky;position:sticky;top:0;height:64px;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;padding:0 32px;z-index:50;gap:16px}.top-bar-left{display:flex;gap:8px;flex-shrink:0}.nav-button{width:32px;height:32px;border-radius:50%;border:none;background-color:rgba(0,0,0,.7);color:var(--spotify-white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:background-color .2s}.nav-button.hamburger-menu{display:none}@media (max-width:768px){.nav-button.hamburger-menu{display:flex}}.nav-button:hover:not(:disabled){background-color:var(--spotify-gray)}.nav-button:disabled{opacity:.5;cursor:not-allowed}.top-bar-center{flex:1 1;display:flex;justify-content:center;max-width:600px;margin:0 auto}.top-bar-search-form{width:100%;max-width:500px}.top-bar-search-input{width:100%;height:40px;padding:0 16px 0 40px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:20px;color:var(--spotify-white);font-size:14px;transition:all .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px;background-size:16px 16px}.top-bar-search-input::placeholder{color:rgba(255,255,255,.6)}.top-bar-search-input:focus{outline:none;background-color:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);box-shadow:0 0 0 2px rgba(255,255,255,.1)}.top-bar-right{display:flex;align-items:center;gap:16px;flex-shrink:0}.login-button{padding:8px 24px;background:var(--spotify-white);color:var(--spotify-black);border:none;border-radius:30px;font-weight:700;font-size:14px;cursor:pointer;transition:transform .2s,background-color .2s;text-transform:uppercase;letter-spacing:1px}.login-button:hover{transform:scale(1.05);background:rgba(255,255,255,.9)}@media (max-width:768px){.top-bar{padding:0 16px}.top-bar-center{flex:1 1;min-width:0}.top-bar-search-form{max-width:100%}.top-bar-search-input{font-size:14px;padding:0 12px 0 36px}}