@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background-color:#000;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.app{flex-direction:column;height:100vh;display:flex;position:relative;overflow:hidden}.app:before{content:"";z-index:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000,#0000 59px,#00c8ff1f 59px 60px),repeating-linear-gradient(90deg,#0000,#0000 59px,#00c8ff1f 59px 60px);width:100%;height:100%;position:fixed;top:0;left:0}.app:after{content:"";z-index:0;pointer-events:none;transform-origin:top;background:repeating-linear-gradient(90deg,#0000,#0000 79px,#9d00ff38 79px 80px),repeating-linear-gradient(0deg,#0000,#0000 39px,#9d00ff2e 39px 40px);width:200%;height:50%;position:fixed;bottom:0;left:-50%;transform:perspective(400px)rotateX(45deg);-webkit-mask-image:linear-gradient(#0000 0%,#00000080 30%,#000 100%);mask-image:linear-gradient(#0000 0%,#00000080 30%,#000 100%)}.app-header:after{content:"";background:linear-gradient(90deg,#0000,#00c8ff,#9d00ff,#f0f,#9d00ff,#00c8ff,#0000);height:2px;display:block;box-shadow:0 0 15px #00c8ff80,0 0 30px #9d00ff4d}.app-header{text-align:center;z-index:1;background:#000;flex-shrink:0;padding:10px 30px;position:relative}.app-logo{object-fit:contain;height:270px}.btn-settings{color:#00c8ff;cursor:pointer;opacity:.6;background:0 0;border:1px solid #00c8ff4d;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;transition:all .2s;display:flex;position:absolute;top:14px;right:14px}.btn-settings:hover{opacity:1;border-color:#00c8ff;transform:rotate(45deg);box-shadow:0 0 10px #00c8ff4d}.btn-settings:active{transform:rotate(45deg)scale(.9)}.app-body{z-index:1;flex:1;display:flex;position:relative;overflow:hidden}.panel-left{flex:1;min-width:0;overflow-y:auto}.panel-right{background:#000000e6;border-left:1px solid #00c8ff26;flex-direction:column;flex-shrink:0;width:380px;display:flex}.search-section{padding:16px 20px}.player-wrapper{background:#000}.player-container{aspect-ratio:16/9;background:#000;width:100%;position:relative}.player-container iframe{width:100%;height:100%}.player-info{background:#000c;border-bottom:1px solid #9d00ff33;padding:10px 20px}.now-playing-label{letter-spacing:2px;color:#9d00ff;text-shadow:0 0 8px #9d00ff80;font-size:10px;font-weight:700}.now-playing-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:2px 0;font-size:14px;font-weight:600;overflow:hidden}.now-playing-channel{color:#888;font-size:12px}.btn-popout-overlay{z-index:10;color:#00c8ff;cursor:pointer;opacity:0;background:#0009;border:1px solid #00c8ff66;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;transition:all .2s;display:flex;position:absolute;top:8px;right:8px}.player-container:hover .btn-popout-overlay{opacity:1}.btn-popout-overlay:hover{background:#00c8ff26;border-color:#00c8ff;box-shadow:0 0 10px #00c8ff66}.btn-popout-overlay:active{transform:scale(.9)}.player-popout-placeholder{background:#05050fe6;border-bottom:1px solid #9d00ff33;justify-content:center;align-items:center;width:100%;padding:40px 20px;display:flex}.popout-placeholder-content{text-align:center}.popout-icon{color:#9d00ff;text-shadow:0 0 15px #9d00ff80;margin-bottom:8px;font-size:36px}.popout-label{color:#888;margin-bottom:4px;font-size:14px}.popout-title{color:#ccc;white-space:nowrap;text-overflow:ellipsis;max-width:400px;margin-bottom:12px;font-size:13px;font-weight:600;overflow:hidden}.player-placeholder{background:#05050fe6;border-bottom:1px solid #00c8ff1a;justify-content:center;align-items:center;width:100%;height:120px;display:flex}.placeholder-content{text-align:center;color:#555}.placeholder-icon{color:#00c8ff4d;margin-bottom:12px;font-size:48px}.placeholder-content p{font-size:14px}.search-bar{gap:12px;margin-bottom:16px;display:flex}.search-input{color:#e0e0e0;background-color:#0a0f1ecc;border:2px solid #00c8ff33;border-radius:8px;outline:none;flex:1;padding:12px 16px;font-size:15px;transition:border-color .2s}.search-input:focus{border-color:#c0f;box-shadow:0 0 10px #cc00ff4d}.search-input::placeholder{color:#555}.search-button{color:#00c8ff;cursor:pointer;white-space:nowrap;text-shadow:0 0 8px #00c8ff99;background:#000;border:2px solid #00c8ff;border-radius:8px;padding:12px 24px;font-size:15px;font-weight:600;transition:all .2s;box-shadow:0 0 10px #00c8ff33,inset 0 0 10px #00c8ff0d}.search-button:hover:not(:disabled){color:#c0f;text-shadow:0 0 8px #9d00ff99;border-color:#9d00ff;transform:translateY(-1px);box-shadow:0 0 15px #9d00ff4d,inset 0 0 10px #9d00ff0d}.search-button:disabled{opacity:.4;cursor:not-allowed}.vibe-button{color:#c0f;cursor:pointer;white-space:nowrap;text-shadow:0 0 8px #9d00ff99;background:#000;border:2px solid #9d00ff;border-radius:8px;padding:12px 20px;font-size:15px;font-weight:600;transition:all .2s;box-shadow:0 0 10px #9d00ff33,inset 0 0 10px #9d00ff0d}.vibe-button:hover:not(:disabled){color:#f0f;text-shadow:0 0 10px #f0f9;border-color:#c0f;transform:translateY(-1px);box-shadow:0 0 15px #9d00ff66,inset 0 0 10px #9d00ff1a}.vibe-button:active:not(:disabled){transform:scale(.97)}.vibe-button:disabled{opacity:.4;cursor:not-allowed}.vibe-suggestions{margin-bottom:20px}.vibe-suggestions-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.vibe-header{color:#c0f;text-shadow:0 0 10px #9d00ff80;font-size:18px;font-weight:700}.vibe-suggestions-actions{align-items:center;gap:10px;display:flex}.vibe-count{color:#666;font-size:12px}.btn-vibe-add{color:#c0f;text-shadow:0 0 6px #9d00ff66;border-color:#9d00ff}.btn-vibe-add:hover:not(:disabled){background:#9d00ff1a;box-shadow:0 0 8px #9d00ff4d}.vibe-list{border:1px solid #9d00ff26;border-radius:8px;overflow:hidden}.vibe-item{border-bottom:1px solid #9d00ff14;align-items:center;gap:10px;padding:8px 12px;transition:background .15s;display:flex}.vibe-item:last-child{border-bottom:none}.vibe-item:hover{background:#9d00ff2e}.vibe-item-number{text-align:center;color:#555;flex-shrink:0;width:24px;font-size:11px}.vibe-item-info{flex-direction:column;flex:1;min-width:0;display:flex}.vibe-item-title{color:#e0e0e0;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.vibe-item-artist{color:#888;font-size:11px}.vibe-item-actions{flex-shrink:0;align-items:center;gap:6px;display:flex}.vibe-item-error{color:#f56f27;font-size:10px}.vibe-item-result{flex-shrink:0;align-items:center;gap:6px;display:flex}.vibe-item-thumb{object-fit:cover;border-radius:3px;width:48px;height:27px}.btn-vibe-added{padding:5px 12px;color:#cff527!important;text-shadow:0 0 12px #cff527e6!important;opacity:1!important;border-color:#cff527!important;box-shadow:0 0 10px #cff52766!important}.vibe-show-more{text-align:center;width:100%;margin-top:12px;padding:10px}.vibe-versions{margin-top:8px}.vibe-versions-header{align-items:center;gap:12px;margin-bottom:12px;display:flex}.vibe-versions-title{color:#c0f;font-size:14px;font-weight:600}.vibe-versions-list{flex-direction:column;gap:8px;display:flex}.vibe-version-item{background:#0a0f1ed9;border:1px solid #9d00ff1a;border-radius:8px;align-items:center;gap:10px;padding:8px 10px;transition:background .15s;display:flex}.vibe-version-item:hover{background:#9d00ff14}.vibe-version-thumb{object-fit:cover;border-radius:4px;flex-shrink:0;width:80px;height:45px}.vibe-version-info{flex:1;min-width:0}.vibe-version-name{color:#e0e0e0;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.vibe-version-meta{color:#777;font-size:11px}.btn-add-version{color:#00c8ff;cursor:pointer;text-shadow:0 0 6px #00c8ff66;white-space:nowrap;background:0 0;border:1px solid #00c8ff;border-radius:6px;flex-shrink:0;padding:6px 14px;font-size:12px;font-weight:600;transition:all .2s}.btn-add-version:hover:not(:disabled){background:#00c8ff1a;box-shadow:0 0 10px #00c8ff4d}.btn-add-version:active:not(:disabled){transform:scale(.95)}.btn-add-version-done{color:#cff527;text-shadow:0 0 12px #cff527e6;cursor:default;border-color:#cff527;box-shadow:0 0 10px #cff52766;opacity:1!important}.loading{text-align:center;color:#666;padding:20px;font-size:16px}.error-message{color:#fc8181;background-color:#3b1020;border:1px solid #e53e3e;border-radius:8px;margin-bottom:12px;padding:10px 14px;font-size:13px}.search-results h2{color:#999;margin-bottom:12px;font-size:16px}.results-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;display:grid}.result-card{background-color:#0a0f1ed9;border:1px solid #00c8ff1a;border-radius:10px;transition:transform .2s,box-shadow .2s;overflow:hidden}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #9d00ff4d}.result-thumbnail{aspect-ratio:16/9;width:100%;position:relative;overflow:hidden}.result-thumbnail img{object-fit:cover;width:100%;height:100%}.result-duration{color:#fff;background-color:#000000d9;border-radius:3px;padding:2px 5px;font-size:11px;font-weight:600;position:absolute;bottom:4px;right:4px}.result-info{padding:10px}.result-title{color:#e0e0e0;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:4px;font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.result-vibe-tag{color:#c0f;text-shadow:0 0 6px #9d00ff66;margin-bottom:3px;font-size:10px;font-weight:600}.result-channel{color:#777;margin-bottom:8px;font-size:11px}.btn-add{color:#00c8ff;cursor:pointer;text-shadow:0 0 6px #00c8ff66;background:0 0;border:1px solid #00c8ff;border-radius:6px;width:100%;padding:7px 0;font-size:12px;font-weight:600;transition:all .2s}.btn-add:hover:not(:disabled){background:#00c8ff1a;box-shadow:0 0 10px #00c8ff4d}.btn-add:active:not(:disabled){background:#00c8ff33;transform:scale(.97)}.btn-add-disabled{color:#cff527;text-shadow:0 0 10px #cff527cc;cursor:default;border-color:#cff527;box-shadow:0 0 8px #cff5274d;opacity:1!important}.playlist-queue{flex-direction:column;flex:1;display:flex;overflow:hidden}.queue-header{border-bottom:1px solid #00c8ff1a;justify-content:space-between;align-items:center;padding:14px 16px 10px;display:flex}.queue-header h2{color:#00c8ff;text-shadow:0 0 8px #00c8ff66;font-size:16px}.queue-controls{gap:6px;display:flex}.btn-neon{color:#00c8ff;cursor:pointer;text-shadow:0 0 6px #00c8ff66;background:0 0;border:1px solid #00c8ff;border-radius:5px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .2s}.btn-neon:hover:not(:disabled){background:#00c8ff1a;box-shadow:0 0 8px #00c8ff4d}.btn-neon:active:not(:disabled){transform:scale(.95)}.btn-neon:disabled{opacity:.4;cursor:not-allowed}.btn-small{padding:5px 10px;font-size:11px}.btn-danger{color:#f56f27;text-shadow:0 0 6px #f466;border-color:#f56f27}.btn-danger:hover:not(:disabled){background:#ff44661a;box-shadow:0 0 8px #ff44664d}.queue-empty{color:#555;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px 20px;display:flex}.queue-empty p{font-size:14px}.queue-empty-hint{color:#444;margin-top:6px;font-size:12px}.queue-list{flex:1;padding:4px 0;overflow-y:auto}.queue-item{cursor:default;-webkit-user-select:none;user-select:none;border-left:3px solid #0000;align-items:center;gap:8px;padding:8px 10px 8px 6px;transition:background .15s,transform .1s;display:flex}.queue-item:hover{background:#00c8ff0d}.queue-item:active{background:#00c8ff1f;transform:scale(.98)}.queue-item-active{background:#9d00ff1a;border-left-color:#9d00ff}.queue-item-active:active{background:#9d00ff33}.queue-item-dragover{border-top:2px solid #00c8ff;box-shadow:0 -2px 6px #00c8ff4d}.queue-drag-handle{cursor:grab;color:#444;text-align:center;flex-shrink:0;width:14px;font-size:14px;line-height:1}.queue-drag-handle:hover{color:#00c8ff}.queue-item:active .queue-drag-handle{cursor:grabbing}.queue-position{text-align:center;color:#666;flex-shrink:0;width:20px;font-size:12px}.queue-item-active .queue-position{color:#9d00ff;text-shadow:0 0 6px #9d00ff80}.queue-thumbnail{object-fit:cover;border-radius:3px;flex-shrink:0;width:48px;height:27px}.queue-item-info{flex:1;min-width:0}.queue-item-title{color:#ccc;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;overflow:hidden}.queue-item-active .queue-item-title{color:#fff}.queue-item-meta{color:#666;white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.queue-added-by{color:#888}.queue-added-by-you{color:#00c8ff;text-shadow:0 0 6px #00c8ff66;font-weight:600}.queue-remove{color:#555;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:4px;font-size:14px;transition:color .15s,transform .1s}.queue-remove:hover{color:#f56f27}.queue-remove:active{color:#f24;transform:scale(1.2)}.queue-footer{border-top:1px solid #00c8ff1a;padding:8px 16px}.queue-count{color:#666;font-size:11px}.playlist-sync{background:#0006;border-top:1px solid #00c8ff26;flex-shrink:0;padding:12px 16px}.sync-title{color:#9d00ff;text-shadow:0 0 6px #9d00ff66;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:12px}.sync-connect{gap:6px;display:flex}.sync-input{color:#ccc;background:#0a0f1ecc;border:1px solid #00c8ff33;border-radius:5px;outline:none;flex:1;padding:6px 10px;font-size:11px}.sync-input:focus{border-color:#9d00ff}.sync-connected{flex-direction:column;gap:6px;display:flex}.sync-playlist-name{color:#e0e0e0;white-space:nowrap;text-overflow:ellipsis;margin-bottom:6px;font-size:13px;font-weight:600;overflow:hidden}.sync-status-row{align-items:center;gap:8px;display:flex}.sync-dot{background:#555;border-radius:50%;width:8px;height:8px}.sync-dot-active{background:#ffe600;box-shadow:0 0 6px #ffe60099}.sync-label{color:#ffe600;flex:1;font-size:12px}.sync-details{color:#666;justify-content:space-between;font-size:10px;display:flex}.sync-error{color:#f56f27;margin-top:6px;font-size:11px}.quota-meter{margin-top:8px}.quota-bar{background:#ffffff1a;border-radius:2px;height:4px;overflow:hidden}.quota-fill{background:#00c8ff;border-radius:2px;height:100%;transition:width .3s}.quota-warning{background:#fa0}.quota-critical{background:#f56f27}.quota-text{color:#555;margin-top:2px;font-size:10px;display:block}.settings-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.settings-panel{background:#0d0d1a;border:1px solid #00c8ff33;border-radius:12px;width:480px;max-width:90%;box-shadow:0 0 30px #00c8ff26,0 0 60px #9d00ff1a}.settings-header{border-bottom:1px solid #00c8ff1a;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.settings-header h2{color:#00c8ff;text-shadow:0 0 8px #00c8ff66;font-size:16px}.settings-close{color:#666;cursor:pointer;background:0 0;border:none;font-size:18px;transition:color .15s}.settings-close:hover{color:#f56f27}.settings-body{padding:20px}.settings-section h3{color:#e0e0e0;margin-bottom:6px;font-size:14px}.settings-description{color:#777;margin-bottom:12px;font-size:12px;line-height:1.5}.settings-link{color:#00c8ff}.settings-status{color:#aaa;align-items:center;gap:8px;margin-bottom:12px;font-size:12px;display:flex}.status-dot{border-radius:50%;width:8px;height:8px}.status-default{background:#888}.status-custom{background:#ffe600;box-shadow:0 0 6px #ffe60099}.settings-input-row{gap:8px;margin-bottom:10px;display:flex}.settings-input{color:#e0e0e0;background:#0a0f1ecc;border:1px solid #00c8ff33;border-radius:6px;outline:none;flex:1;padding:8px 12px;font-family:monospace;font-size:13px}.settings-input:focus{border-color:#9d00ff;box-shadow:0 0 8px #9d00ff33}.settings-textarea{color:#e0e0e0;resize:vertical;background:#0a0f1ecc;border:1px solid #00c8ff33;border-radius:6px;outline:none;width:100%;margin-bottom:10px;padding:10px 12px;font-family:monospace;font-size:12px;line-height:1.5}.settings-textarea:focus{border-color:#9d00ff;box-shadow:0 0 8px #9d00ff33}.settings-reset{margin-bottom:10px}.settings-section-divider{border-top:1px solid #00c8ff1a;margin-top:20px;padding-top:16px}.settings-badge{color:#c0f;margin-left:6px;font-size:11px;font-weight:600}.settings-message{border-radius:6px;margin-top:8px;padding:8px 12px;font-size:12px}.settings-message-success{color:#ffe600;background:#ffe6001a;border:1px solid #ffe6004d}.settings-message-error{color:#f56f27;background:#ff44661a;border:1px solid #ff44664d}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#00c8ff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#00c8ff4d}.qr-code-section{text-align:center;background:#0009;border-bottom:1px solid #00c8ff26;padding:16px}.qr-code-container{flex-direction:column;align-items:center;gap:12px;display:flex}.qr-title{color:#f0f;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px #f0f9,0 0 20px #ff00ff4d;margin:0;font-size:18px;font-weight:700}.qr-code-wrapper{background:#fff;border-radius:10px;padding:12px;animation:3s ease-in-out infinite qrPulse;position:relative;box-shadow:0 0 25px #00ffff80}@keyframes qrPulse{0%,to{box-shadow:0 0 25px #00ffff80}50%{box-shadow:0 0 40px #f0f9}}.qr-info{flex-direction:column;gap:4px;display:flex}.qr-room-name{color:#fff;margin:0;font-size:16px;font-weight:600}.qr-invite-code{color:#9d4edd;margin:0;font-size:14px}.qr-invite-code span{color:#0ff;letter-spacing:3px;text-shadow:0 0 8px #0ff9;font-family:monospace;font-size:20px;font-weight:700}.qr-join-url{color:#ffffff80;word-break:break-all;margin:0;font-family:monospace;font-size:11px}.qr-actions{gap:8px;display:flex}.auth-page,.room-lobby,.guest-join{z-index:1;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative;overflow-y:auto}.app.app-page{height:auto;min-height:100vh;overflow-y:auto}.app.app-page:before,.app.app-page:after{position:fixed}.auth-card,.lobby-card,.join-card{background:#0a0f1ee6;border:1px solid #00c8ff33;border-radius:16px;width:100%;max-width:420px;padding:40px;box-shadow:0 0 30px #00c8ff1a,0 0 60px #9d00ff0d}.auth-card h2,.lobby-card h2,.join-card h2{letter-spacing:.08em;color:#9d00ff;text-shadow:0 0 10px #9d00ff80;text-align:center;margin-bottom:24px;font-family:Orbitron,sans-serif;font-size:20px;font-weight:700}.auth-logo{object-fit:contain;max-width:100%;height:200px;margin:0 auto 20px;display:block}.form-group{margin-bottom:16px}.form-group label{color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-size:12px;display:block}.form-group input{color:#e0e0e0;background:#0a0f1ecc;border:1px solid #00c8ff33;border-radius:8px;outline:none;width:100%;padding:12px 14px;font-size:14px;transition:border-color .2s}.form-group input:focus{border-color:#c0f;box-shadow:0 0 10px #c0f3}.btn-primary{color:#00c8ff;cursor:pointer;text-shadow:0 0 8px #00c8ff99;background:0 0;border:2px solid #00c8ff;border-radius:8px;width:100%;padding:12px;font-size:15px;font-weight:600;transition:all .2s;box-shadow:0 0 10px #00c8ff33}.btn-primary:hover:not(:disabled){background:#00c8ff1a;transform:translateY(-1px);box-shadow:0 0 20px #00c8ff4d}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.auth-switch{text-align:center;color:#666;margin-top:16px;font-size:13px}.auth-switch button{color:#c0f;cursor:pointer;text-shadow:0 0 6px #9d00ff66;background:0 0;border:none;font-size:13px}.auth-switch button:hover{color:#f0f}.invite-section{text-align:center;background:#9d00ff14;border:1px solid #9d00ff33;border-radius:10px;margin-bottom:16px;padding:16px}.invite-code-display{letter-spacing:6px;color:#c0f;text-shadow:0 0 15px #9d00ff99;margin:8px 0;font-family:monospace;font-size:32px;font-weight:700}.invite-label{color:#888;text-transform:uppercase;letter-spacing:1px;font-size:11px}.invite-link{color:#00c8ff;word-break:break-all;margin-top:8px;font-size:12px}.btn-copy{color:#00c8ff;cursor:pointer;background:0 0;border:1px solid #00c8ff4d;border-radius:6px;margin-top:8px;padding:6px 16px;font-size:12px;transition:all .2s}.btn-copy:hover{background:#00c8ff1a}.host-dashboard,.guest-dashboard{z-index:1;flex-direction:column;height:100vh;display:flex;position:relative;overflow:hidden}.host-dashboard .app-header,.guest-dashboard .app-header{padding:6px 30px}.guest-welcome-bar{text-align:center;background:linear-gradient(#000a14f2 0%,#000000e6 100%);flex-shrink:0;padding:14px 20px 18px}.guest-welcome-room{letter-spacing:.15em;text-transform:uppercase;color:#fff;text-shadow:0 0 10px #00c8ff99,0 0 30px #00c8ff4d,0 0 60px #9d00ff33;font-family:Orbitron,sans-serif;font-size:1.8rem;font-weight:700;display:block}.guest-welcome-name{letter-spacing:.2em;text-transform:uppercase;color:#00c8ff;opacity:.85;margin-top:6px;font-family:Orbitron,sans-serif;font-size:.95rem;font-weight:500;display:block}.host-dashboard .host-logo{max-width:100%;height:240px!important}.guest-view{z-index:1;max-width:600px;margin:0 auto;padding:16px;position:relative}.guest-header{text-align:center;margin-bottom:16px}.guest-header h2{color:#c0f;text-shadow:0 0 10px #9d00ff80;font-size:18px}.guest-header .guest-members{color:#666;margin-top:4px;font-size:12px}.guest-now-playing{background:#9d00ff14;border:1px solid #9d00ff26;border-radius:8px;margin:0 10px 10px;padding:12px}.guest-now-playing .now-playing-label{font-size:10px}.guest-now-playing .now-playing-title{font-size:14px}@media (width<=768px){.app-body{flex-direction:column}.panel-left,.panel-right{border-left:none;max-width:none;width:100%!important}.panel-right{border-top:1px solid #00c8ff26;max-height:40vh}.results-grid{grid-template-columns:1fr}.search-bar{flex-wrap:wrap}.search-input{width:100%}.search-button,.vibe-button,.btn-add,.btn-vibe-add{min-width:44px;min-height:44px}.app-logo:not(.host-logo){height:60px}.app-header{padding:6px 16px}.vibe-item{flex-wrap:wrap}.vibe-item-actions{justify-content:flex-end;width:100%;margin-top:4px}.guest-welcome-room{letter-spacing:.1em;font-size:1.2rem}.guest-welcome-name{font-size:.8rem}.guest-welcome-bar{padding:10px 16px 14px}.guest-view .playlist-queue{flex-direction:column;max-height:260px;display:flex;overflow:hidden}.guest-view .playlist-queue .queue-list{flex:1;overflow-y:auto}}.btn-leave-room{color:#f56f27;cursor:pointer;z-index:10;background:0 0;border:1px solid #f56f2766;border-radius:4px;padding:6px 14px;font-size:12px;transition:all .2s;position:absolute;top:14px;right:14px}.btn-leave-room:hover{background:#f56f271a;border-color:#f56f27;box-shadow:0 0 10px #f56f274d}.closeout-page{background:#0a0a0f;justify-content:center;min-height:100vh;display:flex;overflow-y:auto}.closeout-container{text-align:center;width:100%;max-width:100%;padding:40px 60px 60px}.closeout-logo{object-fit:contain;height:200px;margin-bottom:10px}.closeout-title{letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 0 15px #00c8ff99,0 0 40px #00c8ff4d,0 0 80px #9d00ff33;margin-bottom:8px;font-family:Orbitron,sans-serif;font-size:2.4rem;font-weight:900}.closeout-guest-name{color:#00c8ff;opacity:.85;margin-bottom:6px;font-size:1rem}.closeout-room-name{letter-spacing:.15em;text-transform:uppercase;color:#9d00ff;margin-bottom:4px;font-family:Orbitron,sans-serif;font-size:1.1rem;font-weight:500}.closeout-date{color:#555;margin-bottom:20px;font-size:.85rem}.closeout-stats{margin-bottom:30px}.closeout-stat{color:#00c8ff;letter-spacing:.1em;border:1px solid #00c8ff33;border-radius:20px;padding:6px 18px;font-family:Orbitron,sans-serif;font-size:.85rem;display:inline-block}.closeout-actions{gap:20px;max-width:800px;margin-bottom:40px;margin-left:auto;margin-right:auto;display:flex}.closeout-action-card{text-align:left;background:#ffffff08;border:1px solid #00c8ff1a;border-radius:12px;flex:1;padding:24px 20px}.closeout-action-card h3{letter-spacing:.1em;text-transform:uppercase;color:#00c8ff;margin-bottom:8px;font-family:Orbitron,sans-serif;font-size:.85rem;font-weight:700}.closeout-action-card p{color:#666;margin-bottom:16px;font-size:.85rem;line-height:1.4}.closeout-btn{text-align:center;width:100%;padding:10px 16px;font-size:.85rem;text-decoration:none;display:block}.closeout-btn-publish{background:#9d00ff26;border-color:#9d00ff66}.closeout-btn-publish:hover{background:#9d00ff40;box-shadow:0 0 15px #9d00ff4d}.closeout-playlist-name{margin-bottom:12px}.closeout-playlist-name label{color:#666;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-size:.75rem;display:block}.closeout-playlist-name input{color:#fff;background:#0006;border:1px solid #00c8ff26;border-radius:6px;width:100%;padding:8px 12px;font-size:.9rem}.closeout-playlist-name input:focus{border-color:#00c8ff66;outline:none}.closeout-note{font-style:italic;color:#555!important}.closeout-error{color:#f56f27;margin-top:8px;font-size:.8rem}.closeout-publish-success p{margin-bottom:12px;color:#cff527!important}.closeout-setlist{text-align:left;max-width:800px;margin-left:auto;margin-right:auto}.closeout-setlist h3{letter-spacing:.15em;text-transform:uppercase;color:#00c8ff;border-bottom:1px solid #00c8ff1a;margin-bottom:12px;padding-bottom:8px;font-family:Orbitron,sans-serif;font-size:.8rem;font-weight:700}.closeout-song-list{flex-direction:column;gap:2px;display:flex}.closeout-song{border-radius:6px;align-items:center;gap:12px;padding:8px 10px;transition:background .15s;display:flex}.closeout-song:hover{background:#ffffff08}.closeout-song-num{color:#333;text-align:right;min-width:24px;font-family:Orbitron,sans-serif;font-size:.8rem}.closeout-song-info{flex:1;min-width:0}.closeout-song-title{color:#ddd;white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;display:block;overflow:hidden}.closeout-song-meta{color:#555;white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;display:block;overflow:hidden}.closeout-new-room{letter-spacing:.1em;margin-top:40px;padding:14px 40px;font-family:Orbitron,sans-serif;font-size:1rem;font-weight:700}@media (width<=768px){.closeout-container{padding:20px 16px 40px}.closeout-logo{height:140px}.closeout-title{font-size:1.6rem}.closeout-actions{flex-direction:column}}