:root {
  --bg: #0f1115; --panel: #181b22; --panel2: #1f232c; --line: #2a2f3a;
  --text: #e8eaed; --dim: #9aa3af; --accent: #6ea8fe; --green: #3fb950;
  --red: #f85149; --gold: #e3b341; --pink: #db61a2;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding-bottom: 40px;
}
.hidden { display: none !important; }

/* ── Sticky header (now carries the event summary) ── */
#topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: #0c0e12; border-bottom: 1px solid var(--line);
}
.brand-wrap { display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; line-height: 1.12; }
.brand { font-weight: 700; font-size: 19px; flex-shrink: 0; }
.clock { font-size: 12.5px; font-weight: 700; color: var(--dim); letter-spacing: .03em; margin-top: 1px; font-variant-numeric: tabular-nums; text-align: center; }
.ghost {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 14px; font-size: 20px; cursor: pointer; flex-shrink: 0;
}
.ghost:active { background: var(--line); }

/* Event summary inside the header */
.header-event {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  border-left: 1px solid var(--line); padding-left: 14px;
}
.he-main { min-width: 0; flex: 1; }
.he-name { font-weight: 700; font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.he-date { color: var(--dim); font-size: 13px; white-space: nowrap; }
.pill-sm { padding: 2px 9px; font-size: 12px; }
.back-today { flex-shrink: 0; }
@media (max-width: 560px) {
  .brand { font-size: 0; }                 /* collapse to just the 🎧 on phones */
  .brand::first-letter { font-size: 22px; }
  .he-name { font-size: 16px; }
  .he-date { display: none; }              /* date is on the Info tab; save space */
}

/* ── PIN gate ── */
.pin-gate {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 9, 12, 0.96); backdrop-filter: blur(4px); padding: 24px;
}
.pin-box { width: 100%; max-width: 340px; text-align: center; background: var(--panel);
  border: 2px solid var(--gold); border-radius: 16px; padding: 28px 24px;
  box-shadow: 0 0 0 1px rgba(227,179,65,.25), 0 18px 50px rgba(0,0,0,.6), 0 0 30px rgba(227,179,65,.22); }
.pin-logo { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.pin-title { color: var(--dim); font-size: 15px; margin-bottom: 22px; }
.pin-input {
  width: 100%; box-sizing: border-box; text-align: center; letter-spacing: .5em;
  font-size: 30px; padding: 14px 12px; border-radius: 14px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.pin-input:focus { outline: none; border-color: var(--accent); }
.pin-btn {
  width: 100%; margin-top: 14px; padding: 16px; border-radius: 14px; cursor: pointer;
  background: var(--accent); color: #04210c; border: 0; font-size: 18px; font-weight: 800;
}
.pin-btn:active { transform: scale(.98); }
.pin-err { color: var(--red); font-size: 14px; min-height: 20px; margin-top: 12px; }

#app { max-width: 1200px; margin: 0 auto; padding: 14px 16px; --hc: var(--accent); }
.status { color: var(--dim); padding: 30px 8px; text-align: center; font-size: 18px; }

.event-card {
  background: linear-gradient(135deg, #20242e, #181b22);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 14px;
}
.event-card h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.15; }
.event-card .meta { color: var(--dim); font-size: 16px; }
.event-card .pills { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.pill { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; }

.tabs {
  display: flex; gap: 10px; margin: 0 0 16px; padding: 2px 0;
}
.tab {
  flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--dim);
  border-radius: 12px; padding: 14px; font-size: 17px; font-weight: 600; cursor: pointer;
}
.tab.active { color: var(--text); border-color: var(--accent); background: var(--panel2); }
.badge { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--green); color: #04210c; font-size: 13px; font-weight: 700; }

.cat-head {
  margin: 26px 0 12px; padding: 7px 12px 9px 16px; position: relative;
  font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text); display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 16%, transparent), transparent 70%);
  border-radius: 0 10px 10px 0;
  border-bottom: 2px solid color-mix(in srgb, var(--hc) 45%, var(--line));
}
.cat-head::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 6px; width: 6px;
  border-radius: 4px; background: var(--hc); box-shadow: 0 0 10px color-mix(in srgb, var(--hc) 60%, transparent);
}
.cat-head .cat-name { flex: 1; min-width: 0; }
.cat-head.genre { color: var(--hc); text-shadow: 0 0 14px color-mix(in srgb, var(--hc) 35%, transparent); }
.cat-head .cat-count {
  color: #0c0e12; background: var(--hc); border: 0; font-weight: 800; font-size: 13px;
  border-radius: 999px; padding: 2px 11px; min-width: 24px; text-align: center; line-height: 1.4;
}
.cat-head.special { --hc: var(--gold); }
.cat-head.avoid { --hc: var(--red); }

/* ── Playlist sections (draggable middle, pinned Start/End) ── */
.pl-wrap { display: block; }
.pl-section { margin-bottom: 4px; border-radius: 10px; }
.pl-section.dragging { opacity: .96; box-shadow: 0 12px 34px rgba(0,0,0,.6); background: var(--panel); }
/* Do-Not-Play warning section — make it unmissable */
.pl-section[data-section="Avoid"] {
  border: 1px solid color-mix(in srgb, #f85149 50%, var(--line));
  border-radius: 12px; background: rgba(248,81,73,.05);
}
.pl-section[data-section="Avoid"] .song { border-left: 3px solid #f85149; }
.pl-section.pinned > .cat-head {
  background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 26%, transparent), transparent 75%);
}
.sec-head { cursor: default; }
/* Collapse / expand chevron on each playlist section */
.sec-collapse {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--hc) 55%, var(--line));
  background: color-mix(in srgb, var(--hc) 16%, transparent); color: var(--hc);
  font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s;
}
.sec-collapse:active { transform: scale(.9); }
.pl-section.collapsed .sec-collapse { transform: rotate(-90deg); }
.pl-section.collapsed .sec-collapse:active { transform: rotate(-90deg) scale(.9); }
.pl-section.collapsed .song-grid { display: none; }
/* Up/down section move buttons — tablet-friendly, no dragging */
.sec-move { display: inline-flex; gap: 6px; }
.sec-move button {
  width: 40px; height: 36px; border-radius: 9px; cursor: pointer; font-size: 14px; line-height: 1;
  border: 1px solid color-mix(in srgb, var(--hc) 55%, var(--line));
  background: color-mix(in srgb, var(--hc) 16%, transparent); color: var(--hc);
  display: inline-flex; align-items: center; justify-content: center;
}
.sec-move button:disabled { opacity: .28; cursor: default; }
.sec-move button:active:not(:disabled) { transform: scale(.9); }
.sec-pin {
  font-size: 10px; font-weight: 700; color: var(--dim); letter-spacing: .02em;
  text-transform: none; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}

/* ── Responsive song grid: 1 col on phones, 2–3 across on a tablet ── */
.song-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
/* Dance / special moments = one prominent full-width card each */
.song-grid.special { grid-template-columns: 1fr; }

.song {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column;
}
.song.played { opacity: .5; }
/* Compact single row: handle · info(grows) · genre · note · play */
.song .srow {
  display: flex; align-items: center; gap: 10px;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;   /* clean long-press drag */
}
.song .info { flex: 1; min-width: 0; }
.song .ttl { font-size: 16px; line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.song .t-name { font-weight: 700; color: var(--text); }
.song .t-div { color: var(--line); font-weight: 400; }
.song .t-artist { color: var(--dim); font-weight: 500; font-size: 14px; }
.song .sub { color: var(--dim); font-size: 13px; margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.song .sub .loc { font-size: 12px; }
.song .clientc { margin-top: 5px; font-size: 13px; line-height: 1.35; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.song .cc-msg { color: var(--accent); font-style: italic; }
.song .cc-from { color: var(--dim); font-style: normal; font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }

/* Dance/special cards keep a left accent but stay compact */
.song-grid.special .song { border-left: 3px solid var(--gold); }
.song-grid.avoid .song { border-left: 3px solid var(--red); }

/* My-playlist view: each track gets a thin border in its section's colour (--hc
   cascades from the parent .pl-section). */
.song-grid.playlist .song { border-color: color-mix(in srgb, var(--hc) 55%, var(--line)); }

.play-btn.spacer { visibility: hidden; }   /* keeps the row aligned where there's no play button (Do-Not-Play) */
.play-btn {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel2); color: var(--green);
  font-size: 20px; font-weight: 700;
}
.play-btn:active { transform: scale(.94); }
.play-btn.done { background: var(--green); color: #04210c; border-color: var(--green); }

/* Small "add note" toggle button */
.note-btn {
  flex-shrink: 0; width: 40px; height: 48px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel2); color: var(--dim); font-size: 18px;
  display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0;
}
.note-btn:active { transform: scale(.94); }
.note-btn.has { color: var(--gold); border-color: var(--gold); background: rgba(227,179,65,.10); }

.note-wrap { margin-top: 10px; }
.note-wrap textarea {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px; font: inherit; font-size: 15px; resize: vertical; min-height: 38px;
}
.note-wrap textarea:focus { outline: none; border-color: var(--accent); }
.played-at { font-size: 12px; color: var(--green); margin-top: 6px; }
.empty { color: var(--dim); text-align: center; padding: 40px; font-size: 18px; }
/* Auto-refresh toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--panel2); color: var(--text); border: 1px solid var(--green);
  border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 80; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.actionable { cursor: pointer; border-color: var(--gold); text-decoration: underline dotted var(--gold); }

/* In-app confirm dialog (native confirm() is blocked on the tablet) */
.ui-confirm { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 24px; }
.uc-box { background: var(--panel); border: 2px solid var(--gold); border-radius: 14px; padding: 20px;
  max-width: 380px; width: 100%; box-shadow: 0 0 0 1px rgba(227,179,65,.25), 0 20px 60px rgba(0,0,0,.6), 0 0 30px rgba(227,179,65,.25); }
.uc-msg { font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-line; margin-bottom: 18px; }
.uc-actions { display: flex; gap: 10px; justify-content: flex-end; }
.uc-cancel, .uc-ok { padding: 11px 18px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer;
  border: 1px solid var(--line); }
.uc-cancel { background: var(--panel2); color: var(--text); }
.uc-ok { background: var(--accent); color: #fff; border-color: var(--accent); }
.uc-ok.danger { background: var(--red); border-color: var(--red); }
.uc-cancel:active, .uc-ok:active { transform: scale(.96); }
/* Genre picker (add a guest request straight into a genre section) */
.ug-box { max-width: 440px; }
.ui-genre .uc-msg { margin-bottom: 12px; }
.ug-none { width: 100%; padding: 13px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font-weight: 800; font-size: 15px; cursor: pointer; }
.ug-none:active { transform: scale(.98); background: var(--bg); }
.ug-hint { font-size: 12px; color: var(--dim); margin: 12px 2px 8px; }
.ug-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 46vh; overflow-y: auto;
  padding: 2px; margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
.ug-g { padding: 13px 12px; border-radius: 10px; border: 1px solid var(--line); border-left: 5px solid var(--gc, var(--pink));
  background: var(--panel2); color: var(--text); font-weight: 700; font-size: 14px; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ug-g:active { transform: scale(.97); background: var(--bg); }

/* ── Guest requests tab ── */
.req-badge { background: #2dd4bf; color: #04261f; }
.greq-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.greq-status { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.greq-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.gmode { background: var(--panel2); border: 1px solid var(--line); color: var(--dim); border-radius: 999px;
  padding: 9px 13px; font-size: 14px; font-weight: 700; cursor: pointer; flex: 1 1 auto; text-align: center; }
.gmode.active { color: #04261f; background: #2dd4bf; border-color: #2dd4bf; }
.greq-url { color: var(--dim); font-size: 12.5px; margin-top: 10px; }
.greq-url strong, .empty strong { color: var(--accent); }
.greq { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.greq.flagged { border-color: #7a3040; background: rgba(248,81,73,.05); }
.greq-main { flex: 1; min-width: 0; }
.greq-song { font-size: 16px; line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.greq-x { background: #2dd4bf; color: #04261f; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 1px 8px; }
.greq-who { color: var(--accent); font-size: 13px; margin-top: 4px; line-height: 1.4; }
.greq-flag { color: #ff9d9d; font-size: 12.5px; margin-top: 4px; }
.greq-dup { color: #e8b54b; font-size: 12.5px; margin-top: 4px; }
.greq-dup.live { color: #2dd4bf; }
.greq-add { flex-shrink: 0; background: rgba(45,212,191,.16); color: #2dd4bf; border: 1px solid #2dd4bf;
  border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.greq-add:active { transform: scale(.94); }
.greq-dis { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--dim); font-size: 15px; cursor: pointer; }
.greq-dis:active { transform: scale(.94); background: #5a2230; }
.greq-block { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #6b2230;
  background: rgba(248,81,73,.10); color: #f85149; font-size: 16px; cursor: pointer; }
.greq-block:active { transform: scale(.94); background: #5a2230; }
.greq-del, .greq-del-live { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--dim); font-size: 15px; cursor: pointer; }
.greq-del:active, .greq-del-live:active { transform: scale(.94); background: #5a2230; }
.greq-board-row { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.greq-board-l { font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; flex-direction: column; }
.greq-board-sub { font-size: 11.5px; font-weight: 400; color: var(--dim); margin-top: 2px; }
.greq-board-tog { flex-shrink: 0; min-width: 56px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--dim); font-weight: 800; font-size: 13px; cursor: pointer; }
.greq-board-tog.on { background: #b5471f; border-color: #f97316; color: #fff; }
.greq-cap-row { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.greq-cap-ctrl { flex-shrink: 0; display: flex; align-items: center; gap: 4px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.greq-cap-btn { width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent;
  color: var(--text); font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.greq-cap-btn:active { background: var(--line); transform: scale(.94); }
.greq-cap-val { min-width: 30px; text-align: center; font-size: 18px; font-weight: 800; color: var(--accent); }
.greq-hint { font-size: 12px; color: var(--dim); margin: 4px 2px 10px; }
.greq-votes { margin-left: 8px; font-size: 12.5px; font-weight: 800; color: #fb923c; }
.vote-pill { margin-left: 8px; font-size: 11px; font-weight: 800; color: #fb923c; background: rgba(251,146,60,.14);
  border: 1px solid rgba(251,146,60,.5); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
/* "N requests" on a track that's already on the client's list — teal to tie it to
   the guest-request system and distinguish it from live-request board votes (orange). */
.vote-pill.req { color: #2dd4bf; background: rgba(45,212,191,.14); border-color: rgba(45,212,191,.5); }
.greq-onboard-tag { font-size: 11.5px; color: #fb923c; margin-top: 3px; }
.greq-dev { font-size: 11.5px; color: #e8b54b; margin-top: 3px; font-weight: 600; }
.greq.on-board { border-color: rgba(251,146,60,.45); }
.greq-sanction { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--dim); font-size: 15px; cursor: pointer; }
.greq-sanction.active { background: #b5471f; border-color: #f97316; }
.greq-sanction:active { transform: scale(.94); }
.greq-words { margin-top: 12px; font-size: 12.5px; }
.greq-words summary { color: var(--text); cursor: pointer; font-weight: 700; }
.greq-words-ta { width: 100%; box-sizing: border-box; min-height: 70px; margin: 5px 0 10px; padding: 9px 11px;
  border-radius: 9px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 13px;
  font-family: inherit; resize: vertical; line-height: 1.5; }
.greq-words-actions { display: flex; gap: 8px; }
.greq-words-save { background: rgba(45,212,191,.16); color: #2dd4bf; border: 1px solid #2dd4bf; border-radius: 9px;
  padding: 8px 14px; font-weight: 800; font-size: 13px; cursor: pointer; }
.greq-words-reset { background: var(--panel2); color: var(--dim); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 12px; font-size: 12.5px; cursor: pointer; }
.greq-closed { margin-top: 12px; }
.greq-closed-l { display: block; font-size: 12px; color: var(--dim); margin-bottom: 5px; }
.greq-closed-in { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 13.5px; }
.greq-blocked { margin-top: 10px; font-size: 12.5px; color: #f0a3a0; display: flex; align-items: center; gap: 10px; }
.greq-naughty { margin-top: 10px; font-size: 12.5px; }
.greq-naughty summary { color: #f0a3a0; cursor: pointer; font-weight: 700; }
.gn-row { padding: 5px 0 5px 6px; border-left: 2px solid #5a2230; margin-top: 6px; color: var(--dim); }
.gn-strike { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #e8b54b; }
.gn-strike.blk { color: #f85149; }
.gn-name { color: var(--text); font-weight: 700; margin: 0 4px; }
.gn-text { font-style: italic; }
.greq-unblock { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 8px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; }

/* ── Voting-board hub sections (Requests tab): "On the board" + "From the planning sheet" ── */
.greq-sec { margin-top: 26px; --sc: var(--accent); }
/* Section header = bold, colour-coded, full-width tappable bar. Each section
   carries its own accent (--sc) as a left stripe + tint so they read as clear,
   distinct dividers rather than blending into the list below. */
.greq-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin: 0 0 12px; padding: 13px 15px; text-align: left;
  background: var(--panel2);   /* fallback for browsers without color-mix() */
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sc) 20%, transparent), color-mix(in srgb, var(--sc) 6%, transparent)),
    var(--panel);
  border: 1px solid var(--line);   /* fallback */
  border: 1px solid color-mix(in srgb, var(--sc) 35%, var(--line));
  border-left: 5px solid var(--sc); border-radius: 11px;
  color: var(--text); font: inherit; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; transition: filter .12s; }
.greq-sec-h:hover { filter: brightness(1.12); }
.greq-sec-h:active { filter: brightness(.9); }
.greq-sec-ht { font-size: 16px; font-weight: 800; letter-spacing: .01em; color: #fff; min-width: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.greq-sec-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--dim); margin-top: 3px; letter-spacing: 0; }
.greq-sec-chev { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--sc); font-weight: 700;
  background: rgba(0,0,0,.28); border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--sc) 45%, var(--line)); border-radius: 10px; }
.greq-sec.collapsed .greq-sec-h { margin-bottom: 0; }
.greq-sec.collapsed .greq-sec-body { display: none; }
.greq-paused { font-size: 11px; font-weight: 800; color: #fb923c; background: rgba(251,146,60,.14); border: 1px solid rgba(251,146,60,.5); border-radius: 999px; padding: 1px 8px; margin-left: 8px; vertical-align: middle; }
.greq-empty-sm { font-size: 12.5px; color: var(--dim); padding: 6px 2px; }
.greq-src { margin-left: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--dim); background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.greq-src.cu { color: #2dd4bf; border-color: rgba(45,212,191,.5); background: rgba(45,212,191,.1); }
.greq.vlocked { opacity: .72; }
.greq-onboard-tag.locked { color: #9aa3af; }
.bd-lock, .bd-remove, .djep-add { flex-shrink: 0; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--dim); font-size: 14px; font-weight: 700; cursor: pointer; }
.bd-lock, .bd-remove { width: 40px; }
.bd-lock:active, .bd-remove:active, .djep-add:active { transform: scale(.94); }
.greq.vlocked .bd-lock { background: #3a3320; border-color: #b8860b; color: #ffd54f; }
.djep-add { padding: 0 14px; background: rgba(45,212,191,.16); color: #2dd4bf; border-color: #2dd4bf; }

/* ── Info tab ── */
.info-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.info-sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; font-size: 16px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: .03em;
}
.info-sum::-webkit-details-marker { display: none; }
.info-sum:active { background: var(--panel2); }
.info-sum-t { flex: 1; min-width: 0; }
.info-sum-n { background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.info-chev {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel2); border: 1px solid var(--line); color: var(--gold);
  font-size: 18px; line-height: 1; transition: transform .2s;
}
details.info-card[open] .info-chev { transform: rotate(180deg); }
.info-sum:active .info-chev { background: var(--line); }
.info-body { padding: 0 18px 12px; }
/* Payment status badge in the Upgrades header */
.pay-badge { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 11px; letter-spacing: .03em; white-space: nowrap; }
.pay-badge.paid { color: var(--green); border: 1px solid var(--green); background: rgba(63,185,80,.14); }
.pay-badge.due { color: var(--red); border: 1px solid var(--red); background: rgba(248,81,73,.16); }
.fin-list { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 4px; }
.fin-list .info-row dd { color: var(--gold); }
.event-note {
  width: 100%; min-height: 70px; resize: none; overflow: hidden; box-sizing: border-box;
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 15px; line-height: 1.45;
}
.event-note:focus { outline: none; border-color: var(--gold); }
.info-list { margin: 0; }
.info-row { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-row dt { color: var(--dim); font-size: 13px; line-height: 1.45; margin-bottom: 5px; }
.info-row dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--text); }
.contacts { display: flex; flex-direction: column; gap: 10px; }
.contact { display: block; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; color: var(--accent); text-decoration: none; font-size: 16px; }
.contact:active { background: var(--line); }
.info-note { color: var(--dim); font-size: 14px; background: var(--panel2); border: 1px dashed var(--line);
  border-radius: 12px; padding: 14px 16px; line-height: 1.5; }
.form-banner { color: var(--gold); font-weight: 700; font-size: 14px; margin: 18px 2px 8px;
  text-transform: uppercase; letter-spacing: .04em; }

/* ── DJ genre tagging ── */
/* Genre pill — colour comes from --gc (per-genre, set inline) */
.tag-pill {
  --gc: var(--pink);
  display: inline-block; vertical-align: middle; white-space: nowrap;
  background: color-mix(in srgb, var(--gc) 20%, transparent);
  border: 1px solid var(--gc); color: var(--gc); border-radius: 999px;
  padding: 1px 9px; font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
/* Auto-detected (from the client category) — dashed to show it's not hand-set */
.tag-pill.auto { background: transparent; border-style: dashed; opacity: .9; }

/* Compact inline genre dropdown — auto width, not full-bleed */
.tag-select {
  --gc: var(--line);
  flex-shrink: 0; width: auto; max-width: 130px; align-self: center;
  background: var(--bg); color: var(--dim); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 8px; font: inherit; font-size: 13px; cursor: pointer; height: 48px;
}
.tag-select.set { color: var(--gc); border-color: var(--gc); font-weight: 700; }
.tag-select.auto { border-style: dashed; }
.tag-select:focus { outline: none; border-color: var(--accent); }

/* Group-by toggle at the top of the Music tab */
.group-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.group-lbl { color: var(--dim); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.group-opt {
  background: var(--panel); border: 1px solid var(--line); color: var(--dim);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.group-opt.active { color: var(--text); border-color: var(--pink); background: var(--panel2); }
.group-hint { color: var(--dim); font-size: 13px; }
.toplay-chip {
  margin-left: auto; font-weight: 800; font-size: 13px; color: var(--green);
  background: rgba(63,185,80,.12); border: 1px solid var(--green);
  border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.pill-toplay { color: var(--green); border-color: var(--green); background: rgba(63,185,80,.14); font-weight: 700; }
.add-req-btn {
  background: rgba(45,212,191,.14); color: #2dd4bf; border: 1px solid #2dd4bf;
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.add-req-btn:active { transform: scale(.96); }
.export-btn { background: var(--panel2); color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.export-btn:active { transform: scale(.96); background: var(--line); }

/* Live-request remove button on its cards */
.live-del, .song-bin {
  flex-shrink: 0; width: 40px; height: 48px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel2); color: var(--dim); font-size: 16px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.live-del:active, .song-bin:active { transform: scale(.94); background: #5a2230; }

/* Binned section — soft-deleted live tracks (restorable, not counted) */
.binned-section { opacity: .9; margin-top: 10px; }
.binned-hint { font-size: 11px; color: var(--dim); font-weight: 400; }
.binned-grid { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.binned-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.binned-row .br-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.binned-row .t-name { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.br-actions { flex-shrink: 0; display: flex; gap: 6px; }
.br-restore { cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; padding: 5px 10px; font-size: 12px; }
.br-restore:hover { border-color: var(--green); color: var(--green); }
.br-delete { cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--dim); border-radius: 8px; width: 30px; padding: 5px 0; font-size: 12px; }
.br-delete:hover { border-color: #f85149; color: #f85149; }

/* Add-live-request modal */
.req-modal {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(8,9,12,.7); backdrop-filter: blur(3px); padding: 20px;
}
.req-box { width: 100%; max-width: 460px; background: var(--panel); border: 2px solid var(--gold);
  border-radius: 16px; padding: 24px 26px;
  box-shadow: 0 0 0 1px rgba(227,179,65,.25), 0 18px 50px rgba(0,0,0,.6), 0 0 30px rgba(227,179,65,.22); }
.req-title { font-size: 21px; font-weight: 800; margin-bottom: 20px; }
.req-l { display: block; color: var(--dim); font-size: 13px; margin-bottom: 14px; }
.req-l input, .req-l select, .req-l textarea {
  display: block; width: 100%; box-sizing: border-box; margin-top: 5px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 16px;
}
.req-l textarea { resize: vertical; min-height: 48px; line-height: 1.4; }
.req-l input:focus, .req-l select:focus, .req-l textarea:focus { outline: none; border-color: #2dd4bf; }
.req-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); margin: 2px 0 12px; cursor: pointer; }
.req-check input { width: 18px; height: 18px; accent-color: #2dd4bf; flex-shrink: 0; cursor: pointer; }
.req-check-sub { color: var(--dim); font-size: 12.5px; }
.req-err { color: var(--red); font-size: 13px; min-height: 18px; margin: 2px 0 6px; }
.req-actions { display: flex; gap: 10px; margin-top: 6px; }
.req-btn { flex: 1; padding: 14px; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); }
.req-btn.ghost-btn { background: var(--panel2); color: var(--text); }
.req-btn.primary-btn { background: #2dd4bf; color: #04261f; border-color: #2dd4bf; }
.req-btn:active { transform: scale(.98); }

/* Client category as a badge (shown in playlist/genre view) */
.cat-badge {
  display: inline-block; padding: 1px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
}
.cat-badge.cb-must { color: var(--green); border-color: var(--green); background: rgba(63,185,80,.12); }
.cat-badge.cb-special { color: var(--gold); border-color: var(--gold); background: rgba(227,179,65,.12); }
.cat-badge.cb-avoid { color: var(--red); border-color: var(--red); background: rgba(248,81,73,.12); }
.cat-badge.cb-guest { color: var(--accent); border-color: var(--accent); background: rgba(110,168,254,.12); }
.cat-badge.cb-like { color: #b388ff; border-color: #b388ff; background: rgba(179,136,255,.14); }
.cat-badge.cb-live { color: #2dd4bf; border-color: #2dd4bf; background: rgba(45,212,191,.14); }

/* Reorderable playlist (My playlist view) — single column, drag handles */
.song-grid.playlist { grid-template-columns: 1fr; }

/* Played = compact history rows */
.played-list { display: flex; flex-direction: column; gap: 6px; }
.played-row { display: flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.pr-time { flex-shrink: 0; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 40px; }
.pr-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.pr-info .t-artist { font-size: 13px; }
.pr-unplay { flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--accent);
  background: rgba(110,168,254,.16); color: var(--accent); cursor: pointer; font-size: 18px; font-weight: 800; }
.pr-unplay:active { transform: scale(.9); background: rgba(110,168,254,.3); }
.song.dragging { opacity: .9; border-color: var(--pink); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
/* SortableJS drag states — clear lift + drop-gap feedback on all devices */
.song.sortable-chosen { border-color: var(--pink); }
.song.sortable-ghost { opacity: .3; }
.song.sortable-drag {
  opacity: .96; border-color: var(--pink);
  box-shadow: 0 12px 30px rgba(0,0,0,.6); transform: scale(1.02);
}
/* While dragging a track, pinned sections (Live/Avoid/Start/End) can't receive it —
   dim them so it reads as "not a drop zone". Genre sections stay fully lit. */
body.pl-dragging .pl-section.pinned { opacity: .5; transition: opacity .12s; }
/* While dragging, give every genre section a minimum droppable strip + a dashed
   target outline so short/near-empty sections are still easy to drop into. */
body.pl-dragging .pl-section:not(.pinned):not(.collapsed) .song-grid.playlist {
  min-height: 46px; outline: 2px dashed color-mix(in srgb, var(--hc) 45%, transparent); outline-offset: -3px; border-radius: 8px;
}

/* ── Upcoming gigs tab ── */
.gig-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.gig-tg { flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--dim);
  border-radius: 12px; padding: 11px; font-size: 15px; font-weight: 700; cursor: pointer; }
.gig-tg.active { color: var(--text); border-color: var(--accent); background: var(--panel2); }
.gig-row {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px; color: var(--text); cursor: pointer;
}
.gig-row:active { background: var(--panel2); }
.gig-row.today { border-color: var(--green); }
.gig-row.current { border-color: var(--accent); background: var(--panel2); }
.gig-main { flex: 1; min-width: 0; }
.gig-name { font-weight: 700; font-size: 19px; line-height: 1.2; }
.gig-meta { color: var(--dim); font-size: 14px; margin-top: 3px; }
.gig-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.gig-today { background: var(--green); color: #04210c; font-weight: 700; font-size: 12px;
  border-radius: 999px; padding: 2px 10px; }
.gig-status { color: var(--dim); font-size: 13px; }

.back-today {
  display: inline-block; background: var(--panel2); color: var(--accent);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; margin-bottom: 12px;
}
.back-today:active { background: var(--line); }
.pill-upcoming { background: rgba(110,168,254,.16); border-color: var(--accent); color: var(--accent); }

/* ── Tablet portrait & up: scale type, more breathing room ── */
@media (min-width: 680px) {
  body { font-size: 18px; }
  #app { padding: 18px 24px; }
  .event-card h1 { font-size: 32px; }
  .tab { padding: 16px; font-size: 18px; }
  .song .ttl { font-size: 17px; }
}

/* Bubbles (genre pill / category badge / vote pill) flow inline with the title on
   desktop — the wrapper is transparent so the layout is unchanged. .song-actions
   just groups the note + play buttons (same spacing as before). */
.bubbles { display: contents; }
.song-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Phone polish (≤560px): stop tab/button overspill, free up the client name,
      use the full screen width, full-width modals ── */
@media (max-width: 560px) {
  /* Header: tighter so the client name gets room (and can wrap to 2 lines, not just clip) */
  #topbar { gap: 8px; padding: 9px 11px; }
  .header-event { gap: 8px; padding-left: 10px; }
  .he-name {
    font-size: 16px; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ghost { padding: 7px 10px; font-size: 18px; border-radius: 9px; }

  /* Use the screen — less wasted side margin in the views */
  #app { padding: 12px 10px; }

  /* Tab bar wraps to rows instead of overspilling the page edge */
  .tabs { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .tab { flex: 1 1 30%; min-width: 0; padding: 10px 6px; font-size: 14px; border-radius: 10px; }
  .badge { min-width: 18px; padding: 0 5px; font-size: 11px; }

  /* Modals / dialogs take (near) full width on a phone */
  .req-modal, .ui-confirm { padding: 12px; }
  .req-box, .uc-box { max-width: none; width: 100%; }
  .req-box { padding: 20px 16px; }

  /* Playlist cards: stack so they don't get scruffy when a track has lots of
     bubbles/comments. Info (title + bubbles + comment) goes FULL WIDTH on top;
     the genre dropdown + note + play drop to a controls bar BELOW it. */
  .song-grid.playlist .song .srow { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; column-gap: 8px; }
  .song-grid.playlist .song .info { flex: 1 1 100%; min-width: 0; }   /* full-width row 1 → controls drop to the bar below */
  .song-grid.playlist .song .bubbles { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; margin-top: 5px; }  /* all bubbles together on their own line */
  .song-grid.playlist .song .clientc { width: 100%; }            /* client message/comment full width */
  /* Controls bar, right-justified: + · play · genre (genre last) */
  .song-grid.playlist .song .song-actions { order: 1; flex: 0 0 auto; margin-left: auto; }   /* push the whole group right */
  .song-grid.playlist .song .tag-select { order: 2; flex: 0 1 auto; }   /* genre sits after the buttons, content-sized */
}