*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;-webkit-font-smoothing:antialiased;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}#app{max-width:480px;min-height:100vh;margin:0 auto;padding:20px 16px}.screen{flex-direction:column;align-items:center;gap:16px;display:flex}.logo{margin-top:40px;margin-bottom:8px;font-size:64px;animation:2s ease-in-out infinite bounce}.logo-icon{width:80px;height:80px;margin-top:40px;margin-bottom:8px;animation:2s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}h1{text-align:center;font-size:28px;font-weight:700}.subtitle{color:#fff9;text-align:center;font-size:15px}.venue-name{text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-top:20px;font-size:26px;font-weight:800}.session-branding{flex-direction:column;align-items:center;gap:4px;margin-top:20px;display:flex}.brand-logo{margin-bottom:4px;font-size:48px}.brand-logo-img{object-fit:contain;max-width:180px;max-height:120px;margin-bottom:4px}.session-branding:has(.brand-logo-img) .brand-name{opacity:.5;-webkit-text-fill-color:#ffffff80;background:0 0;font-size:16px}.session-branding:has(.brand-logo-img) .brand-code{opacity:.3}.brand-name{text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:800}.brand-code{color:#ffffff40;letter-spacing:2px;font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}.session-share-row{justify-content:center;align-items:center;gap:10px;margin-top:8px;display:flex}.share-btn{color:#fff9;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:20px;flex-shrink:0;align-items:center;gap:5px;padding:6px 14px;font-size:12px;font-weight:600;transition:background .2s,color .2s;display:inline-flex}.share-btn:hover{color:#fffc;background:#ffffff26}.powered-by{color:#ffffff40;letter-spacing:.3px;justify-content:center;align-items:center;gap:6px;padding:20px 0 12px;font-size:14px;font-weight:600;display:flex}.session-header{align-items:center;gap:8px;margin-top:16px;display:flex}.session-badge{background:#ffffff1a;border-radius:20px;padding:6px 14px;font-size:14px;font-weight:600}.code-badge{font-variant-numeric:tabular-nums;background:#764ba266;border-radius:20px;padding:6px 14px;font-size:14px;font-weight:700}.card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff12;border:1px solid #ffffff1a;border-radius:20px;width:100%;padding:24px}label{color:#ffffff80;text-transform:uppercase;letter-spacing:.5px;margin-top:16px;margin-bottom:6px;font-size:13px;font-weight:600;display:block}label:first-of-type{margin-top:0}input[type=text],input[type=tel]{color:#fff;background:#ffffff14;border:1px solid #ffffff26;border-radius:12px;width:100%;padding:14px 16px;font-size:16px;transition:border-color .2s,box-shadow .2s}input::placeholder{color:#ffffff4d}input:focus{border-color:#764ba2;outline:none;box-shadow:0 0 0 3px #764ba24d}#codeInput{text-align:center;letter-spacing:12px;margin-bottom:16px;padding:18px 16px;font-size:32px;font-weight:700}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:14px;width:100%;margin-top:20px;padding:16px;font-size:17px;font-weight:600;transition:transform .15s,box-shadow .15s,opacity .15s;box-shadow:0 4px 20px #667eea4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px #667eea66}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{color:#ffffffb3;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:12px;padding:12px 24px;font-size:15px;transition:background .2s}.btn-secondary:hover{background:#ffffff14}.error{color:#ff8a8a;background:#ff505026;border-left:3px solid #ff5050;border-radius:8px;margin-top:16px;padding:12px 16px;font-size:14px}.connection-banner{z-index:9998;text-align:center;padding:10px 16px;font-size:13px;font-weight:600;transition:transform .3s,opacity .3s;position:fixed;top:0;left:0;right:0}.connection-banner.offline{color:#fff;background:#ff5050f2}.connection-banner.reconnected{color:#fff;background:#33cc73f2;animation:2s 1.5s forwards fadeOut}@keyframes fadeOut{to{opacity:0;transform:translateY(-100%)}}.notice-banner{text-align:center;border-radius:12px;width:100%;padding:12px 16px;font-size:14px;font-weight:600;animation:.3s ease-out noticeIn}.notice-banner.closed{color:#ff8a8a;background:#ff505026;border:1px solid #ff50504d}.notice-banner.paused{color:#ffd600;background:#ffd6001f;border:1px solid #ffd6004d}@keyframes noticeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.section-title{color:#ffffff80;text-transform:uppercase;letter-spacing:.5px;margin-top:24px;margin-bottom:12px;font-size:16px;font-weight:600}.queue-card{background:#ffffff0f;border:1px solid #ffffff0f;border-radius:14px;align-items:center;gap:14px;margin-bottom:8px;padding:14px 16px;transition:transform .2s,background .2s;display:flex}.queue-card:hover{background:#ffffff1a}.queue-card.mine{background:#764ba22e;border-color:#764ba266;border-left-style:solid;border-left-width:3px;box-shadow:0 0 12px #764ba226}.queue-card.now-playing{background:#667eea26;border-color:#667eea4d;box-shadow:0 0 16px #667eea33}.queue-card-left{flex-shrink:0}.position-num{color:#fff9;background:#ffffff1a;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:700;display:flex}.playing-badge{letter-spacing:.5px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:10px;font-weight:800;animation:2s ease-in-out infinite pulse;display:flex}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.queue-card-content{flex:1;min-width:0}.song-title{white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;overflow:hidden}.song-artist{color:#ffffff80;white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.song-singer{color:#ffffff59;margin-top:2px;font-size:13px}.you-badge{vertical-align:middle;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:6px;margin-left:6px;padding:2px 10px;font-size:11px;font-weight:700;display:inline-block}.queue-delete-btn{color:#ff8a8a;cursor:pointer;background:#ff505026;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:20px;font-weight:600;line-height:1;transition:background .2s,color .2s;display:flex}.queue-delete-btn:hover{color:#ff5050;background:#ff50504d}.user-songs-header{color:#ffffff80;text-transform:uppercase;letter-spacing:.5px;text-align:center;margin-bottom:8px;font-size:13px;font-weight:600}.user-badge{text-align:center;border-radius:14px;width:100%;margin-bottom:6px;padding:10px 20px;font-size:15px;font-weight:600}.user-badge:last-child{margin-bottom:0}.user-badge.singing{background:linear-gradient(135deg,#667eea4d,#764ba24d);border:1px solid #667eea66}.user-badge.waiting{background:#ffffff14;border:1px solid #ffffff1a}.empty-state{text-align:center;padding:40px 20px}.empty-icon{margin-bottom:12px;font-size:48px}.loading{justify-content:center;padding:40px;display:flex}.spinner{border:3px solid #ffffff26;border-top-color:#764ba2;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.stage-call-overlay{z-index:10000;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(135deg,#0f0c29f2,#302b63f2,#24243ef2);justify-content:center;align-items:center;animation:.4s ease-out overlayIn;display:flex;position:fixed;inset:0}.stage-call-overlay.dismissing{animation:.3s ease-in forwards overlayOut}.stage-call-content{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:40px;animation:.5s ease-out contentPop;display:flex}.stage-call-emoji{font-size:80px;animation:1.5s ease-in-out infinite bounce}.stage-call-title{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:42px;font-weight:800}.stage-call-subtitle{color:#ffffffb3;font-size:20px;font-weight:600}.stage-call-song{color:#ffffff80;margin-top:8px;font-size:16px}.stage-call-dismiss{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:14px;margin-top:24px;padding:16px 48px;font-size:18px;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 20px #667eea4d}.stage-call-dismiss:hover{transform:translateY(-2px);box-shadow:0 6px 24px #667eea66}.stage-call-dismiss:active{transform:translateY(0)}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes overlayOut{0%{opacity:1}to{opacity:0}}@keyframes contentPop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ptr-indicator{text-align:center;color:#fff6;padding:12px;font-size:13px;font-weight:600;transition:opacity .2s}.ptr-indicator.refreshing{color:#764ba2}@media (width<=360px){#app{padding:16px 12px}h1{font-size:24px}.card{padding:20px 16px}}