.queues { display: grid; gap: 8px; margin-top: 6px; }
.clone-queue { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; }
.clone-queue.is-only-clone { grid-template-columns: minmax(0, 1fr); }
.clone-queue.is-only-clone .clone-queue-heading { display: none; }
.clone-queue-heading { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 5px; border-radius: 5px; cursor: pointer; }
.clone-queue.is-selected .clone-queue-heading { color: var(--accent); border-color: var(--accent); }
.queue { display: flex; gap: 4px; margin: 0; padding: 3px 0; overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--line); list-style: none; scrollbar-color: #536358 transparent; scrollbar-width: thin; }
.queue::-webkit-scrollbar { height: 6px; }
.queue::-webkit-scrollbar-track { background: transparent; }
.queue::-webkit-scrollbar-thumb { border-radius: 999px; background: #536358; }
.queue::-webkit-scrollbar-thumb:hover { background: #6f8873; }
.queue li { position: relative; display: grid; place-items: center; flex: 0 0 28px; height: 28px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); cursor: pointer; }
.queue li.cursor-before::before, .queue.cursor-at-end::after { content: ''; position: absolute; top: 0; height: 28px; border-left: 2px solid var(--accent); }
.queue li.cursor-before::before { left: -4px; }
.queue.cursor-at-end::after { position: relative; left: 0; box-sizing: border-box; flex: 0 0 2px; }
.queue li.active { border-color: var(--accent); color: var(--accent); background: linear-gradient(to right, rgb(130 196 108 / .28) var(--queue-progress), transparent var(--queue-progress)); }
.queue li.complete { opacity: .45; }
.queue li svg { width: 14px; height: 14px; }
.count { color: var(--muted); font-size: .75rem; }