/* ============================================================
   Live song-request queue — interactive demo
   ============================================================ */
.qd{
  --pad: 22px;
  width:100%; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:var(--pad); position:relative;
  font-size:15px;
}
.qd--compact{ font-size:14px; }

/* client branding banner — event artwork (matches the artwork's aspect so it shows in full) */
.qd-banner{
  aspect-ratio:1000 / 280; border-radius:var(--r); position:relative; overflow:hidden;
  background-color:var(--bg-tint-2);
}
.qd-banner img{ width:100%; height:100%; object-fit:cover; display:block; }

/* list */
.qd-list{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }

.qd-item{
  display:flex; align-items:center; gap:13px;
  background:#fff; border:1px solid var(--line-soft); border-radius:14px;
  padding:11px 12px 11px 12px; will-change:transform;
}
.qd-item.is-pulse{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.qd-item.is-fresh{ animation:freshin .6s var(--ease) both; }
@keyframes freshin{ from{ opacity:0; transform:translateY(-8px) scale(.98); } to{ opacity:1; transform:none; } }
.qd-ava{
  width:36px; height:36px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-tint-2); color:var(--accent-ink); font-weight:700; font-size:14px;
}
.qd-item-main{ flex:1; min-width:0; }
.qd-item-title{ font-weight:600; color:var(--ink); letter-spacing:-.01em; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qd-item-sub{ font-size:12.5px; color:var(--muted); margin-top:1px; }
.qd-by{ color:var(--accent-ink); font-weight:500; }
.qd-bar{ height:3px; border-radius:2px; background:var(--line); margin-top:8px; overflow:hidden; }
.qd-bar i{ display:block; height:100%; border-radius:2px; background:linear-gradient(90deg,#2d6bff,#7aa0ff); transition:width .55s var(--ease); }

.qd-vote{
  flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  width:50px; height:50px; border-radius:13px;
  background:#fff; border:1px solid var(--line); color:var(--ink-soft);
  transition:transform .2s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.qd-vote-ic{ width:16px; height:16px; }
.qd-vote-n{ font-size:12.5px; font-weight:700; }
.qd-vote:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.qd-vote:active{ transform:scale(.94); }
.qd-vote.is-voted{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--shadow-blue); }

/* request bar */
.qd-request{
  display:flex; align-items:center; gap:10px; margin-top:16px;
  background:var(--bg-tint); border:1px solid var(--line); border-radius:14px;
  padding:7px 7px 7px 14px; transition:border-color .2s, box-shadow .2s;
}
.qd-request:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:#fff; }
.qd-request-ic{ width:18px; height:18px; color:var(--muted); flex:none; }
.qd-request input{ flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:14.5px; color:var(--ink); min-width:0; }
.qd-request input::placeholder{ color:var(--muted); }
.qd-request-btn{
  flex:none; height:38px; padding:0 18px; border-radius:10px;
  background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  transition:background .2s, transform .2s;
}
.qd-request-btn:hover{ background:var(--accent-deep); transform:translateY(-1px); }
.qd-request-btn:active{ transform:scale(.96); }