html,body{background-color:#000;color:#fff;font-family:system-ui,sans-serif;font-family:Roboto,sans-serif;overflow-x:hidden;margin:0;padding:0}.top-bar{background-color:#0a192f;color:#fff;height:60px;display:flex;align-items:center;justify-content:space-between;padding-right:20px;width:100%;box-sizing:border-box;overflow:hidden;padding-left:0;position:relative}.logo{font-weight:700;font-size:18px;display:flex;align-items:center;gap:0px}.search-group-wrapper{flex:1;display:flex;justify-content:center;overflow:hidden}.unified-search-wrapper{position:relative;width:100%;max-width:360px;background-color:#0a192f;border:1px solid #3b82f6;border-radius:9999px;padding:6px 16px;display:flex;align-items:center;animation:red-shimmer 2s ease-in-out infinite;transition:border-color .3s ease,box-shadow .3s ease}.unified-search-wrapper:focus-within{border-color:#fff;box-shadow:0 0 4px #ffffff1a}.unified-search-input{background:transparent;border:none;outline:none;color:#fff;width:100%;font-size:14px;font-family:Roboto,sans-serif}.unified-search-wrapper .search-icon{position:absolute;right:16px;font-size:14px;color:#fff;pointer-events:none}.logo-image{width:90px;height:90px;object-fit:contain;margin-right:-10px}.logo-text{font-size:32px;font-weight:700;color:#fff;font-family:Roboto,sans-serif;margin-left:0;margin-right:10px;line-height:1;animation:red-shimmer 2s ease-in-out infinite;border-radius:6px}.search-with-icon{background-color:#1e3a8a;color:#fff;border:1px solid #3b82f6;padding:8px 36px 8px 12px;border-radius:6px;width:100%;max-width:220px;font-size:14px;box-sizing:border-box;min-width:140px;animation:red-shimmer 2s ease-in-out infinite}.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#fff;pointer-events:none;font-size:14px}@media (max-width: 600px){.search-with-icon{max-width:120px;font-size:12px;padding:6px 28px 6px 10px}.search-group{gap:8px}}.topbar-right{display:flex;align-items:center;gap:12px;flex-shrink:0;position:relative}.copy-button{background-color:#0a192f;color:#fff;padding:6px 16px;border:1px solid #3b82f6;border-radius:9999px;cursor:pointer;font-family:Roboto,sans-serif;transition:background-color .2s ease,border-color .2s ease}.queue-select-button{min-width:80px;transition:background-color .2s ease,border-color .2s ease,width .2s ease}.copy-button:hover{background-color:#112240;border-color:#60a5fa}.copy-button.active{background-color:#3b82f6;border-color:#3b82f6}.leave-room-button{background-color:#dc2626;color:#fff;border:none;border-radius:9999px;padding:6px 16px;font-family:Roboto,sans-serif;cursor:pointer;width:fit-content;transition:background-color .2s ease}.leave-room-button:hover{background-color:#b91c1c}.icon-button{background-color:transparent;color:#fff;border:1px solid #3b82f6;border-radius:6px;padding:6px 10px;font-size:16px;cursor:pointer}@media (max-width: 768px){.top-bar{flex-wrap:wrap;height:auto;padding:10px;row-gap:12px}.logo{width:100%;justify-content:center}.search-group-wrapper,.topbar-right{width:100%;justify-content:center;margin-top:8px}}.shimmer-wrapper{display:inline-block;padding:3px;border-radius:10px;margin:4px 0 4px 8px}@keyframes shimmer-youtube{0%{box-shadow:0 0 4px 1px #ff00004d}50%{box-shadow:0 0 12px 4px #f009}to{box-shadow:0 0 4px 1px #ff00004d}}@keyframes shimmer-spotify{0%{box-shadow:0 0 3px #1db95440}50%{box-shadow:0 0 10px 3px #1db95499}to{box-shadow:0 0 3px #1db95440}}@keyframes shimmer-soundcloud{0%{box-shadow:0 0 3px #ff770040}50%{box-shadow:0 0 10px 3px #f709}to{box-shadow:0 0 3px #ff770040}}.youtube-shimmer:hover .search-wrapper,.youtube-shimmer:focus-within .search-wrapper{animation:shimmer-youtube 3.5s ease-in-out infinite;box-shadow:0 0 0 2px #b2071d80;transform:scale(1.02)}.spotify-shimmer:hover .search-wrapper,.spotify-shimmer:focus-within .search-wrapper{animation:shimmer-spotify 3.5s ease-in-out infinite;box-shadow:0 0 0 2px #1db95480;transform:scale(1.02)}.soundcloud-shimmer:hover .search-wrapper,.soundcloud-shimmer:focus-within .search-wrapper{animation:shimmer-soundcloud 3.5s ease-in-out infinite;box-shadow:0 0 0 2px #ff770080;transform:scale(1.02)}.youtube-shimmer:hover .search-wrapper,.youtube-shimmer:focus-within .search-wrapper{box-shadow:0 0 0 2px #b2071d80;transform:scale(1.02)}.spotify-shimmer:hover .search-wrapper,.spotify-shimmer:focus-within .search-wrapper{box-shadow:0 0 0 2px #1db95480;transform:scale(1.02)}.soundcloud-shimmer:hover .search-wrapper,.soundcloud-shimmer:focus-within .search-wrapper{box-shadow:0 0 0 2px #ff770080;transform:scale(1.02)}.account-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:36px;height:36px;padding:0;background-color:transparent;border:none;cursor:pointer}.account-button .head{width:8px;height:8px;background-color:#fff;border-radius:50%}.account-button .body{width:12px;height:6px;background-color:#fff;border-radius:6px}.account-button:hover .head,.account-button:hover .body{background-color:#60a5fa}.account-popup{position:fixed;right:20px;top:60px;background-color:#0d1117;border:1px solid #3b82f6;border-radius:6px;padding:8px 0;display:flex;flex-direction:column;min-width:160px;z-index:50}.account-popup .dropdown-item{display:flex;align-items:center;gap:8px;padding:6px 16px;background:transparent;color:#fff;border:none;cursor:pointer;font-family:Roboto,sans-serif;text-align:left}.account-popup .dropdown-item:hover{background-color:#112240}.app-layout{display:flex;height:calc(100vh - 60px);overflow:hidden;position:relative}.sidebar{width:240px;background-color:#0d1117;border-right:1px solid #1f2937;padding:20px 16px;color:#fff;box-sizing:border-box;overflow-y:auto;max-height:100vh}.sidebar-title{font-size:18px;font-weight:600;color:#60a5fa;margin-bottom:15px}.sidebar-subtitle{font-size:14px;font-weight:500;color:#cbd5e1;margin-bottom:8px}.user-list{list-style:none;padding:0;margin:0}.user.admin{border-color:#3b82f6;color:#3b82f6;font-weight:600}.user.current{box-shadow:0 0 0 2px #3b82f6}.user{display:flex;align-items:center;background-color:#1e1e1e;padding:8px 12px;border:1px solid #333;border-radius:6px;margin-bottom:8px;font-size:14px;gap:8px;transition:background-color .2s ease,transform .1s ease;cursor:pointer;position:relative}.user:hover{background-color:#2a2a2a}.user:active{transform:scale(.98);background-color:#3b3b3b}.user-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:16px;height:16px}.user-icon .head{width:5px;height:5px;background-color:#fff;border-radius:50%}.user-icon .body{width:7px;height:4px;background-color:#fff;border-radius:4px}.username{color:inherit}.contact-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#1e1e1e;border:1px solid #333;border-radius:6px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:20;width:160px}.contact-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:60px;height:60px}.contact-icon .head{width:20px;height:20px;background-color:#fff;border-radius:50%}.contact-icon .body{width:30px;height:16px;background-color:#fff;border-radius:8px}.contact-name{font-weight:700}.contact-services{display:flex;gap:4px}.contact-services img{width:20px;height:20px}.main-area{display:flex;flex:1;height:100%;overflow:hidden;flex-direction:column;position:relative}.main-content{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:16px;box-sizing:border-box;flex:1;background-color:#181818;position:relative}.now-playing-cover{display:flex;justify-content:center;align-items:flex-start;width:100%;margin-top:40px;margin-bottom:24px}.cover-placeholder{width:min(40vw,320px);height:min(40vw,320px);max-width:320px;max-height:320px;background-color:#333;border-radius:1em;display:flex;justify-content:center;align-items:center;font-size:1.2em;color:#aaa;box-shadow:0 0 16px #0000004d}.now-playing-cover img{width:min(40vw,320px);height:min(40vw,320px);max-width:320px;max-height:320px;border-radius:1em;box-shadow:0 0 16px #0000004d}.youtube-player{width:min(40vw,320px);height:min(40vw,320px);max-width:320px;max-height:320px;border-radius:1em;overflow:hidden;box-shadow:0 0 16px #0000004d}.now-playing-container{display:flex;flex-direction:column;align-items:center;width:60%;max-width:600px;margin:0 auto;padding:.5rem;box-sizing:border-box}.now-playing-text{text-align:center;width:100%}.now-playing-title{font-size:clamp(1.5rem,2vw,2.5rem);font-weight:700;color:#fff;margin-bottom:12px}.now-playing-artist{font-size:clamp(1rem,1.5vw,1.5rem);color:#ccc;margin-top:.3em;margin-bottom:16px}.now-playing-progress{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:24px}.progress-bar{width:100%;height:8px;background-color:#555;border-radius:4px;position:relative;cursor:pointer}.progress-fill{height:100%;background-color:#3b82f6;border-radius:4px 0 0 4px}.progress-thumb{width:14px;height:14px;border-radius:50%;background-color:#fff;position:absolute;top:50%;transform:translate(-50%,-50%);pointer-events:none}.progress-time{display:flex;justify-content:space-between;width:100%;font-size:.9rem;color:#ccc;margin-top:6px}.player-controls{display:flex;justify-content:center;gap:2em;width:100%;margin-top:-20px}.pause-icon{display:flex;gap:5px}.pause-icon .bar{width:5px;height:20px;background-color:#fff;border-radius:1px}.skip-button:hover{transform:scale(1.15)}.pause-button:hover{transform:scale(1.1)}.play-icon{font-size:20px;margin-left:2px}.skip-button.active,.pause-button.active{background-color:#3b82f6;color:#fff!important}.skip-button:disabled{opacity:.5;cursor:not-allowed}.skip-button,.pause-button{border:none;background-color:#1e1e1e;color:#fff;width:clamp(40px,6vw,64px);height:clamp(40px,6vw,64px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem,2vw,2rem);transition:background-color .2s ease}.time-display{display:flex;justify-content:space-between;width:80%;max-width:600px;font-size:clamp(.9rem,1.2vw,1.1rem);color:#aaa;margin:.5em auto}.sidebar.left-sidebar .copy-button{margin-top:0;padding:4px 12px;font-size:14px;width:fit-content}.sidebar.left-sidebar .leave-room-button{margin-top:20px;padding:4px 12px;font-size:14px;width:fit-content}.right-sidebar-wrapper{position:relative;display:flex;flex-direction:row;height:100%;background-color:#1e1e1e}.right-sidebar{display:flex;flex-direction:column;width:300px;max-width:500px;min-width:200px;overflow-y:auto;padding:10px;transition:width .2s ease;background-color:#0d1117;position:relative}.queue-header{display:flex;align-items:center;justify-content:space-between}.empty-queue-message{text-align:center;color:#ccc;margin-top:20px}.queue-card{display:flex;align-items:center;background-color:#1e1e1e;padding:8px 12px;border:1px solid #333;border-radius:6px;margin-bottom:8px;font-size:14px;gap:8px;transition:background-color .2s ease,transform .1s ease;cursor:grab}.queue-card:hover{background-color:#2a2a2a}.queue-card:active{transform:scale(.98);background-color:#3b3b3b;cursor:grabbing}.checkbox{width:24px;height:24px;border:2px solid #3b82f6;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.checkbox.checked{background-color:#3b82f6;color:#fff}.checkbox.checked:after{content:"✕";font-size:16px}.result-card{display:flex;align-items:center;background-color:#1e1e1e;padding:8px 12px;border:1px solid #333;border-radius:6px;margin-bottom:8px;font-size:14px;gap:8px}.album-cover{width:60px;height:60px;object-fit:cover;border-radius:4px;margin-right:10px}.song-info{flex:1}.song-title{font-size:16px;font-weight:700}.artist-name{font-size:14px;color:#ccc}.service-info{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:12px}.album-cover-placeholder{width:60px;height:60px;background-color:#555;border-radius:4px;margin-right:10px}.toggle-btn{position:absolute;top:20px;z-index:10;cursor:pointer;background-color:#222;color:#fff;border:none;border-radius:4px;padding:2px 6px}.left-toggle{left:4px}.right-resizer-handle{position:absolute;top:0;right:0;width:6px;height:100vh;background-color:#444;cursor:ew-resize;z-index:100}.right-toggle{right:0;position:absolute;top:20px}.sidebar-handle{position:absolute;top:0;height:100vh;width:20px;background-color:#222;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:99;-webkit-user-select:none;user-select:none;min-height:60px;padding:0;font-size:18px}.sidebar-handle.right-handle{position:absolute;top:50%;right:0;transform:translateY(-50%);height:40px;width:20px;background-color:#222;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:100;border-left:1px solid #444;border-top-left-radius:10px;border-bottom-left-radius:10px}.sidebar-handle.left-handle{position:absolute;top:50%;left:0;transform:translateY(-50%);height:40px;width:20px;background-color:#222;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:18px;border-right:1px solid #444;border-top-right-radius:10px;border-bottom-right-radius:10px;z-index:99}.sidebar.left-sidebar{position:relative}.invisible-resizer,.sidebar-right-edge{position:absolute;right:0;top:0;width:8px;height:100%;cursor:ew-resize;z-index:10;background:transparent}.sidebar-left-edge{position:absolute;left:0;top:0;width:8px;height:100%;cursor:ew-resize;z-index:10;background:transparent}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0a192ff2;z-index:1000;display:flex;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box}.modal-content{position:relative;background-color:#0d1117;padding:2rem;border-radius:12px;width:100%;max-width:1000px;max-height:80vh;overflow-y:auto;box-shadow:0 0 12px #ffffff1a;animation:modal-fade-in .25s ease-out}.modal-title{color:#fff;margin-bottom:2rem;font-size:1.5rem;text-align:center;margin-top:-1rem}.queue-results{display:flex;flex-direction:column;gap:12px}.multi-column-results{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.service-column{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.service-header{color:#60a5fa;font-size:1.2rem;margin-bottom:12px;text-align:center}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-close-button{position:absolute;top:12px;right:12px;left:auto;font-size:1.5rem;background:transparent;color:#fff;border:none;cursor:pointer;padding:0;line-height:1;z-index:10;transition:color .2s ease}.modal-close-button:hover{color:#60a5fa}.left-sidebar-wrapper{position:relative;overflow:hidden;transition:width .3s ease;display:flex}.left-sidebar-wrapper.slide-out .sidebar{opacity:0;transform:translate(-100%);transition:opacity .2s ease,transform .3s ease}.left-sidebar-wrapper.slide-in .sidebar{opacity:1;transform:translate(0);transition:opacity .2s ease,transform .3s ease}.sidebar.left-sidebar{transition:transform .3s ease,opacity .2s ease}.right-sidebar-container{display:flex;transition:transform .3s ease,opacity .3s ease;height:100%;position:relative}.right-sidebar-container.slide-in{transform:translate(0);opacity:1}.right-sidebar-container.slide-out{transform:translate(100%);opacity:0}.right-sidebar{transition:width .2s ease,opacity .2s ease;overflow-y:auto;height:100%}.result-card{position:relative;cursor:default}.result-link{display:flex;align-items:center;flex:1;gap:8px;text-decoration:none;color:inherit}.action-buttons{display:flex;flex-direction:column;gap:4px;margin-left:auto}.add-to-queue-button,.play-next-button{background-color:#007bff;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:14px;line-height:18px;text-align:center;cursor:pointer;padding:0;transition:background-color .2s ease,transform .1s ease}.add-to-queue-button:hover,.play-next-button:hover{background-color:#0056b3}.add-to-queue-button:active,.play-next-button:active{transform:scale(.9);background-color:#004a99}.submit-link-button{background-color:#007bff;color:#fff;border:none;border-radius:9999px;padding:6px 16px;font-family:Roboto,sans-serif;cursor:pointer;transition:background-color .2s ease,transform .1s ease}.show-more-button{background-color:#1e3a8a;color:#fff;border:none;border-radius:9999px;padding:4px 12px;font-family:Roboto,sans-serif;cursor:pointer;margin:8px auto 0;width:fit-content;transition:background-color .2s ease,transform .1s ease}.show-more-button:hover{background-color:#3b82f6}.show-more-button:active{transform:scale(.95)}.submit-link-button:hover{background-color:#0056b3}.submit-link-button:active{background-color:#004a99;transform:scale(.95)}.submit-link-button:disabled{background-color:#999;cursor:not-allowed;opacity:.6}.link-input-group{display:flex;align-items:center}.link-modal-content{max-width:600px}.setup-modal-content{max-width:350px;min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center}.intro-card{display:flex;flex-direction:column;align-items:center}.intro-logo{width:80px;margin-bottom:1rem}.intro-title{color:#fff;font-size:1.75rem;margin-bottom:2rem;text-align:center}.intro-buttons{display:flex;flex-direction:column;align-items:center;gap:12px}.intro-buttons button{width:220px}.service-checkboxes{display:flex;justify-content:center;gap:12px;margin-top:1rem;color:#fff}.service-checkboxes label{display:flex;align-items:center;gap:4px}.modal-label{color:#fff;margin-bottom:2rem;text-align:right;margin-top:-1.5rem}.icon-label-button1{color:#fff;text-align:center;margin-left:35rem;margin-bottom:.45rem}.icon-label-button2{color:#fff;text-align:center;margin-left:53rem;margin-bottom:.45rem;margin-top:-1.8rem}.action-label{margin-left:.4rem}.banner{position:fixed;top:-100px;left:50%;transform:translate(-50%);padding:1rem 2rem;border-radius:5px;background-color:#000080cc;color:#fff;border:2px solid lightblue;transition:top .5s ease-in-out;z-index:1001}.banner.visible{top:20px}html,body{height:100%;overflow:hidden;margin:0;padding:0}