*{box-sizing:border-box}body{color:#f6f6f6;background:#0e0e0f;margin:0;font-family:Segoe UI,Tahoma,sans-serif}#root{background:#121212;border-left:1px solid #282828;border-right:1px solid #282828;max-width:1200px;min-height:100vh;margin:0 auto}h2,h3{margin:0}.app{color:#f9f9f9}.topbar{z-index:50;border-bottom:1px solid #282828;justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex;position:relative}.topbarBurger{display:none}.topbarNavPanel{align-items:center;gap:.55rem;display:flex}.logo{font-size:1.24rem;font-weight:800}.logo span{color:#e24b4a}.brandBlock{flex-direction:column;gap:.35rem;min-width:0;display:flex}.logoRow{align-items:center;gap:.5rem;display:flex}.groupTopbarTitle{flex-direction:column;gap:.25rem;display:flex}.bandRow{gap:.35rem;display:flex}.bandPicker{min-width:150px;max-width:210px;font-size:.78rem}.bandPicker .customSelectTrigger{padding-top:.38rem;padding-bottom:.38rem}.bandAddBtn{justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:inline-flex}.tabs{gap:.4rem;display:flex}.groupPageTabs{margin-bottom:.75rem}.groupMemberRow{background:#171717;border:1px solid #2f2f2f;border-radius:.6rem;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.45rem;padding:.55rem .65rem;display:flex}.groupMemberHead{align-items:center;gap:.6rem;display:flex}.groupMemberAvatar,.groupMemberAvatarFallback{border-radius:999px;width:34px;height:34px}.groupMemberAvatar{object-fit:cover;border:1px solid #3a3a3a}.groupMemberAvatarFallback{color:#f0f0f0;background:#2a2a2a;border:1px solid #3a3a3a;justify-content:center;align-items:center;font-size:.8rem;font-weight:700;display:inline-flex}.groupMemberMain{color:#efefef;font-weight:600}.groupMemberSub{color:#9f9f9f;margin-top:.2rem;font-size:.78rem}.groupMemberInstrument{color:#cfcfcf;opacity:.88;margin-top:.2rem;font-size:.76rem}.groupMemberActions{flex-shrink:0}.groupInviteCard{background:#181818;border:1px solid #303030;border-radius:.65rem;margin-bottom:.55rem;padding:.6rem .7rem}.groupInviteHeader{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.groupInviteToken{color:#d7d7d7;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}.groupInviteStatus{border:1px solid #3b3b3b;border-radius:999px;align-items:center;padding:.15rem .5rem;font-size:.72rem;display:inline-flex}.groupInviteStatus.isActive{color:#94d7a7;border-color:#2f5d3d}.groupInviteStatus.isInactive{color:#f0a0a0;border-color:#6b3a3a}.groupInviteMeta{color:#9a9a9a;margin-top:.35rem;font-size:.76rem}.groupInviteActions{margin-top:.5rem}.groupStatsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;display:grid}.groupStatCard{background:#171717;border:1px solid #2f2f2f;border-radius:.65rem;padding:.75rem}.groupStatLabel{color:#9f9f9f;font-size:.78rem}.groupStatValue{color:#f2f2f2;margin-top:.2rem;font-size:1.35rem;font-weight:700}.trackPage{gap:.7rem;min-width:0;display:grid}.trackMeta{font-size:.85rem}.trackNavRow{grid-template-columns:1fr 1fr;gap:.5rem;min-width:0;display:grid}.trackNavRow button{white-space:normal;text-align:left;text-overflow:ellipsis;min-width:0;overflow:hidden}.trackSheetCard{box-sizing:border-box;background:#161616;border:1px solid #2f2f2f;border-radius:.75rem;min-width:0;max-width:100%;padding:.9rem;overflow:hidden}.trackSheetScroll{min-width:0;max-width:100%;overflow:auto hidden}.trackSheetCard pre{white-space:pre-wrap;word-break:break-word;color:#e8e8e8;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.45}.tools{align-items:center;gap:.35rem;display:flex}.topbarProfileBadge{color:#d9d9d9;cursor:pointer;background:#202020;border:1px solid #333;border-radius:999px;align-items:center;gap:.45rem;padding:.2rem .5rem .2rem .22rem;font-size:.78rem;display:inline-flex}.profileChevron{color:#bdbdbd;font-size:.72rem;transition:transform .15s}.profileChevron.open{transform:rotate(180deg)}.topbarProfileMenu{position:relative}.topbarProfileDropdown{z-index:25;background:#151515;border:1px solid #333;border-radius:.65rem;gap:.35rem;min-width:140px;padding:.35rem;display:grid;position:absolute;top:calc(100% + .35rem);right:0}.topbarAvatar,.topbarAvatarFallback{border-radius:999px;width:24px;height:24px}.topbarAvatar{object-fit:cover;border:1px solid #3a3a3a}.topbarAvatarFallback{color:#f0f0f0;background:#2a2a2a;border:1px solid #3a3a3a;justify-content:center;align-items:center;font-size:.72rem;font-weight:700;display:inline-flex}.pwaIndicator{color:#d7d7d7;background:#1c1c1c;border:1px solid #3a3a3a;border-radius:999px;align-items:center;gap:.25rem;width:fit-content;padding:.2rem .39rem;font-size:.52rem;display:inline-flex}.pwaIndicator.online{border-color:#2f5d3d}.pwaIndicator.offline{border-color:#7a3d3d}.pwaDot{background:#49c06d;border-radius:999px;width:6px;height:6px}.pwaIndicator.offline .pwaDot{background:#e24b4a}.pwaMode{color:#bcbcbc;border-left:1px solid #3a3a3a;padding-left:.25rem}.iconOnly{justify-content:center;align-items:center;width:40px;height:40px;padding:.35rem;display:flex}.iconOnly img{filter:invert()brightness(1.85);width:18px;height:18px;display:block}.hiddenInput{display:none}.tab{color:#b1b1b1;background:0 0;border:1px solid #0000;border-radius:.55rem;padding:.45rem .85rem;transition:background-color .15s,color .15s,border-color .15s}.tab.active{color:#fff;background:#e24b4a}.tab:hover:not(.active){color:#e5e5e5;border-color:#444}.activeState{color:#fff;border-color:#e24b4a}.layout{grid-template-columns:320px 1fr;min-height:calc(100vh - 70px);display:grid}.sidebar{border-right:1px solid #282828;flex-direction:column;gap:.75rem;padding:1rem;display:flex}.display{text-align:center;background:#222;border-radius:.8rem;padding:1.25rem}.tapDisplay{cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;transition:border-color .12s,transform 80ms}.tapDisplay:hover{border-color:#e24b4a}.tapDisplay:active{transform:scale(.99)}.bpmNumber{font-size:3rem;font-weight:700;line-height:1}.muted{color:#a0a0a0;font-size:.8rem}.beatDots{justify-content:center;gap:.45rem;margin-top:.9rem;display:flex}.dot{background:#404040;border-radius:999px;width:.62rem;height:.62rem}.dot.active{background:#e24b4a}.bpmButtons{grid-template-columns:repeat(2,1fr);gap:.45rem;display:grid}.bpmButtons button,.ghost,.play,.small,.danger,.rowButtons button{color:#efefef;background:#222;border:1px solid #393939;border-radius:.55rem;padding:.55rem;transition:transform 80ms,border-color .12s,filter .12s}.inlineControls{align-items:center;gap:.45rem;display:flex}.inlineControls input,.picker,.modalCard input,.modalCard select,.modalCard textarea,.customSelectTrigger{color:#f1f1f1;background:#161616;border:1px solid #323232;border-radius:.55rem;width:100%;padding:.55rem .65rem}.modalCard textarea{resize:vertical;min-height:170px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.35}.customSelect{width:100%;position:relative}.customSelectTrigger{cursor:pointer;justify-content:space-between;align-items:center;gap:.45rem;display:flex}.customSelectTrigger:hover{border-color:#454545}.customSelectTrigger:focus-visible{border-color:#e24b4a;outline:none;box-shadow:0 0 0 2px #e24b4a33}.customSelectChevron{color:#b8b8b8;font-size:.74rem;transition:transform .15s}.customSelectChevron.open{transform:rotate(180deg)}.customSelectValue{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.customSelectMenu{z-index:40;background:#151515;border:1px solid #333;border-radius:.65rem;gap:.2rem;max-height:220px;padding:.35rem;display:grid;position:absolute;top:calc(100% + .35rem);left:0;right:0;overflow:auto}.customSelectOption{text-align:left;color:#ececec;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:.5rem;padding:.45rem .55rem}.customSelectOption:hover{background:#232323}.customSelectOption.isActive{background:#2b1f1f;border-color:#e24b4a}.customSelectOption.isEmpty{color:#9f9f9f;cursor:default}.customSelect.isDisabled .customSelectTrigger{opacity:.65;cursor:not-allowed}input[type=range]{accent-color:#e24b4a}.play{background:#e24b4a;border-color:#e24b4a;border-radius:.8rem;justify-content:center;align-items:center;width:100%;min-height:64px;padding:.6rem 1rem;font-size:1.1rem;font-weight:700;display:flex}.play.stop{background:#303030;border-color:#3f3f3f}.content,.singleColumn{padding:1rem}.sourceTabs{border:1px solid #2b2b2b;border-radius:.55rem;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.sourceTabs button{color:#bbb;background:#161616;border:0;padding:.55rem}.sourceTabs button.active{color:#fff;background:#2c2c2c}.picker{margin-top:.65rem}.nowPlaying{background:#1d1d1d;border:1px solid #2a2a2a;border-radius:.7rem;flex-direction:column;gap:.65rem;margin-bottom:.85rem;padding:.75rem;display:flex}.nowPlayingTitle{text-align:center;color:#b8b8b8;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;font-weight:600}.nowPlayingTrackRow{grid-template-columns:auto 1fr auto;align-items:center;gap:.35rem;display:grid}.nowPlayingCenter{text-align:center}.nowPlayingTrackRow button{color:#f2f2f2;background:#232323;border:1px solid #3a3a3a;border-radius:.45rem;padding:.45rem .6rem}.list{flex-direction:column;gap:.45rem;margin-top:.8rem;display:flex}.item,.setlistItem{color:inherit;text-align:left;background:#191919;border:1px solid #2f2f2f;border-radius:.7rem;grid-template-columns:40px 1fr auto;align-items:center;gap:.6rem;padding:.65rem .75rem;display:grid}.setlistItem{cursor:pointer}.item{width:100%}.item.selected{background:#2b1f1f;border-color:#e24b4a}.item.plain{grid-template-columns:40px 1fr auto auto auto auto}.trackRowClickable{cursor:pointer}.trackRowClickable:hover{border-color:#454545}.trackRowClickable:focus-visible{border-color:#e24b4a;outline:none;box-shadow:0 0 0 2px #e24b4a33}.trackActionBtn{justify-content:center;justify-self:end;align-items:center;width:36px;height:36px;padding:0;display:inline-flex}.trackName{font-weight:600}.titleRow{justify-content:space-between;align-items:center;margin-bottom:.65rem;display:flex}.titleRow.compact{margin-bottom:.35rem}.small{background:#e24b4a;border-color:#e24b4a;font-weight:600}.danger{padding:.4rem .5rem}.setlistCard{border:1px solid #2d2d2d;border-radius:.75rem;margin-bottom:.6rem;padding:.7rem}.setlistCard.currentTrack{background:#2b1f1f;border-color:#e24b4a;box-shadow:inset 0 0 0 1px #e24b4a40}.setlistItem{grid-template-columns:40px 1fr auto auto;margin-top:.4rem}.setlistItem.currentTrack{background:#2b1f1f;border-color:#e24b4a}.playingBadge{color:#fff;vertical-align:middle;background:#e24b4a;border-radius:999px;margin-left:.45rem;padding:.1rem .4rem;font-size:.65rem}.rowButtons{flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.setlistActionBtn{justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:inline-flex}.rowButtons .danger.iconOnly{width:36px;height:36px}.setlistItem.dragging{opacity:.55}.hotkeys{text-align:center;margin-top:.2rem}.performanceMode{font-size:1.08rem}.performanceMode .layout{grid-template-columns:380px 1fr}.performanceMode .bpmNumber{font-size:4.1rem}.performanceMode .trackName{font-size:1.08rem}.modalOverlay{background:#0000008c;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modalCard{background:#111;border:1px solid #2f2f2f;border-radius:.85rem;width:min(420px,100%);padding:1rem}.modalCard h3{margin-bottom:.75rem}.modalCard label{gap:.35rem;margin-bottom:.7rem;font-size:.9rem;display:grid}.checkboxList{border:1px solid #2f2f2f;border-radius:.55rem;max-height:200px;margin-bottom:.7rem;padding:.45rem;overflow:auto}.checkboxRow{grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;padding:.35rem .2rem;display:grid}.modalButtons{justify-content:flex-end;gap:.45rem;display:flex}.modalQuickActions{gap:.45rem;margin-bottom:.55rem;display:flex}.empty{color:#9f9f9f;text-align:center;padding:1rem}.toast{color:#f1f1f1;z-index:300;background:#1d1d1d;border:1px solid #3a3a3a;border-radius:.65rem;padding:.55rem .75rem;font-size:.82rem;position:fixed;bottom:1rem;right:1rem;box-shadow:0 8px 24px #00000059}button{cursor:pointer}button:hover:not(:disabled){border-color:#575757}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,.tapDisplay:focus-visible{outline-offset:2px;outline:2px solid #e24b4a}button:disabled{opacity:.5;cursor:not-allowed}@media (width<=880px){.layout{grid-template-columns:1fr}.sidebar{border-bottom:1px solid #2a2a2a;border-right:0}.topbar{flex-wrap:nowrap;align-items:flex-start;gap:.45rem}.brandBlock{flex:auto;min-width:0}.logoRow{justify-content:space-between;gap:.35rem}.pwaIndicator{padding:.16rem .32rem;font-size:.48rem}.bandRow{width:100%}.bandPicker{flex:auto;min-width:0;max-width:none}.topbarBurger{flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:inline-flex}.topbarNavPanel{z-index:60;background:#121212;border:1px solid #303030;border-radius:.75rem;flex-direction:column;align-items:stretch;gap:.55rem;max-height:min(70vh,540px);padding:.55rem;display:none;position:absolute;top:calc(100% + .35rem);left:.75rem;right:.75rem;overflow:auto;box-shadow:0 10px 24px #0000006b}.topbarNavPanel.open{display:flex}.tabs{flex-wrap:wrap;width:100%}.tabs .tab{flex:calc(50% - .3rem);min-width:120px}.tools{flex-wrap:wrap;justify-content:flex-start;width:100%}.topbarProfileDropdown{left:0;right:auto}.trackSheetCard pre{white-space:pre;word-break:normal;min-width:max-content;font-size:12px;line-height:13px}.trackNavRow{grid-template-columns:1fr}.titleRow{align-items:flex-start;gap:.45rem}.titleRow.compact{flex-direction:column;align-items:flex-start}.titleRow.compact .rowButtons{width:100%}.titleRow.compact .rowButtons button{flex:auto}}.authPage{place-items:center;min-height:100vh;padding:1rem;display:grid}.authCard{background:#151515;border:1px solid #2d2d2d;border-radius:.9rem;gap:.75rem;width:min(420px,100%);padding:1.1rem;display:grid}.authCard h1{color:#f2f2f2;margin:0}.authCard p{color:#b6b6b6;margin:0}.authCard label{color:#d3d3d3;gap:.35rem;font-size:.9rem;display:grid}.authCard input{color:#fff;background:#1f1f1f;border:1px solid #333;border-radius:.55rem;padding:.58rem .65rem}.authButtons{gap:.55rem;display:flex}.authBtn{color:#efefef;text-align:center;cursor:pointer;background:#202020;border:1px solid #383838;border-radius:.6rem;padding:.6rem .9rem;text-decoration:none}.authBtn.primary{color:#fff;background:#e24b4a;border-color:#e24b4a}.authError{color:#ff9b9b;font-size:.85rem}.authInfo{color:#9ad8a8;font-size:.85rem}.authHint{color:#b9b9b9;font-size:.85rem}.authHint a{color:#f2f2f2}.profileAvatarWrap{justify-content:center;display:flex}.profileAvatar{object-fit:cover;background:#1b1b1b;border:1px solid #383838;border-radius:999px;width:88px;height:88px}