#admin-modal-inner > details { margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--panel-border); }
#admin-modal-inner > details > summary { cursor: pointer; color: var(--gold); font-size: .95rem; font-weight: 700; padding: 4px 0; }
#admin-modal-inner > details[open] > summary { margin-bottom: 14px; }
#admin-mint-pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  margin-left: 0.45rem;
  padding: 0 0.24rem;
  border-radius: 999px;
  color: #fff8ef;
  background: linear-gradient(180deg, rgba(255, 145, 82, .96), rgba(148, 45, 24, .96));
  box-shadow: 0 0 0 1px rgba(255, 213, 176, .22), 0 0 12px rgba(255, 145, 82, .42);
  font-size: .68rem;
  line-height: 1.3rem;
  vertical-align: middle;
}
#admin-mint-pending-badge[hidden] { display: none; }
#admin-mint-pending-badge.is-pending { animation: admin-mint-count-pulse 4.2s ease-in-out infinite; }
@keyframes admin-mint-count-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255, 213, 176, .22), 0 0 12px rgba(255, 145, 82, .34); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(255, 238, 219, .32), 0 0 16px rgba(255, 145, 82, .68); }
}
@media (prefers-reduced-motion: reduce) {
  #admin-mint-pending-badge.is-pending { animation: none; }
}
#admin-modal-inner .worker-gas-notice summary { cursor: pointer; }
#admin-modal-inner .admin-status:empty { display: none; }
#admin-modal-inner .admin-status { overflow-wrap: anywhere; }
.devert-tab-art span { filter: drop-shadow(0 2px 2px #0009); }
#devert-tab:hover .devert-cash.first { transform: translateY(-2px) rotate(-25deg); }
#devert-tab:hover .devert-cash.second { transform: translateY(-2px) rotate(25deg); }
.devert-workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid #554522; }
.devert-workflow li { display: grid; align-content: start; gap: 5px; min-width: 0; }
.devert-workflow strong { color: #f5cf66; font-size: .76rem; }
.devert-workflow span { color: #c7b98f; font-size: .68rem; line-height: 1.4; overflow-wrap: anywhere; }
#devert-purchase-form { display: grid; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #554522; }
#devert-purchase-form[hidden] { display: none; }
#devert-purchase-form label { display: grid; gap: 5px; min-width: 0; font-size: .76rem; }
#devert-purchase-form input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 38px; padding: 8px; font: inherit; color: #f6efdd; background: #151712; border: 1px solid #665633; border-radius: 4px; }
#devert-purchase-form input[type=file] { font-size: .72rem; padding: 8px 4px; }
.devert-payment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.devert-run-campaign { border-top: 1px solid #554522; padding-top: 12px; }
.devert-run-campaign summary { cursor: pointer; font-size: .86rem; color: #f5cf66; padding: 4px 0; }
.devert-run-campaign[open] { display: grid; gap: 12px; }
#devert-panel .devert-file-limit { font-size: .68rem; color: #c7b98f; margin-top: -7px; }
#devert-panel .devert-checkout-status { border: 0; padding-top: 0; }
#devert-panel [role=status]:empty, .devert-secondary-status:empty { display: none; }
#devert-panel button:disabled { opacity: .45; cursor: default; }
#devert-ad-queue, #devert-purchase { width: 100%; }
.devert-ad-library-state { color: #f5cf66; }
#devert-panel .devert-use-ad { min-height: 30px; padding: 4px 7px; font-size: .68rem; white-space: nowrap; }
#devert-tab .devert-tab-art { position: relative; display: block; width: 40px; height: 50px; }
.devert-tab-art > span { position: absolute; line-height: 1; pointer-events: none; }
.devert-tab-art .devert-cash { top: 0; font-size: 12px; }
.devert-tab-art .devert-cash.first { left: 2px; transform: rotate(-18deg); }
.devert-tab-art .devert-cash.second { right: 2px; transform: rotate(18deg) scaleX(-1); }
.devert-tab-art .devert-symbol { top: 19px; left: 0; font-size: 11px; }
.devert-tab-art .devert-scroll { top: 19px; left: 9px; font-size: 12px; transform: rotate(-12deg); }
.devert-tab-art .devert-slot { top: 18px; left: 19px; font-size: 13px; }
.devert-tab-art .devert-genie { top: 20px; right: 0; font-size: 14px; transform: rotate(10deg); }
.devert-tab-art .devert-speaker { bottom: 0; font-size: 11px; }
.devert-tab-art .devert-speaker.first { left: 5px; transform: scaleX(-1); }
.devert-tab-art .devert-speaker.second { right: 5px; }
#devert-tab:hover .devert-tab-art { filter: drop-shadow(0 0 5px #f5cf6680); }
.devert-workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 0 14px; margin: 0; list-style: none; border-bottom: 1px solid #806532; }
.devert-workflow li { display: grid; gap: 5px; font-size: .72rem; }
.devert-workflow strong { color: #f5cf66; }
.devert-workflow span { color: #c7b98f; font-size: .66rem; line-height: 1.4; }
.devert-secondary-status { display: block; color: #f5cf66; font-size: .7rem; line-height: 1.35; }
.devert-file-limit { color: #c7b98f; font-size: .68rem; margin: 0; }
.devert-run-campaign { padding-top: 14px; border-top: 1px solid #806532; margin-top: 12px; }
.devert-run-campaign summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: #f5cf66; }
.devert-run-campaign[open] { display: grid; gap: 10px; }
.devert-payment-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#devert-purchase-form h3 { margin: 8px 0 2px; font-size: .95rem; }
button#devert-tab { width: 44px; height: 96px; min-height: 96px; padding: 6px 2px; gap: 2px; }
#devert-tab > span:last-child { font-size: .66rem; font-weight: 700; }
#devert-ad-preview {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
/* css/styles.css — DecentBusking */
/* Dark space theme with warm stage lighting for the busker zone */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-space: #03010a;
  --bg-stage: rgba(10, 5, 25, 0.85);
  --gold: #f0c040;
  --gold-dim: #b8922a;
  --amber: #ffb347;
  --teal: #00d4aa;
  --purple: #7c3aed;
  --text-primary: #f0e6c8;
  --text-dim: #8a7a5a;
  --border-glow: rgba(240, 192, 64, 0.35);
  --panel-bg: rgba(5, 3, 18, 0.92);
  --panel-border: rgba(240, 192, 64, 0.2);
  --font-display: 'Bungee', 'Impact', sans-serif;
  --font-body: 'Segoe UI', system-ui, sans-serif;
  --stage-radius: 16px;
  --transition: 0.25s ease;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  background: var(--bg-space);
  color: var(--text-primary);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Three.js Canvas (background) ────────────────────────────────────────── */
#space-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* pointer-events enabled so raycaster can detect clicks on 3-D NFT meshes.
     UI elements (z-index ≥ 10) capture their own clicks first. */
  pointer-events: auto;
  cursor: default;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
decent-header {
  display: block;
  position: relative;
  z-index: 100;
}

@media (max-width: 600px) {
  #stage {
    z-index: 60;
    pointer-events: none;
  }

  decent-header {
    position: relative;
    z-index: 100;
    flex: 0 0 112px;
    height: 112px;
  }

  #stage {
    min-height: calc(100vh - 112px);
  }

  #busker-info {
    top: auto;
    bottom: 174px;
    left: 50%;
    z-index: 60;
    width: min(88vw, 320px);
    padding: 0.45rem 0.8rem;
    background: rgba(5, 3, 18, 0.9);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0,0,0,.38);
  }
  #now-playing-title { font-size: 1.05rem; }
  #center-stage {
    top: auto;
    bottom: 112px;
    left: 50%;
    z-index: 60;
    pointer-events: auto;
    gap: 2rem;
  }
  #hat-btn, #guitar-case-btn { font-size: 3.25rem; }
  #timeline-nav {
    bottom: 48px;
    left: 50%;
    max-width: calc(100vw - 24px);
    transform: translateX(-50%);
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
  }
  #timeline-slider { width: 150px; }

  #mobile-discord-link {
    position: fixed;
    bottom: 8px;
    left: 50%;
    z-index: 55;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.85rem;
    color: var(--text-primary);
    background: rgba(5, 3, 18, .92);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    box-shadow: 0 3px 12px rgba(0,0,0,.35);
    font-size: 0.78rem;
    text-decoration: none;
    transform: translateX(-50%);
  }
}

@media (min-width: 601px) {
  #busker-info,
  #center-stage,
  #timeline-nav {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ── Main Stage ──────────────────────────────────────────────────────────── */
#stage {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  padding: 2rem 1rem 3rem;
  min-height: calc(100vh - 120px);
}

/* Now-playing banner */
#busker-info {
  position: fixed;
  top: auto;
  bottom: 225px;
  left: calc(50% - 115px);
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  pointer-events: none;
}

#now-playing-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

#now-playing-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(240, 192, 64, 0.6);
  min-height: 1.6rem;
}

#now-playing-artist {
  font-size: 0.875rem;
  color: var(--text-dim);
}

/* Now Playing — play button (shown when autoplay is blocked) */
#now-playing-play-btn {
  pointer-events: auto;
  background: linear-gradient(135deg, var(--teal), var(--purple));
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-family: var(--font-display);
  cursor: pointer;
  margin-top: 0.25rem;
  transition: opacity var(--transition), transform var(--transition);
  animation: pulse-glow 1.8s ease-in-out infinite;
}

#now-playing-play-btn:hover {
  opacity: 0.88;
  transform: scale(1.05);
}

.now-playing-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

#now-playing-radio-btn {
  pointer-events: auto;
  background: rgba(5, 3, 18, 0.75);
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 20px;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-family: var(--font-display);
  cursor: pointer;
  margin-top: 0.25rem;
  transition: background var(--transition), transform var(--transition);
}

#now-playing-radio-btn:hover {
  background: rgba(240, 192, 64, 0.15);
  transform: scale(1.05);
}

#radio-activity {
  max-width: min(88vw, 420px);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--teal);
  min-height: 1rem;
}

#radio-activity.radio-activity-flash {
  animation: radio-activity-in 0.6s ease-out;
}

@keyframes radio-activity-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #radio-activity.radio-activity-flash { animation: none; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 212, 170, 0.4); }
  50%       { box-shadow: 0 0 20px rgba(0, 212, 170, 0.85); }
}

/* Center stage — hat & guitar case */
#center-stage {
  position: fixed;
  top: auto;
  bottom: 138px;
  left: calc(50% - 115px);
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 4rem;
  align-items: flex-end;
  justify-content: center;
  perspective: 600px;
}

/* Hat & Guitar Case buttons */
#hat-btn,
#guitar-case-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 5rem;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(240, 192, 64, 0.4));
  transition: transform var(--transition), filter var(--transition);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#hat-btn:hover,
#guitar-case-btn:hover {
  transform: scale(1.12) translateY(-4px);
  filter: drop-shadow(0 0 26px rgba(240, 192, 64, 0.75));
}

#hat-btn:active,
#guitar-case-btn:active {
  transform: scale(0.96) translateY(0);
}

/* ── Audio Player ────────────────────────────────────────────────────────── */
#audio-player {
  display: none;
}

/* ── NFT Detail Panel ────────────────────────────────────────────────────── */
#nft-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--stage-radius);
  padding: 2rem;
  min-width: 320px;
  max-width: 480px;
  width: 90vw;
  box-shadow: 0 0 40px rgba(0, 212, 170, 0.15), 0 0 80px rgba(124, 58, 237, 0.1);
  backdrop-filter: blur(12px);
  animation: fadeIn 0.2s ease;
}

#nft-panel-content {
  margin-bottom: 1.25rem;
}

#nft-panel-content h3 {
  font-family: var(--font-display);
  color: var(--gold);
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

#nft-panel-content .nft-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

#nft-panel-content .nft-meta dt {
  color: var(--text-dim);
}

#nft-panel-content .nft-meta dd {
  color: var(--text-primary);
  word-break: break-all;
}

#nft-panel-content audio {
  width: 100%;
  margin-bottom: 0.75rem;
  accent-color: var(--teal);
}

.nft-buy-btn {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, var(--teal), var(--purple));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}

.nft-buy-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.nft-buy-btn:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.nft-play-row {
  display: flex;
  gap: 0.5rem;
}

.nft-play-row .nft-mute-btn {
  width: auto;
  min-width: 3rem;
  flex: 0 0 auto;
}

.nft-listen-status {
  min-height: 1.1em;
  margin: 0.4rem 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.nft-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
}

.nft-card-actions .nft-buy-btn {
  width: auto;
  min-width: 7rem;
}

.nft-watchlist-btn {
  padding-inline: 0.75rem;
}

.nft-share-status {
  min-height: 1.1em;
  margin: 0.4rem 0 0.75rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.nft-share-link {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font: inherit;
}

.nft-watchlist-status {
  min-height: 1.1em;
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--text-dim);
}
/* ── NFT Parent / Remix section ──────────────────────────────────────────── */
.nft-parent-section {
  margin-bottom: 0.75rem;
}

.nft-parent-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
}

.nft-parent-card.nft-parent-loading {
  color: var(--text-dim);
  font-style: italic;
}

.nft-parent-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple);
  font-weight: bold;
}

.nft-parent-artist {
  color: var(--text-dim);
  font-size: 0.78rem;
}

.nft-royalty-badge {
  display: inline-block;
  background: rgba(240, 192, 64, 0.15);
  border: 1px solid rgba(240, 192, 64, 0.3);
  border-radius: 12px;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  color: var(--gold);
  margin-top: 0.15rem;
  width: fit-content;
}

.nft-parent-audio {
  width: 100%;
  margin-top: 0.4rem;
  accent-color: var(--purple);
}

#nft-panel-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color var(--transition);
}

#nft-panel-close:hover {
  color: var(--text-primary);
}

/* ── Mint Modal ──────────────────────────────────────────────────────────── */

/* ── DNFT Archive Drawer ─────────────────────────────────────────────────── */
#dnft-archive-toggle {
  position: fixed;
  top: 120px;
  right: 14px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  padding: 0.45rem 0.8rem;
  color: var(--gold);
  background: rgba(5, 3, 18, 0.92);
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,.32);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

#dnft-archive-toggle:hover { background: rgba(20, 14, 32, .98); }
#dnft-archive-toggle > span:first-child { color: var(--teal); font-size: 1.1rem; }
#dnft-list-count-badge {
  min-width: 1.25rem;
  padding: 0.12rem 0.3rem;
  color: #111;
  background: var(--gold);
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}

:root { --top-ten-drawer-width: min(350px, calc(100vw - 44px)); --left-tab-top: 154px; }
#top-ten-tab {
  position: fixed;
  top: var(--left-tab-top);
  left: 0;
  z-index: 111;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  width: 44px;
  min-height: 74px;
  padding: 8px 4px;
  color: var(--text-primary);
  background: rgba(8, 10, 16, .96);
  border: 1px solid var(--panel-border);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .32);
  cursor: pointer;
  transition: left var(--transition), background var(--transition);
}
#top-ten-tab > span:first-child { color: var(--gold); font-size: 1.25rem; line-height: 1; }
#top-ten-tab > span:last-child { font-size: .67rem; font-weight: 700; white-space: nowrap; }
#top-ten-tab:hover { background: #151923; }
#top-ten-tab:focus-visible, #top-ten-panel button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
body.top-ten-open #top-ten-tab, body.top-ten-open #djuke-tab, body.top-ten-open #devert-tab { left: var(--top-ten-drawer-width); }
body.djuke-open #top-ten-tab, body.djuke-open #devert-tab { left: var(--djuke-width); }
body.devert-open #top-ten-tab, body.devert-open #djuke-tab, body.devert-open #devert-tab { left: var(--devert-width); }
#top-ten-panel {
  position: fixed;
  top: var(--left-tab-top);
  bottom: max(120px, calc(var(--radio-footer-height, 96px) + 20px));
  left: 0;
  z-index: 110;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: var(--top-ten-drawer-width);
  min-width: 0;
  padding: 14px 12px;
  color: var(--text-primary);
  background: rgba(8, 10, 16, .97);
  border: 1px solid var(--panel-border);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transform: translateX(calc(-100% - 2px));
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--transition), visibility var(--transition);
}
#top-ten-panel.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
#top-ten-panel.is-open { animation: top-ten-charge 14s ease-in-out infinite; }
#top-ten-panel::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, transparent 20%, rgba(111, 235, 190, .03) 38%, rgba(231, 223, 152, .13) 49%, rgba(196, 235, 246, .06) 58%, transparent 76%); transform: translateY(100%); animation: top-ten-charge-rise 12s linear infinite; animation-play-state: paused; }
#top-ten-panel.is-open::before { animation-play-state: running; }
#top-ten-panel > :not(.top-ten-flight-layer) { position: relative; z-index: 1; }
.top-ten-flight-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.top-ten-visitor { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; font-size: 16px; line-height: 1; opacity: .7; filter: drop-shadow(0 0 5px #ddd99a55); }
.top-ten-visitor-0 { font-size: 18px; opacity: .75; }
.radio-schedule-row.is-cancelled { position: relative; padding-right: 110px; opacity: .85; }
.radio-schedule-cancelled-stamp { position: absolute; right: 12px; top: 12px; padding: 4px 8px; border: 3px double #ef6262; border-radius: 4px; color: #ff7979; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-12deg); box-shadow: inset 0 0 0 1px #ef626255; }
.radio-schedule-cancel-reason { color: #f3aaaa; font-size: .8rem; }
.top-ten-chart-hole { display: none; position: absolute; transform: translate(-50%, -50%); font-size: 30px; line-height: 1; filter: drop-shadow(0 0 7px #91e2ce66); }
.is-hype-festival .top-ten-chart-hole { display: block; }
.top-ten-spy-peek { position: absolute; bottom: 12px; left: 50%; width: 30px; height: 32px; overflow: hidden; transform: translateX(-50%); }
.top-ten-spy { display: block; font-size: 27px; transform: translateY(110%); animation: top-ten-spy-peek 23s ease-in-out infinite; }
.hype-rabbit-hole .top-ten-spy { animation-duration: 29s; animation-delay: -9s; }
@keyframes top-ten-spy-peek {
  0%, 72%, 94%, 100% { transform: translateY(110%); }
  78%, 82% { transform: translateY(5%) rotate(-10deg); }
  86%, 89% { transform: translateY(5%) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .top-ten-spy-peek { display: none; }
}
body:not(.top-ten-open) .top-ten-spy { animation-play-state: paused; }
.is-hype-festival #top-ten-content { padding-bottom: 34px; box-sizing: border-box; }
@keyframes top-ten-charge { 0%, 100% { background-color: rgba(8, 10, 16, .96); } 50% { background-color: rgba(8, 18, 19, .81); } }
@keyframes top-ten-charge-rise { from { transform: translateY(100%); } to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) {
  #top-ten-panel.is-open, #top-ten-panel::before { animation: none; }
  #top-ten-panel::before, .top-ten-flight-layer { display: none; }
}
.hype-festival { position: relative; flex-shrink: 0; padding: 16px 12px 10px; overflow: hidden; border: 1px solid #d9af6359; border-radius: 12px; background: radial-gradient(ellipse at 50% 55%, #66326880, transparent 70%), linear-gradient(155deg, #251c38, #102c32 70%, #191b30); text-align: center; }
.hype-eyebrow { color: #91e2ce; font-size: .53rem; font-weight: 800; letter-spacing: .15em; }
.hype-title { margin: 7px 0 2px; font-family: var(--font-display); color: #ffe6a0; text-shadow: 0 2px #823e60, 0 0 25px #f5ba6550; letter-spacing: .025em; line-height: 1.05; }
.hype-title span { display: block; }
.hype-title-top { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.hype-title-show { font-size: clamp(1.05rem, 2.3vw, 1.4rem); color: #f7c8ef; }
.hype-info-button { position: absolute; top: 9px; left: 9px; z-index: 2; width: 22px; height: 22px; padding: 0; border: 1px solid #ffe1a299; border-radius: 50%; background: #2b2140; color: #ffe1a2; font: italic 700 .8rem/1 Georgia, serif; cursor: pointer; }
.hype-info-button:hover, .hype-info-button[aria-expanded="true"] { background: #4b3567; }
.hype-info-popover { position: absolute; top: 37px; left: 9px; z-index: 3; max-width: min(330px, calc(100% - 18px)); margin: 0; padding: 10px 12px; border: 1px solid #ffe1a266; border-radius: 9px; background: #1b1628f5; box-shadow: 0 8px 22px #0009; color: #f0e4f2; font-size: .7rem; line-height: 1.5; text-align: left; }
.hype-info-popover[hidden] { display: none; }
.hype-subtitle { margin: 0; color: #e6cde7; font-size: .65rem; }
.hype-stage { position: relative; height: 156px; margin: 6px -4px 0; overflow: hidden; background: conic-gradient(from 170deg at 50% 0%, transparent, #eabfff0a 12deg, transparent 24deg, #9fffe811 36deg, transparent 48deg, #eabfff0a 60deg, transparent 72deg); }
.hype-stage > span { position: absolute; display: block; filter: drop-shadow(0 3px 7px #0006); }
.hype-band { position: absolute; left: 14%; right: 8%; top: 40px; height: 70px; display: flex; justify-content: space-around; align-items: center; border-bottom: 2px solid #dbab7444; border-radius: 50%; background: radial-gradient(ellipse at bottom, #c57bd133, transparent 70%); }
.hype-bandmate { position: relative; display: inline-block; font-size: 38px; animation: hype-rock 950ms ease-in-out infinite alternate; animation-delay: calc(var(--member) * -290ms); transform-origin: bottom center; }
.hype-instrument { position: absolute; right: -13px; bottom: -7px; font-size: 28px; }
.hype-planet { left: 3%; top: 8px; font-size: 36px; animation: hype-orbit 6s ease-in-out infinite alternate; }
.hype-celestial { top: 5px; font-size: 26px; color: #f1c8ff; text-shadow: 0 0 15px #f2b7ff88; animation: hype-orbit 4s ease-in-out infinite alternate; }
.hype-celestial-lilith { left: 27%; }
.hype-celestial-venus { left: 50%; animation-delay: -2s; }
.hype-celestial-mercury { left: 72%; animation-delay: -1s; }
.hype-trophy { right: 1%; top: 7px; font-size: 28px; animation: hype-rock 2s ease-in-out infinite alternate; }
.hype-stage .hype-rabbit-hole { left: 3%; bottom: 42px; font-size: 30px; opacity: .8; }
.hype-stage .hype-runaway { left: 3%; bottom: 48px; z-index: 1; width: 38px; height: 44px; overflow: hidden; animation: hype-bunny-run 14s linear infinite; }
.hype-runaway-bunny { display: block; font-size: 30px; transform: translateY(110%); animation: hype-bunny-hop 14s linear infinite; }
.hype-stage .hype-runaway-fox { animation-name: hype-fox-run; animation-delay: -4s; }
.hype-runaway-fox .hype-runaway-bunny { animation-delay: -4s; }
.hype-stage .hype-runaway-rat { animation-name: hype-rat-run; animation-delay: -8s; }
.hype-runaway-rat .hype-runaway-bunny { animation-delay: -8s; }
.hype-stage .hype-runaway-bird { animation-name: hype-bird-fly; animation-delay: -11s; }
.hype-runaway-bird .hype-runaway-bunny { animation-delay: -11s; }
@keyframes hype-fox-run {
  0%, 24% { left: 3%; opacity: 0; transform: translate(0, 0); }
  25%, 38% { left: 3%; opacity: 1; transform: translate(0, 0); }
  54% { left: -15%; opacity: 1; transform: translate(0, -28px); }
  55%, 100% { left: -15%; opacity: 0; transform: translate(0, -28px); }
}
@keyframes hype-rat-run {
  0%, 24% { left: 3%; opacity: 0; transform: translateY(0); }
  25%, 38% { left: 3%; opacity: 1; transform: translateY(0); }
  66% { left: 105%; opacity: 1; transform: translateY(120px); }
  67%, 100% { left: 105%; opacity: 0; transform: translateY(120px); }
}
@keyframes hype-bird-fly {
  0%, 24% { left: 3%; opacity: 0; transform: translateY(0); }
  25%, 38% { left: 3%; opacity: 1; transform: translateY(0); }
  66% { left: 45%; opacity: 0; transform: translateY(-65vh); }
  67%, 100% { left: 45%; opacity: 0; transform: translateY(-65vh); }
}
@keyframes hype-bunny-run {
  0%, 24% { left: 3%; opacity: 0; }
  25%, 38% { left: 3%; opacity: 1; }
  66% { left: 105%; opacity: 1; }
  67%, 100% { left: 105%; opacity: 0; }
}
@keyframes hype-bunny-hop {
  0%, 24%, 100% { transform: translateY(110%) scaleX(-1); }
  30%, 38%, 44%, 50%, 56%, 62%, 66% { transform: translateY(0) rotate(5deg) scaleX(-1); }
  41%, 47%, 53%, 59%, 65% { transform: translateY(-12px) rotate(-8deg) scaleX(-1); }
}
.hype-stage .hype-spark { left: calc(5% + var(--i) * 10%); bottom: 3px; font-size: 14px; color: #ffe1a2; opacity: 0; animation: hype-float 4.8s linear infinite; animation-delay: calc(var(--i) * -.73s); }
.hype-equalizer { position: absolute; bottom: 0; left: 5%; right: 5%; height: 34px; display: flex; align-items: end; gap: 4px; }
.hype-equalizer i { flex: 1; height: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(#f5cd87, #54cbb3); box-shadow: 0 0 8px #54cbb355; transform-origin: bottom; transform: scaleY(.04); opacity: .55; will-change: transform; }
.hype-equalizer.is-live i { opacity: .9; }
.hype-wave { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hype-wave path { fill: none; stroke: #a8edce; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px #54cbb3); }
.hype-equalizer.is-wave .hype-wave { display: block; }
.hype-equalizer.is-wave i { visibility: hidden; }
.hype-meter-toggle { padding: 4px 9px; border: 1px solid #91e2ce66; border-radius: 12px; background: #142d2c; color: #adf4d9; font: inherit; cursor: pointer; }
.hype-meter-toggle:hover { background: #24534b; }
.hype-progress { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 10px 0 6px; font-size: .66rem; letter-spacing: .05em; color: #ffe1a2; }
.hype-on-air { display: inline-flex; align-items: center; gap: 5px; color: #a8edce; font-size: .57rem; font-weight: 800; }
.hype-on-air::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8aebba; box-shadow: 0 0 9px #8aebba; }
.hype-chart-explainer { margin: 3px 0 0; font-size: .61rem; line-height: 1.5; color: #cbc3d5; }
.hype-warning:empty { display: none; }
.hype-warning { margin: 6px 0 0; font-size: .66rem; line-height: 1.4; color: #ffd39b; }
.top-ten-opening-rank { color: #e7c591; font-size: .65rem; }
#top-ten-panel.is-hype-festival { border-color: #c3a36899; background: linear-gradient(175deg, #191b28fa, #0d171cfa); }
body.top-ten-festival-open { --top-ten-drawer-width: min(980px, calc(100vw - 44px)); }
#top-ten-panel.is-hype-festival {
  top: max(8px, env(safe-area-inset-top));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 201;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 8px 18px;
}
body.top-ten-festival-open.top-ten-open #top-ten-tab { z-index: 202; }
.is-hype-festival .top-ten-panel-heading { grid-column: 1 / -1; }
.is-hype-festival .hype-festival { grid-column: 1; grid-row: 2 / -1; align-self: center; }
.is-hype-festival .top-ten-chart-note { grid-column: 2; grid-row: 2; }
.is-hype-festival #top-ten-status { grid-column: 2; grid-row: 3; }
.is-hype-festival .top-ten-playlist-status { grid-column: 2; grid-row: 4; }
.is-hype-festival #top-ten-content { grid-column: 2; grid-row: 5; min-width: 0; }
@media (min-width: 601px) and (min-height: 761px) {
  .is-hype-festival .hype-festival {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .is-hype-festival .hype-stage { flex: 1; min-height: 240px; margin-top: 18px; }
  .is-hype-festival .hype-band { top: 28%; height: 90px; }
  .is-hype-festival .hype-bandmate { font-size: 48px; }
  .is-hype-festival .hype-instrument { font-size: 34px; }
  .is-hype-festival .hype-equalizer {
    height: 40%;
    gap: 5px;
    padding: 0 5px;
    border-bottom: 1px solid #ffe1a277;
    background: radial-gradient(ellipse at bottom, #54cbb320, transparent 75%);
  }
  .is-hype-festival .hype-equalizer i {
    border-radius: 4px 4px 0 0;
    background: linear-gradient(#f7a7db, #ffe1a2 30%, #7ce9c4 65%, #32a9be);
    box-shadow: 0 0 14px #54cbb355;
    -webkit-mask-image: repeating-linear-gradient(to top, #000 0 7px, transparent 7px 10px);
    mask-image: repeating-linear-gradient(to top, #000 0 7px, transparent 7px 10px);
  }
  .is-hype-festival .hype-stage .hype-rabbit-hole { bottom: 44%; }
  .is-hype-festival .hype-stage .hype-runaway { bottom: calc(44% + 6px); }
}
.top-ten-playlist-status:empty { display: none; }
.top-ten-playlist-status { margin: 0; color: var(--teal); font-size: .72rem; line-height: 1.4; }
.top-ten-song-title-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.top-ten-playlist-add { flex: 0 0 18px; width: 18px; height: 18px; padding: 0; border: 1px solid #8fe0c866; border-radius: 50%; background: #142d2c; color: #adf4d9; font-size: .8rem; line-height: 1; cursor: pointer; }
.top-ten-playlist-add:hover { background: #24534b; }
.top-ten-playlist-add:disabled { opacity: .5; cursor: wait; }
.hype-festival.is-headliner { border-color: #ffe1a2; box-shadow: inset 0 0 24px #eebc4a25, 0 0 15px #eebc4a20; }
.hype-festival.is-paused *, .hype-festival.is-paused .hype-stage > span { animation-play-state: paused; }
@keyframes hype-rock { from { transform: rotate(-11deg) translateY(0); } to { transform: rotate(9deg) translateY(-5px); } }
@keyframes hype-orbit { from { transform: translateY(0) rotate(-14deg); } to { transform: translateY(12px) rotate(14deg); } }
@keyframes hype-float { 0% { opacity: 0; transform: translateY(0) rotate(-15deg); } 15%, 75% { opacity: .8; } 100% { opacity: 0; transform: translateY(-88px) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) {
  .hype-festival *, .hype-festival .hype-stage > span { animation: none; }
  .hype-stage .hype-spark { display: none; }
  .hype-stage .hype-runaway { display: none; }
}
@media (max-height: 760px), (max-width: 600px) {
  .hype-festival { padding: 8px; }
  .hype-eyebrow { font-size: .46rem; }
  .hype-title { margin: 3px 0; }
  .hype-title-top { font-size: 1.15rem; }
  .hype-title-show { font-size: .85rem; }
  .hype-info-button { top: 6px; left: 6px; width: 19px; height: 19px; font-size: .7rem; }
  .hype-info-popover { top: 30px; left: 6px; }
  .hype-subtitle, .hype-chart-explainer { display: none; }
  .hype-stage { height: 84px; margin-top: 0; }
  .hype-band { top: 17px; height: 38px; }
  .hype-bandmate { font-size: 24px; }
  .hype-instrument { right: -10px; bottom: -4px; font-size: 19px; }
  .hype-planet, .hype-celestial, .hype-trophy { top: 0; font-size: 19px; }
  .hype-stage .hype-rabbit-hole { bottom: 22px; font-size: 20px; }
  .hype-stage .hype-runaway { bottom: 26px; width: 28px; height: 32px; }
  .hype-runaway-bunny { font-size: 22px; }
  .hype-equalizer { height: 18px; }
  .hype-progress { padding: 5px 0 0; font-size: .58rem; }
}
.top-ten-panel-heading { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 36px; text-align: center; }
.top-ten-panel-heading h2 { margin: 0; color: var(--gold); font-family: var(--font-body); font-size: .95rem; }
.top-ten-title { display: flex; align-items: center; justify-content: center; gap: 8px; }
#top-ten-meter-toggle { position: absolute; left: 0; top: 0; width: 24px; height: 24px; padding: 0; border: 1px solid #8ccec6; border-radius: 4px; background: transparent; color: #8ccec6; font-size: 18px; line-height: 1; cursor: pointer; }
#top-ten-meter-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.top-ten-song.is-now-playing { position: relative; isolation: isolate; }
.top-ten-song.is-now-playing > :not(.top-ten-live-meter) { position: relative; z-index: 1; }
#top-ten-panel > .top-ten-live-meter { position: absolute; z-index: 0; display: flex; align-items: end; gap: 3px; opacity: .2; pointer-events: none; overflow: hidden; }
#top-ten-panel > .top-ten-live-meter[hidden] { display: none; }
.top-ten-live-meter i { flex: 1; height: 100%; transform: scaleY(.04); transform-origin: bottom; background: linear-gradient(0deg, #38bca5, #c8edb8); }
.top-ten-live-meter svg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.top-ten-live-meter path { fill: #58c8ae; fill-opacity: .65; stroke: #bcebd3; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.top-ten-live-meter.is-wave i { display: none; }
.top-ten-live-meter.is-wave svg { display: block; }
.top-ten-panel-heading p { margin: 4px 0 0; color: var(--text-dim); font-size: .72rem; }
#top-ten-panel-close { position: absolute; right: 0; width: 32px; height: 32px; color: var(--text-primary); background: #141720; border: 1px solid var(--panel-border); border-radius: 4px; font-size: 1.2rem; cursor: pointer; }
.top-ten-chart-note, #top-ten-status { margin: 0; color: var(--text-dim); font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; }
.top-ten-fund-summary { margin: 4px 0 8px; }
.top-ten-fund-summary .fund-disclosure {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(20,23,42,.76);
}
.top-ten-fund-summary .fund-disclosure summary {
  cursor: pointer;
  list-style: none;
  color: var(--text-primary);
  font-size: .75rem;
  line-height: 1.35;
}
.top-ten-fund-summary .fund-disclosure summary::-webkit-details-marker { display: none; }
.top-ten-fund-summary .fund-disclosure-body { margin-top: 8px; }
.top-ten-fund-summary .fund-description { margin: 0 0 8px; color: var(--text-dim); font-size: .72rem; line-height: 1.35; }
.top-ten-fund-summary .fund-source-table { width: 100%; border-collapse: collapse; font-size: .7rem; }
.top-ten-fund-summary .fund-source-table th, .top-ten-fund-summary .fund-source-table td { padding: 5px 4px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; overflow-wrap: anywhere; }
.top-ten-fund-summary .fund-source-table th:last-child, .top-ten-fund-summary .fund-source-table td:last-child { text-align: right; }
.top-ten-fund-summary .fund-wallet-link { border: 0; padding: 0; background: transparent; color: var(--teal); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.top-ten-fund-summary .fund-wallet-aliases { margin-left: 5px; color: var(--text-dim); font-size: .68rem; }
.top-ten-fund-summary .fund-source-empty, .top-ten-fund-summary .top-ten-funds-unavailable { margin: 0; color: var(--text-dim); font-size: .72rem; line-height: 1.35; }
#top-ten-status { min-height: 1em; }
#top-ten-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.top-ten-live { margin: 0 0 8px; padding: 8px; color: var(--text-primary); background: rgba(0, 212, 170, .08); border-left: 2px solid var(--teal); font-size: .76rem; line-height: 1.35; overflow-wrap: anywhere; }
.top-ten-empty { color: var(--text-dim); font-size: .8rem; line-height: 1.45; }
.top-ten-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.top-ten-song { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-height: 56px; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.top-ten-prize { min-width: 72px; text-align: right; color: #cbe6ff; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.top-ten-prize .usdc-icon { width: 12px; height: 12px; }
.top-ten-prize .usdc-amount-text { color: transparent; background-image: linear-gradient(110deg, #8dc8ff, #f5f7ff, #a6d8ff, #e2e7ee); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 12px #9ccfff45; animation: usdc-sponsor-shimmer 9s linear infinite; }
.top-ten-song.is-now-playing { background: rgba(0, 212, 170, .11); box-shadow: inset 2px 0 var(--teal); }
.top-ten-song.is-rank-climbing { position: relative; z-index: 2; overflow: hidden; animation: top-ten-rank-glow 1800ms ease-out; }
.top-ten-song.is-rank-climbing::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 20%, #eff5b83d 48%, #8be8bd24 58%, transparent 80%); animation: top-ten-rank-shimmer 1600ms ease-in-out both; }
.top-ten-song.is-rank-climbing .top-ten-rank { color: #e9f4b9; }
@keyframes top-ten-rank-glow { 0% { background-color: #a9e6a32b; box-shadow: inset 2px 0 #dfefad, 0 0 12px #c9e8a02b; } 100% { background-color: transparent; box-shadow: inset 2px 0 transparent, 0 0 0 transparent; } }
@keyframes top-ten-rank-shimmer { 0% { transform: translateX(-100%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .top-ten-song.is-rank-climbing, .top-ten-song.is-rank-climbing::after { animation: none; }
}
.top-ten-song.is-live-outside-chart { margin-bottom: 8px; border: 1px solid rgba(0, 212, 170, .28); border-radius: 5px; }
.top-ten-live-rank { color: var(--teal); font-size: .9rem; }
.top-ten-rank { color: var(--text-dim); font-size: .75rem; font-variant-numeric: tabular-nums; text-align: center; }
.top-ten-song-details { display: grid; min-width: 0; gap: 3px; }
.top-ten-song-title { overflow: hidden; color: var(--text-primary); font-size: .78rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.top-ten-song-artist { overflow: hidden; color: var(--text-dim); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.top-ten-live-badge { width: fit-content; padding: 2px 5px; color: #06120f; background: var(--teal); border-radius: 3px; font-size: .58rem; font-weight: 800; }
.top-ten-vote-score { display: grid; justify-items: end; min-width: 32px; font-variant-numeric: tabular-nums; }
.top-ten-net-votes { color: var(--gold); font-size: .95rem; font-weight: 750; }
.top-ten-vote-label { color: var(--text-dim); font-size: .58rem; }
@media (max-width: 600px) {
  :root { --top-ten-drawer-width: min(320px, calc(100vw - 44px)); --left-tab-top: 168px; }
  #top-ten-panel { bottom: max(160px, calc(var(--radio-footer-height, 150px) + 28px)); padding: 12px 10px; }
  #top-ten-panel.is-hype-festival {
    display: flex;
    bottom: max(8px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .is-hype-festival .hype-festival { align-self: stretch; }
  .is-hype-festival #top-ten-content { flex: 1 0 min(320px, 45dvh); }
  .is-hype-festival .top-ten-song { box-sizing: border-box; min-height: 60px; }
}

:root { --djuke-width: min(360px, calc(100vw - 44px)); }
#djuke-tab {
  position: fixed; left: 0; top: calc(var(--left-tab-top) + 82px); z-index: 111;
  display: grid; justify-items: center; align-content: center; gap: 4px;
  width: 44px; height: 96px; padding: 6px 3px; border: 1px solid #929c9c;
  border-left: 0; border-radius: 0 6px 6px 0;
  background: #192524; color: #f1f6f4; cursor: pointer;
  transition: left var(--transition);
}
#djuke-tab > span:last-child { font-size: .66rem; font-weight: 700; }
.djuke-tab-mark { position: relative; display: block; width: 40px; height: 50px; }
.djuke-note { position: absolute; top: 0; font-size: 11px; line-height: 1; }
.djuke-note-left { left: 2px; transform: rotate(-16deg) translateY(3px); }
.djuke-note-right { right: 2px; transform: rotate(14deg) translateY(-2px); }
.djuke-tab-slot { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); font-size: 13px; line-height: 1; white-space: nowrap; }
.djuke-tab-coin { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 9px; line-height: 1; }
:root { --devert-width: min(350px, calc(100vw - 44px)); }
#devert-tab { position: fixed; left: 0; top: calc(var(--left-tab-top) + 186px); z-index: 111; display: grid; justify-items: center; align-content: center; gap: 4px; width: 44px; height: 74px; padding: 6px 3px; border: 1px solid #c49a45; border-left: 0; border-radius: 0 6px 6px 0; color: #fff1c2; background: #392b13; cursor: pointer; transition: left var(--transition); }
#devert-tab > span:first-child { font-size: 19px; }
#devert-tab > span:last-child { font-size: .66rem; }
#devert-panel { position: fixed; left: 0; top: var(--left-tab-top); bottom: max(120px, calc(var(--radio-footer-height, 96px) + 20px)); z-index: 110; width: var(--devert-width); box-sizing: border-box; padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; color: #f6efdd; background: #17140d; border: 1px solid #c49a45; border-left: 0; border-radius: 0 8px 8px 0; transform: translateX(calc(-100% - 2px)); visibility: hidden; pointer-events: none; transition: transform var(--transition), visibility var(--transition); }
#devert-panel.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.devert-heading { display: flex; justify-content: space-between; align-items: center; }
#devert-panel h2 { font-family: var(--font-display); color: #f5cf66; font-size: 1.1rem; margin: 0; }
#devert-panel h3 { font-size: .9rem; margin: 0; }
#devert-panel p { font-size: .8rem; line-height: 1.5; margin: 0; }
#devert-panel button { min-height: 36px; padding: 6px 10px; font: inherit; font-size: .8rem; border: 1px solid #806532; border-radius: 4px; background: #302714; color: #f6efdd; cursor: pointer; }
#devert-tab:focus-visible, #devert-panel button:focus-visible { outline: 2px solid #f5cf66; outline-offset: 3px; }
@media (max-width: 600px) { #devert-panel { bottom: max(160px, calc(var(--radio-footer-height, 150px) + 28px)); } }
@media (prefers-reduced-motion: reduce) { #devert-tab, #devert-panel { transition: none; } }
#djuke-tab svg, #djuke-panel svg { width: 19px; height: 19px; }
.djuke-tab-mark { position: relative; display: block; width: 40px; height: 50px; overflow: visible; }
.djuke-note { position: absolute; top: 0; color: #f0dc9b; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 3px #f8d77488); }
.djuke-note-left { left: 2px; transform: rotate(-16deg) translateY(3px); }
.djuke-note-right { right: 2px; transform: rotate(14deg) translateY(-2px); }
.djuke-tab-slot { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); color: #f0dc9b; font-size: 13px; line-height: 1; white-space: nowrap; filter: drop-shadow(0 1px 2px #0009); }
.djuke-tab-coin { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 9px; line-height: 1; filter: drop-shadow(0 0 2px #ffd66a99); }
body.djuke-open #djuke-tab { left: var(--djuke-width); }
#djuke-panel {
  position: fixed; left: 0; top: var(--left-tab-top);
  bottom: max(120px, calc(var(--radio-footer-height, 96px) + 20px)); z-index: 110;
  width: var(--djuke-width); box-sizing: border-box; padding: 7px;
  display: flex; flex-direction: column; min-height: 0;
  border: 2px solid #afbbbb; border-left: 0; border-radius: 100px 100px 8px 0;
  background: linear-gradient(110deg, #697b8b, #f9fcff 12%, #a2afbc 28%, #ffffff 43%, #778b9e 51%, #e4eaf1 65%, #fafcff 82%, #8295a8);
  background-size: 220% 100%;
  box-shadow: 6px 6px 28px #0008;
  transform: translateX(calc(-100% - 2px)); visibility: hidden; pointer-events: none;
  transition: transform var(--transition), visibility var(--transition);
}
#djuke-panel.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
#djuke-panel.is-open { animation: djuke-platinum-light 16s ease-in-out infinite alternate; }
@keyframes djuke-platinum-light { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.djuke-heading {
  position: relative; display: flex; align-items: center; justify-content: center;
  flex: 0 0 76px; padding: 12px 42px 0; box-sizing: border-box;
  background: linear-gradient(120deg, #25333d, #5a6875 35%, #26333f 60%, #171f29); border: 3px solid #c6d1dc; border-bottom: 0;
  border-radius: 96px 96px 0 0; color: #f1f6ff; box-shadow: inset 0 2px 1px #fff8;
}
.djuke-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.djuke-heading h2 { margin: 0; font-family: var(--font-body); font-size: 1.35rem; letter-spacing: 0; }
#djuke-panel button { font: inherit; cursor: pointer; }
#djuke-close { position: absolute; right: 24px; bottom: 12px; }
#djuke-close, #djuke-refresh {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 4px;
  color: #e8eeeb; background: #243634; border: 1px solid #708d81; border-radius: 4px;
}
.djuke-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; background: #141d25; color: #edf4ef; border-inline: 3px solid #c6d1dc; }
.djuke-price-display { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 4px; padding: 10px; background: #070d0b; border: 1px solid #71858d; box-shadow: inset 0 2px 6px #000a; }
.djuke-price-display > :not(.djuke-lcd-equalizer) { position: relative; z-index: 1; text-shadow: 0 0 6px #070d0b, 0 1px 3px #070d0b; }
.djuke-lcd-equalizer { position: absolute; inset: 12px 9px 7px; display: flex; align-items: end; gap: 5px; opacity: .13; pointer-events: none; }
.djuke-lcd-equalizer i { flex: 1; height: 100%; transform-origin: bottom; background: repeating-linear-gradient(0deg, #9de6a0 0 3px, transparent 3px 5px); transform: scaleY(.04); }
.djuke-header-machine { flex-shrink: 0; }
#djuke-panel.is-open .djuke-header-machine .djuke-tab-coin { animation: djuke-quarter-drop 7s ease-in-out infinite; }
#djuke-panel.is-open .djuke-header-machine .djuke-note { animation: djuke-music-float 7s ease-in-out infinite; }
#djuke-panel.is-open .djuke-header-machine .djuke-note-right { animation-delay: .35s; }
@keyframes djuke-quarter-drop { 0%, 15%, 85%, 100% { transform: translate(-50%, 5px); opacity: .8; } 35%, 55% { transform: translate(-50%, -17px) scale(.6); opacity: 0; } }
@keyframes djuke-music-float { 0%, 30%, 85%, 100% { translate: 0 0; opacity: .5; } 45%, 65% { translate: 0 -5px; opacity: 1; } }
.djuke-price-display span { color: #a2b8aa; font-size: .68rem; text-transform: uppercase; }
#djuke-price { max-width: 100%; overflow-wrap: anywhere; color: #b9f49b; font-family: var(--font-display); font-size: 1.8rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.djuke-queue-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.djuke-queue-heading h3 { margin: 0; font-size: .8rem; }
#djuke-count { margin-left: 4px; color: #8cd5b3; font-variant-numeric: tabular-nums; }
#djuke-queue { padding: 0; margin: 8px 0; list-style: none; max-height: 190px; overflow-y: auto; }
#djuke-queue li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 8px 0; border-bottom: 1px solid #334039; }
.djuke-request-number { color: #7ccbaf; font-size: .75rem; font-variant-numeric: tabular-nums; }
.djuke-request-details { display: grid; gap: 3px; min-width: 0; }
.djuke-request-details strong { font-size: .77rem; overflow-wrap: anywhere; }
.djuke-request-details span { color: #a9b9ae; font-size: .68rem; overflow-wrap: anywhere; }
.djuke-replace { justify-self: start; margin-top: 3px; padding: 4px 8px; color: #15221c; background: #ebefea; border: 1px solid #69776d; border-radius: 4px; font-size: .68rem !important; }
.djuke-playlist { margin-top: 12px; padding-top: 10px; border-top: 1px solid #425349; }
.djuke-playlist h3 { margin: 0 0 6px; font-size: .8rem; }
#djuke-playlist { margin: 0; padding: 0; list-style: none; max-height: 150px; overflow-y: auto; }
#djuke-playlist li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #2d3b33; font-size: .74rem; overflow-wrap: anywhere; }
#djuke-playlist li button { flex: 0 0 26px; height: 26px; color: #e8eeeb; background: #243634; border: 1px solid #708d81; border-radius: 4px; }
#djuke-playlist-total { margin: 6px 0; color: #b6c6bb; font-size: .72rem; }
#djuke-playlist-buy { width: 100%; min-height: 36px; color: #15221c; background: #b9f49b; border: 1px solid #69776d; border-radius: 4px; font-size: .74rem !important; }
#listen-gate { margin: auto; max-width: min(360px, calc(100vw - 32px)); padding: 18px; color: #edf4ef; background: #101918; border: 2px solid #73d8b8; border-radius: 10px; }
#listen-gate::backdrop { background: #0009; }
#listen-gate h3 { margin: 0 0 8px; color: #b9f49b; font-size: 1rem; }
#listen-gate p { margin: 0 0 12px; font-size: .82rem; line-height: 1.45; }
.listen-gate-actions { display: grid; gap: 8px; }
.listen-gate-actions button { min-height: 38px; border: 1px solid #69776d; border-radius: 4px; font: inherit; font-size: .8rem; cursor: pointer; }
#listen-gate-pay { color: white; background: #ab343b; }
#listen-gate-add, #listen-gate-radio { color: #15221c; background: #ebefea; }
#listen-gate-status { min-height: 1em; margin: 10px 0 0 !important; color: #b6c6bb; font-size: .74rem !important; }
#djuke-queue-state, #djuke-payment-state { margin: 8px 0; color: #b6c6bb; font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; }
.djuke-song-label { display: block; margin-top: 12px; margin-bottom: 5px; font-size: .73rem; }
#djuke-song { width: 100%; box-sizing: border-box; height: 36px; padding: 6px; background: #1b2924; color: #ecf1ed; border: 1px solid #52675a; border-radius: 4px; font: inherit; font-size: .76rem; }
.djuke-wallet-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 8px; }
.djuke-wallet-actions button { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 38px; min-width: 0; padding: 7px 5px; border: 1px solid #69776d; border-radius: 4px; font-size: .72rem !important; }
#djuke-connect { background: #ebefea; color: #15221c; }
#djuke-pay { position: relative; overflow: hidden; width: 100%; min-height: 40px; margin-top: 8px; padding: 8px; border: 1px solid #b6cbdc; border-radius: 5px; background: linear-gradient(180deg, #e4edf5 0%, #b4c6d5 44%, #7e99ad 49%, #b1c3d3 100%); color: #132c3d; font-weight: 750 !important; text-shadow: 0 1px 0 #ffffff80; box-shadow: inset 0 2px 0 #ffffffc0, inset 0 -2px 0 #0003, 0 2px 5px #0008; }
#djuke-pay::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 20%, #ffffff70 48%, transparent 75%); opacity: 0; }
#djuke-panel.is-open #djuke-pay::after { animation: devert-button-shimmer 6s ease-in-out infinite; }
#djuke-pay:enabled:hover { filter: brightness(1.1); }
#djuke-pay:enabled:active { box-shadow: inset 0 2px 4px #0005; }
#djuke-panel button:disabled, #djuke-song:disabled { cursor: not-allowed; opacity: .55; }
#djuke-panel button:focus-visible, #djuke-panel select:focus-visible, #djuke-panel summary:focus-visible, #djuke-tab:focus-visible { outline: 2px solid #a2edce; outline-offset: 3px; }
.djuke-tiers { border-top: 1px solid #425349; padding-top: 10px; margin-top: 12px; font-size: .72rem; }
.djuke-tiers summary { cursor: pointer; color: #d7e8db; }
.djuke-tiers table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.djuke-tiers th, .djuke-tiers td { padding: 6px 4px; text-align: left; border-bottom: 1px solid #2d3b33; }
.djuke-tiers th { color: #b6c5ba; font-weight: 500; }
.djuke-tiers td:last-child, .djuke-tiers th:last-child { text-align: right; }
.djuke-tiers tr.is-current { color: #b9f49b; background: #253c2a; }
.djuke-split { margin: 10px 0 0; font-size: .68rem; color: #b9c9bd; }
.djuke-split div { display: flex; justify-content: space-between; gap: 6px; margin-top: 5px; }
.djuke-split dd { margin: 0; }
.djuke-gas-summary { margin-top: 10px; padding: 8px 10px; border: 1px solid #405d50; border-radius: 8px; background: #050a08; font-size: .68rem; color: #c9d7cc; }
.djuke-gas-summary-title { margin: 0 0 6px; color: #d7e8db; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.djuke-gas-summary-list { display: grid; gap: 6px; }
.djuke-gas-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; }
.djuke-gas-summary dt { color: #9fb2a3; }
.djuke-gas-summary dd { margin: 0; text-align: right; color: #f0e6c8; font-variant-numeric: tabular-nums; }
.djuke-gas-summary p { margin-top: 6px; color: #9fb2a3; line-height: 1.35; }
.djuke-speaker { flex: 0 0 28px; border: 3px solid #c6d1dc; border-top: 0; background: repeating-linear-gradient(90deg, #141d25 0 3px, #c1ceda 3px 5px); }
.djuke-earners { margin: 12px 0; padding-top: 10px; border-top: 1px solid #526477; }
.djuke-earners .djuke-queue-heading { margin: 0 0 7px; gap: 5px; }
.djuke-earners .djuke-queue-heading > span { color: #abbcc9; font-size: .6rem; white-space: nowrap; }
#djuke-earners { margin: 0; padding: 0; list-style: none; }
#djuke-earners li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid #344351; font-size: .72rem; }
#djuke-earners a { color: #daebfa; min-width: 0; overflow-wrap: anywhere; }
#djuke-earners .creator-profile-wallet-icons { display: inline-flex; vertical-align: middle; }
#djuke-earners .creator-profile-wallet-icons img { width: 12px; height: 12px; }
#djuke-earners strong { color: #c3e5d5; font-variant-numeric: tabular-nums; }
#djuke-earners-state { color: #b9c7d2; font-size: .7rem; line-height: 1.4; }
#djuke-payment-state:empty { display: none; }
:is(#djuke-instructions, #top-ten-instructions) { margin: auto; width: min(450px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; border: 2px solid #dce7f2; border-radius: 18px; color: #edf4fa; background: linear-gradient(130deg, #293b49, #141d25); box-shadow: 0 0 24px #a6c4e533; }
:is(#djuke-instructions, #top-ten-instructions)::backdrop { background: #000a; }
:is(#djuke-instructions, #top-ten-instructions) h3 { font-size: 1rem; color: #e1ecf8; margin: 0 0 16px; }
:is(#djuke-instructions, #top-ten-instructions) section { padding: 12px; margin: 12px 0; border-left: 2px solid #a7cfcc; background: #ffffff06; border-radius: 6px; }
:is(#djuke-instructions, #top-ten-instructions) h4 { margin: 0 0 8px; color: #badbd3; font-size: .83rem; }
:is(#djuke-instructions, #top-ten-instructions) p { margin: 6px 0; font-size: .8rem; line-height: 1.65; color: #d0dce6; }
#djuke-instructions-close, #top-ten-instructions-close { width: 100%; min-height: 38px; border: 1px solid #b6cbdc; border-radius: 5px; color: #132c3d; background: linear-gradient(#e4edf5, #9bb3c7); font: inherit; cursor: pointer; }
:is(#djuke-instructions, #top-ten-instructions) button:focus-visible, #djuke-earners a:focus-visible { outline: 2px solid #a2edce; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #djuke-panel.is-open, #djuke-panel.is-open .djuke-lcd-equalizer i,
  #djuke-panel.is-open .djuke-header-machine .djuke-tab-coin,
  #djuke-panel.is-open .djuke-header-machine .djuke-note, #djuke-panel.is-open #djuke-pay::after { animation: none; }
}

:root { --devert-width: min(350px, calc(100vw - 44px)); }
#devert-tab {
  position: fixed; left: 0; top: calc(var(--left-tab-top) + 186px); z-index: 111;
  display: grid; justify-items: center; align-content: center; gap: 4px;
  width: 44px; height: 74px; padding: 6px 3px; border: 1px solid #c49a45;
  border-left: 0; border-radius: 0 6px 6px 0;
  color: #fff4bf; background: linear-gradient(115deg, #30363d, #626b72 45%, #242a30 55%, #444b53); cursor: pointer;
  transition: left var(--transition), background var(--transition);
}
#devert-tab:hover { background: linear-gradient(115deg, #515b65, #858e94 45%, #30373f 55%, #626b72); }
#devert-tab [data-devert-ticket] { color: #f5cf66; font-size: 19px; line-height: 1; filter: drop-shadow(0 0 5px #f2c24c66); }
#devert-tab > span:last-child { font-size: .66rem; font-weight: 750; }
#devert-tab:focus-visible, #devert-panel button:focus-visible { outline: 2px solid #f5cf66; outline-offset: 3px; }
#devert-panel {
  position: fixed; left: 0; top: var(--left-tab-top);
  bottom: max(120px, calc(var(--radio-footer-height, 96px) + 20px)); z-index: 110;
  width: var(--devert-width); box-sizing: border-box; padding: 7px;
  display: flex; flex-direction: column; min-height: 0; gap: 0; overflow: hidden;
  color: #eef1f4; background: linear-gradient(110deg, #a9b2bc, #ffffff 10%, #efcb57 24%, #fff5bc 30%, #b8c2cc 46%, #ffffff 53%, #f4cd53 75%, #fff7cc 84%, #b3bdc7);
  border: 2px solid #f4df8a; border-left: 0;
  border-radius: 100px 100px 12px 0; box-shadow: 6px 6px 28px #0009, inset 0 0 3px #fff9;
  transform: translateX(calc(-100% - 2px)); visibility: hidden; pointer-events: none;
  transition: transform var(--transition), visibility var(--transition);
}
#devert-panel.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.devert-heading { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; flex: 0 0 76px; box-sizing: border-box; padding: 12px 42px 0; background: linear-gradient(120deg, #2a323c, #59636e 32%, #333c47 52%, #1c232c 78%, #444e59); border: 3px solid #f0d26a; border-bottom: 0; border-radius: 96px 96px 0 0; box-shadow: inset 0 2px 1px #ffffff70; }
.devert-brand { display: flex; align-items: center; gap: 8px; }
.devert-header-machine { position: relative; display: block; flex-shrink: 0; width: 40px; height: 50px; }
#devert-panel.is-open .devert-header-machine .devert-cash { animation: devert-header-cash 7s ease-in-out infinite; }
#devert-panel.is-open .devert-header-machine .devert-cash.second { animation-delay: .5s; }
#devert-panel.is-open .devert-header-machine .devert-genie,
#devert-panel.is-open .devert-header-machine .devert-speaker { animation: devert-header-rock 3s ease-in-out infinite alternate; }
@keyframes devert-header-cash { 0%, 25%, 85%, 100% { translate: 0 0; opacity: .65; } 50%, 65% { translate: 0 -6px; opacity: 1; } }
@keyframes devert-header-rock { from { rotate: -5deg; } to { rotate: 5deg; } }
@media (prefers-reduced-motion: reduce) {
  #devert-panel.is-open .devert-header-machine .devert-cash,
  #devert-panel.is-open .devert-header-machine .devert-genie,
  #devert-panel.is-open .devert-header-machine .devert-speaker { animation: none; }
}
#devert-panel .devert-heading h2 { margin: 0; color: #ffe995; font-family: var(--font-body); font-size: 1.1rem; text-shadow: 0 1px 0 #51400e, 0 0 12px #ffdb7440; }
.devert-heading p { margin: 3px 0 0; color: #c7b98f; font-size: .72rem; }
#devert-close, #devert-refresh { display: grid; place-items: center; width: 32px; height: 32px; padding: 4px; color: #f6efdd; background: #302714; border: 1px solid #806532; border-radius: 4px; cursor: pointer; }
#devert-close { position: absolute; right: 24px; bottom: 12px; }
#top-ten-panel #top-ten-info, #djuke-panel #djuke-info, #devert-panel #devert-info {
  display: inline-grid; place-items: center; box-sizing: border-box; flex-shrink: 0;
  width: 18px; height: 18px; min-height: 18px; padding: 0; border: 1px solid currentColor;
  border-radius: 50%; background: transparent; box-shadow: none;
  font: italic 700 12px/1 Georgia, serif; cursor: pointer;
}
#top-ten-info { color: var(--gold); }
#djuke-info { color: #edf7ff; }
#devert-panel #devert-info { color: #ffe995; }
:is(#top-ten-info, #djuke-info, #devert-info):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.devert-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; background: linear-gradient(115deg, #252c35, #151b23 48%, #222a33); border: 3px solid #f0d26a; border-top: 0; border-radius: 0 0 8px 0; scrollbar-color: #9ca8b4 #202731; }
.devert-price-display { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; margin-bottom: 12px; background: #070d0b; border: 1px solid #405d50; box-shadow: inset 0 2px 5px #000a; }
.devert-price-display > :not(.djuke-lcd-equalizer) { position: relative; z-index: 1; text-shadow: 0 0 6px #070d0b, 0 1px 3px #070d0b; }
.devert-price-display > div:not(.djuke-lcd-equalizer) { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; text-align: center; }
.devert-price-display > div:not(.djuke-lcd-equalizer) + div { border-left: 1px solid #405d50; }
.devert-price-display span { color: #a2b8aa; font-size: .62rem; text-transform: uppercase; }
.devert-price-display strong { max-width: 100%; overflow-wrap: anywhere; color: #b9f49b; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.devert-display-currency { grid-column: 1 / -1; text-align: center; }
.devert-queue-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
#devert-panel .devert-queue-actions button { position: relative; overflow: hidden; min-width: 0; min-height: 38px; padding: 7px 5px; font-size: .72rem; font-weight: 750; text-shadow: 0 1px 0 #ffffff70; box-shadow: inset 0 2px 0 #ffffffc0, inset 0 -2px 0 #0003, 0 2px 4px #0008, 0 0 10px var(--devert-button-glow); }
#devert-panel .devert-queue-actions button::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(110deg, transparent 20%, #ffffff65 48%, #ffffff20 58%, transparent 80%); }
#devert-panel.is-open .devert-queue-actions button::after { animation: devert-button-shimmer 5s ease-in-out infinite; }
#devert-panel.is-open #devert-paid-immediate-button::after { animation-delay: 1.2s; }
@keyframes devert-button-shimmer { 0%, 60% { transform: translateX(-120%); opacity: 0; } 65% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #devert-panel.is-open .devert-queue-actions button::after { animation: none; }
}
#devert-panel #devert-paid-queue-button { --devert-button-glow: #69a98322; color: #10271b; background: linear-gradient(180deg, #b6d6ba 0%, #85b590 44%, #58976b 49%, #79ac84 100%); border-color: #a1c5a7; }
#devert-panel #devert-paid-immediate-button { --devert-button-glow: #4e9f9722; color: #092b29; background: linear-gradient(180deg, #afd4ce 0%, #79b5ac 44%, #46948b 49%, #6aa99f 100%); border-color: #98c6bf; }
#devert-panel .devert-queue-actions button:disabled { opacity: .85; cursor: not-allowed; }
#devert-panel .devert-queue-actions button:enabled:hover { filter: brightness(1.12); }
#devert-panel .devert-queue-actions button:enabled:active { box-shadow: inset 0 2px 4px #0005, 0 0 7px var(--devert-button-glow); }
#devert-paid-campaign { width: 100%; min-width: 0; height: 36px; margin-top: 6px; padding: 6px; color: #f0f4f8; background: #202832; border: 1px solid #8e9ba8; border-radius: 4px; font: inherit; font-size: .76rem; }
#devert-panel select:focus-visible, #devert-panel summary:focus-visible { outline: 2px solid #f5cf66; outline-offset: 2px; }
#devert-paid-count { margin-left: 4px; color: #c4cdd6; font-variant-numeric: tabular-nums; }
#devert-paid-requests { padding: 0; margin: 8px 0; list-style: none; max-height: 170px; overflow-y: auto; }
#devert-paid-requests li { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid #47535f; color: #c4cdd6; font-size: .72rem; overflow-wrap: anywhere; }
#devert-paid-requests strong { font-size: .77rem; color: #fff4d0; }
#devert-paid-requests span { font-size: .68rem; }
#devert-paid-status, #devert-paid-receipt { margin: 8px 0; color: #c4cdd6; font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; }
#devert-paid-receipt a { color: #f5cf66; }
#devert-panel #devert-paid-refresh, #devert-panel #devert-queue-refresh { display: grid; place-items: center; width: 32px; min-height: 32px; padding: 4px; }
.devert-live-control { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.devert-live-label { color: #d1d9e1; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.devert-live-help { position: relative; min-width: 0; }
.devert-live-help:focus-visible { outline: 2px solid #f5cf66; outline-offset: 2px; }
#devert-panel #devert-audio-mode { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px; font-size: 1rem; border-radius: 6px; }
.devert-live-lamp { width: 6px; height: 6px; border-radius: 50%; background: #716649; flex-shrink: 0; }
#devert-audio-mode[aria-pressed="true"] { border-color: #b9f49b; }
#devert-audio-mode[aria-pressed="true"] .devert-live-lamp { background: #b9f49b; box-shadow: 0 0 7px #b9f49b; }
#devert-live-tooltip { position: absolute; left: 0; top: calc(100% + 6px); z-index: 2; width: min(270px, calc(100vw - 90px)); padding: 10px; border: 1px solid #b7c2cd; border-radius: 6px; background: #28323e; color: #f0f4f8; box-shadow: 0 4px 12px #0008; font-size: .74rem; line-height: 1.5; visibility: hidden; opacity: 0; }
.devert-live-help:hover #devert-live-tooltip, .devert-live-help:focus-within #devert-live-tooltip { visibility: visible; opacity: 1; }
#devert-price { max-width: 100%; overflow-wrap: anywhere; color: #f5cf66; font-family: var(--font-display); font-size: 1.8rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.devert-search-label { display: block; margin-top: 10px; margin-bottom: 4px; color: #dfd3b3; font-size: .72rem; }
#devert-search { box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px; padding: 7px 9px; color: #f0f4f8; background: #121922; border: 1px solid #8e9ba8; border-radius: 4px; font: inherit; font-size: .76rem; }
#devert-search::placeholder { color: #aebbc8; }
#devert-search:focus-visible { outline: 2px solid #f5cf66; outline-offset: 2px; }
#devert-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
  padding: 2px 0 4px;
  margin: 6px 0 0;
  list-style: none;
  max-height: 270px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#devert-search-results li { min-width: 0; }
.devert-library-empty {
  grid-column: 1 / -1;
  padding: 8px 4px;
  color: #c7b98f;
  font-size: .72rem;
}
.devert-library-card {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 100%;
  padding: 8px;
  border: 1px solid #554522;
  border-radius: 6px;
  background: #201a0f;
  color: inherit;
  text-align: left;
}
.devert-library-card:not(:disabled):hover { background: #2a2213; border-color: #f5cf66; }
.devert-library-card:disabled { opacity: .62; cursor: default; }
.devert-library-item.is-pending .devert-library-card { filter: grayscale(.95) saturate(.65); }
.devert-library-art {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 35%, rgba(245,207,102,.15), rgba(15,13,8,.95));
  border: 1px solid rgba(245,207,102,.15);
}
.devert-library-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.devert-library-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #f5cf66;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .04em;
}
.devert-library-copy { display: grid; gap: 3px; min-width: 0; }
.devert-library-copy strong { color: #fff4d0; font-size: .72rem; line-height: 1.2; overflow-wrap: anywhere; }
.devert-library-status, .devert-library-meta { color: #c7b98f; font-size: .62rem; line-height: 1.25; overflow-wrap: anywhere; }
.devert-library-badge {
  justify-self: start;
  padding: 2px 6px;
  border-radius: 999px;
  background: #322812;
  color: #f5cf66;
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#devert-search-state { margin: 4px 0 8px; color: #c7b98f; font-size: .68rem; line-height: 1.4; }
.devert-radio-state { padding: 10px; border-left: 2px solid #f5cf66; background: #241d10; }
.devert-radio-state h3, .devert-campaign-heading h3 { margin: 0; color: #f5cf66; font-size: .82rem; }
.devert-radio-state p, #devert-campaign-status, .devert-checkout-status { color: #c7b98f; font-size: .72rem; line-height: 1.45; }
.devert-radio-state p { margin: 6px 0 0; }
.devert-listen-controls { display: grid; gap: 8px; margin: 0 0 12px; padding: 9px; border: 1px solid #554522; border-radius: 4px; min-width: 0; }
.devert-listen-controls[hidden], #devert-live-votes[hidden] { display: none; }
.devert-listen-controls legend { padding: 0 4px; color: #dfd3b3; font-size: .72rem; }
.devert-listen-controls > p { margin: 0; color: #c7b98f; font-size: .7rem; line-height: 1.35; }
.devert-listen-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.devert-listen-modes button { min-height: 34px; border: 1px solid #806532; border-radius: 4px; color: #dfd3b3; background: #201a0f; font: inherit; font-size: .72rem; cursor: pointer; }
.devert-listen-modes button[aria-pressed="true"] { color: #201a0f; background: #f5cf66; }
.devert-listen-modes button:disabled { opacity: .5; cursor: not-allowed; }
.devert-mute-ads { display: flex; align-items: center; gap: 7px; color: #dfd3b3; font-size: .72rem; }
.devert-mute-ads input { accent-color: #f5cf66; }
#devert-ad-preview { width: 100%; min-width: 0; min-height: 36px; }
#devert-listen-status { margin: 0; color: #c7b98f; font-size: .68rem; line-height: 1.4; overflow-wrap: anywhere; }
.devert-campaign-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.devert-public-queue .devert-campaign-heading { margin-top: 0; }
#devert-queue { max-height: 210px; overflow-y: auto; padding-left: 26px; margin: 8px 0; font-size: .76rem; font-variant-numeric: tabular-nums; }
#devert-queue li { padding: 6px 2px; border-bottom: 1px solid #554522; overflow-wrap: anywhere; }
#devert-queue li span { display: block; margin-top: 3px; color: #c7b98f; font-size: .65rem; }
#devert-queue-status { color: #c7b98f; }
.devert-disclosure { margin-top: 12px; border-top: 1px solid #65717d; padding: 10px 0 0; }
.devert-disclosure summary { cursor: pointer; color: #e2e8ee; font-size: .76rem; }
.devert-disclosure[open] > :not(summary) { margin-top: 10px; }
#devert-history-total { font-size: .72rem; color: #ffe995; }
#devert-history-list { padding: 0; margin: 0; list-style: none; }
#devert-history-list > li { padding: 12px 0; border-bottom: 1px solid #65717d; }
.devert-history-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .73rem; overflow-wrap: anywhere; }
.devert-history-heading strong:last-child { flex-shrink: 0; color: #b9e2cf; }
#devert-history-list p, #devert-history-list time, #devert-history-status { font-size: .68rem; color: #c4cdd6; line-height: 1.5; }
#devert-history-list time { display: block; margin: 4px 0; }
#devert-history a { color: #bae2dc; font-size: .68rem; overflow-wrap: anywhere; }
#devert-history a:focus-visible { outline: 2px solid #f5cf66; outline-offset: 2px; }
.devert-history-destinations { list-style: none; padding: 8px; margin-top: 8px; border: 1px solid #47535f; border-radius: 4px; background: #ffffff05; }
.devert-history-destinations li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: .68rem; }
.devert-history-destinations span { flex-shrink: 0; font-variant-numeric: tabular-nums; }
#devert-history-more[hidden] { display: none; }
#devert-panel button:not(#devert-info):not(#devert-paid-queue-button):not(#devert-paid-immediate-button):not(.devert-library-card) {
  color: #18222c; border-color: #c5cfd8;
  background: linear-gradient(135deg, #f8fbff, #c4ced8 44%, #95a3b1 52%, #e0e7ee);
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px #0005;
}
#devert-panel #devert-audio-mode[aria-pressed="true"] { border-color: #b9f49b; box-shadow: inset 0 1px 0 #fff, 0 0 8px #b9f49b55; }
#devert-panel .devert-library-card { background: linear-gradient(135deg, #303a46, #1b232e); border-color: #65717d; }
#devert-panel .devert-library-badge { color: #ffe995; background: #343f4b; }
#devert-panel .devert-listen-controls, #devert-panel .devert-tiers, #devert-panel #devert-purchase-form, #devert-panel .devert-run-campaign { border-color: #65717d; }
#devert-panel #devert-purchase-form input { color: #f0f4f8; background: #121922; border-color: #8e9ba8; }
#devert-panel #devert-queue li { border-color: #47535f; }
#devert-panel #devert-queue-status, #devert-panel #devert-queue li span, #devert-panel #devert-campaign-status,
#devert-panel .devert-checkout-status, #devert-panel .devert-library-status, #devert-panel .devert-library-meta,
#devert-panel #devert-search-state, #devert-panel #devert-listen-status { color: #c4cdd6; }
#devert-panel summary:focus-visible, #devert-instructions button:focus-visible { outline: 2px solid #f5cf66; outline-offset: 3px; }
#devert-instructions { box-sizing: border-box; width: min(500px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); margin: auto; padding: 22px; overflow-y: auto; color: #f6efdd; background: #17140d; border: 2px solid #d9c68c; border-radius: 22px; box-shadow: 0 0 24px #f5cf6622; }
#devert-instructions::backdrop { background: #000b; }
#devert-instructions h3 { margin: 0 0 18px; color: #f5cf66; font-size: 1rem; }
#devert-instructions .devert-info-guide { display: grid; gap: 16px; margin-bottom: 24px; }
#devert-instructions .devert-info-card { min-width: 0; padding: 18px; border: 1px solid #635335; border-left: 4px solid #f5cf66; border-radius: 14px; background: linear-gradient(135deg, #f5cf6612, #211b14); }
#devert-instructions .devert-info-card h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: #ffe29a; font-size: 1rem; line-height: 1.4; }
#devert-instructions .devert-info-card p { margin: 10px 0 0; color: #e2d9c7; font-size: .88rem; line-height: 1.7; }
#devert-instructions .devert-info-card strong { color: #fff4d2; }
#devert-instructions .devert-info-priority { border-left-color: #c8a0ff; background: linear-gradient(135deg, #b984ff16, #211b25); }
#devert-instructions .devert-info-priority h4 { color: #ddc4ff; }
#devert-instructions .devert-info-options { display: grid; gap: 14px; margin: 18px 0; }
#devert-instructions .devert-info-options > div { padding: 12px; border: 1px solid #ad86d54d; border-radius: 10px; background: #0003; }
#devert-instructions .devert-info-options dt { color: #ead8ff; font-weight: 700; font-size: .9rem; }
#devert-instructions .devert-info-options dd { margin: 8px 0 0; color: #e2d9c7; font-size: .86rem; line-height: 1.6; }
#devert-instructions .devert-info-badge { display: inline-block; margin-left: 5px; padding: 1px 8px; border-radius: 20px; color: #22152f; background: #ddc4ff; }
#devert-instructions .devert-info-note { padding-top: 12px; border-top: 1px dashed #ad86d54d; }
#devert-instructions .devert-info-funding { border-left-color: #7fe1c2; background: linear-gradient(135deg, #7fe1c216, #16231f); }
#devert-instructions .devert-info-funding h4 { color: #a0f1d8; }
#devert-instructions .devert-info-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 16px 0 0; list-style: none; }
#devert-instructions .devert-info-split li { display: grid; gap: 5px; padding: 12px 8px; border-radius: 10px; background: #0003; text-align: center; }
#devert-instructions .devert-info-split strong { color: #a0f1d8; font-size: 1.5rem; }
#devert-instructions .devert-info-split span { color: #d4e8df; font-size: .76rem; overflow-wrap: anywhere; }
#devert-instructions .devert-info-protection { border-left-color: #8dc9ff; background: linear-gradient(135deg, #8dc9ff14, #18202a); }
#devert-instructions .devert-info-protection h4 { color: #b9deff; }
#devert-instructions .devert-workflow { grid-template-columns: 1fr; gap: 16px; border: 0; }
#devert-instructions button { margin-top: 16px; padding: 8px 14px; border: 1px solid #c49a45; border-radius: 10px; color: #201a0f; background: linear-gradient(#fff5ca, #c7a34e); font: inherit; cursor: pointer; }
#devert-campaigns { display: grid; gap: 5px; margin: 8px 0; padding: 0; list-style: none; }
.devert-campaign { padding: 8px; border: 1px solid #554522; background: #201a0f; }
.devert-campaign-details { display: grid; gap: 4px; }
.devert-campaign-details strong { color: #fff4d0; font-size: .78rem; overflow-wrap: anywhere; }
.devert-campaign-details span { color: #c7b98f; font-size: .68rem; overflow-wrap: anywhere; }
#devert-campaign-status { min-height: 1em; margin: 8px 0; }
.devert-checkout-status { padding-top: 8px; border-top: 1px solid #554522; }
#devert-purchase-form { display: grid; gap: 8px; margin: 10px 0; }
#devert-purchase-form[hidden], #devert-connect-wallet[hidden] { display: none; }
#devert-purchase-form label { display: grid; gap: 4px; color: #dfd3b3; font-size: .72rem; }
#devert-purchase-form input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 38px; padding: 7px 9px; color: #f6efdd; background: #17140d; border: 1px solid #806532; border-radius: 4px; font: inherit; }
#devert-ad-queue { min-height: 36px; padding: 7px 9px; color: #201a0f; background: #f5cf66; border: 1px solid #c49a45; border-radius: 4px; font: inherit; font-size: .72rem; cursor: pointer; }
#devert-ad-queue:disabled { opacity: .5; cursor: not-allowed; }
#devert-ad-artist { box-sizing: border-box; width: 100%; min-height: 36px; padding: 7px 9px; color: #f6efdd; background: #17140d; border: 1px solid #806532; border-radius: 4px; font: inherit; }
#devert-purchase-status { color: #dfd3b3; font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; }
#devert-panel button:focus-visible { outline-offset: 2px; }
.devert-run-campaign { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #554522; }
.devert-workflow-details { display: grid; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #554522; font-size: .72rem; }
.devert-run-campaign h3, .devert-workflow-details h3 { margin: 0; color: #f5cf66; font-size: .82rem; }
.devert-tiers { border-top: 1px solid #554522; padding-top: 10px; margin-top: 12px; font-size: .72rem; }
.devert-tiers summary { cursor: pointer; color: #f5cf66; font-weight: 600; }
.devert-tiers table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.devert-tiers th, .devert-tiers td { padding: 6px 4px; text-align: left; border-bottom: 1px solid #3d3219; }
.devert-tiers th { color: #dfd3b3; font-weight: 500; }
.devert-tiers td:last-child, .devert-tiers th:last-child { text-align: right; }
.devert-tiers tr.is-current { color: #f5cf66; background: #2f2512; }
.devert-workflow { display: grid; gap: 8px; margin: 8px 0; padding-left: 0; list-style: none; counter-reset: workflow-step; }
.devert-workflow li { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid #44371b; border-radius: 4px; background: #1c170d; font-size: .72rem; }
.devert-workflow li strong { color: #f5cf66; }
.devert-workflow li span { color: #c7b98f; font-size: .68rem; line-height: 1.35; }
.community-pin { margin-top: 12px; padding-top: 10px; border-top: 1px solid #425349; }
.community-pin h3 { margin: 0 0 6px; font-size: .8rem; }
.community-pin p { margin: 5px 0; color: #b6c6bb; font-size: .7rem; line-height: 1.4; }
.community-pin-actions { display: flex; gap: 8px; margin-top: 12px; }
.community-pin-providers { display: grid; gap: 8px; margin: 12px 0; padding: 10px; border: 1px solid #425349; }
.community-pin-providers label { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
#community-pin-dialog { max-width: min(390px, calc(100vw - 32px)); margin: auto; padding: 18px; color: #edf4ef; background: #101918; border: 2px solid #73d8b8; border-radius: 10px; }
#community-pin-dialog::backdrop { background: #0009; }
#community-pin-dialog h3 { margin: 0 0 8px; color: #b9f49b; }
#community-pin-dialog p { font-size: .76rem; line-height: 1.45; }
#community-pin-key { width: 100%; box-sizing: border-box; height: 38px; padding: 8px; color: #edf4ef; background: #1b2924; border: 1px solid #52675a; border-radius: 4px; }
#community-pin-key-label { display: block; margin: 10px 0 5px; font-size: .75rem; }
.community-pin-actions button { flex: 1; min-height: 38px; border: 1px solid #69776d; border-radius: 4px; font: inherit; font-size: .76rem; }
#community-pin-start { color: #15221c; background: #b9f49b; }
#community-pin-cancel { color: #edf4ef; background: #243634; }
@media (max-width: 600px) {
  :root { --djuke-width: min(340px, calc(100vw - 44px)); }
  :root { --devert-width: min(340px, calc(100vw - 44px)); }
  #djuke-panel { bottom: max(160px, calc(var(--radio-footer-height, 150px) + 28px)); }
  #devert-panel { bottom: max(160px, calc(var(--radio-footer-height, 150px) + 28px)); }
  .djuke-heading { flex-basis: 64px; }
  .djuke-body { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { #djuke-tab, #djuke-panel, #devert-tab, #devert-panel { transition: none; } }

#dnft-list-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  background: rgba(0, 0, 0, .42);
  border: 0;
  cursor: default;
}

#dnft-list-backdrop:not(.hidden) { display: block; }

#dnft-list {
  position: fixed;
  right: 0;
  top: 166px;
  bottom: 72px;
  width: min(320px, calc(100vw - 24px));
  z-index: 80;
  background: rgba(5, 3, 18, 0.88);
  border-left: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transform: translateX(calc(100% + 12px));
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--transition), visibility var(--transition);
}

#dnft-list.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

#dnft-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#dnft-list-count {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
}

#dnft-list-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 0.5rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid rgba(240,192,64,.16);
  border-radius: 50%;
  cursor: pointer;
}

#dnft-list-close:hover { color: var(--text-primary); border-color: var(--gold-dim); }

#dnft-list-items {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 0.35rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}

#dnft-list-items::-webkit-scrollbar { width: 4px; }
#dnft-list-items::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }

.dnft-list-item {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(240, 192, 64, 0.07);
  transition: background var(--transition), border-left var(--transition);
  border-left: 2px solid transparent;
}

.dnft-list-item:hover {
  background: rgba(240, 192, 64, 0.06);
  border-left-color: var(--gold-dim);
}

.dnft-list-item.active {
  background: rgba(0, 212, 170, 0.08);
  border-left-color: var(--teal);
}

.dnft-list-item-title {
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dnft-list-item-meta {
  font-size: 0.68rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dnft-list-empty {
  padding: 1rem 0.85rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-style: italic;
}

/* ── DNFT list spinner ────────────────────────────────────────────────────── */
.dnft-list-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.75rem 0;
  list-style: none;
}

.dnft-spinner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: dnftPulse 1.2s ease-in-out infinite;
}
.dnft-spinner-dot:nth-child(2) { animation-delay: 0.2s; }
.dnft-spinner-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dnftPulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.7); }
  40%            { opacity: 1;   transform: scale(1);   }
}

/* ── "Show All Now" button ────────────────────────────────────────────────── */
.dnft-show-all-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: none;
  border-top: 1px solid var(--panel-border);
  color: var(--teal);
  font-size: 0.72rem;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.04em;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.dnft-show-all-btn:hover {
  background: rgba(0, 212, 170, 0.07);
  color: #00d4aa;
}
.dnft-show-all-btn:disabled {
  color: var(--text-dim);
  cursor: default;
}

/* ── Timeline Navigation Controls ────────────────────────────────────────── */
#timeline-nav {
  position: fixed;
  bottom: 72px;
  /* Shift left by ~half the list-panel width (230px / 2 ≈ 115px) so the nav
     appears centred in the main viewport area, not under the right-side panel. */
  left: calc(50% - 115px);
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(5, 3, 18, 0.88);
  border: 1px solid var(--panel-border);
  border-radius: 28px;
  padding: 0.45rem 0.9rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(240, 192, 64, 0.08);
}

#timeline-nav button {
  background: none;
  border: none;
  color: var(--gold-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: 50%;
  transition: color var(--transition), background var(--transition);
}

#timeline-nav button:hover {
  color: var(--gold);
  background: rgba(240, 192, 64, 0.1);
}

#timeline-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

#timeline-slider-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

#timeline-slider {
  width: 180px;
  accent-color: var(--gold);
  cursor: pointer;
}

#timeline-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-align: center;
  min-width: 90px;
  letter-spacing: 0.03em;
}

/* Shrink stage right-padding when list panel is present */
@media (min-width: 600px) {
  #stage {
    padding-right: 240px;
  }
  /* Shift fixed Now Playing / controls left so they don't overlap the list panel */
  #busker-info,
  #center-stage {
    left: calc(50% - 115px);
  }
}

/* ── Mint Modal ──────────────────────────────────────────────────────────── */
#mint-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 1, 10, 0.82);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
}

#mint-modal-inner {
  box-sizing: border-box;
  background: radial-gradient(ellipse at 0 0, #24403e88, transparent 55%), linear-gradient(145deg, #192a2e, #0e191e 70%);
  border: 1px solid #91bdb75c;
  border-radius: 20px;
  padding: 28px;
  width: 90vw;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: inset 0 1px #d4fff52b, 0 24px 90px #000a, 0 0 45px #6ab8ad12;
}

#mint-modal-inner h2 {
  font-family: var(--font-body);
  color: #e4f7ef;
  margin-bottom: 0.5rem;
  font-size: 1.9rem;
}

#mint-modal-inner p {
  color: var(--text-dim);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.mint-modal-heading, .submission-policy-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mint-modal-heading h2 { margin: 0; }
.mint-modal-heading { margin-bottom: 16px; }
.submission-policy-icon { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--panel-border); border-radius: 4px; color: var(--text-primary); background: transparent; cursor: pointer; }
.submission-policy-icon img { filter: invert(1); }
.submission-policy-icon:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
#submission-policy-dialog { box-sizing: border-box; margin: auto; width: min(480px, calc(100% - 24px)); max-height: 85vh; overflow-y: auto; padding: 20px; border: 1px solid var(--panel-border); border-radius: 6px; background: #10121a; color: var(--text-primary); }
#submission-policy-dialog::backdrop { background: rgba(0,0,0,.72); }
#submission-policy-dialog h2 { margin: 0; font-size: 1.05rem; }
#submission-policy-dialog p { margin: 12px 0 0; font-size: .85rem; line-height: 1.5; }
#submission-policy-dialog a { color: var(--teal); }
.submission-policy-note { color: var(--text-dim); }

#mint-form label {
  display: block;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: .01em;
  color: #b5d3ce;
  margin-bottom: 0.3rem;
}

#mint-form label .hint {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}

#mint-form input[type="text"],
#mint-form input[type="number"],
#mint-form input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #9fc9c32e;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color var(--transition);
}

#mint-form input:focus {
  border-color: var(--teal);
}

#mint-form input[type="file"] {
  cursor: pointer;
}

#mint-status {
  font-size: 0.85rem;
  min-height: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--teal);
}

#mint-status.error {
  color: #f87171;
}

.mint-form-actions {
  display: flex;
  gap: 0.75rem;
}

#mint-submit-btn {
  flex: 1;
  padding: 0.75rem;
  background: linear-gradient(160deg, #acd8ca, #5e9d90);
  color: #102824;
  box-shadow: inset 0 1px #e6fff4aa, 0 3px 12px #0004;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity var(--transition);
}

#mint-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#mint-cancel-btn {
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--transition);
}

#mint-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.mint-eyebrow { font-size: .65rem; letter-spacing: .19em; color: #93bcb5; }
.mint-flow { display: flex; justify-content: space-between; gap: 8px; padding: 12px 0 18px; margin: 0; list-style: none; color: #8fbab2; font-size: .74rem; border-bottom: 1px solid #b4d9cc1c; }
.mint-step { padding: 20px 0; border-bottom: 1px solid #b4d9cc1c; }
.mint-step h3 { margin: 0 0 14px; font-size: 1.04rem; color: #d3ebe1; font-weight: 600; }
.mint-step h3 > span { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border-radius: 9px; background: #93d3c219; color: #a4d8c7; }
.mint-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#mint-form .mint-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 165px; padding: 20px; border: 1px dashed #8fc6b875; border-radius: 14px; text-align: center; background: linear-gradient(150deg, #a1ddca0d, #51847f0b); cursor: pointer; transition: border-color .2s, background .2s; overflow: hidden; }
#mint-form .mint-dropzone:hover, #mint-form .mint-dropzone.is-dragover, #mint-form .mint-dropzone:focus-within { border-color: #b0e9d2; background: #a1ddca18; }
.mint-dropzone strong { color: #d4e9e1; font-size: 1rem; font-weight: 600; }
.mint-dropzone small { color: #8fa9a5; font-size: .7rem; line-height: 1.5; }
.mint-drop-icon { font-size: 2rem; }
#mint-form .mint-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; margin: 0; padding: 0; width: 100%; height: 100%; cursor: pointer; }
#mint-form .mint-art-drop { min-height: 110px; }
#mint-art-preview { width: 94px; height: 94px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px #0006; }
#mint-modal-inner .mint-help { font-size: .76rem; color: #a2b9b5; margin: 8px 0 12px; }
#mint-modal-inner .mint-detected { font-size: .78rem; color: #a4d8c7; margin: 12px 0; overflow-wrap: anywhere; }
#mint-media-preview audio, #mint-media-preview video { display: block; width: 100%; max-height: 230px; margin-bottom: 14px; border-radius: 10px; }
#mint-form .mint-ad-choice { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 13px; background: #7ca79f10; border: 1px solid #bdd9d01f; border-radius: 10px; }
.mint-ad-choice small { display: block; margin-top: 5px; color: #a2b9b5; line-height: 1.5; }
.mint-ad-choice input { accent-color: #8fc6b8; flex: 0 0 auto; margin-top: 3px; }
.mint-extras { margin-top: 16px; }
.mint-extras summary { color: #a9cec5; font-size: .8rem; cursor: pointer; margin-bottom: 12px; }
.mint-split-row { display: grid; grid-template-columns: minmax(0, 1fr) 95px 30px; align-items: center; gap: 9px; }
#mint-form .mint-split-row input { margin: 5px 0 10px; font-size: .8rem; }
.mint-split-row button, .mint-split-tools button { color: #b4dace; border: 1px solid #8bada640; background: linear-gradient(#243c3b, #192c2b); border-radius: 7px; padding: 8px; cursor: pointer; font: inherit; font-size: .75rem; box-shadow: inset 0 1px #d8fff011; }
.mint-split-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#mint-split-total { margin-left: auto; color: #a9d5bf; font-size: .76rem; }
#mint-split-total.error { color: #f6b49d; }
#mint-modal-inner .mint-review-note { margin: 18px 0 12px; font-size: .77rem; }
#mint-status { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  #mint-modal-inner { width: calc(100vw - 20px); padding: 20px 16px; max-height: 92dvh; border-radius: 15px; }
  .mint-two-col { grid-template-columns: 1fr; gap: 0; }
  .mint-flow { font-size: .66rem; gap: 4px; }
  .mint-split-row { grid-template-columns: minmax(0, 1fr) 76px 26px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #mint-modal { animation: none; }
  #mint-form .mint-dropzone { transition: none; }
}

/* ── Mint Parent Preview ─────────────────────────────────────────────────── */
#mint-parent-preview {
  margin-bottom: 1rem;
}

#mint-parent-preview-inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(0, 212, 170, 0.07);
  border: 1px solid rgba(0, 212, 170, 0.25);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

#mint-parent-preview-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
}

#mint-parent-preview-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--gold);
}

#mint-parent-preview-artist {
  font-size: 0.8rem;
  color: var(--text-dim);
}

#mint-parent-preview-audio {
  width: 100%;
  margin-top: 0.35rem;
  accent-color: var(--teal);
}

/* ── Tip Modal ───────────────────────────────────────────────────────────── */
#tip-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 1, 10, 0.82);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
}

#tip-modal-inner {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--stage-radius);
  padding: 2rem;
  width: 90vw;
  max-width: 520px;
  box-shadow: 0 0 60px rgba(240, 192, 64, 0.12);
}

#tip-modal-inner h2 {
  font-family: var(--font-display);
  color: var(--gold);
  margin-bottom: 0.5rem;
}

#tip-modal-inner p {
  color: var(--text-dim);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.tip-track-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.tip-track-picker button {
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(240, 192, 64, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
}

.tip-track-picker button:hover:not(:disabled) {
  background: rgba(240, 192, 64, 0.14);
  transform: translateY(-1px);
}

.tip-track-picker button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.tip-track-picker button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.tip-track-details {
  min-width: 0;
  text-align: center;
}

.tip-track-details p {
  margin-bottom: 0;
}

.tip-track-position {
  margin-bottom: 0.35rem !important;
  color: var(--gold-dim) !important;
  font-size: 0.74rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-height: 1em;
}

#tip-form label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dim);
  margin-bottom: 0.3rem;
}

.tip-wallet-address {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: monospace;
}

.tip-wallet-address img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

#tip-form label .hint {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}

#tip-amount {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(240, 192, 64, 0.2);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color var(--transition);
}

#tip-amount:focus {
  border-color: var(--gold);
}

#tip-status {
  font-size: 0.85rem;
  min-height: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--teal);
}

#tip-status.error {
  color: #f87171;
}

.tip-form-actions {
  display: flex;
  gap: 0.75rem;
}

#tip-send-btn {
  flex: 1;
  padding: 0.75rem;
  background: linear-gradient(135deg, var(--gold), var(--amber));
  color: #111;
  font-family: var(--font-display);
  font-size: 0.95rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity var(--transition);
}

#tip-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#tip-cancel-btn {
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--transition);
}

#tip-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
  #tip-modal-inner {
    width: min(94vw, 520px);
    padding: 1.25rem;
  }

  .tip-track-picker {
    gap: 0.5rem;
  }

  .tip-track-picker button {
    width: 2.25rem;
    min-height: 2.25rem;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
decent-foot {
  position: relative;
  z-index: 100;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Non-translate fadeIn for modals */
#mint-modal,
#tip-modal {
  animation: overlayFadeIn 0.2s ease;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Payroll Panel ────────────────────────────────────────────────────────── */

/* Payroll open button — anchored in center-stage next to hat/guitar buttons */
#payroll-open-btn {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid var(--teal);
  color: var(--teal);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: var(--transition);
  white-space: nowrap;
}
#payroll-open-btn:hover {
  background: rgba(0, 212, 170, 0.25);
  box-shadow: 0 0 12px rgba(0, 212, 170, 0.4);
}

/* Overlay backdrop */
#payroll-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1100;
  backdrop-filter: blur(4px);
}

/* Modal container */
#payroll-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  width: min(92vw, 760px);
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--teal) transparent;
  animation: overlayFadeIn 0.22s ease;
}

#payroll-modal-inner {
  background: var(--panel-bg);
  border: 1px solid var(--teal);
  border-radius: var(--stage-radius);
  box-shadow: 0 0 40px rgba(0, 212, 170, 0.25), 0 0 80px rgba(124, 58, 237, 0.15);
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Header row */
#payroll-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 212, 170, 0.2);
  padding-bottom: 0.8rem;
}
#payroll-modal-header h2 {
  font-family: var(--font-display);
  color: var(--teal);
  font-size: 1.4rem;
  letter-spacing: 0.03em;
}
#payroll-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
  transition: var(--transition);
}
#payroll-close-btn:hover { color: var(--text-primary); }

/* Description */
.payroll-description {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Connect section */
#payroll-connect-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.payroll-addr {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}

/* Owner warning */
.payroll-warning {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.4);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: #ff9999;
  font-size: 0.88rem;
}

/* Status text */
.payroll-status {
  font-size: 0.88rem;
  min-height: 1.2em;
  color: var(--teal);
}
.payroll-status a { color: var(--teal); }

/* Queue header */
#payroll-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#payroll-queue-header h3 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* Empty message */
.payroll-empty {
  color: var(--teal);
  text-align: center;
  padding: 1rem;
  font-size: 0.95rem;
}

/* Table */
.payroll-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
}

.payroll-section { padding: 16px 0; border-top: 1px solid var(--panel-border); }
.payroll-section h3 { margin: 0 0 10px; font-size: 1rem; }
.payroll-allocation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin: 0; font-size: .85rem; }
.payroll-allocation dt { color: var(--text-dim); }
.payroll-allocation dd { margin: 0; }
.radio-payroll-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.radio-payroll-controls label { display: grid; gap: 6px; font-size: .8rem; color: var(--text-dim); }
.payroll-fund-guide { margin: 10px 0; padding: 10px 12px; color: var(--text-dim); background: rgba(0,212,170,.06); border-left: 2px solid var(--teal); font-size: .78rem; line-height: 1.5; }
.payroll-field-hint { color: var(--text-dim); font-size: .7rem; line-height: 1.4; }
.radio-payroll-controls input, .radio-payroll-controls select, .radio-payroll-controls textarea { min-width: 0; width: 100%; min-height: 38px; padding: 8px; font: inherit; color: var(--text-primary); background: #10121a; border: 1px solid var(--panel-border); border-radius: 4px; }
.radio-payroll-controls textarea { resize: vertical; }
.radio-payroll-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.payroll-funding-band { padding: 12px 0; border-bottom: 1px solid var(--panel-border); }
.payroll-funding-band h4 { margin: 0 0 6px; font-size: .9rem; }
.payroll-funding-band meter { display: block; width: 100%; height: 16px; }
.payroll-funding-band p { margin: 6px 0 0; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.payroll-funding-warning { color: var(--gold); }
.radio-payroll-controls input[readonly] { opacity: .85; }
.settlement-router-section summary { cursor: pointer; font-weight: 700; margin-bottom: 16px; }
.settlement-router-section .payroll-allocation dd { min-width: 0; overflow-wrap: anywhere; max-width: 100%; }
.settlement-router-section .payroll-allocation { grid-template-columns: auto minmax(0, 1fr); }
.router-metadata-label { grid-column: 1 / -1; }
#router-custom-fund-label[hidden] { display: none; }
#router-custom-fund-form[hidden] { display: none; }
#router-save-metadata { display: inline-flex; align-items: center; gap: 8px; }
#router-save-metadata img { filter: invert(1); opacity: .8; }
#router-metadata-status { overflow-wrap: anywhere; }
.settlement-router-section .radio-payroll-controls { grid-template-columns: minmax(0, 1fr); }
.settlement-router-section select { width: 100%; min-width: 0; }
.settlement-router-section #router-fund-status { overflow-wrap: anywhere; }
.settlement-router-section .payroll-status { overflow-wrap: anywhere; }
.radio-payroll-artist { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--panel-border); font-size: .8rem; overflow-wrap: anywhere; }
@media (max-width: 600px) { .radio-payroll-artist { grid-template-columns: minmax(0, 1fr); } }
.payroll-secondary-flow { margin: 12px 0; border-block: 1px solid var(--panel-border); }
.payroll-secondary-flow > summary { padding: 10px 0; cursor: pointer; font-weight: 600; }
.payroll-work-reference { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 0 12px; }
.payroll-work-reference > span { color: var(--text-dim); font-size: .75rem; }
.payroll-work-reference > input { grid-column: 1; width: 100%; min-width: 0; font-size: .72rem; font-family: monospace; }
.payroll-copy-reference { grid-column: 2; grid-row: 1 / span 2; }
.payroll-legacy-warning { color: var(--gold); font-size: .85rem; }
.payroll-legacy-review { display: grid; min-width: 220px; gap: 8px; margin-top: 8px; }
.payroll-legacy-review input[type="text"], .payroll-tx-hash { min-width: 0; width: 100%; padding: 8px; border: 1px solid var(--panel-border); border-radius: 4px; background: #10121a; color: var(--text-primary); font: inherit; }
.payroll-legacy-review label { font-size: .75rem; white-space: normal; }
.payroll-verify-btn { padding: 6px 8px; border: 1px solid var(--panel-border); border-radius: 4px; color: var(--text-primary); background: #10121a; cursor: pointer; }
#payroll-connect-section, #payroll-queue-section { min-width: 0; max-width: 100%; }
#payroll-modal .payroll-addr { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#payroll-settle-hint { min-width: 0; overflow-wrap: anywhere; }
#payroll-settle-hint code { word-break: break-all; }
@media (max-width: 600px) {
  #payroll-table thead { display: none; }
  #payroll-table, #payroll-table tbody { display: block; width: 100%; }
  #payroll-table .payroll-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--panel-border); }
  #payroll-table .payroll-td { display: block; min-width: 0; border: 0; }
  #payroll-table .payroll-td:nth-child(2), #payroll-table .payroll-td:nth-child(4), #payroll-table .payroll-td:nth-child(5) { grid-column: 1 / -1; }
  #payroll-table .payroll-td:nth-child(3) { grid-column: 2; grid-row: 1; }
  #payroll-table .payroll-legacy-review { min-width: 0; }
}
.payroll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}
.payroll-table thead th {
  background: rgba(0, 212, 170, 0.08);
  color: var(--teal);
  padding: 0.55rem 0.8rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.payroll-table tbody tr {
  border-top: 1px solid rgba(255,255,255,0.06);
  transition: background var(--transition);
}
.payroll-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.payroll-table tbody tr.payroll-row-paid {
  opacity: 0.5;
  text-decoration: line-through;
}
.payroll-td {
  padding: 0.55rem 0.8rem;
  color: var(--text-primary);
  vertical-align: middle;
}
.payroll-loading {
  text-align: center;
  padding: 1rem;
  color: var(--text-dim);
}
.payroll-error { color: #ff6b6b !important; }

/* Table links */
.payroll-addr-link,
.payroll-github-link,
.payroll-issue-link,
.payroll-link {
  color: var(--teal);
  text-decoration: none;
  transition: var(--transition);
}
.payroll-addr-link:hover,
.payroll-github-link:hover,
.payroll-issue-link:hover,
.payroll-link:hover { text-decoration: underline; }

.payroll-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.35rem;
}
.payroll-amount { font-family: 'Courier New', monospace; color: var(--gold); }
.payroll-no-wallet { color: #ff9999; font-size: 0.82rem; }

/* Pay buttons */
.payroll-pay-btn {
  background: rgba(0, 212, 170, 0.12);
  border: 1px solid var(--teal);
  color: var(--teal);
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: var(--transition);
}
.payroll-pay-btn:hover { background: rgba(0, 212, 170, 0.25); }
.payroll-pay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.payroll-pay-disabled { color: var(--text-dim); font-size: 0.82rem; }

/* Settle All row */
#payroll-settle-all-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

/* Hint block */
.payroll-hint {
  background: rgba(0, 212, 170, 0.07);
  border: 1px solid rgba(0, 212, 170, 0.2);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.payroll-hint a { color: var(--teal); }
.payroll-hint code {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  background: rgba(255,255,255,0.07);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* Buttons */
.payroll-btn {
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--font-body);
  transition: var(--transition);
}
.payroll-btn-primary {
  background: linear-gradient(135deg, var(--teal), var(--purple));
  color: #fff;
  font-weight: 600;
}
.payroll-btn-primary:hover { filter: brightness(1.1); }
.payroll-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
.payroll-btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.1);
}
.payroll-btn-secondary:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }

/* Responsive */
@media (max-width: 600px) {
  #payroll-modal-inner { padding: 1.2rem 1rem; }
  .payroll-table { font-size: 0.78rem; }
  .payroll-td { padding: 0.4rem 0.5rem; }
}

/* ── Admin Role-Grant Modal ────────────────────────────────────────────────── */
#admin-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  width: min(94vw, 820px);
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--teal) transparent;
  animation: overlayFadeIn 0.22s ease;
}

#admin-modal-inner {
  background: #090d18;
  border: 1px solid #a0e0ff;
  border-radius: var(--stage-radius);
  box-shadow: 0 0 40px rgba(160, 224, 255, 0.2), 0 0 80px rgba(124, 58, 237, 0.12);
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

#admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(160, 224, 255, 0.2);
  padding-bottom: 0.8rem;
}

#admin-modal-header h2 {
  font-family: var(--font-display);
  color: #a0e0ff;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
}

#admin-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
#admin-close-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

.admin-description {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.55;
}
.admin-description strong { color: var(--text-primary); }
.admin-description code   { color: #a0e0ff; font-size: 0.85em; }

#admin-connect-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-addr {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--teal);
  word-break: break-all;
}

#admin-role-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#admin-mint-section {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-bottom: 1px solid rgba(160, 224, 255, 0.18);
  padding-bottom: 1.2rem;
}
.admin-reviewed-album-import { display: grid; gap: .5rem; padding: .8rem 0; border-bottom: 1px solid rgba(160,224,255,.18); }
.admin-reviewed-album-import h3 { margin: 0 0 .25rem; color: #a0e0ff; font-size: .95rem; }
.admin-reviewed-album-import p { margin: 0; color: var(--text-dim); font-size: .76rem; line-height: 1.45; }
.admin-reviewed-album-import .admin-status { margin-top: .25rem; }
.worker-gas-notice { margin: .75rem 0; padding: .5rem 0 .5rem .65rem; border-left: 3px solid #dbbd57; color: var(--text-dim); font-size: .76rem; line-height: 1.5; }
.worker-gas-notice code { overflow-wrap: anywhere; }
#creator-profile { margin: auto; width: min(760px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 18px; color: var(--text); background: var(--bg, #111); border: 1px solid #69776d; border-radius: 6px; }
#creator-profile::backdrop { background: #000b; }
.creator-profile-toolbar, .creator-profile-name-row, .creator-profile-discord-command { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.creator-profile-toolbar h2, .creator-profile-name-row h3 { flex: 1; margin: 0; }
.creator-profile-card { display: grid; gap: 12px; }
.creator-profile-banner-shell { position: relative; min-height: 220px; border-radius: 16px; border: 1px solid #69776d; background: linear-gradient(135deg, #191f33 0%, #281740 45%, #10231d 100%); }
.creator-profile-banner { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 15px; }
.creator-profile-banner-fallback { position: absolute; inset: 0; border-radius: 15px; background: radial-gradient(circle at 20% 20%, rgba(255, 195, 92, .42), transparent 32%), radial-gradient(circle at 80% 30%, rgba(103, 210, 187, .24), transparent 28%), linear-gradient(145deg, #1b1534 0%, #09151f 100%); }
/* Coin avatars: centered on the banner's bottom edge so the lower half hangs below it. */
.creator-profile-bubbles { position: absolute; left: 20px; bottom: 0; transform: translateY(50%); z-index: 3; display: flex; align-items: center; }
#creator-profile .creator-profile-bubble { position: relative; flex: none; width: 96px; height: 96px; min-height: 0; padding: 0; border-radius: 50%; border: 3px solid #e9d7a0; background: #0d1210; color: #fff; box-shadow: 0 0 0 2px #0d1210, 0 8px 20px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18); overflow: hidden; transition: transform .15s ease; }
#creator-profile .creator-profile-bubble + .creator-profile-bubble { margin-left: -30px; }
#creator-profile .creator-profile-bubble:nth-child(1) { z-index: 3; }
#creator-profile .creator-profile-bubble:nth-child(2) { z-index: 2; }
#creator-profile .creator-profile-bubble:nth-child(3) { z-index: 1; }
#creator-profile .creator-profile-bubble:not(.is-placeholder):hover, #creator-profile .creator-profile-bubble:focus-visible { transform: translateY(-4px); z-index: 4; }
#creator-profile .creator-profile-bubble[hidden] { display: none; }
#creator-profile .creator-profile-bubble.is-placeholder { width: 28px; height: 28px; margin-left: 6px; align-self: flex-end; margin-bottom: 4px; border: 1px dashed rgba(233, 215, 160, .45); box-shadow: none; background: rgba(13, 18, 16, .75); opacity: .55; }
#creator-profile .creator-profile-bubble.is-placeholder:hover, #creator-profile .creator-profile-bubble.is-placeholder:focus-visible { opacity: 1; }
#creator-profile .creator-profile-bubble.is-placeholder .creator-profile-bubble-label { display: none; }
.creator-profile-bubble img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.creator-profile-bubble-plus { position: absolute; inset: 0; display: grid; place-items: center; font-size: .95rem; font-weight: 400; line-height: 1; color: rgba(233, 215, 160, .85); }
.creator-profile-bubble-label { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 1px 5px; border-radius: 999px; background: rgba(0,0,0,.7); font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; opacity: 0; transition: opacity .15s ease; }
#creator-profile .creator-profile-bubble:hover .creator-profile-bubble-label, #creator-profile .creator-profile-bubble:focus-visible .creator-profile-bubble-label { opacity: 1; }
.creator-profile-identity { display: grid; gap: 8px; padding: 56px 0 0; }
.creator-profile-identity h3 { font-size: 1.35rem; margin: 0; }
.creator-profile-name-row h3 { flex: 0 1 auto; overflow-wrap: anywhere; }
.creator-profile-name-row { gap: 6px; }
#creator-profile .creator-profile-icon-button { display: inline-grid; place-items: center; width: 26px; height: 26px; min-height: 0; padding: 4px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #e9d7a0; opacity: .7; }
#creator-profile .creator-profile-icon-button:hover, #creator-profile .creator-profile-icon-button:focus-visible { opacity: 1; border-color: rgba(233, 215, 160, .5); background: rgba(233, 215, 160, .1); }
#creator-profile .creator-profile-icon-button[hidden] { display: none; }
.creator-profile-icon-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.creator-profile-wallet-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.creator-profile-wallet-row p[data-profile-wallet] { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.creator-profile-wallet-row code { font-size: .85rem; color: #cfd7d2; background: none; padding: 0; }
.creator-profile-wallet-icons { display: inline-flex; gap: 1px; }
.creator-profile-wallet-icons img { width: 16px; height: 16px; border-radius: 50%; animation: creator-wallet-breathe 2.4s ease-in-out infinite; }
@keyframes creator-wallet-breathe { 0%, 100% { opacity: .65; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .creator-profile-wallet-icons img { animation: none; } }
@keyframes usdc-artist-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes usdc-sponsor-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.fund-wallet-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; margin-right: 5px; vertical-align: -4px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.fund-wallet-address { display: inline-flex; align-items: center; gap: 1px; font-variant-numeric: tabular-nums; }
.fund-wallet-address code { padding: 0; background: transparent; font: inherit; color: inherit; }
.usdc-amount { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usdc-amount-text { display: inline-block; background-size: 200% 100%; }
.usdc-amount--artist .usdc-amount-text { color: #d9ffd5; text-shadow: 0 0 10px rgba(123, 255, 180, .15), 0 0 18px rgba(189, 200, 84, .16); animation: usdc-artist-shimmer 9s linear infinite; background-image: linear-gradient(90deg, #d5ffd4 0%, #f2f6bd 32%, #b6f4a6 50%, #ffe7a8 68%, #d5ffd4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.usdc-amount--sponsor .usdc-amount-text { color: #dfeaff; text-shadow: 0 0 10px rgba(142, 189, 255, .15), 0 0 18px rgba(203, 211, 255, .12); animation: usdc-sponsor-shimmer 11s linear infinite; background-image: linear-gradient(90deg, #e7f0ff 0%, #b8d1ff 32%, #f5f7ff 50%, #d3deff 68%, #e7f0ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.usdc-amount--queued .usdc-amount-text { color: var(--text-dim); }
.usdc-amount .usdc-icon { width: 14px; height: 14px; opacity: .95; filter: drop-shadow(0 0 2px rgba(255,255,255,.08)); }
@media (prefers-reduced-motion: reduce) {
  .usdc-amount-text { animation: none !important; background-image: none !important; color: inherit !important; text-shadow: none !important; }
}
.creator-profile-copied { font-size: .72rem; color: #93ffbb; opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.creator-profile-copied.is-visible { opacity: 1; transform: none; }
.creator-profile-identity p { margin: 0; font-size: .85rem; }
.creator-profile-discord-chip { display: inline-flex; align-items: center; width: fit-content; padding: 4px 10px; border-radius: 999px; background: rgba(24, 62, 46, .9); border: 1px solid rgba(118, 205, 155, .5); color: #d9f5e6; }
.creator-profile-discord-chip::before { content: '✓'; margin-right: 6px; color: #93ffbb; }
.creator-profile-name-row button, .creator-profile-toolbar button, .creator-profile-discord button, .creator-profile-bubble { cursor: pointer; }
.creator-profile-name-row button { min-height: 30px; padding: 4px 10px; border-radius: 999px; }
#creator-profile details { border-top: 1px solid var(--panel-border); padding-top: 10px; }
#creator-profile details > summary { cursor: pointer; font-weight: 700; }
#creator-profile form { display: grid; gap: 12px; padding: 12px 0 0; }
#creator-profile label { display: grid; gap: 5px; font-size: .8rem; min-width: 0; }
#creator-profile input, #creator-profile textarea, #djuke-search { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; background: #1b2924; color: #ecf1ed; border: 1px solid #52675a; border-radius: 4px; font: inherit; font-size: .8rem; }
#creator-profile button, #djuke-profile { min-height: 36px; padding: 8px 12px; border: 1px solid #69776d; border-radius: 4px; color: #15221c; background: #ebefea; font: inherit; font-size: .8rem; cursor: pointer; }
#creator-profile button:disabled { opacity: .5; cursor: not-allowed; }
.creator-profile-toolbar button { display: grid; place-items: center; width: 36px; height: 36px; padding: 6px; }
.creator-profile-toolbar svg { width: 18px; height: 18px; }
#creator-profile output, #creator-profile code, #creator-profile p { overflow-wrap: anywhere; }
.creator-profile-image-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.creator-profile-discord { display: grid; gap: 8px; padding: 12px 0 0; }
.creator-profile-discord-steps { display: grid; gap: 4px; font-size: .8rem; color: #cfd7d2; }
.creator-profile-discord-steps p { margin: 0; }
.creator-profile-discord-command { align-items: center; }
.creator-profile-discord-command code { flex: 1; }
.creator-profile-discord-command button { white-space: nowrap; }
.creator-profile-banner-fallback[hidden], .creator-profile-bubble img[hidden], .creator-profile-bubble-plus[hidden] { display: none; }
.creator-profile-toolbar { justify-content: space-between; flex-wrap: nowrap; margin-bottom: 12px; }
.creator-profile-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.creator-profile-toolbar h2#creator-profile-title { flex: 0 1 auto; font-size: 1.25rem; overflow-wrap: anywhere; color: #f3e6bd; }
#creator-profile .creator-profile-close { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(233, 215, 160, .45); background: rgba(233, 215, 160, .08); color: #e9d7a0; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
#creator-profile .creator-profile-close:hover, #creator-profile .creator-profile-close:focus-visible { background: rgba(233, 215, 160, .2); border-color: #e9d7a0; transform: rotate(90deg); }
.creator-profile-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.creator-profile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.creator-profile-chips p { margin: 0; }
.creator-profile-ens-chip { background: rgba(32, 52, 92, .9); border-color: rgba(122, 162, 255, .55); color: #dbe6ff; }
.creator-profile-ens-chip::before { color: #9fbcff; }
.creator-profile-chips [hidden] { display: none; }
.creator-earnings { margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(233, 215, 160, .35); border-radius: 10px; background: linear-gradient(135deg, rgba(233, 215, 160, .08), rgba(16, 35, 29, .5)); }
.creator-earnings-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.creator-earnings-heading h3 { margin: 0; font-size: 1rem; }
.creator-earnings-heading strong { font-size: 1.35rem; color: #f3e6bd; font-variant-numeric: tabular-nums; }
.creator-earnings-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.creator-earnings-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .82rem; }
.creator-earnings-list strong { text-align: right; font-variant-numeric: tabular-nums; }
.creator-earnings-label small { color: var(--text-dim); }
.creator-earnings-proof { grid-column: 1 / -1; font-size: .72rem; color: var(--text-dim); }
.creator-earnings-proof a { color: #9fd8b5; }
.creator-earnings-proof em { color: #f0c36a; font-style: normal; }
.creator-earnings-receipt { margin-top: 4px; }
.creator-earnings-receipt summary { cursor: pointer; color: #9fd8b5; }
.creator-earnings-receipt-scroll { overflow-x: auto; margin-top: 6px; border: 1px dashed rgba(233, 215, 160, .3); border-radius: 6px; background: rgba(0, 0, 0, .18); }
.creator-earnings-receipt table { width: 100%; border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; color: var(--text, #e8f0ea); }
.creator-earnings-receipt th, .creator-earnings-receipt td { padding: 4px 8px; text-align: left; white-space: nowrap; border-bottom: 1px dotted rgba(255, 255, 255, .1); }
.creator-earnings-receipt thead th { color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .62rem; }
.creator-earnings-receipt td.num { text-align: right; font-variant-numeric: tabular-nums; }
.creator-earnings-receipt tfoot th, .creator-earnings-receipt tfoot td { border-top: 1px solid rgba(233, 215, 160, .45); border-bottom: 0; color: #f3e6bd; font-weight: 700; }
.creator-earnings-status, .creator-earnings-note { margin: 8px 0 0; font-size: .74rem; color: var(--text-dim); }
.creator-earnings-status:empty { display: none; }
#creator-profile .creator-profile-edit-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(520px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); overflow: auto; box-sizing: border-box; padding: 16px 18px; color: var(--text); background: var(--bg, #111); border: 1px solid #e9d7a0; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
#creator-profile .creator-profile-edit-dialog::backdrop { background: #000a; }
.creator-profile-edit-dialog .creator-profile-toolbar h3 { margin: 0; }
.creator-profile-edit-dialog .creator-profile-discord { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--panel-border); }
.creator-profile-edit-status { margin: 10px 0 0; font-size: .76rem; color: var(--text-dim); }
.creator-profile-edit-status:empty { display: none; }
.creator-watchlist { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--panel-border); }
.creator-watchlist-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.creator-watchlist-heading h3 { margin: 0; font-size: .9rem; }
.creator-watchlist-heading span { color: var(--text-dim); font-size: .72rem; }
.creator-watchlist-list { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.creator-watchlist-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: rgba(5, 3, 18, 0.4); }
.creator-watchlist-art { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: #111827; }
.creator-watchlist-fallback { display: grid; place-items: center; color: var(--gold); font-size: 1.4rem; }
.creator-watchlist-copy { display: grid; gap: 4px; min-width: 0; }
.creator-watchlist-copy strong { font-size: .82rem; }
.creator-watchlist-copy span { color: var(--text-dim); font-size: .72rem; overflow-wrap: anywhere; }
.creator-watchlist-meta { font-size: .65rem; }
.creator-watchlist-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.creator-watchlist-actions button { min-height: 30px; padding: 5px 10px; }

/* Profile dropdowns: My NFTs + Watchlist */
#creator-profile details.creator-dropdown { margin-top: 12px; padding: 0; border: 1px solid rgba(233, 215, 160, .28); border-radius: 16px; background: linear-gradient(180deg, rgba(233, 215, 160, .06), rgba(5, 3, 18, .35)); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
#creator-profile details.creator-dropdown[hidden] { display: none; }
#creator-profile details.creator-dropdown[open] { border-color: rgba(233, 215, 160, .55); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
#creator-profile details.creator-dropdown > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; list-style: none; cursor: pointer; user-select: none; transition: background .2s ease; }
#creator-profile details.creator-dropdown > summary::-webkit-details-marker { display: none; }
#creator-profile details.creator-dropdown > summary:hover, #creator-profile details.creator-dropdown > summary:focus-visible { background: rgba(233, 215, 160, .08); outline: none; }
#creator-profile details.creator-dropdown > summary::after { content: ''; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid #e9d7a0; border-bottom: 2px solid #e9d7a0; transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; }
#creator-profile details.creator-dropdown[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.creator-dropdown-title { flex: 1; color: #e9d7a0; font-weight: 700; font-size: .9rem; letter-spacing: .02em; }
.creator-dropdown-count { min-width: 22px; padding: 2px 9px; border-radius: 999px; background: rgba(233, 215, 160, .14); border: 1px solid rgba(233, 215, 160, .35); color: #e9d7a0; font-size: .7rem; font-weight: 700; text-align: center; }
.creator-dropdown-count:empty { display: none; }
.creator-dropdown-body { display: grid; gap: 10px; padding: 0 14px 14px; animation: creator-dropdown-in .28s ease both; }
@keyframes creator-dropdown-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
#creator-profile .creator-dropdown-search input { padding: 9px 14px; border-radius: 999px; border-color: rgba(233, 215, 160, .3); background: rgba(13, 18, 16, .75); transition: border-color .2s ease, box-shadow .2s ease; }
#creator-profile .creator-dropdown-search input:focus { outline: none; border-color: #e9d7a0; box-shadow: 0 0 0 3px rgba(233, 215, 160, .18); }
.creator-dropdown-status { margin: 0; color: var(--text-dim); font-size: .72rem; }
.creator-dropdown-status:empty { display: none; }
.creator-nft-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.creator-nft-item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px 8px 8px; border: 1px solid rgba(233, 215, 160, .14); border-radius: 14px; background: rgba(5, 3, 18, .45); animation: creator-nft-in .35s ease both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.creator-nft-item:hover { transform: translateY(-2px); border-color: rgba(233, 215, 160, .4); background: rgba(233, 215, 160, .06); }
@keyframes creator-nft-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.creator-nft-art-wrap { position: relative; width: 64px; height: 64px; }
#creator-profile .creator-nft-art { display: grid; place-items: center; width: 64px; height: 64px; min-height: 0; padding: 0; border: 2px solid rgba(233, 215, 160, .35); border-radius: 12px; background: #111827; color: #e9d7a0; font-size: 1.5rem; overflow: hidden; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
#creator-profile .creator-nft-art:hover, #creator-profile .creator-nft-art:focus-visible { transform: scale(1.06); border-color: #e9d7a0; box-shadow: 0 0 0 3px rgba(233, 215, 160, .2), 0 6px 16px rgba(0, 0, 0, .45); outline: none; }
.creator-nft-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
#creator-profile .creator-nft-icon, .artwork-edit-badge { display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(233, 215, 160, .5); background: rgba(13, 18, 16, .92); color: #e9d7a0; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease; }
#creator-profile .creator-nft-icon svg, .artwork-edit-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.artwork-edit-badge { position: absolute; right: -8px; bottom: -6px; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
#creator-profile .creator-nft-icon:hover, #creator-profile .creator-nft-icon:focus-visible, .artwork-edit-badge:hover, .artwork-edit-badge:focus-visible { transform: scale(1.12) rotate(-8deg); background: #e9d7a0; color: #15221c; outline: none; }
#creator-profile .creator-nft-remove { opacity: .55; }
#creator-profile .creator-nft-remove:hover, #creator-profile .creator-nft-remove:focus-visible { opacity: 1; background: #b4473f; border-color: #e07a70; color: #fff; transform: scale(1.1) rotate(90deg); }
.creator-nft-copy { display: grid; gap: 3px; min-width: 0; }
.creator-nft-copy strong { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-nft-copy span { color: var(--text-dim); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-nft-meta { font-size: .66rem !important; opacity: .8; }

/* Artwork editor dialog */
#nft-artwork-editor.artwork-editor { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 20px; color: var(--text); background: radial-gradient(circle at 50% 0%, rgba(233, 215, 160, .1), transparent 60%), var(--bg, #111); border: 1px solid rgba(233, 215, 160, .55); border-radius: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .65); }
#nft-artwork-editor[open] { animation: artwork-editor-in .3s cubic-bezier(.2, .9, .3, 1.2) both; }
#nft-artwork-editor::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(3px); }
@keyframes artwork-editor-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.artwork-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.artwork-editor-header h3 { margin: 0; color: #e9d7a0; font-size: 1.1rem; }
.artwork-editor-subtitle { margin: 4px 0 0; color: var(--text-dim); font-size: .74rem; }
.artwork-editor-close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(233, 215, 160, .45); background: rgba(233, 215, 160, .08); color: #e9d7a0; cursor: pointer; transition: background .15s ease, transform .2s ease, border-color .15s ease; }
.artwork-editor-close:hover, .artwork-editor-close:focus-visible { background: rgba(233, 215, 160, .2); border-color: #e9d7a0; transform: rotate(90deg); outline: none; }
.artwork-editor-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.artwork-editor-previews { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 16px; }
.artwork-editor-frame { position: relative; display: grid; place-items: center; margin: 0; aspect-ratio: 1; border: 2px solid rgba(233, 215, 160, .3); border-radius: 18px; background: #0d1210; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; }
.artwork-editor-frame img { width: 100%; height: 100%; object-fit: cover; }
.artwork-editor-frame img[hidden] { display: none; }
.artwork-editor-frame.is-new { border-style: dashed; }
.artwork-editor-frame.is-new.has-image { border-style: solid; border-color: #e9d7a0; box-shadow: 0 0 0 4px rgba(233, 215, 160, .14); }
.artwork-editor-frame.has-image img { animation: artwork-pop .35s ease both; }
@keyframes artwork-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.artwork-editor-placeholder { font-size: 2rem; opacity: .45; }
.artwork-editor-placeholder[hidden] { display: none; }
.artwork-editor-frame figcaption { position: absolute; left: 8px; bottom: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #e9d7a0; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.artwork-editor-arrow { color: #e9d7a0; font-size: 1.2rem; opacity: .7; }
.artwork-editor-frame.has-image ~ .artwork-editor-arrow, .artwork-editor-previews:has(.has-image) .artwork-editor-arrow { animation: artwork-arrow 1.2s ease-in-out infinite; }
@keyframes artwork-arrow { 0%, 100% { transform: translateX(0); opacity: .6; } 50% { transform: translateX(4px); opacity: 1; } }
.artwork-editor-picker { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 6px; margin-bottom: 12px; border: 1px dashed rgba(233, 215, 160, .45); border-radius: 999px; background: rgba(233, 215, 160, .05); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.artwork-editor-picker:hover, .artwork-editor-picker:focus-within { background: rgba(233, 215, 160, .12); border-color: #e9d7a0; }
.artwork-editor-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.artwork-editor-picker-label { flex: none; padding: 7px 14px; border-radius: 999px; background: #e9d7a0; color: #15221c; font-size: .78rem; font-weight: 700; }
.artwork-editor-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: .74rem; }
.artwork-editor-save { width: 100%; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #f5cf66, #e9d7a0 55%, #c9a94f); color: #15221c; font: inherit; font-size: .88rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(245, 207, 102, .25); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.artwork-editor-save:hover:not(:disabled), .artwork-editor-save:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245, 207, 102, .35); outline: none; }
.artwork-editor-save:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.4); }
#nft-artwork-editor.is-busy .artwork-editor-save { background-size: 200% 100%; background-image: linear-gradient(90deg, #c9a94f, #f5cf66, #c9a94f); animation: artwork-busy 1.2s linear infinite; opacity: .9; }
@keyframes artwork-busy { from { background-position: 0 0; } to { background-position: -200% 0; } }
.artwork-editor-status { min-height: 1.2em; margin: 12px 0 0; color: var(--text-dim); font-size: .76rem; text-align: center; }
.artwork-editor-status.error { color: #ff9b8f; animation: artwork-shake .35s ease; }
.artwork-editor-status.success { color: #9be3a6; font-weight: 700; animation: artwork-pop .35s ease both; }
@keyframes artwork-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) {
  #creator-profile .artwork-edit-badge, .artwork-edit-badge { transition: none; }
  #creator-profile .artwork-edit-badge:hover, #creator-profile .artwork-edit-badge:focus-visible, .artwork-edit-badge:hover, .artwork-edit-badge:focus-visible { transform: none; }
  .creator-dropdown-body, .creator-nft-item, #nft-artwork-editor[open], .artwork-editor-frame.has-image img, .artwork-editor-arrow, .artwork-editor-status, #nft-artwork-editor.is-busy .artwork-editor-save { animation: none !important; }
  .creator-nft-item:hover, #creator-profile .creator-nft-art:hover, #creator-profile .creator-nft-icon:hover, .artwork-editor-save:hover { transform: none; }
}
#djuke-search { margin: 0 0 8px; }
#djuke-search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
#djuke-search-results button, #djuke-search-more { width: 100%; padding: 8px; text-align: left; border: 1px solid #52675a; border-radius: 4px; color: var(--text); background: #1b2924; font: inherit; font-size: .8rem; cursor: pointer; }
#djuke-search-results button[aria-pressed="true"] { border-color: var(--gold); }
#djuke-search-state, .worker-gas-state { font-size: .76rem; color: var(--text-dim); }
.worker-gas-notice[hidden], .worker-gas-state[hidden], #djuke-search-more[hidden] { display: none; }
#archive-search { width: 100%; box-sizing: border-box; padding: 8px; color: var(--text); background: #1b2924; border: 1px solid #52675a; border-radius: 4px; font: inherit; }
#archive-search-status { padding: 0 16px; font-size: .76rem; color: var(--text-dim); }
@media (max-width: 480px) { .creator-profile-image-fields { grid-template-columns: minmax(0, 1fr); } }

#admin-radio-schedule { display: grid; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid rgba(160, 224, 255, .18); }
.admin-schedule-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.admin-schedule-form label { display: grid; min-width: 0; gap: .35rem; color: var(--text-dim); font-size: .78rem; }
.admin-schedule-form input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: .55rem .65rem; color: var(--text-primary); background: rgba(255,255,255,.05); border: 1px solid rgba(160,224,255,.25); border-radius: 4px; font: inherit; }
.admin-schedule-form input:focus { border-color: #a0e0ff; outline: 2px solid rgba(160,224,255,.22); }
.admin-schedule-form .admin-actions { grid-column: 1 / -1; }
.admin-schedule-events { display: grid; gap: .55rem; max-height: 240px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.admin-schedule-event { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem; border: 1px solid rgba(160,224,255,.18); border-radius: 4px; background: rgba(255,255,255,.025); }
.admin-schedule-event > div:first-child { display: grid; min-width: 0; gap: .2rem; }
.admin-schedule-event strong, .admin-schedule-event span { overflow-wrap: anywhere; }
.admin-schedule-event span, .admin-schedule-empty { color: var(--text-dim); font-size: .74rem; }
.admin-schedule-actions { display: flex; flex: 0 0 auto; gap: .4rem; }
.admin-schedule-actions .admin-btn { padding: .45rem .7rem; font-size: .76rem; }
.admin-schedule-empty { padding: .75rem; }

.admin-section-header,
.admin-mint-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-section-header h3,
#admin-role-section h3 {
  color: #a0e0ff;
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

.admin-section-header p {
  color: var(--text-dim);
  font-size: 0.78rem;
  margin: 0;
}

.admin-mint-queue {
  display: grid;
  gap: 0.65rem;
  max-height: 42vh;
  overflow-y: auto;
}

.admin-mint-request {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid rgba(160, 224, 255, 0.18);
  border-radius: 6px;
  background: rgba(255,255,255,0.035);
}

.admin-mint-request strong,
.admin-mint-request span {
  display: block;
  overflow-wrap: anywhere;
}

.admin-mint-request span {
  color: var(--text-dim);
  font-size: 0.76rem;
  margin-top: 0.2rem;
}

.admin-mint-request input[type="file"] {
  width: min(100%, 230px);
  color: var(--text-dim);
  font-size: 0.72rem;
  margin-top: 0.45rem;
}

.admin-artwork-preview {
  float: left;
  width: 64px;
  height: 64px;
  object-fit: cover;
  margin: 0 0.65rem 0.45rem 0;
  border: 1px solid rgba(160, 224, 255, 0.25);
  border-radius: 4px;
}

.admin-artwork-label { display: grid; clear: both; gap: 6px; margin-top: 12px; font-size: .8rem; line-height: 1.4; }
.admin-artwork-cid { box-sizing: border-box; min-width: 0; width: 100%; padding: 8px; color: var(--text-primary); background: #10121a; border: 1px solid var(--panel-border); border-radius: 4px; font: inherit; }

.admin-mint-empty {
  color: var(--text-dim);
  text-align: center;
  padding: 1.2rem;
}

.admin-mint-toolbar label {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.admin-btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1px solid rgba(160, 224, 255, 0.2);
}

#radio-schedule-dialog { box-sizing: border-box; width: min(620px, calc(100vw - 28px)); max-height: min(82dvh, 720px); margin: auto; padding: 22px; overflow-y: auto; color: var(--text-primary); background: #101918; border: 1px solid #73d8b8; border-radius: 6px; }
#radio-schedule-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
#radio-schedule-close { width: 36px; height: 36px; color: var(--text-primary); background: #17211f; border: 1px solid rgba(115,216,184,.38); border-radius: 4px; cursor: pointer; }
.radio-schedule-note, #radio-schedule-status { color: var(--text-dim); font-size: .8rem; line-height: 1.45; }
#radio-schedule-dialog > section { margin-top: 18px; }
#radio-schedule-dialog h3 { margin: 0 0 8px; color: #b9f49b; font-size: .92rem; }
.radio-schedule-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.radio-schedule-row { display: grid; gap: 4px; padding: 10px; border-left: 2px solid #73d8b8; background: rgba(115,216,184,.06); }
.radio-schedule-row.is-active { background: rgba(185,244,155,.12); }
.radio-reminder summary, .radio-calendar-subscription summary { cursor: pointer; color: #b9f49b; font-size: .85rem; }
.radio-reminder-choices { display: grid; justify-items: start; gap: 8px; padding: 10px 0 4px; font-size: .8rem; }
.radio-reminder-choices a, .radio-calendar-subscription a { color: #9be9d1; text-decoration: underline; }
.radio-reminder-choices small { line-height: 1.5; color: var(--text-secondary); }
.radio-calendar-subscription { margin-top: 14px; padding: 12px; border: 1px solid #73d8b844; border-radius: 4px; }
.radio-calendar-subscription p { font-size: .8rem; line-height: 1.5; }
.radio-calendar-subscription label { display: block; margin: 12px 0 5px; font-size: .8rem; }
#radio-calendar-feed { box-sizing: border-box; width: 100%; min-width: 0; margin-bottom: 8px; padding: 8px; color: var(--text-primary); background: #08110f; border: 1px solid #73d8b855; border-radius: 4px; }
.radio-schedule-name { color: var(--text-primary); font-size: .84rem; }
.radio-schedule-time, .radio-schedule-empty { color: var(--text-dim); font-size: .76rem; line-height: 1.45; overflow-wrap: anywhere; }
.radio-schedule-live { width: fit-content; padding: 2px 5px; color: #102019; background: #b9f49b; border-radius: 3px; font-size: .65rem; font-weight: 800; }

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-field label {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.admin-field input,
.admin-field select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(160, 224, 255, 0.25);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
}

.admin-field input:focus,
.admin-field select:focus {
  border-color: #a0e0ff;
}

.admin-status {
  font-size: 0.85rem;
  min-height: 1.2em;
  color: var(--teal);
}
.admin-status.error { color: #ff6b6b; }

.admin-actions {
  display: flex;
  gap: 0.75rem;
}

.admin-btn {
  padding: 0.55rem 1.3rem;
  border-radius: 8px;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s;
}

.admin-btn-primary {
  background: linear-gradient(135deg, #a0e0ff 0%, #5bc8f5 100%);
  color: #000;
  font-weight: 700;
}
.admin-btn-primary:hover { filter: brightness(1.1); }
.admin-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

@media (max-width: 600px) {
  #admin-modal-inner { padding: 1.2rem 1rem; }
  .admin-section-header,
  .admin-mint-toolbar { align-items: stretch; flex-direction: column; }
  .admin-schedule-form { grid-template-columns: minmax(0, 1fr); }
  .admin-schedule-form .admin-actions { grid-column: 1; flex-wrap: wrap; }
  .admin-schedule-event { align-items: flex-start; flex-direction: column; }
  #radio-schedule-dialog { width: calc(100vw - 20px); max-height: 84dvh; padding: 18px 14px; }
  .admin-reviewed-album-import .admin-btn { width: 100%; }
  .admin-mint-request { grid-template-columns: auto minmax(0, 1fr); }
  .admin-mint-request .admin-mint-one { grid-column: 1 / -1; }
}

  @media (max-width: 600px) {
    #busker-info {
      top: auto;
      bottom: 190px;
      left: 50%;
      z-index: 60;
      width: min(88vw, 320px);
      padding: 0.45rem 0.8rem;
      background: rgba(5, 3, 18, 0.9);
      border: 1px solid var(--panel-border);
      border-radius: 10px;
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 18px rgba(0,0,0,.38);
    }

    #now-playing-title { font-size: 1.05rem; }

    #center-stage {
      top: auto;
      bottom: 100px;
      left: 50%;
      z-index: 60;
      gap: 2rem;
    }

    #hat-btn,
    #guitar-case-btn { font-size: 3.25rem; }

    #timeline-nav {
      bottom: 18px;
      left: 50%;
      max-width: calc(100vw - 24px);
      transform: translateX(-50%);
      gap: 0.35rem;
      padding: 0.4rem 0.55rem;
    }

    #timeline-slider { width: 150px; }
    #dnft-archive-toggle { top: 120px; right: 8px; min-height: 36px; padding: 0.4rem 0.65rem; }
    #dnft-list { top: 164px; bottom: 68px; width: min(340px, calc(100vw - 20px)); }
  }

/* ── DecentBusking skin overrides ───────────────────────────────────────── */
/* NOTE: .title-main lives inside the AppTitle Shadow DOM, so this rule has  */
/* no effect here. The actual orange override is injected via JS in           */
/* js/components/header-title-color-override.js                               */
/* .title-main { color: #ff8c00 !important; ... } */

#mobile-discord-link { display: none; }

@media (min-width: 601px) {
  #busker-info,
  #center-stage,
  #timeline-nav {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  #busker-info { bottom: 174px; }
  #center-stage { bottom: 112px; }
  #timeline-nav { bottom: 48px; }
  #mobile-discord-link {
    position: fixed;
    bottom: 8px;
    left: 50%;
    z-index: 55;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.85rem;
    color: var(--text-primary);
    background: rgba(5, 3, 18, .92);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    box-shadow: 0 3px 12px rgba(0,0,0,.35);
    font-size: 0.78rem;
    text-decoration: none;
    transform: translateX(-50%);
  }
}

#stage { pointer-events: none; }
decent-foot {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  z-index: 100;
}
#center-stage {
  inset: auto 0 0;
  width: 100%;
  height: 0;
  transform: none;
  perspective: none;
  z-index: 120;
  pointer-events: none;
}
#hat-btn, #guitar-case-btn {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 96px;
  height: 96px;
  pointer-events: auto;
}
#hat-btn { left: 20px; transform: rotate(180deg); }
#hat-btn:hover { transform: rotate(180deg) scale(1.08); }
#hat-btn:active { transform: rotate(180deg) scale(.96); }
#guitar-case-btn { right: 20px; transform: perspective(450px) rotateX(35deg) rotate(-18deg); }
#guitar-case-btn:hover { transform: perspective(450px) rotateX(35deg) rotate(-18deg) scale(1.08); }
#guitar-case-btn:active { transform: perspective(450px) rotateX(35deg) rotate(-18deg) scale(.96); }
#camera-tools {
  position: fixed;
  bottom: 134px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 30;
  pointer-events: auto;
}
#camera-tools button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: rgba(5,3,18,.88);
  color: var(--teal);
  font-size: 20px;
  cursor: pointer;
}
#camera-tools button:hover { border-color: var(--teal); }
#nft-panel {
  margin: 0;
  width: min(780px, calc(100vw - 32px));
  min-width: 0;
  max-width: 780px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border-radius: 8px;
  padding: 32px 24px 24px;
  color: var(--text-primary);
}
#nft-panel::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
#nft-panel-content { margin: 0; }
.nft-detail-artwork { position: relative; width: min(100%, 280px); margin: 0 auto 20px; }
.nft-detail-image {
  display: block;
  width: min(100%, 280px);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0;
  background: #08070d;
  border-radius: 4px;
}
#nft-panel-content h3 { padding-right: 20px; overflow-wrap: anywhere; }
.nft-detail-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; }
.nft-detail-links a { color: var(--teal); font-size: .85rem; }
#nft-panel-close { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; }
#artist-filter-bar {
  position: fixed;
  top: var(--header-height, 112px);
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 16px;
  background: rgba(5,3,18,.9);
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-primary);
  font-size: .85rem;
}
.artist-filter-core {
  display: grid;
  flex: 0 1 420px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}
#scene-music-search, .archive-artist-filter select {
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  background: #0d0820;
  color: var(--text-primary);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
}
#scene-music-search { width: 100%; box-sizing: border-box; font: inherit; }
.fund-header-pill {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 0;
  padding: 7px 10px;
  color: var(--gold);
  background: rgba(13,8,32,.92);
  border: 1px solid rgba(255, 213, 166, .28);
  border-radius: 999px;
  font-size: .74rem;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.fund-header-pill:disabled { opacity: .92; cursor: progress; }
.fund-header-left { justify-self: start; }
.fund-header-right { justify-self: end; color: var(--teal); border-color: rgba(0, 212, 170, .28); }
#fund-breakdown-dialog { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(960px, calc(100vw - 28px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid rgba(220, 233, 222, .3); border-radius: 8px; background: rgba(14, 22, 24, .88); color: var(--text-primary); box-shadow: 0 24px 90px #0009, 0 0 36px #a0d6ba18; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#fund-breakdown-dialog::backdrop { background: rgba(0, 0, 0, .46); backdrop-filter: blur(3px); }
.fund-breakdown-shell { min-width: 0; padding: 22px; background: transparent; color: var(--text-primary); }
.fund-breakdown-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fund-breakdown-heading h3 { margin: 0; color: var(--gold); }
#fund-breakdown-close { width: 32px; height: 32px; color: var(--text-primary); background: #141720; border: 1px solid var(--panel-border); border-radius: 4px; }
#fund-breakdown-summary, #fund-breakdown-note { margin: 0 0 10px; color: var(--text-dim); font-size: .82rem; line-height: 1.4; overflow-wrap: anywhere; }
#fund-breakdown-summary { display: block; }
.fund-prize { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 240px; padding: 38px 48px 64px; box-sizing: border-box; overflow: hidden; text-align: center; background: radial-gradient(ellipse at 50% 46%, #d7e68c19, transparent 65%); }
.fund-prize-label { color: #e6e6bd; font-size: .8rem; text-transform: uppercase; letter-spacing: 0; }
.fund-prize .fund-prize-amount { position: relative; z-index: 1; max-width: 100%; font-size: 3.5rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fund-prize-amount .usdc-amount-text { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.fund-prize-caption { position: relative; z-index: 1; max-width: 100%; color: #bac8c2; font-size: .7rem; }
.fund-prize-orbit, .fund-prize-crowd { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.fund-prize-dollar { position: absolute; top: 0; left: 0; offset-path: ellipse(44% 38% at 50% 46%); offset-rotate: 0deg; color: #d9f69e; font-size: 1.1rem; font-weight: 800; text-shadow: 0 0 12px #a8e588a6; animation: fund-dollar-flight calc(32s + var(--index) * 2.8s) linear infinite; animation-delay: calc(var(--index) * -6s); }
.fund-prize-dollar:nth-child(even) { animation-direction: reverse; }
.fund-prize-dollar:nth-child(2), .fund-prize-dollar:nth-child(5) { offset-path: polygon(8% 28%, 24% 12%, 84% 20%, 50% 50%, 12% 76%, 74% 82%, 92% 34%, 36% 46%, 8% 28%); }
.fund-prize-busker { position: absolute; bottom: 10px; left: calc(15% + var(--index) * 16%); font-size: 1.65rem; line-height: 1.5; filter: drop-shadow(0 0 8px #e4d98e40); animation: fund-busker-dance 4s ease-in-out infinite; animation-delay: calc(var(--index) * -.8s); }
.fund-flow-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 0; margin-bottom: 12px; border-top: 1px solid #d5e3d522; border-bottom: 1px solid #d5e3d522; text-align: center; }
.fund-flow-totals > span { min-width: 0; }
.fund-balance-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; border-bottom: 0; }
.fund-weekly-warning { color: #ffbd9a; font-size: .68rem; }
.fund-weekly-mismatch { border-color: #ffbd9a88; }
.fund-flow-label { display: block; margin-bottom: 4px; color: #b8c5bf; font-size: .68rem; }
.fund-flow-totals .usdc-amount { font-size: 1.05rem; font-weight: 700; }
#fund-breakdown-body { overflow-x: auto; }
.fund-pending-section h4, .fund-confirmed-section h4, .fund-weekly-section h4 { margin: 0 0 12px; font-size: .88rem; }
.fund-pending-section { margin-top: 18px; }
.fund-pending-notice { margin: 0 0 12px; color: #bdc9c4; font-size: .74rem; line-height: 1.55; }
.fund-pending-details { margin-top: 12px; }
.fund-pending-details > summary { width: fit-content; padding: 8px 0; color: #c8d5d0; font-size: .76rem; cursor: pointer; }
.fund-pending-details[open] > summary { margin-bottom: 6px; }
.fund-pending-meta, .fund-pending-empty { color: #b4babd; font-size: .72rem; font-style: italic; }
.fund-pending-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .76rem; }
.fund-pending-table th, .fund-pending-table td { padding: 9px 6px; text-align: left; border-bottom: 1px dashed #c7d0d32b; vertical-align: top; }
.fund-pending-table th { color: #c6cdcf; font-size: .68rem; }
.fund-pending-row { color: #b4babd; font-style: italic; }
#fund-breakdown-dialog .fund-pending-row .usdc-amount-text { color: #b4babd; background: none; -webkit-text-fill-color: currentColor; text-shadow: none; animation: none; }
.fund-pending-row .fund-wallet-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }
.fund-pending-row .usdc-icon { opacity: .65; filter: grayscale(1); }
.fund-pending-table .fund-breakdown-amount { text-align: right; }
.fund-confirmed-section, .fund-weekly-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #cededb45; }
.fund-confirmed-section .fund-breakdown-row { color: #e1e9e4; font-style: normal; }
.fund-weekly-frozen { font-style: normal; }
.fund-weekly-confirmed { color: #e1e9e4; font-style: normal; }
#fund-breakdown-body .fund-breakdown-table, #fund-breakdown-body .fund-weekly-table { min-width: 620px; }
#fund-breakdown-dialog .fund-amount-in .usdc-amount-text,
#fund-breakdown-dialog .fund-prize-amount .usdc-amount-text { color: #ddf5a0; background: linear-gradient(110deg, #8ce8b2 10%, #f9dc84 35%, #fff9d5 48%, #a4f5bf 62%, #f9dc84 90%); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 16px #b4e36c40; animation: fund-amount-shimmer 7s linear infinite; }
#fund-breakdown-dialog .fund-amount-out .usdc-amount-text,
#fund-breakdown-dialog .fund-weekly-archive .usdc-amount:not(.usdc-amount--queued) .usdc-amount-text { color: #cbe6ff; background: linear-gradient(110deg, #8dc8ff 10%, #d7e0ec 35%, #fff 48%, #a6d8ff 62%, #e2e7ee 90%); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 14px #9ccfff45; animation: fund-amount-shimmer 9s linear infinite; }
#fund-breakdown-dialog .fund-prize-amount .usdc-amount-text { text-shadow: 0 0 28px #b9eb6d55, 0 0 60px #f0ce7a30; }
@keyframes fund-dollar-flight { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes fund-busker-dance { 0%, 100% { transform: translate(-10px, 0) rotate(-7deg); } 50% { transform: translate(10px, -7px) rotate(7deg); } }
@keyframes fund-amount-shimmer { from { background-position: 200% 50%; } to { background-position: -40% 50%; } }
@media (max-width: 600px) {
  .fund-breakdown-shell { padding: 14px; }
  .fund-breakdown-heading h3 { font-size: .9rem; }
  #fund-breakdown-close { flex-shrink: 0; }
  .fund-prize { min-height: 226px; padding: 34px 20px 62px; }
  .fund-prize .fund-prize-amount { font-size: 2.5rem; }
  .fund-flow-totals { gap: 4px; }
  .fund-flow-totals .usdc-amount { font-size: .8rem; }
  .fund-prize-busker { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  #fund-breakdown-dialog .usdc-amount-text, .fund-prize-dollar, .fund-prize-busker { animation: none !important; }
  #fund-breakdown-dialog .usdc-amount .usdc-amount-text { -webkit-text-fill-color: currentColor; }
  #fund-breakdown-dialog .fund-amount-in, #fund-breakdown-dialog .fund-prize-amount { color: #ddf5a0; }
  #fund-breakdown-dialog .fund-amount-out, #fund-breakdown-dialog .fund-weekly-archive .usdc-amount:not(.usdc-amount--queued) { color: #cbe6ff; }
  .fund-prize-dollar { offset-distance: calc(var(--index) * 16.666%); }
}
.fund-breakdown-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.fund-breakdown-table th, .fund-breakdown-table td { padding: 6px 5px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; overflow-wrap: anywhere; }
.fund-breakdown-table th:last-child, .fund-breakdown-table td:last-child { white-space: nowrap; }
.fund-breakdown-table .fund-breakdown-amount { text-align: right; font-variant-numeric: tabular-nums; }
.fund-breakdown-extra { color: var(--text-dim); font-size: .68rem; margin-top: 3px; }
.fund-breakdown-empty { color: var(--text-dim); text-align: center; }
.fund-breakdown-table .fund-wallet-link { border: 0; padding: 0; background: transparent; color: var(--teal); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fund-breakdown-table .fund-wallet-aliases { margin-left: 5px; color: var(--text-dim); font-size: .68rem; }
.fund-breakdown-table a { color: var(--gold); }
.fund-breakdown-row.fund-breakdown-out .fund-breakdown-amount { color: #ff9e8f; }
.fund-breakdown-row.fund-breakdown-in .fund-breakdown-amount { color: var(--teal); }
.fund-weekly-archive { display: grid; gap: 8px; margin-top: 10px; }
.fund-weekly-details { margin: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(17, 19, 30, .68); }
.fund-weekly-details summary { cursor: pointer; list-style: none; }
.fund-weekly-details summary::-webkit-details-marker { display: none; }
.fund-weekly-details[open] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.fund-weekly-body { margin-top: 8px; }
.fund-weekly-meta { margin: 0 0 8px; color: var(--text-dim); font-size: .7rem; }
.fund-weekly-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.fund-weekly-table th, .fund-weekly-table td { padding: 6px 5px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; overflow-wrap: anywhere; }
.fund-weekly-table th:last-child, .fund-weekly-table td:last-child { white-space: nowrap; }
.fund-weekly-sub { margin-top: 2px; color: var(--text-dim); font-size: .64rem; }
.fund-weekly-queued { color: #ffe49b; }
.fund-weekly-details.fund-weekly-paid .usdc-amount-text { animation-duration: 13s; }
.fund-weekly-details.fund-weekly-partial .usdc-amount-text { animation-duration: 11s; }
.fund-weekly-details.fund-weekly-queued .usdc-amount-text { animation-duration: 0s; }
.archive-artist-filter { display: grid; gap: 6px; padding: 10px 16px; font-size: .8rem; color: var(--text-dim); }
#dnft-archive-toggle { top: calc(var(--header-height, 112px) + 58px); }
#dnft-list { top: calc(var(--header-height, 112px) + 102px); bottom: calc(var(--radio-footer-height, 96px) + 12px); }
.dnft-list-item[hidden] { display: none; }
@media (max-width: 600px) {
  #artist-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .artist-filter-core {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 6px;
  }
  .fund-header-pill { width: 100%; text-align: center; }
  .artist-filter-core { flex: none; }
  #hat-btn, #guitar-case-btn { width: 64px; height: 64px; bottom: 12px; font-size: 3.25rem; }
  #hat-btn { left: 4px; }
  #guitar-case-btn { right: 16px; }
  #camera-tools { bottom: 112px; z-index: 65; }
  #nft-panel { padding: 36px 16px 20px; }
  #nft-panel-content .nft-meta { grid-template-columns: 90px minmax(0,1fr); gap: 8px; }
  .nft-detail-artwork { width: min(100%, 230px); }
  #mobile-discord-link { display: none; }
}

#radio-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 20px;
  padding: 10px 120px;
  min-height: 96px;
  color: var(--text-primary);
  background: rgba(5,3,18,.96);
  border-top: 1px solid var(--panel-border);
}
#footer-discord-link { color: var(--gold); font-size: .8rem; text-decoration: none; white-space: nowrap; }
#radio-footer #busker-info {
  position: static;
  inset: auto;
  transform: none;
  z-index: auto;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  display: grid;
  justify-content: center;
  gap: 2px;
  text-align: left;
  pointer-events: auto;
}
#radio-footer .now-playing-badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#radio-footer #now-playing-label { font-size: .65rem; letter-spacing: 0; white-space: nowrap; }
#radio-footer #now-playing-sponsor {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(100%, 320px);
  padding: 2px 8px;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  background: rgba(5, 3, 18, 0.86);
  color: var(--gold);
  font-size: .62rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#radio-footer #now-playing-sponsor.hidden[hidden] { display: none; }
.radio-track-row { display: grid; grid-template-columns: 76px minmax(0, 320px) max-content; gap: 8px; align-items: start; min-width: 0; }
.radio-audio-controls { display: grid; grid-template-columns: repeat(2, 36px); gap: 4px; }
#radio-mute { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--panel-border); border-radius: 4px; background: #10121a; cursor: pointer; }
#radio-mute img { filter: invert(1); }
#radio-mute img[hidden] { display: none; }
#radio-mute[aria-pressed="true"] { border-color: var(--gold); background: #332c14; }
#radio-volume-dial { --volume-angle: 135deg; position: relative; width: 36px; height: 36px; border: 2px solid var(--panel-border); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #393e47, #10121a 75%); cursor: ns-resize; touch-action: none; }
#radio-volume-dial::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid #58616a; transform: rotate(var(--volume-angle)); pointer-events: none; }
#radio-volume-dial::after { content: ''; position: absolute; top: 4px; left: 14px; width: 4px; height: 9px; border-radius: 2px; background: var(--teal); transform-origin: 2px 12px; transform: rotate(var(--volume-angle)); pointer-events: none; }
#radio-volume { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
#radio-volume-dial:focus-within, #radio-mute:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.radio-title-window { width: 100%; height: 36px; overflow: hidden; }
#radio-footer #now-playing-title {
  display: inline-block;
  width: max-content;
  min-height: 0;
  padding-left: 100%;
  font-size: .8rem;
  line-height: 36px;
  white-space: nowrap;
  text-shadow: none;
  animation: radio-title-scroll 18s linear infinite;
}
.radio-title-window:hover #now-playing-title { animation-play-state: paused; }
#radio-footer #now-playing-artist { font-size: .75rem; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#radio-footer .radio-ad-countdown {
  font-size: .68rem;
  color: var(--gold);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#radio-footer .now-playing-actions { justify-content: flex-start; }
#radio-footer #now-playing-play-btn, #radio-footer #now-playing-radio-btn {
  font-family: inherit;
  font-size: .7rem;
  min-height: 28px;
  padding: 2px 8px;
  margin: 0;
  border-radius: 4px;
  animation: none;
}
#radio-footer #now-playing-watchlist-btn {
  min-height: 28px;
  padding: 2px 8px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid var(--gold-dim);
  background: rgba(5, 3, 18, 0.75);
  color: var(--gold);
  font-size: .72rem;
}
#radio-footer #now-playing-watchlist-btn[aria-pressed="true"] { border-color: var(--teal); background: #17372e; }
#radio-footer #now-playing-watchlist-btn:disabled { opacity: .55; cursor: default; }
#radio-footer #now-playing-watchlist-status { grid-column: 1 / -1; font-size: .64rem; color: var(--text-dim); overflow-wrap: anywhere; }
#radio-voting { display: grid; grid-template-columns: repeat(2, 36px) minmax(32px, auto); gap: 4px; align-content: center; }
#radio-vote-net {
  position: relative; isolation: isolate; align-self: center; text-align: center;
  min-width: 34px; padding: 3px 5px 6px;
  font: 900 1.15rem/1.2 'Arial Black', Impact, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  color: #b8ffe0;
  transform: perspective(140px) rotateY(-18deg) rotateX(8deg) rotateZ(-6deg);
  text-shadow: 1px 1px 0 #398f76, 2px 2px 0 #286b59, 3px 3px 0 #1d5146, 4px 4px 0 #123d36, 5px 6px 4px #000b;
  transition: color .3s, text-shadow .3s;
}
#radio-vote-net [data-vote-number] { position: relative; display: inline-block; z-index: 1; }
#radio-vote-net[data-trend="down"] { color: #ffb28e; text-shadow: 1px 1px 0 #c06250, 2px 2px 0 #90453c, 3px 3px 0 #67332e, 4px 4px 0 #432620, 5px 6px 4px #000b; }
#radio-vote-net [data-vote-effects] { position: absolute; inset: 0; pointer-events: none; }
#radio-vote-net [data-vote-effects] span { position: absolute; left: 50%; top: 0; font-size: 16px; text-shadow: 0 0 6px #67ffc9; animation: vote-note-rise 1.3s ease-out var(--note-delay) both; }
#radio-vote-net[data-trend="down"] [data-vote-effects] span { top: auto; bottom: -6px; font-size: 28px; text-shadow: none; animation: vote-hole-open 1.15s ease-out both; }
@keyframes vote-note-rise { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--note-x)), -60px) rotate(20deg) scale(1.15); } }
@keyframes vote-hole-open { 0%,100% { opacity: 0; transform: translateX(-50%) scaleX(.2); } 20%,70% { opacity: 1; transform: translateX(-50%) scaleX(1.3); } }
@media (prefers-reduced-motion: reduce) {
  #radio-vote-net { transition: none; }
  #radio-vote-net [data-vote-effects] { display: none; }
}
#radio-voting button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: #10121a;
  font-size: 20px;
  cursor: pointer;
}
#radio-voting button[aria-pressed="true"] { border-color: var(--teal); background: #17372e; }
#radio-voting button:disabled { cursor: default; opacity: .5; }
#radio-voting button[aria-pressed="true"]:disabled { opacity: 1; }
#radio-vote-status { grid-column: 1 / -1; font-size: .65rem; color: var(--teal); text-align: center; overflow-wrap: anywhere; max-width: 100px; }
#radio-footer #radio-activity { grid-column: 1 / -1; max-width: 100%; font-size: .7rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#timeline-nav { bottom: calc(var(--radio-footer-height, 96px) + 12px); }
#camera-tools { bottom: calc(var(--radio-footer-height, 96px) + 76px); }
@keyframes radio-title-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (max-width: 600px) {
  #radio-footer { grid-template-columns: minmax(0, 1fr); gap: 6px 10px; padding: 10px 88px 10px 76px; }
  #radio-footer #busker-info { grid-column: 1; grid-row: 2; justify-content: stretch; }
  #radio-footer #now-playing-sponsor { max-width: 100%; }
  .radio-track-row { grid-template-columns: 36px minmax(0, 1fr) max-content; }
  .radio-audio-controls { grid-template-columns: 36px; }
  #radio-voting { grid-column: 3; grid-row: 1; }
  #footer-discord-link { grid-column: 1; font-size: .75rem; }
  .radio-title-window { width: 100%; }
  #radio-footer #now-playing-artist { max-width: 100%; }
  #radio-footer .radio-ad-countdown { max-width: 100%; white-space: normal; }
}
@media (max-width: 380px) {
  #radio-footer { padding: 8px 72px; }
}
@media (prefers-reduced-motion: reduce) {
  #radio-footer #now-playing-title { animation: none; padding-left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

#radio-history-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(82dvh, 760px);
  margin: auto;
  padding: 24px;
  overflow: auto;
  color: var(--text-primary);
  background: rgba(8, 10, 16, .98);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}
#radio-history-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
.radio-history-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.radio-history-header h2 { margin: 0; color: var(--gold); font-size: 1.15rem; }
#radio-history-close { width: 36px; height: 36px; color: var(--text-primary); background: #141720; border: 1px solid var(--panel-border); border-radius: 4px; cursor: pointer; }
.radio-history-note { color: var(--text-dim); font-size: .8rem; }
#radio-history-rewards { display: block; min-width: 0; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--panel-border); font-size: .85rem; }
#radio-history-rewards[hidden] { display: none; }
#radio-history-rewards h3 { margin: 0 0 6px; color: var(--gold); font-size: .95rem; }
#radio-history-rewards h4 { margin: 16px 0 6px; color: var(--text-primary); font-size: .82rem; }
#radio-history-rewards .radio-history-note { margin: 6px 0 12px; line-height: 1.45; overflow-wrap: anywhere; }
#radio-history-rewards .radio-history-table-scroll { margin: 0 0 12px; }
.radio-history-funding-table { min-width: 500px; }
.radio-history-song-estimates { min-width: 420px; }
#radio-video-stage { position: fixed; inset: 150px 8vw calc(var(--radio-footer-height, 96px) + 100px); z-index: 40; display: grid; place-items: center; pointer-events: none; }
#radio-video-stage[hidden] { display: none; }
#radio-video-player { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 1000px; object-fit: contain; opacity: .84; }
#radio-video-toggle { display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 1px solid var(--panel-border); border-radius: 4px; background: #10121a; cursor: pointer; }
#radio-video-toggle img { filter: invert(1); }
.mint-source-controls { display: flex; flex-wrap: wrap; gap: 16px; border: 0; padding: 0; margin: 12px 0; }
#mint-form .mint-source-controls label { display: flex; align-items: center; gap: 6px; margin: 0; }
#mint-form .mint-source-controls input { width: auto; margin: 0; }
#mint-form select { width: 100%; padding: 10px; font: inherit; color: var(--text-primary); background: #10121a; border: 1px solid var(--panel-border); border-radius: 4px; }
#mint-file-section[hidden], #mint-cid-section[hidden] { display: none; }
.radio-history-filters { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 10px; margin: 14px 0; }
.radio-history-filters label { display: grid; min-width: 0; gap: 5px; color: var(--text-dim); font-size: .78rem; }
.radio-history-filters input, .radio-history-filters select { width: 100%; min-width: 0; min-height: 38px; padding: 6px 8px; color: var(--text-primary); background: #10121a; border: 1px solid var(--panel-border); border-radius: 4px; }
.radio-history-week-label { display: grid; gap: 6px; max-width: 220px; margin: 14px 0; color: var(--text-dim); font-size: .8rem; }
#radio-history-week { min-height: 38px; padding: 6px 8px; color: var(--text-primary); background: #10121a; border: 1px solid var(--panel-border); border-radius: 4px; }
.radio-history-total { padding: 12px; color: var(--teal); background: rgba(0, 212, 170, .08); border-left: 2px solid var(--teal); }
#radio-history-content h3 { margin: 20px 0 8px; color: var(--gold); font-size: .9rem; }
.radio-history-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.radio-history-table-scroll { max-width: 100%; overflow-x: auto; }
.radio-history-song-table { min-width: 570px; }
.radio-history-table .radio-history-number { text-align: right; font-variant-numeric: tabular-nums; }
.radio-history-table th, .radio-history-table td { padding: 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); overflow-wrap: anywhere; }
.radio-history-table th:last-child, .radio-history-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.radio-history-empty { color: var(--text-dim); }
@media (max-width: 600px) {
  #radio-history-dialog { width: calc(100vw - 20px); max-height: 84dvh; padding: 18px 14px; }
  #radio-video-stage { inset: 140px 12px calc(var(--radio-footer-height, 96px) + 100px); }
  .radio-history-filters { grid-template-columns: 1fr 1fr; }
  .radio-history-table { font-size: .75rem; }
  .radio-history-table th, .radio-history-table td { padding: 7px 4px; }
}

.fund-header-pill .usdc-icon,
#fund-breakdown-summary .usdc-icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  margin-left: 0.15em;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }