/* ===== pop-out player window ===== */
body.radio-popout { margin: 0; background: #1a1a1a; font-family: Tahoma, Verdana, sans-serif; -webkit-user-select: none; user-select: none; }
.wa { width: 100%; box-sizing: border-box; color: #c9d1c9; }
.wa-title {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(#3b4a6b, #1f2740); color: #cfe3ff; font-weight: 700; font-size: 12px;
  padding: 4px 8px; letter-spacing: .5px; border-bottom: 1px solid #000;
}
.wa-logo { text-shadow: 0 1px 0 #000; }
.wa-x { background: #2a3350; color: #cfe3ff; border: 1px solid #11161f; width: 18px; height: 16px; line-height: 12px; font-size: 13px; cursor: pointer; border-radius: 2px; padding: 0; }
.wa-x:hover { background: #c0392b; color: #fff; }

.wa-screen { background: #0a0f0a; padding: 6px; border-bottom: 1px solid #000; }
.wa-vis { display: block; width: 100%; height: 64px; background: #050805; border: 1px solid #1a2a1a; box-shadow: inset 0 0 8px rgba(0,40,0,.6); image-rendering: pixelated; }
.wa-lcd { margin-top: 5px; background: #07120a; border: 1px solid #16301c; border-radius: 2px; padding: 4px 7px; font-family: "Courier New", monospace; }
.wa-track { color: #28e070; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 5px rgba(40,224,112,.5); }
.wa-sub { color: #1c9c4f; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.wa-ctrls { display: flex; align-items: center; gap: 5px; padding: 7px 8px; background: linear-gradient(#2c2c2c, #1d1d1d); border-bottom: 1px solid #000; }
.wa-btn { background: linear-gradient(#4a4a4a, #2b2b2b); color: #e8e8e8; border: 1px solid #111; border-radius: 3px; padding: 3px 8px; font-size: 13px; cursor: pointer; }
.wa-btn:hover { background: linear-gradient(#5a5a5a, #353535); }
.wa-btn:active { background: #222; }
.wa-play { min-width: 34px; font-weight: 700; }
.wa-vol-wrap { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 12px; }
.wa-vol { width: 80px; }

.wa-list-h { background: #232323; color: #9fb0c8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 4px 8px; border-bottom: 1px solid #000; }
.wa-list { max-height: 200px; overflow-y: auto; background: #141414; }
.wa-st { display: flex; flex-direction: column; padding: 5px 9px; border-bottom: 1px solid #1f1f1f; cursor: pointer; }
.wa-st:hover { background: #20283a; }
.wa-st.on { background: #2a3a22; box-shadow: inset 3px 0 0 #7CFC00; }
.wa-st-name { color: #e6e6e6; font-size: 12px; font-weight: 600; }
.wa-st-genre { color: #8a8a8a; font-size: 10px; }
.wa-empty { color: #888; font-size: 12px; padding: 12px; text-align: center; }

/* ===== ACP track uploader rows ===== */
.radio-up { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; padding: 8px; border: 1px dashed rgba(127,127,127,.4); border-radius: 5px; }
.radio-up input[type="text"] { width: 140px; }
.radio-up-status { font-size: 12px; opacity: .8; }
.radio-track-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.radio-track-row .muted { font-size: 12px; }
.radio-admin-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.radio-admin-form label { font-size: 12px; }
.radio-inline { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.radio-kind { align-self: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: rgba(124,252,0,.15); color: #5a9a2a; padding: 2px 7px; border-radius: 9px; }
.radio-tracks { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(127,127,127,.2); }