:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif; background: #14151a; color: #e8e8ec; }
.hidden { display: none !important; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #1c1e26; border-bottom: 1px solid #2c2f3a; position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; font-size: 17px; }
.brand .sub { font-weight: 400; font-size: 12px; color: #9aa0ae; margin-left: 6px; }
.levelChip { font-size: 11px; background: #31344a; border-radius: 10px; padding: 2px 8px; margin-left: 6px; color: #b9c0ff; }
.actions button, .topbar button { margin-left: 6px; }
button { background: #2a2d3a; color: #e8e8ec; border: 1px solid #3a3e50; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
button:hover { background: #363a4c; }
button.primary { background: #4a5cff; border-color: #4a5cff; color: #fff; }
button.big { font-size: 18px; padding: 8px 16px; }
button:disabled { opacity: .4; cursor: default; }
input, textarea, select { background: #1f2129; border: 1px solid #3a3e50; color: #e8e8ec; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
input:focus, textarea:focus { outline: 1px solid #4a5cff; }
.card { background: #1b1d25; border: 1px solid #2c2f3a; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.landing { max-width: 420px; margin: 60px auto; padding: 0 16px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tab { flex: 1; }
.tab.active { background: #4a5cff; border-color: #4a5cff; color: #fff; }
label { display: block; margin-bottom: 10px; font-size: 13px; color: #9aa0ae; }
label input { width: 100%; margin-top: 4px; }
.err { color: #ff7b7b; font-size: 13px; margin-top: 8px; min-height: 18px; }
.hint { color: #9aa0ae; font-size: 12px; }
.chip { background: #31344a; border-radius: 10px; padding: 3px 10px; font-size: 12px; }
.layout { display: grid; grid-template-columns: 360px 1fr 260px; gap: 12px; padding: 12px; height: calc(100vh - 52px); }
.col { min-height: 0; display: flex; flex-direction: column; }
.col .card { overflow-y: auto; }
.queueCol .card, .memberCol .card { flex-shrink: 0; }
.playerCard { flex-shrink: 0; }
.np { display: flex; gap: 10px; align-items: center; }
.np img { width: 64px; height: 64px; border-radius: 8px; background: #2a2d3a; object-fit: cover; }
.npTitle { font-weight: 700; }
.npSub { color: #9aa0ae; font-size: 12px; margin-top: 4px; }
.controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.controls button { flex: 1; }
.seekRow { margin-top: 10px; }
.seekRow input { width: 100%; padding: 0; }
.seekRow .times { display: flex; justify-content: space-between; font-size: 11px; color: #9aa0ae; margin-top: 2px; }
.volRow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #9aa0ae; }
.volRow input { flex: 1; }
.listen { width: 100%; margin-top: 10px; }
.listen.on { background: #1e7a46; border-color: #1e7a46; }
#queue, #chat, #members { list-style: none; margin: 0; padding: 0; }
#queue li { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid #262936; font-size: 13px; }
#queue li[draggable="true"] { cursor: grab; }
#queue li.dragging { opacity: 0.35; }
#queue li.dropInd { height: 3px; background: #4a5cff; border-radius: 2px; margin: 2px 0; padding: 0; list-style: none; pointer-events: none; box-shadow: 0 0 6px #4a5cff; }
#queue li.playing { background: #232a45; border-radius: 8px; }
#queue .qTitle { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#queue .qMeta { color: #9aa0ae; font-size: 11px; flex-shrink: 0; }
#queue button { padding: 2px 7px; font-size: 11px; }
.chatCard { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#chat { flex: 1; overflow-y: auto; padding: 4px; }
#chat li { padding: 4px 8px; border-radius: 8px; font-size: 14px; word-break: break-word; }
#chat li .nick { font-weight: 700; margin-right: 6px; }
#chat li.sys { color: #9aa0ae; font-size: 12px; text-align: center; }
#chat li.notice { background: #3a2f14; border: 1px solid #6b5616; color: #ffd76a; text-align: center; font-size: 13px; }
#chat li .del { color: #7c8290; font-style: italic; }
#chat li .ed { color: #7c8290; font-size: 11px; margin-left: 4px; }
#chat li .ops { float: right; opacity: 0; }
#chat li:hover .ops { opacity: 1; }
#chat li .ops button { padding: 1px 6px; font-size: 11px; margin-left: 4px; }
#chatForm { display: flex; gap: 8px; margin-top: 8px; }
#chatForm input { flex: 1; }
#members li { display: flex; align-items: center; gap: 6px; padding: 5px 2px; font-size: 13px; border-bottom: 1px solid #262936; flex-wrap: wrap; }
#members .nick { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvl { background: #2f3350; color: #b9c0ff; border-radius: 8px; font-size: 11px; padding: 1px 7px; }
.lvl.owner { background: #5a3b12; color: #ffd76a; }
#members button { padding: 1px 6px; font-size: 10px; }
textarea { width: 100%; min-height: 70px; margin: 6px 0; font-family: ui-monospace, monospace; font-size: 12px; }
details summary { cursor: pointer; color: #9aa0ae; font-size: 13px; margin-top: 8px; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay .card { width: min(560px, 92vw); }
.overlay.wide .card { width: min(700px, 94vw); }
#myRooms { list-style: none; margin: 0 0 10px; padding: 0; }
#myRooms li { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #262936; }
#myRooms li button { margin-left: auto; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #262a38; border: 1px solid #4a5cff; color: #e8e8ec; padding: 10px 18px; border-radius: 10px; font-size: 13px; z-index: 50; transition: opacity .4s; opacity: 0; max-width: 80vw; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  .chatCard { min-height: 60vh; }
}

.roomThumb { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; margin-right: 6px; vertical-align: -6px; }
#configForm h3 { margin: 10px 0 6px; font-size: 13px; color: #9aa0ae; border-bottom: 1px solid #2c2f3a; padding-bottom: 4px; }
#configForm label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #e8e8ec; }
#configForm input[type="number"] { width: 90px; }
#configForm input[type="text"], #configForm input[type="password"] { flex: 1; }
button.danger { background: #7a2333; border-color: #a03a4e; color: #ffd7dd; }
button.danger:hover { background: #93303f; }
#myRooms li img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }

#queue .by { flex-shrink: 0; background: #2a2e40; color: #b9c0ff; border-radius: 9px; font-size: 11px; padding: 1px 8px; margin-left: auto; white-space: nowrap; }
#queue li.playing .by { background: #333a5e; }

.modeRow { display: flex; gap: 8px; margin-top: 8px; }
.modeRow button { flex: 1; font-size: 12px; padding: 5px 8px; }
button.on { background: #4a5cff; border-color: #4a5cff; color: #fff; }
#histBox { margin-top: 6px; }
#histBox summary { cursor: pointer; color: #9aa0ae; font-size: 12px; padding: 4px 0; }
#queueDone { list-style: none; margin: 0; padding: 0; }
#queueDone li { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12px; color: #a9aebb; opacity: 0.75; }
#queueDone li .qTitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#queueDone li .by { flex-shrink: 0; background: #262a3a; color: #8d93a8; border-radius: 8px; font-size: 10px; padding: 0 6px; }