*,
*::before,
*::after { box-sizing: border-box; }

html {
  color-scheme: light;
  --desk: #8d8d8d;
  --ink: #1c1c1c;
  --metal-a: #fbfbfb;
  --metal-b: #d5d5d5;
  --metal-c: #b4b4b4;
  --metal-d: #8f8f8f;
  --hi: #ffffff;
  --lo: #5c5c5c;
  --lcd-bg: #071833;
  --lcd-bg-2: #12315f;
  --lcd-ink: #d7e6ff;
  --pl-bg: #071833;
  --pl-ink: #d5e4f8;
  --pl-line: rgba(255, 255, 255, 0.08);
  --pl-on: #2a6cb3;
  --field: #f4f4f4;
  --danger: #8d2014;
  --font: "Segoe UI", Tahoma, sans-serif;
  --lcd-font: "Segoe UI", Tahoma, sans-serif;
}

html[data-skin="tokyo"] {
  color-scheme: dark;
  --desk: #140816;
  --ink: #f6f2ff;
  --metal-a: #6a3d78;
  --metal-b: #3a2048;
  --metal-c: #241428;
  --metal-d: #120810;
  --hi: #ff8ae4;
  --lo: #07040c;
  --lcd-bg: #05010e;
  --lcd-bg-2: #2a1040;
  --lcd-ink: #b8fff8;
  --pl-bg: #090612;
  --pl-ink: #e9fbff;
  --pl-on: #6a1878;
  --field: #1a1024;
  --danger: #ff7aa8;
}

html[data-skin="acid"] {
  color-scheme: dark;
  --desk: #1a1a1a;
  --ink: #e8ffe0;
  --metal-a: #ececec;
  --metal-b: #bdbdbd;
  --metal-c: #8e8e8e;
  --metal-d: #5e5e5e;
  --hi: #ffffff;
  --lo: #333;
  --lcd-bg: #041407;
  --lcd-bg-2: #0c2c12;
  --lcd-ink: #8dff57;
  --pl-bg: #101810;
  --pl-ink: #e7ffd8;
  --pl-on: #1d5a28;
  --field: #101610;
  --danger: #c45512;
  --font: ui-monospace, Menlo, Consolas, monospace;
  --lcd-font: ui-monospace, Menlo, Consolas, monospace;
}

html[data-skin="hotline"] {
  color-scheme: dark;
  --desk: #2a1408;
  --ink: #fff4e4;
  --metal-a: #e0a060;
  --metal-b: #a86830;
  --metal-c: #6a3814;
  --metal-d: #3a1c08;
  --hi: #ffd7a0;
  --lo: #1a0c04;
  --lcd-bg: #2a1200;
  --lcd-bg-2: #5a3010;
  --lcd-ink: #ffd27a;
  --pl-bg: #1a0e06;
  --pl-ink: #ffe7c4;
  --pl-on: #8a4010;
  --field: #2a1608;
  --danger: #ff5a36;
}

html[data-skin="violet"] {
  color-scheme: dark;
  --desk: #140c22;
  --ink: #f4eeff;
  --metal-a: #b4a4e0;
  --metal-b: #6e58a8;
  --metal-c: #3a2870;
  --metal-d: #1a1030;
  --hi: #e4d8ff;
  --lo: #0c0818;
  --lcd-bg: #120824;
  --lcd-bg-2: #2c1860;
  --lcd-ink: #e4d4ff;
  --pl-bg: #12081f;
  --pl-ink: #efe6ff;
  --pl-on: #4a3090;
  --field: #221838;
  --danger: #ff6ea8;
}

html, body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font);
}

button, input, select, a { font: inherit; color: inherit; }

.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

body.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.login, .skin-panel, .win, .sheet, .menu-pop {
  background: linear-gradient(180deg, var(--metal-a) 0%, var(--metal-b) 42%, var(--metal-c) 100%);
  color: var(--ink);
  border: 1px solid var(--hi);
  border-radius: 8px;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), 0 2px 0 var(--lo), 0 10px 18px rgba(0, 0, 0, 0.28);
}

.login {
  width: min(420px, calc(100vw - 12px));
  display: grid;
  gap: 10px;
  padding: 14px;
}

.login h1 { margin: 0; font-size: 22px; text-shadow: 0 1px 0 var(--hi); }
.brand { margin: 0; letter-spacing: 0.16em; font-size: 12px; font-weight: 700; }

.people { margin: 0; padding: 8px; border: 1px solid var(--lo); border-radius: 6px; display: grid; gap: 8px; }
.person, .go, .skins-launch, .skin-panel button, .sheet button, .menu-pop button, .retry {
  min-height: 44px;
  min-width: 44px;
  border-radius: 8px;
  border: 1px solid var(--lo);
  background: linear-gradient(180deg, var(--metal-a), var(--metal-c));
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 0 var(--lo);
}
.person { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.person:has(input:checked) { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.field { display: grid; gap: 6px; }
.field input, .login input[type="password"] {
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid var(--lo);
  background: var(--field);
  padding: 8px;
}
.skin-panel { display: grid; gap: 8px; padding: 10px; }
body.gate .skin-panel { width: min(420px, calc(100vw - 12px)); margin-top: 12px; }
.skin-panel button.is-on { outline: 2px solid var(--lcd-bg-2); }
.skin-silver { background: linear-gradient(#f7f7f7, #b5b5b5); color: #222; }
.skin-tokyo { background: #1a1028; color: #9fffff; }
.skin-acid { background: #101810; color: #8dff57; }
.skin-hotline { background: #3a1c08; color: #ffd27a; }
.skin-violet { background: #241448; color: #eadcff; }
.error { margin: 0; color: var(--danger); }

body.player {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}

.stage {
  width: 100%;
  max-width: 420px;
  height: 100%;
  min-height: 0;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.win { min-width: 0; }

.playlist.win {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.chrome-bar, .chrome-sub, .menu-strip, .eq-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chrome-bar {
  min-height: 28px;
  padding: 5px 8px 4px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--metal-a), var(--metal-b) 55%, var(--metal-c));
  box-shadow: inset 0 1px 0 var(--hi), inset 0 -1px 0 var(--lo);
}

.win-title, .engraved, .sheet-title {
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 1px 0 var(--hi);
}

.win-title { flex: 1; min-width: 0; }

.dots { display: flex; gap: 4px; flex: none; }
.dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--hi), var(--metal-b) 42%, var(--metal-d));
  box-shadow: inset 0 0 0 1px var(--lo), 0 1px 0 var(--hi);
}

.chrome-sub { padding: 4px 8px 6px; }
.lib-switch { display: flex; gap: 4px; min-width: 0; }
.lib-switch button, .logout, .menu-tab, .eq-head button, .oval, .round {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--lo);
  color: var(--ink);
  background: linear-gradient(180deg, var(--metal-a), var(--metal-c));
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 0 var(--lo);
}
.lib-switch button, .logout {
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lib-switch button.is-on, .round.is-on {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, var(--metal-c), var(--metal-d));
}
#scopeShared.is-drop-ready {
  outline: 2px dashed var(--pl-on);
  outline-offset: 1px;
}
#scopeShared.is-hot {
  background: var(--pl-on);
  color: #fff;
  transform: translateY(-1px);
}
.who {
  margin: 0 0 0 auto;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-count { font-size: 12px; flex: none; }

.menu-strip { position: relative; padding: 0 6px 6px; }
.menu-tab {
  flex: 1 1 0;
  border-radius: 4px;
  font-size: 13px;
  padding: 0 4px;
}
.menu-pop, .sheet {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 6px;
  padding: 8px;
  min-width: 168px;
}
.menu-pop { top: 78px; left: 8px; }
#menuHelpPop { left: auto; right: 8px; max-width: 240px; }
.help-copy { margin: 0; font-size: 14px; }
.menu-pop button, .sheet button { text-align: left; padding: 0 10px; }
.sheet {
  left: 8px;
  right: 8px;
  bottom: 58px;
  top: auto;
}
.sheet input, .sheet select, .pl-tools input, .pl-tools select {
  min-height: 44px;
  width: 100%;
  min-width: 0;
  border-radius: 6px;
  border: 1px solid var(--lo);
  background: var(--field);
  color: var(--ink);
  padding: 6px 8px;
}

.lcd {
  margin: 0 8px 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "clock copy viz" "seek seek seek";
  gap: 4px 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--lcd-bg-2), var(--lcd-bg) 55%);
  color: var(--lcd-ink);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55), 0 1px 0 var(--hi);
  font-family: var(--lcd-font);
}
.lcd-readout { grid-area: clock; }
.lcd-copy { grid-area: copy; min-width: 0; }
.viz { grid-area: viz; align-self: end; }
.seek-row { grid-area: seek; }
.lcd-clock, .now-title, .now-artist, .place, .player-note, .lcd-khz { margin: 0; }
.lcd-clock { font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.lcd-khz { font-size: 10px; letter-spacing: 0.08em; opacity: 0.8; }
.now-title { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.now-artist, .place, .player-note { font-size: 13px; overflow-wrap: anywhere; }
.now-artist:empty, .place:empty, .player-note:empty, .note:empty, .status:empty { display: none; }
.viz { width: 42px; height: 28px; display: flex; align-items: flex-end; gap: 2px; }
.viz span { flex: 1; align-self: flex-end; background: var(--lcd-ink); height: 8%; opacity: 0.9; }
.viz span.lv0 { height: 8%; }
.viz span.lv1 { height: 14%; }
.viz span.lv2 { height: 22%; }
.viz span.lv3 { height: 30%; }
.viz span.lv4 { height: 38%; }
.viz span.lv5 { height: 46%; }
.viz span.lv6 { height: 54%; }
.viz span.lv7 { height: 62%; }
.viz span.lv8 { height: 70%; }
.viz span.lv9 { height: 78%; }
.viz span.lv10 { height: 86%; }
.viz span.lv11 { height: 93%; }
.viz span.lv12 { height: 100%; }
.seek-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.time { font-variant-numeric: tabular-nums; font-size: 12px; }
.seek { flex: 1; min-width: 0; height: 28px; accent-color: var(--lcd-ink); }

.transport {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 8px 8px;
}
.round {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 16px;
  background: radial-gradient(circle at 35% 30%, var(--hi), var(--metal-b) 40%, var(--metal-d));
}
.round:disabled { opacity: 0.45; }

.equalizer { padding: 0 8px 4px; }
.eq-head { min-height: 44px; padding: 0; }
.engraved { flex: 1; text-align: left; }
.eq-fold {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
}
.eq-fold span { display: inline-block; }
html[data-eq="closed"] .eq-fold span { transform: rotate(-90deg); }
.eq-tools { display: flex; align-items: center; gap: 6px; padding: 0 0 4px; }
.eq-tools button { border-radius: 999px; padding: 0 10px; font-size: 11px; letter-spacing: 0.08em; min-height: 44px; min-width: 44px; }
.eq-panel {
  max-height: 200px;
  overflow: hidden;
  transition: max-height 180ms ease;
}
html[data-eq="closed"] .eq-panel { max-height: 0; }
html[data-eq="closed"] .equalizer { padding-bottom: 0; }
.eq-preset-name { margin: 0; font-size: 11px; min-width: 42px; }
.eq-body { display: flex; gap: 4px; align-items: stretch; height: 132px; }
.eq-scale {
  width: 28px;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--lo);
  text-shadow: 0 1px 0 var(--hi);
  padding: 8px 0 18px;
}
.eq-bank { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 2px; }
.eq-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  position: relative;
}
.eq-col span { font-size: 9px; letter-spacing: 0; line-height: 1; }
.fader {
  width: 108px;
  height: 22px;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) rotate(-90deg);
  accent-color: var(--metal-d);
  background: transparent;
}

.pl-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 4px;
  padding: 6px 8px;
}
.list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 8px;
  overflow: auto;
  background: var(--pl-bg);
  color: var(--pl-ink);
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55);
}
.list-wrap::-webkit-scrollbar { width: 14px; }
.list-wrap::-webkit-scrollbar-track { background: #041026; }
.list-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--metal-a), var(--metal-d));
  border-radius: 8px;
  border: 3px solid #041026;
}
.list { display: flex; flex-direction: column; }
.song {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  text-align: left;
  color: var(--pl-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pl-line);
  border-radius: 0;
  user-select: none;
  touch-action: pan-y;
}
.song-title { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.song-time { flex: none; font-variant-numeric: tabular-nums; font-size: 13px; opacity: 0.85; }
.song.is-current { background: var(--pl-on); color: #fff; }
.song.is-lifting { outline: 2px solid #fff; }
body.is-share-drag .song { touch-action: none; }
.status, .empty, .note { margin: 6px 8px; font-size: 14px; }
.pl-ovals {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px 6px 6px;
}
.oval {
  flex: 1 1 0;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.oval .ico {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oval .ico-fill {
  fill: currentColor;
  stroke: none;
}
.oval:disabled { opacity: 0.4; }
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.player-audio { display: none; }
body.player .skin-panel {
  position: absolute;
  z-index: 7;
  left: 8px;
  right: 8px;
  top: 86px;
}

@media (max-width: 380px) {
  .lcd { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "clock viz" "copy copy" "seek seek"; }
  .lcd-clock { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .eq-panel { transition: none; }
}