:root { color-scheme: dark; }
body { font-family: Inter, system-ui, sans-serif; margin: 0; background: #111827; color: #e5e7eb; }
main { max-width: 1000px; margin: 0 auto; padding: 1rem; }
.controls { display: grid; gap: .7rem; background: #1f2937; padding: 1rem; border-radius: .75rem; margin-bottom: 1rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
label { display: grid; gap: .3rem; flex: 1; min-width: 220px; }
input { padding: .6rem; border-radius: .5rem; border: 1px solid #374151; background: #111827; color: #fff; width: 100%; box-sizing: border-box; }
button { background: #2563eb; color: #fff; padding: .65rem 1rem; border: 0; border-radius: .5rem; cursor: pointer; }
.check { grid-template-columns: auto 1fr; align-items: center; display: grid; }
.viewer { margin-top: 1rem; background: #1f2937; padding: 1rem; border-radius: .75rem; }
video, iframe { width: 100%; aspect-ratio: 16/9; background: black; border-radius: .5rem; border: 1px solid #374151; }
iframe { display: none; }
.note { color: #9ca3af; font-size: .9rem; }
#status { color: #93c5fd; min-height: 1rem; }
#queueList { margin: 0; padding-left: 1.25rem; color: #cbd5e1; }
#queueList li.active { color: #93c5fd; font-weight: 700; }
.links a { color: #93c5fd; text-decoration: none; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }