/* Private Radio — retro "desktop media player" skin */
@font-face { font-family: "VT323"; font-display: swap; src: url(/static/fonts/vt323-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "VT323"; font-display: swap; src: url(/static/fonts/vt323-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --metal-hi: #4a4d5e;
  --metal: #2c2e3a;
  --metal-lo: #1b1c25;
  --edge-hi: #7b7f96;
  --edge-lo: #0c0c12;
  --gold: #d9b45a;
  --gold-dim: #8a7136;
  --lcd: #000;
  --green: #00e64d;
  --green-dim: #0b6d2b;
  --amber: #ffcc33;
  --red: #ff3b3b;
  --text: #d6d9e4;
  --muted: #8e93a8;
  --lcd-font: "VT323", "Lucida Console", ui-monospace, monospace;
  --ui-font: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: #101018; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 12px/1.4 var(--ui-font);
  background:
    radial-gradient(ellipse at top, rgba(90, 100, 160, .18), transparent 60%),
    repeating-linear-gradient(45deg, #13131c 0 2px, #16161f 2px 4px);
}
a { color: var(--amber); }
.desk { max-width: 980px; margin: 0 auto; padding: 28px 14px 60px; }
.desk.narrow { max-width: 420px; }
.cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }
.stack > .win + .win { margin-top: 14px; }

/* ---------- window chrome ---------- */
.win {
  background: linear-gradient(180deg, var(--metal-hi) 0%, var(--metal) 45%, var(--metal-lo) 100%);
  border: 1px solid var(--edge-lo);
  box-shadow: inset 1px 1px 0 var(--edge-hi), inset -1px -1px 0 #000, 0 12px 30px rgba(0, 0, 0, .55);
  border-radius: 3px;
  padding: 0 8px 10px;
}
.titlebar {
  display: flex; align-items: center; gap: 8px; height: 20px; margin: 0 -8px 8px; padding: 0 6px;
  user-select: none;
}
.titlebar::before, .titlebar::after {
  content: ""; flex: 1; height: 8px;
  background: repeating-linear-gradient(180deg, var(--gold) 0 1px, transparent 1px 3px);
  opacity: .85;
}
.titlebar .t {
  order: 0; color: var(--gold); font: bold 10px/1 var(--ui-font); letter-spacing: .25em; text-transform: uppercase;
  text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%;
}
.titlebar .knobs { order: 2; display: flex; gap: 3px; }
.titlebar .knobs i {
  display: block; width: 9px; height: 9px; border: 1px solid #000;
  background: linear-gradient(180deg, #c9ccd8, #6f7385); box-shadow: inset 1px 1px 0 #fff6;
}
.titlebar::after { order: 1; }

/* ---------- LCD ---------- */
.lcd {
  background: var(--lcd); color: var(--green); font-family: var(--lcd-font); font-size: 20px; line-height: 1.1;
  border: 1px solid #000; box-shadow: inset 1px 1px 0 #000, 0 0 0 1px var(--edge-lo), 1px 1px 0 1px #5a5e72;
  text-shadow: 0 0 6px rgba(0, 230, 77, .55); padding: 6px 8px; border-radius: 2px;
}
.lcd .dim { color: var(--green-dim); text-shadow: none; }
.lcd .amber { color: var(--amber); text-shadow: 0 0 6px rgba(255, 204, 51, .5); }
.lcd .red { color: var(--red); text-shadow: 0 0 8px rgba(255, 59, 59, .7); }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.marquee { white-space: pre; overflow: hidden; color: var(--green); }
.big-time { font-size: 48px; white-space: nowrap; line-height: .9; letter-spacing: 2px; }
.kv { display: flex; gap: 10px; font-size: 16px; flex-wrap: wrap; }
.spectrum { display: block; width: 100%; height: 46px; background: #000; }

.display { display: grid; grid-template-columns: 120px 1fr; gap: 6px; }
.display .left { overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 92px; }
.display .right { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.status-row { display: flex; justify-content: space-between; font-size: 16px; }

/* ---------- controls ---------- */
button, .btn {
  font: bold 11px/1 var(--ui-font); color: #15161c; white-space: nowrap; cursor: pointer;
  padding: 6px 10px; border: 1px solid #000; border-radius: 2px;
  background: linear-gradient(180deg, #e3e5ec 0%, #b4b7c4 50%, #8c8fa0 100%);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #5c5f70;
}
button:hover { filter: brightness(1.08); }
button:active, button.on {
  background: linear-gradient(180deg, #8c8fa0, #b4b7c4); box-shadow: inset 1px 1px 0 #4a4c5a, inset -1px -1px 0 #e3e5ec;
}
button:disabled { opacity: .5; cursor: not-allowed; }
button.small { padding: 4px 8px; font-size: 10px; }
.transport { display: flex; gap: 4px; align-items: center; }
.transport button { width: 40px; height: 30px; padding: 0; font-size: 15px; }
.rec {
  width: 100%; height: 44px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #ff7a7a 0%, #d42424 55%, #8f0e0e 100%);
  box-shadow: inset 1px 1px 0 #ffb3b3, inset -1px -1px 0 #5a0000; text-shadow: 0 1px 0 #600;
}
.rec.on { background: linear-gradient(180deg, #5a0000, #b81c1c); box-shadow: inset 1px 1px 0 #300, inset -1px -1px 0 #ff8a8a; }

label, .lbl { display: block; font: bold 10px var(--ui-font); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin: 8px 0 4px; }
input, select {
  width: 100%; padding: 5px 7px; font: 18px/1.1 var(--lcd-font); color: var(--green); background: #000;
  border: 1px solid #000; box-shadow: inset 1px 1px 0 #000, 1px 1px 0 #5a5e72; border-radius: 1px;
}
input::placeholder { color: var(--green-dim); }
input:focus, select:focus { outline: 1px solid var(--gold); }
select option { background: #000; color: var(--green); }
.row { display: flex; gap: 5px; align-items: center; }
.row > input, .row > select { flex: 1; min-width: 0; }

/* retro slider */
input[type=range] { -webkit-appearance: none; appearance: none; height: 14px; padding: 0; background: transparent; box-shadow: none; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, #0a3d18, var(--green)); border: 1px solid #000; box-shadow: 1px 1px 0 #5a5e72; }
input[type=range]::-moz-range-track { height: 6px; background: linear-gradient(90deg, #0a3d18, var(--green)); border: 1px solid #000; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 12px; margin-top: -4px; border: 1px solid #000; border-radius: 1px;
  background: linear-gradient(180deg, #f0f1f6, #8c8fa0); box-shadow: inset 1px 1px 0 #fff;
}
input[type=range]::-moz-range-thumb { width: 14px; height: 12px; border: 1px solid #000; border-radius: 1px; background: linear-gradient(180deg, #f0f1f6, #8c8fa0); }
.slider { display: flex; align-items: center; gap: 8px; }
.slider .lbl { margin: 0; min-width: 44px; }

/* channel strips on the DJ deck */
.strip { margin-top: 8px; padding: 8px; border: 1px solid #000; box-shadow: inset 1px 1px 0 #555a70; background: rgba(0, 0, 0, .18); border-radius: 2px; }
.strip .head { display: flex; justify-content: space-between; align-items: center; }
.strip .name { font: bold 11px var(--ui-font); color: var(--gold); letter-spacing: .1em; text-transform: uppercase; }
.led { display: inline-flex; align-items: center; gap: 5px; font: 15px var(--lcd-font); color: var(--green-dim); }
.led::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1d3a24; border: 1px solid #000; }
.led.on { color: var(--green); }
.led.on::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.hint { color: var(--muted); font-size: 11px; margin: 6px 0 0; }

/* playlist-editor style list */
.plist { background: #000; border: 1px solid #000; box-shadow: 1px 1px 0 #5a5e72; padding: 4px 0; font-family: var(--lcd-font); }
.plist .item { padding: 3px 8px 5px; }
.plist .item + .item { border-top: 1px dashed #0f2c17; }
.plist .item .n { color: var(--green); font-size: 18px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.plist .item.sel { background: #0b2a8a; }
.plist .item.sel .n { color: #fff; }
.plist input { font-size: 15px; padding: 2px 4px; color: #6fbf86; margin-top: 3px; }
.plist a { color: var(--green); }
.footbar { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.tabs { display: flex; gap: 4px; }
.tabs button { flex: 1; }
.err { color: var(--red); font: 17px var(--lcd-font); min-height: 1.2em; margin-top: 6px; }
.note { color: var(--muted); font-size: 11px; text-align: center; margin-top: 14px; }
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 6px 14px;
  background: #000; color: var(--green); font: 18px var(--lcd-font); border: 1px solid var(--gold-dim);
  box-shadow: 0 6px 20px #000; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 9;
}
.toast.show { opacity: 1; }

/* ---------- DJ music player + playlist ---------- */
.seek { width: 100%; margin-top: 8px; }
.seek:disabled { opacity: .5; }
.plbox {
  height: 300px; overflow-y: auto; background: #000; border: 1px solid #000; box-shadow: 1px 1px 0 #5a5e72;
  font-family: var(--lcd-font); padding: 3px 0; outline: none; scrollbar-color: #5a5e72 #0a0a0f;
}
.plbox.drag { outline: 2px dashed var(--gold); outline-offset: -4px; }
.pli { display: flex; gap: 6px; padding: 0 8px; font-size: 18px; line-height: 1.3; color: var(--green); cursor: default; user-select: none; }
.pli .ix { color: var(--green-dim); min-width: 2.2em; text-align: right; }
.pli .tt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pli .du { color: var(--green); opacity: .85; }
.pli:hover { background: #07150c; }
.pli.sel { background: #0b2a8a; }
.pli.cur, .pli.cur .ix, .pli.cur .du { color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, .4); }
.plbox .empty { color: var(--green-dim); text-align: center; padding: 70px 10px; font-size: 20px; line-height: 1.3; }
.plbox .empty b { color: var(--green); font-weight: normal; }
label.check { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted); margin-top: 8px; }
label.check input { width: auto; accent-color: var(--green); }
.meter { height: 8px; margin-top: 8px; background: #000; border: 1px solid #000; box-shadow: 1px 1px 0 #5a5e72; overflow: hidden; }
.meter > div { height: 100%; width: 0; background: linear-gradient(90deg, #00b83f 0%, #c8e63c 65%, #ffb000 85%, #ff2a2a 100%); background-size: 260px 100%; transition: width 50ms linear; }