#h3-queue-root{display:none!important}
body.h3-queue-open .main-stage{visibility:hidden}
#h3-queue-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:274px;
  z-index:8;
  overflow:auto;
  background:var(--canvas);
  padding:34px clamp(26px,3.2vw,58px) 48px;
}
#h3-queue-panel[hidden]{display:none!important}
.queue-workspace{display:flex;flex-direction:column;gap:18px}
.queue-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.queue-head h2{margin:0;font-size:28px;letter-spacing:-.03em}
.queue-head p{margin:6px 0 0;color:var(--muted);font-size:13px}
.queue-counts{display:flex;flex-wrap:wrap;gap:8px}
.queue-counts span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--ink-soft);font-size:12px}
.queue-counts b{color:var(--ink);margin-right:4px}
.queue-filter,.queue-pagination button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--ink-soft);font:inherit;font-size:12px;cursor:pointer}
.queue-filter:hover,.queue-filter[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.queue-filter:focus-visible,.queue-pagination button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.queue-pagination{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:12px}
.queue-clear{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  cursor:pointer;
}
.queue-clear:hover{border-color:var(--accent);color:var(--accent)}
.queue-clear:disabled{opacity:.6;cursor:default}
.queue-empty{background:var(--surface);border:1px dashed var(--line-strong);border-radius:20px;padding:48px 24px;text-align:center;color:var(--muted)}
.queue-list{display:flex;flex-direction:column;gap:14px}
.queue-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow)}
.queue-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.queue-id{color:var(--faint);font-size:12px}
.queue-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px}
.queue-status i{width:7px;height:7px;border-radius:50%;background:currentColor}
.queue-status.accepted,.queue-status.queued,.queue-status.submitting{color:#c7c4bd;background:#ffffff10}
.queue-status.running{color:#91a1ff;background:#91a1ff1f}
.queue-status.completed{color:#76c7a4;background:#76c7a41f}
.queue-status.error,.queue-status.cancelled{color:#ef8585;background:#ef85851f}
.queue-times{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin:14px 0}
.queue-times div{background:var(--field);border-radius:12px;padding:10px 12px}
.queue-times small{display:block;color:var(--muted);font-size:11px}
.queue-times b{display:block;margin-top:4px;font-size:13px;font-weight:600}
.queue-prompt{white-space:pre-wrap;background:var(--field);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.55;max-height:160px;overflow:auto;color:var(--ink-soft)}
.queue-mats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.queue-mat{width:72px;border-radius:10px;overflow:hidden;background:var(--field);border:1px solid var(--line)}
.queue-mat img,.queue-mat video{width:72px;height:72px;object-fit:cover;display:block}
.queue-mat span{display:block;padding:4px 6px;font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;color:var(--muted);font-size:12px}
.queue-actions{display:flex;gap:8px}
.queue-actions button{border:0;border-radius:10px;padding:6px 12px;background:var(--accent-soft);color:var(--ink);cursor:pointer}
.queue-error{margin-top:8px;color:var(--danger);font-size:12px}
.history-player{
  background:#050606;
  place-items:center;
  display:grid;
  overflow:hidden;
}
.history-player>.preview-frame{
  max-width:100%;
  max-height:100%;
}
.history-player>.preview-frame.portrait{
  width:auto;
  height:100%;
}
.history-player>.preview-frame.landscape,
.history-player>.preview-frame.square{
  width:100%;
  height:auto;
}
.history-player>video{
  width:auto!important;
  height:auto!important;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  background:#050606;
  justify-self:center;
  align-self:center;
}
@media (max-width:900px){
  #h3-queue-panel{left:0}
  .queue-times{grid-template-columns:1fr 1fr}
}