/* House Board v2 — same look as v1: black / purple / red / blue, green info button. */
:root {
  color-scheme: dark;
  --bg: #07060c;
  --ink: #f5f3ff;
  --dim: #c4b5fd;
  --gold: #c4b5fd;
  --gold-deep: #7c3aed;
  --line: rgba(139, 92, 246, 0.42);
  --card: #140e22;
  --raise: #22143a;
  --edge-soft: rgba(196, 181, 253, 0.28);
  --red: #f43f5e;
  --blue: #3b82f6;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.01em;
  background:
    radial-gradient(90% 35% at 50% -5%, rgba(109, 40, 217, 0.42), transparent 68%),
    radial-gradient(55% 30% at 100% 26%, rgba(190, 18, 60, 0.22), transparent 72%),
    radial-gradient(65% 35% at 0% 100%, rgba(37, 99, 235, 0.28), transparent 72%),
    var(--bg);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: radial-gradient(rgba(196, 181, 253, 0.28) 0.7px, transparent 0.7px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 82%);
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
button, input { font: inherit; color: inherit; touch-action: manipulation; font-weight: 650; }
button {
  background: var(--raise);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
button:active { transform: translateY(1px) scale(0.98); filter: brightness(1.12); }
button:disabled { opacity: 0.38; cursor: default; }
input {
  background: #0c0a14;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px 10px;
  min-height: 42px;
  font-size: 16px;
  color: var(--ink);
}
.wrap { position: relative; max-width: 520px; margin: 0 auto; padding: 16px 12px calc(28px + env(safe-area-inset-bottom)); }
.muted { color: var(--dim); font-size: 12px; }
.hint { margin: 6px 0 0; color: var(--dim); font-size: 12px; line-height: 1.4; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- top card with song bar */
.top {
  position: relative;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(49, 22, 92, 0.72), rgba(10, 8, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(224, 231, 255, 0.16), 0 14px 28px rgba(0, 0, 0, 0.34);
}
.top::after {
  content: "HOUSE BOARD • DIXIE'S CABARET";
  position: absolute; left: 12px; top: -10px;
  padding: 2px 8px;
  border: 1px solid var(--gold-deep); border-radius: 999px;
  background: #100818; color: var(--gold);
  font-size: 9px; font-weight: 850; letter-spacing: 0.16em;
}
.status-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; color: var(--dim); font-size: 13px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 28px; padding: 3px 10px;
  border: 1px solid var(--edge-soft); border-radius: 999px;
  background: rgba(12, 8, 24, 0.55); color: var(--ink); font-weight: 700;
}
.chip.clock { border-color: #2563eb; color: #93c5fd; font-variant-numeric: tabular-nums; min-width: 92px; font-size: 16px; }
.chip.live { border-color: #a855f7; background: rgba(109, 40, 217, 0.4); }
.chip.off { border-color: var(--red); color: #fecdd3; background: rgba(190, 18, 60, 0.25); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #6d6490; }
.chip.live .dot { background: #f0abfc; }
.iconbtn {
  width: 36px; height: 36px; min-height: 36px; padding: 0;
  border-radius: 50%; background: transparent; color: var(--gold);
  border: 1px solid rgba(236, 220, 190, 0.35);
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1;
}
.iconbtn svg { width: 19px; height: 19px; }

.songbar {
  position: relative;
  margin-top: 10px;
  border: 1px solid #2563eb;
  border-radius: 16px;
  background: rgba(8, 6, 18, 0.7);
  overflow: hidden;
  min-height: 58px;
}
.songbar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(109,40,217,0.75), rgba(59,130,246,0.75)); transition: width 250ms linear; }
.songbar .fore { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 58px; }
.songbar .note { font-size: 20px; flex: 0 0 auto; }
.songbar .meta { flex: 1; min-width: 0; }
.songbar .stitle { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.songbar .sartist { color: #bfdbfe; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.songbar .stime {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 850; font-size: 17px; color: #e0e7ff;
  padding: 3px 8px; border: 1px solid rgba(147, 197, 253, 0.45); border-radius: 10px; background: rgba(10, 8, 22, 0.55);
}
.songbar.paused .stime { color: #fda4af; border-color: rgba(244, 63, 94, 0.6); }
.songnext { margin-top: 6px; text-align: center; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- champagne bars */
.champ { display: flex; gap: 8px; align-items: stretch; margin: 0 0 10px; }
.mins { display: flex; flex: 1 1 auto; gap: 8px; min-width: 0; }
.mins button {
  flex: 1 1 0; min-width: 0; min-height: 56px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(155deg, #2a1458, #120a22);
  color: var(--gold); font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(224, 231, 255, 0.14), 0 6px 13px rgba(0, 0, 0, 0.2);
}
.clabel {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  align-self: center; min-width: 48px; padding: 5px 8px;
  border: 1px solid var(--gold-deep); border-radius: 14px; background: #100818;
  color: var(--gold); font-size: 12px; font-weight: 850; letter-spacing: 0.12em;
}
.track { position: relative; flex: 1; min-height: 56px; border: 1px solid var(--line); border-radius: 18px; background: #0e0a18; overflow: hidden; }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #6d28d9, #3b82f6); }
.track.low .fill { background: linear-gradient(90deg, #be123c, #f43f5e); }
.track-fore { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 9px; min-height: 56px; }
.track-fore .who { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 7px; border: 1px solid rgba(147, 197, 253, 0.28); border-radius: 9px; background: rgba(10, 8, 22, 0.5); font-size: 13px; }
.cd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 35px; padding: 3px 8px;
  border: 1px solid var(--gold-deep); border-radius: 11px; background: rgba(30, 20, 70, 0.82);
  color: var(--gold); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.champ-actions { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.mark {
  min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px;
  background: #160f28; color: var(--gold); border: 1px solid rgba(167, 139, 250, 0.4);
  font-size: 18px; line-height: 32px; display: inline-flex; align-items: center; justify-content: center;
}
button.danger { background: transparent; color: #fecdd3; border: 1px solid #be123c; font-weight: 750; }
button.ok { background: transparent; color: var(--gold); border: 1px solid var(--gold-deep); }
button.primary, button.start {
  background: linear-gradient(180deg, #8b5cf6, #4c1d95); color: #f8f5ff; font-weight: 800; border: 0;
  box-shadow: inset 0 1px 0 rgba(224, 231, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* ---------- VIP cards */
.vips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.vip {
  min-height: 140px; padding: 11px; display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(150deg, rgba(46, 16, 84, 0.96), rgba(10, 8, 20, 0.98));
  box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.16), 0 10px 24px rgba(0, 0, 0, 0.35);
}
.vip.run { border-color: rgba(168, 85, 247, 0.85); }
.vip h3 {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 30px; margin: 0; padding: 4px 36px 4px 8px; font-size: 15px;
  border: 1px solid rgba(167, 139, 250, 0.45); border-radius: 11px; background: rgba(10, 8, 22, 0.55); letter-spacing: 0.06em;
}
.vip h3 .mark { position: absolute; right: 3px; top: 2px; height: 26px; min-width: 28px; line-height: 24px; font-size: 16px; }
.vip .gname { align-self: center; max-width: 100%; padding: 3px 8px; border: 1px solid rgba(147, 197, 253, 0.28); border-radius: 9px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vip .countline { display: flex; align-items: center; justify-content: center; gap: 7px; }
.vip .countline button { width: 32px; min-height: 32px; padding: 0; background: transparent; color: var(--gold); border: 1px solid rgba(167, 139, 250, 0.4); }
.big {
  display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 44px; padding: 2px 10px;
  border: 1px solid var(--gold-deep); border-radius: 13px; background: rgba(49, 22, 110, 0.72);
  color: #ede9fe; font-size: 30px; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums;
}
.vip .muted { text-align: center; }
.vip button.start, .vip button.stop { align-self: center; padding: 8px 20px; }
.vip button.stop { background: transparent; color: #fecdd3; border: 1px solid #be123c; font-weight: 750; }
.first { text-align: center; font-size: 11px; font-weight: 750; padding: 3px 6px; border-radius: 8px; border: 1px solid rgba(59, 130, 246, 0.5); color: #bfdbfe; background: rgba(30, 58, 138, 0.25); font-variant-numeric: tabular-nums; }
.first.okay { border-color: rgba(134, 239, 172, 0.55); color: #bbf7d0; background: rgba(22, 101, 52, 0.25); }
.first.no { border-color: rgba(244, 63, 94, 0.5); color: #fecdd3; background: rgba(136, 19, 55, 0.25); }
.lastline { text-align: center; font-size: 12px; color: var(--dim); margin-top: auto; }

/* ---------- green info button + panel */
.info-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; min-height: 52px; margin: 18px auto 0; padding: 0;
  border: 2px solid #86efac; border-radius: 50%; background: #16a34a; color: #f0fdf4;
  font-size: 27px; font-weight: 850; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(240, 253, 244, 0.35), 0 6px 16px rgba(0, 0, 0, 0.3);
}
.board-info { margin-top: 14px; padding: 10px; border: 1px solid rgba(134, 239, 172, 0.45); border-radius: 20px; background: rgba(8, 24, 16, 0.55); }
.board-info[hidden] { display: none; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tabs button { flex: 0 0 auto; min-height: 34px; padding: 6px 12px; background: rgba(12, 8, 24, 0.7); border: 1px solid rgba(134, 239, 172, 0.35); color: #d1fae5; font-size: 13px; white-space: nowrap; }
.tabs button.on { background: #16a34a; border-color: #86efac; color: #f0fdf4; }
.tabs .tcount { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,0.35); font-variant-numeric: tabular-nums; }
.panel { margin-top: 6px; }
.sales-row {
  display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 9px 10px;
  border: 1px solid rgba(139, 92, 246, 0.4); border-radius: 18px; background: rgba(18, 10, 34, 0.86);
}
.sales-row .gname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.sales-row .where { font-size: 11px; color: #93c5fd; }
.sales-count { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 48px; padding: 3px 8px; border: 1px solid #7c3aed; border-radius: 14px; background: rgba(36, 16, 84, 0.85); }
.sales-count.c { border-color: #2563eb; background: rgba(30, 58, 138, 0.45); min-width: 54px; }
.sales-count b { color: #e9d5ff; font-size: 22px; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.sales-count span { color: #93c5fd; font-size: 9px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
button.add-girl { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 46px; margin-top: 8px; border: 1px solid var(--red); border-radius: 18px; background: transparent; color: #fda4af; font-weight: 800; }
.girl-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.girl-head .face { font-size: 38px; }
.girl-head .nm { font-size: 20px; font-weight: 850; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.totals { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.sess { padding: 8px 10px; margin: 6px 0; border: 1px solid rgba(134, 239, 172, 0.3); border-radius: 14px; background: rgba(0, 0, 0, 0.28); font-size: 13px; line-height: 1.45; }
.sess .sline { display: flex; align-items: center; gap: 6px; }
.sess .sline b { flex: 1; }
.sess button { min-height: 28px; width: 30px; padding: 0; background: transparent; border: 1px solid rgba(167, 139, 250, 0.4); color: var(--gold); }
.sess .titles { color: #d1fae5; font-size: 12px; }
.songlist { list-style: none; margin: 0; padding: 0; }
.songlist li { display: flex; gap: 8px; align-items: baseline; padding: 6px 4px; border-top: 1px solid rgba(134, 239, 172, 0.2); font-size: 13px; }
.songlist li .i { color: var(--dim); min-width: 26px; font-variant-numeric: tabular-nums; }
.songlist li .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.songlist li .d { color: #93c5fd; font-variant-numeric: tabular-nums; }
.songlist li.cur { background: rgba(37, 99, 235, 0.25); border-radius: 8px; font-weight: 800; }
.songlist li.done { opacity: 0.6; }
.songlist li.done .i { min-width: 44px; font-size: 11px; }
.songlist li .d small { color: var(--dim); font-size: 10px; margin-left: 3px; }
.songlist li.none { color: var(--dim); justify-content: center; font-style: italic; }
.songsec { margin: 12px 2px 4px; font-size: 11px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; color: #86efac; }
.songsec span { color: var(--dim); font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.codebox { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(32, 16, 64, 0.92), rgba(8, 8, 18, 0.96)); }
.code { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 3px 9px; border: 1px solid var(--gold-deep); border-radius: 9px; background: #0c0818; color: var(--gold); letter-spacing: 0.14em; font-weight: 800; }
.url { font-size: 12px; word-break: break-all; background: #090712; border-radius: 12px; padding: 8px; margin: 6px 0; color: var(--dim); user-select: text; }
h2 { display: block; width: max-content; max-width: 100%; margin: 14px auto 8px; padding: 5px 14px; border: 1px solid var(--gold-deep); border-radius: 999px; background: rgba(36, 12, 64, 0.9); color: var(--gold); font-size: 12px; letter-spacing: 0.18em; text-align: center; text-transform: uppercase; }

/* ---------- modal / sheets */
#modal { position: fixed; inset: 0; background: rgba(6, 4, 12, 0.8); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 14px; }
#modal[hidden] { display: none; }
.pop { background: #140e22; width: min(440px, 100%); max-height: calc(100dvh - 28px); overflow: auto; border-radius: 24px; border: 1px solid var(--gold-deep); padding: 14px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); }
.pop h3 { margin: 0 0 2px; text-align: center; }
.pop input { width: 100%; }
.pop .row { justify-content: flex-end; }
.pop button.wide { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; background: var(--raise); border: 1px solid var(--line); border-radius: 18px; min-height: 46px; }
.pop button.wide .face { font-size: 22px; width: 30px; text-align: center; }
.pop button.wide .nm { flex: 1; font-weight: 750; }
.pop button.wide .sub { font-size: 11px; color: #93c5fd; }
.pop .warn { color: #fecdd3; border: 1px solid rgba(244, 63, 94, 0.5); background: rgba(136, 19, 55, 0.25); border-radius: 14px; padding: 10px; font-size: 14px; line-height: 1.4; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-height: min(46vh, 380px); overflow: auto; padding: 2px; }
.emoji-grid button { min-height: 48px; padding: 4px 0; font-size: 24px; border-radius: 14px; background: #120c20; border: 1px solid rgba(139, 92, 246, 0.4); }
.emoji-grid button.used { opacity: 0.45; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 10px; }
.stepper input { width: 110px; text-align: center; font-size: 24px; font-weight: 850; font-variant-numeric: tabular-nums; }
.stepper button { width: 54px; }
#toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 24px); background: #160f28; color: var(--ink); border: 1px solid var(--line); padding: 9px 14px; border-radius: 16px; z-index: 30; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,0.5); }
#toast.bad { border-color: var(--red); color: #fecdd3; }
#toast[hidden] { display: none; }
.dancer-card { position: fixed; top: 12px; left: 12px; z-index: 15; width: min(240px, calc(100vw - 24px)); background: #120e1c; border: 1px solid rgba(139, 92, 246, 0.85); border-radius: 14px; padding: 6px 8px 8px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55); }
.dancer-card[hidden] { display: none; }
.dancer-card .head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); font-weight: 800; }
.dancer-card .head button { width: 24px; height: 24px; min-height: 24px; padding: 0; }
.dancer-card ul { list-style: none; margin: 4px 0 0; padding: 0; }
.dancer-card li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(139, 92, 246, 0.38); }
.dancer-card li .face { font-size: 20px; }
.dancer-card li .nm { flex: 1; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dancer-card li .rm { font-size: 12px; color: var(--dim); }
@media (max-width: 390px) {
  .wrap { padding-left: 9px; padding-right: 9px; }
  .mins button { padding-left: 8px; padding-right: 8px; }
  .clabel { min-width: 42px; padding-left: 5px; padding-right: 5px; }
  .emoji-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* ---- staff tutorial (coach marks) ---- */
.tour { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.tour[hidden] { display: none; }
.tour-shade {
  position: absolute; inset: 0;
  background: rgba(4, 2, 10, 0.72);
  transition: clip-path 0.2s ease;
  pointer-events: auto;
}
.tour-spot {
  position: absolute; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 3px #86efac, 0 0 0 8px rgba(134, 239, 172, 0.28), 0 12px 28px rgba(0,0,0,0.45);
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.tour-card {
  position: absolute; left: 12px; right: 12px; max-width: 400px; margin: 0 auto;
  background: #160f28; border: 1px solid rgba(134, 239, 172, 0.55); border-radius: 20px;
  padding: 12px 14px 12px; box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  pointer-events: auto; color: var(--ink);
}
.tour-card h3 { margin: 2px 0 6px; font-size: 18px; }
.tour-card p { margin: 0; font-size: 14px; line-height: 1.45; color: #e9d5ff; }
.tour-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #86efac; }
.tour-x { width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--dim); }
.tour-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.tour-nav button { min-height: 40px; }
.tour-nav button[data-tour="back"] { margin-right: auto; }
.tour-demo-banner {
  text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  color: #86efac; background: rgba(22, 101, 52, 0.35); border: 1px solid rgba(134, 239, 172, 0.45);
  border-radius: 12px; padding: 6px 8px; margin-bottom: 2px;
}
button.tour-help {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin: 10px 0 4px; border-radius: 16px;
  border: 1px solid rgba(134, 239, 172, 0.55); background: rgba(22, 101, 52, 0.28);
  color: #bbf7d0; font-weight: 800;
}

.tour-q-wrap { display: flex; justify-content: center; margin: 14px 0 4px; }
.tour-q-demo { margin: 0 !important; pointer-events: none; transform: scale(1.05); }
.tour-card .tour-q-demo.info-toggle { /* same look as the real green ? */
  display: flex; align-items: center; justify-content: center;
}

/* =====================================================================
   Dixie's Cabaret theme (v2.5.0-dixie) — black + purple neon, lavender.
   Override layer only: no selectors/IDs used by app.js were renamed.
   ===================================================================== */
@font-face { font-family: "DixieScript"; src: url("/fonts/pacifico.woff") format("woff"); font-display: swap; }
@font-face { font-family: "DixieBlock"; src: url("/fonts/oswald.woff") format("woff"); font-weight: 200 700; font-display: swap; }
:root {
  --bg: #07040d;
  --ink: #fbf5ff;
  --dim: #d6b8f5;
  --gold: #efc6ff;          /* lavender neon text */
  --gold-deep: #b04cff;     /* neon purple edge */
  --neon: #c45bff;
  --magenta: #e05cff;
  --line: rgba(196, 91, 255, 0.5);
  --card: #120a1c;
  --raise: #1d1030;
  --edge-soft: rgba(239, 198, 255, 0.3);
  --glow: 0 0 6px rgba(196, 91, 255, 0.65), 0 0 18px rgba(176, 76, 255, 0.35);
  --glow-strong: 0 0 8px rgba(224, 92, 255, 0.85), 0 0 26px rgba(176, 76, 255, 0.55);
}
body {
  background:
    radial-gradient(90% 32% at 50% -6%, rgba(176, 76, 255, 0.38), transparent 70%),
    radial-gradient(60% 30% at 100% 40%, rgba(224, 92, 255, 0.14), transparent 72%),
    radial-gradient(60% 34% at 0% 100%, rgba(120, 40, 200, 0.22), transparent 72%),
    var(--bg);
  background-attachment: fixed;
}
body::before { background-image: radial-gradient(rgba(224, 160, 255, 0.25) 0.7px, transparent 0.7px); opacity: 0.16; }

/* header + logo */
.top {
  border: 1.5px solid var(--neon);
  background: linear-gradient(160deg, rgba(40, 12, 66, 0.85), rgba(6, 4, 12, 0.97));
  box-shadow: var(--glow), inset 0 0 22px rgba(176, 76, 255, 0.18), 0 14px 28px rgba(0, 0, 0, 0.45);
}
.top::after { display: none; }
.brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -2px 0 8px; }
.brand-logo { width: 84px; height: 84px; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(196, 91, 255, 0.55)); }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-script {
  font-family: "DixieScript", "Pacifico", "Lobster", cursive; font-size: 34px; color: var(--gold);
  text-shadow: 0 0 4px #e05cff, 0 0 14px rgba(176, 76, 255, 0.8); transform: rotate(-4deg); margin-bottom: 4px;
}
.brand-block {
  font-family: "DixieBlock", "Oswald", Impact, sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: 0.26em; text-transform: uppercase; color: #fbeaff; text-shadow: 0 0 8px rgba(196, 91, 255, 0.7);
}
.install-logo { filter: drop-shadow(0 0 10px rgba(196, 91, 255, 0.6)); }
h1, h2, h3, .clabel, .songsec, .dancer-card .head { font-family: "DixieBlock", "Oswald", system-ui, sans-serif; }
h2 { border-color: var(--neon); background: rgba(30, 8, 48, 0.92); box-shadow: var(--glow); font-weight: 700; }

.chip { border-color: var(--edge-soft); background: rgba(10, 4, 18, 0.7); }
.chip.clock { border-color: var(--neon); color: var(--gold); box-shadow: 0 0 8px rgba(176, 76, 255, 0.4); }
.chip.live { border-color: var(--magenta); background: rgba(150, 30, 200, 0.38); box-shadow: 0 0 10px rgba(224, 92, 255, 0.5); }
.chip.live .dot { background: #ffb3ff; box-shadow: 0 0 6px #ff7cff; }
.iconbtn { border-color: rgba(196, 91, 255, 0.6); color: var(--gold); box-shadow: 0 0 8px rgba(176, 76, 255, 0.3); }

/* active song bar */
.songbar { border: 1.5px solid var(--magenta); background: rgba(8, 3, 14, 0.82); box-shadow: var(--glow-strong); }
.songbar .fill { background: linear-gradient(90deg, rgba(120, 30, 190, 0.85), rgba(224, 92, 255, 0.8)); box-shadow: 0 0 14px rgba(224, 92, 255, 0.6); }
.songbar .note { color: #ffd0ff; text-shadow: 0 0 8px #e05cff; }
.songbar .stitle { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.songbar .sartist { color: #f3dcff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.songbar .stime { color: #fff; border-color: rgba(239, 198, 255, 0.6); background: rgba(8, 3, 14, 0.7); }

/* champagne + VIP */
.mins button { border-color: var(--line); background: linear-gradient(160deg, #2a0e44, #0e0618); color: var(--gold); box-shadow: inset 0 1px 0 rgba(239, 198, 255, 0.16), 0 0 10px rgba(176, 76, 255, 0.28); }
.clabel { border-color: var(--neon); background: #0e0618; color: var(--gold); box-shadow: 0 0 8px rgba(176, 76, 255, 0.35); font-size: 13px; }
.track { border-color: var(--line); background: #0b0612; }
.track .fill { background: linear-gradient(90deg, #7a1fc4, #d24cff); box-shadow: 0 0 14px rgba(224, 92, 255, 0.5); }
.track-fore .who, .vip .gname { border-color: rgba(239, 198, 255, 0.35); background: rgba(8, 3, 14, 0.62); }
.cd { border-color: var(--neon); background: rgba(24, 6, 40, 0.88); color: #fff; text-shadow: 0 0 6px rgba(224, 92, 255, 0.7); }
.mark { background: #160a24; border-color: rgba(196, 91, 255, 0.55); }
button.primary, button.start {
  background: linear-gradient(180deg, #d06bff, #8a22d6); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 230, 255, 0.5), var(--glow-strong);
}
button.ok { border-color: var(--neon); box-shadow: 0 0 8px rgba(176, 76, 255, 0.35); }
.vip { border-color: var(--line); background: linear-gradient(155deg, rgba(38, 10, 62, 0.96), rgba(8, 4, 14, 0.98)); box-shadow: inset 0 1px 0 rgba(239, 198, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.45); }
.vip.run { border-color: var(--magenta); box-shadow: var(--glow-strong); }
.vip h3 { border-color: rgba(196, 91, 255, 0.55); background: rgba(8, 3, 14, 0.62); letter-spacing: 0.14em; font-weight: 700; }
.vip .countline button { border-color: rgba(196, 91, 255, 0.55); }
.big { border-color: var(--neon); background: rgba(50, 12, 84, 0.78); color: #fff; text-shadow: 0 0 8px rgba(224, 92, 255, 0.8); }
.first { border-color: rgba(196, 91, 255, 0.55); color: #f0d6ff; background: rgba(70, 20, 110, 0.3); }

/* info "?" button stays green (staff know it as "the green ? button"), with a neon glow */
.info-toggle { box-shadow: 0 0 10px rgba(74, 222, 128, 0.55), 0 0 24px rgba(22, 163, 74, 0.35); }
.board-info { border-color: var(--line); background: rgba(14, 5, 24, 0.75); box-shadow: 0 0 14px rgba(176, 76, 255, 0.2); }
.tabs button { border-color: rgba(196, 91, 255, 0.45); color: #f0dcff; background: rgba(10, 4, 18, 0.8); }
.tabs button.on { background: linear-gradient(180deg, #c45bff, #8a22d6); border-color: #f0c8ff; color: #fff; box-shadow: var(--glow); }
.songsec { color: var(--gold); letter-spacing: 0.16em; }
.songlist li { border-top-color: rgba(196, 91, 255, 0.22); }
.songlist li .d { color: #e6c6ff; }
.songlist li.cur { background: rgba(176, 76, 255, 0.28); box-shadow: inset 0 0 0 1px rgba(224, 92, 255, 0.6), 0 0 10px rgba(224, 92, 255, 0.35); }
.sess { border-color: rgba(196, 91, 255, 0.35); }
.sess .titles { color: #f0dcff; }
.codebox { border-color: var(--line); background: linear-gradient(150deg, rgba(34, 8, 56, 0.92), rgba(6, 3, 12, 0.96)); }
.code { border-color: var(--neon); background: #0c0514; box-shadow: 0 0 8px rgba(176, 76, 255, 0.4); }
.url { background: #0a0510; }

/* sheets, toast, dancer card */
#modal { background: rgba(4, 2, 8, 0.84); }
.pop { background: #10081a; border-color: var(--neon); box-shadow: var(--glow), 0 18px 38px rgba(0, 0, 0, 0.6); }
.pop button.wide { background: var(--raise); border-color: var(--line); }
.pop button.wide .sub { color: #e6c6ff; }
.emoji-grid button { background: #12081e; border-color: rgba(196, 91, 255, 0.45); }
input { background: #0a0510; border-color: var(--line); }
input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 2px rgba(224, 92, 255, 0.35); }
#toast { background: #140a22; border-color: var(--neon); box-shadow: var(--glow); }
#toast { pointer-events: none; } /* toasts are info only: taps go through to the ? / Stop buttons under them */
.dancer-card { background: #10081a; border-color: var(--neon); box-shadow: var(--glow), 0 14px 32px rgba(0, 0, 0, 0.6); }
.dancer-card li { border-top-color: rgba(196, 91, 255, 0.35); }
@media (max-width: 390px) {
  .brand-logo { width: 68px; height: 68px; }
  .brand-script { font-size: 29px; }
  .brand-block { font-size: 15px; }
}

/* ---- theme: staff tutorial (coach marks) + Help tab extras, purple neon ----
   The real "?" (and its copy inside the tour card) stays green on purpose:
   the tour text and staff call it "the green ?". */
.tour-shade { background: rgba(4, 2, 8, 0.78); }
.tour-spot { box-shadow: 0 0 0 3px #e05cff, 0 0 0 8px rgba(196, 91, 255, 0.3), 0 0 26px rgba(224, 92, 255, 0.55); }
.tour-card { background: #10081a; border: 1.5px solid var(--neon); box-shadow: var(--glow), 0 18px 40px rgba(0, 0, 0, 0.6); }
.tour-card h3 { color: var(--gold); text-shadow: 0 0 8px rgba(224, 92, 255, 0.6); letter-spacing: 0.04em; }
.tour-card p { color: #f0dcff; }
.tour-card #tourBody p { margin: 0; }
.tour-meta { color: var(--gold); }
.tour-x { border-color: rgba(196, 91, 255, 0.6); color: var(--gold); }
.tour-demo-banner { color: #fbeaff; background: rgba(150, 30, 200, 0.3); border-color: rgba(224, 92, 255, 0.6); box-shadow: 0 0 8px rgba(176, 76, 255, 0.35); }
button.tour-help { border-color: var(--neon); background: rgba(90, 20, 140, 0.4); color: #fbeaff; box-shadow: 0 0 10px rgba(176, 76, 255, 0.35); }
.codebox .hint b { color: var(--gold); }
/* per-girl count rows: last blue accents -> purple/magenta neon (dances = purple, champ = magenta) */
.sales-row .where { color: #f0a8ff; }
.sales-count { border-color: var(--neon); background: rgba(60, 14, 100, 0.7); box-shadow: 0 0 8px rgba(176, 76, 255, 0.3); }
.sales-count.c { border-color: var(--magenta); background: rgba(110, 20, 120, 0.42); }
.sales-count span { color: #e6c6ff; }

/* ---- tour v2 (VIP-room walkthrough): card scrolls inside if space is tight; practice pictures ---- */
.tour-card { overflow-y: auto; overscroll-behavior: contain; }
.tour-body p { margin: 0; }
.tour-card #tourBody p + p { margin-top: 7px; } /* beats the older .tour-card #tourBody p { margin: 0 } */
.tour-demo { pointer-events: none; user-select: none; margin: 12px auto 2px; max-width: 230px; }
.tour-demo .vip { min-height: 0; padding: 9px; gap: 6px; }
.tour-demo .vip h3 .mark { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(196, 91, 255, 0.55); border-radius: 999px; }
.tour-demo .vip button.stop { min-height: 36px; }
.tour-hi { border-radius: 14px; box-shadow: 0 0 0 2px #e05cff, 0 0 14px rgba(224, 92, 255, 0.75); }
.tour-demo .vip button.stop.tour-hi { box-shadow: 0 0 0 2px #e05cff, 0 0 16px rgba(224, 92, 255, 0.85); }
.tour-demo .muted.tour-hi { padding: 3px 6px; color: #fbeaff; }
.tour-demo-pick { max-width: 280px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1.5px solid var(--neon); border-radius: 18px; background: #10081a; box-shadow: var(--glow); }
.tour-demo-pick .tdp-title { text-align: center; font-family: "DixieBlock", "Oswald", system-ui, sans-serif; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.tour-demo-pick button.wide { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; background: var(--raise); border: 1px solid var(--line); border-radius: 16px; min-height: 40px; color: var(--ink); }
.tour-demo-pick button.wide .nm { font-weight: 800; }
.tour-demo-pick button.wide .sub { margin-left: auto; font-size: 11px; color: #e6c6ff; }
.tour-demo-pick button.wide:disabled { opacity: 0.45; }

/* v2.6.0 manual song mode: big Next song button (DJ nights) */
.song-change {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 64px; margin: 8px 0 4px; padding: 12px 16px;
  font-family: inherit; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #8b2fd9, #4c1386); border: 2px solid #e05cff; border-radius: 16px;
  box-shadow: 0 0 10px rgba(224, 92, 255, 0.6), 0 0 26px rgba(176, 76, 255, 0.35); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.song-change[hidden] { display: none; }
.song-change:active { transform: scale(0.98); background: linear-gradient(180deg, #a445f0, #5d1aa3); }
.song-change:disabled { opacity: 0.6; }
.song-change .sc-icon { font-size: 26px; }
.row.seg button.on { background: #7c2bd0; border-color: #e05cff; color: #fff; box-shadow: 0 0 8px rgba(224, 92, 255, 0.6); }

/* ---------- Stage tab: tonight's rotation (v2.7.0) */
.rot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 2px 8px; font-size: 12px; color: var(--dim); }
.rot-run { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--edge-soft); border-radius: 999px; background: rgba(12, 8, 24, 0.6); }
.rot-run .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.rot-run.on { border-color: rgba(134, 239, 172, 0.55); color: #d1fae5; }
.rot-run.on .dot { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.rot-set { color: #f0abfc; font-weight: 750; }
.rot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rot-list.sorting .rot-row:not(.dragging) { transition: transform 150ms ease; }
.rot-row {
  position: relative; display: grid; grid-template-columns: 44px 22px 1fr auto; grid-template-areas: "h p m a" "x x b b";
  align-items: center; column-gap: 6px; row-gap: 8px; padding: 8px 8px 8px 4px;
  border: 1px solid rgba(139, 92, 246, 0.45); border-radius: 18px; background: rgba(18, 10, 34, 0.9);
  touch-action: pan-y;
}
.rot-row.stage { grid-template-areas: "h p m a"; border-color: #e879f9; background: linear-gradient(135deg, rgba(112, 26, 117, 0.55), rgba(18, 10, 34, 0.92)); box-shadow: 0 0 14px rgba(232, 121, 249, 0.35); }
.rot-row.next { border-color: #60a5fa; box-shadow: 0 0 12px rgba(96, 165, 250, 0.32); }
.rot-row.skipped { opacity: 0.6; }
.rot-row.dragging { z-index: 5; opacity: 0.96; border-color: #c4b5fd; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(167, 139, 250, 0.55); background: #24143e; }
.rot-handle { grid-area: h; display: flex; align-items: center; justify-content: center; width: 44px; height: 48px; border-radius: 14px; color: var(--gold); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font-size: 20px; }
.rot-handle svg { width: 24px; height: 24px; fill: currentColor; }
.rot-handle:active, .rot-row.dragging .rot-handle { cursor: grabbing; background: rgba(124, 58, 237, 0.35); }
.rot-handle.locked { cursor: default; }
.rot-pos { grid-area: p; text-align: center; color: var(--dim); font-weight: 800; font-variant-numeric: tabular-nums; }
.rot-main { grid-area: m; min-width: 0; }
.rot-name { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rot-name .face { margin-right: 6px; }
.rot-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rtag { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--edge-soft); color: var(--dim); }
.rtag.stage { color: #fdf4ff; border-color: #e879f9; background: rgba(192, 38, 211, 0.45); }
.rtag.next { color: #eff6ff; border-color: #60a5fa; background: rgba(37, 99, 235, 0.45); }
.rtag.room { color: #bfdbfe; border-color: rgba(96, 165, 250, 0.6); }
.rtag.skip { color: #fecdd3; border-color: rgba(244, 63, 94, 0.6); }
.rtag.note { color: #fde68a; border-color: rgba(251, 191, 36, 0.55); text-transform: none; letter-spacing: 0; }
.rot-arrows { grid-area: a; display: flex; gap: 6px; }
.rot-arrows button { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 14px; font-size: 18px; background: #160f28; color: var(--gold); border: 1px solid rgba(167, 139, 250, 0.5); }
.rot-actions { grid-area: b; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.rot-row .rot-actions { grid-column: 1 / -1; }
.rot-actions button { min-height: 42px; padding: 6px 12px; font-size: 13px; border-radius: 14px; background: transparent; border: 1px solid rgba(167, 139, 250, 0.45); color: var(--gold); }
.rot-actions .rot-upnext { flex: 1 1 auto; border-color: #3b82f6; color: #dbeafe; background: rgba(30, 58, 138, 0.35); }
.rot-actions .rot-upnext:disabled { opacity: 0.6; }
.rot-actions .rot-tg.on { background: rgba(190, 18, 60, 0.4); border-color: #f43f5e; color: #fff1f2; }
button.rot-reset { display: block; margin: 12px auto 4px; min-height: 42px; padding: 8px 18px; }

/* ---------- Music tab: now playing, Skip, requests (v2.8.0) */
.music { display: flex; flex-direction: column; gap: 8px; }
.mu-card { padding: 14px 14px 12px; border: 1.5px solid var(--magenta); border-radius: 18px; background: linear-gradient(155deg, rgba(48, 12, 78, 0.95), rgba(8, 4, 14, 0.98)); box-shadow: var(--glow-strong); }
.mu-label { font-family: "DixieBlock", "Oswald", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.mu-title { margin-top: 4px; font-size: 22px; font-weight: 850; line-height: 1.15; color: #fff; text-shadow: 0 0 10px rgba(224, 92, 255, 0.55); overflow-wrap: anywhere; }
.mu-title.mu-quiet { font-size: 17px; color: var(--dim); text-shadow: none; }
.mu-artist { margin-top: 2px; font-size: 15px; color: #f3dcff; }
.mu-bar { height: 8px; margin-top: 12px; border-radius: 999px; background: #0b0612; border: 1px solid var(--line); overflow: hidden; }
.mu-fill { height: 100%; width: 0; background: linear-gradient(90deg, #7a1fc4, #e05cff); box-shadow: 0 0 12px rgba(224, 92, 255, 0.7); transition: width 450ms linear; }
.mu-times { display: flex; justify-content: space-between; margin-top: 5px; font-size: 13px; color: #e6c6ff; font-variant-numeric: tabular-nums; }
.mu-times #muLeft { font-weight: 800; color: #fff; }
.mu-nextline { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(196, 91, 255, 0.3); font-size: 15px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-nextline small { color: var(--dim); font-weight: 600; margin-left: 4px; }
.mu-stage { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 14px; color: #fdf4ff; }
.mu-upnext { color: #bfdbfe; }
.mu-warn { color: #fecdd3 !important; }
.mu-skip {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 66px; margin-top: 2px;
  font-size: 22px; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #8b2fd9, #4c1386); border: 2px solid #e05cff; border-radius: 18px;
  box-shadow: 0 0 10px rgba(224, 92, 255, 0.6), 0 0 26px rgba(176, 76, 255, 0.35);
}
.mu-skip .sc-icon { font-size: 26px; }
.mu-skip.armed { background: linear-gradient(180deg, #f43f5e, #9f1239); border-color: #fecdd3; box-shadow: 0 0 12px rgba(244, 63, 94, 0.8), 0 0 30px rgba(244, 63, 94, 0.45); animation: mu-pulse 0.9s ease-in-out infinite; }
@keyframes mu-pulse { 50% { filter: brightness(1.25); } }
.mu-skip:disabled { opacity: 0.45; }
.mu-skiphint { margin: 0 4px 2px; text-align: center; font-size: 13px; min-height: 18px; }
.mu-sec { margin: 10px 2px 2px; font-family: "DixieBlock", "Oswald", system-ui, sans-serif; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mu-sec span { letter-spacing: 0.04em; text-transform: none; color: var(--dim); font-family: system-ui, sans-serif; font-size: 12px; }
.mu-search input { width: 100%; min-height: 50px; font-size: 17px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--neon); background: rgba(8, 3, 14, 0.9); box-shadow: 0 0 10px rgba(176, 76, 255, 0.35); }
.mu-search input:focus { outline: none; border-color: #f0c8ff; box-shadow: var(--glow-strong); }
.mu-results, .mu-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mu-row { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; min-height: 64px; border: 1px solid var(--line); border-radius: 16px; background: rgba(20, 8, 34, 0.85); }
.mu-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mu-t b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-t span { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-btns { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.mu-btns button { min-height: 40px; padding: 6px 14px; font-size: 14px; }
.mu-btns .mu-playnext { min-height: 44px; font-size: 15px; font-weight: 850; }
.mu-btns .mu-end { min-height: 32px; font-size: 12px; background: rgba(10, 4, 18, 0.8); border: 1px solid rgba(196, 91, 255, 0.45); }
.mu-queue li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid rgba(196, 91, 255, 0.22); }
.mu-queue li .i { min-width: 22px; color: var(--dim); font-weight: 800; font-variant-numeric: tabular-nums; }
.mu-results li.none, .mu-queue li.none { justify-content: center; color: var(--dim); font-style: italic; padding: 10px; border: 0; }
@media (min-width: 700px) { .mu-btns { flex-direction: row; } .mu-title { font-size: 26px; } }

/* v2.8.1 Five Dollar Shots button */
.mu-shots { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 6px 0 2px;
  border-radius: 14px; border: 1px solid #fde68a; color: #1c1917; font-weight: 800; font-size: 19px; letter-spacing: .3px;
  background: linear-gradient(180deg, #fbbf24, #d97706); box-shadow: 0 0 10px rgba(251, 191, 36, .55); cursor: pointer; }
.mu-shots .sc-icon { font-size: 26px; }
.mu-shots.armed { background: linear-gradient(180deg, #fde047, #f59e0b); box-shadow: 0 0 14px rgba(253, 224, 71, .9), 0 0 32px rgba(245, 158, 11, .5); animation: mu-pulse .9s ease-in-out infinite; }

/* v2.9.0 employee-number login + DJ view */
.login{position:fixed;inset:0;z-index:200;background:rgba(7,4,13,.97);display:flex;align-items:center;justify-content:center;padding:20px}
.login[hidden]{display:none}
.login-card{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:320px;text-align:center}
.login-card h3{margin:0}
.login-card input,.login-card select{width:100%;font-size:16px;font-weight:400;text-align:left;letter-spacing:normal;text-transform:none;padding:14px 16px;border-radius:16px}
.login-card button{width:100%;font-size:18px;padding:12px}
.login-msg{color:#ff8fa3;min-height:1.2em;margin:0}
.chip.who{cursor:pointer;font-size:12px;white-space:nowrap}
body.role-dj #rooms,body.role-dj #songChangeBtn,body.role-dj #infoToggle,body.role-dj #musicBtn,body.role-dj #stageBtn,
body.role-dj [data-act="dancers"],body.role-dj [data-act="settings"]{display:none!important}
body.role-dj #boardInfo{display:block}
.mu-queue li.dj-q{display:flex;align-items:center;gap:8px}
.mu-queue li.dj-q .mu-t{flex:1;min-width:0}
.rot-break-row{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:6px 0;border-radius:12px;border:1px dashed rgba(255,255,255,.35);font-size:18px}
.rot-break-row.next{opacity:.85;font-size:16px}
/* v2.10.0 dancer page + dancer admin */
.dancer-page .dcard{margin:12px 0;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.dancer-page .dcard[hidden],.dancer-page section[hidden]{display:none}
.dancer-page form{display:flex;flex-direction:column;gap:10px}
.dancer-page input{font-size:18px;padding:12px;border-radius:12px}
.dwarn{color:#ffd166;font-weight:600;text-align:center}
.dmsg{color:#ff8fa3;text-align:center;min-height:1.2em}
.dlink{width:100%;margin-top:6px}
.dname{font-size:24px;font-weight:700}
.dwait{color:#ffd166}
.mu-queue li.dme{outline:2px solid #e070ff;border-radius:10px}
.dsub{display:block;font-size:12px;opacity:.7}
.dadm li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dadm .pw{font-family:monospace;background:rgba(255,255,255,.08);padding:2px 6px;border-radius:6px}
.dadm select{font-size:15px;padding:6px;border-radius:8px}
.dprof{display:block;font-size:13px;white-space:pre-wrap;opacity:.9;margin-top:2px}
.dancer-page textarea{font-size:16px;padding:10px;border-radius:12px;width:100%;box-sizing:border-box}
.dz-banner{margin:10px 0;padding:12px;border-radius:14px;border:2px solid #ffd166;background:rgba(255,209,102,.1);animation:dzpulse 1.6s ease-in-out 3}
.dz-banner[hidden]{display:none}
@keyframes dzpulse{50%{box-shadow:0 0 18px #ffd166}}
.dz-head{font-weight:700;margin-bottom:6px}
.dz-item{padding:8px 0;border-top:1px solid rgba(255,255,255,.1)}
.dz-who{font-size:15px}.dz-chg{font-size:14px;margin:4px 0 8px;white-space:pre-wrap}.dz-chg s{opacity:.6}
.dz-item .row{display:flex;gap:10px}.dz-item .row button{flex:1;padding:10px;font-size:16px}
.dz-btn{position:relative}.dz-badge{position:absolute;top:-6px;right:-6px;background:#ff3b6b;color:#fff;border-radius:10px;font-size:12px;padding:1px 6px;font-weight:700}
.dz-more{width:100%;margin-top:6px}
body.role-dj #dzBtn{display:inline-flex!important}
.dturn-big{font-size:2rem;font-weight:700;margin:.2rem 0}
.dbreakline{margin:.2rem 0 .5rem}
.dexplain{font-weight:600;margin:.2rem 0 .6rem}
/* ---- dancer page v2.12.2: tidy layout + fields ---- */
.dancer-page .wrap{max-width:560px;margin:0 auto;padding:0 18px 48px}
.dancer-page .dhead{margin:18px 2px 6px}
.dancer-page .dname{font-size:26px;font-weight:800;letter-spacing:.01em}
.dancer-page .dnote{margin:4px 0 0;color:var(--dim);font-size:14px;line-height:1.45}
.dancer-page .dsec{margin:26px 0 0}
.dancer-page .dh{margin:0 0 8px;font-family:"DixieBlock","Oswald",system-ui,sans-serif;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.dancer-page .dexplain{margin:0 0 12px;font-size:14px;line-height:1.45;color:#f3e3ff;opacity:.9;font-weight:500}
.dancer-page .dturn-row{display:flex;align-items:center;gap:10px}
.dancer-page .dturn-big{font-size:34px;font-weight:800;line-height:1.1;text-shadow:0 0 14px rgba(196,91,255,.55)}
.dancer-page .dlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dancer-page .dlist li{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(239,198,255,.08)}
.dancer-page .dlist li:last-child{border-bottom:0}
.dancer-page .dlist li .i{min-width:20px;color:var(--dim);font-weight:800;font-variant-numeric:tabular-nums;opacity:.8}
.dancer-page .dlist li .mu-t{flex:1;min-width:0}
.dancer-page .dlist li.dpend{opacity:.92}
.dancer-page .dlist li.dpend .i{color:#fde68a}
.dancer-page .dlist li.dempty{color:var(--dim);font-style:italic;justify-content:flex-start;border:0;opacity:.8}
.dancer-page .dtags{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap}
.dancer-page .dacts{display:flex;gap:4px}
.dancer-page .dicon{width:34px;height:34px;min-height:34px;padding:0;border-radius:10px;background:transparent;border:1px solid rgba(239,198,255,.18);color:var(--dim);font-size:13px}
.dancer-page .dicon:disabled{opacity:.25}
.dancer-page .dmini{min-height:36px;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap}
.dancer-page .dbtn{width:100%;min-height:48px;border-radius:14px;font-size:16px;font-weight:800;margin-top:4px}
.dancer-page input,.dancer-page textarea,.dancer-page .dfield{
  width:100%;display:block;font:inherit;font-size:16px;line-height:1.4;color:var(--ink);
  background:rgba(18,8,30,.92);border:1.5px solid rgba(196,91,255,.45);border-radius:16px;padding:14px 16px;
  -webkit-appearance:none;appearance:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 0 rgba(224,92,255,0);
  transition:border-color .15s,box-shadow .15s,background .15s}
.dancer-page textarea{resize:vertical;min-height:96px}
.dancer-page input::placeholder,.dancer-page textarea::placeholder{color:rgba(214,184,245,.5)}
.dancer-page input:focus,.dancer-page textarea:focus{outline:none;border-color:#e05cff;background:rgba(28,10,44,.95);box-shadow:0 0 0 3px rgba(224,92,255,.22),0 0 18px rgba(196,91,255,.35)}
.dancer-page input[type=search]{border-radius:999px;padding-left:18px}
.dancer-page input[type=search]::-webkit-search-cancel-button{filter:invert(.8)}
.dancer-page .dfield-wrap{margin:12px 0 4px}
.dancer-page .dresults:not(:empty){margin-top:6px}
.dancer-page .dlabel{display:block;margin:14px 2px 6px;font-size:13px;font-weight:700;color:var(--dim);letter-spacing:.02em}
.dancer-page .dlabel span{font-weight:500;opacity:.7}
.dancer-page .dfold{margin:22px 0 0;border-top:1px solid rgba(239,198,255,.1);padding-top:4px}
.dancer-page .dfold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 2px;font-family:"DixieBlock","Oswald",system-ui,sans-serif;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.dancer-page .dfold>summary::-webkit-details-marker{display:none}
.dancer-page .dfold>summary::after{content:"▾";margin-left:auto;transition:transform .2s;opacity:.7}
.dancer-page .dfold[open]>summary::after{transform:rotate(180deg)}
.dancer-page .dfold>summary .rtag,.dancer-page .dcount{font-family:system-ui,sans-serif;letter-spacing:0}
.dancer-page .dcount{font-size:12px;text-transform:none;color:#fde68a;border:1px solid rgba(251,191,36,.5);border-radius:999px;padding:2px 8px}
.dancer-page .dpendbox{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(251,191,36,.06);border:1px dashed rgba(251,191,36,.4);font-size:14px}
.dancer-page .dpendbox p{margin:6px 0 0}
.dancer-page .dbreakline{margin:0 0 6px}
.dancer-page #dLogin,.dancer-page #dSignup{margin-top:24px;border:0;background:transparent;padding:0}
.dancer-page h2.dh{border:0;background:none;box-shadow:none;padding:0;border-radius:0;display:block}
/* ---- v2.13.0 login / sign-up ---- */
body.logged-out .wrap{visibility:hidden}
.login{overflow-y:auto;align-items:flex-start;padding-top:max(6vh,24px)}
.login-card{max-width:360px;gap:10px}
.login-card .lg-pane{display:flex;flex-direction:column;gap:12px;width:100%}
.login-card .lg-pane[hidden]{display:none}
.login-card .lg-in{width:100%;font-size:16px;text-align:left;letter-spacing:normal;color:var(--ink);background:rgba(18,8,30,.92);border:1.5px solid rgba(196,91,255,.45);border-radius:16px;padding:14px 16px;-webkit-appearance:none;appearance:none}
.login-card .lg-in:focus{outline:none;border-color:#e05cff;box-shadow:0 0 0 3px rgba(224,92,255,.22),0 0 18px rgba(196,91,255,.35)}
.login-card .lg-in::placeholder{color:rgba(214,184,245,.5)}
.login-card select.lg-in{background-image:linear-gradient(45deg,transparent 50%,#d6b8f5 50%),linear-gradient(135deg,#d6b8f5 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.login-card button.primary{min-height:50px;border-radius:14px;font-weight:800}
.login-card .lg-link{background:none;border:0;color:var(--gold);font-size:16px;padding:8px;min-height:40px;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
.login-card .lg-choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:16px 18px;border-radius:16px;font-size:18px;font-weight:800;border:1.5px solid rgba(196,91,255,.5);background:rgba(28,10,44,.8)}
.login-card .lg-choice span{font-size:13px;font-weight:500;color:var(--dim)}
.login-card .lg-warn{margin:0;color:#ffd166;font-size:14px;font-weight:600}
.login-card .lg-wait{font-size:48px}
.login-card .lg-wait-t{margin:0;color:#fde68a}
.ac-role{font-size:16px;padding:6px 10px;border-radius:10px;background:rgba(18,8,30,.92);color:var(--ink);border:1px solid rgba(196,91,255,.45)}

/* v2.13.1: inputs never inherit heading letter-spacing/size */
.login-card input,.login-card select,.login-card textarea,.dancer-page input,.dancer-page textarea,.mu-search input{letter-spacing:normal!important;text-transform:none!important;font-weight:400!important;font-size:16px!important;text-align:left;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.login-card input::placeholder,.dancer-page input::placeholder,.dancer-page textarea::placeholder,.login-card textarea::placeholder{letter-spacing:normal;font-size:16px;font-weight:400;color:rgba(214,184,245,.55);opacity:1}

/* ===== v2.14.0 declutter (board, all roles) ===== */
body:not(.dancer-page) .top{border:1px solid rgba(196,91,255,.35);box-shadow:0 10px 24px rgba(0,0,0,.35);background:linear-gradient(160deg,rgba(32,10,54,.75),rgba(6,4,12,.95));padding:12px 14px 10px}
body:not(.dancer-page) .brand{margin:0 0 8px;gap:8px}
body:not(.dancer-page) .brand-logo{width:56px;height:56px;filter:none}
body:not(.dancer-page) .brand-script{font-size:26px}
body:not(.dancer-page) .brand-block{font-size:13px;letter-spacing:.22em}
.status-row{gap:6px;flex-wrap:wrap}
.status-row .chip{box-shadow:none!important;border-color:rgba(239,198,255,.18);background:rgba(255,255,255,.03);padding:5px 10px;font-size:13px}
.status-row .chip.clock{border-color:rgba(196,91,255,.45);font-size:14px}
.status-row .chip.who{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.status-row .iconbtn{box-shadow:none!important;border-color:rgba(239,198,255,.16);background:transparent;width:38px;height:38px;min-height:38px}
.songbar{box-shadow:0 0 0 1px rgba(224,92,255,.25)!important;border-width:1px!important}
.songbar .fill{box-shadow:none!important}
.songnext{opacity:.75;font-size:12px}
.vip{box-shadow:none!important;border-color:rgba(196,91,255,.22)!important}
.vip.run{box-shadow:0 0 0 1px rgba(224,92,255,.6)!important}
.mins button{box-shadow:none!important;border-color:rgba(196,91,255,.22)!important}
.clabel{box-shadow:none!important;border-color:rgba(196,91,255,.4)!important}
.board-info{box-shadow:none!important;border-color:rgba(196,91,255,.2)!important;background:rgba(14,5,24,.55)!important}
.tabs{gap:6px}
.tabs button{box-shadow:none!important;border-color:rgba(239,198,255,.14);background:transparent;padding:7px 12px;font-size:14px}
.tabs button.on{box-shadow:none!important;background:rgba(196,91,255,.35)!important;border-color:rgba(224,92,255,.6)!important}
.mu-card{box-shadow:none!important;border-width:1px!important}
.mu-fill{box-shadow:none!important}
.rot-row.next{box-shadow:none!important}
.chip.live{box-shadow:none!important}
button.primary{box-shadow:0 2px 10px rgba(176,76,255,.3)!important}
.set-quick{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.set-quick button{width:100%}
/* requests: simple list */
.req-list{list-style:none;margin:4px 0 0;padding:0}
.req-list li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(239,198,255,.08)}
.req-list li:last-child{border-bottom:0}
.req-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.req-main b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.req-main span{font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.req-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.req-time{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;opacity:.8}
.req-st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid rgba(239,198,255,.2);color:var(--dim)}
.req-st.ok{color:#bbf7d0;border-color:rgba(74,222,128,.45)}
.req-st.wait{color:#fde68a;border-color:rgba(251,191,36,.45)}
.req-st.no{color:#fecdd3;border-color:rgba(244,63,94,.45)}
.req-empty{text-align:center;color:var(--dim);opacity:.7;padding:28px 0;margin:0}