:root {
  --bg: #0e1016;
  --card: #171a23;
  --card-2: #1f2330;
  --line: #2a2f3d;
  --text: #f4f4f8;
  --dim: #9097a8;
  --lime: #c6f76d;
  --violet: #b78cff;
  --pink: #ff6fae;
  --danger: #ff6b7a;
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  background:
    radial-gradient(900px 500px at 110% -10%, #3a2a6644, transparent 60%),
    radial-gradient(700px 400px at -20% 10%, #20403344, transparent 60%),
    var(--bg);
  min-height: 100vh;
}
main {
  max-width: 560px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
button:disabled { opacity: .45; cursor: default; }
.dim { color: var(--dim); font-size: 13px; line-height: 1.5; }
small { font: 600 10.5px/1.2 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; color: var(--dim); }

header { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.logo { font-weight: 800; font-size: 30px; letter-spacing: -2px; display: flex; align-items: center; gap: 6px; }
.logo i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); transition: transform .08s; }
.live ~ * .logo i, .logo i[data-beat="0"] { transform: scale(1.35); }
.chip { font-size: 13px; color: var(--dim); background: var(--card); padding: 6px 12px; border-radius: 99px; }
.chip:empty { display: none; }

.stage {
  position: relative;
  border-radius: 26px;
  padding: 20px 18px 16px;
  background: linear-gradient(140deg, #2b2547 0%, #1c2131 55%, #1d2b2a 100%);
  border: 1px solid #ffffff10;
  overflow: hidden;
  box-shadow: 0 20px 50px #0008;
}
.stage::after {
  content: ''; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 120%;
  background: radial-gradient(circle, #c6f76d22, transparent 60%); pointer-events: none; opacity: 0; transition: opacity .6s;
}
.stage.live::after { opacity: 1; }
.now small { color: var(--violet); }
.now h1 { margin: 8px 0 2px; font-size: 25px; letter-spacing: -.8px; line-height: 1.15; overflow-wrap: anywhere; }
.now p { margin: 0; color: #c9cbe0; font-size: 15px; min-height: 20px; overflow-wrap: anywhere; }
#viz { display: block; width: 100%; height: 92px; margin: 14px 0 10px; }
.bar { height: 4px; border-radius: 4px; background: #ffffff18; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--lime)); border-radius: 4px; }
.meta-row { display: flex; justify-content: space-between; margin-top: 8px; font: 600 12px ui-monospace, Menlo, monospace; color: #dfe3d0; }
.meta-row b { color: var(--lime); font-size: 14px; }
.up-next { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ffffff14; font-size: 14px; min-width: 0; }
.up-next small { color: var(--lime); flex: none; }
.up-next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9dbe8; }
.offline .now h1 { color: var(--dim); }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 16px 0 10px; padding: 5px; background: var(--card); border-radius: 18px; }
.seg button { background: transparent; border-radius: 14px; padding: 10px 8px; display: grid; gap: 2px; transition: background .2s; }
.seg button b { font-size: 15px; }
.seg button small { letter-spacing: .06em; font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--card-2); box-shadow: inset 0 0 0 1px #ffffff14; }
.seg button[data-mode="mix"][aria-pressed="true"] b { color: var(--lime); }
.seg button[data-mode="mash"][aria-pressed="true"] b { color: var(--pink); }

.switch { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #d3d6e4; margin: 8px 2px 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 42px; height: 26px; border-radius: 99px; background: #343a4a; position: relative; transition: background .2s; flex: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--lime); }
.switch input:checked + span::after { transform: translateX(16px); background: #18210a; }
.switch input:disabled + span { opacity: .4; }

.play {
  width: 100%; padding: 18px; border-radius: 18px; font-size: 17px; font-weight: 800; letter-spacing: -.2px;
  background: var(--lime); color: #142008; box-shadow: 0 10px 30px #c6f76d33; transition: transform .1s, background .2s;
}
.play:active { transform: scale(.98); }
.play.stop { background: #2a2f3d; color: var(--text); box-shadow: none; }
.status { min-height: 20px; margin: 10px 4px 0; font-size: 13.5px; color: #c0c4d4; line-height: 1.45; }

.lib { margin-top: 18px; }
.lib-head { display: flex; justify-content: space-between; align-items: center; }
.lib-head h2 { font-size: 21px; letter-spacing: -.6px; margin: 8px 0; }
.link { background: none; color: var(--lime); font-size: 13px; padding: 4px; }
.icon { background: var(--card); width: 32px; height: 32px; border-radius: 10px; font-size: 16px; }
ul { list-style: none; margin: 0; padding: 0; }
.track { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 14px; transition: background .15s; }
.track + .track { margin-top: 2px; }
.track:active { background: var(--card); }
.tick { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #3a4052; flex: none; position: relative; transition: all .15s; }
.track.on .tick { background: var(--lime); border-color: var(--lime); }
.track.on .tick::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #142008; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.meta { min-width: 0; flex: 1; }
.meta b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta small { display: block; margin-top: 3px; font: 13px -apple-system, system-ui, sans-serif; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpm { font: 600 11px ui-monospace, Menlo, monospace; color: var(--violet); white-space: nowrap; }
.del { background: none; color: #5d6476; width: 30px; height: 30px; border-radius: 9px; font-size: 13px; flex: none; }
.del:active { color: var(--danger); background: #ff6b7a1a; }
.track.now { background: linear-gradient(90deg, #c6f76d1f, transparent); }
.track.now .meta b { color: var(--lime); }
.track.next { background: linear-gradient(90deg, #b78cff1a, transparent); }

.empty { text-align: center; padding: 26px 18px; border-radius: 22px; background: var(--card); border: 1px dashed #343a4a; }
.empty p { color: #c4c7d6; line-height: 1.5; font-size: 14px; }
.disc { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, var(--bg) 0 14%, #2c3242 15% 44%, #3a4256 45% 47%, #2c3242 48% 100%); animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ghost { background: var(--card-2); border-radius: 12px; padding: 11px 16px; font-size: 14px; font-weight: 600; }

.lights { margin-top: 22px; background: var(--card); border-radius: 20px; padding: 4px 16px; }
.lights summary { padding: 14px 0; font-weight: 700; cursor: pointer; list-style: none; }
.lights summary::-webkit-details-marker { display: none; }
.lights[open] { padding-bottom: 16px; }
.lights input[type=url], .lights input[type=password], .lights select {
  width: 100%; margin: 6px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #11141b;
}
.lights code { font-size: 12px; color: #dfe3d0; }
.row { display: flex; gap: 8px; margin: 6px 0; }
.row .ghost { flex: 1; }
.lamp { display: flex; gap: 10px; align-items: center; padding: 8px 2px; font-size: 14px; }
.lamp input { accent-color: #c6f76d; width: 18px; height: 18px; }
footer { text-align: center; margin-top: 28px; }