/* ==========================================================================
   Cherry Pickers — dj.css
   Instructor control room (#djView) and events preparation (#prepView).
   ========================================================================== */

.dj-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dj-heading h1{ font-family:'Big Shoulders Display',sans-serif; font-size:36px; font-weight:800; margin:0 0 8px; }
.dj-active-event-heading{ margin:0 0 8px; color:#a7c290; font-size:13px; font-weight:700; }
.dj-heading-actions, .prep-summary-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto; }
.dj-view .kicker{ margin-bottom:7px; }

.dj-setup-banner{
  position:relative; display:grid; gap:18px; background:var(--ink-2); border:1px solid var(--line);
  border-left:3px solid var(--brass); border-radius:var(--radius-m); padding:18px; margin:18px 0 16px;
}
.dj-setup-banner.has-error{ border-left-color:var(--rust); background:rgba(163,64,42,0.06); }
.dj-setup-banner h2{ font-family:'Big Shoulders Display',sans-serif; font-size:22px; font-weight:800; margin:0 0 5px; }
.dj-setup-banner p:not(.kicker){ color:var(--ivory-dim); font-size:13px; line-height:1.5; margin:0; max-width:760px; }
.dj-setup-banner.ready{ display:flex; align-items:center; gap:12px; padding:12px 16px; }
.dj-setup-banner.ready .kicker{ display:none; }
.dj-setup-banner.ready h2{ font-size:14px; margin:0; }
.dj-setup-banner.ready p:not(.kicker){ font-size:12px; }
.dj-setup-banner.ready .dj-setup-steps{ display:none; }
.dj-setup-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.dj-setup-steps button{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--ink-3); color:var(--ivory-dim); padding:10px; text-align:left; font-size:11px; font-weight:700; cursor:pointer; }
.dj-setup-steps button b{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--denim); color:#fff; font-size:10px; flex:none; }
.dj-setup-steps button.complete{ border-color:var(--sage); color:#a7c290; }
.dj-setup-steps button.complete b{ background:var(--sage); color:#152012; }

.dj-status-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--ink-2); border:1px solid var(--line); color:var(--ivory); border-radius:var(--radius-s); margin:22px 0; padding:12px 14px; font-size:11px; }
.dj-status-bar .live-dot{ margin-right:2px; }
.dj-status-separator{ width:1px; height:14px; background:var(--line); }
.dj-event-controls{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:8px; }
.event-context{ display:grid; gap:2px; text-align:right; margin-right:2px; }
.event-context small{ font-size:8px; letter-spacing:.14em; color:var(--ivory-dim); font-weight:800; }
.event-context strong{ font-size:12px; color:var(--ivory); }
.event-context em{ font-style:normal; }
.event-state-label{ font-size:10px; color:var(--ivory-dim); font-weight:700; }
.dj-event-actions{ display:flex; gap:6px; }
.dj-event-actions .panel-action{ white-space:nowrap; }
.dj-event-controls .danger{ background:var(--rust); color:#fbe3db; border-color:var(--rust); }

.segtabs{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 16px; scrollbar-width:none; }
.segtabs::-webkit-scrollbar{ display:none; }
.segtab{ flex:1; text-align:center; padding:9px 12px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ivory-dim); background:var(--ink-2); border:1px solid var(--line); cursor:pointer; white-space:nowrap; font-family:'Inter',sans-serif; }
.segtab.active{ background:var(--brass); color:#1a1305; border-color:var(--brass); }
.segtab:not(.active):hover{ border-color:var(--brass); color:var(--ivory); }

.dj-grid{ display:block; }
.dj-tab{ display:none; }
.dj-tab.active{ display:grid; gap:14px; }
.dj-library-toggle{ display:contents; }
.dj-library-summary{ display:none; }
.dj-panel{
  position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px; min-width:0;
}
.panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; }
.dj-panel h2{ font-family:'Big Shoulders Display',sans-serif; font-size:21px; font-weight:800; margin:0; }
.connected-status{ font-size:10px; color:#a7c290; font-weight:700; display:flex; align-items:center; gap:6px; }

/* now playing */
.dj-now-playing-panel{ background:radial-gradient(circle at 90% -10%, rgba(201,162,78,0.16), transparent 55%), var(--ink); border-color:var(--saddle-line); color:#fff; }
.dj-now-playing-panel .kicker, .dj-now-playing-panel .connected-status{ color:var(--brass); }
.dj-now-playing-content{ display:flex; align-items:flex-start; gap:14px; min-width:0; }
.now-playing-art{ width:64px; height:64px; flex:0 0 64px; display:grid; place-items:center; border-radius:var(--radius-s); background:var(--brass); color:#1a1305; font-family:'Big Shoulders Display',sans-serif; font-size:30px; }
.dj-now-playing-copy{ display:grid; gap:4px; min-width:0; }
.dj-now-playing-copy strong{ font-family:'Big Shoulders Display',sans-serif; font-size:24px; font-weight:800; line-height:1.05; overflow-wrap:anywhere; }
.dj-now-playing-copy small{ color:var(--ivory-dim); font-size:12.5px; line-height:1.35; }
.dj-now-playing-copy .subtle{ font-size:11.5px; line-height:1.4; color:var(--ivory-dim); }
.dj-now-playing-actions{ display:flex; align-items:center; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.dj-now-playing-actions .now-favourite{ width:40px; height:40px; flex:none; border:1px solid var(--brass); border-radius:50%; background:transparent; color:var(--brass); font-size:19px; line-height:1; cursor:pointer; }
.dj-now-playing-actions .now-favourite.active{ background:var(--brass); color:#1a1305; }
.dj-now-playing-actions .panel-action{ flex:1; min-height:40px; border-color:var(--brass); color:#fff; background:rgba(255,255,255,.08); }
@media(max-width:520px){ .dj-now-playing-panel{ padding:14px; } .dj-now-playing-copy strong{ font-size:21px; } }

/* live queue */
.queue-tools{ display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--ivory-dim); font-size:10px; background:var(--ink-3); border-radius:var(--radius-s); padding:7px 9px; margin-bottom:8px; flex-wrap:wrap; }
.queue-tools button{ border:0; background:none; color:var(--brass); font-size:10px; font-weight:700; margin-left:auto; }
.queue-heading-actions{ display:flex; align-items:center; gap:9px; }
.queue-vote-pulse{ display:flex; align-items:baseline; gap:4px; padding-right:9px; border-right:1px solid var(--line); }
.queue-vote-pulse strong{ font-family:'Big Shoulders Display',sans-serif; font-size:24px; line-height:1; color:var(--brass); }
.queue-vote-pulse span{ font-size:9px; color:var(--ivory-dim); white-space:nowrap; }
.number-badge{ font:normal 12px system-ui; background:var(--rust); color:#fbe3db; border-radius:999px; padding:3px 7px; vertical-align:middle; }

/* ticket-style queue rows: rank / title / votes on the first line, action toolbar on the second */
.dj-track{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto;
  grid-template-areas:"num copy votes" "actions actions actions";
  align-items:center; gap:8px 10px;
  background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius-s); padding:11px 12px; margin:8px 0;
  transition:border-color .15s ease, transform .15s ease;
}
.dj-track.current{ grid-template-areas:"num copy actions"; background:rgba(201,162,78,0.1); border-color:var(--brass); }
.dj-track > .track-number{ grid-area:num; }
.dj-track > div:first-of-type{ grid-area:copy; }
.dj-track > .queue-votes{ grid-area:votes; }
.dj-track > .track-actions{ grid-area:actions; }
.dj-track:not(.current):hover{ border-color:var(--brass); }
.dj-track.locked{ border-style:dashed; border-color:var(--saddle-line); }
.track-number{ font-family:'Big Shoulders Display',sans-serif; display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--ink-2); color:var(--denim); font-size:11px; font-weight:700; }
.dj-track.current .track-number{ background:var(--brass); border-color:var(--brass); color:#1a1305; }
.dj-track > div:not(.track-actions), .dj-request > div:not(.request-actions){ display:grid; gap:4px; min-width:0; }
.dj-track strong, .dj-request strong{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ivory); }
.dj-track small, .dj-request small{ font-size:10.5px; color:var(--ivory-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
.queue-votes{ text-align:center; border-left:1px solid var(--line); padding-left:8px; }
.queue-votes strong{ display:block; font-family:'Big Shoulders Display',sans-serif; font-size:17px; line-height:1; color:var(--brass); }
.queue-votes span{ display:block; font-size:8px; color:var(--ivory-dim); margin-top:3px; }

.track-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dj-track:not(.current) .track-actions{ padding-top:8px; border-top:1px solid var(--line); }
.move-up, .move-down, .lock-toggle, .remove-song, .dj-favourite-toggle, .dance-lookup-trigger, .track-more{
  width:26px; height:26px; min-width:26px; padding:0; border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--ink-2); color:var(--ivory-dim); display:grid; place-items:center; cursor:pointer; position:relative; font-size:0;
}
.track-actions button{ width:31px; height:31px; min-width:31px; }
.track-actions .dance-lookup-trigger{ width:auto; min-width:0; padding:0 11px; font-size:11px; font-weight:700; white-space:nowrap; margin-left:auto; }
.move-up:after, .move-down:after{ content:''; width:7px; height:7px; border-left:1.5px solid currentColor; border-top:1.5px solid currentColor; display:block; }
.move-up:after{ transform:translateY(2px) rotate(45deg); }
.move-down:after{ transform:translateY(-2px) rotate(225deg); }
.move-up:hover, .move-down:hover{ border-color:var(--brass); color:var(--ivory); }
.lock-toggle:before{ content:''; position:absolute; width:10px; height:8px; left:calc(50% - 5px); top:calc(50% - 1px); background:currentColor; border-radius:2px; }
.lock-toggle:after{ content:''; position:absolute; width:8px; height:7px; left:calc(50% - 4px); top:calc(50% - 8px); border:2px solid currentColor; border-bottom:0; border-radius:6px 6px 0 0; }
.lock-toggle{ color:var(--saddle); border-color:var(--saddle-line); }
.lock-toggle.locked{ background:var(--brass); border-color:var(--brass); color:#1a1305; }
.remove-song:before, .remove-song:after{ content:''; position:absolute; left:calc(50% - 6px); top:calc(50% - .75px); width:12px; height:1.5px; background:currentColor; }
.remove-song:before{ transform:rotate(45deg); }
.remove-song:after{ transform:rotate(-45deg); }
.remove-song{ color:#e08469; }
.dj-favourite-toggle{ font-size:15px!important; color:var(--brass); }
.dj-favourite-toggle.active{ color:var(--brass); background:rgba(201,162,78,0.14); }
.track-more{ color:var(--ivory-dim); font-size:14px!important; letter-spacing:1px; border:0; background:transparent; }
.queue-panel .wide-button{ margin-top:14px; }
#djQueueResync{ background:var(--sage); border-color:var(--sage); color:#152012; }
.dj-track.current .track-actions{ display:flex; align-items:center; justify-content:flex-end; }
.track-actions .dj-favourite-toggle{ border:1px solid var(--line); background:var(--ink-2); padding:0; }
.track-actions .dj-favourite-toggle.active{ border-color:var(--brass); background:rgba(201,162,78,0.14); }
.queue-panel .panel-head, .queue-heading-actions{ flex-wrap:wrap; }
@media(max-width:720px){
  .dj-track{ grid-template-columns:26px minmax(0,1fr) auto; gap:8px; padding:10px; }
}

/* requests */
.dj-request{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius-s); padding:12px; margin:8px 0; }
.dj-request:last-child{ margin-bottom:0; }
.dj-request small:before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--brass); display:inline-block; }
.request-actions{ display:flex; align-items:center; gap:8px; }
.request-actions button{ flex:1; border-radius:var(--radius-s); border:1px solid var(--line); background:transparent; color:var(--ivory-dim); padding:9px 12px; min-height:34px; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
@media(min-width:1200px){
  .dj-request{ grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .request-actions button{ flex:none; min-width:64px; }
}
.requests-panel .approve-request, .approve-request{ background:var(--sage); border-color:var(--sage); color:#152012; }
.requests-panel .dismiss-request, .dismiss-request{ color:#e08469; border-color:var(--rust); }
.requests-panel .request-ready{ border-color:rgba(126,145,102,0.5); background:rgba(126,145,102,0.08); }

/* room pulse */
.pulse-stat{ display:grid; grid-template-columns:44px 1fr; column-gap:8px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
.pulse-stat:last-child{ border-bottom:0; padding-bottom:0; }
.pulse-stat strong{ font-family:'Big Shoulders Display',sans-serif; font-size:26px; color:var(--brass); grid-row:span 2; }
.pulse-stat span{ font-size:10px; color:var(--ivory-dim); }
.pulse-stat b{ font-size:11px; color:var(--ivory); }

/* settings */
.settings-panel{ background:transparent; border-style:dashed; border-color:var(--saddle-line); }
.setting-row{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; padding:12px 0; cursor:pointer; }
.setting-row span{ display:grid; gap:4px; }
.setting-row strong{ font-size:12px; color:var(--ivory); }
.setting-row small{ font-size:10px; color:var(--ivory-dim); }
.setting-control input[type=checkbox]{ appearance:none; -webkit-appearance:none; width:36px; height:20px; border-radius:999px; background:var(--denim-dim); position:relative; cursor:pointer; flex:none; border:0; margin:0; transition:background .15s ease; }
.setting-control input[type=checkbox]::after{ content:''; position:absolute; width:16px; height:16px; top:2px; left:2px; border-radius:50%; background:var(--ivory); transition:left .15s ease; }
.setting-control input[type=checkbox]:checked{ background:var(--sage); }
.setting-control input[type=checkbox]:checked::after{ left:18px; }

/* favourites / library */
.library-search{ display:grid; gap:5px; margin:4px 0 10px; }
.library-search>span{ font-size:10px; color:var(--ivory-dim); font-weight:700; }
.library-search input{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--ink-3); padding:9px; color:var(--ivory); font:inherit; font-size:12px; }
.library-search-results{ display:grid; gap:4px; margin-bottom:8px; }
.library-search-result{ display:grid; grid-template-columns:28px minmax(0,1fr) auto auto; align-items:center; gap:7px; padding:8px 0; border-bottom:1px solid var(--line); }
.library-search-result>span:nth-child(2){ min-width:0; }
.library-search-result strong, .library-search-result small{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.library-search-result strong{ font-size:11px; }
.library-search-result small{ color:var(--ivory-dim); font-size:10px; margin-top:3px; }
.library-result-star, .library-result-add, .dj-folder-add, .library-result-folder{ border:1px solid var(--line); border-radius:var(--radius-s); background:var(--ink-2); color:var(--ivory-dim); padding:5px 8px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
.library-result-star{ font-size:16px; line-height:1; padding:3px 6px; }
.library-result-add{ background:var(--sage); border-color:var(--sage); color:#152012; }
.dj-folder-add:hover, .library-result-folder:hover{ border-color:var(--brass); color:var(--brass); }
.library-song{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:8px 10px; align-items:center; border-bottom:1px solid var(--line); padding:12px 0; }
.library-song>span:nth-child(2){ display:grid; gap:3px; min-width:0; }
.library-song-actions{ grid-column:1 / -1; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.library-song-actions button{ min-height:30px; border-radius:var(--radius-s); font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; padding:0 11px; }
.library-song-actions .dj-library-folder{ border:1px solid var(--line); background:var(--ink-2); color:var(--ivory-dim); }
.library-song-actions .dj-library-folder::before{ content:'Folder'; }
.library-song-actions .dj-library-dance{ border:1px solid rgba(126,145,102,0.45); background:rgba(126,145,102,0.08); color:#a7c290; }
.library-song-actions .dj-library-star{ width:30px; padding:0; margin-left:auto; border:1px solid var(--brass); background:rgba(201,162,78,0.14); color:var(--brass); font-size:15px; line-height:1; }
.library-song-actions .add-library{ border:1px solid var(--brass); background:var(--brass); color:#1a1305; }
.library-song strong, .history-song strong{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.library-song small, .history-song small{ font-size:10px; color:var(--ivory-dim); }
.add-library, .dj-library-folder{ border:1px solid var(--brass); background:transparent; color:var(--brass); border-radius:var(--radius-s); padding:6px 9px; font-size:10px; font-weight:700; cursor:pointer; }
.premium-note{ font-size:10px; color:var(--ivory-dim); margin:12px 0 0; }
.dj-favourite-toggle, .dj-library-star{ border:0; background:transparent; color:var(--saddle); font-size:18px; line-height:1; padding:4px; cursor:pointer; }
.dj-favourite-toggle.active, .dj-library-star.active{ color:var(--brass); }

/* bootstepper */
.bootstepper-panel .spotify-setup-help{ margin:0 0 14px; }
.bootstepper-result small{ display:block; line-height:1.35; }
.bootstepper-result a{ color:var(--brass); font-weight:700; }
.bootstepper-match-note{ margin:10px 0; color:var(--ivory-dim); font-size:13px; }
.bootstepper-result .library-result-add{ flex:0 0 auto; }

/* history */
.history-song{ display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.history-song>span{ font-family:'Big Shoulders Display',sans-serif; font-size:11px; color:var(--brass); font-weight:800; }
.history-song div{ display:grid; gap:3px; min-width:0; }
.history-song b{ font-size:9px; color:var(--ivory-dim); }
.history-modal{ max-height:80vh; overflow:auto; }
.full-history-list{ display:grid; gap:0; margin-top:12px; }
.full-history-list .history-song{ background:var(--ink-3); padding:11px 8px; border-bottom:1px solid var(--line); border-radius:var(--radius-s); margin-bottom:2px; }
.full-playlist-list{ display:grid; gap:7px; max-height:55vh; overflow:auto; }
.full-playlist-song{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--ink-3); padding:10px; }
.full-playlist-song>span{ font-size:10px; color:var(--brass); font-weight:800; }
.full-playlist-song>div{ display:grid; gap:3px; min-width:0; }
.full-playlist-song strong{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.full-playlist-song small{ font-size:10px; color:var(--ivory-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.full-playlist-song>b{ font-size:10px; color:#a7c290; white-space:nowrap; }
.full-playlist-song.played{ opacity:.55; }
.full-playlist-song.played>b{ color:var(--ivory-dim); }
.full-playlist-actions{ display:flex!important; align-items:center; gap:5px; }
.full-playlist-actions button{ border:1px solid var(--line); border-radius:var(--radius-s); background:var(--ink-2); color:var(--ivory-dim); padding:6px 8px; font-size:10px; font-weight:700; cursor:pointer; }
.full-playlist-actions button:hover{ border-color:var(--brass); }
.full-playlist-actions button:disabled{ color:var(--ivory-dim); cursor:default; opacity:.5; }
.full-playlist-star{ font-size:16px!important; padding:3px 6px!important; }
.full-playlist-star.active{ color:var(--brass)!important; }
.dj-history-star{ border:0; background:none; color:var(--saddle); font-size:19px; line-height:1; cursor:pointer; padding:4px; }
.dj-history-star.active{ color:var(--brass); }

/* spotify panel */
.spotify-setup-help{ margin:0; background:rgba(201,162,78,0.08); border:1px solid var(--saddle-line); border-radius:var(--radius-s); padding:12px; color:var(--ivory-dim); font-size:11px; line-height:1.55; }
.spotify-setup-help strong{ color:var(--brass); }
.spotify-panel[hidden], .queue-panel[hidden], .favourites-panel[hidden]{ display:none; }
.spotify-account{ font-size:12px; margin:0 0 12px; color:var(--ivory-dim); }
.spotify-field{ display:grid; gap:6px; }
.spotify-field span{ font-size:10px; color:var(--ivory-dim); font-weight:700; }
.spotify-field select{ width:100%; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--ink-3); color:var(--ivory); padding:9px; font:inherit; font-size:11px; }
.spotify-actions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-top:12px; }
.spotify-actions button{ border-radius:var(--radius-s); min-height:40px; padding:8px 10px; line-height:1.2; }

/* dj only option / add song */
.dj-only-option{ display:flex; gap:12px; align-items:flex-start; margin:14px 0; padding:13px 14px; border:1px dashed var(--saddle-line); border-radius:var(--radius-m); background:rgba(126,145,102,0.06); cursor:pointer; }
.dj-only-option[hidden]{ display:none!important; }
.dj-only-option input{ accent-color:var(--sage); margin-top:3px; }
.dj-only-option span{ display:grid; gap:3px; }
.dj-only-option strong{ font-size:14px; }
.dj-only-option small{ color:var(--ivory-dim); font-size:12px; line-height:1.35; }
.song-add-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.song-add-actions .wide-button{ margin-top:0; }
@media(max-width:520px){ .song-add-actions{ grid-template-columns:1fr; } }

/* layout: .dj-main-column (Now playing + Queue), .dj-side-column (Requests), and the
   .dj-library-toggle disclosure (Library & settings) are created dynamically by app.js.
   Below 768px they're driven single-focus by the .segtabs / .dj-tab.active mechanism;
   at 768px+ the main/side columns always show and only the library section collapses. */
@media(min-width:768px){
  .segtabs{ display:none; }
  .dj-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start; }
  .dj-main-column, .dj-side-column{ display:grid; gap:16px; min-width:0; }
  .dj-tab{ display:grid!important; gap:16px; }

  .dj-library-toggle{ display:block; grid-column:1/-1; margin-top:18px; }
  .dj-library-summary{
    display:flex; align-items:center; gap:8px; width:100%; border:1px solid var(--line); border-radius:999px;
    background:var(--ink-2); color:var(--ivory-dim); padding:11px 18px; font-size:13px; font-weight:700;
    cursor:pointer; font-family:'Inter',sans-serif;
  }
  .dj-library-summary svg{ width:15px; height:15px; margin-left:auto; transition:transform .15s ease; }
  .dj-library-summary:hover{ border-color:var(--brass); color:var(--ivory); }
  .dj-library-toggle.expanded .dj-library-summary svg{ transform:rotate(180deg); }
  .dj-library-toggle .dj-tab{ display:none!important; margin-top:16px; grid-template-columns:1fr 1fr; align-items:start; }
  .dj-library-toggle.expanded .dj-tab{ display:grid!important; }

  /* Event controls is a list of small toggle/number rows - let it use the full accordion
     width and arrange its own rows two-per-line instead of stacking one long column. */
  .dj-library-toggle .settings-panel{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; column-gap:24px; align-content:start; }
  .dj-library-toggle .settings-panel > .kicker, .dj-library-toggle .settings-panel > h2, .dj-library-toggle .settings-panel > .panel-action{ grid-column:1/-1; }
}
@media(max-width:767px){
  .dj-heading{ align-items:flex-start; }
  .dj-heading-actions{ width:100%; justify-content:flex-start; margin-left:0; flex-wrap:wrap; }
  .dj-status-bar{ font-size:10px; }
  .dj-status-separator{ display:none; }
  .dj-panel{ padding:14px; }
  .dj-setup-steps{ grid-template-columns:1fr 1fr; }
  .dj-setup-steps button{ min-height:42px; }
  .segtabs{ padding-bottom:12px; }
}
.panel-head-actions{ display:flex; align-items:center; gap:10px; }
.panel-close-action{ border:1px solid var(--line); border-radius:var(--radius-s); background:var(--ink-3); color:var(--brass); padding:6px 9px; font:inherit; font-size:10px; font-weight:700; cursor:pointer; }
.panel-close-action:hover{ border-color:var(--brass); }
.favourites-dance-linker{ margin-bottom:18px; }
.dj-active-event-heading{ color:#a7c290; }

/* ---------- events preparation (#prepView) ---------- */
.prep-view{ max-width:900px; margin:0 auto; }
.prep-summary{ display:flex; align-items:center; justify-content:space-between; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:16px; margin:18px 0; flex-wrap:wrap; gap:10px; }
.prep-summary div{ display:grid; gap:4px; }
.prep-summary strong{ font-family:'Big Shoulders Display',sans-serif; font-size:22px; }
.prep-summary span{ font-size:11px; color:var(--ivory-dim); }
.prep-event-list{ display:grid; gap:10px; }
.prep-event-card{
  position:relative; display:grid; grid-template-columns:minmax(190px,.8fr) minmax(0,1.6fr); gap:22px; align-items:center;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:17px 18px;
}
.prep-event-card:before{ content:''; position:absolute; inset:7px; border:1px dashed var(--saddle-line); border-radius:7px; pointer-events:none; }
.prep-event-card h2{ font-family:'Big Shoulders Display',sans-serif; font-size:24px; font-weight:800; line-height:1.05; margin:3px 0 7px; }
.prep-event-card p{ margin:0; color:var(--ivory-dim); font-size:12px; }
.prep-event-card .prep-event-participation{ margin-top:4px; font-size:11px; color:#a7c290; }
.prep-detail-actions{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.prep-detail-grid article > .panel-action{ margin-top:8px; }
.prep-readiness{ display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); justify-content:end; align-items:center; gap:8px; }
.prep-readiness > span{ padding:6px 9px; border-radius:999px; background:var(--ink-3); color:var(--ivory-dim); font-size:10px; white-space:nowrap; }
.prep-readiness > span.ready{ background:rgba(126,145,102,0.15); color:#a7c290; }
.prep-readiness > span.pending{ background:rgba(163,64,42,0.15); color:#e08469; }
.prep-readiness > div{ grid-column:1 / -1; display:flex; justify-content:flex-end; gap:6px; }
.prep-detail{ position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:18px; margin-top:16px; }
.prep-detail:before{ content:''; position:absolute; inset:7px; border:1px dashed var(--saddle-line); border-radius:7px; pointer-events:none; }
.prep-detail-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.prep-detail-grid article{ display:grid; gap:7px; padding:13px; background:var(--ink-3); border-radius:var(--radius-s); }
.prep-detail-grid article strong{ font-size:14px; }
.prep-detail-grid article > span{ font-size:11px; color:var(--ivory-dim); }
.prep-event-modal{ max-width:560px; }
.prep-event-form{ display:grid; gap:12px; }
.prep-event-form label{ display:grid; gap:6px; }
.prep-event-form label[hidden]{ display:none; }
.prep-event-form label > span{ font-size:12px; color:var(--ivory-dim); }
.prep-event-form .big-input{ width:100%; box-sizing:border-box; }
.prep-participation-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:4px; padding:14px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--ink-3); }
.prep-participation-fields label:first-child{ grid-column:1/-1; }
.prep-participation-fields label > span{ color:var(--ivory); }
.prep-participation-fields label > span small{ font-weight:400; color:var(--ivory-dim); }
.prep-participation-fields .field-hint{ color:var(--ivory-dim); font-size:11px; line-height:1.35; }
.prep-participation-fields label{ min-width:0; }
.prep-participation-fields .big-input{ min-width:0; max-width:100%; font-size:13px; }

@media(max-width:720px){ .prep-event-card{ grid-template-columns:1fr; gap:12px; } .prep-readiness{ justify-content:start; } .prep-readiness > div{ justify-content:start; } }
@media(max-width:650px){
  .dj-heading{ align-items:flex-start; }
  .dj-heading-actions, .prep-summary-actions{ width:100%; justify-content:flex-start; margin-left:0; flex-wrap:wrap; }
  .prep-event-card{ grid-template-columns:1fr; }
  .prep-readiness{ justify-content:flex-start; }
  .prep-detail-grid{ grid-template-columns:1fr; }
}
@media(max-width:600px){ .prep-participation-fields{ grid-template-columns:1fr; } }

@media(min-width:1200px){ .shell{ max-width:1440px; } .dj-view{ max-width:1320px; margin:auto; } }