/* The appearance selector extends the set-list frame, flush with its right edge. */
:root { --window-color: rgba(7,5,12,0.88); --glow-top: 0; --glow-bottom: 0; }
body {
  background: radial-gradient(85% 40% at 50% 0%,rgba(255,95,210,var(--glow-top)),transparent 55%),
    radial-gradient(120% 50% at 50% 100%,rgba(24,214,200,var(--glow-bottom)),transparent 60%),
    linear-gradient(168deg,var(--bg-top),var(--bg-bot));
  background-attachment: fixed;
}
#nowCard, #listCard { background: var(--window-color); }
.list-pair { position: relative; padding-bottom: 35px; }
.appearance-control { display: flex; justify-content: flex-end; margin: -1rem 0 0; position: relative; z-index: 2; }
#listeningLightBtn { font: 500 0.75rem system-ui; padding: 0.4rem 0.65rem; margin-right: auto; }
#listeningLightBtn[hidden] { display: none !important; }
.appearance-options { display: inline-flex; border: 1px solid var(--card-line); border-top: 0;
  background: var(--window-color); position: relative; }
.appearance-options::before { content: ''; position: absolute; top: -1px; left: 0; right: 0;
  height: 2px; background: var(--window-color); pointer-events: none; }
.appearance-options button { border: 0; border-right: 1px solid var(--card-line); border-radius: 0;
  box-shadow: none; transform: none; background: transparent; color: var(--muted);
  font: 500 0.78rem system-ui; padding: 0.45rem 0.9rem; min-height: 34px; }
.appearance-options button:last-child { border-right: 0; }
.appearance-options button:hover { background: #bc9be61a; transform: none; box-shadow: none; }
.appearance-options button[aria-pressed=true] { background: #bc9be626; color: var(--text);
  box-shadow: inset 0 -2px #b89adf; }
.appearance-options button:focus-visible { outline: 2px solid #e4d6f5; outline-offset: -3px; }
@media(min-width:860px) {
  .wrap.wide .play-area { height: calc(100vh - 13.5rem); }
  .wrap.wide .list-pair { padding-bottom: 0; }
  .wrap.wide .appearance-control { position: absolute; top: 100%; right: 0; margin: 0; }
}