/* Shared finish tokens drive both the real player and the miniature previews. */
:where(.radio-layout, .skin-option) {
  --chassis: linear-gradient(105deg, #bbc2b3, #a9b3a4 44%, #c1c5b5);
  --chassis-ink: #131b17;
  --chassis-muted: #44563b;
  --chassis-edge: #e3e4ce;
  --screen: #13211c;
  --screen-ink: #e0eab7;
  --screen-muted: #a7b789;
  --screen-edge: #586653;
  --player-accent: var(--accent);
  --control-accent: #35472e;
  --button: linear-gradient(#d4d8c8, #aab5a2);
  --button-ink: #1a2c20;
  --play-button: linear-gradient(#e8eab9, #c1cd8d);
  --play-ink: #1a2c20;
  --spectrum-low: #82a650;
  --spectrum-mid: #bdd269;
  --panel-radius: 0px;
  --control-radius: 0px;
  --panel-shadow: 5px 5px 0 #0a110e;
}
[data-skin="midnight"] {
  --chassis: linear-gradient(135deg, #27394d, #101c2e 65%, #25334a);
  --chassis-ink: #e0ecf9;
  --chassis-muted: #adbed6;
  --chassis-edge: #516786;
  --screen: #07131f;
  --screen-ink: #ddf8ff;
  --screen-muted: #9cbcd0;
  --screen-edge: #344e69;
  --player-accent: #72e3ff;
  --control-accent: #72e3ff;
  --button: linear-gradient(#3b526e, #263a52);
  --button-ink: #edf6ff;
  --play-button: linear-gradient(#a7eeff, #65c5e8);
  --play-ink: #102b40;
  --spectrum-low: #468eb4;
  --spectrum-mid: #96cfff;
  --panel-radius: 10px;
  --control-radius: 4px;
  --panel-shadow: 0 12px 30px #030a1690, inset 0 1px 0 #ffffff18;
}
[data-skin="tokyo"] {
  --chassis: repeating-linear-gradient(135deg, #ea5bff08 0 1px, transparent 1px 9px), #27152f;
  --chassis-ink: #ffe0fb;
  --chassis-muted: #d9abda;
  --chassis-edge: #e567d8;
  --screen: #170d23;
  --screen-ink: #ffdcfa;
  --screen-muted: #d0a4d5;
  --screen-edge: #884881;
  --player-accent: #ff83d8;
  --control-accent: #74f5e5;
  --button: linear-gradient(#56315b, #34213e);
  --button-ink: #ffe5fb;
  --play-button: #f989d8;
  --play-ink: #32152f;
  --spectrum-low: #6ed8d4;
  --spectrum-mid: #b9a5ff;
  --panel-radius: 3px;
  --control-radius: 3px;
  --panel-shadow: 4px 4px 0 #100c22, 0 0 24px #e64dbe20;
}
[data-skin="amber"] {
  --chassis: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px), #25221c;
  --chassis-ink: #f6cf8b;
  --chassis-muted: #ceb789;
  --chassis-edge: #84704c;
  --screen: #17130a;
  --screen-ink: #ffdb94;
  --screen-muted: #c3a369;
  --screen-edge: #605136;
  --player-accent: #ffc05b;
  --control-accent: #ffc05b;
  --button: linear-gradient(#4e4432, #302b20);
  --button-ink: #ffe2a4;
  --play-button: #eeb858;
  --play-ink: #211b0f;
  --spectrum-low: #a47a30;
  --spectrum-mid: #ddb45c;
  --panel-shadow: 5px 5px 0 #0d0b07;
}
[data-skin="arctic"] {
  --chassis: linear-gradient(130deg, #f7fbff, #c7d8e6 55%, #e9f2f9);
  --chassis-ink: #18334c;
  --chassis-muted: #3d5970;
  --chassis-edge: #f6fcff;
  --screen: #e4f3fa;
  --screen-ink: #16364d;
  --screen-muted: #45637b;
  --screen-edge: #92aec3;
  --player-accent: #086484;
  --control-accent: #246681;
  --button: linear-gradient(#ffffff, #c4d6e5);
  --button-ink: #18334c;
  --play-button: linear-gradient(#377895, #1b526d);
  --play-ink: #f3fcff;
  --spectrum-low: #91b9cc;
  --spectrum-mid: #4a849f;
  --panel-radius: 18px;
  --control-radius: 7px;
  --panel-shadow: 0 9px 25px #0005, inset 0 1px 0 #fff;
}
[data-skin="rose"] {
  --chassis: linear-gradient(120deg, #ebcbd0, #d9acb7 60%, #f1d7db);
  --chassis-ink: #4d2636;
  --chassis-muted: #6b3c4e;
  --chassis-edge: #ffe5e9;
  --screen: #39202f;
  --screen-ink: #ffe4ec;
  --screen-muted: #d6afc1;
  --screen-edge: #9c6e7f;
  --player-accent: #ffaacb;
  --control-accent: #6e3651;
  --button: linear-gradient(#fbe4e9, #c993a5);
  --button-ink: #4d2636;
  --play-button: #643448;
  --play-ink: #ffe5ef;
  --spectrum-low: #ad698a;
  --spectrum-mid: #dc91b2;
  --panel-radius: 14px;
  --control-radius: 12px;
  --panel-shadow: 0 9px 25px #10000d66, inset 0 1px 0 #fff6;
}
[data-skin="cobalt"] {
  --chassis: linear-gradient(110deg, #254bd0, #16329a);
  --chassis-ink: #f1f3ff;
  --chassis-muted: #d3dcff;
  --chassis-edge: #869ef9;
  --screen: #0b1745;
  --screen-ink: #f3f4c7;
  --screen-muted: #b4bfe3;
  --screen-edge: #5478e6;
  --player-accent: #edff83;
  --control-accent: #edff83;
  --button: #3257d2;
  --button-ink: #fff;
  --play-button: #edff83;
  --play-ink: #17254f;
  --spectrum-low: #648af6;
  --spectrum-mid: #c3daff;
  --panel-shadow: 5px 5px 0 #09143a;
}
[data-skin="solar"] {
  --chassis: linear-gradient(115deg, #eea15d, #d77e42 65%, #e89653);
  --chassis-ink: #392419;
  --chassis-muted: #583220;
  --chassis-edge: #ffc18b;
  --screen: #fff0cc;
  --screen-ink: #4e3027;
  --screen-muted: #795239;
  --screen-edge: #8c4d2e;
  --player-accent: #9c381b;
  --control-accent: #593425;
  --button: linear-gradient(#f5ddab, #dbba80);
  --button-ink: #4b3227;
  --play-button: #59382c;
  --play-ink: #fff0cc;
  --spectrum-low: #d1a063;
  --spectrum-mid: #b76a35;
  --panel-radius: 22px;
  --control-radius: 16px;
  --panel-shadow: 5px 6px 0 #45281c;
}
[data-skin="forest"] {
  --chassis: repeating-linear-gradient(0deg, #bdecb207 0 1px, transparent 1px 4px), linear-gradient(120deg, #3b4b38, #273d32);
  --chassis-ink: #f3e2b2;
  --chassis-muted: #d1c9a8;
  --chassis-edge: #8f7950;
  --screen: #11261f;
  --screen-ink: #efe7b4;
  --screen-muted: #b3c6a1;
  --screen-edge: #758164;
  --player-accent: #ebc974;
  --control-accent: #ebc974;
  --button: linear-gradient(#716749, #4c4c36);
  --button-ink: #fff0bb;
  --play-button: linear-gradient(#e8cf8c, #b79c59);
  --play-ink: #26382c;
  --spectrum-low: #72986d;
  --spectrum-mid: #b3cb83;
  --panel-radius: 5px;
  --control-radius: 3px;
  --panel-shadow: 5px 6px 0 #100f09, inset 7px 0 #785033, inset -7px 0 #785033;
}
[data-skin="blueprint"] {
  --chassis: linear-gradient(#a6d8ff14 1px, transparent 1px), linear-gradient(90deg, #a6d8ff14 1px, transparent 1px), #194469;
  --chassis-ink: #e1f2ff;
  --chassis-muted: #bbd8ef;
  --chassis-edge: #a7d5f9;
  --screen: #103452;
  --screen-ink: #e1f4ff;
  --screen-muted: #accde4;
  --screen-edge: #80b6df;
  --player-accent: #b6e4ff;
  --control-accent: #e0f3ff;
  --button: #194469;
  --button-ink: #e1f2ff;
  --play-button: #d5ecff;
  --play-ink: #194469;
  --spectrum-low: #6a9bc0;
  --spectrum-mid: #99c4e5;
  --panel-shadow: 5px 5px 0 #0a263e;
}
[data-skin="mono"] {
  --chassis: #e9e9e5;
  --chassis-ink: #161616;
  --chassis-muted: #41413e;
  --chassis-edge: #fff;
  --screen: #141414;
  --screen-ink: #f6f6f0;
  --screen-muted: #b5b5af;
  --screen-edge: #545452;
  --player-accent: #fff;
  --control-accent: #141414;
  --button: #f8f8f3;
  --button-ink: #141414;
  --play-button: #141414;
  --play-ink: #fff;
  --spectrum-low: #777;
  --spectrum-mid: #b6b6b0;
  --panel-shadow: 6px 6px 0 #050505;
}

/* Receiver and queue: no audio or track state is involved in a skin change. */
.radio-layout {
  padding-top: 0;
}
.receiver.metal-panel {
  background: var(--chassis);
  color: var(--chassis-ink);
  border-color: var(--chassis-edge);
  border-bottom-color: var(--screen-edge);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
[data-skin="blueprint"] :is(.receiver, .skin-preview) {
  background-size: 18px 18px;
}
.receiver :is(button, input, a):focus-visible {
  outline-color: var(--chassis-ink);
}
.receiver :is(.screw, .tape-mark, .player-message) {
  color: var(--chassis-muted);
}
.receiver :is(.transport, .receiver-bottom) {
  border-color: color-mix(in srgb, var(--chassis-ink) 30%, transparent);
}
.receiver .display {
  background: var(--screen);
  color: var(--screen-ink);
  border-color: var(--screen-edge);
  outline-color: var(--chassis-edge);
  border-radius: var(--control-radius);
  box-shadow: inset 0 0 30px #00000018;
}
.receiver :is(.display-meta, .on-air-label, .track-credit, .spectrum-labels) {
  color: var(--screen-muted);
}
.receiver :is(.track-display h1, .display-bottom) {
  color: var(--screen-ink);
}
.receiver .track-display h1 {
  text-shadow: 0 0 12px color-mix(in srgb, var(--player-accent) 16%, transparent);
}
.receiver :is(.display-meta > span:first-child, .now-art, #elapsed) {
  color: var(--player-accent);
}
.receiver .spectrum-wrap {
  border-color: color-mix(in srgb, var(--screen-ink) 12%, transparent);
}
.receiver input[type="range"] {
  accent-color: var(--control-accent);
}
.receiver .hardware {
  background: var(--button);
  color: var(--button-ink);
  border-color: var(--screen-edge);
  border-top-color: var(--chassis-edge);
  border-left-color: var(--chassis-edge);
  border-radius: var(--control-radius);
  box-shadow: 1px 2px 0 var(--screen-edge);
}
.receiver .hardware:active {
  box-shadow: none;
}
.receiver .play-button {
  background: var(--play-button);
  color: var(--play-ink);
}
.receiver .small-hardware[aria-pressed="true"] {
  background: var(--screen);
  color: var(--player-accent);
  border-color: var(--control-accent);
}
.receiver .tiny-led {
  background: var(--control-accent);
  box-shadow: none;
}
.receiver .panel-top .tiny-led {
  background: var(--chassis-muted);
  opacity: .45;
}
.receiver .panel-top [aria-pressed="true"] .tiny-led {
  background: var(--control-accent);
  box-shadow: 0 0 5px var(--control-accent);
  opacity: 1;
}
.radio-layout .queue-panel {
  background: var(--screen);
  color: var(--screen-ink);
  border-color: var(--screen-edge);
  border-radius: var(--panel-radius);
  overflow: hidden;
}
.queue-panel :is(button, input):focus-visible {
  outline-color: var(--player-accent);
}
.radio-layout :is(.queue-heading, .queue-tabs, .search-wrap, .queue-footer) {
  border-color: var(--screen-edge);
}
.radio-layout .queue-heading {
  background: color-mix(in srgb, var(--screen-ink) 9%, var(--screen));
}
.radio-layout :is(.queue-heading h2, .search-wrap input, .track-row.active .row-title) {
  color: var(--screen-ink);
}
.radio-layout :is(.queue-heading > span, .queue-tabs button, .row-number, .row-duration, .save-track, .queue-footer, .queue-empty) {
  color: var(--screen-muted);
}
.radio-layout .search-wrap input::placeholder {
  color: var(--screen-muted);
}
.radio-layout .search-wrap {
  background: var(--screen);
}
.radio-layout .search-wrap svg {
  stroke: var(--screen-muted);
}
.radio-layout :is(.queue-tabs button[aria-pressed="true"], .track-row.active) {
  background: color-mix(in srgb, var(--player-accent) 15%, var(--screen));
  color: var(--screen-ink);
}
.radio-layout :is(.queue-tabs span, .save-track[aria-pressed="true"]) {
  color: var(--player-accent);
}
.radio-layout .track-row {
  border-color: color-mix(in srgb, var(--screen-ink) 10%, transparent);
}
.radio-layout .track-row > button:first-child {
  color: var(--screen-ink);
}
.radio-layout .track-row:hover {
  background: color-mix(in srgb, var(--screen-ink) 8%, var(--screen));
}
.radio-layout .track-list {
  scrollbar-color: var(--screen-edge) var(--screen);
}

/* The collection stays neutral so every finish can be compared side by side. */
.player-stylebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 12px;
}
.player-stylebar p {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stylebar-label {
  font: 9px Mono, monospace;
  letter-spacing: 1px;
  color: var(--lime);
}
.stylebar-note {
  font-size: 12px;
  color: var(--muted);
}
#skins-open {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--line);
  background: #202a27;
  font: 10px Mono, monospace;
}
#skins-open:hover {
  border-color: var(--lime);
  background: #2a352e;
}
#skins-open svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.3;
}
#skins-open > span > span[aria-hidden] {
  margin: 0 6px;
  color: var(--muted);
}
#skin-name {
  color: var(--lime);
}
#skins-dialog {
  width: min(960px, calc(100% - 32px));
  max-width: 960px;
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line);
}
#skins-dialog .dialog-title {
  position: sticky;
  top: 0;
  z-index: 2;
}
#skins-dialog .dialog-body > h3 {
  font-size: clamp(28px, 4vw, 40px);
}
#skins-dialog .eyebrow {
  color: var(--muted);
}
#skins-dialog .dialog-body > p:not(.eyebrow) {
  max-width: 620px;
  margin-bottom: 24px;
}
.skin-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.skin-option {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 9px;
  background: #151c1b;
  border: 1px solid #455047;
  cursor: pointer;
  min-width: 0;
}
.skin-option:hover {
  border-color: #a1ac90;
}
.skin-option:has(input:checked) {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px var(--lime);
  background: #283024;
}
.skin-option:has(input:focus-visible) {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}
.skin-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  inset: 0 auto auto 0;
}
.skin-preview {
  display: block;
  background: var(--chassis);
  color: var(--chassis-ink);
  padding: 10px 12px;
  border: 1px solid var(--chassis-edge);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  margin: 0 4px 9px 0;
}
.skin-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font: 6px Mono, monospace;
  margin-bottom: 7px;
  letter-spacing: .5px;
}
.skin-mini-screen {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--screen);
  color: var(--screen-ink);
  border: 2px solid var(--screen-edge);
  border-radius: var(--control-radius);
  height: 48px;
  padding: 6px 8px;
  font: 24px/1 Terminal, monospace;
}
.skin-mini-bars {
  flex: 1;
  height: 24px;
  background: repeating-linear-gradient(90deg, transparent 0 3px, var(--screen) 3px 5px), linear-gradient(to right, var(--spectrum-low), var(--player-accent));
  clip-path: polygon(0 70%, 12% 70%, 12% 40%, 24% 40%, 24% 10%, 36% 10%, 36% 30%, 48% 30%, 48% 0, 60% 0, 60% 50%, 72% 50%, 72% 35%, 84% 35%, 84% 65%, 100% 65%, 100% 100%, 0 100%);
}
.skin-mini-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
}
.skin-mini-controls i {
  display: block;
  height: 11px;
  width: 19px;
  border: 1px solid var(--screen-edge);
  background: var(--button);
  border-radius: min(var(--control-radius), 4px);
}
.skin-mini-controls i:nth-child(2) {
  width: 29px;
  background: var(--play-button);
}
.skin-mini-controls > span {
  width: 30%;
  height: 3px;
  margin-left: auto;
  background: var(--control-accent);
}
.skin-option-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font: bold 14px/1.3 Chakra, sans-serif;
  padding-top: 5px;
  color: var(--ink);
}
.skin-check {
  color: var(--lime);
  visibility: hidden;
}
.skin-option:has(input:checked) .skin-check {
  visibility: visible;
}
.skin-description {
  display: block;
  font: 10px/1.5 Chakra, sans-serif;
  color: #b0bba9;
  margin-top: 4px;
}
.skin-dialog-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 16px;
  font: 10px/1.6 Mono, monospace;
  color: var(--muted);
}
#skin-status {
  color: var(--lime);
}
@media (max-width: 900px) {
  .player-stylebar p {
    flex-direction: column;
    align-items: start;
    gap: 3px;
  }
}
@media (max-width: 600px) {
  .skin-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #skins-dialog .dialog-body {
    padding: 22px 16px;
  }
  .skin-mini-top {
    letter-spacing: 0;
  }
  .skin-mini-top > span:last-child {
    display: none;
  }
  .skin-preview {
    padding: 8px;
  }
  .skin-mini-screen {
    font-size: 22px;
    padding: 4px;
    gap: 5px;
  }
  .skin-option-title {
    font-size: 12px;
  }
  .skin-description {
    font-size: 10px;
  }
}
@media (max-width: 460px) {
  .player-stylebar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding-top: 14px;
  }
  .player-stylebar p {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .stylebar-label {
    font-size: 8px;
  }
  .stylebar-note {
    font-size: 10px;
  }
  #skins-open > span:last-child {
    margin-left: auto;
  }
  .skin-dialog-footer {
    flex-direction: column;
    gap: 4px;
  }
}
@media (max-width: 350px) {
  .skin-options {
    grid-template-columns: 1fr;
  }
}