.rl-app {
  --ink: #16130F;
  --ink-soft: #221D16;
  --ink-soft-2: #2B241A;
  --chalk: #F2E9DA;
  --chalk-dim: #DCD3C4;
  --brass: #D9AF66;
  --marquee: #E8A33D;
  --ember: #D6553A;
  --velvet: #7C2C39;
  --velvet-light: #9A3B47;
  --verified: #8CA86B;
  --focus: #E8A33D;
  /* RGB triplets (no #, no rgb()) so glow/border effects below can use
  rgba(var(--x-rgb), alpha) and stay theme-aware. */
  --brass-rgb: 217,175,102;
  --marquee-rgb: 232,163,61;
  --ember-rgb: 214,85,58;
  /* Font roles, swappable per-style from the Styles admin page (see
  rl_font_options() in request-line.php for the curated choices). */
  --font-display: 'Bebas Neue', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Work Sans', sans-serif;
}

/* Secondary "Blue Steel" palette — a neutral, mid-tone (not dark, not
light) blue scheme with higher-contrast text, for testing via
?theme=blue on the page URL. Every color in the app is drawn from
these custom properties, so this block is the entire theme. */
.rl-app.theme-blue {
  --ink: #2E3B4E;
  --ink-soft: #3A4A60;
  --ink-soft-2: #46586F;
  --chalk: #F3F7FA;
  --chalk-dim: #C2D0DC;
  --brass: #8FBCE6;
  --marquee: #2F9BE0;
  --ember: #F2965C;
  --velvet: #B23A49;
  --velvet-light: #C9505F;
  --verified: #45B08C;
  --focus: #2F9BE0;
  --brass-rgb: 143,188,230;
  --marquee-rgb: 47,155,224;
  --ember-rgb: 242,150,92;
}

.rl-app,
.rl-app * {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .rl-app,
  .rl-app * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.rl-app {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-body);
  font-weight: 500;
  min-height: 100%;
  /* Tells the browser this is a dark UI, so native form-control chrome
  (autofill backgrounds, spinners, etc.) picks light-on-dark instead of
  its light-mode default — part of the fix for autofilled text being
  nearly invisible against this dark theme. */
  color-scheme: dark;
}

.rl-app {
  background-image: radial-gradient(ellipse 800px 400px at 50% -10%, rgba(var(--marquee-rgb),0.10), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 18px 60px;
  min-height: 100vh;
}

.wrap.stage {
  max-width: 760px;
}

.rl-app :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Input text-color fix ----------
On some browsers (notably Safari/iOS) the glyph paint on inputs is
controlled by -webkit-text-fill-color, not `color` — so even with
`color: var(--chalk)` set on each input, typed text can render nearly
invisible against the dark background. Force it directly here. Also
covers autofill, which separately paints its own light background and
dark text; the huge-transition + inset box-shadow trick overrides that
background since it can't be set directly. */
.rl-app input,
.rl-app textarea {
  color: var(--chalk);
  -webkit-text-fill-color: var(--chalk);
  caret-color: var(--chalk);
}

.rl-app input:-webkit-autofill,
.rl-app input:-webkit-autofill:hover,
.rl-app input:-webkit-autofill:focus,
.rl-app input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--chalk) !important;
  caret-color: var(--chalk) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px var(--ink-soft) inset !important;
}

/* ---------- Header ---------- */
.marquee-header {
  text-align: center;
  padding: 18px 10px 22px;
  position: relative;
}

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 10px;
}

.live-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px 2px rgba(var(--ember-rgb),0.7);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.performer-name {
  font-family: var(--font-display);
  font-size: 44px;
  letter-spacing: 0.03em;
  font-weight: 400;
  line-height: 1;
  color: var(--chalk);
  text-shadow: 0 0 22px rgba(var(--marquee-rgb),0.25);
}

.performer-sub {
  color: var(--brass);
  font-size: 14px;
  margin-top: 30px;
  letter-spacing: 0.02em;
}

.gig-meta {
  color: var(--chalk-dim);
  font-size: 14px;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.nav-pills {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 4px;
}

.nav-pill {
  background: var(--ink-soft);
  border: 1px solid rgba(var(--brass-rgb),0.3);
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-pill:hover {
  background: var(--marquee);
  color: var(--ink);
  border-color: var(--marquee);
}

/* ---------- Section labels ---------- */
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 30px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--brass-rgb),0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-note {
  color: var(--chalk-dim);
  font-size: 12px;
  margin: -6px 0 14px;
  font-style: italic;
}

/* ---------- Song rows ---------- */
.song-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink-soft);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  transition: border-color 0.2s ease;
}

.song-row.top-pick {
  border-color: rgba(var(--ember-rgb),0.5);
  animation: flicker 3.2s ease-in-out infinite;
}

@keyframes flicker {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(var(--ember-rgb),0);
  }
  50% {
    box-shadow: 0 0 16px rgba(var(--ember-rgb),0.18);
  }
}

.song-row.played {
  opacity: 0.45;
}

.song-row.played .song-title {
  text-decoration: line-through;
}

.song-row.played .heat-track {
  display: none;
}

.song-row.played [data-replay] {
  opacity: 1;
}

.song-row.played:has([data-replay]) {
  opacity: 0.7;
}

.played-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--chalk-dim);
  border-radius: 10px;
  width: 64px;
  min-width: 64px;
  /* Stretches to the row's own height (set by its taller title+artist
     sibling) instead of a fixed height, so it's a big, easy-to-hit target
     on stage rather than the same small square as the icon buttons. */
  align-self: stretch;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.played-toggle.is-played {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}

.played-toggle:hover {
  color: var(--chalk);
  border-color: rgba(255,255,255,0.4);
}

.played-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid rgba(var(--brass-rgb),0.35);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
}

.stub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--brass);
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.song-row.top-pick .stub {
  background: var(--ember);
  color: var(--chalk);
}

.song-info {
  flex: 1;
  min-width: 0;
}

.song-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--chalk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-artist {
  font-size: 16px;
  color: var(--chalk-dim);
  margin-top: 1px;
}

.heat-track {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.heat-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--marquee), var(--ember));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.vote-btn {
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--ink-soft-2);
  border: 2px solid rgba(var(--marquee-rgb),0.6);
  color: var(--marquee);
  border-radius: 9px;
  width: 52px;
  height: 48px;
  min-width: 52px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.12s ease, background 0.2s ease;
}

.vote-btn:hover {
  transform: translateY(-1px);
}

.vote-btn:active {
  transform: scale(0.95);
}

.vote-btn.voted {
  background: var(--marquee);
  color: var(--ink);
  border-color: var(--marquee);
}

.vote-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.vote-btn .flame {
  font-size: 18px;
  -webkit-text-stroke: 0.75px currentColor;
  text-shadow: 0 0 1px currentColor;
}

.vote-count {
  font-size: 11px;
}

.empty-note {
  color: var(--chalk-dim);
  font-size: 13px;
  font-style: italic;
  padding: 10px 2px 4px;
}

/* ---------- Repertoire browse (audience) ---------- */
.search-input {
  width: 100%;
  background: var(--ink-soft);
  border: 1px solid rgba(var(--brass-rgb),0.3);
  color: var(--chalk);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  margin-bottom: 10px;
}

.search-input::placeholder {
  color: var(--chalk-dim);
}

.rep-list {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 10px;
}

.rep-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ink-soft);
  border-radius: 9px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.03);
}

.rep-row .song-info {
  flex: 1;
  min-width: 0;
}

.rep-row .song-title {
  font-size: 18px;
}

.req-star-btn {
  background: var(--ink-soft-2);
  border: 1px solid rgba(var(--marquee-rgb),0.3);
  color: var(--marquee);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}

.req-star-btn.done {
  background: var(--marquee);
  color: var(--ink);
}

.setlist-star, .setlist-star-legend {
font-size: 18px;
}

/* ---------- Client-priority star (thumbs-up picks from Client Review) ---------- */
.client-star {
  color: var(--marquee);
  margin-right: 2px;
}

/* ---------- Client Review view ---------- */
.client-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ink-soft);
  border-radius: 9px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.03);
}

.client-row .song-info {
  flex: 1;
  min-width: 0;
}

.client-row .song-title {
  font-size: 14px;
}

.client-thumbs {
  display: flex;
  gap: 6px;
}

.thumb-btn {
  background: var(--ink-soft-2);
  border: 1px solid rgba(var(--brass-rgb),0.3);
  color: var(--chalk-dim);
  border-radius: 8px;
  width: 38px;
  height: 34px;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.thumb-btn:hover {
  transform: translateY(-1px);
}

.thumb-btn.thumb-up.selected {
  background: var(--verified);
  border-color: var(--verified);
  color: var(--ink);
}

.thumb-btn.thumb-down.selected {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--chalk);
}

.thumb-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.client-instructions {
  background: var(--ink-soft);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 4px;
  margin-bottom: 16px;
  border: 1px solid rgba(var(--brass-rgb),0.2);
}

.client-deadline-line {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--brass);
  margin-top: 10px;
}

.client-deadline-passed {
  font-size: 13px;
  color: var(--ember);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--ember-rgb),0.25);
}

.client-contact-line {
  margin-top: 6px;
  font-size: 13px;
  color: var(--chalk);
}

.boost-link {
  background: none;
  border: none;
  color: var(--ember);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0 0;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}

.boost-link:hover {
  text-decoration: underline;
}

.boost-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  flex-wrap: wrap;
}

.boost-picker-label {
  font-size: 11px;
  color: var(--chalk-dim);
  width: 100%;
  margin-bottom: 2px;
}

.custom-amt-input {
  background: var(--ink);
  border: 1px solid rgba(var(--brass-rgb),0.35);
  color: var(--chalk);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  width: 76px;
}

.custom-amt-input::placeholder {
  color: var(--chalk-dim);
}

.custom-amt-error {
  width: 100%;
  font-size: 11px;
  color: var(--ember);
  margin-top: 2px;
}

.boost-amt-btn {
  background: linear-gradient(160deg, var(--ember), var(--velvet));
  border: none;
  color: var(--chalk);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
}

.boost-cancel {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--chalk-dim);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
}

.boost-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ember);
  border: 1px solid rgba(var(--ember-rgb),0.4);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 6px;
}

.boost-badge.verified {
  color: var(--verified);
  border-color: rgba(140,168,107,0.45);
}

.verify-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--chalk-dim);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  min-width: 26px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.verify-toggle.is-verified {
  background: var(--verified);
  border-color: var(--verified);
  color: var(--ink);
}

.verify-toggle:hover {
  color: var(--chalk);
  border-color: rgba(255,255,255,0.4);
}

.song-row.boosted {
  border-color: rgba(var(--ember-rgb),0.55);
  box-shadow: 0 0 14px rgba(var(--ember-rgb),0.12);
}

/* ---------- Request form ---------- */
.request-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.request-input {
  flex: 1;
  background: var(--ink-soft);
  border: 1px solid rgba(var(--brass-rgb),0.3);
  color: var(--chalk);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-body);
}

.request-input::placeholder {
  color: var(--chalk-dim);
}

.request-submit {
  background: var(--marquee);
  color: var(--ink);
  border: none;
  border-radius: 9px;
  padding: 0 18px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.request-submit:active {
  transform: scale(0.97);
}

.request-item {
  background: var(--ink-soft);
  border-radius: 9px;
  padding: 10px 14px;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--chalk);
  border-left: 2px solid var(--brass);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.request-item .req-text {
  flex: 1;
}

.request-item .req-time {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--chalk-dim);
  white-space: nowrap;
}

.req-withdraw-btn {
  background: none;
  border: none;
  color: var(--chalk-dim);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 8px;
  text-decoration: underline;
  font-family: var(--font-body);
}

.req-withdraw-btn:hover {
  color: var(--ember);
}

/* ---------- Tip section ---------- */
.tip-card {
  background: linear-gradient(160deg, var(--velvet), #5c1f28);
  border-radius: 14px;
  padding: 20px 18px;
  margin-top: 30px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.06);
}

.tip-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: var(--chalk);
}

.tip-sub {
  font-size: 13px;
  color: rgba(242,233,218,0.75);
  margin-top: 4px;
  margin-bottom: 16px;
}

.tip-amounts {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.tip-amt-btn {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(242,233,218,0.35);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 9px;
  cursor: pointer;
}

.tip-amt-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* ---------- Footer / mode switch ---------- */
.footer-link {
  text-align: center;
  margin-top: 40px;
}

.ghost-btn {
  background: none;
  border: none;
  color: var(--brass);
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--font-body);
}

.passcode-box {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.passcode-box input {
  background: var(--ink-soft);
  border: 1px solid rgba(var(--brass-rgb),0.3);
  color: var(--chalk);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  width: 120px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.passcode-box button {
  background: var(--marquee);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Stage view ---------- */
.stage-topbar {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}

.stage-topbar-item {
  flex: 1;
  background: var(--ink-soft);
  border-radius: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.05);
}

.stage-topbar-tips {
  flex: 0 0 auto;
  text-align: right;
}

.stage-topbar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
}

.stage-topbar-value {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--chalk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-topbar-tips .stage-topbar-value {
  color: var(--ember);
}

.stage-topbar-artist {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--chalk-dim);
}

.panel {
  background: var(--ink-soft);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.05);
}

.panel h3 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.03em;
  font-weight: 400;
  margin: 0 0 4px;
  color: var(--marquee);
}

.panel .panel-sub {
  font-size: 11px;
  color: var(--chalk-dim);
  margin-bottom: 12px;
}

.setup-field {
  margin-bottom: 12px;
}

.setup-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 5px;
}

.setup-field input {
  width: 100%;
  background: var(--ink);
  border: 1px solid rgba(var(--brass-rgb),0.3);
  color: var(--chalk);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: var(--font-body);
}

.paste-box {
  width: 100%;
  background: var(--ink);
  border: 1px solid rgba(var(--brass-rgb),0.3);
  color: var(--chalk);
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 700;
  min-height: 84px;
  resize: vertical;
}

.paste-box::placeholder {
  color: var(--chalk-dim);
}

.paste-row {
  margin-top: 4px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.paste-row-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.paste-hint {
  font-size: 10.5px;
  color: var(--chalk-dim);
}

.add-song-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.add-song-row input {
  flex: 1;
}

.small-btn {
  background: var(--marquee);
  color: var(--ink);
  border: none;
  border-radius: 7px;
  padding: 0 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  height: 34px;
  white-space: nowrap;
}

.icon-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--chalk-dim);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.icon-btn:hover {
  color: var(--chalk);
  border-color: rgba(255,255,255,0.4);
}

.stage-song-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stage-list-scroll {
  max-height: 260px;
  overflow-y: auto;
}

.stage-req-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stage-req-row .req-text {
  flex: 1;
  font-size: 14px;
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid rgba(var(--brass-rgb),0.35);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
}

.tag.verified {
  color: var(--verified);
  border-color: rgba(140,168,107,0.45);
}

.tag.boosted-tag {
  color: var(--ember);
  border-color: rgba(var(--ember-rgb),0.4);
}

.danger-btn {
  background: none;
  border: 1px solid var(--velvet-light);
  color: var(--velvet-light);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
}

.tip-tally {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--marquee);
  text-align: center;
  margin: 6px 0;
}

.tip-tally-note {
  font-size: 11px;
  color: var(--chalk-dim);
  text-align: center;
  margin-bottom: 10px;
}

.status-msg {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--chalk-dim);
  margin-top: 20px;
  font-family: var(--font-mono);
}

/* ---------- History panel ---------- */
.history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
}

.history-row:hover {
  background: rgba(255,255,255,0.02);
}

.history-row .hist-main {
  flex: 1;
}

.history-row .hist-date {
  font-size: 14px;
  font-weight: 600;
}

.history-row .hist-sub {
  font-size: 11px;
  color: var(--chalk-dim);
  margin-top: 2px;
}

.history-detail {
  background: var(--ink);
  border-radius: 8px;
  padding: 10px 12px;
  margin: -2px 0 8px;
  font-size: 13px;
}

.history-detail .hd-song {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.history-detail .hd-song:last-child {
  border-bottom: none;
}

.login-error {
  text-align: center;
  font-size: 12px;
  color: var(--ember);
  margin-top: 8px;
}

.config-warning {
  background: var(--velvet);
  color: var(--chalk);
  border-radius: 10px;
  padding: 16px;
  margin: 20px 0;
  font-size: 13px;
  line-height: 1.5;
}

.config-warning code {
  background: rgba(0,0,0,0.25);
  padding: 1px 5px;
  border-radius: 4px;
}