:root {
  --bg: #07080c;
  --ink: #d7f7e8;
  --muted: #6f8f7e;
  --card: #0e1218;
  --line: #1f3d32;
  --accent: #3dff9a;
  --bad: #ff4d6d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: baseline;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
h1 { margin: 0; font-size: 1.1rem; letter-spacing: 0.28em; color: var(--accent); }
a.nav {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
a.nav {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
h2 {
  margin: 0 0 10px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.status { margin: 0; color: var(--muted); font-size: 0.85rem; }
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.chips li {
  font-size: 0.7rem;
  border: 1px solid var(--line);
  padding: 3px 7px;
  color: var(--muted);
}
.chips .ok { color: var(--accent); border-color: #245c40; }
.chips .bad { color: var(--bad); border-color: #5c2430; }
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 220px;
  gap: 12px;
  padding: 12px 20px 48px;
}
@media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }
.col, aside {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 14px;
}
.builder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.row-actions {
  display: flex;
  gap: 8px;
  margin: 8px 0 12px;
}
.row-actions button {
  background: #0a0d12;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.row-actions button:hover { border-color: var(--accent); color: var(--accent); }
.field {
  display: block;
  margin: 10px 0;
  color: var(--muted);
  font-size: 0.75rem;
}
select {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: #07080c;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px;
  font: inherit;
}
select.tone-night { color: #f0c36a; border-color: #f0c36a66; }
select.tone-golden { color: #e39b3d; border-color: #e39b3d66; }
select.tone-dusk { color: #d4896c; border-color: #d4896c66; }
select.tone-daylight { color: #7eb8e8; border-color: #7eb8e866; }
select.tone-overcast { color: #9aa7b2; border-color: #9aa7b266; }
select.tone-indoor { color: #e6c07b; border-color: #e6c07b66; }
select.tone-studio { color: #e8e0d4; border-color: #e8e0d466; }
select.tone-lowlight { color: #e08ab0; border-color: #e08ab066; }
.field.tone-night { color: #f0c36a; }
.field.tone-golden { color: #e39b3d; }
.field.tone-dusk { color: #d4896c; }
.field.tone-daylight { color: #7eb8e8; }
.field.tone-overcast { color: #9aa7b2; }
.field.tone-indoor { color: #e6c07b; }
.field.tone-studio { color: #e8e0d4; }
.field.tone-lowlight { color: #e08ab0; }
option.tone-night { color: #f0c36a; }
option.tone-golden { color: #e39b3d; }
option.tone-dusk { color: #d4896c; }
option.tone-daylight { color: #7eb8e8; }
option.tone-overcast { color: #9aa7b2; }
option.tone-indoor { color: #e6c07b; }
option.tone-studio { color: #e8e0d4; }
option.tone-lowlight { color: #e08ab0; }
.tone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 6px 0 10px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}
.tone-legend span { white-space: nowrap; }
.tone-legend .night { color: #f0c36a; }
.tone-legend .golden { color: #e39b3d; }
.tone-legend .dusk { color: #d4896c; }
.tone-legend .daylight { color: #7eb8e8; }
.tone-legend .overcast { color: #9aa7b2; }
.tone-legend .indoor { color: #e6c07b; }
.tone-legend .studio { color: #e8e0d4; }
.tone-legend .lowlight { color: #e08ab0; }
.presets { display: grid; gap: 8px; }
.preset-card {
  width: 100%;
  text-align: left;
  background: #0a0d12;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 10px;
  cursor: pointer;
  font: inherit;
}
.preset-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.preset-card b { display: block; color: var(--accent); }
.preset-card[hidden] { display: none !important; }
.library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.library button {
  padding: 0;
  border: 1px solid var(--line);
  background: #000;
  cursor: pointer;
}
.library button.selected { border-color: var(--accent); }
.library img { width: 100%; height: 68px; object-fit: cover; display: block; }
.drop {
  display: block;
  border: 1px dashed var(--line);
  padding: 16px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 12px;
}
.scene-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 6px 0 8px;
  font-size: 0.68rem;
}
.scene-legend span { padding: 1px 6px; border-radius: 3px; cursor: pointer; }
.scene-map {
  display: block;
  width: 100%;
  min-height: 8em;
  margin-top: 4px;
  margin-bottom: 8px;
  background: #07080c;
  border: 1px solid var(--line);
  padding: 8px;
  white-space: pre-wrap;
  line-height: 1.45;
  color: var(--ink);
  font-size: 0.78rem;
}
.scene-map .seg { border-radius: 2px; }
.scene-map .seg[data-drop] { cursor: pointer; }
.scene-map .seg.drop-hover, .scene-legend span.drop-hover { outline: 1px solid currentColor; }
.seg-shot { color: #8fd3ff; background: #8fd3ff22; }
.seg-appearance { color: #e8a0c8; background: #e8a0c822; }
.seg-makeup { color: #f3c4de; background: #f3c4de22; }
.seg-hair { color: #e8c9a0; background: #e8c9a022; }
.seg-pose { color: #c4b5fd; background: #c4b5fd22; }
.seg-phone { color: #f5a97f; background: #f5a97f22; }
.seg-capture { color: #9ad7c2; background: #9ad7c222; }
.seg-hands { color: #a6da95; background: #a6da9522; }
.seg-look { color: #3dff9a; background: #3dff9a22; }
.seg-hat { color: #f5d67b; background: #f5d67b22; }
.seg-glasses { color: #7ec8e8; background: #7ec8e822; }
.seg-jewelry { color: #e8c56a; background: #e8c56a22; }
.seg-location { color: #7eb8e8; background: #7eb8e822; }
.seg-location.tone-night { color: #f0c36a; background: #f0c36a22; }
.seg-location.tone-golden { color: #e39b3d; background: #e39b3d22; }
.seg-location.tone-dusk { color: #d4896c; background: #d4896c22; }
.seg-location.tone-daylight { color: #7eb8e8; background: #7eb8e822; }
.seg-location.tone-overcast { color: #9aa7b2; background: #9aa7b222; }
.seg-location.tone-indoor { color: #e6c07b; background: #e6c07b22; }
.seg-location.tone-studio { color: #e8e0d4; background: #e8e0d422; }
.seg-location.tone-lowlight { color: #e08ab0; background: #e08ab022; }
.seg-lighting { color: #e39b3d; background: #e39b3d22; }
.seg-lighting.tone-night { color: #f0c36a; background: #f0c36a22; }
.seg-lighting.tone-golden { color: #e39b3d; background: #e39b3d22; }
.seg-lighting.tone-dusk { color: #d4896c; background: #d4896c22; }
.seg-lighting.tone-daylight { color: #7eb8e8; background: #7eb8e822; }
.seg-lighting.tone-overcast { color: #9aa7b2; background: #9aa7b222; }
.seg-lighting.tone-indoor { color: #e6c07b; background: #e6c07b22; }
.seg-lighting.tone-studio { color: #e8e0d4; background: #e8e0d422; }
.seg-lighting.tone-lowlight { color: #e08ab0; background: #e08ab022; }
.seg-camera { color: #f0c36a; background: #f0c36a22; }
.seg-vehicle { color: #e08ab0; background: #e08ab022; }
.field.is-car-only { display: none; }
body.scene-car .field.is-car-only { display: block; }
body.catalog-kurvy #shotField { display: none; }
.seg-identity { color: #b8c0e0; background: #b8c0e022; }
.seg-quality { color: #9aa7b2; background: #9aa7b222; }
.seg-boilerplate { color: #6f8f7e; background: #6f8f7e18; }
.seg-glue { color: var(--muted); background: transparent; }
.seg-trigger, .seg-body { color: var(--muted); background: transparent; }
textarea, input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: #07080c;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px;
  font: inherit;
}
.wan-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
button#go {
  width: 100%;
  margin-top: 8px;
  background: var(--accent);
  color: #04140c;
  border: 0;
  padding: 12px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
}
.wan-actions button#go { margin-top: 0; }
button#upscale {
  width: 100%;
  background: #1a3d32;
  color: #c8f5dc;
  border: 1px solid var(--line);
  padding: 12px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
}
button#fourk {
  width: 100%;
  background: #241a3d;
  color: #e4d4ff;
  border: 1px solid var(--line);
  padding: 12px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
}
.hist-card {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 1px solid var(--line);
  background: #000;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hist-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #000; }
.hist-card p { margin: 0; padding: 6px; font-size: 0.72rem; }
.hist-card.selected { outline: 2px solid var(--accent); }
.hist-card.is-good p { color: var(--accent); }
button:disabled { opacity: 0.5; }
.hint { color: var(--muted); font-size: 0.8rem; min-height: 1.1em; }
.steps { margin: 0 0 10px; padding-left: 16px; color: var(--muted); }
.steps li.on { color: var(--accent); }
.steps li.err { color: var(--bad); }
.job-log {
  white-space: pre-wrap;
  background: #07080c;
  border: 1px solid var(--line);
  padding: 8px;
  min-height: 4em;
  max-height: 240px;
  font-size: 0.75rem;
  overflow: auto;
}
.job-log-wrap {
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: 0.8rem;
}
.job-log-wrap summary {
  cursor: pointer;
  color: var(--accent);
}
.progress {
  margin: 8px 0 12px;
}
.progress-track {
  height: 10px;
  background: #070d0a;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.4s ease;
}
.progress-label {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
}
#out {
  width: 100%;
  border: 1px solid var(--line);
}
.used-prompt, .result a { color: var(--muted); font-size: 0.8rem; }
.result a { color: var(--accent); }
.last-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
}
.file-thumb {
  padding: 0;
  border: 1px solid var(--line);
  background: #000;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}
.file-thumb img { width: 100%; height: 78px; object-fit: cover; display: block; }
.file-thumb span { display: block; padding: 4px; font-size: 0.65rem; }
.history { display: grid; gap: 8px; }
.hist-item {
  padding: 0;
  border: 1px solid var(--line);
  background: #000;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.hist-item img { width: 100%; display: block; }
.hist-item p { margin: 0; padding: 6px; font-size: 0.72rem; }
.hist-placeholder { padding: 16px; text-align: center; }
.sweep-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px 20px 48px;
}
@media (max-width: 900px) { .sweep-layout { grid-template-columns: 1fr; } }
.col.wide { min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
button.ghost, .opt {
  background: #0a0d12;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
}
.opt.selected, button.ghost.selected {
  border-color: var(--accent);
  color: var(--accent);
}
#start {
  background: var(--accent);
  color: #04140c;
  border: 0;
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.legend { color: var(--muted); font-size: 0.75rem; line-height: 1.6; }
.src {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 1px 5px;
  margin-right: 4px;
  border: 1px solid var(--line);
}
.src-dev { color: var(--accent); border-color: #245c40; }
.src-added { color: #ffb020; border-color: #6a4c12; }
.prompt-box {
  white-space: pre-wrap;
  background: #07080c;
  border: 1px solid var(--line);
  padding: 8px;
  min-height: 10em;
  max-height: 240px;
  overflow: auto;
  font-size: 0.7rem;
}
.sweep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}
.sweep-card {
  padding: 0;
  background: #000;
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
  text-align: left;
  position: relative;
}
.sweep-card.selected { border-color: var(--accent); }
.sweep-card.origin-added { border-color: #6a4c12; }
.sweep-card.origin-dev { border-color: #245c40; }
.sweep-card.st-running { box-shadow: 0 0 0 1px var(--accent); }
.sweep-card.st-error { border-color: var(--bad); }
.sweep-card img, .sweep-card .ph {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  background: #0a0d12;
}
.sweep-card .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.sweep-card .src { position: absolute; top: 6px; left: 6px; background: #04140ccc; }
.sweep-card p { margin: 0; padding: 6px; font-size: 0.65rem; line-height: 1.35; }
.wan-layout [hidden] { display: none !important; }
.wan-layout #still, .wan-layout #out {
  max-width: 100%;
  border: 1px solid var(--line);
  margin: 8px 0;
}
.wan-layout .check {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.wan-views { display: flex; gap: 6px; }
.wan-views button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}
.wan-views button.on { color: #04140c; background: var(--accent); border-color: var(--accent); }
.wan-layout[hidden],
.wan-queue[hidden] { display: none !important; }
.wan-queue {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  padding: 8px 0 32px;
}
.queue-actions { grid-template-columns: 1fr 1fr; }
.queue-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.queue-lane h3 {
  margin: 0 0 10px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}
.queue-lane h3 label {
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
.queue-list { display: grid; gap: 14px; }
.q-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 10px;
}
.q-card.is-on { border-color: var(--accent); }
.q-card.is-running { outline: 2px solid #ffb020; }
.queue-lane.is-live h3 { color: #ffb020; }
.queue-progress { margin: 0 0 12px; }
.fps-preview { width: 100%; display: block; margin: 0 0 10px; background: #07080c; }
.fps-preview[hidden] { display: none !important; }
.queue-progress[hidden] { display: none !important; }
.q-bar { margin: 0 0 8px; }
.q-bar[hidden] { display: none !important; }
#queueHint.is-live { color: #ffb020; font-size: 0.95rem; }
.q-card.is-good { box-shadow: inset 3px 0 0 var(--accent); }
.q-card.is-good .q-meta { color: var(--accent); }
.q-shot { position: relative; }
.q-pick {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.q-card img { width: 100%; display: block; background: #07080c; }
.q-card textarea { margin-bottom: 8px; }
.q-card .q-meta { margin: 0 0 6px; color: var(--muted); font-size: 0.75rem; }
.q-card .q-drop {
  margin-top: 8px;
  background: transparent;
  color: var(--bad);
  border: 1px solid var(--line);
  padding: 6px 10px;
  font: inherit;
  cursor: pointer;
}
@media (max-width: 1100px) {
  .queue-lanes { grid-template-columns: 1fr; }
}
.wan-dl {
  font-size: 0.68rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 280px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #07080c;
  color: #9fd9b8;
}