/* ZeroOne Beats Admin - visual style matched to play.zeroonebeats.com:
 * Segoe UI body, Orbitron only for small-caps accents, the site's
 * cyan/orange/white palette, and the same subtle dark gradient background.
 * Goal: feel like part of the site, not a separate "cyberpunk" app. */

:root {
  /* Match the Play page tokens exactly. */
  --cyan:        #00aaff;
  --orange:      #ff7a00;
  --green:       #00ff88;
  --gold:        #ffd700;
  --red:         #ff5577;

  --bg-base:     #050a13;
  --bg-surface:  rgba(255,255,255,0.04);
  --bg-elevated: rgba(255,255,255,0.06);
  --bg-hover:    rgba(255,255,255,0.10);
  --border:      rgba(255,255,255,0.10);
  --border-hi:   rgba(255,255,255,0.18);

  --text-pri:    #ffffff;
  --text-sec:    rgba(255,255,255,0.70);
  --text-dim:    rgba(255,255,255,0.40);

  --radius:      8px;
  --ease:        160ms ease;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #000; scrollbar-color: #555 #111; }
body {
  min-height: 100vh; min-height: 100dvh;
  color: var(--text-pri);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
/* Fixed-position gradient layer that always covers the viewport regardless
 * of how tall the page content grows. Avoids the `background-attachment:
 * fixed` quirks where the gradient ends part-way down a long page. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, #000000 0%, #0a1628 25%, #0d0a1a 50%, #1a0a0a 75%, #000000 100%);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: 'Consolas', 'JetBrains Mono', monospace;
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12.5px;
}

.screen { min-height: 100vh; }

/* The brand mark - same Orbitron 800 / 4px-tracked treatment as the Play
 * page nav-logo, just slightly larger here so it can carry the login card. */
.brand-zero, .brand-one, .brand-beats {
  font-family: 'Russo One', 'Orbitron', sans-serif;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.brand-zero  { color: var(--cyan);   }
.brand-one   { color: var(--orange); }
.brand-beats { color: #fff; margin-left: 6px; }

/* ── LOGIN ─────────────────────────────────────────────── */
#loginScreen {
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  background: rgba(0,170,255,0.04);
  border: 1px solid rgba(0,170,255,0.20);
  border-radius: 12px;
  padding: 32px 30px;
  width: 100%;
  max-width: 380px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
.login-brand {
  font-size: 14px;       /* small, like the nav logo, not in-your-face */
  text-align: center;
  margin-bottom: 6px;
}
.login-sub {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  text-align: center;
  margin-bottom: 22px;
}
.login-tagline {
  text-align: center;
  color: var(--text-sec);
  margin: 0 0 22px;
}
.login-buttons { display: flex; flex-direction: column; gap: 10px; }
.login-btn {
  display: block; padding: 11px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-hi);
  background: rgba(255,255,255,0.04);
  color: var(--text-pri); font-weight: 600;
  text-align: center; text-decoration: none;
  transition: border-color var(--ease), background var(--ease);
}
.login-btn:hover {
  border-color: rgba(0,170,255,0.5);
  background: rgba(0,170,255,0.10);
  text-decoration: none;
}
.login-error {
  margin-top: 18px;
  padding: 10px 14px;
  background: rgba(255,85,119,0.10);
  border: 1px solid rgba(255,85,119,0.40);
  color: #ffb4c0;
  border-radius: var(--radius);
  font-size: 13px;
}
.login-help {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
}

/* ── DASHBOARD ─────────────────────────────────────────── */
.topbar {
  background: rgba(0,0,0,0.30);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
/* Inner wrapper keeps the bar full-width (background + divider) while its
   content lines up with the centered .content column below. */
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.topbar-title { font-size: 13px; }
.topbar-section {
  margin-left: 14px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--cyan);
  padding: 3px 10px;
  border: 1px solid rgba(0,170,255,0.35);
  border-radius: 999px;
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-user { color: var(--text-sec); font-size: 13px; }

.tabs {
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(10px);
  /* Stack the whole nav (incl. the More dropdown) above page content. */
  position: relative;
  z-index: 100;
}
/* Same centered column as .topbar-inner / .content so the tab row and the
   Generate Catalog button align with the page content beneath them. */
.tabs-inner {
  display: flex; gap: 2px;
  align-items: stretch;
  padding: 0 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.tabs-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tabs-right .btn {
  font-size: 12px;
  padding: 6px 14px;
}
.tabs-right .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tab {
  /* inline-flex + center keeps the row height constant whether or not the
     Feedback count badge is present - otherwise the taller pill grows the tab
     and the whole row jumps down when the badge loads. */
  display: inline-flex; align-items: center;
  background: transparent; border: none;
  color: var(--text-sec);
  padding: 14px 18px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 13px; font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.tab:hover { color: var(--text-pri); }
.tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }

/* "More" overflow dropdown - houses the occasional tabs (Feedback, Social,
   Users, Rate limits) so the daily-driver tabs keep a single uncrowded row. */
.tab-more { position: relative; display: inline-flex; align-items: stretch; }
.tab-more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  color: var(--text-sec);
  padding: 14px 18px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 13px; font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}
.tab-more-btn:hover { color: var(--text-pri); }
.tab-more-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.tab-more-caret { font-size: 10px; opacity: 0.7; }
/* display:flex below would override the UA's [hidden] rule - restate it. */
.tab-more-menu[hidden] { display: none; }
.tab-more-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 180px;
  background: #0a1628;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.tab-more-menu .tab {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 10px 14px;
  border-bottom: none;
  border-radius: 6px;
}
.tab-more-menu .tab:hover { background: rgba(0,170,255,0.08); }
.tab-more-menu .tab.active { color: var(--cyan); background: rgba(0,170,255,0.10); }

.content { padding: 24px; max-width: 1100px; margin: 0 auto; }

/* ── Library tab: compact, clickable track rows ── */
.library-list { display: flex; flex-direction: column; gap: 6px; }
.lib-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.lib-row:hover { background: rgba(0,170,255,0.07); border-color: rgba(0,170,255,0.35); }
.lib-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.lib-row-main { flex: 1 1 auto; min-width: 0; }
.lib-row-title {
  font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-row-sub { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.lib-row-tags {
  flex: 0 1 auto; font-size: 12px; color: var(--text-sec);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}
.lib-status {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.03em;
}
.lib-status-ok   { background: rgba(64,200,120,0.15); color: #41c878; }
.lib-status-need { background: rgba(255,170,0,0.15);  color: #ffaa00; }
.lib-row-note {
  font-size: 12px; color: #ffaa00; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-download {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; letter-spacing: 0.03em;
  background: rgba(0,170,255,0.12); color: var(--cyan);
  border: 1px solid rgba(0,170,255,0.35);
  text-decoration: none; cursor: pointer;
}
.lib-download:hover { background: rgba(0,170,255,0.22); border-color: rgba(0,170,255,0.6); }
.lib-download:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* Library entry = two separate cards: left = track/tags, right = promo actions. */
.lib-entry { display: flex; align-items: stretch; gap: 10px; }
.lib-entry .lib-row { flex: 1 1 auto; min-width: 0; margin: 0; }
.lib-actions-card {
  flex: 0 0 176px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.lib-actions-card > * {
  display: block; width: 100%; box-sizing: border-box;
  text-align: center; margin: 0;
}
.lib-scheduled, .lib-promo, .lib-actions-none {
  font-size: 11px; font-weight: 700;
  padding: 5px 0; border-radius: 999px; letter-spacing: 0.03em;
}
.lib-scheduled { background: rgba(226,75,74,0.15);  color: #ff7b7a; border: 1px solid rgba(226,75,74,0.40); }
.lib-promo     { background: rgba(127,119,221,0.20); color: #b3abff; border: 1px solid rgba(127,119,221,0.50); }
.lib-actions-none { color: #5a6478; font-weight: 600; }
.lib-actions-date { font-size: 11px; color: var(--text-sec); }

@media (max-width: 640px) {
  .lib-row-tags { display: none; }
  .lib-entry { flex-direction: column; gap: 6px; }
  .lib-actions-card { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .lib-actions-card > * { display: inline-block; width: auto; }
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-header-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.submissions-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-sec);
  margin-left: 6px;
  letter-spacing: 0.02em;
}
.submissions-search {
  min-width: 220px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-pri);
  font-family: inherit;
  font-size: 13px;
}
.submissions-search:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,170,255,0.18);
}
.submissions-search::placeholder { color: rgba(255,255,255,0.32); }

.status-filter {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sec);
}
.status-filter select {
  padding: 6px 28px 6px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-pri);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%2300aaff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.status-filter select:hover { border-color: var(--border-hi); }
.status-filter select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,170,255,0.2);
}
.status-filter select option {
  background: #0a1628;
  color: var(--text-pri);
}
.status-filter select option:checked { background: rgba(0,170,255,0.30); }
.pipeline-status {
  background: rgba(0,170,255,0.04);
  border: 1px solid rgba(0,170,255,0.18);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.pipeline-status-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pipeline-status-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pipeline-status-dot.idle {
  background: var(--green);
  box-shadow: 0 0 8px rgba(0,255,136,0.5);
}
.pipeline-status-dot.busy {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0,170,255,0.6);
  animation: pipeline-pulse 1.4s ease-in-out infinite;
}
.pipeline-status-dot.warn {
  background: var(--orange);
  box-shadow: 0 0 8px rgba(255,122,0,0.5);
}
@keyframes pipeline-pulse {
  0%,100% { transform: scale(1);   opacity: 1;   }
  50%     { transform: scale(1.4); opacity: 0.6; }
}
.pipeline-status-text {
  flex: 1;
  color: var(--text-pri);
}
.pipeline-status-text strong { color: var(--cyan); }
.pipeline-status-text .pipeline-failed { color: #ff8a9c; }
.pipeline-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-sec);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.pipeline-toggle:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-pri);
}
.pipeline-details {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pipeline-section { margin-bottom: 8px; }
.pipeline-section:last-child { margin-bottom: 0; }
.pipeline-section-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin-bottom: 4px;
}
.pipeline-section-title.pipeline-failed-title { color: #ff8a9c; }
.pipeline-item {
  font-size: 12px;
  color: var(--text-pri);
  padding: 2px 0;
  font-family: 'Consolas', 'Cascadia Code', monospace;
}
.pipeline-item.pipeline-failed { color: #ff8a9c; }

.catalog-output {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,170,255,0.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-family: 'Consolas', 'Cascadia Code', monospace;
  font-size: 12px;
  line-height: 1.45;
  color: #c8e6ff;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
h2 {
  font-family: 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #fff;
}
.muted { color: var(--text-sec); margin-top: 0; }

/* ── BUTTONS ───────────────────────────────────────────── */
.btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  color: var(--text-pri);
  border: 1px solid var(--border-hi);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.btn:hover:not(:disabled) { background: rgba(255,255,255,0.10); border-color: rgba(0,170,255,0.45); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: var(--cyan);
  color: #001017;
  border-color: var(--cyan);
}
.btn-primary:hover:not(:disabled) {
  background: #33bcff; border-color: #33bcff;
}
.btn-ghost { background: transparent; }
.btn-danger {
  background: transparent;
  border-color: rgba(255,85,119,0.4);
  color: #ff8a9c;
}
.btn-danger:hover:not(:disabled) {
  background: rgba(255,85,119,0.10);
  border-color: var(--red);
}
/* Danger variant for small server-control buttons (TikTok Disconnect etc.) */
.srv-btn-danger {
  border-color: rgba(255,85,119,0.4);
  color: #ff8a9c;
}
.srv-btn-danger:hover:not(:disabled) {
  background: rgba(255,85,119,0.10);
  border-color: var(--red);
}
.btn-success {
  background: var(--green);
  color: #001a0e;
  border-color: var(--green);
}
.btn-success:hover:not(:disabled) {
  background: #33ffa6; border-color: #33ffa6;
}
/* "Premium Approve" button + premium-mode approval modal (brand orange) - mirrors
   .btn-success sizing. Admin-only; signals an approval into the app-only Premium
   catalogue rather than the radio. */
.btn-premium {
  background: var(--orange);
  color: #2a1500;
  border-color: var(--orange);
}
.btn-premium:hover:not(:disabled) {
  background: #ff9633; border-color: #ff9633;
}
#detailModal.premium-mode .modal { border-color: rgba(255,122,0,0.45); }
#detailModal.premium-mode .edit-panel {
  background: rgba(255,122,0,0.05);
  border-color: rgba(255,122,0,0.30);
}
#detailModal.premium-mode .edit-panel-title { color: var(--orange); }
.premium-banner {
  margin: 12px 0 4px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,122,0,0.10);
  color: var(--orange);
  border: 1px solid rgba(255,122,0,0.40);
}
/* Premium candidate pill on a submission row (submitter opted in). */
.premium-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: rgba(255,122,0,0.16);
  color: var(--orange);
  border: 1px solid rgba(255,122,0,0.55);
  white-space: nowrap;
}
/* "Approve to Premium" toggle row inside the approve modal. */
.premium-approve-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 2px; padding: 10px 12px;
  border: 1px solid rgba(255,122,0,0.30);
  border-radius: 8px;
  background: rgba(255,122,0,0.05);
  font-size: 0.9rem; color: var(--text); cursor: pointer;
}
.premium-approve-row input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--orange); flex-shrink: 0; }
.premium-approve-row b { color: var(--orange); }
/* Users tab: "Premium submit" grant badge + editor checkbox row. */
.badge-premium { background: rgba(255,122,0,0.16); color: var(--orange); border: 1px solid rgba(255,122,0,0.5); }
/* Download-.mp3 button on each library / premium-library list row. */
.lib-dl {
  flex-shrink: 0;
  margin-left: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px;
  text-decoration: none; font-size: 1.05rem; line-height: 1;
  color: var(--cyan);
  border: 1px solid rgba(0,170,255,0.40);
  background: rgba(0,170,255,0.08);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lib-dl:hover { background: rgba(0,170,255,0.20); color: #fff; border-color: var(--cyan); }
.user-edit-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; cursor: pointer; }
.user-edit-check input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--orange); flex-shrink: 0; }

/* ── SUBMISSIONS ───────────────────────────────────────── */
.submissions-list {
  display: flex; flex-direction: column; gap: 14px;
}
.empty { color: var(--text-dim); font-style: italic; }
.artist-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.artist-card-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(0,170,255,0.04);
  border-bottom: 1px solid var(--border);
}
.artist-card-pic {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(0,170,255,0.40);
}
.artist-card-pic.placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  border-color: var(--border);
}
.artist-card-name {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 16px;
  flex: 1;
}
.artist-card-count {
  color: var(--text-sec); font-size: 13px;
}
.artist-card-actions { display: flex; gap: 8px; }

.songs-list {
  list-style: none; margin: 0; padding: 0;
}
.song-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.song-row:last-child { border-bottom: none; }
.song-info { flex: 1; min-width: 0; }
.song-title {
  font-weight: 600; color: var(--text-pri);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-meta {
  font-size: 12px; color: var(--text-sec);
  display: flex; gap: 10px; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-meta-pill {
  background: rgba(255,255,255,0.06);
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.song-actions { display: flex; gap: 8px; }

/* ── DETAIL MODAL ──────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  /* No backdrop-filter: blur() - a full-viewport blur is recomputed every frame
     for as long as the modal is open, which pegs the GPU compositor (worst on the
     Library tab, where the whole track list sits behind the modal) and forces the
     browser off its hardware video-overlay path, stuttering video on other screens.
     The solid dim below gives the same focus effect for ~free. */
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal {
  background: linear-gradient(180deg, rgba(10,22,40,0.95), rgba(5,10,19,0.95));
  border: 1px solid rgba(0,170,255,0.25);
  border-radius: 14px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;   /* stop wheel from scrolling the page behind once the modal hits its scroll end */
  padding: 28px 32px;
  position: relative;
  box-shadow: 0 16px 60px rgba(0,0,0,0.7);
}
.modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-pri); font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: rgba(255,255,255,0.12); }

.detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 16px 0;
  font-size: 13px;
}
.detail-grid dt { color: var(--text-sec); }
.detail-grid dd { margin: 0; color: var(--text-pri); word-break: break-word; }
.detail-message {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-pri);
}
.detail-audio { width: 100%; margin-top: 14px; }

/* ── DETAIL MODAL EDIT PANEL ────────────────────────────── */
.modal { max-width: 720px; }

/* Review/approve modal: wider + taller than other dialogs so the audio, tail
   editor, tempo tap, and edit grid fit without vertical scrolling. */
#detailModal .modal { max-width: min(1040px, 94vw); max-height: 92vh; }

/* Tail editor + tempo tap share a row on wide screens to save vertical height. */
.review-tools-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 14px;
}
.review-tools-row > .tail-editor,
.review-tools-row > .bpm-tap {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}
/* Three-up edit grid once the modal is wide enough (drops to 2-up/1-up below). */
@media (min-width: 900px) {
  #detailModal .edit-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 760px) {
  .review-tools-row { flex-direction: column; }
}

.detail-status {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.detail-status-approved {
  background: rgba(0,255,136,0.07);
  border: 1px solid rgba(0,255,136,0.3);
  color: #66ffb0;
}
.detail-status-rejected {
  background: rgba(255,85,119,0.08);
  border: 1px solid rgba(255,85,119,0.35);
  color: #ff8a9c;
}
.detail-status-withdrawn {
  background: rgba(148,163,184,0.08);
  border: 1px solid rgba(148,163,184,0.35);
  color: #b6c2d4;
}
.detail-status-reason {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.85;
  font-style: italic;
}

.bpm-tap {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255,215,0,0.05);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 14px;
}
.bpm-tap-btn {
  width: 100%;
  height: 92px;
  background: linear-gradient(135deg, #ffb800, #ff7a00);
  border: none;
  border-radius: 10px;
  color: #1a1000;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.18em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.06s ease, filter 0.15s;
  box-shadow: 0 0 0 0 rgba(255,184,0,0.0);
}
.bpm-tap-btn:hover { filter: brightness(1.08); }
.bpm-tap-btn:active { transform: scale(0.96); }
.bpm-tap-btn.pulse {
  animation: bpm-pulse 0.18s ease-out;
}
@keyframes bpm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,184,0,0.55); transform: scale(0.96); }
  100% { box-shadow: 0 0 0 14px rgba(255,184,0,0); transform: scale(1); }
}
.bpm-tap-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.bpm-tap-value {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: #ffd700;
}
.bpm-tap-unit {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(255,215,0,0.7);
  text-transform: uppercase;
}
.bpm-tap-hint {
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-sec);
  margin-top: 4px;
}
.bpm-tap-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tail editor: waveform of the last ~10s with drag-to-fade / drag-to-crop. */
.tail-editor {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(0,170,255,0.04);
  border: 1px solid rgba(0,170,255,0.18);
  border-radius: 10px;
}
.tail-editor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tail-editor-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.tail-editor-readout { font-size: 12px; color: var(--text-sec); }
.tail-editor-readout.active { color: var(--gold); font-weight: 600; }
.tail-editor-status { font-size: 12px; color: var(--text-dim); padding: 14px 2px; }
.tail-wave-wrap {
  position: relative;
  height: 90px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  touch-action: none;
}
.tail-wave { display: block; width: 100%; height: 100%; }
.tail-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 18px;
  margin-left: -9px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}
.tail-handle::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #fff;
}
.tail-handle span {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.tail-handle-fade::before { background: #6aa8ff; }
.tail-handle-fade span    { background: #6aa8ff; }
.tail-handle-crop::before { background: var(--red); }
.tail-handle-crop span    { background: var(--red); }
.tail-editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.tail-editor-hint { font-size: 11px; color: var(--text-dim); }
.tail-editor-hint b { color: var(--text-sec); font-weight: 600; }

.edit-label-hint {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.4);
  margin-left: 6px;
}
.edit-grid select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.edit-panel {
  margin-top: 18px;
  padding: 16px;
  background: rgba(0,170,255,0.04);
  border: 1px solid rgba(0,170,255,0.18);
  border-radius: 10px;
}
.edit-panel-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}
.edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sec);
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
}
.edit-grid input,
.edit-grid select {
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-pri);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
}
.edit-grid input:focus,
.edit-grid select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,170,255,0.2);
}
/* The optional admin note spans the full Edit & approve grid width. */
.edit-note-field { grid-column: 1 / -1; }
/* Note panel in the Library editor. */
.lib-note-text {
  width: 100%;
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-pri);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.lib-note-text:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,170,255,0.2);
}
.lib-note-meta { font-size: 11px; color: var(--text-sec); margin: 4px 0 2px; }
/* Custom select: drop the native arrow for an on-brand cyan caret, and darken
   the option popup so it matches the panel instead of the grey OS listbox. */
.edit-grid select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%2300aaff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.edit-grid select:hover { border-color: var(--border-hi); }
.edit-grid select:focus { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%2300aaff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); }
.edit-grid select option {
  background: #0a1628;
  color: var(--text-pri);
}
.edit-grid select option:checked { background: rgba(0,170,255,0.30); }
.edit-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.edit-draft-status {
  font-size: 11px;
  color: var(--text-sec);
  margin-left: auto;
  letter-spacing: 0.05em;
}

.detail-readonly-block {
  margin-top: 18px;
}
.detail-readonly-block summary {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sec);
  padding: 6px 0;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.status-approved {
  background: rgba(0,255,136,0.1);
  border: 1px solid rgba(0,255,136,0.35);
  color: #66ffb0;
}
.status-rejected {
  background: rgba(255,85,119,0.1);
  border: 1px solid rgba(255,85,119,0.4);
  color: #ff8a9c;
}
.status-withdrawn {
  background: rgba(148,163,184,0.12);
  border: 1px solid rgba(148,163,184,0.4);
  color: #b6c2d4;
}

/* "Another admin is currently reviewing this track" pill on a pending row. */
.reviewing-badge {
  display: inline-block;
  padding: 2px 9px;
  margin-left: 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  background: rgba(255,193,7,0.12);
  border: 1px solid rgba(255,193,7,0.45);
  color: #ffd866;
}
.song-row-reviewing { background: rgba(255,193,7,0.04); }
.song-row-reviewing .song-title { opacity: 0.85; }

/* Warning banner inside the detail modal when somebody else also has it open. */
.reviewing-banner {
  margin: 4px 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255,193,7,0.12);
  border: 1px solid rgba(255,193,7,0.5);
  color: #ffd866;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 560px) {
  .edit-grid { grid-template-columns: 1fr; }

  /* Tighten modal chrome so the inner content has more room. */
  .modal-backdrop { padding: 12px; }
  .modal { padding: 22px 18px; }

  /* BPM tap counter: the desktop 3-column (TAP | display | actions) layout
     doesn't fit in a phone-width modal. Stack vertically, shrink the TAP
     button, center the value/hint, lay Apply+Reset side-by-side. */
  .bpm-tap {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .bpm-tap-btn { height: 72px; font-size: 20px; }
  .bpm-tap-display { justify-content: center; }
  .bpm-tap-value { font-size: 36px; }
  .bpm-tap-hint { text-align: center; }
  .bpm-tap-actions { flex-direction: row; }
  .bpm-tap-actions .btn { flex: 1 1 auto; }
}

/* ── FORMS ─────────────────────────────────────────────── */
.form-grid {
  display: grid; gap: 14px;
  background: rgba(255,255,255,0.03);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 460px;
  backdrop-filter: blur(6px);
}
.form-grid label {
  display: flex; flex-direction: column; gap: 6px;
}
.form-grid label > span {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sec);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
}
.form-grid input[type=number],
.form-grid input[type=text] {
  padding: 9px 12px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: var(--text-pri);
  font-family: inherit; font-size: 14px;
}
.form-grid input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,170,255,0.20);
}

/* Hide the up/down spinner buttons on number inputs everywhere in the admin.
 * They tend to mis-render against the dark theme and the user prefers typing. */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.form-buttons { display: flex; gap: 10px; }
.form-status { font-size: 12.5px; color: var(--text-sec); min-height: 1.2em; }
.form-status.ok    { color: var(--green); }
.form-status.error { color: var(--red); }

/* ── USER PICKER ───────────────────────────────────────── */
.user-picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.user-picker-field {
  display: flex; flex-direction: column; gap: 6px;
}
.user-picker-field > span {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sec);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
}
.user-picker-field select {
  padding: 9px 12px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  color: var(--text-pri);
  font-family: inherit; font-size: 14px;
  cursor: pointer;
}
.user-picker-field select:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,170,255,0.20);
}
.user-picker-field select option {
  background: #0a1628;
  color: var(--text-pri);
}

/* ── USER EDIT CARD ────────────────────────────────────── */
.user-edit-card {
  background: rgba(0,170,255,0.05);
  border: 1px solid rgba(0,170,255,0.30);
  border-radius: 12px;
  padding: 18px 20px;
  backdrop-filter: blur(6px);
  margin-bottom: 18px;
}
.user-edit-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.user-edit-name {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--text-pri);
}
.user-edit-key {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.user-edit-email {
  font-family: 'Consolas', monospace;
  font-size: 12px;
  color: var(--text-sec);
  margin-top: 4px;
}
.user-edit-badges {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.user-edit-delete {
  margin-left: auto;
}
.free-access-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

/* Artist-reward row sits BELOW the radio group. It's an action button, not
   a state toggle - clicking immediately stacks 3 months on top of current
   expiry without requiring Save. Orange tint flags the "additive" semantic. */
.artist-reward-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255,146,0,0.05);
  border: 1px solid rgba(255,146,0,0.18);
  border-radius: 6px;
}
.artist-reward-text {
  flex: 1;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-sec);
}
.artist-reward-btn {
  border-color: rgba(255,146,0,0.4);
  color: var(--orange);
  background: rgba(255,146,0,0.06);
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}
.artist-reward-btn:hover:not(:disabled) {
  background: rgba(255,146,0,0.16);
  border-color: var(--orange);
  color: var(--orange-bright);
}
.artist-reward-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.free-access-btn {
  position: relative;
  padding: 11px 8px 11px 26px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-sec);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s, transform 0.06s;
  text-align: left;
}
.free-access-btn::before {
  content: '';
  position: absolute;
  left: 9px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-radius: 3px;
  border: 1.5px solid var(--text-dim);
  background: transparent;
  box-sizing: border-box;
  transition: border-color 0.12s, background 0.12s;
}
.free-access-btn:hover:not(:disabled) {
  border-color: rgba(0,170,255,0.4);
  color: var(--text-pri);
}
.free-access-btn:hover:not(:disabled)::before {
  border-color: var(--cyan);
}
.free-access-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.free-access-btn.active {
  background: linear-gradient(135deg, rgba(0,170,255,0.16), rgba(0,170,255,0.06));
  border-color: var(--cyan);
  color: var(--text-pri);
  font-weight: 600;
}
.free-access-btn.active::before {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 2px #0a1628;
}
.free-access-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 540px) {
  .free-access-group { grid-template-columns: repeat(2, 1fr); }
  .artist-reward-row { flex-direction: column; align-items: stretch; }
  .artist-reward-btn { width: 100%; }
}
.form-hint {
  font-size: 11px;
  color: var(--text-sec);
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.user-row-email {
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: var(--text-sec);
  margin-top: 2px;
}

/* ── USER BADGES ───────────────────────────────────────── */
.user-badge {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.user-badge.badge-sub {
  color: var(--gold);
  border-color: rgba(255,215,0,0.45);
  background: rgba(255,215,0,0.08);
}
.user-badge.badge-artist {
  color: var(--cyan);
  border-color: rgba(0,170,255,0.45);
  background: rgba(0,170,255,0.08);
}
.user-badge.badge-free {
  color: var(--green);
  border-color: rgba(0,255,136,0.45);
  background: rgba(0,255,136,0.08);
}
.user-badge.badge-limit {
  color: var(--orange);
  border-color: rgba(255,122,0,0.45);
  background: rgba(255,122,0,0.08);
}
.user-badge.badge-unlinked {
  color: var(--text-dim);
  border-color: var(--border-hi);
  background: rgba(255,255,255,0.04);
}
.user-badge.badge-new {
  color: #ff6b7a;
  border-color: rgba(255,107,122,0.55);
  background: rgba(255,107,122,0.12);
}
.user-badge.badge-role {
  color: #cbb6ff;
  border-color: rgba(150,110,255,0.55);
  background: rgba(150,110,255,0.14);
}

/* Users tab - admin role & capabilities (RBAC) */
.user-admin-block {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.user-admin-role {
  width: 100%;
  padding: 8px 30px 8px 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-pri);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%2300aaff'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.user-admin-role:hover { border-color: var(--border-hi); }
.user-admin-role:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0,170,255,0.2);
}
.user-admin-role option { background: #0a1628; color: var(--text-pri); }
.user-admin-role option:checked { background: rgba(0,170,255,0.30); }
.user-admin-caps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 16px;
  margin: 12px 0 8px;
}
.user-admin-cap {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer;
}
.user-admin-cap input { cursor: pointer; }
.user-admin-cap input:disabled { cursor: not-allowed; }
.user-admin-cap input:disabled + span { opacity: 0.4; }

/* ── USERS OVERVIEW LIST ───────────────────────────────── */
.users-list {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  backdrop-filter: blur(6px);
}
.user-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
}
.user-row:hover { background: rgba(255,255,255,0.04); }
.user-row + .user-row { border-top: 1px solid var(--border); }
.user-row.selected {
  background: rgba(0,170,255,0.08);
  border: 1px solid rgba(0,170,255,0.30);
}
.user-row-name {
  display: flex; flex-direction: column; min-width: 0;
}
.user-row-artist {
  font-weight: 600; color: var(--text-pri);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-row-artist.unlinked {
  font-style: italic; color: var(--text-dim); font-weight: 500;
}
/* Inline pill next to a row's bold name when it's a claimed artist name
   (linked to artist-accounts.json). Slim + lowercase so it sits beside the
   name without competing with the status badges in the right column. */
.user-row-artist-tag,
.user-row-new-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 999px;
  vertical-align: 2px;
  white-space: nowrap;
}
.user-row-artist-tag {
  color: var(--cyan);
  border-color: rgba(0,170,255,0.4);
  background: rgba(0,170,255,0.07);
}
.user-row-new-tag {
  color: #ff6b7a;
  border-color: rgba(255,107,122,0.55);
  background: rgba(255,107,122,0.12);
}
.user-row-key {
  font-family: 'Consolas', monospace;
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-row-badges {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.user-row-edit {
  font-size: 12px;
  padding: 6px 14px;
}

/* ── PICTURE PREVIEW ───────────────────────────────────── */
.artist-card-pic.clickable {
  cursor: pointer;
  transition: transform var(--ease), border-color var(--ease);
}
.artist-card-pic.clickable:hover {
  transform: scale(1.06);
  border-color: var(--cyan);
}
.modal-confirm {
  max-width: 520px;
}
.catalog-spinner-wrap {
  display: flex;
  justify-content: center;
  margin: 24px 0 18px;
}
.catalog-spinner {
  width: 42px; height: 42px;
  border: 3px solid rgba(0,170,255,0.18);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: catalog-spin 0.8s linear infinite;
}
@keyframes catalog-spin {
  to { transform: rotate(360deg); }
}
.catalog-done-summary {
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.55;
}
.catalog-done-summary .summary-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  padding: 4px 0;
}
.catalog-done-summary .summary-label {
  color: var(--text-sec);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.catalog-done-summary .summary-value { color: var(--text-pri); }
.catalog-done-summary .summary-value.summary-good { color: #66ffb0; }
.catalog-done-summary .summary-value.summary-warn { color: #ff8a9c; }
.catalog-done-summary h3 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin: 14px 0 6px;
  font-weight: 600;
}
.catalog-done-summary h3:first-child { margin-top: 0; }
.catalog-done-details {
  margin: 14px 0;
}
.catalog-done-details summary {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sec);
  padding: 6px 0;
}
.catalog-output-inline {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,170,255,0.2);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 6px;
  font-family: 'Consolas', 'Cascadia Code', monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #c8e6ff;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.modal-confirm h2 {
  margin: 0 0 12px;
  padding-right: 36px;
}
.confirm-modal-help {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-sec);
  margin: 8px 0;
}
.confirm-modal-list {
  margin: 4px 0 14px;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-pri);
}
.confirm-modal-list li { margin-bottom: 5px; }
.confirm-modal-list code {
  background: rgba(0,170,255,0.08);
  border: 1px solid rgba(0,170,255,0.2);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: 'Consolas', 'Cascadia Code', monospace;
  font-size: 12px;
  color: #c8e6ff;
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.modal-reject {
  max-width: 520px;
}
.modal-reject h2 {
  margin: 0 0 10px;
  padding-right: 36px;
}
.reject-modal-help {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-sec);
  margin: 0 0 14px;
}
.modal-reject textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-pri);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  min-height: 110px;
  resize: vertical;
}
.modal-reject textarea:focus {
  outline: none;
  border-color: rgba(255,85,119,0.55);
  box-shadow: 0 0 0 2px rgba(255,85,119,0.18);
}
.reject-modal-counter {
  font-size: 11px;
  color: var(--text-sec);
  text-align: right;
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.reject-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.modal-picture {
  max-width: 720px;
}
.picture-preview-wrap {
  margin: 16px 0;
  display: flex; justify-content: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  min-height: 200px;
}
.picture-preview-wrap img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}
.picture-preview-actions {
  display: flex; gap: 10px; justify-content: flex-end;
}

@media (max-width: 720px) {
  .user-picker { grid-template-columns: 1fr; }
  .user-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .user-row-badges { justify-content: flex-start; }
  .user-edit-head { flex-direction: column; align-items: flex-start; }

  /* Topbar: tighten + allow wrap so "Sign out" stops breaking to 2 lines. */
  .topbar-inner { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .topbar-right { gap: 10px; }
  .topbar-user { font-size: 12px; }

  /* Tabs: wrap so Generate Catalog drops to its own full-width row below the
     tab buttons instead of being clipped off the right edge. */
  .tabs-inner { flex-wrap: wrap; padding: 0 8px; }
  .tab { white-space: nowrap; padding: 12px 14px; font-size: 13px; }
  .tabs-right {
    margin-left: 0;
    width: 100%;
    padding: 8px 0;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
  }

  /* Reclaim horizontal space on narrow screens. */
  .content { padding: 16px 12px; }

  /* Panel header: search spans full width; filters stack label-above-select
     so the underlying selects can use the full cell. */
  .panel-header { gap: 10px; }
  .panel-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .submissions-search {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }
  .status-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .status-filter select { width: 100%; }
  #refreshSubmissionsBtn { grid-column: 1 / -1; }

  /* Song row: stack so the long "Review & approve" button has room and the
     genre chips can wrap onto multiple lines instead of getting clipped. */
  .song-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .song-info { width: 100%; }
  .song-meta { white-space: normal; flex-wrap: wrap; }
  .song-actions { width: 100%; flex-wrap: wrap; }
  .song-actions .btn { flex: 1 1 auto; }

  /* User-edit form buttons: stack so labels stop wrapping inside cramped
     fixed-width buttons. */
  .form-buttons { flex-direction: column; align-items: stretch; }
}

/* ── Feedback tab ─────────────────────────────────────────────────────── */
.tab-count {
  display: inline-block;
  background: rgba(0, 170, 255, 0.15);
  color: #00aaff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.fb-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
}
.fb-row.is-bug { border-left: 3px solid #ff8a8a; }
.fb-row.is-feedback { border-left: 3px solid #4ade80; }
.fb-type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.fb-type-badge.bug      { background: rgba(255, 138, 138, 0.15); color: #ff8a8a; }
.fb-type-badge.feedback { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.fb-body { min-width: 0; }
.fb-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fb-meta strong { color: var(--text); font-weight: 600; }
.fb-message {
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.fb-details {
  margin-top: 10px;
}
.fb-details summary {
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.5px;
}
.fb-details summary:hover { color: var(--text); }
.fb-details-body {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  font-family: 'Consolas', 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.6;
  word-break: break-all;
}
.fb-details-body .lbl { color: #00aaff; }
.fb-time {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 640px) {
  .fb-row { grid-template-columns: 1fr; }
  .fb-time { text-align: left; }
}

/* ── Feedback: Active / Archived view toggle ── */
.fb-view-toggle {
  display: inline-flex;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.fb-view-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fb-view-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.fb-view-btn.is-active {
  background: rgba(0, 170, 255, 0.18);
  color: #00aaff;
}

/* ── Feedback source filter (big buttons with per-source counts) ── */
.fb-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}
.fb-src-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.fb-src-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.fb-src-btn.is-active {
  background: rgba(0, 170, 255, 0.16);
  border-color: rgba(0, 170, 255, 0.5);
  color: #00aaff;
}
.fb-src-count {
  min-width: 22px;
  text-align: center;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.fb-src-btn.is-active .fb-src-count {
  background: rgba(0, 170, 255, 0.3);
  color: #eaf6ff;
}

/* Per-row source badge */
.fb-source-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.fb-source-badge.src-website   { color: #9fb3c8; border-color: rgba(159,179,200,0.4); }
.fb-source-badge.src-premium   { color: #ffcc33; border-color: rgba(255,204,51,0.4); }
.fb-source-badge.src-promo     { color: #00aaff; border-color: rgba(0,170,255,0.45); }
.fb-source-badge.src-mastering { color: #ff7a45; border-color: rgba(255,122,69,0.45); }

/* ── Per-row Archive button ── */
.fb-row {
  grid-template-columns: auto 1fr auto auto;
}
.fb-archive-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  align-self: start;
}
.fb-archive-btn:hover {
  border-color: #00aaff;
  color: #00aaff;
  background: rgba(0, 170, 255, 0.08);
}

/* ── Archived view ── */
.fb-row.is-archived { opacity: 0.92; }
.fb-archive-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0, 170, 255, 0.06);
  border-left: 2px solid #00aaff;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}
.fb-archive-note .lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #00aaff;
  margin-bottom: 4px;
}
.fb-archive-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

@media (max-width: 640px) {
  .fb-row { grid-template-columns: 1fr; }
  .fb-archive-btn { width: 100%; }
}

/* ═══ PREMIUM STATS TAB (appended) ═══ */
/* ─────────────────────────────────────────────────────────────────────────
   Premium Stats tab styles. Appended to admin/styles.css at deploy time.
   Uses the existing admin design tokens (--cyan, --bg-surface, --border, ...).
   ───────────────────────────────────────────────────────────────────────── */

/* Overview cards */
#statsOverview {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 22px;
}
.st-card {
  flex: 1 1 150px; min-width: 140px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.st-card-val {
  font-family: 'Orbitron', sans-serif; font-size: 30px; font-weight: 700;
  color: var(--cyan); line-height: 1;
}
.st-card-lbl {
  margin-top: 8px; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim);
}
.st-card-sub { margin-top: 3px; font-size: 11px; color: var(--text-dim); opacity: .8; line-height: 1.3; }
.st-card { cursor: help; }
.st-card-wide { cursor: default; }

/* Track/Artist swap toggle in the first column header */
.st-swap {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-family: 'Segoe UI', sans-serif; letter-spacing: .02em;
  color: var(--text-sec); background: rgba(0,170,255,0.10); border: 1px solid rgba(0,170,255,0.22);
  text-transform: none; cursor: pointer; transition: background var(--ease), color var(--ease);
}
.st-swap:hover { background: rgba(0,170,255,0.22); color: var(--cyan); }
.st-card-wide { flex: 2 1 280px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.st-chip {
  font-size: 12px; color: var(--text-sec);
  background: rgba(0,170,255,0.08); border: 1px solid rgba(0,170,255,0.20);
  border-radius: 999px; padding: 3px 10px;
}
.st-chip b { color: var(--text-pri); }

/* ── Stats overview redesign ── */
.st-full { flex: 1 1 100% !important; }
.st-section { background: transparent; border: 0; padding: 6px 2px 0; display: flex; align-items: baseline; gap: 10px; }
.st-section .t { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.st-section .s { font-size: 11px; color: var(--text-dim); opacity: .65; }

/* "Right now" live strip */
.st-live { display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(255,74,94,.07), rgba(255,74,94,.02));
  border-color: rgba(255,74,94,.30); }
.st-live-head { display: flex; align-items: center; gap: 8px; font-family: 'Orbitron', sans-serif;
  font-size: 11px; letter-spacing: .2em; color: #ff8a96; }
.st-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4a5e;
  box-shadow: 0 0 0 0 rgba(255,74,94,.6); animation: stLivePulse 1.8s infinite; }
@keyframes stLivePulse { 0% { box-shadow: 0 0 0 0 rgba(255,74,94,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,74,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,74,94,0); } }
.st-live-total { display: flex; flex-direction: column; }
.st-live-total .n { font-family: 'Orbitron', sans-serif; font-size: 34px; font-weight: 700; line-height: 1; color: var(--text-pri); }
.st-live-total .c { color: var(--text-dim); font-size: 11px; margin-top: 4px; }
.st-live-breaks { display: flex; gap: 24px; flex-wrap: wrap; margin-left: auto; }
.st-live-fig { display: flex; flex-direction: column; }
.st-live-fig .n { font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; color: var(--cyan); }
.st-live-fig.tw .n { color: #b794ff; }
.st-live-fig.od .n { color: #5fe3c0; }
.st-live-fig .k { font-size: 11px; color: var(--text-dim); letter-spacing: .03em; margin-top: 2px; }
.st-live-fig .s { font-size: 10px; color: var(--text-dim); opacity: .65; }

/* App version + usage blocks */
.st-block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.st-block-head .t { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.st-pct { color: #7ee787; font-weight: 700; font-size: 12.5px; }
.st-block-sub { font-size: 11px; color: var(--text-dim); opacity: .8; margin: 3px 0 10px; line-height: 1.4; }
.st-ver-bars { display: flex; flex-direction: column; gap: 6px; max-width: 580px; }
.st-bar { display: grid; grid-template-columns: 74px 1fr 30px; align-items: center; gap: 10px; }
.st-bar .vn { font-size: 12px; color: var(--text-sec); font-variant-numeric: tabular-nums; }
.st-bar .track { height: 9px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.st-bar .fill { display: block; height: 100%; background: linear-gradient(90deg, #2b7fd1, #39a9ff); border-radius: 6px; }
.st-bar.latest .fill { background: linear-gradient(90deg, #3fae6b, #7ee787); }
.st-bar.latest .vn { color: #7ee787; }
.st-bar .cnt { font-size: 12px; color: var(--text-sec); text-align: right; font-variant-numeric: tabular-nums; }
.st-bar.unk .vn, .st-bar.unk .cnt { color: var(--text-dim); opacity: .7; }
.st-bar.unk .fill { background: rgba(255,255,255,.18); }

/* Leaderboard table */
.st-table-meta { color: var(--text-dim); font-size: 12px; margin: 0 0 8px; }
.st-table {
  width: 100%; border-collapse: collapse;
  background: rgba(0,0,0,0.20);
  /* border + radius + clipping moved to .st-table-scroll so the sticky header can
     stick to the scroll region (a table with overflow:hidden would capture the
     stickiness itself and the header wouldn't follow). */
}
.st-table thead th {
  text-align: right; padding: 11px 14px;
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-sec);
  /* Must be OPAQUE: var(--bg-surface) is translucent (rgba .04), which let the
     scrolling rows bleed through the sticky header. This solid is --bg-surface
     composited over --bg-base so it still reads like the card surface. */
  background: #0f141c;
  border-bottom: 1px solid var(--border-hi); white-space: nowrap; user-select: none;
  /* Pin the header to the top of the scroll region as you scroll the rows. */
  position: sticky; top: 0; z-index: 3;
  box-shadow: inset 0 -1px 0 var(--border-hi);   /* keep the divider line under border-collapse when stuck */
}
.st-table thead th.st-track { text-align: left; }
.st-table thead th.st-sortable { cursor: pointer; transition: color var(--ease); }
.st-table thead th.st-sortable:hover { color: var(--cyan); }
.st-table thead th.st-active { color: var(--cyan); }

.st-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.st-table tbody tr:last-child td { border-bottom: none; }
.st-table tbody tr:hover { background: rgba(0,170,255,0.06); }
.st-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-pri); }
.st-track { text-align: left; min-width: 220px; }
.st-title { color: var(--text-pri); font-weight: 600; }
.st-seg {
  margin-top: 2px; font-size: 12px; color: var(--text-dim);
  text-transform: capitalize;
}
.st-row { cursor: pointer; }
.st-dim { color: var(--text-dim); }

/* Width-limited, horizontally scrollable leaderboard. The table is wider than the
   1100px content column, so it sits in an overflow-x wrapper; a thin proxy bar above
   it (between the meta line and the table) mirrors the table width and is scroll-synced,
   so columns can be scrolled from the top without reaching for the bottom bar. */
.st-table-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); }
.st-scroll-top { overflow-x: auto; overflow-y: hidden; margin-bottom: 6px; }
.st-scroll-top-spacer { height: 1px; }
.st-scroll-top::-webkit-scrollbar, .st-table-scroll::-webkit-scrollbar { height: 10px; }
.st-scroll-top::-webkit-scrollbar-thumb, .st-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,170,255,0.30); border-radius: 999px; }
.st-scroll-top::-webkit-scrollbar-thumb:hover, .st-table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,170,255,0.50); }
.st-scroll-top::-webkit-scrollbar-track, .st-table-scroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.25); border-radius: 999px; }

/* Glossary ("What do these mean?") modal */
.st-guide { max-width: 820px; }
.st-guide h2 { font-family: 'Russo One', sans-serif; font-size: 22px; color: var(--text-pri); margin: 0 0 4px; }
.st-guide-intro { color: var(--text-dim); font-size: 13px; margin: 0 0 8px; }
.st-guide h3 { font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cyan); margin: 18px 0 8px; }
.st-gdl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; align-items: baseline; margin: 0; }
.st-gdl dt { font-weight: 600; color: var(--text-pri); font-size: 13px; white-space: nowrap; }
.st-gdl dd { margin: 0; color: var(--text-sec); font-size: 13px; line-height: 1.4; }
.st-gdl dd b { color: var(--text-pri); }
@media (max-width: 620px) {
  .st-gdl { grid-template-columns: 1fr; gap: 2px 0; }
  .st-gdl dd { margin-bottom: 8px; }
}

/* Heat cells */
.st-good { color: var(--green) !important; }
.st-warn { color: var(--gold)  !important; }
.st-bad  { color: var(--red)   !important; }

/* Range + view toggles (in the panel header) */
#statsRanges, #statsViews { display: inline-flex; gap: 2px; background: rgba(0,0,0,0.35);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; }
.st-range, .st-viewbtn {
  background: transparent; border: none; color: var(--text-sec);
  font-family: inherit; font-size: 13px; padding: 5px 12px; border-radius: 6px; cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.st-range:hover, .st-viewbtn:hover { color: var(--text-pri); }
.st-range.is-active, .st-viewbtn.is-active { background: rgba(0,170,255,0.18); color: var(--cyan); }

/* Needs-attention panel */
#statsAttention { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 22px; }
.st-att-group { flex: 1 1 240px; min-width: 220px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.st-att-head { font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: .03em;
  color: var(--text-pri); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.st-att-head .st-dim { font-family: 'Segoe UI', sans-serif; font-size: 11px; letter-spacing: 0; }
.st-att-list { list-style: none; margin: 0; padding: 0; }
.st-att-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 6px; border-radius: 6px;
  cursor: pointer; transition: background var(--ease); }
.st-att-item:hover { background: rgba(0,170,255,0.08); }
.st-att-title { color: var(--text-pri); font-weight: 600; flex: 1; }
.st-att-seg { font-size: 11px; color: var(--text-dim); text-transform: capitalize; }
.st-att-badge { font-size: 12px; color: var(--gold); white-space: nowrap; }
.st-att-empty { font-size: 13px; margin: 2px 0; }

/* Detail drawer */
#statsDetailModal { display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.6); align-items: stretch; justify-content: flex-end; }
.st-drawer { width: min(460px, 92vw); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: #0a121e; border-left: 1px solid var(--border-hi); padding: 22px;
  box-shadow: -20px 0 60px rgba(0,0,0,0.5); }
.st-dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.st-dtitle { font-family: 'Russo One', sans-serif; font-size: 22px; color: var(--text-pri); }
.st-dstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.st-dstat { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 8px; text-align: center; }
.st-dstat-val { font-family: 'Orbitron', sans-serif; font-size: 18px; color: var(--cyan); }
.st-dstat-lbl { font-size: 10px; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; }
.st-dsection { margin-bottom: 18px; }
.st-dsection-h { font-family: 'Orbitron', sans-serif; font-size: 12px; color: var(--text-sec);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.st-spark { width: 100%; height: 48px; display: block; background: rgba(0,0,0,0.25);
  border: 1px solid var(--border); border-radius: 6px; }
.st-skipbars { display: flex; align-items: flex-end; gap: 4px; height: 90px;
  background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.st-skipbar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.st-skipbar-fill { width: 100%; background: linear-gradient(var(--red), var(--orange)); border-radius: 3px 3px 0 0; min-height: 2px; }
.st-skipbar-lbl { font-size: 9px; color: var(--text-dim); margin-top: 4px; }
.st-dreports { list-style: none; margin: 0; padding: 0; }
.st-dreports li { background: rgba(255,85,119,0.08); border: 1px solid rgba(255,85,119,0.20);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; color: var(--text-sec); font-size: 13px; font-style: italic; }
.modal-close.st-dclose { position: absolute; top: 14px; right: 18px; }

/* Library: Replace-audio panel (re-master a new WAV over an existing track) */
.lib-replace-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; opacity: .85; }
.lib-replace-file { display: block; margin: 4px 0 2px; max-width: 100%; }
.lib-replace-tail { margin-top: 10px; }
/* Library: Replace-audio source toggle + submission picker */
.lib-replace-source { display: flex; gap: 18px; margin: 6px 0 10px; font-size: 14px; }
.lib-replace-source label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.lib-replace-sub { margin: 4px 0 2px; }
.lib-replace-sub select { width: 100%; }
/* Approval modal: duplicate -> replace-existing banner */
.dup-replace-banner { border: 1px solid #3a4a63; border-radius: 8px; padding: 12px 14px; margin: 14px 0; background: rgba(90,140,220,.08); }
.dup-replace-head { font-size: 14px; margin-bottom: 8px; }
.dup-replace-choices { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.dup-replace-choices label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dup-replace-detail { margin-top: 10px; }
.dup-replace-note { font-size: 13px; opacity: .85; margin: 0 0 8px; line-height: 1.5; }
.replace-mode .edit-grid { opacity: .4; pointer-events: none; }
/* A confirmation dialog (Rename / Move / Replace track, etc.) opens on top of an
   already-open modal such as the library track editor. It sits earlier in the DOM,
   so at the shared .modal-backdrop z-index:100 it rendered BEHIND the editor.
   Lift confirm dialogs above the base modal layer so they are always on top. */
#genericConfirmModal { z-index: 120; }