* { box-sizing: border-box; }
body {
  margin: 0; background: #101014; color: #e8e8ec;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
header {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 20px; background: #17171d; border-bottom: 1px solid #26262e;
  position: sticky; top: 0; z-index: 5;
}
h1 { font-size: 17px; margin: 0; display: flex; align-items: center; gap: 8px; letter-spacing: .02em; }
h1 .logo { width: 24px; height: 24px; border-radius: 6px; display: block; }
h2 { font-size: 14px; margin: 0 0 10px; color: #b9b9c6; text-transform: uppercase; letter-spacing: .05em; }
nav { display: flex; gap: 6px; }
header .spacer { flex: 1; }
header #who { margin: 0; }
.tab {
  background: none; border: 1px solid transparent; color: #9a9aa8;
  padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.tab.active { background: #23232d; color: #fff; border-color: #33333f; }
main { max-width: 1200px; margin: 0 auto; padding: 20px; }
.panel {
  background: #17171d; border: 1px solid #26262e; border-radius: 10px;
  padding: 16px; margin-bottom: 16px;
}
.row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; align-items: end; }
.row.spread { justify-content: space-between; align-items: center; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9a9aa8; }
label.wide { width: 100%; }
label.check { flex-direction: row; align-items: center; gap: 6px; }
input, select, textarea {
  background: #101016; border: 1px solid #2c2c38; color: #e8e8ec;
  border-radius: 6px; padding: 7px 9px; font: inherit; min-width: 120px;
}
textarea { width: 100%; resize: vertical; }
button { font: inherit; cursor: pointer; border-radius: 6px; border: none; }
.primary { background: #4f6ef7; color: #fff; padding: 10px 18px; font-weight: 600; }
.primary:hover { background: #6280ff; }
.secondary { background: #23232d; color: #d5d5e0; padding: 7px 12px; border: 1px solid #33333f; }
.secondary:hover { background: #2b2b37; }
.est { color: #8fd18f; margin-right: 10px; font-variant-numeric: tabular-nums; }
.msg { color: #f2a3a3; min-height: 1em; }

.hint { color: #8b8b9a; font-size: 13px; margin: 4px 0 10px; }
.big-hint { text-align: center; padding: 28px 0; font-size: 14px; line-height: 1.8; }
.primary.big { width: 100%; padding: 14px; font-size: 16px; margin-top: 10px; }
details summary { color: #8b8b9a; cursor: pointer; font-size: 13px; }

.qrow {
  border: 1px solid #2c2c38; border-radius: 8px; margin-bottom: 8px;
  background: #131319; padding: 8px 10px;
}
.qmain { display: flex; align-items: center; gap: 10px; }
.qnum { color: #5c5c6c; font-size: 12px; min-width: 18px; text-align: right; }
input.qprompt { flex: 1; border: none; background: none; padding: 4px; min-width: 0; }
input.qprompt:focus { outline: 1px solid #33333f; border-radius: 4px; }
span.qprompt { flex: 1; padding: 4px; }
.muted { color: #b9b9c6; }
.qcost { color: #8fd18f; font-size: 12px; font-variant-numeric: tabular-nums; }
.qbtn { background: none; color: #7c7c8c; font-size: 12px; padding: 2px 6px; }
.qbtn:hover { color: #e8e8ec; }
.qoptions { border-top: 1px solid #23232b; margin-top: 8px; padding-top: 10px; }
.shots .shot { display: flex; gap: 8px; margin-bottom: 6px; }
.shots .shot input.p { flex: 1; }
.shots .shot input.d { width: 64px; min-width: 64px; }
.frames { display: flex; gap: 16px; margin-top: 8px; }
.frames .thumb { height: 44px; border-radius: 4px; border: 1px solid #2c2c38; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #23232b; }
th { color: #8b8b9a; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #1b1b23; }
.status { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.status.running { background: #2c3a5e; color: #9db8ff; }
.status.complete { background: #23402a; color: #8fd18f; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cell {
  border: 2px solid #26262e; border-radius: 10px; overflow: hidden; background: #131319;
}
.cell.selected { border-color: #4f6ef7; }
.cell video { width: 100%; display: block; background: #000; aspect-ratio: 16/9; }
.cell .meta { padding: 8px 10px; font-size: 12px; color: #9a9aa8; }
.cell .meta .prompt { color: #d5d5e0; margin-bottom: 4px; max-height: 3em; overflow: hidden; }
.badge { float: right; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.keep { background: #23402a; color: #8fd18f; }
.badge.kill { background: #46232a; color: #f2a3a3; }
.badge.partial { background: #453c1e; color: #ecd287; }
.chip {
  background: none; border: 1px solid #33333f; color: #9a9aa8;
  padding: 4px 12px; border-radius: 20px; font-size: 12px; margin-left: 4px;
}
.chip.active { background: #23232d; color: #fff; }
.keys { color: #7c7c8c; font-size: 12px; text-align: center; padding: 10px; }
.lib-group { margin-bottom: 24px; }
.lib-group h3 {
  font-size: 12px; color: #b9b9c6; text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 10px; border-bottom: 1px solid #23232b; padding-bottom: 6px;
}
.hint-inline { color: #6c6c7c; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.keys b { color: #b9b9c6; }
#failed-list { margin-top: 16px; font-size: 13px; }
#failed-list .f { padding: 10px 0; border-top: 1px solid #26262e; color: #d5d5e0; }
#failed-list .ferr { color: #f2a3a3; margin: 2px 0 8px; }
#failed-list button { margin-right: 8px; }

.msg.ok { color: #8fd18f; }

.helper { color: #8b8b9a; font-size: 12px; line-height: 1.6; margin: 8px 0 2px; }
.helper b { color: #b9b9c6; }
.combo { display: flex; gap: 6px; }
.combo select { min-width: 140px; }
.combo input { min-width: 130px; }

.switchlabel { justify-content: center; }
.switchrow { display: flex; align-items: center; gap: 8px; height: 33px; }
.switchrow em { font-style: normal; color: #b9b9c6; font-size: 13px; min-width: 22px; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i {
  position: absolute; inset: 0; border-radius: 24px; background: #2c2c38;
  border: 1px solid #3a3a48; transition: background .2s ease;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #9a9aa8; transition: transform .2s ease, background .2s ease;
}
.switch input:checked + i { background: #2f4a86; border-color: #4f6ef7; }
.switch input:checked + i::after { transform: translateX(18px); background: #cdd8ff; }
.switch input:focus-visible + i { outline: 2px solid #4f6ef7; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .switch i, .switch i::after, .pulse { transition: none; animation: none; }
}

textarea.qprompt {
  flex: 1; border: none; background: none; padding: 4px; min-width: 0;
  resize: none; font: inherit; color: #e8e8ec; line-height: 1.4;
  overflow: hidden; /* autoGrow() owns the height — no inner scrollbar */
}
textarea.qprompt:focus { outline: 1px solid #33333f; border-radius: 4px; }
.qmain { align-items: flex-start; }
.qmain > .qnum { padding-top: 6px; }
.qmain > .qcost, .qmain > .qbtn, .qmain > .tag, .qmain > .qcount { margin-top: 5px; }

.qcount { color: #6c6c7c; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qcount.warn { color: #ecd287; }
.qcount.over { color: #f2a3a3; font-weight: 600; }
.warn-text { color: #ecd287; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.tag {
  background: #23232d; color: #9db8ff; border-radius: 10px;
  padding: 1px 8px; font-size: 11px; white-space: nowrap;
}

.gen-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px dashed #33333f; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; background: #131319;
}
.gen-row .gp { flex: 1; color: #d5d5e0; }
.gen-row .gs { color: #9db8ff; font-size: 12px; white-space: nowrap; }
.pulse {
  width: 9px; height: 9px; border-radius: 50%; background: #4f6ef7;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

.actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vbtn {
  background: #1c1c24; border: 1px solid #2c2c38; color: #b9b9c6;
  font-size: 11px; padding: 3px 8px; border-radius: 12px;
}
.vbtn:hover { background: #26262f; color: #fff; }
.vbtn.on.keep { background: #23402a; color: #8fd18f; border-color: #2f5a39; }
.vbtn.on.partial { background: #453c1e; color: #ecd287; border-color: #5e522a; }
.vbtn.on.kill { background: #46232a; color: #f2a3a3; border-color: #613039; }