#root{width:100%;max-width:540px;margin:0 auto;padding:2rem 1.5rem}button{font-family:inherit;cursor:pointer}.home{text-align:center;padding-top:4vh}.home h1{font-size:2.75rem;line-height:1.1;margin-bottom:.35rem;font-weight:800;color:var(--text)}.home h2{font-size:1.05rem;font-weight:500;color:var(--text-dim);margin-bottom:2.5rem}.home .form{display:flex;flex-direction:column;align-items:center}.home .input-box{display:flex;flex-direction:column;margin-bottom:1.1rem;width:300px}.home .input-box label{text-align:left;margin-bottom:.4rem;font-weight:600;font-size:.78rem;color:var(--text-dim);letter-spacing:.04em;text-transform:uppercase}input{color:var(--text);background:var(--surface);border:1px solid var(--border);outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}input::placeholder{color:var(--text-dim)}input:focus{border-color:var(--highlight);box-shadow:0 0 0 3px #8497f72e}.home .input-box input{padding:.75rem .9rem;font-size:1rem;border-radius:var(--radius)}.home .code-input{text-transform:uppercase;letter-spacing:.18em}.home .error{color:var(--danger);margin-top:0;font-size:.9rem;font-weight:500}.home button{display:block;width:300px;font-size:1rem;margin:.6rem auto 0;padding:.75rem 1.2rem;border:1px solid transparent;border-radius:var(--radius);color:#fff;font-weight:600;background:var(--accent);transition:background .15s}.home button:hover{background:var(--accent-2)}.home .host-div{margin-top:3rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.home .host-div h2{font-weight:500;margin:0;font-size:.95rem;color:var(--text-dim)}.home .host-div button{background:var(--surface);border-color:var(--border);color:var(--text)}.home .host-div button:hover{background:var(--surface-2)}.home>p{margin-top:3rem;color:var(--text-dim);font-size:.8rem}.current{position:fixed;top:0;left:5vw;font-size:.85rem;display:flex;height:5vh;align-items:center;color:var(--text-dim);z-index:2}.current h2{font-weight:500}.current .song{position:fixed;left:5.5vw;width:45%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.current .singer{position:fixed;right:5.5vw;width:40%;text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.theater{display:flex;flex-direction:column;position:fixed;top:5vh;left:5vw;z-index:-1;width:90vw;height:88vh;overflow:hidden;text-align:center;justify-content:center;background-color:#000;border-radius:.75rem;border:1px solid var(--border)}.theater-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000}.theater p{font-size:1.5rem;margin:.35rem auto;color:var(--text-dim)}.theater p:first-child{color:var(--text);font-weight:600}.theater iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%}.member-sidebar{position:fixed;top:5vh;left:-340px;width:320px;height:88vh;background:var(--bg-2);color:var(--text);padding:1.5rem;transition:left .3s ease;z-index:1001;border-radius:0 .75rem .75rem 0;overflow:auto;border-right:1px solid var(--border)}.member-sidebar.open{left:0}.member-sidebar h2{margin-top:0;font-size:1.25rem}.member-sidebar ul{list-style-type:none;padding:0}.member-sidebar li{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .8rem;display:flex;list-style:none;align-items:center;overflow:hidden;margin-bottom:.5rem;width:100%}.member-sidebar li p{margin:0;font-weight:500}.member-sidebar li button{all:unset;cursor:pointer;position:absolute;right:.6rem;display:flex;align-items:center;color:var(--danger);border-radius:var(--radius);padding:.15rem;transition:background .15s}.member-sidebar li button:hover{background:#d9556b26}.member-sidebar>button{display:block;margin:1.25rem auto 0;border:1px solid rgba(217,85,107,.4);border-radius:var(--radius);background:#d9556b1f;color:var(--danger);padding:.55rem 1.1rem;font-weight:600;font-size:.85rem;transition:background .15s}.member-sidebar>button:hover{background:#d9556b33}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000008c;z-index:1000}.footer{width:100vw;padding:0 4vw;height:8vh;display:flex;justify-content:space-between;align-items:center;position:fixed;bottom:0;left:0;background:var(--bg-2);border-top:1px solid var(--border)}.num-users{all:unset;width:20%;height:100%;display:flex;align-items:center}.num-users button{all:unset;cursor:pointer;font-size:1.1rem;font-weight:600;color:var(--text);padding:.4rem .9rem;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);transition:background .15s}.num-users button:hover{background:var(--surface-2)}.room-info{text-align:center;margin:0 auto}.room-info h2,.room-info p{margin:0}.room-info .room-code{font-size:1.4rem;font-weight:700;color:var(--highlight);letter-spacing:.05em}.room-info p{color:var(--text-dim);font-size:.85rem;margin-top:.1rem}.queue-info{width:22%;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem}.queue-info h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;max-width:100%;font-size:.8rem;font-weight:500;color:var(--text-dim)}.queue-info button{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:.45rem .85rem;font-weight:600;font-size:.78rem;transition:background .15s}.queue-info button:hover{background:var(--surface-2)}.leave-room{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:.5rem 1rem;font-weight:600;font-size:.85rem;transition:background .15s,border-color .15s,color .15s}.leave-room:hover{background:#d9556b1f;border-color:#d9556b66;color:var(--danger)}.leave-room+h2{text-align:center;font-size:1.5rem;margin:1.25rem 0 .5rem;color:var(--text)}.search-bar{text-align:center;position:relative;width:100%;margin:1.25rem auto 1.75rem}.search-bar input{width:100%;height:3rem;font-size:1rem;padding:0 3.4rem 0 1rem;border-radius:var(--radius)}.search-bar button{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);border:none;background:var(--accent);color:#fff;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:var(--radius);transition:background .15s}.search-bar button:hover{background:var(--accent-2)}.add-error{color:var(--highlight);text-align:center;margin:.75rem 0}.spinner{margin:2rem auto;border:5px solid var(--surface);border-top:5px solid var(--highlight);border-radius:50%;width:42px;height:42px;animation:spin 1s linear infinite}h3{font-size:1.1rem;font-weight:600;margin:1.75rem 0 .75rem;color:var(--text)}ul{padding:0;margin:0}.song-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.65rem;margin:.6rem 0;display:flex;list-style:none;align-items:center;gap:.85rem;overflow:hidden;transition:background .15s,border-color .15s}.song-card:hover{background:var(--surface-2);border-color:#ffffff29}.song-card img{height:52px;width:52px;object-fit:cover;border-radius:var(--radius);flex-shrink:0}.song-card .track-text{margin:0;min-width:0;flex:1}.song-card .track-name,.song-card .artists{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-card .track-name{font-size:1.05rem;font-weight:600}.song-card .artists{font-size:.82rem;color:var(--text-dim);margin-top:.1rem}.song-card button{margin-left:auto;height:2.25rem;width:2.25rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius);border:1px solid var(--border);padding:0;color:var(--text);background:transparent;cursor:pointer;transition:background .15s,border-color .15s}.song-card button:hover{background:var(--accent);border-color:var(--accent);color:#fff}.song-card button:disabled{opacity:.45;cursor:not-allowed;background:transparent;border-color:var(--border);color:var(--text)}@media (max-width: 600px){#root{padding:1.5rem 1rem}.search-bar,.song-card{width:100%}.current .song,.current .singer{font-size:.75rem}.room-info .room-code{font-size:1.15rem}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--bg: #08002b;--bg-2: #0f0836;--surface: #1c2541;--surface-2: #26315c;--accent: #4d5fbf;--accent-2: #6376db;--highlight: #8497f7;--border: rgba(255, 255, 255, .09);--text: #eef0fb;--text-dim: rgba(238, 240, 251, .5);--danger: #d9556b;--radius: .5rem;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--text);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:var(--bg)}h1,h2,h3{font-weight:700;letter-spacing:-.01em}