:root{--color-accent: #9B59B6;--color-bg-main: #212124;--color-bg-dark: #121212;--color-bg-secondary: #3F3F3F;--color-text-muted: #B3B3B3;--color-text-light: #FFFFFF;--color-text-base: #A0A0A0;--color-hover-bg: #3A3A3A;--color-volume-track: #404040;--color-now-playing-shadow: rgba(0, 0, 0, .8);--color-accent-hover: #9F2BCC}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:var(--color-bg-main);color:var(--color-text-light)}.app-container{display:flex;height:100vh;background:var(--color-bg-main);color:var(--color-text-light)}.main-content{flex:1;overflow-y:auto;display:flex;flex-direction:column}.login-container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 20px;text-align:center}.intro{max-width:600px;margin-bottom:40px}.intro-title{font-size:2.5rem;margin-bottom:0;color:var(--color-accent)}.intro-subtitle{color:var(--color-text-base);margin:0;font-style:italic;font-weight:lighter}.intro-text{font-size:1.1rem;margin-bottom:15px;line-height:1.6}.intro-links a{color:var(--color-accent);text-decoration:none}.intro-links a:hover{text-decoration:underline}.login-button{padding:16px 32px;font-size:18px;font-weight:600;border-radius:12px;border:none;background-color:var(--color-accent);color:#fff;cursor:pointer;transition:background-color .3s ease}.login-button:hover{background-color:var(--color-accent-hover)}.grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:50px 12px;box-sizing:border-box}.grid-card{background-color:var(--color-bg-secondary);color:var(--color-text-light);border-radius:8px;padding:10px;cursor:pointer;transition:background-color .25s ease;outline:none;display:flex;flex-direction:column;align-items:center;text-align:center}.grid-card:hover,.grid-card:focus{background-color:var(--color-hover-bg)}.grid-image{width:100%;border-radius:6px;object-fit:cover;display:block}.grid-title{margin-top:8px;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.grid-subtitle{font-size:.75rem;color:var(--color-text-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.playlist-tracks-container{padding:16px}.ios-style-btn{background-color:var(--color-accent);color:var(--color-text-light);border:none;border-radius:12px;box-shadow:0 2px 8px #9b59b666,inset 0 -2px #7d36a0b3;transition:background-color .25s ease,box-shadow .25s ease;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:600;padding:8px 16px;margin-bottom:16px}.ios-style-btn:hover{background-color:var(--color-accent-hover);box-shadow:0 4px 12px #9b59b699,inset 0 -2px #7d36a0cc}.ios-style-btn:active{background-color:#642e91;box-shadow:0 1px 6px #9b59b6cc,inset 0 2px 4px #7d36a0e6;transform:translateY(1px)}.track-list{list-style:none;padding:0;margin:0}.track-list-item{padding:8px 12px;border-radius:6px;cursor:pointer;transition:background-color .2s ease}.track-list-item:hover,.track-list-item:focus{background-color:var(--color-hover-bg);outline:none}.now-playing-bar{box-sizing:border-box;position:fixed;bottom:0;left:0;width:100%;height:70px;background:var(--color-bg-dark);color:var(--color-text-light);display:flex;align-items:center;padding:0 20px;box-shadow:0 -3px 10px var(--color-now-playing-shadow);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;z-index:9999;gap:16px}.now-playing-bar .track-info{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:12px}.now-playing-bar .album-art{width:56px;height:56px;border-radius:8px;object-fit:cover;box-shadow:0 0 8px #ffffff26;flex-shrink:0}.now-playing-bar .track-text{display:flex;flex-direction:column;min-width:0;overflow:hidden}.now-playing-bar .track-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-bar .artist-name{font-weight:400;font-size:13px;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.now-playing-bar .media-controls{display:flex;align-items:center;gap:24px;flex-shrink:0}.now-playing-bar .media-controls button{background:transparent;border:none;cursor:pointer;color:var(--color-text-light);padding:6px;border-radius:50%;transition:color .2s ease}.now-playing-bar .media-controls button:hover,.now-playing-bar .media-controls button.active{color:var(--color-accent)}.now-playing-bar .volume-control{display:flex;align-items:center;gap:8px;width:120px;flex-shrink:0}.now-playing-bar .volume-control input[type=range]{width:100%;cursor:pointer;height:4px;background:var(--color-volume-track);border-radius:2px;outline:none;transition:background .3s ease}.now-playing-bar .volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--color-accent);border-radius:50%;cursor:pointer;transition:background .3s ease;margin-top:-5px}.now-playing-bar .volume-control input[type=range]:hover::-webkit-slider-thumb{background:var(--color-accent)}.now-playing-bar .volume-control input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--color-accent);border-radius:50%;cursor:pointer}.hamburger-btn{position:fixed;top:16px;left:16px;z-index:10001;display:flex;flex-direction:column;justify-content:space-around;width:28px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;-webkit-user-select:none;user-select:none}.hamburger-line{width:28px;height:3px;background-color:var(--color-text-light);border-radius:2px;transition:background-color .3s ease}.hamburger-btn:hover .hamburger-line{background-color:var(--color-accent)}.sidebar{position:fixed;top:0;left:0;width:240px;height:100vh;background:linear-gradient(180deg,#121212,#181818);color:var(--color-text-light);display:flex;flex-direction:column;padding:24px;box-sizing:border-box;box-shadow:2px 0 8px #000000b3;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:10000;-webkit-user-select:none;user-select:none}.sidebar-list{flex-grow:1;list-style-type:none;padding-left:20px}.sidebar-logout-btn{width:100%;margin:16px 0;padding:4px 16px;background-color:var(--color-accent);color:var(--color-text-light);font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.sidebar-logout-btn:hover{background-color:var(--color-accent-hover);transform:translateY(-1px)}.sidebar-logout-btn:active{background-color:#642e91;transform:translateY(0)}.sidebar.open{transform:translate(0)}.sidebar-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;opacity:0;visibility:hidden;transition:opacity .3s ease;z-index:9999}.sidebar-backdrop.visible{opacity:1;visibility:visible}.hamburger-btn.open .hamburger-line:nth-child(1){transform:translateY(8px) rotate(45deg)}.hamburger-btn.open .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.open .hamburger-line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.hamburger-btn .hamburger-line{transition:transform .4s ease,opacity .4s ease}@media (min-width: 600px){.grid-container{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:16px 0 64px;margin-top:0}.hamburger-btn{display:none}.sidebar{position:relative;transform:none!important;width:240px;height:100vh;box-shadow:2px 0 8px #000000b3;z-index:auto}.sidebar-backdrop{display:none}}@media (min-width: 1024px){.grid-container{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:0}.now-playing-bar{height:80px;padding:0 32px}.now-playing-bar .album-art{width:64px;height:64px;border-radius:10px}.now-playing-bar .track-name{font-size:16px}.now-playing-bar .artist-name{font-size:14px}.now-playing-bar .media-controls{gap:32px}.now-playing-bar .volume-control{width:140px}}