*{box-sizing:border-box;margin:0;padding:0}body{background:#0a0a0a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.container{background:#1a1a1a;border-radius:20px;box-shadow:0 10px 40px #0000004d;margin:100px auto;max-width:500px;padding:40px;text-align:center}.container h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#4caf50,#2196f3);-webkit-background-clip:text;font-size:48px;margin-bottom:10px}.container p{color:#b0b0b0;margin-bottom:30px}.container input{background:#2a2a2a;border:1px solid #3a3a3a;border-radius:10px;color:#fff}.container button,.container input{font-size:16px;margin:10px 0;padding:14px;width:100%}.container button{border:none;border-radius:10px;cursor:pointer;font-weight:700}.container button.primary{background:#4caf50;color:#fff}.container button.secondary{background:#2196f3;color:#fff}.container button.back{background:#3a3a3a;color:#fff}.room{background:linear-gradient(135deg,#0f0f0f,#1a1a1a);min-height:100vh}.room-header{background:#0006;border-bottom:1px solid #2a2a2a;justify-content:space-between;padding:16px 24px}.logo-section,.room-header{align-items:center;display:flex}.logo-section{gap:20px}.logo-section h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#4caf50,#2196f3);-webkit-background-clip:text;font-size:24px}.room-badge{background:#4caf5033;border-radius:20px;color:#4caf50;font-family:monospace;font-size:14px;letter-spacing:1px;padding:6px 12px}.leave-btn{background:#dc3545;border:none;border-radius:25px;color:#fff;cursor:pointer;padding:8px 20px}.three-columns{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 300px 1fr;height:calc(100vh - 80px);padding:24px}.column{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1e1e1ecc;border:1px solid #2a2a2a;border-radius:20px;display:flex;flex-direction:column;overflow:hidden}.column-header{align-items:center;border-bottom:1px solid #2a2a2a;display:flex;justify-content:space-between;padding:16px 20px}.column-header h3{font-size:18px}.member-count{background:#4caf50;border-radius:20px;font-size:12px;padding:2px 10px}.source-tabs{border-bottom:1px solid #2a2a2a;display:flex;gap:10px;padding:16px}.source-tab{background:#2a2a2a;border:none;border-radius:10px;color:#fff;cursor:pointer;flex:1 1;padding:10px}.source-tab.active{background:red}.source-tab.disabled{cursor:not-allowed;opacity:.5}.search-bar{border-bottom:1px solid #2a2a2a;display:flex;gap:10px;padding:16px}.search-bar input{background:#2a2a2a;border:1px solid #3a3a3a;border-radius:10px;color:#fff;flex:1 1;padding:12px}.search-bar button{background:#4caf50;border:none;border-radius:10px;cursor:pointer;font-size:18px;width:44px}.search-results{flex:1 1;overflow-y:auto;padding:8px}.song-item{align-items:center;background:#2a2a2a;border-radius:10px;cursor:pointer;display:flex;gap:12px;margin:4px 0;padding:10px}.song-item:hover{background:#3a3a3a}.song-item img{border-radius:8px;height:48px;width:48px}.song-info{flex:1 1}.song-title{font-size:14px}.song-artist{color:#b0b0b0;font-size:12px}.play-song-btn{background:#4caf50;border:none;border-radius:50%;cursor:pointer;height:32px;width:32px}.members-list{flex:1 1;overflow-y:auto;padding:8px}.member-item{align-items:center;background:#2a2a2a;border-radius:10px;display:flex;gap:12px;margin:4px 0;padding:12px}.member-item.host{background:#ff980033;border-left:3px solid #ff9800}.member-avatar{font-size:24px}.member-name{flex:1 1}.member-role{background:#3a3a3a}.member-role,.you-tag{border-radius:20px;font-size:10px;padding:2px 8px}.you-tag{background:#4caf50}.host-tip{border-top:1px solid #2a2a2a;color:#b0b0b0;font-size:12px;padding:12px;text-align:center}.host-tip strong{color:#4caf50;font-family:monospace;font-size:16px;letter-spacing:2px}.chat-messages{display:flex;flex:1 1;flex-direction:column;gap:8px;overflow-y:auto;padding:16px}.chat-message{background:#2a2a2a;border-radius:12px;padding:10px 14px}.chat-sender{color:#4caf50;font-size:12px;font-weight:700;margin-bottom:4px}.chat-text{font-size:14px}.chat-time{color:#666;font-size:10px;margin-top:4px}.chat-input-area{border-top:1px solid #2a2a2a;display:flex;gap:10px;padding:16px}.chat-input-area input{background:#2a2a2a;border:1px solid #3a3a3a;border-radius:25px;color:#fff;flex:1 1;padding:12px}.chat-input-area button{background:#4caf50;border:none;border-radius:25px;color:#fff;cursor:pointer;padding:12px 24px}.empty-state{color:#666;padding:40px;text-align:center}.player-view{background:#0a0a0a;min-height:100vh}.player-header{align-items:center;background:#1a1a1a;display:flex;justify-content:space-between;padding:20px}.player-header button{background:#3a3a3a;border:none;border-radius:25px;color:#fff;cursor:pointer;padding:10px 20px}.player-container{margin:40px auto;max-width:900px;padding:20px}.player-container h3{margin-bottom:20px;text-align:center}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#4caf50;border-radius:10px}@media (max-width:768px){.three-columns{gap:16px;grid-template-columns:1fr;height:auto;padding:16px}.column{margin-bottom:0}.room-header{flex-direction:column;gap:12px;text-align:center}.logo-section{flex-direction:column;gap:8px}.room-badge{font-size:12px}.leave-btn{padding:10px;width:100%}.search-bar{flex-direction:column}.search-bar button{padding:12px;width:100%}.source-tabs{flex-direction:column;gap:8px}.source-tab{width:100%}.member-item{padding:10px}.chat-input-area{flex-direction:column}.chat-input-area button{width:100%}.player-container iframe{height:250px}.player-header{flex-direction:column;gap:12px;text-align:center}}@media (min-width:769px) and (max-width:1024px){.three-columns{gap:16px;grid-template-columns:1fr 280px}.chat-column{grid-column:span 2}}.header-buttons{align-items:center;display:flex;gap:12px}.sync-btn{background:#2196f3;border:none;border-radius:25px;color:#fff;cursor:pointer;font-weight:700;padding:8px 20px}.sync-btn.synced{background:#4caf50;cursor:default}.sync-status-bar{background:#1a1a1a;border-bottom:1px solid #2a2a2a;color:#b0b0b0;font-size:12px;padding:8px 20px}@media (max-width:768px){.header-buttons{flex-direction:column;width:100%}.leave-btn,.sync-btn{width:100%}}.ready-waiting{animation:pulse 1.5s infinite}.countdown-overlay{background:#000000e6;z-index:1000}.countdown-number{animation:pulse 1s ease-out;font-size:120px;text-shadow:0 0 20px #4caf5080}.buffering-container{border-radius:12px;padding:40px}.buffering-text{font-size:18px}.host-controls{display:flex;gap:10px;margin-left:auto;margin-right:20px}.host-controls button{background:#4caf50;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;padding:8px 16px}.host-controls button:hover{background:#45a049}.listener-waiting{padding:60px 20px;text-align:center}.waiting-icon{font-size:64px;margin-bottom:20px;opacity:.7}.listener-waiting p{color:#b0b0b0;font-size:16px}.waiting-sub{color:#666;font-size:12px;margin-top:10px}.host-only-badge{background:#4caf50;border-radius:12px;color:#fff;font-size:10px;padding:2px 8px}.listener-info{background:#1e1e1e;border-radius:8px;color:#b0b0b0;font-size:14px;margin-top:20px;padding:15px;text-align:center}.countdown-overlay{align-items:center;background:#000000f2;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.countdown-number{animation:countdownPulse .8s ease-out;color:#4caf50;font-size:150px;font-weight:700;text-shadow:0 0 30px #4caf50cc}.countdown-text{color:#fff;font-size:24px;letter-spacing:2px;margin-top:20px}@keyframes countdownPulse{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.buffering-container{background:#1e1e1e;border-radius:16px;margin:20px;padding:30px;text-align:center}.buffering-text{color:#4caf50;font-size:16px;margin-bottom:15px}.buffering-bar{background:#333;border-radius:4px;height:8px;margin-bottom:15px;overflow:hidden;width:100%}.buffering-fill{background:#4caf50;height:100%;transition:width .3s}.buffering-status{color:#b0b0b0;font-size:14px}.warning-message{background:#ff9800;border-radius:8px;color:#1a1a1a;font-size:12px;font-weight:700;margin:15px;padding:12px 20px;text-align:center}.debug-info{color:#ff9800;font-family:monospace;font-size:10px;margin-top:8px;word-break:break-all}.clock-badge{border-radius:20px;padding:4px 8px}.clock-badge,.drift-indicator{background:#1e1e1e;font-size:12px}.drift-indicator{animation:fadeInOut 3s ease-in-out;border-radius:8px;font-weight:700;padding:8px 16px;position:fixed;right:20px;top:80px;z-index:1000}.drift-indicator.ahead{background:#ff9800;color:#1a1a1a}.drift-indicator.behind{background:#2196f3;color:#fff}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.progress-container{padding:15px 20px}.drift-warning{color:#ff9800;font-size:12px}.drift-debug .ahead{color:#ff9800}.drift-debug .behind{color:#2196f3}.close-debug:hover{color:#fff}.clock-badge{background:#2a2a2a;border-radius:12px;font-size:11px;margin-left:10px;padding:2px 8px}.drift-debug{background:#1e1e1e;border-left:3px solid #4caf50;border-radius:12px;box-shadow:0 4px 12px #0000004d;display:flex;flex-direction:column;font-family:monospace;font-size:12px;gap:4px;padding:12px 20px;position:fixed;right:20px;top:80px;z-index:1000}.drift-debug.host,.drift-debug.warning{border-left-color:#ff9800}.drift-debug.warning{background:#2a1a0a}.drift-debug.notice{border-left-color:#2196f3}.drift-debug.ok{border-left-color:#4caf50}.close-debug{background:none;border:none;color:#666;cursor:pointer;font-size:14px;position:absolute;right:8px;top:5px}.sync-warning{animation:pulse 1s infinite;color:#ff9800}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.progress-container{align-items:center;background:#1e1e1e;border-radius:8px;display:flex;gap:15px;margin:10px 20px;padding:10px 20px}.progress-bar{-webkit-appearance:none;background:#333;border-radius:2px;flex:1 1;height:4px;outline:none}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;background:#4caf50;border-radius:50%;cursor:pointer;height:16px;width:16px}.time-current,.time-total{color:#b0b0b0;font-family:monospace;font-size:12px;min-width:70px}
/*# sourceMappingURL=main.286c47c4.css.map*/