:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.songs-container{display:flex;flex-direction:column;flex:1;min-height:0}.songs-section{display:flex;flex-direction:column;background:#ffffff08;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;box-shadow:0 8px 32px #0000004d;min-height:0;flex:1}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.section-header h2{display:flex;align-items:center;gap:12px;font-size:22px;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;font-weight:lighter;color:#fff}.song-count,.member-count{font-size:14px;color:#fff9;background:#ffffff1a;padding:4px 12px;border-radius:20px}.songs-list{display:flex;flex-direction:column;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-weight:lighter;gap:8px;flex:1;overflow-y:auto;padding-right:8px}.songs-list::-webkit-scrollbar{width:6px}.songs-list::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.songs-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.songs-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.song-item{display:flex;background:#1a1a1a85;border-radius:40px;align-items:center;cursor:pointer;transition:background .2s;padding:8px}.song-item:hover{background:#2c2c2c}.song-index{width:30px;text-align:center}.bars span{display:inline-block;width:2px;height:6px;margin:0 1px;background:#1db954;animation:bounce 1s infinite ease-in-out}.bars span:nth-child(2){animation-delay:.2s}.bars span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,to{height:6px}50%{height:14px}}.play-button{width:36px;height:36px;background:linear-gradient(135deg,#677ad1,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0}.play-btn:hover{transform:scale(1.1);box-shadow:0 4px 15px #667eea66}.members-section{display:flex;flex-direction:column;background:#ffffff08;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;box-shadow:0 8px 32px #0000004d;max-height:calc(100vh - 240px);overflow-y:auto}.members-list{display:flex;flex-direction:column;gap:12px}.member-item{display:flex;align-items:center;gap:12px;padding:16px;background:#ffffff0d;border-radius:12px;transition:all .3s ease;border:1px solid transparent;position:relative}.member-item:hover{background:#ffffff1a;border-color:#fff3}.member-avatar{width:40px;height:40px;background:linear-gradient(135deg,#191970,#782a33);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.member-info{flex:1}.member-info h4{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:15px;font-weight:lighter;color:#fff;margin-bottom:4px}.member-info p{font-size:13px;color:#fff9}.member-status{width:8px;height:8px;border-radius:50%;flex-shrink:0}.member-status.online{background:#4ade80;box-shadow:0 0 8px #4ade8080}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.song-item,.member-item{animation:fadeIn .3s ease forwards}@media (max-width: 1200px){.songs-section{padding:20px}}@media (max-width: 768px){.songs-section{padding:16px}.members-section{max-height:300px}}.playbar{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background-color:#1e1e1e;border-radius:40px;padding:12px 24px;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:0 4px 20px #0000004d;z-index:1000;color:#fff;width:350px;height:auto}.playbar button{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;transition:transform .2s ease}.playbar button:hover{transform:scale(1.15)}.playbar .play-button{background-color:#fff;color:#000;border-radius:80%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 0 10px #fff3;transition:background .2s ease}.playbar .play-button:hover{background-color:#fdfefc}.button-group{display:flex;align-items:center;gap:20px}.playbar input[type=range]{flex:1;margin:0 10px;accent-color:#37aa5f}.time-display{color:#fff9;font-size:.85rem;margin-top:4px}.seek-bar{width:100%;height:6px;border-radius:6px;appearance:none;outline:none;cursor:pointer;background:transparent}.seek-bar::-webkit-slider-runnable-track{height:6px;background:transparent;border-radius:6px}.seek-bar::-moz-range-track{height:6px;background:transparent;border-radius:6px}.seek-bar::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;border:none;transition:opacity .3s ease;opacity:0;margin-top:-3px}.seek-bar.hovered::-webkit-slider-thumb{opacity:1}.seek-bar::-moz-range-thumb{width:12px;height:12px;background:#fff;border-radius:50%;border:none;transition:opacity .3s ease;opacity:0}.seek-bar.hovered::-moz-range-thumb{opacity:1}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow-x:hidden}#root{width:100vw;min-height:100vh;background:linear-gradient(135deg,#000,#000000df,#00000098);color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{width:100vw;min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;display:flex;flex-direction:column}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modal-box{background:#ffffff0d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);padding:2rem;border-radius:20px;width:90%;max-width:400px;text-align:center;box-shadow:0 8px 32px #0000004d}.modal-box h2{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-weight:lighter;margin-bottom:16px;color:#fff}.modal-box p{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-weight:lighter;margin-bottom:20px;color:#fffc}.modal-button{padding:12px 24px;margin:8px;cursor:pointer;background:linear-gradient(135deg,#3f2812,#b67334);color:#000;border:none;border-radius:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-weight:lighter;transition:all .3s ease}.modal-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2b2c3066}.pin-input-container{display:flex;justify-content:center;gap:10px;margin-top:1rem}.pin-input-box{width:40px;height:40px;font-size:1.5rem;text-align:center;border:2px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff0d;color:#fff}.pin-input-box:focus{outline:none;border-color:#667eea;box-shadow:0 0 5px #667eea80}.main-layout{display:grid;grid-template-columns:320px 1fr 300px;gap:20px;padding:20px;flex:1;min-height:0}.left-column{display:flex;flex-direction:column;gap:20px}.center-column{display:flex;flex-direction:column;min-height:0}.right-column{display:flex;flex-direction:column}.upload-section-wrapper{background:#ffffff0d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:0;box-shadow:0 8px 32px #0000004d;transition:all .3s ease}.upload-section-wrapper:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0006;border-color:#fff3}.upload-card{padding:24px}.upload-header{text-align:center;margin-bottom:24px}.upload-icon{width:48px;height:48px;background:linear-gradient(135deg,#141b32,#000);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff}.upload-header h3{font-size:20px;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif;font-weight:lighter;margin-bottom:8px;color:#fff}.upload-header p{font-size:14px;color:#ffffffb3}.upload-body{display:flex;flex-direction:column;gap:16px}.file-input-wrapper{position:relative}.file-input{display:none}.file-input-label{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;background:#ffffff0d;border:2px dashed rgba(255,255,255,.2);border-radius:12px;cursor:pointer;transition:all .3s ease;font-size:14px;color:#fffc;min-height:60px}.file-input-label:hover{background:#ffffff1a;border-color:#ffffff4d;color:#fff}.supported-formats{text-align:center;font-size:12px;color:#ffffff80}.upload-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;background:linear-gradient(135deg,#000,#2b2929ba);border:none;border-radius:12px;color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #54565f4d}.upload-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #a7b0d866}.upload-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.room-info-card{background:linear-gradient(145deg,#191717,#17151590);padding:1.5rem;border-radius:1rem;box-shadow:0 4px 20px #0000004d;color:#fff;text-align:center;position:relative;max-width:400px;margin:0 auto}.room-id-label{position:absolute;top:-10px;left:20px;background:#d0d5ce;color:#020000;padding:.2rem .5rem;font-size:.75rem;border-radius:6px;text-transform:uppercase;letter-spacing:.05em}.room-id-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem;margin-top:.5rem}.room-id-tag{background:#272736;padding:.4rem 1rem;border-radius:.5rem;font-weight:700;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:1rem;color:#c9c9ff}.copy-btn{background:#1c1c2a;border:none;color:#fff;padding:.5rem .8rem;border-radius:.6rem;display:flex;align-items:center;gap:.4rem;cursor:pointer;font-weight:500;transition:all .2s ease}.copy-btn:hover{background:#303040;transform:scale(1.05)}.copy-text{font-size:.9rem}.share-text{font-size:.85rem;margin-top:.6rem;color:#fff9}.note-text{font-family:cursive;font-size:.85rem;margin-top:.6rem;color:#fff9;text-align:left}.social-links a{color:#444;transition:color .3s;padding-right:15px}.social-links a:hover{color:#07f}@media (max-width: 1200px){.main-layout{grid-template-columns:280px 1fr 280px;gap:16px}}@media (max-width: 768px){.main-layout{grid-template-columns:1fr;gap:16px}.left-column{order:1}.center-column{order:2}.right-column{order:3}}.spinner{border:3px solid transparent;border-top:3px solid white;border-radius:50%;width:16px;height:16px;animation:spin .8s linear infinite;margin-right:8px}@keyframes spin{to{transform:rotate(360deg)}}