.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}@font-face{font-family:Inter;src:url(/fonts/Inter/Inter_24pt-Regular.ttf) format("truetype");font-weight:400}@font-face{font-family:Inter;src:url(/fonts/Inter/Inter_18pt-Medium.ttf) format("truetype");font-weight:500}@font-face{font-family:Inter;src:url(/fonts/Inter/Inter_24pt-Bold.ttf) format("truetype");font-weight:700}@font-face{font-family:spotify-regular;src:url(/assets/SpotifyMixUI-Regular-91623228.woff2) format("truetype")}@font-face{font-family:spotify-bold;src:url(/assets/SpotifyMixUI-Bold-4252606c.woff2) format("truetype")}@font-face{font-family:spotify-title;src:url(/assets/SpotifyMixUITitleVariable-406312aa.woff2) format("truetype")}:root{--font-primary: spotify-regular;--font-bold: spotify-bold;--font-title: spotify-title;--fs-extra-large:52px;--fs-extra-2-large: 48px;--fs-large: 36px;--fs-display: 32px;--fs-h1: 24px;--fs-h2: 20px;--fs-h3: 18px;--fs-body: 16px;--fs-small: 14px;--fs-tiny: 11px;--fs-tintiny: 9px;--lh-tight: 1.1;--lh-normal: 1.4;--lh-relaxed: 1.6;--ls-tight: -.5px;--ls-normal: 0}body{font-family:var(--font-primary);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--sp-white)}h1{font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}h2{font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-tight)}h3{font-size:var(--fs-h3);font-weight:500;line-height:var(--lh-tight)}p{font-size:var(--fs-body);line-height:var(--lh-normal)}:root{--app-background: #000000;--sp-black: #121212;--sp-dark: #181818;--sp-dark-2: #1f1f1f;--sp-gray: #b3b3b3;--sp-grey2: hsl(0, 0%, 50%);--sp-light-gray: #e5e5e5;--sp-white: #ffffff;--sp-green: hsl(141, 73%, 42%);--sp-greenBrighter: hsl(141, 73%, 62%);--sp-index-btns: #383838a3;--sp-card: #242424;--sp-card-transparent: #ffffff1a;--sp-hover: #2a2a2a;--sp-hover-transparent: hsla(0, 0%, 100%, .2);--sp-hover-grey: #ffffff4d;--sp-border: #3a3a3a;--sp-border-hover: #3f3f3f;--sp-carusel-hover: #1e1e1e;--sp-player-slider: #4d4d4d;--sp-gradient-1: linear-gradient(135deg, #450af5, #c4efd9);--sp-gradient-2: linear-gradient(135deg, #1db954, #1ed760);--success: #1db954;--error: #e91429;--sp-green-light: color-mix(in lab, var(--sp-green), white 20%);--sp-gray-light: color-mix(in lab, var(--sp-gray), white 30%);--browse-clr-0: #1b5e20;--browse-clr-1: #27856a;--browse-clr-2: #1e3264;--browse-clr-3: #8d67ab;--browse-clr-4: #e8115b;--browse-clr-5: #8c1932;--browse-clr-6: #7358ff;--browse-clr-7: #148a08;--browse-clr-8: #ba5d07;--browse-clr-9: #e91429;--browse-clr-10: #e1118c;--browse-clr-11: #d84000;--browse-clr-12: #503750;--browse-clr-13: #1db954;--browse-clr-14: #0d3b66;--browse-clr-15: #1a432e;--browse-clr-16: #4a192c;--browse-clr-17: #522d0d;--browse-clr-18: #2d1657;--browse-clr-19: #631616;--browse-clr-20: #0b4545;--browse-clr-21: #3d3d3d;--browse-clr-22: #45241c;--browse-clr-23: #1c2b4d;--browse-clr-24: #2e1f47;--browse-clr-25: #004d40;--browse-clr-26: #5d1010;--browse-clr-27: #263238;--browse-clr-28: #4e342e;--browse-clr-29: #1a237e;--browse-clr-30: #311b92}@property --avg-color{syntax: "<color>"; initial-value: transparent; inherits: false;}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}*,:after,:before{box-sizing:border-box}html{height:100dvh;overscroll-behavior:none}body{margin:0 auto;background-color:var(--app-background);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:--var(clr2)}h1,h2,h3,h4,h5,h6{margin:0 0 .6em}p{margin:0 0 1em}a{text-decoration:none;color:unset}a:hover{text-decoration:underline}ul{list-style:none;padding:0}input{max-width:100%}img,embed,video,object{display:block;object-fit:cover}.icon{fill:var(--sp-gray);color:var(--sp-gray);cursor:pointer}.icon:hover{fill:var(--sp-white);color:var(--sp-white)}.icon.black{fill:#000}.icon.white{fill:var(--sp-white)}.icon.small{width:16px}.icon.small-medium{width:20px}.icon.medium{width:24px}.icon.medium-large{width:30px}.icon.large{width:32px}.icon.active{fill:#fff}.icon.on,.on .icon{fill:var(--sp-green)}.tooltip-wrapper{display:flex;align-items:center}hr{border:none;height:1px;background-color:var(--sp-gray)}.general-layout{display:grid;max-width:100vw;overflow-x:hidden;grid-template-columns:.8rem 1fr .8rem;grid-template-rows:auto 1fr;height:100dvh;min-height:0}.general-layout>*{grid-column:2}.general-layout>*.full{grid-column:1 / -1}main{display:grid;grid-template-columns:var(--sidebar-width) 4px 1fr auto;gap:4px;width:100%;max-width:100%;overflow:hidden;--sidebar-width: 320px;min-height:0}@media (max-width:600px){main{grid-template-columns:auto;display:block}}main.sidebar-expend{grid-template-columns:1fr 0fr 0fr}.main-content{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;border-radius:8px;background-color:var(--sp-black)}.sample-grid-layout{display:grid;grid-template-columns:12px 1fr 12px}@media (min-width: 624px){.sample-grid-layout{grid-template-columns:minmax(12px,1fr) minmax(auto,624px) minmax(12px,1fr)}}@media (min-width: 784px){.sample-grid-layout{grid-template-columns:minmax(12px,1fr) minmax(auto,784px) minmax(12px,1fr)}}@media (min-width: 1048px){.sample-grid-layout{grid-template-columns:minmax(12px,1fr) minmax(auto,1048px) minmax(12px,1fr)}}.sample-grid-layout>*{grid-column:2}.sample-grid-layout>*.full{background-color:var(--clr1);grid-column:1 / -1}.sample-grid-layout>*:not(.full){background-color:var(--clr4)}.main-content::-webkit-scrollbar{width:8px;border-radius:8px}.main-content::-webkit-scrollbar-thumb{background:var(--sp-grey2);border-radius:8px}.flex{display:flex}.flex>.full{flex:1}.flex.column{flex-direction:column}.flex.justify-center{justify-content:center}.flex.align-center{align-items:center}.flex.flex-column{flex-direction:column}.flex.justify-between{justify-content:space-between}.debug *{outline:1px solid gold}button{padding:.5em .8em;border:0;margin:.5em;cursor:pointer;background-color:var(--clr1);color:#f5f5f5}button:hover{transition:.3s;background-color:var(--clr1-light)}.app-header{background-color:var(--sp-dark);padding:.5em 20px;color:var(--sp-white);background-color:var(--app-background);font-family:var(--font-primary)}@media (max-width: 600px){.app-header{width:100vw;padding:8px}}.app-header .result-item{height:80px;padding-inline-start:10px}.app-header .result-item:hover{background-color:var(--sp-hover);border-radius:4px}.app-header .img-overlay{position:relative;width:40px;height:40px;background-color:#000;z-index:2;img {position: absolute; inset: 0; width: 100%; z-index: 1;} &::after {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 2; opacity: 0;} .icon {position: absolute; z-index: 3; top: 50%; left: 50%; translate: -50% -50%; opacity: 0;}}.header-nav{display:flex;align-items:center;justify-content:space-between}@media (max-width:600px){.header-nav{display:grid;grid-template-rows:40px 50px;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}}.nav-left{display:flex;align-items:center;gap:18px}@media (max-width: 600px){.nav-left{grid-row:1}}.logo{margin-inline-end:2em}@media (max-width: 600px){.logo{margin-inline-end:0}}.logo img{width:40px;transition:transform .5s ease-in-out}.logo img:hover{transform:rotate(365deg)}.nav-left a{color:var(--sp-light-gray);font-size:var(--fs-small);font-weight:500;text-decoration:none;transition:.2s}.nav-left a:hover,.nav-left a.active{color:var(--sp-white)}.nav-icon{display:flex;align-items:center;margin-right:1em}.nav-icon i{font-size:var(--fs-h3);color:var(--sp-gray);transition:.2s}.nav-icon i:hover{color:var(--sp-white)}.nav-center{flex:1;display:flex;justify-content:center}.search-wrapper{position:relative;width:380px;background-color:var(--sp-card);border-radius:500px;padding:11px 14px;display:flex;align-items:center;gap:10px;outline:transparent;transition:background-color .4s,outline .1s}.search-wrapper:hover{background-color:var(--sp-hover);outline:1px solid var(--sp-border-hover)}.search-wrapper:focus-within{outline:2px solid white}@media (min-width: 700px){.search-wrapper{width:474px}}@media (max-width: 600px){.search-wrapper{width:300px;background-color:#fff;border-radius:3px}}@media (max-width:600px){.nav-center{grid-area:2/1/3/-1}}.search-wrapper:focus-within .icon-search{fill:#fff}.icon-clear{position:absolute;right:4em}.search-wrapper i{color:var(--sp-gray);font-size:var(--fs-small)}.main-search-input{flex:1;input {width: 100%; background: transparent; border: none; outline: none; color: var(--sp-white); font-family: var(--font-title); font-size: var(--fs-small);}}.main-search-input::placeholder{color:var(--sp-gray)}@media (max-width: 600px){.search-input::placeholder{color:var(--sp-dark)}}.nav-right{display:flex;align-items:center;gap:20px}@media (max-width: 600px){.nav-right{gap:8px;grid-row:1;justify-self:end}}.users-group:hover{cursor:pointer;transform:scale(1.1);transition:transform .2s}.login-link{color:var(--sp-white);font-size:var(--fs-small);font-weight:500;text-decoration:none;transition:.2s}.login-link:hover{color:var(--sp-green)}.user-info{display:flex;align-items:center;gap:12px}.user-link{display:flex;align-items:center;gap:8px;color:var(--sp-white);text-decoration:none;font-size:var(--fs-small)}.user-link img{width:32px;height:32px;border-radius:50%}.score{font-size:var(--fs-small);color:var(--sp-gray)}.logout-btn{background-color:transparent;border:1px solid var(--sp-gray);color:var(--sp-light-gray);padding:4px 10px;border-radius:20px;font-size:var(--fs-small);cursor:pointer;transition:.2s}.logout-btn:hover{background-color:var(--sp-hover);border-color:var(--sp-white);color:var(--sp-white)}.app-header .icon-home{display:flex;justify-content:center;background-color:var(--sp-card);width:46px;height:46px;border-radius:50%;transition:background-color .4s}.app-header .icon-home:hover{transform:scale(1.04);transition:none;background-color:var(--sp-hover)}@media (max-width: 600px){.app-header .icon-home{display:none}}.app-header .broswe-wrapper{position:relative;height:24px}@media (max-width: 600px){.app-header .broswe-wrapper{display:none}}.broswe-wrapper:before{content:"";position:absolute;top:0;left:-12px;width:1px;height:24px;background-color:var(--sp-gray)}.app-header .profile-pic{width:var(--fs-extra-2-large);height:var(--fs-extra-2-large);border-radius:50%;border:6px solid var(--sp-dark-2)}.app-header .profile-pic:hover{transform:scale(1.05)}.search-result.container{display:none;position:relative}.search-result.container.open,.search-result.container:focus{display:block;position:absolute;top:53px;right:0;width:inherit;min-height:auto;max-height:40vh;overflow:auto;border-radius:10px;padding-inline:1em;padding-bottom:2.3em;background-color:var(--sp-card);z-index:1000}@media (max-width: 600px){.search-result.container.open,.search-result.container:focus{max-height:60vh}}.user-menu-wrapper{position:relative;cursor:pointer;display:flex;align-items:center;gap:30px}.user-dropdown{position:absolute;top:45px;right:0;background:var(--sp-dark);border:1px solid var(--sp-border);border-radius:6px;padding:8px 0;width:160px;z-index:1000;box-shadow:0 4px 12px #0006}.dropdown-item{color:var(--sp-white);padding:20px 0;margin:0;width:100%;display:block;text-decoration:none;font-size:var(--fs-small);font-family:var(--font-primary);line-height:var(--lh-normal);transition:background .15s ease}.dropdown-item:hover{background:var(--sp-hover)}.btn-clear-recents{width:max-content;height:min-content;padding:.5em 1em;border-radius:2em;justify-self:end;border:1px var(--sp-white) solid;position:absolute;bottom:1em}.app-footer{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-primary);color:var(--sp-white);min-height:3.5rem;font-size:1.3em;padding:.8rem 1rem;height:90px}.app-footer .song-details{display:grid;grid-template-rows:18px 15px;align-content:center}.app-footer .song-title{justify-self:end;height:min-content}.app-footer .mobile-nav-bar{display:none}.app-footer p{margin:0}.app-footer>span{font-size:.8em}.app-footer>span.local-services{color:--var(clr1)}.app-footer>span.remote-services{color:--var(clr5)}@media (max-width: 600px){.app-footer{height:135px;display:grid;justify-content:center}}@media (max-width: 600px){.app-footer .mobile-nav-bar{display:flex;align-items:center;justify-content:space-around;padding-inline:1em}.app-footer .mobile-nav-bar .nav-icon{margin:0;width:min-content}}.library-wrapper{overflow:visible;background:var(--sp-black);border-radius:8px}.library{padding:15px 12px;color:var(--sp-white);font-family:var(--font-primary);background-color:var(--sp-black);width:100%;height:100%;overflow:visible;border-radius:8px}.library:hover .collapse-library{opacity:1;transform:translate(10px)}.library:hover .library-header h1{transform:translate(30px)}.library-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.sidebar-collapsed .library-header{justify-content:center}.library-title{display:flex;position:relative;align-items:center;gap:10px;cursor:pointer}.library-header h1{font-size:var(--fs-body);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--sp-white);transition:transform .15s ease;cursor:pointer;margin:0;padding-left:10px}.collapse-library{width:var(--fs-body);fill:var(--sp-gray);cursor:pointer;transform:translate(-40px);position:absolute;left:0;opacity:0;transition:transform .15s ease,opacity .3s ease,fill .2s ease}.collapse-library:hover{fill:var(--sp-white)}.header-actions{display:flex;gap:8px;align-items:center}.icon-circle{width:var(--fs-large);height:var(--fs-large);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:var(--sp-dark-2);transition:background-color .2s ease}.icon-circle:hover{background-color:var(--sp-hover)}.icon-circle.createShown{background-color:transparent}.icon-plus{width:50%;height:50%;fill:var(--sp-gray);transition:fill .2s ease}.create-wrapper{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:40px;padding:0 6px}.create-wrapper.createShown{background-color:var(--sp-card)}.create-wrapper.createShown:hover{background-color:var(--sp-hover)}.create-btn{color:var(--sp-white);border:none;font-size:var(--fs-small);font-family:var(--font-bold);font-weight:700;transition:background-color .2s ease;margin:0 10px 0 0;padding:0;font-weight:600}.icon-circle:hover .icon-plus{fill:var(--sp-gray)}.icon-circle-expend-wrapper{width:var(--fs-large);height:var(--fs-large);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;border-radius:50%;transition:background-color .2s ease}.icon-circle-expend-wrapper:hover{background-color:var(--sp-hover)}.expend-side-bar,.minimize-side-bar{position:absolute;width:var(--fs-h2);fill:var(--sp-gray);transition:opacity .2s ease,fill .2s ease}.minimize-side-bar{opacity:0}.sidebar-expend .minimize-side-bar{opacity:1}.sidebar-expend .expend-side-bar{opacity:0}.library-books-wrapper{width:var(--fs-large);height:var(--fs-large);display:none;align-items:center;justify-content:center;position:relative;cursor:pointer}.open-library-icon,.library-books-icon{position:absolute;width:var(--fs-h1);fill:var(--sp-gray);transition:opacity .2s ease,fill .2s ease}.open-library-icon,.library-books-wrapper:hover .library-books-icon{opacity:0}.library-books-wrapper:hover .open-library-icon{opacity:1}.sidebar-collapsed .library-books-wrapper,.library-filter{display:flex}.library-filter button{background-color:var(--sp-card);color:var(--sp-white);border:none;padding:8px 11px;border-radius:20px;font-size:var(--fs-small);font-family:var(--font-primary);cursor:pointer;transition:background-color .2s ease}.library-filter button:hover{background-color:var(--sp-hover)}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-row{display:flex;align-items:center;justify-content:space-between;position:relative;padding:6px;margin-bottom:16px}.icon-medium{width:var(--fs-body);height:var(--fs-body);fill:var(--sp-gray);cursor:pointer;transition:fill .2s ease,transform .25s ease}.icon-medium:hover{fill:var(--sp-white)}.search-row.open .search-library-wrapper{pointer-events:none}.search-input{width:0;opacity:0;padding:0;border:none;background-color:var(--sp-card);border-radius:6px;font-size:var(--fs-small);font-family:var(--font-primary);outline:none;transition:width .25s ease,opacity .15s ease,padding .25s ease}.search-input::placeholder{color:var(--sp-gray)}.search-input.open{width:200px;opacity:1;padding:6px 10px 6px 36px;height:32px}.search-row.open .search-library-wrapper:hover{background-color:transparent}.search-input{caret-color:var(--sp-white);color:var(--sp-white)}.sort-wrapper{display:flex;align-items:center;gap:6px;margin-left:12px;transition:.15s ease;cursor:pointer}.sort-wrapper.open{margin-left:0;justify-content:flex-start}.sort-wrapper:hover{transform:translateY(-2px) scale(1.03)}.sort-wrapper:hover .label-recents{color:var(--sp-white);cursor:pointer}.sort-wrapper:hover .list-icon{fill:var(--sp-white);cursor:pointer}.search-library-wrapper{position:absolute;left:3px;top:50%;transform:translateY(-50%);width:var(--fs-large);height:var(--fs-large);display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:50%;transition:background-color .2s ease}.search-library-wrapper:hover{background-color:var(--sp-hover)}.label-recents{color:var(--sp-grey2);font-size:var(--fs-small);display:block;transition:color .3s ease}.list-icon{width:var(--fs-h2);fill:var(--sp-gray);transition:fill .2s ease}.label-recents.hide{display:none;pointer-events:none}.sidebar-collapsed .library{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10px;padding-left:3px;padding-right:3px}.sidebar-collapsed .header-actions{flex-direction:column-reverse;gap:10px}.sidebar-collapsed .library-header h1,.sidebar-collapsed .library-filter,.sidebar-collapsed .search-row,.sidebar-collapsed .station-created-by,.sidebar-collapsed .collapse-library,.sidebar-collapsed .icon-circle-expend,.sidebar-collapsed .station-name{display:none}.sidebar-collapsed .library-list li{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0}.sidebar-collapsed .library-list img{width:40px;height:40px;margin:0}.sidebar-collapsed .icon-circle-expend-wrapper{display:none}.resize-handle{transform:translate(1px);padding-left:10px;padding-right:10px;width:1px;cursor:grab;transition:border .1s ease}.resize-handle:hover{border-left:2px solid rgba(255,255,255,.2)}.resize-handle:active{cursor:grabbing;border-left:2px solid var(--sp-white)}.sidebar-expend .collapse-library{display:none}.sidebar-expend .tooltip-title{pointer-events:none}.sidebar-expend .filter-search-wrapper{display:flex;justify-content:space-between;align-items:center}.sidebar-expend .label-recents{display:block}.sidebar-expend .search-row{gap:10px;margin:0}.loader-container{margin:40vh auto;display:flex;flex-direction:column;align-items:center}.loader-container .animation{display:flex;align-items:center;gap:.5rem}.loader-container .animation span{display:inline-block;border-radius:50vw;background-color:var(--sp-gray);width:1em;height:1em;animation:bounce 1.5s infinite ease-in-out both}.loader-container .animation span:nth-child(1){animation-delay:-.32s}.loader-container .animation span:nth-child(2){animation-delay:-.16s}.loader-container p{font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;line-height:1.5em;letter-spacing:1px;text-align:center;margin:1rem 0 0;max-width:50ch}.library-list{display:flex;flex-direction:column;height:100%}@media (max-width:600px){.library-list .inner-list{overflow-y:unset}}.library-list ul{list-style:none;padding:0 4px 0 0;margin:0;display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto;position:relative}.sidebar-collapsed .library-list ul{gap:0}.library-list li{display:flex;align-items:center;gap:12px;padding:12px 10px!important;border-radius:6px;cursor:pointer;transition:background-color .1s ease;position:relative}.custom-tooltip{position:absolute;padding:8px 12px;border-radius:6px;z-index:1000;background-color:var(--sp-card)}.sidebar-collapsed .library-list li{gap:0}.library-list li:hover{background-color:var(--sp-hover)}.icon-white-arrow{position:absolute;top:50%;left:35px;transform:translate(-50%) translateY(-50%);width:24px;height:24px;fill:var(--sp-white);pointer-events:none;display:none;z-index:2}.library-list li:hover .icon-white-arrow{display:block}.library-list img{width:52px;height:52px;border-radius:4px;object-fit:cover;flex-shrink:0}.library-list li:hover img{opacity:.4}.sidebar-collapsed .library-list img{width:50px;height:50px}.library-list .station-info{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.station-name{font-size:var(--fs-body);color:var(--sp-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:7600;font-family:spotify-regular}.station-created-by{font-size:var(--fs-small);color:var(--sp-gray);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:spotify-regular}.playing .station-name{color:var(--sp-green)}.playing .playing-icon{margin-block-start:3px;margin-inline-start:auto}.sidebar-expend .library-list ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-rows:max-content;align-items:start}.sidebar-expend .library-list li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:10px 20px}.sidebar-expend .library-list img{width:170px;height:170px;object-fit:cover;border-radius:8px}.sidebar-expend .station-name{font-size:var(--fs-h3);color:var(--sp-white);font-weight:500;line-height:var(--lh-tight)}.sidebar-expend .station-created-by{font-size:var(--fs-body);color:var(--sp-gray)}.sidebar-expend .library-list li:hover .icon-white-arrow{display:none}.green-play-icon{position:absolute;right:20px;bottom:100px;width:48px;height:48px;border-radius:50%;background-color:var(--sp-green);box-shadow:0 8px 8px #0000004d;display:grid;place-content:center;opacity:0;transform:translateY(7px);transition:opacity .2s ease,transform .2s ease;z-index:3;pointer-events:none}.sidebar-expend .library-list li:hover .green-play-icon{opacity:1;transform:translateY(0)}.player{width:100%;display:grid;grid-template-columns:250px minmax(280px,700px) minmax(50px,auto);justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none}@media (max-width:600px){.player{grid-template-columns:180px minmax(100px,300px);gap:0}}.player .now-playing{display:grid;width:100%;overflow:hidden;text-overflow:ellipsis;gap:.8em;grid-template-columns:56px minmax(0,1fr) 18px;justify-content:center;img {width: 56px; border-radius: 8px;} .song-title {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sp-white); font-size: 13px; width: 100%;} .artist-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sp-gray); font-size: var(--fs-tiny);}}.player .btn-play{cursor:pointer;display:block;right:10px;background-color:var(--sp-white);width:32px;height:32px;border-radius:50%;display:grid;place-content:center;box-shadow:0 8px 8px #0000004d;transition:none}.player .controls{justify-content:center;margin-bottom:4px;gap:1.1em}.player .progress-bar{flex:1;min-width:195px}@media (max-width:600px){.player .progress-bar{min-width:100px}}.player .volume-bar{max-width:93px}.player .volume-controls{justify-self:right;align-items:center;gap:.3em}.player .volume-controls>*:not(.volume-bar){margin-inline-start:.3em}.player .volume-controls .inner-container{display:flex;align-items:center;gap:.3em}.player .volume-controls .inner-container:hover input[type=range]{background-image:linear-gradient(#4CAF50,#4CAF50)}@media (max-width:600px){.player .volume-controls{display:none}}.player .progress-bar,.player .volume-controls .inner-container{input[type="range"]::-webkit-slider-thumb {opacity: 0; -webkit-appearance: none; appearance: none; height: 12px; width: 12px; background-color: var(--sp-white); border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.2); position: relative; left: -1px;} &:hover input[type="range"]::-webkit-slider-thumb {opacity: 1;} input[type="range"]::-moz-range-thumb {opacity: 0; height: 12px; width: 12px; background-color: var(--sp-white); border-radius: 50%; border: none;} &:hover input[type="range"]::-moz-range-thumb {opacity: 1;} input[type="range"] {cursor: pointer; -webkit-appearance: none; appearance: none; height: 4px; background: var(--sp-player-slider); border-radius: 5px; background-image: linear-gradient(var(--sp-white),var(--sp-white)); background-size: 50% 100%; background-repeat: no-repeat; outline: none; &:hover {background-image: linear-gradient(#4CAF50,#4CAF50);}}}.player .shuffle,.player .repeat{display:flex;align-items:center}.player .on .icon{fill:var(--sp-green)}.player .on{position:relative}.player .on:after{content:"";position:absolute;bottom:0;left:33%;width:4px;height:4px;border-radius:50%;background-color:var(--sp-green)}.player .queue-icon.on:after{bottom:-8px}.player .tooltip{position:relative;overflow:visible}.player .timer{color:var(--sp-gray);font-size:13px}.player #seek,.player #volume{width:100%}.player .info{height:20px;align-items:center;gap:.3em}.player .info .timer{width:50px}@media (max-width:600px){.player .info .timer{display:none}}.player .info .timer:first-child{text-align:right}.player .main-container{gap:7px}.player .like-button{align-self:center}@media (max-width:600px){.player .now-playing img{width:40px}.player .now-playing{grid-template-columns:40px minmax(0,.8fr) 23px;gap:.5em}.controls>*:nth-child(2),.controls>*:nth-child(4){width:12px}.controls>*:nth-child(3){width:30px;height:30px}.player .controls{gap:.5em}}.table-header{display:grid;grid-template-columns:40px 2fr 1fr 40px .5fr 40px 40px;align-items:center;padding:12px 28px;position:sticky;top:60px;font-size:var(--fs-small);letter-spacing:var(--ls-normal);z-index:999;background-color:transparent;border-bottom:1px solid var(--sp-border)}@media (min-width:900px){.table-header .col.title{padding-inline-start:60px}}@media (max-width:900px){.table-header{grid-template-columns:10px 60px 2fr 0 30px 40px 30px;padding:0;padding-inline-start:2em;padding-inline-end:1em}.table-header .col.title{justify-self:start;grid-column:3}}.table-header.is-sticky{background-color:var(--sp-black);border-bottom:1px solid var(--sp-border)}.col-index{font-size:var(--fs-h2);display:grid;place-items:center}.song-list{padding:1em;border-bottom:1px solid var(--sp-border)}.song-row-inner{display:grid;grid-template-columns:40px 2fr 1fr 40px .5fr 40px 40px;height:54px;align-items:center;padding-inline:1em}@media (max-width:900px){.song-row-inner{grid-template-columns:10px 2fr 0 30px 40px 30px}}@media (max-width:900px){.song-row-inner:has(.drag-handle){grid-template-columns:40px 2fr 0 30px 40px 30px}}@media (max-width:900px){.song-table:has(.drag-handle) .table-header{grid-template-columns:10px 90px 2fr 0 30px 40px 30px}}.song-date,.col.date{margin-inline-end:1em}@media (max-width:900px){.song-date,.col.date{display:none}.col.album{opacity:0}}.song-row:hover .song-row-inner{background:var(--sp-hover);border-radius:4px}.song-img{height:40px;width:40px;border-radius:8px}.song-title-wrapper{align-items:center;display:grid;grid-template-columns:56px minmax(0,1fr);width:100%;overflow:hidden;text-overflow:ellipsis}.song-title,.song-artist,.song-album{cursor:pointer}.song-album,.song-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}@media (max-width: 1220px){.song-date,.col.date{opacity:0}}.listening-room .song-title,.listening-room .song-artist{max-width:min-content}.station-details .song-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}.station-details .song-info{min-width:0;display:flex;flex-direction:column;overflow:hidden}.song-title:hover,.song-artist:hover,.song-album:hover{text-decoration:underline;text-underline-position:under}.song-album,.song-date,.song-duration,.song-artist{color:var(--sp-gray);font-size:var(--fs-small)}.song-row:hover .song-artist,.song-row:hover .song-album{color:var(--sp-white)}.song-index-wrapper{display:flex;align-items:center;justify-content:center;margin-inline-end:.8em}.icon-white-arrow-details{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--fs-body);fill:var(--sp-white);pointer-events:none;opacity:0;transition:opacity .2s ease}.song-row:hover .icon-white-arrow-details{opacity:1;pointer-events:auto}.song-row:has([data-state=open]) .song-row-inner{background-color:var(--sp-hover-grey);border-radius:4px;color:var(--sp-white)}.song-row:has([data-state=open]) .song-row-inner .icon-options{opacity:1}.options-menu:has([data-state=open]) .first{background:var(--sp-hover)}.icon-trash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--fs-h3);fill:var(--sp-white);cursor:pointer;display:none}.big-icon-trash{width:var(--fs-extra-large);fill:var(--sp-white);cursor:pointer}.song-row:hover .icon-trash{opacity:1;display:block}.icon-options{opacity:0;margin-inline-start:1em}.song-row:hover .icon-options,.result-item:hover .icon-options{opacity:1}.song-row .like-icon{opacity:0}.song-row:hover .like-icon{opacity:1}.song-index-wrapper .play-icon-row{display:none}.song-row:hover .play-icon-row{display:block}.song-row:hover .song-index{display:none}.song-table.container{grid-area:4 / 1 / 5 / 2;z-index:2}.song-table .search.container,.station-details .search.container{margin-inline-start:2em;margin-block-end:3em;margin-block-start:2em;min-height:200px}.song-table .search.container .wrapper,.station-details .search.container .wrapper{position:relative;width:max-content}.song-table .search.container .wrapper .tooltip-wrapper,.station-details .search.container .wrapper .tooltip-wrapper{position:absolute;left:10px;bottom:11px;width:18px}.song-table .search-input,.station-details .search-input{width:380px;height:40px;border:none;padding:1em 2.5em;background-color:var(--sp-hover);border-radius:6px;font-size:var(--fs-small);font-family:var(--font-primary);font-weight:600;outline:none;color:var(--sp-white)}.result-item{display:grid;grid-template-columns:56px 2fr 2fr;height:54px;align-items:center;padding-inline-start:10px}.station-details hr{margin:1em}.song-table .btn-add-song,.station-details .btn-add-song{width:min-content;height:min-content;padding:.5em 1em;border-radius:2em;justify-self:end;border:1px var(--sp-white) solid;transition:.2s}.song-table .btn-add-song:hover,.station-details .btn-add-song:hover{color:var(--sp-black);background-color:var(--sp-white)}.options-menu{background:var(--sp-card);border:none;border-radius:4px;display:flex;flex-direction:column;padding:.4em}.option{padding:.3em .5em}.options-menu .option:hover{background:var(--sp-hover)}@media (max-width:600px){.station-table .search-input,.station-details .search-input{width:250px}.song-table.container .song-list{padding:0}.song-table.container .icon-options{opacity:1}.song-row-inner{grid-template-columns:10px 2fr 0 30px 40px 30px}.col.album{opacity:0}.col.title{justify-self:end}}.sidebar.container{position:relative;height:100%;background-color:var(--sp-black);color:var(--sp-white);display:flex;flex-direction:column;border-radius:4px;overflow:visible;transition:none;margin-left:6px;align-items:center;min-height:0}.sidebar.container .icon-options{opacity:1}.resizer-handle{position:absolute;left:-10px;top:0;width:10px;height:100%;cursor:grab;z-index:1000;display:flex;justify-content:center}.resizer-line{width:2px;height:100%;background-color:transparent;transition:background-color .2s}.resizer-handle:hover .resizer-line{background-color:#fff3}.resizer-handle:active .resizer-line{background-color:var(--sp-white)}.resizer-handle:active{cursor:grabbing}.sidebar-content{flex:1;padding:15px;white-space:normal;width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;margin-top:1em}.sidebar-content::-webkit-scrollbar{width:8px;border-radius:8px}.sidebar-content::-webkit-scrollbar-thumb{background:var(--sp-grey2);border-radius:8px}.station-index::-webkit-scrollbar{width:8px}.station-index::-webkit-scrollbar-thumb{background:var(--sp-grey2)}::-webkit-scrollbar-track{background-color:transparent}.side-bar-item h1{font-size:1.2rem;margin:0}.sidebar.container.close{cursor:pointer;transition:transform .6s ease}.sidebar.container.close:hover{transform:translate(-10px);z-index:1000}.sidebar .arrow-side-bar{rotate:180deg;position:absolute;top:45%;left:28%;transition:.4s}.sidebar:hover .arrow-side-bar{transform:translate(5px)}.sidebar header{width:200px;h1 {margin: 0;} align-items: center;gap:.3em}.sidebar:hover header{gap:1em}.collapse-side{opacity:0;transform:translate(10px);transition:transform .05s ease,opacity .2s ease;transition-delay:opacity .1s}.sidebar header{transform:translate(-20px);transition:transform .15s ease}.sidebar:hover{header {transform: translateX(10px)}}.sidebar:hover .collapse-side{opacity:1;transform:translate(0);transition:transform .2s ease,opacity .3s ease}.queue .img-overlay{position:relative;width:40px;height:40px;background-color:#000;z-index:2;img {position: absolute; inset: 0; width: 100%; z-index: 1;} &::after {content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 2; opacity: 0;} .icon {position: absolute; z-index: 3; top: 50%; left: 50%; translate: -50% -50%; opacity: 0;}}.result-item:hover .img-overlay:after{opacity:1}.result-item:hover .img-overlay .icon{opacity:1}.sidebar .now-playing-song img{width:100%;border-radius:8px}.now-playing-song{margin-block:1em;width:100%}.now-playing-song .song-title{font-size:var(--fs-h1);text-wrap:wrap}.now-playing-song .song-artist{font-size:var(--fs-h3)}.now-playing-song .inner-container{margin-block-start:.5em;display:flex;align-items:center;padding-inline-end:.5em}.now-playing-song .inner-container .like-icon{margin-inline-start:auto}.artist-bio{text-wrap:wrap;background-color:var(--sp-card);border-radius:0 0 8px 8px;img {width: 100%; margin-bottom: 10px;}}.bio{width:100%;background-color:var(--sp-card);padding:.9em}.long-txt{height:auto;color:var(--sp-gray);font-size:.9em}.sidebar .artist-bio-header{font-size:large;margin-bottom:.5em;margin-left:.8em;margin-top:.8em}.queue{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;background-color:var(--sp-black);border-radius:4px;overflow-y:auto;overflow-x:hidden;padding:15px}.queue .result-item{display:grid;grid-template-columns:56px minmax(0,1fr) 20px 30px;height:54px;align-items:center;margin:1em .3em;min-width:0%;overflow:hidden;white-space:nowrap}.queue .result-item .like-icon{justify-self:end}.queue .result-item .song-title,.queue .result-item .song-artist{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%}.queue .result-item .song-info{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.queue .result-item:hover{background-color:var(--sp-hover);border-radius:4px}@media (max-width: 600px){.queue{width:90vw}}.queue h1{font-size:var(--fs-h2)}.queue h3,h2{font-size:1em}.playing .song-title{color:var(--sp-green)}.bio button{width:min-content;height:min-content;padding:.5em 1em;border-radius:2em;justify-self:end;border:1px var(--sp-white) solid;margin-top:1em}.bio button:hover{color:var(--sp-black);background-color:var(--sp-white)}.exit-btn{cursor:pointer;position:absolute;top:5px;right:10px;padding:1em}.sidebar .queue header{margin-top:1em}.user-msg{position:fixed;bottom:100px;right:50%;translate:65%;background:var(--sp-dark);color:var(--sp-white);padding:14px 20px;border-radius:8px;box-shadow:0 4px 12px var(--sp-border);font-size:.95rem;font-weight:500;z-index:9999;opacity:0;transform:translateY(10px);animation:fadeIn .25s ease forwards}@media (max-width:600px){.user-msg{bottom:180px;translate:50%}}.user-msg.success{border-left:4px solid var(--success)}.user-msg.error{border-left:4px solid var(--error)}@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}.home{overflow:scroll}.chat{padding:20px;height:100%;display:flex;flex-direction:column;justify-content:space-between;color:var(--sp-white);position:relative}.back-icon{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:5px;color:var(--sp-gray);cursor:pointer}.chat-header{font-size:var(--fs-h1);font-weight:600;margin-bottom:12px;color:var(--sp-white);letter-spacing:var(--ls-tight)}.chat ul.messages{flex:1;overflow-y:auto;padding-right:6px;margin-bottom:15px;scrollbar-width:thin;scrollbar-color:var(--sp-green) var(--sp-dark-2)}.chat ul.messages::-webkit-scrollbar{width:6px}.chat ul.messages::-webkit-scrollbar-thumb{background:var(--sp-green);border-radius:10px}.msg-bubble{max-width:75%;margin-bottom:8px;padding:12px 12px 8px;border-radius:7.5px;position:relative;font-size:var(--fs-small);line-height:1.3;word-wrap:break-word;background:var(--sp-dark-2)}.msg-bubble:not(.own){border-bottom-left-radius:2px;border-bottom-right-radius:7.5px}.msg-bubble.own{margin-left:auto;margin-right:0;background:var(--sp-green);border-bottom-right-radius:2px;border-bottom-left-radius:7.5px;color:#fff}.msg-header{margin-bottom:4px}.msg-from{font-size:11px;font-weight:600;opacity:.8;display:block}.msg-bubble.own .msg-from{opacity:.9;color:#fffffff2}.msg-text{margin-bottom:2px;font-size:var(--fs-small)}.msg-time{font-size:var(--fs-tiny);opacity:.7;position:absolute;bottom:2px;right:6px;font-weight:500;font-family:monospace}.msg-bubble.own .msg-time{color:#fffc}.chat form{display:flex;gap:10px;margin-top:auto;height:40px}.chat input{flex:1;padding:15px;border-radius:10px;border:1px solid var(--sp-border);background:var(--sp-dark-2);color:var(--sp-white);outline:none;font-size:var(--fs-small);transition:.2s;margin:0}.chat input:focus{border-color:var(--sp-greenBrighter);background:var(--sp-dark)}.chat button{padding:12px 18px;background:var(--sp-green);border:none;border-radius:10px;color:var(--sp-white);font-weight:600;font-size:var(--fs-small);cursor:pointer;transition:.2s;margin:0}.chat button:hover{background:var(--sp-greenBrighter)}.chat button:disabled{background:var(--sp-border);cursor:not-allowed}.sidebar-collapsed .library-wrapper .chat{display:none}.chat-expand-btn{position:absolute;bottom:20px;left:20px;width:48px;height:48px;background:var(--sp-green);border-radius:50%;display:none;align-items:center;justify-content:center;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 0 12px #0000004d;animation:floatPulse 1.8s infinite ease-in-out;transition:transform .2s ease}.chat-expand-btn:hover{transform:scale(1.1)}.chat-expand-btn{top:20%;left:15%;transform:translate(-50%,-50%);display:none;width:42px;height:42px;background:var(--sp-green);border-radius:50%;align-items:center;justify-content:center;color:#fff;cursor:pointer;box-shadow:0 0 12px #0000004d;animation:floatPulse 1.8s infinite ease-in-out;transition:transform .2s ease;position:relative}.chat-expand-btn:after{content:"Expand";position:absolute;bottom:50px;left:55%;transform:translate(-50%);white-space:nowrap;font-size:var(--fs-body);color:var(--sp-white);opacity:.9;pointer-events:none}.sidebar-collapsed .chat-expand-btn{display:flex}@keyframes floatPulse{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.05)}to{transform:translateY(0) scale(1)}}.login-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--sp-dark);color:var(--sp-white);padding:2em}.login-page .login-form{display:flex;flex-direction:column;gap:1em;width:min(90%,380px);padding:2em;background-color:var(--sp-card);border:1px solid var(--sp-border);border-radius:12px;font-family:Edu VIC WA NT Beginner,cursive}.login-form input{width:100%;padding:.8em 1em;background-color:var(--sp-dark-2);color:var(--sp-white);border:1px solid var(--sp-border);border-radius:6px;font-size:1rem;transition:border-color .2s ease}.login-form input:focus{outline:none;border-color:var(--sp-green)}.login-form button{padding:.8em;background-color:var(--sp-green);color:var(--sp-white);border:none;border-radius:6px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background-color .2s ease}.login-form button:hover{background-color:var(--sp-greenBrighter)}.btns{margin-top:1em;font-size:.9rem;color:var(--sp-gray)}.btns a{cursor:pointer;color:var(--sp-green);transition:color .2s ease}.btns a:hover{color:var(--sp-greenBrighter)}.guest-btn{margin-top:16px;background:transparent;color:var(--sp-gray);border:1px solid var(--sp-gray);padding:10px 16px;border-radius:20px;cursor:pointer;transition:.2s ease}.guest-btn:hover{color:var(--sp-white);border-color:var(--sp-white);background:var(--sp-hover-transparent)}.home{margin:0;height:100%;overflow:hidden}.station-index.container{display:flex;flex-direction:column;color:var(--sp-white);font-family:var(--font-primary);background-color:var(--sp-black);border-radius:8px;height:100%;overflow-y:scroll;overflow-x:hidden;header {height: 69px; border-radius: 5px 5px 0 0; position: sticky; top: 0; z-index: 10; transition: .2s ease-out; z-index: 999; @media (max-width:600px) {opacity: 0; height: 20px;}} .gradient {background: linear-gradient(var(--avg-color)100px,rgba(0,0,0,0) 300px); border-radius: 8px;} .body>:not(.station-carousel) {padding: 1em 2.3em;}}.station-index .filter-btns{display:flex;gap:.6em;padding:1em 2.2em;button {background-color: var(--sp-index-btns); color: var(--sp-white); border: none; padding: 10px 14px; margin: 0; border-radius: 20px; font-size: var(--fs-small); font-family: var(--font-primary); cursor: pointer; transition: .2s;} button:hover {background-color: var(--sp-hover-transparent);}}.add-station{color:var(--sp-white)}.add-station-header{padding:24px}.add-image-wrapper{position:relative;width:220px;height:220px;display:flex;justify-content:center;align-items:center;overflow:hidden;box-shadow:0 4px 60px #00000080}.add-station-cover{width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:0 4px 20px #0006;transition:opacity .3s ease}.add-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sp-black);opacity:0;z-index:1}.add-image-wrapper:hover .add-image-overlay{opacity:.6}.icon-pen,.add-image-wrapper:after{position:absolute;opacity:0;pointer-events:none;z-index:2}.add-image-wrapper:hover .icon-pen,.add-image-wrapper:hover:after{opacity:1}.icon-pen{top:45%;left:50%;transform:translate(-50%,-50%);width:var(--fs-extra-large);fill:var(--sp-white)}.add-image-wrapper:after{content:"Choose photo";top:65%;left:50%;transform:translate(-50%);color:var(--sp-white);font-size:var(--fs-small);font-family:var(--font-primary);white-space:nowrap}.add-station-meta{display:flex;flex-direction:column;gap:8px;justify-content:flex-end}.add-station-label{font-family:var(--font-primary);font-size:var(--fs-small);letter-spacing:1px;color:var(--sp-white)}.add-station-title{font-family:var(--font-title);font-size:clamp(2.5rem,6vw,8rem);font-weight:800;line-height:1.1;margin:0}.add-station-subinfo{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);opacity:.9}.add-songs{display:flex;justify-content:space-between;align-items:center;padding:24px;position:relative}.add-search-row{position:relative}.add-icon-search{position:absolute;top:30%;left:2%;width:var(--fs-body);fill:var(--sp-gray)}.icon-x{width:var(--fs-h1);fill:var(--sp-gray)}.search-songs{width:400px;height:40px;padding:8px 32px;border:none;border-radius:6px;background-color:var(--sp-card);font-size:var(--fs-small);font-family:var(--font-primary);color:var(--sp-white);caret-color:var(--sp-white);outline:none;transition:width .25s ease,opacity .15s ease,padding .25s ease}.search-songs::placeholder{color:var(--sp-gray);font-weight:600}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:9999}.modal-content{background-color:var(--sp-card);border-radius:8px;width:524px;height:380px;max-height:90vh;overflow-y:auto;color:var(--sp-grey);display:flex;flex-direction:column;overflow:hidden}.modal-hedaer{display:flex;justify-content:space-between;padding:24px}.modal-hedaer h1{margin:0}.modal-icon-x{width:var(--fs-h3);fill:var(--sp-gray)}.modal-info-layout{display:grid;grid-template:32px 132px 32px auto / 180px 1fr;grid-template-areas:"modal-image-wrapper modal-name" "modal-image-wrapper modal-description" "modal-save modal-save" "modal-disclaimer modal-disclaimer";gap:16px;padding:0 24px 24px}.modal-name{grid-area:modal-name;background-color:var(--sp-card-transparent);border:1px solid transparent;border-radius:4px;color:#fff;font-size:14px;height:40px;padding:0 12px;width:100%;font-family:var(--font-primary)}.modal-image-wrapper{grid-area:modal-image-wrapper;position:relative;width:100%;height:100%;border-radius:4px;overflow:hidden;display:flex;justify-content:center;align-items:center}.modal-image{width:100%;height:100%;object-fit:cover;border-radius:4px;transition:opacity .3s ease}.modal-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sp-black);opacity:0;transition:opacity .3s ease;z-index:1}.modal-image-wrapper:hover .modal-image-overlay{opacity:1}.modal-icon-pen{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);width:var(--fs-extra-large);fill:var(--sp-white);opacity:0;transition:opacity .2s ease;z-index:2}.modal-image-wrapper:hover .modal-icon-pen{opacity:1}.modal-image-wrapper:after{content:"Choose photo";position:absolute;top:65%;left:50%;transform:translate(-50%);color:var(--sp-white);font-size:var(--fs-small);font-family:var(--font-primary);white-space:nowrap;opacity:0;transition:opacity .2s ease;z-index:2}.modal-image-wrapper:hover:after{opacity:1}.modal-description{grid-area:modal-description;background:var(--sp-card-transparent);border:1px solid transparent;border-radius:4px;color:var(--sp-white);font-family:var(--font-primary);font-size:var(--fs-small);padding:8px 8px 28px;resize:none;width:100%}.modal-save{grid-area:modal-save;display:flex;justify-content:center;place-self:end;border:none;border-radius:20px;font-weight:700;font-size:var(--fs-body);cursor:pointer;background-color:var(--sp-white);color:var(--sp-black);padding:11px 32px;transition:.2s ease}.modal-save:hover{transform:scale(1.07);background-color:var(--sp-white)}.modal-disclaimer{grid-area:modal-disclaimer;font-size:var(--fs-tiny);color:var(--sp-white);font-weight:700}@media (max-width: 600px){.add-image-wrapper,.image-wrapper{width:100px;height:100px}}.search-index{padding:1em .5em;color:var(--sp-white)}.search-index .header{margin-inline-start:.7em}.search-index .artist-search-results{margin-bottom:1em;margin-left:1em}.search-index .artist-result{margin:.3em;padding:1em .8em}.search-index .artist-result:hover{background-color:var(--sp-card);border-radius:8px}.search-index .artist-info{margin-top:.3em;margin-left:.5em}.search-index .result-item{display:grid;grid-template-columns:56px minmax(0,1fr) 40px 40px;height:54px;align-items:center;margin:1em;min-width:0%;overflow:hidden;white-space:nowrap}.search-index .result-item .like-icon{justify-self:end}.search-index .result-item .song-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.search-index .result-item:hover{background-color:var(--sp-hover);border-radius:4px}.browse.container{color:var(--sp-white);margin-top:1em;padding:1.5em}.browse.container .main-browse{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));grid-auto-rows:min-content;gap:1.5rem}.browse.container .genre-card{border-radius:8px;display:grid;overflow:hidden;cursor:pointer;span {margin-top: 12px; margin-left: 12px; font-size: 1.3em; font-family: var(--font-bold);} img {width: 45%; border-radius: 4px; transform: rotate(25deg) translate(18%,-2%); justify-self: end;}}@media (max-width:600px){.browse.container .main-browse{grid-template-columns:repeat(2,minmax(100px,1fr))}}.genre-card-skeleton{height:180px;border-radius:8px;background:linear-gradient(90deg,var(--skeleton-bg) 25%,rgba(255,255,255,.1) 50%,var(--skeleton-bg) 75%);background-color:var(--skeleton-bg);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;opacity:.7}.chat-icon{position:fixed;bottom:150px;right:1.3em;font-size:1.5em;background-color:var(--sp-greenBrighter);padding:10px 12px;width:50px;height:50px;border-radius:50%;cursor:pointer;z-index:1000}@media (min-width: 600px){.chat-icon{display:none}}.station-filter{display:grid;grid-template-columns:1fr 5em 5em auto;align-items:center;gap:0 .5em;background-color:var(--clr4);padding:.5em}.station-filter h3{grid-column:1 / -1;font-size:.9em;margin:0}.station-filter :not(h3){cursor:pointer}.station-filter input:is([type=text],[type=number]){height:1.8em;border:none;border-block-end:1px solid var(--gray1)}.station-filter input:is([type=text],[type=number]):focus{outline:none;background-color:var(--gray1)}.station-filter .btn-clear{grid-column:4}.station-filter .sort-field,.station-filter .sort-dir{display:flex;align-items:center;gap:1em;font-size:.8em}.station-filter .sort-dir{grid-column:2 / 3}.station-filter>input[type=radio]{display:none}.station-filter label>span{font-size:.9em;padding:.1em .3em;outline:1px solid var(--gray1)}.station-filter label:has(:checked) span{background-color:var(--clr3);color:var(--gray1)}.station-index.container .station-list{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(173px,1fr));gap:.5em;margin:0}@media (min-width: 1300px){.station-index.container .station-list{grid-template-columns:repeat(4,minmax(180px,1fr))}}.station-index.container .station-list .station-created-by{display:none}.station-index.container .station-list .station-name{margin-inline-start:1em;display:block}.station-list-skeleton-loader{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(173px,1fr));gap:.5em;margin:0}@media (min-width: 1300px){.station-list-skeleton-loader{grid-template-columns:repeat(4,minmax(180px,1fr))}}@media (max-width:600px){.station-list-skeleton-loader{grid-template-columns:1fr}}.skeleton-card-loading{background-color:var(--sp-card-transparent);height:48px;min-width:173px;width:100%;background:linear-gradient(90deg,#6b6b6b 25%,#282828 50%,#181818 75%);background-size:200% 100%;animation:shimmer 2s infinite linear;border-radius:8px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.station-preview,.station-list .liked-songs{position:relative;display:flex;align-items:center;color:var(--sp-white);background-color:var(--sp-card-transparent);height:48px;border-radius:5px;min-width:173px;cursor:pointer;transition:background-color .3s;img {cursor: auto; width: 48px; height: 48px; object-fit: cover; border-radius: 5px 0 0 5px;} h3 {margin: 0; padding-left: .8em; padding-right: 2em;} .btn-play {display: none;} .station-name-preview {font-size: var(--fs-small); font-weight: 600; color: var(--sp-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} &:hover {background-color: var(--sp-hover-transparent); .btn-play {display: block; position: absolute; right: 10px; background-color: var(--sp-green); width: 32px; height: 32px; border-radius: 50%; display: grid; place-content: center; box-shadow: 0 8px 8px rgba(0,0,0,.3); transition: none; &:hover {transform: scale(1.04);}}}}.station-carousel{position:relative;color:var(--sp-white);img {width: 153px; height: 153px; object-fit: cover; border-radius: 5px;} .arrow-left {rotate: 180deg;} .arrow-wrapper {position: absolute; top: 45%; cursor: pointer; display: flex; justify-content: center; background-color: var(--sp-card); width: 32px; height: 32px; border-radius: 50%; opacity: 0; z-index: 100; transition: background-color .4s,opacity .1s; &.left {left: 0;} &.right {right: 0;} &:hover {transform: scale(1.04); transition: none; background-color: var(--sp-hover); .icon {fill: white;}}} &:hover .arrow-wrapper {opacity: 1; &.left {left: 1em;} &.right {right: 1em;}} .img-container {position: relative;} .item {padding: .7em; cursor: pointer; &:hover {background-color: var(--sp-carusel-hover); border-radius: 8px;} &:hover .btn-play {transform: translateY(-10px); opacity: 1; &:hover {width: 50px; height: 50px;}}} .btn-play {display: block; cursor: pointer; position: absolute; right: 10px; bottom: 5px; background-color: var(--sp-green); width: 48px; height: 48px; border-radius: 50%; display: grid; place-content: center; box-shadow: 0 8px 8px rgba(0,0,0,.3); opacity: 0; transition: transform .1s,opacity .2s;}}.station-carousel .fade-left{position:absolute;top:-13%;opacity:0;width:100%;height:110%;z-index:100;pointer-events:none;background-image:linear-gradient(to right,rgba(22,21,21,.703),transparent 30%);background-repeat:no-repeat;background-position:left,right;background-size:90% 73%}.station-carousel .description{font-size:14px;color:var(--sp-gray);margin-top:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.station-carousel .list{margin-top:0;display:flex;scrollbar-width:none;overflow-x:scroll;z-index:99;padding:0 2.3em 0 1.5em;h4 {margin-top: .7em;}}.station-carousel .fade-right{position:absolute;top:5%;opacity:1;width:100%;height:90%;z-index:10;pointer-events:none;background-image:linear-gradient(to left,rgba(22,21,21,.703),transparent 30%);background-repeat:no-repeat;background-position:right,left;background-size:-90% 73%}.carusel-title{font-family:var(--font-bold);padding:0 0 0 2em;margin:1em 0 0;font-size:1.1em}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-card-loading{aspect-ratio:1 / 1.35;border-radius:8px;background:linear-gradient(90deg,#181818 25%,#282828 50%,#181818 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite linear}.station-carusels-skeleton-loader{display:flex;flex-direction:column;gap:2em;padding-bottom:2em}.skeleton-carousel-row{display:flex;flex-direction:column}.skeleton-carousel-row .skeleton-title{width:200px;height:24px;margin-bottom:1em;border-radius:4px;background:linear-gradient(90deg,#181818 25%,#282828 50%,#181818 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite linear}.skeleton-carousel-row .skeleton-items-row{display:flex;gap:1.2em;overflow:hidden}.skeleton-carousel-card{min-width:153px;height:220px;padding:.7em;border-radius:8px;display:flex;flex-direction:column;gap:10px}.skeleton-carousel-card .skeleton-img{width:153px;height:153px;border-radius:5px;background:linear-gradient(90deg,#181818 25%,#282828 50%,#181818 75%);background-size:200% 100%;animation:skeleton-shimmer 3s infinite linear}.skeleton-carousel-card .skeleton-text{width:80%;height:14px;border-radius:2px;background:linear-gradient(90deg,#181818 25%,#282828 50%,#181818 75%);background-size:200% 100%;animation:skeleton-shimmer 3s infinite linear}.station-details{background-color:var(--sp-black);color:var(--sp-white);position:relative;background:linear-gradient(to bottom,var(--avg-color) 80px,var(--sp-black) 520px)}@media (max-width: 600px){.station-details{background:linear-gradient(to bottom,var(--avg-color) 50px,var(--sp-black) 440px)}}.station-details.container:after{content:"";background:linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,.3)),linear-gradient(to bottom,var(--avg-color) 0%,var(--sp-black) 25%);grid-area:3 / 1 / 5 / 2}.on .icon{fill:var(--sp-green)}.sticky-actions{display:flex;align-items:center;height:100%;z-index:99}.ent-spacing{height:62px;position:sticky;top:0;z-index:520;background-color:rgba(var(--avg-color-rgb),var(--header-opacity));transition:opacity .3s linear}.gradient-wrapper{position:sticky;top:0}.station-details .top,.station-details .bottom{position:absolute}.listening-room .gradient-wrapper{z-index:500}.station-header{align-items:end;background:linear-gradient(to bottom,var(--avg-color) 0%,color-mix(in srgb,var(--avg-color),transparent 50%) 50%,color-mix(in srgb,var(--sp-black),transparent 70%) 100%);display:grid;gap:24px;grid-template-columns:220px 1fr;padding:0 24px 24px;opacity:var(--header-fade);transition:opacity .15s linear}@media (max-width:600px){.station-header{grid-template-columns:100px 150px}}.image-wrapper{align-items:center;display:flex;height:220px;justify-content:center;width:220px}@media (max-width:600px){.image-wrapper{width:100px;height:100px}}.station-cover{border-radius:4px;box-shadow:0 4px 20px #0006;height:100%;object-fit:cover;width:100%}.station-meta{display:flex;flex-direction:column;gap:8px;justify-content:flex-end}.playlist-label{font-family:var(--font-primary);font-size:var(--fs-small);letter-spacing:1px;color:var(--sp-white)}.station-subinfo,.song-artist,.song-album,.song-date,.song-title,.song-duration{font-family:var(--font-primary)}h1,h2,h3,.creator{font-family:var(--font-bold)}.station-title{font-family:var(--font-title);font-size:clamp(2.5rem,6vw,8rem);font-weight:800;line-height:1.1;margin:0}.station-subinfo{align-items:center;display:flex;font-size:var(--fs-small);gap:8px;opacity:.9}.station-subinfo .dot{opacity:.6}.station-actions{display:flex;justify-content:space-between;padding:0 12px;align-items:center;grid-area:3 / 1 / 4 / 2;z-index:10}.station-actions-wrapper{display:flex;align-items:center;margin-inline-start:5px;padding:20px 0;gap:20px}.play-btn{align-items:center;background:var(--sp-green);border:none;border-radius:50%;cursor:pointer;display:flex;height:48px;justify-content:center;transition:transform .1s ease;width:48px}.icon-large-black{width:var(--fs-h2)}.play-btn:hover{background-color:var(--sp-greenBrighter);transform:scale(1.06)}.like-remove-wrapper{display:flex;gap:20px}.liked-station-hide{display:none}.shuffle-btn,.add-song-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;height:54px;justify-content:center;transition:transform .15s ease;width:54px}.liked{display:none}.check{fill:var(--sp-green)}.duration-icon{width:var(--fs-h1);fill:var(--sp-gray)}@media (max-width:600px){.library-wrapper{display:none}main.side-bar-collapsed aside.library-wrapper{height:50px}.station-index.container .station-list{grid-template-columns:1fr}}